Dashboard Tutorial

In this tutorial you will see how to develop an HTML dashboard for your Oficloud IoT projects. We will make use of the Oficloud Web Javascript API to obtain data published to a channel. We will also make use of a set of open source HTML components provided by creative-tim.com

STEPS

1. Download project
You can download here a project containing temperature, humidity and rain state data loggers and charts for temperature and humidity.
You also have an example implementing more advanced statistics for visualizing your time series data and then configure parameters. You need to have completed the tutorial for advanced statistics to make use of this advanced dashboard. Download it and set the parameters to adjust it to your project.

2. Configure your server and upload the code
You should use a hosting service or a server for your dashboard. There are no special requisites for it. All code is HTML and Javascript. No server side scripting or databases are required. You can even execute your dashboard in a browser without publishing it to a server.
Indeed, the idea of using Oficloud is that your data will not be available to any server but only to your local client.

3. [OPTIONAL] Add data loggers
Edit the /examples/iot-simple.html file in the web template to add real time data loggers to your page (or edit the existing ones). First add the html code:

<div class="card card-stats">
    <div class="card-header card-header-danger card-header-icon">
        <div class="card-icon">
        <i class="material-icons  mdi mdi-thermometer">thermometer</i>
        </div>
        <h3 class="card-title">Temperature</p>
        <h3 class="card-title"><span  id="jjtemperature">49</span>º 
        <small>C</small>
        </h3>
    </div>
    <div class="card-footer">
        <div class="stats">
        <i class="material-icons">date_range</i><span id="temp-date">4 minutes ago</span>
        </div>
    </div>
</div>
                            
The result will be something like this:


Add so many data loggers as you need to visualize your data.

4. [IF YOU FOLLOWED STEP 3] Add Real Time Charts
You can also add temporal series charts that will be updated every time new data is available. The HTML code for a temperature chart would be like this:

<div class="card card-chart">
<div class="card-header card-header-danger">
    <div class="ct-chart" id="temperatureChart"></div>
</div>
<div class="card-body">
    <h4 class="card-title">Temperature Chart</h4>
</div>
<div class="card-footer">
    <div class="stats">
    <i class="material-icons">access_time</i> updated 4 minutes ago
    </div>
</div>
</div>
                            

We will use the Chartist API for drawing the charts. The code for initializing the chart will be something like this:

var temperatureChart=null;

demo = {

  initDashboardPageCharts2: function() {
    
      datatemperatureChart = {
        labels: [],
        series: [
          []
        ]
      };

      optionstemperatureChart = {
        lineSmooth: Chartist.Interpolation.cardinal({
          tension: 0
        }),
        low: 0,
        high: 55, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
        chartPadding: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
      }

      temperatureChart = new Chartist.Line('#temperatureChart', datatemperatureChart, optionstemperatureChart);

      md.startAnimationForLineChart(temperatureChart);
    }
}

$(document).ready(function() {
    demo.initDashboardPageCharts2();                                    
});

                                

The result will be like this:

5. [IF YOU FOLLOWED STEPS 3 AND 4] Add Oficloud code
The code for initializing an Oficlod session, connecting to a channel, polling data, and updating the data log and chart will be something like this:
                                    
var oficloud = new oficloud_api();

oficloud.init();


oficloud.login("user@myemail.com","MYPASSWORD",function (res){
    if(res.res!="ok")
    {
        console.log("login error: "+res.error);
        return;
    }

    function onmsg(msg)
    {
        
        try{
            msg=JSON.parse(msg);
        }
        catch(e)
        {
            console.log("invalid msg: "+msg);
            return;
        }
        
        //console.log("msg: "+msg);
        if( typeof msg.type === "undefined" || msg.type=="sensor")
        {
            var sd="hh:mm";
            if(msg.date)
            {
                var d=new Date(msg.date);
                var minutes=d.getMinutes();
                if(minutes<10)
                var sd=""+d.getHours()+":0"+minutes;
                else
                var sd=""+d.getHours()+":"+minutes;
                console.log("sd: "+sd);
            }
            document.getElementById("jjtemperature").innerHTML=msg.temperature;   
            

            if(datatemperatureChart.labels.length>=6)
            {
                datatemperatureChart.labels.shift();
                datatemperatureChart.series[0].shift();
            }
            datatemperatureChart.labels.push(sd);
            datatemperatureChart.series[0].push(msg.temperature);

            temperatureChart.update(datatemperatureChart);
        
        }
    }

    oficloud.open_channel("p",onmsg,function(res){
            
    });
}