ccs? floorplan.yaml? config.yaml? Which code?
Is it possible to use same entity multiple time? What I want to achieve is to control thermostat and show current temperature and climate sensor temperature.
floorplan (si si si si si si si si )
After messing with this for an embarrassingly amount of time I tried what I thought was firefox only (using Chrome) and added an additional line to the code in order to get it to recognize the center of the object I wanted to rotate. Anyway this worked for me
#light.master_fan {
transform-origin: center center;
transform-box: fill-box;
}
The fill box is the key… Hope this helps someone and if anyone truly understands it I would be very very interested as to what this really did 
EDIT: Apparently it’s also very important to have a “Single” Path in InkScape for this object selecting the paths in the fan and doing a union then saving. I broke it again after re-importing the svg fan object where as at some point in my troubleshooting I actually copied the “path object” from the guy above who shared his svg file.
Shawn
1 Like
If someone interested, I just added to ha-floorplan.html after line no 527:
for (let label of this.config.labels) {
let svgElement = $(svg).find(`[id="${label.id}"]`);
if (svgElement && svgElement[0].nodeName === 'text') {
let tspan = $(svgElement).find('tspan');
if (tspan.length) {
$(tspan).text(this.assemble(label.template, null, entities));
}
}
}
And then to floorplan.yaml:
labels:
- id: climate.air_conditioner.temperature
template: '${entities["climate.air_conditioner"].attributes.temperature + "°C"}'
- id: climate.air_conditioner.current_temperature
template: '${entities["climate.air_conditioner"].attributes.current_temperature + "°C"}'
name: Floorplan
image: /local/custom_ui/floorplan/floorplan3.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
# These options are optional
warnings: # enable warnings (to find out why things might ot be working correctly)
# pan_zoom: # enable experimental panning / zooming
hide_app_toolbar: # hide the application toolbar (when used as a custom panel)
date_format: MMM-DD-YYYY
groups:
- name: Sensors
entities:
- sensor.pws_wind_string
- sensor.time
- sensor.date
- sensor.dark_sky_daily_summary
text_template: '${entity.state ? entity.state : "unknown"}'
class: 'temperature'
- name: Icon
entities:
- sensor.dark_sky_icon
image_template: '
var imageName = "";
switch (entity.state) {
case "clear-day":
imageName = "day";
break;
case "clear-night":
imageName = "night";
break;
case "partly-cloudy-day":
imageName = "cloudy-day-1";
break;
case "partly-cloudy-night":
imageName = "cloudy-night-1";
break;
case "cloudy":
imageName = "cloudy";
break;
case "rain":
imageName = "rainy-1";
break;
case "snow":
imageName = "snowy-1";
break;
}
return "/local/custom_ui/floorplan/images/weather/" + imageName + ".svg";
'
- name: dark_sky
entities:
- sensor.pws_temp_f
- sensor.pws_feelslike_f
- sensor.dark_sky_apparent_temperature
- sensor.dark_sky_temperature
- sensor.dark_sky_humidity
- sensor.pws_temp_high_record_f
- sensor.pws_temp_low_record_f
- sensor.dark_sky_wind_bearing
- sensor.dark_sky_precip_probability
- sensor.dark_sky_nearest_storm_bearing
text_template: '${entity.state ? Math.ceil(entity.state) + "°": "undefined"}'
class: 'temperature'
- name: dark_sky_mph
entities:
- sensor.dark_sky_wind_speed
- sensor.dark_sky_wind_gust
text_template: '${entity.state ? entity.state + " mph": "unknown"}'
class: 'temperature'
- name: dark_sky_m
entities:
- sensor.dark_sky_visibility
- sensor.dark_sky_nearest_storm_distance
text_template: '${entity.state ? entity.state + " mi": "unknown"}'
class: 'temperature'
- name: bath_temp
entities:
- sensor.sonoff_1000387b05_temperature
text_template: '${entity.state ? Math.ceil(entity.state) + "°": "undefined"}'
class: 'temperature'
- name: bath_humidity
entities:
- sensor.sonoff_1000387b05_humidity
text_template: '${entity.state ? Math.ceil(entity.state) + "%": "undefined"}'
class: 'temperature'
- name: scripts
entities:
- script.lrleds_blue
- script.lrleds_red
- script.lrleds_green
- script.lrleds_purple
- script.lrleds_white
- script.lrleds_fade
- script.lrleds_bright
- script.lrleds_dim
- script.tv_enable
- script.fire_tv
- script.tv_abc
- script.tv_antennatv
- script.tv_cbs
- script.tv_charge
- script.tv_comet
- script.tv_cozi
- script.tv_creat
- script.tv_cw
- script.tv_escape
- script.tv_fox
- script.tv_ion
- script.tv_laff
- script.tv_metv
- script.tv_mytv
- script.tv_nbc
- script.tv_public
- script.tv_tbd
- script.tv_this
- script.tv_world
action:
domain: homeassistant
service: toggle
# Curtain Switches
- name: curtain switches
entities:
- switch.close_curtain
- switch.open_curtain
- switch.stop_curtain
states:
- state: 'on'
class: 'switch-off'
- state: 'off'
class: 'switch-off'
action:
domain: homeassistant
service: toggle
- name: radio switches
entities:
#- switch.tv_last_channel
- switch.tv_info
- switch.station_down
- switch.station_up
- switch.radio_on
- switch.sterio_on_off
- switch.tv_input
action:
domain: homeassistant
service: toggle
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
- name: tv_volume
entities:
- script.vol_up
- script.vol_down
- switch.tv_mute
action:
domain: homeassistant
service: toggle
# Living room LED Lights
- name: lr leds
entities:
- switch.lrleds
action:
domain: homeassistant
service: toggle
image_template: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "light_switch_on";
break;
case "off":
imageName = "light_switch_off";
break;
}
return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
'
# LED color selector
- name: LED Select Color
elements:
- led_color_button
action:
domain: class
service: toggle
data:
elements:
- led_color
classes:
- layer-visible
- layer-hidden
default_class: layer-hidden
# More TV Channels
- name: More TV Channels
elements:
- channel_button
action:
domain: class
service: toggle
data:
elements:
- more_channels
classes:
- layer-visible
- layer-hidden
default_class: layer-hidden
# Radio Control Layer
- name: Radio Control
elements:
- radio_button
action:
domain: class
service: toggle
data:
elements:
- radio
classes:
- layer-visible
- layer-hidden
default_class: layer-hidden
# Weather Layer
- name: weather
elements:
- weather_button
action:
domain: class
service: toggle
data:
elements:
- weather
classes:
- layer-visible
- layer-hidden
default_class: layer-hidden
# Bathroom Fan
- name: bathroom fan
entities:
- switch.sonoff_1000387b05
action:
domain: homeassistant
service: toggle
states:
- state: 'on'
class: 'fan-on'
- state: 'off'
class: 'fan-off'
# bathroom vanity
- name: Vanity Lights
entities:
- switch.sonoff_1000424a50_1
action:
domain: homeassistant
service: toggle
image_template: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "vanity_on";
break;
case "off":
imageName = "vanity_off";
break;
}
return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
'
# bathroom shower
- name: Shower Light
entities:
- switch.sonoff_1000424a50_2
action:
domain: homeassistant
service: toggle
image_template: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "shower_on";
break;
case "off":
imageName = "shower_off";
break;
}
return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
'
# stove lights
- name: Stove Lights
entities:
- switch.sonoff_1000425127_3
action:
domain: homeassistant
service: toggle
image_template: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "shelf_on";
break;
case "off":
imageName = "shelf_off";
break;
}
return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
'
# Back Porch light
- name: back porch light
entities:
- switch.sonoff_100034d1f9
action:
domain: homeassistant
service: toggle
image_template: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "back_porch_on";
break;
case "off":
imageName = "back_porch_off";
break;
}
return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
'
# Front Porch light
- name: front porch light
entities:
- switch.sonoff_10003fec63
action:
domain: homeassistant
service: toggle
image_template: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "front_porch_on";
break;
case "off":
imageName = "front_porch_off";
break;
}
return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
'
# Chris Light
- name: chris light
entities:
- switch.sonoff_1000407218
action:
domain: homeassistant
service: toggle
image_template: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "chris_on";
break;
case "off":
imageName = "chris_off";
break;
}
return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
'
# Loleta Light
- name: loleta light
entities:
- switch.sonoff_100034c3bd
action:
domain: homeassistant
service: toggle
image_template: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "loleta_on";
break;
case "off":
imageName = "loleta_off";
break;
}
return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
'
# Bay Window
- name: bay window lights
entities:
- switch.sonoff_10003faa2c
action:
domain: homeassistant
service: toggle
image_template: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "bay_window_on";
break;
case "off":
imageName = "bay_window_off";
break;
}
return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
'
# Dining Room
- name: dining room light
entities:
- switch.sonoff_1000425127_1
action:
domain: homeassistant
service: toggle
image_template: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "dining_on";
break;
case "off":
imageName = "dining_off";
break;
}
return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
'
# Kitchen Lights
- name: kitchen lights
entities:
- switch.sonoff_1000425127_2
action:
domain: homeassistant
service: toggle
image_template: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "kitchen_on";
break;
case "off":
imageName = "kitchen_off";
break;
}
return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
'
# Living room Lights
- name: living room lights
entities:
- switch.sonoff_10003fa857
action:
domain: homeassistant
service: toggle
image_template: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "lr_light_on";
break;
case "off":
imageName = "lr_light_off";
break;
}
return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
'
1 Like
I’m trying to accomplish by making door animation (rotate) using ha-floorplan css.
this is on my laptop chrome browser
this is on my iphone HA app
Under iphone is what I want it to be, altho I have not make a clean rotate yet.
and I went on other topic and they talks about after chrome updated from some version, and door went flying too
Is there anyone overcome this issue? I really want my door animation run it the right way so badly
Below is what I used on css
Hi all - new(ish) to Home Assistant, I’ve created my floorplan and all works using the Floorplan Custom Panel on my side bar. But I can’t get the custom state card to show? I can load the binary sensor as a badge and see my floorplan when I click on it but can’t see how to load the full view?
Any help greatly appreciated!
P
I have the same problem. When I’m clicking the badge a dialog box pops up with the miniature floor plan but not in “full screen”. Anybody can help please? Thx.
which sketch up version?
Have done nothing with it yet (so it is only a svg for now) but this is my floorplan.
I made this using Magicplan on an iphone X.
1 Like
@Contraption_Maker do you have a github of your home assistant configs? Love to see how you did your floorplan ideas.
How did you make the light effects in Photoshop?
I used floor planner to create the background image of a lovelace card.
This picture-elements card is used to remote control my vacuum.
5 Likes
Hello Community,
I’m pretty new to HA, and completely new to the floor plan integration. I followed the instructions on GitHub, and I see the Floor Plan blade on my HA home screen, but nothing shows up (just a blank screen). Using Chrome, I see the following error using F12:
ha-floorplan.html:70 Uncaught TypeError: Class extends value undefined is not a constructor or null
at ha-floorplan.html:70
Not sure what I’m missing and any guidance is appreciated.
TIA
Hi all,
thanks for sharing your examples and experiences! Looks really cool.
I’m having some challenges with creating a decent floorplan by using the picture-elements card. I’m using a 1024*1024 png image as floorplan and have created png overlays for all of the rooms. I’m not (yet) using panel mode.
It seems HA(?) automatically scales down the picture as it is not shown in the original resolution. When adding the first element (in this case the garden overlay) the ratio (or scale if you will) is equal to the floorplan and therefore the overlay should fit just fine. However when adjusting the element’s style by changing the ‘left’ parameter, the Garden overlay doesn’t move but changes ratio instead (widen).
This is a part of my yaml:
title: Floorplan
path: floorplan
panel: false
badges: []
cards:
- type: custom:plan-coordinates
- type: picture-elements
# image: /local/images/floorplan/demo/Floorplan.png
image: /local/images/floorplan/Floorplan.png
elements:
- type: image
entity: light.garden_lights
title: Garden
# tap_action: toggle
image: /local/images/floorplan/Garden.png
# image: /local/images/floorplan/demo/hallway.png
state_filter:
"off": opacity(80%)
"on": opacity(1%)
style:
top: 0%
left: 0%
And this is what it looks like in HA:
When changing left 0% to left 25% this is what happens:
As you can see in the above snippet I’m also testing with alternative images that I retrieved from https://sharethelove.io/picture-elements-cards/3d-floorplan. When using these instead, everything seems to work fine.
Questions:
- Are there any specific requirements and/or limitations to the pictures you use (e.g. file size, resolution, etc.)?
- Why is my picture scaled whilst the example picture is not (see below)? (The example picture has a resolution of 740*1184)
- Why does changing the ‘left’ style parameter result in changing the picture width instead of moving the picture?
- How does the floorplan-coordinates component work? I noticed the top left position is never 0% by 0% and I’m not sure how the coordinates relate to the top and left coordinates in the style definition. I update the style of an element to match the coordinates shown on screen then the element is always placed somewhere else…
Any help is appreciated!
My apologies if these questions have been answered before but I cannot seem to find the answers in this thread.
I like your floorplan. Which software do you use to draw this?
I like your floorplan. Which software do you use to draw this?
And do you have your configuration public (github)?
Hi, I have a similar problem to your: I cannot see my floorplan at full screen.
have you been able to solve it?
Tnanks