The perfect card for controlling WLED

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.

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;
    }
```
15 Likes

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

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

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:

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?