I have installed the simple Floorplan and have it all working on my Home Assistant installation.
I have created my own floor plan using Inkscape and have added two fans in the correct place on the plan. I have updated my lovelace configuration to add another card, the original ‘simple’ floorplan is still in place. I have copied the .css file, and renamed it to match my svg file, and all is apearing corectly in Home Assistant, except for one issue:
When I turn the fan on, the icon starts spinning, as expected, but it moves the icon to the top left corner of the plan. What do I need to do to make it stay in its original place. I have searched all the files to see if I can find somewhere where the location is set, but I cannot see where. Unfortunately I am very much a newbie as far as css is concerned. Thanks
Looking for help with using service_templates in floorplan. If anyone has any ideas then please contribute to my thread here:
If I follow the tutorial by dr.zzz or the Readme.md on the github repo I always end up by a displayed binary_sensor toggle on the lovelace dashboard instead of the acutal floorplan. What am I missing?
Hello everybody and thanks for letting me in…
A few days ago I set up a Raspberry Pi 3B+ with hass.io.
I managed to do the basic installation and integrations, but right now im also pretty interested in the floorplan by Petar.
After putting the files in /config/www/floorplan and editing my lovelace configuration by using the raw-editor (homescree => top right, three dots).
I also added the resources in here and took the example from Petar Kozul as a test example.
Sadly after editing hassio says “Custom element doesn’t exist: floorplan-card.”.
Attached you can find the two relevant parts from the lovelace config.
It’ll be great if anybody could tell me what I did wrong. Sorry for being a noob xD Thanks in advance!!
PS: My config looks like this:
resources:
- url: /local/floorplan/floorplan-card.js?v=1.1.14
type: module
… a few line for other categories/cards that work just fine…
- badges: []
cards:
- config:
image: /local/floorplan/examples/simple/simple.svg?v=1.1.14
rules:
- entities:
- binary_sensor.main_bedroom
- binary_sensor.living_area
- binary_sensor.double_garage
states:
- class: binary-sensor-off
state: 'off'
- class: binary-sensor-on
state: 'on'
stylesheet: /local/floorplan/examples/simple/simple.css?v=1.1.14
title: Simple Floorplan
type: 'custom:floorplan-card'
- type: 'custom:floorplan-card'
icon: 'mdi:floor-plan'
id: system
path: floorplan
title: Floorplan
Hi,
I feel like I’ve missed something - I’m moving my config to the card and can’t figure out where to implement this.
last_motion_entity: sensor.template_last_motion
last_motion_class: last-motion
In my old .yaml, it was on it’s own before groups, which doesn’t work with the card.
Thanks!
I am facing a very similar issue.
I started with the ‘simple’ example, added a few lights and got them working. I simply added them as entities in the config and they work fine, but a click takes me to the standard entity control
I then tried to get the action working by adding
- action:
service: homeassistant.toggle
element: switch.toy_room_light
entity: switch.toy_room_light
image_template: '/local/floorplan/examples/simple/light_${entity.state}.svg'
more_info: false
which works for the light control and animation but has now drawn that light as a whopper in the top left corner.
Any way to fix the position?
I’m still new so please go easy on me…
Hi Geoff.wray,
Did you finally received an answer? I’m faced with the same problem and I do not seem to find the correct answers.
Greetz,
Rudi
Afraid nothing yet. seems to be like the imported SVG image is not bound to a location. I just decided to use a single image and change the colour instead.
Hello, I recently opened a “Problem” on github and I think I found a problem and sent a “Request for Extraction” to the project manager if you want you can directly test if my solution works well for you.
a little more browsing through the floorplan sections and came across this which may be the route cause of the image movement
In the example below, the
sensor.home_dark_sky_iconentitiy is mapped to a<rect>in the SVG file with the same id (which simply acts as a placeholder). Whenever the temperature sensor changes state, theimage_templateis evaluated to determine which SVG image should be emebedded within the bounds of the<rect>. Also you need to make sure that the placeholder is placed directly within the svg (e.g. not in a layer in inkscape) or else the calculated coordinates will be wrong.
I still cant get this to work. Gave up on the changing the light svg file and just used the class to change the image properties within my main svg
- action:
service: homeassistant.toggle
entities:
- switch.bedroom_light
- switch.toy_room_light
- switch.kitchen_main
- switch.living_area_light
- switch.lounge_light
- switch.dining_area_light
- switch.hallway_light
- switch.kitchen_bench_light
- switch.lounge_floor_lamp
- light.sonoff
states:
- state: 'on'
class: switch-on
- state: 'off'
class: switch-off
more_info: false
In the SVG file I designed the lights to appear how i wanted them in the ‘on’ state, then set the ‘switch-off’ class to black fill with a transparent border
/* Switches */
.switch-on {
transition: fill 1s ease;
}
.switch-off {
fill: #000000 !important;
stroke: #000000 !important;
stroke-opacity: 0.1 !important;
transition: fill 1s ease;
}
now i have this… but still cant get the fan to anchor in position, just flies off the top left
any help on the fan appreciated
and here are the finished lights
@pkozul Great work on this! With just a little bit of work I was able to get my existing floorplan working as a card. I have a couple of issues/questions though…
Is there any way to set the text on a state to a value other than the state value? For example, I have a home alarm that returns states like “armed_home”, “armed_away” which are kind of ugly. I would rather have it just say “Home” or “Away” and then color-code it with CSS.
Can you think of a way to use attributes in text fields? I have several media players where I would like to display artist/title/track when they are in use. I can add the text fields to the SVG, but since they are attribute values I can’t display them as simply as putting media_player.bathroom_squeezebox.media_artist for the object ID in the SVG. I do get the information when I hover, but that’s not as useful on a tablet.
Any thoughts on how to make clicking on an object do more than just toggle? It would be neat to either be able to select the speed on my ceiling fans, or to have them move up or down to the next speed when I click on them. Currently I just get the standard Hass pop-up when I click on them since I haven’t come up with a action to map them to yet.
And one more things with fans – the speed is an attribute… I would like to change the CSS class based on speed, but can’t because the state is only on/off. Any thoughts on how to do this?
I still have a bit of cleanup to do, but here’s the current state of things. The icons are big, as I want to be able to tap on them even if I am using this on my phone.
Also worked for me it seems, thanks Domy5
Hopefully the pull request gets merged.
To answer at least part of my own question, I have just created new sensors for some of the attributes I want to display. For example:
# SlimP3 now playing for floorplan
- platform: template
sensors:
bathroom_squeezebox_media_artist:
value_template: "{{ states.media_player.bathroom_squeezebox.attributes.media_artist }}"
bathroom_squeezebox_media_album_name:
value_template: "{{ states.media_player.bathroom_squeezebox.attributes.media_album_name }}"
bathroom_squeezebox_media_title:
value_template: "{{ states.media_player.bathroom_squeezebox.attributes.media_title }}"
While this is great for text fields, it doesn’t help me with my ceiling fans since the speed is an attribute of the sensor I am using for the fan image.
Did you use Home sweet 3D? Looks awesome!
I have seen the same problem and got around it somehow. It was a long time ago but it had something to do with grouping or something like that. I don’t have Inkspace installed so I cannot chek, but I think ”grouping” or something had to be removed (right click) from the svg added on top of the floor (even though I had not done grouping etc).
Btw, Is there supported Inkspace version for latest macos version? My installation stopped working after update.
/* Animation */
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
#switch.fan{
transform-origin: center;
}
.switch-on {
transition: fill 1s ease;
-webkit-animation: rotation 2s infinite linear;
transform-box: fill-box;
}
.switch-off {
fill: #000000 !important;
stroke: #000000 !important;
stroke-opacity: 0.1 !important;
transition: fill 1s ease;
}
For my fans, I had to add this to my css.
transform-box: fill-box;
.spinning-heat {
fill: #f01c1c !important;
animation-name: spin;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 50%;
transform-box: fill-box;
}
.spinning-cool {
fill: #84d4f3 !important;
animation-name: spin;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 50%;
transform-box: fill-box;
}
.spinning {
fill: #84df9a !important;
animation-name: spin;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 50%;
transform-box: fill-box;
}
Finally got this working. Nothing wrong with the CSS file but something to do with the svg in Inkscape. For some reason it will not anchor to a location when animated. I have no idea why our how to fix but when I imported the icon as a .PNG instead of a .svg it worked fine.
@rantaki3 There is an alpha of Inkscape that has 64-bit support, but it’s an alpha so I’m not sure how stable it is. If you are brave, it’s mentioned in this thread: https://forum.inkscapecommunity.com/index.php?topic=1472.0
Hi, I’m looking for some assistance to tidy up my config file a bit. I’ve added quite a bit in class templates and find I’m repeating for each entity/element pair. It’s messing with my OCD and becoming difficult to work with as all names are similar.
For an entity such as a light I can list all entities and apply the same class based on state. But for elements I found myself applying a class to each one
Is there a way to group the elements within a class template where the same rules apply?
Room temperatures for example; Text colour changes based on temp but I have the same rule for each
- class_template: >-
var temp = entity.attributes.current_temperature; if (temp < 21)
return "temp-low"; else if (temp < 25) return "temp-medium";
else return "temp-high";
element: climate.guest_room.text
entity: climate.guest_room
text_template: '${entity.attributes.current_temperature}°C'
- element: climate.guest_room.text_state
entity: climate.guest_room
text template: '${entity.state}'
- class_template: >-
var temp = entity.attributes.current_temperature; if (temp < 21)
return "temp-low"; else if (temp < 25) return "temp-medium";
else return "temp-high";
element: climate.amelia.text
entity: climate.amelia
text_template: '${entity.attributes.current_temperature}°C'
- element: climate.amelia.text_state
entity: climate.amelia
text template: '${entity.state}'
- class_template: >-
var temp = entity.attributes.current_temperature; if (temp < 21)
return "temp-low"; else if (temp < 25) return "temp-medium";
else return "temp-high";
element: climate.abigail.text
entity: climate.abigail
text_template: '${entity.attributes.current_temperature}°C'
- element: climate.abigail.text_state
entity: climate.abigail
text template: '${entity.state}'
- class_template: >-
var temp = entity.attributes.current_temperature; if (temp < 21)
return "temp-low"; else if (temp < 25) return "temp-medium";
else return "temp-high";
element: climate.living.text
entity: climate.living
text_template: '${entity.attributes.current_temperature}°C'
- element: climate.living.text_state
entity: climate.living
text template: '${entity.state}'
- class_template: >-
var temp = entity.attributes.current_temperature; if (temp < 21)
return "temp-low"; else if (temp < 25) return "temp-medium";
else return "temp-high";
element: climate.master_bed.text
entity: climate.master_bed
text_template: '${entity.attributes.current_temperature}°C'
- element: climate.master_bed.text_state
entity: climate.master_bed
text template: '${entity.state}'
And same again for room backgrounds, basically a shade over the aera which disappears when the light comes on
- class_template: 'background-${entity.state}'
element: switch.toy_room_light.background
entity: switch.toy_room_light
more_info: false
- class_template: 'background-${entity.state}'
element: switch.lounge_light.background
entity: switch.lounge_light
more_info: false
- class_template: 'background-${entity.state}'
element: switch.bedroom_light.background
entity: switch.bedroom_light
more_info: false
- class_template: 'background-${entity.state}'
element: switch.living_area_light.background
entity: switch.living_area_light
more_info: false
- class_template: 'background-${entity.state}'
element: switch.dining_area_light.background
entity: switch.dining_area_light
more_info: false
- class_template: 'background-${entity.state}'
element: switch.kitchen_main.background
entity: switch.kitchen_main
more_info: false
- class_template: 'background-${entity.state}'
element: switch.hallway_light.background
entity: switch.hallway_light
more_info: false
Any help appreciated