update ui

static/index.js

@@ -6,8 +6,10 @@ const canvasElement = document.getElementById("output_canvas");
 const canvasCtx = canvasElement.getContext("2d");
 var webcamRunning
 var pic_taken=false
+var take_pic_btn= document.getElementById("take-pic")
 var clear_pic_btn= document.getElementById("clear-pic")
-
+var send_pic_btn= document.getElementById("send-pic")
+var taken_image;
 // Check if webcam access is supported.
 const hasGetUserMedia = () => { var _a; return !!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia); };
 // If webcam supported, add event listener to button for when user
@@ -15,8 +17,9 @@ const hasGetUserMedia = () => { var _a; return !!((_a = navigator.mediaDevices)
 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);
+    take_pic_btn.addEventListener("click", take_pic);
     clear_pic_btn.addEventListener("click", clear_pic);
+    send_pic_btn.addEventListener("click", send_pic);
 }
 else {
     console.warn("getUserMedia() is not supported by your browser");
@@ -73,14 +76,27 @@ function take_pic(){
   pic_taken=true;
   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"
+  taken_image = canvasElement.toDataURL()
+  console.log(taken_image)
+    clear_pic_btn.style.display="inline"
+    send_pic_btn.style.display="inline"
+    take_pic_btn.style.display="none"
+    
+}
+
+function send_pic(){
+  send_frame(taken_image);
+  clear_pic_btn.style.display="none"
+  send_pic_btn.style.display="none"
+  take_pic_btn.style.display="inline"
+  pic_taken=false;
+  img_load()
 }
 
 function clear_pic(){
   clear_pic_btn.style.display="none"
+  send_pic_btn.style.display="none"
+  take_pic_btn.style.display="inline"
   pic_taken=false;
   img_load()
   

templates/index.html

@@ -29,8 +29,9 @@ box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38); z-index:100">
       </div>
   </div>
   <center>
-  <button class="btn" id="take-pic">Take Picture</button>
-  <button class="btn" id="clear-pic" style="display:none">Clear Picture</button>
+  <button class="btn" id="take-pic">Click</button>
+  <button class="btn" id="clear-pic" style="display:none">Clear ✖</button>
+  <button class="btn" id="send-pic" style="display:none">Send ➤</button>
   <span class="sld">
   <input type="range" id="resolution" min="0" max="4000" step="100" value="0">
   <span style="display:block"id="currentResolution"></span>