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

正点原子

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

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

1. GUI概述

       图形用户界面(GraphicalUser Interface，简称GUI，又称图形用户接口)是指采用图形方式显示的计算机操作用户界面。

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



2. 人机交互原理解析

       机交互界面通常是指用户可见的部分。用户通过人机交互界面与系统交流，并进行操作。如果我们使用STM32为主控芯片，以TFTLCD作为人机交互界面，那么我们可以得出以下示意图：

         

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

         

       从上图可知：人机交互界面一般分为几步：LCD(触摸)、MCU处理LCD触摸的事件、根据对应的事件驱动某个代码、根据代码操作硬件层、控制成功。



3. Button原理解析

       上面我们已经大概的了解人机交互的原理了，接下来我们怎么使用有限的资源制作我们的Button控件来控制我们的开发板的LED灯呢，首先我们可以看一下Button控件有哪些需要做的，如以下图所示：

         

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

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


3.1 交互驱动编写

       1. 请准备正点原子的例程源码，该工程具备LCD驱动、Thouch驱动以及MALLOC驱动(该内存管理是正点原子都有的)。

       2. 在工程下创建两个文件，如以下图所示：
       cai_config.c文件：主要描述填充函数(调用LCD填充函数、判断触摸函数)。

         

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

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

         

       RGB888转RGB565或者RGB888转RGB233等等。


3.2 Button控件编写

      1.创建cai_button.h文件：两个描述结构体(button控制块结构体、位置和大小结构体)：

         

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

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


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

       (1) 创建Button控件

         

       该函数具有七个参数：第一个和第二个参数为Button控件在LCD显示的坐标定义，第三和第四个参数为Button控件在LCD显示的大小，第五和第六个参数为按下和释放Button的颜色，第七个参数为按键的类型。

       (2) CAI_Show_Button()函数是根据Button控件的属性在LCD绘画按键：

         

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

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

         

       cai_click_get_point()该函数就是获取触摸坐标，check_is_area()该函数判断触摸坐标是否在Button控件的区域内：

         

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

      

     第一个参数为：控件结构体，第二个参数为：触发的函数(自行编写)。


3.3 Button实战演练

        

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

Halley

在跑偏的路上越走越远