lcd_display.cc 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983
  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. auto screen = lv_screen_active();
  310. lv_obj_set_style_text_font(screen, fonts_.text_font, 0);
  311. lv_obj_set_style_text_color(screen, current_theme.text, 0);
  312. lv_obj_set_style_bg_color(screen, current_theme.background, 0);
  313. /* Container */
  314. container_ = lv_obj_create(screen);
  315. lv_obj_set_size(container_, LV_HOR_RES, LV_VER_RES);
  316. lv_obj_set_flex_flow(container_, LV_FLEX_FLOW_COLUMN);
  317. lv_obj_set_style_pad_all(container_, 0, 0);
  318. lv_obj_set_style_border_width(container_, 0, 0);
  319. lv_obj_set_style_pad_row(container_, 0, 0);
  320. lv_obj_set_style_bg_color(container_, current_theme.background, 0);
  321. lv_obj_set_style_border_color(container_, current_theme.border, 0);
  322. /* Status bar */
  323. status_bar_ = lv_obj_create(container_);
  324. lv_obj_set_size(status_bar_, LV_HOR_RES, fonts_.emoji_font->line_height);
  325. lv_obj_set_style_radius(status_bar_, 0, 0);
  326. lv_obj_set_style_bg_color(status_bar_, current_theme.background, 0);
  327. lv_obj_set_style_text_color(status_bar_, current_theme.text, 0);
  328. /* Content - Chat area */
  329. content_ = lv_obj_create(container_);
  330. lv_obj_set_style_radius(content_, 0, 0);
  331. lv_obj_set_width(content_, LV_HOR_RES);
  332. lv_obj_set_flex_grow(content_, 1);
  333. lv_obj_set_style_pad_all(content_, 5, 0);
  334. lv_obj_set_style_bg_color(content_, current_theme.chat_background, 0); // Background for chat area
  335. lv_obj_set_style_border_color(content_, current_theme.border, 0); // Border color for chat area
  336. // Enable scrolling for chat content
  337. lv_obj_set_scrollbar_mode(content_, LV_SCROLLBAR_MODE_OFF);
  338. lv_obj_set_scroll_dir(content_, LV_DIR_VER);
  339. // Create a flex container for chat messages
  340. lv_obj_set_flex_flow(content_, LV_FLEX_FLOW_COLUMN);
  341. lv_obj_set_flex_align(content_, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
  342. lv_obj_set_style_pad_row(content_, 10, 0); // Space between messages
  343. // We'll create chat messages dynamically in SetChatMessage
  344. chat_message_label_ = nullptr;
  345. /* Status bar */
  346. lv_obj_set_flex_flow(status_bar_, LV_FLEX_FLOW_ROW);
  347. lv_obj_set_style_pad_all(status_bar_, 0, 0);
  348. lv_obj_set_style_border_width(status_bar_, 0, 0);
  349. lv_obj_set_style_pad_column(status_bar_, 0, 0);
  350. lv_obj_set_style_pad_left(status_bar_, 2, 0);
  351. lv_obj_set_style_pad_right(status_bar_, 2, 0);
  352. lv_obj_set_scrollbar_mode(status_bar_, LV_SCROLLBAR_MODE_OFF);
  353. // 设置状态栏的内容垂直居中
  354. lv_obj_set_flex_align(status_bar_, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
  355. // 创建emotion_label_在状态栏最左侧
  356. emotion_label_ = lv_label_create(status_bar_);
  357. lv_obj_set_style_text_font(emotion_label_, &font_awesome_30_4, 0);
  358. lv_obj_set_style_text_color(emotion_label_, current_theme.text, 0);
  359. lv_label_set_text(emotion_label_, FONT_AWESOME_AI_CHIP);
  360. lv_obj_set_style_margin_right(emotion_label_, 5, 0); // 添加右边距,与后面的元素分隔
  361. notification_label_ = lv_label_create(status_bar_);
  362. lv_obj_set_flex_grow(notification_label_, 1);
  363. lv_obj_set_style_text_align(notification_label_, LV_TEXT_ALIGN_CENTER, 0);
  364. lv_obj_set_style_text_color(notification_label_, current_theme.text, 0);
  365. lv_label_set_text(notification_label_, "");
  366. lv_obj_add_flag(notification_label_, LV_OBJ_FLAG_HIDDEN);
  367. status_label_ = lv_label_create(status_bar_);
  368. lv_obj_set_flex_grow(status_label_, 1);
  369. lv_label_set_long_mode(status_label_, LV_LABEL_LONG_SCROLL_CIRCULAR);
  370. lv_obj_set_style_text_align(status_label_, LV_TEXT_ALIGN_CENTER, 0);
  371. lv_obj_set_style_text_color(status_label_, current_theme.text, 0);
  372. lv_label_set_text(status_label_, Lang::Strings::INITIALIZING);
  373. mute_label_ = lv_label_create(status_bar_);
  374. lv_label_set_text(mute_label_, "");
  375. lv_obj_set_style_text_font(mute_label_, fonts_.icon_font, 0);
  376. lv_obj_set_style_text_color(mute_label_, current_theme.text, 0);
  377. network_label_ = lv_label_create(status_bar_);
  378. lv_label_set_text(network_label_, "");
  379. lv_obj_set_style_text_font(network_label_, fonts_.icon_font, 0);
  380. lv_obj_set_style_text_color(network_label_, current_theme.text, 0);
  381. lv_obj_set_style_margin_left(network_label_, 5, 0); // 添加左边距,与前面的元素分隔
  382. battery_label_ = lv_label_create(status_bar_);
  383. lv_label_set_text(battery_label_, "");
  384. lv_obj_set_style_text_font(battery_label_, fonts_.icon_font, 0);
  385. lv_obj_set_style_text_color(battery_label_, current_theme.text, 0);
  386. lv_obj_set_style_margin_left(battery_label_, 5, 0); // 添加左边距,与前面的元素分隔
  387. low_battery_popup_ = lv_obj_create(screen);
  388. lv_obj_set_scrollbar_mode(low_battery_popup_, LV_SCROLLBAR_MODE_OFF);
  389. lv_obj_set_size(low_battery_popup_, LV_HOR_RES * 0.9, fonts_.text_font->line_height * 2);
  390. lv_obj_align(low_battery_popup_, LV_ALIGN_BOTTOM_MID, 0, 0);
  391. lv_obj_set_style_bg_color(low_battery_popup_, current_theme.low_battery, 0);
  392. lv_obj_set_style_radius(low_battery_popup_, 10, 0);
  393. lv_obj_t* low_battery_label = lv_label_create(low_battery_popup_);
  394. lv_label_set_text(low_battery_label, Lang::Strings::BATTERY_NEED_CHARGE);
  395. lv_obj_set_style_text_color(low_battery_label, lv_color_white(), 0);
  396. lv_obj_center(low_battery_label);
  397. lv_obj_add_flag(low_battery_popup_, LV_OBJ_FLAG_HIDDEN);
  398. }
  399. #define MAX_MESSAGES 300
  400. void LcdDisplay::SetChatMessage(const char* role, const char* content) {
  401. DisplayLockGuard lock(this);
  402. if (content_ == nullptr) {
  403. return;
  404. }
  405. //避免出现空的消息框
  406. if(strlen(content) == 0) return;
  407. // Create a message bubble
  408. lv_obj_t* msg_bubble = lv_obj_create(content_);
  409. lv_obj_set_style_radius(msg_bubble, 8, 0);
  410. lv_obj_set_scrollbar_mode(msg_bubble, LV_SCROLLBAR_MODE_OFF);
  411. lv_obj_set_style_border_width(msg_bubble, 1, 0);
  412. lv_obj_set_style_border_color(msg_bubble, current_theme.border, 0);
  413. lv_obj_set_style_pad_all(msg_bubble, 8, 0);
  414. // Create the message text
  415. lv_obj_t* msg_text = lv_label_create(msg_bubble);
  416. lv_label_set_text(msg_text, content);
  417. // 计算文本实际宽度
  418. lv_coord_t text_width = lv_txt_get_width(content, strlen(content), fonts_.text_font, 0);
  419. // 计算气泡宽度
  420. lv_coord_t max_width = LV_HOR_RES * 85 / 100 - 16; // 屏幕宽度的85%
  421. lv_coord_t min_width = 20;
  422. lv_coord_t bubble_width;
  423. // 确保文本宽度不小于最小宽度
  424. if (text_width < min_width) {
  425. text_width = min_width;
  426. }
  427. // 如果文本宽度小于最大宽度,使用文本宽度
  428. if (text_width < max_width) {
  429. bubble_width = text_width;
  430. } else {
  431. bubble_width = max_width;
  432. }
  433. // 设置消息文本的宽度
  434. lv_obj_set_width(msg_text, bubble_width); // 减去padding
  435. lv_label_set_long_mode(msg_text, LV_LABEL_LONG_WRAP);
  436. lv_obj_set_style_text_font(msg_text, fonts_.text_font, 0);
  437. // 设置气泡宽度
  438. lv_obj_set_width(msg_bubble, bubble_width);
  439. lv_obj_set_height(msg_bubble, LV_SIZE_CONTENT);
  440. // Set alignment and style based on message role
  441. if (strcmp(role, "user") == 0) {
  442. // User messages are right-aligned with green background
  443. lv_obj_set_style_bg_color(msg_bubble, current_theme.user_bubble, 0);
  444. // Set text color for contrast
  445. lv_obj_set_style_text_color(msg_text, current_theme.text, 0);
  446. // 设置自定义属性标记气泡类型
  447. lv_obj_set_user_data(msg_bubble, (void*)"user");
  448. // Set appropriate width for content
  449. lv_obj_set_width(msg_bubble, LV_SIZE_CONTENT);
  450. lv_obj_set_height(msg_bubble, LV_SIZE_CONTENT);
  451. // Add some margin
  452. lv_obj_set_style_margin_right(msg_bubble, 10, 0);
  453. // Don't grow
  454. lv_obj_set_style_flex_grow(msg_bubble, 0, 0);
  455. } else if (strcmp(role, "assistant") == 0) {
  456. // Assistant messages are left-aligned with white background
  457. lv_obj_set_style_bg_color(msg_bubble, current_theme.assistant_bubble, 0);
  458. // Set text color for contrast
  459. lv_obj_set_style_text_color(msg_text, current_theme.text, 0);
  460. // 设置自定义属性标记气泡类型
  461. lv_obj_set_user_data(msg_bubble, (void*)"assistant");
  462. // Set appropriate width for content
  463. lv_obj_set_width(msg_bubble, LV_SIZE_CONTENT);
  464. lv_obj_set_height(msg_bubble, LV_SIZE_CONTENT);
  465. // Add some margin
  466. lv_obj_set_style_margin_left(msg_bubble, -4, 0);
  467. // Don't grow
  468. lv_obj_set_style_flex_grow(msg_bubble, 0, 0);
  469. } else if (strcmp(role, "system") == 0) {
  470. // System messages are center-aligned with light gray background
  471. lv_obj_set_style_bg_color(msg_bubble, current_theme.system_bubble, 0);
  472. // Set text color for contrast
  473. lv_obj_set_style_text_color(msg_text, current_theme.system_text, 0);
  474. // 设置自定义属性标记气泡类型
  475. lv_obj_set_user_data(msg_bubble, (void*)"system");
  476. // Set appropriate width for content
  477. lv_obj_set_width(msg_bubble, LV_SIZE_CONTENT);
  478. lv_obj_set_height(msg_bubble, LV_SIZE_CONTENT);
  479. // Don't grow
  480. lv_obj_set_style_flex_grow(msg_bubble, 0, 0);
  481. }
  482. // Create a full-width container for user messages to ensure right alignment
  483. if (strcmp(role, "user") == 0) {
  484. // Create a full-width container
  485. lv_obj_t* container = lv_obj_create(content_);
  486. lv_obj_set_width(container, LV_HOR_RES);
  487. lv_obj_set_height(container, LV_SIZE_CONTENT);
  488. // Make container transparent and borderless
  489. lv_obj_set_style_bg_opa(container, LV_OPA_TRANSP, 0);
  490. lv_obj_set_style_border_width(container, 0, 0);
  491. lv_obj_set_style_pad_all(container, 0, 0);
  492. // Move the message bubble into this container
  493. lv_obj_set_parent(msg_bubble, container);
  494. // Right align the bubble in the container
  495. lv_obj_align(msg_bubble, LV_ALIGN_RIGHT_MID, -10, 0);
  496. // Auto-scroll to this container
  497. lv_obj_scroll_to_view_recursive(container, LV_ANIM_ON);
  498. } else if (strcmp(role, "system") == 0) {
  499. // 为系统消息创建全宽容器以确保居中对齐
  500. lv_obj_t* container = lv_obj_create(content_);
  501. lv_obj_set_width(container, LV_HOR_RES);
  502. lv_obj_set_height(container, LV_SIZE_CONTENT);
  503. // 使容器透明且无边框
  504. lv_obj_set_style_bg_opa(container, LV_OPA_TRANSP, 0);
  505. lv_obj_set_style_border_width(container, 0, 0);
  506. lv_obj_set_style_pad_all(container, 0, 0);
  507. // 将消息气泡移入此容器
  508. lv_obj_set_parent(msg_bubble, container);
  509. // 将气泡居中对齐在容器中
  510. lv_obj_align(msg_bubble, LV_ALIGN_CENTER, 0, 0);
  511. // 自动滚动底部
  512. lv_obj_scroll_to_view_recursive(container, LV_ANIM_ON);
  513. } else {
  514. // For assistant messages
  515. // Left align assistant messages
  516. lv_obj_align(msg_bubble, LV_ALIGN_LEFT_MID, 0, 0);
  517. // Auto-scroll to the message bubble
  518. lv_obj_scroll_to_view_recursive(msg_bubble, LV_ANIM_ON);
  519. }
  520. // Store reference to the latest message label
  521. chat_message_label_ = msg_text;
  522. // 检查消息数量是否超过限制
  523. uint32_t msg_count = lv_obj_get_child_cnt(content_);
  524. while (msg_count >= MAX_MESSAGES) {
  525. // 删除最早的消息(第一个子节点)
  526. lv_obj_t* oldest_msg = lv_obj_get_child(content_, 0);
  527. if (oldest_msg != nullptr) {
  528. lv_obj_del(oldest_msg);
  529. msg_count--;
  530. // 删除最早的消息会导致所有气泡整体往上移
  531. // 所以需要重新滚动到当前消息气泡位置
  532. lv_obj_scroll_to_view_recursive(msg_bubble, LV_ANIM_ON);
  533. }else{
  534. break;
  535. }
  536. }
  537. }
  538. #else
  539. void LcdDisplay::SetupUI() {
  540. DisplayLockGuard lock(this);
  541. auto screen = lv_screen_active();
  542. lv_obj_set_style_text_font(screen, fonts_.text_font, 0);
  543. lv_obj_set_style_text_color(screen, current_theme.text, 0);
  544. lv_obj_set_style_bg_color(screen, current_theme.background, 0);
  545. /* Container */
  546. container_ = lv_obj_create(screen);
  547. lv_obj_set_size(container_, LV_HOR_RES, LV_VER_RES);
  548. lv_obj_set_flex_flow(container_, LV_FLEX_FLOW_COLUMN);
  549. lv_obj_set_style_pad_all(container_, 0, 0);
  550. lv_obj_set_style_border_width(container_, 0, 0);
  551. lv_obj_set_style_pad_row(container_, 0, 0);
  552. lv_obj_set_style_bg_color(container_, current_theme.background, 0);
  553. lv_obj_set_style_border_color(container_, current_theme.border, 0);
  554. /* Status bar */
  555. status_bar_ = lv_obj_create(container_);
  556. lv_obj_set_size(status_bar_, LV_HOR_RES, fonts_.text_font->line_height);
  557. lv_obj_set_style_radius(status_bar_, 0, 0);
  558. lv_obj_set_style_bg_color(status_bar_, current_theme.background, 0);
  559. lv_obj_set_style_text_color(status_bar_, current_theme.text, 0);
  560. /* Content */
  561. content_ = lv_obj_create(container_);
  562. lv_obj_set_scrollbar_mode(content_, LV_SCROLLBAR_MODE_OFF);
  563. lv_obj_set_style_radius(content_, 0, 0);
  564. lv_obj_set_width(content_, LV_HOR_RES);
  565. lv_obj_set_flex_grow(content_, 1);
  566. lv_obj_set_style_pad_all(content_, 5, 0);
  567. lv_obj_set_style_bg_color(content_, current_theme.chat_background, 0);
  568. lv_obj_set_style_border_color(content_, current_theme.border, 0); // Border color for content
  569. lv_obj_set_flex_flow(content_, LV_FLEX_FLOW_COLUMN); // 垂直布局(从上到下)
  570. lv_obj_set_flex_align(content_, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_SPACE_EVENLY); // 子对象居中对齐,等距分布
  571. emotion_label_ = lv_label_create(content_);
  572. lv_obj_set_style_text_font(emotion_label_, &font_awesome_30_4, 0);
  573. lv_obj_set_style_text_color(emotion_label_, current_theme.text, 0);
  574. lv_label_set_text(emotion_label_, FONT_AWESOME_AI_CHIP);
  575. chat_message_label_ = lv_label_create(content_);
  576. lv_label_set_text(chat_message_label_, "");
  577. lv_obj_set_width(chat_message_label_, LV_HOR_RES * 0.9); // 限制宽度为屏幕宽度的 90%
  578. lv_label_set_long_mode(chat_message_label_, LV_LABEL_LONG_WRAP); // 设置为自动换行模式
  579. lv_obj_set_style_text_align(chat_message_label_, LV_TEXT_ALIGN_CENTER, 0); // 设置文本居中对齐
  580. lv_obj_set_style_text_color(chat_message_label_, current_theme.text, 0);
  581. /* Status bar */
  582. lv_obj_set_flex_flow(status_bar_, LV_FLEX_FLOW_ROW);
  583. lv_obj_set_style_pad_all(status_bar_, 0, 0);
  584. lv_obj_set_style_border_width(status_bar_, 0, 0);
  585. lv_obj_set_style_pad_column(status_bar_, 0, 0);
  586. lv_obj_set_style_pad_left(status_bar_, 2, 0);
  587. lv_obj_set_style_pad_right(status_bar_, 2, 0);
  588. network_label_ = lv_label_create(status_bar_);
  589. lv_label_set_text(network_label_, "");
  590. lv_obj_set_style_text_font(network_label_, fonts_.icon_font, 0);
  591. lv_obj_set_style_text_color(network_label_, current_theme.text, 0);
  592. notification_label_ = lv_label_create(status_bar_);
  593. lv_obj_set_flex_grow(notification_label_, 1);
  594. lv_obj_set_style_text_align(notification_label_, LV_TEXT_ALIGN_CENTER, 0);
  595. lv_obj_set_style_text_color(notification_label_, current_theme.text, 0);
  596. lv_label_set_text(notification_label_, "");
  597. lv_obj_add_flag(notification_label_, LV_OBJ_FLAG_HIDDEN);
  598. status_label_ = lv_label_create(status_bar_);
  599. lv_obj_set_flex_grow(status_label_, 1);
  600. lv_label_set_long_mode(status_label_, LV_LABEL_LONG_SCROLL_CIRCULAR);
  601. lv_obj_set_style_text_align(status_label_, LV_TEXT_ALIGN_CENTER, 0);
  602. lv_obj_set_style_text_color(status_label_, current_theme.text, 0);
  603. lv_label_set_text(status_label_, Lang::Strings::INITIALIZING);
  604. mute_label_ = lv_label_create(status_bar_);
  605. lv_label_set_text(mute_label_, "");
  606. lv_obj_set_style_text_font(mute_label_, fonts_.icon_font, 0);
  607. lv_obj_set_style_text_color(mute_label_, current_theme.text, 0);
  608. battery_label_ = lv_label_create(status_bar_);
  609. lv_label_set_text(battery_label_, "");
  610. lv_obj_set_style_text_font(battery_label_, fonts_.icon_font, 0);
  611. lv_obj_set_style_text_color(battery_label_, current_theme.text, 0);
  612. low_battery_popup_ = lv_obj_create(screen);
  613. lv_obj_set_scrollbar_mode(low_battery_popup_, LV_SCROLLBAR_MODE_OFF);
  614. lv_obj_set_size(low_battery_popup_, LV_HOR_RES * 0.9, fonts_.text_font->line_height * 2);
  615. lv_obj_align(low_battery_popup_, LV_ALIGN_BOTTOM_MID, 0, 0);
  616. lv_obj_set_style_bg_color(low_battery_popup_, current_theme.low_battery, 0);
  617. lv_obj_set_style_radius(low_battery_popup_, 10, 0);
  618. lv_obj_t* low_battery_label = lv_label_create(low_battery_popup_);
  619. lv_label_set_text(low_battery_label, Lang::Strings::BATTERY_NEED_CHARGE);
  620. lv_obj_set_style_text_color(low_battery_label, lv_color_white(), 0);
  621. lv_obj_center(low_battery_label);
  622. lv_obj_add_flag(low_battery_popup_, LV_OBJ_FLAG_HIDDEN);
  623. }
  624. #endif
  625. void LcdDisplay::SetEmotion(const char* emotion) {
  626. struct Emotion {
  627. const char* icon;
  628. const char* text;
  629. };
  630. static const std::vector<Emotion> emotions = {
  631. {"😶", "neutral"},
  632. {"🙂", "happy"},
  633. {"😆", "laughing"},
  634. {"😂", "funny"},
  635. {"😔", "sad"},
  636. {"😠", "angry"},
  637. {"😭", "crying"},
  638. {"😍", "loving"},
  639. {"😳", "embarrassed"},
  640. {"😯", "surprised"},
  641. {"😱", "shocked"},
  642. {"🤔", "thinking"},
  643. {"😉", "winking"},
  644. {"😎", "cool"},
  645. {"😌", "relaxed"},
  646. {"🤤", "delicious"},
  647. {"😘", "kissy"},
  648. {"😏", "confident"},
  649. {"😴", "sleepy"},
  650. {"😜", "silly"},
  651. {"🙄", "confused"}
  652. };
  653. // 查找匹配的表情
  654. std::string_view emotion_view(emotion);
  655. auto it = std::find_if(emotions.begin(), emotions.end(),
  656. [&emotion_view](const Emotion& e) { return e.text == emotion_view; });
  657. DisplayLockGuard lock(this);
  658. if (emotion_label_ == nullptr) {
  659. return;
  660. }
  661. // 如果找到匹配的表情就显示对应图标,否则显示默认的neutral表情
  662. lv_obj_set_style_text_font(emotion_label_, fonts_.emoji_font, 0);
  663. if (it != emotions.end()) {
  664. lv_label_set_text(emotion_label_, it->icon);
  665. } else {
  666. lv_label_set_text(emotion_label_, "😶");
  667. }
  668. }
  669. void LcdDisplay::SetIcon(const char* icon) {
  670. DisplayLockGuard lock(this);
  671. if (emotion_label_ == nullptr) {
  672. return;
  673. }
  674. lv_obj_set_style_text_font(emotion_label_, &font_awesome_30_4, 0);
  675. lv_label_set_text(emotion_label_, icon);
  676. }
  677. void LcdDisplay::SetTheme(const std::string& theme_name) {
  678. DisplayLockGuard lock(this);
  679. if (theme_name == "dark" || theme_name == "DARK") {
  680. current_theme = DARK_THEME;
  681. } else if (theme_name == "light" || theme_name == "LIGHT") {
  682. current_theme = LIGHT_THEME;
  683. } else {
  684. // Invalid theme name, return false
  685. ESP_LOGE(TAG, "Invalid theme name: %s", theme_name.c_str());
  686. return;
  687. }
  688. // Get the active screen
  689. lv_obj_t* screen = lv_screen_active();
  690. // Update the screen colors
  691. lv_obj_set_style_bg_color(screen, current_theme.background, 0);
  692. lv_obj_set_style_text_color(screen, current_theme.text, 0);
  693. // Update container colors
  694. if (container_ != nullptr) {
  695. lv_obj_set_style_bg_color(container_, current_theme.background, 0);
  696. lv_obj_set_style_border_color(container_, current_theme.border, 0);
  697. }
  698. // Update status bar colors
  699. if (status_bar_ != nullptr) {
  700. lv_obj_set_style_bg_color(status_bar_, current_theme.background, 0);
  701. lv_obj_set_style_text_color(status_bar_, current_theme.text, 0);
  702. // Update status bar elements
  703. if (network_label_ != nullptr) {
  704. lv_obj_set_style_text_color(network_label_, current_theme.text, 0);
  705. }
  706. if (status_label_ != nullptr) {
  707. lv_obj_set_style_text_color(status_label_, current_theme.text, 0);
  708. }
  709. if (notification_label_ != nullptr) {
  710. lv_obj_set_style_text_color(notification_label_, current_theme.text, 0);
  711. }
  712. if (mute_label_ != nullptr) {
  713. lv_obj_set_style_text_color(mute_label_, current_theme.text, 0);
  714. }
  715. if (battery_label_ != nullptr) {
  716. lv_obj_set_style_text_color(battery_label_, current_theme.text, 0);
  717. }
  718. if (emotion_label_ != nullptr) {
  719. lv_obj_set_style_text_color(emotion_label_, current_theme.text, 0);
  720. }
  721. }
  722. // Update content area colors
  723. if (content_ != nullptr) {
  724. lv_obj_set_style_bg_color(content_, current_theme.chat_background, 0);
  725. lv_obj_set_style_border_color(content_, current_theme.border, 0);
  726. // If we have the chat message style, update all message bubbles
  727. #if CONFIG_USE_WECHAT_MESSAGE_STYLE
  728. // Iterate through all children of content (message containers or bubbles)
  729. uint32_t child_count = lv_obj_get_child_cnt(content_);
  730. for (uint32_t i = 0; i < child_count; i++) {
  731. lv_obj_t* obj = lv_obj_get_child(content_, i);
  732. if (obj == nullptr) continue;
  733. lv_obj_t* bubble = nullptr;
  734. // 检查这个对象是容器还是气泡
  735. // 如果是容器(用户或系统消息),则获取其子对象作为气泡
  736. // 如果是气泡(助手消息),则直接使用
  737. if (lv_obj_get_child_cnt(obj) > 0) {
  738. // 可能是容器,检查它是否为用户或系统消息容器
  739. // 用户和系统消息容器是透明的
  740. lv_opa_t bg_opa = lv_obj_get_style_bg_opa(obj, 0);
  741. if (bg_opa == LV_OPA_TRANSP) {
  742. // 这是用户或系统消息的容器
  743. bubble = lv_obj_get_child(obj, 0);
  744. } else {
  745. // 这可能是助手消息的气泡自身
  746. bubble = obj;
  747. }
  748. } else {
  749. // 没有子元素,可能是其他UI元素,跳过
  750. continue;
  751. }
  752. if (bubble == nullptr) continue;
  753. // 使用保存的用户数据来识别气泡类型
  754. void* bubble_type_ptr = lv_obj_get_user_data(bubble);
  755. if (bubble_type_ptr != nullptr) {
  756. const char* bubble_type = static_cast<const char*>(bubble_type_ptr);
  757. // 根据气泡类型应用正确的颜色
  758. if (strcmp(bubble_type, "user") == 0) {
  759. lv_obj_set_style_bg_color(bubble, current_theme.user_bubble, 0);
  760. } else if (strcmp(bubble_type, "assistant") == 0) {
  761. lv_obj_set_style_bg_color(bubble, current_theme.assistant_bubble, 0);
  762. } else if (strcmp(bubble_type, "system") == 0) {
  763. lv_obj_set_style_bg_color(bubble, current_theme.system_bubble, 0);
  764. }
  765. // Update border color
  766. lv_obj_set_style_border_color(bubble, current_theme.border, 0);
  767. // Update text color for the message
  768. if (lv_obj_get_child_cnt(bubble) > 0) {
  769. lv_obj_t* text = lv_obj_get_child(bubble, 0);
  770. if (text != nullptr) {
  771. // 根据气泡类型设置文本颜色
  772. if (strcmp(bubble_type, "system") == 0) {
  773. lv_obj_set_style_text_color(text, current_theme.system_text, 0);
  774. } else {
  775. lv_obj_set_style_text_color(text, current_theme.text, 0);
  776. }
  777. }
  778. }
  779. } else {
  780. // 如果没有标记,回退到之前的逻辑(颜色比较)
  781. // ...保留原有的回退逻辑...
  782. lv_color_t bg_color = lv_obj_get_style_bg_color(bubble, 0);
  783. // 改进bubble类型检测逻辑,不仅使用颜色比较
  784. bool is_user_bubble = false;
  785. bool is_assistant_bubble = false;
  786. bool is_system_bubble = false;
  787. // 检查用户bubble
  788. if (lv_color_eq(bg_color, DARK_USER_BUBBLE_COLOR) ||
  789. lv_color_eq(bg_color, LIGHT_USER_BUBBLE_COLOR) ||
  790. lv_color_eq(bg_color, current_theme.user_bubble)) {
  791. is_user_bubble = true;
  792. }
  793. // 检查系统bubble
  794. else if (lv_color_eq(bg_color, DARK_SYSTEM_BUBBLE_COLOR) ||
  795. lv_color_eq(bg_color, LIGHT_SYSTEM_BUBBLE_COLOR) ||
  796. lv_color_eq(bg_color, current_theme.system_bubble)) {
  797. is_system_bubble = true;
  798. }
  799. // 剩余的都当作助手bubble处理
  800. else {
  801. is_assistant_bubble = true;
  802. }
  803. // 根据bubble类型应用正确的颜色
  804. if (is_user_bubble) {
  805. lv_obj_set_style_bg_color(bubble, current_theme.user_bubble, 0);
  806. } else if (is_assistant_bubble) {
  807. lv_obj_set_style_bg_color(bubble, current_theme.assistant_bubble, 0);
  808. } else if (is_system_bubble) {
  809. lv_obj_set_style_bg_color(bubble, current_theme.system_bubble, 0);
  810. }
  811. // Update border color
  812. lv_obj_set_style_border_color(bubble, current_theme.border, 0);
  813. // Update text color for the message
  814. if (lv_obj_get_child_cnt(bubble) > 0) {
  815. lv_obj_t* text = lv_obj_get_child(bubble, 0);
  816. if (text != nullptr) {
  817. // 回退到颜色检测逻辑
  818. if (lv_color_eq(bg_color, current_theme.system_bubble) ||
  819. lv_color_eq(bg_color, DARK_SYSTEM_BUBBLE_COLOR) ||
  820. lv_color_eq(bg_color, LIGHT_SYSTEM_BUBBLE_COLOR)) {
  821. lv_obj_set_style_text_color(text, current_theme.system_text, 0);
  822. } else {
  823. lv_obj_set_style_text_color(text, current_theme.text, 0);
  824. }
  825. }
  826. }
  827. }
  828. }
  829. #else
  830. // Simple UI mode - just update the main chat message
  831. if (chat_message_label_ != nullptr) {
  832. lv_obj_set_style_text_color(chat_message_label_, current_theme.text, 0);
  833. }
  834. if (emotion_label_ != nullptr) {
  835. lv_obj_set_style_text_color(emotion_label_, current_theme.text, 0);
  836. }
  837. #endif
  838. }
  839. // Update low battery popup
  840. if (low_battery_popup_ != nullptr) {
  841. lv_obj_set_style_bg_color(low_battery_popup_, current_theme.low_battery, 0);
  842. }
  843. // No errors occurred. Save theme to settings
  844. Display::SetTheme(theme_name);
  845. }