I want to create incredibly smart context-aware "presence" cards for the my main overview page. The idea being that it displays all relevant data in a clean, space saving way that allows me to see things at a glance without having to click through to more-info cards and such.
These are gonna be made using custom button card since it allows full control of styling with templates and such. It is going to use a combination of attributes/sensors from Life360 and the iOS app along with a few others (Waze travel time, proximity, etc).
Brainstorming:
Showing State:
Would have an entity_picture in a circular shape. If the user is home the image would display in full color. If they are away this picture would have a grayscale filter applied over it.
Could also have a green or red border at the top of the card. Not sure I like this idea as much though.
Could maybe also do a circle around the avatar?
Other:
To the right of this picture would be the persons name in bold text
Long press on person to be able to refresh the data (supported on iOS at least).
Concept of an "Activity Circle" that would be displayed in one of the corners. Style would look very similar to an Apple Watch complication.
If at home, display mdi:home in blue (#2196F3)
If inside of any other zone display mdi:map-marker probably in purple (#9C27B0)
If driving it would display mdi:car in deep orange (#FF5722)
If moving it would display mdi:walk
These would probably be color coded. The mdi:icon would be a darker shade, while the circle would be filled in with a lighter shade of the same color for a nice look.
Styling ideas:
If the users battery is charging, make it green and very slowly pulsing?
If the users battery is very low, make it red and pulsing faster.
Sensor Logic / Issues to Resolve:
When arriving at a zone and the at_loc_since is under 5 minutes, have it say "Just arrived at Home" etc. Same thing for "Just left " but that would only be for 1-2 minutes instead of 5?
Implement proximity direction - {{ states.proximity.home.attributes.dir_of_travel == "towards" }}
Home: Battery percentage and status and WiFi status, how long they've been home since.
Away: left home at X / away for X.
Driving: "Driving at 55mph near State Rte 3. 10miles / 8min away." There would be some kind of button / link to open the coordinates in Google Maps street view.
Checklist:
[x] Use the input_select.sean_status dropdown to show Just Arrived / Just Left home text
[ ] It can sometimes say unknown mph, figure how to work around / filter that out.
[ ] When the state is driving, don't show "since X pm" since that will update every ten seconds anyway, pretty useless for driving
[ ] Want to do more relative time stuff, right now it says "since 8:30pm" but doesn't say that it was yesterday. Need to make it say "since 8:30pm yesterday" basically. Compare days?
[ ] If driving over a certain speed (50mph?), color the text red or something.
[x] Experiment with a Discord-style activity color icon overlaid on top of the avatar (green for home, orange/yellow/red for away?)
[x] Once I get the hang of all this javascript stuff, implement other modes (nap mode, exercise mode, shower mode, etc) to be super smart and contextual
[ ] For sleeping it's saying "Sleeping for 41m since 5:39:00" I want the input_datetime to say 5:39am instead...
[ ] Integrate the Car Trips data onto the card? Not sure.
[ ] If Guest Mode is enabled, change "Home" to "Home with guests" and give it an icon of multiple people
[ ] Add ZONES support. If within 1 of 5 zones say "At Supermarket" or "At Movie Theater" , at Gym etc. Would have to check whether the state is in a supplied list, not sure how to do that in JS yet?
I want to create incredibly smart context-aware "presence" cards for the my main overview page. The idea being that it displays all relevant data in a clean, space saving way that allows me to see things at a glance without having to click through to more-info cards and such.
These are gonna be made using custom button card since it allows full control of styling with templates and such. It is going to use a combination of attributes/sensors from Life360 and the iOS app along with a few others (Waze travel time, proximity, etc).
Brainstorming:
Showing State:
entity_picturein a circular shape. If the user is home the image would display in full color. If they are away this picture would have a grayscale filter applied over it.Other:
mdi:homein blue (#2196F3)mdi:map-markerprobably in purple (#9C27B0)mdi:carin deep orange (#FF5722)mdi:walkmdi:iconwould be a darker shade, while the circle would be filled in with a lighter shade of the same color for a nice look.Sensor Logic / Issues to Resolve:
{{ states.proximity.home.attributes.dir_of_travel == "towards" }}Home: Battery percentage and status and WiFi status, how long they've been home since.
Away: left home at X / away for X.
Driving: "Driving at 55mph near State Rte 3. 10miles / 8min away." There would be some kind of button / link to open the coordinates in Google Maps street view.
Checklist: