remove organism table from control elements

add choosers and startup when default prefs are loaded.

observe_main.html

@@ -54,7 +54,24 @@
     <canvas id="canvas-temp"></canvas>
 
     <div class="container">
-
+    <div class="row">
+      <div class="col-3">
+          <label class = "form-label" for="camera_chooser">choose the camera setup</label>
+          <select class="form-select" name="camera_chooser" id = "camera_chooser"></select>
+      </div>
+      <div class="col-3">
+          <label class = "form-label" for="protocol_chooser">choose the preparation protocol</label>
+          <select class="form-select" name="protocol_chooser" id = "protocol_chooser"></select>
+      </div>
+      <div class="col-3">
+          <label class = "form-label" for="dilution">change dilution</label>
+          <input class="form-control" name="dilution" id = "dilution"></input>
+      </div>
+      <div class="col-3">
+          <label class = "form-label" for="sample_chooser">choose the sample</label>
+          <select class="form-select" name="sample_chooser" id = "sample_chooser"></select>
+      </div>
+    </div>
     <!-- the output div is used to display the video, the photo and the canvas where you can draw in (and measure) your organisms. -->
     <div id="output" class="row">
       <div id = "video_container" class="col-9">
@@ -101,45 +118,17 @@
         </div>
 
         <button class="btn btn-primary float-end" id="organism_submit">submit organism</button>
-
-        <div id="organisms-table">
-          <h2> organisms </h2>
-          <table id= "org-table" style="width:100%">
-            <thead>
-            <tr>
-              <th>
-                type
-              </th>
-              <th>
-                length
-              </th>
-              <th>
-                width
-              </th>
-              <th>
-                colour
-              </th>
-              <th>
-                notes
-              </th>
-              <th>
-                actions
-              </th>
-            </tr>
-            </thead>
-            <tbody>
-            </tbody>
-          </table>
-        </div>
         <button class="btn btn-primary float-end" onclick="push_to_FoV();">submit picture</button>
-      </div>
 
     </div>
+    <div class="col-9">
+      <div class = "row">
+          <button class="btn btn-primary float-end"  onclick="toggleFullscreen();" id="fullscreen-button">
+            toggle Fullscreen video
+          </button>
+      </div>
+    </div>
 
-
-    <button class="btn btn-primary float-end" onclick="toggleFullscreen();" id="fullscreen-button">toggle Fullscreen video</button>
-    <div class="row">
-      <button class="btn btn-primary float-end" onclick="toggle_cam();">Toggle camera</button>
   </div>
 
 
@@ -286,13 +275,22 @@
     </div>
   </div>
     <script>
+    var video = document.querySelector("#video");
+    var out = document.querySelector("#output");
+    var microscope_setups = {};
+    var microscope_setup;
+    var default_setup_id;
+    var prep_protocols = {};
+    var prep_protocol;
+    var default_protocol_id;
+    var sample;
+    var samples = {};
+    var dilution_chooser = document.querySelector("#dilution")
 
+    // toggle fullscreen of output element (video + control elements)
     function toggleFullscreen() {
-        console.log('yay');
-        let elem = document.querySelector("#output");
-
       if (!document.fullscreenElement) {
-          elem.requestFullscreen().catch((err) => {
+        out.requestFullscreen().catch((err) => {
           alert(
             `Error attempting to enable fullscreen mode: ${err.message} (${err.name})`,
           );
@@ -302,55 +300,189 @@
       }
 
     }
+    // video shit.
+    // init video get video prefs from db
 
+    var db;
+    let openRequest = indexedDB.open("my_db");
 
-    var video = document.querySelector("#video");
+    openRequest.onerror = function() {
-    var out = document.querySelector("#output");
+      console.error("Error", openRequest.error);
+    };
+
+    openRequest.onsuccess = function() {
+      db = openRequest.result;
+      get_default_camera_setup();
+      get_default_prep_setup();
+      get_all_samples();
+
+      // continue working with database using db object
+    };
+
+    function get_default_camera_setup(){
+      const request = db.transaction('defaults')
+                   .objectStore('defaults')
+                   .get(0);
+      request.onsuccess = ()=> {
+         default_setup_id = request.result.microscope_setup;
+         get_all_video_prefs();
          // width of FoV -- will be supplied by FLASK microscope setup.
-    var real_width_FoV = 255;
 
-    // init video switching get IDs of video inputs
-
-    var deviceIDs = [];
-
-    navigator.mediaDevices
-        .enumerateDevices()
-        .then((devices) => {
-          devices.forEach((device) => {
-            if (device.kind=="videoinput"){
-            deviceIDs.push(device.deviceId);
       }
-            console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
-          });
-        })
-        .catch((err) => {
-          console.error(`${err.name}: ${err.message}`);
-        });
 
-    // toggle between cameras
+      request.onerror = (err)=> {
+          console.error(`Error to get all setups: ${err}`)
+      }
+    }
 
-    var device_index = 0;
+    function get_all_video_prefs(){
+      const request = db.transaction('microscope_setup')
+                   .objectStore('microscope_setup')
+                   .openCursor();
+      request.onsuccess = ()=> {
+        let cursor = event.target.result;
+          if (cursor) {
+            // Access the current record
+            make_camera_chooser(cursor.value, cursor.key);
+            // Move to the next record
+            cursor.continue();
+          }
+          else{
+            startup();
+          }
+      }
 
-    function toggle_cam(){
+      request.onerror = (err)=> {
-      device_index += 1
+          console.error(`Error to get all setups: ${err}`)
-      if (device_index>=deviceIDs.length){
+      }
-        device_index=0
+    }
+
+
+
+    var camera_chooser = document.querySelector("#camera_chooser");
+
+    function make_camera_chooser(setup, key){
+        let cameraID = document.createElement("option");
+        let text = document.createTextNode(setup.name);
+        cameraID.value = microscope_setups.length;
+        microscope_setups[key] = setup
+
+
+        if (key == default_setup_id){
+          cameraID.defaultSelected = true;
+          text.textContent += " (default)"
+          microscope_setup = setup;
+        }
+        cameraID.appendChild(text);
+        camera_chooser.appendChild(cameraID);
+    }
+
+    camera_chooser.addEventListener("change", change_cam);
+    function change_cam(){
+      microscope_setup = microscope_setups[this.value];
+      startup();
     };
 
-      if (navigator.mediaDevices.getUserMedia) {
+
-      navigator.mediaDevices.getUserMedia({ video: {
+    function get_default_prep_setup(){
-        deviceId: deviceIDs[device_index],
+      const request = db.transaction('defaults')
-      }, })
+                   .objectStore('defaults')
-        .then(function (stream) {
+                   .get(1);
-          video.srcObject = stream;
+      request.onsuccess = ()=> {
-        })
+         default_protocol_id = request.result.prep_setup;
-        .catch(function (error) {
+         get_all_prep_prefs();
-          console.log("Something went wrong!");
+
-        });
+         // width of FoV -- will be supplied by FLASK microscope setup.
+
       }
+
+      request.onerror = (err)=> {
+          console.error(`Error to get all setups: ${err}`)
+      }
+    }
+
+    function get_all_prep_prefs(){
+      const request = db.transaction('prep_protocol')
+                   .objectStore('prep_protocol')
+                   .openCursor();
+      request.onsuccess = ()=> {
+        let cursor = event.target.result;
+          if (cursor) {
+            // Access the current record
+            make_protocol_chooser(cursor.value, cursor.key);
+            // Move to the next record
+            cursor.continue();
+          }
+
+      }
+
+      request.onerror = (err)=> {
+          console.error(`Error to get all setups: ${err}`)
+      }
+    }
+
+    var protocol_chooser = document.querySelector("#protocol_chooser");
+
+    function make_protocol_chooser(protocol, key){
+        let protocolID = document.createElement("option");
+        let text = document.createTextNode(protocol.name);
+        protocolID.value = key;
+        prep_protocols[key] = protocol;
+        if (key == default_protocol_id){
+          protocolID.defaultSelected = true;
+          prep_protocol = protocol;
+          text.textContent += " (default)";
+          dilution_chooser.value = protocol.Main_Dilution;
+
+
+        }
+        protocolID.appendChild(text);
+        protocol_chooser.appendChild(protocolID);
+    }
+
+    protocol_chooser.addEventListener("change", change_protocol);
+    function change_protocol(){
+      prep_protocol = prep_protocols[this.value];
+      dilution_chooser.value = prep_protocol.Main_Dilution;
     };
 
-    // init drawing
+
+    function get_all_samples(){
+      const request = db.transaction('sample')
+                   .objectStore('sample')
+                   .openCursor();
+      request.onsuccess = ()=> {
+        let cursor = event.target.result;
+          if (cursor) {
+            // Access the current record
+            make_sample_chooser(cursor.value, cursor.key);
+            sample = cursor.key;
+            // Move to the next record
+            cursor.continue();
+          }
+
+      }
+
+      request.onerror = (err)=> {
+          console.error(`Error to get all setups: ${err}`)
+      }
+    }
+
+    var sample_chooser = document.querySelector("#sample_chooser");
+
+    function make_sample_chooser(sample, key){
+        let sampleID = document.createElement("option");
+        let text = document.createTextNode(sample.Name);
+        sampleID.value = key;
+        samples[key] = sample;
+        sampleID.appendChild(text);
+        sample_chooser.appendChild(sampleID);
+    }
+
+    sample_chooser.addEventListener("change", change_sample);
+    function change_sample(){
+      sample = samples[this.value];
+    };
 
     var canvas_draw = document.querySelector("#canvas-draw");
     var ctx = canvas_draw.getContext('2d');
@@ -987,7 +1119,24 @@
     result_submit.addEventListener('click', send_result_to_backend);
 
     function send_result_to_backend(){
-      return;
+      let to_send = {
+        "result" : result,
+        "sampleID" : sample_chooser.value,
+        "setupID" : camera_chooser.value,
+        "prepID" : protocol_chooser.value,
+        "dilution" : dilution_chooser.value,
+      }
+
+      let transaction =  db.transaction(["main_scan"], "readwrite");
+      let objectStore = transaction.objectStore("main_scan");
+      let add_request = objectStore.add(to_send); // (3)
+      add_request.onsuccess = (event) => {
+        console.log("All done!");
+      };
+      add_request.onerror = (event) => {
+        console.log("something went wrong");
+        // Don't forget to handle errors!
+      };
     }
 
 
@@ -995,14 +1144,14 @@
 
       function startup() {
         setOrganismType()
-        output = document.getElementById("output");
+        real_width_FoV = microscope_setup.FoV_Width;
         video = document.getElementById("video");
         canvas = document.getElementById("canvas-temp");
         photo = document.getElementById("photo");
         startButton = document.getElementById("start-button");
 
         navigator.mediaDevices
-          .getUserMedia({ video: {width: { ideal: 99999} , height: { ideal: 99999 }}, audio: false })
+          .getUserMedia(microscope_setup.video_prefs)
           .then((stream) => {
             video.srcObject = stream;
             video.play();
@@ -1080,10 +1229,7 @@
         }
       }
 
-      // Set up our event listener to run the startup process
+
-      // once loading is complete.
-      window.addEventListener("load", startup, false);
-    //})();
 
 
     </script>