devttl/xiaozhi-esp32
1
0
Fork 0
forked from xiaozhi/xiaozhi-esp32
Code Pull Requests Activity

add dark mode (#363)

Browse Source
This commit is contained in:
ZhouKe
2025-03-18 10:33:22 +08:00
committed by GitHub
parent 349267ef23
commit 2c8f2f7d42
2 changed files with 67 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
main/display/lcd_display.cc
View File

@@ -12,6 +12,29 @@
#define TAG "LcdDisplay"
// Dark mode color definitions
#if CONFIG_USE_DARK_MODE
#define BACKGROUND_COLOR lv_color_hex(0x121212) // Dark background
#define TEXT_COLOR lv_color_white() // White text
#define CHAT_BACKGROUND_COLOR lv_color_hex(0x1E1E1E) // Slightly lighter than background
#define USER_BUBBLE_COLOR lv_color_hex(0x1A6C37) // Dark green
#define ASSISTANT_BUBBLE_COLOR lv_color_hex(0x333333) // Dark gray
#define SYSTEM_BUBBLE_COLOR lv_color_hex(0x2A2A2A) // Medium gray
#define SYSTEM_TEXT_COLOR lv_color_hex(0xAAAAAA) // Light gray text
#define BORDER_COLOR lv_color_hex(0x333333) // Dark gray border
#define LOW_BATTERY_COLOR lv_color_hex(0xFF0000) // Red for dark mode
#else
#define BACKGROUND_COLOR lv_color_white() // White background
#define TEXT_COLOR lv_color_black() // Black text
#define CHAT_BACKGROUND_COLOR lv_color_hex(0xE0E0E0) // Light gray background
#define USER_BUBBLE_COLOR lv_color_hex(0x95EC69) // WeChat green
#define ASSISTANT_BUBBLE_COLOR lv_color_white() // White
#define SYSTEM_BUBBLE_COLOR lv_color_hex(0xE0E0E0) // Light gray
#define SYSTEM_TEXT_COLOR lv_color_hex(0x666666) // Dark gray text
#define BORDER_COLOR lv_color_hex(0xE0E0E0) // Light gray border
#define LOW_BATTERY_COLOR lv_color_black() // Black for light mode
#endif
LV_FONT_DECLARE(font_awesome_30_4);
SpiLcdDisplay::SpiLcdDisplay(esp_lcd_panel_io_handle_t panel_io, esp_lcd_panel_handle_t panel,
@@ -183,7 +206,8 @@ void LcdDisplay::SetupUI() {
auto screen = lv_screen_active();
lv_obj_set_style_text_font(screen, fonts_.text_font, 0);
lv_obj_set_style_text_color(screen, lv_color_black(), 0);
lv_obj_set_style_text_color(screen, TEXT_COLOR, 0);
lv_obj_set_style_bg_color(screen, BACKGROUND_COLOR, 0);
/* Container */
container_ = lv_obj_create(screen);
@@ -192,11 +216,15 @@ 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_, BACKGROUND_COLOR, 0);
lv_obj_set_style_border_color(container_, BORDER_COLOR, 0);
/* Status bar */
status_bar_ = lv_obj_create(container_);
lv_obj_set_size(status_bar_, LV_HOR_RES, fonts_.emoji_font->line_height);
lv_obj_set_style_radius(status_bar_, 0, 0);
lv_obj_set_style_bg_color(status_bar_, BACKGROUND_COLOR, 0);
lv_obj_set_style_text_color(status_bar_, TEXT_COLOR, 0);
/* Content - Chat area */
content_ = lv_obj_create(container_);
@@ -204,7 +232,8 @@ void LcdDisplay::SetupUI() {
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_, lv_color_hex(0xE0E0E0), 0); // Light gray background like WeChat
lv_obj_set_style_bg_color(content_, CHAT_BACKGROUND_COLOR, 0); // Background for chat area
lv_obj_set_style_border_color(content_, BORDER_COLOR, 0); // Border color for chat area
// Enable scrolling for chat content
lv_obj_set_scrollbar_mode(content_, LV_SCROLLBAR_MODE_OFF);
@@ -230,10 +259,12 @@ void LcdDisplay::SetupUI() {
network_label_ = lv_label_create(status_bar_);
lv_label_set_text(network_label_, "");
lv_obj_set_style_text_font(network_label_, fonts_.icon_font, 0);
lv_obj_set_style_text_color(network_label_, 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_, TEXT_COLOR, 0);
lv_label_set_text(notification_label_, "");
lv_obj_add_flag(notification_label_, LV_OBJ_FLAG_HIDDEN);
@@ -241,19 +272,23 @@ 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_, 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_, fonts_.icon_font, 0);
lv_obj_set_style_text_color(mute_label_, TEXT_COLOR, 0);
battery_label_ = lv_label_create(status_bar_);
lv_label_set_text(battery_label_, "");
lv_obj_set_style_text_font(battery_label_, fonts_.icon_font, 0);
lv_obj_set_style_text_color(battery_label_, TEXT_COLOR, 0);
// 创建emotion_label_在状态栏最右侧
emotion_label_ = lv_label_create(status_bar_);
lv_obj_set_style_text_font(emotion_label_, &font_awesome_30_4, 0);
lv_obj_set_style_text_color(emotion_label_, TEXT_COLOR, 0);
lv_label_set_text(emotion_label_, FONT_AWESOME_AI_CHIP);
lv_obj_set_style_margin_left(emotion_label_, 5, 0); // 添加左边距，与前面的元素分隔
@@ -261,7 +296,7 @@ void LcdDisplay::SetupUI() {
lv_obj_set_scrollbar_mode(low_battery_popup_, LV_SCROLLBAR_MODE_OFF);
lv_obj_set_size(low_battery_popup_, LV_HOR_RES * 0.9, fonts_.text_font->line_height * 2);
lv_obj_align(low_battery_popup_, LV_ALIGN_BOTTOM_MID, 0, 0);
lv_obj_set_style_bg_color(low_battery_popup_, lv_color_black(), 0);
lv_obj_set_style_bg_color(low_battery_popup_, LOW_BATTERY_COLOR, 0);
lv_obj_set_style_radius(low_battery_popup_, 10, 0);
lv_obj_t* low_battery_label = lv_label_create(low_battery_popup_);
lv_label_set_text(low_battery_label, Lang::Strings::BATTERY_NEED_CHARGE);
@@ -285,7 +320,7 @@ void LcdDisplay::SetChatMessage(const char* role, const char* 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, lv_color_hex(0xE0E0E0), 0);
lv_obj_set_style_border_color(msg_bubble, BORDER_COLOR, 0);
lv_obj_set_style_pad_all(msg_bubble, 8, 0);
// Create the message text
@@ -324,9 +359,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, lv_color_hex(0x95EC69), 0); // WeChat green
lv_obj_set_style_bg_color(msg_bubble, USER_BUBBLE_COLOR, 0);
// Set text color for contrast
lv_obj_set_style_text_color(msg_text, lv_color_black(), 0);
lv_obj_set_style_text_color(msg_text, TEXT_COLOR, 0);
// Set appropriate width for content
lv_obj_set_width(msg_bubble, LV_SIZE_CONTENT);
@@ -339,9 +374,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, lv_color_white(), 0);
lv_obj_set_style_bg_color(msg_bubble, ASSISTANT_BUBBLE_COLOR, 0);
// Set text color for contrast
lv_obj_set_style_text_color(msg_text, lv_color_black(), 0);
lv_obj_set_style_text_color(msg_text, TEXT_COLOR, 0);
// Set appropriate width for content
lv_obj_set_width(msg_bubble, LV_SIZE_CONTENT);
@@ -354,9 +389,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, lv_color_hex(0xE0E0E0), 0); // 浅灰色背景
lv_obj_set_style_bg_color(msg_bubble, SYSTEM_BUBBLE_COLOR, 0);
// Set text color for contrast
lv_obj_set_style_text_color(msg_text, lv_color_hex(0x666666), 0); // 深灰色文字
lv_obj_set_style_text_color(msg_text, SYSTEM_TEXT_COLOR, 0);
// Set appropriate width for content
lv_obj_set_width(msg_bubble, LV_SIZE_CONTENT);
@@ -436,7 +471,8 @@ void LcdDisplay::SetupUI() {
auto screen = lv_screen_active();
lv_obj_set_style_text_font(screen, fonts_.text_font, 0);
lv_obj_set_style_text_color(screen, lv_color_black(), 0);
lv_obj_set_style_text_color(screen, TEXT_COLOR, 0);
lv_obj_set_style_bg_color(screen, BACKGROUND_COLOR, 0);
/* Container */
container_ = lv_obj_create(screen);
@@ -445,11 +481,15 @@ 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_, BACKGROUND_COLOR, 0);
lv_obj_set_style_border_color(container_, BORDER_COLOR, 0);
/* Status bar */
status_bar_ = lv_obj_create(container_);
lv_obj_set_size(status_bar_, LV_HOR_RES, fonts_.text_font->line_height);
lv_obj_set_style_radius(status_bar_, 0, 0);
lv_obj_set_style_bg_color(status_bar_, BACKGROUND_COLOR, 0);
lv_obj_set_style_text_color(status_bar_, TEXT_COLOR, 0);
/* Content */
content_ = lv_obj_create(container_);
@@ -457,12 +497,15 @@ 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_bg_color(content_, BACKGROUND_COLOR, 0);
lv_obj_set_style_border_color(content_, BORDER_COLOR, 0); // Border color for content
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); // 子对象居中对齐，等距分布
emotion_label_ = lv_label_create(content_);
lv_obj_set_style_text_font(emotion_label_, &font_awesome_30_4, 0);
lv_obj_set_style_text_color(emotion_label_, TEXT_COLOR, 0);
lv_label_set_text(emotion_label_, FONT_AWESOME_AI_CHIP);
chat_message_label_ = lv_label_create(content_);
@@ -470,6 +513,7 @@ void LcdDisplay::SetupUI() {
lv_obj_set_width(chat_message_label_, LV_HOR_RES * 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_, TEXT_COLOR, 0);
/* Status bar */
lv_obj_set_flex_flow(status_bar_, LV_FLEX_FLOW_ROW);
@@ -482,10 +526,12 @@ void LcdDisplay::SetupUI() {
network_label_ = lv_label_create(status_bar_);
lv_label_set_text(network_label_, "");
lv_obj_set_style_text_font(network_label_, fonts_.icon_font, 0);
lv_obj_set_style_text_color(network_label_, 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_, TEXT_COLOR, 0);
lv_label_set_text(notification_label_, "");
lv_obj_add_flag(notification_label_, LV_OBJ_FLAG_HIDDEN);
@@ -493,20 +539,23 @@ 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_, 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_, fonts_.icon_font, 0);
lv_obj_set_style_text_color(mute_label_, TEXT_COLOR, 0);
battery_label_ = lv_label_create(status_bar_);
lv_label_set_text(battery_label_, "");
lv_obj_set_style_text_font(battery_label_, fonts_.icon_font, 0);
lv_obj_set_style_text_color(battery_label_, 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, fonts_.text_font->line_height * 2);
lv_obj_align(low_battery_popup_, LV_ALIGN_BOTTOM_MID, 0, 0);
lv_obj_set_style_bg_color(low_battery_popup_, lv_color_black(), 0);
lv_obj_set_style_bg_color(low_battery_popup_, LOW_BATTERY_COLOR, 0);
lv_obj_set_style_radius(low_battery_popup_, 10, 0);
lv_obj_t* low_battery_label = lv_label_create(low_battery_popup_);
lv_label_set_text(low_battery_label, Lang::Strings::BATTERY_NEED_CHARGE);