| Sailboat Characteristics Plotter - notes |
The notion is to make the 3 sections of the UI interactive and linked. In the upper left is a graph of the data space. I'm using Processingjs and a port of Jeffrey Traer's physics library from Java to Processingjs. You can download the ported Traer physics library code here.
The UI consists of three HTML frames - one for each of the 3 sections...
Graphical Navigator (upper left corner)
For the graphical navigator, I am using Processingjs and a canvas tag:
<canvas id="sketch" data-processing-sources="/bd/WebContent.pde"></canvas>
<script type="application/javascript">
var processingInstance;
function poke(who, checked)
{
if (!processingInstance)
processingInstance = Processing.getInstanceById('sketch');
processingInstance.poke(who, checked);
}
</script> as suggested in the
Processingjs doc.
When a checkbox is checked on/off in the folding tree (described below), poke() in that code is called. It calls poke() above which then invokes
poke() in the Processingjs sketch. That last call is shown above by the
processingInstance.poke(who, checked). poke() in the Processingjs sketch takes care of adding/removing particles from
the physics model. The particles consist of mother nodes (representing the Designer or Builder) and daughter nodes (representing the models
produced by that designer or builder). The mother nodes will be loosely linked to one another by attraction strengths proportional
to their "closeness". The daughter nodes are linked to their mother node using springs.
Once I got the problems above sorted out, developing the graphic data explorer is now pretty easy - add some new function
to the code and try it in the Processing GUI using a simple mouse click testcase to simulate selecting a Designer or Builder, say.
The main problem is that simple delimiters (e.g. typing a "," where it should be a "." like position,x instead of position.x) or say missing a "}" throws
the Processing compiler way off. It doesn't point you very well to the error. I try to compile the code often, making small changes
between compiles. Anyway, then when that is working in the Processing GUI, I refresh the web app (refresh(F5) in my Eclipse workspace,
and then I refresh the UI webpage in my browser).
I then check to see if anything has broken running on the browser. So far, it hasn't been too bad. Some stuff doesn't
move over - like name conflicts. Java clearly is better sorting out locally scoped variable names. Also, type conversion
that I'm probably a little lazy about relying on the default behavior in Java, can bite me when now running in the browser.
| E.g. | int i,j=123; i = (j/100)*100; results in 100 in Java and in 123 in JavaScript. |
| int i,j=123; i = ((int)(j/100))*100; works the same in both. |
Doing the graphical data navigator in Processingjs seems to be working good (so far). The best part is that the Processing development environment (add something, try, add something else, try it) is pretty nice IMO.
Folding Tree (lower left)
Below the graph is a folding tree to select from the list of Designers, Builders, and all Models. For the folding tree, I am using Simple Tree Menu. I made the following changes to that code:
- Added a checkbox to each Designer, Builder and Model element in my tree, e.g.
<li><input type=checkbox onclick="poke(this,'Crealock');">Crealock
The elements that don't have a checkbox have their id set to 'x1', e.g.<li id="x1">By designer
- Added
{ var posx = e.clientX; if ((this.id != 'x1') && (posx>33 && posx<58)) return;to the top of the onclick section in simpletreemenu.js so that when the user clicks on a checkbox, that portion of the tree won't expand or collapse.
Plots (right hand side)
The plots of the various sailboat charactristics are on the right hand side of the UI. I am currently using Google Charts, using the servlet mentioned above to generate the content of the frame. The content consists of <img> tags with the chd data fetched each time from a MySQL database on the GoDaddy host (which also serves up the html for the two other two frames, as well as the .js and .css support files). This results in a boatload of Google Charts generated on the fly each time the user clicks on (or off) a checkbox in the navigation tree. The goal is a highly interactive app. I'm using Google Charts because it was fairly easy to get up and running, comes close to being viable IMO, and was a good reason to try them out. The amazing thing IMO is that it seems to work as well as it does. I'll probably change to an more javascript-based approach in order to improve performance - escpecially as I get into a more interactive user experience.
Using HTML frames and separating the javascript into 3 isolated components - one each for the graphical navigator, the folding tree, and the graph plotter - seems to be working well and I'll probably stick with that. Using the servlet and MySql database on GoDaddy has been OK, except for the fact that the servlet is only refreshed when the GoDaddy server is restarted at 1:00 AM MST. I can rename the servlet, upload that version to the GoDaddy server, and invoke the changed version in realtime though. So, it's not that bad. I just need to be more careful about what version is in place for the 1:00 AM refresh.
| References: | ||
| processingjs.org/ | ||
| processing.org/ | ||
Traer.physics port to AS3
kylescholz.com/blog - JSViz and good force-related tutorials and demos
Interesting samples:
MassiveForce - simple, sweet
Traer AS3, the mandatory cloth simulation - drag the pin on the right
abstract01js - click on the canvas and drag
processingjs.org/learning - scroll about 1/2 way down the page
Raphaël—JavaScript Library
Wikipedia reading:
Euler method