如何设计一个 GUI 框架 之 QdUI

在一些嵌入式场合中需要一些UI界面，目前可选的GUI非常之多，ucGUI、QT等等。

这里我们设计开发了一套非常简单的GUI框架，开源给大家使用，同时也探讨一些GUI开发过程中的一些难点。

以下QdUI的图片都是在 STM32F407 上面运行的效果。

代码开源。git下载地址如下：

https://gitee.com/qidiyun/QdUI 

QdUI 的特点：

简单：QdUI的特点是非常简单。没有多余的功能，这也意味着它的代码量非常小，很多功能都没有。但是这不妨碍我们的使用。因为我们可以灵活的编程，同时适用于一些非常简单场合。

支持多窗口：QdUI支持多个窗口，例如下图三个窗口：，实现了窗口重叠覆盖等功能。

完美支持 汉字 ：上图可以看到小狗

支持图片显示功能：可以使用图片，达到更好的显示效果。如下图：

支持触摸事件机制编程：每个图片，每个窗口都是一个对象。当用户触摸屏幕时，会将事件传递到对应的对象的处理函数。用户可以自定义事件处理函数。

	//创建一个空白窗口
    wd_bar = BK_Create(0, 0, 320, 30,  "2 dream");
    //设置该窗口的 显示 函数，  事件处理函数
	Wd_SetFun(wd_bar, wdbar_show, EventWindow_bar);

    //在 wd_bar 这个窗口上，新建一个 image_lock 的图片显示
	image_lock = Image_Create(240,  0, 30, 30, wd_bar);
    //在 wd_bar 这个窗口上，新建一个 image_wifi 的图片显示
	image_wifi = Image_Create(280, 	0, 30, 30, wd_bar);
    //设置 图片 显示的具体数据内容，具体是什么图片。
	Image_SetPicture(image_lock, (unsigned char *)&gImage_lock[0]);
	Image_SetPicture(image_wifi, (unsigned char *)&gImage_wifi[0]);

void wdbar_show(PT_WindowOpr wd) 函数内容如下：

void wdbar_show(PT_WindowOpr wd)
{
	SetColor(0, RGB24TORGB16(76,71,77));													//设置颜色  SYS_DARKGRAY  Green
	S_ShowMatFull(wd->x_base, wd->y_base, wd->x_base + wd->x_size, wd->y_base + wd->y_size, wd);		//标题栏																											//边框
	ResetColor(0);
}

int EventWindow_bar(PT_InputEventOpr env, struct FrameOpr *fr, void *wd)
{
	env = env;
	fr = fr;
	wd = wd;

	//判断下是不是网络事件
	if(env->type == NETWORK_EVENT)
	{
		//判断下网络事件 是 1 ，也就是网络连接上了。如果是那么显示 wifi 图标
		if(env->x == 1)
		{
			//设置图标显示
			setFrameStatus(image_wifi, UI_SHOW);
			Wd_UpShow();
		}else{
			//设置图标隐藏
			setFrameStatus(image_wifi, UI_HIDE);
			Wd_UpShow();
		}
		return EVENT_HANDLE;
	}

	return EVENT_NO_HANDLE;
}