Sevo Controller Web Node.js

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

arduino uno

2. Motor Servo

servo

3. Kabel Jumper

kabel jumper

4. Kabel Power

kabel power arduino

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.

arduino uno
device manager

Buka Arduino IDE kemudian arahkan ke File Example Firmata StandardFirmataPlus

standard firmata plus
sketch standard firmata plus

Upload Program StandardFirmataPlus ke Arduino Uno

done uploading

Setelah berhasil upload sketch rangkai Arduino Uno, Servo dan kabel jumper seperti wiring diagram berikut:

wiring diagram arduino servo
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\

    project folder

  • Buat file baru di dalam direktori E:\triyonos\j5_servo_web\, dengan nama file package.json

    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"
  }
}
    package.json

  • Buka command prompt dan arahkan ke direktori E:\triyonos\j5_servo_web kemudian ketikkan perintah npm install

    cmd nodejs

    Kemudian tekan Enter dan tunggu sampai proses instalasi selesai.

    npm install

    Setelah selesai maka akan terbentuk folder node_modules dan file package-lock.json

    npm install

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:

servo controller web

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:

    struktur file

  • 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.

arduino servo pc

Buka kembali command prompt dan arahkan ke direktori E:\triyonos\j5_servo_web.

Ketikkan perintah node server kemudian tekan enter.

arduino servo pc

Buka browser mozilla firefox, kemudian akses URL localhost:3000 pada address bar.

servo controller web

Kini websocket server dan websocket client sudah terhubung.

servo controller web

Berikut Video demonya: