SoundWalker
/
K1Guitar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Align status bar battery icon with UI spec. 

Use a rounded battery shell with proportional fill and smaller centered percentage text to match the design reference.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
yuquanjun 2026-08-28 10:09:22 +08:00
parent 37242f108a
commit aabef28918
1 changed files with 47 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
device/LCD_ILI9341/Drv_ILI9341_Lcd_App.c
View File

@ -1835,57 +1835,71 @@ void Draw_Volume_Bar(uint16_t x, uint16_t y, uint8_t volume_level,uint8_t scale,
/** /**
* @brief 绘制电池图标（细线框 + 内填充 + 百分比，贴近状态栏需求图） * @brief 绘制电池图标（圆角线框 + 内填充 + 百分比，对齐需求图）
* @param x/y: 左上角坐标
* @param battery_percent: 0-100，填充宽度与百分比一致
* @param scale: 缩放倍数
* @param border_color / bg_color / fill_color: 边框、内底、填充色
*/ */
void Draw_Battery_Icon(uint16_t x, uint16_t y, uint8_t battery_percent,uint8_t scale, uint16_t border_color, uint16_t bg_color, uint16_t fill_color) void Draw_Battery_Icon(uint16_t x, uint16_t y, uint8_t battery_percent,uint8_t scale, uint16_t border_color, uint16_t bg_color, uint16_t fill_color)
{ {
uint16_t bat_w = 22 * scale; /* 主体宽度 */ uint16_t bat_w = 24 * scale;
uint16_t bat_h = 12 * scale; /* 主体高度（更扁） */ uint16_t bat_h = 11 * scale;
uint16_t fill_gap = 2 * scale; /* 填充与边框间距 */ uint8_t round_r = 2 * scale;
uint8_t stroke = 1 * scale;
uint16_t fill_gap = 2 * scale;
uint8_t text_size = 12 * scale;
uint8_t Info[40]; uint8_t Info[40];
uint16_t pole_w = 2 * scale; uint16_t pole_w = 2 * scale;
uint16_t pole_h = 6 * scale; uint16_t pole_h = 5 * scale;
uint16_t pole_x = x + bat_w; uint16_t pole_x;
uint16_t pole_y = y + (bat_h - pole_h) / 2; uint16_t pole_y;
uint16_t inner_w;
uint16_t inner_h;
uint16_t fill_w; uint16_t fill_w;
uint16_t fill_h;
uint16_t text_x; uint16_t text_x;
uint16_t text_y;
uint16_t clear_h;
/* 清到右缘，避免百分比位数变化残留 */ if(battery_percent > 100)
LCD_FillByColor(x, y, 240, y + ((bat_h > 16) ? bat_h : 16), BLACK);
if(battery_percent > 100) battery_percent = 100;
fill_w = (bat_w - 2 * fill_gap) * battery_percent / 100;
fill_h = bat_h - 2 * fill_gap;
/* 1px 线框外轮廓 */
LCD_DrawRectangle(x, y, x + bat_w - 1, y + bat_h - 1, border_color);
/* 内部背景 */
if(bat_w > 2 && bat_h > 2)
{ {
LCD_FillByColor(x + 1, y + 1, x + bat_w - 1, y + bat_h - 1, bg_color); battery_percent = 100;
} }
/* 电量填充（与百分比成比例） */ clear_h = (bat_h > text_size) ? bat_h : text_size;
LCD_FillByColor(x, y, 240, y + clear_h + 2 * scale, BLACK);
/* 圆角外壳：外框 + 内挖空 */
LCD_FillRoundRect(x, y, bat_w, bat_h, round_r, border_color);
if(bat_w > 2 * stroke && bat_h > 2 * stroke)
{
LCD_FillRoundRect(x + stroke, y + stroke,
bat_w - 2 * stroke, bat_h - 2 * stroke,
(round_r > stroke) ? (round_r - stroke) : 0,
bg_color);
}
inner_w = bat_w - 2 * fill_gap;
inner_h = bat_h - 2 * fill_gap;
fill_w = inner_w * battery_percent / 100;
/* 从左向右实心填充，宽度与百分比一致 */
if(battery_percent > 0 && fill_w > 0) if(battery_percent > 0 && fill_w > 0)
{ {
LCD_FillByColor(x + fill_gap, y + fill_gap, if(fill_w > inner_w)
x + fill_gap + fill_w, y + fill_gap + fill_h, {
fill_color); fill_w = inner_w;
}
LCD_FillRoundRect(x + fill_gap, y + fill_gap,
fill_w, inner_h,
1 * scale, fill_color);
} }
/* 右侧正极小凸起 */ /* 右侧正极小凸起 */
LCD_FillByColor(pole_x, pole_y, pole_x + pole_w, pole_y + pole_h, border_color); pole_x = x + bat_w;
pole_y = y + (bat_h - pole_h) / 2;
LCD_FillRoundRect(pole_x, pole_y, pole_w, pole_h, 1 * scale, border_color);
sprintf((char*)Info, "%d%%", battery_percent); sprintf((char*)Info, "%d%%", battery_percent);
text_x = pole_x + pole_w + 2 * scale; text_x = pole_x + pole_w + 2 * scale;
LCD_ShowString(text_x, y, Info, WHITE, BLACK, 16, 0); text_y = y + (bat_h - text_size) / 2;
LCD_ShowString(text_x, text_y, Info, WHITE, bg_color, text_size, 0);
} }
/****************************************************************************** /******************************************************************************