d13g0m0nt3s and Braakie thank you! It works!
2 Likes
Hi, sorry for the late response, but i was busy with other things.
i don’t know if this line really works. Can you porvide me with a screenshot, so i can understand what’s really happening?
Used a mushroom template card with info from life360 - now that it is working again!
Badge is a representation of the battery charge with the colour dependant on the level or blue if it is charging.
multiline secondary true looks nicer but this is part of a large dashboard and it starts to overflow other cards
type: custom:mushroom-template-card
primary: My Name
secondary: |-
{%- set person = "my_name" %}
{% if is_state("device_tracker.life360_" + person, "home") -%}
Home
{%- elif state_attr("device_tracker.life360_" + person, "place",) is none -%}
{{state_attr("device_tracker.life360_" + person, "address") }}
{%- else -%}
{{ state_attr("device_tracker.life360_" + person, "place") }}
{%- endif %}
icon: ''
entity: device_tracker.life360_my_name
picture: >-
{%- set person = "my_name" %}
{%- set pic = state_attr("device_tracker.life360_" + person, "entity_picture") %}
{{ pic }}
fill_container: true
multiline_secondary: false
badge_icon: >-
{%- set person = "my_name" %}
{%- set battery = state_attr("device_tracker.life360_" + person,
"battery_level") %}
{% if state_attr("device_tracker.life360_" + person, "battery_charging") is true -%}
{%- set batterychg = "charging-" %}
{% else %}
{%- set batterychg = "" %}
{%- endif %}
{% if battery < 40 -%}
mdi:battery-{{ batterychg }}30
{%- elif battery < 70 -%}
mdi:battery-{{ batterychg }}60
{% else %}
mdi:battery-{{ batterychg }}90
{%- endif %}
badge_color: >-
{%- set person = "my_name" %}
{%- set battery = state_attr("device_tracker.life360_" + person,
"battery_level") %}
{% if state_attr("device_tracker.life360_" + person, "battery_charging") is true -%}
blue
{% else %}
{% if battery < 40 -%}
red
{%- elif battery < 70 -%}
yellow
{% else %}
green
{%- endif %}
{%- endif %}
2 Likes
Off topic question, what you have done with Life360 integration to make it work again? I try to log in again, and no success. It’s said wrong credentials.
Thank you
Here is mine:
type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
# background: none !important;
--vertical-stack-card-gap: 10px;
background: url('/local/MyPictures/rock wall.jpg');
background-size: 200%;
}
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
layout: vertical
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;
margin-left: -50px !important;
}
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -55px !important;
}
cards:
- type: custom:mushroom-template-card
primary: >-
{%- if is_state('sensor.sm_s918u_battery_state', 'charging') %}
Charging 🔌
{%- elif is_state('sensor.sm_s918u_battery_state', 'discharging')
%}
Discharging 🙃
{% else %}
Full 💯
{% endif %}
secondary: Battery {{ states('sensor.sm_s918u_battery_level') }}%
entity: sensor.sm_s918u_battery_state
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 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
justify-content: center;
--chip-icon-size: 24px;
--chip-height: 54px;
--chip-with:
width: var(--chip-height) !important;
border-radius: 50% !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
font-size: 30px !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;
margin-left: -23px !important;
}
alignment: center
1 Like
Mine is pretty simple. I have a 15.6" uPerfect vertical monitor connected to a pi400.
- I have a large HOME and AWAY status so you can see it across the room 15m.
- Mushroom Person Card display status of each person.
When up close you can click on a card to show a map of were the person is
AWAY status, turns OFF heat pumps and other items in the house.
HOME & AWAY Status can be set manually by hitting the sticky floating navigation menu button at the bottom of the page.
HOME & AWAY Status is also set automatically using device tracker and proximity intergrations.
1 Like
Creating Avatars I tried a fair few applications. Microsoft Teams Avatar App gave some good results with realistic results.
Setup instructions for Microsoft Teams Avatars is [HERE]. It is FREE and you can create 3 different Avatars at a time and just use the snip tool or print screen to copy the image in the app. (Set up avatars for Microsoft Teams - Microsoft Teams | Microsoft Learn)
3 Likes
Really impressive. You use a HA Phone companion for tracker, and I use the same for me and my wife, but my daughter doesn’t want to install HA app to her iPhone, this is why I asked about Life360(otherwise HA companion app is more than enough). Windy.com for forecast in my dashboard. Thank you for sharing yours.
1 Like
@Zenia Ventusky is brilliant in iframe. I use the shortcut P to put it into presentation mode. The map types changes with the weather condition, just copy a fresh URL for the conditions you want and use conditional cards to change the display. Ventusky - Wind, Rain and Temperature Maps.
I am a bit more sneaky with my daughter. I just install the HA Companion App on her phone, saying she needs it to control the home. Then adjust the settings so her phone is tracked. It also makes a good easy to use tracker if someone looses their phone.
2 Likes
Well, my daughter is almost 21 and she knows what to do with her phone 
and how to remove and install some apps
1 Like
Yep I know your pain. My daughters phone is what turns her heat pump on when she arrives home and also turns her lights off when she leaves. So the tracking has advantages for her and she won’t freeze, we don’t use it to keep an eye on where she is.
1 Like
I install HA App on her phone, create a separate dashboard for her to control lights, fan, towel warmer and HVAC in her room and bathroom, but after a week she decided it’s taking too much memory on her phone and removed 
.
1 Like
You can’t win, make it so none of it works unless her HA app is detected at home. lol
1 Like
Check the hacs page there is a version 5(something)
Seems to work for some people but not others
nice indeed, thx for a new resource to add 
a bit like the Windy maps.
I did test that in my weather cameras config, but find the cards are horribly sensitive to mouse gestures, and zoom in/out accidentally all the time
- type: custom:fold-entity-row
head:
type: section
label: Ventusky
card_mod: *label
padding: 0
entities:
- type: custom:hui-element
<<: *style
card_type: iframe
aspect_ratio: 100%
url: 'https://www.ventusky.com/?p=52.17;5.68;5&l=satellite'
the style mod simply removes the border and adjusts the image to the full space under the fold.
too bad there is no ‘re-center’ button in that map. You are not aware of some other code we can use than simply adding the web page in an iframe?
exactly, thats what we ended up doing. If they dont keep the app on their phone, no use in trying to keep HA up to the task of displaying them, or worse, templating stuff based on their mobile_app entities.
Have all family members in a grid, and for the ones with active app, I do this:
- type: conditional
conditions:
- entity: person.no_app
state: home
card:
type: custom:button-card
template: button_picture_family
entity: person.no_app
Making them show only when at home baed on their local network trackers… nice, clean and simple
2 Likes
Hi All!,
Been using HA for a while know, but never dared to go into customizing my dashboard in high detail. After seeing some amazing dashboards I thing the time is there to start organizing things and make the Dashboard ready for other people in our house. I wanted to start of small with a custom Person card showing an avatar with some icons showing home/away state.
First thing I’m figuring out is how to make a image / avatar appear as background image, so I might manipulate it at a later point in time. Card pops up, but no image is showing with the background image that I have set.
Code below should be very basic and i might be over seeing something small, but cant figure it out atm… any pointers?!
type: custom:button-card
entity: person.<name>
aspect_ratio: 4/4
show_name: false
show_icon: false
styles:
card:
- padding: 4%
- background-image: url("/local/images/<name here>_normal.png")
- background-size: 90%
- background-repeat: no-repeat
- background-position: left middle
- . .keep-background: 'true'
OK! found my error after some more googling… just created the www folder and dropped images in them… after creating the www folder, you should first reboot HA before it has any affect and can be addressed as /local/!
1 Like
I am the “lucky” one, it’s not working for me 
Check this video:
Building the ULTIMATE PERSON CARD for Home Assistant! (youtube.com)
This guy is awesome, he creates a really nice dashboard also
1 Like
I followed this thread for a while and tested out several card designs, but didnt liked them very much. They didnt fitted my Dashboard.
I used the mushroom person card for a while and like it.
But i wanted the traveltime and current battery level in the card. So i ended up building the mushroom template card, copying the personcard and adjusting it so it fits my needs.
type: custom:mushroom-template-card
primary: ''
secondary: >
{% set person = entity %} {% set bl = "sensor.iphone_von_xxxx_battery_level"
%} {% set bs = "sensor.iphone_von_xxxx_battery_state" %} {% set rz =
"sensor.reisezeit_xxxx_home" %}
{% if states(bs) == "Charging" -%}⚡{%- else -%}🔋{%- endif %}{{states(bl)}}
{% if (int(states(rz)) > 4) -%}
{{states(rz)}} min
{%- endif %}
icon: ''
layout: vertical
picture: '{{state_attr(entity,"entity_picture")}}'
entity: person.xxxx
badge_icon: |-
{% if is_state(entity, "not_home") %}
mdi:home-export-outline
{% else %}
{{state_attr("zone." + states(entity),"icon")}}
{%- endif %}
badge_color: |-
{% if is_state(entity, ["home","home2"]) -%}
green
{% elif is_state(entity, "not_home") %}
red
{% elif state_attr("zone." + states(entity),"icon") | contains('office') %}
blue
{%- endif %}
icon_color: ''
multiline_secondary: true
fill_container: true
tap_action:
action: more-info
double_tap_action:
action: call-service
service: script.suche_handy_xxxx
confirmation: true
just replace all xxxx with the right entity names
edit: i made the configuration a bit easier, so you dont have to set the variable everywhere where its already available from the tempalte card by setting the global entity by this
entity: person.xxxx
still replace the xxxx with the person name
the “sensor.reisezeit_xxxx_home” is my traveltime from the waze integration, pretty easy to setup
edit: i ended up adding a script to search my mobile phone on double tab
i got the script from the forum but didnt know where from
but here it is
also the script only works ive you have pictures added to the person entity
script
alias: Suche Handy xxxx
sequence:
- service: notify.mobile_app_iphone_von_xxxx
data:
message: Searching for your phone from the HA app…
data:
push:
interruption-level: critical
sound: alarm.caf
mode: single
icon: mdi:cellphone-sound
3 Likes