{"id":2148,"date":"2023-01-23T06:58:07","date_gmt":"2023-01-23T12:58:07","guid":{"rendered":"https:\/\/lab.rapternet.us\/?p=2148"},"modified":"2022-12-04T18:59:12","modified_gmt":"2022-12-05T00:59:12","slug":"adding-wled-previews-to-home-assistant-dashboards","status":"publish","type":"post","link":"https:\/\/lab.rapternet.us\/?p=2148","title":{"rendered":"Adding WLED Previews to Home Assistant Dashboards"},"content":{"rendered":"\n

I found out recently about the webpage card in home assistant and how it can be used to add a WLED live view to your home assistant dashboard. Not only that, but its pretty simple to do as well!<\/p>\n\n\n\n\n\n\n\n

We need to start out with the URL to the WLED control page. This can be grabbed from home assistant if you don’t know it off hand. The device page for WLED devices has a link to visit the control page.<\/p>\n\n\n\n

\"\"
Device Links<\/figcaption><\/figure>\n\n\n\n

With the URL in hand, we go to add our webpage element to the home assistant UI.<\/p>\n\n\n\n

\"\"
Webpage Card for the Preview<\/figcaption><\/figure>\n\n\n\n

With the card selected, we drop in our URL to the settings and add “\/liveview” to it. With that the preview will show up in the webpage card. The aspect ratio can be adjusted to your preference to make it thinner and more reasonable in the UI.<\/p>\n\n\n\n

\"\"
Preview Card Configuration<\/figcaption><\/figure>\n\n\n\n

That’s all that’s needed to make a card showing the preview.<\/p>\n\n\n\n

\"\"
Preview Card Active<\/figcaption><\/figure>\n\n\n\n

Note, this doesn’t work remotely, even over VPN. This also isn’t working through WallPanel for wall tablet controls.<\/p>\n\n\n\n

Conclusion<\/h2>\n\n\n\n

I think this is a great way to add a bit of WLED flair to any control panels for it. It makes it easy to see whats currently going on across devices and strands. Not only that, but its simple to add to a Home Assistant dashboard as well!<\/p>\n\n\n\n

Resources<\/h2>\n\n\n\n