Online Keyboard Layout Editor

ne0phyte · 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

http://ne0.cc/kbeditor

Original Post

Spoiler:

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.

ne0phyte · 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

Edit: Scaling works for me

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

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.

ne0phyte · 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

webwit · 08 Feb 2013, 00:30

I like it, awesome!

ne0phyte · 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

webwit · 08 Feb 2013, 00:51

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

Acanthophis · 08 Feb 2013, 00:59

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

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.

webwit · 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.

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.

ne0phyte · 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.

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.

matt3o · 08 Feb 2013, 10:42

actually I was working on something similar...

let's join!

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.

ne0phyte · 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.

ne0phyte · 11 Feb 2013, 13:41

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

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%

ne0phyte · 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.

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?

ne0phyte · 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

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.

Acanthophis · 12 Mar 2013, 17:46

I liked the old one better.

ne0phyte · 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.

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

ne0phyte · 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

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

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

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

ne0phyte · 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.

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