nickcoutsos / keymap-editor Goto Github PK
View Code? Open in Web Editor NEWA web based graphical editor of ZMK keymaps.
Home Page: http://nickcoutsos.github.io/keymap-editor
License: MIT License
A web based graphical editor of ZMK keymaps.
Home Page: http://nickcoutsos.github.io/keymap-editor
License: MIT License
Hi there, maybe I'm being dense but is there a way to change which repo the github app is using?
I can't see one and even when I clear all local storage it just re-authenticates to the same repo?
Do I need to de-authorize on the repo side?
Originally posted by Richiban October 9, 2022
It seems that key toggle isn't supported by the tool? It doesn't appear in the behaviour drop-down and if &kt
appears in the keymap file the UI displays an error.
We need label = "LayerName";
for oled display and sensor-bindings = <&inc_dec_kp C_VOL_UP C_VOL_DN>;
for Rotary Encode
Also need add dynamic for sensor-bindings
Just replace line 100 to 107 in /api/services/zmk/keymap.js
return `
${name.replace(/[^a-zA-Z0-9_]/g, '_')} {
label = "${name.replace('layer', '')}";
bindings = <
${rendered}
>;
sensor-bindings = <&inc_dec_kp C_VOL_UP C_VOL_DN>;
};
`
})
For example attempting to create a &kp with both LGUI and Left Shift Modifiers, after adding the modifiers, there is no option to add the keypress. (e.g. no way to say LGUI ( Shift ( A ) ).
This is read properly from existing keymap but can't create a new one in the interface.
There is some code in the backend that will strip out certain characters in things like layer names, but this should really happen on the frontend for transparency.
EditableField
to accept a validator prop, and display errors(?)The original implementation which overwrites <keyboard>.keymap
with the generated keymap code used to add all of the required includes based on the behaviours used. The experimental implementation that edits the devicetree inline needs to look at the existing includes and ensure that missing behaviour includes are added.
Applying rotations to keys can be hard to get right, especially when trying to make a symmetric layout.
Two things that make this troublesome:
Some changes are needed, but they could break existing layouts. The good news is that 1u-based layouts with no rotated keys should be unaffected, because regardless of individual key placement the entire layout is positioned according to its bounding box. Still, maybe there should be a way to detect this and gracefully fallback to the old functionality.
When encountering lines in the devicetree such as
foo; // bar
this gets parsed into two nodes: property
, and comment
. Then two steps are followed:
//
)which means the output is
foo;// bar
In order to add the comment text to the same line it is already checking that both nodes are on the same line, so this same property can be used to see how much whitespace exists between the two nodes and copy it.
Search used to be a simple auto-complete field for keycodes, but now it can also serve as a picker for
Ideally it should:
{"code": ...}
).teleport
component to render itself at a higher level in the DOM.I created a macro in my config, deleted it in the gui, and then tried to go bac to the main page of the editor.
I got this error:
TypeError
t is undefined
keymap.js:7:19
Keyboard/Binding/Binding.js:43:45
../node_modules/react-dom/cjs/react-dom.production.min.js:166:136
../node_modules/react-dom/cjs/react-dom.production.min.js:289:385
../node_modules/react-dom/cjs/react-dom.production.min.js:279:391
../node_modules/react-dom/cjs/react-dom.production.min.js:279:322
../node_modules/react-dom/cjs/react-dom.production.min.js:279:179
../node_modules/react-dom/cjs/react-dom.production.min.js:270:87
../node_modules/react-dom/cjs/react-dom.production.min.js:272:299
../node_modules/react-dom/cjs/react-dom.production.min.js:127:104
../node_modules/react-dom/cjs/react-dom.production.min.js:266:268
repositoryA
repositoryA/branchB
repositoryB
(which doesn't have a branch branchB
)repositoryB/branchB
, fail, and treat it as a layout generation error.The immediate problem to solve is to clear the branch selection when switching repositories.
Additionally, there may need to be better handling in place for GitHub API error responses, but there are more API changes coming and it may not be worth digging into that too much just yet.
I may be missing something, but there appears to be no way to enter a keypress code such as LC(Z)
into the UI. Funnily enough, if I enter a modifier function in my keymap file manually and then tell the UI to refresh from GitHub then I am able to edit the keypress.
Am I missing something? This scenario isn't mentioned in the docs and I wasn't able to get it to work by exploring the UI.
I've got a board that has some custom behaviors defined in firmware, that haven't yet made it into the upstream zmk firmware.
It would be really cool if the app could somehow pick up a user-behaviors.json
file if it's in the keymap repo, and merge it with the zmk-behaviors.json
that it uses to determine behaviors.
I imagine this might also allow users to custom-define things like HYPER
/MEH
and provide it in the includes
block (related to this: #50 (reply in thread))
When switching from something like "key press" to "sticky key" or from "sticky layer" to "to layer" or "toggle layer" the key binding component should note that the new parameter list matches the old one and avoid clearing the selected layer value.
Technically as long as the layout is defined in info.json a default keymap could be created (at the simplest, a single layer with &trans
for every keybind) and this would reduce the barrier to entry somewhat.
Crash has occurred twice, both times when I click on a key to edit it.
TypeError
g is undefined
EnhancedPickers/Keycode/KeycodePicker.js:60:7
../node_modules/react-dom/cjs/react-dom.production.min.js:166:136
../node_modules/react-dom/cjs/react-dom.production.min.js:289:385
../node_modules/react-dom/cjs/react-dom.production.min.js:279:391
../node_modules/react-dom/cjs/react-dom.production.min.js:279:322
../node_modules/react-dom/cjs/react-dom.production.min.js:279:179
../node_modules/react-dom/cjs/react-dom.production.min.js:270:87
../node_modules/react-dom/cjs/react-dom.production.min.js:272:299
../node_modules/react-dom/cjs/react-dom.production.min.js:127:104
../node_modules/react-dom/cjs/react-dom.production.min.js:266:268
See
If GitHub provides a way to tail log output for jobs then this could be used to feed into the websocket/terminal component to give real-time feedback to the user. If not, there's still the option of showing a spinner and polling or something.
TypeError
Cannot read properties of undefined (reading 'bindings')
Keyboard/Keyboard.js:81:45
../node_modules/react-dom/cjs/react-dom.production.min.js:166:136
../node_modules/react-dom/cjs/react-dom.production.min.js:215:269
../node_modules/react-dom/cjs/react-dom.production.min.js:291:201
../node_modules/react-dom/cjs/react-dom.production.min.js:279:388
../node_modules/react-dom/cjs/react-dom.production.min.js:279:319
../node_modules/react-dom/cjs/react-dom.production.min.js:279:179
../node_modules/react-dom/cjs/react-dom.production.min.js:270:87
../node_modules/react-dom/cjs/react-dom.production.min.js:267:428
../node_modules/scheduler/cjs/scheduler.production.min.js:13:202
My .keymap file has a custom binding defined (&mo_sl). However I am unable to input a layer number as the key code value. For example, it auto changes (layer) 1 to N1. It would be very convenient to have the ability to override suggested keycodes and input arbitrary values.
Loving this software so far ๐ . Being able to visualize the layout has sped up configuration considerably.
First off, I absolutely love this project and I'm planning on doing everything I can to help contribute to it!
I'm working on getting everything running locally but for some reason when I clone my zmk-config
repo into the root of the project directory, it seems that the app can't load my existing keymap.
When I select 'Local' in the top right, it shows the proper layout for my keyboard, but none of the keycodes are filled in.
Perhaps the strangest part is that when I run this from here everything loads fine.
I'm guessing it's a simple config option I'm overlooking, so feel free to just link me to a doc that I may have missed to get me on my way.
Thanks!
Hello, this project looks awesome.
I am having an issue installing locally. I cloned the repo, npm install, then npm run dev and I get the error
`Z:\web dev\github\keymap-editor>npm run dev
[email protected] dev
ENABLE_DEV_SERVER=true node index.js
'ENABLE_DEV_SERVER' is not recognized as an internal or external command`
Any pointers? Thanks!
Probably the most important part of this project is to promote structures and interfaces for working with zmk keyboard layouts and keymaps. Documentation should be provided to explain the breakdown of a simple (or complex) key binding into the nested structure used in the web app to facilitate graphical editing.
Bluetooth behaviours, for example, require
#include <dt-bindings/zmk/bt.h>
to be included in the keymap. The generated code can be made cleaner and more efficient if it only includes necessary headers. These are described in the zmk documentation, and can be added to the zmk-behaviours.json
definition.
Note that the application currently sends the keymap as an array of binds (e.g. &kp LS(F)
) and not the parsed object structure (e.g. {"bind": "&kp", "params": [{"code": "LS", "params": [{"code": "F"}]]}
). To avoid duplicating effort, the API should formally use the parsed keymap in its communication and handling those transformations server-side.
Installation tokens can be persisted in memory for a while to avoid repeated network round-trips anytime an API call requires it.
Heya, tried opening up the web keymap-editor, but it just says "Waiting for API..". Tried several browsers and even on my phone, but the issues persists.
Alternatively I tried to set up the editor locally by following the readme. Managed to start the npm app by adding PORT=8081 node index.js
at the end of my .env
filebut eventually ended up in the same situation where it just says "Waiting for API.." and nothing happens.
Need to look into how encoders should fit into a layout definition, but it looks like in ZMK they're bound separately from the regular keybinds for a layer. To make this work I would need to either make another array of array of binds (one for each layer) just for encoders or, more likely, change the schema from
"layers": [
["&kp Q", "&kp W", ...],
]
to
"layers": [{
"keys": ["&kp Q", "&kp W", ...],
"encoders": [...]
}]
This would be a backwards incompatible break from the convention of using QMK's keymap.json
schema, but necessary. I think other features like combos may need to live there as well, unless they are independent of layers.
If the schema is changed it should also include a version and support for seamlessly updating old keymap files.
When i click delete layer, it pops up the confirm message "really delete?" then I click ok and nothing happens, irrelevant of if the layer is on the keymap.json or a newly added one
Ideally selections should use the associated id
values returned by the GitHub API but it's numeric and it seems that getting the bound value out of a <select>
element turns it into a string which is troublesome for strict equality checks.
Instead of just posting "Updated keymap"
when making commits on the user's repo, the app could prompt them for a description of the changes and submit that in the commit instead.
It would be very helpful to be able to export all layers simultaneously in one PDF.
There's actually a quite a bit of initial setup for a user to even see if they'd like using this app:
The app could instead (with a flag enabled) offer a Demo source in addition to Local and GitHub so that the user can get a read-only keymap to play around with. The entire thing could be client-side.
https://docs.zephyrproject.org/2.5.0/guides/dts/intro.html#unit-address-examples
The formatter isn't expecting nodes with addresses and is somehow turning
foo@123 {
bar;
};
into
foo {
123
bar;
};
Likely the address is just another named child of the node syntax node and because it's not one of the typical syntax node types I've looked at so far I'm "handling" it by spitting it out un-modified.
It's an unusual case because the editor is only applying formatting to the .keymap
file and while there isn't a valid case, I think, to have to reference addresses in the devicetree source in the keymap file, there doesn't seem to be anything restricting its use here instead of the board or shield .dts
/.overlay
/.dtsi
files.
Nonetheless, its happening and this issue actually generates invalid devicetree syntax so it needs to be fixed.
At the moment its possible to change a key's behaviour and neglect to re-assign the parameter values. Even if the app doesn't outright prevent you from submitting the keymap in this state (because it requires examining the behaviour binding to start with, which may be a custom definition) it should at least make the issue apparent to the end user.
Config variables are in board_defconfig or shield.conf depending on if it's a board or a shield, this could be moved to the top of config folder to be used and manipulated by the editor. config variables to be changed could be defined in info.json to be edited with bool ones changed using switches and int ones changed with a simple number box
Using the devicetree parser and treating the default_transform.map
node as row-based grid we can put together a rough ortholinear layout.
RC(...)
instanceThe result is a simple layout of 1u keys that means the end user doesn't need to have created an info.json
file to get started. This process could spit one out, however, and give the user an opportunity to tweak it as required.
This will likely look like shit for row-staggered keyboards but I don't care.
The keymap editor now fails to load for my heavily customized keymap -- the spinner never stops spinning. The editor was able to load the same keymap a few days ago.
Default keymaps load fine. The customized keymap has a fair number of custom behaviors, including mouse behaviors from the ZMK mouse button fork.
GEThttps://zmk-keymap-editor.fly.dev/github/keyboard-files/29762192/xaelectronics/zmk_swept_kb_config?branch=miryoku&useDevicetree=true
[HTTP/2 500 Internal Server Error 1031ms]
Uncaught (in promise) Error: Request failed with status code 500
exports createError.js:16
exports settle.js:17
w xhr.js:66
exports xhr.js:78
exports xhr.js:15
exports dispatchRequest.js:58
request Axios.js:108
exports bind.js:9
e api.js:33
c runtime.js:63
_invoke runtime.js:294
k runtime.js:119
Babel 4
value api.js:8
e api.js:211
c runtime.js:63
_invoke runtime.js:294
k runtime.js:119
Babel 4
value api.js:8
e Picker.js:97
c runtime.js:63
_invoke runtime.js:294
k runtime.js:119
Babel 4
ef Picker.js:205
React 3
w scheduler.production.min.js:13
M scheduler.production.min.js:14
6813 scheduler.production.min.js:14
Webpack 12
[createError.js:16:14](https://nickcoutsos.github.io/keymap-editor/static/node_modules/axios/lib/core/createError.js)
Babel 6
ef Picker.js:205
React 3
w scheduler.production.min.js:13
M scheduler.production.min.js:14
(Async: EventHandlerNonNull)
6813 scheduler.production.min.js:14
Webpack 12
Assuming that in a given repository or ZMK_CONFIG
workspace any editable .keymap file will found under config/
regardless of board/shield stuff, we should be able to dynamically fetch this information and present it as another selection just like the GitHub picker does with branches.
Doing this once means the keymap name becomes an identifier of sorts so we don't have to do that same "search" when committing changes to the repo.
Using the matrix in build.yaml
might be useful but this is unclear to me still.
It would be great to have a way to use the UI to dump arbitrary text into the keymap file
Maybe one way to implement it is to have a placeholder raw
"behavior" that takes a raw string as its argument and inlines that into the keymap?
Whenever the parser doesn't know what a given behavior is, it can just use the placeholder behavior and allow the user to edit the text via the UI
(Related to #50 (reply in thread) )
Running node apps in Windows can be just different enough to frustrate development, and as I'm not testing this in a Windows environment I tend to learn about these things after fact.
cross-env
to run scripts with environment variablescross-env
?
dotenv
or something so that I don't explicitly need to use environment variables? I can add .env.local
to .gitignore
and have a pre-start script to create the default if it doesn't exist yetnpm.cmd
instead of npm
(even if the npm
command is used to start the server it seems to somehow not be available in the PATH
used for subprocesses) when starting the webpack dev server in dev modeSome of the current zmk-behaviours.json
is pretty straightforward and don't need much explanation. Other parts ("commands"
and, more specifically, "additionalParams"
) are my own invention and while they get the job done for now, they could do with some refinement and justification.
Right now there are a number of things that can go wrong before a user can even load their keymap for the first time:
The API should handle these a little more elegantly by reporting errors to the user if it's something they can fix.
Is is currently possible to create mod-morph behaviours in the web-app ?
My use-case would be to change SHIFT+COMMA
to output SEMICOLON
Is there a way to do it ?
If not, will that be supported in the future ?
Hi,
I tried to install the app with this guide and I faced with Error "Command failed: npm run build-watch", any advice?
The bindings parser finds keycodes that look like "functions" and parses them into a list of parameters.
E.g. LS(F)
becomes
{
"value": "LS",
"params": [{
"value": "F",
"params" []
}]
}
But the pattern matcher isn't handling spaces correctly, so something like LS( LA(F))
becomes
{
"value": "LS(",
"params": []
},
{
"value": "LA",
"params": [{
"value": "F)",
"params": []
}]
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.