From b3ff2ec1b7342e1ed994e19707702048bd59f19a Mon Sep 17 00:00:00 2001 From: Tony Stork Date: Thu, 30 Jan 2025 03:21:20 -0500 Subject: [PATCH] Redo the basement studio page on main dashboard with bubble cards --- main_dashboard.yaml | 913 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 737 insertions(+), 176 deletions(-) diff --git a/main_dashboard.yaml b/main_dashboard.yaml index 29160a5..a8bf8f1 100644 --- a/main_dashboard.yaml +++ b/main_dashboard.yaml @@ -138,6 +138,140 @@ streamline_templates: - entity: sensor.[[gamertag]]_gamer_score name: Gamer Score show_header_toggle: false + main_security_button: + defaults: + - name: '' + - columns: '' + card: + type: custom:bubble-card + card_type: button + button_type: state + entity: '[[entity]]' + name: '[[name]]' + card_layout: large + double_tap_action: + action: none + hold_action: + action: none + button_action: + double_tap_action: + action: none + hold_action: + action: none + columns: '[[columns]]' + styles: |- + .is-unavailable { + opacity: 0.5 !important; + } + .bubble-button-background { + opacity: 1 !important; + background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important; + transition: background-color 1s !important; + } + .bubble-icon-container { + background: ${state === 'on' ? 'var(--error-color)' : 'var(--card-background-color)'} !important; + } + .bubble-icon-container::after { + opacity: ${state === 'on' ? 0.3 : 0} !important; + transition: all 1s !important; + } + .bubble-icon { + display: flex !important; + opacity: 0.5 !important; + } + .is-on .bubble-icon { + opacity: 1 !important; + } + main_accent_color_button: + defaults: + - name: '' + - columns: '' + card: + type: custom:bubble-card + card_type: button + button_type: state + entity: '[[entity]]' + name: '[[name]]' + show_state: true + card_layout: large + tap_action: + action: more-info + double_tap_action: + action: none + hold_action: + action: none + button_action: + double_tap_action: + action: none + hold_action: + action: none + columns: '[[columns]]' + styles: |- + .bubble-button-background { + opacity: 1 !important; + background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--background-color-2)'} !important; + } + .bubble-icon { + color: ${state === 'on' ? 'var(--accent-color)' : 'var(--text-color)'} !important; + } + main_temperature_button: + defaults: + - name: '' + - columns: '' + card: + type: custom:bubble-card + card_type: button + button_type: state + entity: '[[entity]]' + name: '[[name]]' + show_attribute: false + card_layout: large + columns: '[[columns]]' + styles: | + .is-unavailable { + opacity: 0.5 !important; + } + .bubble-button-background { + opacity: 1 !important; + background-color: ${hass.states['[[hot_entity]]'].state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important; + transition: background-color 1s !important; + } + .bubble-icon-container { + background: ${hass.states['[[hot_entity]]'].state === 'on' ? 'var(--error-color)' : 'var(--card-background-color)'} !important; + } + .bubble-icon-container::after { + opacity: ${hass.states['[[hot_entity]]'].state === 'on' ? 0.3 : 0} !important; + transition: all 1s !important; + } + main_room_header: + defaults: + - name: '' + - icon: '' + - scene_text: '' + - power_entity: '' + - light_entity: '' + card: + type: custom:bubble-card + card_type: separator + name: '[[name]]' + icon: '[[icon]]' + card_layout: large + sub_button: + - name: Scene + entity: '[[scene_text]]' + show_state: true + state_background: false + icon: mdi:palette + tap_action: + action: none + visibility: + - condition: state + entity: '[[light_entity]]' + state: 'on' + - name: Power + entity: '[[power_entity]]' + show_state: true + state_background: false background: var(--background-image) title: Stratton Ave views: @@ -2513,8 +2647,14 @@ views: sections: - type: grid cards: - - type: heading - heading: Basement Studio + - type: custom:decluttering-card + template: main_room_header + variables: + - name: Basement Studio + - icon: mdi:twitch + - scene_text: input_text.basement_studio_selected_scene + - power_entity: sensor.basement_studio_total_power_sensor + - light_entity: light.basement_studio_lights - type: horizontal-stack cards: - type: custom:mushroom-light-card @@ -2534,87 +2674,33 @@ views: option: Adaptive target: entity_id: input_select.basement_studio_scenes + primary_info: none layout: vertical - - type: vertical-stack - cards: - - type: custom:mushroom-template-card - primary: Current Scene - secondary: '{{ states(''input_text.basement_studio_selected_scene'') }}' - tap_action: - action: none - hold_action: - action: none - double_tap_action: - action: none - layout: vertical - - type: custom:mushroom-template-card - entity: sensor.basement_studio_lights_power_sensor - primary: Power Usage - secondary: '{{ states(''sensor.basement_total_power_sensor'') }} W' - tap_action: - action: more-info - hold_action: - action: none - double_tap_action: - action: none - fill_container: false - layout: vertical - visibility: - - condition: state - entity: light.basement_studio_lights - state: 'on' - - type: custom:timer-bar-card - filter: true - entities: - - entity: timer.basement_studio_door_timer - sync_issues: ignore - tap_action: - action: none - hold_action: - action: more-info - double_tap_action: - action: none - layout: hide_name - modifications: - - elapsed: 40% - bar_foreground: orange - - elapsed: 80% - bar_foreground: red - extend_paper_buttons_row: - position: right - buttons: - - icon: mdi:check-circle - tap_action: - action: call-service - service: timer.finish - target: - entity_id: timer.basement_studio_door_timer - visibility: - - condition: or - conditions: - - condition: state - entity: timer.basement_studio_door_timer - state: running - - condition: state - entity: timer.basement_studio_door_timer - state: paused + - type: custom:bubble-card + card_type: separator + name: Lights + icon: mdi:lightbulb + card_layout: large - type: custom:bubble-card card_type: button button_type: slider entity: light.basement_led_strip_1 - name: LED Strip 1 - show_state: true show_attribute: true + show_state: true attribute: brightness - show_icon: true tap_action: action: toggle double_tap_action: action: none hold_action: action: more-info - columns: 2 + icon: hue:lightstrip + name: LED Strip 1 + styles: >- + ${icon.setAttribute("icon", state === 'off' ? 'hue:lightstrip-off' + : 'hue:lightstrip')} card_layout: large + columns: 2 - type: custom:bubble-card card_type: button button_type: slider @@ -2623,32 +2709,36 @@ views: show_state: true show_attribute: true attribute: brightness - show_icon: true tap_action: action: toggle double_tap_action: action: none hold_action: action: more-info - columns: 2 + styles: >- + ${icon.setAttribute("icon", state === 'off' ? + 'hue:floor-shade-off' : 'hue:floor-shade')} card_layout: large + columns: 2 - type: custom:bubble-card card_type: button button_type: slider entity: light.basement_short_lamp - name: Short Lamp - show_state: true show_attribute: true + show_state: true attribute: brightness - show_icon: true tap_action: action: toggle double_tap_action: action: none hold_action: action: more-info - columns: 2 + name: Short Lamp + styles: >- + ${icon.setAttribute("icon", state === 'off' ? + 'hue:floor-shade-off' : 'hue:floor-shade')} card_layout: large + columns: 2 - type: custom:bubble-card card_type: button button_type: slider @@ -2657,111 +2747,255 @@ views: show_state: true show_attribute: true attribute: brightness - show_icon: true tap_action: action: toggle double_tap_action: action: none hold_action: action: more-info - columns: 2 + styles: >- + ${icon.setAttribute("icon", state === 'off' ? + 'hue:floor-shade-off' : 'hue:floor-shade')} card_layout: large - - type: entities + columns: 2 + - type: custom:timer-bar-card + filter: true entities: - - type: custom:paper-buttons-row - buttons: - - entity: input_boolean.recliner_mode - layout: icon|name_state - name: Recliner Mode - state_icons: - unavailable: mdi:map-marker-question - state: - case: first - - entity: input_boolean.basement_studio_entertainment_control - layout: icon|name_state - name: Entertainment - state_icons: - unavailable: mdi:map-marker-question - state: - case: first - state_color: true - show_header_toggle: false - - type: entities - entities: - - type: custom:paper-buttons-row - buttons: - - entity: fan.basement_fan - name: Fan - layout: icon|name_state - state_icons: - 'on': mdi:fan - 'off': mdi:fan-off - unavailable: mdi:map-marker-question - state: - case: first - - entity: input_boolean.do_not_enter_basement_studio - name: Do Not Enter - layout: icon|name_state - state_icons: - 'on': mdi:minus-circle - 'off': mdi:minus-circle-off-outline - unavailable: mdi:map-marker-question - state: - case: first - - entity: input_boolean.studio_quiet - name: Quiet - layout: icon|name_state - state_icons: - unavailable: mdi:map-marker-question - state: - case: first - - entity: input_boolean.gaming_mode - name: Gaming - layout: icon|name_state - state_icons: - unavailable: mdi:map-marker-question - state: - case: first - state_color: true - show_header_toggle: false - - type: custom:versatile-thermostat-ui-card - entity: climate.basement_studio_vtherm - disable_circle: false - disable_name: true - powerEntity: sensor.basement_studio_heater_power - disable_auto_fan_infos: true - - type: custom:mushroom-select-card - entity: input_select.basement_studio_scenes - layout: horizontal - name: Scenes - secondary_info: none - - type: custom:mushroom-select-card - entity: select.basement_led_strip_1_theme - layout: horizontal - name: LED Strip Theme - secondary_info: none - - type: glance - show_name: true - show_icon: true + - entity: timer.basement_studio_door_timer + name: Door Timer + sync_issues: ignore + tap_action: + action: call-service + service: timer.finish + target: + entity_id: timer.basement_studio_door_timer + hold_action: + action: more-info + double_tap_action: + action: none + modifications: + - elapsed: 40% + bar_foreground: orange + - elapsed: 80% + bar_foreground: red + compressed: true + - type: custom:bubble-card + card_type: separator + name: Media + icon: mdi:volume-high + card_layout: large + - type: custom:bubble-card + card_type: media-player + entity: media_player.basement_tv + name: TV show_state: true - state_color: true - entities: - - entity: binary_sensor.basement_studio_door - name: Door - - type: glance - show_name: true - show_icon: true + show_last_changed: false + show_attribute: true + attribute: app_name + force_icon: false + hide: + play_pause_button: false + volume_button: false + power_button: false + card_layout: large + - type: custom:bubble-card + card_type: separator + name: Environment + icon: mdi:thermometer + card_layout: large + - type: conditional + conditions: + - condition: state + entity: input_boolean.basement_studio_heat_allowed + state: 'on' + card: + type: custom:stack-in-card + cards: + - features: + - style: icons + type: climate-hvac-modes + hvac_modes: + - 'off' + - heat + - type: target-temperature + - style: dropdown + type: climate-preset-modes + preset_modes: + - none + - frost + - eco + - comfort + - boost + type: tile + entity: climate.basement_studio_vtherm + vertical: false + show_entity_picture: false + hide_state: false + name: Basement Studio Heater + - type: custom:bubble-card + card_type: button + button_type: state + entity: switch.basement_studio_heater + name: Heater Running + show_attribute: false + tap_action: + action: none + double_tap_action: + action: none + hold_action: + action: none + button_action: + tap_action: + action: none + double_tap_action: + action: none + hold_action: + action: none + styles: |- + .bubble-button-background { + opacity: 1 !important; + background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--background-color-2)'} !important; + } + .bubble-icon { + color: ${state === 'on' ? 'var(--accent-color)' : 'var(--text-color)'} !important; + } + visibility: + - condition: state + entity: input_boolean.basement_studio_heat_allowed + state: 'on' + card_layout: large + - type: custom:bubble-card + card_type: button + button_type: switch + entity: fan.basement_fan + name: Fan show_state: true - state_color: true - entities: + tap_action: + action: toggle + double_tap_action: + action: none + hold_action: + action: more-info + button_action: + double_tap_action: + action: none + styles: |- + .bubble-icon { + animation: ${state === 'on' ? 'slow-rotate 2s linear infinite' : ''}; + } + @keyframes slow-rotate { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + card_layout: large + columns: 2 + - type: custom:bubble-card + card_type: button + button_type: switch + entity: input_boolean.white_noise_basement + name: White Noise + show_state: true + tap_action: + action: toggle + double_tap_action: + action: none + hold_action: + action: more-info + button_action: + double_tap_action: + action: none + card_layout: large + columns: 2 + - type: custom:bubble-card + card_type: separator + name: Modes + icon: mdi:toggle-switch + card_layout: large + - type: custom:bubble-card + card_type: button + entity: input_boolean.studio_quiet + name: Studio Quiet + show_state: true + tap_action: + action: toggle + double_tap_action: + action: none + hold_action: + action: more-info + button_action: + double_tap_action: + action: none + card_layout: large + columns: 2 + - type: custom:bubble-card + card_type: button + button_type: switch + entity: input_boolean.gaming_mode + name: Gaming Mode + show_state: true + tap_action: + action: toggle + double_tap_action: + action: none + hold_action: + action: more-info + button_action: + double_tap_action: + action: none + card_layout: large + columns: 2 + - type: custom:bubble-card + card_type: separator + name: Status + icon: mdi:list-box + card_layout: large + - type: custom:decluttering-card + template: main_temperature_button + variables: + - name: Temp - entity: sensor.basement_studio_temperature - name: Temp - - entity: sensor.basement_studio_illuminance - name: Lux + - hot_entity: binary_sensor.basement_studio_hot + - columns: 2 + grid_options: + columns: 6 + rows: auto + - type: custom:bubble-card + card_type: button + button_type: state + entity: sensor.basement_studio_illuminance + name: Lux + show_state: true + tap_action: + action: more-info + double_tap_action: + action: none + hold_action: + action: none + button_action: + double_tap_action: + action: none + hold_action: + action: none + card_layout: large + columns: 2 + - type: custom:decluttering-card + template: main_accent_color_button + variables: + - name: Motion - entity: binary_sensor.basement_studio_motion - name: Motion + - columns: 2 + grid_options: + columns: 6 + rows: auto + - type: custom:decluttering-card + template: main_accent_color_button + variables: + - name: Occupied - entity: binary_sensor.basement_occupied - name: Occupied + - columns: 2 + grid_options: + columns: 6 + rows: auto - type: custom:fold-entity-row show_header_toggle: false state_color: true @@ -2820,15 +3054,6 @@ views: name: Sync Issue - entity: input_button.basement_led_strip_reset name: LED Strip Reset - visibility: - - condition: or - conditions: - - condition: state - entity: input_boolean.studio_quiet - state: 'off' - - condition: user - users: - - c3909d27048140729f002aaef0391775 - type: grid cards: - type: heading @@ -7076,3 +7301,339 @@ views: name: Sync Issue - entity: input_button.basement_led_strip_reset name: LED Strip Reset + - type: grid + cards: + - type: heading + heading: Basement Studio + - type: horizontal-stack + cards: + - type: custom:mushroom-light-card + entity: light.basement_studio_lights + name: Lights + icon: mdi:twitch + fill_container: true + use_light_color: true + show_brightness_control: true + show_color_temp_control: true + show_color_control: true + collapsible_controls: true + double_tap_action: + action: call-service + service: input_select.select_option + service_data: + option: Adaptive + target: + entity_id: input_select.basement_studio_scenes + layout: vertical + - type: vertical-stack + cards: + - type: custom:mushroom-template-card + primary: Current Scene + secondary: '{{ states(''input_text.basement_studio_selected_scene'') }}' + tap_action: + action: none + hold_action: + action: none + double_tap_action: + action: none + layout: vertical + - type: custom:mushroom-template-card + entity: sensor.basement_studio_lights_power_sensor + primary: Power Usage + secondary: '{{ states(''sensor.basement_total_power_sensor'') }} W' + tap_action: + action: more-info + hold_action: + action: none + double_tap_action: + action: none + fill_container: false + layout: vertical + visibility: + - condition: state + entity: light.basement_studio_lights + state: 'on' + - type: custom:timer-bar-card + filter: true + entities: + - entity: timer.basement_studio_door_timer + sync_issues: ignore + tap_action: + action: none + hold_action: + action: more-info + double_tap_action: + action: none + layout: hide_name + modifications: + - elapsed: 40% + bar_foreground: orange + - elapsed: 80% + bar_foreground: red + extend_paper_buttons_row: + position: right + buttons: + - icon: mdi:check-circle + tap_action: + action: call-service + service: timer.finish + target: + entity_id: timer.basement_studio_door_timer + visibility: + - condition: or + conditions: + - condition: state + entity: timer.basement_studio_door_timer + state: running + - condition: state + entity: timer.basement_studio_door_timer + state: paused + - type: custom:bubble-card + card_type: button + button_type: slider + entity: light.basement_led_strip_1 + name: LED Strip 1 + show_state: true + show_attribute: true + attribute: brightness + show_icon: true + tap_action: + action: toggle + double_tap_action: + action: none + hold_action: + action: more-info + columns: 2 + card_layout: large + - type: custom:bubble-card + card_type: button + button_type: slider + entity: light.basement_stairwell + name: Stairwell + show_state: true + show_attribute: true + attribute: brightness + show_icon: true + tap_action: + action: toggle + double_tap_action: + action: none + hold_action: + action: more-info + columns: 2 + card_layout: large + - type: custom:bubble-card + card_type: button + button_type: slider + entity: light.basement_short_lamp + name: Short Lamp + show_state: true + show_attribute: true + attribute: brightness + show_icon: true + tap_action: + action: toggle + double_tap_action: + action: none + hold_action: + action: more-info + columns: 2 + card_layout: large + - type: custom:bubble-card + card_type: button + button_type: slider + entity: light.basement_tall_lamp + name: Tall Lamp + show_state: true + show_attribute: true + attribute: brightness + show_icon: true + tap_action: + action: toggle + double_tap_action: + action: none + hold_action: + action: more-info + columns: 2 + card_layout: large + - type: entities + entities: + - type: custom:paper-buttons-row + buttons: + - entity: input_boolean.recliner_mode + layout: icon|name_state + name: Recliner Mode + state_icons: + unavailable: mdi:map-marker-question + state: + case: first + - entity: input_boolean.basement_studio_entertainment_control + layout: icon|name_state + name: Entertainment + state_icons: + unavailable: mdi:map-marker-question + state: + case: first + state_color: true + show_header_toggle: false + - type: entities + entities: + - type: custom:paper-buttons-row + buttons: + - entity: fan.basement_fan + name: Fan + layout: icon|name_state + state_icons: + 'on': mdi:fan + 'off': mdi:fan-off + unavailable: mdi:map-marker-question + state: + case: first + - entity: input_boolean.white_noise_basement + name: White Noise + layout: icon|name_state + state_icons: + 'on': mdi:volume-high + 'off': mdi:volume-off + unavailable: mdi:map-marker-question + state: + case: first + - entity: input_boolean.studio_quiet + name: Quiet + layout: icon|name_state + state_icons: + unavailable: mdi:map-marker-question + state: + case: first + - entity: input_boolean.gaming_mode + name: Gaming + layout: icon|name_state + state_icons: + unavailable: mdi:map-marker-question + state: + case: first + state_color: true + show_header_toggle: false + - type: custom:simple-thermostat + entity: climate.basement_studio_vtherm + header: false + decimals: 0 + step_size: 1 + layout: + mode: + headings: false + names: true + icons: true + step: row + control: + hvac: + heat: true + preset: + none: false + frost: + name: Minimum + eco: + name: Eco + comfort: + name: Comfort + boost: + name: Extra + - type: custom:mushroom-select-card + entity: input_select.basement_studio_scenes + layout: horizontal + name: Scenes + secondary_info: none + - type: custom:mushroom-select-card + entity: select.basement_led_strip_1_theme + layout: horizontal + name: LED Strip Theme + secondary_info: none + - type: glance + show_name: true + show_icon: true + show_state: true + state_color: true + entities: + - entity: binary_sensor.basement_studio_door + name: Door + - type: glance + show_name: true + show_icon: true + show_state: true + state_color: true + entities: + - entity: sensor.basement_studio_temperature + name: Temp + - entity: sensor.basement_studio_illuminance + name: Lux + - entity: binary_sensor.basement_studio_motion + name: Motion + - entity: binary_sensor.basement_occupied + name: Occupied + - type: custom:fold-entity-row + show_header_toggle: false + state_color: true + head: + type: section + label: More Settings + entities: + - type: custom:paper-buttons-row + buttons: + - entity: switch.adaptive_lighting_basement_studio + name: Adaptive Lighting + layout: icon|name_state + state: + case: first + - entity: switch.adaptive_lighting_sleep_mode_basement_studio + name: Night Mode + layout: icon|name_state + state: + case: first + - type: custom:paper-buttons-row + buttons: + - entity: switch.adaptive_lighting_adapt_brightness_basement_studio + name: Adapt Brightness + layout: icon|name_state + state: + case: first + - entity: switch.adaptive_lighting_adapt_color_basement_studio + name: Adapt Color + layout: icon|name_state + state: + case: first + - entity: input_boolean.basement_studio_dynamic_scenes + name: Dynamic Scenes + layout: icon|name_state + state: + case: first + - entity: input_boolean.basement_studio_heat_allowed + name: Heat Allowed + - entity: automation.basement_lights_handling + name: Auto Handling + - entity: automation.basement_lights_adaptive_resync + name: Adaptive Resync + - entity: input_number.daytime_colortemp_basement_studio + name: Day Colortemp + - entity: input_number.nighttime_colortemp_basement_studio + name: Night Colortemp + - entity: input_number.nighttime_brightness_basement_studio + name: Night Brightness + - entity: input_number.basement_studio_lights_off_delay + name: Lights Off Delay + - entity: counter.basement_studio_door_opened_today + name: Door Opened Today + - entity: counter.basement_led_strip_resets + name: LED Strip Resets + - entity: binary_sensor.basement_studio_sync_issue + name: Sync Issue + - entity: input_button.basement_led_strip_reset + name: LED Strip Reset + visibility: + - condition: or + conditions: + - condition: state + entity: input_boolean.studio_quiet + state: 'off' + - condition: user + users: + - c3909d27048140729f002aaef0391775