网站静态和动态那个好,徐州建设工程交易平台,wordpress伪静态 iis7,网站开发找谁零.前置篇章
本篇前置文章为【LVGL快速入门(一)】LVGL开源框架入门教程之框架移植
一.UI设计 介绍使用之前#xff0c;我们要学习一款LVGL官方的UI设计工具SquareLine Studio#xff0c;使用图形化设计方式设计出我们想要的界面#xff0c;然后生成对应源文件导入工程使用…零.前置篇章
本篇前置文章为【LVGL快速入门(一)】LVGL开源框架入门教程之框架移植
一.UI设计 介绍使用之前我们要学习一款LVGL官方的UI设计工具SquareLine Studio使用图形化设计方式设计出我们想要的界面然后生成对应源文件导入工程使用。 详情参考这篇文章【学习笔记】SquareLine Studio安装教程LVGL官方工具-CSDN博客 另一种非官方工具Gui Guider(恩智浦开发)也可以进行UI设计 Gui Guider官方下载地址GUI Guider | NXP 半导体 个人比较喜欢恩智浦这个工具界面看着更简洁而且免费。
二.简单测试 在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:#8missing closing quote 这个错误主要由编码错误引起在魔术棒-C/C-Misc Controls中添加--localeenglish 后即可解决 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 分别可旋转不同的角度 四.移植成功 哈哈很浪漫的啊
