1.开发准备阶段
测试使用的开发板型号为ESP32-WROOM-32E
使用Arduino平台开发 开发板选项为ESP32-WROOM-DA Module
使用屏幕为ST7735S驱动的1.8寸TFT屏幕，采用横屏显示的方式，共有160*128个像素点
基于GFX与ST7735两个库进行开发
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
设计阶段
设计目的是用来显示其他设备发送来的信息以及显示发送给其他设备的信息，主要包括矩形边框以及四个文本显示。
一个字符显示的大小为6x8，默认设计显示尺寸为160*14
如上图所示默认显示范围为160x14 共有4个文本显示
| text1 | 发送/接收 |
|---|---|
| text2 | 发送方/接收方名称 |
| text3 | 数据类型：发送/接收 |
|---|---|
| text4 | 文本内容显示 |
例如最后一行表示 从ASRPRO接收到“Recived data”
倒数第二行表示 向Fan发送数据“Send data”
| 文本 | 最大显示字符数 |
|---|---|
| text1 | 4 |
| text2 | 6 |
| text3 | 1 |
| text4 | 12 |
void setup() {
messageShowUI(24,113 - 13 - 13,"txt1","txet2","3","text4");
messageShowUI(12,113 - 13,"Goal","Fan","S","Send data");
messageShowUI(0,113,"From","ASRPRO","R","Recived data:Hello World!");
}
其中text4可以通过改变起始点的坐标来改变
预览图如下所示
会自动计算可显示的字符数量，在接收到的字符大于可显示的字符数量时会通过滚动字幕的方式显示如下视频演示所示。为方便复现采用延时的方法实现，可自行按需改为定时器实现或使用操作系统。
滚动字幕显示
3.代码部分
3.1 Arduino平台代码
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#define TFT_CS 14 // 请替换为您的CS引脚号
#define TFT_DC 27 // 请替换为您的DC引脚号
#define TFT_RST 5 // 请替换为您的RST引脚号
//#define TFT_SCK 18 // 请替换为您的SCK引脚号
//#define TFT_MOSI 23 // 请替换为您的MOSI引脚号
//已经默认配置
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
#define BACKGROUND_COLOUR ST7735_BLACK //背景颜色
#define RECT1_COLOUR ST7735_RED
#define TEXT1_COLOUR ST7735_GREEN
#define LINE1_COLOUR ST7735_RED
#define TEXT2_COLOUR ST7735_BLUE
#define RECT2_COLOUR ST7735_RED
#define TEXT3_COLOUR ST7735_GREEN
#define TEXT4_COLOUR ST7735_BLUE
#define SHOWDELAY_TIME 500 //字幕滚动速度
//定义使用的颜色
void setup() {
messageShowUI(24,113 - 13 - 13,"txt1","txet2","3","text4");
messageShowUI(12,113 - 13,"Goal","Fan","S","Send data");
messageShowUI(0,113,"From","ASRPRO","R","Recived data:Hello World!");
}
void loop() {
// 在这里可以添加更多的显示内容或图形
}
void messageShowUI(const int x,const int y,char text1[],char text2[],char text3[],char text4[]){
const int RectX = x;//基准坐标 (矩形左上角)
const int RectY = y;//基准坐标
const int RectWight = 160;//宽160
const int RectHight = 14;//高14
const int Rect1x = RectX;//矩形框1x坐标
const int Rect1y = RectY;//矩形框1y坐标
const int Rect1w = RectWight - RectX;//矩形框1宽度
const int Rect1h = RectHight;//矩形框1高度
//tft.drawRect(Rect1x,Rect1y,Rect1w,Rect1h,RECT1_COLOUR);//绘制矩形框1 外部包围
const int Text1x = Rect1x +3;//Text1x坐标
const int Text1y = Rect1y +3;//Text1y坐标
const int Text1C = 4;//Text1字符数量
char Text1String[Text1C + 1];//Text1字符数组
strncpy(Text1String, text1,Text1C);//从text1拷贝Text1C个字符到Text1String
Text1String[Text1C] = '\0'; // 添加字符串结束符
const int Text1Size = 1;
const int Line1x = Text1x + Text1C * 6 + 3;//字符大小为6*8
const int Line1y = RectY;
const int Line1h = RectHight;
const int Text2x = Line1x + 3;//Text2x坐标
const int Text2y = Text1y;//Text2y坐标
const int Text2C = 6 ;//Text2字符数量
const int Text2Size = 1;
char Text2String[Text2C + 1];//Text2字符数组
strncpy(Text2String, text2,Text2C);//从text2拷贝Text2C个字符到Text2String
Text2String[Text2C] = '\0'; // 添加字符串结束符
const int Rect2x = Text2x + Text2C * 6 + 1;//矩形框2x坐标
const int Rect2y = RectY;//矩形框2y坐标
const int Rect2w = 14;//矩形框2宽度
const int Rect2h = 14;//矩形框2高度
const int Text3x = Rect2x + 5;//Text3x坐标
const int Text3y = Text1y;//Text3y坐标
const int Text3C = 1;//Text3字符数量
const int Text3Size = 1;
char Text3String[Text3C + 1];//Text3字符数组
strncpy(Text3String, text3,Text3C);//从text3拷贝Text3C个字符到Text3String
Text3String[Text3C] = '\0'; // 添加字符串结束符
const int Text4x = Rect2x + Rect2w + 3;//Text4x坐标
const int Text4y = Text1y ;//Text4y坐标
const int Text4Size = 1;
const int Text4C = (159 - Text4x)/6 ;//剩余空间可显示字符数量（以0，0作为起点最多显示12个字符）字符大小6*8
char Text4String[Text4C + 1];//Text4字符数组
int Text4Length = 0;//传入需要显示的字符数量
while (text4[Text4Length] != '\0') {//动态分配的数组不能使用sizeof来计算数组大小
Text4Length++;
}
static bool flag = true;
if(flag){
tft.initR(INITR_BLACKTAB); // 使用适当的初始化参数
tft.setRotation(1); // 设置显示方向，1表示顺时针旋转90度
tft.fillScreen(BACKGROUND_COLOUR);//设置背景颜色
flag = false; //初始化完成改变标志位防止重复初始化
}
tft.drawRect(Rect1x,Rect1y,Rect1w,Rect1h,RECT1_COLOUR);//绘制矩形框1：整体框架
tft.setTextColor(TEXT1_COLOUR);//设置文字颜色
tft.setTextSize(Text1Size);//设置字体大小
tft.setCursor(Text1x,Text1y);//设置起始位置
tft.print(Text1String);//显示Text1 From
tft.drawFastVLine(Line1x,Line1y,Line1h,LINE1_COLOUR);//绘制Text1后竖线
tft.setTextColor(TEXT2_COLOUR);//设置文字颜色
tft.setTextSize(Text2Size);//设置字体大小
tft.setCursor(Text2x,Text2y);//设置起始位置
tft.print(Text2String);//显示Text2 ASRPRO
//tft.drawFastVLine(Line2x,Line2y,Line2h,LINE2_COLOUR);//绘制Text2后竖线
tft.fillRect(Rect2x,Rect2y,Rect2w,Rect2h,RECT2_COLOUR);//绘制矩形框2：Text3包围框
tft.setTextColor(TEXT3_COLOUR);//设置文字颜色
tft.setTextSize(Text3Size);//设置字体大小
tft.setCursor(Text3x,Text3y);//设置起始位置
tft.print(Text3String);//显示Text3 R
tft.setTextWrap(false);//关闭超出范围自动换行 实现滚动字幕显示
if(Text4Length > Text4C){//需要显示的数据数量大于剩余空间可显示字符数量
while(1){//开启滚动显示
for(int i = 0;i <= (Text4Length - Text4C);i++){
tft.fillRect(Text4x, Text4y, Text4C * 6, 8, BACKGROUND_COLOUR);//绘制矩形刷新部分区域
strncpy(Text4String, text4 + i,Text4C);//从text4 + i拷贝Text4C个字符到Text4String
Text4String[Text4C] = '\0'; // 添加字符串结束符
tft.setTextColor(TEXT4_COLOUR);//设置文字颜色
tft.setTextSize(Text4Size);//设置字体大小
tft.setCursor(Text4x,Text4y);//设置起始位置
tft.print(Text4String);//显示Text4 Recived data!
delay(SHOWDELAY_TIME);
}
tft.fillRect(Text4x, Text4y, Text4C * 6, 8, BACKGROUND_COLOUR);//绘制矩形刷新部分区域
strncpy(Text4String,text4,Text4C);//从text4拷贝Text4C个字符到Text4String
tft.setTextColor(TEXT4_COLOUR);//设置文字颜色
tft.setTextSize(Text4Size);//设置字体大小
tft.setCursor(Text4x,Text4y);//设置起始位置
tft.print(Text4String);//显示Text4 Recived data!
break;
}
}
else{
strncpy(Text4String, text4,Text4C);//从text4拷贝Text4C个字符到Text4String
Text4String[Text4C] = '\0'; // 添加字符串结束符
tft.setTextColor(TEXT4_COLOUR);//设置文字颜色
tft.setTextSize(Text4Size);//设置字体大小
tft.setCursor(Text4x,Text4y);//设置起始位置
tft.print(Text4String);//显示Text4 Recived data!
}
}
3.2 messageShowUI.c
void messageShowInit(void){
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST); //引脚初始化
}
void messageShowUI(const int x,const int y,char text1[],char text2[],char text3[],char text4[]){
const int RectX = x;//基准坐标 (矩形左上角)
const int RectY = y;//基准坐标
const int RectWight = 160;//宽160
const int RectHight = 14;//高14
const int Rect1x = RectX;//矩形框1x坐标
const int Rect1y = RectY;//矩形框1y坐标
const int Rect1w = RectWight - RectX;//矩形框1宽度
const int Rect1h = RectHight;//矩形框1高度
//tft.drawRect(Rect1x,Rect1y,Rect1w,Rect1h,RECT1_COLOUR);//绘制矩形框1 外部包围
const int Text1x = Rect1x +3;//Text1x坐标
const int Text1y = Rect1y +3;//Text1y坐标
const int Text1C = 4;//Text1字符数量
char Text1String[Text1C + 1];//Text1字符数组
strncpy(Text1String, text1,Text1C);//从text1拷贝Text1C个字符到Text1String
Text1String[Text1C] = '\0'; // 添加字符串结束符
const int Text1Size = 1;
const int Line1x = Text1x + Text1C * 6 + 3;//字符大小为6*8
const int Line1y = RectY;
const int Line1h = RectHight;
const int Text2x = Line1x + 3;//Text2x坐标
const int Text2y = Text1y;//Text2y坐标
const int Text2C = 6 ;//Text2字符数量
const int Text2Size = 1;
char Text2String[Text2C + 1];//Text2字符数组
strncpy(Text2String, text2,Text2C);//从text2拷贝Text2C个字符到Text2String
Text2String[Text2C] = '\0'; // 添加字符串结束符
const int Rect2x = Text2x + Text2C * 6 + 1;//矩形框2x坐标
const int Rect2y = RectY;//矩形框2y坐标
const int Rect2w = 14;//矩形框2宽度
const int Rect2h = 14;//矩形框2高度
const int Text3x = Rect2x + 5;//Text3x坐标
const int Text3y = Text1y;//Text3y坐标
const int Text3C = 1;//Text3字符数量
const int Text3Size = 1;
char Text3String[Text3C + 1];//Text3字符数组
strncpy(Text3String, text3,Text3C);//从text3拷贝Text3C个字符到Text3String
Text3String[Text3C] = '\0'; // 添加字符串结束符
const int Text4x = Rect2x + Rect2w + 3;//Text4x坐标
const int Text4y = Text1y ;//Text4y坐标
const int Text4Size = 1;
const int Text4C = (159 - Text4x)/6 ;//剩余空间可显示字符数量（以0，0作为起点最多显示12个字符）字符大小6*8
char Text4String[Text4C + 1];//Text4字符数组
int Text4Length = 0;//传入需要显示的字符数量
while (text4[Text4Length] != '\0') {//动态分配的数组不能使用sizeof来计算数组大小
Text4Length++;
}
static bool flag = true;
if(flag){
tft.initR(INITR_BLACKTAB); // 使用适当的初始化参数
tft.setRotation(1); // 设置显示方向，1表示顺时针旋转90度
tft.fillScreen(ST7735_BLACK);//设置背景颜色
flag = false; //初始化完成改变标志位防止重复初始化
}
tft.drawRect(Rect1x,Rect1y,Rect1w,Rect1h,RECT1_COLOUR);//绘制矩形框1：整体框架
tft.setTextColor(TEXT1_COLOUR);//设置文字颜色
tft.setTextSize(Text1Size);//设置字体大小
tft.setCursor(Text1x,Text1y);//设置起始位置
tft.print(Text1String);//显示Text1 From
tft.drawFastVLine(Line1x,Line1y,Line1h,LINE1_COLOUR);//绘制Text1后竖线
tft.setTextColor(TEXT2_COLOUR);//设置文字颜色
tft.setTextSize(Text2Size);//设置字体大小
tft.setCursor(Text2x,Text2y);//设置起始位置
tft.print(Text2String);//显示Text2 ASRPRO
//tft.drawFastVLine(Line2x,Line2y,Line2h,LINE2_COLOUR);//绘制Text2后竖线
tft.fillRect(Rect2x,Rect2y,Rect2w,Rect2h,RECT2_COLOUR);//绘制矩形框2：Text3包围框
tft.setTextColor(TEXT3_COLOUR);//设置文字颜色
tft.setTextSize(Text3Size);//设置字体大小
tft.setCursor(Text3x,Text3y);//设置起始位置
tft.print(Text3String);//显示Text3 R
tft.setTextWrap(false);//关闭超出范围自动换行 实现滚动字幕显示
if(Text4Length > Text4C){//需要显示的数据数量大于剩余空间可显示字符数量
while(1){//开启滚动显示
for(int i = 0;i <= (Text4Length - Text4C);i++){
tft.fillRect(Text4x, Text4y, Text4C * 6, 8, BACKGROUND_COLOUR );//绘制矩形刷新部分区域
strncpy(Text4String, text4 + i,Text4C);//从text4 + i拷贝Text4C个字符到Text4String
Text4String[Text4C] = '\0'; // 添加字符串结束符
tft.setTextColor(TEXT4_COLOUR);//设置文字颜色
tft.setTextSize(Text4Size);//设置字体大小
tft.setCursor(Text4x,Text4y);//设置起始位置
tft.print(Text4String);//显示Text4 Recived data!
delay(SHOWDELAY_TIME);
}
tft.fillRect(Text4x, Text4y, Text4C * 6, 8, BACKGROUND_COLOUR );//绘制矩形刷新部分区域
strncpy(Text4String,text4,Text4C);//从text4拷贝Text4C个字符到Text4String
tft.setTextColor(TEXT4_COLOUR);//设置文字颜色
tft.setTextSize(Text4Size);//设置字体大小
tft.setCursor(Text4x,Text4y);//设置起始位置
tft.print(Text4String);//显示Text4 Recived data!
break;
}
}
else{
strncpy(Text4String, text4,Text4C);//从text4拷贝Text4C个字符到Text4String
Text4String[Text4C] = '\0'; // 添加字符串结束符
tft.setTextColor(TEXT4_COLOUR);//设置文字颜色
tft.setTextSize(Text4Size);//设置字体大小
tft.setCursor(Text4x,Text4y);//设置起始位置
tft.print(Text4String);//显示Text4 Recived data!
}
}
3.3 messageShowUI.h
#ifndef __MESSAGESHOW_H__
#define __MESSAGESHOW_H__
// 在这里放置头文件的内容
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#define TFT_CS 14 // 请替换为您的CS引脚号
#define TFT_DC 27 // 请替换为您的DC引脚号
#define TFT_RST 5 // 请替换为您的RST引脚号
//#define TFT_SCK 18 // 请替换为您的SCK引脚号
//#define TFT_MOSI 23 // 请替换为您的MOSI引脚号
//已经默认配置
#define BACKGROUND_COLOUR ST7735_BLACK //背景颜色
#define RECT1_COLOUR ST7735_RED //颜色定义
#define TEXT1_COLOUR ST7735_GREEN
#define LINE1_COLOUR ST7735_RED
#define TEXT2_COLOUR ST7735_BLUE
#define RECT2_COLOUR ST7735_RED
#define TEXT3_COLOUR ST7735_GREEN
#define TEXT4_COLOUR ST7735_BLUE
#define SHOWDELAY_TIME 500 //字幕滚动速度
void messageInit(void);//初始化函数
void messageShowUI(const int x,const int y,char text1[],char text2[],char text3[],char text4[]);
#endif //__MESSAGESHOW_H__
4.使用教程
使用前请自行安装ArduinoIDE以及GFX与ST7735库
Arduino平台自行修改3.1Arduino代码即可
其他平台可使用3.2messageShowUI.c与3.3messageShowUI.h
调用void messageInit(void); 进行引脚初始化
void messageShowUI(const int x,const int y,char text1[],char text2[],char text3[],char text4[]);
x，y代表矩形左上角点位 最上面显示使用0,0即可
测试使用例程：
void setup() {
messageShowUI(24,113 - 13 - 13,"txt1","txet2","3","text4");
messageShowUI(12,113 - 13,"Goal","Fan","S","Send data");
messageShowUI(0,113,"From","ASRPRO","R","Recived data:Hello World!");//最底行使用
}
通过修改3.3messageShowUI.h 的宏定义可以修改背景、文本、边框的颜色，以及字幕的滚动速度
默认的500代表500ms改变一次
#define BACKGROUND_COLOUR ST7735_BLACK //背景颜色
#define RECT1_COLOUR ST7735_RED //边框1颜色
#define TEXT1_COLOUR ST7735_GREEN//文本1颜色
#define LINE1_COLOUR ST7735_RED//线段1颜色
#define TEXT2_COLOUR ST7735_BLUE//文本2颜色
#define RECT2_COLOUR ST7735_RED//边框2颜色
#define TEXT3_COLOUR ST7735_GREEN//文本3颜色
#define TEXT4_COLOUR ST7735_BLUE//文本4颜色
#define SHOWDELAY_TIME 500 //字幕滚动速度
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
