virtual-keypad 5.13.0 → 5.13.2

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.
@@ -1,8 +1,8 @@
1
- /*!
2
- * The buffer module from node.js, for the browser.
3
- *
4
- * @author Feross Aboukhadijeh <https://feross.org>
5
- * @license MIT
6
- */
7
-
8
- /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
1
+ /*!
2
+ * The buffer module from node.js, for the browser.
3
+ *
4
+ * @author Feross Aboukhadijeh <https://feross.org>
5
+ * @license MIT
6
+ */
7
+
8
+ /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
@@ -1,146 +1,146 @@
1
- <!DOCTYPE html>
2
- <html style="background-color: #eee">
3
- <head>
4
- <meta charset="utf-8" />
5
- <title>Receiver</title>
6
- <meta name="description" content="" />
7
- <meta name="viewport" content="width=device-width, initial-scale=1" />
8
- <!-- TODO include JS and css from webpack bundle -->
9
- <!-- <script src="../dist/main.js"></script> -->
10
- <script src="./main.js"></script>
11
- <link
12
- rel="stylesheet"
13
- href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
14
- integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
15
- crossorigin="anonymous"
16
- />
17
- <!-- <script src="https://unpkg.com/virtual-keypad"></script> -->
18
- <style>
19
- * {
20
- outline: none;
21
- vertical-align: baseline;
22
- box-sizing: border-box;
23
- text-rendering: optimizeLegibility;
24
- -webkit-font-smoothing: auto;
25
- -moz-osx-font-smoothing: grayscale;
26
- font-kerning: normal;
27
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
28
- Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
29
- color: #333;
30
- }
31
-
32
- html,
33
- body {
34
- margin: 0;
35
- padding: 0;
36
- height: 100vh;
37
- width: 100vw;
38
- font-size: calc(1em + 1vw);
39
- /* background-color: #eee; */
40
- }
41
-
42
- main {
43
- margin: 0 auto;
44
- padding-bottom: 5rem;
45
- width: 80%;
46
- max-width: 1440px;
47
- /* background-color: #eee; */
48
- }
49
- #display {
50
- overflow-x: wrap;
51
- max-width: 75vw;
52
- word-break: break-all;
53
- }
54
- /* -------------------------------------------------------------------------- */
55
- /* color: #FF9A00; */
56
- /* color: #666; */
57
- </style>
58
- </head>
59
- <body>
60
- <div id="info">
61
- <h1>Set up keypad</h1>
62
- <p>
63
- Scan the QR code from the device you'd like to use as a keypad. This
64
- receiver just echoes keypresses; provide a different on-data callback to
65
- customize how the receiver handles keypresses.
66
- </p>
67
- </div>
68
- <div id="display"></div>
69
- <div style="display: flex;">
70
- <button id="toggle-disable" style="display: none;">Disable keys.</button>
71
- <button id="randomize-alphabet" style="display: none;">Randomize character set.</button>
72
- </div>
73
- <script>
74
- if ( window.location !== window.parent.location ) {
75
- // The page is in an iframe, per https://tommcfarlin.com/check-if-a-page-is-in-an-iframe/
76
- document.getElementById("info").style.display = "none";
77
- }
78
- let starting_alphabet = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789".split("")];
79
- const ctrl = ["RETURN", "SPACE"];
80
- let alphabet = [...starting_alphabet, ...ctrl];
81
-
82
- let keypad_options = {
83
- // Specify a 'keypadUrl' field to redirect to a keypad hosted elsewhere
84
- // FUTURE should be able to have a visual keypress or not from here
85
- alphabet: alphabet, // Set of symbols to display; array perfered
86
- font: "Arial", // Supported font, in which to display letters
87
- targetElementId: "display", // id of the the div where messages should be displayed
88
- visualResponseFeedback: false,
89
- };
90
- let ondata_callback = (data) => {
91
- document.getElementById("display").innerText += "\n" + data.response;
92
- console.log(data);
93
- };
94
- const disableSomeKeys = (ev) => {
95
- const keysToDisable = randomSelection(alphabet);
96
- if (ev.target.toggleAttribute("keys-disabled")) {
97
- receiver.disableKeys(keysToDisable);
98
- ev.target.innerText = "Enable keys.";
99
- } else {
100
- receiver.enableKeys();
101
- ev.target.innerText = "Disable keys."
102
- }
103
- };
104
- const changeAlphabet = (ev) => {
105
- const sampledAlphabet = [...randomSelection(starting_alphabet), ...ctrl];
106
- if (ev.target.toggleAttribute("keys-changed")) {
107
- // Reset disabled keys on alphabet change, easier than persisting disabled for this demo page
108
- ev.target.toggleAttribute("keys-disabled")
109
- ev.target.innerText = "Disable keys."
110
-
111
- alphabet = sampledAlphabet;
112
- ev.target.innerText = "Reset alphabet.";
113
- } else {
114
- alphabet = [...starting_alphabet, ...ctrl];
115
- ev.target.innerText = "Randomize alphabet.";
116
- }
117
- receiver.update(alphabet);
118
- };
119
- var receiver = new virtualKeypad.Receiver(
120
- keypad_options,
121
- ondata_callback,
122
- ()=>{
123
- const disableButton = document.getElementById("toggle-disable");
124
- disableButton.style.display = "block";
125
- disableButton.onclick = disableSomeKeys;
126
- const changeAlphabetButton = document.getElementById("randomize-alphabet");
127
- changeAlphabetButton.style.display = "block";
128
- changeAlphabetButton.onclick = changeAlphabet;
129
-
130
- console.log("RECEIV Handshake complete");
131
- },
132
- ()=>console.log("RECEIV Connection connected"),
133
- ()=>console.log("RECEIV Connection closed"),
134
- ()=>console.log("RECEIV Connection error")
135
- );
136
- const randomSelection = (source) => {
137
- const maybe = () => Math.random() > 0.5;
138
- const selection = [];
139
- for (let i=0; i<source.length; i++){
140
- if (maybe()) selection.push(source[i]);
141
- }
142
- return selection;
143
- };
144
- </script>
145
- </body>
146
- </html>
1
+ <!DOCTYPE html>
2
+ <html style="background-color: #eee">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Receiver</title>
6
+ <meta name="description" content="" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
8
+ <!-- TODO include JS and css from webpack bundle -->
9
+ <!-- <script src="../dist/main.js"></script> -->
10
+ <script src="./main.js"></script>
11
+ <link
12
+ rel="stylesheet"
13
+ href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
14
+ integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
15
+ crossorigin="anonymous"
16
+ />
17
+ <!-- <script src="https://unpkg.com/virtual-keypad"></script> -->
18
+ <style>
19
+ * {
20
+ outline: none;
21
+ vertical-align: baseline;
22
+ box-sizing: border-box;
23
+ text-rendering: optimizeLegibility;
24
+ -webkit-font-smoothing: auto;
25
+ -moz-osx-font-smoothing: grayscale;
26
+ font-kerning: normal;
27
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
28
+ Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
29
+ color: #333;
30
+ }
31
+
32
+ html,
33
+ body {
34
+ margin: 0;
35
+ padding: 0;
36
+ height: 100vh;
37
+ width: 100vw;
38
+ font-size: calc(1em + 1vw);
39
+ /* background-color: #eee; */
40
+ }
41
+
42
+ main {
43
+ margin: 0 auto;
44
+ padding-bottom: 5rem;
45
+ width: 80%;
46
+ max-width: 1440px;
47
+ /* background-color: #eee; */
48
+ }
49
+ #display {
50
+ overflow-x: wrap;
51
+ max-width: 75vw;
52
+ word-break: break-all;
53
+ }
54
+ /* -------------------------------------------------------------------------- */
55
+ /* color: #FF9A00; */
56
+ /* color: #666; */
57
+ </style>
58
+ </head>
59
+ <body>
60
+ <div id="info">
61
+ <h1>Set up keypad</h1>
62
+ <p>
63
+ Scan the QR code from the device you'd like to use as a keypad. This
64
+ receiver just echoes keypresses; provide a different on-data callback to
65
+ customize how the receiver handles keypresses.
66
+ </p>
67
+ </div>
68
+ <div id="display"></div>
69
+ <div style="display: flex;">
70
+ <button id="toggle-disable" style="display: none;">Disable keys.</button>
71
+ <button id="randomize-alphabet" style="display: none;">Randomize character set.</button>
72
+ </div>
73
+ <script>
74
+ if ( window.location !== window.parent.location ) {
75
+ // The page is in an iframe, per https://tommcfarlin.com/check-if-a-page-is-in-an-iframe/
76
+ document.getElementById("info").style.display = "none";
77
+ }
78
+ let starting_alphabet = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789".split("")];
79
+ const ctrl = ["RETURN", "SPACE"];
80
+ let alphabet = [...starting_alphabet, ...ctrl];
81
+
82
+ let keypad_options = {
83
+ // Specify a 'keypadUrl' field to redirect to a keypad hosted elsewhere
84
+ // FUTURE should be able to have a visual keypress or not from here
85
+ alphabet: alphabet, // Set of symbols to display; array perfered
86
+ font: "Arial", // Supported font, in which to display letters
87
+ targetElementId: "display", // id of the the div where messages should be displayed
88
+ visualResponseFeedback: false,
89
+ };
90
+ let ondata_callback = (data) => {
91
+ document.getElementById("display").innerText += "\n" + data.response;
92
+ console.log(data);
93
+ };
94
+ const disableSomeKeys = (ev) => {
95
+ const keysToDisable = randomSelection(alphabet);
96
+ if (ev.target.toggleAttribute("keys-disabled")) {
97
+ receiver.disableKeys(keysToDisable);
98
+ ev.target.innerText = "Enable keys.";
99
+ } else {
100
+ receiver.enableKeys();
101
+ ev.target.innerText = "Disable keys."
102
+ }
103
+ };
104
+ const changeAlphabet = (ev) => {
105
+ const sampledAlphabet = [...randomSelection(starting_alphabet), ...ctrl];
106
+ if (ev.target.toggleAttribute("keys-changed")) {
107
+ // Reset disabled keys on alphabet change, easier than persisting disabled for this demo page
108
+ ev.target.toggleAttribute("keys-disabled")
109
+ ev.target.innerText = "Disable keys."
110
+
111
+ alphabet = sampledAlphabet;
112
+ ev.target.innerText = "Reset alphabet.";
113
+ } else {
114
+ alphabet = [...starting_alphabet, ...ctrl];
115
+ ev.target.innerText = "Randomize alphabet.";
116
+ }
117
+ receiver.update(alphabet);
118
+ };
119
+ var receiver = new virtualKeypad.Receiver(
120
+ keypad_options,
121
+ ondata_callback,
122
+ ()=>{
123
+ const disableButton = document.getElementById("toggle-disable");
124
+ disableButton.style.display = "block";
125
+ disableButton.onclick = disableSomeKeys;
126
+ const changeAlphabetButton = document.getElementById("randomize-alphabet");
127
+ changeAlphabetButton.style.display = "block";
128
+ changeAlphabetButton.onclick = changeAlphabet;
129
+
130
+ console.log("RECEIV Handshake complete");
131
+ },
132
+ ()=>console.log("RECEIV Connection connected"),
133
+ ()=>console.log("RECEIV Connection closed"),
134
+ ()=>console.log("RECEIV Connection error")
135
+ );
136
+ const randomSelection = (source) => {
137
+ const maybe = () => Math.random() > 0.5;
138
+ const selection = [];
139
+ for (let i=0; i<source.length; i++){
140
+ if (maybe()) selection.push(source[i]);
141
+ }
142
+ return selection;
143
+ };
144
+ </script>
145
+ </body>
146
+ </html>
package/dist/server.js CHANGED
@@ -1,66 +1,66 @@
1
- const express = require("express");
2
- const path = require("path");
3
- const { v4: uuidv4 } = require("uuid");
4
-
5
- var app = (module.exports = express());
6
- var server = "http://localhost:3000";
7
-
8
- // I got an error with line below if I didnt' add the extended property
9
- // Don't actually know if this should be set to true or false.
10
- // app.use(express.urlencoded({ extended: true }));
11
- // app.use(express.json());
12
-
13
- // app.use(express.static(path.join(__dirname, 'dist')));
14
-
15
- // Middleware to check we have all the params we need
16
- const checkParams = (req, res, next) => {
17
- let noID = !req.query.hasOwnProperty('peerID');
18
- if (noID) {
19
- console.log('No peerID given.'); // TODO Breaking! Serve error
20
- throw "No peerID given -- unable to connect to peer."
21
- // req.query.peerID = uuidv4(); // TEMPorary and only usable to test keypadClient
22
- }
23
-
24
- // // TODO check that all characters can be input as query params
25
- // const noAlphabet = !req.query.hasOwnProperty('alphabet');
26
- // if (noAlphabet) {
27
- // console.log('No alphabet given.');
28
- // req.query.alphabet = 'ABCDEFG';
29
- // }
30
-
31
- // // TODO check for valid fonts here
32
- // let noFont = !req.query.hasOwnProperty('font');
33
- // if (noFont) {
34
- // console.log('No alphabet given.');
35
- // req.query.font = 'Sloan';
36
- // }
37
- next();
38
- };
39
-
40
- // Link to the actual keypad
41
- // ie this is where the user will be sent (from the QR code) on their phone
42
- app.get('/keypad', checkParams, function (req, res) {
43
- res.render(path.join(__dirname, 'keypad.html'));
44
- });
45
- app.get('/receiver', function (req, res) {
46
- res.render(path.join(__dirname, 'receiver.html'));
47
- });
48
-
49
- app.use(function (err, req, res, next) {
50
- res.status(err.status || 500);
51
- res.send({
52
- error: err.message
53
- });
54
- });
55
-
56
- app.use(function (req, res) {
57
- res.status(404);
58
- res.send({
59
- error: "404 not found"
60
- });
61
- });
62
-
63
- if (!module.parent) {
64
- app.listen(3000);
65
- console.log('Express started on port 3000');
66
- }
1
+ const express = require("express");
2
+ const path = require("path");
3
+ const { v4: uuidv4 } = require("uuid");
4
+
5
+ var app = (module.exports = express());
6
+ var server = "http://localhost:3000";
7
+
8
+ // I got an error with line below if I didnt' add the extended property
9
+ // Don't actually know if this should be set to true or false.
10
+ // app.use(express.urlencoded({ extended: true }));
11
+ // app.use(express.json());
12
+
13
+ // app.use(express.static(path.join(__dirname, 'dist')));
14
+
15
+ // Middleware to check we have all the params we need
16
+ const checkParams = (req, res, next) => {
17
+ let noID = !req.query.hasOwnProperty('peerID');
18
+ if (noID) {
19
+ console.log('No peerID given.'); // TODO Breaking! Serve error
20
+ throw "No peerID given -- unable to connect to peer."
21
+ // req.query.peerID = uuidv4(); // TEMPorary and only usable to test keypadClient
22
+ }
23
+
24
+ // // TODO check that all characters can be input as query params
25
+ // const noAlphabet = !req.query.hasOwnProperty('alphabet');
26
+ // if (noAlphabet) {
27
+ // console.log('No alphabet given.');
28
+ // req.query.alphabet = 'ABCDEFG';
29
+ // }
30
+
31
+ // // TODO check for valid fonts here
32
+ // let noFont = !req.query.hasOwnProperty('font');
33
+ // if (noFont) {
34
+ // console.log('No alphabet given.');
35
+ // req.query.font = 'Sloan';
36
+ // }
37
+ next();
38
+ };
39
+
40
+ // Link to the actual keypad
41
+ // ie this is where the user will be sent (from the QR code) on their phone
42
+ app.get('/keypad', checkParams, function (req, res) {
43
+ res.render(path.join(__dirname, 'keypad.html'));
44
+ });
45
+ app.get('/receiver', function (req, res) {
46
+ res.render(path.join(__dirname, 'receiver.html'));
47
+ });
48
+
49
+ app.use(function (err, req, res, next) {
50
+ res.status(err.status || 500);
51
+ res.send({
52
+ error: err.message
53
+ });
54
+ });
55
+
56
+ app.use(function (req, res) {
57
+ res.status(404);
58
+ res.send({
59
+ error: "404 not found"
60
+ });
61
+ });
62
+
63
+ if (!module.parent) {
64
+ app.listen(3000);
65
+ console.log('Express started on port 3000');
66
+ }
package/package.json CHANGED
@@ -1,36 +1,36 @@
1
- {
2
- "name": "virtual-keypad",
3
- "version": "5.13.0",
4
- "description": "User response at a distance. Simple utility to summon forth a virtual keypad webapp.",
5
- "main": "dist/main.js",
6
- "directories": {
7
- "example": "example",
8
- "bin": "dist"
9
- },
10
- "scripts": {
11
- "test": "echo \"Error: no test specified\" && exit 1",
12
- "start": "webpack serve --open --config webpack.dev.js",
13
- "build": "webpack --config webpack.prod.js"
14
- },
15
- "keywords": [],
16
- "author": "Augustin Burchell <augustin.burchell@gmail.com> (https://aburchell.github.io/)",
17
- "license": "ISC",
18
- "repository": {
19
- "type": "git",
20
- "url": "https://github.com/EasyEyes/virtual-keypad"
21
- },
22
- "dependencies": {
23
- "peerjs": "^1.5.2",
24
- "qrcode": "^1.4.4",
25
- "uuid": "^8.3.2"
26
- },
27
- "devDependencies": {
28
- "css-loader": "^5.2.6",
29
- "file-loader": "^6.2.0",
30
- "style-loader": "^2.0.0",
31
- "webpack": "^5.40.0",
32
- "webpack-cli": "^4.7.2",
33
- "webpack-dev-server": "^4.13.2",
34
- "webpack-merge": "^5.8.0"
35
- }
36
- }
1
+ {
2
+ "name": "virtual-keypad",
3
+ "version": "5.13.2",
4
+ "description": "User response at a distance. Simple utility to summon forth a virtual keypad webapp.",
5
+ "main": "dist/main.js",
6
+ "directories": {
7
+ "example": "example",
8
+ "bin": "dist"
9
+ },
10
+ "scripts": {
11
+ "test": "echo \"Error: no test specified\" && exit 1",
12
+ "start": "webpack serve --open --config webpack.dev.js",
13
+ "build": "webpack --config webpack.prod.js"
14
+ },
15
+ "keywords": [],
16
+ "author": "Augustin Burchell <augustin.burchell@gmail.com> (https://aburchell.github.io/)",
17
+ "license": "ISC",
18
+ "repository": {
19
+ "type": "git",
20
+ "url": "https://github.com/EasyEyes/virtual-keypad"
21
+ },
22
+ "dependencies": {
23
+ "peerjs": "^1.5.2",
24
+ "qrcode": "^1.4.4",
25
+ "uuid": "^8.3.2"
26
+ },
27
+ "devDependencies": {
28
+ "css-loader": "^5.2.6",
29
+ "file-loader": "^6.2.0",
30
+ "style-loader": "^2.0.0",
31
+ "webpack": "^5.40.0",
32
+ "webpack-cli": "^4.7.2",
33
+ "webpack-dev-server": "^4.13.2",
34
+ "webpack-merge": "^5.8.0"
35
+ }
36
+ }