Thank you so much, its working !!!
any way to achieve like in the original post , that the edges and the icons + plus will align like below:
@mistrovly beat me to it, didnât see the line of decluttering_templates: in your yaml.
Iâm not exactly sure what you try to achieve?. Looks the same to me if you ask me, other than the rounded corners
hi,
i manged to changed it:
if i want to change to different icon for each entity, what i need to write in lovelace, evertying that i tried didnât work, please look at lovelace code below:
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: button
variables:
- name: licht links
- entity: light.bedroom_lights
- type: custom:decluttering-card
template: button
variables:
- name: licht links
- entity: light.bedroom_lights
- type: custom:decluttering-card
template: button
variables:
- name: licht links
- entity: light.bedroom_lights
- type: custom:decluttering-card
template: button
variables:
- name: licht links
- entity: light.bedroom_lights
this is the template:
button:
card:
type: 'custom:button-card'
color: auto
size: 30%
entity: '[[entity]]'
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
You have to add this in your button template as the variables.
button:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
.......
And then in your view
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: button
variables:
- name: licht links
- entity: light.bedroom_lights
- icon: mdi:sofa #or something else
1 Like
you can simply customize your entities, the button card will show the icons as set per entity.
or set them on the button:
- type: custom:button-card
template: button_light
name: Dining
icon: 'mdi:silverware'
entity: light.dining_table
above is for use with templates, but without decluttering cardsâŚ
Iâm attempting to use the custom_fields option. I used the example from the readme.md that has the green or red circle by the lightbulb. But I cannot for the life of me get it to work. I replaced the sensor entity name with one that does work in HA. The code i plugged in is:
- type: 'custom:button-card'
icon: 'mdi:lightbulb'
aspect_ratio: 1/1
name: Nb lights on
styles:
grid:
- position: relative
custom_fields:
notification:
- background-color: >
[[[
if (states['sensor.prob_sleeping'].state == 0)
return "green";
return "red";
]]]
- border-radius: 50%
- position: absolute
- left: 60%
- top: 10%
- height: 20px
- width: 20px
- font-size: 8px
- line-height: 20px
custom_fields:
notification: >
[[[ return (states['sensor.prob_sleeping'].state) ]]]
To help debug, I added a second card that is similar, but uses a template to show the state of the sensor. The templating doesnât activate, and just shows the code within the template. The yaml code for this one is:
- type: 'custom:button-card'
icon: 'mdi:lightbulb'
aspect_ratio: 1/1
name: Nb lights on
show_label: true
label: >
[[[
return 'Probability: ' + states['sensor.prob_sleeping'].state;
]]]
This makes me think maybe something is wrong with the way Iâm using the template (?)
The screenshots of the two cards are:
Can someone help me figure out what iâm doing wrong? I downloaded the most recent version of button_card.js. The resources portion of my ui-lovelace.yaml file is:
resources:
- type: module
url: /local/button-card.js
- type: js
url: /local/vertical-style-card.js?v=0.1
- type: js
url: /local/vertical-stack-in-card.js?v=0.0.9
Thanks for sharing! 
Hi all
I would like to create a custom_field that can change values on changing some entity attributes
These are some Life360 attributes:
driving: false
moving: false
speed: 0
So I would like to have the custom_field show
Status: driving - 10 km/h
if the driving: attribute is true
and
Status: moving - 2 km/h
if the moving: attribute is true
Is it possible?
This is one of my custom_fields
source: >
[[[
return `<ha-icon
icon="mdi:source-branch"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon><span>Source: <span style="color: var(--text-color-sensor);">${states['device_tracker.xxxx'].attributes.source_type}</span></span>`
]]]
Thanks
I am trying to create a card for severe weather alerts (donât worry I am not in a hurricane zone). I havenât done too bad, but I would like to be able to increase the icon size and move the text further to the left. I assume it has to do with padding.
I would also like to just show the âsummaryâ as the tap_action. Is that possible?
type: 'custom:button-card'
layout: icon_state
entity:
- sensor.weatheralerts
color_type: card
color: red
show_name: false
show_state: true
tap_action:
action: more-info
styles:
state:
- text-transform: uppercase
- font-weight: bold
- justify-self: start
card:
- height: 60px
icon:
- margin-left: '-25%'
Thanks
That definitely looks like a caching issue. Change the url to:
resources:
- type: module
url: /local/button-card.js?v=abc
And hard refresh your browser (CTRL+R // CMD + R)
This is what the template should look like (add the brackets and change the device_tracker):
let speed = states['device_tracker.life360'].attributes.speed;
if (states['device_tracker.life360'].attributes.moving) return `Status: moving - ${speed} km/h`
else if (states['device_tracker.life360'].attributes.driving) return `Status: driving - ${speed} km/h`
else return "Status: Standstill"
Add this to your card:
icon: 100%
styles:
grid:
grid-template-areas: "i s" "n n" "l l";
# Change the %age below to modify the blank space between the text and the icon
grid-template-columns: 20% 1fr;
grid-template-rows: 1fr min-content min-content;
I donât understand what you mean by showing the summary?
Getting this error when I paste it:
can not read an implicit mapping pair; a colon is missed at line 22, column 38: ⌠rid-template-areas: âi sâ ân nâ âl lâ; ^
type: 'custom:button-card'
layout: icon_state
entity:
- sensor.weatheralerts
color_type: card
color: red
icon: 100%
show_name: false
show_state: true
tap_action:
action: more-info
styles:
state:
- text-transform: uppercase
- font-weight: bold
- justify-self: start
card:
- height: 60px
icon:
- margin-left: '-25%'
grid:
grid-template-areas: "i s" "n n" "l l";
grid-template-columns: 20% 1fr;
grid-template-rows: 1fr min-content min-content;
In the âmore_infoâ screen there is a section called âsummaryâ. Was hpoing it would just be possible to show that with âtap_actionâ rather than the whole more_info box.
Hi, i have changed the view, thank you for your help.
This is the old view:
This is new view:
There is 3 things that i need help with:
- in the old view i have set diffreent action to long press for the PC.
please look at code in lovelace for it that was in the old view:
- type: entity-button
entity: switch.desktop
icon: mdi:desktop-tower
name: PC
show_name: false
hold_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.wake_pc
i tried do the same thing in new view without success, this is current view for the pc in updated version, how can set that a long press will do the same thing. current code:
- type: custom:decluttering-card
template: button
variables:
- name: PC
- entity: switch.desktop
- icon: mdi:desktop-tower
- in the old view, when the fan was on, the fan was spinning , code in old view:
- type: custom:button-card
entity: fan.ceiling_fan
icon: mdi:fan
show_state: false
show_name: false
state:
- value: 'on'
spin: true
now its not, everything that i tried wasnât working, current code:
- type: custom:decluttering-card
template: button
variables:
- name: Ceilling Fan
- entity: fan.ceiling_fan
- icon: mdi:fan
- is there a way to get the last changed state, please see below picture + config in the old view:
old view code:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: entities
title: Sensors
show_header_toggle: false
entities:
- entity: light.gateway_light_34ce00fa5d87
name: Xiaomi Gateway Bedroom
- entity: light.gateway_light_04cf8c9829a2
name: Xiaomi Gateway Storage Room
- entity: binary_sensor.door_window_sensor_158d0001d68618
secondary_info: last-changed
name: Front Door
- entity: binary_sensor.smoke_sensor_158d0002b223fd
secondary_info: last-changed
name: Fire Alarm
- entity: binary_sensor.motion_sensor_158d00030518db
secondary_info: last-changed
- entity: binary_sensor.motion_sensor_158d0003051953
secondary_info: last-changed
- entity: binary_sensor.motion_sensor_158d000113e40d
secondary_info: last-changed
name: Motion Sensor Living Room
- entity: binary_sensor.motion_sensor_158d0001e50fc6
secondary_info: last-changed
name: Motion Sensor Bedroom
new code :
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
border-radius: 10px
card:
type: "custom:button-card"
color_type: label-card
color: rgb(255,250,205)
aspect_ratio: 15/1
name: Sensors
styles:
name:
- font-weight: bold
- font-size: 22px
- type: horizontal-stack
cards:
# - type: custom:decluttering-card
# template: sensor
# variables:
# - name: Front Door
# - entity: binary_sensor.door_window_sensor_158d0001d68618
# - secondary_info: last-changed
# - icon: mdi:door
# - type: custom:decluttering-card
# template: sensor
# variables:
# - entity: binary_sensor.smoke_sensor_158d0002b223fd
# - secondary_info: last-changed
# - name: Fire Alarm
# - icon: mdi:shield-check
- type: custom:decluttering-card
template: sensor
variables:
- entity: binary_sensor.motion_sensor_158d00030518db
secondary_info: last-changed
- name: Master Bedroom
- icon: mdi:motion-sensor
- type: custom:decluttering-card
template: sensor
variables:
- entity: binary_sensor.motion_sensor_158d0003051953
- name: Storage Room
secondary_info: last-changed
- icon: mdi:motion-sensor
- type: custom:decluttering-card
template: sensor
variables:
- entity: binary_sensor.motion_sensor_158d000113e40d
- name: Living Room
secondary_info: last-changed
- icon: mdi:motion-sensor
- type: custom:decluttering-card
template: sensor
variables:
- entity: binary_sensor.motion_sensor_158d0001e50fc6
- name: Bedroom
secondary_info: last-changed
- icon: mdi:motion-sensor
picture:
below the decluttering_templates.yaml
button:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
secondary_info: last-changed
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
sensor:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
secondary_info: last-changed
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: more-info
haptic: success
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
Thank you for your help!
2 Likes
HI,
for my button picture templates, I apparently need to first test the existence of an attribute country code (it isnât always available as its only created on state changes), and if it exists, test for its value. I canât get it to work ( inspector says there is no âundefinedâ image⌠created one for now, but that is a hackâŚ)
so turn to the community, please have a look first one without extra existence test:
- type: custom:button-card
template: button_picture_family
entity: device_tracker.life360_name
entity_picture: >
[[[
if (entity.attributes.country_code !== 'nl' && entity.state === 'not_home') return '/local/tiles/family/name_' + entity.attributes.country_code + '.png';
return '/local/tiles/family/name_' + entity.state.toLowerCase().replace(/ /g, '_') + '.png';
]]]
tried to solve it with the added test:
[[[
if (entity.attributes.country_code && state === 'not_home' && entity.attributes.country_code !== 'nl') return '/local/tiles/family/name_' + entity.attributes.country_code + '.png';}
return '/local/tiles/family/name_' + entity.state.toLowerCase().replace(/ /g, '_') + '.png';
]]]
On my Tiles setup this works as follows, but apparently the button js syntax is different, Iâve copied this to the button setup but it errors out?
if (attributes.country_code) {if (state === 'not_home' && attributes.country_code !== 'nl') return 'url(\"/local/tiles/family/name_' + attributes.country_code + '.png\")';}
return 'url(\"/local/tiles/family/name_' + state.toLowerCase().replace(/ /g, '_') + '.png\")';
same goes for my card_template:
state:
- operator: template
value: >
[[[
return entity.state == 'home'
]]]
color: '#008000'
- operator: template
value: >
[[[
return entity.attributes.country_code != 'nl' && entity.state == 'not_home'
]]]
color: 'white'
- operator: template
value: >
[[[
return entity.state == 'not_home'
]]]
color: '#555B65'
- operator: default
color: '#643aac'
even though the country_code isnt available this passes the test, and it turns the color white. While I would have wanted it to fail the test and go on to the next .
thanks for having a look
fwiw, I havent noticed any difference using the 2 or 3 position operators. custom-ui and Tiles setup always used 3.
Thanks @RomRider
If I want to use also what I already have in the custom_fields, how should I compose?
source: >
[[[
return `<ha-icon
icon="mdi:source-branch"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon><span>Source: <span style="color: var(--text-color-sensor);">${states['device_tracker.xxxx'].attributes.source_type}</span></span>`
]]]
without repeating for any return all the icon, style etc definitions?
Thank you, @RomRider! Adding the version 2.0.3 to resources did the trick. Works on Chrome and Android perfectly!!
you mean like this?:
I use this for the button:
- type: custom:button-card
template: button_motion
name: Control room
entity: binary_sensor.control_room_motion_sensor
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.control_room_motion_sensor_switch
and template:
button_motion:
template: button_body
show_last_changed: true
tap_action:
action: more-info
haptic: light
hold_action:
action: more-info
haptic: success
state:
- value: 'on'
styles:
card:
- color: red
name:
- color: black
icon:
- color: red
- operator: template
value: >
[[[
return entity.attributes.on === true
]]]
styles:
card:
- color: '#555B65'
icon:
- color: 'green'
state:
- color: 'green'
id: off-icon
- operator: default
styles:
card:
- color: '#555B65'
- opacity: 0.8
icon:
- color: '#555B65'
id: off-icon
using template:
button_body:
color: auto
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
# tap_action:
# action: more-info
# haptic: light
# hold_action:
# action: more-info
# haptic: success
styles:
icon:
- color: var(--local-color)
lock:
- color: red
card:
- color: var(--local-color)
- border-radius: 6px
- background-color: ivory
- padding-left: 5px
- box-shadow: 0px 0px 2px 1px
name:
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-align: start
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
label:
- text-align: start
- font-size: 11px
- font-family: Helvetica
- justify-self: start
state:
- text-align: start
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
3 Likes
i added the âshow_last_changed: trueâ to my template below:
sensor:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: more-info
haptic: success
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var(--paper-item-icon-active-color)
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
and its working great beside one thing, you can see that itâs display last trigged, but when the state is changed to clear, it stopped showing the last motion time.
after state back to clear:
Any idea?
not yet⌠thinking of your sensors though, are they showing the last_changed in dev-state/template? if the last_changed isnât available it wonât be shown on the button.
and if you make a quick, unformatted button, with only icon, name, state and show: last_changed? Just to see if it gets through?