In a previous post (here), we created a simple front-end for Domoticz running on a Raspberry. In this post, we’ll take it a step further and style it a bit to look beautiful. It’s good if you go through the previous post first since we are going to build on that code base.

Areas you need to be familiar with to follow this post

  • Code base used in previous post (here)
  • Bootstrap (you can download it here)
  • CSS

Starting with the design

At the end of this post we want to have a design of our user interface looking like this:

front-end_design

Adding the Bootstrap structure to the HTML file

We have downloaded Bootstrap and extracted the folders in the folder where we have our HTML file from previous post. We add the following two lines of code to include the Bootstrap CSS and JS libraries.

<!DOCTYPE html>
<html>
  <head>
    <title>Home Security Frontend</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>

Adding rows for the Bootstrap structure

In the body of our HTML file, we add three Bootstrap rows. The first one is for adding a nice logo and a ticking clock, the second one is for adding the house icon and the status of the security panel, and the final one is for listing all the sensor information. All three rows must be wrapped in a <div> with a class labeled ”container”.


&lt;div class="container"&gt;

&lt;div class="row"&gt;

&lt;div class="col-sm-12" id="top-bar"&gt;
        &lt;img id="yellington_logo" src="http://www.yellington.com/yellington_logo.png"&gt;

&lt;div id="clock"&gt;&lt;/div&gt;

    &lt;/div&gt;

  &lt;/div&gt;


&lt;div class="row"&gt;


&lt;div class="col-sm-6 v-align" style="text-align: right;"&gt;       
        
          &lt;span class="glyphicon glyphicon-home" id="house-image"&gt;&lt;/span&gt;
       
    &lt;/div&gt;
&lt;div class="col-sm-6 v-align" id="house-status-text"&gt;&lt;!-- keep the opening a closing div tags together to avoid white space causing line breaks in the user interface--&gt;
    &lt;/div&gt;

    
  &lt;/div&gt;



&lt;div class="row" id="sensor-container"&gt;
  &lt;/div&gt;


&lt;/div&gt;

The glyphicon image is part of the Bootstrap package and we will use it as our house image in the first row. The ”v-align” class will be used in the CSS/style part of our HTML file to align the house image vertically in the middle with the status text of the security panel. Keeping <div></div> on line 14 together is intentional to avoid adding any whitespace when rendering the two columns on the same row in the browser.

Expanding the JavaScript functionality

We will expand the JavaScript part of our HTML file with the following:

  • Wrap the functionality of updating the sensor data in a separate function: updateSensors()
  • Add a function: getSensorImage() to borrow some nice looking sensor images from Domoticz
  • Add the time in the top row. This will be a ticking clock since we update the data automatically with one-second intervals
  • Fetch the status of the security panel
  • Finally set a timer with a one-second interval to update all data automatically.

The script code looks like this:

&lt;script&gt;
  $(document).ready(function(){

    var domoticzURL = "http://192.168.1.99:8080/"; //use this format if you want to place this file on another computer on your home network.
    //var domoticzURL = "../"; //use this format if you place this file in a folder in the www folder on your Domoticz server. 

    $(function() {
      updateSensors();
    });

    function getSensorImage(sensorType){
      //This function returns the image of the sensor that is stored in the image folder on your Domoticz server
      
      var sensorURL = "";

      //The list of sensor types can be expanded dependant on what type of sensors you have
      switch(sensorType) {
        case "Light/Switch":
              return domoticzURL + "images/Light48_On.png";
            break;
        case "Temp + Humidity":
            return domoticzURL + "images/temp-20-25.png";
            break;
        default:
          return domoticzURL + "images/Light48on.png";
      }

    }
  
    function updateSensors() {

      var sensorInfo = "";

      //First we publish the time in our user interface
      var d = new Date();
      var hours = d.getHours();
      if (hours &lt; 10) { hours = '0' + hours;}
      var minutes = d.getMinutes();
      if (minutes &lt; 10) { minutes = '0' + minutes;}
      var seconds = d.getSeconds();
      if (seconds &lt; 10) { seconds = '0' + seconds;}
      document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" + seconds;

      //We request a list of all sensor data and loop through it to publish on our web page
      $.getJSON(domoticzURL + "json.htm?type=devices&amp;filter=all&amp;used=true&amp;order=Name", function(result){
      
        for (i = 0; i &lt; result.result.length; i++) { 
          sensorInfo += '
&lt;div class="col-sm-6 col-md-4 col-lg-3 sensor-outer-box"&gt;'+
                    '
&lt;div class="sensor-box"&gt;'+
                      '&lt;img class="sensor-icon" src="' + getSensorImage(result.result[i].Type) +'"&gt;'+
                      '
&lt;div class="sensor-data"&gt;'+
                        '
&lt;h4&gt;' + result.result[i].Name + '&lt;/h4&gt;

'+
                        '
&lt;h5&gt;Status: ' + result.result[i].Data + '&lt;/h5&gt;

'+
                        '

Updated: '  + result.result[i].LastUpdate +'

'+
                      '&lt;/div&gt;

'+
                    '&lt;/div&gt;

'+
                  '&lt;/div&gt;

';
        }
        
        document.getElementById("sensor-container").innerHTML = sensorInfo;
        
        //We retrieve the status of the security system, baically Disarmed, Armed Away, or Armed Home
        $.getJSON(domoticzURL + "json.htm?type=command&amp;param=getsecstatus", function(result){
          
          var homeSecurityStatus="";

          if (result.secstatus==0) homeSecurityStatus="Disarmed";
            else if (result.secstatus==1) homeSecurityStatus="Armed Home";
            else if (result.secstatus==2) homeSecurityStatus="Armed Away";
            else homeSecurityStatus="Unknown";
          
          document.getElementById("house-status-text").innerHTML = '
&lt;h5&gt;Home Security Status&lt;/h5&gt;

'+
                                                                    '
&lt;h2&gt;' + homeSecurityStatus    + '&lt;/h2&gt;

';  
          
          //Finally we set a timer to repeatedly poll the status of the sensors
          setTimeout(updateSensors(),1000);

        });
      });

    }

  });

&lt;/script&gt;

Note that the final getJSON call is nested within the callback function from the first getJSON call to get the sensor data. The domoticzURL variable could either be set to the IP number of your Raspberry + port 8080 or, if you upload the HTML file in the www root of your Domoticz server, you can set it to ”../” or ”./” dependant on if you put it in a subfolder or not. If you open the HTML file in a browser it looks something like this, still not very beautiful.

front-end_without_css

Styling the user interface with CSS

For the simplicity of this post, we will put all the styling in the HTML file. You can just as well put it in a separate CSS file and include it in the <head>. We add the following styling:

&lt;/script&gt;


&lt;style&gt;
      body{background-color: grey; padding: 0px 1% 0% 1%;}
      .container{padding: 0px 20px 20px 20px;border-radius: 5px; background-color: white; border-style: solid; border-color: grey; border-width: 2px;box-shadow: 0px 0px 10px white;margin-top: 2%}
      .row {border-bottom-style: solid; border-color: grey; border-width: 1px;}
      #yellington_logo {max-width: 100px; margin: 5px; }
      #top-bar{text-align: left; margin-bottom: 1px; padding: 0px;}
      #clock{float: right; margin: 5px;}

      .v-align {float: none; display: inline-block;vertical-align: middle;} /*class for vertically aligning elements in a row*/

      #house-image{font-size: 9em; vertical-align: middle; display: inline-block; margin-top: 10px; margin-bottom: 10px;}
      #house-status-text{text-align: left;}

      .sensor-outer-box {padding: 0px;}
      .sensor-box{padding: 0px;margin: 5px; background-color: white; box-shadow: 5px 5px 10px #888888; border-style: solid; border-color: grey; border-width: 1px; border-radius: 5px;}
      .sensor-icon{vertical-align: 80%; margin: 0px;}
      .sensor-data {display: inline-block; margin: 0px;}
      
    &lt;/style&gt;

   

&lt;div class="container"&gt;

The result is a user interface with responsive design

Thanks to Bootstrap, we automatically get a user interface with a responsive design that works just as well on a laptop and tablet as it does on a smartphone.

On a laptop:

front-end_domoticz_wide

On a smartphone:

front-end_design

You can play around with the style part of the file and the Bootstrap columns definitions to completely change the look and feel of the user interface to your liking.

Creating a beautiful front-end for Domoticz
Tagged on:

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *