lpt2007
August 25, 2021, 8:40pm
234
I have a problem with buttons no alway on same place during on / off.
Here is code:
widget_temperature:
tap_action:
action: toggle
color: var(--google-grey-500)
show_icon: false
show_name: false
show_label: true
size: 20px
label: |-
[[[
var current_temperature = entity.attributes.current_temperature;
var temperature = entity.attributes.temperature;
if (entity.state == 'off') {
var temperature = current_temperature;
}
return temperature + 'Ā°C'
]]]
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--couleur-theme),0)'
- border-radius: 14px
- place-self: center
- height: 42px
grid:
- grid-template-areas: '"l"'
label:
- color: 'rgba(var(--couleur-theme),0.9)'
########################################################################################################
# #
# HEATING #
# #
########################################################################################################
heating:
tap_action:
action: more-info
icon: |
[[[
if (entity.state =='auto') {
return 'mdi:robot-industrial';
} else if (entity.state =='heat') {
return 'mdi:radiator';
}
return 'mdi:radiator-off';
]]]
label: >-
[[[
if (entity.state =='off') {
return "IzkljuÄeno";
} else if (entity.state =='heat') {
return "Gretje";
} else if (entity.state =='auto') {
return "Auto";
}
return entity.state;
]]]
state:
- operator: template
value: >
[[[
return entity.state != 'off';
]]]
styles:
icon:
- color: 'rgba(var(--couleur-rouge),1)'
img_cell:
- background-color: 'rgba(var(--couleur-rouge),0.2)'
template:
- red
####################################################
# #
# HEATING WITH BOUTONS #
# #
####################################################
heating_buttons:
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
template: list_items_favorite
type: custom:button-card
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: >
[[[
if (variables.name == null) {
return variables.entity;
}
return variables.name;
]]]
tap_action:
action: more-info
template:
- icon_info
- heating
type: 'custom:button-card'
item2:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: mdi:power
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'heat'
type: custom:button-card
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: mdi:power-off
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'off'
type: custom:button-card
template: widget_icon
item2:
card:
template: list_items
type: 'custom:button-card'
custom_fields:
item1:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: 'mdi:minus'
tap_action:
action: call-service
service: script.decrease_heating_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: 'mdi:home-thermometer-outline'
tap_action:
action: none
type: 'custom:button-card'
template: widget_icon
item2:
card:
icon: 'mdi:temperature-celsius'
tap_action:
action: none
type: 'custom:button-card'
template: widget_temperature
entity: '[[[ return variables.entity ]]]'
item3:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: 'mdi:minus'
tap_action:
action: call-service
service: script.increment_heating_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: 'mdi:home-thermometer-outline'
tap_action:
action: none
type: 'custom:button-card'
template: widget_icon
jompa68
August 26, 2021, 6:18am
235
Hello @Mariusthvdb
- type: 'custom:button-card'
template: edge
- type: 'custom:button-card'
template: chips_temperature
This is my swipe-card setup
- type: custom:swipe-card
parameters:
spaceBetween: 8
freeMode: true
cards:
- !include /config/lovelace/includes/chip_temperature.yaml
Never mind, i nail it
bms
August 26, 2021, 7:38am
236
@lpt2007
I have no idea, maybe the different icons have different sizes which makes everything shift?
@tben is a frontend developer. Maybe he can look into this?
lpt2007
August 26, 2021, 8:00am
237
I find solution couple minutes ago. It was horizontal-stack.
I changed card type horizontal-stack to grid, and I added width: 62px in widget_icon and card style.
Still have some card left / right offset problems.
Here is complete code. (I added room temperature when heating is off)
widget_temperature:
tap_action:
action: toggle
color: var(--google-grey-500)
show_icon: false
show_name: false
show_label: true
size: 20px
label: |-
[[[
var current_temperature = entity.attributes.current_temperature;
var temperature = entity.attributes.temperature;
if (entity.state == 'off') {
var temperature = current_temperature;
}
return temperature + 'Ā°C'
]]]
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--couleur-theme),0)'
- border-radius: 14px
- place-self: center
- height: 42px
grid:
- grid-template-areas: '"l"'
label:
- color: 'rgba(var(--couleur-theme),0.9)'
########################################################################################################
# #
# WIDGET ICON #
# #
########################################################################################################
widget_icon:
tap_action:
action: toggle
color: var(--google-grey)
show_icon: true
show_name: false
size: 20px
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--color-theme),0.05)'
- border-radius: 14px
- place-self: center
- height: 42px
- width: 62px
grid:
- grid-template-areas: '"i"'
icon:
- color: 'rgba(var(--color-theme),0.9)'
########################################################################################################
# #
# HEATING #
# #
########################################################################################################
heating:
tap_action:
action: more-info
icon: |
[[[
if (entity.state =='auto') {
return 'mdi:robot-industrial';
} else if (entity.state =='heat') {
return 'mdi:radiator';
}
return 'mdi:radiator-off';
]]]
label: >-
[[[
if (entity.state =='off') {
return "IzkljuÄeno";
} else if (entity.state =='heat') {
return "Gretje";
} else if (entity.state =='auto') {
return "Auto";
}
return entity.state;
]]]
state:
- operator: template
value: >
[[[
return entity.state != 'off';
]]]
styles:
icon:
- color: 'rgba(var(--couleur-rouge),1)'
img_cell:
- background-color: 'rgba(var(--couleur-rouge),0.2)'
template:
- red
####################################################
# #
# HEATING WITH BOUTONS #
# #
####################################################
heating_buttons:
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
template: list_items_favorite
type: custom:button-card
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: >
[[[
if (variables.name == null) {
return variables.entity;
}
return variables.name;
]]]
tap_action:
action: more-info
template:
- icon_info
- heating
type: 'custom:button-card'
item2:
card:
type: grid
columns: 2
square: false
# type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: mdi:power
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'heat'
type: custom:button-card
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: mdi:power-off
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: '[[[ return variables.entity ]]]'
hvac_mode: 'off'
type: custom:button-card
template: widget_icon
item2:
card:
template: list_items
type: 'custom:button-card'
custom_fields:
item1:
card:
type: grid
columns: 2
square: false
# type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: 'mdi:minus'
tap_action:
action: call-service
service: script.decrease_heating_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: 'mdi:home-thermometer-outline'
tap_action:
action: none
type: 'custom:button-card'
template: widget_icon
item2:
card:
icon: 'mdi:temperature-celsius'
tap_action:
action: none
type: 'custom:button-card'
template: widget_temperature
entity: '[[[ return variables.entity ]]]'
item3:
card:
type: grid
columns: 2
square: false
# type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
icon: 'mdi:plus'
tap_action:
action: call-service
service: script.increment_heating_temperature
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
template: widget_icon
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state: 'off'
card:
icon: 'mdi:home-thermometer-outline'
tap_action:
action: none
type: 'custom:button-card'
template: widget_icon
scripts
increment_heating_temperature:
alias: increment_heating_temperature
sequence:
- service: climate.set_temperature
data_template:
entity_id: '{{ entity_id }}'
temperature: '{{ (state_attr(entity_id, ''temperature'') | float) + ( 0.5 |
float) | float }}
'
mode: single
decrease_heating_temperature:
alias: decrease_heating_temperature
sequence:
- service: climate.set_temperature
data_template:
entity_id: '{{ entity_id }}'
temperature: '{{ (state_attr(entity_id, ''temperature'') | float) - (0.5 | float)
| float }}'
mode: single
card:
- type: 'custom:button-card'
variables:
entity: climate.haos_vir_haos_srv_thermostat_group
name: Ogrevanje
template: heating_buttons
3 Likes
lpt2007
August 26, 2021, 9:55am
238
It is possible to add scroll text in label?
Like This?
Found a workaround to fix the floating of chips inside condditionals:
I packed them inside a grid-card (5 columns are perfect for my iPhone display). Within the grid card all chips are aligned left without the flex are between the chips.
Maybe it is a solution for others using conditional cards.
Perhaps someone has a better solution to the problem?
1 Like
steinis
August 26, 2021, 10:28am
240
Donāt know if you can use this, but instead of the condition i just use a if function under the part I want to change.
- type: 'custom:button-card'
entity: input_select.status_hus_ha
template: chips
label: >
[[[
if (entity.state == 'hjemme') return 'š ';
if (entity.state == 'borte') return 'š';
if (entity.state == 'ferie') return 'ā±ļø';
else return 'š„';
]]]
1 Like
Nice idea. Will remember for the future.
But I would display the different chips cards only if certain conditions are met. In my example snapshot the chip with the light bulb should only be displayed, when there are lights in state on.
paddy0174
August 26, 2021, 11:32am
242
Iām surprised this is working.
- type: 'custom:button-card'
entity: input_select.status_hus_ha
template: chips
label: >
[[[
if (entity.state == 'hjemme'){
return 'š ';
} else if (entity.state == 'borte') {
return 'š';
} else if (entity.state == 'ferie') {
return 'ā±ļø';
} else {
return 'š„';
}
]]]
In your template you should very often see āentity.state is not ferie .
EDIT: the code above is not technically wrong, but the way it was before is evenly right as well! See here . Sorry for the confusion!
3 Likes
steinis
August 26, 2021, 12:00pm
243
Ahh thanks:) I have changed it now.
I have an question regards the chips. I have multiple page and all have the same chips on top and when I do a change I have to do it to all pages. Is it possible to split this to a separat yaml-file, and have someone an example to do this?
paddy0174
August 26, 2021, 12:20pm
244
Depending on what you have, you can use templates for that as well. Templates from button-card (thatās what this is basically about) can be inherited from other templates. So what you need in the end, is a template like my_chips that inherit from the default chips.
Like this:first_page_chips ā inherits from my_chips ā inherits from chips.
jompa68
August 26, 2021, 12:55pm
245
hello @clemalex
- title: Alarm
icon: 'mdi:security'
path: alarm
cards:
- cards:
- cards:
- template: edge
type: 'custom:button-card'
- template: chips_return
type: 'custom:button-card'
- template: chips_power_consumption_price
type: 'custom:button-card'
- template: edge
type: 'custom:button-card'
type: horizontal-stack
- type: vertical-stack
cards:
- card:
entity: alarm_control_panel.alarm
states:
- arm_home
style:
.: |
ha-card > ha-label-badge{
--alarm-state-color: var(--google-green-500) !important;
}
ha-card{
padding-top: 16px;
padding-bottom: 12px !important;
border-radius: 21px;
}
ha-card > h1{
padding-top: 0;
color: transparent;
}
ha-card > h1::before{
content: "Larma av";
color: var(--google-green-500);
position: absolute;
font-variant: small-caps;
}
#alarmCode{
display: none;
}
#keypad{
display: none !important;
}
'#armActions':
mwc-button:
$: |
#button > span.slot-container{
color: transparent;
position: absolute;
}
#button{
width: 150px;
border-radius: 21px;
}
#button > span.slot-container::before{
color: var(--mdc-theme-primary, #6200ee);
content: "Aktivera";
margin: 0 0 0 50%;
}
title: Alarme
type: alarm-panel
conditions:
- entity: alarm_control_panel.alarm
state: disarmed
type: conditional
- card:
entity: alarm_control_panel.alarm
states:
- armed_home
title: Alarm
type: alarm-panel
style:
.: |
ha-card > ha-label-badge{
--alarm-state-color: var(--google-red-500) !important;
}
ha-card{
padding-top: 16px;
padding-bottom: 12px !important;
border-radius: 21px;
}
ha-card > h1{
padding-top: 0;
color: transparent;
}
ha-card > h1::before{
content: "ActivƩe";
color: var(--google-red-500);
position: absolute;
font-variant: small-caps;
}
'#armActions':
mwc-button:
$: |
#button > span.slot-container{
color: transparent;
position: absolute;
}
#button{
width: 150px;
border-radius: 21px;
}
#button > span.slot-container::before{
color: var(--mdc-theme-primary, #6200ee);
content: "Larma av";
margin: 0 0 0 50%;
}
'#keypad':
mwc-button:
$: |
#button{
border-radius: 12px
}
conditions:
- entity: alarm_control_panel.alarm
state_not: disarmed
type: conditional
type: vertical-stack
var(--google-green-500)
Oh!
jompa68
August 26, 2021, 6:51pm
246
Can someone explain how-to setup Scene part. Not sure how-to create this sensors
sensor.presence
sensor.absent
sensor.travail
clemalex
August 26, 2021, 7:14pm
247
The colors have changed. Yes it is necessary to correct then
jompa68
August 27, 2021, 6:37am
248
I cannot find the rest of the code for the media-player button. Can you share?
- entity: media_player.kok
name: Sonos
template:
- icon_info_bg
- media_buttons
type: 'custom:button-card'
Why would you say that? That template seems fine?
pedolsky
August 27, 2021, 9:01am
250
Iām interested in that, too. I always use the option without curly brackets and it works as desired. What is the advantage of Paddyās solutions?
paddy0174
August 27, 2021, 11:43am
251
Itās not because of the brackets, itās the logic behind.
With this version, there are three if-statements, and the last one overwrites the previous two.if (entity.state == 'hjemme') return 'š ';if-statement, that answers the question, is the state āferieā, if not, show the burnng icon. It is run totally indepent of the statements before. So every state, that is not āferieā shows the burning icon, no matter the two statements before.
To sum it up, the first two if-statements are totally ignored, the only one that is shown in the end is the third one, and that checks only, if the state is āferieā. Nothing else.
I hope this is understandably explained, if not, please ask again.
EDIT: This is exactly, why I use the curly brackets. Short hand code writing is easy, but it hides the logic a little bit. With the brackets it is easy to see, that the three statements donāt belong together and therefor donāt work together.
pedolsky
August 27, 2021, 11:52am
252
Maybe Iām blind, but isnāt this the same logic? (from my covers template)
label: |
[[[
if (entity.attributes.current_position == 100) return 'vollstƤndig geƶffnet';
if (entity.attributes.current_position == 0) return 'vollstƤndig geschlossen';
if (entity.attributes.current_position <= 20) return 'geschlossen';
else return entity.attributes.current_position + '% geƶffnet';
]]]
It always works as defined.
paddy0174
August 27, 2021, 12:24pm
253
Youāre totally right, my bad, Iām sorry!
The āreturnā leaves the actual function and therefor the next statements arenāt run. insert-the-head-banging-smilie-here Sorry for the confusion, seems Iām not awake enoughā¦ Iāll go and repair my car now, before I post other nonsenseā¦ Sorry, really!
Iāll make a note at the code above.
1 Like
Nonetheless you should work with correct syntax. 
ā as this should always come up, if your 
