[MainUI] Customisation of location-card badges

Seen there are a couple of questions in different threads about how i.e. lock or blinds badge could be reversed and since this feature is not (well) documented, would like to share some details here.

From 3.1.0.M3 on, there is a way to influence how badges are displayed and when - for example:

Living Room, 3 blinds, 2 closed - default configuration:

image

If we want to see blind’s badge when position > 0 (so invert the badge) we can write

config:
  label: Home Page
locations:
  - component: oh-locations-tab
    config:
      cardOrder:
       ...
      excludedCards: []
    slots:
      gGF_Living:
        - component: oh-location-card
          config:
            badges:
              blinds:
                expression: Number.parseInt(state) > 0          

result

image

We can override icon too

        - component: oh-location-card
          config:
            badges:
              blinds:
                expression: Number.parseInt(state) > 0       
                badge:
                  icon: f7:logo_windows

image

Badges can be overridden per card (as above example) or for all cards

config:
  label: Home Page
locations:
  - component: oh-locations-tab
    config:
      badges:
        blinds:
          badge:
            icon: f7:logo_windows
          expression: Number.parseInt(state) > 0

If both are specified, per-card definition takes precedence.

All badges can be overridden, i.e. both lights&blinds

config:
  label: Home Page
locations:
  - component: oh-locations-tab
    config:
      badges:
        blinds:
          expression: Number.parseInt(state) > 0
        lights:
          badge:
            icon: f7:sun_max

result

image

The following badges could be overriden:

  • alarms,
  • lights,
  • windows,
  • doors,
  • garagedoors,
  • blinds,
  • presence,
  • lock,
  • climate,
  • screens,
  • projectors,
  • speakers.

Their respective default configs can be found here.

Hope someone will find this helpful :slight_smile:

14 Likes

Please make sure your indention is correct … and you have 3.1.0.M3 or latter.

locations:
  - component: oh-locations-tab
    config:
      badges:
        presence:
          badge:
            icon: f7:house

Thanks for the tutorial! I’ve moved it to a category where it should be easier to find.

2 Likes

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.