I built a VERY simple HTML page that has 3 camera feeds and a simple HA dashboard in an iframe all arranged in a table. It works amazingly well to create a page where I can watch my cameras live and also have some basic HA info such as doors that are open, buttons to move cameras, etc. I use card_mod to customize colors of the cards so an open door badge shows green, the thermostat card shows blue when the A/C is on, etc.
The problem: when I load the HTML page, more times than not, the HA frame loads but without the CSS formatting from card_mod. I can right-click the frame in the browser and click “Reload Frame” and after 1-5 tries, it will finally load properly. Sometimes it loads properly the first time, sometimes it takes a couple tries. If I open the HA dashboard natively in the browser, it works fine first time every time.
I’ve done some light searching, but I’m not a web developer so I’m not even sure what I’m looking for - but I’d like it if the frame could take the extra couple seconds or whatever’s happening to properly load the CSS from card_mod so I don’t have to do the Reload Frame trick.
Any ideas?
here’s the HTML:
<html>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><img src = "http://camera1.domain.com/ISAPI/Streaming/channels/102/httpPreview" width="1408" height="430" style="border:none;"></td>
<td rowspan="2"><iframe src="http://homeassistant.domain.com:8123/lovelace-all/doors" title="Beach" width="410" height="910" ></iframe></td>
</tr>
<tr>
<td><img src = "http://camera2.domain.com/Streaming/channels/1/preview"></td>
<td><img src = "http://camera3.domain.com/Streaming/channels/1/preview"></td>
</tr>
</tbody>
</table>
</html>
here’s what it looks like when it doesn’t load properly (black squares for camera privacy):
here’s what it looks like when it does load properly:
