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
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…
Thank you for sharing
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.
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.
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
Putting a group inside a group works as well, I think…
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 
I used this http://www.kioskproapp.com/ on the ipad and it worked well… there is a trial/free version.
Exactly what I was looking for. Thank you!
Just about getting started, but I keep getting a “GET http://192.168.178.20:8123/local/custom_ui/floorplan/ha-floorplan.html 404 (Not Found)” error in the dev console, although the file is in my .homeassistant/www/custom_ui/floorplan directory.
Any ideas ?
Lars
New version ready. You can now treat your HA entity groups in two different ways. Doco has been updated too:
- name: Lights
entities:
- light.kitchen
- group.pantry_lights
groups:
- group.living_area_lights
If you’ve already created some Home Assistant entity groups, you can actually include those groups in two different ways:
single - the group will be represented as a single entity (group.pantry_lights in the example above). These sorts of Home Assistant entity groups get added beneath entities:).
exploded - the group will be exploded into separate entities (group.living_area_lights in the example above). These sorts of Home Assistant entity groups get added beneath groups:).
Hi @LarsAC. In your web browser, are you able to paste in the URL and see if you can navigate to the CSS file?
http://192.168.178.20:8123/local/custom_ui/floorplan/floorplan.css
To help people iron out any issues along the way, I have added a troubleshooting section to the doco on GitHub. We can add to this as we go along, so that others can learn from what we’ve encountered before.
To get things up and running, the recommended web browser to use is Google Chrome. Pressing F12 displays the Developer Tools. When you press F5 to reload your floorplan page, the Console window will show any errors that may have occurred.
If you’re not seeing latest changes that you’ve made, try clearing the web browser cache. This can also be done in the Chrome Developer Tools. Select the Network tab, right click and select Clear browser cache.
If you’re not able to access the floorplan in your web browswer at all, it could be that you’ve been locked out of Home Assistant due to too many failed login attempts. Check the file ip_bans.yaml in the root Home Assistant config directory and remove your IP address if it’s in there.
If you encounter any issues with your entities not appearing, or not correctly showing state changes, firstly make sure that warnings: is added to your floorplan config. It will report any SVG elements that are missing, misspelt, etc.
If you’re adding your own CSS classes for styling your entities, make sure you escape the dot character in the id, by prefixing it with a backlash:
#light\.hallway:hover {
}
@hejman08 Instead of using automations, have you looked at template switches (https://home-assistant.io/components/switch.template/) or even just using scenes?
That gives a 404 … File is in .homeassistant/www/custom_ui/floorplan/floorplan.css and world readable.
Lars