[Use-Case] Dropdown scene selector

[MrBearPresident]

[Use-Case] Dropdown scene selector

Story why I build this.

This all started with my dad who is just starting with Home Assistant. He already had some IKEA lamps. But he was somewhat jealous on the flexibility I had in Home Assistant. With little convincing I converted him.
He dreamed of a system where he could easily change the scenes he had. But It couldn't be to complicated because my mother had to be able to work with it as well. He started designing scenes so he could easily switch between some presets. So he started placing buttons on his dashboard that would trigger the scenes.
Next step was to make switching between scenes even simpler. So he bought a "IKEA STYRBAR dimmer remote". This system explained below and my blueprint work together to make it as easy as possible.

blueprint

What we will need

• Scenes
• Input_Select
• Automation
• Bubble-Card

Scenes

Create the scenes you need with the following special attention.

• Give the scene a logical ID this we will need later on.
• If possible give the scene a name with a recognizable name.
  • My dad wanted just emojis as scene names. (for example: 📺 or 🍽️)
• Try to include all the same devices in the scenes that belong to the same scene-group.
  • By scene-group I mean something like all the lights in the living room.

Input_Select

• Create a input_select helper.
  • Through UI

    - Go to : Settings -> Devices -> Helpers
    - Push "Create Helper"
    - Choose "Dropdown"
    - Give it name
    

• As options give all the entityIDs of the scenes.
  • For example
    • scene.livingroom_tv
    • scene.livingroom_guest
    • scene.livingroom_off

Automation

For the automation you need something that checks if the scenes are triggered or when the input_select is changed.

When the input_select is changed the corresponding scene will be called.

When a scene is triggered the input_select will be set to that scene.

Automation

alias: AUT-GF-LR-SceneSaver
description: ""
triggers:
  - trigger: state
    entity_id:
      - scene.scn_gf_lr_wakeup
      - scene.scn_gf_lr_daylights
      - scene.scn_gf_lr_party
      - scene.scn_gf_lr_reading
      - scene.scn_gf_lr_tv
  - trigger: state
    entity_id:
      - input_select.help_gf_lr_sceneselector
    id: ChangedScene
conditions: []
actions:
  - choose:
      - conditions:
          - condition: trigger
            id:
              - ChangedScene
        sequence:
          - action: scene.turn_on
            target:
              entity_id: "{{states('input_select.help_gf_lr_sceneselector')}}"
    default:
      - action: input_select.select_option
        target:
          entity_id: input_select.help_gf_lr_sceneselector
        data:
          option: "{{trigger.from_state.entity_id}}"
mode: single

Bubble-Card

For bubble-card buttons I chose 2 options. Time will tell what he uses most.

There are multiple 'state' buttons that light up when the input_select is the same as the entity.

There is also a separator with 2 sub-buttons for each scene-group.

State-button

type: custom:bubble-card
card_type: button
button_type: state
entity: scene.scn_gf_lr_daylights
tap_action: {}
styles: |-
  .bubble-button-card-container {
      background: ${hass.states['input_select.help_gf_lr_sceneselector'].state != entity ? "" : "rgba(12,120,50,0.5)" } !important;
  )}
button_action:
  tap_action:
    action: toggle

Separator with sub-buttons

type: custom:bubble-card
card_type: separator
name: Lamps
icon: mdi:lightbulb-spot
sub_button:
  - entity: input_select.help_gf_lr_sceneselector
    show_state: true
    show_icon: false
  - entity: input_select.help_gf_lr_sceneselector2
    show_state: true
    show_icon: false
styles: |2-
   ${(() => {
            const subbutton1 = card.querySelectorAll('.bubble-sub-button-1 .bubble-dropdown-select');
            for (let i = 0; i < subbutton1[0].children.length; i++) {
              subbutton1[0].children[i].innerText = hass.states[subbutton1[0].children[i].__value].attributes.friendly_name;
            }

            const subbutton2 = card.querySelectorAll('.bubble-sub-button-2 .bubble-dropdown-select');
            for (let i = 0; i < subbutton2[0].children.length; i++) {
              subbutton2[0].children[i].innerText = hass.states[subbutton2[0].children[i].__value].attributes.friendly_name;
            }

            const subbutton1Name = card.querySelectorAll('.bubble-sub-button-1 .bubble-sub-button-name-container');
            const subbutton2Name = card.querySelectorAll('.bubble-sub-button-2 .bubble-sub-button-name-container');
            
            let name = subbutton1Name[0].innerText.toLowerCase();

            if(name.search('scene.')>=0){
              let start = name.search('scene');
              let sbstr = name.substring(start,name.length);
              if (sbstr.search(' ')>0){
                let end = start + sbstr.search(' ');
                sbstr = name.substring(start,end);
              }
              let newString = name.replace(sbstr, hass.states[sbstr].attributes.friendly_name);

              subbutton1Name[0].innerText = newString;
            }
            
            name = subbutton2Name[0].innerText.toLowerCase();

            if(name.search('scene.')>=0){
              let start = name.search('scene');
              let sbstr = name.substring(start,name.length);
              if (sbstr.search(' ')>0){
                let end = start + sbstr.search(' ');
                sbstr = name.substring(start,end);
              }
              let newString = name.replace(sbstr, hass.states[sbstr].attributes.friendly_name);

              subbutton2Name[0].innerText = newString;
            }
            
          })()}