"oninit": "window.WIDGET_NAME.fillDiv.style.backgroundColor = '#f00';",

You can't use "this" in oninit at this point... I'm trying to think of a way to enable that so it's consistent across all event handlers, but for now you can refer to the widget by using window.theWidgetsNameGoesHere.

"ontouchend": "this.fillDiv.style.backgroundColor = '#f00';",
"oninit": "this.fillDiv.style.backgroundColor = '#f00';",

The oninit ensures that the buttons will start at the right color, the ontouchend ensures that after you've lifted your finger it will revert to the correct color.

Unfortunately, I just tried this and although the ontouchend works, the oninit doesn't for some reason. I'll see if I can figure it out later on tonight but I'm skeptical it can be fixed without an update to the app. - Charlie

One question. Is it possible to change the colour of a button before it is pressed. As of now all my defaults are black, and I can't seem to find something on your guide to change that.

http://charlie-roberts.com/Control/interfaces/template.js

I've changed the Creating Interfaces (Intro) page to emphasize this information. I'll try to do a video on interface construction some time soon as well. Thanks for bearing with it!

Change the ontouchstart to the following and you should be fine (it worked for me when I tested it):

"ontouchstart": "if(this.value == this.max) { control.showToolbar();} else { control.hideToolbar(); }",

PS - when you finish the project I'd love to know what this is for if you're able to share... thanks!

{
    "name": "tabButton",
    "type": "Button",
    "x": .83,
    "y": .571,
    "width": .165,
    "height": .142,
    "isLocal": true,
    "mode": "toggle",
    "color": "#333333",
    "stroke": "#aaaaaa",
    "min": 0,
    "max": 1,
    "ontouchstart": "if(this.value == 1) { control.showToolbar();} else { control.hideToolbar(); }",

},
{
    "name": "tabButtonLabel",
    "type": "Label",
    "x": .83,
    "y": .571,
    "width": .165,
    "height": .142,
    "color": "#fff",
    "value": "menu",
    "isLocal": true,
},

tabLabel.changeValue(\'Hide Tabs\');

and

tabLabel.changeValue(\'Show Tabs\');

...since that's not actually happening; there's no widget named tabLabel.

Use:

"midiType": "cc",
"channel": 1,
"midiNumber": 85, // substitute 85 - 92 here

Also don't set midiMin or midiMax values... they will default to 0 - 127. If you set them to 0 and 1 those are the only two numbers that will be sent.

As for the MIDI messages I need to send, I will (when this is complete) be sending these to a lighting board, and each MIDI message actives a macro on the board. Basically this allows me to control the entire lighting system from an iPhone.

To activate the macros, I need to send a control change (between 85 and 92) with a parameter between 0-127. The final version will be using Control Change 90. The numbers for parameters will be different based on what macro is needs to activate.

Please tell me if this is possible and how I can go about coding it to get it to work.

Also, do you know why the menu button stops working when I connect it to my mac and to MIDI Monitor?

MIDI channels range from 1 - 16. Just change all your channels to be 1 and you should be fine. Actually, you might also want to change the midiNumber so that each button sends a different cc message; right now they're all sending cc 49 so you won't be able to tell them apart.

Finally, I would add a refresh button to your code while you're testing it...

{
"name": "refresh",
"type": "Button",
"x": .6, "y": .9,
"width": .2, "height": .1,
"startingValue": 0,
"isLocal": true,
"mode": "contact",
"ontouchstart": "interfaceManager.refreshInterface()",
"stroke": "#aaa",
},
{
"name": "refreshLabel",
"type": "Label",
"x": .6, "y": .9,
"width": .2, "height": .1,
"isLocal": true,
"value": "refresh",
},

That way you can just make changes on your server and hit refresh to see them instead of having to constantly add new interfaces.

Hope this helps... - Charlie

loadedInterfaceName = "TA Lights";

interfaceOrientation = "portrait";

infoText = "Interface for Theatre Aurora Light Desingers and Operators to control and program lights remotely.";

pages = [[
{
    "name": "b1",
    "type": "Button",
    "x": .005,
    "y": .003,
    "width": .165,
    "height": .142,
    "color": "#00aaaa",
    "stroke": "#aaaaaa",
    "midiMin": 0,
    "midiMax": 1,
    "mode": "momentary",
    "midiType": "cc",
    "channel": 90,
    "midiNumber": 49,
    "requiresTouchDown": true,
    "ontouchstart": ""
},
{
    "name": "b1Label",
    "type": "Label",
    "x": .005,
    "y": .003,
    "width": .165,
    "height": .142,
    "value": "1",
    "align": "center"
},

{
    "name": "b2",
    "type": "Button",
    "x": .17,
    "y": .003,
    "width": .165,
    "height": .142,
    "color": "#00aaaa",
    "stroke": "#aaaaaa",
    "midiMin": 0,
    "midiMax": 1,
    "mode": "momentary",
    "midiType": "cc",
    "channel": 90,
    "midiNumber": 49,
    "requiresTouchDown": true,
    "ontouchstart": ""
},
{
    "name": "b2Label",
    "type": "Label",
    "x": .17,
    "y": .003,
    "width": .165,
    "height": .142,
    "value": "2",
    "align": "center"
},
{
    "name": "b3",
    "type": "Button",
    "x": .335,
    "y": .003,
    "width": .165,
    "height": .142,
    "color": "#00aaaa",
    "stroke": "#aaaaaa",
    "midiMin": 0,
    "midiMax": 1,
    "mode": "momentary",
    "midiType": "cc",
    "channel": 90,
    "midiNumber": 49,
    "requiresTouchDown": true,
    "ontouchstart": ""
},
{
    "name": "b3Label",
    "type": "Label",
    "x": .335,
    "y": .003,
    "width": .165,
    "height": .142,
    "value": "3",
    "align": "center"
},
{
    "name": "b4",
    "type": "Button",
    "x": .5,
    "y": .003,
    "width": .165,
    "height": .142,
    "color": "#00aaaa",
    "stroke": "#aaaaaa",
    "midiMin": 0,
    "midiMax": 1,
    "mode": "momentary",
    "midiType": "cc",
    "channel": 90,
    "midiNumber": 49,
    "requiresTouchDown": true,
    "ontouchstart": ""
},
{
    "name": "b4Label",
    "type": "Label",
    "x": .5,
    "y": .003,
    "width": .165,
    "height": .142,
    "value": "4",
    "align": "center"
},
{
    "name": "b5",
    "type": "Button",
    "x": .665,
    "y": .003,
    "width": .165,
    "height": .142,
    "color": "#00aaaa",
    "stroke": "#aaaaaa",
    "midiMin": 0,
    "midiMax": 1,
    "mode": "momentary",
    "midiType": "cc",
    "channel": 90,
    "midiNumber": 49,
    "requiresTouchDown": true,
    "ontouchstart": ""
},
{
    "name": "b5Label",
    "type": "Label",
    "x": .665,
    "y": .003,
    "width": .165,
    "height": .142,
    "value": "5",
    "align": "center"
},
{
    "name": "b6",
    "type": "Button",
    "x": .83,
    "y": .003,
    "width": .165,
    "height": .142,
    "color": "#00aaaa",
    "stroke": "#aaaaaa",
    "midiMin": 0,
    "midiMax": 1,
    "mode": "momentary",
    "midiType": "cc",
    "channel": 90,
    "midiNumber": 49,
    "requiresTouchDown": true,
    "ontouchstart": ""
},
{
    "name": "b6Label",
    "type": "Label",
    "x": .83,
    "y": .003,
    "width": .165,
    "height": .142,
    "value": "6",
    "align": "center"
},

{
    "name": "tabButton",
    "type": "Button",
    "x": .83,
    "y": .571,
    "width": .165,
    "height": .142,
    "mode": "toggle",
    "color": "#333333",
    "stroke": "#aaaaaa",
    "min": 0,
    "max": 1,
    "ontouchstart": "if(this.value == 1) { control.showToolbar(); tabLabel.changeValue(\'Hide Tabs\');} else { control.hideToolbar(); tabLabel.changeValue(\'Show Tabs\'); }",
},
{
    "name": "tabButtonLabel",
    "type": "Label",
    "x": .83,
    "y": .571,
    "width": .165,
    "height": .142,
    "color": "#fff",
    "value": "menu",
},

],

];

The code can also be downloaded from http://theatreaurora.vicmetcalfe.com/talights.js

Here is the problem. The six buttons are not transmitting a MIDI signal to my computer(should be a control change message), but the Menu button ends up sending a Control, chan 1, num 127 signal, and stops bringing the menu up.

Any suggests?