JacksoTheGreat/follow-me-stairs
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Plain installer page
Installer / Build (push) Failing after 11s
Details
Installer / Publish (push) Skipped
Details

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Jackson AndresandClaude Opus 5.5 committed 2026-10-14 19:56:10 -04:00
1 parent f13dfd350b
commit fb1ad1df1a
2 files changed
+52 -121
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.github/workflows/installer.yml
+1 -2
View File
@@ -48,10 +48,9 @@ jobs:
BUILD_DIR: ${{ steps.build.outputs.name }} BUILD_DIR: ${{ steps.build.outputs.name }}
VERSION: ${{ steps.version.outputs.version }} VERSION: ${{ steps.version.outputs.version }}
run: | run: |
mkdir -p site/fonts mkdir -p site
cp -r "$BUILD_DIR" site/firmware cp -r "$BUILD_DIR" site/firmware
rm -f site/firmware/*.elf rm -f site/firmware/*.elf
cp wizard/fonts/*.woff2 wizard/fonts/OFL.txt site/fonts/
sed "s/__VERSION__/$VERSION/g" installer/index.html > site/index.html sed "s/__VERSION__/$VERSION/g" installer/index.html > site/index.html
ls -R site ls -R site
installer/index.html
+51 -119
View File
@@ -7,138 +7,70 @@
<meta name="description" content="Install the follow-me stair light on an Apollo MTR-1 from your browser."> <meta name="description" content="Install the follow-me stair light on an Apollo MTR-1 from your browser.">
<script type="module" src="https://unpkg.com/esp-web-tools@10.4.0/dist/web/install-button.js?module"></script> <script type="module" src="https://unpkg.com/esp-web-tools@10.4.0/dist/web/install-button.js?module"></script>
<style> <style>
@font-face{font-family:"IBM Plex Sans";font-weight:100 700;font-display:swap;src:url(fonts/plex-sans.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500 600;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2")}
:root{ :root{
--bg:#0a0a0b; --panel:#0e0e10; --bg:#ffffff; --text:#1f1f1f; --muted:#5f5f5f; --line:#e2e2e2; --accent:#b35c00; --warn-bg:#fff5e8;
--ink:#ece8df; --ink-2:rgba(236,232,223,.62); --ink-3:rgba(236,232,223,.36); --ink-4:rgba(236,232,223,.14); --button:#1f1f1f; --button-text:#ffffff;
--line:rgba(236,232,223,.1); --line-2:rgba(236,232,223,.2); color-scheme:light dark;
--warm:#ffb35a; --warm-2:#ffd6a0;
--sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
color-scheme:dark;
/* ESP Web Tools dialogs */
--improv-primary-color:var(--warm);
--improv-text-color:var(--ink);
--mdc-theme-primary:var(--warm);
--mdc-theme-on-primary:#1b1006;
--mdc-theme-surface:#141416;
--mdc-dialog-heading-ink-color:var(--ink);
--mdc-dialog-content-ink-color:var(--ink-2);
} }
*{box-sizing:border-box} @media (prefers-color-scheme:dark){
html{background:var(--bg)} :root{--bg:#121212; --text:#e8e8e8; --muted:#a0a0a0; --line:#2e2e2e; --accent:#ffb35a; --warn-bg:#2a2016;
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased; --button:#e8e8e8; --button-text:#121212}
background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); }
background-size:48px 48px;background-position:-1px -1px} body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--warm-2);text-decoration:none;border-bottom:1px solid rgba(255,214,160,.3)} main{max-width:640px;margin:0 auto;padding:48px 16px 64px}
a:hover{border-bottom-color:var(--warm-2)} h1{font-size:28px;line-height:1.2;margin:0 0 12px}
.wrap{max-width:720px;margin:0 auto;padding:0 16px} h2{font-size:19px;margin:40px 0 10px}
header.bar{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--line)} p{margin:0 0 12px}
.brand{font:500 13px/1 var(--mono);letter-spacing:.32em} .muted{color:var(--muted)}
.ver{font:11px/1 var(--mono);letter-spacing:.12em;color:var(--ink-3)} ol{padding-left:22px;margin:0 0 20px}
li{margin:0 0 6px}
.hero{padding:56px 0 8px} a{color:var(--accent)}
.kicker{font:11px/1 var(--mono);letter-spacing:.16em;color:var(--ink-3);margin-bottom:16px} code{font:14px ui-monospace,Menlo,monospace}
h1{font:600 clamp(30px,6vw,44px)/1.08 var(--sans);letter-spacing:-.02em;margin:0 0 16px} .install{margin:24px 0 0}
.lede{color:var(--ink-2);font-size:16.5px;max-width:560px;margin:0} .install button{border:0;border-radius:6px;background:var(--button);color:var(--button-text);font:600 16px/1 system-ui,sans-serif;padding:13px 20px;cursor:pointer}
esp-web-install-button[install-unsupported] button{display:none}
/* the strip: a lit window gliding along a row of LEDs */ .warn{background:var(--warn-bg);border-left:3px solid var(--accent);padding:10px 14px;margin:20px 0 0;font-size:15px}
.strip{display:grid;grid-template-columns:repeat(36,1fr);gap:clamp(3px,1vw,7px);margin:40px 0 8px;position:relative} footer{border-top:1px solid var(--line);margin-top:48px;padding-top:16px;font-size:14px;color:var(--muted)}
.strip i{aspect-ratio:1;border-radius:50%;background:var(--ink-4)} footer ul{list-style:none;padding:0;margin:0 0 12px}
.strip .glow{position:absolute;inset:-6px auto -6px 0;width:22%;border-radius:999px; footer li{display:inline;margin-right:16px}
background:radial-gradient(closest-side,rgba(255,214,160,.95),rgba(255,179,90,.55) 55%,transparent); /* ESP Web Tools dialogs */
filter:blur(3px);mix-blend-mode:screen;animation:walk 9s cubic-bezier(.45,0,.55,1) infinite alternate} esp-web-install-button{--improv-primary-color:var(--accent);--mdc-theme-primary:var(--accent)}
@keyframes walk{0%,8%{left:0}92%,100%{left:78%}}
@media (prefers-reduced-motion:reduce){.strip .glow{animation:none;left:39%}}
.card{background:var(--panel);border:1px solid var(--line);margin:40px 0 0;padding:28px 24px}
.card h2{font:600 20px/1.2 var(--sans);margin:0 0 6px}
.card .sub{color:var(--ink-3);font-size:13.5px;margin:0 0 20px}
ol.steps{list-style:none;counter-reset:s;margin:0 0 24px;padding:0;border-top:1px solid var(--line)}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
ol.steps li::before{content:counter(s,decimal-leading-zero);font:12px/1.9 var(--mono);color:var(--ink-3)}
ol.steps b{color:var(--ink);font-weight:500}
.go{display:inline-flex;align-items:center;gap:10px;border:0;background:var(--ink);color:#111;padding:14px 22px;
font:500 15px/1 var(--sans);letter-spacing:.01em;cursor:pointer;border-radius:3px}
.go:hover{background:#fff}
.go:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
.warn{border-left:2px solid var(--warm);padding:8px 0 8px 14px;margin:22px 0 0;font-size:13.5px;color:var(--warm-2)}
.note{border-left:2px solid var(--line-2);padding:8px 0 8px 14px;margin:0;font-size:14px;color:var(--ink-2)}
esp-web-install-button[install-unsupported] .go,esp-web-install-button[install-supported] .note{display:none}
section.next{margin:48px 0 0}
section.next h2,.links h2{font:11px/1 var(--mono);letter-spacing:.16em;color:var(--ink-3);margin:0 0 14px;font-weight:400}
section.next p{color:var(--ink-2);margin:0 0 10px}
code{font:13px var(--mono);color:var(--ink);background:rgba(255,255,255,.05);padding:1px 5px;border-radius:2px}
.links{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.links ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 24px}
.links li{padding:6px 0;font-size:14px}
footer{margin:48px 0 0;padding:20px 0 40px;border-top:1px solid var(--line);font:11.5px/1.7 var(--mono);color:var(--ink-3)}
footer a{color:var(--ink-2);border-bottom-color:var(--line-2)}
@media (max-width:520px){.card{padding:22px 16px}.hero{padding-top:40px}}
</style> </style>
</head> </head>
<body> <body>
<div class="wrap"> <main>
<header class="bar"> <h1>Follow-Me installer</h1>
<span class="brand">FOLLOW-ME</span> <p>Follow-me is a stair light. A radar sensor at the stairs tracks where each person is. An LED strip along the stairs lights the part next to that person, and the lit part moves with them.</p>
<span class="ver">VERSION __VERSION__</span> <p class="muted">This page installs follow-me on an Apollo MTR-1. Version __VERSION__.</p>
</header>
<section class="hero"> <h2>Install</h2>
<div class="kicker">STAIR LIGHT · APOLLO MTR-1 · WLED</div> <p class="muted">Use Chrome or Edge on a computer. Phones and other browsers cannot connect to the sensor over USB.</p>
<h1>A stair light that follows you.</h1> <ol>
<p class="lede">A radar sensor at the stairs tracks where each person is. An LED strip along the stairs lights the part next to that person, and the lit part moves with them, up or down.</p> <li>Connect the MTR-1 to this computer with a USB-C data cable. A charge-only cable does not work.</li>
<div class="strip" aria-hidden="true"> <li>Click <b>Install Follow-Me</b> and pick the sensor from the list.</li>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <li>When the install is complete, enter your Wi-Fi name and password.</li>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <li>Click <b>Visit device</b> to open the sensor's web page.</li>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<span class="glow"></span>
</div>
</section>
<section class="card">
<h2>Install on an Apollo MTR-1</h2>
<p class="sub">Use Chrome or Edge on a computer. Phones and other browsers cannot connect to the sensor over USB.</p>
<ol class="steps">
<li><span>Connect the MTR-1 to this computer with a <b>USB-C data cable</b>. A charge-only cable does not work.</span></li>
<li><span>Click <b>Install Follow-Me</b> and pick the sensor from the list.</span></li>
<li><span>When the install is complete, enter your <b>Wi-Fi</b> name and password.</span></li>
<li><span>Click <b>Visit device</b> to open the sensor's web page.</span></li>
</ol> </ol>
<esp-web-install-button manifest="firmware/manifest.json"> <esp-web-install-button class="install" manifest="firmware/manifest.json">
<button slot="activate" class="go">Install Follow-Me →</button> <button slot="activate">Install Follow-Me</button>
<p slot="unsupported" class="note">This browser cannot install firmware. Open this page in Chrome or Edge on a computer.</p> <p slot="unsupported">This browser cannot install firmware. Open this page in Chrome or Edge on a computer.</p>
<p slot="not-allowed" class="note">The installer works only over HTTPS. Open this page from its https:// address.</p> <p slot="not-allowed">The installer works only over HTTPS. Open this page from its https:// address.</p>
</esp-web-install-button> </esp-web-install-button>
<div class="warn">Installing erases the sensor. A sensor that already has a follow-me setup must go through the setup wizard again. To keep the setup, update the sensor from ESPHome instead.</div> <p class="warn">Installing erases the sensor. A sensor that already has a follow-me setup must go through the setup wizard again. To keep the setup, update the sensor from ESPHome instead.</p>
</section>
<section class="next"> <h2>After installing</h2>
<h2>NEXT: SET UP YOUR STAIRS</h2> <p>On the sensor's web page, click <b>Set up Follow-Me</b>. The setup wizard asks for the shape of your stairs, has you walk them once, and lines up the LED strip.</p>
<p>On the sensor's web page, click <b>Set up Follow-Me</b>. The setup wizard asks for the shape of your stairs, has you walk them once, and lines up the LED strip. It takes about ten minutes.</p>
<p>If the Wi-Fi step did not appear, connect your phone to the <code>Apollo MTR1 Hotspot</code> network and enter your Wi-Fi there.</p> <p>If the Wi-Fi step did not appear, connect your phone to the <code>Apollo MTR1 Hotspot</code> network and enter your Wi-Fi there.</p>
<p>WLED needs some settings changed first. The wizard checks them and can change them for you.</p> <p>WLED needs some settings changed first. The wizard checks them and can change them for you.</p>
</section>
<section class="links">
<h2>MORE</h2>
<ul>
<li><a href="https://git.outer-haven.io/JacksoTheGreat/follow-me-stairs">Source and documentation</a></li>
<li><a href="https://git.outer-haven.io/JacksoTheGreat/follow-me-stairs/src/branch/main/docs/settings.md">Every setting explained</a></li>
<li><a href="https://github.com/RandomPedestrian07/follow-me-stairs">GitHub mirror</a></li>
<li><a href="https://apolloautomation.com/products/mtr-1">Apollo MTR-1</a></li>
</ul>
</section>
<footer> <footer>
MIT license. IBM Plex fonts: <a href="fonts/OFL.txt">SIL Open Font License 1.1</a>.<br> <ul>
Installer by <a href="https://esphome.github.io/esp-web-tools/">ESP Web Tools</a>. Firmware built with <a href="https://esphome.io">ESPHome</a>. <li><a href="https://git.outer-haven.io/JacksoTheGreat/follow-me-stairs">Source and documentation</a></li>
<li><a href="https://git.outer-haven.io/JacksoTheGreat/follow-me-stairs/src/branch/main/docs/settings.md">Settings</a></li>
<li><a href="https://github.com/RandomPedestrian07/follow-me-stairs">GitHub mirror</a></li>
</ul>
MIT license. Installer by <a href="https://esphome.github.io/esp-web-tools/">ESP Web Tools</a>.
</footer> </footer>
</div> </main>
</body> </body>
</html> </html>