I just thought I would let you know that I have a new YouTube channel, called Fabulous Home Automation where I intend to add informational videos about home control devices. There will be a mixture of reviews and technical hints and tips, so hopefully something for everyone. My very first video is a quick review of some LightwaveRF products. I’d appreciate your comments, but please be constructive as this is my first video!
I’ve been asked a few times about my custom front-end for my Domoticz, Hue and Sonos setup, so here are a few HTML snippets and where to put them, assuming you are running Domoticz on your home control server.
Right from the offset I must stress that the Icons I have used are made by various incredibly skilled designers at http://www.flaticon.com/ and therefore this front end cannot be used for any commercial purpose.
I have previously written an extensive post about the continuous development of a home control user interface and have posed a video containing my front end, so this post will not be about the thought process behind creating a UI, rather how I have managed to put one together using HTML.
I must also stress that I am not an expert in baking a web app. Developers may read my code and scoff at its inefficiency but it works for me, and hopefully can give you some inspiration.
Layout
The layout of all panels follows the same template: A main area where the actual buttons and controls live, changing depending on which screen the user selects; the ‘scenes’ bar, a blue strip towards the bottom of the display which is a kind of ‘quick access’ ribbon for regularly used commands; and a Links bar which permanently shows the pages that can be displayed.
There is also a ‘notifications’ display which shows up just above the scenes bar with information provided by a variable in Domoticz. This text can be ‘cleared’ by touching it (more on this later).
All screens use variations on the same HTML so not every screen is shown in detail in this post.
Home Screen
Home is where the heart is. I like the home screen to be simple, uncluttered and good looking. It’s by far the screen shown most regularly so less is more here.
The interesting part of this screen is the background. It changes depending on the weather. First I saved six 2000×600 backgrounds with names ranging from weatherback-rain.png to weatherback-fog.png. You need cloudy, fog, partlycloudy, rain, snow and sunny. I set the size of these backgrounds to fit the tablet which the screen is displayed on so you may need to adjust accordingly.
The HTML code to change the background depending on the weather is as follows (change xx, yyyy and zz to the address of your Domoticz server, the port Domoticz is using and the idx code of your weather source in Domoticz):
function updateweather(){
var forecast
var xmlhttp = new XMLHttpRequest();
var url = "http://192.168.1.xx:yyyy/json.htm?type=devices&rid=zz";
var forecast
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
forecast = myArr.result[0].ForecastStr;
console.log("Forecast is " + forecast + ".")
// myFunction(myArr);
if (forecast == "Partly Cloudy") {
document.getElementById("weatherindicator").src = "weatherback-partlycloudy.png";
}
if (forecast == "Sunny") {
document.getElementById("weatherindicator").src = "weatherback-sunny.png";
}
if (forecast == "Rain") {
document.getElementById("weatherindicator").src = "weatherback-rain.png";
}
if (forecast == "Fog") {
document.getElementById("weatherindicator").src = "weatherback-fog.png";
}
if (forecast == "Snow") {
document.getElementById("weatherindicator").src = "weatherback-snow.png";
}
if (forecast == "Cloudy") {
document.getElementById("weatherindicator").src = "weatherback-cloudy.png";
}
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
setTimeout(updateweather,60000);
}
Notice that the last line of this code sets up the web page to update the weather picture every 60 seconds. Ok, in the body of your HTML you’ll need something like
<div id="weatherdisplay" align="left" class="weatherback"><img id="weatherindicator" src=""></div>
And you’ll need something like this wherever you save your CSS:
div.weatherback {
position: fixed;
top: 0px;
left: 0px;
width: 1000px;
height:600px;
}
Activating Hue scenes
The API for Hue is relatively easy to use. I used the API to save scenes to each room and then can recall them from the press of an icon on the scenes bar. The HTML at the scene bar is easy:
<a href="javascript:;" onClick="groupscene(1,7);switchoff(24)"><img src="scene-cinema.png" width="150" height="150" border="0"></a>
The button called scene-cinema.png does two things actually, sets the group 1 to scene 7 and then switches of a switch in Domoticz. Let’s see the code for each of these functions:
function groupscene(group,scene){
execute('PUT', 'http://192.168.1.aa/api/bbbbbbb/groups/'+group+'/action', '{"scene":"'+scene+'"}');
}
Change aa to the address of your Hue bridge and bbbbbb to the name of the developer (if you followed the Hue API instructions from the Hue website this might be “newdeveloper”. If your scene does not change straight away then your control panel might not be authorised to the Hue bridge. If this is the case, press the button on the Hue bridge and then try again a couple of times.
function switchon(devicecode){
execute('PUT', 'http://192.168.1.xx:yyyy/json.htm?type=command¶m=switchlight&idx='+devicecode+'&switchcmd=On', '');
}
function switchoff(devicecode){
execute('PUT', 'http://192.168.1.xx:yyyy/json.htm?type=command¶m=switchlight&idx='+devicecode+'&switchcmd=Off', '');
}
function toggle(devicecode){
execute('PUT', 'http://192.168.1.xx:yyyy/json.htm?type=command¶m=switchlight&idx='+devicecode+'&switchcmd=Toggle', '');
}
function dim(devicecode,dimlevel){
execute('PUT', 'http://192.168.1.xx:yyyy/json.htm?type=command¶m=switchlight&idx='+devicecode+'&switchcmd=Set%20Level&level='+dimlevel, '');
}
The above codes (again change xx to the address of your Domoticz server and yyyy to the port number) are all similar. Switchon, switchoff do what they say on the tin. Toggle changes the state of an on/off switch and then dim sets a certain switch you specify (idx) to the dim level you select (dimlevel).
While we’re here, here’s a list of the other Hue functions I put into the home control system:
function lightoff(light){
execute('PUT', 'http://192.168.1.aa/api/bbbbbb/lights/'+light+'/state', '{"on":false}');
}
function lightmax(light){
execute('PUT', 'http://192.168.1.aa/api/bbbbbb/lights/'+light+'/state', '{"on":true,"bri":255,"sat":0,"hue":0}');
}
function briup(group){
execute('PUT', 'http://192.168.1.aa/api/bbbbbb/groups/'+group+'/action', '{"bri_inc":40}');
}
function bridn(group){
execute('PUT', 'http://192.168.1.aa/api/bbbbbb/groups/'+group+'/action', '{"bri_inc":-40}');
}
function groupcontrol(group,hue,bri,sat){
execute('PUT', 'http://192.168.1.aa/api/bbbbbb/groups/'+group+'/action', '{"on":true,"bri":'+bri+',"sat":'+sat+',"hue":'+hue+'}');
}
function groupscene(group,scene){
execute('PUT', 'http://192.168.1.aa/api/bbbbbb/groups/'+group+'/action', '{"scene":"'+scene+'"}');
}
So these are the main components of the home page – and here’s a snippet of how I go the inside and outside temperature (change zz to the idx of your temperature sensor):
function updateintemp(){
var instatus
var xmlhttp = new XMLHttpRequest();
var url = "http://192.168.1.xx:yyyy/json.htm?type=devices&rid=zz";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
instatus = "Inside: " + myArr.result[0].Data;
console.log(instatus)
document.getElementById("intemp").innerHTML = instatus
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
setTimeout(updateintemp,20000);
}
You need a div with id “intemp” positioned where you like, and again the last part of the above code sets up the web app to update the temperature each 20 seconds.
Devices screen
The devices screen updates the icons with a green bar when the switch is on and a grey bar when off. I save two identical png pictures, one with -on.png at the end and one with -off.png. I enter this HTML repeatedly, changing the id and the source of the picture for each button:
<a href="javascript:;" onClick=”toggle(xx)"><img src="chesterlampoff.png" width="125" height="125" hspace="5" vspace="5" border="0" id="chesterlamp"></a>
Change xx to the idx of the device in Domoticz (you can find the idx of the device in the ‘Devices’ tab of the Domoticz interface.
Change the id=”chesterlamp” to id=”whateveryourdeviceiscalled” then change the img src to the ‘off’ picture for your device.
In the code part you need the following:
function updatedevice(idx,location,onimage,offimage){
console.log("checking status of idx "+idx)
var xmlhttp = new XMLHttpRequest();
var url = "http://192.168.1.94:8080/json.htm?type=devices&rid="+idx;
var onoff
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
onoff = myArr.result[0].Status;
// myFunction(myArr);
}
if (onoff == "On") {
document.getElementById(location).src = onimage;
}
if (onoff == "Off") {
document.getElementById(location).src = offimage;
}
if (onoff == "Open") {
document.getElementById(location).src = onimage;
}
if (onoff == "Closed") {
document.getElementById(location).src = offimage;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
Then another function where you will put all the code to tell the web app to update the icons depending on how Domoticz reports the switch (on or off, or even open or closed if you’re using door sensors too):
window.setInterval(function(){
updatedevice(187,'chesterlamp',"chesterlampon.png","chesterlampoff.png");
updatedevice(132,'washingmachine',"washingmachineon.png","washingmachineoff.png");
countup();
updatenotification(11)
}, 1000);
I’ve put two switches here, Chester’s lamp and the washing machine. You can add as many switches as you like here, as long as they have been set up in the body of the HTML.
There are two other functions that are called each second too: countup() and updatenotification(11)
Automatically reverting to the Home Screen
If you want the screen to revert to home after two minutes of inactivity, you can use this code:
First put
var ticker = 0;
at the start of your code block, then put:
function countup(){
ticker=ticker+1
console.log("Ticker is " + ticker);
if (ticker>120) {
console.log("Moving to index...")
MM_goToURL('self','index.htm');
}
}
This means that once the variable ‘ticker’ has incremented to 120, the screen will go to the page called index.htm. If you use this code, remember to put this at the end of each function:
ticker = 0;
This will reset the timer so that another 2 minutes have been added to the time before the page will switch to the Home Screen.
Notifications from Domoticz
I have set up the screens to show a strip which indicates what Domoticz is up to. Some of my LUA scripts in Domoticz update a variable with a string of text in English to tell the user what Domoticz is doing. This could be confirmation that a switch has been turned on/off or it could report is something has been triggered automatically.
First, create a string variable in Domoticz called LastEvent and then note down its idx. In the below case the idx is 11 (and there’s already a string update in there too, yours will be empty when you first set it up).
Back to the home control HTML:
function updatenotification(idx){
console.log("checking status of idx "+idx)
var xmlhttp = new XMLHttpRequest();
var url = "http://192.168.1.xx:yyyy/json.htm?type=command¶m=getuservariable&idx="+idx;
var textentry
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
textentry = myArr.result[0].Value;
// myFunction(myArr);
document.getElementById("notification").innerHTML = textentry;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
And:
function clearnotification(idx){
execute('PUT', "http://192.168.1.94:8080/json.htm?type=command¶m=updateuservariable&idx="+idx+"&vname=LastEvent&vtype=2&vvalue=%00", '');
}
And in the body of the HTML (so once the text is clicked the variable in Domoticz is reset to null):
Something like this for the CSS:
div.notificationpane {
position: fixed;
bottom: 250px;
left: 0px;
width: 100%;
font-size: 30pt;
background-color: #333333;
text-indent: 25px;
opacity: 0.6;
}
Then in the LUA script, when you want to notify the user about something, you can add a line like this:
commandArray['Variable:LastEvent'] = tostring(os.date("%H") .. ':' .. os.date("%M") .. ' Rear balcony door opened, lights on for 15 minutes.')
This adds the time and the text to the variable, which then almost immediately pops up on the Home Control screen until it is clicked.
Where to store your HTML
When you have created your masterpiece, you can save it in a new folder of your choice below the /domoticz/www/ folder. You can use something like WinSCP to create a folder and then transfer all your files in one go.
Then, when you usually navigate to 192.168.1.1:8080 to go to the Domoticz home screen, add / then the name of your folder then /index.htm or whatever your home screen address is.
Summary
Due to the jerry-rigged nature of my HTML code I am not going to publish it in its entirety. I also don’t know the ins and outs of using the flaticons.com icons and publishing them directly. Hopefully, however, this post will give you some inspiration to write your own home control front end.
Although I like the look of the standard LightwaveRF hanset controllers, the user of said controller has to remember what device is switched on and off when a numbered button is pressed. This requires Mastermind-level memory.
Besides, I don’t use the controllers for ‘On’ and ‘Off’ per se, rather just to send a signal to Domoticz, so that the computer can decide what to do (or to reject the command altogether). This means that the same button can be used for ‘On’ and ‘Off’, and therefore the same handset can be used for multiple functions (lighting moods and audio for example).
So a way to make these controllers more intuative is to add personally created templates to them so that the controller becomes part of your home setup. You can choose a theme and run with it (as shown).
Firstly, this procedure is reversible, so if you don’t like what you’ve done, you can undo it all and revert back to your original handset. Just remember to keep all the bits that come off the controller safe.
Secondly, you will lose some functionality. Because the switch is removed, you don’t have the ability to select button set A, B, C or D. I personally don’t care about this because the whole reason I wanted to make a custom cover for my remotes was to make them as user friendly as possible.
And if your family can remember that C4 controls the TV power, and D2 controls the garage door, and B1 to B4 control the kitchen lights, then you shouldn’t be reading this blog: you should all be at Cape Canaveral getting ready to take off a-la-Lost in Space. Danger, Will Robinson!
Basically, you’ll end up with 10 buttons per customised handset.
1. Peel off the backing sticker from the controller to expose a screw and unscrew it.
2. Prise open the controller. The things that should come off (quite easily are: The front cover, the rubber keys, the switch (which may come off in one part or may split into the plastic part of the switch and the metal part). And the screw of course. If the circuit board has come off from the base of the remote then I think you used a little too much force! Get you, butchy.
You’ll notice that the rubber buttons are not needed – the ‘pads’ you can see in the image are self-contained switches. Like the ones you get on blister-remotes.
3. Design your overlay. I will post a template that you can use (search for the ‘Templates’ tag). Don’t forget to leave a space where the led will shine when a button is pressed.
I used icons from Flat Icon.
4. Print and cut out the overlay. I found that good quality bright white matt card worked best.
You may need to cutoff tiny strips from any side to make the overlay fit correctly.
5. Put one or two layers of the same card underneath the overlay (between the keys and the overlay). This will make the control pad seem more springy.
6. Tape on the overlay onto the front of the controller. I used normal tape here but I should have used a thick tape so that I only needed to use 1 pass, rather than 3 passes as I have done in the above picture.
Make sure that you don’t tape up the drawer on the back, otherwise you’ll have probelms when it comes to changing the battery.
7. Voila! The below example is for the kitchen. That’s why there is a cute chef as one of the buttons: when you press the chef button, all the devices in the kitchen switch on.
8. Now it’s time to program what happens when you press the keys. More on that elsewhere in this blog.
Here’s an example handset (this one is for my bedroom). It’s been created in the same style as all the ‘hardware controllers’ in the flat, so that picking it up and using it should be second nature.
You can for once use your creative side and your geek side together for this project. Why not speak to members of your family to get an idea of what they’d like to see on the controllers (favourite colours, family member/pet’s faces etc). Maybe they could even design the templates for you!
Fabulous Home Automation 