搜索
bottom↓
回复: 1

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

[复制链接]

出0入234汤圆

发表于 2021-12-20 17:58:20 | 显示全部楼层 |阅读模式
本帖最后由 正点原子 于 2022-1-7 17:33 编辑

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




手把手制作简单的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。


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

出0入0汤圆

发表于 2021-12-21 11:51:51 | 显示全部楼层
在跑偏的路上越走越远
回帖提示: 反政府言论将被立即封锁ID 在按“提交”前,请自问一下:我这样表达会给举报吗,会给自己惹麻烦吗? 另外:尽量不要使用Mark、顶等没有意义的回复。不得大量使用大字体和彩色字。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

手机版|Archiver|amobbs.com 阿莫电子论坛 ( 公安交互式论坛备案:44190002001997 粤ICP备09047143号 )

GMT+8, 2022-7-2 17:15

© Since 2004 www.amobbs.com, 原www.ourdev.cn, 原www.ouravr.com

快速回复 返回顶部 返回列表