02.T-Watch S3 plus + LVGL 9でタイルテスト
02.T-Watch S3 plus + LVGL 9でタイルテスト
T-Watch S3 plus で LVGL 9によるタイルのテストスケッチです。
四角が1画面で、→がスワイプで画面を移動します。
画面12で右端から左端まである程度ゆっくりスライドすると画面13が表示されます。
四角内の説明は仮につけた名前で、実際その動作はしません。
起動画面は12です。
┌────┐ ┌────┐ ┌────┐
│ 11 │←│ 12 │→│ 13 │
│アラーム│ │デジタル│ │明るさの│
│時刻設定│→│時計表示│←│ 設定 │
└────┘ └────┘ └────┘
↓↑
┌────┐ ┌────┐ ┌────┐
│ 21 │←│ 22 │→│ 23 │
│wifiで │ │手動で │ │アナログ│
│時刻設定│→│時刻設定│←│時計表示│
└────┘ └────┘ └────┘
スケッチ
// 起動時の画面は12で、横3x縦2の6画面タイルテスト
// (11) アラーム時刻設定 (12) デジタル時計表示 (13) 明るさの設定
// (21) wifiで時刻設定 (22) 手動で時刻設定 (23) アナログ時計表示
#include <LilyGoLib.h> // LilyGoLib 0.1.0(最新)を使用
#include <LV_Helper.h> // LVGL 9.2.2を使用
void setup() {
Serial.begin(115200); // シリアルモニタの通信速度
instance.begin(); // LilyGoLibを初期化
beginLvglHelper(instance); // LVGLを初期化
lv_obj_t* tv = lv_tileview_create(lv_screen_active()); // default displayにタイルを作成
// タイル11 アラーム時刻設定 ------------------------------
lv_obj_t* tileM11 = lv_tileview_add_tile(tv, 0, 0, LV_DIR_RIGHT); // 1行1列目 右のみに移動
// tileviewにtileを追加(tileviewオブジェクトへのpointer,タイルの列,行,次に進む方向)
// 戻り値:追加されたタイルobjへのpointer
lv_obj_t* btn = lv_button_create(tileM11);
// ボタンobjを作成(objへのpointer 新しいボタンの親)
// 戻り値:作成されたボタンへのpointer
lv_obj_t* label = lv_label_create(btn);
// ラベルobjを作成(objへのpointer 新しいラベルの親)
// 戻り値:作成されたボタンへのpointer
lv_label_set_text(label, "アラーム設定 右へ");
// ラベルの新しいtextを設定(ラベルobjへのpointer,\0の終端文字の文字列 NULLなら現在のテキストで更新)
lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
// オブジェクトのサイズを設定(オブジェクトへのポインタ,幅,高さ)
// 可能な値は px,LV_SIZE_CONTENT:指定方向のすべての子を巻込むサイズ,
// lv_pct(x):親のコンテンツエリアサイズ(パディングなしのサイズ)の割合 xは[0..1000]%
lv_obj_center(btn);
// objを親の中心に合わせます(objを合わせるためのpointer)
// タイル12 デジタル時計 ------------------------------
lv_obj_t* tileM12 = lv_tileview_add_tile(tv, 1, 0, (lv_dir_t)(LV_DIR_LEFT | LV_DIR_BOTTOM | LV_DIR_RIGHT)); // 1行2列目 左右下へ移動
label = lv_label_create(tileM12);
lv_label_set_text(label, "デジタル時計 左右下へ");
lv_obj_center(label);
// タイル13 明るさ設定 ------------------------------
lv_obj_t* tileM13 = lv_tileview_add_tile(tv, 2, 0, LV_DIR_LEFT); // 1行3列目 左のみに移動
lv_obj_t* list = lv_list_create(tileM13);
// リストobjを作成(objへのpointer 新しいリストの親)
// 戻り値:作成されたリストへのpointer
lv_obj_set_size(list, LV_PCT(100), LV_PCT(100));
lv_list_add_button(list, NULL, "255");
// リストにボタン追加(リストへのpointer 新しいボタンの親,ボタンのアイコンで、
// NULLの場合はアイコンなし,新ボタンのtextで、NULLの場合はtextは追加されません)
// 戻り値:作成されたボタンへのpointer
lv_list_add_button(list, NULL, "225");
lv_list_add_button(list, NULL, "200");
lv_list_add_button(list, NULL, "175");
lv_list_add_button(list, NULL, "150");
lv_list_add_button(list, NULL, "125");
lv_list_add_button(list, NULL, "100");
// タイル21 wifiで時刻設定 ------------------------------
lv_obj_t* tileM21 = lv_tileview_add_tile(tv, 0, 1, LV_DIR_RIGHT); // 2行1列目 右のみに移動
btn = lv_button_create(tileM21);
label = lv_label_create(btn);
lv_label_set_text(label, "wifiで時刻設定 右へ");
lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_center(btn);
// タイル22 手動で時刻設定 ------------------------------
lv_obj_t* tileM22 = lv_tileview_add_tile(tv, 1, 1, (lv_dir_t)(LV_DIR_LEFT | LV_DIR_TOP | LV_DIR_RIGHT)); // 2行2列目 左右上に移動
btn = lv_button_create(tileM22);
label = lv_label_create(btn);
lv_label_set_text(label, "手動で時刻設定 左右上へ");
lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_center(btn);
// タイル23 アナログ時計表示 ------------------------------
lv_obj_t* tileM23 = lv_tileview_add_tile(tv, 2, 1, LV_DIR_LEFT); // 2行3列目 左のみに移動
btn = lv_button_create(tileM23);
label = lv_label_create(btn);
lv_label_set_text(label, "アナログ時計 左へ");
lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_center(btn);
lv_tileview_set_tile_by_index(tv, 1, 0, LV_ANIM_OFF); // 起動時のタイル位置
instance.setBrightness(100); // 明るさ 0-255
}
void loop() {
lv_task_handler();// lvglタスク処理は、ループ内に書く
delay(5);// 5mS待つ
}
次のVerを使用しています。
LilyGoLib 0.1.0
FFat 3.3.5
FS 3.3.5
Wire 3.3.5
SensorLib 0.3.3
SPI 3.3.5
RadioLib 7.1.0
TinyGPSPlus 1.1.0
ESP_I2S 3.3.5
XPowersLib 0.3.1
lvgl 9.2.2
esptool 5.1.0