If learned that as soon as i put in the Entities card thats when on load sometimes my card is transparent.
If i remove it everything works fine.
- entities:
- input_select.freetoair
show_header_toggle: false
type: entities
youāre at least missing a closing } for the(all) style section(s).
not sure if it helps your issue, but you should add it
yeh this is how ive done the new code. But i still have the problem when uting Entities with input_select together with Custom buttons together. So the problem is always after the Entities were ever i put it.
cards:
- content: |
## <ha-icon icon="mdi:remote"></ha-icon> Vardagsrum
type: markdown
- cards:
- card: null
color: var(--secondary-text-color)
color_type: icon
entity: switch.appletv
icon: 'mdi:apple'
name: ' '
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: Apple tv
entity_id: remote.vardagsrum
type: 'custom:button-card'
- card: null
color: var(--secondary-text-color)
color_type: icon
entity: switch.htpc
icon: 'mdi:desktop-classic'
name: ' '
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: Htpc
entity_id: remote.vardagsrum
type: 'custom:button-card'
- card: null
color: var(--secondary-text-color)
color_type: icon
entity: switch.tv
icon: 'fas:tv'
name: ' '
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: Tv
entity_id: remote.vardagsrum
type: 'custom:button-card'
- card: null
color: var(--secondary-text-color)
color_type: icon
entity: switch.ps4
icon: 'mdi:playstation'
name: ' '
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: PS4
entity_id: remote.vardagsrum
type: 'custom:button-card'
- card: null
color: var(--red)
color_off: var(--primary-text-color)
color_type: icon
icon: 'mdi:power'
name: ' '
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_off
service_data:
entity_id: remote.vardagsrum
type: 'custom:button-card'
type: horizontal-stack
- entities:
- input_select.freetoair
type: entities
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:exit-to-app'
name: HDMI 1
show_icon: false
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi1
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-up'
name: HDMI 2
show_icon: false
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi2
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:menu'
name: HDMI 3
show_icon: false
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi3
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:volume-plus'
name: HDMI 4
show_icon: false
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi4
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:exit-to-app'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_exit
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-up'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_upp
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:menu'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_menu
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
double_tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeUp
device: 52940343
entity_id: remote.vardagsrum
icon: 'mdi:volume-plus'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeUp
device: 52940343
entity_id: remote.vardagsrum
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-left'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_left
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:smoke-detector'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ok
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-right'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_right
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
double_tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeDown
device: 52940343
entity_id: remote.vardagsrum
icon: 'mdi:volume-minus'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeDown
device: 52940343
entity_id: remote.vardagsrum
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:volume-off'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_mute
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-down'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ner
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:keyboard-return'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_prev
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:arrow-up-bold'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_channel_up
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:gamepad-variant'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.gamemode
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:play-pause'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_play
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:television-guide'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_guide
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:arrow-down-bold'
size: 25%
style: |
:active ;
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_channel_down
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
type: vertical-stack
been a long day, so excuse me if this is too stupid to ask, but why doesnāt my tap_action work on the entity?
- type: 'custom:button-card'
name: Family Presence
template: button_default_title
tap_action:
action: more-info
entity: sensor.family_home
hold_action:
action: navigate
navigation_path: phones_tablets
hold_action navigates fine, and yes, the sensor.family_home actually existsā¦
must be going blind
thanks if you can have a look
update
seems to boil down to not having an entity in the main button config. If I do this:
- type: 'custom:button-card'
name: Family Presence
template: button_default_title
entity: sensor.family_home
show_icon: false
tap_action:
action: more-info
# entity: sensor.family_home
hold_action:
action: navigate
navigation_path: phones_tablets
it works, but only if I add the show_icon: false because that is true by default, and messes the layout of the button.
@RomRider could you see if this is qualifying as a bug, or at least a (edge) case not catered for:
use tap_action more-info with an entity in the tap_action doesnāt work if the button does not have an entity set in the button config?
Please note Iāve also tried color_type: label-card but the issue remains the same. no more-info action initiated. No advantage for the label-card while I would have thought it to take away the need to set show_icon: false. Not so. So what does the label-card do in fact?
Does tap work if you select a specifik device like device_tracker.mobile?
In a more attempt to find out what my problem is i removed entities and made a button row with channels to see if that fixed it. Button row was made out of Slide row. So i could fitt all my channels.
It still triggers the Transparent problem. I allso removed the style: section to negate that as the problem.
So now i think its the Condition screwing it upp. Or something allse.
HI,
trying to figure out the ideal border-radius for a notification custom_field but I am stuck, probably because I a dong it the incorrect way, so turning to the community for help please.
hereās what the regular border-radius: 50% does on a single character field:
but this is what 20% radius does on a word:
50% makes it even worse, creating even more of a sausage rugby-ball 
deleted the radius all to gether, since I use non-rounded buttons to be in style with that, but am not sure I like that:
Ive got no better way to express what I want/need then referencing this toggle-switch form factor:
what css setting should I try to have the notification field look like the toggle switch (start with radius 50%, then straight, end finally end with radius 50% again)ā¦?
hope this is possible, and thank you for having a look at it!
edit
using 100px instead of % makes this, which comes close:
though still not sure if this is the way to go. Nor why this is better than using %. Any Css guru advice appreciated!
1 Like
I would like to share my Life360 tracking buttonā¦
Unfortunately thereās a problem with the map in that it keeps on refreshing (Iāve raised an issue for it), but if you donāt mind that then please read on.
This uses @RomRiderās decluttering card which is a great way to repeat the same code but with different entities, so hopefully you can use this as an example for that too.
It also uses Card Mod so that the map card seamlessly fits within the button.
# ui-lovelace.yaml
resources:
- url: /community_plugin/button-card/button-card.js
type: module
- url: /community_plugin/decluttering-card/decluttering-card.js
type: module
- url: /community_plugin/lovelace-card-mod/card-mod.js
type: module
decluttering_templates:
life360_dtemplate:
card:
type: custom:button-card
entity: '[[entity]]'
show_entity_picture: true
show_state: true
name: '[[name]]'
tap_action: more-info
styles:
card:
- background: 'linear-gradient(rgba(255,255,255,0.1)16%, rgba(0,0,20,0.3)84%)'
- border-radius: 15px
- border: 'solid 1.5px rgb(0,0,0)'
- font-size: 17px
- text-shadow: 0px 0px 5px black
- height: 270px
- width: 540px
- padding: 0px
grid:
- grid-template-rows: 1fr min-content min-content min-content min-content min-content min-content min-content # 8 rows
- grid-template-columns: 1fr 1fr 50% # 3 columns, right half is the map
- grid-template-areas: '"i batt map" "n s map" "speed speed map" "place place map" "since since map" "journey journey map" "accur accur map" "seen seen map"'
name:
- align-self: start
- justify-self: middle
- padding-bottom: 10px
- font-size: 20px
- font-weight: bold
state:
- justify-self: middle
- padding-bottom: 10px
- font-size: 15px
- color: deepskyblue
entity_picture:
- width: 50%
- justify-self: middle
- border-radius: 100%
- padding: 0px
custom_fields:
batt:
- align-self: middle # up/down
- justify-self: middle # left/right
- font-size: 20px
speed:
- justify-self: start
- font-size: 15px
- padding-left: 10px
place:
- justify-self: start
- font-size: 15px
- padding-left: 10px
since:
- justify-self: start
- font-size: 15px
- padding-left: 10px
journey:
- justify-self: start
- font-size: 15px
- padding-left: 10px
accur:
- justify-self: start
- font-size: 15px
- padding-left: 10px
seen:
- justify-self: start
- font-size: 15px
- padding-left: 10px
- padding-bottom: 10px
map:
- align-self: middle
- justify-self: middle
custom_fields:
batt: >
[[[
let battery = states['[[entity]]'].attributes.battery;
let battery_icon = states['[[batt_template]]'].attributes.icon;
var battery_icon_color = states['[[entity]]'].attributes.battery > '30' ? 'green' : 'red';
return `<ha-icon icon="${battery_icon}" style="width: 30px; height: 30px; padding-bottom: 10px; color:${battery_icon_color};"></ha-icon> ${battery}%`
]]]
speed: |
[[[
let speed = states['[[entity]]'].attributes.speed;
if (states['[[entity]]'].attributes.moving) return `<ha-icon icon="mdi:car" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
<span style="color: deepskyblue; font-weight: bold;">Status:</span> moving - ${speed} mph`
else if (states['[[entity]]'].attributes.driving) return `<ha-icon icon="mdi:car" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
<span style="color: deepskyblue; font-weight: bold;">Status:</span> driving - ${speed} mph`
else return `<ha-icon icon="mdi:car" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
<span style="color: deepskyblue; font-weight: bold;">Status:</span> Standstill`
]]]
place: |
[[[
return `
<ha-icon icon="mdi:map-marker-radius" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
<span style="color: deepskyblue; font-weight: bold;">Place:</span>
${states['[[entity]]'].attributes.place}`
]]]
since: >
[[[
return `
<ha-icon icon="mdi:map-clock-outline" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
<span style="color: deepskyblue; font-weight: bold;">Since:</span>
${states['[[since]]'].state}`
]]]
journey: >
[[[
return `
<ha-icon icon="mdi:map-marker-down" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
<span style="color: deepskyblue; font-weight: bold;">Time to home:</span>
${states['[[travel_time]]'].state} mins`
]]]
accur: |
[[[
return `
<ha-icon icon="mdi:map-marker-circle" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
<span style="color: deepskyblue; font-weight: bold;">GPS Accur:</span>
${states['[[entity]]'].attributes.gps_accuracy}`
]]]
seen: |
[[[
return `
<ha-icon icon="mdi:map-marker-check" style="width: 17px; height: 17px; padding-bottom: 6px; padding-right: 6px; color: deepskyblue;"></ha-icon>
<span style="color: deepskyblue; font-weight: bold;">Last Seen:</span>
${states['[[lastseen]]'].state}`
]]]
map:
card:
type: map
style: |
ha-card {
box-shadow: none;
}
default_zoom: 16
entities:
- '[[entity]]'
title: Home
views:
- title: test
icon: mdi:run
panel: false
path: test
cards:
- type: vertical-stack
cards:
- type: 'custom:decluttering-card'
template: life360_dtemplate
variables:
- entity: device_tracker.life360_name
- name: Name
- batt_template: sensor.name_battery_template
- travel_time: sensor.phone_to_home_name
- since: sensor.life360_name_since
- lastseen: sensor.life360_name_lastseen
# Configuration or package yaml
sensor:
- platform: google_travel_time
name: phone_to_home_name
scan_interval: 21600 # 6 hours
api_key: !secret google_maps_api
origin: device_tracker.life360_name
destination: !secret address
- platform: template
sensors:
life360_name_lastseen:
friendly_name: "Name Last Seen"
value_template: "{{ as_timestamp(state_attr('device_tracker.life360_name', 'last_seen')) | timestamp_custom('%A @ %-I:%M %p') }}"
life360_name_since:
friendly_name: "Name Location Since"
value_template: "{{ as_timestamp(state_attr('device_tracker.life360_name', 'at_loc_since')) | timestamp_custom('%A @ %-I:%M %p') }}"
name_battery_template:
friendly_name: Name Phone Battery
unit_of_measurement: '%'
value_template: "{{ states.device_tracker.life360_name.attributes.battery |int(-1) }}"
icon_template: >-
{% if states.device_tracker.life360_name.attributes.battery != "unknown" %}
{% set battery_level = states.device_tracker.life360_name.attributes.battery|int (-1)%}
{% set battery_round = (battery_level|int / 10)|int * 10 %}
{% if states.device_tracker.life360_name.attributes.battery_charging|lower == "true" %}
{% if battery_level == -1 %}
mdi:battery-unknown
{% else %}
{% if battery_round >= 100 %}
mdi:battery-charging-100
{% elif battery_round > 0 %}
mdi:battery-charging-{{ battery_round }}
{% else %}
mdi:battery-alert
{% endif %}
{% endif %}
{% else %}
{% if battery_level == -1 %}
mdi:battery-unknown
{% else %}
{% if battery_round >= 100 %}
mdi:battery
{% elif battery_round > 0 %}
mdi:battery-{{ battery_round }}
{% else %}
mdi:battery-alert
{% endif %}
{% endif %}
{% endif %}
{% else %}
mdi:battery-alert
{% endif %}
automation:
# To stay within the free API call limit made to Google, I only update the google travel time sensor at certain times
- alias: "Commute - Update afternoon commute sensor"
initial_state: 'on'
trigger:
- platform: time_pattern
minutes: '/2'
condition:
- condition: time
after: '16:00:00'
before: '18:00:00'
- condition: time
weekday:
- mon
- tue
- wed
- thu
- fri
action:
- service: homeassistant.update_entity
entity_id: sensor.phone_to_home_name
4 Likes
Not a guru, but making it a large pixel size will work until you get large enough to be greater than 100 pixels. Iād end up doing that. % is not the way to go with rectangular features.
can you strip out a single button from that mess please? Too much to look at and debug.
Guys, I started using this card yesterday and itās great for many jobs.
I didnāt read all 3012 post in this topic (read the docs though) but could anyone tell me why almost every option is templatable but not color? It would be usefulā¦ or I donāt need it provided I use card_mod for things like hiding box_shadow?
And one more thing - is it correct that we can change label and name but we cannot do anything about stateās content?
color is a style, all styles should be handled under the state field
state:
- value: 'on'
styles:
icon:
color: blah
- value: 'off'
styles:
icon:
color: blah
sure you can, use a custom_field and call it fakeState 
use it all the time to combine the use of label for last_changed, but also want to see other values that are not the state. Combining those can save precious button real estateā¦
you could even use that in a state template if youād like
- value: 'on'
custom_fields:
stateDisplay: >
[[[ var fakestate = `<span style="color: #F0C209;"> ${entity.state}:</span>`;
var fakelabel = `<span style="color: #F0C209;"> ${Math.round(entity.attributes.brightness / 2.55)} %</span>`;
return fakestate +' ' + fakelabel;]]]
or use the name field for it, (thatās the great thing about Button-card, you can template anything into anything):
name: >
[[[
var fakestate = `<span style="color: red;font-size: 11px;word-wrap:break-word;"> ${entity.state.substr(0, entity.state.length-11)} </span>`;
return 'Last motion' + "<br>" + fakestate
]]]
1 Like
Hi lovely card, however im having issues with the icon not begin aligned left
can someone tell me whats wrong please?
button_card_templates:
light_button:
color_type: label-card
styles:
card:
- width: 125px
- height: 125px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- align: start
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-size: 20px
state:
- justify-self: start
- padding-left: 10px
show_label: false
show_state: true
state:
- value: 'on'
styles:
card:
- color: black
icon:
- color: orange
tap_action:
action: toggle its centered instead of left
sounds reasonable, will try that.
UPDATE:
hereās the correct way that worked for me:
state:
- operator: template
value: "[[[return isFinite(entity.state.split(' ')[0])]]]"
icon: 'mdi:power-off'
styles:
icon:
- color: 'gray'
well, I only had access to docs and they list both icon and color at the same level and it didnāt work. Actually, looking closer to the docs, that color is very versatile as may be applicable to background/icon/etc but itās just a string and that inside styles can be a template!
last night I decided not to dive into that, sounded too abstract
yes, but Iām yet to link it with state of my entityā¦ as itās the state that being compared to value, isnāt it?
I know I can template name and label, but the thing is they all have their own names in the cardās grid and my main problem was to position two strings to the right from the icon (name and label) and one to the right of them (hereās my code).
Looks like I need to learn about custom_field asap
UPDATE2: thanks @Mariusthvdb, it wasnāt clear after reading the docs (to me) what these custom_fields are for. Now my card works without additional sensors, happy days!
I have a similar problem and so far was unable to change it.
Hereās how it looks:
Can we use the javascript switch in templates?
If so can someone tell me how please.
This doesnāt seem to workā¦
[[[
var cycle = 'none';
switch(cycle)
case 'none':
return 'Idle';
default:
return 'Something Else';
]]]
I believe youāre just missing opening and closing braces. Try this:
[[[
var cycle = 'none';
switch(cycle) {
case 'none':
return 'Idle';
default:
return 'Something Else';
}
]]]
But the problem is not on a single button the problem happens when i combine the following cards
- content
- custom:button-card
- conditional
- horizontal-stack
- vertical-stack
- Entities
And i cant single them out cause the transparent problem only happens when ever they are all combined and it happens direcly after the entities funktion.
So the only way to se it is to use it as i have. I tripped my whole homeassistant from swipe cards and compact header and others to see if thats what causing it.
Its propably either my code or something with the combination.
The cleanest i have so far with the worked upp version to have as little wierd things it it as i myself can come upp with is the folowing.
cards:
- content: |
## <ha-icon icon="mdi:remote"></ha-icon> Vardagsrum
type: markdown
- cards:
- type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
entity: switch.appletv
icon: 'mdi:apple'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: Apple tv
entity_id: remote.vardagsrum
- type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
entity: switch.htpc
icon: 'mdi:desktop-classic'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: Htpc
entity_id: remote.vardagsrum
- type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
entity: switch.tv
icon: 'mdi:television'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: Tv
entity_id: remote.vardagsrum
- type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
entity: switch.ps4
icon: 'mdi:playstation'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: PS4
entity_id: remote.vardagsrum
- type: 'custom:button-card'
color: var(--red)
color_off: var(--primary-text-color)
color_type: icon
icon: 'mdi:power'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_off
service_data:
entity_id: remote.vardagsrum
type: horizontal-stack
- entities:
- input_select.freetoair
type: entities
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:exit-to-app'
name: HDMI 1
show_icon: false
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi1
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-up'
name: HDMI 2
show_icon: false
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi2
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:menu'
name: HDMI 3
show_icon: false
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi3
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:volume-plus'
name: HDMI 4
show_icon: false
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi4
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:exit-to-app'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_exit
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-up'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_upp
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:menu'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_menu
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
double_tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeUp
device: 52940343
entity_id: remote.vardagsrum
icon: 'mdi:volume-plus'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeUp
device: 52940343
entity_id: remote.vardagsrum
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-left'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_left
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:smoke-detector'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ok
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-right'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_right
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
double_tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeDown
device: 52940343
entity_id: remote.vardagsrum
icon: 'mdi:volume-minus'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeDown
device: 52940343
entity_id: remote.vardagsrum
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:volume-off'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_mute
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-down'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ner
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:keyboard-return'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_prev
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:arrow-up-bold'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_channel_up
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:gamepad-variant'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.gamemode
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:play-pause'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_play
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:television-guide'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_guide
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:arrow-down-bold'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_channel_down
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
type: vertical-stack
And it still pops upp from enteties and continued. All buttons have condition that they only show when not in power off state on the harmony remote.
Well for 1, you are using card mod on the button card. You donāt want to do that. Youāre having the button card settings fight with card mod.