Selsker Dashboard #667

willliamchan · 2024-07-26T16:45:47Z

willliamchan
Jul 26, 2024

Hi All

Hey Reddit fam! 🌟

First off, a massive thank you to everyone who's shown interest in my dashboard! You guys rock! 🎉

So, here's the scoop on how it's built. I figured I'd share it here for a couple of reasons. One, it's all about Bubble Cards, and where better to chat about it than right here in the repo? And two, I'm no expert in Home Assistant, coding, or any of that jazz. So, I thought, why not leave it open for the real pros to chime in?

Dive in, have a look, and let's get this discussion rolling! 🚀

Custom Cards that are in use: -
Custom brand icons
Bubble
card-mod (I can't say for sure now)
Bubble Card
KNX User Forum Icon Set
Harmony Card

Dashboard

views:
  - title: Home
    cards: []
    type: sections
    max_columns: 1
    sections:
      - type: grid
        cards:
          - type: vertical-stack
            cards:
              - type: vertical-stack
                cards:
                  - type: custom:bubble-card
                    card_type: button
                    button_type: state
                    name: s e l s k e r
                    scrolling_effect: false
                    show_icon: true
                    show_name: true
                    sub_button:
                      - entity: binary_sensor.internet_ping
                        show_background: false
                        show_state: true
                        name: Internet
                        icon: mdi:web
                        double_tap_action:
                          action: none
                        tap_action:
                          action: navigate
                          navigation_path: '#systemtools'
                      - entity: >-
                          sensor.electricity_current_demand
                        name: Energy
                        show_background: false
                        show_name: false
                        show_state: true
                        tap_action:
                          action: navigate
                          navigation_path: '#energy'
                      - entity: input_select.ring_security
                        show_background: false
                        show_state: true
                        name: Alarm
                        show_last_changed: false
                        show_attribute: false
                        show_icon: true
                        show_arrow: false
                      - entity: input_select.scene_selector
                        show_icon: true
                        show_background: false
                        show_name: false
                        show_state: true
                        show_arrow: false
                        name: Scene
                    card_layout: large-2-rows
                    entity: sensor.bubble_card_dashboard_weather
                    styles: |-
                      .bubble-button-card-container {
                        background: none;
                        font-size: 15px !important;
                        margin-left: 2px;
                      }
                      .bubble-icon-container {
                          background: none;
                          border-radius: 0;
                        }
                      .bubble-sub-button {
                        font-size: 11px !important;
                        margin-right: -16px;
                      }
                    show_attribute: true
                    attribute: apparent_temperature
                    button_action:
                      tap_action:
                        action: none
                      double_tap_action:
                        action: none
                      hold_action:
                        action: none
                    tap_action:
                      action: navigate
                      navigation_path: '#weather'
                    double_tap_action:
                      action: none
                    hold_action:
                      action: none
                  - type: custom:bubble-card
                    card_type: empty-column
                  - square: false
                    type: grid
                    cards:
                      - type: custom:bubble-card
                        card_type: button
                        button_type: state
                        entity: person.1
                        name: ' '
                        show_name: true
                        show_state: true
                        show_attribute: false
                        scrolling_effect: 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
                        sub_button:
                          - entity: sensor.1_iphone_ble_location
                            show_background: false
                            show_icon: false
                            show_last_changed: false
                            show_state: true
                            show_attribute: false
                            tap_action:
                              action: none
                        layout_options:
                          grid_columns: 2
                          grid_rows: 1
                        styles: |
                          .card-content {
                            width: 75%;
                            margin-left: 30px !important
                          }
                          .bubble-button-card-container {
                            background: none;
                          }
                          .bubble-sub-button {
                            justify-content: start !important;
                          }
                          .bubble-sub-button-container {
                            width: 30%;
                            justify-content: space-around !important;
                          }
                          .bubble-name-container {
                            margin-right: 0px !important;
                          }
                      - type: custom:bubble-card
                        card_type: button
                        button_type: state
                        entity: person.2
                        name: ' '
                        show_name: true
                        show_state: true
                        show_attribute: false
                        scrolling_effect: 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
                        sub_button:
                          - entity: sensor.2_iphone_ble_location
                            show_background: false
                            show_icon: false
                            show_last_changed: false
                            show_state: true
                            show_attribute: false
                            tap_action:
                              action: none
                        layout_options:
                          grid_columns: 2
                          grid_rows: 1
                        styles: |
                          .card-content {
                            width: 75%;
                            margin-left: 22px !important
                          }
                          .bubble-button-card-container {
                            background: none;
                          }
                          .bubble-sub-button {
                            justify-content: start !important;
                          }
                          .bubble-sub-button-container {
                            width: 30%;
                            justify-content: space-around !important;
                          }
                          .bubble-name-container {
                            margin-right: 0px !important;
                          }
                    columns: 2
                  - type: custom:bubble-card
                    card_type: empty-column
                  - type: custom:bubble-card
                    card_type: empty-column
              - type: vertical-stack
                cards:
                  - type: custom:bubble-card
                    card_type: separator
                    name: o v e r v i e w
                    styles: |-
                      * { 
                        font-size: 14px !important;
                      }
                  - square: false
                    type: grid
                    cards:
                      - type: custom:bubble-card
                        card_type: button
                        button_type: state
                        entity: binary_sensor.condition_locks
                        scrolling_effect: false
                        show_last_changed: false
                        name: ' Locks'
                        show_state: false
                        tap_action:
                          action: navigate
                          navigation_path: '#locks'
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                        button_action:
                          tap_action:
                            action: navigate
                            navigation_path: '#locks'
                          double_tap_action:
                            action: none
                          hold_action:
                            action: none
                        styles: |-
                          ha-card { 
                            font-size: 14px;
                            opacity: 0.95;
                          }

                          .bubble-button-card-container {
                            background: ${hass.states['binary_sensor.condition_locks'].state === 'on' ? '#8d7099' : ''} !important;
                          }

                          .bubble-icon {
                            opacity: ${hass.states['lock.all_locks'].state === 'unlocked' ? '1' : hass.states['lock.all_locks'].state === 'unlocking' ? '1' : hass.states['lock.all_locks'].state === 'locking' ? '1' : '0.5'} !important;
                              color: ${hass.states['lock.all_locks'].state === 'unlocked' ? '#FFFFFF' : hass.states['lock.all_locks'].state === 'unlocking' ? '#FFFFFF' : hass.states['lock.all_locks'].state === 'locking' ? '#FFFFFF' : ''} !important;
                          }

                          ${hass.states['lock.all_locks'].state === 'unlocked' ?
                          icon.setAttribute("icon", "mdi:lock-open") :
                          icon.setAttribute("icon", "mdi:lock")};
                        card_layout: normal
                        columns: 2
                      - type: custom:bubble-card
                        card_type: button
                        button_type: state
                        entity: sensor.climate_status
                        'false': []
                        scrolling_effect: false
                        name: Climate
                        show_state: false
                        tap_action:
                          action: navigate
                          navigation_path: '#climate'
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                        button_action:
                          tap_action:
                            action: navigate
                            navigation_path: '#climate'
                          double_tap_action:
                            action: none
                          hold_action:
                            action: none
                        icon: mdi:home-thermometer
                        styles: >-
                          ha-card { 
                            font-size: 14px;
                            opacity: 0.95;
                          }


                          .bubble-button-card-container {
                            background: ${hass.states['sensor.climate_status'].state === 'Cooling' ? '#517d9c' :
                                          hass.states['sensor.climate_status'].state === 'Heating' ? '#e38d68' :
                            ''} !important;
                          }


                          .bubble-icon {
                            opacity: ${hass.states['sensor.climate_status'].state !== 'Off' ? '1' : '0.5'} !important;
                            color: ${hass.states['sensor.climate_status'].state !== 'Off' ? '#FFFFFF' : ''} !important;
                          }


                          ${state == 'Cooling' ? icon.setAttribute("icon",

                          "mdi:snowflake-thermometer") : state == 'Heating' ?

                          icon.setAttribute("icon", "mdi:sun-thermometer") :

                          icon.setAttribute("icon",
                          "mdi:home-thermometer-outline")};
                        card_layout: normal
                        columns: 2
                      - type: custom:bubble-card
                        card_type: button
                        button_type: state
                        name: Doors
                        icon: ''
                        scrolling_effect: false
                        show_icon: true
                        tap_action:
                          action: navigate
                          navigation_path: '#doorswindows'
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                        button_action:
                          tap_action:
                            action: navigate
                            navigation_path: '#doorswindows'
                          double_tap_action:
                            action: none
                          hold_action:
                            action: none
                        entity: binary_sensor.condition_doors
                        show_state: false
                        styles: >-
                          ha-card { 
                            font-size: 14px;
                            opacity: 0.95;
                          }


                          .bubble-button-card-container {
                            background: ${hass.states['binary_sensor.condition_doors'].state === 'on' ? '#8d7099' : ''} !important;
                          }


                          .bubble-icon {
                            opacity: ${hass.states['binary_sensor.all_doors_windows'].state === 'on' ? '1' : '0.5'} !important;
                              color: ${hass.states['binary_sensor.all_doors_windows'].state === 'on' ? '#FFFFFF' : ''} !important;
                          }


                          ${hass.states['binary_sensor.all_doors_windows'].state
                          === 'on' ?

                          icon.setAttribute("icon", "mdi:door-open") :

                          icon.setAttribute("icon", "mdi:door-closed")};
                        card_layout: normal
                        columns: 2
                      - type: custom:bubble-card
                        card_type: button
                        button_type: state
                        entity: binary_sensor.lights
                        'false': []
                        scrolling_effect: false
                        name: Lights
                        show_state: false
                        tap_action:
                          action: navigate
                          navigation_path: '#lights'
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                        button_action:
                          tap_action:
                            action: navigate
                            navigation_path: '#lights'
                          double_tap_action:
                            action: none
                          hold_action:
                            action: none
                        icon: mdi:lamps
                        styles: >-
                          ha-card { 
                            font-size: 14px;
                            opacity: 0.95;
                          }


                          .bubble-button-card-container {
                            background: ${hass.states['binary_sensor.lights'].state !== 'off' ? '#c2b280' : ''} !important;
                          }


                          ${state !== 'off' ? icon.setAttribute("icon",
                          "mdi:lamps") :

                          icon.setAttribute("icon", "mdi:lamps-outline")};
                        card_layout: normal
                        columns: 2
                      - type: custom:bubble-card
                        card_type: button
                        button_type: state
                        scrolling_effect: false
                        name: Petkit
                        show_state: false
                        tap_action:
                          action: navigate
                          navigation_path: '#petkit'
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                        button_action:
                          tap_action:
                            action: navigate
                            navigation_path: '#petkit'
                          double_tap_action:
                            action: none
                          hold_action:
                            action: none
                        icon: mdi:cat
                        entity: binary_sensor.petkit
                        styles: >-
                          ha-card { 
                            font-size: 14px;
                            opacity: 0.95;
                          } .bubble-button-card-container {
                            background: ${hass.states['binary_sensor.petkit'].state === 'on' ? '#bf7355' : ''} !important;
                          } .bubble-icon {
                            color: ${hass.states['binary_sensor.petkit'].state === 'on' ? '#d9534f' : ''} !important;
                            opacity: ${hass.states['binary_sensor.petkit'].state === 'on' ? '1' : hass.states['binary_sensor.petkit'].state === 'on' ? '0.5' : ''} !important;
                          } ${state !== 'off' ?
                          icon.setAttribute("icon","mdi:emoticon-angry") :
                          icon.setAttribute("icon","mdi:cat")};
                        card_layout: normal
                        columns: 2
                      - type: custom:bubble-card
                        card_type: button
                        button_type: state
                        tap_action:
                          action: navigate
                          navigation_path: '#blinds'
                          service: input_select.select_next
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                        button_action:
                          tap_action:
                            action: navigate
                            navigation_path: '#blinds'
                          double_tap_action:
                            action: none
                          hold_action:
                            action: none
                        entity: sensor.blind_mode_helper
                        icon: mdi:blinds-horizontal
                        name: Blinds
                        scrolling_effect: false
                        show_state: false
                        card_layout: normal
                        show_last_changed: false
                        styles: >-
                          ha-card { 
                            font-size: 14px;
                            opacity: 0.95;
                          }


                          .bubble-button-card-container {
                            background: ${hass.states['sensor.blind_mode_helper'].state !== 'Auto' ? '#8a9ba8' :
                                          ''} !important;
                          }


                          .bubble-icon {
                            opacity: ${hass.states['cover.blinds'].state === 'open' ? '1' : hass.states['cover.blinds'].state === 'opening' ? '1' : hass.states['cover.blinds'].state === 'closing' ? '1' : '0.5'} !important;
                              color: ${hass.states['cover.blinds'].state === 'open' ? '#FFFFFF' : hass.states['cover.blinds'].state === 'opening' ? '#FFFFFF' : hass.states['cover.blinds'].state === 'closing' ? '#FFFFFF' : ''} !important;
                          }


                          ${state === 'open' ? icon.setAttribute("icon",

                          "mdi:blinds-horizontal-closed") : state == 'opening' ?

                          icon.setAttribute("icon",
                          "mdi:blinds-horizontal-closed") : state

                          == 'closing' ? icon.setAttribute("icon",

                          "mdi:blinds-horizontal-closed") :
                          icon.setAttribute("icon",

                          "mdi:blinds-horizontal")};
                        columns: 2
                      - type: custom:bubble-card
                        card_type: button
                        button_type: state
                        entity: fan.air_purifiers
                        scrolling_effect: false
                        name: Purifiers
                        show_state: false
                        tap_action:
                          action: navigate
                          navigation_path: '#airpurifier'
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                        button_action:
                          tap_action:
                            action: navigate
                            navigation_path: '#airpurifier'
                          double_tap_action:
                            action: none
                          hold_action:
                            action: none
                        icon: mdi:air-purifier
                        styles: >-
                          ha-card { 
                            font-size: 14px;
                            opacity: 0.95;
                          }


                          .bubble-button-card-container {
                            background: ${hass.states['fan.air_purifiers'].state === 'on' ? '#5a7d7c' : ''} !important;
                          }


                          ${state === 'on' ? icon.setAttribute("icon",
                          "mdi:air-purifier") :

                          icon.setAttribute("icon", "mdi:air-purifier-off")};
                        card_layout: normal
                        columns: 2
                      - type: custom:bubble-card
                        card_type: button
                        button_type: state
                        scrolling_effect: false
                        name: ''
                        show_state: false
                        tap_action:
                          action: navigate
                          navigation_path: '#vacuums'
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                        button_action:
                          tap_action:
                            action: navigate
                            navigation_path: '#vacuums'
                          double_tap_action:
                            action: none
                          hold_action:
                            action: none
                        icon: ''
                        entity: binary_sensor.vacuums
                        styles: >-
                          ha-card { 
                            font-size: 14px;
                            opacity: 0.95;
                          }


                          .bubble-button-card-container {
                            background: ${hass.states['binary_sensor.vacuums'].state === 'on' ? '#555555' : ''} !important;
                          }


                          ${state === 'on' ? icon.setAttribute("icon",
                          "mdi:robot-vacuum") :

                          icon.setAttribute("icon", "mdi:robot-vacuum-off")};
                        card_layout: normal
                        columns: 2
                    columns: 2
                  - type: custom:bubble-card
                    card_type: empty-column
                    card_layout: normal
                  - type: custom:bubble-card
                    card_type: empty-column
                    card_layout: normal
              - type: vertical-stack
                cards:
                  - type: custom:bubble-card
                    card_type: separator
                    name: f a v o r i t e s
                    styles: |-
                      * { 
                        font-size: 14px !important;
                      }
                  - square: false
                    type: grid
                    cards:
                      - type: custom:bubble-card
                        card_type: button
                        show_state: true
                        icon: mdi:television-classic
                        tap_action:
                          action: call-service
                          service: remote.toggle
                          target:
                            entity_id: remote.tv
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                        button_action:
                          tap_action:
                            action: navigate
                            navigation_path: '#tv'
                          double_tap_action:
                            action: none
                          hold_action:
                            action: none
                        show_attribute: false
                        attribute: options
                        card_layout: normal
                        styles: |-
                          ha-card { 
                            font-size: 14px;
                            opacity: 0.95;
                          }
                          .bubble-button-background {
                            background-color: ${hass.states['remote.tv'].state === 'on' ? '#D9534F' : ''} !important;
                          } .bubble-icon {
                            opacity: ${hass.states['remote.tv'].state !== 'off' ? '1' : '0.5'} !important;
                            color: ${hass.states['remote.tv'].state !== 'off' ? '#FFFFFF' : ''} !important;
                          } ${
                            hass.states['media_player.lounge_tv'].attributes.app_id === 'com.apple.TVWatchList' ? icon.setAttribute("icon","phu:apple-tv") : 
                            hass.states['media_player.lounge_tv'].attributes.app_id === 'com.firecore.infuse' ? icon.setAttribute("icon","phu:infuse-pro") : 
                            hass.states['media_player.lounge_tv'].attributes.app_id === 'com.plexapp.plex' ? icon.setAttribute("icon","phu:plex") : 
                            hass.states['media_player.lounge_tv'].attributes.app_id === 'com.google.ios.youtube' ? icon.setAttribute("icon","mdi:youtube") : 
                            hass.states['media_player.shield_android_tv'].attributes.app_id === 'com.apple.atve.androidtv.appletv' ? icon.setAttribute("icon","phu:apple-tv") : 
                            hass.states['media_player.shield_android_tv'].attributes.app_id === 'com.plexapp.android' ? icon.setAttribute("icon","phu:plex") : 
                            hass.states['media_player.shield_android_tv'].attributes.app_id === 'com.google.android.youtube.tv' ? icon.setAttribute("icon","mdi:youtube") : 
                            hass.states['remote.tv'].attributes.current_activity === 'PowerOff' ? icon.setAttribute("icon","mdi:television-off") : 
                            hass.states['remote.tv'].attributes.current_activity === 'AppleTV' ? icon.setAttribute("icon","mdi:apple") : 
                            hass.states['remote.tv'].attributes.current_activity === 'RetroPie' ? icon.setAttribute("icon","mdi:gamepad-square") : 
                            hass.states['remote.tv'].attributes.current_activity === 'EVPad' ? icon.setAttribute("icon","mdi:alpha-e-circle-outline") : 
                            hass.states['remote.tv'].attributes.current_activity === 'ShieldTV' ? icon.setAttribute("icon","mdi:alpha-n-circle-outline") : 
                            icon.setAttribute("icon","mdi:alert-circle-outline")
                           }
                        columns: 2
                        sub_button:
                          - entity: input_select.lounge_tv
                            show_background: false
                            show_name: false
                            show_icon: false
                            icon: ''
                            show_arrow: true
                            name: Media Player
                            show_last_changed: false
                            show_attribute: false
                            show_state: false
                        scrolling_effect: false
                        button_type: state
                        entity: input_select.lounge_tv
                        name: TV
                      - type: custom:bubble-card
                        card_type: button
                        button_type: state
                        show_state: true
                        icon: ''
                        tap_action:
                          action: call-service
                          service: input_button.press
                          data: {}
                          target:
                            entity_id: input_button.bedside_countdown
                        double_tap_action:
                          action: call-service
                          service: input_button.press
                          data: {}
                          target:
                            entity_id: input_button.bedside_lightup
                        hold_action:
                          action: none
                        button_action:
                          tap_action:
                            action: navigate
                            navigation_path: '#bedside'
                          double_tap_action:
                            action: none
                          hold_action:
                            action: none
                        name: Bed
                        show_last_updated: false
                        show_attribute: false
                        show_name: true
                        card_layout: normal
                        columns: 2
                        scrolling_effect: false
                        entity: sensor.bedside_status
                        attribute: friendly_name
                        show_last_changed: false
                        sub_button:
                          - entity: input_select.bedside_mode
                            show_background: false
                            show_icon: false
                            show_arrow: true
                        styles: >-
                          ha-card {
                            opacity: 0.95;
                          }


                          .bubble-button-background {
                            background-color: ${hass.states['light.bedside_lights'].state === 'on' ? '#c2b280' : ''} !important;
                          }


                          .bubble-icon {
                            opacity: ${hass.states['light.bedside_lights'].state === 'on' ? '1' : '0.6' } !important;
                            color: ${hass.states['light.bedside_lights'].state === 'on' ? '#ffffff' : '' } !important;

                          }


                          ${hass.states['light.bedside_lights'].state === 'on' ?

                          icon.setAttribute("icon", "mdi:track-light") :

                          icon.setAttribute("icon", "mdi:track-light-off")}
                          !important;
                    columns: 2
                  - type: custom:bubble-card
                    card_type: empty-column
                  - type: conditional
                    conditions:
                      - condition: state
                        entity: input_boolean.heated_airer_toggle
                        state: 'off'
                    card:
                      type: custom:bubble-card
                      card_type: button
                      entity: input_boolean.heated_airer_toggle
                      name: Airer
                      show_last_updated: false
                      tap_action:
                        action: toggle
                      double_tap_action:
                        action: none
                      hold_action:
                        action: none
                      button_action:
                        tap_action:
                          action: none
                          navigation_path: '#airerproperties'
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                      card_layout: normal
                      icon: mdi:tumble-dryer-off
                      styles: >-
                        ha-card {
                          opacity: 0.95;
                        }



                        .bubble-button-background {
                          background-color: ${state === 'on' ? '#b97a57' : ''} !important;
                        }


                        .bubble-icon {
                          opacity: ${hass.states['input_boolean.heated_airer_toggle'].state === 'on' ? '1' : hass.states['input_boolean.heated_airer_toggle'].state === 'off' ? '0.6' : '0.3'} !important;
                          color: ${hass.states['input_boolean.heated_airer_toggle'].state === 'on' ? '#ffffff' : '' } !important;
                        }


                        ${state === 'on' ? icon.setAttribute("icon",
                        "mdi:tumble-dryer")

                        : icon.setAttribute("icon", "mdi:tumble-dryer-off")};
                      scrolling_effect: false
                  - type: conditional
                    conditions:
                      - condition: state
                        entity: input_boolean.heated_airer_toggle
                        state: 'on'
                    card:
                      type: custom:bubble-card
                      card_type: button
                      entity: input_boolean.heated_airer_toggle
                      name: ' '
                      show_last_updated: false
                      tap_action:
                        action: toggle
                      double_tap_action:
                        action: none
                      hold_action:
                        action: none
                      button_action:
                        tap_action:
                          action: none
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                      sub_button:
                        - entity: sensor.bedroom_heated_airer_power
                          show_state: true
                          show_icon: false
                          show_background: false
                          scrolling_effect: false
                          tap_action:
                            action: none
                          name: Energy
                          show_name: false
                          icon: ''
                        - entity: sensor.heated_airer_h_sensor_temperature
                          icon: mdi:thermometer
                          show_state: true
                          show_background: false
                          show_icon: false
                          tap_action:
                            action: none
                          name: Temperature
                        - entity: sensor.heated_airer_h_sensor_humidity
                          icon: mdi:water-percent
                          show_state: true
                          show_background: false
                          show_icon: false
                          tap_action:
                            action: none
                          name: Humidity
                        - entity: input_select.heated_airer_weight
                          icon: mdi:hanger
                          show_state: true
                          show_attribute: false
                          show_background: false
                          tap_action:
                            action: call-service
                            service: input_select.select_next
                            data:
                              cycle: true
                            target:
                              entity_id: input_select.heated_airer_weight
                          name: Weight
                          show_arrow: false
                      card_layout: normal
                      styles: >-
                        ha-card {
                          opacity: 0.95;
                        }


                        .bubble-button-background {
                          background-color: ${state === 'on' ? '#b97a57' : ''} !important;
                        }


                        .bubble-icon {
                          opacity: ${hass.states['input_boolean.heated_airer_toggle'].state === 'on' ? '1' : hass.states['input_boolean.heated_airer_toggle'].state === 'off' ? '0.6' : '0.3'} !important;
                          color: ${hass.states['input_boolean.heated_airer_toggle'].state === 'on' ? '#ffffff' : '' } !important;
                        }


                        ${state === 'on' ? icon.setAttribute("icon",
                        "mdi:tumble-dryer")

                        : icon.setAttribute("icon", "mdi:tumble-dryer-off")};
                      scrolling_effect: false

willliamchan · 2024-07-26T16:51:50Z

willliamchan
Jul 26, 2024
Author

Weather Sensor - add below to config.yaml and I had the weather condition svg all placed under www/weather_icons/, while the svg all came from https://github.com/wowgamr/animated-weather-card

template:
  - sensor:
    - name: Bubble Card Dashboard Weather
      state: "{{ states('weather.met_office_datahub') }}"
      picture: >
        {% set weather = states('weather.met_office_datahub') %}
        /local/weather_icons/{{ weather }}.svg
      attributes:
        temperature: "{{ state_attr('weather.met_office_datahub','temperature') }} °C"
        apparent_temperature: "{{ state_attr('weather.met_office_datahub','apparent_temperature') }} °C"
        humidity: "{{ state_attr('weather.met_office_datahub','humidity') }}%"

1 reply

SteveRMann Nov 21, 2024

Screenshot please.

NoLooseEnds · 2024-07-26T22:09:56Z

NoLooseEnds
Jul 26, 2024

Thanks for sharing, but please put your code in code blocks, start and end with a new line with three ```. Easiest way is just to select the code in the text and press the <> icon.

1 reply

willliamchan Jul 27, 2024
Author

Thanks for sharing, but please put your code in code blocks, start and end with a new line with three ```. Easiest way is just to select the code in the text and press the <> icon.

Thanks it's updated!

benswinney · 2024-07-27T05:50:22Z

benswinney
Jul 27, 2024

Thanks. Would be good if you could re-paste the code with the correct formatting as that would help others to use the code without having to fix the formatting.

1 reply

willliamchan Jul 27, 2024
Author

Thanks. Would be good if you could re-paste the code with the correct formatting as that would help others to use the code without having to fix the formatting.

Thanks it's updated!

willliamchan · 2024-07-27T07:03:47Z

willliamchan
Jul 27, 2024
Author

Hey #vacuums enthusiasts! 🧹

If you don't have a spot/area clean setup, you might not need this, but stick around for some fun ideas! The concept here is to use a Bubble Card to pick where you want to clean and then run the automation. The automation grabs the value from input_select and performs a spot clean. Easy peasy!

Now, let me show you how I control one of my vacuums. You'll notice there's a "Vacuum Mode" as a main condition. This is because I've got another automation that schedules the vacuum to clean. When I don't want it to follow the schedule (like when friends visit and I don't want them to think I'm a clean freak), I switch this option from Auto to Manual, and it stops the routine cleaning.

Automation

alias: Downstairs - Vacuum Spot Clean
description: ""
trigger: []
condition:
  - condition: or
    conditions:
      - condition: state
        entity_id: input_select.vacuum_mode
        state: Auto
      - condition: state
        entity_id: input_select.vacuum_mode
        state: Manual
    alias: "Vacuum Mode: Auto/Manual"
action:
  - choose:
      - conditions:
          - condition: state
            entity_id: input_select.downstairs_vacuum_spot_clean
            state: All
        sequence:
          - service: vacuum.send_command
            target:
              entity_id:
                - vacuum.downstairs
            data:
              command: spot_area
              params:
                rooms: 0, 3, 2, 1
                cleanings: 1
          - service: counter.increment
            metadata: {}
            data: {}
            target:
              entity_id: counter.vacuum_counter_downstairs
      - conditions:
          - condition: state
            entity_id: input_select.downstairs_vacuum_spot_clean
            state: Dining
        sequence:
          - service: vacuum.send_command
            data:
              command: spot_area
              params:
                rooms: 3
                cleanings: 1
            target:
              entity_id:
                - vacuum.downstairs
      - conditions:
          - condition: state
            entity_id: input_select.downstairs_vacuum_spot_clean
            state: Entrance
        sequence:
          - service: vacuum.send_command
            data:
              command: spot_area
              params:
                rooms: 1
                cleanings: 1
            target:
              entity_id:
                - vacuum.downstairs
      - conditions:
          - condition: state
            entity_id: input_select.downstairs_vacuum_spot_clean
            state: Kitchen
        sequence:
          - service: vacuum.send_command
            data:
              command: spot_area
              params:
                rooms: 2
                cleanings: 1
            target:
              entity_id:
                - vacuum.downstairs
      - conditions:
          - condition: state
            entity_id: input_select.downstairs_vacuum_spot_clean
            state: Workshop
        sequence:
          - service: vacuum.send_command
            data:
              command: spot_area
              params:
                rooms: 0
                cleanings: 1
            target:
              entity_id:
                - vacuum.downstairs
  - wait_for_trigger:
      - platform: state
        entity_id:
          - vacuum.downstairs
        to: docked
        for:
          hours: 0
          minutes: 3
          seconds: 0
    timeout:
      hours: 0
      minutes: 30
      seconds: 0
      milliseconds: 0
  - service: input_select.select_option
    metadata: {}
    data:
      option: All
    target:
      entity_id: input_select.downstairs_vacuum_spot_clean
mode: restart

Bubble Card - Popup

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#vacuums'
    name: Vacuums
    icon: mdi:robot-vacuum
    scrolling_effect: false
    show_header: false
    bg_opacity: '70'
  - type: custom:bubble-card
    card_type: empty-column
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: separator
        name: null
        icon: mdi:home-floor-0
        sub_button:
          - entity: input_boolean.auto_downstairs_vacuum
            icon: mdi:auto-mode
            show_state: true
            show_background: false
            name: Auto
            tap_action:
              action: toggle
          - entity: counter.vacuum_counter_downstairs
            show_background: false
            show_state: true
            tap_action:
              action: call-service
              service: counter.increment
              target:
                entity_id: counter.vacuum_counter_downstairs
            double_tap_action:
              action: call-service
              service: counter.reset
              target:
                entity_id: counter.vacuum_counter_downstairs
            name: Counter
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: vacuum.downstairs
        name: Downstairs
        scrolling_effect: false
        double_tap_action:
          action: none
        hold_action:
          action: none
        button_action:
          tap_action:
            action: none
          double_tap_action:
            action: none
          hold_action:
            action: none
        sub_button:
          - entity: input_select.downstairs_vacuum_spot_clean
            show_background: false
            show_state: true
            show_icon: false
            show_arrow: false
            name: Area
          - entity: vacuum.downstairs
            name: Return to Base
            show_background: false
            icon: mdi:home-import-outline
            tap_action:
              action: call-service
              service: vacuum.return_to_base
              target:
                entity_id: vacuum.downstairs
          - entity: vacuum.downstairs
            name: Pause
            icon: mdi:pause
            show_icon: true
            tap_action:
              action: call-service
              service: vacuum.pause
              target:
                entity_id: vacuum.downstairs
            show_background: false
          - entity: vacuum.downstairs
            name: Start
            icon: mdi:play
            show_background: false
            tap_action:
              action: call-service
              service: automation.trigger
              target:
                entity_id: automation.downstairs_vacuum_spot_clean
        card_layout: normal
        styles: |-
          .bubble-button-card-container {
            background: ${hass.states['vacuum.downstairs'].state !== 'docked' ? '#555555' : ''} !important;
          }

          ${state !== 'docked' ? icon.setAttribute("icon",
          "mdi:robot-vacuum") : icon.setAttribute("icon",
          "mdi:robot-vacuum")};
        show_attribute: true
        attribute: battery_level
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: separator
        name: null
        icon: mdi:home-floor-1
        sub_button:
          - entity: input_boolean.auto_upstairs_vacuum
            icon: mdi:auto-mode
            show_state: true
            show_background: false
            name: Auto
            tap_action:
              action: toggle
          - entity: counter.vacuum_counter_upstairs
            show_background: false
            show_state: true
            tap_action:
              action: call-service
              service: counter.increment
              target:
                entity_id: counter.vacuum_counter_upstairs
            double_tap_action:
              action: call-service
              service: counter.reset
              target:
                entity_id: counter.vacuum_counter_upstairs
            name: Counter
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: vacuum.upstairs
        name: Upstairs
        scrolling_effect: false
        double_tap_action:
          action: none
        hold_action:
          action: none
        button_action:
          tap_action:
            action: none
          double_tap_action:
            action: none
          hold_action:
            action: none
        sub_button:
          - entity: input_select.upstairs_vacuum_spot_clean
            show_background: false
            show_state: true
            show_icon: false
            show_arrow: false
            name: Area
          - entity: vacuum.upstairs
            name: Return to Base
            show_background: false
            icon: mdi:home-import-outline
            tap_action:
              action: call-service
              service: vacuum.return_to_base
              target:
                entity_id: vacuum.upstairs
          - entity: vacuum.upstairs
            name: Pause
            icon: mdi:pause
            show_icon: true
            tap_action:
              action: call-service
              service: vacuum.pause
              target:
                entity_id: vacuum.upstairs
            show_background: false
          - entity: vacuum.upstairs
            name: Start
            icon: mdi:play
            show_background: false
            tap_action:
              action: call-service
              service: automation.trigger
              target:
                entity_id: automation.upstairs_vacuum_spot_clean
        card_layout: normal
        styles: |-
          .bubble-button-card-container {
            background: ${hass.states['vacuum.upstairs'].state !== 'docked' ? '#555555' : ''} !important;
          }

          ${state !== 'docked' ? icon.setAttribute("icon",
          "mdi:robot-vacuum") : icon.setAttribute("icon",
          "mdi:robot-vacuum")};
        show_attribute: true
        attribute: battery_level
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: separator
        name: null
        icon: mdi:home-floor-2
        sub_button:
          - entity: input_boolean.auto_ensuite_vacuum
            icon: mdi:auto-mode
            show_state: true
            show_background: false
            name: Auto
            tap_action:
              action: toggle
          - entity: counter.vacuum_counter_en_suite
            show_background: false
            show_state: true
            tap_action:
              action: call-service
              service: counter.increment
              target:
                entity_id: counter.vacuum_counter_en_suite
            double_tap_action:
              action: call-service
              service: counter.reset
              target:
                entity_id: counter.vacuum_counter_en_suite
            name: Counter
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: vacuum.en_suite_vacuum
        name: En-suite
        scrolling_effect: false
        double_tap_action:
          action: none
        hold_action:
          action: none
        button_action:
          tap_action:
            action: none
          double_tap_action:
            action: none
          hold_action:
            action: none
        sub_button:
          - entity: input_select.en_suite_vacuum_spot_clean
            show_background: false
            show_state: true
            show_icon: false
            show_arrow: false
            name: Area
          - entity: vacuum.en_suite_vacuum
            name: Return to Base
            show_background: false
            icon: mdi:home-import-outline
            tap_action:
              action: call-service
              service: vacuum.return_to_base
              target:
                entity_id: vacuum.en_suite_vacuum
          - entity: vacuum.en_suite_vacuum
            name: Pause
            icon: mdi:pause
            show_icon: true
            tap_action:
              action: call-service
              service: vacuum.pause
              target:
                entity_id: vacuum.en_suite_vacuum
            show_background: false
          - entity: vacuum.en_suite_vacuum
            name: Start
            icon: mdi:play
            show_background: false
            tap_action:
              action: call-service
              service: automation.trigger
              target:
                entity_id: automation.en_suite_vacuum_spot_clean
        card_layout: normal
        styles: |-
          .bubble-button-card-container {
            background: ${hass.states['vacuum.en_suite_vacuum'].state !== 'docked' ? '#555555' : ''} !important;
          }

          ${state !== 'docked' ? icon.setAttribute("icon",
          "mdi:robot-vacuum") : icon.setAttribute("icon",
          "mdi:robot-vacuum")};
        show_attribute: true
        attribute: battery_level
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: vacuum.wardrobe
        name: Wardrobe
        scrolling_effect: false
        double_tap_action:
          action: none
        hold_action:
          action: none
        button_action:
          tap_action:
            action: none
          double_tap_action:
            action: none
          hold_action:
            action: none
        sub_button:
          - entity: input_select.wardrobe_vacuum_spot_clean
            show_background: false
            show_state: true
            show_icon: false
            show_arrow: false
            name: Area
          - entity: vacuum.wardrobe
            name: Return to Base
            show_background: false
            icon: mdi:home-import-outline
            tap_action:
              action: call-service
              service: vacuum.return_to_base
              target:
                entity_id: vacuum.wardrobe
          - entity: vacuum.wardrobe
            name: Pause
            icon: mdi:pause
            show_icon: true
            tap_action:
              action: call-service
              service: vacuum.pause
              target:
                entity_id: vacuum.wardrobe
            show_background: false
          - entity: vacuum.wardrobe
            name: Start
            icon: mdi:play
            show_background: false
            tap_action:
              action: call-service
              service: automation.trigger
              target:
                entity_id: automation.wardrobe_vacuum_spot_clean
        card_layout: normal
        styles: |-
          .bubble-button-card-container {
            background: ${hass.states['vacuum.wardrobe'].state !== 'docked' ? '#555555' : ''} !important;
          }

          ${state !== 'docked' ? icon.setAttribute("icon",
          "mdi:robot-vacuum") : icon.setAttribute("icon",
          "mdi:robot-vacuum")};
        show_attribute: true
        attribute: battery_level
  - type: custom:bubble-card
    card_type: empty-column
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: separator
        name: null
        icon: mdi:select
      - type: custom:bubble-card
        card_type: select
        entity: input_select.vacuum_mode
        card_layout: normal
        scrolling_effect: false
        show_attribute: false
        attribute: options
        show_state: true
        name: Mode
  - type: custom:bubble-card
    card_type: empty-column

0 replies

willliamchan · 2024-07-27T07:09:39Z

willliamchan
Jul 27, 2024
Author

Here is the theme that I am currently using, originally from Clooos - https://github.com/Clooos/Bubble with minor modifications.

Bubble_Mod_Dark

Bubble_Mod_Dark:

  # Fonts
  primary-font-family: "sans-serif"
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"

  # Text
  text-color: '#ffffff'
  primary-text-color: 'var(--text-color)'
  text-primary-color: 'var(--text-color)'
  sidebar-text-color: 'var(--text-color)'
  pbs-button-color: 'var(--text-color)'
  pbs-button-rgb-color: 'var(--text-color)'
  pbs-button-rgb-state-color: 'var(--text-color)'
  pbs-button-rgb-default-color: 'var(--text-color)'
  rgb-state-default-color: 'var(--text-color)'
  pbs-button-rgb-fallback: 'var(--text-color)'
  secondary-text-color: '#f4eee0'
  text-medium-light-color: '#E8E8E8'
  text-medium-color: '#F2F2F2'
  disabled-text-color: '#B0B0B0'
  primary-color: 'var(--accent-color)'

  # Text Fields and Dropdown
  mdc-text-field-fill-color: 'var(--background-color)'
  mdc-text-field-ink-color: 'var(--text-color)'
  mdc-select-fill-color: 'var(--background-color)'
  mdc-text-field-label-ink-color: 'var(--secondary-text-color)'
  input-fill-color: 'var(--background-color)'
  input-ink-color: 'var(--text-color)'
  input-label-ink-color: 'var(--text-color)'
  input-disabled-fill-color: 'var(--background-color)'
  input-disabled-ink-color: 'var(--disabled-text-color)'
  input-disabled-label-ink-color: 'var(--disabled-text-color)'
  input-idle-line-color: 'var(--background-color)'
  input-dropdown-icon-color: 'var(--secondary-text-color)'
  input-hover-line-color: 'var(--primary-color)'
  code-editor-background-color: '#1c1f26'
  codemirror-property: 'var(--accent-color)'

  # Main Colors
  app-header-background-color: 'var(--background-color)'
  accent-color: '#6d9886'
  accent-medium-color: 'var(--accent-color)'

  # Background
  background-color: '#222831'
  primary-background-color: 'var(--background-color)'
  background-color-2: '#4e5b6a'
  secondary-background-color: '#1c2026'
  markdown-code-background-color: 'var(--background-color)'

  # Card
  card-background-color: '#2d3640'
  ha-card-background: '#2d3640'
  grid-card-gap: '18px'
  horizontal-stack-card-margin: '0 10px'
  control-button-border-radius: '50px'
  control-button-background-color: '#2d3640'
  control-button-box-shadow: '0 2px 4px rgba(0, 0, 0, 0.3)'

  # Icons
  paper-item-icon-color: 'var(--text-color)'
  paper-item-icon-active-color: 'var(--accent-color)'

  # Sidebar
  sidebar-background-color: 'var(--background-color)'
  sidebar-icon-color: '#8a8a8a'
  sidebar-selected-icon-color: 'var(--accent-color)'
  sidebar-selected-text-color: 'var(--text-color)'
  paper-listbox-background-color: 'var(--sidebar-background-color)'
  divider-color: 'var(--background-color)'
  light-primary-color: 'var(--ha-card-background)'

  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--background-color-2)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'var(--background-color-2)'

  # Toggle
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  mdc-theme-primary: 'var(--accent-color)'

  # Switch
  switch-unchecked-color: '#505a64'
  switch-checked-button-color: 'var(--accent-color)'
  switch-unchecked-track-color: 'var(--background-color-2)'
  switch-checked-track-color: 'var(--background-color-2)'

  # Radio Button
  paper-radio-button-checked-color: 'var(--accent-color)'

  # Popups
  more-info-header-background: 'var(--secondary-background-color)'
  paper-dialog-background-color: 'var(--background-color)'

  # Tables
  table-row-background-color: 'var(--background-color)'
  table-row-alternative-background-color: 'var(--ha-card-background)'

  # Badges
  label-badge-background-color: 'var(--background-color)'
  label-badge-text-color: 'var(--text-primary-color)'
  label-badge-red: 'rgba(255,80,80,1)'
  label-badge-blue: 'rgba(100,180,240,1)'
  label-badge-green: 'rgba(153,176,128,1)'
  label-badge-yellow: 'rgba(240,210,100,1)'

  paper-input-container-focus-color: 'var(--accent-color)'

  # Custom Header
  ch-background: 'var(--background-color)'
  ch-active-tab-color: 'var(--accent-color)'
  ch-notification-dot-color: 'var(--accent-color)'
  ch-all-tabs-color: 'var(--sidebar-icon-color)'
  ch-tab-indicator-color: 'var(--accent-color)'

  # Mini Mediaplayer
  mini-media-player-base-color: 'var(--text-color)'
  mini-media-player-accent-color: 'var(--accent-color)'

  # Alarm
  alarm-color-armed: 'rgba(255,80,80,1)'

  card-mod-theme: Bubble_Mod_Dark

  card-mod-root-yaml: |
    .: |
      @media only screen and (max-width: 768px) {
          .header {
            display: none;
            opacity: 0;
          }
          #view {
            padding-top: 0 !important;
            margin-top: 0 !important;
            height: calc(100vh - env(safe-area-inset-top)) !important;
          }
      }

  card-mod-more-info-yaml: |
     $: |
      .mdc-dialog .mdc-dialog__scrim {
         backdrop-filter: blur(15px);
         -webkit-backdrop-filter: blur(15px);
         background: rgba(0,0,0,.6);
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
         box-shadow: none !important;
         border-radius: var(--ha-card-border-radius);
      }
     .: |
      :host {
         --ha-card-box-shadow: none;
      }
  card-mod-view-yaml: |
    hui-sidebar-view:
      $: |
        .container {
            overflow: hidden;
        }
        @media only screen and (min-width: 768px) {
            .container {
              margin: auto !important;
              width: -webkit-fill-available;
            }
        }
        "#wrapper": |
          $: |
            #progressContainer {
                border-radius: 14px !important;
        }
      .: |
        "#view>hui-view>hui-sidebar-view$#main>hui-card-options:nth-child(7)>vertical-stack-in-card$ha-card>div>hui-horizontal-stack-card$#root>hui-grid-card$#root>hui-entities-card$#states>div:nth-child(4)>slider-entity-row$div>ha-slider$#sliderBar$#progressContainer" {
            border-radius: 14px !important;
        }

0 replies

willliamchan · 2024-07-27T07:27:51Z

willliamchan
Jul 27, 2024
Author

Let me share another idea with you: how to make your door and window sensors work hand-in-hand with your alarm status. All you need to do is create a template sensor like the one below, and voilà! You'll have a better view directly from your dashboard.

In my setup, when the alarm is off, it doesn't monitor the internal doors, and the Bubble Card only lights up when external doors or windows are open. But when the alarm is set to Home, I want to make sure a few more internal doors are closed (and/or locked). This sensor does the trick perfectly!

So, whether you're keeping an eye on your fortress or just making sure the kids aren't sneaking out, this setup has got you covered!

{% set downstairs = [ states.binary_sensor.downstairs_doors, states.binary_sensor.downstairs_windows, states.binary_sensor.upstairs_windows ] %}
{% set all = [ states.binary_sensor.downstairs_doors, states.binary_sensor.upstairs_doors, states.binary_sensor.downstairs_windows, states.binary_sensor.upstairs_windows ] %}
{% if is_state('alarm_control_panel.ribot_walk_alarm', 'disarmed') %}
{% set num = downstairs | selectattr('state','eq','on') | list | length %}
{{ num > 0 }}
{% else %}
{% set num = all | selectattr('state','eq','on') | list | length %}
{{ num > 0 }}
{% endif %}

0 replies

willliamchan · 2024-07-27T13:05:40Z

willliamchan
Jul 27, 2024
Author

something about climate popup for u/BoredOntoilet, to avoid confusion I included only one of the floor as an example.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#climate'
    icon: mdi:home-thermometer
    name: Climate
    scrolling_effect: false
    show_header: false
    bg_opacity: '70'
  - type: custom:bubble-card
    card_type: empty-column
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: separator
        name: null
        icon: mdi:home-floor-1
      - type: custom:bubble-card
        card_type: button
        entity: climate.study_aircon
        name: Aircon
        show_state: true
        tap_action:
          action: call-service
          service: input_button.press
          data: {}
          target:
            entity_id: input_button.study_aircon_power_button
        double_tap_action:
          action: none
        hold_action:
          action: none
        button_action:
          tap_action:
            action: more-info
          double_tap_action:
            action: none
          hold_action:
            action: none
        show_attribute: true
        attribute: current_temperature
        sub_button:
          - entity: input_select.study_aircon_fan_speed
            show_icon: true
            show_background: false
            show_attribute: false
            attribute: fan_mode
            tap_action:
              action: none
            icon: ''
            name: Fan
            show_state: true
            show_arrow: false
          - tap_action:
              action: none
            show_attribute: false
            icon: ''
            show_background: false
            name: HVAC
            entity: input_select.study_aircon_hvac_mode
            show_state: true
            show_arrow: false
          - entity: input_select.study_aircon_temperature
            show_background: false
            icon: ''
            name: Temperature
            show_state: true
            tap_action:
              action: none
            show_arrow: false
        styles: |-
          .bubble-button-card-container {
            background: ${hass.states['climate.study_aircon'].state == 'cool' ? '#517d9c' : 
                          hass.states['climate.study_aircon'].state == 'heat' ? '#e38d68' : 
            ''} !important;
          }

          .bubble-icon {
            opacity: ${hass.states['climate.study_aircon'].state !== 'off' ? '1' : hass.states['climate.study_aircon'].state === 'off' ? '0.6' : '0.3'} !important;
            color: ${hass.states['climate.study_aircon'].state !== 'off' ? '#ffffff' : '' } !important;
          }

          ${state !== 'off' ? icon.setAttribute("icon", "mdi:hvac")
          : icon.setAttribute("icon", "mdi:hvac-off")};
        card_layout: normal
        scrolling_effect: false
        button_type: state
      - type: conditional
        conditions:
          - condition: and
            conditions:
              - condition: state
                entity: input_select.climate_control
                state_not: Auto (Cool)
              - condition: state
                entity: input_select.climate_control
                state_not: Cool
        card:
          type: custom:bubble-card
          card_type: button
          entity: climate.study_radiator_cloud
          name: Study
          show_state: true
          show_attribute: true
          attribute: temperature
          double_tap_action:
            action: none
          hold_action:
            action: none
          button_action:
            tap_action:
              action: more-info
            double_tap_action:
              action: none
            hold_action:
              action: none
          sub_button:
            - entity: climate.study_radiator_cloud
              name: Temperature
              icon: mdi:thermometer
              show_icon: true
              show_background: false
              show_attribute: true
              show_state: false
              tap_action:
                action: none
              attribute: current_temperature
          scrolling_effect: false
          styles: |-
            .bubble-button-card-container {
              background: ${hass.states['climate.study_radiator_cloud'].state !== 'off' ? '#a15750' : ''} !important;
            }

            ${state !== 'off' ? icon.setAttribute("icon",
            "mdi:radiator") : icon.setAttribute("icon",
            "mdi:radiator-off")};
          card_layout: normal
      - type: conditional
        conditions:
          - condition: and
            conditions:
              - condition: state
                entity: input_select.climate_control
                state_not: Auto (Cool)
              - condition: state
                entity: input_select.climate_control
                state_not: Cool
        card:
          type: custom:bubble-card
          card_type: button
          entity: climate.bedroom_radiator_cloud
          name: Bedroom
          show_state: true
          show_attribute: true
          attribute: temperature
          double_tap_action:
            action: none
          hold_action:
            action: none
          button_action:
            tap_action:
              action: more-info
            double_tap_action:
              action: none
            hold_action:
              action: none
          sub_button:
            - entity: climate.bedroom_radiator_cloud
              name: Temperature
              icon: mdi:thermometer
              show_icon: true
              show_background: false
              show_attribute: true
              show_state: false
              tap_action:
                action: none
              attribute: current_temperature
          scrolling_effect: false
          styles: |-
            .bubble-button-card-container {
              background: ${hass.states['climate.bedroom_radiator_cloud'].state !== 'off' ? '#a15750' : ''} !important;
            }

            ${state !== 'off' ? icon.setAttribute("icon",
            "mdi:radiator") : icon.setAttribute("icon",
            "mdi:radiator-off")};
          card_layout: normal
  - type: custom:bubble-card
    card_type: empty-column
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: separator
        name: null
        icon: mdi:select
      - type: custom:bubble-card
        card_type: select
        name: Mode
        entity: input_select.climate_control
        scrolling_effect: false
        show_state: true
        show_attribute: false
        card_layout: normal
  - type: custom:bubble-card
    card_type: empty-column

0 replies

vikdb · 2024-11-13T22:00:30Z

vikdb
Nov 13, 2024

How did you manage to use the separator to hide a whole section? Cant seem find it in the coding above

1 reply

vikdb Nov 14, 2024

Did you create separate switch entities that you toggle on click and set a visibility condition on the stack below?

Or is there an integrate function we can use?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Selsker Dashboard #667

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 8 comments 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Selsker Dashboard #667

willliamchan Jul 26, 2024

Replies: 8 comments · 4 replies

willliamchan Jul 26, 2024 Author

SteveRMann Nov 21, 2024

NoLooseEnds Jul 26, 2024

willliamchan Jul 27, 2024 Author

benswinney Jul 27, 2024

willliamchan Jul 27, 2024 Author

willliamchan Jul 27, 2024 Author

willliamchan Jul 27, 2024 Author

willliamchan Jul 27, 2024 Author

willliamchan Jul 27, 2024 Author

vikdb Nov 13, 2024

vikdb Nov 14, 2024

willliamchan
Jul 26, 2024

Replies: 8 comments 4 replies

willliamchan
Jul 26, 2024
Author

NoLooseEnds
Jul 26, 2024

willliamchan Jul 27, 2024
Author

benswinney
Jul 27, 2024

willliamchan Jul 27, 2024
Author

willliamchan
Jul 27, 2024
Author

willliamchan
Jul 27, 2024
Author

willliamchan
Jul 27, 2024
Author

willliamchan
Jul 27, 2024
Author

vikdb
Nov 13, 2024