himbeere/open-organism-observer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: himbeere:a2ce58b18f0ea21c21bf80b0be19a86a16b5e736
Branches Tags
himbeere:main
..
compare: himbeere:28a9caeecbe122ed2c6da1b7cd3a4e408616db2d
Branches Tags
himbeere:main

No commits in common. "a2ce58b18f0ea21c21bf80b0be19a86a16b5e736" and "28a9caeecbe122ed2c6da1b7cd3a4e408616db2d" have entirely different histories.
a2ce58b18f ... 28a9caeecb

10 changed files with 157 additions and 464 deletions
Show stats Expand all files Collapse all files

139
create_report.html
View file

@ -8,45 +8,6 @@
<script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js" ></script> <script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js" ></script>
</header> </header>
<body> <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"> <div class="container">
<div class="row"> <div class="row">
<div class="col-3"> <div class="col-3">
@ -68,20 +29,25 @@
<span id=cam_setup_name>???</span>. <span id=cam_setup_name>???</span>.
</p> </p>
<p> <p>
Dividing the sample volume V<sub>Sample</sub> = <span id="sample_volume">???</span> uL The sample volume V<sub>Sample</sub> = <span id="sample_volume">???</span> uL
by the size of the coverslip A<sub>coverslip</sub> = divided by the size of the coverslip A<sub>coverslip</sub> =
<span id="coverslip_height">???</span> mm x <span id="coverslip_width">???</span> mm <span id="coverslip_height">???</span> mm x <span id="coverslip_width">???</span> mm
yields the observed height h<sub>observed</sub> = V<sub>Sample</sub> / A<sub>coverslip</sub> = yield an observed height of
<span id="observed_height"></span> um. Multipilcation with the size of the the field of view <br><br>
A<sub>FoV</sub> = <span id="FoV_height">???</span> um x h<sub>observed</sub> = V<sub>Sample</sub> / A<sub>coverslip</sub> =
<span id="FoV_width">???</span> um <span id="observed_height"></span> um.
yields the observed Volume V<sub>observed</sub> = <br><br>
h<sub>observed</sub> * A<sub>FoV</sub> = <span id="observed_volume">???</span> uL per FoV. Multipilcation with the size of the
The volume of organisms per FoV is multiplied with the the field of view A<sub>FoV</sub> = <span id="FoV_height">???</span> um x
dilution Factor F<sub>dilution</sub> = <span id="dilution_factor">???</span> <span id="FoV_width">???</span> um yield
and devided by V<sub>observed</sub> to calculate the abundance per uL. an observed Volume of
<br><br>
V<sub>observed</sub> = h<sub>observed</sub> * A<sub>FoV</sub> = <span id="observed_volume">???</span> uL per FoV.
</p> </p>
<p> <p>
The volume of organisms per FoV is multiplied with the
dilution Factor F<sub>dilution</sub> = <span id="dilution_factor">???</span>
and devided by V<sub>observed</sub> to calculate the abundance per uL.<br>
F<sub>multiplication</sub> = F<sub>dilution</sub> * 1 uL / V<sub>observed</sub> = <span id="factor">???</span> F<sub>multiplication</sub> = F<sub>dilution</sub> * 1 uL / V<sub>observed</sub> = <span id="factor">???</span>
</p> </p>
@ -110,21 +76,29 @@
<div id="bacteria_scan_div"> <div id="bacteria_scan_div">
<h2> Bacteria Scan</h2> <h2> Bacteria Scan</h2>
<p> <p>
The bacteria scan has been performed on <span id="bact_scan_datetime">???</span>. The bacteria scan has been performed on <span id="bact_scan_datetime">???</span>. <br>
Dividing the sample volume V<sub>Sample</sub> = <span id="sample_volume_bact">???</span> uL
by the size of the coverslip A<sub>coverslip</sub> =
<span id="coverslip_height_bact">???</span> mm x <span id="coverslip_width_bact">???</span> mm
yields the observed height h<sub>observed</sub> = V<sub>Sample</sub> / A<sub>coverslip</sub> =
<span id="observed_height_bact"></span> um. Multipilcation with the size of the
the field of view A<sub>FoV</sub> = <span id="FoV_height_bact">???</span> um x
<span id="FoV_width_bact">???</span> um yields the observed Volume
V<sub>observed</sub> = h<sub>observed</sub> * A<sub>FoV</sub> = <span id="observed_volume_bact">???</span> uL per FoV. The volume of organisms per FoV is multiplied with the
dilution Factor F<sub>dilution</sub> = <span id="dilution_factor_bact">???</span>
and devided by V<sub>observed</sub> to calculate the abundance per uL:
</p> </p>
<p> <p>
F<sub>multiplication</sub> = F<sub>dilution</sub> * 1 uL / V<sub>observed</sub> = <span id="factor_bact">???</span> The sample volume V<sub>Sample</sub> = <span id="sample_volume_bact">???</span> uL
</p> divided by the size of the coverslip A<sub>coverslip</sub> =
<span id="coverslip_height_bact">???</span> mm x <span id="coverslip_width_bact">???</span> mm
yield an observed height of
<br><br>
h<sub>observed</sub> = V<sub>Sample</sub> / A<sub>coverslip</sub> =
<span id="observed_height_bact"></span> um.
<br><br>
Multipilcation with the size of the
the field of view A<sub>FoV</sub> = <span id="FoV_height_bact">???</span> um x
<span id="FoV_width_bact">???</span> um yield
an observed Volume of
<br><br>
V<sub>observed</sub> = h<sub>observed</sub> * A<sub>FoV</sub> = <span id="observed_volume_bact">???</span> uL per FoV.
<p>
The volume of organisms per FoV is multiplied with the
dilution Factor F<sub>dilution</sub> = <span id="dilution_factor_bact">???</span>
and devided by V<sub>observed</sub> to calculate the abundance per uL.<br>
F<sub>multiplication</sub> = F<sub>dilution</sub> * 1 uL / V<sub>observed</sub> = <span id="factor_bact">???</span>
</p>
<h3> Bacteria Table </h3> <h3> Bacteria Table </h3>
<table class="table" id = "bact_scan_table" style="width:100%"> <table class="table" id = "bact_scan_table" style="width:100%">
@ -283,14 +257,11 @@
}; };
function write_sample_description(sample){ function write_sample_description(sample){
let latLon = sample.Place.split(', ');
let lat = Number(latLon[0]);
let lon = Number(latLon[1]);
document.querySelector("#sample_id").textContent = sample_chooser.value; document.querySelector("#sample_id").textContent = sample_chooser.value;
document.querySelector("#sample_name").textContent = sample.Name; document.querySelector("#sample_name").textContent = sample.Name;
document.querySelector("#sample_type").textContent = sample.Type; document.querySelector("#sample_type").textContent = sample.Type;
document.querySelector("#sample_date").textContent = sample.Date_Collected.toDateString() + ' at ' + sample.Date_Collected.toLocaleTimeString(); document.querySelector("#sample_date").textContent = sample.Date_Collected;
document.querySelector("#sample_location").textContent = lat.toFixed(4) + ', ' + lon.toFixed(4); document.querySelector("#sample_location").textContent = sample.Place;
} }
@ -305,8 +276,7 @@
multiplication_factor_main_scan = main_result.dilution / observed_volume; multiplication_factor_main_scan = main_result.dilution / observed_volume;
document.querySelector("#main_scan_datetime").textContent = main_result.datetime.toDateString() + ' at ' + main_result.datetime.toLocaleTimeString(); document.querySelector("#main_scan_datetime").textContent = main_result.datetime;
sample.Date_Collected.toDateString() + ' at ' + sample.Date_Collected.toLocaleTimeString();
document.querySelector("#prep_protocol_name").textContent = prep_protocol.name; document.querySelector("#prep_protocol_name").textContent = prep_protocol.name;
document.querySelector("#cam_setup_name").textContent = microscope_setup.name; document.querySelector("#cam_setup_name").textContent = microscope_setup.name;
document.querySelector("#coverslip_height").textContent = microscope_setup.Slip_Height; document.querySelector("#coverslip_height").textContent = microscope_setup.Slip_Height;
@ -319,7 +289,7 @@
document.querySelector("#observed_volume").textContent = observed_volume.toExponential(2); document.querySelector("#observed_volume").textContent = observed_volume.toExponential(2);
document.querySelector("#dilution_factor").textContent = main_result.dilution; document.querySelector("#dilution_factor").textContent = main_result.dilution;
document.querySelector("#factor").textContent = multiplication_factor_main_scan.toFixed(2); document.querySelector("#factor").textContent = multiplication_factor_main_scan;
} }
// get results of the main scan + prep_protocol and microscope_setup // get results of the main scan + prep_protocol and microscope_setup
@ -500,14 +470,14 @@
case "Actinobacteria": case "Actinobacteria":
newRow.insertCell(0).innerHTML = key ; newRow.insertCell(0).innerHTML = key ;
// get // get
newRow.insertCell(1).innerHTML = (mean * Math.pow(10, -6) * multiplication_factor_main_scan).toFixed(2); newRow.insertCell(1).innerHTML = (mean * Math.pow(10, -6) * multiplication_factor_main_scan).toExponential(2);
newRow.insertCell(2).innerHTML = (stdev/mean * 100).toFixed(2); newRow.insertCell(2).innerHTML = (stdev/mean * 100);
break break
default: default:
newRow.insertCell(0).innerHTML = key; newRow.insertCell(0).innerHTML = key;
newRow.insertCell(1).innerHTML = (mean * multiplication_factor_main_scan).toFixed(2); newRow.insertCell(1).innerHTML = mean * multiplication_factor_main_scan;
newRow.insertCell(2).innerHTML = (stdev/mean * 100).toFixed(2); newRow.insertCell(2).innerHTML = (stdev/mean * 100);
} }
} }
@ -571,7 +541,7 @@
} }
function write_nema_scan_description(result, protocol, setup){ function write_nema_scan_description(result, protocol, setup){
multiplication_factor_nema_scan = (result.dilution / protocol.Sample_Size) * Math.pow(10,3); multiplication_factor_nema_scan = (result.dilution / protocol.Sample_Size) * Math.pow(10,3);
document.querySelector("#nema_scan_datetime").innerHTML = result.datetime.toDateString() + ' at ' + result.datetime.toLocaleTimeString(); document.querySelector("#nema_scan_datetime").innerHTML = result.datetime;
document.querySelector("#dilution_nema").innerHTML = result.dilution; document.querySelector("#dilution_nema").innerHTML = result.dilution;
document.querySelector("#samplesize_nema").innerHTML = protocol.Sample_Size; document.querySelector("#samplesize_nema").innerHTML = protocol.Sample_Size;
document.querySelector("#multiplication_factor_nema").innerHTML = multiplication_factor_nema_scan; document.querySelector("#multiplication_factor_nema").innerHTML = multiplication_factor_nema_scan;
@ -670,7 +640,7 @@ function write_bact_scan_description(result, protocol, setup){
multiplication_factor_bact_scan = result.dilution / observed_volume_bact; multiplication_factor_bact_scan = result.dilution / observed_volume_bact;
document.querySelector("#bact_scan_datetime").textContent = result.datetime.toDateString() + " at " + result.datetime.toLocaleTimeString(); document.querySelector("#bact_scan_datetime").textContent = result.datetime;
document.querySelector("#prep_protocol_name_bact").textContent = protocol.name; document.querySelector("#prep_protocol_name_bact").textContent = protocol.name;
document.querySelector("#cam_setup_name_bact").textContent = setup.name; document.querySelector("#cam_setup_name_bact").textContent = setup.name;
document.querySelector("#coverslip_height_bact").textContent = setup.Slip_Height; document.querySelector("#coverslip_height_bact").textContent = setup.Slip_Height;
@ -683,7 +653,7 @@ function write_bact_scan_description(result, protocol, setup){
document.querySelector("#observed_volume_bact").textContent = observed_volume_bact.toExponential(2); document.querySelector("#observed_volume_bact").textContent = observed_volume_bact.toExponential(2);
document.querySelector("#dilution_factor_bact").textContent = result.dilution; document.querySelector("#dilution_factor_bact").textContent = result.dilution;
document.querySelector("#factor_bact").textContent = multiplication_factor_bact_scan.toFixed(2); document.querySelector("#factor_bact").textContent = multiplication_factor_bact_scan;
@ -729,13 +699,18 @@ function render_bact_scan_table(result){
for (let i=0; i<means.length; i+=2){ for (let i=0; i<means.length; i+=2){
render_bact_scan_table_row(keys[i], [means[i],means[i+1]], [sds[i],sds[i+1]]); render_bact_scan_table_row(keys[i], [means[i],means[i+1]], [sds[i],sds[i+1]]);
} }
bact_mass = means[1] + means[3] + means[5]; bact_mass = means[1] + means[3] + means[5]
bact_sd = sds[1] + sds[3] + sds[5];
fungi_mass = Number(result_table.children[1].children[0].children[1].innerHTML); fungi_mass = Number(result_table.children[1].children[0].children[1].innerHTML);
fungi_sd = Number(result_table.children[1].children[0].children[2].innerHTML)*
Number(result_table.children[1].children[0].children[1].innerHTML);
document.querySelector("#bacterial_biomass").textContent = bact_mass.toFixed(2) document.querySelector("#bacterial_biomass").textContent = bact_mass.toFixed(2) +
document.querySelector("#fungal_biomass").textContent = fungi_mass.toFixed(2) " +/- " bact_sd.toFixed(2);
document.querySelector("#fungal_biomass").textContent = fungi_mass.toFixed(2) +
" +/- " + fungi_sd.toFixed(2);
document.querySelector("#f_to_b_biomass").textContent = (fungi_mass / bact_mass).toFixed(5) document.querySelector("#f_to_b_biomass").textContent = (fungi_mass / bact_mass).toFixed(2)
} }

BIN
image/settings_icon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

39
index.html
View file

@ -6,45 +6,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<head> <head>
<body> <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"> <div class="container">
<h1> OpenCompostApp </h1> <h1> OpenCompostApp </h1>
<p> hi there - this my fancy website</p> <p> hi there - this my fancy website</p>

60
observe_bact.html
View file

@ -27,11 +27,18 @@
z-index:10; z-index:10;
width: 100%; width: 100%;
} }
#canvas-debug{
position:absolute;
z-index:10;
width: 20em;
opacity: 100%;
}
#photo { #photo {
position:absolute; position:absolute;
z-index:5; z-index:5;
width: 100%; width: 100%;
} }
#canvas-temp{ #canvas-temp{
@ -49,45 +56,7 @@
</style> </style>
</head> </head>
<body> <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>
<!-- this canvas is not displayed and only used to generate the photo --> <!-- this canvas is not displayed and only used to generate the photo -->
<canvas id="canvas-temp"></canvas> <canvas id="canvas-temp"></canvas>
@ -110,13 +79,13 @@
<select class="form-select" name="sample_chooser" id = "sample_chooser"></select> <select class="form-select" name="sample_chooser" id = "sample_chooser"></select>
</div> </div>
</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. --> <!-- 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="output" class="row">
<div id = "video_container" class="col-9"> <div id = "video_container" class="col-9">
<img id="photo" alt="The screen capture will appear in this box." ></img> <img id="photo" alt="The screen capture will appear in this box." ></img>
<canvas id="canvas-draw"></canvas> <canvas id="canvas-draw"></canvas>
<video autoplay="true" id="video"></video> <video autoplay="true" id="video"></video>
</div> </div>
<div id = "control-elements" class="col-3"> <div id = "control-elements" class="col-3">
@ -130,6 +99,7 @@
<input class="form-control" type="number" id="Bacilli_count" <input class="form-control" type="number" id="Bacilli_count"
name="Bacilli_count" value=0> name="Bacilli_count" value=0>
</input> </input>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -198,12 +168,14 @@
<th> <th>
Choose bacterium Type Choose bacterium Type
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
<button class="btn btn-primary float-end" onclick="submit_FoV();">submit FoV</button> <button class="btn btn-primary float-end" onclick="submit_FoV();">submit FoV</button>
</div> </div>
<div id = "FoV_table_div"> <div id = "FoV_table_div">
<h2> Fields of View </h2> <h2> Fields of View </h2>
@ -354,6 +326,9 @@
request.onsuccess = ()=> { request.onsuccess = ()=> {
default_protocol_id = request.result.prep_setup; default_protocol_id = request.result.prep_setup;
get_all_prep_prefs(); get_all_prep_prefs();
// width of FoV -- will be supplied by FLASK microscope setup.
} }
request.onerror = (err)=> { request.onerror = (err)=> {
@ -420,6 +395,7 @@
// Move to the next record // Move to the next record
cursor.continue(); cursor.continue();
} }
} }
request.onerror = (err)=> { request.onerror = (err)=> {
@ -501,6 +477,7 @@
case "Spirochetes": case "Spirochetes":
label.classList.add("btn", "btn-outline-danger"); label.classList.add("btn", "btn-outline-danger");
break; break;
} }
label.htmlFor = 'org-type-'+bacteria_types[i]+''+index; label.htmlFor = 'org-type-'+bacteria_types[i]+''+index;
@ -672,7 +649,7 @@
var video = document.querySelector("#video"); var video = document.querySelector("#video");
var out = document.querySelector("#output"); var out = document.querySelector("#output");
// opencv stuff
var canvas_draw = document.getElementById("canvas-draw"); var canvas_draw = document.getElementById("canvas-draw");
const context = canvas_draw.getContext('2d'); const context = canvas_draw.getContext('2d');
@ -806,6 +783,7 @@
let ind_new = fits[i][1]; let ind_new = fits[i][1];
let ind_rect = fits[i][2]; let ind_rect = fits[i][2];
let fit = fits[i][3]; let fit = fits[i][3];
console.log(fit);
if (fit > 100000) { if (fit > 100000) {
break; break;
} }

50
observe_main.html
View file

@ -50,45 +50,6 @@
</style> </style>
</head> </head>
<body> <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>
<!-- this canvas is not displayed and only used to generate the photo --> <!-- this canvas is not displayed and only used to generate the photo -->
<canvas id="canvas-temp"></canvas> <canvas id="canvas-temp"></canvas>
@ -1207,11 +1168,14 @@
(ev) => { (ev) => {
if (!streaming) { if (!streaming) {
video_aspect = video.videoWidth / video.videoHeight; 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;
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.height = canvas_draw.height*5;
canvas_draw.width = canvas_draw.height*video_aspect; canvas_draw.width = canvas_draw.height*video_aspect;
streaming = true; streaming = true;

40
observe_nema.html
View file

@ -48,45 +48,7 @@
</style> </style>
</head> </head>
<body> <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>
<!-- this canvas is not displayed and only used to generate the photo --> <!-- this canvas is not displayed and only used to generate the photo -->
<canvas id="canvas-temp"></canvas> <canvas id="canvas-temp"></canvas>

182
sample_intake.html
View file

@ -3,14 +3,9 @@
<html> <html>
<head> <head>
<link href="bootstrap-5.0.2-dist/css/bootstrap.min.css" rel="stylesheet" ></link> <link href="bootstrap-5.0.2-dist/css/bootstrap.min.css" rel="stylesheet" ></link>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"></link>
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.0.0/dist/geosearch.css"></link>
<script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js" ></script> <script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js" ></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-geosearch@latest/dist/bundle.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"</link>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
#map { #map {
@ -19,116 +14,67 @@
} }
</style> </style>
</head> </head>
<body> <h1>Add Sample</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <form class="needs-validation" id = "sample">
<div class="container-fluid"> <div class="row">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <div class="col">
<span class="navbar-toggler-icon"></span> <label class = "form-label" for="name">
</button> Name of Sample
<a class="navbar-brand" href="#">Open Microscopy App</a> </label>
<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> </div>
</nav> <div class="col">
<div class="container"> <input class="form-control" type="text" name="name" id = "Name"
<h1>Add Sample</h1> placeholder="choose a name for your sample">
<div class="row"> </input>
<div class="col">
<form class="needs-validation" id = "sample">
<div class="row">
<div class="col">
<label class = "form-label" for="name">
Name of Sample
</label>
</div>
<div class="col">
<input class="form-control" type="text" name="name" id = "Name"
placeholder="choose a name for your sample">
</input>
</div>
</div>
<div class="row">
<div class="col">
<label class = "form-label" for="type">Sample Type</label>
</div>
<div class="col">
<input class="form-control" type="text" name="type"
placeholder="e.g. compost"
id = "Type"></input>
</div>
</div>
<div class="row">
<div class="col">
<label class = "form-label" for="time_collection">Collection Time</label>
</div>
<div class="col">
<input class="form-control" type="datetime-local" name="time_collection"
id = "Date_Collected"></input>
</div>
</div>
<div class="row">
<div class="col">
<label class="form-label" for="notes">Notes</label>
</div>
<div class="col">
<textarea class="form-control" name="notes" id = "Notes"
placeholder="Notes about the sample"
rows="1"
cols="60"
></textarea>
</div>
</div>
<div class="row">
<div class="col">
<label class = "form-label" for="location">Location of Sample</label>
</div>
<div class="col">
<input class="form-control" name="location" id="Location" value=""></input>
</div>
</div>
<button class="btn btn-primary float-end" type="submit"> submit </button>
</form>
</div>
<div class = "col">
<div id="map"></div>
</div>
</div> </div>
</div> </div>
<script>
<div class="row">
<div class="col">
<label class = "form-label" for="type">Sample Type</label>
</div>
<div class="col">
<input class="form-control" type="text" name="type"
placeholder="e.g. compost"
id = "Type"></input>
</div>
</div>
<div class="row">
<div class="col">
<label class = "form-label" for="time_collection">Collection Time</label>
</div>
<div class="col">
<input class="form-control" type="datetime-local" name="time_collection"
id = "Date_Collected"></input>
</div>
</div>
<div class="row">
<div class="col">
<label class="form-label" for="notes">Notes</label>
</div>
<div class="col">
<textarea class="form-control" name="notes" id = "Notes"
placeholder="Notes about the sample"
rows="1"
cols="60"
></textarea>
</div>
</div>
<div class="row">
<div class="col">
<label class = "form-label" for="location">Location of Sample</label>
</div>
<div class="col">
<input class="form-control" name="location" id="Location" value=""></input>
</div>
</div>
<button class="btn btn-primary float-end" type="submit"> submit </button>
<div id="map"></div>
</form>
<script>
var map = L.map('map').fitWorld(); var map = L.map('map').fitWorld();
var sample_form = document.getElementById("sample"); var sample_form = document.getElementById("sample");
L.tileLayer( L.tileLayer(
@ -147,16 +93,6 @@
marker = L.marker([latlng.lat,latlng.lng]).addTo(map); marker = L.marker([latlng.lat,latlng.lng]).addTo(map);
}); });
map.setView([53.518203, 9.983701], 16); map.setView([53.518203, 9.983701], 16);
const provider = new window.GeoSearch.OpenStreetMapProvider();
const search = new GeoSearch.GeoSearchControl({
provider: provider,
style : 'bar',
updateMap: true,
resetButton: '🔍'
}); // Include the search box with usefull params. Autoclose and updateMap in my case. Provider is a compulsory parameter.
map.addControl(search);
</script> </script>
<script> <script>
@ -199,6 +135,4 @@
} }
</script> </script>
</body>
</html> </html>

44
sample_prep_protocol.html
View file

@ -7,47 +7,7 @@
</header> </header>
<body> <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"> <div class="container">
<h1> Add Preparation Protocol </h1>
<form class="needs-validation" id = "sample"> <form class="needs-validation" id = "sample">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
@ -78,12 +38,12 @@
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<label class = "form-label" for="main_dilution"> <label class = "form-label" for="main_dilution">
Main dilution factor (1:x) Main dilution
</label> </label>
</div> </div>
<div class="col"> <div class="col">
<input class="form-control" type="text" id = "Main_Dilution" name="main_dilution" <input class="form-control" type="text" id = "Main_Dilution" name="main_dilution"
placeholder="e.g. 5 for a 1:5 dilution"> placeholder="e.g. 1:5">
</input> </input>
</div> </div>
</div> </div>

51
setup_microscope.html
View file

@ -45,47 +45,7 @@
</header> </header>
<body> <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"> <div class = "container">
<h1> Setup Microscope & Camera </h1>
<canvas id="canvas-temp"></canvas> <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. --> <!-- the output div is used to display the video, the photo and the canvas where you can draw in (and measure) your organisms. -->
@ -180,6 +140,17 @@
</input> </input>
</div> </div>
</div> </div>
<div class="row">
<div class="col">
<label class = "form-label" for="eyepiece_number">
Eyepiece Number
</label>
</div>
<div class="col">
<input class="form-control" type="number" id = "Eyepiece_Number" name="eyepiece_number">
</input>
</div>
</div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<label class = "form-check-label" for="default"> <label class = "form-check-label" for="default">

12
utils.js
View file

@ -1,12 +0,0 @@
function observed_volume(FoV_Width, FoV_Height, Sample_Size, Slip_Width, Slip_Height){
// Slip dimensions in mm - Sample Size in uL:
// uL / mm*mm -> 10^9 um³ / 10^6 um²
// 10^9 um³ / 10^12 um² = 10^3 um
let h = (Sample_Size / Slip_Width*Slip_Height)*Math.pow(10,3);
// observed volume = h * Area FoV [um³]
// 1 um³ = 10^-9 uL
let observed_volume = h * FoV_Width * FoV_Height * Math.pow(10,-9);
return observed_volume
}