keyboard-layout-editor icon indicating copy to clipboard operation
keyboard-layout-editor copied to clipboard

Different keys form/shape/sizes/placements

Open c933103 opened this issue 6 years ago • 10 comments

I was trying to create a layout with various special buttons but I experienced limitation in doing so. Please consider adding the capability to suppoprt creating layout with

  • Buttons with different shapes, like circular power button, hexangon shaped honeycomb styled keycaps, etc.
  • Buttons of different nature. For instance an analog slider, trackpoint, trackball, mouse buttons, fingerprint sensor, touchpad, touchbar, joystick, and all that, and maybe different type of keys and switches like I think usually the mouse buttons on laptop are of different form from keys within the typing part of the keyboard.
  • 3D layout with buttons on the side/surrounding of a keyboard, and also with curvatures on different surface.
  • Inclusion of non-keys on keyboard like smartcard readers, drawing pad, and such.
  • Keys with different heights.

c933103 avatar Sep 15 '18 17:09 c933103

Buttons with different shapes, like circular power button, hexangon shaped honeycomb styled keycaps, etc.

I guess this can already be achieved from the Custom Styles tab although it is not very user-friendly. Probably a border-radius parameter for each keycap would be nice.

i5ar avatar Feb 26 '19 13:02 i5ar

I would like to model a Teletype keyboard with completely circular keys, except the space bar.

larsbrinkhoff avatar Mar 07 '19 10:03 larsbrinkhoff

Cool keyboard. :)

It won't be perfect, but until there's a ROUND profile, you can simulate it with some custom CSS:

.keyborder, .keytop { border-radius:1000px !important; }

ijprest avatar Mar 07 '19 20:03 ijprest

Thanks, that's pretty good!

larsbrinkhoff avatar Mar 08 '19 03:03 larsbrinkhoff

I updated my layout to use the custom style:
http://www.keyboard-layout-editor.com/#/gists/96b4be746c5441af6bb595be10944277

The CTRL and SHIFT keys should be slightly larger. Is there a way to do this too?

larsbrinkhoff avatar Mar 08 '19 07:03 larsbrinkhoff

@larsbrinkhoff Of course, just select them and change their height and width in the properties tab.

alerque avatar Mar 08 '19 10:03 alerque

Of course! Thanks.

larsbrinkhoff avatar Mar 08 '19 10:03 larsbrinkhoff

Expanding upon this, is there any way to apply custom styles to only a certain profile, or even create custom profiles?

I tried using the classes the profiles use (which i found through inspect element), but it seemed to have no effect.

ogaskell avatar Nov 12 '20 18:11 ogaskell

Expanding upon this, is there any way to apply custom styles to only a certain profile, or even create custom profiles?

I tried using the classes the profiles use (which i found through inspect element), but it seemed to have no effect.

I, too was hoping to achieve this. It would be nice to put the "round" profile on one key for say, an encoder.

will-hedges avatar Jan 24 '21 18:01 will-hedges

To those whom it may concern, I came up with a workaround:

First, you set Key Color to something unique, like #ff0000 (pure red).

Then, you match this color (and it's auto-generated lighter version), applying the border radius and restoring the colors:

.keyborder[style*="#ff0000"] {
    border-radius: 50% !important;
    background-color: #ccc !important;
}
.keytop[style*="#ff4223"] {
    border-radius: 50% !important;
    background-color: #fff !important;
}

And thus:
image

YellowAfterlife avatar Mar 31 '24 13:03 YellowAfterlife