jens/brewpi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign browser GUI: drop tabs, 3-column layout, labels above sliders

Browse Source 
- Remove tab system (nav#tabs, tab-btn, tab-content) from HTML/CSS/JS
- Permanent 3-column grid: manual controls (left, 16em) | LCD+pot (center) | progress (right, fills remaining)
- LCD panel stacks above pot SVG in center column, both hidden until connected
- Step plates no longer max-width capped, fill the right column
- Slider labels moved above the slider+readout row via flex-direction: column

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DF16nV2ispNw1C9SbvqbRQ
This commit is contained in:
jens
2026-06-27 21:35:25 +02:00
co-authored by Claude Sonnet 4.6
parent b4e7007c4a
commit 5c2a301f1f
3 changed files with 80 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
-9
View File
@@ -875,15 +875,6 @@ document.getElementById('sud-message-ok').addEventListener('click', () => {
sendMsg('Sud', {Confirm: true});
});
document.querySelectorAll('.tab-btn').forEach((btn) => {
btn.addEventListener('click', () => {
document.querySelectorAll('.tab-btn').forEach((b) => b.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach((c) => c.classList.remove('active'));
btn.classList.add('active');
document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
});
});
setInterval(() => {
blinkOn = !blinkOn;
stepPlates.forEach(applyLedColor);
web/index.html
+52 -47
View File
@@ -22,6 +22,54 @@
</span>
</header>
<main id="layout">
<section id="col-manual">
<div class="panel">
<h3>Controller</h3>
<label>Temperature [&deg;C]
<div class="slider-row">
<input type="range" id="temp-soll" min="0" max="100" step="1">
<span id="temp-soll-readout">--</span>
</div>
</label>
<label>Heat rate [&deg;C/min]
<input type="number" id="heatrate-soll" min="0" max="3" step="0.1">
</label>
</div>
<div class="panel">
<h3>Heater</h3>
<label>Power [W]
<div class="slider-row">
<input type="range" id="heater-power" min="0" max="100" step="1">
<span id="heater-power-readout">--</span>
</div>
</label>
</div>
<div class="panel">
<h3>Stirrer</h3>
<label>Speed [%]
<div class="slider-row">
<input type="range" id="stirrer-speed" min="0" max="100" step="1">
<span id="stirrer-speed-readout">--</span>
</div>
</label>
</div>
<div class="panel">
<h3>Environment</h3>
<label>Ambient [&deg;C]
<input type="number" id="ambient-temp" step="0.1">
</label>
<div id="pot-reset-row" class="hidden">
<label>Pot [&deg;C]
<input type="number" id="pot-temp" step="0.1">
</label>
<button id="btn-pot-reset">Reset</button>
</div>
</div>
</section>
<div id="col-center">
<div id="lcd-pot-row">
<div id="lcd-panel">
<div class="lcd-row lcd-header">
@@ -201,55 +249,12 @@
</svg>
</div>
</div><!-- #lcd-pot-row -->
</div><!-- #col-center -->
<nav id="tabs">
<button class="tab-btn active" data-tab="manual">Manual</button>
<button class="tab-btn" data-tab="progress">Progress</button>
</nav>
<section id="col-progress">
<div id="step-plates"></div>
</section>
<main>
<section id="tab-manual" class="tab-content active">
<div class="panel">
<h3>Controller</h3>
<label>Temperature [&deg;C]
<input type="range" id="temp-soll" min="0" max="100" step="1">
<span id="temp-soll-readout">--</span>
</label>
<label>Heat rate [&deg;C/min]
<input type="number" id="heatrate-soll" min="0" max="3" step="0.1">
</label>
</div>
<div class="panel">
<h3>Heater</h3>
<label>Power [W]
<input type="range" id="heater-power" min="0" max="100" step="1">
<span id="heater-power-readout">--</span>
</label>
</div>
<div class="panel">
<h3>Stirrer</h3>
<label>Speed [%]
<input type="range" id="stirrer-speed" min="0" max="100" step="1">
<span id="stirrer-speed-readout">--</span>
</label>
</div>
<div class="panel">
<h3>Environment</h3>
<label>Ambient [&deg;C]
<input type="number" id="ambient-temp" step="0.1">
</label>
<div id="pot-reset-row" class="hidden">
<label>Pot [&deg;C]
<input type="number" id="pot-temp" step="0.1">
</label>
<button id="btn-pot-reset">Reset</button>
</div>
</div>
</section>
<section id="tab-progress" class="tab-content">
<div id="step-plates"></div>
</section>
</main>
<dialog id="sud-message-dialog">
web/style.css
+28 -43
View File
@@ -114,9 +114,9 @@ header#connection-bar {
#lcd-panel {
display: grid;
grid-template-columns: 11em 6em 6em;
gap: 0.25em 1em;
max-width: 32em;
grid-template-columns: 9em 4em 4em;
gap: 0.25em 0.5em;
font-size: 1.1em;
}
.lcd-row { display: contents; }
.lcd-header { font-weight: bold; color: var(--text-muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; }
@@ -133,16 +133,27 @@ header#connection-bar {
border-radius: 3px;
}
/* --- LCD + pot row --- */
/* --- 3-column layout --- */
#layout {
display: grid;
grid-template-columns: 16em auto 1fr;
gap: 1.5em;
align-items: start;
margin-top: 1em;
}
#col-progress { overflow-y: auto; }
/* --- LCD + pot (center column) --- */
#sud-status-line, #env-status-line { visibility: hidden; }
#lcd-pot-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5em;
margin: 1em 0;
font-size: 2em;
gap: 1em;
visibility: hidden;
}
@@ -217,37 +228,7 @@ header#connection-bar {
transition: opacity 0.4s;
}
/* --- Tabs --- */
nav#tabs {
margin-top: 1em;
border-bottom: 1px solid var(--border);
}
.tab-btn {
background: none;
border: 1px solid transparent;
border-bottom: none;
color: var(--text-muted);
padding: 0.4em 1.1em;
cursor: pointer;
position: relative;
top: 1px;
border-radius: 4px 4px 0 0;
transition: color 0.15s;
}
.tab-btn:hover:not(.active) { color: var(--text); border-color: var(--border); }
.tab-btn.active {
background: var(--surface);
color: var(--text);
font-weight: bold;
border-color: var(--border);
border-bottom: 1px solid var(--surface);
}
.tab-content { display: none; padding: 1em 0; }
.tab-content.active { display: block; }
/* --- Manual tab panels --- */
/* --- Manual panels --- */
.panel {
background: var(--surface);
@@ -255,7 +236,6 @@ nav#tabs {
border-radius: 6px;
padding: 0.8em 1.1em;
margin-bottom: 0.8em;
max-width: 30em;
box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.panel h3 {
@@ -269,11 +249,16 @@ nav#tabs {
}
.panel label {
display: flex;
align-items: center;
gap: 0.6em;
flex-direction: column;
gap: 0.2em;
margin: 0.4em 0;
}
.panel input[type="range"] { flex: 1; accent-color: var(--accent); }
.slider-row {
display: flex;
align-items: center;
gap: 0.6em;
}
.slider-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.panel input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.panel input[type="number"] { width: 6em; }
@@ -284,7 +269,7 @@ nav#tabs {
/* --- Progress tab: step plates --- */
#step-plates { display: flex; flex-direction: column; gap: 0.5em; max-width: 38em; }
#step-plates { display: flex; flex-direction: column; gap: 0.5em; }
.step-plate {
background: var(--surface);