zouhaitao/stc32g128k
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initialize repository and implement low-power sleep wakeup

Browse Source
This commit is contained in:
Antigravity IDE
2026-07-15 15:57:37 +08:00
commit 30a2e1680b
70 changed files with 86332 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
Docs/40_ui-design/main.md Normal file
View File

@@ -0,0 +1,131 @@
# UI 设计 (Docs/40_ui-design/main.md)
本章节定义手环 120x240 Truly AMOLED 屏幕的画面布局、各页面坐标位置、中文字体/ASCII 字符对齐基线以及局部刷新逻辑。
针对**特殊人群（如视力障碍者、老年人）**的需求，本界面采取了**大字版与大图标无障碍（Accessibility / A11y）设计系统**。
---
## 1. 无障碍（A11y）大字设计系统规范
为确保特殊人群能清晰阅读，且文本在 120 像素宽的屏幕内**不超出边界**，设计遵循以下准则：
1. **文本宽度与换行原则**：
* 在 120 像素宽的屏幕上，单行 16x32px 大字符最多显示 **7 个字符**。
* 如果提示语较长（如 `APPEL EN COURS`），必须将其**缩短或分成多行显示**（如第一行 `APPEL`，第二行 `SOS`）。
* 菜单项名称进行合理缩短，如 `1. DATE/HEURE` 缩短为 `1. HORLOGE`，`2. APPAIRAGE` 缩短为 `2. APPAIR.`，以保证在 16x32px 字体下不溢出。
2. **最小字号限制**：取消所有 8x16px 或更小的微缩文本。基础信息字号不小于 **16x32px**。
3. **核心电量与状态图标放大**：
* 为了使用户能清晰看清剩余电量，电池电量数字放大为 **16x32px** 粗体。
* 电池图标放大为 **24x12px** 粗边框，放置在状态栏右上角。
* 状态锁图标放大为 **32x32px**，放置在状态栏左上角。
4. **超大核心数据**：时间数字、设定参数、传感器序号等使用 **32x64px**（超大点阵字模）呈现。
5. **大图标辅助**：所有页面均配备 **48x48px 或 64x64px 的超大单色位图图标**，结合高对比度色彩（红/绿/黄/黑），方便用户一眼识别功能。
6. **单页单焦点排版**：避免多行数据堆叠。菜单、时间设定、对码等页面在屏幕中**每次只显示当前编辑或选中的一个条目**，把所有的屏幕空间留给最大化的字体和图标。
7. **坐标偏移修正**： Truly AMOLED 屏幕写屏窗口渲染必须应用 **X 轴偏移量 +4，Y 轴偏移量 +0**。即：`LCD_SetWindow(x1 + 4, x2 + 4, y1, y2)`。
---
## 2. 页面布局与坐标坐标规范
### 2.1 时钟待机界面 (STATE_CLOCK)
时钟页面作为常态显示，包括状态栏、数字时钟和日期行。
```
+-----------------------------------------+
| [🔒 32x32] 🔋 85%+ | <- 状态栏 (Y=15~35) (电池图标与16x32px电量)
| |
| |
| 10:35 | <- 居中超大时间 (Y=70~134) (32x64px字模)
| |
| |
| VEN. 07-10 | <- 底部大日期 (Y=180~212) (16x32px字模)
| |
+-----------------------------------------+
```
* **状态栏电量显示（极重要）**：
* **电池图标** 放大绘制在 `X=86, Y=19, W=24, H=13`。
* **电量百分比** 采用 `16x32px` 字模，右对齐。充电时显示 `+` 号。
* **安防状态显示**：
* 状态栏左侧绘制 **32x32px** 的超大布撤防锁图标：红色闭锁 `🔒`（布防），绿色开锁 `🔓`（撤防），不再显示小文字，使用户看图即懂。
### 2.2 主选择菜单页面 (STATE_MENU)
由时钟待机长按 CONFIRM 键 3 秒进入。显示四个功能条目，供滚动选择：
```
+-----------------------------------------+
| - MENU - | <- 标题 (Y=20) (16x32px)
| |
| [⏰ 48x48] | <- 选中项大图标 (Y=60~108)
| |
| 1. HORLOGE | <- 选中项大字文本 (Y=150~182) (16x32px)
| |
| ▲ / ▼ | <- 翻页提示符 (Y=205) (16x32px)
+-----------------------------------------+
```
* 屏幕中央显示当前选中功能的 **48x48px** 图标，下方以 **16x32px** 粗体显示功能名称。
* 用户按 ▲ 或 ▼ 键时，页面以幻灯片形式切换：
1. `1. HORLOGE` (对应 ⏰ 时钟图标)
2. `2. APPAIR.` (对应 📡 雷达对码图标)
3. `3. ALARME` (对应 🔒 防区盾牌图标)
4. `4. LIAISON` (对应 📷 摄像头图标)
* 短按 CONFIRM 键确认进入当前显示的功能。
### 2.3 功能设定与子界面设计
#### 2.3.1 时间日期修改界面 (STATE_SET_TIME)
为了避免小字，时间设置每次只微调一个数值：
* **页面指示**：顶部大字显示当前修改的字段，例如 `REGLER` (16x32px)。
* **中央数值**：正中央显示正在修改的两位数值（如小时 `10`），字号采用 **32x64px** 超大号。数值上下有明显的闪烁三角箭头指示。
* **交互**：按 ▲ / ▼ 调整该值。短按 CONFIRM 保存该值并切入下一项（分 $
ightarrow$ 秒 $
ightarrow$ 年 $
ightarrow$ 月 $
ightarrow$ 日）。
#### 2.3.2 传感器对码等待与配对界面 (STATE_PAIR_SEARCH)
* **顶部标题**：显示 `APPAIRAGE` (16x32px)。
* **中央图案**：绘制占满屏幕中部的雷达搜索大图标（64x64px）并闪烁。
#### 2.3.3 对码确认与序号微调界面 (STATE_PAIR_CONFIRM)
当手环解码到传感器对码信号后，系统自动依据 4-bit 数据码解析出传感器类型，直接切入此确认页进行序号编辑：
```
+-----------------------------------------+
| ✓ RECU | <- 状态提示 (Y=20) (16x32px)
| |
| [🚪 48x48] | <- 传感器大图标 (Y=55~103)
| |
| PORTE | <- 类型名称 (Y=120) (16x32px)
| |
| [ 01 ] | <- 序号微调框 (Y=170~234) (32x64px)
+-----------------------------------------+
```
* **元素布局**：
* **传感器图标** 使用 **48x48px** 超大单色位图。
* **类型前缀** 使用 **16x32px**。
* **数字序号选框** 使用 **32x64px** 超大数字。用户按 ▲/▼ 直接微调序号，CONFIRM 键保存。
#### 2.3.4 系统布撤防手动选择界面 (STATE_ARM_DISARM_SELECT)
* **页面显示**：屏幕正中央显示当前拟设定的状态：
* `[ ARME ]`（配 48x48px 盾牌图标）
* `[ DESARME ]`（配 48x48px 虚线开锁图标）
* 字体全部使用 **16x32px**。按 ▲/▼ 键来回切换，按 CONFIRM 键保存生效。
#### 2.3.5 IPC 绑定发射界面 (STATE_IPC_BIND)
* **图形指示**：正中央显示 **48x48px** 的摄像头绑定大图标，配合动态声波向外发射动画。
* **大字提示**：上方显示 `LIAISON` (16x32px)，下方显示 `EN COURS` (16x32px)。
* **物理地址展示**：底部以 8x16px 显示手环地址 `ID: 0xXXXXX`。
* **退出/返回**：长按 CONFIRM 键 3 秒 或 长按 ▼ 键 2 秒主动退出。
### 2.4 报警触发与本地 SOS 界面 (STATE_ALARMING / STATE_SOS_EMITTED)
手环发生报警时的显示要具有极强的视觉冲击力：
* **警告框**：全屏外围红绿交替闪烁的 4 像素宽粗线警告框。
* **中央图标**：根据传感器类型，居中绘制对应的 **64x64px** 的超大单色位图图标（如巨大的火苗 `🔥`、门锁 `🚪`）。
* **主动 SOS 界面**：大字显示 `SOS` 和 `EMIS` (16x32px 分行显示，防止单行溢出)，中央显示巨大的 `🚨` 警灯图标 (64x64px)。
---
## 3. 文字居中对齐与字模基线规范
为保证排版美观，[Drivers/lcd_font.h](file:///c:/workfile/105/stc32g12k128/Drivers/lcd_font.h) 内的标准字模点阵需要满足如下基线对齐：

646
Docs/40_ui-design/wristband_ui_gallery.html Normal file
View File

@@ -0,0 +1,646 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wristband Accessibility Big Font UI Gallery (A11y V3.4)</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #0A0D14;
color: #E2E8F0;
margin: 0;
padding: 40px 20px;
line-height: 1.6;
}
/* 页面居中大框容器 */
.container {
max-width: 1200px;
margin: 0 auto;
}
/* 页面大标题 */
h1 {
font-size: 2.2rem;
color: #00E5FF;
text-align: center;
margin-bottom: 8px;
letter-spacing: 1px;
}
/* 页面副标题 */
.subtitle {
text-align: center;
color: #94A3B8;
font-size: 1.1rem;
margin-bottom: 30px;
}
/* 主栏目分隔标题 */
.section-title {
font-size: 1.4rem;
color: #FFB74D;
border-left: 4px solid #FFB74D;
padding-left: 12px;
margin-top: 50px;
margin-bottom: 20px;
font-weight: bold;
}
/* 网格卡片布局 */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
justify-items: center;
}
/* 每一个卡片的样式 */
.card {
background-color: #161B22;
border-radius: 16px;
border: 1px solid #30363D;
padding: 24px;
text-align: center;
width: 270px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
transition: transform 0.2s, border-color 0.2s;
display: flex;
flex-direction: column;
}
.card:hover {
transform: translateY(-5px);
border-color: #00E5FF;
}
/* 卡片内标题 */
.card-title {
font-size: 1.1rem;
font-weight: bold;
color: #FFFFFF;
margin-bottom: 8px;
}
/* 卡片内简短描述 */
.card-desc {
font-size: 0.85rem;
color: #8B949E;
margin-bottom: 20px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
/* 智能手环 CSS 仿真外壳 */
.watch-device {
position: relative;
width: 160px;
height: 280px;
background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
border-radius: 35px;
border: 5px solid #4A5568;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 10px 20px rgba(0, 0, 0, 0.6);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
/* 表带连接件仿真效果 (上) */
.watch-device::before {
content: '';
position: absolute;
top: -20px;
left: 45px;
width: 70px;
height: 20px;
background-color: #2D3748;
border-radius: 5px 5px 0 0;
z-index: -1;
}
/* 表带连接件仿真效果 (下) */
.watch-device::after {
content: '';
position: absolute;
bottom: -20px;
left: 45px;
width: 70px;
height: 20px;
background-color: #2D3748;
border-radius: 0 0 5px 5px;
z-index: -1;
}
/* 屏幕物理边框 */
.screen-bezel {
position: relative;
width: 130px;
height: 250px;
background-color: #000000;
border-radius: 25px;
border: 2px solid #0D1117;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* SVG 自动适应屏幕比例 */
.screen-bezel svg {
width: 120px;
height: 240px;
display: block;
}
/* 底部按键操作说明框 */
.card-ops {
font-size: 0.8rem;
color: #E2E8F0;
margin-top: 20px;
text-align: left;
background-color: #0D1117;
padding: 12px;
border-radius: 8px;
border: 1px solid #21262D;
min-height: 70px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
/* 操作说明高亮前缀 */
.card-ops b {
color: #FFB74D;
display: block;
margin-bottom: 4px;
font-size: 0.85rem;
}
</style>
</head>
<body>
<div class="container">
<h1>Wristband Accessibility Big Font UI Gallery (A11y V3.4)</h1>
<div class="subtitle">Concentrated single-page display of large-font, large-icon UI screens and button
interaction instructions optimized for special groups (13 categories of complete UI screens)</div>
<div class="section-title">Part 1: Normal Standby Clock Screen (STATE_CLOCK)</div>
<div class="grid">
<div class="card">
<div class="card-title">1. Standby Clock (Disarmed)</div>
<div class="card-desc">Normal time display, large battery percentage, with a large unlock icon 🔓 on the
left</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<g transform="translate(10, 15)">
<rect x="0" y="8" width="20" height="15" rx="3" fill="none" stroke="#10B981"
stroke-width="2" />
<path d="M 5 8 L 5 4 C 5 2, 12 2, 15 4 L 15 10" fill="none" stroke="#10B981"
stroke-width="2" stroke-linecap="round" />
</g>
<text x="82" y="32" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="end">85%</text>
<rect x="86" y="19" width="24" height="13" rx="2" fill="none" stroke="#FFFFFF"
stroke-width="1.8" />
<rect x="89" y="22" width="15" height="7" rx="0.5" fill="#10B981" />
<rect x="110" y="23" width="1.5" height="5" rx="0.5" fill="#FFFFFF" />
<text x="60" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="34"
font-weight="bold" text-anchor="middle">10:35</text>
<text x="60" y="150" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="16"
font-weight="bold" text-anchor="middle">AM</text>
<text x="60" y="195" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="middle">FRI 07-10</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
Long press ■ confirm key for 3 seconds to enter main menu; <b>long press ▲ (UP) key to toggle
Arm/Disarm</b>; short or long press SOS key directly triggers [Local Active Alarm].
</div>
</div>
<div class="card">
<div class="card-title">2. Standby Clock (Armed)</div>
<div class="card-desc">Normal time display, large battery percentage, with a large red lock icon 🔒 on
the left</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<g transform="translate(10, 15)">
<rect x="0" y="8" width="20" height="15" rx="3" fill="none" stroke="#EF4444"
stroke-width="2" />
<path d="M 5 8 L 5 3 C 5 1, 15 1, 15 3 L 15 8" fill="none" stroke="#EF4444"
stroke-width="2" stroke-linecap="round" />
</g>
<text x="82" y="32" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="end">85%+</text>
<rect x="86" y="19" width="24" height="13" rx="2" fill="none" stroke="#FFFFFF"
stroke-width="1.8" />
<rect x="89" y="22" width="15" height="7" rx="0.5" fill="#10B981" />
<rect x="110" y="23" width="1.5" height="5" rx="0.5" fill="#FFFFFF" />
<text x="60" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="34"
font-weight="bold" text-anchor="middle">10:35</text>
<text x="60" y="150" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="16"
font-weight="bold" text-anchor="middle">PM</text>
<text x="60" y="195" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="middle">FRI 07-10</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
Long press ■ confirm key for 3 seconds to enter main menu; <b>long press ▲ (UP) key to toggle
Arm/Disarm</b>; short or long press SOS key directly triggers [Local Active Alarm].
</div>
</div>
</div>
<div class="section-title">Part 2: Main Menu Screen (STATE_MENU)</div>
<div class="grid">
<div class="card">
<div class="card-title">3. Main Menu: 1. Time Settings</div>
<div class="card-desc">Menu Item 1: Large clock icon with extra large menu text</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<path d="M 52 30 L 60 20 L 68 30 Z" fill="#64748B" />
<g transform="translate(36, 65)">
<circle cx="24" cy="24" r="20" stroke="#00E5FF" stroke-width="3" fill="none" />
<path d="M 24 10 L 24 24 L 34 24" stroke="#00E5FF" stroke-width="3"
stroke-linecap="round" fill="none" />
<path d="M 8 6 L 16 2 M 40 6 L 32 2" stroke="#00E5FF" stroke-width="3.5"
stroke-linecap="round" />
</g>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="middle">1. CLOCK</text>
<path d="M 52 210 L 60 220 L 68 210 Z" fill="#64748B" />
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
Press ▲/▼ keys to browse menu items; short press ■ to confirm entry; long press ■ for 3 seconds to
return to clock.
</div>
</div>
<div class="card">
<div class="card-title">4. Main Menu: 2. Sensor Pairing</div>
<div class="card-desc">Menu Item 2: Large radar pairing icon with pairing text</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<path d="M 52 30 L 60 20 L 68 30 Z" fill="#64748B" />
<g transform="translate(36, 65)">
<path
d="M 24 38 A 12 12 0 0 1 36 28 M 24 38 A 18 18 0 0 1 42 22 M 24 38 A 24 24 0 0 1 48 16"
stroke="#00E5FF" stroke-width="3" fill="none" stroke-linecap="round" />
<circle cx="24" cy="38" r="4" fill="#00E5FF" />
<line x1="24" y1="38" x2="6" y2="44" stroke="#00E5FF" stroke-width="2.5" />
</g>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="middle">2. PAIR</text>
<path d="M 52 210 L 60 220 L 68 210 Z" fill="#64748B" />
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
Press ▲/▼ keys to browse menu items; short press ■ to confirm entry to start pairing search; long
press ■ for 3 seconds to return to clock.
</div>
</div>
<div class="card">
<div class="card-title">5. Main Menu: 3. Camera Binding</div>
<div class="card-desc">Menu Item 3: Large camera icon with binding text</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<path d="M 52 30 L 60 20 L 68 30 Z" fill="#64748B" />
<g transform="translate(36, 65)">
<rect x="4" y="14" width="30" height="24" rx="3" fill="none" stroke="#00E5FF"
stroke-width="3" />
<circle cx="19" cy="26" r="6" stroke="#00E5FF" stroke-width="2.5" fill="none" />
<path d="M 34 20 L 44 14 L 44 38 L 34 32 Z" fill="#00E5FF" />
</g>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="middle">3. BIND</text>
<path d="M 52 210 L 60 220 L 68 210 Z" fill="#64748B" />
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
Press ▲/▼ keys to browse menu items; short press ■ to confirm entry into camera binding page; long
press ■ for 3 seconds to return to clock.
</div>
</div>
</div>
<div class="section-title">Part 3: Sub-setting Flow 1 - Time Adjustment (STATE_SET_TIME)</div>
<div class="grid">
<div class="card">
<div class="card-title">6. Time Edit: Select Hours (Blinking)</div>
<div class="card-desc">The actively selected digits (e.g., hours '10') will continuously blink on and
off.</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<g transform="translate(10, 15)">
<rect x="0" y="8" width="20" height="15" rx="3" fill="none" stroke="#10B981"
stroke-width="2" />
<path d="M 5 8 L 5 4 C 5 2, 12 2, 15 4 L 15 10" fill="none" stroke="#10B981"
stroke-width="2" stroke-linecap="round" />
</g>
<text x="82" y="32" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="end">85%+</text>
<rect x="86" y="19" width="24" height="13" rx="2" fill="none" stroke="#FFFFFF"
stroke-width="1.8" />
<rect x="89" y="22" width="15" height="7" rx="0.5" fill="#10B981" />
<rect x="110" y="23" width="1.5" height="5" rx="0.5" fill="#FFFFFF" />
<text x="52" y="115" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="34"
font-weight="bold" text-anchor="end">10</text>
<text x="60" y="113" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="34"
font-weight="bold" text-anchor="middle">:</text>
<text x="68" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="34"
font-weight="bold" text-anchor="start">35</text>
<text x="60" y="150" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="16"
font-weight="bold" text-anchor="middle">AM</text>
<text x="60" y="195" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="middle">FRI 07-10</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
Long press ■ confirm key to enter edit mode; short press ▲/▼ to adjust the currently blinking
number; long press ■ to jump to the next field (Minutes blink); short press ■ to save and exit edit
mode.
</div>
</div>
</div>
<div class="section-title">Part 4: Sub-setting Flow 2 - Sensor Pairing (STATE_PAIR)</div>
<div class="grid">
<div class="card">
<div class="card-title">7. Radar Pairing Search</div>
<div class="card-desc">64x64px extra large radar flashing animation, waiting for pairing signal</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<text x="60" y="35" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="14"
font-weight="bold" text-anchor="middle">PAIRING</text>
<g transform="translate(28, 65)">
<path
d="M 32 50 C 32 30, 48 10, 60 10 M 32 50 C 32 35, 42 20, 52 20 M 32 50 C 32 40, 36 30, 44 30"
stroke="#00E5FF" stroke-width="3" fill="none" stroke-linecap="round" />
<circle cx="32" cy="50" r="5" fill="#00E5FF" />
<line x1="32" y1="50" x2="8" y2="58" stroke="#00E5FF" stroke-width="3" />
</g>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="14"
font-weight="bold" text-anchor="middle">SEARCHING</text>
<text x="60" y="200" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="13"
font-weight="bold" text-anchor="middle">TRIGGER DET.</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
Trigger the physical sensor. After capturing data, the wristband will <b>automatically identify the
type by data code and jump to the confirmation page</b>. Long press ▼ for 2 seconds to exit.
</div>
</div>
<div class="card">
<div class="card-title">8. Identify Type and Adjust ID</div>
<div class="card-desc">Auto-display type and large icon, adjust index number inside large box directly
</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<text x="60" y="32" fill="#10B981" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="middle">✓ RECEIVED</text>
<g transform="translate(36, 45)">
<rect x="2" y="2" width="24" height="42" rx="3" fill="none" stroke="#FFFFFF"
stroke-width="2.5" />
<rect x="30" y="8" width="10" height="30" rx="1.5" fill="none" stroke="#10B981"
stroke-width="2.5" />
<circle cx="8" cy="24" r="2.5" fill="#FFFFFF" />
</g>
<text x="60" y="130" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="middle">DOOR</text>
<rect x="15" y="152" width="90" height="44" rx="6" fill="none" stroke="#00E5FF"
stroke-width="2" />
<text x="60" y="186" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="34"
font-weight="bold" text-anchor="middle">01</text>
<text x="60" y="225" fill="#64748B" font-family="system-ui, sans-serif" font-size="13"
font-weight="bold" text-anchor="middle">CONFIRM</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
Press ▲ to increase, ▼ to decrease the index number (01-99); short press ■ to save; long press ■ for
3 seconds to cancel.
</div>
</div>
<div class="card">
<div class="card-title">9. Pairing Saved Successfully</div>
<div class="card-desc">Accessibility big font: circle with checkmark, green success indicator</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<circle cx="60" cy="90" r="24" stroke="#10B981" stroke-width="2.5" fill="none" />
<path d="M 48 90 L 56 98 L 72 82" stroke="#10B981" stroke-width="3.5" fill="none"
stroke-linecap="round" stroke-linejoin="round" />
<text x="60" y="150" fill="#10B981" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="middle">SUCCESS</text>
<text x="60" y="185" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="13"
font-weight="bold" text-anchor="middle">SAVED</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
Automatically returns to standby clock after showing for 2 seconds, no buttons required.
</div>
</div>
<div class="card">
<div class="card-title">10. Pairing Failed</div>
<div class="card-desc">Accessibility big font: red cross circle, warning to re-activate pairing</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<circle cx="60" cy="90" r="24" stroke="#EF4444" stroke-width="2.5" fill="none" />
<path d="M 50 80 L 70 100 M 70 80 L 50 100" stroke="#EF4444" stroke-width="3.5" fill="none"
stroke-linecap="round" />
<text x="60" y="150" fill="#EF4444" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="middle">FAILED</text>
<text x="60" y="185" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="12"
font-weight="bold" text-anchor="middle">PAIRED</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
Automatically returns to pairing menu after showing for 5 seconds, or press any key to return
immediately.
</div>
</div>
</div>
<div class="section-title">Part 5: Sub-setting Flow 3 - IPC Camera Binding (STATE_IPC_BIND)</div>
<div class="grid">
<div class="card">
<div class="card-title">11. IPC Binding Transmission</div>
<div class="card-desc">48x48px camera icon, large status text and ID indicator</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<g transform="translate(36, 40)">
<rect x="2" y="10" width="32" height="26" rx="4" fill="none" stroke="#00E5FF"
stroke-width="3" />
<circle cx="18" cy="23" r="6" stroke="#00E5FF" stroke-width="2.5" fill="none" />
<path d="M 34 16 L 44 10 L 44 36 L 34 30 Z" fill="#00E5FF" />
</g>
<text x="60" y="130" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="middle">BIND</text>
<text x="60" y="165" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="15"
font-weight="bold" text-anchor="middle">PAIRING...</text>
<text x="60" y="215" fill="#64748B" font-family="system-ui, sans-serif" font-size="9"
text-anchor="middle">ID: 0x3F882</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
Continuously sends pairing signal. Long press ■ for 3 seconds or long press ▼ for 2 seconds to exit
immediately and return to clock.
</div>
</div>
</div>
<div class="section-title">Part 6: Emergency Alarm Status (STATE_ALARMING / STATE_SOS_EMITTED)</div>
<div class="grid">
<div class="card">
<div class="card-title">12. Received Zone Alarm (DOOR)</div>
<div class="card-desc">Full screen flashing thick red border + 64x64px large sensor icon</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<rect x="4" y="4" width="112" height="232" rx="20" stroke="#EF4444" stroke-width="4.5"
fill="none" />
<g transform="translate(28, 40)">
<rect x="2" y="2" width="32" height="58" rx="4" fill="none" stroke="#EF4444"
stroke-width="3.5" />
<rect x="42" y="12" width="14" height="42" rx="2" fill="none" stroke="#EF4444"
stroke-width="3" />
<circle cx="10" cy="32" r="3.5" fill="#EF4444" />
</g>
<text x="60" y="145" fill="#EF4444" font-family="system-ui, sans-serif" font-size="16"
font-weight="bold" text-anchor="middle">DOOR 01</text>
<text x="60" y="185" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="16"
font-weight="bold" text-anchor="middle">INTRUSION!</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
High-decibel motor and light alarms activated. Short press any key on the side or top of the
wristband to instantly dismiss the alarm and reset.
</div>
</div>
<div class="card">
<div class="card-title">13. Local Active Help SOS</div>
<div class="card-desc">Huge alarm light, preventing overflow via word wraps and size allocation</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000" />
<rect x="4" y="4" width="112" height="232" rx="20" stroke="#EF4444" stroke-width="4.5"
fill="none" />
<g transform="translate(28, 25)">
<path d="M 32 10 L 32 18 M 14 16 L 22 22 M 50 16 L 42 22 M 6 32 L 15 34 M 58 32 L 49 34"
stroke="#EF4444" stroke-width="3" stroke-linecap="round" />
<path d="M 12 52 C 12 28, 52 28, 52 52 Z" fill="#EF4444" stroke="#EF4444"
stroke-width="2" />
<circle cx="32" cy="45" r="7" fill="#FFFFFF" />
<rect x="6" y="52" width="52" height="8" rx="2" fill="#64748B" />
</g>
<text x="60" y="125" fill="#EF4444" font-family="system-ui, sans-serif" font-size="16"
font-weight="bold" text-anchor="middle">SOS</text>
<text x="60" y="152" fill="#EF4444" font-family="system-ui, sans-serif" font-size="16"
font-weight="bold" text-anchor="middle">SENT</text>
<text x="60" y="195" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="14"
font-weight="bold" text-anchor="middle">CALLING...</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>Button Operations:</b>
Continuously sends SOS distress signal. Short or long press any button to stop transmission and
clear the emergency distress.
</div>
</div>
</div>
</div>
</body>
</html>