Really nice, what software do you use to draw?
I use Inkscape to make the images then export them to png files
Does it work? Seems to be only an image
Of course it work, I took a floorplan/3d break i’ll resume next weeks and post new updates
Ciao Matteo, mi piace molto il tuo floorplan… condivideresti i tuoi files?
Hi Everybody,
Been lurking here for awhile now, getting ideas, and figuring out how to do things. This is what I have come up with. I use this on a 23" android tablet. Let me know what you think and thank everyone for giving me ideas on how to do this.
I have had our home DIY automated for the last 10 years (started with X-10 back then) but no central control panel. Now with the help of Dr. Zz’s channel, the forum, Home Assistant and the Floorplan add on we now have this. We have several automatons, curtain opens at 7:30am and closes at 5:30pm (will be timed to sunrise and sunset). The bay window lights and the light by the pantry door also come on at 5:30pm. The porch lights come on at 6pm and goes off at 10:30pm. The bath fan is controlled by a humidity sensor and turns on and off automatically according to the humidity. I have more to add, I want a motion detector for the light in the pantry, electronic locks on the doors and to replace my analog cameras with POE IP cameras.
Here’s a video with Lovelace and Floorplan
Running Hass.io on Intel x86_64 running ProxMox
HA version: 0.88.2
8 Likes
can you share the code?
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?