Conditional badge at all possible?

Configuration
1

Hi,

A badge user myself, I find myself confronted with the odd 24 when the entity_id isn’t yet available.

We can create conditional cards/maps/etc for most of the available situations, but I havent been able to find a way to do this:

title: Developer
path: developer
icon: mdi:remote-desktop
theme: matrix
badges:
  - sensor.orphans_badge
  - sensor.ghosts_badge
cards:

  - !include /config/lovelace/tiles/tiles_mode_selection.yaml

and have the badges only show if and when they exist. Hope anyone of you did…

please have a look? thanks.

2 Likes
2

Bump!

Definitely see a use for conditional badges! Looks like this was originally asked about a year ago - any update or ideas since then?

1 Like
3

I have one! My 3D printer badge only shows if it’s active, and goes green when finished and cooled down enough to remove:

image

You need to install card-mod first, then it’s as simple as:

      - entity: sensor.octoprint_job_percentage
        name: 3D print
        tap_action:
          action: navigate
          navigation_path: /lovelace/print
        style: |
          :host {
            display: {% if states('sensor.octoprint_job_percentage')|int == 0 %}none{% else %}inline-block{% endif %};
            --label-badge-background-color: {% if states('sensor.octoprint_actual_bed_temp')|float > 30 %} orange {% else %} green {% endif %};
            --label-badge-text-color: black;
          }
3 Likes
4

which is a nice ‘Mod’ indeed. Still a core conditional would be preferred.

For now, this might be much more configurable than a Core conditional would ever be, given the templating functionality card-mod offers :wink:

1 Like
5

I have a picture-elements card with multiple state badges on top of it.
I want to make them conditional and I figured with the solution that @Troon posted this would be possible. But I can’t get it to work. Is this solution also possible for a picture-elements card ?

6

It ought to be. Please confirm that you have installed card-mod, and that it works for you on “normal” cards — and share the code you’ve used for your picture-elements card.

I’ve expanded my 3D print version to show percentage completed whilst printing, then bed temperature when finished. It’s actually two badges but only one appears at a time:

      - entity: sensor.octoprint_job_percentage
        name: 3D print
        tap_action:
          action: navigate
          navigation_path: /lovelace/print
        style: |
          :host {
            display: {% if states('sensor.octoprint_job_percentage')|int == 0 or states('sensor.octoprint_job_percentage')|int == 100 %}none{% else %}inline-block{% endif %};
          }  
      - entity: sensor.octoprint_actual_bed_temp
        name: 3D print
        tap_action:
          action: navigate
          navigation_path: /lovelace/print
        style: |
          :host {
            display: {% if states('sensor.octoprint_job_percentage')|int < 100 %}none{% else %}inline-block{% endif %};
            --label-badge-background-color: {% if states('sensor.octoprint_actual_bed_temp')|float > 28 %} orange {% else %} #99ff99 {% endif %};
            --label-badge-text-color: black;
          }
7

havent yet experimented with this, but what would happen if we only declare the None case:

card_mod:
  style: |
    :host {
           display: {% if states('sensor.octoprint_job_percentage')|int < 100 %}none{%endif%}
    }

normally I ‘guard’ all my templates, but have seen many of these card-mods without, and they seem not to hurt, and fallback to the default for the templates parameter if the ‘if’ isnt met?

in my case I would be needing something like:

card_mod:
  style: |
    :host {
           display: {% if entity.state is none %}none{%endif%}
    }

to use it on many cards…
posted a related issue 🔹 Card-mod - Add css styles to any lovelace card - #1927 by Mariusthvdb

8

I don’t know what would happen if you include a display: key with no value against it. Only one way to find out…

9

yes, Ive done that, and it works just fine :wink: see the linked thread

now how to solve the if config.entity is none challenge, because that’s what made me create this post in the first place …
feel this might even be a bug? All my config.entity or derived attributes work perfectly, but can’t make this happen. Filed an issue to hear from the master 'if config.entity is none' template doesn't work · Issue #134 · thomasloven/lovelace-card-mod · GitHub

10

Thanks. I tried your code in the most basic form, but unfortunately it doesn’t work in my case.
This is what my card looks like:

elements:
  - entity: sensor.rotterdam_precipitation
    style: |
      :host {
        display: {% if states('sensor.rotterdam_precipitation')|int == 0%}none{% else %}inline-block{% endif %};
      }  
    type: state-badge
image: /local/tuin.png
type: picture-elements

I’m also experiencing my regular state badges of persons to be just round with the picture in it while loading and after the page has finished loading they convert to a weird rectangle form. This only occurs when I have card-mod installed. If I remove it (via hacs) this is gone.

11

Why are you not using an entity filter to hide the sensor?

See Badges - Home Assistant

12

I use the var(–xxxxx) priciple.

for example:

type: picture-elements
image: /local/jdi_custom_images/floorplans/transparent.png
tap_action: none
hold_action: none
style: |
  ha-card {
    {% if is_state('cover.rfy_1', 'open') %}
    --rfy_1-state-color: green;
    {% else %}
    --rfy_1-state-color: black;
    {% endif %}
    
    {% if is_state('person.robbe', 'home') %}
    --is-robbe-home: inline-block;
    {% else %}
    --is-robbe-home: none;
    {% endif %}
  }
elements:
  - type: state-badge
    title: null
    entity: cover.rfy_1
    style:
      top: 32.7%
      left: 93.6%
      font-size: 0.75vw
      '--label-badge-green': transparent
      '--label-badge-red': var(--rfy_1-state-color)
      '--ha-label-badge-title-font-size': 0em
      '--label-badge-text-color': transparent
      '--label-badge-background-color': transparent
  - type: state-badge
    entity: person.robbe
    style:
      top: 25.2%
      left: 91.7%
      '--mdc-icon-size': 2vw
      display: var(--is-robbe-home)