フォントサンプル

含まれるもの

• 480 x 480 の多言語タイポグラフィ画面。コンパクトなフォントテストキャンバスとして設計されています。
• 9 つの表示テキスト例。キリル文字、中国語、日本語、ギリシャ語、アラビア語、韓国語、ヘブライ語、タイ語、ベンガル語をカバーします。
• 文字体系ごとのラベルレイヤー。どのテキストオブジェクトがどの言語に属するか分かりやすいよう、レイヤーパネルで命名されています。
• 10 個の変換済みフォントアセット。実際の LVGL プロジェクトで複数のフォントファミリーとサイズが必要になる場合を示します。
• 画像依存なし。ビットマップスクリーンショットではなく、テキストレンダリングに集中したプロジェクトです。
• 混在するフォントサイズ。小さな本文風ラベルと大きな表示テキストを含みます。
• 混在する色。暗い背景上で各文字体系を確認しやすくしています。
• キャンバス内のフォント注意書き。対象言語をサポートするフォントを選ぶこと、UI が実際に使う文字を含めること、という 2 つの大きなルールを示します。
• Create Font パネル例。バンドルフォント、アップロード、フォントサイズプリセット、Letters、Asian、高度なオプションを示します。

アセットの概要

アセットパネルでは、このプロジェクトがフォント中心の PicoPixel テンプレートとして表示されます。

• 画像: 0。プレビューは編集可能なテキストオブジェクトから作られています。
• 色: 0。色はデザイン内のラベルに直接適用されています。
• フォント: 10。複数の文字体系、サイズ、フォントファミリーを示すのに十分です。
• ウィジェット: 0。テキストとフォントアセットに集中しています。

表示されるフォントアセットには次のものがあります。

• Gothic A1 48
• M PLUS 1p 60
• Noto Sans Arabic 32
• Noto Sans Bengali 32
• Noto Sans Cyrillic 48
• Noto Sans SC 32
• Noto Sans Thai Bold 32
• Open Sans Greek 48
• Open Sans Hebrew 48

スクリーンショット内のリストはスクロール可能なため、プロジェクトには表示行以外にもう 1 つフォントアセットがあります。重要なパターンは、各文字体系が必要なグリフを実際に含むフォントを使っていることです。

レイヤー構造

レイヤーパネルは言語チェックリストのように構成されています。Screen 1 の下で、各ラベルは実演する文字体系または言語にちなんで命名されています。

• Cyrillic - RU
• Chinese
• Japanese
• Greek
• Arabic
• Korean
• Hebrew
• Thai-na
• Bengali

この構造により、ファイルはリファレンスとして役立ちます。ある言語が正しくレンダリングされていれば、そのラベル、フォントアセット、サイズ、色、テキスト値を確認し、同じ方法を自分の PicoPixel プロジェクトにコピーできます。

CJK フォントと欠けたグリフ

中国語、日本語、韓国語のフォントは、文字集合が非常に大きいため LVGL では特別な注意が必要です。可能なすべてのグリフを含めると、組み込みプロジェクトに数 MB が追加されることがあり、小型デバイスにはたいてい大きすぎます。

CJK テキストでは、PicoPixel の Create Font パネルで Asian オプションを使い、インターフェイスが表示する正確な文字を Symbols フィールドに追加してください。画面に表示される可能性のあるすべてのラベル、ボタン、メニュー項目、警告メッセージ、単位、ステータス文字列を含めます。

詳しい手順は Working with fonts、特に中国語、日本語、韓国語のセクションにあります。

文字体系ごとのフォント選択

すべてのフォントがすべての言語をサポートしているわけではありません。ラテンフォントは英語には完璧に見えても、アラビア語、ヘブライ語、タイ語、韓国語、日本語、中国語のグリフを含まない場合があります。このテンプレートは、描画する文字体系向けに設計されたフォントファミリーを使う、より安全な方法を示します。

• 簡体字中国語には Noto Sans SC または別の CJK 対応フォントを使います。
• 日本語テキストには日本語対応フォントを使います。
• 韓国語テキストには Gothic A1 などの韓国語対応フォント、または別のハングルフォントを使います。
• アラビア文字テキストには Noto Sans Arabic を使います。
• ヘブライ語には Open Sans Hebrew または別のヘブライ語対応フォントを使います。
• ギリシャ語にはギリシャ文字対応フォントを使います。
• ロシア語などのキリル文字テキストにはキリル文字対応フォントを使います。
• タイ語とベンガル語のラベルには、それぞれに対応したフォントを使います。

Create Font パネルでは、Letters ドロップダウンがギリシャ文字、キリル文字、ヘブライ文字、アラビア文字、タイ文字など、非 CJK 文字体系の範囲を制御します。Asian ドロップダウンは、CJK グリフセットがはるかに大きいため別になっています。

LVGL に向いている理由

このテンプレートが役立つのは、組み込みハードウェア上で LVGL が実際にフォントを扱う方法に合っているからです。

• LVGL フォントは変換済みビットマップアセットなので、選択した各サイズが別々に生成されます。
• 選択したグリフだけが含まれるため、ファームウェアサイズを抑えられます。
• 文字体系ごとのフォントは欠けたグリフを減らすため、特に非ラテン言語で有効です。
• 複数サイズを共存できるため、見出し、本文ラベル、小さなキャプションがそれぞれ適切なフォントアセットを使えます。
• ラベルは編集可能なままなので、エクスポート前にサンプルテキストを自分の翻訳に置き換えられます。
• プロジェクトは標準の LVGL 8.x UI コードとしてエクスポートされ、ラベルに必要なフォントアセットも含まれます。

ランタイムパターン

エクスポート後も、ラベルはファームウェアから更新できます。正確な生成シンボル名は PicoPixel のオブジェクト名とフォント名によって変わりますが、LVGL のパターンはおなじみのものです。

lv_label_set_text(ui_status_label, "Settings");
lv_obj_set_style_text_font(ui_status_label, &ui_font_noto_sans_32, 0);

翻訳テキストでは、lv_label_set_text に渡す可能性のあるすべての文字がエクスポート済みフォントに含まれていることを確認してください。これは CJK 文字列や、初期デザインキャンバスに表示されていない動的ステータスメッセージで特に重要です。

カスタマイズ案

無料の LVGL タイポグラフィテンプレートとして使い、自分の製品に合わせて調整してください。

• サンプルのあいさつ文を、実際の翻訳済み UI ラベルに置き換えます。
• インターフェイスが実際に必要とする文字体系とサイズごとにフォントを 1 つ作成します。
• エクスポート前に未使用のフォントサイズを減らし、ファームウェアを小さく保ちます。
• 同じテキストレイアウトを使い、複数のフォントファミリーを比較してから選びます。
• アラビア語、ペルシア語、ヘブライ語、その他の RTL インターフェイス向けに右から左のラベルを追加します。
• 言語選択、設定、オンボーディング、アラート用に個別の翻訳画面を作成します。
• 試行後に Delete Unused Fonts を使い、参照されているフォントアセットだけを残します。

自分のプロジェクトへのエクスポート

PicoPixel でテンプレートを開き、フォントアセットを確認し、サンプルラベルを自分のテキストに置き換え、足りないフォントを作成してからエクスポートします。中国語、日本語、韓国語を扱う場合は、フォント作成時に正確な UI 文字列を Symbols フィールドへ貼り付けてください。

ESP32 プロジェクトでは、通常の流れは次のとおりです。

1. UI がサポートする必要のある言語を選びます。
2. 各文字体系とサイズに対応する LVGL フォントを作成します。
3. 中国語、日本語、韓国語では、UI が表示する正確な文字を含めます。
4. このテンプレートのサンプルラベルを、実際の UI テキストに置き換えます。
5. PicoPixel UI を LVGL C としてエクスポートします。
6. エクスポートされた UI とフォントファイルを ESP-IDF、Arduino、または PlatformIO プロジェクトに追加します。
7. LVGL とディスプレイドライバの準備ができた後に ui_init() を呼び出します。

フォント作業の手順は Working with fonts を読んでください。テンプレートのインポートと開き方については How to use PicoPixel templates を参照してください。

最適な用途

このテンプレートは、次のような明確な出発点が欲しい場合に適しています。

• LVGL 多言語テキスト例
• 中国語、日本語、韓国語向けの CJK フォント設定
• ESP32 翻訳 UI プロトタイプ
• フォント変換テスト
• 欠けたグリフのデバッグ
• 右から左と非ラテン文字体系の確認
• 国際化された設定画面
• キオスク、ウェアラブル、ダッシュボード、スマートデバイスインターフェイス