[米联客-XILINX-H3_CZ08_7100] FPGA_SDK高级篇连载-21 触摸液晶屏 UGUI 人机交互方案

本帖最后由 FPGA课程于 2024-10-11 17:29 编辑

软件版本：VIVADO2021.1
操作系统：WIN10 64bit
硬件平台：适用 XILINX A7/K7/Z7/ZU/KU 系列 FPGA
实验平台：米联客-MLK-H3-CZ08-7100开发板
板卡获取平台：https://milianke.tmall.com/
登录“米联客”FPGA社区 http://www.uisrc.com 视频课程、答疑解惑！

1 概述
很多工程师都在 ZYNQ 上做过 LINUX 相关的应用和开发，在 ZYNQ 运行 LINUX 操作系统，可以实现非常细致的GUI 图形界面。用户可以通过鼠标、键盘等外部设备与操作系统通过 GUI 界面进行人机交互，与平时使用电脑的体验相当。但同时也有很用户只涉及 ZYNQ 的裸机开发，那么在无操作系统支持的情况下，是否可以在裸机环境中构建一个GUI 图形界面呢？答案是肯定的。本例程通过利用开源 GUI 库 μGUI，在 ZYNQ 裸机环境下创建一组简单的 GUI 界面，并通过触摸液晶屏实现与 ZYNQ 的人机交互。
本例程通过开源的 uGUI v0.3 库设计了 1 个 GUI 界面，为该 GUI 界面设计了 4 个窗口，为每个窗口设计了标题、按键、文本、图片 logo 等元素，并给每个按键设定了相应的功能，如窗口间切换、LED 灯控制、屏幕亮度调节等，并在 1 个窗口中设计了绘图功能。然后，将设计的 GUI 窗口通过触摸屏显示。用户通过按下触摸屏中所显示的窗口对应的按键位置，便可以实现该按键所设定的相应功能，从而实现人机交互。
本文实验目的：
1:LCD 触摸屏的使用原理
2:移植开源 μGUI 库，利用 API 函数搭建一组 GUI 图形界面
3:通过 VDMA、AXI-S Video Out、VTC 等 IP 实现 GUI 图形界面的显示
4:通过定时器中断实现 GUI 界面的周期性刷新
5:通过 PS 动态配置 AXI PWM 调节液晶屏亮度
6:通过 AXI GPIO 检查触摸屏的中断信号
7:通过 I2C 读取触摸屏的触摸信息
8:设计 GUI 界面的动态变化机制，将触摸信息反馈至 GUI 界面后，GUI 产生动态变化，形成人机交互。
2系统框图

3硬件电路分析

硬件接口和子卡模块请阅读“附录1”

配套工程的FPGA PIN脚定义路径为soc_prj/uisrc/04_pin/ fpga_pin.xdc。

本文内容仅给出RGB方案的说明，LVDS方案类似，也提供了配套源码和工程

4触摸液晶屏介绍
4.1液晶屏介绍

2020版本资料中使用触摸液晶屏是www.uisrc.com(米联客) 和www.crazyfpga.com(crazy bingo)联合开发。液晶屏参数：

型号	VCLD-7TH
液晶显示屏型号	T HC63LVDM83D
液晶分辨率	1024*600
液晶屏幕比例	4:3
液晶驱动接口	RGB/VGA
触摸芯片型号	GP915
支持触点数量	5
支持最大分辨率	1024*600

4.2触摸介绍

GT915是专为 4.5”~6”设计的新一代 5 点电容触控方案，拥有26个驱动通道和14个感应通道，以满足更高的 touch 精度要求。GT915可同时识别5个触摸点位的实时准确位置，移动轨迹及触摸面积。并可根据主控需要，读取相应点数的触摸信息。

GT915 提供标准的 I 2C 通讯接口，由 SCL 和 SDA 与主 CPU 进行通讯。在系统中 GT915 始终作为从设备，所有通讯都是由主 CPU 发起，建议通讯速度为 400Kbps 或以下。

GT915上电顺序：

INT T2 时间后，主控是要输出高，还是低，取决于主机要用何 I2C 从设备地址与 GT9 芯片通信，若用地址 0x28/0x29，则输出高；若用地址 0xBA/0xBB，则输出低。

1:设置I2C地址为0x28/0x29

2:设置I2C地址为0xBA/0xBBz

3:寄存器配置

默认的配置有可能不能满足要求，可以通过配置寄存器，修改默认的配置，我们重点关注0x8047、0x8048、0x8049、0x804A、0x804B、0x804C、0x804D这配置寄存器。

0x8047配置版本寄存器：该寄存器用于设置配置信息版本号，如果更新的版本号大于等于原来的版本，当配置不一样时才能更新到寄存器中。当写0x00，不管之前的版本号时说明，都会把这个寄存器初始化位0xa所以，一般我们都会写如0x00。

0x8048~0x804B用于设置触摸的分辨率。

0x804C用于设置触点上限，对于GT915支持的最大触点数量为5个。

另外配置寄存器后，还需要正确输入校验和寄存器0x8047以及0x80fe寄存器，更新配置。

4:读取坐标

我们可以读取坐标寄存器获取触摸芯片的ID、固件版本号、当前的分辨率、以及触摸状态、track id以及坐标信息。GT915支持5点触摸。以上表格只截取了第一个触点的寄存器，其他触点都一样，具体可以阅读uisrc/06_doc路径下的技术手册。

主控可以采取轮询或 INT 中断触发方式来读取坐标，采用轮询方式时可采取如下步骤读取：

1、先读取寄存器 0x814E，若当前 buffer（buffer status 为 1）数据准备好，则依据手指个数读、按键状态取相应个数的坐标、按键信息。

2、若在 1 中发现 buffer 数据（buffer status 为 0）未准备好，则等待 1ms 再进行读取。

GT9 中断信号输出时序为（以输出上升沿为例，下降沿与此时序类同）：

1、待机时 INT 脚输出低。

2、有坐标更新时，输出上升沿。

3、2 中输出上升沿后，INT 脚会保持高直到下一个周期（该周期可由配置 Refresh_Rate 决定）

5搭建SOC系统工程
5.1PL图形编程

5.2IP配置

本文中的大部分IP模块在前面的文章实验中都介绍过如何配置了，以下重点看下各个IP的参数设置

1:PWM IP设置

这重点看下pwm ip部分的源码：

以下代码支持设置PWM频率、占空比、以及输出极性

Pwm的参数通过AXI-Lite总线进行配置

2:axi-gpio设置

3:axis_subset_converter设置

4:VDMA IP设置

5:PLL时钟设置

6:VTC视频时序IP设置

5.3编译并导出平台文件

1:单击Block文件à右键àGenerate the Output ProductsàGlobalàGenerate。

2:单击Block文件à右键à Create a HDL wrapper(生成HDL顶层文件)àLet vivado manager wrapper and auto-update(自动更新)。

3:生成Bit文件。

4:导出到硬件: FileàExport HardwareàInclude bitstream

5:导出完成后，对应工程路径的soc_hw路径下有硬件平台文件：system_wrapper.xsa的文件。根据硬件平台文件system_wrapper.xsa来创建需要Platform平台。

6搭建Vitis-sdk工程

创建zu_base sdk platform和APP工程的过程不再重复，可以阅读本章节01~05相关demo。以下给出创建好zu_base sdk platform的截图和对应工程APP的截图。

6.1创建SDK Platform工程

6.2创建SDK APP工程

7程序分析
7.1GPIO输入

在SOC图形化编程中，我们使用了axi-gpio扩展了8个GPIO

以下对gpio的功能做了一些定义：

gpio-bit4/gpio-bit5定义到开发板的2个led

gpio-bit6定义到触摸芯片GT9XX的RESET复位

gpio-bit7定义到触摸芯片GT9XX的INT中断

在C代码中定义如下宏定义，方便对GPIO进行操作

#define LED0 0x10
#define LED1 0x20
#define LCD_RST 0x40
#define LCD_INT 0x80

复制代码

通过Gpiopl_Setup_Intr_System()初始化并使能AXI GPIO的输入中断
GpioplIntrHandler()函数：
判断GPIO[7]输入的触摸屏中断信号是否为0，若为0调用i2cps_rd16(&I2cInst0,&touch_rdata,9,GT9XX_ADDR);读取坐标和i2cps_wr16(&I2cInst0,&touch_wdata,1,GT9XX_ADDR)清楚触摸屏芯片的状态信息为下次读取做好准备，并触摸屏中断标志位btn_event置1，该信号将在定时器中断中使用。
7.2PWM信号输出
AXI PWM的驱动程序由pwm_config.c和pwm_config.h组成。
本例程所使用的液晶屏建议输入PWM信号频率为100Hz~200K Hz。在main函数中通过PWM_Init()函数设置初始输出PWM信号的周期和占空比。
PWM_Init函数：
l 通过PWM_Set_Period函数设置PWM信号周期
l 通过PWM_Set_Duty函数设置PWM信号低电平的占空比
上述函数都是以时钟周期数来设置。在pwm_config.h包含了PWM信号周期和占空比的时钟周期数宏定义。如下：

#define PERIOD_CLOCK_NUM 409600
#define DUTY_CLOCK_NUM 204800

复制代码

由于本例程中，PL部分AXI PWM的参考时钟频率为100MHz，一个时钟周期就是10ns。因此，PWM_Init所设置的PWM信号的周期为4.096ms，占空比为50%，频率约为250Hz。
为了对PWM信号的占空比进行动态调节达到改变液晶屏背光源亮度的目的，又设计了PWM_increase_duty()和PWM_decrease_duty()函数用于增大和减小PWM信号中低电平的占空比。

最后，在main函数中调用PWM_Enable()使能PWM信号输出。

7.3TTC定时器

PS定时器的驱动程序由ttc_intr.c 和ttc_intr.h 组成。在本例程中，PS 定时器用于周期性产生中断来实现 GUI 界面的刷新，以固定的频率的调用 UG_Update()函数实现 GUI 的动态特性。首先，在 main 函数中调用 TTC_init ()函数对定时器进行初始化，其中断周期由以下宏定义决定，周期为 50ms，即 GUI 的刷新频率为 20Hz，刷新频率越高，GUI 的动态变化越快，用户可以根据需求进行调整。

#define TICK_TIMER_FREQ_HZ 20 /* Tick timer counter's output frequency */
<div align="left">#define TICKS_PER_CHANGE_PERIOD TICK_TIMER_FREQ_HZ /* Tick signals per update */</div>

复制代码

在 main 函数中调用TTC_Setup_Intr_System ()函数使能定时器的中，将中断函数设置为TickHandler ()。 TickHandle()函数的过程如下：

1:关闭定时器中断，因为定时器中断函数的执行时间可能会超过定时器设置的中断周期，如 50ms。

2:若触摸屏中断标志位 btn_event 为 1，则对 GPIO 中断函数中读出的触摸信息进行判断，若读取寄存器知道有触点，并且通过判断btn_down知道之前的触电已经松开，则读出并计算出第一个触摸点的 x,y 坐标信息，通过 UG_TouchUpdate() 函数将该触摸坐标反馈至 GUI 界面，表示 GUI 上的该点被触摸。若第一个触摸点状态为抬起（put up），则将无效坐标（-1，-1）通过 UG_TouchUpdate()反馈至 GUI 界面，表示 GUI 上的无任何点被触摸。目前μGUI 库的按键触摸功能只支持单点触摸，因此无法同时设计出两个按键同时被触摸的效果。

3:将变化后最新的 GUI 界面对应的图像通过 Xil_DCacheFlushRange()函数刷进 DDR 中，从而保证 VDMA 将最新的 GUI 界面读出，并显示在触摸屏上。

4:重新使能定时器中断。最后，在 main 函数里调用 XTtcPs_Start ()函数启动定时器工作。

7.4AXI-VDMA初始化

GUI界面显示在PL部分由AXI VDMA，Video Timing Controller，AXI4-Sreamto Video Out三个IP协同完成。其中AXI VDMA需要PS进行设置，AXI VDMA完成PS端DDR3中GUI界面的读取，Video Timing Controller产生通过AXI4-Sreamto Video Out进行GUI界面显示的控制时序。

这里只设置1帧缓存，分辨率设置为1024*600

这里设置让VDMA自动管理帧，设置circle模式，虽然这里只有一帧，由于人机交互界面要求不高，一帧缓存60帧刷新速度，不会感觉到卡顿撕裂。

以下是Video_Out_MM2Ssetup()函数完成VDMA的寄存器的初始化。

7.5I2C读取GT9xx触摸信息
1:I2C器件地址设置

Gt9xx系列触控芯片需要通过Reset和INIT配合设置器件地址，我们这里设置0Xba/0xbb需要满足以下时序。

以下是C代码部分完成对axi-gpio的控制完成触摸芯片的复位初始化，以设置器件地址为0Xba/0xbb,

由于使用的ZYNQ/MPSOC的I2C控制器，所以控制器会对读写方向进行设置，所以给I2C用的器件地址应该左移1bit:

#define GT9XX_ADDR 0xba>>1

2:修改配置寄存器

当我们需要修改触摸液晶分辨率，就需要修改GT9XX的寄存器配置。GT915S_cfg_1024x600定义了186个寄存器配置。其中包括的校验和寄存器，和更新寄存器的值，但是很多时候，我们会自己用程序计算校验和寄存器。

首先读取寄存器0x8047查看当前的配置版本是否是低于或者等于需要更新的设置版本，如果是则更新配置寄存器。

3:读取分辨率信息

为了验证我们写入的参数是否正确，我们这里读取从0x8140开始的10个寄存器，并且判断0x8147/0x8148/0x8149/0x8150这几个寄存器值。

4:读取触控坐标

之前刚刚分析的代码中，gpio-bit7定义到触摸芯片GT9XX的INT中断，因此我们定义了GPIO中断程序，在GPIO中断程序中对坐标进行读取。

7.6GUI设计
GUI界面的驱动程序由gui_window.c、gui_window.h、image.h、ugui.c和ugui.h组成，其中ugui.c和ugui.h来自μGUI库。
在本例程中，一共设计了4个窗口，对应window1~window5。同时，也为每个窗口设计了对应的回调函数window_1_callback()~window_4_callback()。
在main函数中，调用gui_create()函数对GUI进行初始化，并创建所有的窗口及窗口所包含的所有对象。
gui_create()函数的流程如下：

1:调用UG_Init()函数初始化GUI

2:调用UG_FillScreen()函数设置所有GUI窗口的背景颜色

3:调用create_window1()~create_window4()函数依次创建4个窗口

4:调用UG_WindowShow()函数设置GUI显示的第一个窗口为window1

5:调用UG_WaitForUpdate()函数等待定时器中断到来，刷新并显示GUI界面

GUI界面设计以窗口为基础进行，每个界面对应一个窗口，但所有的窗口都对应同一片内存区域。μGUI库中有很多API函数，这里只介绍本例程所涉及的API函数，其余的API可参考μGUI使用手册。4个窗口的设计在create_window1()~create_window4()函数中完成

1:GUI初始化

通过UG_Init()函数设置GUI界面的长宽分辨率，并绑定用户自定义的像素值设置函数PixelSet()。通过UG_FillScreen()函数将所有GUI窗口的背景设置为浅灰色。

2:窗口1设计

窗口1为GUI的欢迎界面。如下图所示。

窗口1的设计在create_window1()函数中完成，流程如下：

1）窗口创建

1>调用UG_WindowCreate()函数绑定窗口1的回调函数为window_1_callback()，设置窗口可包含对象的最大个数为15。

2>调用UG_WindowSetTitleText()函数设置窗口1的标题内容。

3>调用UG_WindowSetTitleTextFont()函数设置标题字体的大小。

2）按键创建

1>调用UG_ButtonCreate()函数创建按键0，并设置按键0的坐标范围

2>调用UG_ButtonSetStyle()函数设置按键0的模式为3D，且按下后背景和字体的颜色会跳变

3>调用UG_ButtonSetAlternateForeColor函数设置按键0按下后改变的字体颜色

4>调用UG_ButtonSetAlternateBackColor函数设置按键0按下后改变的按键背景颜色

5>调用UG_ButtonSetFont函数设置按键0的字体大小

6>调用UG_ButtonSetText函数设置按键0显示的内容

3）文本框创建

文本框0

1>调用UG_TextboxCreate ()函数创建文本框0，并设置文本框0的坐标范围。

2>调用UG_TextboxSetFont()函数设置文本框0内容的字体大小。

3>调用UG_TextboxSetText()函数设置文本框0的内容。

4>调用UG_TextboxSetAlignment()函数设置文本框0中的内容在文本框中的对齐方式。

文本框1

1>调用UG_TextboxSetForeColor()函数设置文本框1内容的字体颜色

2>调用UG_TextboxSetHSpace()函数设置本文框1中每个字符之间的横向距离

3>其余函数调用与文本框0同理

4）图片创建

目前，最新版的μGUI v0.3仅支持在GUI界面中添加RGB565格式的BMP图像。由于本设计中所需添加的两个米联logo均为RGB888格式，为了让μGUI能支持24位RGB888的图片，需要对ugui.c文件中的UG_DrawBMP()函数进行修改，如下所示。其中通过阴影部分为添加的代码

void UG_DrawBMP( UG_S16 xp, UG_S16 yp, UG_BMP* bmp )
{
UG_S16 x,y,xs;
UG_U8 r,g,b;
UG_U16* p;
/*add by osrc 2017.2.18*/
UG_U32* p1;
UG_U16 tmp;
/*add by osrc 2017.2.18*/
UG_U32 tmp1;
UG_COLOR c;
if ( bmp->p == NULL ) return;
/* Only support 16 BPP so far */
if ( bmp->bpp == BMP_BPP_16 )
{
p = (UG_U16*)bmp->p;
}
/*add support for 32 BPP, by osrc 2017.2.18*/
else if(bmp->bpp == BMP_BPP_32)
{
p1 = (UG_U32*)bmp->p;
}
else
{
return;
}
xs = xp;
for(y=0;y<bmp->height;y++)
{
xp = xs;
for(x=0;x<bmp->width;x++)
{
/*add support for RGB888, by osrc 2017.2.18*/
if(bmp->colors == BMP_RGB565)
{
tmp = *p++;
/* Convert RGB565 to RGB888 */
r = (tmp>>11)&0x1F;
r<<=3;
g = (tmp>>5)&0x3F;
g<<=2;
b = (tmp)&0x1F;
b<<=3;
c = ((UG_COLOR)r<<16) | ((UG_COLOR)g<<8) | (UG_COLOR)b;
}
else
{
tmp1 = *p1++;
c = tmp1;
}
UG_DrawPixel( xp++ , yp , c );
}
yp++;
}
}

复制代码

图片0

添加的图片0如下所示，为米联的logo。图片各像素点的值包含在image.h的logo1_bmp数组中。

定义该图片在GUI中的结构体，如下所示。图片的指针logo1_bmp，为图片的长、宽均为65个像素，每个像素点占32bit，图片格式为RGB888。

const UG_BMP logo1 =
{
(void*)logo1_bmp,
65,
65,
BMP_BPP_32,
BMP_RGB888
};

复制代码

1>调用UG_ImageCreate函数在窗口1中创建该图片对象，并设置图片的坐标位置。

2>调用UG_ImageSetBMP函数将上述的logo图像与创建的图片对象绑定。

图片1

定义该图片在GUI中的结构体，如下所示。图片的指针logo2_bmp，为图片的长位259像素，宽为105个像素，每个像素点占32bit，图片格式为RGB888。

const UG_BMP logo2 =
{
(void*)logo2_bmp,
259,
105,
BMP_BPP_32,
BMP_RGB888
};

复制代码

图片对象创建添加方式与图片0相同。

5）回调函数

1个窗口的回调函数当该窗口中的按键的触摸状态发生改变时，会在UG_Update()函数中被调用。在窗口1的回调函数window_1_callback()中设置了按键0的功能，当在触摸屏中按下start application now按键便会使window_1_callback()被调用，通过UG_WindowShow函数，让GUI界面刷新后切换到窗口2。在按下按键的同时，可以观察到按键0字体和背景颜色产生的变化。

2:窗口2设计

窗口2为LED灯控制界面，如下图所示。在该窗口中，用户可以通过触摸LED1~LED5按键来控制开发板上的标识为LD1~LD5的LED灯。

窗口2的设计在create_window2()函数中完成，窗口2中的标题、按键、文本框的创建流程与create_window1()原理相同，详细可参阅工程代码，此处不作赘述。

1）回调函数

窗口2的回调函数window_2_callback()中设置了7个按键0~6的功能，其中LED1~LED5对应5个LED灯的控制功能，通过控制GPIO[3]~GPIO[7]的输出来实现LED灯的开关。当LED灯亮时，对应按键的背景颜色为红色，当LED熄灭时，对应按键的背景颜色还原为绿色。（注意部分开发板只有LED1和LED2可以使用）另外，按下Previous Page按键让GUI界面切换至窗口1，按下Next Page按键让GUI界面切换至窗口3。在按下按键的同时，可以观察到各按键字体和背景颜色产生的变化。

3:窗口3设计

窗口3为液晶屏亮度调节界面，如下图所示。在该窗口中，用户可以通过触摸加、减按键来调节液晶屏背光源的亮度。

窗口3的设计在create_window3()函数中完成，窗口3中的标题、按键、文本框的创建流程与create_window1()原理相同，详细可参阅工程代码，此处不作赘述。

1）回调函数

窗口3的回调函数window_3_callback()中设置了4个按键0~3的功能，其中“-”按键控制PWM信号低电平的占空比减小，从而降低液晶屏亮度；“+”按键控制PWM信号低电平的占空比增大，从而提高液晶屏亮度。另外，按下“Previous Page”按键让GUI界面切换至窗口2，按下“Next Page”按键让GUI界面切换至窗口4。在按下按键的同时，可以观察到各按键字体和背景颜色产生的变化。

4:窗口4设计

窗口4为退出界面，如下图所示。在该窗口中，用户可以通过触摸“YES”、“NO”按键来选择是否退出回到窗口1的欢迎界面。由于窗口5的尺寸小于其他窗口，因此当GUI界面从窗口4切换到窗口5时，可以出两个窗口叠加的效果，并且当窗口5出现时，窗口4的标题栏会由蓝变灰。

窗口5的设计在create_window4()函数中完成，由于窗口5的尺寸小于1024×600，因此需要调用UG_WindowResize()函数重新设置窗口4的尺寸大小及位置。窗口4中的标题、按键、文本框的创建流程与create_window1()原理相同，详细可参阅工程代码，此处不作赘述。
1）回调函数

窗口4的回调函数window_4_callback()中设置了2个按键0~1的功能，按下“YES”按键让GUI界面切换至窗口1，按下“NO”按键让GUI界面切换至窗口4。在按下按键的同时，可以观察到各按键字体和背景颜色产生的变化。

6.7 UGUI 演示程序绘制过程分析
ugui 源码的注释很少，但是作为程序开发者需要有基本的学习分析代码能力。如果这点能力都没有，很难成为优秀的程序员。ugui 图形界面创建过程对学习编程者来说具有非常好的学习参考价值，阅读这种优秀的代码也让作为开发者的本人非常兴奋。
1:初始化包括，触控液晶屏、GPIO、定时器、中断这个环节本文实验中，关键是理解创建 ugui 窗口的环节，包括窗口、控件、TextBox、Image 的创建过程。窗口、控件、TextBox、Image 都是窗口类别中不同 type(类别)。每个 type 都有自己的 ID，自己的状态等。
1:UG_GUI 结构体定义如下

typedef struct
{
void (*pset)(UG_S16,UG_S16,UG_COLOR); /* 指向像素绘制函数，这个函数定义在*gui_window.c中*/
UG_S16 x_dim; /*界面的X方向尺寸*/
UG_S16 y_dim; /*界面的Y方向尺寸*/
UG_TOUCH touch; /*触控对象*/
UG_WINDOW* next_window; /*下一个窗口*/
UG_WINDOW* active_window; /*活动的窗口*/
UG_WINDOW* last_window; /*上一个窗口*/
struct
{
UG_S16 x_pos; /* X位置*/
UG_S16 y_pos; /* y位置*/
UG_S16 x_start; /* X起始*/
UG_S16 y_start; /* Y起始*/
UG_S16 x_end; /* X结束*/
UG_S16 y_end; /* Y结束*/
UG_COLOR fore_color; /* 前色*/
UG_COLOR back_color; /* 背景色*/
} console; /*控制台参数*/
struct
{
unsigned char* p;
UG_S16 char_width; /* */
UG_S16 char_height; /* */
UG_S8 char_h_space; /* */
UG_S8 char_v_space; /* */
} font; /* 字体*/
UG_COLOR fore_color; /* 前色*/
UG_COLOR back_color; /* 背景色*/
UG_COLOR desktop_color; /* 桌面颜色*/
UG_U8 state; /*状态*/
UG_DRIVER driver[NUMBER_OF_DRIVERS];
} UG_GUI;

复制代码

2:UG_WINDOW 结构体用于定义窗体相关的参数

typedef struct S_WINDOW UG_WINDOW;
struct S_WINDOW
{
UG_U8 objcnt; /*窗体可以支持的包括控件、文本等对象的最大数量*/
UG_OBJECT* objlst; /*包括控件、文本等对象的列表，这个会在_UG_GetFreeObject 函数中自动分配*/
UG_U8 state; /*窗体的状态*/
UG_COLOR fc; /*前景色(fc)*/
UG_COLOR bc; /*窗体的背景色*/
UG_S16 xs; /*窗体的窗体开始的起始坐标*/
UG_S16 ys; /*窗体的窗体开始的起始坐标*/
UG_S16 xe; /*窗体的结束坐标*/
UG_S16 ye; /*窗体的结束坐标*/
UG_U8 style;
UG_TITLE title;
void (*cb)( UG_MESSAGE* );
};

复制代码

3:UG_OBJECT 用于定义窗体中的对象的相关参数

typedef struct S_OBJECT UG_OBJECT;
struct S_OBJECT
{
UG_U8 state; /* object state */
UG_U8 touch_state; /* object touch state */
void (*update) (UG_WINDOW*,UG_OBJECT*); /* pointer to object-specific update function */
UG_AREA a_abs; /* absolute area of the object */
UG_AREA a_rel; /* relative area of the object */
UG_U8 type; /* object type */
UG_U8 id; /* object ID */
UG_U8 event; /* object-specific events */
void* data; /* pointer to object-specific data */
};

复制代码

4:UG_BUTTON 用于定义控件的对象

/* -------------------------------------------------------------------------------- */
/* -- BUTTON OBJECT -- */
/* -------------------------------------------------------------------------------- */
/* Button structure */
typedef struct
{
UG_U8 state;
UG_U8 style;
UG_COLOR fc;
UG_COLOR bc;
UG_COLOR afc;
UG_COLOR abc;
const UG_FONT* font;
char* str;
}UG_BUTTON;

复制代码

5:UG_MESSAGE 消息结构体
该函数中的回调函数参数为一个结构体指针，UG_MESSAGE

/* Message structure */
/* Message types */
#define MSG_TYPE_NONE 0
#define MSG_TYPE_WINDOW 1
#define MSG_TYPE_OBJECT 2
typedef struct
{
UG_U8 type; /* 消息类型 */
UG_U8 id; /* 消息ID */
UG_U8 sub_id; /* 子ID */
UG_U8 event; /* 事件 */
void* src; /* void指针*/
} UG_MESSAGE;

复制代码

6:UG_TITLE 标题结构体
下面再分析下 BOTTON 控件对象的创建，至于 TEXT 文本，BMP 图片对象的创建过程读者可以根据这里的分析方
法自行分析代码。
先看下 UG_TITLE 的结构体

/* Title structure */
typedef struct
{
char* str;
const UG_FONT* font;
UG_S8 h_space;
UG_S8 v_space;
UG_U8 align;
UG_COLOR fc;
UG_COLOR bc;
UG_COLOR ifc;
UG_COLOR ibc;
UG_U8 height;
} UG_TITLE;

复制代码

7:其他控件对象请自行阅读源码
其他控件分析请阅读 ugui.c 和 ugui.h 源码这里，仅仅以分析 BOTTON 控件为例。
8:UG_Init 用于初始化 GUI 界面参数

UG_S16 UG_Init( UG_GUI* g, void (*p)(UG_S16,UG_S16,UG_COLOR), UG_S16 x, UG_S16 y )
{
UG_U8 i;
g->pset = (void(*)(UG_S16,UG_S16,UG_COLOR))p;
g->x_dim = x;
g->y_dim = y;
g->console.x_start = 4;
g->console.y_start = 4;
g->console.x_end = g->x_dim - g->console.x_start-1;
g->console.y_end = g->y_dim - g->console.x_start-1;
g->console.x_pos = g->console.x_end;
g->console.y_pos = g->console.y_end;
g->font.char_h_space = 1;
g->font.char_v_space = 1;
g->font.p = NULL;
g->desktop_color = 0x5E8BEf;
g->fore_color = C_WHITE;
g->back_color = C_BLACK;
g->next_window = NULL;
g->active_window = NULL;
g->last_window = NULL;
/* Clear drivers */
for(i=0;i<NUMBER_OF_DRIVERS;i++)
{
g->driver[i].driver = NULL;
g->driver[i].state = 0;
}
gui = g;
return 1;
}

复制代码

UG_Init(GuiPtr, PixelSet, GUI_WIDTH, GUI_HEIGHT);用于初始化 GUI 界面参数
9:UG_FillScreen ( C_GAINSBORO )绘制 GUI
之后通过 UG_FillScreen ( C_GAINSBORO );函数绘制 gui

void UG_FillScreen( UG_COLOR c )
{
UG_FillFrame(0,0,gui->x_dim-1,gui->y_dim-1,c);
}
void UG_FillFrame( UG_S16 x1, UG_S16 y1, UG_S16 x2, UG_S16 y2, UG_COLOR c )
{
UG_S16 n,m;
if ( x2 < x1 )
{
n = x2;
x2 = x1;
x1 = n;
}
if ( y2 < y1 )
{
n = y2;
y2 = y1;
y1 = n;
}
/* Is hardware acceleration available? */
if ( gui->driver[DRIVER_FILL_FRAME].state & DRIVER_ENABLED )
{
if( ((UG_RESULT(*)(UG_S16 x1, UG_S16 y1, UG_S16 x2, UG_S16 y2, UG_COLOR
c))gui->driver[DRIVER_FILL_FRAME].driver)(x1,y1,x2,y2,c) == UG_RESULT_OK ) return;
}
for( m=y1; m<=y2; m++ )
{
for( n=x1; n<=x2; n++ )
{
gui->pset(n,m,c);
}
}
}

复制代码

gui->pset是一个指针函数，指向了 gui_window.c中的 PixelSet，PixelSet函数绘制点在内存中，这个内存也是显存，
后面的所有绘制图形最终都要绘制到这个缓存。所以当 UG_FillScreen 执行后，输出界面就能看到界面的背景色了。
10:PixelSet 绘制内存函数

void PixelSet(UG_S16 x, UG_S16 y, UG_COLOR c)
{
u32 iPixelAddr;
iPixelAddr = y * GUI_WIDTH + x;
BufferPtr[0][iPixelAddr] = c;
}

复制代码

11:_UG_GetFreeObject( UG_WINDOW* wnd )函数分配资源
一个窗体会有多种类型的多种对象，每次创建对象都会调用 UG_OBJECT*
_UG_GetFreeObject( UG_WINDOW* wnd )来自动分配序号，其中 bj->state 的初始状态由 UG_WindowCreate 函数中
设置为 OBJ_STATE_INIT,当某个对象被初始化为初始状态，说明该对象可以被使用和创建，否则代表了该对象已
经被创建，则返回 NULL

/* Object states */
#define OBJ_STATE_FREE (1<<0)
#define OBJ_STATE_VALID (1<<1)
#define OBJ_STATE_BUSY (1<<2)
#define OBJ_STATE_VISIBLE (1<<3)
#define OBJ_STATE_ENABLE (1<<4)
#define OBJ_STATE_UPDATE (1<<5)
#define OBJ_STATE_REDRAW (1<<6)
#define OBJ_STATE_TOUCH_ENABLE (1<<7)
#define OBJ_STATE_INIT (OBJ_STATE_FREE | OBJ_STATE_VALID)
UG_OBJECT* _UG_GetFreeObject( UG_WINDOW* wnd )
{
UG_U8 i;
UG_OBJECT* obj=(UG_OBJECT*)wnd->objlst;
for(i=0;i<wnd->objcnt;i++)
{
obj = (UG_OBJECT*)(&wnd->objlst[i]);
if ( (obj->state & OBJ_STATE_FREE) && (obj->state & OBJ_STATE_VALID) )
{
/* Free object found! */
return obj;
}
}
return NULL;
} <img width="15" _height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" border="0" alt="">

复制代码

12:create_window1 函数分析
create_window1();create_window2();create_window3();create_window4();用于创建4个界面窗口，创建的过程都是类似，以create_window1()来说。

void create_window1(void)
{
/* Create Window 1 */
UG_WindowCreate( &window_1, obj_buff_wnd_1, MAX_OBJECTS, window_1_callback );
UG_WindowSetTitleText( &window_1, "礕UI For Milianke Board" );
UG_WindowSetTitleTextFont( &window_1, &FONT_12X20 );
/* Create Button 1 */
UG_ButtonCreate( &window_1, &button1_1, BTN_ID_0, 100,
UG_WindowGetInnerHeight(&window_1)-100,
UG_WindowGetInnerWidth( &window_1 )-100,
UG_WindowGetInnerHeight(&window_1)-50 );
UG_ButtonSetStyle( &window_1 , BTN_ID_0 , BTN_STYLE_3D | BTN_STYLE_USE_ALTERNATE_COLORS);
UG_ButtonSetAlternateForeColor(&window_1 , BTN_ID_0 , C_RED);
UG_ButtonSetAlternateBackColor(&window_1 , BTN_ID_0 , C_BLUE);
UG_ButtonSetFont( &window_1, BTN_ID_0, &FONT_22X36 );
UG_ButtonSetText( &window_1, BTN_ID_0, "Start Application Now" );
/* Create Textbox 1 */
UG_TextboxCreate( &window_1, &textbox1_1, TXB_ID_0, 10, 10, UG_WindowGetInnerWidth( &window_1 )-10, 40 );
UG_TextboxSetFont( &window_1, TXB_ID_0, &FONT_12X20 );
UG_TextboxSetText( &window_1, TXB_ID_0, "Welcome to Milianke 礕UI v1.0" );
UG_TextboxSetAlignment( &window_1, TXB_ID_0, ALIGN_TOP_CENTER );
/* Create Textbox 2 */
UG_TextboxCreate( &window_1, &textbox1_2, TXB_ID_1, 10, 125, UG_WindowGetInnerWidth( &window_1 )-10, 155 );
UG_TextboxSetFont( &window_1, TXB_ID_1, &FONT_16X26 );
UG_TextboxSetText( &window_1, TXB_ID_1, "www.uisrc.com" );
UG_TextboxSetAlignment( &window_1, TXB_ID_1, ALIGN_BOTTOM_CENTER );
UG_TextboxSetForeColor( &window_1, TXB_ID_1, C_BLUE );
UG_TextboxSetHSpace( &window_1, TXB_ID_1, 1 );
/* Create Image 1 */
UG_ImageCreate( &window_1, &image1_1, IMG_ID_0, (UG_WindowGetInnerWidth( &window_1 )>>1) - (logo1.width>>1), 50, 0, 0 );
UG_ImageSetBMP( &window_1, IMG_ID_0, &logo1 );
/* Create Image 2 */
UG_ImageCreate( &window_1, &image1_2, IMG_ID_1, (UG_WindowGetInnerWidth( &window_1 )>>1) - (logo2.width>>1), 180, 0,
0 );
UG_ImageSetBMP( &window_1, IMG_ID_1, &logo2 );
}

复制代码

13:UG_WindowCreate 窗口创建
UG_WindowCreate( &window_1, obj_buff_wnd_1, MAX_OBJECTS, window_1_callback );函数主要完成窗口结构体参数的设置，这里不绘制窗口，窗口
的绘制在后面完成

/* -------------------------------------------------------------------------------- */
/* -- WINDOW FUNCTIONS -- */
/* -------------------------------------------------------------------------------- */
UG_RESULT UG_WindowCreate( UG_WINDOW* wnd, UG_OBJECT* objlst, UG_U8 objcnt, void (*cb)( UG_MESSAGE* ) )
{
UG_U8 i;
UG_OBJECT* obj=NULL;
if ( (wnd == NULL) || (objlst == NULL) || (objcnt == 0) ) return UG_RESULT_FAIL;
/* Initialize all objects of the window */
for(i=0; i<objcnt; i++)
{
obj = (UG_OBJECT*)&objlst[i];
obj->state = OBJ_STATE_INIT; /* #define OBJ_STATE_INIT (OBJ_STATE_FREE |OBJ_STATE_VALID)*/
obj->data = NULL;
}
/* Initialize window */
wnd->objcnt = objcnt;
wnd->objlst = objlst;
wnd->state = WND_STATE_VALID;
wnd->fc = 0x000000;
wnd->bc = 0xF0F0F0;
wnd->xs = 0;
wnd->ys = 0;
wnd->xe = UG_GetXDim()-1;
wnd->ye = UG_GetYDim()-1;
wnd->cb = cb; /* 设置消息的回调函数指针，回调函数等后面消息回调的时候介绍 */
wnd->style = WND_STYLE_3D | WND_STYLE_SHOW_TITLE;
/* Initialize window title-bar */
wnd->title.str = NULL;
wnd->title.font = NULL;
wnd->title.h_space = 2;
wnd->title.v_space = 2;
wnd->title.align = ALIGN_CENTER_LEFT;
wnd->title.fc = C_WHITE;
wnd->title.bc = C_BLUE;
wnd->title.ifc = C_WHITE;
wnd->title.ibc = C_GRAY;
wnd->title.height = 15;
return UG_RESULT_OK;
}

复制代码

14:UG_WindowSetTitleText 设置窗体标题字符
UG_WindowSetTitleText( &window_1, "ugUI For Milianke Board" );用于设置窗体的Title显示字符

UG_RESULT UG_WindowSetTitleText( UG_WINDOW* wnd, char* str )
{
if ( (wnd != NULL) && (wnd->state & WND_STATE_VALID) )
{
wnd->title.str = str;
wnd->state |= WND_STATE_UPDATE | WND_STATE_REDRAW_TITLE;
return UG_RESULT_OK;
}
return UG_RESULT_FAIL;
}

复制代码

15:UG_WindowSetTitleTextFont 设置窗体标题字体
UG_WindowSetTitleTextFont( &window_1, &FONT_12X20 );该函数用于设置窗口 title 的字符大小

UG_RESULT UG_WindowSetTitleTextFont( UG_WINDOW* wnd, const UG_FONT* font )
{
if ( (wnd != NULL) && (wnd->state & WND_STATE_VALID) )
{
wnd->state |= WND_STATE_UPDATE | WND_STATE_REDRAW_TITLE;
wnd->title.font = font;
if ( wnd->title.height <= (font->char_height + 1) )
{
wnd->title.height = font->char_height + 2;
wnd->state &= ~WND_STATE_REDRAW_TITLE;
}
return UG_RESULT_OK;
}
return UG_RESULT_FAIL;
}

复制代码

FONT_12X20 的定义如下：

在 ugui.h 文件中
#define USE_FONT_12X20
#ifdef USE_FONT_12X20
extern const UG_FONT FONT_12X20;
#endif
在 ugui.c 文件中
#ifdef USE_FONT_12X20
const UG_FONT FONT_12X20 = {(unsigned char*)font_12x20,12,20};
#endif

复制代码

16:UG_ButtonCreate 控件-Button 创建
创建控件函数主要对控件的结构体参数设置，本文这里仅仅以创建 Button 为例，创建后也不是立马完成绘制
UG_ButtonCreate( &window_1, &button1_1, BTN_ID_0, 100,

UG_WindowGetInnerHeight(&window_1)-100,
UG_WindowGetInnerWidth( &window_1 )-100,
UG_WindowGetInnerHeight(&window_1)-50 );

/* -------------------------------------------------------------------------------- */
UG_RESULT UG_ButtonCreate( UG_WINDOW* wnd, UG_BUTTON* btn, UG_U8 id, UG_S16 xs, UG_S16 ys, UG_S16 xe, UG_S16 ye )
{
UG_OBJECT* obj;
obj = _UG_GetFreeObject( wnd );
if ( obj == NULL ) return UG_RESULT_FAIL;常州一二三/常州米联客电子科技有限公司米联客（MILIANKE）www.uisrc.com www.milianke.com ZYNQ SOC SDK Advanced Course (2024)
364
/* Initialize object-specific parameters */
btn->state = BTN_STATE_RELEASED;
btn->bc = wnd->bc; /* 按键正常显示的前景颜色 */
btn->fc = wnd->fc; /* 按键正常显示的背景颜色 */
btn->abc = wnd->bc; /*按键按下显示的前景颜色 */
btn->afc = wnd->fc; /*按键按下显示的背景颜色 */
btn->style = BTN_STYLE_3D;
btn->font = NULL;
btn->str = "-";
/* Initialize standard object parameters */
obj->update = _UG_ButtonUpdate; /*这是一个指针函数，用于更新控件 */
obj->touch_state = OBJ_TOUCH_STATE_INIT;
obj->type = OBJ_TYPE_BUTTON;
obj->event = OBJ_EVENT_NONE;
obj->a_rel.xs = xs;
obj->a_rel.ys = ys;
obj->a_rel.xe = xe;
obj->a_rel.ye = ye;
obj->a_abs.xs = -1;
obj->a_abs.ys = -1;
obj->a_abs.xe = -1;
obj->a_abs.ye = -1;
obj->id = id;
obj->state |= OBJ_STATE_VISIBLE | OBJ_STATE_REDRAW | OBJ_STATE_VALID | OBJ_STATE_TOUCH_ENABLE;
obj->data = (void*)btn;
/* Update function: Do your thing! */
obj->state &= ~OBJ_STATE_FREE;
return UG_RESULT_OK;
}

复制代码

以上函数中 obj = _UG_GetFreeObject( wnd );函数用于设置未被使用的 object 列表参数

UG_OBJECT* _UG_GetFreeObject( UG_WINDOW* wnd )
{
UG_U8 i;
UG_OBJECT* obj=(UG_OBJECT*)wnd->objlst;
for(i=0;i<wnd->objcnt;i++)
{
obj = (UG_OBJECT*)(&wnd->objlst[i]);
if ( (obj->state & OBJ_STATE_FREE) && (obj->state & OBJ_STATE_VALID) )
{
/* Free object found! */
return obj;
}
}
return NULL;
}

复制代码

17:UG_ButtonSetStyle 函数设置控件的 Style

UG_RESULT UG_ButtonSetStyle( UG_WINDOW* wnd, UG_U8 id, UG_U8 style )
{
UG_OBJECT* obj=NULL;
UG_BUTTON* btn=NULL;
obj = _UG_SearchObject( wnd, OBJ_TYPE_BUTTON, id );
if ( obj == NULL ) return UG_RESULT_FAIL;
btn = (UG_BUTTON*)(obj->data);
/* Select color scheme */
btn->style &= ~(BTN_STYLE_USE_ALTERNATE_COLORS | BTN_STYLE_TOGGLE_COLORS);
btn->state |= BTN_STATE_ALWAYS_REDRAW;
if ( style & BTN_STYLE_TOGGLE_COLORS )
{
btn->style |= BTN_STYLE_TOGGLE_COLORS;
}
else if ( style & BTN_STYLE_USE_ALTERNATE_COLORS )
{
btn->style |= BTN_STYLE_USE_ALTERNATE_COLORS;
}
else
{
btn->state &= ~BTN_STATE_ALWAYS_REDRAW;
}
/* 3D or 2D */
if ( style & BTN_STYLE_3D )
{
btn->style |= BTN_STYLE_3D;
}
else
{
btn->style &= ~BTN_STYLE_3D;
}
obj->state |= OBJ_STATE_UPDATE | OBJ_STATE_REDRAW;
return UG_RESULT_OK;
}

复制代码

18:UG_SearchObject 判断控件是否有效
以上函数中 obj = _UG_SearchObject( wnd, OBJ_TYPE_BUTTON, id );用于判断当前对象是否有效

UG_OBJECT* _UG_SearchObject( UG_WINDOW* wnd, UG_U8 type, UG_U8 id )
{
UG_U8 i;
UG_OBJECT* obj=(UG_OBJECT*)wnd->objlst;
for(i=0;i<wnd->objcnt;i++)
{
obj = (UG_OBJECT*)(&wnd->objlst[i]);
if ( !(obj->state & OBJ_STATE_FREE) && (obj->state & OBJ_STATE_VALID) )
{
if ( (obj->type == type) && (obj->id == id) )
{
/* Requested object found! */
return obj;
}
}
}
return NULL;
}

复制代码

19:其他相关 Button 函数不详细介绍
UG_ButtonSetAlternateForeColor(&window_1 , BTN_ID_0 , C_RED);设置当触控按下前景颜色(字体颜色)
UG_ButtonSetAlternateBackColor(&window_1 , BTN_ID_0 , C_BLUE); 设置当触控按下背景颜色(背景颜色)
UG_ButtonSetFont( &window_1, BTN_ID_0, &FONT_22X36 );设置字体
UG_ButtonSetText( &window_1, BTN_ID_0, "Start Application Now" );设置文本
20:UG_WindowShow 设置需要显示的窗体
以上函数执行完成后并不会立马完成窗体的绘制，而是先调用UG_WindowShow( &window_1 )函数，该函数设置窗体的
状态，以及设置 ui->next_window为当前窗体。但是这个函数也是设置窗体的相关结构体参数，为显示做好准备，如
下设置两个关键参数WND_STATE_VISIBLE | WND_STATE_UPDATE;

UG_RESULT UG_WindowShow( UG_WINDOW* wnd )
{
if ( wnd != NULL )
{
/* Force an update, even if this is the active window! */
wnd->state |= WND_STATE_VISIBLE | WND_STATE_UPDATE;
wnd->state &= ~WND_STATE_REDRAW_TITLE;
gui->next_window = wnd;
return UG_RESULT_OK;
}
return UG_RESULT_FAIL;
}

复制代码

21:UG_WaitForUpdate 等待窗体更新
调用UG_WaitForUpdate()函数等待窗体更新，这个函数是等待窗口更新，也不具体实现窗口的绘制。

void UG_WaitForUpdate( void )
{
gui->state |= UG_SATUS_WAIT_FOR_UPDATE;
while ( (volatile UG_U8)gui->state & UG_SATUS_WAIT_FOR_UPDATE ){};
}

复制代码

22:那么问题来了，什么时候绘制窗口呢？
每间隔 250ms，定时器中断一次，在定时器中断中，读取触控芯片的寄存器，判断是否有触控按下。更新按键状态；同时，会更新窗口状态。所以关键是 timer_callback 函数中断中的三个函数：
UG_TouchUpdate(*px_int[0], *py_int[0], TOUCH_STATE_PRESSED);该函数用于更新按键状态为按下状态，并且设置触控的坐标，后面的识别对应控件是否按下就是通过识别触控的坐标范围是否在绘制的触控按键坐标范围实现。
23:UG_TouchUpdate 函数用于更新触控状态
UG_TouchUpdate(-1, -1, TOUCH_STATE_RELEASED); 该函数坐标设置-1 的时候代表释放，因为显示屏幕中没有负坐标

void UG_TouchUpdate( UG_S16 xp, UG_S16 yp, UG_U8 state )
{
gui->touch.xp = xp;
gui->touch.yp = yp;
gui->touch.state = state;
}

复制代码

24:UG_Update()函数用于更新窗口状态
UG_Update()函数用于更新窗口状态，首先如果 gui 处于等待更新(在前面的 UG_WaitForUpdate 函数中等待更新完成)，则设置 gui->state &= ~UG_SATUS_WAIT_FOR_UPDATE ，表示已经更新。

void UG_Update( void )
{
UG_WINDOW* wnd;
/* Is somebody waiting for this update? */
if ( gui->state & UG_SATUS_WAIT_FOR_UPDATE ) gui->state &= ~UG_SATUS_WAIT_FOR_UPDATE;
/* Keep track of the windows */
if ( gui->next_window != gui->active_window ) /*当窗口切换的时候，记录上一个窗口，以及更新新的活动窗口 */
{
if ( gui->next_window != NULL )
{
gui->last_window = gui->active_window; /* 记录上一个窗口 */
gui->active_window = gui->next_window; /* 记录上当前窗口*/
/* Do we need to draw an inactive title? 是否绘制未激活的上一个串口的TITLE*/
if ( (gui->last_window->style & WND_STYLE_SHOW_TITLE) && (gui->last_window->state & WND_STATE_VISIBLE) )
{
/* Do both windows differ in size */
if ( (gui->last_window->xs != gui->active_window->xs) || (gui->last_window->xe != gui->active_window->xe) ||
(gui->last_window->ys != gui->active_window->ys) || (gui->last_window->ye != gui->active_window->ye) )
{
/* Redraw title of the last window */
_UG_WindowDrawTitle( gui->last_window );
}
}
gui->active_window->state &= ~WND_STATE_REDRAW_TITLE;
gui->active_window->state |= WND_STATE_UPDATE | WND_STATE_VISIBLE; /* 需要更新显示 */
}
}
/* Is there an active window */
if ( gui->active_window != NULL )
{
wnd = gui->active_window;
/* Does the window need to be updated? ，更新*/
if ( wnd->state & WND_STATE_UPDATE )
{
/* Do it! */
_UG_WindowUpdate( wnd );
}
/* Is the window visible? 显示*/
if ( wnd->state & WND_STATE_VISIBLE )
{
_UG_ProcessTouchData( wnd );//update touch check state
_UG_UpdateObjects( wnd );
_UG_HandleEvents( wnd );
}
}
}

复制代码

25:_UG_WindowUpdate( wnd )更新窗口绘制
更新窗口的同时会设置，更新窗口控件对象的状态。

void _UG_WindowUpdate( UG_WINDOW* wnd )
{
UG_U16 i,objcnt;
UG_OBJECT* obj;
UG_S16 xs,ys,xe,ye;
xs = wnd->xs;
ys = wnd->ys;
xe = wnd->xe;
ye = wnd->ye;
wnd->state &= ~WND_STATE_UPDATE;
/* Is the window visible? 如果窗口需要显示，则绘制窗口*/
if ( wnd->state & WND_STATE_VISIBLE )
{
/* 3D style? */
if ( (wnd->style & WND_STYLE_3D) && !(wnd->state & WND_STATE_REDRAW_TITLE) )
{
_UG_DrawObjectFrame(xs,ys,xe,ye,(UG_COLOR*)pal_window);
xs+=3;
ys+=3;
xe-=3;
ye-=3;
}
/* Show title bar? */
if ( wnd->style & WND_STYLE_SHOW_TITLE )
{
_UG_WindowDrawTitle( wnd );
ys += wnd->title.height+1;
if ( wnd->state & WND_STATE_REDRAW_TITLE )
{
wnd->state &= ~WND_STATE_REDRAW_TITLE;
return;
}
}
/* Draw window area? */
UG_FillFrame(xs,ys,xe,ye,wnd->bc);
/* Force each object to be updated! 当新窗口更新后，更新窗口包含的object（对象）*/
objcnt = wnd->objcnt;
for(i=0; i<objcnt; i++)
{
obj = (UG_OBJECT*)&wnd->objlst[i];
if ( !(obj->state & OBJ_STATE_FREE) && (obj->state & OBJ_STATE_VALID) && (obj->state & OBJ_STATE_VISIBLE) )
obj->state |= (OBJ_STATE_UPDATE | OBJ_STATE_REDRAW);
}
}
else
{
UG_FillFrame(wnd->xs,wnd->xs,wnd->xe,wnd->ye,gui->desktop_color);
}
}

复制代码

26:_UG_DrawObjectFrame 更新窗口绘制
一下绘制窗口的边框，使用 UG_DrawLine 函数

void _UG_DrawObjectFrame( UG_S16 xs, UG_S16 ys, UG_S16 xe, UG_S16 ye, UG_COLOR* p )
{
// Frame 0
UG_DrawLine(xs, ys , xe-1, ys , *p++);
UG_DrawLine(xs, ys+1, xs , ye-1, *p++);
UG_DrawLine(xs, ye , xe , ye , *p++);
UG_DrawLine(xe, ys , xe , ye-1, *p++);
// Frame 1
UG_DrawLine(xs+1, ys+1, xe-2, ys+1, *p++);
UG_DrawLine(xs+1, ys+2, xs+1, ye-2, *p++);
UG_DrawLine(xs+1, ye-1, xe-1, ye-1, *p++);
UG_DrawLine(xe-1, ys+1, xe-1, ye-2, *p++);
// Frame 2
UG_DrawLine(xs+2, ys+2, xe-3, ys+2, *p++);
UG_DrawLine(xs+2, ys+3, xs+2, ye-3, *p++);
UG_DrawLine(xs+2, ye-2, xe-2, ye-2, *p++);
UG_DrawLine(xe-2, ys+2, xe-2, ye-3, *p);
}

复制代码

27:UG_DrawLine 绘制线条

void UG_DrawLine( UG_S16 x1, UG_S16 y1, UG_S16 x2, UG_S16 y2, UG_COLOR c )
{
UG_S16 n, dx, dy, sgndx, sgndy, dxabs, dyabs, x, y, drawx, drawy;
if ( x2 < x1 )
{
n = x2;
x2 = x1;
x1 = n;
}
if ( y2 < y1 )
{
n = y2;
y2 = y1;
y1 = n;
}
/* Is hardware acceleration available? */
if ( gui->driver[DRIVER_DRAW_LINE].state & DRIVER_ENABLED )
{
if( ((UG_RESULT(*)(UG_S16 x1, UG_S16 y1, UG_S16 x2, UG_S16 y2, UG_COLOR
c))gui->driver[DRIVER_DRAW_LINE].driver)(x1,y1,x2,y2,c) == UG_RESULT_OK ) return;
}
dx = x2 - x1;
dy = y2 - y1;
dxabs = (dx>0)?dx:-dx;
dyabs = (dy>0)?dy:-dy;
sgndx = (dx>0)?1:-1;
sgndy = (dy>0)?1:-1;
x = dyabs >> 1;
y = dxabs >> 1;
drawx = x1;
drawy = y1;
gui->pset(drawx, drawy,c);
if( dxabs >= dyabs )
{
for( n=0; n<dxabs; n++ )
{
y += dyabs;
if( y >= dxabs )
{
y -= dxabs;
drawy += sgndy;
}
drawx += sgndx;
gui->pset(drawx, drawy,c);
}
}
else
{
for( n=0; n<dyabs; n++ )
{
x += dxabs;
if( x >= dyabs )
{
x -= dyabs;
drawx += sgndx;
}
drawy += sgndy;
gui->pset(drawx, drawy,c);
}
}

复制代码

UG_DrawLine 函数具体的实现过程如下，给出起始坐标，终点坐标即可完成绘制，到这里 gui->pset 才是完成了具体的绘制工作。
28:_UG_ProcessTouchData( wnd )用于更新触控的状态

void _UG_ProcessTouchData( UG_WINDOW* wnd )
{
UG_S16 xp,yp;
UG_U16 i,objcnt;
UG_OBJECT* obj;
UG_U8 objstate;
UG_U8 objtouch;
UG_U8 tchstate;
xp = gui->touch.xp;
yp = gui->touch.yp;
tchstate = gui->touch.state;
objcnt = wnd->objcnt;
for(i=0; i<objcnt; i++)
{
obj = (UG_OBJECT*)&wnd->objlst[i];
objstate = obj->state;
objtouch = obj->touch_state;
if ( !(objstate & OBJ_STATE_FREE) && (objstate & OBJ_STATE_VALID) && (objstate & OBJ_STATE_VISIBLE) && !(objstate &
OBJ_STATE_REDRAW))
{
/* Process touch data */
if ( (tchstate) && xp != -1 )
{
if ( !(objtouch & OBJ_TOUCH_STATE_IS_PRESSED) )
{
objtouch |= OBJ_TOUCH_STATE_PRESSED_OUTSIDE_OBJECT | OBJ_TOUCH_STATE_CHANGED;
objtouch &= ~(OBJ_TOUCH_STATE_RELEASED_ON_OBJECT | OBJ_TOUCH_STATE_RELEASED_OUTSIDE_OBJECT |
OBJ_TOUCH_STATE_CLICK_ON_OBJECT);
}
objtouch &= ~OBJ_TOUCH_STATE_IS_PRESSED_ON_OBJECT;
if ( xp >= obj->a_abs.xs )
{
if ( xp <= obj->a_abs.xe )
{
if ( yp >= obj->a_abs.ys )
{
if ( yp <= obj->a_abs.ye )
{
objtouch |= OBJ_TOUCH_STATE_IS_PRESSED_ON_OBJECT;
if ( !(objtouch & OBJ_TOUCH_STATE_IS_PRESSED) )
{
objtouch &= ~OBJ_TOUCH_STATE_PRESSED_OUTSIDE_OBJECT;
objtouch |= OBJ_TOUCH_STATE_PRESSED_ON_OBJECT;
}
}
}
}
}
objtouch |= OBJ_TOUCH_STATE_IS_PRESSED;
}
else if ( objtouch & OBJ_TOUCH_STATE_IS_PRESSED )
{
if ( objtouch & OBJ_TOUCH_STATE_IS_PRESSED_ON_OBJECT )
{
if ( objtouch & OBJ_TOUCH_STATE_PRESSED_ON_OBJECT ) objtouch |= OBJ_TOUCH_STATE_CLICK_ON_OBJECT;
objtouch |= OBJ_TOUCH_STATE_RELEASED_ON_OBJECT;
}
else
{
objtouch |= OBJ_TOUCH_STATE_RELEASED_OUTSIDE_OBJECT;
}
if ( objtouch & OBJ_TOUCH_STATE_IS_PRESSED )
{
objtouch |= OBJ_TOUCH_STATE_CHANGED;
}
objtouch &= ~(OBJ_TOUCH_STATE_PRESSED_OUTSIDE_OBJECT | OBJ_TOUCH_STATE_PRESSED_ON_OBJECT |
OBJ_TOUCH_STATE_IS_PRESSED);
}
}
obj->touch_state = objtouch;
}
}

复制代码

29:_UG_UpdateObjects( wnd )函数负责更新控件对象

void _UG_UpdateObjects( UG_WINDOW* wnd )
{
UG_U16 i,objcnt;
UG_OBJECT* obj;
UG_U8 objstate;
UG_U8 objtouch;
/* Check each object, if it needs to be updated? ，这个检查是否需要更新实在_UG_WindowUpdate( wnd )绘制窗口中设置*/
objcnt = wnd->objcnt;
for(i=0; i<objcnt; i++)
{
obj = (UG_OBJECT*)&wnd->objlst[i];
objstate = obj->state;
objtouch = obj->touch_state; /*把控件的触控状态复制给objtouch */
if ( !(objstate & OBJ_STATE_FREE) && (objstate & OBJ_STATE_VALID) )
{
if ( objstate & OBJ_STATE_UPDATE )
{
obj->update(wnd,obj); /*更新控件 */
}
if ( (objstate & OBJ_STATE_VISIBLE) && (objstate & OBJ_STATE_TOUCH_ENABLE) )
{
if ( (objtouch & (OBJ_TOUCH_STATE_CHANGED | OBJ_TOUCH_STATE_IS_PRESSED)) )
{
obj->update(wnd,obj);
}
}
}
}
}

复制代码

在创建控件的时候已经设置好了指针函数，obj->update(wnd,obj)指针函数会调用_UG_ButtonUpdate 函数，以下函
数最终会调用 UG_DrawLine 函数完成绘制。这个函数也会对按键的状态进行更新

void _UG_ButtonUpdate(UG_WINDOW* wnd, UG_OBJECT* obj)
{
UG_BUTTON* btn;
UG_AREA a;
UG_TEXT txt;
UG_U8 d;
/* Get object-specific data */
btn = (UG_BUTTON*)(obj->data);
/* -------------------------------------------------- */
/* Object touch section */
/* -------------------------------------------------- */
if ( (obj->touch_state & OBJ_TOUCH_STATE_CHANGED) )
{
/* Handle 'click' event */
if ( obj->touch_state & OBJ_TOUCH_STATE_CLICK_ON_OBJECT )
{
obj->event = BTN_EVENT_CLICKED;
obj->state |= OBJ_STATE_UPDATE;
}
/* Is the button pressed down? */
if ( obj->touch_state & OBJ_TOUCH_STATE_PRESSED_ON_OBJECT )
{
btn->state |= BTN_STATE_PRESSED;
obj->state |= OBJ_STATE_UPDATE;
}
/* Can we release the button? */
else if ( btn->state & BTN_STATE_PRESSED )
{
btn->state &= ~BTN_STATE_PRESSED;
obj->state |= OBJ_STATE_UPDATE;
}
obj->touch_state &= ~OBJ_TOUCH_STATE_CHANGED;
}
/* -------------------------------------------------- */
/* Object update section */
/* -------------------------------------------------- */
if ( obj->state & OBJ_STATE_UPDATE )
{
if ( obj->state & OBJ_STATE_VISIBLE )
{
/* Full redraw necessary? */
if ( (obj->state & OBJ_STATE_REDRAW) || (btn->state & BTN_STATE_ALWAYS_REDRAW) )
{
UG_WindowGetArea(wnd,&a);
obj->a_abs.xs = obj->a_rel.xs + a.xs;
obj->a_abs.ys = obj->a_rel.ys + a.ys;
obj->a_abs.xe = obj->a_rel.xe + a.xs;
obj->a_abs.ye = obj->a_rel.ye + a.ys;
if ( obj->a_abs.ye >= wnd->ye ) return;
if ( obj->a_abs.xe >= wnd->xe ) return;
/* 3D or 2D style? */
d = ( btn->style & BTN_STYLE_3D )? 3:1;
txt.bc = btn->bc;
txt.fc = btn->fc;
if( btn->state & BTN_STATE_PRESSED )
{
/* "toggle" style? */
if( btn->style & BTN_STYLE_TOGGLE_COLORS )
{
/* Swap colors */
txt.bc = btn->fc;
txt.fc = btn->bc;
}
/* Use alternate colors? */
else if ( btn->style & BTN_STYLE_USE_ALTERNATE_COLORS )
{
txt.bc = btn->abc;
txt.fc = btn->afc;
}
}
UG_FillFrame(obj->a_abs.xs+d, obj->a_abs.ys+d, obj->a_abs.xe-d, obj->a_abs.ye-d, txt.bc);
/* Draw button text */
txt.a.xs = obj->a_abs.xs+d;
txt.a.ys = obj->a_abs.ys+d;
txt.a.xe = obj->a_abs.xe-d;
txt.a.ye = obj->a_abs.ye-d;
txt.align = ALIGN_CENTER;
txt.font = btn->font;
txt.h_space = 2;
txt.v_space = 2;
txt.str = btn->str;
_UG_PutText( &txt );
obj->state &= ~OBJ_STATE_REDRAW;
}
/* Draw button frame */
if ( btn->style & BTN_STYLE_3D )
{ /* 3D */
_UG_DrawObjectFrame(obj->a_abs.xs,obj->a_abs.ys,obj->a_abs.xe,obj->a_abs.ye,
(btn->state&BTN_STATE_PRESSED)?(UG_COLOR*)pal_button_pressed:(UG_COLOR*)pal_button_released);
}
else
{ /* 2D */
UG_DrawFrame(obj->a_abs.xs,obj->a_abs.ys,obj->a_abs.xe,obj->a_abs.ye,(btn->state&BTN_STATE_PRESSED)?btn->abc:btn->afc);
}
}
else
{
UG_FillFrame(obj->a_abs.xs, obj->a_abs.ys, obj->a_abs.xe, obj->a_abs.ye, wnd->bc);
}
obj->state &= ~OBJ_STATE_UPDATE;
}
}

复制代码

8硬件接线

下图中 TF 卡不是必须的

9实验结果
在配套工程的uisrc/06_doc路径下有录制的测试视频

您还未登录

登录后即可体验更多功能