Custom-Button Hue Scene Selector

HugosDad · October 10, 2022, 10:43pm

Hi,

I wanted to have something on my view to initiate my Hue Scenes and have (some how) managed to produce this:

I’m quite pleased with it, and it actually works, which is always nice.
Would anyone have the full-res images for the Hue Scene Gallery, these are just screenshots from the app.

Also, in edit mode, the images appear to be jumping out of the card and I’m unsure if this will cause problems elsewhere:

This is my current code, if anyone could help me improve it I’d be most grateful!

type: vertical-stack
title: Hue Scene Selector
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color: rgb(28, 128, 199)
        show_icon: false
        styles:
          card:
            - height: 165px
            - width: 258px
            - background-image: url("/local/pics/ArcticAurora.jpeg")
            - background-repeat: no-repeat
            - background-size: 258px 165px
        tap_action:
          action: call-service
          service: hue.hue_activate_scene
          service_data:
            scene_name: arctic aurora
            group_name: Study
            dynamic: true
      - type: custom:button-card
        tap_action:
          action: call-service
          service: hue.hue_activate_scene
          service_data:
            scene_name: Frosty Dawn
            group_name: Study
            dynamic: true
        styles:
          card:
            - height: 165px
            - width: 258px
            - background-image: url("/local/pics/FrostyDawn.jpeg")
            - background-repeat: no-repeat
            - background-size: 258px 165px
      - type: custom:button-card
        tap_action:
          action: call-service
          service: hue.hue_activate_scene
          service_data:
            scene_name: Galaxy
            group_name: Study
            dynamic: true
        styles:
          card:
            - height: 165px
            - width: 258px
            - background-image: url("/local/pics/Galaxy.jpeg")
            - background-repeat: no-repeat
            - background-size: 258px 165px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: call-service
          service: hue.hue_activate_scene
          service_data:
            scene_name: Moonlight
            group_name: Study
            dynamic: true
        styles:
          card:
            - height: 165px
            - width: 258px
            - background-image: url("/local/pics/Moonlight.jpeg")
            - background-repeat: no-repeat
            - background-size: 258px 165px
      - type: custom:button-card
        tap_action:
          action: call-service
          service: hue.hue_activate_scene
          service_data:
            scene_name: Painted Sky
            group_name: Study
            dynamic: true
        styles:
          card:
            - height: 165px
            - width: 258px
            - background-image: url("/local/pics/PaintedSky.jpeg")
            - background-repeat: no-repeat
            - background-size: 258px 165px
      - type: custom:button-card
        tap_action:
          action: call-service
          service: hue.hue_activate_scene
          service_data:
            scene_name: Winter Mountain
            group_name: Study
            dynamic: true
        styles:
          card:
            - height: 165px
            - width: 258px
            - background-image: url("/local/pics/WinterMountain.jpeg")
            - background-repeat: no-repeat
            - background-size: 258px 165px

breinonline · December 11, 2022, 6:28am

Looks nice, I was looking for something like this. Where did you get the images for the scenes?

HugosDad · December 13, 2022, 6:26am

Screenshot and crop from the Hue app, shame there’s not an up to date library

AJBU · January 23, 2023, 5:51pm

You can find information on the source of the scene images in the Hue app, Settings → About. Scroll down to see all the images used with author, license and download link if available

HugosDad · January 26, 2023, 3:29pm

Didn’t know that, thanks!

realsby · January 10, 2025, 5:04pm

There is a warning in the logs like;
Use of service_call 'hue_activate_scene' is deprecated and will be removed in a future release. Please use scene entities instead

I’m using it now like following in my setup, I hope it helps someone;

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: call-service
          service: scene.turn_on
          service_data:
            entity_id: scene.downstairs_blood_moon
        size: 100%
        styles:
          card:
            - height: 125px
            - background-image: url("/local/hue_pics/blood_moon.png")
            - background-repeat: no-repeat
            - background-size: 100% 125px
      - type: custom:button-card
        tap_action:
          action: call-service
          service: scene.turn_on
          service_data:
            entity_id: scene.downstairs_frosty_dawn
        size: 100%
        styles:
          card:
            - height: 125px
            - background-image: url("/local/hue_pics/frosty_dawn.png")
            - background-repeat: no-repeat
            - background-size: 100% 125px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: call-service
          service: scene.turn_on
          service_data:
            entity_id: scene.downstairs_narcissa
        size: 100%
        styles:
          card:
            - height: 125px
            - background-image: url("/local/hue_pics/narcissa.png")
            - background-repeat: no-repeat
            - background-size: 100% 125px
      - type: custom:button-card
        tap_action:
          action: call-service
          service: scene.turn_on
          service_data:
            entity_id: scene.downstairs_tokyo
        size: 100%
        styles:
          card:
            - height: 125px
            - background-image: url("/local/hue_pics/tokyo.png")
            - background-repeat: no-repeat
            - background-size: 100% 125px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: call-service
          service: scene.turn_on
          service_data:
            entity_id: scene.downstairs_valley_dawn
        size: 100%
        styles:
          card:
            - height: 125px
            - background-image: url("/local/hue_pics/valley_dawn.png")
            - background-repeat: no-repeat
            - background-size: 100% 125px
      - type: custom:button-card
        tap_action:
          action: call-service
          service: scene.turn_on
          service_data:
            entity_id: scene.downstairs_glowing_grins
        size: 100%
        styles:
          card:
            - height: 125px
            - background-image: url("/local/hue_pics/glowing_grins.png")
            - background-repeat: no-repeat
            - background-size: 100% 125px
grid_options:
  columns: full
  rows: auto

Which width is responsive enough for me and it looks like this;