In my last post, we quickly went over Writing your first Chumby widget. This time, we’ll expand on that by adding a configuration widget.

A configuration widget is another Flash file that sets up parameters for your Chumby widget, so those settings are available when the widget loads into your Chumby. For example, perhapse you have an analog clock widget. You could create a configuration widget that allows someone to choose a color for the face of the clock, or whether or not to display the second hand. The user could choose a color and save their preferences in the Chumby database. Then, when their Chumby loads your clock widget, it would look for and download any settings for that widget.

Here’s what we’ll need:

• Flash or another IDE for building SWFs
• widget parameters example from wiki.chumby.com

The widget parameters example is not only a good example of how to get and set parameters, it also includes some actionscript classes that simplify the whole process. Thanks, Chumby.com!

OK, lets get started. First, we’ll need to build the UI. Widgets that run on a Chumby must be built with Flash 8 or earlier. But the configuration widget runs on the web at Chumby.com, so it can be any version of Flash and can even be coded with AS3. The classes we’re importing are coded with AS2, so we’ll use AS2 too. So lets start a new Flash file and set the width and height to 320×240.

Now, add some UI components. Add a text field, name it input1, and set it to Input Text (rather than dynamic or static). Also, create a movie clip for a checkbox, using two frames – one unchecked and one checked. Stop it on the first frame. And finally, create a submit button. You can also use the components from the components library, but I like to make my own UI elements.

It would be a good idea to allow the user to pick a color from a grid of swatches, or to create a color by blending red, green, and blue using slider controls, but that’s beyond the scope of this article. To keep things moving along, we’re assuming that the user types into the text box a valid hexadecimal color.

Now let’s get into the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

import com.chumby.WidgetParams;
import com.chumby.util.Delegate;
 
//input1 is a textfield
//input2 is a movieclip with 2 frames: off and on
input2.gotoAndStop(1);	//stop on the first frame (off)
input2.checked = "0";	//set dynamic var to "0"
var submit_btn:Button;
var msg:TextField;
 
input2.onRelease = toggleCheckbox();
submit_btn.onRelease = Delegate.create(this, submit);
 
var _widgetParams:WidgetParams = new WidgetParams();
_widgetParams.addEventListener(WidgetParams.SENT_PARAMS, Delegate.create(this, sentParameters));
_widgetParams.addEventListener(WidgetParams.GOT_PARAMS, Delegate.create(this, gotParameters));
_widgetParams.getWidgetParams();
 
 
// values are loaded from the server and then this function updates the UI
function gotParameters(event:Object){
	if(!event.status){
		msg.text = "Error loading settings.";
		return;
	}
	msg.text = "";
	var parameters:Object = _widgetParams.chumbyParams();
	var value1:String = parameters["myHexColor"];
	var value2:String = parameters["showSecondHand"];
	if(value1 != undefined){
		input1.text = value1;
	}
	if(value2 != undefined){
		if(value2 == "1"){
			input2.gotoAndStop(2);
			input2.checked = "1";
		}
		else{
			input2.gotoAndStop(1);
			input2.checked = "0";
		}
	}
}
 
 
// called as a callback when done saving the data to the server
function sentParameters(event:Object){
	if (!event.status){
		msg.text = "Error saving settings.";
		return;
	}
	msg.text = "Save complete.";
	getURL('javascript:dismiss()');
}
 
 
function submit(){
	if (input1.length < 1){
		msg.text = "Please enter a color.";
		return;
	}
	var parameters:Object = new Object();
	parameters["myHexColor"] = input1.text;
	parameters["showSecondHand"] = input2.checked;
	msg.text = "Sending...";
	_widgetParams.sendWidgetParams(parameters);
}
 
 
function toggleCheckbox(){
	if(input2.checked == "0"){
		input2.gotoAndStop(2);
		input2.checked = "1";
	}
	else{
		input2.gotoAndStop(1);
		input2.checked = "0";
	}
}

The first thing we do is load the classes that came with the Widget Parameters Example. These classes handle all of the loading and saving of the parameters. Next we have some code for setting the state of our UI elements when the parameters are loaded. When this configuration widget is pulled up at Chumby.com, it will load in the previously saved values if they exist. The function gotParameters listens for the parameters to load, then sets the elements to match the values. If no previous values are found, they’ll remain at the default settings.

At the bottom there is a function to handle checking and unchecking of the checkbox. It simply sets the frame of the movie clip and sets a dynamic variable.

When the submit button is clicked, the submit function gets called. It creates a new parameters object and sets our settings in it. Then it sends it off to the Chumby.com server and the sentParameters function listens for a response.

Notice that the showSecondHand parameter gets a string of “1″ or “0″ rather than true or false. When the parameter is saved to the database, it seems to be converted to a string. The string of “false” equates to true, so we need to check the string value instead.

Now let’s modify the Chumby Widget that this configuration widget configures. When the widget loads into your Chumby, it will also load any parameters for that widget. Your widget simply needs to reference them. It should look something like this:

1
2
3
4
5
6
7
8
9
10
11

var bgColor:uint;
if(myHexColor == undefined){
	bgColor == 0x000000;
}
else{
	bgColor == uint("0x" + myHexColor);
}
if(showSecondHand == undefined){
	showSecondHand == "0";
}
//...

This simply checks for the parameters, and sets the defaults if they don’t exist. In the case of the hexadecimal color, it also converts it to an unsigned int for use later in the script. It’s that simple. No need to use FlashVars or loaderInfo.

In my next post I’ll talk about accessing the Chumby’s accelerometer.

This entry was posted by Kris on Friday, February 26th, 2010 at 10:20 am and is filed under Code Logic. 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