Arduino筆記(65)：Adafruit_GFX圖形程式庫用於顯示器(中)

接續前一篇，本篇要介紹文字顯示的使用方式，包括文字字型、大小、顏色等設定。這是以下程式顯示的畫面，可以設定字體、顏色、大小等。

[旋轉顯示方向]

當旋轉顯示器時，不會旋轉您已繪製的內容，但會更改新繪圖的坐標系。在大多數情況下只需要在setup()段落內執行一次即可。能設定的旋轉角度為：0度、90度、180度或270度4種 ，使用指令如下：

void setRotation(uint8_t rotation);

設定rotation的參數可以是0,1,2或3. 對於Arduino 的顯示器，旋轉值0將顯示器設置為縱向(高)模式，1表示逆時針旋轉90度，2表示旋轉180度，3表示旋轉270度。
如果需要知道屏幕大小，請使用width()和height()函式。

uint16_t width();
uint16_t height();

[字元和字串]

顯示文字有兩種方法：單獨一個字元的畫法及設定座標、大小及顏色等，使用print方式顯示字元或字串。
第一種方法給予字元一個座標位置(x,y)，再給予前景顏色值color，背景顏色bg，及字型的大小size。當字型是1時，大小為5x8個圖元，用比例係數將字體放大，當size=2時，字體佔有10x16個圖元。這種顯示字元方式比較靈活，但也比較難操作。

void drawChar(uint16_t x, uint16_t y, char c, uint16_t color, uint16_t bg, uint8_t size);

如果要顯示一串文字，可用第二種列印print()的方法，比較容易控制使用。以下是幾個常用的控制字元功能：

// 設定游標位置
void setCursor(uint16_t x0, uint16_6 y0);

// 設定文字顏色
void setTextColor(uint16_t color);

// 設定文字及背景顏色
void setTextColor(uint16_t color, uint16_t backgroundcolor);

// 設定字型大小
void setTextSize(uint8_t size);

// 設定為true時，字串超過螢幕的會換行到下一行，false時，字串會顯示在螢幕外
void setTextWrap(boolean w);

開始用setCursor(x, y)可以將游標設置在需要顯示的字元的左上角處。初始化時，可以用set(0,0)來設置游標到螢幕的左上角處，用setTextColor(color)來設置字元的顏色，預設值是白色。如果想顯示字元的背景顏色，可以設置setTextColor()的第二個參數來定義背景顏色。setTextSize(size)來設定文字的大小比例倍數，可以設置為1、2、3等倍數，需要留意螢幕的大小，如設定太大會無法顯示在幕屏上。
完成上面的設置後，可以用print()和println() 來顯示字串到顯示器，就像對 Serial一樣的列印。例如，要列印一個字串，可以使用print(“Hello”)，也可以用print()來列印數字或變數。例如：print(1234.56)或16進位值 print(0xDEADBEEF, HEX)。

預設情況下，字串過長時會自動換行，可以用setTextWrap(false)函式讓字串不會換行，過長時右邊會消失，當設定成true時，會使超長的字串自動換行。

[字體]

Adafruit GFX程式庫提供更換字體的能力，除了預設的標準固定大小字體外，還有幾種字體可用。這些字體放在 Adafruit_GFX 程式庫內的「Fonts」資料夾內，可設定的字型如下圖：

每個檔案名稱都以Free+字體名稱（FreeMono、FreeSerif等）開頭，後面接著樣式（粗體、斜體、無等），字體大小（以9、12、18及24個點大小）和「7b」表示它們包含7位字符（ASCII碼「」到「〜」）; 8位元字體（支持符號和/或國際字符）尚未提供。


．在Arduino程式中使用GFX字體
在 #include Adafruit_GFX 和特定於顯示的程式庫之後，包括您計劃在Arduino中使用的字體檔案名。例如：

#include <adafruit_gfx.h>         //核心圖形庫   
#include <adafruit_tftlcd.h>      //特定於硬件的庫
#include <fonts/freemonoboldoblique12pt7b.h>   // 字體一
#include <fonts/freeserif9pt7b.h>              // 字體二

每種字體會佔用一些程式的空間，較大的字體會需要更多空間。這是一個有限的資源（對於Arduino Uno最大約為32K ），請謹慎使用。如果載入內容太大了，將無法編譯。如果發生這種情況，可使用更少或更小的字體，或只使用標準的內置字體。
要使用在Arduino 程式中設定字體，可使用setFont()函數，參數是這些.h的字體檔檔名（減去.h），傳遞此結構的地址，例如：

tft.setFont(&FreeMonoBoldOblique12pt7b);

設定後 tft.print() 的字串就會用這個字體顯示。要返回標準的固定大小字體，可使用setFont()函式來復原，傳遞 NULL或不傳遞參數。

tft.setFont();

[程式]

#define TFT_CS 10
#define TFT_DC 9
#define TFT_RST 8
#define TFT_SCLK 13   
#define TFT_MOSI 11   

// Color definitions
#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>
#include <Fonts/FreeSans9pt7b.h>
#include <Fonts/FreeSans12pt7b.h>
#include <Fonts/FreeSerif12pt7b.h>
#include <Fonts/FreeSerifItalic9pt7b.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);

   tft.setRotation(3); //轉 270度

   // 設定游標位置 
   tft.setCursor(2, 12);  

   // 設定字的顏色  
   tft.setTextColor(YELLOW);

   // 設定字的大小
   tft.setTextSize(1);

   // 設定字型
   tft.setFont(&FreeSans12pt7b);
   tft.println("Ceiling's Blog");

   // 設定顏色及字型
   tft.setTextColor(CYAN);
   tft.setFont(&FreeSans9pt7b);
   tft.println("Ceiling's Blog");

   // 設定顏色及字型
   tft.setTextColor(RED);   
   tft.setFont(&FreeSerif12pt7b);
   tft.println("Ceiling's Blog");
   
   // 設定顏色及字型
   tft.setTextColor(WHITE);      
   tft.setFont(&FreeSerifItalic9pt7b);
   tft.println("Ceiling's Blog");

   // 設定字型, 每次用不同顏色顯示一個字
   tft.setFont(&FreeSans9pt7b);
   tft.drawChar(1,  120, 'A', BLUE , BLACK, 1);
   tft.drawChar(16, 120, 'B', GREEN , BLACK, 1);
   tft.drawChar(31, 120, 'C', RED , BLACK, 1);
   tft.drawChar(46, 120, 'D', CYAN , BLACK, 1);
   tft.drawChar(61, 120, 'E', MAGENTA , BLACK, 1);
   tft.drawChar(76, 120, 'F', YELLOW , BLACK, 1);      
}

void loop()
{
}

[執行結果]

如最上方照片。

[顯示單色圖形]

有關圖形的顯示，可以用drawBitmap()指令來繪製單色的圖、製作小動畫或是圖示，指令如下：

void drawBitmap(int16_t x, int16_t y, uint8_t *bitmap, int16_t w, int16_t h, uint16_t color);

x，y是點陣圖左上角，w和h是寬度和高度，點陣圖的資料要存放在程式記憶體中，有關如何轉換圖片變成程式碼，將在下一篇實作中說明。我們先看一下程式的寫法：

#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>

#define TFT_CS 10
#define TFT_DC 9
#define TFT_RST 8
#define TFT_SCLK 13   
#define TFT_MOSI 11   

// Color definitions
#define BLACK    0x0000
#define BLUE     0xF800
#define RED      0x001F
#define GREEN    0x07E0
#define CYAN     0xFFE0
#define MAGENTA  0xF81F
#define YELLOW   0x07FF
#define WHITE    0xFFFF

static const unsigned char PROGMEM title[] = {
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x3f,0xc0,0xff,0xc0,0xf,0xe0,0x0,0x0,0x0,0x0,0x0,
0x0,0xff,0xe0,0xff,0xf0,0x3f,0xf0,0x0,0x0,0x0,0x0,0x0,
0x3,0xff,0xe0,0xff,0xf8,0x7f,0xf0,0x0,0x0,0x0,0x0,0x0,
0x7,0xff,0xe0,0xf0,0xfc,0xff,0xf0,0x0,0x0,0x0,0x0,0x0,
0x7,0xe0,0x20,0xf0,0x3c,0xf8,0x10,0x0,0x0,0x0,0x0,0x0,
0xf,0x80,0x0,0xf0,0x3c,0xf0,0x0,0x0,0x0,0x0,0x0,0x0,
0xf,0x0,0x0,0xf0,0x3c,0xf0,0x0,0x0,0x0,0x0,0x0,0x0,
0x1e,0x0,0x0,0xf0,0x3c,0xfc,0x0,0x0,0x0,0x0,0x0,0x0,
0x1e,0xf,0xf0,0xf0,0x3c,0x7f,0x0,0x0,0x0,0x0,0x0,0x0,
0x1e,0xf,0xf0,0xf0,0xf8,0x3f,0xc0,0x0,0x0,0x0,0x0,0x0,
0x1e,0xf,0xf0,0xff,0xf8,0x1f,0xe0,0x0,0x0,0x0,0x0,0x0,
0x1e,0xf,0xf0,0xff,0xe0,0x7,0xf0,0x0,0x0,0x0,0x0,0x0,
0x1e,0x0,0xf0,0xff,0x80,0x1,0xf8,0x0,0x0,0x0,0x0,0x0,
0x1f,0x0,0xf0,0xf0,0x0,0x0,0x78,0x0,0x0,0x0,0x0,0x0,
0xf,0x80,0xf0,0xf0,0x0,0x80,0x78,0x0,0x0,0x0,0x0,0x0,
0xf,0xc0,0xf0,0xf0,0x0,0xe0,0xf8,0x0,0x0,0x0,0x0,0x0,
0x7,0xff,0xf0,0xf0,0x0,0xff,0xf8,0x0,0x0,0x0,0x0,0x0,
0x3,0xff,0xf0,0xf0,0x0,0xff,0xf0,0x0,0x0,0x0,0x0,0x0,
0x1,0xff,0xf0,0xf0,0x0,0xff,0xe0,0x0,0x0,0x0,0x0,0x0,
0x0,0x7f,0x80,0xf0,0x0,0x3f,0x80,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0xe0,0x71,0xff,0xf9,0xe0,0xf1,0xfd,0xff,0x7f,0x3f,0x80,
0x0,0xf0,0x71,0xff,0xf9,0xf0,0xf1,0xfd,0xff,0x7f,0x3f,0xc0,
0x1,0xb0,0x70,0x38,0x71,0xb0,0xb1,0xc0,0x38,0x70,0x38,0xc0,
0x1,0xb0,0x70,0x38,0x71,0xf1,0xb1,0xc0,0x38,0x70,0x38,0xc0,
0x3,0xb8,0x70,0x38,0x71,0xf9,0xb1,0xf8,0x38,0x7e,0x39,0xc0,
0x3,0x18,0x70,0x38,0x71,0xdb,0xb1,0xf8,0x38,0x7e,0x3f,0x80,
0x3,0x1c,0x70,0x38,0x71,0xdb,0x31,0xc0,0x38,0x70,0x3f,0x80,
0x7,0xfc,0x70,0x38,0x71,0xdf,0x31,0xc0,0x38,0x70,0x39,0x80,
0x7,0xfc,0x70,0x38,0x71,0xce,0x31,0xc0,0x38,0x70,0x39,0xc0,
0x6,0xe,0x7f,0x38,0xf9,0xce,0x31,0xfc,0x38,0x7f,0x38,0xe0,
0xe,0xe,0x7f,0x38,0xf9,0xce,0x31,0xfc,0x38,0x7f,0x38,0xf0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,
0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0,0x0
};

static const unsigned char PROGMEM gpsIcon[] = {
0x0,0xe0,0x0,0x0,
0x1,0xf0,0x0,0x0,
0x3,0xf8,0x0,0x0,
0x3,0x98,0x0,0x0,
0xe,0x7,0x0,0x0,
0xe,0x7,0x80,0x0,
0xe,0x3,0x80,0x0,
0x3,0x81,0xfc,0x0,
0x3,0xc1,0xfc,0x0,
0x1,0xc1,0xfe,0x0,
0x0,0xf7,0xfe,0x0,
0x0,0x3f,0xfc,0x0,
0x0,0x3f,0xfc,0x0,
0x0,0x1f,0xff,0x80,
0x0,0x1f,0xfb,0x80,
0xcc,0x1f,0xe1,0xc0,
0xce,0x1f,0xe0,0x70,
0xce,0xf,0xe0,0x70,
0x6e,0x7,0x60,0x38,
0x67,0x0,0x78,0xc,
0x63,0x0,0x1c,0x1c,
0x73,0x80,0x1c,0x3c,
0x71,0xf0,0x7,0x70,
0x30,0xf8,0x7,0xf0,
0x1c,0x3e,0x3,0xc0,
0xf,0x0,0x0,0x80,
0xf,0x80,0x0,0x0,
0x3,0xf0,0x0,0x0,
0x0,0xfe,0x0,0x0,
0x0,0xe,0x0,0x0
};

Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_MOSI, TFT_SCLK, TFT_RST);

void setup() 
{ 
  tft.initR(INITR_BLACKTAB); // 初始化設定 ST7735S chip, black tab
  tft.fillScreen(BLACK);
  tft.drawBitmap(0,0,title,96,64,RED);
  tft.drawBitmap(65,0,gpsIcon,30,30,GREEN);
} 

void loop() 
{ 
}

[執行結果]

[參考資料]

• Adafruit：Adafruit GFX Graphics Library
• Henrys Bench：Arduino Adafruit GFX Library User Guide
• Educ8s.tv：Arduino Bitmap Graphics Tutorial