Implementing real-time Sensor Dashboard

Question

In my current project, we are trying to implement a dashboard that display different sensor values. The following shows functionality. Here, the functionality is -- humidity and temperature sensors periodically sending their values. Displaycontroller receives these values and send it to the dashboard for visualization.

For experiments purpose and exploring new technologies, We have been implementing the above four components using the following way:

TemperatureSensor and HumiditySensor in node.js that publishes the value using MQTT publisher.
DisplayController in Node-RED that can receive both temperature and humidity sensor values through MQTT subscriber in NODE-RED.
DashBoard in HTML and Javascript

Now, here is my question --- How can we connect DisplayController and DashBoard components? The problem could be complicated because Displaycontroller component is implemented in Node-RED and DashBoardis implemented in HTML and JavaScript. Is it possible to connect these components ? If yes, then How can we connect them?

For further clarity, I am adding Dashboard component code. The dashborad component polls continuously DisplayController component (written in Nodejs, not in Node-RED)

<html>
<head>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript"
    src="https://www.google.com/jsapi?autoload={
    'modules':[{
      'name':'visualization',
      'version':'1',
      'packages':['corechart']
    }]
  }">
</script>
</head>
<body>
    <div id="chart" style="width: 1500px; height: 700px"></div>
    <script>
    $(document).ready(function () {
        var maxDataPoints = 10;
        var chart = new google.visualization.LineChart($('#chart')[0]); 
        var data = google.visualization.arrayToDataTable([ 
            ['Time', 'Temperature','Humidity'],
            [getTime(), 0,0]
        ]); 
        var options = { 
            title: 'Temperature',
            hAxis: {title: 'Time', titleTextStyle: {color: '#333'}}, //Added hAxis and vAxis label
            vAxis: {title: 'TempValue',  minValue: 0, titleTextStyle: {color: '#333'}},
            curveType: 'function',
            animation: {
                duration: 1000,
                easing: 'in'
            },
            legend: {position: 'bottom'}
        };
        function addDataPoint(dataPoint) { 
            if (data.getNumberOfRows() > maxDataPoints) {
                data.removeRow(0);
            }
            data.addRow([getTime(), dataPoint.value,dataPoint.value1]);
            chart.draw(data, options); 
        }
        function getTime() {
            var d = new Date();
            return d.toLocaleTimeString();
        }
        function doPoll() { 
            $.getJSON('http://localhost:8686/temperatureData',
                        function (result) {
                        addDataPoint(result); 
                        setTimeout(doPoll,5000);
                    });
            }
        doPoll();
    });
    </script>
</body>
</html>

This problem has been solved now. I have used `dweet.io' for publishing data and `Freeboard' for visualization. — user-517752, Dec 26 '15 at 17:11

score 1 · Accepted Answer · answered Dec 26 '15 at 13:06

1

I've never used Node-RED, but looking briefly at the documentation, and node-RED offers an API, thus you have several options. The best ones, in my opinion would be

wrap your node-RED based application in a node websocket framework, something like SockJS would do. Then, consume this from the client side (aka. the dashboard)
Use node-RED directly from your HTML/Javascript client, it supports it

Both options above, presumes that you have done your node-RED in code, using the API, rather than using the visual workbench application. If the latter is the case, you need to figure out how to migrate it to use the API.

answered Dec 26 '15 at 13:06

JustDanyul

13,813
7
53
71

Thanks for the answer. I think option 1 could be possible Node-RED provides Websocket framework, then the socket can be consume at client side. But, I am not sure - how can I wrap `DisplayController' component in `Node-RED' and receive it from client side. For your reference, I am adding client code that polls `DisplayTempController' (written in `Nodejs`, not in Node-RED) continuously and shows data. – user-517752 Dec 26 '15 at 13:55
I have added `Dashboard' component code for your look. Perhaps, you can suggest me the equivalent websocket implementation of it??? Please let me know in case you have suggestions for me!!! – user-517752 Dec 26 '15 at 14:03

Implementing real-time Sensor Dashboard

1 Answers1