Online Keyboard Layout Editor

User avatar
ne0phyte
Toast.

07 Feb 2013, 23:07

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, 14:40, edited 4 times in total.

User avatar
Icarium

08 Feb 2013, 00:16

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.

User avatar
ne0phyte
Toast.

08 Feb 2013, 00:21

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 08 Feb 2013, 00:51, edited 1 time in total.

User avatar
Icarium

08 Feb 2013, 00:24

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$$

User avatar
Icarium

08 Feb 2013, 00:26

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

User avatar
ne0phyte
Toast.

08 Feb 2013, 00:27

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

User avatar
webwit
Wild Duck

08 Feb 2013, 00:30

I like it, awesome!

User avatar
ne0phyte
Toast.

08 Feb 2013, 00:37

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

User avatar
webwit
Wild Duck

08 Feb 2013, 00:51

If it's not too hard to add, I would. phpBB does have custom bb code support.

User avatar
Acanthophis

08 Feb 2013, 00:59

I know it's overused, but this is just awesome!
Great work!

User avatar
7bit

08 Feb 2013, 01:01

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.

User avatar
webwit
Wild Duck

08 Feb 2013, 01:07

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.

User avatar
Acanthophis

08 Feb 2013, 01:36

webwit wrote:But if you plan something more elaborate like drag & drop or a construction kit
Now we are talking.

User avatar
ne0phyte
Toast.

08 Feb 2013, 02:23

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.

User avatar
Icarium

08 Feb 2013, 10:30

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.

User avatar
matt3o
-[°_°]-

08 Feb 2013, 10:42

actually I was working on something similar...
let's join!

User avatar
7bit

08 Feb 2013, 11:12

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.

:-)

User avatar
ne0phyte
Toast.

08 Feb 2013, 12:14

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.

User avatar
ne0phyte
Toast.

11 Feb 2013, 13:41

To show some progress, I updated the OP with the the current state.

User avatar
gotbadger

12 Feb 2013, 19:24

This is really awesome was hoping someone would put something like this together!

Managed to make my KBT Race 75%

User avatar
ne0phyte
Toast.

04 Mar 2013, 15:35

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.

User avatar
gotbadger

12 Mar 2013, 17:19

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?

User avatar
ne0phyte
Toast.

12 Mar 2013, 17:44

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, 17:46, edited 1 time in total.

User avatar
Acanthophis

12 Mar 2013, 17:46

I liked the old one better.

User avatar
ne0phyte
Toast.

12 Mar 2013, 17:49

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.

User avatar
gotbadger

13 Mar 2013, 14:39

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

User avatar
ne0phyte
Toast.

20 Mar 2013, 15:22

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:

User avatar
gotbadger

26 Mar 2013, 11:17

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:

User avatar
ne0phyte
Toast.

26 Mar 2013, 12:14

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.

User avatar
gotbadger

26 Mar 2013, 15:30

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

Post Reply

Return to “Workshop”