caksoylar / keymap-drawer

Visualize keymaps that use advanced features like hold-taps and combos, with automatic parsing
https://caksoylar.github.io/keymap-drawer
MIT License
721 stars 60 forks source link

Feature request: local webapp with filewatch #20

Open anderso opened 1 year ago

anderso commented 1 year ago

I'm currently using the keymap-drawer webapp to design a new layout, which is very nice, but I would love to be able to start a local webapp pointing to the yaml-file, so I can edit it in an editor, and it would refresh on save. Because the online yaml-editor is a bit annoying to use for this usecase.

For example:

$ keymap serve my-keymap.yml

> Webapp available on http://localhost:7693/

I might even give this a go myself if you could provide some pointers on where to start in getting the app up and running locally.

caksoylar commented 1 year ago

Hey there, that's a reasonable use case. You can get the web app running locally by installing the dependencies with poetry install --with streamlit, then running streamlit run streamlit/app.py. However I don't know if this will help you much, since the Streamlit stack is pretty integrated and it would be hard to pick out individual parts like web serving with auto-refresh (or at least I am not familiar enough with how it works internally to do that).

If I were you, I'd set up a file watcher like entr to automatically call keymap draw on file change, like:

echo keymap.yaml | entr -s 'keymap draw keymap.yaml >keymap.svg'

Then you could set up a separate one to open the browser (or another svg viewer), the -r flag should help to not create a new window/tab every time:

echo keymap.svg | entr -r firefox keymap.svg

(Note I haven't tested above since I don't have computer access for a few days.)

I think a keymap serve subcommand might be nice if it ends up a simple enough implementation and if the dependencies are either very light or can be made optional.

anderso commented 1 year ago

Thanks! That's actually a better solution than firing up the webapp, because that UI doesn't make sense anyway for this usecase, just displaying the svg is better. The solution works great except it opens in a new tab in firefox for each update, I'm not sure there's a way around that, looking at the command line flags for firefox.

Using something like https://github.com/lepture/python-livereload might be necessary to get autoreload working, I actually tried that but it unsurprisingly does not work when viewing svg-files. I'm guessing wrapping it an html page would do the trick.

So another solution that would probably be doable in 10 lines of code is adding the livereload module or similar to create a serve-command.

I'm guessing there's also a firefox extension that would allow autoreload of local files, so that's another option.

caksoylar commented 1 year ago

Great, opening a new tab everytime sounds annoying but you could replace that second part with an autoreload plugin indeed.

Thanks for the pointer to livereload, I can play around with that a bit when I get a chance. (PRs are also welcome!)