零.前置篇章
本篇前置文章为【LVGL快速入门(一)】LVGL开源框架入门教程之框架移植
一.UI设计
介绍使用之前,我们要学习一款LVGL官方的UI设计工具SquareLine Studio,使用图形化设计方式设计出我们想要的界面,然后生成对应源文件导入工程使用。
详情参考这篇文章:【学习笔记】SquareLine Studio安装教程(LVGL官方工具)-CSDN博客
另一种非官方工具Gui Guider(恩智浦开发)也可以进行UI设计:
Gui Guider官方下载地址:
个人比较喜欢恩智浦这个工具,界面看着更简洁,而且免费。
二.简单测试
在while前添加以下代码来简单测试是否移植成功:
// 按钮
lv_obj_t *myBtn = lv_btn_create(lv_scr_act()); // 创建按钮; 父对象:当前活动屏幕
lv_obj_set_pos(myBtn, 10, 10); // 设置坐标
lv_obj_set_size(myBtn, 120, 50); // 设置大小
// 按钮上的文本
lv_obj_t *label_btn = lv_label_create(myBtn); // 创建文本标签,父对象:上面的btn按钮
lv_obj_align(label_btn, LV_ALIGN_CENTER, 0, 0); // 对齐于:父对象
lv_label_set_text(label_btn, "Test"); // 设置标签的文本
// 独立的标签
lv_obj_t *myLabel = lv_label_create(lv_scr_act()); // 创建文本标签; 父对象:当前活动屏幕
lv_label_set_text(myLabel, "Hello world!"); // 设置标签的文本
lv_obj_align(myLabel, LV_ALIGN_CENTER, 0, 0); // 对齐于:父对象
lv_obj_align_to(myBtn, myLabel, LV_ALIGN_OUT_TOP_MID, 0, -20); // 对齐于:某对象
可以看到一个Test按钮以及Hello world!
遇到错误或者奇怪的现象可以参考:LCD典型问题及解决方案_hx8399c-CSDN博客
三.正式开发
这里笔者使用GUI Guider来做演示。
1.创建工程
Create a new project来创建新工程:
貌似只适配8.3的 框架,next下一步:
选择设备模拟器为模板:
选择空工程:
根据自己的屏幕选择尺寸,以及自命名工程和保存路径:
单击Create即可创建成功:
2.设计界面
依次单击以下图标可以呼出组件界面:
先添加一个容器覆盖我们的界面:
组件中选择图片,然后导入几张图片:
修缮一下:
选择标签,加点文字:
3.运行测试
点击右上角的三角运行无误后,即可开始移植
4.移植代码
将代码导出至指定路径:
打开我们移植好LVGL的STM32的工程以及工程文件夹,在LVGL文件夹中创建一个guider文件夹,将guider生成的源码src文件夹全部放入(删除生成的main.c):
工程管理中创建组并添加文件:
魔术棒中添加头文件路径:
打开GUI Guider导出的main.c文件,将main.c中的头文件加入到我们自己工程的头文件中:
//Guider
#include "../generated/gui_guider.h"
#include "../generated/events_init.h"
在main.c主函数上方添加全局变量:
lv_ui guider_ui;
在主函数中调用(LVGL框架初始化之后):
setup_ui(&guider_ui);
events_init(&guider_ui);
编译成功即可。
5.错误解决方案
以下是笔者移植时遇到的错误总结:
1.error:#8:missing closing quote
这个错误主要由编码错误引起,在魔术棒->C/C++->Misc Controls中添加:--locale=english
后即可解决
2.画面倒置
烧入成功后发现画面是旋转的或者倒置的话,可以使用LVGL自带的属性进行修改旋转
打开lv_port_disp.c这个文件,找到void lv_port_disp_init(void)这个函数
在lv_disp_drv_register(&disp_drv);前添加堆属性的修改即可
disp_drv.sw_rotate = 1; disp_drv.rotated = LV_DISP_ROT_90;
这两句是开启旋转并旋转90度,其他宏如:
LV_DISP_ROT_NONE
,LV_DISP_ROT_90
,LV_DISP_ROT_180
,LV_DISP_ROT_270
分别可旋转不同的角度
四.移植成功
哈哈很浪漫的啊!