rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added move to absolute position with position input boxes

Browse source
This commit is contained in:
Joel Collins 2018-11-09 12:13:54 +00:00
parent bd363d8e9d
commit 6ea2928ab8
1 changed files with 60 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

76
openflexure_microscope/api/templates/index_v1.html
View file

@ -10,6 +10,8 @@
x: <input type="number" id="x_abs"> x: <input type="number" id="x_abs">
y: <input type="number" id="y_abs"> y: <input type="number" id="y_abs">
z: <input type="number" id="z_abs"> z: <input type="number" id="z_abs">
<button type="button" onclick="setStagePositionsFromInput();">GO</button>
<button type="button" onclick="getStagePositions();">Update</button>
<br> <br>
<label for="stageVelocityInput">x-y stage velocity:</label> <label for="stageVelocityInput">x-y stage velocity:</label>
@ -20,9 +22,9 @@
</body> </body>
<script> <script>
// TODO: Auto-update position input boxes on-load using position GET request
// TODO: Use position input boxes to set absolute position // TODO: Use position input boxes to set absolute position
// TODO: Mouse wheel to focus? // TODO: Mouse wheel to focus?
// TODO: Remember a position and restore that position
// Key IDs // Key IDs
var pgupKeyID = 33; var pgupKeyID = 33;
@ -43,11 +45,50 @@
var requestLock = false; var requestLock = false;
function updateStageVelocity(val) { window.onload = function() {
document.getElementById('stageVelocityText').value = val; getStagePositions()
stageVelocity = val;
} }
// Methods for updating page content
function updateStageVelocity(val) {
document.getElementById('stageVelocityText').value = val;
stageVelocity = val;
}
function updateStagePositions(response) {
document.getElementById('x_abs').value = response["x"];
document.getElementById('y_abs').value = response["y"];
document.getElementById('z_abs').value = response["z"];
}
function getStagePositions() {
function updatePositionCallback(response, status) {
console.log(status, response);
updateStagePositions(response);
}
safeRequest("GET", "{{ url_for('position') }}", null, updatePositionCallback)
}
function setStagePositions(x_abs, y_abs, z_abs) {
// Make a position request
function absMoveCallback(response, status) {
if (status == 400) {
alert("Stage cannot be moved further than the safe range.");
}
console.log(status, response);
updateStagePositions(response);
}
safeRequest("POST", "{{ url_for('position') }}", { "absolute": true, "x": x_abs, "y": y_abs, "z": z_abs}, absMoveCallback)
}
function setStagePositionsFromInput() {
x_abs = Number(document.getElementById('x_abs').value);
y_abs = Number(document.getElementById('y_abs').value);
z_abs = Number(document.getElementById('z_abs').value);
setStagePositions(x_abs, y_abs, z_abs)
}
// Methods for input events
addEventListener("keydown", function (e) { addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true; //Add key to array keysDown[e.keyCode] = true; //Add key to array
console.log(keysDown) console.log(keysDown)
@ -78,13 +119,11 @@
} }
// Make a position request // Make a position request
function keyMoveCallback(response) { function keyMoveCallback(response, status) {
console.log(response); console.log(status, response);
document.getElementById('x_abs').value = response["x"]; updateStagePositions(response);
document.getElementById('y_abs').value = response["y"];
document.getElementById('z_abs').value = response["z"];
} }
safePost("{{ url_for('position') }}", { "absolute": false, "x": x_rel, "y": y_rel, "z": z_rel}, keyMoveCallback) safeRequest("POST", "{{ url_for('position') }}", { "absolute": false, "x": x_rel, "y": y_rel, "z": z_rel}, keyMoveCallback)
} }
}, false); }, false);
@ -93,26 +132,29 @@
delete keysDown[e.keyCode]; //Remove key from array delete keysDown[e.keyCode]; //Remove key from array
}, false); }, false);
// Methods for making requests
function safePost(url, payload, callback) { function safeRequest(method, url, payload, callback) {
if (requestLock == false) { if (requestLock == false) {
var xhr = new XMLHttpRequest(); // new HttpRequest instance var xhr = new XMLHttpRequest(); // new HttpRequest instance
xhr.open("POST", url); xhr.open(method, url);
requestLock = true; requestLock = true;
xhr.onload = function (e) { xhr.onload = function (e) {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
if (xhr.status === 200) { if (xhr.status !== 200) {
callback(JSON.parse(xhr.responseText));
} else {
console.error(xhr.statusText); console.error(xhr.statusText);
} }
callback(JSON.parse(xhr.responseText), xhr.status);
} }
requestLock = false; requestLock = false;
}; };
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); if (method == "POST" || method == "PUT") {
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
}
xhr.send(JSON.stringify(payload)); xhr.send(JSON.stringify(payload));
} }
else { else {
console.log("Cannot start new request while previous requets is pending...") console.log("Cannot start new request while previous requets is pending...")