cse110-sp23-group20 · SheepTester · Jun 10, 2023 · Jun 7, 2023 · Jun 9, 2023 · Jun 9, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -8,6 +8,7 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
+  "ignorePatterns": ["/JSDOCS/scripts"],
   "overrides": [
     {
       "files": ["*.test.js"],

diff --git a/.github/workflows/jsdocs.yml b/.github/workflows/jsdocs.yml
@@ -0,0 +1,25 @@
+name: Generate JSDOCS
+run-name: Action by @${{ github.actor }}
+on: push
+permissions:
+  contents: write
+jobs:
+  jsdocs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Build JSDOCS
+        uses: andstor/jsdoc-action@v1
+        with:
+          source_dir: ./source
+          recurse: true
+          output_dir: ./JSDOCs
+          template: minami
+      - name: Commit JSDOCS
+        uses: EndBug/add-and-commit@v9
+        with:
+          author_name: GitHub Actions
+          author_email: noreply@github.com
+          message: "Generated JSDocs"
+          add: "JSDOCs/*"
diff --git a/.jsdoc.conf.json b/.jsdoc.conf.json
@@ -0,0 +1,21 @@
+{
+  "plugins": [],
+  "recurseDepth": 10,
+  "opts": {
+    "recurse": true
+  },
+  "source": {
+    "include": ["src"],
+    "includePattern": ".+\\.js(doc|x)?$",
+    "excludePattern": "node_modules"
+  },
+  "sourceType": "module",
+  "tags": {
+    "allowUnknownTags": true,
+    "dictionaries": ["jsdoc", "closure"]
+  },
+  "templates": {
+    "cleverLinks": false,
+    "monospaceLinks": false
+  }
+}
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+JSDOCs
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "liveServer.settings.port": 5501
+  "liveServer.settings.port": 5502
 }
diff --git a/JSDOCs/FortuneCookie_fortuneCookie.js.html b/JSDOCs/FortuneCookie_fortuneCookie.js.html
diff --git a/JSDOCs/PalmReading_script.js.html b/JSDOCs/PalmReading_script.js.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>PalmReading/script.js - Documentation</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+<body>
+
+<input type="checkbox" id="nav-trigger" class="nav-trigger" />
+<label for="nav-trigger" class="navicon-button x">
+  <div class="navicon"></div>
+</label>
+
+<label for="nav-trigger" class="overlay"></label>
+
+<nav>
+    <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#determineDateRangeLeft">determineDateRangeLeft</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#determineDateRangeRight">determineDateRangeRight</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#determinePairing">determinePairing</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#disableButton">disableButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#displayResults">displayResults</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#enableButton">enableButton</a></span></li><li class="nav-item"><span class="nav-item-type type-member">M</span><span class="nav-item-name"><a href="global.html#fortunes">fortunes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#getMappingLeft">getMappingLeft</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#getMappingRight">getMappingRight</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#getRandomFortune">getRandomFortune</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#handleFortune">handleFortune</a></span></li><li class="nav-item"><span class="nav-item-type type-member">M</span><span class="nav-item-name"><a href="global.html#lastInstructionElem">lastInstructionElem</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#populateVoiceList">populateVoiceList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#rotateleftWheel">rotateleftWheel</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#rotaterightWheel">rotaterightWheel</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#roundAngle">roundAngle</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#setInstructions">setInstructions</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#showFortune">showFortune</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#speakFortune">speakFortune</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#stopRotation">stopRotation</a></span></li><li class="nav-item"><span class="nav-item-type type-member">M</span><span class="nav-item-name"><a href="global.html#synth">synth</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#textGenerator">textGenerator</a></span></li><li class="nav-item"><span class="nav-item-type type-member">M</span><span class="nav-item-name"><a href="global.html#video">video</a></span></li>
+</nav>
+
+<div id="main">
+
+    <h1 class="page-title">PalmReading/script.js</h1>
+
+
+
+
+
+
+
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>const fortune = document.getElementById("fortune-paragraph");
+// etc
+
+/**
+ * Generates random fortunes. Called when the app finishes analyzing the palm.
+ */
+export function handleFortune() {
+  console.log("TODO", fortune);
+}
+
+const tabLabels = document.querySelectorAll('input[name="tab"]');
+const tabContents = document.querySelectorAll('.tab-content');
+
+tabLabels.forEach(function(label){
+  label.addEventListener('change',function(){
+    tabContents.forEach(function(content){
+      content.hidden = true;
+    });
+
+    const selectedContent = document.getElementById(`${this.value}-tab`);
+    selectedContent.hidden = false;
+  });
+});</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<br class="clear">
+
+<footer>
+    Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Sat Jun 10 2023 05:29:06 GMT+0000 (Coordinated Universal Time) using the Minami theme.
+</footer>
+
+<script>prettyPrint();</script>
+<script src="scripts/linenumber.js"></script>
+</body>
+</html>
diff --git a/JSDOCs/PalmReading_webcam.js.html b/JSDOCs/PalmReading_webcam.js.html
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>PalmReading/webcam.js - Documentation</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+<body>
+
+<input type="checkbox" id="nav-trigger" class="nav-trigger" />
+<label for="nav-trigger" class="navicon-button x">
+  <div class="navicon"></div>
+</label>
+
+<label for="nav-trigger" class="overlay"></label>
+
+<nav>
+    <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#determineDateRangeLeft">determineDateRangeLeft</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#determineDateRangeRight">determineDateRangeRight</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#determinePairing">determinePairing</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#disableButton">disableButton</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#displayResults">displayResults</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#enableButton">enableButton</a></span></li><li class="nav-item"><span class="nav-item-type type-member">M</span><span class="nav-item-name"><a href="global.html#fortunes">fortunes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#getMappingLeft">getMappingLeft</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#getMappingRight">getMappingRight</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#getRandomFortune">getRandomFortune</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#handleFortune">handleFortune</a></span></li><li class="nav-item"><span class="nav-item-type type-member">M</span><span class="nav-item-name"><a href="global.html#lastInstructionElem">lastInstructionElem</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#populateVoiceList">populateVoiceList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#rotateleftWheel">rotateleftWheel</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#rotaterightWheel">rotaterightWheel</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#roundAngle">roundAngle</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#setInstructions">setInstructions</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#showFortune">showFortune</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#speakFortune">speakFortune</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#stopRotation">stopRotation</a></span></li><li class="nav-item"><span class="nav-item-type type-member">M</span><span class="nav-item-name"><a href="global.html#synth">synth</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#textGenerator">textGenerator</a></span></li><li class="nav-item"><span class="nav-item-type type-member">M</span><span class="nav-item-name"><a href="global.html#video">video</a></span></li>
+</nav>
+
+<div id="main">
+
+    <h1 class="page-title">PalmReading/webcam.js</h1>
+
+
+
+
+
+
+
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>import { handleFortune } from "./script.js";
+
+const webcamWrapper = document.getElementById("webcam-wrapper");
+/**
+ * The currently displayed `.instructions` element.
+ * @type {HTMLParagraphElement | null}
+ */
+let lastInstructionElem = null;
+/**
+ * Sets the message that appears under the webcam while it is analyzing the
+ * palm. There will be a fade transition between the previous and new
+ * instruction message.
+ *
+ * @param {string} instruction - The message to display. If an empty string,
+ * it'll hide the instructions.
+ */
+function setInstructions(instruction) {
+  if (lastInstructionElem) {
+    lastInstructionElem.addEventListener("animationend", (e) => {
+      e.currentTarget.remove();
+    });
+    lastInstructionElem.classList.remove("instructions-active");
+  }
+  if (instruction) {
+    lastInstructionElem = Object.assign(document.createElement("p"), {
+      textContent: instruction,
+      className: "instructions instructions-active",
+    });
+    webcamWrapper.append(lastInstructionElem);
+  } else {
+    lastInstructionElem = null;
+  }
+}
+
+/**
+ * The `&lt;video>` element that previews whatever is on the webcam.
+ * @type {HTMLVideoElement}
+ */
+const video = document.getElementById("webcam-video");
+const requestBtn = document.getElementById("request-webcam");
+const ecgGraph = document.getElementById("ecg");
+const result = document.getElementById("result-palm");
+const context = result.getContext("2d");
+const readAnother = document.getElementById("read-another-hand");
+let flipCamera = true;
+async function startCamera() {
+  document.body.classList.remove("show-results");
+  requestBtn.parentNode.style.display = "none";
+  readAnother.style.display = "none";
+  flipCamera = true;
+  video.classList.add("flip");
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+    video.srcObject = stream;
+    const track = stream.getTracks()[0];
+    // Firefox does not support getCapabilities
+    if ("getCapabilities" in track) {
+      const { facingMode } = track.getCapabilities();
+      if (facingMode.includes("environment")) {
+        video.classList.remove("flip");
+        flipCamera = false;
+      }
+    }
+  } catch (error) {
+    requestBtn.parentNode.style.display = null;
+  }
+}
+requestBtn.addEventListener("click", startCamera);
+video.addEventListener("loadedmetadata", () => {
+  video.play();
+  video.classList.add("video-on");
+  ecgGraph.classList.add("ecg-active");
+  ecgHistory.splice(0, ecgHistory.length);
+
+  setTimeout(() => {
+    setInstructions("Please hold your hand over your camera.");
+  }, 500);
+  setTimeout(() => {
+    frameId = 0;
+    paintEcg();
+    setInstructions("Heartbeat detected.");
+  }, 3000);
+  setTimeout(() => {
+    paintEcg();
+    setInstructions("Keep your hand steady.");
+  }, 6000);
+  setTimeout(() => {
+    video.pause();
+    const size = Math.min(video.videoWidth, video.videoHeight);
+    result.width = size;
+    result.height = size;
+    if (flipCamera) {
+      context.translate(size, 0);
+      context.scale(-1, 1);
+    }
+    if (video.videoWidth > video.videoHeight) {
+      context.drawImage(video, -(video.videoWidth - video.videoHeight) / 2, 0);
+    } else {
+      context.drawImage(video, 0, -(video.videoHeight - video.videoWidth) / 2);
+    }
+    video.srcObject.getTracks()[0].stop();
+    window.cancelAnimationFrame(frameId);
+    frameId = null;
+    video.classList.remove("video-on");
+    ecgGraph.classList.remove("ecg-active");
+    setInstructions("");
+    readAnother.style.display = "block";
+    handleFortune();
+    document.body.classList.add("show-results");
+  }, 10000);
+});
+readAnother.addEventListener("click", startCamera);
+
+// 20 units is about 0.6s, so 1 s = 33ish units
+const ecgPoints = [
+  [-0.8, 0.2],
+  [0.4, 1.2],
+  [1.5, 0.2],
+  [4.8, 0.2],
+  [5.1, -0.8],
+  [6.2, 13.9],
+  [7.4, -4],
+  [7.8, 0.2],
+  [10, 0.8],
+  [12, 4],
+  [13, 4],
+  [15, 0.5],
+  [16.8, 1.1],
+  [18, 0.2],
+];
+const XSHIFT = 0.8;
+const YSHIFT = -0.2;
+const PERIOD = 30;
+function ecg(time) {
+  time = time % PERIOD;
+  const index = ecgPoints.findIndex(([x]) => x + XSHIFT > time);
+  if (index === -1) {
+    return 0;
+  }
+  const [left, right] = ecgPoints.slice(index - 1, index + 1);
+  return (
+    ((time - XSHIFT - left[0]) * (right[1] - left[1])) / (right[0] - left[0]) +
+    left[1] +
+    YSHIFT
+  );
+}
+
+const ECG_LENGTH = 300;
+const FPS = 60;
+const ecgPath = document.getElementById("ecg-path");
+const ecgHistory = [];
+let simTime = 0;
+let startTime = Date.now();
+let frameId = null;
+function paintEcg() {
+  if (frameId === null) {
+    return;
+  }
+  // Correct for different monitor refresh rates
+  const now = Date.now();
+  const realTime = now - startTime;
+  if (realTime - simTime > 500) {
+    // If too much time passed
+    simTime = 0;
+    startTime = now;
+  } else {
+    while (simTime &lt; realTime) {
+      ecgHistory.unshift(
+        -ecg(now / 30) * (Math.random() * 1 + 2.5) +
+          15 +
+          (Math.random() - 0.5) * 2
+      );
+      while (ecgHistory.length > ECG_LENGTH) {
+        ecgHistory.pop();
+      }
+      ecgPath.setAttributeNS(
+        null,
+        "d",
+        "M" + ecgHistory.map((pt, i) => `${i + 1} ${pt}`).join("L")
+      );
+      simTime += 1000 / FPS;
+    }
+  }
+  frameId = window.requestAnimationFrame(paintEcg);
+}
+</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<br class="clear">
+
+<footer>
+    Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Sat Jun 10 2023 05:29:06 GMT+0000 (Coordinated Universal Time) using the Minami theme.
+</footer>
+
+<script>prettyPrint();</script>
+<script src="scripts/linenumber.js"></script>
+</body>
+</html>