First you’ll want Python on the Chumby. At the time the latest version already compiled for the Chumby is Python 2.6, so it’s pretty up-to-date.

Once you’ve got Python installed and on a USB stick you’ll also want to download PySerial – I picked the latest version PySerial-2.5-rc2.

With PySerial expanded and on the USB stick (alongside Python) you’ll want to put the USB stick in the Chumby and connect to it via SSH.

Change to the directory for the USB stick (e.g. cd /mnt/usb).

You should see (at least) two directories, one for Python and one for PySerial:

chumby:/mnt/usb-EC5C-3D0A# ls -l
drwxr-xr-x    6 root     root         4096 Jun 26 21:15 pyserial-2.5-rc2
drwxrwxrwx    4 root     root         4096 Jan 10 13:51 python2.6-chumby

You’re first instinct may be to try and install PySerial via the usual call to python setup.py install. However this appears not to work.

All is not lost though – just manually copy the relevant directory (serial) from PySerial to the python site-packages directory, e.g.:

cp -r pyserial-2.5-rc2/serial python2.6-chumby/lib/python2.6/site-packages/

Know to check that’s worked open a python prompt and try to import the serial library:

chumby:/mnt/usb-EC5C-3D0A# python2.6-chumby/bin/python
Python 2.6.2 (r262:71600, May 23 2009, 22:28:43)
[GCC 4.3.2] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> import serial
>>>

If you don’t see any errors (as above) then everything has installed ok.

Next step is to try out connecting an Arduino.

So first off you’ll want to ensure the Arduino has a program that can read from the serial port – to show that everything is working ok. In my case I picked my Morse Code program. This will read bytes from the serial port and toggle the built-in LED (on pin 13), so it’s handy for verifying the serial port is working.

So now you have a program loaded on the Arduino, connect it to the Chumby. The Arduino should get enough power from the Chumby to start up ok.

You need to work out which serial port the Arduino is using on the Chumby. List the tty’s in /dev and pick the most likely looking one (should have USB in it’s name):

chumby:/mnt/usb-EC5C-3D0A# ls /dev/tty*
/dev/tty      /dev/ttyS00   /dev/ttyS02   /dev/ttyS1    /dev/ttyS3
/dev/ttyS0    /dev/ttyS01   /dev/ttyS03   /dev/ttyS2    /dev/ttyUSB0

On my Chumby the serial port was /dev/ttyUSB0.

Now open up a python prompt again and try talking to the Arduino. You’ll need to configure the baud-rate of the serial port to match the program on the Chumby. In my case this was 9600.

chumby:/mnt/usb-EC5C-3D0A# python2.6-chumby/bin/python
Python 2.6.2 (r262:71600, May 23 2009, 22:28:43)
[GCC 4.3.2] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> import serial
>>> ser = serial.Serial('/dev/ttyUSB0', 9600, timeout=1)
>>> ser.write('sos')
3

If you are using the same morse code program you should see the LED blink out ‘DOT-DOT-DOT DASH-DASH-DASH DOT-DOT-DOT’ – confirming that the serial port works.

This is really quite handy, as the Chumby is a small low-power Linux server. Coupled with Python this means it’s really easy to get any Arduino based project online, without needing a “normal” computer constantly running. Not quite as self-contained as using an Ethernet Shield, but the Chumby is fairly small, so it and an Arduino will easily sit on a window ledge (for example).

So you can now find the hybrid Python, Javascript and Flash Chumby postcast client I dubbed chumbycast, on github. I’m providing the code just for the curious – I’ve had at least one request for it, but I’m not really going to detail too much of how it works. Though some of this is outlined in the original post where I mentioned the project.

I am tempted to revive this project a bit, but probably by trying a different approach. I mostly gave up on this as I was creating a UI on the Chumby in Flash and my Flash skills aren’t exactly great, plus I was trying to use mtasc which hampered things further. Which is not to belittle mtasc – it’s just with limited time and no previous Flash experience I wasn’t exactly helping myself by not using some nice friendly Flash IDE.

I’ve since realised that if I ditched the Flash UI I could probably get quite a bit done. The Python httpserver side of things was pretty easy. So if I focussed on that I would then have a few of ways of providing a UI by hijacking existing functionality on the Chumby.

• The Chumby runs a httpserver on port 8080 when an ipod is plugged in, which the UI uses to access playlists etc. I could mimic this approach and effectively make the podcast client look like an iPod as far as the Chumby’s UI was concerned. By plugging in a USB stick loaded up with the podcast client everything would behave the same as if you had plugged in an iPod.
• It’s possible to create playlist files and edit the “My Streams” section programmatically. Each podcast subscribed to would create a matching pls or m3u file and be added to the “My Streams” section.
• Create a javascript/web UI for controlling the playback and subscriptions to podcasts and other podcast management tasks (like removing old files, manually downloading older episodes etc) from another computer. Possibly adding bonjour/zero-conf support so the Chumby can be browsed to easily

I would need to see whether those first two could be made to work for my purpose, but it would make sense to just use the existing UI on the Chumby – rather than creating a new one. The existing chumbycast code already provides a javascript/web UI for controlling the playback on the Chumby. This was originally done so I could remote control the chumby, but also so that I could easily create and debug an API for the Flash UI to use.

The other major missing feature is allowing the podcasts to be paused part way through. The current client does not support this, as the audio files are streamed and not downloaded. So that would be the first change to make. Now that I’ve dug out the code maybe I’ll be inspired to play around some more. I’ve also been listening to a lot more podcasts (thanks to Huffduffer) so it might happen yet.

And a couple of photos:

Just finished getting a UI working on the Chumby. Last week I had the basic http server running in the Chumby and I could browse to it from my laptop and control it that way. Today I managed to get a simple flash widget written that interacts with that server, so a laptop isn’t needed.

The http server is written in Python (see here for info on running Python on the chumby). It has the job of downloading the feeds and interacting with the audio server on the chumby (called btplay). It’s all pretty standard, except that the version of Python I was using didn’t have BaseHTTPServer. This meant I had to roll my own (thankfully pretty easy) using the SocketServer module.

The UI is written in flash (using swfmill and MTASC) and talks to the server to find out about available episodes and to stop/start the audio.

Once I’ve used it for a bit and made sure it’s ready for use I’ll release it and the code behind it. Hopefully other people will find it useful. I know for me this has been one feature that I wish the Chumby already supported. That’s the great thing about the Chumby though – if you want a feature bad enough you can just get in there and write it yourself!

I should also be talking about this app at the next £5app (which should be late September).

So to start off with here’s the scaled down scan I used for the clock face and hands:

I cut out the face and hands and put them into separate files (see .tar.gz below) for using in the Actionscript. All images were 24bit PNGs with variable alpha transparency, so that the edges look nice and smooth on the Chumby screen (which is relatively low resolution).

The Actionscript (ChumbyClock.as) is very simple and looks like this:

class ChumbyClock extends MovieClip {
	var hourHand:MovieClip;
	var minHand:MovieClip;
	var secHand:MovieClip;

	function onLoad() {
		this.hourHand = loadHand('hour_hand');
		this.minHand  = loadHand('minute_hand');
		this.secHand  = loadHand('second_hand');
	}

	function loadHand(hand_id:String) {
		var clip = this.createEmptyMovieClip("clip", this.getNextHighestDepth());
		clip._x = 160;
		clip._y = 120;

		// load image an shift it to be in 12 o'clock position
		// with 0,0 as middle of bottom of image
		var hand = clip.attachMovie(hand_id, 'hand', clip.getNextHighestDepth());
		hand._x = -hand._width/2;
		hand._y = -hand._height + (hand._width/2);
		return clip;
	}

	function toDegrees(val:Number, range:Number) {
		return (360*(val % range))/range;
	}

	function onEnterFrame() {
		var now:Date = new Date();

		var sec:Number = now.getSeconds();
		secHand._rotation = toDegrees(sec, 60);

		var min:Number = now.getMinutes();
		minHand._rotation = toDegrees(min, 60);

		// let hour hand move a little bit with min hand
		var hourWithMin:Number = now.getHours() + min/60.0;
		hourHand._rotation = toDegrees(hourWithMin, 12);
	}

}

All this does is create three movies which contain the hand images, placed so they are in the 12 O’Clock position. At each timestep (onEnterFrame) the current time is queried and the hand rotations are updated. The second and minute hands are just rotated in proportion with the relevant values. The hour hand is also slightly rotated with the current minute. As we get nearer the end of the hour, the hour hand moves nearer to the next hour. Much as you’d expected for a real clock. That’s it. I did play around with having smoother animation for the hands, but it looked a bit eery.

To tie the Actionscript and images together there is an xml file (app.xml) used by swfmill:

<?xml version="1.0" encoding="utf-8" ?>
<movie width="320" height="240" framerate="12">
  <background color="#ffffff"/>
  <clip import="build/classes.swf" />

  <frame>
    <library>
      <clip id="face"        import="images/hand_drawn/face.png" />
      <clip id="hour_hand"   import="images/hand_drawn/hour_hand.png"  />
      <clip id="minute_hand" import="images/hand_drawn/minute_hand.png"/>
      <clip id="second_hand" import="images/hand_drawn/second_hand.png"/>
      <clip id="app" class="ChumbyClock" />
    </library>

    <place id="face" name="clockFace" depth="0" />
    <place id="app" name="myApp" depth="1" />
  </frame>
</movie>

This will allow us to embed the PNGs in the generated SWF file and reference them from the Actionscript. In addition the clock face image is placed statically behind the main movie of the hands.

These files are then run through a build script to generate the SWF:

~/bin/mtasc-1.12-osx/mtasc -swf build/classes.swf -header 320:240:12 ChumbyClock.as
~/bin/swfmill-0.2.12-macosx/swfmill simple app.xml chumbyclock.swf

Here’s the generated SWF:

To test this on the Chumby I put the SWF on a memory stick along with this debugchumby script:

#!/bin/sh
chumbyflashplayer.x -i /mnt/usb/chumbyclock.swf

Then when the Chumby is rebooted with the memory stick in the clock displays and all is good.

So there you go that’s a simple clock widget for the Chumby – using open source tools.

Download Widget Source Code and Images.

This is my first foray into flash development, so for the moment I’m just cribbing from other sources. I’m hoping that as Actionscript is a cousin of Javascript it won’t be too tricky to pick up. Though of course much of the learning will be related to the various APIs.

To get started I ran over to Open Source Flash and read the article on setting up a flash project without using the Flash IDE (seeing as I don’t want to buy Flash – for now at least). I then followed through from there to the MTASC site and looked at the example tutorial and realised that may be all I needed to get a simple “Hello World” widget working.

So here’s the Actionscript I used (saved in Tuto.as):

class Tuto {

    static var app : Tuto;

    function Tuto() {
        _root.createTextField("tf",0,0,0,320,240);
        // write some text into it
        _root.tf.text = "Hello\nChumby!";

        // make the text appear bigger on the screen
        var format = new TextFormat();
        format.size = 64;
        _root.tf.setTextFormat(format);
    }

    // entry point
    static function main(mc) {
        app = new Tuto();
    }
}

Which is based on the code in the MTASC tutorial.

Then with MTASC downloaded and installed in ~/bin/mtasc-1.12-osx/ on my Powerbook, I compiled the code using:

~/bin/mtasc-1.12-osx/mtasc -swf tuto.swf -main -header 320:240:12 Tuto.as

Which creates the SWF file tuto.swf.

Note the -header 320:240:12 option. This is to set the size (320×240) and framerate (12fps) of the resulting SWF. These are the settings as required for the Chumby.

With that done I then tried out tuto.swf in my web-browser to make sure it worked. Next I uploaded the widget via chumby.com (which meant I had to create an 80×60 pixel icon too). I made sure that the widget was set to private when uploading (seeing as only I wanted to see the widget) and then added it to my “development” channel.

Then I selected the “development” channel on my chumby to see the results:

I did run into a little trouble getting the widget to refresh after uploading. It seemed to work sometimes, but in the end I started sshd on the chumby so I could stop and start the control panel (after connecting via ssh):

chumby:~# stop_control_panel
chumby:~# start_control_panel

Which seemed to solve the trick. I’ll have to investigate other means of deploying to the chumby when I’m properly developing, but overall it wasn’t too much effort going via the chumby site.

It’s got that geek gadget factor working for it very well. Lots of options to configure, but at the same time it’s pretty easy to use. Lots more exploring to do, but even just the fact that it’ll play Radio Paradise out of the box is enough for me…

See more chumby photos