I built 3d floor plan in HA to control stuff on my home. It’s so much next level when using picture elements to show that door really is open when it is opened.
Now that I’m done with that I started to wonder how to use it. I love SharpTools and have been using it as my main home automation dashboard. Now I would like to add my HA floorplan as a part of SharpTools Dashboard. Has anyone done it before and did you somehow manage to do it for example using custom tiles or something. First thing I noticed is that HA is http and if I remember right custom tiles needs https for embedding. So there’s a couple of things to do before I’m able to test. But yeah any good solutions?
Yes, you can use Custom Tiles with a URL to embed other sites.
As you noted, most browser enforce Mixed Content restrictions (eg. only HTTPS within HTTPS), so you would either need to implement one of the mixed content workarounds or enable a valid SSL cert on your HASS instance (it can just be a local SSL access - no need to expose it to the internet).
Alternative Approach: Super Tiles
I would note that some people have started using Super Tiles for this sort of thing. With the introduction of Custom Icons, you can upload your own images and use those within tiles.
Specifically, some people will create a ‘Static Icon’ within a Super Tile, select their base floorplan image as the ‘icon’, then move that to the bottom most layer. Then you can add Thing Icons or other icons as higher tier layers and can even customize which custom image is shown for each state of your device.
You can use your keyboard arrow keys to nudge things into various positions. It’s not something we have officially documented as we didn’t build enough guardrails for it yet, but from a PC/Mac, you can also select an item and then use Ctrl+C to copy the raw JSON for the item to your clipboard. You can then paste that into a text editor and modify the height, width, top, and left attributes for exact positioning of items. Just be extra careful to make sure you enter a valid percentage for when editing as we do not have validations in place as guardrails for when you paste things back in.
Interested in whether the OP proceeded here? I am looking to embed certain Home Assistant dashboards into Sharptools. For example my energy:
The sharptools side is easy but so far I haven’t figured out how to extract a html link to a single dashboard on the HA side. I have posted on the home assistant forums but not convinced you can do it.
I used Kiosk mode from HACS to hide the side and top menus.
Is this what you mean? After that was installed, my custom tile read as
http://##.##.##.##.st-ip.net:8123/lovelace/sonos?kiosk
I also had to have this in my configuration.yaml for it to show up.
http:
use_x_frame_options: false
1 Like
Thanks. I haven’t ever messed with yaml and I did have Lovelace installed but uninstalled it ages ago as I haven’t used it to date. Do I need to install Lovelace for this to work? Thanks.
It doesn’t seem that Kiosk mode is a suitable way to go about this unfortunately. Apparently the author stopped work on this over 4 years ago and if you follow this thread:
There are a lot of things that need to be done every time Home Assistant breaks something.