Alexander Savin
26d86dec90
Some checks failed
Savin's Home Assistant / build (push) Failing after 1m45s
1202 lines
48 KiB
YAML
1202 lines
48 KiB
YAML
---
|
|
title: Main
|
|
icon: 'mdi:shield-home'
|
|
panel: true
|
|
visible:
|
|
- user: 1614b22cbef54f979741cf8a6b3413ec
|
|
- user: 76e8af2547254ef0ab523ae1ad0bf81a
|
|
cards:
|
|
- type: 'custom:layout-card'
|
|
layout_type: 'custom:vertical-layout'
|
|
layout:
|
|
max_cols: 3
|
|
cards:
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: custom:mushroom-chips-card
|
|
chips:
|
|
- type: template
|
|
icon: mdi:faucet-variant
|
|
icon_color: "{% if is_state('binary_sensor.presence_kitchen_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
|
|
entity: binary_sensor.presence_kitchen_sensor_1
|
|
tap_action:
|
|
action: more-info
|
|
- type: template
|
|
icon: mdi:sofa
|
|
icon_color: "{% if is_state('binary_sensor.presence_living_room_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
|
|
entity: binary_sensor.presence_living_room_sensor_1
|
|
tap_action:
|
|
action: more-info
|
|
- type: template
|
|
icon: mdi:bed-king
|
|
icon_color: "{% if is_state('binary_sensor.presence_bedroom_master_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
|
|
entity: binary_sensor.presence_bedroom_master_sensor_1
|
|
tap_action:
|
|
action: more-info
|
|
- type: template
|
|
icon: mdi:bed
|
|
icon_color: "{% if is_state('binary_sensor.presence_bedroom_maxim_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
|
|
entity: binary_sensor.presence_bedroom_maxim_sensor_1
|
|
tap_action:
|
|
action: more-info
|
|
- type: template
|
|
icon: mdi:bed
|
|
icon_color: "{% if is_state('binary_sensor.presence_bedroom_olivia_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
|
|
entity: binary_sensor.presence_bedroom_olivia_sensor_1
|
|
tap_action:
|
|
action: more-info
|
|
- type: template
|
|
icon: mdi:stairs
|
|
icon_color: "{% if is_state('binary_sensor.presence_stairwell_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
|
|
entity: binary_sensor.presence_stairwell_sensor_1
|
|
tap_action:
|
|
action: more-info
|
|
- type: template
|
|
icon: mdi:garage-variant
|
|
icon_color: "{% if is_state('binary_sensor.presence_garage_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
|
|
entity: binary_sensor.presence_garage_sensor_1
|
|
tap_action:
|
|
action: more-info
|
|
- type: template
|
|
icon: mdi:home-roof
|
|
icon_color: "{% if is_state('binary_sensor.presence_garage_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
|
|
entity: binary_sensor.presence_garage_sensor_1
|
|
tap_action:
|
|
action: more-info
|
|
|
|
- type: custom:bubble-card
|
|
entity: alarm_control_panel.home_alarm
|
|
card_type: button
|
|
button_type: name
|
|
name: Security
|
|
icon: mdi:shield-check
|
|
show_state: true
|
|
show_last_changed: true
|
|
sub_button:
|
|
- name: Doors # sensor.number_doors_open
|
|
icon: mdi:door-open
|
|
show_state: false
|
|
show_background: true
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: '#popup-open-doors'
|
|
- name: Windows # sensor.number_windows_open
|
|
icon: mdi:window-open
|
|
show_background: true
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: '#popup-open-windows'
|
|
- name: Lights # sensor.number_light_on
|
|
icon: mdi:lightbulb-group
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: '#popup-on-lights'
|
|
- name: Garage Cover
|
|
icon: mdi:garage-variant
|
|
entity: cover.garage_gate
|
|
tap_action:
|
|
confirmation:
|
|
text: open/Close a Garage Cover?
|
|
action: call-service
|
|
service: cover.toggle
|
|
target:
|
|
entity_id: cover.garage_gate
|
|
- name: Lock
|
|
icon: mdi:lock-smart
|
|
entity: lock.lock_01
|
|
tap_action:
|
|
confirmation:
|
|
text: Lock/Unlock a Lock?
|
|
action: call-service
|
|
service: lock.lock
|
|
target:
|
|
entity_id: lock.lock_01
|
|
modules:
|
|
- badges
|
|
badges:
|
|
main_icon:
|
|
badge_1:
|
|
icon: mdi:numeric-1-box
|
|
sub_button_1:
|
|
badge_1:
|
|
icon: mdi:numberc-1-box
|
|
styles: |
|
|
.bubble-button-background {
|
|
opacity: 1 !important;
|
|
background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
|
|
}
|
|
.bubble-sub-button-1 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-2 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-3 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-4 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-5 {
|
|
background-color: white !important;
|
|
}
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:bubble-card
|
|
card_type: button
|
|
button_type: state
|
|
name: Alexander Savin
|
|
entity: person.alexander_savin
|
|
show_state: true
|
|
show_last_changed: true
|
|
tap_action:
|
|
action: more-info
|
|
button_action:
|
|
tap_action:
|
|
action: more-info
|
|
sub_button:
|
|
- name: Map
|
|
icon: mdi:map-search-outline
|
|
show_state: false
|
|
show_background: true
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: '#popup-map'
|
|
modules:
|
|
- progress_border
|
|
progress_border:
|
|
entity: sensor.alex_s_google_pixel_8_pro_battery_level
|
|
color: purple
|
|
backcolor: deep-purple
|
|
styles: |
|
|
.bubble-entity-picture {
|
|
display: flex !important;
|
|
background-image: url("/local/profile_savin_alex.jpg") !important;
|
|
background-size: 300%;
|
|
}
|
|
- type: custom:bubble-card
|
|
card_type: button
|
|
button_type: state
|
|
name: Tatiana Savin
|
|
entity: person.tatiana_savin
|
|
show_state: true
|
|
show_last_changed: true
|
|
tap_action:
|
|
action: more-info
|
|
button_action:
|
|
tap_action:
|
|
action: more-info
|
|
sub_button:
|
|
- name: Map
|
|
icon: mdi:map-search-outline
|
|
show_state: false
|
|
show_background: true
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: '#popup-map'
|
|
modules:
|
|
- progress_border
|
|
progress_border:
|
|
entity: sensor.tanya_s_google_pixel_8_pro_battery_level
|
|
color: purple
|
|
backcolor: deep-purple
|
|
styles: |
|
|
.bubble-entity-picture {
|
|
display: flex !important;
|
|
background-image: url("/local/profile_savin_tanya.jpg") !important;
|
|
background-size: 300%;
|
|
}
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:bubble-card
|
|
card_type: button
|
|
button_type: state
|
|
name: Maxim Savin
|
|
entity: person.maxim_savin
|
|
show_state: true
|
|
show_last_changed: true
|
|
tap_action:
|
|
action: more-info
|
|
button_action:
|
|
tap_action:
|
|
action: more-info
|
|
sub_button:
|
|
- name: Map
|
|
icon: mdi:map-search-outline
|
|
show_state: false
|
|
show_background: true
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: '#popup-map'
|
|
modules:
|
|
- progress_border
|
|
progress_border:
|
|
entity: sensor.maksims_iphone_battery_level
|
|
color: purple
|
|
backcolor: deep-purple
|
|
styles: |
|
|
.bubble-entity-picture {
|
|
display: flex !important;
|
|
background-image: url("/local/profile_savin_maxim.jpg") !important;
|
|
background-size: 300%;
|
|
}
|
|
- type: custom:bubble-card
|
|
card_type: button
|
|
button_type: state
|
|
name: Olivia Savin
|
|
entity: person.olivia_savin
|
|
show_state: true
|
|
show_last_changed: true
|
|
tap_action:
|
|
action: more-info
|
|
button_action:
|
|
tap_action:
|
|
action: more-info
|
|
sub_button:
|
|
- name: Map
|
|
icon: mdi:map-search-outline
|
|
show_state: false
|
|
show_background: true
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: '#popup-map'
|
|
modules:
|
|
- progress_border
|
|
progress_border:
|
|
entity: sensor.olivia_google_pixel_watch_2_battery_level
|
|
color: purple
|
|
backcolor: deep-purple
|
|
styles: |
|
|
.bubble-entity-picture {
|
|
display: flex !important;
|
|
background-image: url("/local/profile_savin_olivia.jpg") !important;
|
|
background-size: 300%;
|
|
}
|
|
|
|
- type: custom:layout-break
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: custom:bubble-card
|
|
card_type: climate
|
|
entity: climate.living_room
|
|
sub_button:
|
|
- name: HVAC modes menu
|
|
select_attribute: hvac_modes
|
|
show_arrow: false
|
|
state_background: false
|
|
|
|
- type: custom:bubble-card
|
|
card_type: button
|
|
button_type: switch
|
|
name: Vacuum
|
|
entity: vacuum.roborock_s5_max
|
|
icon: mdi:robot-vacuum
|
|
show_state: true
|
|
show_last_changed: true
|
|
tap_action:
|
|
action: more-info
|
|
button_action:
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: '#popup-vacuum-cleaner-kitchen'
|
|
sub_button:
|
|
- name: Battery
|
|
icon: mdi:battery
|
|
show_name: false
|
|
show_icon: true
|
|
show_background: false
|
|
show_attribute: true
|
|
attribute: battery_level
|
|
- name: Return to dock
|
|
icon: mdi:home
|
|
show_background: false
|
|
tap_action:
|
|
action: call-service
|
|
service: vacuum.return_to_base
|
|
target:
|
|
entity_id: vacuum.roborock_s5_max
|
|
- name: Pause
|
|
icon: mdi:pause
|
|
show_background: false
|
|
tap_action:
|
|
action: call-service
|
|
service: vacuum.pause
|
|
target:
|
|
entity_id: vacuum.roborock_s5_max
|
|
- name: Start
|
|
icon: mdi:play
|
|
tap_action:
|
|
action: call-service
|
|
service: vacuum.start
|
|
target:
|
|
entity_id: vacuum.roborock_s5_max
|
|
styles: |
|
|
.bubble-button-card-container {
|
|
/* Change the background color when the vacuum get an error (optional), more details in the styles template section */
|
|
background: ${state === 'error' ? 'rgb(200, 80, 40)' : ''} !important;
|
|
}
|
|
/* Change the first sub-button battery icon based on the battery_icon attribute, more details in the styles template section */
|
|
${subButtonIcon[0].setAttribute("icon", hass.states['vacuum.roborock_s5_max'].attributes.battery_icon)}
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:bubble-card
|
|
card_type: button
|
|
button_type: state
|
|
name: Kitchen
|
|
icon: 'mdi:countertop'
|
|
entity: binary_sensor.presence_kitchen_sensor_2
|
|
card_layout: large-2-rows
|
|
grid_options:
|
|
columns: 6
|
|
rows: 3
|
|
show_attribute: false
|
|
show_name: true
|
|
show_icon: true
|
|
scrolling_effect: true
|
|
show_state: true
|
|
button_action:
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: /lovelace/2/
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: /lovelace/2/
|
|
sub_button:
|
|
- entity: input_boolean.kitchen_light_state
|
|
- entity: sun.sun
|
|
- entity: sun.sun
|
|
- entity: sun.sun
|
|
styles: |
|
|
:host{
|
|
--icon-Background-Color: #80bfff ;
|
|
--color-yellow: 255, 202, 58 ;
|
|
--color-blue: 25, 130, 196 ;
|
|
--color-green: 138, 201, 38 ;
|
|
--color-purple: 106, 76, 147 ;
|
|
}
|
|
|
|
.card-content {
|
|
width: 100%;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.bubble-button-card {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'n n n b'
|
|
'l l l b'
|
|
'i i . b'
|
|
'i i . b';
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
|
|
justify-items: center;
|
|
}
|
|
|
|
.bubble-icon-container {
|
|
grid-area: i;
|
|
border-radius: 50% !important;
|
|
width: 150% !important;
|
|
height: 150% !important;
|
|
max-width: none !important;
|
|
max-height: none !important;
|
|
position: absolute !important;
|
|
place-self: center !important;
|
|
margin: 0px 0px 0px 0px !important;
|
|
padding: 0px, 0px, 0px, 0px !important;
|
|
background-color: var(--icon-Background-Color);
|
|
}
|
|
|
|
.bubble-icon {
|
|
width: 40%;
|
|
position: relative !important;
|
|
--mdc-icon-size: 100px !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.bubble-name-container {
|
|
grid-area: n;
|
|
justify-self: start;
|
|
margin-left: 20px;
|
|
max-width: calc(100% -(12px + 0px));
|
|
}
|
|
|
|
.bubble-name {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.bubble-state {
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.large .bubble-sub-button-container {
|
|
grid-area: b;
|
|
display: flex !important;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
gap: calc((100% - 4 * 36px)/5) !important;
|
|
justify-content: flex-start;
|
|
width: auto !important;
|
|
right: 0px !important;
|
|
padding-right: 0px !important;
|
|
height: 100% !important;
|
|
top: calc((100% - 4 * 36px)/5) !important;
|
|
}
|
|
|
|
.large .bubble-button-card-container {
|
|
height: 200px !important;
|
|
}
|
|
|
|
.large .bubble-sub-button {
|
|
height: 36px !important;
|
|
}
|
|
|
|
${card.querySelector('.bubble-state').innerText = hass.states['sensor.climate_kitchen_01_temperature'].state + "°C | " + hass.states['sensor.climate_kitchen_01_humidity'].state + "%"}
|
|
|
|
- type: custom:bubble-card
|
|
card_type: button
|
|
button_type: state
|
|
name: Living Room
|
|
icon: 'mdi:sofa'
|
|
entity: binary_sensor.presence_living_room_sensor_1
|
|
card_layout: large-2-rows
|
|
grid_options:
|
|
columns: 6
|
|
rows: 3
|
|
show_attribute: false
|
|
show_name: true
|
|
show_icon: true
|
|
scrolling_effect: true
|
|
show_state: true
|
|
button_action:
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: /lovelace/3/
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: /lovelace/3/
|
|
sub_button:
|
|
- entity: input_boolean.living_room_light_state
|
|
- entity: sun.sun
|
|
- entity: sun.sun
|
|
- entity: sun.sun
|
|
styles: |
|
|
:host{
|
|
--icon-Background-Color: #80bfff ;
|
|
--color-yellow: 255, 202, 58 ;
|
|
--color-blue: 25, 130, 196 ;
|
|
--color-green: 138, 201, 38 ;
|
|
--color-purple: 106, 76, 147 ;
|
|
}
|
|
|
|
.card-content {
|
|
width: 100%;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.bubble-button-card {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'n n n b'
|
|
'l l l b'
|
|
'i i . b'
|
|
'i i . b';
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
|
|
justify-items: center;
|
|
}
|
|
|
|
.bubble-icon-container {
|
|
grid-area: i;
|
|
border-radius: 50% !important;
|
|
width: 150% !important;
|
|
height: 150% !important;
|
|
max-width: none !important;
|
|
max-height: none !important;
|
|
position: absolute !important;
|
|
place-self: center !important;
|
|
margin: 0px 0px 0px 0px !important;
|
|
padding: 0px, 0px, 0px, 0px !important;
|
|
background-color: var(--icon-Background-Color);
|
|
}
|
|
|
|
.bubble-icon {
|
|
width: 40%;
|
|
position: relative !important;
|
|
--mdc-icon-size: 100px !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.bubble-name-container {
|
|
grid-area: n;
|
|
justify-self: start;
|
|
margin-left: 20px;
|
|
max-width: calc(100% -(12px + 0px));
|
|
}
|
|
|
|
.bubble-name {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.bubble-state {
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.large .bubble-sub-button-container {
|
|
grid-area: b;
|
|
display: flex !important;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
gap: calc((100% - 4 * 36px)/5) !important;
|
|
justify-content: flex-start;
|
|
width: auto !important;
|
|
right: 0px !important;
|
|
padding-right: 0px !important;
|
|
height: 100% !important;
|
|
top: calc((100% - 4 * 36px)/5) !important;
|
|
}
|
|
|
|
.large .bubble-button-card-container {
|
|
height: 200px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.large .bubble-sub-button {
|
|
height: 36px !important;
|
|
}
|
|
|
|
${card.querySelector('.bubble-state').innerText = hass.states['sensor.climate_living_room_01_temperature'].state + "°C | " + hass.states['sensor.climate_living_room_01_humidity'].state + "%"}
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:bubble-card
|
|
card_type: button
|
|
button_type: state
|
|
name: Master Bedroom
|
|
icon: 'mdi:bed-king'
|
|
entity: binary_sensor.presence_bedroom_master_sensor_1
|
|
card_layout: large-2-rows
|
|
grid_options:
|
|
columns: 6
|
|
rows: 3
|
|
show_attribute: false
|
|
show_name: true
|
|
show_icon: true
|
|
scrolling_effect: true
|
|
show_state: true
|
|
button_action:
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: /lovelace/4/
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: /lovelace/4/
|
|
sub_button:
|
|
- entity: input_boolean.bedroom_master_light_state
|
|
- entity: sun.sun
|
|
- entity: sun.sun
|
|
- entity: sun.sun
|
|
styles: |
|
|
:host{
|
|
--icon-Background-Color: #80bfff ;
|
|
--color-yellow: 255, 202, 58 ;
|
|
--color-blue: 25, 130, 196 ;
|
|
--color-green: 138, 201, 38 ;
|
|
--color-purple: 106, 76, 147 ;
|
|
}
|
|
|
|
.card-content {
|
|
width: 100%;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.bubble-button-card {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'n n n b'
|
|
'l l l b'
|
|
'i i . b'
|
|
'i i . b';
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
|
|
justify-items: center;
|
|
}
|
|
|
|
.bubble-icon-container {
|
|
grid-area: i;
|
|
border-radius: 50% !important;
|
|
width: 150% !important;
|
|
height: 150% !important;
|
|
max-width: none !important;
|
|
max-height: none !important;
|
|
position: absolute !important;
|
|
place-self: center !important;
|
|
margin: 0px 0px 0px 0px !important;
|
|
padding: 0px, 0px, 0px, 0px !important;
|
|
background-color: var(--icon-Background-Color);
|
|
}
|
|
|
|
.bubble-icon {
|
|
width: 40%;
|
|
position: relative !important;
|
|
--mdc-icon-size: 100px !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.bubble-name-container {
|
|
grid-area: n;
|
|
justify-self: start;
|
|
margin-left: 20px;
|
|
max-width: calc(100% -(12px + 0px));
|
|
}
|
|
|
|
.bubble-name {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.bubble-state {
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.large .bubble-sub-button-container {
|
|
grid-area: b;
|
|
display: flex !important;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
gap: calc((100% - 4 * 36px)/5) !important;
|
|
justify-content: flex-start;
|
|
width: auto !important;
|
|
right: 0px !important;
|
|
padding-right: 0px !important;
|
|
height: 100% !important;
|
|
top: calc((100% - 4 * 36px)/5) !important;
|
|
}
|
|
|
|
.large .bubble-button-card-container {
|
|
height: 200px !important;
|
|
}
|
|
|
|
.large .bubble-sub-button {
|
|
height: 36px !important;
|
|
}
|
|
|
|
${card.querySelector('.bubble-state').innerText = hass.states['sensor.climate_bedroom_master_01_temperature'].state + "°C | " + hass.states['sensor.climate_bedroom_master_01_humidity'].state + "%"}
|
|
|
|
- type: custom:bubble-card
|
|
card_type: button
|
|
button_type: state
|
|
name: Olivia Bedroom
|
|
icon: 'mdi:bed'
|
|
entity: binary_sensor.presence_bedroom_olivia_sensor_1
|
|
card_layout: large-2-rows
|
|
grid_options:
|
|
columns: 6
|
|
rows: 3
|
|
show_attribute: false
|
|
show_name: true
|
|
show_icon: true
|
|
scrolling_effect: true
|
|
show_state: true
|
|
button_action:
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: /lovelace/6/
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: /lovelace/6/
|
|
sub_button:
|
|
- entity: input_boolean.bedroom_olivia_light_state
|
|
- entity: sun.sun
|
|
- entity: sun.sun
|
|
- entity: sun.sun
|
|
styles: |
|
|
:host{
|
|
--icon-Background-Color: #80bfff ;
|
|
--color-yellow: 255, 202, 58 ;
|
|
--color-blue: 25, 130, 196 ;
|
|
--color-green: 138, 201, 38 ;
|
|
--color-purple: 106, 76, 147 ;
|
|
}
|
|
|
|
.card-content {
|
|
width: 100%;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.bubble-button-card {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'n n n b'
|
|
'l l l b'
|
|
'i i . b'
|
|
'i i . b';
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
|
|
justify-items: center;
|
|
}
|
|
|
|
.bubble-icon-container {
|
|
grid-area: i;
|
|
border-radius: 50% !important;
|
|
width: 150% !important;
|
|
height: 150% !important;
|
|
max-width: none !important;
|
|
max-height: none !important;
|
|
position: absolute !important;
|
|
place-self: center !important;
|
|
margin: 0px 0px 0px 0px !important;
|
|
padding: 0px, 0px, 0px, 0px !important;
|
|
background-color: var(--icon-Background-Color);
|
|
}
|
|
|
|
.bubble-icon {
|
|
width: 40%;
|
|
position: relative !important;
|
|
--mdc-icon-size: 100px !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.bubble-name-container {
|
|
grid-area: n;
|
|
justify-self: start;
|
|
margin-left: 20px;
|
|
max-width: calc(100% -(12px + 0px));
|
|
}
|
|
|
|
.bubble-name {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.bubble-state {
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.large .bubble-sub-button-container {
|
|
grid-area: b;
|
|
display: flex !important;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
gap: calc((100% - 4 * 36px)/5) !important;
|
|
justify-content: flex-start;
|
|
width: auto !important;
|
|
right: 0px !important;
|
|
padding-right: 0px !important;
|
|
height: 100% !important;
|
|
top: calc((100% - 4 * 36px)/5) !important;
|
|
}
|
|
|
|
.large .bubble-button-card-container {
|
|
height: 200px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.large .bubble-sub-button {
|
|
height: 36px !important;
|
|
}
|
|
|
|
${card.querySelector('.bubble-state').innerText = hass.states['sensor.climate_bedroom_olivia_01_temperature'].state + "°C | " + hass.states['sensor.climate_bedroom_olivia_01_humidity'].state + "%"}
|
|
|
|
|
|
- type: custom:layout-break
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: weather-forecast
|
|
entity: weather.my_weather_station
|
|
secondary_info_attribute: humidity
|
|
show_current: true
|
|
show_forecast: true
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: picture
|
|
image: https://objects.savin.nyc/api/frontyard/person/best.jpg
|
|
- type: picture
|
|
image: https://objects.savin.nyc/api/side1/person/best.jpg
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: picture
|
|
image: https://objects.savin.nyc/api/doorbell/person/best.jpg
|
|
- type: picture
|
|
image: https://objects.savin.nyc/api/entrance/person/best.jpg
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: picture
|
|
image: https://objects.savin.nyc/api/side2/person/best.jpg
|
|
- type: picture
|
|
image: https://objects.savin.nyc/api/backyard/person/best.jpg
|
|
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:bubble-card'
|
|
card_type: pop-up
|
|
hash: '#popup-open-windows'
|
|
name: Windows
|
|
icon: 'mdi:window-open'
|
|
- type: 'custom:bubble-card'
|
|
card_type: button
|
|
button_type: name
|
|
name: Kitchen
|
|
icon: mdi:countertop
|
|
show_state: false
|
|
sub_button:
|
|
- name: Kitchen Window
|
|
entity: binary_sensor.window_kitchen_01_contact
|
|
icon: mdi:window-closed
|
|
show_state: false
|
|
show_background: true
|
|
styles: |
|
|
.bubble-sub-button-1 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-1 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
|
|
|
|
- type: 'custom:bubble-card'
|
|
card_type: button
|
|
button_type: name
|
|
name: Living Room
|
|
icon: mdi:sofa
|
|
show_state: false
|
|
sub_button:
|
|
- name: Front (Left)
|
|
entity: binary_sensor.window_living_room_front_left_01_contact
|
|
icon: mdi:window-closed
|
|
show_state: false
|
|
show_background: true
|
|
- name: Front (Center)
|
|
entity: binary_sensor.window_living_room_front_center_01_contact
|
|
icon: mdi:window-closed
|
|
show_state: false
|
|
show_background: true
|
|
- name: Front (Right)
|
|
entity: binary_sensor.window_living_room_front_right_01_contact
|
|
icon: mdi:window-closed
|
|
show_state: false
|
|
show_background: true
|
|
- name: Side
|
|
entity: binary_sensor.window_living_room_side_01_contact
|
|
icon: mdi:window-closed
|
|
show_state: false
|
|
show_background: true
|
|
styles: |
|
|
.bubble-sub-button-1 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-1 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_living_room_front_left_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
.bubble-sub-button-2 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-2 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_living_room_front_center_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
.bubble-sub-button-3 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-3 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_living_room_front_right_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
.bubble-sub-button-4 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-4 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_living_room_side_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_living_room_front_left_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
|
|
${subButtonIcon[1].setAttribute("icon", hass.states['binary_sensor.window_living_room_front_center_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
|
|
${subButtonIcon[2].setAttribute("icon", hass.states['binary_sensor.window_living_room_front_right_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
|
|
${subButtonIcon[3].setAttribute("icon", hass.states['binary_sensor.window_living_room_side_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
|
|
|
|
- type: 'custom:bubble-card'
|
|
card_type: button
|
|
button_type: name
|
|
name: Master Bedroom
|
|
icon: mdi:bed-king
|
|
show_state: false
|
|
sub_button:
|
|
- name: Front (Left)
|
|
entity: binary_sensor.window_bedroom_master_left_01_contact
|
|
icon: mdi:window-closed
|
|
show_state: false
|
|
show_background: true
|
|
- name: Front (Center)
|
|
entity: binary_sensor.window_bedroom_master_center_01_contact
|
|
icon: mdi:window-closed
|
|
show_state: false
|
|
show_background: true
|
|
- name: Front (Right)
|
|
entity: binary_sensor.window_bedroom_master_right_01_contact
|
|
icon: mdi:window-closed
|
|
show_state: false
|
|
show_background: true
|
|
styles: |
|
|
.bubble-sub-button-1 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-1 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_bedroom_master_left_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
.bubble-sub-button-2 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-2 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_bedroom_master_center_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
.bubble-sub-button-3 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-3 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_bedroom_master_right_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bedroom_master_left_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
|
|
${subButtonIcon[1].setAttribute("icon", hass.states['binary_sensor.window_bedroom_master_center_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
|
|
${subButtonIcon[2].setAttribute("icon", hass.states['binary_sensor.window_bedroom_master_right_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
|
|
|
|
- type: 'custom:bubble-card'
|
|
card_type: button
|
|
button_type: name
|
|
name: Maxim Bedroom
|
|
icon: mdi:bed
|
|
show_state: false
|
|
sub_button:
|
|
- name: Window
|
|
entity: binary_sensor.window_bedroom_max_01_contact
|
|
icon: mdi:window-closed
|
|
show_state: false
|
|
show_background: true
|
|
styles: |
|
|
.bubble-sub-button-1 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-1 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_bedroom_max_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bedroom_max_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
|
|
- type: 'custom:bubble-card'
|
|
card_type: button
|
|
button_type: name
|
|
name: Olivia Bedroom
|
|
icon: mdi:bed
|
|
show_state: false
|
|
sub_button:
|
|
- name: Window
|
|
entity: binary_sensor.window_bedroom_olivia_01_contact
|
|
icon: mdi:window-closed
|
|
show_state: false
|
|
show_background: true
|
|
styles: |
|
|
.bubble-sub-button-1 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-1 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_bedroom_olivia_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bedroom_olivia_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
|
|
- type: 'custom:bubble-card'
|
|
card_type: button
|
|
button_type: name
|
|
name: Master Bathroom
|
|
icon: mdi:shower
|
|
show_state: false
|
|
sub_button:
|
|
- name: Window
|
|
entity: binary_sensor.window_bathroom_master_01_contact
|
|
icon: mdi:window-closed
|
|
show_state: false
|
|
show_background: true
|
|
styles: |
|
|
.bubble-sub-button-1 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-1 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_bathroom_master_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bathroom_master_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
|
|
- type: 'custom:bubble-card'
|
|
card_type: button
|
|
button_type: name
|
|
name: Bedroom Bathroom
|
|
icon: mdi:shower
|
|
show_state: false
|
|
sub_button:
|
|
- name: Window
|
|
entity: binary_sensor.window_bathroom_bedroom_01_contact
|
|
icon: mdi:window-closed
|
|
show_state: false
|
|
show_background: true
|
|
styles: |
|
|
.bubble-sub-button-1 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-1 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_bathroom_bedroom_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bathroom_bedroom_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
|
|
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:bubble-card'
|
|
card_type: pop-up
|
|
hash: '#popup-open-doors'
|
|
name: Doors
|
|
icon: 'mdi:door-open'
|
|
- type: 'custom:bubble-card'
|
|
card_type: button
|
|
button_type: name
|
|
name: Kitchen
|
|
icon: mdi:countertop
|
|
show_state: false
|
|
sub_button:
|
|
- name: Kitchen Door
|
|
entity: binary_sensor.door_kitchen_01
|
|
icon: mdi:door-sliding
|
|
show_state: false
|
|
show_background: true
|
|
styles: |
|
|
.bubble-sub-button-1 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-1 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.door_kitchen_01'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.door_kitchen_01'].state === 'on' ? 'mdi:door-sliding-open' : 'mdi:door-sliding')}
|
|
- type: 'custom:bubble-card'
|
|
card_type: button
|
|
button_type: name
|
|
name: Living Room
|
|
icon: mdi:sofa
|
|
show_state: false
|
|
sub_button:
|
|
- name: Entrance Door
|
|
entity: binary_sensor.door_entrance_01
|
|
icon: mdi:door-closed
|
|
show_state: false
|
|
show_background: true
|
|
styles: |
|
|
.bubble-sub-button-1 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-1 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.door_entrance_01'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.door_entrance_01'].state === 'on' ? 'mdi:door-open' : 'mdi:door-closed')}
|
|
- type: 'custom:bubble-card'
|
|
card_type: button
|
|
button_type: name
|
|
name: Garage
|
|
icon: mdi:garage-variant
|
|
show_state: false
|
|
sub_button:
|
|
- name: Garage Gate
|
|
entity: binary_sensor.door_kitchen_01_contact
|
|
icon: mdi:garage-variant
|
|
show_state: false
|
|
show_background: true
|
|
- name: Garage Door
|
|
entity: binary_sensor.door_garage_01_contact
|
|
icon: mdi:door-closed
|
|
show_state: false
|
|
show_background: true
|
|
styles: |
|
|
.bubble-sub-button-1 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-1 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
.bubble-sub-button-2 {
|
|
background-color: white !important;
|
|
}
|
|
.bubble-sub-button-2 > ha-icon {
|
|
color: ${ hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
|
|
}
|
|
${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'mdi:garage-open-variant' : 'mdi:garage-variant')}
|
|
${subButtonIcon[1].setAttribute("icon", hass.states['binary_sensor.door_garage_01_contact'].state === 'on' ? 'mdi:door-open' : 'mdi:door-closed')}
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:bubble-card'
|
|
card_type: pop-up
|
|
hash: '#popup-on-lights'
|
|
name: Doors
|
|
icon: 'mdi:door-open'
|
|
- type: custom:auto-entities
|
|
card:
|
|
type: grid
|
|
columns: 1
|
|
square: false
|
|
card_param: cards
|
|
filter:
|
|
include:
|
|
- domain: light
|
|
state: 'on'
|
|
options:
|
|
type: custom:bubble-card
|
|
card_type: button
|
|
button_type: slider
|
|
show_attribute: false
|
|
show_last_changed: true
|
|
show_state: true
|
|
exclude: []
|
|
show_empty: true
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:bubble-card'
|
|
card_type: pop-up
|
|
hash: '#popup-vacuum-cleaner-kitchen'
|
|
name: Vacuum Cleaner
|
|
icon: 'mdi:door-open'
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:xiaomi-vacuum-map-card
|
|
entity: vacuum.roborock_s5_max
|
|
map_source:
|
|
camera: camera.xiaomi_cloud_map_extractor
|
|
calibration_source:
|
|
camera: true
|
|
debug: false
|
|
map_modes:
|
|
- template: vacuum_clean_zone
|
|
- template: vacuum_goto
|
|
- template: vacuum_clean_zone_predefined
|
|
predefined_selections:
|
|
- zones: [[26600,21200,23600,27000]] # Kitchen
|
|
- zones: [[32700,26000,26600,20700]] # Living Room
|
|
map_locked: true
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:bubble-card'
|
|
card_type: pop-up
|
|
hash: '#popup-map'
|
|
name: Map
|
|
icon: 'mdi:map-search-outline'
|
|
- type: map
|
|
aspect_ratio: 100%
|
|
entities:
|
|
- entity: person.alexander_savin
|
|
- entity: person.tatiana_savin
|
|
- entity: person.maxim_savin
|
|
- entity: person.olivia_savin
|
|
- entity: device_tracker.subaru_outback_txt
|
|
- zone.home
|
|
- zone.npfd
|
|
- zone.work_kiswe
|
|
- zone.ymca_berkley_heights
|
|
- zone.nphs_school
|
|
- zone.awr_school
|