esp8266應(yīng)用教程——TFT LCD顯示

esp8266雖然硬件資源比較少，但是用它驅(qū)動(dòng)LCD并做一些簡(jiǎn)單的應(yīng)用還是可以的。

本文介紹的軟件開(kāi)發(fā)基于Arduino，esp8266開(kāi)發(fā)的方式有很多，對(duì)于功能較為簡(jiǎn)單的項(xiàng)目或者前期方案驗(yàn)證，用Arduino是最簡(jiǎn)單最直接的。

1 硬件介紹

本文的硬件配置如下：

1.1 模塊介紹

ESP8266我用的是安信可的開(kāi)發(fā)板（NodeMCU-12F CH340版本），具體的硬件參數(shù)和電路原理圖這里就不發(fā)出來(lái)了，不同的板子引腳可能會(huì)有差別。

TFT LCD彩屏不管用的是什么驅(qū)動(dòng)IC，硬件上基本都是一樣的，通訊方式常用的是SPI、并口、IIC等，并口有4線、8線和16線，并口速度是最快的，但需要的引腳資源也多，SPI占用的硬件資源較少，速度也還可以，通訊速度一般可達(dá)20M，主要看驅(qū)動(dòng)IC，有些驅(qū)動(dòng)IC最大只能支持27M。

我用的LCD屏分辨率是240x240的，驅(qū)動(dòng)IC用的是ST7789，ST7789的通訊方式有兩種，SPI和并口，并口要用到的IO口比較多，所以如果對(duì)速度要求不是非常高的情況下一般都是選用SPI。

下面這是我在某寶買(mǎi)的屏幕，它把SPI接口和并口都引出來(lái)了，不過(guò)默認(rèn)使用的并口，我這里要用的SPI，就需要把背面的R5電阻拆掉放到R4的位置。

1.2 硬件連接

特別說(shuō)明：不同廠家做的LCD對(duì)這幾個(gè)引腳的命名可能會(huì)有差異，但意思是一樣的。

2 軟件開(kāi)發(fā)

2.1 安裝開(kāi)發(fā)板

關(guān)于ESP8266 Arduino的環(huán)境搭建我之前出過(guò)教程了，這里就不多說(shuō)了，不懂的同學(xué)可以先看下我之前的博客。

esp8266開(kāi)發(fā)入門(mén)教程(基于Arduino)——環(huán)境安裝

2.2 安裝庫(kù)

打開(kāi)Arduino IDE，依次打開(kāi) 工具 -> 管理庫(kù)…

在搜索框輸入需要安裝的庫(kù)名稱(chēng)，找到對(duì)應(yīng)的庫(kù)，點(diǎn)擊安裝即可。

本文需要使用的Arduino庫(kù)如下：

關(guān)于LCD驅(qū)動(dòng)的庫(kù)其實(shí)有很多，之所以用TFT_eSPI是因?yàn)檫@個(gè)庫(kù)比較通用，支持很多驅(qū)動(dòng)IC，而且有些圖形庫(kù)也依賴(lài)于這個(gè)庫(kù)。不過(guò)這個(gè)庫(kù)也有缺點(diǎn)，就是有些配置只能在底層定義不能在應(yīng)用層修改，這樣一來(lái)比如我有多個(gè)不同的MCU或者屏幕，我不能隨意的切換，因?yàn)槊看吻袚Q的時(shí)候都得改一遍底層。

題外話：ST7789也有專(zhuān)門(mén)的驅(qū)動(dòng)庫(kù)，也是可以使用，也包含有圖片顯示的函數(shù)，但是呢因?yàn)槲液竺孢€要用這個(gè)屏幕做gif的顯示，gif的那個(gè)庫(kù)有個(gè)比較重要的函數(shù)是依賴(lài)于TFT_eSPI庫(kù)的，如果不用TFT_eSPI庫(kù)，那我還要自己改一個(gè)函數(shù)來(lái)替代，因?yàn)樗@個(gè)框架已經(jīng)定好了，我自己去改的話還要去動(dòng)框架里面的東西，估計(jì)會(huì)比較費(fèi)時(shí)間，暫時(shí)就先不搞了。

2.3 修改TFT_eSPI庫(kù)基礎(chǔ)配置

安裝好TFT_eSPI庫(kù)之后需要根據(jù)自己電路實(shí)際的情況配置底層接口。

Arduino安裝的庫(kù)一般在C盤(pán)文檔目錄下，如：C:UsersxxxDocumentsArduinolibraries （xxx是你電腦的用戶名）

找到TFT_eSPI文件夾，打開(kāi)User_Setup.h文件，修改以下幾項(xiàng)參數(shù)。

我最后修改好的User_Setup.h會(huì)完整的貼在后面。如果你的硬件方案跟我的一樣可以直接拷貝過(guò)去。

1）驅(qū)動(dòng)IC
根據(jù)自己使用的LCD驅(qū)動(dòng)IC打開(kāi)對(duì)應(yīng)的宏。注意這些驅(qū)動(dòng)只能選擇一個(gè)打開(kāi)，不用的要注釋掉。

2）RGB數(shù)據(jù)格式
RGB格式指的是像素點(diǎn)顏色數(shù)據(jù)的排列方式，一般就BGR和RGB兩種，區(qū)別其實(shí)就是數(shù)據(jù)高位在前還是低位在前，這個(gè)主要是用于圖片顯示，要用哪種格式主要是看你要顯示的內(nèi)容是怎么排的，不確定的話可以先不改，調(diào)試的時(shí)候如果顏色不對(duì)的話再換過(guò)來(lái)就好了。

3）像素
根據(jù)自己屏幕的像素修改，也可以先不改，直接在后面應(yīng)用的時(shí)候再改。

4）GPIO
根據(jù)自己的電路設(shè)置引腳，除了幾個(gè)必要的引腳，有些引腳可以不配置，如：RST可以通過(guò)硬件和MCU的RST接到一起，軟件配置成-1即可。BL背光也可以硬件直接控制。

還有像ESP8266也可以不自定義SPI的幾個(gè)引腳，它默認(rèn)用的就是ESP8266硬件SPI的接口，你的接線保持一致即可。

注意：相同的GPIO定義只能打開(kāi)一個(gè)，默認(rèn)有些打開(kāi)了的要注釋掉。

5）字庫(kù)
TFT_eSPI自帶的這些字庫(kù)你可以直接用，如果你有自己的字庫(kù)不用這里的話也可以注釋掉。flash空間足夠的情況下，這點(diǎn)代碼加不加都沒(méi)關(guān)系。

6）SPI通訊速率
SPI通訊速率一般默認(rèn)即可，默認(rèn)的這個(gè)速率一般是足夠了的，如果需要更快的話可以自己修改。

完整的User_Setup.h示例：

//                            USER DEFINED SETTINGS
//   Set driver type, fonts to be loaded, pins used and SPI control method etc
//
//   See the User_Setup_Select.h file if you wish to be able to define multiple
//   setups and then easily select which setup file is used by the compiler.
//
//   If this file is edited correctly then all the library example sketches should
//   run without the need to make any more changes for a particular hardware setup!
//   Note that some sketches are designed for a particular TFT pixel width/height


// ##################################################################################
//
// Section 1. Call up the right driver file and any options for it
//
// ##################################################################################

// Define STM32 to invoke optimised processor support (only for STM32)
//#define STM32

// Defining the STM32 board allows the library to optimise the performance
// for UNO compatible "MCUfriend" style shields
//#define NUCLEO_64_TFT
//#define NUCLEO_144_TFT

// STM32 8 bit parallel only:
// If STN32 Port A or B pins 0-7 are used for 8 bit parallel data bus bits 0-7
// then this will improve rendering performance by a factor of ~8x
//#define STM_PORTA_DATA_BUS
//#define STM_PORTB_DATA_BUS

// Tell the library to use 8 bit parallel mode (otherwise SPI is assumed)
//#define TFT_PARALLEL_8_BIT

// Display type -  only define if RPi display
//#define RPI_DISPLAY_TYPE // 20MHz maximum SPI

// 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 ST7735_DRIVER      // Define additional parameters below for this display
//#define ILI9163_DRIVER     // Define additional parameters below for this display
//#define S6D02A1_DRIVER
//#define RPI_ILI9486_DRIVER // 20MHz maximum SPI
//#define HX8357D_DRIVER
//#define ILI9481_DRIVER
//#define ILI9486_DRIVER
//#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
//#define ST7789_2_DRIVER    // Minimal configuration option, define additional parameters below for this display
//#define R61581_DRIVER
//#define RM68140_DRIVER
//#define ST7796_DRIVER
//#define SSD1351_DRIVER
//#define SSD1963_480_DRIVER
//#define SSD1963_800_DRIVER
//#define SSD1963_800ALT_DRIVER
//#define ILI9225_DRIVER
//#define GC9A01_DRIVER

// Some displays support SPI reads via the MISO pin, other displays have a single
// bi-directional SDA pin and the library will try to read this via the MOSI line.
// To use the SDA line for reading data from the TFT uncomment the following line:

// #define TFT_SDA_READ      // This option is for ESP32 ONLY, tested with ST7789 and GC9A01 display only

// For ST7735, ST7789 and ILI9341 ONLY, define the colour order IF the blue and red are swapped on your display
// Try ONE option at a time to find the correct colour order for your display

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

// For M5Stack ESP32 module with integrated ILI9341 display ONLY, remove // in line below

// #define M5STACK

// 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  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

// For ST7735 ONLY, define the type of display, originally this was based on the
// colour of the tab on the screen protector film but this is not always true, so try
// out the different options below if the screen does not display graphics correctly,
// e.g. colours wrong, mirror images, or stray pixels at the edges.
// Comment out ALL BUT ONE of these options for a ST7735 display driver, save this
// this User_Setup file, then rebuild and upload the sketch to the board again:

// #define ST7735_INITB
// #define ST7735_GREENTAB
// #define ST7735_GREENTAB2
// #define ST7735_GREENTAB3
// #define ST7735_GREENTAB128    // For 128 x 128 display
// #define ST7735_GREENTAB160x80 // For 160 x 80 display (BGR, inverted, 26 offset)
// #define ST7735_REDTAB
// #define ST7735_BLACKTAB
// #define ST7735_REDTAB160x80   // For 160 x 80 display with 24 pixel offset

// If colours are inverted (white shows as black) then uncomment one of the next
// 2 lines try both options, one of the options should correct the inversion.

// #define TFT_INVERSION_ON
// #define TFT_INVERSION_OFF


// ##################################################################################
//
// Section 2. Define the pins that are used to interface with the display here
//
// ##################################################################################

// If a backlight control signal is available then define the TFT_BL pin in Section 2
// below. The backlight will be turned ON when tft.begin() is called, but the library
// needs to know if the LEDs are ON with the pin HIGH or LOW. If the LEDs are to be
// driven with a PWM signal or turned OFF/ON then this must be handled by the user
// sketch. e.g. with digitalWrite(TFT_BL, LOW);

// #define TFT_BL   32            // LED back-light control pin
// #define TFT_BACKLIGHT_ON HIGH  // Level to turn ON back-light (HIGH or LOW)



// We must use hardware SPI, a minimum of 3 GPIO pins is needed.
// Typical setup for ESP8266 NodeMCU ESP-12 is :
//
// Display SDO/MISO  to NodeMCU pin D6 (or leave disconnected if not reading TFT)
// Display LED       to NodeMCU pin VIN (or 5V, see below)
// Display SCK       to NodeMCU pin D5
// Display SDI/MOSI  to NodeMCU pin D7
// Display DC (RS/AO)to NodeMCU pin D3
// Display RESET     to NodeMCU pin D4 (or RST, see below)
// Display CS        to NodeMCU pin D8 (or GND, see below)
// Display GND       to NodeMCU pin GND (0V)
// Display VCC       to NodeMCU 5V or 3.3V
//
// The TFT RESET pin can be connected to the NodeMCU RST pin or 3.3V to free up a control pin
//
// The DC (Data Command) pin may be labelled AO or RS (Register Select)
//
// With some displays such as the ILI9341 the TFT CS pin can be connected to GND if no more
// SPI devices (e.g. an SD Card) are connected, in this case comment out the #define TFT_CS
// line below so it is NOT defined. Other displays such at the ST7735 require the TFT CS pin
// to be toggled during setup, so in these cases the TFT_CS line must be defined and connected.
//
// The NodeMCU D0 pin can be used for RST
//
//
// Note: only some versions of the NodeMCU provide the USB 5V on the VIN pin
// If 5V is not available at a pin you can use 3.3V but backlight brightness
// will be lower.


// ###### EDIT THE PIN NUMBERS IN THE LINES FOLLOWING TO SUIT YOUR ESP8266 SETUP ######

// For NodeMCU - use pin numbers in the form PIN_Dx where Dx is the NodeMCU pin designation
// #define TFT_CS   PIN_D8  // Chip select control pin D8
// #define TFT_DC   PIN_D3  // Data Command control pin
// #define TFT_RST  PIN_D4  // Reset pin (could connect to NodeMCU RST, see next line)
//#define TFT_RST  -1    // Set TFT_RST to -1 if the display RESET is connected to NodeMCU RST or 3.3V

//#define TFT_BL PIN_D1  // LED back-light (only for ST7789 with backlight control pin)

//#define TOUCH_CS PIN_D2     // Chip select pin (T_CS) of touch screen

//#define TFT_WR PIN_D2       // Write strobe for modified Raspberry Pi TFT only


// ######  FOR ESP8266 OVERLAP MODE EDIT THE PIN NUMBERS IN THE FOLLOWING LINES  ######

// Overlap mode shares the ESP8266 FLASH SPI bus with the TFT so has a performance impact
// but saves pins for other functions. It is best not to connect MISO as some displays
// do not tristate that line when chip select is high!
// Note: Only one SPI device can share the FLASH SPI lines, so a SPI touch controller
// cannot be connected as well to the same SPI signals.
// On NodeMCU 1.0 SD0=MISO, SD1=MOSI, CLK=SCLK to connect to TFT in overlap mode
// On NodeMCU V3  S0 =MISO, S1 =MOSI, S2 =SCLK
// In ESP8266 overlap mode the following must be defined

//#define TFT_SPI_OVERLAP

// In ESP8266 overlap mode the TFT chip select MUST connect to pin D3
//#define TFT_CS   PIN_D3
//#define TFT_DC   PIN_D5  // Data Command control pin
//#define TFT_RST  PIN_D4  // Reset pin (could connect to NodeMCU RST, see next line)
//#define TFT_RST  -1  // Set TFT_RST to -1 if the display RESET is connected to NodeMCU RST or 3.3V

#define TFT_MISO 12
#define TFT_MOSI 13
#define TFT_SCLK 14
#define TFT_CS   4
#define TFT_DC   5  // Data Command control pin
#define TFT_RST  -1  // Set TFT_RST to -1 if the display RESET is connected to NodeMCU RST or 3.3V

// ###### EDIT THE PIN NUMBERS IN THE LINES FOLLOWING TO SUIT YOUR ESP32 SETUP   ######

// For ESP32 Dev board (only tested with ILI9341 display)
// The hardware SPI can be mapped to any pins

//#define TFT_MISO 19
//#define TFT_MOSI 23
//#define TFT_SCLK 18
//#define TFT_CS   15  // Chip select control pin
//#define TFT_DC    2  // Data Command control pin
//#define TFT_RST   4  // Reset pin (could connect to RST pin)
//#define TFT_RST  -1  // Set TFT_RST to -1 if display RESET is connected to ESP32 board RST

// For ESP32 Dev board (only tested with GC9A01 display)
// The hardware SPI can be mapped to any pins

//#define TFT_MOSI 15 // In some display driver board, it might be written as "SDA" and so on.
//#define TFT_SCLK 14
//#define TFT_CS   5  // Chip select control pin
//#define TFT_DC   27  // Data Command control pin
//#define TFT_RST  33  // Reset pin (could connect to Arduino RESET pin)
//#define TFT_BL   22  // LED back-light

//#define TOUCH_CS 21     // Chip select pin (T_CS) of touch screen

//#define TFT_WR 22    // Write strobe for modified Raspberry Pi TFT only

// For the M5Stack module use these #define lines
//#define TFT_MISO 19
//#define TFT_MOSI 23
//#define TFT_SCLK 18
//#define TFT_CS   14  // Chip select control pin
//#define TFT_DC   27  // Data Command control pin
//#define TFT_RST  33  // Reset pin (could connect to Arduino RESET pin)
//#define TFT_BL   32  // LED back-light (required for M5Stack)

// ######       EDIT THE PINs BELOW TO SUIT YOUR ESP32 PARALLEL TFT SETUP        ######

// The library supports 8 bit parallel TFTs with the ESP32, the pin
// selection below is compatible with ESP32 boards in UNO format.
// Wemos D32 boards need to be modified, see diagram in Tools folder.
// Only ILI9481 and ILI9341 based displays have been tested!

// Parallel bus is only supported for the STM32 and ESP32
// Example below is for ESP32 Parallel interface with UNO displays

// Tell the library to use 8 bit parallel mode (otherwise SPI is assumed)
//#define TFT_PARALLEL_8_BIT

// The ESP32 and TFT the pins used for testing are:
//#define TFT_CS   33  // Chip select control pin (library pulls permanently low
//#define TFT_DC   15  // Data Command control pin - must use a pin in the range 0-31
//#define TFT_RST  32  // Reset pin, toggles on startup

//#define TFT_WR    4  // Write strobe control pin - must use a pin in the range 0-31
//#define TFT_RD    2  // Read strobe control pin

//#define TFT_D0   12  // Must use pins in the range 0-31 for the data bus
//#define TFT_D1   13  // so a single register write sets/clears all bits.
//#define TFT_D2   26  // Pins can be randomly assigned, this does not affect
//#define TFT_D3   25  // TFT screen update performance.
//#define TFT_D4   17
//#define TFT_D5   16
//#define TFT_D6   27
//#define TFT_D7   14

// ######       EDIT THE PINs BELOW TO SUIT YOUR STM32 SPI TFT SETUP        ######

// The TFT can be connected to SPI port 1 or 2
//#define TFT_SPI_PORT 1 // SPI port 1 maximum clock rate is 55MHz
//#define TFT_MOSI PA7
//#define TFT_MISO PA6
//#define TFT_SCLK PA5

//#define TFT_SPI_PORT 2 // SPI port 2 maximum clock rate is 27MHz
//#define TFT_MOSI PB15
//#define TFT_MISO PB14
//#define TFT_SCLK PB13

// Can use Ardiuno pin references, arbitrary allocation, TFT_eSPI controls chip select
//#define TFT_CS   D5 // Chip select control pin to TFT CS
//#define TFT_DC   D6 // Data Command control pin to TFT DC (may be labelled RS = Register Select)
//#define TFT_RST  D7 // Reset pin to TFT RST (or RESET)
// OR alternatively, we can use STM32 port reference names PXnn
//#define TFT_CS   PE11 // Nucleo-F767ZI equivalent of D5
//#define TFT_DC   PE9  // Nucleo-F767ZI equivalent of D6
//#define TFT_RST  PF13 // Nucleo-F767ZI equivalent of D7

//#define TFT_RST  -1   // Set TFT_RST to -1 if the display RESET is connected to processor reset
                        // Use an Arduino pin for initial testing as connecting to processor reset
                        // may not work (pulse too short at power up?)

// ##################################################################################
//
// Section 3. Define the fonts that are to be used here
//
// ##################################################################################

// Comment out the #defines below with // to stop that font being loaded
// The ESP8366 and ESP32 have plenty of memory so commenting out fonts is not
// normally necessary. If all fonts are loaded the extra FLASH space required is
// about 17Kbytes. To save FLASH space only enable the fonts you need!

#define LOAD_GLCD   // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_FONT2  // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT4  // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT6  // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT7  // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8  // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
//#define LOAD_FONT8N // Font 8. Alternative to Font 8 above, slightly narrower, so 3 digits fit a 160 pixel TFT
#define LOAD_GFXFF  // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts

// Comment out the #define below to stop the SPIFFS filing system and smooth font code being loaded
// this will save ~20kbytes of FLASH
#define SMOOTH_FONT


// ##################################################################################
//
// Section 4. Other options
//
// ##################################################################################

// For the RP2040 processor define the SPI port channel used (default 0 if undefined)
//#define TFT_SPI_PORT 1 // Set to 0 if SPI0 pins are used, or 1 if spi1 pins used

// For the STM32 processor define the SPI port channel used (default 1 if undefined)
//#define TFT_SPI_PORT 2 // Set to 1 for SPI port 1, or 2 for SPI port 2

// Define the SPI clock frequency, this affects the graphics rendering speed. Too
// fast and the TFT driver will not keep up and display corruption appears.
// With an ILI9341 display 40MHz works OK, 80MHz sometimes fails
// With a ST7735 display more than 27MHz may not work (spurious pixels and lines)
// With an ILI9163 display 27 MHz works OK.

// #define SPI_FREQUENCY   1000000
// #define SPI_FREQUENCY   5000000
// #define SPI_FREQUENCY  10000000
// #define SPI_FREQUENCY  20000000
#define SPI_FREQUENCY  27000000
// #define SPI_FREQUENCY  40000000
// #define SPI_FREQUENCY  55000000 // STM32 SPI1 only (SPI2 maximum is 27MHz)
// #define SPI_FREQUENCY  80000000

// Optional reduced SPI frequency for reading TFT
#define SPI_READ_FREQUENCY  20000000

// The XPT2046 requires a lower SPI clock rate of 2.5MHz so we define that here:
#define SPI_TOUCH_FREQUENCY  2500000

// The ESP32 has 2 free SPI ports i.e. VSPI and HSPI, the VSPI is the default.
// If the VSPI port is in use and pins are not accessible (e.g. TTGO T-Beam)
// then uncomment the following line:
//#define USE_HSPI_PORT

// Comment out the following #define if "SPI Transactions" do not need to be
// supported. When commented out the code size will be smaller and sketches will
// run slightly faster, so leave it commented out unless you need it!

// Transaction support is needed to work with SD library but not needed with TFT_SdFat
// Transaction support is required if other SPI devices are connected.

// Transactions are automatically enabled by the library for an ESP32 (to use HAL mutex)
// so changing it here has no effect

// #define SUPPORT_TRANSACTIONS

2.4 創(chuàng)建項(xiàng)目并編寫(xiě)應(yīng)用程序

使用Arduino IDE新建一個(gè)項(xiàng)目，并編寫(xiě)代碼。

示例代碼如下：

該代碼利用圖形庫(kù)繪制了一些線條和圖案，這一講主要先測(cè)試一下LCD驅(qū)動(dòng)，下一講我會(huì)介紹圖片的顯示。

#include <SPI.h>
#include <TFT_eSPI.h>
#include <Adafruit_GFX.h>

float p = 3.1415926;

// TFT_eSPI tft = TFT_eSPI(240, 240);
TFT_eSPI tft = TFT_eSPI(); 

void setup() 
{
  Serial.begin(115200);

  tft.begin();

  tft.setRotation(0);

  tft.fillScreen(TFT_BLACK);

  // large block of text
  tft.fillScreen(TFT_BLACK);
  testdrawtext("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur adipiscing ante sed nibh tincidunt feugiat. Maecenas enim massa, fringilla sed malesuada et, malesuada sit amet turpis. Sed porttitor neque ut ante pretium vitae malesuada nunc bibendum. Nullam aliquet ultrices massa eu hendrerit. Ut sed nisi lorem. In vestibulum purus a tortor imperdiet posuere. ", TFT_WHITE);
  delay(1000);

  // tft print function!
  tftPrintTest();
  delay(4000);

  // a single pixel
  tft.drawPixel(tft.width()/2, tft.height()/2, TFT_GREEN);
  delay(500);

  // line draw test
  testlines(TFT_YELLOW);
  delay(500);

  // optimized lines
  testfastlines(TFT_RED, TFT_BLUE);
  delay(500);

  testdrawrects(TFT_GREEN);
  delay(500);

  testfillrects(TFT_YELLOW, TFT_MAGENTA);
  delay(500);

  tft.fillScreen(TFT_BLACK);
  testfillcircles(10, TFT_BLUE);
  testdrawcircles(10, TFT_WHITE);
  delay(500);

  testroundrects();
  delay(500);

  testtriangles();
  delay(500);

  mediabuttons();
  delay(500);
}

void loop()
{
  // tft.fillScreen(TFT_WHITE);
  // Serial.printf("testn");
  // delay(1000);
}

void testlines(uint16_t color) {
  tft.fillScreen(TFT_BLACK);
  for (int16_t x=0; x < tft.width(); x+=6) {
    tft.drawLine(0, 0, x, tft.height()-1, color);
    delay(0);
  }
  for (int16_t y=0; y < tft.height(); y+=6) {
    tft.drawLine(0, 0, tft.width()-1, y, color);
    delay(0);
  }

  tft.fillScreen(TFT_BLACK);
  for (int16_t x=0; x < tft.width(); x+=6) {
    tft.drawLine(tft.width()-1, 0, x, tft.height()-1, color);
    delay(0);
  }
  for (int16_t y=0; y < tft.height(); y+=6) {
    tft.drawLine(tft.width()-1, 0, 0, y, color);
    delay(0);
  }

  tft.fillScreen(TFT_BLACK);
  for (int16_t x=0; x < tft.width(); x+=6) {
    tft.drawLine(0, tft.height()-1, x, 0, color);
    delay(0);
  }
  for (int16_t y=0; y < tft.height(); y+=6) {
    tft.drawLine(0, tft.height()-1, tft.width()-1, y, color);
    delay(0);
  }

  tft.fillScreen(TFT_BLACK);
  for (int16_t x=0; x < tft.width(); x+=6) {
    tft.drawLine(tft.width()-1, tft.height()-1, x, 0, color);
    delay(0);
  }
  for (int16_t y=0; y < tft.height(); y+=6) {
    tft.drawLine(tft.width()-1, tft.height()-1, 0, y, color);
    delay(0);
  }
}

void testdrawtext(char *text, uint16_t color) {
  tft.setCursor(0, 0);
  tft.setTextColor(color);
  tft.setTextWrap(true);
  tft.print(text);
}

void testfastlines(uint16_t color1, uint16_t color2) {
  tft.fillScreen(TFT_BLACK);
  for (int16_t y=0; y < tft.height(); y+=5) {
    tft.drawFastHLine(0, y, tft.width(), color1);
  }
  for (int16_t x=0; x < tft.width(); x+=5) {
    tft.drawFastVLine(x, 0, tft.height(), color2);
  }
}

void testdrawrects(uint16_t color) {
  tft.fillScreen(TFT_BLACK);
  for (int16_t x=0; x < tft.width(); x+=6) {
    tft.drawRect(tft.width()/2 -x/2, tft.height()/2 -x/2 , x, x, color);
  }
}

void testfillrects(uint16_t color1, uint16_t color2) {
  tft.fillScreen(TFT_BLACK);
  for (int16_t x=tft.width()-1; x > 6; x-=6) {
    tft.fillRect(tft.width()/2 -x/2, tft.height()/2 -x/2 , x, x, color1);
    tft.drawRect(tft.width()/2 -x/2, tft.height()/2 -x/2 , x, x, color2);
  }
}

void testfillcircles(uint8_t radius, uint16_t color) {
  for (int16_t x=radius; x < tft.width(); x+=radius*2) {
    for (int16_t y=radius; y < tft.height(); y+=radius*2) {
      tft.fillCircle(x, y, radius, color);
    }
  }
}

void testdrawcircles(uint8_t radius, uint16_t color) {
  for (int16_t x=0; x < tft.width()+radius; x+=radius*2) {
    for (int16_t y=0; y < tft.height()+radius; y+=radius*2) {
      tft.drawCircle(x, y, radius, color);
    }
  }
}

void testtriangles() {
  tft.fillScreen(TFT_BLACK);
  uint16_t color = 0xF800;
  int t;
  int w = tft.width()/2;
  int x = tft.height()-1;
  int y = 0;
  int z = tft.width();
  for(t = 0 ; t <= 15; t++) {
    tft.drawTriangle(w, y, y, x, z, x, color);
    x-=4;
    y+=4;
    z-=4;
    color+=100;
  }
}

void testroundrects() {
  tft.fillScreen(TFT_BLACK);
  uint16_t color = 100;
  int i;
  int t;
  for(t = 0 ; t <= 4; t+=1) {
    int x = 0;
    int y = 0;
    int w = tft.width()-2;
    int h = tft.height()-2;
    for(i = 0 ; i <= 16; i+=1) {
      tft.drawRoundRect(x, y, w, h, 5, color);
      x+=2;
      y+=3;
      w-=4;
      h-=6;
      color+=1100;
    }
    color+=100;
  }
}

void tftPrintTest() {
  tft.setTextWrap(false);
  tft.fillScreen(TFT_BLACK);
  tft.setCursor(0, 30);
  tft.setTextColor(TFT_RED);
  tft.setTextSize(1);
  tft.println("Hello World!");
  tft.setTextColor(TFT_YELLOW);
  tft.setTextSize(2);
  tft.println("Hello World!");
  tft.setTextColor(TFT_GREEN);
  tft.setTextSize(3);
  tft.println("Hello World!");
  tft.setTextColor(TFT_BLUE);
  tft.setTextSize(4);
  tft.print(1234.567);
  delay(1500);
  tft.setCursor(0, 0);
  tft.fillScreen(TFT_BLACK);
  tft.setTextColor(TFT_WHITE);
  tft.setTextSize(0);
  tft.println("Hello World!");
  tft.setTextSize(1);
  tft.setTextColor(TFT_GREEN);
  tft.print(p, 6);
  tft.println(" Want pi?");
  tft.println(" ");
  tft.print(8675309, HEX); // print 8,675,309 out in HEX!
  tft.println(" Print HEX!");
  tft.println(" ");
  tft.setTextColor(TFT_WHITE);
  tft.println("Sketch has been");
  tft.println("running for: ");
  tft.setTextColor(TFT_MAGENTA);
  tft.print(millis() / 1000);
  tft.setTextColor(TFT_WHITE);
  tft.print(" seconds.");
}

void mediabuttons() {
  // play
  tft.fillScreen(TFT_BLACK);
  tft.fillRoundRect(25, 10, 78, 60, 8, TFT_WHITE);
  tft.fillTriangle(42, 20, 42, 60, 90, 40, TFT_RED);
  delay(500);
  // pause
  tft.fillRoundRect(25, 90, 78, 60, 8, TFT_WHITE);
  tft.fillRoundRect(39, 98, 20, 45, 5, TFT_GREEN);
  tft.fillRoundRect(69, 98, 20, 45, 5, TFT_GREEN);
  delay(500);
  // play color
  tft.fillTriangle(42, 20, 42, 60, 90, 40, TFT_BLUE);
  delay(50);
  // pause color
  tft.fillRoundRect(39, 98, 20, 45, 5, TFT_RED);
  tft.fillRoundRect(69, 98, 20, 45, 5, TFT_RED);
  // play color
  tft.fillTriangle(42, 20, 42, 60, 90, 40, TFT_GREEN);
}

3 測(cè)試驗(yàn)證

手機(jī)拍攝LCD屏幕顏色有失真太嚴(yán)重了，拍不出原來(lái)的效果，將就著看吧。

這個(gè)示例包含了文本顯示（不同字號(hào)的文本），畫(huà)點(diǎn)，畫(huà)線，畫(huà)矩形，畫(huà)圓，畫(huà)三角形等等。

4 常用API介紹

TFT_eSPI 庫(kù)里面的函數(shù)太多了，我選一部分簡(jiǎn)單介紹一下，其他的函數(shù)感興趣的同學(xué)可以去看下源碼，很多函數(shù)都有注釋?zhuān)词共豢醋⑨屩豢春瘮?shù)名和變量名其實(shí)也能理解，可讀性還是很強(qiáng)的。

5 開(kāi)發(fā)中遇到的一些問(wèn)題

5.1 沒(méi)有顯示

供電是正常的，背光也是亮的，就是沒(méi)顯示，一開(kāi)始我以為是接線問(wèn)題，檢查了幾遍都沒(méi)發(fā)現(xiàn)問(wèn)題，后來(lái)才發(fā)現(xiàn)是我的顯示屏硬件有問(wèn)題，買(mǎi)回來(lái)的這個(gè)屏是可選并口通訊或者SPI通訊的，默認(rèn)是并口，需要改一個(gè)電阻的位置才能切換到SPI模式，改了之后就OK了。

建議：這個(gè)代碼比較簡(jiǎn)單，很多都是直接調(diào)用庫(kù)函數(shù)的，所以沒(méi)有顯示的話，大概率是引腳配置或者接線的問(wèn)題。如果懷疑代碼有問(wèn)題的話可以在loop函數(shù)里面定時(shí)調(diào)用串口打印和刷屏函數(shù)（不要刷黑色，黑色看不出的，換一個(gè)顯眼的顏色），串口打印可以驗(yàn)證代碼是否跑起來(lái)了，也可以驗(yàn)證時(shí)鐘是否正確，因?yàn)槲揖陀龅竭^(guò)一種情況，硬件用的是40M的晶振，然后我選的那個(gè)開(kāi)發(fā)板默認(rèn)配置是26M的，結(jié)果就是串口的波特率，延時(shí)什么的都不對(duì)，這個(gè)是會(huì)影響SPI的時(shí)序的。串口如果是正常的話就檢查引腳和接線。

5.2 顯示不全

特別說(shuō)明：這是一個(gè)只出現(xiàn)在某個(gè)240x240屏幕的奇怪問(wèn)題及解決法辦法

同樣是240x240的分辨率，同樣是ST7789的驅(qū)動(dòng)IC，但是屏幕是不同的廠家做的，尺寸也不同，我博客這里介紹的是1.3寸的屏幕，顯示正常，但是用我公司某個(gè)項(xiàng)目的屏幕（2.6寸），結(jié)果出現(xiàn)了一個(gè)奇怪的現(xiàn)象。

顯示時(shí)x坐標(biāo)是對(duì)的，但是y坐標(biāo)往下偏移了一些位置，比如我顯示一張240x240的圖片，結(jié)果是圖片是從顯示屏中間偏上的位置開(kāi)始顯示的，上面空出了一部分不能正常顯示，又因?yàn)轱@示屏尺寸有限，導(dǎo)致圖片下面一部分被截掉了。我又試了一下用其他庫(kù)，結(jié)果試了幾個(gè)庫(kù)都是一樣的結(jié)果，然后我換了一塊240x320的屏幕，顯示是正常的。所以我懷疑是y坐標(biāo)的起始位置不對(duì)，翻了一下TFT_eSPI的源碼，在TFT_eSPI.cpp里面找到了窗口設(shè)置的函數(shù)，里面有xy坐標(biāo)起始位置相關(guān)的處理。我把這段代碼做了一些修改。

原代碼如下（起始位置都是0）：

#ifdef CGRAM_OFFSET
  x0+=colstart;
  x1+=colstart;
  y0+=rowstart;  
  y1+=rowstart;
#endif

把代碼修改如下：

#ifdef CGRAM_OFFSET
  x0+=colstart;
  x1+=colstart;
  y0+=rowstart - 80;  
  y1+=rowstart - 80;  
#endif

修改之后顯示正常了。
這個(gè)可能是屏幕本身的點(diǎn)陣問(wèn)題，應(yīng)該只是個(gè)例，所以如果你沒(méi)有出現(xiàn)這種情況就不用管，如果也有的話可以試下我上面的方法。

5.3 ESP8266一直重啟

燒錄之后如果一直重啟，ESP8266出廠時(shí)本身是有燒錄程序的，出現(xiàn)重啟這種情況可能是因?yàn)槟阈聼浀?a class="article-link" target="_blank" href="/baike/1543059.html">固件占用內(nèi)存不多只覆蓋了原程序的一部分，然后原來(lái)的程序還有一部分沒(méi)有擦除，導(dǎo)致兩個(gè)代碼揉到一起了，解決辦法是用樂(lè)鑫的flash燒錄工具把整個(gè)芯片都擦除掉。這個(gè)工具可以在樂(lè)鑫的官網(wǎng)上找到。

結(jié)束語(yǔ)

這一講簡(jiǎn)單介紹了LCD的驅(qū)動(dòng)方法和圖形庫(kù)的使用，因?yàn)槠鶈?wèn)題，我這里就不深入講了，后面我會(huì)繼續(xù)介紹圖片和動(dòng)圖的顯示方法。如果還有什么問(wèn)題，歡迎在評(píng)論區(qū)留言或者私信給我。

想要庫(kù)源碼和工程源碼的小伙伴可以自行下載：

鏈接：https://pan.baidu.com/s/1OLbCzE_F0LkhLeAAnbWrEg
提取碼：os0o

esp8266基于Arduino的開(kāi)發(fā)教程匯總:https://blog.csdn.net/ShenZhen_zixian/article/details/121659482