Raspberry Pi WebIOPi IOT—全彩LED聖誕裝飾
耶誕節將近，我們打算製作一個可愛的LED聖誕裝飾！透過使用全彩LED和WebIOPi，我們可以用無線控制的方式實現裝飾彩燈在紅色、藍色和綠色之間的切換。
關於全彩LED
圖1：RGB全彩5mm LED
RGB全彩5mm LED包含三種基本顏色：紅色，綠色和藍色。透過三種顏色相混合可以得到全彩光源。您可以使用任何的透明RGB LED，從Sparkfun，Amazon等可以購買到這些產品。
要控制三種顏色，需要使用4個引腳（3個控制顏色的引腳+GND）。LED的尺寸大於一般的單色LED尺寸。
圖2：摘自OSTA5131A 資料表
LED的方向取決於引腳的長度。最短的引腳為圖2中左側的①。光源的三基色分別分配到每個引腳上：①綠色； ②藍色以及 ④ 紅色。③是“共陰極組”，指一組擁有陰極公共端的電子元件。在本專案中，它對應的是LED的負極，需要將其連接到GND端。
圖3：將全彩LED連接到Raspberry Pi 2
該處的接線非常簡單。這次，我們將綠色連接到引腳11（GPIO 17），藍色連接到引腳13（GPIO 27），紅色連接到引腳15（GPIO 22）。根據LED引腳來使用三個對應並列的引腳可以使接線更加清晰易懂。
現在，讓我們來點亮全彩LED！我嘗試從WebIOPi預設螢幕上的“GPIO 標頭”進行操作。（如果您使用的是WebIOPi，可以透過將設定恢復到原始狀態來顯示WebIOPi預設螢幕。取消掉[SCRIPTS]中的myproject和[HTTP]中的doc-root注釋）
如視訊中所示，光照強度很大，所以請注意不要直視它！如果您使用了LED漫射器（如橡膠帽等），就可以調低光線亮度。另外，全彩LED的光照強度存在個體差異，所以我們透過更改電阻值對光照強度進行調整。
Raspberry Pi的GPIO引腳是數位輸出，所以輸出值為1或0（開/關）。一共有2種模式×3種顏色，除了斷路狀態，可以展現出7種顏色，如圖4所示。
圖4：加成色
雖然可以表達出七種顏色，但如果僅僅是這樣，就太浪費了。這種情況下，對WebIOPi程式設計就可以派上用場了。透過對WebIOPi進行程式設計，您可以將燈光調整為自己喜歡的顏色。
關於PWM
為了從WebIOPi控制全彩LED，需要使用脈衝寬度調製（PWM）的方法。
PWM – Arduino
脈寬調製（PWM）是一種透過數文書處理方式獲取類比訊號的技術。數位控制用於創建方波訊號，即一種在開和關兩種狀態之間切換的訊號。這種切換模式可以透過改變訊號處於開狀態所用時間與訊號處於關狀態所用時間之間的比例來類比開（5V）至關（0V）之間的電壓。“開通狀態”所持續時間被稱為脈衝寬度。為了獲得變化的類比值，您可以更改或調製脈衝寬度。例如，如果將LED以足夠快的頻率重複這種切換模式，最終呈現出來的效果就會和輸出了0V到5V之間的用於控制LED亮度的穩定電壓一樣。
在數位訊號中，只有ON（開）和OFF（關）這兩種類型的訊號。透過使用在一個週期內接通（ON）時間和斷路（OFF）時間之間的比例（占空比），可以處理0 至100%之間的值。
圖5：占空比
上圖中有關占空比的內容很容易理解。再次說明，波形處於5V時是ON，處於0V時是OFF。該比例是透過計算一個週期內的占比獲取的。
現在，我們來看一看WebIOPi中的一些便捷函數。
創建HTML文件
我們從HTML檔開始。WebIOPi中內建有用於PWM控制的滑標零件。
|
1 2 3 4 |
// Only for Chrome and Safari, create a slider that pulse out a 0-100% duty cycle ratio on GPIO 8 button = webiopi().createRatioSlider(8); content.append(button); |
該零件代碼內含在範例中的51至53行。注釋文本中顯示“僅適用Chrome 和Safari”，但其實也適用Windows Internet Explorer、Opera以及Firefox等其他瀏覽器。
WebIOPi.createRatioSlider (gpio, ratio)
Returns a slider that send its value as a PWM duty cycle ratio
(int) gpio: GPIO number from 0 to 53
(float) ratio: slider’s init value
要使用該函數，只要在第一個參數中輸入GPIO編號就可以了！文件中聲明了可以為第二個參數設定初始值，但是在當前版本中似乎並沒有對該值作出響應（如果有興趣的話，請參考webiopi.js中第504行）。
現在，我們來為全彩LED創建一個HTML檔吧！
/home/pi/webiopi_sample/html/index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" /> <title>WebIOPi | Demo</title> <script type="text/javascript" src="/webiopi.js"></script> <script type="text/javascript"> webiopi().ready(function() { var parts; // red parts = webiopi().createRatioSlider(22); $("#red").append(parts); // green parts = webiopi().createRatioSlider(17); $("#green").append(parts); // blue parts = webiopi().createRatioSlider(27); $("#blue").append(parts); //specify initial value $("#ratio22").val(0); $("#ratio17").val(0); $("#ratio27").val(0); }); </script> <style type="text/css"> input[type="range"] { display: block; width: 160px; height: 45px; } </style> </head> <body> <div id="content" align="center"> <div id="red"><label>red</label></div> <div id="green"><label>green</label></div> <div id="blue"><label>blue</label></div> </div> </body> </html> |
我們製作了三個滑動條，這樣就可以設定RGB每個顏色的值了。使用createRatioSlider函數之後的HTML輸出如下所示：
|
1 |
<input type="range" step="0.01" max="1.0" min="0.0" id="ratio17"> |
該滑動條可以以0.01的步距在0.0至1.0（0至100%）之間滑動。
由於已經分配了id，如果您想要設定初始值（如第21至23行所示），您可以使用jQuery對進行設定。
|
1 |
$("#ratio17").val(0); |
當您在瀏覽器中對其進行顯示時，將會出現如下螢幕內容：
圖 6.
為了與LED連結，必須在Python端執行初始設定。
