注目キーワード

【Arduino】「M5Stack」日本語表示しよう!(efont)

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

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

作成するプログラムとしては、次の2つになります。
  • 基礎的な日本語表示プログラム
  • 時計の日付、曜日を日本語表示するプログラム

 

M5Stackに時計を表示する方法については、以下の記事で紹介しています!

関連記事

すけろく 前回は、Wi-Fiアクセスポイントに 接続することができた。 次は時刻同期かな。 げんろく うむ。 時刻同期は、全ての基本だからな。 実装してみるか。 この記事では、M5[…]

 

基本的な日本語表示プログラムを作る

まずは、efontライブラリになれるところからやっていきましょう。

M5Stackにはディスプレイ装置が実装されていて、英語表記であれば、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)を指定します。

 

ライブラリを追加する

今回使うライブラリ「efont Unicode Font Data」をインストールします。(ライブラリ名にはBDFはつきません)

※プログラムを実行した際の「efont Unicode Font Data」のバージョンは「1.0.5」です。

ライブラリのインストールは、次の記事で紹介しています。

関連記事

本記事は、Arduino IDE 1.8.xバージョンのライブラリ管理方法を紹介した記事です。 Arduino IDEは、より新しいバージョン「2.0.x」が発表されています。     機能がよりリッチになった「Ardu[…]

 

簡単な日本語表示プログラム

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

 Arduino IDE スケッチ例

 

 M5Stackへの書き込み

  1. 「ファイル」メニューから「名前を付けて保存」で任意の名前を付けて保存します。
  2. 「ツール」メニューから「ボード」情報を確認し、次のものを選択します。この際、「シリアルポート」にマイコンを接続したCOMポートが指定されているかも確認します。
    ボード:「M5Stack Arduino」-「M5Stack-Core-ESP32」または、「M5Stack-Core2」または「M5Stack-Tough」
    「Partition Scheme」で「Not OTA(Large App)」を選択します。
  3. 「ツール」メニューから「シリアルモニタ」を選択してシリアルモニタを起動します。(転送速度は「115200」です)
  4. 「スケッチ」メニューから「マイコンボードに書き込む」を選択します。

 

 プログラム実行結果

M5Stackのディスプレイ上に次のように日本語が表示されます。

 

 

 

時計の日付、曜日を日本語表示するプログラムを作る

それでは、前回作ったM5Stack時計の日付、曜日を日本語表示化してみましょう。

プログラムを修正する箇所は、efontライブラリの定義部と時刻を表示する関数「Clock_screen_display()」内の表示処理になります。

 

プログラムの作成

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

 Arduino IDE スケッチ例

 

 M5Stackへの書き込み

  1. 「ファイル」メニューから「名前を付けて保存」で任意の名前を付けて保存します。
  2. 「ツール」メニューから「ボード」情報を確認し、次のものを選択します。この際、「シリアルポート」にマイコンを接続したCOMポートが指定されているかも確認します。
    ボード:「M5Stack Arduino」-「M5Stack-Core-ESP32」または、「M5Stack-Core2」または「M5Stack-Tough」
    「Partition Scheme」で「Not OTA(Large App)」を選択します。
  3. 「ツール」メニューから「シリアルモニタ」を選択してシリアルモニタを起動します。(転送速度は「115200」です)
  4. 「スケッチ」メニューから「マイコンボードに書き込む」を選択します。

 

 プログラム実行結果

M5Stackのディスプレイ上に次のように時計の日付、曜日が日本語表示されます。

 

編集後記

いかがだったでしょうか。

さて、これで日本語表示までできました。

今後、他の機能を使ったプログラムの実行例などをご紹介していきます。

ご期待ください。

 

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

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

 

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