KeyMason - CSS keyboard and keyset renderer

[KeyMason]

KeyMason is a hobby project of mine that has reached a point where it's quite usable, so I've decided it's time to reveal it.

What is it

A 2D renderer for keycaps with an easy to use layout system powered by CSS and HTML (zero Javascript required).

So if you know HTML and CSS, you can use it.

What is it for

Primary goal is to offer a way to render keyset in a nicer way than KLE, while not going into 3D due to complexity and offering a cell-shaded art style.

While developing, I found that it would also be perfect for keymapping interface for keyboard firmwares, but that's outside the scope of what I'm capable of.

Limitations

Since it's powered by CSS, it means to create the layout you need to hand-write the HTML code, this is actually my preferred way because I find it extremely easy and intuitive.

This does mean you need to know HTML and CSS to figure out how to use KeyMason.

I'm sure someone else can tack on a JavaScript powered user interface, and replicate all the niceties KLE has, but I'm out of gas at this point.

Documentation has been posted on the Github page, the demo shows 99% of the functionality, and reading the CSS will show you how everything fits together.

I will continuously improve the documentation, in the meantime please don't hesitate to ask any questions.

Closing

I've been working on this on and off for more than a year as a way to combat depression, because I made so many changes I don't want to write documentation until things solidify, but at this point I'm close to burning out so I have to put it out or the whole thing will peter off.

Update: I believe I have everything documented on Github, not very fancy but all the information should be there.

So here it is. Hope it's useful. Any feedback welcome.

Btw, check out the "Blueprint Mode". I'm quite proud of that one.

- Shaw

[suicidal_orange]

Looks great, must be really satisfying to see it up and running.  The lack of ANSI in the default layout made me chuckle too so thanks for that

[KeyMason]

Looks great, must be really satisfying to see it up and running.  The lack of ANSI in the default layout made me chuckle too so thanks for that

LOL, that's because I want to show how unusual keys are rendered and laid out.

[darkcl]

mind: Would be nice porting to react
body: No, you are too lazy

[AuthenticDanger]

DSA should have centered legends.

I'm excited to see progress on this project!

[fpazos]

I work as Front end developer and just started holidays. I would like to take a deeper look to it. It's a nice work.

Enviado desde mi Redmi Note 7 mediante Tapatalk

[KeyMason]

DSA should have centered legends.

I'm excited to see progress on this project!

Legend position is explicitly set via class names, only the default position is changed when switching profile (left to center).

It's very difficult to intelligently switch legend position since different profile align legends differently depending on the content and combination of legends, it's much easier and less prone to error to just make positioning explicit.

To make it easier to visualize, I've added another layout at the bottom with centered legends to properly showcase DSA/SA profiles.

You might need to clear cache to see the full changes for the demo page.

[fpazos]

Hi!
Keymason, I spent some time viewing this and developing a new functionality. It is a nice work, well organized and made. I liked that you worked using CSS4, that was my first time using it. If you like it, I can create a pull request to your repository.

Just finished working on a custom color selector for background color and legends, it uses jquery / js.
When you choose the Custom scheme, another form is visible and you can choose custom colors for legends and background.
The colors are the palette of GMK colors. It also has a color input where you can choose any other color at the end of the colors.
I also added buttons for saving/loading the custom color scheme.
I think everything works quite well despite I haven't spent much time testing it.

You can preview this on https://fpazos.github.io/keymason/keymason.html
Or view the source in: https://github.com/fpazos/keymason

[KeyMason]

Hi fpazos,

I really appreciate your efforts and kind words.

I've updated the documentation since you've forked the project to fix some mistakes.

Please check your PM.

Thanks