Node.js Raspberry Pi RGB LED（WebSocket付き）
パルス幅変調の使用
前の章では、WebSocketの使用方法と、GPIOを使用してLEDのオンとオフを切り替える方法を学びました。
この章では、RGB LEDとPWM（パルス幅変調）を使用して、WebSocketを介したユーザー入力に基づいてさまざまな色を表示する章を使用します。
RGB LEDは、3つの異なる色のLEDです。赤、緑、青のLED（RGB LED）があります。
また、PWMを使用して、3つのLEDの個々の強度を設定できます。これにより、それらを混ぜ合わせて色を設定することができます。
私たちは何が必要なのか？
この章では、WebSocketを介してWebページでRGBLEDを制御する例を作成します。
このために必要なもの：
- Node.jsがインストールされたRaspian、インターネット、SSHを備えたRaspberry Pi
- Node.jsの pigpioモジュール
- Node.jsの socket.ioモジュール
- 1xブレッドボード
- 3 x220オーム抵抗器
- 1 x RGB LED（共通アノードまたは共通カソード）
- 4xメスからオスへのジャンパー線
さまざまなコンポーネントの説明については、上のリストのリンクをクリックしてください。
注：必要な抵抗は、使用するLEDのタイプによって、使用する抵抗とは異なる場合があります。ほとんどの小さなLEDは、約200〜500オームの小さな抵抗しか必要としません。通常、使用する正確な値は重要ではありませんが、抵抗の値が小さいほど、LEDが明るくなります。
pigpioモジュールをインストールします
以前は、「onoff」モジュールを使用しました。これは、オンとオフを切り替えるだけでうまく機能します。ここで、LEDの強度を設定したいので、もう少し機能的なGPIOモジュールが必要です。
PWMを可能にするため、「pigpio」Node.jsモジュールを使用します。
PWMを使用すると、LEDの強度を0〜255に設定できます。
「pigpio」Node.jsモジュールは、pigpioCライブラリに基づいています。
「Lite」バージョンのRaspbianを使用している場合、これは含まれていない可能性が高く、手動でインストールする必要があります。
システムパッケージリストを更新します。
pi@w3demopi:~ $ sudo apt-get update
pigpioCライブラリをインストールします。
pi@w3demopi:~ $ sudo apt-get install pigpio
これで、npmを使用して「pigpio」Node.jsモジュールをインストールできます。
pi@w3demopi:~ $ npm install pigpio
これで「pigpio」モジュールがインストールされ、これを使用してRaspberryPiのGPIOと対話できます。
注：「pigpio」モジュールはpigpio Cライブラリを使用するため、ハードウェア周辺機器（GPIOなど）にアクセスするにはroot / sudo権限が必要です。
回路の構築
次に、ブレッドボードに回路を構築します。
電子機器を初めて使用する場合は、RaspberryPiの電源をオフにすることをお勧めします。また、静電気防止マットまたは接地ストラップを使用して、損傷を防ぎます。
次のコマンドを使用して、RaspberryPiを適切にシャットダウンします。
pi@w3demopi:~ $ sudo shutdown -h now
Raspberry PiのLEDの点滅が止まったら、Raspberry Piから電源プラグを抜きます（または接続されている電源タップを回します）。
正しくシャットダウンせずにプラグを抜くだけで、メモリーカードが破損する場合があります。
この回路を構築する際には、共通のアノードまたは共通のカソードであるRGBLEDがあるかどうかを知ることが重要です。
プロバイダーに確認するか、自分でテストすることができます。
ケーブルをGNDと3.3Vピンに接続します。GNDをRGBLEDの最も長いレッグに接続し、3.3Vを他のレッグに接続します。点灯している場合は、RGBLEDに共通のカソードがあります。そうでない場合は、共通のアノードがあります。
上の回路図を見てください。
- 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
- ブレッドボードで、LEDのBLUEレッグを使用して、列の左右の接地バス列の間に抵抗を接続します。この例では、行4、列EおよびFに添付しています。
これで回路が完成し、接続は上の図のようになります。
次に、Raspberry Piを起動し、Node.jsスクリプトを記述してRaspberryPiと対話します。
上の回路図を見てください。
- 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)
- ブレッドボードで、4番目のジャンパー線のオスの脚を、共通のアノードを接続した右側のアースバス列の同じ列に接続します。この例では、行2、列Fに接続しました。
これで回路が完成し、接続は上の図のようになります。
次に、Raspberry Piを起動し、Node.jsスクリプトを記述してRaspberryPiと対話します。
RaspberryPiとNode.jsRGBLEDとWebSocketスクリプト
「nodetest」ディレクトリに移動し、「」という名前の新しいファイルを作成しますrgbws.js。
pi@w3demopi:~ $ nano rgbws.js
これでファイルが開き、組み込みのNanoEditorで編集できます。
次のように書くか、貼り付けます。
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ます。
RaspberryPiとNode.jsWebSocket UI
次に、WebSocketを介したユーザー入力を可能にするHTMLを追加します。
このために私たちは欲しい：
- 各色に1つずつ、合計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」モジュールはpigpio Cライブラリを使用するため、ハードウェア周辺機器（GPIOなど）にアクセスするにはroot / sudo権限が必要です。
http：// [RaspberryPi_IP]：8080 /を使用して、ブラウザでWebサイトを開きます。
これで、RGBLEDはユーザー入力に応じて色が変わるはずです。
プログラムを。で終了しCtrl+cます。