Badge witch custom background image and 'label' (that blue thing that says home or away or something else

HI there

I was looking how to make a custom badge with changeable (see second image) :

  • pictures inside
  • label: that blue little thing under the picture

I wanted to make a badge that monitors certain records in the home-assistant_v2.db file beczuse it grow so rapidly.
In my case it where the changed_state records.
In my configuration.yaml i made for this a sensor:

sensor
  - platform: sql
    db_url: sqlite:////config/home-assistant_v2.db
    queries:
      - name: db record
        query: "SELECT count(*) as count, event_type FROM events where event_type like '%state_changed%';"
        column: 'count'

When you make a standard ‘badge’ it looks like his
image

But i wanted it to look like this:
image

First of i searched the web for e warning, error and good image and placed this in /www/images/entities/

then i made a template sensor based on the previous sql sensor i made (in configuration.yaml):

sensor:
  - platform: template
    sensors:
        database_state:
            friendly_name: Database
            value_template: >
                {{ state_attr('sensor.db_record', 'count') }}
            #unit_of_measurement: 'none'
            entity_picture_template: >
                {% if states('sensor.db_record') | float < 500000 %} /local/images/entities/check.png
                {% elif states('sensor.db_records') | float < 999999 %} /local/images/entities/warning.png
                {% else %} /local/images/entities/error.png
                {% endif %}

I restarted my server but stil the ‘blue label’ didnt work (the # before unit_of_measurement has to be set, if you unset it you wont see the label!!!)

The last part you have to do is install customUI (i know its old, pre lovelace timed but it works!)
With this link look for installation and after that the activation

After you installed it check if it is installed, go to developer tools > info and look if its mentioned:
image

On each step int the isntallation and activation check your config and reboot!!!

Now you can add the last part in configuration.yaml:

homeassistant:
  customize:
    sensor.database_state:
      templates:
        unit_of_measurement: ${entities['sensor.database_state'].state}

reboot server and done you will now have a customised label and background for badges!!!
Left: the old badge, right: the new badge!
image

just so you know, you dont have to reboot the server, or even restart HA, you can simply reload customizations from the /configuration/server controls/reload location & customizations…

i know buth i’m used to it, im always reloading the server where you point it if i make config changes
then you are 100procent shuer they are comitted