mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 01:21:20 -04:00
135 lines
9.0 KiB
XML
135 lines
9.0 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!--
|
|
New Drive corner-pod HUD sketch, second design pass
|
|
Purpose: Shows true edge-mounted pods, physically attached expansions, and circular controls.
|
|
Scope: Static design communication only; production geometry remains an implementation decision.
|
|
-->
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="900" viewBox="0 0 1200 900" role="img" aria-labelledby="title description">
|
|
<title id="title">Edge-mounted New Drive HUD pods</title>
|
|
<desc id="description">Four pods flow directly into the corners of a four by three rover video. Each has one inward rounded corner, and expansions attach directly along video edges.</desc>
|
|
|
|
<defs>
|
|
<linearGradient id="video" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#26343d" />
|
|
<stop offset="0.55" stop-color="#111827" />
|
|
<stop offset="1" stop-color="#1f2937" />
|
|
</linearGradient>
|
|
<linearGradient id="battery" x1="0" y1="1" x2="1" y2="0">
|
|
<stop offset="0" stop-color="#22c55e" />
|
|
<stop offset="0.72" stop-color="#84cc16" />
|
|
<stop offset="1" stop-color="#eab308" />
|
|
</linearGradient>
|
|
<filter id="shadow" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feDropShadow dx="0" dy="5" stdDeviation="8" flood-color="#000000" flood-opacity="0.5" />
|
|
</filter>
|
|
<style>
|
|
.pod { fill: #080a0f; fill-opacity: 0.86; stroke: #d1d5db; stroke-opacity: 0.26; stroke-width: 2; }
|
|
.expansion { fill: #080a0f; fill-opacity: 0.82; stroke: #d1d5db; stroke-opacity: 0.2; stroke-width: 2; }
|
|
.label { fill: #f8fafc; font-family: Inter, system-ui, sans-serif; font-weight: 700; }
|
|
.small { fill: #cbd5e1; font-family: Inter, system-ui, sans-serif; font-size: 17px; }
|
|
.tiny { fill: #94a3b8; font-family: Inter, system-ui, sans-serif; font-size: 14px; }
|
|
.arrow-button { fill: #1f2937; stroke: #e5e7eb; stroke-opacity: 0.55; stroke-width: 1.5; }
|
|
.arrow { fill: none; stroke: #f8fafc; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
|
|
.track { fill: none; stroke: #334155; stroke-linecap: round; }
|
|
</style>
|
|
</defs>
|
|
|
|
<!-- The entire canvas is the shared 4:3 video/HUD coordinate space. -->
|
|
<rect width="1200" height="900" fill="url(#video)" />
|
|
<path d="M0 610 C235 510 390 590 600 515 C820 438 1000 520 1200 430 L1200 900 L0 900 Z" fill="#0b1516" opacity="0.76" />
|
|
<path d="M0 655 C240 555 425 635 630 560 C840 483 1020 560 1200 475" fill="none" stroke="#334155" stroke-width="5" opacity="0.42" />
|
|
<text x="600" y="450" text-anchor="middle" class="small" opacity="0.28">Rover video</text>
|
|
|
|
<!-- Top-left pod flows into the top and left edges; only its inward bottom-right corner rounds. -->
|
|
<g filter="url(#shadow)">
|
|
<path class="pod" d="M0 0 H190 V124 Q190 190 124 190 H0 Z" />
|
|
<circle class="track" cx="91" cy="91" r="55" stroke-width="14" />
|
|
<circle cx="91" cy="91" r="55" fill="none" stroke="#38bdf8" stroke-width="14" stroke-linecap="round" stroke-dasharray="255 346" transform="rotate(-90 91 91)" />
|
|
<text x="91" y="84" text-anchor="middle" class="tiny">Turn</text>
|
|
<text x="91" y="116" text-anchor="middle" class="label" font-size="30">0:42</text>
|
|
<circle class="arrow-button" cx="22" cy="22" r="16" />
|
|
<path class="arrow" d="M29 29 L16 16 M16 16 L25 16 M16 16 L16 25" />
|
|
|
|
<!-- This expansion begins exactly where the pod ends and continues directly into the top edge. -->
|
|
<path class="expansion" d="M190 0 H486 V50 Q486 78 458 78 H190 Z" />
|
|
<rect x="210" y="20" width="200" height="38" rx="8" fill="#7c3aed" opacity="0.72" />
|
|
<text x="310" y="45" text-anchor="middle" class="label" font-size="18">Rover name</text>
|
|
<circle class="arrow-button" cx="458" cy="39" r="14" />
|
|
<path class="arrow" d="M458 46 L458 32 M458 32 L452 38 M458 32 L464 38" />
|
|
</g>
|
|
|
|
<!-- Top-right pod and both expansions form one continuous edge-mounted cluster. -->
|
|
<g filter="url(#shadow)">
|
|
<path class="pod" d="M1010 0 H1200 V190 H1076 Q1010 190 1010 124 Z" />
|
|
<circle cx="1105" cy="91" r="59" fill="none" stroke="#334155" stroke-width="13" />
|
|
<circle cx="1105" cy="91" r="59" fill="none" stroke="url(#battery)" stroke-width="13" stroke-linecap="round" stroke-dasharray="300 371" transform="rotate(-90 1105 91)" />
|
|
<circle cx="1105" cy="91" r="42" fill="none" stroke="#334155" stroke-width="7" />
|
|
<circle cx="1105" cy="91" r="42" fill="none" stroke="#f59e0b" stroke-width="7" stroke-linecap="round" stroke-dasharray="112 264" transform="rotate(-90 1105 91)" />
|
|
<text x="1105" y="101" text-anchor="middle" class="label" font-size="30">81%</text>
|
|
<circle class="arrow-button" cx="1178" cy="22" r="16" />
|
|
<path class="arrow" d="M1171 29 L1184 16 M1184 16 L1175 16 M1184 16 L1184 25" />
|
|
|
|
<!-- Left expansion is attached to the pod at x=1010 and touches the top video edge. -->
|
|
<path class="expansion" d="M690 0 H1010 V78 H718 Q690 78 690 50 Z" />
|
|
<text x="718" y="31" class="label" font-size="18">Dock assist</text>
|
|
<text x="718" y="57" class="small">Dock rover</text>
|
|
<rect x="912" y="24" width="38" height="30" rx="6" fill="#312e81" stroke="#a5b4fc" />
|
|
<text x="931" y="45" text-anchor="middle" class="label" font-size="14">G</text>
|
|
<circle class="arrow-button" cx="980" cy="39" r="14" />
|
|
<path class="arrow" d="M980 46 L980 32 M980 32 L974 38 M980 32 L986 38" />
|
|
|
|
<!-- Lower expansion shares the pod's bottom edge and flows directly into the right edge. -->
|
|
<path class="expansion" d="M930 190 H1200 V420 H996 Q930 420 930 354 Z" />
|
|
<text x="958" y="225" class="label" font-size="18">Advanced power</text>
|
|
<text x="958" y="255" class="small">Voltage</text>
|
|
<rect x="958" y="266" width="214" height="8" rx="2" fill="#334155" />
|
|
<rect x="958" y="266" width="160" height="8" rx="2" fill="#38bdf8" />
|
|
<text x="958" y="306" class="small">Current</text>
|
|
<rect x="958" y="317" width="214" height="8" rx="2" fill="#334155" />
|
|
<rect x="958" y="317" width="90" height="8" rx="2" fill="#f59e0b" />
|
|
<text x="958" y="359" class="tiny">Computer 54 C</text>
|
|
<text x="958" y="383" class="tiny">Wi-Fi -58 dBm</text>
|
|
<circle class="arrow-button" cx="1174" cy="216" r="14" />
|
|
<path class="arrow" d="M1167 216 L1181 216 M1181 216 L1175 210 M1181 216 L1175 222" />
|
|
</g>
|
|
|
|
<!-- Bottom-left pod flows into the left and bottom edges with a compact triangular control group. -->
|
|
<g filter="url(#shadow)">
|
|
<path class="pod" d="M0 680 H220 Q300 680 300 760 V900 H0 Z" />
|
|
<circle cx="68" cy="758" r="38" fill="#172554" stroke="#60a5fa" stroke-width="2" />
|
|
<text x="68" y="754" text-anchor="middle" class="label" font-size="24">☀</text>
|
|
<text x="68" y="779" text-anchor="middle" class="tiny">E</text>
|
|
<circle cx="102" cy="850" r="38" fill="#3b2f0b" stroke="#facc15" stroke-width="2" />
|
|
<text x="102" y="846" text-anchor="middle" class="label" font-size="24">⌁</text>
|
|
<text x="102" y="871" text-anchor="middle" class="tiny">R</text>
|
|
<circle cx="208" cy="798" r="57" fill="#3f1d2e" stroke="#fb7185" stroke-width="3" />
|
|
<text x="208" y="794" text-anchor="middle" class="label" font-size="25">Horn</text>
|
|
<text x="208" y="823" text-anchor="middle" class="tiny">H</text>
|
|
<circle class="arrow-button" cx="252" cy="754" r="14" />
|
|
<path class="arrow" d="M246 754 L258 754 M258 754 L253 749 M258 754 L253 759" />
|
|
<circle class="arrow-button" cx="22" cy="878" r="16" />
|
|
<path class="arrow" d="M29 871 L16 884 M16 884 L25 884 M16 884 L16 875" />
|
|
</g>
|
|
|
|
<!-- Bottom-right pod contains a circular tilt slider rather than a horizontal or pill track. -->
|
|
<g filter="url(#shadow)">
|
|
<path class="pod" d="M840 900 V760 Q840 680 920 680 H1200 V900 Z" />
|
|
<text x="1168" y="714" text-anchor="end" class="label" font-size="18">Camera tilt</text>
|
|
<circle class="track" cx="1030" cy="800" r="76" stroke-width="13" />
|
|
<circle cx="1030" cy="800" r="76" fill="none" stroke="#38bdf8" stroke-width="13" stroke-linecap="round" stroke-dasharray="285 478" transform="rotate(140 1030 800)" />
|
|
<circle cx="976" cy="746" r="13" fill="#e0f2fe" stroke="#0284c7" stroke-width="4" />
|
|
<text x="1030" y="808" text-anchor="middle" class="label" font-size="25">-12.5°</text>
|
|
<text x="1030" y="832" text-anchor="middle" class="tiny">Click for zero</text>
|
|
<circle cx="948" cy="838" r="22" fill="#1e3a8a" stroke="#93c5fd" />
|
|
<text x="948" y="844" text-anchor="middle" class="label" font-size="14">J</text>
|
|
<circle cx="1112" cy="838" r="22" fill="#1e3a8a" stroke="#93c5fd" />
|
|
<text x="1112" y="844" text-anchor="middle" class="label" font-size="14">U</text>
|
|
<circle class="arrow-button" cx="1178" cy="878" r="16" />
|
|
<path class="arrow" d="M1171 871 L1184 884 M1184 884 L1175 884 M1184 884 L1184 875" />
|
|
</g>
|
|
|
|
<!-- Immediate sensor overlays remain separate and are shown only as faint context here. -->
|
|
<path d="M360 900 Q600 808 840 900" fill="none" stroke="#ef4444" stroke-width="13" stroke-linecap="round" opacity="0.25" />
|
|
<path d="M410 886 Q600 820 790 886" fill="none" stroke="#22c55e" stroke-width="5" stroke-dasharray="12 10" opacity="0.4" />
|
|
</svg>
|