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

app/src/processing/mode/javascript/JavaScriptEditor.java

@@ -295,16 +295,16 @@ public class JavaScriptEditor extends Editor
 	{
 		jsServer = new JavaScriptServer( serverRoot );
 		jsServer.start();
-		System.out.println( "Server started." );
 		
 		while ( !jsServer.isRunning() ) {}
 		
 		String location = localDomain + ":" + jsServer.getPort() + "/";
-		System.out.println( location );
+		
+		statusNotice( "Server started: " + location );
 
-		if ( !System.getProperty("os.name").startsWith("Mac OS") )
+		//if ( !System.getProperty("os.name").startsWith("Mac OS") )
 			Base.openURL( location );
-		else
+		/*else
 		{
 			try {
 				String scpt = "osascript -e "+
@@ -314,12 +314,11 @@ public class JavaScriptEditor extends Editor
 			} catch ( Exception e ) {
 				Base.openURL( location );
 			}
-		}
+		}*/
 	}
 	else if ( jsServer.isRunning() )
 	{
-		System.out.println( "Server running, reload your browser window." );
-		System.out.println( localDomain + ":" + jsServer.getPort() + "/" );
+		statusNotice( "Server running ("+localDomain + ":" + jsServer.getPort() +"), reload your browser window." );
 	}
     toolbar.activate(JavaScriptToolbar.RUN);
   }
@@ -332,7 +331,7 @@ public class JavaScriptEditor extends Editor
 	if ( jsServer != null && jsServer.isRunning() )
 		jsServer.shutDown();
 	
-	System.out.println("Server stopped.");
+	statusNotice("Server stopped.");
 	toolbar.deactivate(JavaScriptToolbar.RUN);
   }
   

app/src/processing/mode/javascript/JavaScriptMode.java

@@ -105,6 +105,7 @@ public class JavaScriptMode extends Mode
 	
 	File jExamples = jMode.getContentFile("examples");
     return new File[] { 
+      new File(examplesFolder, "Environment"),
       new File(jExamples, "Basics"),
       new File(jExamples, "Topics"),
       new File(jExamples, "3D"),

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;
+     }
+ }