Titanium: several videoplayers on one view - ios

I'm trying to create several video players in the titanium tableview (something like video gallery), but as i'm adding the video players in the loop, i get only the last in the loop video added.
Consider yGrid = 2, xGrid = 3, i have 6.mp4 only added.
for (var y = 0; y < yGrid; y++) {
var thisRow = Ti.UI.createTableViewRow({
className : "grid",
layout : "horizontal",
height : cellHeight + (2 * ySpacer),
backgroundColor : '#cfffffff',
selectionStyle: 'NONE',
backgroundImage : '/images/backg2.png'
});
var thisPlayer = [];
for (var x = 0; x < xGrid; x++) {
thisPlayer[x] = Titanium.Media.createVideoPlayer({
objName : "video-view",
objIndex : cellIndex.toString(),
left : ySpacer,
height : cellHeight,
width : cellWidth,
url: '/video/'+cellIndex.toString()+'.mp4',
mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT,
scalingMode : Titanium.Media.VIDEO_SCALING_MODE_SIZE,
zIndex : 10,
autoplay : false
});
thisRow.add(thisPlayer[x]);
cellIndex++;
}
tableData.push(thisRow);
}
var tableview = Ti.UI.createTableView({
left : 0,
top : App.geometry.menuHeight + App.geometry.lineHeight+5,
bottom : App.geometry.menuHeight + App.geometry.lineHeight,
width : '100%',
backgroundImage : '/images/backg2.png',
data : tableData
});
view.add(tableview);
Where is the issue?

Finally the issue was because IOS doesn't support several videoplayers in one time.
i've solved it like this
for (var x = 0; x < xGrid; x++) {
thisPlayer[x] = Ti.UI.createWebView({
objName : "video-view",
objIndex : cellIndex.toString(),
left : ySpacer,
height : cellHeight,
width : cellWidth,
});
thisPlayer[x].setHtml('<div><video width="100%" height="94%" controls><source src="./video/'+cellIndex.toString()+'.mp4" type="video/mp4"></video></div>');
thisRow.add(thisPlayer[x]);
cellIndex++;
}

Related

Highcharts sankey node without links

I have a highcharts sankey diagram with two sides:
There are situations where some of my nodes have empty links (=with 0 weight). I would like the node to being displayed despite having no link from or to it.
Any chance I can achieve this?
I read on this thread that I have to fake it with weight=1 connexions, I could make the link transparent, and twitch the tooltip to hide those, but that's very painful for something that feels pretty basic.
Maybe a custom call of the generateNode call or something?
Thanks for the help
You can use the following wrap to show a node when the weight is 0.
const isObject = Highcharts.isObject,
merge = Highcharts.merge
function getDLOptions(
params
) {
const optionsPoint = (
isObject(params.optionsPoint) ?
params.optionsPoint.dataLabels : {}
),
optionsLevel = (
isObject(params.level) ?
params.level.dataLabels : {}
),
options = merge({
style: {}
}, optionsLevel, optionsPoint);
return options;
}
Highcharts.wrap(
Highcharts.seriesTypes.sankey.prototype,
'translateNode',
function(proceed, node, column) {
var translationFactor = this.translationFactor,
series = this,
chart = this.chart,
options = this.options,
sum = node.getSum(),
nodeHeight = Math.max(Math.round(sum * translationFactor),
this.options.minLinkWidth),
nodeWidth = Math.round(this.nodeWidth),
crisp = Math.round(options.borderWidth) % 2 / 2,
nodeOffset = column.sankeyColumn.offset(node,
translationFactor),
fromNodeTop = Math.floor(Highcharts.pick(nodeOffset.absoluteTop, (column.sankeyColumn.top(translationFactor) +
nodeOffset.relativeTop))) + crisp,
left = Math.floor(this.colDistance * node.column +
options.borderWidth / 2) + Highcharts.relativeLength(node.options.offsetHorizontal || 0,
nodeWidth) +
crisp,
nodeLeft = chart.inverted ?
chart.plotSizeX - left :
left;
node.sum = sum;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (1) {
// Draw the node
node.shapeType = 'rect';
node.nodeX = nodeLeft;
node.nodeY = fromNodeTop;
let x = nodeLeft,
y = fromNodeTop,
width = node.options.width || options.width || nodeWidth,
height = node.options.height || options.height || nodeHeight;
if (chart.inverted) {
x = nodeLeft - nodeWidth;
y = chart.plotSizeY - fromNodeTop - nodeHeight;
width = node.options.height || options.height || nodeWidth;
height = node.options.width || options.width || nodeHeight;
}
// Calculate data label options for the point
node.dlOptions = getDLOptions({
level: (this.mapOptionsToLevel)[node.level],
optionsPoint: node.options
});
// Pass test in drawPoints
node.plotX = 1;
node.plotY = 1;
// Set the anchor position for tooltips
node.tooltipPos = chart.inverted ? [
(chart.plotSizeY) - y - height / 2,
(chart.plotSizeX) - x - width / 2
] : [
x + width / 2,
y + height / 2
];
node.shapeArgs = {
x,
y,
width,
height,
display: node.hasShape() ? '' : 'none'
};
} else {
node.dlOptions = {
enabled: false
};
}
}
);
Demo:
http://jsfiddle.net/BlackLabel/uh6fp89j/
In the above solution, another node arrangement would be difficult to achieve and may require a lot of modifications beyond our scope of support.
You can consider using mentioned "tricky solution", since might return a better positioning result. This solution is based on changing 0 weight nodes on the chart.load() event and converting the tooltip as well, so it may require adjustment to your project.
chart: {
events: {
load() {
this.series[0].points.forEach(point => {
if (point.weight === 0) {
point.update({
weight: 0.1,
color: 'transparent'
})
}
})
}
}
},
tooltip: {
nodeFormatter: function() {
return `${this.name}: <b>${Math.floor(this.sum)}</b><br/>`
},
pointFormatter: function() {
return `${this.fromNode.name} → ${this.toNode.name}: <b>${Math.floor(this.weight)}</b><br/>`
}
},
Demo:
http://jsfiddle.net/BlackLabel/0dqpabku/

i am new in action script. trying to split a sentence into words and show them in sprite.and also need which sprite i clicked

I am trying to split a sentence in to words and show them into sprite()
var sentence:String = "My name is Subhadip.";
var txt:Array = new Array();
var splittedSentence:Array = sentence.split(" ");
var myArraySprites:Array = new Array();
var myTextImage:Array = new Array();
var div = 40;
for (var i:int = 0; i < splittedSentence.length; i++)
{
var v = 300 - (div * i);
//...
txt[i] = new TextField();
txt[i].autoSize = TextFieldAutoSize.CENTER;
txt[i].text = splittedSentence[i];
var format1:TextFormat = new TextFormat();
format1.size = 24;
txt[i].setTextFormat(format1);
trace(txt[i]);
myArraySprites[i] = new Sprite();
myArraySprites[i].graphics.lineStyle(1, 0x000000, 1);
myArraySprites[i].buttonMode = true;
myArraySprites[i].graphics.beginFill( 0xfffffff );
myArraySprites[i].graphics.drawRect(50, v, 150, div);
myTextImage[i] = new BitmapData(100,v,true,0xffffff);
myTextImage[i].draw(txt[i]);
trace(myTextImage[i]);
//myArraySprites[i].graphics.beginBitmapFill(myTextImage[i]);
//myArraySprites[i].graphics.endFill();
myArraySprites[i].addChild(new Bitmap(myTextImage[i]));
addChild(myArraySprites[i]);
myArraySprites[i].addEventListener(MouseEvent.CLICK, removeThis);
}
function removeThis(e:MouseEvent):void
{
var clickTarget:int = myArraySprites.indexOf(e.currentTarget);
trace("Clicked sprite (id): " + clickTarget);
}
[enter image description here][1]
trying to split a sentence into words and show them in sprite.and also need which sprite i clicked
[1]: https://i.stack.imgur.com/RzHUQ.png
The problem is that you're dealing with screen positions in two different places:
myArraySprites[i].graphics.drawRect(50, v, 150, div);
and
myTextImage[i] = new BitmapData(100,v,true,0xffffff);
Think of it in a more object-oriented way. Each Sprite instance you want to be clickable is a single object. As such it also holds the main properties e.g. the on-screen position determined by it's x and y properties.
Each of those sprites have equal width & height, so make this a global property.
var wid:Number = 150;
var hei:Number = 40;
If we look at your .png, we can see that you want to have a single word centered inside such a sprite. To make things easier, we can use the .align property of the TextFormat class, set it to "center" and make each TextField 150 x 40 by using the wid and hei properties.
Finally each sprite's vertical screen position is shifted up by hei == 40 pixels. So let's determine a start position:
var yPos:Number = 300;
assign it to a sprite instance:
myArraySprites[i].x=50;
myArraySprites[i].y=yPos;
and decrement it by hei inside the for-loop.
Everything put together:
var yPos:Number = 300;
var wid:Number = 150;
var hei:Number = 40;
var sentence:String = "My name is Subhadip.";
var txt:TextField = new TextField();
txt.width = wid;
txt.height = hei;
var format1:TextFormat = new TextFormat();
format1.size = 24;
format1.align = "center";
var splittedSentence:Array = sentence.split(" ");
var myTextImage:Array = new Array();
for (var i:int = 0; i<splittedSentence.length; i++)
{
txt.text = splittedSentence[i];
txt.setTextFormat(format1);
myArraySprites[i] = new Sprite();
myArraySprites[i].x = 50;
myArraySprites[i].y = yPos;
myArraySprites[i].graphics.lineStyle(1, 0x000000, 1);
myArraySprites[i].buttonMode = true;
myArraySprites[i].graphics.beginFill(0xfffffff);
myArraySprites[i].graphics.drawRect(0, 0, wid, hei);
myTextImage[i] = new BitmapData(wid, hei, true, 0xffffff);
myTextImage[i].draw(txt);
myArraySprites[i].addChild(new Bitmap(myTextImage[i]));
addChild(myArraySprites[i]);
myArraySprites[i].addEventListener(MouseEvent.CLICK, removeThis);
yPos -= hei;
}

Highcharts : Set an y offset to the series

Situation : Chart with some analogic-series and some digital-series (0-1).
The problem is with the digital series. I would like to make sure that the series do not overlap like the image 1.
My idea is to set an "y-offset" on the digital-series, to have a result like the image 2.
This is a part of the y Axis configuration of the digital series. All the digital-series is related to a single y Axis (with id digital).
id : "digital",
min: 0,
max : 1,
ceiling:1,
floor : 0,
tickInterval: 1
Image 1.
Image 2.
In the documentation i can't find anything that can help me. And this is not my case.
UPDATE
Example on JSFIDDLE. Look (yes it's impossible currently) at the digital series with green color.
If you add a function in the load event, you can change the value of y in a way that makes it look offset. Like this:
chart: {
events: {
load: function() {
var series = this.series;
for (var i = 0; i < series.length; i++) {
if (series[i].yAxis.userOptions.id == "digital") {
for (var j = 0; j < series[i].data.length; j++) {
if (series[i].data[j].y == 1) {
series[i].data[j].y = 1 + 0.1 * i;
} else {
series[i].data[j].y = 0
}
}
this.update(series, true, false);
}
}
}
}
}
This sets the new y value equal to 0.1 * the series index.
Working example: https://jsfiddle.net/u2pzrhgk/27/

openlayer 3: how to add visible pan control

openlayer 2.13 has a visible pan control but not ol3.
I tried adding one here: http://jsfiddle.net/tr8691ev/13/
var v=map.getView();
var c=v.getCenter();
c[1]=+2;
// p=ol.animation.pan({duration:600,source:v.getCenter()});
//map.beforeRender(p);
v.setCenter(c,v.getZoom());
This one doesn't work as it should.
What is wrong with it? Thanks.
I did a function to change the center if user pan outside an area.
In this case is important handle the resolution of the map to know how big is the area depending on zoom.
In your case when user click left you should change center
var mapHorizontalMove = (mapSize[0] * resolution) / 10.0;
var mapVerticalMove = (mapSize[1] * resolution) / 10.0;
//left
center[0] -= mapHorizontalMove;
//right
center[0] += mapHorizontalMove;
//down
center[1] -= mapVerticalMove ;
//up
center[1] += mapVerticalMove ;
Mysample:
var maxExtent = [-79.59975, -1.200, -53.03076, 13.72883];
view.on('change:center', function (evt) {
var center = view.getCenter();
var x = center[0];
var y = center[1];
var resolution = view.getResolution();
var mapSize = map.getSize();
var mapHalfWidth = (mapSize[0] * resolution) / 2.0;
var mapHalfHeight = (mapSize[1] * resolution) / 2.0;
if (center[0] - mapHalfWidth < maxExtent[0]) {
x = maxExtent[0] + mapHalfWidth;
} else if (center[0] + mapHalfWidth > maxExtent[2]) {
x = maxExtent[2] - mapHalfWidth;
}
if (center[1] - mapHalfHeight < maxExtent[1]) {
y = maxExtent[1] + mapHalfHeight;
} else if (center[1] + mapHalfHeight > maxExtent[3]) {
y = maxExtent[3] - mapHalfHeight;
}
if (center[0] != x || center[1] != y) {
view.setCenter([x, y]);
}
});
.:| Just for whom witch reaches here like Me |:.
If you have got a OpenLayers' map without any controls visible,
And every thing seems Ok in your code,
Just add ol.css in your Head tag and all will be come back.

iPad swipe Gesture Mobile Safari

I have been googling around for a bit and am trying to determine how to do a simple swipe event across an html element such as a div, to cause some action to happen in javascript.
<div id="swipe_me">
Swipe Test
</div>
Can someone show me or point me to some documentation?
javascript.
something a bit like (untested code)
onInitialized: function(e, slider) {
var time = 1000, // allow movement if < 1000 ms (1 sec)
range = 100, // swipe movement of 50 pixels triggers the slider
x = 0, t = 0, touch = "ontouchend" in document,
st = (touch) ? 'touchstart' : 'mousedown',
mv = (touch) ? 'touchmove' : 'mousemove',
en = (touch) ? 'touchend' : 'mouseup';
slider.$window
.bind(st, function(e){
// prevent image drag (Firefox)
e.preventDefault();
t = (new Date()).getTime();
x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
})
.bind(en, function(e){
t = 0; x = 0;
})
.bind(mv, function(e){
e.preventDefault();
var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
r = (x === 0) ? 0 : Math.abs(newx - x),
// allow if movement < 1 sec
ct = (new Date()).getTime();
if (t !== 0 && ct - t < time && r > range) {
if (newx < x) { slider.goForward(); }
if (newx > x) { slider.goBack(); }
t = 0; x = 0;
}
});
}

Resources