ruiqimao / qmkbuilder

Online GUI for QMK Firmware
http://kbfirmware.com
GNU General Public License v3.0
382 stars 123 forks source link

Rotated keys are displayed incorrectly when board is flipped. #64

Open cdemeijer opened 3 years ago

cdemeijer commented 3 years ago

I'm working on a handwired board with rotated keys. In order to make a checklist I thought it would be easy to have a flipped layout (just to print out a hard copy). Then I noticed something seemed off :)

image image

Will try to look if I can fix this 'issue' myself.

mullinmax commented 3 years ago

I'm not sure if this is helpful but it looks to me like the keys are rotating around an incorrect point. KLE's method for that is confusing at best

cdemeijer commented 3 years ago

The obvious workaround in my case would be to print the mirrored image but where's the fun in that? The two halves are rotated around the centers of the 'D' and 'K' keys.

I believe that the way to get this displayed correctly would be to use the centers of the keys and work with the css transform:rotate and transform:origin. I.e. let the browser handle the rendering. But I have a hard time trying to understand the math used to determine the correct location of the keys.

I'll simplify this case with a 6 key keyboard hopefully this weekend.

cdemeijer commented 3 years ago

Adding test raw KLE, picture, wiring and flipped wiring. Using 1U only keys.

[{x:5,a:7},"E"],
[{x:5},"F"],
[{r:8,rx:0.5,ry:1.5,y:-1.5,x:-0.5},"A"],
[{x:-0.5},"B"],
[{r:-8,rx:3.5,y:-1.5,x:-0.5},"C"],
[{x:-0.5},"D"]

image image image

cdemeijer commented 3 years ago

Fixing just the rotation doesn't quite cut it :/

image

cdemeijer commented 3 years ago

Yeah definitely a rotation point issue @mullinmax :+1: Rotating both 'columns' 45 degrees around the B and D centers makes the issue even more obvious. Also thought I could add the keymap, that provided another surprise:

image

Ooowwwkaaayyy.... :facepalm: :face_with_thermometer:

cdemeijer commented 3 years ago

Sorry, that last image was a lie. I was testing with modified code :(

mullinmax commented 3 years ago

I'll take a look at it later and see if I can't find the right formula. I think KLE sets it up oddly. It probably makes sense to write a function the just aligns keys based on the center of the switch and not the top left corner.

cdemeijer commented 3 years ago

Looking at the html it looks like KLE already does exactly that.

cdemeijer commented 3 years ago

This looks like more of a rewrite than I bargained for :/