Color picker for the user

Help from Community
1

I am trying to figure a way to give a user the ability to choose the color of an object. Ideally it would be 3 sliders that would control HSV values. Alternatively RGB with an overal brightness control could work. Has anyone done this before? I found the scroll asset sliders and have those working. In the absence of direct binding I was thinking of maybe converting slider values to hex and then concatenating 3 values to create a hex color value and then use that to control color. I’m not a Java guy though and am having issues converting linear gauge values to hex. Any tips? Is this a reasonable method? Any other ideas of how to do this?

thanks
Brad

2

Hi @emphelp

I’m sharing with you a try I gave to your request.

Quick summary on how it’s built:

  • 3 Linear Gauge Asset for the R, G and B colors

  • 3 transparent Rectangle over each Gauge to intercept tap

  • for each tap on a Gauge we have :

    • a Linear Converter that turns the tap value (between 0 and 400 pixels) into à 0/100 value (to move each Gauge)
    • a Linear Converter that turns the tap value (between 0 and 400 pixels) into à 0/256 value (to get a color)
    • a Custom Script Converter the 0/256 value into a 00/FF Hex value

  • a final Text Concatenation Asset to put all values together

In the end, it looks like this:
ColorPicker

It’s far from perfect as it’s RGB and not HSL, and Gauges needs to be tapped, not swiped, but hey, it may give you some ideas :bulb: :wink:

Here is the Experience, feel free to dig to see how it’s made.
Color Picker.zip (6.3 MB)

A small detailed explanation on the Custom Script Converter that may look “frightening” :grin:
("00"+Math.round(INPUT).toString(16)).slice(-2).toUpperCase()

  • Math.round(INPUT) to round up the INPUT value
  • toString(16) to convert it to Hexa
  • “00”+….slice(-2) to add padding 0 to have Hex value always on 2 characters
  • .toUpperCase() to have an UpperCase final value, not mandatory, but I have small OCDs :stuck_out_tongue:

Best regards,

Alex.

5 Likes
3

Wow! Thank you Alex! That is perfect! I was able to swap out your touch gauges for linear gauges using the scroll method in order to get draggable gauges and it works perfectly.

Thanks again!!
Brad

1 Like