Hi, just alter the areas to adjust the layout.
Change from: - grid-template-areas: ‘“icon status” “n n” “battery proximity” “wifi ss” “sd sd”’
To: - grid-template-areas: ‘“icon status” “icon proximity” “battery battery” “wifi wifi”’
thanks mate, works like a charm!
I try the Cards from the first post.
this is my current code
type: custom:button-card
entity: person.manuel
aspect_ratio: 1/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- value: not_home
styles:
card:
- background-color: '#dedede'
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: Work
styles:
custom_fields:
icon:
- border-color: deepskyblue
styles:
card:
- background-color: white
- border-radius: 5%
- padding: 5%
- color: gray
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
grid:
- grid-template-areas: '"icon status" "n n" "entfernung gewicht" "gewicht_diff bmi"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 10px
custom_fields:
icon:
- clip-path: circle()
- width: 80%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: gray
- border-radius: 500px
- margin: 0 +10% 0 0
- justify-self: end
- opacity: 1
status:
- align-self: start
- justify-self: end
- color: gray
entfernung:
- padding: .5em 0px
- align-self: middle
- justify-self: start
- color: gray
gewicht:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- color: gray
gewicht_diff:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
bmi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: end
- color: gray
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (states['person.manuel'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: '#888888';">
</ha-icon><span> Away</span>`;
}
if (states['person.manuel'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
}
]]]
entfernung: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.fahrt_nach_hause_manuel'].state} min.</span></span>`
]]]
gewicht: |
[[[
return `<span>\<span style="color: var(--text-color-sensor);">${states['sensor.withings_weight_kg_manuel'].state} kg</span></span>`
]]]
gewicht_diff: |
[[[
return `(<span>\<span style="color: var(--text-color-sensor);">${states['input_number.gewicht_manuel_differenz'].state } kg)</span></span>`
]]]
And it looks like:
But now I have to questions:
-
I want to write the Status under the Picture
in the next line I want to output the distance
and in the next linke the weight, differenz weight and the BMI -
BMI is the next topic
in an other Card I calculate the BMI with the following code:
{{ (states('sensor.withings_weight_kg_koni') | float / (1.57*1.57)) | round(1) | replace(".",",") }}
How do I change this for the code above?
This is how the map should look like in the end:
I’ve tried many things but it didn’t work 
Hi @benm7 ,
I’m a week into the massive learning curve that is HA, and would like to know if you can help me learn what you mean.
Where should the template part go, i see it can go in the raw editor or in a yaml file, but then how to you get the config yaml to load it? with all the comments made i’m going round in cirlces
The card bit does it go into the manual section when adding a new item to a dash?
Hi there,
I did get a long way with all the codes you guy’s posted.
One thing I don’t understand is how to extend the following code:
[[[
if (states['sensor.tc_iphone_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.tc_iphone_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.tc_iphone_battery_level'].state}% battery</span></span>`;
}
]]]
I wanted to add more images:
battery: |
[[[
if (states['sensor.tc_iphone_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.tc_iphone_battery_level'].state}% battery</span></span>`;
} elif {
(states['sensor.tc_iphone_battery_level'].state =='< 80 %') {
return `<ha-icon
icon="mdi:battery-80"
style="width: 20px; height: 20px;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.tc_iphone_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.tc_iphone_battery_level'].state}% battery</span></span>`;
}
]]]
Best regards,
Hello
I copied the code into a new card, edited the entity and I get this error
Please bare in mind I am super green with Home Assistant
ButtonCardJSTemplateError: TypeError: undefined is not an object (evaluating 'states['proximity.ad_home'].state') in 'return `<ha-icon icon="mdi:map-marker-distance" style="width: 20px; height: 20px; color: #...'
The issue is definitely here, if I remove this code it works, what have I done wrong ?
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['proximity.ha_home'].state} Kms</span></span>`
]]]
Any help greatly appreciated 
Hey @benm7
I have tried using your code and have just come across this topic. I did install decluttering card via HACS and have followed the instructions on installation etc however the custom decluttering card doesnt work. Here is my config:
resources:
- url: /local/button-card.js
type: module
- url: https://fonts.googleapis.com/css?family=Comfortaa&display=swap
type: css
- url: /local/decluttering-card.js
type: module
decluttering_templates: null
person_card_new:
default:
- size: 60%
- color: auto
- background_color: var(--primary-background-color)
- variable: spin
- spin: false
- show_name: false
- show_state: true
- show_label: false
- show_icon: true
- show_last_changed: false
- show_entity_picture: false
- 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
card:
type: custom:button-card
battery: '[[battery]]'
home_sensor: '[[home_sensor]]'
work_sensor: '[[work_sensor]]'
work_icon: '[[work_icon]]'
name: '[[name]]'
icon: mdi:[[icon]]
size: '[[size]]'
color: '[[color]]'
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]]'
entity_picture: '[[entity_picture]]'
show_entity_picture: '[[show_entity_picture]]'
styles:
card:
- border-radius: 12px
- '--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="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
else return `<ha-icon
icon="mdi:battery-charging"
style="; --mdc-icon-size: 14px; padding-left: 5px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
]]]
home: |
[[[
return `<ha-icon
icon="mdi:home-import-outline"
style="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[home_sensor]]'].state}mins</span>`
]]]
work: |
[[[
return `<ha-icon
icon="[[work_icon]]"
style="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[work_sensor]]'].state}mins</span>`
]]]
state:
- value: not_home
styles:
card:
- opacity: 0.6
entity_picture:
- border: 2px solid var(--severity-1)
- value: home
styles:
entity_picture:
- border: 2px solid var(--severity-5)
- value: Ahmed Work
styles:
entity_picture:
- border: 2px solid var(--severity-4)
not sure why but above where it says decluttering_templates: it says null
here is my card config:
- type: custom:decluttering-card
template: person_card_new
variables:
- entity: person.ahmed
- name: Ahmed
- battery: device_tracker.sm_s906b
- work_sensor: sensor.ahmed
- home_sensor: sensor.ahmed
- work_icon: mdi:car
- tap_action:
action: more-info
haptic: light
hey @benm7 so I finally managed to get it to work.
I have 1 question, how does your work sensor estimate and show the ETA to home?
I was able to create a Waze sensor, but I still cant figure out how to add it to the card, I’m not a coder, so Ian example of how it’s done would be great
Did you do anything else to shrink the size other than adding another one next to it? I now have 2 huge cards next to each other.
Hi everyone,
I’m a bit ashamed of asking this, but I copy, modified to my name and my sensors and paste the code mentioned if the first message of this thread, but I’m geting nothing but a blank frame.
Would someone be able to explain me what I did poorly ?
Here is my code:
type: custom:button-card
entity: person.laurent
aspect_ratio: 1/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- value: not_home
styles:
card:
- background-color: '#dedede'
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: Work
styles:
custom_fields:
icon:
- border-color: deepskyblue
styles:
card:
- background-color: white
- border-radius: 5%
- padding: 5%
- color: gray
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
grid:
- grid-template-areas: '"icon status" "n n" "battery proximity" "wifi ss" "sd sd"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 10px
custom_fields:
icon:
- clip-path: circle()
- width: 80%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: gray
- border-radius: 500px
- margin: 0 +10% 0 0
- justify-self: end
- opacity: 1
status:
- align-self: start
- justify-self: end
- color: gray
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
- '--text-wifi-color-sensor': >-
[[[ if (states["sensor.pixel_6_wifi_connection"].state == '<not
connected>') return "#aaaaaa"; ]]]
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
- '--text-color-sensor': >-
[[[ if (states["sensor.pixel_6_battery_level"].state < 50) return
"#EF4F1A"; ]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (states['person.laurent'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: '#888888';">
</ha-icon><span> Away</span>`;
}
if (states['person.laurent'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
}
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['proximity.ad_home'].state} Kms</span></span>`
]]]
battery: |
[[[
if (states['sensor.pixel_6_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.ad_s9_aim_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.pixel_6_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.pixel_6_wifi_connection'].state =='<not connected>') {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
</ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`;
} else {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.pixel_6_wifi_connection'].state}</span></span>`;
}
]]]
thanks a lot for your advice,
laurent
Thanks for this code. How can i make it smaller so it works on iPhone? Its massive
Is anyone changing the picture based on state?
Hi, Im trying to integrate Bens card but receiving en error saying that the template does not exist.
At the top of my ui-lovalce.yaml I have.
decluttering_templates:
person_card_new:
default:
- size: 60%
- color: auto
- background_color: var(--primary-background-color)
- variable: spin
- spin: false
- show_name: false
- show_state: true
- show_label: false
- show_icon: true
- show_last_changed: false
- show_entity_picture: false
- 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
card:
type: custom:button-card
battery: '[[battery]]'
home_sensor: '[[home_sensor]]'
work_sensor: '[[work_sensor]]'
work_icon: '[[work_icon]]'
name: '[[name]]'
icon: mdi:[[icon]]
size: '[[size]]'
color: '[[color]]'
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]]'
entity_picture: '[[entity_picture]]'
show_entity_picture: '[[show_entity_picture]]'
styles:
card:
- border-radius: 12px
- '--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="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
else return `<ha-icon
icon="mdi:battery-charging"
style="; --mdc-icon-size: 14px; padding-left: 5px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
]]]
home: |
[[[
return `<ha-icon
icon="mdi:home-import-outline"
style="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[home_sensor]]'].state}mins</span>`
]]]
work: |
[[[
return `<ha-icon
icon="[[work_icon]]"
style="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[work_sensor]]'].state}mins</span>`
]]]
state:
- value: not_home
styles:
card:
- opacity: 0.6
entity_picture:
- border: 2px solid var(--severity-1)
- value: home
styles:
entity_picture:
- border: 2px solid var(--severity-5)
- value: Ben Work
styles:
entity_picture:
- border: 2px solid var(--severity-4)
- value: Jess Work
styles:
entity_picture:
- border: 2px solid var(--severity-4)
- value: Poppy Home
styles:
entity_picture:
- border: 2px solid var(--severity-3)
- value: Lola Home
styles:
entity_picture:
- border: 2px solid var(--severity-3)
- value: GPa and GMa Home
styles:
entity_picture:
- border: 2px solid var(--severity-3)
Is this indentation correct? It does not want to read the template?
Thanks
@Mandoliinimies Thanks for the nice card 
When I copie your code I only get a map card and nothin else…
type: custom:button-card
entity: person.jorg_pelka
icon: null
name: null
show_state: true
show_name: false
show_icon: false
styles:
custom_fields:
field1:
- position: absolute
- left: 400px
- top: 0px
- width: px
- opacity: 100%
field2:
- position: absolute
- left: 0px
- top: 0px
- width: px
- opacity: 100%
card:
- width: 400px
- height: 250px
- background-color: transparent
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.0)
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align_self: start
- text_align: start
name:
- justify-self: null
- padding-left: 0px
- font-weight: bold
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 15.5px
state:
- justify-self: null
- padding-left: 0px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 14px
- color: '#b3b3b3'
- opacity: 0%
color_type: card
layout: icon_name_state2nd
show_name: true
show_label: false
label: null
state:
- value: not_home
styles:
card:
- filter: grayscale(100%)
- value: home
styles:
card:
- filter: grayscale(0%)
custom_fields:
field2:
card:
type: custom:button-card
show_icon: false
entity: null
show_state: false
show_name: false
show_entity_picture: false
styles:
custom_fields:
peite:
- position: absolute
- left: 46px
- top: 0px
- width: 354px
- opacity: 0%
graph:
- position: absolute
- left: 0px
- top: 0px
- width: 400px
- opacity: 85%
topleft:
- position: absolute
- left: 15px
- top: 15px
full_map:
- position: absolute
- left: 350px
- top: 8px
- width: 40px
- opacity: 90%
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: null
- background-size: 100%
- border-radius: 10px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
- height: 250px
- width: 400px
img_cell:
- padding-top: 75px
icon:
- width: 50px
- padding-bottom: 50px
name:
- color: var(--secondary-text-color)
- padding-bottom: 0px
- null
state:
- font-size: 20px
- padding-bottom: 2px
- line-height: 20px
- color: white
custom_fields:
graph:
card:
type: map
aspect_ratio: null
default_zoom: 16
entities:
- person.entity
show_state: true
show_name: false
show_icon: false
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 40px
state:
- font-size: 20px
- justify-self: start
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
peite:
card:
type: custom:button-card
entity: input_boolean.entity
aspect_ratio: 1/2
tap_action:
action: toggle
show_state: true
show_name: false
show_icon: false
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 40px
card:
- border-radius: 10px
state:
- font-size: 20px
- justify-self: start
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- align-self: middle
full_map:
card:
type: custom:button-card
aspect_ratio: 1
icon: mdi:information-outline
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: 'null'
hide_header: true
auto_close: false
large: false
style:
$: |
.mdc-dialog {
backdrop-filter: blur(10px);
background: rgba(0,0,0,0.5);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 10px;
}
.: |
:host {
--mdc-theme-surface: rgba(245,245,245,0.7);
--secondary-background-color: rgb(0,0,0,0.5);
}
:host .content {
width: 90vw;
height: 40vh;
}
card:
type: map
aspect_ratio: null
default_zoom: 12
entities:
- person.entity
show_state: true
show_name: false
show_icon: true
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 30px
state:
- font-size: 20px
- justify-self: start
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- align-self: middle
field1:
card:
type: custom:button-card
show_icon: false
entity: input_boolean.entity
show_state: false
show_name: false
tap_action:
action: toggle
styles:
custom_fields:
graph:
- position: absolute
- left: 10px
- top: 210px
- width: 60px
- opacity: 75%
topleft:
- position: absolute
- left: 15px
- top: 15px
topright:
- position: absolute
- left: 325px
- top: 10px
- width: 60px
- opacity: 75%
huoneet:
- position: absolute
- left: 10px
- top: 10px
- width: 60px
- opacity: 75%
bussit:
- position: absolute
- left: 10px
- top: 45px
- width: 60px
- opacity: 75%
musiikki:
- position: absolute
- left: 10px
- top: 80px
- width: 60px
- opacity: 75%
kalenteri:
- position: absolute
- left: 10px
- top: 115px
- width: 60px
- opacity: 75%
weather:
- position: absolute
- left: 10px
- top: 150px
- width: 60px
- opacity: 75%
proximity:
- position: absolute
- left: 185px
- top: 210px
- width: 60px
- opacity: 75%
key:
- position: absolute
- left: 325px
- top: 45px
- width: 60px
- opacity: 75%
phone:
- position: absolute
- left: 325px
- top: 80px
- width: 60px
- opacity: 75%
travel:
- position: absolute
- left: 255px
- top: 210px
- width: 60px
- opacity: 75%
speed:
- position: absolute
- left: 325px
- top: 210px
- width: 60px
- opacity: 75%
graavi:
- position: absolute
- left: 0px
- top: 160px
- width: 60px
- opacity: 75%
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: url('/local/dashboard_images/anttitesti2.png')
- background-size: 100%
- border-radius: 10px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
- height: 250px
- width: 400px
img_cell:
- padding-top: 75px
icon:
- width: 50px
- padding-bottom: 50px
name:
- color: var(--secondary-text-color)
- padding-bottom: 0px
state:
- font-size: 20px
- padding-bottom: 2px
- line-height: 20px
- color: white
state:
- value: 'on'
styles:
card:
- animation:
- mymove 0.5s linear
- animation-fill-mode: forwards
- value: 'off'
styles:
card:
- animation:
- moving 0.5s linear
- animation-direction: reverse
extra_styles: |
@keyframes mymove {
0% { transform: translate(0px) ; }
10% { transform: translate(-40px) ; }
20% { transform: translate(-80px) ; }
30% { transform: translate(-120px) ; }
40% { transform: translate(-160px) ; }
50% { transform: translate(-220px) ; }
60% { transform: translate(-260px) ; }
70% { transform: translate(-300px) ; }
80% { transform: translate(-340px) ; }
90% { transform: translate(-380px) ; }
100% { transform: translate(-400px) ; }
}
@keyframes moving {
0% { transform: translate(0px) ; }
10% { transform: translate(-40px) ; }
20% { transform: translate(-80px) ; }
30% { transform: translate(-120px) ; }
40% { transform: translate(-160px) ; }
50% { transform: translate(-220px) ; }
60% { transform: translate(-260px) ; }
70% { transform: translate(-300px) ; }
80% { transform: translate(-340px) ; }
90% { transform: translate(-380px) ; }
100% { transform: translate(-400px) ; }
}
custom_fields:
graavi:
card:
type: custom:mini-graph-card
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
color: var(--secondary-text-color);
width: 400px;
border-radius: 1px;
box-shadow: none;
}
entities:
- entity: sensor.handy_jorg_battery_level
show:
icon: false
name: false
points: false
state: false
font_size: 0
color_thresholds:
- value: 0
color: '#f0c35b'
- value: 40
color: '#f0ca4d'
- value: 80
color: '#ebbf23'
graph:
card:
type: custom:button-card
entity: person.jorg_pelka
tap_action:
action: more-info
show_state: true
show_name: false
show_icon: false
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 20px
- justify-self: start
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- align-self: middle
topright:
card:
type: custom:button-card
entity: sensor.pixel_7_battery_level
tap_action:
action: more-info
show_state: true
show_name: false
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 15px
- justify-self: null
- padding-right: 3px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
huoneet:
card:
type: custom:button-card
entity: input_boolean.entity2 (or something else)
tap_action:
action: toggle
show_state: false
show_name: false
show_icon: true
icon: mdi:home
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 15px
- justify-self: null
- padding-right: 3px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
proximity:
card:
type: custom:button-card
entity: sensor.proximity
tap_action:
action: toggle
show_state: true
show_name: false
show_icon: true
icon: mdi:map-marker-distance
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 10px
- justify-self: null
- padding-right: 2px
- font-weight: null
- text-transform: lovercase
- align-self: right
- padding-bottom: null
key:
card:
type: custom:button-card
entity: 'null'
tap_action:
action: null
show_state: false
show_name: false
show_icon: true
icon: mdi:key-chain
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 10px
- justify-self: null
- padding-right: 2px
- font-weight: null
- text-transform: lovercase
- align-self: right
- padding-bottom: null
phone:
card:
type: custom:button-card
entity: 'null'
tap_action:
action: null
show_state: false
show_name: false
show_icon: true
icon: mdi:cellphone
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 10px
- justify-self: null
- padding-right: 2px
- font-weight: null
- text-transform: lovercase
- align-self: right
- padding-bottom: null
bussit:
card:
type: custom:button-card
entity: input_boolean.entity3 (or something else)
tap_action:
action: toggle
show_state: false
show_name: false
show_icon: true
icon: mdi:bus
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 15px
- justify-self: null
- padding-right: 3px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
musiikki:
card:
type: custom:button-card
entity: 'null'
tap_action:
action: null
show_state: false
show_name: false
show_icon: true
icon: mdi:spotify
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 15px
- justify-self: null
- padding-right: 3px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
kalenteri:
card:
type: custom:button-card
entity: input_select.entity
tap_action:
action: null
show_state: false
show_name: false
show_icon: true
icon: mdi:calendar
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 15px
- justify-self: null
- padding-right: 3px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
weather:
card:
type: custom:button-card
entity: input_boolean.entity4
tap_action:
action: null
show_state: false
show_name: false
show_icon: true
icon: mdi:weather-cloudy
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 25px
card:
- width: 60px
- height: 30px
state:
- font-size: 15px
- justify-self: null
- padding-right: 3px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
travel:
card:
type: custom:swipe-card
parameters:
centeredSlides: true
allowTouchMove: true
loop: false
spaceBetween: 8
slidesPerView: auto
pagination:
type: false
effect: fade
fadeEffect:
crossFade: true
autoplay:
disableOnInteraction: false
delay: 10000
speed: 2000
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.time_to_home_car
icon: mdi:car
show_state: true
show_name: false
show_label: false
show_icon: true
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 20px
card:
- width: 60px
- height: 30px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
state:
- justify-self: null
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 10px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.time_to_home_cycling
icon: mdi:bicycle
show_state: true
show_name: false
show_label: false
show_icon: true
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 20px
card:
- width: 60px
- height: 30px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
state:
- justify-self: null
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 10px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.time_to_home_walking
icon: mdi:walk
show_state: true
show_name: false
show_label: false
show_icon: true
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 20px
card:
- width: 60px
- height: 30px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
state:
- justify-self: null
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 10px
speed:
card:
type: custom:swipe-card
parameters:
centeredSlides: true
allowTouchMove: true
loop: false
spaceBetween: 8
slidesPerView: auto
pagination:
type: false
effect: fade
fadeEffect:
crossFade: true
autoplay:
disableOnInteraction: false
delay: 10000
speed: 2000
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.speed_kmh
icon: mdi:camera-timer
show_state: true
show_name: false
show_label: false
show_icon: true
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 20px
card:
- width: 60px
- height: 30px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
state:
- justify-self: null
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 10px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.speed_ms
icon: mdi:camera-timer
show_state: true
show_name: false
show_label: false
show_icon: true
styles:
grid:
- grid-template-areas: '"i s s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- width: 20px
card:
- width: 60px
- height: 30px
- box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2)
state:
- justify-self: null
- padding-right: 5px
- font-weight: null
- text-transform: lovercase
- align-self: null
- padding-bottom: null
- font-size: 10px
Any hints what is wrong ?
Regards
Jörg
where do I get the sensor.john at line 144 (clear to change with mine)
Thank you
That comes from installing this…
https://github.com/custom-components/places
Then this in my config:
sensor places_john:
- platform: places
name: john
devicetracker_id: device_tracker.sm_f936u1
options: zone,place
map_provider: google
map_zoom: 12
home_zone: zone.home
api_key: !secret email_john
I hope that helps…
I have been playing around with the original code in this post and try to figure out how it works and tweak it to my likings.
One thing that I can not figure out is how to apply a grayscale of 100% to the enity_picture when that person is away but keep the red border around the entity_picture red. When I use the code below the red border also receives the grayscale of 100% and that is not what I want.
type: custom:button-card
entity: person.alie
aspect_ratio: 1/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- value: not_home
styles:
custom_fields:
icon:
- border-color: '#EF4F1A'
- filter: grayscale(100%)
styles:
card:
- border-radius: 5%
- padding: 5%
- color: gray
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
grid:
- grid-template-areas: '"icon status" "n n" "battery proximity" "wifi ss" "sd sd"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 10px
custom_fields:
icon:
- clip-path: circle()
- width: 120%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: gray
- border-radius: 500px
- margin: 20% -30% 0 0
- justify-self: end
- opacity: 1
status:
- align-self: start
- justify-self: end
- color: gray
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (states['person.alie'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 30px; height: 30px; color: #EF4F1A;">
</ha-icon><span> Away</span>`;
}
if (states['person.alie'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 30px; height: 30px; color: #77c66e;">
</ha-icon><span> ${entity.state}</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 30px; height: 30px; color: #EF4F1A;">
</ha-icon><span> ${entity.state}</span>`;
}
]]]
Hi everybody,
I created my own minimalist person card !
6 Likes
Well this took way longer than it should but I am happy to have everything pretty much aligned. Awful job fudging the code.
Little bit more work and I’ll be more than satisfied.
1 Like