How does the example variableInputs for Processing 2.0 javaScript mode works? How to tweak?

Question

I'm using Processing.org looking at the example variableInputs in javaScript mode (can't find it online, but it is included with the download) It has two tabs, one java and one .js. And a cool example on how to pass data around both. In the first tab there are some HTML/CSS commented out. Those are building the page when I hit run... How's that working? Is it possible to have for instance more than one drop down menu (selector) side by side? I managed to have them, but always one below the another. Is the way to go to edit the html in the first tab? help?

do you need me to copy and paste the example here?

[EDIT]

When I hit export, the PDE exports:

index.html

processing.js //(the library it self)

interface.js //(the second tab in the PDE)

sketchName.pde //(the usual pde)

The html tags from above the code are included in index.html, so it can be edited there. Not sure though this is inserted in the html page. So putting the menus side by side turns out to be a HTML question I think... What i also don't know how to do :), but I'll look for it

[edit2] or perhaps a javaScript question... As is interface.js that is making th econtrols... How to control the position of them?

[edit3] well tuns out that the line <form id="form-form"><!-- empty --></form> is doing the link, via th id form-form... Still is it possible to have some menus side by side inatead of one below another?

Answer 1

It is indeed a css/html issue as bfavaretto suggests. In order to do what you asked for try this:

style section in comments (java tab), essentially you have to make the two drop downs' width smaller (45%) and then css hacks to bring them inline, float:left or right

 *    <style>textarea,input,label,select{display:block;width:95%}select{width:45%;clear:none;float:left}
 *    input[type=checkbox],input[type=radio]{width: auto}textarea{height:5em},</style>

setController() method, add another ctrl.addMenu(); as such:

 element = ctlr.addMenu( "theMenu", menuItems );
 element = ctlr.addMenu( "theMenau", menuItems );

The problem after this is that the two labels block the two menus from coming in-line thus you probably have to remove them from these elements and add them manually. In the javascript tab comment out line 157:

//form.appendChild(label);

This line is in function this.addSelection = function ( l, o ) {