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

Fix fire scaling: clip upper flames, keep base constant

Browse Source 
Replace scaleY group transform with a dynamic clipPath that reveals
flame height proportional to heater power. Base at y=256 stays fixed;
only the tips grow with intensity. Includes flicker overshoot buffer.
Fire paths shifted +8px down, viewBox extended to 265.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DGKe8JzTM2Gr1fdx9wYXTi
This commit is contained in:
jens
2026-06-26 22:55:27 +02:00
co-authored by Claude Sonnet 4.6
parent 6bcf1fda0a
commit 7809cb1938
3 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+11 -3
View File
@@ -291,14 +291,22 @@ function updateStirrerVisualization() {
// --- Fire visualization ---
function updateFireVisualization() {
const g = document.getElementById('fire-group');
const g = document.getElementById('fire-group');
const clipRect = document.getElementById('fire-clip-rect');
if (!g) return;
const fireBase = 256; // y of flame base (all paths end here)
const fireTip = 185; // y of tallest flame tip
const fireH = fireBase - fireTip; // 71px total flame height
if (heaterPowerIst <= 0) {
g.style.opacity = '0';
g.style.transform = 'scaleY(0.3)';
clipRect.setAttribute('height', '0');
} else {
const intensity = Math.min(1, heaterPowerIst / heaterMaxPower);
g.style.transform = `scaleY(${(0.45 + 0.55 * intensity).toFixed(2)})`;
// Always show the lower 35% (base), scale upper 65% with intensity
const visibleH = (0.35 + 0.65 * intensity) * fireH;
const topBuffer = 10; // headroom for flicker scaleY overshoot
clipRect.setAttribute('y', (fireBase - visibleH - topBuffer).toFixed(1));
clipRect.setAttribute('height', (visibleH + topBuffer + 2).toFixed(1));
g.style.opacity = String((0.6 + 0.4 * intensity).toFixed(2));
}
}