RGB LED va WebSocket
Impuls kengligi modulyatsiyasidan foydalanish
Oldingi boblarda biz WebSocket-dan qanday foydalanishni va qanday qilib foydalanishni bilib oldik LEDlarni yoqish va o‘chirish uchun GPIO-dan foydalaning.
Ushbu bobda WebSocket orqali foydalanuvchi kiritgan ma’lumotlar asosida turli ranglarni ko‘rsatish uchun PWM (Pulse-width modulation, impuls kengligi modulyatsiyasi) bilan RGB LED’dan foydalanamiz.
RGB LED 3 xil rangli LED hisoblanadi. Unda RED (qizil), GREEN (yashil) va BLUE (ko‘k) LED’lar bor (RGB LED).
PWM yordamida esa 3 ta LEDning har birining kuchini alohida o‘rnatishimiz mumkin. Bu ularni aralashtirib, kerakli rangni hosil qilish imkonini beradi.
Bizga nima kerak?
Ushbu bobda biz qaerda bir misol yaratamiz biz WebSocket orqali veb-sahifa bilan RGB LEDni boshqaramiz.
Buning uchun sizga kerak:
- Node.js o‘rnatilgan Raspian, internet, SSH bilan Raspberry Pi
- pigpio moduli Node.js uchun
- Node.js uchun socket.io moduli
- 1 x Breadboard
- 3 x 220 Om rezistor
- 1 x RGB LED (umumiy anodli yoki umumiy katodli)
- 4 x Ayoldan erkakka o‘tkazgich simlari
Turli xil tavsiflar uchun yuqoridagi ro‘yxatdagi havolalarni bosing komponentlar.
Eslatma: Sizga kerak bo‘lgan rezistor siz foydalanadigan LED turiga qarab biz foydalanadigandan farq qilishi mumkin. Ko‘pgina kichik LEDlar faqat 200-500 ohm atrofida kichik qarshilikka muhtoj. Qaysi qiymatdan foydalanayotganingiz umuman muhim emas, lekin rezistorning qiymati qanchalik kichik bo‘lsa, LED shunchalik yorqinroq bo‘ladi. porlash.
Pigpio modulini o‘rnating
Ilgari biz "onoff" modulidan foydalanganmiz, u shunchaki burish uchun juda yaxshi ishlaydi yoqish va o‘chirish. Endi biz LEDlarning kuchini o‘rnatmoqchimiz, shuning uchun bizga kerak Bir oz ko‘proq funksionallikka ega GPIO moduli.
Biz "pigpio" Node.js modulidan foydalanamiz, chunki bu PWM imkonini beradi.
PWM bilan biz LEDning kuchini 0 dan 255 gacha o‘rnatishi mumkin.
"pigpio" Node.js moduli pigpio C kutubxonasiga asoslangan.
Agar siz Raspbianning "Lite" versiyasidan foydalanayotgan bo‘lsangiz, unday emas kiritilgan va qo‘lda o‘rnatilishi kerak.
Tizim paketingiz ro‘yxatini yangilang:
pi@w3demopi:~ $ sudo apt-get update
Pigpio C kutubxonasini o‘rnating:
pi@w3demopi:~ $ sudo apt-get install pigpio
Endi biz npm yordamida "pigpio" Node.js modulini o‘rnatishimiz mumkin:
pi@w3demopi:~ $ npm install pigpio
Endi "pigpio" moduli o‘rnatilishi kerak va biz undan foydalanishimiz mumkin Raspberry Pi ning GPIO bilan o‘zaro aloqada bo‘ling.
Eslatma: “Pigpio” moduli pigpio C kutubxonasidan foydalanganligi sababli, apparatning tashqi qurilmalariga kirish uchun root/sudo imtiyozlarini talab qiladi (masalan GPIO).
Sxemani qurish
Endi bizning Breadboardimizda sxemani qurish vaqti keldi.
Agar siz elektronika uchun yangi bo‘lsangiz, quvvatni o‘chirishni tavsiya qilamiz Raspberry Pi. Bunga yo‘l qo‘ymaslik uchun antistatik mat yoki topraklama tasmasini ishlating unga zarar yetkazish.
Raspberry Pi-ni buyruq bilan to‘g‘ri o‘chiring:
pi@w3demopi:~ $ sudo shutdown -h now
Raspberry Pi’dagi LED’lar miltillashdan to‘xtagach, Raspberry Pi’dan quvvat vilkasini sug‘urib oling (yoki u ulangan uzatkichni o‘chiring).
To‘g‘ri o‘chirmasdan vilkadan tortib olish xotira kartasining buzilishiga olib kelishi mumkin.
Ushbu sxemani qurishda sizda umumiylik bor yoki yo‘qligini bilish muhimdir anod yoki umumiy katod, RGB LED:
Siz provayderingizga murojaat qilishingiz yoki o‘zingiz sinab ko‘rishingiz mumkin:
Kabellarni GND va 3,3V pinga ulang. GND ni eng uzun oyog‘iga ulang RGB LED va boshqa oyoqqa 3,3 V. Agar u yonsa, sizning RGB LEDingiz bor umumiy katod. Agar yo‘q bo‘lsa, unda umumiy anod mavjud.
Yuqoridagi sxema rasmiga qarang.
- Breadboard-da RGB LED-ni o‘ng yer avtobus ustuniga ulang, va har bir oyoq boshqa qatorga ulanganligiga ishonch hosil qiling. Eng uzun oyoq umumiy katod oyog‘i. Ushbu misolda biz LEDni qatorlarga uladik 1-4, umumiy katod oyog‘i 2-qator I ustuniga ulangan. QIZIL oyog‘i 1-qator J ustuniga ulangan, GREEN oyog‘i 3-qator J ustuniga ulangan, va KO‘K oyog‘i 4-qator J ustuniga ulangan
- Raspberry Pi’da birinchi jumper simining ona (female) uchini Ground (yer) piniga ulang. Istalgan GND pinidan foydalanishingiz mumkin. Bu misolda biz 9-fizik pindan foydalandik (GND, 5-qator, chap ustun)
- Breadboardda birinchi o‘tish simining erkak oyog‘ini ulang umumiy ulangan o‘ng tuproqli avtobus ustunining bir xil qatori katodga. Ushbu misolda biz uni 2-qator F ustuniga bog‘ladik
- Raspberry Pi’da ikkinchi jumper kabelining ona (female) uchini GPIO piniga ulang. Undan RED oyoq uchun foydalanamiz. Bu misolda biz 7-fizik pindan foydalandik (GPIO 4, 4-qator, chap ustun)
- Breadboardda ikkinchi o‘tish simining erkak oyog‘ini ulang chap tuproqli avtobus, LEDning QIZIL oyog‘i bilan bir xil qator ulangan. Ushbu misolda biz uni qatorga bog‘ladik 1, ustun A
- Breadboardda chap va o‘ng tuproq o‘rtasida rezistorni ulang LEDning QIZIL oyog‘i bo‘lgan qator uchun avtobus ustunlari. Ushbu misolda biz biriktirdik 1-qator, E va F ustunlariga
- Raspberry Pi’da uchinchi jumper kabelining ona (female) uchini GPIO piniga ulang. Undan GREEN oyoq uchun foydalanamiz. Bu misolda biz 11-fizik pindan foydalandik (GPIO 17, 6-qator, chap ustun)
- Breadboardda uchinchi o‘tish simining erkak oyog‘ini ulang chap tuproqli avtobus, LEDning YASHIL oyog‘i bilan bir xil qator ulangan. Ushbu misolda biz uni qatorga bog‘ladik 3, ustun A
- Breadboardda chap va o‘ng tuproq o‘rtasida rezistorni ulang LEDning YASHIL oyog‘i bo‘lgan qator uchun avtobus ustunlari. Ushbu misolda biz biriktirdik 3-qator, E va F ustunlariga
- Raspberry Pi’da to‘rtinchi jumper kabelining ona (female) uchini GPIO piniga ulang. Undan BLUE oyoq uchun foydalanamiz. Bu misolda biz 13-fizik pindan foydalandik (GPIO 27, 7-qator, chap ustun)
- Breadboardda to‘rtinchi o‘tish simining erkak oyog‘ini ulang chap tuproqli shina, LEDning KO‘K oyog‘i bilan bir xil qator ulangan. Ushbu misolda biz uni qatorga bog‘ladik 4, ustun A
- Breadboardda chap va o‘ng tuproq o‘rtasida rezistorni ulang LEDning KO‘K oyog‘i bo‘lgan qator uchun avtobus ustunlari. Ushbu misolda biz biriktirdik 4-qator, E va F ustunlariga
Sizning sxemangiz endi tugallangan bo‘lishi kerak va ulanishlaringiz ko‘rinishi kerak yuqoridagi rasmga juda o‘xshash.
Endi Raspberry Pi-ni ishga tushirish va Node.js skriptini yozish vaqti keldi u bilan o‘zaro aloqada bo‘ling.
Yuqoridagi sxema rasmiga qarang.
- Breadboard-da RGB LED-ni o‘ng yer avtobus ustuniga ulang, va har bir oyoq boshqa qatorga ulanganligiga ishonch hosil qiling. Eng uzun oyoq umumiy anod oyog‘i. Ushbu misolda biz LEDni qatorlarga uladik 1-4, umumiy katod oyog‘i 2-qator I ustuniga ulangan. QIZIL oyog‘i 1-qator J ustuniga ulangan, GREEN oyog‘i 3-qator J ustuniga ulangan, va KO‘K oyog‘i 4-qator J ustuniga ulangan
- Raspberry Pi’da birinchi jumper kabelining ona (female) uchini GPIO piniga ulang. Undan RED oyoq uchun foydalanamiz. Bu misolda biz 7-fizik pindan foydalandik (GPIO 4, 4-qator, chap ustun)
- Breadboardda birinchi o‘tish simining erkak oyog‘ini ulang chap tuproqli avtobus, LEDning QIZIL oyog‘i bilan bir xil qator ulangan. Ushbu misolda biz uni qatorga bog‘ladik 1, ustun A
- Breadboardda chap va o‘ng tuproq o‘rtasida rezistorni ulang LEDning QIZIL oyog‘i bo‘lgan qator uchun avtobus ustunlari. Ushbu misolda biz biriktirdik 1-qator, E va F ustunlariga
- Raspberry Pi’da ikkinchi jumper kabelining ona (female) uchini GPIO piniga ulang. Undan GREEN oyoq uchun foydalanamiz. Bu misolda biz 11-fizik pindan foydalandik (GPIO 17, 6-qator, chap ustun)
- Breadboardda ikkinchi o‘tish simining erkak oyog‘ini ulang chap tuproqli avtobus, LEDning YASHIL oyog‘i bilan bir xil qator ulangan. Ushbu misolda biz uni qatorga bog‘ladik 3, ustun A
- Breadboardda chap va o‘ng tuproq o‘rtasida rezistorni ulang LEDning YASHIL oyog‘i bo‘lgan qator uchun avtobus ustunlari. Ushbu misolda biz biriktirdik 3-qator, E va F ustunlariga
- Raspberry Pi’da uchinchi jumper kabelining ona (female) uchini GPIO piniga ulang. Undan BLUE oyoq uchun foydalanamiz. Bu misolda biz 13-fizik pindan foydalandik (GPIO 27, 7-qator, chap ustun)
- Breadboardda uchinchi o‘tish simining erkak oyog‘ini ulang chap tuproqli shina, LEDning KO‘K oyog‘i bilan bir xil qator ulangan. Ushbu misolda biz uni qatorga bog‘ladik 4, ustun A
- Breadboardda chap va o‘ng tuproq o‘rtasida rezistorni ulang LEDning KO‘K oyog‘i bo‘lgan qator uchun avtobus ustunlari. Ushbu misolda biz biriktirdik 4-qator, E va F ustunlariga
- Raspberry Pi’da to‘rtinchi jumper simining ona (female) uchini 3.3V piniga ulang. Bu misolda biz 1-fizik pindan foydalandik (3.3V, 1-qator, chap ustun)
- Breadboardda to‘rtinchi o‘tish simining erkak oyog‘ini ulang umumiy ulangan o‘ng tuproqli avtobus ustunining bir xil qatori anod uchun. Ushbu misolda biz uni 2-qator F ustuniga bog‘ladik
Sizning sxemangiz endi tugallangan bo‘lishi kerak va ulanishlaringiz ko‘rinishi kerak yuqoridagi rasmga juda o‘xshash.
Endi Raspberry Pi-ni ishga tushirish va Node.js skriptini yozish vaqti keldi u bilan o‘zaro aloqada bo‘ling.
Raspberry Pi va Node.js RGB LED va WebSocket skripti
"Nodetest" katalogiga o‘ting va "rgbws.js" nomli yangi fayl yarating:
pi@w3demopi:~ $ nano rgbws.js
Fayl endi ochiq va uni o‘rnatilgan Nano muharriri bilan tahrirlash mumkin.
Quyidagilarni yozing yoki joylashtiring:
rgbws.js
let http = require('http').createServer(handler); //require http server, and
create server with function handler()
let fs = require('fs'); //require
filesystem module
let io = require('socket.io')(http) //require socket.io
module and pass the http object (server)
let 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
});
Kodni saqlash uchun "Ctrl+x" tugmasini bosing. "y" bilan tasdiqlang va ismni "Enter" bilan tasdiqlang.
Quyidagilarni yozing yoki joylashtiring:
rgbws.js
let http = require('http').createServer(handler); //require http server, and
create server with function handler()
let fs = require('fs'); //require
filesystem module
let io = require('socket.io')(http) //require socket.io
module and pass the http object (server)
let 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
});
Kodni saqlash uchun "Ctrl+x" tugmasini bosing. "y" bilan tasdiqlang va ismni "Enter" bilan tasdiqlang.
Raspberry Pi va Node.js WebSocket UI
Endi WebSocket orqali foydalanuvchi kiritish imkonini beruvchi HTML qo‘shish vaqti keldi.
Buning uchun biz xohlaymiz:
- 3 ta rang slayderi, har bir rang uchun bittadan (RGB)
- Rang tanlagich
- Joriy rangni ko‘rsatadigan div
"Ommaviy" jildiga o‘ting:
pi@w3demopi:~/nodetest $ cd public
Va rgb.html HTML faylini yarating:
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>
let socket = io(); //load socket.io-client and connect to the host that
serves the page
let 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
let rSlider =
document.getElementById("redSlider");
let gSlider =
document.getElementById("greenSlider");
let bSlider =
document.getElementById("blueSlider");
let 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" jildiga qayting:
pi@w3demopi:~/nodetest $ cd ..
Kodni ishga tushiring:
pi@w3demopi:~ $ sudo node rgbws.js
Eslatma: “Pigpio” moduli pigpio C kutubxonasidan foydalanganligi sababli, apparatning tashqi qurilmalariga kirish uchun root/sudo imtiyozlarini talab qiladi (masalan GPIO).
Veb-saytni http://[RaspberryPi_IP]:8080/ yordamida brauzerda oching.
Endi RGB LED foydalanuvchi kiritishiga qarab rangini o‘zgartirishi kerak.
Dasturni Ctrl+c bilan yakunlang.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!