LovyanGFXとM5GFXのフォント一覧作成

概要

LovyanGFXの内蔵フォントってたくさんあって便利ですよね。でもたくさんありすぎて何があるかよくわからないですよね。そこでフォントの一覧とどんな文字が収録されているか確認するページを作成してみました。

作成ページ

LGFXFontCatalog
tanakamasayuki.github.io

上記のページになります。JavaScriptを利用してフォントの絞り込みができるようになっています。

仕組み

GitHub – tanakamasayuki/LGFXFontCatalog
Contribute to tanakamasayuki/LGFXFontCatalog development by creating an account on GitHub.
github.com

上記のGitHubプロジェクトで自動生成しています。

フォント一覧

自力で一覧を作ります。最近はそんなに追加されていないのでそれでも大丈夫のはず。。。

LGFXFontCatalog/generator/font_catalog_probe at main ?? tanakamasayuki/LGFXFontCatalog
Contribute to tanakamasayuki/LGFXFontCatalog development by creating an account on GitHub.
github.com

上記のfonts_table.hでリストを管理しています。

収録文字種確認

    for (uint32_t cp = 0; cp <= 0xFFFF; ++cp) {
      if (cp >= 0xD800 && cp <= 0xDFFF) continue;
      FontMetrics t = m;
      if (!font->updateFontMetric(&t, (uint16_t)cp)) continue;
      if (!drawsCodepoint(font, (uint16_t)cp)) continue;
      if (!first) fputc(',', cov);
      fprintf(cov, "%u", (unsigned)cp);
      first = false;
    }

上記のコードで実現しています。0から0xFFFFまでのコードを描画してみてなにか表示されたかを確認する男気のあるロジックになります。

画像保存方法

まずフォント系の描画の場合には実機を使うとフラッシュ領域にフォントが入らないので何回かに分けて描画をする必要があります。ちょっとそれだと面倒なのでパソコン上で実行できる環境を整えました。

LovyanGFX/examples_for_PC/PlatformIO_SDL at master · lovyan03/LovyanGFX
SPI LCD graphics library for ESP32 (ESP-IDF/ArduinoESP32) / ESP8266 (ArduinoESP8266) / SAMD51(Seeed ArduinoSAMD51) – lov…
github.com

公式環境ではPlatformIOとSDL2を組み合わせてパソコン上で実行することができます。私はArduino純正環境を使っているのでちょっと手を入れてあります。

GitHub – tanakamasayuki/host-arduino-core
Contribute to tanakamasayuki/host-arduino-core development by creating an account on GitHub.
github.com

SDL2が動くArduino IDEで動くボードマネージャーを自作しました。上記のボードマネージャーですが、pytestとかの環境でESP32実機を使わなくてもいいように作ってあります。HTTPClientとかも実行してあるのでインターネット系のアクセスを検証することもできます。その中の一つとしてSDL2対応があります。

LGFXFontCatalog/.github/workflows at main ?? tanakamasayuki/LGFXFontCatalog
Contribute to tanakamasayuki/LGFXFontCatalog development by creating an account on GitHub.
github.com

実際の生成はGitHub Actionsの中でSDL2環境を構築して、その中で全フォントを読み込んで順次画像に書き込みながらカタログを生成して、生成物をGitHub Pagesで公開するところまで作りました。

まとめ

GitHub Actionsはパブリックリポジトリだと無料で使えるのはすごすぎますよね。収録文字一覧があるとそれをコピーして自作フォントデータ作成で流用することが可能です。

https://yamamaya.github.io/lgfxFontSubsetGenerator
yamamaya.github.io

上記はやまねこ⚙楢ノ木技研さんのツールですが、どの文字まで収録するかって結構面倒なんですよね。ちなみに温度表示する場合の°の文字は私のでは収録文字に入れ忘れたのでわりと入っていないはずです。。。

コメント