Node.js Raspberry Pi LED RGB con WebSocket
Uso de modulación de ancho de pulso
En los capítulos anteriores, hemos aprendido cómo usar WebSocket y cómo usar GPIO para encender y apagar los LED.
En este capítulo usaremos un LED RGB, con PWM (modulación de ancho de pulso) para mostrar diferentes colores según la entrada del usuario a través de WebSocket.
Un LED RGB es un LED con 3 colores diferentes. Dispone de LED ROJO, VERDE y AZUL (LED RGB).
Y usando PWM, podemos establecer la fuerza individual de los 3 LED. Esto nos permitirá mezclarlos, para fijar un color.
¿Qué necesitamos?
En este capítulo crearemos un ejemplo en el que controlamos un LED RGB con una página web a través de WebSocket.
Para esto necesitas:
- Una Raspberry Pi con Raspian, internet, SSH, con Node.js instalado
- El módulo pigpio para Node.js
- El módulo socket.io para Node.js
- 1 placa de pruebas .
- 3 resistencias de 220 ohmios
- 1 x LED RGB (ánodo común o cátodo común)
- 4 cables de puente hembra a macho.
Haga clic en los enlaces de la lista anterior para obtener descripciones de los diferentes componentes.
Nota: La resistencia que necesitas puede ser diferente a la que usamos dependiendo del tipo de LED que uses. La mayoría de los LED pequeños solo necesitan una pequeña resistencia, alrededor de 200-500 ohmios. Por lo general, no es crítico qué valor exacto use, pero cuanto menor sea el valor de la resistencia, más brillante brillará el LED.
Instale el módulo pigpio
Anteriormente, hemos utilizado el módulo "onoff", que funciona muy bien para encender y apagar. Ahora queremos establecer la intensidad de los LED, por lo que necesitamos un módulo GPIO con un poco más de funcionalidad.
Usaremos el módulo "pigpio" Node.js, ya que esto permite PWM.
Con PWM podemos establecer la intensidad de un LED de 0 a 255.
El módulo "pigpio" Node.js se basa en la biblioteca pigpio C.
Si está utilizando la versión "Lite" de Raspbian, lo más probable es que no esté incluida y deba instalarse manualmente.
Actualice la lista de paquetes de su sistema:
pi@w3demopi:~ $ sudo apt-get update
Instale la biblioteca pigpio C:
pi@w3demopi:~ $ sudo apt-get install pigpio
Ahora podemos instalar el módulo Node.js "pigpio" usando npm:
pi@w3demopi:~ $ npm install pigpio
Ahora el módulo "pigpio" debe estar instalado y podemos usarlo para interactuar con el GPIO de la Raspberry Pi.
Nota: Dado que el módulo "pigpio" usa la biblioteca pigpio C, requiere privilegios de root/sudo para acceder a los periféricos de hardware (como GPIO).
Construyendo el circuito
Ahora es el momento de construir el circuito en nuestro Breadboard.
Si es nuevo en la electrónica, le recomendamos que apague la Raspberry Pi. Y use una alfombra antiestática o una correa de conexión a tierra para evitar dañarlo.
Apague la Raspberry Pi correctamente con el comando:
pi@w3demopi:~ $ sudo shutdown -h now
Después de que los LED dejen de parpadear en la Raspberry Pi, desconecte el enchufe de alimentación de la Raspberry Pi (o apague la regleta a la que está conectado).
Simplemente desconectar el enchufe sin apagarlo correctamente puede dañar la tarjeta de memoria.
Al construir este circuito, es importante saber si tiene un ánodo común o un cátodo común, LED RGB:
Puede consultar con su proveedor, o probarlo usted mismo:
Conecte los cables a GND y al pin de 3,3 V. Conecte GND a la pata más larga del LED RGB y los 3,3 V a cualquier otra pata. Si se enciende, su LED RGB tiene un cátodo común. Si no, tiene un ánodo común.
Mira la ilustración de arriba 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
- En la placa de prueba, conecte una resistencia entre las columnas de bus de tierra izquierda y derecha para la fila con la pata AZUL del LED. En este ejemplo lo hemos adjuntado a la fila 4, columna E y F
Su circuito ahora debería estar completo, y sus conexiones deberían verse bastante similares a la ilustración anterior.
Ahora es el momento de iniciar Raspberry Pi y escribir el script Node.js para interactuar con él.
Mira la ilustración de arriba 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)
- En la placa de prueba, conecte la pata macho del cuarto cable de puente a la misma fila de la columna de bus de tierra derecha a la que conectó el ánodo común. En este ejemplo lo conectamos a la fila 2 columna F
Su circuito ahora debería estar completo, y sus conexiones deberían verse bastante similares a la ilustración anterior.
Ahora es el momento de iniciar Raspberry Pi y escribir el script Node.js para interactuar con él.
Raspberry Pi y Node.js RGB LED y WebSocket Script
Vaya al directorio "nodetest" y cree un nuevo archivo llamado " rgbws.js":
pi@w3demopi:~ $ nano rgbws.js
El archivo ahora está abierto y se puede editar con el Nano Editor incorporado.
Escribe o pega lo siguiente:
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
});
Pulse " Ctrl+x" para guardar el código. Confirme con " y", y confirme el nombre con " Enter".
Escribe o pega lo siguiente:
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
});
Pulse " Ctrl+x" para guardar el código. Confirme con " y", y confirme el nombre con " Enter".
Interfaz de usuario WebSocket de Raspberry Pi y Node.js
Ahora es el momento de agregar el HTML que permite la entrada del usuario a través de WebSocket.
Para esto queremos:
- 3 controles deslizantes de color, uno para cada color (RGB)
- Un selector de color
- Un div que muestra el color actual
Vaya a la carpeta "público":
pi@w3demopi:~/nodetest $
cd public
Y crea un archivo 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>
Regrese a la carpeta "nodetest":
pi@w3demopi:~/nodetest $
cd ..
Ejecute el código:
pi@w3demopi:~ $ sudo node rgbws.js
Nota: Dado que el módulo "pigpio" usa la biblioteca pigpio C, requiere privilegios de root/sudo para acceder a los periféricos de hardware (como GPIO).
Abra el sitio web en un navegador usando http://[RaspberryPi_IP]:8080/
Ahora el LED RGB debería cambiar de color dependiendo de la entrada del usuario.
Finaliza el programa con Ctrl+c.