New Keyboard Menu

[ego-lay-atman-bay]

I never really liked how in scratch and snap, the menu for selecting keys was just a huge dropdown list, so I decided to redesign it to be a full keyboard layout.

Screencast_20260520_133258.mp4

When you open it, you can select all the keys you could before, but with a better ui. When you hold shift, there are also many keys that change to their shifted counterparts, so for example, 4 would become $ when holding shift. I also added a really nice quality of life feature that just detects whatever key you press and automatically selects that one, so you don't even have to use the ui (it also allows for selecting keys not in the menu), but pressing esc will close the menu instead of selecting it. I also made sure that everything is localized, or at least uses the localized method. The only issue right now is that there's no way to toggle shift with the ui.

Just to be clear, when holding shift, it doesn't make all the letters uppercase because snap doesn't detect the key when it's uppercase (possibly a bug).

Since this new menu is very large, I decided to make it fall back to the old menu on smaller screens (if the menu width is larger than the world width).

[jmoenig]

Oh wow, this is pretty, and pretty cool!
I'd love to come back to this after Snap! v12 has been released and after we've ironed out its expected baby glitches. So, please give me some time (I'll be on vacation after the launch until mid-/end July.
Does the virtual keyboard layout work with different translation settings, too? Otherwise we'd have to think about that.
Thank you!

[codingisfun2831t]

Now I'm not related to Snap!'s development at all; but maybe making each button like.. smaller? Would be better? So like more like the piano menu. Like the old System Software's keycaps:

[ego-lay-atman-bay]

Sorry I didn't get to this sooner, I have no idea how I missed it

Does the virtual keyboard layout work with different translation settings, too? Otherwise we'd have to think about that.

The layout itself doesn't change, but that could be added. It does translate words like "space" if that's what you were asking.

Now I'm not related to Snap!'s development at all; but maybe making each button like.. smaller? Would be better? So like more like the piano menu. Like the old System Software's keycaps:

Oh, that looks very nice, and I think that would be better.

[codingisfun2831t]

Would I be able to try to make a proof-of-concept of that more compact UI? Should just be some size/style changing.

[ego-lay-atman-bay]

Yeah, go ahead

[codingisfun2831t]

I was trying to and it looks well, not the best:

I'm going to see if I can kind of do a bit of a hardcodey method (just call a addKey or such a bunch of times, should work out fine)

[codingisfun2831t]

@ego-lay-atman-bay Hows this:

[codingisfun2831t]

I got an invitation - do you want me to commit it there (I already kind of made a whole branch on something else for a PR...)

[ego-lay-atman-bay]

Yeah, I was thinking it might be best to contribute to the same PR

[codingisfun2831t]

Commited! Hoping I didn't do anything wrong..