this._stagePointerUp(t)}
@pointercancel=${t=>this._stagePointerUp(t)}>
+ ${null!=r?F`${r}°`:W}
+ ${null!=n?F`${n}`:W}
+
`}_labelPos(t,e){const i=this._layout["rl_"+(t.id||"")];if(i&&i.s===e){const t=this._serverCfg.spaces.find(t=>t.id===e)?.aspect||1;return{x:i.x*Wt,y:i.y*(Wt/t)}}const s=this._roomCenter(t);return{x:s[0],y:s[1]}}_labelDown(t,e,i){if(this._markup)return;t.preventDefault(),t.stopPropagation();const s=this._labelPos(e,i);this._drag={id:"rl_"+(e.id||""),sx:t.clientX,sy:t.clientY,ox:s.x,oy:s.y,moved:!1},t.target.setPointerCapture(t.pointerId),this._tip=null}_labelMove(t,e,i){const s="rl_"+(e.id||"");if(!this._drag||this._drag.id!==s)return;const o=this._stageEl;if(!o)return;const a=this._spaceModel(i).vb,r=o.getBoundingClientRect(),n=this._viewOr(a),l=(t.clientX-this._drag.sx)/r.width*n.w,c=(t.clientY-this._drag.sy)/r.height*n.h;Math.abs(t.clientX-this._drag.sx)+Math.abs(t.clientY-this._drag.sy)>3&&(this._drag.moved=!0);const h=.008*Math.min(a[2],a[3]),d=Math.max(a[0]+h,Math.min(a[0]+a[2]-h,this._drag.ox+l)),p=Math.max(a[1]+h,Math.min(a[1]+a[3]-h,this._drag.oy+c));this._savePos({id:s,space:i},d,p)}_labelUp(t){const e="rl_"+(t.id||"");if(!this._drag||this._drag.id!==e)return;const i=this._drag.moved;this._drag=i?this._drag:null,i&&window.setTimeout(()=>this._drag=null,0)}_renderRoomLabel(t,e,i,s){if(!t.name)return W;const o=this._labelPos(t,e.id),a=(o.x-i.x)/i.w*100,r=(o.y-i.y)/i.h*100,n=Math.min(1,s.opacity+.25);return F`
-
-
- ${this._roomDialog?this._renderRoomDialog():B}
- ${this._spaceDialog?this._renderSpaceDialog():B}
- ${this._markerDialog?this._renderMarkerDialog():B}
- ${this._infoCard?this._renderInfoCard():B}
- ${this._rulesDialog?this._renderRulesDialog():B}
- ${this._importDialog?this._renderImportDialog():B}
- ${this._tip?L`
- ${s.map(t=>this._renderDevice(t,r))}
+
- ${this._zoom>1?L`
+ ${s.map(t=>this._renderDevice(t,n))}
+ ${o.showNames&&!this._markup?e.rooms.map(t=>this._renderRoomLabel(t,e,n,o)):W}
${Math.round(100*this._zoom)}%
`:B}
+ ${this._zoom>1?F`${Math.round(100*this._zoom)}%
`:W}
- ${this._tip.title}${this._tip.meta?L`${this._tip.meta}`:B}
- ${null!=this._tip.lqi?L`${this._t("tip.lqi")}
- ${this._tip.lqi}`:B}
-
`:B}
- ${this._toast?L`${this._toast}
`:B}
+ ${this._roomDialog?this._renderRoomDialog():W}
+ ${this._spaceDialog?this._renderSpaceDialog():W}
+ ${this._markerDialog?this._renderMarkerDialog():W}
+ ${this._infoCard?this._renderInfoCard():W}
+ ${this._rulesDialog?this._renderRulesDialog():W}
+ ${this._importDialog?this._renderImportDialog():W}
+ ${this._tip?F`
+ ${this._tip.title}${this._tip.meta?F`${this._tip.meta}`:W}
+ ${null!=this._tip.lqi?F`${this._t("tip.lqi")}
+ ${this._tip.lqi}`:W}
+
`:W}
+ ${this._toast?F`${this._toast}
`:W}
- `}_renderDevice(t,e){const i=this._pos(t),s=(i.x-e.x)/e.w*100,a=(i.y-e.y)/e.h*100,o=this._stateClass(t),r=this._liveTemp(t),n=this._config?.show_signal&&!t.virtual?Dt(this.hass,t.entities):null;return L`this._clickDevice(e,t)}
@mousemove=${e=>this._showTip(e,t.name,t.model+(null!=r?" · "+r+"°":"")+(null!=n?" · LQI "+n:""))}
@mouseleave=${()=>this._tip=null}
@@ -969,9 +1029,14 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
@pointercancel=${e=>this._pointerUp(e,t)}
>
`}_roomCenter(t){if(t.poly){const e=t.poly.length;return[t.poly.reduce((t,e)=>t+e[0],0)/e,t.poly.reduce((t,e)=>t+e[1],0)/e]}return[t.x+t.w/2,t.y+.1*Math.min(t.w,t.h)]}_renderMarkupDefs(t){const e=this._gridPitch,i=.14*e;return j`this._labelDown(i,t,e.id)}
+ @pointermove=${i=>this._labelMove(i,t,e.id)}
+ @pointerup=${()=>this._labelUp(t)}
+ @pointercancel=${()=>this._labelUp(t)}
+ >${t.name}
`}_roomCenter(t){if(t.poly){const e=t.poly.length;return[t.poly.reduce((t,e)=>t+e[0],0)/e,t.poly.reduce((t,e)=>t+e[1],0)/e]}return[t.x+t.w/2,t.y+.1*Math.min(t.w,t.h)]}_renderMarkupDefs(t){const e=this._gridPitch,i=.14*e;return j`
+ `}_renderMarkupBar(){return F``}_renderInfoCard(){const t=this._infoCard,e=t.primary?this.hass.states[t.primary]:void 0,i=e?this.hass.formatEntityState?.(e)??e.state:null;return L``}_renderInfoCard(){const t=this._infoCard,e=t.primary?this.hass.states[t.primary]:void 0,i=e?this.hass.formatEntityState?.(e)??e.state:null;return F``}_renderMarkerDialog(){const t=this._markerDialog,e="virtual"===t.binding,i=this._bindingCandidates(),s=(()=>{if(e)return null;const s=i.find(e=>e.value===t.binding);if(s)return s.label;const[a,o]=t.binding.split(":");return"device"===a?this.hass.devices[o]?.name_by_user||this.hass.devices[o]?.name||o:this.hass.states[o]?.attributes?.friendly_name||o})();return L``}_renderMarkerDialog(){const t=this._markerDialog,e="virtual"===t.binding,i=this._bindingCandidates(),s=(()=>{if(e)return null;const s=i.find(e=>e.value===t.binding);if(s)return s.label;const[o,a]=t.binding.split(":");return"device"===o?this.hass.devices[a]?.name_by_user||this.hass.devices[a]?.name||a:this.hass.states[a]?.attributes?.friendly_name||a})();return F``}_renderSpaceDialog(){const t=this._spaceDialog;return L``}_renderSpaceDialog(){const t=this._spaceDialog;return F`
`}}Zt.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},_markup:{state:!0},_tool:{state:!0},_path:{state:!0},_cursorPt:{state:!0},_areaSel:{state:!0},_nameSel:{state:!0},_roomDialog:{state:!0},_spaceDialog:{state:!0},_infoCard:{state:!0},_rulesDialog:{state:!0},_importDialog:{state:!0},_markerDialog:{state:!0},_zoom:{state:!0},_view:{state:!0}},Zt.styles=Lt,customElements.get("houseplan-card")||customElements.define("houseplan-card",Zt),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.14.0 ","background:#3ea6ff;color:#04121f;font-weight:700","");
diff --git a/custom_components/houseplan/manifest.json b/custom_components/houseplan/manifest.json
index 912cd31..c751a2a 100755
--- a/custom_components/houseplan/manifest.json
+++ b/custom_components/houseplan/manifest.json
@@ -16,5 +16,5 @@
"issue_tracker": "https://github.com/Matysh/houseplan-card/issues",
"requirements": [],
"single_config_entry": true,
- "version": "1.13.3"
+ "version": "1.14.0"
}
diff --git a/custom_components/houseplan/validation.py b/custom_components/houseplan/validation.py
index c81573b..3ddc4ee 100644
--- a/custom_components/houseplan/validation.py
+++ b/custom_components/houseplan/validation.py
@@ -78,10 +78,22 @@ ROOM_SCHEMA = vol.All(
),
_require_geometry,
)
+SPACE_DISPLAY_SCHEMA = vol.Schema(
+ {
+ vol.Optional("show_borders"): bool,
+ vol.Optional("show_names"): bool,
+ vol.Optional("room_color"): vol.Match(r"^#[0-9a-fA-F]{6}$"),
+ vol.Optional("room_opacity"): vol.All(vol.Coerce(float), vol.Range(min=0, max=1)),
+ vol.Optional("fill_mode"): vol.In(["none", "lqi", "light"]),
+ },
+ extra=vol.ALLOW_EXTRA,
+)
+
SPACE_SCHEMA = vol.Schema(
{
vol.Required("id"): str,
vol.Required("title"): str,
+ vol.Optional("settings"): SPACE_DISPLAY_SCHEMA,
vol.Optional("plan_url"): vol.Any(str, None),
vol.Required("aspect"): vol.All(vol.Coerce(float), vol.Range(min=0.05, max=20)),
vol.Required("view_box"): vol.All([vol.Coerce(float)], vol.Length(min=4, max=4)),
diff --git a/demo/README.md b/demo/README.md
new file mode 100644
index 0000000..c0ab706
--- /dev/null
+++ b/demo/README.md
@@ -0,0 +1,17 @@
+# Synthetic demo home
+
+A fully fictional house (plans, devices, states) used for README screenshots,
+the demo GIF and headless smoke tests — so no real home data ever appears in
+public materials.
+
+- `srv/demo.html` — self-contained host page: `t.stopPropagation()}>
`}_renderRoomDialog(){const t=this._freeAreas;return L``}_renderRoomDialog(){const t=this._freeAreas;return F``}}Bt.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},_markup:{state:!0},_tool:{state:!0},_path:{state:!0},_cursorPt:{state:!0},_areaSel:{state:!0},_nameSel:{state:!0},_roomDialog:{state:!0},_spaceDialog:{state:!0},_infoCard:{state:!0},_rulesDialog:{state:!0},_importDialog:{state:!0},_markerDialog:{state:!0},_zoom:{state:!0},_view:{state:!0}},Bt.styles=Ht,customElements.get("houseplan-card")||customElements.define("houseplan-card",Bt),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.13.3 ","background:#3ea6ff;color:#04121f;font-weight:700","");
+ t.stopPropagation()}>
this._spaceDialog={...t,title:e.target.value}} />
-
-
- ${t.planFile?L`${t.planFile.name}`:t.planUrl?L`
`:L`${this._t("space.no_plan")}`}
-
+
+ ${"file"===t.source?F`
+ ${t.planFile?F`${t.planFile.name}`:t.planUrl?F``:F`${this._t("space.no_plan")}`}
+
+
`:W}
+
+ ${"draw"===t.source&&"create"===t.mode?F`
+ `:W}
+
+
+
+
+
+
+ this._spaceDialog={...t,roomColor:e.target.value}} />
+ ${this._t("space.opacity")}
+ this._spaceDialog={...t,roomOpacity:Number(e.target.value)/100}} />
+ ${Math.round(100*t.roomOpacity)}%
+
+
- ${"edit"===t.mode?L``:W}
- ${this._importTotal>0&&"create"===t.mode?L``:B}
+ ${this._importTotal>0&&"create"===t.mode?F``:W}
${devs.map((d) => this._renderDevice(d, view))}
+ ${disp.showNames && !this._markup
+ ? space.rooms.map((r) => this._renderRoomLabel(r, space, view, disp))
+ : nothing}
${this._zoom > 1
@@ -1934,6 +2002,69 @@ class HouseplanCard extends LitElement {
`;
}
+ /** Saved label position (layout key rl_ this._labelDown(e, r, space.id)}
+ @pointermove=${(e: PointerEvent) => this._labelMove(e, r, space.id)}
+ @pointerup=${() => this._labelUp(r)}
+ @pointercancel=${() => this._labelUp(r)}
+ >${r.name}
`;
+ }
+
private _roomCenter(r: RoomCfg): number[] {
if (r.poly) {
const n = r.poly.length;
@@ -2174,18 +2305,67 @@ class HouseplanCard extends LitElement {
.value=${d.title}
@input=${(e: Event) => (this._spaceDialog = { ...d, title: (e.target as HTMLInputElement).value })} />
-
- ${d.planFile
- ? html`${d.planFile.name}`
- : d.planUrl
- ? html`
`
- : html`${this._t('space.no_plan')}`}
-
+
+ ${d.source === 'file'
+ ? html`
+ ${d.planFile
+ ? html`${d.planFile.name}`
+ : d.planUrl
+ ? html``
+ : html`${this._t('space.no_plan')}`}
+
+
`
+ : nothing}
+
+ ${d.source === 'draw' && d.mode === 'create'
+ ? html`
+ `
+ : nothing}
+
+
+
+
+
+
+ (this._spaceDialog = { ...d, roomColor: (e.target as HTMLInputElement).value })} />
+ ${this._t('space.opacity')}
+ (this._spaceDialog = { ...d, roomOpacity: Number((e.target as HTMLInputElement).value) / 100 })} />
+ ${Math.round(d.roomOpacity * 100)}%
+
+
${d.mode === 'edit'
@@ -2199,8 +2379,8 @@ class HouseplanCard extends LitElement {
: nothing}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 4447f18..a007e6a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -151,5 +151,20 @@
"import.manual": "Start from scratch",
"import.progress": "Floor {i} of {n}",
"import.done": "Spaces created. Outline the rooms: click grid dots and close the contour.",
- "btn.skip": "Skip"
+ "btn.skip": "Skip",
+ "space.display_section": "Display",
+ "space.show_borders": "Always show room borders",
+ "space.show_names": "Show room names (drag to move)",
+ "space.room_color": "Border & name color",
+ "space.opacity": "Opacity",
+ "space.fill_label": "Room fill",
+ "fill.none": "None",
+ "fill.lqi": "Zigbee signal (red → green)",
+ "fill.light": "Lights (yellow = on, grey = off)",
+ "space.source_file": "I have a floor-plan image",
+ "space.source_draw": "No image — I'll outline rooms by hand",
+ "space.orientation": "Canvas",
+ "orient.landscape": "Landscape",
+ "orient.portrait": "Portrait",
+ "orient.square": "Square"
}
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
index b316732..cdd81b8 100644
--- a/src/i18n/ru.json
+++ b/src/i18n/ru.json
@@ -151,5 +151,20 @@
"import.manual": "Начать с нуля",
"import.progress": "Этаж {i} из {n}",
"import.done": "Пространства созданы. Обведите комнаты: кликайте по точкам сетки и замкните контур.",
- "btn.skip": "Пропустить"
+ "btn.skip": "Пропустить",
+ "space.display_section": "Отображение",
+ "space.show_borders": "Всегда отображать границы комнат",
+ "space.show_names": "Отображать названия комнат (перетаскиваются)",
+ "space.room_color": "Цвет границ и названий",
+ "space.opacity": "Прозрачность",
+ "space.fill_label": "Заливка комнат",
+ "fill.none": "Нет",
+ "fill.lqi": "По силе зигби-сигнала (красный → зелёный)",
+ "fill.light": "По освещению (жёлтая = включено, серая = выключено)",
+ "space.source_file": "У меня есть картинка плана",
+ "space.source_draw": "Нет подложки — нарисую комнаты вручную",
+ "space.orientation": "Холст",
+ "orient.landscape": "Альбомный",
+ "orient.portrait": "Портретный",
+ "orient.square": "Квадрат"
}
diff --git a/src/logic.ts b/src/logic.ts
index d91b45a..23ea650 100644
--- a/src/logic.ts
+++ b/src/logic.ts
@@ -180,3 +180,52 @@ export function subst(s: string, vars?: Record