Sailboat Characteristics Plotter - notes
Man-O-War Cay, 3 Dec 2010
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);
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. 
I try to save the code fairly often, just in case I get lost and need to revert to a previously working version.
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 (( != 'x1') && (posx>33 && posx<58))
    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.
When the user clicks on/off a checkbox, poke() calls a method in the javascript for the graphical frame (above) to update the graph, then updates a what's-been-selected element in the form in the html code in the graph-plotting frame (on the right) and then invokes submit on the form.  The submit invokes a servlet on the GoDaddy host which fetches the data from the MySql database, constructs lots of Google Chart <img> tags, returning the page to the browser.  The <img> tags result in fetches to a no-doubt overworked, underpaid Google server someplace, returning the graphs to the browser as images.  Whew.  The folding tree code seems to be working OK.
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: - possible alternative for a physics system?
   Traer.physics port to AS3 - 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 - scroll about 1/2 way down the page
   Raphaël—JavaScript Library
Wikipedia reading:
   Euler method