Wemos D1 Mini / nodeMcu / esp8266 + GUIslice库 驱动ST7789 TFT显示屏

GUIslice是一个轻量级的嵌入式端GUI开发框架。本文介绍了如何通过这个框架快速便捷对ESP8266/wemos D1 MINI/nodeMCU进行GUI开发。

所需硬件

---

• Wemos D1 Mini / nodeMCU * 1块
  
• ST7789 240*240 spi TFT显示屏 *1块
  （1.3还是1.5的都可以，只要看像素大小）
  
• 杜邦线 *6根
  根据你的引脚焊接情况一般WemosD1Mini用6根公母线，nodeMCU用6根目目线，10cm长的就足够了）

硬件连接

---

按照TFT_eSPI官方配置文件中的建议进行的硬件连接，这样配置文件中引脚设置的部分就不用做过多改动了。

引脚连接表

TFT显示屏	nodeMcu / WemosD1Mini
SCK	D5
SDI/MOSI/SDA	D7
DC	D3
RESET	D4
GND	GND
VCC	3.3V

引脚连接图

STEP0: 配置文件结构思维导图

---

如下图所示，Adafruit_st7789_library 和TFT_eSPI都是ST7789芯片的驱动库。但是后者针对ESP8266/ESP32做了优化，速度快特别多。GUIslice是一个针对显示屏做GUI（用户界面）开发的轻量级框架，配有GUIBuilder.exe应用，快速通过拖拽的方式创建GUI，并修改参数值和变量。意见生成ino代码。非常方便。GUIslice官方文档中强烈建议使用TFT_eSPI库。使用TFT_eSPI库的时候需要在User_Setup.h文件中对显示芯片和引脚进行设定。GUIslice特定的文件可以直接调用这个修改后的配置。所以在使用GUIslice前保证TFT_eSPI例程可以顺利跑通是非常关键的一步。如果TFT_eSPI调试好了。在使用GUIslice时只要根据具体触摸和显示芯片型号选择官方给预置的相应头文件就好。

STEP1: TFT_eSPI库的安装和配置

因为GUIslice库依赖TFT_eSPI库，而且很多配置也是在TFT_eSPI中配置完成的（比如引脚定义，屏幕尺寸，显示芯片型号等)。所以在调试GUIslcie前需要先确认可以用TFT_eSPI库正确驱动ST7789显示屏。主要是对User_Setup.h文件的修改。分为两步：

• 配置正确的显示器控制芯片
• 根据硬件连接配置引脚

具体操作详见博主下面的这篇帖子：
ESP8266/ESP32/nodeMcu/wemos D1 MINI开发板用TFT_eSPI库驱动ST7789（240*240）TFT显示屏

STEP2: GUIslice配置文件设置

---

• 经过上步，已经实现在ST7789上显示相关的内容了。接下来为了使用GUIslice需要对其配置文件进行修改。使其可以支持ST7789。本文选用的这块TFT显示屏并不带触摸功能，所以根据STEP0思维导图演示的结构，我们选用esp-tftespi-default-notouch.h这个配置文件。在"/src/GUIslice_config.h"中#include "../configs/esp-tftespi-default-notouch.h"前的注释去掉。
  
• 可以通过如下的方式定位到GUIslice_config.h。在ArduinoIDE的菜单栏打开首选项页面，复制项目文件夹的路径到文件管理器中打开。
  
  重要提示: 更新GUIslice库的时候确保已经备份了你的用户设置，因为Arduino IDE在做相关库版本更新操作的时候默认是将之前版本的文件全部删除处理的。
  想了解更多细节可以参考博主翻译的官方文档：
  Esp8266 / nodeMCU / wemos D1 MINI GUIslice的配置（官翻）

STEP3: 使用例程进行测试

---

• 在Arduini IDE中，打开ex01_ard_basic例程。操作方式为：
  File → Examples → GUIslice → arduino → ex01_ard_basic

• 打开Arduino IDE中的窗口调试器:
  Tools → Serial Monitor

• 将串口波特率改为9600（在窗口的右下角），这个波特率时GUIslice例程默认使用的波特率（可以通过搜索Serial.begin(9600);来进行查找）。如果设置的波特率有例程使用的波特率不匹配，串口监视器中收到的信息将会是乱码。

• 因为本例程使用的硬件是ST7789的240*240像素的TFT显示屏，为了更好的显示效果。将ex01_ard_basic例程中的下面这句代码的参数做如下修改：

  pElemRef = gslc_ElemCreateBox(&m_gui,E_ELEM_BOX,E_PG_MAIN,(gslc_tsRect){20,20,200,200});

  （这句代码的意思是在显示屏上(20，20)这个坐标点为基准画个长和宽均为200的正方形。因为显示屏本身为240*240。所以显示出来后是一个距四条边均为20像素的正方形。）

• 上传程序到开发板。

• 观察串口监视器中的报错信息，确认显示器是否如下图所示。
  

参考文献

---

1. Request: Support for ST7789v Display Driver #163
2. 兼容硬件列表: https://github.com/ImpulseAdventure/GUIslice/wiki/Device-Compatibility
3. 官方Esp8266&ESP32配置英文教程： https://github.com/ImpulseAdventure/GUIslice/wiki/Configure-GUIslice-for-ESP8266-&-ESP32
4. 官方建议强烈建议的TFT_eSPI库下载地址： https://github.com/Bodmer/TFT_eSPI