Hex color picker input in default HTML UI

[jywarren]

Some modules now are prompting for a color of input. We can accept RGBA, hex, etc, but for easier input, perhaps we can include a node library which has a simple built-in color picker? Then that could become an input type on its own!

[gitmate]

GitMate.io thinks the contributor most likely able to help you is @ccpandhare.

Possibly related issues are #332 (Error in default color map), #423 (add slider UI to some modules HTML UI: brightness, blur), and #470 (UI Improvements ).

[gitmate]

GitMate.io thinks the contributor most likely able to help you is @ccpandhare.

Possibly related issues are #332 (Error in default color map), #423 (add slider UI to some modules HTML UI: brightness, blur), and #470 (UI Improvements ).

[harshkhandeparkar]

How about implementing color pickers on the frontend https://farbelous.io/bootstrap-colorpicker/tutorial-Basics.html ?

[vibhorgupta-gh]

@harshkhandeparkar sounds good!
We could write a util function to convert the input into RGB or HEX and then pass it to the respective module to process it. Would like to work on this.
@jywarren how does that sound?

https://www.npmjs.com/package/pickr-widget
This looks nice too, in case we go with npm packages

[harshkhandeparkar]

What I feel is that the color input is up to the user frontend and the parsing of different values HEX HSLA RGB should be the job of the library so instead of adding more packages, we could add frontent code and make the library conlmpatible with it. This makes the library useful in more and more use cases.

[vibhorgupta-gh]

Makes sense. Parsing would then be the only concern for IS. Nice.

[jywarren]

oh this sounds awesome!

…

On Thu, Jan 3, 2019 at 12:50 PM Vibhor Gupta ***@***.***> wrote: Makes sense. Parsing would then be the only concern for IS. Nice. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#597 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ_ajNSqpk_j6C_n8E-6Ou7sqgZG6ks5u_kLQgaJpZM4Zoe_x> .

[harshkhandeparkar]

We also have to keep in mind that mobile phone users cannot use color pickers very efficiently.

[aashna27]

@VibhorCodecianGupta would you like some help on this?? This issue sounds interesting to me.

[vibhorgupta-gh]

@aashna27 sure! I was thinking to provide a colour picker to all the modules requiring some sort of colour modules and since https://farbelous.io/bootstrap-colorpicker/tutorial-Basics.html already gives us the values of the RGBA, we could write a custom function to pick the respective channel values and pass them into the already existing input types

[harshkhandeparkar]

I have a crazy idea in mind. How about inputting any type of color values but in the CSS format
i.e.
#rrggbbaa for HEX, hsla() for HSLA, rgba() for RGBA, space separated 255 255 255 255 for decimal rgba values.

We can write a util function which detects the type of values using maybe regex and returns an object of decimal(0-255) values for each color and for alpha?

[jywarren]

Harsh i think this is a great idea.

Looking for good UIs we could use, this is nice: https://farbelous.io/bootstrap-colorpicker/tutorial-Basics.html and bootstrap-compatible:

This one has lots of different options but may be more complex to install: https://casesandberg.github.io/react-color/