快速入门GUI-guider

快速入门GUI-guider(本教程基于LVGL-v8.20)

  • 前言
  • 一、什么是GUI Guider?
  • 二、使用教程
    • 1.下载软件
    • 2.熟悉LVGL各种组件
    • 3.新建工程
    • 4.上手体验
    • 5.代码移植
  • 完结撒花

前言

本教程要基于有移植好的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各种组件

  • 可以自己去看LVGL官方的文档LVGL官方文档
  • 英文不好的可以去看一下百问网的中文版的文档LVGL中文文档

3.新建工程

  • 创建一个新的工程
    快速入门GUI-guider_第1张图片

  • 选择v8.2.0版本
    快速入门GUI-guider_第2张图片

  • 选择电脑仿真
    快速入门GUI-guider_第3张图片

  • 选择一个空白的模版
    快速入门GUI-guider_第4张图片

  • 填入工程的基本信息(名称要英文),选好屏幕的基本信息
    快速入门GUI-guider_第5张图片

4.上手体验

  • 界面基本布局认识
    快速入门GUI-guider_第6张图片

  • 简单来个布局
    快速入门GUI-guider_第7张图片

  • 对于不是很熟练,可以看一下帮助文档
    快速入门GUI-guider_第8张图片

5.代码移植

  • 仿真运行一下
    快速入门GUI-guider_第9张图片

  • 编译生成代码
    快速入门GUI-guider_第10张图片

  • 找到生成代码的文件,我们只需要移植这三个文件(custom、generated和dclock)即可,把它复制到我们移植好的LVGL代码中
    快速入门GUI-guider_第11张图片
    快速入门GUI-guider_第12张图片

  • 复制好的的文件夹
    快速入门GUI-guider_第13张图片

  • 将复制的文件添加到我们LVGL_APP文件中
    快速入门GUI-guider_第14张图片

  • 添加一下文件路径
    快速入门GUI-guider_第15张图片
    使能dclock
    快速入门GUI-guider_第16张图片
    在主函数添加初始化函数
    快速入门GUI-guider_第17张图片

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

快速入门GUI-guider_第18张图片

完结撒花

你可能感兴趣的:(笔记,单片机,stm32)