首页 > 其他分享 >esp32-s3+GC9A01基于vs code+PlatformIO+ardunio框架+Squareline UI 移植

esp32-s3+GC9A01基于vs code+PlatformIO+ardunio框架+Squareline UI 移植

时间:2024-07-02 22:57:24浏览次数:3  
标签:PlatformIO Squareline s3 导出 点击 code UI GC9A01

文章目录


前言

本节描述了使用SquarelineStudio创建简单UI,导出文件后如何与LVGL集成并在PlatformIO环境中进行编译和下载过程。
环境如下:
platform = espressif32
board = esp32-s3-devkitc-1
framework = arduino
SquarelineStudio 1.4.1
测试硬件如下:
ESP32-S3-N16R8
GC9A01不带触摸

一、SquarelineStudio是什么?

SquareLine Studio 是 LVGL 官方推出的一款跨平台 UI 开发工具,支持 Windows、Linux 和 macOS 平台。SquareLine Studio 采用所见即所得的开发方式,可大大减少用户开发 UI 的时间。也就是之前盲操撸lvgl代码,现在不用了,神器
官网下载地址,https://squareline.io/downloads

二、使用步骤

1.创建测试的UI

打开已注册OK的SquarelineStudio,按以下关键点进行创建
在这里插入图片描述
->1点击最上边的Create图标
->2点击Arduino
->3按显示屏选择分辨率
->4选择显示屏形状,GC9A01是圆屏,选择圆形
->5选择lvgl库版本号,之前内容中我们添加的8.3.11
->6点击创建
视窗上显示我们创建的圆形屏幕
在这里插入图片描述
我们从右侧的工具中,任意拖入几个控件(因重点在移植)
在这里插入图片描述

2.工程导出

点击左上角的Export,创建一个空的文件夹,方便后续导出
在这里插入图片描述
弹出来的对话框中,选择导出的路径,点击选择文件夹
在这里插入图片描述
点击Export---->点击Export UI Files进行导出
在这里插入图片描述
找到导出的文件夹,导出文件已在其中
在这里插入图片描述

3.工程移植

打开vs code,进入PlatformIO界面
打开导出文件夹,进入以下路径,将除C
在这里插入图片描述
将以下文件拖入我们之前建立的PlatformIO工程的scr路径下
在这里插入图片描述
复制导出文件ui.ino内容到PlatformIO工程中的main.cpp中
在这里插入图片描述
点击PlatformIO编译,并上传到开发板中,上传完毕,我们可以看到GC9A01显示了之前我们“设计的UI”画面。
PS:这里没有拷导出的libraries内lvgl库和TFT_eSPI库以及lv_conf.h内容,是因为在之前我们在前边的小节中,有在PlatformIO库中导入并进行了设置,详细见:

如果用导出文件夹中这几个文件,需要进行重新设置。
在这里插入图片描述

总结

以上就是今天要讲的内容,本文仅仅简单介绍了esp32-s3+GC9A01基于vs code+PlatformIO+ardunio框架+Squareline UI 移植。

标签:PlatformIO,Squareline,s3,导出,点击,code,UI,GC9A01
From: https://blog.csdn.net/CD391/article/details/140137092

相关文章

  • vscode setting.json 设置
    常见配置参考{"editor.fontSize":20,//编辑器字体大小"terminal.integrated.fontSize":18, //terminal框的字体大小"editor.tabSize":2,//Tab的大小2个空格"editor.formatOnSave":true,//保存是格式化"prettier.singleQuote"......
  • python: create Envircomnet in vscode 创建虚拟机
    先配置python开发环境 1.在搜索栏输入“>"或是用快后键ctrl+shift+P键就会显示”>",再输入"python:"   选择已经安装好的python的版本至当前项目中   2terminal下输入相关命令行操作,选进入虚拟机的的文件夹下cd.venv/scripts再进行激活虚拟机。输入ac......
  • 使用nodejs ws模块连接websocket服务器Unexpected response code: 403错误解决
    使用浏览器连接websocket服务器时一切正常,但是使用nodejs ws模块连接时一直报Unexpectedresponsecode:403错误,查了很多帖子都没说明白,最后自己试着一点一点对比模拟浏览器请求头,最终解决问题,解决后代码如下://TODO不加这个,会报403错误constoptions={headers:{......
  • 查询 dynamic crm 中,TypeCode 对应的实体名称
    查询语句:selectEntityId,Name,ObjectTypeCode,OriginalLocalizedNamefromEntityVieworderbyObjectTypeCode常用列表:NameObjectTypeCodeAccount1Contact2Opportunity3Lead4Annotation5BusinessUnitMap6Ow......
  • LeetCode 算法:二叉树展开为链表 c++
    原题链接......
  • (nice!!!)LeetCode 3164. 优质数对的总数 II(数组、哈希表)
    3164.优质数对的总数II思路:先找出可以被k整除的nums[i].方法一:统计因子。1、找出数组nums1每个元素的因子,用哈希表来记录每个因子出现的次数。然后再遍历数组nums2进行累加即可。classSolution{public:constintN=1e6+10;longlongnumberOfPairs(vec......
  • html+css3实现超级充电动画
    图例  源码在图片后面,有HTML和CSS个部分 源代码HTML<!doctypehtml><html><head><metacharset="utf-8"><title>PureCSS超级充电器</title><linktype="text/css"href="css/style.css"rel="stylesheet&quo......
  • AtCoder Beginner Contest 359 (A ~F)
    A-CountTakahashiQuestion:给你n个单词,要么是Takahashi,要么是Aoki;输出有几个Takahashi即可。Code:#include<bits/stdc++.h>usingnamespacestd;#defineendl'\n'#defineintlonglongtypedeflonglongll;typedefunsignedlonglongull;typedefpair<......
  • 【前端CSS3】一篇搞懂各类常用选择器(黑马程序员)
    文章目录一、前言......
  • AI模型大宗师Transformer的Encoder魔法棒
       在AI大模型数字王国里,有一位名叫Transformer的魔法大宗师。他有一个神奇的百宝箱,里面有很多魔法工具,其中有个工具叫Encoder,这个工具拥有一种神奇的力量,可以将复杂的输入信息进行编码,提取出关键的特征和依赖关系。   让我们来一起把这个工具掏出来细看一下,看看......