How to Add WLED “Peek” Feature to Home Assistant

by Danny
3 comments

READING TIME: 3 MINUTES

In this short guide, I’m going to show you how to add the peek visualizer feature to Home Assistant.

You don’t necessarily need WLED integrated into Home Assistant for this, but it makes sense to integrate so you can control your LED strips from HA as well as see exactly what effect is running – without needing to open the WLED web interface.

You can follow my How To Add WLED to Home Assistant guide if you haven’t integrated it yet.

It also looks really cool when added to your Fire tablet dashboards using Fully-Kiosk and Wallpanel. I’m using this for multiple WLED controllers, one for exterior roofline led strips, and also for my 3D printed nanoleaf panels in my office.


What is Peek?

After you have WLED up and running, you access it from an IP address in your web browser. One of the options at the top is Peek.

If you click Peek, it shows you a visual representation of what effect is currently being played.

But did you know you can see the visualizer by adding a simple /liveview to the end of your WLED IP address? For example, http://192.168.68.102/liveview will show you this:

So, that got me thinking.

Since we can’t display the visualizer from the official WLED integration, I wonder if there’s a way to add that URL to Home Assistant another way. You definitely can! I shared how to do this on Reddit and you guys loved it, so I decided to make a full guide I can link to from other blog posts.

Here’s how to do it.


Add URL to Webpage Card

I decided to use a Conditional Card along with a Webpage card. The conditional card basically states “If my DigQuad controller is ON (effects are running), then display the peek bar.” We only need 1 condition of it being on; we don’t need a second one to show that’s it off.

Add a Conditional Card to a dashboard.

Under Conditions, set the entity your WLED controller:

Then, click the Card tab. Add the /liveview URL to the URL field and set the aspect ratio to 4%.

That’s all there is to it! You’ll now be able to see exactly what effect is running. Hopefully this simple guide brings your Christmas or LED strip dashboards a little more life.

NOTE: This will only work on your local network. If you open the Home Assistant Companion app outside your network, it won’t display the visualizer. This is due to HA not allowing for non-secure(http) iframes. I suspect it would work with a reverse proxy. I do have a Wireguard VPN set up in Home Assistant and attempted to view it remotely, but it still wouldn’t display in the app. However, I was able to go to the IP/liveview in a web browser when connected to my VPN and it worked successfully.

Here’s an example of it running:


My Favorite Home Assistant Devices

Below are some of the Home Assistant-compatible devices I personally use in my home. I highly recommend each of them.

The full list of all Home Assistant compatible & recommended devices I use can be found on my Equipment List page.

3 comments

You may also like

3 comments

Dave November 30, 2022 - 3:27 am

This is really awesome, thanks for sharing!

Reply
Danny November 30, 2022 - 9:35 am

You’re welcome! I’m surprised no one figured out how to do this before me, haha.

Reply
Sean December 21, 2022 - 1:13 am

So awesome. Bummer though as Home Assistant won’t display it if HA is running on https 🙁

Reply

Leave a Comment