Display multiple sensor data from serial port with javascript and socket.io

Internet of Things IoT Frameworks 2 years ago

0 1 0 0 0 tuteeHUB earn credit +10 pts

5 Star Rating 1 Rating
_x000D_ _x000D_ i am new to Node.JS and Arduino. I have an Arduino setup with a temperature sensors on it. I am reading temperature values with Arduino. My serial monitor output like this: serial Monitor: 0.05 0.10 0.15 0.20 0.25 0.30 0.34 I send data from a Arduino to my terminal with serialport then displayed data on my webbrowser in chart form. I'm using the express and socket.io. here is the connection with the arduino and browser with index.js. And a index.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. }) The temperature data is recieved from the serialport Arduino is displayed in the index.html (webbrowser). index.html: Temperature Plot

Temperature Graph

Date:

everything works fine if there is only 1 sensor temperature on Arduino, but when I add another temperature sensor with the serial monitor results as below, make sensors data unable to appear in the form of chart in index.html, and the console browser also only displays the same data as the serial monitor. serial monitor with 2 temperature sensor (the results of reading between temperature sensors with each other are separated by spaces) 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 I have tried to solve this problem for almost a week, I have tried many ways to solve this problem but it didn't work, I do need your help arduino code: 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; } }

Posted on 16 Aug 2022, this text provides information on IoT Frameworks related to Internet of Things. Please note that while accuracy is prioritized, the data presented might not be entirely correct or up-to-date. This information is offered for general knowledge and informational purposes only, and should not be considered as a substitute for professional advice.

Take Quiz To Earn Credits!

Turn Your Knowledge into Earnings.

tuteehub_quiz

Answers (1)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer Best Answer 2 years ago
_x000D_ There are basically 2 questions in it. How to format the data and use the express server and send it to the front-end How to display more than one data-set in in the graph using chart.js For 1st The line in your code ... const parser = port.pipe(new Readline({delimiter: '\r\n'})); ... Actually captures each line of data. But since your output from arduino contains data in the same line, we will have to split() it at the space character. So to get an array of more than one temperature values, you can use tempArray = temp.split(" ");. This array then can be sent to the front-end. For 2nd After you have the array of the temperature values, you can send that array itself to the front end using // 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}); }); In the front-end, the dataset in the Chart object is an array. And if you want to add more than one datasets to the chart, you can add them simply by adding one more dataset object : .... 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, }, ] .... Now, inside the socket.on('temp', function(data){...}) you can push data like this : chart.dataset[i].data.push(data.temp[i]) // looping over i Edit To put in the data into the datasets, you can use a 'for' loop as follows : for (var i = 0; i < datasets.length; i++) { chart.datasets[i].data.push(data.temp[i]); }

No matter what stage you're at in your education or career, TuteeHub will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.

Important Internet of Things Links