202 lines
8.3 KiB
Plaintext
202 lines
8.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel='stylesheet' href='/css/stylesheet.css' />
|
|
|
|
<title>5G drone API</title>
|
|
</head>
|
|
|
|
<body>
|
|
<h1 class="header">5G Drone API</h1>
|
|
<div class="video">
|
|
<div class="mainvideo">
|
|
<p>Camera view:</p>
|
|
<div id="connectedbuttons">
|
|
<div id="connectedstatus">
|
|
<p id="connectedlabel">Connected: <%- api_connected %></p>
|
|
<button id="connectbutton" onclick="connect()">Connect</button>
|
|
</div>
|
|
<div id="buttons">
|
|
<button id="take_picture" onclick="take_picture()">Take picture</button>
|
|
<br>
|
|
<button id="arm_disarm" onclick="arm_disarm()">Arm/Disarm</button>
|
|
</div>
|
|
</div>
|
|
<div id="controls">
|
|
<h2>Controls</h2>
|
|
<div id="buttons">
|
|
<button class="movebutton" id="button_turnleft" >Turn left</button>
|
|
<button class="movebutton" id="button_turnright">Turn right</button>
|
|
<button class="movebutton" id="button_up" >Up</button>
|
|
<button class="movebutton" id="button_down" >Down</button>
|
|
<button class="movebutton" id="button_forward">Forward</button>
|
|
<button class="movebutton" id="button_backward">Backward</button>
|
|
<button class="movebutton" id="button_left">Left</button>
|
|
<button class="movebutton" id="button_right">Right</button>
|
|
<button id="button_stop" onclick="stop()">Stop</button>
|
|
<button id="button_estop" onclick="estop()"><strong>Emergency Stop</strong></button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lastpicture">
|
|
<p>Last picture:</p>
|
|
<img id="picture">
|
|
<h2>Drone status</h2>
|
|
<p id="batterypercentage">Battery percentage</p>
|
|
<p id="cpuload">CPU load</p>
|
|
<p id="armed"></p>
|
|
<p id="control_mode"></p>
|
|
<p id="speed">Current speed</p>
|
|
<p id="position">Current position</p>
|
|
<p id="failsafe">Failsafe status</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
var update_status = setInterval(update_status, 1000);
|
|
assign_button_callbacks();
|
|
|
|
function assign_button_callbacks() {
|
|
var buttons = document.getElementsByClassName("movebutton");
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
buttons[i].addEventListener("mouseup", function () {
|
|
stop();
|
|
});
|
|
}
|
|
document.getElementById("button_forward").addEventListener("mousedown", function () {forward();});
|
|
document.getElementById("button_backward").addEventListener("mousedown", function () {backward();});
|
|
document.getElementById("button_left").addEventListener("mousedown", function () {left();});
|
|
document.getElementById("button_right").addEventListener("mousedown", function () {right();});
|
|
document.getElementById("button_turnleft").addEventListener("mousedown", function () {turn_left();});
|
|
document.getElementById("button_turnright").addEventListener("mousedown", function () {turn_right();});
|
|
document.getElementById("button_up").addEventListener("mousedown", function () {up();});
|
|
document.getElementById("button_down").addEventListener("mousedown", function () {down();});
|
|
}
|
|
|
|
function update_status() {
|
|
// {"battery_percentage": 100.0, "cpu_usage": 0.0, "armed": false, "control_mode": "attitude", "route_setpoint": 0}}
|
|
// console.log("updating status")
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "/status", true);
|
|
xhr.onreadystatechange = function () {
|
|
if (this.status == 200) {
|
|
// console.log(this.responseText);
|
|
if (this.responseText.length > 0) {
|
|
var status = JSON.parse(this.responseText);
|
|
// console.log(status)
|
|
document.getElementById("batterypercentage").innerHTML = "Battery percentage: " + status.battery_percentage;
|
|
document.getElementById("cpuload").innerHTML = "CPU load: " + status.cpu_usage;
|
|
document.getElementById("armed").innerHTML = "Armed: " + status.armed;
|
|
document.getElementById("control_mode").innerHTML = "Control mode: " + status.control_mode;
|
|
}
|
|
}
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
function send_move_request(data)
|
|
{
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "/move", true);
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
|
xhr.send(data);
|
|
}
|
|
|
|
function turn_left() {
|
|
console.log("turnleft");
|
|
send_move_request(JSON.stringify({ "up_down": 0.0,"forward_backward": 0.0, "left_right": 0.0, "turn_left_right": -10.0}));
|
|
}
|
|
function turn_right() {
|
|
console.log("turnright");
|
|
send_move_request(JSON.stringify({ "up_down": 0.0 ,"forward_backward": 0.0, "left_right": 0.0, "turn_left_right": 10.0}));
|
|
}
|
|
function up() {
|
|
console.log("up");
|
|
send_move_request(JSON.stringify({ "up_down": 1.0 ,"forward_backward": 0.0, "left_right": 0.0, "turn_left_right": 0.0}));
|
|
|
|
}
|
|
function down() {
|
|
console.log("down");
|
|
send_move_request(JSON.stringify({ "up_down": -1.0 ,"forward_backward": 0.0, "left_right": 0.0, "turn_left_right": 0.0}));
|
|
|
|
}
|
|
function forward() {
|
|
console.log("forward");send_move_request(JSON.stringify({ "up_down": 0.0,"forward_backward": 1.0, "left_right": 0.0, "turn_left_right": 0.0}));
|
|
|
|
}
|
|
function backward() {
|
|
console.log("backward");
|
|
send_move_request(JSON.stringify({ "up_down": 0.0 ,"forward_backward": -1.0, "left_right": 0.0, "turn_left_right": 0.0}));
|
|
}
|
|
function left() {
|
|
console.log("left");
|
|
send_move_request(JSON.stringify({ "up_down": 0.0 ,"forward_backward": 0.0, "left_right": -1.0, "turn_left_right": 0.0}));
|
|
}
|
|
function right() {
|
|
console.log("right");
|
|
send_move_request(JSON.stringify({ "up_down": 0.0 ,"forward_backward": 0.0, "left_right": 1.0, "turn_left_right": 0.0}));
|
|
}
|
|
function stop() {
|
|
console.log("stop");
|
|
send_move_request(JSON.stringify({ "up_down": 0.0 ,"forward_backward": 0.0, "left_right": 0.0, "turn_left_right": 0.0}));
|
|
}
|
|
|
|
function estop() {
|
|
console.log("estop");
|
|
}
|
|
|
|
function take_picture() {
|
|
console.log("take picture");
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "/image", true);
|
|
xhr.overrideMimeType("text/plain; charset=utf-8");
|
|
xhr.onload = (e) => {
|
|
console.log("response image received");
|
|
const img = e.response;
|
|
document.getElementById("picture").src = "data:image/png;base64," + img;
|
|
}
|
|
console.log("sending picture request")
|
|
xhr.send();
|
|
}
|
|
|
|
function arm_disarm() {
|
|
console.log("arm/disarm");
|
|
}
|
|
|
|
function connect() {
|
|
var received = false;
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "/connect", true);
|
|
xhr.onreadystatechange = function () {
|
|
if (this.status == 200) {
|
|
console.log(this.responseText);
|
|
if (this.responseText.length > 0) {
|
|
var status = JSON.parse(this.responseText);
|
|
// console.log(status)
|
|
document.getElementById("connectedlabel").innerHTML = "Connected: true";
|
|
document.getElementById("connectbutton").disabled = true;
|
|
}
|
|
} else {
|
|
console.log("error");
|
|
document.getElementById("connectedlabel").innerHTML = "Connected: false";
|
|
if (!received)
|
|
{
|
|
alert("Could not connect to API!");
|
|
received = true;
|
|
|
|
}
|
|
}
|
|
};
|
|
xhr.send();
|
|
}
|
|
// window onload function die elke seconde een request doet om te kijken of er al nieuwe foto is
|
|
// function die elke 100 ms een request doet om de status te updaten
|
|
// button callbacks
|
|
</script>
|
|
|
|
</html> |