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

Compare commits

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

10 commits
28a9caeecb ... a2ce58b18f

Author SHA1 Message Date
lukas fricke a2ce58b18f add geocoding capacity 2025-02-25 18:13:23 +01:00
lukas fricke 65c0081c33 remove eyepiece number question 2025-02-25 18:13:04 +01:00
lukas fricke 4a9192b815 change main dilution input 2025-02-25 18:12:48 +01:00
lukas fricke fc885f090c add navbar continued 2025-02-25 18:12:30 +01:00
lukas fricke 9acd5d7d2c remove some random lines 2025-02-25 18:12:16 +01:00
lukas fricke 01efcfad5d add navbar 2025-02-25 18:11:42 +01:00
lukas fricke 3638858314 add an settings icon (it is not used until now) 2025-02-25 18:10:44 +01:00
lukas fricke 7f2487509e some minor changes to increase readability 2025-02-06 14:00:58 +01:00
lukas fricke b5d8408ed6 add a utils.js file just to start it off. 2025-02-05 18:14:25 +01:00
lukas fricke 4f72bb9b80 fix a typo 2025-02-05 18:13:56 +01:00
10 changed files with 458 additions and 151 deletions
Show stats Expand all files Collapse all files

139
create_report.html
View file

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

BIN
image/settings_icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

39
index.html
View file

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

60
observe_bact.html
View file

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

44
observe_main.html
View file

@ -50,6 +50,45 @@
</style>
</head>
<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 -->
<canvas id="canvas-temp"></canvas>
@ -1168,14 +1207,11 @@
(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;

40
observe_nema.html
View file

@ -48,7 +48,45 @@
</style>
</head>
<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 -->
<canvas id="canvas-temp"></canvas>

176
sample_intake.html
View file

@ -3,9 +3,14 @@
<html>
<head>
<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="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"</link>
<script src="https://unpkg.com/leaflet-geosearch@latest/dist/bundle.min.js"></script>
<meta charset="utf-8">
<style>
#map {
@ -14,67 +19,116 @@
}
</style>
</head>
<h1>Add Sample</h1>
<form class="needs-validation" id = "sample">
<div class="row">
<div class="col">
<label class = "form-label" for="name">
Name of Sample
</label>
<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>
<div class="col">
<input class="form-control" type="text" name="name" id = "Name"
placeholder="choose a name for your sample">
</input>
</div>
</div>
</nav>
<div class="container">
<h1>Add Sample</h1>
<div class="row">
<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 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>
</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 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 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>
</div>
<script>
var map = L.map('map').fitWorld();
var sample_form = document.getElementById("sample");
L.tileLayer(
@ -93,6 +147,16 @@
marker = L.marker([latlng.lat,latlng.lng]).addTo(map);
});
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>
@ -135,4 +199,6 @@
}
</script>
</body>
</html>

44
sample_prep_protocol.html
View file

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

51
setup_microscope.html
View file

@ -45,7 +45,47 @@
</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. -->
@ -140,17 +180,6 @@
</input>
</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="col">
<label class = "form-check-label" for="default">

12
utils.js Normal file
View file

@ -0,0 +1,12 @@
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
}