[ { "path": ".github/FUNDING.yml", "content": "\nko_fi: ElementZoom\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2025 Rey\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# Material-Design-3-Dynamic-Tablet-Dashboard\nA 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.\n\nThis 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.\n\n[_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.\n\nI 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.\n\n\"Screenshot\n\n# ✨ Features\n\n**🎨 MD3 Theme Engine**\n\nUnlock unlimited color combinations with a simple color picker - thanks to the amazing work of Material You Theme repository.\n\n**👥 Per-User Styling**\n\nEach family member can have their own unique style and colors. Perfect for customizing your phone, tablets, and shared devices.\n\n**💡Community Inspired**\n\nSeveral cards are inspired by the incredible work of others in the Home Assistant community. Credit will be detailed below.\n\n# 🖼️ Dashboard Walkthrough\n\n**Overview Page**\n\n\"Screenshot\n\n\n**Page Description**\n\nThe 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.\n\nTo 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.\n\nNext, 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.\n\nFinally, 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.\n\n**_Components Used:_**\n- [Auto-Entities](https://github.com/thomasloven/lovelace-auto-entities)\n- [Button-Card](https://github.com/custom-cards/button-card)\n- [Calendar Card Pro](https://github.com/alexpfau/calendar-card-pro)\n- [Clock Weather Card HUI Icons](https://github.com/samuelgoodell/clock-weather-card-hui-icons)\n- [Config Template Card](https://github.com/iantrich/config-template-card)\n- [Mini-Graph-Card](https://github.com/kalkih/mini-graph-card)\n- [Mushroom](https://github.com/piitaya/lovelace-mushroom)\n- [Paper Buttons Row](https://github.com/jcwillox/lovelace-paper-buttons-row)\n- [Simple Swipe Card](https://github.com/nutteloost/simple-swipe-card)\n- [Simple Tabs Card](https://github.com/agoberg85/home-assistant-simple-tabs)\n- [WebRTC](https://github.com/AlexxIT/WebRTC)\n\n***\n\n\n**Weather Forecast and Notifications Page**\n\n\"Screenshot\n\"Screenshot\n\n\n**Weather - Notification page** combines all my weather information and notifications in one place for quick status updates and alerts.\n\nOn 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.\n\nThe 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.\n\n**_Components Used:_**\n- [Apex Charts Card](https://github.com/RomRider/apexcharts-card?tab=readme-ov-file#series-options)\n- [Auto-Entities](https://github.com/thomasloven/lovelace-auto-entities)\n- [Button-Card](https://github.com/custom-cards/button-card)\n- [Custom Card Features](https://github.com/Nerwyn/custom-card-features)\n- [Lunar Phase Card](https://github.com/ngocjohn/lunar-phase-card)\n- [Lunar Phase Integration](https://github.com/ngocjohn/lunar-phase)\n- [Mushroom](https://github.com/piitaya/lovelace-mushroom)\n- [Simple Swipe Card](https://github.com/nutteloost/simple-swipe-card)\n- [Simple Tabs Card](https://github.com/agoberg85/home-assistant-simple-tabs)\n- [World's Air Quality Index](https://www.home-assistant.io/integrations/waqi/)\n- [Weather Card Extended](https://github.com/Thyraz/weather-forecast-extended)\n\n**Individual Room Page**\n\"Screenshot\n\"Screenshot\n\"Screenshot\n\n**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.\n\n**_Components Used:_**\n- [Material Home Component](https://github.com/giovannilamarmora/lovelace-material-components)\n- [Mushroom](https://github.com/piitaya/lovelace-mushroom)\n- [WebRTC](https://github.com/AlexxIT/WebRTC)\n\n***\n\n**Hue Scene Page**\n\n\"Screenshot\n\"Screenshot\n\n**Page Description**\n\nI’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).\n\nAll 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.\n\n**_Components Used:_**\n- [Bubble Card](https://github.com/Clooos/Bubble-Card)\n- [Button-Card](https://github.com/custom-cards/button-card)\n- [Scene Presets](https://github.com/Hypfer/hass-scene_presets)\n- [Mushroom](https://github.com/piitaya/lovelace-mushroom)\n- [Navbar Card](https://github.com/joseluis9595/lovelace-navbar-card)\n\n\n***\n\n**Camera Page - Alarm Page**\n\n\"Screenshot\n\"Screenshot\n\n\n**Page Description**\n\nI 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.\n\nAt 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.\n\nI 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.\n\n**_Components Used:_**\n- [Alarmo Card](https://github.com/nielsfaber/alarmo-card)\n- [Mushroom](https://github.com/piitaya/lovelace-mushroom)\n- [Simple Tabs Card](https://github.com/agoberg85/home-assistant-simple-tabs)\n- [Web RTC Camera](https://github.com/AlexxIT/WebRTC)\n\n***\n**Irrigation Page**\n\n\"Screenshot\n\nThe **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.\n\nTo 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.\n\n**_Components Used:_**\n- [Config Template Card](https://github.com/iantrich/config-template-card)\n- [Mushroom](https://github.com/piitaya/lovelace-mushroom)\n- [Paper Buttons Row](https://github.com/jcwillox/lovelace-paper-buttons-row)\n- [Simple Tabs Card](https://github.com/agoberg85/home-assistant-simple-tabs)\n\n\n***\n\n**Calendar Page**\n\n\"Screenshot\n\n**Page Description**\n\nThe [_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.\n\n**_Components Used:_**\n- [Calendar Card Pro](https://github.com/alexpfau/calendar-card-pro)\n\n**Extra Cards**\n\n\"Lock\n\nAbove is an example of [lock card](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Lock%20Card%20Example).\n\n\"Scene\n\nThe 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.\n\n\"Cover\n\nAnd last one, is a [cover card](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/blob/main/assets/Curtain%20Card%20Example) example.\n\n# Other Components:\n\nTheme / Layout:\n\n- [Material Symbols](https://github.com/beecho01/material-symbols)\n- [Material You Theme](https://github.com/Nerwyn/material-you-theme)\n- [Material You Utilities](https://github.com/Nerwyn/material-you-utilities)\n- [Kiosk Mode](https://github.com/maykar/kiosk-mode)\n- [Stack In Card](https://github.com/custom-cards/stack-in-card)\n- [Streamline Card](https://github.com/brunosabot/streamline-card)\n- [Vertical Stack In Card](https://github.com/ofekashery/vertical-stack-in-card)\n\n# Installation\n\n**For new user:**\n- 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.\n- Install the required HACS components (such as simple swipe card, stack-in-card, popup-card, etc. - see your setup for what’s needed).\n- 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.\n- 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).\n- Apply the MD3 theme and select your preferred colors. It is accessible from Overview page > More > Bucket Fill Icon\n- Apply [wallpaper](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/tree/main/wallpaper) (optional)\n- Set the companion app to full screen (optional)\n\n**For existing user:**\n- 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.\n- Choose which card / visuals that you like to be added to your installation by clicking the hyperlink provided in the description above.\n- Apply [wallpaper](https://github.com/ElementZoom/Material-Design-3-Dynamic-Tablet-Dashboard/tree/main/wallpaper) (optional)\n- Set the companion app to full screen (optional)\n\n# 📚 Credits\n\nThis project builds upon the work of:\n- Nerwyn – [Material You Theme](https://github.com/Nerwyn/material-you-theme) & [Material You Utilities](https://github.com/Nerwyn/material-you-utilities)\n- [MySmartHome](https://www.youtube.com/@My_Smart_Home) - for the new tabs button, button cards styling, sliders, etc\n- Other community members who kindly shared their cards\n\n# 💖 Support My Work \n\nIf you want to hire me to make your personal dashboard, you can hit me up on one of these social media platforms below:\n- Email at _reynaldi.sutrisno.rs16@gmail.com_\n- [Reddit](https://www.reddit.com/u/ElementZoom/s/dr4NN0mTtj)\n- [Facebook](https://www.facebook.com/profile.php?id=61578092475703)\n\nOr you can support me on [Ko-fi](https://ko-fi.com/ElementZoom).\nYour support helps me keep creating and sharing more awesome open-source tools! Thank you for being part of this journey 🚀\n" }, { "path": "assets/Calendar Page - Day offset 0 example", "content": "type: custom:week-planner-card\ncalendars:\n - entity: calendar.calendar_1\n color: \"#ff6a6a\"\n - entity: calendar.calendar_2\n color: \"#71c8fe\"\n - entity: calendar.calendar_3\n color: \"#d3f37f\"\n - entity: calendar.calendar_4\n color: \"#f9da4e\"\ndays: \"1\"\nstartingDay: today\nstartingDayOffset: 0\nhideWeekend: false\nnoCardBackground: true\ncompact: false\nweather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n useTwiceDaily: false\n entity: weather.forecast_home\nlocale: nz\nshowLocation: false\nhidePastEvents: false\nhideDaysWithoutEvents: false\nhideTodayWithoutEvents: false\ncombineSimilarEvents: false\nshowLegend: false\n" }, { "path": "assets/Camera Page - Example", "content": "type: vertical-stack\ncards:\n - type: custom:stack-in-card\n mode: vertical\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n title: Driveway\n subtitle: \"{{ states ('sensor.right_driveway_camera_status') }}\"\n animation_delay: 0.5s\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: automation.driveway_camera_vehicle_notification\n icon: >\n {{ 'mdi:car' if\n is_state('automation.driveway_camera_vehicle_notification', 'on')\n else 'mdi:car-off' }}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_vehicle_notification', 'on') else '#a8a8a8' }};\n --color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_vehicle_notification', 'on') else '#a8a8a8' }};\n animation: slideDown 1.0s ease-out 1.0s both;\n }\n @keyframes slideDown {\n from { \n opacity: 1;\n transform: translateY(-4px);\n }\n to { \n opacity: 1;\n transform: translateY(0);\n }\n }\n mushroom-chip$: |\n .chip {\n transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n mushroom-chip$mushroom-state-icon$: |\n ha-state-icon {\n transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n - type: template\n entity: automation.driveway_camera_person_notification\n icon: >\n {{ 'm3of:sensor-occupied' if\n is_state('automation.driveway_camera_person_notification', 'on')\n else 'm3o:sensors-krx-off' }}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_person_notification', 'on') else '#a8a8a8' }};\n --color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_person_notification', 'on') else '#a8a8a8' }};\n animation: slideDown 1.0s ease-out 1.3s both;\n }\n @keyframes slideDown {\n from { \n opacity: 1;\n transform: translateY(-4px);\n }\n to { \n opacity: 1;\n transform: translateY(0);\n }\n }\n mushroom-chip$: |\n .chip {\n transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n mushroom-chip$mushroom-state-icon$: |\n ha-state-icon {\n transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 22px;\n right: 2px;\n }\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password$@192.168.1.150/h265Preview_01_main#video=copy#audio=opus\n entity_id_light_one: light.lights_ceiling\n light_one_icon: hue:recessed-ceiling\n entity_id_light_two: light.lights_outdoor_grg\n light_two_icon: hue:recessed-ceiling\n entity_id_light_three: light.lights_wall\n light_three_icon: hue:wall-appear\n animation_delay: 0.8s\n - type: custom:stack-in-card\n mode: vertical\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n title: Left Walkway\n subtitle: \"{{ states ('sensor.left_walkway_camera_status') }}\"\n animation_delay: 1.0s\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: automation.left_walkway_camera_person_notification\n icon: >\n {{ 'm3of:sensor-occupied' if\n is_state('automation.left_walkway_camera_person_notification',\n 'on') else 'm3o:sensors-krx-off' }}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--primary-text-color)' if is_state('automation.left_walkway_camera_person_notification', 'on') else '#a8a8a8' }};\n --color: {{ 'var(--primary-text-color)' if is_state('automation.left_walkway_camera_person_notification', 'on') else '#a8a8a8' }};\n animation: slideDown 1.0s ease-out 1.7s both;\n }\n @keyframes slideDown {\n from { \n opacity: 1;\n transform: translateY(-4px);\n }\n to { \n opacity: 1;\n transform: translateY(0);\n }\n }\n mushroom-chip$: |\n .chip {\n transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n mushroom-chip$mushroom-state-icon$: |\n ha-state-icon {\n transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 22px;\n right: 2px;\n }\n - type: custom:streamline-card\n template: camera_generic_with_chips_card\n variables:\n camera_entity: camera.left_walkway_camera_fluent\n entity_id_light_one: switch.outdoor_light_switch_lr\n light_one_icon: mdi:outdoor-lamp\n entity_id_light_two: switch.rear_light_switch_grg\n light_two_icon: mdi:outdoor-lamp\n animation_delay: 2.3s\n" }, { "path": "assets/Curtain Card Example", "content": "type: custom:streamline-card\ntemplate: curtain_card\nvariables:\n entity: cover.erker_groot\n name: Erker Groot\n" }, { "path": "assets/Hue Page - Room Selector", "content": "type: vertical-stack\ncards:\n - type: custom:bubble-card\n card_type: pop-up\n hash: \"#room-selector\"\n name: Room Selector\n icon: m3o:room-preferences\n styles: |-\n #root {\n height: unset !important;\n max-height: 100% !important;\n transition: transform var(--md-sys-motion-expressive-spatial-default) !important;\n }\n .bubble-header-container {\n --bubble-button-background-color: var(--md-sys-color-on-secondary);\n --bubble-button-icon-background-color: var(--md-sys-color-on-secondary);\n }\n .bubble-pop-up-container {\n padding-bottom: 64px !important;\n }\n bg_color: var(--md-sys-color-on-primary)\n bg_opacity: \"50\"\n button_type: name\n sub_button:\n main: []\n bottom: []\n slider_fill_orientation: left\n slider_value_position: right\n - type: custom:simple-tabs\n pre-load: true\n active-background: var(--md-sys-color-primary)\n active-text-color: var(--md-sys-color-on-primary)\n text-color: var(--primary-text-color)\n tabs:\n - title: Living Area\n icon: mdi:sofa\n id: living\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Area\n title_font_size: 20px\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: m3of:table-restaurant\n primary: Dining\n secondary: \"{{ states('input_text.dining_table_dynamic_scene_active') }}\"\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_dt\n - light.light_two_dt\n - light.light_three_dt\n - light.light_one_ktc_dt\n - light.light_two_ktc_dt\n - light.light_three_ktc_dt\n presence_automation:\n - automation.room_presence_dining_table\n room_boolean: input_boolean.dining_table_dynamic_scene\n room_scene_tracker: input_text.dining_table_dynamic_scene_active\n color: >-\n {% if states('input_text.dining_table_dynamic_scene_active')\n != '' %}\n #f6bd60\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: mdi:sofa\n primary: Sofa\n secondary: \"{{ states('input_text.sofa_dynamic_scene_active') }}\"\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_sofa\n - light.light_two_sofa\n - light.light_three_sofa\n - light.light_four_sofa\n presence_automation:\n - automation.room_presence_sofa\n - automation.sofa_sensor_workaround\n room_boolean: input_boolean.sofa_dynamic_scene\n room_scene_tracker: input_text.sofa_dynamic_scene_active\n color: >-\n {% if states('input_text.sofa_dynamic_scene_active') != ''\n %}\n #f7ede2\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: mdi:countertop\n primary: Kitchen\n secondary: \"{{ states('input_text.kitchen_dynamic_scene_active') }}\"\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_ktc\n - light.light_two_ktc\n presence_automation:\n - automation.room_presence_kitchen\n room_boolean: input_boolean.kitchen_dynamic_scene\n room_scene_tracker: input_text.kitchen_dynamic_scene_active\n color: >-\n {% if states('input_text.kitchen_dynamic_scene_active') !=\n '' %}\n #f5cac3\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: mdi:cookie\n primary: Scullery\n secondary: \"{{ states('input_text.scullery_dynamic_scene_active') }}\"\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_scr\n presence_automation:\n - automation.room_presence_scullery\n room_boolean: input_boolean.scullery_dynamic_scene\n room_scene_tracker: input_text.scullery_dynamic_scene_active\n color: >-\n {% if states('input_text.scullery_dynamic_scene_active') !=\n '' %}\n #84a59d\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: mdi:image-frame\n primary: Hallway\n secondary: \"{{ states('input_text.hallway_dynamic_scene_active') }}\"\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_hw\n - light.light_two_hw\n - light.light_three_hw\n - light.light_four_hw\n - light.light_five_hw\n - light.light_six_hw\n presence_automation:\n - automation.room_presence_hallway\n room_boolean: input_boolean.hallway_dynamic_scene\n room_scene_tracker: input_text.hallway_dynamic_scene_active\n color: >-\n {% if states('input_text.hallway_dynamic_scene_active') !=\n '' %}\n #f28482\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - title: Bedroom\n icon: m3of:bed\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Area\n title_font_size: 20px\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: m3of:bed\n primary: Master\n secondary: >-\n {{ states('input_text.master_bedroom_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_mbr\n - light.light_two_mbr\n presence_automation: automation.room_presence_master_bedroom\n room_boolean: input_boolean.master_bedroom_dynamic_scene\n room_scene_tracker: input_text.master_bedroom_dynamic_scene_active\n color: >-\n {% if\n states('input_text.master_bedroom_dynamic_scene_active') !=\n '' %}\n #cdb4db\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: mdi:wardrobe\n primary: Wardrobe\n secondary: \"{{ states('input_text.wardrobe_dynamic_scene_active') }}\"\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_wr\n - light.light_two_wr\n presence_automation: automation.room_presence_wardrobe\n room_boolean: input_boolean.wardrobe_dynamic_scene\n room_scene_tracker: input_text.wardrobe_dynamic_scene_active\n color: >-\n {% if states('input_text.wardrobe_dynamic_scene_active') !=\n '' %}\n #ffc8dd\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: m3of:stroller\n primary: Baby\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_br\n - light.light_two_br\n - light.ava_bed_led\n - light.iyla_bed_led\n presence_automation: automation.room_presence_baby_room\n room_boolean: input_boolean.baby_room_dynamic_scene\n room_scene_tracker: input_text.baby_room_dynamic_scene_active\n secondary: \"{{ states('input_text.baby_room_dynamic_scene_active') }}\"\n color: >-\n {% if states('input_text.baby_room_dynamic_scene_active') !=\n '' %}\n #ffafcc\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: m3of:person-3\n primary: Single\n tap_action:\n action: perform-action\n data:\n room_lights:\n - light.light_one_sgr\n - light.light_two_sgr\n - light.bed_led_sgr\n presence_automation: automation.room_presence_single_guest_room\n room_boolean: input_boolean.single_guest_room_dynamic_scene\n room_scene_tracker: input_text.single_guest_room_dynamic_scene_active\n perform_action: script.toggle_or_apply_dynamic_scene\n target: {}\n secondary: >-\n {{\n states('input_text.single_guest_room_dynamic_scene_active')\n }}\n color: >-\n {% if\n states('input_text.single_guest_room_dynamic_scene_active')\n != '' %}\n #bde0fe\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: m3of:groups-2\n primary: Multiple\n tap_action:\n action: perform-action\n data:\n room_lights:\n - light.light_one_mgr\n - light.light_two_mgr\n - light.bed_led_mgr\n presence_automation: automation.room_presence_multiple_guest_room\n room_boolean: input_boolean.multiple_guest_room_dynamic_scene\n room_scene_tracker: input_text.multiple_guest_room_dynamic_scene_active\n perform_action: script.toggle_or_apply_dynamic_scene\n target: {}\n secondary: >-\n {{\n states('input_text.multiple_guest_room_dynamic_scene_active')\n }}\n color: >-\n {% if\n states('input_text.multiple_guest_room_dynamic_scene_active')\n != '' %}\n #a2d2ff\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n badge: \"\"\n id: bedroom\n - title: Bathroom\n icon: m3of:water-drop\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Area\n title_font_size: 20px\n - type: custom:mushroom-template-card\n icon: m3of:bed\n primary: Master Bathroom\n secondary: \"{{ states('input_text.master_bathroom_dynamic_scene_active') }}\"\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_mbrt\n - light.light_two_mbrt\n - light.vanity_led_mbrt\n presence_automation: automation.room_presence_master_bathroom\n room_boolean: input_boolean.master_bathroom_dynamic_scene\n room_scene_tracker: input_text.master_bathroom_dynamic_scene_active\n color: >-\n {% if states('input_text.master_bathroom_dynamic_scene_active')\n != '' %}\n #ffa69e\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: m3of:faucet\n primary: Vanity\n secondary: >-\n {{\n states('input_text.guest_bathroom_vanity_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_gbrv\n - light.light_two_gbrv\n - light.vanity_led_gbrv\n presence_automation:\n - automation.room_presence_guest_bathroom_vanity\n room_boolean: input_boolean.guest_bathroom_vanity_dynamic_scene\n room_scene_tracker: input_text.guest_bathroom_vanity_dynamic_scene_active\n color: >-\n {% if\n states('input_text.guest_bathroom_vanity_dynamic_scene_active')\n != '' %}\n #faf3dd\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: mdi:shower\n primary: Bathing\n secondary: >-\n {{\n states('input_text.guest_bathroom_bathing_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_gbrb\n - light.light_two_gbrb\n presence_automation: automation.room_presence_guest_bathroom_bathing\n room_boolean: input_boolean.guest_bathroom_bathing_dynamic_scene\n room_scene_tracker: input_text.guest_bathroom_bathing_dynamic_scene_active\n color: >-\n {% if\n states('input_text.guest_bathroom_bathing_dynamic_scene_active')\n != '' %}\n #b8f2e6\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: m3of:water-drop\n primary: Toilet\n secondary: >-\n {{\n states('input_text.guest_bathroom_toilet_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_gbrt\n presence_automation: automation.room_presence_guest_bathroom_toilet\n room_boolean: input_boolean.guest_bathroom_toilet_dynamic_scene\n room_scene_tracker: input_text.guest_bathroom_toilet_dynamic_scene_active\n color: >-\n {% if\n states('input_text.guest_bathroom_toilet_dynamic_scene_active')\n != '' %}\n #aed9e0\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - title: Outdoor\n icon: mdi:light-flood-down\n id: outdoor\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Area\n title_font_size: 20px\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: mdi:garage-variant\n primary: Garage\n secondary: >-\n {{ states('input_text.garage_outdoor_dynamic_scene_active')\n }}\n tap_action:\n action: perform-action\n data:\n room_lights:\n - light.light_one_outdoor_grg\n - light.light_two_outdoor_grg\n presence_automation: automation.outdoor_presence_driveway\n room_boolean: input_boolean.garage_outdoor_dynamic_scene\n room_scene_tracker: input_text.garage_outdoor_dynamic_scene_active\n perform_action: script.toggle_or_apply_dynamic_scene\n target: {}\n color: >-\n {% if\n states('input_text.garage_outdoor_dynamic_scene_active') !=\n '' %}\n #e76f51\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: hue:wall-appear\n primary: Wall\n secondary: \"{{ states('input_text.wall_dynamic_scene_active') }}\"\n tap_action:\n action: perform-action\n data:\n room_lights:\n - light.left_porch_light_drw\n - light.right_porch_light_drw\n - light.side_porch_light_drw\n - light.wall_light_one_grg\n - light.wall_light_two_grg\n presence_automation: automation.outdoor_presence_driveway\n room_boolean: input_boolean.wall_dynamic_scene\n room_scene_tracker: input_text.wall_dynamic_scene_active\n perform_action: script.toggle_or_apply_dynamic_scene\n target: {}\n color: >-\n {% if states('input_text.wall_dynamic_scene_active') != ''\n %}\n #f4a261\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: mdi:home-roof\n primary: Roof\n secondary: \"{{ states('input_text.roof_dynamic_scene_active') }}\"\n tap_action:\n action: perform-action\n data:\n room_lights:\n - light.light_one_left_roof_drw\n - light.light_two_left_roof_drw\n - light.light_one_ceiling_porch_drw\n - light.light_two_ceiling_porch__drw\n - light.light_one_right_roof_drw\n - light.light_two_right_roof_drw\n presence_automation: automation.outdoor_presence_driveway\n room_boolean: input_boolean.roof_dynamic_scene\n room_scene_tracker: input_text.roof_dynamic_scene_active\n perform_action: script.toggle_or_apply_dynamic_scene\n target: {}\n color: >-\n {% if states('input_text.roof_dynamic_scene_active') != ''\n %}\n #e76f51\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Scenes Control\n title_font_size: 20px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: number_slider_card\n variables:\n entity: input_number.dynamic_scene_brightness\n name: Brightness\n icon: mdi:brightness-6\n - type: custom:streamline-card\n template: number_slider_card\n variables:\n entity: input_number.dynamic_scene_interval\n name: Interval\n icon: mdi:timer\n - type: custom:mushroom-entity-card\n entity: input_boolean.dynamic_scene_stop\n name: Stop Scenes\n icon: mdi:stop-circle\n tap_action:\n action: toggle\n fill_container: true\n" }, { "path": "assets/Hue Page - Scene Example", "content": "type: horizontal-stack\ncards:\n - type: picture\n image: /local/hue/raw/Blossom.png\n tap_action:\n action: call-service\n service: input_text.set_value\n data:\n entity_id: input_text.dynamic_scene_selected\n value: blossom\n - type: picture\n image: /local/hue/raw/Crocus.png\n tap_action:\n action: call-service\n service: input_text.set_value\n data:\n entity_id: input_text.dynamic_scene_selected\n value: crocus\n" }, { "path": "assets/Irrigation Page - Backyard Example", "content": "type: custom:mod-card\nuix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\ncard:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Backyard\n - subtitle: \"{{ states('sensor.backyard_water_tap_status') }}\"\n - type: custom:streamline-card\n template: irrigation_card\n variables:\n switch_entity: switch.backyard_water_tap\n flow_sensor: sensor.backyard_water_tap_flow\n timer_entity: timer.backyard_sprinkler_timer\n zone: backyard\n soil_moisture_sensor: sensor.average_backyard_soil_moisture\n soil_temperature_sensor: sensor.average_backyard_soil_temperature\n" }, { "path": "assets/Lock Card Example", "content": "type: custom:streamline-card\ntemplate: lock_card\nvariables:\n entity: lock.nuki_bijkeuken_lock\n name: Nuki bijkeuken\n" }, { "path": "assets/Notification Page - Timers", "content": "type: conditional\nconditions:\n - condition: state\n entity: binary_sensor.show_wash_cuddly_timer\n state: \"on\"\ncard:\n type: custom:timer-bar-card\n entity: timer.wash_cuddly\n invert: true\n bar_direction: ltr\n bar_width: 60%\n mushroom:\n layout: vertical\n color: \"#f385bc\"\n" }, { "path": "assets/Notification Page - Weather Tab", "content": "type: custom:mod-card\nuix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\ncard:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 8px\n - type: custom:simple-tabs\n pre-load: true\n active-background: var(--md-sys-color-primary)\n active-text-color: var(--md-sys-color-on-primary)\n text-color: var(--primary-text-color)\n tabs:\n - title: Volcano\n icon: m3of:mountain-steam\n conditions:\n - condition: template\n template: |\n {{ states('sensor.volcano_rotorua') | float(0) > 0 }}\n card:\n type: markdown\n content: >\n {{ state_attr('sensor.volcano_taupo', 'activity') | default('No\n warnings') }}\n\n\n _Issued: {{\n as_datetime(state_attr('sensor.volcano_taupo', 'feed_last_update_successful')).astimezone().strftime('%I:%M%p %A, %d %b')\n }}_\n text_only: true\n - title: Earthquake\n icon: m3of:earthquake\n conditions:\n - condition: template\n template: >\n {{ states('sensor.geonet_nz_quakes_37_6421739_175_527482') |\n float(0) > 0 }}\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n - title: Latest Earthquake\n - type: markdown\n content: >\n\n {% set sensor = states.geo_location |\n selectattr('attributes.source', 'defined') |\n selectattr('attributes.source', 'eq', 'geonetnz_quakes') |\n sort(attribute='last_updated', reverse=true) | list | first %}\n\n {% if sensor %}\n\n **Locality:** {{ sensor.attributes.locality }} \n\n **Magnitude:** {{ sensor.attributes.magnitude | round(2) }}\n\n **Depth:** {{ sensor.attributes.depth }} km \n\n **Time:** {{ as_timestamp(sensor.attributes.time) |\n timestamp_custom('%a, %b %-d at %I:%M %p') }} \n\n {% else %}\n\n No recent earthquakes detected\n\n {% endif %}\n - title: Warning\n icon: m3of:warning\n conditions:\n - condition: template\n template: >\n {{ states('sensor.home_metservice_weather_warnings') not in\n ['unavailable', 'unknown'] }}\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n - title: Weather Warning\n - type: markdown\n content: >2-\n\n {{ state_attr('sensor.home_metservice_weather_warnings', 'warnings') | default('No warnings') }}\n\n _Issued: {{\n states.sensor.home_metservice_weather_warnings.last_changed.strftime('%I:%M%p\n %A, %d %b') }}_\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n icon: mdi:weather-lightning\n content: Open MetService\n tap_action:\n action: url\n url_path: https://www.metservice.com/warnings/home\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' }};\n }\n alignment: center\n - title: Forecast\n icon: mdi:weather-partly-cloudy\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:stack-in-card\n mode: vertical\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Forecast\n - subtitle: \"{{ states ('sensor.next_rain_summary') }}\"\n uix:\n style: |\n ha-card {\n padding-right: 120px;\n }\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n icon: mdi:weather-lightning\n content: MetService\n tap_action:\n action: url\n url_path: https://www.metservice.com/warnings/home\n uix:\n style:\n .: |\n ha-card {\n --text-color: var(--md-sys-color-on-primary);\n --color: var(--md-sys-color-on-primary);\n --chip-background: var(--md-sys-color-primary);\n }\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 20px;\n right: 2px;\n }\n - type: vertical-stack\n cards:\n - type: custom:weather-forecast-extended-card\n entity: weather.home\n show_header: true\n hourly_forecast: true\n daily_forecast: true\n daily_min_gap: 30\n hourly_min_gap: 16\n show_sun_times: true\n sun_use_home_coordinates: true\n use_night_header_backgrounds: true\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n entity: sensor.daily_weather_data_met_no\n icon: mdi:thermometer\n primary: >\n {% set current = state_attr('weather.home', 'temperature')\n %}\n\n Temp: {{ current }} {{ state_attr('weather.home',\n 'temperature_unit') }}\n secondary: >-\n {% set forecast =\n state_attr('sensor.daily_weather_data_google_weather',\n 'forecast_data') %} {% set unit =\n state_attr('weather.home', 'temperature_unit') %} {% if\n forecast is defined and forecast.temperature is defined\n and forecast.templow is defined %}\n High: {{ forecast.temperature }}{{ unit }} - Low: {{ forecast.templow }}{{ unit }}\n {% else %}\n High: N/A - Low: N/A\n {% endif %}\n color: >\n {% set current = state_attr('weather.home', 'temperature')\n | float(0) %} {% if current < 16 %}\n #CEB2F5\n {% elif current < 18 %}\n #5EBDEE\n {% elif current < 22 %}\n #9cc8b8\n {% elif current < 24 %}\n #e7b562\n {% elif current < 27 %}\n #FF564B \n {% else %}\n #99332d\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n - type: custom:mushroom-template-card\n entity: sensor.your_city_air_quality_index\n icon: mdi:leaf\n primary: Air Quality\n secondary: >-\n {% set aqi =\n states('sensor.your_city_air_quality_index')\n %} {% set pollutant =\n states('sensor.your_city_dominant_pollutant')\n %} {% if aqi not in ['unknown','unavailable','none',''] %}\n {% set aqi = aqi | int %}\n {% set level = ('Good' if aqi <= 50 else 'Moderate' if aqi <= 100 else 'Unhealthy' if aqi <= 150 else 'Very Unhealthy' if aqi <= 200 else 'Hazardous') %}\n {{ level }} - AQI {{ aqi }} - {{ pollutant }}\n {% else %}\n Data unavailable\n {% endif %}\n color: >\n {% set aqi =\n states('sensor.your_city_air_quality_index')\n %} {% if aqi not in ['unknown','unavailable','none',''] %}\n {% set aqi = aqi | int %}\n {% if aqi <= 50 %} green\n {% elif aqi <= 100 %} yellow\n {% elif aqi <= 150 %} orange\n {% elif aqi <= 200 %} red\n {% elif aqi <= 300 %} Green Bokeh\n {% else %} brown\n {% endif %}\n {% else %}\n grey\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n - title: Rainfall\n icon: m3of:rainy\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Rainfall & Temperature Forecast\n - subtitle: \"{{ states ('sensor.24h_rainfall_summary') }}\"\n - type: vertical-stack\n cards:\n - type: custom:apexcharts-card\n header:\n show: true\n graph_span: 24h\n span:\n start: hour\n now:\n show: true\n apex_config:\n chart:\n height: 240\n legend:\n show: true\n grid:\n yaxis:\n lines:\n show: false\n xaxis:\n crosshairs:\n show: false\n tooltip:\n enabled: false\n yaxis:\n - id: rain\n title:\n text: Rain (mm)\n opposite: false\n - id: temp\n title:\n text: Temp (°C)\n opposite: true\n decimalsInFloat: 0\n series:\n - entity: >-\n sensor.google_weather_hourly_forecasts_full_hourly_forecast\n name: Rain\n type: column\n yaxis_id: rain\n data_generator: |\n return entity.attributes.forecasts.map(f => {\n let val = f.precipitation;\n let color = '#9e9e9e';\n if (val > 0 && val < 2.5) {\n color = '#4FC3F7';\n } else if (val < 7.6) {\n color = '#0288D1';\n } else if (val < 35) {\n color = '#01579B';\n } else {\n color = '#311B92';\n }\n return {\n x: new Date(f.datetime).getTime(),\n y: val,\n fillColor: color\n };\n });\n - entity: >-\n sensor.google_weather_hourly_forecasts_full_hourly_forecast\n name: Temp\n type: line\n curve: smooth\n yaxis_id: temp\n stroke_width: 2\n color: \"#E53935\"\n data_generator: |\n return entity.attributes.forecasts.map(f => {\n return {\n x: new Date(f.datetime).getTime(),\n y: f.temperature\n };\n });\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n entity: sensor.forecast_rainfall\n icon: mdi:weather-rainy\n primary: >\n {% set r = states('sensor.forecast_rainfall') %} {% if\n r in ['unknown', 'unavailable', None] %}\n Rainfall: None\n {% else %}\n Rainfall: {{ r }} mm\n {% endif %}\n secondary: >\n {% set r = states('sensor.forecast_rainfall') |\n float(0) %} {% if r == 0 %}\n None - Dry conditions\n {% elif r < 1 %}\n Light - Possible drizzle\n {% elif r < 5 %}\n Moderate - Bring umbrella\n {% elif r < 20 %}\n Heavy - Wet outdoors\n {% else %}\n Intense - Flood risk\n {% endif %}\n color: >\n {% set r = states('sensor.forecast_rainfall') |\n float(0) %} {% if r == 0 %}\n blue\n {% elif r < 1 %}\n lightblue\n {% elif r < 5 %}\n cyan\n {% elif r < 20 %}\n orange\n {% else %}\n red\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n - type: custom:mushroom-template-card\n entity: sensor.forecast_temperature\n icon: mdi:thermometer\n primary: >\n Temp: {{ states('sensor.forecast_temperature') }} {{\n state_attr('weather.home', 'temperature_unit') }}\n secondary: >\n {% set t = states('sensor.forecast_temperature') |\n float(0) %} {% if t < 5 %}\n Cold - Bundle up\n {% elif t < 15 %}\n Cool - Light jacket\n {% elif t < 25 %}\n Mild - Comfortable\n {% elif t < 32 %}\n Warm - Stay hydrated\n {% else %}\n Hot - Avoid heat\n {% endif %}\n color: >\n {% set current = state_attr('weather.home',\n 'temperature') | float(0) %} {% if current < 16 %}\n #CEB2F5\n {% elif current < 18 %}\n #5EBDEE\n {% elif current < 22 %}\n #9cc8b8\n {% elif current < 24 %}\n #e7b562\n {% elif current < 27 %}\n #FF564B \n {% else %}\n #99332d\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n - title: UV\n icon: m3of:sunny\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: UV Index & Cloud Coverage Forecast\n - subtitle: \"{{ states ('sensor.uv_and_cloud_summary') }}\"\n - type: vertical-stack\n cards:\n - type: custom:apexcharts-card\n graph_span: 24h\n span:\n start: hour\n now:\n show: true\n apex_config:\n chart:\n height: 240\n legend:\n show: true\n grid:\n yaxis:\n lines:\n show: false\n xaxis:\n crosshairs:\n show: false\n tooltip:\n enabled: false\n yaxis:\n - id: uv\n title:\n text: UV Index\n opposite: false\n min: 0\n max: 11\n - id: cloud\n title:\n text: Cloud Coverage (%)\n opposite: true\n min: 0\n max: 100\n series:\n - entity: >-\n sensor.google_weather_hourly_forecasts_full_hourly_forecast\n name: UV Index\n type: line\n curve: smooth\n yaxis_id: uv\n color: \"#F9A825\"\n stroke_width: 2\n data_generator: |\n return entity.attributes.forecasts.map(f => {\n if (f.uv_index == null) return null;\n return { x: new Date(f.datetime).getTime(), y: f.uv_index };\n }).filter(x => x !== null);\n - entity: >-\n sensor.google_weather_hourly_forecasts_full_hourly_forecast\n name: Cloud Coverage\n type: area\n yaxis_id: cloud\n color: \"#90CAF9\"\n stroke_width: 1\n opacity: 0.3\n data_generator: |\n return entity.attributes.forecasts.map(f => {\n if (f.cloud_coverage == null) return null;\n return { x: new Date(f.datetime).getTime(), y: f.cloud_coverage };\n }).filter(x => x !== null);\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n entity: sensor.forecast_uv_index\n icon: mdi:weather-sunny-alert\n primary: |\n UV Index: {{ states('sensor.forecast_uv_index') }}\n secondary: >\n {% set uv = states('sensor.forecast_uv_index') |\n float(0) %} {% if uv < 3 %}\n Low - Safe outdoors\n {% elif uv < 6 %}\n Moderate - Use hat & sunglasses\n {% elif uv < 8 %}\n High - Apply sunscreen\n {% elif uv < 11 %}\n Very High - Seek shade\n {% else %}\n Extreme - Stay indoors\n {% endif %}\n color: >\n {% set uv = states('sensor.forecast_uv_index') |\n float(0) %} {% if uv < 3 %}\n green\n {% elif uv < 6 %}\n yellow\n {% elif uv < 8 %}\n orange\n {% elif uv < 11 %}\n red\n {% else %}\n Green Bokeh\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n - type: custom:mushroom-template-card\n entity: sensor.forecast_cloud_coverage\n icon: mdi:weather-cloudy\n primary: |\n Cloud: {{ states('sensor.forecast_cloud_coverage') }}%\n secondary: >\n {% set c = states('sensor.forecast_cloud_coverage') |\n float(0) %} {% if c <= 25 %}\n Clear skies - ideal visibility\n {% elif c <= 50 %}\n Partly cloudy - some sun breaks\n {% elif c <= 75 %}\n Mostly cloudy - limited sunshine\n {% else %}\n Overcast - likely dull conditions\n {% endif %}\n color: >\n {% set c = states('sensor.forecast_cloud_coverage') |\n float(0) %} {% if c <= 25 %}\n blue\n {% elif c <= 50 %}\n light-blue\n {% elif c <= 75 %}\n grey\n {% else %}\n blue-grey\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n - title: Wind\n icon: m3of:storm\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Wind Speed & Direction Forecast\n - subtitle: \"{{ states ('sensor.wind_summary') }}\"\n - type: vertical-stack\n cards:\n - type: custom:apexcharts-card\n graph_span: 24h\n span:\n start: hour\n now:\n show: true\n apex_config:\n chart:\n height: 240\n legend:\n show: true\n grid:\n yaxis:\n lines:\n show: false\n xaxis:\n crosshairs:\n show: false\n tooltip:\n enabled: false\n yaxis:\n - id: speed\n title:\n text: Wind Speed (km/h)\n opposite: false\n - id: direction\n title:\n text: Direction (°)\n opposite: true\n min: 0\n max: 360\n series:\n - entity: >-\n sensor.google_weather_hourly_forecasts_full_hourly_forecast\n name: Speed\n type: line\n curve: smooth\n yaxis_id: speed\n color: \"#0288D1\"\n stroke_width: 2\n data_generator: |\n return entity.attributes.forecasts.map(f => {\n let speed = f.wind_speed;\n speed = Math.round(speed * 10) / 10; // round to 1 decimal place\n return { x: new Date(f.datetime).getTime(), y: speed };\n });\n - entity: >-\n sensor.google_weather_hourly_forecasts_full_hourly_forecast\n name: Direction\n type: line\n curve: smooth\n yaxis_id: direction\n color: \"#8E24AA\"\n stroke_width: 1\n data_generator: |\n return entity.attributes.forecasts.map(f => {\n let direction = Math.round(f.wind_bearing); // round to nearest integer\n return { x: new Date(f.datetime).getTime(), y: direction };\n });\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n entity: sensor.forecast_wind_speed\n icon: mdi:weather-windy\n primary: >\n Wind: {{ states('sensor.forecast_wind_speed') }} {{\n state_attr('weather.home', 'wind_speed_unit') }}\n secondary: >\n {% set s = states('sensor.forecast_wind_speed') |\n float(0) %} {% set d =\n states('sensor.forecast_wind_direction') | float(0) %}\n {% if s < 5 %}\n Calm - Smooth air\n {% elif s < 20 %}\n Breezy - Light gusts\n {% elif s < 40 %}\n Windy - Secure items\n {% elif s < 60 %}\n Strong - Use caution\n {% else %}\n Gale - Stay indoors\n {% endif %} ({{ d | round(0) }}°)\n color: >\n {% set s = states('sensor.forecast_wind_speed') |\n float(0) %} {% if s < 5 %}\n green\n {% elif s < 20 %}\n yellow\n {% elif s < 40 %}\n orange\n {% elif s < 60 %}\n red\n {% else %}\n Green Bokeh\n {% endif %}\n features_position: bottom\n id: wind\n - title: Radar\n icon: m3of:radar\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Radar\n - subtitle: >-\n {% set w = states.weather.home.attributes %}🌡️ {{\n w.temperature }}{{ w.temperature_unit }} 💧 Humidity: {{\n w.humidity }}% 👁️ Visibility: {{ w.visibility }}km ☁️\n Clouds: {{ w.cloud_coverage | round }}% 💨 Wind: {{\n w.wind_speed }} {{ w.wind_speed_unit }} 🌤️ UV index: {{\n w.uv_index }}\n - type: custom:mod-card\n card:\n type: iframe\n url: >-\n https://embed.windy.com/embed2.html?lat=x&lon=y&width=800&height=600\n style: |\n ha-card {\n padding: 0;\n height: 350px !important; /* fix height */\n width: 100% !important;\n overflow: hidden;\n }\n iframe {\n width: 100% !important;\n height: 100% !important;\n }\n - title: Lunar\n icon: m3of:moon-stars\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Lunar Cycle & Visibility\n - subtitle: \"{{ states ('sensor.moon_summary') }}\"\n - type: custom:lunar-phase-card\n entity: \"\"\n 12hr_format: true\n calendar_modal: false\n compact_view: true\n default_card: base\n hide_buttons: false\n mile_unit: false\n moon_position: left\n number_decimals: 2\n selected_language: en\n show_background: false\n southern_hemisphere: false\n use_custom: false\n use_default: true\n use_entity: false\n graph_config:\n graph_type: default\n y_ticks: false\n x_ticks: false\n show_time: true\n show_Temp: true\n show_highest: true\n y_ticks_position: left\n y_ticks_step_size: 30\n time_step_size: 30\n font_customize:\n header_font_size: medium\n header_font_style: capitalize\n label_font_size: small\n label_font_style: none\n label_font_color: \"\"\n hide_label: false\n latitude: -37.6421739\n longitude: 175.527482\n location:\n city: \"\"\n country: New Zealand\n custom_background: >-\n https://cdn.jsdelivr.net/gh/ngocjohn/lunar-phase-card@1.7.3/background/moon_bg_2.png\n" }, { "path": "assets/Overview Page - Alarmo & Notificaton Chip", "content": "type: custom:mod-card\nuix:\n style: |\n ha-card {\n\n animation: fadeInRight 0.5s ease-out 0.5s;\n }\n @keyframes fadeInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\ncard:\n type: custom:vertical-stack-in-card\n cards:\n - type: conditional\n conditions:\n - condition: state\n entity: media_player.spotify_reynaldi_sutrisno\n state: playing\n card:\n type: custom:simple-swipe-card\n auto_hide_pagination: 0\n auto_height: true\n cards:\n - type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Music Player\n title_font_size: 20px\n - type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: triggered\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Triggered\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:bell-ring\n icon_color: \"#d14f3a\"\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: armed_away\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Armed\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-lock\n icon_color: \"#69ac5a\"\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: arming\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Arming\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield\n icon_color: \"#efa340\"\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: pending\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Pending\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-outline\n icon_color: \"#efa340\"\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: disarmed\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-off\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.geonet_nz_quakes_37_6421739_175_527482\n above: 0\n chip:\n type: template\n entity: geonet.\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: mdi:earth\n icon_color: >\n {% set mag =\n state_attr('sensor.geonet_nz_quakes_37_6421739_175_527482',\n 'magnitude') | float(0) %} {% if mag >= 6.0 %}\n #D32F2F {% elif mag >= 5.0 %} #F4511E {% elif mag >=\n 4.0 %} #FB8C00 {% elif mag >= 3.0 %} #F9A825 {% elif\n mag >= 2.0 %} #FBC02D {% else %} #388E3C {% endif %}\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.volcano_rotorua\n above: 0\n chip:\n type: template\n entity: sensor.volcano_rotorua\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: >\n {{ state_attr('sensor.volcano_rotorua', 'icon') or\n 'mdi:image-filter-hdr' }}\n icon_color: >\n {% set level = states('sensor.volcano_rotorua') |\n int %}\n\n {% if level == 5 %} red\n\n {% elif level == 4 %} deep-orange\n\n {% elif level == 3 %} orange\n\n {% elif level == 2 %} amber\n\n {% elif level == 1 %} yellow\n\n {% else %} green\n\n {% endif %}\n - type: conditional\n conditions:\n - condition: state\n entity: sensor.home_metservice_weather_warnings\n state_not: unknown\n chip:\n type: template\n entity: sensor.home_metservice_weather_warnings\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: mdi:alert\n icon_color: orange\n - type: template\n entity: sensor.active_notification_count\n icon: mdi:bell\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n hold_action:\n action: none\n uix:\n style: >\n ha-card {\n position: relative;\n }\n\n\n {% set notifications =\n states('sensor.active_notification_count') | int %}\n\n {% if notifications > 0 %}\n\n ha-card:after {\n content: \"{{ notifications }}\";\n position: absolute;\n top: -3px;\n right: -3px;\n background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent);\n color: var(--md-sys-color-primary);\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 10px;\n line-height: 16px;\n text-align: center;\n display: inline-block;\n font-weight: bold;\n } {% endif %}\n alignment: end\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 20px;\n right: 5px;\n }\n - type: custom:mediocre-massive-media-player-card\n entity_id: media_player.spotify_reynaldi_sutrisno\n use_art_colors: true\n mode: panel\n action:\n tap_action:\n action: url\n url_path: spotify://home\n options:\n show_volume_step_buttons: true\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n tap_action:\n action: url\n url_path: \" intent:#Intent;launchFlags=0x10000000;component=com.spotify.music/.MainActivity;end\"\n icon: mdi:spotify\n content: Open Spotify\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' }};\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n title_font_size: 20px\n variables:\n title: Calendar\n navigation_path: /tablet-dashboard/calendar\n - type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: triggered\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Triggered\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:bell-ring\n icon_color: \"#d14f3a\"\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: armed_away\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Armed\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-lock\n icon_color: \"#69ac5a\"\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: arming\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Arming\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield\n icon_color: \"#efa340\"\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: pending\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Pending\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-outline\n icon_color: \"#efa340\"\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: disarmed\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-off\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.geonet_nz_quakes_37_6421739_175_527482\n above: 0\n chip:\n type: template\n entity: geonet.\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: mdi:earth\n icon_color: >\n {% set mag =\n state_attr('sensor.geonet_nz_quakes_37_6421739_175_527482',\n 'magnitude') | float(0) %} {% if mag >= 6.0 %}\n #D32F2F {% elif mag >= 5.0 %} #F4511E {% elif mag >=\n 4.0 %} #FB8C00 {% elif mag >= 3.0 %} #F9A825 {% elif\n mag >= 2.0 %} #FBC02D {% else %} #388E3C {% endif %}\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.volcano_rotorua\n above: 0\n chip:\n type: template\n entity: sensor.volcano_rotorua\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: >\n {{ state_attr('sensor.volcano_rotorua', 'icon') or\n 'mdi:image-filter-hdr' }}\n icon_color: >\n {% set level = states('sensor.volcano_rotorua') |\n int %}\n\n {% if level == 5 %} red\n\n {% elif level == 4 %} deep-orange\n\n {% elif level == 3 %} orange\n\n {% elif level == 2 %} amber\n\n {% elif level == 1 %} yellow\n\n {% else %} green\n\n {% endif %}\n - type: conditional\n conditions:\n - condition: state\n entity: sensor.home_metservice_weather_warnings\n state_not: unknown\n chip:\n type: template\n entity: sensor.home_metservice_weather_warnings\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: mdi:alert\n icon_color: orange\n - type: template\n entity: sensor.active_notification_count\n icon: mdi:bell\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n hold_action:\n action: none\n uix:\n style: >\n ha-card {\n position: relative;\n } {% set notifications =\n states('sensor.active_notification_count') | int %}\n\n {% if notifications > 0 %}\n\n ha-card:after {\n content: \"{{ notifications }}\";\n position: absolute;\n top: -3px;\n right: -3px;\n background-color: var(--md-sys-color-primary);\n color: var(--md-sys-color-surface-variant);\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 10px;\n line-height: 16px;\n text-align: center;\n display: inline-block;\n font-weight: bold;\n } {% endif %}\n alignment: end\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 20px;\n right: 5px;\n }\n - entities:\n - entity: calendar.christina\n accent_color: \"#ff6a6a\"\n - entity: calendar.reynaldi_sutrisno_rs16_gmail_com\n accent_color: \"#71c8fe\"\n - entity: calendar.house_maintenance\n accent_color: \"#d3f37f\"\n - entity: calendar.new_zealand_holidays\n accent_color: \"#f9da4e\"\n days_to_show: 6\n compact_events_to_show: 6\n background_color: transparent\n vertical_line_width: 5px\n event_spacing: 6px\n first_day_of_week: monday\n show_week_numbers: iso\n week_number_color: var(--md-sys-color-primary)\n week_number_background_color: var(--md-sys-color-on-primary)\n month_separator_width: 1px\n month_separator_color: var(--md-sys-color-primary)\n today_indicator: pulse\n today_indicator_position: 10% 50%\n today_indicator_color: var(--md-sys-color-primary)\n weekday_font_size: 12px\n month_font_size: 10px\n show_countdown: true\n show_progress_bar: true\n progress_bar_color: var(--md-sys-color-primary)\n weather:\n position: event\n date:\n show_conditions: true\n show_high_temp: true\n show_low_temp: false\n icon_size: 14px\n font_size: 12px\n color: var(--primary-text-color)\n event:\n show_conditions: true\n show_temp: true\n icon_size: 14px\n font_size: 12px\n color: var(--primary-text-color)\n entity: weather.home\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/calendar\n type: custom:calendar-card-pro\n height: 435px\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Backyard\n navigation_path: /tablet-dashboard/camera\n title_font_size: 20px\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password$@192.168.1.148/h264Preview_01_main#video=copy#audio=opus\n entity_id_light_one: switch.patio_main_switch_la\n light_one_icon: m3of:lightbulb\n view_layout:\n grid-area: camera4\n - type: conditional\n conditions:\n - condition: state\n entity: media_player.spotify_reynaldi_sutrisno\n state_not: playing\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Calendar\n navigation_path: /tablet-dashboard/calendar\n title_font_size: 20px\n - type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: triggered\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Triggered\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:bell-ring\n icon_color: \"#d14f3a\"\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: armed_away\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Armed\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-lock\n icon_color: \"#69ac5a\"\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: arming\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Arming\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield\n icon_color: \"#efa340\"\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: pending\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Pending\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-outline\n icon_color: \"#efa340\"\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: disarmed\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-off\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.geonet_nz_quakes_37_6421739_175_527482\n above: 0\n chip:\n type: template\n entity: geonet.\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: mdi:earth\n icon_color: >\n {% set mag =\n state_attr('sensor.geonet_nz_quakes_37_6421739_175_527482',\n 'magnitude') | float(0) %} {% if mag >= 6.0 %} #D32F2F\n {% elif mag >= 5.0 %} #F4511E {% elif mag >= 4.0 %}\n #FB8C00 {% elif mag >= 3.0 %} #F9A825 {% elif mag >= 2.0\n %} #FBC02D {% else %} #388E3C {% endif %}\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.volcano_rotorua\n above: 0\n chip:\n type: template\n entity: sensor.volcano_rotorua\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: >\n {{ state_attr('sensor.volcano_rotorua', 'icon') or\n 'mdi:image-filter-hdr' }}\n icon_color: |\n {% set level = states('sensor.volcano_rotorua') | int %}\n {% if level == 5 %} red\n {% elif level == 4 %} deep-orange\n {% elif level == 3 %} orange\n {% elif level == 2 %} amber\n {% elif level == 1 %} yellow\n {% else %} green\n {% endif %}\n - type: conditional\n conditions:\n - condition: state\n entity: sensor.home_metservice_weather_warnings\n state_not: unknown\n chip:\n type: template\n entity: sensor.home_metservice_weather_warnings\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: mdi:alert\n icon_color: orange\n - type: template\n entity: sensor.active_notification_count\n icon: mdi:bell\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n hold_action:\n action: none\n uix:\n style: >\n ha-card {\n position: relative;\n } {% set notifications =\n states('sensor.active_notification_count') | int %}\n\n {% if notifications > 0 %}\n\n ha-card:after {\n content: \"{{ notifications }}\";\n position: absolute;\n top: -2px;\n right: 0px;\n background-color: var(--md-sys-color-on-primary);\n color: var(--md-sys-color-primary);\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 10px;\n line-height: 16px;\n text-align: center;\n display: inline-block;\n font-weight: bold;\n } {% endif %}\n alignment: end\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 20px;\n right: 5px;\n }\n - entities:\n - entity: calendar.christina\n accent_color: \"#ff6a6a\"\n - entity: calendar.reynaldi_sutrisno_rs16_gmail_com\n accent_color: \"#71c8fe\"\n - entity: calendar.house_maintenance\n accent_color: \"#d3f37f\"\n - entity: calendar.new_zealand_holidays\n accent_color: \"#f9da4e\"\n days_to_show: 6\n compact_events_to_show: 6\n background_color: transparent\n vertical_line_width: 5px\n event_spacing: 6px\n first_day_of_week: monday\n show_week_numbers: iso\n week_number_color: var(--md-sys-color-primary)\n week_number_background_color: var(--md-sys-color-on-primary)\n month_separator_width: 1px\n month_separator_color: var(--md-sys-color-primary)\n today_indicator: pulse\n today_indicator_position: 10% 50%\n today_indicator_color: var(--md-sys-color-primary)\n weekday_font_size: 12px\n month_font_size: 10px\n show_countdown: true\n show_progress_bar: true\n progress_bar_color: var(--md-sys-color-primary)\n weather:\n position: event\n date:\n show_conditions: true\n show_high_temp: true\n show_low_temp: false\n icon_size: 14px\n font_size: 12px\n color: var(--primary-text-color)\n event:\n show_conditions: true\n show_temp: true\n icon_size: 14px\n font_size: 12px\n color: var(--primary-text-color)\n entity: weather.home\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/calendar\n type: custom:calendar-card-pro\n height: 430px\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Backyard\n navigation_path: /tablet-dashboard/camera\n title_font_size: 20px\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password$@192.168.1.148/h264Preview_01_main#video=copy#audio=opus\n entity_id_light_one: switch.patio_main_switch_la\n light_one_icon: m3of:lightbulb\n view_layout:\n grid-area: camera4\nview_layout:\n grid-area: calendar_notification\n" }, { "path": "assets/Overview Page - Calendar", "content": "entities:\n - entity: calendar.calendar_1\n accent_color: \"#ff6a6a\"\n - entity: calendar.calendar_2\n accent_color: \"#71c8fe\"\n - entity: calendar.calendar_3\n accent_color: \"#d3f37f\"\n - entity: calendar.calendar_4\n accent_color: \"#f9da4e\"\ndays_to_show: 6\ncompact_events_to_show: 6\nbackground_color: transparent\nvertical_line_width: 5px\nevent_spacing: 6px\nfirst_day_of_week: monday\nshow_week_numbers: iso\nweek_number_color: var(--md-sys-color-on-primary)\nweek_number_background_color: var(--md-sys-color-primary)\nmonth_separator_width: 1px\nmonth_separator_color: var(--md-sys-color-tertiary)\ntoday_indicator: pulse\ntoday_indicator_position: 10% 50%\ntoday_indicator_color: var(--md-sys-color-primary)\nweekday_font_size: 12px\nmonth_font_size: 10px\nshow_countdown: true\nshow_progress_bar: true\nprogress_bar_color: var(--md-sys-color-primary)\nweather:\n position: event\n date:\n show_conditions: true\n show_high_temp: true\n show_low_temp: false\n icon_size: 14px\n font_size: 12px\n color: var(--primary-text-color)\n event:\n show_conditions: true\n show_temp: true\n icon_size: 14px\n font_size: 12px\n color: var(--primary-text-color)\n entity: weather.forecast_home\ntap_action:\n action: navigate\n navigation_path: /tablet-dashboard/calendar\ntype: custom:calendar-card-pro\nheight: 435px\n" }, { "path": "assets/Overview Page - Climate, Toggles, Irrigation, Hue Scene Tabs", "content": "type: custom:mod-card\nuix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.5s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\ncard:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:simple-tabs\n pre-load: true\n alignment: start\n active-background: var(--md-sys-color-primary)\n active-text-color: var(--md-sys-color-on-primary)\n text-color: var(--primary-text-color)\n tabs:\n - title: Climate\n icon: m3of:heat-pump\n cards:\n - type: custom:vertical-stack-in-card\n cards:\n - type: grid\n square: false\n columns: 2\n cards:\n - type: custom:mushroom-template-card\n entity: sensor.house_average_temperature\n primary: >\n {{ states(entity) | round(1) }} {{\n state_attr('weather.home', 'temperature_unit') }}\n secondary: |\n Indoor\n icon: |\n {% set hvac_mode = states('climate.heat_pump') %}\n {% if hvac_mode == 'heat' %} mdi:fire\n {% elif hvac_mode == 'cool' %} mdi:snowflake\n {% elif hvac_mode == 'fan_only' %} mdi:fan\n {% else %} m3of:thermometer\n {% endif %}\n icon_color: |\n {% set hvac_mode = states('climate.heat_pump') %}\n {% if hvac_mode == 'heat' %} #FF6F22\n {% elif hvac_mode == 'cool' %} #2196F3\n {% elif hvac_mode == 'fan_only' %} #029688\n {% else %}\n {% set temp = states('sensor.house_average_temperature') | float %}\n {% if temp < 13 %}\n #B4A5B7\n {% elif temp < 16 %} \n #DBC9DE\n {% elif temp < 19 %}\n #ACDCF6\n {% elif temp < 22 %}\n #D2E5DE\n {% elif temp < 24 %}\n #FFE7A3\n {% elif temp < 27 %}\n #F7C48D\n {% else %}\n #E37575\n {% endif %}\n {% endif %}\n tap_action:\n action: more-info\n uix:\n style: |\n {% set hvac_mode = states('climate.heat_pump') %}\n ha-card {\n {% if hvac_mode == 'heat' %}\n animation: heat-flicker 1.5s ease-in-out infinite;\n {% elif hvac_mode == 'cool' %}\n animation: cool-shimmer 2s ease-in-out infinite;\n {% elif hvac_mode == 'fan_only' %}\n animation: fan-wobble 2s ease-in-out infinite;\n {% endif %}\n }\n\n @keyframes heat-flicker {\n 0%, 100% { \n transform: scale(1);\n filter: brightness(1);\n }\n 25% { \n transform: scale(1.02);\n filter: brightness(1.1);\n }\n 50% { \n transform: scale(1);\n filter: brightness(0.95);\n }\n 75% { \n transform: scale(1.02);\n filter: brightness(1.05);\n }\n }\n\n @keyframes cool-shimmer {\n 0%, 100% { \n transform: translateY(0px);\n opacity: 1;\n }\n 50% { \n transform: translateY(-2px);\n opacity: 0.9;\n }\n }\n\n @keyframes fan-wobble {\n 0%, 100% { \n transform: rotate(0deg) scale(1);\n }\n 25% { \n transform: rotate(1deg) scale(1.01);\n }\n 50% { \n transform: rotate(0deg) scale(1.02);\n }\n 75% { \n transform: rotate(-1deg) scale(1.01);\n }\n }\n\n mushroom-shape-icon {\n {% if hvac_mode == 'heat' %}\n animation: icon-heat-pulse 1s ease-in-out infinite !important;\n {% elif hvac_mode == 'cool' %}\n animation: icon-cool-float 3s ease-in-out infinite !important;\n {% elif hvac_mode == 'fan_only' %}\n animation: icon-fan-rotate 3s linear infinite !important;\n {% endif %}\n }\n\n @keyframes icon-heat-pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.15); }\n }\n\n @keyframes icon-cool-float {\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\n 50% { transform: translateY(-3px) rotate(5deg); }\n }\n\n @keyframes icon-fan-rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n - type: custom:mushroom-template-card\n entity: sensor.outdoor_temperature\n primary: >\n {{ states(entity) | round(1) }} {{\n state_attr('weather.home', 'temperature_unit') }}\n secondary: |\n Outdoor\n icon: \"{{ states('sensor.weather_condition_icon') }}\"\n icon_color: >\n {% set temp = state_attr('weather.home', 'temperature')\n | float %}\n\n {% if temp < 13 %}\n #988C9B\n {% elif temp < 16 %} \n #BAABBD\n {% elif temp < 19 %}\n #92BB D1\n {% elif temp < 22 %}\n #B2C4BD\n {% elif temp < 24 %}\n #D8C48A\n {% elif temp < 27 %}\n #D2A676\n {% else %}\n #C26161\n {% endif %}\n tap_action:\n action: more-info\n - type: custom:config-template-card\n entities:\n - climate.heat_pump\n - sensor.house_average_temperature\n - sensor.outdoor_temperature\n variables:\n - states['climate.heat_pump'].state\n - states['sensor.house_average_temperature'].state\n - states['sensor.outdoor_temperature'].state\n card:\n type: custom:mini-graph-card\n entities:\n - entity: sensor.house_average_temperature\n name: Indoor\n color: |-\n ${vars[0] === 'heat' ? '#FF6F22' : \n (vars[0] === 'cool' ? '#2196F3' : \n (vars[0] === 'fan_only' ? '#029688' : \n (vars[1] < 13 ? '#B4A5B7' :\n (vars[1] < 16 ? '#DBC9DE' :\n (vars[1] < 19 ? '#ACDCF6' :\n (vars[1] < 22 ? '#D2E5DE' :\n (vars[1] < 24 ? '#FFE7A3' :\n (vars[1] < 27 ? '#F7C48D' : '#E37575'))))))))}\n - entity: sensor.outdoor_temperature\n name: Outdoor\n color: |-\n ${vars[2] < 13 ? '#988C9B' :\n (vars[2] < 16 ? '#BAABBD' : \n (vars[2] < 19 ? '#92BBD1' :\n (vars[2] < 22 ? '#B2C4BD' :\n (vars[2] < 24 ? '#D8C48A' :\n (vars[2] < 27 ? '#D2A676' :'#C26161')))))}\n y_axis: secondary\n hours_to_show: 24\n line_width: 3\n font_size: 50\n animate: true\n show:\n name: false\n icon: false\n state: false\n legend: false\n fill: fade\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-climate-card\n entity: climate.heat_pump\n primary_info: none\n secondary_info: none\n icon_type: none\n show_temperature_control: true\n - type: custom:mushroom-climate-card\n entity: climate.heat_pump\n primary_info: none\n secondary_info: none\n icon_type: none\n hvac_modes:\n - cool\n - heat\n - fan_only\n - \"off\"\n - title: Toggles\n icon: m3of:automation\n card:\n type: custom:simple-swipe-card\n auto_hide_pagination: 0\n auto_height: true\n cards:\n - type: custom:vertical-stack-in-card\n cards:\n - type: custom:button-card\n entity: sensor.disabled_room_occupancy_count\n name: Room Occupancy\n show_state: false\n show_icon: false\n show_label: true\n label: |-\n [[[ \n const disabled = parseInt(entity.state);\n if (disabled === 0) return 'All rooms active';\n if (disabled === 1) return '1 room disabled';\n return `${disabled} rooms disabled`;\n ]]]\n styles:\n card:\n - background: >-\n var(--ha-card-background,\n var(--card-background-color, white))\n - border-radius: var(--ha-card-border-radius, 12px)\n - padding: 12px\n name:\n - text-align: center\n - font-size: 16px\n - font-weight: bold\n label:\n - text-align: center\n - font-size: 14px\n - color: var(--secondary-text-color)\n tap_action:\n action: none\n - type: custom:mushroom-chips-card\n alignment: center\n chips:\n - type: template\n entity: input_boolean.baby_room_occupancy\n icon: m3of:stroller\n icon_color: >-\n {% if is_state(entity, 'on') %} #f385bc {% else %}\n #a8a8a8 {% endif %}\n tap_action:\n action: toggle\n content: \"{% if is_state(entity, 'on') %}Baby{% endif %}\"\n - type: template\n entity: input_boolean.master_bedroom_occupancy\n icon: m3of:bed\n icon_color: >-\n {% if is_state(entity, 'on') %}#89CFF0 {% else %}\n #a8a8a8 {% endif %}\n tap_action:\n action: toggle\n content: \"{% if is_state(entity, 'on') %}Master{% endif %}\"\n - type: template\n entity: input_boolean.single_guest_room_occupancy\n icon: m3of:person-3\n icon_color: >-\n {% if is_state(entity, 'on') %} #FFA500 {% else %}\n #a8a8a8 {% endif %}\n tap_action:\n action: toggle\n content: \"{% if is_state(entity, 'on') %}Single{% endif %}\"\n - type: template\n entity: input_boolean.multiple_guest_room_occupancy\n icon: m3of:groups-2\n icon_color: >-\n {% if is_state(entity, 'on') %}#A52A2A {% else %}\n #a8a8a8 {% endif %}\n tap_action:\n action: toggle\n content: \"{% if is_state(entity, 'on') %}Multiple{% endif %}\"\n - type: template\n entity: input_boolean.play_room_occupancy\n icon: mdi:gamepad-variant\n icon_color: >-\n {% if is_state(entity, 'on') %}#9F2B68 {% else %}\n #a8a8a8 {% endif %}\n tap_action:\n action: toggle\n content: \"{% if is_state(entity, 'on') %}Play{% endif %}\"\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: custom:vertical-stack-in-card\n cards:\n - type: custom:button-card\n entity: sensor.disabled_presence_automation_count\n name: Presence Status\n show_state: false\n show_icon: false\n show_label: true\n label: |-\n [[[ \n const disabled = parseInt(entity.state);\n if (disabled === 0) return 'All rooms active';\n if (disabled === 1) return '1 room disabled';\n return `${disabled} rooms disabled`;\n ]]]\n styles:\n card:\n - background: >-\n var(--ha-card-background,\n var(--card-background-color, white))\n - border-radius: var(--ha-card-border-radius, 12px)\n - padding: 12px\n name:\n - text-align: center\n - font-size: 16px\n - font-weight: bold\n label:\n - text-align: center\n - font-size: 14px\n - color: var(--secondary-text-color)\n tap_action:\n action: none\n features_position: bottom\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: binary_sensor.presence_active_la\n icon: mdi:sofa\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n var(--primary-text-color)\n {% endif %}\n tap_action:\n action: perform-action\n perform_action: script.toggle_presence_sensor_la\n target: {}\n content: |-\n {% if is_state(entity, 'on') %} \n Living\n {% else %}\n {% endif %}\n - type: template\n entity: automation.room_presence_master_bedroom\n icon: m3of:bed\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Master\n {% else %}\n {% endif %}\n - type: template\n entity: automation.room_presence_baby_room\n icon: m3of:stroller\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Baby\n {% else %}\n {% endif %} \n - type: template\n entity: automation.room_presence_single_guest_room\n icon: m3of:person-3\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Single\n {% else %}\n {% endif %}\n - type: template\n entity: automation.room_presence_multiple_guest_room\n icon: m3of:groups-2\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Multiple\n {% else %}\n {% endif %}\n - type: template\n entity: automation.room_presence_office\n icon: m3of:computer\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Office\n {% else %}\n {% endif %}\n alignment: center\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: custom:vertical-stack-in-card\n cards:\n - type: custom:button-card\n entity: sensor.disabled_driveway_camera_count\n name: Driveway Security\n show_state: false\n show_icon: false\n show_label: true\n label: |-\n [[[ \n const disabled = parseInt(entity.state);\n if (disabled === 0) return 'All cameras active';\n if (disabled === 1) return '1 camera disabled';\n return `${disabled} cameras disabled`;\n ]]]\n styles:\n card:\n - background: >-\n var(--ha-card-background,\n var(--card-background-color, white))\n - border-radius: var(--ha-card-border-radius, 12px)\n - padding: 12px\n name:\n - text-align: center\n - font-size: 16px\n - font-weight: bold\n label:\n - text-align: center\n - font-size: 14px\n - color: var(--secondary-text-color)\n tap_action:\n action: none\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: automation.driveway_camera_person_notification\n icon: mdi:account\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Person\n {% else %}\n {% endif %}\n - type: template\n entity: automation.driveway_camera_vehicle_notification\n icon: mdi:car\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Vehicle\n {% else %}\n {% endif %}\n alignment: center\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - title: Irrigation\n icon: m3of:sprinkler\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 2px\n - type: custom:mushroom-template-card\n primary: Open Irrigation Page\n secondary: Tap to navigate to irrigation\n icon: m3of:sprinkler\n features_position: bottom\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/irrigation\n - title: Hue Scenes\n icon: mdi:layers\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 2px\n - type: custom:mushroom-template-card\n primary: Open Scenes Page\n secondary: Tap to navigate to scene\n icon: mdi:layers\n features_position: bottom\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/scenes\n hide_inactive_tab_titles: true\nview_layout:\n grid-area: simple_tab\n" }, { "path": "assets/Overview Page - Live Camera Feeds", "content": "type: vertical-stack\ncards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Left Walkway\n navigation_path: /tablet-dashboard/camera\n - type: custom:streamline-card\n template: camera_generic_with_chips_card\n variables:\n camera_entity: camera.left_walkway_camera_fluent\n entity_id_light_one: switch.outdoor_light_switch_lr\n light_one_icon: mdi:outdoor-lamp\n entity_id_light_two: switch.rear_light_switch_grg\n light_two_icon: mdi:outdoor-lamp\n" }, { "path": "assets/Overview Page - Media Card", "content": "type: custom:mediocre-massive-media-player-card\nentity_id: media_player.your_media\nmode: card\naction: {}\nspeaker_group:\n entities:\n - entity: media_player.living_area_soundbar\n name: Living Area Soundbar\n - entity: media_player.nestmini8699\n name: Master Bedroom\nsearch:\n enabled: true\n show_favorites: false\ncard_mod:\n class: filled\n" }, { "path": "assets/Overview Page - Room Cards", "content": "type: custom:vertical-stack-in-card\ncards:\n - type: conditional\n conditions:\n - entity: input_boolean.room_toggle_one\n state: \"on\"\n card:\n type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Garage\n icon: mdi:garage-variant\n entity_id_temperature: sensor.garage_temperature\n entity_id_humidity: sensor.garage_humidity\n entity_id_lights: switch.lights_grg\n lights_icon: hue:recessed-ceiling\n lights_count_sensor: sensor.lights_grg_count\n entity_id_windows: group.windows_grg\n windows_count_sensor: sensor.windows_grg_count\n entity_id_doors: group.doors_grg\n doors_count_sensor: sensor.doors_grg_count\n navigation_path: /tablet-dashboard/garage/\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Living Area\n icon: mdi:sofa\n entity_id_temperature: sensor.living_room_temperature\n entity_id_humidity: sensor.living_area_humidity\n entity_id_ac_main: climate.heat_pump\n entity_id_ac: climate.living_room\n entity_id_lights: light.lights_la\n lights_icon: hue:recessed-ceiling\n lights_count_sensor: sensor.lights_la_count\n entity_id_windows: group.windows_la\n windows_count_sensor: sensor.windows_la_count\n entity_id_doors: group.doors_la\n doors_count_sensor: sensor.doors_la_count\n navigation_path: /tablet-dashboard/living-area/\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.room_toggle_two\n state: \"on\"\n card:\n type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Attic\n icon: mdi:home-roof\n entity_id_temperature: sensor.attic_temperature\n entity_id_humidity: sensor.attic_humidity\n entity_id_lights: switch.light_switch_atc\n lights_count_sensor: sensor.lights_atc_count\n lights_icon: hue:recessed-ceiling\n entity_id_doors: binary_sensor.door_sensor_atc_contact\n doors_count_sensor: sensor.doors_atc_count\n navigation_path: /tablet-dashboard/attic\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Entrance\n icon: mdi:table-furniture\n entity_id_temperature: sensor.living_room_temperature\n entity_id_humidity: sensor.living_area_humidity\n entity_id_lights: light.lights_etr_all\n lights_count_sensor: sensor.lights_etr_count\n lights_icon: mdi:lightbulb-group\n entity_id_doors: binary_sensor.door_sensor_etr_contact\n doors_count_sensor: sensor.doors_etr_count\n navigation_path: /tablet-dashboard/entrance/\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.room_toggle_three\n state: \"on\"\n card:\n type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Driveway\n icon: mdi:car\n entity_id_temperature: sensor.outdoor_temperature\n entity_id_humidity: sensor.outdoor_humidity\n entity_id_lights: group.light_switches_drw\n lights_count_sensor: sensor.lights_drw_count\n lights_icon: hue:recessed-ceiling\n entity_id_doors: group.doors_drw\n doors_count_sensor: sensor.doors_drw_count\n navigation_path: /tablet-dashboard/driveway/\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Patio\n icon: mdi:grass\n entity_id_temperature: sensor.outdoor_temperature\n entity_id_humidity: sensor.outdoor_humidity\n entity_id_lights: switch.lights_patio\n lights_count_sensor: sensor.lights_otd_count\n lights_icon: hue:recessed-ceiling\n entity_id_doors: group.doors_otd\n doors_count_sensor: sensor.doors_otd_count\n navigation_path: /tablet-dashboard/patio/\nview_layout:\n grid-area: room1\n" }, { "path": "assets/Overview Page - Weather Forecast", "content": "type: custom:mod-card\nuix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.8s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\ncard:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_navigation_card\n variables:\n title: Weather Forecast\n subtitle: \"{{ states ('sensor.next_rain_summary') }}\"\n navigation_path: /tablet-dashboard/notifications\n title_font_size: 20px\n - type: custom:clock-weather-card-hui-icons\n entity: weather.home\n sun_entity: sun.sun\n temperature_sensor: sensor.outdoor_temperature\n humidity_sensor: sensor.outdoor_humidity\n forecast_rows: 5\n locale: en-NZ\n time_pattern: HH:mm\n time_format: 12\n date_pattern: ccc, d.MM.yy\n hide_today_section: true\n hide_forecast_section: false\n show_humidity: false\n hide_clock: true\n hide_date: false\n hourly_forecast: false\n use_browser_time: false\n time_zone: null\n show_decimal: false\nview_layout:\n grid-area: weather\n" }, { "path": "assets/Overview Page - greeting", "content": "type: vertical-stack\ncards:\n - type: custom:mushroom-title-card\n alignment: start\n title: |\n {{ now().strftime('%a %b %-d - %-I:%M %p') }}\n uix:\n style: |\n ha-card {\n\n animation: fadeInDown 1.0s ease-out;\n }\n @keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n - type: custom:paper-buttons-row\n styles:\n justify-content: flex-start\n flex-wrap: wrap\n font-size: 0.9em\n line-height: 1.2em\n margin: 6px 0 2px 0\n width: 100%\n buttons:\n - layout: name|icon\n entity: weather.home\n name: >-\n {% set temp = state_attr('weather.home', 'temperature') %} {% set unit\n = state_attr('weather.home', 'temperature_unit') %} {% set condition =\n states('weather.forecast_home') | title %} {% if\n is_state('binary_sensor.outdoor_rain_sensor_water_leak', 'on') %}\n {{ temp }} {{ unit }}, Raining\n {% else %}\n {{ temp }} {{ unit }}, {{ condition }}\n {% endif %}\n icon: >-\n {% if is_state('binary_sensor.outdoor_rain_sensor_water_leak', 'on')\n %}\n mdi:weather-pouring\n {% else %}\n {{ states('sensor.weather_condition_icon') }}\n {% endif %}\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n styles:\n icon:\n color: var(--md-sys-color-primary)\n name:\n color: var(--md-sys-color-primary)\n font-weight: bold\n button:\n padding: 2px 8px\n background-color: >-\n color-mix(in srgb, var(--md-sys-color-on-primary) 25%,\n transparent)\n border-radius: 24px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n animation: slideInLeft 0.3s ease-out 0.5s both\n transition: all 0.3s ease\n - layout: name\n name: ·\n styles:\n button:\n flex-basis: 1\n flex-shrink: 0\n animation: fadeIn 0.8s ease-out 1.1s both\n name:\n color: var(--primary-text-color)\n tap_action:\n action: none\n - layout: name\n entity: weather.home\n name: >-\n {% set forecast =\n state_attr('sensor.daily_weather_data_google_weather',\n 'forecast_data') %} {% if forecast is defined and\n forecast.temperature is defined %}\n {{ forecast.temperature | round(0) | int }}°🔺 / {{ forecast.templow | round(0) | int }}° {{ state_attr('weather.home', 'temperature_unit') }}🔻\n {% else %}\n N/A {{ state_attr('weather.home', 'temperature_unit') }}\n {% endif %}\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n styles:\n name:\n color: var(--md-sys-color-primary)\n font-weight: bold\n button:\n padding: 2px 8px\n background-color: >-\n color-mix(in srgb, var(--md-sys-color-on-primary) 25%,\n transparent)\n border-radius: 24px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n animation: slideInLeft 0.3s ease-out 0.9s both\n transition: all 0.3s ease\n uix:\n style: |\n ha-card {\n overflow: visible !important;\n }\n @keyframes fadeIn {\n from {\n opacity: 1;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n - type: custom:button-card\n show_entity_picture: false\n show_icon: false\n show_label: true\n entity: |\n [[[ return user.name == \"Rey\" ? \"person.rey\" : \"person.christina\";\n ]]]\n name: |\n [[[\n const hour = new Date().getHours();\n let greeting = \"\";\n if (hour >= 22 || hour < 5) greeting = \"🌘✨ Night\";\n else if (hour >= 18) greeting = \"🌙 Evening\";\n else if (hour >= 12) greeting = \"🌤️ Afternoon\";\n else greeting = \"☕ Morning\";\n const name = user.name == \"Rey\" ? \"Rey\" : \"Christina\";\n return `${greeting}, ${name}!`;\n ]]]\n label: |\n [[[\n const s = entity.state;\n if (s === \"home\") return \"Home\";\n return \"Away\";\n ]]]\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/timeline\n styles:\n card:\n - padding: 12px -2px 12px 12px\n - background: none\n - box-shadow: none\n grid:\n - grid-template-areas: \"\\\"pic n one\\\" \\\"pic l one\\\"\"\n - grid-template-rows: min-content min-content\n - grid-template-columns: 50px 1fr 150px\n name:\n - justify-self: start\n - align-self: center\n - font-size: 15px\n - padding-left: 15px\n label:\n - justify-self: start\n - align-self: start\n - font-size: 12px\n - color: var(--contrast14)\n - padding-left: 15px\n custom_fields:\n pic:\n card:\n type: custom:button-card\n entity: >\n [[[ return user.name == \"Rey\" ? \"person.rey\" : \"person.christina\";\n ]]]\n show_name: false\n show_entity_picture: true\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/timeline\n styles:\n card:\n - position: relative\n - overflow: visible\n entity_picture:\n - width: 40px\n - height: 40px\n - border-radius: 12px\n - z-index: 1\n - filter: |\n [[[\n const activeZones = ['home'];\n const state = states[entity.entity_id]?.state;\n return activeZones.includes(state)\n ? 'none'\n : 'grayscale(100%) brightness(70%)';\n ]]]\n - opacity: |\n [[[\n const activeZones = ['home'];\n const state = states[entity.entity_id]?.state;\n return activeZones.includes(state) ? '1' : '0.7';\n ]]]\n img_cell:\n - background-color: var(--contrast1)\n - width: 40px\n - height: 40px\n - border-radius: 12px\n - overflow: visible\n one:\n card:\n type: custom:button-card\n entity: >\n [[[ return user.name == \"Rey\" ? \"person.christina\" : \"person.rey\";\n ]]]\n show_name: false\n show_entity_picture: true\n tap_action:\n action: more-info\n state:\n - value: not_home\n styles:\n entity_picture:\n - filter: grayscale(100%)\n - opacity: 0.5\n styles:\n card:\n - position: relative\n - overflow: visible\n entity_picture:\n - width: 40px\n - height: 40px\n - border-radius: 12px\n - z-index: 1\n - filter: |\n [[[\n const activeZones = ['home'];\n const state = states[entity.entity_id]?.state;\n return activeZones.includes(state)\n ? 'none'\n : 'grayscale(100%) brightness(70%)';\n ]]]\n - opacity: |\n [[[\n const activeZones = ['home'];\n const state = states[entity.entity_id]?.state;\n return activeZones.includes(state) ? '1' : '0.7';\n ]]]\n img_cell:\n - background-color: var(--contrast1)\n - width: 40px\n - height: 40px\n - border-radius: 12px\n - overflow: visible\n uix:\n style: |\n ha-card {\n animation: slideDown 0.5s ease-out 0.6s both;\n }\n @keyframes slideDown {\n from { \n opacity: 1;\n transform: translateY(-4px);\n }\n to { \n opacity: 1;\n transform: translateY(0);\n }\n }\nview_layout:\n grid-area: greeting\n" }, { "path": "assets/Scene Card Example", "content": "type: custom:streamline-card\ntemplate: scene_card\nvariables:\n entity: scene.luxaflex_naar_70\n name: (Nieuw) Luxaflex beneden naar 70\n" }, { "path": "assets/Server Page - Battery Overview", "content": "type: vertical-stack\ncards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Devices\n - type: custom:auto-entities\n card:\n type: grid\n square: false\n columns: 1\n card_param: cards\n filter:\n include:\n - options:\n type: custom:mushroom-template-card\n icon: |\n {% set v = states(entity) | default(0) | int %}\n {% if v < 10 %}\n mdi:battery-alert-variant-outline\n {% elif v < 25 %}\n mdi:battery-10\n {% elif v < 40 %}\n mdi:battery-30\n {% elif v < 60 %}\n mdi:battery-50\n {% endif %}\n primary: |\n {{ states(entity) }}%\n secondary: |\n {{ state_attr(entity, 'friendly_name') }} -\n updated: {{ relative_time(states[entity].last_updated) }} ago\n icon_color: |\n {% set v = states(entity) | default(0) | int %}\n {% if v < 25 %}\n red\n {% elif v < 60 %}\n yellow\n {% endif %}\n card_mod:\n style:\n mushroom-shape-icon$: |\n .shape {\n --shape-color: transparent !important;\n }\n entity_id: \"*battery*\"\n state: < 60\n exclude:\n - options: {}\n state: \"*AAA*\"\n - options: {}\n state: \"*AA*\"\n - options: {}\n state: \"*.0%*\"\n show_empty: false\n sort:\n method: friendly_name\n" }, { "path": "assets/Server Page - Proxmox and HAOS overview", "content": "type: vertical-stack\ncards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n title: Proxmox\n subtitle: >-\n {% set cpu = states('sensor.node_pve_cpu_used') | float(0) %}{% set mem\n = states('sensor.node_pve_memory_used_percentage') | float(0) %}{% set\n temp = states('sensor.disk_pve_bc511_nvme_sk_hynix_256gb_temperature') |\n float(0) %}{% if cpu > 75 or mem > 75 or temp > 70 %}🟥 CPU: {{ cpu |\n round(1) }}% • Memory: {{ mem | round(1) }}% • NVMe: {{ temp | round(1)\n }}{{ state_attr('weather.forecast_home', 'temperature_unit') }}{%\n elif cpu > 50 or mem > 50 or temp > 55 %}🟧 CPU: {{ cpu | round(1) }}% •\n Memory: {{ mem | round(1) }}% • NVMe: {{ temp | round(1) }}{{ \n state_attr('weather.forecast_home', 'temperature_unit') }}{% else %}🟩\n CPU: {{ cpu | round(1) }}% • Memory: {{ mem | round(1) }}% • NVMe: {{\n temp | round(1) }}{{ state_attr('weather.forecast_home',\n 'temperature_unit') }}{% endif %}\n - type: horizontal-stack\n cards:\n - type: gauge\n entity: sensor.disk_pve_bc511_nvme_sk_hynix_256gb_temperature\n name: SSD Temperature\n min: 20\n max: 80\n severity:\n green: 40\n yellow: 55\n red: 70\n unit: °C\n - type: gauge\n entity: sensor.node_pve_memory_used\n name: Memory Used\n max: 16.57\n severity:\n green: 6\n yellow: 8\n red: 12\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: HA OS\n - subtitle: >-\n {% set cpu = states('sensor.qemu_haos14_2_100_cpu_used') | float(0)\n %}{% set mem = states('sensor.qemu_haos14_2_100_memory_used') |\n float(0) %}{% set health =\n states('binary_sensor.qemu_haos14_2_100_health') %}{% set boot =\n states('sensor.qemu_haos14_2_100_last_boot') %}{% if cpu > 75 or mem >\n 75 or health == 'on' %}🟥{% elif cpu > 50 or mem > 50 %}🟧{% else\n %}🟩{% endif %} CPU: {{ cpu | round(1) }}% • MEM: {{ mem | round(1)\n }}% \n Health: {{ 'OK' if health == 'off' else '❌'}} • Last Boot: {{\n as_timestamp(boot) | timestamp_custom('%d %b %H:%M') }}\n - type: horizontal-stack\n cards:\n - type: gauge\n entity: sensor.qemu_haos14_2_100_memory_free\n name: Memory Free\n max: 8.59\n severity:\n green: 6\n yellow: 3\n red: 0\n - type: gauge\n entity: sensor.qemu_haos14_2_100_memory_used\n name: Memory Used\n max: 8.59\n severity:\n green: 3\n yellow: 4\n red: 6\n" }, { "path": "assets/asset_placeholder", "content": "\n" }, { "path": "assets/streamline_templates collection", "content": "streamline_templates:\n title_card:\n variables:\n title: ''\n card:\n type: custom:mushroom-title-card\n title: '[[title]]'\n card_mod:\n style: |\n ha-card {\n --title-font-size: 20px !important;\n }\n title_subtitle_card:\n variables:\n title: ''\n subtitle: ''\n card:\n type: custom:mushroom-title-card\n title: '[[title]]'\n subtitle: '[[subtitle]]'\n card_mod:\n style: |\n ha-card {\n --title-font-size: 20px !important;\n --subtitle-font-size: 14px !important;\n }\n title_subtitle_navigation_card:\n variables:\n title: ''\n subtitle: ''\n navigation_path: ''\n card:\n type: custom:mushroom-title-card\n title: '[[title]]'\n subtitle: '[[subtitle]]'\n title_tap_action:\n action: navigate\n navigation_path: '[[navigation_path]]'\n card_mod:\n style: |\n ha-card {\n --title-font-size: 20px !important;\n --subtitle-font-size: 14px !important;\n }\n title_navigation_card:\n variables:\n title: ''\n navigation_path: ''\n card:\n type: custom:mushroom-title-card\n title: '[[title]]'\n title_tap_action:\n action: navigate\n navigation_path: '[[navigation_path]]'\n card_mod:\n style: |\n ha-card {\n --title-font-size: 20px !important;\n }\n date_clock_text_card:\n variables:\n subtitle: ''\n card:\n type: custom:mushroom-title-card\n subtitle: '[[subtitle]]'\n card_mod:\n style: |\n ha-card {\n --subtitle-font-size: 12px !important;\n }\n back_button_card:\n variables:\n navigation_path: ''\n card:\n type: custom:mushroom-chips-card\n chips:\n - type: template\n tap_action:\n action: navigate\n navigation_path: '[[navigation_path]]'\n icon: m3of:arrow-left-alt\n card_mod:\n style:\n .: |\n ha-card {\n --color: var(--md-sys-color-primary);\n --chip-background: var(--md-sys-color-on-primary);\n margin_top: 0.7em;\n }\n room_card:\n default:\n - name: ''\n - icon: ''\n - navigation_path: ''\n - entity_id_temperature: ''\n - entity_id_humidity: ''\n - entity_id_ac: ''\n - entity_id_ac_main: ''\n - entity_id_lights: ''\n - entity_id_covers: ''\n - entity_id_fans: ''\n - entity_id_doors: ''\n - entity_id_windows: ''\n - entity_id_custom_1: ''\n - entity_id_custom_2: ''\n - entity_id_custom_3: ''\n - entity_id_custom_4: ''\n - room_background: '#f5f5f5'\n - lights_count_sensor: ''\n - covers_count_sensor: ''\n - fans_count_sensor: ''\n - doors_count_sensor: ''\n - windows_count_sensor: ''\n - lights_icon: ''\n - custom_1_icon: ''\n - custom_2_icon: ''\n - custom_3_icon: ''\n - custom_4_icon: ''\n - custom_1_color: ''\n - custom_2_color: ''\n - custom_3_color: ''\n - custom_4_color: ''\n card:\n type: custom:stack-in-card\n mode: horizontal\n cards:\n - type: vertical-stack\n cards:\n - type: custom:mushroom-template-card\n primary: '[[name]]'\n secondary: >\n {% set temp = states('[[entity_id_temperature]]') %} {% set hum\n = states('[[entity_id_humidity]]') %} {% set unit =\n state_attr('weather.home', 'temperature_unit') or '°C' %} {% set\n parts = [] %} {% if temp | is_number %}\n {% set parts = parts + [temp | round(1) ~ unit] %}\n {% endif %} {% if hum | is_number %}\n {% set parts = parts + [hum | round(1) ~ '%'] %}\n {% endif %} {{ parts | join(' / ') }}\n tap_action:\n action: navigate\n navigation_path: '[[navigation_path]]'\n card_mod:\n style: |\n ha-card {\n --primary-text-color: black;\n border: 0;\n padding: 5px 0 0 5px;\n width: 500px;\n }\n - type: custom:mushroom-template-card\n entity: '[[entity_id_lights]]'\n layout: horizontal\n icon: '[[icon]]'\n icon_color: >-\n {{ 'rgba(252, 242, 212, 1)' if is_state('[[entity_id_lights]]',\n 'on') else 'rgba(91, 91, 91, 1)' }}\n tap_action:\n action: navigate\n navigation_path: '[[navigation_path]]'\n card_mod:\n style:\n ha-tile-icon$: |\n .container {\n width: 120px !important;\n height: 120px !important;\n border-radius: 50%;\n } \n .: |\n ha-tile-icon {\n --mdc-icon-size: 90px;\n }\n ha-card {\n border: none;\n margin: -8px 0 0 -28px;\n }\n - type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_ac_main]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_ac_main]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_ac]]'\n tap_action:\n action: toggle\n icon: |\n {% if is_state('[[entity_id_ac]]', 'off') %}\n m3o:heat-pump\n {% else %}\n m3of:heat-pump\n {% endif %}\n card_mod:\n style: |\n {% set ac_main = states('[[entity_id_ac_main]]') %}\n {% set ac = states('[[entity_id_ac]]') %}\n ha-card {\n --chip-background: \n {% if ac == 'heat_cool' and ac_main == 'cool' %}\n #b5e0f7\n {% elif ac == 'heat_cool' and ac_main == 'heat' %}\n #fa6f66\n {% elif ac == 'heat_cool' and ac_main == 'fan_only' %}\n #c3fae8\n {% elif ac == 'heat_cool' and ac_main == 'dry' %}\n #cfba74\n {% elif ac == 'heat_cool' and ac_main == 'off' %}\n #FFFFFF\n {% else %}\n #353535\n {% endif %};\n --color: {% if ac == 'off' %} #dbdbdb {% else %} #353535 {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n border: 0;\n box-shadow: none;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_lights]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_lights]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_lights]]'\n tap_action:\n action: more-info\n icon: '[[lights_icon]]'\n content: >-\n {{ states('[[lights_count_sensor]]') if\n states('[[lights_count_sensor]]') != '0' else '' }}\n card_mod:\n style: |\n {% set light_state = states('[[entity_id_lights]]') %}\n {% set is_on = light_state == 'on' %}\n ha-card {\n --chip-background: {% if is_on %} #fcf2d4 {% else %} #353535 {% endif %};\n --color: {% if is_on %} #5b5326 {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_on %} #5b5326 {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_covers]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_covers]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_covers]]'\n tap_action:\n action: more-info\n icon: >\n {% if is_state('[[entity_id_covers]]', 'open') or\n is_state('[[entity_id_covers]]', 'opening') %}\n m3of:curtains\n {% else %}\n m3of:curtains-closed\n {% endif %}\n content: >-\n {{ states('[[covers_count_sensor]]') if\n states('[[covers_count_sensor]]') != '0' else '' }}\n card_mod:\n style: |\n {% set cover_state = states('[[entity_id_covers]]') %}\n {% set is_on = cover_state in ['open', 'opening'] %}\n ha-card {\n --chip-background: {% if is_on %} #702963 {% else %} #353535 {% endif %};\n --color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_fans]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_fans]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_fans]]'\n tap_action:\n action: more-info\n icon: |\n {% if is_state('[[entity_id_fans]]', 'on') %}\n mdi:fan\n {% else %}\n mdi:fan-off\n {% endif %}\n content: >-\n {{ states('[[fans_count_sensor]]') if\n states('[[fans_count_sensor]]') != '0' else '' }}\n card_mod:\n style: |\n {% set fan_state = states('[[entity_id_fans]]') %}\n {% set is_on = fan_state == 'on' %}\n ha-card {\n --chip-background: {% if is_on %} #89CFF0 {% else %} #353535 {% endif %};\n --color: {% if is_on %} #000000 {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_on %} #000000 {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_windows]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_windows]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_windows]]'\n tap_action:\n action: more-info\n icon: |\n {% if is_state('[[entity_id_windows]]', 'on') %}\n m3of:window-open\n {% else %}\n m3of:window-closed\n {% endif %}\n content: >-\n {{ states('[[windows_count_sensor]]') if\n states('[[windows_count_sensor]]') != '0' else '' }}\n card_mod:\n style: |\n {% set window_state = states('[[entity_id_windows]]') %}\n {% set is_on = window_state == 'on' %}\n ha-card {\n --chip-background: {% if is_on %} #ffaa00 {% else %} #353535 {% endif %};\n --color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_doors]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_doors]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_doors]]'\n tap_action:\n action: more-info\n icon: |\n {% if is_state('[[entity_id_doors]]', 'on') %}\n m3o:door-open\n {% else %}\n m3of:door-front\n {% endif %}\n content: >-\n {{ states('[[doors_count_sensor]]') if\n states('[[doors_count_sensor]]') != '0' else '' }}\n card_mod:\n style: |\n {% set door_state = states('[[entity_id_doors]]') %}\n {% set is_on = door_state == 'on' %}\n ha-card {\n --chip-background: {% if is_on %} #bc000a {% else %} #353535 {% endif %};\n --color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_custom_1]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_custom_1]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_custom_1]]'\n tap_action:\n action: more-info\n icon: >\n {% set current_state = states('[[entity_id_custom_1]]') %} {%\n set is_active = current_state in ['on', 'playing', 'paused']\n and current_state not in ['docked', 'off', 'idle',\n 'unavailable', 'unknown'] %} {% if is_active %}\n [[custom_1_icon_active]]\n {% else %}\n [[custom_1_icon_inactive]]\n {% endif %}\n card_mod:\n style: >\n {% set current_state = states('[[entity_id_custom_1]]') %}\n\n {% set is_active = current_state in ['on', 'playing',\n 'paused'] and current_state not in ['docked', 'off', 'idle',\n 'unavailable', 'unknown'] %}\n\n ha-card {\n --chip-background: {% if is_active %} [[custom_1_color]] {% else %} #353535 {% endif %};\n --color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_custom_2]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_custom_2]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_custom_2]]'\n tap_action:\n action: more-info\n icon: >\n {% set current_state = states('[[entity_id_custom_2]]') %} {%\n set is_active = current_state in ['on', 'playing', 'paused']\n and current_state not in ['docked', 'off', 'idle',\n 'unavailable', 'unknown'] %} {% if is_active %}\n [[custom_2_icon_active]]\n {% else %}\n [[custom_2_icon_inactive]]\n {% endif %}\n card_mod:\n style: >\n {% set current_state = states('[[entity_id_custom_2]]') %}\n\n {% set is_active = current_state in ['on', 'playing',\n 'paused'] and current_state not in ['docked', 'off', 'idle',\n 'unavailable', 'unknown'] %}\n\n ha-card {\n --chip-background: {% if is_active %} [[custom_2_color]] {% else %} #353535 {% endif %};\n --color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_custom_3]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_custom_3]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_custom_3]]'\n tap_action:\n action: more-info\n icon: >\n {% set current_state = states('[[entity_id_custom_3]]') %} {%\n set is_active = current_state in ['on', 'playing', 'paused']\n and current_state not in ['docked', 'off', 'idle',\n 'unavailable', 'unknown'] %} {% if is_active %}\n [[custom_3_icon_active]]\n {% else %}\n [[custom_3_icon_inactive]]\n {% endif %}\n card_mod:\n style: >\n {% set current_state = states('[[entity_id_custom_3]]') %}\n\n {% set is_active = current_state in ['on', 'playing',\n 'paused'] and current_state not in ['docked', 'off', 'idle',\n 'unavailable', 'unknown'] %}\n\n ha-card {\n --chip-background: {% if is_active %} [[custom_3_color]] {% else %} #353535 {% endif %};\n --color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_custom_4]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_custom_4]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_custom_4]]'\n tap_action:\n action: more-info\n icon: >\n {% set current_state = states('[[entity_id_custom_4]]') %} {%\n set is_active = current_state in ['on', 'playing', 'paused']\n and current_state not in ['docked', 'off', 'idle',\n 'unavailable', 'unknown'] %} {% if is_active %}\n [[custom_4_icon_active]]\n {% else %}\n [[custom_4_icon_inactive]]\n {% endif %}\n card_mod:\n style: >\n {% set current_state = states('[[entity_id_custom_4]]') %}\n\n {% set is_active = current_state in ['on', 'playing',\n 'paused'] and current_state not in ['docked', 'off', 'idle',\n 'unavailable', 'unknown'] %}\n\n ha-card {\n --chip-background: {% if is_active %} [[custom_4_color]] {% else %} #353535 {% endif %};\n --color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n card_mod:\n style: |\n .chip-container {\n flex-flow: column wrap-reverse !important;\n display: flex !important;\n --chip-spacing: 8px;\n margin: 9px;\n }\n card_mod:\n style: |\n ha-card {\n {% set temp = states('[[entity_id_temperature]]') %}\n {% if temp in ['unavailable', 'unknown', ''] %}\n background: [[room_background]];\n {% else %}\n {% set t = temp | float %}\n background: \n {% if t < 13 %} #AC9CAF\n {% elif t < 16 %} #D7C4DB\n {% elif t < 19 %} #A3D9F5\n {% elif t < 22 %} #CDE3DB\n {% elif t < 24 %} #FFE599\n {% elif t < 27 %} #F7BE81\n {% else %} #E48F7B {% endif %};\n {% endif %}\n height: 186px;\n }\n room_toggles_chip_card:\n variables:\n - entity_area_one: ''\n - entity_area_two: ''\n - entity_area_three: ''\n - entity_area_four: ''\n - area_one_name: ''\n - area_two_name: ''\n - area_three_name: ''\n - area_four_name: ''\n - area_one_icon: ''\n - area_two_icon: ''\n - area_three_icon: ''\n - area_four_icon: ''\n - alignment: ''\n - margin_top: ''\n card:\n type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_area_one]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_area_one]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_area_one]]'\n icon: '[[area_one_icon]]'\n content: |-\n {% if is_state(entity, 'on') %} \n [[area_one_name]]\n {% else %}\n {% endif %}\n tap_action:\n action: toggle\n card_mod:\n style:\n .: |\n\n ha-card {\n --text-color: var(--md-sys-color-primary);\n --color: var(--md-sys-color-primary);\n --chip-background: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_area_one]]', 'on') else none }};\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_area_two]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_area_two]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_area_two]]'\n icon: '[[area_two_icon]]'\n content: |-\n {% if is_state(entity, 'on') %} \n [[area_two_name]]\n {% else %}\n {% endif %}\n tap_action:\n action: toggle\n card_mod:\n style:\n .: |\n ha-card {\n --text-color: var(--md-sys-color-primary);\n --color: var(--md-sys-color-primary);\n --chip-background: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_area_two]]', 'on') else none }};\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_area_three]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_area_three]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_area_three]]'\n icon: '[[area_three_icon]]'\n content: |-\n {% if is_state(entity, 'on') %} \n [[area_three_name]]\n {% else %}\n {% endif %}\n tap_action:\n action: toggle\n card_mod:\n style:\n .: |\n ha-card {\n --text-color: var(--md-sys-color-primary);\n --color: var(--md-sys-color-primary);\n --chip-background: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_area_three]]', 'on') else none }};\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_area_four]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_area_four]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_area_four]]'\n icon: '[[area_four_icon]]'\n content: |-\n {% if is_state(entity, 'on') %} \n [[area_four_name]]\n {% else %}\n {% endif %}\n tap_action:\n action: toggle\n card_mod:\n style:\n .: |\n ha-card {\n --text-color: var(--md-sys-color-primary);\n --color: var(--md-sys-color-primary);\n --chip-background: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_area_four]]', 'on') else none }};\n }\n alignment: '[[alignment]]'\n card_mod:\n style: |\n ha-card {\n margin-top: [[margin_top]];\n }\n room_nav_boolean_chip_card:\n variables:\n - button_one: ''\n - button_two: ''\n - button_three: ''\n - button_four: ''\n - button_one_icon: ''\n - button_two_icon: ''\n - button_three_icon: ''\n - button_four_icon: ''\n - alignment: ''\n - margin_top: ''\n card:\n type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[button_one]]'\n state_not: unknown\n - condition: state\n entity: '[[button_one]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[button_one]]'\n icon: '[[button_one_icon]]'\n tap_action:\n action: toggle\n card_mod:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_one]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_one]]', 'on') else 'var(--md-sys-color-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[button_one]]', 'on') else none }};\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[button_two]]'\n state_not: unknown\n - condition: state\n entity: '[[button_two]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[button_two]]'\n icon: '[[button_two_icon]]'\n tap_action:\n action: toggle\n card_mod:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_two]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_two]]', 'on') else 'var(--md-sys-color-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[button_two]]', 'on') else none }};\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[button_three]]'\n state_not: unknown\n - condition: state\n entity: '[[button_three]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[button_three]]'\n icon: '[[button_three_icon]]'\n tap_action:\n action: toggle\n card_mod:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_three]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_three]]', 'on') else 'var(--md-sys-color-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[button_three]]', 'on') else none }};\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[button_four]]'\n state_not: unknown\n - condition: state\n entity: '[[button_four]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[button_four]]'\n icon: '[[button_four_icon]]'\n tap_action:\n action: toggle\n card_mod:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_four]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_four]]', 'on') else 'var(--md-sys-color-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[button_four]]', 'on') else none }};\n }\n alignment: '[[alignment]]'\n card_mod:\n style: |\n ha-card {\n margin-top: [[margin_top]];\n }\n room_title_card:\n variables:\n - title: ''\n card:\n type: custom:mushroom-title-card\n title: '[[title]]'\n card_mod:\n style: |\n ha-card {\n --title-font-size: 30px !important;\n }\n open_windows_card:\n variables:\n title: ''\n window_1: ''\n window_2: ''\n window_3: ''\n window_4: ''\n card:\n type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: state\n entity: '[[window_1]]'\n state: 'on'\n - condition: state\n entity: '[[window_2]]'\n state: 'on'\n - condition: state\n entity: '[[window_3]]'\n state: 'on'\n - condition: state\n entity: '[[window_4]]'\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: '[[title]]'\n - type: grid\n columns: 2\n square: false\n cards:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[window_1]]'\n state: 'on'\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: false\n se_default_text: true\n entity: '[[window_1]]'\n height: 97\n control_type: generic\n icon: m3of:window-open\n text_on: Open\n text_off: Closed\n - type: conditional\n conditions:\n - condition: state\n entity: '[[window_2]]'\n state: 'on'\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: false\n se_default_text: true\n entity: '[[window_2]]'\n height: 97\n control_type: generic\n icon: m3of:window-open\n text_on: Open\n text_off: Closed\n - type: conditional\n conditions:\n - condition: state\n entity: '[[window_3]]'\n state: 'on'\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: false\n se_default_text: true\n entity: '[[window_3]]'\n height: 97\n control_type: generic\n icon: m3of:window-open\n text_on: Open\n text_off: Closed\n - type: conditional\n conditions:\n - condition: state\n entity: '[[window_4]]'\n state: 'on'\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: false\n se_default_text: true\n entity: '[[window_4]]'\n height: 97\n control_type: generic\n icon: m3of:window-open\n text_on: Open\n text_off: Closed\n open_doors_card:\n variables:\n title: ''\n door_1: ''\n door_2: ''\n door_3: ''\n door_4: ''\n card:\n type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: state\n entity: '[[door_1]]'\n state: 'on'\n - condition: state\n entity: '[[door_2]]'\n state: 'on'\n - condition: state\n entity: '[[door_3]]'\n state: 'on'\n - condition: state\n entity: '[[door_4]]'\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: '[[title]]'\n - type: grid\n columns: 2\n square: false\n cards:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[door_1]]'\n state: 'on'\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: false\n se_default_text: true\n entity: '[[door_1]]'\n height: 97\n control_type: generic\n icon: m3of:door-open\n text_on: Open\n text_off: Closed\n - type: conditional\n conditions:\n - condition: state\n entity: '[[door_2]]'\n state: 'on'\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: false\n se_default_text: true\n entity: '[[door_2]]'\n height: 97\n control_type: generic\n icon: m3of:door-open\n text_on: Open\n text_off: Closed\n - type: conditional\n conditions:\n - condition: state\n entity: '[[door_3]]'\n state: 'on'\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: false\n se_default_text: true\n entity: '[[door_3]]'\n height: 97\n control_type: generic\n icon: m3of:door-open\n text_on: Open\n text_off: Closed\n - type: conditional\n conditions:\n - condition: state\n entity: '[[door_4]]'\n state: 'on'\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: false\n se_default_text: true\n entity: '[[door_4]]'\n height: 97\n control_type: generic\n icon: m3of:door-open\n text_on: Open\n text_off: Closed\n entity_count_card:\n variables:\n entity: ''\n title: ''\n icon: ''\n color: ''\n card:\n type: conditional\n conditions:\n - condition: state\n entity: '[[entity]]'\n state:\n - 'on'\n - open\n card:\n type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n - title: '[[title]]'\n - type: custom:mushroom-chips-card\n alignment: end\n chips:\n - type: template\n content: |\n {{ expand('[[entity]]')\n | selectattr('state', 'in', ['on', 'open'])\n | list\n | count }}\n icon: '[[icon]]'\n icon_color: '[[color]]'\n tap_action:\n action: none\n card_mod:\n style: |\n ha-card {\n margin-top: 1.6em;\n }\n camera_generic_with_chips_card:\n default:\n - camera_entity: ''\n - camera_height: ''\n - entity_id_light_one: ''\n - entity_id_light_two: ''\n - light_one_icon: ''\n - light_two_icon: ''\n variables:\n - camera_entity\n - camera_height\n - entity_id_light_one\n - entity_id_light_two\n - light_one_icon\n - light_two_icon\n card:\n type: vertical-stack\n cards:\n - type: custom:webrtc-camera\n streams:\n - entity: '[[camera_entity]]'\n muted: true\n card_mod:\n style: |\n ha-card {\n height: [[camera_height]];\n overflow: hidden;\n }\n - type: custom:mushroom-chips-card\n alignment: start\n chips:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_light_one]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_light_one]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_light_one]]'\n icon: '[[light_one_icon]]'\n tap_action:\n action: toggle\n content: |\n {{ states['[[entity_id_light_one]]'].name }}\n card_mod:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-on-primary)' }};\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_light_two]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_light_two]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_light_two]]'\n icon: '[[light_two_icon]]'\n tap_action:\n action: toggle\n content: |\n {{ states['[[entity_id_light_two]]'].name }}\n card_mod:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-on-primary)' }};\n }\n camera_rtsp_with_chips_card:\n default:\n - camera_url: ''\n - camera_height: ''\n - entity_id_light_one: ''\n - entity_id_light_two: ''\n - light_one_icon: ''\n - light_two_icon: ''\n variables:\n - camera_url\n - camera_height\n - entity_id_light_one\n - entity_id_light_two\n - light_one_icon\n - light_two_icon\n card:\n type: vertical-stack\n cards:\n - type: custom:webrtc-camera\n url: '[[camera_url]]'\n card_mod:\n style: |\n ha-card {\n height: [[camera_height]];\n overflow: hidden;\n }\n - type: custom:mushroom-chips-card\n alignment: start\n chips:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_light_one]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_light_one]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_light_one]]'\n icon: '[[light_one_icon]]'\n tap_action:\n action: toggle\n content: |\n {{ states['[[entity_id_light_one]]'].name }}\n card_mod:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-on-primary)' }};\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_light_two]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_light_two]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_light_two]]'\n icon: '[[light_two_icon]]'\n tap_action:\n action: toggle\n content: |\n {{ states['[[entity_id_light_two]]'].name }}\n card_mod:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-on-primary)' }};\n }\n media_player_card:\n variables:\n entity: ''\n name: ''\n card:\n type: custom:mushroom-media-player-card\n entity: '[[entity]]'\n name: '[[name]]'\n fill_container: true\n use_media_info: true\n show_volume_level: true\n layout: vertical\n collapsible_controls: true\n volume_controls:\n - volume_buttons\n - volume_set\n media_controls:\n - on_off\n grid_options:\n columns: full\n card_mod:\n style:\n .: |\n ha-state-icon {\n color: {{ 'var(--primary-background-color)' if is_state('[[entity]]', 'on') else 'none' }};\n }\n mushroom-shape-icon$: |\n .shape {\n --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)' }};\n }\n mushroom-media-player-volume-control$: |\n mushroom-slider {\n --main-color: var(--md-sys-color-on-secondary) !important;\n --bg-color: var(--md-sys-color-secondary) !important;\n }\n curtain_card:\n variables:\n entity: ''\n name: ''\n card:\n type: custom:mushroom-cover-card\n entity: '[[entity]]'\n show_position_control: true\n show_buttons_control: true\n show_tilt_position_control: false\n card_mod:\n style:\n .: |\n ha-state-icon {\n color: {{ 'var(--primary-background-color)' if is_state('[[entity]]', 'open') else 'var(--primary-text-color)' }};\n }\n mushroom-shape-icon$: |\n .shape {\n --shape-color: {{ 'var(--md-sys-color-secondary)' if is_state('[[entity]]', 'open') else none }};\n mushroom-cover-position-control$: |\n mushroom-slider {\n --main-color: var(--md-sys-color-primary) !important;\n --bg-color: color-mix(in srgb, var(--md-sys-color-primary) 70%, transparent) !important;\n mushroom-cover-tilt-position-control$: |\n mushroom-slider {\n --main-color: var(--md-sys-color-primary) !important;\n --bg-color: color-mix(in srgb, var(--md-sys-color-primary) 70%, transparent) !important;\n }\n number_slider_card:\n variables:\n entity: ''\n name: ''\n icon: ''\n card:\n type: custom:mushroom-number-card\n entity: '[[entity]]'\n name: '[[name]]'\n icon: '[[icon]]'\n display_mode: slider\n fill_container: true\n card_mod:\n style:\n .: |\n ha-state-icon {\n color: var(--md-sys-color-secondary);\n }\n mushroom-shape-icon$: |\n .shape {\n --shape-color: var(--md-sys-color-on-secondary) !important;\n }\n mushroom-number-value-control$: |\n mushroom-slider {\n --main-color: var(--md-sys-color-on-secondary) !important;\n --bg-color: var(--md-sys-color-secondary) !important;\n }\n select_card:\n variables:\n entity: ''\n name: ''\n icon: ''\n card:\n type: custom:mushroom-select-card\n entity: '[[entity]]'\n name: '[[name]]'\n icon: '[[icon]]'\n fill_container: true\n card_mod:\n style:\n .: |\n ha-state-icon {\n color: var(--md-sys-color-secondary);\n }\n mushroom-shape-icon$: |\n .shape {\n --shape-color: none !important;\n }\n mushroom-select-option-control$:\n mushroom-select$: |\n mwc-menu {\n --mdc-theme-text-primary-on-background: var(--primary-text-color);\n --mdc-theme-primary: var(--primary-color);\n --mdc-theme-surface: inherit;\n }\n scene_button_card:\n variables:\n img_path: ''\n scene_value: ''\n card:\n type: custom:button-card\n entity_picture: '[[img_path]]'\n show_entity_picture: true\n aspect_ratio: 5/3\n styles:\n card:\n - padding: 0px\n entity_picture:\n - width: 100%\n - height: 100%\n - object-fit: cover\n tap_action:\n action: call-service\n service: input_text.set_value\n service_data:\n entity_id: input_text.dynamic_scene_selected\n value: '[[scene_value]]'\n toggle_chip:\n default:\n - entity_id: ''\n - chip_icon: ''\n - chip_color: ''\n - chip_label: ''\n card:\n type: template\n entity: '[[entity_id]]'\n icon: '[[chip_icon]]'\n icon_color: >-\n {% if is_state('[[entity_id]]', 'on') %}[[chip_color]]{% else\n %}var(--primary-text-color){% endif %}\n tap_action:\n action: toggle\n content: '{% if is_state(''[[entity_id]]'', ''on'') %}[[chip_label]]{% endif %}'\n material_light_slider_card:\n variables:\n entity: ''\n name: ''\n card:\n type: custom:material-slider-card\n entity: '[[entity]]'\n icon: m3of:lightbulb\n show_percentage: true\n bold_text: false\n material_custom_icon_slider_card:\n variables:\n entity: ''\n name: ''\n icon: ''\n card:\n type: custom:material-slider-card\n entity: '[[entity]]'\n icon: '[[icon]]'\n show_percentage: true\n bold_text: false\n material_light_button_card:\n variables:\n entity: ''\n name: ''\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: true\n entity: '[[entity]]'\n icon: m3of:lightbulb\n height: 97\n control_type: generic\n dual_icon: true\n icon_on: m3of:lightbulb\n icon_off: m3of:light-off\n material_switch_button_card:\n variables:\n entity: ''\n name: ''\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: true\n entity: '[[entity]]'\n icon: m3of:lightbulb\n height: 97\n control_type: generic\n dual_icon: true\n icon_on: m3of:switch\n icon_off: m3o:switch\n material_custom_icon_button_card:\n variables:\n entity: ''\n name: ''\n icon: ''\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: true\n entity: '[[entity]]'\n icon: '[[icon]]'\n height: 97\n control_type: generic\n dual_icon: false\n material_custom_icon_with_status_button_card:\n variables:\n entity: ''\n name: ''\n icon: ''\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: false\n entity: '[[entity]]'\n icon: '[[icon]]'\n height: 97\n control_type: generic\n dual_icon: false\n text_on: Open\n text_off: Closed\n material_custom_dual_icon_button_card:\n variables:\n entity: ''\n name: ''\n icon: ''\n icon_on: ''\n icon_off: ''\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: true\n entity: '[[entity]]'\n icon_on: '[[icon_on]]'\n icon_off: '[[icon_off]]'\n height: 97\n control_type: generic\n dual_icon: true\n material_custom_dual_icon_with_status_button_card:\n variables:\n entity: ''\n name: ''\n icon: ''\n icon_on: ''\n icon_off: ''\n card:\n type: custom:material-button-card\n use_default_icon: false\n use_default_toggle: true\n use_default_text: false\n entity: '[[entity]]'\n icon_on: '[[icon_on]]'\n icon_off: '[[icon_off]]'\n height: 97\n control_type: generic\n dual_icon: true\n text_on: Open\n text_off: Closed\n spacer_card:\n variables:\n padding: ''\n card:\n type: custom:button-card\n show_name: false\n show_icon: false\n tap_action:\n action: none\n styles:\n card:\n - background: none\n - box-shadow: none\n - padding: '[[padding]]'\n" }, { "path": "dashboard.yaml", "content": "kiosk_mode:\n user_settings:\n - users:\n - kiosk\n kiosk: true\nstreamline_templates:\n room_details_card:\n variables:\n temperature_entity: ''\n humidity_entity: ''\n presence_entity: ''\n card:\n type: custom:paper-buttons-row\n styles:\n justify-content: flex-start\n flex-wrap: wrap\n font-size: 0.9em\n line-height: 1.2em\n margin: 0 0 0 6px\n width: 100%\n extra_styles: |\n @keyframes fadeIn {\n from { opacity: 1; }\n to { opacity: 1; }\n }\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n buttons:\n - layout: name\n entity: '[[presence_entity]]'\n name: >-\n {% set entity = '[[presence_entity]]' %} {% if '.' not in entity %}\n {% elif states(entity) in ['unavailable', 'unknown'] %}unavailable\n {% else %}\n {% if is_state(entity, 'on') %} Occupied {% else %} Clear {% endif %}\n {% endif %}\n tap_action:\n action: more-info\n styles:\n icon:\n color: var(--md-sys-color-primary)\n name:\n color: var(--md-sys-color-primary)\n font-weight: bold\n button:\n padding: 2px 8px\n background-color: >-\n color-mix(in srgb, var(--md-sys-color-on-primary) 50%,\n transparent)\n border-radius: 24px\n flex-basis: 1\n flex-shrink: 0\n animation: slideInLeft 0.6s ease-out 0.4s both\n transition: all 0.3s ease\n display: '{% if ''.'' not in ''[[presence_entity]]'' %}none{% endif %}'\n - layout: name\n name: ·\n styles:\n button:\n flex-basis: 1\n flex-shrink: 0\n animation: fadeIn 0.8s ease-out 0.5s both\n display: >-\n {% if '.' not in '[[presence_entity]]' or '.' not in\n '[[temperature_entity]]' %}none{% endif %}\n name:\n color: var(--primary-text-color)\n tap_action:\n action: none\n - layout: name\n entity: '[[temperature_entity]]'\n name: >-\n {% set entity = '[[temperature_entity]]' %} {% if '.' not in entity\n %} {% elif states(entity) in ['unavailable', 'unknown'] %}\n unavailable {% else %}\n {% set temp = states(entity) | float(0) %}\n {% if temp < 18 %} Cold \n {% elif temp < 22 %} Cool \n {% elif temp < 26 %} Ideal \n {% else %} Warm {% endif %}\n ({{ temp }}°C) {% endif %}\n tap_action:\n action: more-info\n styles:\n icon:\n color: var(--md-sys-color-primary)\n name:\n color: var(--md-sys-color-primary)\n font-weight: bold\n button:\n padding: 2px 8px\n background-color: >-\n color-mix(in srgb, var(--md-sys-color-on-primary) 50%,\n transparent)\n border-radius: 24px\n flex-basis: 1\n flex-shrink: 0\n animation: slideInLeft 0.6s ease-out 0.6s both\n transition: all 0.3s ease\n display: '{% if ''.'' not in ''[[temperature_entity]]'' %}none{% endif %}'\n - layout: name\n name: ·\n styles:\n button:\n flex-basis: 1\n flex-shrink: 0\n animation: fadeIn 0.8s ease-out 0.7s both\n display: >-\n {% if '.' not in '[[temperature_entity]]' or '.' not in\n '[[humidity_entity]]' %} none {% endif %}\n name:\n color: var(--primary-text-color)\n tap_action:\n action: none\n - layout: name\n entity: '[[humidity_entity]]'\n name: >-\n {% set entity = '[[humidity_entity]]' %} {% if '.' not in entity %}\n {% elif states(entity) in ['unavailable', 'unknown'] %}unavailable\n {% else %}\n {% set hum = states(entity) | float(0) %}\n {% if hum < 31 %} Dry\n {% elif hum < 51 %} Good\n {% else %} Humid {% endif %}\n ({{ hum }} %)\n {% endif %}\n tap_action:\n action: more-info\n styles:\n icon:\n color: var(--md-sys-color-primary)\n name:\n color: var(--md-sys-color-primary)\n font-weight: bold\n button:\n padding: 2px 8px\n background-color: >-\n color-mix(in srgb, var(--md-sys-color-on-primary) 50%,\n transparent)\n border-radius: 24px\n flex-basis: 1\n flex-shrink: 0\n animation: slideInLeft 0.6s ease-out 0.9s both\n transition: all 0.3s ease\n display: '{% if ''.'' not in ''[[humidity_entity]]'' %}none{% endif %}'\n uix:\n style: |\n ha-card {\n overflow: visible !important;\n }\n title_card:\n variables:\n title: ''\n title_font_size: 20px\n card:\n type: custom:mushroom-title-card\n title: '[[title]]'\n uix:\n style: |\n ha-card {\n --title-font-size: [[title_font_size]] !important;\n }\n title_subtitle_card:\n variables:\n title: ''\n subtitle: ''\n animation_delay: 0s\n card:\n type: custom:mushroom-title-card\n title: '[[title]]'\n subtitle: '[[subtitle]]'\n uix:\n style: |\n ha-card {\n --title-font-size: 20px !important;\n --subtitle-font-size: 14px !important;\n animation: fadeIn 1.0s ease-out [[animation_delay]] both;\n }\n @keyframes fadeIn {\n from { opacity: 1; }\n to { opacity: 1; }\n }\n title_subtitle_navigation_card:\n variables:\n title: ''\n subtitle: ''\n navigation_path: ''\n title_font_size: 20px\n animation_delay: 0s\n card:\n type: custom:mushroom-title-card\n title: '[[title]]'\n subtitle: '[[subtitle]]'\n title_tap_action:\n action: navigate\n navigation_path: '[[navigation_path]]'\n uix:\n style: |\n ha-card {\n --title-font-size: [[title_font_size]] !important;\n --subtitle-font-size: 14px !important;\n animation: fadeIn 1.0s ease-out [[animation_delay]] both;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n title_navigation_card:\n variables:\n title: ''\n navigation_path: ''\n animation_delay: 0s\n title_font_size: 20px\n card:\n type: custom:mushroom-title-card\n title: '[[title]]'\n title_tap_action:\n action: navigate\n navigation_path: '[[navigation_path]]'\n uix:\n style: |\n ha-card {\n --title-font-size: [[title_font_size]] !important;\n animation: fadeIn 1.0s ease-out [[animation_delay]] both;\n }\n @keyframes fadeIn {\n from { \n opacity: 0;\n }\n to { \n opacity: 1;\n }\n }\n date_clock_text_card:\n variables:\n title: ''\n card:\n type: custom:mushroom-title-card\n title: '[[title]]'\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n page_title_card:\n variables:\n - title: ''\n - alignment: center\n card:\n type: custom:button-card\n name: '[[title]]'\n show_icon: false\n show_state: false\n tap_action:\n action: none\n styles:\n card:\n - background: none\n - box-shadow: none\n - height: 38px\n name:\n - justify-self: '[[alignment]]'\n - font-size: 24px\n - font-weight: 500\n - letter-spacing: '-0.7px'\n uix:\n style: |\n :host {\n animation: fadeInDown 0.2s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n scene_title_card:\n variables:\n subtitle: ''\n animation_delay: 0s\n card:\n type: custom:mushroom-title-card\n subtitle: '[[subtitle]]'\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) [[animation_delay]] both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n } \n room_toggles_chip_card:\n variables:\n - entity_area_one: ''\n - entity_area_two: ''\n - entity_area_three: ''\n - entity_area_four: ''\n - area_one_name: ''\n - area_two_name: ''\n - area_three_name: ''\n - area_four_name: ''\n - area_one_icon: ''\n - area_two_icon: ''\n - area_three_icon: ''\n - area_four_icon: ''\n - alignment: ''\n - animation_delay: 0s\n card:\n type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_area_one]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_area_one]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_area_one]]'\n icon: '[[area_one_icon]]'\n content: |-\n {% if is_state(entity, 'on') %} \n [[area_one_name]]\n {% else %}\n {% endif %}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_one]]', 'off') else 'var(--md-sys-color-on-primary)' }};\n --color: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_one]]', 'off') else 'var(--md-sys-color-on-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_one]]', 'on') else none }};\n animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0s) both;\n }\n @keyframes slideInLeft {\n from { \n opacity: 1;\n transform: translateX(-8px);\n }\n to { \n opacity: 1;\n transform: translateX(0);\n }\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_area_two]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_area_two]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_area_two]]'\n icon: '[[area_two_icon]]'\n content: |-\n {% if is_state(entity, 'on') %} \n [[area_two_name]]\n {% else %}\n {% endif %}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_two]]', 'off') else 'var(--md-sys-color-on-primary)' }};\n --color: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_two]]', 'off') else 'var(--md-sys-color-on-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_two]]', 'on') else none }};\n animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.2s) both;\n }\n @keyframes slideInLeft {\n from { \n opacity: 1;\n transform: translateX(-8px);\n }\n to { \n opacity: 1;\n transform: translateX(0);\n }\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_area_three]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_area_three]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_area_three]]'\n icon: '[[area_three_icon]]'\n content: |-\n {% if is_state(entity, 'on') %} \n [[area_three_name]]\n {% else %}\n {% endif %}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_three]]', 'off') else 'var(--md-sys-color-on-primary)' }};\n --color: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_three]]', 'off') else 'var(--md-sys-color-on-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[entity_area_three]]', 'on') else none }};\n animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.4s) both;\n }\n @keyframes slideInLeft {\n from { \n opacity: 1;\n transform: translateX(-8px);\n }\n to { \n opacity: 1;\n transform: translateX(0);\n }\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_area_four]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_area_four]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_area_four]]'\n icon: '[[area_four_icon]]'\n content: |-\n {% if is_state(entity, 'on') %} \n [[area_four_name]]\n {% else %}\n {% endif %}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: var(--md-sys-color-primary);\n --color: var(--md-sys-color-primary);\n --chip-background: {{ 'color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent)' if is_state('[[entity_area_four]]', 'on') else none }};\n animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.6s) both;\n }\n @keyframes slideInLeft {\n from { \n opacity: 1;\n transform: translateX(-8px);\n }\n to { \n opacity: 1;\n transform: translateX(0);\n }\n }\n alignment: '[[alignment]]'\n room_nav_boolean_chip_card:\n variables:\n - button_one: ''\n - button_two: ''\n - button_three: ''\n - button_four: ''\n - button_one_icon: ''\n - button_two_icon: ''\n - button_three_icon: ''\n - button_four_icon: ''\n - alignment: ''\n - margin-top: ''\n card:\n type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[button_one]]'\n state_not: unknown\n - condition: state\n entity: '[[button_one]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[button_one]]'\n icon: '[[button_one_icon]]'\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_one]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_one]]', 'on') else 'var(--md-sys-color-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[button_one]]', 'on') else none }};\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[button_two]]'\n state_not: unknown\n - condition: state\n entity: '[[button_two]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[button_two]]'\n icon: '[[button_two_icon]]'\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_two]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_two]]', 'on') else 'var(--md-sys-color-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[button_two]]', 'on') else none }};\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[button_three]]'\n state_not: unknown\n - condition: state\n entity: '[[button_three]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[button_three]]'\n icon: '[[button_three_icon]]'\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_three]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_three]]', 'on') else 'var(--md-sys-color-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[button_three]]', 'on') else none }};\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[button_four]]'\n state_not: unknown\n - condition: state\n entity: '[[button_four]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[button_four]]'\n icon: '[[button_four_icon]]'\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_four]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[button_four]]', 'on') else 'var(--md-sys-color-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' if is_state('[[button_four]]', 'on') else none }};\n }\n alignment: '[[alignment]]'\n uix:\n style: |\n ha-card {\n margin-top: [[margin-top]];\n }\n back_button_card:\n variables:\n navigation_path: ''\n card:\n type: custom:mushroom-chips-card\n chips:\n - type: template\n tap_action:\n action: navigate\n navigation_path: '[[navigation_path]]'\n icon: m3of:arrow-left-alt\n uix:\n style:\n .: |\n ha-card {\n --color: var(--md-sys-color-primary);\n --chip-background: color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent);\n animation: fadeInDown 0.2s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n more-options-card:\n variables:\n navigation_path: ''\n card:\n type: custom:mushroom-chips-card\n alignment: end\n chips:\n - type: template\n tap_action:\n action: navigate\n navigation_path: '[[navigation_path]]'\n icon: mdi:dots-horizontal\n uix:\n style:\n .: |\n ha-card {\n --color: var(--md-sys-color-primary);\n --chip-background: color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent);\n animation: fadeInDown 0.2s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n scene_button_card:\n variables:\n img_path: ''\n scene_value: ''\n card:\n type: custom:button-card\n entity_picture: '[[img_path]]'\n show_entity_picture: true\n aspect_ratio: 5/3\n styles:\n card:\n - padding: 0px\n entity_picture:\n - width: 100%\n - height: 100%\n - object-fit: cover\n tap_action:\n action: call-service\n service: input_text.set_value\n service_data:\n entity_id: input_text.dynamic_scene_selected\n value: '[[scene_value]]'\n spacer_card:\n variables:\n padding: ''\n card:\n type: custom:button-card\n show_name: false\n show_icon: false\n tap_action:\n action: none\n styles:\n card:\n - background: none\n - box-shadow: none\n - padding: '[[padding]]'\n open_windows_card:\n variables:\n title: ''\n window_1: ''\n window_2: ''\n window_3: ''\n window_4: ''\n card:\n type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: state\n entity: '[[window_1]]'\n state: 'on'\n - condition: state\n entity: '[[window_2]]'\n state: 'on'\n - condition: state\n entity: '[[window_3]]'\n state: 'on'\n - condition: state\n entity: '[[window_4]]'\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: '[[title]]'\n title_font_size: 20px\n - type: grid\n columns: 2\n square: false\n cards:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[window_1]]'\n state: 'on'\n card:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: '[[window_1]]'\n icon: m3of:window-open\n background_color: rgba(255, 170, 0, 0.5)\n - type: conditional\n conditions:\n - condition: state\n entity: '[[window_2]]'\n state: 'on'\n card:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: '[[window_2]]'\n icon: m3of:window-open\n background_color: rgba(255, 170, 0, 0.5)\n - type: conditional\n conditions:\n - condition: state\n entity: '[[window_3]]'\n state: 'on'\n card:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: '[[window_3]]'\n icon: m3of:window-open\n background_color: rgba(255, 170, 0, 0.5)\n - type: conditional\n conditions:\n - condition: state\n entity: '[[window_4]]'\n state: 'on'\n card:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: '[[window_4]]'\n icon: m3of:window-open\n background_color: rgba(255, 170, 0, 0.5)\n open_doors_card:\n variables:\n title: ''\n door_1: ''\n door_2: ''\n door_3: ''\n door_4: ''\n card:\n type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: state\n entity: '[[door_1]]'\n state: 'on'\n - condition: state\n entity: '[[door_2]]'\n state: 'on'\n - condition: state\n entity: '[[door_3]]'\n state: 'on'\n - condition: state\n entity: '[[door_4]]'\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: '[[title]]'\n title_font_size: 20px\n - type: grid\n columns: 2\n square: false\n cards:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[door_1]]'\n state: 'on'\n card:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: '[[door_1]]'\n icon: m3of:door-open\n background_color: rgba(188, 0, 10, 0.5)\n - type: conditional\n conditions:\n - condition: state\n entity: '[[door_2]]'\n state: 'on'\n card:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: '[[door_2]]'\n icon: m3of:door-open\n background_color: rgba(188, 0, 10, 0.5)\n - type: conditional\n conditions:\n - condition: state\n entity: '[[door_3]]'\n state: 'on'\n card:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: '[[door_3]]'\n icon: m3of:door-open\n background_color: rgba(188, 0, 10, 0.5)\n - type: conditional\n conditions:\n - condition: state\n entity: '[[door_4]]'\n state: 'on'\n card:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: '[[door_4]]'\n icon: m3of:door-open\n background_color: rgba(188, 0, 10, 0.5)\n entity_count_card:\n variables:\n entity: ''\n title: ''\n icon: ''\n color: ''\n card:\n type: conditional\n conditions:\n - condition: state\n entity: '[[entity]]'\n state:\n - 'on'\n - open\n card:\n type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: '[[title]]'\n title_font_size: 20px\n - type: custom:mushroom-chips-card\n alignment: end\n chips:\n - type: template\n content: |\n {{ expand('[[entity]]')\n | selectattr('state', 'in', ['on', 'open'])\n | list\n | count }}\n icon: '[[icon]]'\n icon_color: '[[color]]'\n tap_action:\n action: none\n uix:\n style: |\n ha-card {\n margin-top: 1.6em;\n }\n count_button_card:\n variables:\n group_entity: ''\n count_entity: ''\n title: ''\n icon: ''\n color: ''\n background_color: ''\n 'filter_state:': ''\n card:\n type: conditional\n conditions:\n - condition: state\n entity: '[[group_entity]]'\n state:\n - 'on'\n - open\n card:\n type: custom:expander-card\n title-card:\n type: custom:streamline-card\n template: entity_count_card\n variables:\n entity: '[[count_entity]]'\n title: '[[title]]'\n icon: '[[icon]]'\n color: '[[color]]'\n title-card-clickable: true\n title-card-button-overlay: false\n padding: '1'\n animations: true\n expanded: false\n cards:\n - type: custom:auto-entities\n card:\n square: false\n type: grid\n columns: 2\n card_param: cards\n filter:\n include:\n - group: '[[group_entity]]'\n state: '[[filter_state]]'\n options:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: this.entity_id\n icon: '[[icon]]'\n background_color: '[[background_color]]'\n exclude: []\n show_empty: false\n sort:\n method: entity_id\n media_player_card:\n variables:\n entity: ''\n name: ''\n card:\n type: custom:mushroom-media-player-card\n entity: '[[entity]]'\n name: '[[name]]'\n fill_container: true\n use_media_info: true\n show_volume_level: true\n layout: vertical\n collapsible_controls: true\n volume_controls:\n - volume_buttons\n - volume_set\n media_controls:\n - on_off\n grid_options:\n columns: full\n uix:\n style:\n .: |\n ha-state-icon {\n color: {{ 'var(--primary-background-color)' if is_state('[[entity]]', ['on', 'playing', 'paused', 'idle']) else 'none' }};\n }\n mushroom-shape-icon$: |\n .shape {\n --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)' }};\n }\n mushroom-media-player-volume-control$: |\n mushroom-slider {\n --main-color: var(--md-sys-color-primary) !important;\n --bg-color: var(--md-sys-color-on-primary) !important;\n }\n curtain_slider_card:\n variables:\n entity_id: ''\n label: Curtain\n icon: mdi:curtains\n card:\n type: custom:custom-features-card\n features:\n - type: custom:service-call\n entries:\n - type: slider\n tap_action:\n action: perform-action\n perform_action: cover.set_cover_position\n data:\n position: '{{ value }}'\n entity_id: '[[entity_id]]'\n value_attribute: current_position\n icon: '[[icon]]'\n entity_id: '[[entity_id]]'\n styles: >\n {% if state_attr(config.entity, 'current_position') | int(0) <\n 21 %}\n\n .icon, .label {\n color: white;\n }\n\n {% else %}\n\n .icon, .label {\n color: black;\n }\n\n .thumb::after {\n background-color: black;\n }\n\n {% endif %}\n range:\n - 0\n - 100\n step: 1\n label: '{{ state_attr(''[[entity_id]]'', ''friendly_name'') }}'\n ticks: false\n unit_of_measurement: '%'\n haptics: true\n feature_height: 70\n transparent: true\n styles: ''\n curtain_open_close_card:\n variables:\n entity_id: ''\n card:\n type: custom:custom-features-card\n features:\n - type: custom:service-call\n entries:\n - type: button\n entity_id: '[[entity_id]]'\n icon: mdi:curtains-closed\n momentary_end_action:\n action: perform-action\n perform_action: cover.stop_cover\n target:\n entity_id: '[[entity_id]]'\n momentary_start_action:\n action: perform-action\n perform_action: cover.close_cover\n target:\n entity_id: '[[entity_id]]'\n - type: button\n entity_id: '[[entity_id]]'\n icon: mdi:curtains\n momentary_end_action:\n action: perform-action\n perform_action: cover.stop_cover\n target:\n entity_id: '[[entity_id]]'\n momentary_start_action:\n action: perform-action\n perform_action: cover.open_cover\n target:\n entity_id: '[[entity_id]]'\n number_slider_card:\n variables:\n entity: ''\n card:\n type: custom:mushroom-number-card\n entity: '[[entity]]'\n display_mode: slider\n fill_container: true\n uix:\n style:\n .: |\n ha-state-icon {\n color: var(--primary-background-color);\n }\n mushroom-shape-icon$: |\n .shape {\n --shape-color: var(--md-sys-color-secondary) !important;\n }\n mushroom-number-value-control$: |\n mushroom-slider {\n --main-color: var(--md-sys-color-primary) !important;\n --bg-color: var(--md-sys-color-on-primary) !important;\n }\n select_card:\n variables:\n entity: ''\n name: ''\n icon: ''\n card:\n type: custom:mushroom-select-card\n entity: '[[entity]]'\n name: '[[name]]'\n icon: '[[icon]]'\n fill_container: true\n uix:\n style:\n .: |\n ha-state-icon {\n color: var(--md-sys-color-secondary);\n }\n mushroom-shape-icon$: |\n .shape {\n --shape-color: none !important;\n }\n mushroom-select-option-control$:\n mushroom-select$: |\n mwc-menu {\n --mdc-theme-text-primary-on-background: var(--primary-text-color);\n --mdc-theme-primary: var(--primary-color);\n --mdc-theme-surface: inherit;\n }\n button_card:\n variables:\n entity: ''\n icon: m3of:switch\n background_color: color-mix(in srgb, var(--md-sys-color-primary) 50%, transparent)\n card:\n type: custom:button-card\n entity: '[[entity]]'\n icon: '[[icon]]'\n show_name: true\n show_state: true\n show_label: false\n tap_action:\n action: toggle\n hold_action:\n action: more-info\n state:\n - value: 'on'\n styles:\n card:\n - background-color: '[[background_color]]'\n name:\n - color: white\n state:\n - color: white\n icon:\n - color: white\n - value: 'off'\n styles:\n card:\n - background-color: >-\n color-mix(in srgb, var(--md-sys-color-primary) 15%,\n transparent)\n icon:\n - color: grey\n styles:\n card:\n - height: 95px\n - border-radius: 30px\n - box-shadow: none\n - padding: 0 20px 0 28px\n grid:\n - grid-template-areas: '\"i n\" \"i s\"'\n - grid-template-columns: 36px 1fr\n - grid-template-rows: 1fr 1fr\n - align-items: center\n icon:\n - width: 24px\n - height: 24px\n - margin-right: 14px\n name:\n - align-self: end\n - justify-self: start\n - padding-left: 7px\n - font-size: 14px\n - font-weight: 500\n - line-height: 1.5\n state:\n - align-self: start\n - justify-self: start\n - padding-left: 7px\n - font-size: 14px\n - line-height: 1.5\n - opacity: 0.7\n light_card:\n variables:\n entity: ''\n name: ''\n icon: ''\n card:\n type: custom:big-slider-card\n entity: '[[entity]]'\n name: '[[name]]'\n icon: '[[icon]]'\n attribute: brightness\n transition: 0.3\n height: 95\n background_color: color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent)\n icon_color: white\n colorize: true\n show_percentage: true\n tap_action:\n action: toggle\n hold_action:\n action: more-info\n room_card:\n default:\n - name: ''\n - icon: ''\n - navigation_path: ''\n - entity_id_temperature: ''\n - entity_id_humidity: ''\n - entity_id_ac: ''\n - entity_id_ac_main: ''\n - entity_id_lights: ''\n - entity_id_covers: ''\n - entity_id_fans: ''\n - entity_id_doors: ''\n - entity_id_windows: ''\n - entity_id_speakers: ''\n - entity_id_custom_1: ''\n - entity_id_custom_2: ''\n - entity_id_custom_3: ''\n - entity_id_custom_4: ''\n - lights_count_sensor: ''\n - covers_count_sensor: ''\n - fans_count_sensor: ''\n - doors_count_sensor: ''\n - windows_count_sensor: ''\n - speakers_count_sensor: ''\n - lights_icon: ''\n - custom_1_icon: ''\n - custom_2_icon: ''\n - custom_3_icon: ''\n - custom_4_icon: ''\n - custom_1_color: ''\n - custom_2_color: ''\n - custom_3_color: ''\n - custom_4_color: ''\n - room_background: '#f5f5f5'\n - animation_delay: 0s\n card:\n type: custom:stack-in-card\n mode: horizontal\n cards:\n - type: vertical-stack\n cards:\n - type: custom:mushroom-template-card\n primary: '[[name]]'\n secondary: >\n {% set temp = states('[[entity_id_temperature]]') %} {% set hum\n = states('[[entity_id_humidity]]') %} {% set unit =\n state_attr('weather.home', 'temperature_unit') or '°C' %} {% set\n parts = [] %} {% if temp | is_number %}\n {% set parts = parts + [temp | round(1) ~ unit] %}\n {% endif %} {% if hum | is_number %}\n {% set parts = parts + [hum | round(1) ~ '%'] %}\n {% endif %} {{ parts | join(' / ') }}\n tap_action:\n action: navigate\n navigation_path: '[[navigation_path]]'\n uix:\n style: |\n ha-card {\n --primary-text-color: black;\n border: 0;\n padding: 5px 0 0 5px;\n width: 500px;\n }\n - type: custom:mushroom-template-card\n entity: '[[entity_id_lights]]'\n layout: horizontal\n icon: '[[icon]]'\n icon_color: >-\n {{ 'rgba(252, 242, 212, 1)' if is_state('[[entity_id_lights]]',\n 'on') else 'rgba(91, 91, 91, 1)' }}\n tap_action:\n action: navigate\n navigation_path: '[[navigation_path]]'\n uix:\n style:\n ha-tile-icon$: |\n .container {\n width: 120px !important;\n height: 120px !important;\n border-radius: 50%;\n }\n .: |\n ha-tile-icon {\n --mdc-icon-size: 90px;\n }\n ha-card {\n border: none;\n margin: -8px 0 0 -28px;\n }\n - type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_ac_main]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_ac_main]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_ac]]'\n tap_action:\n action: toggle\n icon: |\n {% if is_state('[[entity_id_ac]]', 'off') %}\n m3o:heat-pump\n {% else %}\n m3of:heat-pump\n {% endif %}\n uix:\n style: >\n @keyframes chip-drop {\n 0% { opacity: 0; transform: translateY(-12px) scale(0.85); }\n 60% { transform: translateY(3px) scale(1.05); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n @keyframes cool-pulse {\n 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); }\n 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); }\n 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); }\n }\n\n @keyframes heat-pulse {\n 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); }\n 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); }\n 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); }\n }\n\n @keyframes fan-spin {\n 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); }\n 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); }\n 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); }\n }\n\n @keyframes dry-fade {\n 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); }\n 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); }\n }\n\n {% set base = '[[animation_delay]]' | replace('s','') |\n float %}\n\n {% set d = (base + 0.05) | round(2) %}\n\n {% set ac_main = states('[[entity_id_ac_main]]') %}\n\n {% set ac = states('[[entity_id_ac]]') %}\n\n ha-card {\n --chip-background:\n {% if ac == 'heat_cool' and ac_main == 'cool' %} #b5e0f7\n {% elif ac == 'heat_cool' and ac_main == 'heat' %} #fa6f66\n {% elif ac == 'heat_cool' and ac_main == 'fan_only' %} #c3fae8\n {% elif ac == 'heat_cool' and ac_main == 'dry' %} #cfba74\n {% elif ac == 'heat_cool' and ac_main == 'off' %} #FFFFFF\n {% else %} #353535\n {% endif %};\n --color: {% if ac == 'off' %} #dbdbdb {% else %} #353535 {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n {% if ac == 'heat_cool' and ac_main == 'cool' %}\n 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;\n {% elif ac == 'heat_cool' and ac_main == 'heat' %}\n 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;\n {% elif ac == 'heat_cool' and ac_main == 'fan_only' %}\n 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;\n {% elif ac == 'heat_cool' and ac_main == 'dry' %}\n 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;\n {% else %}\n animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;\n {% endif %}\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_lights]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_lights]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_lights]]'\n tap_action:\n action: more-info\n icon: '[[lights_icon]]'\n content: >-\n {{ states('[[lights_count_sensor]]') if\n states('[[lights_count_sensor]]') != '0' else '' }}\n uix:\n style: >\n @keyframes chip-drop {\n 0% { opacity: 0; transform: translateY(-12px) scale(0.85); }\n 60% { transform: translateY(3px) scale(1.05); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n {% set base = '[[animation_delay]]' | replace('s','') |\n float %}\n\n {% set d = (base + 0.12) | round(2) %}\n\n {% set light_state = states('[[entity_id_lights]]') %}\n\n {% set is_on = light_state == 'on' %}\n\n ha-card {\n animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;\n --chip-background: {% if is_on %} #fcf2d4 {% else %} #353535 {% endif %};\n --color: {% if is_on %} #5b5326 {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_on %} #5b5326 {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_covers]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_covers]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_covers]]'\n tap_action:\n action: more-info\n icon: >\n {% if is_state('[[entity_id_covers]]', 'open') or\n is_state('[[entity_id_covers]]', 'opening') %}\n m3of:curtains\n {% else %}\n m3of:curtains-closed\n {% endif %}\n content: >-\n {{ states('[[covers_count_sensor]]') if\n states('[[covers_count_sensor]]') != '0' else '' }}\n uix:\n style: >\n @keyframes chip-drop {\n 0% { opacity: 0; transform: translateY(-12px) scale(0.85); }\n 60% { transform: translateY(3px) scale(1.05); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n {% set base = '[[animation_delay]]' | replace('s','') |\n float %}\n\n {% set d = (base + 0.19) | round(2) %}\n\n {% set cover_state = states('[[entity_id_covers]]') %}\n\n {% set is_on = cover_state in ['open', 'opening'] %}\n\n ha-card {\n animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;\n --chip-background: {% if is_on %} #702963 {% else %} #353535 {% endif %};\n --color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_fans]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_fans]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_fans]]'\n tap_action:\n action: more-info\n icon: |\n {% if is_state('[[entity_id_fans]]', 'on') %}\n mdi:fan\n {% else %}\n mdi:fan-off\n {% endif %}\n content: >-\n {{ states('[[fans_count_sensor]]') if\n states('[[fans_count_sensor]]') != '0' else '' }}\n uix:\n style: >\n @keyframes chip-drop {\n 0% { opacity: 0; transform: translateY(-12px) scale(0.85); }\n 60% { transform: translateY(3px) scale(1.05); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n {% set base = '[[animation_delay]]' | replace('s','') |\n float %}\n\n {% set d = (base + 0.26) | round(2) %}\n\n {% set fan_state = states('[[entity_id_fans]]') %}\n\n {% set is_on = fan_state == 'on' %}\n\n ha-card {\n animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;\n --chip-background: {% if is_on %} #89CFF0 {% else %} #353535 {% endif %};\n --color: {% if is_on %} #000000 {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_on %} #000000 {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_speakers]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_speakers]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_speakers]]'\n tap_action:\n action: more-info\n icon: >\n {% if is_state('[[entity_id_speakers]]', 'on') or\n is_state('[[entity_id_speakers]]', 'playing') or\n is_state('[[entity_id_speakers]]', 'paused') %}\n mdi:speaker\n {% else %}\n mdi:speaker-off\n {% endif %}\n content: >-\n {{ states('[[speakers_count_sensor]]') if\n states('[[speakers_count_sensor]]') != '0' else '' }}\n uix:\n style: >\n @keyframes chip-drop {\n 0% { opacity: 0; transform: translateY(-12px) scale(0.85); }\n 60% { transform: translateY(3px) scale(1.05); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n {% set base = '[[animation_delay]]' | replace('s','') |\n float %}\n\n {% set d = (base + 0.33) | round(2) %}\n\n {% set speaker_state = states('[[entity_id_speakers]]') %}\n\n {% set is_on = speaker_state in ['on', 'playing', 'paused']\n %}\n\n ha-card {\n animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;\n --chip-background: {% if is_on %} #AFE1AF {% else %} #353535 {% endif %};\n --color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_windows]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_windows]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_windows]]'\n tap_action:\n action: more-info\n icon: |\n {% if is_state('[[entity_id_windows]]', 'on') %}\n m3of:window-open\n {% else %}\n m3of:window-closed\n {% endif %}\n content: >-\n {{ states('[[windows_count_sensor]]') if\n states('[[windows_count_sensor]]') != '0' else '' }}\n uix:\n style: >\n @keyframes chip-drop {\n 0% { opacity: 0; transform: translateY(-12px) scale(0.85); }\n 60% { transform: translateY(3px) scale(1.05); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n {% set base = '[[animation_delay]]' | replace('s','') |\n float %}\n\n {% set d = (base + 0.40) | round(2) %}\n\n {% set window_state = states('[[entity_id_windows]]') %}\n\n {% set is_on = window_state == 'on' %}\n\n ha-card {\n animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;\n --chip-background: {% if is_on %} #ffaa00 {% else %} #353535 {% endif %};\n --color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_doors]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_doors]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_doors]]'\n tap_action:\n action: more-info\n icon: |\n {% if is_state('[[entity_id_doors]]', 'on') %}\n m3o:door-open\n {% else %}\n m3of:door-front\n {% endif %}\n content: >-\n {{ states('[[doors_count_sensor]]') if\n states('[[doors_count_sensor]]') != '0' else '' }}\n uix:\n style: >\n @keyframes chip-drop {\n 0% { opacity: 0; transform: translateY(-12px) scale(0.85); }\n 60% { transform: translateY(3px) scale(1.05); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n {% set base = '[[animation_delay]]' | replace('s','') |\n float %}\n\n {% set d = (base + 0.47) | round(2) %}\n\n {% set door_state = states('[[entity_id_doors]]') %}\n\n {% set is_on = door_state == 'on' %}\n\n ha-card {\n animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;\n --chip-background: {% if is_on %} #bc000a {% else %} #353535 {% endif %};\n --color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_on %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_custom_1]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_custom_1]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_custom_1]]'\n tap_action:\n action: more-info\n icon: >\n {% set current_state = states('[[entity_id_custom_1]]') %} {%\n set is_active = current_state in ['on', 'playing', 'paused',\n 'locked'] and current_state not in ['docked', 'off', 'idle',\n 'unavailable', 'unknown', 'unlocked'] %} {% if is_active %}\n [[custom_1_icon_active]]\n {% else %}\n [[custom_1_icon_inactive]]\n {% endif %}\n uix:\n style: >\n @keyframes chip-drop {\n 0% { opacity: 0; transform: translateY(-12px) scale(0.85); }\n 60% { transform: translateY(3px) scale(1.05); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n {% set base = '[[animation_delay]]' | replace('s','') |\n float %}\n\n {% set d = (base + 0.54) | round(2) %}\n\n {% set current_state = states('[[entity_id_custom_1]]') %}\n\n {% set is_active = current_state in ['on', 'playing',\n 'paused', 'locked'] and current_state not in ['docked',\n 'off', 'idle', 'unavailable', 'unknown', 'unlocked'] %}\n\n ha-card {\n animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;\n --chip-background: {% if is_active %} [[custom_1_color]] {% else %} #353535 {% endif %};\n --color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_custom_2]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_custom_2]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_custom_2]]'\n tap_action:\n action: more-info\n icon: >\n {% set current_state = states('[[entity_id_custom_2]]') %} {%\n set is_active = current_state in ['on', 'playing', 'paused',\n 'locked'] and current_state not in ['docked', 'off', 'idle',\n 'unavailable', 'unknown', 'unlocked'] %} {% if is_active %}\n [[custom_2_icon_active]]\n {% else %}\n [[custom_2_icon_inactive]]\n {% endif %}\n uix:\n style: >\n @keyframes chip-drop {\n 0% { opacity: 0; transform: translateY(-12px) scale(0.85); }\n 60% { transform: translateY(3px) scale(1.05); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n {% set base = '[[animation_delay]]' | replace('s','') |\n float %}\n\n {% set d = (base + 0.61) | round(2) %}\n\n {% set current_state = states('[[entity_id_custom_2]]') %}\n\n {% set is_active = current_state in ['on', 'playing',\n 'paused', 'locked'] and current_state not in ['docked',\n 'off', 'idle', 'unavailable', 'unknown', 'unlocked'] %}\n\n ha-card {\n animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;\n --chip-background: {% if is_active %} [[custom_2_color]] {% else %} #353535 {% endif %};\n --color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_custom_3]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_custom_3]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_custom_3]]'\n tap_action:\n action: more-info\n icon: >\n {% set current_state = states('[[entity_id_custom_3]]') %} {%\n set is_active = current_state in ['on', 'playing', 'paused',\n 'locked'] and current_state not in ['docked', 'off', 'idle',\n 'unavailable', 'unknown', 'unlocked'] %} {% if is_active %}\n [[custom_3_icon_active]]\n {% else %}\n [[custom_3_icon_inactive]]\n {% endif %}\n uix:\n style: >\n @keyframes chip-drop {\n 0% { opacity: 0; transform: translateY(-12px) scale(0.85); }\n 60% { transform: translateY(3px) scale(1.05); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n {% set base = '[[animation_delay]]' | replace('s','') |\n float %}\n\n {% set d = (base + 0.68) | round(2) %}\n\n {% set current_state = states('[[entity_id_custom_3]]') %}\n\n {% set is_active = current_state in ['on', 'playing',\n 'paused', 'locked'] and current_state not in ['docked',\n 'off', 'idle', 'unavailable', 'unknown', 'unlocked'] %}\n\n ha-card {\n animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;\n --chip-background: {% if is_active %} [[custom_3_color]] {% else %} #353535 {% endif %};\n --color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_custom_4]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_custom_4]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_custom_4]]'\n tap_action:\n action: more-info\n icon: >\n {% set current_state = states('[[entity_id_custom_4]]') %} {%\n set is_active = current_state in ['on', 'playing', 'paused',\n 'locked'] and current_state not in ['docked', 'off', 'idle',\n 'unavailable', 'unknown', 'unlocked'] %} {% if is_active %}\n [[custom_4_icon_active]]\n {% else %}\n [[custom_4_icon_inactive]]\n {% endif %}\n uix:\n style: >\n @keyframes chip-drop {\n 0% { opacity: 0; transform: translateY(-12px) scale(0.85); }\n 60% { transform: translateY(3px) scale(1.05); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n {% set base = '[[animation_delay]]' | replace('s','') |\n float %}\n\n {% set d = (base + 0.75) | round(2) %}\n\n {% set current_state = states('[[entity_id_custom_4]]') %}\n\n {% set is_active = current_state in ['on', 'playing',\n 'paused', 'locked'] and current_state not in ['docked',\n 'off', 'idle', 'unavailable', 'unknown', 'unlocked'] %}\n\n ha-card {\n animation: chip-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both {{ d }}s;\n --chip-background: {% if is_active %} [[custom_4_color]] {% else %} #353535 {% endif %};\n --color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n --text-color: {% if is_active %} #ffffff {% else %} #dbdbdb {% endif %};\n height: 35px;\n width: 35px;\n border-radius: 22px;\n }\n uix:\n style: |\n .chip-container {\n flex-flow: column wrap-reverse !important;\n display: flex !important;\n --chip-spacing: 8px;\n margin: 9px;\n }\n uix:\n style: |\n ha-card {\n {% set temp = states('[[entity_id_temperature]]') %}\n {% if temp in ['unavailable', 'unknown', ''] %}\n background: [[room_background]];\n {% else %}\n {% set t = temp | float %}\n background:\n {% if t < 13 %} rgba(172, 156, 175, 0.8)\n {% elif t < 16 %} rgba(215, 196, 219, 0.8)\n {% elif t < 19 %} rgba(163, 217, 245, 0.8)\n {% elif t < 22 %} rgba(205, 227, 219, 0.8)\n {% elif t < 24 %} rgba(255, 229, 153, 0.8)\n {% elif t < 27 %} rgba(247, 190, 129, 0.8)\n {% else %} rgba(228, 143, 123, 0.8) {% endif %};\n {% endif %}\n height: 186px;\n }\n room_selector:\n card:\n type: vertical-stack\n cards:\n - type: custom:bubble-card\n card_type: pop-up\n hash: '#room-selector'\n name: Room Selector\n icon: m3of:gmail-rooms\n styles: |-\n #root {\n max-height: 100% !important;\n transition: transform var(--md-sys-motion-expressive-spatial-default) !important;\n }\n .bubble-pop-up-container {\n padding-bottom: 64px !important;\n }\n button_type: name\n sub_button:\n main: []\n bottom: []\n slider_fill_orientation: left\n slider_value_position: right\n margin_top_mobile: calc(100vh - 475px)\n - type: custom:simple-swipe-card\n auto_hide_pagination: 0\n auto_height: true\n cards:\n - type: custom:vertical-stack-in-card\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: mdi:garage-variant\n features_position: bottom\n primary: Garage\n color: '#ff595e'\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /mobile-dashboard/garage\n - type: custom:mushroom-template-card\n icon: mdi:sofa\n features_position: bottom\n primary: Living Area\n color: '#ff924c'\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /mobile-dashboard/living-area\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: m3of:bed\n features_position: bottom\n primary: Master Bedroom\n color: '#ffca3a'\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /mobile-dashboard/master-bedroom\n - type: custom:mushroom-template-card\n icon: mdi:baby-carriage\n features_position: bottom\n primary: Baby Room\n color: '#c5ca30'\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /mobile-dashboard/baby-room\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: m3of:person-3\n features_position: bottom\n primary: Single Guest Room\n color: '#8ac926'\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /mobile-dashboard/single-guest-room\n - type: custom:mushroom-template-card\n icon: m3of:groups-2\n features_position: bottom\n primary: Multiple Guest Room\n color: '#52a675'\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /mobile-dashboard/multiple-guest-room\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: custom:vertical-stack-in-card\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: mdi:table-furniture\n features_position: bottom\n primary: Entrance\n color: '#1982c4'\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /mobile-dashboard/entrance\n - type: custom:mushroom-template-card\n icon: m3of:computer\n features_position: bottom\n primary: Office\n color: '#4267ac'\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /mobile-dashboard/office\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: m3of:water-drop\n features_position: bottom\n primary: Guest Bathroom\n color: '#6a4c93'\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /mobile-dashboard/guest-bathroom\n - type: custom:mushroom-template-card\n icon: mdi:light-flood-down\n features_position: bottom\n primary: Driveway\n color: '#b5a6c9'\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /mobile-dashboard/driveway\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n camera_generic_with_chips_card:\n default:\n - camera_url: ''\n - camera_height: ''\n - entity_id_light_one: ''\n - entity_id_light_two: ''\n - entity_id_light_three: ''\n - light_one_icon: ''\n - light_two_icon: ''\n - light_three_icon: ''\n - animation_delay: 0s\n variables:\n - camera_entity\n - camera_height\n - entity_id_light_one\n - entity_id_light_two\n - light_one_icon\n - light_two_icon\n - animation_delay\n card:\n type: vertical-stack\n cards:\n - type: custom:webrtc-camera\n streams:\n - entity: '[[camera_entity]]'\n muted: true\n uix:\n style: |\n ha-card {\n height: [[camera_height]];\n overflow: hidden;\n }\n - type: custom:mushroom-chips-card\n alignment: start\n chips:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_light_one]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_light_one]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_light_one]]'\n icon: '[[light_one_icon]]'\n tap_action:\n action: toggle\n content: |\n {{ states['[[entity_id_light_one]]'].name }}\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};\n --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)' }};\n animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.3s) both;\n }\n @keyframes slideInLeft {\n from { \n opacity: 0;\n transform: translateX(-8px);\n }\n to { \n opacity: 1;\n transform: translateX(0);\n }\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_light_two]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_light_two]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_light_two]]'\n icon: '[[light_two_icon]]'\n tap_action:\n action: toggle\n content: |\n {{ states['[[entity_id_light_two]]'].name }}\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};\n --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)' }};\n animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.5s) both;\n }\n @keyframes slideInLeft {\n from { \n opacity: 0;\n transform: translateX(-8px);\n }\n to { \n opacity: 1;\n transform: translateX(0);\n }\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_light_three]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_light_three]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_light_three]]'\n icon: '[[light_three_icon]]'\n tap_action:\n action: toggle\n content: |\n {{ states['[[entity_id_light_three]]'].name }}\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_three]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_three]]', 'on') else 'var(--md-sys-color-primary)' }};\n --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)' }};\n animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.5s) both;\n }\n @keyframes slideInLeft {\n from { \n opacity: 0;\n transform: translateX(-8px);\n }\n to { \n opacity: 1;\n transform: translateX(0);\n }\n }\n camera_rtsp_with_chips_card:\n default:\n - camera_url: ''\n - camera_height: ''\n - entity_id_light_one: ''\n - entity_id_light_two: ''\n - entity_id_light_three: ''\n - light_one_icon: ''\n - light_two_icon: ''\n - light_three_icon: ''\n - animation_delay: 0s\n variables:\n - camera_url\n - camera_height\n - entity_id_light_one\n - entity_id_light_two\n - light_one_icon\n - light_two_icon\n - animation_delay\n card:\n type: vertical-stack\n cards:\n - type: custom:webrtc-camera\n url: '[[camera_url]]'\n uix:\n style: |\n ha-card {\n height: [[camera_height]];\n overflow: hidden;\n }\n - type: custom:mushroom-chips-card\n alignment: start\n chips:\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_light_one]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_light_one]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_light_one]]'\n icon: '[[light_one_icon]]'\n tap_action:\n action: toggle\n content: |\n {{ states['[[entity_id_light_one]]'].name }}\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_one]]', 'on') else 'var(--md-sys-color-primary)' }};\n --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)' }};\n animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.3s) both;\n }\n @keyframes slideInLeft {\n from { \n opacity: 0;\n transform: translateX(-8px);\n }\n to { \n opacity: 1;\n transform: translateX(0);\n }\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_light_two]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_light_two]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_light_two]]'\n icon: '[[light_two_icon]]'\n tap_action:\n action: toggle\n content: |\n {{ states['[[entity_id_light_two]]'].name }}\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_two]]', 'on') else 'var(--md-sys-color-primary)' }};\n --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)' }};\n animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.5s) both;\n }\n @keyframes slideInLeft {\n from { \n opacity: 0;\n transform: translateX(-8px);\n }\n to { \n opacity: 1;\n transform: translateX(0);\n }\n }\n - type: conditional\n conditions:\n - condition: state\n entity: '[[entity_id_light_three]]'\n state_not: unknown\n - condition: state\n entity: '[[entity_id_light_three]]'\n state_not: unavailable\n chip:\n type: template\n entity: '[[entity_id_light_three]]'\n icon: '[[light_three_icon]]'\n tap_action:\n action: toggle\n content: |\n {{ states['[[entity_id_light_three]]'].name }}\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_three]]', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('[[entity_id_light_three]]', 'on') else 'var(--md-sys-color-primary)' }};\n --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)' }};\n animation: slideInLeft 0.3s ease-out calc([[animation_delay]] + 0.5s) both;\n }\n @keyframes slideInLeft {\n from { \n opacity: 0;\n transform: translateX(-8px);\n }\n to { \n opacity: 1;\n transform: translateX(0);\n }\n }\n irrigation_card:\n variables:\n switch_entity: ''\n flow_sensor: ''\n timer_entity: ''\n zone: ''\n soil_moisture_sensor: ''\n soil_temperature_sensor: ''\n card:\n type: custom:vertical-stack-in-card\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n entity: '[[switch_entity]]'\n primary: |\n {{ states('[[flow_sensor]]') | round(1) }} m³/h\n secondary: >\n {% set flow = states('[[flow_sensor]]') | float(0) %} {% if\n is_state('[[switch_entity]]', 'on') %}\n {% if flow < 0.1 %} Minimal Water Flow\n {% elif flow < 0.3 %} Low Water Flow\n {% elif flow < 0.6 %} Moderate Water Flow\n {% else %} High Water Flow\n {% endif %}\n {% else %}\n Water Flow\n {% endif %}\n icon: m3of:sprinkler\n tap_action:\n action: toggle\n color: >\n {% set flow = states('[[flow_sensor]]') | float %} {% if flow <\n 0.1 %} #A9A9A9 {% elif flow < 0.3 %} #ffd34f {% elif flow < 0.6\n %} #9fe7e8 {% else %} #36a9e2 {% endif %}\n features_position: bottom\n - type: conditional\n conditions:\n - condition: state\n entity: '[[timer_entity]]'\n state: active\n card:\n type: custom:timer-bar-card\n entity: '[[timer_entity]]'\n name: Sprinkler\n invert: true\n bar_direction: ltr\n bar_width: 60%\n mushroom:\n layout: horizontal\n color: '#4CBB17'\n - type: custom:config-template-card\n entities:\n - '[[flow_sensor]]'\n variables:\n - states['[[flow_sensor]]'].state\n card:\n type: custom:mini-graph-card\n entities:\n - entity: '[[flow_sensor]]'\n name: Water Flow\n color: |-\n ${vars[0] < 0.1 ? '#a9a9a9' :\n (vars[0] < 0.3 ? '#ffd34f' :\n (vars[0] < 0.6 ? '#9fe7e8' :\n '#36a9e2'))}\n hours_to_show: 24\n line_width: 3\n font_size: 50\n animate: true\n height: 150\n show:\n name: false\n icon: false\n state: false\n legend: false\n fill: fade\n - type: conditional\n conditions:\n - condition: state\n entity: '[[soil_moisture_sensor]]'\n state_not: unavailable\n - condition: state\n entity: '[[soil_moisture_sensor]]'\n state_not: unknown\n card:\n type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n entity: '[[soil_moisture_sensor]]'\n icon: m3of:water-drop\n primary: >\n {% set moisture = states('[[soil_moisture_sensor]]') |\n float(0) %} Moist: {{ moisture | round(1) }} %\n secondary: >\n {% set moisture = states('[[soil_moisture_sensor]]') |\n float(0) %} {% if moisture < 15 %} Very Dry {% elif moisture <\n 25 %} Dry {% elif moisture < 45 %} Moist {% else %} Wet {%\n endif %}\n color: >\n {% set moisture = states('[[soil_moisture_sensor]]') |\n float(0) %} {% if moisture < 15 %} #A9A9A9 {% elif moisture <\n 25 %} #ffd34f {% elif moisture < 45 %} #9fe7e8 {% else %}\n #36a9e2 {% endif %}\n features_position: bottom\n multiline_secondary: true\n - type: custom:mushroom-template-card\n entity: '[[soil_temperature_sensor]]'\n icon: m3of:thermometer\n primary: >\n {% set temp = states('[[soil_temperature_sensor]]') | float(0)\n %} Temp: {{ temp | round(1) }} {{\n state_attr('weather.forecast_home', 'temperature_unit') }}\n secondary: >\n {% set temp = states('[[soil_temperature_sensor]]') | float(0)\n %} {% if temp < 16 %} Very Cold {% elif temp < 18 %} Cool {%\n elif temp < 22 %} Mild {% elif temp < 24 %} Warm {% elif temp\n < 27 %} Hot {% else %} Very Hot {% endif %}\n color: >\n {% set temp = states('[[soil_temperature_sensor]]') | float(0)\n %} {% if temp < 16 %} #CEB2F5 {% elif temp < 18 %} #5EBDEE {%\n elif temp < 22 %} #9cc8b8 {% elif temp < 24 %} #e7b562 {% elif\n temp < 27 %} #FF564B {% else %} #99332d {% endif %}\n features_position: bottom\n multiline_secondary: true\n - type: custom:streamline-card\n template: title_card\n variables:\n - title: Irrigation Control\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: mdi:timer-outline\n primary: 5 m\n tap_action:\n action: call-service\n service: script.start_sprinkler_timer\n data:\n zone: '[[zone]]'\n duration: '00:05:00'\n layout: vertical\n - type: custom:mushroom-template-card\n icon: mdi:timer-outline\n primary: 15 m\n tap_action:\n action: call-service\n service: script.start_sprinkler_timer\n data:\n zone: '[[zone]]'\n duration: '00:15:00'\n layout: vertical\n - type: custom:mushroom-template-card\n icon: mdi:timer-outline\n primary: 30 m\n tap_action:\n action: call-service\n service: script.start_sprinkler_timer\n data:\n zone: '[[zone]]'\n duration: '00:30:00'\n layout: vertical\n - type: custom:mushroom-template-card\n icon: mdi:timer-outline\n primary: 1 hr\n tap_action:\n action: call-service\n service: script.start_sprinkler_timer\n data:\n zone: '[[zone]]'\n duration: '01:00:00'\n layout: vertical\n - type: custom:mushroom-template-card\n icon: mdi:timer-outline\n primary: 2 hr\n tap_action:\n action: call-service\n service: script.start_sprinkler_timer\n data:\n zone: '[[zone]]'\n duration: '02:00:00'\n layout: vertical\nbutton_card_templates:\n sensor_battery:\n name: |\n [[[ return entity.attributes.device_name; ]]]\n label: |\n [[[ return entity.state + '%' ]]]\n show_icon: true\n show_label: true\n icon: |\n [[[\n var state = parseFloat(entity.state);\n if (state <= 15) {\n return 'mdi:battery-alert';\n } else if (state <= 25) {\n return 'mdi:battery-20';\n } else if (state <= 35) {\n return 'mdi:battery-30';\n } else if (state <= 45) {\n return 'mdi:battery-40';\n } else if (state <= 55) {\n return 'mdi:battery-50';\n } else if (state <= 65) {\n return 'mdi:battery-60';\n } else if (state <= 75) {\n return 'mdi:battery-70';\n } else if (state <= 85) {\n return 'mdi:battery-80';\n } else if (state <= 95) {\n return 'mdi:battery-90';\n } else if (state <= 100) {\n return 'mdi:battery';\n } else {\n return 'mdi:battery-unknown';\n }\n ]]]\n styles:\n card:\n - padding: 12px 16px 10px 16px\n - height: 140px\n - background: var(--card-background-color)\n - border-radius: 16px\n grid:\n - grid-template-areas: '\"i l\" \"n n\" \"sub sub\" \"bar bar\"'\n - grid-template-columns: auto 1fr\n - grid-template-rows: auto auto auto 1fr\n label:\n - justify-self: end\n - align-self: start\n - font-size: 23px\n - font-weight: 500\n - padding-right: 4px\n - color: |\n [[[\n var state = parseFloat(entity.state);\n if (state <= 20) return '#F95454';\n if (state <= 40) return '#FF9C73';\n if (state <= 60) return '#FBD288';\n if (state <= 80) return '#78B3CE';\n return '#9EDF9C';\n ]]]\n name:\n - justify-self: start\n - align-self: start\n - font-size: 14px\n - font-weight: 500\n - color: var(--primary-text-color)\n - padding-left: 0px\n - margin-top: 4px\n - white-space: nowrap\n - overflow: hidden\n - text-overflow: ellipsis\n img_cell:\n - justify-self: start\n - align-self: start\n - background: |\n [[[\n var state = parseFloat(entity.state);\n if (state <= 20) return 'rgba(249,84,84,0.18)';\n if (state <= 40) return 'rgba(255,156,115,0.18)';\n if (state <= 60) return 'rgba(251,210,136,0.18)';\n if (state <= 80) return 'rgba(120,179,206,0.18)';\n return 'rgba(158,223,156,0.18)';\n ]]]\n - padding: 10px\n - border-radius: 50%\n - width: 24px\n - height: 24px\n - margin-right: 8px\n icon:\n - width: 24px\n - height: 24px\n - color: |\n [[[\n var state = parseFloat(entity.state);\n if (state <= 20) return '#F95454';\n if (state <= 40) return '#FF9C73';\n if (state <= 60) return '#FBD288';\n if (state <= 80) return '#78B3CE';\n return '#9EDF9C';\n ]]]\n custom_fields:\n sub:\n - justify-self: start\n - font-size: 12px\n - color: var(--secondary-text-color)\n - margin-top: 2px\n - padding-left: 0px\n - align-self: start\n bar:\n - justify-self: start\n - width: 100%\n - margin-top: 8px\n - height: 4px\n - border-radius: 4px\n - background: rgba(128,128,128,0.2)\n - overflow: hidden\n custom_fields:\n sub: |\n [[[\n const battery = entity.attributes.battery_type_and_quantity || '';\n const lastUpdated = entity.last_updated;\n let timeStr = '';\n if (lastUpdated) {\n const diffSeconds = Math.floor((new Date() - new Date(lastUpdated)) / 1000);\n if (diffSeconds < 60) timeStr = `${diffSeconds}s ago`;\n else if (diffSeconds < 3600) timeStr = `${Math.floor(diffSeconds/60)}m ago`;\n else if (diffSeconds < 86400) timeStr = `${Math.floor(diffSeconds/3600)}h ago`;\n else timeStr = `${Math.floor(diffSeconds/86400)}d ago`;\n }\n const parts = [battery, timeStr].filter(Boolean);\n return parts.join(' · ');\n ]]]\n bar: |\n [[[\n var state = parseFloat(entity.state);\n var color;\n if (state <= 20) color = '#F95454';\n else if (state <= 40) color = '#FF9C73';\n else if (state <= 60) color = '#FBD288';\n else if (state <= 80) color = '#78B3CE';\n else color = '#9EDF9C';\n return `
\n
\n
`;\n ]]]\nviews:\n - title: Overview\n type: custom:grid-layout\n layout:\n grid-template-columns: 25% 25% 25% 25%\n grid-template-rows: auto\n grid-template-areas: |\n \"greeting simple_tab weather calendar_notification\"\n \"room_selector . . calendar_notification\" \n \"room1 room2 room3 calendar_notification\" \n \"camera1 camera2 camera3 calendar_notification\"\n cards:\n - type: vertical-stack\n cards:\n - type: custom:mushroom-title-card\n alignment: start\n title: |\n {{ now().strftime('%a %b %-d - %-I:%M %p') }}\n uix:\n style: |\n ha-card {\n\n animation: fadeInDown 1.0s ease-out;\n }\n @keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n - type: custom:paper-buttons-row\n styles:\n justify-content: flex-start\n flex-wrap: wrap\n font-size: 0.9em\n line-height: 1.2em\n margin: 6px 0 2px 0\n width: 100%\n buttons:\n - layout: name|icon\n entity: weather.home\n name: >-\n {% set temp = state_attr('weather.home', 'temperature') %} {%\n set unit = state_attr('weather.home', 'temperature_unit') %}\n {% set condition = states('weather.forecast_home') | title %}\n {% if is_state('binary_sensor.outdoor_rain_sensor_water_leak',\n 'on') %}\n {{ temp }} {{ unit }}, Raining\n {% else %}\n {{ temp }} {{ unit }}, {{ condition }}\n {% endif %}\n icon: >-\n {% if is_state('binary_sensor.outdoor_rain_sensor_water_leak',\n 'on') %}\n mdi:weather-pouring\n {% else %}\n {{ states('sensor.weather_condition_icon') }}\n {% endif %}\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n styles:\n icon:\n color: var(--md-sys-color-primary)\n name:\n color: var(--md-sys-color-primary)\n font-weight: bold\n button:\n padding: 2px 8px\n background-color: >-\n color-mix(in srgb, var(--md-sys-color-on-primary) 25%,\n transparent)\n border-radius: 24px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n animation: slideInLeft 0.3s ease-out 0.5s both\n transition: all 0.3s ease\n - layout: name\n name: ·\n styles:\n button:\n flex-basis: 1\n flex-shrink: 0\n animation: fadeIn 0.8s ease-out 1.1s both\n name:\n color: var(--primary-text-color)\n tap_action:\n action: none\n - layout: name\n entity: weather.home\n name: >-\n {% set forecast =\n state_attr('sensor.daily_weather_data_google_weather',\n 'forecast_data') %} {% if forecast is defined and\n forecast.temperature is defined %}\n {{ forecast.temperature | round(0) | int }}°🔺 / {{ forecast.templow | round(0) | int }}° {{ state_attr('weather.home', 'temperature_unit') }}🔻\n {% else %}\n N/A {{ state_attr('weather.home', 'temperature_unit') }}\n {% endif %}\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n styles:\n name:\n color: var(--md-sys-color-primary)\n font-weight: bold\n button:\n padding: 2px 8px\n background-color: >-\n color-mix(in srgb, var(--md-sys-color-on-primary) 25%,\n transparent)\n border-radius: 24px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n animation: slideInLeft 0.3s ease-out 0.9s both\n transition: all 0.3s ease\n uix:\n style: |\n ha-card {\n overflow: visible !important;\n }\n @keyframes fadeIn {\n from {\n opacity: 1;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n - type: custom:button-card\n show_entity_picture: false\n show_icon: false\n show_label: true\n entity: |\n [[[ return user.name == \"Rey\" ? \"person.rey\" : \"person.christina\";\n ]]]\n name: |\n [[[\n const hour = new Date().getHours();\n let greeting = \"\";\n if (hour >= 22 || hour < 5) greeting = \"🌘✨ Night\";\n else if (hour >= 18) greeting = \"🌙 Evening\";\n else if (hour >= 12) greeting = \"🌤️ Afternoon\";\n else greeting = \"☕ Morning\";\n const name = user.name == \"Rey\" ? \"Rey\" : \"Christina\";\n return `${greeting}, ${name}!`;\n ]]]\n label: |\n [[[\n const s = entity.state;\n if (s === \"home\") return \"Home\";\n return \"Away\";\n ]]]\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/timeline\n styles:\n card:\n - padding: 12px -2px 12px 12px\n - background: none\n - box-shadow: none\n grid:\n - grid-template-areas: '\"pic n one\" \"pic l one\"'\n - grid-template-rows: min-content min-content\n - grid-template-columns: 50px 1fr 150px\n name:\n - justify-self: start\n - align-self: center\n - font-size: 15px\n - padding-left: 15px\n label:\n - justify-self: start\n - align-self: start\n - font-size: 12px\n - color: var(--contrast14)\n - padding-left: 15px\n custom_fields:\n pic:\n card:\n type: custom:button-card\n entity: >\n [[[ return user.name == \"Rey\" ? \"person.rey\" :\n \"person.christina\"; ]]]\n show_name: false\n show_entity_picture: true\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/timeline\n styles:\n card:\n - position: relative\n - overflow: visible\n entity_picture:\n - width: 40px\n - height: 40px\n - border-radius: 12px\n - z-index: 1\n - filter: |\n [[[\n const activeZones = ['home'];\n const state = states[entity.entity_id]?.state;\n return activeZones.includes(state)\n ? 'none'\n : 'grayscale(100%) brightness(70%)';\n ]]]\n - opacity: |\n [[[\n const activeZones = ['home'];\n const state = states[entity.entity_id]?.state;\n return activeZones.includes(state) ? '1' : '0.7';\n ]]]\n img_cell:\n - background-color: var(--contrast1)\n - width: 40px\n - height: 40px\n - border-radius: 12px\n - overflow: visible\n one:\n card:\n type: custom:button-card\n entity: >\n [[[ return user.name == \"Rey\" ? \"person.christina\" :\n \"person.rey\"; ]]]\n show_name: false\n show_entity_picture: true\n tap_action:\n action: more-info\n state:\n - value: not_home\n styles:\n entity_picture:\n - filter: grayscale(100%)\n - opacity: 0.5\n styles:\n card:\n - position: relative\n - overflow: visible\n entity_picture:\n - width: 40px\n - height: 40px\n - border-radius: 12px\n - z-index: 1\n - filter: |\n [[[\n const activeZones = ['home'];\n const state = states[entity.entity_id]?.state;\n return activeZones.includes(state)\n ? 'none'\n : 'grayscale(100%) brightness(70%)';\n ]]]\n - opacity: |\n [[[\n const activeZones = ['home'];\n const state = states[entity.entity_id]?.state;\n return activeZones.includes(state) ? '1' : '0.7';\n ]]]\n img_cell:\n - background-color: var(--contrast1)\n - width: 40px\n - height: 40px\n - border-radius: 12px\n - overflow: visible\n uix:\n style: |\n ha-card {\n animation: slideDown 0.5s ease-out 0.6s both;\n }\n @keyframes slideDown {\n from { \n opacity: 1;\n transform: translateY(-4px);\n }\n to { \n opacity: 1;\n transform: translateY(0);\n }\n }\n view_layout:\n grid-area: greeting\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.5s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:simple-tabs\n pre-load: true\n alignment: start\n active-background: var(--md-sys-color-primary)\n active-text-color: var(--md-sys-color-on-primary)\n text-color: var(--primary-text-color)\n tabs:\n - title: Climate\n icon: m3of:heat-pump\n cards:\n - type: custom:vertical-stack-in-card\n cards:\n - type: grid\n square: false\n columns: 2\n cards:\n - type: custom:mushroom-template-card\n entity: sensor.house_average_temperature\n primary: >\n {{ states(entity) | round(1) }} {{\n state_attr('weather.home', 'temperature_unit')\n }}\n secondary: |\n Indoor\n icon: >\n {% set hvac_mode = states('climate.heat_pump')\n %}\n\n {% if hvac_mode == 'heat' %} mdi:fire\n\n {% elif hvac_mode == 'cool' %} mdi:snowflake\n\n {% elif hvac_mode == 'fan_only' %} mdi:fan\n\n {% else %} m3of:thermometer\n\n {% endif %}\n icon_color: >\n {% set hvac_mode = states('climate.heat_pump')\n %}\n\n {% if hvac_mode == 'heat' %} #FF6F22\n\n {% elif hvac_mode == 'cool' %} #2196F3\n\n {% elif hvac_mode == 'fan_only' %} #029688\n\n {% else %}\n {% set temp = states('sensor.house_average_temperature') | float %}\n {% if temp < 13 %}\n #B4A5B7\n {% elif temp < 16 %} \n #DBC9DE\n {% elif temp < 19 %}\n #ACDCF6\n {% elif temp < 22 %}\n #D2E5DE\n {% elif temp < 24 %}\n #FFE7A3\n {% elif temp < 27 %}\n #F7C48D\n {% else %}\n #E37575\n {% endif %}\n {% endif %}\n tap_action:\n action: more-info\n uix:\n style: >\n {% set hvac_mode = states('climate.heat_pump')\n %}\n\n ha-card {\n {% if hvac_mode == 'heat' %}\n animation: heat-flicker 1.5s ease-in-out infinite;\n {% elif hvac_mode == 'cool' %}\n animation: cool-shimmer 2s ease-in-out infinite;\n {% elif hvac_mode == 'fan_only' %}\n animation: fan-wobble 2s ease-in-out infinite;\n {% endif %}\n }\n\n\n @keyframes heat-flicker {\n 0%, 100% { \n transform: scale(1);\n filter: brightness(1);\n }\n 25% { \n transform: scale(1.02);\n filter: brightness(1.1);\n }\n 50% { \n transform: scale(1);\n filter: brightness(0.95);\n }\n 75% { \n transform: scale(1.02);\n filter: brightness(1.05);\n }\n }\n\n\n @keyframes cool-shimmer {\n 0%, 100% { \n transform: translateY(0px);\n opacity: 1;\n }\n 50% { \n transform: translateY(-2px);\n opacity: 0.9;\n }\n }\n\n\n @keyframes fan-wobble {\n 0%, 100% { \n transform: rotate(0deg) scale(1);\n }\n 25% { \n transform: rotate(1deg) scale(1.01);\n }\n 50% { \n transform: rotate(0deg) scale(1.02);\n }\n 75% { \n transform: rotate(-1deg) scale(1.01);\n }\n }\n\n\n mushroom-shape-icon {\n {% if hvac_mode == 'heat' %}\n animation: icon-heat-pulse 1s ease-in-out infinite !important;\n {% elif hvac_mode == 'cool' %}\n animation: icon-cool-float 3s ease-in-out infinite !important;\n {% elif hvac_mode == 'fan_only' %}\n animation: icon-fan-rotate 3s linear infinite !important;\n {% endif %}\n }\n\n\n @keyframes icon-heat-pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.15); }\n }\n\n\n @keyframes icon-cool-float {\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\n 50% { transform: translateY(-3px) rotate(5deg); }\n }\n\n\n @keyframes icon-fan-rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n - type: custom:mushroom-template-card\n entity: sensor.outdoor_temperature\n primary: >\n {{ states(entity) | round(1) }} {{\n state_attr('weather.home', 'temperature_unit')\n }}\n secondary: |\n Outdoor\n icon: '{{ states(''sensor.weather_condition_icon'') }}'\n icon_color: >\n {% set temp = state_attr('weather.home',\n 'temperature') | float %}\n\n {% if temp < 13 %}\n #988C9B\n {% elif temp < 16 %} \n #BAABBD\n {% elif temp < 19 %}\n #92BB D1\n {% elif temp < 22 %}\n #B2C4BD\n {% elif temp < 24 %}\n #D8C48A\n {% elif temp < 27 %}\n #D2A676\n {% else %}\n #C26161\n {% endif %}\n tap_action:\n action: more-info\n - type: custom:config-template-card\n entities:\n - climate.heat_pump\n - sensor.house_average_temperature\n - sensor.outdoor_temperature\n variables:\n - states['climate.heat_pump'].state\n - states['sensor.house_average_temperature'].state\n - states['sensor.outdoor_temperature'].state\n card:\n type: custom:mini-graph-card\n entities:\n - entity: sensor.house_average_temperature\n name: Indoor\n color: |-\n ${vars[0] === 'heat' ? '#FF6F22' : \n (vars[0] === 'cool' ? '#2196F3' : \n (vars[0] === 'fan_only' ? '#029688' : \n (vars[1] < 13 ? '#B4A5B7' :\n (vars[1] < 16 ? '#DBC9DE' :\n (vars[1] < 19 ? '#ACDCF6' :\n (vars[1] < 22 ? '#D2E5DE' :\n (vars[1] < 24 ? '#FFE7A3' :\n (vars[1] < 27 ? '#F7C48D' : '#E37575'))))))))}\n - entity: sensor.outdoor_temperature\n name: Outdoor\n color: |-\n ${vars[2] < 13 ? '#988C9B' :\n (vars[2] < 16 ? '#BAABBD' : \n (vars[2] < 19 ? '#92BBD1' :\n (vars[2] < 22 ? '#B2C4BD' :\n (vars[2] < 24 ? '#D8C48A' :\n (vars[2] < 27 ? '#D2A676' :'#C26161')))))}\n y_axis: secondary\n hours_to_show: 24\n line_width: 3\n font_size: 50\n animate: true\n show:\n name: false\n icon: false\n state: false\n legend: false\n fill: fade\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-climate-card\n entity: climate.heat_pump\n primary_info: none\n secondary_info: none\n icon_type: none\n show_temperature_control: true\n - type: custom:mushroom-climate-card\n entity: climate.heat_pump\n primary_info: none\n secondary_info: none\n icon_type: none\n hvac_modes:\n - cool\n - heat\n - fan_only\n - 'off'\n - title: Toggles\n icon: m3of:automation\n card:\n type: custom:simple-swipe-card\n auto_hide_pagination: 0\n auto_height: true\n cards:\n - type: custom:vertical-stack-in-card\n cards:\n - type: custom:button-card\n entity: sensor.disabled_room_occupancy_count\n name: Room Occupancy\n show_state: false\n show_icon: false\n show_label: true\n label: |-\n [[[ \n const disabled = parseInt(entity.state);\n if (disabled === 0) return 'All rooms active';\n if (disabled === 1) return '1 room disabled';\n return `${disabled} rooms disabled`;\n ]]]\n styles:\n card:\n - background: >-\n var(--ha-card-background,\n var(--card-background-color, white))\n - border-radius: var(--ha-card-border-radius, 12px)\n - padding: 12px\n name:\n - text-align: center\n - font-size: 16px\n - font-weight: bold\n label:\n - text-align: center\n - font-size: 14px\n - color: var(--secondary-text-color)\n tap_action:\n action: none\n - type: custom:mushroom-chips-card\n alignment: center\n chips:\n - type: template\n entity: input_boolean.baby_room_occupancy\n icon: m3of:stroller\n icon_color: >-\n {% if is_state(entity, 'on') %} #f385bc {%\n else %} #a8a8a8 {% endif %}\n tap_action:\n action: toggle\n content: '{% if is_state(entity, ''on'') %}Baby{% endif %}'\n - type: template\n entity: input_boolean.master_bedroom_occupancy\n icon: m3of:bed\n icon_color: >-\n {% if is_state(entity, 'on') %}#89CFF0 {% else\n %} #a8a8a8 {% endif %}\n tap_action:\n action: toggle\n content: >-\n {% if is_state(entity, 'on') %}Master{% endif\n %}\n - type: template\n entity: input_boolean.single_guest_room_occupancy\n icon: m3of:person-3\n icon_color: >-\n {% if is_state(entity, 'on') %} #FFA500 {%\n else %} #a8a8a8 {% endif %}\n tap_action:\n action: toggle\n content: >-\n {% if is_state(entity, 'on') %}Single{% endif\n %}\n - type: template\n entity: input_boolean.multiple_guest_room_occupancy\n icon: m3of:groups-2\n icon_color: >-\n {% if is_state(entity, 'on') %}#A52A2A {% else\n %} #a8a8a8 {% endif %}\n tap_action:\n action: toggle\n content: >-\n {% if is_state(entity, 'on') %}Multiple{%\n endif %}\n - type: template\n entity: input_boolean.play_room_occupancy\n icon: mdi:gamepad-variant\n icon_color: >-\n {% if is_state(entity, 'on') %}#9F2B68 {% else\n %} #a8a8a8 {% endif %}\n tap_action:\n action: toggle\n content: '{% if is_state(entity, ''on'') %}Play{% endif %}'\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: custom:vertical-stack-in-card\n cards:\n - type: custom:button-card\n entity: sensor.disabled_presence_automation_count\n name: Presence Status\n show_state: false\n show_icon: false\n show_label: true\n label: |-\n [[[ \n const disabled = parseInt(entity.state);\n if (disabled === 0) return 'All rooms active';\n if (disabled === 1) return '1 room disabled';\n return `${disabled} rooms disabled`;\n ]]]\n styles:\n card:\n - background: >-\n var(--ha-card-background,\n var(--card-background-color, white))\n - border-radius: var(--ha-card-border-radius, 12px)\n - padding: 12px\n name:\n - text-align: center\n - font-size: 16px\n - font-weight: bold\n label:\n - text-align: center\n - font-size: 14px\n - color: var(--secondary-text-color)\n tap_action:\n action: none\n features_position: bottom\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: binary_sensor.presence_active_la\n icon: mdi:sofa\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n var(--primary-text-color)\n {% endif %}\n tap_action:\n action: perform-action\n perform_action: script.toggle_presence_sensor_la\n target: {}\n content: |-\n {% if is_state(entity, 'on') %} \n Living\n {% else %}\n {% endif %}\n - type: template\n entity: automation.room_presence_master_bedroom\n icon: m3of:bed\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Master\n {% else %}\n {% endif %}\n - type: template\n entity: automation.room_presence_baby_room\n icon: m3of:stroller\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Baby\n {% else %}\n {% endif %} \n - type: template\n entity: automation.room_presence_single_guest_room\n icon: m3of:person-3\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Single\n {% else %}\n {% endif %}\n - type: template\n entity: automation.room_presence_multiple_guest_room\n icon: m3of:groups-2\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Multiple\n {% else %}\n {% endif %}\n - type: template\n entity: automation.room_presence_office\n icon: m3of:computer\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Office\n {% else %}\n {% endif %}\n alignment: center\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: custom:vertical-stack-in-card\n cards:\n - type: custom:button-card\n entity: sensor.disabled_driveway_camera_count\n name: Driveway Security\n show_state: false\n show_icon: false\n show_label: true\n label: |-\n [[[ \n const disabled = parseInt(entity.state);\n if (disabled === 0) return 'All cameras active';\n if (disabled === 1) return '1 camera disabled';\n return `${disabled} cameras disabled`;\n ]]]\n styles:\n card:\n - background: >-\n var(--ha-card-background,\n var(--card-background-color, white))\n - border-radius: var(--ha-card-border-radius, 12px)\n - padding: 12px\n name:\n - text-align: center\n - font-size: 16px\n - font-weight: bold\n label:\n - text-align: center\n - font-size: 14px\n - color: var(--secondary-text-color)\n tap_action:\n action: none\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: automation.driveway_camera_person_notification\n icon: mdi:account\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Person\n {% else %}\n {% endif %}\n - type: template\n entity: >-\n automation.driveway_camera_vehicle_notification\n icon: mdi:car\n icon_color: |-\n {% if is_state(entity, 'on') %} \n {% else %}\n #a8a8a8\n {% endif %}\n tap_action:\n action: toggle\n content: |-\n {% if is_state(entity, 'on') %} \n Vehicle\n {% else %}\n {% endif %}\n alignment: center\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - title: Irrigation\n icon: m3of:sprinkler\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 2px\n - type: custom:mushroom-template-card\n primary: Open Irrigation Page\n secondary: Tap to navigate to irrigation\n icon: m3of:sprinkler\n features_position: bottom\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/irrigation\n - title: Hue Scenes\n icon: mdi:layers\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 2px\n - type: custom:mushroom-template-card\n primary: Open Scenes Page\n secondary: Tap to navigate to scene\n icon: mdi:layers\n features_position: bottom\n vertical: true\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/scenes\n hide_inactive_tab_titles: true\n view_layout:\n grid-area: simple_tab\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.8s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_navigation_card\n variables:\n title: Weather Forecast\n subtitle: '{{ states (''sensor.next_rain_summary'') }}'\n navigation_path: /tablet-dashboard/notifications\n title_font_size: 20px\n - type: custom:clock-weather-card-hui-icons\n entity: weather.home\n sun_entity: sun.sun\n temperature_sensor: sensor.outdoor_temperature\n humidity_sensor: sensor.outdoor_humidity\n forecast_rows: 5\n locale: en-NZ\n time_pattern: HH:mm\n time_format: 12\n date_pattern: ccc, d.MM.yy\n hide_today_section: true\n hide_forecast_section: false\n show_humidity: false\n hide_clock: true\n hide_date: false\n hourly_forecast: false\n use_browser_time: false\n time_zone: null\n show_decimal: false\n view_layout:\n grid-area: weather\n - type: custom:streamline-card\n template: room_toggles_chip_card\n variables:\n entity_area_one: input_boolean.room_toggle_one\n area_one_icon: mdi:star\n area_one_name: Default\n entity_area_two: input_boolean.room_toggle_two\n area_two_icon: mdi:home\n area_two_name: Others\n entity_area_three: input_boolean.room_toggle_three\n area_three_icon: mdi:light-flood-down\n area_three_name: Outdoor\n animation_delay: 0.2s\n view_layout:\n grid-area: room_selector\n - type: custom:vertical-stack-in-card\n cards:\n - type: conditional\n conditions:\n - entity: input_boolean.room_toggle_one\n state: 'on'\n card:\n type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Garage\n icon: mdi:garage-variant\n entity_id_temperature: sensor.garage_temperature\n entity_id_humidity: sensor.garage_humidity\n entity_id_lights: switch.lights_grg\n lights_icon: hue:recessed-ceiling\n lights_count_sensor: sensor.lights_grg_count\n entity_id_windows: group.windows_grg\n windows_count_sensor: sensor.windows_grg_count\n entity_id_doors: group.doors_grg\n doors_count_sensor: sensor.doors_grg_count\n navigation_path: /tablet-dashboard/garage/\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Living Area\n icon: mdi:sofa\n entity_id_temperature: sensor.living_room_temperature\n entity_id_humidity: sensor.living_area_humidity\n entity_id_ac_main: climate.heat_pump\n entity_id_ac: climate.living_room\n entity_id_lights: light.lights_la\n lights_icon: hue:recessed-ceiling\n lights_count_sensor: sensor.lights_la_count\n entity_id_windows: group.windows_la\n windows_count_sensor: sensor.windows_la_count\n entity_id_doors: group.doors_la\n doors_count_sensor: sensor.doors_la_count\n navigation_path: /tablet-dashboard/living-area/\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.room_toggle_two\n state: 'on'\n card:\n type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Attic\n icon: mdi:home-roof\n entity_id_temperature: sensor.attic_temperature\n entity_id_humidity: sensor.attic_humidity\n entity_id_lights: switch.light_switch_atc\n lights_count_sensor: sensor.lights_atc_count\n lights_icon: hue:recessed-ceiling\n entity_id_doors: binary_sensor.door_sensor_atc_contact\n doors_count_sensor: sensor.doors_atc_count\n navigation_path: /tablet-dashboard/attic\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Entrance\n icon: mdi:table-furniture\n entity_id_temperature: sensor.living_room_temperature\n entity_id_humidity: sensor.living_area_humidity\n entity_id_lights: light.lights_etr_all\n lights_count_sensor: sensor.lights_etr_count\n lights_icon: mdi:lightbulb-group\n entity_id_doors: binary_sensor.door_sensor_etr_contact\n doors_count_sensor: sensor.doors_etr_count\n navigation_path: /tablet-dashboard/entrance/\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.room_toggle_three\n state: 'on'\n card:\n type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Driveway\n icon: mdi:car\n entity_id_temperature: sensor.outdoor_temperature\n entity_id_humidity: sensor.outdoor_humidity\n entity_id_lights: group.light_switches_drw\n lights_count_sensor: sensor.lights_drw_count\n lights_icon: hue:recessed-ceiling\n entity_id_doors: group.doors_drw\n doors_count_sensor: sensor.doors_drw_count\n navigation_path: /tablet-dashboard/driveway/\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Patio\n icon: mdi:grass\n entity_id_temperature: sensor.outdoor_temperature\n entity_id_humidity: sensor.outdoor_humidity\n entity_id_lights: switch.lights_patio\n lights_count_sensor: sensor.lights_otd_count\n lights_icon: hue:recessed-ceiling\n entity_id_doors: group.doors_otd\n doors_count_sensor: sensor.doors_otd_count\n navigation_path: /tablet-dashboard/patio/\n view_layout:\n grid-area: room1\n - type: custom:vertical-stack-in-card\n cards:\n - type: conditional\n conditions:\n - entity: input_boolean.room_toggle_one\n state: 'on'\n card:\n type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Master\n icon: m3of:bed\n entity_id_temperature: sensor.master_bedroom_temperature\n entity_id_humidity: sensor.master_bedroom_humidity\n entity_id_ac: climate.master_bedroom\n entity_id_ac_main: climate.heat_pump\n entity_id_lights: light.lights_mbr_all\n lights_icon: hue:recessed-ceiling\n lights_count_sensor: sensor.lights_mbr_count\n entity_id_covers: group.curtains_mbr\n covers_count_sensor: sensor.covers_mbr_count\n entity_id_doors: group.doors_mbr\n doors_count_sensor: sensor.doors_mbr_count\n navigation_path: /tablet-dashboard/master-bedroom/\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Baby\n icon: m3of:stroller\n entity_id_temperature: sensor.baby_room_temperature\n entity_id_humidity: sensor.baby_room_humidity\n entity_id_ac_main: climate.heat_pump\n entity_id_ac: climate.baby_room\n entity_id_lights: light.lights_br_scene\n lights_icon: hue:recessed-ceiling\n lights_count_sensor: sensor.lights_br_count\n entity_id_windows: group.windows_br\n windows_count_sensor: sensor.windows_br_count\n entity_id_doors: binary_sensor.door_sensor_br_contact\n doors_count_sensor: sensor.doors_br_count\n navigation_path: /tablet-dashboard/baby-room/\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.room_toggle_two\n state: 'on'\n card:\n type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Office\n icon: m3of:computer\n entity_id_temperature: sensor.office_room_temperature\n entity_id_humidity: sensor.office_room_humidity\n entity_id_ac_main: climate.heat_pump\n entity_id_ac: climate.office_room\n entity_id_lights: switch.light_switch_or\n lights_icon: hue:recessed-ceiling\n lights_count_sensor: sensor.lights_or_count\n entity_id_windows: group.windows_or\n windows_count_sensor: sensor.windows_or_count\n entity_id_doors: binary_sensor.door_sensor_or_contact\n doors_count_sensor: sensor.doors_or_count\n navigation_path: /tablet-dashboard/office/\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Guest Bath\n icon: m3of:water-drop\n entity_id_temperature: sensor.guest_bathroom_temperature\n entity_id_humidity: sensor.guest_bathroom_humidity\n entity_id_lights: light.lights_gbr\n lights_icon: hue:recessed-ceiling\n lights_count_sensor: sensor.lights_gbr_count\n entity_id_fans: group.guest_bathroom_fans\n fans_count_sensor: sensor.fans_gbr_count\n entity_id_windows: group.windows_gbr\n windows_count_sensor: sensor.windows_gbr_count\n navigation_path: /tablet-dashboard/guest-bathroom/\n view_layout:\n grid-area: room2\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Driveway\n navigation_path: /tablet-dashboard/camera\n title_font_size: 20px\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password@192.168.1.150/h265Preview_01_main#video=copy#audio=opus\n entity_id_light_one: light.lights_ceiling\n light_one_icon: hue:recessed-ceiling\n entity_id_light_two: light.lights_wall\n light_two_icon: hue:wall-appear\n entity_id_light_three: light.lights_outdoor_grg\n light_three_icon: hue:recessed-ceiling\n view_layout:\n grid-area: camera1\n - type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Garage\n navigation_path: /tablet-dashboard/camera\n title_font_size: 20px\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: binary_sensor.door_sensor_grg_contact\n icon: >\n {% if is_state('binary_sensor.door_sensor_grg_contact',\n 'on') %}\n mdi:garage-open-variant\n {% else %}\n mdi:garage-variant\n {% endif %}\n content: >\n {% if is_state('binary_sensor.door_sensor_grg_contact',\n 'on') %}\n Open\n {% else %}\n Closed\n {% endif %}\n tap_action:\n action: call-service\n service: script.garage_button_frontend\n uix:\n style:\n .: |\n ha-card {\n --text-color: 'white';\n --color: 'white';\n --chip-background: {{ '#bc000a' if is_state('binary_sensor.door_sensor_grg_contact', 'on') else 'var(--md-sys-color-on-primary)' }};\n }\n alignment: end\n uix:\n style: |\n ha-card {\n margin-top: 1.6em\n }\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password@192.168.1.248/h264Preview_01_main#video=copy#audio=opus\n entity_id_light_one: switch.light_switch_grg\n light_one_icon: mdi:garage-variant\n entity_id_light_two: switch.rear_light_switch_grg\n light_two_icon: mdi:outdoor-lamp\n view_layout:\n grid-area: camera3\n - type: custom:vertical-stack-in-card\n cards:\n - type: conditional\n conditions:\n - entity: input_boolean.room_toggle_one\n state: 'on'\n card:\n type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Single\n icon: m3of:person-3\n entity_id_temperature: sensor.single_guest_room_temperature\n entity_id_humidity: sensor.single_guest_room_humidity\n entity_id_lights: light.lights_sgr_scene\n lights_icon: hue:recessed-ceiling\n lights_count_sensor: sensor.lights_sgr_count\n entity_id_ac_main: climate.heat_pump\n entity_id_ac: climate.single_guest_room\n entity_id_windows: group.windows_sgr\n windows_count_sensor: sensor.windows_sgr_count\n entity_id_doors: binary_sensor.door_sensor_sgr_contact\n doors_count_sensor: sensor.doors_sgr_count\n navigation_path: /tablet-dashboard/single-guest-room/\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Multiple\n icon: m3of:groups-2\n entity_id_temperature: sensor.multiple_guest_room_temperature\n entity_id_humidity: sensor.multiple_guest_room_humidity\n entity_id_lights: light.lights_mgr_scene\n lights_icon: hue:recessed-ceiling\n lights_count_sensor: sensor.lights_mgr_count\n entity_id_ac_main: climate.heat_pump\n entity_id_ac: climate.multiple_guest_room\n entity_id_windows: group.windows_mgr\n windows_count_sensor: sensor.windows_mgr_count\n entity_id_doors: binary_sensor.door_sensor_mgr_contact\n doors_count_sensor: sensor.doors_mgr_count\n navigation_path: /tablet-dashboard/multiple-guest-room/\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.room_toggle_two\n state: 'on'\n card:\n type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Laundry\n icon: m3of:laundry\n entity_id_lights: light.lights_lr_all\n lights_icon: hue:recessed-ceiling\n lights_count_sensor: sensor.lights_lr_count\n entity_id_fans: fan.laundry_room_fan\n fans_count_sensor: sensor.fans_lr_count\n entity_id_doors: binary_sensor.outdoor_door_sensor_lr_contact\n doors_count_sensor: sensor.doors_lr_count\n room_background: '#ebd9a9'\n navigation_path: /tablet-dashboard/laundry/\n - type: custom:streamline-card\n template: room_card\n variables:\n name: Hallway\n icon: mdi:image\n entity_id_lights: switch.light_switch_hw\n lights_icon: hue:recessed-ceiling\n lights_count_sensor: sensor.lights_hw_count\n entity_id_windows: group.windows_hw\n windows_count_sensor: sensor.windows_hw_count\n room_background: '#f2ebd8'\n navigation_path: /tablet-dashboard/hallway\n view_layout:\n grid-area: room3\n - type: custom:vertical-stack-in-card\n cards:\n - type: conditional\n conditions:\n - entity: binary_sensor.left_walkway_camera_person\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Left Walkway\n navigation_path: /tablet-dashboard/camera\n title_font_size: 20px\n - type: custom:streamline-card\n template: camera_generic_with_chips_card\n variables:\n camera_entity: camera.left_walkway_camera_fluent\n entity_id_light_one: switch.outdoor_light_switch_lr\n light_one_icon: mdi:outdoor-lamp\n entity_id_light_two: switch.rear_light_switch_grg\n light_two_icon: mdi:outdoor-lamp\n - type: conditional\n conditions:\n - condition: state\n entity: binary_sensor.left_walkway_camera_person\n state_not: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Right Walkway\n navigation_path: /tablet-dashboard/camera\n title_font_size: 20px\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password@192.168.1.244/h265Preview_01_main#video=copy#audio=opus\n entity_id_light_one: switch.patio_main_switch_la\n entity_id_light_two: switch.patio_side_switch_la\n light_one_icon: mdi:outdoor-lamp\n light_two_icon: mdi:outdoor-lamp\n view_layout:\n grid-area: camera2\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n\n animation: fadeInRight 0.5s ease-out 0.5s;\n }\n @keyframes fadeInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: custom:vertical-stack-in-card\n cards:\n - type: conditional\n conditions:\n - condition: state\n entity: media_player.media\n state: playing\n card:\n type: custom:simple-swipe-card\n auto_hide_pagination: 0\n auto_height: true\n cards:\n - type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Music Player\n title_font_size: 20px\n - type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: triggered\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Triggered\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:bell-ring\n icon_color: '#d14f3a'\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: armed_away\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Armed\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-lock\n icon_color: '#69ac5a'\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: arming\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Arming\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield\n icon_color: '#efa340'\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: pending\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Pending\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-outline\n icon_color: '#efa340'\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: disarmed\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-off\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: >-\n sensor.earthquake\n above: 0\n chip:\n type: template\n entity: geonet.\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: mdi:earth\n icon_color: >\n {% set mag =\n state_attr('sensor.earthquake',\n 'magnitude') | float(0) %} {% if mag >= 6.0\n %} #D32F2F {% elif mag >= 5.0 %} #F4511E {%\n elif mag >= 4.0 %} #FB8C00 {% elif mag >=\n 3.0 %} #F9A825 {% elif mag >= 2.0 %} #FBC02D\n {% else %} #388E3C {% endif %}\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.volcano_rotorua\n above: 0\n chip:\n type: template\n entity: sensor.volcano_rotorua\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: >\n {{ state_attr('sensor.volcano_rotorua',\n 'icon') or 'mdi:image-filter-hdr' }}\n icon_color: >\n {% set level =\n states('sensor.volcano_rotorua') | int %}\n\n {% if level == 5 %} red\n\n {% elif level == 4 %} deep-orange\n\n {% elif level == 3 %} orange\n\n {% elif level == 2 %} amber\n\n {% elif level == 1 %} yellow\n\n {% else %} green\n\n {% endif %}\n - type: conditional\n conditions:\n - condition: state\n entity: sensor.home_metservice_weather_warnings\n state_not: unknown\n chip:\n type: template\n entity: sensor.home_metservice_weather_warnings\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: mdi:alert\n icon_color: orange\n - type: template\n entity: sensor.active_notification_count\n icon: mdi:bell\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n hold_action:\n action: none\n uix:\n style: >\n ha-card {\n position: relative;\n }\n\n\n {% set notifications =\n states('sensor.active_notification_count') |\n int %}\n\n {% if notifications > 0 %}\n\n ha-card:after {\n content: \"{{ notifications }}\";\n position: absolute;\n top: -3px;\n right: -3px;\n background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 50%, transparent);\n color: var(--md-sys-color-primary);\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 10px;\n line-height: 16px;\n text-align: center;\n display: inline-block;\n font-weight: bold;\n } {% endif %}\n alignment: end\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 20px;\n right: 5px;\n }\n - type: custom:mediocre-massive-media-player-card\n entity_id: media_player.media\n use_art_colors: true\n mode: panel\n action:\n tap_action:\n action: url\n url_path: spotify://home\n options:\n show_volume_step_buttons: true\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n tap_action:\n action: url\n url_path: ' intent:#Intent;launchFlags=0x10000000;component=com.spotify.music/.MainActivity;end'\n icon: mdi:spotify\n content: Open Spotify\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' }};\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n title_font_size: 20px\n variables:\n title: Calendar\n navigation_path: /tablet-dashboard/calendar\n - type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: triggered\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Triggered\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:bell-ring\n icon_color: '#d14f3a'\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: armed_away\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Armed\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-lock\n icon_color: '#69ac5a'\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: arming\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Arming\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield\n icon_color: '#efa340'\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: pending\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Pending\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-outline\n icon_color: '#efa340'\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: disarmed\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-off\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: >-\n sensor.earthquake\n above: 0\n chip:\n type: template\n entity: geonet.\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: mdi:earth\n icon_color: >\n {% set mag =\n state_attr('sensor.earthquake',\n 'magnitude') | float(0) %} {% if mag >= 6.0\n %} #D32F2F {% elif mag >= 5.0 %} #F4511E {%\n elif mag >= 4.0 %} #FB8C00 {% elif mag >=\n 3.0 %} #F9A825 {% elif mag >= 2.0 %} #FBC02D\n {% else %} #388E3C {% endif %}\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.volcano_rotorua\n above: 0\n chip:\n type: template\n entity: sensor.volcano_rotorua\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: >\n {{ state_attr('sensor.volcano_rotorua',\n 'icon') or 'mdi:image-filter-hdr' }}\n icon_color: >\n {% set level =\n states('sensor.volcano_rotorua') | int %}\n\n {% if level == 5 %} red\n\n {% elif level == 4 %} deep-orange\n\n {% elif level == 3 %} orange\n\n {% elif level == 2 %} amber\n\n {% elif level == 1 %} yellow\n\n {% else %} green\n\n {% endif %}\n - type: conditional\n conditions:\n - condition: state\n entity: sensor.home_metservice_weather_warnings\n state_not: unknown\n chip:\n type: template\n entity: sensor.home_metservice_weather_warnings\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: mdi:alert\n icon_color: orange\n - type: template\n entity: sensor.active_notification_count\n icon: mdi:bell\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n hold_action:\n action: none\n uix:\n style: >\n ha-card {\n position: relative;\n } {% set notifications =\n states('sensor.active_notification_count') |\n int %}\n\n {% if notifications > 0 %}\n\n ha-card:after {\n content: \"{{ notifications }}\";\n position: absolute;\n top: -3px;\n right: -3px;\n background-color: var(--md-sys-color-primary);\n color: var(--md-sys-color-surface-variant);\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 10px;\n line-height: 16px;\n text-align: center;\n display: inline-block;\n font-weight: bold;\n } {% endif %}\n alignment: end\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 20px;\n right: 5px;\n }\n - entities:\n - entity: calendar.christina\n accent_color: '#ff6a6a'\n - entity: calendar.rey\n accent_color: '#71c8fe'\n - entity: calendar.house_maintenance\n accent_color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n accent_color: '#f9da4e'\n days_to_show: 6\n compact_events_to_show: 6\n background_color: transparent\n vertical_line_width: 5px\n event_spacing: 6px\n first_day_of_week: monday\n show_week_numbers: iso\n week_number_color: var(--md-sys-color-primary)\n week_number_background_color: var(--md-sys-color-on-primary)\n month_separator_width: 1px\n month_separator_color: var(--md-sys-color-primary)\n today_indicator: pulse\n today_indicator_position: 10% 50%\n today_indicator_color: var(--md-sys-color-primary)\n weekday_font_size: 12px\n month_font_size: 10px\n show_countdown: true\n show_progress_bar: true\n progress_bar_color: var(--md-sys-color-primary)\n weather:\n position: event\n date:\n show_conditions: true\n show_high_temp: true\n show_low_temp: false\n icon_size: 14px\n font_size: 12px\n color: var(--primary-text-color)\n event:\n show_conditions: true\n show_temp: true\n icon_size: 14px\n font_size: 12px\n color: var(--primary-text-color)\n entity: weather.home\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/calendar\n type: custom:calendar-card-pro\n height: 435px\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Backyard\n navigation_path: /tablet-dashboard/camera\n title_font_size: 20px\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password@192.168.1.148/h264Preview_01_main#video=copy#audio=opus\n entity_id_light_one: switch.patio_main_switch_la\n light_one_icon: m3of:lightbulb\n view_layout:\n grid-area: camera4\n - type: conditional\n conditions:\n - condition: state\n entity: media_player.media\n state_not: playing\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Calendar\n navigation_path: /tablet-dashboard/calendar\n title_font_size: 20px\n - type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: triggered\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Triggered\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:bell-ring\n icon_color: '#d14f3a'\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: armed_away\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Armed\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-lock\n icon_color: '#69ac5a'\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: arming\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Arming\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield\n icon_color: '#efa340'\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: pending\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n content: Pending\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-outline\n icon_color: '#efa340'\n - type: conditional\n conditions:\n - entity: alarm_control_panel.alarmo\n state: disarmed\n chip:\n type: template\n entity: alarm_control_panel.alarmo\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/alarmo\n icon: mdi:shield-off\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.earthquake\n above: 0\n chip:\n type: template\n entity: geonet.\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: mdi:earth\n icon_color: >\n {% set mag =\n state_attr('sensor.earthquake',\n 'magnitude') | float(0) %} {% if mag >= 6.0 %}\n #D32F2F {% elif mag >= 5.0 %} #F4511E {% elif\n mag >= 4.0 %} #FB8C00 {% elif mag >= 3.0 %}\n #F9A825 {% elif mag >= 2.0 %} #FBC02D {% else %}\n #388E3C {% endif %}\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.volcano_rotorua\n above: 0\n chip:\n type: template\n entity: sensor.volcano_rotorua\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: >\n {{ state_attr('sensor.volcano_rotorua', 'icon')\n or 'mdi:image-filter-hdr' }}\n icon_color: >\n {% set level = states('sensor.volcano_rotorua')\n | int %}\n\n {% if level == 5 %} red\n\n {% elif level == 4 %} deep-orange\n\n {% elif level == 3 %} orange\n\n {% elif level == 2 %} amber\n\n {% elif level == 1 %} yellow\n\n {% else %} green\n\n {% endif %}\n - type: conditional\n conditions:\n - condition: state\n entity: sensor.home_metservice_weather_warnings\n state_not: unknown\n chip:\n type: template\n entity: sensor.home_metservice_weather_warnings\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n icon: mdi:alert\n icon_color: orange\n - type: template\n entity: sensor.active_notification_count\n icon: mdi:bell\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/notifications\n hold_action:\n action: none\n uix:\n style: >\n ha-card {\n position: relative;\n } {% set notifications =\n states('sensor.active_notification_count') | int\n %}\n\n {% if notifications > 0 %}\n\n ha-card:after {\n content: \"{{ notifications }}\";\n position: absolute;\n top: -2px;\n right: 0px;\n background-color: var(--md-sys-color-on-primary);\n color: var(--md-sys-color-primary);\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 10px;\n line-height: 16px;\n text-align: center;\n display: inline-block;\n font-weight: bold;\n } {% endif %}\n alignment: end\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 20px;\n right: 5px;\n }\n - entities:\n - entity: calendar.christina\n accent_color: '#ff6a6a'\n - entity: calendar.rey\n accent_color: '#71c8fe'\n - entity: calendar.house_maintenance\n accent_color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n accent_color: '#f9da4e'\n days_to_show: 6\n compact_events_to_show: 6\n background_color: transparent\n vertical_line_width: 5px\n event_spacing: 6px\n first_day_of_week: monday\n show_week_numbers: iso\n week_number_color: var(--md-sys-color-primary)\n week_number_background_color: var(--md-sys-color-on-primary)\n month_separator_width: 1px\n month_separator_color: var(--md-sys-color-primary)\n today_indicator: pulse\n today_indicator_position: 10% 50%\n today_indicator_color: var(--md-sys-color-primary)\n weekday_font_size: 12px\n month_font_size: 10px\n show_countdown: true\n show_progress_bar: true\n progress_bar_color: var(--md-sys-color-primary)\n weather:\n position: event\n date:\n show_conditions: true\n show_high_temp: true\n show_low_temp: false\n icon_size: 14px\n font_size: 12px\n color: var(--primary-text-color)\n event:\n show_conditions: true\n show_temp: true\n icon_size: 14px\n font_size: 12px\n color: var(--primary-text-color)\n entity: weather.home\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/calendar\n type: custom:calendar-card-pro\n height: 430px\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Backyard\n navigation_path: /tablet-dashboard/camera\n title_font_size: 20px\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password@192.168.1.148/h264Preview_01_main#video=copy#audio=opus\n entity_id_light_one: switch.patio_main_switch_la\n light_one_icon: m3of:lightbulb\n view_layout:\n grid-area: camera4\n view_layout:\n grid-area: calendar_notification\n icon: m3o:home\n path: overview\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n - type: sections\n max_columns: 3\n title: Notifications\n path: notifications\n icon: mdi:bell-outline\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n \n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.guest_mode\n state: \"on\"\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: WiFi QR Code\n title_font_size: 20px\n - type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.guest_mode\n state: \"on\"\n chip:\n type: template\n entity: input_boolean.guest_mode\n icon: mdi:account-group\n tap_action:\n action: toggle\n alignment: end\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('input_boolean.guest_mode', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('input_boolean.guest_mode', 'on') else 'var(--md-sys-color-primary)' }};\n --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)' }};\n margin-top: 1.6em\n - type: picture\n image:\n media_content_id: /local/QR.jpg\n - square: false\n type: grid\n cards:\n - type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: state\n entity: input_boolean.rubbish\n state: \"on\"\n - condition: state\n entity: input_boolean.recycle\n state: \"on\"\n - condition: state\n entity: switch.driveway_water_tap\n state: \"on\"\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Driveway\n title_font_size: 20px\n navigation_path: /mobile-dashboard/camera\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password$@192.168.1.245/h265Preview_01_main#video=copy#audio=opus\n entity_id_light_one: light.lights_ceiling\n light_one_icon: hue:recessed-ceiling\n entity_id_light_two: light.lights_wall\n light_two_icon: hue:wall-appear\n entity_id_light_three: light.lights_outdoor_grg\n light_three_icon: hue:recessed-ceiling\n - type: conditional\n conditions:\n - condition: state\n entity: group.doors_grg\n state: \"on\"\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Garage\n title_font_size: 20px\n navigation_path: /mobile-dashboard/camera\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: switch.garage_opener\n icon: >\n {% if\n is_state('binary_sensor.door_sensor_grg_contact',\n 'on') %}\n mdi:garage-open-variant\n {% else %}\n mdi:garage-variant\n {% endif %}\n content: >\n {% if\n is_state('binary_sensor.door_sensor_grg_contact',\n 'on') %}\n Open\n {% else %}\n Closed\n {% endif %}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: 'white';\n --color: 'white';\n --chip-background: {{ '#bc000a' if is_state('binary_sensor.door_sensor_grg_contact', 'on') else 'var(--md-sys-color-on-primary)' }};\n }\n alignment: end\n uix:\n style: |\n ha-card {\n margin-top: 1.7em\n }\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password$@192.168.1.248/h264Preview_01_main#video=copy#audio=opus\n entity_id_light_one: switch.light_switch_grg\n light_one_icon: mdi:garage-variant\n entity_id_light_two: switch.rear_light_switch_grg\n light_two_icon: mdi:outdoor-lamp\n columns: 1\n - type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: numeric_state\n entity: sensor.average_backyard_soil_humidity\n below: 40\n - condition: state\n entity: sensor.house_maintenance_chip_card\n state: \"true\"\n - condition: state\n entity: sensor.laundry_machine_state\n state: Delay Run\n - condition: state\n entity: sensor.laundry_machine_state\n state: Run\n - condition: numeric_state\n entity: sensor.dryer_switch_lr_power\n above: 10\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Chores\n title_font_size: 20px\n - type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.average_backyard_soil_humidity\n below: 40\n chip:\n type: template\n entity: sensor.average_backyard_soil_humidity\n icon: mdi:water-percent\n content: >-\n {{ states('sensor.average_backyard_soil_humidity') }}% - \n \n {% set moisture =\n states('sensor.average_backyard_soil_humidity')\n \n | float(0) %}\n \n \n {% if moisture < 15 %}\n very dry\n {% elif moisture < 25 %}\n dry\n {% elif moisture < 45 %}\n moist\n {% else %}\n wet\n {% endif %}\n icon_color: >-\n {% set moisture =\n states('sensor.average_backyard_soil_humidity')\n \n | float(0) %} {% if moisture < 15 %}\n #A9A9A9\n {% elif moisture < 25 %}\n #ffd34f\n {% elif moisture < 45 %}\n #9fe7e8\n {% else %}\n #36a9e2\n {% endif %}\n tap_action:\n action: more-info\n - type: conditional\n conditions:\n - condition: state\n entity: sensor.house_maintenance_chip_card\n state: \"true\"\n chip:\n type: template\n entity: sensor.house_maintenance_chip_card\n icon: |\n {% if is_state('input_boolean.rubbish', 'on') %}\n mdi:trash-can\n {% elif is_state('input_boolean.recycle', 'on') %}\n mdi:recycle\n {% else %} {% endif %}\n icon_color: |\n {% if is_state('input_boolean.rubbish', 'on') %}\n #C41E3A\n {% elif is_state('input_boolean.recycle', 'on') %}\n #50C878\n {% else %} {% endif %}\n content: |\n {% if is_state('input_boolean.rubbish', 'on') %}\n Rubbish Day\n {% elif is_state('input_boolean.recycle', 'on') %}\n Recycle Day\n {% else %} {% endif %} \n tap_action:\n action: more-info\n - type: conditional\n conditions:\n - condition: state\n entity: sensor.laundry_machine_state\n state: Delay Run\n chip:\n type: entity\n entity: sensor.laundry_delay_time_remaining\n icon_color: blue\n icon: m3of:timer-arrow-down\n tap_action:\n action: more-info\n - type: conditional\n conditions:\n - condition: state\n entity: sensor.laundry_machine_state\n state: Run\n chip:\n type: entity\n entity: sensor.laundry_time_remaining_friendly\n icon: m3of:laundry\n icon_color: blue\n tap_action:\n action: more-info\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.dryer_switch_lr_power\n above: 10\n chip:\n type: template\n entity: sensor.dryer_switch_lr_power\n tap_action:\n action: more-info\n icon: mdi:tumble-dryer\n icon_color: \"#880808\"\n content: Dryer Running\n alignment: start\n - type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: state\n entity: timer.exhaust_fans\n state: active\n - condition: state\n entity: timer.rice_cooker\n state: active\n - condition: state\n entity: timer.blender\n state: active\n - condition: state\n entity: timer.driveway_sprinkler_timer\n state: active\n - condition: state\n entity: timer.backyard_sprinkler_timer\n state: active\n - condition: state\n entity: timer.right_walkway_sprinkler_timer\n state: active\n - condition: state\n entity: timer.dyson_charger\n state: active\n card:\n type: custom:streamline-card\n template: title_card\n variables:\n title: Timer\n title_font_size: 20px\n - type: grid\n columns: 2\n square: false\n cards:\n - type: conditional\n conditions:\n - condition: state\n entity: timer.exhaust_fans\n state: active\n card:\n type: custom:timer-bar-card\n entity: timer.exhaust_fans\n invert: true\n bar_direction: ltr\n bar_width: 60%\n mushroom:\n layout: vertical\n color: \"#b5e0f7\"\n - type: conditional\n conditions:\n - condition: state\n entity: timer.rice_cooker\n state: active\n card:\n type: custom:timer-bar-card\n entity: timer.rice_cooker\n invert: true\n bar_direction: ltr\n bar_width: 60%\n mushroom:\n layout: vertical\n color: \"#D70040\"\n - type: conditional\n conditions:\n - condition: state\n entity: timer.blender\n state: active\n card:\n type: custom:timer-bar-card\n entity: timer.blender\n invert: true\n bar_direction: ltr\n bar_width: 60%\n mushroom:\n layout: vertical\n color: \"#A020F0\"\n - type: conditional\n conditions:\n - condition: state\n entity: timer.driveway_sprinkler_timer\n state: active\n card:\n type: custom:timer-bar-card\n entity: timer.driveway_sprinkler_timer\n name: Driveway Sprinkler\n invert: true\n bar_direction: ltr\n bar_width: 60%\n mushroom:\n layout: vertical\n color: \"#006d77\"\n - type: conditional\n conditions:\n - condition: state\n entity: timer.backyard_sprinkler_timer\n state: active\n card:\n type: custom:timer-bar-card\n entity: timer.backyard_sprinkler_timer\n name: Backyard Sprinkler\n invert: true\n bar_direction: ltr\n bar_width: 60%\n mushroom:\n layout: vertical\n color: \"#83c5be\"\n - type: conditional\n conditions:\n - condition: state\n entity: timer.right_walkway_sprinkler_timer\n state: active\n card:\n type: custom:timer-bar-card\n entity: timer.right_walkway_sprinkler_timer\n name: Right Walkway Sprinkler\n invert: true\n bar_direction: ltr\n bar_width: 60%\n mushroom:\n layout: vertical\n color: \"#edf6f9\"\n tap_action:\n action: navigate\n navigation_path: \"?tab=right-driveway/mobile-dashboard/irrigation\"\n - type: conditional\n conditions:\n - condition: state\n entity: timer.dyson_charger\n state: active\n card:\n type: custom:timer-bar-card\n entity: timer.dyson_charger\n invert: true\n bar_direction: ltr\n bar_width: 60%\n mushroom:\n layout: vertical\n color: \"#5D3FD3\"\n - type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Media\n title_font_size: 20px\n - type: custom:mushroom-chips-card\n chips:\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.guest_mode\n state: \"off\"\n chip:\n type: template\n entity: input_boolean.guest_mode\n icon: mdi:account-group\n tap_action:\n action: toggle\n alignment: end\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' if is_state('input_boolean.guest_mode', 'on') else 'var(--md-sys-color-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' if is_state('input_boolean.guest_mode', 'on') else 'var(--md-sys-color-primary)' }};\n --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)' }};\n margin-top: 1.6em\n - type: custom:mushroom-template-card\n primary: Spotify App\n secondary: Navigate to Spotify\n icon: mdi:spotify\n color: green\n features_position: bottom\n tap_action:\n action: url\n url_path: spotify://home\n - type: custom:streamline-card\n template: count_button_card\n variables:\n group_entity: switch.towel_switches\n count_entity: switch.towel_switches\n title: Towel Heating\n icon: mdi:heating-coil\n color: \"#bc000a\"\n background_color: rgba(210, 43, 43, 0.5)\n filter_state: \"on\"\n - type: conditional\n conditions:\n - condition: numeric_state\n entity: sensor.low_battery_count\n above: 0\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Devices\n title_font_size: 20px\n - type: custom:auto-entities\n card:\n type: custom:layout-card\n layout_type: custom:grid-layout\n layout:\n grid-gap: 1px 1px\n grid-template-columns: 50% 50%\n grid-template-rows: auto\n filter:\n include:\n - options:\n type: custom:button-card\n template: sensor_battery\n entity_id: sensor.*battery_plus\n state: <100\n exclude: []\n sort:\n method: state\n numeric: true\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n\n - type: grid\n cards:\n - type: custom:simple-swipe-card\n auto_hide_pagination: 0\n auto_height: true\n cards:\n - type: conditional\n conditions:\n - condition: state\n entity: light.all_lights\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: entity_count_card\n variables:\n entity: light.all_lights_count_only\n title: Lights\n icon: mdi:lightbulb-on\n color: '#FFBF00'\n - type: custom:auto-entities\n card:\n square: false\n type: grid\n columns: 2\n card_param: cards\n filter:\n include:\n - group: light.all_lights\n state: 'on'\n options:\n type: custom:streamline-card\n template: light_card\n variables:\n entity: this.entity_id\n name: null\n icon: null\n exclude: []\n show_empty: false\n sort:\n method: entity_id\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: conditional\n conditions:\n - condition: state\n entity: group.all_light_switches\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: entity_count_card\n variables:\n entity: group.all_light_switches\n title: Lights Switches\n icon: m3of:switch\n color: var(--primary-text-color)\n - type: custom:auto-entities\n card:\n square: false\n type: grid\n columns: 2\n card_param: cards\n filter:\n include:\n - group: group.all_light_switches\n state: 'on'\n options:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: this.entity_id\n icon: m3of:switch\n background_color: rgba(238, 220, 130, 0.5)\n exclude: []\n show_empty: false\n sort:\n method: entity_id\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: conditional\n conditions:\n - condition: state\n entity: group.all_doors\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: entity_count_card\n variables:\n entity: group.all_doors\n title: Doors\n icon: m3o:door-open\n color: '#bc000a'\n - type: custom:auto-entities\n card:\n square: false\n type: grid\n columns: 2\n card_param: cards\n filter:\n include:\n - group: group.all_doors\n state: 'on'\n options:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: this.entity_id\n icon: m3of:door-open\n background_color: rgba(188, 0, 10, 0.5)\n exclude: []\n show_empty: false\n sort:\n method: friendly_name\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: conditional\n conditions:\n - condition: state\n entity: group.all_windows\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: entity_count_card\n variables:\n entity: group.all_windows\n title: Windows\n icon: m3o:window-open\n color: '#ffaa00'\n - type: custom:auto-entities\n card:\n square: false\n type: grid\n columns: 2\n card_param: cards\n filter:\n include:\n - group: group.all_windows\n state: 'on'\n options:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: this.entity_id\n icon: m3of:window-open\n background_color: rgba(255, 170, 0, 0.5)\n exclude: []\n show_empty: false\n sort:\n method: friendly_name\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: conditional\n conditions:\n - condition: state\n entity: group.all_fans\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: entity_count_card\n variables:\n - entity: group.all_fans\n - title: Fans\n - icon: mdi:fan\n - color: '#ADD8E6'\n - type: custom:auto-entities\n card:\n square: false\n type: grid\n columns: 2\n card_param: cards\n filter:\n include:\n - group: group.all_fans\n state: 'on'\n options:\n type: custom:streamline-card\n template: button_card\n variables:\n entity: this.entity_id\n icon: mdi:fan\n background_color: rgba(137, 207, 240, 0.5)\n exclude: []\n show_empty: false\n sort:\n method: friendly_name\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: conditional\n conditions:\n - condition: state\n entity: group.all_curtains\n state: open\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: entity_count_card\n variables:\n entity: group.all_curtains\n title: Curtains\n icon: m3of:curtains\n color: '#702963'\n - type: custom:auto-entities\n card:\n square: false\n type: grid\n columns: 2\n card_param: cards\n filter:\n include:\n - group: group.all_curtains\n state: open\n options:\n type: custom:streamline-card\n template: curtain_slider_card\n variables:\n entity_id: this.entity_id\n icon: mdi:curtains\n exclude: []\n show_empty: false\n sort:\n method: friendly_name\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 20px\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 8px\n - type: custom:simple-tabs\n pre-load: true\n active-background: var(--md-sys-color-primary)\n active-text-color: var(--md-sys-color-on-primary)\n text-color: var(--primary-text-color)\n tabs:\n - title: Volcano\n icon: m3of:mountain-steam\n conditions:\n - condition: template\n template: >\n {{ states('sensor.volcano_rotorua') | float(0) > 0\n }}\n card:\n type: markdown\n content: >\n {{ state_attr('sensor.volcano_taupo', 'activity') |\n default('No warnings') }}\n\n\n _Issued: {{\n as_datetime(state_attr('sensor.volcano_taupo', 'feed_last_update_successful')).astimezone().strftime('%I:%M%p %A, %d %b')\n }}_\n text_only: true\n - title: Earthquake\n icon: m3of:earthquake\n conditions:\n - condition: template\n template: >\n {{\n states('sensor.earthquake')\n | float(0) > 0 }}\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n - title: Latest Earthquake\n - type: markdown\n content: >\n\n {% set sensor = states.geo_location |\n selectattr('attributes.source', 'defined') |\n selectattr('attributes.source', 'eq',\n 'geonetnz_quakes') |\n sort(attribute='last_updated', reverse=true) |\n list | first %}\n\n {% if sensor %}\n\n **Locality:** {{ sensor.attributes.locality }} \n\n **Magnitude:** {{ sensor.attributes.magnitude |\n round(2) }}\n\n **Depth:** {{ sensor.attributes.depth }} km \n\n **Time:** {{ as_timestamp(sensor.attributes.time)\n | timestamp_custom('%a, %b %-d at %I:%M %p') }} \n\n {% else %}\n\n No recent earthquakes detected\n\n {% endif %}\n - title: Warning\n icon: m3of:warning\n conditions:\n - condition: template\n template: >\n {{ states('sensor.home_metservice_weather_warnings')\n not in ['unavailable', 'unknown'] }}\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n - title: Weather Warning\n - type: markdown\n content: >2-\n\n {{ state_attr('sensor.home_metservice_weather_warnings', 'warnings') | default('No warnings') }}\n\n _Issued: {{\n states.sensor.home_metservice_weather_warnings.last_changed.strftime('%I:%M%p\n %A, %d %b') }}_\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n icon: mdi:weather-lightning\n content: Open MetService\n tap_action:\n action: url\n url_path: https://www.metservice.com/warnings/home\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--md-sys-color-on-primary)' }};\n --color: {{ 'var(--md-sys-color-on-primary)' }};\n --chip-background: {{ 'var(--md-sys-color-primary)' }};\n }\n alignment: center\n - title: Forecast\n icon: mdi:weather-partly-cloudy\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:stack-in-card\n mode: vertical\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Forecast\n - subtitle: >-\n {{ states ('sensor.next_rain_summary')\n }}\n uix:\n style: |\n ha-card {\n padding-right: 120px;\n }\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n icon: mdi:weather-lightning\n content: MetService\n tap_action:\n action: url\n url_path: https://www.metservice.com/warnings/home\n uix:\n style:\n .: |\n ha-card {\n --text-color: var(--md-sys-color-on-primary);\n --color: var(--md-sys-color-on-primary);\n --chip-background: var(--md-sys-color-primary);\n }\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 20px;\n right: 2px;\n }\n - type: vertical-stack\n cards:\n - type: custom:weather-forecast-extended-card\n entity: weather.home\n show_header: true\n hourly_forecast: true\n daily_forecast: true\n daily_min_gap: 30\n hourly_min_gap: 16\n show_sun_times: true\n sun_use_home_coordinates: true\n use_night_header_backgrounds: true\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n entity: sensor.daily_weather_data_met_no\n icon: mdi:thermometer\n primary: >\n {% set current = state_attr('weather.home',\n 'temperature') %}\n\n Temp: {{ current }} {{\n state_attr('weather.home', 'temperature_unit')\n }}\n secondary: >-\n {% set forecast =\n state_attr('sensor.daily_weather_data_google_weather',\n 'forecast_data') %} {% set unit =\n state_attr('weather.home', 'temperature_unit')\n %} {% if forecast is defined and\n forecast.temperature is defined and\n forecast.templow is defined %}\n High: {{ forecast.temperature }}{{ unit }} - Low: {{ forecast.templow }}{{ unit }}\n {% else %}\n High: N/A - Low: N/A\n {% endif %}\n color: >\n {% set current = state_attr('weather.home',\n 'temperature') | float(0) %} {% if current <\n 16 %}\n #CEB2F5\n {% elif current < 18 %}\n #5EBDEE\n {% elif current < 22 %}\n #9cc8b8\n {% elif current < 24 %}\n #e7b562\n {% elif current < 27 %}\n #FF564B \n {% else %}\n #99332d\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n - type: custom:mushroom-template-card\n entity: >-\n sensor.your_city_air_quality_index\n icon: mdi:leaf\n primary: Air Quality\n secondary: >-\n {% set aqi =\n states('sensor.your_city_air_quality_index')\n %} {% set pollutant =\n states('sensor.your_city_dominant_pollutant')\n %} {% if aqi not in\n ['unknown','unavailable','none',''] %}\n {% set aqi = aqi | int %}\n {% set level = ('Good' if aqi <= 50 else 'Moderate' if aqi <= 100 else 'Unhealthy' if aqi <= 150 else 'Very Unhealthy' if aqi <= 200 else 'Hazardous') %}\n {{ level }} - AQI {{ aqi }} - {{ pollutant }}\n {% else %}\n Data unavailable\n {% endif %}\n color: >\n {% set aqi =\n states('sensor.your_city_air_quality_index')\n %} {% if aqi not in\n ['unknown','unavailable','none',''] %}\n {% set aqi = aqi | int %}\n {% if aqi <= 50 %} green\n {% elif aqi <= 100 %} yellow\n {% elif aqi <= 150 %} orange\n {% elif aqi <= 200 %} red\n {% elif aqi <= 300 %} Green Bokeh\n {% else %} brown\n {% endif %}\n {% else %}\n grey\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n - title: Rainfall\n icon: m3of:rainy\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Rainfall & Temperature Forecast\n - subtitle: '{{ states (''sensor.24h_rainfall_summary'') }}'\n - type: vertical-stack\n cards:\n - type: custom:apexcharts-card\n header:\n show: true\n graph_span: 24h\n span:\n start: hour\n now:\n show: true\n apex_config:\n chart:\n height: 240\n legend:\n show: true\n grid:\n yaxis:\n lines:\n show: false\n xaxis:\n crosshairs:\n show: false\n tooltip:\n enabled: false\n yaxis:\n - id: rain\n title:\n text: Rain (mm)\n opposite: false\n - id: temp\n title:\n text: Temp (°C)\n opposite: true\n decimalsInFloat: 0\n series:\n - entity: >-\n sensor.google_weather_hourly_forecasts_full_hourly_forecast\n name: Rain\n type: column\n yaxis_id: rain\n data_generator: >\n return entity.attributes.forecasts.map(f\n => {\n let val = f.precipitation;\n let color = '#9e9e9e';\n if (val > 0 && val < 2.5) {\n color = '#4FC3F7';\n } else if (val < 7.6) {\n color = '#0288D1';\n } else if (val < 35) {\n color = '#01579B';\n } else {\n color = '#311B92';\n }\n return {\n x: new Date(f.datetime).getTime(),\n y: val,\n fillColor: color\n };\n });\n - entity: >-\n sensor.google_weather_hourly_forecasts_full_hourly_forecast\n name: Temp\n type: line\n curve: smooth\n yaxis_id: temp\n stroke_width: 2\n color: '#E53935'\n data_generator: >\n return entity.attributes.forecasts.map(f\n => {\n return {\n x: new Date(f.datetime).getTime(),\n y: f.temperature\n };\n });\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n entity: sensor.forecast_rainfall\n icon: mdi:weather-rainy\n primary: >\n {% set r =\n states('sensor.forecast_rainfall') %} {%\n if r in ['unknown', 'unavailable', None]\n %}\n Rainfall: None\n {% else %}\n Rainfall: {{ r }} mm\n {% endif %}\n secondary: >\n {% set r =\n states('sensor.forecast_rainfall') |\n float(0) %} {% if r == 0 %}\n None - Dry conditions\n {% elif r < 1 %}\n Light - Possible drizzle\n {% elif r < 5 %}\n Moderate - Bring umbrella\n {% elif r < 20 %}\n Heavy - Wet outdoors\n {% else %}\n Intense - Flood risk\n {% endif %}\n color: >\n {% set r =\n states('sensor.forecast_rainfall') |\n float(0) %} {% if r == 0 %}\n blue\n {% elif r < 1 %}\n lightblue\n {% elif r < 5 %}\n cyan\n {% elif r < 20 %}\n orange\n {% else %}\n red\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n - type: custom:mushroom-template-card\n entity: sensor.forecast_temperature\n icon: mdi:thermometer\n primary: >\n Temp: {{\n states('sensor.forecast_temperature') }}\n {{ state_attr('weather.home',\n 'temperature_unit') }}\n secondary: >\n {% set t =\n states('sensor.forecast_temperature') |\n float(0) %} {% if t < 5 %}\n Cold - Bundle up\n {% elif t < 15 %}\n Cool - Light jacket\n {% elif t < 25 %}\n Mild - Comfortable\n {% elif t < 32 %}\n Warm - Stay hydrated\n {% else %}\n Hot - Avoid heat\n {% endif %}\n color: >\n {% set current =\n state_attr('weather.home', 'temperature')\n | float(0) %} {% if current < 16 %}\n #CEB2F5\n {% elif current < 18 %}\n #5EBDEE\n {% elif current < 22 %}\n #9cc8b8\n {% elif current < 24 %}\n #e7b562\n {% elif current < 27 %}\n #FF564B \n {% else %}\n #99332d\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n - title: UV\n icon: m3of:sunny\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: UV Index & Cloud Coverage Forecast\n - subtitle: '{{ states (''sensor.uv_and_cloud_summary'') }}'\n - type: vertical-stack\n cards:\n - type: custom:apexcharts-card\n graph_span: 24h\n span:\n start: hour\n now:\n show: true\n apex_config:\n chart:\n height: 240\n legend:\n show: true\n grid:\n yaxis:\n lines:\n show: false\n xaxis:\n crosshairs:\n show: false\n tooltip:\n enabled: false\n yaxis:\n - id: uv\n title:\n text: UV Index\n opposite: false\n min: 0\n max: 11\n - id: cloud\n title:\n text: Cloud Coverage (%)\n opposite: true\n min: 0\n max: 100\n series:\n - entity: >-\n sensor.google_weather_hourly_forecasts_full_hourly_forecast\n name: UV Index\n type: line\n curve: smooth\n yaxis_id: uv\n color: '#F9A825'\n stroke_width: 2\n data_generator: >\n return entity.attributes.forecasts.map(f\n => {\n if (f.uv_index == null) return null;\n return { x: new Date(f.datetime).getTime(), y: f.uv_index };\n }).filter(x => x !== null);\n - entity: >-\n sensor.google_weather_hourly_forecasts_full_hourly_forecast\n name: Cloud Coverage\n type: area\n yaxis_id: cloud\n color: '#90CAF9'\n stroke_width: 1\n opacity: 0.3\n data_generator: >\n return entity.attributes.forecasts.map(f\n => {\n if (f.cloud_coverage == null) return null;\n return { x: new Date(f.datetime).getTime(), y: f.cloud_coverage };\n }).filter(x => x !== null);\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n entity: sensor.forecast_uv_index\n icon: mdi:weather-sunny-alert\n primary: >\n UV Index: {{\n states('sensor.forecast_uv_index') }}\n secondary: >\n {% set uv =\n states('sensor.forecast_uv_index') |\n float(0) %} {% if uv < 3 %}\n Low - Safe outdoors\n {% elif uv < 6 %}\n Moderate - Use hat & sunglasses\n {% elif uv < 8 %}\n High - Apply sunscreen\n {% elif uv < 11 %}\n Very High - Seek shade\n {% else %}\n Extreme - Stay indoors\n {% endif %}\n color: >\n {% set uv =\n states('sensor.forecast_uv_index') |\n float(0) %} {% if uv < 3 %}\n green\n {% elif uv < 6 %}\n yellow\n {% elif uv < 8 %}\n orange\n {% elif uv < 11 %}\n red\n {% else %}\n Green Bokeh\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n - type: custom:mushroom-template-card\n entity: sensor.forecast_cloud_coverage\n icon: mdi:weather-cloudy\n primary: >\n Cloud: {{\n states('sensor.forecast_cloud_coverage')\n }}%\n secondary: >\n {% set c =\n states('sensor.forecast_cloud_coverage') |\n float(0) %} {% if c <= 25 %}\n Clear skies - ideal visibility\n {% elif c <= 50 %}\n Partly cloudy - some sun breaks\n {% elif c <= 75 %}\n Mostly cloudy - limited sunshine\n {% else %}\n Overcast - likely dull conditions\n {% endif %}\n color: >\n {% set c =\n states('sensor.forecast_cloud_coverage') |\n float(0) %} {% if c <= 25 %}\n blue\n {% elif c <= 50 %}\n light-blue\n {% elif c <= 75 %}\n grey\n {% else %}\n blue-grey\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n - title: Wind\n icon: m3of:storm\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Wind Speed & Direction Forecast\n - subtitle: '{{ states (''sensor.wind_summary'') }}'\n - type: vertical-stack\n cards:\n - type: custom:apexcharts-card\n graph_span: 24h\n span:\n start: hour\n now:\n show: true\n apex_config:\n chart:\n height: 240\n legend:\n show: true\n grid:\n yaxis:\n lines:\n show: false\n xaxis:\n crosshairs:\n show: false\n tooltip:\n enabled: false\n yaxis:\n - id: speed\n title:\n text: Wind Speed (km/h)\n opposite: false\n - id: direction\n title:\n text: Direction (°)\n opposite: true\n min: 0\n max: 360\n series:\n - entity: >-\n sensor.google_weather_hourly_forecasts_full_hourly_forecast\n name: Speed\n type: line\n curve: smooth\n yaxis_id: speed\n color: '#0288D1'\n stroke_width: 2\n data_generator: >\n return entity.attributes.forecasts.map(f\n => {\n let speed = f.wind_speed;\n speed = Math.round(speed * 10) / 10; // round to 1 decimal place\n return { x: new Date(f.datetime).getTime(), y: speed };\n });\n - entity: >-\n sensor.google_weather_hourly_forecasts_full_hourly_forecast\n name: Direction\n type: line\n curve: smooth\n yaxis_id: direction\n color: '#8E24AA'\n stroke_width: 1\n data_generator: >\n return entity.attributes.forecasts.map(f\n => {\n let direction = Math.round(f.wind_bearing); // round to nearest integer\n return { x: new Date(f.datetime).getTime(), y: direction };\n });\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n entity: sensor.forecast_wind_speed\n icon: mdi:weather-windy\n primary: >\n Wind: {{\n states('sensor.forecast_wind_speed') }} {{\n state_attr('weather.home',\n 'wind_speed_unit') }}\n secondary: >\n {% set s =\n states('sensor.forecast_wind_speed') |\n float(0) %} {% set d =\n states('sensor.forecast_wind_direction') |\n float(0) %} {% if s < 5 %}\n Calm - Smooth air\n {% elif s < 20 %}\n Breezy - Light gusts\n {% elif s < 40 %}\n Windy - Secure items\n {% elif s < 60 %}\n Strong - Use caution\n {% else %}\n Gale - Stay indoors\n {% endif %} ({{ d | round(0) }}°)\n color: >\n {% set s =\n states('sensor.forecast_wind_speed') |\n float(0) %} {% if s < 5 %}\n green\n {% elif s < 20 %}\n yellow\n {% elif s < 40 %}\n orange\n {% elif s < 60 %}\n red\n {% else %}\n Green Bokeh\n {% endif %}\n features_position: bottom\n id: wind\n - title: Radar\n icon: m3of:radar\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Radar\n - subtitle: >-\n {% set w = states.weather.home.attributes\n %}🌡️ {{ w.temperature }}{{ w.temperature_unit\n }} 💧 Humidity: {{ w.humidity }}% 👁️\n Visibility: {{ w.visibility }}km ☁️ Clouds: {{\n w.cloud_coverage | round }}% 💨 Wind: {{\n w.wind_speed }} {{ w.wind_speed_unit }} 🌤️ UV\n index: {{ w.uv_index }}\n - type: custom:mod-card\n card:\n type: iframe\n url: >-\n https://embed.windy.com/embed2.html?lat=x&lon=y&width=800&height=600\n style: |\n ha-card {\n padding: 0;\n height: 350px !important; /* fix height */\n width: 100% !important;\n overflow: hidden;\n }\n iframe {\n width: 100% !important;\n height: 100% !important;\n }\n - title: Lunar\n icon: m3of:moon-stars\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Lunar Cycle & Visibility\n - subtitle: '{{ states (''sensor.moon_summary'') }}'\n - type: custom:lunar-phase-card\n entity: ''\n 12hr_format: true\n calendar_modal: false\n compact_view: true\n default_card: base\n hide_buttons: false\n mile_unit: false\n moon_position: left\n number_decimals: 2\n selected_language: en\n show_background: false\n southern_hemisphere: false\n use_custom: false\n use_default: true\n use_entity: false\n graph_config:\n graph_type: default\n y_ticks: false\n x_ticks: false\n show_time: true\n show_Temp: true\n show_highest: true\n y_ticks_position: left\n y_ticks_step_size: 30\n time_step_size: 30\n font_customize:\n header_font_size: medium\n header_font_style: capitalize\n label_font_size: small\n label_font_style: none\n label_font_color: ''\n hide_label: false\n latitude: x\n longitude: y\n location:\n city: ''\n country: New Zealand\n custom_background: >-\n https://cdn.jsdelivr.net/gh/ngocjohn/lunar-phase-card@1.7.3/background/moon_bg_2.png\n cards: []\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n header:\n layout: responsive\n badges_position: top\n badges_wrap: wrap\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n subview: true\n - type: sections\n max_columns: 3\n icon: mdi:shield-lock\n path: alarmo\n title: Alarmo\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Camera\n navigation_path: /tablet-dashboard/camera\n title_font_size: 20px\n - type: custom:paper-buttons-row\n styles:\n gap: 8px\n justify-content: flex-start\n overflow: scroll\n margin: 12px 0 12px -18px\n padding-left: 18px\n width: 100%\n extra_styles: |\n ::-webkit-scrollbar {\n display: none;\n }\n buttons:\n - entity: input_boolean.siren_alarm\n state_icons:\n 'on': m3of:siren\n 'off': m3o:siren\n layout: icon_name\n name: SIREN ALARM\n tap_action:\n action: call-service\n service: script.alarmo_sound_alarm\n styles:\n name:\n color: grey\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: var(--popupBG)\n border-radius: 24px\n color: var(--white)\n icon:\n '--mdc-icon-size': 26px\n color: grey\n state_styles:\n 'on':\n icon:\n color: red\n name:\n color: red\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n states:\n - arm_away\n type: alarm-panel\n entity: alarm_control_panel.alarmo\n theme: Material You\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n header:\n layout: responsive\n badges_position: top\n badges_wrap: wrap\n cards: []\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n subview: true\n - type: sections\n max_columns: 3\n icon: m3o:camera\n path: camera\n title: Camera\n sections:\n - type: grid\n cards:\n - type: vertical-stack\n cards:\n - type: custom:stack-in-card\n mode: vertical\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n title: Driveway\n subtitle: '{{ states (''sensor.right_driveway_camera_status'') }}'\n animation_delay: 0.5s\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: automation.driveway_camera_vehicle_notification\n icon: >\n {{ 'mdi:car' if\n is_state('automation.driveway_camera_vehicle_notification',\n 'on') else 'mdi:car-off' }}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_vehicle_notification', 'on') else '#a8a8a8' }};\n --color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_vehicle_notification', 'on') else '#a8a8a8' }};\n animation: slideDown 1.0s ease-out 1.0s both;\n }\n @keyframes slideDown {\n from { \n opacity: 1;\n transform: translateY(-4px);\n }\n to { \n opacity: 1;\n transform: translateY(0);\n }\n }\n mushroom-chip$: |\n .chip {\n transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n mushroom-chip$mushroom-state-icon$: |\n ha-state-icon {\n transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n - type: template\n entity: automation.driveway_camera_person_notification\n icon: >\n {{ 'm3of:sensor-occupied' if\n is_state('automation.driveway_camera_person_notification',\n 'on') else 'm3o:sensors-krx-off' }}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_person_notification', 'on') else '#a8a8a8' }};\n --color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_person_notification', 'on') else '#a8a8a8' }};\n animation: slideDown 1.0s ease-out 1.3s both;\n }\n @keyframes slideDown {\n from { \n opacity: 1;\n transform: translateY(-4px);\n }\n to { \n opacity: 1;\n transform: translateY(0);\n }\n }\n mushroom-chip$: |\n .chip {\n transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n mushroom-chip$mushroom-state-icon$: |\n ha-state-icon {\n transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 22px;\n right: 2px;\n }\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password@192.168.1.150/h265Preview_01_main#video=copy#audio=opus\n entity_id_light_one: light.lights_ceiling\n light_one_icon: hue:recessed-ceiling\n entity_id_light_two: light.lights_outdoor_grg\n light_two_icon: hue:recessed-ceiling\n entity_id_light_three: light.lights_wall\n light_three_icon: hue:wall-appear\n animation_delay: 0.8s\n - type: custom:stack-in-card\n mode: vertical\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n title: Left Walkway\n subtitle: '{{ states (''sensor.left_walkway_camera_status'') }}'\n animation_delay: 1.0s\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: automation.left_walkway_camera_person_notification\n icon: >\n {{ 'm3of:sensor-occupied' if\n is_state('automation.left_walkway_camera_person_notification',\n 'on') else 'm3o:sensors-krx-off' }}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--primary-text-color)' if is_state('automation.left_walkway_camera_person_notification', 'on') else '#a8a8a8' }};\n --color: {{ 'var(--primary-text-color)' if is_state('automation.left_walkway_camera_person_notification', 'on') else '#a8a8a8' }};\n animation: slideDown 1.0s ease-out 1.7s both;\n }\n @keyframes slideDown {\n from { \n opacity: 1;\n transform: translateY(-4px);\n }\n to { \n opacity: 1;\n transform: translateY(0);\n }\n }\n mushroom-chip$: |\n .chip {\n transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n mushroom-chip$mushroom-state-icon$: |\n ha-state-icon {\n transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 22px;\n right: 2px;\n }\n - type: custom:streamline-card\n template: camera_generic_with_chips_card\n variables:\n camera_entity: camera.left_walkway_camera_fluent\n entity_id_light_one: switch.outdoor_light_switch_lr\n light_one_icon: mdi:outdoor-lamp\n entity_id_light_two: switch.rear_light_switch_grg\n light_two_icon: mdi:outdoor-lamp\n animation_delay: 2.3s\n - type: grid\n cards:\n - type: vertical-stack\n cards:\n - type: custom:stack-in-card\n mode: vertical\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n title: Entrance\n subtitle: '{{ states (''sensor.entrance_camera_status'') }}'\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: automation.driveway_camera_vehicle_notification\n icon: >-\n {{ 'm3of:sensor-occupied' if\n is_state('automation.room_presence_entrance', 'on')\n else 'm3o:sensors-krx-off' }}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_vehicle_notification', 'on') else '#a8a8a8' }};\n --color: {{ 'var(--primary-text-color)' if is_state('automation.driveway_camera_vehicle_notification', 'on') else '#a8a8a8' }};\n }\n mushroom-chip$: |\n .chip {\n transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n mushroom-chip$mushroom-state-icon$: |\n ha-state-icon {\n transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 22px;\n right: 2px;\n }\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password@192.168.1.222/h265Preview_01_main#video=copy#audio=opus\n entity_id_light_one: light.lights_etr\n light_one_icon: m3of:lightbulb\n camera_height: 238px\n animation_delay: 1.3s\n - type: custom:stack-in-card\n mode: vertical\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n title: Backyard\n subtitle: '{{ states (''sensor.backyard_camera_status'') }}'\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: automation.right_backyard_camera_person_notification\n icon: >\n {{ 'm3of:sensor-occupied' if\n is_state('automation.right_backyard_camera_person_notification',\n 'on') else 'm3o:sensors-krx-off' }}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--primary-text-color)' if is_state('automation.right_backyard_camera_person_notification', 'on') else '#a8a8a8' }};\n --color: {{ 'var(--primary-text-color)' if is_state('automation.right_backyard_camera_person_notification', 'on') else '#a8a8a8' }};\n }\n mushroom-chip$: |\n .chip {\n transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n mushroom-chip$mushroom-state-icon$: |\n ha-state-icon {\n transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 22px;\n right: 2px;\n }\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password@192.168.1.148/h264Preview_01_main#video=copy#audio=opus\n entity_id_light_one: switch.patio_main_switch_la\n light_one_icon: m3of:lightbulb\n animation_delay: 2.8s\n - type: grid\n cards:\n - type: vertical-stack\n cards:\n - type: custom:stack-in-card\n mode: vertical\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n title: Right Walkway\n subtitle: '{{ states (''sensor.right_walkway_camera_status'') }}'\n animation_delay: 1.4s\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: automation.right_walkway_camera_person_notification\n icon: >\n {{ 'm3of:sensor-occupied' if\n is_state('automation.right_walkway_camera_person_notification',\n 'on') else 'm3o:sensors-krx-off' }}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--primary-text-color)' if is_state('automation.right_walkway_camera_person_notification', 'on') else '#a8a8a8' }};\n --color: {{ 'var(--primary-text-color)' if is_state('automation.right_walkway_camera_person_notification', 'on') else '#a8a8a8' }};\n animation: slideDown 1.0s ease-out 2.1s both;\n }\n @keyframes slideDown {\n from { \n opacity: 1;\n transform: translateY(-4px);\n }\n to { \n opacity: 1;\n transform: translateY(0);\n }\n }\n mushroom-chip$: |\n .chip {\n transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n mushroom-chip$mushroom-state-icon$: |\n ha-state-icon {\n transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 22px;\n right: 2px;\n animation: slideDown 1.0s ease-out 1.7s both;\n }\n @keyframes slideDown {\n from { \n opacity: 1;\n transform: translateY(-4px);\n }\n to { \n opacity: 1;\n transform: translateY(0);\n }\n }\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password@192.168.1.244/h265Preview_01_main#video=copy#audio=opus\n entity_id_light_one: switch.patio_main_switch_la\n entity_id_light_two: switch.patio_side_switch_la\n light_one_icon: mdi:outdoor-lamp\n light_two_icon: mdi:outdoor-lamp\n animation_delay: 1.8s\n - type: custom:stack-in-card\n mode: vertical\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n title: Garage\n subtitle: '{{ states (''sensor.garage_camera_status'') }}'\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n entity: binary_sensor.door_sensor_grg_contact\n icon: >\n {% if\n is_state('binary_sensor.door_sensor_grg_contact',\n 'on') %}\n mdi:garage-open-variant\n {% else %}\n mdi:garage-variant\n {% endif %}\n content: >\n {% if\n is_state('binary_sensor.door_sensor_grg_contact',\n 'on') %}\n Open\n {% else %}\n Closed\n {% endif %}\n tap_action:\n action: call-service\n service: script.garage_button_frontend\n uix:\n style:\n .: |\n ha-card {\n --text-color: 'white';\n --color: 'white';\n --chip-background: {{ '#bc000a' if is_state('binary_sensor.door_sensor_grg_contact', 'on') else 'var(--md-sys-color-on-primary)' }};\n }\n - type: template\n entity: automation.garage_camera_person_notification\n icon: >\n {{ 'm3of:sensor-occupied' if\n is_state('automation.garage_camera_person_notification',\n 'on') else 'm3o:sensors-krx-off' }}\n tap_action:\n action: toggle\n uix:\n style:\n .: |\n ha-card {\n --text-color: {{ 'var(--primary-text-color)' if is_state('automation.garage_camera_person_notification', 'on') else '#a8a8a8' }};\n --color: {{ 'var(--primary-text-color)' if is_state('automation.garage_camera_person_notification', 'on') else '#a8a8a8' }};\n }\n mushroom-chip$: |\n .chip {\n transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n mushroom-chip$mushroom-state-icon$: |\n ha-state-icon {\n transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n uix:\n style: |\n ha-card {\n position: absolute;\n top: 22px;\n right: 2px;\n }\n - type: custom:streamline-card\n template: camera_rtsp_with_chips_card\n variables:\n camera_url: >-\n ffmpeg:rtsp://username:password@192.168.1.248/h264Preview_01_main#video=copy#audio=opus\n entity_id_light_one: switch.light_switch_grg\n light_one_icon: mdi:garage-variant\n entity_id_light_two: switch.rear_light_switch_grg\n light_two_icon: mdi:outdoor-lamp\n animation_delay: 3.3s\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n header:\n layout: responsive\n badges_position: top\n badges_wrap: wrap\n cards: []\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: repeat\n attachment: fixed\n image: null\n subview: true\n - type: sections\n max_columns: 3\n title: Calendar\n path: calendar\n sections:\n - type: grid\n cards:\n - type: custom:week-planner-card\n calendars:\n - entity: calendar.christina\n color: '#ff6a6a'\n - entity: calendar.rey\n color: '#71c8fe'\n - entity: calendar.house_maintenance\n color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n color: '#f9da4e'\n days: '1'\n startingDay: today\n startingDayOffset: 0\n weather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n entity: weather.home\n locale: nz\n - type: grid\n cards:\n - type: custom:week-planner-card\n calendars:\n - entity: calendar.christina\n color: '#ff6a6a'\n - entity: calendar.rey\n color: '#71c8fe'\n - entity: calendar.house_maintenance\n color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n color: '#f9da4e'\n days: '1'\n startingDay: today\n startingDayOffset: '1'\n weather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n entity: weather.home\n locale: nz\n - type: grid\n cards:\n - type: custom:week-planner-card\n calendars:\n - entity: calendar.christina\n color: '#ff6a6a'\n - entity: calendar.rey\n color: '#71c8fe'\n - entity: calendar.house_maintenance\n color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n color: '#f9da4e'\n days: '1'\n startingDay: today\n startingDayOffset: '2'\n weather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n entity: weather.home\n locale: nz\n - type: grid\n cards:\n - type: custom:week-planner-card\n calendars:\n - entity: calendar.christina\n color: '#ff6a6a'\n - entity: calendar.rey\n color: '#71c8fe'\n - entity: calendar.house_maintenance\n color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n color: '#f9da4e'\n days: '1'\n startingDay: today\n startingDayOffset: '3'\n weather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n entity: weather.home\n locale: nz\n showLegend: false\n - type: grid\n cards:\n - type: custom:week-planner-card\n calendars:\n - entity: calendar.christina\n color: '#ff6a6a'\n - entity: calendar.rey\n color: '#71c8fe'\n - entity: calendar.house_maintenance\n color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n color: '#f9da4e'\n days: '1'\n startingDay: today\n startingDayOffset: '4'\n weather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n entity: weather.home\n locale: nz\n showLegend: false\n - type: grid\n cards:\n - type: custom:week-planner-card\n calendars:\n - entity: calendar.christina\n color: '#ff6a6a'\n - entity: calendar.rey\n color: '#71c8fe'\n - entity: calendar.house_maintenance\n color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n color: '#f9da4e'\n days: '1'\n startingDay: today\n startingDayOffset: '5'\n weather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n entity: weather.home\n locale: nz\n showLegend: false\n - type: grid\n cards:\n - type: custom:week-planner-card\n calendars:\n - entity: calendar.christina\n color: '#ff6a6a'\n - entity: calendar.rey\n color: '#71c8fe'\n - entity: calendar.house_maintenance\n color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n color: '#f9da4e'\n days: '1'\n startingDay: today\n startingDayOffset: '6'\n weather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n entity: weather.home\n locale: nz\n showLegend: false\n - type: grid\n cards:\n - type: custom:week-planner-card\n calendars:\n - entity: calendar.christina\n color: '#ff6a6a'\n - entity: calendar.rey\n color: '#71c8fe'\n - entity: calendar.house_maintenance\n color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n color: '#f9da4e'\n days: '1'\n startingDay: today\n startingDayOffset: '7'\n weather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n entity: weather.home\n locale: nz\n showLegend: false\n - type: grid\n cards:\n - type: custom:week-planner-card\n calendars:\n - entity: calendar.christina\n color: '#ff6a6a'\n - entity: calendar.rey\n color: '#71c8fe'\n - entity: calendar.house_maintenance\n color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n color: '#f9da4e'\n days: '1'\n startingDay: today\n startingDayOffset: '8'\n weather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n entity: weather.home\n locale: nz\n showLegend: false\n - type: grid\n cards:\n - type: custom:week-planner-card\n calendars:\n - entity: calendar.christina\n color: '#ff6a6a'\n - entity: calendar.rey\n color: '#71c8fe'\n - entity: calendar.house_maintenance\n color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n color: '#f9da4e'\n days: '1'\n startingDay: today\n startingDayOffset: '9'\n weather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n entity: weather.home\n locale: nz\n showLegend: false\n - type: grid\n cards:\n - type: custom:week-planner-card\n calendars:\n - entity: calendar.christina\n color: '#ff6a6a'\n - entity: calendar.rey\n color: '#71c8fe'\n - entity: calendar.house_maintenance\n color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n color: '#f9da4e'\n days: '1'\n startingDay: today\n startingDayOffset: '10'\n weather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n entity: weather.home\n locale: nz\n showLegend: false\n - type: grid\n cards:\n - type: custom:week-planner-card\n calendars:\n - entity: calendar.christina\n color: '#ff6a6a'\n - entity: calendar.rey\n color: '#71c8fe'\n - entity: calendar.house_maintenance\n color: '#d3f37f'\n - entity: calendar.new_zealand_holidays\n color: '#f9da4e'\n days: '1'\n startingDay: today\n startingDayOffset: '11'\n weather:\n showCondition: true\n showTemperature: true\n showLowTemperature: true\n entity: weather.home\n locale: nz\n showLegend: false\n icon: mdi:calendar\n cards: []\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n header:\n layout: responsive\n badges_position: top\n badges_wrap: wrap\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: repeat\n attachment: fixed\n image: null\n subview: true\n - type: sections\n max_columns: 3\n title: Scenes\n path: scenes\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:streamline-card\n template: title_navigation_card\n variables:\n title: Scenes Preset\n title_font_size: 20px\n navigation_path: '#room-selector'\n - type: custom:mushroom-title-card\n subtitle: Refreshing\n title: ''\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Blossom.webp\n scene_value: blossom\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Crocus.webp\n scene_value: crocus\n - type: custom:mushroom-title-card\n subtitle: Peaceful\n title: ''\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Mountain breeze.webp\n scene_value: mountain_breeze\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Lake mist.webp\n scene_value: lake_mist\n - type: custom:mushroom-title-card\n subtitle: Cozy\n title: ''\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Rolling hills.webp\n scene_value: rolling_hills\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Dreamy dusk.webp\n scene_value: dreamy_dusk\n - type: custom:mushroom-title-card\n subtitle: Dreamy\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Still waters.webp\n scene_value: still_waters\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Adrift.webp\n scene_value: adrift\n - type: custom:mushroom-title-card\n subtitle: Pure\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Amethyst Valley.webp\n scene_value: amethyst_valley\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Hazy Days.webp\n scene_value: hazy_days\n - type: custom:mushroom-title-card\n subtitle: Serenity\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Galaxy.webp\n scene_value: galaxy\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Arctic aurora.webp\n scene_value: arctic_aurora\n - type: custom:mushroom-title-card\n subtitle: Romantic\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Ruby romance.webp\n scene_value: ruby_romance\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/City of love.webp\n scene_value: city_of_love\n - type: custom:mushroom-title-card\n subtitle: Party\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Fairfax.webp\n scene_value: fairfax\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Tokyo.webp\n scene_value: tokyo\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Osaka.webp\n scene_value: osaka\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Motown.webp\n scene_value: motown\n - type: custom:mushroom-title-card\n subtitle: Luxurious\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Emerald flutter.webp\n scene_value: emerald_flutter\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Memento.webp\n scene_value: memento\n - type: custom:mushroom-title-card\n subtitle: Race Day\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Zandvoort.webp\n scene_value: zandvoort\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Bahrain.webp\n scene_value: bahrain\n - type: custom:mushroom-title-card\n subtitle: Holiday\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Under The Tree.webp\n scene_value: under_the_tree\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Snow Sparkle.webp\n scene_value: snow_sparkle\n - type: grid\n cards:\n - type: custom:button-card\n show_name: false\n show_icon: false\n tap_action:\n action: none\n styles:\n card:\n - background: none\n - box-shadow: none\n - padding: 64px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Precious.webp\n scene_value: precious\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Narcissa.webp\n scene_value: narcissa\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Sunday morning.webp\n scene_value: sunday_morning\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Spring blossom.webp\n scene_value: spring_blossom\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Savannah sunset.webp\n scene_value: savannah_sunset\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Ruby glow.webp\n scene_value: ruby_glow\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Blue lagoon.webp\n scene_value: blue_lagoon\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Palm Beach.webp\n scene_value: palm_beach\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Spring lake.webp\n scene_value: spring_lake\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Midwinter.webp\n scene_value: midwinter\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Moonlight.webp\n scene_value: moonlight\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Nebula.webp\n scene_value: nebula\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Sunset allure.webp\n scene_value: sunset_allure\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Lovebirds.webp\n scene_value: lovebirds\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Miami.webp\n scene_value: mmiami\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Cancun.webp\n scene_value: cancun\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Ibiza.webp\n scene_value: ibiza\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Chinatown.webp\n scene_value: chinatown\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Resplendent.webp\n scene_value: resplendent\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Scarlet dream.webp\n scene_value: scarlet_dream\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Silverstone.webp\n scene_value: silverstone\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Sao Paulo.webp\n scene_value: sao_paulo\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Silent Night.webp\n scene_value: silent_night\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Rosy Sparkle.webp\n scene_value: rosy_sparkle\n - type: grid\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:button-card\n show_name: false\n show_icon: false\n tap_action:\n action: none\n styles:\n card:\n - background: none\n - box-shadow: none\n - padding: 10px 145px\n - width: 100%\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 245px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Golden pond.webp\n scene_value: golden_pond\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Tropical twilight.webp\n scene_value: tropical_twilight\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Majestic morning.webp\n scene_value: majestic_morning\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Pensive.webp\n scene_value: pensive\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Autumn gold.webp\n scene_value: autumn_gold\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Misty ridge.webp\n scene_value: misty_ridge\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Starlight.webp\n scene_value: starlight\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Blood moon.webp\n scene_value: blood_moon\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 28px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Smitten.webp\n scene_value: smitten\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Promise.webp\n scene_value: promise\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 387px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Color Burst.webp\n scene_value: color_burst\n - type: custom:streamline-card\n template: scene_button_card\n variables:\n img_path: /local/hue/raw/Festive Fun.webp\n scene_value: festive_fun\n - type: grid\n cards:\n - type: vertical-stack\n cards:\n - type: custom:bubble-card\n card_type: pop-up\n hash: '#room-selector'\n name: Room Selector\n icon: m3o:room-preferences\n styles: |-\n #root {\n height: unset !important;\n max-height: 100% !important;\n transition: transform var(--md-sys-motion-expressive-spatial-default) !important;\n }\n .bubble-pop-up-container {\n padding-bottom: 64px !important;\n\n }\n bg_color: var(--card-background-color)\n button_type: name\n sub_button:\n main: []\n bottom: []\n slider_fill_orientation: left\n slider_value_position: right\n - type: custom:simple-tabs\n pre-load: true\n active-background: var(--md-sys-color-primary)\n active-text-color: var(--md-sys-color-on-primary)\n text-color: var(--primary-text-color)\n tabs:\n - title: Living Area\n icon: mdi:sofa\n id: living\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Area\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: m3of:table-restaurant\n primary: Dining\n secondary: >-\n {{\n states('input_text.dining_table_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_dt\n - light.light_two_dt\n - light.light_three_dt\n - light.light_one_ktc_dt\n - light.light_two_ktc_dt\n - light.light_three_ktc_dt\n presence_automation:\n - automation.room_presence_dining_table\n room_boolean: input_boolean.dining_table_dynamic_scene\n room_scene_tracker: input_text.dining_table_dynamic_scene_active\n color: >-\n {% if\n states('input_text.dining_table_dynamic_scene_active')\n != '' %}\n #f6bd60\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: mdi:sofa\n primary: Sofa\n secondary: >-\n {{\n states('input_text.sofa_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_sofa\n - light.light_two_sofa\n - light.light_three_sofa\n - light.light_four_sofa\n presence_automation:\n - automation.room_presence_sofa\n - automation.sofa_sensor_workaround\n room_boolean: input_boolean.sofa_dynamic_scene\n room_scene_tracker: input_text.sofa_dynamic_scene_active\n color: >-\n {% if\n states('input_text.sofa_dynamic_scene_active')\n != '' %}\n #f7ede2\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: mdi:countertop\n primary: Kitchen\n secondary: >-\n {{\n states('input_text.kitchen_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_ktc\n - light.light_two_ktc\n presence_automation:\n - automation.room_presence_kitchen\n room_boolean: input_boolean.kitchen_dynamic_scene\n room_scene_tracker: input_text.kitchen_dynamic_scene_active\n color: >-\n {% if\n states('input_text.kitchen_dynamic_scene_active')\n != '' %}\n #f5cac3\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: mdi:cookie\n primary: Scullery\n secondary: >-\n {{\n states('input_text.scullery_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_scr\n presence_automation:\n - automation.room_presence_scullery\n room_boolean: input_boolean.scullery_dynamic_scene\n room_scene_tracker: input_text.scullery_dynamic_scene_active\n color: >-\n {% if\n states('input_text.scullery_dynamic_scene_active')\n != '' %}\n #84a59d\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: mdi:image-frame\n primary: Hallway\n secondary: >-\n {{\n states('input_text.hallway_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_hw\n - light.light_two_hw\n - light.light_three_hw\n - light.light_four_hw\n - light.light_five_hw\n - light.light_six_hw\n presence_automation:\n - automation.room_presence_hallway\n room_boolean: input_boolean.hallway_dynamic_scene\n room_scene_tracker: input_text.hallway_dynamic_scene_active\n color: >-\n {% if\n states('input_text.hallway_dynamic_scene_active')\n != '' %}\n #f28482\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - title: Bedroom\n icon: m3of:bed\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Area\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: m3of:bed\n primary: Master\n secondary: >-\n {{\n states('input_text.master_bedroom_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_mbr\n - light.light_two_mbr\n presence_automation: automation.room_presence_master_bedroom\n room_boolean: input_boolean.master_bedroom_dynamic_scene\n room_scene_tracker: >-\n input_text.master_bedroom_dynamic_scene_active\n color: >-\n {% if\n states('input_text.master_bedroom_dynamic_scene_active')\n != '' %}\n #cdb4db\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: mdi:wardrobe\n primary: Wardrobe\n secondary: >-\n {{\n states('input_text.wardrobe_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_wr\n - light.light_two_wr\n presence_automation: automation.room_presence_wardrobe\n room_boolean: input_boolean.wardrobe_dynamic_scene\n room_scene_tracker: input_text.wardrobe_dynamic_scene_active\n color: >-\n {% if\n states('input_text.wardrobe_dynamic_scene_active')\n != '' %}\n #ffc8dd\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: m3of:stroller\n primary: Baby\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_br\n - light.light_two_br\n - light.ava_bed_led\n - light.iyla_bed_led\n presence_automation: automation.room_presence_baby_room\n room_boolean: input_boolean.baby_room_dynamic_scene\n room_scene_tracker: input_text.baby_room_dynamic_scene_active\n secondary: >-\n {{\n states('input_text.baby_room_dynamic_scene_active')\n }}\n color: >-\n {% if\n states('input_text.baby_room_dynamic_scene_active')\n != '' %}\n #ffafcc\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: m3of:person-3\n primary: Single\n tap_action:\n action: perform-action\n data:\n room_lights:\n - light.light_one_sgr\n - light.light_two_sgr\n - light.bed_led_sgr\n presence_automation: automation.room_presence_single_guest_room\n room_boolean: >-\n input_boolean.single_guest_room_dynamic_scene\n room_scene_tracker: >-\n input_text.single_guest_room_dynamic_scene_active\n perform_action: script.toggle_or_apply_dynamic_scene\n target: {}\n secondary: >-\n {{\n states('input_text.single_guest_room_dynamic_scene_active')\n }}\n color: >-\n {% if\n states('input_text.single_guest_room_dynamic_scene_active')\n != '' %}\n #bde0fe\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: m3of:groups-2\n primary: Multiple\n tap_action:\n action: perform-action\n data:\n room_lights:\n - light.light_one_mgr\n - light.light_two_mgr\n - light.bed_led_mgr\n presence_automation: automation.room_presence_multiple_guest_room\n room_boolean: >-\n input_boolean.multiple_guest_room_dynamic_scene\n room_scene_tracker: >-\n input_text.multiple_guest_room_dynamic_scene_active\n perform_action: script.toggle_or_apply_dynamic_scene\n target: {}\n secondary: >-\n {{\n states('input_text.multiple_guest_room_dynamic_scene_active')\n }}\n color: >-\n {% if\n states('input_text.multiple_guest_room_dynamic_scene_active')\n != '' %}\n #a2d2ff\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n badge: ''\n id: bedroom\n - title: Bathroom\n icon: m3of:water-drop\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Area\n - type: custom:mushroom-template-card\n icon: m3of:bed\n primary: Master Bathroom\n secondary: >-\n {{\n states('input_text.master_bathroom_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_mbrt\n - light.light_two_mbrt\n - light.vanity_led_mbrt\n presence_automation: automation.room_presence_master_bathroom\n room_boolean: input_boolean.master_bathroom_dynamic_scene\n room_scene_tracker: input_text.master_bathroom_dynamic_scene_active\n color: >-\n {% if\n states('input_text.master_bathroom_dynamic_scene_active')\n != '' %}\n #ffa69e\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: m3of:faucet\n primary: Vanity\n secondary: >-\n {{\n states('input_text.guest_bathroom_vanity_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_gbrv\n - light.light_two_gbrv\n - light.vanity_led_gbrv\n presence_automation:\n - >-\n automation.room_presence_guest_bathroom_vanity\n room_boolean: >-\n input_boolean.guest_bathroom_vanity_dynamic_scene\n room_scene_tracker: >-\n input_text.guest_bathroom_vanity_dynamic_scene_active\n color: >-\n {% if\n states('input_text.guest_bathroom_vanity_dynamic_scene_active')\n != '' %}\n #faf3dd\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: mdi:shower\n primary: Bathing\n secondary: >-\n {{\n states('input_text.guest_bathroom_bathing_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_one_gbrb\n - light.light_two_gbrb\n presence_automation: >-\n automation.room_presence_guest_bathroom_bathing\n room_boolean: >-\n input_boolean.guest_bathroom_bathing_dynamic_scene\n room_scene_tracker: >-\n input_text.guest_bathroom_bathing_dynamic_scene_active\n color: >-\n {% if\n states('input_text.guest_bathroom_bathing_dynamic_scene_active')\n != '' %}\n #b8f2e6\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: m3of:water-drop\n primary: Toilet\n secondary: >-\n {{\n states('input_text.guest_bathroom_toilet_dynamic_scene_active')\n }}\n tap_action:\n action: call-service\n service: script.toggle_or_apply_dynamic_scene\n data:\n room_lights:\n - light.light_gbrt\n presence_automation: >-\n automation.room_presence_guest_bathroom_toilet\n room_boolean: >-\n input_boolean.guest_bathroom_toilet_dynamic_scene\n room_scene_tracker: >-\n input_text.guest_bathroom_toilet_dynamic_scene_active\n color: >-\n {% if\n states('input_text.guest_bathroom_toilet_dynamic_scene_active')\n != '' %}\n #aed9e0\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - title: Outdoor\n icon: mdi:light-flood-down\n id: outdoor\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Area\n - type: horizontal-stack\n cards:\n - type: custom:mushroom-template-card\n icon: mdi:garage-variant\n primary: Garage\n secondary: >-\n {{\n states('input_text.garage_outdoor_dynamic_scene_active')\n }}\n tap_action:\n action: perform-action\n data:\n room_lights:\n - light.light_one_outdoor_grg\n - light.light_two_outdoor_grg\n presence_automation: automation.outdoor_presence_driveway\n room_boolean: input_boolean.garage_outdoor_dynamic_scene\n room_scene_tracker: >-\n input_text.garage_outdoor_dynamic_scene_active\n perform_action: script.toggle_or_apply_dynamic_scene\n target: {}\n color: >-\n {% if\n states('input_text.garage_outdoor_dynamic_scene_active')\n != '' %}\n #e76f51\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: hue:wall-appear\n primary: Wall\n secondary: >-\n {{\n states('input_text.wall_dynamic_scene_active')\n }}\n tap_action:\n action: perform-action\n data:\n room_lights:\n - light.left_porch_light_drw\n - light.right_porch_light_drw\n - light.side_porch_light_drw\n - light.wall_light_one_grg\n - light.wall_light_two_grg\n presence_automation: automation.outdoor_presence_driveway\n room_boolean: input_boolean.wall_dynamic_scene\n room_scene_tracker: input_text.wall_dynamic_scene_active\n perform_action: script.toggle_or_apply_dynamic_scene\n target: {}\n color: >-\n {% if\n states('input_text.wall_dynamic_scene_active')\n != '' %}\n #f4a261\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:mushroom-template-card\n icon: mdi:home-roof\n primary: Roof\n secondary: >-\n {{\n states('input_text.roof_dynamic_scene_active')\n }}\n tap_action:\n action: perform-action\n data:\n room_lights:\n - light.light_one_left_roof_drw\n - light.light_two_left_roof_drw\n - light.light_one_ceiling_porch_drw\n - light.light_two_ceiling_porch__drw\n - light.light_one_right_roof_drw\n - light.light_two_right_roof_drw\n presence_automation: automation.outdoor_presence_driveway\n room_boolean: input_boolean.roof_dynamic_scene\n room_scene_tracker: input_text.roof_dynamic_scene_active\n perform_action: script.toggle_or_apply_dynamic_scene\n target: {}\n color: >-\n {% if\n states('input_text.roof_dynamic_scene_active')\n != '' %}\n #e76f51\n {% else %}\n #aaaaaa\n {% endif %}\n vertical: true\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Scenes Control\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: number_slider_card\n variables:\n entity: input_number.dynamic_scene_brightness\n name: Brightness\n icon: mdi:brightness-6\n - type: custom:streamline-card\n template: number_slider_card\n variables:\n entity: input_number.dynamic_scene_interval\n name: Interval\n icon: mdi:timer\n icon: mdi:layers-outline\n cards: []\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n header:\n layout: responsive\n badges_position: top\n badges_wrap: wrap\n background:\n opacity: 33\n alignment: center\n size: cover\n repeat: repeat\n attachment: fixed\n image: null\n - type: sections\n max_columns: 3\n title: Irrigation\n path: irrigation\n icon: m3of:sprinkler\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Driveway\n - subtitle: '{{ states(''sensor.driveway_water_tap_status'') }}'\n - type: custom:streamline-card\n template: irrigation_card\n variables:\n switch_entity: switch.driveway_water_tap\n flow_sensor: sensor.driveway_water_tap_flow\n timer_entity: timer.driveway_sprinkler_timer\n zone: driveway\n soil_moisture_sensor: sensor.average_driveway_soil_moisture\n soil_temperature_sensor: sensor.average_driveway_soil_temperature\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n title: Right Walkway\n subtitle: '{{ states(''sensor.right_walkway_water_tap_status'') }}'\n - type: custom:streamline-card\n template: irrigation_card\n variables:\n switch_entity: switch.right_walkway_water_tap\n flow_sensor: sensor.right_walkway_water_tap_flow\n timer_entity: timer.right_walkway_sprinkler_timer\n zone: right_walkway\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_subtitle_card\n variables:\n - title: Backyard\n - subtitle: '{{ states(''sensor.backyard_water_tap_status'') }}'\n - type: custom:streamline-card\n template: irrigation_card\n variables:\n switch_entity: switch.backyard_water_tap\n flow_sensor: sensor.backyard_water_tap_flow\n timer_entity: timer.backyard_sprinkler_timer\n zone: backyard\n soil_moisture_sensor: sensor.average_backyard_soil_moisture\n soil_temperature_sensor: sensor.average_backyard_soil_temperature\n - type: grid\n cards: []\n header:\n layout: start\n badges_position: top\n badges_wrap: wrap\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Irrigation\n title_font_size: 25px\n animation_delay: 0s\n - type: custom:paper-buttons-row\n styles:\n justify-content: flex-start\n flex-wrap: wrap\n font-size: 0.9em\n line-height: 1.2em\n margin: 6px 0 20px 0\n width: 100%\n buttons:\n - layout: name\n entity: sensor.current_water_restriction\n name: '{{ states(''sensor.current_water_restriction'') }}'\n tap_action:\n action: more-info\n styles:\n name:\n color: var(--md-sys-color-primary)\n font-weight: bold\n button:\n padding: 2px 8px\n background-color: var(--md-sys-color-on-primary)\n border-radius: 24px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n animation: slideInLeft 0.3s ease-out 0.2s both\n transition: all 0.3s ease\n - layout: name\n name: ·\n styles:\n button:\n flex-basis: 1\n flex-shrink: 0\n animation: fadeIn 0.8s ease-out 0.3s both\n name:\n color: var(--primary-text-color)\n tap_action:\n action: none\n - layout: name\n entity: sensor.current_water_restriction_description\n name: '{{ states(''sensor.current_water_restriction_description'') }}'\n tap_action:\n action: more-info\n styles:\n name:\n color: var(--md-sys-color-primary)\n font-weight: bold\n button:\n padding: 2px 8px\n background-color: var(--md-sys-color-on-primary)\n border-radius: 24px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n animation: slideInLeft 0.3s ease-out 0.4s both\n transition: all 0.3s ease\n uix:\n style: |\n ha-card {\n overflow: visible !important;\n }\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes slideInLeft {\n from {\n opacity: 0;\n transform: translateX(-40px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n cards: []\n - type: sections\n max_columns: 4\n title: Garage\n path: garage\n icon: mdi:garage-variant\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Lights\n title_font_size: 20px\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.light_switch_grg\n icon: m3of:switch\n background_color: rgba(238, 220, 130, 0.5)\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.light_switch_atc\n icon: m3of:switch\n background_color: rgba(238, 220, 130, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.rear_light_switch_grg\n icon: m3of:switch\n background_color: rgba(238, 220, 130, 0.5)\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Camera\n title_font_size: 20px\n - type: custom:webrtc-camera\n url: >-\n ffmpeg:rtsp://username:password@192.168.1.248/h264Preview_01_main#video=copy#audio=opus\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: open_doors_card\n variables:\n title: Doors\n door_1: binary_sensor.rear_door_sensor_grg_contact\n door_2: binary_sensor.door_sensor_grg_contact\n door_3: binary_sensor.door_sensor_atc_contact\n - type: custom:streamline-card\n template: open_windows_card\n variables:\n - title: Windows\n - window_1: binary_sensor.left_rear_window_sensor_grg_contact\n - window_2: binary_sensor.right_rear_window_sensor_grg_contact\n - window_3: binary_sensor.left_outdoor_window_sensor_grg_contact\n - window_4: binary_sensor.right_outdoor_window_sensor_grg_contact\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n header:\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Garage\n title_font_size: 25px\n animation_delay: 0s\n - type: custom:streamline-card\n template: room_details_card\n variables:\n temperature_entity: sensor.garage_temperature\n humidity_entity: sensor.garage_humidity\n - type: custom:paper-buttons-row\n styles:\n gap: 8px\n justify-content: flex-start\n overflow: scroll\n margin: 12px 0 12px -18px\n padding-left: 18px\n width: 100%\n extra_styles: |\n ::-webkit-scrollbar {\n display: none;\n }\n @keyframes fadeInUp {\n from {\n opacity: 1;\n transform: translateY(3px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n buttons:\n - entity: automation.room_presence_garage\n state_icons:\n 'on': m3of:sensor-occupied\n 'off': m3o:sensors-krx-off\n layout: icon_name\n name: Presence Sensor\n tap_action:\n action: toggle\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n color: var(--white)\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.4s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n - entity: binary_sensor.door_sensor_grg_contact\n state_icons:\n 'on': mdi:garage-open-variant\n 'off': mdi:garage-variant\n layout: icon_name\n name: Garage Door\n tap_action:\n action: call-service\n service: script.garage_button_frontend\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n color: var(--white)\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.6s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n layout: start\n badges_position: top\n badges_wrap: wrap\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n - type: sections\n max_columns: 4\n title: Living Area\n path: living-area\n icon: mdi:sofa\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:vertical-stack-in-card\n cards:\n - type: conditional\n conditions:\n - condition: and\n conditions:\n - condition: state\n entity: input_boolean.other_lights_la\n state: 'off'\n - condition: state\n entity: input_boolean.kitchen_la\n state: 'off'\n - condition: state\n entity: input_boolean.media_la\n state: 'off'\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Lights\n title_font_size: 20px\n - type: custom:streamline-card\n template: room_nav_boolean_chip_card\n variables:\n button_one_icon: m3of:lightbulb\n button_two_icon: mdi:countertop\n button_three_icon: m3of:tv\n button_one: input_boolean.other_lights_la\n button_two: input_boolean.kitchen_la\n button_three: input_boolean.media_la\n alignment: end\n margin-top: 1.6em\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_ktc\n name: null\n icon: null\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_dt\n name: null\n icon: null\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.kitchen_cabinet_led\n icon: hue:lightstrip\n background_color: rgba(238, 220, 130, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.table_top_light\n icon: mdi:countertop\n background_color: rgba(238, 220, 130, 0.5)\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.table_top_led\n icon: hue:lightstrip\n background_color: rgba(238, 220, 130, 0.5)\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_sofa\n name: null\n icon: null\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.other_lights_la\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Other Lights\n - type: custom:streamline-card\n template: room_nav_boolean_chip_card\n variables:\n button_one_icon: m3of:lightbulb\n button_two_icon: mdi:countertop\n button_three_icon: m3of:tv\n button_one: input_boolean.other_lights_la\n button_two: input_boolean.kitchen_la\n button_three: input_boolean.media_la\n alignment: end\n margin-top: 1.6em\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.light_scr\n name: null\n icon: null\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.patio_main_switch_la\n icon: mdi:outdoor-lamp\n background_color: rgba(238, 220, 130, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.patio_side_switch_la\n icon: mdi:outdoor-lamp\n background_color: rgba(238, 220, 130, 0.5)\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.kitchen_la\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Rangehood\n - type: custom:streamline-card\n template: room_nav_boolean_chip_card\n variables:\n button_one_icon: m3of:lightbulb\n button_two_icon: mdi:countertop\n button_three_icon: m3of:tv\n button_one: input_boolean.other_lights_la\n button_two: input_boolean.kitchen_la\n button_three: input_boolean.media_la\n alignment: end\n margin-top: 1.6em\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: select_card\n variables:\n entity: select.kitchen_rangehood_light_level\n name: Light Level\n icon: m3of:lightbulb\n - type: custom:streamline-card\n template: select_card\n variables:\n entity: select.kitchen_rangehood_fan_speed\n name: Fan Speed\n icon: mdi:fan\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Switches\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.nest_hub_switch_ktc\n icon: mdi:google\n background_color: rgba(207, 159, 255, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.other_switch_ktc\n icon: m3of:plug-connect\n background_color: rgba(207, 159, 255, 0.5)\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.media_la\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Media\n - type: custom:streamline-card\n template: room_nav_boolean_chip_card\n variables:\n button_one_icon: m3of:lightbulb\n button_two_icon: mdi:countertop\n button_three_icon: m3of:tv\n button_one: input_boolean.other_lights_la\n button_two: input_boolean.kitchen_la\n button_three: input_boolean.media_la\n alignment: end\n margin-top: 1.6em\n - type: custom:streamline-card\n template: media_player_card\n variables:\n entity: media_player.living_room_tv\n name: Living Room TV\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Control\n title_font_size: 20px\n - type: custom:material-climate-card\n entity: climate.living_room\n increase_temp: 1\n decrease_temp: 1\n use_material_color: true\n use_default_icon: true\n fix_temperature: auto\n name: ' '\n - type: custom:mushroom-template-card\n primary: Living Area Humidity\n secondary: >-\n {% set hum = states('sensor.living_area_humidity') |\n float(0) %} {{ hum }}% - {% if hum < 31 %}Dry {% elif hum <\n 51 %}Good {% else %}Humid {% endif %}\n icon: mdi:water-percent\n entity: sensor.living_area_humidity\n tap_action:\n action: more-info\n color: >-\n {% set hum = states('sensor.living_area_humidity') |\n float(0) %} {% if hum < 31 %}#99332d {% elif hum < 51\n %}#228B22 {% else %}#99332d {% endif %}\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: state\n entity: group.windows_la\n state: 'on'\n - condition: state\n entity: group.doors_la\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: open_doors_card\n variables:\n title: Doors\n door_1: binary_sensor.main_sliding_door_sensor_la_contact\n door_2: binary_sensor.side_sliding_door_sensor_la_contact\n - type: custom:streamline-card\n template: open_windows_card\n variables:\n - title: Windows\n - window_1: binary_sensor.left_tv_window_sensor_la_contact\n - window_2: binary_sensor.right_tv_window_sensor_la_contact\n - window_3: binary_sensor.left_sofa_window_sensor_la_contact\n - window_4: binary_sensor.right_sofa_window_sensor_la_contact\n - type: conditional\n conditions:\n - condition: and\n conditions:\n - condition: state\n entity: group.windows_la\n state: 'off'\n - condition: state\n entity: group.doors_la\n state: 'off'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Room Illustration\n title_font_size: 20px\n - type: picture\n image:\n media_content_id: /local/room_pictures/Living Area.webp\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n header:\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Living Area\n title_font_size: 25px\n animation_delay: 0s\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:streamline-card\n template: room_details_card\n variables:\n temperature_entity: sensor.living_room_temperature\n humidity_entity: sensor.living_area_humidity\n - type: custom:paper-buttons-row\n styles:\n gap: 8px\n justify-content: flex-start\n overflow: scroll\n margin: 12px 0 12px -18px\n padding-left: 18px\n width: 100%\n extra_styles: |\n ::-webkit-scrollbar {\n display: none;\n }\n @keyframes fadeInUp {\n from {\n opacity: 1;\n transform: translateY(3px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n buttons:\n - entity: binary_sensor.presence_active_la\n state_icons:\n 'on': m3of:sensor-occupied\n 'off': m3o:sensors-krx-off\n layout: icon_name\n name: Presence Sensor\n tap_action:\n action: call-service\n service: script.toggle_presence_sensor_la\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n color: var(--white)\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.4s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n - entity: input_boolean.movie_mode\n state_icons:\n 'on': mdi:movie-open\n 'off': mdi:movie-off-outline\n layout: icon_name\n name: Movie Mode\n tap_action:\n action: toggle\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n color: var(--white)\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.6s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n layout: start\n badges_position: top\n badges_wrap: wrap\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n - type: sections\n max_columns: 4\n title: Master Bedroom\n path: master-bedroom\n icon: m3of:bed\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:vertical-stack-in-card\n cards:\n - type: conditional\n conditions:\n - condition: and\n conditions:\n - condition: state\n entity: input_boolean.other_lights_mbr\n state: 'off'\n - condition: state\n entity: input_boolean.master_bathroom\n state: 'off'\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Lights\n title_font_size: 20px\n - type: custom:streamline-card\n template: room_nav_boolean_chip_card\n variables:\n button_one_icon: m3of:lightbulb\n button_two_icon: mdi:toilet\n button_one: input_boolean.other_lights_mbr\n button_two: input_boolean.master_bathroom\n alignment: end\n margin-top: 1.6em\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_mbr\n name: null\n icon: null\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.left_bedside_light_switch_mbr\n icon: m3of:face-2\n background_color: rgba(238, 220, 130, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.right_bedside_light_switch_mbr\n icon: m3of:face\n background_color: rgba(238, 220, 130, 0.5)\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.makeup_table_led_mbr\n name: null\n icon: mdi:led-strip-variant\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.rear_makeup_table_led_mbr\n name: null\n icon: mdi:led-strip-variant\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Curtains\n title_font_size: 20px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: curtain_slider_card\n variables:\n entity_id: cover.left_blackout_curtain_mbr\n label: Left Curtain\n icon: mdi:curtains\n - type: custom:streamline-card\n template: curtain_slider_card\n variables:\n - entity_id: cover.right_blackout_curtain_mbr\n - label: Right Curtain\n - icon: mdi:curtains\n - type: custom:expander-card\n title: Expander Card\n cards:\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.other_left_switch_mbr\n icon: m3of:plug-connect\n background_color: rgba(207, 159, 255, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.baby_monitor_switch_mbr\n icon: mdi:monitor-cellphone\n background_color: rgba(207, 159, 255, 0.5)\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.other_right_switch_mbr\n icon: m3of:plug-connect\n background_color: rgba(207, 159, 255, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.rey_s_watch_charger_mbr\n icon: m3of:plug-connect\n background_color: rgba(207, 159, 255, 0.5)\n title-card:\n type: custom:streamline-card\n template: title_card\n variables:\n title: Switches\n title_font_size: 20px\n title-card-clickable: true\n title-card-button-overlay: false\n padding: '1'\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.other_lights_mbr\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Other Lights\n title_font_size: 20px\n - type: custom:streamline-card\n template: room_nav_boolean_chip_card\n variables:\n button_one_icon: m3of:lightbulb\n button_two_icon: mdi:toilet\n button_one: input_boolean.other_lights_mbr\n button_two: input_boolean.master_bathroom\n alignment: end\n margin-top: 1.6em\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_wr\n name: null\n icon: m3of:lightbulb\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.patio_main_switch_la\n icon: mdi:outdoor-lamp\n background_color: rgba(238, 220, 130, 0.5)\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.floor_led_wr\n name: null\n icon: mdi:led-strip-variant\n - type: conditional\n conditions:\n - condition: state\n entity: input_boolean.master_bathroom\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Lights\n title_font_size: 20px\n - type: custom:streamline-card\n template: room_nav_boolean_chip_card\n variables:\n button_one_icon: m3of:lightbulb\n button_two_icon: mdi:toilet\n button_one: input_boolean.other_lights_mbr\n button_two: input_boolean.master_bathroom\n alignment: end\n margin-top: 1.6em\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_mbrt\n name: null\n icon: m3of:lightbulb\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.master_bathroom_mirror_light\n icon: mdi:lightbulb-fluorescent-tube\n background_color: rgba(238, 220, 130, 0.5)\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.vanity_led_mbrt\n name: null\n icon: mdi:led-strip-variant\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Switches\n title_font_size: 20px\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.towel_switch_mbr\n icon: mdi:heating-coil\n background_color: rgba(210, 43, 43, 0.5)\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Fan\n title_font_size: 20px\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: fan.master_bathroom_fan\n icon: mdi:fan-off\n background_color: rgba(137, 207, 240, 0.5)\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n - title: Climate Control\n - title_font_size: 20px\n - type: custom:material-climate-card\n entity: climate.master_bedroom\n increase_temp: 1\n decrease_temp: 1\n use_material_color: true\n use_default_icon: true\n fix_temperature: auto\n name: ' '\n - type: custom:mushroom-template-card\n primary: Master Bedroom Humidity\n secondary: >-\n {% set hum = states('sensor.master_bedroom_humidity') |\n float(0) %} {{ hum }}% - {% if hum < 31 %}Dry {% elif hum <\n 51 %}Good {% else %}Humid {% endif %}\n icon: mdi:water-percent\n entity: sensor.master_bedroom_humidity\n tap_action:\n action: more-info\n color: >-\n {% set hum = states('sensor.master_bedroom_humidity') |\n float(0) %} {% if hum < 31 %}#99332d {% elif hum < 51\n %}#228B22 {% else %}#99332d {% endif %}\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: state\n entity: group.windows_mbr\n state: 'on'\n - condition: state\n entity: group.doors_mbr\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: open_doors_card\n variables:\n title: Doors\n door_1: binary_sensor.sliding_door_sensor_mbr_contact\n door_2: binary_sensor.door_sensor_mbr_contact\n - type: custom:streamline-card\n template: open_windows_card\n variables:\n title: Windows\n window_1: binary_sensor.left_window_sensor_mbr_contact\n window_2: binary_sensor.right_window_sensor_mbr_contact\n window_3: binary_sensor.window_sensor_mbrt_contact\n - type: conditional\n conditions:\n - condition: and\n conditions:\n - condition: state\n entity: group.windows_mbr\n state: 'off'\n - condition: state\n entity: group.doors_mbr\n state: 'off'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Room Illustration\n title_font_size: 20px\n - type: picture\n image:\n media_content_id: /local/room_pictures/Master Bedroom.webp\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n header:\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Master Bedroom\n title_font_size: 25px\n animation_delay: 0s\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:streamline-card\n template: room_details_card\n variables:\n temperature_entity: sensor.master_bedroom_temperature\n humidity_entity: sensor.master_bedroom_humidity\n - type: custom:paper-buttons-row\n styles:\n gap: 8px\n justify-content: flex-start\n overflow: scroll\n margin: 12px 0 12px -18px\n padding-left: 18px\n width: 100%\n extra_styles: |\n ::-webkit-scrollbar {\n display: none;\n }\n @keyframes fadeInUp {\n from {\n opacity: 1;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n buttons:\n - entity: automation.room_presence_master_bedroom\n state_icons:\n 'on': m3of:sensor-occupied\n 'off': m3o:sensors-krx-off\n layout: icon_name\n name: Presence Sensor\n tap_action:\n action: toggle\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.4s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n - entity: group.curtains_mbr\n state_icons:\n open: m3of:curtains\n closed: m3of:curtains-closed\n layout: icon_name\n name: '{{ states (''sensor.mbr_curtain_action'') }}'\n tap_action:\n action: call-service\n service: script.toggle_curtain_mbr\n styles:\n name:\n color: var(--primary-text-color)\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n animation: fadeInUp 0.5s ease-out 0.6s both\n icon:\n '--mdc-icon-size': 26px\n color: var(--primary-text-color)\n layout: start\n badges_position: top\n badges_wrap: wrap\n - type: sections\n max_columns: 4\n title: Baby Room\n path: baby-room\n icon: mdi:baby-carriage\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Lights\n title_font_size: 20px\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_br\n name: Room Lights\n icon: m3of:lightbulb\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.ava_bed_led\n name: Ava Bed LED\n icon: mdi:led-strip-variant\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.iyla_bed_led\n name: Iyla Bed LED\n icon: mdi:led-strip-variant\n - type: custom:expander-card\n title: Expander Card\n cards:\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.baby_camera_switch_br\n icon: m3of:camera-video\n background_color: rgba(207, 159, 255, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.other_switch_br\n icon: m3of:plug-connect\n background_color: rgba(207, 159, 255, 0.5)\n title-card:\n type: custom:streamline-card\n template: title_card\n variables:\n title: Switches\n title_font_size: 20px\n title-card-clickable: true\n title-card-button-overlay: false\n padding: '1'\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n - title: Climate Control\n - title_font_size: 20px\n - type: custom:material-climate-card\n entity: climate.baby_room\n increase_temp: 1\n decrease_temp: 1\n use_material_color: true\n use_default_icon: true\n fix_temperature: auto\n name: ' '\n - type: custom:mushroom-template-card\n primary: Baby Room Humidity\n secondary: >-\n {% set hum = states('sensor.baby_room_humidity') | float(0)\n %} {{ hum }}% - {% if hum < 31 %}Dry {% elif hum < 51 %}Good\n {% else %}Humid {% endif %}\n icon: mdi:water-percent\n entity: sensor.baby_room_humidity\n tap_action:\n action: more-info\n color: >-\n {% set hum = states('sensor.baby_room_humidity') | float(0)\n %} {% if hum < 31 %}#99332d {% elif hum < 51 %}#228B22 {%\n else %}#99332d {% endif %}\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: state\n entity: group.windows_br\n state: 'on'\n - condition: state\n entity: binary_sensor.door_sensor_br_contact\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: open_doors_card\n variables:\n - title: Door\n - door_1: binary_sensor.door_sensor_br_contact\n - type: custom:streamline-card\n template: open_windows_card\n variables:\n - title: Windows\n - window_1: binary_sensor.left_window_sensor_br_contact\n - window_2: binary_sensor.right_window_sensor_br_contact\n - type: conditional\n conditions:\n - condition: and\n conditions:\n - condition: state\n entity: group.windows_br\n state: 'off'\n - condition: state\n entity: binary_sensor.door_sensor_br_contact\n state: 'off'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Room Illustration\n title_font_size: 20px\n - type: picture\n image:\n media_content_id: /local/room_pictures/Baby Room.webp\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n header:\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Baby Room\n title_font_size: 25px\n animation_delay: 0s\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:streamline-card\n template: room_details_card\n variables:\n temperature_entity: sensor.baby_room_temperature\n humidity_entity: sensor.baby_room_humidity\n - type: custom:paper-buttons-row\n styles:\n gap: 8px\n justify-content: flex-start\n overflow: scroll\n margin: 12px 0 12px -18px\n padding-left: 18px\n width: 100%\n extra_styles: |\n ::-webkit-scrollbar {\n display: none;\n }\n @keyframes fadeInUp {\n from {\n opacity: 1;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n buttons:\n - entity: automation.room_presence_baby_room\n state_icons:\n 'on': m3of:sensor-occupied\n 'off': m3o:sensors-krx-off\n layout: icon_name\n name: Presence Sensor\n tap_action:\n action: toggle\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n color: var(--white)\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.4s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n layout: start\n badges_position: top\n badges_wrap: wrap\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n - type: sections\n max_columns: 4\n title: Single Guest Room\n path: single-guest-room\n icon: m3of:person-3\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Lights\n title_font_size: 20px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_sgr\n name: Room Lights\n icon: m3of:lightbulb\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.bed_led_sgr\n name: Bed LED\n icon: mdi:led-strip-variant\n - type: custom:expander-card\n title: Expander Card\n cards:\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.phone_charger_switch_sgr\n icon: mdi:cellphone\n background_color: rgba(207, 159, 255, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.other_switch_sgr\n icon: m3of:plug-connect\n background_color: rgba(207, 159, 255, 0.5)\n title-card:\n type: custom:streamline-card\n template: title_card\n variables:\n title: Switches\n title_font_size: 20px\n title-card-clickable: true\n title-card-button-overlay: false\n padding: '1'\n animation: true\n expanded: true\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n - title: Climate Control\n - title_font_size: 20px\n - type: custom:material-climate-card\n entity: climate.single_guest_room\n increase_temp: 1\n decrease_temp: 1\n use_material_color: true\n use_default_icon: true\n fix_temperature: auto\n name: ' '\n - type: custom:mushroom-template-card\n primary: Single Guest Room Humidity\n secondary: >-\n {% set hum = states('sensor.single_guest_room_humidity') |\n float(0) %} {{ hum }}% - {% if hum < 31 %}Dry {% elif hum <\n 51 %}Good {% else %}Humid {% endif %}\n icon: mdi:water-percent\n entity: sensor.single_guest_room_humidity\n tap_action:\n action: more-info\n color: >-\n {% set hum = states('sensor.single_guest_room_humidity') |\n float(0) %} {% if hum < 31 %}#99332d {% elif hum < 51\n %}#228B22 {% else %}#99332d {% endif %}\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: state\n entity: group.windows_sgr\n state: 'on'\n - condition: state\n entity: group.door_sensor_sgr_contact\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: open_doors_card\n variables:\n - title: Door\n - door_1: binary_sensor.door_sensor_sgr_contact\n - type: custom:streamline-card\n template: open_windows_card\n variables:\n - title: Windows\n - window_1: binary_sensor.left_window_sensor_sgr_contact\n - window_2: binary_sensor.right_window_sensor_sgr_contact\n - type: conditional\n conditions:\n - condition: and\n conditions:\n - condition: state\n entity: group.windows_sgr\n state: 'off'\n - condition: state\n entity: group.door_sensor_sgr_contact\n state: 'off'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Room Illustration\n title_font_size: 20px\n - type: picture\n image:\n media_content_id: /local/room_pictures/Bedroom.webp\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n header:\n layout: start\n badges_position: top\n badges_wrap: wrap\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Single Guest Room\n title_font_size: 25px\n animation_delay: 0s\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:streamline-card\n template: room_details_card\n variables:\n temperature_entity: sensor.single_guest_room_temperature\n humidity_entity: sensor.single_guest_room_humidity\n - type: custom:paper-buttons-row\n styles:\n gap: 8px\n justify-content: flex-start\n overflow: scroll\n margin: 12px 0 12px -18px\n padding-left: 18px\n width: 100%\n extra_styles: |\n ::-webkit-scrollbar {\n display: none;\n }\n @keyframes fadeInUp {\n from {\n opacity: 1;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n buttons:\n - entity: automation.room_presence_single_guest_room\n state_icons:\n 'on': m3of:sensor-occupied\n 'off': m3o:sensors-krx-off\n layout: icon_name\n name: Presence Sensor\n tap_action:\n action: toggle\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n color: var(--white)\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.4s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n - type: sections\n max_columns: 4\n title: Multiple Guest Room\n path: multiple-guest-room\n icon: m3of:groups-2\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Lights\n title_font_size: 20px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_mgr\n name: Room Lights\n icon: m3of:lightbulb\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.bed_led_mgr\n name: Bed LED\n icon: mdi:led-strip-variant\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n - title: Climate Control\n - title_font_size: 20px\n - type: custom:material-climate-card\n entity: climate.multiple_guest_room\n increase_temp: 1\n decrease_temp: 1\n use_material_color: true\n use_default_icon: true\n fix_temperature: auto\n name: ' '\n - type: custom:mushroom-template-card\n primary: Multiple Guest Room Humidity\n secondary: >-\n {% set hum = states('sensor.multiple_guest_room_humidity') |\n float(0) %} {{ hum }}% - {% if hum < 31 %}Dry {% elif hum <\n 51 %}Good {% else %}Humid {% endif %}\n icon: mdi:water-percent\n entity: sensor.multiple_guest_room_humidity\n tap_action:\n action: more-info\n color: >-\n {% set hum = states('sensor.multiple_guest_room_humidity') |\n float(0) %} {% if hum < 31 %}#99332d {% elif hum < 51\n %}#228B22 {% else %}#99332d {% endif %}\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: state\n entity: group.windows_mgr\n state: 'on'\n - condition: state\n entity: group.door_sensor_mgr_contact\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: open_doors_card\n variables:\n - title: Door\n - door_1: binary_sensor.door_sensor_mgr_contact\n - type: custom:streamline-card\n template: open_windows_card\n variables:\n - title: Windows\n - window_1: binary_sensor.left_window_sensor_mgr_contact\n - window_2: binary_sensor.right_window_sensor_mgr_contact\n - type: conditional\n conditions:\n - condition: and\n conditions:\n - condition: state\n entity: group.windows_mgr\n state: 'off'\n - condition: state\n entity: group.door_sensor_mgr_contact\n state: 'off'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Room Illustration\n title_font_size: 20px\n - type: picture\n image:\n media_content_id: /local/room_pictures/Bedroom.webp\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n header:\n layout: start\n badges_position: top\n badges_wrap: wrap\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Multiple Guest Room\n title_font_size: 25px\n animation_delay: 0s\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:streamline-card\n template: room_details_card\n variables:\n temperature_entity: sensor.multiple_guest_room_temperature\n humidity_entity: sensor.multiple_guest_room_humidity\n - type: custom:paper-buttons-row\n styles:\n gap: 8px\n justify-content: flex-start\n overflow: scroll\n margin: 12px 0 12px -18px\n padding-left: 18px\n width: 100%\n extra_styles: |\n ::-webkit-scrollbar {\n display: none;\n }\n @keyframes fadeInUp {\n from {\n opacity: 1;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n buttons:\n - entity: automation.room_presence_multiple_guest_room\n state_icons:\n 'on': m3of:sensor-occupied\n 'off': m3o:sensors-krx-off\n layout: icon_name\n name: Presence Sensor\n tap_action:\n action: toggle\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n color: var(--white)\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.4s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n - type: sections\n max_columns: 4\n title: Entrance\n path: entrance\n icon: mdi:table-furniture\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Lights\n title_font_size: 20px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_etr\n name: Room Lights\n icon: m3of:lightbulb\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.entrance_table_led\n name: Table LED\n icon: mdi:led-strip-variant\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Camera\n title_font_size: 20px\n - type: custom:webrtc-camera\n url: >-\n ffmpeg:rtsp://username:password@192.168.1.222/h265Preview_01_main#video=copy#audio=opus\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: conditional\n conditions:\n - condition: state\n entity: binary_sensor.door_sensor_etr_contact\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: open_doors_card\n variables:\n - title: Door\n - door_1: binary_sensor.door_sensor_etr_contact\n - type: conditional\n conditions:\n - condition: state\n entity: binary_sensor.door_sensor_etr_contact\n state: 'off'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Room Illustration\n title_font_size: 20px\n - type: picture\n image:\n media_content_id: /local/room_pictures/Entrance.webp\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n header:\n layout: start\n badges_position: top\n badges_wrap: wrap\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Entrance\n title_font_size: 25px\n animation_delay: 0s\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:streamline-card\n template: room_details_card\n variables:\n temperature_entity: sensor.living_room_temperature\n humidity_entity: sensor.living_area_humidity\n - type: custom:paper-buttons-row\n styles:\n gap: 8px\n justify-content: flex-start\n overflow: scroll\n margin: 12px 0 12px -18px\n padding-left: 18px\n width: 100%\n extra_styles: |\n ::-webkit-scrollbar {\n display: none;\n }\n @keyframes fadeInUp {\n from {\n opacity: 1;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n buttons:\n - entity: automation.room_presence_entrance\n state_icons:\n 'on': m3of:sensor-occupied\n 'off': m3o:sensors-krx-off\n layout: icon_name\n name: Presence Sensor\n tap_action:\n action: toggle\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n color: var(--white)\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.4s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n - type: sections\n max_columns: 4\n title: Office\n path: Office\n icon: m3of:computer\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Lights\n title_font_size: 20px\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.light_switch_or\n icon: m3of:switch\n - type: custom:expander-card\n title: Expander Card\n cards:\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.mackbook_switch_or\n icon: m3o:computer\n background_color: rgba(207, 159, 255, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.pc_dock_switch_or\n icon: mdi:desktop-tower-monitor\n background_color: rgba(207, 159, 255, 0.5)\n title-card:\n type: custom:streamline-card\n template: title_card\n variables:\n title: Switches\n title_font_size: 20px\n title-card-clickable: true\n title-card-button-overlay: false\n padding: '1'\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n - title: Climate Control\n - title_font_size: 20px\n - type: custom:material-climate-card\n entity: climate.office_room\n increase_temp: 1\n decrease_temp: 1\n use_material_color: true\n use_default_icon: true\n fix_temperature: auto\n name: ' '\n - type: custom:mushroom-template-card\n primary: Office Room Humidity\n secondary: >-\n {% set hum = states('sensor.office_room_humidity') |\n float(0) %} {{ hum }}% - {% if hum < 31 %}Dry {% elif hum <\n 51 %}Good {% else %}Humid {% endif %}\n icon: mdi:water-percent\n entity: sensor.office_room_humidity\n tap_action:\n action: more-info\n color: >-\n {% set hum = states('sensor.office_room_humidity') |\n float(0) %} {% if hum < 31 %}#99332d {% elif hum < 51\n %}#228B22 {% else %}#99332d {% endif %}\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: conditional\n conditions:\n - condition: or\n conditions:\n - condition: state\n entity: group.windows_mgr\n state: 'on'\n - condition: state\n entity: group.door_sensor_mgr_contact\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: open_doors_card\n variables:\n - title: Door\n - door_1: binary_sensor.door_sensor_or_contact\n - type: custom:streamline-card\n template: open_windows_card\n variables:\n - title: Windows\n - window_1: binary_sensor.left_window_sensor_or_contact\n - window_2: binary_sensor.right_window_sensor_or_contact\n - type: conditional\n conditions:\n - condition: and\n conditions:\n - condition: state\n entity: group.windows_mgr\n state: 'off'\n - condition: state\n entity: group.door_sensor_mgr_contact\n state: 'off'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Room Illustration\n title_font_size: 20px\n - type: picture\n image:\n media_content_id: /local/room_pictures/Office.webp\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n header:\n layout: start\n badges_position: top\n badges_wrap: wrap\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title_font_size: 25px\n animation_delay: 0s\n title: Office\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:streamline-card\n template: room_details_card\n variables:\n temperature_entity: sensor.office_room_temperature\n humidity_entity: sensor.office_room_humidity\n - type: custom:paper-buttons-row\n styles:\n gap: 8px\n justify-content: flex-start\n overflow: scroll\n margin: 12px 0 12px -18px\n padding-left: 18px\n width: 100%\n extra_styles: |\n ::-webkit-scrollbar {\n display: none;\n }\n @keyframes fadeInUp {\n from {\n opacity: 1;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n buttons:\n - entity: automation.room_presence_office\n state_icons:\n 'on': m3of:sensor-occupied\n 'off': m3o:sensors-krx-off\n layout: icon_name\n name: Presence Sensor\n tap_action:\n action: toggle\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n color: var(--white)\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.4s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n - type: sections\n max_columns: 4\n title: Guest Bathroom\n path: guest-bathroom\n icon: m3of:water-drop\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Lights\n title_font_size: 20px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_gbrv\n name: null\n icon: null\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.guest_bathroom_mirror_light\n icon: mdi:lightbulb-fluorescent-tube\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.vanity_led_gbrv\n name: Vanity LED\n icon: mdi:led-strip-variant\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.light_gbrt\n icon: null\n name: Toilet Light\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_gbrb\n icon: null\n name: Bathing Lights\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Fan\n title_font_size: 20px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: fan.guest_bathroom_vanity_fan\n icon: mdi:fan\n background_color: rgba(137, 207, 240, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: fan.guest_bathroom_fan\n icon: mdi:fan\n background_color: rgba(137, 207, 240, 0.5)\n - type: custom:expander-card\n title: Expander Card\n cards:\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.network_switch_gbrv\n icon: mdi:access-point-network\n background_color: rgba(207, 159, 255, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.other_switch_gbrv\n icon: m3of:plug-connect\n background_color: rgba(207, 159, 255, 0.5)\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.towel_switch_gbr\n icon: mdi:heating-coil\n background_color: rgba(210, 43, 43, 0.5)\n title-card:\n type: custom:streamline-card\n template: title_card\n variables:\n title: Switches\n title_font_size: 20px\n title-card-clickable: true\n title-card-button-overlay: false\n padding: '1'\n animation: true\n expanded: false\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: conditional\n conditions:\n - condition: state\n entity: group.windows_gbr\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: open_windows_card\n variables:\n title: Windows\n window_1: binary_sensor.top_window_sensor_gbrt_contact\n window_2: binary_sensor.bottom_window_sensor_gbrt_contact\n window_3: binary_sensor.window_sensor_gbrb_contact\n - type: conditional\n conditions:\n - condition: state\n entity: group.windows_gbr\n state: 'off'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Room Illustration\n title_font_size: 20px\n - type: picture\n image:\n media_content_id: /local/room_pictures/Guest Bathroom.webp\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n header:\n layout: start\n badges_position: top\n badges_wrap: wrap\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title_font_size: 25px\n animation_delay: 0s\n title: Guest Bathroom\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:streamline-card\n template: room_details_card\n variables:\n temperature_entity: sensor.guest_bathroom_temperature\n humidity_entity: sensor.guest_bathroom_humidity\n - type: custom:paper-buttons-row\n styles:\n gap: 8px\n justify-content: flex-start\n overflow: scroll\n margin: 12px 0 12px -18px\n padding-left: 18px\n width: 100%\n extra_styles: |\n ::-webkit-scrollbar {\n display: none;\n }\n @keyframes fadeInUp {\n from {\n opacity: 1;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n buttons:\n - entity: binary_sensor.presence_active_gbr\n state_icons:\n 'on': m3of:sensor-occupied\n 'off': m3o:sensors-krx-off\n layout: icon_name\n name: Presence Sensor\n tap_action:\n action: call-service\n service: script.toggle_presence_sensor_gbr\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n color: var(--white)\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.4s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n - type: sections\n max_columns: 4\n title: Driveway\n path: driveway\n icon: mdi:car\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\n }\n\n @keyframes slideInLeft {\n from {\n opacity: 1;\n transform: translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Lights\n title_font_size: 20px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_wall\n name: null\n icon: null\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_outdoor_grg\n name: null\n icon: null\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_ceiling\n name: null\n icon: null\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n --title-font-size: 15px !important;\n animation: fadeInDown 0.5s ease-out 0.3s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 1;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Camera\n title_font_size: 20px\n - type: custom:webrtc-camera\n url: >-\n ffmpeg:rtsp://username:password@192.168.1.150/h265Preview_01_main#video=copy#audio=opus\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Camera\n title_font_size: 20px\n - type: custom:webrtc-camera\n url: >-\n ffmpeg:rtsp://username:password@192.168.1.245/h265Preview_01_main#video=copy#audio=opus\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n header:\n layout: start\n badges_position: top\n badges_wrap: wrap\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title_font_size: 25px\n animation_delay: 0s\n title: Driveway\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:streamline-card\n template: room_details_card\n variables:\n temperature_entity: sensor.outdoor_temperature\n humidity_entity: sensor.outdoor_humidity\n - type: custom:paper-buttons-row\n styles:\n gap: 8px\n justify-content: flex-start\n overflow: scroll\n margin: 12px 0 12px -18px\n padding-left: 18px\n width: 100%\n extra_styles: |\n ::-webkit-scrollbar {\n display: none;\n }\n @keyframes fadeInUp {\n from {\n opacity: 1;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n buttons:\n - entity: automation.outdoor_presence_driveway\n state_icons:\n 'on': m3of:sensor-occupied\n 'off': m3o:sensors-krx-off\n layout: icon_name\n name: Presence Sensor\n tap_action:\n action: toggle\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n color: var(--white)\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.4s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n - type: sections\n max_columns: 4\n title: Laundry\n path: laundry\n icon: m3of:laundry\n subview: true\n sections:\n - type: grid\n cards:\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Lights\n title_font_size: 20px\n - type: horizontal-stack\n cards:\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.lights_lr\n name: Room Lights\n icon: null\n - type: custom:streamline-card\n template: light_card\n variables:\n entity: light.vanity_led_lr\n name: Vanity LED\n icon: hue:lightstrip\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: switch.outdoor_light_switch_lr\n icon: null\n background_color: rgba(238, 220, 130, 0.5)\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Fan\n - type: custom:streamline-card\n template: button_card\n variables:\n entity: fan.laundry_room_fan\n icon: mdi:fan\n background_color: rgba(137, 207, 240, 0.5)\n - type: grid\n cards:\n - type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Camera\n title_font_size: 20px\n - type: custom:webrtc-camera\n entity: camera.left_walkway_camera_fluent\n - type: grid\n cards:\n - type: custom:mod-card\n uix:\n style: |\n ha-card {\n animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\n }\n\n @keyframes slideInRight {\n from {\n opacity: 1;\n transform: translateX(8px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n card:\n type: vertical-stack\n cards:\n - type: conditional\n conditions:\n - condition: state\n entity: binary_sensor.outdoor_door_sensor_lr_contact\n state: 'on'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: open_doors_card\n variables:\n - title: Door\n - door_1: binary_sensor.outdoor_door_sensor_lr_contact\n - type: conditional\n conditions:\n - condition: state\n entity: binary_sensor.outdoor_door_sensor_lr_contact\n state: 'off'\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title: Room Illustration\n title_font_size: 20px\n - type: picture\n image:\n media_content_id: /local/room_pictures/Laundry Room.webp\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n header:\n card:\n type: vertical-stack\n cards:\n - type: custom:streamline-card\n template: title_card\n variables:\n title_font_size: 25px\n animation_delay: 0s\n title: Laundry\n - type: custom:streamline-card\n template: spacer_card\n variables:\n padding: 4px\n - type: custom:paper-buttons-row\n styles:\n gap: 8px\n justify-content: flex-start\n overflow: scroll\n margin: 12px 0 12px -18px\n padding-left: 18px\n width: 100%\n extra_styles: |\n ::-webkit-scrollbar {\n display: none;\n }\n @keyframes fadeInUp {\n from {\n opacity: 1;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n buttons:\n - entity: automation.outdoor_presence_driveway\n state_icons:\n 'on': m3of:sensor-occupied\n 'off': m3o:sensors-krx-off\n layout: icon_name\n name: Presence Sensor\n tap_action:\n action: toggle\n styles:\n name:\n color: '#a8a8a8'\n transition: color 0.3s ease, transform 0.3s ease\n button:\n padding: 12px\n width: 76px\n height: 76px\n flex-basis: 1\n flex-shrink: 0\n display: flex\n background-color: none\n border-radius: 24px\n color: var(--white)\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n animation: fadeInUp 0.5s ease-out 0.4s both\n icon:\n '--mdc-icon-size': 26px\n color: '#a8a8a8'\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\n state_styles:\n 'on':\n icon:\n color: var(--primary-text-color)\n name:\n color: var(--primary-text-color)\n layout: start\n badges_position: top\n badges_wrap: wrap\n - type: custom:grid-layout\n title: Driveway Camera\n path: driveway-camera\n subview: true\n cards:\n - type: custom:webrtc-camera\n url: >-\n ffmpeg:rtsp://username:password@192.168.1.150/h265Preview_01_main#video=copy#audio=opus\n style: |\n ha-card {\n height: 755px;\n width: 1370px;\n }\n video {\n object-fit: fill !important;\n height: 100% !important;\n width: 100% !important;\n }\n view_layout:\n grid-area: content1\n - type: custom:mushroom-template-card\n primary: |\n {% if is_state('binary_sensor.door_sensor_grg_contact', 'on') %}\n Close Garage\n {% else %}\n Open Garage\n {% endif %}\n secondary: |\n {% if is_state('binary_sensor.door_sensor_grg_contact', 'on') %}\n Click to close the garage door\n {% else %}\n Click to open the garage door\n {% endif %}\n icon: |\n {% if is_state('binary_sensor.door_sensor_grg_contact', 'on') %}\n mdi:garage-open-variant\n {% else %}\n mdi:garage-variant\n {% endif %}\n icon_color: |\n {% if is_state('binary_sensor.door_sensor_grg_contact', 'on') %}\n #FF3131\n {% else %}\n none\n {% endif %}\n features_position: bottom\n multiline_secondary: true\n vertical: true\n entity: switch.garage_opener\n tap_action:\n action: toggle\n uix:\n style: |\n :host {\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 10;\n width: auto;\n }\n view_layout:\n grid-area: content1\n - type: custom:mushroom-chips-card\n chips:\n - type: template\n tap_action:\n action: navigate\n navigation_path: /tablet-dashboard/overview\n icon: m3of:arrow-left-alt\n uix:\n style:\n .: |\n ha-card {\n margin-top: 25px; /* move down */\n \n --color: var(--md-sys-color-primary);\n --chip-background: var(--md-sys-color-on-primary);\n animation: fadeInDown 0.4s ease-out 0.6s both;\n }\n @keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n view_layout:\n grid-area: content1\n layout:\n grid-template-columns: 100%\n grid-template-rows: auto\n grid-template-areas: |\n \"content1\"\n icon: mdi:light-flood-down\n - type: sections\n max_columns: 4\n title: Timeline\n path: timeline\n icon: m3o:map\n subview: true\n sections:\n - type: grid\n cards:\n - type: custom:simple-tabs\n tabs:\n - title: Rey\n icon: m3of:face\n id: rey\n card:\n type: custom:location-timeline-card\n entity: device_tracker.rey_s_phone\n places_entity: sensor.rey_s_phone\n osm_api_key: your_email\n - title: Christina\n icon: m3of:face-3\n id: christina\n card:\n type: custom:location-timeline-card\n entity: device_tracker.christina\n places_entity: sensor.christina_s_phone\n osm_api_key: your_email\n background:\n opacity: 50\n alignment: center\n size: cover\n repeat: no-repeat\n attachment: fixed\n image:\n media_content_id: /local/wallpapers/Red - Landscape.webp\n badges:\n - type: custom:streamline-card\n template: back_button_card\n variables:\n navigation_path: /tablet-dashboard/overview\n header:\n layout: start\n badges_position: top\n badges_wrap: wrap\n" }, { "path": "template sensor/Active Notiifcation Count Sensor", "content": "- sensor:\n - name: \"Active Notification Count\"\n state: >\n {% set count = 0 %}\n {% if states('sensor.soil_sensor_corner_moisture') | float(100) < 40 %}\n {% set count = count + 1 %}\n {% endif %}\n {% if is_state('input_boolean.rubbish', 'on') or is_state('input_boolean.recycle', 'on') %}\n {% set count = count + 1 %}\n {% endif %}\n {% if is_state('binary_sensor.door_sensor_grg_contact', 'on') %}\n {% set count = count + 1 %}\n {% endif %}\n {% if is_state('binary_sensor.all_doors', 'on') %}\n {% set count = count + 1 %}\n {% endif %}\n {% if is_state('timer.wash_cuddly', 'idle') %}\n {% set count = count + 1 %}\n {% endif %}\n {% if is_state('binary_sensor.timer_wash_cuddly_12h', 'on') %}\n {% set count = count + 1 %}\n {% endif %}\n {% if is_state('timer.wash_duvet', 'idle') %}\n {% set count = count + 1 %}\n {% endif %}\n {% if is_state('binary_sensor.timer_wash_duvet_12h', 'on') %}\n {% set count = count + 1 %}\n {% endif %}\n {% if is_state('timer.heated_towel_rails', 'active') %}\n {% set count = count + 1 %}\n {% endif %}\n {% if is_state('timer.exhaust_fan', 'active') %}\n {% set count = count + 1 %}\n {% endif %}\n {% if is_state('sensor.laundry_machine_state', 'Delay Run') %}\n {% set count = count + 1 %}\n {% endif %}\n {% if is_state('sensor.laundry_machine_state', 'Run') %}\n {% set count = count + 1 %}\n {% endif %}\n {% if states('sensor.washing_machine_power') | float(0) > 10 %}\n {% set count = count + 1 %}\n {% endif %}\n {% if states('sensor.dryer_power') | float(0) > 10 %}\n {% set count = count + 1 %}\n {% endif %}\n {% if is_state('media_player.all_speakers', 'playing') or is_state('media_player.all_speakers', 'on') %}\n {% set count = count + 1 %}\n {% endif %}\n {{ count }}\n" }, { "path": "template sensor/Get Forecast Template Sensor", "content": "- trigger:\n - platform: time_pattern\n minutes: /15\n - platform: homeassistant\n event: start\n\n sensor:\n - name: \"Hourly Weather Data - Met Service\"\n unique_id: hourly_weather_data_met_service\n state: >\n {% if forecast['weather.met_service_home_forecast'].forecast is defined\n and forecast['weather.met_service_home_forecast'].forecast | length > 0 %}\n {{ as_local(strptime(forecast['weather.met_service_home_forecast'].forecast[0].datetime,\n '%Y-%m-%dT%H:%M:%S%z')) }}\n {% else %}\n unknown\n {% endif %}\n attributes:\n forecast_data: >\n {% if forecast['weather.met_service_home_forecast'].forecast is defined\n and forecast['weather.met_service_home_forecast'].forecast | length > 0 %}\n {{ forecast['weather.met_service_home_forecast'].forecast[0] }}\n {% else %}\n {}\n {% endif %}\n\n - name: \"Daily Weather Data - Met Service\"\n unique_id: daily_weather_data_met_service\n state: >\n {% if forecast_daily['weather.met_service_home_forecast'].forecast is defined\n and forecast_daily['weather.met_service_home_forecast'].forecast | length > 0 %}\n {{ as_local(strptime(forecast_daily['weather.met_service_home_forecast'].forecast[0].datetime,\n '%Y-%m-%dT%H:%M:%S%z')) }}\n {% else %}\n unknown\n {% endif %}\n attributes:\n forecast_data: >\n {% if forecast_daily['weather.met_service_home_forecast'].forecast is defined\n and forecast_daily['weather.met_service_home_forecast'].forecast | length > 0 %}\n {{ forecast_daily['weather.met_service_home_forecast'].forecast[0] }}\n {% else %}\n {}\n {% endif %}\n\n action:\n - action: weather.get_forecasts\n target:\n entity_id: weather.met_service_home_forecast\n data:\n type: hourly\n response_variable: forecast\n\n - action: weather.get_forecasts\n target:\n entity_id: weather.met_service_home_forecast\n data:\n type: daily\n response_variable: forecast_daily\n\n- trigger:\n - platform: time_pattern\n minutes: /15\n - platform: homeassistant\n event: start\n\n sensor:\n - name: \"Hourly Weather Data - Met.no\"\n unique_id: hourly_weather_data_met_no\n state: >\n {% if forecast['weather.forecast_home'].forecast is defined\n and forecast['weather.forecast_home'].forecast | length > 0 %}\n {{ as_local(strptime(forecast['weather.forecast_home'].forecast[0].datetime,\n '%Y-%m-%dT%H:%M:%S%z')) }}\n {% else %}\n unknown\n {% endif %}\n attributes:\n forecast_data: >\n {% if forecast['weather.forecast_home'].forecast is defined\n and forecast['weather.forecast_home'].forecast | length > 0 %}\n {{ forecast['weather.forecast_home'].forecast[0] }}\n {% else %}\n {}\n {% endif %}\n\n - name: \"Daily Weather Data - Met.no\"\n unique_id: daily_weather_data_met_no\n state: >\n {% if forecast_daily['weather.forecast_home'].forecast is defined\n and forecast_daily['weather.forecast_home'].forecast | length > 0 %}\n {{ as_local(strptime(forecast_daily['weather.forecast_home'].forecast[0].datetime,\n '%Y-%m-%dT%H:%M:%S%z')) }}\n {% else %}\n unknown\n {% endif %}\n attributes:\n forecast_data: >\n {% if forecast_daily['weather.forecast_home'].forecast is defined\n and forecast_daily['weather.forecast_home'].forecast | length > 0 %}\n {{ forecast_daily['weather.forecast_home'].forecast[0] }}\n {% else %}\n {}\n `{% endif %}\n\n action:\n - action: weather.get_forecasts\n target:\n entity_id: weather.forecast_home\n data:\n type: hourly\n response_variable: forecast\n\n - action: weather.get_forecasts\n target:\n entity_id: weather.forecast_home\n data:\n type: daily\n response_variable: forecast_daily\n\n- trigger:\n - platform: time_pattern\n minutes: /15\n - platform: homeassistant\n event: start\n\n sensor:\n - name: \"Met.no Hourly Forecasts (Full Hourly Forecast)\"\n unique_id: metno_hourly_forecasts_full_hourly_forecast\n state: >\n {% if forecast['weather.forecast_home'].forecast is defined\n and forecast['weather.forecast_home'].forecast | length > 0 %}\n {{ as_local(strptime(forecast['weather.forecast_home'].forecast[0].datetime,\n '%Y-%m-%dT%H:%M:%S%z')) }}\n {% else %}\n unknown\n {% endif %}\n attributes:\n forecasts: >\n {% if forecast['weather.forecast_home'].forecast is defined\n and forecast['weather.forecast_home'].forecast | length > 0 %}\n [\n {%- for f in forecast['weather.forecast_home'].forecast %}\n {\n \"datetime\": \"{{ as_local(strptime(f.datetime, '%Y-%m-%dT%H:%M:%S%z')) }}\",\n \"condition\": \"{{ f.condition }}\",\n \"temperature\": {{ f.temperature }},\n \"precipitation\": {{ f.precipitation }},\n \"wind_speed\": {{ f.wind_speed }},\n \"wind_bearing\": {{ f.wind_bearing }},\n \"humidity\": {{ f.humidity if f.humidity is defined else 'null' }},\n \"cloud_coverage\": {{ f.cloud_coverage if f.cloud_coverage is defined else 'null' }},\n \"uv_index\": {{ f.uv_index if f.uv_index is defined else 'null' }}\n }{{ \",\" if not loop.last }}\n {%- endfor %}\n ]\n {% else %}\n []\n {% endif %}\n\n action:\n - action: weather.get_forecasts\n target:\n entity_id: weather.forecast_home\n data:\n type: hourly\n response_variable: forecast\n \n" }, { "path": "template sensor/Weather Condition Icon Sensor", "content": " - name: \"Weather Condition Icon\"\n unique_id: weather_condition_icon\n state: >\n {% set condition = states('weather.forecast_home') | lower %}\n {% if condition in ['sunny', 'clear'] %}\n mdi:weather-sunny\n {% elif condition == 'clear-night' %}\n mdi:weather-night\n {% elif condition in ['partlycloudy', 'partly cloudy'] %}\n mdi:weather-partly-cloudy\n {% elif condition == 'cloudy' %}\n mdi:weather-cloudy\n {% elif condition in ['rainy', 'rain'] %}\n mdi:weather-rainy\n {% elif condition == 'pouring' %}\n mdi:weather-pouring\n {% elif condition == 'windy' %}\n mdi:weather-windy\n {% elif condition in ['fog', 'foggy'] %}\n mdi:weather-fog\n {% elif condition in ['snow', 'snowy'] %}\n mdi:weather-snowy\n {% elif condition == 'snowy-rainy' %}\n mdi:weather-snowy-rainy\n {% elif condition == 'hail' %}\n mdi:weather-hail\n {% elif condition == 'lightning' %}\n mdi:weather-lightning\n {% elif condition == 'lightning-rainy' %}\n mdi:weather-lightning-rainy\n {% elif condition == 'windy-variant' %}\n mdi:weather-windy-variant\n {% elif condition == 'exceptional' %}\n mdi:alert-circle-outline\n {% else %}\n mdi:weather-cloudy-alert\n {% endif %}\n" }, { "path": "wallpaper/wallpaper_placeholder", "content": "\n" } ]