Arduino与JavaScript开发实例-LED点阵显示控制（Max7219控制器）

LED点阵显示控制（Max7219控制器）

文章目录

LED 矩阵或 LED 显示器是一种大型、低分辨率形式的点矩阵显示器，可用于工业和商业信息显示以及爱好者人机界面。 它由一个二维二极管矩阵组成，其阴极成行连接，阳极连接成列（反之亦然）。

在这里插入图片描述

Johnny-Five库提供了Led点阵驱动封装：Led.Matrix。本次实例将演示如何控制Led点阵显示不同的文字及图案。

1、Led.Matrix对象构建

Led.Matrix 类构造一个对象，该对象可以表示连接到物理板上的一个或多个（链式）8x8 或 8x16 LED 矩阵（MAX7219、MAX7221 和 HT16K33）器件。 一个实例最多可以控制 8 个设备，提供 512 个可控 LED。

Led.Matrix构建参数如下：

  • General Options:属性参数的对象
属性名称 数据类型 值/描述 默认值 是否必须
pins Object { data, clock, cs }. 数字引脚名称的对象 是
pins Array [ data, clock, cs ]. 数字引脚名称数组 是
devices Number 1-8.对于单个设备情况，可以省略 1 否
controller string “HT16K33”. 有效的控制器型号名称 否
  • HT16K33选项：**(controller: "HT16K33")**Arduino 需要 StandardFirmata 2.4.0 或更高版本
属性名称 数据类型 值/描述 默认值 是否必须
addresses array 一组 I2C 地址 范围：0x70-0x77 否
isBicolor Boolean true, false. false 否
dims Object {rows, columns}. 参考下面尺寸表 8x8 否
dims Array [rows, columns]. 参考下面尺寸表 8x8 否
dims String “8x8”, “16x8” or “8x16”. 8x8 否 
+ 尺寸表



| 名称 | 行 | 列 |
| --- | --- | --- |
| 8x8 | 8 | 8 |
| 16x8 | 16 | 8 |
| 8x16 | 8 | 16 |

Led.Matrix初始化：

1）移位寄存器设备

1
2
3
4
5
6
7
8
new five.Led.Matrix({
  pins: {
    data: 2,
    clock: 3,
    cs: 4
  }
});

2）I2C设备

1
2
3
4
5
// Led.Matrix HT16K33
new five.Led.Matrix({
  controller: "HT16K33"
});

3）单色

1
2
3
4
5
6
7
8
9
10
11
12
new five.Led.Matrix({
  controller: "HT16K33",
  isBicolor: true
});

// 16x8 I2C device
new five.Led.Matrix({
  controller: "HT16K33",
  dims: "8x16", // or "16x8"
  rotation: 2
});

Led.Matrix使用：

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
var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {

  var matrix = new five.Led.Matrix({
    pins: {
      data: 2,
      clock: 3,
      cs: 4
    },
    devices: 1
  });

  var heart = [
    "01100110",
    "10011001",
    "10000001",
    "10000001",
    "01000010",
    "00100100",
    "00011000",
    "00000000"
  ];

  matrix.draw(heart);
});

2、硬件准备

  • Arduino Mega2560开发板一块
  • Max7219 Led点阵一个（8x8）
  • 杜邦线若干
  • 数据线一条

硬件接线如下：

在这里插入图片描述

3、软件准备

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

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

4、代码实现

Electron的package.json文件内容，请参考前面文章，在这里不重复介绍了。

4.1 Electron应用程序页面(index.html)

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
<!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 text-center">LED-Matrix</div>
                <div class="panel-body">
                    <div class="container flex-row">
                    <label class="form-check-label" for="led-matrix-input">输入字符(英文):</label>
                    <input type="input" class="form-control" id="led-matrix-input" />
                    <button type="button" class="btn btn-primary" id="led-matrix-btn">显示</button>
                </div>
                </div>

                <div class="panel-footer" id="led-matrix-title"></div>
            </div>
        </div>
    </div>
    <script src="../js/renderer/led\_matrix.js"></script>
</body>

页面效果如下：

在这里插入图片描述

4.2 页面逻辑控制代码(led_matrix_renderer.js)

1
2
3
4
5
6
7
8
9
10
11
var {ipcRenderer} = require('electron')

$('#led-matrix-btn').on('click',() => {
    var msg = $('#led-matrix-input').val()
    if(msg == null || msg.length == 0){
        return
    }
    console.log(msg)
    ipcRenderer.send('led-matrix',{msg:msg})
})

4.3 主程序逻辑控制代码(main.js)

Electron应用程序初始化，请参考前面文章。下面将介绍主程序中WS2812控制逻辑。在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
const five = require('johnny-five')
const pixel = require('node-pixel')
const board = new five.Board({port:'COM12',repl:false})

board.on('ready',() => {
    console.log('board inited')
     var matrix = new five.Led.Matrix({
        pins: {
            data: 2,
            clock: 3,
            cs: 4
        }
    });

    matrix.on()
    
    var timer = null
    ipcMain.on('led-matrix',(event,arg) => {
        let msg = arg.msg.split("")
        // 停止上一次定时器
        if(timer){
            clearInterval(timer)
        }
        
        function next(){
            var c;
            if(c = msg.shift()){
                matrix.draw(c)
                timer = setTimeout(next, 500);
            }
        }
        next()
    })
})

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