Mushroom chips card with badge

Hello all,
I’d like to create a mushroom chip card that encloses all update notifications and that gives me a badge with the number of these notifications.
Is that possible?

yes it’s possible. but you’ll need to research the update notification part.
you can modify my example with lights on

type: custom:mushroom-chips-card
chips:
  - type: template
    card_mod:
      style: |
        ha-card {
         
          box-shadow: none;
          ha-card-border-width: 0px;
        }
        ha-card:after {
          content: "{{ expand(states.light.lights_off) | selectattr( 'state', 'eq', 'on') | list | count }}";
          position: absolute;
          top: -10%;
          right: 60%;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 14px;
          height: 14px;
          font-size: 9px;
          font-weight: 700;
          border-radius: 50%;
          background: rgb(var(--rgb-orange));
          color: var(--card-background-color);
        }
    entity: light.lights_off
    content: Lights on
    icon: mdi:lightbulb
    icon_color: amber

1000009883

1 Like

That’s awesome and I’ll surely use it.
Now the difficult is to enclose all the update notifications into only one in order to get the count of them in the badge.

I think this should do it:

{{ states.update
    | selectattr('state', 'eq', 'on')
    | list | count | default(0) }}

Ok, I put this in ha-card section in content entry, but as entity what should I use?
I tried to create a group of updates but it seems there’s no options for this.

I tried to create something like this in templates.yaml:

binary_sensor:
  - platform: template
    sensors:
      ha_update_on:
        friendly_name: "Home Assistant Updates"
        device_class: update
        value_template: >
          {{ is_state('update.home_assistant_operating_system_update', 'on') or
             is_state('update.home_assistant_core_update', 'on') or
             is_state('update.home_assistant_supervisor_update', 'on') }}

but I get the following error:

Invalid config for ‘template’ at templates.yaml, line 198: ‘platform’ is an invalid option for ‘template’, check: binary_sensor->0->platform Invalid config for ‘template’ at templates.yaml, line 198: required key ‘state’ not provided Invalid config for ‘template’ at templates.yaml, line 199: ‘sensors’ is an invalid option for ‘template’, check: binary_sensor->0->sensors

You’re using the old format for templates - the new format is here. It’s much easier now to just create a template helper (under Settings > Devices & Services > Helpers).

Alternatively you could just put it in the content section of a mushroom chips card - there’s no need to use an entity for this type.

Actually the code I used in templates.yaml is the following:

ha_system_updates:
        friendly_name: 'Update di sistema di HA'
        icon_template: mdi:home-assistant
        value_template: >
          {{ is_state('update.home_assistant_operating_system_update', 'on') or
             is_state('update.home_assistant_core_update', 'on') or
             is_state('update.home_assistant_supervisor_update', 'on') }}

Is it now the new format?
Anyway, today I got a new notification for an integration and the card gives me a “1”, even if it wasn’t anyone of the three types of update.

In the card I use this code:

type: custom:mushroom-chips-card
chips:
  - type: template
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          ha-card-border-width: 0px;
        }
        ha-card:after {
          content: "{{ states.update | selectattr('state', 'eq', 'on')| list | count | default(0) }}";
          position:absolute;
          top: -10%;
          right: -10%;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 14px;
          height: 14px;
          font-size: 9px;
          font-weight: 700;
          border-radius: 50%;
          background: rgb(var(--rgb-orange));
          color: var(--card-background-color);
        }
    entity: sensor.ha_system_updates
    icon: mdi:home-assistant
    icon_color: cyan

I tried to look for among the helpers, but I didn’t find anything with which I could group the 3 entities of updates.