football2801/pictureFrame-firmware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

ux(setup): rewrite captive-portal + AP/setup-screen copy

Browse Source 
Beta tester called the previous setup wording "Chinglish."
Tighter, plainer language across all three surfaces:

- Captive portal (PORTAL_HTML): "Connect your frame", explicit
  "Home WiFi name / Home WiFi password", clearer footer.
- AP screen step list: 5-line plain-English checklist; no more
  Safari-specific reference.
- Setup screen: fixed step 2 wrapping mid-domain
  ("pictureframe / .edholm.me"), tightened steps 1 and 3.

Regenerated bg.bin to match the new gen_screens.py output.
NEEDS-FLASH: in-field beta unit still has prior copy.
This commit is contained in:
Matt Edholm
2026-05-09 15:17:15 -04:00
parent f1d867c659
commit c1bed8c218
8 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.cpp
+12 -8
View File
@@ -54,6 +54,8 @@ static void show_setup_qr(const String& mac) {
}
// ── Captive portal HTML ───────────────────────────────────────────────────────
// NEW WORDING 2026-05-09 — beta-tester feedback called the previous copy
// "Chinglish." Needs flash test before going to a recipient.
static const char PORTAL_HTML[] PROGMEM = R"html(
<!DOCTYPE html><html lang="en">
@@ -64,26 +66,28 @@ static const char PORTAL_HTML[] PROGMEM = R"html(
min-height:100vh;margin:0;background:#fdf6ee;color:#3a2e22}
.card{width:100%;max-width:340px;margin:1rem;padding:1.5rem;background:#fff9f2;
border:1px solid #e8d9c4;border-radius:16px}
h1{font-size:1.25rem;margin:0 0 1.25rem}
h1{font-size:1.25rem;margin:0 0 .5rem}
.sub{font-size:.875rem;color:#8a7060;margin:0 0 1.25rem;line-height:1.4}
label{display:block;font-size:.8125rem;font-weight:600;color:#8a7060;margin-bottom:.3rem}
input{width:100%;min-height:44px;padding:0 .875rem;border:1px solid #e8d9c4;
border-radius:10px;background:#fff;font-size:1rem;color:#3a2e22;box-sizing:border-box;margin-bottom:1rem}
button{width:100%;min-height:44px;background:#c97c3a;color:#fff;border:none;
border-radius:9999px;font-size:1rem;font-weight:700;cursor:pointer}
p{font-size:.875rem;color:#8a7060;margin-top:1rem;text-align:center}
p.foot{font-size:.875rem;color:#8a7060;margin-top:1rem;text-align:center;line-height:1.4}
</style>
</head>
<body>
<div class="card">
<h1>Connect to WiFi</h1>
<h1>Connect your frame</h1>
<p class="sub">Type the name and password of your home WiFi so the frame can join it.</p>
<form method="POST" action="/connect">
<label for="s">WiFi network name</label>
<label for="s">Home WiFi name</label>
<input id="s" name="ssid" type="text" autocomplete="off" placeholder="e.g. HomeNetwork">
<label for="p">Password</label>
<label for="p">Home WiFi password</label>
<input id="p" name="pass" type="password" autocomplete="off">
<button type="submit">Connect</button>
</form>
<p>pictureFrame will join your network and display a setup QR code.</p>
<p class="foot">Once it connects, the frame's screen will update with the next step.</p>
</div>
</body></html>
)html";
@@ -93,9 +97,9 @@ static const char CONNECTING_HTML[] PROGMEM = R"html(
<title>Connecting…</title>
<style>body{font-family:system-ui,sans-serif;display:flex;align-items:center;justify-content:center;
min-height:100vh;margin:0;background:#fdf6ee;color:#3a2e22;text-align:center}
.card{padding:2rem;max-width:300px}</style></head>
.card{padding:2rem;max-width:320px}p{line-height:1.5}</style></head>
<body><div class="card"><h2>Connecting…</h2>
<p>The frame is joining your network.<br>Watch the display for a setup QR code.</p></div></body></html>
<p>The frame is joining your WiFi. Look at the frame's screen — a new QR code will appear there for the next step.</p></div></body></html>
)html";
// ── Web server handlers ───────────────────────────────────────────────────────