Input_select entity help

Configuration Frontend
1

I have an input select entity defined, and started working on a nice frontend view of it so I can control it. I am not a fan of the standard drop down, and created the following:

- card:
      type: horizontal-stack
      cards:
        - type: custom:mushroom-template-card
          primary: |
            [[[ return states["input_select.scene_landscaping"].state ]]]
          secondary: ''
          icon: mdi:trees
          icon_color: |-
            {% if is_state('input_select.scene_landscaping','Off') %}
              green
            {% endif %}
          layout: vertical
          tap_action:
            action: call-service
            service: input_select.select_next
            target:
              entity_id: input_select.scene_landscaping
            data:
              option: All
          entity: input_select.scene_landscaping

I can see the state change to All when I click on it.
I am trying to get the label to be the actual state, so ultimately as I cycle through it, I can see the label change to the state so I can visually see it.

I also added the tap_action to go to select_next. I assume it would cycle through the options, but it is not working.

Is this the best representation of a input_select entity? I am using it to trigger a node red flow and setup the right lighting for the landscaping based on the option.
I will add a delay on node-red to account for the clicking until a selection holds for 2 sec as an exampole. Not there yet, but trying to give context for my use case.

2 
type: custom:mushroom-template-card
primary: '{{ states(entity) }}'
secondary: ''
icon: mdi:home
entity: input_select.scene_landscaping
icon_color: |-
  {% if is_state(entity,'Off') %}
    green
  {% endif %}
layout: vertical
tap_action:
  action: call-service
  service: input_select.select_next
  target:
    entity_id: input_select.scene_landscaping
  data:
    cycle: true
hold_action:
  action: call-service
  service: input_select.select_option
  target:
    entity_id: input_select.scene_landscaping
  data:
    option: All
3

I came across this and adapted it to what I want.

Here is the code for the template modified.

input_select_button:
    #aspect_ratio: 4/3
    hold_action:
      action: none
    label: |
      [[[ entity.last_changed ]]]
    show_last_changed: true
    show_name: true
    show_state: true
    state:
      - styles:
          icon:
            - color: var(--paper-item-icon-active-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: >
          [[[ return states["input_select.scene_landscaping"].state ]]]
      - styles:
          state:
            - color: var(--secondary-text-color)
        value: 'off'
      - icon: 'mdi:alert'
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - box-shadow: none
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--paper-card-background-color': 'rgba(0, 0, 0, 0)'
      grid:
        - grid-template-areas: '"n n n" "i s s" "l l l"'
        - grid-template-rows: auto 33% auto
        - grid-template-columns: 33% auto auto
      icon:
        - width: 28px
        - padding: 0px 0px 0px 0px
        - margin: 0% 0% 0% 0%
      label:
        - justify-self: left
        - font-size: 12px
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: left
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
      state:
        - justify-self: left
        - font-size: 12px
        - padding: 0px 0px 0px 3px
        - color: var(--secondary-text-color)
    tap_action:
      action: call-service
      service: input_select.select_next
      target:
        entity_id: input_select.scene_landscaping
    double_tap_action:
      action: more-info

Now just need to do some customization on my front end to fix the icons, etc.

4

Awesome. Thank you!