LVGL 官方UI设计工具 EdgeLine代码移植

LVGL 官方UI设计工具EdgeLine代码移植

一、Tools

  • LVGL v7.8
  • Edgeline bata 0.3b

二、Porting

  1. 准备移植好的LVGL8-MDK工程。(必须是v7版本,Edgeline目前只支持LVGL v7)image-20210828022404156
  2. 打开Edgeline, 登录账号,新建工程,简单设计一个测试面板。

image-20210828023012083

选择自己LCD尺寸(比如我采用的2.7寸LCD, 则填写W240 * H320 )

image-20210828023232375

可以通过软件最下面的Asset面板右下角的ADD FILE INTO ASSETS添加用户的images素材。

image-20210828023626492

我们拖一个IMGBUTTON组件,并设置该组件的Image default属性。

image-20210828023922677

导出代码到MDK项目的GUI_APP目录下;

image-20210828024134808

打开MDK项目,进入下一步。

三、MDK代码修改

  1. 在GUI_APP下引入生成的.C文件。

image-20210828024551713

其中:img_开头的为图片素材代码(待会更改),另外一个为UI显示主文件。

  1. 打开Testboard_ui.h文件,添加主函数声明(用作main.h调用)。

image-20210828025049516

  1. 打开LVGL官方在线图片转换工具 https://lvgl.io/tools/imageconverter

如果图片是采用PNG背景透明类的图片,则进行如下转换设置。

image-20210828025742758

其中Name可以设置为之前Edgeline生成的代码文件的名称一样方便我们直接覆盖,免去修改变量名称等操作。

  1. 将转换下载的代码文件复制到,MDK工程的GUI_APP目录下进行覆盖。

image-20210828030247739

  1. 打开Testboard_ui.c 其中有以下两处报错。

image

第一处解决:我们应打开GUI目录下的lv_config.h文件,使能 LV_USE_USER_DATA。image-20210828030859866
第二处解决:在前面添加&符号。
添加&符号

  1. 在main.c中引入头文件和测试函数。

image-20210828031050958

四、编译上传测试

image-20210828031532285


文章标签:

原文连接:https://blog.csdn.net/qq_41980754/article/details/119963118

相关推荐

[原创]移动相机九点标定工具原理及实现(包涵部分源码)

34个图片压缩工具集合,包含在线压缩和CLI工具

[原创]一种自动化九点标定工具原理(包涵部分源码)

接口文档管理工具,选yapi 还是 Apifox? 这里列出了两款软件的深度分析,看完再下载不迟。

使用ComposeDesktop开发一款桌面端多功能APK工具

这个好用的办公网优化工具,官宣免费了

Sunmao——一个开发低代码工具的开源框架

前端必备 | 3分钟白嫖我常用的免费效率工具!

好用的办公网优化工具OneDNS

KusionStack 开源|Kusion 模型库和工具链的探索实践

从“AI玩具”到“创作工具”的云原生改造之路

LabelImg(目标检测标注工具)的安装与使用教程

效率低?响应慢?报表工具痛点及其解决方案

接口文档进化图鉴,有些古早接口文档工具,你可能都没用过

用 JavaScript 复原何同学B站头图、对前端构建工具的一些理解、弹幕的常规设计与实现 丨酱酱的下午茶第31期

关于目前流行的 Redis 可视化管理工具的详细评测

【云原生 • DevOps】一文掌握持续集成工具 Jenkins

【一起学Rust】Rust包管理工具Cargo初步了解

窥探性能的接口测试工具,性能优化的开端

照妖镜:一个工具的自我超越