[ 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 模块组按图中过程循环运行：