From 718ed6e2ed21ad54c997c9cb2630e546985953ad Mon Sep 17 00:00:00 2001 From: QiuSW Date: Mon, 20 Jul 2026 22:39:52 +0800 Subject: [PATCH] docs: add interactive fall detection UI prototype --- docs/current-state.md | 2 +- docs/ui/2026-07-20-html-prototype-plan.md | 101 ++ docs/ui/silver-pose-v1-prototype.html | 1861 +++++++++++++++++++++ progress.md | 10 + 4 files changed, 1973 insertions(+), 1 deletion(-) create mode 100644 docs/ui/2026-07-20-html-prototype-plan.md create mode 100644 docs/ui/silver-pose-v1-prototype.html diff --git a/docs/current-state.md b/docs/current-state.md index 8bd802f..e87f9e5 100644 --- a/docs/current-state.md +++ b/docs/current-state.md @@ -10,7 +10,7 @@ - 旧生产基线：`demo/main.py`、`demo/fall_detection_gui.py`、`demo/detect_fall.py`、`demo/best.pt`。 - V1 代码：`v1/` 目录存在但尚无实现。 - V2 代码：`v2/` 目录存在但尚无实现。 -- 非代码设计工件：`docs/ui/silver-pose-ui-ux-spec.md` 已建立，定义客户演示的正常、确认摔倒和连接异常三种 UI 状态；等待用户审阅后才生成 HTML 原型，不改变 Phase 1 任务顺序。 +- 非代码设计工件：docs/ui/silver-pose-ui-ux-spec.md、docs/ui/2026-07-20-html-prototype-plan.md 与 docs/ui/silver-pose-v1-prototype.html 已建立。HTML 可离线演示正常、确认摔倒和连接异常三种 UI 状态；其中画面、事件和时间均为模拟数据，不连接真实摄像头、模型或网络，也不改变 Phase 1 任务顺序。 - 测试：暂无 pytest 测试；`python -m compileall -q demo` 已通过。 - 模型：`demo/best.pt` 可加载为 YOLO Pose，类别 `person`，`kpt_shape=[17, 3]`；与 `D:\PythonP\fall_detection\best.pt` 哈希一致。 - 当前标准启动：`./init.ps1`。 diff --git a/docs/ui/2026-07-20-html-prototype-plan.md b/docs/ui/2026-07-20-html-prototype-plan.md new file mode 100644 index 0000000..9eb7b5a --- /dev/null +++ b/docs/ui/2026-07-20-html-prototype-plan.md @@ -0,0 +1,101 @@ +# Silver Pose HTML UI Prototype Implementation Plan + +> **For agentic workers:** REQUIRED SKILL: Use `executing-plans` to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Create one offline HTML prototype that lets a customer switch between normal monitoring, confirmed-fall, and connection-error views without accessing a camera or model. + +**Architecture:** One self-contained HTML document holds semantic layout, CSS tokens, inline SVG scene, and a small state controller. The controller changes visible copy, status semantics, scene treatment, event evidence, and an idempotent demonstration dialog; it does not fetch data, access files, or claim to perform inference. + +**Tech Stack:** HTML5, CSS custom properties, inline SVG, vanilla JavaScript, Node.js 22 static syntax checks. + +--- + +## File structure + +| Path | Responsibility | +| --- | --- | +| `docs/ui/silver-pose-v1-prototype.html` | Offline, interactive customer-demo prototype. | +| `docs/ui/silver-pose-ui-ux-spec.md` | Approved interaction and accessibility source for the artifact. | +| `docs/current-state.md` | Records that the HTML prototype exists and remains a non-production design artifact. | +| `progress.md` | Appends exact validation evidence and handoff state. | + +### Task 1: Create and verify the standalone prototype + +**Files:** + +- Create: `docs/ui/silver-pose-v1-prototype.html` +- Modify: `docs/current-state.md` +- Modify: `progress.md` + +- [ ] **Step 1: Confirm the artifact does not pre-exist** + +Run: + +```powershell +if (Test-Path -LiteralPath docs/ui/silver-pose-v1-prototype.html) { + throw 'Prototype already exists; inspect it before overwriting.' +} +throw 'Expected initial failure: prototype file is missing.' +``` + +Expected: the command fails with `Expected initial failure: prototype file is missing.`. + +- [ ] **Step 2: Implement one semantic, offline page** + +Create the document with these state-controller names and controls: + +```html +
+ + + +
NORMAL
+ + +

确认摔倒

+ + +
+``` + +Implement `setDemoState(nextState)` in the only inline script. It must set `app.dataset.state`, update every switch button's `aria-pressed`, open `fall-dialog` only on the first entry to `confirmed`, reset that one-shot marker when leaving `confirmed`, and close the dialog on Escape. The complete page also needs CSS tokens from the approved specification; title/source/status area; visible text and icons in addition to color; a 16:9 inline SVG scene with person `P-017`; current event evidence; recent-event rows; reflow at 1008 px, 640 px and 600 px; `aria-live="polite"` announcements; and the text “演示数据，未连接真实摄像头或模型”. + +- [ ] **Step 3: Run static syntax and structure validation** + +Run: + +```powershell +node -e "const fs=require('fs'); const html=fs.readFileSync('docs/ui/silver-pose-v1-prototype.html','utf8'); const required=['data-state-target=\"normal\"','data-state-target=\"confirmed\"','data-state-target=\"offline\"','id=\"fall-dialog\"','id=\"acknowledge-button\"','aria-live=\"polite\"','@media (max-width: 640px)','@media (max-width: 1007px)']; for (const token of required) if (!html.includes(token)) throw new Error('missing '+token); const scripts=[...html.matchAll(/ + + diff --git a/progress.md b/progress.md index c123ee5..5145524 100644 --- a/progress.md +++ b/progress.md @@ -34,3 +34,13 @@ - 阻塞：等待用户审阅已提交的规格；未生成 HTML，未变更 `demo/`、`v1/` 或任务看板状态。 - 决策：原型为单页、无网络依赖的视觉与交互演示，使用虚构摄像头和事件数据，不表现为真实 RTSP 或模型推理。 - 下一步：用户确认规格后，创建 `docs/ui/silver-pose-v1-prototype.html` 并执行离线交互验收。 + +## 【2026-07-20】DESIGN 离线 HTML UI/UX 原型 + +- 状态：DONE +- 可视化验证：使用本机 Chrome 无界面模式实际渲染 1280 × 800、900 × 900、600 × 1000 三种窗口截图；宽屏与窄屏截图已人工检查，主操作可见，窄屏下右栏纵向重排，未见横向溢出。Chrome 对 file 页面返回非零退出码，但三张 PNG 均实际生成，故以文件与画面结果作为结论。 +- 变更：创建 docs/ui/silver-pose-v1-prototype.html 和实施计划 docs/ui/2026-07-20-html-prototype-plan.md。原型可在单页中通过按钮或数字键 1、2、3 切换正常监控、确认摔倒和连接异常；包含 16:9 模拟姿态画面、红色确认状态、一次性演示弹窗、报警/截图证据、最近事件、窄窗口重排、键盘焦点和屏幕阅读器状态提示。 +- 验证：Node.js 22 解析唯一内联脚本，并确认三种状态按钮、弹窗、确认按钮、aria-live 与 1007/640/600 epx 响应式断点存在，输出 prototype static validation passed；敏感与网络边界扫描未发现凭证、模型路径或网络行为标记；./init.ps1 通过。 +- 阻塞：无。该文件是离线视觉原型，已做静态和无界面浏览器布局验证，但不表示实时 RTSP、模型推理、声音播放或截图保存已实现。 +- 决策：原型采用单窗口深色控制台布局，以同一画面状态切换展示客户关心的“正常不报警、确认后完整报警闭环、断流不误报”三种结果。 +- 下一步：T-101；HTML 原型可作为后续 T-201 PyQt 界面实现的视觉与交互参考。