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
2. Kabel Power
3. WS2812 LED Strip 5 Volt (potong hanya 12 LED saja)
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.
1. Proses Instalasi Package Node.js
Buat folder baru dengan nama "j5_ws2812" di dalam direktori E:\triyonos sebagai folder kerja project ini.
Buka command prompt kemudian arahkan ke direktori E:\triyonos\j5_ws2812
Ketikkan perintah npm-init, Enter dan kemudian isikan informasi yang dibutuhkan mengenai project ini sekaligus menggenerate file package.json.
Selanjutnya kita ikuti langkah-langkah proses instalasi package yang dibutuhkan seperti pada halaman github ajfisher https://github.com/ajfisher/node-pixel.
Instalasi package melalui npm.
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.
Selanjutnya kita lihat lagi installation guide dari halaman github tadi.
Buka kembali command prompt kemudian ketikkan perintah di atas, kemudian Enter.
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 express --save
-
npm install ws --save
Proses instalasi semua package melalui npm selesai dilakukan. Folder "j5_ws2812" akan terdapat folder node_modules, package.json dan package-lock.json.
Jika kita buka file package.json di notepad++ maka akan terlihat sebagai berikut:
2. Pembuatan Aplikasi Web WS2812 RGB Controller
Rangkaikan Arduino Uno dan LED Strip WS2912 seperti Wire diagram berikut:
WS2812 | Arduino |
---|---|
+5V | 5V |
GND | GND |
DI | Pin 6 |
Tampilan aplikasi WS2812 RGB Controller adalah sebagai berikut:
-
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(); }); }); });
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.
-
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:
-
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.
Buka kembali command prompt dan arahkan ke direktori E:\triyonos\j5_ws2812. Ketikkan perintah node server
lalu Enter.
Berikut Video demonya: