open-organism-observer/setup_microscope.html

<!--- this is the main file --->
<!DOCTYPE html>
<html>
  <header>
    <link href="bootstrap-5.0.2-dist/css/bootstrap.min.css" rel="stylesheet" ></link>
    <script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js" ></script>
    <meta charset="utf-8">
    <style>
    #output{
      position: relative;
      width: 100%;
    }
    #video_container{
      position: relative;
    }

    #video {
      position:absolute;
      z-index: 9;
      width: 90%;
    }

    #canvas-draw{
      position:absolute;
      z-index:10;
      width: 90%;
    }


    #photo {
      position:absolute;
      z-index:5;
      width: 100%;

    }

    #canvas-temp{
      display: none;
    }

    #control-elements {
      height:30em;
    }
    </style>
  </header>

  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Open Microscopy App</a>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Settings
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                <li><a class="dropdown-item" href="/setup_microscope.html">Setup Camera</a></li>
                <li><a class="dropdown-item" href="/sample_prep_protocol.html">Setup Preparation Protocol</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Defaults</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="/sample_intake.html">add sample</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Observe
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                <li><a class="dropdown-item" href="/observe_nema.html">Nematodes</a></li>
                <li><a class="dropdown-item" href="/observe_main.html">Filamentous and Protozoa</a></li>
                <li><a class="dropdown-item" href="/observe_bact.html">Bacteria</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/create_report.html">generate report</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class = "container">
      <h1> Setup Microscope & Camera </h1>
    <canvas id="canvas-temp"></canvas>

<!-- 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-8">
        <canvas id="canvas-draw"></canvas>
        <img id="photo" alt="The screen capture will appear in this box."></img>
        <video autoplay="true" id="video"></video>
      </div>
      <div class="col-4 ">

          <label class = "form-label" for="camera_chooser">
            Select a Camera
          </label>
          <select class="form-select" aria-label="Default select example" name="camera_chooser" id = "camera_chooser">

          </select>

        <div id="control_elements" class="row align-items-end">
          <div class="col" name="length" >
            <label class = "form-label" for="real_length">
              Please enter the length of the object in um:
            </label>
            <input class="form-control" id = "real_length" type="text"
                      name="real_length" value=0>
            </input>
          </div>
        </div>
        <br>
        <form class="needs-validation" id = "microscope_setup">
          <div class="row">
        	  <div class="col">
              <label class = "form-label" for="name">
                Name of Setup
              </label>
            </div>
            <div class="col">
              <input class="form-control" type="text" name="name" id = "name"
                     placeholder="e.g. camera">
              </input>
        	  </div>
        	</div>


        	<div class="row">
        	  <div class="col">
        	     <label class = "form-label" for="FoV_Width">
                 Width of Field of View (Camera) [um]
               </label>
            </div>
            <div class="col">
              <input class="form-control" type="number" id="FoV_width"
                      name="FoV_Width">
              </input>
            </div>
          </div>

        	<div class="row">
        	  <div class="col">
              <label class = "form-label" for="FoV_Height">
                Height of Field of View (Camera) [um]
              </label>
            </div>
            <div class="col">
              <input class="form-control" type="number"
                        id="FoV_height" name="FoV_Height">
              </input>
            </div>
          </div>

          <div class="row">
        	  <div class="col">
    	        <label class = "form-label" for="Slip_Height">
                Height of Coverslip [mm]
              </label>
            </div>
            <div class="col">
              <input class="form-control" type="number"
                      id="Slip_height" step="0.1" name="Slip_Height">
              </input>
            </div>
          </div>
          <div class="row">
        	  <div class="col">
              <label class = "form-label" for="Slip_Width">
                Width of Coverslip [mm]
              </label>
            </div>
            <div class="col">
              <input class="form-control" type="number"
                      id="Slip_width" step="0.1" name="Slip_Width">
              </input>
            </div>
          </div>
          <div class="row">
        	  <div class="col">
              <label class = "form-check-label" for="default">
                This should be the default Camera setup
              </label>
            </div>
            <div class="col">
              <input class="form-check-input" type="checkbox" id = "Default" name="default">
              </input>
            </div>
          </div>
          <button class="btn btn-primary float-end" type="submit">submit</button>
        </form>
  </div>

</div>


</div>

  </body>

<script>

  var db;
  let openRequest = indexedDB.open("my_db");

  openRequest.onerror = function() {
    console.error("Error", openRequest.error);
  };

  openRequest.onsuccess = function() {
    db = openRequest.result;
    // continue working with database using db object
  };

  const form = document.getElementById("microscope_setup");
  form.addEventListener("submit", add);

  function add(event){
    event.preventDefault();

    let microscope_setup = {
      "name" : document.getElementById("name").value,
      "FoV_Height" : document.getElementById("FoV_height").value,
      "FoV_Width" : document.getElementById("FoV_width").value,
      "Slip_Height" : document.getElementById("Slip_height").value,
      "Slip_Width" : document.getElementById("Slip_width").value,
      "video_prefs" : video_prefs,
    }

    let transaction =  db.transaction(["microscope_setup"], "readwrite");
    let objectStore = transaction.objectStore("microscope_setup");
    let add_request = objectStore.add(microscope_setup); // (3)
    add_request.onsuccess = (event) => {
      console.log("All done!");
      let id_of_setup = event.target.result;
      if (document.getElementById("Default").checked){
        let my_default = {"id" : 0, "microscope_setup" : id_of_setup};
        let next_transaction = db.transaction(["defaults"], "readwrite");
        let next_objectStore = next_transaction.objectStore("defaults");
        let add_next_request = next_objectStore.put(my_default);
        transaction.oncomplete = (event) => {
          console.log("All done!");
        };
        transaction.onerror = (event) => {
          console.log("something went wrong");
          // Don't forget to handle errors!
        };
      }
    };
    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");
var camera_chooser = document.querySelector("#camera_chooser")
// init video switching get IDs of video inputs
let video_prefs={ video: {width: { ideal:  99999} , height: { ideal: 99999 }}, audio: false };
let streaming = false;
let index = 1;
navigator.mediaDevices
    .enumerateDevices()
    .then((devices) => {
      devices.forEach((device) => {
        if (device.kind=="videoinput"){
        let cameraID = document.createElement("option");
        let text = document.createTextNode("camera " + index);
        if (index == 1){
          video_prefs.video.deviceId = device.deviceId;
          cameraID.defaultSelected = true;
        }
        ++index;
        cameraID.value = device.deviceId;
        cameraID.appendChild(text);
        camera_chooser.appendChild(cameraID);

        }
      });
    })
    .catch((err) => {
      console.error(`${err.name}: ${err.message}`);
    });


camera_chooser.addEventListener("change", change_cam);
function change_cam(){
  video_prefs.video.deviceId = this.value;
  startup();
};

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");
var ctx = canvas_draw.getContext('2d');
var pos = { x: 0, y: 0 };
var start_pos = { x: 0, y: 0 };
// store lines for measurement
var lines = [];
var line = [];

// calculate length of line - helper function
function get_length(line){
  var dist = 0.0;
    if (line){
      for (let j = 0; j < line.length-1; ++j) {
        dist += Math.sqrt((line[j].x - line[j+1].x) ** 2 + (line[j].y - line[j+1].y) ** 2);
      }
    }
    //return distance in units
  return dist/canvas_draw.width
}
// events to set the position of the drawing cursor
canvas_draw.addEventListener('mousedown', setPosition);
canvas_draw.addEventListener('mouseenter', setPosition);

// set new position from mouse event
// scale canvas coords
function setPosition(e) {
  var rect = canvas_draw.getBoundingClientRect();

  scaleX = canvas_draw.width / rect.width,    // relationship bitmap vs. element for x
  scaleY = canvas_draw.height / rect.height;
  pos.x = (e.clientX - rect.x) * scaleX;
  pos.y = (e.clientY - rect.y) * scaleY;
  console.log(pos);
}

// the draw function to draw onto canvas
canvas_draw.addEventListener('mousemove', draw);

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');
      line.push({x: pos.x, y: pos.y});
      let measured_length = get_length(line);
      fov_height.value = ((real_length.value/(measured_length * canvas_draw.width))* canvas_draw.height).toFixed(0);
      fov_width.value = ((real_length.value/(measured_length * canvas_draw.width))* canvas_draw.width).toFixed(0);

      line = [];
      return;
   }
  // draw on canvas.
  if (e.buttons == 1){

    canvas_draw.getContext('2d').clearRect(0, 0, canvas_draw.width, canvas_draw.height);
    if (lines.length == 1){
      draw_path(lines[0]);
    }

    ctx.beginPath(); // begin
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'black';
    // update line
    // first time push the first position
    if (line.length == 0){
      start_pos = {x:pos.x, y:pos.y};
      line.push(start_pos);
    }

    ctx.moveTo(start_pos.x, start_pos.y); // from
    setPosition(e);
    ctx.lineTo(pos.x, pos.y); // to

    ctx.stroke(); // draw it!
  }
}

startup();


  function startup() {
    output = document.getElementById("output");
    video = document.getElementById("video");
    canvas = document.getElementById("canvas-temp");
    photo = document.getElementById("photo");
    startButton = document.getElementById("start-button");

    navigator.mediaDevices
      .getUserMedia(video_prefs)
      .then((stream) => {
        video.srcObject = stream;
        video.play();
      })
      .catch((err) => {
        console.error(`An error occurred: ${err}`);
      });

    video.addEventListener(
      "canplay",
      (ev) => {
        if (!streaming) {
          video_aspect = video.videoWidth / video.videoHeight;

          video.style.aspectRatio = video_aspect;

          photo.style.aspectRatio = video_aspect;

          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;
        }
      },
      false,
    );

    startButton.addEventListener(
      "click",
      (ev) => {
        takePicture();
        ev.preventDefault();
      },
      false,
    );

    clearPhoto();
  }

  // Fill the photo with an indication that none has been
  // captured.

  function clearPhoto() {
    const context = canvas.getContext("2d");

    context.fillRect(0, 0, canvas.width, canvas.height);

    const data = canvas.toDataURL("image/png");
    photo.setAttribute("src", data);
  }

  // Capture a photo by fetching the current contents of the video
  // and drawing it into a canvas, then converting that to a PNG
  // format data URL. By drawing it on an offscreen canvas and then
  // drawing that to the screen, we can change its size and/or apply
  // other changes before drawing it.

  function takePicture() {
    canvas_draw.getContext('2d').clearRect(0, 0, canvas_draw.width, canvas_draw.height);
    const context = canvas.getContext("2d");
    if (video.videoWidth && video.videoHeight) {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
      video.style.zIndex = 1;
      photo.style.zIndex = 5;
      canvas.style.zIndex= 10;

      const data = canvas.toDataURL("image/png");
      photo.setAttribute("src", data);
    } else {
      clearPhoto();
    }
  }


</script>
</html>