Life and software

I’ve been on a javascript kick lately and started doing some projects, some for google gadgets, but all for fun. The basic requirement for the projects are for them to be done entirely in client side javascript (no server side code). This is nice b/c anyone can do a view source and figure out what is going on, which is great for learning. Upon this end I decided to start playing with javascript’s ability to do image processing, and while I found a bunch of projects (a combination of client side and server side) nothing seem to fit my needs.

Then I came across this post and the flickr services and their json feeds. And I forgot about image manipulation. Basically you can get any of the flickr feeds in a callback json format.

<script>
    function jsonFlickrFeed(o){
        // do somethign with the feed
    }
</script>
<script
  src="http://api.flickr.com/services/feeds/photos_public.gne?tags=&tagmode=any&lamp;ang=en-us&format=json">
</script>

Whith that little bit of code you can have a flickr feed loaded into your web page when the page loads.

Once you got the json feed you can select the image size you want (by default the feed comes with _m):

<script>
    image.src = feed.items[i].media.m.replace(/_m/, '_o');
</script>

where:

• _s small square 75×75
• _t thumbnail, 100 on longest side
• _m small, 240 on longest side
• [none] medium, 500 on longest side
• _b large, 1024 on longest side (only exists for very large original images that were resized during upload)
• _o original image, either a jpg, gif or png, depending on source format

see Flickr hack: All Sizes for all pics for more details

See it in action with a little game also available for igoogle

Next I got more creative and used a little ajax. Here I had to cheat and put a php proxy on my site to get away with XSS.

<script>
    function loadMoreImages(url, tags) {
        try {
            var req = new XMLHttpRequest();
            req.open(
                "GET",
                "/gadgets/proxy.php?url=" + encodeURIComponent(url),
                true);
            req.onreadystatechange = function() {
                if (req.readyState == 4 /*complete*/) {
                    eval('(' + req.responseText + ')');
                }
            };
            req.send(/*no params*/null);
        } catch (error) {
        }
    }

  loadMoreImages('http://api.flickr.com/services/feeds/photos_public.gne?tags=' +
                            tags + '&tagmode=all&lang=en-us&format=json');

</script>

And by calling loadMore images with different tags I can get as many images on the fly, even with user input. Currently I get the images from the url parameters tagName.

Once I have as many images as I want I can do some fancy stuff…

See Flickr Rain also available for igoogle

Then I got silly and nostalgic, and decided to build a game out of it. A few event handlers later I got this monstrosity

The web is filled with wonderful things, specially now that massive data feeds are being opened up for us to play with. I can’t wait to see other json feed implementations out there. I hope ebay opens up their APIs for something like this soon.