docs: optimize SOS button behavior, add 2-step pairing wizard, and IPC exit action
This commit is contained in:
@@ -1,85 +1,107 @@
|
||||
# UI 设计 (Docs/40_ui-design/main.md)
|
||||
|
||||
本章节定义手环 135x240 TFT LCD 屏幕的画面布局、各页面坐标位置、中文字体/ASCII 字符对齐基线以及局部刷新逻辑。
|
||||
本章节定义手环 120x240 Truly AMOLED 屏幕的画面布局、各页面坐标位置、中文字体/ASCII 字符对齐基线以及局部刷新逻辑。
|
||||
|
||||
## 1. 屏幕物理参数与刷新机制
|
||||
|
||||
* **屏幕规格**:1.14寸 TFT LCD 屏,物理分辨率 **`135x240`**。
|
||||
* **竖向屏规范**:屏幕窗口配置为 **`135` 像素宽,`240` 像素高**。页面中的时钟、菜单、报警元素均采用竖屏垂直居中排版。
|
||||
* **坐标偏移修正**:TFT LCD 驱动芯片(ST7789V)的显示 RAM 大小为 240x320 像素。在控制 135x240 的竖屏物理面板时,为了将显示窗口完美对齐至显示区域,防止花屏或偏置错误,写屏窗口渲染必须应用 **X 轴偏移量 +52,Y 轴偏移量 +40**。即:`LCD_SetWindow(x1 + 52, x2 + 52, y1 + 40, y2 + 40)`。
|
||||
* **屏幕规格**:0.95寸 Truly AMOLED 屏,物理分辨率 **`120x240`**。
|
||||
* **竖向屏规范**:屏幕窗口配置为 **`120` 像素宽,`240` 像素高**。页面中的时钟、菜单、报警元素均采用竖屏垂直居中排版(以 `X=60` 为几何中线)。
|
||||
* **坐标偏移修正**: Truly AMOLED 屏幕驱动芯片(RM69310)控制的 GRAM 存在偏置。为了使画面对齐,写屏窗口渲染必须应用 **X 轴偏移量 +4,Y 轴偏移量 +0**。即:`LCD_SetWindow(x1 + 4, x2 + 4, y1, y2)`。
|
||||
* **局部刷新防抖机制**:清除重绘标志(`Redraw`)的动作必须在具体的刷新绘制块结束时重置,防止因为主循环高速轮询而产生屏幕闪烁。
|
||||
|
||||
---
|
||||
|
||||
## 2. 页面布局与坐标坐标规范
|
||||
|
||||
### 2.1 时钟待机界面 (STATE_NORMAL / STATE_ARMED / STATE_DISARMED)
|
||||
### 2.1 时钟待机界面 (STATE_CLOCK)
|
||||
|
||||
时钟页面作为常态显示,包括状态栏、数字时钟和日期行。
|
||||
|
||||
```
|
||||
+-----------------------------------------+
|
||||
| 🔒 ARME 🔋 85% | <- 状态栏 (Y=24~27)
|
||||
| 🔒 ARME 🔋 85% | <- 状态栏 (Y=24~27)
|
||||
| |
|
||||
| |
|
||||
| 10:35 | <- 中央时间 (Y=80~128)
|
||||
| |
|
||||
| |
|
||||
| VEN. 07-10 | <- 底部日期 (Y=180)
|
||||
| |
|
||||
+-----------------------------------------+
|
||||
```
|
||||
|
||||
* **状态栏电量显示(极重要)**:
|
||||
* **电池图标** 绘制在 `X=107, Y=27`。
|
||||
* **电量百分比** 绘制在 `X=77, Y=24`。如果处于充电状态,追加 `+` 号后缀显示为 `85%+`,起始绘制点向左平移(如 `X=69`)以确保与电池图标之间依然有安全间距。
|
||||
* 两个控件在 `135` 像素宽的屏幕上保持 **6 像素安全间距**,彻底防范乱码和字符相撞。
|
||||
* **电池图标** 绘制在 `X=82, Y=27`。
|
||||
* **电量百分比** 绘制在 `X=76, Y=24`(以 `text-anchor="end"` 右对齐绘制)。如果处于充电状态,追加 `+` 号后缀显示为 `85%+`,起始绘制坐标向左偏置,以确保与电池图标之间依然有安全间距,不发生碰撞。
|
||||
* **安防状态显示**:
|
||||
* **布防状态 (ARMED)**:状态栏左侧显示红色闭锁 `🔒` 图标,显示 `ARME`。
|
||||
* **撤防状态 (DISARMED)**:状态栏左侧显示绿色开锁 `🔓` 图标,显示 `DESARME`。
|
||||
|
||||
### 2.2 传感器配对选择菜单 (STATE_PAIR_MENU)
|
||||
### 2.2 主选择菜单页面 (STATE_MENU)
|
||||
|
||||
* **顶部标题**:显示 `MODE PAIR P-XX`(其中 XX 为当前已配对的传感器数量)。
|
||||
* **列表滚动框**:采用 3 行滚动列表,可在 **7 种传感器类型**(门磁、红外、烟感、紧急、气体、水浸、振动)中上下循环滚动选中。当前行高亮并显示粗体外框,字号放大(如 `DETEC. PORTE`),非当前行暗淡显示。
|
||||
* **按键确认行为**:在配对菜单页面,短按侧边 **■ 确认键** 进入所选防区类型的对码等待状态。
|
||||
由时钟待机长按 CONFIRM 键 3 秒进入。显示四个功能条目,供滚动选择:
|
||||
```
|
||||
+-----------------------------------------+
|
||||
| - MENU - | <- 标题 (Y=30)
|
||||
| |
|
||||
| 1. DATE/HEURE | <- 条目 1 (Y=80)
|
||||
| > 2. APPAIRAGE < | <- 选中项高亮并加尖括号 (Y=115)
|
||||
| 3. ARM/DISARM | <- 条目 3 (Y=150)
|
||||
| 4. LIAISON IPC | <- 条目 4 (Y=185)
|
||||
+-----------------------------------------+
|
||||
```
|
||||
* 当前所选中的菜单项前后加上闪烁的 `> <` 箭头或以高亮粗体形式渲染,其余非选中项正常亮度显示。
|
||||
* 短按 ▲ 键向上滚动,▼ 键向下滚动。短按 CONFIRM 键进入该项。
|
||||
|
||||
### 2.3 报警触发与本地 SOS 界面 (STATE_ALARMING / STATE_SOS_EMITTED)
|
||||
### 2.3 功能设定与子界面设计
|
||||
|
||||
* **报警提示边框**:全屏闪烁的红色警告虚线/实线边框。
|
||||
* **中央图标**:根据触发的防区传感器类型,居中绘制对应的单色位图图标(32x32px):
|
||||
* 门磁:`🚪` 开门图标。
|
||||
* 红外:`👤` 人体辐射波纹图标。
|
||||
* 烟感:`🔥` 火苗图标。
|
||||
* 紧急按钮:`🆘` 求救图标。
|
||||
* 燃气:`💨` 毒气云雾图标。
|
||||
* 水浸:`💧` 滴水波纹图标。
|
||||
* 振动:`📳` 震动线框图标。
|
||||
* **主动 SOS 界面**:大字显示 `SOS EMIS`,居中显示 `🚨` 旋转警灯图标。
|
||||
* **绑定 IPC 界面 (STATE_BINDING)**:
|
||||
* 顶部标题:`LIAISON IPC` (法语:与 IPC 绑定)。
|
||||
* 中央:正在发送提示,显示 `ENVOI EN COURS`,配对确认锁图标。
|
||||
* **手环 Factory ID 显示**:底部居中显示手环自身出厂地址:`ID: 0xXXXXX`,以便用户配对及辨识。
|
||||
#### 2.3.1 时间日期修改界面 (STATE_SET_TIME)
|
||||
* **页面指示**:顶部大字 `REGLAGE HEURE`。
|
||||
* **数据列表**:居中分行显示当前编辑的 `HOUR`、`MIN`、`SEC`、`YEAR`、`MONTH`、`DAY`。
|
||||
* **光标与交互**:当前正在修改的数值行(如修改“小时”)闪烁或带有下划线高亮。按 ▲ 键增加数值,▼ 键减小数值,短按 CONFIRM 确认并跳转至下一项,全部设置完后自动保存返回时钟页。
|
||||
|
||||
### 2.4 对码确认与序号微调界面 (STATE_PAIR_CONFIRM)
|
||||
#### 2.3.2 传感器对码等待与配对界面 (STATE_PAIR_SEARCH)
|
||||
* **顶部标题**:显示 `APPAIRAGE`(配对)。
|
||||
* **中央图案**:绘制雷达搜索波纹动画 `SEARCHING...`,并闪烁提示 `DECLENCH. SENS`(触发传感器)。
|
||||
|
||||
#### 2.3.3 对码确认与二步微调界面 (STATE_PAIR_CONFIRM)
|
||||
当手环解码到传感器对码信号后,切入此确认页:
|
||||
```
|
||||
+-----------------------------------------+
|
||||
✓ RECU (对码成功) (Y=40)
|
||||
|
||||
[ 🚪 ICON ] (Y=80)
|
||||
|
||||
PORTE (Y=135)
|
||||
|
||||
[ 01 ] (Y=165) <- 序号微调框 (可按 ▲/▼ 修改)
|
||||
| ✓ RECU (Y=40)
|
||||
|
|
||||
| PORTE (Y=90) <- 步骤1: 传感器类型 (可按 ▲/▼ 修改)
|
||||
|
|
||||
| [ 🚪 ICON ] (Y=130) <- 对应位图图标 (32x32px)
|
||||
|
|
||||
| [ 01 ] (Y=180) <- 步骤2: 序号选框 (可按 ▲/▼ 修改)
|
||||
+-----------------------------------------+
|
||||
```
|
||||
* **元素定位**:
|
||||
* 顶部显示提示语 `✓ RECU`(法语:已接收),绿字。
|
||||
* 中央显示捕获传感器 32x32 对应位图图标。
|
||||
* 下方第一行展示传感器名称前缀(如 `PORTE`)。
|
||||
* 下方第二行展示序号选框 `[ 01 ]`:其中包含两个外括号,中间的数字即为 `selected_suffix_num`(01~99)。当用户按 ▲ 或 ▼ 键时,中间数字动态增减并实时局部刷新,外括号保持静止,增强可编辑交互感。
|
||||
* **确认行为**:短按 CONFIRM 键或 SOS 键保存退出。
|
||||
* **二步选择焦点逻辑**:
|
||||
* **步骤1 (编辑类型)**:焦点在类型文字处(例如类型名称前后有闪烁括号 `[ PORTE ]`),此时按 ▲/▼ 键可在门磁、红外、烟感等 7 种传感器类型间循环切换,图标实时更换。点击 CONFIRM 键保存当前类型并锁定,焦点切换到步骤2。
|
||||
* **步骤2 (编辑序号)**:焦点切换在底部的序号选框 `[ 01 ]`。此时按 ▲/▼ 键自增或自减数字序号(01~99)。点击 CONFIRM 键完成最终保存并存入数据库,返回时钟待机。
|
||||
* *长按 CONFIRM 键 3 秒放弃修改并直接返回时钟待机*。
|
||||
|
||||
#### 2.3.4 系统布撤防手动选择界面 (STATE_ARM_DISARM_SELECT)
|
||||
* **顶部标题**:显示 `REG. ALARME`。
|
||||
* **两个状态选项**:
|
||||
* `[ ARME ]`
|
||||
* `[ DESARME ]`
|
||||
* 按 ▲ / ▼ 键在这两者之间切换高亮。按 CONFIRM 键确认生效,系统状态转入 ARMED 或 DISARMED 并返回时钟页。
|
||||
|
||||
#### 2.3.5 IPC 绑定发射界面 (STATE_IPC_BIND)
|
||||
* **页面指示**:显示 `LIAISON IPC` (IPC 绑定)。
|
||||
* **发射中提示**:中央大字显示 `ENVOI EN COURS`(正在发送),绘制动态发射波形,系统使用 `bracelet_factory_id` 自动连续发射 EV1527 数据码为 `0x01` 的对码广播包。
|
||||
* **物理地址展示**:屏幕底部显示当前手环出厂唯一地址 `ID: 0xXXXXX`。
|
||||
* **退出/返回机制**:
|
||||
1. 自动退出:发射持续约 3 秒后,自动结束并退回时钟待机状态;
|
||||
2. 按键退出:**长按 CONFIRM 键 3 秒** 或 **长按 ▼ 键 2 秒** 立刻主动退出发射状态并返回时钟待机。
|
||||
|
||||
### 2.4 报警触发与本地 SOS 界面 (STATE_ALARMING / STATE_SOS_EMITTED)
|
||||
|
||||
* **报警提示边框**:全屏闪烁的红色警告虚线/实线边框。
|
||||
* **中央图标**:根据触发的防区传感器类型,居中绘制对应的单色位图图标(32x32px)。
|
||||
* **主动 SOS 界面**:大字显示 `SOS EMIS`,居中显示 `🚨` 旋转警灯图标。
|
||||
|
||||
---
|
||||
|
||||
@@ -87,6 +109,6 @@
|
||||
|
||||
为保证排版美观,[Drivers/lcd_font.h](file:///c:/workfile/105/stc32g12k128/Drivers/lcd_font.h) 内的标准字模点阵需要满足如下基线对齐:
|
||||
* **水平居中公式**:
|
||||
* 对于标准 8px 宽字符:X 轴绘制起点为 `(135 - len * 8) / 2`。
|
||||
* 对于双倍放大 16px 宽时钟字符:X 轴绘制起点为 `(135 - len * 16) / 2`。
|
||||
* 对于标准 8px 宽字符:X 轴绘制起点为 `(120 - len * 8) / 2`。
|
||||
* 对于双倍放大 16px 宽时钟字符:X 轴绘制起点为 `(120 - len * 16) / 2`。
|
||||
* **百分号(%)符号基线修正**:百分号字符在 `lcd_font.h` 数组的索引 `0x25` 中,点阵数据需**向上平移 2 像素**,以和 `0~9` 数字的基线保持严格水平对齐,避免百分号整体下沉。
|
||||
|
||||
Reference in New Issue
Block a user