Hi everyone, i am using Lovelace in an ordinary way, not in YAML mode. However do editing partially in YAML for custom cards.
The issue that i am facing is that i am getting a huge code. Here is a short piece of my almost 2k lines config for light control page.
Is there any way to reduce it somehow or use some sort of templates for similar cards to reuse same code?
I tried to use YAML variables for styles, but as soon es i press “Save”, those variables are instantly replaced by their contents.
type: custom:bootstrap-grid-card
class: d-flex justify-content-center align-items-center
cards:
- type: row
cards:
- type: vertical-stack
class: col-sm-6 col-lg-6
cards:
- type: custom:vertical-stack-in-card
style: |
:host {
--card-background-color: rgba(255, 255, 255, 0.05)
}
cards:
- type: custom:slider-button-card
entity: light.living_room_all
name: Гостиная
action_button:
mode: custom
show: true
tap_action:
action: toggle
style: |
ha-card .slider,
ha-card .slider .slider-bg,
ha-card .button.off {
background-color: transparent !important;
}
ha-card .slider-thumb {
transform: translateX(calc(-100% + var(--slider-value)));
background-color: var(--slider-color, #ffffff);
}
ha-card .off .slider-thumb {
display: none;
}
:host {
--action-icon-color-on: #e9e9e8;
--action-icon-color-off: #e9e9e888;
--paper-item-icon-active-color: #ffffff;
--slider-color: #ffffff;
--label-color-on: #111111;
--label-color-off: #bbbbbb;
--card-background-color: #00000000
}
slider:
direction: left-right
background: solid
use_state_color: false
use_percentage_bg_opacity: false
show_track: true
toggle_on_click: false
force_square: false
show_name: true
show_state: false
compact: true
icon:
show: true
use_state_color: true
icon: fas:lightbulb
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Зал
hide_header: true
style: |
:host .content {
width: 50vw;
height: 80vh;
}
deviceID: this
card:
type: custom:light-popup-card
entity: light.living_room_all
displayType: slider
fullscreen: true
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
actionSize: 4.5em
actionsInARow: 4
actions:
- service: light.turn_on
service_data:
entity_id: light.living_room_all
color_temp: 153
color: '#c8d7de'
- service: light.turn_on
service_data:
entity_id: light.living_room_all
color_temp: 220
color: '#e6e3e1'
- service: light.turn_on
service_data:
entity_id: light.living_room_all
color_temp: 370
color: '#ce944b'
- action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Зал
hide_header: true
card:
type: entities
show_header_toggle: false
entities:
- entity: light.living_room_all
secondary_info: last-changed
- type: custom:light-entity-card
entity: light.living_room_all
brightness: false
color_temp: true
full_width_sliders: true
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
consolidate_entities: true
- type: horizontal-stack
cards:
- type: custom:slider-button-card
entity: light.living_room_01
name: Стол
action_button:
mode: custom
show: true
tap_action:
action: toggle
style: |
ha-card .slider,
ha-card .slider .slider-bg,
ha-card .button.off {
background-color: transparent !important;
}
ha-card .slider-thumb {
transform: translateX(calc(-100% + var(--slider-value)));
background-color: var(--slider-color, #ffffff);
}
ha-card .off .slider-thumb {
display: none;
}
:host {
--action-icon-color-on: #e9e9e8;
--action-icon-color-off: #e9e9e888;
--paper-item-icon-active-color: #ffffff;
--slider-color: #ffffff;
--label-color-on: #111111;
--label-color-off: #bbbbbb;
--card-background-color: #00000000
}
slider:
direction: left-right
background: solid
use_state_color: false
use_percentage_bg_opacity: false
show_track: true
toggle_on_click: false
force_square: false
show_name: true
show_state: false
compact: true
icon:
show: true
use_state_color: true
icon: fas:lightbulb
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Стол
hide_header: true
style: |
:host .content {
width: 50vw;
height: 80vh;
}
deviceID: this
card:
type: custom:light-popup-card
entity: light.living_room_01
displayType: slider
fullscreen: true
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
actionSize: 4.5em
actionsInARow: 4
actions:
- service: light.turn_on
service_data:
entity_id: light.living_room_01
color_temp: 153
color: '#c8d7de'
- service: light.turn_on
service_data:
entity_id: light.living_room_01
color_temp: 220
color: '#e6e3e1'
- service: light.turn_on
service_data:
entity_id: light.living_room_01
color_temp: 370
color: '#ce944b'
- action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Стол
hide_header: true
card:
type: entities
show_header_toggle: false
entities:
- entity: light.living_room_01
secondary_info: last-changed
- type: custom:light-entity-card
entity: light.living_room_01
brightness: false
color_temp: true
full_width_sliders: true
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
consolidate_entities: true
- type: custom:slider-button-card
entity: light.living_room_02
name: Зал
action_button:
mode: custom
show: true
tap_action:
action: toggle
style: |
ha-card .slider,
ha-card .slider .slider-bg,
ha-card .button.off {
background-color: transparent !important;
}
ha-card .slider-thumb {
transform: translateX(calc(-100% + var(--slider-value)));
background-color: var(--slider-color, #ffffff);
}
ha-card .off .slider-thumb {
display: none;
}
:host {
--action-icon-color-on: #e9e9e8;
--action-icon-color-off: #e9e9e888;
--paper-item-icon-active-color: #ffffff;
--slider-color: #ffffff;
--label-color-on: #111111;
--label-color-off: #bbbbbb;
--card-background-color: #00000000
}
slider:
direction: left-right
background: solid
use_state_color: false
use_percentage_bg_opacity: false
show_track: true
toggle_on_click: false
force_square: false
show_name: true
show_state: false
compact: true
icon:
show: true
use_state_color: true
icon: fas:lightbulb
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Зал
hide_header: true
style: |
:host .content {
width: 50vw;
height: 80vh;
}
deviceID: this
card:
type: custom:light-popup-card
entity: light.living_room_02
displayType: slider
fullscreen: true
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
actionSize: 4.5em
actionsInARow: 4
actions:
- service: light.turn_on
service_data:
entity_id: light.living_room_02
color_temp: 153
color: '#c8d7de'
- service: light.turn_on
service_data:
entity_id: light.living_room_02
color_temp: 220
color: '#e6e3e1'
- service: light.turn_on
service_data:
entity_id: light.living_room_02
color_temp: 370
color: '#ce944b'
- action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Зал
hide_header: true
card:
type: entities
show_header_toggle: false
entities:
- entity: light.living_room_02
secondary_info: last-changed
- type: custom:light-entity-card
entity: light.living_room_02
brightness: false
color_temp: true
full_width_sliders: true
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
consolidate_entities: true
- type: horizontal-stack
cards:
- type: custom:slider-button-card
entity: light.living_room_color
name: ТВ
action_button:
mode: custom
show: true
tap_action:
action: toggle
style: |
ha-card .slider,
ha-card .slider .slider-bg,
ha-card .button.off {
background-color: transparent !important;
}
ha-card .slider-thumb {
transform: translateX(calc(-100% + var(--slider-value)));
background-color: var(--slider-color, #ffffff);
}
ha-card .off .slider-thumb {
display: none;
}
:host {
--action-icon-color-on: #e9e9e8;
--action-icon-color-off: #e9e9e888;
--paper-item-icon-active-color: #ffffff;
--slider-color: #ffffff;
--label-color-on: #111111;
--label-color-off: #bbbbbb;
--card-background-color: #00000000
}
slider:
direction: left-right
background: solid
use_state_color: false
use_percentage_bg_opacity: false
show_track: true
toggle_on_click: false
force_square: false
show_name: true
show_state: false
compact: true
icon:
show: true
use_state_color: true
icon: fas:lightbulb
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: ТВ
hide_header: true
style: |
:host .content {
width: 50vw;
height: 80vh;
}
deviceID: this
card:
type: custom:light-popup-card
entity: light.living_room_color
displayType: slider
fullscreen: true
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
actionSize: 4.5em
actionsInARow: 4
actions:
- service: light.turn_on
service_data:
entity_id: light.living_room_color
color_temp: 153
color: '#c8d7de'
- service: light.turn_on
service_data:
entity_id: light.living_room_color
color_temp: 220
color: '#e6e3e1'
- service: light.turn_on
service_data:
entity_id: light.living_room_color
color_temp: 370
color: '#ce944b'
- action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: ТВ
hide_header: true
card:
type: entities
show_header_toggle: false
entities:
- entity: light.living_room_color
secondary_info: last-changed
- type: custom:light-entity-card
entity: light.living_room_color
brightness: false
color_temp: true
full_width_sliders: true
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
consolidate_entities: true
- type: custom:slider-button-card
entity: light.kitchen
name: Кухня
action_button:
mode: custom
show: true
tap_action:
action: toggle
style: |
ha-card .slider,
ha-card .slider .slider-bg,
ha-card .button.off {
background-color: transparent !important;
}
ha-card .slider-thumb {
transform: translateX(calc(-100% + var(--slider-value)));
background-color: var(--slider-color, #ffffff);
}
ha-card .off .slider-thumb {
display: none;
}
:host {
--action-icon-color-on: #e9e9e8;
--action-icon-color-off: #e9e9e888;
--paper-item-icon-active-color: #ffffff;
--slider-color: #ffffff;
--label-color-on: #111111;
--label-color-off: #bbbbbb;
--card-background-color: #00000000
}
slider:
direction: left-right
background: solid
use_state_color: false
use_percentage_bg_opacity: false
show_track: true
toggle_on_click: false
force_square: false
show_name: true
show_state: false
compact: true
icon:
show: true
use_state_color: true
icon: fas:lightbulb
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Кухня
hide_header: true
style: |
:host .content {
width: 50vw;
height: 80vh;
}
deviceID: this
card:
type: custom:light-popup-card
entity: light.kitchen
displayType: slider
fullscreen: true
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
actionSize: 4.5em
actionsInARow: 4
actions:
- service: light.turn_on
service_data:
entity_id: light.kitchen
color_temp: 153
color: '#c8d7de'
- service: light.turn_on
service_data:
entity_id: light.living_room_01
color_temp: 220
color: '#e6e3e1'
- service: light.turn_on
service_data:
entity_id: light.kitchen
color_temp: 370
color: '#ce944b'
- action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Кухня
hide_header: true
card:
type: entities
show_header_toggle: false
entities:
- entity: light.kitchen
secondary_info: last-changed
- type: custom:light-entity-card
entity: light.kitchen
brightness: false
color_temp: true
full_width_sliders: true
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
consolidate_entities: true