NutriFind

Sleeping

App Files Files Community

HuggingFace-SK commited on Nov 27, 2024

Commit

5dc78f1

1 Parent(s): 1be30b3

update gui

Browse files

Files changed (3) hide show

static/index.js +10 -7
static/style.css +73 -6
templates/index.html +28 -8

static/index.js CHANGED Viewed

@@ -2,8 +2,7 @@ var video_facing_mode = "user"
 var res_h = 1200
 var res_w = 720
 var video = document.getElementById("webcam")
-var outputImage=document.getElementById("output_image")
-const canvasElement = document.getElementById("middleware_canvas");
 const canvasCtx = canvasElement.getContext("2d");
 var webcamRunning
 var pic_taken=false
@@ -15,12 +14,20 @@ const hasGetUserMedia = () => { var _a; return !!((_a = navigator.mediaDevices)
 // wants to activate it.
 if (hasGetUserMedia()) {
     document.getElementById("switch-camera").addEventListener("click", switch_camera);
     document.getElementById("take-pic").addEventListener("click", take_pic);
     clear_pic_btn.addEventListener("click", clear_pic);
 }
 else {
     console.warn("getUserMedia() is not supported by your browser");
 }
 async function switch_camera() {
     if (video_facing_mode == 'user') {
         webcamRunning = false
@@ -58,8 +65,6 @@ function img_load(){
   canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
   canvasCtx.drawImage(video, 0, 0, canvasElement.width, (video.videoHeight / video.videoWidth) * canvasElement.width)
-  var image = canvasElement.toDataURL()
-  outputImage.src= image
   if(pic_taken != true){
   setTimeout(function (){img_load()}, 10);
 }
@@ -69,8 +74,6 @@ function take_pic(){
   canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
   canvasCtx.drawImage(video, 0, 0, canvasElement.width, (video.videoHeight / video.videoWidth) * canvasElement.width)
   var image = canvasElement.toDataURL()
-  outputImage.src= image
   console.log(image)
   send_frame(image);
   clear_pic_btn.style.display="inline"
@@ -124,7 +127,7 @@ function updateResolution() {
     }
     // Update the displayed resolution
-    document.getElementById('currentResolution').innerText = `${width} x ${height} (${resolutionK}K)`;
     res_w=width
     res_h=height
 }

 var res_h = 1200
 var res_w = 720
 var video = document.getElementById("webcam")
+const canvasElement = document.getElementById("output_canvas");
 const canvasCtx = canvasElement.getContext("2d");
 var webcamRunning
 var pic_taken=false
 // wants to activate it.
 if (hasGetUserMedia()) {
     document.getElementById("switch-camera").addEventListener("click", switch_camera);
+    document.getElementById("webcamButton").addEventListener("click", enable_camera);
     document.getElementById("take-pic").addEventListener("click", take_pic);
     clear_pic_btn.addEventListener("click", clear_pic);
 }
 else {
     console.warn("getUserMedia() is not supported by your browser");
 }
+function enable_camera(){
+        video_facing_mode = 'environment'
+        load_camera()
+        webcamRunning = true
+        document.getElementById("webcamButton").style.display="none";
+        document.getElementById("switch-camera").style.display="block";
+}
 async function switch_camera() {
     if (video_facing_mode == 'user') {
         webcamRunning = false
   canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
   canvasCtx.drawImage(video, 0, 0, canvasElement.width, (video.videoHeight / video.videoWidth) * canvasElement.width)
   if(pic_taken != true){
   setTimeout(function (){img_load()}, 10);
 }
   canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
   canvasCtx.drawImage(video, 0, 0, canvasElement.width, (video.videoHeight / video.videoWidth) * canvasElement.width)
   var image = canvasElement.toDataURL()
   console.log(image)
   send_frame(image);
   clear_pic_btn.style.display="inline"
     }
     // Update the displayed resolution
+    document.getElementById('currentResolution').innerText = `${resolutionK}K`;
     res_w=width
     res_h=height
 }

static/style.css CHANGED Viewed

@@ -1,10 +1,77 @@
-*{
   box-sizing: border-box;
 }
-img{
-  text-align: center;
-  width:100%;
-  margin:2px;
-  height:auto;
 }

+* {
   box-sizing: border-box;
 }
+body {
+  font-family: roboto;
+  color: #3d3d3d;
+  --mdc-theme-primary: #007f8b;
+  --mdc-theme-on-primary: #f1f3f4;
+  margin-left: 8px;
+}
+.container {
+  position: relative;
+}
+.canvas_wrapper{
+position: relative;
+text-align: left;
+height:290px;
+background-color: #F3F3F3;
+box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
+margin:10px;
+margin-bottom: 20px;
+border-radius: 15px;
+overflow: hidden;
+}
+#output_canvas{
+  display:block; position:absolute;
+  left:50%;
+  transform: translateX(-50%);
+  width:auto;
+  height:100%
+}
+#webcamButton{
+margin: 0;
+position: absolute;
+top: 50%;
+left: 50%;
+-ms-transform: translate(-50%, -50%);
+transform: translate(-50%, -50%);
+padding:10px;
+border:none;
+border-radius: 12.25px;
+background-color: #f2f2f2;
+box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
+}
+.btn{
+  margin: 0;
+position: relative;
+padding:10px;
+border:none;
+border-radius: 12.25px;
+background-color: #f2f2f2;
+box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
+font-weight: 600;
+color:black;
+}
+.sld{
+  margin: 0;
+  position: relative;
+  display:block;
+  margin-top: 20px;
+  padding:10px;
+  border:none;
+  border-radius: 12.25px;
+  background-color: #f2f2f2;
+  box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
+  font-weight: 600;
+  color:black;
 }

templates/index.html CHANGED Viewed

@@ -8,14 +8,34 @@
     <script type="module" src="static/index.js"></script>
   </head>
   <body>
-    <video id="webcam" style="display:none" autoplay="" playsinline=""></video>
-    <canvas id="middleware_canvas" style="display:none"></canvas>
-    <img id="output_image"></img>
-    <button id="switch-camera">switch_cam</button>
-    <button id="take-pic">take_pic</button>
-    <button id="clear-pic" style="display:none">clear_pic</button>
-    <input type="range" id="resolution" min="0" max="4000" step="100" value="0">
-    <p>Current Resolution: <span id="currentResolution">0 x 0 (0K)</span></p>
     </body>
 </html>

     <script type="module" src="static/index.js"></script>
   </head>
   <body>
+    <div class="container">
+      <video id="webcam" style="display:none" autoplay="" playsinline=""></video>
+      <div class="canvas_wrapper" id="canvas_wrapper">
+          <button id="switch-camera" style="display:none; position: absolute; top:10px; left:10px; padding:5px; height:40px; width:40px; text-align: center; border-radius: 12.25px; font-size: 20px; font-weight: 900; border:none;   background-color: #f2f2f2; color:black;
+box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38); z-index:100">
+              <span>⟳</span>
+          </button>
+          <center>
+          <canvas class="output_canvas" id="output_canvas"></canvas>
+          </center>
+          <center>
+              <button id="webcamButton" style="font-weight: 600; color:black;">
+                  <span>Enable Webcam</span>
+              </button>
+          </center>
+      </div>
+  </div>
+  <center>
+  <button class="btn" id="take-pic">Take Picture</button>
+  <button class="btn" id="clear-pic" style="display:none">Clear Picture</button>
+  <span class="sld">
+  <input type="range" id="resolution" min="0" max="4000" step="100" value="0">
+  <span style="display:block"id="currentResolution"></span>
+  </span>
+  </center>
     </body>
 </html>