Device Tracker Badge with custom input

Configuration
1

I use groups to combine multiple device trackers. How would I create a badge with a picture and the small “away”, “home” message. Is there a tracker that allows an input state? Is there a template that I can use, so a sensor looks like a device tracker badge?

edit: I probably have to use state cards: https://home-assistant.io/developers/frontend_add_card/ But there isn’t an example I can see how to do that…

2

I’m also trying to figure this out.

3

You can do this by adding a picture under customize using entity_picture

eg

switch.wemo_switch_1:
   friendly_name: Toaster
   entity_picture: /local/toaster.jpg
4

Yes, but then there isn’t a label. How would I add the ‘home’ and ‘away’? I think I could misuse unit_of_measurement, but I don’t think that supports template

5

In your known_devices.yaml file you need to have track: yes and hide_if_away: no configured then in your group.yaml file under view you add the devices that you want to track

Here is my 1st page view for example

  default_view:
    view: yes
    icon: mdi:home-assistant
    entities:
      - group.family
      - group.living_room
      - group.conservatory
      - group.bedroom
      - group.utility_room
      - group.garage
      - group.nest
      - group.webcam
      - camera.webcam

I have my family in a group so that they show up in group.family

####Groups####
  Family:
    - device_tracker.Alex
    - device_tracker.Cerys
    - device_tracker.Neil
    - device_tracker.Julie
1 Like
6

Yes, but that doesn’t generate a badge with name: Family and label: Home/Away. That just creates a group with home/away as the state.
badges

7

You need to paste your config so I can see how you are set up. Once your code is placed highlight it all and click on </> so that it formats correctly.

In my customize.yaml I have the following set up for my children - you could use the friendly_name: option to add the text you want

group.alex:
   entity_picture: /local/alex.jpg
   friendly_name: 'Alex'
group.cerys:
   entity_picture: /local/cerys.jpeg
   friendly_name: 'Cerys'

I have a wifi extender upstairs and when they are on that I get a different MAC address from them so I have to place both their MAC addresses into a group

Family:
  - device_tracker.Alex
  - device_tracker.Alex_
  - device_tracker.Cerys
  - device_tracker.Cerys_
8

Not sure if you are still interested, but I just figured out a way to do this. You can create this by using MQTT device tracker component. Set up MQTT first and then add the following to your config.

device_tracker:
    - platform: mqtt
        devices:
          paul: 'location/paul'
          theresa: 'location/theresa'

This will create a tracker that allows you to set state with a “home”, “away” message in the red box and you can add a picture in the known_devices.yaml file.

And your automation will look something like this:

- alias: location_paul_home
  trigger:
      - condition: state
        entity_id: 'device_tracker.pauliphone'
        state: 'home'
      - condition: state
        entity_id: 'device_tracker.paulS8'
        state: 'home'
  action:
    service: mqtt.publish
    data: {"payload": "Home", "topic": "location/paul"}

Hope it helps.

1 Like
9
10

This is brilliant. And it solves a long standing problem I have with having to use multiple sources to track a device (ping and router probe). I hid the sub trackers so that the MQTT tracker is the one visible in the GUI. Also the you need 2 automation scripts, an OR script to enable the MQTT badge on any home event, and an off scripts with two conditions . The off script is basically an OR event trigger with an AND condition to say if a tracker is not_home and the other trackers condition is also not_home, send a not_home event to the MQTT badge.

Also, check out Custom UI. This allows you to colour code the badges. Using this my badges are green if home, red if not.

I add this to my frontend.yaml:

extra_html_url:
-/local/custom_ui/state-card-custom-ui.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
themes:
motion_badge:
#primary-text-color: ‘#bf1b00’
#label-badge-red: ‘#bf1b00’
#label-badge-border-color: ‘#bf1b00’
#label-badge-text-color: ‘#bf1b00’
#ha-label-badge-color: ‘#bf1b00’
#ha-state-label-badge: ‘#bf1b00’
#icon: mdi:fast-run
#label-badge-background-color: purple
label-badge-blue: ‘#bf1b00’
nomotion_badge:
#primary-text-color: ‘#91D3F4’
#label-badge-red: ‘#91D3F4’
#label-badge-border-color: ‘#91D3F4’
#label-badge-text-color: ‘#91D3F4’
icon: mdi:walk
home_badge:
primary-text-color: ‘#629e51’
label-badge-red: ‘#629e51’
away_badge:
primary-text-color: ‘#DF4C1E’
label-badge-red: ‘#DF4C1E’

Then I add this to customize_glob.yaml to change all badges:

“binary_sensor.motion_":
templates:
theme: >
if (state === ‘on’) return ‘motion_badge’; else return ‘nomotion_badge’;
"device_tracker.”:
custom_ui_state_card: state-card-custom_ui
templates:
theme: >
if (state === ‘home’) return ‘home_badge’; else return ‘away_badge’;