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.
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
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.
- 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.
- Uptime Chip:
- Entity: sensor.wledambie_uptime
- Icon Color: Red
- Content Info: Displays the state of the
sensor.wledambie_uptime entity.
- 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.
- 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.
- 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
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]
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
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
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:
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
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;
}
```
