实施实时传感器仪表板

Question

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

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

TemperatureSensor 和 node.js 中的 HumiditySensor 使用 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>

Answer 1

我从未使用过 Node-RED，但简要查看了文档，node-RED 提供了 API，因此您有多种选择。我认为最好的是

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

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

实施实时传感器仪表板

Implementing real-time Sensor Dashboard

javascript

node.js

iot

node-red