Arduino与JavaScript开发实例-数码管显示控制（基于74HC595）

数码管显示控制（基于74HC595）

文章目录

数码管的一种是半导体发光器件，数码管可分为七段数码管和八段数码管，区别在于八段数码管比七段数码管多一个用于显示小数点的发光二极管单元DP（decimal point），其基本单元是发光二极管。

七段数码管分为共阳极及共阴极，共阳极的七段数码管的正极（或阳极）为八个发光二极管的共有正极，其他接点为独立发光二极管的负极（或阴极），使用者只需把正极接电，不同的负极接地就能控制七段数码管显示不同的数字。共阴极的七段数码管与共阳极的只是接驳方法相反而已。

在前面的文章中，对数码管理已经做了详细的介绍，请参考：

本次实例将实现基于74HC595单个数码管理驱动显示控制。

1、ShiftRegister 对象创建与描述

Johnny-Five库的ShiftRegister类构造一个表示移位寄存器的对象。初始化参数说明如下：

  • pins：一组按data, clock, latch, [reset]顺序排列的引脚
  • options：构造函数参数的对象
名称 类型 值/描述 默认值 是否必须
pins Object {data, clock, latch, [reset]} Yes (either)
pins Array [data, clock, latch, [reset]] Yes (either)
isAnode Boolean true或 false. 初始化移位寄存器以输出共阳极器件. false No

初始化示例如下：

1）默认情况

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

1
2
3
4
new five.ShiftRegister({
  pins: [2, 3, 4]
});

1
2
new five.ShiftRegister([2, 3, 4]);

2）共阳极情况

1
2
3
4
5
6
7
8
9
new five.ShiftRegister({
  isAnode: true,
  pins: {
    data: 2,
    clock: 3,
    latch: 4
  }
});

1
2
3
4
5
new five.ShiftRegister({
  isAnode: true,
  pins: [2, 3, 4]
});

简单调用：

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

board.on("ready", function() {
  var register = new five.ShiftRegister({
    isAnode: true,
    pins: {
      data: 2,
      clock: 3,
      latch: 4,
      reset: 9,
    }
  });
  var number = 0;
  var decimal = 0;

  register.reset();

  // Display numbers 0-9, one at a time in a loop.
  // Shows just the number for a half second, then
  // the number + a decimal point for a half second.
  setInterval(function() {
    register.display(number + (decimal && "."));

    if (decimal) {
      number++;
    }

    if (number > 9) {
      number = 0;
    }

    decimal ^= 1;
  }, 500);
});

常用API：

  • **clear()**：清空寄存器
  • **display(number)**：显示一个数字
1
2
register.display(1)

  • **display(string)**：在七段显示器上显示一个数字，可选择包括小数点。
1
2
3
register.display("1.")
register.display("1")

  • reset():重置寄存器
  • **send(B)**：向移位寄存器发送一个 8 位字节值
  • **send([B1, B2])**：将 8 位字节值数组发送到移位寄存器

2、硬件准备

  • Arduino Mega2560开发板一块
  • 74HC595 IC一个
  • 共阴一位数码管一个
  • 面包板一块
  • 杜邦线若干
  • 数据线一条

仿真电路原理图如下：

在这里插入图片描述

3、软件准备

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

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

4、应用程序代码实现

4.1 Electron应用程序描述

package.json在前面文章已经描述，在这里不再在做介绍，请参考相关文章。

4.2 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
36
37
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>LED-控制</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数码管</div>
                <div class="panel-body">
                    <div class="container flex-row">
                    <label class="form-check-label" for="led-digital-input">输入字符(英文):</label>
                    <input type="input" class="form-control" id="led-digital-input" />
                    <button type="button" class="btn btn-primary" id="led-digital-btn">显示</button>
                </div>
                </div>

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

页面效果如下：

在这里插入图片描述

4.3 Electron应用程序控制逻辑(led_digital_renderer.js)

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

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

4.4 主程逻辑控制(main.js)

Electron应用程序初始化，请参考前面文章。下面将介绍主程序中基于74HC595位移寄存器控制数码管逻辑。在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
const five = require('johnny-five')
const board = new five.Board({port:'COM3',repl:false})


board.on('ready',() => {
    console.log('board inited')

	var register = new five.ShiftRegister({
        pins: {
            data: 2,
            clock: 3,
            latch: 4,
           // reset: 9
        },
        size: 2,
       // isAnode: true
    });

    ipcMain.on('led-shift-register-7seg',(event,arg) => {
        console.log(arg)
        register.display(arg.msg)
    })
})

5、仿真结果

在这里插入图片描述

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