can we add a remark in the initial post that if the path /local doesn’t work you should try /hacsfiles, in my case, I run everything in Docker, it corresponds to /usr/share/hassio/homeassistant/www/community/
Hi Petar,
I am missing something, but I am not sure what. I have set up a floor plan in HA, using the “config-template-card” and “picture-elements” - see the picture attached. I use png to build up animation when turning lights on/off. My wife loves it. I have added a few icons and badges to turn on the alarm or unlock the door.
Now, I am trying to understand (and appreciate) what I could do if I was to move to the ha-floorplan card. I installed the Floorplan card via HACS, added the resource to the front-end, and uploaded the example into my HA. This is what I get after exporting the second floor into an SVG file.
My wife is not a big fan. So before I spend more time, could you help me understand and appreciate the benefits of using Floorplan card within Lovelace?
Thanks in advance.
Gerard
PS: I am a practitioner of Home Assistant, not a programming geek.
1 Like
If the thing that your wife is not happy about is the presentation then that is just because you have not replicated your existing setup. So firstly, you can make the exact same image in ha-floorplan that you have at the moment.
Now without knowing exactly what you are doing just by looking at your image you could do something like get rid of the lock icon and just have it so you touch on the door and it would unlock. You could show the unlocked door by having it pulse red.
If you had any motion sensors in the house you could have a small icon (I use a target) pulse when motion is detected.
If your aircon is integrated you could touch on the aircon unit pictures to bring up the climate card
I am not sure how your room light PNGs appear but with ha-floorplan you can have them nicely fade in and out.
If you have a TV or media player you can perhaps pull out from the attributes the app being used to watch and then place an icon for that app on the floorplan.
If you want weather information you can have that displayed. You can see that in my post here (top left) although you can’t see that the icons are animated SVGs so they are moving!! Share your Floorplan
Really the question is what do you want to do that you can’t do now? We will be able to tell you if you can do it!
1 Like
Hi @m3obsessed
There are some great examples of floorplans people have created in SVG vector format. Since Floorplan is based on SVG images, you get all the benefits of scalable graphics that look great on all of your devices.
Floorplan allows you to take control of all of the elements within your SVG file (text, shapes, images, etc.). You can individually style these elements using standard CSS styes / classes, apply transformations / rotation / animations, etc. and handle interactions (via clicks, long presses, hovering).
The idea behind Floorplan is to give you maximum flexibility, and promote creativity.
If you need more ideas, information or assistance, best place is on the Discussions page on our GitHub repo.
Let us know how you go.
I read everything there is on the new and the old repo. I clearly got the benefits (would love to click on my locked door to unlock). But was still missing something in terms of creating the layout. Then I came across this post which explains how he built his: https://www.reddit.com/r/homeassistant/comments/bqnl1v/floorplan_thank_you_for_inspiring_me/eo84jot
Is this the right approach? I think this is what I was missing. One file for all the lights on (created in Sweet Home 3D), one overlay SVG file created in inkscape (to obscure the lights on), a Floorplan.yaml file that contains entities and classes (ie Light-on, light-off) and a floorplan.css file that defines the style for each action.
This seems very logical to me. Do you agree on his strategy and implementation? If not, please explain…
Gerard
Close I think.
The SVG file that you create with Inkscape generally* contains all the images. It consists of a base layer (in my case all lights off**) and then a series of layered objects above. The layered objects above are the light on image (in my case), maybe polygons that are invisible that serve as touch points, maybe text holders that are changed when the SVG is loaded. Each of the objects that you want to control somehow are given a label which is the SAME*** as an entity id in home assistant.
Then the UI-lovelave.yaml has rules which determine what happens to the objects in the SVG when a state change occurs to an entity and also is able to change the state of an entity if the floorplan is touched. For example, use of the following will change the state of the light entity.
tap_action:
service: light.toggle
The ui-lovelace.yaml also can specify a CSS class to apply to an object. The most obvious case is to show or hide the light on image and to maybe make that transition nicely. So in my ui-lovelace.yaml I have the following which occurs when the state of the light entity changes:
state_action:
service: floorplan.class_set
service_data:
class: '${(entity.state === "on") ? "room-light-fadein" : "room-light-fadeout"}'
and then the corresponding entry in my floorplan.css is:
.room-light-fadein {
visibility: visible !important;
opacity: 0.65 !important;
transition: opacity 0.5s linear !important;
}
.room-light-fadeout {
visibility: hidden !important;
opacity: 0 !important;
transition: visibility 0s 0.5s, opacity 0.5s linear !important;
}
So hopefully that explains how the three files (SVG, CSS, ui-lovelace.yaml) all interact.
.* I say generally because you can load in SVGs via you ui-lovelave.yaml rules but you only need to do this if you don’t know which SVG to load until runtime (eg. current weather icon)
** You can do it the other way round I guess and have the lights on layer as the base but I find it easier to do it with lights off. YMMV.
*** You can use a an object ID which is not the same as a HA entity in some cases. See the usage docs on github for how that works.
EDIT: One more point of clarification. You create your 3D image in SweetHome3D then export that as an image. Then you IMPORT that image into Inkscape and do any further creation of polygons, text or import other PNG files. I use GIMP to take the lights on image and chop that up into multiple smaller images that are then individually imported, positioned and labelled in Inkscape.
3 Likes
This is very helpful. Although it highlights many things I still need to learn.
So far, I have imported my base layer (all lights are off) and imported “lights on” images". I have created polygons for the door, and the alarm system. Now can you clarify: “Each of the objects that you want to control somehow are given a label which is the SAME as an entity id in home assistant”?
What do you mean by: given a label? Are you referring to Object ID in Inkscape. Can you expand?
Yes exactly. I would suggest you just get one thing working at a time until you get the hang of how everything goes together.
P.S. Sorry I confused things I shouldn’t have used the word label as that is also something in Inkscape but not what you want for this. Having a useful label is handy however when you bring up the object list in Inkscape because that is how the objects are listed. Generally I make the ID and label the same unless the ID is not easily identifiable.
I’m interested in trying this integration out. I have HACS installed and have installed floorplan from there. I see a folder named /config/www/community/ha-floorplan was installed with two files - floorplan.js and floorplan.js.gz. Despite this, I do not see floorplan listed under unused entities. A review of the log suggests the integration did not load - unlike other integrations, there’s no warning about using such.
My HA configuration is:
- core-2021.4.3
- Home Assistant OS 5.13
- supervisor-2021.03.9
Running on an odroid-n2
Why is floorplan not visible under unused entities?
Hi,
You should add the YAML manually in the ‘raw configuration editor’.
Got it!
Thank you
How to make my ha-floorplan full screen
Use panel:true as in:
views:
- panel: true
cards:
- config:
image:
location: /local/floorplan/floorplan_3d-light.svg
cache: true
And if height is a problem then you can use the full_height: true option which is placed at a different place. See here for the details: Sizing and caching · Discussion #58 · ExperienceLovelace/ha-floorplan · GitHub
1 Like
This has nothing to do with ha-floorplan. Please do your search, or ask in a more relevant topic 
.
Can I jump to different SVGs through ha-floorplan
If you go to Github discussions you will see the third, fourth and fifth threads are about this question. Discussions · ExperienceLovelace/ha-floorplan · GitHub
1 Like
Hi, I’m the one who made those icons for heat level intensity. You can find them on my git
All icon are there with complete example on how to add them on your floor plan. See example_ui_lovelace.yaml
I’m looking for a way to have a toggle icon to control roof window in my floorplan. My problem is that to open the roof window I just need to turn on a switch. But to close it I need to turn on another switch that invert the dc voltage and then turn on the same previous switch used to open it.
I presume that I need to use script. Anybody have an idea on how to proceed
Thank you
A script, or even a template switch (or cover), would be the way I’d tackle it.
I’d recommend though that you open a fresh topic on that, so that you get more eyes on it than you may here, as it would be easy for it to get lost in this not very small thread.