165 lines
5 KiB
HTML
165 lines
5 KiB
HTML
<html>
|
|
<head>
|
|
<title>Video Streaming Demonstration</title>
|
|
</head>
|
|
<body>
|
|
<h1>Video Streaming Demonstration</h1>
|
|
<img src="{{ url_for('stream') }}">
|
|
<br>
|
|
|
|
x: <input type="number" id="x_abs">
|
|
y: <input type="number" id="y_abs">
|
|
z: <input type="number" id="z_abs">
|
|
<button type="button" onclick="setStagePositionsFromInput();">GO</button>
|
|
<button type="button" onclick="getStagePositions();">Update</button>
|
|
<br>
|
|
|
|
<label for="stageVelocityInput">x-y stage velocity:</label>
|
|
<br>
|
|
<input type="range" name="stageVelocityInput" min="50" max="200" value="100" oninput="updateStageVelocity(this.value);">
|
|
<input type="text" id="stageVelocityText" value="100" disabled>
|
|
|
|
</body>
|
|
|
|
<script>
|
|
// TODO: Mouse wheel to focus?
|
|
// TODO: Remember a position and restore that position
|
|
|
|
// Key IDs
|
|
var pgupKeyID = 33;
|
|
var pgdnKeyID = 34;
|
|
|
|
var leftKeyID = 37;
|
|
var upKeyID = 38;
|
|
var rightKeyID = 39;
|
|
var downKeyID = 40;
|
|
|
|
var enterKeyID = 13;
|
|
var escKeyID = 27;
|
|
|
|
var keysDown = {}; //Array of keys down
|
|
|
|
var stageVelocity = 50;
|
|
var focusVelocity = 20;
|
|
|
|
var requestLock = false;
|
|
|
|
window.onload = function() {
|
|
getStagePositions()
|
|
}
|
|
|
|
// 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) {
|
|
keysDown[e.keyCode] = true; //Add key to array
|
|
console.log(keysDown)
|
|
|
|
// If stage movement keys are pressed
|
|
if ((leftKeyID in keysDown) || (rightKeyID in keysDown) || (upKeyID in keysDown) || (downKeyID in keysDown) || (pgupKeyID in keysDown) || (pgdnKeyID in keysDown)) {
|
|
// Calculate movement array
|
|
x_rel = 0;
|
|
y_rel = 0;
|
|
z_rel = 0;
|
|
if (leftKeyID in keysDown) {
|
|
x_rel = x_rel + stageVelocity;
|
|
}
|
|
if (rightKeyID in keysDown) {
|
|
x_rel = x_rel - stageVelocity;
|
|
}
|
|
if (upKeyID in keysDown) {
|
|
y_rel = y_rel + stageVelocity;
|
|
}
|
|
if (downKeyID in keysDown) {
|
|
y_rel = y_rel - stageVelocity;
|
|
}
|
|
if (pgupKeyID in keysDown) {
|
|
z_rel = z_rel - focusVelocity;
|
|
}
|
|
if (pgdnKeyID in keysDown) {
|
|
z_rel = z_rel + focusVelocity;
|
|
}
|
|
|
|
// Make a position request
|
|
function keyMoveCallback(response, status) {
|
|
console.log(status, response);
|
|
updateStagePositions(response);
|
|
}
|
|
safeRequest("POST", "{{ url_for('position') }}", { "absolute": false, "x": x_rel, "y": y_rel, "z": z_rel}, keyMoveCallback)
|
|
}
|
|
|
|
}, false);
|
|
|
|
addEventListener("keyup", function (e) {
|
|
delete keysDown[e.keyCode]; //Remove key from array
|
|
}, false);
|
|
|
|
// Methods for making requests
|
|
function safeRequest(method, url, payload, callback) {
|
|
if (requestLock == false) {
|
|
var xhr = new XMLHttpRequest(); // new HttpRequest instance
|
|
xhr.open(method, url);
|
|
requestLock = true;
|
|
|
|
xhr.onload = function (e) {
|
|
if (xhr.readyState === 4) {
|
|
if (xhr.status !== 200) {
|
|
console.error(xhr.statusText);
|
|
}
|
|
callback(JSON.parse(xhr.responseText), xhr.status);
|
|
}
|
|
requestLock = false;
|
|
};
|
|
|
|
if (method == "POST" || method == "PUT") {
|
|
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
|
|
}
|
|
|
|
xhr.send(JSON.stringify(payload));
|
|
|
|
}
|
|
else {
|
|
console.log("Cannot start new request while previous requets is pending...")
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</html>
|