Arduino筆記(103):使用 u8g2 程式庫製作自訂中文字

上一篇實作用 u8g2 繪製圖形及顯示中文字,發現僅能顯示部分簡體中文,無法顯示的簡體及繁體中文字型。本篇要瞭解一下如何使用 u8g2 這個程式庫製作字型,讓繁體中文字型顯示在 LCD 或 OLED顯示器上。u8g2 的程式庫功能強大,且支援的顯示器種類非常多,本實作例子繼續使用 ST7920(TLCD12864)為例,但不限於此顯示器,只要設定驅動的方式對應正確的顯示器即可。由於 u8g2 官方的程式庫可以顯示的中文字型不多,如果要顯示其他中文字型就要自己製作字型檔。以「中文測試」這四個字來說,發現「中文」兩個字,有內建簡體字碼,可以正常呈現,但是「測試」這兩個繁體字,就無法顯示在顯示器上。下圖為沒有自訂字型庫的程式執行結果:
以下是完成自訂字型的轉換,讓 u8g2 讀取 unicode 的字型顯示在畫面上,可以看到多了「測試兩個字」。以下就用「測試」這兩個字來實作如何使用 u8g2 自製字型庫,呈現在顯示器上,如下圖。

[安裝程式庫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」。
如果不知道 u8g2 的程式庫路徑,可看一下 Arduino IDE 介面,選擇「檔案」→ 「偏好設定」,知道目前程式庫的預設路徑。

(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
執行完成後,會在同目錄下產生一個「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 UnoST7920(12864) LCDB10K可變電阻
GNDGND-
+5VVCC-
D13E-
D10RS-
D11R/W-
GNDPSB-
3.3VBLA-
GNDBLK-
-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);
}

[實作結果]

如最上方的兩張照片。

[參考資料]


Share on Google Plus

0 Comments:

張貼留言