【LVGL】学习笔记--(2)GUI Guider的使用
基于上一篇【LVGL】学习笔记--(1)Keil中嵌入式系统移植LVGL,已经成功地移植了LVGL到我们的嵌入式板子上,并配合磁控旋钮编码器(或者诸如触摸屏、按键、键盘等其他输入设备均可),实现了简单界面的显示工作。
这一章将学习用GUI Guider设计界面以实现旋钮控制界面上控件的操作以及进行界面切换,在这个过程中体会GUI Guider的作用。
一 GUI Guider简介
GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具,可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性,如小部件、动画和样式来创建GUI,而只需少量代码或根本无需任何代码。
特点如下:
支持拖放的所见即所得UI设计;
利用并搜索LVGL的各种小部件,轻松创建GUI应用
自定义并配置小部件属性,可自定义您的设计
轻松添加事件、动作和动画来增强您的应用
导入图像和自定义字体的内置资源管理
为MCUXpresso IDE和IAR Embedded Workbench项目生成应用代码
恩智浦评估工具包可用的模板
集成的演示应用,可帮助您开始设计
在支持的平台上利用PXP和VGLite加速的选项
下载路径:NXP官方下载
二 新建工程
下载安装不赘述,装好之后可以右上角修改为中文。新建工程步骤如下:
左上角文件-->新建,选择对应的LVGL版本,点击下一步:
![](/assets/blank.gif)
选择设备模板为PC端仿真器:
![](/assets/blank.gif)
选择一个应用模板,我这边选择了第一个“按键计数器”:
![](/assets/blank.gif)
填写工程信息:
![](/assets/blank.gif)
创建成功:
![](/assets/blank.gif)
界面的基本操作以及控件的创建等这边不介绍了,全中文而且选项也不多,自己点一点看一下就知道了。
三 界面设计
由于想测试一下界面的切换,所以这边一下创建了三个页面,在其中添加了不同的控件,如下所示:
界面一screen:
其作用是按加、减按钮,文本做对应的数据变化。NEXT按钮添加事件,切换到界面二:
![](/assets/blank.gif)
界面二screen1:
其作用是拖动滑块,文本框做对应的数据变化。BACK/NEXT按钮添加事件,分别切换到界面一/界面三:
![](/assets/blank.gif)
界面三screen2:
其作用是BACK按钮添加事件,分别切换到界面二:
![](/assets/blank.gif)
完成上述设计之后,点击运行调用模拟器并生成界面文件:
![](/assets/blank.gif)
![](/assets/blank.gif)
四 代码移植
【1】目录结构
GUI Guider经过编译运行之后,生成的代码如下:
custom.c为用户自定义API,这个文件的内容事先由用户写进去,不随着工程的编译修改而变化;
event_init.c为事件触发API;
gui_guider.c为界面引导API;
setup_scr_screen.c/setup_scr_screen_1.c/setup_scr_screen_2.c为界面的初始化API;
界面上用到的字体、图片等资源均在generated文件夹中;
![](/assets/blank.gif)
【2】移植到Keil
将custom、generated这两个文件夹整体复制到自己的工程目录下:
![](/assets/blank.gif)
Keil中创建GUI/LVGL/GEN组,将上面的源文件全部包含进来,包括用到的字体文件、图片文件:
![](/assets/blank.gif)
【3】适配修改
我这边用到了外部输入设备磁控旋钮编码器,所以这边需要做两处修改:
需要将各个界面中要操作的控件,挂载在一个Group下。我这边有三个界面,所以一共创建了三个Group(groupRect/groupRect1/groupRect2);
由于每个界面对应一个组,所以界面切换过程中,输入设备需要重新绑定Group。以上的控件挂载以及输入设备绑组的操作可以放在初始化函数中;
适配界面切换的代码修改如下:
/* 界面一的初始化在setup_scr_screen.c中 */
extern lv_indev_t * indev_encoder;
lv_group_t *groupRect;void setup_scr_screen(lv_ui *ui){//...//绑定组1和设备groupRect = lv_group_create(); //创建组1//挂载组1的控件,包括加减按钮以及指向下一个界面的按钮lv_group_add_obj(groupRect,guider_ui.screen_plus);lv_group_add_obj(groupRect,guider_ui.screen_minus);lv_group_add_obj(groupRect,guider_ui.screen_next);//绑定外部设备lv_indev_set_group(indev_encoder,groupRect);//Init events for screenevents_init_screen(ui);
}/* 界面二的初始化在setup_scr_screen_1.c中 */
extern lv_indev_t * indev_encoder;
lv_group_t *groupRect1;void setup_scr_screen_1(lv_ui *ui){//...//绑定组2和设备groupRect1 = lv_group_create(); //创建组2//挂载组2的控件,包括指向前一个/下一个界面的按钮和滑块lv_group_add_obj(groupRect1,guider_ui.screen_1_back);lv_group_add_obj(groupRect1,guider_ui.screen_1_slider_1);lv_group_add_obj(groupRect1,guider_ui.screen_1_next_1);//绑定外部设备lv_indev_set_group(indev_encoder,groupRect1);//Init events for screenevents_init_screen_1(ui);
}/* 界面三的初始化在setup_scr_screen_2.c中 */
extern lv_indev_t * indev_encoder;
lv_group_t *groupRect2;void setup_scr_screen_2(lv_ui *ui){//...//绑定组3和设备groupRect2 = lv_group_create(); //创建组3//挂载组3的控件,包括指向前一个界面的按钮以及列表List控件的各个条目itemslv_group_add_obj(groupRect2,guider_ui.screen_2_btn_1);lv_group_add_obj(groupRect2,guider_ui.screen_2_list_1_item0);lv_group_add_obj(groupRect2,guider_ui.screen_2_list_1_item1);lv_group_add_obj(groupRect2,guider_ui.screen_2_list_1_item3);lv_group_add_obj(groupRect2,guider_ui.screen_2_list_1_item4);lv_group_add_obj(groupRect2,guider_ui.screen_2_list_1_item5);lv_group_add_obj(groupRect2,guider_ui.screen_2_list_1_item6);//绑定外部设备lv_indev_set_group(indev_encoder,groupRect2);//Init events for screenevents_init_screen_2(ui);
}
【4】调用引导
在主任务中包含头文件并调用引导函数:
#include "gui_guider.h"
#include "events_init.h"
#include "custom.h" //用到用户自定义的API才需要调用
lv_ui guider_ui;void GUI_Task(void)
{//LVGL初始化lv_init();//显示器初始化lv_port_disp_init();//外部输入初始化lv_port_indev_init();//设计小部件的ui布局setup_ui(&guider_ui);//设置小部件的事件events_init(&guider_ui);//运行自定义的程序(用到用户自定义的API才需要调用)//custom_init(&guider_ui);while(1){knob_now = knobPosNow(); //确定旋钮当前位置knob_state_now = Knob_State_Entry(&knob_old, &knob_now, knob_state_old); //确定旋钮当前状态if(KNOB_ESCAPE == knob_state_now){knob_state_old = knob_state_now;}else{knob_old = knob_now;knob_state_old = knob_state_now;}lv_task_handler();os_dly_wait(5);}
}
【5】测试效果
测试效果如下:
![](/assets/blank.gif)
五 用户自定义API
用户自定义的API在custom.c中。
【1】自定义API
新加了一个界面,其初始化和事件声明均在custom_init中(因为只是简单地示例怎么用custom.c,这边就不绑定外部设备了):
/*** @file custom.c**//********************** INCLUDES*********************/
#include <stdio.h>
#include "lvgl.h"
#include "custom.h"/********************** DEFINES*********************//*********************** TYPEDEFS**********************//*********************** STATIC PROTOTYPES**********************//*********************** STATIC VARIABLES
**********************/
static void event_cb(lv_event_t * e)//事件声明
{LV_LOG_USER("Clicked");static uint32_t cnt = 1;lv_obj_t * btn = lv_event_get_target(e);lv_obj_t * label = lv_obj_get_child(btn, 0);lv_label_set_text_fmt(label, "%"LV_PRIu32, cnt);cnt++;
}/*** Create a demo application*/
void lv_example_event_1(void) //创建一个带标签的按钮
{lv_obj_t * btn = lv_btn_create(lv_scr_act());lv_obj_set_size(btn, 100, 50);lv_obj_center(btn);lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);//把刚才的回调函数添加到按钮上lv_obj_t * label = lv_label_create(btn);lv_label_set_text(label, "Click me!");lv_obj_center(label);
}void custom_init(lv_ui *ui)
{/* Add your codes here */lv_example_event_1();
}
【2】调用引导
在主任务中调用custom_init(&guider_ui)即可。
【3】测试效果
GUI Guider模拟器中运行效果:
![](/assets/blank.gif)
实际运行效果:
![](/assets/blank.gif)
注1:因为没有绑定外部设备,且没有注册到界面一里面去,所以不能实际操作,同时界面一切换就没了。更多的用法有待继续发掘;
注2:实际屏幕出来的颜色,有些与模拟器存在差别,原因在于实际的RGB颜色到我显示屏上输出会反过来,变成BGR,例如需要#44CEF6的蓝色,实际出来#F6CE44的黄色:
![](/assets/blank.gif)
![](/assets/blank.gif)
解决办法是,对 lv_color.h 中定义的取色函数 lv_color_make 进行修改即可:
//原先
static inline lv_color_t lv_color_make(uint8_t r, uint8_t g, uint8_t b)
{return _LV_COLOR_MAKE_TYPE_HELPER LV_COLOR_MAKE(r, g, b);
}//修改
static inline lv_color_t lv_color_make(uint8_t r, uint8_t g, uint8_t b)
{return _LV_COLOR_MAKE_TYPE_HELPER LV_COLOR_MAKE(b, g, r);
}
六 附录
本文涉及的GUI Guider例程文件已经整理打包好:
GUI Guider使用例程(应用LVGL的三个界面切换)
【LVGL】学习笔记--(2)GUI Guider的使用相关推荐
- 【嵌入式UI框架:LVGL】使用NXP GUI Guider 拖拽式设计LVGL
LVGL是一个免费的开源嵌入式图形库,它提供创建嵌入式GUI所需的功能,具有易于使用的图形元素.精美的视觉效果和低内存占用.完整的图形框架包括供您在创建GUI时所用的各种小部件,并支持更高级的功能,例 ...
- Matlab学习笔记(3)—GUI程序设计与图像处理基本操作
Matlab学习笔记(3)-GUI程序设计与图像处理基本操作 一.GUI程序设计 如果想要开始使用Matlab进行GUI编程,首先需要进入Matlab的GUI界面对GUI有一个基本的认识. 1.gui ...
- JVM学习笔记之GUI监控工具
目录 背景 jConsole 本地连接:连接本地计算机一个正在运行的JVM进程 远程连接:连接JMX代理 高级连接:使用特殊的URL连接JMX代理 VisualVM 插件安装 连接方式 本地连接:连接 ...
- LVGL学习笔记1 - 准备
目录 1. 下载LVGL源代码 2. 平台 3. 导入到工程 3.1 配置头文件 3.2 src文件夹 4. 移植 4.1 显示接口部分 4.1.1 disp_init 4.1.2 lv_port_d ...
- 【LVGL学习笔记】(三)控件使用
LVGL全程LittleVGL,是一个轻量化的,开源的,用于嵌入式GUI设计的图形库.并且配合LVGL模拟器,可以在电脑对界面进行编辑显示,测试通过后再移植进嵌入式设备中,实现高效的项目开发. LVG ...
- 【LVGL学习笔记】(五)使用SquareLine Studio设计UI
LVGL全程LittleVGL,是一个轻量化的,开源的,用于嵌入式GUI设计的图形库.并且配合LVGL模拟器,可以在电脑对界面进行编辑显示,测试通过后再移植进嵌入式设备中,实现高效的项目开发. LVG ...
- LVGL学习笔记(二):从0到1移植LVGL8.1到STM32平台上(完结篇)
目录 一:TFT-LCD屏触摸 二:STM32CubeMX配置 三:FT5206触摸芯片驱动代码移植 四:LVGL 移植 4.1 源码下载 4.2 代码移植 4.3 添加源码至工程 4.4 指定头文件 ...
- 【LVGL学习笔记】(二) 基础概念
LVGL全程LittleVGL,是一个轻量化的,开源的,用于嵌入式GUI设计的图形库.并且配合LVGL模拟器,可以在电脑对界面进行编辑显示,测试通过后再移植进嵌入式设备中,实现高效的项目开发. LVG ...
- LittleVGL(LVGL)学习笔记——PC 模拟器的安装和使用(CodeBlocks)
目录 一.简介 1.LittleVGL 所支持的 IDE 软件种类: 2.需要的工具: 二.安装配置软件和环境 1.littleVGL 模拟器库 2.安装CodeBlocks 三.创建工程项目 四.配 ...
最新文章
- javascript 位运算符
- MTK 驱动开发(36)---低功耗基础知识
- VIPKID:笔试题(数组中和为0的一对数的数量,十进制转二进制中1的个数)
- appium部分操作
- java套接字通信_Java网络通信套接字 | 学步园
- 六年级上册计算机教材分析,人教版六年级上册数学教材分析
- 中兴配置dhcp服务器,中兴F623路由器如何投入使用dhcp服务器
- string类的常用方法
- (8.1)基于牛顿-欧拉公式的动力学方程
- ImportError: attempted relative import with no known parent package
- 快搜网络爬虫用户代理 User-Agent
- 哪个录音软件最好用?推荐几款录音软件给你
- python进行数据查询_使用Python实现NBA球员数据查询小程序功能
- MySQL系列之Natural Join用法
- 安装vm12+CentOS7+Docker以及常见问题解决
- Python 的列表推导式
- 乐视屏霸android版本,乐视屏霸安装第三方应用看电视直播、点播教程
- 恒烁 CX32L003F8P6T 替代 宏晶MS8006
- oracle查询使用索引和不使用索引的比较
- 区间素数 由N(N<=10000)个整数组成的数组,其中连续K(K<=200)个元素构成一个区间,称为K区间。一个K区间中所有素数的和记为Sk,请计算整个数组中,所有K区间中的最大Sk值,并输出。
热门文章
- 萌新带你开车上p站(Ⅳ)
- velodyne 配置命令
- parser解析中的-与_
- 业余时间,决定一个人的成就
- 英语中不“吃醋”,所以a touch of vinegar啥意思?
- LSTM预测黄金价格
- ultraiso制作u盘系统linux,UltraISO软碟通制作Fedora 17 U盘启动
- Win10系统将回收站固定到任务栏而不是固定到文件资源管理器的方法
- Ubuntu 如何使用命令卸载安装过的软件(超级简单)
- 《惢客创业日记》2019.10.27(周日)5G仅仅是速度快吗?(七)