單元五 : 閃亮 LED

下一篇 : 串列傳輸

材料


LED x 1
WF8266R x 1

之前的單元都學會了嗎, 接下來要讓 LED 燈閃動起來, 這個需要一點點程式幫忙. 這個單元你將學會如何透過程式來隨心控制 GPIO 而不必限制在前面的物件功能.

配線


LED 長的接 PIN5 短的接 GND

在 WF8266R 開發板中的下面有6的小圓孔, 由左到右分別是 GND 5 4 12 13 5V


完成組合

這樣就完成基本配置了, 接下來插上電源我們轉場到 實驗設計 吧

程式


別害怕, 雖然是程式但是很容易! 首先, 先來了解 wf8266r-ready 事件. 什麼是事件, 簡單來說就是當什麼條件成立時通知我. 例如:我早上8點要出門, 設了鬧鐘7:50, 所以事件就是 7:50 閙鐘會通知我, 接下來我要做的事情是準備出門.

wf8266r-ready 事件表示, WF8266R 已準備好了, 接下來你可以做自已的事. 至於做什麼? 就是要寫程式的地方.

document.addEventListener('wf8266r-ready', function (e) {
    ...
}, false);
        

我們希望接在 GPIO5 腳位上的 LED 能每秒鐘閃動一下, 這要怎麼做呢? 答案是 setInterval 這個幫手, 把他想成一個計時器, 你可以指定它多久做一次事情.

setInterval(function(){
    要做的事情寫在這裡
},毫秒);
        

現在讓我們想想, 1秒鐘要切換一個狀態, 所以我需要一個變數, 給個名字叫 pin5Value 用來存放目前 GPIO5 腳的電位值是高(1)或低(0).

然後要判斷 如果是高電位 就把 pin5Value 設成低, 反之設為高. 如此就會有 高低高低 ... 一直這樣變化下去, 而這個時間就是 1000 毫秒 也就是 1 秒鐘.

var pin5Value = 0;
setInterval(function(){
    if(pin5Value == 0)
        pin5Value = 1;
    else
        pin5Value = 0;

        GPIO.pin(5,pin5Value,function(){}); //將目前存在 pin5Value 裡的高或低電位送到 PIN5 腳 
    },1000);
        

完整範例

<!doctype html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <title>WF8266R LED 燈</title>

    <!-- Imports WF8266R -->
    <script src="http://wf8266.com/wf8266r/webcomponent/jquery-2.1.4.min.js"></script>
    <script src="http://wf8266.com/wf8266r/webcomponent/wf8266r/wf8266r.js"></script>
    <link href="http://wf8266.com/wf8266r/webcomponent/wf8266r/wf8266r.css" rel="stylesheet" />

    <script>
        document.addEventListener('wf8266r-ready', function (e) {
            var pin5Value = 0;
            setInterval(function(){
                if(pin5Value == 0)
                    pin5Value = 1;
                else
                    pin5Value = 0;

                    GPIO.pin(5,pin5Value,function(){});
                },1000);
            }, false);
        $(function () {
            //載入 WF8266R 元件
            GPIO.init();
        });
    </script>

</head>
<body>
    <unu-wf8266r ip="192.168.0.16" uuid="xxxx" device="xxxx"></unu-wf8266r>
</body>
</html>
            
請點下圖開啟範例實做