js mode flickr example

javascript/examples/Services/Flickr/flickrSearch/flickrSearch.pde

@@ -0,0 +1,140 @@
+/**
+ *  A simple Flickr search.<br />
+ *
+ *  <form>
+ *    <input id="form-input" type="text" value="processing.org" />
+ *    <input id="form-submit" type="submit" value="search" />
+ *  </form>
+ */
+ 
+ HashMap<Integer,FImage> fImages;
+ HashMap<Integer,PImage> images;
+ 
+ PImage selectedImage;
+ 
+ int scrollY=0;
+ int w75;
+ 
+ void setup ()
+ {
+     size( 600, 300 );
+     
+     w75 = width/75;
+     
+     textFont(createFont("Helvetica", 10));
+ }
+ 
+ void draw ()
+ {
+     background( 255 );
+     
+     if ( images != null && images.size() > 0 )
+     {
+         translate(0,scrollY);
+         
+         PImage[] imgs = images.values();
+         for ( int i = 0; i < imgs.length; i++ )
+         {
+             image(imgs[i], int(i%w75)*75, int(i/w75)*75);
+             
+             if ( selectedImage != null && selectedImage == imgs[i] )
+             {
+                 fill(255,50);
+                 noStroke();
+                 rect( int(i%w75)*75, int(i/w75)*75, 75,75 );
+             }
+         }
+     }
+     else
+     {
+         translate( width/2, height/2 );
+         noStroke();
+         for ( float a = 0, r = 0; a < 360; a+=24 )
+         {
+             fill( map( int(a+frameCount)%360, 0, 360, 0, 255 ) );
+             r = radians(a);
+             ellipse( sin(r)*20, cos(r)*20, 5, 5 );
+         }
+     }
+ }
+ 
+ int pressedY; int pScrollY;
+ void mousePressed ()
+ {
+     pressedY = mouseY;
+     pScrollY = scrollY;
+ }
+ 
+ void mouseMoved ()
+ {
+     selectImage();
+ }
+ 
+ void mouseDragged ()
+ {
+     selectImage();
+     
+     if ( images != null && images.size() > 0 )
+     {
+         int newScrollY = pScrollY + (mouseY-pressedY);
+         if ( newScrollY <= 0 && newScrollY > -int(images.size()/w75)*75 + height )
+         {
+             scrollY = newScrollY;
+         }
+     }
+ }
+ 
+ void selectImage ()
+ {
+     int selectX = int(mouseX/75);
+     int selectY = int((mouseY + -scrollY) / 75);
+     int s = selectX + selectY*w75;
+     
+     if ( s >= 0 && s < images.size() )
+     {
+         selectedImage = images.values()[s];
+     }
+ }
+ 
+ void resetFlickrImages ()
+ {
+     if ( images != null )
+         for ( PImage i : images.values() ) i = null;
+     images = null;
+     images = new HashMap<Integer,PImage>();
+     
+     if ( fImages != null )
+         for ( FImage i : fImages.values() ) i = null;
+     fImages = null;
+     fImages = new HashMap<Integer,FImage>();
+     
+     scrollY = 0;
+     selectedFImage = null;
+ }
+ 
+ void newFlickrImage ( FImage fi )
+ {
+     images.put( int(fi.id), loadImage(fi.url_sq) );
+     fImages.put( int(fi.id), fi );
+ }
+ 
+ interface FImage
+ {
+     String id;
+     
+     String owner;
+     String owner_name;
+     String title;
+     
+     String url_sq;
+     String height_sq;
+     String width_sq;
+     
+     String url_t;
+     String height_t;
+     String width_t;
+     
+     String url_s;
+     String height_s;
+     String width_s;
+ }

javascript/examples/Services/Flickr/flickrSearch/flix.js

@@ -0,0 +1,69 @@
+/******************************
+* YOU NEED A FLICKR API KEY !!
+*******************************/
+
+// g't it here:
+var flickrAPIPage = "http://www.flickr.com/services/api/keys/";
+// then paste here:
+var yourFlickrAPIKey = "";
+
+window.onload = function () {
+    if ( !yourFlickrAPIKey.match(/^[0-9a-f]{32}$/) ) {
+        alert("You need a Flickr API key!");
+        return;
+    }
+    tryFindSketch();
+}
+
+var sendImage = null;
+
+function tryFindSketch () {
+    var sketch = Processing.instances[0];
+    if ( sketch == undefined )
+        return setTimeout(tryFindSketch, 200); //retry later
+    
+    // curry sketch into function .. yum.
+    sendImage = (function(){
+        return function ( img ) {
+            sketch.newFlickrImage( img );
+        }
+    })();
+    
+    var input = document.getElementById("form-input");
+    var submit = document.getElementById("form-submit");
+    submit.onclick = function (event) {
+        sketch.resetFlickrImages();
+        searchFlickr(input.value);
+        return false;
+    }
+    submit.onclick();
+}
+
+function searchFlickr ( query ) {
+    // see:
+    // http://www.flickr.com/services/api/flickr.photos.search.html
+    loadUrl( 'http://api.flickr.com/services/rest/?'+
+             'method=flickr.photos.search'+
+             '&api_key=' + yourFlickrAPIKey +
+             '&text=' + encodeURIComponent( query ) +
+             '&format=json'+
+             '&extras=owner_name,url_sq,url_t,url_s,url_o'+
+             '&jsoncallback=handleNewImages'
+    );
+}
+
+function handleNewImages ( response ) {
+    if ( response.stat !== "ok" ) {
+        alert( response.message );
+    } else if ( response.photos && response.photos.photo.length > 0 ) {
+        for ( var i = 0; i < response.photos.photo.length; i++ ) {
+            sendImage( response.photos.photo[i] );
+        }
+    }
+}
+
+function loadUrl ( url ) {
+    var script = document.createElement('script');
+    script.src = url;
+    document.body.appendChild(script);
+}