I'm creating an app with some annotations. Now I need to handle a click on costume the annotations. I have tried to put the click event on each annotation or on the mapView but none seams to work. I have tried this:
this is how I create my costume annotations:
var pins = [];
var imgTemp = Ti.UI.createImageView({
image : "/images/p_" + keys[j] + ".png"
});
var alturaImg = imgTemp.toBlob().height;
var larguraImg = imgTemp.toBlob().width;
var alturaImgNova = deviceHeight * 0.04;
var fator = alturaImg / alturaImgNova;
var larguraImgNova = larguraImg / fator;
var annottion = MapModule.createAnnotation({
latitude : pontos2[keys[j]][i].Lat,
longitude : pontos2[keys[j]][i].Long,
pincolor : MapModule.ANNOTATION_VIOLET,
customView : Ti.UI.createImageView({
height : alturaImgNova,
width : larguraImgNova,
image : "/images/p_" + keys[j] + ".png"
}),
draggable : false,
id : id
});
pins.push(pins);
mapview.addAnnotations(pins);
click on the annotation:
MyAnnotation.addEventListener('click', function() {
alert("click");
});
click on the mapView:
mapview.addEventListener('click', function() {
alert("click");
});
On android the mapView click event works fine. The problem is on IOS.
For IOS, you have to set canShowCallout to false.
create annotation :
var annotation = MapModule.createAnnotation({
latitude : annotations[i].latitude,
longitude : annotations[i].longitude,
myid : i
});
if (OS_IOS) {
annotation.image = "/images/icn_map_location.png";
annotation.canShowCallout = false;
} else {
annotation.customView = Ti.UI.createLabel({
width : 48,
height : 58,
backgroundImage : "/images/icn_map_location.png"
});
}
click on the mapView:
mapView.addEventListener("click", myFunction);
Related
I want to draw a line between multiple points from an array of coordinates.
My code looks like :
<button onclick="drawAnimatedLine(new ol.geom.Point(6210355.674114,2592743.9994331785), new ol.geom.Point(8176927.537835015,2255198.08252584), 50, 2000);">Draw Line</button>
And my js looks like :
function drawAnimatedLine(startPt, endPt, steps, time, fn) {
var style = {
strokeColor: "#0500bd",
strokeWidth: 15,
strokeOpacity: 0.5,
strokeColor: '#0000ff'
};
var directionX = (endPt.x - startPt.x) / steps;
var directionY = (endPt.y - startPt.y) / steps;
var i = 0;
var prevLayer;
var lineDraw = setInterval(function () {
console.log("Inside Animate Line");
if (i > steps) {
clearInterval(lineDraw);
if (fn)
fn();
return;
}
var newEndPt = new ol.geom.Point(startPt.x + i * directionX, startPt.y + i * directionY);
var line = new ol.geom.LineString([startPt, newEndPt]);
var fea = new ol.Feature({
geometry:line,
style: style
});
var vec = new ol.layer.Vector();
vec.addFeatures([fea]);
map.addLayer(vec);
if(prevLayer)
{
map.removeLayer(prevLayer);
}
prevLayer = vec;
i++;
}, time / steps);
}
Note : Coordinates will be dynamic but for testing I've passed the sample data in onclick of the button. Please do try to sort out this issue as soon as possible.
What I want to do is create a video gallery with n video.
Add n view in a ScrollView, a view for each video, and load into every view a picture from the corresponding video (waiting for the loading of each video). While holding down (TouchStart) on a view will be loaded in the view (preview) other images of the video (so to display the video preview directly in the mini view) until the finger is released (touchEnd).
So far , is ok, my problem is that I want by pressing (CLICK) on the mini-view the video was displayed in full screen!
Here is my code
//****************************************************************************************************************
var arr_vidplayer_VARIE = [];
var arr_vidplayer_VARIE_duration = [];
var arr_vidplayer_VARIE_cont = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var timer_VARIE = null;
var num_video_VARIE = 37;
var arr_view_VARIE = [];
var left_VARIE= -200;
var top_VARIE = -100;
var actual_video_VARIE = 1;
//****************************************************************************************************************
var win = Ti.UI.createWindow({
backgroundColor : 'white',
fullscreen : true
});
var scroll_VARIE = Ti.UI.createScrollView({
width : 1024,
height : 700,
top : 0
});
scroll_VARIE.addEventListener("scroll",function(e){
clearInterval(timer_VARIE);
});
//****************************************************************************************************************
function START_VARIE(){
if(actual_video_VARIE <= num_video_VARIE){
if((actual_video_VARIE-1) %4 == 0){
top_VARIE+=150;
left_VARIE=45;
}else{
left_VARIE+=245;
}
CREATE_VIDEO_VARIE(top_VARIE,left_VARIE,actual_video_VARIE);
}
}
function CREATE_VIDEO_VARIE(top,left,id){
var myurl = "/video/"+id+".mov";
var video = Titanium.Media.createVideoPlayer({
url : myurl,
mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT,
scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FILL,
fullscreen : true,
id : parseInt(id),
autoplay : true,
//zIndex : 9999999999999
//visible : false
});
video.addEventListener("loadstate",function(e){
END_LOAD_VARIE(e.source.id,e.loadState);
});
arr_vidplayer_VARIE.push(video);
var view_video = Ti.UI.createView({
width : 200,
height : 120,
left : left,
top : top,
id : parseInt(id),
borderColor : "black"
});
view_video.addEventListener("touchstart",function(e){
var i = parseInt(e.source.id) - 1;
timer_VARIE = setInterval(function(e){
if(arr_vidplayer_VARIE_cont[i] < arr_vidplayer_VARIE_duration[i]){
arr_vidplayer_VARIE_cont[i]++;
var img = arr_vidplayer_VARIE[i].thumbnailImageAtTime(arr_vidplayer_VARIE_cont[i],Titanium.Media.VIDEO_TIME_OPTION_EXACT);
if(img == "[object TiBlob]"){
try{
arr_view_VARIE[i].children[0].image = arr_vidplayer_VARIE[i].thumbnailImageAtTime(arr_vidplayer_VARIE_cont[i],Titanium.Media.VIDEO_TIME_OPTION_EXACT);
}catch(e){
clearInterval(timer_VARIE);
}
}
}else{
arr_vidplayer_VARIE_cont[i] = 0;
}
},200);
});
view_video.addEventListener("touchend",function(e){
clearInterval(timer_VARIE);
});
view_video.addEventListener("click",function(e){
arr_vidplayer_VARIE[parseInt(e.source.id)-1].play();
Ti.API.info("play "+e.source.id);
});
var image_video = Ti.UI.createImageView({
width : 200,
height : 120,
left : 0,
top : 0,
id : parseInt(id),
});
var activity = Ti.UI.createActivityIndicator({
style : Ti.UI.iPhone.ActivityIndicatorStyle.DARK
});
view_video.add(image_video);
view_video.add(activity);
//win.add(video);
activity.show();
arr_view_VARIE.push(view_video);
scroll_VARIE.add(view_video);
}
function END_LOAD_VARIE(id,state){
if(parseInt(state) == 3){
arr_view_VARIE[id-1].children[1].hide();
arr_view_VARIE[id-1].children[0].image = arr_vidplayer_VARIE[id-1].thumbnailImageAtTime(1,Titanium.Media.VIDEO_TIME_OPTION_EXACT);
arr_vidplayer_VARIE_duration.push(parseInt(arr_vidplayer_VARIE[id-1].getDuration()/1000));
actual_video_VARIE++;
START_VARIE();
}
}
//****************************************************************************************************************
START_VARIE();
win.add(scroll_VARIE);
win.open();
//****************************************************************************************************************
Appcelerator Documentation declare that fullscreen property on iOS, before the movie player's view is visible has no effect. Try:
var video = Titanium.Media.createVideoPlayer({
url : myurl,
mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT,
scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FILL,
fullscreen : false,
id : parseInt(id),
autoplay : true
});
and
view_video.addEventListener("click",function(e){
view_video.setFullscreen(true);
arr_vidplayer_VARIE[parseInt(e.source.id)-1].play();
Ti.API.info("play "+e.source.id);
});
I developing an application in Titanium. A hava a code with scrollableview.
It is working in Android but doesn't work in IOS, and not show error messages.
The code:
exports.imagescroller = function(images, imgWidth, imgHeight){
var imageCollection = images;
var window = Ti.UI.createWindow({
backgroundColor:'transparent',
});
if(imgWidth == null) {
imgWidth = "100%";
}
if(imgHeight == null) {
imgHeight = "100%";
}
var scrollGallery = Ti.UI.createScrollableView({
layout:'horizontal',
showHorizontalScrollIndicator:true,
showVerticalScrollIndicator:true,
});
var viewCollection = [];
for (var i = 0; i < imageCollection.length; i++) {
var innerView = Ti.UI.createView({
layout:'horizontal',
});
var item = Ti.UI.createImageView({
width : imgWidth,
height: imgHeight,
imageID:i,
defaultImage: imageCollection[0]
});
if (i < 3) {
item.image = imageCollection[i];
}
innerView.add(item);
viewCollection.push(innerView);
}
scrollGallery.addEventListener('scroll', function(e){
if (scrollGallery.currentPage < (imageCollection.length-1)) {
var nxt = scrollGallery.currentPage+1;
scrollGallery.views[nxt].children[0].image = imageCollection[nxt];
}
});
scrollGallery.views = viewCollection;
window.add(scrollGallery);
return window;
};
I use this in the window:
var Scroller = require("imagescroller");
window = Scroller.imagescroller(allData['images']);
Please help me!
Thanks!
Try to use the more cross platform scrollend event:
scrollGallery.addEventListener('scrollend', function(e){
.......
});
Also try giving your ScrollableView an explicit width and height, just to rule that out:
var scrollGallery = Ti.UI.createScrollableView({
layout:'horizontal',
showHorizontalScrollIndicator:true,
showVerticalScrollIndicator:true,
width : "100%"
height : "100%"
});
Try this and its working , before post i tried it.
var win = Ti.UI.createWindow();
var view1 = Ti.UI.createView({
backgroundColor : '#123'
});
var view2 = Ti.UI.createView({
backgroundColor : '#246'
});
var view3 = Ti.UI.createView({
backgroundColor : '#48b'
});
var scrollableView = Ti.UI.createScrollableView({
views : [view1, view2, view3],
showPagingControl : true,
layout : 'horizontal',
showHorizontalScrollIndicator : true,
showVerticalScrollIndicator : true,
});
win.add(scrollableView);
win.open();
its works in android when you set the height of view more then the screen, or set the height of view , Ti.UI.SIZE
it works
I'm developing an application for ipad and iphone using Titanium. You can navigate between different views. 1st view (the main view where you can go to another views) will be only on portrait mode, the rest of views can be in any orientation.
For this, I use different windows:
var winPortrait = Ti.UI.createWindow({
orientationModes : [Ti.UI.PORTRAIT],
fullscreen : false,
navBarHidden : true,
backgroundColor : "#00669c",
});
var appWindow = Titanium.UI.createWindow({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
fullscreen : false,
navBarHidden : true,
backgroundColor : "#00669c",
backgroundImage : "Default-Portrait.png",
orientationModes : [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]
});
This works ok. When I open each window, orientation changes works ok.
To explain my problem, I'm going to specify the steps I do to reproduce it.
I'm viewing a screen on landscape:
I click to go to main view (portrait only) with device in landscape.
Main view is shown in portrait mode.
I rotate the device to portrait.
I go to the view again with device in portrait:
If I change device orientation, I receive the orientation change event, app detects is landscape mode and draw elements like landscape, but window or view (I don't know) its drawing like portrait, so it doesn't adjust correctly:
This doesn't occur on ios 7, but when I've tried with ios 5.1, it happens (I doesn't have a device with ios 6.x to try it)
Do you know how can I solve it or is a SO problem?
Thank you very much.
UPDATE
This is a simplification of the code I use:
In app.js:
var appWindow = Titanium.UI.createWindow({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
fullscreen : false,
navBarHidden : true,
backgroundColor : "#00669c",
backgroundImage : "Default-Portrait.png",
orientationModes : [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]
});
var winPortrait = Ti.UI.createWindow({
orientationModes : [Ti.UI.PORTRAIT],
fullscreen : false,
navBarHidden : true,
backgroundColor : "#00669c",
});
var openView = function(e) {
currentView = e.win;
if (winPortraitHomeOpened && e.win != 'Home') {
appWindow.backgroundImage = '';
appWindow.addEventListener('open', function() {
//alert("appwindowopen")
if (appWindow != null) {
appWindow.height = Ti.UI.FILL;
appWindow.width = Ti.UI.FILL;
}
});
appWindow.open();
}
// Dependiendo de la vista, abre una ventana u otra
if (e.win == 'Home') {
winPortrait.open();
winPortraitHomeOpened = true;
setTimeout(function() {
var Home = require('/views/Home2');
activeView = Home.Constructor(winPortrait);
addActiveViewCloseWin();
}, 10);
} else if (e.win == 'test') {
var Test = require('/views/test/test');
activeView = Test.Constructor(appWindow, true);
}
if (currentView != 'Home') {
addActiveViewCloseWin();
}
};
var addActiveViewCloseWin = function() {
var anim_invisible = Titanium.UI.createAnimation({
opacity : 0,
duration : 300
});
var anim_visible = Titanium.UI.createAnimation({
opacity : 1,
duration : 300
});
if (winPortraitHomeOpened && currentView == 'Home') {
winPortrait.add(activeView);
} else {
appWindow.add(activeView);
}
if (lastActiveView != null) {
Trace.info("lastActiveView != null");
lastActiveView.animate(anim_invisible);
setTimeout(function() {
activeView.animate(anim_visible);
lastActiveView.close();
lastActiveView = activeView;
}, 300);
} else {
activeView.animate(anim_visible);
lastActiveView = activeView;
}
activeView.updateOrientation();
setTimeout(function() {
if (currentView == 'Home') {
appWindow.close();
} else {
if (winPortraitHomeOpened) {
winPortrait.close();
winPortraitHomeOpened = false;
}
}
}, 500);
};
Ti.Gesture.addEventListener('orientationchange', function(e) {
// Comprobar que ha cambiado de orientación. Se envían varios eventos juntos
var _currentOrientacion = 0;
if (utils.isLandscape())
_currentOrientacion = 1;
if (_currentOrientacion == orientacion) {
return;
}
orientacion = _currentOrientacion;
// Se actualiza las dimensiones y la orientación de los elementos
if (!winPortraitHomeOpened && !winPortraitConfOpened) {
if (appWindow != null) {
appWindow.height = Ti.UI.FILL;
appWindow.width = Ti.UI.FILL;
}
}
if (activeView != null) {
activeView.updateOrientation();
}
});
The code of Test.js:
exports.Constructor = function(parent) {
var view = Ti.UI.createView({
height : utils.getScreenHeight(),
width : utils.getScreenWidth(),
backgroundColor : 'red'
});
var cabeceraView = Cabecera.Constructor(view);
view.add(cabeceraView);
cabeceraView.setTitle('Prueba');
var backButton = Ti.UI.createImageView({
image : utils.imagesFolder() + "common/returnHome.png",
//top : view.height / 4,
left : utils.todp(8),
height : utils.todp(25),
width : utils.todp(65)
});
view.add(backButton);
backButton.addEventListener('click', function() {
openView({
win : 'Home'
});
});
var updateFechaCabecera = function() {
fechaView.setFecha('XXXX-XX-XX');
};
view.updateFechaCabecera = updateFechaCabecera;
var fechaView = Fecha.Constructor(view);
view.add(fechaView);
updateFechaCabecera();
// Vista ocupa todo salvo cabecera y fecha
var mainView = Ti.UI.createView({
height : utils.getScreenHeight() - utils.getCabeceraHeight() - utils.getFechaHeight(),
width : '100%',
top : utils.getCabeceraHeight() + utils.getFechaHeight(),
backgroundColor : "transparent",
});
view.add(mainView);
// Create a Label.
var aLabel = Ti.UI.createLabel({
text : 'aLabel',
color : 'pink',
font : {
fontSize : 40
},
textAlign : 'center'
});
// Add to the parent view.
mainView.add(aLabel);
var updateOrientation = function() {
Trace.info("updateOrientation de interconexines height width " + utils.getScreenHeight() + ' ' + utils.getScreenWidth());
view.height = utils.getScreenHeight();
view.width = utils.getScreenWidth();
if (utils.isPortrait()) {
aLabel.text = "PORTRAIT";
} else {
aLabel.text = "LANDSCAPE";
}
};
view.updateOrientation = updateOrientation;
var cerrar = function() {
Trace.info('cerrar Template');
view.visible = false;
view.hide();
if (cabeceraView != null) {
cabeceraView.close();
view.remove(cabeceraView);
cabeceraView = null;
}
if (fechaView != null) {
fechaView.close();
view.remove(fechaView);
fechaView = null;
}
// Eliminamos los elementos de la vista
if (view != null) {
utils.removeChildrens(view);
parent.remove(view);
};
view = null;
};
view.close = cerrar;
return view;
};
Have you tried to remove orientationModes in var winPortrait?
Your code should look like this:
var winPortrait = Ti.UI.createWindow({
fullscreen : false,
navBarHidden : true,
backgroundColor : "#00669c",
});
I try to create an ImageView in Titanium like this:
var animationView = Titanium.UI.createImageView
(
{
images:animationImages,
duration:50,
repeatCount:0,
width: '90dp',
height: '270dp'
}
);
On android it gets its size as expected, but on IOS, it simply doesn't gets scaled. Is there something, i'm doing wrong? Or should i do it frame by frame by creating the ImageViews manually then changing them with setInterval?
This is actually not a consistent solution, it should be a comment, but since I don't have enough rep I have to write it as an answer.
For starters I would try to give it a top and left properties.
Secondly, are those images retrieved from a remote URL? Remote URLs are only supported in Android. If that is the case you could do a workaround as you said in the question.
Finally, the 'dp' only works for android, so it won't scale at all in iOS, it will simply erase the 'dp' and use the number as "points", on non-retina screens it will be the same number of pixels and on a retina display it will be the double.
I finally decided to create my own animation class, which look like this:
function Animation(data)
{
var width = data.hasOwnProperty("width") ? data.width : Ti.UI.SIZE;
var height = data.hasOwnProperty("height") ? data.height: Ti.UI.SIZE;
var duration = data.hasOwnProperty("duration") ? data.duration : 50;
var imageFiles = data.hasOwnProperty("images") ? data.images : [];
var images = [];
var container = Ti.UI.createView
(
{
width:width,
height: height
}
);
for(var i=0; i<imageFiles.length; i++)
{
var image = Ti.UI.createImageView
(
{
image:imageFiles[i],
width:width,
height:height
}
);
if(i!=0)
image.setVisible(false);
container.add(image);
images.push(image);
}
container.activeImage = 0;
container.intervalId = null;
container.setActiveImage = function(index)
{
if(container.intervalId == null)
container.activeImage = index;
}
container.start = function()
{
var callback = function()
{
for(var i=0; i<images.length; i++)
{
if(i == container.activeImage)
images[i].setVisible(true);
else
images[i].setVisible(false);
}
container.activeImage = (container.activeImage + 1) % images.length;
}
container.intervalId = setInterval ( callback, duration );
}
container.stop = function()
{
clearInterval(container.intervalId);
container.intervalId = null;
}
return container;
}
module.exports = Animation;
And you can use it like this:
var Animation = require('...path to your animation file');
var myAnimation = new Animation
(
{
width:'100dp',
height:'100dp',
duration:50, //duration while one frame is showing
images:['one.png', 'two.png'...], //full paths
}
);
//start:
myAnimation.start();
//stop
myAnimation.stop();