Change text on status

Configuration
1

I’m sure there is a simple answer,I just cannot find it.

I have an MQTT Device Tracker component;

device_tracker:
  - platform: mqtt
    devices:
      brian : 'presence/brian'

which displays

image

BTW, what are these elements called? If I knew that it may have helped my searching.

I’d like it to say home if the topic is true and away if the topic is false. I have also seen somewhere some code to change the colour of these elements based on the status (but cannot find it again).

Help much appreciated.

2

That element is called a badge.

You can use CustomUI to change it’s colour.

Regarding it’s state of ‘true’ instead of ‘home’, what payload are you sending the mqtt topic? It should be home, away, not_home, etc… Not true or false.

3

Thanks.

Hi @tom_l, I’m aware the component simply displays what is in the topic payload, so I could change the payload, but it may well be easier to simply change what is displayed when the payload is true (I don’t know, hence the question).

Perhaps ultimately, the component itself needs extending to it can accept a payload_on text.

4

The underlying state of a device tracker is either home or not_home (assuming it doesn’t support GPS coordinates). You should update the software publishing to that topic to use those as shown in the docs.

5

Whilst I agree that the documentation here suggests that the state of a device tracker component should be home or not_home (for non GPS trackers) this makes no difference as the MQTT component simply passes through the payload.

If I did change the payload as suggested, I’d rather have ‘away’ displayed when the state is ‘not_home’ on the badge. Is it possible to change the badge text based on the state of the component device?

6

Yu can change the display of State using custom-ui https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/templates.md#special-attributes:

device_tracker.brian:
  templates:
    icon_color: >
      if (state === 'home') return 'rgb(251, 210, 41)';
      return 'rgb(54, 95, 140)';
    _stateDisplay: >
      if (state === 'home') return 'Home';
      return 'Away';

Need to install the custom-ui first: https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/installing.md

have them show anything you like :wink:

06

1 Like
7

Ah, excellent. Just what I was after. Cheers.

8

Which is exactly what I said.

9

@tom_l, sorry, I had not understood you meant that mechanism could be used to change the text as well.

1 Like
10

Hi @Mariusthvdb, How do you change the icons within the badges? Is there a reference somewhere on how to reference all the different parts of the badges?

Cheers

11

havent found a true reference , but you can find a lot of info here: https://github.com/home-assistant/home-assistant-polymer/blob/master/src/components/ha-label-badge.js

using themes (see https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.js) that cover a few of these badge parts:

##########################################################################################
# Badge-themes in order of severity, either up or down
##########################################################################################
#source https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.js

# /* for label-badge */
#    --label-badge-background-color: white;
#    --label-badge-text-color: rgb(76, 76, 76);
#    --label-badge-red: #DF4C1E;

#    --label-badge-blue: #039be5;
#    --label-badge-green: #0DA035;
#    --label-badge-yellow: #f4b400;
#    --label-badge-grey: var(--paper-grey-500);

# not used?
#  label-badge-border-color: green
#  label-badge-label-color: green
#  label-badge-blue: blue
#  label-badge-green: black
#  label-badge-yellow: yellow
#  label-badge-grey: grey

green_badge:
  label-badge-red: green
  label-badge-background-color: white
  label-badge-color: grey
  label-badge-text-color: green

grey_badge:
  label-badge-red: grey
  label-badge-background-color: white
  label-badge-color: black
  label-badge-text-color: grey

black_badge:
  label-badge-red: black
  label-badge-background-color: white
  label-badge-text-color: black

brown_badge:
  label-badge-red: brown
  label-badge-background-color: white
  label-badge-text-color: brown

orange_badge:
  label-badge-red: orange
  label-badge-background-color: white
  label-badge-text-color: orange

blue_badge:
  label-badge-red: blue
  label-badge-background-color: white
  label-badge-text-color: blue

yellow_badge:
  label-badge-red: grey
  label-badge-background-color: yellow
  label-badge-text-color: black

red_badge:
  label-badge-red: grey
  label-badge-background-color: white
  label-badge-text-color: red

purple_badge:
  label-badge-red: purple
  label-badge-background-color: white
  label-badge-text-color: black
  primary-text-color: purple
  secondary-text-color: purple

The icons/entity_pictures I showed are set in my Python script as follows:

    hass.states.set(entity_id, groups_count[idx], {
      'friendly_name': fname,
      'desc' : badges_desc[idx],
      'unit_of_measurement': badge,
      'entity_picture': picture,
      'icon': groups_icon[idx],
      'templates': { 'theme': theme }
    })

but that’s merely a way to show you how, than elf explanatory I would expect… sorry.

You can do it simpler:

11

sensor:
  - platform: template
    sensors:
      espresso_water_level:
        unit_of_measurement: Espresso
        friendly_name_template: >
          {% if states('sensor.espresso_keuken_actueel')|int == 0 %}
            Off
          {% elif 0 < states('sensor.espresso_keuken_actueel')|float < 1 %}
            'Needs refill'
          {% else %}
            Enjoy!
          {% endif %}
        value_template: >
          {% if states('sensor.espresso_keuken_actueel')|int == 0 %}
            Off
          {% elif 0 < states('sensor.espresso_keuken_actueel')|float < 1 %}
            'Needs refill'
          {% else %}
            Enjoy!
          {% endif %}
        entity_picture_template: >
          {% if states('sensor.espresso_keuken_actueel')|int == 0  %}
            /local/buttons/button_power_off.png
          {% elif 0 < states('sensor.espresso_keuken_actueel')|float < 1 %}
            /local/various/watertap.png
          {% else %}
            /local/activities/opstaan.png
          {% endif %}

and

homeassistant:
  customize:
    sensor.espresso_water_level:
      theme: brown_badge
1 Like