0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

RT-Thread Studio上移植GUI-Guider-1.4开发LVGL8.2工程

冬至子 来源:郑个小目标 作者:郑个小目标 2023-11-03 12:52 次阅读

1.创建一个rttthread工程
创建一个rttthread工程,选择出厂带好LVGL配置的demo,或者自己已经搭建好了LVGL环境的工程。我刚好手上有一块HMI-Board的板子,就直接用这个了。

1.jpg

由于LVGL的环境是现成的,所以我们就只需要将自带的demo给关闭掉就行了,这样就可以省下很多空间来进行设计。首先转到music_demo的配置项上去,将LVGL版本修改8.2。

1.jpg

此时保存设置进行编译,没有报错。进入board文件夹,来到LVGL的demo调用函数里面,将原先的内容都注释或者删除掉。

1.jpg

然后编译后就无报错了,并且我们的Flash开支减小到一半252KB多一点。这时候我们的工程没有GUI函数进行调用了,我们需要开始自己设计,所以我们打开GUI-Guider-1.4来进行对LVGL8.2的GUI设计,本篇主要讲解如何移植,具体GUI-Guider-1.4的使用方法大家还是上网自己学习。

2.使用GUI-Guider-1.4设计界面和导出代码
创建一个GUI Guider工程。不同版本的GUI Guider可以创建的LVGL版本不一样,按照自己移植的LVGL来选择安装GUI Guider软件即可。我移植的是LGVL8.2版本,所以下载的是GUI Guider-1.4.0版本。

1.jpg

进入下一步,来到选择开发板环节,大部分都是NXP的板子,所以我们不选择。

1.jpg

继续下一步,来到选择画布模板环节。我使用的是一块480*272的屏幕,可以用很多demo模板,但是本次教如何使用空白模板来做GUI。

1.jpg

开始最重要的环节,设置我们的屏幕参数了。我的屏幕参数为480*272,面板类型我是随便填的。然后就开始创建就行了。

1.jpg

进入到设计界面,我们可以开始拖拽组件放到我们的屏幕上了。具体的如何将界面搞得好看就需要自己去熟悉这个软件和提高自己的美学境界了。本教程只记录如何简单使用该软件进行LVGL简单设计。

1.jpg

要想显示图片的话,先将图片上传到资源上,图片名字不能出现中文。然后上传完后就回到组件将图片拖到屏幕上。

1.jpg

选择好我们之前上传的图片后,就可看到我们的屏幕上有图片了。接下来就随便放点其他组件就行了。

1.jpg

放置好界面后可以试着编译一下,看看有没有报错啥的。没报错的话,就可导出代码准备移植到RTT工程里。

1.jpg

导出到指定文件夹后有两个文件夹。

1.jpg

3.开始移植到RT-Thread Studio上
接下来就是在已经移植好LVGL8.2版本的工程里面开始添加啊导出文件。首先在工程里面创建一个GUI文件夹我习惯建立在board文件夹里面,并且将导出的这俩文件夹里面的所有文件打散了复制粘贴进去。

1.jpg

最重要的我们还需要到其他文件夹下复制粘贴一个SConscript文件,并且简单修改以下。我到boardlvgl下复制了SConscript文件,最后文件夹内容如下:

1.jpg

进入工程后右键同步scons到工程,这时候我们的GUI文件夹就出现了。修改一下SConscript文件。

1.jpg

开始编写我们的lv_demo.c文件来调用我们设计的GUI界面。

1.jpg

#include "rtconfig.h"
#include "lvgl.h"
#include "events_init.h"
#include "gui_guider.h"
lv_ui guider_ui;
void lv_user_gui_init(void)
{
/* display demo; you may replace with your LVGL application at here */
setup_ui(&guider_ui);
events_init(&guider_ui);
}

下载到开发板后和我们实际设计的一模一样。

1.jpg

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • GUI
    GUI
    +关注

    关注

    3

    文章

    611

    浏览量

    38813
  • RT-Thread
    +关注

    关注

    31

    文章

    1150

    浏览量

    38911
  • Flash存储
    +关注

    关注

    0

    文章

    38

    浏览量

    8239
  • LVGL
    +关注

    关注

    0

    文章

    75

    浏览量

    2415
收藏 人收藏

    评论

    相关推荐

    RT-Thread记录(二、RT-Thread内核启动流程)

    在前面我们RT-Thread Studio工程基础之上讲一讲RT-Thread内核启动流程.
    的头像 发表于 06-20 00:30 4426次阅读
    <b class='flag-5'>RT-Thread</b>记录(二、<b class='flag-5'>RT-Thread</b>内核启动流程)

    RT-Thread NUC97x 移植 LVGL

    不涉及 rt-thread 驱动,但是它是 LVGLrt-thread 的接口。LVGLrt-thread 上运行的基石。
    发表于 07-08 09:37 1292次阅读

    RT-Thread/GUI 0.3.0 beta

    RT-Thread/GUI是国内主导开发的实时线程操作系统(RT-Thread)中的图形界面组件,它是和RT-Thread相配套的组件,目前
    发表于 11-29 14:48

    RT-Thread Studio 使用 RT-Thread Nano

    本文介绍了如何在 RT-Thread Studio 使用 RT-Thread Nano,并以创建 stm32f103RB 的 Nano 工程
    发表于 05-18 15:59

    在基于PC的RT-Thread模拟器搭建LVGL图形库

    前言RT-Thread 当前的版本:4.1.0,通过简单的配置就可以支持最新的LVGL图形库,LVGL图形库以软件包的方式加入工程LVGL
    发表于 06-13 11:03

    请问在RT_Thread Studio创建的工程中如何移植LVGL

    请问在RT_Thread Studio创建的工程中如何移植LVGL?求移植步骤。谢谢了!
    发表于 09-30 09:57

    请问在RT_Thread Studio创建的工程中如何移植LVGL

    请问在RT_Thread Studio创建的工程中如何移植LVGL
    发表于 11-11 14:48

    请问在RT_Thread Studio创建的工程中如何移植LVGL

    请问在RT_Thread Studio创建的工程中如何移植LVGL?求移植步骤。
    发表于 02-07 10:42

    求助,在RT_Thread Studio创建的工程中如何移植LVGL

    RT_Thread Studio创建的工程中如何移植LVGL
    发表于 09-08 17:48

    RT-Thread Studio驱动SD卡

    RT-Thread Studio驱动SD卡前言一、创建基本工程1、创建Bootloader2、创建项目工程二、配置RT-Thread Set
    发表于 12-27 19:13 20次下载
    <b class='flag-5'>RT-Thread</b> <b class='flag-5'>Studio</b>驱动SD卡

    GUI-Guider生成工程移植MCU

    GUI Guider 是恩智浦为 LVGL 开发了一个上位机GUI 设计工具,可以通过拖放控件的方式设计
    发表于 02-22 16:18 0次下载

    RT-Thread文档_RT-Thread SMP 介绍与移植

    RT-Thread文档_RT-Thread SMP 介绍与移植
    发表于 02-22 18:31 7次下载
    <b class='flag-5'>RT-Thread</b>文档_<b class='flag-5'>RT-Thread</b> SMP 介绍与<b class='flag-5'>移植</b>

    基于RT-Thread Studio学习

    前期准备:从官网下载 RT-Thread Studio,弄个账号登陆,开启rt-thread学习之旅。
    的头像 发表于 05-15 11:00 2595次阅读
    基于<b class='flag-5'>RT-Thread</b> <b class='flag-5'>Studio</b>学习

    使用RT-Thread Studio进行智能家居终端的设计

    本次方案基于星火一号开发开发,使用RT-Thread Studio进行工程创建,代码编辑,RT-Thr
    的头像 发表于 07-28 16:41 1389次阅读
    使用<b class='flag-5'>RT-Thread</b> <b class='flag-5'>Studio</b>进行智能家居终端的设计

    试用RT-Thread Studio(VSCode)

    想尝试RT-Thread studio (VSCode),先下载安装VSCode,再搜索RT-Thread
    的头像 发表于 10-12 10:58 573次阅读
    试用<b class='flag-5'>RT-Thread</b> <b class='flag-5'>Studio</b>(VSCode)