Refine finger mode UI: app wiring, style helpers, and panel layout

.VSCodeCounter/2026-06-28_22-27-28/details.md

@@ -0,0 +1,90 @@
+# Details
+
+Date : 2026-06-28 22:27:28
+
+Directory d:\\rust-ws\\eskin-player
+
+Total : 75 files,  8653 codes, 180 comments, 1313 blanks, all 10146 lines
+
+[Summary](results.md) / Details / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
+
+## Files
+| filename | language | code | comment | blank | total |
+| :--- | :--- | ---: | ---: | ---: | ---: |
+| [.openclaw/settings.json](/.openclaw/settings.json) | JSON with Comments | 35 | 0 | 0 | 35 |
+| [.scale/assets.json](/.scale/assets.json) | JSON | 4 | 0 | 1 | 5 |
+| [.scale/engineering-standards-baseline.json](/.scale/engineering-standards-baseline.json) | JSON | 6 | 0 | 1 | 7 |
+| [.scale/engineering-standards.json](/.scale/engineering-standards.json) | JSON | 67 | 0 | 1 | 68 |
+| [.scale/frameworks.json](/.scale/frameworks.json) | JSON | 23 | 0 | 1 | 24 |
+| [.scale/governance.lock.json](/.scale/governance.lock.json) | JSON | 200 | 0 | 1 | 201 |
+| [.scale/output-policy.json](/.scale/output-policy.json) | JSON | 72 | 0 | 1 | 73 |
+| [.scale/product-smoke.json](/.scale/product-smoke.json) | JSON | 33 | 0 | 1 | 34 |
+| [.scale/quality-contract.json](/.scale/quality-contract.json) | JSON | 70 | 0 | 1 | 71 |
+| [.scale/resource-policy.json](/.scale/resource-policy.json) | JSON | 39 | 0 | 1 | 40 |
+| [.scale/skills-registry.json](/.scale/skills-registry.json) | JSON | 82 | 0 | 1 | 83 |
+| [.scale/skills.json](/.scale/skills.json) | JSON | 630 | 0 | 1 | 631 |
+| [.scale/tools.json](/.scale/tools.json) | JSON | 118 | 0 | 1 | 119 |
+| [.scale/verification.json](/.scale/verification.json) | JSON | 35 | 0 | 1 | 36 |
+| [.scale/workflow.json](/.scale/workflow.json) | JSON | 51 | 0 | 1 | 52 |
+| [AGENTS.md](/AGENTS.md) | Markdown | 21 | 0 | 6 | 27 |
+| [README.md](/README.md) | Markdown | 33 | 0 | 10 | 43 |
+| [TOOLS.md](/TOOLS.md) | Markdown | 56 | 0 | 6 | 62 |
+| [build.rs](/build.rs) | Rust | 24 | 0 | 10 | 34 |
+| [docs/workflow/QUALITY\_CONTRACT.md](/docs/workflow/QUALITY_CONTRACT.md) | Markdown | 28 | 0 | 8 | 36 |
+| [docs/workflow/README.md](/docs/workflow/README.md) | Markdown | 143 | 0 | 45 | 188 |
+| [docs/workflow/templates/api-contract.md](/docs/workflow/templates/api-contract.md) | Markdown | 15 | 0 | 15 | 30 |
+| [docs/workflow/templates/architecture-review.md](/docs/workflow/templates/architecture-review.md) | Markdown | 15 | 0 | 9 | 24 |
+| [docs/workflow/templates/db-change-plan.md](/docs/workflow/templates/db-change-plan.md) | Markdown | 11 | 0 | 10 | 21 |
+| [docs/workflow/templates/docs-impact.md](/docs/workflow/templates/docs-impact.md) | Markdown | 9 | 0 | 9 | 18 |
+| [docs/workflow/templates/e2e-plan.md](/docs/workflow/templates/e2e-plan.md) | Markdown | 11 | 0 | 10 | 21 |
+| [docs/workflow/templates/explore.md](/docs/workflow/templates/explore.md) | Markdown | 11 | 0 | 10 | 21 |
+| [docs/workflow/templates/github-actions-scale-preflight.yml](/docs/workflow/templates/github-actions-scale-preflight.yml) | YAML | 27 | 0 | 6 | 33 |
+| [docs/workflow/templates/mini-prd.md](/docs/workflow/templates/mini-prd.md) | Markdown | 23 | 0 | 20 | 43 |
+| [docs/workflow/templates/plan.md](/docs/workflow/templates/plan.md) | Markdown | 17 | 0 | 12 | 29 |
+| [docs/workflow/templates/pre-push-scale-preflight.sh](/docs/workflow/templates/pre-push-scale-preflight.sh) | Shell Script | 6 | 1 | 2 | 9 |
+| [docs/workflow/templates/product-smoke.md](/docs/workflow/templates/product-smoke.md) | Markdown | 44 | 0 | 18 | 62 |
+| [docs/workflow/templates/reality-check.md](/docs/workflow/templates/reality-check.md) | Markdown | 13 | 0 | 13 | 26 |
+| [docs/workflow/templates/resource-cleanup.md](/docs/workflow/templates/resource-cleanup.md) | Markdown | 10 | 0 | 5 | 15 |
+| [docs/workflow/templates/resource-impact.md](/docs/workflow/templates/resource-impact.md) | Markdown | 15 | 0 | 11 | 26 |
+| [docs/workflow/templates/review.md](/docs/workflow/templates/review.md) | Markdown | 9 | 0 | 8 | 17 |
+| [docs/workflow/templates/runtime.md](/docs/workflow/templates/runtime.md) | Markdown | 15 | 0 | 7 | 22 |
+| [docs/workflow/templates/security-review.md](/docs/workflow/templates/security-review.md) | Markdown | 15 | 0 | 12 | 27 |
+| [docs/workflow/templates/skill-evidence.md](/docs/workflow/templates/skill-evidence.md) | Markdown | 21 | 0 | 13 | 34 |
+| [docs/workflow/templates/skill-plan.md](/docs/workflow/templates/skill-plan.md) | Markdown | 25 | 0 | 15 | 40 |
+| [docs/workflow/templates/standards-impact.md](/docs/workflow/templates/standards-impact.md) | Markdown | 20 | 0 | 9 | 29 |
+| [docs/workflow/templates/summary.md](/docs/workflow/templates/summary.md) | Markdown | 11 | 0 | 9 | 20 |
+| [docs/workflow/templates/ui-spec.md](/docs/workflow/templates/ui-spec.md) | Markdown | 17 | 0 | 13 | 30 |
+| [docs/workflow/templates/verification.md](/docs/workflow/templates/verification.md) | Markdown | 11 | 0 | 8 | 19 |
+| [docs/workflow/templates/visual-review.md](/docs/workflow/templates/visual-review.md) | Markdown | 11 | 0 | 10 | 21 |
+| [docs/worklog/metrics.md](/docs/worklog/metrics.md) | Markdown | 15 | 2 | 12 | 29 |
+| [render.md](/render.md) | Markdown | 631 | 0 | 236 | 867 |
+| [scripts/gates/all.sh](/scripts/gates/all.sh) | Shell Script | 43 | 2 | 10 | 55 |
+| [scripts/qa/product-smoke.ps1](/scripts/qa/product-smoke.ps1) | PowerShell | 94 | 1 | 13 | 108 |
+| [scripts/qa/product-smoke.sh](/scripts/qa/product-smoke.sh) | Shell Script | 86 | 1 | 12 | 99 |
+| [scripts/tests/run.sh](/scripts/tests/run.sh) | Shell Script | 6 | 2 | 1 | 9 |
+| [scripts/validate-config.sh](/scripts/validate-config.sh) | Shell Script | 53 | 2 | 11 | 66 |
+| [scripts/workflow/verify.sh](/scripts/workflow/verify.sh) | Shell Script | 17 | 6 | 7 | 30 |
+| [src/app.rs](/src/app.rs) | Rust | 330 | 12 | 39 | 381 |
+| [src/connection.rs](/src/connection.rs) | Rust | 153 | 11 | 26 | 190 |
+| [src/main.rs](/src/main.rs) | Rust | 30 | 0 | 4 | 34 |
+| [src/matrix.rs](/src/matrix.rs) | Rust | 101 | 0 | 10 | 111 |
+| [src/model.rs](/src/model.rs) | Rust | 170 | 7 | 19 | 196 |
+| [src/recording.rs](/src/recording.rs) | Rust | 324 | 52 | 69 | 445 |
+| [src/render.rs](/src/render.rs) | Rust | 855 | 8 | 61 | 924 |
+| [src/resources.rs](/src/resources.rs) | Rust | 937 | 0 | 71 | 1,008 |
+| [src/serial\_core/codec.rs](/src/serial_core/codec.rs) | Rust | 6 | 0 | 2 | 8 |
+| [src/serial\_core/codecs/mod.rs](/src/serial_core/codecs/mod.rs) | Rust | 1 | 0 | 1 | 2 |
+| [src/serial\_core/codecs/tactile\_a.rs](/src/serial_core/codecs/tactile_a.rs) | Rust | 163 | 1 | 21 | 185 |
+| [src/serial\_core/error.rs](/src/serial_core/error.rs) | Rust | 45 | 0 | 7 | 52 |
+| [src/serial\_core/frame.rs](/src/serial_core/frame.rs) | Rust | 32 | 0 | 5 | 37 |
+| [src/serial\_core/mod.rs](/src/serial_core/mod.rs) | Rust | 6 | 0 | 1 | 7 |
+| [src/serial\_core/serial.rs](/src/serial_core/serial.rs) | Rust | 78 | 7 | 12 | 97 |
+| [src/serial\_core/utils.rs](/src/serial_core/utils.rs) | Rust | 8 | 0 | 3 | 11 |
+| [src/style.rs](/src/style.rs) | Rust | 283 | 0 | 37 | 320 |
+| [src/texture.rs](/src/texture.rs) | Rust | 231 | 0 | 21 | 252 |
+| [src/theme.rs](/src/theme.rs) | Rust | 149 | 1 | 19 | 169 |
+| [src/ui.rs](/src/ui.rs) | Rust | 1,088 | 57 | 123 | 1,268 |
+| [src/utils.rs](/src/utils.rs) | Rust | 10 | 0 | 2 | 12 |
+| [static/wgsl/shader.wgsl](/static/wgsl/shader.wgsl) | WGSL | 556 | 7 | 105 | 668 |
+
+[Summary](results.md) / Details / [Diff Summary](diff.md) / [Diff Details](diff-details.md)

.VSCodeCounter/2026-06-28_22-27-28/diff-details.md

@@ -0,0 +1,15 @@
+# Diff Details
+
+Date : 2026-06-28 22:27:28
+
+Directory d:\\rust-ws\\eskin-player
+
+Total : 0 files,  0 codes, 0 comments, 0 blanks, all 0 lines
+
+[Summary](results.md) / [Details](details.md) / [Diff Summary](diff.md) / Diff Details
+
+## Files
+| filename | language | code | comment | blank | total |
+| :--- | :--- | ---: | ---: | ---: | ---: |
+
+[Summary](results.md) / [Details](details.md) / [Diff Summary](diff.md) / Diff Details

.VSCodeCounter/2026-06-28_22-27-28/diff.csv

@@ -0,0 +1,2 @@
+"filename", "language", "", "comment", "blank", "total"
+"Total", "-", , 0, 0, 0

.VSCodeCounter/2026-06-28_22-27-28/diff.md

@@ -0,0 +1,19 @@
+# Diff Summary
+
+Date : 2026-06-28 22:27:28
+
+Directory d:\\rust-ws\\eskin-player
+
+Total : 0 files,  0 codes, 0 comments, 0 blanks, all 0 lines
+
+[Summary](results.md) / [Details](details.md) / Diff Summary / [Diff Details](diff-details.md)
+
+## Languages
+| language | files | code | comment | blank | total |
+| :--- | ---: | ---: | ---: | ---: | ---: |
+
+## Directories
+| path | files | code | comment | blank | total |
+| :--- | ---: | ---: | ---: | ---: | ---: |
+
+[Summary](results.md) / [Details](details.md) / Diff Summary / [Diff Details](diff-details.md)

.VSCodeCounter/2026-06-28_22-27-28/diff.txt

@@ -0,0 +1,22 @@
+Date : 2026-06-28 22:27:28
+Directory : d:\rust-ws\eskin-player
+Total : 0 files,  0 codes, 0 comments, 0 blanks, all 0 lines
+
+Languages
++----------+------------+------------+------------+------------+------------+
+| language | files      | code       | comment    | blank      | total      |
++----------+------------+------------+------------+------------+------------+
++----------+------------+------------+------------+------------+------------+
+
+Directories
++------+------------+------------+------------+------------+------------+
+| path | files      | code       | comment    | blank      | total      |
++------+------------+------------+------------+------------+------------+
++------+------------+------------+------------+------------+------------+
+
+Files
++----------+----------+------------+------------+------------+------------+
+| filename | language | code       | comment    | blank      | total      |
++----------+----------+------------+------------+------------+------------+
+| Total    |          |          0 |          0 |          0 |          0 |
++----------+----------+------------+------------+------------+------------+

.VSCodeCounter/2026-06-28_22-27-28/results.csv

@@ -0,0 +1,77 @@
+"filename", "language", "Rust", "Markdown", "JSON", "JSON with Comments", "Shell Script", "WGSL", "PowerShell", "YAML", "comment", "blank", "total"
+"d:\rust-ws\eskin-player\.openclaw\settings.json", "JSON with Comments", 0, 0, 0, 35, 0, 0, 0, 0, 0, 0, 35
+"d:\rust-ws\eskin-player\.scale\assets.json", "JSON", 0, 0, 4, 0, 0, 0, 0, 0, 0, 1, 5
+"d:\rust-ws\eskin-player\.scale\engineering-standards-baseline.json", "JSON", 0, 0, 6, 0, 0, 0, 0, 0, 0, 1, 7
+"d:\rust-ws\eskin-player\.scale\engineering-standards.json", "JSON", 0, 0, 67, 0, 0, 0, 0, 0, 0, 1, 68
+"d:\rust-ws\eskin-player\.scale\frameworks.json", "JSON", 0, 0, 23, 0, 0, 0, 0, 0, 0, 1, 24
+"d:\rust-ws\eskin-player\.scale\governance.lock.json", "JSON", 0, 0, 200, 0, 0, 0, 0, 0, 0, 1, 201
+"d:\rust-ws\eskin-player\.scale\output-policy.json", "JSON", 0, 0, 72, 0, 0, 0, 0, 0, 0, 1, 73
+"d:\rust-ws\eskin-player\.scale\product-smoke.json", "JSON", 0, 0, 33, 0, 0, 0, 0, 0, 0, 1, 34
+"d:\rust-ws\eskin-player\.scale\quality-contract.json", "JSON", 0, 0, 70, 0, 0, 0, 0, 0, 0, 1, 71
+"d:\rust-ws\eskin-player\.scale\resource-policy.json", "JSON", 0, 0, 39, 0, 0, 0, 0, 0, 0, 1, 40
+"d:\rust-ws\eskin-player\.scale\skills-registry.json", "JSON", 0, 0, 82, 0, 0, 0, 0, 0, 0, 1, 83
+"d:\rust-ws\eskin-player\.scale\skills.json", "JSON", 0, 0, 630, 0, 0, 0, 0, 0, 0, 1, 631
+"d:\rust-ws\eskin-player\.scale\tools.json", "JSON", 0, 0, 118, 0, 0, 0, 0, 0, 0, 1, 119
+"d:\rust-ws\eskin-player\.scale\verification.json", "JSON", 0, 0, 35, 0, 0, 0, 0, 0, 0, 1, 36
+"d:\rust-ws\eskin-player\.scale\workflow.json", "JSON", 0, 0, 51, 0, 0, 0, 0, 0, 0, 1, 52
+"d:\rust-ws\eskin-player\AGENTS.md", "Markdown", 0, 21, 0, 0, 0, 0, 0, 0, 0, 6, 27
+"d:\rust-ws\eskin-player\README.md", "Markdown", 0, 33, 0, 0, 0, 0, 0, 0, 0, 10, 43
+"d:\rust-ws\eskin-player\TOOLS.md", "Markdown", 0, 56, 0, 0, 0, 0, 0, 0, 0, 6, 62
+"d:\rust-ws\eskin-player\build.rs", "Rust", 24, 0, 0, 0, 0, 0, 0, 0, 0, 10, 34
+"d:\rust-ws\eskin-player\docs\workflow\QUALITY_CONTRACT.md", "Markdown", 0, 28, 0, 0, 0, 0, 0, 0, 0, 8, 36
+"d:\rust-ws\eskin-player\docs\workflow\README.md", "Markdown", 0, 143, 0, 0, 0, 0, 0, 0, 0, 45, 188
+"d:\rust-ws\eskin-player\docs\workflow\templates\api-contract.md", "Markdown", 0, 15, 0, 0, 0, 0, 0, 0, 0, 15, 30
+"d:\rust-ws\eskin-player\docs\workflow\templates\architecture-review.md", "Markdown", 0, 15, 0, 0, 0, 0, 0, 0, 0, 9, 24
+"d:\rust-ws\eskin-player\docs\workflow\templates\db-change-plan.md", "Markdown", 0, 11, 0, 0, 0, 0, 0, 0, 0, 10, 21
+"d:\rust-ws\eskin-player\docs\workflow\templates\docs-impact.md", "Markdown", 0, 9, 0, 0, 0, 0, 0, 0, 0, 9, 18
+"d:\rust-ws\eskin-player\docs\workflow\templates\e2e-plan.md", "Markdown", 0, 11, 0, 0, 0, 0, 0, 0, 0, 10, 21
+"d:\rust-ws\eskin-player\docs\workflow\templates\explore.md", "Markdown", 0, 11, 0, 0, 0, 0, 0, 0, 0, 10, 21
+"d:\rust-ws\eskin-player\docs\workflow\templates\github-actions-scale-preflight.yml", "YAML", 0, 0, 0, 0, 0, 0, 0, 27, 0, 6, 33
+"d:\rust-ws\eskin-player\docs\workflow\templates\mini-prd.md", "Markdown", 0, 23, 0, 0, 0, 0, 0, 0, 0, 20, 43
+"d:\rust-ws\eskin-player\docs\workflow\templates\plan.md", "Markdown", 0, 17, 0, 0, 0, 0, 0, 0, 0, 12, 29
+"d:\rust-ws\eskin-player\docs\workflow\templates\pre-push-scale-preflight.sh", "Shell Script", 0, 0, 0, 0, 6, 0, 0, 0, 1, 2, 9
+"d:\rust-ws\eskin-player\docs\workflow\templates\product-smoke.md", "Markdown", 0, 44, 0, 0, 0, 0, 0, 0, 0, 18, 62
+"d:\rust-ws\eskin-player\docs\workflow\templates\reality-check.md", "Markdown", 0, 13, 0, 0, 0, 0, 0, 0, 0, 13, 26
+"d:\rust-ws\eskin-player\docs\workflow\templates\resource-cleanup.md", "Markdown", 0, 10, 0, 0, 0, 0, 0, 0, 0, 5, 15
+"d:\rust-ws\eskin-player\docs\workflow\templates\resource-impact.md", "Markdown", 0, 15, 0, 0, 0, 0, 0, 0, 0, 11, 26
+"d:\rust-ws\eskin-player\docs\workflow\templates\review.md", "Markdown", 0, 9, 0, 0, 0, 0, 0, 0, 0, 8, 17
+"d:\rust-ws\eskin-player\docs\workflow\templates\runtime.md", "Markdown", 0, 15, 0, 0, 0, 0, 0, 0, 0, 7, 22
+"d:\rust-ws\eskin-player\docs\workflow\templates\security-review.md", "Markdown", 0, 15, 0, 0, 0, 0, 0, 0, 0, 12, 27
+"d:\rust-ws\eskin-player\docs\workflow\templates\skill-evidence.md", "Markdown", 0, 21, 0, 0, 0, 0, 0, 0, 0, 13, 34
+"d:\rust-ws\eskin-player\docs\workflow\templates\skill-plan.md", "Markdown", 0, 25, 0, 0, 0, 0, 0, 0, 0, 15, 40
+"d:\rust-ws\eskin-player\docs\workflow\templates\standards-impact.md", "Markdown", 0, 20, 0, 0, 0, 0, 0, 0, 0, 9, 29
+"d:\rust-ws\eskin-player\docs\workflow\templates\summary.md", "Markdown", 0, 11, 0, 0, 0, 0, 0, 0, 0, 9, 20
+"d:\rust-ws\eskin-player\docs\workflow\templates\ui-spec.md", "Markdown", 0, 17, 0, 0, 0, 0, 0, 0, 0, 13, 30
+"d:\rust-ws\eskin-player\docs\workflow\templates\verification.md", "Markdown", 0, 11, 0, 0, 0, 0, 0, 0, 0, 8, 19
+"d:\rust-ws\eskin-player\docs\workflow\templates\visual-review.md", "Markdown", 0, 11, 0, 0, 0, 0, 0, 0, 0, 10, 21
+"d:\rust-ws\eskin-player\docs\worklog\metrics.md", "Markdown", 0, 15, 0, 0, 0, 0, 0, 0, 2, 12, 29
+"d:\rust-ws\eskin-player\render.md", "Markdown", 0, 631, 0, 0, 0, 0, 0, 0, 0, 236, 867
+"d:\rust-ws\eskin-player\scripts\gates\all.sh", "Shell Script", 0, 0, 0, 0, 43, 0, 0, 0, 2, 10, 55
+"d:\rust-ws\eskin-player\scripts\qa\product-smoke.ps1", "PowerShell", 0, 0, 0, 0, 0, 0, 94, 0, 1, 13, 108
+"d:\rust-ws\eskin-player\scripts\qa\product-smoke.sh", "Shell Script", 0, 0, 0, 0, 86, 0, 0, 0, 1, 12, 99
+"d:\rust-ws\eskin-player\scripts\tests\run.sh", "Shell Script", 0, 0, 0, 0, 6, 0, 0, 0, 2, 1, 9
+"d:\rust-ws\eskin-player\scripts\validate-config.sh", "Shell Script", 0, 0, 0, 0, 53, 0, 0, 0, 2, 11, 66
+"d:\rust-ws\eskin-player\scripts\workflow\verify.sh", "Shell Script", 0, 0, 0, 0, 17, 0, 0, 0, 6, 7, 30
+"d:\rust-ws\eskin-player\src\app.rs", "Rust", 330, 0, 0, 0, 0, 0, 0, 0, 12, 39, 381
+"d:\rust-ws\eskin-player\src\connection.rs", "Rust", 153, 0, 0, 0, 0, 0, 0, 0, 11, 26, 190
+"d:\rust-ws\eskin-player\src\main.rs", "Rust", 30, 0, 0, 0, 0, 0, 0, 0, 0, 4, 34
+"d:\rust-ws\eskin-player\src\matrix.rs", "Rust", 101, 0, 0, 0, 0, 0, 0, 0, 0, 10, 111
+"d:\rust-ws\eskin-player\src\model.rs", "Rust", 170, 0, 0, 0, 0, 0, 0, 0, 7, 19, 196
+"d:\rust-ws\eskin-player\src\recording.rs", "Rust", 324, 0, 0, 0, 0, 0, 0, 0, 52, 69, 445
+"d:\rust-ws\eskin-player\src\render.rs", "Rust", 855, 0, 0, 0, 0, 0, 0, 0, 8, 61, 924
+"d:\rust-ws\eskin-player\src\resources.rs", "Rust", 937, 0, 0, 0, 0, 0, 0, 0, 0, 71, 1008
+"d:\rust-ws\eskin-player\src\serial_core\codec.rs", "Rust", 6, 0, 0, 0, 0, 0, 0, 0, 0, 2, 8
+"d:\rust-ws\eskin-player\src\serial_core\codecs\mod.rs", "Rust", 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2
+"d:\rust-ws\eskin-player\src\serial_core\codecs\tactile_a.rs", "Rust", 163, 0, 0, 0, 0, 0, 0, 0, 1, 21, 185
+"d:\rust-ws\eskin-player\src\serial_core\error.rs", "Rust", 45, 0, 0, 0, 0, 0, 0, 0, 0, 7, 52
+"d:\rust-ws\eskin-player\src\serial_core\frame.rs", "Rust", 32, 0, 0, 0, 0, 0, 0, 0, 0, 5, 37
+"d:\rust-ws\eskin-player\src\serial_core\mod.rs", "Rust", 6, 0, 0, 0, 0, 0, 0, 0, 0, 1, 7
+"d:\rust-ws\eskin-player\src\serial_core\serial.rs", "Rust", 78, 0, 0, 0, 0, 0, 0, 0, 7, 12, 97
+"d:\rust-ws\eskin-player\src\serial_core\utils.rs", "Rust", 8, 0, 0, 0, 0, 0, 0, 0, 0, 3, 11
+"d:\rust-ws\eskin-player\src\style.rs", "Rust", 283, 0, 0, 0, 0, 0, 0, 0, 0, 37, 320
+"d:\rust-ws\eskin-player\src\texture.rs", "Rust", 231, 0, 0, 0, 0, 0, 0, 0, 0, 21, 252
+"d:\rust-ws\eskin-player\src\theme.rs", "Rust", 149, 0, 0, 0, 0, 0, 0, 0, 1, 19, 169
+"d:\rust-ws\eskin-player\src\ui.rs", "Rust", 1088, 0, 0, 0, 0, 0, 0, 0, 57, 123, 1268
+"d:\rust-ws\eskin-player\src\utils.rs", "Rust", 10, 0, 0, 0, 0, 0, 0, 0, 0, 2, 12
+"d:\rust-ws\eskin-player\static\wgsl\shader.wgsl", "WGSL", 0, 0, 0, 0, 0, 556, 0, 0, 7, 105, 668
+"Total", "-", 5024, 1276, 1430, 35, 211, 556, 94, 27, 180, 1313, 10146

.VSCodeCounter/2026-06-28_22-27-28/results.md

@@ -0,0 +1,49 @@
+# Summary
+
+Date : 2026-06-28 22:27:28
+
+Directory d:\\rust-ws\\eskin-player
+
+Total : 75 files,  8653 codes, 180 comments, 1313 blanks, all 10146 lines
+
+Summary / [Details](details.md) / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
+
+## Languages
+| language | files | code | comment | blank | total |
+| :--- | ---: | ---: | ---: | ---: | ---: |
+| Rust | 22 | 5,024 | 156 | 563 | 5,743 |
+| JSON | 14 | 1,430 | 0 | 14 | 1,444 |
+| Markdown | 29 | 1,276 | 2 | 569 | 1,847 |
+| WGSL | 1 | 556 | 7 | 105 | 668 |
+| Shell Script | 6 | 211 | 14 | 43 | 268 |
+| PowerShell | 1 | 94 | 1 | 13 | 108 |
+| JSON with Comments | 1 | 35 | 0 | 0 | 35 |
+| YAML | 1 | 27 | 0 | 6 | 33 |
+
+## Directories
+| path | files | code | comment | blank | total |
+| :--- | ---: | ---: | ---: | ---: | ---: |
+| . | 75 | 8,653 | 180 | 1,313 | 10,146 |
+| . (Files) | 5 | 765 | 0 | 268 | 1,033 |
+| .openclaw | 1 | 35 | 0 | 0 | 35 |
+| .scale | 14 | 1,430 | 0 | 14 | 1,444 |
+| docs | 27 | 568 | 3 | 319 | 890 |
+| docs\\workflow | 26 | 553 | 1 | 307 | 861 |
+| docs\\workflow (Files) | 2 | 171 | 0 | 53 | 224 |
+| docs\\workflow\\templates | 24 | 382 | 1 | 254 | 637 |
+| docs\\worklog | 1 | 15 | 2 | 12 | 29 |
+| scripts | 6 | 299 | 14 | 54 | 367 |
+| scripts (Files) | 1 | 53 | 2 | 11 | 66 |
+| scripts\\gates | 1 | 43 | 2 | 10 | 55 |
+| scripts\\qa | 2 | 180 | 2 | 25 | 207 |
+| scripts\\tests | 1 | 6 | 2 | 1 | 9 |
+| scripts\\workflow | 1 | 17 | 6 | 7 | 30 |
+| src | 21 | 5,000 | 156 | 553 | 5,709 |
+| src (Files) | 13 | 4,661 | 148 | 501 | 5,310 |
+| src\\serial_core | 8 | 339 | 8 | 52 | 399 |
+| src\\serial_core (Files) | 6 | 175 | 7 | 30 | 212 |
+| src\\serial_core\\codecs | 2 | 164 | 1 | 22 | 187 |
+| static | 1 | 556 | 7 | 105 | 668 |
+| static\\wgsl | 1 | 556 | 7 | 105 | 668 |
+
+Summary / [Details](details.md) / [Diff Summary](diff.md) / [Diff Details](diff-details.md)

.VSCodeCounter/2026-06-28_22-27-28/results.txt

@@ -0,0 +1,127 @@
+Date : 2026-06-28 22:27:28
+Directory : d:\rust-ws\eskin-player
+Total : 75 files,  8653 codes, 180 comments, 1313 blanks, all 10146 lines
+
+Languages
++--------------------+------------+------------+------------+------------+------------+
+| language           | files      | code       | comment    | blank      | total      |
++--------------------+------------+------------+------------+------------+------------+
+| Rust               |         22 |      5,024 |        156 |        563 |      5,743 |
+| JSON               |         14 |      1,430 |          0 |         14 |      1,444 |
+| Markdown           |         29 |      1,276 |          2 |        569 |      1,847 |
+| WGSL               |          1 |        556 |          7 |        105 |        668 |
+| Shell Script       |          6 |        211 |         14 |         43 |        268 |
+| PowerShell         |          1 |         94 |          1 |         13 |        108 |
+| JSON with Comments |          1 |         35 |          0 |          0 |         35 |
+| YAML               |          1 |         27 |          0 |          6 |         33 |
++--------------------+------------+------------+------------+------------+------------+
+
+Directories
++------------------------------------------------------------------------------------+------------+------------+------------+------------+------------+
+| path                                                                               | files      | code       | comment    | blank      | total      |
++------------------------------------------------------------------------------------+------------+------------+------------+------------+------------+
+| .                                                                                  |         75 |      8,653 |        180 |      1,313 |     10,146 |
+| . (Files)                                                                          |          5 |        765 |          0 |        268 |      1,033 |
+| .openclaw                                                                          |          1 |         35 |          0 |          0 |         35 |
+| .scale                                                                             |         14 |      1,430 |          0 |         14 |      1,444 |
+| docs                                                                               |         27 |        568 |          3 |        319 |        890 |
+| docs\workflow                                                                      |         26 |        553 |          1 |        307 |        861 |
+| docs\workflow (Files)                                                              |          2 |        171 |          0 |         53 |        224 |
+| docs\workflow\templates                                                            |         24 |        382 |          1 |        254 |        637 |
+| docs\worklog                                                                       |          1 |         15 |          2 |         12 |         29 |
+| scripts                                                                            |          6 |        299 |         14 |         54 |        367 |
+| scripts (Files)                                                                    |          1 |         53 |          2 |         11 |         66 |
+| scripts\gates                                                                      |          1 |         43 |          2 |         10 |         55 |
+| scripts\qa                                                                         |          2 |        180 |          2 |         25 |        207 |
+| scripts\tests                                                                      |          1 |          6 |          2 |          1 |          9 |
+| scripts\workflow                                                                   |          1 |         17 |          6 |          7 |         30 |
+| src                                                                                |         21 |      5,000 |        156 |        553 |      5,709 |
+| src (Files)                                                                        |         13 |      4,661 |        148 |        501 |      5,310 |
+| src\serial_core                                                                    |          8 |        339 |          8 |         52 |        399 |
+| src\serial_core (Files)                                                            |          6 |        175 |          7 |         30 |        212 |
+| src\serial_core\codecs                                                             |          2 |        164 |          1 |         22 |        187 |
+| static                                                                             |          1 |        556 |          7 |        105 |        668 |
+| static\wgsl                                                                        |          1 |        556 |          7 |        105 |        668 |
++------------------------------------------------------------------------------------+------------+------------+------------+------------+------------+
+
+Files
++------------------------------------------------------------------------------------+--------------------+------------+------------+------------+------------+
+| filename                                                                           | language           | code       | comment    | blank      | total      |
++------------------------------------------------------------------------------------+--------------------+------------+------------+------------+------------+
+| d:\rust-ws\eskin-player\.openclaw\settings.json                                    | JSON with Comments |         35 |          0 |          0 |         35 |
+| d:\rust-ws\eskin-player\.scale\assets.json                                         | JSON               |          4 |          0 |          1 |          5 |
+| d:\rust-ws\eskin-player\.scale\engineering-standards-baseline.json                 | JSON               |          6 |          0 |          1 |          7 |
+| d:\rust-ws\eskin-player\.scale\engineering-standards.json                          | JSON               |         67 |          0 |          1 |         68 |
+| d:\rust-ws\eskin-player\.scale\frameworks.json                                     | JSON               |         23 |          0 |          1 |         24 |
+| d:\rust-ws\eskin-player\.scale\governance.lock.json                                | JSON               |        200 |          0 |          1 |        201 |
+| d:\rust-ws\eskin-player\.scale\output-policy.json                                  | JSON               |         72 |          0 |          1 |         73 |
+| d:\rust-ws\eskin-player\.scale\product-smoke.json                                  | JSON               |         33 |          0 |          1 |         34 |
+| d:\rust-ws\eskin-player\.scale\quality-contract.json                               | JSON               |         70 |          0 |          1 |         71 |
+| d:\rust-ws\eskin-player\.scale\resource-policy.json                                | JSON               |         39 |          0 |          1 |         40 |
+| d:\rust-ws\eskin-player\.scale\skills-registry.json                                | JSON               |         82 |          0 |          1 |         83 |
+| d:\rust-ws\eskin-player\.scale\skills.json                                         | JSON               |        630 |          0 |          1 |        631 |
+| d:\rust-ws\eskin-player\.scale\tools.json                                          | JSON               |        118 |          0 |          1 |        119 |
+| d:\rust-ws\eskin-player\.scale\verification.json                                   | JSON               |         35 |          0 |          1 |         36 |
+| d:\rust-ws\eskin-player\.scale\workflow.json                                       | JSON               |         51 |          0 |          1 |         52 |
+| d:\rust-ws\eskin-player\AGENTS.md                                                  | Markdown           |         21 |          0 |          6 |         27 |
+| d:\rust-ws\eskin-player\README.md                                                  | Markdown           |         33 |          0 |         10 |         43 |
+| d:\rust-ws\eskin-player\TOOLS.md                                                   | Markdown           |         56 |          0 |          6 |         62 |
+| d:\rust-ws\eskin-player\build.rs                                                   | Rust               |         24 |          0 |         10 |         34 |
+| d:\rust-ws\eskin-player\docs\workflow\QUALITY_CONTRACT.md                          | Markdown           |         28 |          0 |          8 |         36 |
+| d:\rust-ws\eskin-player\docs\workflow\README.md                                    | Markdown           |        143 |          0 |         45 |        188 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\api-contract.md                    | Markdown           |         15 |          0 |         15 |         30 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\architecture-review.md             | Markdown           |         15 |          0 |          9 |         24 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\db-change-plan.md                  | Markdown           |         11 |          0 |         10 |         21 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\docs-impact.md                     | Markdown           |          9 |          0 |          9 |         18 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\e2e-plan.md                        | Markdown           |         11 |          0 |         10 |         21 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\explore.md                         | Markdown           |         11 |          0 |         10 |         21 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\github-actions-scale-preflight.yml | YAML               |         27 |          0 |          6 |         33 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\mini-prd.md                        | Markdown           |         23 |          0 |         20 |         43 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\plan.md                            | Markdown           |         17 |          0 |         12 |         29 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\pre-push-scale-preflight.sh        | Shell Script       |          6 |          1 |          2 |          9 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\product-smoke.md                   | Markdown           |         44 |          0 |         18 |         62 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\reality-check.md                   | Markdown           |         13 |          0 |         13 |         26 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\resource-cleanup.md                | Markdown           |         10 |          0 |          5 |         15 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\resource-impact.md                 | Markdown           |         15 |          0 |         11 |         26 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\review.md                          | Markdown           |          9 |          0 |          8 |         17 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\runtime.md                         | Markdown           |         15 |          0 |          7 |         22 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\security-review.md                 | Markdown           |         15 |          0 |         12 |         27 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\skill-evidence.md                  | Markdown           |         21 |          0 |         13 |         34 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\skill-plan.md                      | Markdown           |         25 |          0 |         15 |         40 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\standards-impact.md                | Markdown           |         20 |          0 |          9 |         29 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\summary.md                         | Markdown           |         11 |          0 |          9 |         20 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\ui-spec.md                         | Markdown           |         17 |          0 |         13 |         30 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\verification.md                    | Markdown           |         11 |          0 |          8 |         19 |
+| d:\rust-ws\eskin-player\docs\workflow\templates\visual-review.md                   | Markdown           |         11 |          0 |         10 |         21 |
+| d:\rust-ws\eskin-player\docs\worklog\metrics.md                                    | Markdown           |         15 |          2 |         12 |         29 |
+| d:\rust-ws\eskin-player\render.md                                                  | Markdown           |        631 |          0 |        236 |        867 |
+| d:\rust-ws\eskin-player\scripts\gates\all.sh                                       | Shell Script       |         43 |          2 |         10 |         55 |
+| d:\rust-ws\eskin-player\scripts\qa\product-smoke.ps1                               | PowerShell         |         94 |          1 |         13 |        108 |
+| d:\rust-ws\eskin-player\scripts\qa\product-smoke.sh                                | Shell Script       |         86 |          1 |         12 |         99 |
+| d:\rust-ws\eskin-player\scripts\tests\run.sh                                       | Shell Script       |          6 |          2 |          1 |          9 |
+| d:\rust-ws\eskin-player\scripts\validate-config.sh                                 | Shell Script       |         53 |          2 |         11 |         66 |
+| d:\rust-ws\eskin-player\scripts\workflow\verify.sh                                 | Shell Script       |         17 |          6 |          7 |         30 |
+| d:\rust-ws\eskin-player\src\app.rs                                                 | Rust               |        330 |         12 |         39 |        381 |
+| d:\rust-ws\eskin-player\src\connection.rs                                          | Rust               |        153 |         11 |         26 |        190 |
+| d:\rust-ws\eskin-player\src\main.rs                                                | Rust               |         30 |          0 |          4 |         34 |
+| d:\rust-ws\eskin-player\src\matrix.rs                                              | Rust               |        101 |          0 |         10 |        111 |
+| d:\rust-ws\eskin-player\src\model.rs                                               | Rust               |        170 |          7 |         19 |        196 |
+| d:\rust-ws\eskin-player\src\recording.rs                                           | Rust               |        324 |         52 |         69 |        445 |
+| d:\rust-ws\eskin-player\src\render.rs                                              | Rust               |        855 |          8 |         61 |        924 |
+| d:\rust-ws\eskin-player\src\resources.rs                                           | Rust               |        937 |          0 |         71 |      1,008 |
+| d:\rust-ws\eskin-player\src\serial_core\codec.rs                                   | Rust               |          6 |          0 |          2 |          8 |
+| d:\rust-ws\eskin-player\src\serial_core\codecs\mod.rs                              | Rust               |          1 |          0 |          1 |          2 |
+| d:\rust-ws\eskin-player\src\serial_core\codecs\tactile_a.rs                        | Rust               |        163 |          1 |         21 |        185 |
+| d:\rust-ws\eskin-player\src\serial_core\error.rs                                   | Rust               |         45 |          0 |          7 |         52 |
+| d:\rust-ws\eskin-player\src\serial_core\frame.rs                                   | Rust               |         32 |          0 |          5 |         37 |
+| d:\rust-ws\eskin-player\src\serial_core\mod.rs                                     | Rust               |          6 |          0 |          1 |          7 |
+| d:\rust-ws\eskin-player\src\serial_core\serial.rs                                  | Rust               |         78 |          7 |         12 |         97 |
+| d:\rust-ws\eskin-player\src\serial_core\utils.rs                                   | Rust               |          8 |          0 |          3 |         11 |
+| d:\rust-ws\eskin-player\src\style.rs                                               | Rust               |        283 |          0 |         37 |        320 |
+| d:\rust-ws\eskin-player\src\texture.rs                                             | Rust               |        231 |          0 |         21 |        252 |
+| d:\rust-ws\eskin-player\src\theme.rs                                               | Rust               |        149 |          1 |         19 |        169 |
+| d:\rust-ws\eskin-player\src\ui.rs                                                  | Rust               |      1,088 |         57 |        123 |      1,268 |
+| d:\rust-ws\eskin-player\src\utils.rs                                               | Rust               |         10 |          0 |          2 |         12 |
+| d:\rust-ws\eskin-player\static\wgsl\shader.wgsl                                    | WGSL               |        556 |          7 |        105 |        668 |
+| Total                                                                              |                    |      8,653 |        180 |      1,313 |     10,146 |
++------------------------------------------------------------------------------------+--------------------+------------+------------+------------+------------+

.openclaw/settings.json

@@ -1,35 +0,0 @@
-{
-  "hooks": {
-    "pre-exec": [
-      {
-        "matcher": "",
-        "command": "scale gate pre-tool Bash --args-json \"$ARGS\" --session-id \"$SESSION_ID\""
-      },
-      {
-        "matcher": "edit|write",
-        "command": "scale gate pre-tool Edit --args-json \"$ARGS\" --session-id \"$SESSION_ID\""
-      }
-    ],
-    "post-exec": [
-      {
-        "matcher": "edit|write",
-        "command": "scale gate post-tool Edit --args-json \"$ARGS\" --exit-code \"$EXIT_CODE\" --session-id \"$SESSION_ID\""
-      },
-      {
-        "matcher": "",
-        "command": "scale gate post-tool Bash --args-json \"$ARGS\" --exit-code \"$EXIT_CODE\" --session-id \"$SESSION_ID\""
-      }
-    ],
-    "before-stop": [
-      {
-        "matcher": "",
-        "command": "scale gate before-stop --session-id \"$SESSION_ID\""
-      }
-    ]
-  },
-  "permissions": {
-    "allow": [
-      "scale:*"
-    ]
-  }
-}

Cargo.lock

@@ -559,6 +559,12 @@ dependencies = [
  "arrayvec",
 ]
 
+[[package]]
+name = "base64"
+version = "0.13.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9e1b586273c5702936fe7b7d6896644d8be71e6314cfe09d3167c95f712589e8"
+
 [[package]]
 name = "bit-set"
 version = "0.9.1"
@@ -664,6 +670,12 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "byteorder"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fd0f2584146f6f2ef48085050886acf353beff7305ebd1ae69500e27c67f64b"
+
 [[package]]
 name = "byteorder-lite"
 version = "0.1.0"
@@ -1292,7 +1304,7 @@ checksum = "dea2df4cf52843e0452895c455a1a2cfbb842a1e7329671acf418fdc53ed4c59"
 
 [[package]]
 name = "eskin-model-player"
-version = "0.5.0"
+version = "5.0.0"
 dependencies = [
  "anyhow",
  "bytemuck",
@@ -1303,6 +1315,7 @@ dependencies = [
  "env_logger",
  "fs_extra",
  "glam",
+ "gltf",
  "image",
  "log",
  "serialport",
@@ -1592,6 +1605,45 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gltf"
+version = "1.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3ce1918195723ce6ac74e80542c5a96a40c2b26162c1957a5cd70799b8cacf7"
+dependencies = [
+ "base64",
+ "byteorder",
+ "gltf-json",
+ "image",
+ "lazy_static",
+ "serde_json",
+ "urlencoding",
+]
+
+[[package]]
+name = "gltf-derive"
+version = "1.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "14070e711538afba5d6c807edb74bcb84e5dbb9211a3bf5dea0dfab5b24f4c51"
+dependencies = [
+ "inflections",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "gltf-json"
+version = "1.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6176f9d60a7eab0a877e8e96548605dedbde9190a7ae1e80bbcc1c9af03ab14"
+dependencies = [
+ "gltf-derive",
+ "serde",
+ "serde_derive",
+ "serde_json",
+]
+
 [[package]]
 name = "glutin"
 version = "0.32.3"
@@ -1915,6 +1967,12 @@ dependencies = [
  "serde_core",
 ]
 
+[[package]]
+name = "inflections"
+version = "1.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a257582fdcde896fd96463bf2d40eefea0580021c0712a0e2b028b60b47a837a"
+
 [[package]]
 name = "interpolate_name"
 version = "0.2.4"
@@ -2090,6 +2148,12 @@ dependencies = [
  "smallvec",
 ]
 
+[[package]]
+name = "lazy_static"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbd2bcb4c963f2ddae06a2efc7e9f3591312473c50c6685e1f298068316e66fe"
+
 [[package]]
 name = "leb128fmt"
 version = "0.1.0"
@@ -4064,6 +4128,12 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "urlencoding"
+version = "2.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "daf8dba3b7eb870caf1ddeed7bc9d2a049f3cfdfae7cb521b087cc33ae4c49da"
+
 [[package]]
 name = "utf8_iter"
 version = "1.0.4"

Cargo.toml

@@ -1,9 +1,14 @@
 [package]
 name = "eskin-model-player"
-version = "0.5.0"
+version = "5.0.0"
 edition = "2024"
+authors = ["JOYSONQUIN"]
+description = "Desktop pressure sensor visualization and playback application."
 build = "build.rs"
 
+[package.metadata.wix]
+eula = false
+
 [dependencies]
 eframe = { version = "0.34.2", features = ["default", "wgpu", "__screenshot"] }
 env_logger = { version = "0.11.10", features = ["auto-color", "humantime"] }
@@ -17,7 +22,13 @@ crossbeam-channel = "0.5.15"
 crc = "3.4.0"
 log = "0.4.29"
 tobj = "4.0.4"
+gltf = "1.4.1"
 
 [build-dependencies]
 anyhow = "1.0.102"
 fs_extra = "1.3.0"
+
+
+[[bin]]
+name = "ESkinPlayer"
+path = "src/main.rs"

render.md

@@ -0,0 +1,866 @@
+# 渲染流程梳理
+
+这份文档拆解当前项目里的渲染链路，包括：
+
+- 压力数据如何从 CPU 进入 GPU
+- `egui_wgpu::CallbackTrait` 的 `prepare / paint` 两阶段
+- `BackgroundRenderResources` 负责管理哪些 GPU 资源
+- `shader.wgsl` 里的各个 shader entry point 分别做什么
+- `Finger / Hand` 两种模式如何切换渲染路径
+
+主要相关文件：
+
+- `src/app.rs`
+- `src/render.rs`
+- `src/matrix.rs`
+- `src/model.rs`
+- `static/wgsl/shader.wgsl`
+
+## 总览
+
+渲染入口在 `EskinDesktopApp::ui`：
+
+```rust
+self.draw_wgpu_background(ui);
+self.draw_panel_context_menu(ui);
+self.draw_title_bar(ui, frame);
+self.draw_floating_panels(&ctx);
+```
+
+顺序很重要：
+
+1. `draw_wgpu_background` 先绘制整块 WGPU 背景和 3D 内容。
+2. 右键菜单、标题栏、floating panel 后画，所以会盖在 WGPU 内容上。
+3. `ctx.request_repaint()` 保证背景持续刷新。
+
+真正的 WGPU 绘制不是直接在 `app.rs` 里执行，而是通过 egui 的 paint callback：
+
+```rust
+ui.painter().add(egui_wgpu::Callback::new_paint_callback(
+    rect,
+    WgpuBackgroundCallback {
+        width,
+        height,
+        pressure: self.pressure_matrix,
+        active_mode: self.active_mode.clone(),
+    },
+));
+```
+
+可以理解成：`app.rs` 每帧把“当前要画什么”打包成 `WgpuBackgroundCallback`，然后交给 `egui_wgpu` 在合适的 GPU 阶段执行。
+
+## 数据流
+
+### 1. 串口数据进入 App
+
+`update_pressure_matrix` 从 `ConnectionManager` 取最新数据：
+
+```rust
+if let Some(sample) = self.connection.take_latest_sample() {
+    normalize_pressure_sample(
+        &sample.matrix,
+        sample.rows,
+        sample.cols,
+        &mut self.pressure_matrix,
+    );
+}
+```
+
+串口原始数据是一个扁平的一维矩阵，元素是整数压力值。
+
+`normalize_pressure_sample` 会把它转成：
+
+```rust
+pub type PressureFrame = [[f32; 2]; PRESSURE_CELL_COUNT];
+```
+
+每个 cell 有两个 `f32`：
+
+```text
+[normalized_pressure, display_value]
+```
+
+含义：
+
+| 值 | 作用 |
+| --- | --- |
+| `normalized_pressure` | `0.0..=1.0`，用于颜色、大小、亮度。 |
+| `display_value` | 原始压力值的显示版本，用于数字模式。 |
+
+当前归一化范围写死在 `app.rs`：
+
+```rust
+const RANGE_MIN: f32 = 0.0;
+const RANGE_MAX: f32 = 7000.0;
+```
+
+这意味着虽然 `FingerMode / HandGatewayMode` 里已经有 `range` 字段，但实际颜色归一化还没有用到它。
+
+### 2. App 创建 WGPU Callback
+
+`draw_wgpu_background` 根据当前 viewport 创建 callback：
+
+```rust
+WgpuBackgroundCallback {
+    width,
+    height,
+    pressure: self.pressure_matrix,
+    active_mode: self.active_mode.clone(),
+}
+```
+
+`WgpuBackgroundCallback` 保存的是“每帧变化的数据”：
+
+- 当前视口宽度
+- 当前视口高度
+- 当前压力帧
+- 当前渲染模式
+
+它不保存长期 GPU 资源。长期资源在 `BackgroundRenderResources` 里。
+
+### 3. Callback Prepare 阶段
+
+`WgpuBackgroundCallback` 实现了：
+
+```rust
+impl egui_wgpu::CallbackTrait for WgpuBackgroundCallback
+```
+
+`prepare` 阶段代码：
+
+```rust
+let resources: &mut BackgroundRenderResources = resources.get_mut().unwrap();
+resources.prepare(queue, self.width, self.height, &self.pressure);
+```
+
+这个阶段主要做 CPU -> GPU 的数据更新：
+
+1. 根据 viewport aspect ratio 重新计算相机矩阵。
+2. 把 `MatrixUniform` 写入 `uniform_buffer`。
+3. 根据当前 `PressureFrame` 更新所有 marker instance。
+4. 把 `glyph_instances` 写入 `glyph_instance_buffer`。
+
+这里不会真正 draw，只是准备 GPU buffer。
+
+### 4. Callback Paint 阶段
+
+`paint` 阶段代码：
+
+```rust
+let resources: &BackgroundRenderResources = resources.get().unwrap();
+resources.paint(render_pass, &self.active_mode);
+```
+
+这个阶段才是真正向 `render_pass` 发 draw call。
+
+`active_mode` 在这里传进去，决定后面画点阵、数字，还是画模型。
+
+## GPU 资源管理
+
+`BackgroundRenderResources` 在 `EskinDesktopApp::new` 里创建一次：
+
+```rust
+renderer
+    .callback_resources
+    .insert(BackgroundRenderResources::new(
+        &wgpu_state.device,
+        &wgpu_state.queue,
+        &wgpu_state.target_format,
+        MATRIX_ROWS,
+        MATRIX_COLS,
+    ));
+```
+
+它负责保存长期存在的 GPU 资源：
+
+```rust
+pub struct BackgroundRenderResources {
+    layout: MatrixLayout,
+    rows: u32,
+    cols: u32,
+    uniform: MatrixUniform,
+    uniform_buffer: wgpu::Buffer,
+    uniform_bind_group: wgpu::BindGroup,
+    background_pipeline: wgpu::RenderPipeline,
+    glyph_pipeline: wgpu::RenderPipeline,
+    dot_pipeline: wgpu::RenderPipeline,
+    model_pipeline: wgpu::RenderPipeline,
+    model: Option<Model>,
+    model_instance_buffer: wgpu::Buffer,
+    glyph_vertex_buffer: wgpu::Buffer,
+    glyph_instance_buffer: wgpu::Buffer,
+    glyph_instances: Vec<GlyphInstance>,
+}
+```
+
+字段含义：
+
+| 字段 | 作用 |
+| --- | --- |
+| `layout` | 压力矩阵的世界空间布局。 |
+| `rows`, `cols` | 当前 GPU 资源按多少行列创建。 |
+| `uniform` | CPU 侧 uniform 缓存。 |
+| `uniform_buffer` | GPU uniform buffer。 |
+| `uniform_bind_group` | WGSL 里的 `@group(0)`。 |
+| `background_pipeline` | 全屏背景、底部色条。 |
+| `glyph_pipeline` | 数字/数值 marker。 |
+| `dot_pipeline` | 圆点 marker。 |
+| `model_pipeline` | OBJ 模型渲染。 |
+| `model` | 加载好的模型和材质。 |
+| `model_instance_buffer` | 模型实例矩阵。 |
+| `glyph_vertex_buffer` | 一个 marker quad 的 6 个顶点。 |
+| `glyph_instance_buffer` | 每个压力点一个 instance。 |
+| `glyph_instances` | CPU 侧 instance 数组。 |
+
+## 模式切换
+
+当前运行时渲染模式：
+
+```rust
+pub enum ActiveMode {
+    Finger(FingerMode),
+    Hand(HandGatewayMode),
+}
+```
+
+`app.rs` 持有：
+
+```rust
+active_mode: ActiveMode,
+```
+
+UI 层的 `SerialMode` 是用户选择，真正渲染用的是 `ActiveMode`。
+
+切换逻辑在 `switch_mode`：
+
+```rust
+fn switch_mode(&mut self, next: SerialMode) {
+    self.connect_state.mode = next;
+    self.config_state.mode = next;
+    self.connection.disconnect();
+    self.pressure_matrix.fill([0.0, 0.0]);
+    self.data_log_frame = 0;
+
+    self.active_mode = match next {
+        SerialMode::Finger => ActiveMode::Finger(FingerMode {
+            rows: self.matrix_config.rows,
+            cols: self.matrix_config.cols,
+            range: 0..7000,
+            dot: true,
+        }),
+        SerialMode::Hand => ActiveMode::Hand(HandGatewayMode { range: 0..7000 }),
+    }
+}
+```
+
+这里做了几件事：
+
+1. 同步 UI 状态。
+2. 断开当前连接。
+3. 清空压力帧。
+4. 重置日志计数。
+5. 设置新的 `active_mode`。
+
+这比只改一个 enum 更像真正的互斥生命周期切换。
+
+## 绘制分发
+
+`BackgroundRenderResources::paint` 先画背景，再按模式分支：
+
+```rust
+render_pass.set_pipeline(&self.background_pipeline);
+render_pass.draw(0..3, 0..1);
+
+match active_mode {
+    ActiveMode::Finger(mode) => self.paint_finger(render_pass, mode),
+    ActiveMode::Hand(mode) => self.paint_hand(render_pass, mode),
+}
+```
+
+当前模式行为：
+
+| 模式 | 绘制内容 |
+| --- | --- |
+| `Finger` | 背景 + 压力 marker。 |
+| `Hand` | 背景 + 模型。 |
+
+## Finger 模式
+
+Finger 模式根据 `dot` 字段选择点模式或数字模式：
+
+```rust
+let marker_pipeline = if mode.dot {
+    &self.dot_pipeline
+} else {
+    &self.glyph_pipeline
+};
+```
+
+含义：
+
+| `mode.dot` | pipeline | 效果 |
+| --- | --- | --- |
+| `true` | `dot_pipeline` | 画圆点。 |
+| `false` | `glyph_pipeline` | 画数字。 |
+
+两个 pipeline 共用同一套 vertex buffer：
+
+```rust
+render_pass.set_vertex_buffer(0, self.glyph_vertex_buffer.slice(..));
+render_pass.set_vertex_buffer(1, self.glyph_instance_buffer.slice(..));
+render_pass.draw(0..6, 0..draw_count);
+```
+
+解释：
+
+- vertex buffer 0：一个 quad 的 6 个顶点。
+- vertex buffer 1：每个压力点一个 instance。
+- `draw(0..6, 0..draw_count)`：每个 instance 都复用这 6 个顶点。
+
+## Hand 模式
+
+Hand 模式当前只画模型：
+
+```rust
+render_pass.set_pipeline(&self.model_pipeline);
+render_pass.set_vertex_buffer(1, self.model_instance_buffer.slice(..));
+```
+
+然后遍历 mesh：
+
+```rust
+for mesh in &model.meshes {
+    if let Some(material) = model.materials.get(mesh.material) {
+        render_pass.set_bind_group(1, &material.bind_group, &[]);
+    }
+    render_pass.set_vertex_buffer(0, mesh.vertex_buffer.slice(..));
+    render_pass.set_index_buffer(mesh.index_buffer.slice(..), wgpu::IndexFormat::Uint32);
+    render_pass.draw_indexed(0..mesh.num_elements, 0, 0..1);
+}
+```
+
+绑定关系：
+
+| Slot / Group | 内容 |
+| --- | --- |
+| bind group 0 | `MatrixUniform` |
+| bind group 1 | 模型纹理和 sampler |
+| vertex buffer 0 | 模型顶点 |
+| vertex buffer 1 | 模型实例矩阵 |
+
+## Matrix 布局
+
+`src/matrix.rs` 定义压力矩阵如何放到 3D 世界里。
+
+固定默认尺寸：
+
+```rust
+pub const MATRIX_ROWS: u32 = 12;
+pub const MATRIX_COLS: u32 = 7;
+```
+
+`MatrixLayout::new(rows, cols)` 计算：
+
+- cell 间距
+- board 宽度
+- board 深度
+- board padding
+- marker 垂直浮起高度
+
+`glyph_world_position` 把 `(row, col)` 映射到世界坐标：
+
+```rust
+let x = (col as f32 - cols as f32 / 2.0 + 0.5) * layout.cell_spacing;
+let z = (row as f32 - rows as f32 / 2.0 + 0.5) * layout.cell_spacing;
+```
+
+返回：
+
+```rust
+[
+    x,
+    MATRIX_OFFSET_Y + layout.label_float_offset,
+    MATRIX_OFFSET_Z + z,
+    1.0,
+]
+```
+
+所以 marker 是铺在 X/Z 平面上，Y 方向稍微浮起来。
+
+`build_view_projection` 根据矩阵尺寸创建相机：
+
+```rust
+let view = glam::Mat4::look_at_rh(eye, target, glam::Vec3::Y);
+let projection = glam::Mat4::perspective_rh(...);
+let open_gl_to_wgpu = ...
+```
+
+最后的 `open_gl_to_wgpu` 是为了把 OpenGL 风格深度范围转换成 WGPU 需要的 clip space。
+
+## Uniform
+
+Rust 侧：
+
+```rust
+#[repr(C)]
+#[derive(Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]
+struct MatrixUniform {
+    view_proj: [[f32; 4]; 4],
+    viewport: [f32; 4],
+    glyph: [f32; 4],
+    color: [f32; 4],
+}
+```
+
+WGSL 侧：
+
+```wgsl
+struct MatrixUniform {
+    view_proj: mat4x4f,
+    viewport: vec4f,
+    glyph: vec4f,
+    color: vec4f,
+}
+
+@group(0) @binding(0)
+var<uniform> u: MatrixUniform;
+```
+
+字段含义：
+
+| 字段 | 含义 |
+| --- | --- |
+| `view_proj` | 世界坐标到 clip space 的矩阵。 |
+| `viewport.xy` | 当前 viewport 像素尺寸。 |
+| `glyph.x` | marker 基础像素大小。 |
+| `color` | 目前基本没用上，预留字段。 |
+
+每帧在 `prepare` 里写入 GPU：
+
+```rust
+queue.write_buffer(
+    &self.uniform_buffer,
+    0,
+    bytemuck::cast_slice(&[self.uniform]),
+);
+```
+
+## Marker / Glyph 几何
+
+代码里叫 `glyph`，但它不是字体系统里的 glyph。它更像一个“压力 marker”。
+
+基础几何是一个 quad：
+
+```rust
+let glyph_vertices = [
+    [-1.0, -1.0],
+    [ 1.0, -1.0],
+    [-1.0,  1.0],
+    [-1.0,  1.0],
+    [ 1.0, -1.0],
+    [ 1.0,  1.0],
+];
+```
+
+这 6 个点组成两个三角形。
+
+每个压力点对应一个 `GlyphInstance`：
+
+```rust
+struct GlyphInstance {
+    world_position: [f32; 4],
+    style: [f32; 4],
+}
+```
+
+WGSL 接收：
+
+```wgsl
+struct GlyphInstanceInput {
+    @location(1) world_position: vec4f,
+    @location(2) style: vec4f,
+}
+```
+
+`style` 的当前含义：
+
+| 分量 | 含义 |
+| --- | --- |
+| `style.x` | 归一化压力值。 |
+| `style.y` | 显示用压力值。 |
+| `style.z` | 预留。 |
+| `style.w` | 预留。 |
+
+## Shader 总览
+
+所有 pipeline 当前共用一个 WGSL 文件：
+
+```rust
+include_str!("../static/wgsl/shader.wgsl")
+```
+
+不同 pipeline 选择不同入口函数。
+
+## Background Shader
+
+Rust 侧创建：
+
+```rust
+create_background_pipeline(...)
+```
+
+WGSL entry point：
+
+```wgsl
+@vertex
+fn vs_background(...)
+
+@fragment
+fn fs_background(...)
+```
+
+`vs_background` 画一个全屏三角形：
+
+```wgsl
+let positions = array<vec2f, 3>(
+    vec2f(-1.0, -3.0),
+    vec2f(3.0, 1.0),
+    vec2f(-1.0, 1.0),
+);
+```
+
+一个大三角形覆盖整屏，避免两个三角形拼接时可能出现的边界问题。
+
+`fs_background` 负责画：
+
+- 深色垂直渐变
+- vignette 暗角
+- 中央氛围带
+- 底部压力色条
+- 色条刻度线
+
+颜色映射来自：
+
+```wgsl
+fn sample_range_color(value: f32) -> vec3f
+```
+
+色阶大概是：
+
+1. 蓝青
+2. 绿色
+3. 橙色
+4. 红色
+
+## Glyph / 数字 Shader
+
+Rust 侧创建：
+
+```rust
+create_glyph_pipeline(...)
+```
+
+WGSL entry point：
+
+```wgsl
+@vertex
+fn vs_glyph(...)
+
+@fragment
+fn fs_glyph(...)
+```
+
+这是数字模式。
+
+`vs_glyph` 做几件事：
+
+1. 把 instance 的 `world_position` 乘 `u.view_proj`，得到 clip space 中心点。
+2. 从 `instance.style.x` 读取压力强度。
+3. 根据强度计算 marker 的像素大小。
+4. 用 `viewport` 把像素大小转换成 NDC 偏移。
+
+关键代码：
+
+```wgsl
+let shaped = pow(saturate(instance.style.x), 0.9);
+let pixel_size = u.glyph.x * mix(1.08, 2.20, shaped);
+let ndc_offset = vertex.local * vec2f(pixel_size / u.viewport.x, pixel_size / u.viewport.y) * 2.0;
+```
+
+这意味着数字不是固定世界尺寸，而是接近固定屏幕像素尺寸，更适合读数。
+
+`fs_glyph` 做数字绘制：
+
+```wgsl
+let alpha = number_alpha(in.local, in.display_value);
+let color = sample_range_color(in.intensity) * mix(0.82, 1.16, saturate(in.intensity));
+return vec4f(color, alpha);
+```
+
+数字不是字体贴图，而是在 shader 里用七段数码管方式画出来。
+
+相关函数：
+
+- `digit_segment_on`
+- `seven_segment_digit_alpha`
+- `digit_count`
+- `digit_at`
+- `number_alpha`
+
+## Dot / 点 Shader
+
+Rust 侧创建：
+
+```rust
+create_dot_pipeline(...)
+```
+
+WGSL entry point：
+
+```wgsl
+@vertex
+fn vs_dot(...)
+
+@fragment
+fn fs_dot(...)
+```
+
+这是圆点模式。
+
+`vs_dot` 和 `vs_glyph` 类似，也是把世界坐标点展开成屏幕像素大小的 quad。
+
+点模式的尺寸曲线更小：
+
+```wgsl
+let pixel_size = u.glyph.x * mix(0.72, 1.85, shaped);
+```
+
+`fs_dot` 画：
+
+- 圆形核心
+- 外发光
+- 小高光
+- 压力映射颜色
+
+圆形 alpha 来自：
+
+```wgsl
+fn circle_alpha(local: vec2f, radius: f32, softness: f32) -> f32
+```
+
+核心片段：
+
+```wgsl
+let core = circle_alpha(in.local, 0.42, 0.055);
+let glow = circle_alpha(in.local, 0.78, 0.18) * intensity * 0.45;
+let alpha = max(core, glow);
+```
+
+## Model Shader
+
+Rust 侧创建：
+
+```rust
+create_model_pipeline(...)
+```
+
+WGSL entry point：
+
+```wgsl
+@vertex
+fn vs_model(...)
+
+@fragment
+fn fs_model(...)
+```
+
+输入 layout：
+
+```wgsl
+@location(0) position: vec3f,
+@location(1) tex_coords: vec2f,
+@location(2) normal: vec3f,
+@location(5) model_0: vec4f,
+@location(6) model_1: vec4f,
+@location(7) model_2: vec4f,
+@location(8) model_3: vec4f,
+```
+
+`position / tex_coords / normal` 来自模型 vertex buffer。
+
+`model_0..model_3` 来自 instance buffer，也就是每个模型实例的 transform matrix。
+
+`vs_model`：
+
+1. 重建 model matrix。
+2. 计算 world position。
+3. 用 `u.view_proj` 转到 clip space。
+4. 变换 normal。
+5. 翻转纹理 Y 坐标。
+
+`fs_model`：
+
+1. 采样纹理。
+2. 计算简单漫反射光照。
+3. 加一点 rim light。
+4. 输出不透明颜色。
+
+```wgsl
+let light_dir = normalize(vec3f(-0.35, 0.85, 0.45));
+let diffuse = max(dot(normal, light_dir), 0.0);
+let rim = pow(1.0 - saturate(abs(normal.y)), 2.0) * 0.16;
+let base = textureSample(model_texture, model_sampler, in.tex_coords).rgb;
+let color = base * (0.28 + diffuse * 0.72) + vec3f(0.14, 0.24, 0.32) * rim;
+```
+
+## 模型加载
+
+模型在 `BackgroundRenderResources::new` 里加载一次：
+
+```rust
+let model =
+    match resources::load_model("cube.obj", device, _queue, &texture_bind_group_layout) {
+        Ok(model) => Some(model),
+        Err(err) => {
+            log::warn!("failed to load cube.obj: {err:#}");
+            None
+        }
+    };
+```
+
+当前模型实例 transform 是写死的：
+
+```rust
+let model_instance = Instance::new(
+    glam::Vec3::new(0.0, -2.0, 12.0),
+    glam::Quat::from_rotation_y(0.65) * glam::Quat::from_rotation_x(-0.35),
+)
+.to_raw();
+```
+
+它把模型放到和压力矩阵相同的相机空间里。
+
+## 当前限制
+
+### 1. `rows / cols` 还没有真正重建布局
+
+`FingerMode` 里有：
+
+```rust
+rows: u32,
+cols: u32,
+```
+
+但 `BackgroundRenderResources` 的 `layout` 和 instance buffer 是创建时确定的。
+
+现在 `paint_finger` 只用 rows/cols 限制 draw count：
+
+```rust
+let draw_count = self.visible_instance_count(mode.rows, mode.cols);
+```
+
+所以它能少画一些点，但不会重新计算新尺寸下的空间布局。
+
+如果后面要支持动态矩阵尺寸，需要：
+
+1. 尺寸变化时重建 `MatrixLayout` 和 instance buffer。
+2. 或者一开始分配最大尺寸 buffer，然后每帧按 active rows/cols 更新坐标。
+
+### 2. `range` 字段还没有真正用起来
+
+`FingerMode` 和 `HandGatewayMode` 都有：
+
+```rust
+range: Range<u32>
+```
+
+但现在归一化仍在 `normalize_pressure_sample` 里硬编码为 `0..7000`。
+
+所以如果要让不同模式有不同色域范围，需要把 range 传入归一化过程，或者把归一化移动到 render/update instance 阶段。
+
+### 3. `glyph` 命名有点误导
+
+现在的 `glyph` 实际更像 marker。
+
+推荐未来改名：
+
+```text
+GlyphVertex           -> MarkerVertex
+GlyphInstance         -> MarkerInstance
+glyph_pipeline        -> number_marker_pipeline
+dot_pipeline          -> dot_marker_pipeline
+glyph_vertex_buffer   -> marker_vertex_buffer
+glyph_instance_buffer -> marker_instance_buffer
+glyph_instances       -> marker_instances
+```
+
+### 4. Hand 模式还没有压力叠加
+
+现在：
+
+```rust
+ActiveMode::Hand(mode) => self.paint_hand(render_pass, mode),
+```
+
+只画模型，不画压力点。
+
+如果手掌模式要显示压力映射，需要额外设计“压力矩阵 -> 手模型表面/区域”的映射。
+
+可能方向：
+
+```rust
+ActiveMode::Hand(mode) => {
+    self.paint_hand(render_pass, mode);
+    self.paint_hand_pressure_overlay(render_pass, mode);
+}
+```
+
+但 overlay 的坐标不应该复用现在的矩阵 X/Z 网格，需要新的手部映射数据。
+
+## 建议下一步
+
+把：
+
+```rust
+pub struct FingerMode {
+    pub rows: u32,
+    pub cols: u32,
+    pub range: Range<u32>,
+    pub dot: bool,
+}
+```
+
+改成：
+
+```rust
+pub enum MarkerMode {
+    Dot,
+    Number,
+}
+
+pub struct FingerMode {
+    pub rows: u32,
+    pub cols: u32,
+    pub range: Range<u32>,
+    pub marker_mode: MarkerMode,
+}
+```
+
+这样比 `dot: bool` 更清楚。
+
+现在的：
+
+```rust
+dot: true
+```
+
+需要脑内翻译成“点模式”。
+
+改成：
+
+```rust
+marker_mode: MarkerMode::Dot
+```
+
+代码语义会直接很多。
+

res/cube.mtl

@@ -1,14 +0,0 @@
-# Blender MTL File: 'cube.blend'
-# Material Count: 1
-
-newmtl Material.001
-Ns 323.999994
-Ka 1.000000 1.000000 1.000000
-Kd 0.800000 0.800000 0.800000
-Ks 0.500000 0.500000 0.500000
-Ke 0.000000 0.000000 0.000000
-Ni 1.450000
-d 1.000000
-illum 2
-map_Bump cube-normal.png
-map_Kd cube-diffuse.jpg

src/app.rs

@@ -1,29 +1,38 @@
+use crate::breakout::{BreakoutGame, control_from_matrix};
 use crate::connection::ConnectionManager;
+use crate::force::{ForceEstimatorState, HudSpatialForce};
 use crate::recording::Recorder;
-use crate::theme::{ONE_DARK_PRO, apply_fonts, apply_theme};
+use crate::render::{ActiveMode, FingerMode, HandGatewayMode};
+use crate::style::{ONE_DARK_PRO, apply_fonts, apply_theme, layout};
+use crate::ui::SerialMode;
 use crate::{
     matrix::{MATRIX_COLS, MATRIX_ROWS},
     render::{
-        BackgroundRenderResources, MarkerMode, PRESSURE_CELL_COUNT, PressureFrame,
+        BackgroundRenderResources, PRESSURE_CELL_COUNT, PressureFrame, PressureSamples,
         WgpuBackgroundCallback,
     },
     ui::{
         ConfigPanelState, ConnectPanelState, FloatingPanelState, MatrixConfigState,
-        draw_config_panel, draw_connect_panel, draw_export_panel, draw_matrix_config_panel,
+        draw_config_panel, draw_spatial_force_panel, draw_stats_panel, panel_restore_item,
-        draw_scene_panel, draw_stats_panel,
     },
 };
 use eframe::{egui, egui_wgpu};
-use std::sync::Arc;
+use std::{
+    sync::Arc,
+    time::{Duration, Instant},
+};
 
-const DATA_LOG_EVERY_FRAMES: u64 = 30;
+const SUMMARY_POINTS_PER_SERIES: usize = 42;
+const HAND_FORCE_PANEL_COUNT: usize = 7;
+const HAND_FORCE_SEGMENT_COUNTS: [usize; HAND_FORCE_PANEL_COUNT] = [84, 84, 84, 84, 84, 70, 44];
+const RATE_UPDATE_INTERVAL: Duration = Duration::from_millis(500);
 
 pub struct EskinDesktopApp {
     connect_panel: FloatingPanelState,
     connect_state: ConnectPanelState,
     connection: Arc<ConnectionManager>,
     pressure_matrix: PressureFrame,
-    data_log_frame: u64,
+    hand_pressure: PressureSamples,
     scene_panel: FloatingPanelState,
     config_panel: FloatingPanelState,
     config_state: ConfigPanelState,
@@ -35,6 +44,62 @@ pub struct EskinDesktopApp {
     matrix_config_panel: FloatingPanelState,
     matrix_config: MatrixConfigState,
     signal_history: Vec<f32>,
+    hand_signal_histories: [Vec<f32>; HAND_FORCE_PANEL_COUNT],
+    force_estimator: ForceEstimatorState,
+    latest_spatial_force: Option<HudSpatialForce>,
+    spatial_force_panel_force: Option<HudSpatialForce>,
+    latest_raw_matrix: Vec<u32>,
+    latest_matrix_rows: u32,
+    latest_matrix_cols: u32,
+    breakout_visible: bool,
+    breakout_game: BreakoutGame,
+    live_rates: LiveRateMeters,
+    context_menu_open: bool,
+    context_menu_pos: egui::Pos2,
+    active_mode: ActiveMode,
+}
+
+struct LiveRateMeters {
+    window_started_at: Instant,
+    window_rx_frames: u64,
+    window_render_frames: u32,
+    sample_rate_hz: f32,
+    render_rate_hz: f32,
+}
+
+impl LiveRateMeters {
+    fn new() -> Self {
+        Self {
+            window_started_at: Instant::now(),
+            window_rx_frames: 0,
+            window_render_frames: 0,
+            sample_rate_hz: 0.0,
+            render_rate_hz: 0.0,
+        }
+    }
+
+    fn tick_render(&mut self, total_rx_frames: u64) {
+        if total_rx_frames < self.window_rx_frames {
+            self.window_rx_frames = total_rx_frames;
+            self.sample_rate_hz = 0.0;
+        }
+
+        self.window_render_frames = self.window_render_frames.saturating_add(1);
+
+        let now = Instant::now();
+        let elapsed = now.duration_since(self.window_started_at);
+        if elapsed < RATE_UPDATE_INTERVAL {
+            return;
+        }
+
+        let seconds = elapsed.as_secs_f32().max(0.001);
+        let rx_delta = total_rx_frames.saturating_sub(self.window_rx_frames);
+        self.sample_rate_hz = rx_delta as f32 / seconds;
+        self.render_rate_hz = self.window_render_frames as f32 / seconds;
+        self.window_started_at = now;
+        self.window_rx_frames = total_rx_frames;
+        self.window_render_frames = 0;
+    }
 }
 
 impl EskinDesktopApp {
@@ -60,28 +125,58 @@ impl EskinDesktopApp {
             ));
 
         Self {
-            connect_panel: FloatingPanelState::new([0.0, 0.0], [0.0, 0.0]),
+            connect_panel: FloatingPanelState::new([0.0, 0.0], [layout::RIGHT_TAG_X, 48.0]),
             connect_state: ConnectPanelState::default(),
             connection: Arc::new(ConnectionManager::new()),
             pressure_matrix: [[0.0, 0.0]; PRESSURE_CELL_COUNT],
-            data_log_frame: 0,
+            hand_pressure: Vec::new(),
-            scene_panel: FloatingPanelState::new([16.0, 48.0], [16.0, 48.0]),
+            scene_panel: FloatingPanelState::new(
-            config_panel: FloatingPanelState::new([840.0, 48.0], [128.0, 48.0]),
+                [layout::LEFT_X, layout::TOP_Y],
+                [layout::LEFT_TAG_X, layout::TOP_Y],
+            ),
+            config_panel: FloatingPanelState::new(
+                [layout::RIGHT_X, layout::TOP_Y],
+                [layout::RIGHT_TAG_X, layout::TOP_Y],
+            ),
             config_state: ConfigPanelState::default(),
-            stats_panel: FloatingPanelState::new([16.0, 520.0], [240.0, 48.0]),
+            stats_panel: FloatingPanelState::new(
+                [layout::LEFT_X, layout::LEFT_SECOND_Y],
+                [layout::LEFT_TAG_X, layout::LEFT_SECOND_Y],
+            ),
             recorder: Recorder::full(),
-            export_panel: FloatingPanelState::new([16.0, 280.0], [16.0, 280.0]),
+            export_panel: FloatingPanelState::new(
+                [layout::LEFT_X, layout::TOP_Y],
+                [layout::LEFT_TAG_X, layout::TOP_Y],
+            ),
             export_path: String::new(),
-            matrix_config_panel: FloatingPanelState::new([840.0, 280.0], [400.0, 48.0]),
+            matrix_config_panel: FloatingPanelState::new(
+                [layout::RIGHT_X, layout::RIGHT_SECOND_Y],
+                [layout::RIGHT_TAG_X, layout::RIGHT_SECOND_Y],
+            ),
             matrix_config: MatrixConfigState::default(),
             signal_history: Vec::with_capacity(128),
+            hand_signal_histories: std::array::from_fn(|_| Vec::with_capacity(128)),
+            force_estimator: ForceEstimatorState::new(),
+            latest_spatial_force: None,
+            spatial_force_panel_force: None,
+            latest_raw_matrix: Vec::new(),
+            latest_matrix_rows: MATRIX_ROWS,
+            latest_matrix_cols: MATRIX_COLS,
+            breakout_visible: false,
+            breakout_game: BreakoutGame::default(),
+            live_rates: LiveRateMeters::new(),
+            context_menu_open: false,
+            context_menu_pos: egui::pos2(24.0, 48.0),
+            active_mode: ActiveMode::Finger(FingerMode {
+                rows: 12,
+                cols: 7,
+                range: 0..7000,
+                dot: true,
+            }),
         }
     }
 
-    fn draw_wgpu_background(&mut self, ui: &mut egui::Ui) {
+    fn draw_wgpu_background_rect(&self, ui: &mut egui::Ui, rect: egui::Rect) {
-        self.update_pressure_matrix();
-
-        let rect = ui.max_rect();
         let width = rect.width().max(1.0);
         let height = rect.height().max(1.0);
 
@@ -91,9 +186,88 @@ impl EskinDesktopApp {
                 width,
                 height,
                 pressure: self.pressure_matrix,
-                marker_mode: MarkerMode::Number,
+                hand_pressure: self.hand_pressure.clone(),
+                active_mode: self.active_mode.clone(),
             },
         ));
+        self.paint_spatial_force_overlay(ui, rect);
+    }
+
+    fn paint_spatial_force_overlay(&self, ui: &egui::Ui, rect: egui::Rect) {
+        let Some(force) = self.latest_spatial_force else {
+            return;
+        };
+
+        let painter = ui.painter();
+        let center = rect.center();
+        let magnitude = force.magnitude.clamp(0.0, 1.8);
+        let length = 34.0 + magnitude * 54.0;
+        let angle = force.angle_deg.to_radians();
+        let direction = egui::vec2(angle.cos(), angle.sin());
+        let end = center + direction * length;
+        let side = egui::vec2(-direction.y, direction.x);
+        let color = egui::Color32::from_rgb(255, 196, 54);
+        let glow = egui::Color32::from_rgba_unmultiplied(255, 196, 54, 58);
+
+        painter.line_segment([center, end], egui::Stroke::new(9.0, glow));
+        painter.line_segment([center, end], egui::Stroke::new(2.4, color));
+        painter.line_segment(
+            [end, end - direction * 14.0 + side * 7.0],
+            egui::Stroke::new(2.4, color),
+        );
+        painter.line_segment(
+            [end, end - direction * 14.0 - side * 7.0],
+            egui::Stroke::new(2.4, color),
+        );
+        painter.circle_filled(center, 4.2, color);
+    }
+
+    fn draw_workspace(&mut self, ui: &mut egui::Ui) {
+        let screen = ui.max_rect();
+        let workspace = egui::Rect::from_min_max(
+            screen.left_top() + egui::vec2(0.0, layout::WORKSPACE_TOP),
+            screen.right_bottom(),
+        );
+
+        if self.breakout_visible {
+            self.draw_split_workspace(ui, workspace);
+        } else {
+            ui.painter()
+                .rect_filled(screen, egui::CornerRadius::ZERO, ONE_DARK_PRO.bg);
+            self.draw_wgpu_background_rect(ui, workspace);
+        }
+    }
+
+    fn draw_split_workspace(&mut self, ui: &mut egui::Ui, content: egui::Rect) {
+        let screen = ui.max_rect();
+        let gutter = 10.0;
+        let half_width = (content.width() - gutter).max(1.0) * 0.5;
+        let left = egui::Rect::from_min_size(content.min, egui::vec2(half_width, content.height()));
+        let right = egui::Rect::from_min_max(
+            egui::pos2(left.right() + gutter, content.top()),
+            content.right_bottom(),
+        );
+
+        ui.painter()
+            .rect_filled(screen, egui::CornerRadius::ZERO, ONE_DARK_PRO.bg);
+        paint_split_viewport_shell(ui, left, "DOTMATRIX", "压力矩阵 / WGPU");
+        paint_split_viewport_shell(ui, right, "BREAKOUT", "压力控制打砖块");
+
+        let left_body = split_viewport_body(left);
+        let right_body = split_viewport_body(right);
+        self.draw_wgpu_background_rect(ui, left_body);
+
+        let breakout_control = control_from_matrix(
+            &self.latest_raw_matrix,
+            self.latest_matrix_rows,
+            self.latest_matrix_cols,
+        );
+        self.breakout_game.draw_viewport(
+            ui.ctx(),
+            right_body,
+            &mut self.breakout_visible,
+            breakout_control,
+        );
     }
 
     fn update_pressure_matrix(&mut self) {
@@ -104,26 +278,35 @@ impl EskinDesktopApp {
                 sample.cols,
                 &mut self.pressure_matrix,
             );
+            self.hand_pressure = normalize_pressure_samples(&sample.matrix);
+            self.latest_raw_matrix.clear();
+            self.latest_raw_matrix.extend_from_slice(&sample.matrix);
+            self.latest_matrix_rows = sample.rows;
+            self.latest_matrix_cols = sample.cols;
 
-            // Feed data to recorder
+            self.latest_spatial_force = self.force_estimator.analyze(&sample.matrix);
-            self.recorder.add_frame(&sample.matrix);
 
-            // Update signal history (sum of all pressure values)
+            // Keep JE-Skin's summary path separate from the optional spatial-force vector.
-            let total: f32 = sample.matrix.iter().map(|v| *v as f32).sum();
+            let raw_total = sample
-            self.signal_history.push(total);
+                .matrix
-            if self.signal_history.len() > 128 {
+                .iter()
+                .fold(0_u64, |sum, value| sum + *value as u64)
+                .min(u32::MAX as u64) as u32;
+            let force = raw_to_g1(raw_total).min(25.6);
+            let force = if force <= 0.1 { 0.0 } else { force };
+            self.signal_history.push(force);
+            if self.signal_history.len() > SUMMARY_POINTS_PER_SERIES {
                 self.signal_history.remove(0);
             }
 
-            self.data_log_frame += 1;
+            if self.config_state.mode == SerialMode::Hand {
-            if self.data_log_frame % DATA_LOG_EVERY_FRAMES == 0 {
+                update_hand_signal_histories(&mut self.hand_signal_histories, &sample.matrix);
-                log_pressure_sample(&sample.matrix, sample.rows, sample.cols);
             }
         }
     }
 
     fn draw_title_bar(&mut self, ui: &mut egui::Ui, _frame: &mut eframe::Frame) {
-        let title_bar_height = 36.0;
+        let title_bar_height = layout::TITLE_BAR_HEIGHT;
         let title_bar_rect = ui
             .allocate_space(egui::vec2(ui.available_width(), title_bar_height))
             .1;
@@ -233,49 +416,291 @@ impl EskinDesktopApp {
         }
     }
 
-    fn draw_floating_panels(&mut self, ctx: &egui::Context) {
+    fn draw_floating_panels(
-        draw_connect_panel(
+        &mut self,
+        ctx: &egui::Context,
+        stats: crate::serial_core::serial::SerialIoStats,
+    ) {
+        self.scene_panel.visible = false;
+        self.connect_panel.visible = false;
+        self.export_panel.visible = false;
+        self.matrix_config_panel.visible = false;
+        self.context_menu_open = false;
+
+        if let Some(next_mode) = draw_config_panel(
             ctx,
-            &mut self.connect_panel,
+            &mut self.config_panel,
-            &mut self.connect_state,
+            &mut self.config_state,
             &self.connection,
             &self.recorder,
-            &mut self.export_path,
+            stats,
-        );
+            self.live_rates.sample_rate_hz,
-        draw_scene_panel(ctx, &mut self.scene_panel);
+            self.live_rates.render_rate_hz,
-        draw_config_panel(ctx, &mut self.config_panel, &mut self.config_state);
+        ) {
-        draw_stats_panel(ctx, &mut self.stats_panel);
+            if next_mode == SerialMode::Hand {
-        draw_export_panel(
+                self.config_state.mode = SerialMode::Finger;
-            ctx,
+                self.connect_state.mode = SerialMode::Finger;
-            &mut self.export_panel,
+                self.config_state.baud_rate = SerialMode::Finger.baud_rate();
-            &self.recorder,
+                self.active_mode = ActiveMode::Finger(FingerMode {
-            &mut self.export_path,
+                    rows: self.matrix_config.rows,
-        );
+                    cols: self.matrix_config.cols,
-        draw_matrix_config_panel(ctx, &mut self.matrix_config_panel, &mut self.matrix_config);
+                    range: 0..7000,
+                    dot: true,
+                });
+                self.breakout_visible = true;
+            } else {
+                self.switch_mode(next_mode);
+            }
+        }
+
+        if self.breakout_visible {
+            self.stats_panel.visible = false;
+            return;
+        }
+
+        if self.config_state.mode == SerialMode::Finger {
+            self.stats_panel.visible = true;
+            draw_stats_panel(
+                ctx,
+                &mut self.stats_panel,
+                &self.signal_history,
+                self.latest_spatial_force,
+            );
+        } else {
+            self.stats_panel.visible = false;
+        }
+
+        if let Some(force) = self.latest_spatial_force {
+            self.spatial_force_panel_force = Some(force);
+        }
+
+        draw_spatial_force_panel(ctx, self.spatial_force_panel_force, &self.signal_history);
+    }
+
+    fn draw_panel_context_menu(&mut self, ctx: &egui::Context) {
+        let (secondary_clicked, pointer_pos, escape_pressed) = ctx.input(|input| {
+            (
+                input.pointer.secondary_clicked(),
+                input.pointer.interact_pos(),
+                input.key_pressed(egui::Key::Escape),
+            )
+        });
+
+        if secondary_clicked {
+            self.context_menu_open = true;
+            self.context_menu_pos = pointer_pos.unwrap_or(self.context_menu_pos);
+        }
+        if escape_pressed {
+            self.context_menu_open = false;
+        }
+        if !self.context_menu_open {
+            return;
+        }
+
+        let mut close_menu = false;
+        let response = egui::Area::new(egui::Id::new("workspace_context_menu_area"))
+            .fixed_pos(self.context_menu_pos)
+            .order(egui::Order::Foreground)
+            .show(ctx, |ui| {
+                egui::Frame::popup(ui.style()).show(ui, |ui| {
+                    ui.set_min_width(132.0);
+                    ui.label("显示面板");
+                    ui.separator();
+
+                    panel_restore_item(ui, "配置", &mut self.config_panel);
+                    panel_restore_item(ui, "录制", &mut self.export_panel);
+                    panel_restore_item(ui, "矩阵", &mut self.matrix_config_panel);
+                    if self.stats_panel.visible {
+                        if ui
+                            .add_sized(
+                                egui::vec2(ui.available_width(), 0.0),
+                                egui::Button::new("隐藏 统计"),
+                            )
+                            .clicked()
+                        {
+                            self.stats_panel.visible = false;
+                            close_menu = true;
+                        }
+                    } else {
+                        panel_restore_item(ui, "统计", &mut self.stats_panel);
+                    }
+                    if ui
+                        .add_sized(
+                            egui::vec2(ui.available_width(), 0.0),
+                            egui::Button::new("打砖块"),
+                        )
+                        .clicked()
+                    {
+                        self.breakout_visible = true;
+                        close_menu = true;
+                    }
+
+                    ui.separator();
+
+                    if ui
+                        .add_sized(
+                            egui::vec2(ui.available_width(), 0.0),
+                            egui::Button::new("全部显示"),
+                        )
+                        .clicked()
+                    {
+                        self.config_panel.visible = true;
+                        self.export_panel.visible = true;
+                        self.matrix_config_panel.visible = true;
+                        self.stats_panel.visible = true;
+                        self.breakout_visible = true;
+                        close_menu = true;
+                    }
+                });
+            });
+
+        let clicked_outside = ctx.input(|input| {
+            input.pointer.primary_clicked()
+                && input
+                    .pointer
+                    .interact_pos()
+                    .is_some_and(|pos| !response.response.rect.contains(pos))
+        });
+        if close_menu || clicked_outside {
+            self.context_menu_open = false;
+        }
+    }
+
+    fn switch_mode(&mut self, next: SerialMode) {
+        self.connect_state.mode = next;
+        self.config_state.mode = next;
+        self.config_state.baud_rate = next.baud_rate();
+        self.connection.disconnect();
+        self.pressure_matrix.fill([0.0, 0.0]);
+        self.hand_pressure.clear();
+        self.force_estimator.reset();
+        self.latest_spatial_force = None;
+        self.spatial_force_panel_force = None;
+        self.signal_history.clear();
+        self.hand_signal_histories
+            .iter_mut()
+            .for_each(|history| history.clear());
+
+        self.active_mode = match next {
+            SerialMode::Finger => ActiveMode::Finger(FingerMode {
+                rows: self.matrix_config.rows,
+                cols: self.matrix_config.cols,
+                range: 0..7000,
+                dot: true,
+            }),
+            SerialMode::Hand => ActiveMode::Hand(HandGatewayMode { range: 0..7000 }),
+        }
     }
 }
 
-fn log_pressure_sample(raw: &[u32], rows: u32, cols: u32) {
+fn update_hand_signal_histories(
-    let max = raw.iter().copied().max().unwrap_or(0);
+    histories: &mut [Vec<f32>; HAND_FORCE_PANEL_COUNT],
-    let sum: u64 = raw.iter().map(|value| *value as u64).sum();
+    raw_values: &[u32],
-    let non_zero = raw.iter().filter(|value| **value != 0).count();
+) {
-    let preview = raw
+    let mut offset = 0usize;
-        .iter()
+    for (history, sample_count) in histories.iter_mut().zip(HAND_FORCE_SEGMENT_COUNTS) {
-        .take(12)
+        let raw_total = raw_values
-        .map(u32::to_string)
+            .get(offset..offset + sample_count)
-        .collect::<Vec<_>>()
+            .unwrap_or(&[])
-        .join(", ");
+            .iter()
+            .fold(0_u64, |sum, value| sum + *value as u64)
+            .min(u32::MAX as u64) as u32;
+        let force = raw_to_g1(raw_total).min(25.6);
+        let force = if force <= 0.1 { 0.0 } else { force };
 
-    println!(
+        history.push(force);
-        "[pressure] {rows}x{cols} cells={} non_zero={non_zero} max={max} sum={sum} first=[{preview}]",
+        if history.len() > SUMMARY_POINTS_PER_SERIES {
-        raw.len()
+            history.remove(0);
+        }
+
+        offset += sample_count;
+    }
+}
+
+fn raw_to_g1(raw: u32) -> f32 {
+    const RAW: [u32; 12] = [
+        0, 21382, 108507, 123183, 147405, 171105, 192395, 250443, 231423, 350560, 396616, 429444,
+    ];
+    const FORCE_CENTI_N: [f32; 12] = [
+        0.0, 57.0, 257.0, 357.0, 457.0, 557.0, 657.0, 857.0, 1057.0, 1557.0, 2057.0, 2557.0,
+    ];
+
+    if raw <= RAW[0] {
+        return FORCE_CENTI_N[0] / 100.0;
+    }
+
+    if raw >= RAW[RAW.len() - 1] {
+        return FORCE_CENTI_N[FORCE_CENTI_N.len() - 1] / 100.0;
+    }
+
+    let mut left = 0usize;
+    let mut right = RAW.len() - 1;
+    while left + 1 < right {
+        let mid = (left + right) / 2;
+        if RAW[mid] <= raw {
+            left = mid;
+        } else {
+            right = mid;
+        }
+    }
+
+    let raw_left = RAW[left] as f32;
+    let raw_right = RAW[right] as f32;
+    let span = (raw_right - raw_left).max(1.0);
+    let ratio = (raw as f32 - raw_left) / span;
+
+    (FORCE_CENTI_N[left] + ratio * (FORCE_CENTI_N[right] - FORCE_CENTI_N[left])) / 100.0
+}
+
+fn paint_split_viewport_shell(
+    ui: &egui::Ui,
+    rect: egui::Rect,
+    title: &'static str,
+    subtitle: &'static str,
+) {
+    let painter = ui.painter();
+    painter.rect_filled(
+        rect,
+        egui::CornerRadius::same(8),
+        egui::Color32::from_rgb(11, 17, 23),
+    );
+    painter.rect_stroke(
+        rect,
+        egui::CornerRadius::same(8),
+        egui::Stroke::new(1.0, ONE_DARK_PRO.border_soft),
+        egui::StrokeKind::Outside,
+    );
+    painter.line_segment(
+        [
+            rect.left_top() + egui::vec2(12.0, 34.0),
+            rect.right_top() + egui::vec2(-12.0, 34.0),
+        ],
+        egui::Stroke::new(1.0, ONE_DARK_PRO.border_soft),
+    );
+    painter.text(
+        rect.left_top() + egui::vec2(14.0, 16.0),
+        egui::Align2::LEFT_CENTER,
+        title,
+        egui::FontId::monospace(13.0),
+        ONE_DARK_PRO.accent,
+    );
+    painter.text(
+        rect.left_top() + egui::vec2(122.0, 16.0),
+        egui::Align2::LEFT_CENTER,
+        subtitle,
+        egui::FontId::proportional(12.0),
+        ONE_DARK_PRO.text_dim,
     );
 }
 
-fn normalize_pressure_sample(raw: &[u32], rows: u32, cols: u32, normalized: &mut PressureFrame) {
+fn split_viewport_body(rect: egui::Rect) -> egui::Rect {
-    const RANGE_MIN: f32 = 0.0;
+    egui::Rect::from_min_max(
-    const RANGE_MAX: f32 = 7000.0;
+        rect.left_top() + egui::vec2(10.0, 44.0),
+        rect.right_bottom() - egui::vec2(10.0, 10.0),
+    )
+}
 
+fn normalize_pressure_sample(raw: &[u32], rows: u32, cols: u32, normalized: &mut PressureFrame) {
     normalized.fill([0.0, 0.0]);
 
     let src_cols = cols.max(1);
@@ -287,26 +712,41 @@ fn normalize_pressure_sample(raw: &[u32], rows: u32, cols: u32, normalized: &mut
             let src_index = (row * src_cols + col) as usize;
             let dst_index = (row * MATRIX_COLS + col) as usize;
             if let Some(value) = raw.get(src_index) {
-                let raw_value = *value as f32;
+                normalized[dst_index] = normalize_pressure_value(*value);
-                let mapped = ((raw_value - RANGE_MIN) / (RANGE_MAX - RANGE_MIN)).clamp(0.0, 1.0);
-                let display_value = if raw_value <= RANGE_MIN + 4.0 {
-                    0.0
-                } else {
-                    raw_value.round().min(9999.0)
-                };
-                normalized[dst_index] = [mapped, display_value];
             }
         }
     }
 }
 
+fn normalize_pressure_samples(raw: &[u32]) -> PressureSamples {
+    raw.iter().copied().map(normalize_pressure_value).collect()
+}
+
+fn normalize_pressure_value(value: u32) -> [f32; 2] {
+    const RANGE_MIN: f32 = 0.0;
+    const RANGE_MAX: f32 = 7000.0;
+
+    let raw_value = value as f32;
+    let mapped = ((raw_value - RANGE_MIN) / (RANGE_MAX - RANGE_MIN)).clamp(0.0, 1.0);
+    let display_value = if raw_value <= RANGE_MIN + 4.0 {
+        0.0
+    } else {
+        raw_value.round().min(9999.0)
+    };
+
+    [mapped, display_value]
+}
+
 impl eframe::App for EskinDesktopApp {
     fn ui(&mut self, ui: &mut egui::Ui, frame: &mut eframe::Frame) {
         let ctx = ui.ctx().clone();
+        let stats = self.connection.stats();
+        self.live_rates.tick_render(stats.rx_frames);
 
-        self.draw_wgpu_background(ui);
+        self.update_pressure_matrix();
+        self.draw_workspace(ui);
         self.draw_title_bar(ui, frame);
-        self.draw_floating_panels(&ctx);
+        self.draw_floating_panels(&ctx, stats);
 
         // Keep repainting while the wgpu background is a realtime viewport.
         ctx.request_repaint();

src/breakout.rs

@@ -0,0 +1,655 @@
+use eframe::egui;
+
+use crate::style::{self, ACCENT_BLUE, ACCENT_GREEN, ACCENT_ORANGE, ACCENT_RED, ONE_DARK_PRO};
+
+const BRICK_ROWS: usize = 7;
+const BRICK_COLS: usize = 12;
+const PADDLE_W: f32 = 0.24;
+const PADDLE_H: f32 = 0.030;
+const PADDLE_Y: f32 = 0.88;
+const PADDLE_SPEED: f32 = 0.92;
+const BALL_RADIUS: f32 = 0.010;
+const BALL_SPEED: f32 = 0.52;
+const MAX_BALL_SPEED: f32 = 0.86;
+const PRESSURE_RANGE_MIN: f32 = 0.0;
+const PRESSURE_RANGE_MAX: f32 = 7000.0;
+const PAUSE_COOLDOWN: f64 = 0.64;
+
+#[derive(Clone, Copy, PartialEq, Eq)]
+enum BreakoutPhase {
+    Idle,
+    Running,
+    Paused,
+    Won,
+    Over,
+}
+
+struct Brick {
+    rect: egui::Rect,
+    alive: bool,
+    flash: f32,
+}
+
+#[derive(Default, Clone, Copy)]
+pub struct BreakoutControl {
+    pub axis: f32,
+    pub top_force: f32,
+    pub left_force: f32,
+    pub right_force: f32,
+}
+
+pub struct BreakoutGame {
+    phase: BreakoutPhase,
+    bricks: Vec<Brick>,
+    paddle_x: f32,
+    ball_pos: egui::Pos2,
+    ball_vel: egui::Vec2,
+    score: u32,
+    combo: u32,
+    lives: u32,
+    last_time: Option<f64>,
+    previous_pause_gesture: bool,
+    pause_locked_until: f64,
+}
+
+impl Default for BreakoutGame {
+    fn default() -> Self {
+        let mut game = Self {
+            phase: BreakoutPhase::Idle,
+            bricks: Vec::new(),
+            paddle_x: 0.5,
+            ball_pos: egui::pos2(0.5, PADDLE_Y - PADDLE_H - BALL_RADIUS),
+            ball_vel: egui::vec2(0.0, 0.0),
+            score: 0,
+            combo: 0,
+            lives: 3,
+            last_time: None,
+            previous_pause_gesture: false,
+            pause_locked_until: 0.0,
+        };
+        game.rebuild_bricks();
+        game
+    }
+}
+
+impl BreakoutGame {
+    pub fn draw_viewport(
+        &mut self,
+        ctx: &egui::Context,
+        rect: egui::Rect,
+        visible: &mut bool,
+        control: BreakoutControl,
+    ) {
+        if !*visible {
+            self.last_time = None;
+            return;
+        }
+
+        ctx.request_repaint();
+        let now = ctx.input(|input| input.time);
+        let dt = self
+            .last_time
+            .map(|last| (now - last) as f32)
+            .unwrap_or(1.0 / 60.0)
+            .clamp(0.0, 1.0 / 30.0);
+        self.last_time = Some(now);
+
+        let mut close_requested = false;
+        egui::Area::new(egui::Id::new("breakout_game_viewport"))
+            .fixed_pos(rect.min)
+            .order(egui::Order::Middle)
+            .show(ctx, |ui| {
+                ui.set_min_size(rect.size());
+                ui.set_max_size(rect.size());
+                style::group_frame().show(ui, |ui| {
+                    ui.set_min_size(rect.size() - egui::vec2(20.0, 16.0));
+                    if self.draw_contents(ui, control, dt, now, true) {
+                        close_requested = true;
+                    }
+                });
+            });
+
+        if close_requested {
+            *visible = false;
+        }
+    }
+
+    fn draw_contents(
+        &mut self,
+        ui: &mut egui::Ui,
+        control: BreakoutControl,
+        dt: f32,
+        now: f64,
+        embedded: bool,
+    ) -> bool {
+        let mut close_requested = false;
+        ui.horizontal(|ui| {
+            ui.colored_label(
+                ACCENT_BLUE,
+                egui::RichText::new("NEON BREAKOUT").monospace().size(13.0),
+            );
+            ui.label(style::subtle_text("压力矩阵控制 / 左右分区驱动"));
+            ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
+                if embedded && ui.add(style::tag_button("退出分屏")).clicked() {
+                    close_requested = true;
+                }
+                if ui.add(style::tag_button("重开")).clicked() {
+                    self.reset();
+                    self.start();
+                }
+                if ui.add(style::tag_button("暂停")).clicked() {
+                    self.toggle_pause();
+                }
+            });
+        });
+
+        ui.add_space(5.0);
+        ui.horizontal(|ui| {
+            status_chip(ui, "状态", self.status_text(), status_color(self.phase));
+            status_chip(ui, "分数", self.score.to_string(), ACCENT_GREEN);
+            status_chip(ui, "连击", self.combo.to_string(), ACCENT_ORANGE);
+            status_chip(ui, "生命", self.lives.to_string(), ACCENT_RED);
+        });
+
+        ui.add_space(7.0);
+        let available = ui.available_size();
+        let game_size = egui::vec2(available.x.max(500.0), (available.y - 6.0).max(330.0));
+        let (rect, response) = ui.allocate_exact_size(game_size, egui::Sense::click());
+        if response.clicked() && self.phase != BreakoutPhase::Running {
+            self.start();
+        }
+
+        let keyboard_axis = ui.input(|input| {
+            (input.key_down(egui::Key::ArrowRight) as i32
+                - input.key_down(egui::Key::ArrowLeft) as i32) as f32
+        });
+        if ui.input(|input| input.key_pressed(egui::Key::Space)) {
+            self.start();
+        }
+        if ui.input(|input| input.key_pressed(egui::Key::P)) {
+            self.toggle_pause();
+        }
+
+        let axis = if keyboard_axis.abs() > 0.0 {
+            keyboard_axis
+        } else {
+            control.axis
+        };
+        self.handle_pressure_gesture(control.top_force, now);
+        self.update(dt, axis);
+        self.paint(ui, rect, control);
+        close_requested
+    }
+
+    fn reset(&mut self) {
+        self.phase = BreakoutPhase::Idle;
+        self.paddle_x = 0.5;
+        self.ball_pos = egui::pos2(0.5, PADDLE_Y - PADDLE_H - BALL_RADIUS);
+        self.ball_vel = egui::Vec2::ZERO;
+        self.score = 0;
+        self.combo = 0;
+        self.lives = 3;
+        self.rebuild_bricks();
+    }
+
+    fn start(&mut self) {
+        if self.phase == BreakoutPhase::Over || self.phase == BreakoutPhase::Won {
+            self.reset();
+        }
+        if self.phase != BreakoutPhase::Running {
+            self.phase = BreakoutPhase::Running;
+            if self.ball_vel == egui::Vec2::ZERO {
+                self.launch_ball();
+            }
+        }
+    }
+
+    fn toggle_pause(&mut self) {
+        self.phase = match self.phase {
+            BreakoutPhase::Running => BreakoutPhase::Paused,
+            BreakoutPhase::Paused => BreakoutPhase::Running,
+            other => other,
+        };
+    }
+
+    fn handle_pressure_gesture(&mut self, top_force: f32, now: f64) {
+        let threshold = pressure_pause_threshold();
+        let active = top_force >= threshold;
+        if active && !self.previous_pause_gesture && now >= self.pause_locked_until {
+            if matches!(
+                self.phase,
+                BreakoutPhase::Idle | BreakoutPhase::Over | BreakoutPhase::Won
+            ) {
+                self.start();
+            } else {
+                self.toggle_pause();
+            }
+            self.pause_locked_until = now + PAUSE_COOLDOWN;
+        }
+        self.previous_pause_gesture = active;
+    }
+
+    fn update(&mut self, dt: f32, axis: f32) {
+        for brick in &mut self.bricks {
+            brick.flash = (brick.flash - dt * 2.4).max(0.0);
+        }
+
+        if self.phase != BreakoutPhase::Running {
+            self.ball_pos = egui::pos2(self.paddle_x, PADDLE_Y - PADDLE_H - BALL_RADIUS);
+            return;
+        }
+
+        self.paddle_x = (self.paddle_x + axis.clamp(-1.0, 1.0) * PADDLE_SPEED * dt)
+            .clamp(PADDLE_W * 0.5, 1.0 - PADDLE_W * 0.5);
+
+        self.ball_pos += self.ball_vel * dt;
+        self.resolve_wall_collision();
+        self.resolve_paddle_collision();
+        self.resolve_brick_collision();
+    }
+
+    fn launch_ball(&mut self) {
+        let direction = 0.24;
+        self.ball_pos = egui::pos2(self.paddle_x, PADDLE_Y - PADDLE_H - BALL_RADIUS);
+        self.ball_vel = egui::vec2(direction, -1.0).normalized() * BALL_SPEED;
+    }
+
+    fn resolve_wall_collision(&mut self) {
+        if self.ball_pos.x - BALL_RADIUS <= 0.0 {
+            self.ball_pos.x = BALL_RADIUS;
+            self.ball_vel.x = self.ball_vel.x.abs();
+        } else if self.ball_pos.x + BALL_RADIUS >= 1.0 {
+            self.ball_pos.x = 1.0 - BALL_RADIUS;
+            self.ball_vel.x = -self.ball_vel.x.abs();
+        }
+
+        if self.ball_pos.y - BALL_RADIUS <= 0.0 {
+            self.ball_pos.y = BALL_RADIUS;
+            self.ball_vel.y = self.ball_vel.y.abs();
+        }
+
+        if self.ball_pos.y - BALL_RADIUS > 1.0 {
+            self.lives = self.lives.saturating_sub(1);
+            self.combo = 0;
+            if self.lives == 0 {
+                self.phase = BreakoutPhase::Over;
+                self.ball_vel = egui::Vec2::ZERO;
+            } else {
+                self.ball_pos = egui::pos2(self.paddle_x, PADDLE_Y - PADDLE_H - BALL_RADIUS);
+                self.launch_ball();
+            }
+        }
+    }
+
+    fn resolve_paddle_collision(&mut self) {
+        if self.ball_vel.y <= 0.0 {
+            return;
+        }
+
+        let paddle = paddle_rect(self.paddle_x);
+        if !circle_hits_rect(self.ball_pos, BALL_RADIUS, paddle) {
+            return;
+        }
+
+        self.ball_pos.y = paddle.top() - BALL_RADIUS;
+        let offset = ((self.ball_pos.x - self.paddle_x) / (PADDLE_W * 0.5)).clamp(-1.0, 1.0);
+        let speed = self.ball_vel.length().clamp(BALL_SPEED, MAX_BALL_SPEED);
+        self.ball_vel = egui::vec2(offset * 0.82, -1.0).normalized() * speed;
+        self.combo = 0;
+    }
+
+    fn resolve_brick_collision(&mut self) {
+        for brick in &mut self.bricks {
+            if !brick.alive || !circle_hits_rect(self.ball_pos, BALL_RADIUS, brick.rect) {
+                continue;
+            }
+
+            let overlap_x = (self.ball_pos.x + BALL_RADIUS - brick.rect.left())
+                .min(brick.rect.right() - (self.ball_pos.x - BALL_RADIUS));
+            let overlap_y = (self.ball_pos.y + BALL_RADIUS - brick.rect.top())
+                .min(brick.rect.bottom() - (self.ball_pos.y - BALL_RADIUS));
+            if overlap_x < overlap_y {
+                self.ball_vel.x *= -1.0;
+            } else {
+                self.ball_vel.y *= -1.0;
+            }
+
+            brick.alive = false;
+            brick.flash = 1.0;
+            self.combo += 1;
+            self.score += 40 + self.combo * 5;
+            let speed = (self.ball_vel.length() * 1.014).min(MAX_BALL_SPEED);
+            self.ball_vel = self.ball_vel.normalized() * speed;
+            break;
+        }
+
+        if self.bricks.iter().all(|brick| !brick.alive) {
+            self.phase = BreakoutPhase::Won;
+            self.ball_vel = egui::Vec2::ZERO;
+        }
+    }
+
+    fn rebuild_bricks(&mut self) {
+        self.bricks.clear();
+        let gap_x = 0.012;
+        let gap_y = 0.017;
+        let left = 0.075;
+        let top = 0.10;
+        let total_w = 0.85;
+        let brick_w = (total_w - gap_x * (BRICK_COLS - 1) as f32) / BRICK_COLS as f32;
+        let brick_h = 0.040;
+
+        for row in 0..BRICK_ROWS {
+            for col in 0..BRICK_COLS {
+                let x = left + col as f32 * (brick_w + gap_x);
+                let y = top + row as f32 * (brick_h + gap_y);
+                self.bricks.push(Brick {
+                    rect: egui::Rect::from_min_size(egui::pos2(x, y), egui::vec2(brick_w, brick_h)),
+                    alive: true,
+                    flash: 0.0,
+                });
+            }
+        }
+    }
+
+    fn status_text(&self) -> &'static str {
+        match self.phase {
+            BreakoutPhase::Idle => "待机",
+            BreakoutPhase::Running => "运行",
+            BreakoutPhase::Paused => "暂停",
+            BreakoutPhase::Won => "过关",
+            BreakoutPhase::Over => "结束",
+        }
+    }
+
+    fn paint(&self, ui: &egui::Ui, rect: egui::Rect, control: BreakoutControl) {
+        let painter = ui.painter_at(rect);
+        painter.rect_filled(
+            rect,
+            egui::CornerRadius::same(6),
+            egui::Color32::from_rgb(8, 14, 19),
+        );
+        painter.rect_stroke(
+            rect,
+            egui::CornerRadius::same(6),
+            egui::Stroke::new(1.0, color_alpha(ONE_DARK_PRO.accent, 110)),
+            egui::StrokeKind::Outside,
+        );
+
+        paint_arena_grid(&painter, rect);
+        for (index, brick) in self.bricks.iter().enumerate() {
+            paint_brick(&painter, rect, brick, index);
+        }
+
+        paint_paddle(&painter, rect, self.paddle_x);
+        paint_ball(&painter, rect, self.ball_pos);
+        paint_control_meter(&painter, rect, control);
+
+        if self.phase == BreakoutPhase::Idle
+            || self.phase == BreakoutPhase::Paused
+            || self.phase == BreakoutPhase::Won
+            || self.phase == BreakoutPhase::Over
+        {
+            paint_center_overlay(&painter, rect, self.phase);
+        }
+    }
+}
+
+pub fn control_from_matrix(raw: &[u32], rows: u32, cols: u32) -> BreakoutControl {
+    if raw.is_empty() {
+        return BreakoutControl::default();
+    }
+
+    let rows = rows.max(1) as usize;
+    let cols = cols.max(1) as usize;
+    let sample_rows = rows.min(2);
+    let sample_cols = cols.min(2);
+    let top_gesture_rows = rows.min(1);
+    let top_gesture_cols = (cols / 3).clamp(1, cols);
+    let top_gesture_col_start = (cols - top_gesture_cols) / 2;
+    let top_gesture_col_end = top_gesture_col_start + top_gesture_cols;
+    let avg = |row_start: usize, row_end: usize, col_start: usize, col_end: usize| -> f32 {
+        let mut sum = 0.0;
+        let mut count = 0.0;
+        for row in row_start..row_end {
+            for col in col_start..col_end {
+                let index = row * cols + col;
+                if let Some(value) = raw.get(index) {
+                    sum += *value as f32;
+                    count += 1.0;
+                }
+            }
+        }
+        if count > 0.0 { sum / count } else { 0.0 }
+    };
+
+    let tl = avg(0, sample_rows, 0, sample_cols);
+    let tr = avg(0, sample_rows, cols.saturating_sub(sample_cols), cols);
+    let bl = avg(rows.saturating_sub(sample_rows), rows, 0, sample_cols);
+    let br = avg(
+        rows.saturating_sub(sample_rows),
+        rows,
+        cols.saturating_sub(sample_cols),
+        cols,
+    );
+
+    let left_force = tl + bl;
+    let right_force = tr + br;
+    let top_force = avg(
+        0,
+        top_gesture_rows,
+        top_gesture_col_start,
+        top_gesture_col_end,
+    );
+    let span = 1200.0_f32.max((PRESSURE_RANGE_MAX - PRESSURE_RANGE_MIN) * 0.22);
+    let raw_axis = ((right_force - left_force) / span).clamp(-1.0, 1.0);
+    let axis = if raw_axis.abs() < 0.045 {
+        0.0
+    } else {
+        raw_axis
+    };
+
+    BreakoutControl {
+        axis,
+        top_force,
+        left_force,
+        right_force,
+    }
+}
+
+fn pressure_pause_threshold() -> f32 {
+    420.0_f32.max(((PRESSURE_RANGE_MAX - PRESSURE_RANGE_MIN).max(1000.0) * 0.07).round())
+}
+
+fn paddle_rect(paddle_x: f32) -> egui::Rect {
+    egui::Rect::from_center_size(
+        egui::pos2(paddle_x, PADDLE_Y),
+        egui::vec2(PADDLE_W, PADDLE_H),
+    )
+}
+
+fn circle_hits_rect(center: egui::Pos2, radius: f32, rect: egui::Rect) -> bool {
+    let closest_x = center.x.clamp(rect.left(), rect.right());
+    let closest_y = center.y.clamp(rect.top(), rect.bottom());
+    let dx = center.x - closest_x;
+    let dy = center.y - closest_y;
+    dx * dx + dy * dy <= radius * radius
+}
+
+fn status_chip(ui: &mut egui::Ui, label: &'static str, value: impl ToString, color: egui::Color32) {
+    egui::Frame::new()
+        .fill(color_alpha(ONE_DARK_PRO.panel_deep, 190))
+        .stroke(egui::Stroke::new(1.0, color_alpha(color, 92)))
+        .corner_radius(egui::CornerRadius::same(4))
+        .inner_margin(egui::Margin::symmetric(8, 4))
+        .show(ui, |ui| {
+            ui.horizontal(|ui| {
+                ui.colored_label(ONE_DARK_PRO.text_subtle, label);
+                ui.colored_label(color, value.to_string());
+            });
+        });
+}
+
+fn status_color(phase: BreakoutPhase) -> egui::Color32 {
+    match phase {
+        BreakoutPhase::Idle => ONE_DARK_PRO.text_dim,
+        BreakoutPhase::Running => ACCENT_GREEN,
+        BreakoutPhase::Paused => ACCENT_ORANGE,
+        BreakoutPhase::Won => ACCENT_GREEN,
+        BreakoutPhase::Over => ACCENT_RED,
+    }
+}
+
+fn to_screen(rect: egui::Rect, point: egui::Pos2) -> egui::Pos2 {
+    egui::pos2(
+        rect.left() + point.x * rect.width(),
+        rect.top() + point.y * rect.height(),
+    )
+}
+
+fn to_screen_rect(rect: egui::Rect, local: egui::Rect) -> egui::Rect {
+    egui::Rect::from_min_max(
+        rect.left_top() + local.min.to_vec2() * rect.size(),
+        rect.left_top() + local.max.to_vec2() * rect.size(),
+    )
+}
+
+fn paint_arena_grid(painter: &egui::Painter, rect: egui::Rect) {
+    // 游戏背景保持纯净，避免网格和外框干扰砖块本身的色块节奏。
+    painter.rect_filled(
+        rect,
+        egui::CornerRadius::same(6),
+        egui::Color32::from_rgb(2, 8, 10),
+    );
+
+    painter.rect_stroke(
+        rect,
+        egui::CornerRadius::same(6),
+        egui::Stroke::new(1.0, color_alpha(ONE_DARK_PRO.accent, 70)),
+        egui::StrokeKind::Inside,
+    );
+}
+
+fn paint_brick(painter: &egui::Painter, arena: egui::Rect, brick: &Brick, index: usize) {
+    let rect = to_screen_rect(arena, brick.rect);
+    if brick.alive {
+        let row = index / BRICK_COLS;
+        let col = index % BRICK_COLS;
+        // 参考示例图：纯色矩形砖块，黑色间隔由砖块之间的空隙自然露出。
+        painter.rect_filled(rect, egui::CornerRadius::ZERO, brick_color(row, col));
+    } else if brick.flash > 0.0 {
+        let alpha = (brick.flash * 150.0) as u8;
+        painter.rect_stroke(
+            rect.expand(4.0 * brick.flash),
+            egui::CornerRadius::same(4),
+            egui::Stroke::new(1.4, color_alpha(ONE_DARK_PRO.accent_hot, alpha)),
+            egui::StrokeKind::Outside,
+        );
+    }
+}
+
+fn paint_paddle(painter: &egui::Painter, arena: egui::Rect, paddle_x: f32) {
+    let rect = to_screen_rect(arena, paddle_rect(paddle_x));
+    // 托盘也改成纯色块，和砖块保持同一种视觉语言。
+    painter.rect_filled(rect, egui::CornerRadius::ZERO, ACCENT_BLUE);
+}
+
+fn paint_ball(painter: &egui::Painter, arena: egui::Rect, ball_pos: egui::Pos2) {
+    let center = to_screen(arena, ball_pos);
+    let radius = BALL_RADIUS * arena.width().min(arena.height());
+    // 球保留为一个普通实心圆，避免额外高光和光晕。
+    painter.circle_filled(center, radius, egui::Color32::from_rgb(241, 207, 70));
+}
+
+fn paint_control_meter(painter: &egui::Painter, arena: egui::Rect, control: BreakoutControl) {
+    let meter_width = arena.width().mul_add(0.30, 0.0).clamp(180.0, 240.0);
+    let meter = egui::Rect::from_min_size(
+        arena.left_bottom() + egui::vec2(18.0, -34.0),
+        egui::vec2(meter_width, 18.0),
+    );
+    painter.rect_filled(
+        meter,
+        egui::CornerRadius::same(4),
+        color_alpha(ONE_DARK_PRO.panel_deep, 220),
+    );
+    painter.rect_stroke(
+        meter,
+        egui::CornerRadius::same(4),
+        egui::Stroke::new(1.0, color_alpha(ONE_DARK_PRO.border, 120)),
+        egui::StrokeKind::Outside,
+    );
+    let center_x = meter.center().x;
+    painter.line_segment(
+        [
+            egui::pos2(center_x, meter.top()),
+            egui::pos2(center_x, meter.bottom()),
+        ],
+        egui::Stroke::new(1.0, ONE_DARK_PRO.border_soft),
+    );
+    let marker_x = center_x + control.axis.clamp(-1.0, 1.0) * meter.width() * 0.45;
+    painter.circle_filled(
+        egui::pos2(marker_x, meter.center().y),
+        5.0,
+        color_alpha(ACCENT_GREEN, 210),
+    );
+    painter.circle_filled(
+        egui::pos2(marker_x, meter.center().y),
+        2.3,
+        color_alpha(egui::Color32::WHITE, 150),
+    );
+    painter.text(
+        meter.right_center() + egui::vec2(10.0, 0.0),
+        egui::Align2::LEFT_CENTER,
+        format!(
+            "L {:>4.0}  R {:>4.0}  T {:>4.0}",
+            control.left_force, control.right_force, control.top_force
+        ),
+        egui::FontId::monospace(10.0),
+        ONE_DARK_PRO.text_dim,
+    );
+}
+
+fn paint_center_overlay(painter: &egui::Painter, rect: egui::Rect, phase: BreakoutPhase) {
+    painter.rect_filled(
+        rect,
+        egui::CornerRadius::same(6),
+        color_alpha(egui::Color32::BLACK, 82),
+    );
+    let (title, detail) = match phase {
+        BreakoutPhase::Idle => ("按压顶部或点击开始", "左右分区压力控制挡板"),
+        BreakoutPhase::Paused => ("已暂停", "再次按压顶部、P 或点击暂停继续"),
+        BreakoutPhase::Won => ("恭喜过关", "按压顶部、点击或空格重新开始"),
+        BreakoutPhase::Over => ("游戏结束", "点击或空格重开"),
+        BreakoutPhase::Running => ("", ""),
+    };
+    painter.text(
+        rect.center() - egui::vec2(0.0, 10.0),
+        egui::Align2::CENTER_CENTER,
+        title,
+        egui::FontId::proportional(24.0),
+        ONE_DARK_PRO.text,
+    );
+    painter.text(
+        rect.center() + egui::vec2(0.0, 20.0),
+        egui::Align2::CENTER_CENTER,
+        detail,
+        egui::FontId::proportional(13.0),
+        ONE_DARK_PRO.text_dim,
+    );
+}
+
+fn brick_color(row: usize, col: usize) -> egui::Color32 {
+    const PALETTE: [egui::Color32; 5] = [
+        egui::Color32::from_rgb(46, 178, 104),
+        egui::Color32::from_rgb(73, 188, 220),
+        egui::Color32::from_rgb(234, 199, 73),
+        egui::Color32::from_rgb(232, 125, 64),
+        egui::Color32::from_rgb(237, 68, 62),
+    ];
+
+    PALETTE[(col + row * 2) % PALETTE.len()]
+}
+
+fn color_alpha(color: egui::Color32, alpha: u8) -> egui::Color32 {
+    egui::Color32::from_rgba_premultiplied(color.r(), color.g(), color.b(), alpha)
+}

src/connection.rs

@@ -4,7 +4,10 @@ use std::time::Duration;
 
 use crossbeam_channel::{self, Receiver, Sender, TryRecvError};
 
-use crate::serial_core::serial::{SerialPortReadWrite, run_serial_loop};
+use crate::recording::Recorder;
+use crate::serial_core::serial::{
+    SerialIoStats, SerialPortReadWrite, SerialProtocol, run_serial_loop,
+};
 
 /// Connection state visible to the UI.
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
@@ -27,6 +30,9 @@ struct Session {
     cancel_tx: Sender<()>,
     handle: JoinHandle<()>,
     sample_rx: Receiver<Vec<i32>>,
+    stats_rx: Receiver<SerialIoStats>,
+    rows: u32,
+    cols: u32,
 }
 
 /// Thread-safe connection manager that the UI and renderer can share.
@@ -34,6 +40,7 @@ pub struct ConnectionManager {
     state: Arc<Mutex<ConnectionState>>,
     session: Arc<Mutex<Option<Session>>>,
     latest_sample: Arc<Mutex<Option<PressureSample>>>,
+    stats: Arc<Mutex<SerialIoStats>>,
 }
 
 impl ConnectionManager {
@@ -42,6 +49,7 @@ impl ConnectionManager {
             state: Arc::new(Mutex::new(ConnectionState::Disconnected)),
             session: Arc::new(Mutex::new(None)),
             latest_sample: Arc::new(Mutex::new(None)),
+            stats: Arc::new(Mutex::new(SerialIoStats::default())),
         }
     }
 
@@ -53,8 +61,31 @@ impl ConnectionManager {
         *self.state.lock().unwrap() = new_state;
     }
 
+    pub fn stats(&self) -> SerialIoStats {
+        let session = self.session.lock().unwrap();
+        if let Some(ref session) = *session {
+            loop {
+                match session.stats_rx.try_recv() {
+                    Ok(stats) => *self.stats.lock().unwrap() = stats,
+                    Err(TryRecvError::Empty) => break,
+                    Err(TryRecvError::Disconnected) => break,
+                }
+            }
+        }
+
+        *self.stats.lock().unwrap()
+    }
+
     /// Connect to the given serial port and start streaming in a background thread.
-    pub fn connect(&self, port_name: &str, rows: u32, cols: u32) {
+    pub fn connect(
+        &self,
+        port_name: &str,
+        rows: u32,
+        cols: u32,
+        baud_rate: u32,
+        protocol: SerialProtocol,
+        recorder: Recorder,
+    ) {
         self.disconnect();
         self.set_state(ConnectionState::Connecting);
 
@@ -64,16 +95,22 @@ impl ConnectionManager {
         let latest_sample = Arc::clone(&self.latest_sample);
         let (cancel_tx, cancel_rx) = crossbeam_channel::bounded::<()>(1);
         let (sample_tx, sample_rx) = crossbeam_channel::bounded::<Vec<i32>>(16);
+        let (stats_tx, stats_rx) = crossbeam_channel::bounded::<SerialIoStats>(16);
+        *self.stats.lock().unwrap() = SerialIoStats::default();
 
         let handle = thread::spawn(move || {
             let result = run_device_loop(
                 &port,
                 rows,
                 cols,
+                baud_rate,
+                protocol,
                 &state,
                 &cancel_rx,
                 &sample_tx,
+                &stats_tx,
                 &latest_sample,
+                recorder,
             );
             if let Err(e) = result {
                 eprintln!("[connection] device loop error: {e}");
@@ -85,6 +122,9 @@ impl ConnectionManager {
             cancel_tx,
             handle,
             sample_rx,
+            stats_rx,
+            rows,
+            cols,
         });
     }
 
@@ -102,6 +142,7 @@ impl ConnectionManager {
 
         self.set_state(ConnectionState::Disconnected);
         *self.latest_sample.lock().unwrap() = None;
+        *self.stats.lock().unwrap() = SerialIoStats::default();
     }
 
     /// Drain pending samples (non-blocking) and return the last one.
@@ -112,10 +153,12 @@ impl ConnectionManager {
             loop {
                 match session.sample_rx.try_recv() {
                     Ok(vals) => {
-                        let rows = 12u32;
-                        let cols = 7u32;
                         let matrix = vals.iter().map(|v| (*v).max(0) as u32).collect();
-                        last = Some(PressureSample { matrix, rows, cols });
+                        last = Some(PressureSample {
+                            matrix,
+                            rows: session.rows,
+                            cols: session.cols,
+                        });
                     }
                     Err(TryRecvError::Empty) => break,
                     Err(TryRecvError::Disconnected) => break,
@@ -140,13 +183,17 @@ fn run_device_loop(
     port_name: &str,
     rows: u32,
     cols: u32,
+    baud_rate: u32,
+    protocol: SerialProtocol,
     state: &Arc<Mutex<ConnectionState>>,
     cancel_rx: &Receiver<()>,
     sample_tx: &Sender<Vec<i32>>,
+    stats_tx: &Sender<SerialIoStats>,
     latest_sample: &Arc<Mutex<Option<PressureSample>>>,
+    recorder: Recorder,
 ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
-    let port = serialport::new(port_name, 921_600)
+    let port = serialport::new(port_name, baud_rate)
-        .timeout(Duration::from_millis(100))
+        .timeout(Duration::from_millis(1))
         .open()?;
 
     *state.lock().unwrap() = ConnectionState::Connected;
@@ -154,36 +201,19 @@ fn run_device_loop(
     let mut rw = SerialPortReadWrite::new(port);
     *state.lock().unwrap() = ConnectionState::Streaming;
 
-    // We need to also forward samples to latest_sample
+    run_serial_loop(
-    let (inner_tx, inner_rx) = crossbeam_channel::bounded::<Vec<i32>>(16);
+        &mut rw,
-    let latest = Arc::clone(latest_sample);
+        rows as usize,
-    let outer_tx = sample_tx.clone();
+        cols as usize,
+        protocol,
+        cancel_rx,
+        sample_tx,
+        Some(stats_tx),
+        Some(&recorder),
+    );
 
-    // Bridge thread: reads from inner channel, forwards to both sample_tx and latest_sample
+    if let Ok(mut latest) = latest_sample.lock() {
-    let bridge_cancel = cancel_rx.clone();
+        *latest = None;
-    let bridge_handle = thread::spawn(move || {
+    }
-        loop {
-            if bridge_cancel.try_recv().is_ok() {
-                break;
-            }
-            match inner_rx.try_recv() {
-                Ok(vals) => {
-                    // Store latest
-                    let matrix = vals.iter().map(|v| (*v).max(0) as u32).collect();
-                    *latest.lock().unwrap() = Some(PressureSample { matrix, rows, cols });
-                    // Forward
-                    let _ = outer_tx.try_send(vals);
-                }
-                Err(TryRecvError::Empty) => {
-                    std::thread::sleep(Duration::from_millis(1));
-                }
-                Err(TryRecvError::Disconnected) => break,
-            }
-        }
-    });
-
-    run_serial_loop(&mut rw, rows as usize, cols as usize, cancel_rx, &inner_tx);
-
-    let _ = bridge_handle.join();
     Ok(())
 }

src/force.rs

@@ -0,0 +1,49 @@
+use crate::serial_core::multi_dim_force::PztProcessor;
+
+const FINGER_SAMPLE_COUNT: usize = 84;
+const MIN_TANGENTIAL_MAGNITUDE: f32 = 0.02;
+
+#[derive(Debug, Clone, Copy)]
+pub struct HudSpatialForce {
+    pub angle_deg: f32,
+    pub magnitude: f32,
+}
+
+pub struct ForceEstimatorState {
+    pzt_processor: PztProcessor,
+}
+
+impl ForceEstimatorState {
+    pub fn new() -> Self {
+        Self {
+            pzt_processor: PztProcessor::new(),
+        }
+    }
+
+    pub fn reset(&mut self) {
+        self.pzt_processor.reset_baseline();
+    }
+
+    pub fn analyze(&mut self, values: &[u32]) -> Option<HudSpatialForce> {
+        if values.len() != FINGER_SAMPLE_COUNT {
+            return None;
+        }
+
+        let pzt_values = values.iter().map(|value| *value as f32).collect::<Vec<_>>();
+
+        self.pzt_processor
+            .get_pzt_analysis(&pzt_values)
+            .ok()
+            .filter(|analysis| analysis.magnitude > MIN_TANGENTIAL_MAGNITUDE)
+            .map(|analysis| HudSpatialForce {
+                angle_deg: analysis.angle_deg,
+                magnitude: analysis.magnitude,
+            })
+    }
+}
+
+impl Default for ForceEstimatorState {
+    fn default() -> Self {
+        Self::new()
+    }
+}

src/main.rs

@@ -1,13 +1,17 @@
+#![allow(dead_code)]
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 mod app;
+mod breakout;
 mod connection;
+mod force;
 mod matrix;
 mod model;
 mod recording;
 mod render;
 mod resources;
 mod serial_core;
+mod style;
 mod texture;
-mod theme;
 mod ui;
 mod utils;
 use app::EskinDesktopApp;

src/model.rs

@@ -2,6 +2,7 @@ use eframe::egui_wgpu::wgpu;
 use std::ops::Range;
 
 use crate::texture;
+
 pub trait Vertex {
     fn desc<'a>() -> wgpu::VertexBufferLayout<'a>;
 }
@@ -12,6 +13,8 @@ pub struct ModelVertex {
     pub position: [f32; 3],
     pub tex_coords: [f32; 2],
     pub normal: [f32; 3],
+    pub color: [f32; 4],
+    pub tangent: [f32; 4],
 }
 
 impl Vertex for ModelVertex {
@@ -36,6 +39,16 @@ impl Vertex for ModelVertex {
                     shader_location: 2,
                     format: wgpu::VertexFormat::Float32x3,
                 },
+                wgpu::VertexAttribute {
+                    offset: mem::size_of::<[f32; 8]>() as wgpu::BufferAddress,
+                    shader_location: 3,
+                    format: wgpu::VertexFormat::Float32x4,
+                },
+                wgpu::VertexAttribute {
+                    offset: mem::size_of::<[f32; 12]>() as wgpu::BufferAddress,
+                    shader_location: 4,
+                    format: wgpu::VertexFormat::Float32x4,
+                },
             ],
         }
     }
@@ -54,7 +67,8 @@ impl Instance {
     pub fn to_raw(&self) -> InstanceRaw {
         InstanceRaw {
             model: (glam::Mat4::from_translation(self.position)
-                * glam::Mat4::from_quat(self.rotation))
+                * glam::Mat4::from_quat(self.rotation)
+                * glam::Mat4::from_scale(glam::Vec3::splat(128.0)))
             .to_cols_array_2d(),
         }
     }
@@ -111,9 +125,43 @@ pub struct Model {
     pub materials: Vec<Material>,
 }
 
+#[derive(Copy, Clone, Debug, PartialEq, Eq)]
+pub enum AlphaMode {
+    Opaque,
+    Mask,
+    Blend,
+}
+
+impl AlphaMode {
+    pub fn as_str(self) -> &'static str {
+        match self {
+            Self::Opaque => "OPAQUE",
+            Self::Mask => "MASK",
+            Self::Blend => "BLEND",
+        }
+    }
+
+    pub fn shader_value(self) -> f32 {
+        match self {
+            Self::Opaque => 0.0,
+            Self::Mask => 1.0,
+            Self::Blend => 2.0,
+        }
+    }
+}
+
 pub struct Material {
     pub name: String,
-    pub diffuse_texture: texture::Texture,
+    pub alpha_mode: AlphaMode,
+    pub alpha_cutoff: f32,
+    pub base_color_factor: [f32; 4],
+    pub double_sided: bool,
+    pub base_color_texture: texture::Texture,
+    pub metallic_roughness_texture: texture::Texture,
+    pub normal_texture: texture::Texture,
+    pub occlusion_texture: texture::Texture,
+    pub emissive_texture: texture::Texture,
+    pub params_buffer: wgpu::Buffer,
     pub bind_group: wgpu::BindGroup,
 }
 
@@ -123,6 +171,7 @@ pub struct Mesh {
     pub index_buffer: wgpu::Buffer,
     pub num_elements: u32,
     pub material: usize,
+    pub center: [f32; 3],
 }
 
 pub trait DrawModel<'a> {

src/resources.rs

@@ -1,8 +1,26 @@
-use crate::{model, texture};
+use crate::{
+    model::{self, AlphaMode},
+    texture::{self, TextureColorSpace, TextureSamplerDescriptor},
+};
+use anyhow::{Context, bail};
 use eframe::wgpu;
 use eframe::wgpu::util::DeviceExt;
+use glam::{Mat3, Mat4, Vec2, Vec3};
 use std::path::{Path, PathBuf};
 
+const WHITE_TEXTURE: &[u8; 4] = &[255, 255, 255, 255];
+const BLACK_TEXTURE: &[u8; 4] = &[0, 0, 0, 255];
+const FLAT_NORMAL_TEXTURE: &[u8; 4] = &[128, 128, 255, 255];
+
+#[repr(C)]
+#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]
+struct MaterialParams {
+    base_color: [f32; 4],
+    metallic_roughness: [f32; 4],
+    emissive_alpha: [f32; 4],
+    flags: [f32; 4],
+}
+
 fn resource_path(file_name: &str) -> PathBuf {
     Path::new(env!("RESOURCE_DIR")).join(file_name)
 }
@@ -29,6 +47,26 @@ pub fn load_model(
     device: &wgpu::Device,
     queue: &wgpu::Queue,
     texture_bind_group_layout: &wgpu::BindGroupLayout,
+) -> anyhow::Result<model::Model> {
+    match Path::new(file_name)
+        .extension()
+        .and_then(|extension| extension.to_str())
+        .map(str::to_ascii_lowercase)
+        .as_deref()
+    {
+        Some("obj") => load_obj_model(file_name, device, queue, texture_bind_group_layout),
+        Some("gltf") | Some("glb") => {
+            load_gltf_model(file_name, device, queue, texture_bind_group_layout)
+        }
+        _ => bail!("unsupported model format: {file_name}"),
+    }
+}
+
+fn load_obj_model(
+    file_name: &str,
+    device: &wgpu::Device,
+    queue: &wgpu::Queue,
+    texture_bind_group_layout: &wgpu::BindGroupLayout,
 ) -> anyhow::Result<model::Model> {
     let path = resource_path(file_name);
     let (models, obj_materials) = tobj::load_obj(
@@ -42,44 +80,93 @@ pub fn load_model(
 
     let mut materials = Vec::new();
     for material in obj_materials? {
-        let diffuse_texture = match material.diffuse_texture.as_deref() {
+        let base_color = material
+            .diffuse
+            .map(|diffuse| [diffuse[0], diffuse[1], diffuse[2], 1.0])
+            .unwrap_or([1.0, 1.0, 1.0, 1.0]);
+        let base_color_texture = match material.diffuse_texture.as_deref() {
             Some(texture_path) => load_texture(texture_path, device, queue)?,
-            None => texture::Texture::from_rgba8(
+            None => default_texture(
                 device,
                 queue,
-                &[255, 255, 255, 255],
-                1,
-                1,
                 &material.name,
+                TextureColorSpace::Srgb,
+                WHITE_TEXTURE,
             )?,
         };
 
-        let bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
+        let material_textures = MaterialTextures {
-            label: Some(&format!("{} Texture Bind Group", material.name)),
+            base_color_texture,
-            layout: texture_bind_group_layout,
+            metallic_roughness_texture: default_texture(
-            entries: &[
+                device,
-                wgpu::BindGroupEntry {
+                queue,
-                    binding: 0,
+                &format!("{} metallic-roughness", material.name),
-                    resource: wgpu::BindingResource::TextureView(&diffuse_texture.view),
+                TextureColorSpace::Linear,
-                },
+                WHITE_TEXTURE,
-                wgpu::BindGroupEntry {
+            )?,
-                    binding: 1,
+            normal_texture: default_texture(
-                    resource: wgpu::BindingResource::Sampler(&diffuse_texture.sampler),
+                device,
-                },
+                queue,
-            ],
+                &format!("{} normal", material.name),
-        });
+                TextureColorSpace::Linear,
+                FLAT_NORMAL_TEXTURE,
+            )?,
+            occlusion_texture: default_texture(
+                device,
+                queue,
+                &format!("{} occlusion", material.name),
+                TextureColorSpace::Linear,
+                WHITE_TEXTURE,
+            )?,
+            emissive_texture: default_texture(
+                device,
+                queue,
+                &format!("{} emissive", material.name),
+                TextureColorSpace::Srgb,
+                BLACK_TEXTURE,
+            )?,
+        };
+        let params = MaterialParams {
+            base_color,
+            metallic_roughness: [0.0, 0.5, 1.0, 1.0],
+            emissive_alpha: [0.0, 0.0, 0.0, 0.0],
+            flags: [0.5, 0.0, 0.0, 0.0],
+        };
+        log_material_debug(
+            materials.len(),
+            &material.name,
+            AlphaMode::Opaque,
+            0.5,
+            base_color[3],
+            false,
+        );
+        materials.push(create_material(
+            device,
+            texture_bind_group_layout,
+            material.name,
+            material_textures,
+            params,
+            AlphaMode::Opaque,
+            0.5,
+            base_color,
+            false,
+        ));
+    }
 
-        materials.push(model::Material {
+    if materials.is_empty() {
-            name: material.name,
+        materials.push(create_color_material(
-            diffuse_texture,
+            "default",
-            bind_group,
+            [1.0, 1.0, 1.0, 1.0],
-        });
+            device,
+            queue,
+            texture_bind_group_layout,
+        )?);
     }
 
     let meshes = models
         .into_iter()
         .map(|m| {
-            let vertices = (0..m.mesh.positions.len() / 3)
+            let mut vertices = (0..m.mesh.positions.len() / 3)
                 .map(|i| model::ModelVertex {
                     position: [
                         m.mesh.positions[i * 3],
@@ -87,7 +174,7 @@ pub fn load_model(
                         m.mesh.positions[i * 3 + 2],
                     ],
                     tex_coords: if m.mesh.texcoords.len() >= i * 2 + 2 {
-                        [m.mesh.texcoords[i * 2], m.mesh.texcoords[i * 2 + 1]]
+                        [m.mesh.texcoords[i * 2], 1.0 - m.mesh.texcoords[i * 2 + 1]]
                     } else {
                         [0.0, 0.0]
                     },
@@ -100,8 +187,11 @@ pub fn load_model(
                     } else {
                         [0.0, 1.0, 0.0]
                     },
+                    color: [1.0, 1.0, 1.0, 1.0],
+                    tangent: [1.0, 0.0, 0.0, 1.0],
                 })
                 .collect::<Vec<_>>();
+            generate_tangents(&mut vertices, &m.mesh.indices);
 
             let vertex_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
                 label: Some(&format!("{} Vertex Buffer", m.name)),
@@ -120,9 +210,798 @@ pub fn load_model(
                 index_buffer,
                 num_elements: m.mesh.indices.len() as u32,
                 material: m.mesh.material_id.unwrap_or(0),
+                center: mesh_center(&vertices),
             }
         })
         .collect::<Vec<_>>();
 
     Ok(model::Model { meshes, materials })
 }
+
+fn load_gltf_model(
+    file_name: &str,
+    device: &wgpu::Device,
+    queue: &wgpu::Queue,
+    texture_bind_group_layout: &wgpu::BindGroupLayout,
+) -> anyhow::Result<model::Model> {
+    let path = resource_path(file_name);
+    let (document, buffers, images) =
+        gltf::import(&path).with_context(|| format!("failed to import {file_name}"))?;
+
+    let mut materials = Vec::new();
+    for material in document.materials() {
+        materials.push(create_gltf_material(
+            &material,
+            &images,
+            device,
+            queue,
+            texture_bind_group_layout,
+        )?);
+    }
+
+    let default_material = materials.len();
+    materials.push(create_color_material(
+        "default",
+        [1.0, 1.0, 1.0, 1.0],
+        device,
+        queue,
+        texture_bind_group_layout,
+    )?);
+
+    let mut meshes = Vec::new();
+    let scene = document
+        .default_scene()
+        .or_else(|| document.scenes().next())
+        .context("glTF has no scene")?;
+    for node in scene.nodes() {
+        append_gltf_node_meshes(
+            &node,
+            Mat4::IDENTITY,
+            &buffers,
+            device,
+            &mut meshes,
+            default_material,
+        )?;
+    }
+
+    Ok(model::Model { meshes, materials })
+}
+
+struct MaterialTextures {
+    base_color_texture: texture::Texture,
+    metallic_roughness_texture: texture::Texture,
+    normal_texture: texture::Texture,
+    occlusion_texture: texture::Texture,
+    emissive_texture: texture::Texture,
+}
+
+fn create_gltf_material(
+    material: &gltf::Material<'_>,
+    images: &[gltf::image::Data],
+    device: &wgpu::Device,
+    queue: &wgpu::Queue,
+    texture_bind_group_layout: &wgpu::BindGroupLayout,
+) -> anyhow::Result<model::Material> {
+    let pbr = material.pbr_metallic_roughness();
+    let name = material.name().unwrap_or("gltf_material");
+    let normal_info = material.normal_texture();
+    let occlusion_info = material.occlusion_texture();
+
+    let material_textures = MaterialTextures {
+        base_color_texture: texture_from_gltf_texture(
+            pbr.base_color_texture().map(|info| info.texture()),
+            images,
+            device,
+            queue,
+            &format!("{name} baseColor"),
+            TextureColorSpace::Srgb,
+            WHITE_TEXTURE,
+        )?,
+        metallic_roughness_texture: texture_from_gltf_texture(
+            pbr.metallic_roughness_texture().map(|info| info.texture()),
+            images,
+            device,
+            queue,
+            &format!("{name} metallicRoughness"),
+            TextureColorSpace::Linear,
+            WHITE_TEXTURE,
+        )?,
+        normal_texture: texture_from_gltf_texture(
+            normal_info.as_ref().map(|info| info.texture()),
+            images,
+            device,
+            queue,
+            &format!("{name} normal"),
+            TextureColorSpace::Linear,
+            FLAT_NORMAL_TEXTURE,
+        )?,
+        occlusion_texture: texture_from_gltf_texture(
+            occlusion_info.as_ref().map(|info| info.texture()),
+            images,
+            device,
+            queue,
+            &format!("{name} occlusion"),
+            TextureColorSpace::Linear,
+            WHITE_TEXTURE,
+        )?,
+        emissive_texture: texture_from_gltf_texture(
+            material.emissive_texture().map(|info| info.texture()),
+            images,
+            device,
+            queue,
+            &format!("{name} emissive"),
+            TextureColorSpace::Srgb,
+            BLACK_TEXTURE,
+        )?,
+    };
+
+    let alpha_mode = match material.alpha_mode() {
+        gltf::material::AlphaMode::Opaque => AlphaMode::Opaque,
+        gltf::material::AlphaMode::Mask => AlphaMode::Mask,
+        gltf::material::AlphaMode::Blend => AlphaMode::Blend,
+    };
+    let normal_scale = normal_info.as_ref().map(|info| info.scale()).unwrap_or(1.0);
+    let occlusion_strength = occlusion_info
+        .as_ref()
+        .map(|info| info.strength())
+        .unwrap_or(1.0);
+    let emissive_factor = material.emissive_factor();
+    let base_color_factor = pbr.base_color_factor();
+    let alpha_cutoff = material.alpha_cutoff().unwrap_or(0.5);
+    let double_sided = material.double_sided();
+    let params = MaterialParams {
+        base_color: base_color_factor,
+        metallic_roughness: [
+            pbr.metallic_factor(),
+            pbr.roughness_factor(),
+            normal_scale,
+            occlusion_strength,
+        ],
+        emissive_alpha: [
+            emissive_factor[0],
+            emissive_factor[1],
+            emissive_factor[2],
+            alpha_mode.shader_value(),
+        ],
+        flags: [
+            alpha_cutoff,
+            0.0,
+            if normal_info.is_some() { 1.0 } else { 0.0 },
+            if double_sided { 1.0 } else { 0.0 },
+        ],
+    };
+    log_material_debug(
+        material.index().unwrap_or(usize::MAX),
+        name,
+        alpha_mode,
+        alpha_cutoff,
+        base_color_factor[3],
+        double_sided,
+    );
+
+    Ok(create_material(
+        device,
+        texture_bind_group_layout,
+        name.to_owned(),
+        material_textures,
+        params,
+        alpha_mode,
+        alpha_cutoff,
+        base_color_factor,
+        double_sided,
+    ))
+}
+
+fn create_color_material(
+    name: &str,
+    color: [f32; 4],
+    device: &wgpu::Device,
+    queue: &wgpu::Queue,
+    texture_bind_group_layout: &wgpu::BindGroupLayout,
+) -> anyhow::Result<model::Material> {
+    let material_textures = MaterialTextures {
+        base_color_texture: default_texture(
+            device,
+            queue,
+            name,
+            TextureColorSpace::Srgb,
+            WHITE_TEXTURE,
+        )?,
+        metallic_roughness_texture: default_texture(
+            device,
+            queue,
+            &format!("{name} metallic-roughness"),
+            TextureColorSpace::Linear,
+            WHITE_TEXTURE,
+        )?,
+        normal_texture: default_texture(
+            device,
+            queue,
+            &format!("{name} normal"),
+            TextureColorSpace::Linear,
+            FLAT_NORMAL_TEXTURE,
+        )?,
+        occlusion_texture: default_texture(
+            device,
+            queue,
+            &format!("{name} occlusion"),
+            TextureColorSpace::Linear,
+            WHITE_TEXTURE,
+        )?,
+        emissive_texture: default_texture(
+            device,
+            queue,
+            &format!("{name} emissive"),
+            TextureColorSpace::Srgb,
+            BLACK_TEXTURE,
+        )?,
+    };
+    let params = MaterialParams {
+        base_color: color,
+        metallic_roughness: [1.0, 1.0, 1.0, 1.0],
+        emissive_alpha: [0.0, 0.0, 0.0, 0.0],
+        flags: [0.5, 0.0, 0.0, 0.0],
+    };
+    log_material_debug(usize::MAX, name, AlphaMode::Opaque, 0.5, color[3], false);
+
+    Ok(create_material(
+        device,
+        texture_bind_group_layout,
+        name.to_owned(),
+        material_textures,
+        params,
+        AlphaMode::Opaque,
+        0.5,
+        color,
+        false,
+    ))
+}
+
+fn create_material(
+    device: &wgpu::Device,
+    texture_bind_group_layout: &wgpu::BindGroupLayout,
+    name: String,
+    textures: MaterialTextures,
+    params: MaterialParams,
+    alpha_mode: AlphaMode,
+    alpha_cutoff: f32,
+    base_color_factor: [f32; 4],
+    double_sided: bool,
+) -> model::Material {
+    let params_buffer = create_material_params_buffer(device, &name, params);
+    let bind_group = create_texture_bind_group(
+        device,
+        texture_bind_group_layout,
+        &name,
+        &textures,
+        &params_buffer,
+    );
+
+    model::Material {
+        name,
+        alpha_mode,
+        alpha_cutoff,
+        base_color_factor,
+        double_sided,
+        base_color_texture: textures.base_color_texture,
+        metallic_roughness_texture: textures.metallic_roughness_texture,
+        normal_texture: textures.normal_texture,
+        occlusion_texture: textures.occlusion_texture,
+        emissive_texture: textures.emissive_texture,
+        params_buffer,
+        bind_group,
+    }
+}
+
+fn default_texture(
+    device: &wgpu::Device,
+    queue: &wgpu::Queue,
+    label: &str,
+    color_space: TextureColorSpace,
+    rgba: &[u8; 4],
+) -> anyhow::Result<texture::Texture> {
+    texture::Texture::from_rgba8_with_sampler(
+        device,
+        queue,
+        rgba,
+        1,
+        1,
+        label,
+        color_space,
+        TextureSamplerDescriptor::default(),
+    )
+}
+
+fn create_material_params_buffer(
+    device: &wgpu::Device,
+    name: &str,
+    params: MaterialParams,
+) -> wgpu::Buffer {
+    device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
+        label: Some(&format!("{name} Material Params Buffer")),
+        contents: bytemuck::cast_slice(&[params]),
+        usage: wgpu::BufferUsages::UNIFORM,
+    })
+}
+
+fn create_texture_bind_group(
+    device: &wgpu::Device,
+    texture_bind_group_layout: &wgpu::BindGroupLayout,
+    name: &str,
+    textures: &MaterialTextures,
+    params_buffer: &wgpu::Buffer,
+) -> wgpu::BindGroup {
+    device.create_bind_group(&wgpu::BindGroupDescriptor {
+        label: Some(&format!("{name} Texture Bind Group")),
+        layout: texture_bind_group_layout,
+        entries: &[
+            wgpu::BindGroupEntry {
+                binding: 0,
+                resource: wgpu::BindingResource::TextureView(&textures.base_color_texture.view),
+            },
+            wgpu::BindGroupEntry {
+                binding: 1,
+                resource: wgpu::BindingResource::Sampler(&textures.base_color_texture.sampler),
+            },
+            wgpu::BindGroupEntry {
+                binding: 2,
+                resource: params_buffer.as_entire_binding(),
+            },
+            wgpu::BindGroupEntry {
+                binding: 3,
+                resource: wgpu::BindingResource::TextureView(
+                    &textures.metallic_roughness_texture.view,
+                ),
+            },
+            wgpu::BindGroupEntry {
+                binding: 4,
+                resource: wgpu::BindingResource::Sampler(
+                    &textures.metallic_roughness_texture.sampler,
+                ),
+            },
+            wgpu::BindGroupEntry {
+                binding: 5,
+                resource: wgpu::BindingResource::TextureView(&textures.normal_texture.view),
+            },
+            wgpu::BindGroupEntry {
+                binding: 6,
+                resource: wgpu::BindingResource::Sampler(&textures.normal_texture.sampler),
+            },
+            wgpu::BindGroupEntry {
+                binding: 7,
+                resource: wgpu::BindingResource::TextureView(&textures.occlusion_texture.view),
+            },
+            wgpu::BindGroupEntry {
+                binding: 8,
+                resource: wgpu::BindingResource::Sampler(&textures.occlusion_texture.sampler),
+            },
+            wgpu::BindGroupEntry {
+                binding: 9,
+                resource: wgpu::BindingResource::TextureView(&textures.emissive_texture.view),
+            },
+            wgpu::BindGroupEntry {
+                binding: 10,
+                resource: wgpu::BindingResource::Sampler(&textures.emissive_texture.sampler),
+            },
+        ],
+    })
+}
+
+fn texture_from_gltf_texture(
+    gltf_texture: Option<gltf::Texture<'_>>,
+    images: &[gltf::image::Data],
+    device: &wgpu::Device,
+    queue: &wgpu::Queue,
+    label: &str,
+    color_space: TextureColorSpace,
+    fallback_rgba: &[u8; 4],
+) -> anyhow::Result<texture::Texture> {
+    let Some(gltf_texture) = gltf_texture else {
+        return default_texture(device, queue, label, color_space, fallback_rgba);
+    };
+
+    let image_index = gltf_texture.source().index();
+    let image = images
+        .get(image_index)
+        .with_context(|| format!("glTF texture references missing image {image_index}"))?;
+    let rgba = gltf_image_to_rgba8(image)?;
+    let sampler = gltf_sampler_descriptor(&gltf_texture.sampler());
+    texture::Texture::from_rgba8_with_sampler(
+        device,
+        queue,
+        &rgba,
+        image.width,
+        image.height,
+        &format!("{label} image {image_index} {color_space:?}"),
+        color_space,
+        sampler,
+    )
+}
+
+fn gltf_sampler_descriptor(sampler: &gltf::texture::Sampler<'_>) -> TextureSamplerDescriptor {
+    use gltf::texture::{MagFilter, MinFilter};
+
+    let mag_filter = match sampler.mag_filter().unwrap_or(MagFilter::Linear) {
+        MagFilter::Nearest => wgpu::FilterMode::Nearest,
+        MagFilter::Linear => wgpu::FilterMode::Linear,
+    };
+    let (min_filter, mipmap_filter) = match sampler.min_filter().unwrap_or(MinFilter::Linear) {
+        MinFilter::Nearest | MinFilter::NearestMipmapNearest | MinFilter::NearestMipmapLinear => {
+            (wgpu::FilterMode::Nearest, wgpu::MipmapFilterMode::Nearest)
+        }
+        MinFilter::Linear | MinFilter::LinearMipmapNearest => {
+            (wgpu::FilterMode::Linear, wgpu::MipmapFilterMode::Nearest)
+        }
+        MinFilter::LinearMipmapLinear => (wgpu::FilterMode::Linear, wgpu::MipmapFilterMode::Linear),
+    };
+
+    TextureSamplerDescriptor {
+        address_mode_u: gltf_wrap_mode(sampler.wrap_s()),
+        address_mode_v: gltf_wrap_mode(sampler.wrap_t()),
+        mag_filter,
+        min_filter,
+        mipmap_filter,
+    }
+}
+
+fn gltf_wrap_mode(mode: gltf::texture::WrappingMode) -> wgpu::AddressMode {
+    use gltf::texture::WrappingMode;
+
+    match mode {
+        WrappingMode::ClampToEdge => wgpu::AddressMode::ClampToEdge,
+        WrappingMode::MirroredRepeat => wgpu::AddressMode::MirrorRepeat,
+        WrappingMode::Repeat => wgpu::AddressMode::Repeat,
+    }
+}
+
+fn append_gltf_node_meshes(
+    node: &gltf::Node<'_>,
+    parent_transform: Mat4,
+    buffers: &[gltf::buffer::Data],
+    device: &wgpu::Device,
+    meshes: &mut Vec<model::Mesh>,
+    default_material: usize,
+) -> anyhow::Result<()> {
+    let local_transform = Mat4::from_cols_array_2d(&node.transform().matrix());
+    let world_transform = parent_transform * local_transform;
+
+    if let Some(gltf_mesh) = node.mesh() {
+        let node_name = node.name().unwrap_or("gltf_node");
+        let mesh_index = gltf_mesh.index();
+        let mesh_name = node
+            .name()
+            .or_else(|| gltf_mesh.name())
+            .unwrap_or("gltf_mesh");
+        for (primitive_index, primitive) in gltf_mesh.primitives().enumerate() {
+            append_gltf_primitive_mesh(
+                mesh_name,
+                primitive_index,
+                &primitive,
+                world_transform,
+                buffers,
+                device,
+                meshes,
+                default_material,
+                node_name,
+                mesh_index,
+            )?;
+        }
+    }
+
+    for child in node.children() {
+        append_gltf_node_meshes(
+            &child,
+            world_transform,
+            buffers,
+            device,
+            meshes,
+            default_material,
+        )?;
+    }
+
+    Ok(())
+}
+
+fn append_gltf_primitive_mesh(
+    mesh_name: &str,
+    primitive_index: usize,
+    primitive: &gltf::Primitive<'_>,
+    world_transform: Mat4,
+    buffers: &[gltf::buffer::Data],
+    device: &wgpu::Device,
+    meshes: &mut Vec<model::Mesh>,
+    default_material: usize,
+    node_name: &str,
+    mesh_index: usize,
+) -> anyhow::Result<()> {
+    let reader = primitive.reader(|buffer| Some(&buffers[buffer.index()]));
+    let positions = reader
+        .read_positions()
+        .with_context(|| format!("{mesh_name} primitive {primitive_index} has no positions"))?
+        .collect::<Vec<_>>();
+    let normals = reader
+        .read_normals()
+        .map(|iter| iter.collect::<Vec<_>>())
+        .unwrap_or_else(|| vec![[0.0, 1.0, 0.0]; positions.len()]);
+    let tex_coords = reader
+        .read_tex_coords(0)
+        .map(|coords| coords.into_f32().collect::<Vec<_>>())
+        .unwrap_or_else(|| vec![[0.0, 0.0]; positions.len()]);
+    let colors = reader
+        .read_colors(0)
+        .map(|colors| colors.into_rgba_f32().collect::<Vec<_>>())
+        .unwrap_or_else(|| vec![[1.0, 1.0, 1.0, 1.0]; positions.len()]);
+    let tangents = reader.read_tangents().map(|iter| iter.collect::<Vec<_>>());
+    let has_tangents = tangents.is_some();
+    let tangents = tangents.unwrap_or_else(|| vec![[1.0, 0.0, 0.0, 1.0]; positions.len()]);
+
+    let normal_transform = Mat3::from_mat4(world_transform.inverse().transpose());
+    let mut vertices = positions
+        .iter()
+        .enumerate()
+        .map(|(index, position)| {
+            let world_position = world_transform
+                .transform_point3(Vec3::from_array(*position))
+                .to_array();
+            let world_normal = normal_transform
+                .mul_vec3(Vec3::from_array(
+                    normals.get(index).copied().unwrap_or([0.0, 1.0, 0.0]),
+                ))
+                .normalize_or_zero()
+                .to_array();
+            let tangent = tangents.get(index).copied().unwrap_or([1.0, 0.0, 0.0, 1.0]);
+            let world_tangent = normal_transform
+                .mul_vec3(Vec3::new(tangent[0], tangent[1], tangent[2]))
+                .normalize_or_zero();
+
+            model::ModelVertex {
+                position: world_position,
+                tex_coords: tex_coords.get(index).copied().unwrap_or([0.0, 0.0]),
+                normal: world_normal,
+                color: colors.get(index).copied().unwrap_or([1.0, 1.0, 1.0, 1.0]),
+                tangent: [
+                    world_tangent.x,
+                    world_tangent.y,
+                    world_tangent.z,
+                    tangent[3],
+                ],
+            }
+        })
+        .collect::<Vec<_>>();
+
+    let indices = reader
+        .read_indices()
+        .map(|indices| indices.into_u32().collect::<Vec<_>>())
+        .unwrap_or_else(|| (0..vertices.len() as u32).collect());
+    let center = mesh_center(&vertices);
+
+    if !has_tangents {
+        generate_tangents(&mut vertices, &indices);
+    }
+
+    log_primitive_material_debug(
+        node_name,
+        mesh_index,
+        primitive_index,
+        &primitive.material(),
+        default_material,
+    );
+
+    let vertex_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
+        label: Some(&format!(
+            "{mesh_name} Primitive {primitive_index} Vertex Buffer"
+        )),
+        contents: bytemuck::cast_slice(&vertices),
+        usage: wgpu::BufferUsages::VERTEX,
+    });
+    let index_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
+        label: Some(&format!(
+            "{mesh_name} Primitive {primitive_index} Index Buffer"
+        )),
+        contents: bytemuck::cast_slice(&indices),
+        usage: wgpu::BufferUsages::INDEX,
+    });
+
+    meshes.push(model::Mesh {
+        name: format!("{mesh_name}_{primitive_index}"),
+        vertex_buffer,
+        index_buffer,
+        num_elements: indices.len() as u32,
+        material: primitive.material().index().unwrap_or(default_material),
+        center,
+    });
+
+    Ok(())
+}
+
+fn mesh_center(vertices: &[model::ModelVertex]) -> [f32; 3] {
+    if vertices.is_empty() {
+        return [0.0, 0.0, 0.0];
+    }
+
+    let sum = vertices.iter().fold(Vec3::ZERO, |sum, vertex| {
+        sum + Vec3::from_array(vertex.position)
+    });
+    (sum / vertices.len() as f32).to_array()
+}
+
+fn log_material_debug(
+    index: usize,
+    name: &str,
+    alpha_mode: AlphaMode,
+    alpha_cutoff: f32,
+    base_color_factor_alpha: f32,
+    double_sided: bool,
+) {
+    log::warn!(
+        "material index={index} name=\"{name}\" alpha_mode={} alpha_cutoff={alpha_cutoff:.3} base_color_factor_alpha={base_color_factor_alpha:.3} double_sided={double_sided} selected_pipeline={}",
+        alpha_mode.as_str(),
+        selected_pipeline_label(alpha_mode, double_sided),
+    );
+}
+
+fn log_primitive_material_debug(
+    node_name: &str,
+    mesh_index: usize,
+    primitive_index: usize,
+    material: &gltf::Material<'_>,
+    default_material: usize,
+) {
+    let pbr = material.pbr_metallic_roughness();
+    let material_index = material.index().unwrap_or(default_material);
+    let material_name = material.name().unwrap_or("default");
+    log::warn!(
+        "primitive node=\"{node_name}\" mesh_index={mesh_index} primitive_index={primitive_index} material_index={material_index} material_name=\"{material_name}\" baseColorFactor={:?} metallicFactor={:.3} roughnessFactor={:.3} alphaMode={:?}",
+        pbr.base_color_factor(),
+        pbr.metallic_factor(),
+        pbr.roughness_factor(),
+        material.alpha_mode(),
+    );
+}
+
+fn selected_pipeline_label(alpha_mode: AlphaMode, double_sided: bool) -> String {
+    format!(
+        "{}_{}",
+        alpha_mode.as_str(),
+        if double_sided {
+            "DOUBLE_SIDED"
+        } else {
+            "SINGLE_SIDED"
+        }
+    )
+}
+
+fn generate_tangents(vertices: &mut [model::ModelVertex], indices: &[u32]) {
+    let mut accumulated = vec![Vec3::ZERO; vertices.len()];
+
+    for triangle in indices.chunks_exact(3) {
+        let [i0, i1, i2] = [
+            triangle[0] as usize,
+            triangle[1] as usize,
+            triangle[2] as usize,
+        ];
+        if i0 >= vertices.len() || i1 >= vertices.len() || i2 >= vertices.len() {
+            continue;
+        }
+
+        let p0 = Vec3::from_array(vertices[i0].position);
+        let p1 = Vec3::from_array(vertices[i1].position);
+        let p2 = Vec3::from_array(vertices[i2].position);
+        let uv0 = Vec2::from_array(vertices[i0].tex_coords);
+        let uv1 = Vec2::from_array(vertices[i1].tex_coords);
+        let uv2 = Vec2::from_array(vertices[i2].tex_coords);
+
+        let delta_pos1 = p1 - p0;
+        let delta_pos2 = p2 - p0;
+        let delta_uv1 = uv1 - uv0;
+        let delta_uv2 = uv2 - uv0;
+        let determinant = delta_uv1.x * delta_uv2.y - delta_uv1.y * delta_uv2.x;
+        if determinant.abs() < 1e-6 {
+            continue;
+        }
+
+        let tangent = (delta_pos1 * delta_uv2.y - delta_pos2 * delta_uv1.y) / determinant;
+        accumulated[i0] += tangent;
+        accumulated[i1] += tangent;
+        accumulated[i2] += tangent;
+    }
+
+    for (vertex, tangent) in vertices.iter_mut().zip(accumulated) {
+        let normal = Vec3::from_array(vertex.normal).normalize_or_zero();
+        let tangent = (tangent - normal * normal.dot(tangent)).normalize_or_zero();
+        let tangent = if tangent.length_squared() > 0.0 {
+            tangent
+        } else {
+            fallback_tangent(normal)
+        };
+        vertex.tangent = [tangent.x, tangent.y, tangent.z, 1.0];
+    }
+}
+
+fn fallback_tangent(normal: Vec3) -> Vec3 {
+    let axis = if normal.y.abs() < 0.9 {
+        Vec3::Y
+    } else {
+        Vec3::X
+    };
+    normal.cross(axis).normalize_or_zero()
+}
+
+fn gltf_image_to_rgba8(image: &gltf::image::Data) -> anyhow::Result<Vec<u8>> {
+    use gltf::image::Format;
+
+    match image.format {
+        Format::R8G8B8A8 => Ok(image.pixels.clone()),
+        Format::R8G8B8 => {
+            let mut rgba = Vec::with_capacity((image.width * image.height * 4) as usize);
+            for rgb in image.pixels.chunks_exact(3) {
+                rgba.extend_from_slice(&[rgb[0], rgb[1], rgb[2], 255]);
+            }
+            Ok(rgba)
+        }
+        Format::R8 => {
+            let mut rgba = Vec::with_capacity((image.width * image.height * 4) as usize);
+            for value in &image.pixels {
+                rgba.extend_from_slice(&[*value, *value, *value, 255]);
+            }
+            Ok(rgba)
+        }
+        Format::R8G8 => {
+            let mut rgba = Vec::with_capacity((image.width * image.height * 4) as usize);
+            for rg in image.pixels.chunks_exact(2) {
+                rgba.extend_from_slice(&[rg[0], rg[1], 0, 255]);
+            }
+            Ok(rgba)
+        }
+        Format::R16 => rgba_from_chunks(&image.pixels, 1, 2, read_u16_component),
+        Format::R16G16 => rgba_from_chunks(&image.pixels, 2, 2, read_u16_component),
+        Format::R16G16B16 => rgba_from_chunks(&image.pixels, 3, 2, read_u16_component),
+        Format::R16G16B16A16 => rgba_from_chunks(&image.pixels, 4, 2, read_u16_component),
+        Format::R32G32B32FLOAT => rgba_from_chunks(&image.pixels, 3, 4, read_f32_component),
+        Format::R32G32B32A32FLOAT => rgba_from_chunks(&image.pixels, 4, 4, read_f32_component),
+    }
+}
+
+fn rgba_from_chunks(
+    pixels: &[u8],
+    channels: usize,
+    component_width: usize,
+    read_component: fn(&[u8]) -> u8,
+) -> anyhow::Result<Vec<u8>> {
+    let pixel_width = channels * component_width;
+    if pixel_width == 0 || pixels.len() % pixel_width != 0 {
+        bail!("invalid glTF image byte length for {channels} channels");
+    }
+
+    let mut rgba = Vec::with_capacity((pixels.len() / pixel_width) * 4);
+    for pixel in pixels.chunks_exact(pixel_width) {
+        let r = read_component(&pixel[0..component_width]);
+        let g = if channels > 1 {
+            read_component(&pixel[component_width..component_width * 2])
+        } else {
+            r
+        };
+        let b = if channels > 2 {
+            read_component(&pixel[component_width * 2..component_width * 3])
+        } else {
+            r
+        };
+        let a = if channels > 3 {
+            read_component(&pixel[component_width * 3..component_width * 4])
+        } else {
+            255
+        };
+        rgba.extend_from_slice(&[r, g, b, a]);
+    }
+    Ok(rgba)
+}
+
+fn read_u16_component(bytes: &[u8]) -> u8 {
+    let value = u16::from_ne_bytes([bytes[0], bytes[1]]);
+    (value / 257) as u8
+}
+
+fn read_f32_component(bytes: &[u8]) -> u8 {
+    let value = f32::from_ne_bytes([bytes[0], bytes[1], bytes[2], bytes[3]]);
+    (value.clamp(0.0, 1.0) * 255.0).round() as u8
+}

src/serial_core/codecs/hand_gateway.rs

@@ -0,0 +1,404 @@
+use crate::serial_core::codec::Codec;
+use crate::serial_core::error::CodecError;
+use crate::serial_core::utils::{calc_crc8_itu, elapsed_millis};
+use std::time::Instant;
+
+const FRAME_HEADER: [u8; 2] = [0x55, 0xAA];
+const RESPONSE_DATA_CMD: u8 = 0x81;
+const RESPONSE_DATA_LEGACY_FIXED_LENGTH: usize = 16;
+const RESPONSE_DATA_LEGACY_PREFIX_LENGTH: usize = 19;
+const RESPONSE_DATA_TEMP_FIXED_LENGTH: usize = 20;
+const RESPONSE_DATA_TEMP_PREFIX_LENGTH: usize = 23;
+const MIN_FRAME_LENGTH: usize = 7;
+const DEFAULT_MAX_FRAME_LENGTH: usize = 64 * 1024;
+
+#[derive(Debug, Clone, Copy)]
+struct HandGatewayResponseLayout {
+    fixed_length: usize,
+    prefix_length: usize,
+    timestamp_len: usize,
+    config_offset: usize,
+    valid_config_offset: usize,
+    block_count_offset: usize,
+}
+
+const TEMP_RESPONSE_LAYOUT: HandGatewayResponseLayout = HandGatewayResponseLayout {
+    fixed_length: RESPONSE_DATA_TEMP_FIXED_LENGTH,
+    prefix_length: RESPONSE_DATA_TEMP_PREFIX_LENGTH,
+    timestamp_len: 8,
+    config_offset: 14,
+    valid_config_offset: 18,
+    block_count_offset: 22,
+};
+
+const LEGACY_RESPONSE_LAYOUT: HandGatewayResponseLayout = HandGatewayResponseLayout {
+    fixed_length: RESPONSE_DATA_LEGACY_FIXED_LENGTH,
+    prefix_length: RESPONSE_DATA_LEGACY_PREFIX_LENGTH,
+    timestamp_len: 4,
+    config_offset: 10,
+    valid_config_offset: 14,
+    block_count_offset: 18,
+};
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct HandGatewayNodeConfig {
+    pub config_mask: u32,
+    pub sample_count: usize,
+}
+
+impl HandGatewayNodeConfig {
+    pub const fn new(config_mask: u32, sample_count: usize) -> Self {
+        Self {
+            config_mask,
+            sample_count,
+        }
+    }
+
+    fn payload_len(&self, bytes_per_sample: usize) -> Option<usize> {
+        self.sample_count.checked_mul(bytes_per_sample)
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct HandGatewayConfig {
+    pub protocol_version: u8,
+    pub bytes_per_sample: usize,
+    pub max_frame_length: usize,
+    pub nodes: Vec<HandGatewayNodeConfig>,
+}
+
+impl HandGatewayConfig {
+    pub fn new(nodes: Vec<HandGatewayNodeConfig>) -> Self {
+        Self {
+            protocol_version: 0x01,
+            bytes_per_sample: 2,
+            max_frame_length: DEFAULT_MAX_FRAME_LENGTH,
+            nodes,
+        }
+    }
+
+    fn validate(&self) -> Result<(), CodecError> {
+        if self.bytes_per_sample == 0 || self.max_frame_length < MIN_FRAME_LENGTH {
+            return Err(CodecError::InvalidLength);
+        }
+
+        let mut used_masks = 0u32;
+        for node in &self.nodes {
+            if node.config_mask == 0
+                || node.config_mask.count_ones() != 1
+                || used_masks & node.config_mask != 0
+                || node.payload_len(self.bytes_per_sample).is_none()
+            {
+                return Err(CodecError::InvalidLength);
+            }
+            used_masks |= node.config_mask;
+        }
+
+        Ok(())
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct HandGatewayFrameNode {
+    pub config_mask: u32,
+    pub valid: bool,
+    pub payload: Vec<u8>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct HandGatewayDataRepFrame {
+    pub timestamp: u64,
+    pub config: u32,
+    pub valid_config: u32,
+    pub block_count: u8,
+    pub raw: Vec<u8>,
+    pub nodes: Vec<HandGatewayFrameNode>,
+    pub dts_ms: u64,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum HandGatewayFrame {
+    DataRep(HandGatewayDataRepFrame),
+}
+
+pub struct HandGatewayCodec {
+    buffer: Vec<u8>,
+    config: HandGatewayConfig,
+}
+
+impl HandGatewayCodec {
+    pub fn new(node_sample_counts: &[u16]) -> Self {
+        let nodes = node_sample_counts
+            .iter()
+            .enumerate()
+            .map(|(index, &sample_count)| {
+                HandGatewayNodeConfig::new(
+                    1u32.checked_shl(index as u32).unwrap_or(0),
+                    sample_count as usize,
+                )
+            })
+            .collect();
+
+        Self {
+            buffer: Vec::new(),
+            config: HandGatewayConfig::new(nodes),
+        }
+    }
+
+    pub fn parse_node_payload(data: &[u8]) -> Result<Vec<u16>, CodecError> {
+        if data.len() % 2 != 0 {
+            return Err(CodecError::InvalidLength);
+        }
+
+        Ok(data
+            .chunks_exact(2)
+            .map(|chunk| u16::from_le_bytes([chunk[0], chunk[1]]))
+            .collect())
+    }
+
+    fn retain_possible_header_prefix(&mut self) {
+        if self.buffer.last() == Some(&FRAME_HEADER[0]) {
+            self.buffer.drain(..self.buffer.len() - 1);
+        } else {
+            self.buffer.clear();
+        }
+    }
+
+    fn parse_data_response_with_layout(
+        &self,
+        frame: &[u8],
+        length: u16,
+        session_started_at: Instant,
+        layout: HandGatewayResponseLayout,
+    ) -> Result<HandGatewayFrame, CodecError> {
+        let payload_len = usize::from(length)
+            .checked_sub(layout.fixed_length)
+            .ok_or(CodecError::InvalidLength)?;
+        let payload_end = layout
+            .prefix_length
+            .checked_add(payload_len)
+            .ok_or(CodecError::PayloadTooLarge)?;
+
+        if payload_end + 1 != frame.len() {
+            return Err(CodecError::InvalidLength);
+        }
+
+        let version = frame[5];
+        if version != self.config.protocol_version {
+            return Err(CodecError::InvalidFrameType);
+        }
+
+        let timestamp = match layout.timestamp_len {
+            4 => u32::from_le_bytes(frame[6..10].try_into().unwrap()) as u64,
+            8 => u64::from_le_bytes(frame[6..14].try_into().unwrap()),
+            _ => return Err(CodecError::InvalidLength),
+        };
+        let config = u32::from_le_bytes(
+            frame[layout.config_offset..layout.config_offset + 4]
+                .try_into()
+                .unwrap(),
+        );
+        let valid_config = u32::from_le_bytes(
+            frame[layout.valid_config_offset..layout.valid_config_offset + 4]
+                .try_into()
+                .unwrap(),
+        );
+        let block_count = frame[layout.block_count_offset];
+
+        let active_nodes = self
+            .config
+            .nodes
+            .iter()
+            .filter(|node| config & node.config_mask != 0)
+            .collect::<Vec<_>>();
+
+        if active_nodes.len() != usize::from(block_count) {
+            return Err(CodecError::InvalidLength);
+        }
+
+        let expected_payload_len = active_nodes.iter().try_fold(0usize, |total, node| {
+            let node_len = node
+                .payload_len(self.config.bytes_per_sample)
+                .ok_or(CodecError::PayloadTooLarge)?;
+            total
+                .checked_add(node_len)
+                .ok_or(CodecError::PayloadTooLarge)
+        })?;
+
+        if expected_payload_len != payload_len {
+            return Err(CodecError::InvalidLength);
+        }
+
+        let mut cursor = layout.prefix_length;
+        let mut nodes = Vec::with_capacity(active_nodes.len());
+        for node in active_nodes {
+            let node_len = node
+                .payload_len(self.config.bytes_per_sample)
+                .ok_or(CodecError::PayloadTooLarge)?;
+            let next = cursor + node_len;
+            nodes.push(HandGatewayFrameNode {
+                config_mask: node.config_mask,
+                valid: valid_config & node.config_mask != 0,
+                payload: frame[cursor..next].to_vec(),
+            });
+            cursor = next;
+        }
+
+        Ok(HandGatewayFrame::DataRep(HandGatewayDataRepFrame {
+            timestamp,
+            config,
+            valid_config,
+            block_count,
+            raw: frame.to_vec(),
+            nodes,
+            dts_ms: elapsed_millis(session_started_at),
+        }))
+    }
+
+    fn parse_data_response(
+        &self,
+        frame: &[u8],
+        length: u16,
+        session_started_at: Instant,
+    ) -> Result<HandGatewayFrame, CodecError> {
+        self.parse_data_response_with_layout(
+            frame,
+            length,
+            session_started_at,
+            TEMP_RESPONSE_LAYOUT,
+        )
+        .or_else(|_| {
+            self.parse_data_response_with_layout(
+                frame,
+                length,
+                session_started_at,
+                LEGACY_RESPONSE_LAYOUT,
+            )
+        })
+    }
+}
+
+impl Codec<HandGatewayFrame> for HandGatewayCodec {
+    fn decode(
+        &mut self,
+        input: &[u8],
+        session_started_at: Instant,
+    ) -> Result<Vec<HandGatewayFrame>, CodecError> {
+        self.config.validate()?;
+        self.buffer.extend_from_slice(input);
+        let mut frames = Vec::new();
+
+        loop {
+            let Some(header_pos) = self
+                .buffer
+                .windows(FRAME_HEADER.len())
+                .position(|window| window == FRAME_HEADER)
+            else {
+                self.retain_possible_header_prefix();
+                break;
+            };
+
+            if header_pos > 0 {
+                self.buffer.drain(..header_pos);
+            }
+
+            if self.buffer.len() < 4 {
+                break;
+            }
+
+            let length = u16::from_le_bytes([self.buffer[2], self.buffer[3]]);
+            let frame_len = usize::from(length)
+                .checked_add(4)
+                .ok_or(CodecError::PayloadTooLarge)?;
+
+            if frame_len < MIN_FRAME_LENGTH || frame_len > self.config.max_frame_length {
+                log::debug!("invalid hand gateway frame length: {frame_len}");
+                self.buffer.drain(..1);
+                continue;
+            }
+
+            if self.buffer.len() < frame_len {
+                break;
+            }
+
+            let expected_checksum = calc_crc8_itu(&self.buffer[..frame_len - 1]);
+            let received_checksum = self.buffer[frame_len - 1];
+            if expected_checksum != received_checksum {
+                log::debug!(
+                    "hand gateway checksum mismatch: expected {expected_checksum:02X}, got {received_checksum:02X}"
+                );
+                self.buffer.drain(..1);
+                continue;
+            }
+
+            if self.buffer[4] == RESPONSE_DATA_CMD {
+                match self.parse_data_response(
+                    &self.buffer[..frame_len],
+                    length,
+                    session_started_at,
+                ) {
+                    Ok(frame) => frames.push(frame),
+                    Err(error) => log::debug!("invalid hand gateway data response: {error}"),
+                }
+            }
+
+            self.buffer.drain(..frame_len);
+        }
+
+        Ok(frames)
+    }
+
+    fn encode(&self, frame: &HandGatewayFrame) -> Result<Vec<u8>, CodecError> {
+        let _ = frame;
+        Err(CodecError::InvalidFrameType)
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn data_response(config: u32, valid_config: u32, payload: &[u8]) -> Vec<u8> {
+        let block_count = config.count_ones() as u8;
+        let length = (RESPONSE_DATA_LEGACY_FIXED_LENGTH + payload.len()) as u16;
+        let mut frame = Vec::new();
+        frame.extend_from_slice(&FRAME_HEADER);
+        frame.extend_from_slice(&length.to_le_bytes());
+        frame.push(RESPONSE_DATA_CMD);
+        frame.push(0x01);
+        frame.extend_from_slice(&0x0102_0304u32.to_le_bytes());
+        frame.extend_from_slice(&config.to_le_bytes());
+        frame.extend_from_slice(&valid_config.to_le_bytes());
+        frame.push(block_count);
+        frame.extend_from_slice(payload);
+        let checksum = calc_crc8_itu(&frame);
+        frame.push(checksum);
+        frame
+    }
+
+    #[test]
+    fn decodes_data_response_frame() {
+        let payload = [0x10, 0x00, 0x34, 0x12, 0x08, 0x00];
+        let bytes = data_response(0b11, 0b01, &payload);
+        let frames = HandGatewayCodec::new(&[2, 1])
+            .decode(&bytes, Instant::now())
+            .unwrap();
+
+        assert_eq!(frames.len(), 1);
+        let HandGatewayFrame::DataRep(frame) = &frames[0];
+        assert_eq!(frame.timestamp, 0x0102_0304);
+        assert_eq!(frame.config, 0b11);
+        assert_eq!(frame.valid_config, 0b01);
+        assert_eq!(frame.block_count, 2);
+        assert_eq!(frame.raw, bytes);
+        assert_eq!(frame.nodes.len(), 2);
+        assert_eq!(
+            HandGatewayCodec::parse_node_payload(&frame.nodes[0].payload).unwrap(),
+            vec![16, 0x1234]
+        );
+        assert_eq!(
+            HandGatewayCodec::parse_node_payload(&frame.nodes[1].payload).unwrap(),
+            vec![8]
+        );
+    }
+}

src/serial_core/codecs/mod.rs

@@ -1 +1,2 @@
+pub mod hand_gateway;
 pub mod tactile_a;

src/serial_core/codecs/tactile_a.rs

@@ -13,6 +13,15 @@ pub struct TactileACodec {
     expected_data_len: usize,
 }
 
+impl From<u8> for TactileAFrameStatusCode {
+    fn from(value: u8) -> Self {
+        match value {
+            0 => TactileAFrameStatusCode::Success,
+            _ => TactileAFrameStatusCode::Failure,
+        }
+    }
+}
+
 impl TactileACodec {
     pub fn new(cols: usize, rows: usize) -> TactileACodec {
         Self {
@@ -37,7 +46,7 @@ impl TactileACodec {
         Ok(vals)
     }
 
-    pub fn build_req_frame(cols: usize, rows: usize) -> TactileAFrame {
+    pub fn build_req_frame(cols: usize, rows: usize) -> anyhow::Result<TactileAFrame> {
         let header = [0x55, 0xAA];
         let payload_len: usize = 9;
         let device_addr: u8 = 0x34;
@@ -46,7 +55,7 @@ impl TactileACodec {
         let start_addr: u32 = 7168;
         let except_data_len: usize = cols * rows * 2;
         let checksum: u8 = 0;
-        TactileAFrame::Req(TactileAReqFrame {
+        Ok(TactileAFrame::Req(TactileAReqFrame {
             meta: TactileAFrameMetaData {
                 header,
                 payload_len,
@@ -57,7 +66,7 @@ impl TactileACodec {
                 except_data_len,
                 checksum,
             },
-        })
+        }))
     }
 }
 
@@ -102,10 +111,7 @@ impl Codec<TactileAFrame> for TactileACodec {
                 self.buffer[10],
             ]);
             let except_data_len = u16::from_le_bytes([self.buffer[11], self.buffer[12]]) as usize;
-            let status = match self.buffer[13] {
+            let status = TactileAFrameStatusCode::from(self.buffer[13]);
-                0 => TactileAFrameStatusCode::Success,
-                _ => TactileAFrameStatusCode::Failure,
-            };
 
             if except_data_len != self.expected_data_len {
                 log::debug!(

src/serial_core/error.rs

@@ -9,6 +9,8 @@ pub enum SerialError {
     AlreadyConnected,
     StateError,
     NoRecordedData,
+    ExportError,
+    ImportError,
 }
 
 impl fmt::Display for SerialError {
@@ -21,6 +23,8 @@ impl fmt::Display for SerialError {
             SerialError::AlreadyConnected => write!(f, "Already Connected"),
             SerialError::StateError => write!(f, "State Error"),
             SerialError::NoRecordedData => write!(f, "No Recorded Data"),
+            SerialError::ExportError => write!(f, "Export Error"),
+            SerialError::ImportError => write!(f, "Import Error"),
         }
     }
 }

src/serial_core/frame.rs

@@ -1,3 +1,13 @@
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct TestFrame {
+    pub header: [u8; 2],
+    pub cmd: u8,
+    pub length: usize,
+    pub payload: Vec<u8>,
+    pub checksum: u8,
+    pub dts_ms: u64,
+}
+
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub struct TactileAFrameMetaData {
     pub header: [u8; 2],

src/serial_core/mod.rs

@@ -2,5 +2,6 @@ pub mod codec;
 pub mod codecs;
 pub mod error;
 pub mod frame;
+pub mod multi_dim_force;
 pub mod serial;
 pub mod utils;

src/serial_core/multi_dim_force.rs

@@ -0,0 +1,234 @@
+const SENSOR_ROWS: usize = 12;
+const SENSOR_COLS: usize = 7;
+const SENSOR_COUNT: usize = SENSOR_ROWS * SENSOR_COLS;
+
+const TOTAL_PRESSURE_LOW_THRESHOLD: f32 = 500.0;
+const COP_STABILITY_FRAMES_REQUIRED: usize = 15;
+
+const POST_INIT_WINDOW_CNT: usize = 100;
+const POST_INIT_STABLE_CNT: usize = 50;
+const POST_INIT_STABLE_THRESH: f32 = 0.1;
+
+#[derive(Debug, Clone, Copy)]
+pub struct PztSpatialAnalysis {
+    pub angle_deg: f32,
+    pub magnitude: f32,
+    pub planar_x: f32,
+    pub planar_y: f32,
+}
+
+pub struct PztProcessor {
+    first_frame: Option<Vec<f32>>,
+
+    first_contact_cop_x: Option<f32>,
+    first_contact_cop_y: Option<f32>,
+    contact_initialized: bool,
+
+    total_pressure_low_counter: usize,
+
+    cop_init_x_buf: Vec<f32>,
+    cop_init_y_buf: Vec<f32>,
+
+    post_init_frame_cnt: usize,
+    post_stable_cnt: usize,
+    post_refined_flag: bool,
+    post_cand_x: Option<f32>,
+    post_cand_y: Option<f32>,
+}
+
+impl PztProcessor {
+    pub fn new() -> Self {
+        Self {
+            first_frame: None,
+            first_contact_cop_x: None,
+            first_contact_cop_y: None,
+            contact_initialized: false,
+            total_pressure_low_counter: 0,
+            cop_init_x_buf: Vec::with_capacity(COP_STABILITY_FRAMES_REQUIRED),
+            cop_init_y_buf: Vec::with_capacity(COP_STABILITY_FRAMES_REQUIRED),
+            post_init_frame_cnt: 0,
+            post_stable_cnt: 0,
+            post_refined_flag: false,
+            post_cand_x: None,
+            post_cand_y: None,
+        }
+    }
+
+    fn subtract_baseline(&mut self, current_frame: &[f32]) -> Vec<f32> {
+        if self.first_frame.is_none() {
+            self.first_frame = Some(current_frame.to_vec());
+        }
+
+        let baseline = self.first_frame.as_ref().unwrap();
+        current_frame
+            .iter()
+            .zip(baseline.iter())
+            .map(|(current, baseline)| (current - baseline).max(0.0))
+            .collect()
+    }
+
+    fn reset_cop_state(&mut self) {
+        self.first_contact_cop_x = None;
+        self.first_contact_cop_y = None;
+        self.contact_initialized = false;
+        self.total_pressure_low_counter = 0;
+        self.cop_init_x_buf.clear();
+        self.cop_init_y_buf.clear();
+        self.post_init_frame_cnt = 0;
+        self.post_stable_cnt = 0;
+        self.post_refined_flag = false;
+        self.post_cand_x = None;
+        self.post_cand_y = None;
+    }
+
+    fn compute_median(sorted: &[f32]) -> f32 {
+        let n = sorted.len();
+        if n == 0 {
+            return 0.0;
+        }
+
+        if n % 2 == 0 {
+            (sorted[n / 2 - 1] + sorted[n / 2]) / 2.0
+        } else {
+            sorted[n / 2]
+        }
+    }
+
+    fn compute_pressure_direction(&mut self, frame: &[f32]) -> (f32, f32) {
+        let total_pressure = frame.iter().sum::<f32>();
+        if total_pressure < TOTAL_PRESSURE_LOW_THRESHOLD {
+            self.total_pressure_low_counter += 1;
+        } else {
+            self.total_pressure_low_counter = 0;
+        }
+
+        if self.total_pressure_low_counter >= COP_STABILITY_FRAMES_REQUIRED {
+            self.reset_cop_state();
+            return (0.0, 0.0);
+        }
+
+        if total_pressure == 0.0 {
+            return (0.0, 0.0);
+        }
+
+        let mut sum_x = 0.0;
+        let mut sum_y = 0.0;
+        for row in 0..SENSOR_ROWS {
+            for col in 0..SENSOR_COLS {
+                let value = frame[row * SENSOR_COLS + col];
+                sum_x += value * col as f32;
+                sum_y += value * row as f32;
+            }
+        }
+        let cop_x = sum_x / total_pressure;
+        let cop_y = sum_y / total_pressure;
+
+        if !self.contact_initialized {
+            self.cop_init_x_buf.push(cop_x);
+            self.cop_init_y_buf.push(cop_y);
+
+            if self.cop_init_x_buf.len() >= COP_STABILITY_FRAMES_REQUIRED {
+                let mut xs = self.cop_init_x_buf.clone();
+                xs.sort_by(|a, b| a.partial_cmp(b).unwrap());
+                let mut ys = self.cop_init_y_buf.clone();
+                ys.sort_by(|a, b| a.partial_cmp(b).unwrap());
+
+                self.first_contact_cop_x = Some(Self::compute_median(&xs));
+                self.first_contact_cop_y = Some(Self::compute_median(&ys));
+                self.contact_initialized = true;
+                self.cop_init_x_buf.clear();
+                self.cop_init_y_buf.clear();
+            }
+
+            return (0.0, 0.0);
+        }
+
+        self.post_init_frame_cnt += 1;
+        if !self.post_refined_flag && self.post_init_frame_cnt <= POST_INIT_WINDOW_CNT {
+            if let (Some(cx), Some(cy)) = (self.post_cand_x, self.post_cand_y) {
+                let dist = ((cop_x - cx).powi(2) + (cop_y - cy).powi(2)).sqrt();
+                if dist <= POST_INIT_STABLE_THRESH {
+                    self.post_stable_cnt += 1;
+                } else {
+                    self.post_cand_x = Some(cop_x);
+                    self.post_cand_y = Some(cop_y);
+                    self.post_stable_cnt = 1;
+                }
+            } else {
+                self.post_cand_x = Some(cop_x);
+                self.post_cand_y = Some(cop_y);
+                self.post_stable_cnt = 1;
+            }
+
+            if self.post_stable_cnt >= POST_INIT_STABLE_CNT {
+                self.first_contact_cop_x = self.post_cand_x;
+                self.first_contact_cop_y = self.post_cand_y;
+                self.post_refined_flag = true;
+            }
+        } else {
+            self.post_refined_flag = true;
+        }
+
+        let base_x = self.first_contact_cop_x.unwrap_or(cop_x);
+        let base_y = self.first_contact_cop_y.unwrap_or(cop_y);
+        let delta_x = cop_x - base_x;
+        let delta_y = base_y - cop_y;
+        (delta_x, delta_y)
+    }
+
+    fn compute_vector_angle(x: f32, y: f32) -> (f32, f32) {
+        let epsilon = 1e-8f32;
+        let magnitude = (x * x + y * y).sqrt();
+        let mut angle = y.atan2(x + epsilon).to_degrees();
+        if angle < 0.0 {
+            angle += 360.0;
+        }
+        (angle, magnitude)
+    }
+
+    pub fn get_pzt_analysis(
+        &mut self,
+        adc_data: &[f32],
+    ) -> Result<PztSpatialAnalysis, &'static str> {
+        if adc_data.len() != SENSOR_COUNT {
+            return Err("ADC data length must be 84");
+        }
+
+        let baseline = self.subtract_baseline(adc_data);
+        let (dx, dy) = self.compute_pressure_direction(&baseline);
+
+        let planar_x = dx;
+        let planar_y = -dy;
+        let (angle_deg, magnitude) = Self::compute_vector_angle(planar_x, planar_y);
+
+        Ok(PztSpatialAnalysis {
+            angle_deg,
+            magnitude,
+            planar_x,
+            planar_y,
+        })
+    }
+
+    pub fn get_pzt_angle(&mut self, adc_data: &[f32]) -> Result<f32, &'static str> {
+        Ok(self.get_pzt_analysis(adc_data)?.angle_deg)
+    }
+
+    pub fn reset_baseline(&mut self) {
+        self.first_frame = None;
+        self.reset_cop_state();
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn idle_frame_returns_zero() {
+        let mut processor = PztProcessor::new();
+        let frame = [0.0f32; SENSOR_COUNT];
+        let analysis = processor.get_pzt_analysis(&frame).unwrap();
+        assert_eq!(analysis.magnitude, 0.0);
+        assert_eq!(analysis.angle_deg, 0.0);
+    }
+}

src/serial_core/serial.rs

@@ -1,12 +1,27 @@
+use crate::recording::Recorder;
 use crate::serial_core::codec::Codec;
+use crate::serial_core::codecs::hand_gateway::{HandGatewayCodec, HandGatewayFrame};
 use crate::serial_core::codecs::tactile_a::TactileACodec;
 use crate::serial_core::frame::TactileAFrame;
-use crate::serial_core::utils::elapsed_millis;
+use crossbeam_channel::{Receiver, Sender};
-use crossbeam_channel::{Receiver, Sender, TryRecvError};
 use std::io::{Read, Write};
 use std::time::{Duration, Instant};
 
-const POLL_INTERVAL_MS: u64 = 10;
+const POLL_INTERVAL_MS: u64 = 5;
+const DEFAULT_HAND_GATEWAY_NODE_SAMPLE_COUNTS: &[u16] = &[84, 84, 84, 84, 84, 70, 44];
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+pub struct SerialIoStats {
+    pub rx_bytes: u64,
+    pub tx_bytes: u64,
+    pub rx_frames: u64,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum SerialProtocol {
+    TactileA,
+    HandGateway,
+}
 
 /// Runs the serial polling loop on the calling (background) thread.
 /// Sends decoded pressure matrix data (Vec<i32>) to the output channel.
@@ -14,14 +29,43 @@ pub fn run_serial_loop(
     port: &mut dyn ReadWrite,
     rows: usize,
     cols: usize,
+    protocol: SerialProtocol,
     cancel_rx: &Receiver<()>,
     sample_tx: &Sender<Vec<i32>>,
+    stats_tx: Option<&Sender<SerialIoStats>>,
+    recorder: Option<&Recorder>,
+) {
+    match protocol {
+        SerialProtocol::TactileA => {
+            run_tactile_a_loop(port, rows, cols, cancel_rx, sample_tx, stats_tx, recorder)
+        }
+        SerialProtocol::HandGateway => {
+            run_hand_gateway_loop(port, cancel_rx, sample_tx, stats_tx, recorder)
+        }
+    }
+}
+
+fn run_tactile_a_loop(
+    port: &mut dyn ReadWrite,
+    rows: usize,
+    cols: usize,
+    cancel_rx: &Receiver<()>,
+    sample_tx: &Sender<Vec<i32>>,
+    stats_tx: Option<&Sender<SerialIoStats>>,
+    recorder: Option<&Recorder>,
 ) {
     let session_started_at = Instant::now();
     let mut codec = TactileACodec::new(cols, rows);
-    let req_frame = TactileACodec::build_req_frame(cols, rows);
+    let req_frame = match TactileACodec::build_req_frame(cols, rows) {
+        Ok(frame) => frame,
+        Err(err) => {
+            eprintln!("[serial] request frame build error: {err}");
+            return;
+        }
+    };
     let mut buffer = [0u8; 1024];
-    let mut poll_interval = Duration::from_millis(POLL_INTERVAL_MS);
+    let poll_interval = Duration::from_millis(POLL_INTERVAL_MS);
+    let mut io_stats = SerialIoStats::default();
 
     loop {
         // Check cancel
@@ -31,7 +75,10 @@ pub fn run_serial_loop(
 
         // Send poll request
         if let Ok(req_bytes) = codec.encode(&req_frame) {
-            let _ = port.write_all(&req_bytes);
+            if port.write_all(&req_bytes).is_ok() {
+                io_stats.tx_bytes += req_bytes.len() as u64;
+                publish_stats(stats_tx, io_stats);
+            }
         }
 
         // Read response with poll interval
@@ -43,11 +90,20 @@ pub fn run_serial_loop(
 
             match port.read(&mut buffer) {
                 Ok(n) if n > 0 => {
+                    io_stats.rx_bytes += n as u64;
+                    publish_stats(stats_tx, io_stats);
                     if let Ok(frames) = codec.decode(&buffer[..n], session_started_at) {
                         for frame in frames {
                             if let TactileAFrame::Rep(rep) = frame {
                                 if let Ok(vals) = TactileACodec::parse_data_frame(&rep.payload) {
+                                    if let Some(recorder) = recorder {
+                                        let pressures: Vec<u32> =
+                                            vals.iter().map(|v| (*v).max(0) as u32).collect();
+                                        recorder.add_frame(&pressures);
+                                    }
                                     let _ = sample_tx.try_send(vals);
+                                    io_stats.rx_frames += 1;
+                                    publish_stats(stats_tx, io_stats);
                                 }
                             }
                         }
@@ -68,6 +124,111 @@ pub fn run_serial_loop(
     }
 }
 
+fn run_hand_gateway_loop(
+    port: &mut dyn ReadWrite,
+    cancel_rx: &Receiver<()>,
+    sample_tx: &Sender<Vec<i32>>,
+    stats_tx: Option<&Sender<SerialIoStats>>,
+    recorder: Option<&Recorder>,
+) {
+    let session_started_at = Instant::now();
+    let mut codec = HandGatewayCodec::new(DEFAULT_HAND_GATEWAY_NODE_SAMPLE_COUNTS);
+    let mut buffer = [0u8; 1024];
+    let poll_interval = Duration::from_millis(POLL_INTERVAL_MS);
+    let mut io_stats = SerialIoStats::default();
+
+    loop {
+        if cancel_rx.try_recv().is_ok() {
+            break;
+        }
+
+        let deadline = Instant::now() + poll_interval;
+        loop {
+            if Instant::now() >= deadline {
+                break;
+            }
+
+            match port.read(&mut buffer) {
+                Ok(n) if n > 0 => {
+                    io_stats.rx_bytes += n as u64;
+                    publish_stats(stats_tx, io_stats);
+                    if let Ok(frames) = codec.decode(&buffer[..n], session_started_at) {
+                        for frame in frames {
+                            let HandGatewayFrame::DataRep(rep) = frame;
+                            // println!(
+                            //     "[hand-packet-raw] bytes={} timestamp_us={} config=0x{:08X} valid_config=0x{:08X} block_count={} payload_bytes={} raw={}",
+                            //     rep.raw.len(),
+                            //     rep.timestamp,
+                            //     rep.config,
+                            //     rep.valid_config,
+                            //     rep.block_count,
+                            //     rep.nodes
+                            //         .iter()
+                            //         .map(|node| node.payload.len())
+                            //         .sum::<usize>(),
+                            //     format_hex_bytes(&rep.raw)
+                            // );
+                            let mut vals = Vec::new();
+                            let mut parse_ok = true;
+                            for node in &rep.nodes {
+                                match HandGatewayCodec::parse_node_payload(&node.payload) {
+                                    Ok(node_values) => {
+                                        vals.extend(node_values.into_iter().map(|raw| {
+                                            let raw = raw as i32;
+                                            if raw < 15 { 0 } else { raw }
+                                        }));
+                                    }
+                                    Err(err) => {
+                                        parse_ok = false;
+                                        eprintln!("[hand-packet-values] parse error: {err}");
+                                        break;
+                                    }
+                                }
+                            }
+
+                            if parse_ok {
+                                // println!("[hand-packet-values] samples={}", vals.len());
+                                if let Some(recorder) = recorder {
+                                    let pressures: Vec<u32> =
+                                        vals.iter().map(|v| (*v).max(0) as u32).collect();
+                                    recorder.add_frame(&pressures);
+                                }
+                                let _ = sample_tx.try_send(vals);
+                                io_stats.rx_frames += 1;
+                                publish_stats(stats_tx, io_stats);
+                            }
+                        }
+                    }
+                }
+                Ok(_) => {
+                    std::thread::sleep(Duration::from_millis(1));
+                }
+                Err(ref e) if e.kind() == std::io::ErrorKind::TimedOut => {
+                    continue;
+                }
+                Err(e) => {
+                    eprintln!("[serial] hand gateway read error: {e}");
+                    return;
+                }
+            }
+        }
+    }
+}
+
+fn format_hex_bytes(bytes: &[u8]) -> String {
+    bytes
+        .iter()
+        .map(|byte| format!("{byte:02X}"))
+        .collect::<Vec<_>>()
+        .join(" ")
+}
+
+fn publish_stats(stats_tx: Option<&Sender<SerialIoStats>>, stats: SerialIoStats) {
+    if let Some(tx) = stats_tx {
+        let _ = tx.try_send(stats);
+    }
+}
+
 /// Trait abstracting read+write for the serial port
 pub trait ReadWrite: Send {
     fn read(&mut self, buf: &mut [u8]) -> std::io::Result<usize>;

src/serial_core/utils.rs

@@ -1,10 +1,64 @@
 use std::time::Instant;
 
+pub fn usize_to_u16_be_bytes(n: usize) -> [u8; 2] {
+    (n as u16).to_be_bytes()
+}
+
+pub fn usize_to_u16_le_bytes(n: usize) -> [u8; 2] {
+    (n as u16).to_be_bytes()
+}
+
+pub fn u16_to_hex_be_bytes(n: u16) -> [u8; 2] {
+    n.to_be_bytes()
+}
+
+pub fn u16_to_hex_le_bytes(n: u16) -> [u8; 2] {
+    n.to_le_bytes()
+}
+
+pub fn calc_crc8_smbus(c: &[u8]) -> u8 {
+    let crc8_smbus = crc::Crc::<u8>::new(&crc::CRC_8_SMBUS);
+    crc8_smbus.checksum(c)
+}
+
 pub fn calc_crc8_itu(c: &[u8]) -> u8 {
     let crc8_itu_alg = crc::Crc::<u8>::new(&crc::CRC_8_I_432_1);
     crc8_itu_alg.checksum(c)
 }
 
+pub fn calc_crc8_itu_xor55(c: &[u8]) -> u8 {
+    calc_crc8_itu(c) ^ 0x55
+}
+
 pub fn elapsed_millis(start_at: Instant) -> u64 {
     start_at.elapsed().as_millis() as u64
 }
+
+#[cfg(test)]
+mod test {
+    use crate::serial_core::utils::{calc_crc8_itu, calc_crc8_itu_xor55, calc_crc8_smbus};
+
+    #[test]
+    fn test_crc8_itu() {
+        let req_vec = vec![
+            0x55, 0xAA, 0x09, 0x00, 0x34, 0x00, 0xFB, 0x00, 0x1C, 0x00, 0x00, 0x18, 0x00,
+        ];
+        let checksum = calc_crc8_itu(req_vec.as_slice());
+        assert_eq!(checksum, 0x7A);
+    }
+
+    #[test]
+    fn test_crc8_smbus() {
+        let req_vec = vec![
+            0x55, 0xAA, 0x09, 0x00, 0x34, 0x00, 0xFB, 0x00, 0x1C, 0x00, 0x00, 0x18, 0x00,
+        ];
+        let checksum = calc_crc8_smbus(req_vec.as_slice());
+        assert_eq!(checksum, 0x2F);
+    }
+
+    #[test]
+    fn test_crc8_itu_xor55() {
+        let req_vec = vec![0x55, 0xAA, 0x07, 0x00, 0x01, 0x01, 0xFF, 0xFF, 0xFF, 0xFF];
+        assert_eq!(calc_crc8_itu_xor55(req_vec.as_slice()), 0xFD);
+    }
+}

src/style.rs

@@ -0,0 +1,334 @@
+use eframe::egui::{self, Color32};
+
+#[derive(Clone, Copy)]
+pub struct AppTheme {
+    pub bg: egui::Color32,
+    pub panel: egui::Color32,
+    pub panel_strong: egui::Color32,
+    pub panel_deep: egui::Color32,
+    pub border: egui::Color32,
+    pub border_soft: egui::Color32,
+    pub text: egui::Color32,
+    pub text_dim: egui::Color32,
+    pub text_subtle: egui::Color32,
+    pub accent: egui::Color32,
+    pub accent_hot: egui::Color32,
+    pub radius: u8,
+}
+
+#[derive(Clone, Copy)]
+pub struct DesignMetrics {
+    pub row_gap: f32,
+    pub item_gap: f32,
+    pub field_height: f32,
+    pub button_height: f32,
+    pub icon_button: egui::Vec2,
+    pub panel_padding: i8,
+    pub group_padding_x: i8,
+    pub group_padding_y: i8,
+}
+
+pub const ONE_DARK_PRO: AppTheme = AppTheme {
+    bg: egui::Color32::BLACK,
+    panel: egui::Color32::from_rgb(22, 28, 35),
+    panel_strong: egui::Color32::from_rgb(34, 43, 54),
+    panel_deep: egui::Color32::from_rgb(15, 20, 27),
+    border: egui::Color32::from_rgb(78, 93, 110),
+    border_soft: egui::Color32::from_rgb(50, 62, 76),
+    text: egui::Color32::from_rgb(235, 241, 247),
+    text_dim: egui::Color32::from_rgb(174, 185, 198),
+    text_subtle: egui::Color32::from_rgb(126, 139, 154),
+    accent: egui::Color32::from_rgb(41, 192, 204),
+    accent_hot: egui::Color32::from_rgb(247, 190, 84),
+    radius: 5,
+};
+
+pub const ACCENT_GREEN: egui::Color32 = egui::Color32::from_rgb(126, 203, 137);
+pub const ACCENT_RED: egui::Color32 = egui::Color32::from_rgb(240, 99, 94);
+pub const ACCENT_BLUE: egui::Color32 = egui::Color32::from_rgb(96, 170, 240);
+pub const ACCENT_ORANGE: egui::Color32 = egui::Color32::from_rgb(242, 163, 87);
+
+pub const METRICS: DesignMetrics = DesignMetrics {
+    row_gap: 10.0,
+    item_gap: 8.0,
+    field_height: 24.0,
+    button_height: 28.0,
+    icon_button: egui::vec2(30.0, 26.0),
+    panel_padding: 12,
+    group_padding_x: 10,
+    group_padding_y: 8,
+};
+
+pub mod layout {
+    pub const TITLE_BAR_HEIGHT: f32 = 36.0;
+    pub const CONFIG_BAR_HEIGHT: f32 = 48.0;
+    pub const WORKSPACE_TOP: f32 = TITLE_BAR_HEIGHT + CONFIG_BAR_HEIGHT;
+    pub const CENTER_PANEL_TOP: f32 = 48.0;
+    pub const LEFT_X: f32 = 24.0;
+    pub const RIGHT_X: f32 = 1328.0;
+    pub const TOP_Y: f32 = 56.0;
+    pub const LEFT_SECOND_Y: f32 = 292.0;
+    pub const RIGHT_SECOND_Y: f32 = 388.0;
+    pub const LEFT_TAG_X: f32 = 24.0;
+    pub const RIGHT_TAG_X: f32 = 1810.0;
+}
+
+pub fn apply_theme(ctx: &egui::Context, theme: &AppTheme) {
+    let mut visuals = egui::Visuals::dark();
+    visuals.override_text_color = Some(theme.text);
+    visuals.panel_fill = theme.bg;
+    visuals.window_fill = theme.panel;
+    visuals.window_stroke = egui::Stroke::new(1.0, theme.border);
+    visuals.extreme_bg_color = theme.panel_deep;
+    visuals.faint_bg_color = theme.panel_strong;
+    visuals.code_bg_color = theme.panel_deep;
+    visuals.warn_fg_color = theme.accent_hot;
+    visuals.error_fg_color = ACCENT_RED;
+
+    visuals.widgets.noninteractive.bg_fill = theme.panel_strong;
+    visuals.widgets.noninteractive.bg_stroke = egui::Stroke::new(1.0, theme.border_soft);
+    visuals.widgets.noninteractive.fg_stroke = egui::Stroke::new(1.0, theme.text);
+    visuals.widgets.inactive.bg_fill = theme.panel_strong;
+    visuals.widgets.inactive.bg_stroke = egui::Stroke::new(1.0, theme.border_soft);
+    visuals.widgets.inactive.fg_stroke = egui::Stroke::new(1.0, theme.text);
+    visuals.widgets.hovered.bg_fill = egui::Color32::from_rgb(44, 57, 70);
+    visuals.widgets.hovered.bg_stroke = egui::Stroke::new(1.0, theme.accent);
+    visuals.widgets.hovered.fg_stroke = egui::Stroke::new(1.0, egui::Color32::WHITE);
+    visuals.widgets.active.bg_fill = theme.accent;
+    visuals.widgets.active.bg_stroke = egui::Stroke::new(1.0, theme.accent_hot);
+    visuals.widgets.active.fg_stroke = egui::Stroke::new(1.0, egui::Color32::WHITE);
+    visuals.widgets.open.bg_fill = egui::Color32::from_rgb(39, 50, 62);
+    visuals.widgets.open.bg_stroke = egui::Stroke::new(1.0, theme.accent);
+    visuals.widgets.open.fg_stroke = egui::Stroke::new(1.0, theme.text);
+
+    visuals.selection.bg_fill = egui::Color32::from_rgb(35, 123, 140);
+    visuals.selection.stroke = egui::Stroke::new(1.0, egui::Color32::WHITE);
+    visuals.hyperlink_color = theme.accent_hot;
+    ctx.set_visuals(visuals);
+
+    let mut style = (*ctx.global_style()).clone();
+    style.spacing.item_spacing = egui::vec2(METRICS.item_gap, 6.0);
+    style.spacing.button_padding = egui::vec2(12.0, 5.0);
+    style.spacing.window_margin = egui::Margin::same(METRICS.panel_padding);
+    style.spacing.interact_size = egui::vec2(72.0, METRICS.field_height);
+    style.spacing.combo_width = 112.0;
+    style.spacing.text_edit_width = 112.0;
+    style.visuals.window_corner_radius = egui::CornerRadius::same(theme.radius);
+    style.visuals.menu_corner_radius = egui::CornerRadius::same(4);
+    style.visuals.window_shadow = egui::epaint::Shadow {
+        offset: [0, 14],
+        blur: 28,
+        spread: 0,
+        color: egui::Color32::from_black_alpha(135),
+    };
+    ctx.set_global_style(style);
+}
+
+pub fn apply_fonts(ctx: &egui::Context) {
+    let mut fonts = egui::FontDefinitions::default();
+
+    fonts.font_data.insert(
+        "Hack-Bold".to_owned(),
+        egui::FontData::from_static(include_bytes!("../static/Hack-Bold.ttf")).into(),
+    );
+
+    let has_yahei = std::fs::read(r"C:\Windows\Fonts\msyh.ttc")
+        .or_else(|_| std::fs::read(r"C:\Windows\Fonts\msyhbd.ttc"))
+        .map(|font_data| {
+            fonts.font_data.insert(
+                "Microsoft-YaHei".to_owned(),
+                egui::FontData::from_owned(font_data).into(),
+            );
+        })
+        .is_ok();
+
+    fonts
+        .families
+        .entry(egui::FontFamily::Proportional)
+        .or_default()
+        .insert(0, "Hack-Bold".to_owned());
+    if has_yahei {
+        fonts
+            .families
+            .entry(egui::FontFamily::Proportional)
+            .or_default()
+            .push("Microsoft-YaHei".to_owned());
+    }
+
+    fonts
+        .families
+        .entry(egui::FontFamily::Monospace)
+        .or_default()
+        .insert(0, "Hack-Bold".to_owned());
+    if has_yahei {
+        fonts
+            .families
+            .entry(egui::FontFamily::Monospace)
+            .or_default()
+            .push("Microsoft-YaHei".to_owned());
+    }
+
+    ctx.set_fonts(fonts);
+}
+
+pub fn panel_frame(ctx: &egui::Context) -> egui::Frame {
+    let style = ctx.global_style();
+    egui::Frame::window(&style)
+        .fill(ONE_DARK_PRO.panel)
+        .stroke(egui::Stroke::new(1.0, ONE_DARK_PRO.border))
+        .corner_radius(egui::CornerRadius::same(ONE_DARK_PRO.radius))
+        .inner_margin(egui::Margin::same(METRICS.panel_padding))
+        .shadow(egui::epaint::Shadow {
+            offset: [0, 14],
+            blur: 28,
+            spread: 0,
+            color: egui::Color32::from_black_alpha(135),
+        })
+}
+
+pub fn center_panel_frame() -> egui::Frame {
+    egui::Frame::new()
+        .fill(ONE_DARK_PRO.panel)
+        .corner_radius(egui::CornerRadius::same(ONE_DARK_PRO.radius))
+        .inner_margin(egui::Margin::symmetric(
+            METRICS.panel_padding + 2,
+            METRICS.panel_padding,
+        ))
+}
+
+pub fn group_frame() -> egui::Frame {
+    egui::Frame::new()
+        .fill(ONE_DARK_PRO.panel_deep)
+        .stroke(egui::Stroke::new(1.0, ONE_DARK_PRO.border_soft))
+        .corner_radius(egui::CornerRadius::same(4))
+        .inner_margin(egui::Margin::symmetric(
+            METRICS.group_padding_x,
+            METRICS.group_padding_y,
+        ))
+}
+
+pub fn tag_button(label: impl Into<egui::WidgetText>) -> egui::Button<'static> {
+    egui::Button::new(label)
+        .fill(ONE_DARK_PRO.panel_strong)
+        .stroke(egui::Stroke::new(1.0, ONE_DARK_PRO.border))
+        .corner_radius(egui::CornerRadius::same(4))
+        .min_size(egui::vec2(0.0, METRICS.button_height))
+}
+
+pub fn rich_tag_button(
+    label: impl Into<String>,
+    color: impl Into<Color32>,
+) -> egui::Button<'static> {
+    let text = egui::RichText::new(label.into()).color(color);
+
+    egui::Button::new(text)
+        .fill(ONE_DARK_PRO.panel_strong)
+        .stroke(egui::Stroke::new(1.0, ONE_DARK_PRO.border))
+        .corner_radius(egui::CornerRadius::same(4))
+        .min_size(egui::vec2(0.0, METRICS.button_height))
+}
+
+pub fn primary_button(label: impl Into<egui::WidgetText>) -> egui::Button<'static> {
+    egui::Button::new(label)
+        .fill(ONE_DARK_PRO.accent)
+        .stroke(egui::Stroke::new(1.0, ONE_DARK_PRO.accent_hot))
+        .corner_radius(egui::CornerRadius::same(4))
+        .min_size(egui::vec2(112.0, METRICS.button_height))
+}
+
+pub fn danger_button(label: impl Into<egui::WidgetText>) -> egui::Button<'static> {
+    egui::Button::new(label)
+        .fill(ACCENT_RED)
+        .stroke(egui::Stroke::new(
+            1.0,
+            egui::Color32::from_rgb(255, 138, 126),
+        ))
+        .corner_radius(egui::CornerRadius::same(4))
+        .min_size(egui::vec2(112.0, METRICS.button_height))
+}
+
+pub fn accent_button(
+    label: impl Into<egui::WidgetText>,
+    fill: egui::Color32,
+) -> egui::Button<'static> {
+    egui::Button::new(label)
+        .fill(fill)
+        .stroke(egui::Stroke::new(1.0, ONE_DARK_PRO.border))
+        .corner_radius(egui::CornerRadius::same(4))
+        .min_size(egui::vec2(0.0, METRICS.button_height))
+}
+
+pub fn mode_button(label: &'static str, selected: bool) -> egui::Button<'static> {
+    let fill = if selected {
+        ONE_DARK_PRO.accent
+    } else {
+        ONE_DARK_PRO.panel_strong
+    };
+    let stroke = if selected {
+        ONE_DARK_PRO.accent_hot
+    } else {
+        ONE_DARK_PRO.border_soft
+    };
+
+    egui::Button::new(egui::RichText::new(label).color(egui::Color32::WHITE))
+        .fill(fill)
+        .stroke(egui::Stroke::new(1.0, stroke))
+        .corner_radius(egui::CornerRadius::same(4))
+        .min_size(egui::vec2(96.0, METRICS.button_height))
+}
+
+pub fn icon_button<'a>(icon: impl Into<egui::WidgetText>, size: egui::Vec2) -> egui::Button<'a> {
+    egui::Button::new(icon)
+        .fill(ONE_DARK_PRO.panel_strong)
+        .stroke(egui::Stroke::new(1.0, ONE_DARK_PRO.border))
+        .corner_radius(egui::CornerRadius::same(4))
+        .min_size(size)
+}
+
+pub fn panel_title(title: &'static str) -> egui::RichText {
+    egui::RichText::new(title)
+        .color(ONE_DARK_PRO.text_dim)
+        .size(13.0)
+}
+
+pub fn field_label(label: impl Into<String>) -> egui::RichText {
+    egui::RichText::new(label.into())
+        .color(ONE_DARK_PRO.text_dim)
+        .size(12.0)
+}
+
+pub fn value_text(text: impl Into<String>) -> egui::RichText {
+    egui::RichText::new(text.into())
+        .color(ONE_DARK_PRO.text)
+        .size(12.0)
+}
+
+pub fn subtle_text(text: impl Into<String>) -> egui::RichText {
+    egui::RichText::new(text.into())
+        .color(ONE_DARK_PRO.text_subtle)
+        .size(12.0)
+}
+
+pub fn dim_text() -> egui::Color32 {
+    ONE_DARK_PRO.text_dim
+}
+
+pub fn accent_text() -> egui::Color32 {
+    ONE_DARK_PRO.accent_hot
+}
+
+pub fn status_color_ok() -> egui::Color32 {
+    ACCENT_GREEN
+}
+
+pub fn status_color_warn() -> egui::Color32 {
+    ONE_DARK_PRO.accent_hot
+}
+
+pub fn status_color_error() -> egui::Color32 {
+    ACCENT_RED
+}
+
+pub fn status_color_info() -> egui::Color32 {
+    ACCENT_BLUE
+}

src/texture.rs

@@ -1,16 +1,51 @@
 #![allow(dead_code)]
 
 use anyhow::*;
-use eframe::{
+use eframe::wgpu;
-    egui,
-    egui_wgpu::{self, wgpu},
-    wgpu::util::DeviceExt,
-};
 use image::GenericImageView;
+
+#[derive(Copy, Clone, Debug, PartialEq, Eq, Hash)]
+pub enum TextureColorSpace {
+    Srgb,
+    Linear,
+}
+
+impl TextureColorSpace {
+    pub fn format(self) -> wgpu::TextureFormat {
+        match self {
+            Self::Srgb => wgpu::TextureFormat::Rgba8UnormSrgb,
+            Self::Linear => wgpu::TextureFormat::Rgba8Unorm,
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug)]
+pub struct TextureSamplerDescriptor {
+    pub address_mode_u: wgpu::AddressMode,
+    pub address_mode_v: wgpu::AddressMode,
+    pub mag_filter: wgpu::FilterMode,
+    pub min_filter: wgpu::FilterMode,
+    pub mipmap_filter: wgpu::MipmapFilterMode,
+}
+
+impl Default for TextureSamplerDescriptor {
+    fn default() -> Self {
+        Self {
+            address_mode_u: wgpu::AddressMode::Repeat,
+            address_mode_v: wgpu::AddressMode::Repeat,
+            mag_filter: wgpu::FilterMode::Linear,
+            min_filter: wgpu::FilterMode::Linear,
+            mipmap_filter: wgpu::MipmapFilterMode::Linear,
+        }
+    }
+}
+
 pub struct Texture {
     pub texture: wgpu::Texture,
     pub view: wgpu::TextureView,
     pub sampler: wgpu::Sampler,
+    pub width: u32,
+    pub height: u32,
 }
 
 impl Texture {
@@ -55,6 +90,8 @@ impl Texture {
             texture,
             view,
             sampler,
+            width: config.width,
+            height: config.height,
         }
     }
 
@@ -89,7 +126,7 @@ impl Texture {
             mip_level_count: 1,
             sample_count: 1,
             dimension: wgpu::TextureDimension::D2,
-            format: wgpu::TextureFormat::Rgba8UnormSrgb,
+            format: TextureColorSpace::Srgb.format(),
             usage: wgpu::TextureUsages::TEXTURE_BINDING | wgpu::TextureUsages::COPY_DST,
             view_formats: &[],
         });
@@ -125,6 +162,8 @@ impl Texture {
             texture,
             view,
             sampler,
+            width: dimensions.0,
+            height: dimensions.1,
         })
     }
 
@@ -135,6 +174,28 @@ impl Texture {
         width: u32,
         height: u32,
         label: &str,
+    ) -> Result<Self> {
+        Self::from_rgba8_with_sampler(
+            device,
+            queue,
+            rgba,
+            width,
+            height,
+            label,
+            TextureColorSpace::Srgb,
+            TextureSamplerDescriptor::default(),
+        )
+    }
+
+    pub fn from_rgba8_with_sampler(
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        rgba: &[u8],
+        width: u32,
+        height: u32,
+        label: &str,
+        color_space: TextureColorSpace,
+        sampler_desc: TextureSamplerDescriptor,
     ) -> Result<Self> {
         let size = wgpu::Extent3d {
             width,
@@ -147,7 +208,7 @@ impl Texture {
             mip_level_count: 1,
             sample_count: 1,
             dimension: wgpu::TextureDimension::D2,
-            format: wgpu::TextureFormat::Rgba8UnormSrgb,
+            format: color_space.format(),
             usage: wgpu::TextureUsages::TEXTURE_BINDING | wgpu::TextureUsages::COPY_DST,
             view_formats: &[],
         });
@@ -170,12 +231,12 @@ impl Texture {
 
         let view = texture.create_view(&wgpu::TextureViewDescriptor::default());
         let sampler = device.create_sampler(&wgpu::SamplerDescriptor {
-            address_mode_u: wgpu::AddressMode::ClampToEdge,
+            address_mode_u: sampler_desc.address_mode_u,
-            address_mode_v: wgpu::AddressMode::ClampToEdge,
+            address_mode_v: sampler_desc.address_mode_v,
             address_mode_w: wgpu::AddressMode::ClampToEdge,
-            mag_filter: wgpu::FilterMode::Linear,
+            mag_filter: sampler_desc.mag_filter,
-            min_filter: wgpu::FilterMode::Nearest,
+            min_filter: sampler_desc.min_filter,
-            mipmap_filter: wgpu::MipmapFilterMode::Nearest,
+            mipmap_filter: sampler_desc.mipmap_filter,
             ..Default::default()
         });
 
@@ -183,6 +244,8 @@ impl Texture {
             texture,
             view,
             sampler,
+            width,
+            height,
         })
     }
 }

static/wgsl/shader.wgsl

@@ -3,21 +3,74 @@ struct MatrixUniform {
     viewport: vec4f,
     glyph: vec4f,
     color: vec4f,
+    render_options: vec4f,
+    image: vec4f,
 }
 
 @group(0) @binding(0)
 var<uniform> u: MatrixUniform;
 
 @group(1) @binding(0)
-var model_texture: texture_2d<f32>;
+var base_color_texture: texture_2d<f32>;
 
 @group(1) @binding(1)
-var model_sampler: sampler;
+var base_color_sampler: sampler;
+
+struct MaterialParams {
+    base_color: vec4f,
+    metallic_roughness: vec4f,
+    emissive_alpha: vec4f,
+    flags: vec4f,
+}
+
+@group(1) @binding(2)
+var<uniform> material: MaterialParams;
+
+@group(1) @binding(3)
+var metallic_roughness_texture: texture_2d<f32>;
+
+@group(1) @binding(4)
+var metallic_roughness_sampler: sampler;
+
+@group(1) @binding(5)
+var normal_texture: texture_2d<f32>;
+
+@group(1) @binding(6)
+var normal_sampler: sampler;
+
+@group(1) @binding(7)
+var occlusion_texture: texture_2d<f32>;
+
+@group(1) @binding(8)
+var occlusion_sampler: sampler;
+
+@group(1) @binding(9)
+var emissive_texture: texture_2d<f32>;
+
+@group(1) @binding(10)
+var emissive_sampler: sampler;
 
 fn saturate(value: f32) -> f32 {
     return clamp(value, 0.0, 1.0);
 }
 
+fn linear_to_srgb(linear: vec3f) -> vec3f {
+    let x = max(linear, vec3f(0.0));
+    let low = x * 12.92;
+    let high = 1.055 * pow(x, vec3f(1.0 / 2.4)) - vec3f(0.055);
+    return select(high, low, x <= vec3f(0.0031308));
+}
+
+fn output_color(linear_rgb: vec3f, alpha: f32) -> vec4f {
+    let clamped = clamp(linear_rgb, vec3f(0.0), vec3f(1.0));
+    if (u.color.w > 0.5) {
+        return vec4f(clamped, alpha);
+    }
+
+    let encoded = linear_to_srgb(clamped);
+    return vec4f(encoded, alpha);
+}
+
 fn range_stop_color(index: u32) -> vec3f {
     switch index {
         case 0u: {
@@ -73,41 +126,61 @@ fn vs_background(@builtin(vertex_index) vertex_index: u32) -> BackgroundVertexOu
 
 @fragment
 fn fs_background(@builtin(position) frag_coord: vec4f) -> @location(0) vec4f {
-    let pixel = frag_coord.xy;
+    return output_color(vec3f(0.0, 0.0, 0.0), 1.0);
-    let viewport = u.viewport.xy;
+}
-    let uv = pixel / max(viewport, vec2f(1.0, 1.0));
-    var color = mix(vec3f(0.112, 0.126, 0.160), vec3f(0.145, 0.160, 0.198), 1.0 - uv.y);
-    let vignette = smoothstep(0.18, 0.92, length((uv - vec2f(0.52, 0.48)) * vec2f(viewport.x / viewport.y, 1.0)));
-    color *= 1.0 - vignette * 0.30;
-    color += vec3f(0.035, 0.070, 0.090) * (1.0 - smoothstep(0.0, 0.9, abs(uv.y - 0.52)));
 
-    let track_width = clamp(viewport.x * 0.42, 260.0, 560.0);
-    let track_height = 12.0;
-    let track_center = vec2f(viewport.x * 0.5, viewport.y - 38.0);
-    let local = pixel - track_center;
-    let half_size = vec2f(track_width * 0.5, track_height * 0.5);
-    let inside_track = step(abs(local.x), half_size.x) * step(abs(local.y), half_size.y);
-    let border = step(abs(local.x), half_size.x + 1.0) * step(abs(local.y), half_size.y + 1.0) - inside_track;
-    let t = saturate((local.x + half_size.x) / track_width);
 
-    if (inside_track > 0.5) {
+// hand image background
-        let shade = mix(0.72, 1.0, 1.0 - saturate((local.y + half_size.y) / track_height));
+struct HandImageVertexOutput {
-        color = mix(color, sample_range_color(t) * shade, 0.96);
+    @builtin(position) clip_position: vec4f,
+    @location(0) screen_uv: vec2f,
+}
+
+@vertex
+fn vs_hand_image(@builtin(vertex_index) vertex_index: u32) -> HandImageVertexOutput {
+    let positions = array<vec2f, 6>(
+        vec2f(-1.0, -1.0),
+        vec2f(1.0, -1.0),
+        vec2f(-1.0, 1.0),
+        vec2f(-1.0, 1.0),
+        vec2f(1.0, -1.0),
+        vec2f(1.0, 1.0),
+    );
+    let uvs = array<vec2f, 6>(
+        vec2f(0.0, 1.0),
+        vec2f(1.0, 1.0),
+        vec2f(0.0, 0.0),
+        vec2f(0.0, 0.0),
+        vec2f(1.0, 1.0),
+        vec2f(1.0, 0.0),
+    );
+
+    var out: HandImageVertexOutput;
+    out.clip_position = vec4f(positions[vertex_index], 0.0, 1.0);
+    out.screen_uv = uvs[vertex_index];
+    return out;
+}
+
+@fragment
+fn fs_hand_image(in: HandImageVertexOutput) -> @location(0) vec4f {
+    let viewport_aspect = u.viewport.x / max(u.viewport.y, 1.0);
+    let image_aspect = u.image.x / max(u.image.y, 1.0);
+
+    var uv = in.screen_uv;
+    if (viewport_aspect > image_aspect) {
+        let image_width = image_aspect / viewport_aspect;
+        uv.x = (uv.x - (1.0 - image_width) * 0.5) / image_width;
+    } else {
+        let image_height = viewport_aspect / image_aspect;
+        uv.y = (uv.y - (1.0 - image_height) * 0.5) / image_height;
     }
 
-    color = max(color, vec3f(0.34, 0.41, 0.46) * border);
+    if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
-
+        discard;
-    let tick_area = step(abs(local.x), half_size.x) * step(abs(local.y), half_size.y + 8.0);
-    if (tick_area > 0.5) {
-        let ticks = array<f32, 4>(0.0, 0.33, 0.66, 1.0);
-        for (var index = 0u; index < 4u; index = index + 1u) {
-            let tick_x = (ticks[index] - 0.5) * track_width;
-            let tick = step(abs(local.x - tick_x), 1.0) * step(abs(local.y), half_size.y + 7.0);
-            color = max(color, vec3f(0.78, 0.84, 0.90) * tick);
-        }
     }
 
-    return vec4f(color, 1.0);
+    let color = textureSample(base_color_texture, base_color_sampler, uv);
+    return output_color(color.rgb, color.a);
 }
 
 
@@ -252,10 +325,9 @@ fn vs_glyph(vertex: GlyphVertexInput, instance: GlyphInstanceInput) -> GlyphVert
 fn fs_glyph(in: GlyphVertexOutput) -> @location(0) vec4f {
     let alpha = number_alpha(in.local, in.display_value);
     let color = sample_range_color(in.intensity) * mix(0.82, 1.16, saturate(in.intensity));
-    return vec4f(color, alpha);
+    return output_color(color, alpha);
 }
 
-
 // dot
 struct DotVertexInput {
     @location(0) local: vec2f,
@@ -277,12 +349,259 @@ fn circle_alpha(local: vec2f, radius: f32, softness: f32) -> f32 {
     return 1.0 - smoothstep(radius, radius + softness, dist);
 }
 
+// Convert a point authored in hand.png UV space into clip space.
+// This mirrors fs_hand_image's aspect-fit math, so fingertip dots stay attached
+// to the same image pixels when the app window changes shape.
+fn hand_image_uv_to_clip(image_uv: vec2f) -> vec2f {
+    let viewport_aspect = u.viewport.x / max(u.viewport.y, 1.0);
+    let image_aspect = u.image.x / max(u.image.y, 1.0);
+
+    var screen_uv = image_uv;
+
+    if (viewport_aspect > image_aspect) {
+        let image_width = image_aspect / viewport_aspect;
+        screen_uv.x = image_uv.x * image_width + (1.0 - image_width) * 0.5;
+    } else {
+        let image_height = viewport_aspect / image_aspect;
+        screen_uv.y = image_uv.y * image_height + (1.0 - image_height) * 0.5;
+    }
+
+    return vec2f(screen_uv.x * 2.0 - 1.0, 1.0 - screen_uv.y * 2.0);
+}
+
+struct HandMembraneVertexOutput {
+    @builtin(position) clip_position: vec4f,
+    @location(0) local: vec2f,
+}
+
+fn rotate_2d(point: vec2f, angle: f32) -> vec2f {
+    let c = cos(angle);
+    let s = sin(angle);
+    return vec2f(point.x * c - point.y * s, point.x * s + point.y * c);
+}
+
+fn rounded_rect_alpha(local: vec2f, radius: f32, softness: f32) -> f32 {
+    let q = abs(local) - vec2f(1.0 - radius, 1.0 - radius);
+    let dist = length(max(q, vec2f(0.0, 0.0))) + min(max(q.x, q.y), 0.0) - radius;
+    return 1.0 - smoothstep(0.0, softness, dist);
+}
+
+fn fingertip_film_alpha(
+    local: vec2f,
+    half_width: f32,
+    cap_center_y: f32,
+    rear_edge_y: f32,
+    rear_bulge: f32,
+    softness: f32,
+) -> f32 {
+    // Top/front of the film is a closed round fingertip cap.
+    let cap_dist = length(vec2f(local.x, local.y - cap_center_y));
+    let cap = (1.0 - smoothstep(half_width, half_width + softness, cap_dist))
+        * (1.0 - smoothstep(cap_center_y - softness, cap_center_y + softness, local.y));
+
+    // The rear half keeps nearly parallel sides and ends with a shallow arc;
+    // it deliberately does not converge back into another capsule end.
+    let x_norm = clamp(abs(local.x) / max(half_width, 0.001), 0.0, 1.0);
+    let rear_curve_y = rear_edge_y + rear_bulge * (1.0 - x_norm * x_norm);
+    let side = 1.0 - smoothstep(half_width, half_width + softness, abs(local.x));
+    let rear = 1.0 - smoothstep(rear_curve_y, rear_curve_y + softness, local.y);
+    let body_gate = smoothstep(cap_center_y - softness, cap_center_y + softness, local.y);
+    let body = side * rear * body_gate;
+
+    return max(cap, body);
+}
+
+@vertex
+fn vs_hand_membrane(vertex: DotVertexInput, instance: DotInstanceInput) -> HandMembraneVertexOutput {
+    let center_px = instance.world_position.xy * u.image.xy;
+    let size_px = instance.style.yz;
+    let angle = instance.style.x;
+    let local_px = vertex.local * size_px * 0.5;
+    let image_uv = (center_px + rotate_2d(local_px, angle)) / max(u.image.xy, vec2f(1.0, 1.0));
+
+    var out: HandMembraneVertexOutput;
+    out.clip_position = vec4f(hand_image_uv_to_clip(image_uv), 0.0, 1.0);
+    out.local = vertex.local;
+    return out;
+}
+
+@fragment
+fn fs_hand_membrane(in: HandMembraneVertexOutput) -> @location(0) vec4f {
+    // The film shape matches the fingertip: closed round front, parallel rear sides,
+    // and a shallow rear arc instead of a second capsule end.
+    let panel = fingertip_film_alpha(in.local, 0.66, -0.38, 0.72, 0.18, 0.045);
+    let inner = fingertip_film_alpha(in.local, 0.54, -0.36, 0.64, 0.12, 0.060);
+    let border = clamp(panel - inner * 0.52, 0.0, 1.0);
+
+    // Dense mesh: the live 12x7 pressure dots sit over this finer sensor lattice.
+    let uv = clamp(in.local * 0.5 + vec2f(0.5, 0.5), vec2f(0.0, 0.0), vec2f(1.0, 1.0));
+    let grid = vec2f(18.0, 34.0);
+    let cell = uv * grid - vec2f(0.5, 0.5);
+    let nearest = abs(fract(cell + vec2f(0.5, 0.5)) - vec2f(0.5, 0.5));
+    let grid_line = max(
+        1.0 - smoothstep(0.014, 0.038, nearest.x),
+        1.0 - smoothstep(0.014, 0.038, nearest.y),
+    );
+    let joint = 1.0 - smoothstep(0.070, 0.150, length(nearest * vec2f(1.18, 1.0)));
+    let center_shadow = 1.0 - smoothstep(0.10, 0.76, length(in.local * vec2f(0.92, 0.66)));
+
+    let top_light = smoothstep(-0.52, 0.16, -in.local.y) * 0.20;
+    let side_glow = smoothstep(0.30, 0.70, abs(in.local.x)) * 0.26;
+    let lift_shadow = smoothstep(0.48, 0.86, in.local.y) * (1.0 - smoothstep(0.50, 0.86, abs(in.local.x))) * 0.13;
+    let scan = (0.5 + 0.5 * sin((uv.y * 76.0 + uv.x * 9.0) * 6.28318)) * 0.030;
+
+    let membrane_color = vec3f(0.006, 0.28, 0.38);
+    let line_color = vec3f(0.12, 0.72, 0.88);
+    let rim_color = vec3f(0.18, 0.98, 1.0);
+    let color = membrane_color * (0.68 + top_light + side_glow + scan)
+        + line_color * (grid_line * 0.20 + joint * 0.42)
+        + rim_color * (border * 0.92 + side_glow * 0.18)
+        - vec3f(0.0, 0.16, 0.24) * center_shadow * 0.30
+        - vec3f(0.0, 0.10, 0.16) * lift_shadow;
+    let alpha = panel * (0.24 + grid_line * 0.10 + joint * 0.23 + border * 0.42);
+
+    return output_color(color, alpha);
+}
+
+@vertex
+fn vs_hand_dot(vertex: DotVertexInput, instance: DotInstanceInput) -> DotVertexOutput {
+    let intensity = saturate(instance.style.x);
+
+    let shaped = smoothstep(0.0, 1.0, intensity);
+
+    // Hand instances store hand.png UV in world_position.xy instead of 3D world space.
+    let center = hand_image_uv_to_clip(instance.world_position.xy);
+    // Hand fingertip matrices are much smaller than the full Finger view.
+    // Keep each bead below the local cell spacing so the 12x7 matrix remains visibly separated.
+    let pixel_size = u.glyph.x * mix(0.22, 0.34, shaped);
+    let ndc_offset = vertex.local * vec2f(pixel_size / u.viewport.x, pixel_size / u.viewport.y) * 2.0;
+
+    var out: DotVertexOutput;
+    out.clip_position = vec4f(center + ndc_offset, 0.0, 1.0);
+    out.local = vertex.local;
+    out.intensity = intensity;
+    return out;
+}
+
+@fragment
+fn fs_hand_dot(in: DotVertexOutput) -> @location(0) vec4f {
+    let intensity = saturate(in.intensity);
+
+    // Use a compact bead so the response feels like it lives on the membrane mesh.
+    let core = circle_alpha(in.local, 0.48, 0.07);
+    let halo = circle_alpha(in.local, 0.74, 0.14) * (0.10 + intensity * 0.26);
+
+    // Match Finger mode's pressure gradient so each hand region remains readable.
+    let idle = vec3f(0.060, 0.250, 0.320);
+    let gradient = sample_range_color(intensity);
+    let color = mix(idle, gradient, smoothstep(0.0, 0.18, intensity))
+        * mix(0.78, 1.18, intensity);
+
+    return output_color(color, max(core, halo));
+}
+
+fn chip_pixel_alpha(local: vec2f, half_size: f32, softness: f32) -> f32 {
+    let q = abs(local) - vec2f(half_size, half_size);
+    let dist = length(max(q, vec2f(0.0, 0.0))) + min(max(q.x, q.y), 0.0);
+    return 1.0 - smoothstep(0.0, softness, dist);
+}
+
+struct HandPalmChipVertexOutput {
+    @builtin(position) clip_position: vec4f,
+    @location(0) local: vec2f,
+    @location(1) grid: vec2f,
+}
+
+@vertex
+fn vs_hand_palm_chip(vertex: DotVertexInput, instance: DotInstanceInput) -> HandPalmChipVertexOutput {
+    let center_px = instance.world_position.xy * u.image.xy;
+    let size_px = instance.style.yz;
+    let angle = instance.style.x;
+    let packed_shape = instance.style.w;
+    let shape_rows = floor(packed_shape / 100.0);
+    let shape_cols = max(packed_shape - shape_rows * 100.0, 1.0);
+    let local_px = vertex.local * size_px * 0.5;
+    let image_uv = (center_px + rotate_2d(local_px, angle)) / max(u.image.xy, vec2f(1.0, 1.0));
+
+    var out: HandPalmChipVertexOutput;
+    out.clip_position = vec4f(hand_image_uv_to_clip(image_uv), 0.0, 1.0);
+    out.local = vertex.local;
+    out.grid = vec2f(shape_cols, max(shape_rows, 1.0));
+    return out;
+}
+
+@fragment
+fn fs_hand_palm_chip(in: HandPalmChipVertexOutput) -> @location(0) vec4f {
+    // Dark rounded tile: this is the inset chip body sitting inside the palm surface.
+    let panel = rounded_rect_alpha(in.local, 0.10, 0.040);
+    let inset = rounded_rect_alpha(in.local * vec2f(1.10, 1.08), 0.08, 0.052);
+    let rim = clamp(panel - inset * 0.72, 0.0, 1.0);
+
+    // Inactive chip pixels use the chip's real hand layout:
+    // horizontal 14 columns x 5 rows, or vertical 4 columns x 11 rows.
+    let uv = clamp(in.local * 0.5 + vec2f(0.5, 0.5), vec2f(0.0, 0.0), vec2f(1.0, 1.0));
+    let cell = abs(fract(uv * in.grid) - vec2f(0.5, 0.5));
+    let micro_pixel = 1.0 - smoothstep(0.105, 0.178, length(cell * vec2f(1.04, 0.94)));
+
+    let top_bevel = smoothstep(-0.96, -0.18, -in.local.y) * 0.16;
+    let lower_shadow = smoothstep(0.20, 0.92, in.local.y) * 0.22;
+    let side_bevel = smoothstep(0.58, 0.96, abs(in.local.x)) * 0.12;
+    let scan = (0.5 + 0.5 * sin((uv.y * 36.0 + uv.x * 7.0) * 6.28318)) * 0.026;
+
+    let base = vec3f(0.004, 0.012, 0.018);
+    let glass = vec3f(0.012, 0.048, 0.064);
+    let pixel_color = vec3f(0.075, 0.300, 0.360);
+    let rim_color = vec3f(0.060, 0.560, 0.670);
+    let color = base * (0.92 - lower_shadow)
+        + glass * (0.52 + top_bevel + side_bevel + scan)
+        + pixel_color * micro_pixel * 0.70
+        + rim_color * rim * 0.60;
+
+    let alpha = panel * (0.64 + micro_pixel * 0.18 + rim * 0.20);
+    return output_color(color, alpha);
+}
+
+@vertex
+fn vs_hand_palm_dot(vertex: DotVertexInput, instance: DotInstanceInput) -> DotVertexOutput {
+    let intensity = saturate(instance.style.x);
+    let shaped = smoothstep(0.0, 1.0, intensity);
+
+    // Palm chip pixels are deliberately smaller than fingertip beads so they read as a chip matrix.
+    let center = hand_image_uv_to_clip(instance.world_position.xy);
+    let pixel_size = u.glyph.x * mix(0.13, 0.25, shaped);
+    let ndc_offset = vertex.local * vec2f(pixel_size / u.viewport.x, pixel_size / u.viewport.y) * 2.0;
+
+    var out: DotVertexOutput;
+    out.clip_position = vec4f(center + ndc_offset, 0.0, 1.0);
+    out.local = vertex.local;
+    out.intensity = intensity;
+    return out;
+}
+
+@fragment
+fn fs_hand_palm_dot(in: DotVertexOutput) -> @location(0) vec4f {
+    let intensity = saturate(in.intensity);
+    let pixel = chip_pixel_alpha(in.local, 0.52, 0.070);
+    let glow = circle_alpha(in.local, 0.95, 0.22) * intensity * 0.36;
+
+    let cold = vec3f(0.070, 0.340, 0.360);
+    let gradient = sample_range_color(intensity);
+    let color = mix(cold, gradient, smoothstep(0.0, 0.20, intensity))
+        * (0.58 + intensity * 1.04)
+        + gradient * glow * 0.72;
+
+    let alpha = max(pixel * (0.20 + intensity * 0.76), glow);
+    return output_color(color, alpha);
+}
+
 @vertex
 fn vs_dot(vertex: DotVertexInput, instance: DotInstanceInput) -> DotVertexOutput {
     let center = u.view_proj * vec4f(instance.world_position.xyz, 1.0);
     let intensity = saturate(instance.style.x);
-    let shaped = pow(intensity, 0.9);
+    let shaped = smoothstep(0.0, 1.0, intensity);
-    let pixel_size = u.glyph.x * mix(0.72, 1.85, shaped);
+
+    let pixel_size = u.glyph.x * mix(1.07, 2.23, shaped);
+
     let ndc_offset = vertex.local * vec2f(pixel_size / u.viewport.x, pixel_size / u.viewport.y) * 2.0;
     var out: DotVertexOutput;
     out.clip_position = vec4f(center.xy + ndc_offset * center.w, center.z, center.w);
@@ -296,21 +615,10 @@ fn fs_dot(in: DotVertexOutput) -> @location(0) vec4f {
     let intensity = saturate(in.intensity);
     let base_color = sample_range_color(intensity);
 
-    let core = circle_alpha(in.local, 0.42, 0.055);
+    let alpha = circle_alpha(in.local, 0.46, 0.045);
+    let color = base_color * mix(0.86, 1.06, intensity);
 
-    let glow = circle_alpha(in.local, 0.78, 0.18) * intensity * 0.45;
+    return output_color(color, alpha);
-
-    let highlight_pos = in.local - vec2f(-0.18, 0.20);
-
-    let highlight = circle_alpha(highlight_pos, 0.16, 0.08) * 0.45;
-
-    let  brightness = mix(0.82, 1.22, intensity);
-
-    let color = base_color * brightness + vec3f(1.0, 1.0, 1.0) * highlight;
-    
-    let alpha = max(core, glow);
-
-    return vec4f(color, alpha);
 }
 
 
@@ -319,6 +627,8 @@ struct ModelVertexInput {
     @location(0) position: vec3f,
     @location(1) tex_coords: vec2f,
     @location(2) normal: vec3f,
+    @location(3) color: vec4f,
+    @location(4) tangent: vec4f,
     @location(5) model_0: vec4f,
     @location(6) model_1: vec4f,
     @location(7) model_2: vec4f,
@@ -330,29 +640,217 @@ struct ModelVertexOutput {
     @location(0) world_normal: vec3f,
     @location(1) world_position: vec3f,
     @location(2) tex_coords: vec2f,
+    @location(3) color: vec4f,
+    @location(4) world_tangent: vec4f,
+}
+
+fn inverse_transpose3x3(m: mat3x3f) -> mat3x3f {
+    let c0 = m[0];
+    let c1 = m[1];
+    let c2 = m[2];
+    let r0 = cross(c1, c2);
+    let r1 = cross(c2, c0);
+    let r2 = cross(c0, c1);
+    let det = dot(c0, r0);
+    let safe_det = select(det, select(-0.000001, 0.000001, det >= 0.0), abs(det) < 0.000001);
+    let inv_det = 1.0 / safe_det;
+    return mat3x3f(r0 * inv_det, r1 * inv_det, r2 * inv_det);
 }
 
 @vertex
 fn vs_model(vertex: ModelVertexInput) -> ModelVertexOutput {
     let model = mat4x4f(vertex.model_0, vertex.model_1, vertex.model_2, vertex.model_3);
     let world_position = model * vec4f(vertex.position, 1.0);
-    let normal_matrix = mat3x3f(model[0].xyz, model[1].xyz, model[2].xyz);
+    let model3 = mat3x3f(model[0].xyz, model[1].xyz, model[2].xyz);
+    let normal_matrix = inverse_transpose3x3(model3);
 
     var out: ModelVertexOutput;
     out.clip_position = u.view_proj * world_position;
     out.world_position = world_position.xyz;
     out.world_normal = normalize(normal_matrix * vertex.normal);
-    out.tex_coords = vec2f(vertex.tex_coords.x, 1.0 - vertex.tex_coords.y);
+    out.tex_coords = vertex.tex_coords;
+    out.color = vertex.color;
+    out.world_tangent = vec4f(normalize(normal_matrix * vertex.tangent.xyz), vertex.tangent.w);
     return out;
 }
 
-@fragment
+fn distribution_ggx(normal: vec3f, half_dir: vec3f, roughness: f32) -> f32 {
-fn fs_model(in: ModelVertexOutput) -> @location(0) vec4f {
+    let a = roughness * roughness;
-    let light_dir = normalize(vec3f(-0.35, 0.85, 0.45));
+    let a2 = a * a;
-    let normal = normalize(in.world_normal);
+    let n_dot_h = max(dot(normal, half_dir), 0.0);
-    let diffuse = max(dot(normal, light_dir), 0.0);
+    let n_dot_h2 = n_dot_h * n_dot_h;
-    let rim = pow(1.0 - saturate(abs(normal.y)), 2.0) * 0.16;
+    let denom = (n_dot_h2 * (a2 - 1.0) + 1.0);
-    let base = textureSample(model_texture, model_sampler, in.tex_coords).rgb;
+    return a2 / max(3.14159265 * denom * denom, 0.000001);
-    let color = base * (0.28 + diffuse * 0.72) + vec3f(0.14, 0.24, 0.32) * rim;
+}
-    return vec4f(color, 1.0);
+
+fn geometry_schlick_ggx(n_dot_v: f32, roughness: f32) -> f32 {
+    let r = roughness + 1.0;
+    let k = (r * r) / 8.0;
+    return n_dot_v / max(n_dot_v * (1.0 - k) + k, 0.000001);
+}
+
+fn geometry_smith(normal: vec3f, view_dir: vec3f, light_dir: vec3f, roughness: f32) -> f32 {
+    let n_dot_v = max(dot(normal, view_dir), 0.0);
+    let n_dot_l = max(dot(normal, light_dir), 0.0);
+    let ggx_v = geometry_schlick_ggx(n_dot_v, roughness);
+    let ggx_l = geometry_schlick_ggx(n_dot_l, roughness);
+    return ggx_v * ggx_l;
+}
+
+fn fresnel_schlick(cos_theta: f32, f0: vec3f) -> vec3f {
+    let factor = pow(clamp(1.0 - cos_theta, 0.0, 1.0), 5.0);
+    return f0 + (vec3f(1.0) - f0) * factor;
+}
+
+fn pbr_directional_light(
+    albedo: vec3f,
+    normal: vec3f,
+    view_dir: vec3f,
+    light_dir: vec3f,
+    radiance: vec3f,
+    metallic: f32,
+    roughness: f32,
+) -> vec3f {
+    let half_dir = normalize(view_dir + light_dir);
+    let n_dot_l = max(dot(normal, light_dir), 0.0);
+    let n_dot_v = max(dot(normal, view_dir), 0.0);
+    let h_dot_v = max(dot(half_dir, view_dir), 0.0);
+
+    let f0 = mix(vec3f(0.04), albedo, metallic);
+    let f = fresnel_schlick(h_dot_v, f0);
+    let d = distribution_ggx(normal, half_dir, roughness);
+    let g = geometry_smith(normal, view_dir, light_dir, roughness);
+    let specular = (d * g * f) / max(4.0 * n_dot_v * n_dot_l, 0.000001);
+
+    let k_s = f;
+    let k_d = (vec3f(1.0) - k_s) * (1.0 - metallic);
+    let diffuse = k_d * albedo / 3.14159265;
+
+    return (diffuse + specular) * radiance * n_dot_l;
+}
+
+fn aces_tonemap(x: vec3f) -> vec3f {
+    let a = 2.51;
+    let b = 0.03;
+    let c = 2.43;
+    let d = 0.59;
+    let e = 0.14;
+    return clamp((x * (a * x + b)) / (x * (c * x + d) + e), vec3f(0.0), vec3f(1.0));
+}
+
+fn material_normal(in: ModelVertexOutput, front_facing: bool) -> vec3f {
+    var n = normalize(in.world_normal);
+    if (!front_facing && material.flags.w > 0.5) {
+        n = -n;
+    }
+
+    if (material.flags.z < 0.5) {
+        return n;
+    }
+
+    let t = normalize(in.world_tangent.xyz);
+    let b = normalize(cross(n, t) * in.world_tangent.w);
+    let tangent_normal_sample = textureSample(normal_texture, normal_sampler, in.tex_coords).xyz;
+    var tangent_normal = tangent_normal_sample * 2.0 - vec3f(1.0);
+    tangent_normal.x = tangent_normal.x * material.metallic_roughness.z;
+    tangent_normal.y = tangent_normal.y * material.metallic_roughness.z;
+
+    return normalize(mat3x3f(t, b, n) * tangent_normal);
+}
+
+@fragment
+fn fs_model(in: ModelVertexOutput, @builtin(front_facing) front_facing: bool) -> @location(0) vec4f {
+    let base_sample = textureSample(base_color_texture, base_color_sampler, in.tex_coords);
+    let base_color = base_sample * material.base_color * in.color;
+    let alpha_mode = material.emissive_alpha.w;
+    var alpha = base_color.a;
+    if (alpha_mode < 0.5) {
+        alpha = 1.0;
+    } else if (alpha_mode < 1.5) {
+        if (alpha < material.flags.x) {
+            discard;
+        }
+        alpha = 1.0;
+    }
+
+    let debug_mode = u32(u.render_options.x + 0.5);
+    if (debug_mode == 1u) {
+        return output_color(base_color.rgb, alpha);
+    }
+
+    let mr_sample = textureSample(
+        metallic_roughness_texture,
+        metallic_roughness_sampler,
+        in.tex_coords,
+    );
+    let roughness = clamp(mr_sample.g * material.metallic_roughness.y, 0.04, 1.0);
+    let metallic = clamp(mr_sample.b * material.metallic_roughness.x, 0.0, 1.0);
+    let ao_sample = textureSample(occlusion_texture, occlusion_sampler, in.tex_coords).r;
+    let ao = mix(1.0, ao_sample, clamp(material.metallic_roughness.w, 0.0, 1.0));
+    let emissive = textureSample(emissive_texture, emissive_sampler, in.tex_coords).rgb
+        * material.emissive_alpha.rgb;
+    let albedo = base_color.rgb;
+    let normal = material_normal(in, front_facing);
+
+    switch debug_mode {
+        case 2u: {
+            return output_color(normal * 0.5 + vec3f(0.5), 1.0);
+        }
+        case 3u: {
+            return output_color(vec3f(roughness), 1.0);
+        }
+        case 4u: {
+            return output_color(vec3f(metallic), 1.0);
+        }
+        case 5u: {
+            return output_color(vec3f(ao), 1.0);
+        }
+        case 6u: {
+            return output_color(emissive, 1.0);
+        }
+        case 7u: {
+            return output_color(vec3f(fract(in.tex_coords), 0.0), 1.0);
+        }
+        default: {}
+    }
+
+    let view_dir = normalize(vec3f(0.0, 0.72, 0.70));
+    let key = pbr_directional_light(
+        albedo,
+        normal,
+        view_dir,
+        normalize(vec3f(-0.35, 0.82, 0.44)),
+        vec3f(2.15, 2.08, 1.92),
+        metallic,
+        roughness,
+    );
+    let fill = pbr_directional_light(
+        albedo,
+        normal,
+        view_dir,
+        normalize(vec3f(0.62, 0.44, -0.36)),
+        vec3f(0.50, 0.50, 0.50),
+        metallic,
+        roughness,
+    );
+
+    let f0 = mix(vec3f(0.04), albedo, metallic);
+    let f_ambient = fresnel_schlick(max(dot(normal, view_dir), 0.0), f0);
+    let ambient_color = vec3f(1.0);
+    let ambient_strength = 0.08;
+    // Temporary neutral linear ambient term until a real IBL/HDR environment is added.
+    var ambient = vec3f(0.0);
+    if (u.render_options.y > 0.5) {
+        let ambient_diffuse = albedo * (1.0 - metallic) * ambient_color * ambient_strength;
+        let ambient_specular = f_ambient * ambient_color * ambient_strength * (1.0 - roughness * 0.55);
+        ambient = (ambient_diffuse + ambient_specular) * ao;
+    }
+
+    let exposed_color = (ambient + key + fill + emissive) * max(u.render_options.w, 0.0);
+    var color = exposed_color;
+    if (u.render_options.z > 0.5) {
+        color = aces_tonemap(exposed_color);
+    }
+
+    return output_color(color, alpha);
 }

wix/main.wxs

@@ -0,0 +1,254 @@
+<?xml version='1.0' encoding='windows-1252'?>
+<!--
+  Copyright (C) 2017 Christopher R. Field.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<!--
+  The "cargo wix" subcommand provides a variety of predefined variables available
+  for customization of this template. The values for each variable are set at
+  installer creation time. The following variables are available:
+
+  TargetTriple      = The rustc target triple name.
+  TargetEnv         = The rustc target environment. This is typically either
+                      "msvc" or "gnu" depending on the toolchain downloaded and
+                      installed.
+  TargetVendor      = The rustc target vendor. This is typically "pc", but Rust
+                      does support other vendors, like "uwp".
+  CargoTargetBinDir = The complete path to the directory containing the
+                      binaries (exes) to include. The default would be
+                      "target\release\". If an explicit rustc target triple is
+                      used, i.e. cross-compiling, then the default path would
+                      be "target\<CARGO_TARGET>\<CARGO_PROFILE>",
+                      where "<CARGO_TARGET>" is replaced with the "CargoTarget"
+                      variable value and "<CARGO_PROFILE>" is replaced with the
+                      value from the "CargoProfile" variable. This can also
+                      be overridden manually with the "target-bin-dir" flag.
+  CargoTargetDir    = The path to the directory for the build artifacts, i.e.
+                      "target".
+  CargoProfile      = The cargo profile used to build the binaries
+                      (usually "debug" or "release").
+  Version           = The version for the installer. The default is the
+                      "Major.Minor.Fix" semantic versioning number of the Rust
+                      package.
+-->
+
+<!--
+  Please do not remove these pre-processor If-Else blocks. These are used with
+  the `cargo wix` subcommand to automatically determine the installation
+  destination for 32-bit versus 64-bit installers. Removal of these lines will
+  cause installation errors.
+-->
+<?if $(sys.BUILDARCH) = x64 or $(sys.BUILDARCH) = arm64 ?>
+    <?define PlatformProgramFilesFolder = "ProgramFiles64Folder" ?>
+<?else ?>
+    <?define PlatformProgramFilesFolder = "ProgramFilesFolder" ?>
+<?endif ?>
+
+<Wix xmlns='http://schemas.microsoft.com/wix/2006/wi'>
+
+    <Product
+        Id='*'
+        Name='eskin-model-player'
+        UpgradeCode='7CEF316B-BE23-4533-B4B2-87D06D2230B5'
+        Manufacturer='JOYSONQUIN'
+        Language='1033'
+        Codepage='1252'
+        Version='$(var.Version)'>
+
+        <Package Id='*'
+            Keywords='Installer'
+            Description='Desktop pressure sensor visualization and playback application.'
+            Manufacturer='JOYSONQUIN'
+            InstallerVersion='450'
+            Languages='1033'
+            Compressed='yes'
+            InstallScope='perUser'
+            InstallPrivileges='limited'
+            SummaryCodepage='1252'
+            />
+
+        <MajorUpgrade
+            Schedule='afterInstallInitialize'
+            DowngradeErrorMessage='A newer version of [ProductName] is already installed. Setup will now exit.'/>
+
+        <Media Id='1' Cabinet='media1.cab' EmbedCab='yes' DiskPrompt='CD-ROM #1'/>
+        <Property Id='DiskPrompt' Value='eskin-model-player Installation'/>
+
+        <Directory Id='TARGETDIR' Name='SourceDir'>
+            <Directory Id='LocalAppDataFolder'>
+                <Directory Id='APPLICATIONFOLDER' Name='eskin-model-player'>
+                    
+                    <!--
+                      Enabling the license sidecar file in the installer is a four step process:
+
+                      1. Uncomment the `Component` tag and its contents.
+                      2. Change the value for the `Source` attribute in the `File` tag to a path
+                         to the file that should be included as the license sidecar file. The path
+                         can, and probably should be, relative to this file.
+                      3. Change the value for the `Name` attribute in the `File` tag to the
+                         desired name for the file when it is installed alongside the `bin` folder
+                         in the installation directory. This can be omitted if the desired name is
+                         the same as the file name.
+                      4. Uncomment the `ComponentRef` tag with the Id attribute value of "License"
+                         further down in this file.
+                    -->
+                    <!--
+                    <Component Id='License' Guid='*'>
+                        <File Id='LicenseFile' Name='ChangeMe' DiskId='1' Source='C:\Path\To\File' KeyPath='yes'/>
+                    </Component>
+                    -->
+
+                    <Directory Id='Bin' Name='bin'>
+                        <Component Id='Path' Guid='FD230ABD-75B9-47D4-870B-CF2EA72B76BE'>
+                            <RegistryValue
+                                Root='HKCU'
+                                Key='Software\JOYSONQUIN\eskin-model-player'
+                                Name='PathComponent'
+                                Type='integer'
+                                Value='1'
+                                KeyPath='yes'/>
+                            <RemoveFolder Id='RemoveBinFolder' Directory='Bin' On='uninstall'/>
+                            <RemoveFolder Id='RemoveApplicationFolder' Directory='APPLICATIONFOLDER' On='uninstall'/>
+                            <Environment
+                                Id='PATH'
+                                Name='PATH'
+                                Value='[Bin]'
+                                Permanent='no'
+                                Part='last'
+                                Action='set'
+                                System='no'/>
+                        </Component>
+                        <Component Id='binary0' Guid='302CAFB5-6951-426B-BC5A-988C351A2CF2'>
+                            <RegistryValue
+                                Root='HKCU'
+                                Key='Software\JOYSONQUIN\eskin-model-player'
+                                Name='BinaryComponent'
+                                Type='integer'
+                                Value='1'
+                                KeyPath='yes'/>
+                            <File
+                                Id='exe0'
+                                Name='ESkinPlayer.exe'
+                                DiskId='1'
+                                Source='$(var.CargoTargetBinDir)\ESkinPlayer.exe'/>
+                        </Component>
+                    </Directory>
+                </Directory>
+            </Directory>
+        </Directory>
+
+        <Feature
+            Id='Binaries'
+            Title='Application'
+            Description='Installs all binaries and the license.'
+            Level='1'
+            ConfigurableDirectory='APPLICATIONFOLDER'
+            AllowAdvertise='no'
+            Display='expand'
+            Absent='disallow'>
+            
+            <!--
+              Uncomment the following `ComponentRef` tag to add the license
+              sidecar file to the installer.
+            -->
+            <!--<ComponentRef Id='License'/>-->
+
+            <ComponentRef Id='binary0'/>
+
+            <Feature
+                Id='Environment'
+                Title='PATH Environment Variable'
+                Description='Add the install location of the [ProductName] executable to the PATH system environment variable. This allows the [ProductName] executable to be called from any location.'
+                Level='1'
+                Absent='allow'>
+                <ComponentRef Id='Path'/>
+            </Feature>
+        </Feature>
+
+        <SetProperty Id='ARPINSTALLLOCATION' Value='[APPLICATIONFOLDER]' After='CostFinalize'/>
+
+        
+        <!--
+          Uncomment the following `Icon` and `Property` tags to change the product icon.
+
+          The product icon is the graphic that appears in the Add/Remove
+          Programs control panel for the application.
+        -->
+        <!--<Icon Id='ProductICO' SourceFile='wix\Product.ico'/>-->
+        <!--<Property Id='ARPPRODUCTICON' Value='ProductICO' />-->
+
+        
+        <!--
+          Adding a URL to Add/Remove Programs control panel listing for the
+          application is a two step process:
+
+          1. Uncomment the following `Property` tag with the "ARPHELPLINK" Id
+             attribute value.
+          2. Change the value for `Value` attribute of the following
+             `Property` tag to a valid URL.
+        -->
+        <!--<Property Id='ARPHELPLINK' Value='ChangeMe'/>-->
+
+        <UI>
+            <UIRef Id='WixUI_FeatureTree'/>
+            
+            <!--
+              Enabling the EULA dialog in the installer is a three step process:
+
+                1. Comment out or remove the two `Publish` tags that follow the
+                   `WixVariable` tag.
+                2. Uncomment the `<WixVariable Id='WixUILicenseRtf' Value='Path\to\Eula.rft'>` tag further down
+                3. Replace the `Value` attribute of the `WixVariable` tag with
+                   the path to a RTF file that will be used as the EULA and
+                   displayed in the license agreement dialog.
+            -->
+            <Publish Dialog='WelcomeDlg' Control='Next' Event='NewDialog' Value='CustomizeDlg' Order='99'>1</Publish>
+            <Publish Dialog='CustomizeDlg' Control='Back' Event='NewDialog' Value='WelcomeDlg' Order='99'>1</Publish>
+
+        </UI>
+
+        
+        <!--
+          Enabling the EULA dialog in the installer requires uncommenting
+          the following `WixUILicenseRTF` tag and changing the `Value`
+          attribute.
+        -->
+        <!-- <WixVariable Id='WixUILicenseRtf' Value='Relative\Path\to\Eula.rtf'/> -->
+
+        
+        <!--
+          Uncomment the next `WixVariable` tag to customize the installer's
+          Graphical User Interface (GUI) and add a custom banner image across
+          the top of each screen. See the WiX Toolset documentation for details
+          about customization.
+
+          The banner BMP dimensions are 493 x 58 pixels.
+        -->
+        <!--<WixVariable Id='WixUIBannerBmp' Value='wix\Banner.bmp'/>-->
+
+        
+        <!--
+          Uncomment the next `WixVariable` tag to customize the installer's
+          Graphical User Interface (GUI) and add a custom image to the first
+          dialog, or screen. See the WiX Toolset documentation for details about
+          customization.
+
+          The dialog BMP dimensions are 493 x 312 pixels.
+        -->
+        <!--<WixVariable Id='WixUIDialogBmp' Value='wix\Dialog.bmp'/>-->
+
+    </Product>
+
+</Wix>