kbedit

[matt3o]

I started working on my keyboard designer. I wanted an easy and fun to use interface, no dependencies from other libraries (no bootstrap, no angular, no backbone, ...) and an open source license (GPL). It's in a very early development phase, the keys are not styled of course and I still miss the legends, but you can get an idea of where I'm going.

Put it in full screen and activate HD (1080 or better).

Very early development version on github: https://github.com/cubiq/kbedit

Early alpha access: http://lab.cubiq.org/kbedit

[scottc]

Excellent. I really like it. I'm also glad that it's GPL. Are you using v2 or v3? Either way, it's something I'd be very happy co contribute to.

[matt3o]

Excellent. I really like it. I'm also glad that it's GPL. Are you using v2 or v3? Either way, it's something I'd be very happy co contribute to.

thanks. GPLv3, even though I honestly don't know much about the difference with v2.

[Madhias]

Looks easy to use and you'll get a fast result, great! I love to use the http://www.keyboard-layout-editor.com/ but it is not as easy as your solution, and i'm always using there the text editor in the end instead of the mouse and the keycap settings.

[Muirium]

Ooooh! That's what we want!

[neverused]

That's awesome, very nice work!

[macmakkara]

Next make it print plate dwg for that layout you create!

[DiodeHead]

and kicad placement of the pad would be awsome too so you only have to make pcb tracings.

but i think this was discused earlier and kicad file format isn't consistent between versions making it dificult to do things like that.

[matt3o]

with a solid API we could:

- export DXF/SVG plates
- export 3d rendered mockups
- export realtime 3d previews (with threejs)
- export a compiled (or uncompiled) firmware
- export eagle or kicad files

I would need help though.

[matt3o]

There's not much to see yet, but I've pushed a very (very) early dev version on gihub.

You can find it here https://github.com/cubiq/kbedit

A demo can be found here http://lab.cubiq.org/kbedit

press 1 to create 1u keys. Use the handle in the marquee to resize the keys. DEL or backspace to delete keys.

The selection box works like this:

- drag from left to right (green rectangle): all included keys are selected
- drag from right to left (blue rectangle): all the keys that are touched by the selection box are selected

this is the default behavior in most CAD software.

[Muirium]

Nice! Feature Requests!!

• Copy and Paste
• Alt + Drag = Copy selection
• Drag for key resize from all 4 corners
• Drag from midpoint to resize in one dimenion

Or feel free to disregard. These are simply what I'm used to from graphics software, and seem to make sense here.

[matt3o]

Thanks for your feedback!

comments inline.

Nice! Feature Requests!!

• Copy and Paste : PLANNED
• Alt + Drag = Copy selection : this is nice actually. Not the highest priority, but nice to have
• Drag for key resize from all 4 corners PLANNED
• Drag from midpoint to resize in one dimenion Not sure about this, we have a snap grid, so it's already pretty easy to resize in just one direction

Or feel free to disregard. These are simply what I'm used to from graphics software, and seem to make sense here.

[stormbard]

Awesome. I'd be willing to pitch in some help on exporting schematics/PCB, this will give me an excuse to learn JavaScript and a project to work on. Also any plans to create a print function to print out the layout?

[matt3o]

I'll be working on the JSON file to save the keyboard layout tomorrow. With that we could export images, PDFs and more.

[Daniel Beardsmore]

Is there a way to make this play nicely with Firefox's type-to-find, i.e. block keystrokes from going both to the page and type to find?

[Daniel Beardsmore]

Shift-click is weird …

[Daniel Beardsmore]

One other thing — if you point at a key and press '1', you just get one key stacked on top of another (but in reverse Z order with the original key on top and the new key visibly above but deferring mouse clicks to the old one).

That would be a good way to hint that you want the key to appear adjacent to the previous one, as I could see from your video that creating stagger is a headache as the program forces all new keys to align to a 1 u outer grid grid that's invalid for most rows.

[matt3o]

Is there a way to make this play nicely with Firefox's type-to-find, i.e. block keystrokes from going both to the page and type to find?

yes, should be feasible.

Shift-click is weird …

you have to be more verbose here. the lack of details in a message of yours is worrying.

One other thing — if you point at a key and press '1', you just get one key stacked on top of another (but in reverse Z order with the original key on top and the new key visibly above but deferring mouse clicks to the old one).

no, it's that selected keys get higher Z-order, as soon as you deselect it goes behind.

That would be a good way to hint that you want the key to appear adjacent to the previous one, as I could see from your video that creating stagger is a headache as the program forces all new keys to align to a 1 u outer grid grid that's invalid for most rows.

I noticed that. I'll align keys to the sub-grid.

[scottc]

Hey matt3o, have you considered using NodeJS + browserify as a build tool? I'm not much of a Javascript guy, but I find it invaluable whenever I need to jump into client-side code.

[matt3o]

Hey matt3o, have you considered using NodeJS + browserify as a build tool? I'm not much of a Javascript guy, but I find it invaluable whenever I need to jump into client-side code.

well, at the moment it's not really needed. I'm for adding more layers only when needed.

as external dependencies I'm only using less (as dev-dependency) and jquery... and I'm actually thinking of dropping jquery.

[scottc]

Fair enough. I agree that it does seem like a bit of an act of over-engineering to introduce a build tool at this early stage. The code seems to be pretty modular as-is, so it would probably be overkill anyway.

What's the reason for getting rid of jQuery?

[Nuum]

What Daniel meant with "Shift-click is weird" is, I think, that the normal shortcut for selecting multiple things by clicking on them one by another is Ctrl+Click. I tried that combination too, but it didn't work and I concluded that that function wasn't build in (yet), I find Ctrl+Click more intuitive.

The function you show, where you pull a frame around some keys and only the keys that are completely within the frame doesn't seem to work in the dev demo. Instead it selects all keys the frame touches, but I guess it's just that the demo version isn't the version you show in your video.
I've somewhen used a software (maybe AutoCAD) where Dragging selected all elements touched and Alt+Dragging selected all elements fully included (or vice versa) or something like that, perhaps that would be helpful.

The ability to add legends to the keys would be nice, too, at least to me it would be easier to plan a keyboard then.

I like this tool, so far it's much more intuitive than the keyboard-layout-editor.

[Daniel Beardsmore]

I guess I figured without even conscious effort that you would know enough about your own creation to understand what shift-click does. Therefore it would stand to reason that you'd discover very quickly that it behaves very strangely. If not, it will be yet another "it works on my machine"/"no-one has ever reported that before" problems that make want to blow out someone else's brains.

Just shove a few keys on the Grid and try shift-clicking them all. Some will select, and some won't. The ones that do and don't select depend on the order you select them in, not on the actual position. It's really, really odd.

(This is the current Firefox in XP and 8.1, and a completely clean MSIE 11 in 8.1)

I noticed that. I'll align keys to the sub-grid.

you have to be more verbose here. the lack of details in a message of yours is worrying.

I think you're missing my point completely. Instead of wasting time screwing about trying to align keys to a grid correctly, just lay down one key precisely, then point at it and press a number: the next key will appear exactly adjacent to it. It's absurd that it's possible to stack a key on top of another key, so this seems by far the most logical response to an absurd request: use it a shortcut for a very common action. In fact, you could simply leave the cursor where it is and just keep pressing number keys: each press would simply find the next free space the size of the requested key, to the right of the key at which you are pointing. Rapid creation of large numbers of keys.

There's so many ways to do it though. Hold a key and drag to draw out a string of duplicate keys. R to repeat last request. etc. Watching your video was painful though.

[matt3o]

guys, please note that this is a very early dev version. Many features are not there yet (of course it will be possible to add legends) and others are still buggy (shift+click). Also I haven't really tested it on firefox, yet.

Maybe I should have waited a little before posting a public version, but I prefer to get early feedback and possibly early contributors (it's easier to work on a project when it just started).

@scottc, when you target modern browsers, I find jquery almost useless.

@nuum, there are two options for the selection, if you select from right to left and if you select from left to right. Give it a try (yes, it's different from the video, I'll update the video as well).

@ daniel, thanks for your feedback. I'll be working on it today I hope to fix most of the problems (and FF compatibility). I tried a version without the grid and I found it very frustrating. I will possibly add a grid snap toggle function.

please keep the feedback flowing!

[Nuum]

Ah, that's how selecting works, I think that's the way it works in AutoCAD, too, (and what I meant in my previous post, it's been a while since I used AutoCAD). It's a really nice feature!
I've tested the demo in Opera 12.17 on Win7 Pro 64bit, if that is important.

[matt3o]

I fixed some of the selection bugs and the issue with Firefox "type ahead find" functionality.

JS events are vicious, it took me more time than expected. Tomorrow I'll try to work on the "properties" and "groups" panels that will let you modify the legends and colors.

If you access it from the staging site (http://lab.cubiq.org/kbedit) you probably need to refresh a couple of times to kill the browser cache.

[Daniel Beardsmore]

Both confirmed.

[scottc]

If you access it from the staging site (http://lab.cubiq.org/kbedit) you probably need to refresh a couple of times to kill the browser cache.

You can always just ctrl-F5 to force reload, skipping the cache. This works on Firefox on Linux and Windows. On Mac OS it's probably something similar.

[beltet]

Wouldn't be nice if you could double click on a key and set the values for it? Thinking for easier creation of special keys like regular ISO, Big ass Enter and such.
Would also love export function to PCB files and dwg files.
Really nice btw. looking forward to a beta and final editor.

[matt3o]

added preliminary color palette. I love when a plan comes together but there's a lot of work to do

colors.JPG (24.6 KiB) Viewed 5769 times

also added light/dark theme