Small Color PIcker and RGB output

[MagoArcade]

Hi all,

How can I insert a small color picker into a tiddler and have it output to R,G,B format. The standard color picker has way too much associated with it (Doc link). eg:

All I really want is the button at the bottom, next to the text box. 

Also, I'm needing a way to save it to a field in this format:

198,3,7

i.e. RGB in decimal

Any advice appreciated!

[Eric Shulman]

On Sunday, August 11, 2019 at 11:07:59 AM UTC-7, MagoArcade wrote:

How can I insert a small color picker into a tiddler and have it output to R,G,B format. The standard color picker has way too much associated with it (Doc link). eg:

All I really want is the button at the bottom, next to the text box. 

Also, I'm needing a way to save it to a field in this format:

198,3,7

i.e. RGB in decimal

The "button at the bottom" is actually an HTML input, with type="color", and if you dig into the TWCore "colour-picker" code ($:/core/macros/colour-picker), you will find this line:

<$edit-text tiddler="$:/config/ColourPicker/New" type="color" tag="input"/>

This creates the button you want.  However... the actual appearance AND function of the color input depends your specific platform and browser.  If your browser doesn't support the color button directly, it may render as a regular input field into which you can TYPE the color value.  Of course, you should change the target tiddler name to the title of the tiddler in which you want the color selection to be stored.

Unfortunately, this will only achieve half your desired goal.  The problem is that the browser-supplied HTML control will ONLY write the chosen color using a CSS-compatible *hexadecimal* value (e.g., "#rrggbb"), rather than the comma-separated decimal R,G,B values you want.

For more details, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

enjoy,

-e

Eric Shulman

TiddlyTools: "Small Tools for Big Ideas" (tm) http://tiddlytools.github.io/

InsideTiddlyWiki: The Missing Manuals

(NOTE NEW HOSTING LOCATION)

 

[Eric Shulman]

On Sunday, August 11, 2019 at 12:08:39 PM UTC-7, Eric Shulman wrote:

<$edit-text tiddler="$:/config/ColourPicker/New" type="color" tag="input"/>

addendum: You can use the $edit-text widget's field="..." param to write the selected color value into a specified field rather than the default "text" field.

-e

[Thomas Elmiger]

Hi MagoArcade,

Maybe my Coloraction-Plugin could be part of your solution, as it can transform colours to other formats. (toRgbString is even the default action)

So it could turn a hexadecimal value into the format "rgb(r, g, b)" – still not exactly what you need, but maybe useful none the less?

All the best,

Thomas

[MagoArcade]

Thanks Eric - that got me on the right track. In the end, the following, simple code worked:

<$edit-text tiddler="$:/_opTaskStore" type="color" tag="input" field="backcolor"/>

[MagoArcade]

Thanks Thomas - that's got me half way there. What I am needing is output in this format:

rgba(252,248,61,1)

The "1" (alpha value never changes)

The problem is the color picker only returns an rgb value. I can't figure out how to add an alpha value to the rgb value to get the output needed above. Any ideas? E.g. something like this format:

<<coloraction #ff0000 addalpha 1>>

[Thomas Elmiger]

This might do what you want:

<<coloraction #ff0000 alpha:0.999>>

All the best,
Thomas

[MagoArcade]

thanks fella - that did the trick