手把手制作简单的GUI-Button控件

正点原子运营

以下文章来源于：公众号开源电子网读取更多技术文章，请扫码关注

1、GUI概述

图形用户界面是一种人与计算机通信的界面显示格式，允许用户使用鼠标等输入设备操纵屏幕上的图标或菜单选项，以选择命令、调用文件、启动程序或执行其它一些日常任务。与通过键盘输入文本或字符命令来完成例行任务的字符界面相比，图形用户界面有许多优点。图形用户界面由窗口、下拉菜单、对话框及其相应的控制机制构成，在各种新式应用程序中都是标准化的，即相同的操作总是以同样的方式来完成，在图形用户界面，用户看到和操作的都是图形对象，应用的是计算机图形学的技术。

2、人机交互原理解析

       显然，我们的界面是显示在LCD显示屏中，简单来说：我们制作的交互控件(按键、下拉、日历等等控件)都是在LCD显示屏展示的，当我们按下Button的控件时，我们可以驱动底层硬件或者触发事件等等，例如按下Button控件触发LED亮灭或者切换界面等等功能，这类就是人机交互，如以下示意图所示：

       Button控件的程序编写必须包含两个结构体，第一个是描述Button控件的属性以及管理Button，简称:Button控制块；第二个是描述控件的位置和大小，该控件不仅仅描述button控件还可以描述其他控件的位置和大小。

       最后就是Button控件的展示是由我们的LCD驱动的填充函数完成的，因为我们Button的控件是由LCD显示的，以及触摸问题是由Thouch驱动触发，然后MCU是否触发Button控件事件必定与Thouch来决定，如果我们触摸不到，我们怎么控制底层硬件。

3.1 交互驱动编写

2. 在工程下创建两个文件，如以下图所示：

       cai_click_get_point()函数主要获取触摸点的坐标。

       cai_config.h文件：定义函数以及颜色切换。

       CAIGeometry结构体描述控件大小和位置信息。

       CAI_Button结构体描述Button控件属性和管理Button控件。

2. 创建cai_button.c文件：主要绘画Button控件和判断触摸是否在Button控件范围。

       (1) 创建Button控件

       最终还是调用了cai_fill_single_Color()LCD驱动的填充颜色函数。

       (3) CAI_Handler()函数为遍历Button是否按下

       (3) cai_button_action_func()函数为触发事件函数

注意：这个Button控件还需要不断完善功能才行，因为这个比较简单的显示区域并在区域内触发回调函数，离真正的GUI还有很长的路要走，必须使用链表的形式才可以，以及参考RTOS原理来实现，控件与控件的处理是非常复制的，如果想学习GUI的底层相关的知识，小编建议大家可以学习LVGL的相关底层或者学习开源的GUI。

maidilong

学习了

maidilong

上传一下完整的工程文件比较好~谢谢！