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

add dilution, camera, microscope and sample chooser.

Browse source 
use default video prefs to initialize the video. 

startup() when everything is loaded.
This commit is contained in:
lukas fricke 2025-01-23 14:25:08 +01:00
parent 384534ba7f
commit 78f5d450e9
1 changed files with 263 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

304
observe_nema.html
View file

@ -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>
<button class="btn btn-primary float-end" onclick="toggleFullscreen();" id="fullscreen-button">toggle Fullscreen video</button>
<div class="col-9">
<div class="row">
<button class="btn btn-primary float-end" onclick="toggle_cam();">Toggle camera</button>
<button class="btn btn-primary float-end" onclick="toggleFullscreen();" id="fullscreen-button">
toggle Fullscreen video
</button>
</div>
</div>
</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);
//})();