multiple changes:

- layout detector
- browser helper to create layout maps
- DE, ES, GR, RU, US maps
This commit is contained in:
Jörg Breitbart
2026-05-16 18:08:10 +02:00
parent 0d8996395c
commit c0007301c1
9 changed files with 777 additions and 14 deletions
+270
View File
@@ -0,0 +1,270 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Keyboard Layout</title>
<style>
body {
background: #f8f8f8;
font-size: 16px;
}
#keyinput {
border: 1px solid #aaa;
padding: 8px;
display: inline-block;
margin: 2px;
border-radius: 4px;
box-shadow: black 1px 1px 1px;
width: 1ch;
}
span {
border: 1px solid #aaa;
padding: 6px 8px;
display: inline-block;
margin: 2px;
border-radius: 4px;
box-shadow: black 1px 1px 1px;
min-width: 2ch;
text-align: center;
background: #fff;
}
#msg {
color: red;
display: none;
text-align: left;
}
#output {
border: 1px solid #666;
font-size: 12px;
}
</style>
</head>
<body>
<h1>Keyboard Base Layout</h1>
<p>
To record your keyboard base layout (unshifted), press all keys from left to right.<br>
While you can record most keys with this helper, it is enough to press all character producing keys.<br><br>
<span>Esc</span> deletes last key except itself.<br>
<span>Enter</span> starts new key row (Enter itself gets not shown as key).
</p>
<div style="min-height: 200px; margin-top: 20px">
<div>
<span id="Escape">Esc</span><input id="keyinput"/>
</div>
<span id="msg"></span>
</div>
<div style="padding: 20px 5px;">
<label>Filename: <input type="text" id="filename"></label>
<button id="download">Export Mapping</button>
</div>
<pre id="output"></pre>
<script>
const silent = [
'Escape',
'Backspace',
'Tab',
'Enter',
'CapsLock',
'ShiftLeft', 'ShiftRight',
'ControlLeft', 'ControlRight',
'MetaLeft', 'MetaRight',
'AltLeft', 'AltRight',
'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
];
const modifier = [
'CapsLock',
'ShiftLeft', 'ShiftRight',
'ControlLeft', 'ControlRight',
'MetaLeft', 'MetaRight',
'AltLeft', 'AltRight',
];
const prevent = ['Tab', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12'];
const rename = { 'Escape': 'Esc', 'CapsLock': 'CapsL' };
const inp = document.querySelector('#keyinput');
inp.focus();
let current_code = '';
let err = false;
const data = {};
let cl_hold = false;
let dead_code = '';
let charProduced = false;
function getClState(ev) {
if (ev.code !== 'CapsLock') {
cl_hold = ev.getModifierState('CapsLock');
return cl_hold;
}
if (ev.type === 'keydown' && ev.code === 'CapsLock') {
cl_hold = !cl_hold;
return true;
}
return cl_hold;
}
function createSpan(code, value) {
const el = document.createElement('span');
el.innerText = rename[value] ?? value;
el.id = code;
el.style.boxShadow = 'inset black 1px 1px 1px';
inp.parentNode.insertBefore(el, inp);
}
function showMsg(s) {
const el = document.querySelector('#msg');
el.innerText = s;
el.style.display = 'block';
}
function hideMsg() {
const el = document.querySelector('#msg');
el.style.display = 'none';
}
inp.addEventListener('keyup', ev => {
console.log('up', ev);
const cl_state = getClState(ev);
const el = document.querySelector('#'+ev.code);
if (el && ev.code !== 'CapsLock') el.style.boxShadow = 'black 1px 1px 1px';
const cl = document.querySelector('#CapsLock');
if (cl) {
if (cl_state) {
cl.style.boxShadow = 'inset black 1px 1px 1px';
} else {
cl.style.boxShadow = 'black 1px 1px 1px';
}
}
if (charProduced) {
hideMsg();
dead_code = '';
}
if (ev.key === 'Dead' && ev.code !== current_code) {
showMsg('Dead key found, press same key again.');
dead_code = ev.code;
current_code = ev.code;
if (!document.querySelector('#'+current_code)) {
createSpan(current_code, ev.key);
} else {
document.querySelector('#'+current_code).style.boxShadow = 'inset black 1px 1px 1px';
}
}
});
inp.addEventListener('keydown', ev => {
hideMsg();
charProduced = false;
console.log('down', ev);
const cl_state = getClState(ev);
const cl = document.querySelector('#CapsLock');
if (cl) {
if (cl_state) {
cl.style.boxShadow = 'inset black 1px 1px 1px';
} else {
cl.style.boxShadow = 'black 1px 1px 1px';
}
}
if ((ev.code === 'Unidentified' || ev.code === '')) {
if (dead_code) {
current_code = dead_code;
return;
};
err = true;
ev.preventDefault();
ev.stopImmediatePropagation();
showMsg('Unidentified key found.');
return;
}
if (ev.code === 'Escape') {
inp.previousSibling?.remove();
}
if (prevent.includes(ev.code)) {
ev.preventDefault();
ev.stopImmediatePropagation();
ev.stopPropagation();
}
if (current_code == 'CapsLock' && ev.code == 'CapsLock') {
return;
}
if (!modifier.includes(ev.code)) {
if (ev.shiftKey || ev.altKey || ev.ctrlKey || ev.getModifierState('CapsLock') || ev.getModifierState('AltGraph')) {
showMsg('Disable modifier keys.');
err = true;
return;
}
}
if (dead_code) {
if (ev.code !== dead_code) {
showMsg('Dead key found, press same key again.');
err = true;
return;
}
dead_code = '';
}
if (ev.key === 'Dead' && ev.code !== current_code) {
showMsg('Dead key found, press same key again.');
dead_code = ev.code;
}
err =false;
current_code = ev.code;
if (ev.code === 'Enter') {
const el = document.createElement('br');
inp.parentNode.insertBefore(el, inp);
return;
}
if (silent.includes(current_code) || ev.key === 'Dead') {
if (!document.querySelector('#'+current_code)) {
createSpan(current_code, ev.key);
} else {
document.querySelector('#'+current_code).style.boxShadow = 'inset black 1px 1px 1px';
}
}
});
inp.addEventListener('input', ev => {
if (!ev.target.value || err) {
ev.target.value = '';
return;
}
charProduced = true;
data[current_code] = ev.target.value;
let value = ev.target.value;
if (value === ' ') value = '\xa0'.repeat(50);
ev.target.value = '';
if (document.querySelector('#'+current_code)) {
const el = document.querySelector('#'+current_code);
el.innerText = value;
el.style.boxShadow = 'inset black 1px 1px 1px';
} else {
createSpan(current_code, value);
}
let keys = Object.keys(data).sort();
const final = {};
for (const key of keys) final[key] = data[key];
const out = JSON.stringify(final, null, 2);
console.log(out);
document.querySelector('#output').innerText = out;
});
function download() {
let keys = Object.keys(data).sort();
const final = {};
for (const key of keys) final[key] = data[key];
const out = JSON.stringify(final, null, 2);
const blob = new Blob([out], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('download', document.querySelector('#filename').value || 'data.json');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
document.querySelector('#download').addEventListener('click', download);
</script>
</body>
</html>
@@ -1,7 +1,7 @@
{
"Backquote": "^",
"Backslash": "#",
"BracketLeft": "\u00fc",
"BracketLeft": "ü",
"BracketRight": "+",
"Comma": ",",
"Digit0": "0",
@@ -42,9 +42,9 @@
"KeyX": "x",
"KeyY": "z",
"KeyZ": "y",
"Minus": "\u00df",
"Minus": "ß",
"Period": ".",
"Quote": "\u00e4",
"Semicolon": "\u00f6",
"Quote": "ä",
"Semicolon": "ö",
"Slash": "-"
}
+50
View File
@@ -0,0 +1,50 @@
{
"Backquote": "º",
"Backslash": "ç",
"BracketLeft": "`",
"BracketRight": "+",
"Comma": ",",
"Digit0": "0",
"Digit1": "1",
"Digit2": "2",
"Digit3": "3",
"Digit4": "4",
"Digit5": "5",
"Digit6": "6",
"Digit7": "7",
"Digit8": "8",
"Digit9": "9",
"Equal": "¡",
"IntlBackslash": "<",
"KeyA": "a",
"KeyB": "b",
"KeyC": "c",
"KeyD": "d",
"KeyE": "e",
"KeyF": "f",
"KeyG": "g",
"KeyH": "h",
"KeyI": "i",
"KeyJ": "j",
"KeyK": "k",
"KeyL": "l",
"KeyM": "m",
"KeyN": "n",
"KeyO": "o",
"KeyP": "p",
"KeyQ": "q",
"KeyR": "r",
"KeyS": "s",
"KeyT": "t",
"KeyU": "u",
"KeyV": "v",
"KeyW": "w",
"KeyX": "x",
"KeyY": "y",
"KeyZ": "z",
"Minus": "'",
"Period": ".",
"Quote": "´",
"Semicolon": "ñ",
"Slash": "-"
}
+50
View File
@@ -0,0 +1,50 @@
{
"Backquote": "|",
"Backslash": "}",
"BracketLeft": "´",
"BracketRight": "+",
"Comma": ",",
"Digit0": "0",
"Digit1": "1",
"Digit2": "2",
"Digit3": "3",
"Digit4": "4",
"Digit5": "5",
"Digit6": "6",
"Digit7": "7",
"Digit8": "8",
"Digit9": "9",
"Equal": "¿",
"IntlBackslash": "<",
"KeyA": "a",
"KeyB": "b",
"KeyC": "c",
"KeyD": "d",
"KeyE": "e",
"KeyF": "f",
"KeyG": "g",
"KeyH": "h",
"KeyI": "i",
"KeyJ": "j",
"KeyK": "k",
"KeyL": "l",
"KeyM": "m",
"KeyN": "n",
"KeyO": "o",
"KeyP": "p",
"KeyQ": "q",
"KeyR": "r",
"KeyS": "s",
"KeyT": "t",
"KeyU": "u",
"KeyV": "v",
"KeyW": "w",
"KeyX": "x",
"KeyY": "y",
"KeyZ": "z",
"Minus": "'",
"Period": ".",
"Quote": "{",
"Semicolon": "ñ",
"Slash": "-"
}
@@ -1,20 +1,20 @@
{
"Backquote": "\u00b2",
"Backslash": "μ",
"Backquote": "²",
"Backslash": "*",
"BracketLeft": "^",
"BracketRight": "$",
"Comma": ";",
"Digit0": "\u00e0",
"Digit0": "à",
"Digit1": "&",
"Digit2": "\u00e9",
"Digit2": "é",
"Digit3": "\"",
"Digit4": "'",
"Digit5": "(",
"Digit6": "§",
"Digit7": "\u00e8",
"Digit8": "!",
"Digit6": "-",
"Digit7": "è",
"Digit8": "_",
"Digit9": "ç",
"Equal": "-",
"Equal": "=",
"IntlBackslash": "<",
"KeyA": "q",
"KeyB": "b",
@@ -44,7 +44,7 @@
"KeyZ": "w",
"Minus": ")",
"Period": ":",
"Quote": "\u00f9",
"Quote": "ù",
"Semicolon": "m",
"Slash": "="
"Slash": "!"
}
+50
View File
@@ -0,0 +1,50 @@
{
"Backquote": "`",
"Backslash": "\\",
"BracketLeft": "[",
"BracketRight": "]",
"Comma": ",",
"Digit0": "0",
"Digit1": "1",
"Digit2": "2",
"Digit3": "3",
"Digit4": "4",
"Digit5": "5",
"Digit6": "6",
"Digit7": "7",
"Digit8": "8",
"Digit9": "9",
"Equal": "=",
"IntlBackslash": "«",
"KeyA": "α",
"KeyB": "β",
"KeyC": "ψ",
"KeyD": "δ",
"KeyE": "ε",
"KeyF": "φ",
"KeyG": "γ",
"KeyH": "η",
"KeyI": "ι",
"KeyJ": "ξ",
"KeyK": "κ",
"KeyL": "λ",
"KeyM": "μ",
"KeyN": "ν",
"KeyO": "ο",
"KeyP": "π",
"KeyQ": ";",
"KeyR": "ρ",
"KeyS": "σ",
"KeyT": "τ",
"KeyU": "θ",
"KeyV": "ω",
"KeyW": "ς",
"KeyX": "χ",
"KeyY": "υ",
"KeyZ": "ζ",
"Minus": "-",
"Period": ".",
"Quote": "'",
"Semicolon": "´",
"Slash": "/"
}
+50
View File
@@ -0,0 +1,50 @@
{
"Backquote": "ё",
"Backslash": "\\",
"BracketLeft": "х",
"BracketRight": "ъ",
"Comma": "б",
"Digit0": "0",
"Digit1": "1",
"Digit2": "2",
"Digit3": "3",
"Digit4": "4",
"Digit5": "5",
"Digit6": "6",
"Digit7": "7",
"Digit8": "8",
"Digit9": "9",
"Equal": "=",
"IntlBackslash": "/",
"KeyA": "ф",
"KeyB": "и",
"KeyC": "с",
"KeyD": "в",
"KeyE": "у",
"KeyF": "а",
"KeyG": "п",
"KeyH": "р",
"KeyI": "ш",
"KeyJ": "о",
"KeyK": "л",
"KeyL": "д",
"KeyM": "ь",
"KeyN": "т",
"KeyO": "щ",
"KeyP": "з",
"KeyQ": "й",
"KeyR": "к",
"KeyS": "ы",
"KeyT": "е",
"KeyU": "г",
"KeyV": "м",
"KeyW": "ц",
"KeyX": "ч",
"KeyY": "н",
"KeyZ": "я",
"Minus": "-",
"Period": "ю",
"Quote": "э",
"Semicolon": "ж",
"Slash": "."
}
+293
View File
@@ -0,0 +1,293 @@
/**
* Copyright (c) 2026 The xterm.js authors. All rights reserved.
* @license MIT
*
* Keyboard layout detection.
*/
interface IMap {
acc: {[index: string]: number};
map: {[index: string]: string | string[]};
}
interface IKeyResult {
layouts: string[];
certain: number;
key: string | undefined | (string | undefined)[];
}
/**
* rebuild map: node bin/keyboard_layouts.mjs fixtures/keyboard_layouts/*
*/
const MAP: IMap = {
acc: { DE: 0, ES: 1, ES_LA: 2, FR: 3, GR: 4, RU: 5, US: 6 },
map: {
Backquote: '^º|²`ё`',
Backslash: '#ç}*\\\\\\',
BracketLeft: 'ü`´^[х[',
BracketRight: '+++$]ъ]',
Comma: ',,,;,б,',
Digit0: '000à000',
Digit1: '111&111',
Digit2: '222é222',
Digit3: '333"333',
Digit4: "444'444",
Digit5: '555(555',
Digit6: '666-666',
Digit7: '777è777',
Digit8: '888_888',
Digit9: '999ç999',
Equal: '´¡¿====',
IntlBackslash: '<<<<«/\\',
KeyA: 'aaaqαфa',
KeyB: 'bbbbβиb',
KeyC: 'ccccψсc',
KeyD: 'ddddδвd',
KeyE: 'eeeeεуe',
KeyF: 'ffffφаf',
KeyG: 'ggggγпg',
KeyH: 'hhhhηрh',
KeyI: 'iiiiιшi',
KeyJ: 'jjjjξоj',
KeyK: 'kkkkκлk',
KeyL: 'llllλдl',
KeyM: 'mmm,μьm',
KeyN: 'nnnnνтn',
KeyO: 'ooooοщo',
KeyP: 'ppppπзp',
KeyQ: 'qqqa;йq',
KeyR: 'rrrrρкr',
KeyS: 'ssssσыs',
KeyT: 'ttttτеt',
KeyU: 'uuuuθгu',
KeyV: 'vvvvωмv',
KeyW: 'wwwzςцw',
KeyX: 'xxxxχчx',
KeyY: 'zyyyυнy',
KeyZ: 'yzzwζяz',
Minus: "ß'')---",
Period: '...:.ю.',
Quote: "ä´{ù'э'",
Semicolon: 'öññm´ж;',
Slash: '---!/./'
}
};
export class LayoutDetector {
private _keys: {[index: string]: number} = {};
private _values: (string | string[])[] = [];
private _rec: string[] = [];
private _acc: string[] = Object.keys(MAP.acc);
private _cand: {layout: string; match: number;}[];
private _key: IKeyResult;
constructor() {
let p = 0;
for (const key of Object.keys(MAP.map)) {
this._keys[key] = p++;
this._values.push(MAP.map[key]);
this._rec.push('');
}
this._cand = [...this._acc].map(e => ({layout: e, match: 0 }));
this._key = { layouts: ['US_QWERTY'], certain: 0, key: undefined };
}
/**
* Reset detector.
*/
public reset(): void {
this._rec = this._rec.map(e => '');
}
/**
* Return list of registered layouts.
*/
public get layouts(): string[] {
return Object.keys(MAP.acc);
}
/**
* Return list of supported key codes.
*/
public get codes(): string[] {
return Object.keys(MAP.map);
}
/**
* Get character key for key code and layout.
* The known key codes can be requested with `.codes`,
* the registered layouts with `.layouts`.
*/
public getLayoutKey(code: string, layout: string): string | undefined {
if (MAP.acc[layout] !== undefined && MAP.map[code]) {
return MAP.map[code][MAP.acc[layout]];
}
}
/**
* Feed a keyboard event `ev` to the detector.
*/
public feed(ev: KeyboardEvent): void {
// FIXME: Should we check for OS? (not supported by Safari)
if (ev.shiftKey || ev.ctrlKey || ev.altKey || ev.metaKey
|| ev.getModifierState('AltGraph')
|| ev.getModifierState('CapsLock')
) {
return;
}
const pos = this._keys[ev.code];
if (pos !== undefined) {
if (this._rec[pos] && this._rec[pos] !== ev.key) {
// The key value should never change for the same layout,
// so we treat a sudden change as a layout change.
this.reset();
}
this._rec[pos] = ev.key;
}
}
/**
* Shows all known layouts and their degree of matching mappings
* sorted descending (likely layouts first).
* Ideally there is only one leading layout with a match of 1.
* If the leading match is not 1, then the user uses an
* unknown or custom layout.
*/
public matches(): {layout: string; match: number;}[] {
for (let i = 0; i < this._cand.length; ++i) {
this._cand[i].match = 0;
}
let c = 0;
for (let k = 0; k < this._rec.length; ++k) {
const v = this._rec[k];
if (v) {
c++;
const values = this._values[k];
for (let i = 0; i < this._acc.length; ++i) {
if (v === values[i]) {
this._cand[i].match++;
}
}
}
}
if (!c) {
return this._cand;
}
const sorted = [...this._cand].sort((a, b) => b.match - a.match);
for (let i = 0; i < sorted.length; ++i) {
sorted[i].match /= c;
}
return sorted;
}
/**
* Tries to resolve a key code to a key character.
* If `certain` is 1 then the result matches the listed layouts.
* Ideally only one layout is returned, then the detector has seen enough
* key events in `feed`.
* If multiple layouts are returned but only one key, then the layout is
* not yet fully determined but the key code is already known from `feed`.
* When multiple keys are returned, then the character undetermined
* and the layout needs further resolving with resolve.
* A certainty lesser than 1 can have different reasons:
* - not enough key event fed yet (multiple layouts returned)
* - user has an unknown or custom layout
* If `certain` is 0 the result should not be used as the dector
* has not seen any key events at all.
*/
public getKey(code: string): IKeyResult {
const lm = this.matches();
let candidates = [];
let lastMatch = 0;
for (let i = 0; i < lm.length; ++i) {
if (lm[i].match === 0) {
break;
}
if (lm[i].match === 1) {
lastMatch = 1;
candidates.push(lm[i].layout);
} else if (lm[i].match >= lastMatch) {
lastMatch = lm[i].match;
candidates.push(lm[i].layout);
}
}
if (candidates.length === 1) {
this._key.layouts = candidates;
this._key.certain = lastMatch;
this._key.key = MAP.map[code]?.[MAP.acc[candidates[0]]];
return this._key;
}
if (!candidates.length) {
candidates = [...this._acc];
}
const values = [];
for (let i = 0; i < candidates.length; ++i) {
values.push(MAP.map[code]?.[MAP.acc[candidates[i]]]);
}
const valuesSet = new Set(values);
// if all candidates yield the same char, return it
if (valuesSet.size === 1) {
this._key.layouts = candidates;
this._key.certain = lastMatch;
const [value] = values;
this._key.key = value;
return this._key;
}
// fallthrough
this._key.layouts = candidates;
this._key.certain = lastMatch / valuesSet.size;
this._key.key = values;
return this._key;
}
/**
* Calculate distance to resolve keyboard layout.
* Returns the candicate layouts and a list of keys resolving layout ambiguity.
* The key list is sorted descending by candidate differences for a key code
* (picking a high difference code needs less follow-up steps).
* The user should be asked to press the corresponding key and the key event
* should be fed to `feed`.
* Repeat this process until this method returns only one layout.
*/
public resolve(): any {
const lm = this.matches();
let candidates = [];
let lastMatch = 0;
for (let i = 0; i < lm.length; ++i) {
if (lm[i].match === 0) {
break;
}
if (lm[i].match === 1) {
lastMatch = 1;
candidates.push(lm[i].layout);
} else if (lm[i].match >= lastMatch) {
lastMatch = lm[i].match;
candidates.push(lm[i].layout);
}
}
if (candidates.length === 1) {
return { layouts: candidates, keys: [] };
}
if (!candidates.length) {
candidates = [...this._acc];
}
const acc = candidates.map(e => MAP.acc[e]);
const codes = Object.keys(this._keys);
const values = [];
for (let i = 0; i < this._values.length; ++i) {
const value = new Set();
for (let k = 0; k < acc.length; ++k) {
value.add(this._values[i][k]);
}
const len = (new Set(value)).size;
if (len > 1) {
values.push({code: codes[i], keys: [...value].sort()});
}
}
values.sort((a, b) => b.keys.length - a.keys.length);
return { layouts: candidates, keys: values };
}
}