mark :: blog

25 Apr 2006: Tablet Design Overhaul

The biggest problem with my home-grown Home Automation system was that I'm not a graphic designer. My displays all looked a little clunky, like they'd come out of the 1980s. Guests only ever see the user interface displayed on the tablets around the house, so I took some time over the Easter holiday to make the user interface look a bit nicer.

The user interface is written in Perl/Tk and was designed to be snappy even on the original Point 510 (100Mhz) tablets. I'd already replaced these tablets around the house with Point 1600 tablets (most picked up on ebay for about 50-100 pounds each) with the main advantage that the Point 1600 can run at 800x600 in full-colour rather than the 256 colours of the 510 in the same resolution.

I first looked around the web to see if there were any existing Perl/Tk projects that had exciting graphic design I could base on, but I didn't find anything very useful. In the end I decided to make the UI look like a web site design proposed by a colleague at Red Hat for some internal site that didn't get used.

Screenshots from the new design

Heat

The Heating interface lets you look at graphs of past readings for any sensor or change the target temperature of the house.

Light

Actually we only have a couple of X10 lights in the house, and we really only ever control the living room lights.

Weather

This is just screen-scraped from the BBC website and updated every hour.

Cams

We use this screen to look at the security cameras as well as some other Glasgow web cameras. The interface allows multipart-jpeg streaming (compatible with ZoneMinder).

Phone

This actually displays a number of events such as the status of the house alarm, capturing when the doorbell is pressed, as well as popping up details of who calls us.

Screenshots of the original design

Old heating interface for comparison. See my original software page to see how the other screens looked.


Software

I was previously using the Tk/TabBar module from Jarl to provide the nice tab bars, and a bit of hacking gave the simplified tabbar (with the advantage that the bar will still nicely wrap over two rows if needed)

The rest of it was just messing around with frames and alignment and creating the curved edges. I used the gimp to get a curve I was happy with, then coverted it from a GIF to xpm with reduced colours. The xpm was then coded into the application and simplified so that the program can generate the right curves for any font size.

The Perl/Tk I used to create the headings is available here and running that program displays the following:


Created: 25 Apr 2006
Tagged as:

0 comments (new comments disabled)

Hi! I'm Mark Cox. This blog gives my thoughts and opinions on my security work, open source, fedora, home automation, and other topics.