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

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

示例设置如下：

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

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

可以通过以下操作创建一个简单的nodejs Web服务器：

express --view=pug <your application name>

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

ajax也可以代替websockets

Answer 2

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

在您的用例中，我建议使用此插件：http://smoothiecharts.org/它轻巧，免费且“流畅”。阅读他们网站上的“ 10分钟教程”，您就很好了。

总结一下，您想对每个圆滑的图表时间序列使用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毫秒循环运行一次。

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

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

2 个答案: