The perfect card for controlling WLED

[MichaelDot]

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;
        }

[davidtja]

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

[MichaelDot]

yes. Create another button that navigates to the name of the popup card.

[pciduncan]

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'

[danishru]

Hello everyone! I think this is the best place to show you my integration, which is a perfect fit for this topic and will make the Still_ill card even cooler! This integration allows you to display the Live View aka. “Peek” of your WLED on your HA dashboard. No port forwarding, no external services, no nginx, and so on… just your HA and WLED. It works in the app and over the internet if you publish your HA. You can install it via HACS or manually, add the card to your dashboard through the UI, and configure it with card-mod however you like! By the way, you can create as many Live View cards as you want, and they’ll all use just one WLED connection. More information and discussion about the integration can be found here: WLED Live View Proxy for Home Assistant.