Zenn
5️⃣

M5StickC Plusに組み込まれているフォントを全部表示してみる

2023/03/06に公開
m5stack
m5stickc
MicroPython
tech

M5StickC PlusのUIFlow環境で使用可能なフォントを全部表示してみました。

環境

  • M5StickC Plus 1.1
  • UIFlow_StickC_Plus v1.11.3
    • MicroPython
      • sys.version = '3.4.0'
      • sys.implementation.version = (1, 12, 0)

表示用コード

from m5stack import lcd

fonts = (
  "lcd.FONT_7seg",
  "lcd.FONT_Arial12",
  "lcd.FONT_Arial16",
  "lcd.FONT_Comic",
  "lcd.FONT_Default",
  "lcd.FONT_DefaultSmall",
  "lcd.FONT_DejaVu18",
  "lcd.FONT_DejaVu24",
  "lcd.FONT_DejaVu40",
  "lcd.FONT_DejaVu56",
  "lcd.FONT_DejaVu72",
  "lcd.FONT_Minya",
  "lcd.FONT_Small",
  "lcd.FONT_Tooney",
  "lcd.FONT_UNICODE",
  "lcd.FONT_Ubuntu"
)

lcd.orient(lcd.LANDSCAPE)
screen_w, screen_h = lcd.screensize()

for name in fonts:
  lcd.clear()
  
  font = eval(name)
  short_name = name.replace("lcd.FONT_", "")
  
  lcd.font(font)
  font_w, font_h = lcd.fontSize()
  print("{:s} ({:d}) {:d}x{:d}".format(short_name, font, font_w, font_h))
  lcd.text(20, 20, "M5StickC", wrap=False)
  
  lcd.font(lcd.FONT_Default)
  lcd.text(20, 20+font_h, short_name)

実行結果

7seg

lcd.FONT_7seg (9) 18x31

表示できるのは数字と一部の記号(0123456789-./:;)のみです。/にはdegree signが、;にはスペースが割り当てられています。

lcd.text(20, 20, "23:10")
lcd.text(20, 61, "-4.8/")

Arial12

lcd.FONT_Arial12 (14) 10x12

Arial16

lcd.FONT_Arial16 (15) 17x16

Comic

lcd.FONT_Comic (4) 25x28

Default

lcd.FONT_Default (0) 13x13

DefaultSmall

lcd.FONT_DefaultSmall (8) 10x10

DejaVu18

lcd.FONT_DejaVu18 (1) 19x18

DejaVu24

lcd.FONT_DejaVu24 (2) 24x25

DejaVu40

lcd.FONT_DejaVu40 (11) 39x40

DejaVu56

lcd.FONT_DejaVu56 (12) 54x56

DejaVu72

lcd.FONT_DejaVu72 (13) 69x72

Minya

lcd.FONT_Minya (5) 20x24

Small

lcd.FONT_Small (7) 8x12

Tooney

lcd.FONT_Tooney (6) 32x37

UNICODE

lcd.FONT_UNICODE (16) 24x25

日本語(非ASCII)も表示できます。

Ubuntu

lcd.FONT_Ubuntu (3) 15x16

attrib7seg

FONT_7seg はコードによる四角と三角の描画で表現されているため、属性を指定して見た目を変えることができます。
属性を指定する関数の定義は

lcd.attrib7seg(dist, width, outline, color)
７セグメントフォントの属性を設定

引数 内容
dist バー間隔を指定
width バー幅を指定
outline アウトラインの色を指定
color 塗りつぶす色を指定

このようになっていますが、内部処理らしきソースコードを読むと実際は

引数 内容
dist 1セグメントのバーの四角部分の長さを指定
最小6、最大40
width 1セグメントのバーの幅を指定 width*2+1が実際の幅
最小1、最大は dist/2 か 12の小さい方
outline アウトラインを表示するか True/False
color アウトラインの色を指定

が正しいようです。

https://github.com/loboris/MicroPython_ESP32_psRAM_LoBo/blob/073ba4e782e5225bde26f1be9539b73f05bfe912/MicroPython_BUILD/components/micropython/esp32/libs/tft/tft.c#L2146

指定した数値に対して文字の大きさが予測しづらいのですが、文字の高さは次の式で求められます。

font_height = 2 * dist + 6 * width + 3

例えば lcd.orient(lcd.LANDSCAPE) で横向きに表示するM5StickC Plusの画面縦ピクセル数は 136 なので、画面の高さいっぱいに文字を表示したい場合は次のように指定できます。(他の組み合わせもあります)

dist = 39
width = 9
font_height = 2 * dist + 6 * width + 3 # 135

また、outline に True を指定した場合、アウトラインはセグメントを構成する四角と三角のそれぞれに表示されるため、多分思ってたのと違う感じになります。

lcd.attrib7seg(39, 9, False, lcd.WHITE)
lcd.text(0, 0, "8")
lcd.attrib7seg(39, 9, True, lcd.RED)
lcd.text(77, 0, "8")
lcd.attrib7seg(39, 9, True, lcd.BLACK)
lcd.text(154, 0, "8")

属性未指定のデフォルト状態は

dist = 8
width = 2

を指定した場合と同じ表示になっています。

ユーザフォントの使用

ドキュメントには任意のフォントを使用できる(適切なファイルとライセンスが必要)と書かれていますが、手元の環境で試した限りではフォントファイルが生成されず使用することはできませんでした。

>>> lcd.compileFont("FontFile.c")
True
# Trueが返るがフォントファイル(.fon)は生成されない
# ファイル名として適当な文字列を渡してもTrueが返ってくる

Font creatorというものを見つけたので試してみたところ、フォントファイルは生成できました。しかし生成されたフォントファイルを指定すると例外が発生して再起動します。

>>> lcd.font("FontFile.fon")
Guru Meditation Error: Core  1 panic'ed (LoadProhibited). Exception was unhandled.

謎です。

Discussion