Excel で自作したカスタムフォントを M5stack に表示してみる

M5Stack

カスタム(自作)フォントを東雲フォント内に埋め込む(差し替える)

では、実際に作ったフォントを東雲フォントに入れ替えてみます。
テキスト方式なので、そのままテキストエディタで入れ替えることができます。
東雲フォントのライセンスは Public Domain なので、改変可能です)

まず、パソコンで先にダウンロードした、MyFont_ver3.0.xlsx ファイルを開きます。
そして、下図の様に
ShinonomeBDF_CSVout シート
を開きます。

[pic30]

このフォントデータの数値の並びは、先ほど作成したプログラムのデータと異なることに注意してください。

このシートは、東雲フォント用のBDF形式にしたもので、このシートを開いた状態で「ファイル」メニューから、「エクスポート」で CSV形式で名前を付けて保存しておきます。

[pic21]

保存したら、以下のようなメッセージが出るので、「OK」をクリック。

[pic31]

そのあと、以下のような画面になるので、無視してファイル全体を閉じてください。

[pic32]

保存したファイルをテキストエディタで開くと、こんな感じになります。

[pic33]

このBDFデータの英語アルファベットは小文字であることに注意してください。

自分流のフォント名も明記されているので、どのフォントデータなのかが一目瞭然かと思います。

では、これから、全角数値0~9までをカスタム(自作)フォントに変えてみたいと思います。

事前にダウンロードしてある全角の東雲フォントファイル
shnmk16.bdf
をコピーして名前を変えておきます。
ここでは、下図の様に
MYshnmk16.bdf
としておきます。

[pic34]

そして、そのファイルをテキストエディタで開き、全角数値0のJISコード値を以下のサイトで、検索しておきます。
http://ash.jp/code/unitbl21.htm

すると、JISコードは 2330 なので。テキストエディタ内の検索で、

STARTCHAR 2330

をキーワードとして検索して、その位置を把握しておきます。

そして、下図の様に、自作フォントのBDF データをコピーし、東雲フォントの全角0の「BITMAP」以降の BDFデータに上書き貼り付けします。

[pic35]


[pic36]

貼り付けする場合、1文字でもズレると、全てのフォントが正常に表示できなくなるので気を付けてください

東雲フォントのビットマップデータ中にカンマはありませんが、これをバイナリエディタで見ると改行コードが入っているので、貼り付けても改行コードがカンマに入れ替わるだけなので、バイト数は同じです。
縦並びと横並びですが気にせず貼り付けてください。

貼り付けすると、下図の様になります。

[pic37]

これを、0~9の文字まで繰り返して、保存してください。

それが終わったら、M5Stack用の micro SD カードの /font/フォルダにそのファイルをコピーしておいてください。

東雲フォントに埋め込んだカスタムフォントを M5Stack に表示させる

では、前項で東雲フォントに埋め込んだカスタム(自作)フォントを M5Stack の LCD に表示させてみます。

Arduino IDE を開き、以下のスケッチを入力してください。

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

#include "ESP32_LCD_ILI9341_SPI.h" //beta ver 1.23-
#include "ESP32_SD_ShinonomeFNT.h" //beta ver 1.22-
#include "ESP32_SD_UTF8toSJIS.h" //beta ver 1.22-

const int8_t sck = 18; // SPI clock pin
const int8_t miso = -1; // MISO(master input slave output) don't using
const int8_t mosi = 23; // MOSI(master output slave input) pin
const int8_t cs = 14; // Chip Select pin
const int8_t dc = 27; // Data/Command pin
const int8_t rst = 33; // Reset pin
const int8_t LCD_LEDpin = 32;

const uint8_t CS_SD = 4; //SD card CS ( Chip Select )

const char* UTF8SJIS_file = "/font/Utf8Sjis.tbl"; //UTF8 Shift_JIS 変換テーブルファイル名を記載しておく
const char* Shino_Zen_Font_file = "/font/MYshnmk16.bdf"; //全角フォントファイル名を定義
const char* Shino_Half_Font_file = "/font/shnm8x16.bdf"; //半角フォントファイル名を定義

ESP32_LCD_ILI9341_SPI LCD(sck, miso, mosi, cs, dc, rst, LCD_LEDpin);
ESP32_SD_ShinonomeFNT SFR(CS_SD, 40000000); //SPI 24MHz

const uint8_t MAX_TXT_NUM = 3; //文字列最大表示行数

void setup() {
  Serial.begin(115200);
  delay(1000);

  SFR.SD_Shinonome_Init3F(UTF8SJIS_file, Shino_Half_Font_file, Shino_Zen_Font_file); //ライブラリ初期化。3ファイル同時に開く

  LCD.ILI9341_Init(false, 40000000); //microSDを使う場合、必ず false にする
  LCD.Display_Clear();
  LCD.Brightness(255); //LCD LED Full brightness

  String test_str[ MAX_TXT_NUM ] ;
  test_str[0] = "M5stack";
  test_str[1] = "カスタム自作フォント";
  test_str[2] = "0123456789";

  uint8_t test_buf[ MAX_TXT_NUM ][ 20 ][ 16 ] = {};
  uint16_t test_sj_len[ MAX_TXT_NUM ] = {};
  uint8_t num = 0; //文字列番号
  uint8_t red = 31, green = 63, blue = 31;
  uint8_t H_size = 2, V_size = 3; //H_size(水平方向サイズ)、V_size(垂直方向文字サイズ)
  uint16_t X0 = 0, Y0 = 0;

  for( num = 0; num < MAX_TXT_NUM; num++ ){
    test_sj_len[ num ] = SFR.StrDirect_ShinoFNT_readALL(test_str[ num ], test_buf[ num ]);
    Serial.printf("test_sj_len = %d\r\n", test_sj_len[ num ]);
  }
  num = 0, X0 = 0;
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_len[ num ], X0, num * 48, red, green, blue, test_buf[ num ]);
  num = 1, X0 = 0;
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_len[ num ], X0, num * 48, red, green, blue, test_buf[ num ]);
  num = 2, X0 = 0;
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_len[ num ], X0, num * 48, red, green, blue, test_buf[ num ]);
}

void loop() {

}

16行目で先ほど書き換えた東雲フォントファイル名を指定しています。
17行目の半角フォントファイルについては今回使用しません。

30行目は要注意です。
M5Stack の LCD ILI9341 と micro SD カードを併用する場合は、必ず “false” にしてください。
これは、SPI通信の LCD と micro SD が VSPI 接続でバス共有されているために、こういう仕様になっています。

これをコンパイル書き込み実行してみて下さい。
以下のように表示されればOKです。

[pic38]

いかがでしょうか。
東雲フォントの中に自作フォントが紛れ込むっていうのは、なんか新鮮ですね。

この方法を使って、以下の Yahoo! Japan ニュースを表示させるスケッチを改良してみてください。

M5Stack ( ESP32 搭載 )で、Wi-Fi 接続して、Yahoo! ニュースを4記事同時スクロールしてみた

このスケッチの中の、文字 “◆” をハートに変えてみます。

例えば、UTF-8にも日本語文字が存在し、かつJISコードもある文字で、普段絶対使わない文字を自分で決めます。
例えば、私の場合、JISコード2273の ”‰” という文字は恐らく絶対使わないと思われますので、東雲フォントのその文字をカスタム(自作)フォントのハートに変えます。
そして、スケッチ中の “◆” の文字を ”‰” に変えます。

すると、下図の様に表示されます。

[pic39]

ちょっとハッピーになりますね。
ただ、暗いニュースには合いませんが・・・。

次の項では、カスタムフォントをバイナリ形式にして表示させてみます。

コメント

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