I did, I even just now went as far as factory reseting that sucker ha!
Starting from a completely fresh Fire HD and for some reason Floorplan still won’t load
Will it load on another device/computer using Chrome? Could use the dev tools and see if any errors are showing.
Yeah works on all my other devices perfectly, just not this Fire HD
warnings will display on the top of the page (where the circle is spinning).
if all else fails, try just creating a very simple SVG (1 or 2 rectangles) and see if it loads.
1 Like
Thanks for helping me out @ccostan and @jnvd3b, I have narrowed it down to the latest release of ha-floorplan.html.
I rolled back to an earlier version and it’s working perfect on my Fire HD.
UPDATE: Doh! I found what the problem was, I forgot that the CDN’s were changed to local files in the lib folder. All is well now with the latest version and now I can actually see the warnings where they should be ha!
Thanks again!
3 Likes
I switched to your way now and it’s way nicer that way imho. I also added an opening animation (working on the closing one) via CSS. Also did a pull request for a small fix to allway @keyframe css rules in floorplan.yaml
Has anyone tried or looked at the possibility of using WebGL to render 3D models/floorplans and integrate that within HA?
Honestly I don’t think that it’s worth the additional effort needed. I imagine a 3D model being way harder to customize then a “simple” svg. file with css.
But if you wanna try I am sure there are lots of people who are willing to test it out 
~Cheers
1 Like
Since it’s a one-to-one assignment for entities and objects, is there anyway to change both the text and the color of an object to reflect the state of an entity?
For example when the alarm is armed, the text changes to “armed” and button changes red
Thanks!
Update: I ended up just creating a sensor value template and using that as a second entity. Not sure if there’s an easier way to go about it
2 Likes
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: toggle