使用 Plotly.js 和 Node.js 获取和绘制数据

Question

我正在尝试创建一个简单的网页，它从微控制器 (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>

Answer 1

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

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

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

这就是您的 NodeJS 应用程序的用武之地：使用 GET 方法创建一个简单的 NodeJS 服务器，return从您的设备读取最新数据。这样的东西足以 return 像数字这样的简单内容： 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();

您可以轻松地将代码调整为一个函数，该函数更新您的服务器 returns 的 NodeJS 变量，并且运行它每 X 毫秒循环一次。

这就是您的完整可视化系统。

Answer 2

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

示例设置如下：

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

nodejs服务器（N）从串口读取数据，管理MSP432（M）。服务器 (N) 还托管一个网络服务器（使用 expressjs) and opens a websocket with the connected webpage (W) to transfer new data. An easy to use websocket library is socket.io.

可以通过以下方式创建一个简单的 nodejs 网络服务器：

express --view=pug <your application name>

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

ajax也可以用来代替websockets

使用 Plotly.js 和 Node.js 获取和绘制数据

Using Plotly.js and Node.js to get and plot data

javascript

microcontroller

node.js

plotly

msp432