实施实时传感器仪表板答案

【问题标题】：Implementing real-time Sensor Dashboard实施实时传感器仪表板
【发布时间】：2015-12-26 12:48:51
【问题描述】：

在我当前的项目中，我们正在尝试实现一个显示不同传感器值的仪表板。下面显示功能。这里的功能是——humidity 和temperature 传感器定期发送它们的值。 Displaycontroller 接收这些值并将其发送到仪表板进行可视化。

出于实验目的和探索新技术，我们一直在使用以下方式实现上述四个组件：

TemperatureSensor 和 HumiditySensor 中的 node.js 使用 MQTT 发布者发布值。
DisplayController in Node-RED 可以通过NODE-RED 中的MQTT 订阅者接收温度和湿度传感器值。
DashBoard 在HTML 和Javascript 中

现在，这是我的问题 --- 我们如何连接 DisplayController 和 DashBoard 组件？问题可能很复杂，因为Displaycontroller 组件在Node-RED 中实现，而DashBoard 在HTML 和JavaScript 中实现。是否可以连接这些组件？如果是，那么我们如何连接它们？

为了更清楚起见，我添加了Dashboard 组件代码。 dashborad 组件不断轮询DisplayController 组件（用Nodejs 编写，不是在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>

【问题讨论】：

这个问题现在已经解决了。我使用dweet.io' for publishing data and Freeboard' 进行可视化。

标签： javascript node.js iot node-red

【解决方案1】：

我从未使用过 Node-RED，但简单地看一下文档，node-RED 提供了一个 API，因此您有多种选择。在我看来，最好的应该是

将基于 node-RED 的应用程序包装在 node websocket 框架中，就像 SockJS 一样。然后，从客户端（即仪表板）使用它
直接从您的 HTML/Javascript 客户端使用 node-RED，它支持它

以上两个选项均假定您已使用 API 而不是使用可视化工作台应用程序在代码中完成了 node-RED。如果是后者，您需要弄清楚如何迁移它以使用 API。

【讨论】：

感谢您的回答。我认为选项 1 可能 Node-RED 提供 Websocket 框架，然后可以在客户端使用套接字。但是，我不确定 - 我如何包装 DisplayController' component in Node-RED' 并从客户端接收它。供您参考，我正在添加不断轮询DisplayTempController' (written in Nodejs` 的客户端代码，而不是在Node-RED 中）并显示数据。
我已为您的外观添加了“仪表板”组件代码。也许，你可以建议我等效的 websocket 实现吗？？？如果您对我有任何建议，请告诉我！！！