feat(custom-keymap): Custom Keymap Style (@thewickest)

[thewickest]

Description

New Keymap Style inside the Keymap section. This serves as a custom keymap where you can put the JSON content generated in the Keyboard Layout Editor or pages that generates equivalent content. Features:

1. If you include an object with an X in the array of keys, it will be treated as a blank key
2. If you include an object with an W and a size, the size of the key will increment. Possible sizes right now are (1, 1.25, 1.5, 1.75, 2.25, 2.50, 6.25)
3. If you want to maintain the dynamic features of the keymap style, you will have to fullfill the keymap with you prefered layout (qwerty, dvorak, etc).
4. For adding and space, just write "spc" inside the key.

Checks

• [ ] Adding quotes?
  • [ ] Make sure to include translations for the quotes in the description (or another comment) so we can verify their content.
• [ ] Adding a language or a theme?
  • [ ] If is a language, did you edit _list.json, _groups.json and add languages.json?
  • [ ] If is a theme, did you add the theme.css?
    • Also please add a screenshot of the theme, it would be extra awesome if you do so!
• [ ] Check if any open issues are related to this PR; if so, be sure to tag them below.
• [x] Make sure the PR title follows the Conventional Commits standard. (https://www.conventionalcommits.org for more info)
• [x] Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.

feature(custom-keymap): Custom Keymap Style(@thewickest)

[fehmer]

hi @thewickest ,

thank you for your contribution. The feature looks cool. I left some comments on the code.

[fehmer]

Hi, i did some testing.

1. if you use the full size ansi example on kle [["Esc",{x:1},"F1","F2","F3","F4",{x:0.5},"F5","F6","F7","F8",{x:0.5},"F9","F10","F11","F12",{x:0.25},"PrtSc","Scroll Lock","Pause\nBreak"],[{y:0.5},"~\n`","!\n1","@\n2","#\n3","$\n4","%\n5","^\n6","&\n7","*\n8","(\n9",")\n0","_\n-","+\n=",{w:2},"Backspace",{x:0.25},"Insert","Home","PgUp",{x:0.25},"Num Lock","/","*","-"],[{w:1.5},"Tab","Q","W","E","R","T","Y","U","I","O","P","{\n[","}\n]",{w:1.5},"|\n\\",{x:0.25},"Delete","End","PgDn",{x:0.25},"7\nHome","8\n↑","9\nPgUp",{h:2},"+"],[{w:1.75},"Caps Lock","A","S","D","F","G","H","J","K","L",":\n;","\"\n'",{w:2.25},"Enter",{x:3.5},"4\n←","5","6\n→"],[{w:2.25},"Shift","Z","X","C","V","B","N","M","<\n,",">\n.","?\n/",{w:2.75},"Shift",{x:1.25},"↑",{x:1.25},"1\nEnd","2\n↓","3\nPgDn",{h:2},"Enter"],[{w:1.25},"Ctrl",{w:1.25},"Win",{w:1.25},"Alt",{w:6.25,a:7},"",{w:1.25,a:4},"Alt",{w:1.25},"Win",{w:1.25},"Menu",{w:1.25},"Ctrl",{x:0.25},"←","↓","→",{w:2,x:0.25},"0\nIns",".\nDel"]] the settings page is stuck loading with error message ERR Syntax error, unrecognized expression: .pageSettings .section[data-config-name='keymapCustom'] thrown in settings-groups:L130. The layout is not displaying correctly.

2. Legends like "!\n1" don't work.

3. Long legends overflow the key, e.g. [["CapsLock"]]

[github-actions[bot]]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

[Miodec]

I tried a simple 60% and its not aligned

Also JD40

Ergodox is cursed

[thewickest]

Okey some updates about the feature. After some tests I have realized that there were some features missing from the Raw syntax that we are using here: Improvements:

• All basic features are working now. Width, height, spacing between keys (horizontal and vertical) and tilted keys. Other more visual features like stepped keys, ghosted keys, color, etc, have been ignored to maintain the same style in the whole application.
• You can included any character that can be shifted. Normal key letters, numbers, etc. They will be shifted using the English layout. So "," will be "<", "/" will be "?", etc. We should include more languages in the future as the keyboard layout option does. We probably can reuse everything that is already created in the layout setting.
• For long texts (more than 3 characters) that are not include in any main key (shift, enter, arrow, Delete, etc) we have to take into account that the user could write anything inside of it so it is up to the user to make the layout "pretty". It would be really difficult to make the texts bigger or smaller depending on the length of the text and also adapt it to the size of the key.

Considerations

• Because of everything that I mentioned before, things like more than one character per key is not working. We could make it work but that would break the style of the website I think.
• I have tested many different layouts but edge-cases are a thing and we could have some of them. With rotations and spacing between keys maybe. It shouldn't but it could happen at some point.
• And also, it wouldn't make much sense to use this feature with the layout setting. As I mentioned, we could adapt it to use it with a different language rather than a different layout. If the user wants another layout (dvorak for example) they can include it manually. That way he/she can include whatever custom layout they want.

Future Improvements

• As it was mentioned in this thread we could have something like a UI for creating a custom style inside the setting section, although I think it would have a lot of work and I don't know if it is really worthy for this feature.
• Include the remaining languages rather than the English layout. With languages I mean, the different types of shifted keys that are different depending on the language.

[github-actions[bot]]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.