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.
# ✨ 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**
**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**
**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**
**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**
**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**
**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**
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**
**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**
Above is an example of [lock card](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Lock%20Card%20Example).
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.
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: conditional
conditions:
- condition: state
entity: '[[door_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: '[[door_3]]'
height: 97
control_type: generic
icon: m3of:door-open
text_on: Open
text_off: Closed
- type: conditional
conditions:
- condition: state
entity: '[[door_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: '[[door_4]]'
height: 97
control_type: generic
icon: m3of:door-open
text_on: Open
text_off: Closed
entity_count_card:
variables:
entity: ''
title: ''
icon: ''
color: ''
card:
type: conditional
conditions:
- condition: state
entity: '[[entity]]'
state:
- 'on'
- open
card:
type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
- title: '[[title]]'
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: template
content: |
{{ expand('[[entity]]')
| selectattr('state', 'in', ['on', 'open'])
| list
| count }}
icon: '[[icon]]'
icon_color: '[[color]]'
tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: 1.6em;
}
camera_generic_with_chips_card:
default:
- camera_entity: ''
- camera_height: ''
- entity_id_light_one: ''
- entity_id_light_two: ''
- light_one_icon: ''
- light_two_icon: ''
variables:
- camera_entity
- camera_height
- entity_id_light_one
- entity_id_light_two
- light_one_icon
- light_two_icon
card:
type: vertical-stack
cards:
- type: custom:webrtc-camera
streams:
- entity: '[[camera_entity]]'
muted: true
card_mod:
style: |
ha-card {
height: [[camera_height]];
overflow: hidden;
}
- type: custom:mushroom-chips-card
alignment: start
chips:
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_light_one]]'
state_not: unknown
- condition: state
entity: '[[entity_id_light_one]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_light_one]]'
icon: '[[light_one_icon]]'
tap_action:
action: toggle
content: |
{{ states['[[entity_id_light_one]]'].name }}
card_mod:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-on-primary)' }};
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_light_two]]'
state_not: unknown
- condition: state
entity: '[[entity_id_light_two]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_light_two]]'
icon: '[[light_two_icon]]'
tap_action:
action: toggle
content: |
{{ states['[[entity_id_light_two]]'].name }}
card_mod:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-on-primary)' }};
}
camera_rtsp_with_chips_card:
default:
- camera_url: ''
- camera_height: ''
- entity_id_light_one: ''
- entity_id_light_two: ''
- light_one_icon: ''
- light_two_icon: ''
variables:
- camera_url
- camera_height
- entity_id_light_one
- entity_id_light_two
- light_one_icon
- light_two_icon
card:
type: vertical-stack
cards:
- type: custom:webrtc-camera
url: '[[camera_url]]'
card_mod:
style: |
ha-card {
height: [[camera_height]];
overflow: hidden;
}
- type: custom:mushroom-chips-card
alignment: start
chips:
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_light_one]]'
state_not: unknown
- condition: state
entity: '[[entity_id_light_one]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_light_one]]'
icon: '[[light_one_icon]]'
tap_action:
action: toggle
content: |
{{ states['[[entity_id_light_one]]'].name }}
card_mod:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-on-primary)' }};
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_light_two]]'
state_not: unknown
- condition: state
entity: '[[entity_id_light_two]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_light_two]]'
icon: '[[light_two_icon]]'
tap_action:
action: toggle
content: |
{{ states['[[entity_id_light_two]]'].name }}
card_mod:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-on-primary)' }};
}
media_player_card:
variables:
entity: ''
name: ''
card:
type: custom:mushroom-media-player-card
entity: '[[entity]]'
name: '[[name]]'
fill_container: true
use_media_info: true
show_volume_level: true
layout: vertical
collapsible_controls: true
volume_controls:
- volume_buttons
- volume_set
media_controls:
- on_off
grid_options:
columns: full
card_mod:
style:
.: |
ha-state-icon {
color: {{ 'var(--primary-background-color)' if is_state('[[entity]]', 'on') else 'none' }};
}
mushroom-shape-icon$: |
.shape {
--shape-color: {{ 'var(--md-sys-color-secondary)' if is_state('[[entity]]', 'on') else 'color-mix(in srgb, var(--md-sys-color-surface-variant) 40%, transparent)' }};
}
mushroom-media-player-volume-control$: |
mushroom-slider {
--main-color: var(--md-sys-color-on-secondary) !important;
--bg-color: var(--md-sys-color-secondary) !important;
}
curtain_card:
variables:
entity: ''
name: ''
card:
type: custom:mushroom-cover-card
entity: '[[entity]]'
show_position_control: true
show_buttons_control: true
show_tilt_position_control: false
card_mod:
style:
.: |
ha-state-icon {
color: {{ 'var(--primary-background-color)' if is_state('[[entity]]', 'open') else 'var(--primary-text-color)' }};
}
mushroom-shape-icon$: |
.shape {
--shape-color: {{ 'var(--md-sys-color-secondary)' if is_state('[[entity]]', 'open') else none }};
mushroom-cover-position-control$: |
mushroom-slider {
--main-color: var(--md-sys-color-primary) !important;
--bg-color: color-mix(in srgb, var(--md-sys-color-primary) 70%, transparent) !important;
mushroom-cover-tilt-position-control$: |
mushroom-slider {
--main-color: var(--md-sys-color-primary) !important;
--bg-color: color-mix(in srgb, var(--md-sys-color-primary) 70%, transparent) !important;
}
number_slider_card:
variables:
entity: ''
name: ''
icon: ''
card:
type: custom:mushroom-number-card
entity: '[[entity]]'
name: '[[name]]'
icon: '[[icon]]'
display_mode: slider
fill_container: true
card_mod:
style:
.: |
ha-state-icon {
color: var(--md-sys-color-secondary);
}
mushroom-shape-icon$: |
.shape {
--shape-color: var(--md-sys-color-on-secondary) !important;
}
mushroom-number-value-control$: |
mushroom-slider {
--main-color: var(--md-sys-color-on-secondary) !important;
--bg-color: var(--md-sys-color-secondary) !important;
}
select_card:
variables:
entity: ''
name: ''
icon: ''
card:
type: custom:mushroom-select-card
entity: '[[entity]]'
name: '[[name]]'
icon: '[[icon]]'
fill_container: true
card_mod:
style:
.: |
ha-state-icon {
color: var(--md-sys-color-secondary);
}
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
}
mushroom-select-option-control$:
mushroom-select$: |
mwc-menu {
--mdc-theme-text-primary-on-background: var(--primary-text-color);
--mdc-theme-primary: var(--primary-color);
--mdc-theme-surface: inherit;
}
scene_button_card:
variables:
img_path: ''
scene_value: ''
card:
type: custom:button-card
entity_picture: '[[img_path]]'
show_entity_picture: true
aspect_ratio: 5/3
styles:
card:
- padding: 0px
entity_picture:
- width: 100%
- height: 100%
- object-fit: cover
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.dynamic_scene_selected
value: '[[scene_value]]'
toggle_chip:
default:
- entity_id: ''
- chip_icon: ''
- chip_color: ''
- chip_label: ''
card:
type: template
entity: '[[entity_id]]'
icon: '[[chip_icon]]'
icon_color: >-
{% if is_state('[[entity_id]]', 'on') %}[[chip_color]]{% else
%}var(--primary-text-color){% endif %}
tap_action:
action: toggle
content: '{% if is_state(''[[entity_id]]'', ''on'') %}[[chip_label]]{% endif %}'
material_light_slider_card:
variables:
entity: ''
name: ''
card:
type: custom:material-slider-card
entity: '[[entity]]'
icon: m3of:lightbulb
show_percentage: true
bold_text: false
material_custom_icon_slider_card:
variables:
entity: ''
name: ''
icon: ''
card:
type: custom:material-slider-card
entity: '[[entity]]'
icon: '[[icon]]'
show_percentage: true
bold_text: false
material_light_button_card:
variables:
entity: ''
name: ''
card:
type: custom:material-button-card
use_default_icon: false
use_default_toggle: true
use_default_text: true
entity: '[[entity]]'
icon: m3of:lightbulb
height: 97
control_type: generic
dual_icon: true
icon_on: m3of:lightbulb
icon_off: m3of:light-off
material_switch_button_card:
variables:
entity: ''
name: ''
card:
type: custom:material-button-card
use_default_icon: false
use_default_toggle: true
use_default_text: true
entity: '[[entity]]'
icon: m3of:lightbulb
height: 97
control_type: generic
dual_icon: true
icon_on: m3of:switch
icon_off: m3o:switch
material_custom_icon_button_card:
variables:
entity: ''
name: ''
icon: ''
card:
type: custom:material-button-card
use_default_icon: false
use_default_toggle: true
use_default_text: true
entity: '[[entity]]'
icon: '[[icon]]'
height: 97
control_type: generic
dual_icon: false
material_custom_icon_with_status_button_card:
variables:
entity: ''
name: ''
icon: ''
card:
type: custom:material-button-card
use_default_icon: false
use_default_toggle: true
use_default_text: false
entity: '[[entity]]'
icon: '[[icon]]'
height: 97
control_type: generic
dual_icon: false
text_on: Open
text_off: Closed
material_custom_dual_icon_button_card:
variables:
entity: ''
name: ''
icon: ''
icon_on: ''
icon_off: ''
card:
type: custom:material-button-card
use_default_icon: false
use_default_toggle: true
use_default_text: true
entity: '[[entity]]'
icon_on: '[[icon_on]]'
icon_off: '[[icon_off]]'
height: 97
control_type: generic
dual_icon: true
material_custom_dual_icon_with_status_button_card:
variables:
entity: ''
name: ''
icon: ''
icon_on: ''
icon_off: ''
card:
type: custom:material-button-card
use_default_icon: false
use_default_toggle: true
use_default_text: false
entity: '[[entity]]'
icon_on: '[[icon_on]]'
icon_off: '[[icon_off]]'
height: 97
control_type: generic
dual_icon: true
text_on: Open
text_off: Closed
spacer_card:
variables:
padding: ''
card:
type: custom:button-card
show_name: false
show_icon: false
tap_action:
action: none
styles:
card:
- background: none
- box-shadow: none
- padding: '[[padding]]'
================================================
FILE: dashboard.yaml
================================================
kiosk_mode:
user_settings:
- users:
- kiosk
kiosk: true
streamline_templates:
room_details_card:
variables:
temperature_entity: ''
humidity_entity: ''
presence_entity: ''
card:
type: custom:paper-buttons-row
styles:
justify-content: flex-start
flex-wrap: wrap
font-size: 0.9em
line-height: 1.2em
margin: 0 0 0 6px
width: 100%
extra_styles: |
@keyframes fadeIn {
from { opacity: 1; }
to { opacity: 1; }
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
buttons:
- layout: name
entity: '[[presence_entity]]'
name: >-
{% set entity = '[[presence_entity]]' %} {% if '.' not in entity %}
{% elif states(entity) in ['unavailable', 'unknown'] %}unavailable
{% else %}
{% if is_state(entity, 'on') %} Occupied {% else %} Clear {% endif %}
{% endif %}
tap_action:
action: more-info
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) 50%,
transparent)
border-radius: 24px
flex-basis: 1
flex-shrink: 0
animation: slideInLeft 0.6s ease-out 0.4s both
transition: all 0.3s ease
display: '{% if ''.'' not in ''[[presence_entity]]'' %}none{% endif %}'
- layout: name
name: ·
styles:
button:
flex-basis: 1
flex-shrink: 0
animation: fadeIn 0.8s ease-out 0.5s both
display: >-
{% if '.' not in '[[presence_entity]]' or '.' not in
'[[temperature_entity]]' %}none{% endif %}
name:
color: var(--primary-text-color)
tap_action:
action: none
- layout: name
entity: '[[temperature_entity]]'
name: >-
{% set entity = '[[temperature_entity]]' %} {% if '.' not in entity
%} {% elif states(entity) in ['unavailable', 'unknown'] %}
unavailable {% else %}
{% set temp = states(entity) | float(0) %}
{% if temp < 18 %} Cold
{% elif temp < 22 %} Cool
{% elif temp < 26 %} Ideal
{% else %} Warm {% endif %}
({{ temp }}°C) {% endif %}
tap_action:
action: more-info
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) 50%,
transparent)
border-radius: 24px
flex-basis: 1
flex-shrink: 0
animation: slideInLeft 0.6s ease-out 0.6s both
transition: all 0.3s ease
display: '{% if ''.'' not in ''[[temperature_entity]]'' %}none{% endif %}'
- layout: name
name: ·
styles:
button:
flex-basis: 1
flex-shrink: 0
animation: fadeIn 0.8s ease-out 0.7s both
display: >-
{% if '.' not in '[[temperature_entity]]' or '.' not in
'[[humidity_entity]]' %} none {% endif %}
name:
color: var(--primary-text-color)
tap_action:
action: none
- layout: name
entity: '[[humidity_entity]]'
name: >-
{% set entity = '[[humidity_entity]]' %} {% if '.' not in entity %}
{% elif states(entity) in ['unavailable', 'unknown'] %}unavailable
{% else %}
{% set hum = states(entity) | float(0) %}
{% if hum < 31 %} Dry
{% elif hum < 51 %} Good
{% else %} Humid {% endif %}
({{ hum }} %)
{% endif %}
tap_action:
action: more-info
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) 50%,
transparent)
border-radius: 24px
flex-basis: 1
flex-shrink: 0
animation: slideInLeft 0.6s ease-out 0.9s both
transition: all 0.3s ease
display: '{% if ''.'' not in ''[[humidity_entity]]'' %}none{% endif %}'
uix:
style: |
ha-card {
overflow: visible !important;
}
title_card:
variables:
title: ''
title_font_size: 20px
card:
type: custom:mushroom-title-card
title: '[[title]]'
uix:
style: |
ha-card {
--title-font-size: [[title_font_size]] !important;
}
title_subtitle_card:
variables:
title: ''
subtitle: ''
animation_delay: 0s
card:
type: custom:mushroom-title-card
title: '[[title]]'
subtitle: '[[subtitle]]'
uix:
style: |
ha-card {
--title-font-size: 20px !important;
--subtitle-font-size: 14px !important;
animation: fadeIn 1.0s ease-out [[animation_delay]] both;
}
@keyframes fadeIn {
from { opacity: 1; }
to { opacity: 1; }
}
title_subtitle_navigation_card:
variables:
title: ''
subtitle: ''
navigation_path: ''
title_font_size: 20px
animation_delay: 0s
card:
type: custom:mushroom-title-card
title: '[[title]]'
subtitle: '[[subtitle]]'
title_tap_action:
action: navigate
navigation_path: '[[navigation_path]]'
uix:
style: |
ha-card {
--title-font-size: [[title_font_size]] !important;
--subtitle-font-size: 14px !important;
animation: fadeIn 1.0s ease-out [[animation_delay]] both;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
title_navigation_card:
variables:
title: ''
navigation_path: ''
animation_delay: 0s
title_font_size: 20px
card:
type: custom:mushroom-title-card
title: '[[title]]'
title_tap_action:
action: navigate
navigation_path: '[[navigation_path]]'
uix:
style: |
ha-card {
--title-font-size: [[title_font_size]] !important;
animation: fadeIn 1.0s ease-out [[animation_delay]] both;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
date_clock_text_card:
variables:
title: ''
card:
type: custom:mushroom-title-card
title: '[[title]]'
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.3s both;
}
@keyframes fadeInDown {
from {
opacity: 1;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
page_title_card:
variables:
- title: ''
- alignment: center
card:
type: custom:button-card
name: '[[title]]'
show_icon: false
show_state: false
tap_action:
action: none
styles:
card:
- background: none
- box-shadow: none
- height: 38px
name:
- justify-self: '[[alignment]]'
- font-size: 24px
- font-weight: 500
- letter-spacing: '-0.7px'
uix:
style: |
:host {
animation: fadeInDown 0.2s ease-out 0.3s both;
}
@keyframes fadeInDown {
from {
opacity: 1;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
scene_title_card:
variables:
subtitle: ''
animation_delay: 0s
card:
type: custom:mushroom-title-card
subtitle: '[[subtitle]]'
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) [[animation_delay]] both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
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: ''
- animation_delay: 0s
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
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_one]]', 'off') else 'var(--md-sys-color-on-primary)' }};
--color: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_one]]', 'off') else 'var(--md-sys-color-on-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_one]]', 'on') else none }};
animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0s) both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
- 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
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_two]]', 'off') else 'var(--md-sys-color-on-primary)' }};
--color: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_two]]', 'off') else 'var(--md-sys-color-on-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_two]]', 'on') else none }};
animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.2s) both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
- 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
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_three]]', 'off') else 'var(--md-sys-color-on-primary)' }};
--color: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_three]]', 'off') else 'var(--md-sys-color-on-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_three]]', 'on') else none }};
animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.4s) both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
- 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
uix:
style:
.: |
ha-card {
--text-color: var(--md-sys-color-primary);
--color: var(--md-sys-color-primary);
--chip-background: {{ 'color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent)' if is_state('[[entity_area_four]]', 'on') else none }};
animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.6s) both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
alignment: '[[alignment]]'
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
uix:
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
uix:
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
uix:
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
uix:
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]]'
uix:
style: |
ha-card {
margin-top: [[margin-top]];
}
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
uix:
style:
.: |
ha-card {
--color: var(--md-sys-color-primary);
--chip-background: color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent);
animation: fadeInDown 0.2s ease-out 0.3s both;
}
@keyframes fadeInDown {
from {
opacity: 1;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
more-options-card:
variables:
navigation_path: ''
card:
type: custom:mushroom-chips-card
alignment: end
chips:
- type: template
tap_action:
action: navigate
navigation_path: '[[navigation_path]]'
icon: mdi:dots-horizontal
uix:
style:
.: |
ha-card {
--color: var(--md-sys-color-primary);
--chip-background: color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent);
animation: fadeInDown 0.2s ease-out 0.3s both;
}
@keyframes fadeInDown {
from {
opacity: 1;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
scene_button_card:
variables:
img_path: ''
scene_value: ''
card:
type: custom:button-card
entity_picture: '[[img_path]]'
show_entity_picture: true
aspect_ratio: 5/3
styles:
card:
- padding: 0px
entity_picture:
- width: 100%
- height: 100%
- object-fit: cover
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.dynamic_scene_selected
value: '[[scene_value]]'
spacer_card:
variables:
padding: ''
card:
type: custom:button-card
show_name: false
show_icon: false
tap_action:
action: none
styles:
card:
- background: none
- box-shadow: none
- padding: '[[padding]]'
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]]'
title_font_size: 20px
- type: grid
columns: 2
square: false
cards:
- type: conditional
conditions:
- condition: state
entity: '[[window_1]]'
state: 'on'
card:
type: custom:streamline-card
template: button_card
variables:
entity: '[[window_1]]'
icon: m3of:window-open
background_color: rgba(255, 170, 0, 0.5)
- type: conditional
conditions:
- condition: state
entity: '[[window_2]]'
state: 'on'
card:
type: custom:streamline-card
template: button_card
variables:
entity: '[[window_2]]'
icon: m3of:window-open
background_color: rgba(255, 170, 0, 0.5)
- type: conditional
conditions:
- condition: state
entity: '[[window_3]]'
state: 'on'
card:
type: custom:streamline-card
template: button_card
variables:
entity: '[[window_3]]'
icon: m3of:window-open
background_color: rgba(255, 170, 0, 0.5)
- type: conditional
conditions:
- condition: state
entity: '[[window_4]]'
state: 'on'
card:
type: custom:streamline-card
template: button_card
variables:
entity: '[[window_4]]'
icon: m3of:window-open
background_color: rgba(255, 170, 0, 0.5)
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]]'
title_font_size: 20px
- type: grid
columns: 2
square: false
cards:
- type: conditional
conditions:
- condition: state
entity: '[[door_1]]'
state: 'on'
card:
type: custom:streamline-card
template: button_card
variables:
entity: '[[door_1]]'
icon: m3of:door-open
background_color: rgba(188, 0, 10, 0.5)
- type: conditional
conditions:
- condition: state
entity: '[[door_2]]'
state: 'on'
card:
type: custom:streamline-card
template: button_card
variables:
entity: '[[door_2]]'
icon: m3of:door-open
background_color: rgba(188, 0, 10, 0.5)
- type: conditional
conditions:
- condition: state
entity: '[[door_3]]'
state: 'on'
card:
type: custom:streamline-card
template: button_card
variables:
entity: '[[door_3]]'
icon: m3of:door-open
background_color: rgba(188, 0, 10, 0.5)
- type: conditional
conditions:
- condition: state
entity: '[[door_4]]'
state: 'on'
card:
type: custom:streamline-card
template: button_card
variables:
entity: '[[door_4]]'
icon: m3of:door-open
background_color: rgba(188, 0, 10, 0.5)
entity_count_card:
variables:
entity: ''
title: ''
icon: ''
color: ''
card:
type: conditional
conditions:
- condition: state
entity: '[[entity]]'
state:
- 'on'
- open
card:
type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: '[[title]]'
title_font_size: 20px
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: template
content: |
{{ expand('[[entity]]')
| selectattr('state', 'in', ['on', 'open'])
| list
| count }}
icon: '[[icon]]'
icon_color: '[[color]]'
tap_action:
action: none
uix:
style: |
ha-card {
margin-top: 1.6em;
}
count_button_card:
variables:
group_entity: ''
count_entity: ''
title: ''
icon: ''
color: ''
background_color: ''
'filter_state:': ''
card:
type: conditional
conditions:
- condition: state
entity: '[[group_entity]]'
state:
- 'on'
- open
card:
type: custom:expander-card
title-card:
type: custom:streamline-card
template: entity_count_card
variables:
entity: '[[count_entity]]'
title: '[[title]]'
icon: '[[icon]]'
color: '[[color]]'
title-card-clickable: true
title-card-button-overlay: false
padding: '1'
animations: true
expanded: false
cards:
- type: custom:auto-entities
card:
square: false
type: grid
columns: 2
card_param: cards
filter:
include:
- group: '[[group_entity]]'
state: '[[filter_state]]'
options:
type: custom:streamline-card
template: button_card
variables:
entity: this.entity_id
icon: '[[icon]]'
background_color: '[[background_color]]'
exclude: []
show_empty: false
sort:
method: entity_id
media_player_card:
variables:
entity: ''
name: ''
card:
type: custom:mushroom-media-player-card
entity: '[[entity]]'
name: '[[name]]'
fill_container: true
use_media_info: true
show_volume_level: true
layout: vertical
collapsible_controls: true
volume_controls:
- volume_buttons
- volume_set
media_controls:
- on_off
grid_options:
columns: full
uix:
style:
.: |
ha-state-icon {
color: {{ 'var(--primary-background-color)' if is_state('[[entity]]', ['on', 'playing', 'paused', 'idle']) else 'none' }};
}
mushroom-shape-icon$: |
.shape {
--shape-color: {{ 'var(--md-sys-color-secondary)' if is_state('[[entity]]', ['on', 'playing', 'paused', 'idle']) else 'color-mix(in srgb, var(--md-sys-color-surface-variant) 40%, transparent)' }};
}
mushroom-media-player-volume-control$: |
mushroom-slider {
--main-color: var(--md-sys-color-primary) !important;
--bg-color: var(--md-sys-color-on-primary) !important;
}
curtain_slider_card:
variables:
entity_id: ''
label: Curtain
icon: mdi:curtains
card:
type: custom:custom-features-card
features:
- type: custom:service-call
entries:
- type: slider
tap_action:
action: perform-action
perform_action: cover.set_cover_position
data:
position: '{{ value }}'
entity_id: '[[entity_id]]'
value_attribute: current_position
icon: '[[icon]]'
entity_id: '[[entity_id]]'
styles: >
{% if state_attr(config.entity, 'current_position') | int(0) <
21 %}
.icon, .label {
color: white;
}
{% else %}
.icon, .label {
color: black;
}
.thumb::after {
background-color: black;
}
{% endif %}
range:
- 0
- 100
step: 1
label: '{{ state_attr(''[[entity_id]]'', ''friendly_name'') }}'
ticks: false
unit_of_measurement: '%'
haptics: true
feature_height: 70
transparent: true
styles: ''
curtain_open_close_card:
variables:
entity_id: ''
card:
type: custom:custom-features-card
features:
- type: custom:service-call
entries:
- type: button
entity_id: '[[entity_id]]'
icon: mdi:curtains-closed
momentary_end_action:
action: perform-action
perform_action: cover.stop_cover
target:
entity_id: '[[entity_id]]'
momentary_start_action:
action: perform-action
perform_action: cover.close_cover
target:
entity_id: '[[entity_id]]'
- type: button
entity_id: '[[entity_id]]'
icon: mdi:curtains
momentary_end_action:
action: perform-action
perform_action: cover.stop_cover
target:
entity_id: '[[entity_id]]'
momentary_start_action:
action: perform-action
perform_action: cover.open_cover
target:
entity_id: '[[entity_id]]'
number_slider_card:
variables:
entity: ''
card:
type: custom:mushroom-number-card
entity: '[[entity]]'
display_mode: slider
fill_container: true
uix:
style:
.: |
ha-state-icon {
color: var(--primary-background-color);
}
mushroom-shape-icon$: |
.shape {
--shape-color: var(--md-sys-color-secondary) !important;
}
mushroom-number-value-control$: |
mushroom-slider {
--main-color: var(--md-sys-color-primary) !important;
--bg-color: var(--md-sys-color-on-primary) !important;
}
select_card:
variables:
entity: ''
name: ''
icon: ''
card:
type: custom:mushroom-select-card
entity: '[[entity]]'
name: '[[name]]'
icon: '[[icon]]'
fill_container: true
uix:
style:
.: |
ha-state-icon {
color: var(--md-sys-color-secondary);
}
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
}
mushroom-select-option-control$:
mushroom-select$: |
mwc-menu {
--mdc-theme-text-primary-on-background: var(--primary-text-color);
--mdc-theme-primary: var(--primary-color);
--mdc-theme-surface: inherit;
}
button_card:
variables:
entity: ''
icon: m3of:switch
background_color: color-mix(in srgb, var(--md-sys-color-primary) 50%, transparent)
card:
type: custom:button-card
entity: '[[entity]]'
icon: '[[icon]]'
show_name: true
show_state: true
show_label: false
tap_action:
action: toggle
hold_action:
action: more-info
state:
- value: 'on'
styles:
card:
- background-color: '[[background_color]]'
name:
- color: white
state:
- color: white
icon:
- color: white
- value: 'off'
styles:
card:
- background-color: >-
color-mix(in srgb, var(--md-sys-color-primary) 15%,
transparent)
icon:
- color: grey
styles:
card:
- height: 95px
- border-radius: 30px
- box-shadow: none
- padding: 0 20px 0 28px
grid:
- grid-template-areas: '"i n" "i s"'
- grid-template-columns: 36px 1fr
- grid-template-rows: 1fr 1fr
- align-items: center
icon:
- width: 24px
- height: 24px
- margin-right: 14px
name:
- align-self: end
- justify-self: start
- padding-left: 7px
- font-size: 14px
- font-weight: 500
- line-height: 1.5
state:
- align-self: start
- justify-self: start
- padding-left: 7px
- font-size: 14px
- line-height: 1.5
- opacity: 0.7
light_card:
variables:
entity: ''
name: ''
icon: ''
card:
type: custom:big-slider-card
entity: '[[entity]]'
name: '[[name]]'
icon: '[[icon]]'
attribute: brightness
transition: 0.3
height: 95
background_color: color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent)
icon_color: white
colorize: true
show_percentage: true
tap_action:
action: toggle
hold_action:
action: more-info
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_speakers: ''
- entity_id_custom_1: ''
- entity_id_custom_2: ''
- entity_id_custom_3: ''
- entity_id_custom_4: ''
- lights_count_sensor: ''
- covers_count_sensor: ''
- fans_count_sensor: ''
- doors_count_sensor: ''
- windows_count_sensor: ''
- speakers_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: ''
- room_background: '#f5f5f5'
- animation_delay: 0s
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]]'
uix:
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]]'
uix:
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 %}
uix:
style: >
@keyframes chip-drop {
0% { opacity: 0; transform: translateY(-12px) scale(0.85); }
60% { transform: translateY(3px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cool-pulse {
0% { transform: scale(1); box-shadow: 0 0 6px rgba(139,189,212,0.55), 0 0 18px rgba(139,189,212,0.45), 0 0 42px rgba(139,189,212,0.32), 0 0 90px rgba(139,189,212,0.22); }
50% { transform: scale(1.12); box-shadow: 0 0 14px rgba(139,189,212,1), 0 0 34px rgba(139,189,212,0.85), 0 0 80px rgba(139,189,212,0.55), 0 0 170px rgba(139,189,212,0.35); }
100% { transform: scale(1); box-shadow: 0 0 6px rgba(139,189,212,0.55), 0 0 18px rgba(139,189,212,0.45), 0 0 42px rgba(139,189,212,0.32), 0 0 90px rgba(139,189,212,0.22); }
}
@keyframes heat-pulse {
0% { transform: scale(1); box-shadow: 0 0 6px rgba(217,79,70,0.55), 0 0 18px rgba(217,79,70,0.45), 0 0 42px rgba(217,79,70,0.32), 0 0 90px rgba(217,79,70,0.22); }
50% { transform: scale(1.12); box-shadow: 0 0 14px rgba(217,79,70,1), 0 0 34px rgba(217,79,70,0.85), 0 0 80px rgba(217,79,70,0.55), 0 0 170px rgba(217,79,70,0.35); }
100% { transform: scale(1); box-shadow: 0 0 6px rgba(217,79,70,0.55), 0 0 18px rgba(217,79,70,0.45), 0 0 42px rgba(217,79,70,0.32), 0 0 90px rgba(217,79,70,0.22); }
}
@keyframes fan-spin {
0% { transform: rotate(0deg); box-shadow: 0 0 6px rgba(134,232,204,0.55), 0 0 18px rgba(134,232,204,0.45), 0 0 42px rgba(134,232,204,0.32), 0 0 90px rgba(134,232,204,0.22); }
50% { box-shadow: 0 0 14px rgba(134,232,204,1), 0 0 34px rgba(134,232,204,0.85), 0 0 80px rgba(134,232,204,0.55), 0 0 170px rgba(134,232,204,0.35); }
100% { transform: rotate(360deg); box-shadow: 0 0 6px rgba(134,232,204,0.55), 0 0 18px rgba(134,232,204,0.45), 0 0 42px rgba(134,232,204,0.32), 0 0 90px rgba(134,232,204,0.22); }
}
@keyframes dry-fade {
0%, 100% { transform: scale(1); box-shadow: 0 0 6px rgba(168,148,74,0.55), 0 0 18px rgba(168,148,74,0.45), 0 0 42px rgba(168,148,74,0.32), 0 0 90px rgba(168,148,74,0.22); }
50% { transform: scale(1.12); box-shadow: 0 0 14px rgba(168,148,74,1), 0 0 34px rgba(168,148,74,0.85), 0 0 80px rgba(168,148,74,0.55), 0 0 170px rgba(168,148,74,0.35); }
}
{% set base = '[[animation_delay]]' | replace('s','') |
float %}
{% set d = (base + 0.05) | round(2) %}
{% 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;
{% if ac == 'heat_cool' and ac_main == 'cool' %}
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s, cool-pulse 2s ease-in-out infinite {{ d + 0.4 }}s;
{% elif ac == 'heat_cool' and ac_main == 'heat' %}
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s, heat-pulse 1.5s ease-in-out infinite {{ d + 0.4 }}s;
{% elif ac == 'heat_cool' and ac_main == 'fan_only' %}
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s, fan-spin 3s linear infinite {{ d + 0.4 }}s;
{% elif ac == 'heat_cool' and ac_main == 'dry' %}
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s, dry-fade 2s ease-in-out infinite {{ d + 0.4 }}s;
{% else %}
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;
{% endif %}
}
- 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 '' }}
uix:
style: >
@keyframes chip-drop {
0% { opacity: 0; transform: translateY(-12px) scale(0.85); }
60% { transform: translateY(3px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
{% set base = '[[animation_delay]]' | replace('s','') |
float %}
{% set d = (base + 0.12) | round(2) %}
{% set light_state = states('[[entity_id_lights]]') %}
{% set is_on = light_state == 'on' %}
ha-card {
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;
--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 '' }}
uix:
style: >
@keyframes chip-drop {
0% { opacity: 0; transform: translateY(-12px) scale(0.85); }
60% { transform: translateY(3px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
{% set base = '[[animation_delay]]' | replace('s','') |
float %}
{% set d = (base + 0.19) | round(2) %}
{% set cover_state = states('[[entity_id_covers]]') %}
{% set is_on = cover_state in ['open', 'opening'] %}
ha-card {
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;
--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 '' }}
uix:
style: >
@keyframes chip-drop {
0% { opacity: 0; transform: translateY(-12px) scale(0.85); }
60% { transform: translateY(3px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
{% set base = '[[animation_delay]]' | replace('s','') |
float %}
{% set d = (base + 0.26) | round(2) %}
{% set fan_state = states('[[entity_id_fans]]') %}
{% set is_on = fan_state == 'on' %}
ha-card {
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;
--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_speakers]]'
state_not: unknown
- condition: state
entity: '[[entity_id_speakers]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_speakers]]'
tap_action:
action: more-info
icon: >
{% if is_state('[[entity_id_speakers]]', 'on') or
is_state('[[entity_id_speakers]]', 'playing') or
is_state('[[entity_id_speakers]]', 'paused') %}
mdi:speaker
{% else %}
mdi:speaker-off
{% endif %}
content: >-
{{ states('[[speakers_count_sensor]]') if
states('[[speakers_count_sensor]]') != '0' else '' }}
uix:
style: >
@keyframes chip-drop {
0% { opacity: 0; transform: translateY(-12px) scale(0.85); }
60% { transform: translateY(3px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
{% set base = '[[animation_delay]]' | replace('s','') |
float %}
{% set d = (base + 0.33) | round(2) %}
{% set speaker_state = states('[[entity_id_speakers]]') %}
{% set is_on = speaker_state in ['on', 'playing', 'paused']
%}
ha-card {
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;
--chip-background: {% if is_on %} #AFE1AF {% 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_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 '' }}
uix:
style: >
@keyframes chip-drop {
0% { opacity: 0; transform: translateY(-12px) scale(0.85); }
60% { transform: translateY(3px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
{% set base = '[[animation_delay]]' | replace('s','') |
float %}
{% set d = (base + 0.40) | round(2) %}
{% set window_state = states('[[entity_id_windows]]') %}
{% set is_on = window_state == 'on' %}
ha-card {
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;
--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 '' }}
uix:
style: >
@keyframes chip-drop {
0% { opacity: 0; transform: translateY(-12px) scale(0.85); }
60% { transform: translateY(3px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
{% set base = '[[animation_delay]]' | replace('s','') |
float %}
{% set d = (base + 0.47) | round(2) %}
{% set door_state = states('[[entity_id_doors]]') %}
{% set is_on = door_state == 'on' %}
ha-card {
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;
--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',
'locked'] and current_state not in ['docked', 'off', 'idle',
'unavailable', 'unknown', 'unlocked'] %} {% if is_active %}
[[custom_1_icon_active]]
{% else %}
[[custom_1_icon_inactive]]
{% endif %}
uix:
style: >
@keyframes chip-drop {
0% { opacity: 0; transform: translateY(-12px) scale(0.85); }
60% { transform: translateY(3px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
{% set base = '[[animation_delay]]' | replace('s','') |
float %}
{% set d = (base + 0.54) | round(2) %}
{% set current_state = states('[[entity_id_custom_1]]') %}
{% set is_active = current_state in ['on', 'playing',
'paused', 'locked'] and current_state not in ['docked',
'off', 'idle', 'unavailable', 'unknown', 'unlocked'] %}
ha-card {
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;
--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',
'locked'] and current_state not in ['docked', 'off', 'idle',
'unavailable', 'unknown', 'unlocked'] %} {% if is_active %}
[[custom_2_icon_active]]
{% else %}
[[custom_2_icon_inactive]]
{% endif %}
uix:
style: >
@keyframes chip-drop {
0% { opacity: 0; transform: translateY(-12px) scale(0.85); }
60% { transform: translateY(3px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
{% set base = '[[animation_delay]]' | replace('s','') |
float %}
{% set d = (base + 0.61) | round(2) %}
{% set current_state = states('[[entity_id_custom_2]]') %}
{% set is_active = current_state in ['on', 'playing',
'paused', 'locked'] and current_state not in ['docked',
'off', 'idle', 'unavailable', 'unknown', 'unlocked'] %}
ha-card {
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;
--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',
'locked'] and current_state not in ['docked', 'off', 'idle',
'unavailable', 'unknown', 'unlocked'] %} {% if is_active %}
[[custom_3_icon_active]]
{% else %}
[[custom_3_icon_inactive]]
{% endif %}
uix:
style: >
@keyframes chip-drop {
0% { opacity: 0; transform: translateY(-12px) scale(0.85); }
60% { transform: translateY(3px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
{% set base = '[[animation_delay]]' | replace('s','') |
float %}
{% set d = (base + 0.68) | round(2) %}
{% set current_state = states('[[entity_id_custom_3]]') %}
{% set is_active = current_state in ['on', 'playing',
'paused', 'locked'] and current_state not in ['docked',
'off', 'idle', 'unavailable', 'unknown', 'unlocked'] %}
ha-card {
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;
--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',
'locked'] and current_state not in ['docked', 'off', 'idle',
'unavailable', 'unknown', 'unlocked'] %} {% if is_active %}
[[custom_4_icon_active]]
{% else %}
[[custom_4_icon_inactive]]
{% endif %}
uix:
style: >
@keyframes chip-drop {
0% { opacity: 0; transform: translateY(-12px) scale(0.85); }
60% { transform: translateY(3px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
{% set base = '[[animation_delay]]' | replace('s','') |
float %}
{% set d = (base + 0.75) | round(2) %}
{% set current_state = states('[[entity_id_custom_4]]') %}
{% set is_active = current_state in ['on', 'playing',
'paused', 'locked'] and current_state not in ['docked',
'off', 'idle', 'unavailable', 'unknown', 'unlocked'] %}
ha-card {
animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;
--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;
}
uix:
style: |
.chip-container {
flex-flow: column wrap-reverse !important;
display: flex !important;
--chip-spacing: 8px;
margin: 9px;
}
uix:
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 %} rgba(172, 156, 175, 0.8)
{% elif t < 16 %} rgba(215, 196, 219, 0.8)
{% elif t < 19 %} rgba(163, 217, 245, 0.8)
{% elif t < 22 %} rgba(205, 227, 219, 0.8)
{% elif t < 24 %} rgba(255, 229, 153, 0.8)
{% elif t < 27 %} rgba(247, 190, 129, 0.8)
{% else %} rgba(228, 143, 123, 0.8) {% endif %};
{% endif %}
height: 186px;
}
room_selector:
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#room-selector'
name: Room Selector
icon: m3of:gmail-rooms
styles: |-
#root {
max-height: 100% !important;
transition: transform var(--md-sys-motion-expressive-spatial-default) !important;
}
.bubble-pop-up-container {
padding-bottom: 64px !important;
}
button_type: name
sub_button:
main: []
bottom: []
slider_fill_orientation: left
slider_value_position: right
margin_top_mobile: calc(100vh - 475px)
- type: custom:simple-swipe-card
auto_hide_pagination: 0
auto_height: true
cards:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:garage-variant
features_position: bottom
primary: Garage
color: '#ff595e'
vertical: true
tap_action:
action: navigate
navigation_path: /mobile-dashboard/garage
- type: custom:mushroom-template-card
icon: mdi:sofa
features_position: bottom
primary: Living Area
color: '#ff924c'
vertical: true
tap_action:
action: navigate
navigation_path: /mobile-dashboard/living-area
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: m3of:bed
features_position: bottom
primary: Master Bedroom
color: '#ffca3a'
vertical: true
tap_action:
action: navigate
navigation_path: /mobile-dashboard/master-bedroom
- type: custom:mushroom-template-card
icon: mdi:baby-carriage
features_position: bottom
primary: Baby Room
color: '#c5ca30'
vertical: true
tap_action:
action: navigate
navigation_path: /mobile-dashboard/baby-room
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: m3of:person-3
features_position: bottom
primary: Single Guest Room
color: '#8ac926'
vertical: true
tap_action:
action: navigate
navigation_path: /mobile-dashboard/single-guest-room
- type: custom:mushroom-template-card
icon: m3of:groups-2
features_position: bottom
primary: Multiple Guest Room
color: '#52a675'
vertical: true
tap_action:
action: navigate
navigation_path: /mobile-dashboard/multiple-guest-room
- type: custom:streamline-card
template: spacer_card
variables:
padding: 20px
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:table-furniture
features_position: bottom
primary: Entrance
color: '#1982c4'
vertical: true
tap_action:
action: navigate
navigation_path: /mobile-dashboard/entrance
- type: custom:mushroom-template-card
icon: m3of:computer
features_position: bottom
primary: Office
color: '#4267ac'
vertical: true
tap_action:
action: navigate
navigation_path: /mobile-dashboard/office
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: m3of:water-drop
features_position: bottom
primary: Guest Bathroom
color: '#6a4c93'
vertical: true
tap_action:
action: navigate
navigation_path: /mobile-dashboard/guest-bathroom
- type: custom:mushroom-template-card
icon: mdi:light-flood-down
features_position: bottom
primary: Driveway
color: '#b5a6c9'
vertical: true
tap_action:
action: navigate
navigation_path: /mobile-dashboard/driveway
- type: custom:streamline-card
template: spacer_card
variables:
padding: 20px
camera_generic_with_chips_card:
default:
- camera_url: ''
- camera_height: ''
- entity_id_light_one: ''
- entity_id_light_two: ''
- entity_id_light_three: ''
- light_one_icon: ''
- light_two_icon: ''
- light_three_icon: ''
- animation_delay: 0s
variables:
- camera_entity
- camera_height
- entity_id_light_one
- entity_id_light_two
- light_one_icon
- light_two_icon
- animation_delay
card:
type: vertical-stack
cards:
- type: custom:webrtc-camera
streams:
- entity: '[[camera_entity]]'
muted: true
uix:
style: |
ha-card {
height: [[camera_height]];
overflow: hidden;
}
- type: custom:mushroom-chips-card
alignment: start
chips:
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_light_one]]'
state_not: unknown
- condition: state
entity: '[[entity_id_light_one]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_light_one]]'
icon: '[[light_one_icon]]'
tap_action:
action: toggle
content: |
{{ states['[[entity_id_light_one]]'].name }}
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent)' }};
animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.3s) both;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_light_two]]'
state_not: unknown
- condition: state
entity: '[[entity_id_light_two]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_light_two]]'
icon: '[[light_two_icon]]'
tap_action:
action: toggle
content: |
{{ states['[[entity_id_light_two]]'].name }}
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent)' }};
animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.5s) both;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_light_three]]'
state_not: unknown
- condition: state
entity: '[[entity_id_light_three]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_light_three]]'
icon: '[[light_three_icon]]'
tap_action:
action: toggle
content: |
{{ states['[[entity_id_light_three]]'].name }}
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_three]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_three]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_three]]', 'on') else 'color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent)' }};
animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.5s) both;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
camera_rtsp_with_chips_card:
default:
- camera_url: ''
- camera_height: ''
- entity_id_light_one: ''
- entity_id_light_two: ''
- entity_id_light_three: ''
- light_one_icon: ''
- light_two_icon: ''
- light_three_icon: ''
- animation_delay: 0s
variables:
- camera_url
- camera_height
- entity_id_light_one
- entity_id_light_two
- light_one_icon
- light_two_icon
- animation_delay
card:
type: vertical-stack
cards:
- type: custom:webrtc-camera
url: '[[camera_url]]'
uix:
style: |
ha-card {
height: [[camera_height]];
overflow: hidden;
}
- type: custom:mushroom-chips-card
alignment: start
chips:
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_light_one]]'
state_not: unknown
- condition: state
entity: '[[entity_id_light_one]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_light_one]]'
icon: '[[light_one_icon]]'
tap_action:
action: toggle
content: |
{{ states['[[entity_id_light_one]]'].name }}
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent)' }};
animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.3s) both;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_light_two]]'
state_not: unknown
- condition: state
entity: '[[entity_id_light_two]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_light_two]]'
icon: '[[light_two_icon]]'
tap_action:
action: toggle
content: |
{{ states['[[entity_id_light_two]]'].name }}
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent)' }};
animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.5s) both;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
- type: conditional
conditions:
- condition: state
entity: '[[entity_id_light_three]]'
state_not: unknown
- condition: state
entity: '[[entity_id_light_three]]'
state_not: unavailable
chip:
type: template
entity: '[[entity_id_light_three]]'
icon: '[[light_three_icon]]'
tap_action:
action: toggle
content: |
{{ states['[[entity_id_light_three]]'].name }}
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_three]]', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_three]]', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_three]]', 'on') else 'color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent)' }};
animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.5s) both;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
irrigation_card:
variables:
switch_entity: ''
flow_sensor: ''
timer_entity: ''
zone: ''
soil_moisture_sensor: ''
soil_temperature_sensor: ''
card:
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: '[[switch_entity]]'
primary: |
{{ states('[[flow_sensor]]') | round(1) }} m³/h
secondary: >
{% set flow = states('[[flow_sensor]]') | float(0) %} {% if
is_state('[[switch_entity]]', 'on') %}
{% if flow < 0.1 %} Minimal Water Flow
{% elif flow < 0.3 %} Low Water Flow
{% elif flow < 0.6 %} Moderate Water Flow
{% else %} High Water Flow
{% endif %}
{% else %}
Water Flow
{% endif %}
icon: m3of:sprinkler
tap_action:
action: toggle
color: >
{% set flow = states('[[flow_sensor]]') | float %} {% if flow <
0.1 %} #A9A9A9 {% elif flow < 0.3 %} #ffd34f {% elif flow < 0.6
%} #9fe7e8 {% else %} #36a9e2 {% endif %}
features_position: bottom
- type: conditional
conditions:
- condition: state
entity: '[[timer_entity]]'
state: active
card:
type: custom:timer-bar-card
entity: '[[timer_entity]]'
name: Sprinkler
invert: true
bar_direction: ltr
bar_width: 60%
mushroom:
layout: horizontal
color: '#4CBB17'
- type: custom:config-template-card
entities:
- '[[flow_sensor]]'
variables:
- states['[[flow_sensor]]'].state
card:
type: custom:mini-graph-card
entities:
- entity: '[[flow_sensor]]'
name: Water Flow
color: |-
${vars[0] < 0.1 ? '#a9a9a9' :
(vars[0] < 0.3 ? '#ffd34f' :
(vars[0] < 0.6 ? '#9fe7e8' :
'#36a9e2'))}
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
height: 150
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: conditional
conditions:
- condition: state
entity: '[[soil_moisture_sensor]]'
state_not: unavailable
- condition: state
entity: '[[soil_moisture_sensor]]'
state_not: unknown
card:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: '[[soil_moisture_sensor]]'
icon: m3of:water-drop
primary: >
{% set moisture = states('[[soil_moisture_sensor]]') |
float(0) %} Moist: {{ moisture | round(1) }} %
secondary: >
{% set moisture = states('[[soil_moisture_sensor]]') |
float(0) %} {% if moisture < 15 %} Very Dry {% elif moisture <
25 %} Dry {% elif moisture < 45 %} Moist {% else %} Wet {%
endif %}
color: >
{% set moisture = states('[[soil_moisture_sensor]]') |
float(0) %} {% if moisture < 15 %} #A9A9A9 {% elif moisture <
25 %} #ffd34f {% elif moisture < 45 %} #9fe7e8 {% else %}
#36a9e2 {% endif %}
features_position: bottom
multiline_secondary: true
- type: custom:mushroom-template-card
entity: '[[soil_temperature_sensor]]'
icon: m3of:thermometer
primary: >
{% set temp = states('[[soil_temperature_sensor]]') | float(0)
%} Temp: {{ temp | round(1) }} {{
state_attr('weather.forecast_home', 'temperature_unit') }}
secondary: >
{% set temp = states('[[soil_temperature_sensor]]') | float(0)
%} {% if temp < 16 %} Very Cold {% elif temp < 18 %} Cool {%
elif temp < 22 %} Mild {% elif temp < 24 %} Warm {% elif temp
< 27 %} Hot {% else %} Very Hot {% endif %}
color: >
{% set temp = states('[[soil_temperature_sensor]]') | float(0)
%} {% if temp < 16 %} #CEB2F5 {% elif temp < 18 %} #5EBDEE {%
elif temp < 22 %} #9cc8b8 {% elif temp < 24 %} #e7b562 {% elif
temp < 27 %} #FF564B {% else %} #99332d {% endif %}
features_position: bottom
multiline_secondary: true
- type: custom:streamline-card
template: title_card
variables:
- title: Irrigation Control
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:timer-outline
primary: 5 m
tap_action:
action: call-service
service: script.start_sprinkler_timer
data:
zone: '[[zone]]'
duration: '00:05:00'
layout: vertical
- type: custom:mushroom-template-card
icon: mdi:timer-outline
primary: 15 m
tap_action:
action: call-service
service: script.start_sprinkler_timer
data:
zone: '[[zone]]'
duration: '00:15:00'
layout: vertical
- type: custom:mushroom-template-card
icon: mdi:timer-outline
primary: 30 m
tap_action:
action: call-service
service: script.start_sprinkler_timer
data:
zone: '[[zone]]'
duration: '00:30:00'
layout: vertical
- type: custom:mushroom-template-card
icon: mdi:timer-outline
primary: 1 hr
tap_action:
action: call-service
service: script.start_sprinkler_timer
data:
zone: '[[zone]]'
duration: '01:00:00'
layout: vertical
- type: custom:mushroom-template-card
icon: mdi:timer-outline
primary: 2 hr
tap_action:
action: call-service
service: script.start_sprinkler_timer
data:
zone: '[[zone]]'
duration: '02:00:00'
layout: vertical
button_card_templates:
sensor_battery:
name: |
[[[ return entity.attributes.device_name; ]]]
label: |
[[[ return entity.state + '%' ]]]
show_icon: true
show_label: true
icon: |
[[[
var state = parseFloat(entity.state);
if (state <= 15) {
return 'mdi:battery-alert';
} else if (state <= 25) {
return 'mdi:battery-20';
} else if (state <= 35) {
return 'mdi:battery-30';
} else if (state <= 45) {
return 'mdi:battery-40';
} else if (state <= 55) {
return 'mdi:battery-50';
} else if (state <= 65) {
return 'mdi:battery-60';
} else if (state <= 75) {
return 'mdi:battery-70';
} else if (state <= 85) {
return 'mdi:battery-80';
} else if (state <= 95) {
return 'mdi:battery-90';
} else if (state <= 100) {
return 'mdi:battery';
} else {
return 'mdi:battery-unknown';
}
]]]
styles:
card:
- padding: 12px 16px 10px 16px
- height: 140px
- background: var(--card-background-color)
- border-radius: 16px
grid:
- grid-template-areas: '"i l" "n n" "sub sub" "bar bar"'
- grid-template-columns: auto 1fr
- grid-template-rows: auto auto auto 1fr
label:
- justify-self: end
- align-self: start
- font-size: 23px
- font-weight: 500
- padding-right: 4px
- color: |
[[[
var state = parseFloat(entity.state);
if (state <= 20) return '#F95454';
if (state <= 40) return '#FF9C73';
if (state <= 60) return '#FBD288';
if (state <= 80) return '#78B3CE';
return '#9EDF9C';
]]]
name:
- justify-self: start
- align-self: start
- font-size: 14px
- font-weight: 500
- color: var(--primary-text-color)
- padding-left: 0px
- margin-top: 4px
- white-space: nowrap
- overflow: hidden
- text-overflow: ellipsis
img_cell:
- justify-self: start
- align-self: start
- background: |
[[[
var state = parseFloat(entity.state);
if (state <= 20) return 'rgba(249,84,84,0.18)';
if (state <= 40) return 'rgba(255,156,115,0.18)';
if (state <= 60) return 'rgba(251,210,136,0.18)';
if (state <= 80) return 'rgba(120,179,206,0.18)';
return 'rgba(158,223,156,0.18)';
]]]
- padding: 10px
- border-radius: 50%
- width: 24px
- height: 24px
- margin-right: 8px
icon:
- width: 24px
- height: 24px
- color: |
[[[
var state = parseFloat(entity.state);
if (state <= 20) return '#F95454';
if (state <= 40) return '#FF9C73';
if (state <= 60) return '#FBD288';
if (state <= 80) return '#78B3CE';
return '#9EDF9C';
]]]
custom_fields:
sub:
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
- margin-top: 2px
- padding-left: 0px
- align-self: start
bar:
- justify-self: start
- width: 100%
- margin-top: 8px
- height: 4px
- border-radius: 4px
- background: rgba(128,128,128,0.2)
- overflow: hidden
custom_fields:
sub: |
[[[
const battery = entity.attributes.battery_type_and_quantity || '';
const lastUpdated = entity.last_updated;
let timeStr = '';
if (lastUpdated) {
const diffSeconds = Math.floor((new Date() - new Date(lastUpdated)) / 1000);
if (diffSeconds < 60) timeStr = `${diffSeconds}s ago`;
else if (diffSeconds < 3600) timeStr = `${Math.floor(diffSeconds/60)}m ago`;
else if (diffSeconds < 86400) timeStr = `${Math.floor(diffSeconds/3600)}h ago`;
else timeStr = `${Math.floor(diffSeconds/86400)}d ago`;
}
const parts = [battery, timeStr].filter(Boolean);
return parts.join(' · ');
]]]
bar: |
[[[
var state = parseFloat(entity.state);
var color;
if (state <= 20) color = '#F95454';
else if (state <= 40) color = '#FF9C73';
else if (state <= 60) color = '#FBD288';
else if (state <= 80) color = '#78B3CE';
else color = '#9EDF9C';
return ``;
]]]
views:
- title: Overview
type: custom:grid-layout
layout:
grid-template-columns: 25% 25% 25% 25%
grid-template-rows: auto
grid-template-areas: |
"greeting simple_tab weather calendar_notification"
"room_selector . . calendar_notification"
"room1 room2 room3 calendar_notification"
"camera1 camera2 camera3 calendar_notification"
cards:
- 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
- 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
- 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
- type: custom:streamline-card
template: room_toggles_chip_card
variables:
entity_area_one: input_boolean.room_toggle_one
area_one_icon: mdi:star
area_one_name: Default
entity_area_two: input_boolean.room_toggle_two
area_two_icon: mdi:home
area_two_name: Others
entity_area_three: input_boolean.room_toggle_three
area_three_icon: mdi:light-flood-down
area_three_name: Outdoor
animation_delay: 0.2s
view_layout:
grid-area: room_selector
- 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
- 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: Master
icon: m3of:bed
entity_id_temperature: sensor.master_bedroom_temperature
entity_id_humidity: sensor.master_bedroom_humidity
entity_id_ac: climate.master_bedroom
entity_id_ac_main: climate.heat_pump
entity_id_lights: light.lights_mbr_all
lights_icon: hue:recessed-ceiling
lights_count_sensor: sensor.lights_mbr_count
entity_id_covers: group.curtains_mbr
covers_count_sensor: sensor.covers_mbr_count
entity_id_doors: group.doors_mbr
doors_count_sensor: sensor.doors_mbr_count
navigation_path: /tablet-dashboard/master-bedroom/
- type: custom:streamline-card
template: room_card
variables:
name: Baby
icon: m3of:stroller
entity_id_temperature: sensor.baby_room_temperature
entity_id_humidity: sensor.baby_room_humidity
entity_id_ac_main: climate.heat_pump
entity_id_ac: climate.baby_room
entity_id_lights: light.lights_br_scene
lights_icon: hue:recessed-ceiling
lights_count_sensor: sensor.lights_br_count
entity_id_windows: group.windows_br
windows_count_sensor: sensor.windows_br_count
entity_id_doors: binary_sensor.door_sensor_br_contact
doors_count_sensor: sensor.doors_br_count
navigation_path: /tablet-dashboard/baby-room/
- 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: Office
icon: m3of:computer
entity_id_temperature: sensor.office_room_temperature
entity_id_humidity: sensor.office_room_humidity
entity_id_ac_main: climate.heat_pump
entity_id_ac: climate.office_room
entity_id_lights: switch.light_switch_or
lights_icon: hue:recessed-ceiling
lights_count_sensor: sensor.lights_or_count
entity_id_windows: group.windows_or
windows_count_sensor: sensor.windows_or_count
entity_id_doors: binary_sensor.door_sensor_or_contact
doors_count_sensor: sensor.doors_or_count
navigation_path: /tablet-dashboard/office/
- type: custom:streamline-card
template: room_card
variables:
name: Guest Bath
icon: m3of:water-drop
entity_id_temperature: sensor.guest_bathroom_temperature
entity_id_humidity: sensor.guest_bathroom_humidity
entity_id_lights: light.lights_gbr
lights_icon: hue:recessed-ceiling
lights_count_sensor: sensor.lights_gbr_count
entity_id_fans: group.guest_bathroom_fans
fans_count_sensor: sensor.fans_gbr_count
entity_id_windows: group.windows_gbr
windows_count_sensor: sensor.windows_gbr_count
navigation_path: /tablet-dashboard/guest-bathroom/
view_layout:
grid-area: room2
- type: vertical-stack
cards:
- type: custom:streamline-card
template: title_navigation_card
variables:
title: Driveway
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.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_wall
light_two_icon: hue:wall-appear
entity_id_light_three: light.lights_outdoor_grg
light_three_icon: hue:recessed-ceiling
view_layout:
grid-area: camera1
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_navigation_card
variables:
title: Garage
navigation_path: /tablet-dashboard/camera
title_font_size: 20px
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.door_sensor_grg_contact
icon: >
{% if is_state('binary_sensor.door_sensor_grg_contact',
'on') %}
mdi:garage-open-variant
{% else %}
mdi:garage-variant
{% endif %}
content: >
{% if is_state('binary_sensor.door_sensor_grg_contact',
'on') %}
Open
{% else %}
Closed
{% endif %}
tap_action:
action: call-service
service: script.garage_button_frontend
uix:
style:
.: |
ha-card {
--text-color: 'white';
--color: 'white';
--chip-background: {{ '#bc000a' if is_state('binary_sensor.door_sensor_grg_contact', 'on') else 'var(--md-sys-color-on-primary)' }};
}
alignment: end
uix:
style: |
ha-card {
margin-top: 1.6em
}
- type: custom:streamline-card
template: camera_rtsp_with_chips_card
variables:
camera_url: >-
ffmpeg:rtsp://username:password@192.168.1.248/h264Preview_01_main#video=copy#audio=opus
entity_id_light_one: switch.light_switch_grg
light_one_icon: mdi:garage-variant
entity_id_light_two: switch.rear_light_switch_grg
light_two_icon: mdi:outdoor-lamp
view_layout:
grid-area: camera3
- 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: Single
icon: m3of:person-3
entity_id_temperature: sensor.single_guest_room_temperature
entity_id_humidity: sensor.single_guest_room_humidity
entity_id_lights: light.lights_sgr_scene
lights_icon: hue:recessed-ceiling
lights_count_sensor: sensor.lights_sgr_count
entity_id_ac_main: climate.heat_pump
entity_id_ac: climate.single_guest_room
entity_id_windows: group.windows_sgr
windows_count_sensor: sensor.windows_sgr_count
entity_id_doors: binary_sensor.door_sensor_sgr_contact
doors_count_sensor: sensor.doors_sgr_count
navigation_path: /tablet-dashboard/single-guest-room/
- type: custom:streamline-card
template: room_card
variables:
name: Multiple
icon: m3of:groups-2
entity_id_temperature: sensor.multiple_guest_room_temperature
entity_id_humidity: sensor.multiple_guest_room_humidity
entity_id_lights: light.lights_mgr_scene
lights_icon: hue:recessed-ceiling
lights_count_sensor: sensor.lights_mgr_count
entity_id_ac_main: climate.heat_pump
entity_id_ac: climate.multiple_guest_room
entity_id_windows: group.windows_mgr
windows_count_sensor: sensor.windows_mgr_count
entity_id_doors: binary_sensor.door_sensor_mgr_contact
doors_count_sensor: sensor.doors_mgr_count
navigation_path: /tablet-dashboard/multiple-guest-room/
- 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: Laundry
icon: m3of:laundry
entity_id_lights: light.lights_lr_all
lights_icon: hue:recessed-ceiling
lights_count_sensor: sensor.lights_lr_count
entity_id_fans: fan.laundry_room_fan
fans_count_sensor: sensor.fans_lr_count
entity_id_doors: binary_sensor.outdoor_door_sensor_lr_contact
doors_count_sensor: sensor.doors_lr_count
room_background: '#ebd9a9'
navigation_path: /tablet-dashboard/laundry/
- type: custom:streamline-card
template: room_card
variables:
name: Hallway
icon: mdi:image
entity_id_lights: switch.light_switch_hw
lights_icon: hue:recessed-ceiling
lights_count_sensor: sensor.lights_hw_count
entity_id_windows: group.windows_hw
windows_count_sensor: sensor.windows_hw_count
room_background: '#f2ebd8'
navigation_path: /tablet-dashboard/hallway
view_layout:
grid-area: room3
- type: custom:vertical-stack-in-card
cards:
- type: conditional
conditions:
- entity: binary_sensor.left_walkway_camera_person
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_navigation_card
variables:
title: Left Walkway
navigation_path: /tablet-dashboard/camera
title_font_size: 20px
- 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
- type: conditional
conditions:
- condition: state
entity: binary_sensor.left_walkway_camera_person
state_not: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_navigation_card
variables:
title: Right Walkway
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.244/h265Preview_01_main#video=copy#audio=opus
entity_id_light_one: switch.patio_main_switch_la
entity_id_light_two: switch.patio_side_switch_la
light_one_icon: mdi:outdoor-lamp
light_two_icon: mdi:outdoor-lamp
view_layout:
grid-area: camera2
- 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.media
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.earthquake
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.earthquake',
'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.media
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.earthquake
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.earthquake',
'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.rey
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.media
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.earthquake
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.earthquake',
'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.rey
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
icon: m3o:home
path: overview
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
- type: sections
max_columns: 3
title: Notifications
path: notifications
icon: mdi:bell-outline
sections:
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: conditional
conditions:
- condition: state
entity: input_boolean.guest_mode
state: "on"
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: WiFi QR Code
title_font_size: 20px
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: input_boolean.guest_mode
state: "on"
chip:
type: template
entity: input_boolean.guest_mode
icon: mdi:account-group
tap_action:
action: toggle
alignment: end
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('input_boolean.guest_mode', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('input_boolean.guest_mode', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('input_boolean.guest_mode', 'on') else 'color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent)' }};
margin-top: 1.6em
- type: picture
image:
media_content_id: /local/QR.jpg
- square: false
type: grid
cards:
- type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: input_boolean.rubbish
state: "on"
- condition: state
entity: input_boolean.recycle
state: "on"
- condition: state
entity: switch.driveway_water_tap
state: "on"
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_navigation_card
variables:
title: Driveway
title_font_size: 20px
navigation_path: /mobile-dashboard/camera
- type: custom:streamline-card
template: camera_rtsp_with_chips_card
variables:
camera_url: >-
ffmpeg:rtsp://username:password$@192.168.1.245/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_wall
light_two_icon: hue:wall-appear
entity_id_light_three: light.lights_outdoor_grg
light_three_icon: hue:recessed-ceiling
- type: conditional
conditions:
- condition: state
entity: group.doors_grg
state: "on"
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_navigation_card
variables:
title: Garage
title_font_size: 20px
navigation_path: /mobile-dashboard/camera
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.garage_opener
icon: >
{% if
is_state('binary_sensor.door_sensor_grg_contact',
'on') %}
mdi:garage-open-variant
{% else %}
mdi:garage-variant
{% endif %}
content: >
{% if
is_state('binary_sensor.door_sensor_grg_contact',
'on') %}
Open
{% else %}
Closed
{% endif %}
tap_action:
action: toggle
uix:
style:
.: |
ha-card {
--text-color: 'white';
--color: 'white';
--chip-background: {{ '#bc000a' if is_state('binary_sensor.door_sensor_grg_contact', 'on') else 'var(--md-sys-color-on-primary)' }};
}
alignment: end
uix:
style: |
ha-card {
margin-top: 1.7em
}
- type: custom:streamline-card
template: camera_rtsp_with_chips_card
variables:
camera_url: >-
ffmpeg:rtsp://username:password$@192.168.1.248/h264Preview_01_main#video=copy#audio=opus
entity_id_light_one: switch.light_switch_grg
light_one_icon: mdi:garage-variant
entity_id_light_two: switch.rear_light_switch_grg
light_two_icon: mdi:outdoor-lamp
columns: 1
- type: conditional
conditions:
- condition: or
conditions:
- condition: numeric_state
entity: sensor.average_backyard_soil_humidity
below: 40
- condition: state
entity: sensor.house_maintenance_chip_card
state: "true"
- condition: state
entity: sensor.laundry_machine_state
state: Delay Run
- condition: state
entity: sensor.laundry_machine_state
state: Run
- condition: numeric_state
entity: sensor.dryer_switch_lr_power
above: 10
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Chores
title_font_size: 20px
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.average_backyard_soil_humidity
below: 40
chip:
type: template
entity: sensor.average_backyard_soil_humidity
icon: mdi:water-percent
content: >-
{{ states('sensor.average_backyard_soil_humidity') }}% -
{% set moisture =
states('sensor.average_backyard_soil_humidity')
| float(0) %}
{% if moisture < 15 %}
very dry
{% elif moisture < 25 %}
dry
{% elif moisture < 45 %}
moist
{% else %}
wet
{% endif %}
icon_color: >-
{% set moisture =
states('sensor.average_backyard_soil_humidity')
| float(0) %} {% if moisture < 15 %}
#A9A9A9
{% elif moisture < 25 %}
#ffd34f
{% elif moisture < 45 %}
#9fe7e8
{% else %}
#36a9e2
{% endif %}
tap_action:
action: more-info
- type: conditional
conditions:
- condition: state
entity: sensor.house_maintenance_chip_card
state: "true"
chip:
type: template
entity: sensor.house_maintenance_chip_card
icon: |
{% if is_state('input_boolean.rubbish', 'on') %}
mdi:trash-can
{% elif is_state('input_boolean.recycle', 'on') %}
mdi:recycle
{% else %} {% endif %}
icon_color: |
{% if is_state('input_boolean.rubbish', 'on') %}
#C41E3A
{% elif is_state('input_boolean.recycle', 'on') %}
#50C878
{% else %} {% endif %}
content: |
{% if is_state('input_boolean.rubbish', 'on') %}
Rubbish Day
{% elif is_state('input_boolean.recycle', 'on') %}
Recycle Day
{% else %} {% endif %}
tap_action:
action: more-info
- type: conditional
conditions:
- condition: state
entity: sensor.laundry_machine_state
state: Delay Run
chip:
type: entity
entity: sensor.laundry_delay_time_remaining
icon_color: blue
icon: m3of:timer-arrow-down
tap_action:
action: more-info
- type: conditional
conditions:
- condition: state
entity: sensor.laundry_machine_state
state: Run
chip:
type: entity
entity: sensor.laundry_time_remaining_friendly
icon: m3of:laundry
icon_color: blue
tap_action:
action: more-info
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.dryer_switch_lr_power
above: 10
chip:
type: template
entity: sensor.dryer_switch_lr_power
tap_action:
action: more-info
icon: mdi:tumble-dryer
icon_color: "#880808"
content: Dryer Running
alignment: start
- type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: timer.exhaust_fans
state: active
- condition: state
entity: timer.rice_cooker
state: active
- condition: state
entity: timer.blender
state: active
- condition: state
entity: timer.driveway_sprinkler_timer
state: active
- condition: state
entity: timer.backyard_sprinkler_timer
state: active
- condition: state
entity: timer.right_walkway_sprinkler_timer
state: active
- condition: state
entity: timer.dyson_charger
state: active
card:
type: custom:streamline-card
template: title_card
variables:
title: Timer
title_font_size: 20px
- type: grid
columns: 2
square: false
cards:
- type: conditional
conditions:
- condition: state
entity: timer.exhaust_fans
state: active
card:
type: custom:timer-bar-card
entity: timer.exhaust_fans
invert: true
bar_direction: ltr
bar_width: 60%
mushroom:
layout: vertical
color: "#b5e0f7"
- type: conditional
conditions:
- condition: state
entity: timer.rice_cooker
state: active
card:
type: custom:timer-bar-card
entity: timer.rice_cooker
invert: true
bar_direction: ltr
bar_width: 60%
mushroom:
layout: vertical
color: "#D70040"
- type: conditional
conditions:
- condition: state
entity: timer.blender
state: active
card:
type: custom:timer-bar-card
entity: timer.blender
invert: true
bar_direction: ltr
bar_width: 60%
mushroom:
layout: vertical
color: "#A020F0"
- type: conditional
conditions:
- condition: state
entity: timer.driveway_sprinkler_timer
state: active
card:
type: custom:timer-bar-card
entity: timer.driveway_sprinkler_timer
name: Driveway Sprinkler
invert: true
bar_direction: ltr
bar_width: 60%
mushroom:
layout: vertical
color: "#006d77"
- type: conditional
conditions:
- condition: state
entity: timer.backyard_sprinkler_timer
state: active
card:
type: custom:timer-bar-card
entity: timer.backyard_sprinkler_timer
name: Backyard Sprinkler
invert: true
bar_direction: ltr
bar_width: 60%
mushroom:
layout: vertical
color: "#83c5be"
- type: conditional
conditions:
- condition: state
entity: timer.right_walkway_sprinkler_timer
state: active
card:
type: custom:timer-bar-card
entity: timer.right_walkway_sprinkler_timer
name: Right Walkway Sprinkler
invert: true
bar_direction: ltr
bar_width: 60%
mushroom:
layout: vertical
color: "#edf6f9"
tap_action:
action: navigate
navigation_path: "?tab=right-driveway/mobile-dashboard/irrigation"
- type: conditional
conditions:
- condition: state
entity: timer.dyson_charger
state: active
card:
type: custom:timer-bar-card
entity: timer.dyson_charger
invert: true
bar_direction: ltr
bar_width: 60%
mushroom:
layout: vertical
color: "#5D3FD3"
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Media
title_font_size: 20px
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: input_boolean.guest_mode
state: "off"
chip:
type: template
entity: input_boolean.guest_mode
icon: mdi:account-group
tap_action:
action: toggle
alignment: end
uix:
style:
.: |
ha-card {
--text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('input_boolean.guest_mode', 'on') else 'var(--md-sys-color-primary)' }};
--color: {{ 'var(--md-sys-color-on-primary)' if is_state('input_boolean.guest_mode', 'on') else 'var(--md-sys-color-primary)' }};
--chip-background: {{ 'var(--md-sys-color-primary)' if is_state('input_boolean.guest_mode', 'on') else 'color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent)' }};
margin-top: 1.6em
- type: custom:mushroom-template-card
primary: Spotify App
secondary: Navigate to Spotify
icon: mdi:spotify
color: green
features_position: bottom
tap_action:
action: url
url_path: spotify://home
- type: custom:streamline-card
template: count_button_card
variables:
group_entity: switch.towel_switches
count_entity: switch.towel_switches
title: Towel Heating
icon: mdi:heating-coil
color: "#bc000a"
background_color: rgba(210, 43, 43, 0.5)
filter_state: "on"
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.low_battery_count
above: 0
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Devices
title_font_size: 20px
- type: custom:auto-entities
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-gap: 1px 1px
grid-template-columns: 50% 50%
grid-template-rows: auto
filter:
include:
- options:
type: custom:button-card
template: sensor_battery
entity_id: sensor.*battery_plus
state: <100
exclude: []
sort:
method: state
numeric: true
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: grid
cards:
- type: custom:simple-swipe-card
auto_hide_pagination: 0
auto_height: true
cards:
- type: conditional
conditions:
- condition: state
entity: light.all_lights
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: entity_count_card
variables:
entity: light.all_lights_count_only
title: Lights
icon: mdi:lightbulb-on
color: '#FFBF00'
- type: custom:auto-entities
card:
square: false
type: grid
columns: 2
card_param: cards
filter:
include:
- group: light.all_lights
state: 'on'
options:
type: custom:streamline-card
template: light_card
variables:
entity: this.entity_id
name: null
icon: null
exclude: []
show_empty: false
sort:
method: entity_id
- type: custom:streamline-card
template: spacer_card
variables:
padding: 20px
- type: conditional
conditions:
- condition: state
entity: group.all_light_switches
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: entity_count_card
variables:
entity: group.all_light_switches
title: Lights Switches
icon: m3of:switch
color: var(--primary-text-color)
- type: custom:auto-entities
card:
square: false
type: grid
columns: 2
card_param: cards
filter:
include:
- group: group.all_light_switches
state: 'on'
options:
type: custom:streamline-card
template: button_card
variables:
entity: this.entity_id
icon: m3of:switch
background_color: rgba(238, 220, 130, 0.5)
exclude: []
show_empty: false
sort:
method: entity_id
- type: custom:streamline-card
template: spacer_card
variables:
padding: 20px
- type: conditional
conditions:
- condition: state
entity: group.all_doors
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: entity_count_card
variables:
entity: group.all_doors
title: Doors
icon: m3o:door-open
color: '#bc000a'
- type: custom:auto-entities
card:
square: false
type: grid
columns: 2
card_param: cards
filter:
include:
- group: group.all_doors
state: 'on'
options:
type: custom:streamline-card
template: button_card
variables:
entity: this.entity_id
icon: m3of:door-open
background_color: rgba(188, 0, 10, 0.5)
exclude: []
show_empty: false
sort:
method: friendly_name
- type: custom:streamline-card
template: spacer_card
variables:
padding: 20px
- type: conditional
conditions:
- condition: state
entity: group.all_windows
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: entity_count_card
variables:
entity: group.all_windows
title: Windows
icon: m3o:window-open
color: '#ffaa00'
- type: custom:auto-entities
card:
square: false
type: grid
columns: 2
card_param: cards
filter:
include:
- group: group.all_windows
state: 'on'
options:
type: custom:streamline-card
template: button_card
variables:
entity: this.entity_id
icon: m3of:window-open
background_color: rgba(255, 170, 0, 0.5)
exclude: []
show_empty: false
sort:
method: friendly_name
- type: custom:streamline-card
template: spacer_card
variables:
padding: 20px
- type: conditional
conditions:
- condition: state
entity: group.all_fans
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: entity_count_card
variables:
- entity: group.all_fans
- title: Fans
- icon: mdi:fan
- color: '#ADD8E6'
- type: custom:auto-entities
card:
square: false
type: grid
columns: 2
card_param: cards
filter:
include:
- group: group.all_fans
state: 'on'
options:
type: custom:streamline-card
template: button_card
variables:
entity: this.entity_id
icon: mdi:fan
background_color: rgba(137, 207, 240, 0.5)
exclude: []
show_empty: false
sort:
method: friendly_name
- type: custom:streamline-card
template: spacer_card
variables:
padding: 20px
- type: conditional
conditions:
- condition: state
entity: group.all_curtains
state: open
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: entity_count_card
variables:
entity: group.all_curtains
title: Curtains
icon: m3of:curtains
color: '#702963'
- type: custom:auto-entities
card:
square: false
type: grid
columns: 2
card_param: cards
filter:
include:
- group: group.all_curtains
state: open
options:
type: custom:streamline-card
template: curtain_slider_card
variables:
entity_id: this.entity_id
icon: mdi:curtains
exclude: []
show_empty: false
sort:
method: friendly_name
- type: custom:streamline-card
template: spacer_card
variables:
padding: 20px
- type: grid
cards:
- 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.earthquake')
| 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: x
longitude: y
location:
city: ''
country: New Zealand
custom_background: >-
https://cdn.jsdelivr.net/gh/ngocjohn/lunar-phase-card@1.7.3/background/moon_bg_2.png
cards: []
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
header:
layout: responsive
badges_position: top
badges_wrap: wrap
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
subview: true
- type: sections
max_columns: 3
icon: mdi:shield-lock
path: alarmo
title: Alarmo
sections:
- type: grid
cards:
- 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_navigation_card
variables:
title: Camera
navigation_path: /tablet-dashboard/camera
title_font_size: 20px
- type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
overflow: scroll
margin: 12px 0 12px -18px
padding-left: 18px
width: 100%
extra_styles: |
::-webkit-scrollbar {
display: none;
}
buttons:
- entity: input_boolean.siren_alarm
state_icons:
'on': m3of:siren
'off': m3o:siren
layout: icon_name
name: SIREN ALARM
tap_action:
action: call-service
service: script.alarmo_sound_alarm
styles:
name:
color: grey
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: var(--popupBG)
border-radius: 24px
color: var(--white)
icon:
'--mdc-icon-size': 26px
color: grey
state_styles:
'on':
icon:
color: red
name:
color: red
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
states:
- arm_away
type: alarm-panel
entity: alarm_control_panel.alarmo
theme: Material You
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
header:
layout: responsive
badges_position: top
badges_wrap: wrap
cards: []
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
subview: true
- type: sections
max_columns: 3
icon: m3o:camera
path: camera
title: Camera
sections:
- type: grid
cards:
- 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
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
title: Entrance
subtitle: '{{ states (''sensor.entrance_camera_status'') }}'
- type: custom:mushroom-chips-card
chips:
- type: template
entity: automation.driveway_camera_vehicle_notification
icon: >-
{{ 'm3of:sensor-occupied' if
is_state('automation.room_presence_entrance', '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_vehicle_notification', 'on') else '#a8a8a8' }};
--color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_vehicle_notification', 'on') else '#a8a8a8' }};
}
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.222/h265Preview_01_main#video=copy#audio=opus
entity_id_light_one: light.lights_etr
light_one_icon: m3of:lightbulb
camera_height: 238px
animation_delay: 1.3s
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
title: Backyard
subtitle: '{{ states (''sensor.backyard_camera_status'') }}'
- type: custom:mushroom-chips-card
chips:
- type: template
entity: automation.right_backyard_camera_person_notification
icon: >
{{ 'm3of:sensor-occupied' if
is_state('automation.right_backyard_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.right_backyard_camera_person_notification', 'on') else '#a8a8a8' }};
--color: {{ 'var(--primary-text-color)' if is_state('automation.right_backyard_camera_person_notification', 'on') else '#a8a8a8' }};
}
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.148/h264Preview_01_main#video=copy#audio=opus
entity_id_light_one: switch.patio_main_switch_la
light_one_icon: m3of:lightbulb
animation_delay: 2.8s
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
title: Right Walkway
subtitle: '{{ states (''sensor.right_walkway_camera_status'') }}'
animation_delay: 1.4s
- type: custom:mushroom-chips-card
chips:
- type: template
entity: automation.right_walkway_camera_person_notification
icon: >
{{ 'm3of:sensor-occupied' if
is_state('automation.right_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.right_walkway_camera_person_notification', 'on') else '#a8a8a8' }};
--color: {{ 'var(--primary-text-color)' if is_state('automation.right_walkway_camera_person_notification', 'on') else '#a8a8a8' }};
animation: slideDown 1.0s ease-out 2.1s 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;
animation: slideDown 1.0s ease-out 1.7s both;
}
@keyframes slideDown {
from {
opacity: 1;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
- type: custom:streamline-card
template: camera_rtsp_with_chips_card
variables:
camera_url: >-
ffmpeg:rtsp://username:password@192.168.1.244/h265Preview_01_main#video=copy#audio=opus
entity_id_light_one: switch.patio_main_switch_la
entity_id_light_two: switch.patio_side_switch_la
light_one_icon: mdi:outdoor-lamp
light_two_icon: mdi:outdoor-lamp
animation_delay: 1.8s
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:streamline-card
template: title_subtitle_card
variables:
title: Garage
subtitle: '{{ states (''sensor.garage_camera_status'') }}'
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.door_sensor_grg_contact
icon: >
{% if
is_state('binary_sensor.door_sensor_grg_contact',
'on') %}
mdi:garage-open-variant
{% else %}
mdi:garage-variant
{% endif %}
content: >
{% if
is_state('binary_sensor.door_sensor_grg_contact',
'on') %}
Open
{% else %}
Closed
{% endif %}
tap_action:
action: call-service
service: script.garage_button_frontend
uix:
style:
.: |
ha-card {
--text-color: 'white';
--color: 'white';
--chip-background: {{ '#bc000a' if is_state('binary_sensor.door_sensor_grg_contact', 'on') else 'var(--md-sys-color-on-primary)' }};
}
- type: template
entity: automation.garage_camera_person_notification
icon: >
{{ 'm3of:sensor-occupied' if
is_state('automation.garage_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.garage_camera_person_notification', 'on') else '#a8a8a8' }};
--color: {{ 'var(--primary-text-color)' if is_state('automation.garage_camera_person_notification', 'on') else '#a8a8a8' }};
}
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.248/h264Preview_01_main#video=copy#audio=opus
entity_id_light_one: switch.light_switch_grg
light_one_icon: mdi:garage-variant
entity_id_light_two: switch.rear_light_switch_grg
light_two_icon: mdi:outdoor-lamp
animation_delay: 3.3s
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
header:
layout: responsive
badges_position: top
badges_wrap: wrap
cards: []
background:
opacity: 50
alignment: center
size: cover
repeat: repeat
attachment: fixed
image: null
subview: true
- type: sections
max_columns: 3
title: Calendar
path: calendar
sections:
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.christina
color: '#ff6a6a'
- entity: calendar.rey
color: '#71c8fe'
- entity: calendar.house_maintenance
color: '#d3f37f'
- entity: calendar.new_zealand_holidays
color: '#f9da4e'
days: '1'
startingDay: today
startingDayOffset: 0
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
entity: weather.home
locale: nz
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.christina
color: '#ff6a6a'
- entity: calendar.rey
color: '#71c8fe'
- entity: calendar.house_maintenance
color: '#d3f37f'
- entity: calendar.new_zealand_holidays
color: '#f9da4e'
days: '1'
startingDay: today
startingDayOffset: '1'
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
entity: weather.home
locale: nz
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.christina
color: '#ff6a6a'
- entity: calendar.rey
color: '#71c8fe'
- entity: calendar.house_maintenance
color: '#d3f37f'
- entity: calendar.new_zealand_holidays
color: '#f9da4e'
days: '1'
startingDay: today
startingDayOffset: '2'
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
entity: weather.home
locale: nz
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.christina
color: '#ff6a6a'
- entity: calendar.rey
color: '#71c8fe'
- entity: calendar.house_maintenance
color: '#d3f37f'
- entity: calendar.new_zealand_holidays
color: '#f9da4e'
days: '1'
startingDay: today
startingDayOffset: '3'
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
entity: weather.home
locale: nz
showLegend: false
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.christina
color: '#ff6a6a'
- entity: calendar.rey
color: '#71c8fe'
- entity: calendar.house_maintenance
color: '#d3f37f'
- entity: calendar.new_zealand_holidays
color: '#f9da4e'
days: '1'
startingDay: today
startingDayOffset: '4'
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
entity: weather.home
locale: nz
showLegend: false
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.christina
color: '#ff6a6a'
- entity: calendar.rey
color: '#71c8fe'
- entity: calendar.house_maintenance
color: '#d3f37f'
- entity: calendar.new_zealand_holidays
color: '#f9da4e'
days: '1'
startingDay: today
startingDayOffset: '5'
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
entity: weather.home
locale: nz
showLegend: false
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.christina
color: '#ff6a6a'
- entity: calendar.rey
color: '#71c8fe'
- entity: calendar.house_maintenance
color: '#d3f37f'
- entity: calendar.new_zealand_holidays
color: '#f9da4e'
days: '1'
startingDay: today
startingDayOffset: '6'
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
entity: weather.home
locale: nz
showLegend: false
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.christina
color: '#ff6a6a'
- entity: calendar.rey
color: '#71c8fe'
- entity: calendar.house_maintenance
color: '#d3f37f'
- entity: calendar.new_zealand_holidays
color: '#f9da4e'
days: '1'
startingDay: today
startingDayOffset: '7'
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
entity: weather.home
locale: nz
showLegend: false
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.christina
color: '#ff6a6a'
- entity: calendar.rey
color: '#71c8fe'
- entity: calendar.house_maintenance
color: '#d3f37f'
- entity: calendar.new_zealand_holidays
color: '#f9da4e'
days: '1'
startingDay: today
startingDayOffset: '8'
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
entity: weather.home
locale: nz
showLegend: false
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.christina
color: '#ff6a6a'
- entity: calendar.rey
color: '#71c8fe'
- entity: calendar.house_maintenance
color: '#d3f37f'
- entity: calendar.new_zealand_holidays
color: '#f9da4e'
days: '1'
startingDay: today
startingDayOffset: '9'
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
entity: weather.home
locale: nz
showLegend: false
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.christina
color: '#ff6a6a'
- entity: calendar.rey
color: '#71c8fe'
- entity: calendar.house_maintenance
color: '#d3f37f'
- entity: calendar.new_zealand_holidays
color: '#f9da4e'
days: '1'
startingDay: today
startingDayOffset: '10'
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
entity: weather.home
locale: nz
showLegend: false
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.christina
color: '#ff6a6a'
- entity: calendar.rey
color: '#71c8fe'
- entity: calendar.house_maintenance
color: '#d3f37f'
- entity: calendar.new_zealand_holidays
color: '#f9da4e'
days: '1'
startingDay: today
startingDayOffset: '11'
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
entity: weather.home
locale: nz
showLegend: false
icon: mdi:calendar
cards: []
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
header:
layout: responsive
badges_position: top
badges_wrap: wrap
background:
opacity: 50
alignment: center
size: cover
repeat: repeat
attachment: fixed
image: null
subview: true
- type: sections
max_columns: 3
title: Scenes
path: scenes
subview: true
sections:
- type: grid
cards:
- type: custom:streamline-card
template: title_navigation_card
variables:
title: Scenes Preset
title_font_size: 20px
navigation_path: '#room-selector'
- type: custom:mushroom-title-card
subtitle: Refreshing
title: ''
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Blossom.webp
scene_value: blossom
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Crocus.webp
scene_value: crocus
- type: custom:mushroom-title-card
subtitle: Peaceful
title: ''
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Mountain breeze.webp
scene_value: mountain_breeze
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Lake mist.webp
scene_value: lake_mist
- type: custom:mushroom-title-card
subtitle: Cozy
title: ''
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Rolling hills.webp
scene_value: rolling_hills
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Dreamy dusk.webp
scene_value: dreamy_dusk
- type: custom:mushroom-title-card
subtitle: Dreamy
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Still waters.webp
scene_value: still_waters
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Adrift.webp
scene_value: adrift
- type: custom:mushroom-title-card
subtitle: Pure
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Amethyst Valley.webp
scene_value: amethyst_valley
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Hazy Days.webp
scene_value: hazy_days
- type: custom:mushroom-title-card
subtitle: Serenity
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Galaxy.webp
scene_value: galaxy
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Arctic aurora.webp
scene_value: arctic_aurora
- type: custom:mushroom-title-card
subtitle: Romantic
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Ruby romance.webp
scene_value: ruby_romance
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/City of love.webp
scene_value: city_of_love
- type: custom:mushroom-title-card
subtitle: Party
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Fairfax.webp
scene_value: fairfax
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Tokyo.webp
scene_value: tokyo
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Osaka.webp
scene_value: osaka
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Motown.webp
scene_value: motown
- type: custom:mushroom-title-card
subtitle: Luxurious
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Emerald flutter.webp
scene_value: emerald_flutter
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Memento.webp
scene_value: memento
- type: custom:mushroom-title-card
subtitle: Race Day
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Zandvoort.webp
scene_value: zandvoort
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Bahrain.webp
scene_value: bahrain
- type: custom:mushroom-title-card
subtitle: Holiday
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Under The Tree.webp
scene_value: under_the_tree
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Snow Sparkle.webp
scene_value: snow_sparkle
- type: grid
cards:
- type: custom:button-card
show_name: false
show_icon: false
tap_action:
action: none
styles:
card:
- background: none
- box-shadow: none
- padding: 64px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Precious.webp
scene_value: precious
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Narcissa.webp
scene_value: narcissa
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Sunday morning.webp
scene_value: sunday_morning
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Spring blossom.webp
scene_value: spring_blossom
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Savannah sunset.webp
scene_value: savannah_sunset
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Ruby glow.webp
scene_value: ruby_glow
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Blue lagoon.webp
scene_value: blue_lagoon
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Palm Beach.webp
scene_value: palm_beach
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Spring lake.webp
scene_value: spring_lake
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Midwinter.webp
scene_value: midwinter
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Moonlight.webp
scene_value: moonlight
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Nebula.webp
scene_value: nebula
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Sunset allure.webp
scene_value: sunset_allure
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Lovebirds.webp
scene_value: lovebirds
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Miami.webp
scene_value: mmiami
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Cancun.webp
scene_value: cancun
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Ibiza.webp
scene_value: ibiza
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Chinatown.webp
scene_value: chinatown
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Resplendent.webp
scene_value: resplendent
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Scarlet dream.webp
scene_value: scarlet_dream
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Silverstone.webp
scene_value: silverstone
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Sao Paulo.webp
scene_value: sao_paulo
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Silent Night.webp
scene_value: silent_night
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Rosy Sparkle.webp
scene_value: rosy_sparkle
- type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: false
show_icon: false
tap_action:
action: none
styles:
card:
- background: none
- box-shadow: none
- padding: 10px 145px
- width: 100%
- type: custom:streamline-card
template: spacer_card
variables:
padding: 245px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Golden pond.webp
scene_value: golden_pond
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Tropical twilight.webp
scene_value: tropical_twilight
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Majestic morning.webp
scene_value: majestic_morning
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Pensive.webp
scene_value: pensive
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Autumn gold.webp
scene_value: autumn_gold
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Misty ridge.webp
scene_value: misty_ridge
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Starlight.webp
scene_value: starlight
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Blood moon.webp
scene_value: blood_moon
- type: custom:streamline-card
template: spacer_card
variables:
padding: 28px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Smitten.webp
scene_value: smitten
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Promise.webp
scene_value: promise
- type: custom:streamline-card
template: spacer_card
variables:
padding: 387px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Color Burst.webp
scene_value: color_burst
- type: custom:streamline-card
template: scene_button_card
variables:
img_path: /local/hue/raw/Festive Fun.webp
scene_value: festive_fun
- type: grid
cards:
- 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-pop-up-container {
padding-bottom: 64px !important;
}
bg_color: var(--card-background-color)
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
- 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
- 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
- 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
- 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
- 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
icon: mdi:layers-outline
cards: []
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
header:
layout: responsive
badges_position: top
badges_wrap: wrap
background:
opacity: 33
alignment: center
size: cover
repeat: repeat
attachment: fixed
image: null
- type: sections
max_columns: 3
title: Irrigation
path: irrigation
icon: m3of:sprinkler
subview: true
sections:
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
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: Driveway
- subtitle: '{{ states(''sensor.driveway_water_tap_status'') }}'
- type: custom:streamline-card
template: irrigation_card
variables:
switch_entity: switch.driveway_water_tap
flow_sensor: sensor.driveway_water_tap_flow
timer_entity: timer.driveway_sprinkler_timer
zone: driveway
soil_moisture_sensor: sensor.average_driveway_soil_moisture
soil_temperature_sensor: sensor.average_driveway_soil_temperature
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.3s 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_card
variables:
title: Right Walkway
subtitle: '{{ states(''sensor.right_walkway_water_tap_status'') }}'
- type: custom:streamline-card
template: irrigation_card
variables:
switch_entity: switch.right_walkway_water_tap
flow_sensor: sensor.right_walkway_water_tap_flow
timer_entity: timer.right_walkway_sprinkler_timer
zone: right_walkway
- type: grid
cards:
- 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
- type: grid
cards: []
header:
layout: start
badges_position: top
badges_wrap: wrap
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:streamline-card
template: title_card
variables:
title: Irrigation
title_font_size: 25px
animation_delay: 0s
- type: custom:paper-buttons-row
styles:
justify-content: flex-start
flex-wrap: wrap
font-size: 0.9em
line-height: 1.2em
margin: 6px 0 20px 0
width: 100%
buttons:
- layout: name
entity: sensor.current_water_restriction
name: '{{ states(''sensor.current_water_restriction'') }}'
tap_action:
action: more-info
styles:
name:
color: var(--md-sys-color-primary)
font-weight: bold
button:
padding: 2px 8px
background-color: var(--md-sys-color-on-primary)
border-radius: 24px
flex-basis: 1
flex-shrink: 0
display: flex
animation: slideInLeft 0.3s ease-out 0.2s both
transition: all 0.3s ease
- layout: name
name: ·
styles:
button:
flex-basis: 1
flex-shrink: 0
animation: fadeIn 0.8s ease-out 0.3s both
name:
color: var(--primary-text-color)
tap_action:
action: none
- layout: name
entity: sensor.current_water_restriction_description
name: '{{ states(''sensor.current_water_restriction_description'') }}'
tap_action:
action: more-info
styles:
name:
color: var(--md-sys-color-primary)
font-weight: bold
button:
padding: 2px 8px
background-color: var(--md-sys-color-on-primary)
border-radius: 24px
flex-basis: 1
flex-shrink: 0
display: flex
animation: slideInLeft 0.3s ease-out 0.4s both
transition: all 0.3s ease
uix:
style: |
ha-card {
overflow: visible !important;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
cards: []
- type: sections
max_columns: 4
title: Garage
path: garage
icon: mdi:garage-variant
subview: true
sections:
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Lights
title_font_size: 20px
- type: vertical-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.light_switch_grg
icon: m3of:switch
background_color: rgba(238, 220, 130, 0.5)
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.light_switch_atc
icon: m3of:switch
background_color: rgba(238, 220, 130, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: switch.rear_light_switch_grg
icon: m3of:switch
background_color: rgba(238, 220, 130, 0.5)
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.3s 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_card
variables:
title: Camera
title_font_size: 20px
- type: custom:webrtc-camera
url: >-
ffmpeg:rtsp://username:password@192.168.1.248/h264Preview_01_main#video=copy#audio=opus
- type: grid
cards:
- 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: open_doors_card
variables:
title: Doors
door_1: binary_sensor.rear_door_sensor_grg_contact
door_2: binary_sensor.door_sensor_grg_contact
door_3: binary_sensor.door_sensor_atc_contact
- type: custom:streamline-card
template: open_windows_card
variables:
- title: Windows
- window_1: binary_sensor.left_rear_window_sensor_grg_contact
- window_2: binary_sensor.right_rear_window_sensor_grg_contact
- window_3: binary_sensor.left_outdoor_window_sensor_grg_contact
- window_4: binary_sensor.right_outdoor_window_sensor_grg_contact
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
header:
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:streamline-card
template: title_card
variables:
title: Garage
title_font_size: 25px
animation_delay: 0s
- type: custom:streamline-card
template: room_details_card
variables:
temperature_entity: sensor.garage_temperature
humidity_entity: sensor.garage_humidity
- type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
overflow: scroll
margin: 12px 0 12px -18px
padding-left: 18px
width: 100%
extra_styles: |
::-webkit-scrollbar {
display: none;
}
@keyframes fadeInUp {
from {
opacity: 1;
transform: translateY(3px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
buttons:
- entity: automation.room_presence_garage
state_icons:
'on': m3of:sensor-occupied
'off': m3o:sensors-krx-off
layout: icon_name
name: Presence Sensor
tap_action:
action: toggle
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
color: var(--white)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.4s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
- entity: binary_sensor.door_sensor_grg_contact
state_icons:
'on': mdi:garage-open-variant
'off': mdi:garage-variant
layout: icon_name
name: Garage Door
tap_action:
action: call-service
service: script.garage_button_frontend
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
color: var(--white)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.6s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
layout: start
badges_position: top
badges_wrap: wrap
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
- type: sections
max_columns: 4
title: Living Area
path: living-area
icon: mdi:sofa
subview: true
sections:
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: input_boolean.other_lights_la
state: 'off'
- condition: state
entity: input_boolean.kitchen_la
state: 'off'
- condition: state
entity: input_boolean.media_la
state: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Lights
title_font_size: 20px
- type: custom:streamline-card
template: room_nav_boolean_chip_card
variables:
button_one_icon: m3of:lightbulb
button_two_icon: mdi:countertop
button_three_icon: m3of:tv
button_one: input_boolean.other_lights_la
button_two: input_boolean.kitchen_la
button_three: input_boolean.media_la
alignment: end
margin-top: 1.6em
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_ktc
name: null
icon: null
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_dt
name: null
icon: null
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.kitchen_cabinet_led
icon: hue:lightstrip
background_color: rgba(238, 220, 130, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: switch.table_top_light
icon: mdi:countertop
background_color: rgba(238, 220, 130, 0.5)
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.table_top_led
icon: hue:lightstrip
background_color: rgba(238, 220, 130, 0.5)
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_sofa
name: null
icon: null
- type: conditional
conditions:
- condition: state
entity: input_boolean.other_lights_la
state: 'on'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Other Lights
- type: custom:streamline-card
template: room_nav_boolean_chip_card
variables:
button_one_icon: m3of:lightbulb
button_two_icon: mdi:countertop
button_three_icon: m3of:tv
button_one: input_boolean.other_lights_la
button_two: input_boolean.kitchen_la
button_three: input_boolean.media_la
alignment: end
margin-top: 1.6em
- type: custom:streamline-card
template: light_card
variables:
entity: light.light_scr
name: null
icon: null
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.patio_main_switch_la
icon: mdi:outdoor-lamp
background_color: rgba(238, 220, 130, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: switch.patio_side_switch_la
icon: mdi:outdoor-lamp
background_color: rgba(238, 220, 130, 0.5)
- type: conditional
conditions:
- condition: state
entity: input_boolean.kitchen_la
state: 'on'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Rangehood
- type: custom:streamline-card
template: room_nav_boolean_chip_card
variables:
button_one_icon: m3of:lightbulb
button_two_icon: mdi:countertop
button_three_icon: m3of:tv
button_one: input_boolean.other_lights_la
button_two: input_boolean.kitchen_la
button_three: input_boolean.media_la
alignment: end
margin-top: 1.6em
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: select_card
variables:
entity: select.kitchen_rangehood_light_level
name: Light Level
icon: m3of:lightbulb
- type: custom:streamline-card
template: select_card
variables:
entity: select.kitchen_rangehood_fan_speed
name: Fan Speed
icon: mdi:fan
- type: custom:streamline-card
template: title_card
variables:
title: Switches
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.nest_hub_switch_ktc
icon: mdi:google
background_color: rgba(207, 159, 255, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: switch.other_switch_ktc
icon: m3of:plug-connect
background_color: rgba(207, 159, 255, 0.5)
- type: conditional
conditions:
- condition: state
entity: input_boolean.media_la
state: 'on'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Media
- type: custom:streamline-card
template: room_nav_boolean_chip_card
variables:
button_one_icon: m3of:lightbulb
button_two_icon: mdi:countertop
button_three_icon: m3of:tv
button_one: input_boolean.other_lights_la
button_two: input_boolean.kitchen_la
button_three: input_boolean.media_la
alignment: end
margin-top: 1.6em
- type: custom:streamline-card
template: media_player_card
variables:
entity: media_player.living_room_tv
name: Living Room TV
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.3s 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_card
variables:
title: Control
title_font_size: 20px
- type: custom:material-climate-card
entity: climate.living_room
increase_temp: 1
decrease_temp: 1
use_material_color: true
use_default_icon: true
fix_temperature: auto
name: ' '
- type: custom:mushroom-template-card
primary: Living Area Humidity
secondary: >-
{% set hum = states('sensor.living_area_humidity') |
float(0) %} {{ hum }}% - {% if hum < 31 %}Dry {% elif hum <
51 %}Good {% else %}Humid {% endif %}
icon: mdi:water-percent
entity: sensor.living_area_humidity
tap_action:
action: more-info
color: >-
{% set hum = states('sensor.living_area_humidity') |
float(0) %} {% if hum < 31 %}#99332d {% elif hum < 51
%}#228B22 {% else %}#99332d {% endif %}
- type: grid
cards:
- 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: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: group.windows_la
state: 'on'
- condition: state
entity: group.doors_la
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: open_doors_card
variables:
title: Doors
door_1: binary_sensor.main_sliding_door_sensor_la_contact
door_2: binary_sensor.side_sliding_door_sensor_la_contact
- type: custom:streamline-card
template: open_windows_card
variables:
- title: Windows
- window_1: binary_sensor.left_tv_window_sensor_la_contact
- window_2: binary_sensor.right_tv_window_sensor_la_contact
- window_3: binary_sensor.left_sofa_window_sensor_la_contact
- window_4: binary_sensor.right_sofa_window_sensor_la_contact
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: group.windows_la
state: 'off'
- condition: state
entity: group.doors_la
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Room Illustration
title_font_size: 20px
- type: picture
image:
media_content_id: /local/room_pictures/Living Area.webp
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
header:
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Living Area
title_font_size: 25px
animation_delay: 0s
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:streamline-card
template: room_details_card
variables:
temperature_entity: sensor.living_room_temperature
humidity_entity: sensor.living_area_humidity
- type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
overflow: scroll
margin: 12px 0 12px -18px
padding-left: 18px
width: 100%
extra_styles: |
::-webkit-scrollbar {
display: none;
}
@keyframes fadeInUp {
from {
opacity: 1;
transform: translateY(3px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
buttons:
- entity: binary_sensor.presence_active_la
state_icons:
'on': m3of:sensor-occupied
'off': m3o:sensors-krx-off
layout: icon_name
name: Presence Sensor
tap_action:
action: call-service
service: script.toggle_presence_sensor_la
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
color: var(--white)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.4s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
- entity: input_boolean.movie_mode
state_icons:
'on': mdi:movie-open
'off': mdi:movie-off-outline
layout: icon_name
name: Movie Mode
tap_action:
action: toggle
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
color: var(--white)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.6s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
layout: start
badges_position: top
badges_wrap: wrap
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
- type: sections
max_columns: 4
title: Master Bedroom
path: master-bedroom
icon: m3of:bed
subview: true
sections:
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: input_boolean.other_lights_mbr
state: 'off'
- condition: state
entity: input_boolean.master_bathroom
state: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Lights
title_font_size: 20px
- type: custom:streamline-card
template: room_nav_boolean_chip_card
variables:
button_one_icon: m3of:lightbulb
button_two_icon: mdi:toilet
button_one: input_boolean.other_lights_mbr
button_two: input_boolean.master_bathroom
alignment: end
margin-top: 1.6em
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_mbr
name: null
icon: null
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.left_bedside_light_switch_mbr
icon: m3of:face-2
background_color: rgba(238, 220, 130, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: switch.right_bedside_light_switch_mbr
icon: m3of:face
background_color: rgba(238, 220, 130, 0.5)
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: light_card
variables:
entity: light.makeup_table_led_mbr
name: null
icon: mdi:led-strip-variant
- type: custom:streamline-card
template: light_card
variables:
entity: light.rear_makeup_table_led_mbr
name: null
icon: mdi:led-strip-variant
- type: custom:streamline-card
template: title_card
variables:
title: Curtains
title_font_size: 20px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: curtain_slider_card
variables:
entity_id: cover.left_blackout_curtain_mbr
label: Left Curtain
icon: mdi:curtains
- type: custom:streamline-card
template: curtain_slider_card
variables:
- entity_id: cover.right_blackout_curtain_mbr
- label: Right Curtain
- icon: mdi:curtains
- type: custom:expander-card
title: Expander Card
cards:
- type: vertical-stack
cards:
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.other_left_switch_mbr
icon: m3of:plug-connect
background_color: rgba(207, 159, 255, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: switch.baby_monitor_switch_mbr
icon: mdi:monitor-cellphone
background_color: rgba(207, 159, 255, 0.5)
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.other_right_switch_mbr
icon: m3of:plug-connect
background_color: rgba(207, 159, 255, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: switch.rey_s_watch_charger_mbr
icon: m3of:plug-connect
background_color: rgba(207, 159, 255, 0.5)
title-card:
type: custom:streamline-card
template: title_card
variables:
title: Switches
title_font_size: 20px
title-card-clickable: true
title-card-button-overlay: false
padding: '1'
- type: conditional
conditions:
- condition: state
entity: input_boolean.other_lights_mbr
state: 'on'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Other Lights
title_font_size: 20px
- type: custom:streamline-card
template: room_nav_boolean_chip_card
variables:
button_one_icon: m3of:lightbulb
button_two_icon: mdi:toilet
button_one: input_boolean.other_lights_mbr
button_two: input_boolean.master_bathroom
alignment: end
margin-top: 1.6em
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_wr
name: null
icon: m3of:lightbulb
- type: custom:streamline-card
template: button_card
variables:
entity: switch.patio_main_switch_la
icon: mdi:outdoor-lamp
background_color: rgba(238, 220, 130, 0.5)
- type: custom:streamline-card
template: light_card
variables:
entity: light.floor_led_wr
name: null
icon: mdi:led-strip-variant
- type: conditional
conditions:
- condition: state
entity: input_boolean.master_bathroom
state: 'on'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Lights
title_font_size: 20px
- type: custom:streamline-card
template: room_nav_boolean_chip_card
variables:
button_one_icon: m3of:lightbulb
button_two_icon: mdi:toilet
button_one: input_boolean.other_lights_mbr
button_two: input_boolean.master_bathroom
alignment: end
margin-top: 1.6em
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_mbrt
name: null
icon: m3of:lightbulb
- type: custom:streamline-card
template: button_card
variables:
entity: switch.master_bathroom_mirror_light
icon: mdi:lightbulb-fluorescent-tube
background_color: rgba(238, 220, 130, 0.5)
- type: custom:streamline-card
template: light_card
variables:
entity: light.vanity_led_mbrt
name: null
icon: mdi:led-strip-variant
- type: custom:streamline-card
template: title_card
variables:
title: Switches
title_font_size: 20px
- type: custom:streamline-card
template: button_card
variables:
entity: switch.towel_switch_mbr
icon: mdi:heating-coil
background_color: rgba(210, 43, 43, 0.5)
- type: custom:streamline-card
template: title_card
variables:
title: Fan
title_font_size: 20px
- type: custom:streamline-card
template: button_card
variables:
entity: fan.master_bathroom_fan
icon: mdi:fan-off
background_color: rgba(137, 207, 240, 0.5)
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.3s 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_card
variables:
- title: Climate Control
- title_font_size: 20px
- type: custom:material-climate-card
entity: climate.master_bedroom
increase_temp: 1
decrease_temp: 1
use_material_color: true
use_default_icon: true
fix_temperature: auto
name: ' '
- type: custom:mushroom-template-card
primary: Master Bedroom Humidity
secondary: >-
{% set hum = states('sensor.master_bedroom_humidity') |
float(0) %} {{ hum }}% - {% if hum < 31 %}Dry {% elif hum <
51 %}Good {% else %}Humid {% endif %}
icon: mdi:water-percent
entity: sensor.master_bedroom_humidity
tap_action:
action: more-info
color: >-
{% set hum = states('sensor.master_bedroom_humidity') |
float(0) %} {% if hum < 31 %}#99332d {% elif hum < 51
%}#228B22 {% else %}#99332d {% endif %}
- type: grid
cards:
- 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: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: group.windows_mbr
state: 'on'
- condition: state
entity: group.doors_mbr
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: open_doors_card
variables:
title: Doors
door_1: binary_sensor.sliding_door_sensor_mbr_contact
door_2: binary_sensor.door_sensor_mbr_contact
- type: custom:streamline-card
template: open_windows_card
variables:
title: Windows
window_1: binary_sensor.left_window_sensor_mbr_contact
window_2: binary_sensor.right_window_sensor_mbr_contact
window_3: binary_sensor.window_sensor_mbrt_contact
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: group.windows_mbr
state: 'off'
- condition: state
entity: group.doors_mbr
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Room Illustration
title_font_size: 20px
- type: picture
image:
media_content_id: /local/room_pictures/Master Bedroom.webp
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
header:
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Master Bedroom
title_font_size: 25px
animation_delay: 0s
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:streamline-card
template: room_details_card
variables:
temperature_entity: sensor.master_bedroom_temperature
humidity_entity: sensor.master_bedroom_humidity
- type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
overflow: scroll
margin: 12px 0 12px -18px
padding-left: 18px
width: 100%
extra_styles: |
::-webkit-scrollbar {
display: none;
}
@keyframes fadeInUp {
from {
opacity: 1;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
buttons:
- entity: automation.room_presence_master_bedroom
state_icons:
'on': m3of:sensor-occupied
'off': m3o:sensors-krx-off
layout: icon_name
name: Presence Sensor
tap_action:
action: toggle
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.4s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
- entity: group.curtains_mbr
state_icons:
open: m3of:curtains
closed: m3of:curtains-closed
layout: icon_name
name: '{{ states (''sensor.mbr_curtain_action'') }}'
tap_action:
action: call-service
service: script.toggle_curtain_mbr
styles:
name:
color: var(--primary-text-color)
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
animation: fadeInUp 0.5s ease-out 0.6s both
icon:
'--mdc-icon-size': 26px
color: var(--primary-text-color)
layout: start
badges_position: top
badges_wrap: wrap
- type: sections
max_columns: 4
title: Baby Room
path: baby-room
icon: mdi:baby-carriage
subview: true
sections:
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Lights
title_font_size: 20px
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_br
name: Room Lights
icon: m3of:lightbulb
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: light_card
variables:
entity: light.ava_bed_led
name: Ava Bed LED
icon: mdi:led-strip-variant
- type: custom:streamline-card
template: light_card
variables:
entity: light.iyla_bed_led
name: Iyla Bed LED
icon: mdi:led-strip-variant
- type: custom:expander-card
title: Expander Card
cards:
- type: vertical-stack
cards:
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.baby_camera_switch_br
icon: m3of:camera-video
background_color: rgba(207, 159, 255, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: switch.other_switch_br
icon: m3of:plug-connect
background_color: rgba(207, 159, 255, 0.5)
title-card:
type: custom:streamline-card
template: title_card
variables:
title: Switches
title_font_size: 20px
title-card-clickable: true
title-card-button-overlay: false
padding: '1'
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.3s 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_card
variables:
- title: Climate Control
- title_font_size: 20px
- type: custom:material-climate-card
entity: climate.baby_room
increase_temp: 1
decrease_temp: 1
use_material_color: true
use_default_icon: true
fix_temperature: auto
name: ' '
- type: custom:mushroom-template-card
primary: Baby Room Humidity
secondary: >-
{% set hum = states('sensor.baby_room_humidity') | float(0)
%} {{ hum }}% - {% if hum < 31 %}Dry {% elif hum < 51 %}Good
{% else %}Humid {% endif %}
icon: mdi:water-percent
entity: sensor.baby_room_humidity
tap_action:
action: more-info
color: >-
{% set hum = states('sensor.baby_room_humidity') | float(0)
%} {% if hum < 31 %}#99332d {% elif hum < 51 %}#228B22 {%
else %}#99332d {% endif %}
- type: grid
cards:
- 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: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: group.windows_br
state: 'on'
- condition: state
entity: binary_sensor.door_sensor_br_contact
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: open_doors_card
variables:
- title: Door
- door_1: binary_sensor.door_sensor_br_contact
- type: custom:streamline-card
template: open_windows_card
variables:
- title: Windows
- window_1: binary_sensor.left_window_sensor_br_contact
- window_2: binary_sensor.right_window_sensor_br_contact
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: group.windows_br
state: 'off'
- condition: state
entity: binary_sensor.door_sensor_br_contact
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Room Illustration
title_font_size: 20px
- type: picture
image:
media_content_id: /local/room_pictures/Baby Room.webp
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
header:
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Baby Room
title_font_size: 25px
animation_delay: 0s
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:streamline-card
template: room_details_card
variables:
temperature_entity: sensor.baby_room_temperature
humidity_entity: sensor.baby_room_humidity
- type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
overflow: scroll
margin: 12px 0 12px -18px
padding-left: 18px
width: 100%
extra_styles: |
::-webkit-scrollbar {
display: none;
}
@keyframes fadeInUp {
from {
opacity: 1;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
buttons:
- entity: automation.room_presence_baby_room
state_icons:
'on': m3of:sensor-occupied
'off': m3o:sensors-krx-off
layout: icon_name
name: Presence Sensor
tap_action:
action: toggle
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
color: var(--white)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.4s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
layout: start
badges_position: top
badges_wrap: wrap
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
- type: sections
max_columns: 4
title: Single Guest Room
path: single-guest-room
icon: m3of:person-3
subview: true
sections:
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Lights
title_font_size: 20px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_sgr
name: Room Lights
icon: m3of:lightbulb
- type: custom:streamline-card
template: light_card
variables:
entity: light.bed_led_sgr
name: Bed LED
icon: mdi:led-strip-variant
- type: custom:expander-card
title: Expander Card
cards:
- type: vertical-stack
cards:
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.phone_charger_switch_sgr
icon: mdi:cellphone
background_color: rgba(207, 159, 255, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: switch.other_switch_sgr
icon: m3of:plug-connect
background_color: rgba(207, 159, 255, 0.5)
title-card:
type: custom:streamline-card
template: title_card
variables:
title: Switches
title_font_size: 20px
title-card-clickable: true
title-card-button-overlay: false
padding: '1'
animation: true
expanded: true
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.3s 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_card
variables:
- title: Climate Control
- title_font_size: 20px
- type: custom:material-climate-card
entity: climate.single_guest_room
increase_temp: 1
decrease_temp: 1
use_material_color: true
use_default_icon: true
fix_temperature: auto
name: ' '
- type: custom:mushroom-template-card
primary: Single Guest Room Humidity
secondary: >-
{% set hum = states('sensor.single_guest_room_humidity') |
float(0) %} {{ hum }}% - {% if hum < 31 %}Dry {% elif hum <
51 %}Good {% else %}Humid {% endif %}
icon: mdi:water-percent
entity: sensor.single_guest_room_humidity
tap_action:
action: more-info
color: >-
{% set hum = states('sensor.single_guest_room_humidity') |
float(0) %} {% if hum < 31 %}#99332d {% elif hum < 51
%}#228B22 {% else %}#99332d {% endif %}
- type: grid
cards:
- 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: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: group.windows_sgr
state: 'on'
- condition: state
entity: group.door_sensor_sgr_contact
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: open_doors_card
variables:
- title: Door
- door_1: binary_sensor.door_sensor_sgr_contact
- type: custom:streamline-card
template: open_windows_card
variables:
- title: Windows
- window_1: binary_sensor.left_window_sensor_sgr_contact
- window_2: binary_sensor.right_window_sensor_sgr_contact
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: group.windows_sgr
state: 'off'
- condition: state
entity: group.door_sensor_sgr_contact
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Room Illustration
title_font_size: 20px
- type: picture
image:
media_content_id: /local/room_pictures/Bedroom.webp
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
header:
layout: start
badges_position: top
badges_wrap: wrap
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Single Guest Room
title_font_size: 25px
animation_delay: 0s
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:streamline-card
template: room_details_card
variables:
temperature_entity: sensor.single_guest_room_temperature
humidity_entity: sensor.single_guest_room_humidity
- type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
overflow: scroll
margin: 12px 0 12px -18px
padding-left: 18px
width: 100%
extra_styles: |
::-webkit-scrollbar {
display: none;
}
@keyframes fadeInUp {
from {
opacity: 1;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
buttons:
- entity: automation.room_presence_single_guest_room
state_icons:
'on': m3of:sensor-occupied
'off': m3o:sensors-krx-off
layout: icon_name
name: Presence Sensor
tap_action:
action: toggle
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
color: var(--white)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.4s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
- type: sections
max_columns: 4
title: Multiple Guest Room
path: multiple-guest-room
icon: m3of:groups-2
subview: true
sections:
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Lights
title_font_size: 20px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_mgr
name: Room Lights
icon: m3of:lightbulb
- type: custom:streamline-card
template: light_card
variables:
entity: light.bed_led_mgr
name: Bed LED
icon: mdi:led-strip-variant
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.3s 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_card
variables:
- title: Climate Control
- title_font_size: 20px
- type: custom:material-climate-card
entity: climate.multiple_guest_room
increase_temp: 1
decrease_temp: 1
use_material_color: true
use_default_icon: true
fix_temperature: auto
name: ' '
- type: custom:mushroom-template-card
primary: Multiple Guest Room Humidity
secondary: >-
{% set hum = states('sensor.multiple_guest_room_humidity') |
float(0) %} {{ hum }}% - {% if hum < 31 %}Dry {% elif hum <
51 %}Good {% else %}Humid {% endif %}
icon: mdi:water-percent
entity: sensor.multiple_guest_room_humidity
tap_action:
action: more-info
color: >-
{% set hum = states('sensor.multiple_guest_room_humidity') |
float(0) %} {% if hum < 31 %}#99332d {% elif hum < 51
%}#228B22 {% else %}#99332d {% endif %}
- type: grid
cards:
- 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: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: group.windows_mgr
state: 'on'
- condition: state
entity: group.door_sensor_mgr_contact
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: open_doors_card
variables:
- title: Door
- door_1: binary_sensor.door_sensor_mgr_contact
- type: custom:streamline-card
template: open_windows_card
variables:
- title: Windows
- window_1: binary_sensor.left_window_sensor_mgr_contact
- window_2: binary_sensor.right_window_sensor_mgr_contact
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: group.windows_mgr
state: 'off'
- condition: state
entity: group.door_sensor_mgr_contact
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Room Illustration
title_font_size: 20px
- type: picture
image:
media_content_id: /local/room_pictures/Bedroom.webp
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
header:
layout: start
badges_position: top
badges_wrap: wrap
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Multiple Guest Room
title_font_size: 25px
animation_delay: 0s
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:streamline-card
template: room_details_card
variables:
temperature_entity: sensor.multiple_guest_room_temperature
humidity_entity: sensor.multiple_guest_room_humidity
- type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
overflow: scroll
margin: 12px 0 12px -18px
padding-left: 18px
width: 100%
extra_styles: |
::-webkit-scrollbar {
display: none;
}
@keyframes fadeInUp {
from {
opacity: 1;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
buttons:
- entity: automation.room_presence_multiple_guest_room
state_icons:
'on': m3of:sensor-occupied
'off': m3o:sensors-krx-off
layout: icon_name
name: Presence Sensor
tap_action:
action: toggle
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
color: var(--white)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.4s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
- type: sections
max_columns: 4
title: Entrance
path: entrance
icon: mdi:table-furniture
subview: true
sections:
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Lights
title_font_size: 20px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_etr
name: Room Lights
icon: m3of:lightbulb
- type: custom:streamline-card
template: light_card
variables:
entity: light.entrance_table_led
name: Table LED
icon: mdi:led-strip-variant
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.3s 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_card
variables:
title: Camera
title_font_size: 20px
- type: custom:webrtc-camera
url: >-
ffmpeg:rtsp://username:password@192.168.1.222/h265Preview_01_main#video=copy#audio=opus
- type: grid
cards:
- 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: conditional
conditions:
- condition: state
entity: binary_sensor.door_sensor_etr_contact
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: open_doors_card
variables:
- title: Door
- door_1: binary_sensor.door_sensor_etr_contact
- type: conditional
conditions:
- condition: state
entity: binary_sensor.door_sensor_etr_contact
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Room Illustration
title_font_size: 20px
- type: picture
image:
media_content_id: /local/room_pictures/Entrance.webp
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
header:
layout: start
badges_position: top
badges_wrap: wrap
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Entrance
title_font_size: 25px
animation_delay: 0s
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:streamline-card
template: room_details_card
variables:
temperature_entity: sensor.living_room_temperature
humidity_entity: sensor.living_area_humidity
- type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
overflow: scroll
margin: 12px 0 12px -18px
padding-left: 18px
width: 100%
extra_styles: |
::-webkit-scrollbar {
display: none;
}
@keyframes fadeInUp {
from {
opacity: 1;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
buttons:
- entity: automation.room_presence_entrance
state_icons:
'on': m3of:sensor-occupied
'off': m3o:sensors-krx-off
layout: icon_name
name: Presence Sensor
tap_action:
action: toggle
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
color: var(--white)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.4s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
- type: sections
max_columns: 4
title: Office
path: Office
icon: m3of:computer
subview: true
sections:
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Lights
title_font_size: 20px
- type: custom:streamline-card
template: button_card
variables:
entity: switch.light_switch_or
icon: m3of:switch
- type: custom:expander-card
title: Expander Card
cards:
- type: vertical-stack
cards:
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.mackbook_switch_or
icon: m3o:computer
background_color: rgba(207, 159, 255, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: switch.pc_dock_switch_or
icon: mdi:desktop-tower-monitor
background_color: rgba(207, 159, 255, 0.5)
title-card:
type: custom:streamline-card
template: title_card
variables:
title: Switches
title_font_size: 20px
title-card-clickable: true
title-card-button-overlay: false
padding: '1'
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.3s 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_card
variables:
- title: Climate Control
- title_font_size: 20px
- type: custom:material-climate-card
entity: climate.office_room
increase_temp: 1
decrease_temp: 1
use_material_color: true
use_default_icon: true
fix_temperature: auto
name: ' '
- type: custom:mushroom-template-card
primary: Office Room Humidity
secondary: >-
{% set hum = states('sensor.office_room_humidity') |
float(0) %} {{ hum }}% - {% if hum < 31 %}Dry {% elif hum <
51 %}Good {% else %}Humid {% endif %}
icon: mdi:water-percent
entity: sensor.office_room_humidity
tap_action:
action: more-info
color: >-
{% set hum = states('sensor.office_room_humidity') |
float(0) %} {% if hum < 31 %}#99332d {% elif hum < 51
%}#228B22 {% else %}#99332d {% endif %}
- type: grid
cards:
- 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: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: group.windows_mgr
state: 'on'
- condition: state
entity: group.door_sensor_mgr_contact
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: open_doors_card
variables:
- title: Door
- door_1: binary_sensor.door_sensor_or_contact
- type: custom:streamline-card
template: open_windows_card
variables:
- title: Windows
- window_1: binary_sensor.left_window_sensor_or_contact
- window_2: binary_sensor.right_window_sensor_or_contact
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: group.windows_mgr
state: 'off'
- condition: state
entity: group.door_sensor_mgr_contact
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Room Illustration
title_font_size: 20px
- type: picture
image:
media_content_id: /local/room_pictures/Office.webp
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
header:
layout: start
badges_position: top
badges_wrap: wrap
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title_font_size: 25px
animation_delay: 0s
title: Office
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:streamline-card
template: room_details_card
variables:
temperature_entity: sensor.office_room_temperature
humidity_entity: sensor.office_room_humidity
- type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
overflow: scroll
margin: 12px 0 12px -18px
padding-left: 18px
width: 100%
extra_styles: |
::-webkit-scrollbar {
display: none;
}
@keyframes fadeInUp {
from {
opacity: 1;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
buttons:
- entity: automation.room_presence_office
state_icons:
'on': m3of:sensor-occupied
'off': m3o:sensors-krx-off
layout: icon_name
name: Presence Sensor
tap_action:
action: toggle
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
color: var(--white)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.4s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
- type: sections
max_columns: 4
title: Guest Bathroom
path: guest-bathroom
icon: m3of:water-drop
subview: true
sections:
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Lights
title_font_size: 20px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_gbrv
name: null
icon: null
- type: custom:streamline-card
template: button_card
variables:
entity: switch.guest_bathroom_mirror_light
icon: mdi:lightbulb-fluorescent-tube
- type: custom:streamline-card
template: light_card
variables:
entity: light.vanity_led_gbrv
name: Vanity LED
icon: mdi:led-strip-variant
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: light_card
variables:
entity: light.light_gbrt
icon: null
name: Toilet Light
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_gbrb
icon: null
name: Bathing Lights
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.3s 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_card
variables:
title: Fan
title_font_size: 20px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: fan.guest_bathroom_vanity_fan
icon: mdi:fan
background_color: rgba(137, 207, 240, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: fan.guest_bathroom_fan
icon: mdi:fan
background_color: rgba(137, 207, 240, 0.5)
- type: custom:expander-card
title: Expander Card
cards:
- type: vertical-stack
cards:
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: button_card
variables:
entity: switch.network_switch_gbrv
icon: mdi:access-point-network
background_color: rgba(207, 159, 255, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: switch.other_switch_gbrv
icon: m3of:plug-connect
background_color: rgba(207, 159, 255, 0.5)
- type: custom:streamline-card
template: button_card
variables:
entity: switch.towel_switch_gbr
icon: mdi:heating-coil
background_color: rgba(210, 43, 43, 0.5)
title-card:
type: custom:streamline-card
template: title_card
variables:
title: Switches
title_font_size: 20px
title-card-clickable: true
title-card-button-overlay: false
padding: '1'
animation: true
expanded: false
- type: grid
cards:
- 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: conditional
conditions:
- condition: state
entity: group.windows_gbr
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: open_windows_card
variables:
title: Windows
window_1: binary_sensor.top_window_sensor_gbrt_contact
window_2: binary_sensor.bottom_window_sensor_gbrt_contact
window_3: binary_sensor.window_sensor_gbrb_contact
- type: conditional
conditions:
- condition: state
entity: group.windows_gbr
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Room Illustration
title_font_size: 20px
- type: picture
image:
media_content_id: /local/room_pictures/Guest Bathroom.webp
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
header:
layout: start
badges_position: top
badges_wrap: wrap
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title_font_size: 25px
animation_delay: 0s
title: Guest Bathroom
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:streamline-card
template: room_details_card
variables:
temperature_entity: sensor.guest_bathroom_temperature
humidity_entity: sensor.guest_bathroom_humidity
- type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
overflow: scroll
margin: 12px 0 12px -18px
padding-left: 18px
width: 100%
extra_styles: |
::-webkit-scrollbar {
display: none;
}
@keyframes fadeInUp {
from {
opacity: 1;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
buttons:
- entity: binary_sensor.presence_active_gbr
state_icons:
'on': m3of:sensor-occupied
'off': m3o:sensors-krx-off
layout: icon_name
name: Presence Sensor
tap_action:
action: call-service
service: script.toggle_presence_sensor_gbr
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
color: var(--white)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.4s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
- type: sections
max_columns: 4
title: Driveway
path: driveway
icon: mdi:car
subview: true
sections:
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes slideInLeft {
from {
opacity: 1;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Lights
title_font_size: 20px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_wall
name: null
icon: null
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_outdoor_grg
name: null
icon: null
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_ceiling
name: null
icon: null
- type: grid
cards:
- type: custom:mod-card
uix:
style: |
ha-card {
--title-font-size: 15px !important;
animation: fadeInDown 0.5s ease-out 0.3s 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_card
variables:
title: Camera
title_font_size: 20px
- type: custom:webrtc-camera
url: >-
ffmpeg:rtsp://username:password@192.168.1.150/h265Preview_01_main#video=copy#audio=opus
- type: grid
cards:
- 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_card
variables:
title: Camera
title_font_size: 20px
- type: custom:webrtc-camera
url: >-
ffmpeg:rtsp://username:password@192.168.1.245/h265Preview_01_main#video=copy#audio=opus
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
header:
layout: start
badges_position: top
badges_wrap: wrap
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title_font_size: 25px
animation_delay: 0s
title: Driveway
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:streamline-card
template: room_details_card
variables:
temperature_entity: sensor.outdoor_temperature
humidity_entity: sensor.outdoor_humidity
- type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
overflow: scroll
margin: 12px 0 12px -18px
padding-left: 18px
width: 100%
extra_styles: |
::-webkit-scrollbar {
display: none;
}
@keyframes fadeInUp {
from {
opacity: 1;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
buttons:
- entity: automation.outdoor_presence_driveway
state_icons:
'on': m3of:sensor-occupied
'off': m3o:sensors-krx-off
layout: icon_name
name: Presence Sensor
tap_action:
action: toggle
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
color: var(--white)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.4s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
- type: sections
max_columns: 4
title: Laundry
path: laundry
icon: m3of:laundry
subview: true
sections:
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Lights
title_font_size: 20px
- type: horizontal-stack
cards:
- type: custom:streamline-card
template: light_card
variables:
entity: light.lights_lr
name: Room Lights
icon: null
- type: custom:streamline-card
template: light_card
variables:
entity: light.vanity_led_lr
name: Vanity LED
icon: hue:lightstrip
- type: custom:streamline-card
template: button_card
variables:
entity: switch.outdoor_light_switch_lr
icon: null
background_color: rgba(238, 220, 130, 0.5)
- type: custom:streamline-card
template: title_card
variables:
title: Fan
- type: custom:streamline-card
template: button_card
variables:
entity: fan.laundry_room_fan
icon: mdi:fan
background_color: rgba(137, 207, 240, 0.5)
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Camera
title_font_size: 20px
- type: custom:webrtc-camera
entity: camera.left_walkway_camera_fluent
- type: grid
cards:
- 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: conditional
conditions:
- condition: state
entity: binary_sensor.outdoor_door_sensor_lr_contact
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: open_doors_card
variables:
- title: Door
- door_1: binary_sensor.outdoor_door_sensor_lr_contact
- type: conditional
conditions:
- condition: state
entity: binary_sensor.outdoor_door_sensor_lr_contact
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title: Room Illustration
title_font_size: 20px
- type: picture
image:
media_content_id: /local/room_pictures/Laundry Room.webp
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
header:
card:
type: vertical-stack
cards:
- type: custom:streamline-card
template: title_card
variables:
title_font_size: 25px
animation_delay: 0s
title: Laundry
- type: custom:streamline-card
template: spacer_card
variables:
padding: 4px
- type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
overflow: scroll
margin: 12px 0 12px -18px
padding-left: 18px
width: 100%
extra_styles: |
::-webkit-scrollbar {
display: none;
}
@keyframes fadeInUp {
from {
opacity: 1;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
buttons:
- entity: automation.outdoor_presence_driveway
state_icons:
'on': m3of:sensor-occupied
'off': m3o:sensors-krx-off
layout: icon_name
name: Presence Sensor
tap_action:
action: toggle
styles:
name:
color: '#a8a8a8'
transition: color 0.3s ease, transform 0.3s ease
button:
padding: 12px
width: 76px
height: 76px
flex-basis: 1
flex-shrink: 0
display: flex
background-color: none
border-radius: 24px
color: var(--white)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
animation: fadeInUp 0.5s ease-out 0.4s both
icon:
'--mdc-icon-size': 26px
color: '#a8a8a8'
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
state_styles:
'on':
icon:
color: var(--primary-text-color)
name:
color: var(--primary-text-color)
layout: start
badges_position: top
badges_wrap: wrap
- type: custom:grid-layout
title: Driveway Camera
path: driveway-camera
subview: true
cards:
- type: custom:webrtc-camera
url: >-
ffmpeg:rtsp://username:password@192.168.1.150/h265Preview_01_main#video=copy#audio=opus
style: |
ha-card {
height: 755px;
width: 1370px;
}
video {
object-fit: fill !important;
height: 100% !important;
width: 100% !important;
}
view_layout:
grid-area: content1
- type: custom:mushroom-template-card
primary: |
{% if is_state('binary_sensor.door_sensor_grg_contact', 'on') %}
Close Garage
{% else %}
Open Garage
{% endif %}
secondary: |
{% if is_state('binary_sensor.door_sensor_grg_contact', 'on') %}
Click to close the garage door
{% else %}
Click to open the garage door
{% endif %}
icon: |
{% if is_state('binary_sensor.door_sensor_grg_contact', 'on') %}
mdi:garage-open-variant
{% else %}
mdi:garage-variant
{% endif %}
icon_color: |
{% if is_state('binary_sensor.door_sensor_grg_contact', 'on') %}
#FF3131
{% else %}
none
{% endif %}
features_position: bottom
multiline_secondary: true
vertical: true
entity: switch.garage_opener
tap_action:
action: toggle
uix:
style: |
:host {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
width: auto;
}
view_layout:
grid-area: content1
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: navigate
navigation_path: /tablet-dashboard/overview
icon: m3of:arrow-left-alt
uix:
style:
.: |
ha-card {
margin-top: 25px; /* move down */
--color: var(--md-sys-color-primary);
--chip-background: var(--md-sys-color-on-primary);
animation: fadeInDown 0.4s ease-out 0.6s both;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
view_layout:
grid-area: content1
layout:
grid-template-columns: 100%
grid-template-rows: auto
grid-template-areas: |
"content1"
icon: mdi:light-flood-down
- type: sections
max_columns: 4
title: Timeline
path: timeline
icon: m3o:map
subview: true
sections:
- type: grid
cards:
- type: custom:simple-tabs
tabs:
- title: Rey
icon: m3of:face
id: rey
card:
type: custom:location-timeline-card
entity: device_tracker.rey_s_phone
places_entity: sensor.rey_s_phone
osm_api_key: your_email
- title: Christina
icon: m3of:face-3
id: christina
card:
type: custom:location-timeline-card
entity: device_tracker.christina
places_entity: sensor.christina_s_phone
osm_api_key: your_email
background:
opacity: 50
alignment: center
size: cover
repeat: no-repeat
attachment: fixed
image:
media_content_id: /local/wallpapers/Red - Landscape.webp
badges:
- type: custom:streamline-card
template: back_button_card
variables:
navigation_path: /tablet-dashboard/overview
header:
layout: start
badges_position: top
badges_wrap: wrap
================================================
FILE: template sensor/Active Notiifcation Count Sensor
================================================
- sensor:
- name: "Active Notification Count"
state: >
{% set count = 0 %}
{% if states('sensor.soil_sensor_corner_moisture') | float(100) < 40 %}
{% set count = count + 1 %}
{% endif %}
{% if is_state('input_boolean.rubbish', 'on') or is_state('input_boolean.recycle', 'on') %}
{% set count = count + 1 %}
{% endif %}
{% if is_state('binary_sensor.door_sensor_grg_contact', 'on') %}
{% set count = count + 1 %}
{% endif %}
{% if is_state('binary_sensor.all_doors', 'on') %}
{% set count = count + 1 %}
{% endif %}
{% if is_state('timer.wash_cuddly', 'idle') %}
{% set count = count + 1 %}
{% endif %}
{% if is_state('binary_sensor.timer_wash_cuddly_12h', 'on') %}
{% set count = count + 1 %}
{% endif %}
{% if is_state('timer.wash_duvet', 'idle') %}
{% set count = count + 1 %}
{% endif %}
{% if is_state('binary_sensor.timer_wash_duvet_12h', 'on') %}
{% set count = count + 1 %}
{% endif %}
{% if is_state('timer.heated_towel_rails', 'active') %}
{% set count = count + 1 %}
{% endif %}
{% if is_state('timer.exhaust_fan', 'active') %}
{% set count = count + 1 %}
{% endif %}
{% if is_state('sensor.laundry_machine_state', 'Delay Run') %}
{% set count = count + 1 %}
{% endif %}
{% if is_state('sensor.laundry_machine_state', 'Run') %}
{% set count = count + 1 %}
{% endif %}
{% if states('sensor.washing_machine_power') | float(0) > 10 %}
{% set count = count + 1 %}
{% endif %}
{% if states('sensor.dryer_power') | float(0) > 10 %}
{% set count = count + 1 %}
{% endif %}
{% if is_state('media_player.all_speakers', 'playing') or is_state('media_player.all_speakers', 'on') %}
{% set count = count + 1 %}
{% endif %}
{{ count }}
================================================
FILE: template sensor/Get Forecast Template Sensor
================================================
- trigger:
- platform: time_pattern
minutes: /15
- platform: homeassistant
event: start
sensor:
- name: "Hourly Weather Data - Met Service"
unique_id: hourly_weather_data_met_service
state: >
{% if forecast['weather.met_service_home_forecast'].forecast is defined
and forecast['weather.met_service_home_forecast'].forecast | length > 0 %}
{{ as_local(strptime(forecast['weather.met_service_home_forecast'].forecast[0].datetime,
'%Y-%m-%dT%H:%M:%S%z')) }}
{% else %}
unknown
{% endif %}
attributes:
forecast_data: >
{% if forecast['weather.met_service_home_forecast'].forecast is defined
and forecast['weather.met_service_home_forecast'].forecast | length > 0 %}
{{ forecast['weather.met_service_home_forecast'].forecast[0] }}
{% else %}
{}
{% endif %}
- name: "Daily Weather Data - Met Service"
unique_id: daily_weather_data_met_service
state: >
{% if forecast_daily['weather.met_service_home_forecast'].forecast is defined
and forecast_daily['weather.met_service_home_forecast'].forecast | length > 0 %}
{{ as_local(strptime(forecast_daily['weather.met_service_home_forecast'].forecast[0].datetime,
'%Y-%m-%dT%H:%M:%S%z')) }}
{% else %}
unknown
{% endif %}
attributes:
forecast_data: >
{% if forecast_daily['weather.met_service_home_forecast'].forecast is defined
and forecast_daily['weather.met_service_home_forecast'].forecast | length > 0 %}
{{ forecast_daily['weather.met_service_home_forecast'].forecast[0] }}
{% else %}
{}
{% endif %}
action:
- action: weather.get_forecasts
target:
entity_id: weather.met_service_home_forecast
data:
type: hourly
response_variable: forecast
- action: weather.get_forecasts
target:
entity_id: weather.met_service_home_forecast
data:
type: daily
response_variable: forecast_daily
- trigger:
- platform: time_pattern
minutes: /15
- platform: homeassistant
event: start
sensor:
- name: "Hourly Weather Data - Met.no"
unique_id: hourly_weather_data_met_no
state: >
{% if forecast['weather.forecast_home'].forecast is defined
and forecast['weather.forecast_home'].forecast | length > 0 %}
{{ as_local(strptime(forecast['weather.forecast_home'].forecast[0].datetime,
'%Y-%m-%dT%H:%M:%S%z')) }}
{% else %}
unknown
{% endif %}
attributes:
forecast_data: >
{% if forecast['weather.forecast_home'].forecast is defined
and forecast['weather.forecast_home'].forecast | length > 0 %}
{{ forecast['weather.forecast_home'].forecast[0] }}
{% else %}
{}
{% endif %}
- name: "Daily Weather Data - Met.no"
unique_id: daily_weather_data_met_no
state: >
{% if forecast_daily['weather.forecast_home'].forecast is defined
and forecast_daily['weather.forecast_home'].forecast | length > 0 %}
{{ as_local(strptime(forecast_daily['weather.forecast_home'].forecast[0].datetime,
'%Y-%m-%dT%H:%M:%S%z')) }}
{% else %}
unknown
{% endif %}
attributes:
forecast_data: >
{% if forecast_daily['weather.forecast_home'].forecast is defined
and forecast_daily['weather.forecast_home'].forecast | length > 0 %}
{{ forecast_daily['weather.forecast_home'].forecast[0] }}
{% else %}
{}
`{% endif %}
action:
- action: weather.get_forecasts
target:
entity_id: weather.forecast_home
data:
type: hourly
response_variable: forecast
- action: weather.get_forecasts
target:
entity_id: weather.forecast_home
data:
type: daily
response_variable: forecast_daily
- trigger:
- platform: time_pattern
minutes: /15
- platform: homeassistant
event: start
sensor:
- name: "Met.no Hourly Forecasts (Full Hourly Forecast)"
unique_id: metno_hourly_forecasts_full_hourly_forecast
state: >
{% if forecast['weather.forecast_home'].forecast is defined
and forecast['weather.forecast_home'].forecast | length > 0 %}
{{ as_local(strptime(forecast['weather.forecast_home'].forecast[0].datetime,
'%Y-%m-%dT%H:%M:%S%z')) }}
{% else %}
unknown
{% endif %}
attributes:
forecasts: >
{% if forecast['weather.forecast_home'].forecast is defined
and forecast['weather.forecast_home'].forecast | length > 0 %}
[
{%- for f in forecast['weather.forecast_home'].forecast %}
{
"datetime": "{{ as_local(strptime(f.datetime, '%Y-%m-%dT%H:%M:%S%z')) }}",
"condition": "{{ f.condition }}",
"temperature": {{ f.temperature }},
"precipitation": {{ f.precipitation }},
"wind_speed": {{ f.wind_speed }},
"wind_bearing": {{ f.wind_bearing }},
"humidity": {{ f.humidity if f.humidity is defined else 'null' }},
"cloud_coverage": {{ f.cloud_coverage if f.cloud_coverage is defined else 'null' }},
"uv_index": {{ f.uv_index if f.uv_index is defined else 'null' }}
}{{ "," if not loop.last }}
{%- endfor %}
]
{% else %}
[]
{% endif %}
action:
- action: weather.get_forecasts
target:
entity_id: weather.forecast_home
data:
type: hourly
response_variable: forecast
================================================
FILE: template sensor/Weather Condition Icon Sensor
================================================
- name: "Weather Condition Icon"
unique_id: weather_condition_icon
state: >
{% set condition = states('weather.forecast_home') | lower %}
{% if condition in ['sunny', 'clear'] %}
mdi:weather-sunny
{% elif condition == 'clear-night' %}
mdi:weather-night
{% elif condition in ['partlycloudy', 'partly cloudy'] %}
mdi:weather-partly-cloudy
{% elif condition == 'cloudy' %}
mdi:weather-cloudy
{% elif condition in ['rainy', 'rain'] %}
mdi:weather-rainy
{% elif condition == 'pouring' %}
mdi:weather-pouring
{% elif condition == 'windy' %}
mdi:weather-windy
{% elif condition in ['fog', 'foggy'] %}
mdi:weather-fog
{% elif condition in ['snow', 'snowy'] %}
mdi:weather-snowy
{% elif condition == 'snowy-rainy' %}
mdi:weather-snowy-rainy
{% elif condition == 'hail' %}
mdi:weather-hail
{% elif condition == 'lightning' %}
mdi:weather-lightning
{% elif condition == 'lightning-rainy' %}
mdi:weather-lightning-rainy
{% elif condition == 'windy-variant' %}
mdi:weather-windy-variant
{% elif condition == 'exceptional' %}
mdi:alert-circle-outline
{% else %}
mdi:weather-cloudy-alert
{% endif %}
================================================
FILE: wallpaper/wallpaper_placeholder
================================================