| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -17,7 +17,7 @@ function initDragDrop ( sketch ) { | |||
| 17 | 17 | var targetPosition = getElementPosition(target); | |
| 18 | 18 | var messageType = 'text/plain'; | |
| 19 | 19 | ||
| 20 | - var links = document.querySelectorAll('a'), el = null; | ||
| 20 | + var links = document.querySelectorAll('.draggables > div'), el = null; | ||
| 21 | 21 | for (var i = 0; i < links.length; i++) { | |
| 22 | 22 | el = links[i]; | |
| 23 | 23 | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -1,6 +1,12 @@ | |||
| 1 | 1 | /** | |
| 2 | - * Drag one of the links below into the sketch window! <br/> | ||
| 3 | - * (Opera currently not supported, sorry!) | ||
| 2 | + * This sketch demonstrates HTML5 drag and drop functionality. | ||
| 3 | + * | ||
| 4 | + * <div class="draggables"> | ||
| 5 | + * <div>Drag</div> <div>us</div> <div>to</div> <div>your</div> <div>sketch</div> | ||
| 6 | + * </div> | ||
| 7 | + * <style>.draggables div{display: inline-block;background:white;color: black;padding: 10px;}</style> | ||
| 8 | + * <br /> | ||
| 9 | + * (Opera currently not supported …) | ||
| 4 | 10 | */ | |
| 5 | 11 | ||
| 6 | 12 | color normalColor; | |
@@ -39,7 +45,7 @@ void draw () | |||
| 39 | 45 | { | |
| 40 | 46 | for ( int i = 1; i < trail.size(); i++ ) | |
| 41 | 47 | { | |
| 42 | - stroke(map(i,1,trail.size(),100,0)); | ||
| 48 | + stroke(map(i,1,trail.size(),80,0)); | ||
| 43 | 49 | line( trail.get(i-1)[0], trail.get(i-1)[1], | |
| 44 | 50 | trail.get(i)[0], trail.get(i)[1] ); | |
| 45 | 51 | } | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,22 @@ | |||
| 1 | + | ||
| 2 | + window.onload = function () { | ||
| 3 | + tryFindSketch(); | ||
| 4 | + } | ||
| 5 | + | ||
| 6 | + function tryFindSketch () { | ||
| 7 | + var sketch = Processing.getInstanceById("hiToYouToo"); | ||
| 8 | + if ( sketch == undefined ) | ||
| 9 | + return setTimeout(tryFindSketch, 200); // try again in 0.2 secs | ||
| 10 | + | ||
| 11 | + if ( navigator.geolocation ) { | ||
| 12 | + navigator.geolocation.getCurrentPosition( function(position) { | ||
| 13 | + /*success*/ | ||
| 14 | + sketch.setGeoLocation(position); | ||
| 15 | + }, function( position_error ) { | ||
| 16 | + /*error*/ | ||
| 17 | + sketch.geoLocationError(position_error.message); | ||
| 18 | + }); | ||
| 19 | + } else { | ||
| 20 | + sketch.geoLocationError( "Your browser does not support location services." ); | ||
| 21 | + } | ||
| 22 | + } | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,79 @@ | |||
| 1 | + /** | ||
| 2 | + * This example shows you how to find and use the browsers geo | ||
| 3 | + * location services.<br /> | ||
| 4 | + * <br /> | ||
| 5 | + * A message should pop up asking for permission to access your | ||
| 6 | + * location data. | ||
| 7 | + */ | ||
| 8 | + | ||
| 9 | + GeoLocation loc = null; | ||
| 10 | + float pos_x, pos_y; | ||
| 11 | + | ||
| 12 | + boolean glNotAvail = false; | ||
| 13 | + String errorMessage = ""; | ||
| 14 | + | ||
| 15 | + void setup () | ||
| 16 | + { | ||
| 17 | + size(300, 200); | ||
| 18 | + textFont(createFont("Arial", 12)); | ||
| 19 | + } | ||
| 20 | + | ||
| 21 | + void draw () | ||
| 22 | + { | ||
| 23 | + background(255); | ||
| 24 | + | ||
| 25 | + if ( glNotAvail ) // failed | ||
| 26 | + { | ||
| 27 | + textAlign(CENTER); | ||
| 28 | + fill( 255, 0, 0 ); | ||
| 29 | + text( "Something went wrong:\n" + errorMessage, | ||
| 30 | + width/4, height/4, width/2, height/2 ); | ||
| 31 | + } | ||
| 32 | + else if ( loc == null ) // waiting for location to come in .. | ||
| 33 | + { | ||
| 34 | + float w = 5 + (sin(frameCount/60.0) + 1) * (height / 3); | ||
| 35 | + ellipse( width/2, height/2, w, w ); | ||
| 36 | + } | ||
| 37 | + else // we have a location! yay! | ||
| 38 | + { | ||
| 39 | + noStroke(); | ||
| 40 | + fill( 255, 0,0 ); | ||
| 41 | + ellipse(pos_x, pos_y, 7, 7); | ||
| 42 | + boolean onRightHalf = pos_x > width/2; | ||
| 43 | + textAlign( onRightHalf ? RIGHT : LEFT ); | ||
| 44 | + text( "HI! You are here!", | ||
| 45 | + pos_x + (onRightHalf ? -10 : 10), | ||
| 46 | + pos_y + 3 ); | ||
| 47 | + } | ||
| 48 | + } | ||
| 49 | + | ||
| 50 | + /* these two functions are called from plain javascript, see .js tab */ | ||
| 51 | + | ||
| 52 | + void setGeoLocation ( GeoLocation position ) | ||
| 53 | + { | ||
| 54 | + loc = position; | ||
| 55 | + | ||
| 56 | + // this is a really simplistic (course) "projection", | ||
| 57 | + // see: http://en.wikipedia.org/wiki/Map_projection | ||
| 58 | + pos_x = (180.0 + loc.coords.longitude) * (width / 360.0); | ||
| 59 | + pos_y = ( 90.0 - loc.coords.latitude ) * (height / 180.0); | ||
| 60 | + } | ||
| 61 | + | ||
| 62 | + void geoLocationError ( String message ) | ||
| 63 | + { | ||
| 64 | + glNotAvail = true; // bummer! | ||
| 65 | + errorMessage = message; | ||
| 66 | + } | ||
| 67 | + | ||
| 68 | + /* these classes define how to access the data coming in from the browser */ | ||
| 69 | + | ||
| 70 | + class Coordinates | ||
| 71 | + { | ||
| 72 | + float latitude; | ||
| 73 | + float longitude; | ||
| 74 | + } | ||
| 75 | + | ||
| 76 | + class GeoLocation | ||
| 77 | + { | ||
| 78 | + Coordinates coords; | ||
| 79 | + } | ||
| Back | FazBrowse Home | New Git URL |
0 commit comments