玩轉 ESP32 + Arduino(二十八) TFT_eSPI庫驅動ST7789(SPI接口)

我們用到的庫 TFT_eSPI

一. 硬件接線

這里我們使用了中景園的ST7789

一般屏幕的引腳定義如下:

接線: 我們直接用VSPI接線

ESP32引腳 ST7789引腳 功能
GND GND 接地
3V3 VCC 電源
(VCLK)18 SCL SPI時鐘線
(VMOSI)23 SDA SPI主出從入線
26 RES 復位引腳
27 DC 數(shù)據(jù)/命令選擇線
(VCS0)5 CS SPI片選線
沒接 BLK 背光控制線

如何在TFT_eSPI中設置引腳??

首先, 我們打開 User_Setup.h, 具體位置在(platformIO平臺):

然后根據(jù)文件中的提示設置就可以了, 對于ESP32 + ST7789來說, 具體修改了如下內容:

第一步: 修改自定義驅動文件

在眾多的驅動文件中,選擇適合自己屏幕的, 注釋掉不用的

設置寬高

對ST7789 ST7735 ILI9163來說, 要設置寬高

第二步: 引腳定義

注釋掉其他的定義, 定義自己的引腳

第三步.第四步保持默認, 需要時再修改就可以

第三步是配置字庫, ESP32內存足夠, 不用配置了,都帶著就行
第四步是 配置SPI的頻率 / 配置用VSPI(默認)還是HSPI /

額外的一步: User_Setup_Select.h中選擇用戶自定義配置

因為上面我們的設置是自定義設置, 所以在User_Setup_Select.h中, 應啟用自定義配置, 注釋其他配置文件

二. 顏色和字體

1.關于顏色

關于顏色值, TFT一般都使用16位的RGB565顏色,在本庫中, 典型顏色已經(jīng)定義好了:

/***************************************************************************************
*                         Section 6: Colour enumeration
***************************************************************************************/
// Default color definitions
#define TFT_BLACK       0x0000      /*   0,   0,   0 */
#define TFT_NAVY        0x000F      /*   0,   0, 128 */
#define TFT_DARKGREEN   0x03E0      /*   0, 128,   0 */
#define TFT_DARKCYAN    0x03EF      /*   0, 128, 128 */
#define TFT_MAROON      0x7800      /* 128,   0,   0 */
#define TFT_PURPLE      0x780F      /* 128,   0, 128 */
#define TFT_OLIVE       0x7BE0      /* 128, 128,   0 */
#define TFT_LIGHTGREY   0xD69A      /* 211, 211, 211 */
#define TFT_DARKGREY    0x7BEF      /* 128, 128, 128 */
#define TFT_BLUE        0x001F      /*   0,   0, 255 */
#define TFT_GREEN       0x07E0      /*   0, 255,   0 */
#define TFT_CYAN        0x07FF      /*   0, 255, 255 */
#define TFT_RED         0xF800      /* 255,   0,   0 */
#define TFT_MAGENTA     0xF81F      /* 255,   0, 255 */
#define TFT_YELLOW      0xFFE0      /* 255, 255,   0 */
#define TFT_WHITE       0xFFFF      /* 255, 255, 255 */
#define TFT_ORANGE      0xFDA0      /* 255, 180,   0 */
#define TFT_GREENYELLOW 0xB7E0      /* 180, 255,   0 */
#define TFT_PINK        0xFE19      /* 255, 192, 203 */ //Lighter pink, was 0xFC9F      
#define TFT_BROWN       0x9A60      /* 150,  75,   0 */
#define TFT_GOLD        0xFEA0      /* 255, 215,   0 */
#define TFT_SILVER      0xC618      /* 192, 192, 192 */
#define TFT_SKYBLUE     0x867D      /* 135, 206, 235 */
#define TFT_VIOLET      0x915C      /* 180,  46, 226 */

2. RGB顏色轉565顏色 tft.color565()

uint16_t red =    tft.color565(255, 0, 0);
uint16_t green =  tft.color565(0, 255, 0);
uint16_t blue =   tft.color565(0, 0, 255);
uint16_t yellow = tft.color565(255, 255, 0);
tft.fillScreen(tft.color565(128, 0, 128));  //使用

3. 關于半透明 tft.alphaBlend()

在填入顏色的地方填入此函數(shù)可以開啟alpha半透明通道

  for (uint16_t a = 0; a < 255; a++) // Alpha 0 = 100% background, alpha 255 = 100% foreground
  {
    //tft.drawFastHLine(192, a, 12, tft.alphaBlend(a, TFT_BLACK, TFT_WHITE));
    tft.drawFastHLine(204, a, 12, tft.alphaBlend(a, TFT_RED,   TFT_WHITE));
    tft.drawFastHLine(216, a, 12, tft.alphaBlend(a, TFT_GREEN, TFT_WHITE));
    tft.drawFastHLine(228, a, 12, tft.alphaBlend(a, TFT_BLUE,  TFT_WHITE));
  }

4. 關于默認字體

編號范圍是 1馋劈、2、4先紫、6似踱、7淮菠、8爹耗，不同的編號代表不同的字體, 不同的字體由于分辨率不同, 基本大小不同

// Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_GLCD

// Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT2

// Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT4

// Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT6

// Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT7

// Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8

// Font 8. Alternative to Font 8 above, slightly narrower, so 3 digits fit a 160 pixel TFT
//#define LOAD_FONT8N

// FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts
#define LOAD_GFXFF

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

5. 關于自定義字體

TFT_eSPI自帶了很多自定義庫, 而且也可以自己去生成新的自定義庫.

默認的自定義字體庫在:

如果想學習自定義字庫用法, 請參看例程:

三. 相關API

1. tft.init(); //初始化

初始化屏幕, 如果是ST7735,可以往里面?zhèn)饕粋€參數(shù), 具體用到時再看

2. tft.fillScreen(TFT_BLACK); //填充全屏幕

填充全屏幕, 后面是顏色值,

tft.fillScreen(uint32_t color);

3. 屏幕旋轉

// 設置屏幕顯示的旋轉角度，參數(shù)為：0, 1, 2, 3
// 分別代表 0°艾岂、90°顺少、180°、270°
void setRotation(uint8_t r);

4. 屏幕反色

//反轉顯示顏色i = 1反轉王浴，i = 0正常
tft.invertDisplay(bool i);

四. 文字相關API

1. tft.setCursor(20, 10, 4); //設置打字起始坐標位置和字號

 // 設置文本顯示坐標脆炎，默認以文本左上角為參考點，可以改變參考點
void setCursor(int16_t x, int16_t y);

// 設置文本顯示坐標氓辣，和文本的字體
void setCursor(int16_t x, int16_t y, uint8_t font);

2. tft.setTextColor(2); //設置字體顏色

// 設置文本顏色
void setTextColor(uint16_t color);

// 設置文本顏色與背景色
void setTextColor(uint16_t fgcolor, uint16_t bgcolor);

設置背景顏色可以有效的防止數(shù)字疊在一起

3. tft.setTextSize(2); //設置字體大小

設置文本大小可以放大字體的顯示,但是字體的"分辨率"是不會變的

// 設置文本大小秒裕，文本大小范圍為 1~7 的整數(shù)
void setTextSize(uint8_t size);

4. tft.print("Hello World!"); // 顯示字體

tft.print("Hello World!");

5. tft.printf, tft.println //顯示字體

特別注意: 字庫7是仿7段數(shù)碼屏的樣式

五. 繪制文字相關API

1. 繪制字符串(居左)

int16_t drawString(const String &string, int32_t x, int32_t y)
int16_t drawString(const char *string, int32_t x, int32_t y)
int16_t drawString(const String &string, int32_t x, int32_t y, uint8_t font)
int16_t drawString(const char *string, int32_t x, int32_t y, uint8_t font)

2. 繪制字符串(居中)

int16_t drawCentreString(const char *string, int32_t x, int32_t y, uint8_t font)
int16_t drawCentreString(const String &string, int32_t x, int32_t y, uint8_t font)

3. 繪制字符串(居右)

int16_t drawRightString(const char *string, int32_t x, int32_t y, uint8_t font)
int16_t drawRightString(const String &string, int32_t x, int32_t y, uint8_t font)

4. 繪制字符

int16_t drawChar(uint16_t uniCode, int32_t x, int32_t y)
int16_t drawChar(uint16_t uniCode, int32_t x, int32_t y, uint8_t font)
void drawChar(int32_t x, int32_t y, uint16_t c, uint32_t color, uint32_t bg, uint8_t size)

5. 繪制浮點數(shù)

int16_t TFT_eSPI::drawFloat(float floatNumber, uint8_t decimal, int32_t x, int32_t y)
int16_t TFT_eSPI::drawFloat(float floatNumber, uint8_t decimal, int32_t x, int32_t y, uint8_t font)

  tft.drawFloat(3.124, 4, 0,0,4);

6. 繪制數(shù)字

int16_t drawNumber(long intNumber, int32_t x, int32_t y)
int16_t drawNumber(long intNumber, int32_t x, int32_t y, uint8_t font)

7. 繪制

六. 繪制幾何圖形

1. 畫點

void drawPixel(int32_t x, int32_t y, uint32_t color)

2.畫線

void drawLine(int32_t xs, int32_t ys, int32_t xe, int32_t ye, uint32_t color)

3.畫橫線(快速)

void drawFastHLine(int32_t x, int32_t y, int32_t w, uint32_t color)

4.畫豎線(快速)

void drawFastVLine(int32_t x, int32_t y, int32_t h, uint32_t color)

5. 畫空心圓

tft.drawCircle(100,100,50,TFT_RED);

6. 畫實心圓

void fillCircle(int32_t x, int32_t y, int32_t r, uint32_t color)

7. 畫空心橢圓

tft.drawEllipse(100,100,100,60,TFT_GREENYELLOW);

8. 畫實心橢圓

void drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color)

9. 畫空心矩形

void drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color)

10. 畫實心矩形

void fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color)

11. 畫空心圓角矩形

void drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color)

12. 畫實心圓角矩形

void fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color)

13. 畫空心三角形

void drawTriangle(int32_t x1, int32_t y1, int32_t x2, int32_t y2, int32_t x3, int32_t y3, uint32_t color)

14. 畫實心三角形

void fillTriangle(int32_t x1, int32_t y1, int32_t x2, int32_t y2, int32_t x3, int32_t y3, uint32_t color)

七. 圖片顯示相關

1. 顯示BMP圖片

void drawBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t fgcolor)
void drawBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t fgcolor, uint16_t bgcolor)

2. XBM

xbm是一種簡單的雙色圖片位圖格式,在早期的cgi中運用較多，目前多用于計數(shù)器上

這里TFT_eSPI推薦了一個在線XBM制作工具:
https://www.online-utility.org/image/convert/to/XBM
實測非常好用

void drawXBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t fgcolor)
void drawXBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t fgcolor, uint16_t bgcolor)

3. 顯示圖片

void pushImage(int32_t x, int32_t y, int32_t w, int32_t h, const uint16_t *data)
void pushImage(int32_t x, int32_t y, int32_t w, int32_t h, uint16_t *data)
void pushImage(int32_t x, int32_t y, int32_t w, int32_t h, const uint16_t *data, uint16_t transparent)
void pushImage(int32_t x, int32_t y, int32_t w, int32_t h, uint16_t *data, uint16_t transparent)
void pushImage(int32_t x, int32_t y, int32_t w, int32_t h, uint8_t *data, bool bpp8 = true, uint16_t *cmap = (uint16_t *)nullptr)
void pushImage(int32_t x, int32_t y, int32_t w, int32_t h, uint8_t *data, uint8_t transparent, bool bpp8 = true, uint16_t *cmap = (uint16_t *)nullptr)
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末钞啸，一起剝皮案震驚了整個濱河市几蜻，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌体斩，老刑警劉巖梭稚，帶你破解...
    沈念sama閱讀 206,968評論 6贊 482
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異絮吵，居然都是意外死亡弧烤，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門蹬敲，熙熙樓的掌柜王于貴愁眉苦臉地迎上來暇昂，“玉大人，你說我怎么就攤上這事伴嗡〖辈ǎ” “怎么了？”我有些...
    開封第一講書人閱讀 153,220評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵闹究，是天一觀的道長幔崖。 經(jīng)常有香客問我，道長，這世上最難降的妖魔是什么赏寇？ 我笑而不...
    開封第一講書人閱讀 55,416評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任吉嫩，我火速辦了婚禮，結果婚禮上嗅定，老公的妹妹穿的比我還像新娘自娩。我一直安慰自己，他們只是感情好渠退，可當我...
    茶點故事閱讀 64,425評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布忙迁。 她就那樣靜靜地躺著，像睡著了一般碎乃。 火紅的嫁衣襯著肌膚如雪姊扔。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,144評論 1贊 285
  • 城市分裂傳說
    那天梅誓，我揣著相機與錄音恰梢，去河邊找鬼。 笑死梗掰，一個胖子當著我的面吹牛嵌言，可吹牛的內容都是我干的。 我是一名探鬼主播及穗，決...
    沈念sama閱讀 38,432評論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼摧茴，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了埂陆？” 一聲冷哼從身側響起苛白，我...
    開封第一講書人閱讀 37,088評論 0贊 261
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎猜惋，沒想到半個月后丸氛，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 43,586評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡著摔，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了定续。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谍咆。...
    茶點故事閱讀 38,137評論 1贊 334
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖私股，靈堂內的尸體忽然破棺而出摹察，到底是詐尸還是另有隱情，我是刑警寧澤倡鲸，帶...
    沈念sama閱讀 33,783評論 4贊 324
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布供嚎，位于F島的核電站，受9級特大地震影響，放射性物質發(fā)生泄漏克滴。R本人自食惡果不足惜逼争，卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望劝赔。 院中可真熱鬧誓焦，春花似錦、人聲如沸着帽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽仍翰。三九已至赫粥，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間予借，已是汗流浹背傅是。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蕾羊，地道東北人喧笔。 一個月前我還...
    沈念sama閱讀 45,595評論 2贊 355
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像龟再，于是被迫代替她去往敵國和親书闸。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 42,901評論 2贊 345