Search Unity

  1. Get all the Unite Berlin 2018 news on the blog.
    Dismiss Notice
  2. Unity 2018.2 has arrived! Read about it here.
    Dismiss Notice
  3. We're looking for your feedback on the platforms you use and how you use them. Let us know!
    Dismiss Notice
  4. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  5. Improve your Unity skills with a certified instructor in a private, interactive classroom. Learn more.
    Dismiss Notice
  6. ARCore is out of developer preview! Read about it here.
    Dismiss Notice
  7. Magic Leap’s Lumin SDK Technical Preview for Unity lets you get started creating content for Magic Leap One™. Find more information on our blog!
    Dismiss Notice
  8. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice

Color Picker

Discussion in 'Unity UI & TextMesh Pro' started by judah4, Sep 7, 2014.

  1. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    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.
     
  2. PMerlaud

    PMerlaud

    Joined:
    Apr 9, 2013
    Posts:
    59
    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.     }
     
    Last edited: Mar 23, 2015
  3. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    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?
     
  4. unityuser13

    unityuser13

    Joined:
    Dec 7, 2014
    Posts:
    1
    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.
     
  5. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    @unityuser13 Should be updated for unity 4 now in the master branch
     
  6. Mol

    Mol

    Joined:
    Mar 11, 2015
    Posts:
    15
    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).
     
  7. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    @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.
     
    fprost likes this.
  8. RichardKain

    RichardKain

    Joined:
    Oct 1, 2012
    Posts:
    1,005
    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?
     
  9. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    yes, an alpha field would work just like the other rgb ones
     
  10. Mol

    Mol

    Joined:
    Mar 11, 2015
    Posts:
    15
    It was obvious.
    Fixed the issue setting the direction of the slider to Top To Bottom. Thanks.
     
  11. carking1996

    carking1996

    Joined:
    Jun 15, 2010
    Posts:
    2,518
    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?
     
  12. laurentlavigne

    laurentlavigne

    Joined:
    Aug 16, 2012
    Posts:
    1,880
    Very nice, thanks for sharing!
     
  13. moka021

    moka021

    Joined:
    Feb 10, 2015
    Posts:
    10
    @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!
     
  14. Virdari

    Virdari

    Joined:
    Aug 19, 2014
    Posts:
    14
    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.
     
  15. lengzai96

    lengzai96

    Joined:
    May 6, 2015
    Posts:
    1
    Hey. May I know what I need to change If i just want blue to red without the purple and the other red
     
  16. Kiwasi

    Kiwasi

    Joined:
    Dec 5, 2013
    Posts:
    15,396
    @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.
     
  17. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    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
     
    Last edited: Aug 6, 2015
  18. Carrotpie

    Carrotpie

    Joined:
    Sep 25, 2014
    Posts:
    18
    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?
     
  19. Carrotpie

    Carrotpie

    Joined:
    Sep 25, 2014
    Posts:
    18
    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.
     
  20. shadowdiver

    shadowdiver

    Joined:
    Aug 18, 2014
    Posts:
    5
    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.
     
  21. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    7
    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 :D

    example.png
     
    judah4 likes this.
  22. dl_studios

    dl_studios

    Joined:
    Oct 14, 2012
    Posts:
    76
    Thanks @judah4, @troien and everyone else that have been involved in creating this color picker! This has saved me a lot of headache.
     
  23. KWaldt

    KWaldt

    Joined:
    Nov 1, 2013
    Posts:
    121
    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
     
  24. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    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.
     
    KWaldt likes this.
  25. KWaldt

    KWaldt

    Joined:
    Nov 1, 2013
    Posts:
    121
    You are great, thank you!
    I works beautifully again~
     
  26. WOODSY

    WOODSY

    Joined:
    Apr 8, 2015
    Posts:
    164
    Such a great free asset
     
  27. Pauleta

    Pauleta

    Joined:
    Aug 8, 2013
    Posts:
    15
    Thank you
     
  28. Skaeren

    Skaeren

    Joined:
    Feb 9, 2015
    Posts:
    14
    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.
     
  29. larku

    larku

    Joined:
    Mar 14, 2013
    Posts:
    1,411
    Look 4/5 messages above yours :)
     
    judah4 likes this.
  30. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    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.
     
  31. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,126
    Any estimated time when you'll be done verifying the fixes?
     
  32. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    Oh, let me check on the pull request
     
  33. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    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
     
  34. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,126
    Thanks a lot @judah4 . This is really great.
     
  35. normandguerin

    normandguerin

    Joined:
    Sep 1, 2014
    Posts:
    9
    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);
    }
    }
     
  36. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    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
     
    normandguerin likes this.
  37. normandguerin

    normandguerin

    Joined:
    Sep 1, 2014
    Posts:
    9
    thanks a lot bro works very well
     
  38. mimicryArt

    mimicryArt

    Joined:
    Oct 23, 2015
    Posts:
    3
    it does not work on some android devices, since Unity 5.3.5=( dont work on Android 4.0 (Sony - wt19i)
     
  39. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    Uh, the project code can be taken and placed in a lower unity version but there may be some issues to be worked out.
     
  40. liqvidb

    liqvidb

    Joined:
    Dec 18, 2014
    Posts:
    2
    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
     
  41. liqvidb

    liqvidb

    Joined:
    Dec 18, 2014
    Posts:
    2
    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 () {
     
  42. larku

    larku

    Joined:
    Mar 14, 2013
    Posts:
    1,411
  43. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    So did you getting working with is?