Small Color PIcker and RGB output

74 views
Skip to first unread message

MagoArcade

unread,
Aug 11, 2019, 2:07:59 PM8/11/19
to TiddlyWiki
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:

colorpicker.png

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

unread,
Aug 11, 2019, 3:08:39 PM8/11/19
to TiddlyWiki
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.


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

unread,
Aug 11, 2019, 3:33:30 PM8/11/19
to TiddlyWiki
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

unread,
Aug 11, 2019, 4:15:40 PM8/11/19
to TiddlyWiki
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

unread,
Aug 18, 2019, 4:51:43 PM8/18/19
to tiddl...@googlegroups.com
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

unread,
Aug 18, 2019, 4:57:53 PM8/18/19
to TiddlyWiki
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

unread,
Aug 18, 2019, 5:40:37 PM8/18/19
to TiddlyWiki
This might do what you want:

<<coloraction #ff0000 alpha:0.999>>

All the best,
Thomas

MagoArcade

unread,
Aug 18, 2019, 5:54:49 PM8/18/19
to TiddlyWiki
thanks fella - that did the trick
Reply all
Reply to author
Forward
0 new messages