5.0 KiB
5.0 KiB
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。
- 布防状态 (ARMED)：状态栏左侧显示红色闭锁
2.2 传感器配对选择菜单 (STATE_PAIR_MENU)
- 顶部标题：显示
MODE PAIR P-XX（其中 XX 为当前已配对的传感器数量）。 - 列表滚动框：采用 3 行滚动列表，可在 7 种传感器类型（门磁、红外、烟感、紧急、气体、水浸、振动）中上下循环滚动选中。当前行高亮并显示粗体外框，字号放大（如
DETEC. PORTE），非当前行暗淡显示。 - 按键确认行为：在配对菜单页面，短按侧边 ■ 确认键 进入所选防区类型的对码等待状态。
2.3 报警触发与本地 SOS 界面 (STATE_ALARMING / STATE_SOS_EMITTED)
- 报警提示边框：全屏闪烁的红色警告虚线/实线边框。
- 中央图标：根据触发的防区传感器类型，居中绘制对应的单色位图图标（32x32px）：
- 门磁：
🚪开门图标。 - 红外：
👤人体辐射波纹图标。 - 烟感：
🔥火苗图标。 - 紧急按钮：
🆘求救图标。 - 燃气：
💨毒气云雾图标。 - 水浸：
💧滴水波纹图标。 - 振动：
📳震动线框图标。 - 主动 SOS 界面：大字显示
SOS EMIS，居中显示🚨旋转警灯图标。
- 门磁：
- 绑定 IPC 界面 (STATE_BINDING)：
- 顶部标题：
LIAISON IPC(法语：与 IPC 绑定)。 - 中央：正在发送提示，显示
ENVOI EN COURS，配对确认锁图标。 - 手环 Factory ID 显示：底部居中显示手环自身出厂地址：
ID: 0xXXXXX，以便用户配对及辨识。
- 顶部标题：
2.4 对码确认与序号微调界面 (STATE_PAIR_CONFIRM)
当手环解码到传感器对码信号后，切入此确认页：
+-----------------------------------------+
✓ RECU (对码成功) (Y=40)
[ 🚪 ICON ] (Y=80)
PORTE (Y=135)
[ 01 ] (Y=165) <- 序号微调框 (可按 ▲/▼ 修改)
+-----------------------------------------+
- 元素定位：
- 顶部显示提示语
✓ RECU（法语：已接收），绿字。 - 中央显示捕获传感器 32x32 对应位图图标。
- 下方第一行展示传感器名称前缀（如
PORTE）。 - 下方第二行展示序号选框
[ 01 ]：其中包含两个外括号，中间的数字即为selected_suffix_num（01~99）。当用户按 ▲ 或 ▼ 键时，中间数字动态增减并实时局部刷新，外括号保持静止，增强可编辑交互感。
- 顶部显示提示语
- 确认行为：短按 CONFIRM 键或 SOS 键保存退出。
3. 文字居中对齐与字模基线规范
为保证排版美观，Drivers/lcd_font.h 内的标准字模点阵需要满足如下基线对齐：
- 水平居中公式：
- 对于标准 8px 宽字符：X 轴绘制起点为
(135 - len * 8) / 2。 - 对于双倍放大 16px 宽时钟字符：X 轴绘制起点为
(135 - len * 16) / 2。
- 对于标准 8px 宽字符：X 轴绘制起点为
- 百分号（%）符号基线修正：百分号字符在
lcd_font.h数组的索引0x25中，点阵数据需向上平移 2 像素，以和0~9数字的基线保持严格水平对齐，避免百分号整体下沉。