注目キーワード

【Arduino】ディスプレイ付きマイコン「M5StickC Plus」日本語表示の方法!(efont ライブラリ)

すけろく
M5StickC Plusに英語を表示することは
画面制御の記事で行えたが、日本語は表示できないのか?
げんろく
いや、方法はあるぞ。
eFontライブラリをM5StickC Plusで実行できるように
修正して提供してくれているものを使うのだ。
すけろく
ぜひ、やってみたいの~
この記事では、Arduino IDEを使ってM5StickC Plusのディスプレイに日本語を表示させるための方法を紹介します。
今回使用するライブラリは、「tanakamasayuki」さんがM5StickC Plusに対応していただいている「efont Unicode Font Data」ライブラリを使用します。
GitHub

efont Font Data for Arduino. Contribute to tanakamasayuki/ef…

図形描画などの基本的な画面制御については、次の過去記事で紹介していますのでどうぞ。
関連記事

すけろく M5StickC Plusも時刻同期までできた。 うまくいっておるな。 げんろく ああ、「M5StickC」向けに作成したプログラムが 微修正で実行できるからありがたい。 […]

 

 

今回使用するマイコンはこちら!

M5StickC Plus
画面付きで小型のマイコンです。旧版のM5StickCから、ディスプレイサイズ、バッテリ容量が変更になっています。ブザーも実装されました。通信(WiFi/Bluetooth)機能、6軸加速度センサーも搭載されています。
Aruduino で開発できます。Amazonで確認

旧版との違いを意識してまとめて行きます。

これからはじめる方にお勧めの参考図書はこちら!

 

この記事では、最終的に次の画像のように画面上に日本語を表示させることを目指します。

 

さあ、早速作ってみましょう!

 

M5StickC Plusに日本語を表示させるには?

M5StickC Plusにはディスプレイ装置が実装されていて、英語表記であれば、Arduino IDE用のライブラリ「M5.Lcd」で表示が可能でした。

では「日本語」などのUnicodeで表現される文字はどうすればよいでしょうか。

efont Unicode BDF Font Dataとは?

/efont/ (電子書体オープンラボ)という、電子書体に関する情報交換を行なうための オープンラボがあります。

ここでは、電子書体および関連プログラムの共同開発や配布もされています。

この中の「efont-unicode-bdf」をもとにArduino用のフォントライブラリとして公開されているのが「efont Unicode BDF Font Data」です。

このライブラリで提供されるのは、16ピクセルフォントになります。

 

表現可能なフォントは?

「efont Unicode BDF Font Data」で対応されているフォントは次の通りです。

フォント ライブラリ内の対応ヘッダファイル 文字数 フォント容量
すべて efontEnableAll.h 21,727 738,718
ASCII efontEnableAscii.h 191 6,494
日本語 efontEnableJa.h 10,835 368,390
日本語(常用+α) efontEnableJaMini.h 4,107 139,638
CJK漢字 efontEnableCJK.h 19,379 658,886
簡体字中国語 efontEnableCn.h 18,077 614,618
繁体字中国語 efontEnableTw.h 13,555 460,870
韓国語 efontEnableKr.h 8,319 282,846

 

16ピクセルフォントなので、1文字あたり32Byteの字形データ(PROGMEM領域)と、UTF16の文字コードテーブルで2Byte使うので、1文字あたり34Byteです。

 

文字描画関数

フォントを画面表示するには、次のものを使用します。

項番 関数 説明
printEfont(char *str ) *str 表示文字列を描画します。
printEfont(char *str, int x, int y ) *str 表示文字列を指定されたカーソル位置(x、y)に描画します。
printEfont(char *str, int x, int y, int textsize) *str 表示文字列を指定されたカーソル位置(x、y)にtextsizeのフォントサイズで描画します。
printEfont(TFT_eSprite *sprite, char *str) *spriteで指定されたカーソル位置やテキストサイズ、カラー、背景色などをもとに*str 表示文字列を描画します。
項番1のように、テキストの位置(カーソル位置)、フォントサイズを「printEfont()」で指定しない場合は、「M5.Lcd」クラスの以下の各関数で事前に指定したものが適用されます。
関数 説明
M5.Lcd.setCursor(int x, int y) 画面の中のカーソルの位置を指定します。
M5.Lcd.setTextSize(int size) フォントサイズ(倍数)を指定します。

 

また、フォントカラーや背景色を指定する場合は、「M5.Lcd」クラスの以下の各関数で指定します。

関数 説明
M5.Lcd.setTextColor(Fcolor, Bcolor) フォントの色(Fcolor)および背景色(Bcolor)を指定します。

 

プログラム例

簡単なプログラム例は以下に紹介します。

 

M5StickC Plusに書き込むと次のように表示されます。

 

 

 

M5StickC Plusを日本語対応してみよう

それでは、ディスプレイに日本語表記に対応した時計を表示してみましょう。

過去記事で使用したプログラムを元に、年月日、曜日などの表示を日本語にしてみます。

時計表示&描画テストプログラム

Arduino IDEを起動して、「ファイル」メニューから「新規ファイル」を選択し、表示されるスケッチに以下のように記述します。

 Arduino IDE スケッチ例

 

注意点としては、起動時にWi-Fiへ接続して時刻同期を行いますが、その際のWi-Fiアクセスポイントの情報はM5StickCにあらかじめ保存したものを読みだしています。時刻同期後はWiFi接続を解除するようにしています。
事前に保存する方法は、次の記事で紹介しています。

関連記事

すけろく M5StickC Plusの大まかな違いは分かった。 WiFi接続をしてみるか。 げんろく そうだな。 M5StickCと同じように使えるのか確認してみよう。 この記事では、M5[…]

 

 M5StickC Plusへの書き込み

  1. 「ファイル」メニューから「名前を付けて保存」で任意の名前を付けて保存します。
  2. 「ツール」メニューから「ボード」情報を確認し、M5StickC Plusであるか確認します。
    この際、「シリアルポート」にマイコンを接続したCOMポートが指定されているかも確認します。
  3. 「ツール」メニューから「Patition Scheme」を「”No OTA(Large APP)”」にします。
    ※ここを変更しないと、スケッチが大きいというエラーになります。
  4. 「ツール」メニューから「シリアルモニタ」を選択してシリアルモニタを起動します。
  5. 「スケッチ」メニューから「マイコンボードに書き込む」を選択します。

 

 プログラム実行結果

M5StickC Plusのディスプレイに時計が表示されれば成功です。

 

さて、これで日本語表記にも対応できました。

今回の記事は以上になります。

最後までご覧いただきありがとうございました。

 

今回使用するマイコンはこちら!

M5StickC Plus
画面付きで小型のマイコンです。旧版のM5StickCから、ディスプレイサイズ、バッテリ容量が変更になっています。ブザーも実装されました。通信(WiFi/Bluetooth)機能、6軸加速度センサーも搭載されています。
Aruduino で開発できます。Amazonで確認

旧版との違いを意識してまとめて行きます。

これからはじめる方にお勧めの参考図書はこちら!