virtual-keypad 5.11.0 → 5.11.2

package/dist/receiver.html

@@ -91,9 +91,6 @@
         for (let i=0; i<numberOfKeysToDisable; i++){
           keysToDisable.push(allKeys.splice(Math.floor(Math.random()*allKeys.length), 1)[0]);
         }
-        console.log("keysToDisable", keysToDisable);
-        console.log("ev.target.getAttribute('keys-disabled')", ev.target.getAttribute("keys-disabled"));
-
         
         if (ev.target.toggleAttribute("keys-disabled")) {
           receiver.disableKeys(keysToDisable);

package/package.json

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

package/src/keypad.css

@@ -111,35 +111,9 @@
 .response-button:active {
   box-shadow: 1px 2px 2px 1px #999;
   background-color: #aaa;
+  font-size: large;
 }
 
-/* #keypad-control-keys {
-  grid-row: 3;
-
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  align-items: center;
-  justify-content: center;
-} */
-/* #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: larger; 
-  /* grid-column: 1;
-  grid-row: 1; */
-}
-.response-button#RETURN {
-  /* TODO actually make sure test doesn't clip */
-  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 {

package/src/keypad.js

@@ -164,7 +164,6 @@ class Keypad extends KeypadPeer {
     keypadElem.appendChild(keypadHeader);
     keypadKeys.appendChild(keypadControlKeys);
     keypadElem.appendChild(keypadKeys);
-    keypadElem.appendChild(keypadControlKeys);
     keypadElem.appendChild(keypadFooter);
     // Add keypad, ie container with header,keys,control keys to page where specified
     if (document.getElementById(this.targetElement)) {
@@ -178,7 +177,7 @@ class Keypad extends KeypadPeer {
     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.")};
+    window.onresize = () => { applyMaxKeySize(this.alphabet?.length); }
   };
   #populateKeypad = () => {
     const buttonResponseFn = (button) => {
@@ -214,6 +213,7 @@ class Keypad extends KeypadPeer {
       button.id = symbol;
       button.className = "response-button";
       button.style.fontFamily = this.font;
+      button.style.visibility = "hidden"
 
       const feedbackAudio = document.getElementById("feedbackAudio");
 
@@ -299,7 +299,7 @@ class Keypad extends KeypadPeer {
     // Create new buttons
     this.alphabet.forEach((symbol) => createButton(symbol));
     // Manually style buttons, according to Denis' algorithm
-    setTimeout(() => applyMaxKeySize(this.alphabet.length), 100);
+    setTimeout(() => applyMaxKeySize(this.alphabet.length), 3); // Why?
   };
   visualFeedbackThenReset = (delayTime = 800) => {
     // ie grey out keys just after use, to discourage rapid response

package/src/maxKeySize.js

@@ -11,8 +11,6 @@ const getKeysDimensions = (elem, n, aspect=0.5) => {
     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))];
@@ -33,7 +31,6 @@ const getKeysDimensions = (elem, n, aspect=0.5) => {
     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}
 };
@@ -47,7 +44,6 @@ export const applyMaxKeySize = (numberOfKeys) => {
     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;
-    console.log("gridCords", gridCoords);
     const freeHeight = heightPx - heightUsed;
     const freeWidth = widthPx - widthUsed;
     const verticalMarginOffset = Math.floor(freeHeight/2);
@@ -57,26 +53,37 @@ export const applyMaxKeySize = (numberOfKeys) => {
     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`;
+            top = (heightPx-keyHeightPx) - verticalMarginOffset;
+            left = (k.id.toLowerCase().includes("space") ? 0 : widthPx/2 - horizontalMarginOffset) + horizontalMarginOffset;
+            width = (widthPx - horizontalMarginOffset*2)/2;
+
+            k.style.height = "auto";
+            k.style.width = "auto";
+            k.style.whiteSpace = "nowrap";
+            // Set to a nominal font size, s
+            const s = 20;
+            let w = k.getBoundingClientRect().width;
+            console.log("!. ~ file: maxKeySize.js:70 ~ keyElems.forEach ~ w:", w)
+            k.style.fontSize = s + "px";
+            // Measure width of elem, w
+            w = k.getBoundingClientRect().width;
+            const r = 1/(w/width)
+            // Set font size to s*r
+            const f = Math.floor(s*r);
+            k.style.fontSize = f + "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";
+            top = y*keyHeightPx + verticalMarginOffset ;
+            left = x*width+horizontalMarginOffset;
         }
-        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;
+        k.style.width = width + "px";
+        k.style.height = keyHeightPx + "px";
+        k.style.top = top + "px";
+        k.style.left = left + "px";
+        k.style.visibility = "visible";
     });
-    console.log("\n");
 };