Did someone succeed to change the coordinates to room id?
Hi, nice design!
Iām trying to copy some of it but Iām having trouble understanding where to put your ādefault_templatesā for the button-cards.
I edit my dashboards using the UI.
Do I need to reference the default_templates in my config file?
Or do I create a new xy.yaml and include to my config file?
@homie22 if you want to do it through the UI, you have to put the templates in the top or bottom of the raw editor (3 dots top right ā raw editor).
Here are 2 examples I have for templates.
The YAML in the raw-editor
button_card_templates:
prijsplafond:
variables:
ulm_card_mpse_gauge_min: 0
ulm_card_mpse_gauge_max: 100
styles:
grid:
- grid-template-areas: '''item1'' ''item2'''
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 0px
show_name: false
show_icon: false
custom_fields:
item1:
card:
type: custom:button-card
name: '[[[return entity.state ]]]'
entity: '[[[return entity.entity_id ]]]'
styles:
grid:
- grid-template-areas: '"n eenheid""l l" '
- grid-template-columns: min-content min-content
name:
- font-size: 32px
- color: var(--contrast20)
card:
- height: 80px
- border-radius: 24px
- padding: 30px 0 6px 16px
- box-sizing: border-box
- background: none
- box-shadow: none
label:
- justify-self: start
- font-size: 12px
- color: var(--contrast20)
- margin-top: '-2px'
custom_fields:
eenheid:
- font-size: 12px
- color: var(--contrast9)
- margin-bottom: 6px
- padding-left: 2px
label: '[[[return entity.attributes.friendly_name ]]]'
custom_fields:
eenheid: kWh over
show_label: false
item2:
card:
type: custom:dual-gauge-card
min: '[[[ return variables.ulm_card_mpse_gauge_min ]]]'
max: '[[[ return variables.ulm_card_mpse_gauge_max ]]]'
title: |
[[[
var min = variables.ulm_card_mpse_gauge_min;
var max = variables.ulm_card_mpse_gauge_max;
if( min == 0 && max == 100 )
return "";
return min + ' - ' + max;
]]]
shadeInner: false
cardwidth: 200
outer:
entity: '[[[return entity.entity_id ]]]'
inner:
entity: '[[[return entity.entity_id ]]]'
colors:
- color: var(--blue)
value: 0
card_mod:
style: |
ha-card{
background: none;
}
div.gauge-value.gauge-value-inner {
color: rgba(0,0,0,0);
}
div.gauge-value.gauge-value-outer {
color: rgba(0,0,0,0);
}
div.gauge-dual-card {
margin: 0px 0px;
--title-font-size: calc(var(--gauge-card-width) / 16);
color: var(--contrast20);
background: none;
}
title_card:
show_icon: false
styles:
grid:
- grid-template-areas: '"n"'
card:
- background: none
- padding: 16px 0
- '--mdc-ripple-press-opacity': 0
name:
- font-size: 32px
- color: var(--contrast20)
The YAML of my cards then looks like this
type: custom:button-card
name: Thuis
template: title_card
type: custom:button-card
template: prijsplafond
entity: sensor.prijsplafond_stroom
name: Stroom
variables:
ulm_card_mpse_gauge_min: 0
ulm_card_mpse_gauge_max: 1864
styles:
card:
- background: var(--contrast2)
- border-radius: 24px
- padding: 5px 0
- '--mdc-ripple-press-opacity': 0
3 Likes
Thank you!
It worked perfectly.
Is it possible to create templates for all kinds of cards (custom components)?
I wanted to do the same thing!
But the my-slider V2 card doesnāt detect the cover position.
While with the first version of the my-slider card, the position is detected without issues.
May I ask you to share the code of this card?
Thanks in advance!
EDIT:
Fixed, vertical: false was missing
1 Like
Iām trying to template positions under custom_fields.
My problem right now is the entity entry.
I want to use a different one than the main card.
So far I managed to define a variable for the other entities but I canāt retrieve the state (temperature and humidity).
Hereās the code but it throws a syntax error:
hum:
card:
type: custom:button-card
entity: '[[[ return variables.var_b ]]]'
label: '[[[ return entity("variables.var_b")state; ]]]'
show_name: false
show_label: true
icon: mdi:water-percent
.
Also tried entity.state, but it returns the state of the lamp.
This would be the end result (test sensors btw):
What does the complete code look like?
For the template:
button_card_templates:
room_card:
hold_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-areas: '''i light'' ''n n'' ''temp hum'''
- grid-template-columns: 1fr 1fr
- grid-template-rows: 35% min-content min-content
card:
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: 150px
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 17px
- margin: 4px 0 12px 0
- color: var(--contrast8)
custom_fields:
temp:
- justify-self: end
- align-self: start
- font-size: 15px
- filter: opacity(100%)
- margin: 4px 10px 12px
hum:
- justify-self: start
- align-self: end
- font-size: 15px
- filter: opacity(100%)
- margin: 4px 0 12px
variables:
var_a: ''
var_b: ''
custom_fields:
light:
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
show_name: false
show_label: false
tap_action:
action: toggle
haptic: medium
state:
- value: 'on'
icon: mdi:lightbulb
- value: 'off'
icon: mdi:lightbulb-off
- value: unavailable
icon: mdi:lightbulb-question
styles:
icon:
- color: var(--contrast6)
- value: unknown
icon: mdi:lightbulb-question
styles:
icon:
- color: var(--contrast6)
styles:
icon:
- width: 24px
- height: 24px
temp:
card:
type: sensor
entity: '[[[ return variables.var_a ]]]'
show_name: false
show_label: false
icon: mdi:thermometer
tap_action:
action: more-info
haptic: medium
styles:
icon:
- width: 18px
- height: 18px
- color: var(--orange)
hum:
card:
type: custom:button-card
entity: '[[[ return variables.var_b ]]]'
label: '[[[ return entity("variables.var_b")state; ]]]'
show_name: false
show_label: true
icon: mdi:water-percent
tap_action:
action: more-info
haptic: medium
styles:
icon:
- width: 18px
- height: 18px
- color: var(--blue)
state:
- value: 'on'
styles:
card:
- background: var(--yellow)
icon:
- color: var(--black)
name:
- color: var(--black)
custom_fields:
temp:
- color: var(--black)
hum:
- color: var(--black)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
custom_fields:
temp:
- color: var(--contrast20)
hum:
- color: var(--contrast20)
The code in āentityā for āhumā and ātempā is just another templating but it also doesnāt work.
Then I use the template like this:
type: custom:button-card
template: room_card
entity: light.badezimmer
name: BZ
variables:
var_a: sensor.temperature
var_b: sensor.humidity
Maybe try something like this.
button_card_templates:
room_card:
hold_action:
action: more-info
haptic: medium
styles:
grid:
- grid-template-areas: '''i light'' ''n n'' ''temp hum'''
- grid-template-columns: 1fr 1fr
- grid-template-rows: 35% min-content min-content
card:
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: 150px
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 17px
- margin: 4px 0 12px 0
- color: var(--contrast8)
custom_fields:
temp:
- justify-self: end
- align-self: start
- font-size: 15px
- filter: opacity(100%)
- margin: 4px 10px 12px
hum:
- justify-self: start
- align-self: end
- font-size: 15px
- filter: opacity(100%)
- margin: 4px 0 12px
custom_fields:
light:
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
show_name: false
show_label: false
tap_action:
action: toggle
haptic: medium
state:
- value: 'on'
icon: mdi:lightbulb
- value: 'off'
icon: mdi:lightbulb-off
- value: unavailable
icon: mdi:lightbulb-question
styles:
icon:
- color: var(--contrast6)
- value: unknown
icon: mdi:lightbulb-question
styles:
icon:
- color: var(--contrast6)
styles:
icon:
- width: 24px
- height: 24px
temp:
card:
type: custom:button-card
entity: |
[[[ return states[variables.var_a].state;]]]
label: '[[[ return states[variables.var_a].state; ]]]'
show_name: false
show_label: true
icon: mdi:thermometer
tap_action:
action: more-info
haptic: medium
styles:
icon:
- width: 18px
- height: 18px
- color: var(--blue)
hum:
card:
type: custom:button-card
entity: |
[[[ return states[variables.var_b].state;]]]
label: '[[[ return states[variables.var_b].state; ]]]'
show_name: false
show_label: true
icon: mdi:water-percent
tap_action:
action: more-info
haptic: medium
styles:
icon:
- width: 18px
- height: 18px
- color: var(--blue)
state:
- value: 'on'
styles:
card:
- background: var(--yellow)
icon:
- color: var(--black)
name:
- color: var(--black)
custom_fields:
temp:
- color: var(--black)
hum:
- color: var(--black)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
custom_fields:
temp:
- color: var(--contrast20)
hum:
- color: var(--contrast20)
1 Like
Thank you!!
This worked:
label: '[[[ return states[variables.var_a].state; ]]]'
Coming closer to my desired design.
The icons are ignoring the - color: var(--blue) & - color: var(--orange) style.
Also, Iād like the value to be beside the icon (see my first screenshot).
Current output:
EDIT:
After some more trial and error I got the card this far:
I canāt get the name text and the icon to be aligned.
Do you know which parameter would that be?
This is the current code:
(BTW, Iām trying this changes in a normal card, thatās way the beginning doesnāt look like a template. Itās easier to visualize, rather than saving and going back and forth)
temp:
card:
type: custom:button-card
entity: sensor.temperature
label: >-
[[[ return states[variables.var_a].state +
states[variables.var_a].attributes.unit_of_measurement ]]]
show_name: false
show_label: true
layout: icon_label
icon: mdi:thermometer
tap_action:
action: more-info
haptic: medium
styles:
icon:
- width: 18px
- height: 18px
- color: var(--orange)
label:
- justify-self: start
- align-self: end
- font-size: 15px
- filter: opacity(100%)
- margin: 4px 0 0px 0
card:
- height: 40px
- width: 85px
hum:
card:
type: custom:button-card
entity: sensor.humidity
label: >-
[[[ return states[variables.var_b].state +
states[variables.var_b].attributes.unit_of_measurement ]]]
show_name: false
show_label: true
layout: icon_label
icon: mdi:water-percent
tap_action:
action: more-info
haptic: medium
styles:
icon:
- width: 18px
- height: 18px
- color: var(--blue)
label:
- justify-self: start
- align-self: end
- font-size: 15px
- filter: opacity(100%)
- margin: 4px 0 0px 0
card:
- height: 40px
- width: 85px
EDIT 2:
I solved the alignment problem.
Now I ran into another one.
Button-card is ignoring numeric_precision: 0.
Iād like the temp and hum values to be rounded, no decimals.
Any idea?
then you need something like this
1 Like
Gotcha, thanks!
Sorry to bother you this much, but I promise thisāll be the last issue.
(Iām aware all my questions might be on the wrong thread).
So, both labels temp + hum donāt follow the color scheme when changing the state of the light (on/off).
Iād like both to have the yellow background and the text color changed to black, just like the name of the room.
I declared both custom_fields under state:, still the formatting remains.
Hereās the code (again) so far:
room_card:
hold_action:
action: more-info
haptic: medium
custom_fields:
light:
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
show_name: false
show_label: false
tap_action:
action: toggle
haptic: medium
state:
- value: 'on'
icon: mdi:lightbulb
- value: 'off'
icon: mdi:lightbulb-off
- value: unavailable
icon: mdi:lightbulb-question
styles:
icon:
- color: var(--contrast6)
- value: unknown
icon: mdi:lightbulb-question
styles:
icon:
- color: var(--contrast6)
styles:
icon:
- width: 24px
- height: 24px
temp:
card:
type: custom:button-card
entity: '[[[ return variables.var_a ]]]'
label: >-
[[[ return parseFloat(states[variables.var_a].state).toFixed(0) +
states[variables.var_a].attributes.unit_of_measurement; ]]]
show_name: false
show_label: true
layout: icon_label
icon: mdi:thermometer
tap_action:
action: more-info
haptic: medium
styles:
icon:
- width: 18px
- height: 18px
- color: var(--orange)
label:
- justify-self: start
- font-size: 15px
card:
- height: a
- width: 70px
hum:
card:
type: custom:button-card
entity: '[[[ return variables.var_b ]]]'
label: >-
[[[ return parseFloat(states[variables.var_b].state).toFixed(0) +
states[variables.var_b].attributes.unit_of_measurement; ]]]
show_name: false
show_label: true
layout: icon_label
icon: mdi:water-percent
tap_action:
action: more-info
haptic: medium
styles:
icon:
- width: 18px
- height: 18px
- color: var(--blue)
label:
- justify-self: start
- font-size: 15px
card:
- height: a
- width: 70px
styles:
grid:
- grid-template-areas: '''i light'' ''n n'' ''temp hum'''
- grid-template-columns: 1fr 1fr
- grid-template-rows: 35% min-content min-content
card:
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: 115px
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 17px
- margin: 4px 0 12px 0
- color: var(--contrast8)
custom_fields:
temp:
- justify-self: end
- filter: opacity(90%)
- margin: 4px 6px 12px
hum:
- filter: opacity(90%)
- margin: 4px 0px 12px
state:
- value: 'on'
styles:
card:
- background: var(--yellow)
icon:
- color: var(--black)
name:
- color: var(--black)
custom_fields:
temp:
- color: var(--black)
hum:
- color: var(--black)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
custom_fields:
temp:
- color: var(--contrast20)
hum:
- color: var(--contrast20)
(screenshot before adding your round up code)
I donāt know why that doesnāt work, but hereās how you can work around it.
styles:
label:
- color: |
[[[
if (entity == 'on'){
return 'var(--black)';
} else
return 'var(--contrast20)';
]]]
The compleet code then look something like this.
room_card:
hold_action:
action: more-info
haptic: medium
custom_fields:
light:
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
show_name: false
show_label: false
tap_action:
action: toggle
haptic: medium
state:
- value: 'on'
icon: mdi:lightbulb
- value: 'off'
icon: mdi:lightbulb-off
- value: unavailable
icon: mdi:lightbulb-question
styles:
icon:
- color: var(--contrast6)
- value: unknown
icon: mdi:lightbulb-question
styles:
icon:
- color: var(--contrast6)
styles:
icon:
- width: 24px
- height: 24px
temp:
card:
type: custom:button-card
entity: '[[[ return variables.var_a ]]]'
label: >-
[[[ return parseFloat(states[variables.var_a].state).toFixed(0) +
states[variables.var_a].attributes.unit_of_measurement; ]]]
show_name: false
show_label: true
layout: icon_label
icon: mdi:thermometer
tap_action:
action: more-info
haptic: medium
styles:
icon:
- width: 18px
- height: 18px
- color: var(--orange)
label:
- justify-self: start
- font-size: 15px
- color: |
[[[
if (entity == 'on'){
return 'var(--black)';
} else
return 'var(--contrast20)';
]]]
card:
- height: a
- width: 70px
hum:
card:
type: custom:button-card
entity: '[[[ return variables.var_b ]]]'
label: >-
[[[ return parseFloat(states[variables.var_b].state).toFixed(0) +
states[variables.var_b].attributes.unit_of_measurement; ]]]
show_name: false
show_label: true
layout: icon_label
icon: mdi:water-percent
tap_action:
action: more-info
haptic: medium
styles:
icon:
- width: 18px
- height: 18px
- color: var(--blue)
label:
- justify-self: start
- font-size: 15px
- color: |
[[[
if (entity == 'on'){
return 'var(--black)';
} else
return 'var(--contrast20)';
]]]
card:
- height: a
- width: 70px
styles:
grid:
- grid-template-areas: '''i light'' ''n n'' ''temp hum'''
- grid-template-columns: 1fr 1fr
- grid-template-rows: 35% min-content min-content
card:
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: 115px
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 17px
- margin: 4px 0 12px 0
- color: var(--contrast8)
custom_fields:
temp:
- justify-self: end
- filter: opacity(90%)
- margin: 4px 6px 12px
hum:
- filter: opacity(90%)
- margin: 4px 0px 12px
state:
- value: 'on'
styles:
card:
- background: var(--yellow)
icon:
- color: var(--black)
name:
- color: var(--black)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
That didnāt do it.
Wouldnāt if (entity == 'on'){ in this case refer to the entity: '[[[ return variables.var_a ]]]' since the styling is inside that part of the card?
Meaning that var_a is a temperature value.
I tried adding this code at the end, but it doesnāt change the styling of the labels for temp and hum either.
state:
- value: 'on'
styles:
label:
- color: var(--black)
- background: var(--yellow)
- value: 'off'
styles:
label:
- color: var(--contrast20)
weird because it works on my end. No idea what the problem is then.
Hi! I canāt change the primary background color itās always the same. If I disable colors mode it works.
Need some help! Txs!!!
Both, part 1 and part 2, are var(ācontrast1) but when i used
height: calc(100vh - 80px - env(safe-area-inset-top)) !important;
looks like this. Now only a little red square has the same color of part 2
Did you get a solution for this?
Anyone else struggling to come up with a decent card for other entities? I really want something that matches the overall style but Iām finding it hard to come up with something. This is what I have so far but Iām not sold on it.
2 Likes
hui-view {
padding-bottom: 0px;
margin-top: -140px;
height: 0px !important;
padding-top: 50px !important;
I changed the padding and margins