From f1ab2a75fe233c320af0fee854fb4d0a2f832396 Mon Sep 17 00:00:00 2001
From: fjenett <fjenett@gmail.com>
Date: Fri, 10 Jun 2011 10:28:04 +0000
Subject: [PATCH] another js mode HTML5 example: geo location

---
 .../HTML5/DragDrop/wordDroppings/drag_drop.js |  2 +-
 .../DragDrop/wordDroppings/wordDroppings.pde  | 12 ++-
 .../HTML5/GeoLocation/hiToYouToo/geoloc.js    | 22 ++++++
 .../GeoLocation/hiToYouToo/hiToYouToo.pde     | 79 +++++++++++++++++++
 4 files changed, 111 insertions(+), 4 deletions(-)
 create mode 100644 javascript/examples/HTML5/GeoLocation/hiToYouToo/geoloc.js
 create mode 100644 javascript/examples/HTML5/GeoLocation/hiToYouToo/hiToYouToo.pde

diff --git a/javascript/examples/HTML5/DragDrop/wordDroppings/drag_drop.js b/javascript/examples/HTML5/DragDrop/wordDroppings/drag_drop.js
index 98434147a..a0fc1cfd1 100644
--- a/javascript/examples/HTML5/DragDrop/wordDroppings/drag_drop.js
+++ b/javascript/examples/HTML5/DragDrop/wordDroppings/drag_drop.js
@@ -17,7 +17,7 @@ function initDragDrop ( sketch ) {
   var targetPosition = getElementPosition(target);
   var messageType = 'text/plain';
     
-  var links = document.querySelectorAll('a'), el = null;
+  var links = document.querySelectorAll('.draggables > div'), el = null;
   for (var i = 0; i < links.length; i++) {
     el = links[i];
   
diff --git a/javascript/examples/HTML5/DragDrop/wordDroppings/wordDroppings.pde b/javascript/examples/HTML5/DragDrop/wordDroppings/wordDroppings.pde
index 0ecd61cf1..af79530f4 100644
--- a/javascript/examples/HTML5/DragDrop/wordDroppings/wordDroppings.pde
+++ b/javascript/examples/HTML5/DragDrop/wordDroppings/wordDroppings.pde
@@ -1,6 +1,12 @@
 /**
- *    Drag one of the links below into the sketch window!      <br/>
- *    (Opera currently not supported, sorry!)
+ *    This sketch demonstrates HTML5 drag and drop functionality.
+ *
+ *    <div class="draggables">
+ *        <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;
@@ -39,7 +45,7 @@ void draw ()
     {
         for ( int i = 1; i < trail.size(); i++ )
         {
-            stroke(map(i,1,trail.size(),100,0));
+            stroke(map(i,1,trail.size(),80,0));
             line( trail.get(i-1)[0], trail.get(i-1)[1], 
                   trail.get(i)[0],   trail.get(i)[1] );
         }
diff --git a/javascript/examples/HTML5/GeoLocation/hiToYouToo/geoloc.js b/javascript/examples/HTML5/GeoLocation/hiToYouToo/geoloc.js
new file mode 100644
index 000000000..0c4c73abd
--- /dev/null
+++ b/javascript/examples/HTML5/GeoLocation/hiToYouToo/geoloc.js
@@ -0,0 +1,22 @@
+
+window.onload = function () {
+    tryFindSketch();
+}
+
+function tryFindSketch () {
+    var sketch = Processing.getInstanceById("hiToYouToo");
+    if ( sketch == undefined )
+        return setTimeout(tryFindSketch, 200); // try again in 0.2 secs
+    
+    if ( navigator.geolocation ) {
+        navigator.geolocation.getCurrentPosition( function(position) {
+            /*success*/
+            sketch.setGeoLocation(position);
+        }, function( position_error ) {
+            /*error*/
+            sketch.geoLocationError(position_error.message);
+        });
+    } else {
+        sketch.geoLocationError( "Your browser does not support location services." );
+    }
+}
diff --git a/javascript/examples/HTML5/GeoLocation/hiToYouToo/hiToYouToo.pde b/javascript/examples/HTML5/GeoLocation/hiToYouToo/hiToYouToo.pde
new file mode 100644
index 000000000..43c21d2e7
--- /dev/null
+++ b/javascript/examples/HTML5/GeoLocation/hiToYouToo/hiToYouToo.pde
@@ -0,0 +1,79 @@
+/**
+ *    This example shows you how to find and use the browsers geo
+ *    location services.<br />
+ *    <br />
+ *    A message should pop up asking for permission to access your 
+ *    location data.
+ */
+ 
+GeoLocation loc = null;
+float pos_x, pos_y;
+
+boolean glNotAvail = false;
+String errorMessage = "";
+
+void setup ()
+{
+    size(300, 200);
+    textFont(createFont("Arial", 12));
+}
+
+void draw ()
+{
+    background(255);
+    
+    if ( glNotAvail ) // failed
+    {
+        textAlign(CENTER);
+        fill( 255, 0, 0 );
+        text( "Something went wrong:\n" + errorMessage, 
+              width/4, height/4, width/2, height/2 );
+    }
+    else if ( loc == null ) // waiting for location to come in ..
+    {
+        float w = 5 + (sin(frameCount/60.0) + 1) * (height / 3);
+        ellipse( width/2, height/2, w, w );
+    }
+    else // we have a location! yay!
+    {
+        noStroke();
+        fill( 255, 0,0 );
+        ellipse(pos_x, pos_y, 7, 7);
+        boolean onRightHalf = pos_x > width/2;
+        textAlign( onRightHalf ? RIGHT : LEFT );
+        text( "HI! You are here!", 
+              pos_x + (onRightHalf ? -10 : 10), 
+              pos_y + 3 );
+    }
+}
+
+/* these two functions are called from plain javascript, see .js tab */
+
+void setGeoLocation ( GeoLocation position )
+{
+    loc = position;
+    
+    // this is a really simplistic (course) "projection",
+    // see: http://en.wikipedia.org/wiki/Map_projection
+    pos_x = (180.0 + loc.coords.longitude) * (width  / 360.0);
+    pos_y = ( 90.0 - loc.coords.latitude ) * (height / 180.0);
+}
+
+void geoLocationError ( String message )
+{
+    glNotAvail = true; // bummer!
+    errorMessage = message;
+}
+
+/* these classes define how to access the data coming in from the browser */
+
+class Coordinates
+{
+    float latitude;
+    float longitude;
+}
+
+class GeoLocation
+{
+    Coordinates coords;
+}