Scene selection buttons; highlight only the selected scene

Configuration
1

Hi All,

Apologies for the possibly convoluted title, I’m struggling with this issue.
I have a number of scenes for the bedroom of my daughters that I want to display in an intuitive way when they select a button it should light up, when they select another one, that one should light up.

This is what I want it look like when I would hit the 2nd button:

image
image1152×648 111 KB

2

You can do something with picture-entity:

cards:
  - cards:
      - entity: switch.scene1
        icon_height: 10px
        name: Bedroom
        show_state: false
        state_image:
          off: /local/images/nest/gray.png
          on: /local/images/nest/green.png
        type: picture-entity
    type: horizontal-stack
type: vertical-stack
1 Like
3

Thanks @poudenes,

That is how I made the screenshots; my issue is that I want to change the appearance of not only the card I toggle (from off to on) but also the other cards in the horizontal stack (from on to off).

FYI, this is the code I have now

cards:
  - aspect_ratio: 99%
    entity: scene.brgdawn
    name: dawn
    image: local/Dawn.jpg
    show_name: false
    show_state: false
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: scene.brgdawn
    type: picture-entity
  - aspect_ratio: 99%
    entity: scene.brgnoon
    image: local/Noon.jpg
    show_name: false
    show_state: false
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: scene.brgnoon
    type: picture-entity
  - aspect_ratio: 99%
    entity: scene.brgdusk
    image: local/Dusk.jpg
    show_name: false
    show_state: false
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: scene.brgdusk
    type: picture-entity
  - aspect_ratio: 99%
    entity: scene.brgnight
    image: local/Night.jpg
    show_name: false
    show_state: false
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: scene.brgnight
    type: picture-entity
type: horizontal-stack
4

Maybe something with a IF ELSE coding?

5

That could work, I think, but I have no clue how to do it here… You?

The best solution I came up with is to make a set of virtual switches and toggle these from the scene, but that feels way to complicated…

6

an idea:
when you turn on a scene its state becomes on (I presume) and you can test every scene’s state, right?
then you can change appearance of your images depending on the states of scenes they represent.
for example, if you use button-card, you can apply a filter so the image will be brighter/less bright etc.
does it makes sense?
not sure you can do that using standard cards (maybe several conditional cards, I’m not familiar with picture-elements at all).

7

Hi All,

I think I solved it for about 80% (and my solution wasn’t that convoluted :slight_smile: )

I made four dummy switches, one for each scene:

switch:
  - platform: mqtt
    name: "dummySceneBRGDawn"
    state_topic: "DummyScene/BRGDawn/Status"
    command_topic: "DummyScene/BRGDawn/Status"
    payload_on: "On"
    payload_off: "Off"
    qos: 2
    retain: true
    optimistic: false    

  - platform: mqtt
    name: "dummySceneBRGNoon"
    state_topic: "DummyScene/BRGNoon/Status"
    command_topic: "DummyScene/BRGNoon/Status"
    payload_on: "On"
    payload_off: "Off"
    qos: 2
    retain: true
    optimistic: false    

  - platform: mqtt
    name: "dummySceneBRGDusk"
    state_topic: "DummyScene/BRGDusk/Status"
    command_topic: "DummyScene/BRGDusk/Status"
    payload_on: "On"
    payload_off: "Off"
    qos: 2
    retain: true
    optimistic: false    

  - platform: mqtt
    name: "dummySceneBRGNight"
    state_topic: "DummyScene/BRGNight/Status"
    command_topic: "DummyScene/BRGNight/Status"
    payload_on: "On"
    payload_off: "Off"
    qos: 2
    retain: true
    optimistic: false

Updated the scene descriptions to switch the dummies as required:

# Scenes
scene:
  - name: BRGDawn
    alexa_description: "Girls Dawn"
    alexa_display_categories: "SCENE"
    alexa_hidden: false
    entities:
      light.bedroom_meisjes_beneden:
        state: on
        brightness: 100
      light.bedroom_meisjes_beneden_rgbw:
        state: on
        brightness: 150
        rgb_color: [219,144,125]
        white_value: 150
      switch.dummyscenebrgdawn:
        state: On
      switch.dummyscenebrgnoon:
        state: Off
      switch.dummyscenebrgdusk:
        state: Off
      switch.dummyscenebrgnight:
        state: Off
  - name: BRGNoon
    alexa_description: "Girls Noon"
    alexa_display_categories: "SCENE"
    alexa_hidden: false
    entities:
      light.bedroom_meisjes_beneden:
        state: on
        brightness: 200
      light.bedroom_meisjes_beneden_rgbw:
        state: on
        brightness: 200
        rgb_color: [175,175,0]
        white_value: 250
      switch.dummyscenebrgdawn:
        state: Off
      switch.dummyscenebrgnoon:
        state: On
      switch.dummyscenebrgdusk:
        state: Off
      switch.dummyscenebrgnight:
        state: Off
  - name: BRGDusk
    alexa_description: "Girls Dusk"
    alexa_display_categories: "SCENE"
    alexa_hidden: false
    entities:
      light.bedroom_meisjes_beneden:
        state: on
        brightness: 75
      light.bedroom_meisjes_beneden_rgbw:
        state: on
        brightness: 100
        rgb_color: [206,117,194]
        white_value: 150
      switch.dummyscenebrgdawn:
        state: Off
      switch.dummyscenebrgnoon:
        state: Off
      switch.dummyscenebrgdusk:
        state: On
      switch.dummyscenebrgnight:
        state: Off
  - name: BRGNight
    alexa_description: "Girls Night"
    alexa_display_categories: "SCENE"
    alexa_hidden: false
    entities:
      light.bedroom_meisjes_beneden:
        state: off
      light.bedroom_meisjes_beneden_rgbw:
        state: off
      switch.dummyscenebrgdawn:
        state: Off
      switch.dummyscenebrgnoon:
        state: Off
      switch.dummyscenebrgdusk:
        state: Off
      switch.dummyscenebrgnight:
        state: On

And finally changed the entity to the dummy switch in LoveLace

cards:
  - aspect_ratio: 99%
    entity: switch.dummyscenebrgdawn
    image: local/Dawn.jpg
    name: dawn
    show_name: false
    show_state: false
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: scene.brgdawn
    type: picture-entity
  - aspect_ratio: 99%
    entity: switch.dummyscenebrgnoon
    image: local/Noon.jpg
    show_name: false
    show_state: false
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: scene.brgnoon
    type: picture-entity
  - aspect_ratio: 99%
    entity: switch.dummyscenebrgdusk
    image: local/Dusk.jpg
    show_name: false
    show_state: false
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: scene.brgdusk
    type: picture-entity
  - aspect_ratio: 99%
    entity: switch.dummyscenebrgnight
    image: local/Night.jpg
    show_name: false
    show_state: false
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: scene.brgnight
    type: picture-entity
type: horizontal-stack

Now only the active scene is highlighted

Hope this helps some other people as well

8

have you tried using scenes’ states instead of dummy switches?

9

No, how would that work?

10

a few posts up I described my untested idea :wink:

11

Ah, what I understand is that the scene doesn’t store its state. Hence me cheating with dummy switch

12

I’m not using scenes but hoped that they are ordinary state objects and therefore are represented in state machine. Well… maybe not yet, that would be nice.