Web application to enable the design & editing of keyboard layouts http://www.keyboard-layout-editor.com/
Find a file
Ian Prest 602ce2e55a Added a custom-styles editor
-- Similar to the raw-data editor.
-- Styles are parsed, modified so that they can only affect keycaps,
then applied to the page.
-- Modified the VIC-20 sample to demonstrate; it now has a
FontAwesome-style stylesheet, for the C64ProMono font, and is using
those custom styles for all the PETSCII glyphs.
2015-07-22 23:42:46 -04:00
css Add a CSS parser 2015-07-22 20:48:48 -04:00
font-src Added 'NN' to the SP ABS palette. 2014-01-07 23:11:25 -05:00
fonts Now managing third-party components with Bower 2015-07-20 23:31:09 -04:00
js Now managing third-party components with Bower 2015-07-20 23:31:09 -04:00
samples Added a custom-styles editor 2015-07-22 23:42:46 -04:00
tests Testing: Added tests for text positioning & size/color overrides 2015-07-18 20:06:10 -04:00
.gitignore Now managing third-party components with Bower 2015-07-20 23:31:09 -04:00
bower.json Add a CSS parser 2015-07-22 20:48:48 -04:00
CHANGELOG.md Bumped version t v0.12; updated CHANGELOG 2015-07-05 17:39:46 -04:00
colors.json Added YBX color to "Signature Plastics / PBT" palette 2015-07-02 16:30:48 -04:00
CONTRIB.md Add a CSS parser 2015-07-22 20:48:48 -04:00
deploy.bat Reformatted the deploy script to be easier to read. 2013-10-14 09:47:45 -04:00
extensions.js Merged utils.js --> extensions.js 2015-07-20 20:03:23 -04:00
favicon.ico Added Favicon 2015-07-02 14:46:53 -04:00
jsonl.grammar.js Made JSON-L parser even more lenient 2015-07-17 22:12:14 -04:00
kb.css Added a custom-styles editor 2015-07-22 23:42:46 -04:00
kb.html Added a custom-styles editor 2015-07-22 23:42:46 -04:00
kb.js Added a custom-styles editor 2015-07-22 23:42:46 -04:00
kb.sublime-project Move CSS build rules to Makefile 2015-07-13 00:05:05 -04:00
keys.json Added a center-stepped key to the "add key" menu. 2013-11-10 15:22:01 -05:00
layouts.json Add JD40 standard(ish) layout 2015-07-19 11:54:15 +08:00
LICENSE.md Split readme into several files; added LICENSE.md 2015-07-02 21:33:27 -04:00
Makefile Now managing third-party components with Bower 2015-07-20 23:31:09 -04:00
nub.png Major refactoring of the keycap rendering to HTML 2015-07-12 19:16:57 -04:00
README.md Now managing third-party components with Bower 2015-07-20 23:31:09 -04:00
render.js Added a custom-styles editor 2015-07-22 23:42:46 -04:00
serial.js Remove unnecessary string.prototyp extensions 2015-07-13 23:32:17 -04:00
sign-policy.py Can now SAVE layouts to the server. 2013-10-14 02:08:29 -04:00
upload-policy.txt Can now SAVE layouts to the server. 2013-10-14 02:08:29 -04:00

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).

Getting Started for Developers

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

Required Tools:

  • NodeJS/NPM: https://nodejs.org/
  • GNU Make: http://www.gnu.org/software/make/
  • Bower: npm install -g bower
  • Grunt: npm install -g grunt-cli
  • Protractor: npm install -g protractor
  • Uglifyjs: npm install -g uglifyjs
  • Stylus: npm install -g stylus
  • Jison: npm install -g jison

Installing prerequisite components (once):

  • make install

Build:

  • make

Test:

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