Add Color Temperature to Hue Accessory

[apartmedia]

On latest gui (4.0.69) the color picker can not be placed to center (white).
Tested with iPadPro iOS 14.6 Mobile Safari, Mobile Firefox and MacBookPro macOS Big Sur 11.4 Chrome Desktop 91.0.4472.114
See attached video...

HOOBSReplay.mov

[mkellsy]

I was able to do it. It shows as grey, but I am able to center it. I think what we need is to add the color temp section for this accessory.

You got hue, brightness and then temperature, that shows 4 options, which includes white.

The video because it won't play in GitHub.

[apartmedia]

I was able to do it. It shows as grey, but I am able to center it. I think what we need is to add the color temp section for this accessory.

You got hue, brightness and then temperature, that shows 4 options, which includes white.

The video because it won't play in GitHub.

Could you watch the video what happens when using the color picker on my touch device? Or do you need it in a different format as you say it won’t play (although I can play mov in GitHub with Safari 🤔).
It might behave different or even work when using a mouse.

[mkellsy]

What I’m saying is the hue accessory needs some work. One of the things that is needed is a mobile friendlier color wheel. The color balance method is that. (It’s the same method that HomeKit uses)

[apartmedia]

might this be a solution for better mobile and touch usage while keeping the design (if that’s one goal)?
iro.js
Not sure if this is Vue compatible though…

[mkellsy]

That's exactly what we are using.

https://github.com/hoobs-org/gui/blob/main/package.json

"@jaames/iro": "^5.3.1",

[apartmedia]

Ok, that should be normally fine for touch devices,
The codepen demos linked on the iro site worked flawless for me on mobile Safari in iOS and iPad OS.

[mkellsy]

Codepen doesn't show the whole story. The issue is the select and revert to the default display.
It needs a slight delay and debounce, so you can adjust the color, and it won't revert until input stops.

Sounds confusing, but remember JavaScript if fast, it's timed in milliseconds.

I am also using this task to complete the hue accessory.

[apartmedia]

I‘m with you… JS: powerful and guilty 😉
Let me know if I can be helpful by testing something.
Regarding the hue accessory u r planning to use the same lib?