Creating a simple web frontend for Domoticz
In this post we will create a simple web user interface for Domoticz running on a Raspberry Pi. This will allow us to check the status of our sensors and the status of the security panel of Domoticz.
In order to follow the steps we go through here, you should have a fair understanding of:
- HTML, Javascript, and jQuery (and ideally CSS)
- JSON data format
- How to upload your HTML file to your Raspberry using FTP or SFTP (useful guide)
Retrieving sensor data using JSON http request
Domoticz provides a JSON http interface for reading the sensor values remotely. Use can test it by typing a JSON http request in the address field of your web browser. If you type the below request, it should fetch all the sensor data to your browser:
192.168.1.99:8080/json.htm?type=devices&filter=all&used=true&order=Name
The response contains a lot of information.
{
"ActTime" : 1457448022,
"ServerTime" : "2016-03-08 15:40:22",
"Sunrise" : "06:41",
"Sunset" : "17:56",
"result" : [
{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"CustomImage" : 0,
"Data" : "On",
"Description" : "",
"Favorite" : 1,
"HardwareID" : 3,
---We will create an HTML file with JavaScript that extracts the information that is relevant for us. This will primarily be the sensor name, value and time when it was last updated.
Creating a basic HTML file with a JSON http request using Javascript
We start with a basic HTML file prepared with the jQuery library included. We create one <div> element with the id ”sensor-container”. It’s within this <div> we will publish the sensor data.
<!DOCTYPE html> <html> <head> <title>Home Security Frontend</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery.js"></script> </head> <body> <div id="sensor-container"> </div> </body> </html>
Next we add a simple script to publish the name, status and update time of the first of our sensors. This script uses a JSON http request to retrieve the data from your Domoticz server. The response data will be accessible through the callback function with the parameter ”result”.
<body>
<script>
$(document).ready(function(){
//We request a list of all sensor data
$.getJSON("http://192.168.1.99:8080/json.htm?type=devices&filter=all&used=true&order=Name", function(result){
document.getElementById("sensor-container").innerHTML += '<div>'+
'<h4>' + result.result[0].Name + '</h4>'+
'<h5>Status: ' + result.result[0].Data + '</h5>'+
'<p>Updated: ' + result.result[0].LastUpdate +'</p>'+
'</div>';
});
});
</script>
<div id="sensor-container">
</div>To extract the desired data we access the ”result” array by indexing it with the number of the sensor. The number [0] corresponds to the first sensor in the array. The HMTL file with the JSON scripts gives the following output in our browser when we run it from our laptop.
Our power plug Status: On Updated: 2016-03-08 19:21:00
It’s not super beautiful but it works. The name of our first sensor is ”Our power plug”, the status in ”On” and it the information was last updated 19:21. Since we want to make our frontend work with all the sensors with have set up with Domoticz, we simply have to loop through the ”result” array given to us in the JSON http request. We update our scripts with a for loop like this.
<script>
$(document).ready(function(){
var sensorInfo = "";
//We request a list of all sensor data and loop through it to publish on our web page
$.getJSON("http://192.168.1.99:8080/json.htm?type=devices&filter=all&used=true&order=Name", function(result){
for (i = 0; i < result.result.length; i++) {
sensorInfo += '<div>'+
'<h4>' + result.result[i].Name + '</h4>'+
'<h5>Status: ' + result.result[i].Data + '</h5>'+
'<p>Updated: ' + result.result[i].LastUpdate +'</p>'+
'</div>';
}
document.getElementById("sensor-container").innerHTML = sensorInfo;
});
});
</script>This gives an output in a browser that shows the status of all our sensors.
Our power plug Status: On Updated: 2016-03-08 19:21:00 Our motion sensor Status: Off Updated: 2016-03-08 11:06:46 Temperature & Humidity Status: 22.2 C, 34 % Updated: 2016-03-08 20:16:54 Sound Siren Dummy Status: Off Updated: 2016-03-08 15:14:59
Regardless of how many sensors we have, this script will loop through them all and present their status. In an upcoming post, we’ll go through how to make this look more beautiful och also have a responsive design dependant on whether you’re using a laptop, smartphone or a tablet.
