ESP32-WROOM-32 の SPIFFS を使って、日本語漢字 美咲フォント を読み込む

自作ライブラリのダウンロード

今回は、新たに Arduino core for ESP32 の SPIFFS 用美咲フォントライブラリを作りました。
それに伴い、SPIFFS用 UTF8toSjis 変換ライブラリも作り、SSD1331 用ライブラリもバージョンアップしました。

因みに何回も申し上げておりますが、私はアマチュアなので動作保証はしません。
ただ、不具合等、何かお気づきの点がありましたらコメント等でご連絡いただけると助かります。

GitHub の以下のリンクから ZIP ファイルをダウンロードしていただき、Arduino IDE にインストールしてください。
ZIPファイルのまま Arduino IDE にインストールする方法は以下の記事を参照してください。
同じライブラリがある場合は必ず古いライブラリをフォルダごと削除してからインストールしてください。

GitHubにある ZIP形式ライブラリ のインストール方法 ( Arduino IDE )

ESP32_SPIFFS_UTF8toSJIS ライブラリ

文字コードの UTF-8 をShift_JIS に変換するライブラリです。
先に紹介した、変換テーブルファイル Utf8Sjis.tbl が SPIFFS フラッシュ上に保存されている必要があります。

https://github.com/mgo-tec/ESP32_SPIFFS_UTF8toSJIS

ESP32_SPIFFS_MisakiFNT ライブラリ

SPIFFS 用、８×８ドット日本語美咲フォントライブラリです。
単体では動作しません。
上記の ESP32_SPIFFS_UTF8toSJIS ライブラリが必要です。

https://github.com/mgo-tec/ESP32_SPIFFS_MisakiFNT

ESP32_SSD1331 ライブラリ

OLED SSD1331 モジュール用の自作ライブラリです。
今回、８×８ドットフォントを表示させる関数を追加して、バージョンを beta ver 1.4 としました。

https://github.com/mgo-tec/ESP32_SSD1331

OLED SSD1331 美咲フォント表示スケッチを入力

では、美咲フォントを OLED SSD1331 ディスプレイに表示させるサンプルスケッチを入力してみてください。

【ソースコード】 (※無保証　※PCの場合、ダブルクリックすればコード全体を選択できます)

#include "ESP32_SPIFFS_MisakiFNT.h"
#include "ESP32_SPIFFS_UTF8toSJIS.h"
#include "ESP32_SSD1331.h"

const char* UTF8SJIS_file = "/Utf8Sjis.tbl"; //UTF8 Shift_JIS 変換テーブルファイル名を記載しておく
const char* Misaki_Zen_Font_file = "/MSKG13KU.FNT"; //全角フォントファイル名を定義
const char* Misaki_Half_Font_file = "/mgotec48.FNT"; //半角フォントファイル名を定義

const uint8_t SCLK_OLED =  14; //SCLK
const uint8_t MOSI_OLED =  13; //MOSI (Master Output Slave Input)
const uint8_t MISO_OLED =  12; //これは実際は使っていない。MISO (Master Input Slave Output)
const uint8_t CS_OLED = 15;
const uint8_t DC_OLED =  21; //OLED DC(Data/Command)
const uint8_t RST_OLED =  4; //OLED Reset

ESP32_SSD1331 ssd1331(SCLK_OLED, MISO_OLED, MOSI_OLED, CS_OLED, DC_OLED, RST_OLED);
 
ESP32_SPIFFS_MisakiFNT MFR;

void setup() {
  Serial.begin(115200);
  ssd1331.SSD1331_Init(); //OLED SSD1331 初期化

  //３つのファイルを同時に開く。後でクローズすることが必要。
  MFR.SPIFFS_Misaki_Init3F(UTF8SJIS_file, Misaki_Half_Font_file, Misaki_Zen_Font_file);

  uint8_t font_buf[12][8];
  MFR.StrDirect_MisakiFNT_readALL("8×8 日本語 美咲フォント", font_buf); //String 文字列から一気にフォント変換
  ssd1331.SSD1331_8x8_Font_DisplayOut(12, 0, 0, 7, 7, 3, font_buf); //OLED SSD1331 へ出力
  MFR.StrDirect_MisakiFNT_readALL("半角ｶﾀｶﾅ ｱｲｳｴｵｶｷｧｨｩｪｫｬｭｮ", font_buf);
  ssd1331.SSD1331_8x8_Font_DisplayOut(12, 0, 8, 7, 0, 0, font_buf);
  MFR.StrDirect_MisakiFNT_readALL("０１２３４５６７８９　　", font_buf);
  ssd1331.SSD1331_8x8_Font_DisplayOut(12, 0, 16, 0, 7, 0, font_buf);
  MFR.StrDirect_MisakiFNT_readALL("全角数値は老眼でも読める", font_buf);
  ssd1331.SSD1331_8x8_Font_DisplayOut(12, 0, 24, 0, 0, 3, font_buf);
  MFR.StrDirect_MisakiFNT_readALL("1234567890　　　　　　　", font_buf);
  ssd1331.SSD1331_8x8_Font_DisplayOut(12, 0, 32, 7, 7, 0, font_buf);
  MFR.StrDirect_MisakiFNT_readALL("半角数値はちょっと辛い！", font_buf);
  ssd1331.SSD1331_8x8_Font_DisplayOut(12, 0, 40, 0, 7, 3, font_buf);
  MFR.StrDirect_MisakiFNT_readALL("Ｈｅｌｌｏ！　Ｗｏｒｌｄ", font_buf);
  ssd1331.SSD1331_8x8_Font_DisplayOut(12, 0, 48, 7, 0, 3, font_buf);
  MFR.StrDirect_MisakiFNT_readALL("℃●■◆▲◎★※↓↑→←", font_buf);
  ssd1331.SSD1331_8x8_Font_DisplayOut(12, 0, 56, 7, 7, 3, font_buf);

  MFR.SPIFFS_Misaki_Close3F(); //必ず閉じておく
}

void loop() {

}

【解説】

●1-3行：
自作ライブラリのインクルードです。
SPIFFS ライブラリはその中でインクルードされています。

●5-7行：
SPIFFSフラッシュに保存されているファイルを定義します。

●9-14行：
OLED SSD1331 モジュールに接続する GPIOピンを定義しています。

●16行：
ESP32_SSD1331ライブラリのクラス名の初期化です。

●18行：
ESP32_SPIFFS_MisakiFNT ライブラリのクラス名定義です。

●22行：
ESP32_SSD1331 ライブラリの初期化です。

●25行：
ESP32_SPIFFS_MisakiFNT ライブラリの初期化です。
３つのファイルを同時に開きます。

●27行：
読み込んだフォントデータを格納します。
OLED SSD1331 は全角８×８ドットの場合は１列に１２文字まで表示できます。

●28行：
日本語文字列からフォントデータを読み込み、font_buf へ格納します。

●29行：
１列に最大12文字表示で、座標(0 , 0) から描画し始めます。
色は256色カラーで決めます。
赤色　0～7
緑色　0～7
青色　0～3

●45行：
開いた３つのファイルをここで必ず閉じます。

コンパイル書き込み実行

では、上記のスケッチをコンパイル書き込み実行させてください。
シリアルモニターにはこんな感じで表示されると思います。

ディスプレイにはこんな感じで表示されれば成功です。

かなり小さい文字ですよね。
特に半角カタカナや数値、アルファベットは老眼鏡が無いと私には見えません。

もっと接近した写真はこんな感じです。

「℃」などの記号がこんな小さい文字でも表示できるので、グラフを表示させる場合には使えそうですね。
７×７ドットという中でこれだけの文字が表示できるなんて、やはり美咲フォントは素晴らし過ぎますね。

もちろん、下図の様にブレッドボード無しでも表示できます。
やはり、SPIFFS を使った方が 外付け SD カード不要なので、シンプルで良いです。

まとめ

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

小型有機EL ディスプレイでは、８×８ドットフォントは小さすぎて、老眼の私には厳しいのですが、グラフ表記などにはうまく使えそうな気がします。

改めて思うのは、美咲フォントというのは、こんな小さいドットの中でよくぞこれだけの漢字を表現できたものだと感心しますね。

SPIFFS フラッシュに関しては、ESP32-WROOM-32 の場合、4MB×4 = 16MB まで使用可能のはずで、本当はもっと大きな容量で保存できると思うんですが、まだその方法は分かりません。
せめて、１６×１６ドットの東雲フォントが保存できれば言うことないのですが・・・。

また、SPIFFS ファイルシステムは読み込み速度が micro SDHC カードより遅いのが難点ですが、使い方を工夫すれば十分使えます。
今後は上手く併用していろいろな物を作ろうと思います。

よくよくは Arduino IDE プラグインが出来て、簡単にファイルをアップロードできるようになるのではないかと期待しています。

Arduino - ESP32 SPIFFS アップローダー プラグインが使えるようになりました。
micro SDカード要らずで、Windows PC から直接アップロードできるようになりました。
以下の記事も合わせて参照してください。
●ESP32-WROOM-32 SPIFFS アップローダープラグインの使い方
●ESP32-WROOM-32 SPIFFS メモリサイズを大きくする方法
(2017/10/24)

ということで、今回はここまでです。

ではまた・・・。