基于Gui Guider进行LVGL的页面绘制和移植

在之前的文章里讲过一种页面切换的方式,那就是:定义和创建页面对象+绘制页面内容+切换页面。参考这篇文章:

LVGL如何创建页面并实现页面的切换-CSDN博客

这篇文章讲了如何绘制并切换页面。

但是现在遇到一个问题,那就是页面绘制,很简单的页面倒还好,但是页面稍微复杂些就麻烦了,要手撸代码,效率太低,并不是难度高,而是要计算各种颜色尺寸位置,获取图片数组等等,重复操作很耗时间,没有必要。

所以,初版界面,我们可以直接使用Gui Guider或者官方的SquareLine Studio来生成界面代码,然后移植过来使用即可,前提是要能看懂其生成的代码。

基于这个需求,我们就来学习下Gui Guider的使用和移植。

主要参考这几篇文章:

ESP32系列之LVGL(三):Gui-Guider的使用_gui guider-CSDN博客

【LVGL】GUI神器 NXP GUI GUIDER开发工具入门教程-CSDN博客

使用GUI Guider开发LVGL_lvgl图形界面开发教程-CSDN博客

开始正文。

GUI Guider简介

GUI Guider是恩智浦为LVGL开发了一个上位机GUI设计工具,可以通过拖放控件的图形化设计方式开发LVGL GUI页面,加速GUI的设计。

相比LVGL官方推出的付费工具 SquareLine Studio ,GUI Guider完全免费,它们甚至开发页面的布局都类似,但两者功能上,GUI Guider也相应的没有SquareLine Studio 细致和丰富,希望NXP能持续的优化更新

GUI Guider工具完成的GUI设计可在PC端仿真运行,实现无硬件开发,通过仿真调试完成后,可快速方便的整合到MCU的工程中。使用GUI Guider不需要任何编程知识,就可以创建交互式UI。开发者可以自定义动画,事件和样式可以添加到许多内置的小组件,如仪表盘、下拉列表等。图形设计师能够直接使用GUI Guider创建UI,并将已经工作的UI交付给软件开发人员,而软件开发人员只需专注于底层业务逻辑开发。通过这种方式,GUI Guider可以支持个人或者团队高效地协同工作。

目前来看,Gui-Guider的好处是支持中文,安装、启动过程没啥幺蛾子;坏处是只支持两个lvgl版本,即使是小版本不一致,代码使用过程中也可能需要做一些修改。

下载和安装

恩智浦官网:

GUI Guider | NXP 半导体

可以从官网下载Gui-Guider安装包。

不同版本的GUI Guider可以创建的LVGL版本不一样,按照自己移植的LVGL来选择安装GUI Guider软件即可。我移植的是LGVL8.2版本,所以对应的是GUI Guider-1.4.0版本。

不过,官网貌似只有1.5以上的版本,不知道为啥。一开始我还以为是没有注册登录,不给看完整的版本,后面注册登录后还是一样,最低只有1.5版本。

这里我是已经跟着正点原子移植好了LVGL8.2的版本,后来才知道的Gui Guider,所以只能迁就Gui Guider的版本。其实,后续如果还要开发相关项目,可以先选好Gui Guier的版本,然后直接用这个软件生成工程,并在此基础上移植。比如跟这个文章里的一样,使用Gui GuiderV1.6.0。

ESP32系列之LVGL(三):Gui-Guider的使用_gui guider-CSDN博客

在网上找了个GUI Guider-1.4.0版本下载来用。

双击开始安装

选择语言

然后直接往下点击即可,没什么需要注意的地方。

Gui Guier软件本身安装完成后,还没结束,此时虽然软件能打开,能绘制页面,但是没法仿真,没法生成代码,因为可能缺少JAVA的运行环境。

如果已经安装过java运行环境,那这一步骤就不用管了。

如果没有java环境,会有提示,仿真也是一片空白,啥都没有,并且,生成的代码中也没有对应的页面文件

参考这篇文章

LVGL之GUI GUIder使用教程_lvgl界面编辑器-CSDN博客

要在Win10下安装使用的话,还需要安装Java环境:Java Runtime Environment,JRE-8 is verified。如果PC里已经有JRE,那很简单,只要安装好GUI Guider即可使用;否则,需要去获取安装JRE。这个安装并不难,只是要注意JRE安装后需要设置环境路径,这点在GUI Guider用户手册中有详细说明。

用户手册在GUI Guider安装后的此路径下:GUI-Guider\resources。且所有环境下的安装步骤在手册中都有详尽介绍。

步骤如下所示:

JDK下载地址

Archived OpenJDK GA Releases

先下载个jdk-14试试看

按照上述文档中的步骤一直到最后

安装完成后打开软件,界面如下:

虽然安装时选择的是简体中文,但是界面中的默认语言仍然是英文。

可点击右上角的语言来切换。

至此,安装结束。

新建工程

打开软件

选择lvgl8.2.0版本,然后下一步

选择设备模版,这里我们使用仿真器,选中后下一步

接着选择应用模版,可以选择自带的应用模板,也可以选择空模板,这里选择空模板。

接下来配置项目信息:

1)设置工程名称:必须以字母开头,且只能包含字母、数字和下划线,长度在3到36个字母之间;

2)设置工程保存的目录,生成的代码将保存在该目录下;

3)设置屏幕色彩深度,根据实际的硬件屏幕来选择即可;

4)设置面板大小,选根据实际的硬件屏幕来选择即可;

5) 设置缩放类型,默认即可。

点击创建开始创建新工程。

创建工程后的界面如下:

面板介绍

1、菜单栏,点开看看就知道了,不赘述。

2、组件和资源栏,组件栏列出了常用的组件,资源栏中可以导入图片资源

组件,需要拖动到页面中,点击没有用

资源

3、页面(屏幕)设置,点击右上角的加号可以增加新页面(屏幕)。

当前选中的页面会内发光以示区分

双击某个页面,可以看到当前页面下所使用的组件

鼠标右键可以复制或者删除页面

4、页面编辑栏

右侧两个红色箭头指向的分别为:生成代码、查看仿真(可以选择C或者python对工程进行编译并进入模拟器进行模拟。)

注意,一次只能仿真一个页面,而且只能仿真位于页面最上面的一个页面,不太好用。

5、属性设置页面

以按钮为例

从上到下分别是:基本信息、是否有滚动条、动画、属性、模块和状态选择、背景、字体、边框圆角等等,根据需要进行设置,和PS差不多。

绘制页面

大概熟悉了软件之后,就要开始绘制页面了

这一步,将所有页面都绘制出来,需要花费一些时间。

具体绘制过程不赘述。

以下有些地方需要注意:

背景默认是透明的,所以只改颜色不会显示,需要将不透明度给去掉

 

Gui Guider里面的各页面以及组件命名要注意,别随便取,这些名称会在导出的程序里被使用。

颜色设置时,没法在外面直接填写,需要点进去,如果是用HEX,则需要切换成HEX的输入模式

而且,HEX没法粘贴,只能手写,这点不太方便,更高版本的已经修复了这个问题。

标签部件没法直接给文本换行

只能通过空格和大小限制来强制使其换行了

高版本的软件已经修复了这个问题

页面绘制完成后,点击生成代码

生成代码既会生成c代码,也会生成python代码,我们选择需要的即可。

也可以点击绿色三角形按钮来仿真查看效果

注意,仿真也会生成代码程序。

生成代码挺快,仿真就比较慢了。

移植到STM32

移植到STM32,要分别建立好STM32工程、移植好LVGL、加入页面;

建立STM32工程不赘述;

移植LVGL注意下,LVGL版本需要和这里Gui Guier使用版本一致,比如这里的LVGL8.2.0,网上看好多移植的文章,都省略了这一步,因为移植lvgl是另外的话题,我之前已经单独说过,所以此处我也不赘述了;

要注意的是,我之前是参考正点原子移植的lvgl8.2,如果是其他版本,也按照正点的步骤来即可,其实万变不离其宗,只不过LVGL换了版本而已。

这里主要讲解如何将页面代码加入我们的工程里。

初版思路

我们绘制好页面,点击生成代码,然后就会在之前选择好的工程路径下出现页面相关的程序,如下所示:

这里面大部分都是gui guider工程的文件,可以看到,也附带了对应版本lvgl的源码。

其中,对于移植页面最重要的就是generated这个目录

打开看看

我们前面说了,使用gui guider是为了解决绘制页面太麻烦的问题,所以,我们重点需要关注各个页面的文件;

至于gui_guider.c里面对页面的切换管理我们不用管,而是由我们自己完成;

图片的c数组我们可以使用也可以自己生成,不过这里既然都有了,就不进行重复劳动了,虽然自动生成的文件命名比较奇怪,但是也可以因此避免跟其他变量重名,实际中怎么方便怎么来吧。

字体可以先用默认的,后面再处理。

说到底,我们要得到的是啥?

其实就是各个页面的绘制代码。

甚至可以说,文件都不用要,而是要里面的一个一个的绘制函数,比如:

这里面传入的页面对象在gui_guider.h里定义的

其实,这里也不用管它的,而是由我们自己完成页面对象的管理。

所以,别看这么多文件,其实我们需要的仅仅只有各图片的c数组,以及各页面的绘制函数。

接着,就按照上面的这种思路进行页面移植。

改进思路

经过实践,发现上面那种思路太麻烦了,本来生成的程序已经做了管理,可是不用,非要自己把页面程序拿过去,然后各种改名字,工作量太大了。

因此,打算换个思路,直接就用Gui Guider生成的内容,拿来即用,前提是绘制页面时的命名要合理。

那么,如何拿来即用呢?

这就要求能理解Gui Guider生成的代码的管理思路了。

注意,如果有现成的框架,就使用现成的,别闲着没事自己创建了。效率最重要,不要重复造轮子。

打开我们刚才的GUI工程目录,下面有一个 generated 文件夹,该文件夹就是我们所需要的,将generated整个文件夹复制到我们的STM32工程中,比如可以放在移植LVGL时建立的GUIAPP目录下。

为了方便后续的界面修改再移植,我们不要试图去修改这里面的任何内容,而是采取直接调用的方式,否则后续改一次界面就要修改一次文件。

我们从gui_guider.h这个文件开始分析

这个头文件里对gui guider相关的内容都做了声明。

首先,里面定义了一个结构体lv_ui,结构体里面按照页面划分定义了各个页面对象以及其中各个组件的对象,并且,每个页面都有个是否已被删除的状态标志位。

然后,声明了gui_guider.c里面的函数;

接着,声明了一个lv_ui结构体对象guider_ui,要注意的是,gui guider并没有帮我们定义这个变量,需要我们使用时定义。

继续,对所有的页面绘制函数进行了声明;

最后,对图片资源进行了声明;

也就是说,这个头文件是必不可少的,里面有相关内容的所有声明。

我们再看看gui_guider.c这个文件

这个文件里只有两个函数,其中setup_ui是对初始屏幕的定义和加载。

第一行是对各页面进行是否已删除标记,就是标记该页面是否已经被删除,如果有页面的跳转事件,在事件里会用到。我们也可以自定义使用,对页面是否已删除进行标记,也可以不管它。

举例说明:

紧接着就是默认显示第一个页面然后再加载。

这些函数传递进入的都是一个结构体变量指针,lv_ui就是gui_guider.h里面定义的那个结构体,里面包含了所有的对象,我们需要在使用时进行初始化自定义。

这个函数只会在初始化时被调用一次,用来显示上电后的的默认页面,可用可不用。

由上述分析过程,我们能知道,我们将generated 文件夹整个复制过去是为了方便后续的页面修改,我们使用时,其实主要就是里面的几个文件,包括图片资源文件、字体资源文件、gui_guider.c/gui_guider.h、然后就是各页面的文件,事件文件可加可不加,按需加入。

其中,字体可以先使用默认的,后续再统一处理成自定义字体。

接下来,按照这种思路来移植。

将generated文件夹加入工程

加入关键c文件

加入图片资源c文件

接着加入头文件路径

注意,图片没有对应的头文件,图片资源的声明在gui_guider.h里面。

字体文件按需加入,这里先不管,暂时使用默认的字体。

到了这里,其实能看出来,gui guider并没有提供页面管理的功能,因此,我们可以结合之前学习的页面管理的内容来使用。

加入后,编译一次看下,应该还有一些头文件的报错,按照报错提示进行修改即可,头文件该注释的注释掉,该导入的导入,该加路径的加路径,该改路径的改路径。

比如,guider_fonts.h头文件里有个字体头文件得更改下路径,将原来的 #include "lv_font.h"改成:#include "../../../GUI/lvgl/src/font/lv_font.h",具体根据自己的存放路径来调整。

修改编译没问题之后,就开始进行页面管理了。

如上图所示,在更上层的应用文件中:

先导入头文件gui_guider.h;

然后定义lv_ui结构体变量,其实就是定义各屏幕和组件对象;

接着就是调用setup_ui做个初始画面的显示;

然后就是切换页面了,切换页面时先删除当前页面内存空间,之后再加载目标页面。

后续按照这种思路来开发即可。

每次修改画面,把所有内容都复制过来即可,最好一次性把所有画面都绘制结束,然后统一移植进来。

至此,使用GuiGuider生成页面代码并移植到STM32就已经完成了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/741141.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日leetcode--接雨水

引言 接雨水问题是一个经典的算法问题,它要求我们计算给定一组不同高度的墙壁时,这些墙壁之间能够蓄积多少雨水。解决这个问题的方法有很多,其中一种常见的解法是通过辅助数组来记录每个位置的左右最大高度,并计算每个位置上方能…

代码学习记录17

随想录日记part17 t i m e : time: time: 2024.03.12 主要内容:今天的主要内容是二叉树的第六部分,主要涉及二叉搜索树的最小绝对差 ;二叉搜索树中的众数;二叉树的最近公共祖先。 530.二叉搜索树…

openGauss使用BenchmarkSQL进行性能测试(上)

一、前言 本文提供openGauss使用BenchmarkSQL进行性能测试的方法和测试数据报告。 BenchmarkSQL,一个JDBC基准测试工具,内嵌了TPC-C测试脚本,支持很多数据库,如PostgreSQL、Oracle和Mysql等。 TPC-C是专门针对联机交易处理系统…

【QT】文件流操作(QTextStream/QDataStream)

文本流/数据流&#xff08;二级制格式&#xff09; 文本流 &#xff08;依赖平台&#xff0c;不同平台可能乱码&#xff09;涉及文件编码 #include <QTextStream>操作的都是基础数据类型&#xff1a;int float string //Image Qpoint QRect就不可以操作 需要下面的 …

【Python】新手入门学习:详细介绍接口分隔原则(ISP)及其作用、代码示例

【Python】新手入门学习&#xff1a;详细介绍接口分隔原则&#xff08;ISP&#xff09;及其作用、代码示例 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、Py…

基于Qt 和python 的自动升级功能

需求&#xff1a; 公司内部的一个客户端工具&#xff0c;想加上一个自动升级功能。 服务端&#xff1a; 1&#xff0c;服务端使用python3.7 &#xff0c;搭配 fastapi 和uvicorn 写一个简单的服务&#xff0c;开出一个get接口&#xff0c;用于客户端读取安装包的版本&#…

<机器学习初识>——《机器学习》

目录 一、人工智能概述 1 人工智能应用场景 2 人工智能发展必备三要素 3 人工智能、机器学习和深度学习 二、人工智能发展历程 1 人工智能的起源 1.1 图灵测试 1.2 达特茅斯会议 2 发展历程 三、 人工智能主要分支 1 主要分支介绍 1.1 分支一&#xff1a;计算机视觉…

linux 启动命令

添加权限 drwxr-xr-x -rwxr-xr-x <strong>第一位&#xff1a;-代表文件&#xff0c;d代表目录<br> 用户、组用户、其他用户都是rwx形式&#xff0c;其中r表示读、w表示写、x表示可执行&#xff0c;-表示没有权限&#xff0c;拿用户组举例&#xff0c;r只能出…

c++中string的模拟实现(超详细!!!)

1.string的成员变量、&#xff08;拷贝&#xff09;构造、析构函数 1.1.成员变量 private:char* _str;size_t _size; //string中有效字符个数size_t _capacity; //string中能存储有效字符个数的大小 1.2&#xff08;拷贝&#xff09;构造函数 //构造函数string(const char* …

【Linux进阶之路】HTTP协议

文章目录 一、基本概念1.HTTP2.域名3.默认端口号4.URL 二、请求与响应1.抓包工具2.基本框架3.简易实现3.1 HttpServer3.2 HttpRequest3.2.1 version13.2.2 version23.2.3 version3 总结尾序 一、基本概念 常见的应用层协议&#xff1a; HTTPS (HyperText Transfer Protocol Sec…

C# 8.0+版本项目 string不可为空

1.在某一次新建项目的时候发现&#xff0c;新建的项目&#xff0c;写的测试接口&#xff0c;接口的入参有string的参数&#xff0c; 但是调用接口的时候string的参数没有传报了400&#xff0c;很奇怪&#xff0c;也没有语法错误之类的。 2.解决办法 在项目上右键->属性->…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Span)

作为Text组件的子组件&#xff0c;用于显示行内文本的组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 该组件从API Version 10开始支持继承父组件Text的属性&#xff0c;即如果子组件未设置…

单片机开发-实现Zigbee的LED灯交替闪烁

前言 前提须知&#xff1a; 1.本文所讲的单片机开发的代码&#xff0c;使用软件是IAR Embedded Workbench&#xff1b; 2.本文所讲的内容与全国职业院校技能大赛“物联网应用开发”赛项Zigbee模块题目类似&#xff1b; 3.单片机Zigbee内容以收入到我的专栏“单片机Zigbee当…

C# 数据结构初始化长度

在C#中&#xff0c;各个数据结构的初始化长度是动态的&#xff0c;下面是一个例子&#xff0c;展示了如何初始化各个数据结构并演示它们的长度&#xff1a; using System; using System.Collections.Generic;class Program {static void Main(){// 初始化数组int[] intArray …

直播美颜SDK的商业化应用:如何为直播平台带来更多商业机会?

直播过程中的自然环境和摄像头本身的限制可能会影响用户的体验&#xff0c;因此直播美颜SDK的商业化应用应运而生&#xff0c;它为直播平台带来了更多商业机会。 直播美颜SDK是一种集成在直播平台中的软件开发工具包&#xff0c;它能够对直播过程中的视频流进行实时的美颜处理…

双指针算法———C++

首先说明双指针&#xff0c;何为双指针顾名思义就是序列中有两个指针来分别配合调控遍历这序列。 与其生硬讲解&#xff0c;不如举个例子。 例题&#xff1a;给定一段序列&#xff0c;里面有一些单词&#xff0c;并且每个单词都是以空格隔开。 题目要求是将每个单词为一行重…

WPF制作带图标和文字的按钮模板(通过附件属性实现)

1.界面模板代码部分 <Window.Resources><Style x:Key"IconButton" TargetType"Button"><Setter Property"Template"><Setter.Value><ControlTemplate TargetType"Button"><Border x:Name"borde…

算法D45 | 动态规划7 | 70. 爬楼梯 (进阶) 322. 零钱兑换 279.完全平方数

70. 爬楼梯 &#xff08;进阶&#xff09; 这道题目 爬楼梯之前我们做过&#xff0c;这次再用完全背包的思路来分析一遍 代码随想录 Python: 翻译成背包问题&#xff0c;即&#xff1a;在容量为n的背包里&#xff0c;装入重量为1/2的物品&#xff0c;可以重复利用物品&#x…

快速安装mysql 5.7 服务步骤(包含clinet)及常见问题

1、centos上如何安装MySQL&#xff1a; 1.1.下载并安装mysql yum Repo&#xff1a; # 下载 wget https://dev.mysql.com/get/mysql57-community-release-el7-9.noarch.rpm # 安装 rpm -ivh mysql57-community-release-el7-9.noarch.rpm 1.2.进入yum.repos.d目录&#xff0c;安…

C语言每日一题(63)复写零

题目链接 力扣网 1089 复写零 题目描述 给你一个长度固定的整数数组 arr &#xff0c;请你将该数组中出现的每个零都复写一遍&#xff0c;并将其余的元素向右平移。 注意&#xff1a;请不要在超过该数组长度的位置写入元素。请对输入的数组 就地 进行上述修改&#xff0c;不…