I'm envisioning writing JSON to the pages array from a procedure. I know that Control will add and remove widgets via OSC commands. Can it do the same thing directly from JavaScript? Does Control only read this array at the time of initial load/render or dynamically at other times?
Regards,
Scott
Yes, basically the OSC calls are just translated into JavaScript. Here are the lines of code from the /addWidget OSC command:
eval("var w = " + arguments[2]);
var _w = control.makeWidget(w);
control.widgets.push(_w);
eval("control.addWidget(" + w.name + ", control.currentPage);");Just replace the arguments[2] variable with any variable holding the widget JSON and run those lines of code to add a widget.
To remove widgets, change position etc. I would take a look at the OSCManager.js class. It shows the javascript for most of these tasks:
https://github.com/charlieroberts/Control/blob/master/www/js/OSCManager.js
Let me know if there are more questions about this... dynamically changing interfaces are something I'm specifically interested in so I'm happy to help. - Charlie
Thanks Charlie. I'll give this a try.
Regards,
Scott
Apologies in advance if this is a noob JavaScript issue:
Trying the addwidget code and having a bit of trouble. Problem seems to be with the eval("var w = " + arguments[2]) statement. Control renders nothing when I replace arguments[2] with my JSON variable. Chrome debugger gives me syntax error.
Regards,
Scott
Can you post the json you're using? Try using all single quotes inside the json... you might need to escape any double quotes you use. - Charlie
Apologies in advance if this is a noob JavaScript question:
Trying the addwidget code and having a bit of trouble. Problem seems to be with the eval("var w = " + arguments[2]) statement. Control renders nothing when I replace arguments[2] with my JSON variable. Chrome debugger gives me syntax error.
Regards,
Scott
I'll give it a try. Thanks.
I had some luck adding widgets dynamically to the current page but I am still having some trouble conceptualizing. Am I adding widgets to the current page in pages array, or only to the current window?
Regards,
Scott
Hmmm, right now it just adds it to the current page. If you need to add it to a particular page, you can call "/control/addWidget yourJSON pageNumber" if you paste the following code in your interface file...
Control.prototype.addWidget = function(widget, page) {
this.pages[page].push(widget);
if(page == control.currentPage) {
if(widget.show != null)
widget.show();
if(widget.draw != null)
widget.draw();
}else{
if(widget.hide != null)
widget.hide();
}
eval(widget.oninit);
}and
OSCManager.prototype.processOSCMessage = function() {
var address = arguments[0];
var typetags = arguments[1];
var args = [];
console.log(address + "::"+typetags+"::"+arguments[2]);
switch(address){
case "/control/runScript":
eval(arguments[2]);
return;
break;
case "/control/addWidget":
eval("var w = " + arguments[2]);
var _w = control.makeWidget(w);
control.widgets.push(_w);
eval("control.addWidget(" + w.name + ", " + arguments[3] + ");");
return;
break;
case "/control/removeWidget":
control.removeWidgetWithName(arguments[2]);
return;
break;
case "/control/setBounds":
var w = control.getWidgetWithName(arguments[2]);
w.setBounds([arguments[3], arguments[4], arguments[5], arguments[6]]);
return;
break;
case "/control/setColors":
var w = control.getWidgetWithName(arguments[2]);
w.setColors([arguments[3], arguments[4], arguments[5]]);
return;
break;
case "/control/setRange":
var w = control.getWidgetWithName(arguments[2]);
w.setRange(arguments[3], arguments[4]);
return;
break;
case "/control/setAddress":
var w = control.getWidgetWithName(arguments[2]);
w.address = arguments[3];
return;
break;
case "/control/createBlankInterface":
control.unloadWidgets();
var _json = "loadedInterfaceName = '" + arguments[2] + "'; interfaceOrientation = '" + arguments[3] + "'; pages = [["
if(typeof arguments[4] == "undefined" || arguments[4] == "true") {
_json += '{\
"name": "menuButton",\
"type": "Button",\
"bounds": [.8,.8,.2,.1],\
"mode":"toggle",\
"colors": ["#000", "#444", "#aaa"],\
"ontouchstart": "if(this.value == this.max) { control.showToolbar();} else { control.hideToolbar(); }",\
"label": "menu",\
},';
}
_json += "]];";
interfaceManager.runInterface(_json);
$.mobile.changePage('#SelectedInterfacePage');
return;
break;
}
for(var i = 2; i < arguments.length; i++) {
args[i - 2] = arguments[i];
}
this.delegate.processOSC(address, typetags, args);
}FYI the first block of code in the above post is basically a bug fix... the second block of code changes control/addWidget to also accept a pageNumber.
Thanks Charlie. I gather I should put the "OSCManager.prototype..." code into the OSCManager.js file (replacing the relevant section(s)?
Scott
You can do that, or you can just place it into an interface file... if you place it in an interface file the method will be overwritten when the interface file is loaded and will stay overwritten until the app is force quit or the phone is restarted.
The nice thing about being able to include it in the interface file is that you can actually overwrite functionality on a per interface basis... - Charlie
One other problem that might come up... you have to make sure that the page you're adding a widget to exists. Basically there is an array named control.pages. Each element of that array (in effect, each "page") is simply another array that stores all the widgets for the page.
When you first load an interface file, all the arrays for all the pages are produced and populated. But if you want to add a page afterwords you would need to do something like this:
control.pages[control.pages.length] = [];
The above line just adds a page to the end. It's the same as control.pages.push([]);
You could also make a specific page:
control.pages[yourPageNumber] = [];
All this could be done via OSC using the /control/runScript/ address. Hope this helps - Charlie
Thanks again Charlie. I'll add the code to my interface. Out of curiosity, would you expect to add this code to your next release?
Regards,
Scott
The first block, definitely. The second block will probably look a little different... I'll set it up so that it looks to see if there's a second argument (the page number). If so, use it, if not, use the current page. - Charlie