Customise device_tracker

Third party integrations AppDaemon
1

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.

2

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?)

3

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

4

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.

5

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