virtual-keypad 5.9.1 → 5.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-keypad",
-  "version": "5.9.1",
+  "version": "5.10.0",
   "description": "User response at a distance. Simple utility to summon forth a virtual keypad webapp.",
   "main": "dist/main.js",
   "directories": {

package/src/keypad.css

@@ -1,5 +1,6 @@
 /* REMOTE KEYPAD STYLING */
 #keypad {
+  position: absolute;
   width: 100%;
   height: 100vh;
   height: 100dvh;
@@ -7,12 +8,11 @@
   display: grid;
   grid-template-columns: 1fr;
   /* Make header text as big as the text, keys take up as much space as needed, and control keys take up bottom space */
-  grid-template-rows: max-content auto 15vh;
+  grid-template-rows: max-content auto;
 
   align-items: center;
   justify-content: center;
 
-  padding: 1em;
   font-family: sans-serif;
 }
 #keypad-header {
@@ -50,34 +50,38 @@
 
   padding: 10px;
 
-  overflow-y: auto;
-  overflow-x: visible;
+  margin: 15px;
 
-  width: 100%;
+  /* overflow-y: auto;
+  overflow-x: visible; */
+
+  /* width: 100%;
   height: 100%;
   display: flex;
   flex-wrap: wrap-reverse;
   flex-direction: row;
   column-gap: 5px;
-  row-gap: 5px;
+  row-gap: 5px; */
 
   /* Horizontal shift of buttons */
-  justify-content: center;
+  /* justify-content: center; */
 
   /* Vertical shift of buttons */
-  align-items: center;
+  /* align-items: center; */
 
   /* Hide scrollbar */
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+  /* -ms-overflow-style: none;
+  scrollbar-width: none; */
 }
-#keypad-keys::-webkit-scrollbar {
-  /* Hide scrollbar */
+/* Hide scrollbar */
+/* #keypad-keys::-webkit-scrollbar {
   display: none;
-}
+} */
 
 .response-button {
-  width: 100%;
+  cursor: pointer;
+
+  /* width: 100%;
   height: 100%;
   max-width: min(25vw, 25vh, 150px);
   max-height: min(25vw, 25vh, 150px);
@@ -101,46 +105,46 @@
   font-weight: 700;
 
 
-  box-shadow: 7px 7px 11px #888888,
-              -7px -7px 11px #fff;
+  box-shadow: 1px 1px 2px #888888,
+              -1px -1px 2px #fff;
 }
 .response-button:active {
-  box-shadow: 1px 5px 5px 1px #999;
+  box-shadow: 1px 2px 2px 1px #999;
   background-color: #aaa;
 }
 
-#keypad-control-keys {
+/* #keypad-control-keys {
   grid-row: 3;
 
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
   justify-content: center;
-}
-#keypad-control-keys > button {
+} */
+/* #keypad-control-keys > button {
   height: 95%;
   width: 95%;
   min-width: 95%;
   max-height: min(15vh, 150px);
-}
+} */
 
 .response-button#SPACE {
   /* TODO actually make sure test doesn't clip */
-  font-size: 1.5rem; 
-  grid-column: 1;
-  grid-row: 1;
+  font-size: larger; 
+  /* grid-column: 1;
+  grid-row: 1; */
 }
 .response-button#RETURN {
   /* TODO actually make sure test doesn't clip */
-  font-size: 1.5rem; 
-  grid-column: 2;
-  grid-row: 1;
+  font-size: larger; 
+  /* grid-column: 2;
+  grid-row: 1; */
 }
 /* Only do on a hover-enabled device, ie not a phone/tablet */
 @media (hover: hover) {
   .response-button:hover {
-    box-shadow: inset 7px 7px 11px #888888,
-                inset -7px -7px 11px #fff;
+    box-shadow: inset 1px 1px 2px #888888,
+                inset -1px -1px 2px #fff;
   }
 }
 
@@ -167,8 +171,8 @@
 
 .unpressable {
   background-color: #aaaaaa;
-  box-shadow: inset 7px 7px 11px #888888,
-              inset -7px -7px 11px #fff;
+  box-shadow: inset 1px 1px 2px #888888,
+              inset -1px -1px 2px #fff;
   pointer-events: none;
   user-select: none;
 }

package/src/keypad.js

@@ -1,3 +1,4 @@
+import { applyMaxKeySize } from "./maxKeySize";
 import "./keypad.css";
 import { KeypadPeer, keypadUrl } from "./keypadPeer.js";
 
@@ -100,6 +101,10 @@ class Keypad extends KeypadPeer {
           this.enableKeys();
         }
         break;
+      // TODO factor out into keypadPeer
+      case "Heartbeat":
+        this.lastHeartbeat = performance.now();
+        break;
       default:
         console.log("Message type: ", data.message);
     }
@@ -128,7 +133,8 @@ class Keypad extends KeypadPeer {
     this.conn.on("close", () => console.log("Connection closed") );
   };
   #initiateHandshake = () => {
-    this.conn.send({ message: "Handshake", })
+    this.conn.send({ message: "Handshake" });
+    this._setupHeartBeatIntervals();
   };
   #prepareHTML = () => {
     /**
@@ -156,6 +162,7 @@ class Keypad extends KeypadPeer {
     const keypadFooter = document.createElement("div");
     keypadFooter.setAttribute("id", "keypad-footer");
     keypadElem.appendChild(keypadHeader);
+    keypadKeys.appendChild(keypadControlKeys);
     keypadElem.appendChild(keypadKeys);
     keypadElem.appendChild(keypadControlKeys);
     keypadElem.appendChild(keypadFooter);
@@ -170,6 +177,8 @@ class Keypad extends KeypadPeer {
     // Close connection if window closes.
     window.onbeforeunload = () => {this.conn?.close(); console.log("closing connection on page unload.")};
     window.onvisibilitychange = () => {this.conn?.close(); console.log("closing connection on page unload.")};
+
+    window.onresize = () => {const resize = () => applyMaxKeySize(this.alphabet?.length); setTimeout(resize, 10); console.log("Repositioning buttons due to resize.")};
   };
   #populateKeypad = () => {
     const buttonResponseFn = (button) => {
@@ -201,7 +210,6 @@ class Keypad extends KeypadPeer {
     };
     const createButton = (symbol) => {
       // Create a response button for this symbol
-      // TODO why aren't these "button"s??? More accessible, make label easier. Did I have a good reason???
       let button = document.createElement("button");
       button.id = symbol;
       button.className = "response-button";
@@ -236,18 +244,14 @@ class Keypad extends KeypadPeer {
       button.addEventListener("touchmove", (e) => {
         /* prevent delay and simulated mouse events */
         e.preventDefault();
-        console.log("touchmove event: ", e);
       });
       button.addEventListener("touchend", (e) => {
         /* prevent delay and simulated mouse events */
         e.preventDefault();
-        console.log("touchend event: ", e);
         const elementEndedOn = document.elementFromPoint(
           e.changedTouches[0].clientX,
           e.changedTouches[0].clientY
         );
-        console.log("elementEndedOn: ", elementEndedOn);
-        console.log("elementEndedOn.className: ", elementEndedOn.className);
         switch (elementEndedOn.className) {
           case "response-button-label noselect":
             buttonResponseFn(elementEndedOn.parentElement); // e.target.click();
@@ -294,6 +298,8 @@ class Keypad extends KeypadPeer {
     this.clearKeys();
     // Create new buttons
     this.alphabet.forEach((symbol) => createButton(symbol));
+    // Manually style buttons, according to Denis' algorithm
+    setTimeout(() => applyMaxKeySize(this.alphabet.length), 100);
   };
   visualFeedbackThenReset = (delayTime = 800) => {
     // ie grey out keys just after use, to discourage rapid response
@@ -337,8 +343,8 @@ class Keypad extends KeypadPeer {
    * Remove all keys from the keypad.
    */
   clearKeys = () => {
-    document.querySelector("#keypad-keys").innerHTML = "";
-    document.querySelector("#keypad-control-keys").innerHTML = "";
+    document.querySelector("#keypad-keys").innerHTML = "<div id='keypad-control-keys'></div>";
+    // document.querySelector("#keypad-control-keys").innerHTML = "";
   };
   /**
    * Return the nodes corresponding to the specified keys.
@@ -355,7 +361,6 @@ class Keypad extends KeypadPeer {
    */
   disableKeys = (whichKeys=[]) => {
     const keyElems = this._getKeysElements(whichKeys);
-    console.log("disabling elems", keyElems);
     keyElems.forEach(e => {
       e.classList.add("unpressable");
       e.classList.add("noselect");

package/src/keypadPeer.js

@@ -17,8 +17,6 @@ export class KeypadPeer {
       targetElementId: null,
     }
   ) {
-    /* Create the Peer object for our end of the connection. */
-    this.peer = new Peer(null, { debug: 2 });
     this.conn = null;
     this.lastPeerId = null;
     this.keypadUrl = parameters.hasOwnProperty("keypadUrl")
@@ -27,6 +25,16 @@ export class KeypadPeer {
     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 });
 
     this.alphabet = null;
     this.font = null;
@@ -86,7 +94,7 @@ export class KeypadPeer {
       // STRING : ok
       if (
         proposedAlphabet.toUpperCase() === "SPACE" ||
-        proposedAlphabet.toUpperCase() == "ESC"
+        proposedAlphabet.toUpperCase() == "RETURN"
       ) {
         validAlphabet = [proposedAlphabet];
       } else {
@@ -95,25 +103,41 @@ export class KeypadPeer {
     } else {
       // SOMETHING ELSE : bad
       console.error(
-        "Error! Alphabet must be specified as an array of symbols, including 'ESC', 'SPACE'"
+        "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 'ESC' are in the list, they are correctly positioned
+    // 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 ("ESC" in uniqueValidAlphabet) {
-      uniqueValidAlphabet = moveElementToEndOfArray(uniqueValidAlphabet, "ESC");
+    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) => {

package/src/maxKeySize.js

@@ -0,0 +1,82 @@
+
+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);
+
+    console.log(`n=${n}, aspect=${aspect}, widthPx=${widthPx}, heightPx=${heightPx}`);
+    console.log(`100% efficiency would require keyHightPx ${keyHeightPx.toFixed(1)}`);
+    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;
+    console.log(`Best keyheightPx ${keyHeightPx} px. ${numKeysHorizontally} horizontally x ${numKeysVertically} vertically. Efficiency ${efficiency}`)
+
+    return {keyHeightPx: keyHeightPx, cols: numKeysHorizontally, rows:numKeysVertically, widthPx: widthPx, heightPx: heightPx}
+};
+
+export const applyMaxKeySize = (numberOfKeys) => {
+    const aspect = 1;
+    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), (cols-1)-(i%cols)]);
+    const widthUsed = cols*(keyHeightPx*aspect);
+    const heightUsed = rows*keyHeightPx + keyHeightPx;
+    console.log("gridCords", gridCoords);
+    const freeHeight = heightPx - heightUsed;
+    const freeWidth = widthPx - widthUsed;
+    const verticalMarginOffset = Math.floor(freeHeight/2);
+    const horizontalMarginOffset = Math.floor(freeWidth/2);
+
+    let j=0;
+    keyElems.forEach((k,i) => {
+        k.style.position = "fixed";
+        const controlKey = controlKeyElemsMask[i];
+        const height = `${keyHeightPx}px`;
+        let top, left, width;
+        if (controlKey) {
+            top = (heightPx-keyHeightPx) - verticalMarginOffset + "px";
+            left = (k.innerText.toLowerCase() === "space" ? 0 : widthPx/2 - horizontalMarginOffset) + horizontalMarginOffset + "px";
+            width = `${(widthPx - horizontalMarginOffset*2)/2}px`;
+        } else {
+            width = keyHeightPx*aspect;
+            const [y,x] = gridCoords[j];
+            j += 1;
+            console.log(`[x,y]: [${x},${y}]`);
+            top = y*keyHeightPx + verticalMarginOffset + "px";
+            left = `${x*width+horizontalMarginOffset}px`;
+            width += "px";
+        }
+        console.log(`${k.id}, h: ${height}, w: ${width}, top: ${top}, left: ${left}`);
+        k.style.width = width;
+        k.style.height = height;
+        k.style.top = top;
+        k.style.left = left;
+    });
+    console.log("\n");
+};

package/src/receiver.js

@@ -22,7 +22,7 @@ class Receiver extends KeypadPeer {
     this.font = keypadParameters["font"]; // What fontface to display the symbols in
 
     this.onData = onDataCallback; // What to do on a button-press
-    this.onHandshake = handshakeCallback; // What to do when the connection is established
+    this.onHandshake = () => {handshakeCallback(); this._setupHeartBeatIntervals();} // What to do when the connection is established
     this.onConnection = (connection) => {this.#onPeerConnection(connection); customConnectionCallback(connection)};
     this.onClose = () => {this.onPeerClose(); customCloseCallback()};
     this.onError = (err) => {this.onPeerError(err); customErrorCallback(err)};
@@ -198,6 +198,10 @@ class Receiver extends KeypadPeer {
         case "Keypress":
           this.onData(data);
           break;
+      // TODO factor out into keypadPeer
+        case "Heartbeat":
+          this.lastHeartbeat = performance.now();
+          break;
         default:
           console.log("Message type: ", data.message);
       }