Hue scenes mimicked in Ha (and on Buttons, was Tiles)

Share your Projects!
1

HI, Just thought Id share how I created Off scenes in Hue Api and use these in HA:

15

which is just a fun way of representing

22

had this for a long time already:

group:
  hue_light_control:
    name: Hue Light Control
    icon: mdi:spotlight
    control: hidden
    entities:
      - input_select.hue_scenes
      - input_select.hue_groups
      - script.set_hue_scene

with script:

  set_hue_scene:
    alias: Set Hue scene
    sequence:
      service: hue.hue_activate_scene
      data_template:
        group_name: >
          {{ states('input_select.hue_groups')}}
        scene_name: >
          {{ states('input_select.hue_scenes')}}

using the default scenes in the Hue-hub/app. Unfortunately no Off scenes are available, so I had to make them manually. Reading the Api docs wasn’t very clear on this, and following that exactly led to many errors…

with the help of Hue developers community and dev team, I finally made it. Duh, seems so simple when it all runs smoothly:

select a group you’d want to create a seen for
turn_off the lights (I want the Off scene)
check the hub ids of the lights in your group,
in the CLIP api debugger tool browse the path to scenes, enter

{
"name":"Off",
"lights":["15","4","2"],
"recycle":false}

and hit POST

after which you should see a command response succes.

You should immediately be able to use this newly created LightGroup, cause that’s what they are. The Hue api automatically selects the appropriate group for this set of lights, which you can use in the hue.hue_activate_scene script.

Happing scening!

my tiles configuration for the above is:

homeassistant:
  customize:
    input_text.tiles_set_hue_scene:
      custom_ui_state_card: state-card-tiles
      config:
        text_uppercase: false
        columns: 6
#        column_width: 50px #minmax(75px, 75px)
        icon_size: 50px
        row_height: 50px
        entities:
          - entity: script.tiles_set_hue_scene
            label: Arctic
            data: {option: 'Arctische dageraad'}
            style_template: >
              if (entities['input_select.hue_scenes'].state === 'Arctische dageraad') return '--tiles-text-color:black;background-size: contain;background-color: #00d0a0';
              return '--tiles-text-color: grey;background-size: contain; background-color: #555B65';
            image: /local/hue_scenes/arctic.png

          - entity: script.tiles_set_hue_scene
            label: Savanne
            data: {option: 'Savanne zonsondergang'}
            style_template: >
              if (entities['input_select.hue_scenes'].state === 'Savanne zonsondergang') return '--tiles-text-color:black;background-size: contain;background-color: #ff7935';
              return '--tiles-text-color: grey;background-size: contain; background-color: #555B65';
            image: /local/hue_scenes/savanna.png

          - entity: script.tiles_set_hue_scene
            label: Tropisch
            data: {option: 'Tropische schemering'}
            style_template: >
              if (entities['input_select.hue_scenes'].state === 'Tropische schemering') return '--tiles-text-color:black;background-size: contain;background-color: #a03aa3';
              return '--tiles-text-color: grey;background-size: contain; background-color: #555B65';
            image: /local/hue_scenes/tropical.png

          - entity: script.tiles_set_hue_scene
            label: Lente
            data: {option: 'Lentebloesem'}
            style_template: >
              if (entities['input_select.hue_scenes'].state === 'Lentebloesem') return '--tiles-text-color:black;background-size: contain;background-color: #ba496c';
              return '--tiles-text-color: grey;background-size: contain; background-color: #555B65';
            image: /local/hue_scenes/spring.png

          - entity: script.tiles_set_hue_scene
            label: Relax
            data: {option: 'Ontspannen'}
            style_template: >
              if (entities['input_select.hue_scenes'].state === 'Ontspannen') return '--tiles-text-color:black;background-size: contain;background-color: #ffc059';
              return '--tiles-text-color: grey;background-size: contain; background-color: #555B65';
            image: /local/hue_scenes/relax.png

          - entity: script.tiles_set_hue_scene
            label: Lezen
            data: {option: 'Lezen'}
            style_template: >
              if (entities['input_select.hue_scenes'].state === 'Lezen') return '--tiles-text-color:black;background-size: contain;background-color: #fdfb9f';
              return '--tiles-text-color: grey;background-size: contain; background-color: #555B65';
            image: /local/hue_scenes/lezen.png

          - entity: script.tiles_set_hue_scene
            label: Concent
            data: {option: 'Concentreren'}
            style_template: >
              if (entities['input_select.hue_scenes'].state === 'Concentreren') return '--tiles-text-color:black;background-size: contain;background-color: #a2eaf2';
              return '--tiles-text-color: grey;background-size: contain; background-color: #555B65';
            image: /local/hue_scenes/concentrate.png

          - entity: script.tiles_set_hue_scene
            label: Energie
            data: {option: 'Energie'}
            style_template: >
              if (entities['input_select.hue_scenes'].state === 'Energie') return '--tiles-text-color:black;background-size: contain;background-color: #a8dfed';
              return '--tiles-text-color: grey;background-size: contain; background-color: #555B65';
            image: /local/hue_scenes/energize.png

          - entity: script.tiles_set_hue_scene
            label: Helder
            data: {option: 'Helder'}
            style_template: >
              if (entities['input_select.hue_scenes'].state === 'Helder') return '--tiles-text-color:black;background-size: contain;background-color: #fcdb97';
              return '--tiles-text-color: grey;background-size: contain; background-color: #555B65';
            image: /local/hue_scenes/clear.png

          - entity: script.tiles_set_hue_scene
            label: Gedimd
            data: {option: 'Gedimd'}
            style_template: >
              if (entities['input_select.hue_scenes'].state === 'Gedimd') return '--tiles-text-color:black;background-size: contain;background-color: #8c642b';
              return '--tiles-text-color: grey;background-size: contain; background-color: #555B65';
            image: /local/hue_scenes/dimmed.png

          - entity: script.tiles_set_hue_scene
            label: Nacht
            data: {option: 'Nachtlampje'}
            style_template: >
              if (entities['input_select.hue_scenes'].state === 'Nachtlampje') return '--tiles-text-color:black;background-size: contain;background-color: #814346';
              return '--tiles-text-color: grey;background-size: contain; background-color: #555B65';
            image: /local/hue_scenes/nightlight.png

          - entity: script.tiles_set_hue_scene
            label: ' '
            data: {option: 'Off'}
            style_template: >
              if (entities['input_select.hue_scenes'].state === 'Off') return '--tiles-text-color:grey;background-size: contain;background-color: lightgrey';
              return '--tiles-text-color: black;background-size: contain; background-color: #555B65';
            image: /local/hue_scenes/off.png

group:

  set_hue_scene_tiles:
    name: 'Set Hue scene'
    icon: mdi:lamp
    entities:
      - input_text.tiles_set_hue_scene
      - input_select.hue_groups
      - script.set_hue_scene

  tiles_set_hue_scene:
    name: Set Hue scene

for Lovelace:

07

cards:
  - type: entities
    title: Hue Light Control
    show_header_toggle: false
    entities:
     # - input_select.hue_scenes
      - !include /config/lovelace/tiles/tiles_input_select_scene.yaml
      - input_select.hue_groups
      - script.set_hue_scene

and:

# config/lovelace/tiles/tiles_input_select_scene.yaml
    type: custom:tiles-card
    legacy_config:
      columns: 4
      text_uppercase: false
    #        column_width: 50px #minmax(75px, 75px)
    #        icon_size: 50px
      row_height: 50px
      entities:
        - entity: script.tiles_set_hue_scene
          label: Arctic
          data: {option: 'Arctische dageraad'}
          style_template: >
            if (entities['input_select.hue_scenes'].state === 'Arctische dageraad') return '--tiles-label-color: black;background-size: contain;background-color: #00d0a0';
            return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
          image: /local/hue_scenes/arctic.png

        - entity: script.tiles_set_hue_scene
          label: Savanne
          data: {option: 'Savanne zonsondergang'}
          style_template: >
            if (entities['input_select.hue_scenes'].state === 'Savanne zonsondergang') return '--tiles-label-color: black;background-size: contain;background-color: #ff7935';
            return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
          image: /local/hue_scenes/savanna.png

        - entity: script.tiles_set_hue_scene
          label: Tropisch
          data: {option: 'Tropische schemering'}
          style_template: >
            if (entities['input_select.hue_scenes'].state === 'Tropische schemering') return '--tiles-label-color: black;background-size: contain;background-color: #a03aa3';
            return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
          image: /local/hue_scenes/tropical.png

        - entity: script.tiles_set_hue_scene
          label: Lente
          data: {option: 'Lentebloesem'}
          style_template: >
            if (entities['input_select.hue_scenes'].state === 'Lentebloesem') return '--tiles-label-color: black;background-size: contain;background-color: #ba496c';
            return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
          image: /local/hue_scenes/spring.png

        - entity: script.tiles_set_hue_scene
          label: Relax
          data: {option: 'Ontspannen'}
          style_template: >
            if (entities['input_select.hue_scenes'].state === 'Ontspannen') return '--tiles-label-color: black;background-size: contain;background-color: #ffc059';
            return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
          image: /local/hue_scenes/relax.png

        - entity: script.tiles_set_hue_scene
          label: Lezen
          data: {option: 'Lezen'}
          style_template: >
            if (entities['input_select.hue_scenes'].state === 'Lezen') return '--tiles-label-color: black;background-size: contain;background-color: #fdfb9f';
            return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
          image: /local/hue_scenes/lezen.png

        - entity: script.tiles_set_hue_scene
          label: Concent
          data: {option: 'Concentreren'}
          style_template: >
            if (entities['input_select.hue_scenes'].state === 'Concentreren') return '--tiles-label-color: black;background-size: contain;background-color: #a2eaf2';
            return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
          image: /local/hue_scenes/concentrate.png

        - entity: script.tiles_set_hue_scene
          label: Energie
          data: {option: 'Energie'}
          style_template: >
            if (entities['input_select.hue_scenes'].state === 'Energie') return '--tiles-label-color: black;background-size: contain;background-color: #a8dfed';
            return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
          image: /local/hue_scenes/energize.png

        - entity: script.tiles_set_hue_scene
          label: Helder
          data: {option: 'Helder'}
          style_template: >
            if (entities['input_select.hue_scenes'].state === 'Helder') return '--tiles-label-color: black;background-size: contain;background-color: #fcdb97';
            return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
          image: /local/hue_scenes/clear.png

        - entity: script.tiles_set_hue_scene
          label: Gedimd
          data: {option: 'Gedimd'}
          style_template: >
            if (entities['input_select.hue_scenes'].state === 'Gedimd') return '--tiles-label-color: black;background-size: contain;background-color: #8c642b';
            return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
          image: /local/hue_scenes/dimmed.png

        - entity: script.tiles_set_hue_scene
          label: Nacht
          data: {option: 'Nachtlampje'}
          style_template: >
            if (entities['input_select.hue_scenes'].state === 'Nachtlampje') return '--tiles-label-color: black;background-size: contain;background-color: #814346';
            return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
          image: /local/hue_scenes/nightlight.png

        - entity: script.tiles_set_hue_scene
          label: ' '
          data: {option: 'Off'}
          style_template: >
            if (entities['input_select.hue_scenes'].state === 'Off') return '--tiles-label-color: black;background-size: contain;background-color: lightgrey';
            return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
          image: /local/hue_scenes/off.png
9 Likes
2

how did you set up the input selectors? im looking at trying this

3

here you go:

input_select:
  hue_scenes:
    name: Select Hue Scenes
    icon: mdi:creation #palette
    options:
      - Arctische dageraad
      - Savanne zonsondergang
      - Tropische schemering
      - Lentebloesem
      - Concentreren
      - Gedimd
      - Energie
      - Helder
      - Lezen
      - Nachtlampje
      - Ontspannen
      - 'Off'
    initial: Ontspannen

and

  hue_groups:
    name: Select Hue Group
    icon: mdi:group
    options:
      - Buffet
      - Dining table
      - Living

…etc

      - Mobile

just be careful to exactly name the groups and scenes as they are called in the Hue api

as explained, I created the ‘Off’ scene myself in the Hue api tool, for each group. (Hue doesn’t have an Off scene, and I wanted to switch the lights off also)

4

where can i find the tiles images???

5

They aren’t available on the net, so I made them…:wink:

6

Hi,

what exactly is the CLIP API debugger and how can I use it? Thanks!

And could somebody tell me how I can realize that old control element on my dashboard - with the dorp down menus? I added the group and script successfully but fail in building that control element.

Regards,
Thomas

7

http://yourHUehubIP/debug/clip.html

1 Like
8

Thank you Marius!

Could you also be so kind to explain how to create the control element with the drop down fields? Where do I have to put the input select stuff?

I know this must be a very basic question, but the answer will also answer ten other questions I have as I can then derive what I learned :slight_smile:

Kind regards,
Thomas

9

you mean this input_select?
59

its all in the code above :wink: Hue scenes mimicked in Ha (and on Buttons, was Tiles) - #3 by Mariusthvdb

1 Like
10

Yes, I`m aware but as said before I have a missing link here in my brain. I have no idea where to put this

input_select:
  hue_scenes:
    name: Select Hue Scenes
    icon: mdi:creation #palette
    options:
      - Arctische dageraad
      - Savanne zonsondergang
      - Tropische schemering
      - Lentebloesem
      - Concentreren
      - Gedimd
      - Energie
      - Helder
      - Lezen
      - Nachtlampje
      - Ontspannen
      - 'Off'
    initial: Ontspannen

and what element I have to add to my dashboard :see_no_evil:

Thanks for your patience :slight_smile:

Kind regards,
Thomas

11

haha, sorry. you define this in your configuration files: Input Select - Home Assistant

I have it all setup in a package and in which yaml file you write these is up to you really (and how you’ve split up your configuration), as long as it is under the key input_select:

you then put this on a card as posted above.

tbh: if this is above your HA experience, it might be a bit daunting to start with using hue-scenes, which is not always straight forward… best leave the clip editor for now, until you fully grasp what you’re doing. could be dangerous if not.

1 Like
12

Right now I learned a lot about the concept of Home Assistant :slight_smile:

Thank you!!

13

And regarding your comment: Yes, I have chosen a complex topic but it helps me to work on a real problem I have and I have quite a few decades experience as a nerd, just need some entry point.

Your input was very valuable :slight_smile:

BTW: It works now!

14

I added a scene called “Aus” as described above and CLIP reported success. But when I activate the scene, lights turn bright instead of being switched off?

CLIP:

I sent

{
“name”:“Aus”,
“lights”:[“19”,“17”,“10”],
“recycle”:false}

to the /scenes path and get back:

[
	{
		"success": {
			"id": "0jUueX4aAKp5OAx"
		}
	}
]

And is there a way to delete such a scene?

15

yes, in the api you can delete a scene also.

You must take care, that before creating the scene, your lights are in the desired state. So, obviously, when creating an Off scene, turn off your lights first.

1 Like
16

Yeah! I woke up tonight and had that idea. I thoight I never defined the light states somewhere so the current one must be saved :wink:

Can you tell me how to delete a scene?

17

P.S.: I prefer this method of setting lights and switching them off as my innr bulbs wont flash to 100 before settling. Good workaround :slight_smile: Also dont have to recreate scenes in HA.

18

It’s all in the link I posted above. https://developers.meethue.com/develop/hue-api/ Check the Scenes section https://developers.meethue.com/develop/hue-api/4-scenes/#delete-scene

1 Like
19

Oh thank you, I did not log in and so the tutorial ended early for me :smiley:

20

If you want to delete a scene, be sure to have the scene id in the clip editor , otherswise you might endup deleting all your scenes…

00
00650×577 63.2 KB

1 Like