【快速入门 LVGL】-- 5、Gui Guider界面移植到STM32工程

embedded/2024/10/18 18:28:15/

上篇,我们已学习:【快速入门 LVGL】-- 4、显示中文

工程中添加了两个按钮作示范。运行效果如图:

本篇:把Gui Guider设计好的界面,移植到STM32工程。

特别地:

  • 在使用Gui Guider进行界面设计时,应该尽量地完善了设计,再进行移植。
  • 本篇只添加了两个按钮就(匆忙)移植,只是为了示范如何移植。

1、复制一份已移植好LVGL底层的 STM32 工程,作为Gui Guider移植的基础工程。

     在第1篇LVGL学习中,我们已移植好了一个LVGL的STM32工程。

2、在STM32工程的 LVGL 目录下,新建文件夹

  • LVGL 文件夹下,新建文件夹:myGUI。也可以使用自己喜欢的名称。

完成后,LVGL文件夹是这个样子的:

3、复制 Gui Guider 工程文件到 STM32 工程

  • 复制:Gui Guider 工程目录下的两个文件夹: custom、generated;
  • 粘贴到:STM32工程 / LVGL / myGUI 文件夹中;

完成后,LVGL /  myGUI 文件夹,是这个样子的:

特别地:

  • 在粘贴后,顺手把这两个文件下所有子文件夹的 mk、json文件,都删除,后面更省时间。

 4、打开 STM32 工程

  • 保留:硬件初始化代码、LVGL的3行初始化函数、心跳函数、任务刷新函数;
  • 删除之前测试用的控件代码;

修改后,main是下图这个样子的 (TIM中断回调函数里的心跳函数,在截图范围外了):

点击编译,确认:0 Error; 

如果有错误,先解决了再下一步。

不要嫌麻烦,每操作一个重要步骤,就编译检查一次!

5、新建文件组

  • 新建一个Group:LVGL_myGUI;

6、为 LVGL_myGUI 添加文件

注意:

  • 添加 LVGL / myGUI 目录下:所有 c、h文件;
  • 文件类型选择: All files(*.*),  才能显示h文件;
  • mk、json扩展名的文件,不用添加 (如果在第3步里已删除,这儿操作会很方便);
  • 重点:所有子文件夹里的c、h,都别漏了,如generated文件夹就的子文件夹;
  • 添加完了,点击"OK",保存。

操作过程如下:

完成后,是这个样子的:

7、添加头文件路径

     需要添加三个路径:

  • LVGL /  myGUI / custom
  • LVGL /  myGUI / generated
  • LVGL /  myGUI / generated / guider_customer_fonts

工程资源不同,需要添加的路径不尽相同,如,你的工程可能会有图片资源文件夹等。

如果怕出错:只要是有h文件的目录,你都添加它的路径,就不会产生错误。

步骤、操作如下:

8、在main.c中,添加Gui Guider的头文件引用、声明变量

  • #include "gui_guider.h"           // Gui Guider 生成的界面和控件的声明
  • #include "events_init.h"          // Gui Guider 生成的初始化事件、回调函数
  • lv_ui  guider_ui;                     // 声明 界面对象

完成后,是这个样子的:

9、添加 UI、事件 的初始化函数

main.c中,在LVGL初始化、TIM6初始化之后,调用界面UI、事件的初始化函数。

  • setup_ui(&guider_ui);           // 初始化 UI
  • events_init(&guider_ui);       // 初始化 事件

完成后,是这个样子的:

10、编译一次

当使用Gui Guider是v1.7.2版本及以上,编译后,是没有错误的。

但是,v1.7.1版本及以下,编译完成后,会有4处错误,如下图:

如何解决:

点击编译信息栏,向上滚动,依次找到:error...."lvgl/lvgl.h"  No such file or directory;

  • 双击错误提示行,将会跳转到产生错误的位置 。
  • 依次把4处路径错误: "lvgl/lvgl.h",  修改为:"lvgl.h"

再次编译:0 Error !

11、烧录

烧录代码至板子,运行结果如下:



http://www.ppmy.cn/embedded/19709.html

相关文章

Element-plus使用记录

Element-plus使用中遇到的问题与解决方案 动态渲染icon Element-plus中的icon需要单独安装Icon 图标 | Element Plus <template><div class"page"><div class"h-menu"><div class"show-menu" click"isCollapseHandle&…

QT-真正的成员函数

真正的成员函数不需要传递参数就可以实现对成员数据的操作&#xff0c;区别于使用结构体中的变量进行操作&#xff0c;使代码更加简洁 #include <stdio.h>#include <stdlib.h>#include <string>#include <iostream>using namespace std;class Car{ …

云赛道---AI开发框架

MindSpore 旨在提供端边云全场景的 AI 框架。 MindSpore 可部署于端、边、云不同的 硬件环境&#xff0c;满足不同环境的差异化需求&#xff0c;如支持端侧的轻量化部署&#xff0c;支持云侧丰富的 训练功能如自动微分、混合精度、模型易用编程等。 MindSpore 全场景的几个重…

微信小程序开发:2.小程序组件

常用的视图容器类组件 View 普通的视图区域类似于div常用来进行布局效果 scroll-view 可以滚动的视图&#xff0c;常用来进行滚动列表区域 swiper and swiper-item 轮播图的容器组件和轮播图的item项目组件 View组件的基本使用 案例1 <view class"container"&…

分享一些实用的工具

1、amCharts5&#xff1a;模拟航线飞行/业务分布图/k线/数据分析/地图等 网址&#xff1a; JavaScript mapping library: amCharts 5https://www.amcharts.com/javascript-maps/ Demo地址&#xff1a;Chart Demos - amChartshttps://www.amcharts.com/demos/#maps 他分为amC…

如何防止黑客恶意的刷端口

我们可以在把这个端口作为Redis的一个key&#xff0c;&#xff08;Redis是kv结构的&#xff0c;v具有类型结构&#xff09;我们可以约定1秒钟超过多少次就算攻击&#xff08;比如1秒钟十次&#xff09;&#xff0c;当一秒钟刷新超过十次我们就认为是在刷新我们的接口&#xff0…

Redis入门到通关之数据结构解析-Dict

文章目录 概述构成Dict的扩容Dict的rehash总结 欢迎来到 请回答1024 的博客 &#x1f353;&#x1f353;&#x1f353;欢迎来到 请回答1024的博客 关于博主&#xff1a; 我是 请回答1024&#xff0c;一个追求数学与计算的边界、时间与空间的平衡&#xff0c;0与1的延伸的后端开…

电商API数据采集接口||大数据的发展,带动电子商务产业链,促进了社会的进步

最近几年计算机技术在诸多领域得到了有效的应用&#xff0c;同时在多方面深刻影响着我国经济水平的发展。除此之外&#xff0c;人民群众的日常生活水平也受大数据技术的影响。 主流电商API数据采集接口||在这其中电子商务领域也在大数据技术的支持下&#xff0c;得到了明显的进…