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:

7

in case anyone is wondering about implementation, I needed the same function. Now the color changes based on the state of the input_select.
Using a button_card.

          - type: custom:button-card
            icon: mdi:bullseye
            name: ALL
            entity: input_select.area_name
            styles:
              card:
                - background-color: >-
                    [[[
                      if (states['input_select.area_name'].state == 'All')
                        return 'blue';
                      else
                        return 'red';
                    ]]]
                - box-shadow: none
            tap_action:
              action: call-service
              service: input_select.select_option
              target:
                entity_id:
                  - input_select.area_name
              data:
                option: All
            hold_action:
              action: none

Now working on the rest, but wanted to share given I started off based on the code above.

8

now trying to transger this code to a button template so I can use it for multiple buttons with a short call.
This is the template:

button_area_link:
  color_type: icon
  show_name: true
  show_state: false
  icon: '[[[ return variables.icon ]]]'
  entity: '[[[ return variables.entity ]]]'
  name: '[[[ return variables.name ]]]'
  styles:
    card:
      - width: 100px
      - height: 100px
      - background-color: transparent
      - box-shadow: none
      - background-color: >-
          [[[
            if (parseFloat(states['input_select.area_name'].state) == 'variables.name' )
              return 'var(--primary-color)';
            else
              return 'var(--ha-card-background)';
          ]]]
    icon:
      - width: 100px
      - height: 100px
    name:
      #Capitalize does not work
      - text-transform: capitalize
  tap_action:
    action: call-service
    service: input_select.select_option
    target:
      entity_id:
        - input_select.area_name
    data:
      option: '[[[ return variables.name ]]]'
  hold_action:
    action: none

This is the call:

- type: custom:button-card
            template: button_area_link
            variables:
              icon: mdi:car-multiple
              entity: input_select.area_name
              name: Gallery

Much shorter in my dashboard file.
Everything seems to work except the color changing, which I assume it is due to this:

 if (parseFloat(states['input_select.area_name'].state) == 'variables.name' )

I also tried it without the parseFloat (got that from some of my google searches)

 if (states['input_select.area_name'].state == 'variables.name' )

Any idea what’s wrong. The cde I posted earlier works, so it is something with the comparison of the strings, or the retrieval of the variables.name…either way, not sure how to debug it because I can’t use the Developer->Template

9

Have not checked all code but this is wrong, variables should not be in quotes.

10

I removed the quotes but still not workng. For completion, this is the code in the main yaml. I am only working the template development on a single button to test. This is the non-template code that works as expected.

- type: custom:button-card
            template: button_area_link
            icon: mdi:garage-variant
            name: Garage
            show_name: true
            entity: input_select.area_name
            styles:
              card:
                - text-transform: capitalize
                - background-color: >-
                    [[[
                      if (states['input_select.area_name'].state == 'Garage')
                        return 'var(--primary-color)';
                      else
                        return 'var(--ha-card-background)';
                    ]]]
                - box-shadow: none
            tap_action:
              action: call-service
              service: input_select.select_option
              target:
                entity_id:
                  - input_select.area_name
              data:
                option: Garage
            hold_action:
              action: none

(not sure why the code above does not have the proper spacing when pasted)

All code seems to work. The template code works as expected except the background color change. I mean when clicked, it changes the input_select variable to the right value, just not the color.
Animation

11

For whatever reason, I this morning, tried it again, and it worked.
Maybe a refresh/caching issue, although I did clear it for my testing. I’ll take it.

- background-color: >-
          [[[
            if (states['input_select.area_name'].state == variables.name)
              return 'var(--primary-color)';
            else
              return 'var(--ha-card-background)';
          ]]]