He did share it.
1 Like
hello, can someone help me. I tried some options but they didn’t worked. I have two Custom:button-card and they are okay but there is a lot gap between them and i want to reduce it to minimum.
type: custom:button-card
entity: person.aneli
aspect_ratio: 1/1
name: Анели
show_entity_picture: true
show_name: true
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: "#77c66e"
- value: Away
styles:
card:
- background-color: "#dedede"
custom_fields:
icon:
- border-color: "#EF4F1A"
- value: In Sofia
styles:
custom_fields:
icon:
- border-color: deepskyblue
styles:
card:
- width: 300px
- height: 250px
- background-color: transperant
- border-radius: 5%
- padding: 4%
- color: grey
- font-size: 15px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: start
- align-self: middle
grid:
- grid-template-areas: "\"icon status\" \"n n\" \"battery proximity\" \"wifi timehome\" \"sd sd\""
- grid-template-columns: 2fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- padding-left: 15px
- font-size: 20px
- align-self: middle
- justify-self: start
- padding-bottom: 7px
- color: white
- font-weight: bold
custom_fields:
icon:
- clip-path: circle()
- width: 62%
- pointer-events: none
- display: grid
- border: 6px solid
- border-color: red
- border-radius: 500px
- margin: 0 +20% 0 0
- justify-self: end
- opacity: 1
status:
- align-self: middle
- justify-self: start
- padding-bottom: 90%
- color: white
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: white
timehome:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: white
wifi:
- align-self: middle
- justify-self: start
- padding: 0.5em 6px
- color: white
- "--text-wifi-color-sensor": >-
[[[ if (states["sensor.anelis_iphone_connection_type"].state == '<not
connected>') return "#aaaaaa"; ]]]
battery:
- align-self: middle
- justify-self: start
- padding: 0.5em 4px
- color: green
- "--text-color-sensor": >-
[[[ if (states["sensor.anelis_iphone_battery_level"].state < 20)
return "#b30000";
if (states["sensor.anelis_iphone_battery_level"].state < 40)
return "#ea5545";
if (states["sensor.anelis_iphone_battery_level"].state < 60)
return "#ef9b20";
if (states["sensor.anelis_iphone_battery_level_iphone_battery_level"].state < 80)
return "#87bc45";
if (states["sensor.anelis_iphone_battery_level"].state < 101)
return "green";]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (states['person.aneli'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: red;">
</ha-icon><span> Away</span>`;
}
if (states['person.aneli'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: #77c66e;">
</ha-icon><span> Вкъщи</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon><span> В София</span>`;
}
]]]
proximity: |
[[[
const distanceInMeters = parseFloat(states['sensor.aneli_vkshchi_aneli_distance'].state);
const distanceInKm = (distanceInMeters / 1000).toFixed(2);
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: white;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${distanceInKm} Км</span></span>`;
]]]
battery: |
[[[
var i = states['sensor.anelis_iphone_battery_level'].attributes.icon;
if (states['sensor.anelis_iphone_battery_state'].state =='Charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: #00d8ff;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.anelis_iphone_battery_level_iphone_battery_level'].state}% Зареждане</span></span>`;
} else {
return `<ha-icon
icon='${i}'
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.anelis_iphone_battery_level'].state}% батерия</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.anelis_iphone_connection_type'].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 if (states['sensor.anelis_iphone_connection_type'].state == 'Cellular') {
return `<ha-icon icon="mdi:signal-cellular-3" style="width: 20px; height: 20px; color: gey;"></ha-icon>
<span style="color: var(--text-color-sensor);">${states['sensor.anelis_iphone_connection_type'].state}</span>`;}
else {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: grey;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.anelis_iphone_ssid'].state}</span></span>`;
}
]]]
timehome: |
[[[
const travelTime = parseFloat(states['sensor.waze_travel_time'].state);
return `<ha-icon
icon="mdi:car"
style="width: 20px; height: 20px; color: white;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${Math.round(travelTime)} мин</span></span>`;
]]]
type: custom:button-card
entity: person.dimitar
aspect_ratio: 1/1
name: Димитър
show_entity_picture: true
show_name: true
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: "#77c66e"
- value: Away
styles:
card:
- background-color: "#dedede"
custom_fields:
icon:
- border-color: "#EF4F1A"
- value: In Sofia
styles:
custom_fields:
icon:
- border-color: deepskyblue
styles:
card:
- width: 300px
- height: 250px
- background-color: transperant
- border-radius: 5%
- padding: 4%
- color: grey
- font-size: 15px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: start
- align-self: middle
grid:
- grid-template-areas: "\"icon status\" \"n n\" \"battery proximity\" \"wifi timehome\" \"sd sd\""
- grid-template-columns: 2fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- padding-left: 15px
- font-size: 20px
- align-self: middle
- justify-self: start
- padding-bottom: 7px
- color: white
- font-weight: bold
custom_fields:
icon:
- clip-path: circle()
- width: 62%
- pointer-events: none
- display: grid
- border: 6px solid
- border-color: red
- border-radius: 500px
- margin: 0 +20% 0 0
- justify-self: end
- opacity: 1
status:
- align-self: middle
- justify-self: start
- padding-bottom: 90%
- color: white
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: white
timehome:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: white
wifi:
- align-self: middle
- justify-self: start
- padding: 0.5em 6px
- color: white
- "--text-wifi-color-sensor": >-
[[[ if (states["sensor.mutkos_iphone_connection_type"].state == '<not
connected>') return "#aaaaaa"; ]]]
battery:
- align-self: middle
- justify-self: start
- padding: 0.5em 4px
- color: green
- "--text-color-sensor": >-
[[[ if (states["sensor.mutkos_iphone_battery_level"].state < 20)
return "#b30000";
if (states["sensor.mutkos_iphone_battery_level"].state < 40)
return "#ea5545";
if (states["sensor.mutkos_iphone_battery_level"].state < 60)
return "#ef9b20";
if (states["sensor.mutkos_iphone_battery_level"].state < 80)
return "#87bc45";
if (states["sensor.mutkos_iphone_battery_level"].state < 101)
return "green";]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (states['person.dimitar'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: red;">
</ha-icon><span> Away</span>`;
}
if (states['person.dimitar'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: #77c66e;">
</ha-icon><span> Вкъщи</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon><span> В София</span>`;
}
]]]
proximity: |
[[[
const distanceInMeters = parseFloat(states['sensor.vkshchi_dimitar_distance'].state);
const distanceInKm = (distanceInMeters / 1000).toFixed(2);
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: white;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${distanceInKm} Км</span></span>`;
]]]
battery: |
[[[
var i = states['sensor.mutkos_iphone_battery_level'].attributes.icon;
if (states['sensor.mutkos_iphone_battery_state'].state =='Charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: #00d8ff;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.mutkos_iphone_battery_level'].state}% Зареждане</span></span>`;
} else {
return `<ha-icon
icon='${i}'
style="width: 20px; height: 20px; color: var(--text-color-sensor);">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.mutkos_iphone_battery_level'].state}% батерия</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.mutkos_iphone_connection_type'].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 if (states['sensor.mutkos_iphone_connection_type'].state == 'Cellular') {
return `<ha-icon icon="mdi:signal-cellular-3" style="width: 20px; height: 20px; color: gey;"></ha-icon>
<span style="color: var(--text-color-sensor);">${states['sensor.mutkos_iphone_connection_type'].state}</span>`;}
else {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: grey;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.mutkos_iphone_ssid'].state}</span></span>`;
}
]]]
timehome: |
[[[
const travelTime = parseFloat(states['sensor.waze_travel_time'].state);
return `<ha-icon
icon="mdi:car"
style="width: 20px; height: 20px; color: white;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${Math.round(travelTime)} мин</span></span>`;
]]]
Hello Everyone, this post is amazing and gave me some great ideas. I am very new at this and struggling a bit. I feel like I have a nice card setup. the background and avatar both update depending what zone I am in. it works great when I pull it up on my computer but the background images do not show up when I am on the companion app. Anybody know why that may be ?
edit : if it helps or matters I am using the Nabu Casa Cloud
type: custom:button-card
entity: sensor.dummy
show_name: false
show_state: false
show_entity_picture: false
tap_action:
action: more-info
styles:
card:
- border-radius: 16px
- box-shadow: 0px 2px 6px rgba(0,0,0,0.3)
- height: 180px
- position: relative
- background: gray
custom_fields:
avatar:
- position: absolute
- top: 10px
- left: 10px
- z-index: 2
drive_to_work:
- position: absolute
- bottom: 10px
- left: 50%
- transform: translateX(-50%)
- color: white
- background-color: rgba(0,0,0,0.5)
- padding: 2px 6px
- border-radius: 6px
- font-size: 13px
- font-weight: bold
- z-index: 2
- display: block
distance:
- position: absolute
- bottom: 35px
- left: 10px
- color: white
- background-color: rgba(0,0,0,0.5)
- padding: 2px 6px
- border-radius: 6px
- font-size: 13px
- z-index: 2
- display: block
duration:
- position: absolute
- bottom: 10px
- left: 10px
- color: white
- background-color: rgba(0,0,0,0.5)
- padding: 2px 6px
- border-radius: 6px
- font-size: 14px
- font-weight: bold
- z-index: 2
- display: block
battery:
- position: absolute
- bottom: 10px
- right: 10px
- color: white
- background-color: rgba(0,0,0,0.5)
- padding: 2px 6px
- border-radius: 6px
- font-size: 13px
- font-weight: bold
- z-index: 2
- display: block
background:
- position: absolute
- top: 0
- left: 0
- width: 100%
- height: 100%
- border-radius: 16px
- z-index: -1
- transition: background 1s ease-in-out
custom_fields:
background: |
[[[
var state = states['person.eric'] ? states['person.eric'].state : 'not_home';
var img = '/local/bg_away.jpg';
if(state === 'home') img = '/local/Home1.jpg';
if(state === 'Ework') img = '/local/bg_ework.jpg';
if(state === 'Cwork') img = '/local/bg_cwork.jpg';
if(state === 'Walmart') img = '/local/bg_walmart.jpg';
if(state === 'Sams') img = '/local/bg_sams.jpg';
return `<div style="
position:absolute;
top:0; left:0; width:100%; height:100%;
background:url('${img}') center/cover no-repeat;
border-radius:16px;
z-index:-1;
transition: background 1s ease-in-out;
"></div>`;
]]]
avatar: |
[[[
var state = states['person.eric'] ? states['person.eric'].state : 'not_home';
var img = '/local/avatar_eric_default.png';
if (state === 'home') img = '/local/avatar_eric_home.png';
if (state === 'Ework') img = '/local/avatar_eric_ework.png';
if (state === 'Cwork') img = '/local/avatar_eric_cwork.png';
if (state === 'Walmart') img = '/local/avatar_eric_walmart.png';
if (state === 'Sams') img = '/local/avatar_eric_sams.png';
// Ring color: green if home, red if not home
var ringColor = (state === 'home') ? '#0ffc03' : 'red';
return `<div style="
width: 100px;
height: 100px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
">
<!-- Colored Ring -->
<div style="
position:absolute;
top:0; left:0;
width:100%; height:100%;
border-radius:50%;
border:4px solid ${ringColor};
box-sizing:border-box;
z-index:1;
"></div>
<!-- Semi-transparent background -->
<div style="
width:100%;
height:100%;
border-radius:50%;
background-color: rgba(0,0,0,0.3);
display:flex;
justify-content:center;
align-items:center;
z-index:2;
overflow:hidden;
">
<img src="${img}" style="width:85px;height:85px;border-radius:50%;">
</div>
</div>`;
]]]
drive_to_work: |
[[[
var wazeWork = states['sensor.eric_to_work'];
var duration = 0;
if (wazeWork && wazeWork.attributes.duration) duration = Math.round(wazeWork.attributes.duration);
return '<span style="margin-right:4px;">🏢</span>Drive to Work: ' + duration + ' min';
]]]
distance: |
[[[
var waze = states['sensor.eric_travel_home'];
var template = states['sensor.eric_distance_home'];
var distance = '0.0 km';
if (waze && waze.attributes.distance) distance = waze.attributes.distance;
else if (template && template.state) distance = template.state + ' km';
return '<span style="margin-right:4px;">🛣️</span>' + distance;
]]]
duration: |
[[[
var waze = states['sensor.eric_travel_home'];
var duration = '0 min';
if (waze && waze.attributes.duration) duration = waze.attributes.duration;
return '<span style="margin-right:4px;">⏱</span>' + duration;
]]]
battery: |
[[[
var battery = states['sensor.erics_phone_battery_level'] ? parseInt(states['sensor.erics_phone_battery_level'].state) : 0;
var chargingState = states['sensor.erics_phone_battery_state'] ? states['sensor.erics_phone_battery_state'].state : 'discharging';
var icon = chargingState === 'charging' ? '⚡' : '🔋';
var color = 'gray';
if (battery >= 75) color = 'green';
else if (battery >= 30) color = 'yellow';
else color = 'red';
return '<span style="margin-right:4px;">' + icon + '</span><span style="color:' + color + '">' + battery + '%</span>';
]]]
1 Like
How do you create different Emoji state ?
I’m still using the cards I configured back in 2021, in the post I’m responding to.
However, I’ve changed my Person images to transparent PNG files. I’m interested in indicating home state with a background color instead of using border color. Does anyone know how I might do that? Relevant code below…
state:
- operator: default
styles:
card: null
custom_fields:
icon:
- border-color: |
[[[
if (entity.state =='away')
return "#E54456";
if (entity.state =='not_home')
return "#E54456";
if (entity.state =='home')
return "#36c570";
if (entity.state =='unavailable')
return "#b5b5b5";
if (entity.state =='unknown')
return "#b5b5b5";
else
return "#4456e5";
]]]
styles:
icon:
- clip-path: circle()
- width: 80%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: gray
- border-radius: 500px
- margin: 0 +10% +10% 0
- justify-self: end
- opacity: 1
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
Thanks in advance.
EDIT: Found it through some experimentation:
styles:
custom_fields:
icon:
- background-color: >
[[[
if (entity.state =='away')
return "#E54456";
if (entity.state =='not_home')
return "#E54456";
if (entity.state =='home')
return "#36c570";
if (entity.state =='unavailable')
return "#b5b5b5";
if (entity.state =='unknown')
return "#b5b5b5";
else
return "#4456e5";
]]]
hello,
Is it possible to add other elements with this card ?
my aim was to add my nut and phone bluetooth to it.
i trying to create this kind of card to keep all information for a member in one area.
if possible adding a check button to make on/off my keys (if lost or another this) and an another one to make this member on/off for house detection (forced absence even if the phone or keys are present, for example
).
I would suggest raising a feature request on the Github page if it is not giving you what you want.
