Skip to content
Snippets Groups Projects
Commit 9bf3c174 authored by spencerkee's avatar spencerkee
Browse files

Make function for string pulling

parent be6391c5
Branches master
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app.js
+ 188
− 55
View file @ 9bf3c174
......@@ -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++) {
......
index.html
+ 45
− 29
View file @ 9bf3c174
<!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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment