用SquareLine Studio轻松实现ESP8266运行LVGL图形化界面

〇、前言

        LVGL 作为一款功能强大的开源嵌入式图形库，为资源有限的嵌入式设备带来了流畅美观的图形界面体验。然而，LVGL 的传统开发方式需要编写大量代码，对于初学者来说门槛较高，也增加了开发周期。而 SquareLine Studio 的出现，则完美解决了这些问题，为 LVGL 开发带来了以下优势：

1. 可视化开发，降低门槛：提供直观的可视化界面设计器，开发者无需编写代码即可通过拖拽控件、设置属性的方式快速构建用户界面，大大降低了 LVGL 的学习成本和开发难度，即使是没有编程经验的用户也能轻松上手。

2. 代码自动生成，提升效率：能够根据设计好的界面自动生成高质量的 LVGL 代码，开发者只需专注于业务逻辑的实现，无需手动编写繁琐的界面代码，极大地提高了开发效率，缩短了项目周期。

3. 实时预览，所见即所得： 支持实时预览功能，开发者可以随时查看界面设计效果，方便进行调试和修改，确保最终效果符合预期，避免反复修改代码的麻烦。

4. 跨平台支持，灵活便捷： 支持 Windows、macOS 和 Linux 系统，开发者可以在自己熟悉的操作系统上进行开发，同时，它支持多种嵌入式平台，包括 ESP32、ESP8266、STM32 等，方便将项目移植到不同的硬件平台。

5. 社区活跃，资源丰富： 有活跃的社区和丰富的学习资源，开发者可以轻松找到教程、示例代码和技术支持，快速解决开发过程中遇到的问题。

更多的SquareLine Studio信息和软件下载参考官方链接：https://squareline.io

这里不介绍如何安装SquareLine Studio（网上很多安装教程），直接从使用开始介绍。会介绍如何用SquareLine Studio创建一个Arduino工程，然后修改工程部分代码，让一些基本LVGL界面元素运行在esp8266上。

下面介绍使用到的硬件型号和软件版本如下：

软/硬件	版本/型号
操作系统	win10
SquareLine Studio	1.5.0
Arduino	2.3.4
nodeMcu	ESP8266-12F
液晶屏	ST7789 分辨率：240*240

一、利用SquareLine Studio创建和导出Arduino工程

1.1 创建Arduino工程

打开SquareLineStudio的首个界面如下，有一部分示例可以供参考，这里我们需要新建我们自己的工程，所以点击中间的【Create】，创建新工程。

在创建工程界面，按照图上的设置，注意这里是针对 240*240分辨率，驱动芯片ST7789设置的，如果是其他分辨率和其他颜色深度，需要改对应的参数：

进入到主界面后是如下内容：

软件的使用这里也不过多介绍，可以参考网上其他大佬教程视频。这里给出一个简单的布局图，如下：

上面的布局没有做其他参数的修改，但是添加了事件，这样在点击【运行】按钮时可以预览效果，事件的添加如下：

下面是“加按钮”的事件添加，“减按钮”相同，只是value那里设置为-1。

下面是对Slider添加事件，事件类型是【VALUE_CHANGED】, 动作是【SET TEXT VALUE FROM SLIDER】，表示slider的值变了后，要将值显示到Label1上。

点击【运行】按钮可以预览效果如下，单击加按钮和减按钮，上面的字符会显示当前滑动条值。

到这里，SquareLine的界面算是完成了。

1.2 导出工程

保存工程后，开始对该界面做工程导出。点击菜单栏的【Export】 - 【Create Template Project】，然后选择导出工程的位置即可，

在Console的界面可以看到有Export Successed表示导出成功了。

导出的目录层次结构大概如下,其中标红加粗的部分是后面适配需要修改的部分：

二、对Arduino工程部分做esp8266屏幕适配

2.1 修改步骤

第一步：先找到ino后缀的Arduino工程文件，双击打开工程，需要设置下【首选项】的项目文件夹地址，改为我们导出工程所在的目录：

开发板选择NodeMcu：

关于如何搭建esp8266的Arduino开发环境可参考：

ESP8266的Arduino开发环境搭建（多图）_esp8266开发教程-CSDN博客文章浏览阅读1k次，点赞9次，收藏21次。ESP8266的Arduino开发环境搭建过程分享_esp8266开发教程https://blog.csdn.net/Ang_ie/article/details/144503303

 

---

第二步：依次修改下面文件代码部分

• User_Setup_Select.h

在头文件第47行左右，将下面代码注释去掉，使用Setup18_ST7789.h头文件：

//#include <User_Setups/Setup16_ILI9488_Parallel.h>  // Setup file for the ESP32 with parallel bus TFT
//#include <User_Setups/Setup17_ePaper.h>            // Setup file for ESP8266 and any Waveshare ePaper display
#include <User_Setups/Setup18_ST7789.h>            // Setup file for ESP8266 configured for ST7789

• User_Setup.h

在第40~60行左右，将ILI9341_DRIVER驱动注释，这里选用ST7789_DRIVER驱动：

// Only define one driver, the other ones must be commented out
//#define ILI9341_DRIVER // Generic driver for common displays
//#define ILI9341_2_DRIVER // Alternative ILI9341 driver, see https://github.com/Bodmer/TFT_eSPI/issues/1172
... ...
//#define ILI9488_DRIVER // WARNING: Do not connect ILI9488 display SDO to MISO if other devices share the SPI bus (TFT SDO does NOT tristate when CS is high)
#define ST7789_DRIVER // Full configuration option, define additional parameters below for this display

在第83~93行左右，选择WIDTH和HEIGHT的值为240的宏放开，这里表示分辨率240*240：

// For ST7789, ST7735, ILI9163 and GC9A01 ONLY, define the pixel width and height in portrait orientation
// #define TFT_WIDTH 80
// #define TFT_WIDTH 128
// #define TFT_WIDTH 172 // ST7789 172 x 320
// #define TFT_WIDTH 170 // ST7789 170 x 320
#define TFT_WIDTH 240 // ST7789 240 x 240 and 240 x 320
// #define TFT_HEIGHT 160
// #define TFT_HEIGHT 128
#define TFT_HEIGHT 240 // ST7789 240 x 240
// #define TFT_HEIGHT 320 // ST7789 240 x 320
// #define TFT_HEIGHT 240 // GC9A01 240 x 240

---

第三步：下载测试

这里的引脚连接图如下：

nodeMcu引脚号	ESP8266-12F的IO引脚	屏幕引脚
D5	14	SCL
D7	13	SDA
D4	2	RES
D3	0	DC
VCC	VCC	BLK（背光）

下载后可以看到屏幕部分：

2.2 可能的问题

2.2.1 屏幕颜色不对

有时候可能屏幕的呈现颜色和SquareLine中看到的颜色不一样，可能需要设置下面文件代码部分：

User_Setup_Select.h （173-174行左右）

// Identical looking TFT displays may have a different colour ordering in the 16-bit colour
#define TFT_BGR 0 // Colour order Blue-Green-Red
#define TFT_RGB 1 // Colour order Red-Green-Blue

User_Setup.h (76~77行左右)

// #define TFT_RGB_ORDER TFT_RGB // Colour order Red-Green-Blue
// #define TFT_RGB_ORDER TFT_BGR // Colour order Blue-Green-Red

lv_conf.h （26-29行左右）

/*Color depth: 8 (A8), 16 (RGB565), 24 (RGB888), 32 (XRGB8888)*/
#define LV_COLOR_DEPTH 16 //16
#define LV_COLOR_16_SWAP 0 //(LV_COLOR_16_SWAP is abandoned by LVGL9, but lv_draw_sw_rgb565_swap() is added to display flush function)

另外在对应的驱动头文件里修改也是可以的，例如这里的User_Setups/Setup18_ST7789.h也有BGR和RGB宏选项。

2.2.2 如何修改引脚

User_Setups/Setup18_ST7789.h (22-23行左右)

// For NodeMCU - use pin numbers in the form PIN_Dx where Dx is the NodeMCU pin designation
#define TFT_DC PIN_D3 // Data Command control pin
#define TFT_RST PIN_D4 // Reset pin (could connect to NodeMCU RST, see next line)

其中其他的SDA和SCL无法定义，固定使用IO13和IO14，因为使用的esp8266的硬件SPI功能，对应的是HSPI_HOSI和HSPI_CLK。