Colorify the List Widget Output

Mohammad · September 16, 2021, 7:52am

How list tiddlers in color from a predefined set of colors and loop in color set?

Assume you have a set of four colors: red, green, blue, yellow
Next you have a $list which filters all tiddlers tagged with for example Learning

Now, I wish the $list shows the results in color selected from the above four colors and cycle through them. So, the first result is red, the second is green,… fifth is red again, sixth is green, seven result is blue, … and so on

I am looking for a simple general solution! I may have 8 colors or more!
Please share your solutions!

Mohammad · September 16, 2021, 8:25am

This is my first (ugly one) solution

(Only works in TW 5.2.0+)

got to https://tiddlywiki.com/prerelease
create a new tiddler
put the below script into your new tiddle

\define numcolors() 3
\define color-set() 1:red 2:green 3:blue
\define cstyle() color:$(color)$


<$list filter="[tag[Learning]]" counter=id>
<$vars num={{{ [<id>remainder<numcolors>] }}}>
<$vars colorid={{{[<num>match[0]then<numcolors>else<num>] }}}>
<$vars color={{{ [enlist<color-set>prefix<colorid>removeprefix<colorid>removeprefix[:]] }}}>
<span style=<<cstyle>> ><$text text=<<currentTiddler>>/></span><br>
</$vars> 
</$vars> 
</$vars> 
</$list>

save and see the results

Mohammad · September 16, 2021, 8:28am

This is for 10 colors (I borrowed the color set from Python Matplotlib colors)
I used hex color code this time

NOTE: The solution uses counter attribute for $list widget which is only available in TW 5.2.0

\define numcolors() 10
\define color-set() 1:#1f77b4 2:#ff7f0e 3:2ca02c 4:#d62728 5:#9467bd 6:#8c564b 7:#e377c2 8:#7f7f7f 9:#bcbd22 10:#17becf
\define cstyle() color:$(color)$


<$list filter="[tag[Learning]]" counter=id>
<$vars num={{{ [<id>remainder<numcolors>] }}}>
<$vars colorid={{{[<num>match[0]then<numcolors>else<num>] }}}>
<$vars color={{{ [enlist<color-set>prefix<colorid>removeprefix<colorid>removeprefix[:]] }}}>
<span style=<<cstyle>> ><$text text=<<currentTiddler>>/></span><br>
</$vars> 
</$vars> 
</$vars> 
</$list>

Partial results

EricShulman · September 16, 2021, 9:35am

Here’s my solution that works in TW5.1.23:

\define colorList(filter,colors)
<$vars numcolors={{{ $colors$ +[count[]] }}}>
<$list filter="$filter$">
   <$vars id={{{ $filter$ +[allbefore:include<currentTiddler>count[]] }}}>
   <$vars colorid={{{ [<id>subtract[1]remainder<numcolors>add[1]] }}}>
   <span style={{{ $colors$ +[nth<colorid>addprefix[color:]] }}}>
      <$text text=<<currentTiddler>>/><br>
   </span>
   </$vars>
   </$vars>
</$list>
\end

<<colorList "[tag[Learning]]" "red green blue yellow">>

Note that <$vars id=...> is equivalent to the counter=id syntax, without requiring TW5.2.0

enjoy,
-e

Alvaro · September 16, 2021, 1:07pm

You can use colors HSL and play with them.
In first step you can change de hue (H), you can have, for example, steps of 30. from 0 to 330 (360=0) then you have 12 colors. If you need more color you can use short step(15, 10) and play with lightness (L) and sometimes (S) saturation.

Mohammad · September 16, 2021, 1:08pm

Thanks Eric! Small and smart!

Mohammad · September 16, 2021, 1:10pm

Hi Alvaro, good approach! Could you please give a small example! or the pseudo code!
Do you mean, we should use counter to step through colors?

TW_Tones · September 16, 2021, 1:13pm

I think color cycles can look good but why waste the colour dimension when it can share something about the item like status, size or age?

Alvaro · September 16, 2021, 6:51pm

Basic idea is something like the following code, you have to change the filter in the list widget. I’ve reused your code.

\define cstyle() color: hsl($(hue)$, $(sat)$%, $(L)$%)

<$list filter="[tag[Filter Operators]]" counter=num>
<$vars hue={{{ [<num>subtract[1]multiply[30]] }}} 
sat={{{ [<num>remainder[24]compare:integer:gt[11]then[40]else[100]] }}}
L={{{ [<num>remainder[24]compare:integer:gt[11]then[35]else[50]] }}} >
<span style=<<cstyle>> ><$text text=<<currentTiddler>>/></span><br>
</$vars>
</$list>

You can do more complex combinations of colors playing with other filter operators. I’ve only used step of 30.

Offtopic: This idea isn’t new, some time ago i though about something like this to be used when we create new tags. But it was one of other ideas to work which I never started.

Mohammad · September 16, 2021, 7:28pm

I did not get the logic behind those numbers (30, 24, 40, …)! but works great! and cycle every 24 colors!

Alvaro · September 16, 2021, 9:21pm

30 is a choice to use color wheel, 360/30= 12 colors and it gives a “distinguishable” color sequence. A bigger number gives small sequence of color but with less colors, and a smaller number gives more colors but they are worse distinguishable.
24 because is the double of 12 (our number of colors) ant then create a secuence of 12*2 number with remain[24] (1,2,…,22,23,0).
11 to split the sequence in two equal parts (12 & 12) to apply a different values of saturation and lightness.
40 and 35 are a random choice to change sat an L in our 12 colour. for example red i hsl is hue=0, sat=100%, lightnes=50% (the else values).

You can play sequence of colors and sequence of number and the number of parts of sequence number to create different “palettes”. And You can also add more complexity using other filter operators.

Mohammad · September 17, 2021, 4:40am

Thank you @Alvaro. I got how it works now!

TW_Tones · September 17, 2021, 5:50am

@Alvaro this could be re-witten as a macro which one supplies N and it returns the color number; eg;
<span style=<<cycle-colour N>>
where cycle-colour reads “color: colornumber;”

Needs testing. may be better as returning 'style=“color: colornumber;” because I think you can use multiple “style=” in html.

Alvaro · September 17, 2021, 12:19pm

Yes, It is just a code snippet and anyone can convert it in a smart snippet (=macro).

multiple style attributes?
You can do it with something in one with something like this

\define cstyle() color: red;
\define bgc() background-color:yellow;
<span style={{{ [<cstyle>] [<bgc>] +[join[ ]] }}} >Dummy text</span>

CodaCoder · September 17, 2021, 1:28pm

It’s true, you can have multiple style attributes. But you end up with just the last one:

TW_Tones · September 17, 2021, 3:15pm

Then there is use a “class, but override it with a style”?

CodaCoder · September 17, 2021, 6:45pm

Not quite sure what you’re asking, Tony. Maybe this helps?

Here’s how to override using CSS !important (usually not a good idea) which always “wins”. No matter how high I raise the specificity of the last css rule, the first one (with !important) wins:

So, if your question is asking does style override class? Answer: depends

CodaCoder · September 17, 2021, 7:00pm

More here:

https://specificity.keegan.st

TW_Tones · September 18, 2021, 12:03am

Perhaps it depends, but depends on what, the only cause of apparent complexity comes from the use of !Important in the class, all the training says “important, do not use !important” and this is a simple example why not.