GUI Guider设计UI界面移植到STM32

2024-06-01 09:44:21

GUI Guider设计UI界面移植到STM32

一、什么是GUI Guider

什么是 GUI-Guider? GUI Guider 是恩智浦为 LVGL 开发了一个上位机GUI 设计工具，可以通过拖放控件的方式设计 LVGL GUI 页面，加速 GUI 的设计。设计完成的 GUI 页面可以在 PC 上仿真运行，预览自己设计的UI界面。确认设计完毕之后可以生成 C 代码，再整合到 MCU 项目中。
软件下载地址：https://www.nxp.com.cn/
打开网址搜索GUI Guider选择适合自己的系统的版本。下载安装。

二、软件使用

打开软件

选择自己喜欢的图片，但是在选择图片时要注意图片大小，可以通过图片编辑工具调整图片大小已适应我们的屏幕大小。
运行仿真，选择C语言
仿真效果

点击生成代码。

三、将代码整合到我们的工程

打开我们刚才的GUI工程目录，下面有一个 generated 文件夹，该文件夹就是我们所需要的，将generated整个文件夹复制到我们的STM32工程中的GUIAPP目录下。
接着打开keil工程在keil工程添加相关的.c源文件和.h头文件路径。
添加.c文件

包含文件路径

然后编译，可能会报错，双击第一条错误提示

接着继续修改其他类似错误。再次编译可能会提示找不到 “lv_font.h” 头文件，记得我们之前在LVGL源码是遇到有这个，所以我们这里把GUI/src路径下的font文件夹路径包含进来。

再次编译，会提示找不到"custom.h"头文件，这里我们把它注释掉。最后编译通过。有时候到这一步会有 error: #8: missing closing quote 这样的错误提示，
解决办法就是：在KEIL中Options for Target ‘Flash’ -> C/C++ -> Misc Controls添加“–locale=english”。

然后再main.c 源文件中添加相关的头文件和代码。

编译下载到板子上，可以看到程序运行屏幕显示我们自己设计的UI界面。

GUI Guider设计UI界面移植到STM32相关推荐

MATLAB AppDesigner 设计UI界面中调用自定义函数
在MATLAB AppDesigner设计UI界面过程中,如果直接在APPDesigner代码编辑框中编写代码,如代码量较大,会导致代码混乱的问题.使用调用函数的方法能够解决该问题. 本文将介绍MAT ...
优秀的设计UI界面按钮素材，让点击率飙升
快节奏的网络数码时代人们越来越离不开智能设备,面对屏幕上无数的按钮,点还是不点是个问题.不知道大家有没有发现,按钮越多,我们点击得越慢.这是因为只要有按钮,我们的下意识就会"检查" ...
PyQt4设计UI界面并添加简单功能【python+pyqt4+opencv】
学习python的过程中,了解到PyQt,加上先前用过OpenCV,自然就有了用PyQt设计UI界面,调用OpenCV函数实现功能的想法. 步骤: 1. Qt designer 快速实现UI界面,并 ...
PyQt5系列教程(二)利用QtDesigner设计UI界面
软硬件环境 OS X EI Capitan Python 3.5.1 PyQt 5.5.1 PyCharm 5.0.1 前言在PyQt5系列教程的第一篇http://blog.csdn.net/dj ...
PyQt5 图形界面-用Qt Designer来设计UI界面，并转化为python代码运行实例演示
Qt Designer 是 Qt Creater 程序里的一个功能. PyQt5 是把 Qt Designer 设计的界面转化为 python 代码的库. 请看这篇文章: Qt Creater.PyQ ...
java设计ui界面（用户登录）
目标: Java ui界面设计:把注册界面修改,做成登录界面直接贴代码: package com.zp1115;import javax.swing.*; import java.awt.*;pub ...
QT纯代码设计UI界面Demo
目录一.前言二.界面三.源码简析四.Demo/源码一.前言 UI的设计方法有几种: ①一种是使用Qt Designer,也就是可视化设计,这在小型项目中常见,优点就是可观简便: ②另一种就是 ...
android studio添加按钮界面,2.3 使用Android Studio 简单设计UI界面
首先创建一个新的项目找到app 文件目录下的layout的 activity_main.xml 因为Android Studio 是可视化的,所有操作都可以在图形界面进行. 该res 界面当中 d ...
解决！Android Studio 设计 UI 界面控件全在左上角
Android Studio在进行界面设计的时候 UI 界面的 Layout 控件全在左上角 1.点击红色圈中的图标,Infer Constraints即可 2.这是之后的效果图 3.运行

最新文章

热门文章