Question

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

https://github.com/darkship/ImageGallery 出于实验目的和探索新技术，我们使用以下方式实现上述四个组件：

TemperatureSensor

HumiditySensor和node.js。

DisplayController

Node-RED

NODE-RED

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，因此你有几个选择。在我看来，最好的是

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

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

实施实时传感器仪表板

1 个答案: