首页 > 其他分享 >学习ESP32——使用SquareLine_Studio自定义一个UI界面学习ESP32——使用SquareLine_Studio自定义一个UI界面

学习ESP32——使用SquareLine_Studio自定义一个UI界面学习ESP32——使用SquareLine_Studio自定义一个UI界面

时间:2023-11-22 11:46:13浏览次数:35  
标签:SquareLine 自定义 ESP32 ui Studio 报错 图标

原文:https://blog.csdn.net/Jeremyrev/article/details/131854181

打开SquareLine_Studio软件,先生成一个项目,这里我选择乐鑫官方的板子

 

选择File→Project Settings选择导出的地址,点击APPLY CHANGES

 

完成后,先下载字体和图标

进入阿里矢量图标官网

 

 

 

注册登录之后点击 资源管理 → 我的项目

 

新建项目

 

右上角搜索图标,字体,加入自己的项目

 

添加完成后,下载到本地。

只取用.tft文件,放入SquareLine_Studio项目中的assets文件夹中

 

 

导入完成之后,把刚刚下载的图标字体放进工程

 

创建自己的图标和字体库,Symbols里可以选择自己会用到的字

 

创建完成之后就可以显示中文字体

 

导入图标和刚刚的操作一样,在Range里面把图标对应的unicode码依次写上

 

把需要的文字和图标摆好后,导出

 

将SquareLine项目中的以下文件导入文件到自己的工程,直接放在main文件夹内

 

打开VScode编译工程,在程序里调用ui.h函数,并初始化。(此处用的是lvgl的Music例程)

编译,修改报错。

#include "ui.h"


// lv_demo_music();//music演示例程
ui_init(); // ui初始化
字体报错,搜索,定位到报错的地方,这里是移植的版本问题

 

把#if LV_VERSION_CHECK(8, 0, 0) 替换成 #ifLV_VERSION_CHECK(7, 4, 0) || LVGL_VERSION_MAJOR >= 8,点击全部替换。

 

修改完成后再次编译,继续修改报错

在这里增加一条定义,将LV_COLOR_16_SWAP 定义为1

这里是动画的代码,我们没有使用,先屏蔽

 

成功编译,下载

 

成功下载到开发板,并显示ui界面


————————————————
版权声明:本文为CSDN博主「Jeremyrev」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Jeremyrev/article/details/131854181

标签:SquareLine,自定义,ESP32,ui,Studio,报错,图标
From: https://www.cnblogs.com/bruce1992/p/17848617.html

相关文章

  • 3种Sentinel自定义异常,你用过几种?
    SpringCloudAlibabaSentinel是目前主流并开源的流量控制和系统保护组件,它提供了强大的限流、熔断、热点限流、授权限流和系统保护及监控等功能。使用它可以轻松的保护我们微服务,在高并发环境下的正常运行。那么,当程序触发了限流和熔断规则时,如何自定义返回的异常信息呢?这是......
  • monaco editor自定义代码解析和代码高亮颜色配置
    //目前使用到的关于解析配置exportconstlanguage={//是否区分大小写,true区分ignoreCase:false,//关键字keywords:['aaa','bbb'],//类型关键字typeKeywords:[],//代码解析配置格式为[正则表达式,对应的类型如(string,number,comment)]tokenizer:......
  • Django自定义接口
    一、在有默认(create、list、retrieve、update、destroy)接口时自定义接口classIterationsViewSet(MyModelViewSet):queryset=uc_iterations.objects.all().order_by('id')serializer_class=IterationsSerializerpagination_class=DIYPagination#配置自定......
  • ant design vue 1.x 和 3.x 自定义表单示例
    以下是项目中用到的自定义表单的写法,vue2vue3各记录一个。1.x(Forvue2)自定义表单的示例实现如下图的控件代码如下:import{Component,Prop,Vue,Watch}from'vue-property-decorator'import{Moment}from'moment'typeValue={left:Moment;right:Moment......
  • 创建自定义日志筛选器
    Windows的事件查看器中的日志包含了很多信息,但是系统自带的筛选器只能筛选固定的字段和内容。有时候想根据某个事件中的用户名或者IP筛选的时候就没办法了。此时需要创建自定义筛选器来实现。首先找到希望筛选的日志,调整成详细的XML视图。  这里面就有我们需要用到的字段信......
  • vue自定义指令按enter键触发事件
    directives:{enter:{bind(el,binding){document.addEventListener('keyup',(event)=>{if(event.keyCode===13){binding.value()}})}}},v-enter="search"......
  • Springboot自定义starter
    Springboot自定义sarter这里通过自定义mybatis的starter来简单进行分析理解步骤:创建dmybatis-spring-boot-autoconfigure模块,提供自动配置功能,并定义配置文件META-INF/spring/xxx.imports创建dmybatis-spring-boot-starter模块,在starter中引入自动配置模块创建项目:1......
  • Android系统开发 Android10版本自定义系统版本号
    前言  framework开发,此博客基于Android10版本,实现自定义系统版本号。找到修改位置需要修改的关键文件是buildinfo.sh搜索一下文件找到要改的目标文件这里建议将这个文件拷贝出来修改,各自的编译环境不同,拷贝或者传输文件的方式不同,这里各自发挥。下面是我在wsl里把文件拷......
  • Vue自定义创建项目
    基于VueCli自定义创建项目顺序:安装脚手架vuecreate项目名选择自定义Babel/Router/CSS/LinterVue2.xVueRouterhash模式CSS预处理ESlint:Standard&LintonSave配置文件dedicatedconfigfiles......
  • wpf 自定义按钮模板
    <ButtonWidth="300"Height="100"Content="自定义按钮"Background="Bisque"FontSize="23"Foreground="Orchid"><Button.Template><ControlTemplateTargetType=&qu......