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 19:07:09 +01:00
parent e62db09f12
commit ed563d9a19
No known key found for this signature in database
4 changed files with 1121 additions and 459 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
experiments/keyboard/keyboard.erb Normal file
View file

@ -0,0 +1,47 @@
<!doctype html>
<html>
<head>
<style>
svg.keyboard {
/* height: 1000;
width: 400; */
}
.key {
fill: #eee;
stroke-linejoin: round;
stroke-width: .01px;
stroke: #aaa;
/* filter: drop-shadow( 0 .05px .05px rgba(0, 0, 0, .2)); ITS SLOW!!! */
}
.key:hover {
fill: #faa;
}
.keycap_text {
fill: black;
font: normal .3px arial;
pointer-events: none;
dominant-baseline: middle;
text-anchor: middle;
}
</style>
</head>
<body>
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 <%= total_h %> <%= total_v+1 %>" preserveAspectRatio="xMidYMid meet">
<defs>
<% keycaps.each do |name, options| %>
<polygon points="<%= options[:points] %>" id="<%= name %>"></polygon>
<% end %>
</defs>
<% keys.each do |key| %>
<g transform="translate(<%= key[:x] %>, <%= key[:y] %>)">
<use class="key" href="#<%= key[:keycap] %>"></use>
<text class="keycap_text"><%= key[:name] %></text>
</g>
<% end %>
</svg>
<script>
// document.querySelector('.keyboard').setAttribute('viewBox', '0 0 500 200')
</script>
</body>
</html>

994
experiments/keyboard/keyboard.html
View file

File diff suppressed because it is too large Load diff

44
experiments/keyboard/keyboard.rb Normal file → Executable file
View file

@ -1,7 +1,8 @@
#!/usr/bin/env ruby
require "erb"
keycaps = {
's1': {
width: 1,
},
'h1': {
width: 1,
points: '-0.44,-0.44 0.44,-0.44 0.44,0.44 -0.44,0.44',
@ -46,10 +47,39 @@ 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 => 'CARET 1 2 3 4 5 6 7 8 9 0 ß ´ BACKSPACE:h2 :.25 INS HOM PUP :.25 NUM / * -',
2.75 => 'TAB:h1.5 Q W E R T Z U I O P Ü + ENTER: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 Ö Ä # :.25 :1 :1 : 1 :.25 4 5 6',
4.75 => 'SHIFT:h1.25 < Y X C V B N M , . - SHIFT:h2.5 :.25 :1 ARU :1 :.25 1 2 3 ENTER:v2',
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'
}
keys = []
total_h = 0
total_v = 0
keyboard.each do |row_v, row_text|
row_h = 0
row_text.split.each do |element|
if element.start_with? ':'
row_h += element[1..].to_f
else
key, keycap = element.split(':')
keycap ||= :h1
keys.append({
name: key,
keycap: keycap,
x: row_h + keycaps[keycap.to_sym][:width]/2.0,
y: 0.5 + row_v,
})
row_h += keycaps[keycap.to_sym][:width]
end
end
total_h = [total_h, row_h].max
total_v = [total_v, row_v].max
end
p keys
html = ERB.new(File.read(File.join(__dir__, 'keyboard.erb'))).result(binding)
File.write(File.join(__dir__, 'keyboard.html'), html)

495
experiments/keyboard/keyboard_manual.html Normal file
View file

@ -0,0 +1,495 @@
<!doctype html>
<html>
<head>
<style>
svg.keyboard {
/* height: 1000;
width: 400; */
}
.key {
fill: #eee;
stroke-linejoin: round;
stroke-width: .01px;
stroke: #aaa;
/* filter: drop-shadow( 0 .05px .05px rgba(0, 0, 0, .2)); ITS SLOW!!! */
}
.key:hover {
fill: #faa;
}
.keycap_text {
fill: black;
font: normal .3px arial;
pointer-events: none;
dominant-baseline: middle;
text-anchor: middle;
}
</style>
</head>
<body>
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 22.5 8" preserveAspectRatio="xMidYMid meet">
<defs>
<polygon points="-0.44,-0.44 0.44,-0.44 0.44,0.44 -0.44,0.44" id="default"></polygon>
<polygon points="-0.565,-0.44 0.565,-0.44 0.565,0.44 -0.565,0.44" id="oneandaquarter"></polygon>
<polygon points="-0.69,-0.44 0.69,-0.44 0.69,0.44 -0.69,0.44" id="oneandhalf"></polygon>
<polygon points="-0.815,-0.44 0.815,-0.44 0.815,0.44 -0.815,0.44" id="oneandthreequarters"></polygon>
<polygon points="-0.94,-0.44 0.94,-0.44 0.94,0.44 -0.94,0.44" id="double"></polygon>
<polygon points="-1.19,-0.44 1.19,-0.44 1.19,0.44 -1.19,0.44" id="twoandahalf"></polygon>
<polygon points="-1.315,-0.44 1.315,-0.44 1.315,0.44 -1.315,0.44" id="twoandthreequarters"></polygon>
<polygon points="-0.44,-0.44 0.44,-0.44 0.44,1.44 -0.44,1.44" id="vdouble"></polygon>
<polygon points="-0.69,-0.44 0.69,-0.44 0.69,1.44 -0.44,1.44 -0.44,0.44 -0.69,0.44" id="enter"></polygon>
<polygon points="-3.19,-0.44 3.19,-0.44 3.19,0.44 -3.19,0.44" id="space65"></polygon>
</defs>
<g transform="translate(.5, 0)">
<g transform="translate(0, .5)">
<g transform="translate(0, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">ESC</text>
</g>
<g transform="translate(2, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F1</text>
</g>
<g transform="translate(3, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F2</text>
</g>
<g transform="translate(4, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F3</text>
</g>
<g transform="translate(5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F4</text>
</g>
<g transform="translate(6.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F5</text>
</g>
<g transform="translate(7.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F6</text>
</g>
<g transform="translate(8.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F7</text>
</g>
<g transform="translate(9.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F8</text>
</g>
<g transform="translate(11, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F9</text>
</g>
<g transform="translate(12, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F10</text>
</g>
<g transform="translate(13, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F11</text>
</g>
<g transform="translate(14, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F12</text>
</g>
<g transform="translate(15.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">PNT</text>
</g>
<g transform="translate(16.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">ROL</text>
</g>
<g transform="translate(17.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">PAU</text>
</g>
</g>
<g transform="translate(0, 1.75)">
<g transform="translate(0, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">^</text>
</g>
<g transform="translate(1, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">1</text>
</g>
<g transform="translate(2, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">2</text>
</g>
<g transform="translate(3, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">3</text>
</g>
<g transform="translate(4, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">4</text>
</g>
<g transform="translate(5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">5</text>
</g>
<g transform="translate(6, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">6</text>
</g>
<g transform="translate(7, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">7</text>
</g>
<g transform="translate(8, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">8</text>
</g>
<g transform="translate(9, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">9</text>
</g>
<g transform="translate(10, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">0</text>
</g>
<g transform="translate(11, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">ß</text>
</g>
<g transform="translate(12, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">´</text>
</g>
<g transform="translate(13.5, 0)">
<use class="key" href="#double"></use>
<text class="keycap_text">BACKSP</text>
</g>
<g transform="translate(15.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">INS</text>
</g>
<g transform="translate(16.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">HOM</text>
</g>
<g transform="translate(17.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">PUP</text>
</g>
<g transform="translate(18.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">NUM</text>
</g>
<g transform="translate(19.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">/</text>
</g>
<g transform="translate(20.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">*</text>
</g>
<g transform="translate(21.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">-</text>
</g>
</g>
<g transform="translate(0, 2.75)">
<g transform="translate(0.25, 0)">
<use class="key" href="#oneandhalf"></use>
<text class="keycap_text">↹</text>
</g>
<g transform="translate(1.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">Q</text>
</g>
<g transform="translate(2.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">W</text>
</g>
<g transform="translate(3.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">E</text>
</g>
<g transform="translate(4.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">R</text>
</g>
<g transform="translate(5.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">T</text>
</g>
<g transform="translate(6.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">Z</text>
</g>
<g transform="translate(7.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">U</text>
</g>
<g transform="translate(8.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">I</text>
</g>
<g transform="translate(9.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">O</text>
</g>
<g transform="translate(10.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">P</text>
</g>
<g transform="translate(11.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">Ü</text>
</g>
<g transform="translate(12.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">+</text>
</g>
<g transform="translate(13.75, 0)">
<use class="key" href="#enter"></use>
<text class="keycap_text">ENTER</text>
</g>
<g transform="translate(15.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">DEL</text>
</g>
<g transform="translate(16.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">END</text>
</g>
<g transform="translate(17.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">PDN</text>
</g>
<g transform="translate(18.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">7</text>
</g>
<g transform="translate(19.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">8</text>
</g>
<g transform="translate(20.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">9</text>
</g>
<g transform="translate(21.5, 0)">
<use class="key" href="#vdouble"></use>
<text class="keycap_text">+</text>
</g>
</g>
<g transform="translate(0, 3.75)">
<g transform="translate(0.375, 0)">
<use class="key" href="#oneandthreequarters"></use>
<text class="keycap_text">CAPS</text>
</g>
<g transform="translate(1.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">A</text>
</g>
<g transform="translate(2.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">S</text>
</g>
<g transform="translate(3.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">D</text>
</g>
<g transform="translate(4.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">F</text>
</g>
<g transform="translate(5.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">G</text>
</g>
<g transform="translate(6.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">H</text>
</g>
<g transform="translate(7.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">J</text>
</g>
<g transform="translate(8.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">K</text>
</g>
<g transform="translate(9.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">L</text>
</g>
<g transform="translate(10.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">Ö</text>
</g>
<g transform="translate(11.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">Ä</text>
</g>
<g transform="translate(12.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">#</text>
</g>
<g transform="translate(18.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">4</text>
</g>
<g transform="translate(19.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">5</text>
</g>
<g transform="translate(20.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">6</text>
</g>
</g>
<g transform="translate(0, 4.75)">
<g transform="translate(0.125, 0)">
<use class="key" href="#oneandaquarter"></use>
<text class="keycap_text">SHFT</text>
</g>
<g transform="translate(1.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text"><</text>
</g>
<g transform="translate(2.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">Y</text>
</g>
<g transform="translate(3.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">X</text>
</g>
<g transform="translate(4.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">C</text>
</g>
<g transform="translate(5.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">V</text>
</g>
<g transform="translate(6.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">B</text>
</g>
<g transform="translate(7.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">N</text>
</g>
<g transform="translate(8.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">M</text>
</g>
<g transform="translate(9.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">,</text>
</g>
<g transform="translate(10.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">.</text>
</g>
<g transform="translate(11.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">-</text>
</g>
<g transform="translate(13.125, 0)">
<use class="key" href="#twoandthreequarters"></use>
<text class="keycap_text">SHFT</text>
</g>
<g transform="translate(16.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">↑</text>
</g>
<g transform="translate(18.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">1</text>
</g>
<g transform="translate(19.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">2</text>
</g>
<g transform="translate(20.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">3</text>
</g>
<g transform="translate(21.5, 0)">
<use class="key" href="#vdouble"></use>
<text class="keycap_text">ENT</text>
</g>
</g>
<g transform="translate(0, 5.75)">
<g transform="translate(0.125, 0)">
<use class="key" href="#oneandaquarter"></use>
<text class="keycap_text">CTL</text>
</g>
<g transform="translate(1.375, 0)">
<use class="key" href="#oneandaquarter"></use>
<text class="keycap_text">SUP</text>
</g>
<g transform="translate(2.615, 0)">
<use class="key" href="#oneandaquarter"></use>
<text class="keycap_text">ALT</text>
</g>
<g transform="translate(6.5, 0)">
<use class="key" href="#space65"></use>
<text class="keycap_text">SPACE</text>
</g>
<g transform="translate(10.375, 0)">
<use class="key" href="#oneandaquarter"></use>
<text class="keycap_text">AGR</text>
</g>
<g transform="translate(11.625, 0)">
<use class="key" href="#oneandaquarter"></use>
<text class="keycap_text">SUP</text>
</g>
<g transform="translate(12.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">≡</text>
</g>
<g transform="translate(13.875, 0)">
<use class="key" href="#oneandaquarter"></use>
<text class="keycap_text">CTL</text>
</g>
<g transform="translate(15.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">←</text>
</g>
<g transform="translate(16.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">↓</text>
</g>
<g transform="translate(17.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">→</text>
</g>
<g transform="translate(19, 0)">
<use class="key" href="#double"></use>
<text class="keycap_text">0</text>
</g>
<g transform="translate(20.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">DEL</text>
</g>
</g>
</g>
</svg>
<script>
// document.querySelector('.keyboard').setAttribute('viewBox', '0 0 500 200')
</script>
</body>
</html>