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

2 replies

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?

willliamchan Dec 19, 2024
Author

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

Sorry for the late response, I've been busy here and there since my last post and finally able to answer your question.

To answer your question, yes I am using visibility condition in-corporate with input_booleans to show/hide different sections / pages and they are all controlled using sub-button with the input_boolean.toggle action. So you can imagine when the boolean is set to true then a section will show while boolean is set to false and it will hide the same section/page.

I had also a pop-up that conducted with different sections while they are too long and messy to show in once, so I have them split into different sections using the bubble separator card, plus a simple automation I can then switch between section without flooding the whole screen.

Example

Automation

alias: System - Expand Helper
description: ""
triggers:
  - trigger: state
    entity_id:
      - input_boolean.section1
      - input_boolean.section2
      - input_boolean.section3
      - input_boolean.section4
      - input_boolean.section5
    to: "on"
conditions: []
actions:
  - variables:
      expand_entity_ids:
        - input_boolean.section1
        - input_boolean.section2
        - input_boolean.section3
        - input_boolean.section4
        - input_boolean.section5
      trigger_entity_id: "{{ trigger.entity_id }}"
      collapse_entity_ids: |
        {{ expand_entity_ids | reject('equalto', trigger_entity_id) | list }}
    alias: Define Variables
  - repeat:
      sequence:
        - action: input_boolean.turn_off
          metadata: {}
          data: {}
          target:
            entity_id: "{{ repeat.item }}"
      for_each: "{{ collapse_entity_ids }}"
mode: single

ptC7H12 · 2024-11-28T23:11:39Z

ptC7H12
Nov 28, 2024

Has anyone a screenshot, please?

2 replies

emiham Dec 2, 2024

From Reddit:

Clooos Dec 10, 2024
Maintainer

I've edited the post to add this image, this is better with it indeed 👌

Onepamopa · 2024-12-10T19:31:10Z

Onepamopa
Dec 10, 2024

How do we test this dashboard? I see that there are links to #somestuff but these pages/tabs are not included? I don't get it..

2 replies

Onepamopa Dec 12, 2024

For some reason 'n is undefined'..

Onepamopa Dec 13, 2024

v.2.3.0 works fine, everything above it shows the 'n is undefined'.

Onepamopa · 2024-12-17T23:13:16Z

Onepamopa
Dec 17, 2024

So again.... why are most of the cards missing?? How can we test this??????

5 replies

willliamchan Dec 19, 2024
Author

So again.... why are most of the cards missing?? How can we test this??????

Hi thanks for asking, the main reason is that the rest of them are more or less the same structure while some cards contains personal information which I don't feel comfortable to just paste them here. :-)

Onepamopa Dec 19, 2024

So again.... why are most of the cards missing?? How can we test this??????

Hi thanks for asking, the main reason is that the rest of them are more or less the same structure while some cards contains personal information which I don't feel comfortable to just paste them here. :-)

Would you at least consider sharing the "Settings" card? Just interested in what's there :) (and your general approach to these things).

Onepamopa Dec 19, 2024

Also, the buttons card at the bottom?

willliamchan Dec 19, 2024
Author

So again.... why are most of the cards missing?? How can we test this??????

Hi thanks for asking, the main reason is that the rest of them are more or less the same structure while some cards contains personal information which I don't feel comfortable to just paste them here. :-)

Would you at least consider sharing the "Settings" card? Just interested in what's there :) (and your general approach to these things).

My settings card split into different sections. One for PVE one for flipping security switches like chime, double take. One for info bar, also one for switching between vpn/wan. I didn't include any of these as they won't work with just a button but works with different automations.

willliamchan Dec 19, 2024
Author

Also, the buttons card at the bottom?

It's a Bubble Card feature. You can find it from Clooos' tutorial.

willliamchan · 2024-12-19T18:32:10Z

willliamchan
Dec 19, 2024
Author

Hi All

I hope this message finds you well! I apologize for the delayed response, but I'm excited to share a fun little project I've been working on for myself. I've created an "info bar" that can be embedded in a Bubble card dashboard, and I think it could be quite useful for you too.

The idea behind this info bar is to display valuable information at the top of your dashboard, such as news, stock prices, or any other data you find helpful. I'm not a programmer, so I want to give a big shout-out to Clooos for their invaluable help in making this possible for all of us.

Here's a quick overview of what I used to build my info bar:

Swipe Card - https://github.com/bramkragten/swipe-card
Button Card - https://github.com/custom-cards/button-card
Feedparser Card - https://github.com/custom-components/feedparser
Yahoo Finance Card - https://github.com/iprak/yahoofinance
Apexcharts Card - https://github.com/RomRider/apexcharts-card

The first two cards are essential, while the others are optional based on your needs. Feel free to skip any that aren't relevant to you.

I also took it a step further by creating another card that includes all the input booleans, allowing me to manually turn them on or off as needed. On top of that, I set up an automation to toggle different categories based on the time of day. For example, the stock prices turn on when the market is open, and the news is turned off at night. This setup adds a layer of convenience and ensures that the info bar displays the most relevant information at the right times.

While I may not be able to explain how each card works in detail or answer all your questions, I'm more than happy to share my code with you. I hope it serves as a helpful starting point for your own projects.

Thanks for your patience and support, and I hope you have as much fun with this as I did!

Info Bar Code:-

type: custom:swipe-card
parameters:
  autoplay:
    delay: 6000
  speed: 400
  effect: fade
  fadeEffect:
    crossFade: true
  autoHeight: true
cards:
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.swipebar_location
        state: "on"
    card:
      square: false
      type: grid
      cards:
        - type: custom:button-card
          tap_action:
            action: navigate
            navigation_path: "#wc"
          name: |
            [[[
              return states['sensor.person_1_ble_location'].state
            ]]]
          label: null
          show_label: false
          custom_fields:
            icon: |
              [[[
                var url = states['person.person_1'].attributes.entity_picture;
                var state = states['person.person_1'].state;
                var filter = state === 'not_home' ? 'grayscale(100%)' : 'none';
                return `<img src="https://homeassistant.yourowndomain.com${url}" style="width: 48px; height: 48px; border-radius: 50%; filter: ${filter};" />`;
              ]]]
          styles:
            grid:
              - grid-template-areas: "\"icon\" \"n\""
            card:
              - background: none
              - height: 100px
              - border: 0px
            name:
              - align-self: centre
              - font-size: 11px
              - font-weight: bold
              - color: "#d3d3d3"
            icon:
              - align-self: centre
        - type: custom:button-card
          tap_action:
            action: navigate
            navigation_path: "#mt"
          name: |
            [[[
              return states['sensor.person_2_ble_location'].state
            ]]]
          label: null
          show_label: false
          custom_fields:
            icon: |
              [[[
                var url = states['person.person_2'].attributes.entity_picture;
                var state = states['person.person_2'].state;
                var filter = state === 'not_home' ? 'grayscale(100%)' : 'none';
                return `<img src="https://homeassistant.yourowndomain.com${url}" style="width: 48px; height: 48px; border-radius: 50%; filter: ${filter};" />`;
              ]]]
          styles:
            grid:
              - grid-template-areas: "\"icon\" \"n\""
            card:
              - background: none
              - height: 100px
              - border: 0px
            name:
              - align-self: centre
              - font-size: 11px
              - font-weight: bold
              - color: "#d3d3d3"
            icon:
              - align-self: centre
      columns: 2
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.swipebar_weather_forecast
        state: "on"
    card:
      type: weather-forecast
      entity: weather.met_office_datahub
      show_current: false
      show_forecast: true
      forecast_type: hourly
      theme: Animated Weather Card
      card_mod:
        style: |
          ha-card {
            border: 0px !important;
            background: none !important;
            margin-top: -30px !important;
          }
  - type: conditional
    conditions:
      - condition: and
        conditions:
          - condition: state
            entity: sensor.weather___weather_warning
            state: "1"
          - condition: state
            entity: input_boolean.swipebar_weather_forecast
            state: "on"
    card:
      type: custom:button-card
      entity: sensor.weather___weather_warning
      tap_action:
        action: url
        url_path: |
          [[[
            return states['sensor.weather___weather_warning'].attributes.entries[0].link;
          ]]]
      show_icon: false
      show_header: false
      show_name: false
      show_state: false
      show_label: false
      custom_fields:
        title: |
          [[[
            const article_weatherwarning = states['sensor.weather___weather_warning'].attributes.entries[0];
            let title = article_weatherwarning.title;
            if (title.length > 105) {
              title = title.substring(0, 105) + '...';
            }
            return `
              <p>
                <a href="${article_weatherwarning.link}" target="_blank" style="color: #d3d3d3; font-size: 14px; text-decoration: none;" onclick="event.stopPropagation();">${title}</a>
              </p>
            `;
          ]]]
        timestamp: ""
        picture: |
          [[[
            var entry = states['sensor.weather___weather_warning'].attributes.entries[0].image;
            return `<img src="${entry}" style="max-width: 100px; max-height: 60px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);" />`;
          ]]]
      styles:
        grid:
          - grid-template-areas: >-
              "picture title title" "picture title title" "picture timestamp
              timestamp"
          - grid-template-columns: 30% 35% 35%
          - grid-template-rows: 30% 35% 35%
        card:
          - height: 100px
          - padding-top: 0px
          - padding-bottom: 0px
          - padding-left: 20px
          - padding-right: 20px
          - background: none
          - border: 0px
        custom_fields:
          title:
            - white-space: normal
            - text-align: left
            - padding-top: 17px
            - padding-left: 10px
          timestamp:
            - text-align: right
            - padding-bottom: 0px
          picture:
            - padding-top: 0px
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.swipebar_news
        state: "on"
    card:
      type: custom:button-card
      entity: sensor.news
      tap_action:
        action: url
        url_path: |
          [[[
            var num = states['sensor.swipebar_news_num'].state;
            return states['sensor.news'].attributes.entries[num].link;
          ]]]
      show_icon: false
      show_header: false
      show_name: false
      show_state: false
      show_label: false
      custom_fields:
        title: |
          [[[
            var num = states['sensor.swipebar_news_num'].state;
            const article_salford = states['sensor.news'].attributes.entries[num];
            let title = article_salford.title;
            if (title.length > 105) {
              title = title.substring(0, 105) + '...';
            }
            return `
              <p>
                <a href="${article_salford.link}" target="_blank" style="color: #d3d3d3; font-size: 14px; text-decoration: none;" onclick="event.stopPropagation();">${title}</a>
              </p>
            `;
          ]]]
        timestamp: |
          [[[
            var num = states['sensor.swipebar_news_num'].state;
            let timeString = states['sensor.news'].attributes.entries[num].published;
            let date_only = timeString.split(' ').slice(0, 4).join(' ');
            
            return `
              <p style="font-size: 10px; color: #a9a9a9;">${date_only}</p>
            `;
          ]]]
        picture: |
          [[[
            var num = states['sensor.swipebar_news_num'].state;
            var entry = states['sensor.news'].attributes.entries[num].image;
            return `<img src="${entry}" style="max-width: 100px; max-height: 60px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);" />`;
          ]]]
      styles:
        grid:
          - grid-template-areas: >-
              "picture title title" "picture title title" "picture timestamp
              timestamp"
          - grid-template-columns: 30% 35% 35%
          - grid-template-rows: 30% 35% 35%
        card:
          - height: 100px
          - padding-top: 0px
          - padding-bottom: 0px
          - padding-left: 20px
          - padding-right: 20px
          - background: none
          - border: 0px
        custom_fields:
          title:
            - white-space: normal
            - text-align: left
            - padding-top: 17px
            - padding-left: 10px
          timestamp:
            - text-align: right
            - padding-bottom: 0px
          picture:
            - padding-top: 0px
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.swipebar_football
        state: "on"
    card:
      type: custom:button-card
      entity: sensor.man_man_united
      show_icon: false
      show_header: false
      show_name: false
      show_state: false
      show_label: false
      tap_action:
        action: url
        url_path: |
          [[[
            var num = states['sensor.swipebar_football_num'].state;
            return states['sensor.man_man_united'].attributes.entries[num].link;
          ]]]
      custom_fields:
        title: |
          [[[
            var num = states['sensor.swipebar_football_num'].state;
            const article_manunited = states['sensor.man_man_united'].attributes.entries[num];
            let title = article_manunited.title;
            if (title.length > 105) {
              title = title.substring(0, 105) + '...';
            }
            return `
              <p>
                <a href="${article_manunited.link}" target="_blank" style="color: #d3d3d3; font-size: 14px; text-decoration: none;" onclick="event.stopPropagation();">${title}</a>
              </p>
            `;
          ]]]
        timestamp: |
          [[[
            var num = states['sensor.swipebar_football_num'].state;
            let timeString = states['sensor.man_man_united'].attributes.entries[num].published;
            let date_only = timeString.split(' ').slice(0, 4).join(' ');
            
            return `
              <p style="font-size: 10px; color: #a9a9a9;">${date_only}</p>
            `;
          ]]]
        picture: |
          [[[
            var num = states['sensor.swipebar_football_num'].state;
            var entry = states['sensor.man_man_united'].attributes.entries[num].image;
            return `<img src="${entry}" style="max-width: 100px; max-height: 60px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);" />`;
          ]]]
      styles:
        grid:
          - grid-template-areas: >-
              "picture title title" "picture title title" "picture timestamp
              timestamp"
          - grid-template-columns: 30% 35% 35%
          - grid-template-rows: 30% 35% 35%
        card:
          - height: 100px
          - padding-top: 0px
          - padding-bottom: 0px
          - padding-left: 20px
          - padding-right: 20px
          - background: none
          - border: 0px
        custom_fields:
          title:
            - white-space: normal
            - text-align: left
            - padding-top: 17px
            - padding-left: 10px
          timestamp:
            - text-align: right
            - padding-bottom: 0px
          picture:
            - padding-top: 0px
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.swipebar_stockgraph
        state: "on"
    card:
      type: custom:button-card
      variables:
        var_stockname: |
          [[[ 
            return states['sensor.yahoofinance_vuag_l'].attributes.symbol;
          ]]]
        var_stockprice: |
          [[[ 
            const currencySymbol = states['sensor.yahoofinance_vuag_l'].attributes.currencySymbol || '£';
            return `<span style="font-size: 0.6em">${currencySymbol} </span>` + states['sensor.yahoofinance_vuag_l'].state;
          ]]]
        var_pricechange: |
          [[[ 
            const changePrice = parseFloat(states['sensor.yahoofinance_vuag_l'].attributes.regularMarketChange).toFixed(2);
            const color = changePrice >= 0 ? '#66bb6a' : '#ef5350';
            const sign = changePrice >= 0 ? '+' : '';
            return `<span style="color: ${color}; font-size: 0.6em;">${sign}${changePrice}</span>`;
          ]]]
        var_percentchange: |
          [[[ 
            const changePercent = parseFloat(states['sensor.yahoofinance_vuag_l'].attributes.regularMarketChangePercent).toFixed(2);
            const color = changePercent >= 0 ? '#66bb6a' : '#ef5350';
            const sign = changePercent >= 0 ? '+' : '';
            return `<span style="color: ${color}; font-size: 0.6em;">(${sign}${changePercent}%)</span>`;
          ]]]
        var_marketstate: |
          [[[ 
            const marketState = states['sensor.yahoofinance_vuag_l'].attributes.marketState;
            let marketStatus, color;
            
            if (marketState === "REGULAR") {
              marketStatus = "Market Open";
              color = '#8FBF8F';
            } else if (marketState === "POST") {
              marketStatus = "Post-Market";
              color = '#BF8F8F';
            } else if (marketState === "POSTPOST") {
              marketStatus = "Market Closed";
              color = '#BF8F8F';
            } else if (marketState === "CLOSED") {
              marketStatus = "Market Closed";
              color = '#BF8F8F';
            } else if (marketState === "PRE") {
              marketStatus = "Pre-Market";
              color = '#BFBF8F';
            } else {
              marketStatus = "unknown state";
              color = '#AAAAAA'; // Default color for unknown state
            }
            return `<span style="font-size: 0.8em; color: ${color};"> (${marketStatus})</span>`;
          ]]]
      custom_fields:
        stockname: |
          [[[
            if (states['sensor.yahoofinance_vuag_l'].attributes.marketState !== "REGULAR") {
              return variables.var_stockname + ' ' + variables.var_marketstate;
            } else {
              return variables.var_stockname;
            }
          ]]]
        stockprice: |
          [[[
            return variables.var_stockprice + ' ' + variables.var_pricechange + ' ' + variables.var_percentchange;
          ]]]
        graph:
          card:
            type: custom:apexcharts-card
            series:
              - entity: sensor.yahoofinance_vuag_l
                color: "#4F6D7A"
                type: line
                curve: smooth
                extend_to: now
                fill_raw: last
            apex_config:
              chart:
                height: 60px
              stroke:
                width: 2
              grid:
                show: false
              tooltip:
                enabled: false
            layout: minimal
            graph_span: 9h
            span:
              start: day
              offset: +8h
            card_mod:
              style: |
                ha-card {
                  position: relative;
                  padding: 0;
                  border: none;
                  background: none !important;
                  margin-left: 33px;
                  margin-right: 33px;
                }
                .content {
                  position: absolute;
                  width: 100%;
                  bottom: 0;  # Align the chart to the bottom without changing card height
                  transform: translateY(10px);  # Adjust this value to move the graph up/down
                }
      styles:
        grid:
          - grid-template-rows: auto auto 1fr
          - grid-template-areas: "\"stockname\" \"stockprice\""
          - justify-items: start
          - align-items: start
        card:
          - height: 100px
          - padding: 0
        custom_fields:
          stockname:
            - font-size: 13px
            - color: "#d3d3d3"
            - justify-self: start
            - text-align: left
            - padding-left: 34px
            - top: 1px
            - left: 36px
          stockprice:
            - font-size: 20px
            - color: "#eeeeee"
            - justify-self: start
            - text-align: left
            - padding-left: 40px
            - font-weight: 500
          graph:
            - position: absolute
            - width: 100%
            - left: 0
            - bottom: 0
      card_mod:
        style: |
          ha-card{
            border: none !important;
            background: none !important;
          }
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.swipebar_stockgraph
        state: "on"
    card:
      type: custom:button-card
      variables:
        var_stockname: |
          [[[ 
            return states['sensor.yahoofinance_sgln_l'].attributes.symbol;
          ]]]
        var_stockprice: |
          [[[ 
            const currencySymbol = states['sensor.yahoofinance_sgln_l'].attributes.currencySymbol || '£';
            return `<span style="font-size: 0.6em">${currencySymbol} </span>` + states['sensor.yahoofinance_sgln_l'].state / 100;
          ]]]
        var_pricechange: |
          [[[ 
            const changePrice = parseFloat(states['sensor.yahoofinance_sgln_l'].attributes.regularMarketChange).toFixed(2) / 100;
            const color = changePrice >= 0 ? '#66bb6a' : '#ef5350';
            const sign = changePrice >= 0 ? '+' : '';
            return `<span style="color: ${color}; font-size: 0.6em;">${sign}${changePrice}</span>`;
          ]]]
        var_percentchange: |
          [[[ 
            const changePercent = parseFloat(states['sensor.yahoofinance_sgln_l'].attributes.regularMarketChangePercent).toFixed(2);
            const color = changePercent >= 0 ? '#66bb6a' : '#ef5350';
            const sign = changePercent >= 0 ? '+' : '';
            return `<span style="color: ${color}; font-size: 0.6em;">(${sign}${changePercent}%)</span>`;
          ]]]
        var_marketstate: |
          [[[ 
            const marketState = states['sensor.yahoofinance_sgln_l'].attributes.marketState;
                let marketStatus, color;
            
            if (marketState === "REGULAR") {
              marketStatus = "Market Open";
              color = '#8FBF8F';
            } else if (marketState === "POST") {
              marketStatus = "Post-Market";
              color = '#BF8F8F';
            } else if (marketState === "POSTPOST") {
              marketStatus = "Market Closed";
              color = '#BF8F8F';
            } else if (marketState === "CLOSED") {
              marketStatus = "Market Closed";
              color = '#BF8F8F';
            } else if (marketState === "PRE") {
              marketStatus = "Pre-Market";
              color = '#BFBF8F';
            } else {
              marketStatus = "unknown state";
              color = '#AAAAAA'; // Default color for unknown state
            }
            return `<span style="font-size: 0.8em; color: ${color};"> (${marketStatus})</span>`;
          ]]]
      custom_fields:
        stockname: |
          [[[
            if (states['sensor.yahoofinance_sgln_l'].attributes.marketState !== "REGULAR") {
              return variables.var_stockname + ' ' + variables.var_marketstate;
            } else {
              return variables.var_stockname;
            }
          ]]]
        stockprice: |
          [[[
            return variables.var_stockprice + ' ' + variables.var_pricechange + ' ' + variables.var_percentchange;
          ]]]
        graph:
          card:
            type: custom:apexcharts-card
            series:
              - entity: sensor.yahoofinance_sgln_l
                color: "#6A5D7B"
                type: line
                curve: smooth
                extend_to: now
                fill_raw: last
            apex_config:
              chart:
                height: 60px
              stroke:
                width: 2
              grid:
                show: false
              tooltip:
                enabled: false
            layout: minimal
            graph_span: 9h
            span:
              start: day
              offset: +8h
            card_mod:
              style: |
                ha-card {
                  position: relative;
                  padding: 0;
                  border: none;
                  background: none !important;
                  margin-left: 33px;
                  margin-right: 33px;
                }
                .content {
                  position: absolute;
                  width: 100%;
                  bottom: 0;  # Align the chart to the bottom without changing card height
                  transform: translateY(10px);  # Adjust this value to move the graph up/down
                }
      styles:
        grid:
          - grid-template-rows: auto auto 1fr
          - grid-template-areas: "\"stockname\" \"stockprice\""
          - justify-items: start
          - align-items: start
        card:
          - height: 100px
          - padding: 0
        custom_fields:
          stockname:
            - font-size: 13px
            - color: "#d3d3d3"
            - justify-self: start
            - text-align: left
            - padding-left: 34px
            - top: 1px
            - left: 36px
          stockprice:
            - font-size: 20px
            - color: "#eeeeee"
            - justify-self: start
            - text-align: left
            - padding-left: 40px
            - font-weight: 500
          graph:
            - position: absolute
            - width: 100%
            - left: 0
            - bottom: 0
      card_mod:
        style: |
          ha-card{
            border: none !important;
            background: none !important;
          }
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.swipebar_stockgraph
        state: "on"
    card:
      type: custom:button-card
      variables:
        var_stockname: |
          [[[ 
            return states['sensor.yahoofinance_vfeg_l'].attributes.symbol;
          ]]]
        var_stockprice: |
          [[[ 
            const currencySymbol = states['sensor.yahoofinance_vfeg_l'].attributes.currencySymbol || '£';
            return `<span style="font-size: 0.6em">${currencySymbol} </span>` + states['sensor.yahoofinance_vfeg_l'].state;
          ]]]
        var_pricechange: |
          [[[ 
            const changePrice = parseFloat(states['sensor.yahoofinance_vfeg_l'].attributes.regularMarketChange).toFixed(2);
            const color = changePrice >= 0 ? '#66bb6a' : '#ef5350';
            const sign = changePrice >= 0 ? '+' : '';
            return `<span style="color: ${color}; font-size: 0.6em;">${sign}${changePrice}</span>`;
          ]]]
        var_percentchange: |
          [[[ 
            const changePercent = parseFloat(states['sensor.yahoofinance_vfeg_l'].attributes.regularMarketChangePercent).toFixed(2);
            const color = changePercent >= 0 ? '#66bb6a' : '#ef5350';
            const sign = changePercent >= 0 ? '+' : '';
            return `<span style="color: ${color}; font-size: 0.6em;">(${sign}${changePercent}%)</span>`;
          ]]]
        var_marketstate: |
          [[[ 
            const marketState = states['sensor.yahoofinance_vfeg_l'].attributes.marketState;
            let marketStatus, color;
            
            if (marketState === "REGULAR") {
              marketStatus = "Market Open";
              color = '#8FBF8F';
            } else if (marketState === "POST") {
              marketStatus = "Post-Market";
              color = '#BF8F8F';
            } else if (marketState === "POSTPOST") {
              marketStatus = "Market Closed";
              color = '#BF8F8F';
            } else if (marketState === "CLOSED") {
              marketStatus = "Market Closed";
              color = '#BF8F8F';
            } else if (marketState === "PRE") {
              marketStatus = "Pre-Market";
              color = '#BFBF8F';
            } else {
              marketStatus = "unknown state";
              color = '#AAAAAA'; // Default color for unknown state
            }
            return `<span style="font-size: 0.8em; color: ${color};"> (${marketStatus})</span>`;
          ]]]
      custom_fields:
        stockname: |
          [[[
            if (states['sensor.yahoofinance_vfeg_l'].attributes.marketState !== "REGULAR") {
              return variables.var_stockname + ' ' + variables.var_marketstate;
            } else {
              return variables.var_stockname;
            }
          ]]]
        stockprice: |
          [[[
            return variables.var_stockprice + ' ' + variables.var_pricechange + ' ' + variables.var_percentchange;
          ]]]
        graph:
          card:
            type: custom:apexcharts-card
            series:
              - entity: sensor.yahoofinance_vfeg_l
                color: "#556B2F"
                type: line
                curve: smooth
                extend_to: now
                fill_raw: last
            apex_config:
              chart:
                height: 60px
              stroke:
                width: 2
              grid:
                show: false
              tooltip:
                enabled: false
            layout: minimal
            graph_span: 9h
            span:
              start: day
              offset: +8h
            card_mod:
              style: |
                ha-card {
                  position: relative;
                  padding: 0;
                  border: none;
                  background: none !important;
                  margin-left: 33px;
                  margin-right: 33px;
                }
                .content {
                  position: absolute;
                  width: 100%;
                  bottom: 0;  # Align the chart to the bottom without changing card height
                  transform: translateY(10px);  # Adjust this value to move the graph up/down
                }
      styles:
        grid:
          - grid-template-rows: auto auto 1fr
          - grid-template-areas: "\"stockname\" \"stockprice\""
          - justify-items: start
          - align-items: start
        card:
          - height: 100px
          - padding: 0
        custom_fields:
          stockname:
            - font-size: 13px
            - color: "#d3d3d3"
            - justify-self: start
            - text-align: left
            - padding-left: 34px
            - top: 1px
            - left: 36px
          stockprice:
            - font-size: 20px
            - color: "#eeeeee"
            - justify-self: start
            - text-align: left
            - padding-left: 40px
            - font-weight: 500
          graph:
            - position: absolute
            - width: 100%
            - left: 0
            - bottom: 0
      card_mod:
        style: |
          ha-card{
            border: none !important;
            background: none !important;
          }
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.swipebar_stockgraph
        state: "on"
    card:
      type: custom:button-card
      variables:
        var_stockname: |
          [[[ 
            return states['sensor.yahoofinance_semg_l'].attributes.symbol;
          ]]]
        var_stockprice: |
          [[[ 
            const currencySymbol = states['sensor.yahoofinance_semg_l'].attributes.currencySymbol || '£';
            return `<span style="font-size: 0.6em">${currencySymbol} </span>` + parseFloat(states['sensor.yahoofinance_semg_l'].state / 100).toFixed(2);
          ]]]
        var_pricechange: |
          [[[ 
            const changePrice = parseFloat(states['sensor.yahoofinance_semg_l'].attributes.regularMarketChange / 100).toFixed(2);
            const color = changePrice >= 0 ? '#66bb6a' : '#ef5350';
            const sign = changePrice >= 0 ? '+' : '';
            return `<span style="color: ${color}; font-size: 0.6em;">${sign}${changePrice}</span>`;
          ]]]
        var_percentchange: |
          [[[ 
            const changePercent = parseFloat(states['sensor.yahoofinance_semg_l'].attributes.regularMarketChangePercent).toFixed(2);
            const color = changePercent >= 0 ? '#66bb6a' : '#ef5350';
            const sign = changePercent >= 0 ? '+' : '';
            return `<span style="color: ${color}; font-size: 0.6em;">(${sign}${changePercent}%)</span>`;
          ]]]
        var_marketstate: |
          [[[ 
            const marketState = states['sensor.yahoofinance_semg_l'].attributes.marketState;
            let marketStatus, color;
            
            if (marketState === "REGULAR") {
              marketStatus = "Market Open";
              color = '#8FBF8F';
            } else if (marketState === "POST") {
              marketStatus = "Post-Market";
              color = '#BF8F8F';
            } else if (marketState === "POSTPOST") {
              marketStatus = "Market Closed";
              color = '#BF8F8F';
            } else if (marketState === "CLOSED") {
              marketStatus = "Market Closed";
              color = '#BF8F8F';
            } else if (marketState === "PRE") {
              marketStatus = "Pre-Market";
              color = '#BFBF8F';
            } else {
              marketStatus = "unknown state";
              color = '#AAAAAA'; // Default color for unknown state
            }
            return `<span style="font-size: 0.8em; color: ${color};"> (${marketStatus})</span>`;
          ]]]
      custom_fields:
        stockname: |
          [[[
            if (states['sensor.yahoofinance_semg_l'].attributes.marketState !== "REGULAR") {
              return variables.var_stockname + ' ' + variables.var_marketstate;
            } else {
              return variables.var_stockname;
            }
          ]]]
        stockprice: |
          [[[
            return variables.var_stockprice + ' ' + variables.var_pricechange + ' ' + variables.var_percentchange;
          ]]]
        graph:
          card:
            type: custom:apexcharts-card
            series:
              - entity: sensor.yahoofinance_semg_l
                color: "#7B4D4D"
                type: line
                curve: smooth
                extend_to: now
                fill_raw: last
            apex_config:
              chart:
                height: 60px
              stroke:
                width: 2
              grid:
                show: false
              tooltip:
                enabled: false
            layout: minimal
            graph_span: 9h
            span:
              start: day
              offset: +8h
            card_mod:
              style: |
                ha-card {
                  position: relative;
                  padding: 0;
                  border: none;
                  background: none !important;
                  margin-left: 33px;
                  margin-right: 33px;
                }
                .content {
                  position: absolute;
                  width: 100%;
                  bottom: 0;  # Align the chart to the bottom without changing card height
                  transform: translateY(10px);  # Adjust this value to move the graph up/down
                }
      styles:
        grid:
          - grid-template-rows: auto auto 1fr
          - grid-template-areas: "\"stockname\" \"stockprice\""
          - justify-items: start
          - align-items: start
        card:
          - height: 100px
          - padding: 0
        custom_fields:
          stockname:
            - font-size: 13px
            - color: "#d3d3d3"
            - justify-self: start
            - text-align: left
            - padding-left: 34px
            - top: 1px
            - left: 36px
          stockprice:
            - font-size: 20px
            - color: "#eeeeee"
            - justify-self: start
            - text-align: left
            - padding-left: 40px
            - font-weight: 500
          graph:
            - position: absolute
            - width: 100%
            - left: 0
            - bottom: 0
      card_mod:
        style: |
          ha-card{
            border: none !important;
            background: none !important;
          }
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.swipebar_stockgraph
        state: "on"
    card:
      type: custom:button-card
      variables:
        var_stockname: |
          [[[ 
            return states['sensor.yahoofinance_igl5_l'].attributes.symbol;
          ]]]
        var_stockprice: |
          [[[ 
            const currencySymbol = states['sensor.yahoofinance_igl5_l'].attributes.currencySymbol || '£';
            return `<span style="font-size: 0.6em">${currencySymbol} </span>` + states['sensor.yahoofinance_igl5_l'].state;
          ]]]
        var_pricechange: |
          [[[ 
            const changePrice = parseFloat(states['sensor.yahoofinance_igl5_l'].attributes.regularMarketChange).toFixed(2);
            const color = changePrice >= 0 ? '#66bb6a' : '#ef5350';
            const sign = changePrice >= 0 ? '+' : '';
            return `<span style="color: ${color}; font-size: 0.6em;">${sign}${changePrice}</span>`;
          ]]]
        var_percentchange: |
          [[[ 
            const changePercent = states['sensor.yahoofinance_igl5_l'].attributes.regularMarketChangePercent;
            const color = changePercent >= 0 ? '#66bb6a' : '#ef5350';
            const sign = changePercent >= 0 ? '+' : '';
            return `<span style="color: ${color}; font-size: 0.6em;">(${sign}${changePercent}%)</span>`;
          ]]]
        var_marketstate: |
          [[[ 
            const marketState = states['sensor.yahoofinance_igl5_l'].attributes.marketState;
            let marketStatus, color;
            
            if (marketState === "REGULAR") {
              marketStatus = "Market Open";
              color = '#8FBF8F';
            } else if (marketState === "POST") {
              marketStatus = "Post-Market";
              color = '#BF8F8F';
            } else if (marketState === "POSTPOST") {
              marketStatus = "Market Closed";
              color = '#BF8F8F';
            } else if (marketState === "CLOSED") {
              marketStatus = "Market Closed";
              color = '#BF8F8F';
            } else if (marketState === "PRE") {
              marketStatus = "Pre-Market";
              color = '#BFBF8F';
            } else {
              marketStatus = "unknown state";
              color = '#AAAAAA'; // Default color for unknown state
            }
            return `<span style="font-size: 0.8em; color: ${color};"> (${marketStatus})</span>`;
          ]]]
      custom_fields:
        stockname: |
          [[[
            if (states['sensor.yahoofinance_igl5_l'].attributes.marketState !== "REGULAR") {
              return variables.var_stockname + ' ' + variables.var_marketstate;
            } else {
              return variables.var_stockname;
            }
          ]]]
        stockprice: |
          [[[
            return variables.var_stockprice + ' ' + variables.var_pricechange + ' ' + variables.var_percentchange;
          ]]]
        graph:
          card:
            type: custom:apexcharts-card
            series:
              - entity: sensor.yahoofinance_igl5_l
                color: "#A07855"
                type: line
                curve: smooth
                extend_to: now
                fill_raw: last
            apex_config:
              chart:
                height: 60px
              stroke:
                width: 2
              grid:
                show: false
              tooltip:
                enabled: false
            layout: minimal
            graph_span: 9h
            span:
              start: day
              offset: +8h
            card_mod:
              style: |
                ha-card {
                  position: relative;
                  padding: 0;
                  border: none;
                  background: none !important;
                  margin-left: 33px;
                  margin-right: 33px;
                }
                .content {
                  position: absolute;
                  width: 100%;
                  bottom: 0;  # Align the chart to the bottom without changing card height
                  transform: translateY(10px);  # Adjust this value to move the graph up/down
                }
      styles:
        grid:
          - grid-template-rows: auto auto 1fr
          - grid-template-areas: "\"stockname\" \"stockprice\""
          - justify-items: start
          - align-items: start
        card:
          - height: 100px
          - padding: 0
        custom_fields:
          stockname:
            - font-size: 13px
            - color: "#d3d3d3"
            - justify-self: start
            - text-align: left
            - padding-left: 34px
            - top: 1px
            - left: 36px
          stockprice:
            - font-size: 20px
            - color: "#eeeeee"
            - justify-self: start
            - text-align: left
            - padding-left: 40px
            - font-weight: 500
          graph:
            - position: absolute
            - width: 100%
            - left: 0
            - bottom: 0
      card_mod:
        style: |
          ha-card{
            border: none !important;
            background: none !important;
          }
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.swipebar_stockgraph
        state: "on"
    card:
      type: custom:button-card
      variables:
        var_stockname: |
          [[[ 
            return states['sensor.yahoofinance_icsu_l'].attributes.symbol;
          ]]]
        var_stockprice: |
          [[[ 
            const currencySymbol = states['sensor.yahoofinance_icsu_l'].attributes.currencySymbol || '£';
            return `<span style="font-size: 0.6em">${currencySymbol} </span>` + parseFloat(states['sensor.yahoofinance_icsu_l'].state / 100).toFixed(2);
          ]]]
        var_pricechange: |
          [[[ 
            const changePrice = parseFloat(states['sensor.yahoofinance_icsu_l'].attributes.regularMarketChange / 100).toFixed(4);
            const color = changePrice >= 0 ? '#66bb6a' : '#ef5350';
            const sign = changePrice >= 0 ? '+' : '';
            return `<span style="color: ${color}; font-size: 0.6em;">${sign}${changePrice}</span>`;
          ]]]
        var_percentchange: |
          [[[ 
            const changePercent = states['sensor.yahoofinance_icsu_l'].attributes.regularMarketChangePercent;
            const color = changePercent >= 0 ? '#66bb6a' : '#ef5350';
            const sign = changePercent >= 0 ? '+' : '';
            return `<span style="color: ${color}; font-size: 0.6em;">(${sign}${changePercent}%)</span>`;
          ]]]
        var_marketstate: |
          [[[ 
            const marketState = states['sensor.yahoofinance_icsu_l'].attributes.marketState;
            let marketStatus, color;
            
            if (marketState === "REGULAR") {
              marketStatus = "Market Open";
              color = '#8FBF8F';
            } else if (marketState === "POST") {
              marketStatus = "Post-Market";
              color = '#BF8F8F';
            } else if (marketState === "POSTPOST") {
              marketStatus = "Market Closed";
              color = '#BF8F8F';
            } else if (marketState === "CLOSED") {
              marketStatus = "Market Closed";
              color = '#BF8F8F';
            } else if (marketState === "PRE") {
              marketStatus = "Pre-Market";
              color = '#BFBF8F';
            } else {
              marketStatus = "unknown state";
              color = '#AAAAAA'; // Default color for unknown state
            }
            return `<span style="font-size: 0.8em; color: ${color};"> (${marketStatus})</span>`;
          ]]]
      custom_fields:
        stockname: |
          [[[
            if (states['sensor.yahoofinance_icsu_l'].attributes.marketState !== "REGULAR") {
              return variables.var_stockname + ' ' + variables.var_marketstate;
            } else {
              return variables.var_stockname;
            }
          ]]]
        stockprice: |
          [[[
            return variables.var_stockprice + ' ' + variables.var_pricechange + ' ' + variables.var_percentchange;
          ]]]
        graph:
          card:
            type: custom:apexcharts-card
            series:
              - entity: sensor.yahoofinance_igl5_l
                color: "#A07855"
                type: line
                curve: smooth
                extend_to: now
                fill_raw: last
            apex_config:
              chart:
                height: 60px
              stroke:
                width: 2
              grid:
                show: false
              tooltip:
                enabled: false
            layout: minimal
            graph_span: 9h
            span:
              start: day
              offset: +8h
            card_mod:
              style: |
                ha-card {
                  position: relative;
                  padding: 0;
                  border: none;
                  background: none !important;
                  margin-left: 33px;
                  margin-right: 33px;
                }
                .content {
                  position: absolute;
                  width: 100%;
                  bottom: 0;  # Align the chart to the bottom without changing card height
                  transform: translateY(10px);  # Adjust this value to move the graph up/down
                }
      styles:
        grid:
          - grid-template-rows: auto auto 1fr
          - grid-template-areas: "\"stockname\" \"stockprice\""
          - justify-items: start
          - align-items: start
        card:
          - height: 100px
          - padding: 0
        custom_fields:
          stockname:
            - font-size: 13px
            - color: "#d3d3d3"
            - justify-self: start
            - text-align: left
            - padding-left: 34px
            - top: 1px
            - left: 36px
          stockprice:
            - font-size: 20px
            - color: "#eeeeee"
            - justify-self: start
            - text-align: left
            - padding-left: 40px
            - font-weight: 500
          graph:
            - position: absolute
            - width: 100%
            - left: 0
            - bottom: 0
      card_mod:
        style: |
          ha-card{
            border: none !important;
            background: none !important;
          }

0 replies

Selsker Dashboard #667

Replies: 12 comments · 14 replies

willliamchan Jul 26, 2024 Author

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

willliamchan Jul 27, 2024 Author

willliamchan Dec 19, 2024 Author

Clooos Dec 10, 2024 Maintainer

willliamchan Dec 19, 2024 Author

willliamchan Dec 19, 2024 Author

willliamchan Dec 19, 2024 Author

willliamchan Dec 19, 2024 Author

Replies: 12 comments 14 replies

willliamchan
Jul 26, 2024
Author

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

willliamchan
Jul 27, 2024
Author

willliamchan Dec 19, 2024
Author

Clooos Dec 10, 2024
Maintainer

willliamchan Dec 19, 2024
Author

willliamchan Dec 19, 2024
Author

willliamchan Dec 19, 2024
Author

willliamchan
Dec 19, 2024
Author