Newbie needs some help

[wnbrandt]

Goal

I have two things I am trying to achieve. One is to get the plus and minus button under the setpoint and taller so they are easier to tap on a wall tablet.

The other (fallback) is to have a popup that looks like this

Looks fine in the editor but on the dash board it looks like this

Would appreciate any thoughts.

Source Yaml

Main Card
type: custom:bubble-card
card_type: button
button_type: state
entity: switch.radiant_library
name: Library
icon: mdi:radiator
card_layout: large-sub-buttons-grid
grid_options:
  columns: 12
  rows: 3.297
rows: 3.297
scrolling_effect: false
show_state: false
button_action:
  tap_action:
    action: none
  double_tap_action:
    action: none
  hold_action:
    action: none
icon_action:
  tap_action:
    action: none
  double_tap_action:
    action: none
  hold_action:
    action: none
sub_button:
  main:
    - entity: input_select.hoa_radiant_library
      sub_button_type: select
      icon: mdi:arrow-decision-auto
      show_name: false
      show_state: true
      show_attribute: false
      content_layout: icon-right
      width: 140
    - entity: sensor.h5075_e723_temperature
      name: Current
      content_layout: icon-right
      width: 140
      show_name: true
      show_state: true
      show_background: true
      scrolling_effect: false
      state_background: false
    - entity: input_number.radiant_library_setpoint
      show_name: true
      show_state: true
      content_layout: icon-right
      width: 140
      name: Setpoint
      scrolling_effect: false
      state_background: false
      icon: mdi:target
      show_last_updated: false
      tap_action:
        action: navigate
        navigation_path: "#library-setpoint"
  bottom: []
modules:
  - room_card
  - icon_animations
  - conditional_icon
  - "!default"
room_card:
  square_icon: false
  room_main_background_size: 119
  room_main_icon_size: 84
icon_animations:
  animation_type: radiator
  animate_when:
    - condition: state
      entity_id: switch.radiant_library
      state:
        - "on"
styles: |
  .bubble-name {
    font-size: 3em !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    overflow: visible !important;
  }
  .bubble-name-container {
    height: auto !important;
    min-height: 80px !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .bubble-icon-container {
    pointer-events: none !important;
  }
  .bubble-button-card-container {
    background-color: ${hass.states['input_select.hoa_radiant_library'].state === 'Off' ? 'rgba(255, 70, 46, 0.9)' : hass.states['input_select.hoa_radiant_library'].state === 'Hand' ? 'rgba(0, 176, 4, 0.5)' : 'rgba(31, 119,255, 0.9)'} !important;
  }
  .bubble-icon {
    color: ${hass.states['switch.radiant_library'].state === 'on' ? 'red' : hass.states['input_select.hoa_radiant_library'].state === 'Off' ? 'grey' : 'blue'} !important;
  }
conditional_icon:
  icon_true: mdi:radiator
  icon_false: mdi:radiator-disabled
  conditions:
    - condition: state
      entity_id: switch.radiant_library
      state:
        - "on"

Pop Up Card
type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#library-setpoint"
    name: Library Setpoint
    icon: mdi:thermometer-lines
    bg_opacity: "88"
    margin_top_mobile: 100px
    margin_top_desktop: 150px
    auto_close: false
    button_type: name
    sub_button:
      main: []
      bottom: []
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: name
        name: ""
        icon: mdi:minus
        card_layout: large
        tap_action:
          action: call-service
          service: input_number.decrement
          target:
            entity_id: input_number.radiant_library_setpoint
        card_mod:
          style: |
            ha-card {
              width: 58px !important;
            }
            @media (max-width: 768px) {
              ha-card {
                width: 15% !important;
              }
            }
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: input_number.radiant_library_setpoint
        name: ""
        icon: mdi:target
        show_state: true
        show_name: false
        card_layout: large
        slider_options:
          step: 0.5
        card_mod:
          style: |
            ha-card {
              left: -80px;
              width: 218%;
            }
            @media (max-width: 768px) {
              ha-card {
                left: -10%;
                width: 80%;
              }
            }
      - type: custom:bubble-card
        card_type: button
        button_type: name
        name: ""
        icon: mdi:plus
        card_layout: large
        tap_action:
          action: call-service
          service: input_number.increment
          target:
            entity_id: input_number.radiant_library_setpoint
        card_mod:
          style: |
            ha-card {
              left: 78px;
              width: 58px !important;
            }
            @media (max-width: 768px) {
              ha-card {
                left: -5%;
                width: 15% !important;
              }
            }

Which step did you already try?

way to many tries on my own and with Claude

Problem

See above

Read the documentation

• I have read the documentation

[swesharkie]

Hi,

Don't know how much of an help this may be, but perhaps a step in the right direction :).

Without taking your entire config and changing out the entities and installing some modules I did a small mockup that puts "plus - entity - minus" -buttons in that order using the sub-buttons only card.
I also made the side-buttons larger to allow easier tap.

I hope it takes you in the right direction at least.
Code:

type: custom:bubble-card
card_type: sub-buttons
sub_button:
  main: []
  bottom:
    - entity: light.window_strip
      icon: fa-solid:plus-circle
      scrolling_effect: false
      show_background: false
      light_background: false
      tap_action:
        action: perform-action
        perform_action: light.turn_on
        target:
          entity_id: light.window_strip
        data:
          transition: 5
          brightness_step_pct: 5
      content_layout: icon-top
      fill_width: false
      width: 20
    - entity: light.window_strip
      scrolling_effect: false
      show_background: true
      light_background: false
      show_name: true
      show_state: true
      show_attribute: true
      attribute: brightness
      tap_action:
        action: none
      content_layout: icon-left
      fill_width: true
    - entity: light.window_strip
      icon: fa-solid:minus
      scrolling_effect: false
      show_background: false
      light_background: false
      tap_action:
        action: perform-action
        perform_action: light.turn_on
        target:
          entity_id: light.window_strip
        data:
          transition: 5
          brightness_step_pct: -5
      content_layout: icon-bottom
      fill_width: false
      width: 20
styles: |-
  .bubble-sub-button {
    margin-right: 2% !important;
    margin-left: 2% !important;
    border: 2px solid rgba(255, 255, 255, 0.8);
  }
rows: 0.938
hide_main_background: true
footer_mode: false
footer_full_width: false
card_layout: normal

[wnbrandt]

Thank you for the sample. I appreciate the approach but can't get the buttons to align or look reasonable. I don't understand why HA in general does not have a simple WSYWIG editor. Not bitching at you as your work looks great but I seem to be burning hours on trying to get basic visual work done in HA. Your Bubble card got me most of the way there.