[M5Stack Core2 for AWS] LVCLを使用してディスプレイ上のボタンの動作を確認してみました

1 はじめに

IoT事業部の平内（SIN）です。

M5Stack Core2 for AWSを使うために、ここまで、PlatformIOで新規プロジェクトを作成して作業を始めることこと、Core2 for AWS IoT EduKit BSPの組み込みを試してみました。

Visual Studio Code + PlatformIO 環境で M5Stack Core2 for AWS でHello Worldしてみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用してLEDを光らせてみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用してディスプレイに表示してみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用して仮想ボタンの動作を確認してみました

前回、Core2 for AWS IoT EduKit BSPで「仮想ボタン」の利用方法を確認してみましたが、「仮想ボタン」自体のUXに、結構制限があると言うことで、今回は、LVCLでディスプレイ上にボタンを配置する要領を確認してみました。

最初に、動作している様子です。通常のボタンと、トグルボタンです。

2 コード

コードは、以下のとおりです。

LVGLのドキュメントを辿ると、ボタンなどのUIコントロールの作成や、そのイベント処理が、サンプル付きで丁寧に解説されているので、ほとんど、戸惑うことなく実装できそうです。

main.c

#include "freertos/FreeRTOS.h"
#include "freertos/semphr.h"
#include "core2forAWS.h"
#include "esp_log.h"

static const char *TAG = "BUTTON_SAMPLE";

static void event_handler(lv_obj_t * obj, lv_event_t event) {
    if(event == LV_EVENT_CLICKED) {
        ESP_LOGI(TAG, "Clicked!");
    }
    else if(event == LV_EVENT_VALUE_CHANGED) {
        ESP_LOGI(TAG, "Toggled!");
    }
}

void button_sample(void) {
    lv_obj_t * label;

    lv_obj_t * normal_btn = lv_btn_create(lv_scr_act(), NULL);
    lv_obj_set_event_cb(normal_btn, event_handler);
    lv_obj_align(normal_btn, NULL, LV_ALIGN_CENTER, 0, -40);

    label = lv_label_create(normal_btn, NULL);
    lv_label_set_text(label, "Normal");

    lv_obj_t * toggle_btn = lv_btn_create(lv_scr_act(), NULL);
    lv_obj_set_event_cb(toggle_btn, event_handler);
    lv_obj_align(toggle_btn, NULL, LV_ALIGN_CENTER, 0, 40);
    lv_btn_set_checkable(toggle_btn, true);
    lv_btn_toggle(toggle_btn);
    lv_btn_set_fit2(toggle_btn, LV_FIT_NONE, LV_FIT_TIGHT);

    label = lv_label_create(toggle_btn, NULL);
    lv_label_set_text(label, "Toggle");
}

void app_main(void){
    Core2ForAWS_Init();
    Core2ForAWS_Display_SetBrightness(80);
 
    xSemaphoreTake(xGuiSemaphore, portMAX_DELAY);
    button_sample();
    xSemaphoreGive(xGuiSemaphore);
}

3 API Reference

念のため、今回参考にさせて頂いたリファレンスです。

https://docs.lvgl.io/latest/en/html/widgets/btn.html#button-lv-btn

そして、そのサンプルです。

https://docs.lvgl.io/latest/en/html/widgets/btn.html#example

4 最後に

前回試したハードウエアの「仮想ボタン」よりも、ディスプレイで自由に表現できるボタンの方が、使い勝手は良さそうです。

もし、ディスプレイの使用に制約がなければ、こちらの方がおすすめかも知れません。

ちょっと脱線してしまいましたが、次回以降は、引き続き、Core2 for AWS IoT EduKit BSPの使い方について確認を進めたいと思います。

5 参考リンク

Visual Studio Code + PlatformIO 環境で M5Stack Core2 for AWS でHello Worldしてみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用してLEDを光らせてみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用してディスプレイに表示してみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用して仮想ボタンの動作を確認してみました
[M5Stack Core2 for AWS] LVCLを使用してディスプレイ上のボタンの動作を確認してみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用して電源を操作してみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用してスピーカーを操作してみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用して静電容量式タッチパネルを操作してみました
[M5Stack Core2 for AWS] Core2 for AWS IoT EduKit BSPを使用してジャイロセンサーを操作してみました
[M5Stack Core2 for AWS] PlatformIO を使用して、ArduinoでHello Worldしてみました
[M5Stack Core2 for AWS] ArduinoでLED (Adafruit NeoPixel フルカラーLED) を点灯してみました
[M5Stack Core2 for AWS] Arduinoで仮想ボタンを作成してみました
[M5Stack Core2 for AWS] ArduinoでMQTT接続してみました
[M5Stack Core2 for AWS] Arduinoでオーディオファイルを再生してみました
[M5Stack Core2 for AWS] Arduinoでマイクの利用方法を確認してみました
[M5Stack Core2 for AWS] ArduinoでGroveポートのGPIOを使用しててみました