注目キーワード

【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」向けに作成したプログラムが 微修正で実行できるからありがたい。 […]

 

 

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

created by Rinker
M5Stack
¥4,791 (2024/04/14 08:42:06時点 Amazon調べ-詳細)
画面付きで小型のマイコンです。旧版のM5StickCから、ディスプレイサイズ、バッテリ容量が変更になっています。ブザーも実装されました。通信(WiFi/Bluetooth)機能、6軸加速度センサーも搭載されています。
Aruduino で開発できます。

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

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

created by Rinker
¥3,089 (2024/04/14 19:50:15時点 Amazon調べ-詳細)
created by Rinker
¥2,310 (2024/04/14 16:54:31時点 Amazon調べ-詳細)
created by Rinker
技術評論社
¥3,278 (2024/04/14 20:29:51時点 Amazon調べ-詳細)
created by Rinker
¥2,420 (2024/04/14 19:50:15時点 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のディスプレイに時計が表示されれば成功です。

 

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

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

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

 

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

created by Rinker
M5Stack
¥4,791 (2024/04/14 08:42:06時点 Amazon調べ-詳細)
画面付きで小型のマイコンです。旧版のM5StickCから、ディスプレイサイズ、バッテリ容量が変更になっています。ブザーも実装されました。通信(WiFi/Bluetooth)機能、6軸加速度センサーも搭載されています。
Aruduino で開発できます。

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

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

created by Rinker
¥3,089 (2024/04/14 19:50:15時点 Amazon調べ-詳細)
created by Rinker
¥2,310 (2024/04/14 16:54:31時点 Amazon調べ-詳細)
created by Rinker
技術評論社
¥3,278 (2024/04/14 20:29:51時点 Amazon調べ-詳細)
created by Rinker
¥2,420 (2024/04/14 19:50:15時点 Amazon調べ-詳細)

M5StickC Plus の他の記事はこちらからどうぞ!

すけろく んーどうしたものか。 げんろく どうした? 深刻な顔をして。 すけろく M5Stackにプログラムを書き込んだら 起動しなくなってな。 電源ON/OFFでも無理なのだ。 げんろく 書き込んだプログラムか、バッテリーの 過放電か。工場出荷時に戻してみてはどうだ? この記事では、M5Stackにプログラムを書き込んだ結果、うまく動作しなくなった場合の対処方法を記載します。 ご紹介するのは「工 […]

すけろく 以前、Bluetooth Serialを使って データをPCに送信したが、何か良い使い方はないかな。 げんろく 最近、土壌水分センサーとやらを手に入れた。 これで計測した水分量をPCに送信してみるか? すけろく それは良いな。 今後、使い道が広がっていきそうな予感がする。 この記事では、ディスプレイ付きマイコン「M5StickC Plus」に搭載されている「Bluetooth」を使って、 […]

すけろく 前回の記事で6軸IMUのデータをPCでグラフ化したが、 うまく傾き検知ができているようだ。 げんろく そうだな。 微細な傾きも検知できているようだ。 すけろく 傾き検知の機能を使って何かできないかな? げんろく なら、机を離れる時にノートなどの見守りを してくれる「デスク見守り君」を作るぞ! 今回の記事では、ディスプレイ付きマイコン「M5StickC Plus」を使って、「デスク見守り君 […]

すけろく これまで、M5StickC PlusでWi-Fi接続を使ったデータの やり取りは見てきたが、Bluetoothはまだだな。 げんろく 確かに。 Bluetoothについてはまだだった。 すけろく 近距離ならBluetooth通信も有効だ。 何か作れないかの。 げんろく では、今回はBluetoothを使った通信の一つ、 Bluetooth Serialについて触れてみよう。 この記事では […]

すけろく M5StickC Plusには、筐体の動きや傾きを検知する センサーが標準で搭載されているらしいな。 げんろく 6軸IMUのことか。 加速度、角速度を測るセンサーだ。 計算で姿勢角度も分かる。 すけろく んんっ!? 難しい単語が出てきたな。。 げんろく よし。 物体の動きを計測する要素について M5StickC Plusを使って試してみるぞ! この記事では、ディスプレイ付きマイコン「M5 […]

すけろく 前回作ったお天気表示プログラムは なかなか、評判が良いな。 げんろく うれしいな。 ただ、お天気情報は起動時のみ取得というところが 課題だ。 げんろく 今回は、1時間に1回お天気情報を後進するように してみよう。 この記事では、Arduino IDEを使ってM5StickC Plusのディスプレイに、お天気情報を1時間に1回更新表示する方法を紹介します。 画面描画は主に、Adafruit […]

すけろく 汎用ライブラリの「AdafruitGFX」にビットマップ画像を ディスプレイ表示するものがあるそうな。 げんろく いかにも。機能は実装されている。 ちょうど、アイコンをアニメーションさせたいと 思っておったわ。 すけろく うむ。 面白そうだな。やってみるか! げんろく わかった。 今回は、単色のアイコンを使って天気情報を 視覚的に伝える画面を作ってみよう。 この記事では、Arduino […]

すけろく 標準ライブラリでの画面描画はできた。 しかし、M5StickC Plus向けのライブラリなので 汎用性がないな。 げんろく たしかに。 M5Stackや他のAruduino機器でも使えるものが必要だな。 すけろく そのようなものがあるのか? げんろく よし。今回は、汎用的に使えるライブラリを紹介しよう。 Adafruit社が公開している「Adafruit_GFX」だ。 この記事では、Ar […]

すけろく 前回の記事でJSON形式データは取り扱うことができた。 これでインターネットにあるサービスを活用できるな。 げんろく そうだな。 今回は天気情報を提供しているサイトからJSON形式データを 取得してM5StickC Plusの画面に表示してみよう。 前回の記事では、次の画像のように、Arduino IDEを使い、M5StickC Plusのディスプレイにインターネットのサイトから取得した […]

すけろく 普段、何気なくブラウザでインターネットサイトを 見ているが、URLの最初のHttpsとはなんだ? げんろく httpsはHttpの通信を暗号化して行うものだ。 ちょっと違いを押さえてみるか。 すけろく あと、Arduino IDEでプログラムを作る際の 注意点なんかも頼む。 げんろく わかった。 プログラムに組み込む方法も見てみよう。 皆さんが普段パソコン(PC)やスマホ、タブレットのブ […]

すけろく Pythonなどでは、JSONでデータを扱っていたが、 Arduino IDEで扱うことはできるのか? げんろく それなら「ArduinoJSON」ライブラリがあるぞ! 取り扱うデータで使用するメモリサイズの 計算ツールもあるから便利だ。 この記事では、Arduino IDEを使ってM5StickC PlusのプログラムでJSON形式を取り扱う方法を紹介します。 今回使用するライブラリは […]

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

すけろく M5StickC Plusも時刻同期までできた。 うまくいっておるな。 げんろく ああ、「M5StickC」向けに作成したプログラムが 微修正で実行できるからありがたい。 すけろく そういえば、画面が大きくなったな。 値段も大きくなっているが。。。 げんろく 今回は新しいM5StickC Plusの 画面制御まわりを見てみるか。 この記事では、Arduino IDEを使ってM5Stick […]

  すけろく 前回はWiFi接続することができた。 次は時刻同期がしたいな。 げんろく たしかに。時刻同期は基本だからな。 以前M5StickCでやったプログラムをベースに 実装してみよう。   この記事では、M5StickC PlusをアクセスWi-Fiアクセスポイントに接続し、インターネットの時刻サービス(NTPサーバー)と時刻を同期する方法について紹介します。 今回使用す […]

すけろく M5StickC Plusの大まかな違いは分かった。 WiFi接続をしてみるか。 げんろく そうだな。 M5StickCと同じように使えるのか確認してみよう。 この記事では、M5StickC Plusに実装されているWiFi機能を使って、Wi-Fiルータに接続する方法について紹介します。 今回使用するマイコンはこちら! 画面付きで小型のマイコンです。旧版のM5StickCから、ディスプレ […]

すけろく なんか、M5StickCが「在庫なし」になっている。 げんろく ああ、新しい「M5StickC Plus」が出たからな。 旧版は在庫限りになっているのだろう。 すけろく うむ。画面が大きくなったな。 値段も大きくなっておる。 げんろく そうだな。 M5StickC PlusでLチカでもしてみるか。 今回の記事では、「M5StickC Plus」を開発環境であるArduino IDEを使っ […]