thicker hats

[jmegner]

starting with thicker bolt

EDIT: cool, https://github.com/cursorless-dev/cursorless/pull/1809/files renders before and after

[jmegner]

Thicker hole; at low-res, the hole is a bit small but you can definitely still see that it has a hole in the middle. Overall, I am happy that it distinguishes itself from the default circle shape in two ways: hole in middle and ragged outside perimeter.

[pokey]

Cool. How is it working in practice?

[jmegner]

For crosshairs.svg, I am wondering about whether to remove the interior hole, or just make it smaller. The closest shapes are wing, fox, ex, (^VX shapes, roughly), with wing the closest. I don't think the hole is necessary to make it distinct enough from wing. Thus, am leaning towards removing the interior hole.

Cool. How is it working in practice?

The new hole feels so much clearer, visually and mentally. Some of the hesitation that comes from looking at a tiny mess of pixels that I logically know is "hole" is gone. Time will tell, but the start is strong.

[josharian]

I love to try this out, but I don't use either of those shapes yet. I'm particularly keen to try out a thicker ex. Do you plan to do more soon, or should I hack it in myself?

Also, I'd like to discuss ways to add "hidden features", so we can land things like this promptly and with a low bar, so we can all play with them quietly. (I know you can do a local install, but I have lots of things I want to play with, and it's annoying to juggle a bunch of them.)

[jmegner]

I'm particularly keen to try out a thicker ex. Do you plan to do more soon, or should I hack it in myself?

I'll probably do ex in a few minutes. Then possibly frame, eye, wing, fox, curve.

I know you can do a local install, but I have lots of things I want to play with, and it's annoying to juggle a bunch of them.

I use this powershell script in the source hats folder to make it easy to change my hats. I just have to run the script and then do "window reload" command in VSCode. Note: powershell is cross platform, but you might have to install it on mac or Linux.

$versionedFolders = Get-ChildItem -Directory "$env:UserProfile/.vscode/extensions/pokey.cursorless-*"
$latestFolder = ($versionedFolders | %{$_.ToString()} | Measure-Object -Maximum).Maximum
$hatsFolder = "$latestFolder/images/hats"
Copy-Item "$PSScriptRoot/*.svg" "$hatsFolder"

[jmegner]

I am going to stop for a bit and gather feedback on what I've already done, including me using them for a while.

[josharian]

xlink #288

[jmegner]

Only play and default shapes not thickened. Font 15, line height 1.6, hat size +50%.

[pokey]

Also, I'd like to discuss ways to add "hidden features", so we can land things like this promptly and with a low bar

It's quite easy to have secret settings in VSCode, so we could have a secret setting where you provide your own svg, keeping in mind the issues around our svg requirements which I believe are mentioned somewhere in the hat styling issue comments

[jmegner]

After some use, I'm still very pleased.

[jmegner]

@AndreasArvidsson asked for some curves at the central corners of the cross hat, especially to make it more distinct from a plus symbol, so I did that.

[jmegner]

Thick hats, font size 15, line height 1.7, hat size 50, hat vertical offset 10:

Original hats, font size 15, line height 1.7, hat size 50, hat vertical offset 10:

Thick hats, font size 14, line height 1, hat size 0, hat vertical offset 0:

Original hats, font size 14, line height 1, hat size 0, hat vertical offset 0:

Some other notes:

• With default settings, the hat seemed to be around {8w, 6h} pixels.
• We can get rid of the <g data-name="Layer N" ... /> elements. We can have as simple as this "chip" hat: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 6" width="1em" height="1em"><defs><style>.cls-1{fill:#666666;}</style></defs><path class="cls-1" d="M 8,0 8,6 4,6 0,0 8,0"/></svg>

[pokey]

some quick reactions from driving for a little bit:

• I immediately had to disable crosshairs, as I'm using "star" for that and "cross" for ex. Possible this one is just a me problem tho 🤷‍♂️
• The hole is in "hole" is too small for me; I just see it as default dot

[pokey]

@jmegner mind dropping a link to the software / website you're using to edit the hats? or are you just directly messing with the svg text?

[jmegner]

@pokey ...

I immediately had to disable crosshairs, as I'm using "star" for that and "cross" for ex. Possible this one is just a me problem tho 🤷‍♂️

Andreas also found the new cross confuse-able with a plus sign, so I will be going back to a pointed, star-like thing, but thicker.

The hole is in "hole" is too small for me; I just see it as default dot

I will try out some bigger holes for "hole". Can you provide a screenshot of what you are seeing and some details so I can try to reproduce your experienced appearance?

mind dropping a link to the software / website you're using to edit the hats? or are you just directly messing with the svg text?

I started with InkScape but then went to free plan on https://app.svgator.com .

However, I'm fiddling with a new "chip" hat and it is simple enough that text editing is practical. It might be possible to simplify frame, curve, and some others to nearly the same simplicity.

chip: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 6"><defs><style>.cls-1{fill:#666666;}</style></defs><path class="cls-1" d="M 8,0 8,6 4,6 0,0 Z"/></svg>

---

@AndreasArvidsson ...

hole: I like that it has more area, but I would like the hole in the center to be a bit larger to make it more distinct compared to the default.

I will try out some bigger holes for "hole".

bolt: good improvement, but I do wonder if it would look better if the middle section was a bit thinner?

Color and shape recognition would suffer. I would advise against it. We want as much foreground area and feature coarseness as possible while not sacrificing too much distinctness.

crosshairs: not really a fan sorry. I find it confusing that it looks like a plus. I would like to see the original shape, but with a filled center.

I will try something that is basically a thicker and filled in version of the original.

wing: Sorry to say not a big fan of the new shape. It needs to be more distinct.

What hats are too similar to the new wing?

[pokey]

@jmegner fwiw i passed along these new hats to the artist who made the originals, as a starting point for thicker hats. We'll see if he ends up having time to work on them, but he said he'd try to find some time

Thanks for getting the ball rolling on this one. I think if nothing else, I'm convinced even after a day using them that thicker hats are a usability win

[jmegner]

fwiw i passed along these new hats to the artist who made the originals, as a starting point for thicker hats. We'll see if he ends up having time to work on them, but he said he'd try to find some time

In what ways are these thicker hats not ready for release (other than hole and wing)?

[AndreasArvidsson]

What hats are too similar to the new wing?

No one really, but to me it's too indistinct and just looks like three blobs. I would like the different features to be more distinct if possible.

[pokey]

In what ways are these thicker hats not ready for release (other than hole and wing)?

Anything aesthetic needs to be reviewed by our artist, as I'm not really qualified. You can think of him as the "code owner" for all things aesthetic 😊

[jmegner]

Anything aesthetic needs to be reviewed by our artist, as I'm not really qualified

As an intense user of cursorless, I think you are qualified to have an opinion on hat usability, which is the most important part of the hat shapes. The hats are foremost objects for usability and accessibility. There is not much room for beauty at 8x6 pixels, and I think most users prefer usability (that's the biggest reason people disable certain hats).

If this artist doesn't use cursorless and isn't aware of low-res shape/color recognition principles, I don't think they are in a good position to make the tradeoffs in hat design that best serve the users.

[jmegner]

Relatedly, are you open to a setting where the user can provide a path to a folder that has hat image overrides? I know that we need to be prudent with our setting count.

[pokey]

Relatedly, are you open to a setting where the user can provide a path to a folder that has hat image overrides? I know that we need to be prudent with our setting count.

Yeah we discussed this topic at length at the meet-up yesterday, and I think everyone was supportive of the idea, but there were some implementation details that we couldn't work out. Though I think we maybe got too caught up on the idea of allowing people to just have a directory with as many hats as they want with whatever names they want to support extra hats if they'd like. If we just wanted to support overrides for existing hats, it should be fairly straightforward. @josharian @AndreasArvidsson @phillco does that sound like a reasonable place to start given we couldn't figure out how to make the details work for arbitrary hats? Basically would just have a setting that specifies a path to an overrides dir, and anything in that dir whose name matches one of our hat names (with .svg suffix) will override the default svg for that hat shape. Would be ideal to set up a watcher there as well like we do for snippets. We'd also need to make sure it's fairly robust wrt the required pre-processing that we do on hats.

[AndreasArvidsson]

Sounds fine to me

[jmegner]

Basically would just have a setting that specifies a path to an overrides dir, and anything in that dir whose name matches one of our hat names (with .svg suffix) will override the default svg for that hat shape.

Sounds great.

[jmegner]

@AndreasArvidsson

No one really, but to me it's too indistinct and just looks like three blobs.

Okay, I like "distinct" in this context to mean easily distinguishable from others. Are you meaning it doesn't feel like a coherent, single shape?

Can you share a screenshot of the wing you are seeing? It all looks very connected and one coherent thing to me.

@AndreasArvidsson @pokey And I'd still like those screenshots of what you are seeing for hole and telling me some of your setting so I can try to reproduce it.

[pokey]

[AndreasArvidsson]

@AndreasArvidsson

No one really, but to me it's too indistinct and just looks like three blobs.

Okay, I like "distinct" in this context to mean easily distinguishable from others. Are you meaning it doesn't feel like a coherent, single shape?

Something like that. The shape isn't very well defined.

[jmegner]

• Wing is now less like three blobs and more shaped like the original.
• Hole has a bigger interior hole. I felt the ragged perimeter just wasn't working, so I went to an elliptical shape. The interior hole is round and located near the top to help further visual/mental distinction from frame.
• Cross is star-like again.

[AndreasArvidsson]

I think cross looks really good like this.
Wing is much better but I do wonder if a slight arc to the sides would look better than just a straight line.
Hole I'm not sure of. I think the last one you had looked good if you just made the whole slightly larger.

Will you attend the meet up later? We could do a screen share and test a few things during the meet up if you have the time?

[jmegner]

I think the last one you had looked good if you just made the whole slightly larger.

Then it starts looking too similar to frame. That's why we need to change the outer perimeter to something more distinct from frame.

[jmegner]

Will you attend the meet up later? We could do a screen share and test a few things during the meet up if you have the time?

Yes, sounds good.

[jmegner]

To capture some notes from today's meeting:

• @AndreasArvidsson would like wing's sides to curve inward a bit and for bolt's cuts to be a bit deeper.
• We might release some hats (like ex or fox) before others (hole, bolt).
• The new hats don't need IndividualHatAdjustmentMap nearly as much because they all try to take up the full horizontal and vertical extent of the view box and they all try to have as much foreground area as possible. So, they don't need adjustments to size or location nearly as much. These values should change before release.
  • Apparently something makes sure that even if the hat takes up the full horizontal extent of the SVG view box and the IndividualHatAdjustmentMap has a positive sizeAdjustment, there will still be a horizontal gap between adjacent hats. This is good and goes along with us saying that we should have hats take up the full horizontal and vertical extent of the SVG view box.
• On possibly under-considered aspect of the usability-aesthetics tradeoff is how much size/foreground-area helps with mental ease even for distinct hats that seem to have "enough" pixels. For example, for several hats (ex, fox, wing, etc), I found the thicker version just easier on my brain to work with even though I had never thought of the originals as problematic. So, shaving off pixels can sacrifice usability more than you might think.
• I think we're getting to the point where it's up to @pokey to make usability-aesthetics tradeoff decisions with the help of his artist friend and I'm going to consider my part basically done.
• I recommend using a 8w by 6h view box for svgs because it will best represent the final aspect ratio with default settings and it helps you better grasp the final image, which is roughly 8 by 6 pixels.

[pokey]

@jmegner lmk when you're done with the hats and I'll start jamming with Matt. Thanks for all your hard work on this stuff!

[jmegner]

@pokey, sorry, this was kind of buried in the middle: "I think we're getting to the point where it's up to @pokey to make usability-aesthetics tradeoff decisions with the help of his artist friend and I'm going to consider my part basically done.". I do not plan on making further changes.

[pokey]

Ok cool. I saw that bullet point, but wasn't sure whether "getting to the point" meant we're already at that point, or if there was more you wanted to do before you considered us to be there. Will take it from here; thank you!

[pokey]

Closing in favour of #1868. Thank you for kicking off this effort! 🙌