LVGLライブラリでili9488の画面に”あいうえおかきくけこ”を表示できない。

実現したいこと

ili9488をESP32に接続し、日本語の画面表示プログラムを挑戦中です。

”Hello World”という文字は、lvglで初期で使用できるアルファベットフォントで画面に表示するプログラムが正常に表示できることを確認しました。

今度は「こんにちは、世界！」を日本語で表示したいと思います。

発生している問題・分からないこと

main.cppとjphont.cファイルを同じsrcフォルダに入れてビルドはOKでしたが、ili9488の画面では「あいうえおかきくけこ」のひらがなフォントが全く表示されません。

これは日本語フォントの正しい作成方法でしょうか?

jphont.c ファイルは正しくロードされていますか?

疑問なのですが、

cpp
1lv_label_set_text(label,"あいうえおかきくけこ");

このコードの”あ”で、文字を画面に表示させようとしているわけですが、”あ”はjpfont.cファイルの下の部分をロードできていますでしょうか？
読み込んでいるかどうかを確認する方法などありませんでしょうか？

解決方法よろしくおねがいします。

cpp
1    /* U+3042 "あ" */
2    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,
3    0x0, 0x0, 0x0, 0x7f, 0xf8, 0x0, 0x0, 0x0,
4    0x0, 0x0, 0x0, 0x0, 0x1f, 0xe0, 0x0, 0x0,
5    0x0, 0x0, 0x0, 0x0, 0x0, 0xfc, 0x0, 0x1f,
6    0xe0, 0x0, 0x0, 0x60, 0x0, 0x7, 0xc1, 0xff,
7    0xff, 0x0, 0x0, 0x1, 0xff, 0xff, 0xff, 0xff,
8    0xf8, 0x0, 0x0, 0x0, 0x1, 0xff, 0xff, 0xf8,
9    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x3e,
10    0x0, 0x30, 0x0, 0x0, 0x0, 0x0, 0x0, 0x1,
11    0xf0, 0x0, 0x7c, 0x0, 0x0, 0x0, 0x0, 0x0,
12    0xf, 0x3, 0xff, 0xf8, 0x0, 0x0, 0x0, 0x0,
13    0x0, 0xff, 0xc0, 0x3e, 0x1f, 0xc0, 0x0, 0x0,
14    0x0, 0x3f, 0xc0, 0x7, 0xc0, 0x7, 0xe0, 0x0,
15    0x0, 0x1f, 0xfe, 0x0, 0xfc, 0x0, 0x7, 0xe0,
16    0x0, 0xf, 0xc1, 0xf0, 0x1f, 0x80, 0x0, 0xf,
17    0xc0, 0x3, 0xf0, 0xf, 0x83, 0xf0, 0x0, 0x0,
18    0x7f, 0x0, 0x7c, 0x0, 0x7e, 0x7c, 0x0, 0x0,
19    0x1, 0xf8, 0xf, 0x80, 0x1, 0xff, 0x80, 0x0,
20    0x0, 0x1f, 0xc0, 0xf8, 0x0, 0xf, 0xf0, 0x0,
21    0x0, 0x0, 0xfe, 0xf, 0x80, 0x3, 0xff, 0x80,
22    0x0, 0x0, 0x1f, 0xe0, 0xfc, 0x3, 0xff, 0xfe,
23    0x0, 0x0, 0x3, 0xfe, 0x7, 0xff, 0xff, 0x81,
24    0xc0, 0x0, 0x0, 0xff, 0x80, 0xf, 0xff, 0x0,
25    0x0, 0x0, 0x0, 0xff, 0xe0, 0x0, 0x0, 0x0,
26    0x0, 0x0, 0x3, 0xff, 0xe0, 0x0, 0x0, 0x0,
27    0x0, 0x1, 0xff, 0xfc, 0x0, 0x0, 0x0, 0x0,
28    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,
29

エラーメッセージ

error
1ビルドはOKですが、ili9488の画面に文字がなにも表示されません。

該当のソースコード

こちらが現在のソースコードです。

cpp
1#include <Arduino.h>
2#include <lvgl.h>
3#include <TFT_eSPI.h> // ILI9488ドライバを含むライブラリ
4
5
6TFT_eSPI tft = TFT_eSPI(); // TFTのインスタンスを作成
7
8// ディスプレイフラッシュ関数
9void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) {
10    tft.startWrite();
11    tft.setAddrWindow(area->x1, area->y1, area->x2 - area->x1 + 1, area->y2 - area->y1 + 1);
12    tft.pushColors((uint16_t *)&color_p->full, (area->x2 - area->x1 + 1) * (area->y2 - area->y1 + 1), true);
13    tft.endWrite();
14    lv_disp_flush_ready(disp);
15}
16
17static lv_disp_draw_buf_t draw_buf;
18static lv_color_t buf[320 * 10]; // 仮にディスプレイの垂直解像度を480ピクセルと仮定
19static lv_disp_drv_t disp_drv;
20
21LV_FONT_DECLARE(jpfont);
22
23void setup() {
24    Serial.begin(115200); // シリアル通信の初期化
25    Serial.println("Setup Start");
26
27    lv_init();
28    tft.begin();
29    tft.setRotation(1); // ディスプレイの向きに合わせて調整
30
31    // バッファのサイズを設定（解像度に基づいて）
32
33
34    lv_disp_draw_buf_init(&draw_buf, buf, NULL, 320 * 3);
35
36    lv_disp_drv_init(&disp_drv);
37    disp_drv.hor_res = 480; // ディスプレイの解像度を設定
38    disp_drv.ver_res = 320;
39    disp_drv.flush_cb = my_disp_flush;
40    disp_drv.draw_buf = &draw_buf;
41    lv_disp_drv_register(&disp_drv);
42
43
44    static lv_style_t style1;
45    // LVGLラベルの作成
46    lv_obj_t *label = lv_label_create(lv_scr_act());
47    //lv_label_set_text(label, "Hello, LVGL World02!");
48    lv_style_init(&style1);
49    lv_style_set_text_font(&style1, &jpfont);
50
51    lv_obj_add_style(label, &style1, 0);
52    lv_style_set_text_color(&style1, lv_color_hex(0xFFFFFF));
53    lv_label_set_text(label,"あいうえおかきくけこ");
54    // ラベルのサイズを設定
55    lv_obj_set_size(label, 200, 100);
56
57    // テキストの折り返しを設定
58    lv_label_set_long_mode(label, LV_LABEL_LONG_WRAP);
59
60    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
61
62    Serial.println("Setup End");
63}
64
65void loop() {
66    lv_task_handler();
67    delay(5);
68}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

色々と調べていくと、True type fontのファイルから、lvglで使用するための日本語フォントをこちらのサイトで作成できるとかかれていました。

Online Font Converter

Googleの日本語フォントであるNotoSerifJP-Medium.otfというファイルがあります。
このファイル内のひらがな専用フォントの Unicode
0x304-0x309F

ここまでで、jpfont.cというファイルが出力されました。

こちらがjpfont.cの内容です。
jpfont.c

###追記 2024/1/17

lvglライブラリのフォルダ内にあるlv_conf.hファイル。

D:\ESP32\lvgl_JPFont.pio\libdeps\esp32dev\lvgl\lv_conf.h

cpp
1/*Optionally declare custom fonts here.
2 *You can use these fonts as default font too and they will be available globally.
3 *E.g. #define LV_FONT_CUSTOM_DECLARE   LV_FONT_DECLARE(my_font_1) LV_FONT_DECLARE(my_font_2)*/
4#define LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE(jpfont)

このようにmain.cのコードを変更して

cpp
1
2void setup() {
3
4--------------（中略）------------------------------------
5
6    static lv_style_t style1;
7    // LVGLラベルの作成
8    lv_obj_t *label = lv_label_create(lv_scr_act());
9    //lv_label_set_text(label, "Hello, LVGL World02!");
10    lv_style_init(&style1);
11    lv_style_set_text_font(&style1, &jpfont);
12
13    lv_obj_add_style(label, &style1, 0);
14    //lv_style_set_text_color(&style1, lv_color_hex(0xFFFFFF));
15    lv_obj_add_style(label , &style1, 0);
16    lv_label_set_text(label,"あいうtえeおsかtきくけこ");
17    // ラベルのサイズを設定
18    lv_obj_set_size(label, 200, 200);
19
20    // テキストの折り返しを設定
21    lv_label_set_long_mode(label, LV_LABEL_LONG_WRAP);
22
23    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
24
25    Serial.println("Setup End");
26}

このように変更してみたのですが、ひらがなのフォントは出てきません。

cpp
1#define LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE(jpfont)

上記のコードに変更しても、
jpfont.cのひらがなフォントを呼び出すことができていないようです。
jpfont.c

実際の実行時のili9488の表示画面です。
🔲が表示されてる部分は
lv_label_set_text(label,"あいうtえeおsかtきくけこ");
この中のt,e,s,t

この4文字と思われます。

tmp

2024/01/12 03:09

使ったことのないライブラリだったので「lvgl UTF8」で検索したらでてきたのですが、UTF-8を有効にする設定とかは、すでに行っているかと思いますが、どのようになってますか？

MaeharaKenji

2024/01/12 05:32 編集

反応頂きありがとうございます。 ”lvgl UTF8”で検索してみたところ、 https://forum.lvgl.io/t/utf-8-format-for-display-and/3756 このようなサイトを見つけました。lv_conf.hでUTF8を有効にするかどうかの設定があるとのことで、 D:\ESP32\lvgl_JPFont\.pio\libdeps\esp32dev\lvgl\lv_conf.h このパスにあるlv_conf.hを確認したところ、 432行目に #define LV_TXT_ENC LV_TXT_ENC_UTF8 この行があり、UTF８は有効になっているようです。他に確認すべき箇所等ありますでしょうか？