Case: Aaltra builds visualization software for the smart home (guest article)

This is a guest posting by Aaltra. Aaltra explains their technical implementation of a “smart home” visualization software for Qbus, based on Microsoft technology (Windows Presentation Foundation, SQL Server, Windows Embedded, Visual Studio, .NET).

About Aaltra and the people behind the app

Pieter-Paulus Vertongen and Ciel Berings founded Aaltra in 2007 after working together during their studies for 6 years. Pieter-Paulus Vertongen is a highly educated and talented programmer specialized in C# Asp.Net, WPF, Flash and Silverlight.
Ciel Berings is a graphic designer with an amazing skill for perfection and usability. Those two profiles combined give the ultimate mix, completing any project in time with great usability, stability and exquisite design.

Introduction / Project and solution

For the past two years Aaltra has been working on a “smart home” visualization software for Qbus, rebranded by GE and Jaga.

The primary function of the software is to visualize and control the status of your home in a very user friendly and pleasing way. The software enables the user to control their lights, devices, ventilation, heating, shutters and much more without having to read any manual.

Moving the light switch functionality from a physical switch on the wall to a digital touch interface on screen creates some new possibilities, but some new challenges as well. We approached the visualization of these devices from two different angles:

First we have the “floor plan mode”. The floor plan is a rather physical representation of your home. Each room is represented proportionally within each floor plan which gives the user an intuitive experience, browsing trough the virtual space of its home. Users can draw their floor plan in less than 5 minutes, again in a very user friendly and touch friendly interface.

Second we have what we call “group mode”. Group mode is an abstract group of devices. The user can choose to either group devices by the rooms in which they are present, or by function (for example “all heating”). These groups can have a picture background, which will help visually identify the groups.

The secondary function and important feature for current households is the energy monitoring, offline and real-time. The software enables you to make any graph from any device in your system, like the room temperature, CO2 level, electricity usage, water usage, air quality, etc… This enables the user to be aware of the current energy usage, take appropriate actions and lowering the overall energy cost.

Additionally the software contains a plugin engine, which is used to expand the system based on the user’s needs. One of these plugins is video calling using VOIP. The software can connect to a local door interface with sound and video or it can be used to call across the world with anyone using VOIP software.
Other functionality can be added using the plugin engine, like a clock or browsing favorites.

The overall design and usability decisions were made for touchscreens with a size around 10”. Consistency is an important feature of the design. Every device can be controlled using the same actions. Since the target device was a small touchscreen, the configuration had to be accessible using touch. We implemented custom layout and easy accessibility to features like the onscreen keyboard.

It is possible to easily rebrand the software to different partners demands using different colors, logos and text. The software is distributed in different countries or industries by different partners.

Choice of technology

Our major technology decisions were based on the project requirements: being that it should run on a low-end Windows embedded touch device and the software had to be visually appealing.
The two main technologies we considered were Adobe Air or WPF. Air has the advantage of being very flexible in terms of layout, animation and operating system. On the visual and creative side Flash offers almost unlimited possibilities. The main disadvantage is the limited technical possibilities and debugging tools, especially if you compare it with Visual Studio. The project also required a custom protocol implementation to communicate with the main controller (serial and TCP communication). With WPF, we could import the Illustrator vector drawings like we would do in Flash, use them as objects and animate them like we would animate them in flash. On top of that, we had all the technical advantages of the .NET framework in combination with a SQL Server Express to store all the data.

The designs were made in Illustrated and exported to XAML. With some small modifications, they could be used within Blend to add the functionality and animation to the design.

Architecture

The software is divided in multiple layers with each their core function. These layers contain communication with the Smart home controller, saving data to the SQL Server database, generating and controlling layout and the WPF layout itself.
Each stack of layers can be reused in different software products. The communication layers has been reused to create an OPC server which communicates with the smart home system. The layout controlling layer to the bottom has been reused for another WPF visualization.

layer_structure

The layout controller layer handles all the calculation needed to generate the dynamic layout. The floor plan is generated on the fly using vector points, the icons in a group are pinned onto the location of the background image and the graphs data is optimized and generated before showing in the graphs.

As WPF is vector based, we wanted to save as little generated data as possible. The floor plan and icons are saved as coordinates and types into the database. This starts with the configuration of the software. The user can load a floor plan image to use as a template and click on the corners of the rooms to generate the rooms. In the process of drawing the rooms, all coordinates are saved and checked against each other to get straight room walls.

floorplan_drawing

When the floor plan is used in the actual layout, all rooms are drawn into a canvas using a path. This canvas is resized to the size of the screen with the scale transformation and animated using a DoubleAnimation.

A room can be zoomed in to view all the devices within that room. Since all coordinates of the room are known within the program. The full drawing can easily be scaled to the actual size of the room. The margin of the canvas is adjusted to the position of the room within the canvas. The changes of the margin is animated using a ThicknessAnimation. The combination of the animation when it scales and position using the margin gives a fluent zoom-in effect for the user without any loss of quality.

floorplan_overview floorplan_zoomed

A similar method is used with the groups, when the user places an icon on a picture. The type of icon is saved together with the coordinates relative to the image. The user can rescale the software as much as they want, the icons will keep their location relative to each other and the image in any case.
This method is done by using the standard image component with its stretch function. When calculating the position of the icons, the actualwidth and actualheight come in handy to recalculate the coordinates of the icons. These are added to a transparent grid which is placed on top of the image.

Another function of the layout controller layer is pre-calculating the coordinates for the eco-graphs. These graphs give the impression that the user can scroll back unlimited in time. But these graphs are redrawn as soon as the user scrolls, it is not an unlimited path. Only what the user sees is drawn onto the stage. This requires some logic to prepare the graph to let WPF draw the path as quickly as possible. The layer determines the vertical scale, gets the necessary data from the database and fills the gaps to get a full array of coordinates for the graph. The layer also retrieves some data before and after the current period and puts it in cache in order to be able to respond quickly to a scrolling action.

graph_detail

The WPF layout uses templates and styles to modify existing controls to the desired touch layout. For the configuration, lots of custom controls had to be made to meet the needs of the touch panel. These controls contain a file explorer, ordering enabled list and several dialogs.

We had to tackle rendering transparency of WPF on low-end graphic cards. The hardware rendering of these cards can generate wrong visual information and very low performance with animations. By setting the graphics driver to render the information using the CPU, this issue was solved and all animations ran as desired.

Current usage

The software is mostly installed on the predefined touch hardware, but is also used on laptop, desktop and tablet computers running different versions of Windows. The ability to deliver to different devices has been a big strength and helped distributing the software.

Qbus sells this software for 2 years in Belgium, Portugal and Greece. www.qbus.eu
GE is the distributing partner of the software using their HabiTEQ smart home product line.
http://www.gepowercontrols.com/eu/resources/literature_library/catalogs/residential.html
Jaga uses the software for their ventilation and CO2 metering for smart ventilation.

Learn more: