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.