lvglライブラリ使用で表示したボタンが動作しない

Question

実現したいこと

ESP32モジュール基板にili9488というTFTモジュールを接続して、lvglライブラリを使用してタッチパネル用の画面プロジェクトを作成したいと思っています。

既に、hello worldのような簡単なプロジェクトが動作していることを確認済みで、ESP32とili9488間の配線は正常であることを確認しました。

次に、画面中央に大きめのボタンを1個配置して、正常にタッチ動作できるかをやっています。

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

画面中央に大きめのボタンを1個配置して、正常にタッチ動作できるかを、chat GPTに簡単なプログラムを作ってもらって、ボタンは表示できたのですが、タッチ動作の反応が全くない状態になります。

ボタンをタッチするとモニター出力されるはずの文字列

// シンプルなボタンイベントハンドラ
static void simple_button_event_handler(lv_event_t *e) {
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_CLICKED) {
        Serial.println("Simple Button Pressed!");
    }
}

この文字列がボタンを押しても全く出力されません。
そうなると、simple_button_event_handlerという割り込み関数が全く動いていないような状態だと思いますし、なぜ動いていないのかが全然わかりません。

改善方法などありましたらご教示の程よろしくお願い致します。

該当のソースコード

main.cファイルの内容はこちらです。

//main.cファイル内容

#include <Arduino.h>
#include <lvgl.h>
#include <TFT_eSPI.h> // ILI9488ドライバを含むライブラリ

void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p); // ILI9488用のflush関数

TFT_eSPI tft = TFT_eSPI(); // TFTインスタンスを作成

static lv_style_t style_pressed;

// ボタンイベントハンドラ
static void button_event_handler(lv_event_t *e) {
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t *button = lv_event_get_target(e);
    if(code == LV_EVENT_CLICKED) {
        Serial.println("Button Pressed!");  // デバッグメッセージを追加

        // ボタンの背景色を変更するスタイルを作成

        lv_style_init(&style_pressed);
        lv_style_set_bg_color(&style_pressed, lv_color_make(0xFF, 0xA5, 0x00)); // オレンジ色に設定

        // スタイルをボタンに適用
        lv_obj_add_style(button, &style_pressed, 0);

        const char *btn_text = lv_label_get_text(lv_obj_get_child(button, 0));
        lv_obj_t *label = (lv_obj_t *)lv_event_get_user_data(e); // 修正：ユーザーデータを正しく取得
        lv_label_set_text(label, btn_text);
    }
}

// シンプルなボタンイベントハンドラ
static void simple_button_event_handler(lv_event_t *e) {
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_CLICKED) {
        Serial.println("Simple Button Pressed!");
    }
}


static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[320 * 10]; // 描画バッファを定義


static lv_disp_drv_t disp_drv;

void setup() {
    Serial.begin(115200);  // シリアル通信を開始
    lv_init(); // LVGLを初期化
    tft.begin(); // TFTを初期化
    tft.setRotation(1); // 必要に応じて画面の向きを設定

    //uint16_t calData[5] = { 275, 3620, 264, 3532, 1 };
    //tft.setTouch(calData);


    lv_disp_draw_buf_init(&draw_buf, buf, NULL, 320 * 10);

    // ディスプレイドライバを設定

    lv_disp_drv_init(&disp_drv);
    disp_drv.hor_res = 480;
    disp_drv.ver_res = 320;
    disp_drv.flush_cb = my_disp_flush; // ここでILI9488用のflush関数を設定
    disp_drv.draw_buf = &draw_buf;
    lv_disp_drv_register(&disp_drv);

    // シンプルなボタンを作成
    lv_obj_t *btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, 200, 100);
    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 0);
    lv_obj_add_event_cb(btn, simple_button_event_handler, LV_EVENT_ALL, NULL);
}

void loop() {
    lv_timer_handler(); // LVGLタイマーを処理
    delay(5);
}

// ILI9488用のflush関数（ディスプレイドライバの設定に必要）
void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) {
    uint32_t w = (area->x2 - area->x1 + 1);
    uint32_t h = (area->y2 - area->y1 + 1);
    tft.startWrite();
    tft.setAddrWindow(area->x1, area->y1, w, h);
    tft.pushColors((uint16_t *)&color_p->full, w * h, true);
    tft.endWrite();
    lv_disp_flush_ready(disp);
}

また、TFT_eSPIライブラリのUser_Setup.hファイルの編集内容はこちらです。

----(中略)----

//#define ILI9481_DRIVER
//#define ILI9486_DRIVER
#define ILI9488_DRIVER     // WARNING: Do not connect ILI9488 display SDO to MISO if other devices share the SPI bus (TFT SDO does NOT tristate when CS is high)
//#define ST7789_DRIVER      // Full configuration option, define additional parameters below for this display
//#define ST7789_2_DRIVER    // Minima

----(中略)----

// The hardware SPI can be mapped to any pins

#define TFT_MISO 19
#define TFT_MOSI 23
#define TFT_SCLK 18
#define TFT_CS   4  // Chip select control pin
#define TFT_DC    2  // Data Command control pin
//#define TFT_RST   3  // Reset pin (could connect to RST pin)
//#define TFT_RST  -1  // Set TFT_RST to -1 if display RESET is connected to ESP32 board RST

// For ESP32 Dev board (only tested with GC9A01 display)
// The hardware SPI can be mapped to any pins

//#define TFT_MOSI 15 // In some display driver board, it might be written as "SDA" and so on.
//#define TFT_SCLK 14
//#define TFT_CS   5  // Chip select control pin
//#define TFT_DC   27  // Data Command control pin
//#define TFT_RST  33  // Reset pin (could connect to Arduino RESET pin)
//#define TFT_BL   22  // LED back-light

#define TOUCH_CS 27     // Chip select pin (T_CS) of touch screen

//#define TFT_WR 22    // Write strobe for modified Raspberry Pi TFT only

----(中略)----

//#define SPI_FREQUENCY   1000000
// #define SPI_FREQUENCY   5000000
// #define SPI_FREQUENCY  10000000
//#define SPI_FREQUENCY  20000000
#define SPI_FREQUENCY  27000000
// #define SPI_FREQUENCY  40000000
// #define SPI_FREQUENCY  55000000 // STM32 SPI1 only (SPI2 maximum is 27MHz)
// #define SPI_FREQUENCY  80000000

// Optional reduced SPI frequency for reading TFT
#define SPI_READ_FREQUENCY  20000000

// The XPT2046 requires a lower SPI clock rate of 2.5MHz so we define that here:
#define SPI_TOUCH_FREQUENCY  2500000

// The ESP32 has 2 free SPI ports i.e. VSPI and HSPI, the VSPI is the default.

試したこと・調べたこと

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

上記の詳細・結果

念のため、main.cファイル内の
static void button_event_handler(lv_event_t *e)
static void simple_button_event_handler(lv_event_t *e)

2つのハンドラーがあるので、使っていないbutton_event_handlerは削除してみましたが、不具合は解消しません。

タッチ操作によるハンドラー呼び出しでは何か特別な設定などありますでしょうか？

補足

なお、TFT_eSPIライブラリのみで作成した下記の画面プログラムは、タッチ操作も正常にできていることを確認しています。
なので、ESP32基板とili9488との物理的な配線やTFT_eSPIライブラリの各種設定は問題ないのでは？と思うのですが・・・
他に確認すべきことなどありますでしょうか？

#include <Arduino.h>
#include <WiFi.h>
#include <NTPClient.h>
#include <WiFiUdp.h>
#include <TFT_eSPI.h>

// Wi-Fiの設定
const char *ssid = "my_SSID";    // ここにSSIDを入力
const char *password = "my_password"; // ここにWi-Fiパスワードを入力

// NTPサーバの設定
WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP);

void drawButtons();
void drawButton(int buttonIndex, uint32_t color);

// TFTディスプレイの設定
TFT_eSPI tft = TFT_eSPI(); // TFT_eSPIオブジェクトの作成

void setup() {
  Serial.begin(115200);

  // Wi-Fi接続
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("WiFi Connected");

  // TFTディスプレイの初期化
  tft.init();
  tft.setRotation(1); // 画面の向きを調整

  uint16_t calData[5] = { 231, 3567, 344, 3355, 7 };
  tft.setTouch(calData);

  // NTPサーバに接続
  timeClient.begin();
  timeClient.setTimeOffset(3600 * 9); // 日本時間の場合、UTC+9時間

  // ボタンの表示（一度だけ実行）
  drawButtons();

}

void drawButtons() {
    for (int i = 0; i < 10; i++) {
        drawButton(i, TFT_BLACK); // デフォルトの色でボタンを描画
    }
}


void drawButton(int buttonIndex, uint32_t color) {
  int x = (buttonIndex % 5) * 80; // ボタンのX座標を更新
  int y = (buttonIndex / 5) * 60 + 100; // ボタンのY座標を更新
  tft.fillRect(x, y, 80, 60, color); // 新しいサイズでボタンの背景を描画
  tft.drawRect(x, y, 80, 60, TFT_WHITE); // 新しいサイズでボタンの枠を描画
  tft.setCursor(x + 30, y + 25); // テキストの位置を調整
  tft.print(buttonIndex + 1); // ボタンの番号を描画
}


// タッチされたボタンのインデックスと時間を記録する変数
int lastButtonIndex = -1;
unsigned long lastButtonTime = 0;

// グローバル変数として前回の時刻を記録するための変数を追加
String lastTime = "";

void loop() {
  timeClient.update();

  String currentTime = timeClient.getFormattedTime();
  if (currentTime != lastTime) {
    // 時計表示エリアのみを更新
    tft.fillRect(0, 0, 240, 80, TFT_BLACK); // 時計表示エリアをクリア
    tft.setTextColor(TFT_WHITE);
    tft.setTextSize(2);
    tft.setCursor(10, 10);
    tft.print("Time: ");
    tft.setTextSize(3);
    tft.setCursor(10, 40);
    tft.print(currentTime);

    lastTime = currentTime; // 現在の時刻を記録
    // シリアルモニターに時刻を出力
    Serial.println(timeClient.getFormattedTime());
  }

  // タッチ座標の変数を宣言
  uint16_t t_x, t_y;

 // タッチ入力の検出
  if (tft.getTouch(&t_x, &t_y)) {
    int buttonIndex = (t_x / 80) + (t_y - 100) / 60 * 5; // 幅80ピクセル、高さ60ピクセルに基づく計算
    if (buttonIndex >= 0 && buttonIndex < 10) {
      drawButton(buttonIndex, TFT_RED);
      lastButtonIndex = buttonIndex;
    }
  } else {
    // タッチが終了した場合、ボタンの色を戻す
    if (lastButtonIndex != -1) {
      drawButton(lastButtonIndex, TFT_BLACK);
      lastButtonIndex = -1;
    }
  }

  delay(10);

}

Answer 1

とりあえず、自己解決できたのでメモとして記載させて頂きます。

原因は、次の3つの変数をグローバル変数として宣言すると、ボタン動作が正常にできるようになりました。

static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[320 * 10]; // 描画バッファを定義


static lv_disp_drv_t disp_drv;

githubはこちら