Some hat styling usability tweaks

[pokey]

• [ ] Make bolt a little prettier
• [ ] Change aspect ratios of frame and hole to make them easier to tell apart
• [ ] Bend green and blue slightly further away from each other
• [ ] Pink and red tough to tell apart
• [ ] Reorder colors / shapes to prioritise the better ones. Something like:

export const HAT_COLORS = [
  "default",
  "blue",
  "red",
  "green",
  "pink",
  "yellow",
  "userColor1",
  "userColor2",
] as const;

export const HAT_NON_DEFAULT_SHAPES = [
  "fox",
  "curve",
  "frame",
  "ex",
  "play",
  "bolt",
  "eye",
  "crosshairs",
  "wing",
  "hole",
] as const;

[AndreasArvidsson]

Problems

• Hole requires high dpi
• eye: little paint and looks close to frame sometimes
• crosshairs: little paint, should we make it solid?
• Bolt is way too thin overall

new hats:

• infinity sign - name?

misc:

• I think the aspect ratio on frame is fine
• Convert yellow into gold?
• Update default light colors?
• Default values for user colors? We could always recommend a few colors that are not enabled by default.

[pokey]

@AndreasArvidsson Fwiw Matt is planning to look into this one a bit. Mind zooming in and dropping a screenshot here of your light palette?

[AndreasArvidsson]

@pokey Ok these are the ones I'm running with me right now. Navy color is not active since this is on the main branch.

[MartinRykfors]

As discussed in the meetup, I had some ideas for more hats, so I have made a little sandbox repo for designing new ones. You can see my work so far here: https://github.com/MartinRykfors/cursorless_hat_sandbox/blob/master/preview.md

My goal has been to make hats that are 'chunky' in order to avoid hats that are only thin features that cause the colors to be hard to recognize. I have also tried to make them distinct from other hats and ensure they have short recognizable names. Some may still be hard to distinguish from other hats though. Also, some of them do not look very good scaled down (shield, flake, gem) so those should probably be disregarded or improved upon.

I realize now that the default hats seem to have an aspect ratio that make them wider than tall whereas my experiments assume an aspect ratio of 1, but it should not be much of a problem to modify them.

Happy to hear your thoughts!

[AndreasArvidsson]

Nice, a lot of good ideas! heh shroom looks just like a guitar fret in profile. I think my brain is damaged :p

[josharian]

These are amazing. FWIW, my favorites (at small sizes) are:

• shroom
• moon (but sounds like shroom!)
• rook
• knight, horse
• wave

Looking at these makes me wish that ex was a bit chunkier. I love flake but it looks like dot. Maybe if it was less chunky?

Is star (★) out b/c it shares a name with the asterisk?

(NB: I am a novice cursorless user. I currently use only ex and curve, which I renamed brow.)

[MartinRykfors]

I think talon should be good enough to differentiate moon and shroom, though I guess it can vary from person to person. I can add the suggested alternatives lune, luna.

Flake turned out bad in small sizes in my opinion. It is a round shape, so it has to rely on its details in order to look different from the default dot, but those details vanish fast. Shield has the same problem. I will see if it can be improved by making the outer edges chunkier and the inside thinner.

Star is a good idea though as you say it causes ambiguities due to colliding with the knausj star key command. Alternatives could be astro, astri, stella, stern. I'll add it :+1:

[pokey]

Neat. If you drop into a meet-up I can help you get them wired up to see how they work in practice.

And yes we favour wide aspect ratio because the space for the hat tends to be wide. But you'll find all that out when you try these in practice 😄

[MartinRykfors]

Cool, I'll aim for being there on sunday

[josharian]

Some more brainstorming from me. (I know that eye already exists, but I think the eye sketched below--with solid iris instead of white iris--looks more like an eye.)

[MartinRykfors]

Some good ideas, will see how they work out.

Anyways, things are starting to work and I am nearing a higher plane of existence: hat guide

A lot of these need tuning but I am getting close to having a pipeline that allows me to quickly iterate on them in inkscape before building them into a local cursorless install.

@pokey, are we interested in tuning the existing hats as well? Earlier in the thread it is mentioned that some hats (bolt, frame) are a bit to thin. I can see if I can make them chunkier. Do you want to have modifications to the stock hats in a separate PR in that case?

[pokey]

Ha wow! Will be interested to see where those land. Looks like you're taking advantage of increased line height to enable you to have bigger hats with more detail?

We do need to tune the existing hats, but yeah I might put that in a separate PR

[MartinRykfors]

Yes, I run 1.75 line height with hat scale 60 in that image. I usually run hat scale 80 though but I find that for the new hats, this causes them to get clipped on the sides when they start getting wider than the letter they sit above.

[pokey]

yeah i mean i guess if you're running with a big line height you could mess with a different aspect ratio. I think we can read the line height setting as well so in theory Cursorless could modify aspect ratio for you

[MartinRykfors]

That could be very nice yes. Like a setting that allows you to specify how wide the hat should be as a percentage of the letter width.

[pokey]

Yeah we could do that, but I was suggesting that we just read the line height and do it automatically. Either could work; the latter might be nice, but also could be too magical / hard to get right

[josharian]

Pink and red tough to tell apart

What I have done that is helping a lot is to make pink quite pale. (I've also made blue paler than green, for the same reason.)

[josharian]

Another idea: let hats have a custom stroke color as well as a custom fill color. They would default to identical.

Then we could use white and black--with a black stroke around the white color and a white stroke around the black color. They would then work in both light and dark mode.

It might also help for distinguishing, say, blue and green, because you could put a prominent stroke around one of them.

[josharian]

Some experiments with stroke and gradients, if only to prevent others from repeating my mistakes. :) These were all created by hacking the actual svg rendering, and screenshotted in VSCode, so they're fairly realistic.

My big takeaway here is for these to work the shapes have to be chunkier. Which is something I want anyway. Lots of these work reasonably well for the default hat but fall down on this skinny details of the shapes.

Black colored hats, as white stroke around black interior. (I might actually use this one, if the shapes were chunkier.)

Distinguish green from blue with stripes (compared to regular green side-by-side):

Color called "stripe" (black and white alternating, with a white stroke exterior):

"Rainbow" color:

Things I haven't tried yet: radial gradients, shadow gradients (going from lighter at the top to darker in the bottom).

I'm tempted to revisit this if and when we have new chunkier hat shapes.

Code snippet for rainbow stripes, for constructColoredSvgDataUri, readily adapted to other patterns:

      svg = originalSvg
        .replace(/class="cls-1"/, `fill="url(#Gradient1)"`)
        .replace(
          /<style>.cls-1{fill:#666666;}<\/style>/,
          `    <linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="0"> <stop offset="0%" stop-color="red" /> <stop offset="20%" stop-color="orange" /> <stop offset="35%" stop-color="yellow" /> <stop offset="50%" stop-color="green" /> <stop offset="65%" stop-color="yellow" /> <stop offset="80%" stop-color="orange" /> <stop offset="100%" stop-color="red" /> </linearGradient>`,
        );

Snippet for strokes:

      svg = originalSvg
        .replace(/fill="[^"]+"/, `fill="${color}"`)
        .replace(
          /fill:[^;]+;/,
          `fill: black; stroke: white; stroke-width: 20;`,
        );

(You will have to figure out how to selectively apply these to various hats. I set a color to #000000 and then only did the rewrite for that color.)

[josharian]

Strokes also in #1810 (enabled by #1809, thanks Jacob!)