arduino node.js chart.js

A rduino merupakan board mikrokontroller yang banyak digunakan untuk membuat project-project elektronika yang menggunakan sensor-sensor dan atau aktuator. Sedangkan software untuk memprogram Arduino itu sendiri adalah Arduino IDE (Integrated Development Environment).

Di dalam Arduino IDE terdapat fitur serial monitor yang berguna untuk mengirim dan menerima data serial melalui USB port. Arduino bisa mengirimkan data ke komputer atau sebaliknya komputer juga bisa mengirimkan data ke Arduino.

Dalam tutorial ini, saya akan mengkomunikasikan Arduino sebagai server dan web browser sebagai client yang merequest data dari Arduino untuk divisualisasikan ke dalam grafik atau chart di halaman web. Metode komunikasi yang saya gunakan adalah Websocket menggunakan Socket.IO dan chart untuk visualisasi datanya menggunakan Chart.js. Semuanya dalam platform node.js.

Jadi, untuk mempraktikkan tutorial ini komputer kita harus sudah terinstall Arduino IDE dan Node.js. Proses instalasi kedua software tersebut sangatlah mudah tinggal Next Next aja kok hehe...

Dan sudah banyak orang baik di dunia maya yang menjelaskan cara instalasinya jadi enggak perlu saya jelasin di sini. Baiklah, langsung saja kita mulai praktik. Saya bagi menjadi 3 pokok bahasan, yaitu koding di Arduino IDE, Instalasi Package dan Koding di node.js.

1. Koding di Arduino IDE

Untuk menyederhanakan pembahasan, saya hanya akan mengirimkan data angka random dari Arduino ke komputer melalui perintah Serial.println(). Data angka random inilah yang nantinya akan saya visualisasikan ke dalam chart.

Berikut langkah-langkahnya:

  • Hubungkan Arduino Uno (boleh juga Mega, Nano atau arduino yang lainnya) ke komputer melalui port USB dan pastikan terbaca di device manager.

    arduino uno
    device manager

  • Buka Arduino IDE dan copy paste sketch program di bawah ini: 

    //this variable will hold a random number generated by the random() function
long randomNumber;

//Set up - this is where you get things "set-up". It will only run once
void setup() {
Serial.begin(9600);

//Let's make it more random
randomSeed(42);   

}//close setup

void loop() {
//generate a random number
randomNumber = random(1,20);

//display the random number on the serial monitor
Serial.println(randomNumber);

delay(5000);
}

    Save program kemudian upload.

    sketch random number

    done uploading

  • Buka Serial Monitor, maka setiap 5 detik Arduino mengirimkan data angka random

    serial monitor


2. Instalasi Package dari NPM

Pastikan node.js sudah terinstall di komputer. Di sini saya menggunakan sistem operasi Windows 10. Buka command prompt kemudian ketik node -v kemudian enter.

Jika node.js sudah terinstal maka akan tampil versi dari node.js yang terinstal seperti berikut:

node js version

Setelah node.js sudah dipastikan terinstal, selanjutnya saya akan menginstal package-package yang diperlukan di project ini yaitu: express, serialport dan socket.io.

Langkah-langkah instalasinya adalah sebagai berikut:

  • Buat project folder baru di direktori yang diinginkan, di tutorial ini saya akan buat folder baru "arduino_nodejs" di dalam direktori E:\triyonos\

    project folder

  • Buka command prompt dan arahkan ke direktori E:\triyonos\arduino_nodejs yang baru saja dibuat

    cmd nodejs

  • Inisialisasi project node.js melalui perintah npm init kemudian isikan informasi project sesuai kebutuhan seperti contoh berikut:

    npm init

  • Install express melalui perintah npm install express --save

    install express

  • Install serialport melalui perintah npm install serialport --save

    install serialport

  • Install socket.io melalui perintah npm install socket.io --save

    install socket.io

Setelah langkah-langkah instalasi di atas selesai dilakukan, maka di dalam folder arduino_nodejs akan terbentuk folder node_modules. Folder ini berisikan folder-folder package hasil instalasi ketiga package di atas.

Selain itu jika kita buka kembali file package.json maka kita akan melihat di object dependencies terdapat 3 object package yang sudah kita install beserta versinya. 

{
"name": "arduino_nodejs",
"version": "1.0.0",
"description": "serial print arduino to chart node.js",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "erik",
"license": "ISC",
"dependencies": {
"express": "^4.17.2",
"serialport": "^9.2.8",
"socket.io": "^4.4.0"
}
}

3. Koding node.js

Buat folder baru "public" dan file baru "index.js" di dalam direktori E:\triyonos\arduino_nodejs\

index.js

Edit file index.js kemudian copy paste kode di bawah ini: 

const express = require('express');

const app = express();

const server = app.listen(3000, '0.0.0.0', function() { //Start the server, listening on port 4000.
console.log("Listening to requests on port 3000 ...");
})

const io = require("socket.io")(server, {
allowEIO3: true // false by default
});

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

const SerialPort = require('serialport');
const Readline = SerialPort.parsers.Readline;
const port = new SerialPort('COM8'); //Connect serial port to port COM8. Because my Arduino Board is connected on port COM8. 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();
var curmonth = parseInt(today.getMonth())+1;
io.sockets.emit('temp', {date: today.getDate()+"-"+curmonth+"-"+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.
})

Buat file baru "index.html" di dalam direktori E:\triyonos\arduino_nodejs\public

index.html
index.html

Edit file index.html kemudian copy paste kode di bawah ini: 

<!DOCTYPE html>
<html>
<head>
<title>Serial Plot</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<h1>Random Value 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://localhost:3000'); //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: "Random Value",
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 != 20) { //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>

Running Program

Setelah 3 bahasan di atas selesai, kini saatnya kita running programnya. Buka kembali command prompt dan arahkan ke direktori E:\triyonos\arduino_nodejs.

Ketikkan perintah node index kemudian tekan enter.

running_program

Jika tidak ada error, maka command prompt akan menampilkan angka random dari Serial.println() Arduino Uno tiap 5 detik sebagai berikut:

running_program

Di saat yang lain saya akses URL localhost:3000 dari web browser dan tampilannya seperti berikut:

running chart.js

Tiap 5 detik sekali chart.js melakukan push data Serial.println() Arduino melalui Websocket Socket.io.

running chart.js