geekhack

geekhack Projects => Making Stuff Together! => Topic started by: ijprest on Tue, 24 September 2013, 22:36:24

Title: Online keyboard-layout editor
Post by: ijprest on Tue, 24 September 2013, 22:36:24
I've been posting about this over on deskthority (mainly because somebody else started a thread (http://deskthority.net/workshop-f7/tiny-javascript-keyboard-layout-editor-t5110.html) 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.
Title: Re: Online keyboard-layout editor
Post by: Krogenar on Wed, 25 September 2013, 14:31:08
That looks really awesome!
Title: Re: Online keyboard-layout editor
Post by: SpAmRaY on Wed, 25 September 2013, 14:34:24
Very interesting!! Thanks for sharing.
Title: Re: Online keyboard-layout editor
Post by: MOZ on Wed, 25 September 2013, 14:59:49
Very nice. There some bugs when selecting keys, but this is very good and helpful!
Title: Re: Online keyboard-layout editor
Post by: mr. rampage on Wed, 25 September 2013, 15:36:56
Very slick! Good job!
Title: Re: Online keyboard-layout editor
Post by: TheFlyingRaccoon 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
Title: Re: Online keyboard-layout editor
Post by: ijprest 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.
Title: Re: Online keyboard-layout editor
Post by: metalliqaz on Wed, 25 September 2013, 18:23:54
That editor has never worked in my browser through any of the various incarnations.
Title: Re: Online keyboard-layout editor
Post by: ijprest 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.)
Title: Re: Online keyboard-layout editor
Post by: Krogenar 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?
Title: Re: Online keyboard-layout editor
Post by: ijprest 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.
Title: Re: Online keyboard-layout editor
Post by: Melvang 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.
Title: Re: Online keyboard-layout editor
Post by: SpAmRaY 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
Title: Re: Online keyboard-layout editor
Post by: ijprest 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... :)
Title: Re: Online keyboard-layout editor
Post by: Melvang 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
Title: Re: Online keyboard-layout editor
Post by: Binge on Fri, 27 September 2013, 12:45:11
at some point this will have to be stickied  :cool:
Title: Re: Online keyboard-layout editor
Post by: xavierblak 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 (http://www.keyboard-layout-editor.com/##%5B%5B%7Bc%3A%22%23aeada7%22%7D%2C%22%5Cn75%22%2C%22%5Cn79%22%2C%7Bx%3A0.5%2Cc%3A%22%23eeeeee%22%7D%2C%22~%5Cn91%22%2C%221%5Cn71%22%2C%222%5Cn67%22%2C%223%5Cn3%22%2C%224%5Cn7%22%2C%225%5Cn11%22%2C%226%5Cn15%22%2C%227%5Cn19%22%2C%228%5Cn23%22%2C%229%5Cn31%22%2C%220%5Cn35%22%2C%22-%5Cn39%22%2C%22%3D%5Cn43%22%2C%7Bc%3A%22%23aeada7%22%2Cw2%3A1.75%7D%2C%22Del%5Cn51%22%2C%7Bx%3A0.75%2Cw2%3A2%7D%2C%22BackSpace%5Cn27%22%2C%7Bx%3A1%2Cw2%3A2%7D%2C%22Dup%5Cn59%22%5D%2C%5B%22%5Cn74%22%2C%22%5Cn78%22%2C%7Bx%3A0.5%2Cw2%3A1.5%7D%2C%22Tab%5Cn90%22%2C%7Bx%3A0.5%2Cc%3A%22%23eeeeee%22%7D%2C%22Q%5Cn66%22%2C%22W%5Cn2%22%2C%22E%5Cn6%22%2C%22R%5Cn10%22%2C%22T%5Cn14%22%2C%22Y%5Cn18%22%2C%22U%5Cn22%22%2C%22I%5Cn30%22%2C%22O%5Cn34%22%2C%22P%5Cn38%22%2C%22%5B%5Cn42%22%2C%7Bw2%3A1.25%7D%2C%22%5D%5Cn47%22%2C%7Bx%3A0.25%2Cc%3A%22%23aeada7%22%2Ch2%3A2%7D%2C%22Field%20Exit%5Cn50%22%2C%7Bc%3A%22%23eeeeee%22%7D%2C%227%5Cn55%22%2C%228%5Cn26%22%2C%229%5Cn63%22%2C%7Bc%3A%22%23aeada7%22%7D%2C%22-%22%5D%2C%5B%22%5Cn73%22%2C%22%5Cn77%22%2C%7Bx%3A0.5%2Cw2%3A1.75%7D%2C%22Cap%20Lock%5Cn89%22%2C%7Bx%3A0.75%2Cc%3A%22%23eeeeee%22%7D%2C%22A%5Cn65%22%2C%22S%5Cn1%22%2C%22D%5Cn5%22%2C%22F%5Cn9%22%2C%22G%5Cn13%22%2C%22H%5Cn17%22%2C%22J%5Cn21%22%2C%22K%5Cn29%22%2C%22L%5Cn33%22%2C%22%3B%5Cn37%22%2C%22%27%5Cn41%22%2C%22%5C%5C%5Cn46%22%2C%7Bx%3A1%7D%2C%224%5Cn54%22%2C%225%5Cn25%22%2C%226%5Cn62%22%2C%7Bc%3A%22%23aeada7%22%2Ch2%3A3%7D%2C%22Field%20%2B%5Cn56%22%5D%2C%5B%22%5Cn72%22%2C%22%5Cn76%22%2C%7Bx%3A0.5%2Cw2%3A1.25%7D%2C%22Shift%5Cn88%22%2C%7Bx%3A0.25%2Cc%3A%22%23eeeeee%22%7D%2C%22%3C%5Cn64%22%2C%22Z%22%2C%22X%5Cn4%22%2C%22C%5Cn8%22%2C%22V%5Cn12%22%2C%22B%5Cn16%22%2C%22N%5Cn20%22%2C%22M%5Cn28%22%2C%22%2C%5Cn32%22%2C%22.%5Cn36%22%2C%22%2F%5Cn40%22%2C%7Bc%3A%22%23aeada7%22%2Cw2%3A1.5%7D%2C%22Shift%5Cn45%22%2C%7Bx%3A0.5%7D%2C%22Return%5Cn49%22%2C%7Bc%3A%22%23eeeeee%22%7D%2C%221%5Cn53%22%2C%222%5Cn24%22%2C%223%5Cn61%22%5D%2C%5B%7Bc%3A%22%23aeada7%22%7D%2C%22%5Cn84%22%2C%22%5Cn80%22%2C%7Bx%3A0.5%2Cw2%3A2%7D%2C%22Error%5Cn68%22%2C%7Bx%3A1%2Cc%3A%22%23eeeeee%22%2Cw2%3A9.75%7D%2C%22%5Cn44%22%2C%7Bx%3A8.75%2Cc%3A%22%23aeada7%22%2Cw2%3A2%7D%2C%22Enter%5Cn48%22%2C%7Bx%3A1%2Cc%3A%22%23eeeeee%22%2Cw2%3A2%7D%2C%220%5Cn52%22%2C%7Bx%3A1%2Cw2%3A2%7D%2C%22.%5Cn60%22%5D%5D)
Title: Re: Online keyboard-layout editor
Post by: Binge on Fri, 27 September 2013, 20:30:13
Fear the possibilities!

(http://i.imgur.com/MFRxX1d.png)
(http://i.imgur.com/osCrVsT.png)
(http://i.imgur.com/QmnXFqT.png)
Title: Re: Online keyboard-layout editor
Post by: ijprest on Sat, 28 September 2013, 00:44:10
I've updated the editor (http://www.keyboard-layout-editor.com/) 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.
Title: Re: Online keyboard-layout editor
Post by: ijprest on Sun, 29 September 2013, 18:52:11
Updated again, to v0.5. 

Changes:
-- Undo/redo support!
-- Switched to URLON-encoding (http://blog.vjeux.com/2011/javascript/urlon-url-object-notation.html) 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 (https://github.com/ijprest/keyboard-layout-editor/issues?page=1&state=open) 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.
Title: Re: Online keyboard-layout editor
Post by: ijprest on Mon, 14 October 2013, 01:58:46
I've updated my editor (http://www.keyboard-layout-editor.com/) to v0.6... here are the highlights:
Title: Re: Online keyboard-layout editor
Post by: mr_schnrub on Mon, 14 October 2013, 02:40:28
Awesome work!  :thumb:
Title: Re: Online keyboard-layout editor
Post by: CommonCurt on Mon, 14 October 2013, 04:02:33
Very cool. Thanks.
Title: Re: Online keyboard-layout editor
Post by: ijprest on Mon, 14 October 2013, 22:01:20
I've updated the editor (http://localhost:8080/kb.html) again, to v0.7 (yay for holiday weekends!).  Here are the highlights:

Here's a couple of samples to illustrate the new features:
Title: Re: Online keyboard-layout editor
Post by: TD22057 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
Title: Re: Online keyboard-layout editor
Post by: ijprest 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.  :)
Title: Re: Online keyboard-layout editor
Post by: MOZ on Tue, 15 October 2013, 03:12:25
This is looking better and better.
Title: Re: Online keyboard-layout editor
Post by: Krogenar on Tue, 15 October 2013, 07:23:28
This is maturing into a really great tool.
Title: Re: Online keyboard-layout editor
Post by: 0100010 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
Title: Re: Online keyboard-layout editor
Post by: ijprest 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.
Title: Re: Online keyboard-layout editor
Post by: 0100010 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
Title: Re: Online keyboard-layout editor
Post by: metalliqaz 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
Title: Re: Online keyboard-layout editor
Post by: csmith1991 on Sat, 09 November 2013, 19:18:53
Nothing to see here: http://www.keyboard-layout-editor.com/#/layouts/3318ba90120b061ffa159aec097c0165
Title: Re: Online keyboard-layout editor
Post by: metalliqaz 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?
Title: Re: Online keyboard-layout editor
Post by: csmith1991 on Sun, 10 November 2013, 21:47:30
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
Title: Re: Online keyboard-layout editor
Post by: metalliqaz on Sun, 10 November 2013, 22:01:28
:)
Title: Re: Online keyboard-layout editor
Post by: ijprest 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 (http://www.keyboard-layout-editor.com/) in the last couple of weeks.  The highlights:
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...
Title: Re: Online keyboard-layout editor
Post by: ijprest 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
Title: Re: Online keyboard-layout editor
Post by: Melvang 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.
Title: Re: Online keyboard-layout editor
Post by: metalliqaz 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
Title: Re: Online keyboard-layout editor
Post by: ijprest 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.  :)
Title: Re: Online keyboard-layout editor
Post by: codyeatworld on Tue, 12 November 2013, 22:56:20
Awesome creation sir.

You have a PM incoming!
Title: Re: Online keyboard-layout editor
Post by: Calcifar on Wed, 13 November 2013, 16:22:05
So useful.
Title: Re: Online keyboard-layout editor
Post by: csmith1991 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.
Title: Re: Online keyboard-layout editor
Post by: ijprest 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.
Title: Re: Online keyboard-layout editor
Post by: metalliqaz 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?
Title: Re: Online keyboard-layout editor
Post by: Krogenar 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!
Title: Re: Online keyboard-layout editor
Post by: engicoder 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.
Title: Re: Online keyboard-layout editor
Post by: jacobolus 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 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.
Title: Re: Online keyboard-layout editor
Post by: Oobly 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 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.
Title: Re: Online keyboard-layout editor
Post by: Krogenar 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.
Title: Re: Online keyboard-layout editor
Post by: Zorox 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?
Title: Re: Online keyboard-layout editor
Post by: Phenix 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)
Title: Re: Online keyboard-layout editor
Post by: rene_canlas 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

Title: Re: Online keyboard-layout editor
Post by: algernon 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.
Title: Re: Online keyboard-layout editor
Post by: xtrafrood 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
Title: Re: Online keyboard-layout editor
Post by: cribbit 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.
Title: Re: Online keyboard-layout editor
Post by: skullydazed 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.
Title: Re: Online keyboard-layout editor
Post by: cribbit 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 (http://steamcommunity.com/id/williemy) 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.
Title: Re: Online keyboard-layout editor
Post by: skullydazed 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. :/
Title: Re: Online keyboard-layout editor
Post by: cribbit 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.
Title: Re: Online keyboard-layout editor
Post by: Che.R.Ry 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
Title: Re: Online keyboard-layout editor
Post by: atomicus on Fri, 31 March 2017, 10:10:53
Any chance of a Varmilo 68 template? :)
Title: Re: Online keyboard-layout editor
Post by: Tobias Claren on Thu, 10 October 2019, 15:45:45
Hello.

Is this an alternative to "kbdedit"? Where is the complete keyboard? I only see the num pad.

I want to build a "keyboard" with other characters.
ASCII, but also Unicode. Is this possible with this online editor?
I can not install "Microsoft Keyboard Layout Creator", the software is too old :(.

Also for Android, i am looking for a solution.
In Android the best as a "text editor" internally changes the key mapping.
Then you do not have to change the keyboard layout awkward (back and forth, back and forth, back and forth).
That would also be a solution for Windows.
I do not need the characters in Word, Browser etc.

Perhaps, i have to open my own topic...


Thanks...
Title: Re: Online keyboard-layout editor
Post by: ErgoMacros on Thu, 10 October 2019, 18:16:38
Hi,
The "Preset" menu gives you lots of choices.
Type (or paste) any character you like into the field for a key... or look at the Character Picker menu.

Read the help and other clues scattered around the page and tabs.
'Luck!
Title: Re: Online keyboard-layout editor
Post by: Tobias Claren on Fri, 11 October 2019, 07:18:31
OK, I missed that :-[ .
Maybe it would be better to preset the large (today minimum standard) ISO 105 keyboard.

Maximum 105? Not even 108 (plus Sleep Wake and Power)? And there are keyboards with media buttons.

It may just be ease of use, but foreign keyboard layouts would be good.

Is this Editor only for the graphic layout?
Where can I assign a ASCII or unicode character to a button?
Title: Re: Online keyboard-layout editor
Post by: depletedvespene on Fri, 11 October 2019, 07:46:41
Use the HTML hex codes for non-ASCII characters. For example, add the euro sign as &#x20AC; — the advantage of this is that whatever you come up with, when you pass the raw data or a JSON file or whatever, encoding problems (UTF-8⇐⇒ISO8859-1, etc.) won't be an issue.


BTW, I got several international layouts coded into KLE raw data files, will I'll be happy to share for everyone.

Perhaps KLE could add a new option; load a physical layout (ANSI 105, ISO TKL, 75%, etc.) and another one to load the legends for a given national layout while keeping the physical layout unchanged.
Title: Re: Online keyboard-layout editor
Post by: ErgoMacros on Fri, 11 October 2019, 12:21:10
OK, I missed that :-[ .
Maybe it would be better to preset the large (today minimum standard) ISO 105 keyboard.

Maximum 105? Not even 108 (plus Sleep Wake and Power)? And there are keyboards with media buttons.
...

Big blue button adds keys... knock yourself out... and before you ask once added you can move them around to.
Select a key(s) use arrow keys to move.

Really, just play around. Try things out.
Thanks
Title: Re: Online keyboard-layout editor
Post by: Tobias Claren on Fri, 11 October 2019, 13:11:50
OK. I do not quite understand the phrase "knock yourself out". Not even the explanation in the "urbandictionary".

I do not know if the "Add Key" feature helps me.
I do not want to rewrite an existing keyboard.
I may want to build an experimental "keyboard".
Not useable. Except with a magnet on your fingertip, or a magnet stylus. But that is not the intended purpose.
The theoretical purpose is controversial, and can lead to incitement and insult.
I had the idea on the basis of an article (rather scientific essay) by Professor dr. Eckhard Kruse (computer science with specialization in physics and doctorate in the field of robotics and image processing).
With an old keyboard (electronics only) and reed contacts.

For this I need a new keyboard layout for Windows.
And if possible also for Android (more mobile).
Title: Re: Online keyboard-layout editor
Post by: xtrafrood on Fri, 11 October 2019, 13:37:49
OK. I do not quite understand the phrase "knock yourself out". Not even the explanation in the "urbandictionary".

I do not know if the "Add Key" feature helps me.
I do not want to rewrite an existing keyboard.
I may want to build an experimental "keyboard".
Not useable. Except with a magnet on your fingertip, or a magnet stylus. But that is not the intended purpose.
The theoretical purpose is controversial, and can lead to incitement and insult.
I had the idea on the basis of an article (rather scientific essay) by Professor dr. Eckhard Kruse (computer science with specialization in physics and doctorate in the field of robotics and image processing).
With an old keyboard (electronics only) and reed contacts.

For this I need a new keyboard layout for Windows.
And if possible also for Android (more mobile).

One can see that ijprest or one of the 12 contributors of the project accept pull requests (https://github.com/ijprest/keyboard-layout-editor/pulls) for layout presets. And if that's not an option for you then maybe submit an issue (https://github.com/ijprest/keyboard-layout-editor/issues) and perhaps even 'grease the wheel' with a contribution to the project for all their hard work and dedication.  Though as ErgoMacros mentioned, for most people it's much easier to just add extra keys, add legends to the keys, and adjust key position using your physical keyboard arrow keys or with the KLE UI X/Y coordinates.

Side note: just noticed Node.js is part of the build tool-set requirements.  My eyes are slowly opening to the potentials of Node..
Title: Re: Online keyboard-layout editor
Post by: Tobias Claren on Fri, 11 October 2019, 14:07:55
Sorry, but i can not find the field for the charakter code (ASCII, Unicode...).
Title: Re: Online keyboard-layout editor
Post by: ErgoMacros on Fri, 11 October 2019, 15:53:45
@csmertx
I thought you wanted more then 105 keys.
1. Start with the 105 key preset (from the menu)
2. Click the "Add Key" button 3 times. Now you have a 108 key keyboard.
"But it's not the layout I want" (I think I hear you say.)
3. Click on a single key, say the "Z". Use the up, down, left, right arrows on your keyboard to move the key image somewhere you want it.
4. Repeat for any other keys that are in the "wrong" place.
Done
 :thumb:

Code: [Select]
knock oneself out
To make a great effort, to apply oneself to the point of exhaustion. [do this a lot. Keep adding keys in your case]
This hyperbolic expression, alluding to knocking oneself unconscious with extreme effort...

Hyperbole is the use of exaggeration for effect. I don't mean make yourself unconscious, I mean make as many keys or keyboards as you like.
Title: Re: Online keyboard-layout editor
Post by: xtrafrood on Fri, 11 October 2019, 16:12:57
Tobias Claren
I thought you wanted more then 105 keys.
1. Start with the 105 key preset (from the menu)
2. Click the "Add Key" button 3 times. Now you have a 108 key keyboard.
"But it's not the layout I want" (I think I hear you say.)
3. Click on a single key, say the "Z". Use the up, down, left, right arrows on your keyboard to move the key image somewhere you want it.
4. Repeat for any other keys that are in the "wrong" place.
Done
 :thumb:

Code: [Select]
knock oneself out
To make a great effort, to apply oneself to the point of exhaustion. [do this a lot. Keep adding keys in your case]
This hyperbolic expression, alluding to knocking oneself unconscious with extreme effort...

Hyperbole is the use of exaggeration for effect. I don't mean make yourself unconscious, I mean make as many keys or keyboards as you like.

Good golly have mercy y'all are wilin' out.  You can do this!  Fixed that for you Ms. Mrs. or Mr. ErgoMacros.

Some unicode/ascii character table links: Xahlee - Unicode Index (Arrows, shapes, emoticons, etc.) (http://xahlee.info/comp/unicode_index.html), Unicode Table (multiple languages) (https://unicode-table.com/en/)
Title: Re: Online keyboard-layout editor
Post by: Tobias Claren on Thu, 17 October 2019, 13:03:46
No, 105 is not to less. More is OK, but not mandatory
Now also the "Microsoft Keaybord Layout Creator" works on my PC.
But "TAB", "SHIFT", "ENTER" etc. are not changeable O_o.

I do not understand why the optical "layout" is so important.
I do not want to print it. Why should you print it?
If you can print it, you also have to cut out the individual keys. Then the place on the graphic is unimportant.
Important to me is only the software layout.
The assignment of the keys.

Prof. Eckahrd Kruse has conducted Ouija sessions.
And wrote a scientific essay.
He is convinced of the reality of a paranormal phenomenon:
https://translate.google.com/translate?hl=de&sl=de&tl=en&u=https%3A%2F%2Fwww.bpv.ch%2Fblog%2Fouija-von-prof-dr-eckhard-kruse%2F

My "crazy idea" was to make a board with only reed contacts instead of buttons.
Reed contacts are very cheap. 50 pieces for $ 4.14, postage free.
An old keyboard costs "nothing" or a few dollars / euro used.
I'm not convinced that it works, it would be an attempt.

Like Prof. Kruse (Ouija experiments), Prof. Dr. med. Ian Stevenson (Reincarnation Research of the "Division of Perceptual Studies" of the University of Virginia, best case "James Leininger"), Sir Professor dr. Roger Penrose (Quantum Consciousness, Quantum Mind) etc., I am convinced of the reality of the hereafter (quantum physics).
But I'm not convinced that an Ouija board with reed contacts could work without manual operation. Without a hand touching a planchette. It would be an experiment.

The idea is, this professor Kruse (or other seemingly successful Ouija users) should use such a board, and the "Ghost" is supposed to close the reed contacts mechanically (not magnetically).
Without a human being touching a planchette.
Then no critic can say biased that it is the "ideomotor effect".
See the detailed results of Prof. Kruse.
Do you really think that all this comes from his subconscious? At the same time as his wife.

I still do not understand how to assign a keyboard key to a button on the screen (in the graphics in the browser) and assign that button a Unicode character.
Is this a language problem?



@csmertx
That is slang, I only understand half.

Maybe I can not create a keyboard layout for Windows with this website. I may have misunderstood the purpose of the offer. I do not want to create a graphic of a keyboard.
I just want to occupy the keys of a keyboard differently.
Then I solder reed contacts into a wooden board, and connect the reed contacts to the electronics of an old keyboard (if that works, wires on plastic contact foil is a problem).
Then maybe I label the reed contacts.
It may sound crazy, maybe the "Ghost" knows the assignment of the characters even without labeling. There are indications that this is so. That would have to be tested in experiments.
For example, People in scientific telepathy experiments were able to see images from three videos, even though the other person only saw one video.
Title: Re: Online keyboard-layout editor
Post by: xtrafrood on Thu, 17 October 2019, 13:34:59
Perhaps, i have to open my own topic...

This is a good idea.  A custom magnetic reed switch keyboard would be interesting.  However, collaboration would be easier for everyone if you create a new thread in [ Making Stuff Together ].