Светодиод Node.js Raspberry Pi RGB с WebSocket
Использование широтно-импульсной модуляции
В предыдущих главах мы узнали, как использовать WebSocket и как использовать GPIO для включения и выключения светодиодов.
В этой главе мы будем использовать светодиод RGB с ШИМ (широтно-импульсной модуляцией) для отображения разных цветов в зависимости от ввода пользователя через WebSocket.
Светодиод RGB — это светодиод с тремя разными цветами. Он имеет КРАСНЫЙ, ЗЕЛЕНЫЙ и СИНИЙ светодиод (светодиод RGB).
И с помощью PWM мы можем установить индивидуальную мощность 3 светодиодов. Это позволит нам смешать их, чтобы задать цвет.
Что нам нужно?
В этой главе мы создадим пример, в котором мы будем управлять светодиодом RGB с помощью веб-страницы через WebSocket.
Для этого вам нужно:
- Raspberry Pi с Raspian, интернетом, SSH и установленным Node.js
- Модуль pigpio для Node.js
- Модуль socket.io для Node.js
- 1 х макет
- Резистор 3 х 220 Ом
- 1 светодиод RGB (общий анод или общий катод)
- 4 перемычки «мама-папа»
Щелкните ссылки в списке выше, чтобы просмотреть описания различных компонентов.
Примечание . Резистор, который вам нужен, может отличаться от того, который мы используем, в зависимости от типа используемого вами светодиода. Большинству маленьких светодиодов нужен только небольшой резистор, около 200-500 Ом. Как правило, не критично, какой именно номинал вы используете, но чем меньше номинал резистора, тем ярче будет светить светодиод.
Установите модуль pigpio
Ранее мы использовали модуль «on-off», который отлично подходит для простого включения и выключения. Теперь мы хотим установить мощность светодиодов, поэтому нам нужен модуль GPIO с немного большей функциональностью.
Мы будем использовать модуль Node.js «pigpio», так как он позволяет использовать PWM.
С ШИМ мы можем установить мощность светодиода от 0 до 255.
Модуль «pigpio» Node.js основан на библиотеке C pigpio.
Если вы используете «облегченную» версию Raspbian, она, скорее всего, не включена и ее необходимо установить вручную.
Обновите список системных пакетов:
pi@w3demopi:~ $ sudo apt-get update
Установите библиотеку pigpio C:
pi@w3demopi:~ $ sudo apt-get install pigpio
Теперь мы можем установить модуль «pigpio» Node.js, используя npm:
pi@w3demopi:~ $ npm install pigpio
Теперь модуль «pigpio» должен быть установлен, и мы можем использовать его для взаимодействия с GPIO Raspberry Pi.
Примечание. Поскольку модуль «pigpio» использует библиотеку C pigpio, для доступа к аппаратным периферийным устройствам (таким как GPIO) требуются привилегии root/sudo.
Создание схемы
Теперь пришло время построить схему на нашей макетной плате.
Если вы новичок в электронике, мы рекомендуем вам отключить питание Raspberry Pi. И используйте антистатический коврик или заземляющий браслет, чтобы не повредить его.
Правильно выключите Raspberry Pi с помощью команды:
pi@w3demopi:~ $ sudo shutdown -h now
После того, как светодиоды перестанут мигать на Raspberry Pi, вытащите вилку питания из Raspberry Pi (или поверните удлинитель, к которому он подключен).
Простое выдергивание вилки из розетки без надлежащего выключения может привести к повреждению карты памяти.
При построении этой схемы важно знать, есть ли у вас общий анод или общий катод, RGB-светодиод:
Вы можете уточнить у своего провайдера или проверить сами:
Подключите кабели к GND и контакту 3,3 В. Подключите GND к самой длинной ножке светодиода RGB и 3,3 В к любой другой ножке. Если он загорается, ваш RGB-светодиод имеет общий катод. Если нет, то у него общий анод.
Посмотрите на приведенную выше иллюстрацию схемы.
- 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
- На макетной плате подключите резистор между левым и правым столбцами шины заземления для ряда с СИНИМ стержнем светодиода. В этом примере мы прикрепили его к строке 4, столбцу E и F.
Теперь ваша схема должна быть завершена, и ваши соединения должны выглядеть примерно так, как показано на рисунке выше.
Теперь пришло время загрузить Raspberry Pi и написать сценарий Node.js для взаимодействия с ним.
Посмотрите на приведенную выше иллюстрацию схемы.
- 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)
- На макетной плате подключите вилку четвертой перемычки к тому же ряду правой колонки шины заземления, к которой вы подключили общий анод. В этом примере мы подключили его к строке 2 столбца F
Теперь ваша схема должна быть завершена, и ваши соединения должны выглядеть примерно так, как показано на рисунке выше.
Теперь пришло время загрузить Raspberry Pi и написать сценарий Node.js для взаимодействия с ним.
Raspberry Pi и Node.js RGB LED и скрипт WebSocket
Перейдите в каталог «nodetest» и создайте новый файл с именем « rgbws.js»:
pi@w3demopi:~ $ nano rgbws.js
Теперь файл открыт и может быть отредактирован с помощью встроенного редактора Nano Editor.
Напишите или вставьте следующее:
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
});
Нажмите « Ctrl+x», чтобы сохранить код. Подтвердите с помощью " y" и подтвердите имя с помощью " Enter".
Напишите или вставьте следующее:
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
});
Нажмите « Ctrl+x», чтобы сохранить код. Подтвердите с помощью " y" и подтвердите имя с помощью " Enter".
Пользовательский интерфейс Raspberry Pi и Node.js WebSocket
Теперь пришло время добавить HTML, который позволяет вводить данные через WebSocket.
Для этого мы хотим:
- 3 цветных ползунка, по одному для каждого цвета (RGB)
- Выбор цвета
- Div, показывающий текущий цвет
Перейдите в папку «public»:
pi@w3demopi:~/nodetest $
cd public
И создайте файл 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>
Вернитесь в папку «nodetest»:
pi@w3demopi:~/nodetest $
cd ..
Запустите код:
pi@w3demopi:~ $ sudo node rgbws.js
Примечание. Поскольку модуль «pigpio» использует библиотеку C pigpio, для доступа к аппаратным периферийным устройствам (таким как GPIO) требуются привилегии root/sudo.
Откройте веб-сайт в браузере, используя http://[RaspberryPi_IP]:8080/
Теперь светодиод RGB должен менять цвет в зависимости от ввода пользователя.
Завершите программу с помощью Ctrl+c.