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:59:48 +01:00
parent e245c934df
commit 4a799b09e7
No known key found for this signature in database
3 changed files with 121 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
experiments/keyboard/keyboard.erb
View file

@ -24,6 +24,12 @@
dominant-baseline: middle;
text-anchor: middle;
}
.keycap_text.known {
fill: #000;
}
.keycap_text.unknown {
fill: #888;
}
</style>
</head>
<body>
@ -36,7 +42,7 @@
<% keys.each do |key| %>
<g transform="translate(<%= key[:x] %>, <%= key[:y] %>)">
<use class="key" href="#<%= key[:keycap] %>"></use>
<text class="keycap_text"><%= key[:symbol] %></text>
<text class="keycap_text <%= key[:is_known] ? 'known' : 'unknown' %>"><%= key[:label] %></text>
</g>
<% end %>
</svg>

216
experiments/keyboard/keyboard.html
View file

@ -24,6 +24,12 @@
dominant-baseline: middle;
text-anchor: middle;
}
.keycap_text.known {
fill: #000;
}
.keycap_text.unknown {
fill: #888;
}
</style>
</head>
<body>
@ -54,527 +60,527 @@
<g transform="translate(0.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ESC</text>
<text class="keycap_text known">ESC</text>
</g>
<g transform="translate(2.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F1</text>
<text class="keycap_text known">F1</text>
</g>
<g transform="translate(3.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F2</text>
<text class="keycap_text known">F2</text>
</g>
<g transform="translate(4.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F3</text>
<text class="keycap_text known">F3</text>
</g>
<g transform="translate(5.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F4</text>
<text class="keycap_text known">F4</text>
</g>
<g transform="translate(7.0, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F5</text>
<text class="keycap_text known">F5</text>
</g>
<g transform="translate(8.0, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F6</text>
<text class="keycap_text known">F6</text>
</g>
<g transform="translate(9.0, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F7</text>
<text class="keycap_text known">F7</text>
</g>
<g transform="translate(10.0, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F8</text>
<text class="keycap_text known">F8</text>
</g>
<g transform="translate(11.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F9</text>
<text class="keycap_text known">F9</text>
</g>
<g transform="translate(12.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F10</text>
<text class="keycap_text known">F10</text>
</g>
<g transform="translate(13.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F11</text>
<text class="keycap_text known">F11</text>
</g>
<g transform="translate(14.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F12</text>
<text class="keycap_text known">F12</text>
</g>
<g transform="translate(15.75, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">PNT</text>
<text class="keycap_text unknown">PNT</text>
</g>
<g transform="translate(16.75, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ROL</text>
<text class="keycap_text unknown">ROL</text>
</g>
<g transform="translate(17.75, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">⏸</text>
<text class="keycap_text known">⏸</text>
</g>
<g transform="translate(0.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">^</text>
<text class="keycap_text known">^</text>
</g>
<g transform="translate(1.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">1</text>
<text class="keycap_text known">1</text>
</g>
<g transform="translate(2.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">2</text>
<text class="keycap_text known">2</text>
</g>
<g transform="translate(3.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">3</text>
<text class="keycap_text known">3</text>
</g>
<g transform="translate(4.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">4</text>
<text class="keycap_text known">4</text>
</g>
<g transform="translate(5.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">5</text>
<text class="keycap_text known">5</text>
</g>
<g transform="translate(6.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">6</text>
<text class="keycap_text known">6</text>
</g>
<g transform="translate(7.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">7</text>
<text class="keycap_text known">7</text>
</g>
<g transform="translate(8.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">8</text>
<text class="keycap_text known">8</text>
</g>
<g transform="translate(9.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">9</text>
<text class="keycap_text known">9</text>
</g>
<g transform="translate(10.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">0</text>
<text class="keycap_text known">0</text>
</g>
<g transform="translate(11.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ß</text>
<text class="keycap_text known">ß</text>
</g>
<g transform="translate(12.5, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">´</text>
<text class="keycap_text known">´</text>
</g>
<g transform="translate(14.0, 1.75)">
<use class="key" href="#h2"></use>
<text class="keycap_text">⇦</text>
<text class="keycap_text known">⇦</text>
</g>
<g transform="translate(15.75, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">INS</text>
<text class="keycap_text known">INS</text>
</g>
<g transform="translate(16.75, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">⌂</text>
<text class="keycap_text known">⌂</text>
</g>
<g transform="translate(17.75, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">PUP</text>
<text class="keycap_text unknown">PUP</text>
</g>
<g transform="translate(19.0, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">NUM</text>
<text class="keycap_text known">NUM</text>
</g>
<g transform="translate(20.0, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">/</text>
<text class="keycap_text known">/</text>
</g>
<g transform="translate(21.0, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">*</text>
<text class="keycap_text known">*</text>
</g>
<g transform="translate(22.0, 1.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">-</text>
<text class="keycap_text known">-</text>
</g>
<g transform="translate(0.75, 2.75)">
<use class="key" href="#h1.5"></use>
<text class="keycap_text">↹</text>
<text class="keycap_text known">↹</text>
</g>
<g transform="translate(2.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Q</text>
<text class="keycap_text known">Q</text>
</g>
<g transform="translate(3.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">W</text>
<text class="keycap_text known">W</text>
</g>
<g transform="translate(4.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">E</text>
<text class="keycap_text known">E</text>
</g>
<g transform="translate(5.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">R</text>
<text class="keycap_text known">R</text>
</g>
<g transform="translate(6.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">T</text>
<text class="keycap_text known">T</text>
</g>
<g transform="translate(7.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Z</text>
<text class="keycap_text known">Z</text>
</g>
<g transform="translate(8.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">U</text>
<text class="keycap_text known">U</text>
</g>
<g transform="translate(9.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">I</text>
<text class="keycap_text known">I</text>
</g>
<g transform="translate(10.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">O</text>
<text class="keycap_text known">O</text>
</g>
<g transform="translate(11.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">P</text>
<text class="keycap_text known">P</text>
</g>
<g transform="translate(12.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Ü</text>
<text class="keycap_text known">Ü</text>
</g>
<g transform="translate(13.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">+</text>
<text class="keycap_text known">+</text>
</g>
<g transform="translate(14.25, 2.75)">
<use class="key" href="#enter_iso"></use>
<text class="keycap_text">↵</text>
<text class="keycap_text known">↵</text>
</g>
<g transform="translate(15.75, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">⇨</text>
<text class="keycap_text known">⇨</text>
</g>
<g transform="translate(16.75, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">⇥</text>
<text class="keycap_text known">⇥</text>
</g>
<g transform="translate(17.75, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">PDN</text>
<text class="keycap_text unknown">PDN</text>
</g>
<g transform="translate(19.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">7</text>
<text class="keycap_text known">7</text>
</g>
<g transform="translate(20.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">8</text>
<text class="keycap_text known">8</text>
</g>
<g transform="translate(21.0, 2.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">9</text>
<text class="keycap_text known">9</text>
</g>
<g transform="translate(22.0, 2.75)">
<use class="key" href="#v2"></use>
<text class="keycap_text">+</text>
<text class="keycap_text known">+</text>
</g>
<g transform="translate(0.875, 3.75)">
<use class="key" href="#h1.75"></use>
<text class="keycap_text">⇪</text>
<text class="keycap_text known">⇪</text>
</g>
<g transform="translate(2.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">A</text>
<text class="keycap_text known">A</text>
</g>
<g transform="translate(3.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">S</text>
<text class="keycap_text known">S</text>
</g>
<g transform="translate(4.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">D</text>
<text class="keycap_text known">D</text>
</g>
<g transform="translate(5.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F</text>
<text class="keycap_text known">F</text>
</g>
<g transform="translate(6.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">G</text>
<text class="keycap_text known">G</text>
</g>
<g transform="translate(7.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">H</text>
<text class="keycap_text known">H</text>
</g>
<g transform="translate(8.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">J</text>
<text class="keycap_text known">J</text>
</g>
<g transform="translate(9.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">K</text>
<text class="keycap_text known">K</text>
</g>
<g transform="translate(10.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">L</text>
<text class="keycap_text known">L</text>
</g>
<g transform="translate(11.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Ö</text>
<text class="keycap_text known">Ö</text>
</g>
<g transform="translate(12.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Ä</text>
<text class="keycap_text known">Ä</text>
</g>
<g transform="translate(13.25, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">#</text>
<text class="keycap_text known">#</text>
</g>
<g transform="translate(19.0, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">4</text>
<text class="keycap_text known">4</text>
</g>
<g transform="translate(20.0, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">5</text>
<text class="keycap_text known">5</text>
</g>
<g transform="translate(21.0, 3.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">6</text>
<text class="keycap_text known">6</text>
</g>
<g transform="translate(0.625, 4.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">SHIFT</text>
<text class="keycap_text unknown">SHIFT</text>
</g>
<g transform="translate(1.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text"><</text>
<text class="keycap_text unknown"><</text>
</g>
<g transform="translate(2.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Y</text>
<text class="keycap_text known">Y</text>
</g>
<g transform="translate(3.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">X</text>
<text class="keycap_text known">X</text>
</g>
<g transform="translate(4.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">C</text>
<text class="keycap_text known">C</text>
</g>
<g transform="translate(5.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">V</text>
<text class="keycap_text known">V</text>
</g>
<g transform="translate(6.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">B</text>
<text class="keycap_text known">B</text>
</g>
<g transform="translate(7.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">N</text>
<text class="keycap_text known">N</text>
</g>
<g transform="translate(8.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">M</text>
<text class="keycap_text known">M</text>
</g>
<g transform="translate(9.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">,</text>
<text class="keycap_text known">,</text>
</g>
<g transform="translate(10.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">.</text>
<text class="keycap_text known">.</text>
</g>
<g transform="translate(11.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">-</text>
<text class="keycap_text known">-</text>
</g>
<g transform="translate(13.625, 4.75)">
<use class="key" href="#h2.75"></use>
<text class="keycap_text">SHIFT</text>
<text class="keycap_text unknown">SHIFT</text>
</g>
<g transform="translate(16.75, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">↑</text>
<text class="keycap_text known">↑</text>
</g>
<g transform="translate(19.0, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">1</text>
<text class="keycap_text known">1</text>
</g>
<g transform="translate(20.0, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">2</text>
<text class="keycap_text known">2</text>
</g>
<g transform="translate(21.0, 4.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">3</text>
<text class="keycap_text known">3</text>
</g>
<g transform="translate(22.0, 4.75)">
<use class="key" href="#v2"></use>
<text class="keycap_text">↵</text>
<text class="keycap_text known">↵</text>
</g>
<g transform="translate(0.625, 5.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">CTL</text>
<text class="keycap_text known">CTL</text>
</g>
<g transform="translate(1.875, 5.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">SUP</text>
<text class="keycap_text unknown">SUP</text>
</g>
<g transform="translate(3.125, 5.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">ALT</text>
<text class="keycap_text known">ALT</text>
</g>
<g transform="translate(7.0, 5.75)">
<use class="key" href="#h6.5"></use>
<text class="keycap_text">SPACE</text>
<text class="keycap_text known">SPACE</text>
</g>
<g transform="translate(10.875, 5.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">AGR</text>
<text class="keycap_text unknown">AGR</text>
</g>
<g transform="translate(12.125, 5.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">SUP</text>
<text class="keycap_text unknown">SUP</text>
</g>
<g transform="translate(13.25, 5.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">≡</text>
<text class="keycap_text known">≡</text>
</g>
<g transform="translate(14.375, 5.75)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">CTL</text>
<text class="keycap_text known">CTL</text>
</g>
<g transform="translate(15.75, 5.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">←</text>
<text class="keycap_text known">←</text>
</g>
<g transform="translate(16.75, 5.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">↓</text>
<text class="keycap_text known">↓</text>
</g>
<g transform="translate(17.75, 5.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">→</text>
<text class="keycap_text known">→</text>
</g>
<g transform="translate(19.5, 5.75)">
<use class="key" href="#h2"></use>
<text class="keycap_text">0</text>
<text class="keycap_text known">0</text>
</g>
<g transform="translate(21.0, 5.75)">
<use class="key" href="#h1"></use>
<text class="keycap_text">⇨</text>
<text class="keycap_text known">⇨</text>
</g>
</svg>

5
experiments/keyboard/keyboard.rb
View file

@ -364,7 +364,7 @@ keyboard = {
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'
5.25 => 'CTL:h1.25 SUP:h1.25 ALT:h1.25 SPC:h6.5 AGR:h1.25 SUP:h1.25 MENU CTL:h1.25 :.25 ARL ARD ARR :.25 0:h2 DEL'
}
keyboard_keys = []
@ -381,7 +381,8 @@ keyboard.each do |row_v, row_text|
key = keys.find{|k| k[:short] == short}
keycap ||= :h1
keyboard_keys.append({
symbol: key ? key[:keycap] : short,
is_known: !!key,
label: key ? key[:keycap] : short,
keycap: keycap,
x: row_h + keycaps[keycap.to_sym][:width]/2.0,
y: 0.5 + row_v,