Row of dots macro

[Ammuayan]

Several years ago, I got help on the google group to create a row of dots with a macro:

[tw5] An easier way to create a band of specific colors

I created some classes to created colored dots, so that I can list specific colors for a project. I call them colorways. An example : [Annotation 2021-11-30 112413.png] The issue is that coding them is a pita. For example, the code for the above is: where cwd is a class that creates colorway dots ylw (and red, wht, grn) is a class that makes the dot yellow Can anyone think of an easier way to do this?

I am trying to implement it again, without CSS (because I have the css and it’s a pain to use). I’ve taken the details from the previous post / solution, but it’s not working in v5.3.6. Can anyone help?

---

\define bigDot( likeThis )
<$list filter="[[$likeThis$]split[,]]
+[search-replace:i[r],[red]]
+[search-replace:i[o],[orange]]
+[search-replace:i[y],[yellow]] 
+[search-replace:i[g],[green]] 
+[search-replace:i[b],[blue]] 
+[search-replace:i[p],[purple]] 
+[search-replace:i[k],[black]] 
+[search-replace:i[w],[white]] 
+[search-replace:i[brn],[sienna]] 
+[search-replace:i[gry],[gray]] 
+[search-replace:i[c],[cyan]] 
+[search-replace:i[m],[magenta]] 
+[search-replace:i[pnk],[pink]] 
+[search-replace:i[sky],[skyblue]] 
+[search-replace:i[lgn],[palegreen]] 
+[search-replace:i[ygn],[yellowgreen]] 
+[search-replace:i[bgn],[teal]]
+[search-replace:i[tan],[tan]]
+[search-replace:i[rbr],[brown]]
+[search-replace:i[gld],[gold]] 								
+[search-replace:i[svr],[silver]] 
+[search-replace:i[olv],[olive]] 
">
  <$vars thisStyle={{{ [[height:20px;width:20px;background-color:]] [] [[;border-radius:50%;display:inline-block;border:3px solid black;]] +[join[]] }}}>
  <span style={{{ [] }}}></span>
  </$vars>
</$list>
\end

---

The call:
<<bigDot “r,y,g,svr,k,b,p,ygn,w,rbr,tan”>>

---

The result:
A big old blankness:

---

So what am I doing wrong?

[tw-FRed]

Hi

Your filter was wrong (multiple search-replace will corrupt previous search-replace results), so here is a completely different solution:

First create a dictionary tiddler for your color abbreviations:

title: colors
type: application/x-tiddler-dictionary

r:red
o:orange
y:yellow
g:green
b:blue
p:purple
k:black
w:white
brn:sienna
gry:gray
c:cyan
m:magenta
pnk:pink
sky:skyblue
lgn:palegreen
ygn:yellowgreen
bgn:teal
tan:tan
rbr:brown
gld:gold
svr:silver
olv:olive

Then put this code in any other tiddler:

\function get.color(index) [[colors]getindex<index>else<index>]

\function get.style(color) [[height:20px;width:20px;background-color:]] [<color>] [[;border-radius:50%;display:inline-block;border:3px solid black;]] +[join[]]

\procedure bigDot( likeThis )
<$list filter="[<likeThis>split[,]] :map[get.color<currentTiddler>]">
 <span style={{{ [get.style<currentTiddler>] }}}></span>
</$list>
\end

<<bigDot "r,y,g,svr,k,b,p,ygn,w,rbr,tan">>

First function replaces an abbreviation with its full color name, second function adds the constant part of the style, and then the procedure uses both functions and a :map filter run to do the magic…

Have fun,

Fred

[Ammuayan]

Okay, that worked but…

The dots are in a column, and if I call the procedure from any other tiddler, it doesn’t work.

[pmario]

If the procedure should be globally available you need to tag the definition tiddler $:/tags/Global

Posting a screenshot how it looks in your wiki does not help us, without the code that creates the output.

[Ammuayan]

Woot! That’s one part solved. I thought there MIGHT be a tag needed, but didn’t know what.

So, dot test works, but… still in a column and not a row. And for some reason, the first and last in the list aren’t working:

If I put a leading comma (",r,o,…) then I get a blank dot, and a red dot, and an orange dot…

All the colors work, but cannot be first or last. The “comma” trick works at the end too:

<<bigDot “,r,olv,o,”>>

gets

but without those leading/final commas , I get:

<<bigDot “r,olv,o”>>

[Scott_Sauyet]

Copying Fred’s code into the main site worked fine for me:

So I’m guessing you have some CSS that’s interfering with the layout. Can you temporarily block some of your stylesheets to see where the issue might be?

As to your first/last dot issue, I’m not sure. It works fine for me.

Do you have a public wiki with this we can look at?

[Ammuayan]

Well, dangit. No.

But I’m fine sharing the file itself - can I do that here? If not… I need to find an online host anyway…

[Ammuayan]

https://drive.google.com/file/d/1NWucuGwNZm7tM2x4G_9rPskjxkxZZJeJ/view?usp=drive_link

[Scott_Sauyet]

I think you’ll need to make that public.

[Scott_Sauyet]

I would never recommend that you skirt the restrictions on uploads here by renaming MyFile.html to MyFile.html.json.

Never. Really, I’d never recommend that!

[Ammuayan]

LOL

It should be public now, but you def have access now.

Stylers has links to most of the custom css

[Scott_Sauyet]

The vertical issue wasn’t the styles, but the markup. Blank lines inside widgets often lead to block-level elements getting inserted in the output.

Taking them out should fix that:

\procedure bigDot( likeThis )
<$list filter="[<likeThis>split[,]] :map[get.color<currentTiddler>]">
 <span style={{{ [get.style<currentTiddler>] }}}></span>
</$list>
\end

You could alternatively add \whitespace trim to the start of the procedure or the whole tiddler.

[Ammuayan]

Okay, that fixed the columns. Still getting the first/last issue.

I’ve corrected / updated the file on Drive.

(the whitespace trim didn’t work)

[Scott_Sauyet]

I don’t know why all the blank lines in the tiddlers were bothering me, but when I removed them from the data tiddler and the procedures, everything started to work. While I’d love to know why, I don’t have time to investigate.

But you can download the following and drag it to your wiki, and it might solve both issues:

dots.json (1.0 KB)

[etardiff]

@Ammuayan

<<bigDot “r,olv,o”>>

Your issue is that you’re using smart quotes (note the slight left/right curve) rather than straight quotes ". The wikitext parser that handles things like macro parameters doesn’t recognize smart quotes, so when you type <<bigDot “r,olv,o”>>, it treats the first value as “r and the last as o”. Neither of these are in your color dictionary, of course, so they appear “empty”.

Side note: If the background color is the only styling aspect that’s intended to change, I’d recommend moving all the static CSS into a class, like this:

\function get.color(index) [[colors]getindex<index>else<index>]

\procedure bigDot(likeThis)
<style>
.dotstyle { height: 20px; width: 20px; border-radius: 50%; display: inline-block; border: 3px solid black; }
</style>
<$list filter="[<likeThis>split[,]!match[]] :map[get.color<currentTiddler>]">
<span class="dotstyle" style.background-color={{!!title}}></span>
</$list>
\end

Alternately, if you have a tiddler with the $:/tags/Stylesheet tag, you can move the contents of the <style></style> tags (but not the tags themselves) into that stylesheet to make it globally available.

[Ammuayan]

The empty lines bugged me too, so I had deleted them myself, to no effect.

But - dunno what’s different, but your fixes worked

[Ammuayan]

Ooh!! Awesome! Thanks! I will move the dot styling elsewhere.

[etardiff]

Incidentally, since this kind of error can be very difficult to spot, here’s the trick that helped me find it: As a quick debugging tool, add {{!!title}} or <<currentTiddler>> immediately inside a $list widget to check that it’s producing the expected outputs.

In this case, this immediately revealed that the first and last list item had quotation marks attached — and that wouldn’t happen if the quote marks were being properly parsed as delimiters. That gave me the hint I needed to take a closer look at the quotes, and retyping them fixed the problem.

[Ammuayan]

Thanks all you, Scott_Sauyet, tw-FRed, pmario, and etadiff!!

Just to compile all the bits in one place:

---

color codes listed in:
“colors” tiddler, each item as code:HTML color a la

r:red
o:orange
y:yellow

---

in a style tiddler, tagged $:/tags/stylesheet

.bds { 
   height: 20px; 
   width: 20px; 
   border-radius: 50%; 
   display: inline-block; 
   border: 3px solid black; 
}

(bds = big dot style - I have others for other sizes and styling, name it what you want)

---

and lastly, the main stage, a tiddler tagged $:/tags/Global

\function get.color(index) [[colors]getindex<index>else<index>]
\procedure bigDot(likeThis)
<$list filter="[<likeThis>split[,]] :map[get.color<currentTiddler>]">
<span class="bds" style.background-color={{!!title}}></span>
</$list>
\end

where bigDot can be replaced with whatever you want to call it
and bds is whatever you name the styling class

---

And don’t forget, when you call the procedure, make sure you use straight quotes!

a la

<<bigDot "r,o,y">>

---

hint to devs - that is TERRIBLE differentiation, straight vs. smart quotes!!!

[Thomas_Chuffart]

Well now everything is almost set to create a mastermind game in TW…