Arduino的Adafruit_GFX程式庫為所有的LCD和OLED顯示器提供了通用語法和圖形功能。這使得撰寫程式時，可以很容易在不同類型顯示器之間稍作調整即可使用，而且操作簡單。在前兩篇文章試用一下顯示器的方法後，紀錄一些常用的語法，包括繪圖、文字設定及呈現圖片的方式，因文章較長，分成上下兩篇，上篇瞭解一下基本原理與繪圖指令的用法，下一篇則偏重在文字和圖片顯示。
程式庫(Library)安裝方法請參考另一篇文章: Arduino筆記：安裝 Arduino IDE 程式庫(Library)
來源：Adafruit
座標是以像素(Pixel)為單位表示，對於真實世界的度量（如毫米或英寸）沒有比例的概念，並且顯示的圖形的大小將是該特定顯示器的點間距或圖元密度的函數。
R、G、B代表紅色，綠色和藍色。在RGB565 16位顏色代碼定義將紅色，綠色和藍色光混合在一起時，可以定義每種顏色。最左邊(高位元)的5位表示是紅色，中間的6位表示綠色，最右邊(低位元)的5位元標識藍色。為什麼給綠色分配了6位，據科學上說，我們肉眼最喜歡綠色。
以分配給紅色值的五位作為例子，數值越大表示紅色數量越多，數值越小紅色數量越少，以二進制'00000'（十進制0）表示不使用紅色，二進制'11111'（十進制32）告訴顯示器使用最多的紅色。綠色和藍色值使用相同的方法。要注意綠色，使用6位元而不是5個二進位數字，這讓綠色有64種可能的選擇。
如要知道設定的16位元顏色，可到RGB Color Codes Chart 這個網站看到實際的顏色。
Adafruit_GFX 程式庫內已經訂好常見的顏色，使用英文的方式表示，(註：Adafruit網站上定義的顏色有四個地方剛好相反，BLUE跟RED兩個顏色需對調，CYAN跟YELLOW兩個顏色需對調）。
．畫點 Drawing pixels(points)
根據座標系，在顯示螢幕上的座標點X和Y處畫一個點，並使用16進位的顏色碼顯示。
．畫線Drawing lines
使用兩個座標點(x0,y0)及(x1,y1)畫一條線，並使用16進位的顏色碼顯示。
．畫方形(Rectangles) / 填充顏色
使用特定顏色畫一個矩形方框，或使用特定顏色填滿一個矩形。在座標點(x0,y0)為左上角，給予寬度w，跟高度h畫出一個方形，計量的單位是都是畫素(Pixel)。drawRect()畫矩形的外部，fillRect()用特定的顏色填充整個實體矩形空間。
．Circles 畫圓圈
畫一個空的圓形，或是填充的圓形，只要給予一個圓心(x0,y0)，給予半徑r，使用特定的顏色值呈現。
．Rounded rectangle 圓角矩形
對於邊角是圓弧形的矩形也有空的和填充的功能。（x,y)為左上角的點，給一個寬度w和高度h，再給一個圓角圓弧半徑r，最後是一個顏色值。
．Triangles 三角形
要畫三角形，一樣有空的和填充功能，每個函數給予三角形的三個頂點座標點，以及顏色值。
．Clearing or filling the screen 清除或者是填充螢幕
用fillScreen()功能來設置整個顯示，可以讓顯示器顯示同一個顏色，並清除螢幕上所有的內容。
圖形的部分先介紹到這裡，下一篇繼續說明文字顯示、更換字型及呈現圖片。以下是實際執行的程式。
[安裝Adafruit_GFX程式庫]
Adafruit_GFX程式庫為所有的LCD和OLED顯示器提供了通用語法和一組圖形功能。讓使用者在不同的裝置間方便程式的轉換。我的顯示器是1.77吋的ST7735 TFT-LCD，需要再安裝 Adafruit_ST7735 Library程式庫，您可選擇適合您個人顯示器的驅動程式。程式庫(Library)安裝方法請參考另一篇文章: Arduino筆記：安裝 Arduino IDE 程式庫(Library)
[坐標系與單位]
像素(Pixel) - 圖像的元素，用圖像上面的橫坐標（X）和縱坐標（Y）來表示。座標（0，0）表示是左上角，X正向增加是向右移動，Y正向增加時向下移動。Y軸部分跟標準的笛卡爾坐標系剛好是顛倒的。但這已被許多的電腦圖像系統所採用的一種方式（回到真空管顯示器的CRT年代就是用這種坐標系）。與數學笛卡爾坐標系不同，這裡的點具有尺寸 - 它們總是一個整數像素寬和高。
座標是以像素(Pixel)為單位表示，對於真實世界的度量（如毫米或英寸）沒有比例的概念，並且顯示的圖形的大小將是該特定顯示器的點間距或圖元密度的函數。
[顏色]
許多可用的Arduino相容TFT顯示器最多可顯示65,536種顏色，剛好是16位元的數字，因此顏色值也使用16進位的數值來表示65,536顯示器要顯示什麼顏色。R、G、B代表紅色，綠色和藍色。在RGB565 16位顏色代碼定義將紅色，綠色和藍色光混合在一起時，可以定義每種顏色。最左邊(高位元)的5位表示是紅色，中間的6位表示綠色，最右邊(低位元)的5位元標識藍色。為什麼給綠色分配了6位，據科學上說，我們肉眼最喜歡綠色。
以分配給紅色值的五位作為例子，數值越大表示紅色數量越多，數值越小紅色數量越少，以二進制'00000'（十進制0）表示不使用紅色，二進制'11111'（十進制32）告訴顯示器使用最多的紅色。綠色和藍色值使用相同的方法。要注意綠色，使用6位元而不是5個二進位數字，這讓綠色有64種可能的選擇。
如要知道設定的16位元顏色，可到RGB Color Codes Chart 這個網站看到實際的顏色。
// 色彩定義 #define BLACK 0x0000 #define BLUE 0xF800 #define RED 0x001F #define GREEN 0x07E0 #define CYAN 0xFFE0 #define MAGENTA 0xF81F #define YELLOW 0x07FF #define WHITE 0xFFFF對於單色的顯示，顏色用1或0來表示。set/clear的語義是定義特定的顯示，像發光的OLED顯示幕，SET表示圖元點亮，而對於LCD屏，SET是特別黑。或許有例外，但一般情況下CLEAR一般是表示背景顏色，一般情況大致會是這樣。
[圖形基本元素]
繪圖的基本原理是由點構成線、線構成面，在繪圖系統中，通常可以畫出點、線及各種圖形，如圓形、方形及三角型等，以下分別介紹各繪圖函式：．畫點 Drawing pixels(points)
根據座標系，在顯示螢幕上的座標點X和Y處畫一個點，並使用16進位的顏色碼顯示。
void drawPixel(uint16_t x, uint16_t y, uint16_t color);
．畫線Drawing lines
使用兩個座標點(x0,y0)及(x1,y1)畫一條線，並使用16進位的顏色碼顯示。
void drawLine(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t color)如果是垂直和水平線，有快速畫線的方式，給一個座標值(x0,y0)，再給一個長度值，就可畫出垂直跟水平線。
void drawFastVLine(uint16_t x0, uint16_t y0, uint16_t length, uint16_t color); void drawFastHLine(uint8_t x0, uint8_t y0, uint8_t length, uint16_t color);
．畫方形(Rectangles) / 填充顏色
使用特定顏色畫一個矩形方框，或使用特定顏色填滿一個矩形。在座標點(x0,y0)為左上角，給予寬度w，跟高度h畫出一個方形，計量的單位是都是畫素(Pixel)。drawRect()畫矩形的外部，fillRect()用特定的顏色填充整個實體矩形空間。
void drawRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t color); void fillRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t color);
．Circles 畫圓圈
畫一個空的圓形，或是填充的圓形，只要給予一個圓心(x0,y0)，給予半徑r，使用特定的顏色值呈現。
void drawCircle(uint16_t x0, uint16_t y0, uint16_r, uint16_t color); void fillCircle(uint16_t x0, uint16_t y0, uint16_t r, uint16_t color);
．Rounded rectangle 圓角矩形
對於邊角是圓弧形的矩形也有空的和填充的功能。（x,y)為左上角的點，給一個寬度w和高度h，再給一個圓角圓弧半徑r，最後是一個顏色值。
void drawRoundRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t raduis, uint16_t color); void fillRoundRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t raduis, uint16_t color);
．Triangles 三角形
要畫三角形，一樣有空的和填充功能，每個函數給予三角形的三個頂點座標點，以及顏色值。
void drawTriangle(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color); void fillTriangle(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color);
．Clearing or filling the screen 清除或者是填充螢幕
用fillScreen()功能來設置整個顯示，可以讓顯示器顯示同一個顏色，並清除螢幕上所有的內容。
void fillScreen(uint16_t color);
圖形的部分先介紹到這裡，下一篇繼續說明文字顯示、更換字型及呈現圖片。以下是實際執行的程式。
[接線與電路圖]
| Arduino Uno | ST7735 LCD Pin | 說明 |
|---|---|---|
| 3.3V | 8. LEDA | 背光控制 |
| D10 | 7. CS | Chip Select(Slave Select PIN / SPI data) |
| D9 | 6. RS | Register Selection(MISO - Sending to Master) |
| D8 | 5. RES | Reset / RST, 重設 TFT |
| D11 | 4. SDA | Serial Data(MOSI-Sending to Slave) |
| D13 | 3. SCK | SCLK - Clock Line（SPI Clock Input) |
| 5V | 2. VCC | Voltage Common Collector |
| GND | 1. GND | Ground |
[程式]
#define TFT_CS 10
#define TFT_DC 9
#define TFT_RST 8
#define TFT_SCLK 13
#define TFT_MOSI 11
// 顏色定義
#define BLACK 0x0000
#define BLUE 0xF800
#define RED 0x001F
#define GREEN 0x07E0
#define CYAN 0xFFE0
#define MAGENTA 0xF81F
#define YELLOW 0x07FF
#define WHITE 0xFFFF
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <stdio.h>
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_MOSI, TFT_SCLK, TFT_RST);
void setup(void)
{
tft.initR(INITR_BLACKTAB); // 初始化設定 ST7735S chip, black tab
tft.fillScreen(BLACK);
}
void loop()
{
// 畫一個點
tft.drawPixel(5, 5, GREEN);
tft.drawPixel(10, 5, RED);
// 畫一個方框
tft.drawRect(10, 10, 20, 20, CYAN);
// 畫一個方框，並填滿綠色
tft.fillRect(10, 40, 20, 20, GREEN);
// 畫兩條線，黃色水平，白色垂直
tft.drawLine(40, 10, 40, 120, WHITE);
tft.drawLine(50, 10, 100, 10, MAGENTA);
// 畫一個空的圓
tft.drawCircle(80, 60, 20, YELLOW);
tft.fillCircle(80, 120, 20, RED);
// 畫一個三角形
tft.drawTriangle(10, 80, 20, 70, 30, 80, BLUE);
//畫一個填滿黃色的三角形
tft.fillTriangle(10, 110, 20, 100, 30, 110, YELLOW);
}
[執行結果]
[參考資料]
- Adafruit：Adafruit GFX Graphics Library
- Henrys Bench：Arduino Adafruit GFX Library User Guide
- Educ8s.tv：Arduino Bitmap Graphics Tutorial
張貼留言