Sevo Controller Web Node.js

Berawal dari iseng-iseng browsing tentang cara mengontrol WS2812 LED Strip di dalam platfom johnny-five ternyata saya menemukan tutorial yang bagus ini https://chrisruppel.com/blog/arduino-johnny-five-neopixel. Di dalam tulisannya dia merekomendasikan link ini https://github.com/ajfisher/node-pixel sebagai referensi.

Setelah membaca secara seksama kedua link tersebut, naluri saya sebagai seorang programmer mulai tergelitik 😜 untuk membuat aplikasi web sederhana yang bisa mengontrol intensitas warna Merah, Hijau dan Biru alias RGB alias Red, Green, Blue dari LED Strip WS2812 melalui halaman web. Komponen-komponen elektrikal yang kita butuhkan di tutorial ini antara lain:

1. Microcontroller Arduino Uno

arduino uno

2. Kabel Power

kabel power

3. WS2812 LED Strip 5 Volt (potong hanya 12 LED saja)

ws2812 led strip

Aplikasi RGB controller LED Strip WS2812 ini terdiri dari 3 input range slider masing-masing untuk warna Merah, Hijau dan Biru. Dengan nilai range minimal 0 dan maksimal 255.

rgb slider input

1. Proses Instalasi Package Node.js

Buat folder baru dengan nama "j5_ws2812" di dalam direktori E:\triyonos sebagai folder kerja project ini.

installation guide

Buka command prompt kemudian arahkan ke direktori E:\triyonos\j5_ws2812

cmd

Ketikkan perintah npm-init, Enter dan kemudian isikan informasi yang dibutuhkan mengenai project ini sekaligus menggenerate file package.json.

npm init

Selanjutnya kita ikuti langkah-langkah proses instalasi package yang dibutuhkan seperti pada halaman github ajfisher https://github.com/ajfisher/node-pixel.

installation guide

Instalasi package melalui npm.

installation guide

Colokkan Arduino Uno ke komputer melalui port USB dan pastikan port COM Arduino terdeteksi di device manager. Di komputer saya Arduino Uno menggunakan port COM8.

arduino uno
device manager

Selanjutnya kita lihat lagi installation guide dari halaman github tadi.

interchange install arduino uno

Buka kembali command prompt kemudian ketikkan perintah di atas, kemudian Enter.

interchange install arduino uno

Jika tidak ada pesan error, berarti sampai di sini proses instalasi package node-pixel dan upload node-pixel firmata ke Arduino Uno selesai dilakukan.

Install Package Johnny-five, Express.js dan WS (Websocket)
  • npm install johnny-five --save npm install johnny-five
  • npm install express --save npm install express
  • npm install ws --save npm install ws

Proses instalasi semua package melalui npm selesai dilakukan. Folder "j5_ws2812" akan terdapat folder node_modules, package.json dan package-lock.json.

package.json

Jika kita buka file package.json di notepad++ maka akan terlihat sebagai berikut:

package.json

2. Pembuatan Aplikasi Web WS2812 RGB Controller

Rangkaikan Arduino Uno dan LED Strip WS2912 seperti Wire diagram berikut:

ws2812_rgb_controller_app
WS2812 Arduino
+5V 5V
GND GND
DI Pin 6

Tampilan aplikasi WS2812 RGB Controller adalah sebagai berikut:

ws2812_rgb_controller_app

  • Buat file baru dengan nama server.js di dalam direktori E:\triyonos\j5_ws2812 kemudian edit file server.js dengan meng-copy paste kode di bawah ini: 

    const express = require('express');
const pixel = require("node-pixel");
const app = express();
const port = 3000;

const {Board} = require("johnny-five");
const board = new Board({ port: "COM8" });

var strip = null;

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", function() {
    strip = new pixel.Strip({
        board: this,
        controller: "FIRMATA",
        strips: [ {pin: 6, length: 12}, ],
        gamma: 0.8,
    });
    
    wss.on('connection', function(ws, req) {
        console.log('connected');
        ws.on('message', function(data){
            strip.color("black");
            
            console.log(data.toString());
            
            var jsonObject = JSON.parse(data.toString());
            
            var red = jsonObject.red;
            var green = jsonObject.green;
            var blue = jsonObject.blue;
            
            for(var i = 0; i < strip.length; i++) {
                strip.pixel( i ).color( [red, green, blue] );
            }
            
            strip.show();
        });
    });
});
    gamma value

    Perhatikan baris ke 23 dari file server.js di atas. Nilai gamma saya buat 0.8, nilai ini saya dapat setelah saya melakukan fine tuning dari kesesuaian level RGB terhadap WS2812. Nilai defaultnya adalah 2.8 seperti pada dokumentasi di halaman github ajfisher. Di baris ke 22, pin adalah pin pada Arduino dan length adalah jumlah mata LED.

    gamma value

  • Buat folder baru "public" di dalam direktori E:\triyonos\j5_ws2812 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>WS2812 RGB 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: 4rem;
            }
            .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="#">Node Pixel WS2812 RGB Controller</a>
        </nav>
        
        <main role="main" class="container">
            <div class="starter-template">

                <div style="margin-top: 1em">
                    <h4>Red</h4>
                    0 <input id="inp_red" type="range" min="0" max="255" value="0"/> 255
                    <p id="p_red">0</p>
                </div>
                
                <div style="margin-top: 1em">
                    <h4>Green</h4>
                    0 <input id="inp_grn" type="range" min="0" max="255" value="0"/> 255
                    <p id="p_grn">0</p>
                </div>
                
                <div style="margin-top: 1em">
                    <h4>Blue</h4>
                    0 <input id="inp_blu" type="range" min="0" max="255" value="0"/> 255
                    <p id="p_blu">0</p>
                </div>
                
            </div>
        </main>
    
        <script type="text/javascript">
            window.onload = function(){
                var socket = new WebSocket('ws://localhost:8080');

                var r = document.getElementById("inp_red");
                var pr = document.getElementById("p_red");
                
                var g = document.getElementById("inp_grn");
                var pg = document.getElementById("p_grn");
                
                var b = document.getElementById("inp_blu");
                var pb = document.getElementById("p_blu");
                
                r.value = 0;
                g.value = 0;
                b.value = 0;
                
                r.addEventListener("input", function() {
                    pr.innerHTML = r.value;
                    
                    socket.send(JSON.stringify({
                        red: r.value,
                        green: g.value,
                        blue: b.value
                    }));
                }, false); 
                
                g.addEventListener("input", function() {
                    pg.innerHTML = g.value;
                    
                    socket.send(JSON.stringify({
                        red: r.value,
                        green: g.value,
                        blue: b.value
                    }));
                }, false);
                
                b.addEventListener("input", function() {
                    pb.innerHTML = b.value;
                    
                    socket.send(JSON.stringify({
                        red: r.value,
                        green: g.value,
                        blue: b.value
                    }));
                }, false);
            }
        </script> 
    </body>
</html>

3. Running Program

Hubungkan Arduino Uno yang sudah dirangkai dengan LED Strip WS2812 dengan komputer melalui port USB. Di PC saya Arduino Uno dan PC berkomunikasi di serial port COM8.

arduino ws2812

Buka kembali command prompt dan arahkan ke direktori E:\triyonos\j5_ws2812. Ketikkan perintah node server lalu Enter.

run node server.js

Berikut Video demonya: