We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpIntegration › getting image from Flickr to display in Processing
Pages: 1 2 
getting image from Flickr to display in Processing (Read 7324 times)
getting image from Flickr to display in Processing
Sep 3rd, 2006, 2:48am
 
Hi,

I would like to get images from Flickr
(based on one or more tags, like "red", "woman", "face")
and display the images in Processing.

I have looked at the "switchboard" library,
but there doesn't seem to be real Flickr support,
and the few things I found by googling around
seemed remarkably complex, ... presumably to parse
the responses received from Flickr.com

Can anyone point me to a working example in Processing
to get and display a bunch of images from Flickr?

-- djones

http://www.ece.mcmaster.ca/~djones/processing
Re: getting image from Flickr to display in Proces
Reply #1 - Sep 3rd, 2006, 11:52pm
 
I'm looking into getting real Flickr support for Processing. In the mean time, check out http://www.tom-carden.co.uk/p5/flickr_rainbow_links_fixed/applet/index.html

There's a Java wrapper for the Flickr API, but it seems to be broken. (If anyone knows how to use the Flickrj Flickr API, please tell.)
Re: getting image from Flickr to display in Proces
Reply #2 - Sep 5th, 2006, 7:09am
 
I get the impression that Flickrj may be dead Sad.
The last updates on the Flickj web page were over a year ago,
and that was for version 1.0a9, ... and it was still "alpha".
http://sourceforge.net/projects/flickrj/

The Flickr API page ( http://www.flickr.com/services/api/ )
seems to indicate a potentially easy interface using HTTP GET/POST
using a request format they call "REST" (http://www.flickr.com/services/api/request.rest.html).

It would still require pulling apart the XML response it sends back, but that might be manageable after inspecting a few typical responses.

The "method" that I would be interested in using to download images would be "flickr.photos.search" (http://www.flickr.com/services/api/flickr.photos.search.html).

Has anyone used this to download images into a Processing applet?
Any tips or examples would be appreciated.

-- djones
Re: getting image from Flickr to display in Proces
Reply #3 - Dec 16th, 2007, 11:32pm
 
Hey,

I'd love to do some work pulling pictures from Flickr, but I'm not sure where to start. Has anyone got anywhere with this lately?
Re: getting image from Flickr to display in Proces
Reply #4 - Dec 18th, 2007, 3:14am
 
Well... I do a ton of stuff with pulling from the Flickr API every day. Is there anything specific you would like to know?

I do have my own library for handling the Flickr API but it's nowhere near ready for a release.

Pulling an image is pretty straightforward. First you need to get a list of images from photos.search method. Then when you obtain information about images, I have this method that you can use that might help you out:

Code:

static final String FLICKRurlPrefix = "http://farm";
static final String FLICKRurlSuffix = ".static.flickr.com/";
static final String backslash = "/";
static final String underscore = "_";
static final String FLICKRimageFormat = ".jpg";

final static String getFlickrImageURL(String farmID, String serverID, String id, String secret, char format){
//flickr url format
// http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}.jpg

StringBuffer url = new StringBuffer();

url.append(FLICKRurlPrefix);
url.append(farmID);
url.append(FLICKRurlSuffix);
url.append(serverID);
url.append(backslash);
url.append(id);
url.append(underscore);
url.append(secret);
url.append(underscore);
url.append(format);
url.append(FLICKRimageFormat);

return url.toString();
}


That gives you the direct URL to any flickr image you want so you can retrieve it via loadImage().


Here's an excerpt from my FlickrPhoto object constructor

Code:

public FlickrPhoto(XMLElement photo){
try{
this.id = photo.getAttribute("id");
this.owner = photo.getAttribute("owner");
this.secret = photo.getAttribute("secret");
this.server = photo.getAttribute("server");
this.farm = photo.getAttribute("farm");
this.title = photo.getAttribute("title");
if(photo.hasAttribute("tags"))
this.tags = PApplet.split( photo.getAttribute("tags"), " " );
if(photo.hasAttribute("datetaken")){
this.dateTaken = photo.getAttribute("datetaken");
}

this.imageURL = FlickrAccess.getFlickrImageURL( farm, server, id, secret, 'm');
load();

// NetQueue.executeLoad(NetMethod.call(this,"mLoadImage"));
}
catch(Exception e){
PApplet.println(e);
noError = false;
}
}



Basically you pass it the xml leaf for the photo, and it converts it into a PImage you can then play with.



Then you can wrap the whole thing up in its own thread for smooth loading.
Re: getting image from Flickr to display in Proces
Reply #5 - Dec 19th, 2007, 1:18am
 
as stated earlier flickr pics are simply URLs,
If you know these, its simpler...


Quote:


/*
*  flickr grid
*
*   Anthony Starks (ajstarks@gmail.com)
*/
String produce[] = {
 "http://farm1.static.flickr.com/188/483711793_98433708a6_m.jpg",
 "http://farm1.static.flickr.com/207/483712735_d1e1b39577_m.jpg",
 "http://farm1.static.flickr.com/192/483681348_3cb61c4fba_m.jpg",
 "http://farm1.static.flickr.com/217/483672774_906ca96d69_m.jpg",
 "http://farm1.static.flickr.com/205/483702685_387ad1adee_m.jpg",
 "http://farm1.static.flickr.com/185/483669600_7582612e5a_m.jpg",
 "http://farm1.static.flickr.com/173/483699589_a69e64c625_m.jpg",
 "http://farm1.static.flickr.com/193/483675096_9cdf5d62a3_m.jpg",
 "http://farm1.static.flickr.com/202/485941307_0d177ae493_m.jpg",
 "http://farm1.static.flickr.com/230/485948065_dd55b022b4_m.jpg",
 "http://farm1.static.flickr.com/211/485949883_23c495eab2_m.jpg",
 "http://farm1.static.flickr.com/175/483676186_65cbcd47b2_m.jpg"
};


PImage[]  im;
PFont f1;
int gridX, gridY, rowWidth, colHeight, npics, margin, ncol, pw, ph;



void setup() {
 size(1000,1000);
 smooth();
 //f1=loadFont("Copperplate-Light-48.vlw");
 //textAlign(CENTER);
 //textFont(f1);
 npics = loadPicURLs(produce);
 pw = im[0].width;
 ph = im[0].height;
 ncol = 4;
 margin = 10;
 rowWidth = (pw * ncol) + (ncol * margin);
 colHeight = (npics / ncol) * ph;
 gridX = (width - rowWidth) /2;
 gridY = 10; // (height - colHeight) / 2;
 //println(pw + " " +  ph + " " + ncol+ " " + margin + " " + rowWidth + " " + gridX + " " + gridY);
 frameRate(0);

 //noLoop();

}

void draw() {
 background(0);
 picgrid(gridX, gridY, npics, ncol, margin, pw, ph);
 
}

int loadPicURLs(String[] s) {
 int n = s.length;
 im = new PImage[n];
 for (int i = 0; i < n; i++)
   im[i] = loadImage(s[i]);

 return n;
}

void picgrid(int n, int col, int margin, int iw, int ih) {
 picgrid(0, 0, n, col, margin, iw, ih);
}

void picgrid(int x, int y, int n, int col, int margin, int iw, int ih) {
 int xp, yp, p;
 xp = x + margin;
 yp = y + margin;
 for (int i = 0; i < n; i++) {
   if (i % col == 0 && i > 0) {
     yp += (ih + margin);
     xp = x + margin;
   }
   p = int(random(n));
   image(im[p], xp, yp);
   xp += (iw + margin);
 }

}


Re: getting image from Flickr to display in Proces
Reply #6 - Dec 19th, 2007, 9:30pm
 
Isn't it not much easier to use the flickrj API (http://flickrj.sourceforge.net/), which wraps all the REST stuff in an easy to use JAVA. I've used it in the last weeks to experiments with contacts data and it was much easier as the stuff I done two years ago as I parse the whole xml myself.
Re: getting image from Flickr to display in Proces
Reply #7 - Dec 21st, 2007, 12:17am
 
Possibly easier yes but learning how to do it on our own stems from partly ignorance for other libraries, and a stubborn refusal to use other people's code.

Sadly!
Re: getting image from Flickr to display in Proces
Reply #8 - Jan 8th, 2008, 10:07am
 
Hey,

I have successfully done this before using the p5 core code and code from here:
http://wiki.netbeans.info/wiki/view/NBDemoFlickr

Specifically the Flicker.java class
You need a Flickr API Key, and the code reads the XML returned from a search query.

I adapted the class to return an Image instead of an Icon, and also inserted a page offset variable into the search query.
In the end it looked like this:

Quote:


public PImage randomImage() {
 String pageOffset = String.valueOf((int)root.random(1.0F, 100F));
 java.awt.Image random = Flickr.getInstance().search("words to search for", pageOffset);
 if(random != null){
   PImage randomP = root.loadImageSync(random);
   return randomP;
 } else {
   return null;
 }
}

Re: getting image from Flickr to display in Proces
Reply #9 - Jan 24th, 2008, 1:58am
 
I did it in Processing by HTTP call and parsing of XML return string. Have a look at

http://www.bryanchung.net/index.php/?p=189

and related posts.

Bryan
Re: getting image from Flickr to display in Proces
Reply #10 - Feb 13th, 2008, 9:51am
 
Bryan, thanks! You can't get any simpler than that. Very helpful.
Re: getting image from Flickr to display in Proces
Reply #11 - Feb 19th, 2008, 8:10pm
 
very slow in loading the pictures...how to solve this problem? Is it by multithread?
Re: getting image from Flickr to display in Proces
Reply #12 - Apr 9th, 2008, 4:40pm
 
eskimoblood wrote on Dec 19th, 2007, 9:30pm:
Isn't it not much easier to use the flickrj API (http://flickrj.sourceforge.net/), which wraps all the REST stuff in an easy to use JAVA. I've used it in the last weeks to experiments with contacts data and it was much easier as the stuff I done two years ago as I parse the whole xml myself.


eskimoblood,
I tried to use it in order to get contacts data too... but still doesn't work !
could you help me I guess it is an auth problem...
Re: getting image from Flickr to display in Proces
Reply #13 - Apr 9th, 2008, 10:10pm
 
If you use it from processing IDE it doesn't shows you that you have to catch some exceptions that Flickr class throws:

Code:


import java.io.IOException;
import processing.core.*;
import org.xml.sax.SAXException;
import com.aetrion.flickr.*;
import com.aetrion.flickr.contacts.*;
import com.aetrion.flickr.people.*;
import com.aetrion.flickr.FlickrException;


String apiKey = "yourKey";
Flickr f;
ContactsInterface c;
PeopleInterface p;

void setup() {
size(500, 500);
f= new Flickr(apiKey);
c=f.getContactsInterface();
p=f.getPeopleInterface();
User u;
try {
u = p.findByUsername("eskimoblood");
Collection co= c.getPublicList(u.getId());
Iterator it=co.iterator();
while(it.hasNext()){
Contact contact=(Contact) it.next();
println(contact.getUsername());
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SAXException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (FlickrException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}

Within eclipse its much easier, cause it have auto suggest to solve your problems, so that a dummy like me can handle that stuff.
Re: getting image from Flickr to display in Proces
Reply #14 - Nov 11th, 2008, 3:25pm
 
Hi eskimoblood-
Thanks for posting this code...very useful.  Unfortunately, I am getting an error:

com.aetrion.flickr.FlickrException: 96: Invalid signature

I have tried a bunch of different code snippets (including those of Daniel Shiffman (http://www.shiffman.net/teaching/a2z/mining/), made sure my flickr apikey is correct etc and am still getting this error.  Any thoughts or suggestions would be fantastic.
Thanks!
-Halsey
Pages: 1 2