We Keep Coding

kiosk app full screen

I have built a kiosk app for Chrome with app builder, but even if the key of doing a kiosk app is that it will be displayed at full screen, I don´t manage to get rid of the top bar (I have removed the homepage button etc. but can´t display it at total full screen). I`d like to know if there´s any commando for this in html or javascript and in which file it should be added.
In the backgroung.js file I´ve added the line "state: 'fullscreen' but it does not work (I've also added the permission for fullscreen in the manifest file):
var runApp = function() {
if (chrome.power) {
chrome.power.requestKeepAwake('display');
}
console.log(config);
chrome.app.window.create(
config ?
'exported_app_view.html' :
'designer_view.html',
{
id: 'KioskDesignerWindow',
width: 1100,
height: 720,
minWidth: 800,
minHeight: 600,
state: 'fullscreen'
},
function(win) {
if (!this.X) { return; }
var window = win.contentWindow;
window.onload = function() {
this.$addWindow(window);
var Y = this.X.subWindow(window, 'Kiosk Designer Window');
this.DOM.init(Y);
}.bind(this);
win.onClosed.addListener(function() {
this.$removeWindow(window);
}.bind(this));
}.bind(this));
}.bind(this);

Yes, you can do it with JavaScript. In background.js, your 3rd parameter to chrome.app.window.create is that callback function that has the win argument - add this line:
win.fullscreen();
https://developer.chrome.com/apps/app_window#type-AppWindow
If you hit escape while your app is running you may get the title bar back, but next time it runs it will go fullscreen again.

Popup screen not working on Android, but does on iOS

I'm trying to create an popup that contains help information. The below code works perfect on iOS, but on Android the labels aren't displayed (the close button is).
I'm hoping there is an easy fix ;-)
Thanks in advance!
function helpPopup() {
var myModal = Ti.UI.createWindow({
backgroundColor : 'transparent',
navBarHidden:true
});
var wrapperView = Ti.UI.createView(); // Full screen
var backgroundView = Ti.UI.createView({ // Also full screen
backgroundColor : '#000',
opacity : 0.5
});
backgroundView.addEventListener('click', function () {
myModal.close();
});
var containerView = Ti.UI.createView({ // Set height appropriately
height : 300,
backgroundColor : '#FFF'
});
var someLabel = Ti.UI.createLabel({
text : 'Here is your modal',
top : 40
});
var contactName = Ti.UI.createLabel({
text :'Name',
top :60
});
var closeButton = Ti.UI.createButton({
title : 'Close',
bottom : 40
});
closeButton.addEventListener('click', function () {
myModal.close();
});
containerView.add(someLabel);
containerView.add(contactName);
containerView.add(closeButton);
wrapperView.add(backgroundView);
wrapperView.add(containerView);
myModal.add(wrapperView);
myModal.open({
animate : true
});
}

It turns out that Android uses white as a default label color.... iOS uses black.
So after I changed the font color it worked on both Android on iOS:
var someLabel = Ti.UI.createLabel({
text : 'Here is your modal',
top : 40,
color : '#000'
});

Appcelerator scope issue when clicking a view

I'm going crazy here trying o work out why the scoping of my variable won't pick up the right value from a loop of 60 items from a DB in my Appcelerator project.
My map marker displays the correct label, but when I click it, no matter what combo of scoping I try, I cannot get the correct value in the alert. It just returns the 60th entry every time.
Likely a schoolboy error, but this is driving me nuts.
This is my function
function loadAnimals() {
var db = Ti.Database.open('myDB');
var getSpecies = db.execute('select * from species');
while (getSpecies.isValidRow()) {
var speciesID = getSpecies.fieldByName('speciesnid');
var speciesName = getSpecies.fieldByName('speciesname');
var speciesDesc = getSpecies.fieldByName('speciesdescription');
var speciesLatitude = getSpecies.fieldByName('specieslatitude');
var speciesLongitude = getSpecies.fieldByName('specieslongitude');
var speciesConStatus = getSpecies.fieldByName('speciesconservationstatus');
var speciesMarkerFilename = getSpecies.fieldByName('speciesiconfilename');
var speciesMarkerIcon = getSpecies.fieldByName('speciesmapicon');
var speciesMarkerURI = getSpecies.fieldByName('speciesmapiconurl');
var speciesImageFullPath = speciesMarkerURI.replace("public://", "http://myurl.com/");
var speciesImageFullPath = speciesImageFullPath.replace(" ", "%20");
var imageFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, speciesMarkerIcon);
var iconFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, speciesMarkerFilename);
var annotationView = Ti.UI.createView({
backgroundColor: '#222222',
width: 150,
height: 75,
layout:'vertical'
});
var addtoTourView = Ti.UI.createView({
height:20,
backgroundColor:'#6ea108'
});
var addtoTourTitle = Ti.UI.createLabel({
color: '#FFF',
text: 'ADD TO TOUR',
width: 150,
height: 15,
top:3,
textAlign: 'center',
font: {
fontSize: 14,
fontWeight: 'bold'
}
});
var annotationTitle = Ti.UI.createLabel({
color: '#FFF',
text: 'test',
width: 150,
height:15,
top:0,
textAlign: 'center',
font: {
fontSize: 14,
fontWeight: 'normal'
}
});
var blankView = Ti.UI.createView({
backgroundColor: '#222222',
width: 1,
height: 73,
borderRadius: 0
});
annotationView.add(addtoTourView);
addtoTourView.add(addtoTourTitle);
annotationView.add(annotationTitle);
annotations.push(Map.createAnnotation({
latitude: speciesLatitude,
longitude: speciesLongitude,
title: ' ',
//pincolor: Map.ANNOTATION_RED,
image: iconFile,
animate: true,
myid: speciesID,
rightView: annotationView,
leftView: blankView
}));
addtoTourView.addEventListener('click', function(e) {
//alert(speciesName + ' has dded to Tour');
var dialog = Ti.UI.createAlertDialog({
message: 'Added to your Tour',
ok: 'Continue',
title: speciesName //this is the 60th entry, not the correct one
});
dialog.show();
// do the insert into the DB
var db = Ti.Database.open('myDB');
db.execute('INSERT INTO tour (speciesnid) VALUES (?)', speciesID); // same with this ID, needs to the correct ID
db.close();
});
annotationTitle.text = speciesName;
//load up the next record
getSpecies.next();
};
// close the database
getSpecies.close();
// add markers to map
mapview.annotations = annotations;
};// end of loadAnimals fucntion
Can anyone suggest what I'm doing wrong?

Michaels solution sounds right.
Let me post what I was gonna say anyway. I focus on explaining the scope problem, on why your code doesn't do what you expected.
In javascript the scope is bound to the function. When you declare a variable within a loop (for/while/do...) things can get a little confusing. You are not creating new variables, you are just overriding the value of the first (and only) variable with that name.
So, you have 1 variable in function loadAnimals, called speciesName. In the while-loop you just override the value of that variable. After the 60'th iteration, the variable just remembers the last thing you set it to.
When the client clicks on the marker, the loop is finished, the value has been set a long time ago.
Notice: there are probably solutions provided by your map service, but I don't know about that.
1 solution: 'this'.
The 'this' variable tells you what has been affected. Inside a onClick callback, this is the element that was clicked on.
The solution to your problem will probably involve 'this'. But I'm not sure exactly how.
Here an example of what I mean.
<h2>Click on the animal</h2>
<p>dog</p>
<p>cat</p>
<p>hamster</p>
<script>
function loadAnimals() {
var speciesName = '';
var animalElements = document.getElementsByTagName('p');
for (var i=0; i<animalElements.length; i++) {
speciesName = animalElements[i].innerHTML ; // notice, this variable will be overridden, so this variable is useless within the onClick callback.
animalElements[i].addEventListener('click', function(e) {
// variable 'this' is the <p> that was clicked on.
var value_clicked_on = this.innerHTML;
alert(value_clicked_on);
});
}
}
window.onload = loadAnimals;
</script>

When creating your annotations array to add to to the map add your title to the annotation paramters as well as the speciesID which you are setting with the key - myid.
annotations.push(Map.createAnnotation({
latitude: speciesLatitude,
longitude: speciesLongitude,
title: ' ',
//pincolor: Map.ANNOTATION_RED,
image: iconFile,
animate: true,
myid: speciesID, // We'll be querying this
myname: speciesName, // and also this
rightView: annotationView,
leftView: blankView
}));
Then add your event listener once onto the map object instead of each individual annotation object. This manages memory more efficiently and is the correct way to add it. Don't add the event listener on for every annotation, this is bad practise.
// Handle click events on any annotations on this map.
mapview.addEventListener('click', function(evt) {
Ti.API.info("speciesID " + evt.annotation.myid + " clicked, speciesName: " + evt.annotation.myname);
});
On this single event listener you can now create your alert dialog and DB insert by accessing each annotations individual properties by inspecting
evt.annotation
On the Map object you can do the following as well:
The click event includes a value which you can interrogate clicksource
This clicksource will let you know the source - pin, annotation, leftButton, rightButton, leftView, rightView, title, or subtitle which you can use in the event listener.
Also available is the source object that fired the event - source. You can then test if the clicksource is not null and the source is coming from the "ADD TO TOUR" element that you want to place the trigger on. still getting all your annotation properties from evt.annotation

Applying style for YouTube Popup Player's popup Window

I had used Youtube Popup player for video player in my webapplication, iam trying to change the styles of popup window..but iam not able to do it..i had found cssClass property for applying styles.. here is the link for youtube popup player..http://lab.abhinayrathore.com/jquery_youtube/
How can i resolve it..

You can follow Arunkumar answer if you want to change the defaults of the plugin, so that you don't have to set the options everytime you want to initialize the plugin.
Or, you can set specific properties to each element with the plugin assigned, like this:
$(function () {
var options = {
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};
$("a.youtube").YouTubePopup(options);
});
DEMO
Or, instead of creating a variable options, you could just do something like this:
$(function () {
$("a.youtube").YouTubePopup({
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};);
});
Hope I could make it more understandable to you!

customize Popup using script
like
$(function () {
$.fn.YouTubePopup.defaults.fullscreen = 0;
$.fn.YouTubePopup.defaults.color1 = 'CCCCCC';
$.fn.YouTubePopup.defaults.width='500';
$.fn.YouTubePopup.defaults.height='300';
$.fn.YouTubePopup.defaults.overlayOpacity='0.5';
});
You can able to change popup defaults above way.
Hope it helps:);

Titanium click event in MenuIcons

I am standing on MainMenuScreen, from there I added a module name MenuIcons But I don't know why the click events in MenuIcons is not working at all. However, all views, images and other content is showing perfectly without any warning or error.
Here is the scenario of code:
MainMenuScreen.js
function MainMenuScreen(userinfojson) {
var main_window = Titanium.UI.createWindow({
backgroundImage : '/assets/inventoryBackground.png'
});
var MainScreen = [];
var MenuIcons = require('ui/common/menus/MenuIcons');
MainScreen.menuIcons = new MenuIcons(active_screen);
main_window.add(MainScreen.menuIcons);
var StatusScreen = require('ui/common/MenuScreen/StatusScreen');
MainScreen.statusScreen = StatusScreen(userinfojson);
main_window.add(MainScreen.statusScreen);
return main_window;
}
module.exports = MainMenuScreen;
MenuIcons.js
function MenuIcons(active_menu) {
var view = Titanium.UI.createView({
top : "12%",
height : "10%"
});
var iconstatus_imageview = Titanium.UI.createImageView({
left : '0%',
top : '0%',
image : '/assets/iconStatus.png',
height : '100%',
width : '13.8%'
});
iconstatus_imageview.addEventListener('click', function(e) {
alert("Clicked");
});
view.add(iconstatus_imageview);
return view;
}
module.exports = MenuIcons;
So, click event of this "iconstatus_imageview" imageview is not working
Please help...:(

To troubleshoot this I would add colors to the views/windows involved and see if one is drawn over the other. My initial guess without seeing the StatusScreen code is that it is over the top of the MenuIcons, but it is transparent and you can't see it.
I would probably comment out this line and see if the menu event fires:
main_window.add(MainScreen.statusScreen);
This code works, so the problem isn't visible in the code you pasted. So whatever code you edited out should be looked at.
app.js
var main_window = Titanium.UI.createWindow({
//backgroundImage : '/assets/inventoryBackground.png'
backgroundColor: 'white'
});
var MainScreen = [];
var MenuIcons = require('MenuIcons');
//MainScreen.menuIcons = new MenuIcons(active_screen);
MainScreen.menuIcons = new MenuIcons();
main_window.add(MainScreen.menuIcons);
// var StatusScreen = require('ui/common/MenuScreen/StatusScreen');
// MainScreen.statusScreen = StatusScreen(userinfojson);
// main_window.add(MainScreen.statusScreen);
//return main_window;
main_window.open();
MenuIcons.js
function MenuIcons(active_menu) {
var view = Titanium.UI.createView({
top : "12%",
height : "10%"
});
var iconstatus_imageview = Titanium.UI.createImageView({
left : '0%',
top : '0%',
image : 'medical.png',
height : '100%',
width : '13.8%'
});
iconstatus_imageview.addEventListener('click', function(e){
alert('clicked');
});
view.add(iconstatus_imageview);
return view;
}
module.exports = MenuIcons;