Dashboard Area (status bar)

[detlefh68]

Hi,

great work!

I have a question, can you explain how you created this part of your dashboard?

Thank you
detlefh68

[Anashost]

Sure, i call this section the status bar.
So basically all what you need to do is:

• Create zones: Contact Sonsors & PIR Sensors, and add your sensors to them.
• creating groups and counters for your cantact and pir sensors.
• delete or add sections that you want in the status bar.

groups examples

pir_sensors:
    name: pir sensors
    entities:
    - binary_sensor.bath_occupancy
    - binary_sensor.wc_occupancy
    - binary_sensor.door_occupancy 
    - binary_sensor.kitchen_occupancy

contact_sensors:
    name: contact sensors
    entities:
    - binary_sensor.gate_contact
    - binary_sensor.door_contact
    - binary_sensor.balcony_contact

counters examples

#pir sensors of count
  - platform: template
    sensors:
      pir_of_count:
        friendly_name: 'PIR sensors of count'
        unique_id: pir_of_count
        value_template: >
          {{ (expand(area_entities('PIR Sensors'))
            | selectattr('domain', 'in', ['binary_sensor'])
            | selectattr('state', 'in', ['on'])
            | rejectattr('object_id', 'search', 'cloud')
            | list | count)
          }}

#contact sensors of count
  - platform: template
    sensors:
      contact_of_count:
        friendly_name: 'contact sensors of count'
        unique_id: contact_of_count
        value_template: >
          {{ (expand(area_entities('Contact Sensors'))
            | selectattr('domain', 'in', ['binary_sensor'])
            | selectattr('state', 'in', ['on'])
            | rejectattr('object_id', 'search', 'cloud')
            | list | count)
          }}

status bar yaml

type: custom:stack-in-card
mode: vertical
keep:
  outer_padding: false
  margin: false
  box_shadow: false
  background: false
cards:
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
         --chip-font-size: 0.3em;
         --chip-icon-size: 0.45em;
         --chip-border-width: 0;
         --chip-box-shadow: none;
         --chip-background: none;
         --chip-border: none;
         --chip-spacing: none;
         --chip-font-weight: bold;
            }
    chips:
      - type: template
        entity: alarm_control_panel.unlock_camera
        icon_color: |-
          {% if is_state('alarm_control_panel.unlock_camera','disarmed') %}
            red
          {% else %}
            green
          {% endif %}
        icon: |-
          {% if is_state('alarm_control_panel.unlock_camera','disarmed') %}
            mdi:camera-lock-open
          {% else %}
            mdi:camera-lock
          {% endif %}
        name: ''
        use_entity_picture: true
        hold_action:
          action: none
        double_tap_action:
          action: none
        tap_action:
          action: none
      - type: template
        entity: group.pir_sensors
        icon: mdi:motion-sensor
        content: |-
          {% if is_state('sensor.pir_of_count','0') %}
          {% else %}
            {{states('sensor.pir_of_count')}}
          {% endif %}
        icon_color: |-
          {% set state = states('sensor.pir_of_count')|float %}
          {% if state <= 0 %} green
          {% else %} red
          {% endif %}
        hold_action:
          action: none
        tap_action:
          action: more-info
        double_tap_action:
          action: none
      - type: template
        entity: group.contact_sensors
        icon: mdi:leak
        content: |-
          {% if is_state('sensor.contact_of_count','0') %}
          {% else %}
            {{states('sensor.contact_of_count')}}
          {% endif %}
        icon_color: |-
          {% set state = states('sensor.contact_of_count')|float %}
          {% if state <= 0 %} green
          {% else %} red
          {% endif %}
        hold_action:
          action: none
        tap_action:
          action: more-info
        double_tap_action:
          action: none
      - type: template
        entity: binary_sensor.contact_front_door_contact
        icon_color: |-
          {% if is_state('binary_sensor.contact_front_door_contact','off') %}
            green
          {% elif is_state('binary_sensor.contact_front_door_contact','on') %}
            red
          {% else %}
            red
          {% endif %}
        icon: |-
          {% if is_state('binary_sensor.contact_front_door_contact','off') %}
            mdi:door-closed-lock
          {% elif is_state('binary_sensor.contact_front_door_contact','on') %}
            mdi:door-open
          {% else %}
            mdi:progress-question
          {% endif %}
        name: ''
        use_entity_picture: true
        hold_action:
          action: none
        double_tap_action:
          action: none
        tap_action:
          action: more-info
      - type: template
        entity: input_boolean.arming
        icon_color: |-
          {% if is_state('alarm_control_panel.home_alarm','disarmed') %}
            grey
          {% elif is_state('alarm_control_panel.home_alarm','armed_away') %}
            green
            {% else %} yellow
          {% endif %}
        icon: mdi:shield-home
        use_entity_picture: true
        hold_action:
          action: none
        content: ''
        tap_action:
          action: navigate
          navigation_path: arm
    alignment: center

[detlefh68]

Wow, thank you for the very fast answer!

I'll try to understand the code.

While watching your YouTube video, I saw on the room cards, that you can show and hide the mini-graph-cards. Can you tell how it works?

[Anashost]

No worries,
Use a chip card as a toggle, that toggles an input_boolean that you create from helpers. Then put the mini-graph-cards inside a conditional card that appear and disappear based of the input_boolean state (on/off).

[detlefh68]

That listen not to difficult. I will try to use it.

Thanks for your help :-)