Code Monkey home page Code Monkey logo

keyboard-layout-editor's Introduction

keyboard-layout-editor

Keyboard-layout-editor.com (KLE) is a web application that enables the editing of keyboard-layouts, i.e., the position and appearance of each physical key.

The motivation for creating this application was a custom keyboard I was designing. I wanted to be able to experiment quickly with different possible layouts and visualize them easily. The existing graphics tools were capable enough, but cumbersome to use for this specific task.

As I sank further into the keyboard-enthusiast scene, I became aware of custom keycap sets that were being created by and for other enthusiasts. The ability to specify various details of the visual-appearance of the keycaps is an attempt to render these custom keycap sets as accurately as possible (within the constraints of HTML/CSS).

Want to interop with with KLE? Check out sister-project kle-serial, which includes code to deserialize saved layouts.

Links

Getting Started for Developers

Want to play around with the source? Install the tools, clone the repository, then build / test.

Required Tools:

Installing prerequisite components (once):

  • make install

Build:

  • make
  • make fonts

Test:

  • webdriver-manager update
  • webdriver-manager start
  • make test

Notes:

  • You can use any HTTP server for local development; I'm using an ancient version of Mongoose, but whatever you've got handy should work.
  • However, if you want to be able to log in to GitHub via OAuth (without hacking up the code and registering your own OAuth application), you will need to put the server at: http://localhost:8080/

keyboard-layout-editor's People

Contributors

alerque avatar bluenalgene avatar domgetter avatar iandoug avatar ijprest avatar ivanjonas avatar jasonm23 avatar jordiorlando avatar mikebell avatar mrkhdly avatar pdc avatar rswiernik avatar tylert avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

keyboard-layout-editor's Issues

Add ability to change KB background color.

If we're trying to see what the keys will look like on a particular keyboard, the light-gray of the editor-area can be distracting (especially if you're using dark-colored caps).

Add the ability to change the background color of the keyboard area.

Add support for key 'prototypes'

A prototype would be a set of properties that would be applied to a key by using the name of the prototype, e.g.,

{proto:"modifier"}, "Shift"
  • There would be a "default" keycap prototype, used by default. This would allow very quick changes to the entire layout.
  • Prototype would only allow properties that 'cascade' to the next key (e.g., color, etc.), and not single-use properties (e.g., label, position, size).
  • The selected prototype will also cascade to the next key.
  • Prototypes would be editable in the editor, somehow.
  • Prototypes would be rendered as caps in the editor.
  • Selecting a prototype would apply it to the selected key(s).

Add support for 'windowed' keycaps.

Some caps (caps-lock, et al, especially) will have little windowed areas that allow an LED to shine through. It would be nice to be able to specify this window.

Note that the windows are often centered on the bottom of the key-cap, but not always!, e.g., for some caps-lock keys. Will need a comprehensive way to specify the window size & position.

Cannot set stepping via w

You can't achieve stepping by setting a keycap to its desired width, then reducing w to be less than w2. This does not even work when Stepped is checked.

Add the ability to reference an external image/icon as a keycap logo.

Some layouts may want to use custom icons on key caps. e.g., the DSA-retro set used the Commodore logo on the Windows-key, and may sets include a "GEEK HACK" custom key.

Since we can't possibly anticipate everything that everybody may want, add the ability to reference an externally hosted image/icon/SVG file.

Select a range of keys by holding SHIFT

It would be nice to be able to select an entire range of keys by selecting the first key, then holding SHIFT and selecting the last key in the range.

Perhaps Shift+J, Shift+K should also extend the existing selection.

Due to the way keys are laid-out in memory, I suspect this would have to be a right-to-left, then top-to-bottom operation.

Need some larger font sizes.

Some vintage doubleshot keyboards used very large fonts on their keycaps... (need photo). Suggest increasing font-size limit to 7 or 9.

Stepping is unclear

It's not clear what stepping does โ€” only after careful examination of the raw data did it become clear that I've got to set different primary and secondary widths to get a stepped keycap.

Vertical shading for convex keycaps

Keycap shading is presently only horizontal concave. There needs to be a vertical convex option for space bar and for (e.g.) the convex numeric keypad 0 on Realforce keyboards.

Add an auto-layout feature to remove overlaps

When moving or otherwise making changes that are disruptive to the layout, you often wind up with overlapping keys, and these can be annoying to fix manually.

Add a button to the toolbar to automatically resolve these overlapping keys, but pushing keys rightward/downward as necessary.

Reduce the size of the permalink URLs

The current permalink URLs are really long, despite efforts to use a 'lenient' JSON format.

  • Consider further simplifying the JSON format, or using a non-JSON format altogether.
  • Consider a less-strict URL-encoding of the JSON data.
  • Consider using a database-backed hash of the JSON data for permalinks.

Support specification of keycap profiles & row-numbers

It would be nice if we could specify the profile of a key, e.g.:

  • Signature-plastics profiles (DSA, DCS, etc.), Cherry vs. OEM, other manufacturers.
  • The row-number (for those profiles that require it).

Ideally, we'd render the keys differently to simulate the profile:

  • Cylindrical caps could be rendered with a linear gradient; spherical caps could be rendered with a radial gradient.
  • Different rows could maybe alter the margins.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.