Well done!
This is terrific work! 
1 Like
Can this be done for the FordPass aswell ?
The volume-sliders… what card (and how) are you doing that?
It’s this card: DBuit/media_player-popup-card (github.com)
But I decided to not use it as a popup card, but just as a regular card. The sliders are inside a horizontal-stack.
2 Likes
Hi ASNNetworks,
Great work, can you please share your code?
Thanks.
Sorry, I can’t. It was extremely advanced to make it all work with automations, scripts and custom cards I edited. In order to share all code, it would take me a few days to combine all code properly so it’s usable (I work 50-60 hours a week with having a job and freelance gigs on the side). This is not something you can just copy/paste and expect to work in all honesty.
But that’s not the main reason: I have switched to Logitech Media Server (via PiCoreplayer/Max2Play) for multiroom. I use the interface of LMS, instead of this projecy. So I don’t use this anymore, nor do I have the code.
My goal was initially to show off what was possible using picture-elements and to think outside the box of how Lovelace views usually look like. It was meant as an experiment and concept, in which it was succesful. So I’m sorry I can’t help you, but I do hope you (and others) get inspirations based off this ofcourse 
!
UPDATE: I got it working. Thanks for sharing!
Hi,
I can’t seem to figure out how to get the person tracker working. All sensors have been created and are showing up in dev tools. I’m using the GUI to add the cards, so I’m just plugging the YAML into a manual card. Two things happen, I either get a blank screen or a swirling blue circle. I have 3 people but for now I’m only using myself to troubleshoot.
cards:
- card:
cards:
- elements:
- entity: '${''device_tracker.life360_'' + vars[0]}'
image: >-
"${states['sensor.' + vars[0]
+'_status'].attributes['entity_picture']}"
style:
left: 50%
top: 50%
width: 100%
type: image
- entity: '${''sensor.'' + vars[0] +''_battery''}'
style:
'--paper-item-icon-color': >-
${'hsl(' + (states['sensor.' + vars[0]
+'_battery'].state*1.1 )*((states['sensor.' + vars[0]
+'_battery'].state/100)) + ',90%,40%)'}
left: 4.5%
top: 3.5%
transform: 'scale(1.2,1.2)'
type: state-icon
- entity: '${''sensor.'' + vars[0] +''_wifi''}'
style:
'--paper-item-icon-color': '#2b9af9'
left: 80.5%
top: 3.5%
transform: 'scale(1.2,1.2)'
type: state-icon
image: '${''/local/img/person/blank_frame.png''}'
type: 'custom:hui-picture-elements-card'
- color_type: icon
entity: '${''sensor.'' + vars[0] +''_status''}'
show_icon: false
show_name: false
show_state: true
styles:
card:
- height: '${states[''sensor.'' + vars[0] +''_height''].state}'
state:
- padding-top: '${vars[2]}'
- padding-left: 14px
- padding-right: 14px
- white-space: '${vars[1]}'
- text-overflow: '${vars[1]}'
- word-break: break-word
- font-family: var(--primary-font-family)
tap_action:
action: url
url_path: '${states[''sensor.'' + vars[0]].attributes[''map_link'']}'
type: 'custom:button-card'
- card:
color_type: icon
entity: '${''sensor.'' + vars[0] +''_at_loc_since''}'
show_icon: false
show_name: false
show_state: true
styles:
card:
- height: 30px
state:
- font-family: var(--primary-font-family)
- padding-bottom: 14px
- font-size: 12px
tap_action:
action: url
url_path: '${states[''sensor.'' + vars[0]].attributes[''map_link'']}'
type: 'custom:button-card'
conditions:
- entity: '${''binary_sensor.'' + vars[0] + ''_moving''}'
state: 'off'
type: conditional
type: 'custom:vertical-stack-in-card'
entities:
- '${''device_tracker.life360_'' + vars[0]}'
type: 'custom:config-template-card'
variables:
- '''mike'''
- >-
{if (states['sensor.' + vars[0] +'_height'].state ===
'70px')'unset';else 'nowrap'}
- >-
{if (states['sensor.' + vars[0] +'_height'].state ===
'70px')'4px';else '14px'}
type: horizontal-stack
I have the same issue can you please tell me how you fixed it? and or share your card code I use the GUI also but get only a empty card
The issue i had was because of this bit of code here:
tap_action:
action: url
url: '${states[''sensor.'' + vars[0]].attributes[''map_link'']}'
It’s pointing to a sensor that I didn’t have setup. Once I had this setup everything started working, no need to change the frontend code provided by hoffdad. I found using the browser’s dev tool (F12) was very helpful in tracking down UI errors.
Thanx mate, I never toucht the solution was so simple, thanks again for ponting me the right direction.
Great example and very inspiring @ASNNetworks. I’m building something similar to what you’ve done here and can’t get the right styling on the popup media player card. Would you mind sharing the styling you used on that card, or the classes you’ve changed?
I want to help you, but I’m currently moving to a new home. I don’t have access to my HA instance to copy/paste codes currently. I expect to be able to setup my electronics (and HA) in around 2 weeks. (
) I you haven’t found a solution let me know in 2 weeks, I’ll be happy to help.
1 Like
I was able to almost replicate your dashboard, I love it and it’s perfect for my multiroom audio solution with Snapcast. Could you tell me how you were able to hide the scrollbar in the iframe for the Media Browser? I tried with overflow: hidden in multiple places but somehow none of them worked.
This was on tablet, which doesn’t show scroll bars. Most likely you’re using it on on desktop, which I also have scrollbars in my UI. I have read there are different ways to remove them, like using a javascript code. But I haven’t tested that myself any further.
Btw: I don’t use this concept anymore
1 Like
Damn, you’re right! I was tearing my hair out and tried so many things to remove the scrollbar!
I really like your concept and adapted it to my multiroom system! Justvneed to think about a nice phone interface now.
Will share my code once I’m done with the whole setup.
3 Likes
Great to see you were inspired by it! I’m looking forward to see your implementation 
Hi Mike could you help me setting this up.
When you say you’ve setup all the sensors do you mean everything that he has on his tracker_sensors.yaml file on his Github ?
That’s a hell of a lot of re writing if so lol
Also i did the “places” custom component you linked but i can’t find any info on that after i restarted no additional sensors etc.
Do i really need to do all this just to have 2 cards change picture for home and away as i noticed @jompa68 has done one which looks good also which i tired but can’t figure out how to resize it to smaller button size.
Thanks for any help
Hi Steve,
By “all the sensors” I meat the sensors needed for this implementation. You need Life360 and Places for this to work and you need to create the sensor for those integrations. I use packages so i created a yaml file called person.yaml in my packages folder. This will create all the sensors you need. (except for places, those get placed directly in your configuration.yaml file). If you don’t use packages then you will need to create these sensors in the sensor and binary_sensor yaml files.
person.yaml
binary_sensor:
- platform: template
sensors:
mike_moving:
friendly_name: "Mike Moving"
value_template: >-
{{ ((is_state('device_tracker.life360_mike', 'driving') or is_state('device_tracker.life360_mike', 'moving')) and
(state_attr('device_tracker.life360_mike', 'address') != state_attr('device_tracker.life360_mike', 'place')) and
(state_attr('device_tracker.life360_mike', 'place') == '-' and state_attr('device_tracker.life360_mike', 'place') == none)) }}
sarah_moving:
friendly_name: "Sarah Moving"
value_template: >-
{{ ((is_state('device_tracker.life360_sarah', 'driving') or is_state('device_tracker.life360_sarah', 'moving')) and
(state_attr('device_tracker.life360_sarah', 'address') != state_attr('device_tracker.life360_sarah', 'place')) and
(state_attr('device_tracker.life360_sarah', 'place') == '-' or state_attr('device_tracker.life360_sarah', 'place') == none)) }}
sadie_moving:
friendly_name: "Sadie Moving"
value_template: >-
{{ ((is_state('device_tracker.life360_sadie', 'driving') or is_state('device_tracker.life360_sadie', 'moving')) and
(state_attr('device_tracker.life360_sadie', 'address') != state_attr('device_tracker.life360_sadie', 'place')) and
(state_attr('device_tracker.life360_sadie', 'place') == '-' or state_attr('device_tracker.life360_sadie', 'place') == none)) }}
sensor:
- platform: template
sensors:
mike_location:
friendly_name: "Mike Location"
value_template: >-
{% if is_state('device_tracker.life360_mike', 'home') %}
Home
{% elif (state_attr('device_tracker.life360_mike', 'address') == state_attr('device_tracker.life360_mike', 'place')) and (state_attr('device_tracker.life360_mike', 'place') != '-' and state_attr('device_tracker.life360_mike', 'place') != none) %}
{{state_attr('device_tracker.life360_mike', 'place')}}
{% elif (states('device_tracker.life360_mike') != 'moving') and (states('device_tracker.life360_mike') != 'driving') %}
{% if states('device_tracker.life360_mike') != 'not_home' %}
{{ state_attr('sensor.mike', 'devicetracker_zone') }}
{% elif state_attr('sensor.mike', 'place_name') != '-' %}
{{ state_attr('sensor.mike', 'place_name') }}
{% else %}
{% if state_attr('sensor.mike', 'street') != '-' %}{{state_attr('sensor.mike', 'street')}}{% endif %}{% if state_attr('sensor.mike', 'city') != '-' %}, {{state_attr('sensor.mike', 'city')}}, {% if state_attr('sensor.mike', 'state_province') != '-' %}{{state_attr('sensor.mike', 'state_province')}}{% endif %}{% endif %}
{% endif %}
{% else %}
{% if state_attr('sensor.mike', 'place_name') != '-' %}
near {{ state_attr('sensor.mike', 'place_name') }}
{% else %}
on {% if state_attr('sensor.mike', 'street') != '-' %}{{state_attr('sensor.mike', 'street')}}{% endif %}
{% endif %}
{% endif %}
mike_status:
friendly_name: "Mike"
value_template: >-
{% if is_state('device_tracker.life360_mike', 'home') %}
Home
{% elif (state_attr('device_tracker.life360_mike', 'address') == state_attr('device_tracker.life360_mike', 'place')) and (state_attr('device_tracker.life360_mike', 'place') != '-' and state_attr('device_tracker.life360_mike', 'place') != none) %}
{{ states('sensor.mike_location') | replace("Street","St") | replace("Avenue","Ave") | replace("Boulevard","Blvd") | replace("Road","Rd") | replace("Parkway","Pkwy") | replace("Freeway","Fwy") | replace("Drive","Dr") | replace("Extension","Ext") }}
{% elif states('device_tracker.life360_mike') == 'driving' %}
Driving {{ states('sensor.mike_location') | replace("Street","St") | replace("Avenue","Ave") | replace("Boulevard","Blvd") | replace("Road","Rd") | replace("Parkway","Pkwy") | replace("Freeway","Fwy") | replace("Drive","Dr") | replace("Extension","Ext") }}
{% elif states('device_tracker.life360_mike') == 'moving' %}
Moving {{ states('sensor.mike_location') | replace("Street","St") | replace("Avenue","Ave") | replace("Boulevard","Blvd") | replace("Road","Rd") | replace("Parkway","Pkwy") | replace("Freeway","Fwy") | replace("Drive","Dr") | replace("Extension","Ext") }}
{% else %}
{{ states('sensor.mike_location') | replace("Street","St") | replace("Avenue","Ave") | replace("Boulevard","Blvd") | replace("Road","Rd") | replace("Parkway","Pkwy") | replace("Freeway","Fwy") | replace("Drive","Dr") | replace("Extension","Ext") }}
{% endif %}
entity_picture_template: >-
{% if is_state('sensor.mike_location', 'Giant') %}
/local/img/person/mike/grocery.png
{% elif is_state('sensor.mike_location', 'Work (Mike)') %}
/local/img/person/mike/work.png
{% elif states('device_tracker.life360_mike') == 'driving' %}
/local/img/person/mike/driving.png
{% elif states('device_tracker.life360_mike') == 'moving' %}
/local/img/person/mike/moving.png
{% elif states('sensor.mike_in_bed') == 'Yes' and states('device_tracker.life360_mike') == 'home' %}
/local/img/person/mike/sleeping.png
{%else %} /local/img/person/mike/home.png{%endif%}
mike_at_loc_since:
friendly_name: "At Location Since"
value_template: >-
{% set time = (states.sensor.mike_location.last_changed.strftime("%s") | int ) %}
{% set day = time | timestamp_custom("%-d") | int %}
{% if (now().day - day) == 1 %}
Since Yesterday at {{ time | timestamp_custom("%-I:%M %p") }}
{% elif (now().day - day) < 0 %}
{% if now().day %}
Since Yesterday at {{ time | timestamp_custom("%-I:%M %p") }}
{% else %}
Since {{ time | timestamp_custom("%a, %b %-d at %-I:%M %p") }}
{% endif %}
{% elif (now().day - day) > 1 %}
Since {{ time | timestamp_custom("%a, %b %-d at %-I:%M %p") }}
{% else %}
Since {{ time | timestamp_custom("%-I:%M %p") }}
{% endif %}
mike_place_type:
friendly_name: "Mike Place Type"
value_template: >-
{{ state_attr('sensor.mike', 'place_type') }}
mike_battery:
friendly_name: "Battery"
unit_of_measurement: '%'
value_template: "{{states.device_tracker.life360_mike.attributes.battery }}"
icon_template: >-
mdi:battery{% if is_state_attr('device_tracker.life360_mike', 'battery_charging', true) %}-charging{% else %}{% endif %}{% if 0<(state_attr('device_tracker.life360_mike', 'battery') | float / 10 ) | round(0) * 10 < 100%}-{{ (state_attr('device_tracker.life360_mike', 'battery') | float / 10 ) | round(0) * 10 }}{% else %}{% if (state_attr('device_tracker.life360_mike', 'battery') | float / 10 ) | round(0) * 10 == 0%}-outline{%else%}{% if is_state_attr('device_tracker.life360_mike', 'battery_charging', true) %}-100{% endif %}{% endif %}{% endif %}
mike_wifi:
friendly_name: "WiFi"
value_template: >-
{% if is_state_attr('device_tracker.life360_mike', 'wifi_on', true) %}
on
{% else %}
off
{% endif %}
icon_template: >-
{% if is_state_attr('device_tracker.life360_mike', 'wifi_on', true) %}
mdi:wifi
{% else %}
mdi:wifi-off
{% endif %}
mike_height:
value_template: >-
{% if is_state('binary_sensor.mike_moving', 'on') %}
70px
{% else %}
40px
{% endif %}
sarah_location:
friendly_name: "Sarah Location"
value_template: >-
{% if is_state('device_tracker.life360_sarah', 'home') %}
Home
{% elif (state_attr('device_tracker.life360_sarah', 'address') == state_attr('device_tracker.life360_sarah', 'place')) and (state_attr('device_tracker.life360_sarah', 'place') != '-' and state_attr('device_tracker.life360_sarah', 'place') != none) %}
{{state_attr('device_tracker.life360_sarah', 'place')}}
{% elif (states('device_tracker.life360_sarah') != 'moving') and (states('device_tracker.life360_sarah') != 'driving') %}
{% if states('device_tracker.life360_sarah') != 'not_home' %}
{{ state_attr('sensor.sarah', 'devicetracker_zone') }}
{% elif state_attr('sensor.sarah', 'place_name') != '-' %}
{{ state_attr('sensor.sarah', 'place_name') }}
{% else %}
{% if state_attr('sensor.sarah', 'street') != '-' %}{{state_attr('sensor.sarah', 'street')}}{% endif %}{% if state_attr('sensor.sarah', 'city') != '-' %}, {{state_attr('sensor.sarah', 'city')}}, {% if state_attr('sensor.sarah', 'state_province') != '-' %}{{state_attr('sensor.sarah', 'state_province')}}{% endif %}{% endif %}
{% endif %}
{% else %}
{% if state_attr('sensor.sarah', 'place_name') != '-' %}
near {{ state_attr('sensor.sarah', 'place_name') }}
{% else %}
on {% if state_attr('sensor.sarah', 'street') != '-' %}{{state_attr('sensor.sarah', 'street')}}{% endif %}
{% endif %}
{% endif %}
sarah_status:
friendly_name: "Sarah"
value_template: >-
{% if is_state('device_tracker.life360_sarah', 'home') %}
Home
{% elif (state_attr('device_tracker.life360_sarah', 'address') == state_attr('device_tracker.life360_sarah', 'place')) and (state_attr('device_tracker.life360_sarah', 'place') != '-' and state_attr('device_tracker.life360_sarah', 'place') != none) %}
{{ states('sensor.sarah_location') | replace("Street","St") | replace("Avenue","Ave") | replace("Boulevard","Blvd") | replace("Road","Rd") | replace("Parkway","Pkwy") | replace("Freeway","Fwy") | replace("Drive","Dr") | replace("Extension","Ext") }}
{% elif states('device_tracker.life360_sarah') == 'driving' %}
Driving {{ states('sensor.sarah_location') | replace("Street","St") | replace("Avenue","Ave") | replace("Boulevard","Blvd") | replace("Road","Rd") | replace("Parkway","Pkwy") | replace("Freeway","Fwy") | replace("Drive","Dr") | replace("Extension","Ext") }}
{% elif states('device_tracker.life360_sarah') == 'moving' %}
Moving {{ states('sensor.sarah_location') | replace("Street","St") | replace("Avenue","Ave") | replace("Boulevard","Blvd") | replace("Road","Rd") | replace("Parkway","Pkwy") | replace("Freeway","Fwy") | replace("Drive","Dr") | replace("Extension","Ext") }}
{% else %}
{{ states('sensor.sarah_location') | replace("Street","St") | replace("Avenue","Ave") | replace("Boulevard","Blvd") | replace("Road","Rd") | replace("Parkway","Pkwy") | replace("Freeway","Fwy") | replace("Drive","Dr") | replace("Extension","Ext") }}
{% endif %}
entity_picture_template: >-
{% if is_state('sensor.sarah_location', 'Grocery Store') %}
/local/img/person/sarah/grocery.png
{% elif state_attr('sensor.sarah', 'place_type') == 'Target' %}
/local/img/person/sarah/shopping.png
{% elif is_state('device_tracker.life360_sarah', 'Work (Sarah)') %}
/local/img/person/sarah/work.png
{% elif states('device_tracker.life360_sarah') == 'driving' %}
/local/img/person/sarah/driving.png
{% elif states('device_tracker.life360_sarah') == 'moving' %}
/local/img/person/sarah/moving.png
{% elif states('sensor.sarah_in_bed') == 'Yes' and states('device_tracker.life360_sarah') == 'home' %}
/local/img/person/sarah/sleeping.png
{%else %} /local/img/person/sarah/home.png{%endif%}
sarah_at_loc_since:
friendly_name: "At Location Since"
value_template: >-
{% set time = (states.sensor.sarah_location.last_changed.strftime("%s") | int ) %}
{% set day = time | timestamp_custom("%-d") | int %}
{% if (now().day - day) == 1 %}
Since Yesterday at {{ time | timestamp_custom("%-I:%M %p") }}
{% elif (now().day - day) < 0 %}
{% if now().day %}
Since Yesterday at {{ time | timestamp_custom("%-I:%M %p") }}
{% else %}
Since {{ time | timestamp_custom("%a, %b %-d at %-I:%M %p") }}
{% endif %}
{% elif (now().day - day) > 1 %}
Since {{ time | timestamp_custom("%a, %b %-d at %-I:%M %p") }}
{% else %}
Since {{ time | timestamp_custom("%-I:%M %p") }}
{% endif %}
sarah_place_type:
friendly_name: "Sarah Place Type"
value_template: >-
{{ state_attr('sensor.sarah', 'place_type') }}
sarah_battery:
friendly_name: "Battery"
unit_of_measurement: '%'
value_template: "{{states.device_tracker.life360_sarah.attributes.battery }}"
icon_template: >-
mdi:battery{% if is_state_attr('device_tracker.life360_sarah', 'battery_charging', true) %}-charging{% else %}{% endif %}{% if 0<(state_attr('device_tracker.life360_sarah', 'battery') | float / 10 ) | round(0) * 10 < 100%}-{{ (state_attr('device_tracker.life360_sarah', 'battery') | float / 10 ) | round(0) * 10 }}{% else %}{% if (state_attr('device_tracker.life360_sarah', 'battery') | float / 10 ) | round(0) * 10 == 0%}-outline{%else%}{% if is_state_attr('device_tracker.life360_sarah', 'battery_charging', true) %}-100{% endif %}{% endif %}{% endif %}
sarah_wifi:
friendly_name: "WiFi"
value_template: >-
{% if is_state_attr('device_tracker.life360_sarah', 'wifi_on', true) %}
on
{% else %}
off
{% endif %}
icon_template: >-
{% if is_state_attr('device_tracker.life360_sarah', 'wifi_on', true) %}
mdi:wifi
{% else %}
mdi:wifi-off
{% endif %}
sarah_height:
value_template: >-
{% if is_state('binary_sensor.sarah_moving', 'on') %}
70px
{% else %}
40px
{% endif %}
sadie_location:
friendly_name: "Sadie Location"
value_template: >-
{% if is_state('device_tracker.life360_sadie', 'home') %}
Home
{% elif (state_attr('device_tracker.life360_sadie', 'address') == state_attr('device_tracker.life360_sadie', 'place')) and (state_attr('device_tracker.life360_sadie', 'place') != '-' and state_attr('device_tracker.life360_sadie', 'place') != none) %}
{{state_attr('device_tracker.life360_sadie', 'place')}}
{% elif (states('device_tracker.life360_sadie') != 'moving') and (states('device_tracker.life360_sadie') != 'driving') %}
{% if states('device_tracker.life360_sadie') != 'not_home' %}
{{ state_attr('sensor.sadie', 'devicetracker_zone') }}
{% elif state_attr('sensor.sadie', 'place_name') != '-' %}
{{ state_attr('sensor.sadie', 'place_name') }}
{% else %}
{% if state_attr('sensor.sadie', 'street') != '-' %}{{state_attr('sensor.sadie', 'street')}}{% endif %}{% if state_attr('sensor.sadie', 'city') != '-' %}, {{state_attr('sensor.sadie', 'city')}}, {% if state_attr('sensor.sadie', 'state_province') != '-' %}{{state_attr('sensor.sadie', 'state_province')}}{% endif %}{% endif %}
{% endif %}
{% else %}
{% if state_attr('sensor.sadie', 'place_name') != '-' %}
near {{ state_attr('sensor.sadie', 'place_name') }}
{% else %}
on {% if state_attr('sensor.sadie', 'street') != '-' %}{{state_attr('sensor.sadie', 'street')}}{% endif %}
{% endif %}
{% endif %}
sadie_status:
friendly_name: "Sadie"
value_template: >-
{% if is_state('device_tracker.life360_sadie', 'home') %}
Home
{% elif (state_attr('device_tracker.life360_sadie', 'address') == state_attr('device_tracker.life360_sadie', 'place')) and (state_attr('device_tracker.life360_sadie', 'place') != '-' and state_attr('device_tracker.life360_sadie', 'place') != none) %}
{{ states('sensor.sadie_location') | replace("Street","St") | replace("Avenue","Ave") | replace("Boulevard","Blvd") | replace("Road","Rd") | replace("Parkway","Pkwy") | replace("Freeway","Fwy") | replace("Drive","Dr") | replace("Extension","Ext") }}
{% elif states('device_tracker.life360_sadie') == 'driving' %}
Driving {{ states('sensor.sadie_location') | replace("Street","St") | replace("Avenue","Ave") | replace("Boulevard","Blvd") | replace("Road","Rd") | replace("Parkway","Pkwy") | replace("Freeway","Fwy") | replace("Drive","Dr") | replace("Extension","Ext") }}
{% elif states('device_tracker.life360_sadie') == 'moving' %}
Moving {{ states('sensor.sadie_location') | replace("Street","St") | replace("Avenue","Ave") | replace("Boulevard","Blvd") | replace("Road","Rd") | replace("Parkway","Pkwy") | replace("Freeway","Fwy") | replace("Drive","Dr") | replace("Extension","Ext") }}
{% else %}
{{ states('sensor.sadie_location') | replace("Street","St") | replace("Avenue","Ave") | replace("Boulevard","Blvd") | replace("Road","Rd") | replace("Parkway","Pkwy") | replace("Freeway","Fwy") | replace("Drive","Dr") | replace("Extension","Ext") }}
{% endif %}
entity_picture_template: >-
{% if is_state('device_tracker.life360_sadie', 'Mamaws House') %}
/local/img/person/sadie/mamaw.png
{% elif is_state('device_tracker.life360_sadie', 'School (Sadie)') %}
/local/img/person/sadie/shool.png
{% elif states('device_tracker.life360_sadie') == 'driving' %}
/local/img/person/sadie/driving.png
{% elif states('device_tracker.life360_sadie') == 'moving' %}
/local/img/person/sadie/moving.png
{%else %} /local/img/person/sadie/home.png{%endif%}
sadie_at_loc_since:
friendly_name: "At Location Since"
value_template: >-
{% set time = (states.sensor.sadie_location.last_changed.strftime("%s") | int ) %}
{% set day = time | timestamp_custom("%-d") | int %}
{% if (now().day - day) == 1 %}
Since Yesterday at {{ time | timestamp_custom("%-I:%M %p") }}
{% elif (now().day - day) < 0 %}
{% if now().day %}
Since Yesterday at {{ time | timestamp_custom("%-I:%M %p") }}
{% else %}
Since {{ time | timestamp_custom("%a, %b %-d at %-I:%M %p") }}
{% endif %}
{% elif (now().day - day) > 1 %}
Since {{ time | timestamp_custom("%a, %b %-d at %-I:%M %p") }}
{% else %}
Since {{ time | timestamp_custom("%-I:%M %p") }}
{% endif %}
sadie_place_type:
friendly_name: "sadie Place Type"
value_template: >-
{{ state_attr('sensor.sadie', 'place_type') }}
sadie_battery:
friendly_name: "Battery"
unit_of_measurement: '%'
value_template: "{{states.device_tracker.life360_sadie.attributes.battery }}"
icon_template: >-
mdi:battery{% if is_state_attr('device_tracker.life360_sadie', 'battery_charging', true) %}-charging{% else %}{% endif %}{% if 0<(state_attr('device_tracker.life360_sadie', 'battery') | float / 10 ) | round(0) * 10 < 100%}-{{ (state_attr('device_tracker.life360_sadie', 'battery') | float / 10 ) | round(0) * 10 }}{% else %}{% if (state_attr('device_tracker.life360_sadie', 'battery') | float / 10 ) | round(0) * 10 == 0%}-outline{%else%}{% if is_state_attr('device_tracker.life360_sadie', 'battery_charging', true) %}-100{% endif %}{% endif %}{% endif %}
sadie_wifi:
friendly_name: "WiFi"
value_template: >-
{% if is_state_attr('device_tracker.life360_sadie', 'wifi_on', true) %}
on
{% else %}
off
{% endif %}
icon_template: >-
{% if is_state_attr('device_tracker.life360_sadie', 'wifi_on', true) %}
mdi:wifi
{% else %}
mdi:wifi-off
{% endif %}
sadie_height:
value_template: >-
{% if is_state('binary_sensor.sadie_moving', 'on') %}
70px
{% else %}
40px
{% endif %}
For places you need to create an account at OpenStreetMap (for each user) and then you need to create the sensors needed.
For example:
sensor places_jim:
- platform: places
name: jim
devicetracker_id: device_tracker.jim_iphone8
options: zone,place
map_provider: google
map_zoom: 19
home_zone: zone.jim_home
api_key: !secret email_jim
You absolutely don’t have to do all of this just to change the pic when home or away, but this does a lot more than that. It actually provides tracking data. So if you’re driving it will say what street you’re on, etc, or if you’re at a store it will display the name of the store instead of just “Away” or “Not Home”. So if you don’t want or need all of that than I would say this isn’t the implementation for you.
1 Like
Thanks for that Mike I’ll have a go at that later !
Can I just ask about the api_key it says just put my email address in, so I created a account with them is that enough or should I have created a account and created a API key in my openmap settings.
Yeah, API key is just your email.
1 Like