Online Keyboard Layout Editor

Hey,

I just started working on a small keyboard layout 'editor'.
It often happens that images of layouts in the forums are downloaded, edited and then re-uploaded to show or explain something.

The basic idea: You edit/create a layout in the browser, copy the link and post it. It contains the layout as parameter and it is fully client-side. [And later you'll get a link to an image of the layout to embed here]

Current state:
Hacky, incomplete drag & drop and scroll-to-resize.
No adding/removing of keys, no import/export, no actual features yet. But it looks better :P
http://ne0.cc/kbeditor
Image


Original Post
Spoiler:
Image Example Layout (click!)

The syntax is really simple:
  • " " two spaces are used as separator between keys
  • LABEL::WIDTH is used to describe keys *
  • $$ begins a new row
  • __::WIDTH creates a gap (not drawn)
* if you need a ':' as label just add a space before the '::' (e.g ": ::1")

Ideas to implement:
  • Link-shortening
  • Highlight syntax errors
  • Multiline labels
  • Export as image (and serving images to embed them here)
  • Multiple layers (either on the legends or by toggling through the layers)
  • Easier input (not text based or at least better readability)

Do you think this is something that would be used? If yes, leave your ideas!
Keep in mind that I just started working on it like 2 hours ago :D
Last edited by ne0phyte on 11 Feb 2013, 13:40, edited 4 times in total.
ne0phyte
User avatar
Toast.

Unread post07 Feb 2013, 22:07

User avatar
X
ne0phyte
Toast.
 
Posts: 1054
Joined: 21 Nov 2012, 09:22
Location: Germany
Main keyboard: HHKB Pro 2
Main mouse: Logitech G400
Favorite switch: Topre 45g, MX Blue
DT Pro Member: 0003
 
 
ASCII stupid question, get a stupid ANSI
I love it and I want the forum to automatically display them.

I also just tried to use it and seem to have broken it though. :)

Edit: Seems I made a layout that is too wide.
Icarium
User avatar

Unread post07 Feb 2013, 23:16

User avatar
X
Icarium
 
Posts: 1638
Joined: 11 Jan 2012, 16:22
Location: Germany
Main keyboard: These fields just
Main mouse: opened my eyes
Favorite switch: I need to bring stuff to work
DT Pro Member: -
 
Icarium wrote:I love it and I want the forum to automatically display them.

I also just tried to use it and seem to have broken it though. :)

Edit: Seems I made a layout that is too wide.

Its a protoype, I've been developing lots of ideas in the DT irc channel.
It SHOULD scale the whole thing down if one row is too wide.

Well, anyways, I'll make it fully graphical (drag & drop), add link shortening, revisions and sharing/downloading as image.
Auto-embedding on DT would be cool, but we should wait until it is more than a fragile prototype :D

Edit: Scaling works for me
Last edited by ne0phyte on 07 Feb 2013, 23:51, edited 1 time in total.
ne0phyte
User avatar
Toast.

Unread post07 Feb 2013, 23:21

User avatar
X
ne0phyte
Toast.
 
Posts: 1054
Joined: 21 Nov 2012, 09:22
Location: Germany
Main keyboard: HHKB Pro 2
Main mouse: Logitech G400
Favorite switch: Topre 45g, MX Blue
DT Pro Member: 0003
 
 
ASCII stupid question, get a stupid ANSI
It seems to work in principle...here:

Esc::1 __::1 F1::1 F2::1 F3::1 F4::1 __::0.5 F5::1 F6::1 F7::1 F8::1 __::0.5 F9::1 F10::1 F11::1 F12::1$$
E/J::1 1::1 2::1 3::1 4::1 5::1 6::1 7::1 8::1 9::1 0::1 -=::1 ^~::1 |::1 Backspace::1 __::0.5 Insert::1 Home::1 PageUp::1^$$
Tab::1.5 Q::1 W::1 E::1 R::1 T::1 Y::1 U::1 I::1 O::1 P::1 @::1 {[::1 Enter::1.5 __::0.5 Home::1 PgUp::1$$
Caps Lock::1.75 A::1 S::1 D::1 F::1 G::1 H::1 J::1 K::1 L::1 ;: ::1 '"::1 Enter::2.25 End::1 PgDn::1$$
Shift::2.25 Z::1 X::1 C::1 V::1 B::1 N::1 M::1 <,::1 >.::1 /?::1 Shift::2.75 ^::1 Delete::1$$
Control::1.25 Meta::1.25 Alt::1.25 Space::6.25 Alt::1.25 Fn::1.5 Control::1.25 <::1 V::1 >::1$$
Icarium
User avatar

Unread post07 Feb 2013, 23:24

User avatar
X
Icarium
 
Posts: 1638
Joined: 11 Jan 2012, 16:22
Location: Germany
Main keyboard: These fields just
Main mouse: opened my eyes
Favorite switch: I need to bring stuff to work
DT Pro Member: -
 
Don't go overboard. First things first! :)
Try to make the strings shorter and convince webwit to add it to the board and then create a tag for the strings. This way we can use it and you can do the super awesome uber features later. :)
Icarium
User avatar

Unread post07 Feb 2013, 23:26

User avatar
X
Icarium
 
Posts: 1638
Joined: 11 Jan 2012, 16:22
Location: Germany
Main keyboard: These fields just
Main mouse: opened my eyes
Favorite switch: I need to bring stuff to work
DT Pro Member: -
 
Icarium wrote:Don't go overboard. First things first! :)
Try to make the strings shorter and convince webwit to add it to the board and then create a tag for the strings. This way we can use it and you can do the super awesome uber features later. :)

You're a genius! I didn't even think of adding the javascript to render it here.
That would save me a lot of traffic compared to generating images and serving them as bitmaps :D
ne0phyte
User avatar
Toast.

Unread post07 Feb 2013, 23:27

User avatar
X
ne0phyte
Toast.
 
Posts: 1054
Joined: 21 Nov 2012, 09:22
Location: Germany
Main keyboard: HHKB Pro 2
Main mouse: Logitech G400
Favorite switch: Topre 45g, MX Blue
DT Pro Member: 0003
 
 
ASCII stupid question, get a stupid ANSI
I like it, awesome!
webwit
User avatar
Wild Duck

Unread post07 Feb 2013, 23:30

User avatar
X
webwit
Wild Duck
 
Posts: 10303
Joined: 27 Jan 2011, 23:27
Location: The Netherlands
Main keyboard: HHKB Pro II
Favorite switch: IBM beam spring
DT Pro Member: 0000
 
 
So would you like to add it to the forum when it is ready?

Next I will think of a way to add ISO enters and the 1x2 keys on the numpad, after that a shorter syntax and a real parser.
One tricky problem will be the backwards compatibility. If features are added or something is changed the existing posted layouts may break.

Anyways, I will post my progress here :)
ne0phyte
User avatar
Toast.

Unread post07 Feb 2013, 23:37

User avatar
X
ne0phyte
Toast.
 
Posts: 1054
Joined: 21 Nov 2012, 09:22
Location: Germany
Main keyboard: HHKB Pro 2
Main mouse: Logitech G400
Favorite switch: Topre 45g, MX Blue
DT Pro Member: 0003
 
 
ASCII stupid question, get a stupid ANSI
If it's not too hard to add, I would. phpBB does have custom bb code support.
webwit
User avatar
Wild Duck

Unread post07 Feb 2013, 23:51

User avatar
X
webwit
Wild Duck
 
Posts: 10303
Joined: 27 Jan 2011, 23:27
Location: The Netherlands
Main keyboard: HHKB Pro II
Favorite switch: IBM beam spring
DT Pro Member: 0000
 
 
I know it's overused, but this is just awesome!
Great work!
Acanthophis
User avatar

Unread post07 Feb 2013, 23:59

User avatar
X
Acanthophis
 
Posts: 1341
Joined: 15 Apr 2011, 08:38
Location: Germany
DT Pro Member: -
 
ne0phyte wrote:So would you like to add it to the forum when it is ready?

Next I will think of a way to add ISO enters and the 1x2 keys on the numpad, after that a shorter syntax and a real parser.
One tricky problem will be the backwards compatibility. If features are added or something is changed the existing posted layouts may break.

Anyways, I will post my progress here :)

No problem with that!

Just add something like

Return::1.5:2:1.25
or
Return::1:2:1.25
or
Return::1.5:2:2.25
or
Enter::1:2

Or even better:

Return::J
Retrun::l
Return::L
Enter::I
+::I

or stepped keys:
Caps Lock::1.75S

BTW: How are you doing 2 lines, like

BACK
SPACE

or
$
4

:?

Code: Select all
Esc::1 __::1 F1::1 F2::1 F3::1 F4::1 __::0.5 F5::1 F6::1 F7::1 F8::1 __::0.5 F9::1 F10::1 F11::1 F12::1$$
E/J::1 1::1 2::1 3::1 4::1 5::1 6::1 7::1 8::1 9::1 0::1 -=::1 ^~::1 |::1 Backspace::1 __::0.5 Insert::1 Home::1 PageUp::1^$$
Tab::1.5 Q::1 W::1 E::1 R::1 T::1 Y::1 U::1 I::1 O::1 P::1 @::1 {[::1 Enter::1.5 __::0.5 Home::1 PgUp::1$$
Caps Lock::1.75 A::1 S::1 D::1 F::1 G::1 H::1 J::1 K::1 L::1 ;: ::1 '"::1 Enter::2.25 End::1 PgDn::1$$
Shift::2.25 Z::1 X::1 C::1 V::1 B::1 N::1 M::1 <,::1 >.::1 /?::1 Shift::2.75 ^::1 Delete::1$$
Control::1.25 Meta::1.25 Alt::1.25 Space::6.25 Alt::1.25 Fn::1.5 Control::1.25 <::1 V::1 >::1$$


The $$ is not necessary, because the end of line should mark the end of keyboard row.
7bit
User avatar

Unread post08 Feb 2013, 00:01

User avatar
X
7bit
 
Posts: 13642
Joined: 31 Jan 2011, 23:37
Location: Berlin, DE
Main keyboard: Tipro / IBM 3270 emulator
Main mouse: Logitech granite for SGI
Favorite switch: MX Lock
DT Pro Member: 0001
 
Actually if you can output an image mime type instead of a page with an image then it would be pretty easy to add, it would look something like:

Code: Select all
[layout]Esc::1 __::1 F1::1 F2::1 ... [/layout]

and the html phpBB can output would be something like:

Code: Select all
<img src="http://ne0.cc/laygen/#Esc%3A% ...">


Or we can host it if you don't want the traffic.

But if you plan something more elaborate like drag & drop or a construction kit, this simple solution wouldn't be sufficient.
webwit
User avatar
Wild Duck

Unread post08 Feb 2013, 00:07

User avatar
X
webwit
Wild Duck
 
Posts: 10303
Joined: 27 Jan 2011, 23:27
Location: The Netherlands
Main keyboard: HHKB Pro II
Favorite switch: IBM beam spring
DT Pro Member: 0000
 
 
webwit wrote:But if you plan something more elaborate like drag & drop or a construction kit

Now we are talking.
Acanthophis
User avatar

Unread post08 Feb 2013, 00:36

User avatar
X
Acanthophis
 
Posts: 1341
Joined: 15 Apr 2011, 08:38
Location: Germany
DT Pro Member: -
 
Even with a more comfortable, graphical editor I will output a simple text based format.
Oh and if the editor is on my site anyway I could also output shortened links like ne0.cc/kbeditor/JgfNs1 which would return an image.

Let me finish a basic editor first (like I said, the current state is just a prototype) and then we can talk about how to embed it here.
ne0phyte
User avatar
Toast.

Unread post08 Feb 2013, 01:23

User avatar
X
ne0phyte
Toast.
 
Posts: 1054
Joined: 21 Nov 2012, 09:22
Location: Germany
Main keyboard: HHKB Pro 2
Main mouse: Logitech G400
Favorite switch: Topre 45g, MX Blue
DT Pro Member: 0003
 
 
ASCII stupid question, get a stupid ANSI
Suggestion: Have a tiny javascript file that can be added to the board and that will display strings like that.
Then make the layout a link to your site that passes the string for the layout.

That way the javascript for the board doesn't have to change unless you add major features (and not if you work on the editor) and people can still get to your fancy editor in one click. The only downside is that the result will have to be copied back to the board but this seems like a pretty good solution traffic- and maintenancewise.
Icarium
User avatar

Unread post08 Feb 2013, 09:30

User avatar
X
Icarium
 
Posts: 1638
Joined: 11 Jan 2012, 16:22
Location: Germany
Main keyboard: These fields just
Main mouse: opened my eyes
Favorite switch: I need to bring stuff to work
DT Pro Member: -
 
actually I was working on something similar...



let's join!
matt3o
User avatar
-[°_°]-

Unread post08 Feb 2013, 09:42

User avatar
X
matt3o
-[°_°]-
 
Posts: 8566
Joined: 03 Sep 2012, 15:14
Location: Italy
Main keyboard: WhiteFox
Main mouse: Anywhere MX
Favorite switch: Anything, really
DT Pro Member: 0030
 
 
This signature intentionally left blank...
I suggest this as input format:
Code: Select all
\style TL
\color  :black:pearl
\color P:black:pebble
\color R:black:red

Esc:R !:1: @:2: #:3: $:4: %:5: ^:6: &:7: *:8: (:9: ):0: _:-: +:=: Back\ \ Space:P200 \gap:50 Num:Lock:P /:P *:P -:P
\tabarrows:P150 Q: W: E: R: T: Y: U: I: O: P: {:[: }:]: \gap:150 \gap:50 7: 8: 9: +:P
\lock:P175S A: S: D: F: G: H: J: K: L: \::;: ":': |:\\: Return:PJRET \gap:50 4: 5: 6: &:P
\shift:P125 >:<: Z: X: C: V: B: N: M: <:,: >:.: ?:/: \shift:P275 \gap:50 1: 2: 3:
Control:P150 \gap: Alt:P150 :700 Alt\ \ Gr:P150 \gap: Control:P150 \gap:50 0:Insert:200 .:Del: Enter:P200V

It handles color, size, text placement style, custom legends, like shift arrow etc.

How it is parsed:

Just split up by space
You will get things like
Code: Select all
:700
Alt\
\
Gr:P150
\gap:

Now put together the words which do not contain a colon (with the exception where : is preceded by \) until the last word contains a colon:
Code: Select all
:700
Alt\ \ Gr:P150
\gap:

Now split each line by :
Code: Select all
Alt\ \ Gr
P150

The last word (P150) is the color and size. If color is always 1 char, it is easy to split this up and look up color and size.
Any other words are text on the key cap. There could be arbitrarily many. Just place them according to the style (selected by \style).

In this case "Alt Gr" is the text.

:-)
7bit
User avatar

Unread post08 Feb 2013, 10:12

User avatar
X
7bit
 
Posts: 13642
Joined: 31 Jan 2011, 23:37
Location: Berlin, DE
Main keyboard: Tipro / IBM 3270 emulator
Main mouse: Logitech granite for SGI
Favorite switch: MX Lock
DT Pro Member: 0001
 
Looks good.
I'm working on the rendering right now, displaying up to 4 different letterings on a key with automatic line break and scaling to be precise.

I will start working on a parser when I'm finished with that.
ne0phyte
User avatar
Toast.

Unread post08 Feb 2013, 11:14

User avatar
X
ne0phyte
Toast.
 
Posts: 1054
Joined: 21 Nov 2012, 09:22
Location: Germany
Main keyboard: HHKB Pro 2
Main mouse: Logitech G400
Favorite switch: Topre 45g, MX Blue
DT Pro Member: 0003
 
 
ASCII stupid question, get a stupid ANSI
To show some progress, I updated the OP with the the current state.
ne0phyte
User avatar
Toast.

Unread post11 Feb 2013, 12:41

User avatar
X
ne0phyte
Toast.
 
Posts: 1054
Joined: 21 Nov 2012, 09:22
Location: Germany
Main keyboard: HHKB Pro 2
Main mouse: Logitech G400
Favorite switch: Topre 45g, MX Blue
DT Pro Member: 0003
 
 
ASCII stupid question, get a stupid ANSI
This is really awesome was hoping someone would put something like this together!

Managed to make my KBT Race 75%
gotbadger
User avatar

Unread post12 Feb 2013, 18:24

User avatar
X
gotbadger
 
Posts: 69
Joined: 27 Mar 2011, 19:47
Location: Newcastle, UK
Main keyboard: KBT Race
Favorite switch: mx red
DT Pro Member: -
 
Just a quick update:
The project isn't dead but I've been a bit short on time lately so I couldn't work on it much.
ne0phyte
User avatar
Toast.

Unread post04 Mar 2013, 14:35

User avatar
X
ne0phyte
Toast.
 
Posts: 1054
Joined: 21 Nov 2012, 09:22
Location: Germany
Main keyboard: HHKB Pro 2
Main mouse: Logitech G400
Favorite switch: Topre 45g, MX Blue
DT Pro Member: 0003
 
 
ASCII stupid question, get a stupid ANSI
ne0phyte wrote:Just a quick update:
The project isn't dead but I've been a bit short on time lately so I couldn't work on it much.

Any chance you will open source it and put the code on github or similar?
gotbadger
User avatar

Unread post12 Mar 2013, 16:19

User avatar
X
gotbadger
 
Posts: 69
Joined: 27 Mar 2011, 19:47
Location: Newcastle, UK
Main keyboard: KBT Race
Favorite switch: mx red
DT Pro Member: -
 
gotbadger wrote:
ne0phyte wrote:Just a quick update:
The project isn't dead but I've been a bit short on time lately so I couldn't work on it much.

Any chance you will open source it and put the code on github or similar?

The code is rather terrible, it was the first time that I really used javascript :roll:
You probably won't have too much fun with that as I had problems structuring my code and my solution is (at least to me) a bit ugly.
My plan is to rewrite it using Google Dart (which also compiles to Javascript and can be statically typed <3) but I am busy with my final project for my apprenticeship...
I would use Java but with all the critical security problems since Oracle took it over an Applet is out of question.

If you want it anyway I can create a GitHub repo for the prototype everone's using and one for the current state.
Last edited by ne0phyte on 12 Mar 2013, 16:46, edited 1 time in total.
ne0phyte
User avatar
Toast.

Unread post12 Mar 2013, 16:44

User avatar
X
ne0phyte
Toast.
 
Posts: 1054
Joined: 21 Nov 2012, 09:22
Location: Germany
Main keyboard: HHKB Pro 2
Main mouse: Logitech G400
Favorite switch: Topre 45g, MX Blue
DT Pro Member: 0003
 
 
ASCII stupid question, get a stupid ANSI
I liked the old one better.
Acanthophis
User avatar

Unread post12 Mar 2013, 16:46

User avatar
X
Acanthophis
 
Posts: 1341
Joined: 15 Apr 2011, 08:38
Location: Germany
DT Pro Member: -
 
Acanthophis wrote:I liked the old one better.

Probably because the new one is not even alpha.

The problem with the current concept of making it row based is, that its hard to handle >1 unit height keys. The rewrite would be based on a grid so that any size will work (and even offset keys like the arrow keys of the 1800).
But like I said I don't have the time to work on that right now.
ne0phyte
User avatar
Toast.

Unread post12 Mar 2013, 16:49

User avatar
X
ne0phyte
Toast.
 
Posts: 1054
Joined: 21 Nov 2012, 09:22
Location: Germany
Main keyboard: HHKB Pro 2
Main mouse: Logitech G400
Favorite switch: Topre 45g, MX Blue
DT Pro Member: 0003
 
 
ASCII stupid question, get a stupid ANSI
ne0phyte wrote:If you want it anyway I can create a GitHub repo for the prototype everone's using and one for the current state.

Would be cool if you could do that :)
gotbadger
User avatar

Unread post13 Mar 2013, 13:39

User avatar
X
gotbadger
 
Posts: 69
Joined: 27 Mar 2011, 19:47
Location: Newcastle, UK
Main keyboard: KBT Race
Favorite switch: mx red
DT Pro Member: -
 
Argh sorry, totally forgot about that. I will push the stuff to github when I get home.

EDIT: https://github.com/ne0phyte/kbd-layout-editor :oops:
laygen is the "old" one (http://ne0.cc/laygen) and KBEditor is the latest state I had here.
May contain 1 or 2 comments in total :lol:
ne0phyte
User avatar
Toast.

Unread post20 Mar 2013, 14:22

User avatar
X
ne0phyte
Toast.
 
Posts: 1054
Joined: 21 Nov 2012, 09:22
Location: Germany
Main keyboard: HHKB Pro 2
Main mouse: Logitech G400
Favorite switch: Topre 45g, MX Blue
DT Pro Member: 0003
 
 
ASCII stupid question, get a stupid ANSI
ne0phyte wrote:Argh sorry, totally forgot about that. I will push the stuff to github when I get home.
EDIT: https://github.com/ne0phyte/kbd-layout-editor :oops:
laygen is the "old" one (http://ne0.cc/laygen) and KBEditor is the latest state I had here.
May contain 1 or 2 comments in total :lol:

Having a look at this borrowing some of the ideas and trying to put together something a bit more robust/using a JS Framework. Will post again if I get anywhere :)

Also all those prototypes in utility.js ... :evil:
gotbadger
User avatar

Unread post26 Mar 2013, 10:17

User avatar
X
gotbadger
 
Posts: 69
Joined: 27 Mar 2011, 19:47
Location: Newcastle, UK
Main keyboard: KBT Race
Favorite switch: mx red
DT Pro Member: -
 
Like I said, JS noob here and I really didn't know what to put where...
Let me know when you got something to show, I will definitely have a look at it.

I don't think the row-based approach is good, though. My plan was do rewrite it grid-based.
Handling >1 height keys and slightly offset keys (like G80-1800 arrow keys) is most likely easier that way.
ne0phyte
User avatar
Toast.

Unread post26 Mar 2013, 11:14

User avatar
X
ne0phyte
Toast.
 
Posts: 1054
Joined: 21 Nov 2012, 09:22
Location: Germany
Main keyboard: HHKB Pro 2
Main mouse: Logitech G400
Favorite switch: Topre 45g, MX Blue
DT Pro Member: 0003
 
 
ASCII stupid question, get a stupid ANSI
My idea was to keep the layout 'code' as row based but add a height attribute. Then when positioning a key check if something is in the way from above and move it as needed. That way you have the simplicity of rows but can cope with multiline keys as a side effect of layout.

BTW for a JS 'noob' the canvas stuff is quite nice :)
gotbadger
User avatar

Unread post26 Mar 2013, 14:30

User avatar
X
gotbadger
 
Posts: 69
Joined: 27 Mar 2011, 19:47
Location: Newcastle, UK
Main keyboard: KBT Race
Favorite switch: mx red
DT Pro Member: -
 
Next

Who is online

Users browsing this forum: 0100010, DatOtherJosh, hasu, njm, salsaverde, snacksthecat, str8away, swampangel, zrrion and 58 guests