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

feat: visual orientation picker on configure page + fix 404→setup QR in firmware

Browse Source 
Replace orientation <select> dropdown on setup/configure with the same
visual two-button picker used in the SPA (SVG frame diagrams, ribbon
indicator, active highlight). Hidden input carries the value on submit.

Firmware: normal_operation() now calls show_setup_qr(mac) on 404 instead
of epd_fill(COLOR_RED) — device shows scannable QR with its own MAC when
not yet registered.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt Edholm
2026-05-04 21:59:37 -04:00
parent 7408dc9d1a
commit 062c52eec7
1 changed files with 61 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/setup/configure.html.twig
+61 -8
View File
@@ -16,9 +16,18 @@
input[type="text"], select {
width: 100%; min-height: 44px; padding: 0 .875rem; border: 1px solid #e8d9c4;
border-radius: 10px; background: #fff; font-size: 1rem; color: #3a2e22; }
select { padding-right: 2rem; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7060' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right .875rem center; }
.orientation-picker { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.orientation-opt { display: flex; flex-direction: column; align-items: center; gap: .25rem;
padding: .75rem .5rem; background: #fff9f2; border: 2px solid #e8d9c4;
border-radius: 12px; cursor: pointer; transition: border-color .15s; }
.orientation-opt--active { border-color: #c97c3a; }
.orientation-opt__diagram { width: 48px; height: 48px; color: #8a7060; }
.orientation-opt .opt-body { stroke: #8a7060; fill: #f5ede0; }
.orientation-opt--active .opt-body { stroke: #c97c3a; fill: rgba(201,124,58,.12); }
.orientation-opt .opt-ribbon { fill: #8a7060; }
.orientation-opt--active .opt-ribbon { fill: #c97c3a; }
.orientation-opt__label { font-size: .75rem; font-weight: 700; color: #3a2e22; }
.orientation-opt__sub { font-size: .6875rem; color: #8a7060; text-align: center; line-height: 1.2; }
.field-error { margin-top: .375rem; font-size: .8125rem; color: #c0392b; }
.hint { margin-top: .375rem; font-size: .8125rem; color: #8a7060; }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
@@ -45,11 +54,38 @@
</div>
<div class="field">
<label for="orientation">Display orientation</label>
<select id="orientation" name="orientation">
<option value="landscape" {% if device.orientation.value == 'landscape' %}selected{% endif %}>Landscape — ribbon at bottom</option>
<option value="portrait" {% if device.orientation.value == 'portrait' %}selected{% endif %}>Portrait — ribbon on left</option>
</select>
<label>Display orientation</label>
<input type="hidden" id="orientation" name="orientation" value="{{ device.orientation.value }}">
<div class="orientation-picker" role="radiogroup" aria-label="Display orientation">
<button type="button" role="radio"
class="orientation-opt{% if device.orientation.value == 'landscape' %} orientation-opt--active{% endif %}"
aria-checked="{{ device.orientation.value == 'landscape' ? 'true' : 'false' }}"
aria-label="Landscape"
data-value="landscape">
<svg class="orientation-opt__diagram" viewBox="0 0 48 48" fill="none" aria-hidden="true">
<rect x="4" y="12" width="40" height="24" rx="2" stroke-width="1.5"
class="opt-body"/>
<rect x="20" y="36" width="8" height="5" rx="1"
class="opt-ribbon"/>
</svg>
<span class="orientation-opt__label">Landscape</span>
<span class="orientation-opt__sub">Ribbon at bottom</span>
</button>
<button type="button" role="radio"
class="orientation-opt{% if device.orientation.value == 'portrait' %} orientation-opt--active{% endif %}"
aria-checked="{{ device.orientation.value == 'portrait' ? 'true' : 'false' }}"
aria-label="Portrait"
data-value="portrait">
<svg class="orientation-opt__diagram" viewBox="0 0 48 48" fill="none" aria-hidden="true">
<rect x="12" y="4" width="24" height="40" rx="2" stroke-width="1.5"
class="opt-body"/>
<rect x="7" y="20" width="5" height="8" rx="1"
class="opt-ribbon"/>
</svg>
<span class="orientation-opt__label">Portrait</span>
<span class="orientation-opt__sub">Ribbon on left</span>
</button>
</div>
</div>
<div class="field">
@@ -77,5 +113,22 @@
<button type="submit" class="btn">Save &amp; finish setup</button>
</form>
</div>
<script>
(function () {
var hidden = document.getElementById('orientation');
var btns = document.querySelectorAll('.orientation-opt');
btns.forEach(function (btn) {
btn.addEventListener('click', function () {
btns.forEach(function (b) {
b.classList.remove('orientation-opt--active');
b.setAttribute('aria-checked', 'false');
});
btn.classList.add('orientation-opt--active');
btn.setAttribute('aria-checked', 'true');
hidden.value = btn.dataset.value;
});
});
}());
</script>
</body>
</html>