The perfect card for controlling WLED

Share your Projects! Dashboards & Frontend
,
24

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

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

26

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

1 Like
27

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'