The perfect card for controlling WLED

Share your Projects! Dashboards & Frontend
,
1

WLED control card

In this community post, I introduce a comprehensive Home Assistant configuration that enhances my lighting control and makes my WLED lighting more efficient. I will explain the code and the functions of each card step by step.

image
image517×777 28.2 KB

I also use the WLED Strip in this example as an Ambielight for my TV via Hyperion.ng. When I operate it in normal mode, I would like to have 2 different colours displayed, as it is aesthetically more appealing. Therefore it is divided into 2 segments (right and left). This map is based on this. You can of course adapt it to your liking. I hope you find a good use for it

Let’s dive in and discover how these cards optimize my lighting choices. Whether I’m a Home Assistant pro or just starting out, this post offers valuable insights to enhance my smart home experience.

1. Title Card:

image

This card is a custom title card that displays “AMBIELIGHT” as the title in the center of the card. It doesn’t have any tap actions.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: A  M  B  I  E  L  I  G  H  T
    subtitle: ''
    alignment: center
    title_tap_action:
      action: none

2. Chips Card:

image

All of these chips are aligned in the center of the card. The chips provide quick access to various functions and information related to your WLED setup, making it a convenient control panel for your lighting system. The different icons and colors help to distinguish the chips and make them visually appealing.

  1. Arrow Left Chip:
  • Icon: mdi:arrow-left
  • Icon Color: Cyan
  • Action: When tapped, it opens a URL to the device configuration page within Home Assistant.
  1. Uptime Chip:
  • Entity: sensor.wledambie_uptime
  • Icon Color: Red
  • Content Info: Displays the state of the sensor.wledambie_uptime entity.
  1. Wi-Fi Signal Chip:
  • Entity: sensor.wledambie_wi_fi_signal
  • Icon Color: Green
  • Content Info: Displays the state of the sensor.wledambie_wi_fi_signal entity.
  1. Estimated Current Chip:
  • Entity: sensor.wledambie_estimated_current
  • Icon: mdi:flash-triangle-outline
  • Icon Color: Yellow
  • Content Info: Displays the state of the sensor.wledambie_estimated_current entity.
  1. Arrow Right Chip:
  • Icon: mdi:arrow-right
  • Icon Color: Cyan
  • Action: When tapped, it opens a URL to http://192.168.0.17/.
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:arrow-left
        tap_action:
          action: url
          url_path: >-
            http://homeassistant.local:8123/config/devices/device/df8f160715eed439b5dd3e4cf60277fb
        icon_color: cyan
      - type: entity
        entity: sensor.wledambie_uptime
        icon_color: red
        content_info: state
      - type: entity
        entity: sensor.wledambie_wi_fi_signal
        icon_color: green
      - type: entity
        entity: sensor.wledambie_estimated_current
        icon: mdi:flash-triangle-outline
        icon_color: yellow
      - type: template
        icon: mdi:arrow-right
        tap_action:
          action: url
          url_path: http://192.168.0.17/
        icon_color: cyan
    alignment: center

3. Conditional Card:

image

This is a conditional card that displays an iframe if the master light (light.wledambie_master) is turned on. The iframe displays a live view from the device URL.

  - type: conditional
    conditions:
      - entity: light.wledambie_master
        state: 'on'
    card:
      type: iframe
      url: http://192.168.0.17/liveview
      aspect_ratio: 5%
      title: null

4. Grid of Template Cards:
[/wrap]
image

This part of the card is a grid that contains a set of custom template cards for controlling the master light.

Cards:

  • Power Control Card:
    • Icon: mdi:power
    • Icon Color: Green
    • Layout: Vertical
    • Entity: light.wledambie_master
    • Action: Toggles the ‘light.wledambie_master’ and targets ‘light.wledambie_links’ and ‘light.wledambie_rechts’. It uses an animation to pulse the icon based on the state of ‘light.wledambie_rechts’.
  • Sync sent Card:
    • Icon: mdi:upload-network-outline
    • Icon Color: Pink
    • Layout: Vertical
    • Entity: switch.wledambie_sync_send
    • Action: Toggles the ‘switch.wledambie_sync_send’ and uses an animation to pulse the icon based on the switch state.
  • Sync Recieve Card:
    • Icon: mdi:download-network
    • Icon Color: Purple
    • Layout: Vertical
    • Entity: switch.wledambie_sync_receive
    • Action: Toggles the ‘switch.wledambie_sync_receive’ and uses an animation to pulse the icon based on the switch state.
  • TV Ambient Light Card:
    • Icon: mdi:television-ambient-light
    • Icon Color: Orange
    • Layout: Vertical
    • Entity: light.hyph_ambie_tv
    • Action: Toggles the ‘light.hyph_ambie_tv’ and uses an animation to pulse the icon based on the light state.
  • Smoothening Card:
    • Icon: mdi:waveform
    • Icon Color: Turquoise
    • Layout: Vertical
    • Entity: switch.hyph_ambie_tv_component_smoothing
    • Action: Toggles the ‘switch.hyph_ambie_tv_component_smoothing’ in Hyperion and uses an animation to pulse the icon based on the switch state.
  • Restart Card:
    • Icon: mdi:restart
    • Icon Color: Red
    • Layout: Vertical
    • Entity: button.wledambie_restart
    • Action: Restarts the device
square: false
type: grid
cards:
  - type: custom:mushroom-template-card
    primary: ''
    icon: mdi:power
    icon_color: green
    layout: vertical
    secondary: ''
    entity: light.wledambie_master
    tap_action:
      action: call-service
      service: light.toggle
      target:
        entity_id:
          - light.wledambie_links
          - light.wledambie_rechts
      data: {}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: {% if is_state('light.wledambie_rechts', 'on') %}pulse 3s infinite{% else %}none{% endif %};
          }
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.5;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
  - type: custom:mushroom-template-card
    primary: ''
    icon: mdi:upload-network-outline
    icon_color: '#FF69B4'
    layout: vertical
    secondary: ''
    entity: switch.wledambie_sync_send
    tap_action:
      action: call-service
      service: switch.toggle
      target:
        entity_id: switch.wledambie_sync_send
      data: {}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: {% if is_state('switch.wledambie_sync_send', 'on') %}pulse 3s infinite{% else %}none{% endif %};
          }
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.5;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
  - type: custom:mushroom-template-card
    primary: ''
    icon: mdi:download-network
    icon_color: '#800080'
    layout: vertical
    secondary: ''
    entity: switch.wledambie_sync_receive
    tap_action:
      action: call-service
      service: switch.toggle
      target:
        entity_id: switch.wledambie_sync_receive
      data: {}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: {% if is_state('switch.wledambie_sync_receive', 'on') %}pulse 3s infinite{% else %}none{% endif %};
          }
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.5;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
  - type: custom:mushroom-template-card
    primary: ''
    icon: mdi:television-ambient-light
    icon_color: '#FFA500'
    layout: vertical
    secondary: ''
    entity: light.hyph_ambie_tv
    tap_action:
      action: call-service
      service: light.toggle
      target:
        entity_id: light.hyph_ambie_tv
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: {% if is_state('light.hyph_ambie_tv', 'on') %}pulse 3s infinite{% else %}none{% endif %};
          }
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.5;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
  - type: custom:mushroom-template-card
    primary: ''
    icon: mdi:waveform
    icon_color: '#40E0D0'
    layout: vertical
    secondary: ''
    entity: switch.hyph_ambie_tv_component_smoothing
    tap_action:
      action: call-service
      service: switch.toggle
      target:
        entity_id: switch.hyph_ambie_tv_component_smoothing
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: {% if is_state('switch.hyph_ambie_tv_component_smoothing', 'on') %}pulse 3s infinite{% else %}none{% endif %};
          }
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.5;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
  - type: custom:mushroom-template-card
    primary: ''
    icon: mdi:restart
    icon_color: red
    layout: vertical
    secondary: ''
    entity: button.wledambie_restart
    tap_action:
      action: call-service
      service: switch.toggle
      target:
        entity_id: switch.wledambie_restart
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: {% if is_state('switch.hyph_ambie_tv_component_smoothing', 'on') %}pulse 3s infinite{% else %}none{% endif %};
          }
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.5;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
columns: 6

5 Segment Entities Card:

Folded

image

Unfolded

image

This card is designed to control the brightness of two light segments. It allows you to adjust the brightness of the specified light entities within a foldable row.

type: entities
entities:
  type: custom:fold-entity-row
  head:
    type: custom:mushroom-light-card
    entity: light.wledambie_master
    layout: horizontal
    primary_info: none
    secondary_info: none
    show_brightness_control: true
    collapsible_controls: true
    icon_type: none
    use_light_color: true
  entities:
    type: custom:mushroom-light-card
    entity: light.wledambie_links
    use_light_color: true
    show_brightness_control: true
    primary_info: none
    secondary_info: none
    layout: horizontal
    collapsible_controls: true
    icon_type: entity-picture
    type: custom:mushroom-light-card
    entity: light.wledambie_rechts
    use_light_color: true
    show_brightness_control: true
    primary_info: none
    secondary_info: none
    layout: horizontal
    collapsible_controls: true
    icon_type: entity-picture
show_header_toggle: true

6. Grid of Light Cards

image

This grid contains custom light cards for controlling the ‘light.wledambie_links’ and 'light.wledambie_rechts

  • Type: Grid
  • Columns: 2
  • Cards:
    • Links Light Card: A custom card for controlling the ‘light.wledambie_links’.
      • Icon: mdi:arrow-collapse-left
      • Icon Color: Varies based on the RGB color of the entity.
    • Rechts Light Card: A custom card for controlling the ‘light.wledambie_rechts’.
      • Icon: mdi:arrow-collapse-right
      • Icon Color: Varies based on the RGB color of the entity.
square: false
type: grid
cards:
  type: custom:mushroom-light-card
  entity: light.wledambie_links
  icon: mdi:arrow-collapse-left
  use_light_color: true
  primary_info: none
  secondary_info: none
  show_brightness_control: false
  name: Links
  layout: vertical
  collapsible_controls: true
  card_mod:
    style: |
      ha-card {
        {% set r = state_attr(config.entity, 'rgb_color')[0] %}
        {% set g = state_attr(config.entity, 'rgb_color')[1] %}
        {% set b = state_attr(config.entity, 'rgb_color')[2] %}
        background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
      }
  type: custom:mushroom-light-card
  entity: light.wledambie_rechts
  icon: mdi:arrow-collapse-right
  use_light_color: true
  primary_info: none
  secondary_info: none
  show_brightness_control: false
  layout: vertical
  name: Rechts
  collapsible_controls: true
  fill_container: false
  card_mod:
    style: |
      ha-card {
        {% set r = state_attr(config.entity, 'rgb_color')[0] %}
        {% set g = state_attr(config.entity, 'rgb_color')[1] %}
        {% set b = state_attr(config.entity, 'rgb_color')[2] %}
        background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
      }
columns: 2

7. Horizontal Stack with Select Cards:

image

This horizontal stack contains two custom select cards for choosing color palettes and presets

  • Type: Horizontal Stack
  • Cards:
    • Color Palette Select Card:
      • Entity: select.wledambie_color_palette
    • Preset Select Card:
      • Entity: select.wledambie_preset
type: horizontal-stack
cards:
  type: custom:mushroom-select-card
  entity: select.wledambie_color_palette
  primary_info: none
  icon_color: deep-purple
  secondary_info: none
  layout: horizontal
  type: custom:mushroom-select-card
  entity: select.wledambie_preset
  layout: horizontal
  primary_info: none
  secondary_info: none

8. Grid of Number Cards:

image

This grid contains two custom number cards for adjusting intensity and speed

  • Type: Grid
  • Columns: 1
  • Cards:
    • Intensity Number Card:
      • Entity: number.wledambie_intensity
    • Speed Number Card:
      • Entity: number.wledambie_speed
square: false
type: grid
cards:
  type: custom:mushroom-number-card
  entity: number.wledambie_intensity
  primary_info: none
  fill_container: false
  display_mode: slider
  layout: horizontal
  secondary_info: none
  icon_color: orange
  type: custom:mushroom-number-card
  entity: number.wledambie_speed
  layout: horizontal
  secondary_info: none
  primary_info: none
  icon_color: deep-orange
columns: 1

This configuration has taken my smart home experience to a new level, and I hope it provides valuable inspiration for all of you.

PS:Here is the entire code to copy and use in the lovelace interface

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: A  M  B  I  E  L  I  G  H  T
    subtitle: ''
    alignment: center
    title_tap_action:
      action: none
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:arrow-left
        tap_action:
          action: url
          url_path: >-
            http://homeassistant.local:8123/config/devices/device/df8f160715eed439b5dd3e4cf60277fb
        icon_color: cyan
      - type: entity
        entity: sensor.wledambie_uptime
        icon_color: red
        content_info: state
      - type: entity
        entity: sensor.wledambie_wi_fi_signal
        icon_color: green
      - type: entity
        entity: sensor.wledambie_estimated_current
        icon: mdi:flash-triangle-outline
        icon_color: yellow
      - type: template
        icon: mdi:arrow-right
        tap_action:
          action: url
          url_path: http://192.168.0.17/
        icon_color: cyan
    alignment: center
  - type: conditional
    conditions:
      - entity: light.wledambie_master
        state: 'on'
    card:
      type: iframe
      url: http://192.168.0.17/liveview
      aspect_ratio: 5%
      title: null
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-template-card
        primary: ''
        icon: mdi:power
        icon_color: green
        layout: vertical
        secondary: ''
        entity: light.wledambie_master
        tap_action:
          action: call-service
          service: light.toggle
          target:
            entity_id:
              - light.wledambie_links
              - light.wledambie_rechts
          data: {}
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: {% if is_state('light.wledambie_rechts', 'on') %}pulse 3s infinite{% else %}none{% endif %};
              }
              @keyframes pulse {
                0% {
                  transform: scale(1);
                  opacity: 1;
                }
                50% {
                  transform: scale(1.2);
                  opacity: 0.5;
                }
                100% {
                  transform: scale(1);
                  opacity: 1;
                }
              }
      - type: custom:mushroom-template-card
        primary: ''
        icon: mdi:upload-network-outline
        icon_color: '#FF69B4'
        layout: vertical
        secondary: ''
        entity: switch.wledambie_sync_send
        tap_action:
          action: call-service
          service: switch.toggle
          target:
            entity_id: switch.wledambie_sync_send
          data: {}
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: {% if is_state('switch.wledambie_sync_send', 'on') %}pulse 3s infinite{% else %}none{% endif %};
              }
              @keyframes pulse {
                0% {
                  transform: scale(1);
                  opacity: 1;
                }
                50% {
                  transform: scale(1.2);
                  opacity: 0.5;
                }
                100% {
                  transform: scale(1);
                  opacity: 1;
                }
              }
      - type: custom:mushroom-template-card
        primary: ''
        icon: mdi:download-network
        icon_color: '#800080'
        layout: vertical
        secondary: ''
        entity: switch.wledambie_sync_receive
        tap_action:
          action: call-service
          service: switch.toggle
          target:
            entity_id: switch.wledambie_sync_receive
          data: {}
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: {% if is_state('switch.wledambie_sync_receive', 'on') %}pulse 3s infinite{% else %}none{% endif %};
              }
              @keyframes pulse {
                0% {
                  transform: scale(1);
                  opacity: 1;
                }
                50% {
                  transform: scale(1.2);
                  opacity: 0.5;
                }
                100% {
                  transform: scale(1);
                  opacity: 1;
                }
              }
      - type: custom:mushroom-template-card
        primary: ''
        icon: mdi:television-ambient-light
        icon_color: '#FFA500'
        layout: vertical
        secondary: ''
        entity: light.hyph_ambie_tv
        tap_action:
          action: call-service
          service: light.toggle
          target:
            entity_id: light.hyph_ambie_tv
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: {% if is_state('light.hyph_ambie_tv', 'on') %}pulse 3s infinite{% else %}none{% endif %};
              }
              @keyframes pulse {
                0% {
                  transform: scale(1);
                  opacity: 1;
                }
                50% {
                  transform: scale(1.2);
                  opacity: 0.5;
                }
                100% {
                  transform: scale(1);
                  opacity: 1;
                }
              }
      - type: custom:mushroom-template-card
        primary: ''
        icon: mdi:waveform
        icon_color: '#40E0D0'
        layout: vertical
        secondary: ''
        entity: switch.hyph_ambie_tv_component_smoothing
        tap_action:
          action: call-service
          service: switch.toggle
          target:
            entity_id: switch.hyph_ambie_tv_component_smoothing
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: {% if is_state('switch.hyph_ambie_tv_component_smoothing', 'on') %}pulse 3s infinite{% else %}none{% endif %};
              }
              @keyframes pulse {
                0% {
                  transform: scale(1);
                  opacity: 1;
                }
                50% {
                  transform: scale(1.2);
                  opacity: 0.5;
                }
                100% {
                  transform: scale(1);
                  opacity: 1;
                }
              }
      - type: custom:mushroom-template-card
        primary: ''
        icon: mdi:restart
        icon_color: red
        layout: vertical
        secondary: ''
        entity: button.wledambie_restart
        tap_action:
          action: call-service
          service: switch.toggle
          target:
            entity_id: switch.wledambie_restart
    columns: 6
  - type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          type: custom:mushroom-light-card
          entity: light.wledambie_master
          layout: horizontal
          primary_info: none
          secondary_info: none
          show_brightness_control: true
          collapsible_controls: true
          icon_type: none
          use_light_color: true
        entities:
          - type: custom:mushroom-light-card
            entity: light.wledambie_links
            use_light_color: true
            show_brightness_control: true
            primary_info: none
            secondary_info: none
            layout: horizontal
            collapsible_controls: true
            icon_type: entity-picture
          - type: custom:mushroom-light-card
            entity: light.wledambie_rechts
            use_light_color: true
            show_brightness_control: true
            primary_info: none
            secondary_info: none
            layout: horizontal
            collapsible_controls: true
            icon_type: entity-picture
    show_header_toggle: true
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-light-card
        entity: light.wledambie_links
        icon: mdi:arrow-collapse-left
        use_light_color: true
        primary_info: none
        secondary_info: none
        show_brightness_control: false
        name: Links
        layout: vertical
        collapsible_controls: true
        card_mod:
          style: |
            ha-card {
              {% set r = state_attr(config.entity, 'rgb_color')[0] %}
              {% set g = state_attr(config.entity, 'rgb_color')[1] %}
              {% set b = state_attr(config.entity, 'rgb_color')[2] %}
              background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
            }
      - type: custom:mushroom-light-card
        entity: light.wledambie_rechts
        icon: mdi:arrow-collapse-right
        use_light_color: true
        primary_info: none
        secondary_info: none
        show_brightness_control: false
        layout: vertical
        name: Rechts
        collapsible_controls: true
        fill_container: false
        card_mod:
          style: |
            ha-card {
              {% set r = state_attr(config.entity, 'rgb_color')[0] %}
              {% set g = state_attr(config.entity, 'rgb_color')[1] %}
              {% set b = state_attr(config.entity, 'rgb_color')[2] %}
              background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
            }
    columns: 2
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-select-card
        entity: select.wledambie_color_palette
        primary_info: none
        icon_color: deep-purple
        secondary_info: none
        layout: horizontal
      - type: custom:mushroom-select-card
        entity: select.wledambie_preset
        layout: horizontal
        primary_info: none
        secondary_info: none
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-number-card
        entity: number.wledambie_intensity
        primary_info: none
        fill_container: false
        display_mode: slider
        layout: horizontal
        secondary_info: none
        icon_color: orange
      - type: custom:mushroom-number-card
        entity: number.wledambie_speed
        layout: horizontal
        secondary_info: none
        primary_info: none
        icon_color: deep-orange
    columns: 1
view_layout:
  grid-area: left
card_mod:
  style: |
    ha-card {
      background: #1c1c1c;
      padding-left: 25px;
      padding-right: 25px;
      padding-bottom: 25px;
    }
```
22 Likes
2

I really love this card, but do you know of a way to get the liveview bar when HA is using ssl? I have been trying to get it working but can’t seem to find a way

4

I’m very happy to hear that you like the map. Unfortunately I have the same problem as you with the live view. On my mobile dashboard, which runs over SSL, I removed the live view. If you find a solution, I would be happy if you could share it here

5

Sure :slight_smile: problem for me is that the ssl connection for some reason cannot be split… I tried to have it split between local and duckdns for many times and somehow my HA keeps on getting unreachable if I switch from internal 8123 to internal 443 after changing all settings to what it needs to be with NginX in between… So even locally it doesn’t work :confused:

6

Has anyone been able to figure out the liveview limiation when using ssl?

8

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

9

Could you please tell what Lovelace cards I have to install?

10

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

11

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

12

Or just replacenit with 2 of your light entities and you will see how it works

13

Thanks Still for fast reply.
Ciao

14

Thank you so much for the sharing, here’s the result that I completed heavily based on your code

Capture d’écran, le 2024-05-11 à 11.35.04
Capture d’écran, le 2024-05-11 à 11.35.04502×669 153 KB

1 Like
16

Nice dashboard :slight_smile:

To view WLED over TLS you can reverse proxy it. I did that with the Nginx Proxy add-on:

  1. Give WLED device a static IP or hostname (EG 192.168.0.42)

  2. Set up a domain with DNS that points to your Nginx Proxy (EG wled.example.com), & place necessary certificates & keys in /ssl/

  3. Create /share/nginx_proxy/wled.conf & restart Nginx

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

  4. 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: WARNING :unlock:

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. :wink:

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
17

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 :slight_smile: 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

18

very cool, as soon as I find some time I’ll test it out, thanks! I’m sure it will help some people here

19

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…

image
image546×630 56.9 KB

20

Better late than never :slight_smile:

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

21

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:
Animation3

3 Likes
22

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.

23

How did you achieve this with the Bubble card, what settings, etc?