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 :-)