【LVGL学习笔记】(五)使用SquareLine Studio设计UI

news2025/2/2 1:42:53

LVGL全程LittleVGL,是一个轻量化的,开源的,用于嵌入式GUI设计的图形库。并且配合LVGL模拟器,可以在电脑对界面进行编辑显示,测试通过后再移植进嵌入式设备中,实现高效的项目开发。
在这里插入图片描述
LVGL中文教程手册:极客笔记之LVGL教程

介绍:SquareLine Studio是LVGL官方推荐的UI设计平台,可以便捷地设计界面并一键生成代码导出。导出的代码在模拟器和嵌入式设备上都适用。目前支持的LVGL版本为8.2和8.3。对个人而言,注册即可免费使用
官方地址:SquareLine Studio
在这里插入图片描述

一. 打开和导出项目文件

这里以SquareLine Studio提供的demo为例
在这里插入图片描述
选择File-Project Settings进行项目参数配置
下图是我导出到esp32中的配置参数,如果需要导出到模拟器,则作修改
Board Group —> Desktop
Board —> Eclipse with SDL development on PC
在这里插入图片描述

选择Export-Export UI Files导出项目文件,并将该文件夹放置到platform项目中的src文件目录下

Project
├─ ui.c
├─ ui.h
├─ ui_helpers.c
├─ ui_helpers.h
.....
├─ 图片.c
├─ 辅助文件.c

在这里插入图片描述

二. 修改main.cpp

只需要包含头文件以及初始化UI即可。

#include <Arduino.h>
#include "esp32_ui/ui.h"

#include "display.h"
Display screen;

// lv_group_t * group;
void setup() {
    /* Init Serial */
    Serial.begin(115200);

    /* Init lvgl display port */
    screen.init();
    screen.setBackLight(0.2);

    /* Inflate GUI objects */
    ui_init();
}

void loop() {
    // run this as often as possible
    screen.routine();

    /* Serial test */
    Serial.println("hello");
}

三. 修改配置

按照上述步骤,正常的话编译完成即可运行,但也大概率会报一些配置的错误,主要是以下两种。

  1. 头文件包含错误
    对于一些文件,可能找不到lvgl.h,这时候需要做以下调整(这个应该是SquareLine Studio软件的bug)

    //#include "lvgl/lvgl.h"
    #include "lvgl.h"
    
  2. 参数配置错误
    这里主要是文字大小参数配置,需要修改lv_conf.h,将SquareLine Studio使用到的文字类型在lvgl中启用,即将后面的0修改为1即可。
    在这里插入图片描述

效果图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/104235.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

点云地图构建及定位

点云地图构建及定位1. 回环检测1.1 基于Scan Context1.2 基于直方图2. 后端优化2.1 后端优化基本原理2.2 李群、李代数基本知识2.3 李群、李代数基本知识2.3.1 SO(3)\mathrm{SO}(3)SO(3) 对应的 BCH\mathrm{BCH}BCH 公式2.3.2 SE(3)\mathrm{SE}(3)SE(3) 对应的 BCH\mathrm{BCH}…

链式存储之:链表的引出及其简介

上篇博客&#xff0c;笔者讲解了一下顺序表ArrayList&#xff0c;对于ArrayList有想法的各位老铁可以看一下&#xff1a;值得思索的&#xff1a;ArrayList和线性表&#xff0c;你确定错过这次机会_念君思宁的博客-CSDN博客值得思索的&#xff1a;ArrayList和线性表&#xff0c;…

Html5 canvas创意特效合集

Canvas就像一块画布&#xff0c;我们可以通过调用脚本在Canvas上绘制任意形状&#xff0c;甚至是制作动画。本文就是收集了很多非常富有创意的一些canvas动画特效例子&#xff0c;这些例子都非常适合大家学习。 1.3D篝火动画特效 这款篝火特效是基于 three.js 和 canvas 制作的…

博实结将在创业板上会:计划募资25亿元,周小强为实际控制人

近日&#xff0c;深圳市博实结科技股份有限公司&#xff08;下称“博实结”&#xff09;在深圳证券交易所递交招股书&#xff08;上会稿&#xff09;&#xff0c;准备在创业板上市。据贝多财经了解&#xff0c;博实结将于2022年12月23日接受创业板上市委审议&#xff0c;一同上…

Vue3----props和emit的使用

作用&#xff1a;父组件通过 props 向下传递数据给子组件&#xff1b; 用途&#xff1a;当有一种类型的组件需要被使用多次&#xff0c;每一次的调用都只是特定的地方不同&#xff0c;就好像一张个人简介表&#xff0c;每次填的人的信息都不同&#xff0c;但是结构都是一样的。…

Nacos学习笔记 (2)Nacos基础核心特性

内容&#xff1a; Nacos架构及其核心特性&#xff0c;包括服务注册、服务发现、发布与获取配置特性&#xff0c;以及Nacos Spring关键特性。 本文内容&#xff0c;参考 Nacos 官网与 《Nacos架构&原理》一书。 1. Nacos 架构 详情推荐参考&#xff1a; &#xff08;1&a…

服务器取证——服务器基础知识

目录 一、服务器基本介绍 &#xff08;一&#xff09;概念 &#xff08;二&#xff09;构成 &#xff08;三&#xff09; 种类 &#xff08;四&#xff09;与pc区别 二、 磁盘阵列RAID &#xff08;一&#xff09;概念 &#xff08;二&#xff09;产生原因 &#xff0…

【Django】第二课 银行账户管理系统开发

概念 本文在上一篇文章基础之前进行构建和完善 账户信息的分页显示 用户通过点击首页的“查询账户”&#xff0c;进入账户信息查询页面 则点击该按钮触发点击事件&#xff0c;向django服务器发出请求 接着我们在urls.py中需要定义与该地址进行匹配的地址&#xff0c;并匹配后…

Java on VS Code 12月更新年度亮点回顾|实时内存视图、注入处理器支持与用户体验改进

作者&#xff1a;Nick Zhu - Senior Program Manager, Developer Division at Microsoft 排版&#xff1a;Alan Wang 大家好&#xff0c;一年的时间过得很快&#xff0c;我们已经来到了2022年的年底。回顾 2022 年&#xff0c;我们的产品也经历了很多的迭代&#xff0c;在此之中…

甲氧基聚乙二醇二苯并环辛烯mPEG-DBCO简介DBCO-mPEG科研实验用试剂

中文名&#xff1a;甲氧基聚乙二醇二苯并环辛烯 英文名&#xff1a;mPEG-DBCO&#xff1b;DBCO-mPEG 分子量: 1K.2K.5K.10k.20k.30k 溶解度: DMSO, DMF 储存条件: -20C 状态&#xff1a;淡黄色到白色固体&#xff0c;或者半固体&#xff0c;取决于分子量。 溶解性&#x…

网心科技马婷:探寻边缘计算的“诗和远方”

​​LiveVideoStackCon 2022上海站活动结束&#xff0c;每一次大会的举办对音视频领域都是新的洗礼&#xff0c;同时也带来了新的收获和挑战。随着音视频技术在各种行业、场景中的逐渐成熟&#xff0c;更多的业务形态、产品变换 、跨界案例等越来越多的部分值得我们探寻和研究。…

「网络工程师必会技能」-路由器介绍和路由器基本配置

「网络工程师必会技能」-路由器介绍和路由器基本配置&#xff0c;这是每个网络必须会的技能&#xff0c;不是你有证书就一个网络工程师了哦&#xff01; 以Cisco路由器为例说明&#xff1a; &#xff08;1&#xff09;访问路由器。访问路由器与访问交换机一样&#xff0c;可以…

医院陪护小程序,专业的事情交给专业的人

陪诊服务这几年一直受到人们的好评&#xff0c;有了医院陪护小程序之后一些无法居家照顾老人的子女可以通过小程序为老人预约服务&#xff0c;陪诊平台的出现还让陪诊员有了正规的接单平台&#xff0c;不仅方便了人们下单找陪诊员还可以对陪诊人员坐正规的管理。那么在开发医院…

33.前端笔记-CSS3-2D转换

目录1、转换2、二维坐标系2.1 2D转换之移动translate2.2 2D旋转之rotate练习1练习2练习32.3 2D转换之缩放scale练习1练习22D转换综合写法转换综合练习1、转换 转换transform是CSS3中具有颠覆性的特征之一&#xff0c;可以实现元素的位移、旋转、缩放等效果 2、二维坐标系 2.…

Fabric.js 修改画布交互方式到底有什么用?

本文简介 点赞 关注 收藏 学会了 fabric.js 为我们提供了很多厉害的方法。今天要搞明白的一个东西是 canvas.interactive 。 官方文档对 canvas.interactive 的解释是&#xff1a; Indicates that canvas is interactive. This property should not be changed. canvas.in…

FPU与VFP最全面解释

本文希望能将FPU以及ARM中的FPU介绍清楚。 1. FPU&#xff08;Floating-Point Unit&#xff09; 浮点运算单元是处理器内部用于执行浮点数计算的逻辑部件&#xff0c;或者说硬件电路。不是所有的处理器都有该功能。浮点运算满足IEEE 754的标准&#xff0c;所谓IEEE 754标准&a…

关于Linux的动静态库

文章目录什么是动静态库生成静态库生成发布生成动态库发布使用库使用静态库查看系统头文件路径查看系统库文件路径使用库文件和头文件指定路径搜索头文件卸载库使用动态库动态库的运行搜索路径什么是动静态库 静态库&#xff08;.a&#xff09;&#xff1a;程序在编译链接的时…

再携手,齐并进!菊风助力宁波银行坐席PUSH外呼项目

随着“金融数字化”逐步成为金融行业的新浪潮&#xff0c;运用更加灵活的触达手段提升营销效果&#xff0c;促成业务闭环愈发成为银行业等金融机构角逐数字化转型成功的关键。 在此背景下&#xff0c;金融机构对于实时音视频技术的应用也从普遍的「呼入」需求逐步扩展到创新的…

LinkedHashSet源码解析

LinkedHashSet源码解析 问题 &#xff08;1&#xff09;LinkedHashSet 的底层使用什么存储元素&#xff1f; &#xff08;2&#xff09;LinkedHashSet 与 HashSet 有什么不同&#xff1f; &#xff08;3&#xff09;LinkedHashSet 是有序的吗&#xff1f; &#xff08;4&a…

Vue2与Vue3 setup的使用差异与对比

最近一直在做vue2的技术栈升级&#xff0c;于是心血来潮&#xff0c;就想要不写篇文章总结一下vue2和vue3在使用上的不同吧&#xff0c;于是乎&#xff0c;我们这就开始吧&#xff01; 首先说明一下&#xff0c;vue3有多种写法&#xff0c;本文使用setup语法糖&#xff0c;不考…