上一篇實作用 u8g2 繪製圖形及顯示中文字，發現僅能顯示部分簡體中文，無法顯示的簡體及繁體中文字型。本篇要瞭解一下如何使用 u8g2 這個程式庫製作字型，讓繁體中文字型顯示在 LCD 或 OLED顯示器上。u8g2 的程式庫功能強大，且支援的顯示器種類非常多，本實作例子繼續使用 ST7920(TLCD12864)為例，但不限於此顯示器，只要設定驅動的方式對應正確的顯示器即可。由於 u8g2 官方的程式庫可以顯示的中文字型不多，如果要顯示其他中文字型就要自己製作字型檔。以「中文測試」這四個字來說，發現「中文」兩個字，有內建簡體字碼，可以正常呈現，但是「測試」這兩個繁體字，就無法顯示在顯示器上。下圖為沒有自訂字型庫的程式執行結果：
以下是完成自訂字型的轉換，讓 u8g2 讀取 unicode 的字型顯示在畫面上，可以看到多了「測試兩個字」。以下就用「測試」這兩個字來實作如何使用 u8g2 自製字型庫，呈現在顯示器上，如下圖。
這個程式庫可以直接從 Arduino IDE 功能表選單，選擇 [草稿碼 Sketch] → [匯入程式庫 Include Library] → [管理程式庫 Manage Libraries...]，在出現的視窗搜尋處輸入 u8g2 進行安裝。但會少了本篇實作會用到的 tools 目錄，可以將 Github 上的程式庫下載後，再將 tools目錄複製到 Arduino Library 所在的 u8g2 目錄內即可。
如為下載程式庫(Library)安裝方法請參考另一篇文章: Arduino筆記：安裝 Arduino IDE 程式庫(Library)。
(1) 找出中文字的 Unicode
到線上 Unicode 轉換的網站找出中文字的 Unicode，網站：Unicode 編碼轉換工具 畫面如下。並將轉換的結果全選複製起來，稍後要貼到字庫文字檔中。
(2) 編輯 chinese1.map 檔案
用記事本開啟 u8g2程式庫目錄(U8g2\tools\font\build)內的 chinese1.map 檔案，將上述的 Unicode 字碼貼在最後面，並將「\u」改成「$」，如數量比較多，可以用記事本內取代的功能，一次改掉全部的「\u」。
如果不知道 u8g2 的程式庫路徑，可看一下 Arduino IDE 介面，選擇「檔案」→ 「偏好設定」，知道目前程式庫的預設路徑。
(3) 執行轉檔程式 bdfconv.exe
開啟 DOS 視窗，將目錄切換(使用 cd 指令)更換到「U8g2\tools\font\bdfconv」路徑下，執行以下指令：
執行完成後，會在同目錄下產生一個「u8g2_font_unifont.c」的檔案。用記事本開啟後，會看到以下畫面。稍後需要將這個檔案的內容，更新到中文字庫檔內。
(4) 複製上述檔案的內容，更新到「u8g2_fonts.c」字庫檔
「u8g2_fonts.c」字庫檔的路徑在「U8g2\src\clib」目錄內，可用記事本開啟，開啟檔案後，找到「u8g2_font_unifont_t_chinese1」這個陣列。將步驟(3)圖片的紅色三角形間的資料複製起來，置換 「u8g2_fonts.c」檔案的「u8g2_font_unifont_t_chinese1」陣列內容如下圖。而陣列的數量也要改成步驟(3)圖片紅框處的數字，如下圖紅色框處。
(5) 編譯並上傳程式到 Arduino
程式編譯並上傳完成後，就可以看到「測試」兩個字了。
[安裝程式庫Library]
本實作需要安裝以下程式庫：這個程式庫可以直接從 Arduino IDE 功能表選單，選擇 [草稿碼 Sketch] → [匯入程式庫 Include Library] → [管理程式庫 Manage Libraries...]，在出現的視窗搜尋處輸入 u8g2 進行安裝。但會少了本篇實作會用到的 tools 目錄，可以將 Github 上的程式庫下載後，再將 tools目錄複製到 Arduino Library 所在的 u8g2 目錄內即可。
如為下載程式庫(Library)安裝方法請參考另一篇文章: Arduino筆記：安裝 Arduino IDE 程式庫(Library)。
[自訂中文字型庫]
以下是製作的步驟與方法：(1) 找出中文字的 Unicode
到線上 Unicode 轉換的網站找出中文字的 Unicode，網站：Unicode 編碼轉換工具 畫面如下。並將轉換的結果全選複製起來，稍後要貼到字庫文字檔中。
(2) 編輯 chinese1.map 檔案
用記事本開啟 u8g2程式庫目錄(U8g2\tools\font\build)內的 chinese1.map 檔案，將上述的 Unicode 字碼貼在最後面，並將「\u」改成「$」，如數量比較多，可以用記事本內取代的功能，一次改掉全部的「\u」。
(3) 執行轉檔程式 bdfconv.exe
開啟 DOS 視窗，將目錄切換(使用 cd 指令)更換到「U8g2\tools\font\bdfconv」路徑下，執行以下指令：
bdfconv.exe -v ../bdf/unifont.bdf -b 0 -f 1 -M ../build/chinese1.map -d ../bdf/7x13.bdf -n u8g2_font_unifont -o u8g2_font_unifont.c
(4) 複製上述檔案的內容，更新到「u8g2_fonts.c」字庫檔
「u8g2_fonts.c」字庫檔的路徑在「U8g2\src\clib」目錄內，可用記事本開啟，開啟檔案後，找到「u8g2_font_unifont_t_chinese1」這個陣列。將步驟(3)圖片的紅色三角形間的資料複製起來，置換 「u8g2_fonts.c」檔案的「u8g2_font_unifont_t_chinese1」陣列內容如下圖。而陣列的數量也要改成步驟(3)圖片紅框處的數字，如下圖紅色框處。
(5) 編譯並上傳程式到 Arduino
程式編譯並上傳完成後，就可以看到「測試」兩個字了。
[材料]
- Arduino UNO x1
- ST7920 (LCD12864)液晶顯示器 x1
- 10K 可變電阻 x1
- 麵包板 x2
- 排線 n 條
[接線圖]
| Arduino Uno | ST7920(12864) LCD | B10K可變電阻 |
|---|---|---|
| GND | GND | - |
| +5V | VCC | - |
| D13 | E | - |
| D10 | RS | - |
| D11 | R/W | - |
| GND | PSB | - |
| 3.3V | BLA | - |
| GND | BLK | - |
| - | VOUT | 左側接腳 |
| - | VO | 中央接腳 |
| GND | - | 左側接腳 |
[程式]
#include <Arduino.h>
#include <U8g2lib.h>
#ifdef U8X8_HAVE_HW_SPI
#include <SPI.h>
#endif
#ifdef U8X8_HAVE_HW_I2C
#include <Wire.h>
#endif
U8G2_ST7920_128X64_F_SW_SPI u8g2(U8G2_R0,13,11,10,8);
void setup(void) {
u8g2.begin();
u8g2.enableUTF8Print(); // 啟動 UTF8 支援
}
void loop(void) {
u8g2.setFont(u8g2_font_unifont_t_chinese1); // 使用 chinese1字型檔
u8g2.setFontDirection(0);
u8g2.clearBuffer();
u8g2.setCursor(0, 15);
u8g2.print("Hello World!");
u8g2.setCursor(0, 40);
u8g2.print("中文測試：");
u8g2.sendBuffer();
u8g2.drawBox(5, 5,20, 20);
delay(1000);
}
張貼留言