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