Look above, I’ve posted a work around for this. Or wait till next version, it seems this will be configurable then.
hi guys, stranger things happend. when i modify my svg file with inkspace, then i save it inkscape freeze. after a while inkscape return to life, but the svg file doesn’t work in ha. the prevoious file (i have done a copy before the change) still work well. any ideas?
There is a change coming soon, which will allow you to use your HA groups in two different ways:
- Map the HA group to a single SVG element
- Explode the HA group so that it its child entities get mapped to their own SVG elements
Will be ready tomorrow.
4 Likes
Definitely looking forward to this. Almost all of my Hue bulbs are in 2- or 3-light fixtures where I have like light.lr1, light.lr2, light.lr3 in a group called living_room_overhead and I’d love to just be able to toggle that as one button.
I took the liberty to create a separate thread for posting floorplans as I’m really keen on learning how others have done designing their svg-files.
3 Likes
Just a FYI I have a second sensor for every door so I can have two alternating graphics for each door (one open door, one closed door) second sensor is a template sensor which ‘inverts’ state of the real one and they get visible / invisible depending on their state.
~Cheers
The ‘more info’ dialog appears only when is configured in a group and when click on the mani title, in my example ‘Casa’.
For the rest everything works properly, many thanks for the explanation, I thought it was my mistake in the configuration.
Mattia
Can you provide the code? Also if they are publicly avaliable can you also provide the open and close door graphics. Many thanks
It will be appreciated if you could explain how the alternating graphics are achieved within the SVG given that 1 graphic has to be hidden and only become visible on an event
1 Like
Sure here’s how I did it:
I have one binary sensor with the entity id:
binary_sensor.door_window_sensor_158d000154b7c0
as that is quite hard to read and not really telling what is happening here I made two template sensors like this:
- platform: template
sensors:
balcony_door_closed:
entity_id: binary_sensor.door_window_sensor_158d000154b7c0
value_template: >
{% if is_state('binary_sensor.door_window_sensor_158d000154b7c0', 'off') %}
on
{% else %}
off
{% endif %}
balcony_door_open:
entity_id: binary_sensor.door_window_sensor_158d000154b7c0
value_template: >
{% if is_state('binary_sensor.door_window_sensor_158d000154b7c0', 'on') %}
on
{% else %}
off
{% endif %}
This way I get two new sensors. One for each ‘state’ that I want to visually represent. The CSS is the same for both as I want them to be visible if they are ‘on’ and invisible if they are ‘off’. I then placen them on top of each other in the floorplan.svg where the closed door object got the id balcony_door_closed and the opened object got the id balcony_door_opened.
I also had to disable the hover effect but until now I did not get rid the mouse pointer chaning on hovering over the not visible object 
The CSS I used for this is this:
/* Disable hover for doors */
.entity.door_off:hover, .entity.door_on:hover{
stroke-opacity: 0 !important;
stroke-width: 0px !important;
pointer-events: none !important;
}
.door_off {
fill-opacity: 0 !important;
stroke-opacity: 0 !important;
}
.door_on {
fill-opacity: 1 !important;
stroke-opacity: 1 !important;
}
and in the floorplan.yaml I configured the group like this:
- name: Doors
entities:
- sensor.balcony_door_open
- sensor.balcony_door_closed
states:
- state: 'off'
class: 'door_off'
- state: 'on'
class: 'door_on'
The two graphics I used are:
closed
opened
Hope I explained that well. Feel free to shoot your questions my way tho.
~Cheers
Edit: Naming of the CSS class is not really top notch should be something like visibilty_on / off to better represent what is happening but ehhhhh…
7 Likes
Thank you for sharing
1 Like
Great work! I was also able to represent open and closed doors (with the swing) using targeted CSS and the transform and transform-origin rule. This allows me to just have the one sensor and all the magic happens in the CSS.
It’s great that there are multiple ways to accomplish this. I have the example in my CSS in my Repo.
4 Likes
Thank you. Works great.
I worked around the issue with groups for the time being by having a whole bunch of “dummy” switches- each switch triggers an automation that toggles the group of lights it corresponds to, then I just call said switches on the SVG and floorplan config.
3 Likes
Yeah it was the first thing I came up with because I didn’t even knew you could use CSS on SVG files… Certainly have to read into it now I think there is a looooooot of potential in this ‘add-on’ besides being a mere floorplan.
~Cheers
1 Like
Putting a group inside a group works as well, I think…
1 Like
That also probably would have been a good way to handle it. That said, I actually like the way I did it for reasons outside the Floorplan project - it makes it so all my “groups of lights” can show up under one state card now, cleaned up the interface a bit. Groups of Groups probably would have worked too, but there are many ways to circumvent stuff not behaving 
1 Like
I used this http://www.kioskproapp.com/ on the ipad and it worked well… there is a trial/free version.
2 Likes