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/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>