Color Picker

So, I was able to take the source code for the slider and turn it into a 2 dimensional box slider. Not only does it work perfectly in overlay and 2d space, it got rid of the problem with the rgb sliders moving around when you move them. Most of the known issues have been fixed now in the unity5 branch in the repo. I will be fixing the main branch for unity4 soon.

 

Hi,

I integrated the base of this color picker (juste the picker and the cursor, I removed all the sliders) in my app, but the cursor is at the wrong position when the picker is used in a canvas set in Screen Space - Camera mode.
No problem though when the canvas was in Screen Space - Overlay.

Any idea on how to fix this ?

Thanks !

EDIT : I found the solution !
I changed the function PlaceCursor in HsvBoxSelector.cs to :

Code (CSharp):

1. void PlaceCursor(PointerEventData eventData)
2.     {
3.        // camera = the camera used to render the canvas
4.         Vector3 fixedPos = camera.ScreenToWorldPoint(new Vector3(eventData.position.x, eventData.position.y, 100));
5.         var pos = new Vector2(fixedPos.x - picker.hsvImage.rectTransform.position.x, picker.hsvImage.rectTransform.rect.height * picker.hsvImage.transform.lossyScale.y - (picker.hsvImage.rectTransform.position.y - fixedPos.y));
6.  
7.         pos.x /= picker.hsvImage.rectTransform.rect.width * picker.hsvImage.transform.lossyScale.x;
8.         pos.y /= picker.hsvImage.rectTransform.rect.height * picker.hsvImage.transform.lossyScale.y;
9.  
10.         pos.x = Mathf.Clamp(pos.x, 0, .9999f);  //1 is the same as 0
11.         pos.y = Mathf.Clamp(pos.y, 0, .9999f);
12.  
13.         picker.MoveCursor(pos.x, pos.y);
14.     }

 

oh, that might have been what I was looking for.

That code has changed in the unity5 branch so that it uses a modified slider so it works stably on 3 camera modes. Can you try a test with the other branch to see if it works for you?

 

Please post when the unity 4 branch is updated for world space. I've tried the unity 5 version and it works but unity 5 has too many bugs when migrating my old projects so I'll be sticking to unity 4.

 

@unityuser13 Should be updated for unity 4 now in the master branch

 

Hi, this color picker is awesome !
I tried to use it and i think i found a little issue.
The hsv slider (Blue) color don't match the box Slider color (Green).

 

@Mol Oh I think I know whats going on. On the slider bar, change the slider direction from "top to bottom" to "bottom to top" or vice versa depending on what it is set to now. If that doesn't fix it then it is a little more messed up than I though.

 

Sweet, this is a really useful feature, that could be applied to a lot of different scenarios. I'm especially thinking about a nice, flexible character creation system.

I especially like the addition of the hex entry box. I come from a web background, so working with hex colors is very common for me.

One question, would it be appropriate to add an alpha field?

 

yes, an alpha field would work just like the other rgb ones

 

It was obvious.
Fixed the issue setting the direction of the slider to Top To Bottom. Thanks.

 

I've been trying for a little while now, but I can't get this thing to keep the alpha value of a color. Tried both of these(in the ColorTester and ColorPicker scripts).

Code (CSharp):

1.        
2.         if(m_TypeColor == m_Type.Paint){
3.             picker.onValueChanged.AddListener(color =>
4.             {
5.                 m_Color = color;
6.                 m_CurMat.color = color;
7.             });
8.             m_CurMat.color = picker.currentColor;
9.         }else if(m_TypeColor == m_Type.Window){
10.             picker.onValueChanged.AddListener(color =>
11.             {
12.                 m_Color = picker.currentColor;
13.                 m_Color.a = 180;
14.                 m_CurMat.color = color;
15.             });
16.             //m_Color.a = 180;
17.             m_CurMat.color = picker.currentColor;
18.         }

Code (CSharp):

1.        
2.         if(m_TypeColor == m_Type.Paint){
3.            currentColor = color;
4.            colorImage.color = currentColor;
5.         }else if(m_TypeColor == m_Type.Window){
6.             currentColor = color;
7.             currentColor.a = 180;
8.             colorImage.color = currentColor;
9.         }
10.  

But no luck, any ideas?

 

Very nice, thanks for sharing!

 

@judah4 how can I make this color picker in a networked game. I've been trying for couples of days right now but nothing work for me, thank you for your help in advance!

 

Hey man, using your color picker for my project but i have a slight issue, here is the problem:
I have a bunch of options and ui stuff in the menu then i load to another scene, in the meantime the gameObject that hold these UI related things is never destroyed. UI items all get disabled and stop rendering. When i go back to the menu by reloading the menu level , i enable the ui elements again. but the color picker doesn't show up, even though it's enabled.

 

Hey. May I know what I need to change If i just want blue to red without the purple and the other red

 

@judah4 looks nice. I made a few tweaks to get rid of the bounce when you moved one of the sliders to the end. I've sent you a pull request. Have a look.

On the general coding style its mostly well put together, but mixing persistent and runtime listeners made it slightly hard to follow. No biggie, you just asked about coding style earlier.

 

oh, thanks.

Yeah, I think the only reason I didnt do the sliders as persistent was because I didn't want to make each individual method for the rgb. I might change that next time

 

Hello,
Very nice utility.
However, the usage explanation (how to, what are posibilities) needs some clarity, specially people who are noobs at unitying.
For example, I have never used events in scripts yet. And now I need to remove that "Listener". How do I do that? Documentation on Listeners is very vague, no examples whatsoever. There are some on the forums, but I still dont get it how to do it in this exact case.
Can you help?

 

Ok. Figured this out (took ~4 hours). So if anyone is concerned this is how I did it now:
Since UnityEngine.Events.UnityAction is not stored when we .AddListener it, we have to also save a referance. This I did with a List:

Code (CSharp):

1. using UnityEngine;                      
2. using System.Collections;
3. using System.Collections.Generic;                      
4. public class ColorPickerChange : MonoBehaviour {                      
5.        public HSVPicker picker;
6.        public Color selectedColor;  
7.        public Dictionary<GameObject, UnityEngine.Events.UnityAction<Color>> actions = new Dictionary<GameObject, UnityEngine.Events.UnityAction<Color>>();  //here is the list of actions I will use to save action referances.
8.                        
9.     public void AddRenderCubeColor(GameObject obj){      //function to call when new is created and needs to start being tracked
10.                  
11.         actions.Add(obj, color =>{obj.GetComponent<Renderer>().material.color = color;});    //here I point what UnityAction I add to the List<>.          
12.         picker.onValueChanged.AddListener(actions[obj]);               //add Event Listener
13.         picker.AssignColor(selectedColor);                   //set my public variable, for output for custum manager
14.     }                  
15.     public void RemoveRenderCubes(GameObject obj){          //this function is called when existing cube is deleted and we have to stop event tracking for it          
16.         UnityEngine.Events.UnityAction<Color> action = actions[obj];        //define an action by object that needs removing, from saved list      
17.         picker.onValueChanged.RemoveListener(action);   //Remove that pesky Listener, which we dont need anymore!      
18.     }      
19. }                      
20.                        

You are welcome to use this.

 

Hi,
i have includet your Color Picker and added Prefap to my Canvas.
Now im getting the following error:

Code (CSharp):

1. modifications.empty()
2. UnityEditorInternal.InternalEditorUtility:HierarchyWindowDrag(HierarchyProperty, Boolean, HierarchyDropMode)
3. UnityEditor.DockArea:OnGUI()

What is going wrong?

Im using Unity 5.1.2f1 64bit.

 

This thing is great.

However, for me it lacked a few things and in order to add them, I ended up rewriting most of the code. See https://github.com/troien/HSV-Color-Picker-Unity/tree/Version-2. The base was good, but I ended up with moving the different capabilities from the colorpicker to different components that use the colorpicker (effectively making the colorpicker a container of a color that gets changed by other components). That way it is easier to add new components to the colorpicker as I then don't have to rewrite the colorpicker. Another added advantage is that I can create a colorpicker with just the sliders, as each component is not dependant of each other.

Bugs fixed:

• hex value updates properly
• fixed inversed hue. (I believe this was because ColorToHsv returned an inverted hue (me inverting this and making sure it isn't inverted anywhere else fixed it for me at least)

Added:

• possibility to add all sliders (R, G, B but also H, S, V and alpha)
• Backgrounds for the different sliders that change when the selected color changes. (the main feature I wanted myself)
• Made ColorChanged serializable (can be used from inside the inspector) DONT call removealllisteners though, my components use the same callback for the sliders etc.

Changes:

• Gave the ColorPicker a single purpose (maintain a color)
• HexField should log a message in the console if you enter invalid value.
• HexField also accepts aplha and the # is optional.
• edited example scene.
• Internally the hue slider (like all sliders) uses the slider value instead of calculating it yourself.

There are some things I still want to add (like the big image with the slider box, I want to be able to show different values and not just S,V), but I though I'd share what I've changed so far. Let me know what you think and if I made some errors

 

Thanks @judah4, @troien and everyone else that have been involved in creating this color picker! This has saved me a lot of headache.

 

Hi there!

I've used the colour picker in my project and it helped me out a lot--thank you for creating it!
However, I have an error now which makes it impossible to start the game, any idea why?

Assets/HSVPicker/BoxSlider.cs(9,22): error CS0738: `UnityEngine.UI.BoxSlider' does not implement interface member `UnityEngine.UI.ICanvasElement.LayoutComplete()' and the best implementing candidate `UnityEngine.UI.BoxSlider.Rebuild(UnityEngine.UI.CanvasUpdate)' return type `void' does not match interface member return type `void'

Assets/HSVPicker/BoxSlider.cs(9,22): error CS0535: `UnityEngine.UI.BoxSlider' does not implement interface member `UnityEngine.UI.ICanvasElement.GraphicUpdateComplete()'

I'm using Unity 5.2.2.f1 - maybe they changes something?
As far as I remember I didn't edit the code.

Best Regards,
Kristina Waldt

 

Unity updated the interface the BoxSlider implements. I haven't been maintaining the project so I haven't gone in to fix it but If you add

Code (CSharp):

1. public void LayoutComplete() {}
2. public void GraphicUpdateComplete() {}

to the BoxSlider class it should compile and run.

 

You are great, thank you!
I works beautifully again~

 

Such a great free asset

 

Thank you

 

I would love to say thanks, this is exactly what I am looking for, however I am getting

Code (CSharp):

1. Assets/HSVPicker/BoxSlider.cs(9,22): error CS0738: `UnityEngine.UI.BoxSlider' does not implement interface member `UnityEngine.UI.ICanvasElement.LayoutComplete()' and the best implementing candidate `UnityEngine.UI.BoxSlider.Rebuild(UnityEngine.UI.CanvasUpdate)' return type `void' does not match interface member return type `void'

and

Code (CSharp):

1. Assets/HSVPicker/BoxSlider.cs(9,22): error CS0535: `UnityEngine.UI.BoxSlider' does not implement interface member `UnityEngine.UI.ICanvasElement.GraphicUpdateComplete()'

All I did was import assets. I am not much of a coder, so do not know what is going wrong.

 

Look 4/5 messages above yours

 

There's a pull request in the repo that I need to approve that should have a lot of fixes. I just haven't had the time to verify it.

 

Any estimated time when you'll be done verifying the fixes?

 

Oh, let me check on the pull request

 

Thanks for the reminder. Version 2 from the pull request is way more robust than what I started. It should be updated to the latest version now

 

Thanks a lot @judah4 . This is really great.

 

newbie here

I don't know if I am missing something here but I cant set a start color for the picker.

First I have tried:

myColor = Color.green;
picker.AssignColor (myColor);

and then this:

myColor = new Color32 (127, 3, 128, 255);
picker.AssignColor (myColor);

but I get this error every time:
error CS1501: No overload for method `AssignColor' takes `1' arguments

here is the actual code:

using UnityEngine;
using System.Collections;

public class ColorPickerTester : MonoBehaviour
{
public new Renderer renderer;
public ColorPicker picker;
public Color myColor;

// Use this for initialization
void Start ()
{
picker.onValueChanged.AddListener(color =>
{
renderer.material.color = color;
});
renderer.material.color = picker.CurrentColor;

myColor = Color.green;
picker.AssignColor (myColor);
}
}

 

I think the current version lets you assign the current color like so.

Code (CSharp):

1. myColor = Color.green;
2. picker.CurrentColor = myColor;

It looks like AssignColor has changed functionality and needs to be renamed

 

thanks a lot bro works very well

 

it does not work on some android devices, since Unity 5.3.5=( dont work on Android 4.0 (Sony - wt19i)

 

Uh, the project code can be taken and placed in a lower unity version but there may be some issues to be worked out.

 

HI, I love this color picker. Thanks a lot!
I am trying to change Specular color using this color picker and it's not going very well. Diffuse color change works great.
Please help me. Thanks in advance!

The shader is Marmoset.

Here it is:
Shader "Marmoset/Bumped Specular IBL" {
Properties {
_Color ("Diffuse Color", Color) = (1,1,1,1)
_SpecColor ("Specular Color", Color) = (1,1,1,1)
_SpecInt ("Specular Intensity", Float) = 1.0
_Shininess ("Specular Sharpness", Range(2.0,8.0)) = 4.0
_Fresnel ("Fresnel Strength", Range(0.0,1.0)) = 0.0
_MainTex ("Diffuse(RGB) Alpha(A)", 2D) = "white" {}
_SpecTex ("Specular(RGB) Gloss(A)", 2D) = "white" {}
_BumpMap ("Normalmap", 2D) = "bump" {}

//slots for custom lighting cubemaps
//_DiffCubeIBL ("Custom Diffuse Cube", Cube) = "black" {}

}

SubShader {
Tags {
"Queue"="Geometry"
"RenderType"="Opaque"
}
LOD 400
//diffuse LOD 200
//diffuse-spec LOD 250
//bumped-diffuse, spec 350
//bumped-spec 400

//mac stuff
CGPROGRAM
#ifdef SHADER_API_OPENGL
#pragma glsl
#endif

#pragma target 3.0
#pragma exclude_renderers gles gles3 metal d3d11_9x flash
#pragma surface MarmosetSurf MarmosetDirect vertex:MarmosetVert fullforwardshadows

#pragma multi_compile MARMO_BOX_PROJECTION_OFF MARMO_BOX_PROJECTION_ON
#if MARMO_BOX_PROJECTION_ON
#define MARMO_BOX_PROJECTION
#endif


#pragma multi_compile MARMO_SKY_BLEND_OFF MARMO_SKY_BLEND_ON

#if MARMO_SKY_BLEND_ON
#define MARMO_SKY_BLEND
#endif

#define MARMO_HQ
#define MARMO_SKY_ROTATION
#define MARMO_DIFFUSE_IBL
#define MARMO_SPECULAR_IBL
#define MARMO_DIFFUSE_DIRECT
#define MARMO_SPECULAR_DIRECT
#define MARMO_NORMALMAP
#define MARMO_MIP_GLOSS

//#define MARMO_GLOW
//#define MARMO_PREMULT_ALPHA
//#define MARMO_OCCLUSION
//#define MARMO_VERTEX_OCCLUSION
//#define MARMO_VERTEX_COLOR
//#define MARMO_SPECULAR_FILTER

#include "MarmosetInput.cginc"
#include "MarmosetCore.cginc"
#include "MarmosetDirect.cginc"
#include "MarmosetSurf.cginc"

ENDCG
}

FallBack "Marmoset/Specular IBL"
}



I

 

Hi, I managed this to work.

Here it is:
using UnityEngine;
using System.Collections;

public class ColorPickerTester : MonoBehaviour
{



public new Renderer renderer;
public ColorPicker picker;
public Color myColor;


// Use this for initialization
void Start ()
{



GetComponent<Renderer>().material.shader = Shader.Find("Marmoset/Bumped Specular IBL");
myColor = GetComponent<Renderer>().material.GetColor("_SpecColor");
picker.CurrentColor = myColor;

picker.onValueChanged.AddListener(color =>
{



GetComponent<Renderer>().material.SetColor("_SpecColor", picker.CurrentColor);

});


//GetComponent<Renderer>().material.SetColor("_SpecColor", picker.CurrentColor);
//renderer.material.color = picker.CurrentColor;
}

// Update is called once per frame
void Update () {

 

https://forum.unity3d.com/threads/using-code-tags-properly.143875/

 

So did you getting working with is?

 

Hi I’m having a strange issue with the picker, I’m loading colors from a Bluetooth device using a byte Array then I convert it to a color which I then assign to the picker, but for some strange reason the colors sliders are coming up as 306 instead of 255 or actually 12 which is what it’s meant to be. Attached are two examples. Any help would be much appreciated.

 

That's odd, did you verify the data you are sending to the color picker? Any code snippets would be helpful too

 

Hi, sorry for the late reply. Here is the code I'm using to set the ColorPicker:

Code (CSharp):

1. colorPicker.AssignColor(ColorValues.R, originalColor.r);
2. colorPicker.AssignColor(ColorValues.G, originalColor.g);
3. colorPicker.AssignColor(ColorValues.B, originalColor.b);
4. colorPicker.AssignColor(ColorValues.A, originalColor.a);

As for the color being sent, its Color(12,0,0,255) or Color(12,12,0,255)

 

There might be an issue if you set each color individually because the color picker works in HSV and converts the RGB values.

Try this.

Code (CSharp):

1. colorPicker.CurrentColor = originalColor;

 

I tried it, not difference unfortunatly

 

I added an AssignColor(Color color) method to directly assign the color instead of going through the CurrentColor property. I also double check on a test branch color assigning at it should work. https://github.com/judah4/HSV-Color-Picker-Unity/tree/assign-color-test

 

Thank you, that worked