Chumby Widget: PhotoFrame
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!
Comments
Only 1 Photo Displays & How to Crop Differently?
I have this installed on my server, have created the images.xml file using the provided script and have the crossdomain.xml file in the root of my server. When the app runs on my Sony Dash, it mostly displays a blank white screen, but DOES eventually show one and only one of my 13 test photos I uploaded. I have no idea why this would happen, although I did notice that the one photo that displays is under 2MB and all the others are over 2MB. Could this have anything to do with it? Is there a limit built into the swf app?
Also, since this app was built for a Chumby, it doesn’t use the full screen on a Sony Dash. I’m a PHP programmer and can tell where in the .as source code to change the scaling to 800x480, but I’ve never programmed in Flash and don’t even know how to rebuild the code into an SWF. I found FlashDevelop editor for Windows, which has a “build current file” option, but I get an error “This file is not a valid AS2 class or does not include a valid @mtasc build command”. So I installed mtasc, but the make file looks like its for Unix, not windows. It also looks like I’ll need swfmill as well. All to change 1 line of code ;-)
I can probably eventually figure all this out, but was wondering if the original author might want to just release a Sony Dash version of this!?
Size matters!
Just an FYI - size matters. I was using photos from a 10 megapixel camera and the size (either filesize, which was 2-3 MB, or resolution) was too big for the Chumby to process. I reduced the size (to about 30%, which was still about 1100 pixels wide) and now can view them without a problem. In case others are having this issue where everything is set properly but the images don’t load (the screen is blank instead), you need to reduce the size of your photos. Hope that helps some!
Problem with starting lighy?
Hi there,
it seems to me that since updating the firmware to version 1.7 the lighttpd doesn’t start anymore from the USB-stick. When connecting via SSH and trying to start lighttpd manually I get an “file not found” error … (and the file is there, triple-checked it).
Might this be a problem with the new versions of libs that came with firmware version 1.7?
Thanks for advice and help, K.
P.S.: When pointing my browser at the right address I get the same message like hiro: “Loading images.xml” forever …
Building lighty from source
Building lighty from source with the 1.7-toolchain solved my problem, now the widget works again on my chumby!
Who accesses the web server?
Hi! I installed your great widget to view photos on my own web server but I am not successful yet. Chumby displays “Loading https://…../images.xml” forever.
One thing that bothers me is “crossdomain.xml” which makes me wonder if a client in the chumby.com domain, i.e. an external host may try to access my web server. If so, I am out of luck because my web server is behind a firewall that passes only pre-registered clients using packet-filtering.
Is this the case? Sorry, I know nothing about Flash and I may be asking a nonsense question.
Thanks, hiro
Photoframe 2: Changes on Github
Thanks for this great little widget. I’ve fixed a few things in the source and am working on a simple USB image that sets everything up for lighttpd on /mnt/usb.
http://github.com/kstephens/chumby_photoframe/tree/master/photoframe
Changes:
This the first time I’ve worked in ActionScript. I’m assuming that mtasc (v1.13) can only compile AS 2.0. Is this true? I cannot get xml_dom_node.attribute[“random”] working at all; I’m baffled.
I’ll upload a USB tarball image once I have it fully tested.
— Kurt
Update
Thanks for all your comments so far; I’m really glad that my widget is useful to you!
I’ve made a small update that a few of you requested: The file name display bar at the top can now be turned off. Simply type “no” in the text field labeled “Display file names” in the configuration widget.
The update should be available as soon as it has been reviewed by Chumby Industries. More requested changes will follow.
Just a few tips and
Just a few tips and comments 1) Remember to name your log files otherwise lighty won’t start LOL!
2) Tried it using 7MP jpg’s, and the screen was just blank just changing the filenames it tried to display (about 3MB+ for each file). Reduced them to the appropiate pixel size and everything was fine.
3) Would be nice to choose the kind of randomness!
4) Can it play music in the background? Don’t know if the chumby natively supports it or if there has to be some kinda streaming in the flash app
Thank you for the app!
Load In Background & Remove Title Bar
Hey,
1) Would it be possible to have it pre-load files in the background while the previous image is being displayed? That way the next image is usually available immediately.
2) Could an option be added so you can hide the semi-transparent title bar that is displayed over the top of the images?
Helper application
I have created a helper application for this wonderful little widget. It runs under Windows (2000/XP/Vista) what it does is copy your entire photo collection and resize it for optimal loading on the chumby it also generates the images.xml file you can download it through my blog: The Rothman Report. Enjoy