add dilution, camera, microscope and sample chooser.
use default video prefs to initialize the video. startup() when everything is loaded.
This commit is contained in:
parent
384534ba7f
commit
78f5d450e9
|
|
@ -53,6 +53,27 @@
|
|||
<canvas id="canvas-temp"></canvas>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<label class = "form-label" for="camera_chooser">choose the camera setup</label>
|
||||
<select class="form-select" aria-label="Default select example"
|
||||
name="camera_chooser" id = "camera_chooser"></select>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<label class = "form-label" for="protocol_chooser">choose the preparation protocol</label>
|
||||
<select class="form-select" aria-label="Default select example"
|
||||
name="protocol_chooser" id = "protocol_chooser"></select>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<label class = "form-label" for="dilution">change dilution</label>
|
||||
<input class="form-control" name="dilution" id = "dilution"></input>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<label class = "form-label" for="sample_chooser">choose the sample</label>
|
||||
<select class="form-select" aria-label="Default select example"
|
||||
name="sample_chooser" id = "sample_chooser"></select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- the output div is used to display the video, the photo and the canvas where you can draw in (and measure) your organisms. -->
|
||||
<div id="output" class="row">
|
||||
<div id = "video_container" class="col-9">
|
||||
|
|
@ -99,14 +120,16 @@
|
|||
<button class="btn btn-primary float-end" onclick="add_picture();">add picture</button>
|
||||
<button class="btn btn-primary float-end" onclick="submit_nematode();">submit Nematode</button>
|
||||
</div>
|
||||
|
||||
<div class="col-9">
|
||||
<div class="row">
|
||||
<button class="btn btn-primary float-end" onclick="toggleFullscreen();" id="fullscreen-button">
|
||||
toggle Fullscreen video
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="btn btn-primary float-end" onclick="toggleFullscreen();" id="fullscreen-button">toggle Fullscreen video</button>
|
||||
<div class="row">
|
||||
<button class="btn btn-primary float-end" onclick="toggle_cam();">Toggle camera</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tables">
|
||||
|
|
@ -125,7 +148,7 @@
|
|||
picture(s)
|
||||
</th>
|
||||
<th style="width:15%">
|
||||
<button class="btn btn-primary float-end" id="Result_submit">next picture</button>
|
||||
<button class="btn btn-primary float-end" id="Result_submit">submit result</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -138,12 +161,221 @@
|
|||
</div>
|
||||
<script>
|
||||
|
||||
var microscope_setups = [];
|
||||
var microscope_setup;
|
||||
var default_setup_id;
|
||||
var prep_protocols = {};
|
||||
var prep_protocol;
|
||||
var default_protocol_id;
|
||||
var sample;
|
||||
var samples = {};
|
||||
var dilution_chooser = document.querySelector("#dilution")
|
||||
|
||||
|
||||
var db;
|
||||
let openRequest = indexedDB.open("my_db");
|
||||
|
||||
openRequest.onerror = function() {
|
||||
console.error("Error", openRequest.error);
|
||||
};
|
||||
|
||||
openRequest.onsuccess = function() {
|
||||
db = openRequest.result;
|
||||
get_default_camera_setup();
|
||||
get_default_prep_setup();
|
||||
get_all_samples();
|
||||
|
||||
// continue working with database using db object
|
||||
};
|
||||
|
||||
function get_default_camera_setup(){
|
||||
const request = db.transaction('defaults')
|
||||
.objectStore('defaults')
|
||||
.get(0);
|
||||
request.onsuccess = ()=> {
|
||||
default_setup_id = request.result.microscope_setup;
|
||||
get_all_video_prefs();
|
||||
// width of FoV -- will be supplied by FLASK microscope setup.
|
||||
|
||||
}
|
||||
|
||||
request.onerror = (err)=> {
|
||||
console.error(`Error to get all setups: ${err}`)
|
||||
}
|
||||
}
|
||||
|
||||
function get_all_video_prefs(){
|
||||
const request = db.transaction('microscope_setup')
|
||||
.objectStore('microscope_setup')
|
||||
.openCursor();
|
||||
request.onsuccess = ()=> {
|
||||
let cursor = event.target.result;
|
||||
if (cursor) {
|
||||
// Access the current record
|
||||
make_camera_chooser(cursor.value, cursor.key);
|
||||
// Move to the next record
|
||||
cursor.continue();
|
||||
}
|
||||
else{
|
||||
startup();
|
||||
}
|
||||
}
|
||||
|
||||
request.onerror = (err)=> {
|
||||
console.error(`Error to get all setups: ${err}`)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
var camera_chooser = document.querySelector("#camera_chooser");
|
||||
|
||||
function make_camera_chooser(setup, key){
|
||||
let cameraID = document.createElement("option");
|
||||
let text = document.createTextNode(setup.name);
|
||||
cameraID.value = key;
|
||||
microscope_setups[key] = setup;
|
||||
|
||||
|
||||
if (key == default_setup_id){
|
||||
cameraID.defaultSelected = true;
|
||||
text.textContent += " (default)"
|
||||
microscope_setup = setup;
|
||||
}
|
||||
cameraID.appendChild(text);
|
||||
camera_chooser.appendChild(cameraID);
|
||||
}
|
||||
|
||||
camera_chooser.addEventListener("change", change_cam);
|
||||
function change_cam(){
|
||||
microscope_setup = microscope_setups[this.value];
|
||||
startup();
|
||||
};
|
||||
|
||||
|
||||
function get_default_prep_setup(){
|
||||
const request = db.transaction('defaults')
|
||||
.objectStore('defaults')
|
||||
.get(1);
|
||||
request.onsuccess = ()=> {
|
||||
default_protocol_id = request.result.prep_setup;
|
||||
get_all_prep_prefs();
|
||||
|
||||
// width of FoV -- will be supplied by FLASK microscope setup.
|
||||
|
||||
}
|
||||
|
||||
request.onerror = (err)=> {
|
||||
console.error(`Error to get all setups: ${err}`)
|
||||
}
|
||||
}
|
||||
|
||||
function get_all_prep_prefs(){
|
||||
const request = db.transaction('prep_protocol')
|
||||
.objectStore('prep_protocol')
|
||||
.openCursor();
|
||||
request.onsuccess = ()=> {
|
||||
let cursor = event.target.result;
|
||||
if (cursor) {
|
||||
// Access the current record
|
||||
make_protocol_chooser(cursor.value, cursor.key);
|
||||
// Move to the next record
|
||||
cursor.continue();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
request.onerror = (err)=> {
|
||||
console.error(`Error to get all setups: ${err}`)
|
||||
}
|
||||
}
|
||||
|
||||
var protocol_chooser = document.querySelector("#protocol_chooser");
|
||||
|
||||
function make_protocol_chooser(protocol, key){
|
||||
let protocolID = document.createElement("option");
|
||||
let text = document.createTextNode(protocol.name);
|
||||
protocolID.value = key;
|
||||
prep_protocols[key] = protocol;
|
||||
if (key == default_protocol_id){
|
||||
protocolID.defaultSelected = true;
|
||||
text.textContent += " (default)";
|
||||
dilution_chooser.value = protocol.Main_Dilution;
|
||||
|
||||
}
|
||||
protocolID.appendChild(text);
|
||||
protocol_chooser.appendChild(protocolID);
|
||||
|
||||
}
|
||||
|
||||
protocol_chooser.addEventListener("change", change_protocol);
|
||||
function change_protocol(){
|
||||
protocol = prep_protocols[this.value];
|
||||
dilution_chooser.value = prep_protocol.Main_Dilution;
|
||||
|
||||
};
|
||||
|
||||
|
||||
function get_all_samples(){
|
||||
const request = db.transaction('sample')
|
||||
.objectStore('sample')
|
||||
.openCursor();
|
||||
request.onsuccess = ()=> {
|
||||
let cursor = event.target.result;
|
||||
if (cursor) {
|
||||
// Access the current record
|
||||
make_sample_chooser(cursor.value, cursor.key);
|
||||
sample = cursor.key;
|
||||
// Move to the next record
|
||||
cursor.continue();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
request.onerror = (err)=> {
|
||||
console.error(`Error to get all setups: ${err}`)
|
||||
}
|
||||
}
|
||||
|
||||
var sample_chooser = document.querySelector("#sample_chooser");
|
||||
|
||||
function make_sample_chooser(sample, key){
|
||||
let sampleID = document.createElement("option");
|
||||
let text = document.createTextNode(sample.Name);
|
||||
sampleID.value = key;
|
||||
samples[key] = sample;
|
||||
sampleID.appendChild(text);
|
||||
sample_chooser.appendChild(sampleID);
|
||||
}
|
||||
|
||||
sample_chooser.addEventListener("change", change_sample);
|
||||
function change_sample(){
|
||||
sample = samples[this.value];
|
||||
};
|
||||
|
||||
|
||||
|
||||
var nematode = {
|
||||
"type" : "",
|
||||
"pictures" : [],
|
||||
};
|
||||
|
||||
var nematodes = [];
|
||||
|
||||
function submit_nematode(){
|
||||
if (nematode.type == "") {
|
||||
nematode.type = organism_type.choice.value;
|
||||
}
|
||||
nematodes.push(nematode);
|
||||
nematode = {
|
||||
"type" : "",
|
||||
"pictures" : [],
|
||||
};
|
||||
update_nematode_table();
|
||||
update_results_table();
|
||||
|
||||
}
|
||||
|
||||
function add_picture(){
|
||||
let photo = document.getElementById("photo");
|
||||
if (nematode.type == "") {
|
||||
|
|
@ -191,18 +423,7 @@
|
|||
notes.innerHTML = image.notes;
|
||||
button.innerHTML = '<button class="btn btn-primary float-end" onclick=remove_picture(' + index + ')>remove</button>';
|
||||
}
|
||||
var nematodes = [];
|
||||
|
||||
function submit_nematode(){
|
||||
nematodes.push(nematode);
|
||||
nematode = {
|
||||
"type" : "",
|
||||
"pictures" : [],
|
||||
};
|
||||
update_nematode_table();
|
||||
update_results_table();
|
||||
|
||||
}
|
||||
var results_table = document.querySelector("#Results");
|
||||
|
||||
function update_results_table(){
|
||||
|
|
@ -250,6 +471,30 @@
|
|||
|
||||
}
|
||||
|
||||
submit_results = document.querySelector("#Result_submit")
|
||||
submit_results.addEventListener("click",send_result_to_backend);
|
||||
|
||||
function send_result_to_backend(){
|
||||
let to_send = {
|
||||
"nematodes" : nematodes,
|
||||
"sampleID" : sample_chooser.value,
|
||||
"sample_prep_ID" : protocol_chooser.value,
|
||||
"microscope_setup_ID": camera_chooser.value,
|
||||
"dilution" : dilution_chooser.value,
|
||||
|
||||
}
|
||||
|
||||
let transaction = db.transaction(["nematode_scan"], "readwrite");
|
||||
let objectStore = transaction.objectStore("nematode_scan");
|
||||
let add_request = objectStore.add(to_send); // (3)
|
||||
add_request.onsuccess = (event) => {
|
||||
console.log("All done!");
|
||||
};
|
||||
add_request.onerror = (event) => {
|
||||
console.log("something went wrong");
|
||||
// Don't forget to handle errors!
|
||||
};
|
||||
}
|
||||
|
||||
var video = document.querySelector("#video");
|
||||
var out = document.querySelector("#output");
|
||||
|
|
@ -276,26 +521,6 @@
|
|||
|
||||
// toggle between cameras
|
||||
|
||||
var device_index = 0;
|
||||
|
||||
function toggle_cam(){
|
||||
device_index += 1
|
||||
if (device_index>=deviceIDs.length){
|
||||
device_index=0
|
||||
};
|
||||
|
||||
if (navigator.mediaDevices.getUserMedia) {
|
||||
navigator.mediaDevices.getUserMedia({ video: {
|
||||
deviceId: deviceIDs[device_index],
|
||||
}, })
|
||||
.then(function (stream) {
|
||||
video.srcObject = stream;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log("Something went wrong!");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// init drawing
|
||||
|
||||
|
|
@ -429,7 +654,7 @@
|
|||
startButton = document.getElementById("start-button");
|
||||
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({ video: {width: { ideal: 99999} , height: { ideal: 99999 }}, audio: false })
|
||||
.getUserMedia(microscope_setup.video_prefs)
|
||||
.then((stream) => {
|
||||
video.srcObject = stream;
|
||||
video.play();
|
||||
|
|
@ -510,7 +735,6 @@
|
|||
|
||||
// Set up our event listener to run the startup process
|
||||
// once loading is complete.
|
||||
window.addEventListener("load", startup, false);
|
||||
//})();
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue