Skip to content

HTML5 Web Interfaces

January 26, 2013

January, 2013

While he was putting in my irrigation system last fall, the installer shared some cool optional features that he’d recommend for the automation project.  One idea he recommended was to create an interface for a tablet or smart phone so I could be outside and control the irrigation system.  It got me thinking that this would not be that hard to do, and would also be a benefit for some other interface features.  I proceeded to develop HTML5 interfaces for the Irrigation Control, Light Control, and Temperature Control.  I chose HTML5 because I’ve got a mix of different platforms (Apple iPad/iPod, Android SmartPhone, Windows PCs) in the house, and I wanted the interface to be available to all of them without having to write platform-specific code.

Once upon a time, I earned a Microsoft Certification in Visual Interdev 6.0.  This was back in the late 90′s when Active Server Pages were first popular (wow, now I feel old).  Unfortunately, during the time in between, I’ve not had any need to write a browser-based application and I’ve fallen out of practice.  When I started working on this new set of browser-based interfaces, I thought it would be a good opportunity to brush up on my ASP.NET coding skills.  Having just recompiled all the Watchdog code in Visual Studio 2012, I used that as my IDE for these interfaces.  To my surprise, quite a bit had changed over the years and I pretty much had to start from scratch.  However, after a brief re-education, I was able to quickly produce the interfaces and test them on the different platforms – they all worked flawlessly.

Irrigation Control Interface

With irrigation zones, it is difficult to remember what zone number is associated to each part of the yard.  So, rather than a bunch of buttons with zone numbers, I opted for a more graphical interface.  I used the JPEG image I created showing the water lines and created polygon image maps on top of it.  Now, all I have to do is just touch the part of the image that I want to control and the ASP.NET page sends the on or off command to the database table.  WDIrrigationControl watches the table and takes action.  It enforces rules to ensure that only one zone is on at a time, and that I don’t leave a zone on for too long.  The ASP.NET page refreshes itself periodically to display the current system status.

Here is the link to the Irrigation Control project for more details about what this interface is controlling.

Light Control Interface

After switching from X10 to Insteon, I built in a database table to provide a stateful queue allowing external applications to request changes to the lights.  I wrote a simple ASP.NET application to select from a list of the lights that are controllable, and turn them on/off.  The on/off page refreshes itself every 5 seconds to display the current light status.  WDInsteonControl running on Watchdog3 actually sends the Insteon commands.  I played around with this interface in order to make the buttons as big as possible and still fit well on my Smartphone.  My initial focus was functionality, but I’m sure I’ll go back later and give it a nicer-looking interface.

Here is a link to the Light Control project for more details about what this interface is controlling.

Temperature Control Interface

After switching from a X10 thermostat to a WiFi thermostat, I built in a database table to provide a stateful queue allowing external applications to request changes to the temperature.  I wrote a simple ASP.NET application to increase/decrease the temperature by 1 degree with each touch of the button.  The page refreshes itself every 10 seconds to display the current thermostat setting.  I also added a second page which shows a table of the current values of all the temperature probes throughout the house to help the user decide how to adjust the thermostat.  WDNetChecker running on Watchdog1 actually interfaces with the thermostat.  Like the light control, this interface is bare-bones and could use a make-over.

Here is a link to the Temperature Control project for more details about what this interface is controlling.

Window Blind Control Interface

March, 2014 Update:  I modeled this interface after the Light Control Interface – a main page with a set of buttons for each window blind to control, and a second page with the blind control function.  The second page updates every 30 seconds so I can show the updated level of the selected window blind.  I created a new set of tables and a new control app (WDBlindControl) to allow the web interface to control the window blinds.  I had some challenges getting a slider bar to work on the second page of the blind control, but ultimately got an AJAX control to work and look good using custom cascading style sheets.

Here is a link to the Window Blind Control project for more details about what this interface is controlling.

I installed IIS Services on the Watchdog1 server and use it to host all three applications.  For whatever reason, I’m unable to get the publish feature working in Visual Studio 2012 despite my best efforts, so all updates are done by manually copying files.  Overall, I learned a lot building these interfaces and look forward to using these new features.

Pictures:

DSCN0009  Irrigation Control HTML5 interface.

DSCN0002  Light Control HTML5 interface.

DSCN0007  Light Control HTML5 Interface (Page 2)

DSCN0008  Temperature Control HTML Iterface

About these ads

From → Home Automation

One Comment

Trackbacks & Pingbacks

  1. Watchdog: Current Release Functions | Bithead's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: