Psychic Origami

Ok so I blogged about a podcatcher/podcast client for the Chumby quite a while ago (August 2008 to be precise). At the time I said I’d tidy things up and release the source code etc. Well that didn’t quite happen, but I figured I might as well release the source code. So seeing as I’ve been using git a lot lately and github is easy to use I thought that’d I’d best just put online what I had.

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.

Here’s a video of my Chumby podcatcher (podcasting client) in action:

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).

I finally had a chance to do some more Actionscript coding for the Chumby again. The last widget I did was the bare minimum to get going and this one is only a little more advanced. In particular it’s a simple analogue clock. All it does is show the current time, nothing more, but it does involve a few more “moving parts” than were involved in the “Hello World” widget from last time.

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.

So now that I’ve got the Chumby it seemed like a good idea to test out creating and uploading my first widget.

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.

So the Chumby finally arrived today. Heather had very kindly and sneakily managed to arrange for it to be sent from the US (seeing as it’s not yet available over here in the UK) for my 30th. I have to say that so far I’m pretty impressed.

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