首页/课程/北京石油化工学院课程/点阵屏

点阵屏

教学目标及方法

掌握小程序通过蓝牙向mCookie设备发送字符串数据， mCookie蓝牙接收小程序发送的字符串转成数字的方法。

主要内容

在8*8像素的点阵画图区，点阵模块上实时跟随画图。

模块清单

硬件搭建

将彩色点阵连接在mCenter+的I2C管脚。

注意：

彩色点阵上有两个接口，接任意一个都可以。

程序开发

微信小程序开发

开发流程

基于原有项目创建新的项目

拷贝【滑动条设置】课程的项目到另一个位置，在小程序开发工具项目->查看所有项目中引用新项目。选择项目目录及更改项目名称。

可以将第二页的目录及文件名更改成Matrix。

注意：

1.更改文件名路径需要在app.json中更改第二页路径

2.需要在第一页按钮跳转中更改第二页路径

编辑第二页内容

1.页面模板、样式编写

保留matrix.wxml与matrix.wxss文件中关于标题与分割线的代码，其他删除。

matrix.wxml文件中的代码。

<view class="wx_h">
  <text>点阵屏实时画图案</text>
  <view class="line"></view>
</view>

matrix.wxss文件中的代码。

.wx_h {
  padding-top: 20px;
  padding-bottom: 35px;
  margin-left: 4px;
  font-size: 19px;
  text-align: center;
}

.line {
  margin-top: 10px;
  width: 99%;
  height: 1rpx;
  background: #731496;
}

绘制点阵画图区域

1.定义一个数组，用来存放64个点的数据，包括id和bk（点亮/熄灭）。

在matrix.js中定义一个数组，默认存放一个点数据。

import bleComm from '../utils/bleComm.js';

Page({
  data: {
    objectArray: [{
      id: 63,
      bk: false
    }],
  },

  onUnload: function() {
    bleComm.disConnect();
  },
  onHide: function() {
    bleComm.disConnect();
  },

})

2.程序导入时再用for()循环更新其他63个数据。

通过this.setData({object})来对数据进行赋值。

mport bleComm from '../utils/bleComm.js';

Page({
  data: {
    objectArray: [{
      id: 63,
      bk: false
    }],
  },

  onUnload: function() {
    bleComm.disConnect();
  },
  onHide: function() {
    bleComm.disConnect();
  },

  onLoad: function() {
    for (let i = 62; i >= 0; i--) {
      this.data.objectArray = [{
        id: i,
        bk: false
      }].concat(this.data.objectArray)
      this.setData({
        objectArray: this.data.objectArray,
      })
    }
    console.log(this.data.objectArray);
  },
})

通过console.log()来查看数据。在工具的Consolse中可以看到64个数据。

3.在matrix.wxml中添加64个点（view）的样式，与此同时需要在matrix.wxss添加页面模板

3.1 设置整个绘图区域背景颜色

3.2 设定第一行点距离背景高度

3.3 使用列表渲染（wx:for）将64个点画出来，宽度不够会自动换行。

使用 wx:for 控制属性绑定一个数组，使用数组中各项的数据重复渲染该组件。

wx:for详细参考：

wx:for

3.4 通过bindtap给列表添加点击事件。

<view class="wx_h">
  <text>点阵屏实时画图案</text>
  <view class="line"></view>
</view>

<view class="padbk"><!-- 背景颜色 -->
  <view class="pad"></view><!-- 设定第一行点距离背景高度 -->
  <!-- 使用wx:for 将64个点画出来并添加点击事件-->
  <view class="pad1 bt-no-bk" wx:for="{{objectArray}}" id="{{item.id}}" wx:key="{{item.id}}" bindtap="listClick"></view>
</view>

3.5 matrix.wxss中页面模板

.wx_h {
  padding-top: 20px;
  padding-bottom: 35px;
  margin-left: 4px;
  font-size: 19px;
  text-align: center;
}

.line {
  margin-top: 10px;
  width: 99%;
  height: 1rpx;
  background: #731496;
}

.padbk {
  background-color: #404040;
}

.pad {
  height: 5px;
}

.pad1 {
  width: 41.5px;
  height: 41.5px;
  margin-left: 4.8px;
  border-radius: 8px;
  display: inline-flex;
}

.bt-no-bk {
  background-color: #fff;
}

保存后由第一页进入第二页可以看到页面结果。画出了64个点。

2. JS 交互逻辑

1.监听点击事件

在matrix.js中加入listClick来监听点击事件，并获取到每个点的id和bk值。

listClick: function (event) {
  var id = parseInt(event.currentTarget.id);
console.log('(', id, ',', this.data.objectArray[id].bk, ')');
},

在Console中看到数据。

2.通过id计算坐标及通过点击来切换bk值（点亮/熄灭）

  listClick: function (event) {
    var id = parseInt(event.currentTarget.id);
    var x = id % 8;
    var y = parseInt(id / 8);
    this.data.objectArray[id].bk = !this.data.objectArray[id].bk;
    this.setData({//更新数据
      objectArray: this.data.objectArray,
    })
    console.log('(', x, ',', y, ',', this.data.objectArray[id].bk, ')');
},

在Console中看到数据。

3.根据bk值切换点的颜色。

3.1通过{{}}来对Page中的data数据进行绑定

3.2根据背景的值，选择颜色。如果bk值为真设置红色，否则设置白色。

修改matrix.wxml文件中绘图区域部分代码。

<view class="pad1 {{item.bk?'bt-red-bk':'bt-no-bk'}}" wx:for="{{objectArray}}" id="{{item.id}}" wx:key="{{item.id}}" bindtap="listClick"></view>

扩展：

判断表达式：a?b:c表示如果a为真,则表达式值为b,如果a为假,则表达式值为c 。

编译保存后测试：

点击(0,0)，(1,1)，(2,2)，(3,3)坐标，颜色变成红色，调试区打印的数据也正确。

4. 蓝牙发送坐标及点亮/熄灭状态

4.1发送一个字符串，包括坐标及点亮状态。第一个参数横坐标，第二个参数纵坐标，第三个参数点亮状态。

更改listClick函数。将坐标值、点亮状态转换成数字后再转成字符串发送出去。另外发送时加上“\n”字符。用于告知数据结尾。

listClick: function (event) {
    var id = parseInt(event.currentTarget.id);
    var x = id % 8;
    var y = parseInt(id / 8);
    this.data.objectArray[id].bk = !this.data.objectArray[id].bk;
    this.setData({
      objectArray: this.data.objectArray,
    })
    var msg;
    if (this.data.objectArray[id].bk) {
      msg = x * 100 + y * 10 + 1;
    }
    else {
      msg = x * 100 + y * 10;
    }
    console.log('(', x, ',', y, ',', msg, ')');
    bleComm.writeValue(msg.toString() + "\n");
},

4.2 载入页面时蓝牙连接

onLoad: function() {
    wx.showLoading({
      title: '靠近连接',
      mask: true
    })
    bleComm.connectDevice().then(res => {
      wx.showToast({
        title: '蓝牙连接成功',
        icon: 'success',
        duration: 300
      })
    });
    for (let i = 62; i >= 0; i--) {
      this.data.objectArray = [{
        id: i,
        bk: false
      }].concat(this.data.objectArray)
      this.setData({
        objectArray: this.data.objectArray,
      })
    }
    console.log(this.data.objectArray);

},

3.小程序调试

点击开始，跳转到蓝牙连接界面，弹框提示靠近蓝牙进行连接。

智能硬件开发

调用点阵API 初始化点阵

需要使用库文件。

#include <Microduino_Matrix.h> 
 
uint8_t Addr[MatrixPix_X][MatrixPix_Y] =    //1x1 
{ 
    {64}      //点阵IIC地址 
}; 
 
Matrix display = Matrix(Addr, TYPE_COLOR);//创建一个点阵屏方法 
 
static const uint8_t logoA[] PROGMEM =     //低位在前 逐行 
{ 
    0x00, 0x00, 0x14, 0x2A, 0x2A, 0x2A, 0x00, 0x00 
}; 
 
void setup() 
{ 
    Wire.begin();//初始化I2C接口 
    delay(3000);//等待点阵屏初始化 
    Wire.begin();//初始化I2C接口 
    display.setBrightness(255);//设置屏幕亮度 
    display.clearDisplay();//清除屏幕 
    display.setColor(0, 255, 0);//设置颜色 
    display.drawBMP(0, 0, 8, 8, logoA);  //画图BMP图 x,y,w,h,data 
    delay(2000); 
    display.clearDisplay(); 
} 
 
void loop() 
{ 
    display.setLedColor(1, 1, 155, 0, 0);//横坐标,纵坐标,r,g,b 
}

点阵地址设置详细参考：

点阵地址

蓝牙接收数据

每次接收一个字符，如果不是‘\n’，认为数据还没发送结束，否则清空字符下一次重新接收。

if (my_Serial.available() > 0) 
{ 
    char c = my_Serial.read();//读取一个字符 
    if (c != '\n')  //如果不是'\n' 
    { 
        str += c;//拼接字符 
    } 
    else    //接收完毕 
    { 
        str = "";//清空字符，下次重新接收 
    } 
}

注意：

需要在全局定义str。

String str;

控制点阵屏幕

使用setLedColor()函数来控制每个灯。获取一个3位数每个位的值。“/”是数学运算除。“%”是数学运算取余数。

void showMatrix(int data) 
{ 
    uint8_t x = data / 100;//百位数字 
    uint8_t y = data / 10 % 10;//十位数字 
    uint8_t color = data % 10;//个位数字 
    if (color)//根据个位数字控制颜色 
        display.setLedColor(x, y, 155, 0, 0); 
    else 
        display.setLedColor(x, y, 0, 0, 0); 
}

完整代码

#include <Microduino_Matrix.h> 
 
//#define BLEMODULE_01_9600  //old-mCookie_Bluetooth 
//#define BLEMODULE_45_9600  //Microduino_BLE new-mCookie_Bluetooth 
#define BLEMODULE_01_57600  //mCenter+、BleUpload 
 
/*定义串口0接口，波特率9600的蓝牙*/ 
#ifdef  BLEMODULE_01_9600 
#define my_Serial Serial 
#define UARTSPEED  9600 
#endif 
 
/*定义串口0接口，波特率57600的蓝牙*/ 
#ifdef BLEMODULE_01_57600 
#define my_Serial Serial 
#define UARTSPEED  57600 
#endif 
 
/*定义软串口（4，5）接口，波特率9600的蓝牙*/ 
#ifdef BLEMODULE_45_9600 
#include <SoftwareSerial.h> 
SoftwareSerial mySerial(4, 5); 
#define my_Serial mySerial 
#define UARTSPEED  9600 
#endif 
 
uint8_t Addr[MatrixPix_X][MatrixPix_Y] =    //1x1 
{ 
    {64}      //点阵IIC地址 
}; 
 
Matrix display = Matrix(Addr, TYPE_COLOR); 
 
static const uint8_t logoA[] PROGMEM =     //低位在前 逐行 
{ 
    0x00, 0x00, 0x14, 0x2A, 0x2A, 0x2A, 0x00, 0x00 
}; 
 
String str; 
 
void showMatrix(int data) 
{ 
    uint8_t x = data / 100;//百位数字 
    uint8_t y = data / 10 % 10;//十位数字 
    uint8_t color = data % 10;//个位数字 
    if (color)//根据个位数字控制颜色 
        display.setLedColor(x, y, 155, 0, 0); 
    else 
        display.setLedColor(x, y, 0, 0, 0); 
} 
 
void setup() 
{ 
    Serial.begin(115200); 
    my_Serial.begin(UARTSPEED);//设置蓝牙通信波特率 
    delay(3000); 
    Wire.begin(); 
    display.setBrightness(255); 
    display.clearDisplay(); 
    display.setColor(0, 255, 0); 
    display.drawBMP(0, 0, 8, 8, logoA);  //x,y,w,h,data 
    delay(2000); 
    display.clearDisplay(); 
}

注意：

程序上传完毕，使用mCenter+得把USB数据线拔掉。

综合调试

点击预览，上传到手机后点击开始按钮，可以跳转到连接页面，提示靠近连接，连接到蓝牙模块后提示蓝牙连接成功，点击屏幕点阵区域mCookie点阵实时更新。

拓展

1.如何一键清屏

如果画多了想重新画就需要一个快捷按钮来重新画图。

指导：

1、小程序添加按钮

点击按钮清除所有点的数据。蓝牙发送特殊字符，例如“-1”告知硬件清屏。

clear: function () {
    for (let i = 63; i >= 0; i--) {
      this.data.objectArray[i].bk = false;
    }
    this.setData({
      objectArray: this.data.objectArray,
    })
    console.log("-1")
    bleComm.writeValue("-1\n");
},

2、智能硬件增加处理特殊数据方法

如果接收数据是-1.则清屏，否则刷新屏幕。

void showMatrix(int data) 
{ 
    if (data == -1) 
        display.clearDisplay(); 
    else 
    { 
        uint8_t x = data / 100;//百位数字 
        uint8_t y = data / 10 % 10;//十位数字 
        uint8_t color = data % 10;//个位数字 
 
        if (color)//根据个位数字控制颜色 
            display.setLedColor(x, y, 155, 0, 0); 
        else 
            display.setLedColor(x, y, 0, 0, 0); 
    } 
}

2.如何增加颜色调节

示例图：

指导：

1.使用单项选择器选择颜色

单项选择详细参考：

https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

1、画单项选择器示例：

<radio-group bindchange="radioChange">
  <label class="radio" wx:for="{{items}}" wx:key="{{item.id}}">
    <radio class="radiopad" color="{{radiocolor[item.name-1]}}" value="{{item.name}}" checked="{{item.checked}}" />
    <text class="textpad">{{item.value}}</text>
  </label>
</radio-group>

2、点的数据需要增加颜色值

objectArray: [
      { id: 63, color: 0, bk: false }
],

3.获取单选框颜色值

radioChange: function (e) {
    mycolor = parseInt(e.detail.value);
},

4.1根据单选框的值确定颜色，更新画图框点的颜色

<view class="pad1 {{item.bk?sscolor[item.color-1]:'bt-no-bk'}}" wx:for="{{objectArray}}" bindtap="listClick" id="{{item.id}}" wx:key="{{item.id}}"></view>

4.2根据单选框的值确定颜色，蓝牙发送颜色数据

this.data.objectArray[id].color = mycolor;
    var msg;
    if (this.data.objectArray[id].bk){
      msg = x * 100 + y * 10 + mycolor;
    }
    else{
      msg = x * 100 + y * 10 ;
}

5.mCookie根据颜色值设置不同颜色

uint8_t setcolor[7][3] 
{ 
    {0, 0, 0}, 
    {155, 0, 0}, 
    {155, 155, 0}, 
    {50, 255, 130}, 
    {0, 155, 155}, 
    {0, 0, 155}, 
    {155, 0, 155} 
}; 
 
void showMatrix(int data) 
{ 
    if (data == -1) 
        display.clearDisplay(); 
    else 
    { 
        uint8_t x = data / 100; 
        uint8_t y = data / 10 % 10; 
        uint8_t color = data % 10; 
        display.setLedColor(x, y, setcolor[color][0], setcolor[color][1], setcolor[color][2]); 
    } 
}