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?
Hang on I think I might have just seen it. In your ui-lovelace.yaml you have single quotes around light-off and light-on. Remove those and see what happens.
Look at my example here if not sure: Floorplan now available as a Lovelace card
I can see you have too many spaces there. The c of class should be under the e but not sure if that will cause a problem. If that doesn’t fix it then download simple.css again and try this
- entities:
- switch.kitchen_2_lights
- switch.kitchen_3_lights
name: Lights
states:
- class: background-off
state: 'off'
- class: background-on
state: 'on'
Also make sure you are doing a SHIFT-F5 to reload which will clear out the browser cache (edit: on chrome. not sure of others)
You champion, Some progress.
It loads just cannot toggle it yet.
Have to continue tomorrow. Work is calling. Thank you so, so much. It is gratefully appreciated.
Good luck with it. Toggling should just be a matter of adding the below. See my example above. From here just just baby steps with changing the CSS to see what that does and add more entities to your plan.
action:
service: switch.toggle
Hello everyone, this topic is very interesting, I once made this project with this result, if you are interested here is a tutorial.
I leave the link. https://www.domoticaeconomica.com/floor-plan-y-ui-lovelace-home-assistant/
1 Like
Good evening I have floorplan in panel mode and it works very well I would like to put it in card mode using the same image file but it doesn’t work can you help me?