Satter Ramblings

Creating Beautiful UIs

The Compact Framework while small still has a very rich feature set. This includes all the components you need to build a really stunning UI similar to the iPhone.

Mobile Web Book

Cameron Moll a author, presenter and web designer, will be releasing a new book about building mobile websites. The book Mobile Web Design per Cameron Moll

The premise of this book is threefold: Analyze current and future technologies relevant to mobile web content, confront the limitations of existing mobile devices, and discover methods for exploiting the unique opportunities afforded by mobility and its devices, both current and future.

Ten paces, then draw

One important issue to remember when building interfaces in Flash for the Pocket PC is to keep things small. Not only is the screen tiny - only 240x320 in total size, but there's also the limited memory and processor capabilities of the Pocket PC platform to contend with. One way to address these limitations of the platform is to use Flash MX's drawing API to create buttons and graphical elements on the page instead of loading the file up with graphics.

Flash MX's drawing API is fairly powerful and a great tool to become familiar with. In addition to allowing you to draw objects using code, the drawing API also provides a lightweight alternative to multiple MovieClips in your Flash file.

Implementing the drawing API is not for the fait hearted - it requires a good deal of spatial knowledge, trig and geometry skills and a bit of luck. To get you started I recommend downloading the Form = Function drawing API methods. These code snippets will give you a head start in creating anything from rounded-corner buttons to polygons to stars. Take a look.

Is that a light switch in your pocket or are you just happy to see me?

They say that marathon runners feel an overwhelming sense of euphoria when they complete their race. Here at Intuitive Homes we've been working like mad for the past eight months to create a robust home automation system for some of the largest private homes in the USA. This morning, I felt a bit of that euphoria with a project I've been working on; porting our touch panel UI to a wireless Pocket PC.

Yesterday my day started at 5:30am and for the next 14 hours I transitioned the navigation and lighting controls UI from the 4:3 aspect touch panel interface to a wireless Pocket PC. This morning we threw the switch on our client's WiFi network and I was able to control every light in the house, all from the Pocket PC. Euphoria!

The speed of development is certainly one of the reasons that we are using Flash MX to develop our UI. Major sections of our system logic in Flash didn't need any re-writing for the Pocket PC -- just the UI needed tweaking. Another reason that Flash makes such an excellent tool for building Home Automation UIs is the vast number of devices that Flash can run on. We're already developing touch panels UIs with Flash, and now the Pocket PC platform is up and running. Then there's the potential for deploying our Home Automation UI to PlayStations, xBoxes, DoCoMo phones and more.

To build our interface we've been using Macromedia's new Standalone Macromedia Flash Player 6 for Pocket PC 2002, which allows Flash developers to create projectors specifically for the Pocket PC platform. The new Pocket PC player works great, and Flash performed all the code flawlessly. The main issue with our UI at this point has to do with the processor speed of the Pocket PC. Unfortunately the XML parsing ability of the Pocket PC player is very sluggish - needing nearly 30 seconds to configure our Flash application and parse the initial settings XML. Once that's been done however, the interface moves along at a fairly decent pace. Our XML Socket server connection over the wireless is very zippy for sending our SOAP XML calls though; turning off the theater with over 25 individual light loads (or switches) takes less than a second.

Color me tickled pink. Flash rocks.