Author Topic: Online keyboard-layout editor  (Read 26020 times)

0 Members and 1 Guest are viewing this topic.

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Online keyboard-layout editor
« on: Tue, 24 September 2013, 22:36:24 »
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.

Offline Krogenar

  • The Kontrarian
  • * Esteemed Elder
  • Posts: 1264
  • Location: Eastchester, NY
  • "DO NOT BRING YOUR EVIL HERE." -Swamp Thing
    • Buried Planet
Re: Online keyboard-layout editor
« Reply #1 on: Wed, 25 September 2013, 14:31:08 »
That looks really awesome!
GeekHack Artwork Resources | The Living GeekHack Logo Thread | Signature Plastics ABS Chip Scanning Project | Krog Flocks Around | Keyboard Color Scheme Archive | [GB] PBT DyeSub DSA Granite Set
More
Quote from: Samuel Adams
"If ye love wealth better than liberty, the tranquility of servitude better than the animating contest of freedom, go home from us in peace. We ask not your counsels or your arms. Crouch down and lick the hands which feed you. May your chains set lightly upon you, and may posterity forget that you were our countrymen."

Offline SpAmRaY

  • NOT a Moderator
  • * Certified Spammer
  • Posts: 14419
  • Location: \(_o)/
  • because reasons.......
Re: Online keyboard-layout editor
« Reply #2 on: Wed, 25 September 2013, 14:34:24 »
Very interesting!! Thanks for sharing.

Offline MOZ

  • KING OF THE NEWBIES
  • * Maker
  • Posts: 3982
  • Location: Jo'burg
  • Busy making stuff
Re: Online keyboard-layout editor
« Reply #3 on: Wed, 25 September 2013, 14:59:49 »
Very nice. There some bugs when selecting keys, but this is very good and helpful!

Offline mr. rampage

  • Posts: 76
Re: Online keyboard-layout editor
« Reply #4 on: Wed, 25 September 2013, 15:36:56 »
Very slick! Good job!

Offline TheFlyingRaccoon

  • HHKB Pro
  • * Maker
  • Posts: 666
  • Location: Texas
  • Cable maker and future engineer
Re: Online keyboard-layout editor
« Reply #5 on: Wed, 25 September 2013, 15:49:25 »
Wow, I love how well designed it is! Good work. By the way it's "Big-ass enter" not "J-shaped enter"  :p
HHKB Pro 2   SmallFry Keyboard

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #6 on: Wed, 25 September 2013, 17:48:35 »
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.

Offline metalliqaz

  • * Maker
  • Posts: 4905
  • Location: the Making Stuff subforum
  • Leopold fanboy
Re: Online keyboard-layout editor
« Reply #7 on: Wed, 25 September 2013, 18:23:54 »
That editor has never worked in my browser through any of the various incarnations.

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #8 on: Wed, 25 September 2013, 18:36:58 »
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.)

Offline Krogenar

  • The Kontrarian
  • * Esteemed Elder
  • Posts: 1264
  • Location: Eastchester, NY
  • "DO NOT BRING YOUR EVIL HERE." -Swamp Thing
    • Buried Planet
Re: Online keyboard-layout editor
« Reply #9 on: Thu, 26 September 2013, 06:29:12 »
Raw data for 108-key:

Quote
["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?
« Last Edit: Thu, 26 September 2013, 06:32:28 by Krogenar »
GeekHack Artwork Resources | The Living GeekHack Logo Thread | Signature Plastics ABS Chip Scanning Project | Krog Flocks Around | Keyboard Color Scheme Archive | [GB] PBT DyeSub DSA Granite Set
More
Quote from: Samuel Adams
"If ye love wealth better than liberty, the tranquility of servitude better than the animating contest of freedom, go home from us in peace. We ask not your counsels or your arms. Crouch down and lick the hands which feed you. May your chains set lightly upon you, and may posterity forget that you were our countrymen."

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #10 on: Thu, 26 September 2013, 10:21:53 »
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.

Offline Melvang

  • Exquisite Lord of Bumfluff
  • * Maker
  • Posts: 4388
  • Location: Waterloo, IA
  • Melvang's Desktop Customs
Re: Online keyboard-layout editor
« Reply #11 on: Thu, 26 September 2013, 12:47:34 »
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.
OG Kishsaver, Razer Orbweaver clears and reds with blue LEDs, and Razer Naga Epic.   "Great minds crawl in the same sewer"  Uncle Rich
Order Form for MDC Mouse Pad
Contact Form for questions

IBM F Revival Services Now with VIDEO

Offline SpAmRaY

  • NOT a Moderator
  • * Certified Spammer
  • Posts: 14419
  • Location: \(_o)/
  • because reasons.......
Re: Online keyboard-layout editor
« Reply #12 on: Thu, 26 September 2013, 13:15:40 »
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

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #13 on: Thu, 26 September 2013, 14:19:49 »
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... :)

Offline Melvang

  • Exquisite Lord of Bumfluff
  • * Maker
  • Posts: 4388
  • Location: Waterloo, IA
  • Melvang's Desktop Customs
Re: Online keyboard-layout editor
« Reply #14 on: Thu, 26 September 2013, 14:22:19 »
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
OG Kishsaver, Razer Orbweaver clears and reds with blue LEDs, and Razer Naga Epic.   "Great minds crawl in the same sewer"  Uncle Rich
Order Form for MDC Mouse Pad
Contact Form for questions

IBM F Revival Services Now with VIDEO

Offline Binge

  • Island of Sandy Beaches
  • * Maker
  • Posts: 3261
  • Location: Binge Has
  • With Gentle Time. I Feel Very Nice.
    • Hunger Work Studio
Re: Online keyboard-layout editor
« Reply #15 on: Fri, 27 September 2013, 12:45:11 »
at some point this will have to be stickied  :cool:
60% keyboards, 100% of the time.

"What the hell Jimmy?!  It was ruined before you even put it up there with your decrepit fingers."

Offline xavierblak

  • Posts: 201
  • Location: NY
Re: Online keyboard-layout editor
« Reply #16 on: Fri, 27 September 2013, 19:35:31 »
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.  :thumb:

Model F 5291 Layout

Offline Binge

  • Island of Sandy Beaches
  • * Maker
  • Posts: 3261
  • Location: Binge Has
  • With Gentle Time. I Feel Very Nice.
    • Hunger Work Studio
Re: Online keyboard-layout editor
« Reply #17 on: Fri, 27 September 2013, 20:30:13 »
Fear the possibilities!



« Last Edit: Fri, 27 September 2013, 20:34:32 by Binge »
60% keyboards, 100% of the time.

"What the hell Jimmy?!  It was ruined before you even put it up there with your decrepit fingers."

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #18 on: Sat, 28 September 2013, 00:44:10 »
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.

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #19 on: Sun, 29 September 2013, 18:52:11 »
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.

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #20 on: Mon, 14 October 2013, 01:58:46 »
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.

Offline mr_schnrub

  • Posts: 14
  • Location: QLD, Australia
  • Click Click Doin the Click
Re: Online keyboard-layout editor
« Reply #21 on: Mon, 14 October 2013, 02:40:28 »
Awesome work!  :thumb:
4 x IBM 1391401 | IBM 1390120 | IBM SSK 1397681 | Unicomp UB4041A

Online CommonCurt

  • * Esteemed Elder
  • Posts: 4490
  • Location: WPB, FL
  • 🍒 Beige or Bust
    • My Flickr Page
Re: Online keyboard-layout editor
« Reply #22 on: Mon, 14 October 2013, 04:02:33 »
Very cool. Thanks.
Some of my Keyboards -->
More
OTD Koala:  lubed 62g Old MX-Blacks   |   LZ-GH V2   |   KMAC2:  lubed 62g Tactile MX-Greys   |   LZ CLS s   |   X60:  lubed 62g Vintage MX-Blacks   |   GON NerD 60:  lubed 62g Old MX-Clears   |   Filco MJ2 (Beige) TKL's:  lubed 62g MX-Clears  &  lubed  62g Vintage MX-Blacks   |   IBM '91 SSK
                                
       
WTB/WTS ---->
More

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #23 on: Mon, 14 October 2013, 22:01:20 »
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:
« Last Edit: Mon, 14 October 2013, 23:22:25 by ijprest »

Offline TD22057

  • Posts: 172
  • Location: Southern California
Re: Online keyboard-layout editor
« Reply #24 on: Mon, 14 October 2013, 22:48:05 »
That's awesome work!

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

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #25 on: Mon, 14 October 2013, 23:21:18 »
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.  :)

Offline MOZ

  • KING OF THE NEWBIES
  • * Maker
  • Posts: 3982
  • Location: Jo'burg
  • Busy making stuff
Re: Online keyboard-layout editor
« Reply #26 on: Tue, 15 October 2013, 03:12:25 »
This is looking better and better.

Offline Krogenar

  • The Kontrarian
  • * Esteemed Elder
  • Posts: 1264
  • Location: Eastchester, NY
  • "DO NOT BRING YOUR EVIL HERE." -Swamp Thing
    • Buried Planet
Re: Online keyboard-layout editor
« Reply #27 on: Tue, 15 October 2013, 07:23:28 »
This is maturing into a really great tool.
GeekHack Artwork Resources | The Living GeekHack Logo Thread | Signature Plastics ABS Chip Scanning Project | Krog Flocks Around | Keyboard Color Scheme Archive | [GB] PBT DyeSub DSA Granite Set
More
Quote from: Samuel Adams
"If ye love wealth better than liberty, the tranquility of servitude better than the animating contest of freedom, go home from us in peace. We ask not your counsels or your arms. Crouch down and lick the hands which feed you. May your chains set lightly upon you, and may posterity forget that you were our countrymen."

Offline 0100010

  • Posts: 1123
  • Location: DFW, TX, US
  • Not Sure
Re: Online keyboard-layout editor
« Reply #28 on: Thu, 07 November 2013, 14:12:26 »
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
  Quoting me causes a posting error that you need to ignore.

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #29 on: Thu, 07 November 2013, 15:19:59 »
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.

Offline 0100010

  • Posts: 1123
  • Location: DFW, TX, US
  • Not Sure
Re: Online keyboard-layout editor
« Reply #30 on: Thu, 07 November 2013, 23:02:33 »
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
« Last Edit: Fri, 08 November 2013, 14:49:02 by 0100010 »
  Quoting me causes a posting error that you need to ignore.

Offline metalliqaz

  • * Maker
  • Posts: 4905
  • Location: the Making Stuff subforum
  • Leopold fanboy
Re: Online keyboard-layout editor
« Reply #31 on: Fri, 08 November 2013, 21:35:20 »
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
« Last Edit: Fri, 08 November 2013, 21:36:58 by metalliqaz »

Offline csmith1991

  • Posts: 35
  • Location: US
Re: Online keyboard-layout editor
« Reply #32 on: Sat, 09 November 2013, 19:18:53 »

Offline metalliqaz

  • * Maker
  • Posts: 4905
  • Location: the Making Stuff subforum
  • Leopold fanboy
Re: Online keyboard-layout editor
« Reply #33 on: Sun, 10 November 2013, 19:42:02 »
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?


Offline metalliqaz

  • * Maker
  • Posts: 4905
  • Location: the Making Stuff subforum
  • Leopold fanboy
Re: Online keyboard-layout editor
« Reply #35 on: Sun, 10 November 2013, 22:01:28 »
:)

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #36 on: Tue, 12 November 2013, 22:30:12 »
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...

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #37 on: Tue, 12 November 2013, 22:32:40 »
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

Offline Melvang

  • Exquisite Lord of Bumfluff
  • * Maker
  • Posts: 4388
  • Location: Waterloo, IA
  • Melvang's Desktop Customs
Re: Online keyboard-layout editor
« Reply #38 on: Tue, 12 November 2013, 22:42:04 »
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.
OG Kishsaver, Razer Orbweaver clears and reds with blue LEDs, and Razer Naga Epic.   "Great minds crawl in the same sewer"  Uncle Rich
Order Form for MDC Mouse Pad
Contact Form for questions

IBM F Revival Services Now with VIDEO

Offline metalliqaz

  • * Maker
  • Posts: 4905
  • Location: the Making Stuff subforum
  • Leopold fanboy
Re: Online keyboard-layout editor
« Reply #39 on: Tue, 12 November 2013, 22:43:58 »
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?  :p

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #40 on: Tue, 12 November 2013, 22:50:34 »
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?   ;D

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

Offline codyeatworld

  • * Destiny Supporter
  • Posts: 939
  • Location: Bay Area, California
    • [CTRL]ALT
Re: Online keyboard-layout editor
« Reply #41 on: Tue, 12 November 2013, 22:56:20 »
Awesome creation sir.

You have a PM incoming!




Offline Calcifar

  • Posts: 55
Re: Online keyboard-layout editor
« Reply #42 on: Wed, 13 November 2013, 16:22:05 »
So useful.

Offline csmith1991

  • Posts: 35
  • Location: US
Re: Online keyboard-layout editor
« Reply #43 on: Wed, 13 November 2013, 18:15:31 »
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.

Offline ijprest

  • Thread Starter
  • Posts: 87
  • Location: Ottawa, ON, Canada
Re: Online keyboard-layout editor
« Reply #44 on: Wed, 13 November 2013, 19:05:36 »
I've planned support for "layers"... not really intended for the proposed usage, but it could probably be used that way.

Offline metalliqaz

  • * Maker
  • Posts: 4905
  • Location: the Making Stuff subforum
  • Leopold fanboy
Re: Online keyboard-layout editor
« Reply #45 on: Wed, 13 November 2013, 19:33:27 »
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?

Offline Krogenar

  • The Kontrarian
  • * Esteemed Elder
  • Posts: 1264
  • Location: Eastchester, NY
  • "DO NOT BRING YOUR EVIL HERE." -Swamp Thing
    • Buried Planet
Re: Online keyboard-layout editor
« Reply #46 on: Thu, 14 November 2013, 08:04:36 »
It's a wonderful too, I dig it.  (Maker badge nomination, amirite?)

I second that -- Maker badge!
GeekHack Artwork Resources | The Living GeekHack Logo Thread | Signature Plastics ABS Chip Scanning Project | Krog Flocks Around | Keyboard Color Scheme Archive | [GB] PBT DyeSub DSA Granite Set
More
Quote from: Samuel Adams
"If ye love wealth better than liberty, the tranquility of servitude better than the animating contest of freedom, go home from us in peace. We ask not your counsels or your arms. Crouch down and lick the hands which feed you. May your chains set lightly upon you, and may posterity forget that you were our countrymen."

Offline engicoder

  • Posts: 718
  • Location: North Carolina
Re: Online keyboard-layout editor
« Reply #47 on: Sat, 22 November 2014, 12:22:55 »
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.
« Last Edit: Sun, 23 November 2014, 00:04:06 by engicoder »
   

Offline jacobolus

  • Posts: 3634
  • Location: San Francisco, CA
Re: Online keyboard-layout editor
« Reply #48 on: Sun, 23 November 2014, 16:51:48 »
If this is by design, it seems to give misleading impression of what the keyboard will actually look like.
I dont think the point is to give an accurate picture of what a keycap will look like. Think of the results as just diagrams.

Offline Oobly

  • * Esteemed Elder
  • Posts: 3929
  • Location: Finland
Re: Online keyboard-layout editor
« Reply #49 on: Tue, 20 January 2015, 03:50:38 »
If this is by design, it seems to give misleading impression of what the keyboard will actually look like.
I dont 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.
Buying more keycaps,
it really hacks my wallet,
but I must have them.

Offline Krogenar

  • The Kontrarian
  • * Esteemed Elder
  • Posts: 1264
  • Location: Eastchester, NY
  • "DO NOT BRING YOUR EVIL HERE." -Swamp Thing
    • Buried Planet
Re: Online keyboard-layout editor
« Reply #50 on: Tue, 20 January 2015, 07:43:51 »
Adding a disclaimer about the colour is the easiest option to implement, though.

That would be the easiest option -- this is a great tool.
GeekHack Artwork Resources | The Living GeekHack Logo Thread | Signature Plastics ABS Chip Scanning Project | Krog Flocks Around | Keyboard Color Scheme Archive | [GB] PBT DyeSub DSA Granite Set
More
Quote from: Samuel Adams
"If ye love wealth better than liberty, the tranquility of servitude better than the animating contest of freedom, go home from us in peace. We ask not your counsels or your arms. Crouch down and lick the hands which feed you. May your chains set lightly upon you, and may posterity forget that you were our countrymen."

Offline Zorox

  • Posts: 94
  • Location: ISO-DE
  • Tactile FTW <3
Re: Online keyboard-layout editor
« Reply #51 on: Wed, 30 September 2015, 14:25:09 »
Hi there, I know that your topic is long ago no active, but with a hope that somebody how experienced with it can find me an answer.

Can I apply custom fonts onto the layout?

Offline Phenix

  • Posts: 591
  • Location: Germany
Re: Online keyboard-layout editor
« Reply #52 on: Tue, 05 April 2016, 13:35:46 »
the site is nice. But please make the site-design also available in black background/white or yellow print. Its not that nice to use (imho)
Winter is coming.

Offline rene_canlas

  • Posts: 1
  • Location: Manila. PH
Re: Online keyboard-layout editor
« Reply #53 on: Mon, 20 June 2016, 03:30:51 »
Great keyboard layout utility! Very easy to use.  I've already created several layouts.
Some suggestions:
  - Ability to select groups of keys (Alphanumerics, Modifiers, Keypad, All)
  - Ability to copy/clone an existing layout or make it a personal preset
  - Row labelling should be an automatic option when you indicate the row number in kb properties
  - Include popular fonts for variety.  It's hard for noobs like me to figure out how to integrate custom fonts

Also, I've tried to save my layouts as SVG, but the resulting SVG file does not have the labels.  Am I doing anything wrong?

Thanks and more power!

Rene


Online algernon

  • Posts: 286
  • A tiny mouse, a hacker.
    • Diaries of a Madman
Re: Online keyboard-layout editor
« Reply #54 on: Mon, 20 June 2016, 03:35:47 »
  - Ability to copy/clone an existing layout or make it a personal preset

You can download the JSON of any layout, and import it again, to have your own variant. Not as easy as a clone button, but not too bad, either.

Offline csmertx

  • proprietor of waffles
  • * Elevated Elder
  • Posts: 2406
  • Location: Gainesville, FL
    • https://csmertx.github.io
Re: Online keyboard-layout editor
« Reply #55 on: Mon, 20 June 2016, 08:26:01 »
  - Ability to copy/clone an existing layout or make it a personal preset

You can download the JSON of any layout, and import it again, to have your own variant. Not as easy as a clone button, but not too bad, either.

You can also create an account and save the layout as a private layout
 / another 3d keyboard model thread / open source sucks / github 
Quote
...Especially the Florida cousins, who obviously can't take a hint.

Offline cribbit

  • Posts: 288
Re: Online keyboard-layout editor
« Reply #56 on: Mon, 24 October 2016, 15:34:00 »
I've been a big fan of this tool for a while.

I've noticed that development on it has been paused for over a year. This is understandable; there's very little left to be added and functionality wise it's nearly perfect.

However, I'm considering trying to add some new functionality, especially surrounding the interactions between KLE and other keyboard tools websites. Before I began working on it, I was just wondering if anyone else was also working on a similar project.

The current goal is to use the open source of http://kb.sized.io/ to implement git gist usage that can be shared between both sites, and try to get into the source of http://builder.swillkb.com/ for something similar. I'm also looking at taking the mechkeys pcb layout code (https://github.com/mechkeys/mechkeys/blob/master/layout.py), adding some additional functionality and integrating it with kb.sized.io. Ideally, this ability to use gists for save files and a unified json format for saving layouts will allow for future tools websites to be able to easily start up and integrate with the existing tools.
I typed this post on my Slanck. I also developed a stronger, cleaner, easier handwiring method.


Offline skullydazed

  • * Vendor
  • Posts: 307
  • Location: Bay Area, CA
  • Had to turn PM's off. Email info@clueboard.co!
    • Clueboard
Re: Online keyboard-layout editor
« Reply #57 on: Mon, 24 October 2016, 15:51:33 »
I'd be interested in collaborating on a standard for the JSON format, so that more tools can use the gist directly. I'm maintaining my own version of swill's legacy code (http://github.com/skullydazed/kb_builder) and I have my own tool for generating EAGLE scripts to aid PCB development (http://github.com/skullydazed/kalerator). I'm also working on a QMK configuration tool (https://github.com/skullydazed/qmk_configurator), but that project is still a WIP and on hold while I wrap a few other things up.

Offline cribbit

  • Posts: 288
Re: Online keyboard-layout editor
« Reply #58 on: Mon, 24 October 2016, 16:20:43 »
I'd be interested in collaborating on a standard for the JSON format, so that more tools can use the gist directly. I'm maintaining my own version of swill's legacy code (http://github.com/skullydazed/kb_builder) and I have my own tool for generating EAGLE scripts to aid PCB development (http://github.com/skullydazed/kalerator). I'm also working on a QMK configuration tool (https://github.com/skullydazed/qmk_configurator), but that project is still a WIP and on hold while I wrap a few other things up.

Your PMs are off; can you add me on steam or PM me here?

My idea of the standard would pretty much just be building off the KLE gist, but allowing a better defined way for services to add their data without interfering with each other.
I typed this post on my Slanck. I also developed a stronger, cleaner, easier handwiring method.


Offline skullydazed

  • * Vendor
  • Posts: 307
  • Location: Bay Area, CA
  • Had to turn PM's off. Email info@clueboard.co!
    • Clueboard
Re: Online keyboard-layout editor
« Reply #59 on: Mon, 24 October 2016, 22:05:50 »
Shoot me an email at info@clueboard.co, or you can also find me on the keyboard community slack. Unfortunately I got too many PM's and couldn't keep track of them to make sure everyone got an answer. :/

Offline cribbit

  • Posts: 288
Re: Online keyboard-layout editor
« Reply #60 on: Mon, 24 October 2016, 23:13:59 »
Shoot me an email at info@clueboard.co, or you can also find me on the keyboard community slack. Unfortunately I got too many PM's and couldn't keep track of them to make sure everyone got an answer. :/

Sounds good, I'll send you an email soon.
I typed this post on my Slanck. I also developed a stronger, cleaner, easier handwiring method.


Offline Che.R.Ry

  • Posts: 38
  • geeks
Re: Online keyboard-layout editor
« Reply #61 on: Tue, 13 December 2016, 10:22:40 »
thx for creating this website :thumb:

it really helps on how my keyboard will looks like when the keycaps arrived :cool:

thx once again <3

Offline atomicus

  • Posts: 116
  • Location: United Kingdom
Re: Online keyboard-layout editor
« Reply #62 on: Fri, 31 March 2017, 10:10:53 »
Any chance of a Varmilo 68 template? :)