Thanks! That works.
I don’t want to appear ungrateful 
but is there any way that either the button card or the decluttering card can be changed to not need the extra ‘-’? I know it is correct syntax but so far it is the only place in my config I have needed it. I always just use a ‘>’.
Obviously this is a very small request but if it’s something simple…
I would have to refactor entirely the decluttering card. Maybe I’ll think about it at some point 
For now the rule is: If you have multiline strings for decluttering card, use >-
Is it possible to show last-changed information within the button-card?
I’ve searched, but I haven’t found any info.
Thanks
I’ll add my gratitude to @RomRider , and support for this request gladly.
trying to get the prescriptions thought HA custom cards as uniform as possible 
doing so it would also be magic if
on the decluttering cards could be simplified to
card:
type: custom:button-card
entity: [[entity]]
name: [[name]]
lock: [[lock]]
size: [[size]]
aspect_ratio: [[aspect_ratio]]
label: [[label]]
…
show_last_changed: true
That will never work because in yaml without the quotes, this:
key: [[value]]
Means:
key:
-
- value
I’ll add that yaml is a data presentation format, and I can only do so much with it
This >- means that for a multiline string, it doesn’t include the last carriage return and it is required for decluttering card as I transform everything to JSON to replace the template with the values you want.
I’ll let you read this, it will help you understand all the use cases of YAML multiline strings: https://yaml-multiline.info/
Thanks @RomRider
is it possible to align it on the left?
Probably the right align is causing this
without show_last_changed: true
with show_last_changed: true
Thanks
Share your config please, I can’t tell you what to change without it.
Thanks @RomRider
I’m a newbie with CSS and playing around probably I found some way to do it.
It’s not so easy to me, but I’m willing to learn.
This is the code that I grab here and adapt to my needs.
- type: custom:button-card
entity: 'sensor.temp_letto_xiaomi_2'
icon: 'mdi:thermometer-lines'
aspect_ratio: 1/1
name: Letto
show_last_changed: true
styles:
card:
- background-color: '#000044'
- border-radius: 10%
- padding: 2%
- color: ivory
- font-size: 8px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i n" "temp temp" "hum hum" "press press" "batt batt"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 16px
- color: white
- align-self: right
- justify-self: center
- padding-bottom: 20px
img_cell:
- justify-content: start
- align-items: start
- margin: none
label:
- color: white
- justify-self: start
- font-weight: bold
- font-size: 13px
icon:
- color: >
[[[
if (entity.state < 15) return 'lime';
if (entity.state >= 15 && entity.state < 30) return 'orange';
else return 'red';
]]]
- width: 50%
- margin-top: -20%
custom_fields:
temp:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- font-size: 13px
- font-weight: bold
hum:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- font-weight: bold
- font-size: 13px
- --text-color-sensor: '[[[ if (states["sensor.temp_letto_xiaomi"].state > 60) return "orange"; ]]]'
press:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- font-weight: bold
- font-size: 13px
batt:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- font-weight: bold
- font-size: 13px
- --text-color-sensor: '[[[ if (states["sensor.temp_letto_xiaomi_3"].battery_level < 20) return "orange"; ]]]'
custom_fields:
temp: >
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 14px; height: 14px; color: yellow;">
</ha-icon><span>Temperatura: <span style="color: var(--text-color-sensor);">${entity.state} °C</span></span>`
]]]
hum: >
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon><span>Umidità: <span style="color: var(--text-color-sensor);">${states['sensor.temp_letto_xiaomi'].state}%</span></span>`
]]]
press: >
[[[
return `<ha-icon
icon="mdi:gauge"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon><span>Pressione: <span style="color: var(--text-color-sensor);">${states['sensor.temp_letto_xiaomi_3'].state} hPA</span></span>`
]]]
batt: >
[[[
return `<ha-icon
icon="mdi:battery-50"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon><span>Batteria: <span style="color: var(--text-color-sensor);">${states['sensor.temp_letto_xiaomi_3'].attributes.battery_level}%</span></span>`
]]]
and this is the result using three buttons per row
Good
Some readings about css grids:
That’s the solution:
- type: custom:button-card
entity: 'sensor.temp_letto_xiaomi_2'
icon: 'mdi:thermometer-lines'
aspect_ratio: 1/1
name: Letto
show_last_changed: true
styles:
card:
- background-color: '#000044'
- border-radius: 10%
- padding: 2%
- color: ivory
- font-size: 8px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i n" "temp temp" "hum hum" "press press" "batt batt" "l l"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 16px
- color: white
- align-self: right
- justify-self: center
- padding-bottom: 20px
img_cell:
- justify-content: start
- align-items: start
- margin: none
label:
- color: white
- align-self: middle
- justify-self: start
- font-weight: bold
- font-size: 13px
icon:
- color: >
[[[
if (entity.state < 15) return 'lime';
if (entity.state >= 15 && entity.state < 30) return 'orange';
else return 'red';
]]]
- width: 50%
- margin-top: -20%
custom_fields:
temp:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- font-size: 13px
- font-weight: bold
hum:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- font-weight: bold
- font-size: 13px
- --text-color-sensor: '[[[ if (states["sensor.temp_letto_xiaomi"].state > 60) return "orange"; ]]]'
press:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- font-weight: bold
- font-size: 13px
batt:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- font-weight: bold
- font-size: 13px
- --text-color-sensor: '[[[ if (states["sensor.temp_letto_xiaomi_3"].battery_level < 20) return "orange"; ]]]'
custom_fields:
temp: >
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 14px; height: 14px; color: yellow;">
</ha-icon><span>Temperatura: <span style="color: var(--text-color-sensor);">${entity.state} °C</span></span>`
]]]
hum: >
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon><span>Umidità: <span style="color: var(--text-color-sensor);">${states['sensor.temp_letto_xiaomi'].state}%</span></span>`
]]]
press: >
[[[
return `<ha-icon
icon="mdi:gauge"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon><span>Pressione: <span style="color: var(--text-color-sensor);">${states['sensor.temp_letto_xiaomi_3'].state} hPA</span></span>`
]]]
batt: >
[[[
return `<ha-icon
icon="mdi:battery-50"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon><span>Batteria: <span style="color: var(--text-color-sensor);">${states['sensor.temp_letto_xiaomi_3'].attributes.battery_level}%</span></span>`
]]]
Thanks, I will try later.
What I’m seeing is that the icon reduce the size or even disappear when the name is longer.
It seems that the right space near the name is not used.
Hope to find a way to do it.
That’s all fixed in the version I posted above (I just edited it right now to fix the “icon disapear” thingy)
Thanks!
It’s working really fine and solved all the issues I was having on format, size, align and so on…
I will try to understand the differences.
It’s mainly on this part:
grid:
- grid-template-areas: '"i n" "temp temp" "hum hum" "press press" "batt batt" "l l"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content min-content
With new version it’s possible to embed stuff in button, like camera, online weather pic/gif and iframe to use interactive stuff like Grafana or Windy
So much great stuff here Thanks for sharing @LbDab !
Quick thing, I think you can use show_name: false instead of:
styles:
name:
- display: none
Still a great card and I use it graciously, however the update to 2.x made the addon unusable for me. Every button I tap will inact a double tap. I know this is probably a bug in ios 13, but previously I could work around it by holding the button slightly longer than a tap but not too long to activate the hold_action. Unfortunately there is no way to do this anymore since this update and every button I press will turn itselfs back on/off immediately after pressing the button.
I will revert to 1.11 to see if it “fixes” my problem. I will also test this on my wifes phone later on as she is still on iOS 12. If Apple doesn’t fix this soon I am going crazy, and a gut feeling says they wont as it has been like this since beta 1 (we are on beta 4 now!)
Edit: it seems most prominent on buttons that switch conditional cards. Really strange
I guess if you use the default button from Home-Assistant Core, you have the same issue? (I use almost the same code as the one from Hass Core to handle tap and hold).
Would you mind doing the test please?
(the modification I did to handle tap and hold shouldn’t modify the behaviour… and also this shouldn’t be a problem as it works everywhere but not on IOS 13 
)
I’m downloading xcode beta to be able to run the simulator with IOS 13 and test what’s going on… I guess I’ll have to do a dirty hack for this to work again… argh I hate Apple IOS devices
Srry not at home right now, but I have tested this with beta 1 and 2 and the behavior is the same with core buttons. So I don’t think there is really much you can do about it. I just noticed that with the 2.x update the behaviour is more prominent.
Pff I really hope that Apple will fix this, in the mean time I am going to try a fresh install of ios. Sometimes it helps doing this haha.
No need to reinstall. I’ve managed to reproduce using the IOS 13 simulator from xcode. I’ll try to learn how to debug this IOS sh*t