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

Add collapsible manual panel to give progress pane more room

Browse Source 
Toggle button (top-left of column, always same position) collapses the
manual panel from 16em to 2em with a CSS transition; state persists in
localStorage across reloads.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SH2D4LRuCnhLSzoYerAfJX
This commit is contained in:
jens
2026-06-28 16:31:43 +02:00
co-authored by Claude Sonnet 4.6
parent 2020207af0
commit d0d0c7d3ee
3 changed files with 84 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+12
View File
@@ -937,4 +937,16 @@ setInterval(() => {
stepPlates.forEach(applyLedColor);
}, 500);
const btnManualToggle = document.getElementById('btn-manual-toggle');
function setManualCollapsed(collapsed) {
document.getElementById('layout').classList.toggle('manual-collapsed', collapsed);
btnManualToggle.textContent = collapsed ? '▶' : '◄';
btnManualToggle.title = collapsed ? 'Expand manual panel' : 'Collapse manual panel';
localStorage.setItem('manualCollapsed', collapsed ? '1' : '0');
}
btnManualToggle.addEventListener('click', () => {
setManualCollapsed(!document.getElementById('layout').classList.contains('manual-collapsed'));
});
setManualCollapsed(localStorage.getItem('manualCollapsed') === '1');
updateSudActions();
web/index.html
+45 -42
View File
@@ -35,49 +35,52 @@
<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 class="checkbox-label">
<input type="checkbox" id="closed-loop" checked> Closed-loop
</label>
<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">
<button id="btn-manual-toggle" title="Collapse manual panel">&#9664;</button>
<div id="manual-panels">
<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>
<button id="btn-pot-reset">Reset</button>
<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 class="checkbox-label">
<input type="checkbox" id="closed-loop" checked> Closed-loop
</label>
<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>
</div>
</section>
web/style.css
+27
View File
@@ -182,6 +182,33 @@ header#connection-bar {
gap: 1.5em;
align-items: start;
margin-top: 1em;
transition: grid-template-columns 0.2s ease;
}
#layout.manual-collapsed {
grid-template-columns: 2em auto 1fr;
}
/* --- Manual column collapse --- */
#col-manual {
display: flex;
flex-direction: column;
overflow: hidden;
}
#btn-manual-toggle {
align-self: flex-start;
width: 2em;
height: 2em;
padding: 0;
font-size: 0.9em;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-bottom: 0.4em;
}
#layout.manual-collapsed #manual-panels {
display: none;
}
#col-progress { overflow-y: auto; }