BTW, maybe we need a new name for this? Floorplan is just one example of its use, but as we can see, it’s become more of a general purpose graphical interface into HA.
2 Likes
Possibly but I think most peeps are using it for what you designed it for, I just think outside the box sometimes 
1 Like
Hi Keith,
Now ready. Grab the latest file from GitHub:
ha-floorplan/www/custom_ui/floorplan/ha-floorplan.html
Then simply add the action: section to the relevant group(s) in your floorplan config. Below is just an example I used as I was testing this with my doorbell. As you can see, the action simply calls the toggle service for the entity being clicked:
- name: Switches
entities:
- switch.doorbell
states:
- state: 'on'
class: 'doorbell-on'
- state: 'off'
class: 'doorbell-off'
action:
service: toggle
Let me know how it goes…
2 Likes
The info cards still come up, I tried with and without a dash before service.
I’m running HA site on HTTP. No outside access except for SSH tunnel. I suppose you could argue that this makes a passphrase unnecessary, but some may still want a passphrase for LAN access.
I like the idea that suppressing some pop-up info cards. A single click to turn on a switch is much quicker. I have many switches, It takes me sometimes to turn on or turn off the switches with unnecessary clicks. If it is possible, It would be great. Thanks to you, pkozul . Thanks to you, keithh666.
2 Likes
, my remote is now functional :D, thanks for all your hard work on this Thanks for letting us know. Keep the ideas rolling…
2 Likes
I suppose you could also make a rest switch to duplicate the original switch and then have one for ON/OFF and the duplicate for state card options.
I like this floorplan layout so much I may install additional tablets in my home with this as the main screen for quick & easy control & visual verification.
Eventually I will have a tinker room (once the rest of my kids move out) that this would be ideal for. Maybe even break out certain rooms to their own layout that have multiple controllable items.
1 Like
Awesome, had this idea a bit back. Now I can probably pull it off!
1 Like
Maybe ImageMapper or something along those lines?
My generic name suggestion for this excellent addition is:
HTML Graphical User Interface.
When is it going to go prime time in HASS?
Please kindly suggest. After copying the new version of ha-floorplan.html to /var/opt/homeassistant/www/custom_ui/floorplan. Then adding service: toggle to my floorplan.yaml as stated above. I still could not hide the popup state card, when I click the switches. I tested with HA 0.42.2 and 0.45.1. Neither of the two version work. Thank you in advance.
states:
- state: 'on'
class: 'doorbell-on'
- state: 'off'
class: 'doorbell-off'
action:
service: toggleThought I’d make some more use of the floorplan functionality. Probably overkill, but I now have a graphical state card for my Ring doorbell.
As you can see in the screenshot below, it shows the battery level (using an SVG text element).
The little camera lens can be hovered/clicked to show last motion detected (last motion sensor), and the actual doorbell button can be hovered/clicked to show when it was last pressed by a real visitor (last ding sensor).
Both of these sensors (i.e. SVG circles) get filled with colour when their states changed to ‘on’.
I will soon add the Ring config file and Ring SVG to the GitHub repo, to possibly become part of a cookbook for what can be done with the floorplan.
Hmmm… another reason for changing the name of this project to something more generic…
7 Likes
I was thinking again today, but couldn’t this be used as a fully fledged frontend/dash for HA. I don’t know much about css or html but from what you have already accomplished it seems not so big a jump?
2 Likes
agreed @keithh666
Would love this to be the default screen for some use cases. eg a controller dash mounted on the wall.
But would like to dig in to diagnostic type screens for myself when anomalies or issues arise.
God point Keith. Yeah, I guess there is a point up to which it does make sense to hack away at the existing HA front end (which is what the Floorplan has been about), but then it raises the question, is it better to roll out a new stand-alone app that is fully independent of the HA Polymer-based web application?
The great thing is that HA comes with a WebSocket API, which means you can write your own web apps using any web technology / frameworks, and have full access to HA (events, services, etc.). The sky is the limit.
In terms of how the Floorplan functionality has been developed, I had to learn the basics of the Polymer framework (since the HA front end is built using that JavaScript framework). It works well as a a general purpose user interface for HA, as it’s based on reusable components (i.e. works well for for displaying HA entities in a consistent manner).
To roll out more targeted user interfaces for HA, I guess frameworks like Angular, Aurelia, React, etc. would be good options for developing such apps. Either way, hats of to the HA architecture as it’s been made with all of this flexibility in mind.
1 Like
Just for the sake of documentation for future reference, this is how I managed to get a JPG (or PNG for that matter) converted to SVG, for displaying in HA (using the Floorplan functionality of course). I did this for the Ring doorbell example I posted.
- Downloaded the JPG (or PNG)
- In Paint.net, posterized to a level of 50 (Adjustments > Posterize) and saved the file
- Used this online tool to upload the image and convert to SVG: http://www.aconvert.com/image/png-to-svg/
The resulting SVG file ended being only about 20KB in size.
1 Like
Thanks for this contribution, I’m an architect, and I have super detailed 3d model and clean 2d drawings of my house, so this will be fun try out. Sorry I am late to the party here and I know the docs are still pending, but can I refer to the old documentation to get this new version to work?
Welcome aboard! Never too late, as this project is still evolving.
The old docs still have some relevance, so it’s worthwhile reading them. Having said that, the best way to get the new version working is to copy all the files in the new GutHub repo, and keep them in the exact same folder structure. After doing that, it’s best to test whether that standard set up works. Once you’ve confirmed that, then replace the SVG file(s) with your own, and modify the floorplan config to match.
I will really push to make some time in the next few days to write the new doco.
Let me know if you need any assistance in the meantime.
2 Likes