Di tutorial kali ini saya akan mempraktikan cara mengendalikan motor servo Arduino dari suatu halaman web menggunakan platform node.js dan Johnny-Five sebagai javascript Robotics - IOT platform.
Komponen elektronik yang saya pakai dalam tutorial ini adalah sebagai berikut:
1. Microcontroller Arduino Uno
2. Motor Servo
3. Kabel Jumper
4. Kabel Power
Pembahasan akan saya bagi menjadi 3 bagian yaitu: sketch program & rangkaian elektronik, instalasi package yang dibutuhkan di node.js dan pembuatan aplikasi Servo Controller Web.
Berikut uraiannya:
1. Upload Sketch Program & Rangkaian Elektronik
Agar dapat menggunakan Johnny-Five pada Arduino, saya perlu mengupload sketch program StandardFirmataPlus yang merupakan sketch Example dari Arduino IDE.
Buka Arduino IDE kemudian arahkan ke File Example Firmata StandardFirmataPlus
Upload Program StandardFirmataPlus ke Arduino Uno
Setelah berhasil upload sketch rangkai Arduino Uno, Servo dan kabel jumper seperti wiring diagram berikut:
Servo | Arduino |
---|---|
VCC | 5V |
GND | GND |
Data | Pin 10 |
2. Instalasi Package di Node.js
Package-package yang akan saya install yaitu: express, johnny-five dan ws (websocket). Langkah-langkah instalasi ketiga package tersebut adalah sebagai berikut:
-
Buat project folder baru di direktori yang diinginkan, di tutorial ini saya akan buat folder baru "j5_servo_web" di dalam direktori E:\triyonos\
-
Buat file baru di dalam direktori E:\triyonos\j5_servo_web\, dengan nama file package.json
-
Edit file package.json menggunakan notepad++ kemudian copy paste kode di bawah ini:
{ "name": "j5_servo_web", "version": "1.0.0", "description": "johnny five servo web", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "erik", "license": "ISC", "dependencies": { "express": "^4.17.2", "johnny-five": "^2.1.0", "ws": "^8.4.0" } }
-
Buka command prompt dan arahkan ke direktori E:\triyonos\j5_servo_web kemudian ketikkan perintah
npm install
Kemudian tekan Enter dan tunggu sampai proses instalasi selesai.
Setelah selesai maka akan terbentuk folder node_modules dan file package-lock.json
3. Servo Controller Web
Berikutnya saya akan membuat aplikasi web sebagai client side yang berfungsi untuk mengontrol derajat perputaran motor servo dari rangkaian arduino dan motor servo di atas. Tampilan aplikasinya sebagai berikut:
Koding dari server side dan client side di dalam node.js adalah sebagai berikut:
-
Buat file baru dengan nama server.js di dalam direktori E:\triyonos\j5_servo_web kemudian edit file server.js dengan meng-copy paste kode di bawah ini:
const express = require('express'); const app = express(); const port = 3000; const {Board, Servo} = require("johnny-five"); const board = new Board({ port: "COM8" }); const WebSocket = require('ws'); const wss = new WebSocket.Server({port:8080}); app.listen(port, () => {console.log("Listening to requests on port 3000 ...")}); app.use(express.static('public')); board.on("ready", () => { const servo = new Servo(10); wss.on('connection', function(ws, req) { console.log('connected'); ws.on('message', function(data){ console.log(data.toString()); servo.to(data.toString()); }); }); });
-
Buat folder baru "public" di dalam direktori E:\triyonos\j5_servo_web kemudian buat file index.html di dalam folder "public". Struktur file project ini adalah sbb:
-
Edit file index.html dengan meng-copy paste kode di bawah ini:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Servo Controller</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> body { padding-top: 10rem; } .starter-template { padding: 3rem 1.5rem; text-align: center; } </style> </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">Servo Web Controller</a> </nav> <main role="main" class="container"> <div class="starter-template"> <button type="button" id="btn0" class="btn btn-success" style="width: 100px;">0</button> <button type="button" id="btn180" class="btn btn-danger" style="width: 100px;">180</button> <div style="margin-top: 1em"> <h3>Degrees Slider</h3> 0 <input id="degree" type="range" min="0" max="180" value=""/> 180 </div> <p id="result"></p> </div> </main> <script type="text/javascript"> window.onload = function(){ var socket = new WebSocket('ws://localhost:8080'); var b1 = document.getElementById('btn0'); var b2 = document.getElementById('btn180'); var s = document.getElementById("degree"); var res = document.getElementById("result"); b1.addEventListener('click', function() { socket.send(0); s.value = 0; res.innerHTML = 0; }); b2.addEventListener('click', function() { socket.send(180); s.value = 180; res.innerHTML = 180; }); s.addEventListener("input", function() { res.innerHTML = s.value; socket.send(s.value); }, false); } </script> </body> </html>
Running Program
Hubungkan Arduino Uno dengan komputer melalui port USB. Di PC saya Arduino Uno dan PC berkomunikasi di serial port COM8.
Buka kembali command prompt dan arahkan ke direktori E:\triyonos\j5_servo_web.
Ketikkan perintah node server
kemudian tekan enter.
Buka browser mozilla firefox, kemudian akses URL localhost:3000 pada address bar.
Kini websocket server dan websocket client sudah terhubung.
Berikut Video demonya: