Home Assistant Cards

Welcome to my github and some explanations about the interface and cards I build in Home Assistant. For every card i'll explain a bit about the contents and what features are in it. The room cards I use, are custom, but i re-use them throughout the whole interface, you can just place them in Grids or other cards to arrange them. The base for every room is the same card. Just use them in grids, horizontal/vertical stacks, stack-in cards, whatever floats your boat.
The interface you see in the overview is our mobile dashboard, which is also usable for desktop. Every room has a Subview in where you can see all the detailed information or extended features for the entities in that room. I use the subviews, because they also contain a 'back' button by default.
Down here you can see the overview and screenshots of the card, also mentioned which yaml configuration corresponds to that card in this repository.
I will also include a short Guide later, on howto setup your first room card from the basic.

First of all make sure you download the mushroom cards and mushroom themes in hacs. Apply the 'mushroom shadow' theme to the dashboard you copy my cards/code to. This is just my basic theme for a really long time, and I did all styling from that theme.
Next download from hacs the: vertical-stack-in, stack-in, sankey diagram, apexcharts cards.

Overview

Custom made mostly using Mushroom cards and Card Mod
blinking rings: Automations for that entity/area are enabled, no ring means disabled. Double click to toggle.
Animated Icons
Colors and text changing from entities and attributes

Wall Tablet Overview

repository link

https://github.com/kippesikgithub/hass_walltablet
Documentation still has to be updated

Main Overview Cards

Top Chips Current card

Build with custom Mushroom chips, card to show the current situation, most important things. Shows the current outside temperature, the main entrance/exit doors status, current power usage, current solar production, and conditional chip for garbage collection icon.

features

chips icon and color changing based on value: Outside Temperature, Doors, Current power usage, Solar, Garbage Bin notification
chips animated based on value: Solar

filename(s)

top_chips_card_current_overview.yaml

Top Persons card

Build with custom Mushroom chips and custom Mushroom person cards. Simple overview for persons and car, containing location status, status of ble transmitters on phone (for espresense thoughout the home, will be disbaled when you leave the house, enabled when entering the house), status of charging and battery. Double click on the Tesla to pre-heat the car, will show with blinking red when heating.
Clicking on one of the persons, brings up a fully styled popup card with details

filename(s)

top_persons_without_popup.yaml

Popup Cards

Examples: First one 'When Home', second one 'When Not Home', third one for the car.

features

chips icon and color changing based on value: ble transmitter, charging and battery percentage
Fully styled Popup card mod when clicking on the person

filename(s)

top_persons_with_popup.yaml

Top Navigation Button card

Build with custom Mushroom template cards. Just some simple buttons to navigate to subviews with summaries and statistics about Energy, Temperatures, Mediaplayers incl volumes and sources, 3d printing, server management and outside screens. every button navigates to a subview.

features

nothing special, just some color changing and animated icons

filename(s)

top_navigation_buttons.yaml

Top Chips Today card

Build with custom Mushroom chips, card to show the today statistics, most important things. Shows todays energy total (import-export), todays total usage of gas and water and todays total produced sun-energy.

top_chips_today_overview.yaml
chips icon and color changing based on value: Total power usage, gas, water and solar
chips animated based on value: Solar

Woonkamer

Woonkamer Room Card

Room card for the Woonkamer.

features

Color changing Temperature graph in top of card, containing last 24 hours. Current Temperature, Humidity, Illumination of room statusses.
chips icon and color changing based on value: television, motion, particulate matter, robot vacuum.
Navigation to subview from click on card.

filename(s)

woonkamer_room_card.yaml

Woonkamer Subview

filename(s)

subview_woonkamer_detailed_card.yaml
subview_climate_graph_card.yaml

devices in room

Hue Lights
Hue remote dimmers
Hue Motion sensors
Esp32 + LD2410 (mmwave) + DHT22 (temp and humidity + WDR (illumination)
Esp32 + IR transmitter + IR receiver Esp32 + espresense
WLED Esp vuilniswagen (garbage collection light/notifier) https://github.com/kippesikgithub/wled_garbagetruck
Zigbee Wall socket(s) measuring power usage
IRobot Roomba
Lenovo Wall Tablet

Related projects

Esp32 Espresense bluetooth/ble tracking: https://github.com/kippesikgithub/espresense

Keuken

Keuken Room Card

Room card for the Badkamer.

features

Current Temperature and Humidity statusses.
Chips icon and color changing based on value: dishwasher, coffeemachine, window.
Navigation to subview from click on card.

filename(s)

keuken_room_card.yaml

Keuken Subview

filename(s)

subview_keuken_detailed_card.yaml
subview_climate_graph_card.yaml

devices in room

Aqara Zigbee Temperature and Humidity sensor
ESP32 Espresense beacon
ESP32 Based Speaker
Esp32 Espresense Zigbee Wall socket(s) (oven, microwave)
EcoDimm007 Zigbee Dimmer for spots
Shelly Plug-s(s) (Quooker, Dishwasher, Coffemachine)
Aqara Zigbee window sensor

Related projects

Esp32 Espresense bluetooth/ble tracking: https://github.com/kippesikgithub/espresense

Trapkast

Trapkast Room Card

Room card for the Trapkast. Contains a pretty basic version of the roomcard, only displaying the temperature, temperature trend, controlls for the light, and some chips for statusses.

features

Color changing Temperature graph in top of card, containing last 24 hours.
Current Temperature status.
Blinking ring around the light, to show if automations for that entity/room are enbled. Double click on icon to toggle automations (on/off).
Chips icon and color changing based on value: motion, main water usage, floor heating pump, rc wifi car (project: https://github.com/kippesikgithub/esp_rc_car)

filename(s)

trapkast_room_card.yaml

Trapkast Subview

filename(s)

subview_trapkast_detailed_card.yaml
subview_climate_graph_card.yaml

devices in room

Hue light
Wemos D1 + 3 Dallas DS18B20 sensors (measure floor heating pipes)
Wemos D1 + proximity sensor (measure watermeter)
Esp32 + LD2410 (mmwave) + BMP180 (temp and baro) https://github.com/kippesikgithub/esp_motion_mmwave
Zigbee Wall socket for controlling floor heating pump

Hal

Hal Room Card

Room card for the Trapkast. Contains a pretty basic version of the roomcard, only displaying the temperature, temperature trend, controlls for the light, and some chips for statusses.

features

Color changing Temperature graph in top of card, containing last 24 hours.
Current Temperature status.
Blinking ring around the light, to show if automations for that entity/room are enbled. Double click on icon to toggle automations (on/off).
Chips icon and color changing based on value: motion, main water usage, floor heating pump, rc wifi car (project: https://github.com/kippesikgithub/esp_rc_car)

filename(s)

hal_room_card.yaml

Hal Subview

filename(s)

subview_hal_detailed_card.yaml
subview_climate_graph_card.yaml

devices in room

Shelly RGBW2 + 12v Ledstrip behind coat rack
Zigbee Smoke Sensor
Philips Hue Zigbee Motion (+ temp and illumination)

Badkamer

Badkamer Room Card

Room card for the Badkamer.

features

Color changing Temperature and Humidity graph in top of card, containing last 24 hours.
Current Temperature and Humidity statusses.
Blinking ring around the light, to show if automations for that entity/room are enbled. Double click on icon to toggle automations (on/off).
Chips icon and color changing based on value: fan, toothbrushes charging, shower status, window. Navigation to subview from click on card.

filename(s)

badkamer_room_card.yaml

Badkamer Subview

filename(s)

subview_badkamer_detailed_card.yaml
subview_climate_graph_card.yaml

devices in room

Aqara Zigbee Temperature and Humidity sensor
Zigbee Wall socket for controlling charging electric toothbrushes
Shelly 1L for controlling the Fan (based on humidity level)
Toon integration for reading shower/warm water status
Aqara Zigbee window sensor

Kinderkamer Sophie

Kinderkamer Sophie Room Card

Room card for daughters room. Offcourse including princesses, controlls for the led-lighting (desk and unicorn), motion status, controlls for the airconditiong/heating, and temp/humidity/illumination status.

features

Color changing Temperature and Humidity graph in top of card, containing last 24 hours.
Current Temperature, Humidity, Illumination and Power usage of room statusses.
Chips icon and color changing based on value: motion, window, airco.
Navigation to subview from click on card.

filename(s)

kinderkamer_sophie_room_card.yaml

Subview Kinderkamer Sophie

filename(s)

1: subview_kinderkamer_sophie_detailed_card.yaml
2: subview_kinderkamer_sophie_slaapwekker_card.yaml
3: temperatures_climate_card.yaml
4: subview_climate_graph_card.yaml
5: subview_camera_card.yaml
6: subview_energy_distribution_card.yaml

devices in Kinderkamer Sophie

Hue Light
Hue remote dimmer
Esp32 + LD2410 (mmwave) + DHT22 (temp and humidity + WDR (illumination) https://github.com/kippesikgithub/esp_motion_mmwave
Zigbee Wall socket(s) measuring power usage
Mitsubishi Heavy Industries Airco (cooling/heating)
Esp32 WLED Desk ledstrip Esp8266 Sleeptrainer/Slaapwekker (3d print, esp8266, some ws2812b leds) https://github.com/kippesikgithub/esp_kids_nightlight
Wemos D1 mini WLED Unicorn light
Esp32 Somfy RTS for controlling screens
Aqara Zigbee window sensor

Related Projects

WLED Kids Nightlight / Sleeptrainer: https://github.com/kippesikgithub/esp_kids_nightlight

Kinderkamer Lucas

Kinderkamer Lucas Room Card

Room card for sons room. Offcourse including babyicons, controlls for the led-lighting (commode), motion status, controlls for the airconditiong/heating, and temp/humidity/illumination status.

features

Color changing Temperature and Humidity graph in top of card, containing last 24 hours. Current Temperature, Humidity, Illumination and Power usage of room statusses.
chips icon and color changing based on value: motion, window, airco.
Navigation to subview from click on card.

filename(s)

kinderkamer_lucas_room_card.yaml

Subview Kinderkamer Lucas

filename(s)

1: subview_kinderkamer_lucas_detailed_card.yaml
2: temperatures_climate_card.yaml
4: subview_climate_graph_card.yaml
5: subview_camera_card.yaml
6: subview_energy_distribution_card.yaml

devices in room

Hue Light
Hue remote dimmer
Esp32 + LD2410 (mmwave) + DHT22 (temp and humidity + WDR (illumination) https://github.com/kippesikgithub/esp_motion_mmwave
Zigbee Wall socket(s) measuring power usage
Mitsubishi Heavy Industries Airco (cooling/heating)
Esp32 WLED Commode ledstrip
Aqara Zigbee window sensor

Overloop1 & Overloop2

Overloop Room Card

Room card for the Overloop on floor 1 and 2.

features

Current Temperature and Humidity statusses.
Chips icon and color changing based on value: dishwasher, coffeemachine, window.
Navigation to subview from click on card.

filename(s)

overloop1_room_card.yaml
overloop2_room_card.yaml

Overloop Subview

filename(s)

subview_overloop1_detailed_card.yaml
subview_overloop2_detailed_card.yaml
subview_climate_graph_card.yaml

devices in room

Hue Light
Hue Remote Dimmer
Philips Hue Zigbee Motion (+ temp and illumination)
Kaku ZSDR-850 Zigbee Smoke Sensors

Washok

Washok Room Card

Room card for the Washok.

features

Color changing Temperature graph in top of card, containing last 24 hours. Current Temperature, Illumination of room statusses.
Blinking ring around the light, to show if automations for that entity/room are enbled. Double click on icon to toggle automations (on/off).
chips icon and color changing based on value: motion, washing machine, dryer, window.
Navigation to subview from click on card.

filename(s)

washok_room_card.yaml

Washok Subview

devices in room

Hue Light
Hue Motion sensors
Esp32 + LD2410 (mmwave) + DHT22 (temp and humidity + WDR (illumination)
Shelly 1PM Power measuring (washing machine, dryer)
Zigbee Wall socket(s) measuring power usage
Aqara Zigbee window sensor

Related projects

How to monitor washing machine and tumble dryer state with powerplug/shelly: https://github.com/kippesikgithub/hass_washing_dryer

Subview Energy (navigation from Top Button card)

Overview Electricity per room

Visualised with Sankey Diagram.

repository link

https://github.com/kippesikgithub/hass_detailed_power_monitoring

Current Devices status

Visualised with Mushroom Chips. Which devices are on and using power. Visualised with colored/animated icons.

filename(s)

energy_current_devices_status_card.yaml

Netto Electricity per day, last3 days

Visualised in Apexcharts. Import electricity from net - exported electricity to net, per day-start, start at 0 (utility meter helper).

filename(s)

energy_electricity_netto_last_week_card.yaml

Electricity In per day, last week

Visualised in Apexcharts. Total Electricity import per day from last week

filename(s)

energy_electricity_in_last_week_card.yaml

Electricity Out per day, last week

Visualised in Apexcharts. Total Electricity export per day from last week

filename(s)

energy_electricity_out_last_week_card.yaml

Gas per day, last week

Visualised in Apexcharts. Gas usage last week, per day. Color changing bars based on values.

filename(s)

energy_gas_last_week_card.yaml

Water per day, last week

Visualised in Apexcharts. Water usage last week, per day. Color changing bars based on values.

filename(s)

energy_water_last_week_card.yaml

Gas vs Outside temperature per day, last week

Visualised in Apexcharts. Gas usage vs outside temperature last week, per day. Color changing bars based on values.

filename(s)

energy_gas_vs_temp_last_week_card.yaml

Solar Production today vs yesterday vs prediction

Visualised in Apexcharts. Solar production today's current vs yesterday's current same time vs prediction last week, per day. Color changing bars based on values, including upcoming sunset, sunrise lines.

filename(s)

energy_solar_today_vs_yesterday_vs_prediction_card.yaml

Solar Production today vs predicction

Visualised in Apexcharts. Solar production today vs prediction. Color changing bars based on values, including upcoming sunset, sunrise lines.

filename(s)

energy_solar_today_vs_prediction_card.yaml

Subview Audio (navigation from Top Button card)

TV and Audio Card

Visualised using Mushroom template and Mushroom chips cards. Current status of tv/audio related devices, buttons for controll and color changing icons based on TV/Audio sources and power usage.

filename(s)

multimedia_tv_audio_controll_card.yaml

Mediaplayer Card

Visualised using Mushroom Mediaplayer and Mushroom chips cards.

filename(s)

multimedia_mediaplayer_card.yaml

Subview Temperatures (navigation from Top Button card)

Airco Card

Visualised using Mushroom climate card. Color changing and animated icons.

filename(s)

temperatures_climate_card.yaml

Subview Screens

Visualised using the Mushroom cards.

filename(s)

screens_card.yaml

Outside Projects

ESP Butterfly House

Butterfly House supplying data from a temp/baro sensor, solar panel and 2x 18650 cells, completely self sufficient.

filename(s)

vlinderhuis_room_card.yaml

ESP Pump House

Pump House supplying data from a temp/baro, illuminance sensors a waterpump for plants, solar panel and 2x 18650 cells, completely self sufficient.

filename(s)

pomphuis_room_card.yaml