`. 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.
14 |
15 | ### Are custom fonts supported?
16 | 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](https://github.com/CQCumbers/kle_render/issues/7#issuecomment-880827473).
17 |
18 | ### What do I do if I get an error page when trying to render?
19 | 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.
20 |
21 | ### Why don't my renders look like the ones on Massdrop?
22 | 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](http://www.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.
23 |
24 | ### How do I turn my set design into a group buy?
25 | If you're looking to create a keycap set for a group buy livingspeedbump (creator of SA Jukebox) has a nice [guide](https://www.keychatter.com/2015/10/10/how-to-create-a-keycap-set-for-a-group-buy/) up on keychatter.
26 |
27 |
28 | ## Templates
29 | 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!
30 |
31 | - Example Kitting - [SA](http://www.keyboard-layout-editor.com/#/gists/6331e126fa6340711e53a0806d57cde5)/[GMK](http://www.keyboard-layout-editor.com/#/gists/a3a9791b1068f1100b151c33debf660f)
32 | - Mech Mini 2 (40%) - [SA](http://www.keyboard-layout-editor.com/#/gists/ea2a231112ffceae047494ac9a93e706)/[GMK](http://www.keyboard-layout-editor.com/#/gists/eed1f1854dda3999bcdd730f0143c627)
33 | - Klippe (60%) - [SA](http://www.keyboard-layout-editor.com/#/gists/f8369e8d6ae12c6d30bbf6db9731bca5)/[GMK](http://www.keyboard-layout-editor.com/#/gists/c2aedbf20e6a1ee5320a0f89b114d6da)
34 | - J-02 (HHKB) - [SA](http://www.keyboard-layout-editor.com/#/gists/1e01f5c46bcc3ba388f84d3a26f2e2eb)/[GMK](http://www.keyboard-layout-editor.com/#/gists/d5ef16b69b4ea15569d7a319bbf90a8e)
35 | - RAMA M65 (65%) - [SA](http://www.keyboard-layout-editor.com/#/gists/3ca3649e1d048134ddd0e835d1dd735b)/[GMK](http://www.keyboard-layout-editor.com/#/gists/4319599274157d2a0dd0e38328b76878)
36 | - GMMK Pro (75%) - [SA](http://www.keyboard-layout-editor.com/#/gists/c1a1d76bfcd236bc36e1c04c1e86a0d8)/[GMK](http://www.keyboard-layout-editor.com/#/gists/8ab0de3dd5dc804ecb052924a1c45be5)
37 | - JP01 (Arisu) - [SA](http://www.keyboard-layout-editor.com/#/gists/4f06c7adcce33046a463084af34aae60)/[GMK](http://www.keyboard-layout-editor.com/#/gists/de533ff9b29225bb65a6155151030673)
38 | - Mech27 (TKL) - [SA](http://www.keyboard-layout-editor.com/#/gists/10629d008a99d8d6eb6f8c59414b5dd8)/[GMK](http://www.keyboard-layout-editor.com/#/gists/6e6692825b348f40c040ca9750e469a8)
39 | - Espectro (96%) - [SA](http://www.keyboard-layout-editor.com/#/gists/6b996bea3ebf8a85866ddea606e25de4)/[GMK](http://www.keyboard-layout-editor.com/#/gists/6a03012a82e7bbca14db635142913a7)
40 | - Cypher (1800-like) - [SA](http://www.keyboard-layout-editor.com/#/gists/9b5535a779ae9f095da3b8a73a39a3cf)/[GMK](http://www.keyboard-layout-editor.com/#/gists/27bc8c126110952cc77c69ef972a7d0d)
41 | - Triangle (Full-size) - [SA](http://www.keyboard-layout-editor.com/#/gists/b86a688e6502fcc910d4b32ca2fa642e)/[GMK](http://www.keyboard-layout-editor.com/#/gists/11f7fc1a19c7f2210f560a93c8ab82a2)
42 | - Modifier Icons - [GMK](http://www.keyboard-layout-editor.com/#/gists/afc75b1f6ebee743ff0e2f589b0fc68d)
43 |
44 | ## Sample Image
45 | Nantucket Selectric ([JSON](http://www.keyboard-layout-editor.com/#/gists/4de8adb88cb4c45c2f43))
46 |
47 | 
48 |
--------------------------------------------------------------------------------
/app.py:
--------------------------------------------------------------------------------
1 | import json, github, io, flask_wtf, flask_wtf.file, wtforms, flask_cors
2 | from flask import Flask, Blueprint, send_file, render_template, flash, Markup
3 | from flask_restx import Api, Resource
4 | from keyboard import Keyboard
5 |
6 |
7 | app = Flask(__name__)
8 | app.config.from_object('config')
9 | flask_cors.CORS(app)
10 | github_api = github.Github(app.config['API_TOKEN'])
11 | blueprint = Blueprint('api', __name__, url_prefix='/api')
12 | api = Api(
13 | blueprint, version='1.0', title='KLE-Render API',
14 | description='Prettier images of Keyboard Layout Editor designs. URLs relative to this page'
15 | )
16 | kle_parser = api.parser()
17 | kle_parser.add_argument(
18 | 'data', required=True, location='json',
19 | help='Downloaded strict JSON from Raw Data tab of Keyboard Layout Editor'
20 | )
21 | app.register_blueprint(blueprint)
22 |
23 |
24 | def serve_pil_image(pil_img):
25 | img_io = io.BytesIO()
26 | pil_img.save(img_io, 'PNG', compress_level=3)
27 | img_io.seek(0)
28 | return send_file(img_io, mimetype='image/png')
29 |
30 |
31 | @api.route('/
24 |
25 |
26 |
29 |
104 |
26 | 
27 | KLE-Render
28 |
29 | 30 | Get prettier images of Keyboard Layout Editor designs 31 |
32 | 33 | 34 | {% if get_flashed_messages() %} 35 | {% for message in get_flashed_messages() %} 36 |
37 |
40 | Error! {{ message }}
41 |
42 | {% endfor %}
43 | {% else %}
44 |
45 |
48 | Try kbrenders for photorealistic keyboard renders in 2 hours or less!
49 |
50 | {% endif %}
51 |
52 |
53 |
54 |
78 |
79 |
80 |
81 |
103 |