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
+21 -6
View File
@@ -375,20 +375,26 @@ function updatePotVisualization() {
const potInnerBottom = 172;
const potInnerH = potInnerBottom - potInnerTop; // 142
const particlesEl = document.getElementById('grain-particles');
const particlesEl = document.getElementById('grain-particles');
const waterClipRect = document.getElementById('water-clip-rect');
const levelTickEl = document.getElementById('level-tick');
const levelLabelEl = document.getElementById('level-label');
if (sudEmpty || sudVolumen <= 0) {
waterFillEl.setAttribute('height', '0');
waterWaveEl.setAttribute('d', '');
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;
}
const fillFraction = Math.min(1, Math.max(0, currentStepWaterMass() / sudVolumen));
const waterH = fillFraction * potInnerH;
const waterTop = potInnerBottom - waterH;
const grainMass = currentStepGrainMass();
const utilizedVolume = currentStepWaterMass() + grainMass * 0.7;
const fillFraction = Math.min(1, Math.max(0, utilizedVolume / sudVolumen));
const waterH = fillFraction * potInnerH;
const waterTop = potInnerBottom - waterH;
waterFillEl.setAttribute('y', waterTop.toFixed(1));
waterFillEl.setAttribute('height', waterH.toFixed(1));
waterWaveEl.setAttribute('d', wavePathD(63, 177, waterTop, 3, 28));
@@ -398,7 +404,16 @@ function updatePotVisualization() {
waterClipRect.setAttribute('height', waterH.toFixed(1));
}
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 = '';
}
}