Can someone pls help me with the config of a button card:
color: auto
color_type: card
entity: switch.tumble_dryer
hold_action:
action: more-info
icon: 'mdi:tumble-dryer'
label: Dryer
name: Tumble
show_label: true
state:
- color: white
styles:
card:
- animation: blink 2s ease infinite
- color: 'rgb(255, 0, 0)'
value: 'on'
- color: 'rgb(255, 255, 255)'
value: 'off'
type: 'custom:button-card'
The above works fine based on the on/off state of my wifi switch (flashes red when it is on) but I need to create the exact same but to work off of a sensor.tumble_dryer value which is the wattage value of the wifi switch.
state:
- color: white
styles:
card:
- animation: blink 2s ease infinite
- color: 'rgb(255, 0, 0)'
value: 'on'
- color: 'rgb(255, 255, 255)'
value: 'off'
Any ideas?
That should do it instead of value: 'on'
value: 10
operator: '>'
That did it
ThaNerd
May 24, 2020, 11:30pm
3980
Is there a way to align the card so that the entity_picture is on the left and all the data is on the right side?
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: device_tracker.google_maps
entity_picture: /local/lovelace/Presence/Home.png
aspect_ratio: 1/1
name: Ron
show_entity_picture: true
state:
- value: "home"
styles:
entity_picture:
- filter: opacity(0%)
- filter: grayscale(0%)
styles:
card:
- border-radius: 0%
- padding: 5%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
- font-family: avenir
grid:
- grid-template-areas: '"i status" "n n" "address address" "battery battery" "charging charging"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content min-content
name:
- font-size: 16px
- align-self: middle
- justify-self: start
- padding-bottom: 0px
icon:
- width: 70%
entity_picture:
- filter: opacity(50%)
- filter: grayscale(100%)
custom_fields:
status:
- align-self: start
- justify-self: end
- color: gray
address:
- padding-bottom: 0px
- align-self: middle
- justify-self: start
- color: gray
battery:
- padding-bottom: 0px
- align-self: middle
- justify-self: start
- color: gray
- '--text-color-sensor': '[[[ if (states["sensor.mobile_battery"].state < 50) return "#EF4F1A"; ]]]'
charging:
- padding-bottom: 0px
- align-self: middle
- justify-self: start
- color: gray
custom_fields:
status: |
[[[
return `<ha-icon
style="width: 12px; height: 12px; color: black;">
</ha-icon><span>${entity.state}</span>`
]]]
address: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.phone_geocoded_location'].state}</span></span>`
]]]
battery: |
[[[
return `<ha-icon
icon="mdi:cellphone-iphone"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.mobile_battery'].state}% battery</span></span>`
]]]
charging: |
[[[
return `<ha-icon
icon="mdi:flash"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">Charging: ${states['device_tracker.google_maps}</span></span>`
]]]
@RomRider Thanks - Iāve been working at it a while and am pretty happy with where itās come. The pop-up card is what really makes it long, though, not button card specifically. Will clickable hot zones ever be a part of the card? That would really be an amazing upgrade from my point of view.
@anilet Glad to see itās not a complete unintelligible mess to everyone but me!
@ThaNerd In grid-template-areas you have 5 value sets but in grid-template-rows you have 6 rows defined. There needs to be the same number of those two things or the grid breaks. Speaking of the grid, to separate the entity picture on the left and the data on the right, thatās how you do it. Make a column that has only the entity picture on the left side and then another column with your data points on the right.
Something like āāi statusā āi nā āi addressā āi batteryā āi chargingāā would make the āiā fill up the entire left column, while the grid areas are spread out across the right column.
Or if you wanted the name and status to be full length across the top, the identity picture in the bottom left corner, and the other info in the bottom right, you could do something like āāstatus statusā ān nā āi addressā āi batteryā āi chargingāā
(I made a post a while back doing my best to explain the grid for someone who was confused by it, in case itās helpful) Lovelace: Button card - #3154 by tismondo
2 Likes
maurizio53
May 25, 2020, 6:29pm
3982
After installing latest HA release some of my buttons disappeared also if i did not changed anything in the configsā¦
- type: custom:button-card
entity: 'binary_sensor.updater'
icon: 'mdi:home-assistant'
name: Home Assistant
styles:
card:
- padding-left: 5px
- font-size: 12px
- font-weight: normal
- font-family: 'Georgia'
- text-transform: capitalize
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
grid:
- grid-template-areas: '"i i" "n n" "current current" "local local" '
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
name:
- font-weight: normal
- font-size: 13px
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
icon:
- color: >
[[[
if (entity.state == 'on') return 'red';
return 'green';
]]]
- animation: >
[[[
if (entity.state == 'on') return 'blink 2s ease infinite';
]]]
custom_fields:
current:
- align-self: start
- justify-self: start
- --text-color-sensor: >
[[[ if (entity.state == 'on') return 'red'; return 'green'; ]]]
local:
- align-self: start
- justify-self: start
custom_fields:
current: >
[[[
return `<ha-icon
icon='mdi:home-assistant'
style='width: 12px; height: 12px; color: deepskyblue;'>
</ha-icon><span>Current: <span style='color: var(--text-color-sensor);animation: var(--animation)'>${states['sensor.latest_version'].state}</span></span>`
]]]
local: >
[[[
return `<ha-icon
icon='mdi:home-assistant'
style='width: 12px; height: 12px; color: deepskyblue;'>
</ha-icon><span>Local: <span style='color: green;'>${states['sensor.current_version'].state}</span></span>`
]]]
- type: custom:button-card
entity: sensor.rpi_power_status
show_state: true
name: RPi <br> Power Status
styles:
card:
- font-weight: normal
- font-size: 10px
- font-family: 'Georgia'
- height: 100%
icon:
- color: >
[[[
if (entity.state == 0) return 'red';
return 'green';
]]]
- type: custom:button-card
entity: sensor.hacs
show_state: true
name: HACS
styles:
card:
- font-weight: normal
- font-size: 12px
- font-family: 'Georgia'
- height: 100%
icon:
- color: >
[[[
if (entity.state >= 1) return 'red';
return 'green';
]]]
- animation: >
[[[
if (entity.state >= 1) return 'blink 2s ease infinite';
]]]
While others like this:
- type: custom:button-card
entity: sensor.home_assistant_log
show_state: true
name: Logfile
Are visible like beforeā¦
gob12345
May 25, 2020, 7:46pm
3983
Is there a way to remove the card outline?
Chapter
May 25, 2020, 8:30pm
3984
Iām having the same issue, but for me none of the cards are working
maurizio53
May 25, 2020, 8:52pm
3985
I found the issue is about custom stack-in-card i was using with those button cardsā¦
Probably this:
styles:
card:
- background: none
stack-in-card has an issue, I need to look into it but didnāt have time for now
ThaNerd
May 25, 2020, 11:53pm
3988
tismondo:
i status
So I changed it to āāstatus statusā ān nā āi addressā āi batteryā āi chargingāā and I got this:
so in that code I see all the fields but which one assigns where the entity_picture: goes? Seems like the code you provided made 4 columnsā¦
There arenāt 4 columns, but your justify-self settings make it look like there are. Without knowing what you want the card to finally look like, I canāt provide very specific help. Iāll assume you want a heading across the entire top of the card since thatās the version of my 2 suggestions you used.
To answer your question, entity_picture is defined by i (since youāve made show_entity_picture: true the entity_picture replaces your icon. i for icon.)
Start by changing justify-self: settings for both name: and status: to justify-self: center. That should show you that the name and status grid areas are spread across the entire top of both columns (and that you only have two, not four). The image and data points will be in the lower portion of the card, separated by the two columns.
Your entity_picture is cut off because it either needs to be made smaller, or you need to change your rows to some other size other than min-content (You can also use fractions of available space, using the nomenclature 1fr 2fr etc)
Again, if you give me a visual of what you want the card to look like I can be a lot more helpful.
benm7
May 26, 2020, 3:52am
3990
I have an issue with 0.110 which has suddenly stopped displaying some custom field information.
I have attached before and after as well as my code for these fields, which has not changed. Any idea what might have changed to cause this? All my sensors are still present and their names and attributes have not changed
Before:
After:
Snippet of button code:
- type: custom:decluttering-card
template: person_card_new
variables:
- entity: person.ben
- name: Ben
- battery: device_tracker.life360_ben
- work_sensor: sensor.ben_to_work_waze
- home_sensor: sensor.ben_to_home_waze
- work_icon: mdi:car
- entity_picture: /local/ben6.png
- show_entity_picture: true
- tap_action:
action: more-info
haptic: light
styles:
card:
- border-radius: 12px
- --paper-card-background-color: '[[background_color]]'
icon:
- grid-column: 1
- grid-row: 1 / 4
label:
- color: gray
- font-size: 11px
- padding: 0px 10px
- justify-self: start
state:
- font-size: 12px
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"i s" "i battery" "i home" "i work"'
- grid-template-columns: 50% 50%
- grid-template-rows: 25% 25% 25% 25%
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-size: 13px
entity_picture:
- height: 60px
- width: 60px
- border-radius: 100%
custom_fields:
battery:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
home:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
work:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
custom_fields:
battery: >
[[[
if (states['[[battery]]'].attributes.battery_charging === false)
return `<ha-icon
icon="mdi:battery"
style="; height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
else return `<ha-icon
icon="mdi:battery-charging"
style="; height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
]]]
home: >
[[[
return `<ha-icon
icon="mdi:home-import-outline"
style="; height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['[[home_sensor]]'].state}mins</span>`
]]]
work: >
[[[
return `<ha-icon
icon="[[work_icon]]"
style="; height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['[[work_sensor]]'].state}mins</span>`
]]]
2 Likes
Did you update decluttering-card to the latest version? Did you try without it?
benm7
May 26, 2020, 6:54am
3992
Thanks for the tip, I havenāt which could explain possibly the issue
benm7
May 26, 2020, 6:58am
3993
Ignore, sorry I have just realised I installed through HACS. Yes it seems to be up to date, I will try without it and report back to see if that works!
benm7
May 26, 2020, 8:57am
3994
No dice Iām afraid, have rebuilt directly using the button card and the same issue occurs for the custom field states onlyā¦ so doesnāt seem like an issue with decluttering.
here is the code:
- type: 'custom:button-card'
entity: person.ben
entity_picture: /local/ben6.png
size: 60%
lock: false
color: auto
background_color: var(--homekit)
variable: spin
spin: false
show_name: false
show_state: true
show_label: false
show_icon: true
show_last_changed: false
show_entity_picture: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
aspect_ratio: 2/1
margin-right: 20px
label: ' '
off_icon_color: gray
off_name_color: gray
off_state_color: gray
styles:
card:
- border-radius: 12px
- --paper-card-background-color: var(--homekit)
icon:
- grid-column: 1
- grid-row: 1 / 4
label:
- color: gray
- font-size: 11px
- padding: 0px 10px
- justify-self: start
state:
- font-size: 12px
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"i s" "i battery" "i home" "i work"'
- grid-template-columns: 50% 50%
- grid-template-rows: 25% 25% 25% 25%
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-size: 13px
entity_picture:
- height: 60px
- width: 60px
- border-radius: 100%
custom_fields:
battery:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
home:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
work:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
custom_fields:
battery: >
[[[
if (states['device_tracker.life360_ben'].attributes.battery_charging === false)
return `<ha-icon
icon="mdi:battery"
style="; height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['device_tracker.life360_ben'].attributes.battery}%</span>`
else return `<ha-icon
icon="mdi:battery-charging"
style="; height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['device_tracker.life360_ben'].attributes.battery}%</span>`
]]]
home: >
[[[
return `<ha-icon
icon="mdi:home-import-outline"
style="; height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.ben_to_home_waze'].state}mins</span>`
]]]
work: >
[[[
return `<ha-icon
icon="mdi:car"
style="; height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.ben_to_work_waze'].state}mins</span>`
]]]
state:
- value: "not_home"
styles:
card:
- opacity: 0.6
entity_picture:
- border: 1px solid var(--secondary-text-color)
- value: "home"
styles:
entity_picture:
- border: 1px solid var(--primary-line-color)
- value: "Ben Work"
styles:
entity_picture:
- border: 1px solid var(--secondary-line-color)
- value: "Jess Work"
styles:
entity_picture:
- border: 1px solid var(--secondary-line-color)
- value: "Poppy and Lola Home"
styles:
entity_picture:
- border: 1px solid var(--tertiary-line-color)
- value: "GPa and GMa Home"
styles:
entity_picture:
- border: 1px solid var(--tertiary-line-color)
Are you also running the latest button-card 3.3.5? What does your javascript console tell you?
lock: false doesnāt exist this way anymore
variable: spin, background_color: var(--homekit) are not configuration options
tap_action: you canāt toggle a person entity
benm7
May 26, 2020, 10:01am
3996
Sorry was a rush job to update it
- type: 'custom:button-card'
entity: person.ben
entity_picture: /local/ben6.png
size: 60%
color: auto
spin: false
show_name: false
show_state: true
show_label: false
show_icon: true
show_last_changed: false
show_entity_picture: true
tap_action:
action: more-info
haptic: light
aspect_ratio: 2/1
margin-right: 20px
label: ' '
off_icon_color: gray
off_name_color: gray
off_state_color: gray
styles:
card:
- border-radius: 12px
- --paper-card-background-color: var(--homekit)
icon:
- grid-column: 1
- grid-row: 1 / 4
label:
- color: gray
- font-size: 11px
- padding: 0px 10px
- justify-self: start
state:
- font-size: 12px
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"i s" "i battery" "i home" "i work"'
- grid-template-columns: 50% 50%
- grid-template-rows: 25% 25% 25% 25%
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-size: 13px
entity_picture:
- height: 60px
- width: 60px
- border-radius: 100%
custom_fields:
battery:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
home:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
work:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
custom_fields:
battery: >
[[[
if (states['device_tracker.life360_ben'].attributes.battery_charging === false)
return `<ha-icon
icon="mdi:battery"
style="; height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['device_tracker.life360_ben'].attributes.battery}%</span>`
else return `<ha-icon
icon="mdi:battery-charging"
style="; height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['device_tracker.life360_ben'].attributes.battery}%</span>`
]]]
home: >
[[[
return `<ha-icon
icon="mdi:home-import-outline"
style="; height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.ben_to_home_waze'].state}mins</span>`
]]]
work: >
[[[
return `<ha-icon
icon="mdi:car"
style="; height: 14px; color: var(--primary-line-color);">
</ha-icon><span>${states['sensor.ben_to_work_waze'].state}mins</span>`
]]]
state:
- value: "not_home"
styles:
card:
- opacity: 0.6
entity_picture:
- border: 1px solid var(--secondary-text-color)
- value: "home"
styles:
entity_picture:
- border: 1px solid var(--primary-line-color)
- value: "Ben Work"
styles:
entity_picture:
- border: 1px solid var(--secondary-line-color)
- value: "Jess Work"
styles:
entity_picture:
- border: 1px solid var(--secondary-line-color)
- value: "Poppy and Lola Home"
styles:
entity_picture:
- border: 1px solid var(--tertiary-line-color)
- value: "GPa and GMa Home"
styles:
entity_picture:
- border: 1px solid var(--tertiary-line-color)
Unsure how I use Javascript console sorry
can confirm I am running the latest 3.3.5 and have updated those details but still the same issue Iām afraid. Updated code below.