From 87deeaa36022601caed6c1849b4bcad8e9ca1c09 Mon Sep 17 00:00:00 2001
From: fjenett <fjenett@gmail.com>
Date: Sat, 18 Jun 2011 19:37:00 +0000
Subject: [PATCH] js mode example cleanups

---
 .../colorFinder/colorFinder.pde               | 13 +++---
 .../colorFinder/jsinterface.js                | 23 +++++++----
 .../DocumentObjectModel/nodeTree/forrest.js   |  6 +--
 .../DocumentObjectModel/nodeTree/nodeTree.pde |  6 ++-
 .../selectionFlower/selectionFlower.pde       |  6 ++-
 .../selectionFlower/selectionmonitor.js       | 21 +++++-----
 .../Environment/FileReader/FileReader.pde     | 26 ------------
 .../examples/Environment/FileReader/reader.js | 35 ----------------
 .../Environment/Input/lockedIn/lockedIn.pde   |  9 +++--
 .../Environment/Input/lockedIn/promt.js       |  9 +++--
 .../examples/HTML5/Audio/blobb/blobb.pde      | 35 ++++++++--------
 javascript/examples/HTML5/Audio/blobb/snd.js  |  5 ++-
 .../HTML5/DragDrop/wordDroppings/drag_drop.js |  9 +++--
 .../DragDrop/wordDroppings/wordDroppings.pde  |  5 ++-
 .../HTML5/Video/atTheStation/atTheStation.pde | 40 ++++++++++---------
 .../examples/HTML5/Video/atTheStation/mov.js  | 25 +++++++++---
 16 files changed, 129 insertions(+), 144 deletions(-)
 delete mode 100644 javascript/examples/Environment/FileReader/FileReader.pde
 delete mode 100644 javascript/examples/Environment/FileReader/reader.js

diff --git a/javascript/examples/Environment/DocumentObjectModel/colorFinder/colorFinder.pde b/javascript/examples/Environment/DocumentObjectModel/colorFinder/colorFinder.pde
index bf0a77107..09bc9498d 100644
--- a/javascript/examples/Environment/DocumentObjectModel/colorFinder/colorFinder.pde
+++ b/javascript/examples/Environment/DocumentObjectModel/colorFinder/colorFinder.pde
@@ -1,9 +1,6 @@
 /**
  *    <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> 
+ *    HTML page from a sketch.</p>
  */
 
 color mColor = 255;
@@ -16,6 +13,9 @@ void setup ()
 void draw ()
 {
     background( mColor );
+    
+    textAlign(CENTER); fill(0);
+    text("<<  click and drag here  >>", width/2, height/2);
 }
 
 void mouseDragged ()
@@ -26,15 +26,16 @@ void mouseDragged ()
     
     if ( js )
     {
+        // call JavaScript function, see "jsinterface.js"
         js.setColor(red(mColor), green(mColor), blue(mColor));
     }
 }
 
 /**
  *    Define an interface that will act as glue between this sketch
- *    and "real" JavaScript running in the HTML page. The name does not matter.
+ *    and "real" JavaScript running in the HTML page.
  *
- *    The interface must define any functions that one intends to call
+ *    The interface must define all functions that you intend to call
  *    from inside the sketch.
  */
 interface JavaScriptInterface
diff --git a/javascript/examples/Environment/DocumentObjectModel/colorFinder/jsinterface.js b/javascript/examples/Environment/DocumentObjectModel/colorFinder/jsinterface.js
index b44711305..4803a894c 100644
--- a/javascript/examples/Environment/DocumentObjectModel/colorFinder/jsinterface.js
+++ b/javascript/examples/Environment/DocumentObjectModel/colorFinder/jsinterface.js
@@ -1,6 +1,6 @@
 /**
  *    This code will be embedded into the HTML page as "normal"
- *    JavaScript code with a <script> tag. This allows one to
+ *    JavaScript code though a <script> tag. This allows one to
  *    interact with the page as any normal JavaScript code can.
  */
  
@@ -12,17 +12,16 @@
  // make the connection with the 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" );
+     // Get the instance. We just use the first one. Another way would be to use
+     // the automaticaly generated ID "colorFinder", see <canvas> in index.html
+     var mySketchInstance = Processing.instances[0];
      
      if ( mySketchInstance == undefined ) { // means it has not started
          setTimeout( makeTheLink, 200 );    // try again later
-         return;
+         
+     } else {
+         mySketchInstance.setInterfaceLink(this); // make the connection
      }
-     
-     mySketchInstance.setInterfaceLink(this); // make the connection
  }
  
  // called from the sketch!
@@ -37,4 +36,12 @@
      {
          h1s[0].innerHTML = "Color is: " + colorString;
      }
+     
+     var links = document.links;
+     if ( links.length > 0 )
+     {
+         for ( var l in links ) {
+             links[l].style.color = colorString;
+         }
+     }
  }
diff --git a/javascript/examples/Environment/DocumentObjectModel/nodeTree/forrest.js b/javascript/examples/Environment/DocumentObjectModel/nodeTree/forrest.js
index 50e970f84..94873fc48 100644
--- a/javascript/examples/Environment/DocumentObjectModel/nodeTree/forrest.js
+++ b/javascript/examples/Environment/DocumentObjectModel/nodeTree/forrest.js
@@ -7,7 +7,7 @@ window.onload = function () {
 function tryFindSketch () {
     var sketch = Processing.instances[0];
     if ( sketch == undefined )
-        return setTimeout(tryFindSketch, 200);
-    
-    sketch.setTree( document.body.parentNode );
+        setTimeout(tryFindSketch, 200);  // retry after 0.2 secs
+    else
+        sketch.setTree( document.body.parentNode );
 }
diff --git a/javascript/examples/Environment/DocumentObjectModel/nodeTree/nodeTree.pde b/javascript/examples/Environment/DocumentObjectModel/nodeTree/nodeTree.pde
index cacf950a2..66852af65 100644
--- a/javascript/examples/Environment/DocumentObjectModel/nodeTree/nodeTree.pde
+++ b/javascript/examples/Environment/DocumentObjectModel/nodeTree/nodeTree.pde
@@ -1,5 +1,5 @@
 /**
- *    Renders a simple graph from this documents node tree.
+ *    Renders a simple graph from this documents DOM node tree.
  */
  
  Node tree;
@@ -72,13 +72,15 @@
      text( label, x+10, y+3 );
  }
  
+ // called by JavaScript, sends the root DOM Node
  void setTree ( Node root )
  {
      tree = root;
  }
  
  
- /* explain Node to Processing */
+ // explain Node to Processing, the attributes described here are part of the DOM Node:
+ // http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247
  interface Node
  {
      Node[] childNodes;
diff --git a/javascript/examples/Environment/DocumentObjectModel/selectionFlower/selectionFlower.pde b/javascript/examples/Environment/DocumentObjectModel/selectionFlower/selectionFlower.pde
index b3a9bf350..1ec96532b 100644
--- a/javascript/examples/Environment/DocumentObjectModel/selectionFlower/selectionFlower.pde
+++ b/javascript/examples/Environment/DocumentObjectModel/selectionFlower/selectionFlower.pde
@@ -1,6 +1,6 @@
 /**
  *    <p>This example shows you how to get the currently selected text 
- *    from the HTML page that this sketch is running in.</p>
+ *    from this HTML page.</p>
  *
  *    <p>Just select some text somewhere on this page and see it be transformed
  *    into a ... graph.</p>
@@ -8,6 +8,7 @@
  *    <p>Heavily inspired by <a href="http://bit.ly/jHvvWX">Boris Müller</a>.</p>
  */
 
+// a directive to set the background transparent
 /* @pjs transparent=true; */
 
 String selectedText = "";
@@ -65,10 +66,11 @@ void draw ()
     else
     {
         fill( map( sin(frameCount/12.0),-1,1,100,200 ) );
-        text("Select some (other) text on this page to start.", 2, height/2);
+        text("Select some text (not this) to start.", 2, height/2);
     }
 }
 
+// called from JavaScript
 void setSelectionText ( String txt )
 {
     selectedText = txt;
diff --git a/javascript/examples/Environment/DocumentObjectModel/selectionFlower/selectionmonitor.js b/javascript/examples/Environment/DocumentObjectModel/selectionFlower/selectionmonitor.js
index 73ae2364f..83c0c3d22 100644
--- a/javascript/examples/Environment/DocumentObjectModel/selectionFlower/selectionmonitor.js
+++ b/javascript/examples/Environment/DocumentObjectModel/selectionFlower/selectionmonitor.js
@@ -1,7 +1,6 @@
 /**
  *    This code will be embedded into the HTML page as "normal"
- *    JavaScript code through a <script> tag. This allows one to
- *    interact with the page as any normal JavaScript code can.
+ *    JavaScript code through a <script> tag.
  */
 
 var mySketchInstance;
@@ -13,17 +12,19 @@ window.onload = function () {
 
 // this is called (repeatedly) to find the sketch
 function getSketchInstance() {
-    var s = Processing.getInstanceById("selectionFlower");
-    if ( s == undefined )
-        return setTimeout(getSketchInstance, 200); // try again a bit later
-
-    mySketchInstance = s;
-    monitorSelection();
+    var s = Processing.instances[0];
+    if ( s == undefined ) {
+        setTimeout(getSketchInstance, 200); // try again a bit later
+        
+    } else {
+        mySketchInstance = s;
+        monitorSelection();
+    }
 }
 
-// this code gets called all the time (every 1/5 sec) to check
+// this code gets called repeatedly (every 1/5 sec) to check
 // if the selection changed
-function monitorSelection ( ) {
+function monitorSelection () {
     
     var txt = undefined;
     
diff --git a/javascript/examples/Environment/FileReader/FileReader.pde b/javascript/examples/Environment/FileReader/FileReader.pde
deleted file mode 100644
index 90ee22b51..000000000
--- a/javascript/examples/Environment/FileReader/FileReader.pde
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- *    Select an image to have it be transferred to your sketch
- *    without the need to be uploaded first. <br />
- *
- *    <form><input type="file" id="file-input"/></form>
- *
- *    No Safari support.
- */
- 
- PImage img = null;
- 
- void setup ()
- {
-     size(300, 200);
- }
- 
- void draw ()
- {
-     background(255);
-     if ( img != null ) image(img, 0,0, width,height);
- }
- 
- void newImageAvailable ( Image i )
- {
-     img = new PImage( i );
- }
diff --git a/javascript/examples/Environment/FileReader/reader.js b/javascript/examples/Environment/FileReader/reader.js
deleted file mode 100644
index 601a6c598..000000000
--- a/javascript/examples/Environment/FileReader/reader.js
+++ /dev/null
@@ -1,35 +0,0 @@
-
-window.onload = function () {
-    tryFindSketch();
-}
-
-function tryFindSketch() {
-    var sketch = Processing.instances[0];
-    if ( sketch == undefined )
-        return setTimeout(tryFindSketch, 200); // retry soon
-    
-    sketch.console = console;
-    initUploader(sketch);
-}
-
-function initUploader ( sketch ) {
-    var uploadField = document.getElementById("file-input");
-    
-    uploadField.onchange = function (e) {
-        e.preventDefault();
-        
-        var file = uploadField.files[0];
-        var reader = new FileReader();
-        
-        reader.onload = function (event) {
-            var img = new Image();
-            img.onload = function (event2) {
-                sketch.newImageAvailable(img);
-            }
-            img.src = event.target.result;
-        };
-        reader.readAsDataURL(file);
-        
-        return false;
-    }
-}
diff --git a/javascript/examples/Environment/Input/lockedIn/lockedIn.pde b/javascript/examples/Environment/Input/lockedIn/lockedIn.pde
index 52e33c6d5..c810179df 100644
--- a/javascript/examples/Environment/Input/lockedIn/lockedIn.pde
+++ b/javascript/examples/Environment/Input/lockedIn/lockedIn.pde
@@ -1,5 +1,6 @@
 /**
- *  This example demonstrates how to promt for user input
+ *  This example demonstrates how to promt for user input. It first asks
+ *  for password which then is used to unlock the sketch.
  */
  
 String password = null;
@@ -94,15 +95,17 @@ boolean testLocked ( String passTry )
 }
 
 
-// this is needed to define a way for us to be able to call out
-
+/* this interface is needed to explain Processing what the
+properties of the object are that is handed in from JS */
 interface JavaScript
 {
     String promtForInput( String message, String defaultAnswer );
 }
 
+// a variable
 JavaScript js;
 
+// called from JavaScript to hand in the object
 void setJS ( JavaScript jsi )
 {
     js = jsi;
diff --git a/javascript/examples/Environment/Input/lockedIn/promt.js b/javascript/examples/Environment/Input/lockedIn/promt.js
index b2e823632..01df5d426 100644
--- a/javascript/examples/Environment/Input/lockedIn/promt.js
+++ b/javascript/examples/Environment/Input/lockedIn/promt.js
@@ -1,16 +1,19 @@
 
+// wait for document to load
 window.onload = function () {
     tryFindSketch();
 }
 
+// find sketch instance
 function tryFindSketch () {
     var sketch = Processing.instances[0];
     if ( sketch == undefined )
-        return setTimeout( tryFindSketch, 200 ); // try again in 0.2 secs
-    
-    sketch.setJS( this );
+        setTimeout( tryFindSketch, 200 ); // try again in 0.2 secs
+    else
+        sketch.setJS( this );
 }
 
+// called from inside the sketch
 function promtForInput ( msg, def ) {
     return window.prompt( msg, def );
 }
diff --git a/javascript/examples/HTML5/Audio/blobb/blobb.pde b/javascript/examples/HTML5/Audio/blobb/blobb.pde
index e01923c61..37cfd978f 100644
--- a/javascript/examples/HTML5/Audio/blobb/blobb.pde
+++ b/javascript/examples/HTML5/Audio/blobb/blobb.pde
@@ -1,5 +1,5 @@
 /**
- *   Blobbbs. <br />
+ *   Blobbbs. Bouncy, noisy.<br />
  *
  *   <audio>
  *    <source src="BD.wav" />
@@ -30,20 +30,7 @@
      }
  }
  
- void newAudio ( Audio a )
- {
-     if ( audio == null )
-     {
-         audio = a;
-         
-         balls = new Ball[10];
-         for ( int i = 0; i < balls.length; i++ )
-         {
-             balls[i] = new Ball();
-         }
-     }
- }
- 
+ // a ball class .. again.
  class Ball
  {
      float px,py;
@@ -108,7 +95,23 @@
      }
  }
  
- /* let Processing know about the HTMLAudioElement */
+ // called from JavaScript to set the Audio Element
+ void newAudio ( Audio a )
+ {
+     if ( audio == null )
+     {
+         audio = a;
+         
+         balls = new Ball[10];
+         for ( int i = 0; i < balls.length; i++ )
+         {
+             balls[i] = new Ball();
+         }
+     }
+ }
+ 
+ // let Processing know about the HTMLAudioElement:
+ // http://dev.w3.org/html5/spec/the-iframe-element.html#the-audio-element
  interface Audio
  {
      boolean muted;
diff --git a/javascript/examples/HTML5/Audio/blobb/snd.js b/javascript/examples/HTML5/Audio/blobb/snd.js
index 4bd5364f2..7f6c93172 100644
--- a/javascript/examples/HTML5/Audio/blobb/snd.js
+++ b/javascript/examples/HTML5/Audio/blobb/snd.js
@@ -1,12 +1,13 @@
 
+// wait for document to load
 window.onload = function () {
     var audioNode = document.getElementsByTagName("audio")[0];
     
     function tryFindSketch () {
         var sketch = Processing.instances[0];
         if ( sketch == undefined )
-            return setTimeout(tryFindSketch,200); // retry
-        
+            setTimeout(tryFindSketch,200); // retry
+        else
             sketch.newAudio( audioNode );
     }
     
diff --git a/javascript/examples/HTML5/DragDrop/wordDroppings/drag_drop.js b/javascript/examples/HTML5/DragDrop/wordDroppings/drag_drop.js
index a0fc1cfd1..1bf51e1eb 100644
--- a/javascript/examples/HTML5/DragDrop/wordDroppings/drag_drop.js
+++ b/javascript/examples/HTML5/DragDrop/wordDroppings/drag_drop.js
@@ -1,17 +1,20 @@
+
+// wait for document to load ...
 window.onload = function () {
     tryLinkSketch();
 }
 
+// try and find the sketch
 function tryLinkSketch() {
-    var sketchId = "wordDroppings";
-    var sketch = Processing.getInstanceById(sketchId);
+    var sketch = Processing.instances[0];
     if ( sketch == undefined )
-        return setTimeout(tryLinkSketch, 200); /*try again later*/
+        setTimeout(tryLinkSketch, 200); /*try again later*/
     else {
         initDragDrop(sketch);
     }
 }
 
+// initialize DnD, add event listeners
 function initDragDrop ( sketch ) {
   var target = sketch.externals.canvas;
   var targetPosition = getElementPosition(target);
diff --git a/javascript/examples/HTML5/DragDrop/wordDroppings/wordDroppings.pde b/javascript/examples/HTML5/DragDrop/wordDroppings/wordDroppings.pde
index af79530f4..7d65553dd 100644
--- a/javascript/examples/HTML5/DragDrop/wordDroppings/wordDroppings.pde
+++ b/javascript/examples/HTML5/DragDrop/wordDroppings/wordDroppings.pde
@@ -5,8 +5,6 @@
  *        <div>Drag</div> <div>us</div> <div>to</div> <div>your</div> <div>sketch</div>
  *    </div>
  *    <style>.draggables div{display: inline-block;background:white;color: black;padding: 10px;}</style>
- *    <br />
- *    (Opera currently not supported …)
  */
  
 color normalColor;
@@ -60,6 +58,9 @@ void draw ()
     text( message, cx+7.5, cy+2.5 );
 }
 
+// the following events are not part of Processing API. they
+// are being called from JavaScript, see ".js" tab
+
 void dragEnter ()
 {
     currentColor = dragColor;
diff --git a/javascript/examples/HTML5/Video/atTheStation/atTheStation.pde b/javascript/examples/HTML5/Video/atTheStation/atTheStation.pde
index d5849b7a7..11078c6b9 100644
--- a/javascript/examples/HTML5/Video/atTheStation/atTheStation.pde
+++ b/javascript/examples/HTML5/Video/atTheStation/atTheStation.pde
@@ -1,5 +1,5 @@
 /**
- *    <video width="160" height="120">
+ *    <video width="160" height="120" style="display:none">
  *        <source src="station.mp4" />
  *        <source src="station.ogv" />
  *        <source src="station.webm" />
@@ -13,7 +13,6 @@
  {
      size( 320, 240 );
      
-     textFont(createFont("Arial", 20));
      noStroke();
      
      textFont(createFont("Arial", 20));
@@ -39,32 +38,37 @@
                  ellipse(ix*2, iy*2, br, br);
              }
          }
-         fill(0);
-         text(video.currentTime, 5, height-5);
+         
+         fill(200);
+         rect(5,height-5-20,width-10,20);
+         fill(100);
+         rect(5,height-5-20,
+              map(video.currentTime,0,video.duration,0,width-10),
+              20);
+     }
+ }
+ 
+ boolean wasDragged = false;
+ void mouseDragged ()
+ {
+     if ( video != null )
+     {
+         video.currentTime = map(constrain(mouseX,0,width-10),0,width-10,0,video.duration);
+         wasDragged = true;
+         video.pause();
      }
  }
  
  void mouseReleased ()
  {
-     if ( video != null )
+     if ( video != null && !wasDragged )
      {
-         if ( video.paused || video.ended )
-         {
-             video.loop = true;
+         if ( video.paused )
              video.play();
-         }
          else
              video.pause();
      }
- }
- 
- void mouseDragged ()
- {
-     if ( video != null )
-     {
-         video.pause();
-         video.currentTime = map(mouseX,0,width,0,video.duration);
-     }
+     wasDragged = false;
  }
  
  /* called from JavaScript to set the freshly loaded video */
diff --git a/javascript/examples/HTML5/Video/atTheStation/mov.js b/javascript/examples/HTML5/Video/atTheStation/mov.js
index 2d17c41a7..f0d634ac9 100644
--- a/javascript/examples/HTML5/Video/atTheStation/mov.js
+++ b/javascript/examples/HTML5/Video/atTheStation/mov.js
@@ -1,17 +1,32 @@
 window.onload = function () {
     var video = document.getElementsByTagName("video")[0];
-    
-    addEvent(video, 'canplaythrough', function(e) {
-        tryFindSketch();
-    }, false);
+    video['loop'] = true;
     
     function tryFindSketch () {
         var sketch = Processing.instances[0];
         if ( sketch == undefined )
             return setTimeout(tryFindSketch, 200); // retry in 0.2 secs
 
-        sketch.setVideo( video );
+        (function( s, v ){
+            var tryAddVideo = function () {
+                if ( v.readyState > 0 ) {
+                    s.setVideo(v);
+                } else {
+                    setTimeout(tryAddVideo, 200);
+                }
+            }
+            tryAddVideo();
+        })( sketch, video );
     }
+    
+    addEvent(video,'ended',function(){
+        if ( 'loop' in this && this.loop ) {
+            this.currentTime = 0;
+            this.play();
+        }
+    });
+    
+    tryFindSketch();
 }
 
 // http://html5demos.com/