Other ways to select color

[dhylands]

For RGB bulbs, there are actually several ways to specify the color:

• Using the color picker
• by specifying brightness (we currently exclude this for RGB bulbs)
• by specifying color temperature (we currently exclude this for RGB bulbs).

The current color picker is somewhat limited in that it excludes things like color temperature, which a user might want to specify, even though it is an RGB bulb.

So I thought I would raise an issue so that this could be discussed.

[benfrancis]

We have discussed this previously, including the difficulties of mapping colour changes onto colour temperature changes if a bulb exposes both (though some bulbs have two separate LED arrays for RGB and colour temperature and switch between the two when setting one or the other).

Brightness and colour temperature are obviously a subset of colour. Do you have a suggestion for how you think the UI should work differently?

Note that the colour picker is provided by the browser/OS. Could these potentially be feature requests for the colour picker rather than the gateway's UI?

[dhylands]

For non-color bulbs, the picker is actually a slider for the color temperature property associated with the device.

We could add a color temperature slider for RGB bulbs as well, however the issue is that I don't think you can map backwards from arbitrary RGB colors to a color temperature.

Zigbee deals with this by having a colorMode which tells how the current color was set (hue/sat, XY, or color temp).

I guess I find it annoying that I can set simple non-color bulbs by color temperature but can't set RGB bulbs by color temperature.

Not being a UI persion, I'm not quite sure the best way to reflect this in the UI. Perhaps if the current color isn't a "color temperaure" then the slider would somehow indicate that the current color is "out of scope" and when you click the slider it would then change the color to a color temperature rather than an RGB color?

Or perhaps we can have some type of custom property which has a drop-down that allows the "color" to be toggled between "temperature" or RGB?

[jaller94]

Excluding the color from RGB lights also excludes them from commands like "dim" and "brighten". If a colour selector with different modes is chosen, a thing/gateway could expose calculated properties for selection profiles. As a disadvantage all native things would have to implement these colour selectors. Another option for different modes is client-side support. Commands and clients would have to detect the mode and set properties or change the mode based on the operation. Possible disadvantages are different client implementations and a loss of information (controller A dims a RGB property by 100%; controller B reads black an does not know how to brighten it).

[damianon]

The issue with the current color picker is, that it's the html5 and therefore browser specific color picker. Firefox mobile is terrible in this regard and desktop is ugly and inconvenient. As the referenced issues suggest specifying color and brightness separately is a lot more intuitive for many people.

[stripTM]

I don't think it's confusing for the user to show in RGB bulbs a <label>Color: <input type="color"/></label> and a <label>Bright: <input type="range"></label>.

And for monochrome bulbs only the <label>Bright: <input type="range"></label>

[mrstegeman]

@stripTM What would you do in the case of an RGB bulb that can also change color temperature? Three separate inputs?

[zbraniecki]

Lifx mobile app has two views, each with two widgets.

First view provides a color wheel and brightness slider. Second view provides temp wheel and brightness slider.

https://imgur.com/a/G1IU18T

This UI works really well as I never need both color and temp, but I always need brightness.

[stripTM]

@mrstegeman I hadn't thought of 3 components, I'm reviewing Yeelight's app and your comments.

And now I understand why they have separated it, they are two different light matrix. It's not possible to choose the green color and then make it warmer. :-(

[carver7]

I believe for the public with access to these color "smart bulbs":

• The vast majority of people think of only 2 variables when an adjustment is desired: "color" and "brightness".
• The smaller fraction of those remaining are mostly users how would like to add a 3rd variable to adjust when needed / on occasion / not required such as temperature
• Very few users would find it practical to have more adjustments to make than that.

All of the commercial UI interfaces of every color light bulb that I've seen are consistent with this. Every one of them has a UI solution that is a reduced-variable solution to something of a practical compromise:

• 2 or 3 sliders,
• and with a master "brightness" slider overall (to fade out the light or group of lights) from "on" to "off".

They probably all individually paid a lot of money in market research studies to find out that the vast majority of people actually do not at all find it obvious that brightness and color temperature are a subset color, etc, and they don't want to think about it at all.

If some people want to play with their lights and dig deeper in the meaning of light characteristics, I think that's cool and I see some good educational uses there as well, but those options need to be truly optional and put in 'dig deeper' sub menus and/or a pop-up 'Advanced' or 'Details' user interface (with a 'reset' button to defaults!)

Here's the Phoscon app's UI (probably familiar here) which is as advanced as I believe most people want to get. Note the temperature alternative view option:

[carver7]

Also, if this helps at all on the programming spec solution level, here's what the Hue Bridge looks like for a color bulb (I re-paired one to compare specs):

{
    "lights": {
        "1": {
            "state": {
                "on": true,
                "bri": 254,
                "hue": 8381,
                "sat": 141,
                "effect": "none",
                "xy": [
                    0.4583,
                    0.4099
                ],
                "ct": 366,
                "alert": "select",
                "colormode": "xy",
                "mode": "homeautomation",
                "reachable": true
            },
            "swupdate": {
                "state": "noupdates",
                "lastinstall": " <redacted timestamp> "
            },
            "type": "Extended color light",
            "name": "Hue color lamp 1",
            "modelid": "LCT016",
            "manufacturername": "Philips",
            "productname": "Hue color lamp",
            "capabilities": {
                "certified": true,
                "control": {
                    "mindimlevel": 1000,
                    "maxlumen": 800,
                    "colorgamuttype": "C",
                    "colorgamut": [
                        [
                            0.6915,
                            0.3083
                        ],
                        [
                            0.17,
                            0.7
                        ],
                        [
                            0.1532,
                            0.0475
                        ]
                    ],
                    "ct": {
                        "min": 153,
                        "max": 500
                    }
                },
                "streaming": {
                    "renderer": true,
                    "proxy": true
                }
            },
            "config": {
                "archetype": "sultanbulb",
                "function": "mixed",
                "direction": "omnidirectional",
                "startup": {
                    "mode": "safety",
                    "configured": true
                }
            },
            "uniqueid": "<redacted>",
            "swversion": "1.46.13_r26312",
            "swconfigid": "9DC82D22",
            "productid": "Philips-LCT016-1-A19ECLv5"
        },

[rfilmyer]

I also ran into this as a roadblock.

I have an RGB bulb, a Gledopto GL-B-007Z. I noticed that the bulb is noticeably dimmer when being controlled by WebThings. versus when it is unpaired. It almost seems like the bulb has 2 modes: "White" and "RGB", with the white mode being noticeably brighter, but only controllable along a color temperature spectrum (when put into pairing mode, the bulb appears slightly warmer than its default "on, unpaired" state).

As soon as the bulb is paired with a WebThings gateway, it becomes dimmer as it is kicked into this "RGB" mode. Even when set to pure white in the color picker, it seems like it's never at full brightness.

[ulph]

On the lights/bulbs I have tries thus far, at least phoscon treats controlling rgb and temperature as mutually exclusive; the pure white led is never used when controlling via rgb values. When setting temperature, white plus some rgb "support" is used.

When using WebThings to set rgb, the white led is also never used.

This results in a much dimmer result for whites in WebThings. This may be a bulb speciific problem, but at least it was consistent on osram+ and gledopto.

I appreciate the problem with these problematic color spaces.

Hsl seems a more suitable representation really than rgb with less "gaps". Hsv has the same issues as rgb. At least this would work for rgbw. The "state of the art" rgbww (unsure of acronym, philips hue uses these, rgb plus warm and cold white diodes), not even hsl would be "continous". Hence, two mutually exlusive modes makes a lot of sense from their perspective.

[jfrohn]

I also do not think that using the default browser color picker is the way to go here. Would it make sense to use a third library like: https://github.com/jaames/iro.js? This seems to be quite user friendly and also supports different color representations such as hsv or hsl. The brightness is controlled via a dedicated slider, see https://codepen.io/rakujira/pen/WZOeNq?editors=0010

[mrstegeman]

@jfrohn I don't think that's quite sufficient, as we may also have a color-temperature picker.

[jfrohn]

@mrstegeman this is already implemented and will be added in the next release: https://github.com/jaames/iro.js/issues/69

edit: I added a codepen at: https://codepen.io/jfrohn/pen/qBENWvQ

[mrstegeman]

Oh, cool! That could be a great option for us, then.

[grifdail]

I think we have a few issue here:

• Some light have RGB controls, Other have Temperature. Some have both. Technicaly we cannot simply say ColorTemperature is a subset of Color with a predefined range of value because some lightbulb use different LED depending of the color mode.
• raw RGB color is not convenient for manipulating light. Usualy you would set Hue & Saturation on one side and brightness on the other.
• Related to the previous point: The native colors picker used by the browser is usually terrible, especialy for working with lights.
• Also related: Not every device with a ColorProperty is a lightbulb. Sometime RGB is okay. Imagine a device where setting the color property change the background color of a screen.

Some smarthome app just use a list of predefined color and that work fine for light bulb, because, when it comes to light, you don't need as many colors as you do for screen or print. There's not much visible difference between HSV(120°, 70%, 100%) & HSV(140°, 70%, 100%) .... (Especialy since most lightbulb are terrible at greens)

[mrstegeman]

• Some light have RGB controls, Other have Temperature. Some have both. Technicaly we cannot simply say ColorTemperature is a subset of Color with a predefined range of value because some lightbulb use different LED depending of the color mode.

This will be addressed by #2425, along with a series of add-on updates to add all of the supported color properties (RGB, brightness, temperature).

• raw RGB color is not convenient for manipulating light. Usualy you would set Hue & Saturation on one side and brightness on the other.

True. However, it seems that each vendor does things a different way. Some take RGB values through their API, some take HSV, some take XY... Along with that, browsers only really support RGB for color inputs, so RGB seems like the lowest common denominator. We can convert between RGB and the others.

• Related to the previous point: The native colors picker used by the browser is usually terrible, especialy for working with lights.

Yes, agreed. We could potentially use iro.js or something else to remedy this.