Button card with select

Configuration Frontend
1

Hello :slight_smile:

I’m trying to achieve an easy and minimal looking way of setting the fanspeed of my dreame running valetudo. I would like to have a simple fan icon button, that acts as a select. So whenever i click it, the dropdown shows up and the selected value will be send. Like using the select.valetudo_fan entity:

image

However without the select, or have it way more “minimal” as just the current value written under the fan.

I tried to create a button card that calls the select.valetudo_fan entity.

image
image549×851 43.7 KB

...
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: select.valetudo_fan
            options:
              - high
              - mid
              - ...
        icon: mdi:fan
...

But that didn’t work and I found out, that the (input_)select.option service call is not the way to achieve that.

Is there any easy way to get this feature by using select.valetudo_fan entity our would I need work with a script to or similar to use the mqtt.publish service?

2

I may not be understanding what you are asking but it sounds like you could use a select helper with automation for the commands and use a conditional card to show or hide the drop-down. Again, perhaps I’m not interpreting the issue properly.

3

Something like this?

1 Like
4

exactly like this, thanks for the hint :slight_smile:

image

image


[...]
 - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 50% 50%
      grid-template-areas: |
        "A1 A2"
    cards:
      - type: horizontal-stack
        view_layout:
          grid-area: A1
        cards:
          - type: custom:button-card
            name: ''
            entity: select.valetudo_schlecki_fan
            show_state: true
            show_name: false
            styles:
              card:
                - font-size: 14px
              icon:
                - height: 64px
                - width: 64px
      - type: horizontal-stack
        view_layout:
          grid-area: A1
        cards:
          - type: custom:mushroom-select-card
            name: ' '
            entity: select.valetudo_schlecki_fan
            secondary_info: none
            icon_type: none
            fill_container: true
            container_title: false
            show_name: true
            show_title: false
            card_mod:
              style:
                mushroom-select-option-control$:
                  mushroom-select$: |
                    .mdc-select__anchor{
                      background: none !important;
                      border-radius: 12px !important;
                    }
                    .mdc-line-ripple::before {
                      border-bottom-width: 0px !important;
                    }
                    .mdc-line-ripple::after {
                      border-bottom-width: 0px !important;
                    }
                    .mdc-select__selected-text {
                      color: transparent !important;
                    }
                    .mdc-select__dropdown-icon {
                      fill: transparent !important;  
                    }
                    .mdc-select {
                      position: absolute !important;
                      width: 100% !important;
                      --select-height: 97px;
                      top: 0%;
                      right: 0%;
                    }
                .: |
                  ha-card {
                   background: none;
                   height:100%; 
                  }
      - type: horizontal-stack
        view_layout:
          grid-area: A2
        cards:
          - type: custom:button-card
            styles:
              card:
                - font-size: 14px
              icon:
                - height: 64px
                - width: 64px
            tap_action:
              action: call-service
              service: script.vacuum_clean_segments
[...]

need some small customization, but I’m happy :slight_smile:

1 Like
5

Great. Glad I could help :slightly_smiling_face:
Please consider marking my post above with the Solution tag/Like. Thank you!