[ Ruff 開發(fā)套件 ] Lesson 2 - 七彩循環(huán)燈

URLOS 發(fā)布于2019-08-20 10:19 / 2628人閱讀

摘要：第二課七彩循環(huán)燈開發(fā)套件第二課正式開講啦一起來看看我們這次會(huì)有什么新鮮內(nèi)容誰將登場模塊你將學(xué)會(huì)中的周期調(diào)用函數(shù)設(shè)定模塊顏色介紹七彩循環(huán)燈中燈循環(huán)發(fā)出藍(lán)綠青紅紫黃白七種光。最后，創(chuàng)建對象將發(fā)出七彩色代碼放入周期調(diào)用函數(shù)中，設(shè)定調(diào)用周期。

第二課七彩循環(huán)燈

Ruff 開發(fā)套件第二課正式開講啦！

一起來看看我們這次會(huì)有什么新鮮內(nèi)容！

誰將登場：

LED 模塊

你將學(xué)會(huì)

Ruff 中的周期調(diào)用函數(shù)

設(shè)定 LED 模塊顏色

介紹

七彩循環(huán)燈中：

LED 燈循環(huán)發(fā)出“藍(lán)綠青紅紫黃白”七種光。

元件

Ruff 開發(fā)板

LED 模塊

外設(shè)添加

向項(xiàng)目中添加名為“LED”的 LED 模塊，model 選擇 KY-016，驅(qū)動(dòng)版本選擇最新版。

代碼

在編寫代碼之前需要完成 Ruff 開發(fā)板的設(shè)置連接、硬件連線。如果有疑問大家可以到這里了解。

想了解 Ruff 應(yīng)用開發(fā)步驟和模型，可以到這里。

顏色的 RGB 值

為了方便編寫代碼，首先我們將顏色和 RGB 值一一對應(yīng)。

創(chuàng)建一個(gè) color 對象

將七種顏色添加為 color 的屬性，屬性值賦為對應(yīng) RGB 值。

常見顏色和 RGB 值對照表

顏色和 RGB 值一一對應(yīng)實(shí)例：

var color = Object.create({
    blue: 0x0000ff,
    green: 0x00ff00,
    purple: 0xff00ff,
    cyan: 0x00ffff,
    yellow: 0xffff00,
    white: 0x000000,
      red: 0xff0000
});

如果想知道更多顏色的 RGB 值，可以到這里。

發(fā)出七彩色

接下來我們解決：如何讓 LED 模塊按順序發(fā)出七彩色。

這里使用LED 模塊設(shè)定顏色的函數(shù) setRGB ，語法如下：

setRGB(rgb, [callback])

rgb 值是由三個(gè)數(shù)字組成的數(shù)組，或者是一個(gè)24位二進(jìn)制數(shù)。

使用延時(shí)函數(shù) setTimeout 設(shè)定發(fā)光時(shí)間。

setTimeout 函數(shù)可以在第一課復(fù)習(xí)，也可以到這里復(fù)習(xí)。

按順序發(fā)出七彩色實(shí)例步驟和代碼如下：

設(shè)定 LED 發(fā)藍(lán)光；

500ms 時(shí) ，設(shè)定 LED 發(fā)綠光；

1.0s 時(shí) ，設(shè)定 LED 發(fā)青光；

1.5s 時(shí)，設(shè)定 LED 發(fā)紅光；

2.0s 時(shí)，設(shè)定 LED 發(fā)紫光；

2.5s 時(shí)，設(shè)定 LED 發(fā)黃光；

3.0s 時(shí)，設(shè)定 LED 發(fā)白光；

$("#led").setRGB(color.blue);

setTimeout(function () {
    $("#led").setRGB(color.green);
}, 500);
setTimeout(function () {
    $("#led").setRGB(color.cyan);
}, 1000);
setTimeout(function () {
    $("#led").setRGB(color.red);
}, 1500);
setTimeout(function () {
    $("#led").setRGB(color.purple);
}, 2000);
setTimeout(function () {
    $("#led").setRGB(color.yellow);
}, 2500);
setTimeout(function () {
    $("#led").setRGB(color.white);
}, 3000)

周期調(diào)用函數(shù)

接下來我們解決如何循環(huán)發(fā)光的問題。

循環(huán)發(fā)光可以通過按照一定周期調(diào)用發(fā)光函數(shù)實(shí)現(xiàn)。

這里我們使用 setInterval 函數(shù)實(shí)現(xiàn)周期調(diào)用， setInterval 函數(shù)語法如下：

setInterval(表達(dá)式, 周期時(shí)間)

setInterval() 方法可按照指定的周期（以毫秒計(jì)）調(diào)用表達(dá)式。

想了解更多有關(guān) setInterval 函數(shù)的內(nèi)容，可以到這里了解。

最后，

創(chuàng)建 color 對象；

將發(fā)出七彩色代碼放入周期調(diào)用函數(shù)中，設(shè)定調(diào)用周期 3.5s。

大功告成~

快去自己動(dòng)手實(shí)現(xiàn)吧！

完整代碼

"use strict";

$.ready(function (error) {
    if (error) {
        console.log(error);
        return;
    }

    var color = Object.create({
        red: 0xff0000,
        blue: 0x0000ff,
        green: 0x00ff00,
        purple: 0xff00ff,
        cyan: 0x00ffff,
        yellow: 0xffff00,
        white: 0x000000
    });

    var light = setInterval(
        function () {
            $("#led").setRGB(color.blue);
          
            setTimeout(function () {
                $("#led").setRGB(color.green);
            }, 500);
            setTimeout(function () {
                $("#led").setRGB(color.cyan);
            }, 1000);
            setTimeout(function () {
                $("#led").setRGB(color.red);
            }, 1500);
            setTimeout(function () {
                $("#led").setRGB(color.purple);
            }, 2000);
            setTimeout(function () {
                $("#led").setRGB(color.yellow);
            }, 2500);
            setTimeout(function () {
                $("#led").setRGB(color.white);
            }, 3000)
        }, 3500);
});

課后練習(xí) 交通紅綠燈

使用三個(gè) LED 模塊，

LED 模塊組按圖中過程循環(huán)運(yùn)行：