Color Picker

[Roots]

Any suggestion on how to go about a simple color picker inside NGUI? Just some tips or suggestions? Ideally more than 16 colors e.g. 256

thanks

[ArenMook]

Coder's solution:

Create a function that takes an XY position from 0 to 1. Inside that function, use some formula to return a color at those positions. This function should be able to generate a color gradient when used over a large area. You then use this function to both generate the texture as well as sample the color when the OnPress or OnDrag is received.

Tweaker's solution:

Create a gradient texture in Photoshop, or just take a picture of one. Make sure to set "readable" on the texture import properties. Use UITexture to draw it. Set it to use top-left pivot. In OnPress & OnDrag, calculate the position of the UICamera.lastTouchPosition relative to the widget's origin (the top-left corner). Texture2D.ReadPixels the color at that coordinate.

[Roots]

Thanks, think that the importing a texture and just doing a read pixel is likely the cleanest. Feel a little bad because i could have come up with that myself.

Do you ever sleep?

[ArenMook]

Sure I do... every so often! 

[Fbary]

Sorry if I re-open this thread, but I need a little help with this kind of stuff =P

I've fully created a color picker working with OnGui. Now, to avoid all the problems linked with this structure, i started working with Ngui. Here i've found some problems..

I created an UITexture in the scene, and with the OnPress/OnDrag functions i worked as you said..but it doesn't want to work =P

I used Texture2D.getpixel instead ReadPixel, as I did in my original script. I save my position during the OnPress with UICamera.lastTouchPosition, then I convert the x and y coord from float to int. At last I use getpixel. All this lines worked perfectly with my OnGui script, what I need to change to make it works?

The mainTexture in UITexture is a "Texture" type, not "Texture2D". Can be possible to use that texture for my Picker, without an extra cast..?

If i can't solve these problems, i'll work without OnPress function, but just with a normal raycast structure..

I'll wait for answers, thank you for your patience =P

[ArenMook]

You need to be more clear... which part is not working?

[Fbary]

I think my problem is in the getPixel or in the UICamera.lastTouchPosition.

Have you ever tried to build a color picker using Ngui? Just to know if you have a working example, or something else..

[ArenMook]

I haven't but others have.

[Skared Creations]

In OnPress & OnDrag, calculate the position of the UICamera.lastTouchPosition relative to the widget's origin (the top-left corner). Texture2D.ReadPixels the color at that coordinate.

I'm having some problems to achieve this, probably I'm doing something wrong. To calculate the lastTouchPosition relative to the UITexture I'm subtracting from it the screen point of the widget's transform:

1. // This code is executed in a script attached to the UITexture which contains the wheel texture
2. Vector3 textureWheelPos = UICamera.currentCamera.WorldToScreenPoint(transform.position);
3. Vector2 pos = UICamera.lastTouchPosition - textureWheelPos;
4.  

I'm almost sure that I'm doing it wrong, can you please help?

[ArenMook]

When are you doing that? UICamera.currentCamera is only valid during event callbacks such as OnPress and OnDrag. Other than that it seems fine. Just keep in mind that the 'transform.position' will be your widget's pivot point... which by default is center, not top-left.

[Skared Creations]

Yep I fixed everything, I was getting the transform position on Start but the widget is on an animated panel so it got the position when the panel was out of the screen, now it works

[Disastercake]

I'm trying to adjust the above code to my own using the following:

1. public Texture2D texture2D = null;
2.        
3.        
4.         void Awake()
5.         {
6.                 texture2D = GetComponent<UITexture>().mainTexture as Texture2D;
7.         }
8.  
9. void OnClick()
10.         {
11.                 Vector3 textureWheelPos = UICamera.currentCamera.WorldToScreenPoint(transform.position);
12.                
13.                 Vector2 pos = new Vector2(textureWheelPos.x, textureWheelPos.y);
14.                
15.                 pos = UICamera.lastTouchPosition - pos;
16.                
17.                 int x = (int)pos.x;
18.                
19.                 int y = (int)pos.y;
20.                
21.                 Color color = texture2D.GetPixel(x, y);
22.                
23.                 Debug.Log("X: " + x + "; Y: " + y + "; Red: " + color.r + "Green: " + color.g + "Blue: " + color.b + "Alpha: " + color.a);
24.         }
25.  

However, no matter where I click, I get a (0, 0, 0, 1) color returned to me.

What am I doing wrong?


Edit:
I've changed the pivot point to bottom left, and it's giving me much closer colors, however it's still not perfect.  It appears to be giving me colors near the target area, not directly on it.  How do I make it so it knows exactly where I'm clicking?

[ArenMook]

Flip the Y value instead. It's negative -- so add it to +1. I am guessing the pivot point of the UITexture doesn't match the origin of the texture itself.

[Disastercake]

Hey Aren,

I just edited my "edited" section above.  What do you take of this new information?

My guess is it has something to do with me having to type cast to int and not getting perfect results.

I seem to always get an X value with a decimal ALWAYS at .9, and a Y with a decimal ALWAYS at .8 (example: (186.9, 114.8 ) and (1.9, 1.8 )).

I've attached the image I've been using to test, and have made 2 black dots at the top of the color wheel.  The one in the yellow right underneath "1" shows the spot I clicked in Unity,  And the other black dot (a few sections down in 36) shows a number Unity is giving me.

[ArenMook]

I see you transforming from world to screen point... but you don't take the UITexture's origin point into account at all.