Philips Hue Widget

Hi there,
I am trying to create a philips hue widget for OH3 and I have come this far:

screenshot HUE_Lights 1

It already looks like I imagine it, but two functions are still missing:

  1. the color picker
  2. the scenes

How can I open the color picker via a popup? And how can I define a list (or array?) with the scenes?

Resources

Here is my Code:

uid: HUE_Lights
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Color
      label: Color
      name: color
      required: false
      type: TEXT
    - context: item
      description: Scenes
      label: Scenes
      name: scenes
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jul 6, 2021, 8:41:26 AM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: oh-toggle
            config:
              item: =props.color
              color: blue
          - component: oh-button
            config:
              text: Scenes
              fill: true
              action: options
              actionItem: =props.scenes
              color: blue
              visible: "=props.scenes ? true : false"
              style:
                width: 50%
                top: 2px
          - component: oh-colorpicker
            config:
              openIn: auto
              item: =props.color
    - component: oh-slider-card
      config:
        item: =props.color
        noBorder: true
        noShadow: true
        color: blue

1 Like
  1. this:
          - component: oh-colorpicker
            config:
              openIn: auto # see https://v5.framework7.io/docs/color-picker.html
              item: =props.color

(please note, the color picker “swatch” rectangle will not appear until you configure it with a valid Color item)

  1. either:
    a. actionItem: =props.scenesItem (define scenesItem in props too) and make sure the item has State Description metadata with the options
    b. actionOptions: =props.scenes (define scenes in props as a regular TEXT prop) which should contain be configured along with the widget with comma-separated options
1 Like

The colorpicker works great, thank you, but I still didn’t get how to define the scenes. I thought of something like:

"sceneItems={
              '0,0,0'      : 'Aus',
              '3,100,79'   : 'Savanne',
              '20,100,49'  : 'Tropendämmerung',
              '198,100,54' : 'Nordlichter',
              '343,43,85'  : 'FrĂĽhlingsblĂĽten',
              '29,80,57'   : 'Entspannen',
              '30,60,100'  : 'Lesen',
              '32,30,100'  : 'Konzentrieren',
              '39,1,100'   : 'Energie tanken',
              '30,64,100'  : 'Hell',
              '30,64,31'   : 'Gedimmt',
              '27,100,10'  : 'Nachtlicht'
}"

an example of how to define the list and how to retrieve the values ​​from it would help me a lot.

and also see:

Can someone help me on:

how to get the list of scenes and

how to use the list id for a scene in a rule.

thanks in advance

Did you make any more progress with your Hue widget? I’d like to use it too if possible :grin:

The widget works except for the scene selection but I didn’t continue at that point either.

This is what I use to access the scenes:

    - component: oh-list-item
      config:
        item: PhilipsHueLounge_Scene
        action: options
        actionItem: LoungeRoom_Scene
        listButton: false
        listButtonColor: blue
        title: Scenes

Hi Mark,
just a short question: How did you get the item PhilipsHueLounge_Scene?
Many thanks,
Henry

Hi.

It is a channel on my discovered room from my Philips Hue. Just linked it to an item via the UI.

Mark

1 Like

Hi,
Many thanks for your quick answer! I found the channel from my room in the Philips Hue App an linked it to an string-item I’ve created in the UI. But therefrom comes the name of the Philips Hue scene?
Is it one of this scenes in the app (I hope so):


Or have you created this scenes with rules in OH3?

The item is a string item containing all the Scenes from the Hue Group/Room.

If you create a component as follows:

    - component: oh-list-item
      config:
        item: PhilipsHueLounge_Scene
        action: options
        actionItem: LoungeRoom_Scene
        listButton: false
        listButtonColor: blue
        title: Scenes

You will get a listButton with the options of scenes to choose from:


My simplistic “test” is defined as:

component: oh-list-card
config:
  title: Lounge Lights
slots:
  default:
    - component: oh-colorpicker-item
      config:
        title: Lounge Colour
        item: LoungeRoom_Color
        modules:
          - hs-spectrum
    - component: oh-slider-item
      config:
        title: Lounge Temperature
        item: LoungeRoom_ColorTemperature
    - component: oh-slider-item
      config:
        title: Lounge Brightness
        item: LoungeRoom_Brightness
    - component: oh-list-item
      config:
        item: PhilipsHueLounge_Scene
        action: options
        actionItem: LoungeRoom_Scene
        listButton: false
        listButtonColor: blue
        title: Scenes
    - component: oh-toggle-item
      config:
        title: Testing Switch
        item: Testing_Switch
        color: red
    - component: oh-list-item
      config:
        action: command
        actionCommand: ON
        actionItem: Testing_Switch
        title: Testing Switch
        listButton: true
1 Like

Hi Mark,
I don’t know why, but it works :laughing:!
Bildschirmfoto vom 2021-07-05 21-47-52
I will play with it to understand something!
Many thanks for your cooperation, it was a great help!
Stay healthy!
Henry

I didn’t know that you could create scenes as an item. That makes things easy, of course. Thanks for the hint.

Here is the code for the new functional widget:

uid: HUE_Lights
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Color
      label: Color
      name: color
      required: false
      type: TEXT
    - context: item
      description: Scenes
      label: Scenes
      name: scenes
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jul 6, 2021, 8:41:26 AM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: oh-toggle
            config:
              item: =props.color
              color: blue
          - component: oh-button
            config:
              text: Scenes
              fill: true
              action: options
              actionItem: =props.scenes
              color: blue
              visible: "=props.scenes ? true : false"
              style:
                width: 50%
                top: 2px
          - component: oh-colorpicker
            config:
              openIn: auto
              item: =props.color
    - component: oh-slider-card
      config:
        item: =props.color
        noBorder: true
        noShadow: true
        color: blue

1 Like

In the scene item I see all scenens for all rooms… Can I show the scenes for a special room only?

Here is my scene item linked to the scene channel of the bridge thing:

I have for created for Rooms/Areas in my hue app:

but only for the “Stehlampe” I created a thing and items:

If I open the scene like in the test above I see the scenes from the other rooms as well:

But I only want to see the last three one…