Get prettier images of Keyboard Layout Editor designs
This project uses Python, Pillow, and Flask to serve up more realistic visualizations of custom mechanical keyboard layouts. It works by stretching, tinting, and tiling base images of a 1u keycap. Check it out at kle-render.herokuapp.com. You can also see a sample render of Nantucket Selectric below.
KLE-Render should support any layout created with keyboard-layout-editor though some may not render exactly as expected. Specifically, certain very uncommon unicode glyphs may not be displayed. Custom legend images take up the full width of the keycap and only one per key can be used. The base images are only of SA and GMK keycaps, but most layouts in DSA, DCS, OEM, or even beamspring profiles should still look pretty close. Sculpted row profiles are not supported; everything is assumed to be uniform row 3.
Many common icons and symbols are part of Unicode, and can be rendered simply by pasting the appropriate character into the legend text boxes in keyboard-layout-editor. To match the default GMK icons, you can copy characters from the GMK Icons Template. Less common icons are available as part of the Font Awesome or Keyboard-Layout-Editor icon sets under the Character Picker dropdown.
For truly custom legends though, you'll have to use an html image tag, like this one <img src='http://i.imgur.com/QtgaNKa.png' width='30'>. The src parameter here should point to a PNG image with your legend on a transparent background. Note that KLE-Render does not support combining these custom legend images with regular text on the same key, and ignores any sizing or position info - the image is always resized to cover the entire top of the keycap. For reference see the SA and GMK kitting templates below.
There is limited support for custom fonts, but this should be considered an advanced feature. Most layouts won't work without some changes to the custom styling. For more details on how and why see issue #7.
If you get an internal server error when attempting to render a layout, first make sure that your JSON input is downloaded properly or that your gist url actually exists. If the error persists, please contact me with the gist link or JSON that is causing the problem and I may be able to fix it. I am CQ_Cumbers on reddit and geekhack.
This tool can generate more realistic renders of arbitrary keyboard layouts, but because it works by stretching and tinting grayscale images, there are many limitations on realism as compared to actual 3D renders. If you're looking for fast and photorealistic visualizations kbrenders.com can be a useful resource. For certain custom work, however, you may still have to do post-processing in photoshop or commission a professional like thesiscamper to work with you.
If you're looking to create a keycap set for a group buy livingspeedbump (creator of SA Jukebox) has a nice guide up on keychatter.
The following templates have their legend sizes and keycap profiles pre-configured for accurate rendering. Use them as a starting point for your own designs!
- Example Kitting - SA/GMK
- Mech Mini 2 (40%) - SA/GMK
- Klippe (60%) - SA/GMK
- J-02 (HHKB) - SA/GMK
- RAMA M65 (65%) - SA/GMK
- GMMK Pro (75%) - SA/GMK
- JP01 (Arisu) - SA/GMK
- Mech27 (TKL) - SA/GMK
- Espectro (96%) - SA/GMK
- Cypher (1800-like) - SA/GMK
- Triangle (Full-size) - SA/GMK
- Modifier Icons - GMK
Nantucket Selectric (JSON)
