fix video, fix form submit, fix measuring two length instead of one, increase canvas resolution

setup_microscope.html

@@ -12,30 +12,40 @@
     }
     #video_container{
       position: relative;
-        height:100%;
     }
 
     #video {
-        position:relative;
+      position:absolute;
-        z-index: 15;
+      z-index: 9;
-        height:100%;
+      width: 100%;
     }
 
     #canvas-draw{
       position:absolute;
       z-index:10;
-        height:100%;
+      width: 100%;
+    }
+    #canvas-debug{
+      position:absolute;
+      z-index:10;
+      width: 20em;
+      opacity: 100%;
     }
 
     #photo {
       position:absolute;
       z-index:5;
-        height:100%
+      width: 100%;
+
     }
 
     #canvas-temp{
       display: none;
     }
+
+    #control-elements {
+      height:30em;
+    }
     </style>
   </header>
 
@@ -59,30 +69,18 @@
             Toggle camera
           </button>
         </div>
-        <div id="real_dimensions" class="row align-items-end">
+        <div id="control_elements" class="row align-items-end">
-          <p>
+          <div class="col" name="length" >
-            put an object of known length and width under the microscope.
+            <label class = "form-label" for="real_length">
-            enter width and height of measured object
+              Please enter the length of the object in um:
-          </p>
-          <div class="col" name="width" >
-            <label class = "form-label" for="real_width">
-              Width
             </label>
-            <input class="form-control" id = "real_width" type="text"
+            <input class="form-control" id = "real_length" type="text"
-                      name="real_width" value=0>
+                      name="real_length" value=0>
-            </input>
-          </div>
-          <div class="col" name="height" >
-            <label class = "form-label" for="real_height">
-              Height
-            </label>
-            <input class="form-control" id = "real_height" type="text"
-                      name="real_height" value=0>
             </input>
           </div>
         </div>
         <br>
-        <form class="needs-validation" name = "microscope_setup" onsubmit="return false;">
+        <form class="needs-validation" id = "microscope_setup">
           <div class="row">
         	  <div class="col">
               <label class = "form-label" for="name">
@@ -153,11 +151,11 @@
               </label>
             </div>
             <div class="col">
-              <input class="form-control" type="number" name="eyepiece_number">
+              <input class="form-control" type="number" id = "Eyepiece_Number" name="eyepiece_number">
               </input>
             </div>
           </div>
-          <button class="btn btn-primary float-end" onclick="add();">submit</button>
+          <button class="btn btn-primary float-end" type="submit">submit</button>
         </form>
   </div>
 
@@ -190,8 +188,11 @@
     db = openRequest.result;
     // continue working with database using db object
   };
-  function add(e){
+
-    e.preventDefault();
+  const form = document.getElementById("microscope_setup");
+  form.addEventListener("submit", add);
+
+  function add(event){
     let microscope_setup = {
       "name" : document.getElementById("name").value,
       "FoV_Height" : document.getElementById("FoV_height").value,
@@ -210,13 +211,13 @@
       console.log("something went wrong");
       // Don't forget to handle errors!
     };
+    event.preventDefault();
+
   }
 </script>
 <script>
 var video = document.querySelector("#video");
 var out = document.querySelector("#output");
-// width of FoV -- will be supplied by FLASK microscope setup.
-var real_width_FoV = 255;
 // init video switching get IDs of video inputs
 
 navigator.mediaDevices
@@ -238,11 +239,6 @@ navigator.mediaDevices
 
 var deviceIDs = [];
 var device_index = 0;
-var real_dimensions = document.querySelector("#real_dimensions");
-var fov_width = document.querySelector("#FoV_width");
-var fov_height = document.querySelector("#FoV_height");
-var real_width = document.querySelector("#real_width");
-var real_height = document.querySelector("#real_height");
 
 function toggle_cam(){
   device_index += 1
@@ -263,6 +259,10 @@ function toggle_cam(){
   }
 };
 
+var real_dimensions = document.querySelector("#real_dimensions");
+var fov_width = document.querySelector("#FoV_width");
+var fov_height = document.querySelector("#FoV_height");
+var real_length = document.querySelector("#real_length");
 
 // init drawing
 var canvas_draw = document.querySelector("#canvas-draw");
@@ -303,51 +303,21 @@ function setPosition(e) {
 // the draw function to draw onto canvas
 canvas_draw.addEventListener('mousemove', draw);
 
-function draw_path(path){
-  // draw on canvas.
-  ctx.beginPath(); // begin
-  ctx.lineWidth = 0.5;
-  ctx.lineCap = 'round';
-  ctx.strokeStyle = 'black';
-  for (var i = 0; i < path.length-1; i++) {
-    ctx.moveTo(path[i].x, path[i].y);
-    ctx.lineTo(path[i+1].x, path[i+1].y);
-    ctx.stroke();
-  }
-}
-
-
 function draw(e) {
   // mouse left button must be pressed and video must be hidden / a photo must have been taken.
    if (e.buttons !== 1 && line.length !== 0) {
       // push the line to lines array
       console.log('Yay');
-      if (lines.length == 0){
+      line.push({x: pos.x, y: pos.y});
-        line.push({x: start_pos.x, y: pos.y});
+      let measured_length = get_length(line);
-        lines.push(line);
+      fov_height.value = ((real_length.value/(measured_length * canvas_draw.width))* canvas_draw.width).toFixed(0);
-        let measured_height = get_length(line);
+      fov_width.value = ((real_length.value/(measured_length * canvas_draw.width))* canvas_draw.height).toFixed(0);
-        fov_height.value = ((real_height.value/(measured_height * canvas_draw.width))*canvas_draw.height).toFixed(0);
+
       line = [];
-
       return;
-
-      } else if ((lines.length == 1)){
-        line.push({x: pos.x, y: start_pos.y});
-        lines.push(line);
-        let measured_width = get_length(line);
-        fov_width.value = ((real_width.value/(measured_width * canvas_draw.width)) * canvas_draw.width).toFixed(0);
-        line = [];
-
-        return;
-
-      }
-
    }
   // draw on canvas.
   if (e.buttons == 1){
-    if (lines.length == 2){
-      lines=[];
-    }
 
     canvas_draw.getContext('2d').clearRect(0, 0, canvas_draw.width, canvas_draw.height);
     if (lines.length == 1){
@@ -355,25 +325,20 @@ function draw(e) {
     }
 
     ctx.beginPath(); // begin
-    ctx.lineWidth = 0.5;
+    ctx.lineWidth = 5;
     ctx.lineCap = 'round';
     ctx.strokeStyle = 'black';
     // update line
     // first time push the first position
     if (line.length == 0){
-      console.log('yay');
       start_pos = {x:pos.x, y:pos.y};
       line.push(start_pos);
     }
-    console.log(start_pos.x)
 
     ctx.moveTo(start_pos.x, start_pos.y); // from
     setPosition(e);
-    if (lines.length==0){
+    ctx.lineTo(pos.x, pos.y); // to
-      ctx.lineTo(start_pos.x, pos.y); // to
+
-    } else if (lines.length==1){
-      ctx.lineTo(pos.x, start_pos.y); // to
-    }
     ctx.stroke(); // draw it!
   }
 }
@@ -388,7 +353,7 @@ function draw(e) {
     startButton = document.getElementById("start-button");
 
     navigator.mediaDevices
-      .getUserMedia({ video: true, audio: false })
+      .getUserMedia({ video: {width: { ideal:  99999} , height: { ideal: 99999 }}, audio: false })
       .then((stream) => {
         video.srcObject = stream;
         video.play();
@@ -410,6 +375,8 @@ function draw(e) {
           canvas.style.aspectRatio = video_aspect;
 
           canvas_draw.style.aspectRatio = video_aspect;
+          canvas_draw.height = canvas_draw.height*5;
+          canvas_draw.width = canvas_draw.height*video_aspect;
 
           streaming = true;
         }