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?
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
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!
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
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
I am using it, Max. And I am loving it. Thanks a lot for your work
The color map I made a background-image and leave the foreground control transparent. Saves some drawing time. From there I started to develop an alarm clock that brings up color LED instead of buzzer.
Walt
Threw together this slider image, if anyone wants it.
A simple gradient made in Photoshop, saved as png.
Just right click on the image and do a Save As.
This forum is in no way affiliated with NEXTION®, ITEAD STUDIO®, TJC®, or anyone else really. All product names, logos, and brands are property of their respective owners. All company, product, and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement from the respective rights holder(s).
