lcd_display.cc 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984
  1. #include "lcd_display.h"
  2. #include <vector>
  3. #include <font_awesome_symbols.h>
  4. #include <esp_log.h>
  5. #include <esp_err.h>
  6. #include <esp_lvgl_port.h>
  7. #include "assets/lang_config.h"
  8. #include <cstring>
  9. #include "settings.h"
  10. #include "board.h"
  11. #include "esp_lcd_touch_gt911.h"
  12. #define TAG "LcdDisplay"
  13. // Color definitions for dark theme
  14. #define DARK_BACKGROUND_COLOR lv_color_hex(0x121212) // Dark background
  15. #define DARK_TEXT_COLOR lv_color_white() // White text
  16. #define DARK_CHAT_BACKGROUND_COLOR lv_color_hex(0x1E1E1E) // Slightly lighter than background
  17. #define DARK_USER_BUBBLE_COLOR lv_color_hex(0x1A6C37) // Dark green
  18. #define DARK_ASSISTANT_BUBBLE_COLOR lv_color_hex(0x333333) // Dark gray
  19. #define DARK_SYSTEM_BUBBLE_COLOR lv_color_hex(0x2A2A2A) // Medium gray
  20. #define DARK_SYSTEM_TEXT_COLOR lv_color_hex(0xAAAAAA) // Light gray text
  21. #define DARK_BORDER_COLOR lv_color_hex(0x333333) // Dark gray border
  22. #define DARK_LOW_BATTERY_COLOR lv_color_hex(0xFF0000) // Red for dark mode
  23. // Color definitions for light theme
  24. #define LIGHT_BACKGROUND_COLOR lv_color_white() // White background
  25. #define LIGHT_TEXT_COLOR lv_color_black() // Black text
  26. #define LIGHT_CHAT_BACKGROUND_COLOR lv_color_hex(0xE0E0E0) // Light gray background
  27. #define LIGHT_USER_BUBBLE_COLOR lv_color_hex(0x95EC69) // WeChat green
  28. #define LIGHT_ASSISTANT_BUBBLE_COLOR lv_color_white() // White
  29. #define LIGHT_SYSTEM_BUBBLE_COLOR lv_color_hex(0xE0E0E0) // Light gray
  30. #define LIGHT_SYSTEM_TEXT_COLOR lv_color_hex(0x666666) // Dark gray text
  31. #define LIGHT_BORDER_COLOR lv_color_hex(0xE0E0E0) // Light gray border
  32. #define LIGHT_LOW_BATTERY_COLOR lv_color_black() // Black for light mode
  33. // Theme color structure
  34. struct ThemeColors {
  35. lv_color_t background;
  36. lv_color_t text;
  37. lv_color_t chat_background;
  38. lv_color_t user_bubble;
  39. lv_color_t assistant_bubble;
  40. lv_color_t system_bubble;
  41. lv_color_t system_text;
  42. lv_color_t border;
  43. lv_color_t low_battery;
  44. };
  45. // Define dark theme colors
  46. static const ThemeColors DARK_THEME = {
  47. .background = DARK_BACKGROUND_COLOR,
  48. .text = DARK_TEXT_COLOR,
  49. .chat_background = DARK_CHAT_BACKGROUND_COLOR,
  50. .user_bubble = DARK_USER_BUBBLE_COLOR,
  51. .assistant_bubble = DARK_ASSISTANT_BUBBLE_COLOR,
  52. .system_bubble = DARK_SYSTEM_BUBBLE_COLOR,
  53. .system_text = DARK_SYSTEM_TEXT_COLOR,
  54. .border = DARK_BORDER_COLOR,
  55. .low_battery = DARK_LOW_BATTERY_COLOR
  56. };
  57. // Define light theme colors
  58. static const ThemeColors LIGHT_THEME = {
  59. .background = LIGHT_BACKGROUND_COLOR,
  60. .text = LIGHT_TEXT_COLOR,
  61. .chat_background = LIGHT_CHAT_BACKGROUND_COLOR,
  62. .user_bubble = LIGHT_USER_BUBBLE_COLOR,
  63. .assistant_bubble = LIGHT_ASSISTANT_BUBBLE_COLOR,
  64. .system_bubble = LIGHT_SYSTEM_BUBBLE_COLOR,
  65. .system_text = LIGHT_SYSTEM_TEXT_COLOR,
  66. .border = LIGHT_BORDER_COLOR,
  67. .low_battery = LIGHT_LOW_BATTERY_COLOR
  68. };
  69. // Current theme - initialize based on default config
  70. static ThemeColors current_theme = LIGHT_THEME;
  71. LV_FONT_DECLARE(font_awesome_30_4);
  72. SpiLcdDisplay::SpiLcdDisplay(esp_lcd_panel_io_handle_t panel_io, esp_lcd_panel_handle_t panel,
  73. int width, int height, int offset_x, int offset_y, bool mirror_x, bool mirror_y, bool swap_xy,
  74. DisplayFonts fonts)
  75. : LcdDisplay(panel_io, panel, fonts) {
  76. width_ = width;
  77. height_ = height;
  78. // draw white
  79. std::vector<uint16_t> buffer(width_, 0xFFFF);
  80. for (int y = 0; y < height_; y++) {
  81. esp_lcd_panel_draw_bitmap(panel_, 0, y, width_, y + 1, buffer.data());
  82. }
  83. // Set the display to on
  84. ESP_LOGI(TAG, "Turning display on");
  85. ESP_ERROR_CHECK(esp_lcd_panel_disp_on_off(panel_, true));
  86. ESP_LOGI(TAG, "Initialize LVGL library");
  87. lv_init();
  88. ESP_LOGI(TAG, "Initialize LVGL port");
  89. lvgl_port_cfg_t port_cfg = ESP_LVGL_PORT_INIT_CONFIG();
  90. port_cfg.task_priority = 1;
  91. lvgl_port_init(&port_cfg);
  92. ESP_LOGI(TAG, "Adding LCD screen");
  93. const lvgl_port_display_cfg_t display_cfg = {
  94. .io_handle = panel_io_,
  95. .panel_handle = panel_,
  96. .control_handle = nullptr,
  97. .buffer_size = static_cast<uint32_t>(width_ * 10),
  98. .double_buffer = false,
  99. .trans_size = 0,
  100. .hres = static_cast<uint32_t>(width_),
  101. .vres = static_cast<uint32_t>(height_),
  102. .monochrome = false,
  103. .rotation = {
  104. .swap_xy = swap_xy,
  105. .mirror_x = mirror_x,
  106. .mirror_y = mirror_y,
  107. },
  108. .color_format = LV_COLOR_FORMAT_RGB565,
  109. .flags = {
  110. .buff_dma = 1,
  111. .buff_spiram = 0,
  112. .sw_rotate = 0,
  113. .swap_bytes = 1,
  114. .full_refresh = 0,
  115. .direct_mode = 0,
  116. },
  117. };
  118. display_ = lvgl_port_add_disp(&display_cfg);
  119. if (display_ == nullptr) {
  120. ESP_LOGE(TAG, "Failed to add display");
  121. return;
  122. }
  123. if (offset_x != 0 || offset_y != 0) {
  124. lv_display_set_offset(display_, offset_x, offset_y);
  125. }
  126. // Update the theme
  127. if (current_theme_name_ == "dark") {
  128. current_theme = DARK_THEME;
  129. } else if (current_theme_name_ == "light") {
  130. current_theme = LIGHT_THEME;
  131. }
  132. SetupUI();
  133. }
  134. // RGB LCD实现
  135. RgbLcdDisplay::RgbLcdDisplay(esp_lcd_panel_io_handle_t panel_io, esp_lcd_panel_handle_t panel,
  136. int width, int height, int offset_x, int offset_y,
  137. bool mirror_x, bool mirror_y, bool swap_xy,
  138. DisplayFonts fonts)
  139. : LcdDisplay(panel_io, panel, fonts) {
  140. width_ = width;
  141. height_ = height;
  142. // draw white
  143. std::vector<uint16_t> buffer(width_, 0xFFFF);
  144. for (int y = 0; y < height_; y++) {
  145. esp_lcd_panel_draw_bitmap(panel_, 0, y, width_, y + 1, buffer.data());
  146. }
  147. ESP_LOGI(TAG, "Initialize LVGL library");
  148. lv_init();
  149. ESP_LOGI(TAG, "Initialize LVGL port");
  150. lvgl_port_cfg_t port_cfg = ESP_LVGL_PORT_INIT_CONFIG();
  151. port_cfg.task_priority = 1;
  152. lvgl_port_init(&port_cfg);
  153. ESP_LOGI(TAG, "Adding LCD screen");
  154. const lvgl_port_display_cfg_t display_cfg = {
  155. .io_handle = panel_io_,
  156. .panel_handle = panel_,
  157. .buffer_size = static_cast<uint32_t>(width_ * 10),
  158. .double_buffer = true,
  159. .hres = static_cast<uint32_t>(width_),
  160. .vres = static_cast<uint32_t>(height_),
  161. .rotation = {
  162. .swap_xy = swap_xy,
  163. .mirror_x = mirror_x,
  164. .mirror_y = mirror_y,
  165. },
  166. .flags = {
  167. .buff_dma = 1,
  168. .swap_bytes = 0,
  169. .full_refresh = 1,
  170. .direct_mode = 1,
  171. },
  172. };
  173. const lvgl_port_display_rgb_cfg_t rgb_cfg = {
  174. .flags = {
  175. .bb_mode = true,
  176. .avoid_tearing = true,
  177. }
  178. };
  179. display_ = lvgl_port_add_disp_rgb(&display_cfg, &rgb_cfg);
  180. if (display_ == nullptr) {
  181. ESP_LOGE(TAG, "Failed to add RGB display");
  182. return;
  183. }
  184. if (offset_x != 0 || offset_y != 0) {
  185. lv_display_set_offset(display_, offset_x, offset_y);
  186. }
  187. // Update the theme
  188. if (current_theme_name_ == "dark") {
  189. current_theme = DARK_THEME;
  190. } else if (current_theme_name_ == "light") {
  191. current_theme = LIGHT_THEME;
  192. }
  193. SetupUI();
  194. }
  195. MipiLcdDisplay::MipiLcdDisplay(esp_lcd_panel_io_handle_t panel_io, esp_lcd_panel_handle_t panel,i2c_master_bus_handle_t i2c_handle,
  196. int width, int height, int offset_x, int offset_y,
  197. bool mirror_x, bool mirror_y, bool swap_xy,
  198. DisplayFonts fonts): LcdDisplay(panel_io, panel, fonts) {
  199. width_ = width;
  200. height_ = height;
  201. ESP_LOGI(TAG, "Initialize LVGL library");
  202. // printf("Initialize LVGL library for P4");
  203. //P4的LCD用的是这里,但是ESP_LOGI在这里不打印,不知道为啥。使用printf可以打印出来。
  204. lv_init();
  205. ESP_LOGI(TAG, "Initialize LVGL port");
  206. lvgl_port_cfg_t port_cfg = ESP_LVGL_PORT_INIT_CONFIG();
  207. lvgl_port_init(&port_cfg);
  208. const lvgl_port_display_cfg_t disp_cfg = {
  209. .io_handle = panel_io_,
  210. .panel_handle = panel_,
  211. .control_handle = NULL,
  212. .buffer_size = static_cast<uint32_t>(width * 50),
  213. .double_buffer = false,
  214. .hres = static_cast<uint32_t>(width_),
  215. .vres = static_cast<uint32_t>(height_),
  216. .monochrome = false,
  217. .rotation = {
  218. .swap_xy = false,
  219. .mirror_x = true,
  220. .mirror_y = true,
  221. },
  222. .color_format = LV_COLOR_FORMAT_RGB565,
  223. .flags = {
  224. .buff_dma = true,
  225. .buff_spiram = true,
  226. .sw_rotate = true,
  227. .swap_bytes = 0,
  228. .full_refresh = false,
  229. .direct_mode = false,
  230. }
  231. };
  232. lvgl_port_display_dsi_cfg_t dpi_cfg = {
  233. .flags = {
  234. .avoid_tearing = false,
  235. }
  236. };
  237. display_ = lvgl_port_add_disp_dsi(&disp_cfg, &dpi_cfg);
  238. if (display_ == nullptr) {
  239. ESP_LOGE(TAG, "Failed to add display");
  240. return;
  241. }
  242. if (offset_x != 0 || offset_y != 0) {
  243. lv_display_set_offset(display_, offset_x, offset_y);
  244. }
  245. if (current_theme_name_ == "dark") {
  246. current_theme = DARK_THEME;
  247. } else if (current_theme_name_ == "light") {
  248. current_theme = LIGHT_THEME;
  249. }
  250. esp_lcd_touch_handle_t tp;
  251. esp_lcd_touch_config_t tp_cfg = {
  252. .x_max = 800,
  253. .y_max = 1280,
  254. .rst_gpio_num = GPIO_NUM_NC,
  255. .int_gpio_num = GPIO_NUM_NC,
  256. .levels = {.reset = 0, .interrupt = 0},
  257. .flags = {.swap_xy = 0, .mirror_x = 0, .mirror_y = 0},
  258. };
  259. esp_lcd_panel_io_handle_t tp_io_handle = NULL;
  260. esp_lcd_panel_io_i2c_config_t tp_io_config = ESP_LCD_TOUCH_IO_I2C_GT911_CONFIG();
  261. tp_io_config.scl_speed_hz = 100000;
  262. ESP_ERROR_CHECK(esp_lcd_new_panel_io_i2c(i2c_handle, &tp_io_config, &tp_io_handle));
  263. ESP_ERROR_CHECK(esp_lcd_touch_new_i2c_gt911(tp_io_handle, &tp_cfg, &tp));
  264. const lvgl_port_touch_cfg_t touch_cfg = {
  265. .disp = lv_display_get_default(),
  266. .handle = tp,
  267. };
  268. lvgl_port_add_touch(&touch_cfg);
  269. lv_disp_t* disp = lv_display_get_default();
  270. if (disp) {
  271. // 先设置旋转(顺时针90度)
  272. lv_disp_set_rotation(disp, LV_DISP_ROTATION_90);
  273. }
  274. SetupUI();
  275. }
  276. LcdDisplay::~LcdDisplay() {
  277. // 然后再清理 LVGL 对象
  278. if (content_ != nullptr) {
  279. lv_obj_del(content_);
  280. }
  281. if (status_bar_ != nullptr) {
  282. lv_obj_del(status_bar_);
  283. }
  284. if (side_bar_ != nullptr) {
  285. lv_obj_del(side_bar_);
  286. }
  287. if (container_ != nullptr) {
  288. lv_obj_del(container_);
  289. }
  290. if (display_ != nullptr) {
  291. lv_display_delete(display_);
  292. }
  293. if (panel_ != nullptr) {
  294. esp_lcd_panel_del(panel_);
  295. }
  296. if (panel_io_ != nullptr) {
  297. esp_lcd_panel_io_del(panel_io_);
  298. }
  299. }
  300. bool LcdDisplay::Lock(int timeout_ms) {
  301. return lvgl_port_lock(timeout_ms);
  302. }
  303. void LcdDisplay::Unlock() {
  304. lvgl_port_unlock();
  305. }
  306. #if CONFIG_USE_WECHAT_MESSAGE_STYLE
  307. void LcdDisplay::SetupUI() {
  308. DisplayLockGuard lock(this);
  309. //printf("SetupUI1\n");
  310. //P4微信界面应该是这里
  311. auto screen = lv_screen_active();
  312. lv_obj_set_style_text_font(screen, fonts_.text_font, 0);
  313. lv_obj_set_style_text_color(screen, current_theme.text, 0);
  314. lv_obj_set_style_bg_color(screen, current_theme.background, 0);
  315. /* Container */
  316. container_ = lv_obj_create(screen);
  317. lv_obj_set_size(container_, LV_HOR_RES, LV_VER_RES);
  318. lv_obj_set_flex_flow(container_, LV_FLEX_FLOW_COLUMN);
  319. lv_obj_set_style_pad_all(container_, 0, 0);
  320. lv_obj_set_style_border_width(container_, 0, 0);
  321. lv_obj_set_style_pad_row(container_, 0, 0);
  322. lv_obj_set_style_bg_color(container_, current_theme.background, 0);
  323. lv_obj_set_style_border_color(container_, current_theme.border, 0);
  324. /* Status bar */
  325. status_bar_ = lv_obj_create(container_);
  326. lv_obj_set_size(status_bar_, LV_HOR_RES, fonts_.emoji_font->line_height);
  327. lv_obj_set_style_radius(status_bar_, 0, 0);
  328. lv_obj_set_style_bg_color(status_bar_, current_theme.background, 0);
  329. lv_obj_set_style_text_color(status_bar_, current_theme.text, 0);
  330. /* Content - Chat area */
  331. content_ = lv_obj_create(container_);
  332. lv_obj_set_style_radius(content_, 0, 0);
  333. lv_obj_set_width(content_, LV_HOR_RES);
  334. lv_obj_set_flex_grow(content_, 1);
  335. lv_obj_set_style_pad_all(content_, 5, 0);
  336. lv_obj_set_style_bg_color(content_, current_theme.chat_background, 0); // Background for chat area
  337. lv_obj_set_style_border_color(content_, current_theme.border, 0); // Border color for chat area
  338. // Enable scrolling for chat content
  339. lv_obj_set_scrollbar_mode(content_, LV_SCROLLBAR_MODE_OFF);
  340. lv_obj_set_scroll_dir(content_, LV_DIR_VER);
  341. // Create a flex container for chat messages
  342. lv_obj_set_flex_flow(content_, LV_FLEX_FLOW_COLUMN);
  343. lv_obj_set_flex_align(content_, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
  344. lv_obj_set_style_pad_row(content_, 10, 0); // Space between messages
  345. // We'll create chat messages dynamically in SetChatMessage
  346. chat_message_label_ = nullptr;
  347. /* Status bar */
  348. lv_obj_set_flex_flow(status_bar_, LV_FLEX_FLOW_ROW);
  349. lv_obj_set_style_pad_all(status_bar_, 0, 0);
  350. lv_obj_set_style_border_width(status_bar_, 0, 0);
  351. lv_obj_set_style_pad_column(status_bar_, 0, 0);
  352. lv_obj_set_style_pad_left(status_bar_, 2, 0);
  353. lv_obj_set_style_pad_right(status_bar_, 2, 0);
  354. lv_obj_set_scrollbar_mode(status_bar_, LV_SCROLLBAR_MODE_OFF);
  355. // 设置状态栏的内容垂直居中
  356. lv_obj_set_flex_align(status_bar_, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
  357. // 创建emotion_label_在状态栏最左侧
  358. emotion_label_ = lv_label_create(status_bar_);
  359. lv_obj_set_style_text_font(emotion_label_, &font_awesome_30_4, 0);
  360. lv_obj_set_style_text_color(emotion_label_, current_theme.text, 0);
  361. lv_label_set_text(emotion_label_, FONT_AWESOME_AI_CHIP);
  362. lv_obj_set_style_margin_right(emotion_label_, 5, 0); // 添加右边距,与后面的元素分隔
  363. notification_label_ = lv_label_create(status_bar_);
  364. lv_obj_set_flex_grow(notification_label_, 1);
  365. lv_obj_set_style_text_align(notification_label_, LV_TEXT_ALIGN_CENTER, 0);
  366. lv_obj_set_style_text_color(notification_label_, current_theme.text, 0);
  367. lv_label_set_text(notification_label_, "");
  368. lv_obj_add_flag(notification_label_, LV_OBJ_FLAG_HIDDEN);
  369. status_label_ = lv_label_create(status_bar_);
  370. lv_obj_set_flex_grow(status_label_, 1);
  371. lv_label_set_long_mode(status_label_, LV_LABEL_LONG_SCROLL_CIRCULAR);
  372. lv_obj_set_style_text_align(status_label_, LV_TEXT_ALIGN_CENTER, 0);
  373. lv_obj_set_style_text_color(status_label_, current_theme.text, 0);
  374. lv_label_set_text(status_label_, Lang::Strings::INITIALIZING);
  375. mute_label_ = lv_label_create(status_bar_);
  376. lv_label_set_text(mute_label_, "");
  377. lv_obj_set_style_text_font(mute_label_, fonts_.icon_font, 0);
  378. lv_obj_set_style_text_color(mute_label_, current_theme.text, 0);
  379. network_label_ = lv_label_create(status_bar_);
  380. lv_label_set_text(network_label_, "");
  381. lv_obj_set_style_text_font(network_label_, fonts_.icon_font, 0);
  382. lv_obj_set_style_text_color(network_label_, current_theme.text, 0);
  383. lv_obj_set_style_margin_left(network_label_, 5, 0); // 添加左边距,与前面的元素分隔
  384. battery_label_ = lv_label_create(status_bar_);
  385. lv_label_set_text(battery_label_, "");
  386. lv_obj_set_style_text_font(battery_label_, fonts_.icon_font, 0);
  387. lv_obj_set_style_text_color(battery_label_, current_theme.text, 0);
  388. lv_obj_set_style_margin_left(battery_label_, 5, 0); // 添加左边距,与前面的元素分隔
  389. low_battery_popup_ = lv_obj_create(screen);
  390. lv_obj_set_scrollbar_mode(low_battery_popup_, LV_SCROLLBAR_MODE_OFF);
  391. lv_obj_set_size(low_battery_popup_, LV_HOR_RES * 0.9, fonts_.text_font->line_height * 2);
  392. lv_obj_align(low_battery_popup_, LV_ALIGN_BOTTOM_MID, 0, 0);
  393. lv_obj_set_style_bg_color(low_battery_popup_, current_theme.low_battery, 0);
  394. lv_obj_set_style_radius(low_battery_popup_, 10, 0);
  395. lv_obj_t* low_battery_label = lv_label_create(low_battery_popup_);
  396. lv_label_set_text(low_battery_label, Lang::Strings::BATTERY_NEED_CHARGE);
  397. lv_obj_set_style_text_color(low_battery_label, lv_color_white(), 0);
  398. lv_obj_center(low_battery_label);
  399. lv_obj_add_flag(low_battery_popup_, LV_OBJ_FLAG_HIDDEN);
  400. }
  401. #define MAX_MESSAGES 300
  402. void LcdDisplay::SetChatMessage(const char* role, const char* content) {
  403. DisplayLockGuard lock(this);
  404. if (content_ == nullptr) {
  405. return;
  406. }
  407. //避免出现空的消息框
  408. if(strlen(content) == 0) return;
  409. // Create a message bubble
  410. lv_obj_t* msg_bubble = lv_obj_create(content_);
  411. lv_obj_set_style_radius(msg_bubble, 8, 0);
  412. lv_obj_set_scrollbar_mode(msg_bubble, LV_SCROLLBAR_MODE_OFF);
  413. lv_obj_set_style_border_width(msg_bubble, 1, 0);
  414. lv_obj_set_style_border_color(msg_bubble, current_theme.border, 0);
  415. lv_obj_set_style_pad_all(msg_bubble, 8, 0);
  416. // Create the message text
  417. lv_obj_t* msg_text = lv_label_create(msg_bubble);
  418. lv_label_set_text(msg_text, content);
  419. // 计算文本实际宽度
  420. lv_coord_t text_width = lv_txt_get_width(content, strlen(content), fonts_.text_font, 0);
  421. // 计算气泡宽度
  422. lv_coord_t max_width = LV_HOR_RES * 85 / 100 - 16; // 屏幕宽度的85%
  423. lv_coord_t min_width = 20;
  424. lv_coord_t bubble_width;
  425. // 确保文本宽度不小于最小宽度
  426. if (text_width < min_width) {
  427. text_width = min_width;
  428. }
  429. // 如果文本宽度小于最大宽度,使用文本宽度
  430. if (text_width < max_width) {
  431. bubble_width = text_width;
  432. } else {
  433. bubble_width = max_width;
  434. }
  435. // 设置消息文本的宽度
  436. lv_obj_set_width(msg_text, bubble_width); // 减去padding
  437. lv_label_set_long_mode(msg_text, LV_LABEL_LONG_WRAP);
  438. lv_obj_set_style_text_font(msg_text, fonts_.text_font, 0);
  439. // 设置气泡宽度
  440. lv_obj_set_width(msg_bubble, bubble_width);
  441. lv_obj_set_height(msg_bubble, LV_SIZE_CONTENT);
  442. // Set alignment and style based on message role
  443. if (strcmp(role, "user") == 0) {
  444. // User messages are right-aligned with green background
  445. lv_obj_set_style_bg_color(msg_bubble, current_theme.user_bubble, 0);
  446. // Set text color for contrast
  447. lv_obj_set_style_text_color(msg_text, current_theme.text, 0);
  448. // 设置自定义属性标记气泡类型
  449. lv_obj_set_user_data(msg_bubble, (void*)"user");
  450. // Set appropriate width for content
  451. lv_obj_set_width(msg_bubble, LV_SIZE_CONTENT);
  452. lv_obj_set_height(msg_bubble, LV_SIZE_CONTENT);
  453. // Add some margin
  454. lv_obj_set_style_margin_right(msg_bubble, 10, 0);
  455. // Don't grow
  456. lv_obj_set_style_flex_grow(msg_bubble, 0, 0);
  457. } else if (strcmp(role, "assistant") == 0) {
  458. // Assistant messages are left-aligned with white background
  459. lv_obj_set_style_bg_color(msg_bubble, current_theme.assistant_bubble, 0);
  460. // Set text color for contrast
  461. lv_obj_set_style_text_color(msg_text, current_theme.text, 0);
  462. // 设置自定义属性标记气泡类型
  463. lv_obj_set_user_data(msg_bubble, (void*)"assistant");
  464. // Set appropriate width for content
  465. lv_obj_set_width(msg_bubble, LV_SIZE_CONTENT);
  466. lv_obj_set_height(msg_bubble, LV_SIZE_CONTENT);
  467. // Add some margin
  468. lv_obj_set_style_margin_left(msg_bubble, -4, 0);
  469. // Don't grow
  470. lv_obj_set_style_flex_grow(msg_bubble, 0, 0);
  471. } else if (strcmp(role, "system") == 0) {
  472. // System messages are center-aligned with light gray background
  473. lv_obj_set_style_bg_color(msg_bubble, current_theme.system_bubble, 0);
  474. // Set text color for contrast
  475. lv_obj_set_style_text_color(msg_text, current_theme.system_text, 0);
  476. // 设置自定义属性标记气泡类型
  477. lv_obj_set_user_data(msg_bubble, (void*)"system");
  478. // Set appropriate width for content
  479. lv_obj_set_width(msg_bubble, LV_SIZE_CONTENT);
  480. lv_obj_set_height(msg_bubble, LV_SIZE_CONTENT);
  481. // Don't grow
  482. lv_obj_set_style_flex_grow(msg_bubble, 0, 0);
  483. }
  484. // Create a full-width container for user messages to ensure right alignment
  485. if (strcmp(role, "user") == 0) {
  486. // Create a full-width container
  487. lv_obj_t* container = lv_obj_create(content_);
  488. lv_obj_set_width(container, LV_HOR_RES);
  489. lv_obj_set_height(container, LV_SIZE_CONTENT);
  490. // Make container transparent and borderless
  491. lv_obj_set_style_bg_opa(container, LV_OPA_TRANSP, 0);
  492. lv_obj_set_style_border_width(container, 0, 0);
  493. lv_obj_set_style_pad_all(container, 0, 0);
  494. // Move the message bubble into this container
  495. lv_obj_set_parent(msg_bubble, container);
  496. // Right align the bubble in the container
  497. lv_obj_align(msg_bubble, LV_ALIGN_RIGHT_MID, -10, 0);
  498. // Auto-scroll to this container
  499. lv_obj_scroll_to_view_recursive(container, LV_ANIM_ON);
  500. } else if (strcmp(role, "system") == 0) {
  501. // 为系统消息创建全宽容器以确保居中对齐
  502. lv_obj_t* container = lv_obj_create(content_);
  503. lv_obj_set_width(container, LV_HOR_RES);
  504. lv_obj_set_height(container, LV_SIZE_CONTENT);
  505. // 使容器透明且无边框
  506. lv_obj_set_style_bg_opa(container, LV_OPA_TRANSP, 0);
  507. lv_obj_set_style_border_width(container, 0, 0);
  508. lv_obj_set_style_pad_all(container, 0, 0);
  509. // 将消息气泡移入此容器
  510. lv_obj_set_parent(msg_bubble, container);
  511. // 将气泡居中对齐在容器中
  512. lv_obj_align(msg_bubble, LV_ALIGN_CENTER, 0, 0);
  513. // 自动滚动底部
  514. lv_obj_scroll_to_view_recursive(container, LV_ANIM_ON);
  515. } else {
  516. // For assistant messages
  517. // Left align assistant messages
  518. lv_obj_align(msg_bubble, LV_ALIGN_LEFT_MID, 0, 0);
  519. // Auto-scroll to the message bubble
  520. lv_obj_scroll_to_view_recursive(msg_bubble, LV_ANIM_ON);
  521. }
  522. // Store reference to the latest message label
  523. chat_message_label_ = msg_text;
  524. // 检查消息数量是否超过限制
  525. uint32_t msg_count = lv_obj_get_child_cnt(content_);
  526. while (msg_count >= MAX_MESSAGES) {
  527. // 删除最早的消息(第一个子节点)
  528. lv_obj_t* oldest_msg = lv_obj_get_child(content_, 0);
  529. if (oldest_msg != nullptr) {
  530. lv_obj_del(oldest_msg);
  531. msg_count--;
  532. // 删除最早的消息会导致所有气泡整体往上移
  533. // 所以需要重新滚动到当前消息气泡位置
  534. lv_obj_scroll_to_view_recursive(msg_bubble, LV_ANIM_ON);
  535. }else{
  536. break;
  537. }
  538. }
  539. }
  540. #else
  541. void LcdDisplay::SetupUI() {
  542. DisplayLockGuard lock(this);
  543. printf("SetupUI2\n");
  544. auto screen = lv_screen_active();
  545. lv_obj_set_style_text_font(screen, fonts_.text_font, 0);
  546. lv_obj_set_style_text_color(screen, current_theme.text, 0);
  547. lv_obj_set_style_bg_color(screen, current_theme.background, 0);
  548. /* Container */
  549. container_ = lv_obj_create(screen);
  550. lv_obj_set_size(container_, LV_HOR_RES, LV_VER_RES);
  551. lv_obj_set_flex_flow(container_, LV_FLEX_FLOW_COLUMN);
  552. lv_obj_set_style_pad_all(container_, 0, 0);
  553. lv_obj_set_style_border_width(container_, 0, 0);
  554. lv_obj_set_style_pad_row(container_, 0, 0);
  555. lv_obj_set_style_bg_color(container_, current_theme.background, 0);
  556. lv_obj_set_style_border_color(container_, current_theme.border, 0);
  557. /* Status bar */
  558. status_bar_ = lv_obj_create(container_);
  559. lv_obj_set_size(status_bar_, LV_HOR_RES, fonts_.text_font->line_height);
  560. lv_obj_set_style_radius(status_bar_, 0, 0);
  561. lv_obj_set_style_bg_color(status_bar_, current_theme.background, 0);
  562. lv_obj_set_style_text_color(status_bar_, current_theme.text, 0);
  563. /* Content */
  564. content_ = lv_obj_create(container_);
  565. lv_obj_set_scrollbar_mode(content_, LV_SCROLLBAR_MODE_OFF);
  566. lv_obj_set_style_radius(content_, 0, 0);
  567. lv_obj_set_width(content_, LV_HOR_RES);
  568. lv_obj_set_flex_grow(content_, 1);
  569. lv_obj_set_style_pad_all(content_, 5, 0);
  570. lv_obj_set_style_bg_color(content_, current_theme.chat_background, 0);
  571. lv_obj_set_style_border_color(content_, current_theme.border, 0); // Border color for content
  572. lv_obj_set_flex_flow(content_, LV_FLEX_FLOW_COLUMN); // 垂直布局(从上到下)
  573. lv_obj_set_flex_align(content_, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_SPACE_EVENLY); // 子对象居中对齐,等距分布
  574. emotion_label_ = lv_label_create(content_);
  575. lv_obj_set_style_text_font(emotion_label_, &font_awesome_30_4, 0);
  576. lv_obj_set_style_text_color(emotion_label_, current_theme.text, 0);
  577. lv_label_set_text(emotion_label_, FONT_AWESOME_AI_CHIP);
  578. chat_message_label_ = lv_label_create(content_);
  579. lv_label_set_text(chat_message_label_, "");
  580. lv_obj_set_width(chat_message_label_, LV_HOR_RES * 0.9); // 限制宽度为屏幕宽度的 90%
  581. lv_label_set_long_mode(chat_message_label_, LV_LABEL_LONG_WRAP); // 设置为自动换行模式
  582. lv_obj_set_style_text_align(chat_message_label_, LV_TEXT_ALIGN_CENTER, 0); // 设置文本居中对齐
  583. lv_obj_set_style_text_color(chat_message_label_, current_theme.text, 0);
  584. /* Status bar */
  585. lv_obj_set_flex_flow(status_bar_, LV_FLEX_FLOW_ROW);
  586. lv_obj_set_style_pad_all(status_bar_, 0, 0);
  587. lv_obj_set_style_border_width(status_bar_, 0, 0);
  588. lv_obj_set_style_pad_column(status_bar_, 0, 0);
  589. lv_obj_set_style_pad_left(status_bar_, 2, 0);
  590. lv_obj_set_style_pad_right(status_bar_, 2, 0);
  591. network_label_ = lv_label_create(status_bar_);
  592. lv_label_set_text(network_label_, "");
  593. lv_obj_set_style_text_font(network_label_, fonts_.icon_font, 0);
  594. lv_obj_set_style_text_color(network_label_, current_theme.text, 0);
  595. notification_label_ = lv_label_create(status_bar_);
  596. lv_obj_set_flex_grow(notification_label_, 1);
  597. lv_obj_set_style_text_align(notification_label_, LV_TEXT_ALIGN_CENTER, 0);
  598. lv_obj_set_style_text_color(notification_label_, current_theme.text, 0);
  599. lv_label_set_text(notification_label_, "");
  600. lv_obj_add_flag(notification_label_, LV_OBJ_FLAG_HIDDEN);
  601. status_label_ = lv_label_create(status_bar_);
  602. lv_obj_set_flex_grow(status_label_, 1);
  603. lv_label_set_long_mode(status_label_, LV_LABEL_LONG_SCROLL_CIRCULAR);
  604. lv_obj_set_style_text_align(status_label_, LV_TEXT_ALIGN_CENTER, 0);
  605. lv_obj_set_style_text_color(status_label_, current_theme.text, 0);
  606. lv_label_set_text(status_label_, Lang::Strings::INITIALIZING);
  607. mute_label_ = lv_label_create(status_bar_);
  608. lv_label_set_text(mute_label_, "");
  609. lv_obj_set_style_text_font(mute_label_, fonts_.icon_font, 0);
  610. lv_obj_set_style_text_color(mute_label_, current_theme.text, 0);
  611. battery_label_ = lv_label_create(status_bar_);
  612. lv_label_set_text(battery_label_, "");
  613. lv_obj_set_style_text_font(battery_label_, fonts_.icon_font, 0);
  614. lv_obj_set_style_text_color(battery_label_, current_theme.text, 0);
  615. low_battery_popup_ = lv_obj_create(screen);
  616. lv_obj_set_scrollbar_mode(low_battery_popup_, LV_SCROLLBAR_MODE_OFF);
  617. lv_obj_set_size(low_battery_popup_, LV_HOR_RES * 0.9, fonts_.text_font->line_height * 2);
  618. lv_obj_align(low_battery_popup_, LV_ALIGN_BOTTOM_MID, 0, 0);
  619. lv_obj_set_style_bg_color(low_battery_popup_, current_theme.low_battery, 0);
  620. lv_obj_set_style_radius(low_battery_popup_, 10, 0);
  621. lv_obj_t* low_battery_label = lv_label_create(low_battery_popup_);
  622. lv_label_set_text(low_battery_label, Lang::Strings::BATTERY_NEED_CHARGE);
  623. lv_obj_set_style_text_color(low_battery_label, lv_color_white(), 0);
  624. lv_obj_center(low_battery_label);
  625. lv_obj_add_flag(low_battery_popup_, LV_OBJ_FLAG_HIDDEN);
  626. }
  627. #endif
  628. void LcdDisplay::SetEmotion(const char* emotion) {
  629. struct Emotion {
  630. const char* icon;
  631. const char* text;
  632. };
  633. static const std::vector<Emotion> emotions = {
  634. {"😶", "neutral"},
  635. {"🙂", "happy"},
  636. {"😆", "laughing"},
  637. {"😂", "funny"},
  638. {"😔", "sad"},
  639. {"😠", "angry"},
  640. {"😭", "crying"},
  641. {"😍", "loving"},
  642. {"😳", "embarrassed"},
  643. {"😯", "surprised"},
  644. {"😱", "shocked"},
  645. {"🤔", "thinking"},
  646. {"😉", "winking"},
  647. {"😎", "cool"},
  648. {"😌", "relaxed"},
  649. {"🤤", "delicious"},
  650. {"😘", "kissy"},
  651. {"😏", "confident"},
  652. {"😴", "sleepy"},
  653. {"😜", "silly"},
  654. {"🙄", "confused"}
  655. };
  656. // 查找匹配的表情
  657. std::string_view emotion_view(emotion);
  658. auto it = std::find_if(emotions.begin(), emotions.end(),
  659. [&emotion_view](const Emotion& e) { return e.text == emotion_view; });
  660. DisplayLockGuard lock(this);
  661. if (emotion_label_ == nullptr) {
  662. return;
  663. }
  664. // 如果找到匹配的表情就显示对应图标,否则显示默认的neutral表情
  665. lv_obj_set_style_text_font(emotion_label_, fonts_.emoji_font, 0);
  666. if (it != emotions.end()) {
  667. lv_label_set_text(emotion_label_, it->icon);
  668. } else {
  669. lv_label_set_text(emotion_label_, "😶");
  670. }
  671. }
  672. void LcdDisplay::SetIcon(const char* icon) {
  673. DisplayLockGuard lock(this);
  674. if (emotion_label_ == nullptr) {
  675. return;
  676. }
  677. lv_obj_set_style_text_font(emotion_label_, &font_awesome_30_4, 0);
  678. lv_label_set_text(emotion_label_, icon);
  679. }
  680. void LcdDisplay::SetTheme(const std::string& theme_name) {
  681. DisplayLockGuard lock(this);
  682. if (theme_name == "dark" || theme_name == "DARK") {
  683. current_theme = DARK_THEME;
  684. } else if (theme_name == "light" || theme_name == "LIGHT") {
  685. current_theme = LIGHT_THEME;
  686. } else {
  687. // Invalid theme name, return false
  688. ESP_LOGE(TAG, "Invalid theme name: %s", theme_name.c_str());
  689. return;
  690. }
  691. // Get the active screen
  692. lv_obj_t* screen = lv_screen_active();
  693. // Update the screen colors
  694. lv_obj_set_style_bg_color(screen, current_theme.background, 0);
  695. lv_obj_set_style_text_color(screen, current_theme.text, 0);
  696. // Update container colors
  697. if (container_ != nullptr) {
  698. lv_obj_set_style_bg_color(container_, current_theme.background, 0);
  699. lv_obj_set_style_border_color(container_, current_theme.border, 0);
  700. }
  701. // Update status bar colors
  702. if (status_bar_ != nullptr) {
  703. lv_obj_set_style_bg_color(status_bar_, current_theme.background, 0);
  704. lv_obj_set_style_text_color(status_bar_, current_theme.text, 0);
  705. // Update status bar elements
  706. if (network_label_ != nullptr) {
  707. lv_obj_set_style_text_color(network_label_, current_theme.text, 0);
  708. }
  709. if (status_label_ != nullptr) {
  710. lv_obj_set_style_text_color(status_label_, current_theme.text, 0);
  711. }
  712. if (notification_label_ != nullptr) {
  713. lv_obj_set_style_text_color(notification_label_, current_theme.text, 0);
  714. }
  715. if (mute_label_ != nullptr) {
  716. lv_obj_set_style_text_color(mute_label_, current_theme.text, 0);
  717. }
  718. if (battery_label_ != nullptr) {
  719. lv_obj_set_style_text_color(battery_label_, current_theme.text, 0);
  720. }
  721. if (emotion_label_ != nullptr) {
  722. lv_obj_set_style_text_color(emotion_label_, current_theme.text, 0);
  723. }
  724. }
  725. // Update content area colors
  726. if (content_ != nullptr) {
  727. lv_obj_set_style_bg_color(content_, current_theme.chat_background, 0);
  728. lv_obj_set_style_border_color(content_, current_theme.border, 0);
  729. // If we have the chat message style, update all message bubbles
  730. #if CONFIG_USE_WECHAT_MESSAGE_STYLE
  731. // Iterate through all children of content (message containers or bubbles)
  732. uint32_t child_count = lv_obj_get_child_cnt(content_);
  733. for (uint32_t i = 0; i < child_count; i++) {
  734. lv_obj_t* obj = lv_obj_get_child(content_, i);
  735. if (obj == nullptr) continue;
  736. lv_obj_t* bubble = nullptr;
  737. // 检查这个对象是容器还是气泡
  738. // 如果是容器(用户或系统消息),则获取其子对象作为气泡
  739. // 如果是气泡(助手消息),则直接使用
  740. if (lv_obj_get_child_cnt(obj) > 0) {
  741. // 可能是容器,检查它是否为用户或系统消息容器
  742. // 用户和系统消息容器是透明的
  743. lv_opa_t bg_opa = lv_obj_get_style_bg_opa(obj, 0);
  744. if (bg_opa == LV_OPA_TRANSP) {
  745. // 这是用户或系统消息的容器
  746. bubble = lv_obj_get_child(obj, 0);
  747. } else {
  748. // 这可能是助手消息的气泡自身
  749. bubble = obj;
  750. }
  751. } else {
  752. // 没有子元素,可能是其他UI元素,跳过
  753. continue;
  754. }
  755. if (bubble == nullptr) continue;
  756. // 使用保存的用户数据来识别气泡类型
  757. void* bubble_type_ptr = lv_obj_get_user_data(bubble);
  758. if (bubble_type_ptr != nullptr) {
  759. const char* bubble_type = static_cast<const char*>(bubble_type_ptr);
  760. // 根据气泡类型应用正确的颜色
  761. if (strcmp(bubble_type, "user") == 0) {
  762. lv_obj_set_style_bg_color(bubble, current_theme.user_bubble, 0);
  763. } else if (strcmp(bubble_type, "assistant") == 0) {
  764. lv_obj_set_style_bg_color(bubble, current_theme.assistant_bubble, 0);
  765. } else if (strcmp(bubble_type, "system") == 0) {
  766. lv_obj_set_style_bg_color(bubble, current_theme.system_bubble, 0);
  767. }
  768. // Update border color
  769. lv_obj_set_style_border_color(bubble, current_theme.border, 0);
  770. // Update text color for the message
  771. if (lv_obj_get_child_cnt(bubble) > 0) {
  772. lv_obj_t* text = lv_obj_get_child(bubble, 0);
  773. if (text != nullptr) {
  774. // 根据气泡类型设置文本颜色
  775. if (strcmp(bubble_type, "system") == 0) {
  776. lv_obj_set_style_text_color(text, current_theme.system_text, 0);
  777. } else {
  778. lv_obj_set_style_text_color(text, current_theme.text, 0);
  779. }
  780. }
  781. }
  782. } else {
  783. // 如果没有标记,回退到之前的逻辑(颜色比较)
  784. // ...保留原有的回退逻辑...
  785. lv_color_t bg_color = lv_obj_get_style_bg_color(bubble, 0);
  786. // 改进bubble类型检测逻辑,不仅使用颜色比较
  787. bool is_user_bubble = false;
  788. bool is_assistant_bubble = false;
  789. bool is_system_bubble = false;
  790. // 检查用户bubble
  791. if (lv_color_eq(bg_color, DARK_USER_BUBBLE_COLOR) ||
  792. lv_color_eq(bg_color, LIGHT_USER_BUBBLE_COLOR) ||
  793. lv_color_eq(bg_color, current_theme.user_bubble)) {
  794. is_user_bubble = true;
  795. }
  796. // 检查系统bubble
  797. else if (lv_color_eq(bg_color, DARK_SYSTEM_BUBBLE_COLOR) ||
  798. lv_color_eq(bg_color, LIGHT_SYSTEM_BUBBLE_COLOR) ||
  799. lv_color_eq(bg_color, current_theme.system_bubble)) {
  800. is_system_bubble = true;
  801. }
  802. // 剩余的都当作助手bubble处理
  803. else {
  804. is_assistant_bubble = true;
  805. }
  806. // 根据bubble类型应用正确的颜色
  807. if (is_user_bubble) {
  808. lv_obj_set_style_bg_color(bubble, current_theme.user_bubble, 0);
  809. } else if (is_assistant_bubble) {
  810. lv_obj_set_style_bg_color(bubble, current_theme.assistant_bubble, 0);
  811. } else if (is_system_bubble) {
  812. lv_obj_set_style_bg_color(bubble, current_theme.system_bubble, 0);
  813. }
  814. // Update border color
  815. lv_obj_set_style_border_color(bubble, current_theme.border, 0);
  816. // Update text color for the message
  817. if (lv_obj_get_child_cnt(bubble) > 0) {
  818. lv_obj_t* text = lv_obj_get_child(bubble, 0);
  819. if (text != nullptr) {
  820. // 回退到颜色检测逻辑
  821. if (lv_color_eq(bg_color, current_theme.system_bubble) ||
  822. lv_color_eq(bg_color, DARK_SYSTEM_BUBBLE_COLOR) ||
  823. lv_color_eq(bg_color, LIGHT_SYSTEM_BUBBLE_COLOR)) {
  824. lv_obj_set_style_text_color(text, current_theme.system_text, 0);
  825. } else {
  826. lv_obj_set_style_text_color(text, current_theme.text, 0);
  827. }
  828. }
  829. }
  830. }
  831. }
  832. #else
  833. // Simple UI mode - just update the main chat message
  834. if (chat_message_label_ != nullptr) {
  835. lv_obj_set_style_text_color(chat_message_label_, current_theme.text, 0);
  836. }
  837. if (emotion_label_ != nullptr) {
  838. lv_obj_set_style_text_color(emotion_label_, current_theme.text, 0);
  839. }
  840. #endif
  841. }
  842. // Update low battery popup
  843. if (low_battery_popup_ != nullptr) {
  844. lv_obj_set_style_bg_color(low_battery_popup_, current_theme.low_battery, 0);
  845. }
  846. // No errors occurred. Save theme to settings
  847. Display::SetTheme(theme_name);
  848. }