server start/stop now generates status messages; updated template to remove use of focus ring from canvas element; added a first example

javascript/examples/Environment/DocumentObjectModel/colorFinder/colorFinder.pde

@@ -0,0 +1,58 @@
+/**
+ *    <p>This example shows you how to manipulate the DOM of a
+ *    HTML page that this sketch is placed in.</p>
+ *
+ *    <p>Click and drag inside the sketch area to change the 
+ *    text color of the page</p> 
+ */
+
+color mColor = 255;
+
+void setup ()
+{
+    size( 600, 100 );
+}
+
+void draw ()
+{
+    background( mColor );
+}
+
+void mouseDragged ()
+{
+    colorMode(HSB);
+    mColor = color( map(mouseX, 0,width, 0,255), 200, map(mouseY, 0, height, 255, 0) );
+    colorMode(RGB);
+}
+
+void mouseReleased ()
+{
+    if ( js )
+    {
+        js.setColor(red(mColor), green(mColor), blue(mColor));
+    }
+}
+
+/**
+ *    Define an interface that will act as glue between your sketch
+ *    and "real" JavaScript running in your page. The name does not matter.
+ *
+ *    The interface must define any functions that you intend to call
+ *    from inside your sketch.
+ */
+interface JavaScriptInterface
+{
+    void setColor( int r, int g, int b );
+}
+
+/* A variable to hold whatever implements the interface. */
+JavaScriptInterface js;
+
+/**
+ *    A setter function to be called from outside (JavaScript)
+ *    to set the variable above.
+ */
+void setInterfaceLink ( JavaScriptInterface jsin )
+{
+    js = jsin;
+}

javascript/examples/Environment/DocumentObjectModel/colorFinder/jsinterface.js

@@ -0,0 +1,40 @@
+/**
+ *    This code will be embedded into your HTML page as "normal"
+ *    JavaScript code with a <script> tag. This allows you to
+ *    interact with the page as any normal JavaScript code can.
+ */
+ 
+ // called once the page has fully loaded
+ window.onload = function () {
+     makeTheLink();
+ }
+ 
+ // make the connection with your sketch
+ function makeTheLink() {
+     
+     // Get the instance. The id is automatically generated 
+     // based on the sketch name by removing anything but letters
+     // and numbers.
+     var mySketchInstance = Processing.getInstanceById( "colorFinder" );
+     
+     if ( mySketchInstance == undefined ) { // means it has not started
+         setTimeout( makeTheLink, 200 );    // try again later
+         return;
+     }
+     
+     mySketchInstance.setInterfaceLink(this); // make the connection
+ }
+ 
+ // called from your sketch!
+ function setColor ( rr, gg, bb ) {
+     
+     var colorString = 'rgb('+rr+','+gg+','+bb+')';
+     
+     document.body.style.color = colorString;
+     
+     var h1s = document.getElementsByTagName("h1");
+     if ( h1s != undefined && h1s.length > 0 )
+     {
+         h1s[0].innerHTML = "Color is: " + colorString;
+     }
+ }