Arduino筆記(102)：u8g2 程式庫繪製圖形及顯示中文字

以下實作的照片可以看到顯示中文字，這是我買的這個顯示器內建部分簡體中文字型，由於 u8g2 內建的字型不多，無法對應的字型就沒辦法呈現在螢幕上。下一篇將介紹如何製作可以顯示unicode的中文字型檔，讓顯示器正常顯示所要顯示的中文字。本篇將繼上一篇在實作讓 LCD12864 顯示英數字、簡體中文及圖形之後，繼續瞭解如何使用 u8g2 這個程式庫繪製圖形以及顯示中文字型。

u8g2可以支援的顯示器很多，如要知道哪些顯示器可以使用 u8g2 程式庫來顯示在顯示器上，請參考： Github:olikraus/u8g2

[安裝程式庫Library]

本實作需要安裝以下程式庫：

olikraus / u8g2

這個程式庫可以直接從 Arduino IDE 功能表選單，選擇 [草稿碼 Sketch] → [匯入程式庫 Include Library] → [管理程式庫 Manage Libraries...]，在出現的視窗搜尋處輸入 u8g2 進行安裝。但會少了本篇實作會用到的 tools 目錄，可以將 Github 上的程式庫下載後，再將 tools目錄複製到 Arduino Library 所在的 u8g2 目錄內即可。

如為下載程式庫(Library)安裝方法請參考另一篇文章: Arduino筆記：安裝 Arduino IDE 程式庫(Library)。

[U8g2程式庫Library]

[基本函數]
⬝ u8g2.begin()
說明：初始化 U8G2 程式庫，通常用在 setup()內。

⬝ u8g2.clear()
說明：清除緩衝區"Buffer"內的所有圖元點，游標回到左上角原點。

⬝ u8g2.clearDisplay()
說明：清除顯示中所有圖元。此過程在begin()中調用。在程式中一般用不上，也是通過sendBuffer和clearBuffer函數顯示出來，一樣的處理方式。

⬝ u8g2.clearBuffer()
說明：清除記憶體中的所有緩衝區內的圖元，之後可以用sendBuffer函數來把緩衝區“Buffer”在螢幕上顯示出來，以便清除螢幕。

⬝ u8g2.initDisplay()
說明：初始化設定顯示器。

⬝ u8g2.setPowerSave(is_enable)
說明：設定是否開啟省電模式。0：表示不使用省電模式。1：表示啟用顯示器省電模式，螢幕上不會顯示內容。

⬝ u8g2.home()
說明：讓游標回到左上角原點。

⬝ u8g2.Print()
說明：顯示當前游標位置用當前設置的字體（內容）。游標位置可以用setCursor函數。字體可以用setFont函數。

[繪圖相關函式]
u8g2 繪圖座標原點在左上角，向右是 X 軸，向下是 Y 軸。以下說明各繪圖函式：

⬝ u8g2.drawBox(x，y, w, h) 畫一個空心四方形
⬝ u8g2.drawFrame(x, y, w, h) 畫一個實心四方形
說明：畫一個四方形。x，y是方框的左上角座標，w,h是寬和高，如果方框比顯示幕大，則多出部分不繪畫，也就是說不耗記憶體和出現錯圖。

⬝ u8g2.drawRBox(x，y, w, h, r) 繪製圓角實心方形
⬝ u8g2.drawRFrame(x，y, w, h, r) 繪製圓角空心方形
說明：畫一個四方圓角形。x，y是方框的左上角座標，w,h是寬和高，r是四個角的圓角半徑(r需小於 x/2 或 y/2)。

⬝ u8g2.drawCircle(x， y ，rad，opt) 畫空心圓
⬝ u8g2.drawDisc(x， y ，rad，opt) 畫實心圓
說明：畫一個圓，可選四個方向的半圓，X,Y是圓心的位置，rad是半徑。opt是選項，可以是以下各項值：

U8G2_DRAW_UPPER_RIGHT → 左上角弧度
U8G2_DRAW_UPPER_LEFT → 右上角弧度
U8G2_DRAW_LOWER_LEFT → 左下角幅度
U8G2_DRAW_LOWER_RIGHT → 右下角幅度
U8G2_DRAW_ALL → 全圓

⬝ u8g2.drawEllipse(x, y, rx, ry, opt) 畫一個空心橢圓形
⬝ u8g2.drawFilledEllipse(x, y, rx, ry, opt) 畫一個實心橢圓形
說明：畫一個空心橢圓形，和畫圓是非常相似的用法。x，y是橢圓形中心座標、rx是橢圓形水平線的半徑D，ry是垂直線的半徑、opt是選項，可以是以下各項值：

U8G2_DRAW_UPPER_RIGHT → 左上角弧度
U8G2_DRAW_UPPER_LEFT → 右上角弧度
U8G2_DRAW_LOWER_LEFT → 左下角幅度
U8G2_DRAW_LOWER_RIGHT → 右下角幅度
U8G2_DRAW_ALL → 全圓

⬝ u8g2.drawHLine(x, y ,w)
說明：繪製一條水平線。x,y是直線起始位置，w是長度。

⬝ u8g2.drawVLine(x ,y ,h)
說明：繪製一條垂直線。x,y是直線起始位置，h是高度。

⬝ u8g2.drawLine(x0, y0, x1, y1)
說明：畫一條平面直線，x0,y0是直線起始位置，x1，y1是直線終止位置。

⬝ u8g2.drawGlyph(x, y, 字集代碼)
說明：在x,y座標繪製代碼的符號，U8g2支持16位元的 unicode 字集，這個函式只能繪製存在於所使用的字體字集中的 unicode值，需要先設置字體及顏色。

⬝ u8g.drawTriangle(x0,y0, x1,y1, x2,y2)
說明：繪製實體三角形，x0,y0:第一個角座標，x1,y1:第二個角座標，x2,y2:第三個角的座標。

⬝ u8g2.firstPage()/nextPage()
說明：繪製命令。firstPage()方法會把當前頁碼位置變成0。修改內容放置於firstPage和nextPage之間，每次重新更新所有內容。這個方法使用的記憶體空間比sendBuffer少。

⬝ u8g2.sendBuffer()
說明：繪製緩衝區的內容，sendBuffer佔用的記體較大。

⬝ u8g2.setDrawColor(color)
說明：設置繪製顏色

⬝ u8g2.drawXBM(x, y, w, h, bitmap)/drawXBMP(x, y, w, h, bitmap)
說明：繪製圖像。在x,y座標，顯示寬和高的bitmap圖片。

⬝ u8g2.setBitmapMode(is_transparent)
說明：設置繪圖模式。0 繪製背景颜色(不透明)，此為預設值。1：不繪製背景颜色(透明)。

⬝ drawPixel(x，y)
說明：畫一個像素點。x,y是畫點的座標位置。

[字符顯示相關函式]
⬝ u8g2.drawStr(x, y, s)
說明：在座標 x,y 位置顯示字串，一般都配搭setFont函數設定字體使用，不能繪製 encoding 超過256的，也就是只能顯示英數字符號，超過256需要用 drawUTF8()或drawGlyph()顯示。s字串要加雙引號""。

⬝ u8g2.drawUTF8(x, y, s)
說明：在左下角座標 x,y 位置繪製 UTF8 編碼的字符，大部分Arduino 開發板已有支援。

⬝ u8g2.getDisplayHeight()
說明：取得顯示器的高度

⬝ u8g2.getDisplayWidth()
說明：取得顯示器的寬度

⬝ u8g2.getMaxCharHeight()
說明：取得當前字體裡的最大字符的高度。

⬝ u8g2.getMaxCharWidth()
說明：取得當前字體裡的最大字符的寬度。

⬝ u8g2.getStrWidth()
說明：取得字串的像素寬度。

⬝ u8g2.getUTF8Width()
說明：取得 UTF-8 字符串的像素寬度。

⬝ u8g2.setAutoPageClear(mode)
說明：設置自動清除緩衝區。0：表示關閉，1：表示開啟。

⬝ u8g2.setCursor(x, y)
說明：設定繪製游標位置

⬝ u8g2.setDisplayRotation(u8g2_cb) 說明：設置顯示器的旋轉角度。

U8G2_R0 不旋轉
U8G2_R1 旋轉90度
U8G2_R2 旋轉180度
U8G2_R3 旋轉270度
U8G2_MIRROR 不旋轉，但影像是水平鏡像呈現

⬝ u8g2.enableUTF8Print()
說明：啟用 UTF8字集，許可UniCode向print發送字串。這個函數通常在begin（）後調用。

⬝ u8g2.disableUTF8Print()
說明：禁用 UTF8字集（Unicode字形檔），預設是開啟的。

⬝ u8g2.setFontDirection(dir)
說明：設定顯示字串或字形的繪製方向。

0 ：旋轉 0 度，顯示從左到右。
1 ：旋轉 90度，顯示從上到下。
2 ：旋轉 180度，顯示右到左。
3 ：旋轉 270度，顯示從下到上。

⬝ u8g2.setFont(*font)
說明：設置字體集。中文字符集需要較大的記憶體，Uno等較小的開發板常會超過記憶體用量，請更換Mega或其他較大記憶體的開發板。

[材料]

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.clearBuffer();
  u8g2.drawLine(40, 35, 120, 35);    // 畫一條線
  u8g2.drawFilledEllipse(100, 15, 20, 10, U8G2_DRAW_ALL);  // 畫橢圓形
  u8g2.drawBox(5, 5,20, 20);    // 畫方形    
  u8g2.drawCircle(50, 15, 10, U8G2_DRAW_ALL);  // 畫圓形
  u8g2.drawRFrame(5, 40,20, 20, 5);  
  u8g2.drawTriangle(40,40, 105,45, 90,58);  // 畫三角形
  u8g2.sendBuffer();
  delay(5000);

  u8g2.clear(); 
  u8g2.setFont(u8g2_font_unifont_t_chinese1);  
  u8g2.setFontDirection(0);  
  u8g2.drawStr(40,20,"Hello World!");
  u8g2.setFontDirection(1);
  u8g2.setCursor(10,0);
  u8g2.print("显示中文");
  u8g2.setFontDirection(2);  
  u8g2.drawUTF8(110, 40, "中文字体"); 
  u8g2.sendBuffer();
  delay(5000);         
}

Arduino筆記(102)：u8g2 程式庫繪製圖形及顯示中文字

[安裝程式庫Library]

[U8g2程式庫Library]

[材料]

[接線圖]

[程式]

[結果]

[參考資料]

Post a Comment

張貼留言

聯絡表單