Ideas for Nextion color picker control?

[luma]

Has anyone worked out a decent color-picker control for Nextion that they’d like to share?

Something like this:

Where the user is able to select a color from some sort of display and the value is readable by the HMI. A 3-slider type interface for RGB values is easy enough but not terribly user friendly. Has anyone come up with a cool solution for this?

[Max]

I think HSL/HSV is the way to go. You can either do it with three sliders (that are much easier to use than RGB sliders) or with a rectangle and a slider, like Paint does it.

Btw it shouldn‘t be too hard to actually use the exact picture you provided. Using the touch coordinates you can quite easily calculate the distance from the center and the angle, thus determine the color the user touched.

Kind regards,
Max

[luma]

Setting up a series of colors to click on is one approach, which will probably be the simplest. Using the image I suggest might work but would be challenging in the automation environment that I’m working in (Home Assistant), as there aren’t really any tools to translate something like polar coordinates.

Still, food for thought. Thanks @Max!

[Max]

Sorry, my fault. I took the first picture I found (writing on my phone; not possible to take one/edit one). Ignore the red marked areas; i meant the color field with the slider right to it. The x coordinate on the rectangle gives you the „hue“, y gives you the „saturation“ and finally the slider gives you the „value“. Should be pretty straightforward to code. Just need to generate the matching picture in the size you want since you probably don‘t want to generate it with line commands…

Yeah Nextion doesn‘t handle polar coordinates natively but it should be feasible. Especially if you have a circle with discrete color fields like you showed, I‘m sure its possible with moderate coding effort, using the square distance (x-x_center)^2 + (y-y_center)^2 and the tangent (y-y_center) / (x-x_center). Since you do not need the exact distance or the exact angle but only a steady, continuous function of it, you don‘t need complicated stuff like square root or arctan

Kind regards,
Max

[Max]

In theory I have about 200 better things to do, in practice I did it anyways. Here’s a demo file for a HSV color picker. It features a variable size color field, an HSV to RGB converter function, a drawing algorithm with variable resolution in case you don’t want to create a picture for the color field and finally the most basic slider possible.

Since I can’t upload the stuff here (wtf you can’t upload .HMI files in this forum? Seriously?) Here’s the link to the file and its source code as text: https://github.com/MMMZZZZ/Random-Stuff/tree/master/Nextion%20HSV%20Test

If I find some more time I don’t have I might as well create an example for the polar thing.

Kind regards,
Max

[luma]

WOW! This really works, thanks @Max!