[ Ruff 開發套件 ] Lesson 2 - 七彩循環燈

第二課 七彩循環燈

Ruff 開發套件第二課正式開講啦！

一塊兒來看看咱們此次會有什麼新鮮內容！

• 誰將登場：

  • LED 模塊

• 你將學會

  • Ruff 中的週期調用函數

  • 設定 LED 模塊顏色

介紹

七彩循環燈中：

• LED 燈循環發出「藍綠青紅紫黃白」七種光。

元件

• Ruff 開發板

• LED 模塊

外設添加

• 向項目中添加名爲「LED」的 LED 模塊，model 選擇 KY-016，驅動版本選擇最新版。

代碼

• 在編寫代碼以前須要完成 Ruff 開發板的設置鏈接、硬件連線。若是有疑問你們能夠到這裏瞭解。

• 想了解 Ruff 應用開發步驟和模型，能夠到這裏。

顏色的 RGB 值

爲了方便編寫代碼，首先咱們將顏色和 RGB 值一一對應。

• 建立一個 color 對象

• 將七種顏色添加爲 color 的屬性，屬性值賦爲對應 RGB 值。

  • 常見顏色和 RGB 值對照表

  

• 顏色和 RGB 值一一對應實例：

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

• 若是想知道更多顏色的 RGB 值，能夠到這裏。

發出七彩色

接下來咱們解決：如何讓 LED 模塊按順序發出七彩色。

• 這裏使用LED 模塊設定顏色的函數 setRGB ，語法以下：

  • setRGB(rgb, [callback])

    • rgb 值是由三個數字組成的數組，或者是一個24位二進制數。

• 使用延時函數 setTimeout 設定發光時間。

  • setTimeout 函數能夠在 第一課 複習，也能夠到這裏複習。

• 按順序發出七彩色實例步驟和代碼以下：

  • 設定 LED 發藍光；

  • 500ms 時 ，設定 LED 發綠光；

  • 1.0s 時 ，設定 LED 發青光；

  • 1.5s 時，設定 LED 發紅光；

  • 2.0s 時，設定 LED 發紫光；

  • 2.5s 時，設定 LED 發黃光；

  • 3.0s 時，設定 LED 發白光；

$('#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)

週期調用函數

接下來咱們解決如何循環發光的問題。

• 循環發光能夠經過按照必定週期調用發光函數實現。

  • 這裏咱們使用 setInterval 函數實現週期調用， setInterval 函數語法以下：

    • setInterval(表達式, 週期時間)

  • setInterval() 方法可按照指定的週期（以毫秒計）調用表達式。

• 想了解更多有關 setInterval 函數的內容，能夠到這裏瞭解。

最後，

• 建立 color 對象；

• 將發出七彩色代碼放入週期調用函數中，設定調用週期 3.5s。

大功告成~

快去本身動手實現吧！

完整代碼

'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);
});

課後練習

交通紅綠燈

使用三個 LED 模塊，

• LED 模塊組按圖中過程循環運行：