I made it myself using paint, the easiest way would be to use the image in a picture glance card and take a screen shot of that then use that as your background image 
My living room setup with Pi element to select the source so logo of source suits what’s playing. Eg kodi ps4 Xbox live tv netflix
7 Likes
Could you share your code regarding TV remote (numbers) interface.
TIA
Hi,
this is my approach to picture-elements:
All values are generated by Netatmo sensors.
Darker background under icons is realized with Photoshop.
My inspiration: https://sharethelove.io/picture-elements-cards/temperature-glance
Edit: updated screenshot
1 Like
Thank you for your reply. Last night I figured out this and implemented Harmony remote using picture-elements.
Here is the post.
Started to fiddle around with lovelace and wanted to share an image on how versatile the picture-elements card is for putting in a lot of information on a small footprint.
Here is “state cards” for me and my wife.
It’s really nice to be able to have multiple “layers” of images to mimic diffrent states.
Lovelace code for one of the cards:
id: home
title: Home
cards:
- type: picture-elements
image: /local/ll_matte_home.png
elements:
- style:
top: 50%
left: 50%
width: 100%
type: image
entity: input_select.matte_home_status
state_image:
"Home": /local/ll_matte_home.png
"Just Arrived": /local/ll_matte_home.png
"Away": /local/ll_matte_not_home.png
"Just Left": /local/ll_matte_not_home.png
"Extended Away": /local/ll_matte_not_home.png
- style:
top: 50%
left: 50%
width: 100%
type: image
entity: input_boolean.matte_charging
state_image:
"on": /local/ll_status_charging1.png
"off": /local/ll_status_blank.png
- style:
color: white
top: 9%
left: 12%
type: state-icon
entity: sensor.matte_battery
- style:
color: white
top: 92%
left: 50%
type: state-label
entity: sensor.matte_presence
- style:
color: white
top: 10%
left: 89%
type: state-label
entity: sensor.matte_battery
- style:
color: white
top: 73%
left: 88%
type: state-label
entity: proximity.home_matte
- style:
color: white
top: 73%
left: 12%
type: state-label
entity: sensor.matte_hem
37 Likes
Thanks for sharing! That one is great Copying straight away
That’s quite interesting, Thanks for sharing!
Would you mind also share the configuration for input_boolean.matte_charging and the battery images?
Also, for the proximity, did you had to create one per-person for the home zone? I guess so unless I am doing something wrong, if I set one proximity for home with both device track it just provides the closest one, not both, so presumambly (well, this is what I did), you need to create a proximity entity per persone for the “home” zone, right?
Cheers
Andrea
Im using tasker and webhook to update my charging status.
Tasker setup
Yaml setup
############################################################################
## Webhooks
############################################################################
## Automations
############################################################################
automation:
- alias: 'Webhook Call Input_boolean'
initial_state: 'on'
trigger:
platform: webhook
webhook_id: input_boolean_webhook_publish
action:
service_template: '{{ trigger.json.service }}'
data_template:
entity_id: '{{ trigger.json.entity }}'
############################################################################
## Input_boolean
############################################################################
input_boolean:
matte_charging: # Controlled from tasker on phone
name: Matte Laddar
For my wife i get the charging status from my “Google Maps Location Sharing” device_tracker.
(a bit slower to detect status, but i dont have to install or setup anything on her phone.
sensor:
- platform: template
sensors:
asa_charging_gmaps:
friendly_name: "Åsa laddar gmaps"
value_template: "{{ state_attr('device_tracker.google_maps_xxxxxxxxxxxxxxxxxxxx', 'battery_charging') }}"
The Battery icon comes from using the “custom component” battery_alert.yaml from https://github.com/notoriousbdg/Home-AssistantConfig/blob/master/packages/battery_alert.yaml
And the circle with gradient color is just a transparent .png file with the same size as the background images and the circle placed where the “hole” is.
And for proximity i have this:
############################################################################
## Proximity
############################################################################
proximity:
home_matte:
zone: home
devices:
- sensor.matte_presence
tolerance: 50
unit_of_measurement: km
home_asa:
zone: home
devices:
- sensor.asa_presence
tolerance: 50
unit_of_measurement: km
home_cod:
zone: home
devices:
- sensor.cod_presence
tolerance: 50
unit_of_measurement: km
7 Likes
Thank you very much for sharing that
Especially the Tasker config, I have bought it and I need to study it a bit
Regarding the proximity I can see you’re doing exactly as me, but isn’t 50km tolerance a little too high? 
I did put in meters with 25 of tolerance
Cheers!
Andrea
I think the tolerance value is in meters.
tolerance
(integer)(Optional)The tolerance used to calculate the direction of travel in meters (m) to filter out small GPS coordinate changes.
The unit_of_measurement i think is only for the reported state.
Oh okay
Make more sense like this
Also for the presence you use tasker?
No, i use 3 diffrent components for presence.
“Gps” = Google Maps Location Sharing (HA Component)
“Bluetooth” = https://github.com/andrewjfreyer/monitor (Project running on separate Pi)
“Wifi” = IFTTT Webhooks for my FINGBox (FingBox and IFTTT (Official Support))
And right now im testing out the hassio addon “A Better Presence” from here https://github.com/helto4real/hassio-add-ons/tree/master/presence to tie them all together.
I have used tasker for presence, sending gps, battery, and lots of data earlier, but it was quite battery draining back then.
Nowdays with webhooks i guess it would be a lot easier to setup in tasker, but right now i think these 3 is working good enough for me.
3 Likes
I see,
I am using namp ping and life360 but I am not having valid results.
Also I am not using Hass.io but Home Assistant so I cannot use/test that plugin unfortunately.
That’s annoying 
Anyway, thanks for the info!
If you have a spare Raspberry Pi (even pi zero) you should really look into the “Monitor” project i use.
it works really fine and have improve my presence by far.
2 Likes
I guess I need to fix my Wifi/Bluetooth on my Pi3 first because for some reason isnt working anymore )
Thanks for that
nice!
what the size for the main pictures? I tried it but my images get blown up…
also, i have this template to use for my location in my Tiles setup, could this be used in your card too?:
background-image: url(\"/local/tiles/family/marijn_' + entities['sensor.marijn_location_picture'].state + '.png\")
thanks!
thanks!
so this is the frame with the holes, and your home image in 1 file? Or are these in fact 2 files, a fram, and a bigger home_image.
Would love to have this frame file