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

記事公開日:2018年4月21日
最終修正日:2018年4月28日
この記事は SPIFFS 用ですが、記事の最後のページで、micro SD カード用のスケッチを追記しました。
それに伴い、以下のライブラリをバージョンアップしました。

●ESP32_LCD_ILI9341_SPIライブラリ
beta ver 1.2
●ESP32_SD_UTF8toSJIS ライブラリ
beta ver 1.22
●ESP32_SD_ShinonomeFNT ライブラリ
beta ver 1.22

(2018/04/28)

こんばんは。

前回に引き続き、M5stack ( ESP32搭載 )でいろいろ遊んでみます。

今回は、M5stack の TFT LCD (液晶ディスプレイ)ILI9341 に、日本語漢字フォントを表示させてみました。
使用したフォントはいつも当ブログで使っている、東雲(しののめ)フォントを使いました。

ただ、今回はスクロールしながら M5stack のボタン操作で縦横にサイズを変えられるようにしてみました。

スポンサーリンク

以前、OLED SSD1331SSD1306 で表示させていましたが、320 x 240 pixel の大きなディスプレイで作ったのは初めてです。
さすがに情報量が多いので、沢山の文字を表示できましたし、文字をサイズアップしても有り余るほどのスペースで、なかなか良いです。

このサイズのディスプレイ一杯にビットマップフォントを表示させようとすると、描画速度が問題になってきますが、SPI通信でも意外とそれなりに速く表示させることができました。

できるだけ、高速で描画できるように、老いた脳ミソをフル回転させてプログラムを組んでみました。
スクロールさせる関数も一から見直し、サイズアップしてもある程度の速度でスクロールさせることができました。

では、早速以下の動画をご覧ください。

プロならばもっとスムースで高速描画できるプログラムが組めそうですね。
素人の私にはこれが限界です。

でも、文字をかなりサイズアップしても、有る程度の速度でスクロールしてくれるようになりました。
しかも、OLED SSD1331SSD1306より遙かに多い情報量なのにこの速度です。
これは、自分的にはちょっとした進歩です。

文字サイズを大きくすると、スクロール速度が上がります。
逆に小さくすると情報量が多くなるので、スクロール速度が下がります。
Cボタンは長押しでスクロール速度アップしていますが、文字サイズの効果の方が大きいです。
文字サイズを縦方向5倍以上にしてしまうと、画面のスムースさが欠けてしまいますね。
これは今後の課題です。
因みに、バッテリーは15分程しか持ちません。
CPUをフル稼働させていますので、仕方ありません。

でも、これはちょっとしたメッセージボード電光掲示板として使えるのではないでしょうか。

ということで、これの作り方を説明してみます。
因みに、以下で紹介するプログラムは素人コードですので無保証です。
無駄が多かったり、誤った使い方をしている場合があります。
その場合、コメント投稿等でご連絡いただけると助かります。

使うもの

M5stack

ESP32 搭載の技適取得済みモジュールです。
今、とても人気があり、多くの所で欠品中です。

パソコン、USBケーブル等

ここでは、Windows 10 環境で説明しています。

Arduino – ESP32 や SPIFFS 設定、ライブラリインストール、Fontファイルアップロードを済ませておく

Arduino core for the ESP32 のインストールや、SPIFFS フラッシュ設定、東雲フォントのダウンロード等については、新たに以下の記事にまとめました。
ただ、それでもダウンロードリンクや、How to ページが散在していますので、ご容赦ください。

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

新たに作成した自作ライブラリのダウンロードおよびインストール

前回や、前々回の記事から、今回は新たに Arduino core for the ESP32 用のライブラリを自作しました。
GitHub の以下のリンクから ZIP ファイルをダウンロードして、Arduino IDE にインストールします。
ZIPファイルのインストール方法は以下の記事を参照してください。

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

ESP32_LCD_ILI9341_SPI ライブラリ

自作ライブラリ ESP32_LCD_ILI9341_SPI を修正し Beta ver 1.1 では長い文字列の表示が制限されてしまう問題を修正しました。
関数の引数 uint8_t txt_length を uint16_t txt_length に変更。
現在は beta ver 1.2 になっています。
(2018/04/28)

これは、M5stack に SPI 接続されている TFT LCD ( 液晶ディスプレイ ) ILI9341 を駆動するためのライブラリです。
グラフィック描画に加えて、東雲フォントを表示させる関数や、スクロールさせる関数を追加しています。
素人自作なので、描画速度は公式ライブラリに及びませんが、何とか日本語フォントを表示させることができました。

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

ESP32_Button_Switch ライブラリ

ボタン操作だけに特化したライブラリです。
スケッチプログラムの行数を節約するために作りました。
前回の記事にあるように、長押し設定ができる関数を作っています。

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

東雲フォント表示のみのサンプルスケッチ

では、まず、M5stack のディスプレイに東雲フォントをスクロールせずに固定表示するためだけのサンプルスケッチは以下になります。

#include "ESP32_LCD_ILI9341_SPI.h"
#include "ESP32_SPIFFS_ShinonomeFNT.h"
#include "ESP32_SPIFFS_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 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_SPIFFS_ShinonomeFNT SFR;

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.SPIFFS_Shinonome_Init3F(UTF8SJIS_file, Shino_Half_Font_file, Shino_Zen_Font_file); //ライブラリ初期化。3ファイル同時に開く

  LCD.ILI9341_Init();
  LCD.Display_Clear(0, 0, 319, 239);
  LCD.Brightness(255); //LCD LED Full brightness

  test_str[0] = "M5stackで日本語フォント表示できた";
  test_str[1] = "16×16ドット東雲フォントを使用している";
  test_str[2] = "ILI9341 LCD ディスプレイで最大40文字まで表示できる";
  test_str[3] = "半角もいけます。アイウエオカキクケコサシスセソァィゥェォャュョ 1234567890 ABCDEFG abcdef";
  test_str[4] = "40文字以上は表示されないようにした。";
  test_str[5] = "JIS第2水準漢字:纜聽艢鬣魴鯔鱸龠熙";
  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() {

}

【解説】

●1-3行目
私の自作ライブラリのインクルードです。

●5-11行:
M5stack の LCD ILI9341 に SPI 接続されている、ESP32 の GPIO 番号設定です。
これに関しての詳細は、前々回の記事を参照してください。

●13-15行:
先に M5stack の SPIFFS フラッシュへアップロードした Font ファイルや、変換テーブルファイルの定義です。
ここで注意していただきたいのは、/font/フォルダがあることと、半角フォントファイルを
shnm8x16r.bdf → shnm8x16.bdf
と変更していることです。

●17-18行:
ここで、自作ライブラリのクラス名を設定しています。

●20-22行:
文字列は 7 種類格納するようにします。
20行目で String 型の文字列を定義し、21行目で 16 x 16 pixel の東雲フォントバッファを定義しています。
文字数は半角 8 x 16 相当の最大文字数を 80 としています。
ここは、グローバル変数領域なので、文字数が多くなるとそれだけメモリを圧迫してしまいます。

●25行目:
文字の色設定を 65K色カラーで定義します。
RGBを混ぜて色を作ります。
赤色は 0~31、緑は 0~63、青は 0~31 です。
関数に直接色設定しても良いのですが、ここでは分かりやすくするため、グローバル変数で定義しています。

●26行目:
V_size は垂直方向の文字サイズで、H_size は水平方向の文字サイズです。
1~14 の間で設定できます。

●33行目:
東雲フォントファイルと、UTF8toSjis 変換テーブルファイルの、東雲フォントライブラリ初期化です。

●35行目:
TFT LCD ( 液晶ディスプレイ ) ILI9341 の初期化です。

●47-50行:
ここで、文字コード UTF-8 の String型文字列を東雲フォントバッファに格納しています。

●52-86行:
56行で、LCD ディスプレイにフォントを描画しています。
ILI9341 ディスプレイに描画できる文字数は以下の通りです。

横:半角 40 文字
縦:15文字

画面からはみ出た場合は、それ以降の文字は無視されるようにしました。

では、このスケッチをコンパイル書き込み実行させてみて下さい。
以下のように表示されればOKです。

M5stack_Scrolle_01

ご覧のように、サイズ1倍の場合の半角文字数 40 文字を超えると画面からはみ出て無視されます。
縦横で別々のサイズにすると、表現の幅が広がりますね。
最小サイズの1倍はかなり小さい文字です。
でも、この液晶ディスプレイは、老眼の私でも判読できました。

では、次のページでは、文字スクロールするスケッチを紹介します。

スポンサーリンク


mgo-tec電子工作 関連コンテンツ ( 広告含む )

投稿者:

mgo-tec

Arduino , ESP32 ( ESP-WROOM-32 ) , ESP8266 ( ESP-WROOM-02 )等を使って、主にスマホと連携した電子工作やプログラミング記事を書いてます。ライブラリも作ったりしてます。趣味、独学でやってますので、動作保証はしません。 電子回路やプログラミングの専門家ではありません。 畑違いの仕事をしていて、介護にドップリ浸かりそうな年配者です。 少しだけ電気の知識が必要な仕事なので、電気工事士や工事担任者等の資格は持っています。

「M5stack ( ESP32搭載 )の LCD に日本語漢字フォントを表示したりスクロールしたり」への13件のフィードバック

  1. いつも感心しますが、なかなかやること早いですね。

    3つの日本語表示のスケッチが私のところでも動作したので報告しておきます。まだソースコードやコメントをちゃんと読んでいませんが、たぶん、同じ動作していると思います。(^^)3つ目のスケッチは、コントールの仕方がしっくりしませんが。と言っても私にはこの仕様で参考になります。

    先日アマゾンからILI9341のLCDを1185円で注文しておいたので、到着したら自作のESP32のボードにそのLCDを接続して、このスケッチが動作するか確認しようと思っています。

    1. あいむさん

      いつもコメント頂き、そしてスケッチを試していただき、ありがとうございます。
      動いてホッとしました。
      それにしても、こうやって動作報告して下さるのはホントに有難いことです。
      改めて感謝いたします。
      m(_ _)m
      コーディングはまだまだ未熟なので、今後試行錯誤して、改良していこうと思っています。

      ILI9341 LCD は私も1年以上前に購入して放置しておいたものがあるので、試してみようと思っています。

  2. こんにちわ
    わたしも動作確認できました。
    素晴らしいです。
    M5stackでしか動かしていませんがILI9341 LCDで実験やってみます。
    ご活躍期待しております

    1. マッキーさん

      いつもコメントありがとうございます。

      一応公開はしましたが、まだメモリを圧迫していて、他のスケッチの応用が上手くいかない場合があります。
      特に、WEBの HTTPS ページから記事を取得する場合、うまくいきません。
      画面が大きくて、なかなか難しいです。
      その辺は今後改良していく予定です。
      それまでは、文字表示だけということでご容赦ください。
      m(_ _)m

      1. 早速ライブラリ修正しました。
        Beta ver 1.1 になっています。
        関数の引数 uint8_t txt_length を uint16_t txt_length に修正です。
        一人で黙々と作っていると気付かないもんです。
        失礼しました。

        更新時期は気まぐれの未定で、Twitter では適宜つぶやいています。
        @mgo_tec

  3. 追加の報告です。

    実は、上記私の報告で確認したのは3〜4年使っていたパソコン(MacBookPro)での話だったのですが、2、3週間前に購入してセットアップ中のパソコン(Mac mini)では、なぜか文字化けしていたので、今朝確認したら対策できたので報告しておきます。

    新しいパソコンでは、Arduino IDE1.8.5のツールのボードをESP32 Dev Moduleにすると、Partition Schemeと言う設定項目があり(今まで使っていたパソコンのArduino IDE1.8.5にはありません)、選択項目として、初期値、Minimal(2MB FLASH)
    、No OTA(Large APP)の3つあり、このスケッチを初期値でフォントのアップロードやスケッチの書き込みをすると、必ず文字化けをします。No OTA(Large APP)を設定して、フォントのアップロードとスケッチの書き込みの両方をすると、ちゃんと表示できました。

    1. あいむさん

      ご報告ありがとうございます。

      Arduino core for the ESP32 の Commits on Apr 7, 2018 バージョンから Partition Scheme 項目が追加されているのは存じており、Twitter でもツイートしておりました。
      ただ、私の Windows 10 の場合は、文字化けしていても、Partition Scheme を初期値にしていてフォントをSPIFFSで再アップロードすれば、文字化け解消されました。
      私の場合、Partition Scheme を No OTA にすると、逆に別の個所の文字化けが発生してしまいました。
      謎ですね。

      個人的に想像していたのは、メモリーオーバーしたスケッチを何度もコンパイル書き込みしていて、その結果 SPIFFS のフォント領域まで破壊されてしまったと思っていました。
      MAC と Windows で違いが出るのかどうか分かりませんが、もうちょっといろいろと動かして調べてみたいと思います。

  4. mgo-tec 様

    HiLetgo 2.8″ ILI9341 LCD で動作確認できました。
    大きい画面に日本語を表示させるのが目標でしたので感動です。
    スケッチはそのままで接続を変えることでうまくいきました。
    sck = 18
    miso = 19 ← -1
    mosi = 23
    cs = 17 ← 14
    dc = 16 ← 27
    rst = 5 ← 33
    LCD_LEDpin = 32
    CS_SD = 4
    M5stack のボタンで文字サイズを変えたり…は、未完成(ほんの一瞬動いて止まる)ですが、今後ボタン機能を研究したいと思います。

    1. juchangさん

      それはスゴイ!!
      M5Stack を使わず、別途 ILI9341 を使われたんですね。
      スバラシイ!!

      M5Stack の画面は ILI9341 にしては小さいですもんね。
      ディスプレイが大きいというのはやっぱり良いもんですね。
      どんどんブログ記事のスケッチを試していただいて、いつも感謝しております。
      ありがとうございます。
      m(_ _)m

      ところで、まだ取組中の課題が多くて、SSD1351 に着手できておりません。
      今しばらくお待ちくださいませ。
      m(_ _)m

コメントを残す

メールアドレスが公開されることはありません。

*画像の文字を入力してください。(スパム防止の為)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください