Node.js Raspberry Pi RGB LED con WebSocket
Utilizzo della modulazione della larghezza di impulso
Nei capitoli precedenti abbiamo imparato come utilizzare WebSocket e come utilizzare GPIO per accendere e spegnere i LED.
In questo capitolo utilizzeremo un LED RGB, con PWM (Pulse-width modulation) per visualizzare colori diversi in base all'input dell'utente tramite WebSocket.
Un LED RGB è un LED con 3 colori diversi. Ha un LED ROSSO, VERDE e BLU (LED RGB).
E usando PWM, possiamo impostare la potenza individuale dei 3 LED. Questo ci permetterà di mescolarli, di impostare un colore.
Cosa ci serve?
In questo capitolo creeremo un esempio in cui controlliamo un LED RGB con una pagina web tramite WebSocket.
Per questo hai bisogno di:
- Un Raspberry Pi con Raspian, internet, SSH, con Node.js installato
- Il modulo pigpio per Node.js
- Il modulo socket.io per Node.js
- 1 tagliere
- Resistenza 3 x 220 Ohm
- 1 x LED RGB (anodo comune o catodo comune)
- 4 cavi di collegamento da femmina a maschio
Fare clic sui collegamenti nell'elenco sopra per le descrizioni dei diversi componenti.
Nota: il resistore di cui hai bisogno può essere diverso da quello che utilizziamo a seconda del tipo di LED che utilizzi. La maggior parte dei piccoli LED necessita solo di un piccolo resistore, circa 200-500 ohm. In genere non è fondamentale quale valore esatto utilizzi, ma minore è il valore del resistore, più luminoso sarà il LED.
Installare il modulo pigpio
In precedenza, abbiamo utilizzato il modulo "onoff", che funziona benissimo solo per l'accensione e lo spegnimento. Ora vogliamo impostare la potenza dei LED, quindi abbiamo bisogno di un modulo GPIO con un po' più di funzionalità.
Utilizzeremo il modulo Node.js "pigpio", poiché consente PWM.
Con PWM possiamo impostare la potenza di un LED da 0 a 255.
Il modulo "pigpio" Node.js è basato sulla libreria C pigpio.
Se stai usando la versione "Lite" di Raspbian, molto probabilmente non è inclusa e deve essere installata manualmente.
Aggiorna l'elenco dei pacchetti di sistema:
pi@w3demopi:~ $ sudo apt-get update
Installa la libreria C pigpio:
pi@w3demopi:~ $ sudo apt-get install pigpio
Ora possiamo installare il modulo Node.js "pigpio" usando npm:
pi@w3demopi:~ $ npm install pigpio
Ora il modulo "pigpio" dovrebbe essere installato e possiamo usarlo per interagire con il GPIO del Raspberry Pi.
Nota: poiché il modulo "pigpio" utilizza la libreria C pigpio, richiede i privilegi di root/sudo per accedere alle periferiche hardware (come il GPIO).
Costruire il circuito
Ora è il momento di costruire il circuito sulla nostra breadboard.
Se non conosci l'elettronica, ti consigliamo di spegnere l'alimentazione del Raspberry Pi. E usa un tappetino antistatico o una cinghia di messa a terra per evitare di danneggiarlo.
Spegni correttamente Raspberry Pi con il comando:
pi@w3demopi:~ $ sudo shutdown -h now
Dopo che i LED smettono di lampeggiare sul Raspberry Pi, scollegare la spina di alimentazione dal Raspberry Pi (o spegnere la presa multipla a cui è collegato).
Basta staccare la spina senza spegnerla correttamente può causare il danneggiamento della scheda di memoria.
Nella costruzione di questo circuito è importante sapere se si dispone di un LED RGB ad anodo o catodo comune:
Puoi verificare con il tuo provider o testarlo tu stesso:
Collegare i cavi a GND e pin da 3,3 V. Collega GND alla gamba più lunga del LED RGB e 3,3 V a qualsiasi altra gamba. Se si accende, il tuo LED RGB ha un catodo comune. In caso contrario, ha un anodo comune.
Guarda l'illustrazione sopra del circuito.
- On the Breadboard, connect the RGB LED to the right ground bus column, and make sure that each leg connects to a different row. The longest leg is the common cathode leg. In this example we have connected the LED to rows 1-4, with the common cathode leg connected to row 2 column I. The RED leg is connected to row 1 column J, the GREEN leg is connected to row 3 column J, and the BLUE leg is connected to row 4 column J
- On the Raspberry Pi, connect the female leg of the first jumper wire to Ground. You can use any GND pin. In this example we used Physical Pin 9 (GND, row 5, left column)
- On the Breadboard, connect the male leg of the first jumper wire to the same row of the right ground bus column that you connected the common cathode to. In this example we connected it to row 2 column F
- On the Raspberry Pi, connect the female leg of the second jumper cable to a GPIO pin. We will use this for the RED leg, In this example we used Physical Pin 7 (GPIO 4, row 4, left column)
- On the Breadboard, connect the male leg of the second jumper wire to the left ground bus, same row as the RED leg of the LED is connected. In this example we connected it to row 1, column A
- On the Breadboard, connect a resistor between the left and right ground bus columns for the row with the RED leg of the LED. In this example we have attached it to row 1, column E and F
- On the Raspberry Pi, connect the female leg of the third jumper cable to a GPIO pin. We will use this for the GREEN leg, In this example we used Physical Pin 11 (GPIO 17, row 6, left column)
- On the Breadboard, connect the male leg of the third jumper wire to the left ground bus, same row as the GREEN leg of the LED is connected. In this example we connected it to row 3, column A
- On the Breadboard, connect a resistor between the left and right ground bus columns for the row with the GREEN leg of the LED. In this example we have attached it to row 3, column E and F
- On the Raspberry Pi, connect the female leg of the forth jumper cable to a GPIO pin. We will use this for the BLUE leg, In this example we used Physical Pin 13 (GPIO 27, row 7, left column)
- On the Breadboard, connect the male leg of the forth jumper wire to the left ground bus, same row as the BLUE leg of the LED is connected. In this example we connected it to row 4, column A
- Sulla breadboard, collegare un resistore tra le colonne del bus di terra sinistra e destra per la riga con la gamba BLU del LED. In questo esempio lo abbiamo allegato alla riga 4, colonna E ed F
Il tuo circuito ora dovrebbe essere completo e le tue connessioni dovrebbero apparire abbastanza simili all'illustrazione sopra.
Ora è il momento di avviare Raspberry Pi e scrivere lo script Node.js per interagire con esso.
Guarda l'illustrazione sopra del circuito.
- On the Breadboard, connect the RGB LED to the right ground bus column, and make sure that each leg connects to a different row. The longest leg is the common anode leg. In this example we have connected the LED to rows 1-4, with the common cathode leg connected to row 2 column I. The RED leg is connected to row 1 column J, the GREEN leg is connected to row 3 column J, and the BLUE leg is connected to row 4 column J
- On the Raspberry Pi, connect the female leg of the first jumper cable to a GPIO pin. We will use this for the RED leg, In this example we used Physical Pin 7 (GPIO 4, row 4, left column)
- On the Breadboard, connect the male leg of the first jumper wire to the left ground bus, same row as the RED leg of the LED is connected. In this example we connected it to row 1, column A
- On the Breadboard, connect a resistor between the left and right ground bus columns for the row with the RED leg of the LED. In this example we have attached it to row 1, column E and F
- On the Raspberry Pi, connect the female leg of the second jumper cable to a GPIO pin. We will use this for the GREEN leg, In this example we used Physical Pin 11 (GPIO 17, row 6, left column)
- On the Breadboard, connect the male leg of the second jumper wire to the left ground bus, same row as the GREEN leg of the LED is connected. In this example we connected it to row 3, column A
- On the Breadboard, connect a resistor between the left and right ground bus columns for the row with the GREEN leg of the LED. In this example we have attached it to row 3, column E and F
- On the Raspberry Pi, connect the female leg of the third jumper cable to a GPIO pin. We will use this for the BLUE leg, In this example we used Physical Pin 13 (GPIO 27, row 7, left column)
- On the Breadboard, connect the male leg of the third jumper wire to the left ground bus, same row as the BLUE leg of the LED is connected. In this example we connected it to row 4, column A
- On the Breadboard, connect a resistor between the left and right ground bus columns for the row with the BLUE leg of the LED. In this example we have attached it to row 4, column E and F
- On the Raspberry Pi, connect the female leg of the forth jumper wire to 3.3V. In this example we used Physical Pin 1 (3.3V, row 1, left column)
- Sulla breadboard, collega la gamba maschio del quarto cavo del ponticello alla stessa riga della colonna del bus di terra di destra a cui hai collegato l'anodo comune. In questo esempio lo abbiamo collegato alla riga 2 colonna F
Il tuo circuito ora dovrebbe essere completo e le tue connessioni dovrebbero apparire abbastanza simili all'illustrazione sopra.
Ora è il momento di avviare Raspberry Pi e scrivere lo script Node.js per interagire con esso.
Raspberry Pi e Node.js LED RGB e script WebSocket
Vai alla directory "nodetest" e crea un nuovo file chiamato " rgbws.js":
pi@w3demopi:~ $ nano rgbws.js
Il file è ora aperto e può essere modificato con il Nano Editor integrato.
Scrivi o incolla quanto segue:
rgbws.js
var http = require('http').createServer(handler); //require http server, and
create server with function handler()
var fs = require('fs'); //require
filesystem module
var io = require('socket.io')(http) //require socket.io
module and pass the http object (server)
var Gpio = require('pigpio').Gpio,
//include pigpio to interact with the GPIO
ledRed = new Gpio(4, {mode:
Gpio.OUTPUT}), //use GPIO pin 4 as output for RED
ledGreen = new Gpio(17,
{mode: Gpio.OUTPUT}), //use GPIO pin 17 as output for GREEN
ledBlue = new
Gpio(27, {mode: Gpio.OUTPUT}), //use GPIO pin 27 as output for BLUE
redRGB
= 0, //set starting value of RED variable to off (0 for common cathode)
greenRGB = 0, //set starting value of GREEN variable to off (0 for common
cathode)
blueRGB = 0; //set starting value of BLUE variable to off (0 for
common cathode)
//RESET RGB LED
ledRed.digitalWrite(0); // Turn RED
LED off
ledGreen.digitalWrite(0); // Turn GREEN LED off
ledBlue.digitalWrite(0); // Turn BLUE LED off
http.listen(8080);
//listen to port 8080
function handler (req, res) { //what to do on
requests to port 8080
fs.readFile(__dirname + '/public/rgb.html',
function(err, data) { //read file rgb.html in public folder
if (err) {
res.writeHead(404,
{'Content-Type': 'text/html'}); //display 404 on error
return res.end("404 Not Found");
}
res.writeHead(200, {'Content-Type': 'text/html'}); //write HTML
res.write(data); //write data from rgb.html
return
res.end();
});
}
io.sockets.on('connection', function
(socket) {// Web Socket Connection
socket.on('rgbLed',
function(data) { //get light switch status from client
console.log(data); //output data from WebSocket connection to console
//for common cathode RGB LED 0 is fully off, and 255 is fully on
redRGB=parseInt(data.red);
greenRGB=parseInt(data.green);
blueRGB=parseInt(data.blue);
ledRed.pwmWrite(redRGB); //set RED LED to specified
value
ledGreen.pwmWrite(greenRGB); //set GREEN LED to
specified value
ledBlue.pwmWrite(blueRGB); //set BLUE
LED to specified value
});
});
process.on('SIGINT',
function () { //on ctrl+c
ledRed.digitalWrite(0); // Turn RED LED
off
ledGreen.digitalWrite(0); // Turn GREEN LED off
ledBlue.digitalWrite(0); // Turn BLUE LED off
process.exit(); //exit
completely
});
Premere " Ctrl+x" per salvare il codice. Confermare con " y", e confermare il nome con " Enter".
Scrivi o incolla quanto segue:
rgbws.js
var http = require('http').createServer(handler); //require http server, and
create server with function handler()
var fs = require('fs'); //require
filesystem module
var io = require('socket.io')(http) //require socket.io
module and pass the http object (server)
var Gpio = require('pigpio').Gpio,
//include pigpio to interact with the GPIO
ledRed = new Gpio(4, {mode:
Gpio.OUTPUT}), //use GPIO pin 4 as output for RED
ledGreen = new Gpio(17,
{mode: Gpio.OUTPUT}), //use GPIO pin 17 as output for GREEN
ledBlue = new
Gpio(27, {mode: Gpio.OUTPUT}), //use GPIO pin 27 as output for BLUE
redRGB
= 255, //set starting value of RED variable to off (255 for common anode)
greenRGB = 255, //set starting value of GREEN variable to off (255 for common
anode)
blueRGB = 255; //set starting value of BLUE variable to off (255 for
common anode)
//RESET RGB LED
ledRed.digitalWrite(1); // Turn RED
LED off
ledGreen.digitalWrite(1); // Turn GREEN LED off
ledBlue.digitalWrite(1); // Turn BLUE LED off
http.listen(8080);
//listen to port 8080
function handler (req, res) { //what to do on
requests to port 8080
fs.readFile(__dirname + '/public/rgb.html',
function(err, data) { //read file rgb.html in public folder
if (err) {
res.writeHead(404,
{'Content-Type': 'text/html'}); //display 404 on error
return res.end("404 Not Found");
}
res.writeHead(200, {'Content-Type': 'text/html'}); //write HTML
res.write(data); //write data from rgb.html
return
res.end();
});
}
io.sockets.on('connection', function
(socket) {// Web Socket Connection
socket.on('rgbLed',
function(data) { //get light switch status from client
console.log(data); //output data from WebSocket connection to console
//for common anode RGB LED 255 is fully off, and 0 is fully on, so we
have to change the value from the client
redRGB=255-parseInt(data.red);
greenRGB=255-parseInt(data.green);
blueRGB=255-parseInt(data.blue);
console.log("rbg: "
+ redRGB + ", " + greenRGB + ", " + blueRGB); //output converted to console
ledRed.pwmWrite(redRGB); //set RED LED to specified
value
ledGreen.pwmWrite(greenRGB); //set GREEN LED to
specified value
ledBlue.pwmWrite(blueRGB); //set BLUE
LED to specified value
});
});
process.on('SIGINT',
function () { //on ctrl+c
ledRed.digitalWrite(1); // Turn RED LED
off
ledGreen.digitalWrite(1); // Turn GREEN LED off
ledBlue.digitalWrite(1); // Turn BLUE LED off
process.exit(); //exit
completely
});
Premere " Ctrl+x" per salvare il codice. Confermare con " y", e confermare il nome con " Enter".
Interfaccia utente WebSocket Raspberry Pi e Node.js
Ora è il momento di aggiungere l'HTML che consente l'input dell'utente tramite WebSocket.
Per questo vogliamo:
- 3 cursori colore, uno per ogni colore (RGB)
- Un selezionatore di colori
- Un div che mostra il colore corrente
Vai alla cartella "pubblica":
pi@w3demopi:~/nodetest $
cd public
E crea un file HTML, rgb.html:
pi@w3demopi:~/nodetest/public $
nano rgb.html
rgb.html:
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition:
opacity .2s;
}
.slider:hover {opacity: 1;}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
}
.slider::-moz-range-thumb {
width:
25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
#redSlider::-webkit-slider-thumb {background: red;}
#redSlider::-moz-range-thumb
{background: red;}
#greenSlider::-webkit-slider-thumb {background:
green;}
#greenSlider::-moz-range-thumb {background: green;}
#blueSlider::-webkit-slider-thumb
{background: blue;}
#blueSlider::-moz-range-thumb {background: blue;}
</style>
<body>
<div class="w3-container">
<h1>RGB Color</h1>
<div class="w3-cell-row">
<div class="w3-container w3-cell w3-mobile">
<p><input type="range" min="0" max="255" value="0" class="slider" id="redSlider"></p>
<p><input type="range" min="0" max="255" value="0" class="slider" id="greenSlider"></p>
<p><input type="range" min="0" max="255" value="0" class="slider" id="blueSlider"></p>
</div>
<div class="w3-container w3-cell w3-mobile" style="background-color:black"
id="colorShow">
<div></div>
</div>
</div>
<p>Or pick a color:
<input type="color" id="pickColor"></p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<script src="https://www.w3schools.com/lib/w3color.js"></script>
<script>
var socket = io(); //load socket.io-client and connect to the host that
serves the page
var rgb = w3color("rgb(0,0,0)"); //we use the w3color.js
library to keep the color as an object
window.addEventListener("load",
function(){ //when page loads
var rSlider =
document.getElementById("redSlider");
var gSlider =
document.getElementById("greenSlider");
var bSlider =
document.getElementById("blueSlider");
var picker =
document.getElementById("pickColor");
rSlider.addEventListener("change",
function() { //add event listener for when red slider changes
rgb.red = this.value; //update the RED color according to the slider
colorShow.style.backgroundColor = rgb.toRgbString(); //update the "Current
color"
socket.emit("rgbLed", rgb); //send the updated
color to RGB LED via WebSocket
});
gSlider.addEventListener("change", function() { //add event listener for
when green slider changes
rgb.green = this.value;
//update the GREEN color according to the slider
colorShow.style.backgroundColor = rgb.toRgbString(); //update the "Current
color"
socket.emit("rgbLed", rgb); //send the updated
color to RGB LED via WebSocket
});
bSlider.addEventListener("change", function() { //add event listener for
when blue slider changes
rgb.blue = this.value;
//update the BLUE color according to the slider
colorShow.style.backgroundColor = rgb.toRgbString(); //update the "Current
color"
socket.emit("rgbLed", rgb); //send the updated
color to RGB LED via WebSocket
});
picker.addEventListener("input", function() { //add event listener for when
colorpicker changes
rgb.red = w3color(this.value).red;
//Update the RED color according to the picker
rgb.green = w3color(this.value).green; //Update the GREEN color according to
the picker
rgb.blue = w3color(this.value).blue;
//Update the BLUE color according to the picker
colorShow.style.backgroundColor = rgb.toRgbString(); //update the
"Current color"
rSlider.value = rgb.red;
//Update the RED slider position according to the picker
gSlider.value = rgb.green; //Update the GREEN slider position
according to the picker
bSlider.value = rgb.blue;
//Update the BLUE slider position according to the picker
socket.emit("rgbLed", rgb); //send the updated color to RGB LED via
WebSocket
});
});
</script>
</body>
</html>
Torna alla cartella "nodetest":
pi@w3demopi:~/nodetest $
cd ..
Esegui il codice:
pi@w3demopi:~ $ sudo node rgbws.js
Nota: poiché il modulo "pigpio" utilizza la libreria C pigpio, richiede i privilegi di root/sudo per accedere alle periferiche hardware (come il GPIO).
Apri il sito Web in un browser utilizzando http://[RaspberryPi_IP]:8080/
Ora il LED RGB dovrebbe cambiare colore a seconda dell'input dell'utente.
Termina il programma con Ctrl+c.