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

Add utilized volume level indicator and fix water fill level

Browse Source 
Water fill height now reflects water_mass + grain_mass*0.7 (grain
displacement). A small blue tick and label on the left pot wall shows
the utilized volume in litres, hidden when the pot is unconfigured.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JLR2133M2PyjiYq584i2G7
This commit is contained in:
jens
2026-06-27 09:04:04 +02:00
co-authored by Claude Sonnet 4.6
parent 0c30ea5dd4
commit fe44c870a7
2 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+17 -2
View File
@@ -377,16 +377,22 @@ function updatePotVisualization() {
const particlesEl = document.getElementById('grain-particles'); const particlesEl = document.getElementById('grain-particles');
const waterClipRect = document.getElementById('water-clip-rect'); const waterClipRect = document.getElementById('water-clip-rect');
const levelTickEl = document.getElementById('level-tick');
const levelLabelEl = document.getElementById('level-label');
if (sudEmpty || sudVolumen <= 0) { if (sudEmpty || sudVolumen <= 0) {
waterFillEl.setAttribute('height', '0'); waterFillEl.setAttribute('height', '0');
waterWaveEl.setAttribute('d', ''); waterWaveEl.setAttribute('d', '');
if (waterClipRect) waterClipRect.setAttribute('height', '0'); if (waterClipRect) waterClipRect.setAttribute('height', '0');
if (particlesEl) particlesEl.style.opacity = '0'; if (particlesEl) particlesEl.style.opacity = '0';
if (levelTickEl) levelTickEl.style.display = 'none';
if (levelLabelEl) levelLabelEl.style.display = 'none';
return; return;
} }
const fillFraction = Math.min(1, Math.max(0, currentStepWaterMass() / sudVolumen)); const grainMass = currentStepGrainMass();
const utilizedVolume = currentStepWaterMass() + grainMass * 0.7;
const fillFraction = Math.min(1, Math.max(0, utilizedVolume / sudVolumen));
const waterH = fillFraction * potInnerH; const waterH = fillFraction * potInnerH;
const waterTop = potInnerBottom - waterH; const waterTop = potInnerBottom - waterH;
waterFillEl.setAttribute('y', waterTop.toFixed(1)); waterFillEl.setAttribute('y', waterTop.toFixed(1));
@@ -398,7 +404,16 @@ function updatePotVisualization() {
waterClipRect.setAttribute('height', waterH.toFixed(1)); waterClipRect.setAttribute('height', waterH.toFixed(1));
} }
if (particlesEl) { if (particlesEl) {
particlesEl.style.opacity = currentStepGrainMass() > 0 ? '1' : '0'; particlesEl.style.opacity = grainMass > 0 ? '1' : '0';
}
if (levelTickEl && levelLabelEl) {
const ty = waterTop.toFixed(1);
levelTickEl.setAttribute('y1', ty);
levelTickEl.setAttribute('y2', ty);
levelLabelEl.setAttribute('y', ty);
levelLabelEl.textContent = utilizedVolume.toFixed(1) + ' L';
levelTickEl.style.display = '';
levelLabelEl.style.display = '';
} }
} }
web/index.html
+6
View File
@@ -144,6 +144,12 @@
<line x1="60" y1="174" x2="180" y2="174" stroke="#bbb" stroke-width="4" stroke-linecap="round"/> <line x1="60" y1="174" x2="180" y2="174" stroke="#bbb" stroke-width="4" stroke-linecap="round"/>
<line x1="60" y1="28" x2="180" y2="28" stroke="#bbb" stroke-width="4" stroke-linecap="round"/> <line x1="60" y1="28" x2="180" y2="28" stroke="#bbb" stroke-width="4" stroke-linecap="round"/>
<!-- Utilized volume level indicator (JS-positioned) -->
<line id="level-tick" x1="52" y1="172" x2="60" y2="172"
stroke="#4a9ed8" stroke-width="1.5" stroke-linecap="round" style="display:none"/>
<text id="level-label" x="50" y="172" font-size="8" fill="#4a9ed8"
dominant-baseline="middle" text-anchor="end" style="display:none">0.0 L</text>
<!-- Stirrer blades (inside pot) --> <!-- Stirrer blades (inside pot) -->
<g id="stirrer-blades" clip-path="url(#pot-clip)"> <g id="stirrer-blades" clip-path="url(#pot-clip)">
<rect x="87" y="133" width="31" height="5" fill="#666" rx="1"/> <rect x="87" y="133" width="31" height="5" fill="#666" rx="1"/>