virtual-keypad 5.12.2 → 5.13.0

package/src/keypadPeer.js

@@ -1,189 +1,189 @@
-// require("peerjs");
-// import { QRCode } from "qrcode";
-import { Peer } from "peerjs";
-
-export let keypadUrl;
-if (process.env.NODE_ENV !== "production") {
-  keypadUrl = "http://localhost:8080/keypad.html?";
-} else {
-  keypadUrl = "https://keypad.website/keypad?";
-}
-// -- Parameters --
-
-export class KeypadPeer {
-  constructor(
-    parameters = {
-      keypadUrl: keypadUrl,
-      targetElementId: null,
-    }
-  ) {
-    this.conn = null;
-    this.lastPeerId = null;
-    this.keypadUrl = parameters.hasOwnProperty("keypadUrl")
-      ? parameters.keypadUrl
-      : keypadUrl;
-    this.targetElement = parameters.hasOwnProperty("targetElementId")
-      ? parameters.targetElementId
-      : null;
-    // TODO add support for ttd (ms)
-    this.ttd = parameters.hasOwnProperty("ttd")
-      ? parameters.hasOwnProperty("ttd")
-      : 8000;
-    // TODO add support for heartRate (ms)
-    this.heartbeatIntervalMs = parameters.hasOwnProperty("heartRate")
-      ? parameters.hasOwnProperty("heartRate")
-      : 2000;
-    this.lastHeartbeat = performance.now();
-    this.heartBeatInterval = undefined;
-    this.heartCheckInterval = undefined;
-
-    /* Create the Peer object for our end of the connection. */
-    this.peer = new Peer(null, {
-      pingInterval: this.heartbeatIntervalMs,
-      debug: 2,
-      config: {
-        iceServers: [
-          {
-            urls: "stun:stun.relay.metered.ca:80",
-          },
-          {
-            urls: "turn:global.relay.metered.ca:80",
-            username: "de884cfc34189cdf1a5dd616",
-            credential: "IcOpouU9/TYBmpHU",
-          },
-          {
-            urls: "turn:global.relay.metered.ca:80?transport=tcp",
-            username: "de884cfc34189cdf1a5dd616",
-            credential: "IcOpouU9/TYBmpHU",
-          },
-          {
-            urls: "turn:global.relay.metered.ca:443",
-            username: "de884cfc34189cdf1a5dd616",
-            credential: "IcOpouU9/TYBmpHU",
-          },
-          {
-            urls: "turns:global.relay.metered.ca:443?transport=tcp",
-            username: "de884cfc34189cdf1a5dd616",
-            credential: "IcOpouU9/TYBmpHU",
-          },
-        ],
-      },
-    });
-
-    this.alphabet = null;
-    this.font = null;
-    this.keypressFeedbackSound =
-      "data:audio/mpeg;base64,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VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uSZIIP9BFGHYksMlIAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ==";
-  }
-
-  displayUpdate = (message, append = false) => {
-    // If the specified elem exists, update that elem
-    if (!!document.getElementById(this.targetElement)) {
-      const displayElement = document.getElementById(this.targetElement);
-      if (append) {
-        const oldInnerText = displayElement.innerText;
-        displayElement.innerText = message + "\n" + oldInnerText;
-      } else {
-        displayElement.innerText = message;
-      }
-    } else {
-      console.log("MESSAGE: ", message);
-    }
-  };
-  onPeerDisconnected = () => {
-    this.displayUpdate("Connection lost. Please reconnect");
-    // Workaround for peer.reconnect deleting previous id
-    this.peer.id = this.lastPeerId;
-    this.peer._lastServerId = this.lastPeerId;
-    this.peer.reconnect();
-  };
-  onPeerClose = () => {
-    this.displayUpdate("Connection closed");
-    this.conn = null;
-  };
-  onPeerError = (err) => {
-    this.displayUpdate(err);
-    alert("" + err);
-  };
-  parseParams = (params) => {
-    const font = params.get("font");
-    const alphabet = this.checkAlphabet(
-      decodeURIComponent(params.get("alphabet")).split(",")
-    );
-    const peerId = params.get("peerID");
-    return { alphabet: alphabet, font: font, peerId: peerId };
-  };
-  queryStringFromObject = (params) => {
-    return Object.keys(params)
-      .map((key) => key + "=" + encodeURIComponent(params[key]))
-      .join("&");
-  };
-  checkAlphabet = (proposedAlphabet) => {
-    let validAlphabet;
-    if (Array.isArray(proposedAlphabet)) {
-      // ARRAY : good
-      // FUTURE verify that symbols are displayable in desired font
-      validAlphabet = proposedAlphabet;
-    } else if (typeof proposedAlphabet == "string") {
-      // STRING : ok
-      if (
-        proposedAlphabet.toUpperCase() === "SPACE" ||
-        proposedAlphabet.toUpperCase() == "RETURN"
-      ) {
-        validAlphabet = [proposedAlphabet];
-      } else {
-        validAlphabet = proposedAlphabet.split("");
-      }
-    } else {
-      // SOMETHING ELSE : bad
-      console.error(
-        "Error! Alphabet must be specified as an array of symbols, including 'RETURN', 'SPACE'"
-      );
-      validAlphabet = [];
-    }
-    // Return unique elements, see: https://stackoverflow.com/questions/11246758/how-to-get-unique-values-in-an-array
-    const uniqueValidAlphabet = [...new Set(validAlphabet)];
-
-    // Order alphabet so that if 'SPACE' and 'RETURN' are in the list, they are correctly positioned
-    if ("SPACE" in uniqueValidAlphabet) {
-      uniqueValidAlphabet = moveElementToEndOfArray(
-        uniqueValidAlphabet,
-        "SPACE"
-      );
-    }
-    if ("RETURN" in uniqueValidAlphabet) {
-      uniqueValidAlphabet = moveElementToEndOfArray(
-        uniqueValidAlphabet,
-        "RETURN"
-      );
-    }
-    return uniqueValidAlphabet;
-  };
-  _setupHeartBeatIntervals = () => {
-    this.heartBeatInterval = setInterval(
-      () => this.conn?.send({ message: "Heartbeat" }),
-      this.heartbeatIntervalMs
-    );
-
-    this.heartCheckInterval = setInterval(() => {
-      const timeSinceHeartbeatMs = performance.now() - this.lastHeartbeat;
-      if (timeSinceHeartbeatMs > this.ttd) {
-        console.log("Closing connection due to lack of heartbeat.");
-        this.conn?.close();
-        this.conn = undefined;
-        clearInterval(this.heartBeatInterval);
-        clearInterval(this.heartCheckInterval);
-        this.heartBeatInterval = undefined;
-        this.heartCheckInterval = undefined;
-      }
-    }, this.ttd);
-  };
-}
-
-const moveElementToEndOfArray = (array, element) => {
-  return [
-    ...array.slice(0, array.indexOf(element)),
-    ...array.slice(array.indexOf(element) + 1),
-    element,
-  ];
-};
+// require("peerjs");
+// import { QRCode } from "qrcode";
+import { Peer } from "peerjs";
+
+export let keypadUrl;
+if (process.env.NODE_ENV !== "production") {
+  keypadUrl = "http://localhost:8080/keypad.html?";
+} else {
+  keypadUrl = "https://keypad.website/keypad?";
+}
+// -- Parameters --
+
+export class KeypadPeer {
+  constructor(
+    parameters = {
+      keypadUrl: keypadUrl,
+      targetElementId: null,
+    }
+  ) {
+    this.conn = null;
+    this.lastPeerId = null;
+    this.keypadUrl = parameters.hasOwnProperty("keypadUrl")
+      ? parameters.keypadUrl
+      : keypadUrl;
+    this.targetElement = parameters.hasOwnProperty("targetElementId")
+      ? parameters.targetElementId
+      : null;
+    // TODO add support for ttd (ms)
+    this.ttd = parameters.hasOwnProperty("ttd")
+      ? parameters.hasOwnProperty("ttd")
+      : 8000;
+    // TODO add support for heartRate (ms)
+    this.heartbeatIntervalMs = parameters.hasOwnProperty("heartRate")
+      ? parameters.hasOwnProperty("heartRate")
+      : 2000;
+    this.lastHeartbeat = performance.now();
+    this.heartBeatInterval = undefined;
+    this.heartCheckInterval = undefined;
+
+    /* Create the Peer object for our end of the connection. */
+    this.peer = new Peer(null, {
+      pingInterval: this.heartbeatIntervalMs,
+      debug: 2,
+      config: {
+        iceServers: [
+          {
+            urls: "stun:stun.relay.metered.ca:80",
+          },
+          {
+            urls: "turn:global.relay.metered.ca:80",
+            username: "de884cfc34189cdf1a5dd616",
+            credential: "IcOpouU9/TYBmpHU",
+          },
+          {
+            urls: "turn:global.relay.metered.ca:80?transport=tcp",
+            username: "de884cfc34189cdf1a5dd616",
+            credential: "IcOpouU9/TYBmpHU",
+          },
+          {
+            urls: "turn:global.relay.metered.ca:443",
+            username: "de884cfc34189cdf1a5dd616",
+            credential: "IcOpouU9/TYBmpHU",
+          },
+          {
+            urls: "turns:global.relay.metered.ca:443?transport=tcp",
+            username: "de884cfc34189cdf1a5dd616",
+            credential: "IcOpouU9/TYBmpHU",
+          },
+        ],
+      },
+    });
+
+    this.alphabet = null;
+    this.font = null;
+    this.keypressFeedbackSound =
+      "data:audio/mpeg;base64,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VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uSZIIP9BFGHYksMlIAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ==";
+  }
+
+  displayUpdate = (message, append = false) => {
+    // If the specified elem exists, update that elem
+    if (!!document.getElementById(this.targetElement)) {
+      const displayElement = document.getElementById(this.targetElement);
+      if (append) {
+        const oldInnerText = displayElement.innerText;
+        displayElement.innerText = message + "\n" + oldInnerText;
+      } else {
+        displayElement.innerText = message;
+      }
+    } else {
+      console.log("MESSAGE: ", message);
+    }
+  };
+  onPeerDisconnected = () => {
+    this.displayUpdate("Connection lost. Please reconnect");
+    // Workaround for peer.reconnect deleting previous id
+    this.peer.id = this.lastPeerId;
+    this.peer._lastServerId = this.lastPeerId;
+    this.peer.reconnect();
+  };
+  onPeerClose = () => {
+    this.displayUpdate("Connection closed");
+    this.conn = null;
+  };
+  onPeerError = (err) => {
+    this.displayUpdate(err);
+    alert("" + err);
+  };
+  parseParams = (params) => {
+    const font = params.get("font");
+    const alphabet = this.checkAlphabet(
+      decodeURIComponent(params.get("alphabet")).split(",")
+    );
+    const peerId = params.get("peerID");
+    return { alphabet: alphabet, font: font, peerId: peerId };
+  };
+  queryStringFromObject = (params) => {
+    return Object.keys(params)
+      .map((key) => key + "=" + encodeURIComponent(params[key]))
+      .join("&");
+  };
+  checkAlphabet = (proposedAlphabet) => {
+    let validAlphabet;
+    if (Array.isArray(proposedAlphabet)) {
+      // ARRAY : good
+      // FUTURE verify that symbols are displayable in desired font
+      validAlphabet = proposedAlphabet;
+    } else if (typeof proposedAlphabet == "string") {
+      // STRING : ok
+      if (
+        proposedAlphabet.toUpperCase() === "SPACE" ||
+        proposedAlphabet.toUpperCase() == "RETURN"
+      ) {
+        validAlphabet = [proposedAlphabet];
+      } else {
+        validAlphabet = proposedAlphabet.split("");
+      }
+    } else {
+      // SOMETHING ELSE : bad
+      console.error(
+        "Error! Alphabet must be specified as an array of symbols, including 'RETURN', 'SPACE'"
+      );
+      validAlphabet = [];
+    }
+    // Return unique elements, see: https://stackoverflow.com/questions/11246758/how-to-get-unique-values-in-an-array
+    const uniqueValidAlphabet = [...new Set(validAlphabet)];
+
+    // Order alphabet so that if 'SPACE' and 'RETURN' are in the list, they are correctly positioned
+    if ("SPACE" in uniqueValidAlphabet) {
+      uniqueValidAlphabet = moveElementToEndOfArray(
+        uniqueValidAlphabet,
+        "SPACE"
+      );
+    }
+    if ("RETURN" in uniqueValidAlphabet) {
+      uniqueValidAlphabet = moveElementToEndOfArray(
+        uniqueValidAlphabet,
+        "RETURN"
+      );
+    }
+    return uniqueValidAlphabet;
+  };
+  _setupHeartBeatIntervals = () => {
+    this.heartBeatInterval = setInterval(
+      () => this.conn?.send({ message: "Heartbeat" }),
+      this.heartbeatIntervalMs
+    );
+
+    this.heartCheckInterval = setInterval(() => {
+      const timeSinceHeartbeatMs = performance.now() - this.lastHeartbeat;
+      if (timeSinceHeartbeatMs > this.ttd) {
+        console.log("Closing connection due to lack of heartbeat.");
+        this.conn?.close();
+        this.conn = undefined;
+        clearInterval(this.heartBeatInterval);
+        clearInterval(this.heartCheckInterval);
+        this.heartBeatInterval = undefined;
+        this.heartCheckInterval = undefined;
+      }
+    }, this.ttd);
+  };
+}
+
+const moveElementToEndOfArray = (array, element) => {
+  return [
+    ...array.slice(0, array.indexOf(element)),
+    ...array.slice(array.indexOf(element) + 1),
+    element,
+  ];
+};

package/src/main.js

@@ -1,5 +1,5 @@
-// import './keypadPeer.js';
-import { Keypad } from './keypad.js';
-import { Receiver } from './receiver.js';
-
+// import './keypadPeer.js';
+import { Keypad } from './keypad.js';
+import { Receiver } from './receiver.js';
+
 export { Receiver, Keypad };

package/src/maxKeySize.js

@@ -1,105 +1,105 @@
-const getKeysDimensions = (elem, n, aspect=0.5) => {
-    /**** translation of maxKeySize.m, original provided courtesy of Prof Denis Pelli ****/
-    let keyHeightPx;
-
-    // key = aspect*keyHeightPx × keyHeightPx
-    const widthPx = elem.clientWidth;
-    const heightPx = elem.clientHeight;
-    let screenArea=widthPx*heightPx
-
-    keyHeightPx = (-1+Math.sqrt(1+4*n*heightPx/widthPx))/(2*n/widthPx);
-    keyHeightPx = (-1+Math.sqrt(1+4*n*heightPx*aspect/widthPx))/(2*aspect*n/widthPx);
-
-    while (n > (Math.floor(heightPx/keyHeightPx - 1)*Math.floor(widthPx/(aspect*keyHeightPx)))){
-        // Round size down so that screen is a multiple.
-        const ss=[heightPx/Math.ceil(heightPx/keyHeightPx), widthPx/Math.ceil(widthPx/(aspect*keyHeightPx))];
-        for (let i=0; i<=ss.length; i++) {
-            // We’ve already rejected the current size, so only consider smaller sizes.
-            // This guarantees that sizePx will decrease on every loop iteration.
-            if (ss[i]>=keyHeightPx) ss[i]=0;
-        }
-        // We want the largest possible size so try the largest of the current options.
-        keyHeightPx=Math.max(...ss);
-    }
-
-    // Compute efficiency as area covered by keys divided by screen area. 
-    // First term for n keys. Second term is for Space and Return, which fully
-    // occupy their row.
-    const areaOfKeys=aspect*keyHeightPx*keyHeightPx*n + widthPx*keyHeightPx;
-    screenArea=heightPx*widthPx;
-    const numKeysHorizontally = Math.floor(widthPx/(aspect*keyHeightPx));
-    const numKeysVertically = Math.floor(heightPx/keyHeightPx-1);
-    const efficiency = 100*areaOfKeys/screenArea;
-
-    return {keyHeightPx: keyHeightPx, cols: numKeysHorizontally, rows:numKeysVertically, widthPx: widthPx, heightPx: heightPx}
-};
-
-export const applyMaxKeySize = (numberOfKeys) => {
-    const aspect = 1;
-    let margin = 5;
-    const keysElem =  document.getElementById("keypad");
-    const {keyHeightPx, cols, rows, widthPx, heightPx} = getKeysDimensions(keysElem, numberOfKeys, aspect);
-    const keyElems = [...keysElem.getElementsByClassName("response-button")];
-    const controlKeyElemsMask = keyElems.map(e => e.parentNode.id === "keypad-control-keys");
-    const gridCoords = keyElems.filter((k,i) => !controlKeyElemsMask[i]).map((k,i) => [Math.floor(i/cols), i%cols]);
-    const widthUsed = cols*(keyHeightPx*aspect);
-    const heightUsed = rows*keyHeightPx + keyHeightPx;
-    const freeHeight = heightPx - heightUsed;
-    const freeWidth = widthPx - widthUsed;
-    const verticalMarginOffset = Math.floor(freeHeight/2);
-    const horizontalMarginOffset = Math.floor(freeWidth/2);
-
-    let keyFontSize;
-    let j=0;
-    keyElems.forEach((k,i) => {
-        k.style.position = "fixed";
-        const controlKey = controlKeyElemsMask[i];
-        let top, left, width;
-        if (controlKey) {
-            top = heightPx-keyHeightPx;
-            width = widthPx/2 - horizontalMarginOffset - margin;
-            const m = horizontalMarginOffset + margin*0.5;
-            left = (k.id.toLowerCase().includes("space") ? m : m + width + margin);
-
-            const f = getLargeFontSize(k, width, keyHeightPx-margin);
-            k.style.fontSize = f + "px";
-            k.style.borderRadius = "25px";
-            k.style.height = (keyHeightPx - margin)+ "px";
-        } else {
-            const height = keyHeightPx - margin;
-            width = height*aspect;
-            const [y,x] = gridCoords[j];
-            j += 1;
-            top = y*height + ((y+1)*margin) + verticalMarginOffset - margin/2;
-            left = x*width + ((x+1)*margin) + horizontalMarginOffset - margin/2;
-            if (!keyFontSize) {
-                keyFontSize = getLargeFontSize(k, width, height);
-            }
-            k.style.height = height + "px";
-            k.style.fontSize = height/2 + "px";
-        }
-        k.style.width = width + "px";
-        k.style.top = top + "px";
-        k.style.left = left + "px";
-        k.style.visibility = "visible";
-    });
-};
-
-const getLargeFontSize = (k, width, height) => {
-    k.style.height = "auto";
-    k.style.width = "auto";
-    k.style.whiteSpace = "nowrap";
-
-    // Set to a nominal font size, s
-    const s = 20;
-    k.style.fontSize = s + "px";
-    // Measure width of elem, w
-    const w = k.getBoundingClientRect().width;
-    const h = k.getBoundingClientRect().height
-    const rW = 1/(w/width)
-    const rH = 1/(h/height)
-    const r = Math.min(rW, rH)
-    // Set font size to s*r
-    const f = Math.floor(s*r);
-    return f;
+const getKeysDimensions = (elem, n, aspect=0.5) => {
+    /**** translation of maxKeySize.m, original provided courtesy of Prof Denis Pelli ****/
+    let keyHeightPx;
+
+    // key = aspect*keyHeightPx × keyHeightPx
+    const widthPx = elem.clientWidth;
+    const heightPx = elem.clientHeight;
+    let screenArea=widthPx*heightPx
+
+    keyHeightPx = (-1+Math.sqrt(1+4*n*heightPx/widthPx))/(2*n/widthPx);
+    keyHeightPx = (-1+Math.sqrt(1+4*n*heightPx*aspect/widthPx))/(2*aspect*n/widthPx);
+
+    while (n > (Math.floor(heightPx/keyHeightPx - 1)*Math.floor(widthPx/(aspect*keyHeightPx)))){
+        // Round size down so that screen is a multiple.
+        const ss=[heightPx/Math.ceil(heightPx/keyHeightPx), widthPx/Math.ceil(widthPx/(aspect*keyHeightPx))];
+        for (let i=0; i<=ss.length; i++) {
+            // We’ve already rejected the current size, so only consider smaller sizes.
+            // This guarantees that sizePx will decrease on every loop iteration.
+            if (ss[i]>=keyHeightPx) ss[i]=0;
+        }
+        // We want the largest possible size so try the largest of the current options.
+        keyHeightPx=Math.max(...ss);
+    }
+
+    // Compute efficiency as area covered by keys divided by screen area. 
+    // First term for n keys. Second term is for Space and Return, which fully
+    // occupy their row.
+    const areaOfKeys=aspect*keyHeightPx*keyHeightPx*n + widthPx*keyHeightPx;
+    screenArea=heightPx*widthPx;
+    const numKeysHorizontally = Math.floor(widthPx/(aspect*keyHeightPx));
+    const numKeysVertically = Math.floor(heightPx/keyHeightPx-1);
+    const efficiency = 100*areaOfKeys/screenArea;
+
+    return {keyHeightPx: keyHeightPx, cols: numKeysHorizontally, rows:numKeysVertically, widthPx: widthPx, heightPx: heightPx}
+};
+
+export const applyMaxKeySize = (numberOfKeys) => {
+    const aspect = 1;
+    let margin = 5;
+    const keysElem =  document.getElementById("keypad");
+    const {keyHeightPx, cols, rows, widthPx, heightPx} = getKeysDimensions(keysElem, numberOfKeys, aspect);
+    const keyElems = [...keysElem.getElementsByClassName("response-button")];
+    const controlKeyElemsMask = keyElems.map(e => e.parentNode.id === "keypad-control-keys");
+    const gridCoords = keyElems.filter((k,i) => !controlKeyElemsMask[i]).map((k,i) => [Math.floor(i/cols), i%cols]);
+    const widthUsed = cols*(keyHeightPx*aspect);
+    const heightUsed = rows*keyHeightPx + keyHeightPx;
+    const freeHeight = heightPx - heightUsed;
+    const freeWidth = widthPx - widthUsed;
+    const verticalMarginOffset = Math.floor(freeHeight/2);
+    const horizontalMarginOffset = Math.floor(freeWidth/2);
+
+    let keyFontSize;
+    let j=0;
+    keyElems.forEach((k,i) => {
+        k.style.position = "fixed";
+        const controlKey = controlKeyElemsMask[i];
+        let top, left, width;
+        if (controlKey) {
+            top = heightPx-keyHeightPx;
+            width = widthPx/2 - horizontalMarginOffset - margin;
+            const m = horizontalMarginOffset + margin*0.5;
+            left = (k.id.toLowerCase().includes("space") ? m : m + width + margin);
+
+            const f = getLargeFontSize(k, width, keyHeightPx-margin);
+            k.style.fontSize = f + "px";
+            k.style.borderRadius = "25px";
+            k.style.height = (keyHeightPx - margin)+ "px";
+        } else {
+            const height = keyHeightPx - margin;
+            width = height*aspect;
+            const [y,x] = gridCoords[j];
+            j += 1;
+            top = y*height + ((y+1)*margin) + verticalMarginOffset - margin/2;
+            left = x*width + ((x+1)*margin) + horizontalMarginOffset - margin/2;
+            if (!keyFontSize) {
+                keyFontSize = getLargeFontSize(k, width, height);
+            }
+            k.style.height = height + "px";
+            k.style.fontSize = height/2 + "px";
+        }
+        k.style.width = width + "px";
+        k.style.top = top + "px";
+        k.style.left = left + "px";
+        k.style.visibility = "visible";
+    });
+};
+
+const getLargeFontSize = (k, width, height) => {
+    k.style.height = "auto";
+    k.style.width = "auto";
+    k.style.whiteSpace = "nowrap";
+
+    // Set to a nominal font size, s
+    const s = 20;
+    k.style.fontSize = s + "px";
+    // Measure width of elem, w
+    const w = k.getBoundingClientRect().width;
+    const h = k.getBoundingClientRect().height
+    const rW = 1/(w/width)
+    const rH = 1/(h/height)
+    const r = Math.min(rW, rH)
+    // Set font size to s*r
+    const f = Math.floor(s*r);
+    return f;
 };

package/src/receiver.css

@@ -1,12 +1,12 @@
-#display {
-	max-height: 70vh;
-	overflow-y: scroll;
-	min-height: 350px;
-	min-width: 350px;
-	padding-left: 3em;
-}
-#info {
-	max-width: 800px;
-	padding-left: 1em;
-	padding-top: 0.25em;
+#display {
+	max-height: 70vh;
+	overflow-y: scroll;
+	min-height: 350px;
+	min-width: 350px;
+	padding-left: 3em;
+}
+#info {
+	max-width: 800px;
+	padding-left: 1em;
+	padding-top: 0.25em;
 }