Has anyone been able to figure out the liveview limiation when using ssl?
Take a look at the comments in this post. This should work:
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/9148?u=still_ill
Could you please tell what Lovelace cards I have to install?
HI everybody,
I’m seraching for a pretty card for my WLED and I found this topic.
I tried to configure a manual card using the code of this topic, but I can’t understand how could have been named in my WEDLED “Lillo_LED”, the entities that you call: - light.wledambie_links and - light.wledambie_rechts.
What is their function, so that I can understand where to look?
consider that all the entities that you write in English, my HA in Italian gives them to me in Italian
Can you help me, please?
Thanks and ciao
wledambie_left and wledambie_right are just 2 segments in my strip. Since this is attached to my TV, I like it better in two colors. Simply assign one of the two entities
Or just replacenit with 2 of your light entities and you will see how it works
Thanks Still for fast reply.
Ciao
1 Like
Nice dashboard 
To view WLED over TLS you can reverse proxy it. I did that with the Nginx Proxy add-on:
-
Give WLED device a static IP or hostname (EG
192.168.0.42) -
Set up a domain with DNS that points to your Nginx Proxy (EG
wled.example.com), & place necessary certificates & keys in/ssl/ -
Create
/share/nginx_proxy/wled.conf& restart Nginxserver { server_name wled.example.com; listen 80; # optional HTTP support listen 443 ssl; ssl_certificate /ssl/fullchain.pem; ssl_certificate_key /ssl/privkey.pem; ssl_session_timeout 1d; ssl_session_cache shared:MozSSL:10m; ssl_session_tickets off; ssl_dhparam /data/dhparams.pem; add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always; proxy_buffering off; location / { proxy_pass http://192.168.0.42; proxy_set_header Host $host; } location /ws { # optional websocket support proxy_pass http://192.168.0.42/ws; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_read_timeout 1d; } } -
Add to your dashboard
type: conditional conditions: - entity: light.wled state: 'on' card: type: iframe url: https://wled.example.com/liveview?ws aspect_ratio: 5%
WARNING 
Stating the obvious, but if you port forward Nginx to the internet: your WLED will be exposed to the internet. Add authentication of your choice if you want to do that. 
One option is to create an Nginx add-on with Ingress support, which is documented in the developer docs.
Hope that helps someone
1 Like
I haven’t been here for a while because I’ve been working a lot in the last few weeks and haven’t found the time for it. but seeing your comment and your dashboard made me very happy looks really great. This shows again that it is best to share such things instead of just using them for yourself. I’m so glad if I could help
if you now want to add some color to your lights, take a look at this post in made
very cool, as soon as I find some time I’ll test it out, thanks! I’m sure it will help some people here
Thanks for the WLED card ideas. I’m a little late to the game, but why not just use the Webpage card to show the actual WLED interface. That way, all options are available. You can still have the HA WLED entities, which will populate based on what you choose in the real interface. Thanks…
Better late than never
The reason is quite simple: firstly, aesthetics. My dashboard was completely based on mushroom cards at the time, as it was the one that I liked the most visually.
The other important reason is the fact that I could create it however I wanted, with the functions I wanted and without the ones I didn’t want. It’s also very practical, as you can adapt it with a few small changes to control different instances with one interface without having to switch between the web interfaces
I certainly understand the aesthetics part. Just FYI - what I did was use the bubble-card to pop up the WLED interface only when needed:
3 Likes
Has anyone figured out how to make a “fancier” select option for a card for WLED? Like the select a preset option. Even the example above uses the entity card and the select.entity feature to give the pulldown option on the card.
I was trying lots of things with custom button card and other ideas but I can’t find a customizable select pulldown feature for lovelace, just the standard entity cards one.
My alternative is to make pretty button of a few presets that get picked when pushing the buttons, but having a nice customizable pulldown would be nice. I know you can customize a pulldown in javascript so I’m going to look into that as well.
How did you achieve this with the Bubble card, what settings, etc?
OK. I just messed around with this until I figured out how to do it. First, create the vertical stack card for the bubble pop up and then you have to insert custom css to allow it to expand vertically. I only made one so far but I also wanted this since it simplifies everything and is the default interaction anyway. Then create you button or whatever you want to navigate to the pop up bubble card
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#wled-branch-Lamp'
show_header: false
card_layout: normal
rows: 8
- type: iframe
url: http://192.168.86.2
title: Branch Lamp
card_mod:
style: |
ha-card {
height: calc(100vh - 100px) !important;
}
That seems neat - when I create all looks fine then when I hit done on the page it dissapears - I cant see any visibility restrictions. Perhaps I need to add some button to link to it? Thanks
yes. Create another button that navigates to the name of the popup card.
1 Like
Oops. Sorry, I didn’t see your request for the code. Here are the 2 cards (one a custom:button-card, and the other the bubble card:
This button calls the bubble-card:
- type: custom:button-card
name: Desk
entity: light.wled_desk
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: '#wled_desk'
show_state: false
show_icon: true
This is the bubble-card (use your wled controller’s IP address, of course):
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#wled_desk'
name: WLED - Desk Strip
icon: mdi:led-strip-variant
- type: iframe
url: http://192.168.46.104
aspect_ratio: '50:90'