From 9bf3c17455ef53b90bd89d1ac11043d06f1db127 Mon Sep 17 00:00:00 2001
From: spencerkee <spencerkee@users.noreply.github.com>
Date: Thu, 20 Mar 2025 17:42:32 +0000
Subject: [PATCH] Make function for string pulling
---
app.js | 243 +++++++++++++++++++++++++++++++++++++++++------------
index.html | 74 +++++++++-------
2 files changed, 233 insertions(+), 84 deletions(-)
diff --git a/app.js b/app.js
index 1e9e523..084db19 100644
--- a/app.js
+++ b/app.js
@@ -46,6 +46,89 @@ const b = document.getElementById("b");
const select = document.getElementById("select");
const start = document.getElementById("start");
+// Recording buttons, i.e. when you click them we'll start recording inputs
+// which should later count as that button press when seen on the QR code
+const recordNetural = document.getElementById("noInputRec");
+const recordUp = document.getElementById("upRec");
+const recordDown = document.getElementById("downRec");
+const recordLeft = document.getElementById("leftRec");
+const recordRight = document.getElementById("rightRec");
+const recordA = document.getElementById("aRec");
+const recordB = document.getElementById("bRec");
+// const recordSelect = document.getElementById("selectRec");
+// const recordStart = document.getElementById("startRec");
+
+const isNeutralHeld = false;
+
+const recordingButtons = [
+ recordNetural,
+ recordUp,
+ recordDown,
+ recordLeft,
+ recordRight,
+ recordA,
+ recordB,
+ // recordSelect,
+ // recordStart,
+]
+
+let recordingButtonIsHeldArr = [
+ false, // recordNetural
+ false, // recordUp
+ false, // recordDown
+ false, // recordLeft
+ false, // recordRight
+ false, // recordA
+ false, // recordB
+ // false, // recordSelect
+ // false, // recordStart
+]
+
+// Add a listener for each recording button to set the corresponding index in the array to true when pressed
+recordingButtons.forEach((button, index) => {
+ button.onpointerdown = () => {
+ recordingButtonIsHeldArr[index] = true;
+ }
+ button.onpointerup = () => {
+ recordingButtonIsHeldArr[index] = false;
+ let relevantRecordedData = recordedData[index];
+ // Get the top 20% of the recordedData for this button
+ // Sum the counts
+ let counts = Object.values(relevantRecordedData).map(data => data.count);
+ const sum = counts.reduce((partialSum, a) => partialSum + a, 0);
+ let threshold = sum * 0.40;
+ // Get sorted list of recordedData for this button
+ let sortedRecordedData = Object.entries(relevantRecordedData).sort((a, b) => b[1].count - a[1].count);
+ // Convert sortedRecordedData to an array of arrays
+ // where each element is [code.data, { count: count }]
+ sortedRecordedData = sortedRecordedData.map(data => [data[0], data[1].count]);
+
+ // Create accumulator and iterate over sortedRecordedData and filter out values
+ // below the threshold
+ let bestValues = [];
+ let accumulator = 0;
+ // TODO Replace this with a foreach
+ for (let i = 0; i < sortedRecordedData.length; i++) {
+ if (accumulator > threshold) {
+ break;
+ }
+ bestValues.push(sortedRecordedData[i]);
+ accumulator += sortedRecordedData[i][1];
+ }
+ debugger;
+ }
+});
+
+// let time;
+// recordNetural.onpointerdown = function () {
+// isNeutralHeld = false;
+// // time = Date.now();
+// }
+// recordNetural.onpointerup = function () {
+// isNeutralHeld = false;
+// // console.log(`you held me down for ${Date.now() - time} milliseconds`);
+// }
+
let qr = {};
let pressedButtons = {};
@@ -155,6 +238,9 @@ function checkButtonStatus() {
}
let datas = {};
+// Initialize recordedData as an array as the same length as recordingButtons
+// to store the count of each button press
+recordedData = new Array(recordingButtons.length).fill({});
function renderData() {
let html = "<table><tr><th>Data</th><th>Count</th><th>Buttons</th></tr>";
@@ -190,6 +276,83 @@ navigator.mediaDevices
requestAnimationFrame(tick);
});
+let codeDataButtonSubstrings = [
+ [], // Neutral
+ [], // Up
+ [], // Down
+ [
+ "OP3%S",
+ "OP9OS",
+ "OOP8S",
+ "OOI3S",
+ "OP9+S",
+ "OP8$S",
+ "OP8$S",
+ "OP98S",
+ ], // Left
+ [
+ "OO$:S",
+ "OPJMS",
+ "OOZ6S",
+ "OPZ6S",
+ "OPCHS",
+ "OPD S",
+ "OOD S",
+ "OPGTS",
+ "OO PS",
+ "OOYJS",
+ "OOFAS",
+ "OPH0S",
+ "OPDGS",
+ "OPDKS",
+ "OPXWS",
+ "OPU*S",
+ "OOGTS",
+ "OODKS",
+ ], // Right
+ [
+ "A7H",
+ "ANH",
+ "A8+",
+ "A8H",
+ "A9H",
+ "AO+",
+ ], // A
+ [], // B
+ // [], // Select
+ // [], // Start
+]
+
+// Returns an object which contains booleans for each button
+function getButtonReadouts(codeData) {
+ let localQr = {
+ //a: qr.a, // don't reset a!
+ };
+
+ // Left
+ if (
+ codeDataButtonSubstrings[3].some((substring) => codeData.includes(substring))
+ ) {
+ localQr.left = true;
+ }
+
+ // Right
+ if (
+ codeDataButtonSubstrings[4].some((substring) => codeData.includes(substring))
+ ) {
+ localQr.right = true;
+ }
+
+ // A button
+ if (
+ codeDataButtonSubstrings[5].some((substring) => codeData.includes(substring))
+ ) {
+ localQr.a = true;
+ }
+
+ return localQr;
+}
+
function tick() {
loadingMessage.innerText = "⌛ Loading video...";
if (video.readyState === video.HAVE_ENOUGH_DATA) {
@@ -218,64 +381,10 @@ function tick() {
if (code?.data.length > 0) {
// reset
- qr = {
- //a: qr.a, // don't reset a!
- };
+ qr = getButtonReadouts(code.data);
latencyScan.innerText = `Scan latency: ${delta}ms`;
- // Left
- if (
- code.data.includes("OP3%S") ||
- code.data.includes("OP9OS") ||
- code.data.includes("OOP8S") ||
- code.data.includes("OOI3S") ||
- code.data.includes("OP9+S") ||
- code.data.includes("OP8$S") ||
- code.data.includes("OP8$S") ||
- code.data.includes("OP98S")
- ) {
- qr.left = true;
- }
-
- // Right
- if (
- code.data.includes("OO$:S") ||
- code.data.includes("OPJMS") ||
- code.data.includes("OOZ6S") ||
- code.data.includes("OPZ6S") ||
- code.data.includes("OPCHS") ||
- code.data.includes("OPD S") ||
- code.data.includes("OOD S") ||
- code.data.includes("OPGTS") ||
- code.data.includes("OO PS") ||
- code.data.includes("OOYJS") ||
- code.data.includes("OOFAS") ||
- code.data.includes("OPH0S") ||
- code.data.includes("OPDGS") ||
- code.data.includes("OPDKS") ||
- code.data.includes("OPXWS") ||
- code.data.includes("OPU*S") ||
- code.data.includes("OOGTS") ||
- code.data.includes("OODKS")
- ) {
- qr.right = true;
- }
-
- // A button
- if (code.data.startsWith("ARC")) {
- qr.a = false;
- } else if (
- code.data.startsWith("A7H") ||
- code.data.startsWith("ANH") ||
- code.data.startsWith("A8+") ||
- code.data.startsWith("A8H") ||
- code.data.startsWith("A9H") ||
- code.data.startsWith("AO+")
- ) {
- qr.a = true;
- }
-
drawLine(
code.location.topLeftCorner,
code.location.topRightCorner,
@@ -297,6 +406,30 @@ function tick() {
"#FF3B58",
);
+ // If a given recording button is being held down, then record its count
+ // to the recordDatas object
+ for (let i = 0; i < recordingButtonIsHeldArr.length; i++) {
+ if (recordingButtonIsHeldArr[i]) {
+ let buttonDataFreq = recordedData[i];
+ // Check if code.data is already in the recordedData object
+ // If it is, increment the count
+ if (code.data in buttonDataFreq) {
+ buttonDataFreq[code.data].count += 1;
+ } else {
+ // If it isn't, add it with a count of 1
+ buttonDataFreq[code.data] = { count: 1 };
+ }
+ }
+ }
+
+ // console.log(recordingButtonIsHeldArr);
+ console.log(recordedData[0]);
+ // Log sorted recordedData[0] to the console
+ console.log(
+ Object.entries(recordedData[0]).sort((a, b) => b[1].count - a[1].count),
+ );
+
+
if (!datas[code.data]) {
let buttons = [];
for (let i = 0; i < Object.keys(qr).length; i++) {
diff --git a/index.html b/index.html
index e546e2e..9587d95 100644
--- a/index.html
+++ b/index.html
@@ -1,34 +1,50 @@
<!DOCTYPE html>
<html>
- <body>
- <div>
- <div style="float: left; width: 49%">
- <h1>QRcade</h1>
- <h3>Spencer Kee & Stephen Downward</h3>
- <p>Play Mario by manipulating a QR code! Move the stick left and right for movement, and press the button on the right side to jump. Be careful not to cover the QR code with your hand. Click start (with the mouse) twice to start the game.</p>
- <div id="loadingMessage">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
- <canvas id="canvas" hidden></canvas>
- </div>
- <div style="float: right; width: 50%;">
- <canvas id="nes-canvas" width="256" height="240" style="width: 100%"></canvas>
- <button id="up">Up</button>
- <button id="down">Down</button>
- <button id="left">Left</button>
- <button id="right">Right</button>
- <button id="a">A</button>
- <button id="b">B</button>
- <button id="start">Start</button>
- <button id="select">Select</button>
- </div>
+<body>
+ <div>
+ <div style="float: left; width: 49%">
+ <h1>QRcade</h1>
+ <h3>Spencer Kee & Stephen Downward</h3>
+ <p>Play Mario by manipulating a QR code! Move the stick left and right for movement, and press the button on the
+ right side to jump. Be careful not to cover the QR code with your hand. Click start (with the mouse) twice to
+ start the game.</p>
+
+ <div id="loadingMessage">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
+ <canvas id="canvas" hidden></canvas>
</div>
- <div id="output" hidden>
- <div id="latency"></div>
- <div id="scan"></div>
- <div><span id="outputData"></span></div>
+ <div style="float: right; width: 50%;">
+ <canvas id="nes-canvas" width="256" height="240" style="width: 100%"></canvas>
+ <button id="up">Up</button>
+ <button id="down">Down</button>
+ <button id="left">Left</button>
+ <button id="right">Right</button>
+ <button id="a">A</button>
+ <button id="b">B</button>
+ <button id="start">Start</button>
+ <button id="select">Select</button>
+ <div>
+ <button id="noInputRec">NoInput+</button>
+ <button id="upRec">Up+</button>
+ <button id="downRec">Down+</button>
+ <button id="leftRec">Left+</button>
+ <button id="rightRec">Right+</button>
+ <button id="aRec">A+</button>
+ <button id="bRec">B+</button>
+ <button id="startRec">Start+</button>
+ <button id="selectRec">Select+</button>
+ </div>
</div>
- </body>
- <head>
- <script type="module" src="app.js"></script>
- </head>
-</html>
+ </div>
+ <div id="output" hidden>
+ <div id="latency"></div>
+ <div id="scan"></div>
+ <div><span id="outputData"></span></div>
+ </div>
+</body>
+
+<head>
+ <script type="module" src="app.js"></script>
+</head>
+
+</html>
\ No newline at end of file
--
GitLab