WIP add keyboard tester

3 years ago · 5442a25153
parent 2f4e9f3892
commit 5442a25153
2 changed files with 156 additions and 0 deletions
--- a/assets/audio/click.mp3
+++ b/assets/audio/click.mp3
--- a/tester.html
+++ b/tester.html
@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Keyboard Tester</title>
+	<style>
+		kbd {
+			min-width: 1rem;
+			border: 1px solid red;
+			display: inline-block;
+			text-align-center
+		}
+		kbd.works {
+			border-color: lime;
+		}
+	</style>
+</head>
+<body>
+	<select onchange="loadLayout()" id="layout-selector">
+		<option selected disabled>Select a keyboard</option>
+		<option value="macSmall">MacBook (US)</option>
+	</select>
+
+	<div id="keyboard"></div>
+
+	<script async>
+		const codes = {
+			esc: "Escape",
+			F1: "F1",
+			F2: "F2",
+			F3: "F3",
+			F4: "F4",
+			F5: "F5",
+			F6: "F6",
+			F7: "F7",
+			F8: "F8",
+			F9: "F9",
+			F10: "F10",
+			F11: "F11",
+			F12: "F12",
+			F13: "F13",
+			F14: "F14",
+			F15: "F15",
+			F16: "F16",
+			Q: "KeyQ",
+			W: "KeyW",
+			E: "KeyE",
+			R: "KeyR",
+			T: "KeyT",
+			Y: "KeyY",
+			U: "KeyU",
+			I: "KeyI",
+			O: "KeyO",
+			P: "KeyP",
+			A: "KeyA",
+			S: "KeyS",
+			D: "KeyD",
+			F: "KeyF",
+			G: "KeyG",
+			H: "KeyH",
+			J: "KeyJ",
+			K: "KeyK",
+			L: "KeyL",
+			Z: "KeyZ",
+			X: "KeyX",
+			C: "KeyC",
+			V: "KeyV",
+			B: "KeyB",
+			N: "KeyN",
+			M: "KeyM",
+			"1": "Digit1",
+			"2": "Digit2",
+			"3": "Digit3",
+			"4": "Digit4",
+			"5": "Digit5",
+			"6": "Digit6",
+			"7": "Digit7",
+			"8": "Digit8",
+			"9": "Digit9",
+			"0": "Digit0",
+			"`": "Backquote",
+			"[": "BracketLeft",
+			"]": "BracketRight",
+			"-": "Minus",
+			"=": "Equal",
+			"\\": "Backslash",
+			";": "Semicolon",
+			"'": "Quote",
+			",": "Comma",
+			".": "Period",
+			"/": "Slash",
+			"space": "Space",
+			delete: "Backspace",
+			tab: "Tab",
+			"caps lock": "CapsLock",
+			"return": "Enter",
+			"shift (L)": "ShiftLeft",
+			"shift (R)": "ShiftRight",
+			"control (L)": "ControlLeft",
+			"control (R)": "ControlRight",
+			"option (L)": "AltLeft",
+			"option (R)": "AltRight",
+			"command (L)": "MetaLeft",
+			"command (R)": "MetaRight",
+			"up": "ArrowUp",
+			"down": "ArrowDown",
+			"left": "ArrowLeft",
+			"right": "ArrowRight",
+		};
+
+		const layouts = {
+			macSmall: [
+				["esc", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"],
+				["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "delete"],
+				["tab", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "[", "]", "\\"],
+				["caps lock", "A", "S", "D", "F", "G", "H", "J", "K", "L", ";", "'", "return"],
+				["shift (L)", "Z", "X", "C", "V", 'B', "N", "M", ",", ".", "/", "shift (R)"],
+				["control (L)", "option (L)", "command (L)", "space", "command (R)", "option (R)", "left", "up", "down", "right"]
+			]
+		};
+
+		var click = new Audio("click.mp3");
+		click.loop = false;
+
+		function loadLayout() {
+			var layout = document.getElementById("layout-selector").value;
+			var keyboard = document.getElementById("keyboard");
+
+			for(var i = 0; i < layouts[layout].length; i++) {
+				let kbdRow = document.createElement("div");
+				keyboard.appendChild(kbdRow);
+				var keyRow = layouts[layout][i];
+				for(var j = 0; j < keyRow.length; j++) {
+					let kbd = document.createElement("kbd");
+					kbdRow.appendChild(kbd);
+					kbd.textContent = keyRow[j];
+					kbd.id = codes[keyRow[j]];
+				}
+			}
+		}
+
+
+		addEventListener("keydown", function(event) {
+			event.preventDefault();
+			var key = document.getElementById(event.code);
+			if(key) {
+				key.classList.add("works");
+			} else {
+				console.warn("Missing key", event.code);
+			}
+
+			click.load();
+			click.play();
+		});
+	</script>
+</body>
+</html>