0

我正在尝试创建一个简单的网页，该网页从微控制器（MSP432）获取数据并将其实时绘制在图表上。

我进行了研究，目前正在使用 plotly.js 和 html 来创建图表。我目前有一个用随机数据实时更新自己的图表。

我附上了下面页面的代码。

我现在想将数据流式传输进来，我查看了 node.js，尤其是串行端口库。我想我已经安装了串口 npm。

我感到困惑的部分是 node.js 代码如何适合我的 html/plotlyjs 索引文件？

我以前从未使用过javascript。这是我第一次使用nodejs，特别是我很困惑。我应该把它放在函数的<script>标签内吗？getX() getY()

还有谁知道我该如何启动nodejs代码？我有点迷路了。

这是我的 index.html 文件：

     <!DOCTYPE html>

     <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <script src="plotly.min.js"></script>
         <meta charset="utf-8" />
         <title>My Plot Page</title>
    </head>
    <body>
         <p>Plotly plot:</p>
         <div id="chart1"></div>
         <script>
            var counter = 0;
            function getX() {
             counter++;
             return counter;
            }
            function getY() {
             return Math.random();
            }
            Plotly.plot('chart1', [{
             x: [getX()],
             y: [getY()],
             type: 'line'
            }]);
            setInterval(function () {
              Plotly.extendTraces('chart1', { x: [[getX()]] , y: [[getY()]] }, [0])
    }, 200);
         </script>
    </body>
    </html>
4

2 回答 2

2

Node.js 是一个开源服务器环境。它用于托管网络服务器，不能在网络浏览器中运行。它可用于读取串口数据并将其发送给连接的客户端。

示例设置如下：

---------------------------------------------------------------------------
| MSP432              node.js server                  web page in browser |
|   M <==================>  N  <===========================>  W           |
|           serial                       websockets                       |
---------------------------------------------------------------------------

nodejs服务器（N）从串口读取数据并管理MSP432（M）。服务器 (N) 还托管一个网络服务器（使用expressjs）并打开一个带有连接网页 (W) 的 websocket 以传输新数据。一个易于使用的 websocket 库是socket.io。

可以通过执行以下操作创建一个简单的 nodejs 网络服务器：

express --view=pug <your application name>

请注意，ejs也可以用来代替pug

ajax 也可以用来代替 websockets

于 2019-07-09T08:13:28.333 回答
0

根据经验（我使用数据可视化系统），我可以告诉你 Plotly 可能不是绘制实时数据的最简单方法。它可以肯定地做到这一点，但它所做的是为每个新点重新渲染整个图，考虑到数据结构不是最有效的方法，并且在更新时看起来有点不自然。

在您的用例中，我会推荐这个插件：http: //smoothiecharts.org/它是轻量级、免费且“流畅”的。阅读他们网站上的“10 分钟教程”，您就可以开始了。

总而言之，对于每个 Smoothiecharts 时间序列，您希望使用 append() 方法添加每个新数据样本。您可以使用 setTimeInterval() JavaScript 方法调用它，以从... URL 获取值（发出 AJAX GET 请求）。您想要创建一个始终从传感器返回最新读数的 URL，为此您需要创建一个本地网络服务器。

这就是您的 NodeJS 应用程序适合的地方：使用 GET 方法创建一个简单的 NodeJS 服务器，该方法从您的设备返回最新读数。像这样的东西足以返回像数字这样的简单内容：https ://www.tutorialspoint.com/nodejs/nodejs_first_application ，您可以先打印一个随机数并对其进行处理，直到它可以工作后再继续。

不过，这里最困难的部分是将微控制器的读数输入 NodeJS 应用程序。我不知道 MSP432 的细节或您如何连接到它，但通常您可以编写一个 C 脚本，从中读取最新值并将其打印到控制台。

如果您设法做到这一点，您可以使用以下 NodeJS 代码来执行您的 C 程序并读取其控制台输出：

var exec = require('child_process').execFile;
var path = 'c:\yourprogram.exe';
var fun = function() {
   exec(path, function(err, data) {  
        console.log(err)
        console.log(data.toString());                       
    });
}
fun();

您可以轻松地将该代码调整为更新服务器返回的 NodeJS 变量的函数，并每隔 X 毫秒在循环中运行它。

那将是您的完整可视化系统。

于 2019-07-08T22:46:07.127 回答