Home Automation Laboratory (HAL) Part 4 - Custom Interfaces

Introduction

This is part 4 of our 4 part series documenting our home automation system we lovingly call HAL.

• Part 1 - Overview. We lay out the main components of our home automation system and install the core software component, OpenHAB

• Part 2 - Data Persistence. We install a MySQL database server and tools to manage it. We then integrate it with OpenHAB for the purposes of storing our home automation data indefinitely.

• Part 3 - Messaging. We install a lightweight messaging system (MQTT broker), Mosquitto, and integrate it with OpenHAB to exchange information with custom, home-grown IoT sensors and controls.

• Part 4 - Custom Interfaces. We install and configure an Apache web server and briefly discuss integrating custom web pages with OpenHAB. This will provide a platform for building custom user interfaces for our home automation system.

In this write-up, we will install an Apache web server. We'll also briefly discuss how to use custom web pages served up by Apache to monitor and control our home automation system.

Prerequisite

This write-up assumes you have already installed and configured Raspbian on a Raspberry Pi. For details, please see Part 1 - Overview

Construction

Installing Apache is pretty simple. In fact, it's simplest, easiest step in setting up our home automation system. Out of the box, the apt repository manager in Raspbian knows about Apache. So the install is as simple as apt-getting it. Launch a console/command line interface to the Pi on which you want to install Apache. At the prompt, enter:

sudo apt-get install apache2

That's it!

You can test your shiny new web server by pointing a browser to:

http://<your_apache_Pi_ip>

You should see the default web page:

This default web page can be found on your Pi here:

/var/www/html/index.html

You can modify or replace this file with your own. You can also add your custom pages anywhere inside the "html" folder.

Integration with OpenHAB

Now for the fun part. OpenHAB provides a RESTful API. This makes it very easy to monitor and control your HA system from custom web pages. Your OpenHAB server has a very handy utility for exploring and testing the API. We've found that this is the best way to learn what the API can do.

Point your web browser at your OpenHAB Pi:

http://<your_openhab_ip>:8080

This should bring up a page with a list of the user interfaces that OpenHAB has available:

Another handy API call is to send commands to OpenHAB items. This will allow you to turn lights on and off, set thermostat temperature set-points, etc.

Examples

Here's an example of a javascript function we use in a web worker to poll status and update a custom web page:

function poll_zone_1_status() { 
   var theUrl = "http://192.168.1.169:8080/rest/items/sprinkler_z1_switch/state"; 
   var xmlHttp = new XMLHttpRequest(); 
   xmlHttp.open( "GET", theUrl, false ); // false for synchronous request 
   xmlHttp.send( null ); 
   postMessage(xmlHttp.responseText); 
   setTimeout("poll_zone_1_status()",1000); 
} 

Here's the corresponding code from the web page that uses the web worker:

	var ws1 = new Worker("workers/poll_zone_1_status.js"); 
       ws1.onmessage = function(event) 
       { 
           if (event.data == 'ON') 
           { 
               document.getElementById("zone_1_status").style.color = 'green'; 
           } 
           else 
           { 
               document.getElementById("zone_1_status").style.color = 'red'; 
           } 
           document.getElementById("zone_1_status").textContent = event.data; 
       }; 

Here's an example of a javascript function from one of our custom web pages that sends a command to an OpenHAB item. The first input parameter determines which item to send the command to. The second input parameter is the command itself:

	function ZoneSwitch(zone, command) 
	{ 
		var req = new XMLHttpRequest(); 
		req.open("POST", "http://192.168.1.169:8080/rest/items/sprinkler_z" + zone + "_switch", true); 
		req.setRequestHeader("Content-Type", "text/plain"); 
		req.setRequestHeader("Accept", "application/json"); 
		req.send(command); 
	} 

Conclusion

You can obviously use simpler methods of integrating web pages or other custom UI's with OpenHAB. The above examples were taken from a custom, Star Trek themed UI we created as a front-end for a custom sprinkler system which is integrated with HAL. Details on how we created that UI and present it on a touch screen panel can be found here.