WebSocket ဖြင့် Node.js Raspberry Pi RGB LED

Pulse-Width Modulation ကိုအသုံးပြုခြင်း။

ယခင်အခန်းများတွင် WebSocket ကိုအသုံးပြုနည်းနှင့် LEDs အဖွင့်အပိတ်လုပ်နည်းတို့ကို လေ့လာခဲ့ပြီးဖြစ်သည်။

ဤအခန်းတွင် WebSocket မှတစ်ဆင့် သုံးစွဲသူထည့်သွင်းမှုအပေါ်အခြေခံ၍ မတူညီသောအရောင်များကိုပြသရန် PWM (Pulse-width modulation) ပါရှိသော RGB LED ကိုအသုံးပြုပါမည်။

RGB LED သည် အရောင် 3 မျိုးရှိသော LED တစ်ခုဖြစ်သည်။ ၎င်းတွင် အနီရောင်၊ အစိမ်းနှင့် အပြာ LED (RGB LED) ပါရှိသည်။

PWM ကိုအသုံးပြု၍ LEDs 3 ခု၏တစ်ဦးချင်းစီအားကိုကျွန်ုပ်တို့သတ်မှတ်နိုင်သည်။ ၎င်းသည် ကျွန်ုပ်တို့အား ၎င်းတို့ကို ရောနှောရန်၊ အရောင်တစ်ခု သတ်မှတ်ရန် ခွင့်ပြုပါမည်။

ငါတို့ ဘာလိုလဲ?

ဤအခန်းတွင် WebSocket မှတစ်ဆင့် ဝဘ်စာမျက်နှာတစ်ခုနှင့် RGB LED ကို ထိန်းချုပ်သည့် ဥပမာတစ်ခု ဖန်တီးပါမည်။

ဤအရာအတွက် သင်လိုအပ်သည်-

Node.js ထည့်သွင်းထားသည့် Raspberry Pi၊ အင်တာနက်၊ SSH၊
Node.js အတွက် pigpio module
Node.js အတွက် socket.io မော် ဂျူး
1 x ပေါင်မုန့်ပြား
3 x 220 Ohm resistor
1 x RGB LED (ဘုံ anode သို့မဟုတ် ဘုံ cathode)
4 x အမျိုးသမီးမှ အထီး jumper ဝါယာကြိုးများ

မတူညီသောအစိတ်အပိုင်းများ၏ဖော်ပြချက်များအတွက် အထက်ဖော်ပြပါစာရင်းရှိလင့်ခ်များကို နှိပ်ပါ။

မှတ်ချက်- သင်အသုံးပြုသည့် LED အမျိုးအစားပေါ်မူတည်၍ သင်လိုအပ်သော ခုခံအားသည် ကျွန်ုပ်တို့အသုံးပြုသည့်အရာနှင့် ကွဲပြားနိုင်ပါသည်။ သေးငယ်သော LED အများစုသည် 200-500 ohms ဝန်းကျင်ရှိသော သေးငယ်သော resistor တစ်ခုသာ လိုအပ်သည်။ သင်အသုံးပြုသည့်တန်ဖိုးအတိအကျကို ယေဘူယျအားဖြင့် အရေးမယူသော်လည်း resistor ၏တန်ဖိုးသေးငယ်လေ၊ LED သည် ပိုမိုတောက်ပလာမည်ဖြစ်သည်။

pigpio Module ကို ထည့်သွင်းပါ။

အစောပိုင်းတွင် ကျွန်ုပ်တို့သည် အဖွင့်အပိတ်လုပ်ရန်အတွက် ကောင်းမွန်သော "ဖွင့်ခြင်း" module ကို အသုံးပြုထားပါသည်။ ယခု ကျွန်ုပ်တို့သည် LEDs များ၏ အစွမ်းသတ္တိကို သတ်မှတ်လိုသည်၊ ထို့ကြောင့် ကျွန်ုပ်တို့သည် ပိုမိုလုပ်ဆောင်နိုင်စွမ်းရှိသော GPIO Module တစ်ခု လိုအပ်ပါသည်။

၎င်းသည် PWM အတွက်ခွင့်ပြုသောကြောင့် ကျွန်ုပ်တို့သည် "pigpio" Node.js module ကို အသုံးပြုပါမည်။

PWM ဖြင့် LED တစ်လုံး၏ စွမ်းအားကို 0 မှ 255 အထိ သတ်မှတ်နိုင်သည်။

"pigpio" Node.js မော်ဂျူးသည် pigpio C စာကြည့်တိုက်ကို အခြေခံထားသည်။

အကယ်၍ သင်သည် Raspbian ၏ "Lite" ဗားရှင်းကို အသုံးပြုနေပါက၊ ၎င်းတွင် မပါဝင်ဘဲ လူကိုယ်တိုင် ထည့်သွင်းရပါမည်။

သင့်စနစ်ပက်ကေ့ဂျ်စာရင်းကို အပ်ဒိတ်လုပ်ပါ-

pi@w3demopi:~ $ sudo apt-get update

pigpio C စာကြည့်တိုက်ကို ထည့်သွင်းပါ-

pi@w3demopi:~ $ sudo apt-get install pigpio

ယခု ကျွန်ုပ်တို့သည် npm ကို အသုံးပြု၍ "pigpio" Node.js module ကို ထည့်သွင်းနိုင်သည်-

pi@w3demopi:~ $ npm install pigpio

ယခု "pigpio" module ကိုထည့်သွင်းသင့်ပြီး Raspberry Pi ၏ GPIO နှင့် အပြန်အလှန်တုံ့ပြန်ရန်အတွက် ၎င်းကို ကျွန်ုပ်တို့အသုံးပြုနိုင်ပါသည်။

မှတ်ချက်- "pigpio" module သည် pigpio C စာကြည့်တိုက်ကို အသုံးပြုထားသောကြောင့်၊ ၎င်းသည် ဟာ့ဒ်ဝဲအရံပစ္စည်းများ (GPIO ကဲ့သို့) အသုံးပြုရန် root/sudo အထူးအခွင့်အရေးများ လိုအပ်ပါသည်။

ပတ်လမ်းတည်ဆောက်ခြင်း။

ယခု ကျွန်ုပ်တို့၏ Breadboard တွင် ဆားကစ်ကို တည်ဆောက်ရန် အချိန်ကျရောက်ပြီဖြစ်သည်။

အကယ်၍ သင်သည် အီလက်ထရွန်နစ်ပစ္စည်းကို တတ်ကျွမ်းသူဖြစ်ပါက Raspberry Pi အတွက် ပါဝါပိတ်ရန် အကြံပြုအပ်ပါသည်။ ပြီးလျှင် မပျက်စီးစေရန် ဆန့်ကျင်ဘက် ဖျာ သို့မဟုတ် မြေစိုက်သိုင်းကြိုးကို အသုံးပြုပါ။

အမိန့်ဖြင့် Raspberry Pi ကို ကောင်းစွာပိတ်ပါ။

pi@w3demopi:~ $ sudo shutdown -h now

Raspberry Pi တွင် LED မီးများ မှိတ်တုတ်မှိတ်တုတ် ရပ်တန့်ပြီးနောက် Raspberry Pi မှ ပါဝါပလပ်ကို ဆွဲထုတ်ပါ (သို့မဟုတ် ၎င်းနှင့် ချိတ်ဆက်ထားသည့် ပါဝါကြိုးကို လှည့်ပါ)။

ကောင်းစွာမပိတ်ဘဲ ပလပ်ကိုဆွဲလိုက်ရုံဖြင့် မန်မိုရီကတ်ကို ပျက်စီးစေနိုင်သည်။

ဤပတ်လမ်းကြောင်းကိုတည်ဆောက်ရာတွင် သင့်တွင် ဘုံ anode သို့မဟုတ် ဘုံ cathode၊ RGB LED ရှိမရှိ သိရန်အရေးကြီးပါသည်။

သင့်ဝန်ဆောင်မှုပေးသူနှင့် စစ်ဆေးနိုင်သည် သို့မဟုတ် သင်ကိုယ်တိုင် စမ်းသပ်နိုင်သည်-

ကြိုးများကို GND နှင့် 3.3V pin သို့ ချိတ်ဆက်ပါ။ RGB LED ၏အရှည်ဆုံးခြေထောက်နှင့် 3.3 V ကို အခြားခြေထောက်နှင့် GND ချိတ်ဆက်ပါ။ မီးလင်းလာပါက၊ သင်၏ RGB LED တွင် ဘုံ cathode တစ်ခုရှိသည်။ မဟုတ်ပါက၊ ၎င်းတွင် common anode ရှိသည်။

Breadboard နှင့်အတူ Raspberry Pi 3 RGB LED မှာ အသုံးများတဲ့ Cathode ပါ။

ပတ်လမ်း၏အထက်ပုံဥပမာကိုကြည့်ပါ။

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
Breadboard တွင်၊ LED ၏ BLUE ခြေထောက်ဖြင့် အတန်းအတွက် ဘယ်နှင့်ညာ မြေပြင်ဘတ်စ်ကားကော်လံများကြား ခုခံအားတစ်ခုကို ချိတ်ဆက်ပါ။ ဤဥပမာတွင် အတန်း 4၊ ကော်လံ E နှင့် F တွင်တွဲထားသည်။

သင့်ပတ်လမ်းသည် ယခု ပြီးပြည့်စုံသင့်ပြီး သင်၏ချိတ်ဆက်မှုများသည် အထက်ဖော်ပြပါပုံနှင့် တော်တော်လေး ဆင်တူနေသင့်ပါသည်။

ယခု Raspberry Pi ကိုဖွင့်ပြီး ၎င်းနှင့်အပြန်အလှန်တုံ့ပြန်ရန်အတွက် Node.js script ကိုရေးပါ။

Breadboard နှင့်အတူ Raspberry Pi 3 RGB LED မှာ အသုံးများတဲ့ Anode ပါ။

ပတ်လမ်း၏အထက်ပုံဥပမာကိုကြည့်ပါ။

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)
Breadboard တွင်၊ သင် common anode နှင့် ချိတ်ဆက်ထားသော ညာဘက်မြေပြင်ဘတ်စ်ကော်လံ၏ တူညီသောအတန်းနှင့် forth jumper wire ၏အထီးခြေထောက်ကို ချိတ်ဆက်ပါ။ ဤဥပမာတွင် အတန်း 2 ကော်လံ F နှင့် ချိတ်ဆက်ထားသည်။

Raspberry Pi နှင့် Node.js RGB LED နှင့် WebSocket Script

"nodetest" directory ကိုသွားပြီး " " ဟုခေါ်သော ဖိုင်အသစ်တစ်ခုကို ဖန်တီးပါ rgbws.js။

pi@w3demopi:~ $ nano rgbws.js

ဖိုင်ကို ယခုဖွင့်ထားပြီး Nano Editor ဖြင့် တည်းဖြတ်နိုင်ပါသည်။

အောက်ပါတို့ကို ရေးပါ၊ သို့မဟုတ် ကူးထည့်ပါ-

rgbws.js

Ctrl+xကုဒ်ကိုသိမ်းဆည်းရန် "" ကိုနှိပ်ပါ ။ "" ဖြင့်အတည်ပြုပါ y၊ "" အမည်ဖြင့်အတည်ပြုပါ Enter။

အောက်ပါတို့ကို ရေးပါ၊ သို့မဟုတ် ကူးထည့်ပါ-

rgbws.js

Raspberry Pi နှင့် Node.js WebSocket UI

ယခုအချိန်သည် WebSocket မှတဆင့်အသုံးပြုသူထည့်သွင်းရန်ခွင့်ပြုသော HTML ကိုထည့်ရမည့်အချိန်ဖြစ်သည်။

ဤအရာအတွက် ကျွန်ုပ်တို့ လိုချင်သည်မှာ-

ရောင်စုံဆလိုက် ၃ ခု၊ တစ်ရောင်စီ (RGB) အတွက် တစ်ခု၊
အရောင်ရွေးချယ်မှုတစ်ခု
လက်ရှိအရောင်ကိုပြသသည့် div တစ်ခု

"အများပြည်သူ" ဖိုဒါသို့သွားပါ-

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

http://[RaspberryPi_IP]:8080/ ကို အသုံးပြု၍ ဘရောက်ဆာတွင် ဝဘ်ဆိုက်ကိုဖွင့်ပါ။

ယခုအခါ RGB LED သည် အသုံးပြုသူထည့်သွင်းမှုအပေါ် မူတည်၍ အရောင်ပြောင်းသင့်သည်။

အစီအစဉ်ကို အဆုံးသတ်ပါ Ctrl+c။

❮ ယခင် နောက်တစ်ခု ❯

Node.js ကျူတိုရီရယ်

Node.js MySQL

Node.js MongoDB

Raspberry Pi

Node.js အ ကိုး အကား

WebSocket ဖြင့် Node.js Raspberry Pi RGB LED

Pulse-Width Modulation ကိုအသုံးပြုခြင်း။

ငါတို့ ဘာလိုလဲ?

pigpio Module ကို ထည့်သွင်းပါ။

ပတ်လမ်းတည်ဆောက်ခြင်း။

Raspberry Pi နှင့် Node.js RGB LED နှင့် WebSocket Script

rgbws.js

rgbws.js

Raspberry Pi နှင့် Node.js WebSocket UI