npm - virtual-keypad - Versions diffs - 5.14.2 → 5.15.0 - Mend

virtual-keypad 5.14.2 → 5.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/LICENSE +21 -21
package/README.md +45 -45
package/dist/404.html +14 -14
package/dist/fonts/Pelli-EyeChart.svg +494 -494
package/dist/fonts/Sloan.svg +138 -138
package/dist/index.html +22 -22
package/dist/keypad.html +58 -58
package/dist/main.js +1 -1
package/dist/main.js.LICENSE.txt +8 -8
package/dist/main.js.map +1 -1
package/dist/receiver.html +171 -170
package/dist/server.js +66 -66
package/package.json +36 -36
package/src/keypad.css +108 -108
package/src/keypad.js +408 -405
package/src/keypadPeer.js +195 -195
package/src/main.js +4 -4
package/src/maxKeySize.js +140 -136
package/src/receiver.css +11 -11
package/src/receiver.js +260 -258
package/webpack.common.js +30 -30
package/webpack.dev.js +9 -9
package/webpack.prod.js +6 -6

package/dist/receiver.html CHANGED Viewed

@@ -1,170 +1,171 @@
-<!DOCTYPE html>
-<html style="background-color: #eee">
-  <head>
-    <meta charset="utf-8" />
-    <title>Receiver</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- TODO include JS and css from webpack bundle -->
-    <!-- <script src="../dist/main.js"></script> -->
-    <script src="./main.js"></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
-      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
-      crossorigin="anonymous"
-    />
-    <!-- <script src="https://unpkg.com/virtual-keypad"></script> -->
-    <style>
-      * {
-        outline: none;
-        vertical-align: baseline;
-        box-sizing: border-box;
-        text-rendering: optimizeLegibility;
-        -webkit-font-smoothing: auto;
-        -moz-osx-font-smoothing: grayscale;
-        font-kerning: normal;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-        color: #333;
-      }
-      html,
-      body {
-        font-size: calc(1em + 1vw);
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-      }
-      #container {
-        height: 100vh;
-        width: 100vw;
-        display: grid;
-        grid-template-rows: 1fr 3fr;
-        grid-template-columns: auto;
-        padding: 1em;
-      }
-      #display-and-buttons {
-        display: flex;
-        min-width: 50vh;
-        overflow-y: auto;
-        border: 3px solid black;
-        border-radius: 10px;
-      }
-      #display {
-        overflow-x: wrap;
-        word-break: break-all;
-        padding: 0;
-        width: 70%;
-        /* max-height: 100%; */
-        overflow-y: auto;
-      }
-      #display-control-buttons {
-        display: flex;
-        flex-direction: column;
-        width: 30%;
-        padding: 2rem;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-      <div id="info">
-        <h1>Set up keypad</h1>
-        <p>
-          Scan the QR code from the device you'd like to use as a keypad. This
-          receiver just echoes keypresses; provide a different on-data callback to
-          customize how the receiver handles keypresses.
-        </p>
-      </div>
-      <div id="display-and-buttons">
-        <div id="display"></div>
-        <div id="display-control-buttons">
-          <button id="toggle-disable" style="display: none">Disable keys.</button>
-          <button id="randomize-alphabet" style="display: none">
-            Randomize character set.
-          </button>
-        </div>
-      </div>
-    </div>
-    <script>
-      if (window.location !== window.parent.location) {
-        // The page is in an iframe, per https://tommcfarlin.com/check-if-a-page-is-in-an-iframe/
-        document.getElementById("info").style.display = "none";
-      }
-      let starting_alphabet = [
-        ..."ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789".split(""),
-      ];
-      const ctrl = ["RETURN", "SPACE"];
-      let alphabet = [...starting_alphabet, ...ctrl];
-      let keypad_options = {
-        // Specify a 'keypadUrl' field to redirect to a keypad hosted elsewhere
-        // FUTURE should be able to have a visual keypress or not from here
-        alphabet: alphabet, // Set of symbols to display; array perfered
-        font: "Arial", // Supported font, in which to display letters
-        targetElementId: "display", // id of the the div where messages should be displayed
-        visualResponseFeedback: false,
-        onErrorReconnectMessage: "Custom error message",
-      };
-      let ondata_callback = (data) => {
-        receiver.displayUpdate(`[data] ${data.response}`, true);
-        console.log(data);
-      };
-      const disableSomeKeys = (ev) => {
-        const keysToDisable = randomSelection(alphabet);
-        if (ev.target.toggleAttribute("keys-disabled")) {
-          receiver.disableKeys(keysToDisable);
-          ev.target.innerText = "Enable keys.";
-        } else {
-          receiver.enableKeys();
-          ev.target.innerText = "Disable keys.";
-        }
-      };
-      const changeAlphabet = (ev) => {
-        const sampledAlphabet = [
-          ...randomSelection(starting_alphabet),
-          ...ctrl,
-        ];
-        if (ev.target.toggleAttribute("keys-changed")) {
-          // Reset disabled keys on alphabet change, easier than persisting disabled for this demo page
-          ev.target.toggleAttribute("keys-disabled");
-          ev.target.innerText = "Disable keys.";
-          alphabet = sampledAlphabet;
-          ev.target.innerText = "Reset alphabet.";
-        } else {
-          alphabet = [...starting_alphabet, ...ctrl];
-          ev.target.innerText = "Randomize alphabet.";
-        }
-        receiver.update(alphabet);
-      };
-      var receiver = new virtualKeypad.Receiver(
-        keypad_options,
-        ondata_callback,
-        () => {
-          const disableButton = document.getElementById("toggle-disable");
-          disableButton.style.display = "block";
-          disableButton.onclick = disableSomeKeys;
-          const changeAlphabetButton =
-            document.getElementById("randomize-alphabet");
-          changeAlphabetButton.style.display = "block";
-          changeAlphabetButton.onclick = changeAlphabet;
-          console.log("RECEIV Handshake complete");
-        },
-        () => console.log("RECEIV Connection connected"),
-        () => console.log("RECEIV Connection closed"),
-        () => console.log("RECEIV Connection error")
-      );
-      const randomSelection = (source) => {
-        const maybe = () => Math.random() > 0.5;
-        const selection = [];
-        for (let i = 0; i < source.length; i++) {
-          if (maybe()) selection.push(source[i]);
-        }
-        return selection;
-      };
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html style="background-color: #eee">
+  <head>
+    <meta charset="utf-8" />
+    <title>Receiver</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- TODO include JS and css from webpack bundle -->
+    <!-- <script src="../dist/main.js"></script> -->
+    <script src="./main.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+      crossorigin="anonymous"
+    />
+    <!-- <script src="https://unpkg.com/virtual-keypad"></script> -->
+    <style>
+      * {
+        outline: none;
+        vertical-align: baseline;
+        box-sizing: border-box;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: auto;
+        -moz-osx-font-smoothing: grayscale;
+        font-kerning: normal;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        color: #333;
+      }
+      html,
+      body {
+        font-size: calc(1em + 1vw);
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+      #container {
+        height: 100vh;
+        width: 100vw;
+        display: grid;
+        grid-template-rows: 1fr 3fr;
+        grid-template-columns: auto;
+        padding: 1em;
+      }
+      #display-and-buttons {
+        display: flex;
+        min-width: 50vh;
+        overflow-y: auto;
+        border: 3px solid black;
+        border-radius: 10px;
+      }
+      #display {
+        overflow-x: wrap;
+        word-break: break-all;
+        padding: 0;
+        width: 70%;
+        /* max-height: 100%; */
+        overflow-y: auto;
+      }
+      #display-control-buttons {
+        display: flex;
+        flex-direction: column;
+        width: 30%;
+        padding: 2rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="info">
+        <h1>Set up keypad</h1>
+        <p>
+          Scan the QR code from the device you'd like to use as a keypad. This
+          receiver just echoes keypresses; provide a different on-data callback to
+          customize how the receiver handles keypresses.
+        </p>
+      </div>
+      <div id="display-and-buttons">
+        <div id="display"></div>
+        <div id="display-control-buttons">
+          <button id="toggle-disable" style="display: none">Disable keys.</button>
+          <button id="randomize-alphabet" style="display: none">
+            Randomize character set.
+          </button>
+        </div>
+      </div>
+    </div>
+    <script>
+      if (window.location !== window.parent.location) {
+        // The page is in an iframe, per https://tommcfarlin.com/check-if-a-page-is-in-an-iframe/
+        document.getElementById("info").style.display = "none";
+      }
+      let starting_alphabet = [
+        ..."ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789".split(""),
+      ];
+      const ctrl = ["RETURN", "SPACE", "SKIP BLOCK"];
+      let alphabet = [...starting_alphabet, ...ctrl];
+      let keypad_options = {
+        // Specify a 'keypadUrl' field to redirect to a keypad hosted elsewhere
+        // FUTURE should be able to have a visual keypress or not from here
+        alphabet: alphabet, // Set of symbols to display; array perfered
+        font: "Arial", // Supported font, in which to display letters
+        targetElementId: "display", // id of the the div where messages should be displayed
+        visualResponseFeedback: false,
+        onErrorReconnectMessage: "Custom error message",
+        controlButtons: ctrl,
+      };
+      let ondata_callback = (data) => {
+        receiver.displayUpdate(`[data] ${data.response}`, true);
+        console.log(data);
+      };
+      const disableSomeKeys = (ev) => {
+        const keysToDisable = randomSelection(alphabet);
+        if (ev.target.toggleAttribute("keys-disabled")) {
+          receiver.disableKeys(keysToDisable);
+          ev.target.innerText = "Enable keys.";
+        } else {
+          receiver.enableKeys();
+          ev.target.innerText = "Disable keys.";
+        }
+      };
+      const changeAlphabet = (ev) => {
+        const sampledAlphabet = [
+          ...randomSelection(starting_alphabet),
+          ...ctrl,
+        ];
+        if (ev.target.toggleAttribute("keys-changed")) {
+          // Reset disabled keys on alphabet change, easier than persisting disabled for this demo page
+          ev.target.toggleAttribute("keys-disabled");
+          ev.target.innerText = "Disable keys.";
+          alphabet = sampledAlphabet;
+          ev.target.innerText = "Reset alphabet.";
+        } else {
+          alphabet = [...starting_alphabet, ...ctrl];
+          ev.target.innerText = "Randomize alphabet.";
+        }
+        receiver.update(alphabet);
+      };
+      var receiver = new virtualKeypad.Receiver(
+        keypad_options,
+        ondata_callback,
+        () => {
+          const disableButton = document.getElementById("toggle-disable");
+          disableButton.style.display = "block";
+          disableButton.onclick = disableSomeKeys;
+          const changeAlphabetButton =
+            document.getElementById("randomize-alphabet");
+          changeAlphabetButton.style.display = "block";
+          changeAlphabetButton.onclick = changeAlphabet;
+          console.log("RECEIV Handshake complete");
+        },
+        () => console.log("RECEIV Connection connected"),
+        () => console.log("RECEIV Connection closed"),
+        () => console.log("RECEIV Connection error")
+      );
+      const randomSelection = (source) => {
+        const maybe = () => Math.random() > 0.5;
+        const selection = [];
+        for (let i = 0; i < source.length; i++) {
+          if (maybe()) selection.push(source[i]);
+        }
+        return selection;
+      };
+    </script>
+  </body>
+</html>

package/dist/server.js CHANGED Viewed

@@ -1,66 +1,66 @@
-const express = require("express");
-const path = require("path");
-const { v4: uuidv4 } = require("uuid");
-var app = (module.exports = express());
-var server = "http://localhost:3000";
-// I got an error with line below if I didnt' add the extended property
-// Don't actually know if this should be set to true or false.
-// app.use(express.urlencoded({ extended: true }));
-// app.use(express.json());
-// app.use(express.static(path.join(__dirname, 'dist')));
-// Middleware to check we have all the params we need
-const checkParams = (req, res, next) => {
-  let noID = !req.query.hasOwnProperty('peerID');
-  if (noID) {
-    console.log('No peerID given.');  // TODO Breaking! Serve error
-    throw "No peerID given -- unable to connect to peer."
-    // req.query.peerID = uuidv4(); // TEMPorary and only usable to test keypadClient
-  }
-  // // TODO check that all characters can be input as query params
-  // const noAlphabet = !req.query.hasOwnProperty('alphabet');
-  // if (noAlphabet) {
-  //   console.log('No alphabet given.');
-  //   req.query.alphabet = 'ABCDEFG';
-  // }
-  // // TODO check for valid fonts here
-  // let noFont = !req.query.hasOwnProperty('font');
-  // if (noFont) {
-  //   console.log('No alphabet given.');
-  //   req.query.font = 'Sloan';
-  // }
-  next();
-};
-// Link to the actual keypad
-// ie this is where the user will be sent (from the QR code) on their phone
-app.get('/keypad', checkParams, function (req, res) {
-  res.render(path.join(__dirname, 'keypad.html'));
-});
-app.get('/receiver', function (req, res) {
-  res.render(path.join(__dirname, 'receiver.html'));
-});
-app.use(function (err, req, res, next) {
-  res.status(err.status || 500);
-  res.send({
-    error: err.message
-  });
-});
-app.use(function (req, res) {
-  res.status(404);
-  res.send({
-    error: "404 not found"
-  });
-});
-if (!module.parent) {
-  app.listen(3000);
-  console.log('Express started on port 3000');
-}
+const express = require("express");
+const path = require("path");
+const { v4: uuidv4 } = require("uuid");
+var app = (module.exports = express());
+var server = "http://localhost:3000";
+// I got an error with line below if I didnt' add the extended property
+// Don't actually know if this should be set to true or false.
+// app.use(express.urlencoded({ extended: true }));
+// app.use(express.json());
+// app.use(express.static(path.join(__dirname, 'dist')));
+// Middleware to check we have all the params we need
+const checkParams = (req, res, next) => {
+  let noID = !req.query.hasOwnProperty('peerID');
+  if (noID) {
+    console.log('No peerID given.');  // TODO Breaking! Serve error
+    throw "No peerID given -- unable to connect to peer."
+    // req.query.peerID = uuidv4(); // TEMPorary and only usable to test keypadClient
+  }
+  // // TODO check that all characters can be input as query params
+  // const noAlphabet = !req.query.hasOwnProperty('alphabet');
+  // if (noAlphabet) {
+  //   console.log('No alphabet given.');
+  //   req.query.alphabet = 'ABCDEFG';
+  // }
+  // // TODO check for valid fonts here
+  // let noFont = !req.query.hasOwnProperty('font');
+  // if (noFont) {
+  //   console.log('No alphabet given.');
+  //   req.query.font = 'Sloan';
+  // }
+  next();
+};
+// Link to the actual keypad
+// ie this is where the user will be sent (from the QR code) on their phone
+app.get('/keypad', checkParams, function (req, res) {
+  res.render(path.join(__dirname, 'keypad.html'));
+});
+app.get('/receiver', function (req, res) {
+  res.render(path.join(__dirname, 'receiver.html'));
+});
+app.use(function (err, req, res, next) {
+  res.status(err.status || 500);
+  res.send({
+    error: err.message
+  });
+});
+app.use(function (req, res) {
+  res.status(404);
+  res.send({
+    error: "404 not found"
+  });
+});
+if (!module.parent) {
+  app.listen(3000);
+  console.log('Express started on port 3000');
+}

package/package.json CHANGED Viewed

@@ -1,36 +1,36 @@
-{
-  "name": "virtual-keypad",
-  "version": "5.14.2",
-  "description": "User response at a distance. Simple utility to summon forth a virtual keypad webapp.",
-  "main": "dist/main.js",
-  "directories": {
-    "example": "example",
-    "bin": "dist"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack serve --open --config webpack.dev.js",
-    "build": "webpack --config webpack.prod.js"
-  },
-  "keywords": [],
-  "author": "Augustin Burchell <augustin.burchell@gmail.com> (https://aburchell.github.io/)",
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/EasyEyes/virtual-keypad"
-  },
-  "dependencies": {
-    "peerjs": "^1.5.2",
-    "qrcode": "^1.4.4",
-    "uuid": "^8.3.2"
-  },
-  "devDependencies": {
-    "css-loader": "^5.2.6",
-    "file-loader": "^6.2.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^5.40.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^4.13.2",
-    "webpack-merge": "^5.8.0"
-  }
-}
+{
+  "name": "virtual-keypad",
+  "version": "5.15.0",
+  "description": "User response at a distance. Simple utility to summon forth a virtual keypad webapp.",
+  "main": "dist/main.js",
+  "directories": {
+    "example": "example",
+    "bin": "dist"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack serve --open --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "keywords": [],
+  "author": "Augustin Burchell <augustin.burchell@gmail.com> (https://aburchell.github.io/)",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/EasyEyes/virtual-keypad"
+  },
+  "dependencies": {
+    "peerjs": "^1.5.2",
+    "qrcode": "^1.4.4",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "css-loader": "^5.2.6",
+    "file-loader": "^6.2.0",
+    "style-loader": "^2.0.0",
+    "webpack": "^5.40.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^4.13.2",
+    "webpack-merge": "^5.8.0"
+  }
+}