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
Okay, I’ve checked. It’s because they’ve change the way ha-icon works in core…style of an <ha-icon> element, replace height: 14px; with --mdc-icon-size: 14px; (or another value) and you’ll be good to go.
ThaNerd
May 26, 2020, 8:03pm
3998
Is there a way to change the state of a button? For instance I have a timer, when it’s not in use it shows “idle”. Is there a way to make my button show “timer off” when state = “idle”?
petro
May 26, 2020, 8:07pm
3999
Yes, with the state_display field and templates .
1 Like
Something like this will probably do the trick:
state_display: '[[[ if (entity.state === "idle") return "timer off"; else return null ]]]'
1 Like
I have a bit of trouble aligning my the text on my button. Could i get some help with the Grid Template please?
This is how it currently looks:
However, i would like to have the 4.0min on the left side, and at the same height on the right side the 7.0 LvL.
Any tipps on how to do that?
This is the code
type: 'custom:button-card'
entity: fan.schlafzimmer
icon: 'hass:fan'
custom_fields:
timer:
card:
type: entity
entity: input_number.bedroom_fantime
icon: ' '
name: ' '
unit: min
style: |
ha-card {
box-shadow: none;
}
speed:
card:
type: entity
entity: input_number.livingroom_fanspeed
icon: ' '
name: ' '
unit: LvL
style: |
ha-card {
box-shadow: none;
}
styles:
custom_fields:
timer:
- filter: opacity(50%)
- overflow: unset
speed:
- filter: opacity(50%)
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"i" "n" "s" "timer" "speed"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
´``
I just noticed the new file is .ts instead of .js in github, do I need to replace my current .js file with the new .ts file?
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.