I came across this very elegant residential energy efficiency dashboard from Agilewaves as I was thinking about user interfaces for my smart home project. I like the clean, intuitive design and the logical layout. Skilled interface designers were probably involved with creating this interface. I won't pretend to be a skilled interface designer, and I do want to create a simple user interface that communicates historic resource usage and current usage measurements. There are a lot of tools available to create complex user interfaces with back-end stub code to simplify programming. Much of my programming experience involves embedded systems, and I prefer hacking systems that hide inside larger electromechanical devices, with an embedded controller to handle measurement and control with specifically defined user interaction. Thus, AJAX and PERL are not the first tools I grab to create an interface. I do have pushbuttons, 4 bit to 32 bit microcontrollers, and LCD displays at the ready in my tool kit. With those tools in mind, I've set about creating a basic look and feel for my dashboard.

 

In my previous posts, I outlined some of the general requirements for a smart home network that aggregates energy generation and usage data for a net-zero building. I have looked at basic measurement and control needs of the building's users, and the sources of signals and the sensors needed to acquire those signals. I want to display this information to the users and occupants of the building. As a place to start, I've drawn some basic widgets that will be fed data for display.

 

First, I want to chart data. I want to see trends and visually compare values over time. My basic chart graphic looks like this:

 

 

 

Second, I want to look at the current or instantaneous values of my sensor data. Here is an example of how that might look:

 

 

Finally, this is a smart home, and I do want some provision to control certain things from this user interface. I may not use it, but a control widget might look like this:

 

 

As I said, I’m not a graphic designer. So you can pause here for a moment and snicker at my amateur design aesthetic! As simple as this is, it gives me a better idea of what kind of computing power I’ll need for this project.

 

Many vendors make LCD products that can be driven by a microcontroller using a parallel, serial, or I2C interface. Some of these LCDs have touchscreen options as well. Far too many of my projects have been near completion when someone says “Hey, you really need to add this feature”. I’m sure some of you have been there, or might even have been the one asking for the new feature. The first few times it happened, I struggled against hardware or software optimized for a particular specification and unyielding to the new features. Since those painful first lessons, I have been more careful about selecting flexible, portable, and scalable tools for hardware and software development. Some of these tools might seem like overkill, but generally they help designers focus poorly defined problems or tasks into compelling products.

There are very cool hardware options available for completing this project. I’ve decided that I don’t want to spend a lot of time dealing with custom LCD and touchscreen interfaces, so a VGA display with a USB touchscreen seems ideal. This leaves me with a choice. There are several compact computing systems available that have more than adequate processing power, VGA output, USB, and multiple other I/O options. We’ll take a deeper look into the those options next time.