hopefully, if I state at this code long enough ul fully understand what’s going on here. Looks great!
@iantrich - So I love the look of this card but it doesn’t look like templow is populated for me by DarkSky. So I get undefinned for that in the card.
'<div style="font-size: 11px;">' + entity.attributes.temperature + '°F - ' + entity.attributes.forecast[0].temperature + '°F / ' + entity.attributes.forecast[0].templow + '°F</div>' +
if I go into the template tool I see that forecast doesn’t have this key at all
{{states.weather.dark_sky.attributes.forecast }}
[{'datetime': '2019-07-08T14:00:00', 'temperature': 89, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T15:00:00', 'temperature': 90, 'precipitation': 0.1, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T16:00:00', 'temperature': 89, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T17:00:00', 'temperature': 89, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T18:00:00', 'temperature': 89, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T19:00:00', 'temperature': 88, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T20:00:00', 'temperature': 86, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T21:00:00', 'temperature': 83, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T22:00:00', 'temperature': 80, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T23:00:00', 'temperature': 78, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T00:00:00', 'temperature': 76, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T01:00:00', 'temperature': 76, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T02:00:00', 'temperature': 75, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T03:00:00', 'temperature': 74, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T04:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T05:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T06:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T07:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T08:00:00', 'temperature': 74, 'precipitation': None, 'condition': 'sunny'}, {'datetime': '2019-07-09T09:00:00', 'temperature': 76, 'precipitation': None, 'condition': 'sunny'}, {'datetime': '2019-07-09T10:00:00', 'temperature': 79, 'precipitation': None, 'condition': 'sunny'}, {'datetime': '2019-07-09T11:00:00', 'temperature': 82, 'precipitation': None, 'condition': 'sunny'}, {'datetime': '2019-07-09T12:00:00', 'temperature': 85, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T13:00:00', 'temperature': 87, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T14:00:00', 'temperature': 88, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T15:00:00', 'temperature': 88, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T16:00:00', 'temperature': 87, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T17:00:00', 'temperature': 86, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T18:00:00', 'temperature': 86, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T19:00:00', 'temperature': 84, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T20:00:00', 'temperature': 82, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T21:00:00', 'temperature': 80, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T22:00:00', 'temperature': 78, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T23:00:00', 'temperature': 76, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T00:00:00', 'temperature': 75, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T01:00:00', 'temperature': 75, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T02:00:00', 'temperature': 75, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T03:00:00', 'temperature': 75, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T04:00:00', 'temperature': 74, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T05:00:00', 'temperature': 74, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T06:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T07:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T08:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T09:00:00', 'temperature': 74, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T10:00:00', 'temperature': 77, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T11:00:00', 'temperature': 79, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T12:00:00', 'temperature': 82, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T13:00:00', 'temperature': 84, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T14:00:00', 'temperature': 86, 'precipitation': None, 'condition': 'partlycloudy'}]
Am I doing something wrong here ?
Looks like you have hourly mode set which doesn’t include a low temp. You can either modify my button to not include that or switch to daily mode
platform: darksky
api_key: !secret darksky_api_key
mode: daily
I admit that this request is only a bit of a ‘nice to have’, but would it be possible to stop the animation and the cursor changing if there is no action ?
That should already be the case, if not, explicitly specify:
tap_action:
action: none
1 Like
EDIT2: Actually - still an issue. Does not work when placed inside the surrounding card.
EDIT1: figured it out. Changed my horizontal stack to a layout card, with 4 blank cards total surrounding the 3 visible buttons.
- type: custom:layout-card
layout: horizontal
column_num: 7
max_columns: 7
max_width: [10%, 20%, 10%, 20%, 10%, 20%, 10%]
Happy with the result:
ORIGINAL POST:
Can someone point me in the right direction to achieve the above without using hardcoded pixel widths / heights? I thought I could add 4 blank buttons surrounding the centered buttons with width @ 25%, but after reading more I see you have to use widths in px. I also ran into the issue if I used more than 5 buttons the height would shrink automatically. Tried experimenting with styles - margin / padding, and aspect ratios as well.
Hoping someone can help! I am trying to modify the button card using card-modder for my themostats so that it looks more like the Homekit button. From this:
To this (sort of):
Essentially the circle is the icon enlarged and moved, which changes colour based on state, and the number inside it is the temperature attribute of the climate entity. The current icon changes colour, I just need to reposition it, enlarge it and add the attribute within it.
My code for the buttons is:
- type: custom:decluttering-card
template: switch_button_card_flat
variables:
- entity: climate.air_conditioner
- name: Main AC
- icon: circle
- color: DodgerBlue
- tap_action:
action: more-info
haptic: light
And the decluttering card is (thanks to jimz01 homekit theme!):
switch_button_card_flat:
default:
- size: 25%
- lock: false
- color: auto
- background_color: var(–homekit)
- variable: spin
- spin: false
- show_name: true
- show_state: true
- show_label: true
- show_icon: true
- show_last_changed: false
- tap_action:
action: toggle
haptic: light
- hold_action:
action: more-info
haptic: success
- aspect_ratio: 3/1
- margin-left: 0px
- margin-right: 60px
- label: ’ ’
- opacity: 0.4
- off_icon_color: gray
- off_name_color: gray
- off_state_color: gray- icon_height: 120px
- icon_width: 120px
card:
type: custom:button-card
name: ‘[[name]]’
icon: ‘mdi:[[icon]]’
size: ‘[[size]]’
color: ‘[[color]]’
lock: ‘[[lock]]’
aspect_ratio: ‘[[aspect_ratio]]’
entity: ‘[[entity]]’
label: ‘[[label]]’
show_name: ‘[[show_name]]’
show_icon: ‘[[show_icon]]’
show_state: ‘[[show_state]]’
show_label: ‘[[show_label]]’
show_last_changed: ‘[[show_last_changed]]’
tap_action: ‘[[tap_action]]’
hold_action: ‘[[hold_action]]’
styles:
card:
- border-radius: 12px
- --paper-card-background-color: ‘[[background_color]]’
label:
- color: gray
- font-size: 11px- font-family: Helvetica
- padding: 0px 10px - justify-self: start state: - font-size: 11px- font-family: Helvetica
- padding: 0px 10px - justify-self: start - text-transform: capitalize - font-weight: bold - padding-left: 40px - color: gray grid: - grid-template-areas: '"i" "n" "s" "l"' - grid-template-columns: 1fr - grid-template-rows: 1fr min-content min-content img_cell: - align-self: start - text-align: start - margin-left: '[[margin-left]]' - margin-right: '[[margin-right]]' name: - justify-self: start - padding-top: 6px - padding-left: 40px - font-weight: bold- font-family: Helvetica
- font-size: 13px state: - value: "off" styles: card: - opacity: '[[opacity]]' icon: - color: '[[off_icon_color]]'- height: ‘[[icon_height]]’
- width: ‘[[icon_width]]’
name: - color: '[[off_name_color]]' state: - color: '[[off_state_color]]' lock: - color: black - value: "dry" styles: card: - opacity: 1.0 icon: - color: '#F5AB98' state: - color: var(--secondary-text-color) name: - color: var(--primary-text-color) - value: "fan only" styles: card: - opacity: 1.0 icon: - color: 'rgb(96,201,48)' state: - color: var(--secondary-text-color) name: - color: var(--primary-text-color) - value: "heat" styles: card:- color: var(–homekit)
- opacity: 1.0 icon: - color: 'rgb(253,148,38)' state: - color: var(--secondary-text-color) name: - color: var(--primary-text-color) - value: "cool" styles: card: - opacity: 1.0 icon: - color: 'rgb(96,201,48)' state: - color: var(--secondary-text-color) name: - color: var(--primary-text-color) - value: "auto" styles: card: - opacity: 1.0 icon: - color: 'rgb(96,201,48)' state: - color: var(--secondary-text-color) name: - color: var(--primary-text-color)
How are you getting the temperature attribute to appear over the icon?
Hey!
I am trying to understand that template stuff and I dont know if I am trying with some impossible stuff here.
But I have a sensor with a unix timestamp…
sensor.outdoor_temp_min_time: 1562976393.011463
And now I am trying to display it in a specific format and I tried this but the button just diaper so I guess I am doing something wrong, but what? 
label_template: >
return states['sensor.outdoor_temp_min_time'] | float | timestamp_custom['%H:%M:%S'];
I also tried with (" and also with {{ but I cant get it right… Any ideas?
It’s a mock up, haven’t actually been able to do it 
It is not jinja2 templating; check the examples
What example shall I look for? I have been looking on button-cards example page but I can seem to find out what is wrong… Can you send a link to that “example” or show me the correct code?
Or is it impossible to do it this way?
It is possible, but your code is jinja2 and button-card templates use javascript not jinja2 so you have to transform your sensor state using javascript functions like Date.
1 Like
label_template: >
function timeDifference(current, previous) {
var msPerMinute = 60 * 1000;
var msPerHour = msPerMinute * 60;
var msPerDay = msPerHour * 24;
var msPerMonth = msPerDay * 30;
var msPerYear = msPerDay * 365;
var elapsed = current - previous;
if (elapsed < msPerMinute) {
return Math.round(elapsed/1000) + ' seconds ago';
}
else if (elapsed < msPerHour) {
return Math.round(elapsed/msPerMinute) + ' minutes ago';
}
else if (elapsed < msPerDay ) {
return Math.round(elapsed/msPerHour ) + ' hours ago';
}
else if (elapsed < msPerMonth) {
return Math.round(elapsed/msPerDay) + ' days ago';
}
else if (elapsed < msPerYear) {
return Math.round(elapsed/msPerMonth) + ' months ago';
}
else {
return Math.round(elapsed/msPerYear ) + ' years ago';
}
}
return '<div>' + timeDifference(new Date(), new Date(entity.last_changed)) + '</div>';
1 Like
I want a button to toggle Alexa Guard on and off. In Home Assistant, my Guard entity is:
alarm_control_panel.alexa_guard_18020
To turn on Alexa Guard I have to use the service:
alarm_control_panel.alarm_arm_away
And to turn it off I use the service:
alarm_control_panel.alarm_disarm
So obviously the state of alarm_control_panel.alexa_guard_18020 would be used to determine which of the two services to execute. Am I correct in assuming that toggling arm and disarm for an alarm_control_panel entity cannot be done with this button card component without using a script?
1 Like
For now, yes, you’re correct 
1 Like
I am trying to use an entity picture as a replacement for an icon on a round button, but for some reason the pictures get cut off at the bottom, shown below. Any idea why this might be happening? I have set height and width to 100% in the style of the entity picture, and have made the buttons and pictures the same height and width so I don’t think it is an aspect ratio issue. Even when i increase the height of the entity picture it still cuts the top and bottom off, can’t for the life of me work out why!
There’s padding in the card, so try with:
styles:
card:
- padding: 0px
Worked perfectly, thanks a bunch!
Completely lost. Love the card. Was using it successfully and recently decided it’s time to update.
Had to rework around tap_action and more_info.
The problem is that my lovelace.yaml is split into five files. And while everything works on the front page (let’s name it 1.yaml) on other pages taps don’t work at all