german/houseplan-card
1
0
Fork 0
mirror of https://github.com/Matysh/houseplan-card synced 2026-07-31 16:38:31 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix v1.36.3: door sectors no longer punch dark wedges inside the room

Browse Source 
- room outline + sectors as separate clipPath children (always union)
  instead of subpaths of one nonzero path where opposite windings
  cancelled the overlap; smoke asserts one contour per path
- TESTING/CHANGELOG same-commit
This commit is contained in:
Matysh
2026-07-23 13:57:44 +03:00
parent 81ea5c0f3c
commit 8330b48cf3
10 changed files with 39 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
custom_components/houseplan/const.py
+1 -1
View File
@@ -11,7 +11,7 @@ PLANS_DIR = "houseplan/plans" # relative to the HA configuration directory
FILES_URL = "/houseplan_files/files"
FILES_DIR = "houseplan/files"
CONF_ADMIN_ONLY = "admin_only"
VERSION = "1.36.2"
VERSION = "1.36.3"
DEFAULT_CONFIG: dict = {
"spaces": [],
custom_components/houseplan/frontend/houseplan-card.js
+3 -3
View File
@@ -1448,14 +1448,14 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
<input type="range" min="0" max="100" .value=${String(Math.round(100*i.a))}
@input=${e=>this._setFillColor(t,{a:Number(e.target.value)/100})} />
<span class="opv">${Math.round(100*i.a)}%</span>
</div>`}get _glowRadiusCm(){const t=Number(this._settings.glow_radius_cm);return Number.isFinite(t)&&t>0?t:300}get _imperial(){return"mi"===this.hass?.config?.unit_system?.length}get _glowRadiusPlaceholder(){const t=this._glowRadiusCm;return this._imperial?String(Math.round(t/30.48*10)/10):String(t/100)}_renderGlowLayer(t){const e=this._fillColors,i=this._glowRadiusCm/this._cellCm*this._gridPitch,s=this._gridPitch,o=t.rooms.map(t=>({r:t,poly:we(t)})).filter(t=>!!t.poly),n=this._openingsR.filter(t=>"door"===t.type),r=[];for(const a of this._devices){if(a.space!==t.id)continue;const l=a.entities.find(t=>t.startsWith("light.")&&"on"===this.hass.states[t]?.state);if(!l)continue;const c=ei(this.hass.states[l],e.glow_light.c);if(!c)continue;const h=Number(a.marker?.glow_radius_cm),p=Number.isFinite(h)&&h>0?h/this._cellCm*this._gridPitch:i,d=this._pos(a),u=[...o].reverse().find(t=>this._pointInRoom([d.x,d.y],t.r));let _=null;if(u){const t=["M "+u.poly.map(t=>t[0]+" "+t[1]).join(" L ")+" Z"];for(const e of n){const i=Me([e.rx,e.ry],u.poly);if(!i||Math.hypot(i[0]-e.rx,i[1]-e.ry)>.75*s)continue;const n=e.angle*Math.PI/180,r=Math.cos(n)*e.rlen/2,a=Math.sin(n)*e.rlen/2,l=o.filter(t=>t!==u).map(t=>t.poly);if(!si([e.rx,e.ry],e.angle,[d.x,d.y],l,.6*s))continue;const c=ii([d.x,d.y],[e.rx-r,e.ry-a],[e.rx+r,e.ry+a],p);c&&t.push("M "+c.map(t=>t[0]+" "+t[1]).join(" L ")+" Z")}_=t.join(" ")}r.push({pos:d,c:c.c,alpha:e.glow_light.a*c.bri,clip:_,r:p})}return r.length?j`<defs>
</div>`}get _glowRadiusCm(){const t=Number(this._settings.glow_radius_cm);return Number.isFinite(t)&&t>0?t:300}get _imperial(){return"mi"===this.hass?.config?.unit_system?.length}get _glowRadiusPlaceholder(){const t=this._glowRadiusCm;return this._imperial?String(Math.round(t/30.48*10)/10):String(t/100)}_renderGlowLayer(t){const e=this._fillColors,i=this._glowRadiusCm/this._cellCm*this._gridPitch,s=this._gridPitch,o=t.rooms.map(t=>({r:t,poly:we(t)})).filter(t=>!!t.poly),n=this._openingsR.filter(t=>"door"===t.type),r=[];for(const a of this._devices){if(a.space!==t.id)continue;const l=a.entities.find(t=>t.startsWith("light.")&&"on"===this.hass.states[t]?.state);if(!l)continue;const c=ei(this.hass.states[l],e.glow_light.c);if(!c)continue;const h=Number(a.marker?.glow_radius_cm),p=Number.isFinite(h)&&h>0?h/this._cellCm*this._gridPitch:i,d=this._pos(a),u=[...o].reverse().find(t=>this._pointInRoom([d.x,d.y],t.r));let _=null;if(u){const t=["M "+u.poly.map(t=>t[0]+" "+t[1]).join(" L ")+" Z"];for(const e of n){const i=Me([e.rx,e.ry],u.poly);if(!i||Math.hypot(i[0]-e.rx,i[1]-e.ry)>.75*s)continue;const n=e.angle*Math.PI/180,r=Math.cos(n)*e.rlen/2,a=Math.sin(n)*e.rlen/2,l=o.filter(t=>t!==u).map(t=>t.poly);if(!si([e.rx,e.ry],e.angle,[d.x,d.y],l,.6*s))continue;const c=ii([d.x,d.y],[e.rx-r,e.ry-a],[e.rx+r,e.ry+a],p);c&&t.push("M "+c.map(t=>t[0]+" "+t[1]).join(" L ")+" Z")}_=t}r.push({pos:d,c:c.c,alpha:e.glow_light.a*c.bri,clip:_,r:p})}return r.length?j`<defs>
${r.map((t,e)=>j`
<radialGradient id="hp-glow-${e}">
<stop offset="0%" stop-color="${t.c}" stop-opacity="${t.alpha.toFixed(3)}"></stop>
<stop offset="55%" stop-color="${t.c}" stop-opacity="${(.45*t.alpha).toFixed(3)}"></stop>
<stop offset="100%" stop-color="${t.c}" stop-opacity="0"></stop>
</radialGradient>
${t.clip?j`<clipPath id="hp-glowclip-${e}"><path d="${t.clip}"></path></clipPath>`:W}`)}
${t.clip?j`<clipPath id="hp-glowclip-${e}">${t.clip.map(t=>j`<path d="${t}"></path>`)}</clipPath>`:W}`)}
</defs>
<g class="glowlayer">
${r.map((t,e)=>j`<circle cx="${t.pos.x}" cy="${t.pos.y}" r="${t.r}"
@@ -2195,4 +2195,4 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
</button>
</div>
</div>
</div>`}}ji.properties={hass:{attribute:!1},_config:{state:!0},_space:{state:!0},_layout:{state:!0},_devices:{state:!0},_tip:{state:!0},_selId:{state:!0},_toast:{state:!0},_serverCfg:{state:!0},_mode:{state:!0},_tool:{state:!0},_path:{state:!0},_cursorPt:{state:!0},_mergeSel:{state:!0},_openingDialog:{state:!0},_openingInfo:{state:!0},_mergeDialog:{state:!0},_splitSel:{state:!0},_decorTool:{state:!0},_decorStyle:{state:!0},_decorDraft:{state:!0},_decorSel:{state:!0},_decorTextDialog:{state:!0},_areaSel:{state:!0},_nameSel:{state:!0},_roomDialog:{state:!0},_spaceDialog:{state:!0},_infoCard:{state:!0},_rulesDialog:{state:!0},_settingsDialog:{state:!0},_importDialog:{state:!0},_markerDialog:{state:!0},_zoom:{state:!0},_view:{state:!0}},ji.styles=$i,customElements.get("houseplan-card")||customElements.define("houseplan-card",ji),window.customCards=window.customCards||[],window.customCards.find(t=>"houseplan-card"===t.type)||window.customCards.push({type:"houseplan-card",name:"House Plan Card",description:"Interactive house plan: spaces, rooms and devices with live states and drag layout."}),console.info("%c HOUSEPLAN-CARD %c v1.36.2 ","background:#3ea6ff;color:#04121f;font-weight:700","");
</div>`}}ji.properties={hass:{attribute:!1},_config:{state:!0},_space:{state:!0},_layout:{state:!0},_devices:{state:!0},_tip:{state:!0},_selId:{state:!0},_toast:{state:!0},_serverCfg:{state:!0},_mode:{state:!0},_tool:{state:!0},_path:{state:!0},_cursorPt:{state:!0},_mergeSel:{state:!0},_openingDialog:{state:!0},_openingInfo:{state:!0},_mergeDialog:{state:!0},_splitSel:{state:!0},_decorTool:{state:!0},_decorStyle:{state:!0},_decorDraft:{state:!0},_decorSel:{state:!0},_decorTextDialog:{state:!0},_areaSel:{state:!0},_nameSel:{state:!0},_roomDialog:{state:!0},_spaceDialog:{state:!0},_infoCard:{state:!0},_rulesDialog:{state:!0},_settingsDialog:{state:!0},_importDialog:{state:!0},_markerDialog:{state:!0},_zoom:{state:!0},_view:{state:!0}},ji.styles=$i,customElements.get("houseplan-card")||customElements.define("houseplan-card",ji),window.customCards=window.customCards||[],window.customCards.find(t=>"houseplan-card"===t.type)||window.customCards.push({type:"houseplan-card",name:"House Plan Card",description:"Interactive house plan: spaces, rooms and devices with live states and drag layout."}),console.info("%c HOUSEPLAN-CARD %c v1.36.3 ","background:#3ea6ff;color:#04121f;font-weight:700","");
custom_components/houseplan/manifest.json
+1 -1
View File
@@ -16,5 +16,5 @@
"issue_tracker": "https://github.com/Matysh/houseplan-card/issues",
"requirements": [],
"single_config_entry": true,
"version": "1.36.2"
"version": "1.36.3"
}
demo/smoke_glow.mjs
+8 -4
View File
@@ -63,16 +63,20 @@ const res = await page.evaluate(async () => {
// радиус 6 м, чтобы дверь заведомо была в зоне досягаемости
c._serverCfg = { ...c._serverCfg, settings: { ...(c._serverCfg.settings || {}), glow_radius_cm: 600 } };
c.requestUpdate(); await c.updateComplete;
const clips = [...sr().querySelectorAll('defs clipPath[id^="hp-glowclip"] path')];
out.sectorAdded = clips.some((p) => ((p.getAttribute('d') || '').match(/M /g) || []).length >= 2);
// теперь каждый под-контур — отдельный path внутри clipPath
const clipEls = [...sr().querySelectorAll('defs clipPath[id^="hp-glowclip"]')];
out.sectorAdded = clipEls.some((cp) => cp.querySelectorAll('path').length >= 2);
// и сектор в том же направлении обхода не выедает комнату: каждый path — один контур
out.singleSubpathPerPath = clipEls.every((cp) => [...cp.querySelectorAll('path')]
.every((p) => ((p.getAttribute('d') || '').match(/M /g) || []).length === 1));
// у входной двери (наружу) сектора нет: дверь на внешней стене r1 (x=min)
const minX = Math.min(...poly1.map((p) => p[0]));
const yMid = (Math.min(...poly1.map((p) => p[1])) + Math.max(...poly1.map((p) => p[1]))) / 2;
c._serverCfg = { ...c._serverCfg, spaces: c._serverCfg.spaces.map((s) => s.id !== spId ? s : ({
...s, openings: [{ id: 'gd2', type: 'door', x: minX / 1000, y: yMid / (1000 / aspect), angle: 90, length: 0.09 }] })) };
c.requestUpdate(); await c.updateComplete;
const clips2 = [...sr().querySelectorAll('defs clipPath[id^="hp-glowclip"] path')];
out.entranceNoSector = clips2.every((p) => ((p.getAttribute('d') || '').match(/M /g) || []).length === 1);
const clipEls2 = [...sr().querySelectorAll('defs clipPath[id^="hp-glowclip"]')];
out.entranceNoSector = clipEls2.every((cp) => cp.querySelectorAll('path').length === 1);
// 7а) персональный радиус источника перекрывает глобальный
const litMarkerId = litLight.id;
c._serverCfg = { ...c._serverCfg, markers: [
demo/srv/assets/houseplan-card.js
+3 -3
View File
@@ -1448,14 +1448,14 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
<input type="range" min="0" max="100" .value=${String(Math.round(100*i.a))}
@input=${e=>this._setFillColor(t,{a:Number(e.target.value)/100})} />
<span class="opv">${Math.round(100*i.a)}%</span>
</div>`}get _glowRadiusCm(){const t=Number(this._settings.glow_radius_cm);return Number.isFinite(t)&&t>0?t:300}get _imperial(){return"mi"===this.hass?.config?.unit_system?.length}get _glowRadiusPlaceholder(){const t=this._glowRadiusCm;return this._imperial?String(Math.round(t/30.48*10)/10):String(t/100)}_renderGlowLayer(t){const e=this._fillColors,i=this._glowRadiusCm/this._cellCm*this._gridPitch,s=this._gridPitch,o=t.rooms.map(t=>({r:t,poly:we(t)})).filter(t=>!!t.poly),n=this._openingsR.filter(t=>"door"===t.type),r=[];for(const a of this._devices){if(a.space!==t.id)continue;const l=a.entities.find(t=>t.startsWith("light.")&&"on"===this.hass.states[t]?.state);if(!l)continue;const c=ei(this.hass.states[l],e.glow_light.c);if(!c)continue;const h=Number(a.marker?.glow_radius_cm),p=Number.isFinite(h)&&h>0?h/this._cellCm*this._gridPitch:i,d=this._pos(a),u=[...o].reverse().find(t=>this._pointInRoom([d.x,d.y],t.r));let _=null;if(u){const t=["M "+u.poly.map(t=>t[0]+" "+t[1]).join(" L ")+" Z"];for(const e of n){const i=Me([e.rx,e.ry],u.poly);if(!i||Math.hypot(i[0]-e.rx,i[1]-e.ry)>.75*s)continue;const n=e.angle*Math.PI/180,r=Math.cos(n)*e.rlen/2,a=Math.sin(n)*e.rlen/2,l=o.filter(t=>t!==u).map(t=>t.poly);if(!si([e.rx,e.ry],e.angle,[d.x,d.y],l,.6*s))continue;const c=ii([d.x,d.y],[e.rx-r,e.ry-a],[e.rx+r,e.ry+a],p);c&&t.push("M "+c.map(t=>t[0]+" "+t[1]).join(" L ")+" Z")}_=t.join(" ")}r.push({pos:d,c:c.c,alpha:e.glow_light.a*c.bri,clip:_,r:p})}return r.length?j`<defs>
</div>`}get _glowRadiusCm(){const t=Number(this._settings.glow_radius_cm);return Number.isFinite(t)&&t>0?t:300}get _imperial(){return"mi"===this.hass?.config?.unit_system?.length}get _glowRadiusPlaceholder(){const t=this._glowRadiusCm;return this._imperial?String(Math.round(t/30.48*10)/10):String(t/100)}_renderGlowLayer(t){const e=this._fillColors,i=this._glowRadiusCm/this._cellCm*this._gridPitch,s=this._gridPitch,o=t.rooms.map(t=>({r:t,poly:we(t)})).filter(t=>!!t.poly),n=this._openingsR.filter(t=>"door"===t.type),r=[];for(const a of this._devices){if(a.space!==t.id)continue;const l=a.entities.find(t=>t.startsWith("light.")&&"on"===this.hass.states[t]?.state);if(!l)continue;const c=ei(this.hass.states[l],e.glow_light.c);if(!c)continue;const h=Number(a.marker?.glow_radius_cm),p=Number.isFinite(h)&&h>0?h/this._cellCm*this._gridPitch:i,d=this._pos(a),u=[...o].reverse().find(t=>this._pointInRoom([d.x,d.y],t.r));let _=null;if(u){const t=["M "+u.poly.map(t=>t[0]+" "+t[1]).join(" L ")+" Z"];for(const e of n){const i=Me([e.rx,e.ry],u.poly);if(!i||Math.hypot(i[0]-e.rx,i[1]-e.ry)>.75*s)continue;const n=e.angle*Math.PI/180,r=Math.cos(n)*e.rlen/2,a=Math.sin(n)*e.rlen/2,l=o.filter(t=>t!==u).map(t=>t.poly);if(!si([e.rx,e.ry],e.angle,[d.x,d.y],l,.6*s))continue;const c=ii([d.x,d.y],[e.rx-r,e.ry-a],[e.rx+r,e.ry+a],p);c&&t.push("M "+c.map(t=>t[0]+" "+t[1]).join(" L ")+" Z")}_=t}r.push({pos:d,c:c.c,alpha:e.glow_light.a*c.bri,clip:_,r:p})}return r.length?j`<defs>
${r.map((t,e)=>j`
<radialGradient id="hp-glow-${e}">
<stop offset="0%" stop-color="${t.c}" stop-opacity="${t.alpha.toFixed(3)}"></stop>
<stop offset="55%" stop-color="${t.c}" stop-opacity="${(.45*t.alpha).toFixed(3)}"></stop>
<stop offset="100%" stop-color="${t.c}" stop-opacity="0"></stop>
</radialGradient>
${t.clip?j`<clipPath id="hp-glowclip-${e}"><path d="${t.clip}"></path></clipPath>`:W}`)}
${t.clip?j`<clipPath id="hp-glowclip-${e}">${t.clip.map(t=>j`<path d="${t}"></path>`)}</clipPath>`:W}`)}
</defs>
<g class="glowlayer">
${r.map((t,e)=>j`<circle cx="${t.pos.x}" cy="${t.pos.y}" r="${t.r}"
@@ -2195,4 +2195,4 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
</button>
</div>
</div>
</div>`}}ji.properties={hass:{attribute:!1},_config:{state:!0},_space:{state:!0},_layout:{state:!0},_devices:{state:!0},_tip:{state:!0},_selId:{state:!0},_toast:{state:!0},_serverCfg:{state:!0},_mode:{state:!0},_tool:{state:!0},_path:{state:!0},_cursorPt:{state:!0},_mergeSel:{state:!0},_openingDialog:{state:!0},_openingInfo:{state:!0},_mergeDialog:{state:!0},_splitSel:{state:!0},_decorTool:{state:!0},_decorStyle:{state:!0},_decorDraft:{state:!0},_decorSel:{state:!0},_decorTextDialog:{state:!0},_areaSel:{state:!0},_nameSel:{state:!0},_roomDialog:{state:!0},_spaceDialog:{state:!0},_infoCard:{state:!0},_rulesDialog:{state:!0},_settingsDialog:{state:!0},_importDialog:{state:!0},_markerDialog:{state:!0},_zoom:{state:!0},_view:{state:!0}},ji.styles=$i,customElements.get("houseplan-card")||customElements.define("houseplan-card",ji),window.customCards=window.customCards||[],window.customCards.find(t=>"houseplan-card"===t.type)||window.customCards.push({type:"houseplan-card",name:"House Plan Card",description:"Interactive house plan: spaces, rooms and devices with live states and drag layout."}),console.info("%c HOUSEPLAN-CARD %c v1.36.2 ","background:#3ea6ff;color:#04121f;font-weight:700","");
</div>`}}ji.properties={hass:{attribute:!1},_config:{state:!0},_space:{state:!0},_layout:{state:!0},_devices:{state:!0},_tip:{state:!0},_selId:{state:!0},_toast:{state:!0},_serverCfg:{state:!0},_mode:{state:!0},_tool:{state:!0},_path:{state:!0},_cursorPt:{state:!0},_mergeSel:{state:!0},_openingDialog:{state:!0},_openingInfo:{state:!0},_mergeDialog:{state:!0},_splitSel:{state:!0},_decorTool:{state:!0},_decorStyle:{state:!0},_decorDraft:{state:!0},_decorSel:{state:!0},_decorTextDialog:{state:!0},_areaSel:{state:!0},_nameSel:{state:!0},_roomDialog:{state:!0},_spaceDialog:{state:!0},_infoCard:{state:!0},_rulesDialog:{state:!0},_settingsDialog:{state:!0},_importDialog:{state:!0},_markerDialog:{state:!0},_zoom:{state:!0},_view:{state:!0}},ji.styles=$i,customElements.get("houseplan-card")||customElements.define("houseplan-card",ji),window.customCards=window.customCards||[],window.customCards.find(t=>"houseplan-card"===t.type)||window.customCards.push({type:"houseplan-card",name:"House Plan Card",description:"Interactive house plan: spaces, rooms and devices with live states and drag layout."}),console.info("%c HOUSEPLAN-CARD %c v1.36.3 ","background:#3ea6ff;color:#04121f;font-weight:700","");
dist/houseplan-card.js
Vendored
+3 -3
View File
@@ -1448,14 +1448,14 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
<input type="range" min="0" max="100" .value=${String(Math.round(100*i.a))}
@input=${e=>this._setFillColor(t,{a:Number(e.target.value)/100})} />
<span class="opv">${Math.round(100*i.a)}%</span>
</div>`}get _glowRadiusCm(){const t=Number(this._settings.glow_radius_cm);return Number.isFinite(t)&&t>0?t:300}get _imperial(){return"mi"===this.hass?.config?.unit_system?.length}get _glowRadiusPlaceholder(){const t=this._glowRadiusCm;return this._imperial?String(Math.round(t/30.48*10)/10):String(t/100)}_renderGlowLayer(t){const e=this._fillColors,i=this._glowRadiusCm/this._cellCm*this._gridPitch,s=this._gridPitch,o=t.rooms.map(t=>({r:t,poly:we(t)})).filter(t=>!!t.poly),n=this._openingsR.filter(t=>"door"===t.type),r=[];for(const a of this._devices){if(a.space!==t.id)continue;const l=a.entities.find(t=>t.startsWith("light.")&&"on"===this.hass.states[t]?.state);if(!l)continue;const c=ei(this.hass.states[l],e.glow_light.c);if(!c)continue;const h=Number(a.marker?.glow_radius_cm),p=Number.isFinite(h)&&h>0?h/this._cellCm*this._gridPitch:i,d=this._pos(a),u=[...o].reverse().find(t=>this._pointInRoom([d.x,d.y],t.r));let _=null;if(u){const t=["M "+u.poly.map(t=>t[0]+" "+t[1]).join(" L ")+" Z"];for(const e of n){const i=Me([e.rx,e.ry],u.poly);if(!i||Math.hypot(i[0]-e.rx,i[1]-e.ry)>.75*s)continue;const n=e.angle*Math.PI/180,r=Math.cos(n)*e.rlen/2,a=Math.sin(n)*e.rlen/2,l=o.filter(t=>t!==u).map(t=>t.poly);if(!si([e.rx,e.ry],e.angle,[d.x,d.y],l,.6*s))continue;const c=ii([d.x,d.y],[e.rx-r,e.ry-a],[e.rx+r,e.ry+a],p);c&&t.push("M "+c.map(t=>t[0]+" "+t[1]).join(" L ")+" Z")}_=t.join(" ")}r.push({pos:d,c:c.c,alpha:e.glow_light.a*c.bri,clip:_,r:p})}return r.length?j`<defs>
</div>`}get _glowRadiusCm(){const t=Number(this._settings.glow_radius_cm);return Number.isFinite(t)&&t>0?t:300}get _imperial(){return"mi"===this.hass?.config?.unit_system?.length}get _glowRadiusPlaceholder(){const t=this._glowRadiusCm;return this._imperial?String(Math.round(t/30.48*10)/10):String(t/100)}_renderGlowLayer(t){const e=this._fillColors,i=this._glowRadiusCm/this._cellCm*this._gridPitch,s=this._gridPitch,o=t.rooms.map(t=>({r:t,poly:we(t)})).filter(t=>!!t.poly),n=this._openingsR.filter(t=>"door"===t.type),r=[];for(const a of this._devices){if(a.space!==t.id)continue;const l=a.entities.find(t=>t.startsWith("light.")&&"on"===this.hass.states[t]?.state);if(!l)continue;const c=ei(this.hass.states[l],e.glow_light.c);if(!c)continue;const h=Number(a.marker?.glow_radius_cm),p=Number.isFinite(h)&&h>0?h/this._cellCm*this._gridPitch:i,d=this._pos(a),u=[...o].reverse().find(t=>this._pointInRoom([d.x,d.y],t.r));let _=null;if(u){const t=["M "+u.poly.map(t=>t[0]+" "+t[1]).join(" L ")+" Z"];for(const e of n){const i=Me([e.rx,e.ry],u.poly);if(!i||Math.hypot(i[0]-e.rx,i[1]-e.ry)>.75*s)continue;const n=e.angle*Math.PI/180,r=Math.cos(n)*e.rlen/2,a=Math.sin(n)*e.rlen/2,l=o.filter(t=>t!==u).map(t=>t.poly);if(!si([e.rx,e.ry],e.angle,[d.x,d.y],l,.6*s))continue;const c=ii([d.x,d.y],[e.rx-r,e.ry-a],[e.rx+r,e.ry+a],p);c&&t.push("M "+c.map(t=>t[0]+" "+t[1]).join(" L ")+" Z")}_=t}r.push({pos:d,c:c.c,alpha:e.glow_light.a*c.bri,clip:_,r:p})}return r.length?j`<defs>
${r.map((t,e)=>j`
<radialGradient id="hp-glow-${e}">
<stop offset="0%" stop-color="${t.c}" stop-opacity="${t.alpha.toFixed(3)}"></stop>
<stop offset="55%" stop-color="${t.c}" stop-opacity="${(.45*t.alpha).toFixed(3)}"></stop>
<stop offset="100%" stop-color="${t.c}" stop-opacity="0"></stop>
</radialGradient>
${t.clip?j`<clipPath id="hp-glowclip-${e}"><path d="${t.clip}"></path></clipPath>`:W}`)}
${t.clip?j`<clipPath id="hp-glowclip-${e}">${t.clip.map(t=>j`<path d="${t}"></path>`)}</clipPath>`:W}`)}
</defs>
<g class="glowlayer">
${r.map((t,e)=>j`<circle cx="${t.pos.x}" cy="${t.pos.y}" r="${t.r}"
@@ -2195,4 +2195,4 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
</button>
</div>
</div>
</div>`}}ji.properties={hass:{attribute:!1},_config:{state:!0},_space:{state:!0},_layout:{state:!0},_devices:{state:!0},_tip:{state:!0},_selId:{state:!0},_toast:{state:!0},_serverCfg:{state:!0},_mode:{state:!0},_tool:{state:!0},_path:{state:!0},_cursorPt:{state:!0},_mergeSel:{state:!0},_openingDialog:{state:!0},_openingInfo:{state:!0},_mergeDialog:{state:!0},_splitSel:{state:!0},_decorTool:{state:!0},_decorStyle:{state:!0},_decorDraft:{state:!0},_decorSel:{state:!0},_decorTextDialog:{state:!0},_areaSel:{state:!0},_nameSel:{state:!0},_roomDialog:{state:!0},_spaceDialog:{state:!0},_infoCard:{state:!0},_rulesDialog:{state:!0},_settingsDialog:{state:!0},_importDialog:{state:!0},_markerDialog:{state:!0},_zoom:{state:!0},_view:{state:!0}},ji.styles=$i,customElements.get("houseplan-card")||customElements.define("houseplan-card",ji),window.customCards=window.customCards||[],window.customCards.find(t=>"houseplan-card"===t.type)||window.customCards.push({type:"houseplan-card",name:"House Plan Card",description:"Interactive house plan: spaces, rooms and devices with live states and drag layout."}),console.info("%c HOUSEPLAN-CARD %c v1.36.2 ","background:#3ea6ff;color:#04121f;font-weight:700","");
</div>`}}ji.properties={hass:{attribute:!1},_config:{state:!0},_space:{state:!0},_layout:{state:!0},_devices:{state:!0},_tip:{state:!0},_selId:{state:!0},_toast:{state:!0},_serverCfg:{state:!0},_mode:{state:!0},_tool:{state:!0},_path:{state:!0},_cursorPt:{state:!0},_mergeSel:{state:!0},_openingDialog:{state:!0},_openingInfo:{state:!0},_mergeDialog:{state:!0},_splitSel:{state:!0},_decorTool:{state:!0},_decorStyle:{state:!0},_decorDraft:{state:!0},_decorSel:{state:!0},_decorTextDialog:{state:!0},_areaSel:{state:!0},_nameSel:{state:!0},_roomDialog:{state:!0},_spaceDialog:{state:!0},_infoCard:{state:!0},_rulesDialog:{state:!0},_settingsDialog:{state:!0},_importDialog:{state:!0},_markerDialog:{state:!0},_zoom:{state:!0},_view:{state:!0}},ji.styles=$i,customElements.get("houseplan-card")||customElements.define("houseplan-card",ji),window.customCards=window.customCards||[],window.customCards.find(t=>"houseplan-card"===t.type)||window.customCards.push({type:"houseplan-card",name:"House Plan Card",description:"Interactive house plan: spaces, rooms and devices with live states and drag layout."}),console.info("%c HOUSEPLAN-CARD %c v1.36.3 ","background:#3ea6ff;color:#04121f;font-weight:700","");
docs/CHANGELOG.md
+7
View File
@@ -1,5 +1,12 @@
# Changelog
## v1.36.3 — 2026-07-23
- Glow: fixed dark wedges appearing INSIDE a lit room near some doorways.
The room outline and the door sectors were subpaths of a single clip path;
with opposite winding directions the nonzero fill rule cancelled their
overlap. Each contour is now its own clipPath child (children always
union), so sectors only ever ADD light.
## v1.36.2 — 2026-07-23
- **Glow radius is now per source**: every device dialog gained a "Glow
radius" field (in your HA units; empty = the global default from general
docs/TESTING.md
+3
View File
@@ -140,6 +140,9 @@ Run the *core flows* (marked ★ below) in each environment at least once per mi
(explicit ripple color still wins); off/white lights unchanged [auto]
- [ ] Alarm pulse (v1.27.0): leak/smoke/gas/CO/siren in 'on' pulse a red ring over any
display mode; clears on 'off'; unavailable never alarms [auto]; reduced-motion static
- [ ] Sector wedge fix (v1.36.3): door sectors never darken the light INSIDE
the room — room outline and sectors are separate clipPath children
(union), not subpaths of one nonzero path [auto]
- [ ] Per-source glow radius (v1.36.2): the device dialog has a "Glow radius"
field (HA units; empty = general-settings default shown as placeholder);
an override changes that source's pool and door sectors only [auto]
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "houseplan-card",
"version": "1.36.2",
"version": "1.36.3",
"description": "Interactive house plan Lovelace card for Home Assistant",
"license": "MIT",
"type": "module",
src/houseplan-card.ts
+9 -5
View File
@@ -32,7 +32,7 @@ import './space-card';
import { cardStyles } from './styles';
import { langOf, t, type I18nKey } from './i18n';
const CARD_VERSION = '1.36.2';
const CARD_VERSION = '1.36.3';
const LS_KEY = 'houseplan_card_layout_v1';
const LS_CFG = 'houseplan_card_cfg_v1'; // cache of the server config+layout for instant rendering
const LS_ZOOM = 'houseplan_card_zoom_v1';
@@ -2683,7 +2683,7 @@ class HouseplanCard extends LitElement {
.map((r) => ({ r, poly: roomPoly(r) }))
.filter((x): x is { r: RoomCfg; poly: number[][] } => !!x.poly);
const doors = this._openingsR.filter((o) => o.type === 'door');
const spots: { pos: { x: number; y: number }; c: string; alpha: number; clip: string | null; r: number }[] = [];
const spots: { pos: { x: number; y: number }; c: string; alpha: number; clip: string[] | null; r: number }[] = [];
for (const d of this._devices) {
if (d.space !== space.id) continue;
const lightEid = d.entities.find(
@@ -2698,7 +2698,7 @@ class HouseplanCard extends LitElement {
const pos = this._pos(d);
// innermost room under the source (islands win — reverse order)
const home = [...polys].reverse().find((x) => this._pointInRoom([pos.x, pos.y], x.r));
let clip: string | null = null;
let clip: string[] | null = null;
if (home) {
const shapes: string[] = ['M ' + home.poly.map((p) => p[0] + ' ' + p[1]).join(' L ') + ' Z'];
// doorways of this room spill light into neighbouring rooms only
@@ -2713,7 +2713,11 @@ class HouseplanCard extends LitElement {
const sector = doorSector([pos.x, pos.y], [o.rx - dx, o.ry - dy], [o.rx + dx, o.ry + dy], R);
if (sector) shapes.push('M ' + sector.map((p) => p[0] + ' ' + p[1]).join(' L ') + ' Z');
}
clip = shapes.join(' ');
// IMPORTANT: separate <path> children — clipPath children always
// UNION. Joining the room and a sector into ONE path made the default
// nonzero fill-rule cancel their overlap when the windings opposed,
// punching a dark wedge INSIDE the room (field report + screenshot).
clip = shapes;
}
spots.push({ pos, c: glow.c, alpha: colors.glow_light.a * glow.bri, clip, r: R });
}
@@ -2725,7 +2729,7 @@ class HouseplanCard extends LitElement {
<stop offset="55%" stop-color="${sp.c}" stop-opacity="${(sp.alpha * 0.45).toFixed(3)}"></stop>
<stop offset="100%" stop-color="${sp.c}" stop-opacity="0"></stop>
</radialGradient>
${sp.clip ? svg`<clipPath id="hp-glowclip-${i}"><path d="${sp.clip}"></path></clipPath>` : nothing}`)}
${sp.clip ? svg`<clipPath id="hp-glowclip-${i}">${sp.clip.map((d) => svg`<path d="${d}"></path>`)}</clipPath>` : nothing}`)}
</defs>
<g class="glowlayer">
${spots.map((sp, i) => svg`<circle cx="${sp.pos.x}" cy="${sp.pos.y}" r="${sp.r}"