cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
mwiegand 2022-11-19 20:00:51 +01:00
parent ed563d9a19
commit 010fb5df38
No known key found for this signature in database
3 changed files with 312 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
experiments/keyboard/keyboard.erb
View file

@ -27,7 +27,7 @@
</style>
</head>
<body>
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 <%= total_h %> <%= total_v+1 %>" preserveAspectRatio="xMidYMid meet">
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 <%= total_h %> <%= total_v %>" preserveAspectRatio="xMidYMid meet">
<defs>
<% keycaps.each do |name, options| %>
<polygon points="<%= options[:points] %>" id="<%= name %>"></polygon>

180
experiments/keyboard/keyboard.html
View file

@ -27,7 +27,7 @@
</style>
</head>
<body>
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 22.5 6.75" preserveAspectRatio="xMidYMid meet">
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 22.5 6.25" preserveAspectRatio="xMidYMid meet">
<defs>
<polygon points="-0.44,-0.44 0.44,-0.44 0.44,0.44 -0.44,0.44" id="h1"></polygon>
@ -132,447 +132,447 @@
<text class="keycap_text">PAU</text>
</g>
<g transform="translate(0.5, 2.25)">
<g transform="translate(0.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">^</text>
</g>
<g transform="translate(1.5, 2.25)">
<g transform="translate(1.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">1</text>
</g>
<g transform="translate(2.5, 2.25)">
<g transform="translate(2.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">2</text>
</g>
<g transform="translate(3.5, 2.25)">
<g transform="translate(3.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">3</text>
</g>
<g transform="translate(4.5, 2.25)">
<g transform="translate(4.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">4</text>
</g>
<g transform="translate(5.5, 2.25)">
<g transform="translate(5.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">5</text>
</g>
<g transform="translate(6.5, 2.25)">
<g transform="translate(6.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">6</text>
</g>
<g transform="translate(7.5, 2.25)">
<g transform="translate(7.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">7</text>
</g>
<g transform="translate(8.5, 2.25)">
<g transform="translate(8.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">8</text>
</g>
<g transform="translate(9.5, 2.25)">
<g transform="translate(9.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">9</text>
</g>
<g transform="translate(10.5, 2.25)">
<g transform="translate(10.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">0</text>
</g>
<g transform="translate(11.5, 2.25)">
<g transform="translate(11.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ß</text>
</g>
<g transform="translate(12.5, 2.25)">
<g transform="translate(12.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">´</text>
</g>
<g transform="translate(14.0, 2.25)">
<g transform="translate(14.0, 1.75)">
<use class="key" href="#h2"></use>
<text class="keycap_text">BACKSP</text>
</g>
<g transform="translate(15.75, 2.25)">
<g transform="translate(15.75, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">INS</text>
</g>
<g transform="translate(16.75, 2.25)">
<g transform="translate(16.75, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">HOM</text>
</g>
<g transform="translate(17.75, 2.25)">
<g transform="translate(17.75, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">PUP</text>
</g>
<g transform="translate(19.0, 2.25)">
<g transform="translate(19.0, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">NUM</text>
</g>
<g transform="translate(20.0, 2.25)">
<g transform="translate(20.0, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">/</text>
</g>
<g transform="translate(21.0, 2.25)">
<g transform="translate(21.0, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">*</text>
</g>
<g transform="translate(22.0, 2.25)">
<g transform="translate(22.0, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">-</text>
</g>
<g transform="translate(0.75, 3.25)">
<g transform="translate(0.75, 2.75)">
<use class="key" href="#h1.5"></use>
<text class="keycap_text">TAB</text>
</g>
<g transform="translate(2.0, 3.25)">
<g transform="translate(2.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Q</text>
</g>
<g transform="translate(3.0, 3.25)">
<g transform="translate(3.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">W</text>
</g>
<g transform="translate(4.0, 3.25)">
<g transform="translate(4.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">E</text>
</g>
<g transform="translate(5.0, 3.25)">
<g transform="translate(5.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">R</text>
</g>
<g transform="translate(6.0, 3.25)">
<g transform="translate(6.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">T</text>
</g>
<g transform="translate(7.0, 3.25)">
<g transform="translate(7.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Z</text>
</g>
<g transform="translate(8.0, 3.25)">
<g transform="translate(8.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">U</text>
</g>
<g transform="translate(9.0, 3.25)">
<g transform="translate(9.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">I</text>
</g>
<g transform="translate(10.0, 3.25)">
<g transform="translate(10.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">O</text>
</g>
<g transform="translate(11.0, 3.25)">
<g transform="translate(11.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">P</text>
</g>
<g transform="translate(12.0, 3.25)">
<g transform="translate(12.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Ü</text>
</g>
<g transform="translate(13.0, 3.25)">
<g transform="translate(13.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">+</text>
</g>
<g transform="translate(14.25, 3.25)">
<g transform="translate(14.25, 2.75)">
<use class="key" href="#enter_iso"></use>
<text class="keycap_text">ENT</text>
</g>
<g transform="translate(15.75, 3.25)">
<g transform="translate(15.75, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">DEL</text>
</g>
<g transform="translate(16.75, 3.25)">
<g transform="translate(16.75, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">END</text>
</g>
<g transform="translate(17.75, 3.25)">
<g transform="translate(17.75, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">PDN</text>
</g>
<g transform="translate(19.0, 3.25)">
<g transform="translate(19.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">7</text>
</g>
<g transform="translate(20.0, 3.25)">
<g transform="translate(20.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">8</text>
</g>
<g transform="translate(21.0, 3.25)">
<g transform="translate(21.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">9</text>
</g>
<g transform="translate(22.0, 3.25)">
<g transform="translate(22.0, 2.75)">
<use class="key" href="#v2"></use>
<text class="keycap_text">+</text>
</g>
<g transform="translate(0.875, 4.25)">
<g transform="translate(0.875, 3.75)">
<use class="key" href="#h1.75"></use>
<text class="keycap_text">CAPS</text>
</g>
<g transform="translate(2.25, 4.25)">
<g transform="translate(2.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">A</text>
</g>
<g transform="translate(3.25, 4.25)">
<g transform="translate(3.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">S</text>
</g>
<g transform="translate(4.25, 4.25)">
<g transform="translate(4.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">D</text>
</g>
<g transform="translate(5.25, 4.25)">
<g transform="translate(5.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F</text>
</g>
<g transform="translate(6.25, 4.25)">
<g transform="translate(6.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">G</text>
</g>
<g transform="translate(7.25, 4.25)">
<g transform="translate(7.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">H</text>
</g>
<g transform="translate(8.25, 4.25)">
<g transform="translate(8.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">J</text>
</g>
<g transform="translate(9.25, 4.25)">
<g transform="translate(9.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">K</text>
</g>
<g transform="translate(10.25, 4.25)">
<g transform="translate(10.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">L</text>
</g>
<g transform="translate(11.25, 4.25)">
<g transform="translate(11.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Ö</text>
</g>
<g transform="translate(12.25, 4.25)">
<g transform="translate(12.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Ä</text>
</g>
<g transform="translate(13.25, 4.25)">
<g transform="translate(13.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">#</text>
</g>
<g transform="translate(19.0, 4.25)">
<g transform="translate(19.0, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">4</text>
</g>
<g transform="translate(20.0, 4.25)">
<g transform="translate(20.0, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">5</text>
</g>
<g transform="translate(21.0, 4.25)">
<g transform="translate(21.0, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">6</text>
</g>
<g transform="translate(0.625, 5.25)">
<g transform="translate(0.625, 4.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">SHIFT</text>
</g>
<g transform="translate(1.75, 5.25)">
<g transform="translate(1.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text"><</text>
</g>
<g transform="translate(2.75, 5.25)">
<g transform="translate(2.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Y</text>
</g>
<g transform="translate(3.75, 5.25)">
<g transform="translate(3.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">X</text>
</g>
<g transform="translate(4.75, 5.25)">
<g transform="translate(4.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">C</text>
</g>
<g transform="translate(5.75, 5.25)">
<g transform="translate(5.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">V</text>
</g>
<g transform="translate(6.75, 5.25)">
<g transform="translate(6.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">B</text>
</g>
<g transform="translate(7.75, 5.25)">
<g transform="translate(7.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">N</text>
</g>
<g transform="translate(8.75, 5.25)">
<g transform="translate(8.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">M</text>
</g>
<g transform="translate(9.75, 5.25)">
<g transform="translate(9.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">,</text>
</g>
<g transform="translate(10.75, 5.25)">
<g transform="translate(10.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">.</text>
</g>
<g transform="translate(11.75, 5.25)">
<g transform="translate(11.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">-</text>
</g>
<g transform="translate(13.625, 5.25)">
<g transform="translate(13.625, 4.75)">
<use class="key" href="#h2.75"></use>
<text class="keycap_text">SHIFT</text>
</g>
<g transform="translate(16.75, 5.25)">
<g transform="translate(16.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ARU</text>
</g>
<g transform="translate(19.0, 5.25)">
<g transform="translate(19.0, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">1</text>
</g>
<g transform="translate(20.0, 5.25)">
<g transform="translate(20.0, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">2</text>
</g>
<g transform="translate(21.0, 5.25)">
<g transform="translate(21.0, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">3</text>
</g>
<g transform="translate(22.0, 5.25)">
<g transform="translate(22.0, 4.75)">
<use class="key" href="#v2"></use>
<text class="keycap_text">ENT</text>
</g>
<g transform="translate(0.625, 6.25)">
<g transform="translate(0.625, 5.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">CTL</text>
</g>
<g transform="translate(1.875, 6.25)">
<g transform="translate(1.875, 5.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">SUP</text>
</g>
<g transform="translate(3.125, 6.25)">
<g transform="translate(3.125, 5.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">ALT</text>
</g>
<g transform="translate(7.0, 6.25)">
<g transform="translate(7.0, 5.75)">
<use class="key" href="#h6.5"></use>
<text class="keycap_text">SPACE</text>
</g>
<g transform="translate(10.875, 6.25)">
<g transform="translate(10.875, 5.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">AGR</text>
</g>
<g transform="translate(12.125, 6.25)">
<g transform="translate(12.125, 5.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">SUP</text>
</g>
<g transform="translate(13.25, 6.25)">
<g transform="translate(13.25, 5.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">MENU</text>
</g>
<g transform="translate(14.375, 6.25)">
<g transform="translate(14.375, 5.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">CTL</text>
</g>
<g transform="translate(15.75, 6.25)">
<g transform="translate(15.75, 5.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ARL</text>
</g>
<g transform="translate(16.75, 6.25)">
<g transform="translate(16.75, 5.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ARD</text>
</g>
<g transform="translate(17.75, 6.25)">
<g transform="translate(17.75, 5.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ARR</text>
</g>
<g transform="translate(19.5, 6.25)">
<g transform="translate(19.5, 5.75)">
<use class="key" href="#h2"></use>
<text class="keycap_text">0</text>
</g>
<g transform="translate(21.0, 6.25)">
<g transform="translate(21.0, 5.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">DEL</text>
</g>

232
experiments/keyboard/keyboard.rb
View file

@ -1,6 +1,217 @@
#!/usr/bin/env ruby
require "erb"
# https://developer.valvesoftware.com/wiki/Bind
keys = {
escape: {
title: 'Escape',
keycap: 'ESC',
},
tab: {
title: 'Tabulator',
keycap: '↹',
},
capslock: {
title: 'Capslock',
keycap: '⇪',
},
shift: {
title: 'Shift',
keycap: '⇧',
},
ctrl: {
title: 'Control',
keycap: 'CTL',
},
alt: {
title: 'ALT',
keycap: 'ALT',
},
space: {
title: 'Space',
keycap: 'SPACE',
},
backspace: {
title: 'Backspace',
keycap: '⇦',
},
enter: {
title: 'Enter',
keycap: '↵',
},
semicolon: {
title: 'Semicolon',
keycap: ';',
},
lwin: {
title: 'Left Super',
keycap: '⊞',
},
rwin: {
title: 'Right Super',
keycap: '⊞',
},
apps: {
title: 'Menu',
keycap: '≡',
},
numlock: {
title: 'Numlock',
keycap: 'NUM',
},
scrolllock: {
title: 'Scrollock',
keycap: 'SCR',
},
uparrow: {
title: 'Arrow Up',
keycap: '↑',
},
downarrow: {
title: 'Arrow Down',
keycap: '↓',
},
leftarrow: {
title: 'Arrow Left',
keycap: '←',
},
rightarrow: {
title: 'Arrow Right',
keycap: '→',
},
ins: {
title: 'Insert',
keycap: 'INS',
},
del: {
title: 'Delete',
keycap: '⇨',
},
pgdn: {
title: 'Page Down',
keycap: '⇣',
},
pgup: {
title: 'Page Up',
keycap: '⇡',
},
home: {
title: 'Home',
keycap: '⌂',
},
end: {
title: 'End',
keycap: '⇥',
},
pause: {
title: 'Pause',
keycap: '⏸',
},
kp_end: {
title: 'Keypad 1 (End)',
keycap: '1',
},
kp_downarrow: {
title: 'Keypad 2 (Arrow Down)',
keycap: '2',
},
kp_pgdn: {
title: 'Keypad 3 (Page Down)',
keycap: '3',
},
kp_leftarrow: {
title: 'Keypad 4 (Arrow Left)',
keycap: '4',
},
kp_5: {
title: 'Keypad 5',
keycap: '5',
},
kp_rightarrow: {
title: 'Keypad 6 (Arrow Right)',
keycap: '6',
},
kp_home: {
title: 'Keypad 7 (Home)',
keycap: '7',
},
kp_uparrow: {
title: 'Keypad 8 (Arrow Up)',
keycap: '8',
},
kp_pgup: {
title: 'Keypad 9 (Page Up)',
keycap: '9',
},
kp_enter: {
title: 'Keypad Enter',
keycap: '↵',
},
kp_ins: {
title: 'Keypad 0',
keycap: '0',
},
kp_del: {
title: 'Keypad .',
keycap: '.',
},
kp_slash: {
title: 'Keypad /',
keycap: '/',
},
kp_multiply: {
title: 'Keypad *',
keycap: '*',
},
kp_minus: {
title: 'Keypad -',
keycap: '-',
},
kp_plus: {
title: 'Keypad +',
keycap: '+',
},
mwheeldown: {
title: 'Mousewheel Down',
keycap: '⇟',
},
mwheelup: {
title: 'Mousewheel Up',
keycap: '⇞',
},
mouse1: {
title: 'Mouse 1',
keycap: '🖱️1',
},
mouse2: {
title: 'Mouse 2',
keycap: '🖱️2',
},
mouse3: {
title: 'Mouse 3',
keycap: '🖱️3',
},
mouse4: {
title: 'Mouse 4',
keycap: '🖱️4',
},
mouse5: {
title: 'Mouse 5',
keycap: '🖱️5',
},
}
%(0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜß,.+-*/#^´).each_char do |char|
keys[char.to_sym] = {
title: char,
'keymap': char,
}
end
(1..12).each do |num|
keys[:"F#{num}"] = {
title: "Function #{num}",
'keymap': "F#{num}",
}
end
keycaps = {
'h1': {
@ -47,14 +258,14 @@ keycaps = {
keyboard = {
0 => 'ESC :1 F1 F2 F3 F4 :.5 F5 F6 F7 F8 :.5 F9 F10 F11 F12 :.25 PNT ROL PAU',
1.75 => '^ 1 2 3 4 5 6 7 8 9 0 ß ´ BACKSP:h2 :.25 INS HOM PUP :.25 NUM / * -',
2.75 => 'TAB:h1.5 Q W E R T Z U I O P Ü + ENT:enter_iso :.25 DEL END PDN :.25 7 8 9 +:v2',
3.75 => 'CAPS:h1.75 A S D F G H J K L Ö Ä # :1.25 :.25 :1 :1 :1 :.25 4 5 6',
4.75 => 'SHIFT:h1.25 < Y X C V B N M , . - SHIFT:h2.75 :.25 :1 ARU :1 :.25 1 2 3 ENT:v2',
5.75 => 'CTL:h1.25 SUP:h1.25 ALT:h1.25 SPACE:h6.5 AGR:h1.25 SUP:h1.25 MENU CTL:h1.25 :.25 ARL ARD ARR :.25 0:h2 DEL'
1.25 => '^ 1 2 3 4 5 6 7 8 9 0 ß ´ BACKSP:h2 :.25 INS HOM PUP :.25 NUM / * -',
2.25 => 'TAB:h1.5 Q W E R T Z U I O P Ü + ENT:enter_iso :.25 DEL END PDN :.25 7 8 9 +:v2',
3.25 => 'CAPS:h1.75 A S D F G H J K L Ö Ä # :1.25 :.25 :1 :1 :1 :.25 4 5 6',
4.25 => 'SHIFT:h1.25 < Y X C V B N M , . - SHIFT:h2.75 :.25 :1 ARU :1 :.25 1 2 3 ENT:v2',
5.25 => 'CTL:h1.25 SUP:h1.25 ALT:h1.25 SPACE:h6.5 AGR:h1.25 SUP:h1.25 MENU CTL:h1.25 :.25 ARL ARD ARR :.25 0:h2 DEL'
}
keys = []
keyboard_keys = []
total_h = 0
total_v = 0
@ -66,7 +277,7 @@ keyboard.each do |row_v, row_text|
else
key, keycap = element.split(':')
keycap ||= :h1
keys.append({
keyboard_keys.append({
name: key,
keycap: keycap,
x: row_h + keycaps[keycap.to_sym][:width]/2.0,
@ -79,7 +290,6 @@ keyboard.each do |row_v, row_text|
total_v = [total_v, row_v].max
end
p keys
html = ERB.new(File.read(File.join(__dir__, 'keyboard.erb'))).result(binding)
require "erb"
html = ERB.new(File.read(File.join(__dir__, 'keyboard.erb'))).result_with_hash({keys: keyboard_keys, total_h: total_h, total_v: total_v+1})
File.write(File.join(__dir__, 'keyboard.html'), html)