Customise device_tracker

I have setup google travel time in my home assistant, and would like to customise the device_tracker widget in AppDaemon to show the travel time when our devices are not at home, but I’ve no idea where to start.

Any pointers would be great, thanks.

if you really want that to be 1 widget then you need to create your own widget.
but for that you need to be able to program in javascript, HTML and css

i guideline how to create your own widget is here in the docs:
http://appdaemon.readthedocs.io/en/latest/WIDGETDEV.html

if you can except 2 widgets then you can use the sensor widget to show an attribute from an entity (and i guess the travel time is an attribute from your devicetracker?)

Great thanks for the start, I’m fine with the coding.

So I took the default “device_tracker.yaml” and the “baseswitch” as my starting point from github. I utilised the space normally used by title2 to show “x mins”, and it works a treat, except for the icon.

A widget that uses the standard device_tracker, like so:

widget_type: device_tracker
title: John
device: john_smith
icon_on: fa-male
icon_off : fa-male

When John is at home, the icon is green, and when not_home it’s white. However with my custom_widget the icon never changes colour.

The code is here:
Device Tracker With ETA

you did everything right.
but you created a custom sensor. and the default values are now not set in you skin.
so you need to add the variables you created in the yaml file

icons:
  icon_on: $device_tracker_with_eta_icon_on
  icon_off: $device_tracker_with_eta_icon_off
static_icons: []
css:
  icon_style_active: $device_tracker_with_eta_icon_style_active 
  icon_style_inactive: $device_tracker_with_eta_icon_style_inactive 
static_css:
  title_style: $device_tracker_with_eta_title_style
  driving_time_style: $device_tracker_with_eta_driving_time_style
  state_text_style: $device_tracker_with_eta_state_text_style
  widget_style: $device_tracker_with_eta_widget_style

those on the right side, to variables.yaml in the skin you use.
when you dont use a skin then you need to add them to the default skin.

Awesome, thanks. I just changed the styles back to the standard device_tracker styles:

icons:
  icon_on: $device_tracker_icon_on
  icon_off: $device_tracker_icon_off
static_icons: []
css:
  icon_style_active: $device_tracker_icon_style_active 
  icon_style_inactive: $device_tracker_icon_style_inactive 
static_css:
  title_style: $device_tracker_title_style
  driving_time_style: $device_tracker_title2_style
  state_text_style: $device_tracker_state_text_style
  widget_style: $device_tracker_widget_style
1 Like