前言
最近看了 电子量产工具 这个项目,本专栏是对该项目的一个总结。
一、UI界面分析
UI 是用户界面(User Interface)的缩写,指的是人与计算机或其他设备进行交互时所使用的界面。用户界面是用户与系统之间的桥梁,提供了一种方式让用户与计算机进行沟通、操作和获取信息。
用户界面可以包括以下几个方面:
- 图形用户界面(GUI)。
- 命令行界面(CLI)
- 触摸界面
- 声音界面
- 虚拟现实界面(VR)和增强现实界面(AR)
我们的UI系统,就是构造各类GUI元素,比如按钮(目前只实现按钮)。
二、结构体描述按钮
/* 函数指针(绘制按键) */
typedef int (*ONDRAW_FUNC)(struct Button *ptButton, PDispBuff ptDispBuff);
/* 函数指针(按下按钮) */
typedef int (*ONPRESSED_FUNC)(struct Button *ptButton, PDispBuff ptDispBuff, PInputEvent ptInputEvent);
typedef struct Button {
char *name; // 按键 名字
int status; //按键 按下状态
Region tRegion; // 按键的区域
ONDRAW_FUNC OnDraw; //一个 ONDRAW_FUNC 类型的函数指针,用于指向按钮绘制函数
ONPRESSED_FUNC OnPressed; //一个 ONPRESSED_FUNC 类型的函数指针,用于指向按钮按下事件处理函数
}Button, *PButton;
typedef struct Region { //区域包括 左上角坐标, 高, 宽
int iLeftUpX;
int iLeftUpY;
int iWidth;
int iHeigh;
}Region, *PRegion;
三、按钮初始化
void InitButton(PButton ptButton, char *name, PRegion ptRegion, ONDRAW_FUNC OnDraw, ONPRESSED_FUNC OnPressed)
{
ptButton->status = 0; //初始状态为 0 ,未按下
ptButton->name = name;
ptButton->tRegion = *ptRegion; // 按钮的区域
ptButton->OnDraw = OnDraw ? OnDraw : DefaultOnDraw; //若 OnDraw 为空,则执行默认绘制函数DefaultOnDraw
ptButton->OnPressed = OnPressed ? OnPressed : DefaultOnPressed; //若 OnPressed 为空,则执行默认绘制函数DefaultOnPressed
}
四、默认绘制按键事件函数
绘制各个按钮 Button 的底色,文字,并将其刷新到 DispBuff 上
static int DefaultOnDraw(struct Button *ptButton, PDispBuff ptDispBuff)
{
/* 绘制底色 */
DrawRegion(&ptButton->tRegion, BUTTON_DEFAULT_COLOR); // 红色 0xff0000
/* 居中写文字 */
DrawTextInRegionCentral(ptButton->name, &ptButton->tRegion, BUTTON_TEXT_COLOR); //黑色 0x000000
/* flush to lcd/web */
FlushDisplayRegion(&ptButton->tRegion, ptDispBuff);
return 0;
}
- 绘制底色
void DrawRegion(PRegion ptRegion, unsigned int dwColor)
{
int x = ptRegion->iLeftUpX;
int y = ptRegion->iLeftUpY;
int width = ptRegion->iWidth;
int heigh = ptRegion->iHeigh;
int i,j;
for (j = y; j < y + heigh; j++)
{
for (i = x; i < x + width; i++)
PutPixel(i, j, dwColor); //描点函数
}
}
- 居中写文字
在 一定的区域 Region,按颜色 dwColor 居中显示名字 name
void DrawTextInRegionCentral(char *name, PRegion ptRegion, unsigned int dwColor)
{
int n = strlen(name);
int iFontSize = ptRegion->iWidth / n / 2;
FontBitMap tFontBitMap;
int iOriginX, iOriginY;
int i = 0;
int error;
if (iFontSize > ptRegion->iHeigh) //计算字体大小
iFontSize = ptRegion->iHeigh;
/* 当前文字的基点 */
iOriginX = (ptRegion->iWidth - n * iFontSize)/2 + ptRegion->iLeftUpX;
iOriginY = (ptRegion->iHeigh - iFontSize)/2 + iFontSize + ptRegion->iLeftUpY;
SetFontSize(iFontSize); // 设置字体大小
while (name[i]) //字符编码
{
/* get bitmap */
tFontBitMap.iCurOriginX = iOriginX;
tFontBitMap.iCurOriginY = iOriginY;
error = GetFontBitMap(name[i], &tFontBitMap); //根据字符编码获取位图,保存在 参数 tFontBitMap中
if (error)
{
printf("SelectAndInitFont err\n");
return;
}
/* draw on buffer */
DrawFontBitMap(&tFontBitMap, dwColor); // 绘制位图
iOriginX = tFontBitMap.iNextOriginX; //获取下一文字的基点坐标
iOriginY = tFontBitMap.iNextOriginY;
i++;
}
}
- 将绘制到的按钮,刷新到 buffer 上。
返回 LCD 的 framebuffer , 以后上层 APP 可以直接操作LCD, 可以不用 FbFlushRegion
也可以 malloc 返回一块无关的buffer, 要使用 FbFlushRegion。
这里 为了 以后代码的可移植性,加上了刷新界面,但 并未做出任何举动。
五、默认按下按键事件函数
按下按键事件函数 也需要 上面 绘制函数 里的 : 绘制底色, 居中写文字 ,刷新界面。这里就不再 重述了。
static int DefaultOnPressed(struct Button *ptButton, PDispBuff ptDispBuff, PInputEvent ptInputEvent)
{
unsigned int dwColor = BUTTON_DEFAULT_COLOR; //按钮初始颜色 红色,0xff0000
ptButton->status = !ptButton->status; // 按钮状态,未按下时 为 0
if (ptButton->status)
dwColor = BUTTON_PRESSED_COLOR; //按下的颜色为 绿色, 0x00ff00
/* 绘制底色 */
DrawRegion(&ptButton->tRegion, dwColor);
/* 居中写文字 */
DrawTextInRegionCentral(ptButton->name, &ptButton->tRegion, BUTTON_TEXT_COLOR);
/* 刷新界面 到 lcd/web */
FlushDisplayRegion(&ptButton->tRegion, ptDispBuff);
return 0;
}
六、测试程序
- 显示界面初始化
- 字体初始化
- ui 界面
/* 设置按钮的显示位置,宽高 */
tRegion.iLeftUpX = 200;
tRegion.iLeftUpY = 200;
tRegion.iWidth = 300;
tRegion.iHeigh = 100;
/* 显示 "test", 调用默认绘制,按下函数 */
InitButton(&tButton, "test", &tRegion, NULL, NULL);
tButton.OnDraw(&tButton, ptBuffer); //绘制按键
while (1)
{
tButton.OnPressed(&tButton, ptBuffer, NULL); //按下按键,
sleep(2); // 休眠 2 秒
}
实验效果
实验结果就是每隔 2 秒,自动 变换按键的颜色。(我按钮后面的图是 自己的QT界面,忽略即可)
文章来源:https://www.toymoban.com/news/detail-542769.html
总结
UI 系统界面的逻辑性 不难,就是一些函数的编写有些困难。
这些封装好的代码,可以用于以后代码的一直调用。文章来源地址https://www.toymoban.com/news/detail-542769.html
到了这里,关于【电子量产工具】4. UI系统的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!