Files
SDK_Panel/docs/wireframes/control-panel-main-wireframe.svg
T
pNexus 6ee80834ee docs(design): 补充控制面板设计稿
补充控制面板设计说明,并细化 RuntimeHost 状态与主界面线框图,便于后续实现对齐交互范围。
2026-06-10 18:06:55 +08:00

171 lines
11 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" width="3840" height="2160" viewBox="0 0 3840 2160">
<defs>
<style>
.bg { fill: #f4f6f8; }
.panel { fill: #ffffff; stroke: #c9d1d9; stroke-width: 3; }
.panel-disabled { fill: #eef1f4; stroke: #c9d1d9; stroke-width: 3; }
.panel-active { fill: #ffffff; stroke: #2f80ed; stroke-width: 4; }
.preview { fill: #101820; stroke: #2f80ed; stroke-width: 3; }
.title { font-family: Arial; font-size: 48px; font-weight: 700; fill: #17202a; }
.subtitle { font-family: Arial; font-size: 28px; fill: #52616f; }
.section { font-family: Arial; font-size: 32px; font-weight: 700; fill: #17202a; }
.label { font-family: Arial; font-size: 24px; fill: #27313b; }
.muted { font-family: Arial; font-size: 23px; fill: #7b8794; }
.disabled-text { font-family: Arial; font-size: 24px; fill: #8a96a3; }
.mono { font-family: Courier; font-size: 24px; fill: #39434d; }
.mono-light { font-family: Courier; font-size: 30px; fill: #c9d9ea; }
.chip-ok { fill: #d9f5e5; stroke: #31a66a; stroke-width: 2; }
.chip-warn { fill: #fff4d7; stroke: #d99000; stroke-width: 2; }
.chip-off { fill: #e5e9ee; stroke: #a4afba; stroke-width: 2; }
.button { fill: #ffffff; stroke: #aab4bf; stroke-width: 2; }
.button-primary { fill: #e8f1ff; stroke: #2f80ed; stroke-width: 2; }
.button-disabled { fill: #e3e7eb; stroke: #c2cbd3; stroke-width: 2; }
</style>
</defs>
<rect class="bg" x="0" y="0" width="3840" height="2160"/>
<text class="title" x="80" y="90">kiwii-sdk-control-panel</text>
<text class="subtitle" x="80" y="136">AAR SDK validation control panel. Components stay visible; unavailable surfaces stay gray until detected.</text>
<rect class="panel-active" x="80" y="190" width="3680" height="230" rx="10"/>
<text class="section" x="130" y="246">Global RuntimeHost Status</text>
<text class="muted" x="130" y="288">RuntimeHost binding controls SDK access. Component availability remains detected per device.</text>
<rect class="chip-warn" x="130" y="320" width="230" height="54" rx="10"/>
<text class="label" x="170" y="355">Bound: false</text>
<rect class="chip-off" x="390" y="320" width="280" height="54" rx="10"/>
<text class="label" x="428" y="355">Ping: NOT_BOUND</text>
<text class="muted" x="720" y="355">Last API: none</text>
<text class="muted" x="980" y="355">Last error: waiting for RuntimeHost bind</text>
<rect class="button-primary" x="2980" y="260" width="180" height="64" rx="10"/>
<text class="label" x="3035" y="301">Bind</text>
<rect class="button" x="3190" y="260" width="200" height="64" rx="10"/>
<text class="label" x="3240" y="301">Unbind</text>
<rect class="button" x="3420" y="260" width="160" height="64" rx="10"/>
<text class="label" x="3470" y="301">Ping</text>
<rect class="panel-active" x="80" y="470" width="875" height="300" rx="10"/>
<text class="section" x="130" y="528">RuntimeHostStatus</text>
<rect class="chip-ok" x="130" y="552" width="170" height="46" rx="10"/>
<text class="label" x="172" y="582">Active</text>
<text class="muted" x="130" y="642">Always interactive. Owns bind, runtime, health, and lifecycle checks.</text>
<rect class="button-primary" x="130" y="682" width="180" height="54" rx="10"/>
<text class="label" x="168" y="717">Bind Host</text>
<rect class="button" x="330" y="682" width="180" height="54" rx="10"/>
<text class="label" x="378" y="717">Runtime</text>
<rect class="button" x="530" y="682" width="150" height="54" rx="10"/>
<text class="label" x="573" y="717">Health</text>
<rect class="button" x="700" y="682" width="180" height="54" rx="10"/>
<text class="label" x="742" y="717">Lifecycle</text>
<rect class="panel-disabled" x="995" y="470" width="875" height="300" rx="10"/>
<text class="section" x="1045" y="528">Camera</text>
<rect class="chip-off" x="1045" y="552" width="270" height="46" rx="10"/>
<text class="disabled-text" x="1085" y="582">Gray: not detected</text>
<text class="disabled-text" x="1045" y="642">Requires RuntimeHost binding and camera state availability.</text>
<rect class="button" x="1045" y="682" width="180" height="54" rx="10"/>
<text class="label" x="1100" y="717">Detect</text>
<rect class="button-disabled" x="1245" y="682" width="160" height="54" rx="10"/>
<text class="disabled-text" x="1293" y="717">State</text>
<rect class="button-disabled" x="1425" y="682" width="280" height="54" rx="10"/>
<text class="disabled-text" x="1460" y="717">Full Camera View</text>
<rect class="panel-disabled" x="1910" y="470" width="875" height="300" rx="10"/>
<text class="section" x="1960" y="528">Left Handle</text>
<rect class="chip-off" x="1960" y="552" width="270" height="46" rx="10"/>
<text class="disabled-text" x="2000" y="582">Gray: not detected</text>
<text class="disabled-text" x="1960" y="642">Requires left handle data before IMU and haptics are enabled.</text>
<rect class="button" x="1960" y="682" width="180" height="54" rx="10"/>
<text class="label" x="2015" y="717">Detect</text>
<rect class="button-disabled" x="2160" y="682" width="150" height="54" rx="10"/>
<text class="disabled-text" x="2208" y="717">IMU</text>
<rect class="button-disabled" x="2330" y="682" width="180" height="54" rx="10"/>
<text class="disabled-text" x="2372" y="717">Haptics</text>
<rect class="panel-disabled" x="2825" y="470" width="935" height="300" rx="10"/>
<text class="section" x="2875" y="528">Right Handle</text>
<rect class="chip-off" x="2875" y="552" width="270" height="46" rx="10"/>
<text class="disabled-text" x="2915" y="582">Gray: not detected</text>
<text class="disabled-text" x="2875" y="642">Requires right handle data before IMU and haptics are enabled.</text>
<rect class="button" x="2875" y="682" width="180" height="54" rx="10"/>
<text class="label" x="2930" y="717">Detect</text>
<rect class="button-disabled" x="3075" y="682" width="150" height="54" rx="10"/>
<text class="disabled-text" x="3123" y="717">IMU</text>
<rect class="button-disabled" x="3245" y="682" width="180" height="54" rx="10"/>
<text class="disabled-text" x="3287" y="717">Haptics</text>
<rect class="panel-disabled" x="80" y="820" width="875" height="300" rx="10"/>
<text class="section" x="130" y="878">Balance Board</text>
<rect class="chip-off" x="130" y="902" width="270" height="46" rx="10"/>
<text class="disabled-text" x="170" y="932">Gray: not detected</text>
<text class="disabled-text" x="130" y="992">Requires balance board data before telemetry views are enabled.</text>
<rect class="button" x="130" y="1032" width="180" height="54" rx="10"/>
<text class="label" x="185" y="1067">Detect</text>
<rect class="button-disabled" x="330" y="1032" width="170" height="54" rx="10"/>
<text class="disabled-text" x="383" y="1067">State</text>
<rect class="button-disabled" x="520" y="1032" width="200" height="54" rx="10"/>
<text class="disabled-text" x="570" y="1067">Balance</text>
<rect class="panel-disabled" x="995" y="820" width="875" height="300" rx="10"/>
<text class="section" x="1045" y="878">Motor</text>
<rect class="chip-off" x="1045" y="902" width="270" height="46" rx="10"/>
<text class="disabled-text" x="1085" y="932">Gray: not detected</text>
<text class="disabled-text" x="1045" y="992">Requires motor state and motor control state.</text>
<rect class="button" x="1045" y="1032" width="180" height="54" rx="10"/>
<text class="label" x="1100" y="1067">Detect</text>
<rect class="button-disabled" x="1245" y="1032" width="180" height="54" rx="10"/>
<text class="disabled-text" x="1290" y="1067">Set Kg</text>
<rect class="button-disabled" x="1445" y="1032" width="180" height="54" rx="10"/>
<text class="disabled-text" x="1495" y="1067">Mode</text>
<rect class="panel-disabled" x="1910" y="820" width="875" height="300" rx="10"/>
<text class="section" x="1960" y="878">Telemetry Safety</text>
<rect class="chip-off" x="1960" y="902" width="220" height="46" rx="10"/>
<text class="disabled-text" x="1998" y="932">Gray: bound</text>
<text class="disabled-text" x="1960" y="992">Available after RuntimeHost is bound.</text>
<rect class="button-disabled" x="1960" y="1032" width="210" height="54" rx="10"/>
<text class="disabled-text" x="2010" y="1067">Telemetry</text>
<rect class="button-disabled" x="2190" y="1032" width="170" height="54" rx="10"/>
<text class="disabled-text" x="2240" y="1067">Safety</text>
<rect class="button-disabled" x="2380" y="1032" width="220" height="54" rx="10"/>
<text class="disabled-text" x="2425" y="1067">Device Cmd</text>
<rect class="panel" x="2825" y="820" width="935" height="300" rx="10"/>
<text class="section" x="2875" y="878">Session Log</text>
<rect class="chip-ok" x="2875" y="902" width="170" height="46" rx="10"/>
<text class="label" x="2918" y="932">Active</text>
<text class="muted" x="2875" y="992">Records SDK calls and skipped actions.</text>
<rect x="2875" y="1032" width="760" height="54" rx="10" fill="#ffffff" stroke="#d5dde5"/>
<text class="mono" x="2900" y="1067">16:27:05 camera.detect -> skipped</text>
<rect class="panel" x="80" y="1170" width="2390" height="850" rx="10"/>
<text class="section" x="130" y="1230">CameraComponent Detail View</text>
<text class="muted" x="130" y="1270">Selected camera detail keeps the component grid visible while showing a full preview and camera actions.</text>
<rect class="preview" x="130" y="1310" width="1520" height="580" rx="10"/>
<text class="mono-light" x="690" y="1588">Full Camera Preview</text>
<text class="mono-light" x="655" y="1636">16:9 frame, full visible image</text>
<rect class="button-disabled" x="1710" y="1310" width="320" height="64" rx="10"/>
<text class="disabled-text" x="1790" y="1352">Camera State</text>
<rect class="button-disabled" x="1710" y="1400" width="320" height="64" rx="10"/>
<text class="disabled-text" x="1780" y="1442">Refresh Frame</text>
<rect class="button-disabled" x="1710" y="1490" width="320" height="64" rx="10"/>
<text class="disabled-text" x="1775" y="1532">Open Fullscreen</text>
<text class="mono" x="1710" y="1645">status: unavailable</text>
<text class="mono" x="1710" y="1685">reason: Host not bound</text>
<rect class="panel" x="2530" y="1170" width="1230" height="850" rx="10"/>
<text class="section" x="2580" y="1230">Selected Component Result</text>
<text class="muted" x="2580" y="1270">Latest call, params, status, result, and error summary.</text>
<rect x="2580" y="1310" width="1040" height="210" rx="10" fill="#ffffff" stroke="#d5dde5"/>
<text class="mono" x="2610" y="1360">selected=CameraComponent</text>
<text class="mono" x="2610" y="1405">call=detect</text>
<text class="mono" x="2610" y="1450">status=idle</text>
<text class="mono" x="2610" y="1495">result=waiting for RuntimeHost bind</text>
<rect x="2580" y="1570" width="1040" height="340" rx="10" fill="#ffffff" stroke="#d5dde5"/>
<text class="mono" x="2610" y="1620">16:27:00 bind() -> false</text>
<text class="mono" x="2610" y="1665">16:27:05 camera.detect -> skipped</text>
<text class="mono" x="2610" y="1710">16:27:08 motor.detect -> skipped</text>
</svg>