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

fix video, fix form submit, fix measuring two length instead of one, increase canvas resolution

Browse source
This commit is contained in:
lukas fricke 2025-01-17 03:44:56 +01:00
parent 99d276c02b
commit 3691c617d3
1 changed files with 69 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

171
setup_microscope.html
View file

@ -6,36 +6,46 @@
<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>
<style> <style>
#output{ #output{
position: relative; position: relative;
width: 100%; width: 100%;
} }
#video_container{ #video_container{
position:relative; position: relative;
height:100%; }
}
#video { #video {
position:relative; position:absolute;
z-index: 15; z-index: 9;
height:100%; width: 100%;
} }
#canvas-draw{ #canvas-draw{
position:absolute; position:absolute;
z-index:10; z-index:10;
height: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;
height:100% width: 100%;
}
#canvas-temp{ }
display: none;
} #canvas-temp{
display: none;
}
#control-elements {
height:30em;
}
</style> </style>
</header> </header>
@ -59,30 +69,18 @@
Toggle camera Toggle camera
</button> </button>
</div> </div>
<div id="real_dimensions" class="row align-items-end"> <div id="control_elements" class="row align-items-end">
<p> <div class="col" name="length" >
put an object of known length and width under the microscope. <label class = "form-label" for="real_length">
enter width and height of measured object Please enter the length of the object in um:
</p>
<div class="col" name="width" >
<label class = "form-label" for="real_width">
Width
</label> </label>
<input class="form-control" id = "real_width" type="text" <input class="form-control" id = "real_length" type="text"
name="real_width" value=0> name="real_length" value=0>
</input>
</div>
<div class="col" name="height" >
<label class = "form-label" for="real_height">
Height
</label>
<input class="form-control" id = "real_height" type="text"
name="real_height" value=0>
</input> </input>
</div> </div>
</div> </div>
<br> <br>
<form class="needs-validation" name = "microscope_setup" onsubmit="return false;"> <form class="needs-validation" id = "microscope_setup">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<label class = "form-label" for="name"> <label class = "form-label" for="name">
@ -153,11 +151,11 @@
</label> </label>
</div> </div>
<div class="col"> <div class="col">
<input class="form-control" type="number" name="eyepiece_number"> <input class="form-control" type="number" id = "Eyepiece_Number" name="eyepiece_number">
</input> </input>
</div> </div>
</div> </div>
<button class="btn btn-primary float-end" onclick="add();">submit</button> <button class="btn btn-primary float-end" type="submit">submit</button>
</form> </form>
</div> </div>
@ -190,8 +188,11 @@
db = openRequest.result; db = openRequest.result;
// continue working with database using db object // continue working with database using db object
}; };
function add(e){
e.preventDefault(); const form = document.getElementById("microscope_setup");
form.addEventListener("submit", add);
function add(event){
let microscope_setup = { let microscope_setup = {
"name" : document.getElementById("name").value, "name" : document.getElementById("name").value,
"FoV_Height" : document.getElementById("FoV_height").value, "FoV_Height" : document.getElementById("FoV_height").value,
@ -210,13 +211,13 @@
console.log("something went wrong"); console.log("something went wrong");
// Don't forget to handle errors! // Don't forget to handle errors!
}; };
event.preventDefault();
} }
</script> </script>
<script> <script>
var video = document.querySelector("#video"); var video = document.querySelector("#video");
var out = document.querySelector("#output"); var out = document.querySelector("#output");
// width of FoV -- will be supplied by FLASK microscope setup.
var real_width_FoV = 255;
// init video switching get IDs of video inputs // init video switching get IDs of video inputs
navigator.mediaDevices navigator.mediaDevices
@ -238,11 +239,6 @@ navigator.mediaDevices
var deviceIDs = []; var deviceIDs = [];
var device_index = 0; var device_index = 0;
var real_dimensions = document.querySelector("#real_dimensions");
var fov_width = document.querySelector("#FoV_width");
var fov_height = document.querySelector("#FoV_height");
var real_width = document.querySelector("#real_width");
var real_height = document.querySelector("#real_height");
function toggle_cam(){ function toggle_cam(){
device_index += 1 device_index += 1
@ -263,6 +259,10 @@ function toggle_cam(){
} }
}; };
var real_dimensions = document.querySelector("#real_dimensions");
var fov_width = document.querySelector("#FoV_width");
var fov_height = document.querySelector("#FoV_height");
var real_length = document.querySelector("#real_length");
// init drawing // init drawing
var canvas_draw = document.querySelector("#canvas-draw"); var canvas_draw = document.querySelector("#canvas-draw");
@ -303,51 +303,21 @@ function setPosition(e) {
// the draw function to draw onto canvas // the draw function to draw onto canvas
canvas_draw.addEventListener('mousemove', draw); canvas_draw.addEventListener('mousemove', draw);
function draw_path(path){
// draw on canvas.
ctx.beginPath(); // begin
ctx.lineWidth = 0.5;
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
for (var i = 0; i < path.length-1; i++) {
ctx.moveTo(path[i].x, path[i].y);
ctx.lineTo(path[i+1].x, path[i+1].y);
ctx.stroke();
}
}
function draw(e) { function draw(e) {
// mouse left button must be pressed and video must be hidden / a photo must have been taken. // mouse left button must be pressed and video must be hidden / a photo must have been taken.
if (e.buttons !== 1 && line.length !== 0) { if (e.buttons !== 1 && line.length !== 0) {
// push the line to lines array // push the line to lines array
console.log('Yay'); console.log('Yay');
if (lines.length == 0){ line.push({x: pos.x, y: pos.y});
line.push({x: start_pos.x, y: pos.y}); let measured_length = get_length(line);
lines.push(line); fov_height.value = ((real_length.value/(measured_length * canvas_draw.width))* canvas_draw.width).toFixed(0);
let measured_height = get_length(line); fov_width.value = ((real_length.value/(measured_length * canvas_draw.width))* canvas_draw.height).toFixed(0);
fov_height.value = ((real_height.value/(measured_height * canvas_draw.width))*canvas_draw.height).toFixed(0);
line = [];
return;
} else if ((lines.length == 1)){
line.push({x: pos.x, y: start_pos.y});
lines.push(line);
let measured_width = get_length(line);
fov_width.value = ((real_width.value/(measured_width * canvas_draw.width)) * canvas_draw.width).toFixed(0);
line = [];
return;
}
line = [];
return;
} }
// draw on canvas. // draw on canvas.
if (e.buttons == 1){ if (e.buttons == 1){
if (lines.length == 2){
lines=[];
}
canvas_draw.getContext('2d').clearRect(0, 0, canvas_draw.width, canvas_draw.height); canvas_draw.getContext('2d').clearRect(0, 0, canvas_draw.width, canvas_draw.height);
if (lines.length == 1){ if (lines.length == 1){
@ -355,25 +325,20 @@ function draw(e) {
} }
ctx.beginPath(); // begin ctx.beginPath(); // begin
ctx.lineWidth = 0.5; ctx.lineWidth = 5;
ctx.lineCap = 'round'; ctx.lineCap = 'round';
ctx.strokeStyle = 'black'; ctx.strokeStyle = 'black';
// update line // update line
// first time push the first position // first time push the first position
if (line.length == 0){ if (line.length == 0){
console.log('yay');
start_pos = {x:pos.x, y:pos.y}; start_pos = {x:pos.x, y:pos.y};
line.push(start_pos); line.push(start_pos);
} }
console.log(start_pos.x)
ctx.moveTo(start_pos.x, start_pos.y); // from ctx.moveTo(start_pos.x, start_pos.y); // from
setPosition(e); setPosition(e);
if (lines.length==0){ ctx.lineTo(pos.x, pos.y); // to
ctx.lineTo(start_pos.x, pos.y); // to
} else if (lines.length==1){
ctx.lineTo(pos.x, start_pos.y); // to
}
ctx.stroke(); // draw it! ctx.stroke(); // draw it!
} }
} }
@ -388,7 +353,7 @@ function draw(e) {
startButton = document.getElementById("start-button"); startButton = document.getElementById("start-button");
navigator.mediaDevices navigator.mediaDevices
.getUserMedia({ video: true, audio: false }) .getUserMedia({ video: {width: { ideal: 99999} , height: { ideal: 99999 }}, audio: false })
.then((stream) => { .then((stream) => {
video.srcObject = stream; video.srcObject = stream;
video.play(); video.play();
@ -401,7 +366,7 @@ function draw(e) {
"canplay", "canplay",
(ev) => { (ev) => {
if (!streaming) { if (!streaming) {
video_aspect = video.videoWidth / video.videoHeight; video_aspect = video.videoWidth / video.videoHeight;
video.style.aspectRatio = video_aspect; video.style.aspectRatio = video_aspect;
@ -410,6 +375,8 @@ function draw(e) {
canvas.style.aspectRatio = video_aspect; canvas.style.aspectRatio = video_aspect;
canvas_draw.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; streaming = true;
} }