Music, Free Software & Bad Jokes

I’ve created my first Chumby Widget, a photo viewer for pictures hosted on your web server. They can be located either in a directory on a public server or a private one inside your personal network, so you can use the widget to display private images without having to publish them or upload them to a third-party image hosting service. With a little more effort, it is also possible to store the images on a USB drive plugged into your Chumby - go here first if that’s what you prefer.

Otherwise, here’s how to set it up:

1) On your web server, create a directory and place your images (jpg or png) inside. If they are larger than 320x240, the widget will scale them down automatically, but you might want to consider scaling them down manually to save space and network traffic.

2) Create a file called “images.xml” inside that directory, containing a list of the images in the following fashion:

  <images>
    <image filename="image1.jpg" />
    <image filename="image2.jpg" />
    <image filename="image3.jpg" />
  </images>

If you only have images in JPEG format, running this simple shell script inside the directory will create the XML file for you:

  #!/bin/sh
  echo "<images>" > images.xml
  for files in *.jpg
  do
    echo "  <image filename=\"$files\" />" >> images.xml
  done
  echo "</images>" >> images.xml

3) Place a file called “crossdomain.xml” inside the root of your web server with the following content:

  <?xml version="1.0"?>
  <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
  <cross-domain-policy>
     <allow-access-from domain="*.chumby.com" />
  </cross-domain-policy>

This will allow the flash code of the widget to access data on your web server (more information on this can be found here). Apparently, this is also required on a local server.

4) Install the widget as usual via the Chumby Network.

5) Use the configuration widget to set the delay (i.e. the duration in milliseconds you want each image to stay on screen) and the URL to the directory you created in step one, without the trailing slash (for example, “http://www.example.com/chumby/images”). If you don’t want to have the current file name displayed, simply type “no” into the third text field.

6) If you like, you can download the source code here; the script and example crossdomain.xml mentioned above are included as well; the license is GPL (version 2 or later).

Troubleshooting:
If PhotoFrame doesn’t display any images, point a web browser to one of them; if you get an error, check the URL and the files’ permission settings. If it’s being displayed correctly, check your images.xml for syntax and make sure that the crossdomain.xml is valid and sitting at the root directory of your web server.

For testing, you can point the widget to the following URL:
“http://www.discarded-ideas.org/files/photoframe-test”

Enjoy!