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: Random-Stuff/Nextion HSV Test at master · MMMZZZZ/Random-Stuff · GitHub
If I find some more time I don’t have I might as well create an example for the polar thing. Update: Round Color Picker!
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.
Hello @Max nice work by the way.
I try to understand your code, and I past all the code in my HMI file.
But when i run it, wappens me this:
Design all black pixels
And when in the rgb16 function in touch release event i change the line of code rgb16.val=sys2 for rgb16.val=40000 the program design the pixels with that color.
I probably missed something, I don’t know. If you could help me I would be grateful @Max
r=r&0xff
g=g&0xff
b=b&0xff
sys1=r>>3
sys2=sys1<<6
sys1=g>>2
sys2+=sys1
sys2=sys2<<5
sys1=b>>3
sys2+=sys1
//rgb16.val=sys2
//rgb16.val=40000
It’s possible to know the rgb values to send to a arduino @Max . What the part of the program I can read those values and for example show them on LCD.
Hi and welcome @RagnarKing,
Not sure I understand the exact issue; I certainly can’t see a reason for trouble based on the information you posted. I can only assume that you did not copy the entire source code or that you have some other code that prevents mine from working properly.
Without seeing the actual HMI file (or the text version of it) I can’t help you much further…
As for reading values, I suggest you run it in the Nextion Editors simulator and check the values by sending get something.val or prints something.val,0 requests.
Kind regards,
Max
Hello @Max , I do it all again. Problably I miss something, now works almost perfect. Great work you have done. Congrats. One more question, in the page I have a background image wich fill the intire page:
Note: Your program in my HMI file works fine, no problem, but when I add the background img, happens that problem I mencioned early.
Glad to hear it works now.
Unless you have to change the size of the color field at runtime you should toss out the drawing algorithm and put a picture there instead. It will be faster to load and avoid problems like the one you currently have.
The reason is that the drawn color field is not „persistent“. Anything that‘s drawn at runtime will disappear as soon as any underlying component gets refreshed. In some cases this doesn‘t matter but it‘s usually not what you want.
Kind regards,
Max
Thanks @Max, I ill put one img.
One more thing were I can read the rgb values individually? Because I want to send them to a arduino. Or the program directly obtain the color value of the colorField in the format 0-65535??
//Example
print "R: "
print r
print "G: "
print g
print "B: "
print b
After you picked a color in my example HMI file, you can indeed print the variables r, g, b, as your code snipped shows. You can also print the corresponding RGB16 / 5-6-5 value by printing the text component’s bco attribute or calling the rgb16 function (number component) and printing the result.
Note: you should use prints instead of print which is deprecated. Check out the Nextion Instruction Set for details and other very useful information.
Kind regards,
Max
@Max in this piece of code:
print “coord2hs”
h=xcoord2566
h/=xsize
s=ycoord*256
s/=ysize
where you obtain xsize, ysize?
Why you multiply xcoord2566 and ycoord*256?
Sorry for my english, and the trouble.
Não quero estar a ser chato, mas não percebi de facto como objeto os valores de RGB. Desculpa ainda comecei a trabalhar com o Nextion editor a pouco tempo e ainda só sei o basico e estou a tentar aprender e agradeço que estejas a perder o teu tempo a tentar tirar-me a duvida.
When I do:
print "R: "
print r
print "G: "
print g
print "B: "
print b
The output is:
Garbage I think.
When I do rgb.bco more garbage.
Please, take some time to study the example source code. It‘s even included as a text file so that you can use a text editor with search function to find out where variables are declared and used. I recommend Notepad++.
I can’t explain you the underlying math of the conversion; I wasn‘t bothered to understand it myself. But the link to the wikipedia article is included in the source. If you have a look at it you’ll see that all the math is done as floating point math with values between 0 and 1. Nextion doesn’t allow you to use floating point math so I converted it to fixed point. Meaning, 0-1 becomes 0-255. This makes the code less intuitive because multiplications require a further „adjustment“ step (multiplication of values in [0, 1] stay within that interval, whereas values from [0, 255] end up in [0, 65535]). You have to be careful when to do these adjustments to not lose any resolution.
Btw. you should edit your posts and format your code as code (when typing a reply you got multiple formatting options including one for code). Right now parts of it are missing because the * is interpreted as formatting sign and thus doesn‘t show up f.ex.
Regards,
Max
Forgot to translate?
As for your screenshot, it doesn‘t make too much sense to view the values as string. For the actual integer values you should view it as hex.
If you want to values to be digits within the string you need to convert the integers to a string first on nextion (using covx, once again, see the Nextion Instruction Set for details).
Regards,
Max
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).
