- type: grid
- cards:
- - type: custom:bubble-card
- card_type: separator
- name: Ground floor
- card_layout: large
- - type: custom:bubble-card
- card_type: button
- button_type: switch
- entity: light.entrance_light
- show_icon: true
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: false
- slider_live_update: false
- styles: |-
- .bubble-button-card:before {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- left: 38px;
- top: 4px;
- z-index: 1;
- line-height: 0;
- background-color: ${hass.states['binary_sensor.front_door_contact'].state === 'on' ? 'var(--primary-color)' : 'gray'}!important;
- content: ${hass.states['binary_sensor.front_door_contact'].state === 'on' ? 'url("https://api.iconify.design/mdi/door-open.svg?color=white&width=12")' : 'url("https://api.iconify.design/mdi/door-closed.svg?color=white&width=12")'}!important;
- width: var(--mush-badge-size, 16px);
- height: var(--mush-badge-size, 16px);
- border-radius: var(--mush-badge-border-radius, 50%);
- }
- sub_button: []
- card_layout: large
- use_accent_color: false
- name: Entrance
- tap_action:
- action: toggle
- hold_action:
- action: more-info
- grid_options:
- columns: 6
- rows: 1
- icon: ""
- - type: custom:bubble-card
- card_type: button
- button_type: switch
- entity: light.back_garden_light
- show_icon: true
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: true
- slider_live_update: false
- styles: |-
- .bubble-button-card:before {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- left: 38px;
- top: 4px;
- z-index: 1;
- line-height: 0;
- background-color: ${hass.states['binary_sensor.living_room_door_contact'].state === 'on' ? 'var(--primary-color)' : 'gray'}!important;
- content: ${hass.states['binary_sensor.living_room_door_contact'].state === 'on' ? 'url("https://api.iconify.design/mdi/door-open.svg?color=white&width=12")' : 'url("https://api.iconify.design/mdi/door-closed.svg?color=white&width=12")'}!important;
- width: var(--mush-badge-size, 16px);
- height: var(--mush-badge-size, 16px);
- border-radius: var(--mush-badge-border-radius, 50%);
- }
- sub_button:
- - entity: binary_sensor.backgarden_all_occupancy
- icon: mdi:motion-sensor
- show_background: false
- state_background: false
- visibility:
- - condition: state
- entity: binary_sensor.backgarden_all_occupancy
- state: "on"
- show_state: false
- show_last_changed: false
- show_attribute: false
- show_icon: true
- card_layout: large
- use_accent_color: true
- name: Back garden
- tap_action:
- action: toggle
- hold_action:
- action: more-info
- grid_options:
- columns: 6
- rows: 1
- icon: mdi:light-flood-down
- - type: custom:bubble-card
- card_type: button
- button_type: slider
- entity: light.living_room_lights
- show_icon: true
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: true
- slider_live_update: false
- styles: |-
- .bubble-button-card:after {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- line-height: 0;
- left: 38px;
- bottom: 4px;
- z-index: 1;
- line-height: 0;
- background-color: ${hass.states['sensor.wiser_lts_heating_demand_living_room'].state > 0 ? 'var(--orange-color)' : 'gray'}!important;
- content: ${hass.states['sensor.wiser_lts_heating_demand_living_room'].state > 0 ? 'url("https://api.iconify.design/mdi/heater.svg?color=white&width=12")' : 'url("https://api.iconify.design/mdi/heater-disabled.svg?color=white&width=12")'}!important;
- width: var(--mush-badge-size, 16px);
- height: var(--mush-badge-size, 16px);
- border-radius: var(--mush-badge-border-radius, 50%);
- }
- .bubble-button-card:before {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- left: 38px;
- top: 4px;
- z-index: 1;
- line-height: 0;
- background-color: ${hass.states['binary_sensor.living_room_door_contact'].state === 'on' ? 'var(--primary-color)' : 'gray'}!important;
- content: ${hass.states['binary_sensor.living_room_door_contact'].state === 'on' ? 'url("https://api.iconify.design/mdi/door-open.svg?color=white&width=12")' : 'url("https://api.iconify.design/mdi/door-closed.svg?color=white&width=12")'}!important;
- width: var(--mush-badge-size, 16px);
- height: var(--mush-badge-size, 16px);
- border-radius: var(--mush-badge-border-radius, 50%);
- }
- sub_button:
- - entity: light.living_room_lights
- tap_action:
- action: perform-action
- target:
- entity_id: light.living_room_lights
- perform_action: light.turn_on
- data:
- brightness_pct: 10
- icon: mdi:lightbulb-on-40
- name: ""
- show_name: false
- show_icon: true
- show_state: false
- state_background: true
- show_attribute: false
- attribute: brightness
- show_background: true
- - entity: light.living_room_lights
- icon: mdi:lightbulb-on-80
- show_background: true
- light_background: true
- show_icon: true
- state_background: true
- tap_action:
- action: perform-action
- perform_action: light.turn_on
- target:
- entity_id: light.living_room_lights
- data:
- brightness_pct: 40
- - entity: light.dig2go
- icon: mdi:led-strip-variant
- show_attribute: false
- show_state: false
- show_last_changed: false
- show_name: false
- tap_action:
- action: toggle
- hold_action:
- action: more-info
- state_background: true
- light_background: true
- show_background: true
- - entity: media_player.lg_webos_tv_uh605v
- show_background: true
- visibility:
- - condition: state
- entity: media_player.lg_webos_tv_uh605v
- state_not: "off"
- state_background: true
- icon: mdi:television
- show_name: false
- show_icon: true
- show_attribute: false
- - entity: media_player.google_nest_speaker
- visibility:
- - condition: state
- entity: media_player.google_nest_speaker
- state_not: "off"
- - entity: binary_sensor.presence_sensor_living_room_presence
- icon: mdi:motion-sensor
- show_background: false
- state_background: false
- visibility:
- - condition: state
- entity: binary_sensor.presence_sensor_living_room_presence
- state: "on"
- show_state: false
- show_last_changed: false
- show_attribute: false
- show_icon: true
- - entity: climate.wiser_living_room
- show_icon: false
- show_state: false
- show_last_changed: false
- show_name: false
- state_background: true
- show_background: false
- show_attribute: true
- attribute: current_temperature
- - entity: sensor.wiser_lts_humidity_living_room
- show_icon: false
- show_state: true
- show_background: false
- card_layout: large-2-rows
- use_accent_color: true
- name: Living room
- tap_action:
- action: toggle
- hold_action:
- action: more-info
- grid_options:
- columns: 12
- rows: 1
- attribute: brightness
- icon: mdi:light-recessed
- - type: custom:bubble-card
- card_type: button
- button_type: switch
- entity: light.kitchen_lights_all
- show_icon: true
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: true
- slider_live_update: false
- styles: ".bubble-button-card:after { \n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n left: 38px;\n bottom: 4px;\n z-index: 1;\n line-height: 0;\n background-color: ${hass.states['sensor.wiser_lts_heating_demand_kitchen'].state > 0 ? 'var(--orange-color)' : 'gray'}!important;\n content: ${hass.states['sensor.wiser_lts_heating_demand_kitchen'].state > 0 ? 'url(\"https://api.iconify.design/mdi/heater.svg?color=white&width=12\")' : 'url(\"https://api.iconify.design/mdi/heater-disabled.svg?color=white&width=12\")'}!important;\n width: var(--mush-badge-size, 16px);\n height: var(--mush-badge-size, 16px);\n border-radius: var(--mush-badge-border-radius, 50%);\n }\n.bubble-button-card:before { \n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n left: 38px;\n top: 4px;\n z-index: 1;\n line-height: 0;\n background-color: ${hass.states['binary_sensor.utility_room_door_contact'].state === 'on' ? 'var(--primary-color)' : 'gray'}!important;\n content: ${hass.states['binary_sensor.utility_room_door_contact'].state === 'on' ? 'url(\"https://api.iconify.design/mdi/door-open.svg?color=white&width=12\")' : 'url(\"https://api.iconify.design/mdi/door-closed.svg?color=white&width=12\")'}!important;\n width: var(--mush-badge-size, 16px);\n height: var(--mush-badge-size, 16px);\n border-radius: var(--mush-badge-border-radius, 50%);\n }\n#Place all the DOM changing stuff on the bottom\n ${(() => {\n //Getting the timer-data from hass and saving as local variable\n const timerEntity = hass.states['timer.kitchen_lights_timer'];\n \n //Saving the now as a Date variable so we can calculate the difference \n const now = new Date(); \n \n //Preparing the result \n let result = \"\";\n\n \ttry {\n \t const endTime = new Date(timerEntity.attributes.finishes_at); //Taking endtime from timer-entity and making a date-time from it \n \t const runningTime = Math.round((endTime - now)/1000); //Calculating the difference\n const minutes = Math.floor(runningTime / 60); //Distilling the minutes from it \n const remainingSeconds = runningTime % 60; //Save the rest as seconds\n\n if(isNaN(runningTime) && timerEntity.state !='paused')\n {result = timerEntity.attributes.duration;} //if not running and not paused show initial value\n else if(timerEntity.state==='paused')\n {result = timerEntity.attributes.remaining;} // if paused show remaining value\n else\n {result = minutes + \":\" + (\"0\" + remainingSeconds).slice(-2) ;} //if running show remaining seconds\n \t} \n \tcatch (error) { \n result = timerEntity.attributes.duration; //if something went wrong show initial value\n }\n \n //writing to the sub-button\n card.querySelector('.bubble-sub-button-4 .bubble-sub-button-name-container').innerText = result; \n }\n )()}"
- sub_button:
- - entity: media_player.google_mini_speaker
- visibility:
- - condition: state
- entity: media_player.google_mini_speaker
- state_not: "off"
- - entity: binary_sensor.kitchen_presence_sensor_presence
- icon: mdi:motion-sensor
- show_background: false
- state_background: false
- visibility:
- - condition: state
- entity: binary_sensor.kitchen_presence_sensor_presence
- state: "on"
- show_state: false
- show_last_changed: false
- show_attribute: false
- show_icon: true
- - entity: climate.wiser_kitchen
- show_icon: false
- show_state: false
- show_last_changed: false
- show_name: false
- state_background: true
- show_background: false
- show_attribute: true
- attribute: current_temperature
- - entity: timer.kitchen_lights_timer
- show_last_changed: false
- show_state: false
- show_name: false
- show_icon: true
- visibility:
- - condition: state
- entity: timer.kitchen_lights_timer
- state: active
- show_attribute: true
- attribute: remaining
- state_background: false
- show_background: true
- card_layout: large
- use_accent_color: true
- name: Kitchen & Utility
- tap_action:
- action: toggle
- hold_action:
- action: more-info
- grid_options:
- columns: 12
- rows: 1
- icon: ""
- - type: custom:bubble-card
- card_type: button
- button_type: switch
- entity: light.studio_lights_ceiling
- show_icon: true
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: false
- slider_live_update: false
- styles: |-
- .bubble-button-card:before {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- left: 38px;
- top: 4px;
- z-index: 1;
- line-height: 0;
- background-color: ${hass.states['binary_sensor.back_door_contact'].state === 'on' ? 'var(--primary-color)' : 'gray'}!important;
- content: ${hass.states['binary_sensor.back_door_contact'].state === 'on' ? 'url("https://api.iconify.design/mdi/door-open.svg?color=white&width=12")' : 'url("https://api.iconify.design/mdi/door-closed.svg?color=white&width=12")'}!important;
- width: var(--mush-badge-size, 16px);
- height: var(--mush-badge-size, 16px);
- border-radius: var(--mush-badge-border-radius, 50%);
- }
- sub_button: []
- card_layout: large
- use_accent_color: true
- name: Studio
- tap_action:
- action: toggle
- hold_action:
- action: more-info
- grid_options:
- columns: 6
- rows: 1
- icon: mdi:light-recessed
- show_name: true
- - type: custom:bubble-card
- card_type: separator
- name: First floor
- card_layout: large
- - type: custom:bubble-card
- card_type: button
- button_type: switch
- entity: light.landing_light
- show_icon: true
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: true
- slider_live_update: false
- styles: ""
- sub_button:
- - entity: binary_sensor.stairs2_motion_sensor_occupancy
- icon: mdi:motion-sensor
- show_background: false
- state_background: false
- visibility:
- - condition: state
- entity: binary_sensor.stairs2_motion_sensor_occupancy
- state: "on"
- show_state: false
- show_last_changed: false
- show_attribute: false
- show_icon: true
- card_layout: large
- use_accent_color: true
- name: Stairs & Landing
- tap_action:
- action: toggle
- hold_action:
- action: more-info
- grid_options:
- columns: 6
- rows: 1
- icon: ""
- - type: custom:bubble-card
- card_type: button
- button_type: slider
- entity: light.bed_led
- show_icon: true
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: true
- slider_live_update: false
- styles: ".bubble-button-card:after { \n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n left: 38px;\n bottom: 4px;\n z-index: 1;\n line-height: 0;\n background-color: ${hass.states['sensor.wiser_lts_heating_demand_main_bedroom'].state > 0 ? 'var(--orange-color)' : 'gray'}!important;\n content: ${hass.states['sensor.wiser_lts_heating_demand_main_bedroom'].state > 0 ? 'url(\"https://api.iconify.design/mdi/heater.svg?color=white&width=12\")' : 'url(\"https://api.iconify.design/mdi/heater-disabled.svg?color=white&width=12\")'}!important;\n width: var(--mush-badge-size, 16px);\n height: var(--mush-badge-size, 16px);\n border-radius: var(--mush-badge-border-radius, 50%);\n }\n#Place all the DOM changing stuff on the bottom\n ${(() => {\n //Getting the timer-data from hass and saving as local variable\n const timerEntity = hass.states['timer.bed_heater_timer'];\n \n //Saving the now as a Date variable so we can calculate the difference \n const now = new Date(); \n \n //Preparing the result \n let result = \"\";\n\n \ttry {\n \t const endTime = new Date(timerEntity.attributes.finishes_at); //Taking endtime from timer-entity and making a date-time from it \n \t const runningTime = Math.round((endTime - now)/1000); //Calculating the difference\n const minutes = Math.floor(runningTime / 60); //Distilling the minutes from it \n const remainingSeconds = runningTime % 60; //Save the rest as seconds\n\n if(isNaN(runningTime) && timerEntity.state !='paused')\n {result = timerEntity.attributes.duration;} //if not running and not paused show initial value\n else if(timerEntity.state==='paused')\n {result = timerEntity.attributes.remaining;} // if paused show remaining value\n else\n {result = minutes + \":\" + (\"0\" + remainingSeconds).slice(-2) ;} //if running show remaining seconds\n \t} \n \tcatch (error) { \n result = timerEntity.attributes.duration; //if something went wrong show initial value\n }\n \n //writing to the sub-button\n card.querySelector('.bubble-sub-button-7 .bubble-sub-button-name-container').innerText = result; \n }\n )()}"
- sub_button:
- - entity: light.bed_led
- icon: mdi:power-sleep
- show_background: true
- tap_action:
- action: perform-action
- target:
- entity_id: light.bed_led
- perform_action: light.turn_on
- data:
- brightness_pct: 1
- rgb_color:
- - 255
- - 0
- - 0
- - entity: light.bed_led
- icon: mdi:diaper-outline
- show_background: true
- tap_action:
- action: perform-action
- perform_action: light.turn_on
- target:
- entity_id: light.bed_led
- data:
- rgb_color:
- - 255
- - 0
- - 0
- brightness_pct: 10
- hold_action:
- action: more-info
- - entity: sensor.bedroom_temp_test_temperature
- show_icon: true
- show_state: true
- show_last_changed: false
- show_name: false
- state_background: true
- show_background: false
- show_attribute: false
- icon: mdi:door
- - entity: sensor.bedroom_temp_test_humidity
- show_state: true
- state_background: false
- show_background: false
- show_icon: true
- show_name: false
- icon: mdi:door
- - entity: climate.wiser_main_bedroom
- show_attribute: true
- attribute: current_temperature
- show_background: false
- show_icon: true
- icon: mdi:window-closed-variant
- show_arrow: false
- - entity: switch.bed_heater_plug
- icon: fas:bed-pulse
- state_background: true
- show_background: true
- show_state: false
- show_attribute: false
- tap_action:
- action: toggle
- show_name: false
- show_icon: true
- show_last_changed: false
- - entity: timer.bed_heater_timer
- show_icon: true
- state_background: false
- show_background: true
- show_attribute: true
- attribute: remaining
- visibility:
- - condition: state
- entity: timer.bed_heater_timer
- state: active
- card_layout: large-2-rows
- use_accent_color: true
- name: Bedroom
- tap_action:
- action: toggle
- hold_action:
- action: more-info
- grid_options:
- columns: 12
- rows: 1
- icon: mdi:led-strip-variant
- - type: custom:bubble-card
- card_type: button
- button_type: switch
- entity: light.guest_bedroom_lights
- show_icon: true
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: true
- slider_live_update: false
- styles: |-
- .bubble-button-card:after {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- line-height: 0;
- left: 38px;
- bottom: 4px;
- z-index: 1;
- line-height: 0;
- background-color: ${hass.states['sensor.wiser_lts_heating_demand_guest_bedroom'].state > 0 ? 'var(--orange-color)' : 'gray'}!important;
- content: ${hass.states['sensor.wiser_lts_heating_demand_guest_bedroom'].state > 0 ? 'url("https://api.iconify.design/mdi/heater.svg?color=white&width=12")' : 'url("https://api.iconify.design/mdi/heater-disabled.svg?color=white&width=12")'}!important;
- width: var(--mush-badge-size, 16px);
- height: var(--mush-badge-size, 16px);
- border-radius: var(--mush-badge-border-radius, 50%);
- }
- sub_button:
- - entity: sensor.guest_room_weather_temperature
- show_background: false
- show_icon: false
- show_state: true
- - entity: sensor.guest_room_weather_humidity
- show_state: true
- show_icon: false
- state_background: false
- show_background: false
- - entity: sensor.guest_room_rad_test_temperature
- show_last_changed: false
- show_icon: false
- state_background: false
- show_background: false
- show_state: true
- - entity: sensor.guest_room_rad_test_humidity
- state_background: false
- show_background: false
- show_state: true
- show_icon: false
- - entity: climate.wiser_guest_bedroom
- show_icon: true
- show_state: false
- show_last_changed: false
- show_name: false
- state_background: true
- show_background: false
- show_attribute: true
- attribute: current_temperature
- icon: mdi:window-closed-variant
- card_layout: large-2-rows
- use_accent_color: true
- name: Guests
- tap_action:
- action: toggle
- hold_action:
- action: more-info
- grid_options:
- columns: 12
- rows: 1
- icon: ""
- - type: custom:bubble-card
- card_type: button
- button_type: switch
- entity: light.bathroom_lights
- show_icon: true
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: true
- slider_live_update: false
- styles: |-
- .bubble-button-card:before {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- left: 38px;
- top: 4px;
- z-index: 1;
- line-height: 0;
- background-color: ${hass.states['binary_sensor.bathroom_door_contact'].state === 'on' ? 'var(--primary-color)' : 'gray'}!important;
- content: ${hass.states['binary_sensor.bathroom_door_contact'].state === 'on' ? 'url("https://api.iconify.design/mdi/door-open.svg?color=white&width=12")' : 'url("https://api.iconify.design/mdi/door-closed.svg?color=white&width=12")'}!important;
- width: var(--mush-badge-size, 16px);
- height: var(--mush-badge-size, 16px);
- border-radius: var(--mush-badge-border-radius, 50%);
- }
- sub_button:
- - entity: input_boolean.bathroom_busy
- icon: mdi:motion-sensor
- show_background: false
- state_background: false
- visibility:
- - condition: state
- entity: input_boolean.bathroom_busy
- state: "on"
- show_state: false
- show_last_changed: false
- show_attribute: false
- show_icon: true
- - entity: sensor.weather_station_temperature
- show_icon: false
- show_state: true
- show_last_changed: false
- show_name: false
- state_background: true
- show_background: false
- show_attribute: false
- attribute: current_temperature
- - entity: sensor.weather_station_humidity
- show_icon: false
- show_state: true
- show_background: false
- card_layout: large
- use_accent_color: true
- name: Bathroom
- tap_action:
- action: toggle
- hold_action:
- action: more-info
- grid_options:
- columns: 12
- rows: 1
- icon: mdi:light-recessed
- - type: custom:bubble-card
- card_type: cover
- entity: cover.living_room_blinds_all
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: true
- attribute: current_position
- scrolling_effect: true
- name: Living room blinds
- - type: custom:bubble-card
- card_type: cover
- entity: cover.studio_blind_door
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: true
- attribute: current_position
- scrolling_effect: true
- - type: custom:bubble-card
- card_type: cover
- entity: cover.studio_blind_1
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: true
- attribute: current_position
- scrolling_effect: true
- - type: custom:bubble-card
- card_type: cover
- entity: cover.studio_blind_2
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: true
- attribute: current_position
- scrolling_effect: true
- - type: custom:bubble-card
- card_type: cover
- entity: cover.bedroom_blind
- force_icon: false
- show_state: false
- show_last_changed: false
- show_attribute: true
- attribute: current_position
- scrolling_effect: true
- - type: vertical-stack
- cards:
- - type: custom:bubble-card
- card_type: pop-up
- hash: "#test"
- button_type: slider
- entity: cover.bedroom_blind