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