Have a look at this one:
I find this one really nice and clean.
i do like this one, and ive been trying to replicate it… but my issue is, i dont want to sign up for another tracking service when i just use the built in home assistant tracker.
I use the home assistant tracker, just need to mod the code a little bit:
type: custom:button-card
entity: person.me
aspect_ratio: 1/1
name: My Name
show_entity_picture: true
show_name: false
hold_action:
action: none
styles:
card:
- background-color: rgba(15,15,18,0.4)
- border-radius: 5%
- padding: 5%
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
grid:
- grid-template-areas: '"icon icon" "n n" "battery status"'
- grid-template-columns: 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: |-
[[[
if (states['device_tracker.my_iphone'].state =='home') {
return "#00CC66";
} else {
return "#888888";}
]]]
- border-radius: 500px
- margin: 0 +7% 0 0
- justify-self: end
- opacity: 1
status:
- justify-self: end
- color: white
- margin-bottom: '-5px'
- font-size: 15px
battery:
- margin-bottom: '-5px'
- align-self: middle
- justify-self: start
- font-size: 15px
- color: white
- '--text-color-sensor': >-
[[[ if (states["sensor.my_iphone_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['device_tracker.my_iphone'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 26px; height: 26px; margin: 0 5px 0 0; color: 888888;">
</ha-icon><span>${states['device_tracker.my_iphone'].state}</span>`;
}
else if (states['device_tracker.my_iphone'].state =='not_home') {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 26px; height: 26px; margin: 0 5px 0 0; color: 888888;">
</ha-icon><span>Away</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 26px; height: 26px; margin: 0 5px 0 0; color: 888888;">
</ha-icon><span>${states['device_tracker.my_iphone'].state}</span>`;
}
]]]
battery: |
[[[
if (states['sensor.my_iphone_battery_state'].state =='Charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 24px; height: 24px; color: #0f0;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.my_iphone_battery_level'].state}%</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 24px; height: 24px; color: #fff;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.my_iphone_battery_level'].state}%</span></span>`;
}
]]]
I altered this one slightly, so that instead of home or away it would also give the name of the location if it had been zoned in home assistant.
Just change the entity, name and my_iphone to what you require.
I am away from my computer at the moment, so typing it up on my tablet, so please excuse any parts I may have messed up.
1 Like
Is that battery level gauge? could you share the code please? Cheers
2 Likes
here you go
Apexcharts-card radialBar code
type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.[YOUR_SENSOR_NAME]_battery_level
color: rgb(255, 99, 71)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -133
endAngle: 133
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 1
gradientToColors:
- mediumseagreen
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 100
legend:
show: false
chart:
height: 400
background: transparant
stroke:
dashArray: 45
here is the code for what i settle with.
3 Likes
So I would really love some help here…
I am NOT good at css and figuring this out so any help would be awesome and appreciated very very much…
Here’s the card screen shot…
Small but nice … if you click on the avatar it shows a map, if you click on the battery it shows battery info… there’s nothing to show on the far right weather stuff…
code:
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
border: 0 !important;
}
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: 0 !important;
background-color: rgba(7, 103, 215, 0.24);
border-radius: 0;
}
cards:
- type: custom:mushroom-person-card
entity: person.john
icon: " "
icon_type: icon
primary_info: none
secondary_info: none
card_mod:
style: |
mushroom-card {
background: url( {{ state_attr('person.john', 'entity_picture') }} ) no-repeat 0px center;
margin-top: 25px;
background-size: 42px 42px;
border: 0 !important;
}
ha-card {
background-color: rgba(105,105,105);
margin-left: auto;
margin-right: auto;
width: 66px;
height: 200px;
border: 0 !important;
}
- type: conditional
card_mod:
style: |
ha-card {
border: 1 !important;
}
conditions:
- entity: sensor.john_s_fold_4_battery_state
state: "charging"
card:
type: custom:mushroom-template-card
entity: sensor.john_s_fold_4_battery_level
layout: vertical
icon_color: yellow
fill_container: true
name: Fold4
icon: mdi:battery-charging-medium
hide_name: true
primary: "Phone is charging..."
secondary: "Battery Level: {{ states('sensor.john_s_fold_4_battery_level') }}%"
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
border: 0 !important;
}
- type: conditional
conditions:
- entity: sensor.john_s_fold_4_battery_state
state: "full"
card:
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0 !important;
}
entity: sensor.john_s_fold_4_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.john_s_fold_4_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.john_s_fold_4_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: "Battery Level: {{ states('sensor.john_s_fold_4_battery_level') }}%"
secondary: "Battery Temp: {{ states('sensor.fold4_battery_temperature') | round }}°"
tap_action:
action: more-info
fill_container: true
- type: conditional
card_mod:
style: |
ha-card {
border: 0 !important;
}
conditions:
- entity: sensor.john_s_fold_4_battery_state
state: "discharging"
card:
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0 !important;
}
entity: sensor.john_s_fold_4_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.john_s_fold_4_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.john_s_fold_4_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: "Battery Level: {{ states('sensor.john_s_fold_4_battery_level') }}%"
secondary: "Battery Temp: {{ states('sensor.fold4_battery_temperature') | round }}°"
tap_action:
action: more-info
fill_container: true
styles:
card:
height: 66px;
# - type: custom:mushroom-template-card
# card_mod:
# style: |
# ha-card {
# border: 0 !important;
# top: 30px;
# }
# primary: "Battery is "
# secondary: "{{ states('sensor.john_s_fold_4_battery_state') }}"
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0 !important;
top: 30px;
}
primary: "Weather: {{ states('sensor.openweathermap_condition') }}"
secondary: "Current Temp: {{ states('sensor.budd_st_weather_temp') | round}}°"
tap_action:
action: none
I’m not good at css but what I’ve tried to do is move the weather into into a new row under the avatar and battery info…
Suggestions… help… Thank you!!!
What about something like this?
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
border: 0 !important;
}
cards:
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: 0 !important;
background-color: rgba(7, 103, 215, 0.24);
border-radius: 0;
}
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
background-color: transparent;
border: 0 !important;
}
cards:
- type: custom:mushroom-person-card
entity: person.john
icon: " "
icon_type: icon
primary_info: none
secondary_info: none
card_mod:
style: |
mushroom-card {
background: url( {{ state_attr('person.john', 'entity_picture') }} ) no-repeat 0px center;
margin-top: 25px;
background-size: 42px 42px;
border: 0 !important;
}
ha-card {
background-color: rgba(105,105,105);
margin-left: auto;
margin-right: auto;
width: 66px;
border: 0 !important;
}
- type: conditional
card_mod:
style: |
ha-card {
border: 1 !important;
}
conditions:
- entity: sensor.john_s_fold_4_battery_state
state: "charging"
card:
type: custom:mushroom-template-card
entity: sensor.john_s_fold_4_battery_level
layout: vertical
icon_color: yellow
fill_container: true
name: Fold4
icon: mdi:battery-charging-medium
hide_name: true
primary: "Phone is charging..."
secondary: "Battery Level: {{ states('sensor.john_s_fold_4_battery_level') }}%"
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
border: 0 !important;
}
- type: conditional
conditions:
- entity: sensor.john_s_fold_4_battery_state
state: "full"
card:
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0 !important;
}
entity: sensor.john_s_fold_4_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.john_s_fold_4_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.john_s_fold_4_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: "Battery Level: {{ states('sensor.john_s_fold_4_battery_level') }}%"
secondary: "Battery Temp: {{ states('sensor.fold4_battery_temperature') | round }}°"
tap_action:
action: more-info
fill_container: true
- type: conditional
card_mod:
style: |
ha-card {
border: 0 !important;
}
conditions:
- entity: sensor.john_s_fold_4_battery_state
state: "discharging"
card:
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0 !important;
}
entity: sensor.john_s_fold_4_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.john_s_fold_4_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.john_s_fold_4_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: "Battery Level: {{ states('sensor.john_s_fold_4_battery_level') }}%"
secondary: "Battery Temp: {{ states('sensor.fold4_battery_temperature') | round }}°"
tap_action:
action: more-info
fill_container: true
styles:
card:
height: 66px;
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0 !important;
margin: auto;
}
mushroom-card {
margin: auto
}
primary: "Weather: {{ states('sensor.openweathermap_condition') }}"
secondary: "Current Temp: {{ states('sensor.budd_st_weather_temp') | round}}°"
tap_action:
action: none
2 Likes
Absolutely!!! Huge Thank you!!!
That is VERY helpful and more what I had in mind!!!
1 Like
Please help me with my person cards. I create 2 identical cards for me and my wife. Mine is working the way how I wanted, but my wife card is not showing phone information. I have Android ,but my wife phone is IPhone.
my code:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-person-card
name: Yevgeniy
entity: person.yevgeniy
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
border: none !important;
background: none !important;
}
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
conditions:
- entity: sensor.sm_s918u_battery_state
state: charging
card:
type: custom:mushroom-template-card
entity: sensor.sm_s918u_battery_level
layout: vertical
icon_color: yellow
fill_container: true
name: S23
icon: mdi:battery-charging-medium
hide_name: true
primary: Phone is charging...
secondary: 'Battery : {{ states(''sensor.sm_s918u_battery_level'') }}%'
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
border: none !important;
background: none !important;
}
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
conditions:
- entity: sensor.sm_s918u_battery_state
state: discharging
card:
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
entity: sensor.sm_s918u_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.sm_s918u_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_s918u_battery_level') | int %}
{% if bl < 10 %} (255,0,0)
{% elif bl < 20 %} (255,0,255)
{% elif bl < 30 %} (255,102,0)
{% elif bl < 40 %} (255,103,0)
{% elif bl < 50 %} (255,204,0)
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} (0,255,255)
{% elif bl < 90 %} #green
{% elif bl < 100 %} (0,255,255)
{% elif bl == 100 %} (0,255,0)
{% else %} grey
{% endif %}
primary: 'Battery : {{ states(''sensor.sm_s918u_battery_level'') }}%'
tap_action:
action: more-info
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
entity: sensor.sm_s918u_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
alignment: center
my wife:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-person-card
name: Irina
entity: person.irina
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
border: none !important;
background: none !important;
}
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
conditions:
- entity: sensor.irinab_iphone_battery_state
state: charging
card:
type: custom:mushroom-template-card
entity: sensor.irinab_iphone_battery_level
layout: vertical
icon_color: yellow
fill_container: true
name: S23
icon: mdi:battery-charging-medium
hide_name: true
primary: Phone is charging...
secondary: 'Battery : {{ states(''sensor.irinab_iphone_battery_level'') }}%'
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
border: none !important;
background: none !important;
}
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
conditions:
- entity: sensor.irinab_iphone_battery_state
state: discharging
card:
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
entity: sensor.irinab_iphone_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.irinab_iphone_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.irinab_iphone_battery_level') | int %}
{% if bl < 10 %} (255,0,0)
{% elif bl < 20 %} (255,0,255)
{% elif bl < 30 %} (255,102,0)
{% elif bl < 40 %} (255,103,0)
{% elif bl < 50 %} (255,204,0)
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} (0,255,255)
{% elif bl < 90 %} #green
{% elif bl < 100 %} (0,255,255)
{% elif bl == 100 %} (0,255,0)
{% else %} grey
{% endif %}
primary: 'Battery : {{ states(''sensor.irinab_iphone_battery_level'') }}%'
tap_action:
action: more-info
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
entity: sensor.irinab_iphone_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
alignment: center
Thank you
I still your code for my card 
It’s looks great
Thank you
1 Like
Check if data from yours wife phone are availalbe in the dev tools first:
- sensor.irinab_iphone_battery_state
- sensor.irinab_iphone_battery_level
Maybe her phone is not sending those data and you would have to take a look at the companion app sensors settings
Yes ,it’s show level and state in dev. tools. Also it’s working in different card without any problem
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
name: Irina
entity: person.irina
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.irinab_iphone_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.irinab_iphone_battery_level
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.irinab_iphone_battery_state
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
Don’t see anything suspicious. Not sure if that may cause any issues but can you try to replace all lines like this (starting with single quote)
'Battery : {{ states(''sensor.irinab_iphone_battery_level'') }}%'
to double quote like below (remember to use double at the beggining and end, and single quote around the sensor name):
"Battery Level: {{ states('sensor.irinab_iphone_battery_level') }}%"
Also can you check if it works when phone is in charging state?
Thank you for quick respond, unfortunately it’s not fix this issue
If I change code to regular chip card it’s showing this info:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-person-card
name: Irina
entity: person.irina
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
border: none !important;
background: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.irinab_iphone_battery_level
use_entity_picture: false
card_mod: null
style: |
ha-card {
border: none
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.irinab_iphone_battery_state
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
entity: sensor.irinab_iphone_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
alignment: center
Also, is it possible to move “primary_info: state”
to position below person pickture?
Thank you
Charging, no charging- same result
Unfortuantely not sure what can be wrong. Seem like some weird issue as it’s working on one person not another. You would have to try to debug it with Chrome inspect tool looking for some errors in the console and checking the html code.
Regarding moving primary_info - you can always add i.e. markdown card to vertical stack with person-card and set the primary_info to none like below:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-person-card
name: Irina
entity: person.irina
icon_type: entity-picture
primary_info: none
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
border: none !important;
background: none !important;
}
- type: markdown
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
ha-markdown {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
content: |
<b>{{ states('person.irina') | title }}</b>
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.irinab_iphone_battery_level
use_entity_picture: false
card_mod: null
style: |
ha-card {
border: none
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.irinab_iphone_battery_state
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
entity: sensor.irinab_iphone_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
alignment: center
Edit:
Looking at the documentation of mushroom-person-card there is a parameter called layout. Instead of above code you can just add it to your person card:
- type: custom:mushroom-person-card
name: Irina
entity: person.irina
layout: vertical # Add this line
1 Like
Thank you. Will try to add this code.
I think you right about Iphone entity’s.
I check battery level and state in dev tools today and it’s still shows yesterday information. Looks like it’s not refreshing data until I open my wife Home assistant companion app. Will do my investigation and report back, maybe someone else struggle with same issue.
Thank you again
edit:
it’s something about state attribute: state or state_not is working fine for my Android phone but not working for Iphone. When I change state from FULL or Charging to anything else it’s always show me phone is CHARGING, even if it’s not.
conditions:
- entity: sensor.irinab_iphone_battery_state
state_not: not charging
1 Like
can someone helpme, with decimals display here? i want only 2 decimals
i use the code
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.acasa_my_phone_distance'].state} Km Pana acasa</span></span>`
]]]
proximity_work: |
[[[
return `<ha-icon
icon="mdi:home-switch-outline"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.munca_my_phone_distance'].state} Km Pana la Munca</span></span>`
]]]
1 Like