I’ve been using the wordpress plugin ‘Get the Image‘ by developer Justin Tadlock for a while. ‘Get the image’ does a fantastic job searching through posts looking for images, so you don’t have to add thumbnails manually, but it always bothered me that it downscaled images in the html instead of scaling and cropping them properly. I also use the lovely timThumb script on my blog, to scale, scrop and cache images on the fly, and I wanted to find a way to combine the two scripts into one.
I’m playing with my Delicious Snapcasa code this weekend to see if I can replace Snapcasa with the thumbalizr.com screenshot-service. Snapcasa was great because it gave me plenty of free captures each month, but it has some serious problems capturing some of the sites I throw at it, and was behaving rather randomly, so it has to go.
I’ve looked at several screen shot services, and tested many, and so far it is thumbalizer.com that seem to be the fastest and most stable, and the free version is able to take screenshots of webpages deeper into the site, not just the front page. As far as I can see I can’t find any limit on the api, but the free version does have a watermark on each thumb. I’m too cheap to spring for a paid account, but you do have that option.
Thumbalizr.com provides a .gz with some php for caching the thumbnails their API provides, but I wasn’t able to get it to work last night. Luckily Anton Lindquist has branched the code on GitHub and made some improvements, and after a little headscratching (aka googleing) and some helpful tips from Anton himself, I am now running a version that grabs the images from Thumbalizer and stores them locally on my server, speeding up the pages quite a lot, easing the stress on thumbalizer, and most importantly, preventing already grabbed pages from being queued again and again.
New default queue image
Thumbalizr provides an OK queue-image while their services works on grabbing a screen shot of the page you request but with some help from Anton I’m not using my own custom image, currently a picture of my son holding a fish (just to make him smile :). It’s nice to have a little more control over what is displayed on the page until the image is ready for use, especially when you do like me and fire off a grid of many screen shots on the same page.
I’ve rewritten my original Snapcasa script into a WordPress plugin which I use on several of my blogposts right now. I’ve also made a standalone page for my sons, a start page with kid friendly games and YouTube-videos etc. They can’t read yet, so it’s nice to have an automated start page with pictures.
I promised to update this post with the code I use for working with the Thumbalizr api and caching images locally. As I said I use this caching script instead of the code provided by Thumbalizr. It comes with an example index.php, that I’ve expanded on a little. Right now it looks like this.
Warning: file_get_contents(): php_network_getaddresses: getaddrinfo failed: Name or service not known in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/delicious_screenshots/wp_delicious_sceenshots.php on line 75
Warning: file_get_contents(http://feeds.del.icio.us/v2/json/mskogly/art?Fcount=6): failed to open stream: php_network_getaddresses: getaddrinfo failed: Name or service not known in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/delicious_screenshots/wp_delicious_sceenshots.php on line 75
Warning: Invalid argument supplied for foreach() in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/delicious_screenshots/wp_delicious_sceenshots.php on line 79
If this works there should be about 6 thumbnails on this page, showing links bookmarked using Delicious, and tagged with “art”.
Tonights nerdfest will include trying to use the SnapCasa and del.icio.us to generate a lovely page full of thumbnails, one for each url.
1. My 100 latest bookmarked urls from del.icio.us: http://feeds.delicious.com/v2/rss/mskogly?count=100
2. A SnapCasa login account.
3. A server that supports xslt transformation. (I’m running MAMP on my macbook, and pappmaskin is hosted on One.com)
4. A text editor. I’m using Dreamweaver for this, since it has some pretty good tools for building xslt. (Take a look at the Adobe Livedocs for more info on using it).
I downloaded my first copy of Processing (Processing.org) a few years ago, but I have never gotten past the initial few demos and small tutorials. I’ve been interested in generative computer art for many years, ever since I first saw the work of Marius Watz in the mid nineties and had a stint reading dadaist poetry and cutups, but I’ve never had the time to play with this stuff myself. Or the brains to handle the math, hehe. But then I came across this tutorial in Computer Arts #149 (The June 2008 issue), where there are a few really interesting tutorials, which basically gives you enough info to understand the key consepts that you need to create some very interesting apps, like the one below (slightly modified of course, I added random colors among other things).
(java applets no longer functions in Google Chrome). Nothing you can do about that.)
Oh, and I had quite a hard time finding out how to embed my app in my wordpress blog. I kept getting some heavy errors when I tried to post the html the Processing software generates straight into WordPress, but I eventually got it to work. Since I couldn’t find any tutorials on how to do this, I decided to write my own. So here it is:
How to embed a processing java application in wordpress:
First, you have to turn off the Visual editor for your user, if you don’t, wordpress will 100% garanteed screw up your code. And remember, if you turn the Visual editor back on after finishing editing your post, then DON’T open the post for editing again. When I did this wordpress replaced my embed code for java with a flash embed code!!! Luckily I had saved this article as a Google Docs document, and could simply copypaste it in here again.
(* Update: This might also be related to Adblock plus, but needs to be verified)
Second, paste in this code (just remember to replace the variables with where you’ve put your own .jar file etc. You get all the info you need when you choose File and Export in Processing, and open up the resulting index.html file in an editor of your choice. Note: the applet tag is slightly depricated, so I guess I have to figure out to do this with a “proper” object + embed.
I’ve been thinking alot about making a soundbased installation in Adobe Flash, using sensors and switches, and I’ve gotten around to making a few small eksperiments/prototypes as research, which I’m planning to share on this site later.
But I also found this old experiment I wrote in Flash 5 (!) and wanted to share it. It is a visual sequenzer (*) / sound toy that lets you drag icons onto a “soundstage”, each icon representing a sample. As you press play a line starts moving vertically, and as the line hits one of the icons, the corresponding sound is played. You can also click, drag and hold an icon, and move it on top of the moving line to trigger the sound. There are two types of sounds. The yellow icons trigger different “wet finger on glass” sounds, and the greywhite icons trigger sonar ping sounds.
The code is pretty old, and there are WAY better ways of making something like this with AS3, but still, here is the source code (fla) for it (it also includes the samples, which you are free to use in any way you like).
I still think it is a pretty nice little project, but I am toying with the idea of replacing the click and drag with a webcam mounted in the ceiling, and letting people moving around on the floor trigger the sounds. I have quite a lot to learn before I can make something like that, but I’ll get there!
* Ok, so I guess it is a stretch to call this a sequenzer, but I wanted to create a fun, easy and interesting way to generate a sound collage.
Just to make it easier to reuse and embed Youtube videos on different sites, and because it makes it easier to try out new ideas without adding messy bits to a larger project. Sort of like rapid prototyping/proof of concept before “committing” to a feature and spending alot of time integrating something you might end up throwing out.
//if you want to test with a local file
/* create the processor and import the stylesheet */
$proc = new XsltProcessor();
$xsl = $proc->importStylesheet($xsl);
//$proc->setParameter(null, “titles”, “Titles”);
//not in use, but needed if you want to pass variables into the xslt from php
/* transform and output the xml document */
$newdom = $proc->transformToDoc($inputdom);
Norsk? Du finner en norsk versjon av denne artikkelen på NrkBeta.no
I recently made a Gameinfo service for spiller.no. It pulls in licenced gameinfo from our partner GameXplore though XML, and combines it with a search for related videoes from Youtube before it is presented on the page.
Youtube + Google Api
I made the Youtube part as a standalone page, and I include it with iframe. The reason I used Iframe was to make it easily reusable on other projects where it would fit to do something similar. I can for instance include it in my blog like this:
The page takes any search term as a GET, in this example it simply queries the youtube google api with the title of the game, with a few extra parameters (limit on the number of returned movies + a filter to remove “adult content”). I spent some time to create the XSLT to convert the xml from youtube/google to html, which is basically the same format for many of Googles services. I spent hours trying to find out if someone had created this already, but since I couldn’t find anything I had to create it myself. If you want to learn more about the youtube api I suggest starting at the Youtube Api group on Google Groups.
I have gotten some emails asking for the xslt for the youtube search, so I wanted to share it here:
This is my example output:
And here is the xslt I used to produce the above result:
If you have any questions, feel free to ask in the comments.
Spam? Porn? Nope!
I was of course a little worried about what the youtube search would return, so when testing I went through quite a few games to see if the search returned movies that were unrelated to the gametitle, or contained nudity, but so far it looks really good, the youtube videos are actually the most interesting part of the service, so I’m really happy with it!
Yesterday I also added gametrailers to the mix, check out the gamepage for Assassins Creed for an example (click on the huge image at the top of the page) to make it play. I have bought a lisence for the wonderful Jeroen FLV Media Player which I use to present the gametrailers.
New gametrailers page, based on blip.tv
After that I spent a few minutes to create a new page that lists all the latest gametrailers published through GameXplore. I use the Jeroen Flv Media Player for this page as well. I created this yesterday, so I have to debug it a little bit before we start to promote it, and I also have to consider to increase the video buffer time, it seems like blip.tv har pretty slow servers. Right now there is a five second buffer, which should be more than enough, but even with broadband connection the video stops and buffers every five second. I don’t want people to wait forever for the video to buffer, but it is super irritating when the video stops every 5 seconds to buffer, so I have to decide what to do with it. One (hard) solution could be to download all the .flv to my server and play them from there… I am a big fan of blip.tv, they have the best player around, and their cross posting abilities are great (at least in theory, I still haven’t gotten it to work with this blog or myspace), so I am a little dissapointed to discover that the blip.tv servers (or lines?) are so slow to deliver video. (to Norway at least).
Add the spiller.no Gameinfo search to your browser
Sjekk ut info, screenshots, trailers og anmeldelser på nye og kommende spill:
You can write your own scripts too. Mark Pilgrim’s definitive Greasemonkey guide, diveintogreasemonkey.org will show you how.
My new brilliant idea: I haven’t used Greasemonkey that much yet but for years I’ve wanted a solution to get easy information about the ethical and environmental profile of a firm or product when I’m in a store. Unfortunatly this is not really feasible, but it could be done in the web using Greasemonkey (+ a wiki of conserned citizens, and perhaps import of existing data (?) by XML. And then the option to edit the wiki througt a greasemonkey script.)
I think I will check if there are any only databases with this kind of data, I know there used to be one in Norway. If you have any tips, just write a comment.