stc32g128k/Docs/40_ui-design/main.md

UI 设计 (Docs/40_ui-design/main.md)

本章节定义手环 135x240 TFT LCD 屏幕的画面布局、各页面坐标位置、中文字体/ASCII 字符对齐基线以及局部刷新逻辑。

1. 屏幕物理参数与刷新机制

• 屏幕规格：1.14寸 TFT LCD 屏，物理分辨率 135x240。
• 坐标偏移修正：写屏窗口渲染存在 4 像素的 X 轴偏移量，调用 LCD_SetWindow(x1 + 4, x2 + 4, y1, y2)。
• 局部刷新防抖机制：清除重绘标志（Redraw）的动作必须在具体的刷新绘制块结束时重置，防止因为主循环高速轮询而产生屏幕闪烁。

---

2. 页面布局与坐标坐标规范

2.1 时钟待机界面 (STATE_NORMAL / STATE_ARMED / STATE_DISARMED)

时钟页面作为常态显示，包括状态栏、数字时钟和日期行。

+-----------------------------------------+
|  🔒 ARME                      🔋 85%    | <- 状态栏 (Y=24~27)
|                                         |
|                                         |
|                 10:35                   | <- 中央时间 (Y=80~128)
|                                         |
|                                         |
|              VEN. 07-10                 | <- 底部日期 (Y=180)
+-----------------------------------------+

• 状态栏电量显示（极重要）：
  • 电池图标 绘制在 X=107, Y=27。
  • 电量百分比 绘制在 X=77, Y=24。
  • 两个控件在 135 像素宽的屏幕上保持 6 像素安全间距（77 + 3*8 = 101，与 107 之间为 6px），彻底防范乱码和字符相撞。
• 安防状态显示：
  • 布防状态 (ARMED)：状态栏左侧显示红色闭锁 🔒 图标，显示 ARME。
  • 撤防状态 (DISARMED)：状态栏左侧显示绿色开锁 🔓 图标，显示 DESARME。

2.2 传感器配对选择菜单 (STATE_PAIR_MENU)

• 顶部标题：显示 MODE PAIR P-XX（其中 XX 为当前已配对的传感器数量）。
• 列表滚动框：采用 3 行滚动列表，当前行高亮并显示粗体外框，字号放大（如 DETEC. PORTE），非当前行暗淡显示。
• 按键确认行为：在配对菜单页面，短按侧边 ■ 确认键 进入所选防区类型的对码等待状态。

2.3 报警触发与本地 SOS 界面 (STATE_ALARMING / STATE_SOS_EMITTED)

• 报警提示边框：全屏闪烁的红色警告虚线/实线边框。
• 中央图标：根据触发的防区传感器类型，居中绘制对应的单色位图图标（32x32px）：
  • 门磁：🚪 开门图标。
  • 红外：👤 人体辐射波纹图标。
  • 烟感：🔥 火苗图标。
  • 燃气：💨 毒气云雾图标。
  • 水浸：💧 滴水波纹图标。
  • 主动 SOS：🚨 旋转警灯闪烁图标。
• 底部两行小字：
  • 第一行：传感器自定义法语名称（如 PORTE ENTREE）。
  • 第二行：防区信息与动作指示（如 ZONE 1 | CRITIQUE）。

---

3. 文字居中对齐与字模基线规范

为保证排版美观，Drivers/lcd_font.h 内的标准字模点阵需要满足如下基线对齐：

• 水平居中公式：
  • 对于标准 8px 宽字符：X 轴绘制起点为 (135 - len * 8) / 2。
  • 对于双倍放大 16px 宽时钟字符：X 轴绘制起点为 (135 - len * 16) / 2。
• 百分号（%）符号基线修正：百分号字符在 lcd_font.h 数组的索引 0x25 中，点阵数据需向上平移 2 像素，以和 0~9 数字的基线保持严格水平对齐，避免百分号整体下沉。