I inserted the svg files myself.
I followed (about half way shows the tooling and how to insert label etc so you can control embedded images via HASS/css/etc): https://m.youtube.com/watch?v=XV4xzgraNEk
I get all SVGs from here: https://thenounproject.com/
Once you do this it’s awesome as you can easily control each svg individually (either css / text control).
Hope it helps
Thanks, yes that worked out easily. Just import the SVG into the floor plan SVG.
One more question: Is it possible to overlay entity icons on the floor plan? For example to see a media_player entity preview (such as the one you see in the Glance card)?
you can insert(import) the svg floorplan in a program call inkspace and then add svg icons and set the entity then save it an put it in your HA.
The problem is that CSS doesn’t work in HA!
Says “Fill” property uknown…… in CSS
does your css work?
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
- 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.
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
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;
}