So, you got your first Chumby and have browsed through the 1500 open source widgets, and now you’re ready to contribute to the open source community by writing your own widget. There’s lots of resources out there, so we’ll just cover the basics here.

Here’s what you need:

• A Chumby
• Adobe Flash or other developing environment for creating SWF files
• An account at Chumby.com

Open up Flash. Set your size to 320 x 240 and frame rate to 12 frames per second. In Publish Settings, set the Player to Flash Player 8 and the Script to ActionScript 2.0. Chumby allows widget up to 100kb in size, which is plenty of room for code, but can get tight when working with audio and video.

For this tutorial, we’ll make an analog clock. But there are hundreds of clocks already! Yes there are, but I like to have every other widget be a clock, and I’ve only found about a dozen clocks that I really like. That is one of its primary functions, after all.

First of all, set up your assets. You’ll need three clock hands, positioned in the center of the stage, with the registration point properly set. Name them hourHand_mc, minuteHand_mc, and secondhand_mc.

OK, now the code:

onEnterFrame = function() {
	dt = new Date();
	//set hour hand
	hrs = dt.getHours()+dt.getMinutes()/60+dt.getSeconds()/3600;
	angle = hrs*30;
	if (angle!=hourHand_mc._rotation) {
		hourHand _mc._rotation = angle;
	}
	//set minute hand
	mns = dt.getMinutes()+dt.getSeconds()/60;
	angle = mns*6;
	if (angle!=minuteHand_mc._rotation) {
		minuteHand _mc._rotation = angle;
	}
	//set second hand
	scs = dt.getSeconds();
	angle = scs*6;
	if (angle!=secondHand_mc._rotation) {
		secondHand _mc._rotation = angle;
	}
}

Let’s break it down. On each frame we create a new date object. Then we get the hours of the date object. We also add in the minutes and seconds because we want the hour hand to move a tiny bit every second, not just once an hour. Next we convert the hours into degrees by multiplying by 30. (360 degrees per 12 hours makes 30 degrees per hour). Next we check if the hour hand needs to be changed. It should only be changed once every 12 frames, not every frame. Using this if statement prevents unnecessary redrawing of the screen, which can save processing time and make a widget run more smoothly. Though, you’ll probably not notice any difference in this simple example.

The minute hand and second hand go through the same process.

OK, save it, publish it, and upload it to Chumby.com, but don’t make it public yet. Add it to a channel on your chumby and try it out. You’ll undoubtedly find lots of things to tweak with your clock. Did you even give your clock a face? Maybe it needs a tick sound, or a gong on every hour. Maybe you don’t want a typical analog clock. Changing the code for a digital clock should be pretty easy.

This is a simple example, but it should get you on your way. In my next post, I’ll write about creating a configuration file, and playing with the accelerometer. (unless I forget or change my mind). Until then, make a cool clock.

This entry was posted by Kris on Monday, February 1st, 2010 at 9:19 am and is filed under Code Logic, Zoom Creates News. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Tags: AS3, Chumby, Flash, tutorial, widget