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

Fix fire gap: restore flame positions, increase clip topBuffer to 20px

Browse Source 
Flames back at y=177 (tips touching pot bottom at y=174), viewBox
back to 255. topBuffer raised from 10 to 20px to cover flicker
overshoot without clipping the tips.

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 23:02:11 +02:00
co-authored by Claude Sonnet 4.6
parent 7809cb1938
commit c92c41230d
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+3 -3
View File
@@ -294,8 +294,8 @@ function updateFireVisualization() {
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 fireBase = 248; // y of flame base (all paths end here)
const fireTip = 177; // y of tallest flame tip
const fireH = fireBase - fireTip; // 71px total flame height
if (heaterPowerIst <= 0) {
g.style.opacity = '0';
@@ -304,7 +304,7 @@ function updateFireVisualization() {
const intensity = Math.min(1, heaterPowerIst / heaterMaxPower);
// 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
const topBuffer = 20; // headroom for flicker scaleY overshoot (~12% of height)
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));
web/index.html
+5 -5
View File
@@ -47,7 +47,7 @@
</div>
<div id="pot-view">
<svg id="pot-svg" viewBox="0 0 290 265" xmlns="http://www.w3.org/2000/svg">
<svg id="pot-svg" viewBox="0 0 290 255" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="pot-clip">
<rect x="63" y="30" width="114" height="142"/>
@@ -59,7 +59,7 @@
<rect id="water-clip-rect" x="63" y="172" width="114" height="0"/>
</clipPath>
<clipPath id="fire-clip">
<rect id="fire-clip-rect" x="60" y="256" width="130" height="0"/>
<rect id="fire-clip-rect" x="60" y="248" width="130" height="0"/>
</clipPath>
<!-- Flame gradients: solid at base (y=1), transparent at tip (y=0) -->
<linearGradient id="fg-red" x1="0" y1="1" x2="0" y2="0">
@@ -80,15 +80,15 @@
<g id="fire-group" clip-path="url(#fire-clip)">
<!-- Outer red flame -->
<path id="flame-outer" class="flame"
d="M76,256 C79,223 92,200 101,216 C106,200 113,185 120,188 C127,185 134,200 139,216 C148,200 161,223 164,256 Z"
d="M76,248 C79,215 92,192 101,208 C106,192 113,177 120,180 C127,177 134,192 139,208 C148,192 161,215 164,248 Z"
fill="url(#fg-red)"/>
<!-- Middle orange flame -->
<path id="flame-mid" class="flame"
d="M88,256 C91,230 101,212 109,225 C113,212 118,199 122,203 C126,199 131,212 135,225 C143,212 153,230 156,256 Z"
d="M88,248 C91,222 101,204 109,217 C113,204 118,191 122,195 C126,191 131,204 135,217 C143,204 153,222 156,248 Z"
fill="url(#fg-orange)"/>
<!-- Inner yellow flame -->
<path id="flame-inner" class="flame"
d="M100,256 C102,238 110,223 116,232 C118,223 121,213 124,216 C127,213 130,223 132,232 C138,223 147,238 148,256 Z"
d="M100,248 C102,230 110,215 116,224 C118,215 121,205 124,208 C127,205 130,215 132,224 C138,215 147,230 148,248 Z"
fill="url(#fg-yellow)"/>
</g>