Best way to manage visually an input_select linked to scene in lovelace?

Configuration Frontend
9

This can be done with the wonderful Lovelace: Button card.

For the back-end part:

  • You need an input-select setup, you have apparently
  • You need automations so that each time you change the “input-select”, the right scene is set or action executed.

For the front-end:

  • Create a horizontal-stack that will contain your 4 buttons
  • Add 4 blocks in it of type a custom:button-card

Here is my setup expanded.
You have to change the icon/label & action to execute when button is pressed.
This includes the “state logic” to adapt button back-color when the selection of the input-select matchs a given value associated with the button.

And the component allows a lot more…check the doc.

The “template” as proposed by Tom_I is a even a more cleaner way to avoid copy of 4 times the same layout.

          - type: horizontal-stack
            cards:
              - type: custom:button-card
                icon: mdi:seat
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    entity_id: input_select.state_bureau
                    option: 'homeworking'
                hold_action:
                  action: more-info
                show_icon: true
                show_name: true
                entity: input_select.state_bureau
                name: Homeworking
                styles:
                  card:
                    - background-color: rgb(59,64,72)
                state:
                  - value: "homeworking"
                    styles:
                      card:
                        - background-color: white
                        - color: rgb(59,64,72)
                      icon:  
                        - color: rgb(59,64,72)
                      
              - type: custom:button-card
                icon: mdi:weather-night
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    entity_id: input_select.state_bureau
                    option: 'day'
                hold_action:
                  action: more-info
                show_icon: true
                show_name: true
                entity: input_select.state_bureau
                name: Day
                styles:
                  card:
                    - background-color: rgb(59,64,72)
                state:
                  - value: "day"
                    styles:
                      card:
                        - background-color: white
                        - color: rgb(59,64,72)
                      icon:  
                        - color: rgb(59,64,72)
                      
              - type: custom:button-card
                icon: mdi:weather-sunny
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    entity_id: input_select.state_bureau
                    option: 'evening'
                hold_action:
                  action: more-info
                show_icon: true
                show_name: true
                entity: input_select.state_bureau
                name: Evening
                styles:
                  card:
                    - background-color: rgb(59,64,72)
                state:
                  - value: "evening"
                    styles:
                      card:
                        - background-color: white
                        - color: rgb(59,64,72)
                      icon:  
                        - color: rgb(59,64,72)
                      
              - type: custom:button-card
                icon: mdi:power-plug-off
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    entity_id: input_select.state_bureau
                    option: 'sleep_all'
                hold_action:
                  action: more-info
                show_icon: true
                show_name: true
                entity: input_select.state_bureau
                name: Sleep
                styles:
                  card:
                    - background-color: rgb(59,64,72)
                state:
                  - value: "sleep_all"
                    styles:
                      card:
                        - background-color: white
                        - color: rgb(59,64,72)
                      icon:  
                        - color: rgb(59,64,72)
2 Likes