Thanks for the answer ! This works fine to prevent the cursor from changing when hovering above the element.
To remove all interraction, I also placed theses elements on another layer in the svg (using inkscape). Everything’s fine now !
1 Like
One more question if I may, following a nwe issue I’m facing.
I’m using the folowing syntax to add css classes to elements of my svg 
- action:
service: homeassistant.toggle
class_template: 'light-${entity.state}'
element: area_livingroom
entity: light.livingroom
I’d like to use multiple entities with the same element, so I can define multiple css classes. For example in my living room I have several motion sensors. I tried something like :
- action:
service: homeassistant.toggle
class_template: 'light-${entity.state}'
element: area_livingroom
entity: light.livingroom
- action:
service: homeassistant.toggle
class_template: 'motion-${entity.state}'
element: area_livingroom
entity: sensor.livingroom_motion
Unfortunately, the first item overwrites the css class of the other. So I only have “class=‘light-on’” instead of, for example, “class=‘light-on motion-off’”.
I’ve thought of several workarounds, but I wantezd to know first if there’s a simple & built-in way to address this.
Thanks for any help you can provide !
2 Likes
I am trying to use Floorplan to create an image of a TV remote to control the TV. I like the idea of using a real image of my remote rather than using the remote card. I have created a SVG file and named each of the buttons as an entitiy. I have validated that this trigger works with some simple notifies. I have also created scripts for each of the different buttons so the entity names in the SVG are things like script.home, script.back… [if I keep more_info on, I can hit Execute from the popup and it works]
So my question is how do I trigger the script to run in my tv_remote.yaml file? Thanks!
Thanks, sorry for the late reply. But can’t you do this with a picture elements card? What is extra compared to that?
No you can’t, not even close. With floorplan those “elements” can be any SVG shape you can find, or create. I can perfectly align the door sensor entity with the floorplan, so that it’s not simply an icon showing if the door is open, but the actual door changes state.
Like this one. Where I’m showing an open door, and then there’s what it looks like when closed:
(yes the fan changes, it’s two ages of picture…)
If you take the time to actually look at the existing threads with examples of what people have done with Floorplan, you’ll see just how incredibly different it is from a Picture Elements card.
I am sure there is something i am missing, but the existing threads show mainly things that can be done with the picture elements? And you can use any SVG-shape in picture elements as well? And you can implement state changes as well? If you can animate, that is different, and maybe floorplan does these things in a much easier to implement way? I am not saying it is bad, I am sure it is great, many people use it, it is just a bit difficult for me to understand what actual benefits it gives compared to picture elements. Using any SVG for elements is fine, and very useful, but not anything extra compared to picture elements for instance?
Try it, see what you think.
I tried to replicate my existing Floorplan card in Lovelace with Picture Elements, and after a few days of messing around gave up. It might be possible, but I’ve yet to see anybody achieving it. For a start, with the card you’re placing things relatively roughly. With Floorplan you place things exactly.
But, as I said, try it…
2 Likes
Anyway to make the panel mode not so zoomed in? Would I need to adjust the SVG size to get it all to fit on the screen?
Just add a blank rectangle around it, it will add space around the outside.
1 Like
I’ll give it a shot
Update: Changed the image size to 1920x1080 and centered my objects, worked like a champ.
Is there a video guide about this? I tried to follow the instructions but didn’t work.
I was able to successfully display a floorplan and add various elements which even change color on toggle. In the previous version of the floorplan, there was an option to display the same as a custom panel on the left. Is this option migrated to this newer version as well? In short, can I reuse all the codes in the back of this floorplan to display the same over there as a side panel as well? Could anyone give some steps how to do this?
Thanks in advance…!
Hi, I have my the old version of floorplan working as a panel very nicely (thanks OP, great bit of work), and thinking of migrating to this.
First thing I’ve run into: I’m using the class toggle to hide layers in my svg, so that I can have multiple floors in one svg, and use a button to toggle their visibility / availability.
I can’t see how to do that with this version though. I know the following is not the right syntax, but I need something like:
- action:
service: class.toggle
element: floor_toggle
elements:
- upper_entity_layer
- lower_entity_layer
class: upper-layer-visible
default_class: upper-layer-visible
So one element can set a class on others.
Can anyone point me in the right direction?
Try this
- action:
data:
classes:
- layer-visible
- layer-hidden
default_class: layer-visible
elements:
- element_to_be_toggled_1
- element_to_be_toggled_2
service: floorplan.class_toggle
elements:
- svg_element_toggle_action
name: toggles
2 Likes
Perfect, thanks very much.
Love the look of this - can you make bulbs match the same colour that they actually are? That’s the one advantage that picture-elements has - unless I’m missing something
Down to the last query on migrating from old version. How do I get the hover text to just display certain attributes, e.g. name and state - lots of spam info on display.
This feels noticeably faster than previous panel version I was using.
edit: while I’m here, I’m thinking of trying to make it rotate 90 degrees when on a mobile screen, (my orientation is always locked to portrait). I was thinking something like card modder , add transform in CSS - anyone done like that?
edit 2: for the rotation in mobile, i decided i wanted somethings different in mobile view, like larger buttons, so added an image_mobile property in config which specifies a different SVG file, then tweaked code to check for mobile browser on loading the floorplan and load the mobile SVG if true.
Does this mean if I need to have both floorplan-as-a-card-in-a-view as well as a custom-panel-on-the-left, I need to do it two times? For the floorplan-as-a-card-in-a-view, which is already done, I have used the new custom-card way. Now, to have the same appear on the left side panel, I have to go the ha-floorplan way? Can I not reuse the code in the floorplan view (with the custom-card) to display the same on the custom-panel? With the custom-panel-on-the-left, the same yaml file could be used to display the floorplan in a view as well. But with the new floorplan custom-card, it is not compatible with the custom-panel display?
@pkozul, could you please direct me to the right solution?
Someone much earlier asked if you planned to integrate it with custom_updater - wonder if this could be expanded for use in HACS. My config became a mess pre-HACS keeping all my custom goodness up to date.
Either way, I’m stoked this is now a lovelace card proper - my plan for the next week is to create this as its more flexible than the picture card versions
3 Likes
This is awesome, spent a few hours turning my floor plan into an overly detailed SVG.
I enabled logging as I was having some issues initially, logging saved me.
Once it was all running with very basic css animations I noticed this.
https://xxxxx.duckdns.org/local/floorplan/lib/yaml.min.js:1:0 SyntaxError: Invalid escape in identifier: '\It seems there is an issue in the min file (I grabbed it straight from the github - haven’t touched it so perhaps it’s not required? Or I’m not doing any of the sophisticated floor plan aspects (fun for next weekend).