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

SIN

2021.07.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

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

M5Stack Core2 for AWSを使うために、ここまで、PlatformIOで新規プロジェクトを作成して作業を始めることこと、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);
}