I realized that this card hasn’t been maintained since 2021, is there something equally valid that replaces it?
This button has a custom_fields “notifications” that updates based on the state of a sensor.
type: custom:mod-card
card_mod:
style: |
ha-card {
background:none;
border:0;
border-radius:0 10px 10px 0!important;
box-shadow:0 0;
transition:none
}
card:
type: vertical-stack
cards:
- type: custom:button-card
color: auto
entity: input_select.smarther_cucina_setboost
name: BOOST
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.smarther_cucina_setboost
hold_action:
action: call-service
service: script.smarther_cucina_spegnimento_boost_automatic_mode
show_state: false
size: 30px
state:
- value: 0.1
color: var(--disabled-text-color)
icon: mdi:play-speed
name: |
[[[
if (states['input_select.smarther_cucina_language'].state == 'EN') {
return 'SET BOOST';
} if (states['input_select.smarther_cucina_language'].state == 'IT') {
return 'IMPOSTA BOOST';
}
]]]
- value: 30
color: rgb(255, 153, 153)
icon: mdi:play-speed
name: BOOST 30
- value: 60
color: rgb(255, 102, 102)
icon: mdi:play-speed
name: BOOST 60
- value: 90
color: rgb(255, 80, 80)
icon: mdi:play-speed
name: BOOST 90
styles:
card:
- font-size: 10px
- background: none
- border: 0
- border-radius: 0
- box-shadow: 0 0
- margin-top: '-2px'
- transition: none
custom_fields:
notification:
- background-color: |
[[[
if (states['sensor.smarther_cucina_fine_boost_minuti'].state > 0)
return "red";
return "none";
]]]
- border-radius: 50%
- position: absolute
- left: 64%
- top: 10%
- height: 15px
- width: 15px
- font-size: 9px
- line-height: 15px
- color: white
custom_fields:
notification: |
[[[
if (states['sensor.smarther_cucina_fine_boost_minuti'].state > 0)
return states['sensor.smarther_cucina_fine_boost_minuti'].state;
return ' ';
]]]
When I insert this button in a popup custom_fields “notifications” not update.
it only updates when I refresh the page.
type: custom:button-card
size: 60%
show_name: false
show_state: false
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
card_mod:
style:
ha-dialog$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
#width:100%;
box-shadow:none;
border-radius: 0px;
border: 0px !important;
background: none;
}
content:
type: custom:mod-card
card_mod:
style: |
ha-card {
background:none;
border:0;
border-radius:0 10px 10px 0!important;
box-shadow:0 0;
transition:none
}
card:
type: vertical-stack
cards:
- type: custom:button-card
color: auto
entity: input_select.smarther_cucina_setboost
name: BOOST
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.smarther_cucina_setboost
hold_action:
action: call-service
service: script.smarther_cucina_spegnimento_boost_automatic_mode
show_state: false
size: 30px
state:
- value: 0.1
color: var(--disabled-text-color)
icon: mdi:play-speed
name: |
[[[
if (states['input_select.smarther_cucina_language'].state == 'EN') {
return 'SET BOOST';
} if (states['input_select.smarther_cucina_language'].state == 'IT') {
return 'IMPOSTA BOOST';
}
]]]
- value: 30
color: rgb(255, 153, 153)
icon: mdi:play-speed
name: BOOST 30
- value: 60
color: rgb(255, 102, 102)
icon: mdi:play-speed
name: BOOST 60
- value: 90
color: rgb(255, 80, 80)
icon: mdi:play-speed
name: BOOST 90
styles:
card:
- font-size: 10px
- background: none
- border: 0
- border-radius: 0
- box-shadow: 0 0
- margin-top: '-2px'
- transition: none
custom_fields:
notification:
- background-color: |
[[[
if (states['sensor.smarther_cucina_fine_boost_minuti'].state > 0)
return "red";
return "none";
]]]
- border-radius: 50%
- position: absolute
- left: 64%
- top: 10%
- height: 15px
- width: 15px
- font-size: 9px
- line-height: 15px
- color: white
custom_fields:
notification: >
[[[
if (states['sensor.smarther_cucina_fine_boost_minuti'].state > 0)
return states['sensor.smarther_cucina_fine_boost_minuti'].state;
return ' ';
]]]
How come? am I doing something wrong?
Thank you!
that is because in the else clause there is no ‘return’
use:
card:
- animation: |
[[[ if (entity.state <= 58) return "bgswap1 20s linear infinite";
return "blink 2s ease infinite";
]]]
or in ternary
card:
- animation: |
[[[ return (entity.state <= 58)
? "bgswap1 20s linear infinite" : "blink 2s ease infinite" ; ]]]
This is how it behaves, you need to add triggers_update to the card and add the entity that will update the card to the list. This has nothing to do with the card being maintained or not.
triggers_update doesn’t work in custom_fields as far as I understand, in fact the sensor doesn’t update if the button is in a popup.
If it’s outside the popup it updates even without activates_update.
Triggers update works perfectly fine for custom fields. Been using it for years. And still using it.
Maybe I write it wrong then?
type: custom:button-card
size: 60%
show_name: false
show_state: false
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
card_mod:
style:
ha-dialog$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
#width:100%;
box-shadow:none;
border-radius: 0px;
border: 0px !important;
background: none;
}
content:
type: custom:mod-card
card_mod:
style: |
ha-card {
background:none;
border:0;
border-radius:0 10px 10px 0!important;
box-shadow:0 0;
transition:none
}
card:
type: vertical-stack
cards:
- type: custom:button-card
color: auto
entity: input_select.smarther_cucina_setboost
name: BOOST
triggers_update:
- sensor.smarther_cucina_fine_boost_minuti
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.smarther_cucina_setboost
hold_action:
action: call-service
service: script.smarther_cucina_spegnimento_boost_automatic_mode
show_state: false
size: 30px
state:
- value: 0.1
color: var(--disabled-text-color)
icon: mdi:play-speed
name: |
[[[
if (states['input_select.smarther_cucina_language'].state == 'EN') {
return 'SET BOOST';
} if (states['input_select.smarther_cucina_language'].state == 'IT') {
return 'IMPOSTA BOOST';
}
]]]
- value: 30
color: rgb(255, 153, 153)
icon: mdi:play-speed
name: BOOST 30
- value: 60
color: rgb(255, 102, 102)
icon: mdi:play-speed
name: BOOST 60
- value: 90
color: rgb(255, 80, 80)
icon: mdi:play-speed
name: BOOST 90
styles:
card:
- font-size: 10px
- background: none
- border: 0
- border-radius: 0
- box-shadow: 0 0
- margin-top: '-2px'
- transition: none
custom_fields:
notification:
- background-color: |
[[[
if (states['sensor.smarther_cucina_fine_boost_minuti'].state > 0)
return "red";
return "none";
]]]
- border-radius: 50%
- position: absolute
- left: 64%
- top: 10%
- height: 15px
- width: 15px
- font-size: 9px
- line-height: 15px
- color: white
custom_fields:
notification: |
[[[
if (states['sensor.smarther_cucina_fine_boost_minuti'].state > 0)
return states['sensor.smarther_cucina_fine_boost_minuti'].state;
return ' '
]]]
Yes you did. It goes at the root level. spoke too soon, you posted all this other crap that threw me off the path.
It looks like you have it correct for the imbedded card.
Your template seems to be wrong though.
that’s a string and you’re comparing it to a number
I don’t think I understand, is there nothing to do with triggers_update?
is there something wrong with the template?
sensor.smarther_kitchen_end_boost_minutes returns a number
update triggers is correct in your last post.
Yes, you’re comparing a string to a number. Ask yourself this, is 'a' greather than 0? That’s essentially what you’re doing.
All states in home assistant are strings. You have to convert the string to a number. It looks like a number but it is not a number.
ok, so am i wrong here?
sensor:
- platform: template
sensors:
smarther_cucina_fine_boost_minuti:
value_template: >
{% if states('sensor.smarther_cucina_modalita') == 'boost' %}
{% set boost_date = as_timestamp(states('sensor.smarther_cucina_fine_funzione'))|int %}
{% set currentdate = as_timestamp(now()) %}
{% set seconds = boost_date - currentdate %}
{{(seconds/60)|round()}}
{% else %}
0
{% endif %}
no, you’re converting that to an integer after you convert the string to a timestamp.
Also, that’s Jinja. Custom button card uses JS.
So am I comparing them in a different format?
I don’t understand what I have to correct… and above all because outside the popup it updates and when it comes to the popup it doesn’t.
Thanks for your patience.
Do you know what a string is in code? Do you know what a number/double/float/integer is in code?
No, I’m not a programmer…
This is my solution working in popup as well
type: custom:button-card
size: 60%
show_name: false
show_state: false
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
card_mod:
style:
ha-dialog$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
#width:100%;
box-shadow:none;
border-radius: 0px;
border: 0px !important;
background: none;
}
content:
type: custom:mod-card
card_mod:
style: |
ha-card {
background:none;
border:0;
border-radius:0 10px 10px 0!important;
box-shadow:0 0;
transition:none
}
card:
type: vertical-stack
cards:
- type: custom:button-card
color: auto
entity: input_select.smarther_cucina_setboost
name: BOOST
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.smarther_cucina_setboost
hold_action:
action: call-service
service: script.smarther_cucina_spegnimento_boost_automatic_mode
show_state: false
size: 30px
state:
- value: 0.1
color: var(--disabled-text-color)
icon: mdi:play-speed
name: |
[[[
if (states['input_select.smarther_cucina_language'].state == 'EN') {
return 'SET BOOST';
} if (states['input_select.smarther_cucina_language'].state == 'IT') {
return 'IMPOSTA BOOST';
}
]]]
- value: 30
color: rgb(255, 153, 153)
icon: mdi:play-speed
name: BOOST 30
- value: 60
color: rgb(255, 102, 102)
icon: mdi:play-speed
name: BOOST 60
- value: 90
color: rgb(255, 80, 80)
icon: mdi:play-speed
name: BOOST 90
styles:
card:
- background: none
- font-size: 10px
- border: 0
- border-radius: 0
- box-shadow: 0 0
- margin-top: '-2px'
- transition: none
custom_fields:
notification:
- position: absolute
- left: 64%
- top: 10%
- border-radius: 50%
- width: 15px
custom_fields:
notification:
card:
type: custom:button-card
entity: sensor.smarther_cucina_fine_boost_minuti
tap_action:
action: none
show_name: false
show_icon: false
show_state: true
card_mod:
style: |
ha-card {
background:{% if is_state('sensor.smarther_cucina_fine_boost_minuti', '0') %} none !important {% else %} red {% endif %};
color:{% if is_state('sensor.smarther_cucina_fine_boost_minuti', '0') %} transparent !important {% else %} white {% endif %};
font-size:9px!important;
border:none;
height:15px;
transition:none
}
state:
- operator: template
value: >-
[[[ return
states['sensor.smarther_cucina_fine_boost_minuti'].state
]]]
Hello community ! I need some help to understand the grid stuff and how to position my cards inside the different areas…
Here is the challenge:
I need a button-card for the irrigation of my garden that is using a controller that communicates in Modbus with HA. Each zone has different purposes in the layout:
- a control command to select the zone (switch) by clicking on an icon
- a status telling if the zone is selected for next irrigation (binary_sensor)
- a status telling if irrigation is currently in progress or in idle mode (binary_sensor)
- a timer information (sensor) that decrements during the irrigation period (sensor is polled by HA every 15 seconds)
When irrigation is in progress on a particular zone, I expect a red border blinking around the card, together with the remaining time.
A button can then have the following look:
At the end, expect something like the following
any help is welcome…
So far my code is:
type: custom:button-card
entity: switch.zs_cour
size: 150px
tap_action:
action: toggle
name: Zone Cour
state:
- value: 'on'
color: lightgreen
icon: mdi:sprinkler-variant
- value: 'off'
color: black
icon: mdi:sprinkler
styles:
grid:
- grid-template-areas: '"i" "selected" "timeleft"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1.9fr 0.5fr 0.9fr
custom_fields:
selected:
card:
type: custom:button-card
entity: binary_sensor.zone_selected_cour
icon: mdi:check-circle
size: 50px
show_name: false
state:
- value: 'on'
color: yellow
- value: 'off'
color: black
timeleft:
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.remaining_time_on_the_zone
icon: mdi:clock-time-four-outline
show_name: true
show_icon: true
show_label: true
I just don’t get the positioning within the grid as result comes to (on the right what I want to achieve):
Can someone help me with the grid-area ?
1 Like
Please help to reduce the size of the card. It turns out a huge card.
keep:
border_radius: true
margin: true
cards:
- type: custom:button-card
name: Управление отоплением
show_name: true
show_entity_picture: true
styles:
card:
- padding: 5px
- border: 0px
grid:
- grid-template-areas: '"n i"'
- grid-template-columns: 3fr 1fr
name:
- justify-self: start
- padding-left: 20px
- font-size: 20px
- font-weight: 150
- type: custom:button-card
- show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: toggle
entity: switch.rele_otopleniia_prikhozhei
name: Отопление прихожей
hold_action:
action: none
state:
- color: red
value: 'off'
- color: green
value: 'on'
confirmation:
text: >-
[[[ if (states["switch.rele_otopleniia_prikhozhei"].state === "on")
return "Точно выключить счетчик?";
else return "Включить счетчик?"
]]]
hello,
is there a possibility that you can use a tap action with the blank card?
I want a hidden switch.