Arduino – ESP32 ( SPIFFS 又は micro SD ) 自作Fontライブラリインストール方法

ここでは、私が Arduino core for the ESP32 用に自作したフォントライブラリのインストール方法と、M5Stack や ESP-WROOM-32 に搭載されている、SPIFFS フラッシュへのフォントファイルアップロード方法 ( micro SD の場合不要 )、および、文字コード UTF-8 → Shift_JIS 変換テーブルファイルのアップロード方法を説明します。
micro SD カードを使う場合も掲載しています。
ダウンロード先リンクや、How to 記事が散在していますが、ご容赦ください。

以下、フリーの東雲フォントの場合で説明します。
Windows 10 の場合です。

スポンサーリンク

東雲フォントのダウンロード

東雲フォントは当ブログでは何度も使わせていただいております。
電子工作家にとって、こんな素晴らしく有難いフォントはありません。

これの説明やダウンロード方法は、以下のページにまとめて、新たに作成しましたのでご参照ください。
開発者に敬意を表するためにも、できるだけ開発者元ページからダウンロードした方が良いと思います。

日本語漢字ビットマップフォント、東雲フォントについて

以下の2つのファイルを使いますので、予めダウンロードしておいてください。
【全角】

shnmk16.bdf

【半角】

shnm8x16r.bdf

半角のファイル名は、トラブルを避けるため、拡張子を除くファイル名を8文字以内にします。
以下のように名前変更しておいてください。

shnm8x16r.bdf → shnm8x16.bdf

Arduino core for the ESP32 をインストールしておく

Arduino IDE は 1.8.5 で動作確認しています。
Arduino core for the ESP32 は最新版をインストールしておいてください。
インストール方法は以下の記事を参照してください。

Arduino core for the ESP32 のインストール方法

SPIFFS ファイルシステムアップローダープラグインをインストールしておく(SDカードを使う場合は不要)

M5Stack には、4MB のSPI Flash メモリがあります。
そこのフォントファイルをアップロードするためのプラグインを Arduino IDE にインストールする必要があります。
以下の記事を参照して、予めインストールしておいてください。

ESP-WROOM-32 ( ESP32 ) SPIFFS アップローダープラグインの使い方

SPIFFS フラッシュメモリのパーティションテーブルを変更して、保存領域を拡大しておく(SDカードを使う場合は不要)

M5Stack の SPIFFS フラッシュメモリは 4MB あっても、Arduino core for the ESP32 でコンパイル書き込みを行う場合、デフォルト設定では東雲フォントを保存できません。
パーティションテーブルファイルを修正して、ユーザー保存領域を拡大しておく必要があります。
以下の記事を参照して変更しておいてください。

ESP-WROOM-32 ( ESP32 ) SPIFFS メモリサイズを大きくする方法

このパーティションテーブルファイルは、Arduino core for the ESP32 を更新すると消去されてしまうので、バックアップしておく必要があります。

SPIFFS 用自作ライブラリ、変換テーブルファイルのダウンロード及びインストール(SDカードの場合は不要)

ここでは、SPIFFS用について説明します。
SDカードやmicro SD を使う場合は不要です。
私が自作した、Arduino – ESP32 用ライブラリを Arduino IDE にインストールしておいてください。
GitHub から ZIPファイルをダウンロードしてそれを使ってインストールします。
ZIPファイルから Arduino IDE へのインストール方法は以下の記事を参照してください。

なお、古いライブラリが残っている場合は、必ずそのライブラリをフォルダごと削除してから再インストールしてください

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

SPIFFS用 UTF-8 → Shift_JIS 文字コード変換ライブラリ

昨今のPC環境の文字コードは UTF-8 が主流です。
ただ、東雲フォントはShift_JIS 並びになっているので、文字コード変換が必要です。
このライブラリも自作しましたので、GitHub の以下のページから ZIP ファイルをダウンロードしてください。

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

ただ、このライブラリだけでは変換できませんので、別途変換テーブルファイルが必要です。

UTF-8 → Shift_JIS 変換テーブルファイル

上記のライブラリだけでは文字コード変換できませんので、変換テーブルファイルも自作しました。
GitHub の以下のページからダウンロードしていただき、

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

Utf8Sjis.tbl

というファイルを使用します。

東雲フォント SPIFFS 用ライブラリ

Shift_JISコードから東雲フォントを読み込むライブラリです。
GitHub の以下のページから ZIP ファイルをダウンロードしてください。

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

SDカード用自作ライブラリ、変換テーブルファイルのダウンロード及びインストール(SPIFFSの場合は不要)

ここでは、SDカードおよび micro SD カード使用の場合について説明します。
SPIFFSを使う場合は不要です。

私の自作ライブラリは以下のリンクにありますので、ZIPファイルをダウンロードしていただき、Arduino IDE にインストールしてください。
インストール方法は以下の記事を参照。
GitHubにある ZIP形式ライブラリ のインストール方法 ( Arduino IDE )

SDカード用UTF-8 → Shift_JIS 文字コード変換ライブラリ

これは、現在主流の文字コード UTF-8 を Shift_JIS に変換する自作ライブラリです。

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

UTF-8 → Shift_JIS 変換テーブルファイル

上記のライブラリだけでは文字コード変換できませんので、変換テーブルファイルも自作しました。
これは、SPIFFS と SDカード両対応です。
GitHub の以下のページからダウンロードしていただき、

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

Utf8Sjis.tbl

というファイルを使用します。

東雲フォント SDカード用ライブラリ

Shift_JISコードから東雲フォントを読み込むライブラリです。
GitHub の以下のページから ZIP ファイルをダウンロードしてください。

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

SDカードにフォントファイルをコピーしておく(SPIFFSの場合は不要)

SDカード、および micro SD、micro SDHC を使う場合は、事前に FAT32 でフォーマットしておいてください。
SDXCカードは使わない方が無難です。
大抵、購入時点でフォーマットされていることが殆どだと思いますが、されていない場合、以下の記事を参照してフォーマットしておいてください。

micro SD 、micro SDHC カードの初期化(フォーマット)方法

その後、/font/フォルダを新規に作成して、その/font/フォルダに以下の東雲フォントファイルと変換テーブルファイルをコピーしておいてください。

shnmk16.bdf
shnm8x16.bdf (※shnm8x16r.bdfのファイル名を変更しておく)
Utf8Sjis.tbl

以上で、SDカード、または micro SD カードを使う場合のセットアップは終了です。

UTF8→Shift_JIS 変換テーブルファイルと東雲フォントファイルを SPIFFS フラッシュへアップロード(SDカードの場合は不要)

M5Stack や ESP-WROOM-32 のSPIFFS フラッシュへフォントファイルをアップロードするには、まず下準備が必要です。

スケッチの data フォルダにフォントファイルをコピーする

まず、Arduino IDE で適当なスケッチを「名前を付けて保存」しておいてください。
そのスケッチフォルダを開き、
data
というフォルダを新規に作成し、更にそのフォルダ中に
font
というフォルダを作成しておきます。
Windows 10 で、Arduino IDE デフォルト設定の場合、スケッチファイルを test_01 とすると、以下のパスになると思います。
User-Nameはご自分の PC のユーザー名です。

C:\Users\User-Name\Documents\Arduino\test_01\data\font

そこに、Utf8Sjis.tbl ファイルと、全角東雲フォントファイル、半角東雲フォントファイル等の必要なフォントファイルをコピーしておきます。

shnmk16.bdf
shnm8x16.bdf (※shnm8x16r.bdfのファイル名を変更しておく)
Utf8Sjis.tbl

SPIFFS アップローダープラグインでフラッシュへアップロード

次に、M5Stack や ESP-WROOM-32 をパソコンと USB 接続し、Arduino IDE を起動します。
下図の様に、「ツール」メニューから、
「ESP32 Sketch Data Upload」
をクリックすると、SPIFFS フラッシュへフォントファイルがアップロードされます。
この時、シリアルモニタを閉じておくことを忘れないでください

以上、自作ライブラリのインストールと、フォントファイルの SPIFFS フラッシュアップロード方法でした。

上手くいかない場合、以下のトラブルシューティングを参照してください。

ESP32 ( ESP-WROOM-32 ) 自分的 トラブルシューティング まとめ

(追記)ESP32_SPIFFS_UTF8toSJIS ライブラリを使って、シリアルモニターにShift_JISコードを出力するサンプルスケッチ

(2019/07/04 追記)
読者の方から、Arduino core for the ESP32 で ESP32_SPIFFS_UTF8toSJIS ライブラリを使って、UTF-8コード文字列をShift_JISコードに変換して、シリアルモニターに出力する方法のお問い合わせがありましたので、ここに載せておきます。

16行目の u8ts.ESP32_SPIFFS_UTF8toSJIS_Init のところは使わずに、Fileハンドルを別途定義して、
u8ts.UTF8_to_SJIS_str_cnv(_UtoS, str, sj_txt, &sj_length);
の_UtoSを入れ換えても良いと思います。

また、31-33行目で、シリアルモニターにバイナリ出力していますが、最近のArduino IDEのシリアルモニターは全て UTF-8 対応です。
昔のバージョンはShift_JIS対応でしたが、今は非対応です。
したがって、文字化けしますのでご注意ください

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

#include <ESP32_SPIFFS_UTF8toSJIS.h>

const char* UTF8SJIS_file = "/Utf8Sjis.tbl"; //SPIFFSファイルシステムで予めこのファイルをアップロードしておくこと

ESP32_SPIFFS_UTF8toSJIS u8ts;
File _UtoS;

void setup() {
  Serial.begin(115200);
  String str = "こんにちは!! 今日は晴れ時々曇り。半角カタカナも表示できます。";

  uint8_t sj_txt[str.length()] = {0};

  uint16_t sj_length = 0;

  u8ts.ESP32_SPIFFS_UTF8toSJIS_Init(UTF8SJIS_file);
  u8ts.UTF8_to_SJIS_str_cnv(_UtoS, str, sj_txt, &sj_length);

  Serial.println();
  int i = 0;
  for(i = 0; i < sj_length; i++){ //Shift_JISコードを表示
    Serial.printf("%02X,", sj_txt[i]);
  }
  Serial.println();
  
  /*
   Shift_JISコードをシリアルモニターにバイナリ出力
   ただし、最近のArduino IDE 例えば1.8.9のシリアルモニターは
   UTF-8対応なので漢字表示されず、文字化けするので注意
   */
  for(i = 0; i < sj_length; i++){
    Serial.write(sj_txt[i]);
  }
  Serial.println();
}

void loop() {
}

Amazon.co.jp 当ブログのおすすめ

スイッチサイエンス ESPr Developer 32 Type-C SSCI-063647
スイッチサイエンス
¥2,420(2024/03/19 08:55時点)
ZEROPLUS ロジックアナライザ LAP-C(16032)
ZEROPLUS
¥22,504(2024/03/18 15:19時点)
Excelでわかるディープラーニング超入門
技術評論社
¥2,068(2024/03/19 03:23時点)

スポンサーリンク
mgo-tecをフォローする
mgo-tec電子工作

コメント

  1. リラお より:

    https://rirao.hatenablog.jp/entry/2019/05/20/215846

    こちらの記事を参考にデジットのLEDマトリクスに東雲フォントを表示させることが出来ました。
    ありがとうございました。

    • mgo-tec mgo-tec より:

      リラおさん

      記事をご覧いただき、ありがとうございます。
      この記事は1年以上前に書いた記事で、ライブラリも古く、コードも未熟で、今見るとお恥ずかしい限りです。
      それなのに使って頂き感謝しております。

      16pixelのLED matrixは良いですね!!!
      やっぱり大きい表示というものは正義ですね。
      スバラシイ!!!

タイトルとURLをコピーしました