forked from xiaozhi/xiaozhi-esp32
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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user