M5stack の LCD に日本語漢字フォントを表示したりスクロールしたり

（追記）micro SD を使う場合

この記事を書いた後に以下の記事で、micro SD 対応の Yahoo ニュース文字列スクロール記事を掲載しました。

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

それに伴い、こちらの記事に掲載したスケッチを micro SD カードで使う場合の方法を追記します。
(2018/4/28時点)

micro SDHC カードを用意する

micro SD カードは SDHC カードが使い易くて良いと思います。
SDXC は使用できないかも知れないのでご注意ください。
（まだ試していませんが…）
私が動作確認したカードは以下の通りです。
Class10 の方が読み書き速度が速いので良いと思われますが、M5Stack は SPI モードしか対応していないので、他の Class でもあまり変化ないものと予想しています。

トランセンドジャパン トランセンド microSDカード 16GB UHS-I U1 Class10【データ復旧ソフト無償提供】Nintendo Switch/3DS 動作確認済 TS16GUSD300S-AE【Amazon.co.jp限定】

トランセンドジャパン

￥960（2024/04/25 11:41時点）

micro SD カードにフォントファイルをコピーする

まず、micro SD カードを FAT32 でフォーマットしておいてください。
市販されている micro SD カードは殆どが予めフォーマット済みと思われますが、フォーマットされていない場合は以下の記事を参照してフォーマットしておいてください。

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

次に、micro SD カードのルートに /font/ フォルダを新たに作成して、先に紹介したようにダウンロードした３つのフォントファイル類をコピーしておいてください。

Utf8Sjis.tbl
shnmk16.bdf
shnm8x16.bdf (※shnm8x16r.bdf の名前変更したもの)

M5Stack への micro SD カードの挿入方法

下図の様に、M5Stack への micro SD カード挿入方向に注意しください。

バージョンアップしたライブラリの再インストール

この記事以降、以下のライブラリを新たにバージョンアップしました。
旧バージョンをお持ちの場合はライブラリのフォルダごと削除してから新たにインストールし直してください。

● ESP32_LCD_ILI9341_SPI ライブラリ
beta ver 1.2

●ESP32_SD_UTF8toSJIS ライブラリ
beta ver 1.22

●ESP32_SD_ShinonomeFNT ライブラリ
beta ver 1.22

micro SD カード用スケッチの入力

先に紹介した３つの SPIFFS 用スケッチをmicro SD カード用に変更したものは以下の通りです。

「文字表示だけのスケッチ」
【ソースコード】 (※無保証　※PCの場合、ダブルクリックすればコード全体を選択できます)

#include "ESP32_LCD_ILI9341_SPI.h"
#include "ESP32_SD_ShinonomeFNT.h"
#include "ESP32_SD_UTF8toSJIS.h"
 
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/shnmk16.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);
 
String test_str[7];
uint8_t test_buf[7][80][16] = {};
uint16_t test_sj_length[7];
 
//red (0-31), green (0-63), blue (0-31)
uint8_t red = 31, green = 63, blue = 31;
uint8_t V_size = 1, H_size = 1;
uint8_t num;
 
//***********セットアップ****************************
void setup() {
  Serial.begin(115200);
 
  SFR.SD_Shinonome_Init3F(UTF8SJIS_file, Shino_Half_Font_file, Shino_Zen_Font_file); //ライブラリ初期化。3ファイル同時に開く
 
  LCD.ILI9341_Init(false, 40000000);
  LCD.Display_Clear(0, 0, 319, 239);
  LCD.Brightness(255); //LCD LED Full brightness
 
  test_str[0] = "Ｍ５ｓｔａｃｋで日本語フォント表示できた";
  test_str[1] = "１６×１６ドット東雲フォントを使用している";
  test_str[2] = "ILI9341 LCD ディスプレイで最大４０文字まで表示できる";
  test_str[3] = "半角もいけます。ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿｧｨｩｪｫｬｭｮ 1234567890 ABCDEFG abcdef";
  test_str[4] = "４０文字以上は表示されないようにした。";
  test_str[5] = "JIS第２水準漢字:纜聽艢鬣魴鯔鱸龠熙";
  test_str[6] = "●■◆▲▼〇◎□◇↓←→↑⇒〒！？";
 
  for(num = 0; num < 7; num++){
    test_sj_length[num] = SFR.StrDirect_ShinoFNT_readALL(test_str[num], test_buf[num]);
    Serial.printf("test_sj_length[%d] = %d\r\n", num, test_sj_length[num]);
  }
 
  num = 0;
  red = 31; green = 63;  blue = 31;
  int x0 = 0, y0 = 0;
  uint8_t H_size = 3, V_size = 2;
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_length[num], x0, y0, red, green, blue, test_buf[num]);
  num = 1;
  red = 31; green = 0;  blue = 0;
  x0 = 0, y0 = 32;
  H_size = 1, V_size = 2;
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_length[num], x0, y0, red, green, blue, test_buf[num]);
  num = 2;
  red = 0; green = 0;  blue = 31;
  x0 = 0, y0 = 64;
  H_size = 5, V_size = 1;
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_length[num], x0, y0, red, green, blue, test_buf[num]);
  num = 3;
  red = 0; green = 63;  blue = 0;
  x0 = 0, y0 = 80;
  H_size = 1, V_size = 1;
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_length[num], x0, y0, red, green, blue, test_buf[num]);
  num = 4;
  red = 0; green = 63;  blue = 31;
  x0 = 0, y0 = 96;
  H_size = 2, V_size = 6;
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_length[num], x0, y0, red, green, blue, test_buf[num]);
  num = 5;
  red = 31; green = 63;  blue = 0;
  x0 = 0, y0 = 208;
  H_size = 1, V_size = 1;
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_length[num], x0, y0, red, green, blue, test_buf[num]);
  num = 6;
  red = 31; green = 5;  blue = 15;
  x0 = 0, y0 = 224;
  H_size = 1, V_size = 1;
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_length[num], x0, y0, red, green, blue, test_buf[num]);
}
//***********メインループ****************************
void loop() {
 
}

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

#include "ESP32_LCD_ILI9341_SPI.h"
#include "ESP32_SD_ShinonomeFNT.h"
#include "ESP32_SD_UTF8toSJIS.h"
 
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/shnmk16.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);
 
String test_str[2];
uint8_t test_buf[2][80][16] = {};
uint16_t test_sj_length[2];
 
uint8_t Scl_Buf[ 2 ][ 16 ][ 640 ] = {};
 
//red (0-31), green (0-63), blue (0-31)
uint8_t red = 31, green = 63, blue = 31;
uint8_t V_size = 1, H_size = 1;
uint8_t num;
 
//***********セットアップ****************************
void setup() {
  Serial.begin(115200);
 
  SFR.SD_Shinonome_Init3F(UTF8SJIS_file, Shino_Half_Font_file, Shino_Zen_Font_file); //ライブラリ初期化。3ファイル同時に開く
 
  LCD.ILI9341_Init(false, 40000000);
  LCD.Display_Clear(0, 0, 319, 239);
  LCD.Brightness(255); //LCD LED Full brightness
 
  num = 0;
  test_str[num] = "Ｍ５ｓｔａｃｋで 16×16 pixel 日本語漢字（東雲フォント）の表示できた～～！　";
  num = 1;
  test_str[num] = "半角もいけます。ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿｧｨｩｪｫｬｭｮ 1234567890 ABCDEFG abcdef";
 
  for(num = 0; num < 2; num++){
    test_sj_length[num] = SFR.StrDirect_ShinoFNT_readALL(test_str[num], test_buf[num]);
    Serial.printf("test_sj_length[%d] = %d\r\n", num, test_sj_length[num]);
  }
 
  num = 0;
  uint8_t max_txt = 40;
  uint32_t scl_speed = 0;
  H_size = 2, V_size = 5;
  red = 0; green = 63;  blue = 31;
  LCD.Scrolle_Font_SetUp(num, max_txt, test_sj_length[num], H_size, V_size, scl_speed, red, green, blue);
 
  num = 1;
  scl_speed = 10;
  H_size = 6, V_size = 2;
  red = 31; green = 5;  blue = 15;
  LCD.Scrolle_Font_SetUp(num, max_txt, test_sj_length[num], H_size, V_size, scl_speed, red, green, blue);
}
//***********メインループ****************************
void loop() {
  num = 0;
  int16_t x0 = 0, y0 = 0;
  LCD.Scrolle_HVsizeUp_8x16_Font_DisplayOut(num, x0, y0, test_buf[num], Scl_Buf[num]);
 
  num = 1;
  x0 = 0; y0 = 100;
  LCD.Scrolle_HVsizeUp_8x16_Font_DisplayOut(num, x0, y0, test_buf[num], Scl_Buf[num]);
}

「ボタン操作文字スクロールスケッチ」
【ソースコード】 (※無保証　※PCの場合、ダブルクリックすればコード全体を選択できます)

#include "ESP32_LCD_ILI9341_SPI.h"
#include "ESP32_Button_Switch.h"
#include "ESP32_SD_ShinonomeFNT.h"
#include "ESP32_SD_UTF8toSJIS.h"
 
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/shnmk16.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);

ESP32_Button_Switch BTN;
 
const uint8_t MAX_TXT_NUM = 2;
 
String test_str[ MAX_TXT_NUM ];
uint8_t test_buf[ MAX_TXT_NUM ][ 100 ][ 16 ] = {};
uint16_t test_sj_length[ MAX_TXT_NUM ];
 
uint8_t Scl_Buf[ MAX_TXT_NUM ][ 16 ][ 640 ] = {};
 
//red (0-31), green (0-63), blue (0-31)
uint8_t red = 31, green = 63, blue = 31;
uint8_t V_size = 1, H_size = 1;
uint8_t prev_V_size = 1, prev_H_size = 1;
uint16_t X0 = 0, Y0 = 0;
int32_t scl_speed = 20;
uint8_t num = 0;
 
//---------------------------------------
const uint8_t buttonA_GPIO = 39;
const uint8_t buttonB_GPIO = 38;
const uint8_t buttonC_GPIO = 37;
uint8_t btn_stateA = _Release;
uint8_t btn_stateB = _Release;
uint8_t btn_stateC = _Release;
 
boolean V_size_down = false;
 
//***********セットアップ****************************
void setup() {
  Serial.begin(115200);
  pinMode(buttonA_GPIO, INPUT); //GPIO #39 は内部プルアップ無し
  pinMode(buttonB_GPIO, INPUT); //GPIO #38 は内部プルアップ無し
  pinMode(buttonC_GPIO, INPUT); //GPIO #37 は内部プルアップ無し
 
  SFR.SD_Shinonome_Init3F(UTF8SJIS_file, Shino_Half_Font_file, Shino_Zen_Font_file); //ライブラリ初期化。3ファイル同時に開く
 
  LCD.ILI9341_Init(false, 40000000);
  LCD.Display_Clear();
  LCD.Brightness(255); //LCD LED Full brightness
 
  test_str[0] = "Ｍ５ｓｔａｃｋで日本語漢字フォント表示。東雲フォントです。サイズも変えられてｽｸﾛｰﾙもできる！　";
  test_str[1] = "←←←スクロール速度はこれが限界で、文字数格納メモリもこの程度！　";
 
  for(num = 0; num < 2; num++){
    test_sj_length[num] = SFR.StrDirect_ShinoFNT_readALL(test_str[num], test_buf[num]);
    Serial.printf("test_sj_length[%d] = %d\r\n", num, test_sj_length[num]);
  }
 
  uint8_t max_txt = 40;
  num = 0;
  red = 31; green = 0;  blue = 0;
  LCD.Scrolle_Font_SetUp(num, max_txt, test_sj_length[num], red, green, blue);
 
  num = 1;
  red = 0; green = 63;  blue = 0;
  LCD.Scrolle_Font_SetUp(num, max_txt, test_sj_length[num], red, green, blue);
 
  red = 31; green = 63;  blue = 31;
  while(1){
    btn_stateA = BTN.Button(0, buttonA_GPIO, true, 10, 300);
    switch( btn_stateA ){
      case _MomentPress:
        Serial.println("Button A Moment Press");
        Vertical_Size_Down();
        Serial.printf("V_size =%d\r\n", V_size);
        break;
      case _ContPress:
        Serial.println("-------------Button A Cont Press");
        Vertical_Size_Up();
        Serial.printf("V_size =%d\r\n", V_size);
        break;
      default:
        break;
    }
 
    btn_stateB = BTN.Button(1, buttonB_GPIO, true, 10, 300);
    switch( btn_stateB ){
      case _MomentPress:
        Serial.println("Button B Moment Press");
        Horizontal_Size_Down();
        Serial.printf("H_size =%d\r\n", H_size);
        break;
      case _ContPress:
        Serial.println("-------------Button B Cont Press");
        Horizontal_Size_Up();
        Serial.printf("H_size =%d\r\n", H_size);
        break;
      default:
        break;
    }
 
    btn_stateC = BTN.Button(2, buttonC_GPIO, true, 10, 300);
    switch( btn_stateC ){
      case _MomentPress:
        Serial.println("Button C Moment Press");
        Serial.println("Scroll Start!");
        TaskHandle_t th; //マルチタスクハンドル定義
        xTaskCreatePinnedToCore(Task1, "Task1", 8192, NULL, 5, &th, 0); //マルチタスク起動
        return;
        break;
      default:
        break;
    }
    delay(1);
  }
}
//***********メインループ****************************
void loop() {    
  btn_stateA = BTN.Button(0, buttonA_GPIO, true, 10, 300);
  switch( btn_stateA ){
    case _MomentPress:
      Serial.println("Button A Moment Press");
      prev_V_size = V_size;
      V_size--;
      if(V_size < 1) V_size = 1;
      Serial.printf("V_size =%d\r\n", V_size);
      V_size_down = true;
      break;
    case _ContPress:
      Serial.println("-------------Button A Cont Press");
      V_size++;
      if(V_size > 14) V_size = 14;
      Serial.printf("V_size =%d\r\n", V_size);
      break;
    default:
      break;
  }
 
  btn_stateB = BTN.Button(1, buttonB_GPIO, true, 10, 300);
  switch( btn_stateB ){
    case _MomentPress:
      Serial.println("Button B Moment Press");
      prev_H_size = H_size;
      H_size--;
      if(H_size < 1) H_size = 1;
      Serial.printf("H_size =%d\r\n", H_size);
      break;
    case _ContPress:
      Serial.println("-------------Button B Cont Press");
      H_size++;
      if(H_size > 15) H_size = 15;
      Serial.printf("H_size =%d\r\n", H_size);
      break;
    default:
      break;
  }
 
  btn_stateC = BTN.Button(2, buttonC_GPIO, true, 10, 300);
  switch( btn_stateC ){
    case _MomentPress:
      Serial.println("Button C Moment Press");
      scl_speed++;
      if(scl_speed > 100) scl_speed = 100;
      Serial.printf("scl_speed =%d\r\n", scl_speed);
      break;
    case _ContPress:
      Serial.println("-------------Button C Cont Press");
 
      scl_speed--;
      if(scl_speed < 0) scl_speed = 0;
      Serial.printf("scl_speed =%d\r\n", scl_speed);
      break;
    default:
      break;
  }
}
//************ マルチタスクループ ****************************
void Task1(void *pvParameters) {
  while(1){
    num = 0;
    X0 = 0, Y0 = 0;
    LCD.Scrolle_HVsizeUp_8x16_Font_DisplayOut(num, scl_speed, H_size, V_size, X0, Y0, test_buf[num], Scl_Buf[num]);
    num = 1;
    LCD.Scrolle_HVsizeUp_8x16_Font_DisplayOut(num, 0, 1, 1, 0, 224, test_buf[num], Scl_Buf[num]);
 
    if( V_size_down == true ) {
      LCD.Display_Clear( 0, V_size * 16 + Y0 - 1, 319, prev_V_size * 16 + Y0 - 1 );
      V_size_down = false;
    }
    delay(1); //most important
  }
}
//****************************************
void Horizontal_Size_Up(){
  H_size++;
  if(H_size > 15) H_size = 15;
  Serial.printf("H_size =%d\r\n", H_size);
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_length[0], X0, Y0, red, green, blue, test_buf[0]);
}
//****************************************
void Horizontal_Size_Down(){
  prev_H_size = H_size;
  H_size--;
  if(H_size < 1) H_size = 1;
  Serial.printf("H_size =%d\r\n", H_size);
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_length[0], X0, Y0, red, green, blue, test_buf[0]);
}
//****************************************
void Vertical_Size_Up(){
  V_size++;
  if(V_size > 15) V_size = 15;
  Serial.printf("V_size =%d\r\n", V_size);
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_length[0], X0, Y0, red, green, blue, test_buf[0]);
}
//****************************************
void Vertical_Size_Down(){
  prev_V_size = V_size;
  V_size--;
  if(V_size < 1) V_size = 1;
  Serial.printf("V_size =%d\r\n", V_size);
  LCD.Display_Clear( 0, V_size * 16 + Y0 - 1, 319, prev_V_size * 16 + Y0 - 1 );
  LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, test_sj_length[0], X0, Y0, red, green, blue, test_buf[0]);
}

以上、micro SD カード用の方法でした。

トラブルシューティング

上手く動作しない、うまくコンパイルできない、うまくSPIFFSアップロードできないなどのトラブルは以下の記事を参照してみてください。

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

編集後記

どうでしょうか？

あくまで素人自作ライブラリですから、描画速度はそれほど速くありませんし、メモリも多く消費してしまっています。
それは今後の課題です。

今回はスクロールする関数を一から見直してみましたが、やはり素人の頭と経験ではここまでが限界です。
やっぱりプロの方々はもっと効率の良い画像処理を知っているんだろうなぁと思います。
Twitter のタイムラインを見ていると、恐ろしく高速描画するものがありましたしね。
そういうのを見ると、生きている間にはとても追いつけないと落胆してしまいます。

でも、SSD1351 や SSD1331 の小型ディスプレイで限界かと思っていた情報量が、M5Stack でライブラリを作っていると、あっさり限界を超えるプログラムを組むことができました。
自分自身のプログラミング能力もちょっと進歩したように感じた次第です。

ということで、今回はここまでですが、次回はこれをスマホでコントロールさせてみたいと思っています。

ではまた・・・。