add dilution, camera, microscope and sample chooser.

use default video prefs to initialize the video. 

startup() when everything is loaded.

observe_nema.html

@@ -53,6 +53,27 @@
     <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"  aria-label="Default select example"
+            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" aria-label="Default select example"
+            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" aria-label="Default select example"
+            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">
@@ -99,14 +120,16 @@
         <button class="btn btn-primary float-end" onclick="add_picture();">add picture</button>
         <button class="btn btn-primary float-end" onclick="submit_nematode();">submit Nematode</button>
       </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>
     </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>
 
 
     <div id="tables">
@@ -125,7 +148,7 @@
             picture(s)
           </th>
           <th style="width:15%">
-            <button class="btn btn-primary float-end" id="Result_submit">next picture</button>
+            <button class="btn btn-primary float-end" id="Result_submit">submit result</button>
           </th>
         </tr>
         </thead>
@@ -138,12 +161,221 @@
   </div>
     <script>
 
+    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")
+
+
+    var db;
+    let openRequest = indexedDB.open("my_db");
+
+    openRequest.onerror = function() {
+      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.
+
+      }
+
+      request.onerror = (err)=> {
+          console.error(`Error to get all setups: ${err}`)
+      }
+    }
+
+    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();
+          }
+      }
+
+      request.onerror = (err)=> {
+          console.error(`Error to get all setups: ${err}`)
+      }
+    }
+
+
+
+    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 = key;
+        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();
+    };
+
+
+    function get_default_prep_setup(){
+      const request = db.transaction('defaults')
+                   .objectStore('defaults')
+                   .get(1);
+      request.onsuccess = ()=> {
+         default_protocol_id = request.result.prep_setup;
+         get_all_prep_prefs();
+
+         // 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;
+          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(){
+      protocol = prep_protocols[this.value];
+      dilution_chooser.value = prep_protocol.Main_Dilution;
+
+    };
+
+
+    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 nematode = {
         "type" : "",
         "pictures" : [],
       };
+
+      var nematodes = [];
+
+      function submit_nematode(){
+        if (nematode.type == "") {
+          nematode.type = organism_type.choice.value;
+        }
+        nematodes.push(nematode);
+        nematode = {
+          "type" : "",
+          "pictures" : [],
+        };
+        update_nematode_table();
+        update_results_table();
+
+      }
+
       function add_picture(){
         let photo = document.getElementById("photo");
         if (nematode.type == "") {
@@ -191,18 +423,7 @@
         notes.innerHTML = image.notes;
         button.innerHTML = '<button class="btn btn-primary float-end" onclick=remove_picture(' + index + ')>remove</button>';
       }
-      var nematodes = [];
 
-      function submit_nematode(){
-        nematodes.push(nematode);
-        nematode = {
-          "type" : "",
-          "pictures" : [],
-        };
-        update_nematode_table();
-        update_results_table();
-
-      }
       var results_table = document.querySelector("#Results");
 
       function update_results_table(){
@@ -250,6 +471,30 @@
 
       }
 
+    submit_results = document.querySelector("#Result_submit")
+    submit_results.addEventListener("click",send_result_to_backend);
+
+    function send_result_to_backend(){
+      let to_send = {
+        "nematodes" : nematodes,
+        "sampleID" : sample_chooser.value,
+        "sample_prep_ID" : protocol_chooser.value,
+        "microscope_setup_ID": camera_chooser.value,
+        "dilution" : dilution_chooser.value,
+
+      }
+
+      let transaction =  db.transaction(["nematode_scan"], "readwrite");
+      let objectStore = transaction.objectStore("nematode_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!
+      };
+    }
 
     var video = document.querySelector("#video");
     var out = document.querySelector("#output");
@@ -276,26 +521,6 @@
 
     // toggle between cameras
 
-    var device_index = 0;
-
-    function toggle_cam(){
-      device_index += 1
-      if (device_index>=deviceIDs.length){
-        device_index=0
-      };
-
-      if (navigator.mediaDevices.getUserMedia) {
-      navigator.mediaDevices.getUserMedia({ video: {
-        deviceId: deviceIDs[device_index],
-      }, })
-        .then(function (stream) {
-          video.srcObject = stream;
-        })
-        .catch(function (error) {
-          console.log("Something went wrong!");
-        });
-      }
-    };
 
     // init drawing
 
@@ -429,7 +654,7 @@
         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();
@@ -510,7 +735,6 @@
 
       // Set up our event listener to run the startup process
       // once loading is complete.
-      window.addEventListener("load", startup, false);
     //})();