Giter VIP home page Giter VIP logo

kle_render's Introduction

KLE-Render

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.

Frequently Asked Questions

What layouts are supported?

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.

How do I include icons and novelties in my layout?

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.

Are custom fonts supported?

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.

What do I do if I get an error page when trying to render?

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.

Why don't my renders look like the ones on Massdrop?

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.

How do I turn my set design into a group buy?

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.

Templates

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

Sample Image

Nantucket Selectric (JSON)

Sample Render

kle_render's People

Contributors

cqcumbers 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

kle_render's Issues

Dependencies List

Please add a dependencies list ("requirements.txt") to this already awesome project.

Font of keyboard layout not used in render

The render uses its own font it seems. It doesn't take into consideration if a custom font is used for the layout. Regardless if the layout is provided via gist link or .json file.

API /post request not working

Hey,

I'm trying to work with the API but for some reason I don't get it working

Using this data

[{
		"backcolor": "#222222"
	},
	[{
			"c": "#7b9b48",
			"t": "#e4dedd",
			"p": "DSA",
			"a": 7,
			"f": 4
		},
		"ESC",
		{
			"x": 1,
			"c": "#483527",
			"f": 3
		},
		"F1",
		"F2",
		"F3",
		"F4",
		{
			"x": 0.5,
			"c": "#733636"
		},
		"F5",
		"F6",
		"F7",
		"F8",
		{
			"x": 0.5,
			"c": "#483527"
		},
		"F9",
		"F10",
		"F11",
		"F12",
		{
			"x": 0.25,
			"c": "#733636"
		},
		"PRINT",
		{
			"f": 2
		},
		"SCROLL LOCK",
		{
			"f": 3
		},
		"PAUSE"
	],
	[{
			"y": 0.5,
			"c": "#483527",
			"a": 5,
			"f": 5
		},
		"~\n`",
		"!\n1",
		"@\n2",
		"#\n3",
		"$\n4",
		"%\n5",
		"^\n6",
		"&\n7",
		"*\n8",
		"(\n9",
		")\n0",
		"&mdash;\n&ndash;",
		"+\n=",
		{
			"c": "#733636",
			"a": 7,
			"f": 3,
			"w": 2
		},
		"BACK SPACE",
		{
			"x": 0.25
		},
		"INS",
		"HOME",
		"PAGE UP",
		{
			"x": 0.25
		},
		"NUM LOCK",
		{
			"c": "#9e3a3a",
			"f": 6
		},
		"/",
		{
			"c": "#733636"
		},
		"*",
		"&ndash;"
	],
	[{
			"f": 3,
			"w": 1.5
		},
		"TAB",
		{
			"c": "#483527",
			"f": 8
		},
		"Q",
		"W",
		"E",
		"R",
		"T",
		"Y",
		"U",
		"I",
		"O",
		"P",
		{
			"a": 5,
			"f": 5
		},
		"{\n[",
		"}\n]",
		{
			"w": 1.5
		},
		"|\n\\",
		{
			"x": 0.25,
			"c": "#733636",
			"a": 7,
			"f": 3
		},
		"DEL",
		"END",
		{
			"c": "#332121"
		},
		"PAGE DOWN",
		{
			"x": 0.25,
			"c": "#483527",
			"f": 8
		},
		"7",
		"8",
		"9",
		{
			"c": "#733636",
			"f": 6,
			"h": 2
		},
		"+"
	],
	[{
			"f": 3,
			"w": 1.75
		},
		"CAPS LOCK",
		{
			"c": "#483527",
			"f": 8
		},
		"A",
		"S",
		"D",
		{
			"n": true
		},
		"F",
		"G",
		"H",
		{
			"n": true
		},
		"J",
		"K",
		"L",
		{
			"a": 5,
			"f": 5
		},
		":\n;",
		"\"\n'",
		{
			"c": "#7b9b48",
			"a": 7,
			"f": 3,
			"w": 2.25
		},
		"RETURN",
		{
			"x": 3.5,
			"c": "#483527",
			"f": 8
		},
		"4�",
		{
			"n": true
		},
		"5",
		"6"
	],
	[{
			"c": "#733636",
			"f": 3,
			"w": 2.25
		},
		"SHIFT",
		{
			"c": "#483527",
			"f": 8
		},
		"Z",
		"X",
		"C",
		"V",
		"B",
		"N",
		"M",
		{
			"a": 5,
			"f": 5
		},
		"<\n,",
		">\n.",
		"?\n/",
		{
			"c": "#733636",
			"a": 7,
			"f": 3,
			"w": 2.75
		},
		"SHIFT",
		{
			"x": 1.25,
			"f": 6
		},
		"&#9652;",
		{
			"x": 1.25,
			"c": "#483527",
			"f": 8
		},
		"1",
		"2",
		"3",
		{
			"c": "#733636",
			"f": 3,
			"h": 2
		},
		"ENTER"
	],
	[{
			"w": 1.25
		},
		"CTRL",
		{
			"w": 1.25
		},
		"WIN",
		{
			"w": 1.25
		},
		"ALT",
		{
			"c": "#483527",
			"p": "DSA SPACE",
			"w": 6.25
		},
		"",
		{
			"c": "#733636",
			"p": "DSA",
			"w": 1.25
		},
		"ALT",
		{
			"w": 1.25
		},
		"WIN",
		{
			"w": 1.25
		},
		"MENU",
		{
			"w": 1.25
		},
		"CTRL",
		{
			"x": 0.25,
			"f": 6
		},
		"&#9666;",
		"&#9662;",
		"&#9656;",
		{
			"x": 0.25,
			"c": "#483527",
			"f": 8,
			"w": 2
		},
		"0",
		"."
	]
]

to post to /api

but get this as response { "message": "Internal Server Error" }

Not sure if I'm doing something wrong, tried to clone the project but don't have really much experience with python and couldn't get local setup working.

Spaces omitted from legends like "Caps Lock"

KLE Caps Lock is rendered as KLE-Render Caps Lock.

This also makes it impossible to get a good representation of the popular format in which both legends on the digit and punctuation keys are placed in the top half of the keycap.

KLE Number Row is rendered as
KLE-Render Number Row, which doesn't look great without the spaces.

LICENSE?

What's the license for this repository?

I usually use MIT license to minimize hassle and complaints but if you have't decided yet, this page helps https://choosealicense.com/

Common Github practice is to create a text file at repo root named LICENSE with a copy of license details.

fonts case not respected

seems I have an issue...

I have a funny keyboard that had few layouts... unshifted, eg on typical qrt I have: qâσ and shifted QÂϕ... the render seems to think is AI... and shows me

image

Color Discrepancy

Rendered keycap colors vary significantly from those specified in KLE and are apparently incorrect.

In the KLE layout (first image), the specified keycap colors are #1a8ab7 (BFN) and #0073a2 (BFP). These values match both the Signature Plastics ABS color swatches (third image) and the sides of the keycaps as sampled by Photoshop. KLE is known to use possibly incorrectly lightened color values for the tops of the keycaps, which is of course one of the reasons KLE-Render is used.

The "Case Background" specified in KLE is also #1a8ab7 (BFN). Sampling the background color yields this value.

However, it is visually obvious that the colors used by KLE-Render (second image) don't match the specified colors. As expected due to lighting effects, sampling the keycap colors yields multiple values, but none of these appear close to those originally specified. Sampling the rendered background color yields #4B88B5.

layout
render
swatches

Backgrounds...

Thoroughly impressive :-)

Any chance of supporting the background textures? I saw a question on /r/ about background colours, but not textures.

thanks, Ian

Running KLE-Render locally on Windows 10

I'm not a Python user, and it took several tries to get this to work, so I'm not sure the following is correct if you're starting from scratch and not depending on leftovers from previous attempts. Any corrections would be appreciated.

To run KLE-Render locally on your Windows 10 system rather than online:

  1. Download the KLE-Render code from https://github.com/CQCumbers/kle_render/archive/master.zip.
  2. Unzip this file and note the location of the kle_render-master folder.
  3. Download Python 3.8 from https://www.python.org/ftp/python/3.8.6/python-3.8.6-amd64.exe and install..
  4. From a Windows command prompt run as Administrator:
    a. Install pipenv by entering "pip install pipenv".
    b. Navigate to the location of the kle_render-master folder by entering something like "cd C:\Users\Administrator\Desktop\KEYBOARDS\SOFTWARE\kle_render-master".
    c. Install KLE-Render by entering "pipenv install".
    d. Ignore the error message "ERROR: Couldn't install package: pillow-simd" if you get it.
    e. Run KLE-Render by entering "pipenv run python app.py".
    f. Note the web address in the message "Running on http://127.0.0.1:5000/".
  5. From your favorite web browser, go to the web address noted.

Please let me know if you try this and find that it works or doesn't.

Thanks.

Fonts

Thanks for getting KLE webfont to work...
I need to polish an update with some extra thingies.... screws, Mito-style glyphs, etc. Maybe next week.

I know the font you are using is generally recommended as very close to Gorton Modified, you might want to also consider Metropolis, which is open source. Also very close except the 3 and maybe the M.

https://github.com/chrismsimpson/Metropolis

Cheers, Ian

how to make it work

Hi

Can you maybe point me somewhere that shows how to make this run locally?

Using nginx, installed uwsgi but never used python as a backend before, and uwsgi docs seem written for people who already know what they're talking about ...

A Big Dummy's guide would be nice :-)

thanks, Ian

Saving

hi

Um, how do I save the generated image? RIght-click->Save as doesn't work...
Unless it's a browser issue.

thanks, Ian

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.