Document Phase 7 display hardware and implementation plan
This commit is contained in:
@@ -0,0 +1,87 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="620" viewBox="0 0 960 620" role="img" aria-labelledby="title description">
|
||||
<title id="title">Phase 7 dual-color OLED overview-screen mockup</title>
|
||||
<desc id="description">An enlarged mockup of the proposed 128 by 64 pixel local status display. The upper sixteen rows are yellow and show service, Wi-Fi, client, writer, and alert status. The lower forty-eight rows are blue and show IP address, RS-232 configuration, modem signals, traffic counters, and page navigation. Three buttons below are labeled previous, OK, and next.</desc>
|
||||
|
||||
<defs>
|
||||
<filter id="yellowGlow" x="-20%" y="-40%" width="140%" height="180%">
|
||||
<feGaussianBlur stdDeviation="1.7" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="blueGlow" x="-20%" y="-40%" width="140%" height="180%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="bezel" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#253747"/>
|
||||
<stop offset="0.5" stop-color="#14212c"/>
|
||||
<stop offset="1" stop-color="#091017"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="button" cx="42%" cy="35%" r="70%">
|
||||
<stop offset="0" stop-color="#566777"/>
|
||||
<stop offset="0.65" stop-color="#273440"/>
|
||||
<stop offset="1" stop-color="#111920"/>
|
||||
</radialGradient>
|
||||
<pattern id="pixels" width="5" height="5" patternUnits="userSpaceOnUse">
|
||||
<path d="M5 0H0V5" fill="none" stroke="#ffffff" stroke-opacity="0.022" stroke-width="0.45"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<rect width="960" height="620" fill="#0b1118"/>
|
||||
<text x="480" y="35" fill="#d7e3ed" font-family="sans-serif" font-size="20" font-weight="600" text-anchor="middle">Phase 7 — 128×64 local status display</text>
|
||||
|
||||
<rect x="55" y="55" width="850" height="470" rx="25" fill="url(#bezel)" stroke="#456074" stroke-width="3"/>
|
||||
<circle cx="82" cy="82" r="9" fill="#081016" stroke="#667b8b" stroke-width="2"/>
|
||||
<circle cx="878" cy="82" r="9" fill="#081016" stroke="#667b8b" stroke-width="2"/>
|
||||
<circle cx="82" cy="498" r="9" fill="#081016" stroke="#667b8b" stroke-width="2"/>
|
||||
<circle cx="878" cy="498" r="9" fill="#081016" stroke="#667b8b" stroke-width="2"/>
|
||||
|
||||
<!-- The screen is exactly 2:1. Its 320-pixel height represents 64 rows at 5x scale. -->
|
||||
<rect x="160" y="95" width="640" height="320" rx="3" fill="#010406" stroke="#718696" stroke-width="2"/>
|
||||
<rect x="160" y="95" width="640" height="80" fill="#1a1600"/>
|
||||
<rect x="160" y="175" width="640" height="240" fill="#00121a"/>
|
||||
<rect x="160" y="95" width="640" height="320" fill="url(#pixels)"/>
|
||||
<line x1="160" y1="175" x2="800" y2="175" stroke="#77848c" stroke-opacity="0.38"/>
|
||||
|
||||
<g font-family="DejaVu Sans Mono, Liberation Mono, Consolas, monospace" font-size="27" font-weight="600" letter-spacing="0.2">
|
||||
<g fill="#ffd52e" filter="url(#yellowGlow)">
|
||||
<text x="177" y="131">SER● WIFI▮▮▮ U1 W1 S1</text>
|
||||
<text x="177" y="168">WR:SSH CLIENTS:3 !:0</text>
|
||||
</g>
|
||||
<g fill="#20c9ff" filter="url(#blueGlow)">
|
||||
<text x="177" y="211">IP 192.168.122.42</text>
|
||||
<text x="177" y="251">RS232 230400 8N1</text>
|
||||
<text x="177" y="291">FLOW:NONE VLD:1</text>
|
||||
<text x="177" y="331">DCD0 DSR1 CTS1 RI0</text>
|
||||
<text x="177" y="371">RX:1.23M TX:633</text>
|
||||
<text x="177" y="408">‹ OVERVIEW 1/4 ›</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g font-family="sans-serif" font-size="14" fill="#9fb0bd">
|
||||
<text x="812" y="112">row 0</text>
|
||||
<text x="812" y="171">row 15</text>
|
||||
<text x="812" y="190">row 16</text>
|
||||
<text x="812" y="414">row 63</text>
|
||||
<text x="148" y="445" text-anchor="end">128 px</text>
|
||||
<text x="480" y="445" text-anchor="middle">Expected split: yellow rows 0–15 · blue rows 16–63</text>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<circle cx="325" cy="493" r="37" fill="url(#button)" stroke="#728898" stroke-width="2"/>
|
||||
<circle cx="480" cy="493" r="37" fill="url(#button)" stroke="#728898" stroke-width="2"/>
|
||||
<circle cx="635" cy="493" r="37" fill="url(#button)" stroke="#728898" stroke-width="2"/>
|
||||
<g fill="#d7e3ed" font-family="sans-serif" font-size="25" font-weight="700" text-anchor="middle">
|
||||
<text x="325" y="502">◀</text>
|
||||
<text x="480" y="501" font-size="18">OK</text>
|
||||
<text x="635" y="502">▶</text>
|
||||
</g>
|
||||
<g fill="#91a4b2" font-family="sans-serif" font-size="14" text-anchor="middle">
|
||||
<text x="325" y="551">previous / hold: back</text>
|
||||
<text x="480" y="551">select / hold: confirm</text>
|
||||
<text x="635" y="551">next</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<text x="480" y="593" fill="#718594" font-family="sans-serif" font-size="13" text-anchor="middle">Mockup only — final glyph metrics and the physical color boundary will be verified on hardware.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
Reference in New Issue
Block a user