Arduino与JavaScript开发实例-LED-RGB颜色控制

LED-RGB颜色控制

Johnny-Five库中的Led.RGB类构造了表示连接到物理板上的RGB LED的对象。本次实例将演示如何在Electron的基础上通过Johnny-Five库与Arduino开发板通信，实现对RGB颜色显示控制及单通道显示强度控制。

1、硬件准备

  • Arduino Mega2560开发板一块
  • 发光RGB LED一个（这里选择共阴极，一共四个引脚）
  • 杜邦线若干
  • 数据线一条

硬件接线如下：

Arduino Mega 2560 开发板 引脚 RGB LED引脚
GND GND
5 Red
6 Green
7 Blue

2、软件准备

  • VS Code IDE
  • Arduino IDE
  • NodeJs(本次使用的版本为v16.13.0)
  • Visual Studio 2019
  • Electron(本次使用版本为v17.0.1)

前面的文章已经对Arduino与JavaScript开发环境已经做了详细描述，请参考：Arduino与JavaScript开发实例-开发环境搭建

3、代码实现

3.1 Led.RGB对象创建描述

Led.RGB 类构造表示 RGB Led 的对象。其构造参数如下：

  • pin:一个包含红色、绿色和蓝色引脚的数组。 所有引脚都必须支持 PWM。
序号 数据类型 值/描述 默认值 是否必须
0 Number PWM 能够控制红色 是
1 Number PWM 能够控制绿色 是
2 Number PWM 能够控制蓝色 是
  • options：
属性 类型 值/描述 默认值 是否必须
pins Object 请参阅下面的pins表 Yes (either)
pins Array 请参阅下面的pins表 Yes (either)
isAnode Boolean true或false。 将此设置为true以指示 LED 是共阳极 LED。 默认为 false，表示共阴极 LED。 no
controller String 默认，PCA9685，BLINKM。 控制器接口类型。 "DEFAULT" no 
+ **pins**:对象



| 序号 | 数据类型 | 值/描述 | 默认值 | 是否必须 |
| --- | --- | --- | --- | --- |
| 0 | Number | PWM 能够控制红色 |  | 是 |
| 1 | Number | PWM 能够控制绿色 |  | 是 |
| 2 | Number | PWM 能够控制蓝色 |  | 是 |
+ **pins** (Array)



| 序号 | 数据类型 | 值/描述 | 默认值 | 是否必须 |
| --- | --- | --- | --- | --- |
| 0 | Number | PWM 能够控制红色 |  | 是 |
| 1 | Number | PWM 能够控制绿色 |  | 是 |
| 2 | Number | PWM 能够控制蓝色 |  | 是 |

构建Led.RGB对象示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// With Options object & pins object
new five.Led.RGB({
  pins: {
    red: 6,
    green: 5,
    blue: 3
  }
});

// With Options object & pins array
new five.Led.RGB({
  pins: [6, 5, 3]
});

// With pins array
new five.Led.RGB([6, 5, 3]);

共阳极时，初始化代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// With Options object & pins object
new five.Led.RGB({
  pins: {
    red: 6,
    green: 5,
    blue: 3
  },
  isAnode: true
});

// With Options object & pins array
new five.Led.RGB({
  pins: [6, 5, 3],
  isAnode: true
});

通过使用控制器，初始化代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// With Options object & pins object
new five.Led.RGB({
  controller: "PCA9685",
  pins: {
    red: 2,
    green: 1,
    blue: 0
  }
});

// With Options object & pins array
new five.Led.RGB({
  controller: "PCA9685",
  pins: [2, 1, 0]
});

3.1.2 调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {
  var a = new five.Led.RGB([ 9, 10, 11 ]);

  var b = new five.Led.RGB({
    pins: {
      red: 3,
      green: 5,
      blue: 6
    }
  });

  this.repl.inject({
    a: a,
    b: b
  });

  a.strobe(500);
  b.strobe(1000);
});

颜色设置：

1
2
3
4
var led = new five.Led.RGB([9, 10, 11]);

led.color("#ff00ff");

函数color，实现对RGB设置，其参数如下：

有效的颜色参数 示例(s) 调用
任何 CSS 颜色名称字符串 "red", "green", "blue" rgb.color("red")
十六进制颜色字符串 "ff0000", "00ff00", "0000ff" rgb.color("0000ff")
十六进制颜色字符串，带前导 # "#ff0000", "#00ff00", "#0000ff" rgb.color("#0000ff")
8 位字节数组 [0xff, 0x00, 0x00] rgb.color([0xff, 0x00, 0x00])
8 位字节的对象 { red: 0x00, green: 0xFF, blue: 0x00 } rgb.color({ red: 0x00, green: 0xFF, blue: 0x00 })

3.2 Electron控制实现

3.2.1 应用程序描述package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "Arduino Firmata Electron",
  "version": "0.0.1",
  "main": "main.js",
  "dependencies": {
    "@simonwep/pickr": "^1.8.2",
    "bootstrap": "^5.1.3",
    "echarts": "^5.3.0",
    "jquery": "^3.6.0",
    "socket.io": "^4.4.1",
    "ws": "^8.5.0",
    "mqtt": "^4.3.6",
    "johnny-five": "^2.1.0",
    "path": "^0.12.7",
    "react": "^17.0.2",
    "react-bootstrap": "^2.2.0",
    "react-dom": "^17.0.2",
    "react-scripts": "^5.0.0"
  }
}

3.2.2 应用程序页面(index.html)

Electron应用程序的页面通过Bootstrap、Bootstrap Slider插件、JQuery实现。代码如下：

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>LED-RGB控制</title>
    <script>window.$ = window.jQuery = require('jquery');</script>
    <script src="../js/bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-slider/dist/bootstrap-slider.min.js"></script>
    <script>
 window.echarts = require('echarts');
 </script>
    <link href="../js/bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet"></link>
    <link href="../js/bootstrap-slider/dist/css/bootstrap-slider.min.css" rel="stylesheet"></link>
</head>

<body>
    <div class="row">
    
        <div class="col-md">
            <div class="panel panel-default">
                <div class="panel-heading">LED-RGB颜色控制</div>
                <div class="panel-body">
                    <input type="color" class="form-control form-control-color" id="led-rgb-color-picker"
 value="#563d7c">
                </div>
                <div class="panel-footer" id="led-rgb-value-title">当前颜色值:#563d7c</div>
            </div>
        </div>

        <div class="col-md">
            <div class="panel panel-default">
                <div class="panel-heading">RGB单通道亮度强度控制</div>
                <div class="panel-body">
                    <div class="row">
                        <label class="form-check-label" for="led-r-intensity-slider-d">R:</label>
                            <input id="led-r-intensity-slider" data-slider-id='led-r-intensity-slider-d' type="text" data-slider-min="0" 
 data-slider-max="100" 
 data-slider-step="1" data-slider-value="100"/>
                    </div>
                    <div class="row">
                        <label class="form-check-label" for="led-g-intensity-slider-d">G:</label>
                            <input id="led-g-intensity-slider" data-slider-id='led-g-intensity-slider-d' type="text" data-slider-min="0" 
 data-slider-max="100" 
 data-slider-step="1" data-slider-value="100"/>
                    </div>
                    <div class="row">
                        <label class="form-check-label" for="led-b-intensity-slider-d">B:</label>
                            <input id="led-b-intensity-slider" data-slider-id='led-b-intensity-slider-d' type="text" data-slider-min="0" 
 data-slider-max="100" 
 data-slider-step="1" data-slider-value="100"/>
                    </div>
                </div>
                <div class="panel-footer" id="led-rgb-intensity-title"></div>
            </div>
        </div>
    </div>
    <script src="../js/renderer/led\_rgb\_renderer.js"></script>
</body>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HR66Lvqg-1653369590839)(images/03-1.png)]

3.2.3 应用程序页面逻辑控制(led_rgb_renderer.js)
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
const { ipcRenderer } = require('electron')

$('#led-rgb-color-picker').on('change',() => {
    let color = $('#led-rgb-color-picker').val()
    console.log(color)
    ipcRenderer.send('led-rgb',{color:color})
    $('#led-rgb-value-title').html('当前颜色值:' + color)
})

// LED RGB强度调节
var ledColorRedIntensitySlider = $('#led-r-intensity-slider').bootstrapSlider().on('change',() => {
    let intensity = $('#led-r-intensity-slider').bootstrapSlider('getValue')
    ipcRenderer.send('led-intensity-red',{intensity:intensity})
})

var ledColorGreenIntensitySlider = $('#led-g-intensity-slider').bootstrapSlider().on('change',() => {
    let intensity = $('#led-g-intensity-slider').bootstrapSlider('getValue')
    ipcRenderer.send('led-intensity-green',{intensity:intensity})
})

var ledColorBlueIntensitySlider = $('#led-b-intensity-slider').bootstrapSlider().on('change',() => {
    let intensity = $('#led-b-intensity-slider').bootstrapSlider('getValue')
    ipcRenderer.send('led-intensity-blue',{intensity:intensity})
})

3.2.4 主程序逻辑(main.js)

Electron窗口初始化代码请参考前面文章，在这里就不再描述了。请在main.js文件中添加如下代码：

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
const five = require('johnny-five')

const board = new five.Board({port:'COM12',repl:false})

board.on('ready',() => {
    console.log('board inited')
    const led = new five.Led(13)
    let isLedBlinking = false;

    const rgbLed = new five.Led.RGB({
        pins: {
            red: 5,
            green: 6,
            blue: 7
        },
    });
	
    ipcMain.on('led-rgb',(event,arg) => {
        let color = arg.color
        rgbLed.on()
        rgbLed.color(color)
       // rgbLed.blink(500)
    })

    ipcMain.on('led-intensity-red',(event,arg) => {
        rgbLed.color("#FF0000");
        rgbLed.intensity(arg.intensity)
    })
    ipcMain.on('led-intensity-green',(event,arg) => {
        rgbLed.color("#00FF00");
        rgbLed.intensity(arg.intensity)
    })
    ipcMain.on('led-intensity-blue',(event,arg) => {
        rgbLed.color("#0000FF");
        rgbLed.intensity(arg.intensity)
    })
})


文章来源: https://iotsmart.blog.csdn.net/article/details/124945066