Showing preview only (727K chars total). Download the full file or copy to clipboard to get everything.
Repository: ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard
Branch: main
Commit: 5e9347ebb548
Files: 30
Total size: 704.3 KB
Directory structure:
gitextract_boadwwef/
├── .github/
│ └── FUNDING.yml
├── LICENSE
├── README.md
├── assets/
│ ├── Calendar Page - Day offset 0 example
│ ├── Camera Page - Example
│ ├── Curtain Card Example
│ ├── Hue Page - Room Selector
│ ├── Hue Page - Scene Example
│ ├── Irrigation Page - Backyard Example
│ ├── Lock Card Example
│ ├── Notification Page - Timers
│ ├── Notification Page - Weather Tab
│ ├── Overview Page - Alarmo & Notificaton Chip
│ ├── Overview Page - Calendar
│ ├── Overview Page - Climate, Toggles, Irrigation, Hue Scene Tabs
│ ├── Overview Page - Live Camera Feeds
│ ├── Overview Page - Media Card
│ ├── Overview Page - Room Cards
│ ├── Overview Page - Weather Forecast
│ ├── Overview Page - greeting
│ ├── Scene Card Example
│ ├── Server Page - Battery Overview
│ ├── Server Page - Proxmox and HAOS overview
│ ├── asset_placeholder
│ └── streamline_templates collection
├── dashboard.yaml
├── template sensor/
│ ├── Active Notiifcation Count Sensor
│ ├── Get Forecast Template Sensor
│ └── Weather Condition Icon Sensor
└── wallpaper/
└── wallpaper_placeholder
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/FUNDING.yml
================================================
ko_fi: ElementZoom
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2025 Rey
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Material-Design-3-Dynamic-Tablet-Dashboard
A modern Home Assistant dashboard built on Material Design 3 (MD3) principles, featuring dynamic colors, transparent and adaptive card layouts, and a sleek, clean UI for an elegant smart home experience.
This comprehensive dashboard unifies control and monitoring for **lights, switches, temperature and humidity sensors, rainfall, wind, UV index, radar, weather forecasts, alarms, Hue scenes, cameras, heat pumps, door and window sensors, and irrigation control** - all presented in one cohesive, visually refined interface designed for both functionality and aesthetic harmony.
[_v.6.0.0_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Mobile-Dashboard/releases/tag/v6.0.0) brings several new cards and usability improvements. A new Person Card shows who is home or away, while the current weather card has been streamlined into a single-line layout that still preserves most key information. This release also adds a Location Tracker, Battery Monitoring card for real-time sensor battery status, and a WiFi QR scanner for easy guest network access. Lighting controls have been upgraded with custom button cards to apply transparancy, the Curtain card now uses a custom implementation for better performance, and the Hue scene room selector has been expanded to support more rooms. Additionally, Expander cards help keep rooms organized by allowing sections to be collapsed, and new UI animations enhance visual feedback across the dashboard. This update also fixes animation artifacts and improves responsiveness when changing Hue scenes.
I have also readded the [_full dashboard yaml_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/dashboard.yaml), one of the most requested feature over the communities.
<img width="1458" height="867" alt="Screenshot 2026-03-28 082122" src="https://github.com/user-attachments/assets/34129f9d-7969-4fe6-beb5-659630e26f48" />
# ✨ Features
**🎨 MD3 Theme Engine**
Unlock unlimited color combinations with a simple color picker - thanks to the amazing work of Material You Theme repository.
**👥 Per-User Styling**
Each family member can have their own unique style and colors. Perfect for customizing your phone, tablets, and shared devices.
**💡Community Inspired**
Several cards are inspired by the incredible work of others in the Home Assistant community. Credit will be detailed below.
# 🖼️ Dashboard Walkthrough
**Overview Page**
<img width="1450" height="857" alt="Screenshot 2026-03-28 082710" src="https://github.com/user-attachments/assets/0f9c1833-d01f-457b-b6f2-00df7bd5af01" />
**Page Description**
The Overview page serves as the central hub for monitoring and controlling most of my smart devices. At the top, it displays a [personalized greeting](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Overview%20Page%20-%20greeting) along with the current time, weather conditions, wind speed, and the day’s high and low temperatures.
To the right, there are dedicated [_Climate, Toggles, Irrigation, and Hue Scene Tab_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Overview%20Page%20-%20Climate,%20Toggles,%20Irrigation,%20Hue%20Scene%20Tabs) for managing the thermostat, quick toggles,sprinkler systems navigation, and hue scene navigation. Next, there is a [_weather forecast_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Overview%20Page%20-%20Weather%20Forecast) card to show the temperature range for the next 5 days. [_Calendar_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Overview%20Page%20-%20Calendar), and [_Alarmo, with a notification chip for quick alerts, calendar, music, and camera_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Overview%20Page%20-%20Alarmo%20%26%20Notificaton%20Chip). When no media is playing, the media card switches back to calendar and backyard camera.
Next, the dashboard features [_Room Cards_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Overview%20Page%20-%20Room%20Cards) that provide quick access to thermostat controls, lighting toggles, and the current count of open doors or windows.
Finally, the main page includes four [_live camera feeds_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Overview%20Page%20-%20Live%20Camera%20Feeds), streaming in real time for immediate visual monitoring.
**_Components Used:_**
- [Auto-Entities](https://github.com/thomasloven/lovelace-auto-entities)
- [Button-Card](https://github.com/custom-cards/button-card)
- [Calendar Card Pro](https://github.com/alexpfau/calendar-card-pro)
- [Clock Weather Card HUI Icons](https://github.com/samuelgoodell/clock-weather-card-hui-icons)
- [Config Template Card](https://github.com/iantrich/config-template-card)
- [Mini-Graph-Card](https://github.com/kalkih/mini-graph-card)
- [Mushroom](https://github.com/piitaya/lovelace-mushroom)
- [Paper Buttons Row](https://github.com/jcwillox/lovelace-paper-buttons-row)
- [Simple Swipe Card](https://github.com/nutteloost/simple-swipe-card)
- [Simple Tabs Card](https://github.com/agoberg85/home-assistant-simple-tabs)
- [WebRTC](https://github.com/AlexxIT/WebRTC)
***
**Weather Forecast and Notifications Page**
<img width="1450" height="880" alt="Screenshot 2026-03-28 082323" src="https://github.com/user-attachments/assets/318ff47b-a8e1-438e-8491-8e0a5b79d9ec" />
<img width="1441" height="879" alt="Screenshot 2026-03-28 082354" src="https://github.com/user-attachments/assets/c284876d-e6f8-473b-906b-e7a587b47abd" />
**Weather - Notification page** combines all my weather information and notifications in one place for quick status updates and alerts.
On the notifications side, I use a variety of conditional cards powered by [_timers_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Notification%20Page%20-%20Timers) and booleans to make alerts appear only when needed - for example, reminders like “wash duvet”, notifications when the sprinklers are running, or warnings about an open door.
The weather section is designed to be clean and informative. Certain cards - like weather warnings, earthquake alerts, and volcano warnings - remain hidden unless there’s an active event (depending on your local integration). The rest of the display includes [_detailed weather data_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Notification%20Page%20-%20Weather%20Tab), rainfall, UV index, wind conditions, lunar information, and a live radar map, giving me a complete view of current and upcoming conditions.
**_Components Used:_**
- [Apex Charts Card](https://github.com/RomRider/apexcharts-card?tab=readme-ov-file#series-options)
- [Auto-Entities](https://github.com/thomasloven/lovelace-auto-entities)
- [Button-Card](https://github.com/custom-cards/button-card)
- [Custom Card Features](https://github.com/Nerwyn/custom-card-features)
- [Lunar Phase Card](https://github.com/ngocjohn/lunar-phase-card)
- [Lunar Phase Integration](https://github.com/ngocjohn/lunar-phase)
- [Mushroom](https://github.com/piitaya/lovelace-mushroom)
- [Simple Swipe Card](https://github.com/nutteloost/simple-swipe-card)
- [Simple Tabs Card](https://github.com/agoberg85/home-assistant-simple-tabs)
- [World's Air Quality Index](https://www.home-assistant.io/integrations/waqi/)
- [Weather Card Extended](https://github.com/Thyraz/weather-forecast-extended)
**Individual Room Page**
<img width="1455" height="876" alt="Screenshot 2026-03-28 082134" src="https://github.com/user-attachments/assets/ae7378cc-ecf3-41f2-9347-20f360b30854" />
<img width="1450" height="856" alt="Screenshot 2026-03-28 084440" src="https://github.com/user-attachments/assets/6d2e1c16-c095-4893-8440-293337b2a046" />
<img width="1461" height="856" alt="Screenshot 2026-03-28 093857" src="https://github.com/user-attachments/assets/42bc44ff-3a62-47dc-ab7b-3843936f19b0" />
**Individual room page** provides detailed controls and status information specific to that room. It can show live camera, light, button, and all the other things that we can manipulate in the room.
**_Components Used:_**
- [Material Home Component](https://github.com/giovannilamarmora/lovelace-material-components)
- [Mushroom](https://github.com/piitaya/lovelace-mushroom)
- [WebRTC](https://github.com/AlexxIT/WebRTC)
***
**Hue Scene Page**
<img width="1455" height="871" alt="Screenshot 2026-03-28 082420" src="https://github.com/user-attachments/assets/e40fde10-4cbd-47fd-80fd-00ba951d076e" />
<img width="1453" height="877" alt="Screenshot 2026-03-28 082428" src="https://github.com/user-attachments/assets/63ae85c3-f8fa-4732-9285-d454c62ed977" />
**Page Description**
I’ve always loved Philips Hue, but instead of using their bridge, I connect my lights directly through Zigbee2MQTT (Z2M). To recreate the familiar Philips Hue app experience, I use the [_hass-scene_preset_](https://github.com/Hypfer/hass-scene_presets) integration from HACS, which lets me simulate [Hue’s scene](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Hue%20Page%20-%20Scene%20Example) controls and build my own [_room selector_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Hue%20Page%20-%20Room%20Selector).
All of this comes together thanks to the incredible work of the Hypfer - the mainainer of hass-scene_preset, along with a combination of automations, scripts, input_selects, and booleans that make the whole setup seamless.
**_Components Used:_**
- [Bubble Card](https://github.com/Clooos/Bubble-Card)
- [Button-Card](https://github.com/custom-cards/button-card)
- [Scene Presets](https://github.com/Hypfer/hass-scene_presets)
- [Mushroom](https://github.com/piitaya/lovelace-mushroom)
- [Navbar Card](https://github.com/joseluis9595/lovelace-navbar-card)
***
**Camera Page - Alarm Page**
<img width="1445" height="878" alt="Screenshot 2026-03-28 082256" src="https://github.com/user-attachments/assets/9c6e3d49-577b-4fa4-85bb-4e9f667f989f" />
<img width="1460" height="883" alt="Screenshot 2026-03-28 101230" src="https://github.com/user-attachments/assets/c221b23f-586d-4eb1-83f4-690fdd44b57c" />
**Page Description**
I like having all my [_cameras_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Camera%20Page%20-%20Example) displayed together on a dedicated page. There are six cameras around the house, and this page gives me a complete live view of them all in one place.
At the top, there are buttons that let me toggle vehicle and person detection automations. Beneath each camera feed, I’ve added light controls, allowing quick adjustments to the nearby lighting directly from the same view.
I also have my Alarmo integration panel, which can be accessed by clicking the Alarmo button on the Overview page. Right next to it, I display the 10 most recent recorded events, each automatically described by LLM Vision - adding a smart, futuristic touch to the camera setup.
**_Components Used:_**
- [Alarmo Card](https://github.com/nielsfaber/alarmo-card)
- [Mushroom](https://github.com/piitaya/lovelace-mushroom)
- [Simple Tabs Card](https://github.com/agoberg85/home-assistant-simple-tabs)
- [Web RTC Camera](https://github.com/AlexxIT/WebRTC)
***
**Irrigation Page**
<img width="1466" height="882" alt="Screenshot 2026-03-28 101405" src="https://github.com/user-attachments/assets/4b831f50-93a6-4a86-86bb-6b181f42e11e" />
The **Irrigation Page** manages my sprinkler system and garden monitoring. I use two Sonoff Smart Valves to control water flow to the sprinklers, supported by several soil sensors that track both temperature and moisture levels.
To visualize performance, I’ve built a [_custom graph_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Irrigation%20Page%20-%20Backyard%20Example) showing water flow trends, and I’ve automated irrigation timers through a combination of automations and scripts, making the watering system efficient and fully autonomous.
**_Components Used:_**
- [Config Template Card](https://github.com/iantrich/config-template-card)
- [Mushroom](https://github.com/piitaya/lovelace-mushroom)
- [Paper Buttons Row](https://github.com/jcwillox/lovelace-paper-buttons-row)
- [Simple Tabs Card](https://github.com/agoberg85/home-assistant-simple-tabs)
***
**Calendar Page**
<img width="1461" height="884" alt="Screenshot 2026-03-28 101458" src="https://github.com/user-attachments/assets/c66ada28-1ec6-4ee7-861a-df31c71ab0b3" />
**Page Description**
The [_Calendar Page_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Calendar%20Page%20-%20Day%20offset%200%20example) provides a full view of my appointments, events, and schedules in one place. It’s a dedicated page that pulls in data from my linked calendars, giving me an easy way to stay on top of upcoming tasks and daily plans right within Home Assistant.
**_Components Used:_**
- [Calendar Card Pro](https://github.com/alexpfau/calendar-card-pro)
**Extra Cards**
<img width="575" height="268" alt="Lock Example" src="https://github.com/user-attachments/assets/e60d4530-c2da-470d-a95c-23bda4c0ade9" />
Above is an example of [lock card](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Lock%20Card%20Example).
<img width="511" height="372" alt="Scene Example" src="https://github.com/user-attachments/assets/75f01d54-5aad-4bdb-8402-3d389e2ed49d" />
The above is [scene example](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Scene%20Card%20Example) card with mushroom entity card.
<img width="574" height="450" alt="Cover Example" src="https://github.com/user-attachments/assets/3b7a1a29-b637-4307-8250-c5971fa0be59" />
And last one, is a [cover card](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Curtain%20Card%20Example) example.
# Other Components:
Theme / Layout:
- [Material Symbols](https://github.com/beecho01/material-symbols)
- [Material You Theme](https://github.com/Nerwyn/material-you-theme)
- [Material You Utilities](https://github.com/Nerwyn/material-you-utilities)
- [Kiosk Mode](https://github.com/maykar/kiosk-mode)
- [Stack In Card](https://github.com/custom-cards/stack-in-card)
- [Streamline Card](https://github.com/brunosabot/streamline-card)
- [Vertical Stack In Card](https://github.com/ofekashery/vertical-stack-in-card)
# Installation
**For new user:**
- Copy all the code from [_full dashboard yaml_](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/dashboard.yaml) to a new dashboard raw configuration editor to jumpstart your experience.
- Install the required HACS components (such as simple swipe card, stack-in-card, popup-card, etc. - see your setup for what’s needed).
- To unlock the full functionality (like weather icons, notification counts, and more), you’ll need to add the corresponding [sensors](https://github.com/ElementZoom/Material-Design-3-Dynamic-Mobile-Dashboard/tree/main/template%20sensor) to your config.
- For the Hue scene, you'll need to have the automation, scripts, input boolean, input text, and input number in your system that you can find in [hue asset folder](https://github.com/ElementZoom/Material-Design-3-Dynamic-Mobile-Dashboard/tree/main/hue%20asset). For the images, you can get them from [here](https://github.com/Hypfer/hass-scene_presets/blob/master/custom_components/scene_presets/assets/Readme.md).
- Apply the MD3 theme and select your preferred colors. It is accessible from Overview page > More > Bucket Fill Icon
- Apply [wallpaper](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/tree/main/wallpaper) (optional)
- Set the companion app to full screen (optional)
**For existing user:**
- Review the [streamline_template](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/streamline_templates%20collection) to see if you want to add / modify the previous version to the new version.
- Choose which card / visuals that you like to be added to your installation by clicking the hyperlink provided in the description above.
- Apply [wallpaper](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/tree/main/wallpaper) (optional)
- Set the companion app to full screen (optional)
# 📚 Credits
This project builds upon the work of:
- Nerwyn – [Material You Theme](https://github.com/Nerwyn/material-you-theme) & [Material You Utilities](https://github.com/Nerwyn/material-you-utilities)
- [MySmartHome](https://www.youtube.com/@My_Smart_Home) - for the new tabs button, button cards styling, sliders, etc
- Other community members who kindly shared their cards
# 💖 Support My Work
If you want to hire me to make your personal dashboard, you can hit me up on one of these social media platforms below:
- Email at _reynaldi.sutrisno.rs16@gmail.com_
- [Reddit](https://www.reddit.com/u/ElementZoom/s/dr4NN0mTtj)
- [Facebook](https://www.facebook.com/profile.php?id=61578092475703)
Or you can support me on [Ko-fi](https://ko-fi.com/ElementZoom).
Your support helps me keep creating and sharing more awesome open-source tools! Thank you for being part of this journey 🚀
================================================
FILE: assets/Calendar Page - Day offset 0 example
================================================
type: custom:week-planner-card
calendars:
- entity: calendar.calendar_1
color: "#ff6a6a"
- entity: calendar.calendar_2
color: "#71c8fe"
- entity: calendar.calendar_3
color: "#d3f37f"
- entity: calendar.calendar_4
color: "#f9da4e"
days: "1"
startingDay: today
startingDayOffset: 0
hideWeekend: false
noCardBackground: true
compact: false
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
useTwiceDaily: false
entity: weather.forecast_home
locale: nz
showLocation: false
hidePastEvents: false
hideDaysWithoutEvents: false
hideTodayWithoutEvents: false
combineSimilarEvents: false
showLegend: false
================================================
FILE: assets/Camera Page - Example
================================================
type: vertical-stack
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
title: Driveway
subtitle: "{{ states ('sensor.right_driveway_camera_status') }}"
animation_delay: 0.5s
- type: custom:mushroom-chips-card
chips:
- type: template
entity: automation.driveway_camera_vehicle_notification
icon: >
{{ 'mdi:car' if
is_state('automation.driveway_camera_vehicle_notification', 'on')
else 'mdi:car-off' }}
tap_action:
action: toggle
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_vehicle_notification', 'on') else '#a8a8a8' }};
--color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_vehicle_notification', 'on') else '#a8a8a8' }};
animation: slideDown 1.0s ease-out 1.0s both;
}
@keyframes slideDown {
from {
opacity: 1;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
mushroom-chip$: |
.chip {
transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
mushroom-chip$mushroom-state-icon$: |
ha-state-icon {
transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
- type: template
entity: automation.driveway_camera_person_notification
icon: >
{{ 'm3of:sensor-occupied' if
is_state('automation.driveway_camera_person_notification', 'on')
else 'm3o:sensors-krx-off' }}
tap_action:
action: toggle
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_person_notification', 'on') else '#a8a8a8' }};
--color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_person_notification', 'on') else '#a8a8a8' }};
animation: slideDown 1.0s ease-out 1.3s both;
}
@keyframes slideDown {
from {
opacity: 1;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
mushroom-chip$: |
.chip {
transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
mushroom-chip$mushroom-state-icon$: |
ha-state-icon {
transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
uix:
style: |
ha-card {
position: absolute;
top: 22px;
right: 2px;
}
- type: custom:streamline-card
template: camera_rtsp_with_chips_card
variables:
camera_url: >-
ffmpeg:rtsp://username:password$@192.168.1.150/h265Preview_01_main#video=copy#audio=opus
entity_id_light_one: light.lights_ceiling
light_one_icon: hue:recessed-ceiling
entity_id_light_two: light.lights_outdoor_grg
light_two_icon: hue:recessed-ceiling
entity_id_light_three: light.lights_wall
light_three_icon: hue:wall-appear
animation_delay: 0.8s
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
title: Left Walkway
subtitle: "{{ states ('sensor.left_walkway_camera_status') }}"
animation_delay: 1.0s
- type: custom:mushroom-chips-card
chips:
- type: template
entity: automation.left_walkway_camera_person_notification
icon: >
{{ 'm3of:sensor-occupied' if
is_state('automation.left_walkway_camera_person_notification',
'on') else 'm3o:sensors-krx-off' }}
tap_action:
action: toggle
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--primary-text-color)' if is_state('automation.left_walkway_camera_person_notification', 'on') else '#a8a8a8' }};
--color: {{ 'var(--primary-text-color)' if is_state('automation.left_walkway_camera_person_notification', 'on') else '#a8a8a8' }};
animation: slideDown 1.0s ease-out 1.7s both;
}
@keyframes slideDown {
from {
opacity: 1;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
mushroom-chip$: |
.chip {
transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
mushroom-chip$mushroom-state-icon$: |
ha-state-icon {
transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
uix:
style: |
ha-card {
position: absolute;
top: 22px;
right: 2px;
}
- type: custom:streamline-card
template: camera_generic_with_chips_card
variables:
camera_entity: camera.left_walkway_camera_fluent
entity_id_light_one: switch.outdoor_light_switch_lr
light_one_icon: mdi:outdoor-lamp
entity_id_light_two: switch.rear_light_switch_grg
light_two_icon: mdi:outdoor-lamp
animation_delay: 2.3s
================================================
FILE: assets/Curtain Card Example
================================================
type: custom:streamline-card
template: curtain_card
variables:
entity: cover.erker_groot
name: Erker Groot
================================================
FILE: assets/Hue Page - Room Selector
================================================
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#room-selector"
name: Room Selector
icon: m3o:room-preferences
styles: |-
#root {
height: unset !important;
max-height: 100% !important;
transition: transform var(--md-sys-motion-expressive-spatial-default) !important;
}
.bubble-header-container {
--bubble-button-background-color: var(--md-sys-color-on-secondary);
--bubble-button-icon-background-color: var(--md-sys-color-on-secondary);
}
.bubble-pop-up-container {
padding-bottom: 64px !important;
}
bg_color: var(--md-sys-color-on-primary)
bg_opacity: "50"
button_type: name
sub_button:
main: []
bottom: []
slider_fill_orientation: left
slider_value_position: right
- type: custom:simple-tabs
pre-load: true
active-background: var(--md-sys-color-primary)
active-text-color: var(--md-sys-color-on-primary)
text-color: var(--primary-text-color)
tabs:
- title: Living Area
icon: mdi:sofa
id: living
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Area
title_font_size: 20px
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: m3of:table-restaurant
primary: Dining
secondary: "{{ states('input_text.dining_table_dynamic_scene_active') }}"
tap_action:
action: call-service
service: script.toggle_or_apply_dynamic_scene
data:
room_lights:
- light.light_one_dt
- light.light_two_dt
- light.light_three_dt
- light.light_one_ktc_dt
- light.light_two_ktc_dt
- light.light_three_ktc_dt
presence_automation:
- automation.room_presence_dining_table
room_boolean: input_boolean.dining_table_dynamic_scene
room_scene_tracker: input_text.dining_table_dynamic_scene_active
color: >-
{% if states('input_text.dining_table_dynamic_scene_active')
!= '' %}
#f6bd60
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: custom:mushroom-template-card
icon: mdi:sofa
primary: Sofa
secondary: "{{ states('input_text.sofa_dynamic_scene_active') }}"
tap_action:
action: call-service
service: script.toggle_or_apply_dynamic_scene
data:
room_lights:
- light.light_one_sofa
- light.light_two_sofa
- light.light_three_sofa
- light.light_four_sofa
presence_automation:
- automation.room_presence_sofa
- automation.sofa_sensor_workaround
room_boolean: input_boolean.sofa_dynamic_scene
room_scene_tracker: input_text.sofa_dynamic_scene_active
color: >-
{% if states('input_text.sofa_dynamic_scene_active') != ''
%}
#f7ede2
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: custom:mushroom-template-card
icon: mdi:countertop
primary: Kitchen
secondary: "{{ states('input_text.kitchen_dynamic_scene_active') }}"
tap_action:
action: call-service
service: script.toggle_or_apply_dynamic_scene
data:
room_lights:
- light.light_one_ktc
- light.light_two_ktc
presence_automation:
- automation.room_presence_kitchen
room_boolean: input_boolean.kitchen_dynamic_scene
room_scene_tracker: input_text.kitchen_dynamic_scene_active
color: >-
{% if states('input_text.kitchen_dynamic_scene_active') !=
'' %}
#f5cac3
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:cookie
primary: Scullery
secondary: "{{ states('input_text.scullery_dynamic_scene_active') }}"
tap_action:
action: call-service
service: script.toggle_or_apply_dynamic_scene
data:
room_lights:
- light.light_scr
presence_automation:
- automation.room_presence_scullery
room_boolean: input_boolean.scullery_dynamic_scene
room_scene_tracker: input_text.scullery_dynamic_scene_active
color: >-
{% if states('input_text.scullery_dynamic_scene_active') !=
'' %}
#84a59d
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: custom:mushroom-template-card
icon: mdi:image-frame
primary: Hallway
secondary: "{{ states('input_text.hallway_dynamic_scene_active') }}"
tap_action:
action: call-service
service: script.toggle_or_apply_dynamic_scene
data:
room_lights:
- light.light_one_hw
- light.light_two_hw
- light.light_three_hw
- light.light_four_hw
- light.light_five_hw
- light.light_six_hw
presence_automation:
- automation.room_presence_hallway
room_boolean: input_boolean.hallway_dynamic_scene
room_scene_tracker: input_text.hallway_dynamic_scene_active
color: >-
{% if states('input_text.hallway_dynamic_scene_active') !=
'' %}
#f28482
{% else %}
#aaaaaa
{% endif %}
vertical: true
- title: Bedroom
icon: m3of:bed
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Area
title_font_size: 20px
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: m3of:bed
primary: Master
secondary: >-
{{ states('input_text.master_bedroom_dynamic_scene_active')
}}
tap_action:
action: call-service
service: script.toggle_or_apply_dynamic_scene
data:
room_lights:
- light.light_one_mbr
- light.light_two_mbr
presence_automation: automation.room_presence_master_bedroom
room_boolean: input_boolean.master_bedroom_dynamic_scene
room_scene_tracker: input_text.master_bedroom_dynamic_scene_active
color: >-
{% if
states('input_text.master_bedroom_dynamic_scene_active') !=
'' %}
#cdb4db
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: custom:mushroom-template-card
icon: mdi:wardrobe
primary: Wardrobe
secondary: "{{ states('input_text.wardrobe_dynamic_scene_active') }}"
tap_action:
action: call-service
service: script.toggle_or_apply_dynamic_scene
data:
room_lights:
- light.light_one_wr
- light.light_two_wr
presence_automation: automation.room_presence_wardrobe
room_boolean: input_boolean.wardrobe_dynamic_scene
room_scene_tracker: input_text.wardrobe_dynamic_scene_active
color: >-
{% if states('input_text.wardrobe_dynamic_scene_active') !=
'' %}
#ffc8dd
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: m3of:stroller
primary: Baby
tap_action:
action: call-service
service: script.toggle_or_apply_dynamic_scene
data:
room_lights:
- light.light_one_br
- light.light_two_br
- light.ava_bed_led
- light.iyla_bed_led
presence_automation: automation.room_presence_baby_room
room_boolean: input_boolean.baby_room_dynamic_scene
room_scene_tracker: input_text.baby_room_dynamic_scene_active
secondary: "{{ states('input_text.baby_room_dynamic_scene_active') }}"
color: >-
{% if states('input_text.baby_room_dynamic_scene_active') !=
'' %}
#ffafcc
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: custom:mushroom-template-card
icon: m3of:person-3
primary: Single
tap_action:
action: perform-action
data:
room_lights:
- light.light_one_sgr
- light.light_two_sgr
- light.bed_led_sgr
presence_automation: automation.room_presence_single_guest_room
room_boolean: input_boolean.single_guest_room_dynamic_scene
room_scene_tracker: input_text.single_guest_room_dynamic_scene_active
perform_action: script.toggle_or_apply_dynamic_scene
target: {}
secondary: >-
{{
states('input_text.single_guest_room_dynamic_scene_active')
}}
color: >-
{% if
states('input_text.single_guest_room_dynamic_scene_active')
!= '' %}
#bde0fe
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: custom:mushroom-template-card
icon: m3of:groups-2
primary: Multiple
tap_action:
action: perform-action
data:
room_lights:
- light.light_one_mgr
- light.light_two_mgr
- light.bed_led_mgr
presence_automation: automation.room_presence_multiple_guest_room
room_boolean: input_boolean.multiple_guest_room_dynamic_scene
room_scene_tracker: input_text.multiple_guest_room_dynamic_scene_active
perform_action: script.toggle_or_apply_dynamic_scene
target: {}
secondary: >-
{{
states('input_text.multiple_guest_room_dynamic_scene_active')
}}
color: >-
{% if
states('input_text.multiple_guest_room_dynamic_scene_active')
!= '' %}
#a2d2ff
{% else %}
#aaaaaa
{% endif %}
vertical: true
badge: ""
id: bedroom
- title: Bathroom
icon: m3of:water-drop
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Area
title_font_size: 20px
- type: custom:mushroom-template-card
icon: m3of:bed
primary: Master Bathroom
secondary: "{{ states('input_text.master_bathroom_dynamic_scene_active') }}"
tap_action:
action: call-service
service: script.toggle_or_apply_dynamic_scene
data:
room_lights:
- light.light_one_mbrt
- light.light_two_mbrt
- light.vanity_led_mbrt
presence_automation: automation.room_presence_master_bathroom
room_boolean: input_boolean.master_bathroom_dynamic_scene
room_scene_tracker: input_text.master_bathroom_dynamic_scene_active
color: >-
{% if states('input_text.master_bathroom_dynamic_scene_active')
!= '' %}
#ffa69e
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: m3of:faucet
primary: Vanity
secondary: >-
{{
states('input_text.guest_bathroom_vanity_dynamic_scene_active')
}}
tap_action:
action: call-service
service: script.toggle_or_apply_dynamic_scene
data:
room_lights:
- light.light_one_gbrv
- light.light_two_gbrv
- light.vanity_led_gbrv
presence_automation:
- automation.room_presence_guest_bathroom_vanity
room_boolean: input_boolean.guest_bathroom_vanity_dynamic_scene
room_scene_tracker: input_text.guest_bathroom_vanity_dynamic_scene_active
color: >-
{% if
states('input_text.guest_bathroom_vanity_dynamic_scene_active')
!= '' %}
#faf3dd
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: custom:mushroom-template-card
icon: mdi:shower
primary: Bathing
secondary: >-
{{
states('input_text.guest_bathroom_bathing_dynamic_scene_active')
}}
tap_action:
action: call-service
service: script.toggle_or_apply_dynamic_scene
data:
room_lights:
- light.light_one_gbrb
- light.light_two_gbrb
presence_automation: automation.room_presence_guest_bathroom_bathing
room_boolean: input_boolean.guest_bathroom_bathing_dynamic_scene
room_scene_tracker: input_text.guest_bathroom_bathing_dynamic_scene_active
color: >-
{% if
states('input_text.guest_bathroom_bathing_dynamic_scene_active')
!= '' %}
#b8f2e6
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: custom:mushroom-template-card
icon: m3of:water-drop
primary: Toilet
secondary: >-
{{
states('input_text.guest_bathroom_toilet_dynamic_scene_active')
}}
tap_action:
action: call-service
service: script.toggle_or_apply_dynamic_scene
data:
room_lights:
- light.light_gbrt
presence_automation: automation.room_presence_guest_bathroom_toilet
room_boolean: input_boolean.guest_bathroom_toilet_dynamic_scene
room_scene_tracker: input_text.guest_bathroom_toilet_dynamic_scene_active
color: >-
{% if
states('input_text.guest_bathroom_toilet_dynamic_scene_active')
!= '' %}
#aed9e0
{% else %}
#aaaaaa
{% endif %}
vertical: true
- title: Outdoor
icon: mdi:light-flood-down
id: outdoor
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Area
title_font_size: 20px
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:garage-variant
primary: Garage
secondary: >-
{{ states('input_text.garage_outdoor_dynamic_scene_active')
}}
tap_action:
action: perform-action
data:
room_lights:
- light.light_one_outdoor_grg
- light.light_two_outdoor_grg
presence_automation: automation.outdoor_presence_driveway
room_boolean: input_boolean.garage_outdoor_dynamic_scene
room_scene_tracker: input_text.garage_outdoor_dynamic_scene_active
perform_action: script.toggle_or_apply_dynamic_scene
target: {}
color: >-
{% if
states('input_text.garage_outdoor_dynamic_scene_active') !=
'' %}
#e76f51
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: custom:mushroom-template-card
icon: hue:wall-appear
primary: Wall
secondary: "{{ states('input_text.wall_dynamic_scene_active') }}"
tap_action:
action: perform-action
data:
room_lights:
- light.left_porch_light_drw
- light.right_porch_light_drw
- light.side_porch_light_drw
- light.wall_light_one_grg
- light.wall_light_two_grg
presence_automation: automation.outdoor_presence_driveway
room_boolean: input_boolean.wall_dynamic_scene
room_scene_tracker: input_text.wall_dynamic_scene_active
perform_action: script.toggle_or_apply_dynamic_scene
target: {}
color: >-
{% if states('input_text.wall_dynamic_scene_active') != ''
%}
#f4a261
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: custom:mushroom-template-card
icon: mdi:home-roof
primary: Roof
secondary: "{{ states('input_text.roof_dynamic_scene_active') }}"
tap_action:
action: perform-action
data:
room_lights:
- light.light_one_left_roof_drw
- light.light_two_left_roof_drw
- light.light_one_ceiling_porch_drw
- light.light_two_ceiling_porch__drw
- light.light_one_right_roof_drw
- light.light_two_right_roof_drw
presence_automation: automation.outdoor_presence_driveway
room_boolean: input_boolean.roof_dynamic_scene
room_scene_tracker: input_text.roof_dynamic_scene_active
perform_action: script.toggle_or_apply_dynamic_scene
target: {}
color: >-
{% if states('input_text.roof_dynamic_scene_active') != ''
%}
#e76f51
{% else %}
#aaaaaa
{% endif %}
vertical: true
- type: custom:streamline-card
template: title_card
variables:
title: Scenes Control
title_font_size: 20px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: number_slider_card
variables:
entity: input_number.dynamic_scene_brightness
name: Brightness
icon: mdi:brightness-6
- type: custom:streamline-card
template: number_slider_card
variables:
entity: input_number.dynamic_scene_interval
name: Interval
icon: mdi:timer
- type: custom:mushroom-entity-card
entity: input_boolean.dynamic_scene_stop
name: Stop Scenes
icon: mdi:stop-circle
tap_action:
action: toggle
fill_container: true
================================================
FILE: assets/Hue Page - Scene Example
================================================
type: horizontal-stack
cards:
- type: picture
image: /local/hue/raw/Blossom.png
tap_action:
action: call-service
service: input_text.set_value
data:
entity_id: input_text.dynamic_scene_selected
value: blossom
- type: picture
image: /local/hue/raw/Crocus.png
tap_action:
action: call-service
service: input_text.set_value
data:
entity_id: input_text.dynamic_scene_selected
value: crocus
================================================
FILE: assets/Irrigation Page - Backyard Example
================================================
type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}
@keyframes slideInRight {
from {
opacity: 1;
transform: translateX(8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
- title: Backyard
- subtitle: "{{ states('sensor.backyard_water_tap_status') }}"
- type: custom:streamline-card
template: irrigation_card
variables:
switch_entity: switch.backyard_water_tap
flow_sensor: sensor.backyard_water_tap_flow
timer_entity: timer.backyard_sprinkler_timer
zone: backyard
soil_moisture_sensor: sensor.average_backyard_soil_moisture
soil_temperature_sensor: sensor.average_backyard_soil_temperature
================================================
FILE: assets/Lock Card Example
================================================
type: custom:streamline-card
template: lock_card
variables:
entity: lock.nuki_bijkeuken_lock
name: Nuki bijkeuken
================================================
FILE: assets/Notification Page - Timers
================================================
type: conditional
conditions:
- condition: state
entity: binary_sensor.show_wash_cuddly_timer
state: "on"
card:
type: custom:timer-bar-card
entity: timer.wash_cuddly
invert: true
bar_direction: ltr
bar_width: 60%
mushroom:
layout: vertical
color: "#f385bc"
================================================
FILE: assets/Notification Page - Weather Tab
================================================
type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}
@keyframes slideInRight {
from {
opacity: 1;
transform: translateX(8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: spacer_card
variables:
padding: 8px
- type: custom:simple-tabs
pre-load: true
active-background: var(--md-sys-color-primary)
active-text-color: var(--md-sys-color-on-primary)
text-color: var(--primary-text-color)
tabs:
- title: Volcano
icon: m3of:mountain-steam
conditions:
- condition: template
template: |
{{ states('sensor.volcano_rotorua') | float(0) > 0 }}
card:
type: markdown
content: >
{{ state_attr('sensor.volcano_taupo', 'activity') | default('No
warnings') }}
_Issued: {{
as_datetime(state_attr('sensor.volcano_taupo', 'feed_last_update_successful')).astimezone().strftime('%I:%M%p %A, %d %b')
}}_
text_only: true
- title: Earthquake
icon: m3of:earthquake
conditions:
- condition: template
template: >
{{ states('sensor.geonet_nz_quakes_37_6421739_175_527482') |
float(0) > 0 }}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
- title: Latest Earthquake
- type: markdown
content: >
{% set sensor = states.geo_location |
selectattr('attributes.source', 'defined') |
selectattr('attributes.source', 'eq', 'geonetnz_quakes') |
sort(attribute='last_updated', reverse=true) | list | first %}
{% if sensor %}
**Locality:** {{ sensor.attributes.locality }}
**Magnitude:** {{ sensor.attributes.magnitude | round(2) }}
**Depth:** {{ sensor.attributes.depth }} km
**Time:** {{ as_timestamp(sensor.attributes.time) |
timestamp_custom('%a, %b %-d at %I:%M %p') }}
{% else %}
No recent earthquakes detected
{% endif %}
- title: Warning
icon: m3of:warning
conditions:
- condition: template
template: >
{{ states('sensor.home_metservice_weather_warnings') not in
['unavailable', 'unknown'] }}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
- title: Weather Warning
- type: markdown
content: >2-
{{ state_attr('sensor.home_metservice_weather_warnings', 'warnings') | default('No warnings') }}
_Issued: {{
states.sensor.home_metservice_weather_warnings.last_changed.strftime('%I:%M%p
%A, %d %b') }}_
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:weather-lightning
content: Open MetService
tap_action:
action: url
url_path: https://www.metservice.com/warnings/home
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' }};
}
alignment: center
- title: Forecast
icon: mdi:weather-partly-cloudy
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
- title: Forecast
- subtitle: "{{ states ('sensor.next_rain_summary') }}"
uix:
style: |
ha-card {
padding-right: 120px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:weather-lightning
content: MetService
tap_action:
action: url
url_path: https://www.metservice.com/warnings/home
uix:
style:
.: |
ha-card {
--text-color: var(--md-sys-color-on-primary);
--color: var(--md-sys-color-on-primary);
--chip-background: var(--md-sys-color-primary);
}
uix:
style: |
ha-card {
position: absolute;
top: 20px;
right: 2px;
}
- type: vertical-stack
cards:
- type: custom:weather-forecast-extended-card
entity: weather.home
show_header: true
hourly_forecast: true
daily_forecast: true
daily_min_gap: 30
hourly_min_gap: 16
show_sun_times: true
sun_use_home_coordinates: true
use_night_header_backgrounds: true
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.daily_weather_data_met_no
icon: mdi:thermometer
primary: >
{% set current = state_attr('weather.home', 'temperature')
%}
Temp: {{ current }} {{ state_attr('weather.home',
'temperature_unit') }}
secondary: >-
{% set forecast =
state_attr('sensor.daily_weather_data_google_weather',
'forecast_data') %} {% set unit =
state_attr('weather.home', 'temperature_unit') %} {% if
forecast is defined and forecast.temperature is defined
and forecast.templow is defined %}
High: {{ forecast.temperature }}{{ unit }} - Low: {{ forecast.templow }}{{ unit }}
{% else %}
High: N/A - Low: N/A
{% endif %}
color: >
{% set current = state_attr('weather.home', 'temperature')
| float(0) %} {% if current < 16 %}
#CEB2F5
{% elif current < 18 %}
#5EBDEE
{% elif current < 22 %}
#9cc8b8
{% elif current < 24 %}
#e7b562
{% elif current < 27 %}
#FF564B
{% else %}
#99332d
{% endif %}
features_position: bottom
multiline_secondary: true
- type: custom:mushroom-template-card
entity: sensor.your_city_air_quality_index
icon: mdi:leaf
primary: Air Quality
secondary: >-
{% set aqi =
states('sensor.your_city_air_quality_index')
%} {% set pollutant =
states('sensor.your_city_dominant_pollutant')
%} {% if aqi not in ['unknown','unavailable','none',''] %}
{% set aqi = aqi | int %}
{% set level = ('Good' if aqi <= 50 else 'Moderate' if aqi <= 100 else 'Unhealthy' if aqi <= 150 else 'Very Unhealthy' if aqi <= 200 else 'Hazardous') %}
{{ level }} - AQI {{ aqi }} - {{ pollutant }}
{% else %}
Data unavailable
{% endif %}
color: >
{% set aqi =
states('sensor.your_city_air_quality_index')
%} {% if aqi not in ['unknown','unavailable','none',''] %}
{% set aqi = aqi | int %}
{% if aqi <= 50 %} green
{% elif aqi <= 100 %} yellow
{% elif aqi <= 150 %} orange
{% elif aqi <= 200 %} red
{% elif aqi <= 300 %} Green Bokeh
{% else %} brown
{% endif %}
{% else %}
grey
{% endif %}
features_position: bottom
multiline_secondary: true
- title: Rainfall
icon: m3of:rainy
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
- title: Rainfall & Temperature Forecast
- subtitle: "{{ states ('sensor.24h_rainfall_summary') }}"
- type: vertical-stack
cards:
- type: custom:apexcharts-card
header:
show: true
graph_span: 24h
span:
start: hour
now:
show: true
apex_config:
chart:
height: 240
legend:
show: true
grid:
yaxis:
lines:
show: false
xaxis:
crosshairs:
show: false
tooltip:
enabled: false
yaxis:
- id: rain
title:
text: Rain (mm)
opposite: false
- id: temp
title:
text: Temp (°C)
opposite: true
decimalsInFloat: 0
series:
- entity: >-
sensor.google_weather_hourly_forecasts_full_hourly_forecast
name: Rain
type: column
yaxis_id: rain
data_generator: |
return entity.attributes.forecasts.map(f => {
let val = f.precipitation;
let color = '#9e9e9e';
if (val > 0 && val < 2.5) {
color = '#4FC3F7';
} else if (val < 7.6) {
color = '#0288D1';
} else if (val < 35) {
color = '#01579B';
} else {
color = '#311B92';
}
return {
x: new Date(f.datetime).getTime(),
y: val,
fillColor: color
};
});
- entity: >-
sensor.google_weather_hourly_forecasts_full_hourly_forecast
name: Temp
type: line
curve: smooth
yaxis_id: temp
stroke_width: 2
color: "#E53935"
data_generator: |
return entity.attributes.forecasts.map(f => {
return {
x: new Date(f.datetime).getTime(),
y: f.temperature
};
});
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.forecast_rainfall
icon: mdi:weather-rainy
primary: >
{% set r = states('sensor.forecast_rainfall') %} {% if
r in ['unknown', 'unavailable', None] %}
Rainfall: None
{% else %}
Rainfall: {{ r }} mm
{% endif %}
secondary: >
{% set r = states('sensor.forecast_rainfall') |
float(0) %} {% if r == 0 %}
None - Dry conditions
{% elif r < 1 %}
Light - Possible drizzle
{% elif r < 5 %}
Moderate - Bring umbrella
{% elif r < 20 %}
Heavy - Wet outdoors
{% else %}
Intense - Flood risk
{% endif %}
color: >
{% set r = states('sensor.forecast_rainfall') |
float(0) %} {% if r == 0 %}
blue
{% elif r < 1 %}
lightblue
{% elif r < 5 %}
cyan
{% elif r < 20 %}
orange
{% else %}
red
{% endif %}
features_position: bottom
multiline_secondary: true
- type: custom:mushroom-template-card
entity: sensor.forecast_temperature
icon: mdi:thermometer
primary: >
Temp: {{ states('sensor.forecast_temperature') }} {{
state_attr('weather.home', 'temperature_unit') }}
secondary: >
{% set t = states('sensor.forecast_temperature') |
float(0) %} {% if t < 5 %}
Cold - Bundle up
{% elif t < 15 %}
Cool - Light jacket
{% elif t < 25 %}
Mild - Comfortable
{% elif t < 32 %}
Warm - Stay hydrated
{% else %}
Hot - Avoid heat
{% endif %}
color: >
{% set current = state_attr('weather.home',
'temperature') | float(0) %} {% if current < 16 %}
#CEB2F5
{% elif current < 18 %}
#5EBDEE
{% elif current < 22 %}
#9cc8b8
{% elif current < 24 %}
#e7b562
{% elif current < 27 %}
#FF564B
{% else %}
#99332d
{% endif %}
features_position: bottom
multiline_secondary: true
- title: UV
icon: m3of:sunny
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
- title: UV Index & Cloud Coverage Forecast
- subtitle: "{{ states ('sensor.uv_and_cloud_summary') }}"
- type: vertical-stack
cards:
- type: custom:apexcharts-card
graph_span: 24h
span:
start: hour
now:
show: true
apex_config:
chart:
height: 240
legend:
show: true
grid:
yaxis:
lines:
show: false
xaxis:
crosshairs:
show: false
tooltip:
enabled: false
yaxis:
- id: uv
title:
text: UV Index
opposite: false
min: 0
max: 11
- id: cloud
title:
text: Cloud Coverage (%)
opposite: true
min: 0
max: 100
series:
- entity: >-
sensor.google_weather_hourly_forecasts_full_hourly_forecast
name: UV Index
type: line
curve: smooth
yaxis_id: uv
color: "#F9A825"
stroke_width: 2
data_generator: |
return entity.attributes.forecasts.map(f => {
if (f.uv_index == null) return null;
return { x: new Date(f.datetime).getTime(), y: f.uv_index };
}).filter(x => x !== null);
- entity: >-
sensor.google_weather_hourly_forecasts_full_hourly_forecast
name: Cloud Coverage
type: area
yaxis_id: cloud
color: "#90CAF9"
stroke_width: 1
opacity: 0.3
data_generator: |
return entity.attributes.forecasts.map(f => {
if (f.cloud_coverage == null) return null;
return { x: new Date(f.datetime).getTime(), y: f.cloud_coverage };
}).filter(x => x !== null);
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.forecast_uv_index
icon: mdi:weather-sunny-alert
primary: |
UV Index: {{ states('sensor.forecast_uv_index') }}
secondary: >
{% set uv = states('sensor.forecast_uv_index') |
float(0) %} {% if uv < 3 %}
Low - Safe outdoors
{% elif uv < 6 %}
Moderate - Use hat & sunglasses
{% elif uv < 8 %}
High - Apply sunscreen
{% elif uv < 11 %}
Very High - Seek shade
{% else %}
Extreme - Stay indoors
{% endif %}
color: >
{% set uv = states('sensor.forecast_uv_index') |
float(0) %} {% if uv < 3 %}
green
{% elif uv < 6 %}
yellow
{% elif uv < 8 %}
orange
{% elif uv < 11 %}
red
{% else %}
Green Bokeh
{% endif %}
features_position: bottom
multiline_secondary: true
- type: custom:mushroom-template-card
entity: sensor.forecast_cloud_coverage
icon: mdi:weather-cloudy
primary: |
Cloud: {{ states('sensor.forecast_cloud_coverage') }}%
secondary: >
{% set c = states('sensor.forecast_cloud_coverage') |
float(0) %} {% if c <= 25 %}
Clear skies - ideal visibility
{% elif c <= 50 %}
Partly cloudy - some sun breaks
{% elif c <= 75 %}
Mostly cloudy - limited sunshine
{% else %}
Overcast - likely dull conditions
{% endif %}
color: >
{% set c = states('sensor.forecast_cloud_coverage') |
float(0) %} {% if c <= 25 %}
blue
{% elif c <= 50 %}
light-blue
{% elif c <= 75 %}
grey
{% else %}
blue-grey
{% endif %}
features_position: bottom
multiline_secondary: true
- title: Wind
icon: m3of:storm
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
- title: Wind Speed & Direction Forecast
- subtitle: "{{ states ('sensor.wind_summary') }}"
- type: vertical-stack
cards:
- type: custom:apexcharts-card
graph_span: 24h
span:
start: hour
now:
show: true
apex_config:
chart:
height: 240
legend:
show: true
grid:
yaxis:
lines:
show: false
xaxis:
crosshairs:
show: false
tooltip:
enabled: false
yaxis:
- id: speed
title:
text: Wind Speed (km/h)
opposite: false
- id: direction
title:
text: Direction (°)
opposite: true
min: 0
max: 360
series:
- entity: >-
sensor.google_weather_hourly_forecasts_full_hourly_forecast
name: Speed
type: line
curve: smooth
yaxis_id: speed
color: "#0288D1"
stroke_width: 2
data_generator: |
return entity.attributes.forecasts.map(f => {
let speed = f.wind_speed;
speed = Math.round(speed * 10) / 10; // round to 1 decimal place
return { x: new Date(f.datetime).getTime(), y: speed };
});
- entity: >-
sensor.google_weather_hourly_forecasts_full_hourly_forecast
name: Direction
type: line
curve: smooth
yaxis_id: direction
color: "#8E24AA"
stroke_width: 1
data_generator: |
return entity.attributes.forecasts.map(f => {
let direction = Math.round(f.wind_bearing); // round to nearest integer
return { x: new Date(f.datetime).getTime(), y: direction };
});
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.forecast_wind_speed
icon: mdi:weather-windy
primary: >
Wind: {{ states('sensor.forecast_wind_speed') }} {{
state_attr('weather.home', 'wind_speed_unit') }}
secondary: >
{% set s = states('sensor.forecast_wind_speed') |
float(0) %} {% set d =
states('sensor.forecast_wind_direction') | float(0) %}
{% if s < 5 %}
Calm - Smooth air
{% elif s < 20 %}
Breezy - Light gusts
{% elif s < 40 %}
Windy - Secure items
{% elif s < 60 %}
Strong - Use caution
{% else %}
Gale - Stay indoors
{% endif %} ({{ d | round(0) }}°)
color: >
{% set s = states('sensor.forecast_wind_speed') |
float(0) %} {% if s < 5 %}
green
{% elif s < 20 %}
yellow
{% elif s < 40 %}
orange
{% elif s < 60 %}
red
{% else %}
Green Bokeh
{% endif %}
features_position: bottom
id: wind
- title: Radar
icon: m3of:radar
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
- title: Radar
- subtitle: >-
{% set w = states.weather.home.attributes %}🌡️ {{
w.temperature }}{{ w.temperature_unit }} 💧 Humidity: {{
w.humidity }}% 👁️ Visibility: {{ w.visibility }}km ☁️
Clouds: {{ w.cloud_coverage | round }}% 💨 Wind: {{
w.wind_speed }} {{ w.wind_speed_unit }} 🌤️ UV index: {{
w.uv_index }}
- type: custom:mod-card
card:
type: iframe
url: >-
https://embed.windy.com/embed2.html?lat=x&lon=y&width=800&height=600
style: |
ha-card {
padding: 0;
height: 350px !important; /* fix height */
width: 100% !important;
overflow: hidden;
}
iframe {
width: 100% !important;
height: 100% !important;
}
- title: Lunar
icon: m3of:moon-stars
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
- title: Lunar Cycle & Visibility
- subtitle: "{{ states ('sensor.moon_summary') }}"
- type: custom:lunar-phase-card
entity: ""
12hr_format: true
calendar_modal: false
compact_view: true
default_card: base
hide_buttons: false
mile_unit: false
moon_position: left
number_decimals: 2
selected_language: en
show_background: false
southern_hemisphere: false
use_custom: false
use_default: true
use_entity: false
graph_config:
graph_type: default
y_ticks: false
x_ticks: false
show_time: true
show_Temp: true
show_highest: true
y_ticks_position: left
y_ticks_step_size: 30
time_step_size: 30
font_customize:
header_font_size: medium
header_font_style: capitalize
label_font_size: small
label_font_style: none
label_font_color: ""
hide_label: false
latitude: -37.6421739
longitude: 175.527482
location:
city: ""
country: New Zealand
custom_background: >-
https://cdn.jsdelivr.net/gh/ngocjohn/lunar-phase-card@1.7.3/background/moon_bg_2.png
================================================
FILE: assets/Overview Page - Alarmo & Notificaton Chip
================================================
type: custom:mod-card
uix:
style: |
ha-card {
animation: fadeInRight 0.5s ease-out 0.5s;
}
@keyframes fadeInRight {
from {
opacity: 1;
transform: translateX(8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: custom:vertical-stack-in-card
cards:
- type: conditional
conditions:
- condition: state
entity: media_player.spotify_reynaldi_sutrisno
state: playing
card:
type: custom:simple-swipe-card
auto_hide_pagination: 0
auto_height: true
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Music Player
title_font_size: 20px
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: triggered
chip:
type: template
entity: alarm_control_panel.alarmo
content: Triggered
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:bell-ring
icon_color: "#d14f3a"
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: armed_away
chip:
type: template
entity: alarm_control_panel.alarmo
content: Armed
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:shield-lock
icon_color: "#69ac5a"
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: arming
chip:
type: template
entity: alarm_control_panel.alarmo
content: Arming
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:shield
icon_color: "#efa340"
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: pending
chip:
type: template
entity: alarm_control_panel.alarmo
content: Pending
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:shield-outline
icon_color: "#efa340"
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: disarmed
chip:
type: template
entity: alarm_control_panel.alarmo
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:shield-off
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.geonet_nz_quakes_37_6421739_175_527482
above: 0
chip:
type: template
entity: geonet.
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
icon: mdi:earth
icon_color: >
{% set mag =
state_attr('sensor.geonet_nz_quakes_37_6421739_175_527482',
'magnitude') | float(0) %} {% if mag >= 6.0 %}
#D32F2F {% elif mag >= 5.0 %} #F4511E {% elif mag >=
4.0 %} #FB8C00 {% elif mag >= 3.0 %} #F9A825 {% elif
mag >= 2.0 %} #FBC02D {% else %} #388E3C {% endif %}
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.volcano_rotorua
above: 0
chip:
type: template
entity: sensor.volcano_rotorua
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
icon: >
{{ state_attr('sensor.volcano_rotorua', 'icon') or
'mdi:image-filter-hdr' }}
icon_color: >
{% set level = states('sensor.volcano_rotorua') |
int %}
{% if level == 5 %} red
{% elif level == 4 %} deep-orange
{% elif level == 3 %} orange
{% elif level == 2 %} amber
{% elif level == 1 %} yellow
{% else %} green
{% endif %}
- type: conditional
conditions:
- condition: state
entity: sensor.home_metservice_weather_warnings
state_not: unknown
chip:
type: template
entity: sensor.home_metservice_weather_warnings
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
icon: mdi:alert
icon_color: orange
- type: template
entity: sensor.active_notification_count
icon: mdi:bell
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
hold_action:
action: none
uix:
style: >
ha-card {
position: relative;
}
{% set notifications =
states('sensor.active_notification_count') | int %}
{% if notifications > 0 %}
ha-card:after {
content: "{{ notifications }}";
position: absolute;
top: -3px;
right: -3px;
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent);
color: var(--md-sys-color-primary);
border-radius: 50%;
width: 16px;
height: 16px;
font-size: 10px;
line-height: 16px;
text-align: center;
display: inline-block;
font-weight: bold;
} {% endif %}
alignment: end
uix:
style: |
ha-card {
position: absolute;
top: 20px;
right: 5px;
}
- type: custom:mediocre-massive-media-player-card
entity_id: media_player.spotify_reynaldi_sutrisno
use_art_colors: true
mode: panel
action:
tap_action:
action: url
url_path: spotify://home
options:
show_volume_step_buttons: true
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: url
url_path: " intent:#Intent;launchFlags=0x10000000;component=com.spotify.music/.MainActivity;end"
icon: mdi:spotify
content: Open Spotify
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' }};
- type: custom:streamline-card
template: spacer_card
variables:
padding: 20px
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_navigation_card
title_font_size: 20px
variables:
title: Calendar
navigation_path: /tablet-dashboard/calendar
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: triggered
chip:
type: template
entity: alarm_control_panel.alarmo
content: Triggered
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:bell-ring
icon_color: "#d14f3a"
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: armed_away
chip:
type: template
entity: alarm_control_panel.alarmo
content: Armed
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:shield-lock
icon_color: "#69ac5a"
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: arming
chip:
type: template
entity: alarm_control_panel.alarmo
content: Arming
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:shield
icon_color: "#efa340"
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: pending
chip:
type: template
entity: alarm_control_panel.alarmo
content: Pending
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:shield-outline
icon_color: "#efa340"
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: disarmed
chip:
type: template
entity: alarm_control_panel.alarmo
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:shield-off
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.geonet_nz_quakes_37_6421739_175_527482
above: 0
chip:
type: template
entity: geonet.
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
icon: mdi:earth
icon_color: >
{% set mag =
state_attr('sensor.geonet_nz_quakes_37_6421739_175_527482',
'magnitude') | float(0) %} {% if mag >= 6.0 %}
#D32F2F {% elif mag >= 5.0 %} #F4511E {% elif mag >=
4.0 %} #FB8C00 {% elif mag >= 3.0 %} #F9A825 {% elif
mag >= 2.0 %} #FBC02D {% else %} #388E3C {% endif %}
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.volcano_rotorua
above: 0
chip:
type: template
entity: sensor.volcano_rotorua
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
icon: >
{{ state_attr('sensor.volcano_rotorua', 'icon') or
'mdi:image-filter-hdr' }}
icon_color: >
{% set level = states('sensor.volcano_rotorua') |
int %}
{% if level == 5 %} red
{% elif level == 4 %} deep-orange
{% elif level == 3 %} orange
{% elif level == 2 %} amber
{% elif level == 1 %} yellow
{% else %} green
{% endif %}
- type: conditional
conditions:
- condition: state
entity: sensor.home_metservice_weather_warnings
state_not: unknown
chip:
type: template
entity: sensor.home_metservice_weather_warnings
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
icon: mdi:alert
icon_color: orange
- type: template
entity: sensor.active_notification_count
icon: mdi:bell
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
hold_action:
action: none
uix:
style: >
ha-card {
position: relative;
} {% set notifications =
states('sensor.active_notification_count') | int %}
{% if notifications > 0 %}
ha-card:after {
content: "{{ notifications }}";
position: absolute;
top: -3px;
right: -3px;
background-color: var(--md-sys-color-primary);
color: var(--md-sys-color-surface-variant);
border-radius: 50%;
width: 16px;
height: 16px;
font-size: 10px;
line-height: 16px;
text-align: center;
display: inline-block;
font-weight: bold;
} {% endif %}
alignment: end
uix:
style: |
ha-card {
position: absolute;
top: 20px;
right: 5px;
}
- entities:
- entity: calendar.christina
accent_color: "#ff6a6a"
- entity: calendar.reynaldi_sutrisno_rs16_gmail_com
accent_color: "#71c8fe"
- entity: calendar.house_maintenance
accent_color: "#d3f37f"
- entity: calendar.new_zealand_holidays
accent_color: "#f9da4e"
days_to_show: 6
compact_events_to_show: 6
background_color: transparent
vertical_line_width: 5px
event_spacing: 6px
first_day_of_week: monday
show_week_numbers: iso
week_number_color: var(--md-sys-color-primary)
week_number_background_color: var(--md-sys-color-on-primary)
month_separator_width: 1px
month_separator_color: var(--md-sys-color-primary)
today_indicator: pulse
today_indicator_position: 10% 50%
today_indicator_color: var(--md-sys-color-primary)
weekday_font_size: 12px
month_font_size: 10px
show_countdown: true
show_progress_bar: true
progress_bar_color: var(--md-sys-color-primary)
weather:
position: event
date:
show_conditions: true
show_high_temp: true
show_low_temp: false
icon_size: 14px
font_size: 12px
color: var(--primary-text-color)
event:
show_conditions: true
show_temp: true
icon_size: 14px
font_size: 12px
color: var(--primary-text-color)
entity: weather.home
tap_action:
action: navigate
navigation_path: /tablet-dashboard/calendar
type: custom:calendar-card-pro
height: 435px
- type: vertical-stack
cards:
- type: custom:streamline-card
template: title_navigation_card
variables:
title: Backyard
navigation_path: /tablet-dashboard/camera
title_font_size: 20px
- type: custom:streamline-card
template: camera_rtsp_with_chips_card
variables:
camera_url: >-
ffmpeg:rtsp://username:password$@192.168.1.148/h264Preview_01_main#video=copy#audio=opus
entity_id_light_one: switch.patio_main_switch_la
light_one_icon: m3of:lightbulb
view_layout:
grid-area: camera4
- type: conditional
conditions:
- condition: state
entity: media_player.spotify_reynaldi_sutrisno
state_not: playing
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_navigation_card
variables:
title: Calendar
navigation_path: /tablet-dashboard/calendar
title_font_size: 20px
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: triggered
chip:
type: template
entity: alarm_control_panel.alarmo
content: Triggered
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:bell-ring
icon_color: "#d14f3a"
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: armed_away
chip:
type: template
entity: alarm_control_panel.alarmo
content: Armed
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:shield-lock
icon_color: "#69ac5a"
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: arming
chip:
type: template
entity: alarm_control_panel.alarmo
content: Arming
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:shield
icon_color: "#efa340"
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: pending
chip:
type: template
entity: alarm_control_panel.alarmo
content: Pending
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:shield-outline
icon_color: "#efa340"
- type: conditional
conditions:
- entity: alarm_control_panel.alarmo
state: disarmed
chip:
type: template
entity: alarm_control_panel.alarmo
tap_action:
action: navigate
navigation_path: /tablet-dashboard/alarmo
icon: mdi:shield-off
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.geonet_nz_quakes_37_6421739_175_527482
above: 0
chip:
type: template
entity: geonet.
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
icon: mdi:earth
icon_color: >
{% set mag =
state_attr('sensor.geonet_nz_quakes_37_6421739_175_527482',
'magnitude') | float(0) %} {% if mag >= 6.0 %} #D32F2F
{% elif mag >= 5.0 %} #F4511E {% elif mag >= 4.0 %}
#FB8C00 {% elif mag >= 3.0 %} #F9A825 {% elif mag >= 2.0
%} #FBC02D {% else %} #388E3C {% endif %}
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.volcano_rotorua
above: 0
chip:
type: template
entity: sensor.volcano_rotorua
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
icon: >
{{ state_attr('sensor.volcano_rotorua', 'icon') or
'mdi:image-filter-hdr' }}
icon_color: |
{% set level = states('sensor.volcano_rotorua') | int %}
{% if level == 5 %} red
{% elif level == 4 %} deep-orange
{% elif level == 3 %} orange
{% elif level == 2 %} amber
{% elif level == 1 %} yellow
{% else %} green
{% endif %}
- type: conditional
conditions:
- condition: state
entity: sensor.home_metservice_weather_warnings
state_not: unknown
chip:
type: template
entity: sensor.home_metservice_weather_warnings
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
icon: mdi:alert
icon_color: orange
- type: template
entity: sensor.active_notification_count
icon: mdi:bell
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
hold_action:
action: none
uix:
style: >
ha-card {
position: relative;
} {% set notifications =
states('sensor.active_notification_count') | int %}
{% if notifications > 0 %}
ha-card:after {
content: "{{ notifications }}";
position: absolute;
top: -2px;
right: 0px;
background-color: var(--md-sys-color-on-primary);
color: var(--md-sys-color-primary);
border-radius: 50%;
width: 16px;
height: 16px;
font-size: 10px;
line-height: 16px;
text-align: center;
display: inline-block;
font-weight: bold;
} {% endif %}
alignment: end
uix:
style: |
ha-card {
position: absolute;
top: 20px;
right: 5px;
}
- entities:
- entity: calendar.christina
accent_color: "#ff6a6a"
- entity: calendar.reynaldi_sutrisno_rs16_gmail_com
accent_color: "#71c8fe"
- entity: calendar.house_maintenance
accent_color: "#d3f37f"
- entity: calendar.new_zealand_holidays
accent_color: "#f9da4e"
days_to_show: 6
compact_events_to_show: 6
background_color: transparent
vertical_line_width: 5px
event_spacing: 6px
first_day_of_week: monday
show_week_numbers: iso
week_number_color: var(--md-sys-color-primary)
week_number_background_color: var(--md-sys-color-on-primary)
month_separator_width: 1px
month_separator_color: var(--md-sys-color-primary)
today_indicator: pulse
today_indicator_position: 10% 50%
today_indicator_color: var(--md-sys-color-primary)
weekday_font_size: 12px
month_font_size: 10px
show_countdown: true
show_progress_bar: true
progress_bar_color: var(--md-sys-color-primary)
weather:
position: event
date:
show_conditions: true
show_high_temp: true
show_low_temp: false
icon_size: 14px
font_size: 12px
color: var(--primary-text-color)
event:
show_conditions: true
show_temp: true
icon_size: 14px
font_size: 12px
color: var(--primary-text-color)
entity: weather.home
tap_action:
action: navigate
navigation_path: /tablet-dashboard/calendar
type: custom:calendar-card-pro
height: 430px
- type: vertical-stack
cards:
- type: custom:streamline-card
template: title_navigation_card
variables:
title: Backyard
navigation_path: /tablet-dashboard/camera
title_font_size: 20px
- type: custom:streamline-card
template: camera_rtsp_with_chips_card
variables:
camera_url: >-
ffmpeg:rtsp://username:password$@192.168.1.148/h264Preview_01_main#video=copy#audio=opus
entity_id_light_one: switch.patio_main_switch_la
light_one_icon: m3of:lightbulb
view_layout:
grid-area: camera4
view_layout:
grid-area: calendar_notification
================================================
FILE: assets/Overview Page - Calendar
================================================
entities:
- entity: calendar.calendar_1
accent_color: "#ff6a6a"
- entity: calendar.calendar_2
accent_color: "#71c8fe"
- entity: calendar.calendar_3
accent_color: "#d3f37f"
- entity: calendar.calendar_4
accent_color: "#f9da4e"
days_to_show: 6
compact_events_to_show: 6
background_color: transparent
vertical_line_width: 5px
event_spacing: 6px
first_day_of_week: monday
show_week_numbers: iso
week_number_color: var(--md-sys-color-on-primary)
week_number_background_color: var(--md-sys-color-primary)
month_separator_width: 1px
month_separator_color: var(--md-sys-color-tertiary)
today_indicator: pulse
today_indicator_position: 10% 50%
today_indicator_color: var(--md-sys-color-primary)
weekday_font_size: 12px
month_font_size: 10px
show_countdown: true
show_progress_bar: true
progress_bar_color: var(--md-sys-color-primary)
weather:
position: event
date:
show_conditions: true
show_high_temp: true
show_low_temp: false
icon_size: 14px
font_size: 12px
color: var(--primary-text-color)
event:
show_conditions: true
show_temp: true
icon_size: 14px
font_size: 12px
color: var(--primary-text-color)
entity: weather.forecast_home
tap_action:
action: navigate
navigation_path: /tablet-dashboard/calendar
type: custom:calendar-card-pro
height: 435px
================================================
FILE: assets/Overview Page - Climate, Toggles, Irrigation, Hue Scene Tabs
================================================
type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.5s both;
}
@keyframes fadeInDown {
from {
opacity: 1;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:simple-tabs
pre-load: true
alignment: start
active-background: var(--md-sys-color-primary)
active-text-color: var(--md-sys-color-on-primary)
text-color: var(--primary-text-color)
tabs:
- title: Climate
icon: m3of:heat-pump
cards:
- type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
entity: sensor.house_average_temperature
primary: >
{{ states(entity) | round(1) }} {{
state_attr('weather.home', 'temperature_unit') }}
secondary: |
Indoor
icon: |
{% set hvac_mode = states('climate.heat_pump') %}
{% if hvac_mode == 'heat' %} mdi:fire
{% elif hvac_mode == 'cool' %} mdi:snowflake
{% elif hvac_mode == 'fan_only' %} mdi:fan
{% else %} m3of:thermometer
{% endif %}
icon_color: |
{% set hvac_mode = states('climate.heat_pump') %}
{% if hvac_mode == 'heat' %} #FF6F22
{% elif hvac_mode == 'cool' %} #2196F3
{% elif hvac_mode == 'fan_only' %} #029688
{% else %}
{% set temp = states('sensor.house_average_temperature') | float %}
{% if temp < 13 %}
#B4A5B7
{% elif temp < 16 %}
#DBC9DE
{% elif temp < 19 %}
#ACDCF6
{% elif temp < 22 %}
#D2E5DE
{% elif temp < 24 %}
#FFE7A3
{% elif temp < 27 %}
#F7C48D
{% else %}
#E37575
{% endif %}
{% endif %}
tap_action:
action: more-info
uix:
style: |
{% set hvac_mode = states('climate.heat_pump') %}
ha-card {
{% if hvac_mode == 'heat' %}
animation: heat-flicker 1.5s ease-in-out infinite;
{% elif hvac_mode == 'cool' %}
animation: cool-shimmer 2s ease-in-out infinite;
{% elif hvac_mode == 'fan_only' %}
animation: fan-wobble 2s ease-in-out infinite;
{% endif %}
}
@keyframes heat-flicker {
0%, 100% {
transform: scale(1);
filter: brightness(1);
}
25% {
transform: scale(1.02);
filter: brightness(1.1);
}
50% {
transform: scale(1);
filter: brightness(0.95);
}
75% {
transform: scale(1.02);
filter: brightness(1.05);
}
}
@keyframes cool-shimmer {
0%, 100% {
transform: translateY(0px);
opacity: 1;
}
50% {
transform: translateY(-2px);
opacity: 0.9;
}
}
@keyframes fan-wobble {
0%, 100% {
transform: rotate(0deg) scale(1);
}
25% {
transform: rotate(1deg) scale(1.01);
}
50% {
transform: rotate(0deg) scale(1.02);
}
75% {
transform: rotate(-1deg) scale(1.01);
}
}
mushroom-shape-icon {
{% if hvac_mode == 'heat' %}
animation: icon-heat-pulse 1s ease-in-out infinite !important;
{% elif hvac_mode == 'cool' %}
animation: icon-cool-float 3s ease-in-out infinite !important;
{% elif hvac_mode == 'fan_only' %}
animation: icon-fan-rotate 3s linear infinite !important;
{% endif %}
}
@keyframes icon-heat-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
@keyframes icon-cool-float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-3px) rotate(5deg); }
}
@keyframes icon-fan-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
- type: custom:mushroom-template-card
entity: sensor.outdoor_temperature
primary: >
{{ states(entity) | round(1) }} {{
state_attr('weather.home', 'temperature_unit') }}
secondary: |
Outdoor
icon: "{{ states('sensor.weather_condition_icon') }}"
icon_color: >
{% set temp = state_attr('weather.home', 'temperature')
| float %}
{% if temp < 13 %}
#988C9B
{% elif temp < 16 %}
#BAABBD
{% elif temp < 19 %}
#92BB D1
{% elif temp < 22 %}
#B2C4BD
{% elif temp < 24 %}
#D8C48A
{% elif temp < 27 %}
#D2A676
{% else %}
#C26161
{% endif %}
tap_action:
action: more-info
- type: custom:config-template-card
entities:
- climate.heat_pump
- sensor.house_average_temperature
- sensor.outdoor_temperature
variables:
- states['climate.heat_pump'].state
- states['sensor.house_average_temperature'].state
- states['sensor.outdoor_temperature'].state
card:
type: custom:mini-graph-card
entities:
- entity: sensor.house_average_temperature
name: Indoor
color: |-
${vars[0] === 'heat' ? '#FF6F22' :
(vars[0] === 'cool' ? '#2196F3' :
(vars[0] === 'fan_only' ? '#029688' :
(vars[1] < 13 ? '#B4A5B7' :
(vars[1] < 16 ? '#DBC9DE' :
(vars[1] < 19 ? '#ACDCF6' :
(vars[1] < 22 ? '#D2E5DE' :
(vars[1] < 24 ? '#FFE7A3' :
(vars[1] < 27 ? '#F7C48D' : '#E37575'))))))))}
- entity: sensor.outdoor_temperature
name: Outdoor
color: |-
${vars[2] < 13 ? '#988C9B' :
(vars[2] < 16 ? '#BAABBD' :
(vars[2] < 19 ? '#92BBD1' :
(vars[2] < 22 ? '#B2C4BD' :
(vars[2] < 24 ? '#D8C48A' :
(vars[2] < 27 ? '#D2A676' :'#C26161')))))}
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.heat_pump
primary_info: none
secondary_info: none
icon_type: none
show_temperature_control: true
- type: custom:mushroom-climate-card
entity: climate.heat_pump
primary_info: none
secondary_info: none
icon_type: none
hvac_modes:
- cool
- heat
- fan_only
- "off"
- title: Toggles
icon: m3of:automation
card:
type: custom:simple-swipe-card
auto_hide_pagination: 0
auto_height: true
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
entity: sensor.disabled_room_occupancy_count
name: Room Occupancy
show_state: false
show_icon: false
show_label: true
label: |-
[[[
const disabled = parseInt(entity.state);
if (disabled === 0) return 'All rooms active';
if (disabled === 1) return '1 room disabled';
return `${disabled} rooms disabled`;
]]]
styles:
card:
- background: >-
var(--ha-card-background,
var(--card-background-color, white))
- border-radius: var(--ha-card-border-radius, 12px)
- padding: 12px
name:
- text-align: center
- font-size: 16px
- font-weight: bold
label:
- text-align: center
- font-size: 14px
- color: var(--secondary-text-color)
tap_action:
action: none
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: input_boolean.baby_room_occupancy
icon: m3of:stroller
icon_color: >-
{% if is_state(entity, 'on') %} #f385bc {% else %}
#a8a8a8 {% endif %}
tap_action:
action: toggle
content: "{% if is_state(entity, 'on') %}Baby{% endif %}"
- type: template
entity: input_boolean.master_bedroom_occupancy
icon: m3of:bed
icon_color: >-
{% if is_state(entity, 'on') %}#89CFF0 {% else %}
#a8a8a8 {% endif %}
tap_action:
action: toggle
content: "{% if is_state(entity, 'on') %}Master{% endif %}"
- type: template
entity: input_boolean.single_guest_room_occupancy
icon: m3of:person-3
icon_color: >-
{% if is_state(entity, 'on') %} #FFA500 {% else %}
#a8a8a8 {% endif %}
tap_action:
action: toggle
content: "{% if is_state(entity, 'on') %}Single{% endif %}"
- type: template
entity: input_boolean.multiple_guest_room_occupancy
icon: m3of:groups-2
icon_color: >-
{% if is_state(entity, 'on') %}#A52A2A {% else %}
#a8a8a8 {% endif %}
tap_action:
action: toggle
content: "{% if is_state(entity, 'on') %}Multiple{% endif %}"
- type: template
entity: input_boolean.play_room_occupancy
icon: mdi:gamepad-variant
icon_color: >-
{% if is_state(entity, 'on') %}#9F2B68 {% else %}
#a8a8a8 {% endif %}
tap_action:
action: toggle
content: "{% if is_state(entity, 'on') %}Play{% endif %}"
- type: custom:streamline-card
template: spacer_card
variables:
padding: 20px
- type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
entity: sensor.disabled_presence_automation_count
name: Presence Status
show_state: false
show_icon: false
show_label: true
label: |-
[[[
const disabled = parseInt(entity.state);
if (disabled === 0) return 'All rooms active';
if (disabled === 1) return '1 room disabled';
return `${disabled} rooms disabled`;
]]]
styles:
card:
- background: >-
var(--ha-card-background,
var(--card-background-color, white))
- border-radius: var(--ha-card-border-radius, 12px)
- padding: 12px
name:
- text-align: center
- font-size: 16px
- font-weight: bold
label:
- text-align: center
- font-size: 14px
- color: var(--secondary-text-color)
tap_action:
action: none
features_position: bottom
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.presence_active_la
icon: mdi:sofa
icon_color: |-
{% if is_state(entity, 'on') %}
{% else %}
var(--primary-text-color)
{% endif %}
tap_action:
action: perform-action
perform_action: script.toggle_presence_sensor_la
target: {}
content: |-
{% if is_state(entity, 'on') %}
Living
{% else %}
{% endif %}
- type: template
entity: automation.room_presence_master_bedroom
icon: m3of:bed
icon_color: |-
{% if is_state(entity, 'on') %}
{% else %}
#a8a8a8
{% endif %}
tap_action:
action: toggle
content: |-
{% if is_state(entity, 'on') %}
Master
{% else %}
{% endif %}
- type: template
entity: automation.room_presence_baby_room
icon: m3of:stroller
icon_color: |-
{% if is_state(entity, 'on') %}
{% else %}
#a8a8a8
{% endif %}
tap_action:
action: toggle
content: |-
{% if is_state(entity, 'on') %}
Baby
{% else %}
{% endif %}
- type: template
entity: automation.room_presence_single_guest_room
icon: m3of:person-3
icon_color: |-
{% if is_state(entity, 'on') %}
{% else %}
#a8a8a8
{% endif %}
tap_action:
action: toggle
content: |-
{% if is_state(entity, 'on') %}
Single
{% else %}
{% endif %}
- type: template
entity: automation.room_presence_multiple_guest_room
icon: m3of:groups-2
icon_color: |-
{% if is_state(entity, 'on') %}
{% else %}
#a8a8a8
{% endif %}
tap_action:
action: toggle
content: |-
{% if is_state(entity, 'on') %}
Multiple
{% else %}
{% endif %}
- type: template
entity: automation.room_presence_office
icon: m3of:computer
icon_color: |-
{% if is_state(entity, 'on') %}
{% else %}
#a8a8a8
{% endif %}
tap_action:
action: toggle
content: |-
{% if is_state(entity, 'on') %}
Office
{% else %}
{% endif %}
alignment: center
- type: custom:streamline-card
template: spacer_card
variables:
padding: 20px
- type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
entity: sensor.disabled_driveway_camera_count
name: Driveway Security
show_state: false
show_icon: false
show_label: true
label: |-
[[[
const disabled = parseInt(entity.state);
if (disabled === 0) return 'All cameras active';
if (disabled === 1) return '1 camera disabled';
return `${disabled} cameras disabled`;
]]]
styles:
card:
- background: >-
var(--ha-card-background,
var(--card-background-color, white))
- border-radius: var(--ha-card-border-radius, 12px)
- padding: 12px
name:
- text-align: center
- font-size: 16px
- font-weight: bold
label:
- text-align: center
- font-size: 14px
- color: var(--secondary-text-color)
tap_action:
action: none
- type: custom:mushroom-chips-card
chips:
- type: template
entity: automation.driveway_camera_person_notification
icon: mdi:account
icon_color: |-
{% if is_state(entity, 'on') %}
{% else %}
#a8a8a8
{% endif %}
tap_action:
action: toggle
content: |-
{% if is_state(entity, 'on') %}
Person
{% else %}
{% endif %}
- type: template
entity: automation.driveway_camera_vehicle_notification
icon: mdi:car
icon_color: |-
{% if is_state(entity, 'on') %}
{% else %}
#a8a8a8
{% endif %}
tap_action:
action: toggle
content: |-
{% if is_state(entity, 'on') %}
Vehicle
{% else %}
{% endif %}
alignment: center
- type: custom:streamline-card
template: spacer_card
variables:
padding: 20px
- title: Irrigation
icon: m3of:sprinkler
cards:
- type: custom:streamline-card
template: spacer_card
variables:
padding: 2px
- type: custom:mushroom-template-card
primary: Open Irrigation Page
secondary: Tap to navigate to irrigation
icon: m3of:sprinkler
features_position: bottom
vertical: true
tap_action:
action: navigate
navigation_path: /tablet-dashboard/irrigation
- title: Hue Scenes
icon: mdi:layers
cards:
- type: custom:streamline-card
template: spacer_card
variables:
padding: 2px
- type: custom:mushroom-template-card
primary: Open Scenes Page
secondary: Tap to navigate to scene
icon: mdi:layers
features_position: bottom
vertical: true
tap_action:
action: navigate
navigation_path: /tablet-dashboard/scenes
hide_inactive_tab_titles: true
view_layout:
grid-area: simple_tab
================================================
FILE: assets/Overview Page - Live Camera Feeds
================================================
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_navigation_card
variables:
title: Left Walkway
navigation_path: /tablet-dashboard/camera
- type: custom:streamline-card
template: camera_generic_with_chips_card
variables:
camera_entity: camera.left_walkway_camera_fluent
entity_id_light_one: switch.outdoor_light_switch_lr
light_one_icon: mdi:outdoor-lamp
entity_id_light_two: switch.rear_light_switch_grg
light_two_icon: mdi:outdoor-lamp
================================================
FILE: assets/Overview Page - Media Card
================================================
type: custom:mediocre-massive-media-player-card
entity_id: media_player.your_media
mode: card
action: {}
speaker_group:
entities:
- entity: media_player.living_area_soundbar
name: Living Area Soundbar
- entity: media_player.nestmini8699
name: Master Bedroom
search:
enabled: true
show_favorites: false
card_mod:
class: filled
================================================
FILE: assets/Overview Page - Room Cards
================================================
type: custom:vertical-stack-in-card
cards:
- type: conditional
conditions:
- entity: input_boolean.room_toggle_one
state: "on"
card:
type: horizontal-stack
cards:
- type: custom:streamline-card
template: room_card
variables:
name: Garage
icon: mdi:garage-variant
entity_id_temperature: sensor.garage_temperature
entity_id_humidity: sensor.garage_humidity
entity_id_lights: switch.lights_grg
lights_icon: hue:recessed-ceiling
lights_count_sensor: sensor.lights_grg_count
entity_id_windows: group.windows_grg
windows_count_sensor: sensor.windows_grg_count
entity_id_doors: group.doors_grg
doors_count_sensor: sensor.doors_grg_count
navigation_path: /tablet-dashboard/garage/
- type: custom:streamline-card
template: room_card
variables:
name: Living Area
icon: mdi:sofa
entity_id_temperature: sensor.living_room_temperature
entity_id_humidity: sensor.living_area_humidity
entity_id_ac_main: climate.heat_pump
entity_id_ac: climate.living_room
entity_id_lights: light.lights_la
lights_icon: hue:recessed-ceiling
lights_count_sensor: sensor.lights_la_count
entity_id_windows: group.windows_la
windows_count_sensor: sensor.windows_la_count
entity_id_doors: group.doors_la
doors_count_sensor: sensor.doors_la_count
navigation_path: /tablet-dashboard/living-area/
- type: conditional
conditions:
- condition: state
entity: input_boolean.room_toggle_two
state: "on"
card:
type: horizontal-stack
cards:
- type: custom:streamline-card
template: room_card
variables:
name: Attic
icon: mdi:home-roof
entity_id_temperature: sensor.attic_temperature
entity_id_humidity: sensor.attic_humidity
entity_id_lights: switch.light_switch_atc
lights_count_sensor: sensor.lights_atc_count
lights_icon: hue:recessed-ceiling
entity_id_doors: binary_sensor.door_sensor_atc_contact
doors_count_sensor: sensor.doors_atc_count
navigation_path: /tablet-dashboard/attic
- type: custom:streamline-card
template: room_card
variables:
name: Entrance
icon: mdi:table-furniture
entity_id_temperature: sensor.living_room_temperature
entity_id_humidity: sensor.living_area_humidity
entity_id_lights: light.lights_etr_all
lights_count_sensor: sensor.lights_etr_count
lights_icon: mdi:lightbulb-group
entity_id_doors: binary_sensor.door_sensor_etr_contact
doors_count_sensor: sensor.doors_etr_count
navigation_path: /tablet-dashboard/entrance/
- type: conditional
conditions:
- condition: state
entity: input_boolean.room_toggle_three
state: "on"
card:
type: horizontal-stack
cards:
- type: custom:streamline-card
template: room_card
variables:
name: Driveway
icon: mdi:car
entity_id_temperature: sensor.outdoor_temperature
entity_id_humidity: sensor.outdoor_humidity
entity_id_lights: group.light_switches_drw
lights_count_sensor: sensor.lights_drw_count
lights_icon: hue:recessed-ceiling
entity_id_doors: group.doors_drw
doors_count_sensor: sensor.doors_drw_count
navigation_path: /tablet-dashboard/driveway/
- type: custom:streamline-card
template: room_card
variables:
name: Patio
icon: mdi:grass
entity_id_temperature: sensor.outdoor_temperature
entity_id_humidity: sensor.outdoor_humidity
entity_id_lights: switch.lights_patio
lights_count_sensor: sensor.lights_otd_count
lights_icon: hue:recessed-ceiling
entity_id_doors: group.doors_otd
doors_count_sensor: sensor.doors_otd_count
navigation_path: /tablet-dashboard/patio/
view_layout:
grid-area: room1
================================================
FILE: assets/Overview Page - Weather Forecast
================================================
type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.8s both;
}
@keyframes fadeInDown {
from {
opacity: 1;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_subtitle_navigation_card
variables:
title: Weather Forecast
subtitle: "{{ states ('sensor.next_rain_summary') }}"
navigation_path: /tablet-dashboard/notifications
title_font_size: 20px
- type: custom:clock-weather-card-hui-icons
entity: weather.home
sun_entity: sun.sun
temperature_sensor: sensor.outdoor_temperature
humidity_sensor: sensor.outdoor_humidity
forecast_rows: 5
locale: en-NZ
time_pattern: HH:mm
time_format: 12
date_pattern: ccc, d.MM.yy
hide_today_section: true
hide_forecast_section: false
show_humidity: false
hide_clock: true
hide_date: false
hourly_forecast: false
use_browser_time: false
time_zone: null
show_decimal: false
view_layout:
grid-area: weather
================================================
FILE: assets/Overview Page - greeting
================================================
type: vertical-stack
cards:
- type: custom:mushroom-title-card
alignment: start
title: |
{{ now().strftime('%a %b %-d - %-I:%M %p') }}
uix:
style: |
ha-card {
animation: fadeInDown 1.0s ease-out;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
- type: custom:paper-buttons-row
styles:
justify-content: flex-start
flex-wrap: wrap
font-size: 0.9em
line-height: 1.2em
margin: 6px 0 2px 0
width: 100%
buttons:
- layout: name|icon
entity: weather.home
name: >-
{% set temp = state_attr('weather.home', 'temperature') %} {% set unit
= state_attr('weather.home', 'temperature_unit') %} {% set condition =
states('weather.forecast_home') | title %} {% if
is_state('binary_sensor.outdoor_rain_sensor_water_leak', 'on') %}
{{ temp }} {{ unit }}, Raining
{% else %}
{{ temp }} {{ unit }}, {{ condition }}
{% endif %}
icon: >-
{% if is_state('binary_sensor.outdoor_rain_sensor_water_leak', 'on')
%}
mdi:weather-pouring
{% else %}
{{ states('sensor.weather_condition_icon') }}
{% endif %}
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
styles:
icon:
color: var(--md-sys-color-primary)
name:
color: var(--md-sys-color-primary)
font-weight: bold
button:
padding: 2px 8px
background-color: >-
color-mix(in srgb, var(--md-sys-color-on-primary) 25%,
transparent)
border-radius: 24px
flex-basis: 1
flex-shrink: 0
display: flex
animation: slideInLeft 0.3s ease-out 0.5s both
transition: all 0.3s ease
- layout: name
name: ·
styles:
button:
flex-basis: 1
flex-shrink: 0
animation: fadeIn 0.8s ease-out 1.1s both
name:
color: var(--primary-text-color)
tap_action:
action: none
- layout: name
entity: weather.home
name: >-
{% set forecast =
state_attr('sensor.daily_weather_data_google_weather',
'forecast_data') %} {% if forecast is defined and
forecast.temperature is defined %}
{{ forecast.temperature | round(0) | int }}°🔺 / {{ forecast.templow | round(0) | int }}° {{ state_attr('weather.home', 'temperature_unit') }}🔻
{% else %}
N/A {{ state_attr('weather.home', 'temperature_unit') }}
{% endif %}
tap_action:
action: navigate
navigation_path: /tablet-dashboard/notifications
styles:
name:
color: var(--md-sys-color-primary)
font-weight: bold
button:
padding: 2px 8px
background-color: >-
color-mix(in srgb, var(--md-sys-color-on-primary) 25%,
transparent)
border-radius: 24px
flex-basis: 1
flex-shrink: 0
display: flex
animation: slideInLeft 0.3s ease-out 0.9s both
transition: all 0.3s ease
uix:
style: |
ha-card {
overflow: visible !important;
}
@keyframes fadeIn {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
- type: custom:button-card
show_entity_picture: false
show_icon: false
show_label: true
entity: |
[[[ return user.name == "Rey" ? "person.rey" : "person.christina";
]]]
name: |
[[[
const hour = new Date().getHours();
let greeting = "";
if (hour >= 22 || hour < 5) greeting = "🌘✨ Night";
else if (hour >= 18) greeting = "🌙 Evening";
else if (hour >= 12) greeting = "🌤️ Afternoon";
else greeting = "☕ Morning";
const name = user.name == "Rey" ? "Rey" : "Christina";
return `${greeting}, ${name}!`;
]]]
label: |
[[[
const s = entity.state;
if (s === "home") return "Home";
return "Away";
]]]
tap_action:
action: navigate
navigation_path: /tablet-dashboard/timeline
styles:
card:
- padding: 12px -2px 12px 12px
- background: none
- box-shadow: none
grid:
- grid-template-areas: "\"pic n one\" \"pic l one\""
- grid-template-rows: min-content min-content
- grid-template-columns: 50px 1fr 150px
name:
- justify-self: start
- align-self: center
- font-size: 15px
- padding-left: 15px
label:
- justify-self: start
- align-self: start
- font-size: 12px
- color: var(--contrast14)
- padding-left: 15px
custom_fields:
pic:
card:
type: custom:button-card
entity: >
[[[ return user.name == "Rey" ? "person.rey" : "person.christina";
]]]
show_name: false
show_entity_picture: true
tap_action:
action: navigate
navigation_path: /tablet-dashboard/timeline
styles:
card:
- position: relative
- overflow: visible
entity_picture:
- width: 40px
- height: 40px
- border-radius: 12px
- z-index: 1
- filter: |
[[[
const activeZones = ['home'];
const state = states[entity.entity_id]?.state;
return activeZones.includes(state)
? 'none'
: 'grayscale(100%) brightness(70%)';
]]]
- opacity: |
[[[
const activeZones = ['home'];
const state = states[entity.entity_id]?.state;
return activeZones.includes(state) ? '1' : '0.7';
]]]
img_cell:
- background-color: var(--contrast1)
- width: 40px
- height: 40px
- border-radius: 12px
- overflow: visible
one:
card:
type: custom:button-card
entity: >
[[[ return user.name == "Rey" ? "person.christina" : "person.rey";
]]]
show_name: false
show_entity_picture: true
tap_action:
action: more-info
state:
- value: not_home
styles:
entity_picture:
- filter: grayscale(100%)
- opacity: 0.5
styles:
card:
- position: relative
- overflow: visible
entity_picture:
- width: 40px
- height: 40px
- border-radius: 12px
- z-index: 1
- filter: |
[[[
const activeZones = ['home'];
const state = states[entity.entity_id]?.state;
return activeZones.includes(state)
? 'none'
: 'grayscale(100%) brightness(70%)';
]]]
- opacity: |
[[[
const activeZones = ['home'];
const state = states[entity.entity_id]?.state;
return activeZones.includes(state) ? '1' : '0.7';
]]]
img_cell:
- background-color: var(--contrast1)
- width: 40px
- height: 40px
- border-radius: 12px
- overflow: visible
uix:
style: |
ha-card {
animation: slideDown 0.5s ease-out 0.6s both;
}
@keyframes slideDown {
from {
opacity: 1;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
view_layout:
grid-area: greeting
================================================
FILE: assets/Scene Card Example
================================================
type: custom:streamline-card
template: scene_card
variables:
entity: scene.luxaflex_naar_70
name: (Nieuw) Luxaflex beneden naar 70
================================================
FILE: assets/Server Page - Battery Overview
================================================
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Devices
- type: custom:auto-entities
card:
type: grid
square: false
columns: 1
card_param: cards
filter:
include:
- options:
type: custom:mushroom-template-card
icon: |
{% set v = states(entity) | default(0) | int %}
{% if v < 10 %}
mdi:battery-alert-variant-outline
{% elif v < 25 %}
mdi:battery-10
{% elif v < 40 %}
mdi:battery-30
{% elif v < 60 %}
mdi:battery-50
{% endif %}
primary: |
{{ states(entity) }}%
secondary: |
{{ state_attr(entity, 'friendly_name') }} -
updated: {{ relative_time(states[entity].last_updated) }} ago
icon_color: |
{% set v = states(entity) | default(0) | int %}
{% if v < 25 %}
red
{% elif v < 60 %}
yellow
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
entity_id: "*battery*"
state: < 60
exclude:
- options: {}
state: "*AAA*"
- options: {}
state: "*AA*"
- options: {}
state: "*.0%*"
show_empty: false
sort:
method: friendly_name
================================================
FILE: assets/Server Page - Proxmox and HAOS overview
================================================
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
title: Proxmox
subtitle: >-
{% set cpu = states('sensor.node_pve_cpu_used') | float(0) %}{% set mem
= states('sensor.node_pve_memory_used_percentage') | float(0) %}{% set
temp = states('sensor.disk_pve_bc511_nvme_sk_hynix_256gb_temperature') |
float(0) %}{% if cpu > 75 or mem > 75 or temp > 70 %}🟥 CPU: {{ cpu |
round(1) }}% • Memory: {{ mem | round(1) }}% • NVMe: {{ temp | round(1)
}}{{ state_attr('weather.forecast_home', 'temperature_unit') }}{%
elif cpu > 50 or mem > 50 or temp > 55 %}🟧 CPU: {{ cpu | round(1) }}% •
Memory: {{ mem | round(1) }}% • NVMe: {{ temp | round(1) }}{{
state_attr('weather.forecast_home', 'temperature_unit') }}{% else %}🟩
CPU: {{ cpu | round(1) }}% • Memory: {{ mem | round(1) }}% • NVMe: {{
temp | round(1) }}{{ state_attr('weather.forecast_home',
'temperature_unit') }}{% endif %}
- type: horizontal-stack
cards:
- type: gauge
entity: sensor.disk_pve_bc511_nvme_sk_hynix_256gb_temperature
name: SSD Temperature
min: 20
max: 80
severity:
green: 40
yellow: 55
red: 70
unit: °C
- type: gauge
entity: sensor.node_pve_memory_used
name: Memory Used
max: 16.57
severity:
green: 6
yellow: 8
red: 12
- type: custom:streamline-card
template: title_subtitle_card
variables:
- title: HA OS
- subtitle: >-
{% set cpu = states('sensor.qemu_haos14_2_100_cpu_used') | float(0)
%}{% set mem = states('sensor.qemu_haos14_2_100_memory_used') |
float(0) %}{% set health =
states('binary_sensor.qemu_haos14_2_100_health') %}{% set boot =
states('sensor.qemu_haos14_2_100_last_boot') %}{% if cpu > 75 or mem >
75 or health == 'on' %}🟥{% elif cpu > 50 or mem > 50 %}🟧{% else
%}🟩{% endif %} CPU: {{ cpu | round(1) }}% • MEM: {{ mem | round(1)
}}%
Health: {{ 'OK' if health == 'off' else '❌'}} • Last Boot: {{
as_timestamp(boot) | timestamp_custom('%d %b %H:%M') }}
- type: horizontal-stack
cards:
- type: gauge
entity: sensor.qemu_haos14_2_100_memory_free
name: Memory Free
max: 8.59
severity:
green: 6
yellow: 3
red: 0
- type: gauge
entity: sensor.qemu_haos14_2_100_memory_used
name: Memory Used
max: 8.59
severity:
green: 3
yellow: 4
red: 6
================================================
FILE: assets/asset_placeholder
================================================
================================================
FILE: assets/streamline_templates collection
================================================
streamline_templates:
title_card:
variables:
title: ''
card:
type: custom:mushroom-title-card
title: '[[title]]'
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
}
title_subtitle_card:
variables:
title: ''
subtitle: ''
card:
type: custom:mushroom-title-card
title: '[[title]]'
subtitle: '[[subtitle]]'
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
--subtitle-font-size: 14px !important;
}
title_subtitle_navigation_card:
variables:
title: ''
subtitle: ''
navigation_path: ''
card:
type: custom:mushroom-title-card
title: '[[title]]'
subtitle: '[[subtitle]]'
title_tap_action:
action: navigate
navigation_path: '[[navigation_path]]'
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
--subtitle-font-size: 14px !important;
}
title_navigation_card:
variables:
title: ''
navigation_path: ''
card:
type: custom:mushroom-title-card
title: '[[title]]'
title_tap_action:
action: navigate
navigation_path: '[[navigation_path]]'
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
}
date_clock_text_card:
variables:
subtitle: ''
card:
type: custom:mushroom-title-card
subtitle: '[[subtitle]]'
card_mod:
style: |
ha-card {
--subtitle-font-size: 12px !important;
}
back_button_card:
variables:
navigation_path: ''
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: navigate
navigation_path: '[[navigation_path]]'
icon: m3of:arrow-left-alt
card_mod:
style:
.: |
ha-card {
--color: var(--md-sys-color-primary);
--chip-background: var(--md-sys-color-on-primary);
margin_top: 0.7em;
}
room_card:
default:
- name: ''
- icon: ''
- navigation_path: ''
- entity_id_temperature: ''
- entity_id_humidity: ''
- entity_id_ac: ''
- entity_id_ac_main: ''
- entity_id_lights: ''
- entity_id_covers: ''
- entity_id_fans: ''
- entity_id_doors: ''
- entity_id_windows: ''
- entity_id_custom_1: ''
- entity_id_custom_2: ''
- entity_id_custom_3: ''
- entity_id_custom_4: ''
- room_background: '#f5f5f5'
- lights_count_sensor: ''
- covers_count_sensor: ''
- fans_count_sensor: ''
- doors_count_sensor: ''
- windows_count_sensor: ''
- lights_icon: ''
- custom_1_icon: ''
- custom_2_icon: ''
- custom_3_icon: ''
- custom_4_icon: ''
- custom_1_color: ''
- custom_2_color: ''
- custom_3_color: ''
- custom_4_color: ''
card:
type: custom:stack-in-card
mode: horizontal
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: '[[name]]'
secondary: >
{% set temp = states('[[entity_id_temperature]]') %} {% set hum
= states('[[entity_id_humidity]]') %} {% set unit =
state_attr('weather.home', 'temperature_unit') or '°C' %} {% set
parts = [] %} {% if temp | is_number %}
{% set parts = parts + [temp | round(1) ~ unit] %}
{% endif %} {% if hum | is_number %}
{% set parts = parts + [hum | round(1) ~ '%'] %}
{% endif %} {{ parts | join(' / ') }}
tap_action:
action: navigate
navigation_path: '[[navigation_path]]'
card_mod:
style: |
ha-card {
--primary-text-color: black;
border: 0;
padding: 5px 0 0 5px;
width: 500px;
}
- type: custom:mushroom-template-card
entity: '[[entity_id_lights]]'
layout: horizontal
icon: '[[icon]]'
icon_color: >-
{{ 'rgba(252, 242, 212, 1)' if is_state('[[entity_id_lights]]',
'on') else 'rgba(91, 91, 91, 1)' }}
tap_action:
action: navigate
navigation_path: '[[navigation_path]]'
card_mod:
style:
ha-tile-icon$: |
.container {
width: 120px !important;
height: 120px !important;
border-radius: 50%;
}
.: |
ha-tile-icon {
--mdc-icon-size: 90px;
}
ha-card {
border: none;
margin: -8px 0 0 -28px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_ac_main]]'
state_not: unknown
- condition: state
entity: '[[entity_id_ac_main]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_ac]]'
tap_action:
action: toggle
icon: |
{% if is_state('[[entity_id_ac]]', 'off') %}
m3o:heat-pump
{% else %}
m3of:heat-pump
{% endif %}
card_mod:
style: |
{% set ac_main = states('[[entity_id_ac_main]]') %}
{% set ac = states('[[entity_id_ac]]') %}
ha-card {
--chip-background:
{% if ac == 'heat_cool' and ac_main == 'cool' %}
#b5e0f7
{% elif ac == 'heat_cool' and ac_main == 'heat' %}
#fa6f66
{% elif ac == 'heat_cool' and ac_main == 'fan_only' %}
#c3fae8
{% elif ac == 'heat_cool' and ac_main == 'dry' %}
#cfba74
{% elif ac == 'heat_cool' and ac_main == 'off' %}
#FFFFFF
{% else %}
#353535
{% endif %};
--color: {% if ac == 'off' %} #dbdbdb {% else %} #353535 {% endif %};
height: 35px;
width: 35px;
border-radius: 22px;
border: 0;
box-shadow: none;
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_lights]]'
state_not: unknown
- condition: state
entity: '[[entity_id_lights]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_lights]]'
tap_action:
action: more-info
icon: '[[lights_icon]]'
content: >-
{{ states('[[lights_count_sensor]]') if
states('[[lights_count_sensor]]') != '0' else '' }}
card_mod:
style: |
{% set light_state = states('[[entity_id_lights]]') %}
{% set is_on = light_state == 'on' %}
ha-card {
--chip-background: {% if is_on %} #fcf2d4 {% else %} #353535 {% endif %};
--color: {% if is_on %} #5b5326 {% else %} #dbdbdb {% endif %};
--text-color: {% if is_on %} #5b5326 {% else %} #dbdbdb {% endif %};
height: 35px;
width: 35px;
border-radius: 22px;
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_covers]]'
state_not: unknown
- condition: state
entity: '[[entity_id_covers]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_covers]]'
tap_action:
action: more-info
icon: >
{% if is_state('[[entity_id_covers]]', 'open') or
is_state('[[entity_id_covers]]', 'opening') %}
m3of:curtains
{% else %}
m3of:curtains-closed
{% endif %}
content: >-
{{ states('[[covers_count_sensor]]') if
states('[[covers_count_sensor]]') != '0' else '' }}
card_mod:
style: |
{% set cover_state = states('[[entity_id_covers]]') %}
{% set is_on = cover_state in ['open', 'opening'] %}
ha-card {
--chip-background: {% if is_on %} #702963 {% else %} #353535 {% endif %};
--color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};
--text-color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};
height: 35px;
width: 35px;
border-radius: 22px;
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_fans]]'
state_not: unknown
- condition: state
entity: '[[entity_id_fans]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_fans]]'
tap_action:
action: more-info
icon: |
{% if is_state('[[entity_id_fans]]', 'on') %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
content: >-
{{ states('[[fans_count_sensor]]') if
states('[[fans_count_sensor]]') != '0' else '' }}
card_mod:
style: |
{% set fan_state = states('[[entity_id_fans]]') %}
{% set is_on = fan_state == 'on' %}
ha-card {
--chip-background: {% if is_on %} #89CFF0 {% else %} #353535 {% endif %};
--color: {% if is_on %} #000000 {% else %} #dbdbdb {% endif %};
--text-color: {% if is_on %} #000000 {% else %} #dbdbdb {% endif %};
height: 35px;
width: 35px;
border-radius: 22px;
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_windows]]'
state_not: unknown
- condition: state
entity: '[[entity_id_windows]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_windows]]'
tap_action:
action: more-info
icon: |
{% if is_state('[[entity_id_windows]]', 'on') %}
m3of:window-open
{% else %}
m3of:window-closed
{% endif %}
content: >-
{{ states('[[windows_count_sensor]]') if
states('[[windows_count_sensor]]') != '0' else '' }}
card_mod:
style: |
{% set window_state = states('[[entity_id_windows]]') %}
{% set is_on = window_state == 'on' %}
ha-card {
--chip-background: {% if is_on %} #ffaa00 {% else %} #353535 {% endif %};
--color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};
--text-color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};
height: 35px;
width: 35px;
border-radius: 22px;
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_doors]]'
state_not: unknown
- condition: state
entity: '[[entity_id_doors]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_doors]]'
tap_action:
action: more-info
icon: |
{% if is_state('[[entity_id_doors]]', 'on') %}
m3o:door-open
{% else %}
m3of:door-front
{% endif %}
content: >-
{{ states('[[doors_count_sensor]]') if
states('[[doors_count_sensor]]') != '0' else '' }}
card_mod:
style: |
{% set door_state = states('[[entity_id_doors]]') %}
{% set is_on = door_state == 'on' %}
ha-card {
--chip-background: {% if is_on %} #bc000a {% else %} #353535 {% endif %};
--color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};
--text-color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};
height: 35px;
width: 35px;
border-radius: 22px;
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_custom_1]]'
state_not: unknown
- condition: state
entity: '[[entity_id_custom_1]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_custom_1]]'
tap_action:
action: more-info
icon: >
{% set current_state = states('[[entity_id_custom_1]]') %} {%
set is_active = current_state in ['on', 'playing', 'paused']
and current_state not in ['docked', 'off', 'idle',
'unavailable', 'unknown'] %} {% if is_active %}
[[custom_1_icon_active]]
{% else %}
[[custom_1_icon_inactive]]
{% endif %}
card_mod:
style: >
{% set current_state = states('[[entity_id_custom_1]]') %}
{% set is_active = current_state in ['on', 'playing',
'paused'] and current_state not in ['docked', 'off', 'idle',
'unavailable', 'unknown'] %}
ha-card {
--chip-background: {% if is_active %} [[custom_1_color]] {% else %} #353535 {% endif %};
--color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};
--text-color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};
height: 35px;
width: 35px;
border-radius: 22px;
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_custom_2]]'
state_not: unknown
- condition: state
entity: '[[entity_id_custom_2]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_custom_2]]'
tap_action:
action: more-info
icon: >
{% set current_state = states('[[entity_id_custom_2]]') %} {%
set is_active = current_state in ['on', 'playing', 'paused']
and current_state not in ['docked', 'off', 'idle',
'unavailable', 'unknown'] %} {% if is_active %}
[[custom_2_icon_active]]
{% else %}
[[custom_2_icon_inactive]]
{% endif %}
card_mod:
style: >
{% set current_state = states('[[entity_id_custom_2]]') %}
{% set is_active = current_state in ['on', 'playing',
'paused'] and current_state not in ['docked', 'off', 'idle',
'unavailable', 'unknown'] %}
ha-card {
--chip-background: {% if is_active %} [[custom_2_color]] {% else %} #353535 {% endif %};
--color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};
--text-color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};
height: 35px;
width: 35px;
border-radius: 22px;
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_custom_3]]'
state_not: unknown
- condition: state
entity: '[[entity_id_custom_3]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_custom_3]]'
tap_action:
action: more-info
icon: >
{% set current_state = states('[[entity_id_custom_3]]') %} {%
set is_active = current_state in ['on', 'playing', 'paused']
and current_state not in ['docked', 'off', 'idle',
'unavailable', 'unknown'] %} {% if is_active %}
[[custom_3_icon_active]]
{% else %}
[[custom_3_icon_inactive]]
{% endif %}
card_mod:
style: >
{% set current_state = states('[[entity_id_custom_3]]') %}
{% set is_active = current_state in ['on', 'playing',
'paused'] and current_state not in ['docked', 'off', 'idle',
'unavailable', 'unknown'] %}
ha-card {
--chip-background: {% if is_active %} [[custom_3_color]] {% else %} #353535 {% endif %};
--color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};
--text-color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};
height: 35px;
width: 35px;
border-radius: 22px;
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_custom_4]]'
state_not: unknown
- condition: state
entity: '[[entity_id_custom_4]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_custom_4]]'
tap_action:
action: more-info
icon: >
{% set current_state = states('[[entity_id_custom_4]]') %} {%
set is_active = current_state in ['on', 'playing', 'paused']
and current_state not in ['docked', 'off', 'idle',
'unavailable', 'unknown'] %} {% if is_active %}
[[custom_4_icon_active]]
{% else %}
[[custom_4_icon_inactive]]
{% endif %}
card_mod:
style: >
{% set current_state = states('[[entity_id_custom_4]]') %}
{% set is_active = current_state in ['on', 'playing',
'paused'] and current_state not in ['docked', 'off', 'idle',
'unavailable', 'unknown'] %}
ha-card {
--chip-background: {% if is_active %} [[custom_4_color]] {% else %} #353535 {% endif %};
--color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};
--text-color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};
height: 35px;
width: 35px;
border-radius: 22px;
}
card_mod:
style: |
.chip-container {
flex-flow: column wrap-reverse !important;
display: flex !important;
--chip-spacing: 8px;
margin: 9px;
}
card_mod:
style: |
ha-card {
{% set temp = states('[[entity_id_temperature]]') %}
{% if temp in ['unavailable', 'unknown', ''] %}
background: [[room_background]];
{% else %}
{% set t = temp | float %}
background:
{% if t < 13 %} #AC9CAF
{% elif t < 16 %} #D7C4DB
{% elif t < 19 %} #A3D9F5
{% elif t < 22 %} #CDE3DB
{% elif t < 24 %} #FFE599
{% elif t < 27 %} #F7BE81
{% else %} #E48F7B {% endif %};
{% endif %}
height: 186px;
}
room_toggles_chip_card:
variables:
- entity_area_one: ''
- entity_area_two: ''
- entity_area_three: ''
- entity_area_four: ''
- area_one_name: ''
- area_two_name: ''
- area_three_name: ''
- area_four_name: ''
- area_one_icon: ''
- area_two_icon: ''
- area_three_icon: ''
- area_four_icon: ''
- alignment: ''
- margin_top: ''
card:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: '[[entity_area_one]]'
state_not: unknown
- condition: state
entity: '[[entity_area_one]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_area_one]]'
icon: '[[area_one_icon]]'
content: |-
{% if is_state(entity, 'on') %}
[[area_one_name]]
{% else %}
{% endif %}
tap_action:
action: toggle
card_mod:
style:
.: |
ha-card {
--text-color: var(--md-sys-color-primary);
--color: var(--md-sys-color-primary);
--chip-background: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_area_one]]', 'on') else none }};
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_area_two]]'
state_not: unknown
- condition: state
entity: '[[entity_area_two]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_area_two]]'
icon: '[[area_two_icon]]'
content: |-
{% if is_state(entity, 'on') %}
[[area_two_name]]
{% else %}
{% endif %}
tap_action:
action: toggle
card_mod:
style:
.: |
ha-card {
--text-color: var(--md-sys-color-primary);
--color: var(--md-sys-color-primary);
--chip-background: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_area_two]]', 'on') else none }};
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_area_three]]'
state_not: unknown
- condition: state
entity: '[[entity_area_three]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_area_three]]'
icon: '[[area_three_icon]]'
content: |-
{% if is_state(entity, 'on') %}
[[area_three_name]]
{% else %}
{% endif %}
tap_action:
action: toggle
card_mod:
style:
.: |
ha-card {
--text-color: var(--md-sys-color-primary);
--color: var(--md-sys-color-primary);
--chip-background: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_area_three]]', 'on') else none }};
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_area_four]]'
state_not: unknown
- condition: state
entity: '[[entity_area_four]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_area_four]]'
icon: '[[area_four_icon]]'
content: |-
{% if is_state(entity, 'on') %}
[[area_four_name]]
{% else %}
{% endif %}
tap_action:
action: toggle
card_mod:
style:
.: |
ha-card {
--text-color: var(--md-sys-color-primary);
--color: var(--md-sys-color-primary);
--chip-background: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_area_four]]', 'on') else none }};
}
alignment: '[[alignment]]'
card_mod:
style: |
ha-card {
margin-top: [[margin_top]];
}
room_nav_boolean_chip_card:
variables:
- button_one: ''
- button_two: ''
- button_three: ''
- button_four: ''
- button_one_icon: ''
- button_two_icon: ''
- button_three_icon: ''
- button_four_icon: ''
- alignment: ''
- margin_top: ''
card:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: '[[button_one]]'
state_not: unknown
- condition: state
entity: '[[button_one]]'
state_not: unavailable
chip:
type: template
entity: '[[button_one]]'
icon: '[[button_one_icon]]'
tap_action:
action: toggle
card_mod:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_one]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_one]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[button_one]]', 'on') else none }};
}
- type: conditional
conditions:
- condition: state
entity: '[[button_two]]'
state_not: unknown
- condition: state
entity: '[[button_two]]'
state_not: unavailable
chip:
type: template
entity: '[[button_two]]'
icon: '[[button_two_icon]]'
tap_action:
action: toggle
card_mod:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_two]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_two]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[button_two]]', 'on') else none }};
}
- type: conditional
conditions:
- condition: state
entity: '[[button_three]]'
state_not: unknown
- condition: state
entity: '[[button_three]]'
state_not: unavailable
chip:
type: template
entity: '[[button_three]]'
icon: '[[button_three_icon]]'
tap_action:
action: toggle
card_mod:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_three]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_three]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[button_three]]', 'on') else none }};
}
- type: conditional
conditions:
- condition: state
entity: '[[button_four]]'
state_not: unknown
- condition: state
entity: '[[button_four]]'
state_not: unavailable
chip:
type: template
entity: '[[button_four]]'
icon: '[[button_four_icon]]'
tap_action:
action: toggle
card_mod:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_four]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_four]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[button_four]]', 'on') else none }};
}
alignment: '[[alignment]]'
card_mod:
style: |
ha-card {
margin-top: [[margin_top]];
}
room_title_card:
variables:
- title: ''
card:
type: custom:mushroom-title-card
title: '[[title]]'
card_mod:
style: |
ha-card {
--title-font-size: 30px !important;
}
open_windows_card:
variables:
title: ''
window_1: ''
window_2: ''
window_3: ''
window_4: ''
card:
type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: '[[window_1]]'
state: 'on'
- condition: state
entity: '[[window_2]]'
state: 'on'
- condition: state
entity: '[[window_3]]'
state: 'on'
- condition: state
entity: '[[window_4]]'
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: '[[title]]'
- type: grid
columns: 2
square: false
cards:
- type: conditional
conditions:
- condition: state
entity: '[[window_1]]'
state: 'on'
card:
type: custom:material-button-card
use_default_icon: false
use_default_toggle: true
use_default_text: false
se_default_text: true
entity: '[[window_1]]'
height: 97
control_type: generic
icon: m3of:window-open
text_on: Open
text_off: Closed
- type: conditional
conditions:
- condition: state
entity: '[[window_2]]'
state: 'on'
card:
type: custom:material-button-card
use_default_icon: false
use_default_toggle: true
use_default_text: false
se_default_text: true
entity: '[[window_2]]'
height: 97
control_type: generic
icon: m3of:window-open
text_on: Open
text_off: Closed
- type: conditional
conditions:
- condition: state
entity: '[[window_3]]'
state: 'on'
card:
type: custom:material-button-card
use_default_icon: false
use_default_toggle: true
use_default_text: false
se_default_text: true
entity: '[[window_3]]'
height: 97
control_type: generic
icon: m3of:window-open
text_on: Open
text_off: Closed
- type: conditional
conditions:
- condition: state
entity: '[[window_4]]'
state: 'on'
card:
type: custom:material-button-card
use_default_icon: false
use_default_toggle: true
use_default_text: false
se_default_text: true
entity: '[[window_4]]'
height: 97
control_type: generic
icon: m3of:window-open
text_on: Open
text_off: Closed
open_doors_card:
variables:
title: ''
door_1: ''
door_2: ''
door_3: ''
door_4: ''
card:
type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: '[[door_1]]'
state: 'on'
- condition: state
entity: '[[door_2]]'
state: 'on'
- condition: state
entity: '[[door_3]]'
state: 'on'
- condition: state
entity: '[[door_4]]'
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: '[[title]]'
- type: grid
columns: 2
square: false
cards:
- type: conditional
conditions:
- condition: state
entity: '[[door_1]]'
state: 'on'
card:
type: custom:material-button-card
use_default_icon: false
use_default_toggle: true
use_default_text: false
se_default_text: true
entity: '[[door_1]]'
height: 97
control_type: generic
icon: m3of:door-open
text_on: Open
text_off: Closed
- type: conditional
conditions:
- condition: state
entity: '[[door_2]]'
state: 'on'
card:
type: custom:material-button-card
use_default_icon: false
use_default_toggle: true
use_default_text: false
se_default_text: true
entity: '[[door_2]]'
height: 97
control_type: generic
icon: m3of:door-open
text_on: Open
text_off: Closed
- type:
gitextract_boadwwef/
├── .github/
│ └── FUNDING.yml
├── LICENSE
├── README.md
├── assets/
│ ├── Calendar Page - Day offset 0 example
│ ├── Camera Page - Example
│ ├── Curtain Card Example
│ ├── Hue Page - Room Selector
│ ├── Hue Page - Scene Example
│ ├── Irrigation Page - Backyard Example
│ ├── Lock Card Example
│ ├── Notification Page - Timers
│ ├── Notification Page - Weather Tab
│ ├── Overview Page - Alarmo & Notificaton Chip
│ ├── Overview Page - Calendar
│ ├── Overview Page - Climate, Toggles, Irrigation, Hue Scene Tabs
│ ├── Overview Page - Live Camera Feeds
│ ├── Overview Page - Media Card
│ ├── Overview Page - Room Cards
│ ├── Overview Page - Weather Forecast
│ ├── Overview Page - greeting
│ ├── Scene Card Example
│ ├── Server Page - Battery Overview
│ ├── Server Page - Proxmox and HAOS overview
│ ├── asset_placeholder
│ └── streamline_templates collection
├── dashboard.yaml
├── template sensor/
│ ├── Active Notiifcation Count Sensor
│ ├── Get Forecast Template Sensor
│ └── Weather Condition Icon Sensor
└── wallpaper/
└── wallpaper_placeholder
Condensed preview — 30 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (741K chars).
[
{
"path": ".github/FUNDING.yml",
"chars": 20,
"preview": "\nko_fi: ElementZoom\n"
},
{
"path": "LICENSE",
"chars": 1060,
"preview": "MIT License\n\nCopyright (c) 2025 Rey\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof thi"
},
{
"path": "README.md",
"chars": 17641,
"preview": "# Material-Design-3-Dynamic-Tablet-Dashboard\nA modern Home Assistant dashboard built on Material Design 3 (MD3) principl"
},
{
"path": "assets/Calendar Page - Day offset 0 example",
"chars": 656,
"preview": "type: custom:week-planner-card\ncalendars:\n - entity: calendar.calendar_1\n color: \"#ff6a6a\"\n - entity: calendar.cale"
},
{
"path": "assets/Camera Page - Example",
"chars": 6613,
"preview": "type: vertical-stack\ncards:\n - type: custom:stack-in-card\n mode: vertical\n cards:\n - type: custom:streamline"
},
{
"path": "assets/Curtain Card Example",
"chars": 123,
"preview": "type: custom:streamline-card\ntemplate: curtain_card\nvariables:\n entity: cover.erker_groot\n name: Erker Gro"
},
{
"path": "assets/Hue Page - Room Selector",
"chars": 23206,
"preview": "type: vertical-stack\ncards:\n - type: custom:bubble-card\n card_type: pop-up\n hash: \"#room-selector\"\n name: Room"
},
{
"path": "assets/Hue Page - Scene Example",
"chars": 474,
"preview": "type: horizontal-stack\ncards:\n - type: picture\n image: /local/hue/raw/Blossom.png\n tap_action:\n action: call"
},
{
"path": "assets/Irrigation Page - Backyard Example",
"chars": 946,
"preview": "type: custom:mod-card\nuix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s"
},
{
"path": "assets/Lock Card Example",
"chars": 138,
"preview": "type: custom:streamline-card\ntemplate: lock_card\nvariables:\n entity: lock.nuki_bijkeuken_lock\n nam"
},
{
"path": "assets/Notification Page - Timers",
"chars": 287,
"preview": "type: conditional\nconditions:\n - condition: state\n entity: binary_sensor.show_wash_cuddly_timer\n state: \"on\"\ncard"
},
{
"path": "assets/Notification Page - Weather Tab",
"chars": 31035,
"preview": "type: custom:mod-card\nuix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s"
},
{
"path": "assets/Overview Page - Alarmo & Notificaton Chip",
"chars": 31404,
"preview": "type: custom:mod-card\nuix:\n style: |\n ha-card {\n\n animation: fadeInRight 0.5s ease-out 0.5s;\n }\n @keyfram"
},
{
"path": "assets/Overview Page - Calendar",
"chars": 1323,
"preview": "entities:\n - entity: calendar.calendar_1\n accent_color: \"#ff6a6a\"\n - entity: calendar.calendar_2\n accent_color: "
},
{
"path": "assets/Overview Page - Climate, Toggles, Irrigation, Hue Scene Tabs",
"chars": 24895,
"preview": "type: custom:mod-card\nuix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDow"
},
{
"path": "assets/Overview Page - Live Camera Feeds",
"chars": 526,
"preview": "type: vertical-stack\ncards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n ti"
},
{
"path": "assets/Overview Page - Media Card",
"chars": 354,
"preview": "type: custom:mediocre-massive-media-player-card\nentity_id: media_player.your_media\nmode: card\naction: {}\nspeaker_group:\n"
},
{
"path": "assets/Overview Page - Room Cards",
"chars": 4405,
"preview": "type: custom:vertical-stack-in-card\ncards:\n - type: conditional\n conditions:\n - entity: input_boolean.room_togg"
},
{
"path": "assets/Overview Page - Weather Forecast",
"chars": 1261,
"preview": "type: custom:mod-card\nuix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDow"
},
{
"path": "assets/Overview Page - greeting",
"chars": 8668,
"preview": "type: vertical-stack\ncards:\n - type: custom:mushroom-title-card\n alignment: start\n title: |\n {{ now().strfti"
},
{
"path": "assets/Scene Card Example",
"chars": 155,
"preview": "type: custom:streamline-card\ntemplate: scene_card\nvariables:\n entity: scene.luxaflex_naar_70\n name"
},
{
"path": "assets/Server Page - Battery Overview",
"chars": 1612,
"preview": "type: vertical-stack\ncards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Device"
},
{
"path": "assets/Server Page - Proxmox and HAOS overview",
"chars": 2798,
"preview": "type: vertical-stack\ncards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n titl"
},
{
"path": "assets/asset_placeholder",
"chars": 1,
"preview": "\n"
},
{
"path": "assets/streamline_templates collection",
"chars": 53686,
"preview": "streamline_templates:\n title_card:\n variables:\n title: ''\n card:\n type: custom:mushroom-title-card\n "
},
{
"path": "dashboard.yaml",
"chars": 498375,
"preview": "kiosk_mode:\n user_settings:\n - users:\n - kiosk\n kiosk: true\nstreamline_templates:\n room_details_card:\n "
},
{
"path": "template sensor/Active Notiifcation Count Sensor",
"chars": 2049,
"preview": "- sensor:\n - name: \"Active Notification Count\"\n state: >\n {% set count = 0 %}\n {% if states('senso"
},
{
"path": "template sensor/Get Forecast Template Sensor",
"chars": 6044,
"preview": "- trigger:\n - platform: time_pattern\n minutes: /15\n - platform: homeassistant\n event: start\n\n sensor:\n "
},
{
"path": "template sensor/Weather Condition Icon Sensor",
"chars": 1408,
"preview": " - name: \"Weather Condition Icon\"\n unique_id: weather_condition_icon\n state: >\n {% set condition "
},
{
"path": "wallpaper/wallpaper_placeholder",
"chars": 1,
"preview": "\n"
}
]
About this extraction
This page contains the full source code of the ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 30 files (704.3 KB), approximately 135.4k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.