Merge pull request #17 from cse110-sp23-group20/palm-reading

Palm reading
cse110-sp23-group20 · May 31, 2023 · 2901d8e · 2901d8e
2 parents fbd988f + 410f29b
commit 2901d8e
Show file tree

Hide file tree

Showing 5 changed files with 295 additions and 0 deletions.
diff --git a/source/PalmReading/images/palm-reading.PNG b/source/PalmReading/images/palm-reading.PNG
diff --git a/source/PalmReading/index.html b/source/PalmReading/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PalmReading</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <script src="script.js"></script>
+  <script src="webcam.js" type="module"></script>
+  <div id="camera-frame" display="inline">
+    <button id="back">back</button>
+    <h1 class="title">Palm Reading</h1>
+    <div class="webcam-wrapper">
+      <video id="webcam-video"></video>
+      <button id="request-webcam">Click here to enable palm reader</button>
+      <p id="instructions">Please hold your hand over your camera.</p>
+    </div>
+    <br>
+    <button class="button" id="read-your-hand">Read your hand</button>
+  </div>
+
+  <div hidden id="picture-frame">
+    <div id="video-container">
+      <video id="video"></video>
+    </div>
+    <div id="button-container">
+      <button id="take-picture-button">Take Picture</button>
+    </div>
+  </div>
+
+  <div hidden id="results-frame">
+    <h1 class="title">Palm Reading Results</h1>
+    <div class="column" id="column1">
+      <h1 id="results-title">Results</h1>
+      <div id="result-button-container">
+        <canvas id="result" class="align-div"></canvas>
+        <button class="button" id="read-another-hand">Read another hand</button>
+      </div>
+    </div>
+
+    <div hidden id="results-frame">
+      <h1 class="title">Palm Reading Results</h1>
+      <div class="column" id="column1">
+        <h1 id="results-title">Results</h1>
+        <div id="result-button-container">
+          <img id="result" class="align-div" src="images/palm-reading.png" />
+          <button class="button" id="read-another-hand">
+            Read another hand
+          </button>
+        </div>
+      </div>
+      <div class="column" id="column2">
+        <div id="results-panel">
+          <div id="text-box" class="align-div">
+            <p id="result-text">This is the result.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/source/PalmReading/script.js b/source/PalmReading/script.js
@@ -0,0 +1,21 @@
+window.addEventListener("DOMContentLoaded", init);
+
+// Starts the program, all function calls trace back here
+function init() {
+  document
+    .getElementById("read-your-hand")
+    .addEventListener("click", showResults);
+  document
+    .getElementById("read-another-hand")
+    .addEventListener("click", readHand);
+}
+
+function showResults() {
+  document.getElementById("camera-frame").hidden = true;
+  document.getElementById("results-frame").hidden = false;
+}
+
+function readHand() {
+  document.getElementById("results-frame").hidden = true;
+  document.getElementById("camera-frame").hidden = false;
+}
diff --git a/source/PalmReading/style.css b/source/PalmReading/style.css
@@ -0,0 +1,177 @@
+/* code for picture-frame page */
+body {
+  font-family: sans-serif;
+  text-align: center;
+}
+h1 {
+  display: flex;
+  font-size: 1.5em;
+}
+img {
+  position: relative;
+  text-align: center;
+  height: 70vh;
+}
+.box {
+  margin: auto;
+  background-color: #3d3c59;
+  width: 100vw;
+  height: 5vh;
+  position: relative;
+  z-index: -1;
+}
+.box:first-child {
+  align-self: center;
+}
+
+#back {
+  text-align: left;
+  padding: 5px 10px;
+  width: 53px; /* modified by label length */
+  overflow: auto;
+  float: left;
+}
+.title {
+  position: relative;
+  text-align: center;
+  display: block;
+  justify-content: center;
+}
+#temp-camera {
+  position: absolute;
+  margin-top: 30vw;
+  margin-left: 44vw;
+  color: beige;
+}
+
+.button {
+  background-color: #f1c86c;
+  border-radius: 5px;
+}
+
+#read-your-hand {
+  width: 20%;
+  height: 10vh;
+  position: relative;
+  margin-top: 2vh;
+}
+
+#take-picture-button {
+  position: absolute;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+#button-container {
+  position: relative;
+  text-align: center;
+  margin-top: 40vh;
+  display: flex;
+  justify-content: center;
+}
+
+/* code for results page */
+
+/* splits page into 2 seperate columns */
+.column {
+  float: left;
+  text-align: center;
+}
+
+#column1 {
+  width: 40%;
+  margin-left: 4%;
+}
+
+#column2 {
+  width: 56%;
+}
+/* Clear floats after the columns */
+.row:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+#text-box {
+  margin-top: 15vh;
+  height: 55vh;
+  width: 50vw;
+  display: box;
+  float: center;
+  background-color: #3d3c59;
+  font-size: 30px;
+  border-radius: 10px;
+}
+
+.align-div {
+  position: inline-block;
+  vertical-align: middle;
+  justify-content: center;
+}
+
+#result {
+  object-fit: scale-down;
+  object-position: center;
+  max-width: 80%;
+  max-height: 70%;
+  display: inline;
+  float: center;
+  margin-bottom: 0vh;
+}
+
+#read-another-hand {
+  width: 20vw;
+  height: 10vh;
+  margin-top: -3vh;
+  position: relative;
+  object-position: center;
+}
+
+#result-button-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#result-text {
+  color: white;
+}
+
+.webcam-wrapper {
+  display: inline-flex;
+  background-color: #3d3c59;
+  border-radius: 10px;
+  padding: 15px;
+  position: relative;
+}
+#webcam-video {
+  /* Flip camera */
+  transform: scaleX(-1);
+  border-radius: 5px;
+  border: 1px solid black;
+}
+#request-webcam {
+  border: none;
+  background: none;
+  font: inherit;
+  color: white;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+#instructions {
+  display: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  text-align: center;
+  margin: 20px;
+  color: white;
+  text-shadow: 0 3px 10px black, 0 3px 10px black, 0 3px 10px black;
+}
diff --git a/source/PalmReading/webcam.js b/source/PalmReading/webcam.js
@@ -0,0 +1,33 @@
+function init () {
+  /**
+   * The `<video>` element that previews whatever is on the webcam.
+   * @type {HTMLVideoElement}
+   */
+  const video = document.getElementById('webcam-video')
+  const requestBtn = document.getElementById('request-webcam')
+  const instructions = document.getElementById('instructions')
+  requestBtn.addEventListener('click', async () => {
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true })
+    video.srcObject = stream
+    requestBtn.style.display = 'none'
+  })
+  video.addEventListener('loadedmetadata', () => {
+    video.play()
+    instructions.style.display = 'block'
+  })
+
+  /**
+   * The `<canvas>` element that captures whatever was on the webcam when you press "Read your hand".
+   * @type {HTMLVideoElement}
+   */
+  const result = document.getElementById('result')
+  const context = result.getContext('2d')
+  const readHandBtn = document.getElementById('read-your-hand')
+  readHandBtn.addEventListener('click', () => {
+    result.width = video.videoWidth
+    result.height = video.videoHeight
+    context.drawImage(video, 0, 0)
+  })
+}
+
+document.addEventListener('DOMContentLoaded', init)