Change LCD display layout from grids to layers (#1438)

* Upgrade component version

* update fonts component version

* change lcd display layout from grids to layers

* Update English README as default

* Handle OTA error code
This commit is contained in:
Xiaoxia
2025-11-17 22:38:31 +08:00
committed by GitHub
parent 764f6e3349
commit 511349a7bd
18 changed files with 630 additions and 495 deletions

View File

@@ -87,10 +87,27 @@ OledDisplay::~OledDisplay() {
if (content_ != nullptr) {
lv_obj_del(content_);
}
if (status_bar_ != nullptr) {
bool is_128x64_layout = (top_bar_ != nullptr);
if (status_bar_ != nullptr && is_128x64_layout) {
status_label_ = nullptr;
notification_label_ = nullptr;
lv_obj_del(status_bar_);
}
if (top_bar_ != nullptr) {
network_label_ = nullptr;
mute_label_ = nullptr;
battery_label_ = nullptr;
lv_obj_del(top_bar_);
}
if (side_bar_ != nullptr) {
if (!is_128x64_layout) {
status_label_ = nullptr;
notification_label_ = nullptr;
network_label_ = nullptr;
mute_label_ = nullptr;
battery_label_ = nullptr;
}
lv_obj_del(side_bar_);
}
if (container_ != nullptr) {
@@ -156,12 +173,61 @@ void OledDisplay::SetupUI_128x64() {
lv_obj_set_style_border_width(container_, 0, 0);
lv_obj_set_style_pad_row(container_, 0, 0);
/* Status bar */
status_bar_ = lv_obj_create(container_);
/* Layer 1: Top bar - for status icons */
top_bar_ = lv_obj_create(container_);
lv_obj_set_size(top_bar_, LV_HOR_RES, 16);
lv_obj_set_style_radius(top_bar_, 0, 0);
lv_obj_set_style_bg_opa(top_bar_, LV_OPA_TRANSP, 0);
lv_obj_set_style_border_width(top_bar_, 0, 0);
lv_obj_set_style_pad_all(top_bar_, 0, 0);
lv_obj_set_flex_flow(top_bar_, LV_FLEX_FLOW_ROW);
lv_obj_set_flex_align(top_bar_, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_scrollbar_mode(top_bar_, LV_SCROLLBAR_MODE_OFF);
network_label_ = lv_label_create(top_bar_);
lv_label_set_text(network_label_, "");
lv_obj_set_style_text_font(network_label_, icon_font, 0);
lv_obj_t* right_icons = lv_obj_create(top_bar_);
lv_obj_set_size(right_icons, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_set_style_bg_opa(right_icons, LV_OPA_TRANSP, 0);
lv_obj_set_style_border_width(right_icons, 0, 0);
lv_obj_set_style_pad_all(right_icons, 0, 0);
lv_obj_set_flex_flow(right_icons, LV_FLEX_FLOW_ROW);
lv_obj_set_flex_align(right_icons, LV_FLEX_ALIGN_END, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
mute_label_ = lv_label_create(right_icons);
lv_label_set_text(mute_label_, "");
lv_obj_set_style_text_font(mute_label_, icon_font, 0);
battery_label_ = lv_label_create(right_icons);
lv_label_set_text(battery_label_, "");
lv_obj_set_style_text_font(battery_label_, icon_font, 0);
/* Layer 2: Status bar - for center text labels */
status_bar_ = lv_obj_create(screen);
lv_obj_set_size(status_bar_, LV_HOR_RES, 16);
lv_obj_set_style_radius(status_bar_, 0, 0);
lv_obj_set_style_bg_opa(status_bar_, LV_OPA_TRANSP, 0); // Transparent background
lv_obj_set_style_border_width(status_bar_, 0, 0);
lv_obj_set_style_pad_all(status_bar_, 0, 0);
lv_obj_set_style_radius(status_bar_, 0, 0);
lv_obj_set_scrollbar_mode(status_bar_, LV_SCROLLBAR_MODE_OFF);
lv_obj_set_style_layout(status_bar_, LV_LAYOUT_NONE, 0); // Use absolute positioning
lv_obj_align(status_bar_, LV_ALIGN_TOP_MID, 0, 0); // Overlap with top_bar_
notification_label_ = lv_label_create(status_bar_);
lv_obj_set_width(notification_label_, LV_HOR_RES);
lv_obj_set_style_text_align(notification_label_, LV_TEXT_ALIGN_CENTER, 0);
lv_label_set_text(notification_label_, "");
lv_obj_align(notification_label_, LV_ALIGN_CENTER, 0, 0);
lv_obj_add_flag(notification_label_, LV_OBJ_FLAG_HIDDEN);
status_label_ = lv_label_create(status_bar_);
lv_obj_set_width(status_label_, LV_HOR_RES);
lv_label_set_long_mode(status_label_, LV_LABEL_LONG_SCROLL_CIRCULAR);
lv_obj_set_style_text_align(status_label_, LV_TEXT_ALIGN_CENTER, 0);
lv_label_set_text(status_label_, Lang::Strings::INITIALIZING);
lv_obj_align(status_label_, LV_ALIGN_CENTER, 0, 0);
/* Content */
content_ = lv_obj_create(container_);
@@ -173,9 +239,8 @@ void OledDisplay::SetupUI_128x64() {
lv_obj_set_flex_flow(content_, LV_FLEX_FLOW_ROW);
lv_obj_set_style_flex_main_place(content_, LV_FLEX_ALIGN_CENTER, 0);
// 创建左侧固定宽度的容器
content_left_ = lv_obj_create(content_);
lv_obj_set_size(content_left_, 32, LV_SIZE_CONTENT); // 固定宽度32像素
lv_obj_set_size(content_left_, 32, LV_SIZE_CONTENT);
lv_obj_set_style_pad_all(content_left_, 0, 0);
lv_obj_set_style_border_width(content_left_, 0, 0);
@@ -185,7 +250,6 @@ void OledDisplay::SetupUI_128x64() {
lv_obj_center(emotion_label_);
lv_obj_set_style_pad_top(emotion_label_, 8, 0);
// 创建右侧可扩展的容器
content_right_ = lv_obj_create(content_);
lv_obj_set_size(content_right_, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_set_style_pad_all(content_right_, 0, 0);
@@ -200,7 +264,7 @@ void OledDisplay::SetupUI_128x64() {
lv_obj_set_width(chat_message_label_, width_ - 32);
lv_obj_set_style_pad_top(chat_message_label_, 14, 0);
// 延迟一定的时间后开始滚动字幕
// Start scrolling subtitle after a delay
static lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_delay(&a, 1000);
@@ -208,35 +272,6 @@ void OledDisplay::SetupUI_128x64() {
lv_obj_set_style_anim(chat_message_label_, &a, LV_PART_MAIN);
lv_obj_set_style_anim_duration(chat_message_label_, lv_anim_speed_clamped(60, 300, 60000), LV_PART_MAIN);
/* Status bar */
lv_obj_set_flex_flow(status_bar_, LV_FLEX_FLOW_ROW);
lv_obj_set_style_pad_all(status_bar_, 0, 0);
lv_obj_set_style_border_width(status_bar_, 0, 0);
lv_obj_set_style_pad_column(status_bar_, 0, 0);
network_label_ = lv_label_create(status_bar_);
lv_label_set_text(network_label_, "");
lv_obj_set_style_text_font(network_label_, icon_font, 0);
notification_label_ = lv_label_create(status_bar_);
lv_obj_set_flex_grow(notification_label_, 1);
lv_obj_set_style_text_align(notification_label_, LV_TEXT_ALIGN_CENTER, 0);
lv_label_set_text(notification_label_, "");
lv_obj_add_flag(notification_label_, LV_OBJ_FLAG_HIDDEN);
status_label_ = lv_label_create(status_bar_);
lv_obj_set_flex_grow(status_label_, 1);
lv_label_set_text(status_label_, Lang::Strings::INITIALIZING);
lv_obj_set_style_text_align(status_label_, LV_TEXT_ALIGN_CENTER, 0);
mute_label_ = lv_label_create(status_bar_);
lv_label_set_text(mute_label_, "");
lv_obj_set_style_text_font(mute_label_, icon_font, 0);
battery_label_ = lv_label_create(status_bar_);
lv_label_set_text(battery_label_, "");
lv_obj_set_style_text_font(battery_label_, icon_font, 0);
low_battery_popup_ = lv_obj_create(screen);
lv_obj_set_scrollbar_mode(low_battery_popup_, LV_SCROLLBAR_MODE_OFF);
lv_obj_set_size(low_battery_popup_, LV_HOR_RES * 0.9, text_font->line_height * 2);
@@ -328,7 +363,7 @@ void OledDisplay::SetupUI_128x32() {
lv_label_set_long_mode(chat_message_label_, LV_LABEL_LONG_SCROLL_CIRCULAR);
lv_label_set_text(chat_message_label_, "");
// 延迟一定的时间后开始滚动字幕
// Start scrolling subtitle after a delay
static lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_delay(&a, 1000);