remove organism table from control elements
add choosers and startup when default prefs are loaded.
This commit is contained in:
parent
78f5d450e9
commit
8294bc4f82
|
|
@ -54,7 +54,24 @@
|
|||
<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" 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" 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" 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">
|
||||
|
|
@ -101,45 +118,17 @@
|
|||
</div>
|
||||
|
||||
<button class="btn btn-primary float-end" id="organism_submit">submit organism</button>
|
||||
|
||||
<div id="organisms-table">
|
||||
<h2> organisms </h2>
|
||||
<table id= "org-table" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
type
|
||||
</th>
|
||||
<th>
|
||||
length
|
||||
</th>
|
||||
<th>
|
||||
width
|
||||
</th>
|
||||
<th>
|
||||
colour
|
||||
</th>
|
||||
<th>
|
||||
notes
|
||||
</th>
|
||||
<th>
|
||||
actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button class="btn btn-primary float-end" onclick="push_to_FoV();">submit picture</button>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
|
@ -286,13 +275,22 @@
|
|||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var video = document.querySelector("#video");
|
||||
var out = document.querySelector("#output");
|
||||
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")
|
||||
|
||||
// toggle fullscreen of output element (video + control elements)
|
||||
function toggleFullscreen() {
|
||||
console.log('yay');
|
||||
let elem = document.querySelector("#output");
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
elem.requestFullscreen().catch((err) => {
|
||||
out.requestFullscreen().catch((err) => {
|
||||
alert(
|
||||
`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`,
|
||||
);
|
||||
|
|
@ -302,55 +300,189 @@
|
|||
}
|
||||
|
||||
}
|
||||
// video shit.
|
||||
// init video get video prefs from db
|
||||
|
||||
var db;
|
||||
let openRequest = indexedDB.open("my_db");
|
||||
|
||||
var video = document.querySelector("#video");
|
||||
var out = document.querySelector("#output");
|
||||
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.
|
||||
var real_width_FoV = 255;
|
||||
|
||||
// init video switching get IDs of video inputs
|
||||
|
||||
var deviceIDs = [];
|
||||
|
||||
navigator.mediaDevices
|
||||
.enumerateDevices()
|
||||
.then((devices) => {
|
||||
devices.forEach((device) => {
|
||||
if (device.kind=="videoinput"){
|
||||
deviceIDs.push(device.deviceId);
|
||||
}
|
||||
console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(`${err.name}: ${err.message}`);
|
||||
});
|
||||
|
||||
// toggle between cameras
|
||||
request.onerror = (err)=> {
|
||||
console.error(`Error to get all setups: ${err}`)
|
||||
}
|
||||
}
|
||||
|
||||
var device_index = 0;
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
function toggle_cam(){
|
||||
device_index += 1
|
||||
if (device_index>=deviceIDs.length){
|
||||
device_index=0
|
||||
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 = microscope_setups.length;
|
||||
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();
|
||||
};
|
||||
|
||||
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!");
|
||||
});
|
||||
|
||||
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;
|
||||
prep_protocol = protocol;
|
||||
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(){
|
||||
prep_protocol = prep_protocols[this.value];
|
||||
dilution_chooser.value = prep_protocol.Main_Dilution;
|
||||
};
|
||||
|
||||
// init drawing
|
||||
|
||||
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 canvas_draw = document.querySelector("#canvas-draw");
|
||||
var ctx = canvas_draw.getContext('2d');
|
||||
|
|
@ -987,7 +1119,24 @@
|
|||
result_submit.addEventListener('click', send_result_to_backend);
|
||||
|
||||
function send_result_to_backend(){
|
||||
return;
|
||||
let to_send = {
|
||||
"result" : result,
|
||||
"sampleID" : sample_chooser.value,
|
||||
"setupID" : camera_chooser.value,
|
||||
"prepID" : protocol_chooser.value,
|
||||
"dilution" : dilution_chooser.value,
|
||||
}
|
||||
|
||||
let transaction = db.transaction(["main_scan"], "readwrite");
|
||||
let objectStore = transaction.objectStore("main_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!
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -995,14 +1144,14 @@
|
|||
|
||||
function startup() {
|
||||
setOrganismType()
|
||||
output = document.getElementById("output");
|
||||
real_width_FoV = microscope_setup.FoV_Width;
|
||||
video = document.getElementById("video");
|
||||
canvas = document.getElementById("canvas-temp");
|
||||
photo = document.getElementById("photo");
|
||||
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();
|
||||
|
|
@ -1080,10 +1229,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Set up our event listener to run the startup process
|
||||
// once loading is complete.
|
||||
window.addEventListener("load", startup, false);
|
||||
//})();
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue