verachen/xiaozhi-esp32
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add lvgl display theme control (#1180)

Browse Source 
* feat: Add lvgl display theme control

* fix: compiling errors

* move light/dark themes to lcd display

* fix compile errors

---------

Co-authored-by: Xiaoxia <terrence.huang@tenclass.com>
This commit is contained in:
Xiaoxia
2025-09-10 18:43:47 +08:00
committed by GitHub
parent bce662d135
commit 4048647ef8
29 changed files with 882 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

413
main/display/lcd_display.cc
View File

@ -1,6 +1,7 @@
#include "lcd_display.h"
#include "assets/lang_config.h"
#include "settings.h"
#include "lvgl_theme.h"
#include "assets/lang_config.h"
#include <vector>
#include <algorithm>
@ -15,78 +16,62 @@
#define TAG "LcdDisplay"
// Color definitions for dark theme
#define DARK_BACKGROUND_COLOR lv_color_hex(0x121212) // Dark background
#define DARK_TEXT_COLOR lv_color_white() // White text
#define DARK_CHAT_BACKGROUND_COLOR lv_color_hex(0x1E1E1E) // Slightly lighter than background
#define DARK_USER_BUBBLE_COLOR lv_color_hex(0x1A6C37) // Dark green
#define DARK_ASSISTANT_BUBBLE_COLOR lv_color_hex(0x333333) // Dark gray
#define DARK_SYSTEM_BUBBLE_COLOR lv_color_hex(0x2A2A2A) // Medium gray
#define DARK_SYSTEM_TEXT_COLOR lv_color_hex(0xAAAAAA) // Light gray text
#define DARK_BORDER_COLOR lv_color_hex(0x333333) // Dark gray border
#define DARK_LOW_BATTERY_COLOR lv_color_hex(0xFF0000) // Red for dark mode
// Color definitions for light theme
#define LIGHT_BACKGROUND_COLOR lv_color_white() // White background
#define LIGHT_TEXT_COLOR lv_color_black() // Black text
#define LIGHT_CHAT_BACKGROUND_COLOR lv_color_hex(0xE0E0E0) // Light gray background
#define LIGHT_USER_BUBBLE_COLOR lv_color_hex(0x95EC69) // WeChat green
#define LIGHT_ASSISTANT_BUBBLE_COLOR lv_color_white() // White
#define LIGHT_SYSTEM_BUBBLE_COLOR lv_color_hex(0xE0E0E0) // Light gray
#define LIGHT_SYSTEM_TEXT_COLOR lv_color_hex(0x666666) // Dark gray text
#define LIGHT_BORDER_COLOR lv_color_hex(0xE0E0E0) // Light gray border
#define LIGHT_LOW_BATTERY_COLOR lv_color_black() // Black for light mode
// Define dark theme colors
const ThemeColors DARK_THEME = {
.background = DARK_BACKGROUND_COLOR,
.text = DARK_TEXT_COLOR,
.chat_background = DARK_CHAT_BACKGROUND_COLOR,
.user_bubble = DARK_USER_BUBBLE_COLOR,
.assistant_bubble = DARK_ASSISTANT_BUBBLE_COLOR,
.system_bubble = DARK_SYSTEM_BUBBLE_COLOR,
.system_text = DARK_SYSTEM_TEXT_COLOR,
.border = DARK_BORDER_COLOR,
.low_battery = DARK_LOW_BATTERY_COLOR
};
// Define light theme colors
const ThemeColors LIGHT_THEME = {
.background = LIGHT_BACKGROUND_COLOR,
.text = LIGHT_TEXT_COLOR,
.chat_background = LIGHT_CHAT_BACKGROUND_COLOR,
.user_bubble = LIGHT_USER_BUBBLE_COLOR,
.assistant_bubble = LIGHT_ASSISTANT_BUBBLE_COLOR,
.system_bubble = LIGHT_SYSTEM_BUBBLE_COLOR,
.system_text = LIGHT_SYSTEM_TEXT_COLOR,
.border = LIGHT_BORDER_COLOR,
.low_battery = LIGHT_LOW_BATTERY_COLOR
};
LV_FONT_DECLARE(LVGL_TEXT_FONT);
LV_FONT_DECLARE(LVGL_ICON_FONT);
LV_FONT_DECLARE(font_awesome_30_4);
void LcdDisplay::InitializeLcdThemes() {
auto text_font = std::make_shared<LvglBuiltInFont>(&LVGL_TEXT_FONT);
auto icon_font = std::make_shared<LvglBuiltInFont>(&LVGL_ICON_FONT);
auto large_icon_font = std::make_shared<LvglBuiltInFont>(&font_awesome_30_4);
// light theme
auto light_theme = new LvglTheme("light");
light_theme->set_background_color(lv_color_white());
light_theme->set_text_color(lv_color_black());
light_theme->set_chat_background_color(lv_color_hex(0xE0E0E0));
light_theme->set_user_bubble_color(lv_color_hex(0x95EC69));
light_theme->set_assistant_bubble_color(lv_color_white());
light_theme->set_system_bubble_color(lv_color_hex(0xE0E0E0));
light_theme->set_system_text_color(lv_color_hex(0x666666));
light_theme->set_border_color(lv_color_hex(0xE0E0E0));
light_theme->set_low_battery_color(lv_color_black());
light_theme->set_text_font(text_font);
light_theme->set_icon_font(icon_font);
light_theme->set_large_icon_font(large_icon_font);
// dark theme
auto dark_theme = new LvglTheme("dark");
dark_theme->set_background_color(lv_color_hex(0x121212));
dark_theme->set_text_color(lv_color_white());
dark_theme->set_chat_background_color(lv_color_hex(0x1E1E1E));
dark_theme->set_user_bubble_color(lv_color_hex(0x1A6C37));
dark_theme->set_assistant_bubble_color(lv_color_hex(0x333333));
dark_theme->set_system_bubble_color(lv_color_hex(0x2A2A2A));
dark_theme->set_system_text_color(lv_color_hex(0xAAAAAA));
dark_theme->set_border_color(lv_color_hex(0x333333));
dark_theme->set_low_battery_color(lv_color_hex(0xFF0000));
dark_theme->set_text_font(text_font);
dark_theme->set_icon_font(icon_font);
dark_theme->set_large_icon_font(large_icon_font);
auto& theme_manager = LvglThemeManager::GetInstance();
theme_manager.RegisterTheme("light", light_theme);
theme_manager.RegisterTheme("dark", dark_theme);
}
LcdDisplay::LcdDisplay(esp_lcd_panel_io_handle_t panel_io, esp_lcd_panel_handle_t panel, int width, int height)
: panel_io_(panel_io), panel_(panel) {
width_ = width;
height_ = height;
style_ = {
.text_font = &LVGL_TEXT_FONT,
.icon_font = &LVGL_ICON_FONT,
};
// Initialize LCD themes
InitializeLcdThemes();
// Load theme from settings
Settings settings("display", false);
current_theme_name_ = settings.GetString("theme", "light");
// Update the theme
if (current_theme_name_ == "dark") {
current_theme_ = DARK_THEME;
} else if (current_theme_name_ == "light") {
current_theme_ = LIGHT_THEME;
}
std::string theme_name = settings.GetString("theme", "light");
current_theme_ = LvglThemeManager::GetInstance().GetTheme(theme_name);
// Create a timer to hide the preview image
esp_timer_create_args_t preview_timer_args = {
@ -339,10 +324,15 @@ void LcdDisplay::Unlock() {
void LcdDisplay::SetupUI() {
DisplayLockGuard lock(this);
auto lvgl_theme = static_cast<LvglTheme*>(current_theme_);
auto text_font = lvgl_theme->text_font()->font();
auto icon_font = lvgl_theme->icon_font()->font();
auto large_icon_font = lvgl_theme->large_icon_font()->font();
auto screen = lv_screen_active();
lv_obj_set_style_text_font(screen, style_.text_font, 0);
lv_obj_set_style_text_color(screen, current_theme_.text, 0);
lv_obj_set_style_bg_color(screen, current_theme_.background, 0);
lv_obj_set_style_text_font(screen, text_font, 0);
lv_obj_set_style_text_color(screen, lvgl_theme->text_color(), 0);
lv_obj_set_style_bg_color(screen, lvgl_theme->background_color(), 0);
/* Container */
container_ = lv_obj_create(screen);
@ -351,24 +341,24 @@ void LcdDisplay::SetupUI() {
lv_obj_set_style_pad_all(container_, 0, 0);
lv_obj_set_style_border_width(container_, 0, 0);
lv_obj_set_style_pad_row(container_, 0, 0);
lv_obj_set_style_bg_color(container_, current_theme_.background, 0);
lv_obj_set_style_border_color(container_, current_theme_.border, 0);
lv_obj_set_style_bg_color(container_, lvgl_theme->background_color(), 0);
lv_obj_set_style_border_color(container_, lvgl_theme->border_color(), 0);
/* Status bar */
status_bar_ = lv_obj_create(container_);
lv_obj_set_size(status_bar_, LV_HOR_RES, LV_SIZE_CONTENT);
lv_obj_set_style_radius(status_bar_, 0, 0);
lv_obj_set_style_bg_color(status_bar_, current_theme_.background, 0);
lv_obj_set_style_text_color(status_bar_, current_theme_.text, 0);
lv_obj_set_style_bg_color(status_bar_, lvgl_theme->background_color(), 0);
lv_obj_set_style_text_color(status_bar_, lvgl_theme->text_color(), 0);
/* Content - Chat area */
content_ = lv_obj_create(container_);
lv_obj_set_style_radius(content_, 0, 0);
lv_obj_set_width(content_, LV_HOR_RES);
lv_obj_set_flex_grow(content_, 1);
lv_obj_set_style_pad_all(content_, 10, 0);
lv_obj_set_style_bg_color(content_, current_theme_.chat_background, 0); // Background for chat area
lv_obj_set_style_border_color(content_, current_theme_.border, 0); // Border color for chat area
lv_obj_set_style_pad_all(content_, lvgl_theme->spacing(4), 0);
lv_obj_set_style_border_width(content_, 0, 0);
lv_obj_set_style_bg_color(content_, lvgl_theme->chat_background_color(), 0); // Background for chat area
// Enable scrolling for chat content
lv_obj_set_scrollbar_mode(content_, LV_SCROLLBAR_MODE_OFF);
@ -377,7 +367,7 @@ void LcdDisplay::SetupUI() {
// Create a flex container for chat messages
lv_obj_set_flex_flow(content_, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(content_, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
lv_obj_set_style_pad_row(content_, 10, 0); // Space between messages
lv_obj_set_style_pad_row(content_, lvgl_theme->spacing(4), 0); // Space between messages
// We'll create chat messages dynamically in SetChatMessage
chat_message_label_ = nullptr;
@ -387,23 +377,23 @@ void LcdDisplay::SetupUI() {
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);
lv_obj_set_style_pad_left(status_bar_, 10, 0);
lv_obj_set_style_pad_right(status_bar_, 10, 0);
lv_obj_set_style_pad_top(status_bar_, 2, 0);
lv_obj_set_style_pad_bottom(status_bar_, 2, 0);
lv_obj_set_style_pad_top(status_bar_, lvgl_theme->spacing(2), 0);
lv_obj_set_style_pad_bottom(status_bar_, lvgl_theme->spacing(2), 0);
lv_obj_set_style_pad_left(status_bar_, lvgl_theme->spacing(4), 0);
lv_obj_set_style_pad_right(status_bar_, lvgl_theme->spacing(4), 0);
lv_obj_set_scrollbar_mode(status_bar_, LV_SCROLLBAR_MODE_OFF);
// 设置状态栏的内容垂直居中
lv_obj_set_flex_align(status_bar_, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
network_label_ = lv_label_create(status_bar_);
lv_label_set_text(network_label_, "");
lv_obj_set_style_text_font(network_label_, style_.icon_font, 0);
lv_obj_set_style_text_color(network_label_, current_theme_.text, 0);
lv_obj_set_style_text_font(network_label_, icon_font, 0);
lv_obj_set_style_text_color(network_label_, lvgl_theme->text_color(), 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_obj_set_style_text_color(notification_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(notification_label_, lvgl_theme->text_color(), 0);
lv_label_set_text(notification_label_, "");
lv_obj_add_flag(notification_label_, LV_OBJ_FLAG_HIDDEN);
@ -411,26 +401,26 @@ void LcdDisplay::SetupUI() {
lv_obj_set_flex_grow(status_label_, 1);
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_obj_set_style_text_color(status_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(status_label_, lvgl_theme->text_color(), 0);
lv_label_set_text(status_label_, Lang::Strings::INITIALIZING);
mute_label_ = lv_label_create(status_bar_);
lv_label_set_text(mute_label_, "");
lv_obj_set_style_text_font(mute_label_, style_.icon_font, 0);
lv_obj_set_style_text_color(mute_label_, current_theme_.text, 0);
lv_obj_set_style_text_font(mute_label_, icon_font, 0);
lv_obj_set_style_text_color(mute_label_, lvgl_theme->text_color(), 0);
battery_label_ = lv_label_create(status_bar_);
lv_label_set_text(battery_label_, "");
lv_obj_set_style_text_font(battery_label_, style_.icon_font, 0);
lv_obj_set_style_text_color(battery_label_, current_theme_.text, 0);
lv_obj_set_style_margin_left(battery_label_, 5, 0); // 添加左边距，与前面的元素分隔
lv_obj_set_style_text_font(battery_label_, icon_font, 0);
lv_obj_set_style_text_color(battery_label_, lvgl_theme->text_color(), 0);
lv_obj_set_style_margin_left(battery_label_, lvgl_theme->spacing(2), 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, style_.text_font->line_height * 2);
lv_obj_align(low_battery_popup_, LV_ALIGN_BOTTOM_MID, 0, -10);
lv_obj_set_style_bg_color(low_battery_popup_, current_theme_.low_battery, 0);
lv_obj_set_style_radius(low_battery_popup_, 10, 0);
lv_obj_set_size(low_battery_popup_, LV_HOR_RES * 0.9, text_font->line_height * 2);
lv_obj_align(low_battery_popup_, LV_ALIGN_BOTTOM_MID, 0, -lvgl_theme->spacing(4));
lv_obj_set_style_bg_color(low_battery_popup_, lvgl_theme->low_battery_color(), 0);
lv_obj_set_style_radius(low_battery_popup_, lvgl_theme->spacing(4), 0);
low_battery_label_ = lv_label_create(low_battery_popup_);
lv_label_set_text(low_battery_label_, Lang::Strings::BATTERY_NEED_CHARGE);
lv_obj_set_style_text_color(low_battery_label_, lv_color_white(), 0);
@ -438,13 +428,13 @@ void LcdDisplay::SetupUI() {
lv_obj_add_flag(low_battery_popup_, LV_OBJ_FLAG_HIDDEN);
emoji_image_ = lv_img_create(screen);
lv_obj_align(emoji_image_, LV_ALIGN_TOP_MID, 0, style_.text_font->line_height + 10);
lv_obj_align(emoji_image_, LV_ALIGN_TOP_MID, 0, text_font->line_height + lvgl_theme->spacing(2));
// Display AI logo while booting
emotion_label_ = lv_label_create(screen);
lv_obj_center(emotion_label_);
lv_obj_set_style_text_font(emotion_label_, &font_awesome_30_4, 0);
lv_obj_set_style_text_color(emotion_label_, current_theme_.text, 0);
lv_obj_set_style_text_font(emotion_label_, large_icon_font, 0);
lv_obj_set_style_text_color(emotion_label_, lvgl_theme->text_color(), 0);
lv_label_set_text(emotion_label_, FONT_AWESOME_MICROCHIP_AI);
}
#if CONFIG_IDF_TARGET_ESP32P4
@ -501,20 +491,23 @@ void LcdDisplay::SetChatMessage(const char* role, const char* content) {
return;
}
auto lvgl_theme = static_cast<LvglTheme*>(current_theme_);
auto text_font = lvgl_theme->text_font()->font();
// Create a message bubble
lv_obj_t* msg_bubble = lv_obj_create(content_);
lv_obj_set_style_radius(msg_bubble, 8, 0);
lv_obj_set_scrollbar_mode(msg_bubble, LV_SCROLLBAR_MODE_OFF);
lv_obj_set_style_border_width(msg_bubble, 1, 0);
lv_obj_set_style_border_color(msg_bubble, current_theme_.border, 0);
lv_obj_set_style_pad_all(msg_bubble, 8, 0);
lv_obj_set_style_border_color(msg_bubble, lvgl_theme->border_color(), 0);
lv_obj_set_style_pad_all(msg_bubble, lvgl_theme->spacing(4), 0);
// Create the message text
lv_obj_t* msg_text = lv_label_create(msg_bubble);
lv_label_set_text(msg_text, content);
// 计算文本实际宽度
lv_coord_t text_width = lv_txt_get_width(content, strlen(content), style_.text_font, 0);
lv_coord_t text_width = lv_txt_get_width(content, strlen(content), text_font, 0);
// 计算气泡宽度
lv_coord_t max_width = LV_HOR_RES * 85 / 100 - 16; // 屏幕宽度的85%
@ -544,9 +537,9 @@ void LcdDisplay::SetChatMessage(const char* role, const char* content) {
// Set alignment and style based on message role
if (strcmp(role, "user") == 0) {
// User messages are right-aligned with green background
lv_obj_set_style_bg_color(msg_bubble, current_theme_.user_bubble, 0);
lv_obj_set_style_bg_color(msg_bubble, lvgl_theme->user_bubble_color(), 0);
// Set text color for contrast
lv_obj_set_style_text_color(msg_text, current_theme_.text, 0);
lv_obj_set_style_text_color(msg_text, lvgl_theme->text_color(), 0);
// 设置自定义属性标记气泡类型
lv_obj_set_user_data(msg_bubble, (void*)"user");
@ -559,9 +552,9 @@ void LcdDisplay::SetChatMessage(const char* role, const char* content) {
lv_obj_set_style_flex_grow(msg_bubble, 0, 0);
} else if (strcmp(role, "assistant") == 0) {
// Assistant messages are left-aligned with white background
lv_obj_set_style_bg_color(msg_bubble, current_theme_.assistant_bubble, 0);
lv_obj_set_style_bg_color(msg_bubble, lvgl_theme->assistant_bubble_color(), 0);
// Set text color for contrast
lv_obj_set_style_text_color(msg_text, current_theme_.text, 0);
lv_obj_set_style_text_color(msg_text, lvgl_theme->text_color(), 0);
// 设置自定义属性标记气泡类型
lv_obj_set_user_data(msg_bubble, (void*)"assistant");
@ -574,9 +567,9 @@ void LcdDisplay::SetChatMessage(const char* role, const char* content) {
lv_obj_set_style_flex_grow(msg_bubble, 0, 0);
} else if (strcmp(role, "system") == 0) {
// System messages are center-aligned with light gray background
lv_obj_set_style_bg_color(msg_bubble, current_theme_.system_bubble, 0);
lv_obj_set_style_bg_color(msg_bubble, lvgl_theme->system_bubble_color(), 0);
// Set text color for contrast
lv_obj_set_style_text_color(msg_text, current_theme_.system_text, 0);
lv_obj_set_style_text_color(msg_text, lvgl_theme->system_text_color(), 0);
// 设置自定义属性标记气泡类型
lv_obj_set_user_data(msg_bubble, (void*)"system");
@ -647,17 +640,18 @@ void LcdDisplay::SetPreviewImage(const lv_img_dsc_t* img_dsc) {
return;
}
auto lvgl_theme = static_cast<LvglTheme*>(current_theme_);
if (img_dsc != nullptr) {
// Create a message bubble for image preview
lv_obj_t* img_bubble = lv_obj_create(content_);
lv_obj_set_style_radius(img_bubble, 8, 0);
lv_obj_set_scrollbar_mode(img_bubble, LV_SCROLLBAR_MODE_OFF);
lv_obj_set_style_border_width(img_bubble, 1, 0);
lv_obj_set_style_border_color(img_bubble, current_theme_.border, 0);
lv_obj_set_style_pad_all(img_bubble, 8, 0);
lv_obj_set_style_border_color(img_bubble, lvgl_theme->border_color(), 0);
lv_obj_set_style_pad_all(img_bubble, lvgl_theme->spacing(4), 0);
// Set image bubble background color (similar to system message)
lv_obj_set_style_bg_color(img_bubble, current_theme_.assistant_bubble, 0);
lv_obj_set_style_bg_color(img_bubble, lvgl_theme->assistant_bubble_color(), 0);
// 设置自定义属性标记气泡类型
lv_obj_set_user_data(img_bubble, (void*)"image");
@ -722,11 +716,15 @@ void LcdDisplay::SetPreviewImage(const lv_img_dsc_t* img_dsc) {
#else
void LcdDisplay::SetupUI() {
DisplayLockGuard lock(this);
LvglTheme* lvgl_theme = static_cast<LvglTheme*>(current_theme_);
auto text_font = lvgl_theme->text_font()->font();
auto icon_font = lvgl_theme->icon_font()->font();
auto large_icon_font = lvgl_theme->large_icon_font()->font();
auto screen = lv_screen_active();
lv_obj_set_style_text_font(screen, style_.text_font, 0);
lv_obj_set_style_text_color(screen, current_theme_.text, 0);
lv_obj_set_style_bg_color(screen, current_theme_.background, 0);
lv_obj_set_style_text_font(screen, text_font, 0);
lv_obj_set_style_text_color(screen, lvgl_theme->text_color(), 0);
lv_obj_set_style_bg_color(screen, lvgl_theme->background_color(), 0);
/* Container */
container_ = lv_obj_create(screen);
@ -735,15 +733,22 @@ void LcdDisplay::SetupUI() {
lv_obj_set_style_pad_all(container_, 0, 0);
lv_obj_set_style_border_width(container_, 0, 0);
lv_obj_set_style_pad_row(container_, 0, 0);
lv_obj_set_style_bg_color(container_, current_theme_.background, 0);
lv_obj_set_style_border_color(container_, current_theme_.border, 0);
lv_obj_set_style_bg_color(container_, lvgl_theme->background_color(), 0);
lv_obj_set_style_border_color(container_, lvgl_theme->border_color(), 0);
/* Status bar */
status_bar_ = lv_obj_create(container_);
lv_obj_set_size(status_bar_, LV_HOR_RES, style_.text_font->line_height);
lv_obj_set_size(status_bar_, LV_HOR_RES, LV_SIZE_CONTENT);
lv_obj_set_style_radius(status_bar_, 0, 0);
lv_obj_set_style_bg_color(status_bar_, current_theme_.background, 0);
lv_obj_set_style_text_color(status_bar_, current_theme_.text, 0);
lv_obj_set_style_bg_color(status_bar_, lvgl_theme->background_color(), 0);
lv_obj_set_style_text_color(status_bar_, lvgl_theme->text_color(), 0);
lv_obj_set_flex_flow(status_bar_, LV_FLEX_FLOW_ROW);
lv_obj_set_style_pad_top(status_bar_, lvgl_theme->spacing(2), 0);
lv_obj_set_style_pad_bottom(status_bar_, lvgl_theme->spacing(2), 0);
lv_obj_set_style_pad_left(status_bar_, lvgl_theme->spacing(4), 0);
lv_obj_set_style_pad_right(status_bar_, lvgl_theme->spacing(4), 0);
lv_obj_set_style_border_width(status_bar_, 0, 0);
lv_obj_set_style_pad_column(status_bar_, 0, 0);
/* Content */
content_ = lv_obj_create(container_);
@ -751,9 +756,9 @@ void LcdDisplay::SetupUI() {
lv_obj_set_style_radius(content_, 0, 0);
lv_obj_set_width(content_, LV_HOR_RES);
lv_obj_set_flex_grow(content_, 1);
lv_obj_set_style_pad_all(content_, 5, 0);
lv_obj_set_style_bg_color(content_, current_theme_.chat_background, 0);
lv_obj_set_style_border_color(content_, current_theme_.border, 0); // Border color for content
lv_obj_set_style_pad_all(content_, 0, 0);
lv_obj_set_style_border_width(content_, 0, 0);
lv_obj_set_style_bg_color(content_, lvgl_theme->chat_background_color(), 0);
lv_obj_set_flex_flow(content_, LV_FLEX_FLOW_COLUMN); // 垂直布局（从上到下）
lv_obj_set_flex_align(content_, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_SPACE_EVENLY); // 子对象居中对齐，等距分布
@ -765,8 +770,8 @@ void LcdDisplay::SetupUI() {
lv_obj_set_style_border_width(emoji_box_, 0, 0);
emotion_label_ = lv_label_create(emoji_box_);
lv_obj_set_style_text_font(emotion_label_, &font_awesome_30_4, 0);
lv_obj_set_style_text_color(emotion_label_, current_theme_.text, 0);
lv_obj_set_style_text_font(emotion_label_, large_icon_font, 0);
lv_obj_set_style_text_color(emotion_label_, lvgl_theme->text_color(), 0);
lv_label_set_text(emotion_label_, FONT_AWESOME_MICROCHIP_AI);
emoji_image_ = lv_img_create(emoji_box_);
@ -779,28 +784,21 @@ void LcdDisplay::SetupUI() {
chat_message_label_ = lv_label_create(content_);
lv_label_set_text(chat_message_label_, "");
lv_obj_set_width(chat_message_label_, LV_HOR_RES * 0.9); // 限制宽度为屏幕宽度的 90%
lv_obj_set_width(chat_message_label_, width_ * 0.9); // 限制宽度为屏幕宽度的 90%
lv_label_set_long_mode(chat_message_label_, LV_LABEL_LONG_WRAP); // 设置为自动换行模式
lv_obj_set_style_text_align(chat_message_label_, LV_TEXT_ALIGN_CENTER, 0); // 设置文本居中对齐
lv_obj_set_style_text_color(chat_message_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(chat_message_label_, lvgl_theme->text_color(), 0);
/* 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);
lv_obj_set_style_pad_left(status_bar_, 2, 0);
lv_obj_set_style_pad_right(status_bar_, 2, 0);
network_label_ = lv_label_create(status_bar_);
lv_label_set_text(network_label_, "");
lv_obj_set_style_text_font(network_label_, style_.icon_font, 0);
lv_obj_set_style_text_color(network_label_, current_theme_.text, 0);
lv_obj_set_style_text_font(network_label_, icon_font, 0);
lv_obj_set_style_text_color(network_label_, lvgl_theme->text_color(), 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_obj_set_style_text_color(notification_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(notification_label_, lvgl_theme->text_color(), 0);
lv_label_set_text(notification_label_, "");
lv_obj_add_flag(notification_label_, LV_OBJ_FLAG_HIDDEN);
@ -808,25 +806,26 @@ void LcdDisplay::SetupUI() {
lv_obj_set_flex_grow(status_label_, 1);
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_obj_set_style_text_color(status_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(status_label_, lvgl_theme->text_color(), 0);
lv_label_set_text(status_label_, Lang::Strings::INITIALIZING);
mute_label_ = lv_label_create(status_bar_);
lv_label_set_text(mute_label_, "");
lv_obj_set_style_text_font(mute_label_, style_.icon_font, 0);
lv_obj_set_style_text_color(mute_label_, current_theme_.text, 0);
lv_obj_set_style_text_font(mute_label_, icon_font, 0);
lv_obj_set_style_text_color(mute_label_, lvgl_theme->text_color(), 0);
battery_label_ = lv_label_create(status_bar_);
lv_label_set_text(battery_label_, "");
lv_obj_set_style_text_font(battery_label_, style_.icon_font, 0);
lv_obj_set_style_text_color(battery_label_, current_theme_.text, 0);
lv_obj_set_style_text_font(battery_label_, icon_font, 0);
lv_obj_set_style_text_color(battery_label_, lvgl_theme->text_color(), 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, style_.text_font->line_height * 2);
lv_obj_align(low_battery_popup_, LV_ALIGN_BOTTOM_MID, 0, -10);
lv_obj_set_style_bg_color(low_battery_popup_, current_theme_.low_battery, 0);
lv_obj_set_style_radius(low_battery_popup_, 10, 0);
lv_obj_set_size(low_battery_popup_, LV_HOR_RES * 0.9, text_font->line_height * 2);
lv_obj_align(low_battery_popup_, LV_ALIGN_BOTTOM_MID, 0, -lvgl_theme->spacing(4));
lv_obj_set_style_bg_color(low_battery_popup_, lvgl_theme->low_battery_color(), 0);
lv_obj_set_style_radius(low_battery_popup_, lvgl_theme->spacing(4), 0);
low_battery_label_ = lv_label_create(low_battery_popup_);
lv_label_set_text(low_battery_label_, Lang::Strings::BATTERY_NEED_CHARGE);
lv_obj_set_style_text_color(low_battery_label_, lv_color_white(), 0);
@ -873,7 +872,8 @@ void LcdDisplay::SetEmotion(const char* emotion) {
return;
}
auto img_dsc = style_.emoji_collection != nullptr ? style_.emoji_collection->GetEmojiImage(emotion) : nullptr;
auto emoji_collection = static_cast<LvglTheme*>(current_theme_)->emoji_collection();
auto img_dsc = emoji_collection != nullptr ? emoji_collection->GetEmojiImage(emotion) : nullptr;
if (img_dsc == nullptr) {
const char* utf8 = font_awesome_get_utf8(emotion);
if (utf8 != nullptr && emotion_label_ != nullptr) {
@ -901,62 +901,70 @@ void LcdDisplay::SetEmotion(const char* emotion) {
#endif
}
void LcdDisplay::SetTheme(const std::string& theme_name) {
void LcdDisplay::SetTheme(Theme* theme) {
DisplayLockGuard lock(this);
if (theme_name == "dark" || theme_name == "DARK") {
current_theme_ = DARK_THEME;
} else if (theme_name == "light" || theme_name == "LIGHT") {
current_theme_ = LIGHT_THEME;
} else {
// Invalid theme name, return false
ESP_LOGE(TAG, "Invalid theme name: %s", theme_name.c_str());
return;
}
auto lvgl_theme = static_cast<LvglTheme*>(theme);
// Get the active screen
lv_obj_t* screen = lv_screen_active();
// Set font
auto text_font = lvgl_theme->text_font()->font();
auto icon_font = lvgl_theme->icon_font()->font();
auto large_icon_font = lvgl_theme->large_icon_font()->font();
lv_obj_set_style_text_font(screen, text_font, 0);
if (text_font->line_height >= 30) {
lv_obj_set_style_text_font(mute_label_, large_icon_font, 0);
lv_obj_set_style_text_font(battery_label_, large_icon_font, 0);
lv_obj_set_style_text_font(network_label_, large_icon_font, 0);
} else {
lv_obj_set_style_text_font(mute_label_, icon_font, 0);
lv_obj_set_style_text_font(battery_label_, icon_font, 0);
lv_obj_set_style_text_font(network_label_, icon_font, 0);
}
// Update the screen colors
lv_obj_set_style_bg_color(screen, current_theme_.background, 0);
lv_obj_set_style_text_color(screen, current_theme_.text, 0);
lv_obj_set_style_bg_color(screen, lvgl_theme->background_color(), 0);
lv_obj_set_style_text_color(screen, lvgl_theme->text_color(), 0);
// Update container colors
if (container_ != nullptr) {
lv_obj_set_style_bg_color(container_, current_theme_.background, 0);
lv_obj_set_style_border_color(container_, current_theme_.border, 0);
lv_obj_set_style_bg_color(container_, lvgl_theme->background_color(), 0);
lv_obj_set_style_border_color(container_, lvgl_theme->border_color(), 0);
}
// Update status bar colors
if (status_bar_ != nullptr) {
lv_obj_set_style_bg_color(status_bar_, current_theme_.background, 0);
lv_obj_set_style_text_color(status_bar_, current_theme_.text, 0);
lv_obj_set_style_bg_color(status_bar_, lvgl_theme->background_color(), 0);
lv_obj_set_style_text_color(status_bar_, lvgl_theme->text_color(), 0);
// Update status bar elements
if (network_label_ != nullptr) {
lv_obj_set_style_text_color(network_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(network_label_, lvgl_theme->text_color(), 0);
}
if (status_label_ != nullptr) {
lv_obj_set_style_text_color(status_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(status_label_, lvgl_theme->text_color(), 0);
}
if (notification_label_ != nullptr) {
lv_obj_set_style_text_color(notification_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(notification_label_, lvgl_theme->text_color(), 0);
}
if (mute_label_ != nullptr) {
lv_obj_set_style_text_color(mute_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(mute_label_, lvgl_theme->text_color(), 0);
}
if (battery_label_ != nullptr) {
lv_obj_set_style_text_color(battery_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(battery_label_, lvgl_theme->text_color(), 0);
}
if (emotion_label_ != nullptr) {
lv_obj_set_style_text_color(emotion_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(emotion_label_, lvgl_theme->text_color(), 0);
}
}
// Update content area colors
if (content_ != nullptr) {
lv_obj_set_style_bg_color(content_, current_theme_.chat_background, 0);
lv_obj_set_style_border_color(content_, current_theme_.border, 0);
lv_obj_set_style_bg_color(content_, lvgl_theme->chat_background_color(), 0);
lv_obj_set_style_border_color(content_, lvgl_theme->border_color(), 0);
// If we have the chat message style, update all message bubbles
#if CONFIG_USE_WECHAT_MESSAGE_STYLE
@ -996,17 +1004,17 @@ void LcdDisplay::SetTheme(const std::string& theme_name) {
// 根据气泡类型应用正确的颜色
if (strcmp(bubble_type, "user") == 0) {
lv_obj_set_style_bg_color(bubble, current_theme_.user_bubble, 0);
lv_obj_set_style_bg_color(bubble, lvgl_theme->user_bubble_color(), 0);
} else if (strcmp(bubble_type, "assistant") == 0) {
lv_obj_set_style_bg_color(bubble, current_theme_.assistant_bubble, 0);
lv_obj_set_style_bg_color(bubble, lvgl_theme->assistant_bubble_color(), 0);
} else if (strcmp(bubble_type, "system") == 0) {
lv_obj_set_style_bg_color(bubble, current_theme_.system_bubble, 0);
lv_obj_set_style_bg_color(bubble, lvgl_theme->system_bubble_color(), 0);
} else if (strcmp(bubble_type, "image") == 0) {
lv_obj_set_style_bg_color(bubble, current_theme_.system_bubble, 0);
lv_obj_set_style_bg_color(bubble, lvgl_theme->system_bubble_color(), 0);
}
// Update border color
lv_obj_set_style_border_color(bubble, current_theme_.border, 0);
lv_obj_set_style_border_color(bubble, lvgl_theme->border_color(), 0);
// Update text color for the message
if (lv_obj_get_child_cnt(bubble) > 0) {
@ -1014,84 +1022,33 @@ void LcdDisplay::SetTheme(const std::string& theme_name) {
if (text != nullptr) {
// 根据气泡类型设置文本颜色
if (strcmp(bubble_type, "system") == 0) {
lv_obj_set_style_text_color(text, current_theme_.system_text, 0);
lv_obj_set_style_text_color(text, lvgl_theme->system_text_color(), 0);
} else {
lv_obj_set_style_text_color(text, current_theme_.text, 0);
lv_obj_set_style_text_color(text, lvgl_theme->text_color(), 0);
}
}
}
} else {
// 如果没有标记，回退到之前的逻辑（颜色比较）
// ...保留原有的回退逻辑...
lv_color_t bg_color = lv_obj_get_style_bg_color(bubble, 0);
// 改进bubble类型检测逻辑，不仅使用颜色比较
bool is_user_bubble = false;
bool is_assistant_bubble = false;
bool is_system_bubble = false;
// 检查用户bubble
if (lv_color_eq(bg_color, DARK_USER_BUBBLE_COLOR) ||
lv_color_eq(bg_color, LIGHT_USER_BUBBLE_COLOR) ||
lv_color_eq(bg_color, current_theme_.user_bubble)) {
is_user_bubble = true;
}
// 检查系统bubble
else if (lv_color_eq(bg_color, DARK_SYSTEM_BUBBLE_COLOR) ||
lv_color_eq(bg_color, LIGHT_SYSTEM_BUBBLE_COLOR) ||
lv_color_eq(bg_color, current_theme_.system_bubble)) {
is_system_bubble = true;
}
// 剩余的都当作助手bubble处理
else {
is_assistant_bubble = true;
}
// 根据bubble类型应用正确的颜色
if (is_user_bubble) {
lv_obj_set_style_bg_color(bubble, current_theme_.user_bubble, 0);
} else if (is_assistant_bubble) {
lv_obj_set_style_bg_color(bubble, current_theme_.assistant_bubble, 0);
} else if (is_system_bubble) {
lv_obj_set_style_bg_color(bubble, current_theme_.system_bubble, 0);
}
// Update border color
lv_obj_set_style_border_color(bubble, current_theme_.border, 0);
// Update text color for the message
if (lv_obj_get_child_cnt(bubble) > 0) {
lv_obj_t* text = lv_obj_get_child(bubble, 0);
if (text != nullptr) {
// 回退到颜色检测逻辑
if (lv_color_eq(bg_color, current_theme_.system_bubble) ||
lv_color_eq(bg_color, DARK_SYSTEM_BUBBLE_COLOR) ||
lv_color_eq(bg_color, LIGHT_SYSTEM_BUBBLE_COLOR)) {
lv_obj_set_style_text_color(text, current_theme_.system_text, 0);
} else {
lv_obj_set_style_text_color(text, current_theme_.text, 0);
}
}
}
ESP_LOGW(TAG, "child[%lu] Bubble type is not found", i);
}
}
#else
// Simple UI mode - just update the main chat message
if (chat_message_label_ != nullptr) {
lv_obj_set_style_text_color(chat_message_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(chat_message_label_, lvgl_theme->text_color(), 0);
}
if (emotion_label_ != nullptr) {
lv_obj_set_style_text_color(emotion_label_, current_theme_.text, 0);
lv_obj_set_style_text_color(emotion_label_, lvgl_theme->text_color(), 0);
}
#endif
}
// Update low battery popup
if (low_battery_popup_ != nullptr) {
lv_obj_set_style_bg_color(low_battery_popup_, current_theme_.low_battery, 0);
lv_obj_set_style_bg_color(low_battery_popup_, lvgl_theme->low_battery_color(), 0);
}
// No errors occurred. Save theme to settings
Display::SetTheme(theme_name);
Display::SetTheme(lvgl_theme);
}