Web application to enable the design & editing of keyboard layouts
JavaScript HTML CSS Yacc Makefile Batchfile
Latest commit 721011f Jan 16, 2017 @ijprest Updated code to work with newest Jison version
-- Jison changed their code generation slightly so that the parser is no
longer named "parser"
-- Updated the kb.html to reference the new name as appropriate
-- If you need to upgrade to a new version of Jison, run "npm upgrade -g
jison"
Permalink
Failed to load latest commit information.
bg Optimized file size of background images Aug 3, 2015
font-src Renamed kbd-custom --> kbd-webfont, to match output filename Aug 30, 2015
fonts Now managing third-party components with Bower Jul 21, 2015
js Now managing third-party components with Bower Jul 21, 2015
samples Fixed navigation/numpad spacing issues in complex samples. Sep 10, 2015
spec Fix a font-size serialization bug found by iandoug Aug 6, 2015
tests Updated test screenshots to reflect numpad-spacing change to samples. Sep 12, 2015
.gitignore Deleting AWS stuff we don't need anymore Aug 4, 2015
CHANGELOG.md Bumped version to v0.15; updated CHANGELOG Aug 5, 2015
CONTRIB.md Added 'Apple Wireless' keyboard sample Sep 10, 2015
LICENSE.md Split readme into several files; added LICENSE.md Jul 3, 2015
Makefile Renamed kbd-custom --> kbd-webfont, to match output filename Aug 30, 2015
README.md Added small 'make fonts' line to the README Sep 22, 2015
backgrounds.json Rejiggered the background-image dropdown & data Aug 3, 2015
bower.json Fixed a problem parsing Font Awesome's CSS file; also updated FA to 4… Sep 30, 2015
colors.json Sampled GMK / Uniqey colors from sample keycaps Nov 10, 2016
cssparser.y Fixed a problem parsing CSS comments Aug 6, 2015
deploy.bat Tweaked deploy script to allow me to deploy a single file easily Sep 22, 2015
extensions.js Misc changes, mostly for per-key switch type Aug 11, 2015
favicon.ico Added Favicon Jul 2, 2015
jsonl.y Converted JSONL parser to EBNF form to be more hackable Aug 11, 2015
kb.css Reworked UI for the "tools" Sep 12, 2015
kb.html Updated code to work with newest Jison version Jan 16, 2017
kb.js Reworked UI for the "tools" Sep 12, 2015
kb.sublime-project Wrote my own CSS parser + unit-tests Jul 31, 2015
kbd-webfont.css Minor tweaks to kbd-webfont Aug 30, 2015
keys.json Added 'Status LEDs' to the 'Add Key' dropdown. Aug 6, 2015
layouts.json Added simple Planck preset; fixes #135 Sep 22, 2015
nub.png Major refactoring of the keycap rendering to HTML Jul 12, 2015
oauth.html Added second GitHub client ID for local development Aug 3, 2015
pickers.json Minor tweaks to kbd-webfont Aug 30, 2015
render.js Fixed a problem parsing Font Awesome's CSS file; also updated FA to 4… Sep 30, 2015
serial.js Misc changes, mostly for per-key switch type Aug 11, 2015
switches.json Reworked UI for the "tools" Sep 12, 2015

README.md

keyboard-layout-editor

Keyboard-layout-editor.com is a web application that enables the editing of keyboard-layouts, i.e., the position and appearance of each physical key.

The motivation for creating this application was a custom keyboard I was designing. I wanted to be able to experiment quickly with different possible layouts and visualize them easily. The existing graphics tools were capable enough, but cumbersome to use for this specific task.

As I sank further into the keyboard-enthusiast scene, I became aware of custom keycap sets that were being created by and for other enthusiasts. The ability to specify various details of the visual-appearance of the keycaps is an attempt to render these custom keycap sets as accurately as possible (within the constraints of HTML/CSS).

Links

Getting Started for Developers

Want to play around with the source? Install the tools, clone the repository, then build / test.

Required Tools:

Installing prerequisite components (once):

  • make install

Build:

  • make
  • make fonts

Test:

  • webdriver-manager update
  • webdriver-manager start
  • make test

Notes:

  • You can use any HTTP server for local development; I'm using an ancient version of Mongoose, but whatever you've got handy should work.
  • However, if you want to be able to log in to GitHub via OAuth (without hacking up the code and registering your own OAuth application), you will need to put the server at: http://localhost:8080/