# ${card.querySelector('.bubble-state').innerText = "It's currently " + hass.states['weather.forecast_home'].state} # Change Entity Status string change show_state to false --- title: Testing icon: mdi:test-tube panel: true visible: - user: 1614b22cbef54f979741cf8a6b3413ec # Alex cards: - type: custom:layout-card layout_type: custom:vertical-layout layout: max_cols: 3 cards: - type: vertical-stack cards: - type: custom:bubble-card card_type: separator # name: Kitchen icon: mdi:countertop-outline sub_button: - name: Temp icon: mdi:thermometer-lines entity: sensor.climate_kitchen_01_temperature show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Humidity icon: mdi:water-percent entity: sensor.climate_kitchen_01_humidity show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Light Level icon: mdi:weather-sunny entity: sensor.presence_kitchen_light_level_2 show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: PM2.5 icon: mdi:blur entity: sensor.climate_kitchen_02_pm25 show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: button button_type: slider card_layout: normal name: Light entity: input_boolean.kitchen_light_state icon: mdi:lightbulb-group show_state: true show_background: true button_action: tap_action: action: toggle sub_button: - icon: mdi:lightbulb-group show_background: true tap_action: action: call-service service: input_select.select_option service_data: entity_id: input_select.kitchen_scenes option: "All" - icon: mdi:countertop-outline show_background: true tap_action: action: call-service service: input_select.select_option service_data: entity_id: input_select.kitchen_scenes option: "Work Zone Only" - icon: mdi:food-turkey show_background: true tap_action: action: call-service service: input_select.select_option service_data: entity_id: input_select.kitchen_scenes option: "Dinning Zone Only" - icon: mdi:ceiling-light-multiple show_background: true tap_action: action: call-service service: input_select.select_option service_data: entity_id: input_select.kitchen_scenes option: "Ceiling Only" styles: | .bubble-button-background { opacity: 1 !important; background-color: rgb(229, 229, 229) !important; } .bubble-sub-button-1 { background: white !important; } .bubble-sub-button-1 > ha-icon { color: ${hass.states['input_select.kitchen_scenes'].state === 'All' ? 'rgb(255, 152, 0)' : 'grey'} !important; } .bubble-sub-button-2 { background: white !important; } .bubble-sub-button-2 > ha-icon { color: ${hass.states['input_select.kitchen_scenes'].state === 'Work Zone Only' ? 'rgb(255, 152, 0)' : 'grey'} !important; } .bubble-sub-button-3 { background: white !important; } .bubble-sub-button-3 > ha-icon { color: ${hass.states['input_select.kitchen_scenes'].state === 'Dinning Zone Only' ? 'rgb(255, 152, 0)' : 'grey'} !important; } .bubble-sub-button-4 { background: white !important; } .bubble-sub-button-4 > ha-icon { color: ${hass.states['input_select.kitchen_scenes'].state === 'Ceiling Only' ? 'rgb(255, 152, 0)' : 'grey'} !important; } - type: custom:bubble-card card_type: separator icon: mdi:countertop-outline sub_button: - name: People icon: mdi:account-group entity: sensor.kitchen_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false tap_action: action: data entity_id: image.kitchen_person - name: Cats icon: mdi:cat entity: sensor.kitchen_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:sofa sub_button: - name: People icon: mdi:account-group entity: sensor.living_room_01_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.living_room_01_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:sofa sub_button: - name: People icon: mdi:account-group entity: sensor.living_room_02_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.living_room_02_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:stairs sub_button: - name: People icon: mdi:account-group entity: sensor.stairway_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.stairway_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:bed-king sub_button: - name: People icon: mdi:account-group entity: sensor.bedroom_master_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.bedroom_master_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:bed sub_button: - name: People icon: mdi:account-group entity: sensor.bedroom_max_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.bedroom_max_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:bed sub_button: - name: People icon: mdi:account-group entity: sensor.bedroom_olivia_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.bedroom_olivia_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:garage-variant sub_button: - name: People icon: mdi:account-group entity: sensor.garage_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.garage_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:home-circle-outline sub_button: - name: People icon: mdi:account-group entity: sensor.pergola_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.pergola_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:layout-break - type: vertical-stack cards: - 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: more-info 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: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: 'CyberPower UPS #1' entity: sensor.ups_cyberpower_01_status icon: mdi:power-plug-battery show_state: true show_attribute: true tap_action: action: more-info button_action: tap_action: action: more-info sub_button: - name: Battery entity: sensor.ups_cyberpower_01_battery_level icon: mdi:battery show_name: false show_icon: true show_state: true show_background: false - name: Time Left entity: sensor.ups_cyberpower_01_time_left icon: mdi:timer show_name: false show_icon: true show_state: true show_background: false - name: Load entity: sensor.ups_cyberpower_01_load_percentage icon: mdi:battery-arrow-down show_name: false show_icon: true show_state: true show_background: false - name: Transfers entity: sensor.ups_cyberpower_01_transfers icon: mdi:sync show_name: false show_icon: true show_state: true show_background: false styles: | .bubble-button-background { opacity: 1 !important; background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : '' } !important; } ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_01_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_01_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )} - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: 'CyberPower UPS #2' entity: sensor.ups_cyberpower_02_status icon: mdi:power-plug-battery show_state: true show_attribute: true tap_action: action: more-info button_action: tap_action: action: more-info sub_button: - name: Battery entity: sensor.ups_cyberpower_02_battery_level icon: mdi:battery show_name: false show_icon: true show_state: true show_background: false - name: Time Left entity: sensor.ups_cyberpower_02_time_left icon: mdi:timer show_name: false show_icon: true show_state: true show_background: false - name: Load entity: sensor.ups_cyberpower_02_load_percentage icon: mdi:battery-arrow-down show_name: false show_icon: true show_state: true show_background: false - name: Transfers entity: sensor.ups_cyberpower_02_transfers icon: mdi:sync show_name: false show_icon: true show_state: true show_background: false styles: | .bubble-button-background { opacity: 1 !important; background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : '' } !important; } ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_02_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_02_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )} - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: 'CyberPower UPS #3' entity: sensor.ups_cyberpower_03_status icon: mdi:power-plug-battery show_state: true show_attribute: true tap_action: action: more-info button_action: tap_action: action: more-info sub_button: - name: Battery entity: sensor.ups_cyberpower_03_battery_level icon: mdi:battery show_name: false show_icon: true show_state: true show_background: false - name: Time Left entity: sensor.ups_cyberpower_03_time_left icon: mdi:timer show_name: false show_icon: true show_state: true show_background: false - name: Load entity: sensor.ups_cyberpower_03_load_percentage icon: mdi:battery-arrow-down show_name: false show_icon: true show_state: true show_background: false - name: Transfers entity: sensor.ups_cyberpower_03_transfers icon: mdi:sync show_name: false show_icon: true show_state: true show_background: false styles: | .bubble-button-background { opacity: 1 !important; background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : '' } !important; } ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_03_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_03_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )} - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: 'CyberPower UPS #4' entity: sensor.ups_cyberpower_04_status icon: mdi:power-plug-battery show_state: true show_attribute: true tap_action: action: more-info button_action: tap_action: action: more-info sub_button: - name: Battery entity: sensor.ups_cyberpower_04_battery_level icon: mdi:battery show_name: false show_icon: true show_state: true show_background: false - name: Time Left entity: sensor.ups_cyberpower_04_time_left icon: mdi:timer show_name: false show_icon: true show_state: true show_background: false - name: Load entity: sensor.ups_cyberpower_04_load_percentage icon: mdi:battery-arrow-down show_name: false show_icon: true show_state: true show_background: false - name: Transfers entity: sensor.ups_cyberpower_04_transfers icon: mdi:sync show_name: false show_icon: true show_state: true show_background: false styles: | .bubble-button-background { opacity: 1 !important; background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : state === 'ONBATT' ? 'rgb(255, 221, 153)' : '' } !important; } ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_04_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_04_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )} - type: custom:layout-break - type: vertical-stack cards: - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: Energy entity: sensor.power_house_total_1mon icon: mdi:transmission-tower show_state: true button_action: tap_action: action: navigate navigation_path: '#energy' sub_button: - entity: sensor.power_house_total_1d show_background: false show_state: true - entity: sensor.power_house_total_1mon show_state: true show_background: false icon: mdi:calendar-week - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: Gas entity: sensor.power_house_total_1mon icon: mdi:meter-gas show_state: true button_action: tap_action: action: navigate navigation_path: '#gas' sub_button: - entity: sensor.gas_daily show_background: false show_state: true - entity: sensor.gas_monthly show_state: true show_background: false icon: mdi:calendar-week - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: Water entity: sensor.water_monthly icon: mdi:cup-water show_state: true button_action: tap_action: action: navigate navigation_path: '#water' sub_button: - entity: sensor.water_daily show_background: false show_state: true - entity: sensor.water_monthly show_state: true show_background: false icon: mdi:calendar-week - type: custom:bubble-card card_type: button button_type: switch card_layout: normal name: Pioneer VSX-LX505 entity: media_player.onkyo_receiver icon: mdi:audio-video show_state: true button_action: tap_action: action: toggle sub_button: - entity: script.receiver_switch_to_shield_tv icon: mdi:television-classic show_background: true show_state: false tap_action: action: toggle - entity: script.receiver_switch_to_playstation icon: mdi:controller show_background: true show_state: false tap_action: action: toggle - entity: script.receiver_switch_to_security icon: mdi:camera-metering-matrix show_background: true show_state: false tap_action: action: toggle - entity: script.receiver_switch_to_windows icon: mdi:laptop show_background: true show_state: false tap_action: action: toggle - 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: name name: Kitchen icon: mdi:fridge button_action: tap_action: action: navigate navigation_path: '#kitchen' - type: vertical-stack cards: - type: custom:bubble-card card_type: pop-up hash: '#kitchen' name: Kitchen icon: mdi:fridge entity: light.kitchen_sink_01