Restructured API demo
This commit is contained in:
Joel Collins
parent
2a52109c30
commit
740bf8fb68
3 changed files with 327 additions and 203 deletions
190
openflexure_microscope/api/static/main_v1.js
Normal file
190
openflexure_microscope/api/static/main_v1.js
Normal file
|
|
@ -0,0 +1,190 @@
|
||||||
|
// TODO: Remember a position and restore that position
|
||||||
|
// TODO: Right click to auto-focus, centered on that region
|
||||||
|
|
||||||
|
var baseURI = "/api/v1"
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Microscope client-side callibration
|
||||||
|
//TODO: Move to serverside microscope property
|
||||||
|
var fovX = 4100;
|
||||||
|
var fovY = 3146;
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
getStagePositions()
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateTextBoxes() {
|
||||||
|
document.getElementById('stageVelocityText').value = stageVelocity;
|
||||||
|
document.getElementById('focusVelocityText').value = focusVelocity;
|
||||||
|
|
||||||
|
document.getElementById('fovXText').value = fovX;
|
||||||
|
document.getElementById('fovYText').value = fovY;
|
||||||
|
}
|
||||||
|
|
||||||
|
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", baseURI+"/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", baseURI+"/position", { "absolute": true, "x": x_abs, "y": y_abs, "z": z_abs}, absMoveCallback)
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveStagePositions(x_rel, y_rel, z_rel) {
|
||||||
|
// Make a position request
|
||||||
|
function relMoveCallback(response, status) {
|
||||||
|
if (status == 400) {
|
||||||
|
alert("Stage cannot be moved further than the safe range.");
|
||||||
|
}
|
||||||
|
console.log(status, response);
|
||||||
|
updateStagePositions(response);
|
||||||
|
}
|
||||||
|
safeRequest("POST", baseURI+"/position", { "absolute": false, "x": x_rel, "y": y_rel, "z": z_rel}, relMoveCallback)
|
||||||
|
}
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Standard callback for user-controller movement
|
||||||
|
function keyMoveCallback(response, status) {
|
||||||
|
console.log(status, response);
|
||||||
|
updateStagePositions(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Methods for input events
|
||||||
|
|
||||||
|
// Click-to-move
|
||||||
|
function clickHotspotImage(event) {
|
||||||
|
if (document.getElementById("clickPositionCheck").checked == true) {
|
||||||
|
xCoordinate = event.offsetX;
|
||||||
|
yCoordinate = event.offsetY;
|
||||||
|
console.log(xCoordinate, yCoordinate)
|
||||||
|
xRelative = (0.5*event.target.offsetWidth - xCoordinate)/event.target.offsetWidth;
|
||||||
|
yRelative = (0.5*event.target.offsetHeight - yCoordinate)/event.target.offsetHeight;
|
||||||
|
console.log(xRelative, yRelative)
|
||||||
|
xSteps = xRelative * fovX;
|
||||||
|
ySteps = yRelative * fovY;
|
||||||
|
console.log(xSteps, ySteps, 0)
|
||||||
|
// Make a position request
|
||||||
|
moveStagePositions(xSteps, ySteps, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scroll-to-focus
|
||||||
|
window.addEventListener('wheel', function(e) {
|
||||||
|
multiplier = 1/100;
|
||||||
|
z_delta = e.deltaY * multiplier * focusVelocity;
|
||||||
|
if (document.getElementById("scrollFocusCheck").checked == true) {
|
||||||
|
console.log(z_delta);
|
||||||
|
// Make a position request
|
||||||
|
safeRequest("POST", baseURI+"/position", { "absolute": false, "z": z_delta}, keyMoveCallback)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Keyboard to move
|
||||||
|
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
|
||||||
|
moveStagePositions(x_rel, y_rel, z_rel)
|
||||||
|
}
|
||||||
|
|
||||||
|
}, 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...")
|
||||||
|
}
|
||||||
|
}
|
||||||
65
openflexure_microscope/api/static/style_v1.css
Normal file
65
openflexure_microscope/api/static/style_v1.css
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Preview sizing */
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create columns that float next to each other */
|
||||||
|
.column {
|
||||||
|
padding: 10px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left, .right {
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left{
|
||||||
|
width: 250px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Right{
|
||||||
|
width: 250px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle {
|
||||||
|
margin-left: 250px;
|
||||||
|
margin-right: 250px;
|
||||||
|
background-color: #d3d3d3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Clear floats after the columns */
|
||||||
|
.row:after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Columns within panels */
|
||||||
|
|
||||||
|
.left-col {
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
.right-col {
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
|
.clearfix::after {
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1,218 +1,87 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>OpenFlexure Microscope API Demo</title>
|
<title>OpenFlexure Microscope API Demo</title>
|
||||||
|
|
||||||
|
<link rel= "stylesheet" type= "text/css" href="{{url_for('static', filename='style_v1.css')}}">
|
||||||
|
<script type="text/javascript" src="{{url_for('static', filename='main_v1.js')}}"></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>OpenFlexure Microscope API Demo</h1>
|
|
||||||
<img src="{{ url_for('stream') }}" ondblclick="clickHotspotImage(event)";>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
x: <input type="number" id="x_abs">
|
<div class="row">
|
||||||
y: <input type="number" id="y_abs">
|
<div class="column left">
|
||||||
z: <input type="number" id="z_abs">
|
<h2>Settings</h2>
|
||||||
<button type="button" onclick="setStagePositionsFromInput();">GO</button>
|
|
||||||
<button type="button" onclick="getStagePositions();">Update</button>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
Velocity:
|
<h3>Position</h3>
|
||||||
<br>
|
<p>
|
||||||
x-y: <input type="range" name="stageVelocityInput" min="50" max="200" value="100" oninput="stageVelocity = Number(this.value);">
|
x: <input type="number" id="x_abs"><br>
|
||||||
<input type="text" id="stageVelocityText" value="100" size="3" disabled>
|
y: <input type="number" id="y_abs"><br>
|
||||||
z: <input type="range" name="focusVelocityInput" min="10" max="100" value="20" oninput="focusVelocity = Number(this.value);">
|
z: <input type="number" id="z_abs"><br>
|
||||||
<input type="text" id="focusVelocityText" value="20" size="3" disabled>
|
</p>
|
||||||
<br>
|
<p>
|
||||||
|
<button type="button" onclick="setStagePositionsFromInput();">GO</button>
|
||||||
|
<button type="button" onclick="getStagePositions();">Update</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
Scroll focus: <input type="checkbox" id="scrollFocusCheck" checked>
|
<p>
|
||||||
<br>
|
Doubleclick to position: <input type="checkbox" id="clickPositionCheck" checked><br>
|
||||||
|
<div class="clearfix">
|
||||||
|
<div class="left-col">FOV width:</div>
|
||||||
|
<div class="right-col">
|
||||||
|
<input type="text" id="fovXText" value="4100" size="4" onchange="fovX = Number(this.value); updateTextBoxes();">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
Click position: <input type="checkbox" id="clickPositionCheck" checked>
|
<div class="clearfix">
|
||||||
x FOV: <input type="text" id="fovXText" value="4100" size="4" onchange="fovX = Number(this.value);">
|
<div class="left-col">FOV height:</div>
|
||||||
y FOV: <input type="text" id="fovYText" value="3146" size="4" onchange="fovY = Number(this.value);">
|
<div class="right-col">
|
||||||
|
<input type="text" id="fovYText" value="3146" size="4" onchange="fovY = Number(this.value); updateTextBoxes();">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
<h3>Move</h3>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<b>Up/down/left/right:</b> <br>
|
||||||
|
Move stage in x-y. <br>
|
||||||
|
<b>PgUp/PgDn: </b> <br>
|
||||||
|
Move stage in z/focus.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h4>Velocity:</h4>
|
||||||
|
<div class="clearfix">
|
||||||
|
<div class="left-col">x-y:</div>
|
||||||
|
<div class="right-col">
|
||||||
|
<input type="range" name="stageVelocityInput" min="50" max="200" value="100" oninput="stageVelocity = Number(this.value); updateTextBoxes();">
|
||||||
|
<input type="text" id="stageVelocityText" value="100" size="3" disabled>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix">
|
||||||
|
<div class="left-col">z:</div>
|
||||||
|
<div class="right-col">
|
||||||
|
<input type="range" name="focusVelocityInput" min="10" max="100" value="20" oninput="focusVelocity = Number(this.value); updateTextBoxes();">
|
||||||
|
<input type="text" id="focusVelocityText" value="20" size="3" disabled>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Scroll to focus: <input type="checkbox" id="scrollFocusCheck" checked></p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column right">
|
||||||
|
<h2>Captures</h2>
|
||||||
|
<p>Not yet implemented.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column middle">
|
||||||
|
<img src="/api/v1/stream" ondblclick="clickHotspotImage(event)" ;="" style="width: 100%;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script>
|
|
||||||
// TODO: Remember a position and restore that position
|
|
||||||
// TODO: Right click to auto-focus, centered on that region
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
|
|
||||||
// Microscope client-side callibration
|
|
||||||
//TODO: Move to serverside microscope property
|
|
||||||
var fovX = 4100;
|
|
||||||
var fovY = 3146;
|
|
||||||
|
|
||||||
window.onload = function() {
|
|
||||||
getStagePositions()
|
|
||||||
}
|
|
||||||
|
|
||||||
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 moveStagePositions(x_rel, y_rel, z_rel) {
|
|
||||||
// Make a position request
|
|
||||||
function relMoveCallback(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": false, "x": x_rel, "y": y_rel, "z": z_rel}, relMoveCallback)
|
|
||||||
}
|
|
||||||
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Standard callback for user-controller movement
|
|
||||||
function keyMoveCallback(response, status) {
|
|
||||||
console.log(status, response);
|
|
||||||
updateStagePositions(response);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Methods for input events
|
|
||||||
|
|
||||||
// Click-to-move
|
|
||||||
function clickHotspotImage(event) {
|
|
||||||
if (document.getElementById("clickPositionCheck").checked == true) {
|
|
||||||
xCoordinate = event.offsetX;
|
|
||||||
yCoordinate = event.offsetY;
|
|
||||||
console.log(xCoordinate, yCoordinate)
|
|
||||||
xRelative = (0.5*event.target.offsetWidth - xCoordinate)/event.target.offsetWidth;
|
|
||||||
yRelative = (0.5*event.target.offsetHeight - yCoordinate)/event.target.offsetHeight;
|
|
||||||
console.log(xRelative, yRelative)
|
|
||||||
xSteps = xRelative * fovX;
|
|
||||||
ySteps = yRelative * fovY;
|
|
||||||
console.log(xSteps, ySteps, 0)
|
|
||||||
moveStagePositions(xSteps, ySteps, 0)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Scroll-to-focus
|
|
||||||
window.addEventListener('wheel', function(e) {
|
|
||||||
multiplier = 1/100;
|
|
||||||
z_delta = e.deltaY * multiplier * focusVelocity;
|
|
||||||
console.log(z_delta);
|
|
||||||
if (document.getElementById("scrollFocusCheck").checked == true) {
|
|
||||||
// Make a position request
|
|
||||||
safeRequest("POST", "{{ url_for('position') }}", { "absolute": false, "z": z_delta}, keyMoveCallback)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
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
|
|
||||||
moveStagePositions(x_rel, y_rel, z_rel)
|
|
||||||
}
|
|
||||||
|
|
||||||
}, 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>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue