M5Stack CoreInkの使い方 その2 日本語フォントや描画拡張

概要

M5Stack CoreInkの使い方 その1 公式ライブラリ概要

概要前回はざっくりと商品を紹介しましたが、もうすこし触ってみたので使い方の説明をしていきたいと思います。描画について公式ライブラリは独自で作成したもので、描画周りの関数があまり実装されていません。M5.M5InkクラスM5Stack Cor...

lang-ship.com

2020.11.24

前回は標準ライブラリの使い方を中心に説明をしました。今回は他のライブラリを同時に利用して、より便利に描画をしてみたいと思います。

efontライブラリを利用した日本語(多言語)フォント

• /efont/（電子書体オープンラボ）

上記のフォントデータを、Arduinoから利用できるようにしたefontライブラリを使って日本語や多言語表示をしてみたいと思います。

ライブラリのインストール

ライブラリマネージャからefontで検索して、インストールしてください。

使い方

#include <M5CoreInk.h>
#include "efontEnableAll.h"
#include "efont.h"
#include "efontM5StackCoreInk.h"

Ink_Sprite inkPageSprite(&M5.M5Ink);

void setup() {
  M5.begin();
  if ( !M5.M5Ink.isInit()) {
    Serial.printf("Ink Init faild");
    while (1) {
      delay(100);
    }
  }
  M5.M5Ink.clear();
  delay(1000);

  //creat ink refresh Sprite
  if ( inkPageSprite.creatSprite(0, 0, 200, 200, true) != 0 ) {
    Serial.printf("Ink Sprite creat faild");
  }

  printEfont(&inkPageSprite, "Hello\n");
  printEfont(&inkPageSprite, "こんにちは\n");
  printEfont(&inkPageSprite, "你好\n");
  printEfont(&inkPageSprite, "안녕하세요\n");
  printEfont(&inkPageSprite, "Доброе утро\n");
  printEfont(&inkPageSprite, "Päivää\n");
  printEfont(&inkPageSprite, "Здравствуйте\n");

  printEfont(&inkPageSprite, "efont\nPrint Test", 0, 130, 2, 1);

  inkPageSprite.pushSprite();
}

void loop() {
}

ちょっと癖がある使い方なのですが、最初に読み込むフォントの範囲を指定する必要があります。

対象	オプション	文字数	フォントサイズ
ALL	efontEnableAll.h	21,727	738,718
Ascii	efontEnableAscii.h	191	6,494
CJK Kanji	efontEnableCJK.h	19,379	658,886
Simplified Chinese	efontEnableCn.h	18,077	614,618
Japanese	efontEnableJa.h	10,835	368,390
Mini Japanese	efontEnableJaMini.h	4,107	139,638
Korean	efontEnableKr.h	8,319	282,846
Traditional Chinese	efontEnableTw.h	13,555	460,870

スケッチ例ではefontEnableAll.hを読み込んでいるので、すべてのフォントデータを読み込んでいます。通常の日本語であればefontEnableJaMini.hで常用漢字＋αなのでたいていは表示できるとは思います。

あとはCoreInkのスプライトの初期化をして、printEfont()関数で文字を表示します。

printEfont(スプライト, 文字, X座標, Y座標, テキスト大きさ, 色);

上記の引数ですが、座標以下は省略可能です。

void printEfont(Ink_Sprite *sprite, char *str, int x = -1, int y = -1, int textsize = 1, int color = 0)

デフォルト値は上記になっており、XとYに-1を渡すと前回のカーソル位置から描画します。テキストサイズは1が16ドットで、2が32ドットになります。色は0の黒がデフォルトですが1を指定することで白になります。

実行結果

こんな感じになりました。efontはフォントデータが主体で、各種表示ロジックはサンプル実装になるので、ちょっと内部実装は遅いと思います。

決め打ちで描画しているところがあるので、気になる人はデータだけ利用して内部ロジックは一から作ったほうがいいと思います。

LovyanGFXのスプライトを利用

LovyanGFXにはCoreInkを直接描画する機能がありますが、次回以降に紹介したいと思います。今回は公式ライブラリ＋LovyanGFXのスプライト機能のみ利用してみたいと思います。

efontの利用例

#include "M5CoreInk.h"
#include <efontEnableAll.h>
#include <efontFontData.h>
#include <LovyanGFX.hpp>

Ink_Sprite inkPageSprite(&M5.M5Ink);
static LGFX_Sprite sprite;

void pushSprite(Ink_Sprite *coreinkSprite, LGFX_Sprite *lgfxSprite);

void setup() {
  M5.begin();
  M5.M5Ink.isInit();
  M5.M5Ink.clear();
  inkPageSprite.creatSprite(0, 0, 200, 200, false);

  // スプライト作成
  sprite.setColorDepth(2);
  sprite.createPalette();
  sprite.createSprite(200, 200);
  sprite.clear(TFT_WHITE);
  sprite.setFont(&fonts::efont);
  sprite.setTextColor(TFT_BLACK, TFT_WHITE);

  // 描画テスト
  sprite.print("Hello\n");
  sprite.print("こんにちは\n");
  sprite.print("你好\n");
  sprite.print("안녕하세요\n");
  sprite.print("Доброе утро\n");
  sprite.print("Päivää\n");
  sprite.print("Здравствуйте\n");

  sprite.setCursor(0, 130);
  sprite.setTextSize(2);
  sprite.setTextColor(TFT_WHITE, TFT_BLACK);
  sprite.print("LovyanGFX\nPrint Test");

  pushSprite(&inkPageSprite, &sprite);
}

void loop() {
  delay(1);
}

void pushSprite(Ink_Sprite *coreinkSprite, LGFX_Sprite *lgfxSprite) {
  coreinkSprite->clear();
  for (int y = 0; y < 200; y++) {
    for (int x = 0; x < 200; x++) {
      uint16_t c = lgfxSprite->readPixel(x, y);
      if (c == 0x0000) {
        coreinkSprite->drawPix(x, y, 0);
      }
    }
  }
  coreinkSprite->pushSprite();
}

LovyanGFXからでもefontライブラリを利用しての描画が可能です。こちらのほうが一般的な描画関数が利用できるので移植はしやすいと思います。

肝はpushSprite()で、LovyanGFXのスプライトをCoreInkのスプライトに転記してから、画面更新をしています。

#include <efontEnableAll.h>

上記の部分で読み込む文字を指定しています。標準はすべてですが、どう考えても使わないような多言語の文字が大量にはいっていますので、ものすごく容量をくいます。

• efontEnableJa.h
• efontEnableJaMini.h

日本語だけであれば上記のどちらかで構わないと思います。

• https://github.com/tanakamasayuki/efont

上記に詳しい文字数と容量が書いてあります。個人的にはLovyanGFXに内蔵されたので、個別ライブラリ版は使わなくてもいいのかなって思っています。

その他の日本語フォント

efontライブラリは多言語フォントですが、サイズが縦16ドットしかありません。IPAフォントであれば日本語のみですが、8から40ドットまでの細かいサイズが揃っています。Pがついているのが英数がプロポーショナルなIPAexになります。

こちらのフォントはLovyanGFXに内蔵されているので、別ライブラリが必要ないので気軽に利用することが可能です。efontと比べると機種依存文字などが含まれていないので、特殊な漢字を表示することはできないので注意してください。

IPA明朝体	IPAex明朝体	IPAゴシック体	IPAexゴシック体
lgfxJapanMincho_8	lgfxJapanMinchoP_8	lgfxJapanGothic_8	lgfxJapanGothicP_8
lgfxJapanMincho_12	lgfxJapanMinchoP_12	lgfxJapanGothic_12	lgfxJapanGothicP_12
lgfxJapanMincho_16	lgfxJapanMinchoP_16	lgfxJapanGothic_16	lgfxJapanGothicP_16
lgfxJapanMincho_20	lgfxJapanMinchoP_20	lgfxJapanGothic_20	lgfxJapanGothicP_20
lgfxJapanMincho_24	lgfxJapanMinchoP_24	lgfxJapanGothic_24	lgfxJapanGothicP_24
lgfxJapanMincho_28	lgfxJapanMinchoP_28	lgfxJapanGothic_28	lgfxJapanGothicP_28
lgfxJapanMincho_32	lgfxJapanMinchoP_32	lgfxJapanGothic_32	lgfxJapanGothicP_32
lgfxJapanMincho_36	lgfxJapanMinchoP_36	lgfxJapanGothic_36	lgfxJapanGothicP_36
lgfxJapanMincho_40	lgfxJapanMinchoP_40	lgfxJapanGothic_40	lgfxJapanGothicP_40

また、現在efontの10ドット、12ドット、14ドット、16ドット、24ドットをLovyanGFX内部に取り込み準備中のようです。efontはビットマップフォントですので、小さいサイズの場合にはefontの方が漢字はきれいに見えるかもしれません。

現在efontも追加されましたので、以下に追記します。

日本語	韓国語	中国語(簡体字)	中国語(繁体字)
efontJA_10	efontKR_10	efontCN_10	efontTW_10
efontJA_10_b	efontKR_10_b	efontCN_10_b	efontTW_10_b
efontJA_10_bi	efontKR_10_bi	efontCN_10_bi	efontTW_10_bi
efontJA_10_i	efontKR_10_i	efontCN_10_i	efontTW_10_i
efontJA_12	efontKR_12	efontCN_12	efontTW_12
efontJA_12_b	efontKR_12_b	efontCN_12_b	efontTW_12_b
efontJA_12_bi	efontKR_12_bi	efontCN_12_bi	efontTW_12_bi
efontJA_12_i	efontKR_12_i	efontCN_12_i	efontTW_12_i
efontJA_14	efontKR_14	efontCN_14	efontTW_14
efontJA_14_b	efontKR_14_b	efontCN_14_b	efontTW_14_b
efontJA_14_bi	efontKR_14_bi	efontCN_14_bi	efontTW_14_bi
efontJA_14_i	efontKR_14_i	efontCN_14_i	efontTW_14_i
efontJA_16	efontKR_16	efontCN_16	efontTW_16
efontJA_16_b	efontKR_16_b	efontCN_16_b	efontTW_16_b
efontJA_16_bi	efontKR_16_bi	efontCN_16_bi	efontTW_16_bi
efontJA_16_i	efontKR_16_i	efontCN_16_i	efontTW_16_i
efontJA_24	efontKR_24	efontCN_24	efontTW_24
efontJA_24_b	efontKR_24_b	efontCN_24_b	efontTW_24_b
efontJA_24_bi	efontKR_24_bi	efontCN_24_bi	efontTW_24_bi
efontJA_24_i	efontKR_24_i	efontCN_24_i	efontTW_24_i

上記が追加されています。iがイタリック、bがボールドになります。

sprite.setFont(&fonts::efontJA_24_bi);

上記が縦24ドットの日本語フォントでイタリックとボールドになっています。指定したフォントのみフラッシュに読み込まれますが、大きさに比例したサイズになります。イタリックやボールドと普通を混在する場合には、別フォントとして容量が必要としますので注意してください。

画像や一般描画関数

LovyanGFXの機能を利用できるので、一般的なline関数やJpeg画像の描画なども可能です。標準ライブラリを使いつつ、使いやすい描画エンジンとしてLovyanGFXが利用可能になります。

まとめ

公式ライブラリを捨てて、LovyanGFXを使えばいいのですがそうするとLovyanGFXがサポートしていないRTCまわりの機能が使えなくなります。そのため公式ライブラリ相当のライブラリを組み合わせる必要があり、いろいろ下準備が必要です。

現状では公式ライブラリのリリース前の最新版＋LovyanGFXのスプライトを組み合わせるのが一番安定していると思われます。

自作しているM5Liteライブラリでは内部でRTCもLovyanGFXも含んでいるので、もうちょっと検証してから、CoreInkのサポートを追加したいと思っています。