Smarthome iPhone Web App

We have developed this iPhone web app as a means to interact and control our Smart Home. We have picked a web app as it is quick and easy to develop and very flexible to changes, whilst we try out new things and extend our Home Control System (HCS). The combination of HTML5, PHP, Ajax and Javascript results in a very good user experience.

This is not the only interface to our Smart Home! We have many more controls and indicators that are subtly built into the fabric of our home and which are also more intuitive and stylish. This interface is an addition, to enable development and testing but, we do find it being used quite a lot at the moment.

Initially, we only expose this on our home network but the web server behind it runs on our Home Control System (HCS) server and we plan to add 'away from home' access via secure HTTP in the near future.

The project exposes to main control interfaces:

  1. Our natural language text interface which supports a wide range of commands.
  2. Frequently used functions are exposed via buttons and visual indicators.

We have tried to minimise the number of buttons and indicators exposed in this interface to those that are used frequently. The PHP code also makes direct file access to our database, so this also improves performance. For example, we removed the controls to enable the heating and cooling, as these are used so infrequently (we have advanced climate control code that actually controls when the heating and cooling come on, if enabled).

Daytime view
The day time view is clean and simply, with simple colour coding. Green means something is selected or on. Orange is a warning that something is on, Red is a alarm that something is on. We use blue to distinguish scenes.

Night view
Our PHP code changes the Cascading Style Sheet (CSS) used for this interface based upon the output of our twilight sensor. This means we don't get dazzled by a bright screen and it makes it much easy to use in a darker room.


23rd September 2013

Updated view Sep 2013
One advantage of web apps is that they are very quick and easy to update, ideal when you want to try new things out and experiment. We have tweaked the CSS to make the buttons and indicators slightly larger. This makes them easy to find first thing in the morning!

Share ...
We are on ...
Facebook Twitter
YouTube Flickr Follow us on Pinterest