You can click here for the related YouTube video.
My previous front end for Domoticz was very well received, thank you to everyone who asked for a copy or gave feedback. I was encouraged to create a simpler to implement but still good-looking design.
The new look is based upon primarily grey and black, with the occasional flash of red or green. This scheme can be changed easily in the css file of course. The whole front end has been designed to look great on landscape tablets and portrait smartphones alike.
The front end has been primarily designed to work closely with Domoticz and has several options to insert onto the screen. The options have been specifically designed to look different to each other even though through Domoticz they would look very much the same. This is because people who do not routinely use Domoticz generally prefer a little variation in their screen to help them navigate functions.
The functions that look different are:
Feedback switch: Lights up a segment to the right when switch is on and remains dark when off. Can be pressed anywhere to toggle the switch.
Non-feedback button: A large button which (usually) will switch on a Domoticz switch. Can be used to activate things like scenes or timed functions such as heating boost.
Temperature / Humidity: Shows in readable text the status of a multifunction sensor.
Sensor: Provides colour feedback on the status of the sensor as well as data on when the sensor was last seen by the system (so for door sensors and doorbells etc this shows the last time the item was used).
Navigation bar: Shows icons which are used to help the user group and navigate across the web app. Icons were obtained from Flaticon.com and therefore without providing different icons this code cannot be used for commercial gain.
The screen is set up in two ways depending on the orientation of the screen.
Landscape – used for tablet installations: the main section is to the left, with groups of switches in a smaller column to the right.
Portrait – used on smartphones: main screen is at the top of the visible screen, with groups of switches or sensors at the rear of the screen, provided in two columns.
The code is available to download and improve over on github at https://github.com/fountside/domoticz-tiles-user-interface so you can access copies whenever you like. You will need the css and at least one html page to get started, then use the elements and change the variables stated at the beginning of the page to match your own setup. I would encourage anyone who improves this code to publish it within the repository so that others (including me!) can benefit from it.
From feedback I have recently received from readers and YouTube followers, it looks like Domoticz requires the security protocols to be in place, and this version has security built in. You’ll need to convert your username and password into base64 (follow the instructions on the Domoticz page https://www.domoticz.com/wiki/Domoticz_API/JSON_URL’s to do this).
The only additional type of html document is specifically for Sonos using node-sonos-http-api. If you already use this then all you’ll need to do is change the variables at the start of the HTML in the audio.htm file to match your rooms set up. From this screen you can directly control individual rooms (click on the room name to change) and there is a clear graphical display showing album art. You can launch your favourites and skip tracks.
I hope that this design work and code is of use to you, it is the next iteration of a long-term project of mine to design a near-perfect user interface for the smart home.
Fabulous Home Automation 