快速入门GUI-guider

发布于:2022-12-18 ⋅ 阅读:(1166) ⋅ 点赞:(0)

前言

本教程要基于有移植好的LVGL—8.2.0的代码为基础,对于不懂怎么移植LVGL代码的可以看我之前的博文快速入门LVGL ————代码移植

一、什么是GUI Guider?

GUI Guider 是恩智浦为 LVGL 开发了一个上位机GUI 设计工具,可以通过拖放控件的方式设计 LVGL GUI 页面,加速 GUI 的设计,提供c语言代码,可以很方便的嵌入到自己的项目中来。

二、使用教程

1.下载软件

  • 通过恩智浦官网下载GUI_Guider
  • 百度网盘链接:https://pan.baidu.com/s/1WfgG8XCNHZ351u14By34-g
    提取码:93tq(版本为1.4.0)

2.熟悉LVGL各种组件

3.新建工程

  • 创建一个新的工程
    在这里插入图片描述

  • 选择v8.2.0版本
    在这里插入图片描述

  • 选择电脑仿真
    在这里插入图片描述

  • 选择一个空白的模版
    在这里插入图片描述

  • 填入工程的基本信息(名称要英文),选好屏幕的基本信息
    在这里插入图片描述

4.上手体验

  • 界面基本布局认识
    在这里插入图片描述

  • 简单来个布局
    在这里插入图片描述

  • 对于不是很熟练,可以看一下帮助文档
    在这里插入图片描述

5.代码移植

  • 仿真运行一下
    在这里插入图片描述

  • 编译生成代码
    在这里插入图片描述

  • 找到生成代码的文件,我们只需要移植这三个文件(custom、generated和dclock)即可,把它复制到我们移植好的LVGL代码中
    在这里插入图片描述
    在这里插入图片描述

  • 复制好的的文件夹
    在这里插入图片描述

  • 将复制的文件添加到我们LVGL_APP文件中
    在这里插入图片描述

  • 添加一下文件路径
    在这里插入图片描述
    使能dclock
    在这里插入图片描述
    在主函数添加初始化函数
    在这里插入图片描述

#include "gui_guider.h"
#include "events_init.h"
setup_ui(&guider_ui);
events_init(&guider_ui);
  • 下载到开发板查看现象

在这里插入图片描述

完结撒花

本文含有隐藏内容,请 开通VIP 后查看