272 lines
19 KiB
HTML
272 lines
19 KiB
HTML
<title>House Lighting, Wiring Sheet</title>
|
||
<style>
|
||
:root {
|
||
--paper:#FCFBF8; --ink:#1C1B18; --muted:#6E6A62; --line:#DED8CC; --line-strong:#C4BDAE;
|
||
--slate:#2F5D74; --accent:#E39A2C;
|
||
--z-ext:#3763A0; --z-fire:#C4402A; --z-gf:#B9741C; --z-up:#2E7D6B;
|
||
--panel:#F5F2EA; --shadow:0 1px 0 rgba(0,0,0,.03);
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--paper:#181915; --ink:#ECEAE2; --muted:#9C978A; --line:#33352E; --line-strong:#454737;
|
||
--slate:#7FB2C7; --accent:#F0AE45;
|
||
--z-ext:#6EA0DE; --z-fire:#E77257; --z-gf:#E0A14E; --z-up:#5FB8A2;
|
||
--panel:#20211B; --shadow:none;
|
||
}
|
||
}
|
||
:root[data-theme="light"] {
|
||
--paper:#FCFBF8; --ink:#1C1B18; --muted:#6E6A62; --line:#DED8CC; --line-strong:#C4BDAE;
|
||
--slate:#2F5D74; --accent:#E39A2C;
|
||
--z-ext:#3763A0; --z-fire:#C4402A; --z-gf:#B9741C; --z-up:#2E7D6B;
|
||
--panel:#F5F2EA; --shadow:0 1px 0 rgba(0,0,0,.03);
|
||
}
|
||
:root[data-theme="dark"] {
|
||
--paper:#181915; --ink:#ECEAE2; --muted:#9C978A; --line:#33352E; --line-strong:#454737;
|
||
--slate:#7FB2C7; --accent:#F0AE45;
|
||
--z-ext:#6EA0DE; --z-fire:#E77257; --z-gf:#E0A14E; --z-up:#5FB8A2;
|
||
--panel:#20211B; --shadow:none;
|
||
}
|
||
|
||
* { box-sizing:border-box; }
|
||
body {
|
||
background:var(--paper); color:var(--ink);
|
||
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
|
||
line-height:1.5; margin:0; padding:32px 24px;
|
||
-webkit-font-smoothing:antialiased;
|
||
}
|
||
.sheet { max-width:1040px; margin:0 auto; }
|
||
.mono { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
|
||
|
||
/* ---- Title block ---- */
|
||
.titleblock {
|
||
border:1.5px solid var(--ink); border-radius:3px; overflow:hidden;
|
||
display:grid; grid-template-columns:1.6fr 1fr;
|
||
}
|
||
.tb-main { padding:16px 20px; border-right:1px solid var(--line-strong); }
|
||
.tb-eyebrow {
|
||
font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.18em;
|
||
text-transform:uppercase; color:var(--accent); margin:0 0 4px;
|
||
}
|
||
h1 { font-size:26px; line-height:1.1; margin:0; text-wrap:balance; letter-spacing:-.01em; }
|
||
.tb-sub { color:var(--muted); font-size:13px; margin:6px 0 0; }
|
||
.tb-meta { display:grid; grid-template-columns:1fr 1fr; }
|
||
.tb-cell { padding:9px 14px; border-bottom:1px solid var(--line); }
|
||
.tb-cell:nth-child(odd) { border-right:1px solid var(--line); }
|
||
.tb-cell:nth-last-child(-n+2) { border-bottom:none; }
|
||
.tb-cell .k { font-family:ui-monospace,monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
|
||
.tb-cell .v { font-size:13px; font-weight:600; margin-top:1px; }
|
||
|
||
/* ---- Section scaffolding ---- */
|
||
section { margin-top:26px; }
|
||
.sec-head { display:flex; align-items:baseline; gap:12px; margin:0 0 12px; }
|
||
.sec-head h2 { font-size:15px; margin:0; letter-spacing:.01em; }
|
||
.sec-head .num {
|
||
font-family:ui-monospace,monospace; font-size:12px; color:var(--paper);
|
||
background:var(--ink); border-radius:3px; padding:1px 7px; font-weight:600;
|
||
}
|
||
.sec-head .hint { color:var(--muted); font-size:12px; margin-left:auto; }
|
||
|
||
/* ---- Diagram ---- */
|
||
.diagram { background:var(--panel); border:1px solid var(--line-strong); border-radius:6px; padding:14px; overflow-x:auto; }
|
||
.diagram svg { display:block; width:100%; min-width:640px; height:auto; }
|
||
|
||
/* ---- Two-column body ---- */
|
||
.cols { display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:start; }
|
||
|
||
/* ---- Schedule table ---- */
|
||
table { width:100%; border-collapse:collapse; font-size:12.5px; }
|
||
th { text-align:left; font-family:ui-monospace,monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:0 8px 7px; border-bottom:1.5px solid var(--line-strong); }
|
||
td { padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
|
||
td.idx { font-family:ui-monospace,monospace; font-weight:700; color:var(--ink); width:1%; }
|
||
tbody tr:last-child td { border-bottom:none; }
|
||
.pic { font-family:ui-monospace,monospace; font-size:11px; color:var(--muted); white-space:nowrap; }
|
||
|
||
.chip { display:inline-flex; align-items:center; gap:5px; font-family:ui-monospace,monospace; font-size:10.5px; font-weight:600; white-space:nowrap; }
|
||
.chip::before { content:""; width:9px; height:9px; border-radius:2px; background:var(--c); flex:none; }
|
||
.z-ext{--c:var(--z-ext);} .z-fire{--c:var(--z-fire);} .z-gf{--c:var(--z-gf);} .z-up{--c:var(--z-up);}
|
||
|
||
/* ---- Checklist / callouts ---- */
|
||
.steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
|
||
.steps li { display:grid; grid-template-columns:auto 1fr; gap:11px; padding:9px 0; border-bottom:1px solid var(--line); }
|
||
.steps li:last-child { border-bottom:none; }
|
||
.box { width:15px; height:15px; border:1.5px solid var(--line-strong); border-radius:3px; margin-top:2px; }
|
||
.steps .pic { display:block; margin-bottom:1px; }
|
||
.steps .what { font-size:12.5px; }
|
||
.steps .crit { color:var(--z-fire); font-weight:700; font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
|
||
|
||
.callout { background:var(--panel); border:1px solid var(--line-strong); border-left:3px solid var(--accent); border-radius:5px; padding:12px 14px; margin-top:16px; font-size:12.5px; }
|
||
.callout b { font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.04em; }
|
||
.scenes { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
|
||
.scenes span { font-family:ui-monospace,monospace; font-size:11px; border:1px solid var(--line-strong); border-radius:20px; padding:2px 10px; }
|
||
.scenes .arrow { border:none; color:var(--muted); padding:2px 0; }
|
||
|
||
footer { margin-top:28px; padding-top:12px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:11px; font-family:ui-monospace,monospace; }
|
||
|
||
.theme-toggle { position:fixed; top:14px; right:14px; font-family:ui-monospace,monospace; font-size:11px; background:var(--panel); color:var(--ink); border:1px solid var(--line-strong); border-radius:5px; padding:5px 10px; cursor:pointer; }
|
||
.theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
|
||
|
||
@media (max-width:720px) { .titleblock,.cols{grid-template-columns:1fr;} .tb-main{border-right:none;border-bottom:1px solid var(--line-strong);} }
|
||
@media print {
|
||
:root { --paper:#fff; --ink:#000; --panel:#fff; --line:#ccc; --line-strong:#999; }
|
||
body { padding:0; }
|
||
.theme-toggle { display:none; }
|
||
section, .titleblock, .diagram, .cols { break-inside:avoid; }
|
||
.steps li, tr { break-inside:avoid; }
|
||
}
|
||
</style>
|
||
|
||
<button class="theme-toggle" onclick="document.documentElement.dataset.theme = document.documentElement.dataset.theme==='dark'?'light':'dark'">◐ theme</button>
|
||
|
||
<div class="sheet">
|
||
|
||
<div class="titleblock">
|
||
<div class="tb-main">
|
||
<p class="tb-eyebrow">Bench Reference · keep near the glue</p>
|
||
<h1>House, Lighting Wiring Sheet</h1>
|
||
<p class="tb-sub">12 addressable pixels · one data chain · cordless. Solder each pixel at the build step its panel goes on.</p>
|
||
</div>
|
||
<div class="tb-meta">
|
||
<div class="tb-cell"><div class="k">Controller</div><div class="v">Arduino Nano</div></div>
|
||
<div class="tb-cell"><div class="k">Fixtures</div><div class="v">12× SK6812 RGBW·WW</div></div>
|
||
<div class="tb-cell"><div class="k">Power</div><div class="v">USB power bank · 5V</div></div>
|
||
<div class="tb-cell"><div class="k">Data pin</div><div class="v mono">D6 · 470Ω series</div></div>
|
||
<div class="tb-cell"><div class="k">Sketch</div><div class="v mono">townhouse_lights.ino</div></div>
|
||
<div class="tb-cell"><div class="k">Rev</div><div class="v">A · cordless</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<section>
|
||
<div class="sec-head"><span class="num">1</span><h2>Power & controller wiring</h2><span class="hint">DATA flows one way, arrows point away from the Nano</span></div>
|
||
<div class="diagram">
|
||
<svg viewBox="0 0 900 250" role="img" aria-label="Wiring schematic from USB power bank through master switch to Arduino Nano and the SK6812 pixel chain">
|
||
<defs>
|
||
<marker id="ar" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="var(--slate)"/></marker>
|
||
</defs>
|
||
<!-- rails legend -->
|
||
<g font-family="ui-monospace,monospace" font-size="11">
|
||
<line x1="620" y1="24" x2="648" y2="24" stroke="var(--z-fire)" stroke-width="3"/><text x="654" y="28" fill="var(--muted)">+5V</text>
|
||
<line x1="700" y1="24" x2="728" y2="24" stroke="var(--ink)" stroke-width="3"/><text x="734" y="28" fill="var(--muted)">GND</text>
|
||
<line x1="784" y1="24" x2="812" y2="24" stroke="var(--slate)" stroke-width="2.5"/><text x="818" y="28" fill="var(--muted)">DATA</text>
|
||
</g>
|
||
|
||
<!-- Power bank -->
|
||
<rect x="12" y="70" width="120" height="66" rx="5" fill="var(--panel)" stroke="var(--line-strong)" stroke-width="1.5"/>
|
||
<text x="72" y="98" text-anchor="middle" font-size="13" font-weight="700" fill="var(--ink)" font-family="ui-monospace,monospace">USB bank</text>
|
||
<text x="72" y="116" text-anchor="middle" font-size="10.5" fill="var(--muted)">5V · always-on</text>
|
||
|
||
<!-- master switch -->
|
||
<line x1="132" y1="90" x2="180" y2="90" stroke="var(--z-fire)" stroke-width="3"/>
|
||
<circle cx="184" cy="90" r="4" fill="var(--z-fire)"/><line x1="188" y1="88" x2="206" y2="78" stroke="var(--z-fire)" stroke-width="3"/><circle cx="210" cy="76" r="4" fill="var(--z-fire)"/>
|
||
<text x="197" y="112" text-anchor="middle" font-size="10" fill="var(--muted)" font-family="ui-monospace,monospace">master sw</text>
|
||
<line x1="214" y1="80" x2="250" y2="90" stroke="var(--z-fire)" stroke-width="3"/>
|
||
<line x1="72" y1="136" x2="72" y2="170" stroke="var(--ink)" stroke-width="3"/>
|
||
<line x1="72" y1="170" x2="250" y2="170" stroke="var(--ink)" stroke-width="3"/>
|
||
|
||
<!-- Nano -->
|
||
<rect x="250" y="66" width="150" height="118" rx="6" fill="var(--panel)" stroke="var(--ink)" stroke-width="1.5"/>
|
||
<text x="325" y="92" text-anchor="middle" font-size="14" font-weight="700" fill="var(--ink)" font-family="ui-monospace,monospace">Arduino Nano</text>
|
||
<g font-family="ui-monospace,monospace" font-size="11" fill="var(--muted)">
|
||
<text x="266" y="118">5V</text><text x="266" y="140">GND</text>
|
||
<text x="384" y="118" text-anchor="end">D6</text><text x="384" y="140" text-anchor="end">D2</text>
|
||
</g>
|
||
<circle cx="252" cy="114" r="3" fill="var(--z-fire)"/><circle cx="252" cy="136" r="3" fill="var(--ink)"/>
|
||
<circle cx="398" cy="114" r="3" fill="var(--slate)"/><circle cx="398" cy="136" r="3" fill="var(--ink)"/>
|
||
<!-- 5V/GND into nano -->
|
||
<line x1="250" y1="90" x2="252" y2="90" stroke="var(--z-fire)" stroke-width="3"/><line x1="240" y1="90" x2="252" y2="114" stroke="var(--z-fire)" stroke-width="3"/>
|
||
<line x1="250" y1="170" x2="252" y2="136" stroke="var(--ink)" stroke-width="3"/>
|
||
|
||
<!-- button on D2 -->
|
||
<line x1="398" y1="136" x2="430" y2="136" stroke="var(--ink)" stroke-width="2"/>
|
||
<rect x="430" y="128" width="30" height="16" rx="3" fill="none" stroke="var(--ink)" stroke-width="1.5"/>
|
||
<line x1="460" y1="136" x2="470" y2="136" stroke="var(--ink)" stroke-width="2"/><line x1="470" y1="130" x2="470" y2="142" stroke="var(--ink)" stroke-width="2"/>
|
||
<text x="445" y="164" text-anchor="middle" font-size="10" fill="var(--muted)" font-family="ui-monospace,monospace">scene / wake</text>
|
||
|
||
<!-- 470 ohm on data -->
|
||
<line x1="398" y1="114" x2="440" y2="114" stroke="var(--slate)" stroke-width="2.5"/>
|
||
<rect x="440" y="107" width="34" height="14" rx="2" fill="var(--panel)" stroke="var(--slate)" stroke-width="1.5"/>
|
||
<text x="457" y="118" text-anchor="middle" font-size="9" fill="var(--slate)" font-family="ui-monospace,monospace">470Ω</text>
|
||
<line x1="474" y1="114" x2="540" y2="114" stroke="var(--slate)" stroke-width="2.5" marker-end="url(#ar)"/>
|
||
|
||
<!-- 5V + GND rails out to chain -->
|
||
<line x1="240" y1="90" x2="240" y2="210" stroke="var(--z-fire)" stroke-width="3"/><line x1="240" y1="210" x2="880" y2="210" stroke="var(--z-fire)" stroke-width="3"/>
|
||
<line x1="228" y1="170" x2="228" y2="228" stroke="var(--ink)" stroke-width="3"/><line x1="228" y1="228" x2="880" y2="228" stroke="var(--ink)" stroke-width="3"/>
|
||
|
||
<!-- 1000uF cap at chain head -->
|
||
<line x1="512" y1="210" x2="512" y2="219" stroke="var(--z-fire)" stroke-width="2.5"/>
|
||
<line x1="504" y1="219" x2="520" y2="219" stroke="var(--z-fire)" stroke-width="2.5"/>
|
||
<line x1="504" y1="223" x2="520" y2="223" stroke="var(--ink)" stroke-width="2.5"/>
|
||
<line x1="512" y1="223" x2="512" y2="228" stroke="var(--ink)" stroke-width="2.5"/>
|
||
<text x="512" y="245" text-anchor="middle" font-size="9.5" fill="var(--muted)" font-family="ui-monospace,monospace">1000µF</text>
|
||
|
||
<!-- pixel chain -->
|
||
<g font-family="ui-monospace,monospace">
|
||
<rect x="548" y="96" width="46" height="40" rx="4" fill="var(--panel)" stroke="var(--z-ext)" stroke-width="1.5"/>
|
||
<text x="571" y="121" text-anchor="middle" font-size="14" font-weight="700" fill="var(--ink)">P0</text>
|
||
<line x1="571" y1="136" x2="571" y2="210" stroke="var(--z-fire)" stroke-width="2"/>
|
||
<line x1="560" y1="136" x2="560" y2="228" stroke="var(--ink)" stroke-width="2"/>
|
||
<line x1="594" y1="114" x2="618" y2="114" stroke="var(--slate)" stroke-width="2.5" marker-end="url(#ar)"/>
|
||
|
||
<rect x="626" y="96" width="46" height="40" rx="4" fill="var(--panel)" stroke="var(--z-ext)" stroke-width="1.5"/>
|
||
<text x="649" y="121" text-anchor="middle" font-size="14" font-weight="700" fill="var(--ink)">P1</text>
|
||
<line x1="649" y1="136" x2="649" y2="210" stroke="var(--z-fire)" stroke-width="2"/>
|
||
<line x1="638" y1="136" x2="638" y2="228" stroke="var(--ink)" stroke-width="2"/>
|
||
<line x1="672" y1="114" x2="696" y2="114" stroke="var(--slate)" stroke-width="2.5" marker-end="url(#ar)"/>
|
||
|
||
<text x="726" y="120" font-size="20" fill="var(--muted)">· · ·</text>
|
||
<line x1="756" y1="114" x2="780" y2="114" stroke="var(--slate)" stroke-width="2.5" marker-end="url(#ar)"/>
|
||
|
||
<rect x="788" y="96" width="54" height="40" rx="4" fill="var(--panel)" stroke="var(--z-up)" stroke-width="1.5"/>
|
||
<text x="815" y="121" text-anchor="middle" font-size="13" font-weight="700" fill="var(--ink)">P11</text>
|
||
<line x1="815" y1="136" x2="815" y2="210" stroke="var(--z-fire)" stroke-width="2"/>
|
||
<line x1="804" y1="136" x2="804" y2="228" stroke="var(--ink)" stroke-width="2"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="cols">
|
||
<section>
|
||
<div class="sec-head"><span class="num">2</span><h2>Fixture schedule</h2></div>
|
||
<table>
|
||
<thead><tr><th>Px</th><th>Fixture</th><th>Zone</th><th>Install at</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="idx">0</td><td>Porch light A</td><td><span class="chip z-ext">EXT</span></td><td class="pic">Pic 8–9</td></tr>
|
||
<tr><td class="idx">1</td><td>Porch light B</td><td><span class="chip z-ext">EXT</span></td><td class="pic">Pic 8–9</td></tr>
|
||
<tr><td class="idx">2</td><td>Front-door entry</td><td><span class="chip z-ext">EXT</span></td><td class="pic">Pic 8–9</td></tr>
|
||
<tr><td class="idx">3</td><td>Side deck / wing</td><td><span class="chip z-ext">EXT</span></td><td class="pic">Pic 8–9</td></tr>
|
||
<tr><td class="idx">4</td><td>Fireplace / hearth</td><td><span class="chip z-fire">FIRE</span></td><td class="pic">Pic 10</td></tr>
|
||
<tr><td class="idx">5</td><td>GF living ceiling</td><td><span class="chip z-gf">GF_INT</span></td><td class="pic">Pic 11 ✦</td></tr>
|
||
<tr><td class="idx">6</td><td>GF kitchen ceiling</td><td><span class="chip z-gf">GF_INT</span></td><td class="pic">Pic 11 ✦</td></tr>
|
||
<tr><td class="idx">7</td><td>Balcony wall light</td><td><span class="chip z-ext">EXT</span></td><td class="pic">Pic 12–13</td></tr>
|
||
<tr><td class="idx">8</td><td>2F bedroom ceiling</td><td><span class="chip z-up">UP_INT</span></td><td class="pic">Pic 14 ✦</td></tr>
|
||
<tr><td class="idx">9</td><td>2F bedroom ceiling</td><td><span class="chip z-up">UP_INT</span></td><td class="pic">Pic 14 ✦</td></tr>
|
||
<tr><td class="idx">10</td><td>Attic ceiling</td><td><span class="chip z-up">UP_INT</span></td><td class="pic">Pic 16–17</td></tr>
|
||
<tr><td class="idx">11</td><td>Spare, eave / yard</td><td><span class="chip">, </span></td><td class="pic">any</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="callout">
|
||
<b>SCENES</b>, button on D2 cycles; auto-fades dark after 20 min idle.
|
||
<div class="scenes"><span>Evening</span><span class="arrow">→</span><span>All On</span><span class="arrow">→</span><span>Night</span><span class="arrow">→</span><span>Off</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="sec-head"><span class="num">3</span><h2>Build-order checklist</h2></div>
|
||
<ul class="steps">
|
||
<li><span class="box"></span><span><span class="pic">Pic 5, base closing</span><span class="what">Mount Nano, power bank, master switch, 470Ω + 1000µF in the crawlspace. Leave the 3-wire chain head + risers poking up.</span></span></li>
|
||
<li><span class="box"></span><span><span class="pic">Pic 8–9, GF walls</span><span class="what">Solder <b class="mono">P0–P3</b> (porch, entry, deck) through pre-drilled holes as walls seat.</span></span></li>
|
||
<li><span class="box"></span><span><span class="pic">Pic 10, chimney base</span><span class="what">Drop <b class="mono">P4</b> flicker into the hearth.</span></span></li>
|
||
<li><span class="box"></span><span><span class="pic">Pic 11, GF ceiling</span><span class="what"><span class="crit">✦ wire before glue</span> Glue <b class="mono">P5–P6</b> to the panel <em>underside</em>, route to a corner, then set the floor.</span></span></li>
|
||
<li><span class="box"></span><span><span class="pic">Pic 12–13, 2F walls</span><span class="what">Solder <b class="mono">P7</b> balcony light.</span></span></li>
|
||
<li><span class="box"></span><span><span class="pic">Pic 14, 2F ceiling</span><span class="what"><span class="crit">✦ wire before glue</span> Glue <b class="mono">P8–P9</b> to the panel <em>underside</em> before it goes down.</span></span></li>
|
||
<li><span class="box"></span><span><span class="pic">Pic 16–17, roof</span><span class="what">Fix <b class="mono">P10</b> to a rafter before closing the roof; dormers double as light wells.</span></span></li>
|
||
<li><span class="box"></span><span><span class="pic">Finish</span><span class="what">Route the power-bank charge port to a hidden opening (rear wall or chimney base). Leave a base hatch.</span></span></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
|
||
<footer>
|
||
<span>Toys4play Townhouse · 3mm ply · ~1:12</span>
|
||
<span>Zones: EXT · FIRE · GF_INT · UP_INT · ✦ = can't undo once glued</span>
|
||
</footer>
|
||
</div>
|