arduinoでOLEDディスプレイに日本語表示する

# はじめに

https://qiita.com/BB-KING777/items/cd4610915be382decedb

この記事ではLovyanGFXを用いて、日本語を表示していましたが**u8g2ライブラリ**を使えば、さらに簡単に日本語表示が可能ということがわかりました。

そのため、今回はu8g2ライブラリについて基本的な事項を解説します。

![IMG_4835 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337685/3bbe40bd-11bf-b1b5-7ab7-a5d6cdca6cf0.jpeg)
↑↑↑猫の毛ついてます（笑）

# u8g2ライブラリのインストール

arduino IDEのライブラリマネージャから行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337685/13243749-25ab-b75a-9096-72e115109dab.png)

すぐに見つかると思います。

# 日本語フォントについて
U8g2ライブラリには3種類の日本語フォントが最初から入っています。

詳細についてはU8g2のgithubリポジトリを確認してください

https://github.com/olikraus/u8g2/wiki/fntgrpefont

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337685/4a4be43e-7173-593b-f470-27c34532aebd.png)


# U8g2のコンストラクタ設定と初期化手順

U8g2ライブラリを利用するためにはコンストラクタの呼び出しと`begin()`関数の2つのステップで行われます。

## コンストラクタ
```
U8G2_[ディスプレイ型番]_[解像度]_[通信方式] u8g2(回転設定, リセットピン, その他のピン...);
```

この形式で行います。SSD1306で128×32のディスプレイの場合

```C++
U8G2_SSD1306_128X32_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);
```

### ディスプレイの設定
`NONAME`は特定の**ディスプレイ製造元などがない**ということを示しています。amazonで購入したディスプレイなどはこれでいいと思います。
`SSD1306_128X32_NONAME`は**製造元がない128X32のSSD1306を使用する**ということです

### 通信方式の設定
`F_HW_I2C`は**通信方式**を表しています。

通信方式のオプションは
- `F_HW_I2C`: フルバッファ、ハードウェアI2C
- `1_SW_I2C`: ページバッファ、ソフトウェアI2C
- `F_4W_HW_SPI`: フルバッファ、4線式ハードウェアSPI
- `F_SW_SPI`: フルバッファ、ソフトウェアSPI など。
等があります。



### 回転方向の設定
```C++
u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);
```
この項目は回転方向、リセットピンの設定、I2CやSPIのピンの設定です。

回転方向のオプションは
- `U8G2_R0`: 回転なし
- `U8G2_R1`: 90度回転
- `U8G2_R2`: 180度回転
- `U8G2_R3`: 270度回転
- `U8G2_MIRROR`: ミラー表示
があります。

### リセットピンの設定
リセットピンを設定する場合は
```C++
U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ 13);
```
のように記述します。

リセットピンを使用しない場合は`U8X8_PIN_NONE`と記述します。

### I2C/SPIのピン設定
**I2Cの場合**は、ピンはあらかじめ設定されているため**未表記**で大丈夫です

**SPIの場合**は、`Clock`,`data`,`CS`,`reset`等を設定する必要があります。

```C++
U8G2_ST7920_128X64_F_SW_SPI u8g2(U8G2_R0, /* clock=*/ 13, /* data=*/ 11, /* CS=*/ 10, /* reset=*/ 8);
```

## `begin()`メソッド

`setup()`関数内で`u8g2.begin();`を呼び出します。

これが実際に初期化処理やディスプレイの設定を行います。


## `enableUTF8Print()`メソッド
**日本語表示を行う場合**は、`setup()`関数内で`enableUTF8Print()`を宣言する**必要**があります。

`u8g2.enableUTF8Print()`と記述します。

## そのほかメソッド
```C++
void setup() { 
	u8g2.begin(); 
	// UTF-8エンコードされた文字列の使用を有効化 
	u8g2.enableUTF8Print(); 
	// ディスプレイのコントラストを設定（0-255） 
	u8g2.setContrast(128); 
	// ディスプレイの上下反転を設定
	u8g2.setFlipMode(1); 
}
```


# U8g2で実際に表示する
ここからはloop関数内やそのほかの関数で利用する際の関数やメソッドを説明します。

## `clearBuffer()`メソッド
`clearbuffer()`メソッドは、ディスプレイの**バッファをクリア**して、**白紙**に戻します。

```C++
u8g2.clearBuffer()
```
と記述します。

## `setFont()`メソッド
`setFont()`メソッドは使用する**フォントを設定**します。
以下にフォントの一例を表示します。

日本語を表示するフォント1: `u8g2_font_unifont_t_japanese1`
日本語を表示するフォント2: `u8g2_font_unifont_t_japanese2`

`u8g2_font_unifont_t_japanese1`では**ひらがな**/**カタカナ**/**基本的な最低限の漢字**が含まれています。

`u8g2_font_unifont_t_japanese2`では**ひらがな**/**カタカナ**/**基本的な漢字**が含まれています。

そのほかフォントは以下のURLにあります。

https://github.com/olikraus/u8g2/wiki/fntlist8

```C++
u8g2.setFont(u8g2_font_unifont_t_japanese1)
```

## `setCursor()`メソッド
`setCursor()`メソッドは、テキストを描画する位置を決めます。**(0,0)は左上の画面の角**になります。
`setCursor()`メソッドは、`Print()`メソッドとセットで使うのが基本です。

```C++
u8g2.setCursor(0,20);
u8g2.print("Hello");
u8g2.sendBuffer();
```
とすれば、以下の画像のようになります。

注意:**指定した位置は表示する文字の下端**になります。


![u8g2-coordinate-system.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337685/e88f96c7-0499-8a30-7d46-51f767bda4ae.png)


## `print()`メソッド
`print()`メソッドは画面に表示したい文字を入力します。
```C++
u8g2.setCursor(0,20);
u8g2.print("Hello");
u8g2.sendBuffer();
```

## `sendBuffer()`メソッド
`sendBuffer()`メソッドはprintで得た文字列を実際のディスプレイに表示するために、バッファに送信します。

# 使用例
これまでの関数などを使用して以下の文字が表示できます。

![IMG_4834 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337685/b2abfc79-0125-f774-f492-1d7ea67e198b.jpeg)



```C++
#include <U8g2lib.h>

  

U8G2_SSD1306_128X32_UNIVISION_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);

  

void setup() {

  u8g2.begin();

  u8g2.enableUTF8Print();  // UTF-8エンコードされた文字列の使用を有効化

  u8g2.setFont(u8g2_font_unifont_t_japanese1);  // 日本語フォントを設定

  u8g2.setFontMode(1);  // テキストの背景を透明に設定

  u8g2.setDrawColor(1);  // 文字色を白に設定

}

  

void loop() {

  u8g2.clearBuffer();

  u8g2.setCursor(0, 12);  // 1行目の位置

  u8g2.print("Hi、この記事は");

  u8g2.setCursor(0, 28);  // 2行目の位置

  u8g2.print("いかがでしたか");

  u8g2.sendBuffer();

  delay(1000);  // 1秒間表示を維持

}
```