Bug in default palette?

#1

I notice that on tiddlywiki.com and also in empty, under

Controlpanel > Appearance > Palette

…if you click Show editor

there are several field values prefixed “edit” e.g

image
image1149×310 14.5 KB

…is that really as it should be?

#2

Aaaah - it seems the “edit xxx” is a placeholder for when the field has no value! So it is an encouragement to add a value.

OK, I guess it is as it should be then, right?

#3

If you need to create a new palette have a look at: Palette Manager – Feature Complete preview

It has the possibility to resolve the <<color macros and there are element previews for every element – See the video

#4

tangentially, i have noticed that on many palettes the color preview doesn’t show up.
when i want to make a palette change, i often see a color i want to change in the UI and go looking for that color in the list - and if the preview doesn’t show the color it makes it hard to identify which needs changing.

image
image906×536 18.2 KB

it seems the rgba() or macro-defined colors don’t have previews, but hex colors do - could this be fixed?

#5

Some time ago, I created an “enhanced” version of the TWCore PaletteManager that adds a number of useful features, including:

  • select, edit, clone, or delete entire palettes
  • search for a subset of palette entries by matching colornames, descriptions, or color values
  • [+] button with popup to add new palette entries
  • a “color map” that shows all current palette colors with popups that lets you quickly change groups of palette entries that share the same color
  • “undo” functionality to revert individual palette color changes during the current browser session (before saving the TW file)
  • edit or delete individual palette entries
  • AND an improved color control, based on an <$edit-text type="color"> widget that can display colors for:
    • 3-digit #rgb or 6-digit #rrggbb hexadecimal color codes
    • <<colour colourname>> macro references
    • X11 color names (e.g., “ivory”, “skyblue”, “forestgreen”, etc.)
    • RGB(r,g,b) or RGBA(r,g,b,a) CSS syntax.

It does all this by building on top of the existing TWCore $:/PaletteManager code, using only wikitext scripting, so there are no .js code plugins to install, and it is self-contained within a single tiddler.

You can quickly try this enhanced Palette Manager by simply viewing https://tiddlytools.com/#TiddlyTools%2FPalettes%2FManager and then dragging the title of that tiddler into your own TiddlyWiki to import it, without needing to save-and-reload for it to be useable!

Note: if you also copy https://tiddlytools.com/#TiddlyTools%2FSettings%2FColors%2FX11 into your TiddlyWiki, you can select from a drop-list of 150 X11 color names rather than needing to directly type in the color name. Each individual X11 color in the drop-list shows their color as the background for that list entry, so it is easy to visually choose the desired color without having to know the corresponding X11 color name. The drop-list also performs “incremental matching” so if you type in a partial color name in the edit field it will trim the list to show all colors that match your input (e.g., enter “blue” and it will show all X11 colors that have “blue” in their name).

In addition, TiddlyTools/Palettes/Manager is 100% compatible with @pmario’s improved $:/PaletteManager plugin, including support for his “preview” mechanism that shows rendered samples of palette color assignments, so you can install and use BOTH improved palette manager interfaces within the same TiddlyWiki file!

enjoy,
-e

3 Likes
#6

See: Palette Manager -- Feature Complete preview

Edition: Palette Manager — Preview

1 Like
#7

@EricShulman @pmario awesome! especially the improvements to the color preview/edittext widget.
i would consider the lack of preview to be a bug, while i will definitely start using this plugin to get around it is there a reason it hasn’t been put into the core?

#8

My TiddlyTools/Palettes/Manager operates as an “overlay enhancement” that builds on top of the existing TWCore $:/PaletteManager wikitext code, and can be added to any TiddlyWiki “on-the-fly” without making any changes to the TWCore $:/PaletteManager or requiring a save-and-reload. It can be quickly “installed” in your TiddlyWiki when needed to make changes to palette definitions (or clone/define new palette definitions), and then as easily discarded before saving your TiddlyWiki to preserve those palette changes.

#9

i understand, and it will be very helpful for me. but is it intended behavior for the color previews to show black instead of the correct color for rgba() and macro call color references? if not, could that specific aspect be fixed using the methods you’ve put in your palette manager?

#10

The “color swatch” display in the current TWCore $:/PaletteManager currently uses an $edit-text widget with the type="color" attribute, which only displays the actual color if the underlying value is specified using a 6-digit hex RGB value (#rrggbb).

Code from TiddlyTools/Palettes/Manager CAN be added to improve the color swatch display so it handles valid CSS color values that are NOT specified as “#rrggbb”, including

  • 3-digit hex RGB (#rgb)
  • 8-digit hex RGBA with alpha channel (#rrggbbaa)
  • decimal RGB (RGB(r,g,b))
  • decimal RGB with alpha channel (RGBA(r,g,b,a))
  • <<colour ...>> macro call references

To try it yourself, you can edit the TWCore $:/PaletteManager shadow, like this:

  • In palette-manager-colour-row-segment, replace
    <$edit-text index=<<colourName>> type="color" tag="input" class="tc-palette-manager-colour-input"/>
    with
    <<palette-manager-colour-row-pick>>
  • add the following definition for palette-manager-colour-row-pick 
\define palette-manager-colour-row-pick()
\define pick()  $:/state/popup/PaletteManager/pick
\define hex()  ^#[A-Fa-f0-9]{3}$
\define hexa() ^#[A-Fa-f0-9]{8}$
<!-- GET PALETTE COLOR -->
<$let colourValue={{{ [<currentTiddler>getindex<colourName>] }}}>
<!-- RESOLVE MACRO OR WIDGET -->
<$wikify name=resolvedValue text=<<colourValue>>>
<$let colourValue={{{ [<colourValue>prefix[#]then<colourValue>else<resolvedValue>] }}}>
<!-- EXPAND #RGB to #RRGGBB -->
<$let colourValue={{{ [<colourValue>regexp<hex>split[]!match[#]] :map[<currentTiddler>addsuffix<currentTiddler>] +[join[]!match[]addprefix[#]else<colourValue>] }}}>
<!-- TRUNCATE #RRGGBBAA (IGNORE ALPHA CHANNEL) -->
<$let colourValue={{{ [<colourValue>regexp<hexa>split[]first[7]join[]] ~[<colourValue>] }}}>
<!-- CONVERT RGB(r,g,b) OR RGBA(r,g,b,a) TO #RRGGBB (IGNORE ALPHA CHANNEL) -->
<$let dec={{{ [<colourValue>lowercase[]prefix[rgb]split[(]nth[2]trim[)]split[,]first[3]join[ ]] }}}
       hi={{{ [enlist:raw<dec>divide[16]]    :map[[0123456789ABCDEF]split[]zth<currentTiddler>] +[join[ ]] }}}
       lo={{{ [enlist:raw<dec>remainder[16]] :map[[0123456789ABCDEF]split[]zth<currentTiddler>] +[join[ ]] }}}
        r={{{ [enlist:raw<hi>nth[1]] =[enlist:raw<lo>nth[1]] +[join[]] }}}
        g={{{ [enlist:raw<hi>nth[2]] =[enlist:raw<lo>nth[2]] +[join[]] }}}
        b={{{ [enlist:raw<hi>nth[3]] =[enlist:raw<lo>nth[3]] +[join[]] }}}
   colourValue={{{ [<r>] =[<g>] =[<b>] +[join[]!match[]addprefix[#]else<colourValue>] }}}>
<span title='pick color for "$(colourName)$"'>
<$eventcatcher $change="<$action-setfield $tiddler=<<currentTiddler>> $index=<<colourName>> $value={{{ [<pick>getindex<colourName>] }}}/><$action-deletetiddler $tiddler=<<pick>>/>">
<$edit-text tiddler=<<pick>> index=<<colourName>> tag=input class="tc-palette-manager-colour-input" type="color" default=<<colourValue>>/>
\end

That will do it. Note that this will still show a black swatch for some valid CSS values, specifically transparent and inherit, as well as X11 color names (which requires TiddlyTools/Palettes/Manager and TiddlyTools/Settings/Colors/X11 to map the names to their equivalent #rrggbb values).

-e

2 Likes