I’ve just redesigned my person cards using custom buttons for all the info, which is different to how I did it before. I have everything formatted as I want and it all works, but I’m trying to hide a couple of the buttons if I’m at home. I’ve added the conditional card to my code and get no errors, but on the card I get [object Object] when I use it. Is it an error with my code, or is it just not possible?
The formatting looks odd in the image, because it’s usually part of a vertical stack.
views:
- theme: Backend-selected
title: Home
icon: mdi:home
badges: []
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:button-card
entity: person.dave_stears
show_entity_picture: true
entity_picture: /local/images/dave/normal.png
show_name: false
show_icon: false
show_state: false
show_label: false
show_last_changed: true
triggers_update: all
custom_fields:
badge:
card:
type: custom:button-card
entity: sensor.dave_current_location
show_icon: true
show_name: false
icon: mdi:home
state:
- value: home
icon: mdi:home
styles:
card:
- background: '#77c66e'
- value: not_home
icon: mdi:home-export-outline
styles:
card:
- background: '#EB2511'
- value: Driving
icon: mdi:car
styles:
card:
- background: '#EB6011'
- value: Work
icon: mdi:office-building
styles:
card:
- background: deepskyblue
- value: School
icon: mdi:school
styles:
card:
- background: '#EF881A'
- value: Kick Boxing
icon: mdi:boxing-glove
styles:
card:
- background: '#28055D'
- value: Swimming
icon: mdi:swim
styles:
card:
- background: '#341AEF'
- value: Stables
icon: mdi:barn
styles:
card:
- background: '#EBD411'
- value: Amys Parents
icon: mdi:home-account
styles:
card:
- background: '#E411EB'
- value: Daves Parents
icon: mdi:home-heart
styles:
card:
- background: '#9811EB'
styles:
card:
- border-radius: 50%
- width: 30px
- height: 30px
- background: none
icon:
- color: black
- width: 20px
battery:
card:
type: custom:button-card
entity: sensor.daves_phone_battery_level
show_icon: true
show_name: false
show_state: true
styles:
card:
- border-radius: 10%
- width: 65px
- height: 30px
- background: none
icon:
- left: 5%
- width: 20px
- color: |
[[[
if (states['sensor.daves_phone_battery_level'].state < 30) return "#ff1a1a";
if (states['sensor.daves_phone_battery_level'].state < 60) return "#F3970A";
if (states['sensor.daves_phone_battery_level'].state < 101) return "#50A14F";
else return "#ffc640"
]]]
- animation: >
[[[ if
(states['sensor.daves_phone_battery_level'].state
<= 10) return 'blink 2s ease infinite'; ]]]
state:
- left: 45%
- position: absolute
- font-size: 12px
- font-weight: bold
- color: |
[[[
if (states['sensor.daves_phone_battery_level'].state < 30) return "#ff1a1a";
if (states['sensor.daves_phone_battery_level'].state < 60) return "#F3970A";
if (states['sensor.daves_phone_battery_level'].state < 101) return "#50A14F";
else return "#ffc640"
]]]
- animation: >
[[[ if
(states['sensor.daves_phone_battery_level'].state
<= 10) return 'blink 2s ease infinite'; ]]]
styles:
card:
- bottom: 7%
- right: 5%
- position: absolute
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 0px;
}
div#states.card-content {
padding: 0px;
}
wifi:
card:
type: custom:button-card
entity: sensor.daves_phone_wi_fi_connection
show_icon: true
show_name: false
show_state: true
styles:
card:
- border-radius: 10%
- width: 215px
- height: 40px
- background: none
icon:
- left: 5%
- width: 20px
- color: |
[[[
if (states["sensor.daves_phone_wi_fi_connection"].state =='<not connected>')
return "#aaaaaa";
if (states["binary_sensor.daves_phone_wi_fi_state"].state =='off')
return "#aaaaaa";
]]]
state:
- left: 20%
- position: absolute
- font-size: 12px
- font-weight: bold
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 0px;
}
div#states.card-content {
padding: 0px;
}
storage:
card:
type: custom:button-card
entity: sensor.daves_phone_internal_storage
show_icon: true
show_name: false
show_state: true
styles:
card:
- border-radius: 10%
- width: 65px
- height: 30px
- background: none
icon:
- left: 5%
- width: 20px
- color: |
[[[
if (states['sensor.daves_phone_internal_storage'].state < 30) return "#ff1a1a";
if (states['sensor.daves_phone_internal_storage'].state < 60) return "#F3970A";
if (states['sensor.daves_phone_internal_storage'].state < 101) return "#50A14F";
else return "#ffc640"
]]]
- animation: >
[[[ if
(states['sensor.daves_phone_internal_storage'].state
<= 10) return 'blink 2s ease infinite'; ]]]
state:
- left: 45%
- position: absolute
- font-size: 12px
- font-weight: bold
- color: |
[[[
if (states['sensor.daves_phone_internal_storage'].state < 30) return "#ff1a1a";
if (states['sensor.daves_phone_internal_storage'].state < 60) return "#F3970A";
if (states['sensor.daves_phone_internal_storage'].state < 101) return "#50A14F";
else return "#ffc640"
]]]
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 0px;
}
div#states.card-content {
padding: 0px;
}
proximity:
card:
type: custom:button-card
entity: sensor.dave_from_home_duration
show_icon: |
[[[
if (states['sensor.dave_current_location'].state =='home') {
return ""
}
else return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: var(--primary-color);">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.dave_from_home_duration'].state}</span></span>`
]]]
show_name: false
show_state: |
[[[
if (states['sensor.dave_current_location'].state =='home') {
return ""
}
else return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: var(--primary-color);">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.dave_from_home_duration'].state}</span></span>`
]]]
icon: mdi:home-export-outline
styles:
card:
- border-radius: 10%
- width: 75px
- height: 30px
icon:
- left: 5%
- width: 20px
state:
- left: 35%
- position: absolute
- font-size: 12px
- font-weight: bold
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 0px;
}
div#states.card-content {
padding: 0px;
}
place:
card:
type: custom:button-card
entity: sensor.dave_street_name
show_icon: false
show_name: false
show_state: |
[[[
if (states['sensor.dave_current_location'].state !='home')
return `${states['sensor.dave_street_name'].state}`
]]]
styles:
card:
- border-radius: 10%
- width: 215px
- height: 25px
state:
- left: 5%
- position: absolute
- font-size: 10px
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 0px;
}
div#states.card-content {
padding: 0px;
}
work:
- type: conditional
conditions:
- condition: state
entity: sensor.dave_current_location
state: home
card:
type: custom:button-card
entity: sensor.dave_to_work_duration
show_icon: true
show_name: false
show_state: true
styles:
card:
- border-radius: 10%
- width: 75px
- height: 30px
- background: none
icon:
- left: 5%
- width: 20px
state:
- left: 35%
- position: absolute
- font-size: 12px
- font-weight: bold
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 0px;
}
div#states.card-content {
padding: 0px;
}
styles:
card:
- height: 280px
name:
- top: 15%
- left: 5%
- position: absolute
- font-size: 12px
label:
- bottom: 2%
- position: absolute
- font-size: 10px
icon:
- bottom: 5%
- left: 0%
- width: 120px
- height: 120px
- position: relative
- border: |
[[[
if (states['sensor.dave_current_location'].state =='Driving') return '5px solid #EB6011';
if (states['sensor.dave_current_location'].state =='home') return '5px solid #77c66e';
if (states['sensor.dave_current_location'].state =='Work') return '5px solid deepskyblue';
if (states['sensor.dave_current_location'].state =='School') return '5px solid #EF881A';
if (states['sensor.dave_current_location'].state =='Kick Boxing') return '5px solid #28055D';
if (states['sensor.dave_current_location'].state =='Swimming') return '5px solid #341AEF';
if (states['sensor.dave_current_location'].state =='Stables') return '5px solid #EBD411';
if (states['sensor.dave_current_location'].state =='Amys Parents') return '5px solid #E411EB';
if (states['sensor.dave_current_location'].state =='Daves Parents') return '5px solid #9811EB';
if (states['sensor.dave_current_location'].state =='not_home') return '5px solid #EB2511';
else return '5px solid gray';
]]]
- border-radius: 50%
custom_fields:
badge:
- bottom: 65%
- left: 70%
- position: absolute
- font-size: 12px
battery:
- bottom: 7%
- right: 5%
- position: absolute
wifi:
- bottom: 18%
- left: 5%
- position: absolute
- font-size: 12px
storage:
- bottom: 7%
- left: 5%
- position: absolute
- font-size: 12px
proximity:
- top: 2%
- left: 5%
- position: absolute
- font-size: 12px
place:
- top: 11%
- left: 5%
- position: absolute
- font-size: 10px
work:
- top: 2%
- right: 5%
- position: absolute
- font-size: 12px
