LimeJs HTML5 Sound on Chrome breaks my file - html

I have just start learning LimeJS, but i have a problem with the sound, when i open it in firefox i have not problem but when i open it in chrome the game stop working and doesnt show, i dont know why, i try to fix it and now i can see the objects but i cant drag them, is like it stop . here is the code, I hope you can help me
//set main namespace
goog.provide('bichos');
//get requirements
goog.require('lime');
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.fill.LinearGradient');
goog.require('lime.Sprite');
goog.require('goog.math');
goog.require('lime.GlossyButton');
goog.require('lime.audio.Audio');
goog.require('lime.Layer');
goog.require('bichos.Bug');
goog.require('lime.Label');
// entrypoint
bichos.start = function(){
var director = new lime.Director(document.body,480,320);
director.makeMobileWebAppCapable();
director.setDisplayFPS(false);
var scene = new lime.Scene().setRenderer(lime.Renderer.DOM);
var initialscene = new lime.Scene().setRenderer(lime.Renderer.DOM);
//InitialScene
var initialLayer = new lime.Layer().setPosition(0,0).setAnchorPoint(0,0);
var initialContainer = new lime.Sprite().setAnchorPoint(0,0).setPosition(0,0).setFill('#EEE0E5').setSize(480,320);
var initialTitle = new lime.Label().setText('Welcome').setFontFamily('Arial').setFontColor('#000000').setFontSize(20).setPosition(240,60);
var startButton = new lime.GlossyButton().setSize(200,60).setPosition(240,150).setText('Start').setColor('#00cD00');
initialscene.appendChild(initialLayer);
initialLayer.appendChild(initialContainer);
initialLayer.appendChild(initialTitle);
initialLayer.appendChild(startButton);
//director
director.replaceScene(initialscene);
//evento inicial
goog.events.listen(startButton,['mousedown','touchstart'],function(e){
e.event.stopPropagation();
director.replaceScene(scene);
});
//Grass
var grass_gradient = new lime.fill.LinearGradient().setDirection(0,0,1,-1).addColorStop(0,'#7CCD7C').addColorStop(1,'#00FF00');
var grass = new lime.Sprite().setSize(480,320).setPosition(0.0).setAnchorPoint(0,0).setFill(grass_gradient);
//caja
var box = new lime.Sprite().setAnchorPoint(0,0).setPosition(390,230).setFill('img/Box01.png').setSize(80,80);
//contar
var num_bugs_catched = 0;
var bug_count = new lime.Label().setText('Bug Count: '+num_bugs_catched).setFontFamily('Arial').setFontColor('#000000').setFontSize(20).setPosition(100,300);
scene.appendChild(grass);
scene.appendChild(box);
//Insectos
var num_bugs =goog.math.randomInt(10)+1;
var x,y,bug;
for(var i = 0; i < num_bugs; i++){
bug = new bichos.Bug();
bug.crawl();
scene.appendChild(bug);
//sound
var bugSound = new lime.audio.Audio('audio/bug.ogg');
//eventos
goog.events.listen(bug,['mousedown','touchstart'],function(e){
var drag = e.startDrag();
drag.addDropTarget(box);
e.event.stopPropagation();
bug = this;
goog.events.listen(drag,lime.events.Drag.Event.DROP, function(e){
//play sound
bugSound.stop();
bugSound.play();
num_bugs_catched++;
bug_count.setText('Bug Count: '+num_bugs_catched);
//Desaparecer bichos
bug.setHidden(true);
delete bug;
//Tambien se puede usar window.location='';
if(num_bugs_catched == num_bugs){
alert('Has Ganado!');
bichos.start();
}
})
})
}
scene.appendChild(bug_count);
// set current scene active
}
//this is required for outside access after code is compiled in ADVANCED_COMPILATIONS mode
goog.exportSymbol('bichos.start', bichos.start);

Related

How to handle disconnect event in mxgraph?

I am trying to add two vertexes and disconnect them, by using this example https://jgraph.github.io/mxgraph/javascript/examples/portrefs.html.
In mxGraph, there is a listener available for connecting event https://jgraph.github.io/mxgraph/docs/js-api/files/handler/mxConnectionHandler-js.html#mxConnectionHandler.mxEvent.CONNECT
graph.connectionHandler.addListener(mxEvent.CONNECT, function(sender, evt)
{
var edge = evt.getProperty('cell');
var source = graph.getModel().getTerminal(edge, true);
var target = graph.getModel().getTerminal(edge, false);
var style = graph.getCellStyle(edge);
var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
var targetPortId = style[mxConstants.STYLE_TARGET_PORT];
mxLog.show();
mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});
But when I am trying to listen to disconnect event, https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxEvent-js.html#mxEvent.DISCONNECT, that is not working.
graph.connectionHandler.addListener(mxEvent.DISCONNECT, function(sender, evt)
{
var edge = evt.getProperty('cell');
var source = graph.getModel().getTerminal(edge, true);
var target = graph.getModel().getTerminal(edge, false);
var style = graph.getCellStyle(edge);
var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
var targetPortId = style[mxConstants.STYLE_TARGET_PORT];
mxLog.show();
mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});
graph.addListener(mxEvent.DISCONNECT, function(sender, evt)
{
var edge = evt.getProperty('cell');
var source = graph.getModel().getTerminal(edge, true);
var target = graph.getModel().getTerminal(edge, false);
var style = graph.getCellStyle(edge);
var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
var targetPortId = style[mxConstants.STYLE_TARGET_PORT];
mxLog.show();
mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});
In both ways, I am not able to listen to the disconnect event.
I don't know if this is the smart way of doing this, but for me it works... I don't listen to disconnect, but to "CHANGE" and then react if the change happened in a connection... Here is how:
model.addListener(mx.mxEvent.CHANGE, function(sender, evt)
{
var changes = evt.getProperty('edit').changes;
for (var i = 0; i < changes.length; i++)
{
// Manage any mxChildChange
if (changes[i].constructor.name === "mxChildChange") {
// This is a deletion case and this is an edge
if ((changes[i].index === undefined) && (changes[i].child.edge)) {
// ... Manage the deletion of the changes[i].child
}
}
}
}

How do I set the initial day for a DatePicker

I have two DatePicker objects on a Web UI.
Initially the first should display a day in the past (like january 1st 2010), the second should display the current day (and it does).
I use
var oldDatePicker = myApp.createDatePicker();
var oldDate = new Date(2010, 1, 1);
oldDatePicker.setValue(oldDate);
but that doesn't work
How can I initialize my oldDatePicker?
EDIT 1 --> example
The lines
var zoekBeginDatum = new Date(2012, 8, 15);
pickerBeginDatum.setValue(zoekBeginDatum);
do not provide the desired result
The full (demo) code of the not working example is:
// Global CONSTANTS to be used for initialization
var globalBeginDatum = '2010/04/24';
var globalEindDatum = '';
var globalUseDatums = 'false';
function doGet()
{ // A script with a user interface that is published as a web app
// must contain a doGet(e) function.
// Create 'global' variables, accesible only by this script
var userProperties = PropertiesService.getUserProperties();
userProperties.setProperty('globalBeginDatum', globalBeginDatum);
userProperties.setProperty('globalEindDatum', globalEindDatum);
userProperties.setProperty('globalUseDatums', globalUseDatums);
// Create the UiInstance object myApp and set the title text
var myApp = UiApp.createApplication()
.setTitle('Test datePicker initialvalue')
.setHeight(50)
.setWidth(100);
var breedteTextBox = 600;
var gridTexts = myApp.createGrid(3, 2);
var labelBeginDatum = myApp.createLabel('Begindatum').setId('labelBeginDatum');
var labelEindDatum = myApp.createLabel('Einddatum').setId('labelEindDatum');
var pickerBeginDatum = myApp.createDatePicker().setId('pickerBeginDatum').setName('pickerBeginDatum');
var zoekBeginDatum = new Date(2012, 8, 15); // Initial date for searching ---> does NOT work
pickerBeginDatum.setValue(zoekBeginDatum);
var pickerEindDatum = myApp.createDatePicker().setId('pickerEindDatum').setName('pickerEindDatum');
var zoekEindDatum = new Date(); // Current date
pickerEindDatum.setValue(zoekEindDatum);
var gridDatum = myApp.createGrid(2, 3);
gridDatum.setWidget(0, 1, labelBeginDatum);
gridDatum.setWidget(0, 2, labelEindDatum);
gridDatum.setWidget(1, 1, pickerBeginDatum);
gridDatum.setWidget(1, 2, pickerEindDatum);
var gridOptions = myApp.createGrid(9, 1);
var onClickChkDatums = myApp.createServerHandler('onClickChkDatums');
var chkDatums = myApp.createCheckBox('Gebruik de begindatum en de einddatum bij het zoeken')
.setId('chkDatums').setName('chkDatums')
.addClickHandler(onClickChkDatums);
gridOptions.setWidget(4, 0, chkDatums);
// Create a vertical panel called verPanel and add it to myApp
var verPanel = myApp.createVerticalPanel().setWidth('60%').setBorderWidth(2).setStyleAttribute('background', 'lightyellow');;
var horPanel = myApp.createHorizontalPanel().setWidth('100%').setStyleAttribute('background', 'lightcyan');
horPanel.add(gridOptions);
horPanel.add(gridDatum);
verPanel.add(horPanel);
labelBeginDatum.setVisible(globalUseDatums == 'true');
labelEindDatum.setVisible(globalUseDatums == 'true');
pickerBeginDatum.setVisible(globalUseDatums == 'true');
pickerEindDatum.setVisible(globalUseDatums == 'true');
// Center verPanel by adding it to another panel occupying whole browser window
var fullPanel = myApp.createVerticalPanel().setStyleAttribute('background', 'beige');
fullPanel.setHeight('100%');
fullPanel.setWidth('100%');
fullPanel.setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER);
fullPanel.setVerticalAlignment(UiApp.VerticalAlignment.MIDDLE);
fullPanel.add(verPanel);
myApp.add(fullPanel); // Now verPanel will be centered
return myApp;
}
// *************** Eventhandlers
function onClickChkDatums(e)
{ // Eventhandler for chkDatums
var app = UiApp.getActiveApplication();
var chkDatums = app.getElementById('chkDatums');
var status = (e.parameter.chkDatums == 'true');
var labelBeginDatum = app.getElementById('labelBeginDatum');
var labelEindDatum = app.getElementById('labelEindDatum');
labelBeginDatum.setVisible(status);
labelEindDatum.setVisible(status);
var pickerBeginDatum = app.getElementById('pickerBeginDatum');
var pickerEindDatum = app.getElementById('pickerEindDatum');
pickerBeginDatum.setVisible(status);
pickerEindDatum.setVisible(status);
var userProperties = PropertiesService.getUserProperties();
userProperties.setProperty('globalUseDatums', status);
return app;
}
I don't want to make it a habit answering my own questions, but this one might be useful for others as well.
Using BOTH setCurrentMonth() and setValue() shows the right dates in the datePicker
pickerBeginDatum.setCurrentMonth(zoekBeginDatum); // Needed !!
pickerEindDatum.setCurrentMonth(zoekEindDatum); // Needed !!
pickerEindDatum.setValue(zoekEindDatum); // Does ONLY work in combination with setCurrentMonth
pickerBeginDatum.setValue(zoekBeginDatum); // Does ONLY work in combination with setCurrentMonth

Displaying PopupPanel

THREE QUESTIONS:
Why does my popupPanel not display correctly?
How can I only get it to appear once if clicked multiple times?
How can I add a Close button to the popupPanel?
function showPassword(e){
var app = UiApp.getActiveApplication();
var vrtPanel = app.getElementById("vrtPanel");
//Create Spreadsheet Source
var spSheet = SpreadsheetApp.openById('0Aur3owCpuUY-dF92dGp3c2RORGNkY011dGFnMjBXbXc');
var spTeacherList = spSheet.getSheetByName('TeacherList');
//Create the form elements
var hdlTeacherName = app.createServerHandler('getTeacherName').addCallbackElement(vrtPanel);
var lbxTeacherName = app.createListBox().setId('lbxTeacherName').setName('lbxTeacherName').addChangeHandler(hdlTeacherName);
var lstTeacherNames = spTeacherList.getRange(1,1,spTeacherList.getLastRow(),1).getValues();
lstTeacherNames.sort();
for (var l = 0; l < lstTeacherNames.length; l++) {
lbxTeacherName.addItem(lstTeacherNames[l],l);
}
var lblTeacherName = app.createLabel('Teacher Name:');
var txtTeacherName = app.createTextBox().setName('txtTeacherName').setId('txtTeacherName').setVisible(false);
var lblExt = app.createLabel('Ext:');
var txtExt = app.createTextBox().setName('txtExt').setId('txtExt');
var lblEmail = app.createLabel('Email:');
var txtEmail = app.createTextBox().setName('txtEmail').setId('txtEmail');
var lblSchool = app.createLabel('School:');
var txtSchool = app.createTextBox().setName('txtSchool').setId('txtSchool');
var btnCreate = app.createButton('Create Event');
//Create validation handler
var valSubmit = app.createServerClickHandler('valSubmit');
valSubmit.addCallbackElement(vrtPanel);
//Add this handler to the button
btnCreate.addClickHandler(valSubmit);
//Add all the elemnts to the panel
var formTable = app.createFlexTable().setCellPadding(3);
vrtPanel.add(formTable);
formTable
.setWidget(0,0,lbxTeacherName)
.setWidget(0,1,txtExt)
.setWidget(0,2,txtTeacherName)
.setWidget(1,0,txtEmail)
.setWidget(2,0,btnCreate);
//Add all the panel to the popup
var popPassword = app.createDecoratedPopupPanel(false, true).setId("popPassword");
popPassword.add(vrtPanel);
app.add(vrtPanel);
app.add(popPassword);
return app;
}
There is some disorder in the way you use the popupPanel, you have to add it to your main panel and add the table you want to show in it to the popup itself.
You should also decide where you want to show it.
Here is the relevant part of your code working :
//Add all the elemnts to the panel
var formTable = app.createFlexTable().setCellPadding(3);
formTable
.setWidget(0,0,lbxTeacherName)
.setWidget(0,1,txtExt)
.setWidget(0,2,txtTeacherName)
.setWidget(1,0,txtEmail)
.setWidget(2,0,btnCreate);
var popPassword = app.createDecoratedPopupPanel(false, true).setPopupPosition(150,300).setId("popPassword");
vrtPanel.add(popPassword.add(formTable));
popPassword.show();
return app;
}
To answer the second point : il won't show up multiple time, just once.
point 3 : if you want to close it with a button you will have to add a button and a server handler to close it (by getting it with an ID just as any other widget) but it would be easier and userfriendly to take advantage of the autohide feature, just change the definition parameters like this :
var popPassword = app.createDecoratedPopupPanel(true).setPopupPosition(150,300).setId("popPassword");
edit : in the example above you can also use
app.getElementById('popPassword').hide()
in your 'valSubmit' function (called by the button) even without the autohide so the popup will hide when the handler function executes.

Upload pre-selected file with actionscript

I'm creating a photoshop extension where I need to save the file people are working on and upload it to a server. So I want the extension to be able to automatically choose the current file and upload it to my server.
Problem is I don't know how to pre-select a file for people. Here's my code so far:
var app:Application = Photoshop.app;
var doc:Document = app.documents.add();
doc.selection.selectAll();
var color:RGBColor = new RGBColor();
color.red = 0;
color.green = 0;
color.blue = 255;
doc.selection.fill(color);
var saveOptions:JPEGSaveOptions = new JPEGSaveOptions();
//Add other PDF save options here.
doc.saveAs(File.applicationStorageDirectory, saveOptions);
var jsonOBJ:Object = {};
jsonOBJ.option = "iphone";
jsonOBJ.title = "c";
jsonOBJ.description = "s";
jsonOBJ.app_store_url = "iphone";
jsonOBJ.tags = "c";
jsonOBJ.temp_number = 1;
var _service:HTTPService = new HTTPService();
_service.url = "http://localhost:3000/designs";
_service.method = "POST";
_service.contentType = "application/json";
_service.resultFormat = "text";
_service.useProxy = false;
_service.makeObjectsBindable = true;
_service.addEventListener(FaultEvent.FAULT,faultRX);
_service.addEventListener(ResultEvent.RESULT,resultRX);
_service.showBusyCursor = true;
_service.send( JSON.encode( jsonOBJ ) );
function resultRX():void
{
trace(ResultEvent.RESULT);
}
function faultRX():void
{
trace(FaultEvent.FAULT);
}
var file:FileReference;
var filefilters:Array;
var req:URLRequest;
filefilters = [ new FileFilter('Images', '*.jpg') ]; // add other file filters
file.browse(filefilters);
It's a photoshop extension. I ended up using FileReference and link to the file. it worked. I dunno how to actually upload the image though. When I use file.upload(requestUrl), it sends along a wrong content type. –

Icon Field on List

I load label and icon from mysql database.
and i'd like to create a list with label and icon field.
So I try to do something like that but it doesn't work indeed each line contain label but icon is empty.
var xmllisteFamille:XMLList = XML(event.result).famille;
var xmlListCollFami = new XMLListCollection(xmllisteFamille);
for each (var item:Object in xmlListCollFami){
var vbox:VBox = new VBox;
vbox.label = item.sdfNom;
trace(vbox.label);
vbox.percentHeight=100;
vbox.percentWidth=100;
var xmlItem2:XMLList = item.commDent;
if(xmlItem2.length()>0){
/*
var listAcc:List = new List();
listAcc.percentHeight = 100;
listAcc.percentWidth =100;
listAcc.labelField = "name";
listAcc.dataProvider = xmlItem2;
vbox.addChild(listAcc);
accOnglet1.addChild(vbox); */
var urlImageRoot : urlManager = new urlManager();
var urlRootDental:String = urlImageRoot.urlDental();
trace(urlRootDental);
var list:Array = new Array();
var object:Object;
var xmlListdetail:XMLListCollection = new XMLListCollection(xmlItem2);
for each (var item2:Object in xmlListdetail)
{
object = new Object();
// -- --
object.label = item2.name;
var rootIcon:String= "http://127.0.0.1:10088/Sys/OEMySQL/Dental/"+item2.photo;
trace("rootIcon " + rootIcon);
object.icon = rootIcon;
trace("object.icon " + object.icon);
list.push(object);
}
/* var aNode:XML;
for each (aNode in xmlItem2)
{
object = new Object();
// -- --
object.label = aNode.name;
object.icon = new urlManager().urlDental()+aNode.photo;
list.push(object);
} */
var arrList:ArrayList;
arrList = new ArrayList(list);
var listAcc:List = new List();
listAcc.percentHeight = 100;
listAcc.percentWidth =100;
listAcc.labelField = "label";
listAcc.iconField="icon";
//listAcc.dataProvider = xmlItem2;
listAcc.dataProvider = arrList;
vbox.addChild(listAcc);
accOnglet1.addChild(vbox);
}
}
}
}
I hope that you can help me.
Thanks
it may be crossdomain issue
you need to know if flash player requires crossdomain.xml in this case
use charles proxy to check what exactly you are sending to server (request) and getting back from server (response)
charles proxy website
I found the solution.
I had to create an itemrenderer and add it in as3 to my list.
thanks