daredoes
commented
1 year ago PRETTY SURE I BROKE THE DANG THING. Gonna fix it after work
Closed freeDom- closed 11 months ago
daredoes
commented
1 year ago PRETTY SURE I BROKE THE DANG THING. Gonna fix it after work
daredoes
commented
1 year ago Okay, fixed! I'll add documentation soon™
freeDom-
commented
1 year ago Great, thanks for the quick fix, now it is working again :). And I thought I was doing something wrong 😅..
Documentation would be great for other people... Thats why I opened the issue in the first place. I am also interested to see an example where a nested key with a default value is replaced by template data, since I did not manage to realize this so far.. How to replace content for the following template?
type: vertical-stack
cards:
- type: markdown
content: Default contentAnyways I am really happy about the changes you made and that you implemented the requested feature so fast! Thank you a lot :)
daredoes
commented
1 year ago @freeDom- thanks for checking it so fast! there was a bug in the build runner on github that broke 1.4.0.
For that card, which I'll call template: markdown, the YAML would be
template: markdown
ll_data:
cards:
- type: markdown
content: New Content
ll_keys: ['cards']This will replace all of the cards in the stack with the new cards from the template data. This will destroy all your other cards though, so I'd recommend doing content in one card, and styling in another.
type: markdown
content: Default contenttype: vertical-stack
cards:
- template: markdown
ll_data:
content: New Content
ll_keys: ['content']which when rendered would create the same outcome as the first piece of YAML that swaps out all the cards
freeDom-
commented
1 year ago Works like a charm - thanks!
For longer templates the first option is not so good, because you would basically need to write everything of your template again. Using different templates for data and style works for me.
daredoes
commented
1 year ago There is a bug currently where ll_data isn't getting passed down to templates contained inside of ll_data, which basically adds an extra layer of difficulty to replacing every instance of an entity ID between multiple cards while maintaining the default. I'll get to it soon. I realized it last night before bed.
The card I'm working on with this is a Quick Status card for each of my rooms, most of which have a state machine and an audio player.
The YAML for the template of that card is currently
template: quick-settings-holder
ll_keys:
- cards
ll_data:
cards:
- template: quick-settings-content
ll_keys:
- cards
ll_data:
cards:
- template: quick-settings-info
- template: quick-settings-modes
ll_keys:
- cards
ll_data:
cards:
- template: room-mode-button
ll_data:
mode: Movie
entity_id: input_select.living_room
- template: room-mode-button
ll_data:
mode: Chill
entity_id: input_select.living_room
- template: room-mode-button
ll_data:
mode: Passive
entity_id: input_select.living_room
- template: room-mode-button
ll_data:
mode: 'Off'
entity_id: input_select.living_room
- template: quick-settings-volume-slider
ll_keys:
- entity
ll_data:
entity: media_player.snapcast_living_roomwhich results in this Giant YAML for anyone brave enough to reverse it/ask questions about it
template: quick-settings-holder
ll_keys:
- cards
ll_data:
cards:
- template: quick-settings-content
ll_keys:
- cards
ll_data:
cards:
- template: quick-settings-info
- template: quick-settings-modes
ll_keys:
- cards
ll_data:
cards:
- template: room-mode-button
ll_data:
mode: Movie
entity_id: input_select.living_room
- template: room-mode-button
ll_data:
mode: Chill
entity_id: input_select.living_room
- template: room-mode-button
ll_data:
mode: Passive
entity_id: input_select.living_room
- template: room-mode-button
ll_data:
mode: 'Off'
entity_id: input_select.living_room
- template: quick-settings-volume-slider
ll_keys:
- entity
ll_data:
entity: media_player.snapcast_living_room
type: custom:vertical-stack-in-card
cards:
- template: quick-settings-content
ll_keys:
- cards
ll_data:
cards:
- template: quick-settings-info
- template: quick-settings-modes
ll_keys:
- cards
ll_data:
cards:
- template: room-mode-button
ll_data:
mode: Movie
entity_id: input_select.living_room
- template: room-mode-button
ll_data:
mode: Chill
entity_id: input_select.living_room
- template: room-mode-button
ll_data:
mode: Passive
entity_id: input_select.living_room
- template: room-mode-button
ll_data:
mode: 'Off'
entity_id: input_select.living_room
type: custom:vertical-stack-in-card
cards:
- template: quick-settings-info
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
template: quick-settings-info-room
ll_data:
secondary: Living Room
icon: mdi:sofa
ll_keys:
- secondary
- icon
primary: ''
secondary: Living Room
icon: mdi:sofa
icon_color: transparent
layout: horizontal
fill_container: true
multiline_secondary: true
card_mod:
style: |
ha-card {
padding: 0 !important;
}
- template: quick-settings-info-media
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
template: quick-settings-info-source
primary: ''
secondary: '{{ state_attr(entity, ''source'')}}'
icon: mdi:space-station
icon_color: transparent
entity: media_player.snapcast_living_room
fill_container: true
multiline_secondary: true
layout: horizontal
tap_action:
action: more-info
double_tap_action:
action: none
card_mod:
style: |
ha-card.type-custom-mushroom-template-card {
padding-left: 0;
padding-right: 0;
}
ha-card mushroom-card {
--spacing: 0;
}
- type: custom:mushroom-media-player-card
template: quick-settings-info-mute
entity: media_player.snapcast_living_room
fill_container: true
volume_controls:
- volume_mute
use_media_info: false
show_volume_level: false
primary_info: none
secondary_info: none
icon_type: none
layout: vertical
card_mod:
style: |
ha-card > div {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
ha-card > div > *:nth-child(2) {
width: 35%;
}
card_mod:
style: |
ha-card > div {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
ha-card > div > *:nth-child(1) {
flex: 1;
}
ha-card > div > *:nth-child(2) {
flex: 1;
}
- template: quick-settings-modes
ll_keys:
- cards
ll_data:
cards:
- template: room-mode-button
ll_data:
mode: Movie
entity_id: input_select.living_room
- template: room-mode-button
ll_data:
mode: Chill
entity_id: input_select.living_room
- template: room-mode-button
ll_data:
mode: Passive
entity_id: input_select.living_room
- template: room-mode-button
ll_data:
mode: 'Off'
entity_id: input_select.living_room
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card > div {
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
}
cards:
- template: room-mode-button
ll_data:
mode: Movie
entity_id: input_select.living_room
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Movie
icon: |-
{% set mode = 'Movie'|lower %}
{% if mode == 'passive' %}
mdi:peace
{% elif mode == 'gaming' %}
mdi:controller
{% elif mode == 'chill' %}
mdi:sunglasses
{% elif mode == 'off' %}
mdi:power
{% elif mode == 'romance' %}
mdi:heart
{% elif mode == 'party' %}
mdi:party-popper
{% elif mode == 'meeting' %}
mdi:briefcase-account
{% elif mode == 'movie' %}
mdi:video
{% elif mode == 'sleeping' %}
mdi:sleep
{% elif mode == 'nightlight' %}
mdi:ninja
{% else %}
mdi:progress-question
{% endif %}
entity: input_select.living_room
badge_icon: |-
{% set myMode = 'Movie' %}
{% if is_state(entity, myMode) %}
mdi:check-circle-outline
{% endif %}
badge_color: green
layout: vertical
tap_action:
action: call-service
service: input_select.select_option
data:
option: Movie
target:
entity_id: input_select.living_room
icon_color: |-
{% set mode = 'Movie'|lower %}
{% if mode == 'passive' %}
{% elif mode == 'gaming' %}
purple
{% elif mode == 'chill' %}
blue
{% elif mode == 'off' %}
red
{% elif mode == 'romance' %}
pink
{% elif mode == 'party' %}
yellow
{% elif mode == 'meeting' %}
red
{% elif mode == 'movie' %}
orange
{% elif mode == 'sleeping' %}
{% elif mode == 'nightlight' %}
{% else %}
{% endif %}
fill_container: true
multiline_secondary: true
template_data:
mode: ''
entity_id: ''
ll_data:
mode: ''
entity_id: ''
template_data:
mode: ''
entity_id: ''
- template: room-mode-button
ll_data:
mode: Chill
entity_id: input_select.living_room
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Chill
icon: |-
{% set mode = 'Chill'|lower %}
{% if mode == 'passive' %}
mdi:peace
{% elif mode == 'gaming' %}
mdi:controller
{% elif mode == 'chill' %}
mdi:sunglasses
{% elif mode == 'off' %}
mdi:power
{% elif mode == 'romance' %}
mdi:heart
{% elif mode == 'party' %}
mdi:party-popper
{% elif mode == 'meeting' %}
mdi:briefcase-account
{% elif mode == 'movie' %}
mdi:video
{% elif mode == 'sleeping' %}
mdi:sleep
{% elif mode == 'nightlight' %}
mdi:ninja
{% else %}
mdi:progress-question
{% endif %}
entity: input_select.living_room
badge_icon: |-
{% set myMode = 'Chill' %}
{% if is_state(entity, myMode) %}
mdi:check-circle-outline
{% endif %}
badge_color: green
layout: vertical
tap_action:
action: call-service
service: input_select.select_option
data:
option: Chill
target:
entity_id: input_select.living_room
icon_color: |-
{% set mode = 'Chill'|lower %}
{% if mode == 'passive' %}
{% elif mode == 'gaming' %}
purple
{% elif mode == 'chill' %}
blue
{% elif mode == 'off' %}
red
{% elif mode == 'romance' %}
pink
{% elif mode == 'party' %}
yellow
{% elif mode == 'meeting' %}
red
{% elif mode == 'movie' %}
orange
{% elif mode == 'sleeping' %}
{% elif mode == 'nightlight' %}
{% else %}
{% endif %}
fill_container: true
multiline_secondary: true
template_data:
mode: ''
entity_id: ''
ll_data:
mode: ''
entity_id: ''
template_data:
mode: ''
entity_id: ''
- template: room-mode-button
ll_data:
mode: Passive
entity_id: input_select.living_room
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Passive
icon: |-
{% set mode = 'Passive'|lower %}
{% if mode == 'passive' %}
mdi:peace
{% elif mode == 'gaming' %}
mdi:controller
{% elif mode == 'chill' %}
mdi:sunglasses
{% elif mode == 'off' %}
mdi:power
{% elif mode == 'romance' %}
mdi:heart
{% elif mode == 'party' %}
mdi:party-popper
{% elif mode == 'meeting' %}
mdi:briefcase-account
{% elif mode == 'movie' %}
mdi:video
{% elif mode == 'sleeping' %}
mdi:sleep
{% elif mode == 'nightlight' %}
mdi:ninja
{% else %}
mdi:progress-question
{% endif %}
entity: input_select.living_room
badge_icon: |-
{% set myMode = 'Passive' %}
{% if is_state(entity, myMode) %}
mdi:check-circle-outline
{% endif %}
badge_color: green
layout: vertical
tap_action:
action: call-service
service: input_select.select_option
data:
option: Passive
target:
entity_id: input_select.living_room
icon_color: |-
{% set mode = 'Passive'|lower %}
{% if mode == 'passive' %}
{% elif mode == 'gaming' %}
purple
{% elif mode == 'chill' %}
blue
{% elif mode == 'off' %}
red
{% elif mode == 'romance' %}
pink
{% elif mode == 'party' %}
yellow
{% elif mode == 'meeting' %}
red
{% elif mode == 'movie' %}
orange
{% elif mode == 'sleeping' %}
{% elif mode == 'nightlight' %}
{% else %}
{% endif %}
fill_container: true
multiline_secondary: true
template_data:
mode: ''
entity_id: ''
ll_data:
mode: ''
entity_id: ''
template_data:
mode: ''
entity_id: ''
- template: room-mode-button
ll_data:
mode: 'Off'
entity_id: input_select.living_room
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: 'Off'
icon: |-
{% set mode = 'Off'|lower %}
{% if mode == 'passive' %}
mdi:peace
{% elif mode == 'gaming' %}
mdi:controller
{% elif mode == 'chill' %}
mdi:sunglasses
{% elif mode == 'off' %}
mdi:power
{% elif mode == 'romance' %}
mdi:heart
{% elif mode == 'party' %}
mdi:party-popper
{% elif mode == 'meeting' %}
mdi:briefcase-account
{% elif mode == 'movie' %}
mdi:video
{% elif mode == 'sleeping' %}
mdi:sleep
{% elif mode == 'nightlight' %}
mdi:ninja
{% else %}
mdi:progress-question
{% endif %}
entity: input_select.living_room
badge_icon: |-
{% set myMode = 'Off' %}
{% if is_state(entity, myMode) %}
mdi:check-circle-outline
{% endif %}
badge_color: green
layout: vertical
tap_action:
action: call-service
service: input_select.select_option
data:
option: 'Off'
target:
entity_id: input_select.living_room
icon_color: |-
{% set mode = 'Off'|lower %}
{% if mode == 'passive' %}
{% elif mode == 'gaming' %}
purple
{% elif mode == 'chill' %}
blue
{% elif mode == 'off' %}
red
{% elif mode == 'romance' %}
pink
{% elif mode == 'party' %}
yellow
{% elif mode == 'meeting' %}
red
{% elif mode == 'movie' %}
orange
{% elif mode == 'sleeping' %}
{% elif mode == 'nightlight' %}
{% else %}
{% endif %}
fill_container: true
multiline_secondary: true
template_data:
mode: ''
entity_id: ''
ll_data:
mode: ''
entity_id: ''
template_data:
mode: ''
entity_id: ''
- template: quick-settings-volume-slider
ll_keys:
- entity
ll_data:
entity: media_player.snapcast_living_room
type: custom:slider-button-card
entity: media_player.snapcast_living_room
slider:
direction: bottom-top
background: striped
use_state_color: false
use_percentage_bg_opacity: false
show_track: false
toggle_on_click: false
force_square: false
show_name: false
show_state: true
compact: false
icon:
show: false
use_state_color: false
tap_action:
action: toggle
icon: ''
action_button:
mode: toggle
icon: mdi:power
show: false
show_spinner: true
tap_action:
action: toggle
card_mod:
style: |
ha-card > div.button {
padding: 0;
}
ha-card > div.button > div.text {
max-width: unset !important;
}
card_mod:
style: |
ha-card > div {
display: flex;
flex-direction: row;
justify-content: center;
}
ha-card > div > *:first-child {
flex-grow: 7;
}
ha-card > div > *:nth-child(2) {
flex-grow: 2;
}There is a bug currently where
ll_dataisn't getting passed down to templates contained inside ofll_data
I was trying exactly this and was wondering why it didn't work... It would simplify things a bit. I am currently working on a template for thermostates and thermostate timers... It is not as complicated as yours, but also contains four sub-templates now :D
daredoes
commented
1 year ago I'll have that fix out by the end of the weekend. I have some other work I have to get to first.
daredoes
commented
1 year ago @freeDom- 1.4.5 is going out now. Includes the fix for passing data down as expected
freeDom-
commented
1 year ago Great! But I think I wanted to achieve something different :D. Guess I have to replace "cards" or multiple templates as discussed.. Here was my attempt of passing data down to nested ll_data:
nested-template
type: vertical-stack
cards:
- ll_keys:
- content
ll_data:
content: $nested_content$
nested_content: test
type: markdown
content: Default contentWhich gets replaced to:
template: nested-test
ll_data:
nested_content: custom nested content
type: vertical-stack
cards:
- ll_keys:
- content
ll_data:
content: custom nested content
nested_content: test
type: markdown
content: Default contentEdit: I did not have so much time to look at the changes, but had a quick look at the unit tests with the nested example.. Ill try it out when I have time on Monday
freeDom-
commented
1 year ago I tested it using 2 template cards, one for content and one for style and it is working nicely now:
test
type: markdown
content: Default contentnested-test
type: vertical-stack
cards:
- template: test
type: markdown
content: Default contentusage in card:
template: nested-test
ll_keys:
- cards
ll_data:
cards:
- template: test
ll_data:
content: nested content
ll_keys:
- content
type: custom:linked-lovelace-templateWhich renders the output nested content.
daredoes
commented
1 year ago @freeDom- nice! that last one looks like the right way to go!
daredoes
commented
11 months ago @freeDom- there is now version 2.0 which will need its own documentation. Closing this
Is your feature request related to a problem? Please describe. Lovelace Template Card does no longer exist and descriptions for ll_date and ll_keys are missing in README.md Also add basic examples for new version to make it more user friendly. Add description on how to update templates since Linked Lovelace Template Card was removed.
Describe the solution you'd like Update documentation
Additional information Thanks for the great update :)