Not sure but maybe this: Passing logged in user to script
or this Logged in User Variable
Hi, sorry for the dalay, I tried taking out the infill and that did not work i have also tried just creating a circle from scratch with no fill and that does not seem to work either.
Thanks i got the idea from something like this as well but yours is a lot neater than what i have in place so hope you don’t mind.
Still no closer to getting the object fill working bu will keep on trying.
@OzGav & @firstof9 I got it working so far, i managed to keep the fill as it was, and the biggest issue in my equation was i as checking against temp value, not bgtemp so this now works, i shall look to now do this for all of my backgrounds in the nice templated way that OzGav shared.
many thanks, guys 
1 Like
Hi Guys, Im new in HA and trying to configure a floorplan card in Lovelace, but the first issue that I got is that my floorplan image is not displaying at full size. The image is 1920x1080 px
My code is this one:
config:
image: /local/floorplan/myhome/CasaIApagada.svg?v=1.1.14
log_level: error
rules:
- entities:
- switch.eb19a5a6e0f2adca83is09
- switch.sonoff_100070d589
- switch.sonoff_100070d58f
- switch.sonoff_100070ee18_1
- switch.sonoff_100070ee18_2
- switch.sonoff_1000d7f92e
- switch.sonoff_100070d58c
- switch.sonoff_100070d58d
states: - class: binary-sensor-off
state: ‘off’ - class: binary-sensor-on
state: ‘on’
stylesheet: /local/floorplan/examples/simple/simple.css?v=1.1.14
type: ‘custom:floorplan-card
This is how looks like…
’
What Im doing wrong or missing?
Thanks in advance for your help
Probably just missing panel: true
title: Home Assistant
views:
- badges: []
panel: true
cards:
- config:
image: /local/floorplan/floorplan_3d-light.svg?v=1
rules:
I think I just discovered you can’t use a group.xxx entity in the floorplan. When I tried it the CSS would not apply to the element. I wasn’t trying to do an action on it so not sure if that would have worked. I was using the group to track a number of switches so that if any were on the group was on, As I said this didn’t flow through to the floorplan. I could hover over it and see the state correctly but the CSS was not working. I got around it by creating an input_boolean and an automation to have it turn on if any switch turned on and off if all the switches turned off. Clunky compared to the group idea but I am not sure there is a way around it.
If anyone has a solution to this please let me know!
Thanks OzGav. I was missing the panel: true. Now I will continue with the configuration to see if make it work.
A important thing about the panel: true is to put it in the right spot to work, In my case, it put it here and worked just fine
- cards:
- config:
image: /local/floorplan/myhome/CasaIApagada.svg?v=1.1.14
log_level: error
rules:
- entities:
- switch.eb19a5a6e0f2adca83is09
- switch.sonoff_100070d589
- switch.sonoff_100070d58f
- switch.sonoff_100070ee18_1
- switch.sonoff_100070ee18_2
- switch.sonoff_1000d7f92e
- switch.sonoff_100070d58c
- switch.sonoff_100070d58d
states:
- class: binary-sensor-off
state: ‘off’
- class: binary-sensor-on
state: ‘on’
stylesheet: /local/floorplan/examples/simple/simple.css?v=1.1.14
type: ‘custom:floorplan-card’
icon: ‘mdi:floor-plan’
id: system
panel: true <<<<<<<<<<<<<<<
title: Floorplan
- config:
I must be super stupid, i just can’t get this work at all. Spent days on this and still can’t get the example to work. I must be missing something very obvious. Don’t know what to do anymore and about to give up on this. If someone can provide a super simple setup with their yaml files and file locations I would be grateful. Thanks.
Have you literally done the example steps here: https://github.com/pkozul/lovelace-floorplan
Edit: If so, please post a screen capture showing the directory structure and paste in your ui-lovelace.yaml
Firstly just confirm you have a lib folder under floorplan with the three files in it?
I think you might have some issues with your ui-lovelace file. Firstly because you are using YAML mode you can have the resources in configuration.yaml so change that as follows:
lovelace:
mode: yaml
# Include external resources only add when mode is yaml, otherwise manage in the resources in the lovelace configuration panel.
resources:
- type: module
url: /local/floorplan/floorplan-card.js?v=1.1.14
Then ui-lovelace.yaml should start with:
title: Home Assistant
views:
- panel: true
cards:
- config:
image: /local/floorplan/floorplan_3d-light.svg?v=1
rules:
then I notice your indenting has errors in it. Under rules entities and states should be indented two spaces further and a hyphen at the start of entities. stylesheet and type also arent indented correctly. Look again at https://github.com/pkozul/lovelace-floorplan and get the indenting EXACTLY the same, this is critical.
Lastly, you can certainly use your own entities (that is of course the point!) but you have to make sure that in your simple.svg that you have set the ID of the object properties for the object that you wish to see change appearance on your floorplan. I also assume you have added your new classes of light-off and light-on to simple.css
Edit: spelling
Thanks for helping. This is what I have now. The CSS part I don’t get. Is that the problem?
After reload. No change.
What am I doing wrong. The yaml files are both showing tick marks. Uggh!!!
When you say no change can you confirm what you see. Do you see your floorplan on the screen?
In terms of CSS that stylesheet determines what each object will look like. You can control many different aspects of the object. With your current setup when the entity is turned on (which you cant do yet via your floorplan - more on that later) then the style of light-on would be applied and light-off would be applied when the state changes to off. The thing is that the simple.css file you have does not have those styles. You need to add this:
.light-off {
fill: #E0E0EB !important;
}
.light-on {
fill: #FFFF99 !important;
}
Light off should be a grey colour and light on will be a light yellow. Change those colour codes to whatever you like. Once you get this going more ideas here Share your Floorplan
If you want to be able to touch your floor plan and toggle those lights then you just need to add an action to the rule. I assume now when you touch on the bulbs a dialog box will pop up with info about the light (and a switch to turn it on)
- action:
service: switch.toggle
entities:
- switch.kitchen_2_lights
- switch.kitchen_3_lights
name: Lights
states:
- class: light-off
state: 'off'
- class: light-on
state: 'on'
1 Like
One thing I am confused about at the moment is how you say you “see my original screen”. I don’t know how that is appearing if it is not in your ui-lovelace.yaml particularly when you show a screen capture further down where you have selected OVERVIEW and you have that error message? What do you select to see that “original screen”?
Also can you confirm you have floorplan-card.js in config/www/floorplan
After changing the code in your previous post, I ended up with no change when I click restart. My original screen in Overview no change. This one.
With the CSS, this error shows which is where I’m at now.
I told you it’s doing my head in. What am I doing wrong?