问题：

使用javascript和socket从串行端口显示多个传感器数据。木卫一

万高洁

2023-03-14

我是新来的节点。JS和Arduino。我有一个带有温度传感器的Arduino设置。我正在读取Arduino的温度值。我的串行监视器输出如下：

串行监视器：

0.05
0.10
0.15
0.20
0.25
0.30
0.34

我用serialport将数据从Arduino发送到我的终端，然后以图表的形式在我的webbrowser上显示数据。我在用快车和插座。木卫一。这是与arduino和带有索引的浏览器的连接。js。和一个索引。html

index.js：


    var express = require('express');

    var app = express();
    var http = require('http').Server(app);
    var server = http.listen(4000, "0.0.0.0", () => { //Start the server, listening on port 4000.
        console.log("Listening to requests on port 4000...");
    })

    var io = require('socket.io')(server); //Bind socket.io to our express server.

    app.use(express.static('public')); //Send index.html page on GET /

    const SerialPort = require('serialport');
    const Readline = SerialPort.parsers.Readline;
    const port = new SerialPort('/dev/ttyUSB0'); //Connect serial port to port COM3. Because my Arduino Board is connected on port COM3. See yours on Arduino IDE -> Tools -> Port
    const parser = port.pipe(new Readline({delimiter: '\r\n'})); //Read the line only when new line comes.
    parser.on('data', (temp) => { //Read data
        console.log(temp);
        var today = new Date();
        io.sockets.emit('temp', {date: today.getDate()+"-"+today.getMonth()+1+"-"+today.getFullYear(), time: (today.getHours())+":"+(today.getMinutes()), temp:temp}); //emit the datd i.e. {date, time, temp} to all the connected clients.
    });

    io.on('connection', (socket) => {
        console.log("Someone connected."); //show a log as a new client connects.
    })

从serialport Arduino接收的温度数据显示在索引中。html（网络浏览器）。

指数html:

<!DOCTYPE html>
<html>
    <head>
        <title>Temperature Plot</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>Temperature Graph</h1>
        <h4>Date: <span id="date"></span></h4>
        <div class="chart-container" style="position: relative; width:75vw; margin: auto;">
            <canvas id="myChart"></canvas>
        </div>
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
        <script>
            var socket = io.connect('http://192.168.1.3:4000'); //connect to server
            var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'line',
                // The data for our dataset
                data: {
                labels: [],
                datasets: [{
                    label: "Temperature",
                    borderColor: "#FF5733",
                    data: [],
                    fill: false,
                    pointStyle: 'circle',
                    backgroundColor: '#3498DB',
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    lineTension: 0,
                }]
                },
                // Configuration options go here
                options: {}

            });
            socket.on('temp', function(data) { //As a temp data is received
                console.log(data.temp);
                document.getElementById('date').innerHTML = data.date; //update the date
                if(chart.data.labels.length != 15) { //If we have less than 15 data points in the graph
                    chart.data.labels.push(data.time);  //Add time in x-asix
                    chart.data.datasets.forEach((dataset) => {
                        dataset.data.push(data.temp); //Add temp in y-axis
                    });
                }
                else { //If there are already 15 data points in the graph.
                    chart.data.labels.shift(); //Remove first time data
                    chart.data.labels.push(data.time); //Insert latest time data
                    chart.data.datasets.forEach((dataset) => {
                        dataset.data.shift(); //Remove first temp data
                        dataset.data.push(data.temp); //Insert latest temp data
                    });
                }
                chart.update(); //Update the graph.
            });
        </script>
    </body>
    <style>
        h1 {
            text-align: center;
            font-family: 'Lato', sans-serif;
        }
        h4 {
            text-align: center;
            font-family: 'Lato', sans-serif;
        }
        p {
            text-align: center;
            font-family: 'Lato', sans-serif;
        }
    </style>
</html>

如果Arduino上只有一个传感器温度，一切正常，但当我添加另一个温度传感器时，串行监视器结果如下，使传感器数据无法以图表形式显示在索引中。html，控制台浏览器也仅显示与串行监视器相同的数据。

带2个温度传感器的串行监视器（温度传感器之间的读数结果用空格分隔）

0.05 1.00
0.10 1.00
0.15 0.99
0.20 0.98
0.25 0.97
0.30 0.96
0.34 0.94

我已经尝试解决这个问题将近一个星期了，我尝试了很多方法来解决这个问题，但都没有成功，我确实需要你的帮助

arduino代码：

double x; //I simulate 2 temperature sensor values
    void setup() {
      Serial.begin(115200);
      x = 0;
    }

    void loop() {  
      Serial.print(sin(x));
      Serial.print(" ");
      Serial.println(cos(x));
      delay(50);

      // seting batasan input fungsi sinus
      x += 0.05;
      if(x>= 2*3.14){
        x = 0;
      }  
    }

共有1个答案

凌通

2023-03-14

基本上有两个问题。

如何格式化数据、使用express服务器并将其发送到前端
如何使用图表在图形中显示多个数据集。js

代码中的行

...
const parser = port.pipe(new Readline({delimiter: '\r\n'}));
...

实际捕获每行数据。但由于arduino的输出包含同一行中的数据，因此我们必须在空格处拆分（）。因此，要获得包含多个温度值的数组，可以使用tempArray=temp。拆分（“”）。然后可以将此阵列发送到前端。

获得温度值数组后，可以使用

// Notice I have replaced `temp` with `tempArray`
io.sockets.emit('temp', {date:today.getDate()+"-"+today.getMonth()+1+"-"+today.getFullYear(), time: (today.getHours())+":"+(today.getMinutes()), temp:tempArray}); });

在前端，图表对象中的数据集是一个数组。如果要向图表中添加多个数据集，只需添加多个数据集对象即可：

....
datasets: [{
           label: "Sensor1",
           borderColor: "#FF5733",
           data: [],
           fill: false,
           pointStyle: 'circle',
           backgroundColor: '#3498DB',
           pointRadius: 5,
           pointHoverRadius: 7,
           lineTension: 0,
          },
....
....

          {
           label: "Sensor2",
           borderColor: "#FFFF33",
           data: [],
           fill: false,
           pointStyle: 'circle',
           backgroundColor: '#34FFDB',
           pointRadius: 5,
           pointHoverRadius: 7,
           lineTension: 0,
          },
]
....

现在，在套接字中。on（'temp'，函数（数据）{…}）您可以按如下方式推送数据：

chart.dataset[i].data.push（data.temp[i]）//循环遍历i

要将数据放入数据集，可以使用for循环，如下所示：

for (var i = 0; i < datasets.length; i++) {
    chart.datasets[i].data.push(data.temp[i]);
}

类似资料：

使用MERN stack和socket进行私人聊天。木卫一

我正在使用MERN stack和socket开发一个私人聊天应用程序。伊奥。我能够成功地向特定用户发送私人消息，但无法包含要向两个用户显示的消息发送者。客户端服务器我需要帮助来包含发件人以及要显示给两个用户的消息。我还想正确附加消息，因为上面的代码覆盖了之前的消息。
我正在使用redis和socket与laravel echo合作。木卫一。它在显示和专用通道中失败

我正在使用redis和socket与laravel echo合作。木卫一。它在显示和专用通道中失败我将此软件包用于我的服务器laravel echo服务器当我使用公共频道时，一切正常，但当我使用私人频道时，以下错误记录在laravel echo服务器中下面是我的应用程序。js，bootstrap。js和laravel echo服务器。json bootstrap.js 拉威尔回声服务器。js
多个android开发者使用Fabric的Crashlytics。木卫一

我们是一个开发团队，刚刚开始使用Crashlytics。我们大多数人都有用于测试的完全相同的设备型号。当崩溃发生时，我们如何识别它与哪个设备相关。换句话说，我们如何知道崩溃发生在开发人员a或B的设备上。
从InputStream读取传感器数据

在我的应用程序中，我通过蓝牙接收传感器数据，并希望以高效的方式读取数据。数据流如下所示：
无法使用laravel echo服务器、redis和socket对laravel专用通道进行身份验证。木卫一

我使用Laravel回声服务器，redis和socket.io聊天消息。我正在用电视广播这个事件。这是一个私人频道，其方法为，如下所示：我的看起来像：下面是我的：用于侦听事件的jQuery：这是来自：它显示以下错误：
与FastAPI/FastAPI socketio和JavaScript/socket的双向通信。木卫一。js-->连接错误

我制作了一个小演示，在FLASK中尝试通过WebSocket进行双向通信，效果不错。现在，我正尝试对无法连接的FastAPI（和FastAPI socketio而不是flask socketio）执行相同的设置。有人知道我做错了什么吗？先谢谢你。终端错误：信息：127.0.0.1:50117-"GET/HTTP/1.1"200 OK 信息：127.0.0.1:50117-"GET/socket

使用javascript和socket从串行端口显示多个传感器数据。木卫一

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档