My first Chumby app

I managed to get my hands on an Insignia Infocast 8 used at a bargain price on eBay. It’s an 8″ touchscreen device that is a clone of the Chumby. They’re designed to be hackable, so you can SSH into it as a feature. The apps are written in Flash, and I managed to get my first one running yesterday. Of course I’m using Linux tools only, but found that Haxe and Geany do a great job. I’ll roll the code and the steps I took into the post after the jump.


import flash.events.TimerEvent;
import flash.utils.Timer;
import flash.text.TextField;
import flash.text.TextFormat;

class SzClock
{

	static var clockTimer:Timer;
	static var timeNumbers:TextField;
	static var timeLetters:TextField;
	static var ts:TextFormat;
	static var ts2:TextFormat;

    static function main() {
        var mc:flash.display.MovieClip = flash.Lib.current;
        mc.graphics.beginFill(0x000000);
        mc.graphics.moveTo(50,50);
        mc.graphics.lineTo(750,50);
        mc.graphics.lineTo(750,550);
        mc.graphics.lineTo(50,550);
        mc.graphics.endFill();

        //Setup text formatting
        ts = new flash.text.TextFormat();
        ts.font = "OldScript";
        ts.size=112;
        ts.color=0xFFFFFF;

        ts2 = new flash.text.TextFormat();
        ts2.font = "OldScript";
        ts2.size=40;
        ts2.color = 0xFFFFFF;

        //Setup font field
        timeNumbers = new TextField();
        timeNumbers.embedFonts = true;

        timeLetters = new TextField();
        timeLetters.embedFonts = true;

        var curDate:Date = Date.now();
		timeNumbers.text = DateTools.format(curDate,"%I:%M:%S");
		timeLetters.text = DateTools.format(curDate,"%p");

        //Push formatting in this text field
        timeNumbers.setTextFormat(ts);
        timeLetters.setTextFormat(ts2);

		//Setup size and location based on redered text
		timeNumbers.width = 440;
		timeNumbers.height = timeNumbers.textHeight;
        timeNumbers.x = 140;
        timeNumbers.y = 220;

        timeLetters.width = 200;
        timeLetters.height = 300;
        timeLetters.x = 580;
        timeLetters.y = 288;

        flash.Lib.current.addChild(timeNumbers);
        flash.Lib.current.addChild(timeLetters);

        //start timer
        clockTimer = new Timer(1000);
        clockTimer.addEventListener(TimerEvent.TIMER, updateTime);
        clockTimer.start();
    }

    static function updateTime(evt:TimerEvent){

		var curDate:Date = Date.now();
		timeNumbers.text = DateTools.format(curDate,"%I:%M:%S");
		timeLetters.text = DateTools.format(curDate,"%p");
		timeNumbers.setTextFormat(ts);
		timeLetters.setTextFormat(ts2);

	}
}

The action script 3 code is pretty simple. It fills the screen with red, draws a box in black, and displays the time in white. There is a timer event every 100 ms that updates the display from system time. In order to show text you need to embed a font. I did this using swfmill (in the Ubuntu repositories). Just create an xml file called ‘resource.xml’ that points to the TTF font you want to embed:

<?xml version="1.0" encoding="iso-8859-1" ?>
<movie version="9">
    <background color="#000000"/>
    <frame>
    <library>
        <font name="OldScript" import="/usr/share/fonts/truetype/mike/Old Script.ttf" />
    </library>
    </frame>
</movie>

Then run swfmill to package it:

swfmill simple resource.xml resource.swf

That resource file must be included in the compiler commands you pass to Haxe. Here’s the ‘compile.hxml’ file that I used for this:

-swf9 /var/www/chumby/SzClock.swf
-main SzClock
-swf-header 800:600:30:FF0000
-swf-lib resource.swf

I changed the comile commands in Geany (click down arrow next to cinder block icon and select ‘Set Includes and Arguments’) to ‘haxe compile.hxml’. Hit compile and can load the resulting .swf in a browser to see how it runs. I already have Apache installed so if you leave the .swf file in the /var/www folder you can SSH into the Chumby and tell it to load the app directly from your server.

essential