Input Select Buttons Show State

Configuration Frontend
1

Hi everyone,

I created an Input Select Helper with 3 options to control the volume of my Sonos System. I created 3 scripts for every volume option. (low, medium, high)

Now I want to have three buttons on my dashboard were I can toggle between these 3 options. I manage to add the buttons and to activate the scripts via an automation.

image

The only thing I have not yet managed to do is show the status of the switches. Apparently that is only possible when the action is: toggle. In my case the action is: call service

This is my yaml code:

type: horizontal-stack
cards:
  - show_name: false
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: input_select.select_option
      target:
        entity_id:
          - input_select.sonos_volume
      data:
        option: Low
    icon: mdi:volume-low
    show_state: false
    hold_action:
      action: none
  - show_name: false
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: input_select.select_option
      target:
        entity_id:
          - input_select.sonos_volume
      data:
        option: Medium
    icon: mdi:volume-medium
    show_state: true
    hold_action:
      action: none
  - show_name: false
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: input_select.select_option
      target:
        entity_id:
          - input_select.sonos_volume
      data:
        option: High
    icon: mdi:volume-high
    show_state: true
    hold_action:
      action: none
2

If it is an limitation of the card, you could think of using a different card like the Mushroom Template Card.

You can template a text to show, or chane icon color based on a Jinja2 template.

An alternative can be using Card-mod to change the card based on some variables.

1 Like
3

One thing you could do is create a template binary sensor for each of the three states (high, medium, and low) and add those sensors as the entity for each button. I’m pretty sure this would work with the button cards you are using.

I do something similar with some custom-button-cards (I had other ways in which I wanted to control the style, which is why I’ve used those cards). Here’s an edited version of my cards (superfolous styles, etc have been removed).

type: horizontal-stack
cards:
  - type: custom:button-card
    name: 🎶
    entity: binary_sensor.sonos_den_grouped_to_lounge
    color_type: card
    show_icon: false
    state:
      - value: 'on'
        color: var(--accent-color)
    tap_action:
      action: call-service
      service: script.sonos_join_child_to_parent
      service_data:
        parent: media_player.sonos_lounge
        child: media_player.sonos_den
  - type: custom:button-card
    name: 📺
    entity: binary_sensor.sonos_den_grouped_to_den
    color_type: card
    show_icon: false
    state:
      - value: 'on'
        color: var(--accent-color)
    tap_action:
      action: call-service
      service: script.sonos_join_child_to_parent
      service_data:
        parent: media_player.sonos_den
        child: media_player.sonos_den
4

Thanks for your help. I finally got it working. The buttons do what they’re supposed to do. There’s still one thing I can’t get done. The color. I want the color of the logo to change to orange when active. Any ideas? This is my code:

type: horizontal-stack
cards:
  - show_name: false
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: input_select.select_option
      target:
        entity_id:
          - input_select.sonos_volume
      data:
        option: Low
    icon: mdi:volume-low
    show_state: true
    hold_action:
      action: none
  - show_name: false
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: input_select.select_option
      target:
        entity_id:
          - input_select.sonos_volume
      data:
        option: Medium
    icon: mdi:volume-medium
    show_state: true
    hold_action:
      action: none
  - show_name: false
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: input_select.select_option
      target:
        entity_id:
          - input_select.sonos_volume
      data:
        option: High
    icon: mdi:volume-high
    show_state: true
    hold_action:
      action: none
5

You could use custom-button-card, which I linked to, or you could use card-mod, which Timmuhhh linked to.

6

I am sorry, I don’t have enough knowledge how to do that.

Can you use my code and past that back in a way that it should work? I like to learn, but I don’t know were to go. :slight_smile: