Online keyboard-layout editor

[ijprest]

I've been posting about this over on deskthority (mainly because somebody else started a thread that I hijacked), but I figured I'd post here to let you folks know about it in case you aren't lurking in both places...

I've created a little online keyboard-layout editor:  http://www.keyboard-layout-editor.com/

It started mainly as a way for me to learn a little more web-programming, and to visualize custom keyboard layouts before moving on to the "cut holes in cardboard" phase.  But you might also find it useful for visualizing color combinations for keycaps, or whatever.

It's still an early version, and I have lots of ideas for features/enhancements, but it's starting to come together pretty well, IMO. 

Any feedback is appreciated.

[Krogenar]

That looks really awesome!

[SpAmRaY]

Very interesting!! Thanks for sharing.

[MOZ]

Very nice. There some bugs when selecting keys, but this is very good and helpful!

[mr. rampage]

Very slick! Good job!

[TheFlyingRaccoon]

Wow, I love how well designed it is! Good work. By the way it's "Big-ass enter" not "J-shaped enter" 

[ijprest]

Thanks, everyone.  I intend to keep working on it as time permits, so if there's anything you'd like to see added, let me know.

Very nice. There some bugs when selecting keys, but this is very good and helpful!

Yeah, it was pointed out (on deskthority) that the selection doesn't really work very well on FF or IE.  I'm going to try fixing that tonight.

[metalliqaz]

That editor has never worked in my browser through any of the various incarnations.

[ijprest]

OK, the selection problem turned out to be pretty straightforward.

I've now tested basic functionality in IE 10 and FF 24.  (I do all my development on Chrome 29.)

[Krogenar]

Raw data for 108-key:

["Esc",{x:1},"F1","F2","F3","F4",{x:0.5},"F5","F6","F7","F8",{x:0.5},"F9","F10","F11","F12",{x:0.5},"PrtSc","Scroll Lock","Pause\nBreak",{x:0.5},"","","",""],
[{y:0.5},"~\n`","!\n1","@\n2","#\n3","$\n4","%\n5","^\n6","&\n7","*\n8","(\n9",")\n0","_\n-","+\n=",{w:2},"Backspace",{x:0.5},"Insert","Home","PgUp",{x:0.5},"Num Lock","/","*","-"],
[{w:1.5},"Tab","Q","W","E","R","T","Y","U","I","O","P","{","}",{w:1.5},"|\n\\",{x:0.5},"Delete","End","PgDn",{x:0.5},"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:4},"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.5},"↑",{x:1.5},"1\nEnd","2\n↓","3\nPgDn",{h:2},"Enter"],
[{w:1.25},"Ctrl",{w:1.25},"Win",{w:1.25},"Alt",{w:6.25},"",{w:1.25},"Alt",{w:1.25},"Win",{w:1.25},"Menu",{w:1.25},"Ctrl",{x:0.5},"←","↓","→",{x:0.5,w:2},"0\nIns",".\nDel"]

Definitely make a way to save and suggest layouts. Can we change the base color of the keyboard?

Also, check my signature for the ABS color chip scanning project, it's open to everyone who wants to use it. In addition to the web versions of the colors, maybe display the actual photos of the color chips on the screen?

[ijprest]

Definitely make a way to save and suggest layouts.

The app is *entirely* client-based... there is no server component (save a simple file server).  So for now, the only way to save a layout is to bookmark the 'permalink' (top-right corner).

Can we change the base color of the keyboard?

Best we can do now is to marquee-select all the keys, then change the color.  (This actually results in only a very small change to the raw data.) 

I do plan on adding key 'prototypes', though, to easily change all alpha keys or modifier keys or whatever.  So in the future this should be a bit easier.

Also, check my signature for the ABS color chip scanning project, it's open to everyone who wants to use it. In addition to the web versions of the colors, maybe display the actual photos of the color chips on the screen?

I'll take a look.

[Melvang]

The biggest thing I would love to see from a functional keyboard layout editor is a way to export a functioning firmware for teensy based projects.  If this would be possible myself and I'm sure a lot of people here would love you forever.  Another nice option on that front would be to have a basic layout of said firmware for a hardwired matrix just showing which keys are in the same columns.

Melvang

Edit:  Although the firmware export function would take some of the "hack" out of Geekhack.

[SpAmRaY]

The biggest thing I would love to see from a functional keyboard layout editor is a way to export a functioning firmware for teensy based projects.  If this would be possible myself and I'm sure a lot of people here would love you forever.  Another nice option on that front would be to have a basic layout of said firmware for a hardwired matrix just showing which keys are in the same columns.

Melvang

Edit:  Although the firmware export function would take some of the "hack" out of Geekhack.

It's not online, and it's not the newest, fanciest firmware but I found this to be very interesting

http://geekhack.org/index.php?topic=35322.0

[ijprest]

The biggest thing I would love to see from a functional keyboard layout editor is a way to export a functioning firmware for teensy based projects.

Well, I *do* have my own teensy-based project on the go...

[Melvang]

The biggest thing I would love to see from a functional keyboard layout editor is a way to export a functioning firmware for teensy based projects.  If this would be possible myself and I'm sure a lot of people here would love you forever.  Another nice option on that front would be to have a basic layout of said firmware for a hardwired matrix just showing which keys are in the same columns.

Melvang

Edit:  Although the firmware export function would take some of the "hack" out of Geekhack.

It's not online, and it's not the newest, fanciest firmware but I found this to be very interesting

http://geekhack.org/index.php?topic=35322.0

The only problem I can see with this for my project is that I can't do a 10u spacebar with no mods on the bottom row

[Binge]

at some point this will have to be stickied 

[xavierblak]

Very cool. I used to layout my Model F keyboard. Being able to mock this up will help with making a keymap for the controller board. Nice. 

Model F 5291 Layout

[Binge]

Fear the possibilities!

[ijprest]

I've updated the editor to v0.4.  Mostly minor bugfixes and UI tweaks... here are the highlights:

-- Marquee select a bit easier to use, since it continues to track the mouse anywhere over the browser window.
-- I've added pre-baked "ISO Enter" and "J-Shaped Enter" keys to the "Add Keys" dropdown.  (If there are other common-but-complicated shapes I should add, let me know.)
-- "Help" dialog to show available keyboard shortcuts.
-- Code now on GitHub for proper versioning and stuff.

[ijprest]

Updated again, to v0.5. 

Changes:
-- Undo/redo support!
-- Switched to URLON-encoding for the permalinks... since it mostly uses URL-safe characters, it results in significantly shorter URLs.
---- I'm not 100% sold on this... it still results in pretty ugly links.  But at least they're shorter.  Let me know what you think.
---- Note that the old permalinks should still work (since the data format didn't change... just the encoding); let me know if they don't.
-- Alt+click is now allowed wherever Ctrl+Click was previously allowed (helpful for Mac users who can't Ctrl+Click).
-- Shift+click will now "extend" the selection (linearly, in left-to-right fashion).
-- Similarly, Shift+J/K will extend the selection.
-- Ctrl+A will select all keys; ESC will de-select all.
-- A couple of small bugfixes.

I've also logged 'enhancement ideas' on GitHub for just most of the stuff people have asked for (here and at Deskthority), plus some of my own ideas... you can browse the issue list to get an idea of where I'm headed.

Feel free to log issues directly on GitHub, if you like... though I'll continue reading & replying to comments here.

[ijprest]

I've updated my editor to v0.6... here are the highlights:

• Can now SAVE a copy of your layout to the server
• You get a nice, shortened URL to use to retrieve your layout later.
• e.g., here's a "CCnG Modifier Set" link:  http://www.keyboard-layout-editor.com/#/layouts/bdea1a081b9e1bc3d72b42e18b2d8c35
• All layouts are public... if somebody has the link, they can view your layout.
• Also, there isn't too much security... it would be technically possible for someone to upload a "blank" layout over top of an existing layout (provided they had the link)... however I've got versioning enabled on the server, so if this every happens to you, I can probably retrieve your old layout.
• I reserve the right to occasionally purge layouts, so I recommend you maintain a bookmark of the permalink to anything important, just in case.  (I'm only likely to do this if it looks like there was some sort of attack on the server, or other form of abuse, and would try to only delete layouts that didn't look "finished".  But still... backups are recommended.)
• Added the ability to "ghost" a keycap:
• Ghosted keys are dimmed out.
• This is useful for drawing attention to the *unghosted* keys, while still presenting them in context.
• Added copy/paste support:
• Unfortunately, the browser does not expose the clipboard to web-pages in any useful manner...
• There are a few workarounds I could pursue using Flash applets and such, but they have their own limitations (in addition to requiring Flash). 
• I've got my eye out for other suitable workarounds, but until then... the cut/paste is internal to the current instance of the editor (you can't, e.g., copy from one instance and paste into another).
• Added a warning if you try to navigate away from the editor without having saved your work.
• Added some very-crudely sampled GMK color swatches (from sherryton's photo).
• Plus, the usual smattering of bug-fixes.

[mr_schnrub]

Awesome work! 

[CommonCurt]

Very cool. Thanks.

[ijprest]

I've updated the editor again, to v0.7 (yay for holiday weekends!).  Here are the highlights:

• Can specify a background color for the editor (to better visualize the caps on, e.g., a black keyboard).
• Added the ability to have right-aligned text (upper- & lower-right)... this is useful for some foreign layouts that have lots of legends on the keys.
• Added the ability to have side-printed legends on the front of the caps (e.g., for "stealth" keyboards, or for media keys legends).
• Added the ability to have centered legends (either horizontally, vertically, or both).
• Added the ability to vary the font height (relative sizes from 1-5; default 3); some sets (e.g., Retro DSA) have larger legends on certain keys.
• Can now specify the 'profile' of a key:
  
  • You can currently type anything you want here, and it'll be remembered on a per-key basis.  I envision this field eventually being used to specify both the profile & the row number (e.g., "DCS R1", or something).
  • I've currently got experimental rendering support if you enter "DCS" or "DSA"... I'm just adjusting the margins and adding a subtle gradient to make it look cylindrical or spherical.  It doesn't work very well on oddly-shaped keys, though.
  • If you specify DSA, I'm also switching the font to "Engravers Gothic"; this isn't a perfect match for the "Gorton Modified" that SP uses, but it's reasonably close for most glyphs.
• Fixed the usual smattering of bugs, and no doubt introduced a bunch more...

Here's a couple of samples to illustrate the new features:

• DSA Retro on a black keyboard: http://www.keyboard-layout-editor.com/#/layouts/77392f671ac00b2e1615d7611c4ca9d6
• Stealth Black: http://www.keyboard-layout-editor.com/#/layouts/c1facc98cead4d67a2547ca3702b7011

[TD22057]

That's awesome work!

Here's the custom split hand keyboard I'm working on:  http://www.keyboard-layout-editor.com/#/layouts/3c1ad51efde1ee4860cdc5464b48e444

[ijprest]

Cool... I'm planning my own custom split-hand too (though mine will probably be less radical than yours).  This was the reason I started on the editor in the first place... I just got a little carried away. 

[MOZ]

This is looking better and better.

[Krogenar]

This is maturing into a really great tool.

[0100010]

When I go to create a layout similar to a Sun Type 5 - the editor does not allow enough column width - can only fit half the numpad.

Example : http://www.keyboard-layout-editor.com/#/layouts/55d8017c5a6dff56e37752956bec22d8

[ijprest]

When you insert new keys, I am (rather arbitrarily) wrapping them at 23 units... the thinking being that I had to wrap them *somewhere*, and 23 would be the most commonly-used size (for full-size keyboards).

There's nothing stopping you from moving keys past that... though it's admittedly less convenient.

Maybe I could change it to wrap at your monitor width, or something.

[0100010]

Hmmm.  Will try with a higher resolution monitor then - the machine I was using at the time has a pretty low res screen.

Update : Switching to a different machine / higher res / larger screen resolved.

Great tool - thank you for your work!

http://www.keyboard-layout-editor.com/#/layouts/894d068071008c8f6aedfa0762df84cf

[metalliqaz]

Great work.  At first it didn't work in my browser but now is really useful.  Great GH contribution.

http://www.keyboard-layout-editor.com/#/layouts/0acdf53fb39ca8c05df3b0799f08b698

[csmith1991]

Nothing to see here: http://www.keyboard-layout-editor.com/#/layouts/3318ba90120b061ffa159aec097c0165

[metalliqaz]

Nothing to see here: http://www.keyboard-layout-editor.com/#/layouts/3318ba90120b061ffa159aec097c0165

So close to HHKB, why didn't you do the 1.5x and 1x mods on the bottom row?

[csmith1991]

Nothing to see here: http://www.keyboard-layout-editor.com/#/layouts/3318ba90120b061ffa159aec097c0165

So close to HHKB, why didn't you do the 1.5x and 1x mods on the bottom row?

Copy paste error. Fixed: http://www.keyboard-layout-editor.com/#/layouts/567f97c5dd3fcb802c91e0be3e488f8d

[metalliqaz]

[ijprest]

It has been a while since I posted an update, but I've released three new versions of the editor in the last couple of weeks.  The highlights:

• More formatting options (sizes, text positions, etc.)
• Stepped keycap support
• More accurate colors, sampled from actual SP color chips.  As a result of the changes, your existing saved layouts may appear lighter than they used to; colors may need to be tweaked. (Read below for the gory details.)
• Support for rotated key clusters!  (See the ErgoDox preset for an example).  Note: easy to get confused when you're editing these... "undo" is your friend.
  
• Better rendering of space-bars, oddly-shaped keys.
• New samples & presets.
• Miscellaneous bug-fixes and UI tweaks.

Here's the full changelog:

Version 0.8: Oct 19, 2013

More

Code: [Select]

* Switched to a new JSONL parser; generates better error messages, and doesn't
  get hung up on strings with colons in them.
* Increased the number of font-sizes available; now 1-9.  New sizes are more
  linear (for DSA profile).
* Support a 3rd (middle) row of text on the keycaps, to support some layouts
  (e.g., German) that have lots of different legends.
* Support both a primary & secondary font-size on the caps.
  * Primary is used for the first label; secondary for everything else.
* HRs now rendered in key legends if used.
* Added tooltips for most of the editor fields.
* Added support for 'stepped' keycaps.
  * Added a 'stepped caps-lock' to the 'Add Key' dropdown.
* Split the 'Load Preset' menu into two sections.
  * The first section is for true "presets"---standard layouts without much
    customization that serve as a base for the user.
  * The second section is for "samples"; these are layouts with more extensive
    changes, to serve as examples of what is possible in the editor.
  * Added a couple more samples to the list.
* Fixed the usual smattering of bugs, and no doubt introduced a bunch more...


Version 0.9: Nov 9, 2013

More

Code: [Select]

* Updated editor with new Signature Plastics color swatches.
  * ABS colors updated; PBT colors added.
  * Colors were sampled from actual plastic chips using an X-Rite ColorMunki,
    and then converted to sRGB (D65) using the formulas on Bruce Lindbloom's
    website.
  * Colors are accurate is your monitor is calibrated to sRBG!
* More accurate (?) colors for the tops of the keycaps.
  * Previously, the color you entered would be used directly on the top of
    the cap, and then "darkened" for the sides.
  * However, our colors were sampled from the "smooth" part of the chip.
  * Since the sides of a cap are usually smooth, and the top of the cap is
    usually matte (which tends to reflect more light, appearing brighter), it
    made sense to switch things around.
  * Now using the color verbatim on the *sides* of the cap, and using a
    "lighter" color for the top of the cap.
  * Computing the "lighter" color in LAB space (instead of RGB space).
  * Tweaked the gradients for DSA/DCS, and updated the various samples and
    default colors to work better with the new rendering.
* Added a little "indicator" to the palette to indicate which color is
  being used for the keycap (and label).
  * Also, printing the currently-selected color name beside the color-editor
    fields.
* Added a button to swap the keycap and label colors; should make creating
  some color schemes (e.g., CCnG) really easy.
* Sanitizing any HTML tags entered into key labels.
  * I wasn't so much worried about my site since there's no server-side
    component to attack, I don't use cookies, passwords, or personal-data for
    anything, and XSS rules should prevent anything too egregious.
  * But (in theory, at least) users could be given a link to a "malicious"
    keyboard layout, and then maybe tricked into doing something bad.
* Adding "SPACE" to the profile field will now render spacebars with a
  vertical gradient (so long as the profile is supported). e.g., the profile
  string should read something like this: "DCS SPACE R1" (or similar).
* Stepped keycaps are a little more user-friendly.
  * When first creating a stepped cap, I automatically modify the widths to
    make it obvious what's going on.
  * The secondary width/height fields are no longer force-synced for stepped
  caps.
* Added a link to the GitHub issues page, so users can submit bug reports.
* Added a new sample: Televideo TS-800a
* Fixed the usual smattering of bugs, and no doubt introduced a bunch more...


Version 0.10: Nov 12, 2013

More

Code: [Select]

* Added support for rotated key clusters.
  * Each key has a rotation angle and center-of-rotation.
  * Keys with the same angle/CoR are grouped together into a "custer" for the
    purposes of sorting the keys, and in the serialized format; e.g.,
    navigating to the next/previous key will go through all the keys in the
    current cluster before moving on to the next cluster.
  * Crosshairs-indicator displays in the editor to let you know where your
    center-of-rotation is.
  * Keyboard:  Ctrl+Arrows to modify the center-of-rotation; PgUp/PgDn to
    modify the rotation angle.
  * __CAUTION:__ it's really easy to get confused, and end up with keys
    outside the visible area; I recommend setting your center-of-rotation
    _before_ rotating the keys.  But you can always "undo" if you mess up.
* Added rendering rules for the SA keycap profile.
  * Currently renders exactly like DSA.
* Fixed the rendering of profile-gradients on non-rectangular keys.
  * Works perfectly on DCS profile.
  * Works about as well as possible on DSA/SA. Doesn't look jarring, at least.
* Added a "center-stepped" key to the "Add Key" dropdown menu.
* Some performance improvements.
* Added a new preset: ErgoDox
* Added a new sample: Symbolics PN 364000
* Fixed the usual smattering of bugs, and no doubt introduced a bunch more...

[ijprest]

OK, the formatting of those CODE blocks withing the MORE sections is less than ideal.  You can also see the changelog on GitHub: https://github.com/ijprest/keyboard-layout-editor/blob/master/README.md

[Melvang]

If you could somehow work in an option to spit out a ready made firmware to load into a teensy 2.0 that would be primo.  Even without that this is some amazing work.

[metalliqaz]

If you could somehow work in an option to spit out a ready made firmware to load into a teensy 2.0 that would be primo.  Even without that this is some amazing work.

Is he supposed to just guess the matrix configuration? 

[ijprest]

Well I *am* using a Teensy for my own custom keyboard... and as the saying goes:  Why do in minutes what you can spend the rest of your life automating?   

... this feature might have to wait for v2, though. 

[codyeatworld]

Awesome creation sir.

You have a PM incoming!

[Calcifar]

So useful.

[csmith1991]

So I just thought of something that may be good for this. I think it was hasu (perhaps someone else) that was working on a tmk web gui that'd enable people to set their keyboard programming for hasu's stuff. It basically exported the info to a raw text output.

Perhaps if we can track down who actually did that combining the projects wouldn't be terribly difficult. The biggest issue I'd see would be that the script had support for several fn layers that'd need to be incorporated.

[ijprest]

I've planned support for "layers"... not really intended for the proposed usage, but it could probably be used that way.

[metalliqaz]

It's a wonderful too, I dig it.  (Maker badge nomination, amirite?)

But, it's purpose is to be able to play with layouts.  Mapping keys for TMK or whatever is a totally different concept.  In that case, the main purpose is changing what scancode is assigned to the keys in a fixed layout.  See what I mean?

[Krogenar]

It's a wonderful too, I dig it.  (Maker badge nomination, amirite?)

I second that -- Maker badge!

[engicoder]

I've noticed that the color you specify for the key cap is actually applied to the skirt area of the keycap while a lighter version of the color is applied to the face of the keycap. If this is by design, it seems to give misleading impression of what the keyboard will actually look like. I love this tool, but this aspect seem off to me. I would prefer the face be the actual value and the skirt be darkened a bit, or maybe have an option for this aspect.

[jacobolus]

If this is by design, it seems to give misleading impression of what the keyboard will actually look like.

I don’t think the point is to give an accurate picture of what a keycap will look like. Think of the results as just diagrams.

[Oobly]

If this is by design, it seems to give misleading impression of what the keyboard will actually look like.

I don’t think the point is to give an accurate picture of what a keycap will look like. Think of the results as just diagrams.

People are using this to create mockups for Interest Checks and Group Buys, so I think it's important to at least put some kind of disclaimer about the colour inaccuracy on the site or change the way the colours are rendered to make them more accurate.

The background part of the keycap shows the correct colour, but the tops are too light (probably rendered as lighter variable alpha overlay). It should be possible to simply change the alpha values and overlay colour to make the background darker instead of the top lighter. Needs to be done for each profile and row overlay, though.

Adding a disclaimer about the colour is the easiest option to implement, though.