That’s how I would’ve done it too.
~Cheers
1 Like
Trying to get floorplan to work for the first time - all I get is a spinning wheel - regardless if I try it as a panel or card.
Where would I see errors - in home-assistant.log? I’m not seeing any.
Thanks!
HI @jruben4 Did you go through all the steps in the Troubleshooting section of the documentation (on GitHub)? Cheers.
Ok, made a little progress. I assumed in floorplan.yaml I had to switch
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
to the actual paths - I had edited it to be:
/home/homeassistant/.homeassistant/www/custom_ui/floorplan/floorplan.svg
/home/homeassistant/.homeassistant/www/custom_ui/floorplan/floorplan.css
But apparently that is why it was broken.
I made a circle in the floorplan.svg to represent a switch. It has no fill. It is set to switch.HallwayUpstairsMasterScene.
Clicking it does toggle the actual switch on and off, but why isn’t the fill changing on the floorplan?
- name: Switches
entities:
- switch.HallwayUpstairsMasterScene
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
service: toggleVersion 1.0.4 is now ready on GitHub
This new version introduces SVG elements as first class citizens in the floorplan config. Up until now, groups within the floorplan config could only contain entities (based on state changes in HA entities), whereas now, groups can contain elements (based on SVG elements, that don’t need to map directly to HA entities). A particular group can only contain one or the other.
Thanks to @ggravlingen for the motivation and ideas in this area. On his floorplan, he wanted to be able to show/hide layers of elements using a button to perform the toggling.
I ended up implementing this in with the HA configuration paradigm in mind, so the syntax for this sort of behaviour is generally consistent with HA. For example, for the button click to toggle the visibility of other SVG elements, the floorplan calls a toggle service on the class domain, and supplies the specific data needed to get the job done. Although it looks like vanilla HA syntax, it’s actually all happening in the JavaScript world. I figure it’s easier if we stick to the same format across the board.
The good thing about this functionality is that you don’t need to create any HA input_boolean entities for this to work. This is purely a client-side user interface concept, so there is no need to talk to the HA back-end just to show/hide bits on the screen. Also, another nice side effect of this, is that if you’re using several devices at home to view your floorplan, they won’t step on each others toes. That was the case with using HA input_boolean entities - changing the state on one device (i.e. toggling the value) would propagate to all devices, and that would explain why people would notice things being shown/hidden unexpectedly.
Anyway, here is the bit that was just added to the official doco. Let me know if you try it for yourself.
Toggling the visibility of entities
If you’d like to control the visibility of your entities, you can create a layer in your SVG file (using the <g> element) that contains the entities you want show/hide, along with a button (using <rect>, for example) that is actually used to toggle the visiblity. Below is an example of a button media_players_button that toggles the visibility of all media players in the floorplan (i.e. those that are contained within the media_players_layer layer). The floorplan toggles between the two CSS classes whenever the button is clicked.
- name: Media Players
elements:
- media_players_button
action:
domain: class
service: toggle
data:
elements:
- media_players_layer
classes:
- layer-visible
- layer-hidden
default_class: layer-hidden
As you can see above, action.data.elements is an array of target elements whose CSS gets toggled, so you can actually include any number of SVG elements here, and they can be of any type (layers, rects, etc. and even embedded SVGs).
The CSS used in the above example:
.layer-visible {
display: initial !important;
}
.layer-hidden {
display: none !important;
}
7 Likes
Has anyone in used floorplan to create a touch keypad for the alarm component? Is it possible?
2 Likes
Holy moly! That’s flippin’ great! I will try that out as soon as I get the time this WE! Thanks for your awesome work!
~Cheers
Worked like a charm, thank you!
2 Likes
I assume since the circle in the floorplan.svg can toggle the actual switch on and off, it must be named correctly. Is there something about the circle’s properties in inkscape that need to be set to allow the fill color to toggle? I’ve tried no fill, solid fill.
- name: Switches
entities:
- switch.HallwayUpstairsMasterScene
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
service: toggleI think someone mentioned way back in this thread that you should only use entity_ids that are lowercase. Maybe that helps? The shapes do not need a special setup besides the id in inkscape.
~Cheers
1 Like
when I try to use floorplan on my Fire 7 or my Nexus 6 with any browser it toggles the device on/off rapidly when I click on it. This doesn’t happen in Chrome on my laptop. If I somehow do the magic right to get the light to stay on, the behavior reverses. Does anyone else have this issue?
1 Like
Same here sometimes, and also in Chrome on my computer. Haven’t been able to figure out yet why the software interprets my tap as a double click. 
1 Like
This happens to me as well. I’ve noticed that if I tap quickly, everything stays on/off. If I do a longer tap, it looks like the icons get highlighted. Then, when I release my finger, the light quickly cycles.
Thanks for this, I’ve been trying something similar to this. I’ve had a look at the code, but it seems only toggle is currently supported? Is there currently a way to have multiple buttons each selecting a single layer, disabling the others?
Example:
- Ground floor button -> show layer_ground_floor, hide layer_first_floor and layer_second_floor
- First floor button -> show layer_first_floor, hide layer_ground_floor and layer_second_floor
- Second Floor button -> show layer_second_floor, hide layer_ground_floor and layer_first_floor
I’ve never done anything with html/css, so not sure how to handle this.
I’ll fork floorplan later and see if I can “debounce” the click action. Looks like it’d just need to go here: https://github.com/pkozul/ha-floorplan/blob/master/www/custom_ui/floorplan/ha-floorplan.html#L747
2 Likes
Tried removing the capital letters - still doesn’t toggle the fill.
Ok, I already found a way to do what I want. Is there a better/easier way to do this?
I’ve made a test svg file and ended up with this:
My floorplan.yaml now contains the following:
- name: OverView
elements:
- overview_button
action:
domain: class
service: select
data:
elements:
- id: layer_1
class: layer-visible
- id: layer_2
class: layer-hidden
- id: layer_3
class: layer-hidden
- name: Ground Floor
elements:
- ground_floor_button
action:
domain: class
service: select
data:
elements:
- id: layer_1
class: layer-hidden
- id: layer_2
class: layer-visible
- id: layer_3
class: layer-hidden
- name: First Floor
elements:
- first_floor_button
action:
domain: class
service: select
data:
elements:
- id: layer_1
class: layer-hidden
- id: layer_2
class: layer-hidden
- id: layer_3
class: layer-visible
Next I’ve added this to the action.service switch in the onElementClick(e) function:
case 'select':
for (let otherElement of action.data.elements) {
let otherSvgElement = $(svg).find(`[id="${otherElement.id}"]`);
let otherSvgElementclass = otherElement.class;
$(otherSvgElement).removeClass().addClass(otherSvgElementclass);
}
break;
This allows me to specifically select which class each element should have when pressing a button. This seems to work, but since this is the first I’ve seen from css I’m not entirely sure that this is an acceptable solution. Does anyone have an issue with this?
-edit- issue 1 found, it refreshes after a while and since they don’t have a default class they are all shown on top of each other
-edit 2- which can be worked around with by adding this as a group:
- name: Defaults
elements:
- overview_button
action:
data:
elements:
- layer_2
- layer_3
default_class: layer-hidden
Not the prettiest, but it seems to work 
1 Like
FK is working well for me now but I guess I am going to have to pay for the Plus account in order to lose the watermark.
1 Like