首页 > 其他分享 >STM32第二十三课:GUI-Guider安装使用及项目移植(7.11版本)

STM32第二十三课:GUI-Guider安装使用及项目移植(7.11版本)

时间:2024-07-28 17:28:18浏览次数:20  
标签:7.11 Guider GUI 点击 字体 ui guider

目录


目标

1.安装GUI-guider。
2.学会使用GUI-guider设计界面。
3.学会将GUI-guider设计后的界面移植到项目工程中。


一、GUI-Guider获取与安装

  GUI-Guider(也称为GUI-Designer或GUI Builder)是一种用于嵌入式系统开发图形用户界面(GUI)设计工具。它的主要功能是帮助开发者快速创建和设计嵌入式设备上的用户界面,通常用于液晶显示屏(LCD)等显示设备的应用程序开发。

我的理解:GUI-Guider就是一个LVGL界面辅助设计工具,通过GUI-Guider我们可以快速创建多个屏幕,导入多个字体,图片,图标等。GUI-Guider能让我们不用计算坐标,直接拖拽界面上的元件。该功能大大提高了我们设计界面布局的效率。

1.GUI-Guider获取

通过恩智浦官网下载:恩智浦官网
官方使用说明:官方手册

2.安装

安装时需要先安装java环境,安装完java环境后再安装GUI-Guider。
安装好java环境后,直接双击GUI-Guider的安装,最好安装到c盘(主要GUI-Guider也没多大,1个G都不到),之后全点同意后,一路走完就安装好了。
在这里插入图片描述

二、使用步骤

在使用之前一定要在项目中移植好LVGL环境,要不然GUI-Guider界面设计的再好也用不了。

1.创建一个新项目

打开GUI-Guider点击创建新项目

在这里插入图片描述
选择适配自己LVGL的版本,自己之前移植的LVGL是什么版本就是选V几,要不然设计好了,移植到项目中也无法使用。
在这里插入图片描述
我这里用的是v7版本,因为在上一节中我移植到工程中的LVGL版本为7.11。
在这里插入图片描述
点击下一步,进行设备面板的选择。这里要按照使用的硬件屏幕规格来进行选择。
我这里用的是320x240的屏幕,所以就直接点击Simulator。

点击下一步,会弹出模版选择界面,GUI-Guider给出了多个实例。但说实话都不咋好用,我选择使用空模版,即EmptyUI。
在这里插入图片描述
选好模版了,点击下一步
在这里插入图片描述
接下来就到了项目配置信息了。
项目信息项目地址自己填,面板类型看硬件分辨率进行选择。
色彩深度按照屏幕硬件规格进行选择。
色彩深度(Color Depth),也称为位深度(Bit Depth),是指用于表示和存储图像中每个像素颜色的信息量。它影响了图像的颜色精度和色彩表现能力。
最后,点击完成就创建完成了。

2.快速使用

创建完成后的界面会发现是全英的。
想要修改语言就点击软件的右上角English,将其换成中文。
在这里插入图片描述

组件
在这里插入图片描述
组件里的东西直接拖拽即可。
在这里插入图片描述
组件添加到屏幕上后,会在blog中显示。

在这里插入图片描述
点击组件,可以在右边属性框中设置该组件的各个部分。

添加图片
点击导入就能添加了
在这里插入图片描述
字体生成及导入字体
字体生成官方网站:字体生成点击这里

在这里插入图片描述
name:生成字体文件的文件名
size:生成字体的大小
在这里插入图片描述
点击Browse,选择想要生成的是什么字体
Range和Symbols选填。
最后点击submit生成即可。
但是在GUI-Guider软件中我们不用一个一个取字体。
直接点击左上角的文件,点击导入字体,将想要导入的字体导入即可。在这里插入图片描述
界面设计好后点击右上角的绿色播放按钮可以进行界面模拟
在这里插入图片描述
模拟后,感觉和自己设想的效果差不多时就可以点击绿色播放按钮隔壁的按钮生成代码即可在这里插入图片描述

三、项目移植

找到建立项目时设置的地址文件夹,打开并复制generated文件夹
在这里插入图片描述
该文件就是生成的代码文件。

打开想要移植的目标文件,打开LVGL文件夹,找到我们之前创建的app文件夹。将generated文件夹复制进去即可。
在这里插入图片描述
复制完成后,打开工程,将generated文件全部添加到工程中,头文件也要一一添加。
在这里插入图片描述
打开gui-guider.c,将所有的"lvgl\lvgl.h"替换为"lvgl.h",然后Ctrl+F搜索custom.h,将所有的custom.h文件删掉。

在这里插入图片描述
将setup_ui中的前三条屏蔽掉,声明一下lv_ui guider_ui;
如果有多个屏幕,需要将多个屏幕加载一下,如红框里的。
在这里插入图片描述
添加一下头文件

extern lv_ui guider_ui;

外部声明一下lv_ui guider_ui,之后想要修改或者调用GUI-Guider中设计部件,都需要使用guider_ui.部件。

使用时不要忘记初始化:
在这里插入图片描述
此时,我们就将GUI-Guider中设计好的界面移植到工程中了。


注意事项

1.GUI-Guider部件设计时,取名一定要简介明了,方便后续移植到工程中进行修改。
2.想要放置图标,而GUI-Guider界面中没有,可以去阿里矢量图标库中查找,然后当做字体导入到项目中。
3.字体图标越大,越占用空间,cpu资源紧张的情况下,一定一定要能省则省,尽量不使用图片。

标签:7.11,Guider,GUI,点击,字体,ui,guider
From: https://blog.csdn.net/Jokerblank/article/details/140750596

相关文章

  • 我无法使用 PySimpleGUI 打开第三个窗口
    我无法创建第三个窗口。代码工作没有错误,但它不显示代码结束的窗口当前我正在尝试使其显示一个复选框表,供人们选择座位。我测试过它是否根本没有运行。把print放在它后面,它就会打印出来。我也尝试让它显示简单的文本,但这也不起作用。下面是代码:layout3=[[sg.Text('Tes......
  • imgui中文字体库导入乱码问题
    1.中文字体库导入乱码问题1.修改clion中的文件编码配置2.按住Ctrl+Shift+Alt+/,选中Registry…,然后取消run.processes.with.pty3.cmakelist.txt导入字体文件,注意不要加u8了,不然会乱码#字体文件include_directories(${PROJECT_SOURCE_DIR}/include/fonts)然后mai......
  • 【nacos】记一次使用NacosExploitGUI扫描发现nacos安全漏洞
    一、场景   公司使用nacos作为配置和注册中心,使用的版本是1.4.0 二、下载NacosExploitGUIhttps://github.com/charonlight/NacosExploitGUI下载release中的压缩包  三、运行NacosExploitGUI1、运行$java-jarNacosExploitGUI_v4.0.jarError:JavaFXruntime......
  • Chrome 浏览器更新后,我的 python tagui 代码工作不稳定。问题的解决方法是什么
    我编写了一个pythontagui脚本来在chrome中操作Intranet网页。它运行良好。但是在chrome浏览器更新后,脚本每次都会在某个时刻随机停止,并且也不会抛出错误。请帮忙。我尝试重新启动电脑,但这并没有解决问题。Chrome浏览器更新后,TagUI脚本工作不稳定的问题可能由以......
  • 如何在 CustomTkinter GUI 中实现放大/缩小功能
    我正在尝试向RaspberryPi上的customtkinterGUI添加放大/缩小功能。由于customtkinter中缺乏对缩放小部件的内置支持,我正在努力实现这一目标。有没有人在customtkinter应用程序中成功实现了缩放功能,您能否提供有关如何根据用户输入动态调整小部件大小和重新定位小部件的指......
  • Unity UGUI 之 事件接口
    本文仅作学习笔记与交流,不作任何商业用途本文包括但不限于unity官方手册,唐老狮,麦扣教程知识,引用会标记,如有不足还请斧正本文在发布时间选用unity 2022.3.8稳定版本,请注意分别1.什么是事件接口?首先,什么是事件?C#事件-CSDN博客什么是接口?TYNAM测试博客(cnblogs.com)再......
  • PySimpleGUI总结
    这篇文章主要是对GUI整体来说的,以下将讲述GUI的下载,内容与具体流程。其他详细内容和使用下次具体讲述。下载首先,打开你的pycharm,找到你的终端长这样然后在命令行输入pipinstallPySimpleGUI但是!!!pysimplegui这个东西5.0版本之后不是免费的,只有免费试用30天。因此如果......
  • 我如何为 yolov5 制作 gui,从 pytorch 和 opencv 加载到 tkinker?
    请帮助我,我不明白如何使用yolo和tkinker作为gui来制作用于实时检测的gui。以及如何将边界框从pytorch渲染到tkinker?这里是代码:importtorchfrommatplotlibimportpyplotaspltimportnumpyasnpimportcv2model=torch.hub.load('ultralytics/yolov5......
  • 使用 tkinter 为 python 创建 GUI 时如何解决语法错误?
    我是一名Python初学者,决定使用tkinter制作一个小型GUI,该GUI接受用户(潜在餐馆)的3个输入,然后单击按钮后随机输出其中一家餐馆。我不断收到语法错误,并认为它与我的buttonfunc或调用它的命令有关。此代码尚未包含在GUI上输出餐厅的任何位置。任何帮助将不胜感激#Pyth......
  • Unity UGUI 之 ScrollBar与ScrollView
    本文仅作学习笔记与交流,不作任何商业用途本文包括但不限于unity官方手册,唐老狮,麦扣教程知识,引用会标记,如有不足还请斧正1.什么是ScrollBar滚动块:Unity-Manual:Scrollbar2.重要参数该笔记来源唐老狮:重复参数不过多赘述请看该博客:UnityUGUI之Button-CSDN博客F.......