On my current wishlist are the following items in no particular order:

Carnival Lamps from Lum Lighting

At $2,250.00 it’s no wonder I fell in love with their Gaudy Goodness!

I paid $37,500 for my first home back in 1989. It had 4 more bedrooms and 2 more baths than this $49,500 1955 Chevrolet BelAir Convertible. I don’t care. I still want it.

1937 Bechstein model B Grand Piano

While I currently do not know how to actually “play” the piano, I am quite certain that were I able to plunk down $49,000 for one, I could also afford a personal Piano Teacher. Additional points if they were married to a Yoga Instructor.

Wait! This can’t just be about My Exquisite Taste! I need to somehow tie this in and give it a Design & Marketing Spin. The fact is, each of these is all about Design and Marketing. Everything that gets manufactured has appealed to someone at some point.

Being in this industry has made me look at the world in a whole new way. Grocery shopping takes longer because I get so involved in the packaging designs and I think longer and harder about brands and why one can of tomatoes looks better than another, even though they probably came from the same processing plant. It’s the visual presentation, while the can shape is pretty much the same, the fonts, colors, photo’s and verbiage are what compels us to buy even more than the price in some cases.

I am a fan of San Marzano Tomatoes. They’re pricey, so I don’t buy them for everyday cooking, but once in a while, when I am at Pasta Works on Hawthorne, I heed their siren call and splurge on a couple of cans to up the culinary ante on my Pasta Surprise.  Wouldn’t you?

One of these things is not like the others...

Compared to the Hunts can on the right, the Italian tomatoes “feel” different to me. More authentic, wholesome and flavorful. Interesting that a drawing of a tomato can evoke that sentiment more strongly than an actual photograph. It just does. In the same way that a 1955 Bel Aire feels more authentic to me than a 2010 Cadillac.

Perhaps “nostalgia” is the word I’m really looking for here. Tried and true, like Helvetica. Sturdy and strong like a Bel Aire. Fancy lamps made from real metal and wood and a piano that was made by hand 73 years ago and is still around to grace someone’s living room (even if it’s not mine!).

Nostalgically Yours,

Mrs. Knightly

Here are images taken after an hour and a half from each of the designers.

Here is Robin working on an eCommerce site in Photoshop:

And Greg researching on the internet:

And me working back and forth between Illustrator and InDesign:

On a side note, the presentation of the products is beautiful and shows the genius progression of a company started in a garage that has grown into an empire.

Anatomy of Apple Design from Transparent House on Vimeo.

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.

Write a python script that has ascii animation of a birthday dance!

Here’s a zip file with the python scripts in it. To run it on your computer, make sure that you have python installed, and extract the files into their own directory. If double clicking on justin.py doesn’t do anything (or it opens in notepad) then you can run it easily with the console window. Just browse to the same directory and type “python justin.py” and it should start to work. I can answer any issues in the comments.

If you are looking for some more nerdy fun, check out the ASCIImator (http://asciimator.net/). Here you can build your own ASCII animation, watch other people’s animations, or visit the ASCII zoo! My favorite is karaboz’s “walking old stickman.” What’s yours?

Today, I ran across this video made for competition AdobeYouGC which I believe is an Italian contest and is for User Generated Content created with Adobe products. It really inspired me. It is the simulation of a tutorial which shows how to make butter cookies with the “new” Adobe Photoshop Cook Extended. If it was this easy to make food, I would probably make dinner every night. Enjoy.

Adobe Photoshop Cook from Lait Noir on Vimeo.

PHP is a great language for web applications, and it’s available with just about any web host. If you aren’t familiar with how PHP works, this tutorial will probably be a poor place to start. Today we are going to talk about how to work with the Twitter API and PHP, and you’ll need to know a few things about how PHP works to keep up. For a good refresher course on PHP, click here.

Click through and let’s get started!

First lets get an awesome open source class that pulls all the goods from twitter into a nice handy PHP object. Go to http://code.google.com/p/php-twitter/ and grab the latest version. Put that file into a folder by its self. Now let’s make a new file called index.php in that same directory. Open that file up.

The first thing that we need to do is include that super awesome class file. Start your php code with the open tag and then include the twitter class.

1
2

<?php
include_once("class.twitter.php");

Now that the class is included, let’s make a new object to work with. Once that object is created, lets set a few important variables for this object.

4
5
6

$t = new twitter();
$t->username = 'USERNAME';
$t->password = 'PASSWORD';

If we want to get our latest tweets, we can use the method “userTimeline” and it will return a lot of data about your recent tweets. Lets store that data in a variable and display some tweets.

8
9
10
11
12
13
14

$tweets = $t->userTimeline();
 
for($i=0; $i<5; $i++) { //loop to print out our twitter avatar and the latest 5 tweets
    print "<img src='".$tweets[$i]->user->profile_image_url."' alt='".$tweets[$i]->user->screen_name."' />".$tweets[$i]->text."<br />\n";
}
//end php
?>

Now if you upload these files to your webserver and browse to that directory, you should see your avatar and your 5 latest tweets.

Lets do something a little bit more fun than just display your latest tweets. Let’s build a form that updates your twitter status. You can then use this form to update instead of going to twitter.com or using your mobile device. First let’s add a form to the index page below the 5 tweets we are displaying with the above code.

16
17
18
19

<form action='update.php' method='post'>
New twitter status: <input type='text' name='tweet' value='' /><br />
<input type='submit' value='Update Twitter' />
</form>

We have that form processing to a page called update.php. Let’s make that file and have it process your update, then return you to your index page. Here’s the code for update.php.

1
2
3
4
5
6
7
8
9
10
11
12

<?php
include_once("class.twitter.php");
 
$t = new twitter();
$t->username = 'USERNAME';
$t->password = 'PASSWORD';
 
$t->update($_POST['tweet']);
 
header("Location: index.php");
 
?>

One word of advice, don’t use this code just anywhere. If you put this form on your homepage, then anyone can type into that field and update your twitter! Because you tell twitter who you are with this code, it doesn’t really care who fills out this form. This could give spammers access to post tweets as you, so be cautious as to how you use this. You’ve been warned.

I’ve attached a zip file with all the necessary files to make this work on your own. Just be sure to edit the files to use your real username and password, or none of this will work. Leave a comment if you found this useful, or have any questions. Thanks for reading!