area-card-plus

An Area card for your Home Assistant Dashboard

This card is heavily inspired by the default area card and the work of @Dwains.
I always thought the area card has so much more potential so i made my own one.

The card will show all entities/devices grouped into domains or device classes that are linked to your area.
To make sure this card will work like it should please check if your relevant entities are assigned to the correct domain.

Overview

Card Features

• based on default HA area card with more features and customization
• shows toggle domains (the ones on the right) which can be toggled to on/off
• shows alert entities (motion, door, window) next to toggle domains
• shows sensor entities (temperatur, humidity etc.) under the area icon
• shows climate entities under the sensor entities

Popup View

The popup view will show all entities/devices that are assigned to the area. All cards will be shown as a default tile card with some having tile card features enabled.

Customization

Basically everything on the card can be customized/shown/hidden via gui.
Below are some screenshots that show what can be done.

Click to see full options to customize

Change area icon, area icon color, area name & area name color

Choose domain/device to show

Here you can choose which domain/device class will be shown in the card.
Only domains that are assigned to your area can be choosen.
Drag & Drop is supported and will change the order in the card.

Change color of domains/device classes

Here you can change the color for all domains/device classes at once.
Inactive/off domains will still be shown as gray.

Show only active domains for toggle_domains

Customize Features

These will allow you to edit and customize each domain/device class the way you want.

Change tap action, icon or color

Tap action can be choosen between none (nothing happens on click), toggle (click will toggle all entitiies from that domain in your area) or popup (will open popup view for only that domain in your area)
You can select an individual icon & color for each domain if you want

Change card in the popup view

This feature is experimental and YAML only (for now)

Add this code

customization_popup:  
  - type: light                           # change it to the domain you want
    card: |-
      type: custom:mushroom-light-card    # change card type to the card you want
      show_brightness_control: true       # use optional card features (not everything tested)
      show_color_control: true
      show_color_temp_control: true
      use_light_color: true

Changing CSS for some items

You can change most things like icon, name of area and alert/toggle domains (border, color, size etc.)

Installation

HACS

Add this repository via HACS Custom repositories (How to add Custom Repositories)

https://github.com/xBourner/area-card-plus

Settings

All settings are optional. The card should work without setting any parameters in yaml or via GUI.

type: custom:area-card-plus    ### type of the card
area: living-room              ### choose your area 
alert_classes:                 ### choose the alert classes (motion & window are default)
  - motion
  - window
sensor_classes:                ### choose your sensor classes (temperature & humidity are default)
  - temperature
  - humidity
toggle_domains: []             ### choose your toggle_domains (all possible values will be shown at default)
popup_domains:                 ### choose the domains which are shown in popup view (all possible values will be shown at default)
  - person
  - update
  - calendar
columns: 4                     ### how many columns will be shown in popup view
customization_domain: []       ### choose the customization for toggle_domains
customization_alert: []        ### choose the customization for alert_domains
customization_sensor: []       ### choose the customization for sensor_domains

Feedback

Thank you for using my custom cards. Please leave some feedback or a star. If you have any problems, suggestions for improvements or want to connect with me you can joing my discord: https://discord.gg/RfVx7hmZD3