Show specific notices with cards easily in your dashboard

Share your Projects! Dashboards & Frontend
1

Hello everyone, I am new to the community. Please tell me if I create the post in a incorrect section/ missing anything/ any duplications. Thanks.

Recently I have created a Notice section in my dashboard. I would like to extend this section easily in the future, that I don’t need to have duplicated logic in the dashboard and the virtual sensors, etc. Also I want to dynamically show the notice cards only when certain conditions are fulfilled.

Here is the result of what I have done.

notices demo
notices demo1136Ă—1380 72.6 KB

The yaml structure is as simple as a vertical stack containing “Notices” title plus plenty of built-in conditional cards.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    subtitle: Notices
  - type: conditional
    conditions:
      - ...
    card:
      ...
  - type: conditional
    conditions:
      - ...
    card:
      ...

I did a tiny CSS hack for hiding the title when there is no siblings. This pseudo selector :has() is fairly new and some browser might not support. Please confirm your usage before using it.

/* It hides the mushroom-title-card if no non-hidden siblings.
 *
 * ~ hui-conditional-card:not([style*="display: none"])
 * => any siblings who are not hidden
 *
 * :not(:has(~ hui-conditional-card:not([style*="display: none"])))
 * => don't have any sibling who are not hidden
 */
mushroom-title-card:not(:has(~ hui-conditional-card:not([style*="display: none"]))) {
  display: none;
}

I have upload the whole settings in this GitHub repository. home-assistant-blueprints/dashboard/notices at main · hlchanad/home-assistant-blueprints · GitHub

1 Like
2

Just to understand: which notifications are these? The built-in persistent notifications?

3

Thanks for replying. I didn’t mean the built-in persistent notifications of Home Assistant, but some cards on the dashboard which “notify” me when certain conditions is fulfilled. They are basically the built-in conditional card.

4

Right, so more like a notice than a notification.

1 Like
5

Right! This better suits the nature. I will update the wordings. Thank you.

1 Like
6

Notifications or notices are one underestimated feature of HA. :slight_smile:

@ccpk1 did something similar, I use it as the basis for the system I implemented for myself.

Take a look here, maybe you can find some inspiration for your own implementation.

One thing I’d note though: I wouldn’t work with conditional cards in the frontend, rather with auto-entities. That moves the “logic” into the backend, and you can use this logic in all places you want. Eg. in your case, you have the conditional logic in a frontend card. If you want that code shown in another place, you have to duplicate the logic. :slight_smile:

1 Like
7

LGTM i have sth similar too, super useful.

1 Like
8

Yes!! I wanted to prevent duplicated codes, so I hack the css to hide the title XD. Thanks for the recommendations. I will have a look of auto-entities.

9

If you want to have less duplication in your frontend, alerts are a wonderful way. Combine them with some nice binary_sensors and you have a great information system for your house.

This is an excerpt of one of my alerts:

# config/packages/alerts.yaml
input_boolean:
  lampe_berger_on_fire_notify:
    name: Lampe Berger is on fire
    icon: mdi:alert
  lampe_berger_on_fire:
    name: Lampe Berger on fire
    icon: mdi:fire

template:
  - binary_sensor:
      - name: lampe_berger_on_fire_alert_active
        state: "{{ is_state('input_boolean.lampe_berger_on_fire', 'on') and is_state('input_boolean.lampe_berger_on_fire_notify', 'on') }}"
        delay_on: '00:20:00'

alert:
  lampe_berger_on_fire_critical_alert_active:
    name: lampe_berger_on_fire_critical_alert_active
    entity_id: binary_sensor.lampe_berger_on_fire_alert_active
    state: 'on'
    repeat: 
      - 3
    can_acknowledge: false
    skip_first: false
    title: "Critical warning"
    message: "Lampe Berger is still on!"
    notifiers:
      - NOTIFY_critical
    data:
      tag: lampe_berger
    done_message: clear_notification

notify:
  - name: NOTIFY_critical
    platform: group
    services:
      - service: mobile_app_s
      - service: mobile_app_p
      - service: notification_tv
        data:
          data:
            duration: 10
            fontsize: medium
            position: center
            color: grey
            transparency: 0%

And this is, how it is used in the frontend with auto-entities:

type: vertical-stack
cards:
  - type: custom:auto-entities
    show_empty: false
    card:
      type: entities
      title: Active, critical warning
      card_mod:
        style: |
          ha-card {
            background-color: rgba(251,13,13,1);
            border-radius: 5px;
            --primary-color: white;
            --paper-item-icon-color: white;
            --secondary-text-color: white;
          }
    filter:
      include:
        - entity_id: /^alert(.).*_critical_alert_active/
          options:
            secondary_info: last-changed
      exclude:
        - state: 'off'
        - state: idle
    sort:
      method: last_changed
      reverse: true

I hope, this helps a little in understanding the underlying logic I used. Maybe some things are adaptable for you. :slight_smile:

2 Likes