Author Topic: KeyMason - CSS keyboard and keyset renderer  (Read 1663 times)

0 Members and 1 Guest are viewing this topic.

Offline KeyMason

  • Thread Starter
  • Posts: 21
    • Miragecraft
KeyMason - CSS keyboard and keyset renderer
« on: Sun, 28 June 2020, 16:07:43 »
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
« Last Edit: Sun, 28 June 2020, 20:27:35 by KeyMason »

Offline suicidal_orange

  • * Global Moderator
  • Posts: 3740
  • Location: England
Re: KeyMason - CSS keyboard and keyset renderer
« Reply #1 on: Sun, 28 June 2020, 16:18:47 »
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 :thumb:
                               
Ducky Zero, MX Reds    JD40, Jailhouse Blues           GH60
Soarer controller

Offline KeyMason

  • Thread Starter
  • Posts: 21
    • Miragecraft
Re: KeyMason - CSS keyboard and keyset renderer
« Reply #2 on: Sun, 28 June 2020, 16:22:54 »
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 :thumb:

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

Online darkcl

  • Posts: 9
Re: KeyMason - CSS keyboard and keyset renderer
« Reply #3 on: Sat, 04 July 2020, 16:08:38 »
mind: Would be nice porting to react
body: No, you are too lazy

Offline AuthenticDanger

  • Posts: 337
Re: KeyMason - CSS keyboard and keyset renderer
« Reply #4 on: Sat, 04 July 2020, 16:21:18 »
DSA should have centered legends.

I'm excited to see progress on this project!
F Keys belong on the left.

Offline fpazos

  • Posts: 81
Re: KeyMason - CSS keyboard and keyset renderer
« Reply #5 on: Sat, 04 July 2020, 16:55:12 »
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
 

Offline KeyMason

  • Thread Starter
  • Posts: 21
    • Miragecraft
Re: KeyMason - CSS keyboard and keyset renderer
« Reply #6 on: Mon, 06 July 2020, 19:56:46 »
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.
« Last Edit: Tue, 07 July 2020, 11:42:07 by KeyMason »