sem/5g_drone_ROS2
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

ADD LOCAL CONNECT

Browse Source
This commit is contained in:
Sem van der Hoeven
2023-06-07 10:52:35 +02:00
parent 1c855540ef
commit 258e5cf289
1 changed files with 101 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
api/views/index.ejs
View File

@@ -13,12 +13,12 @@
<h1 class="header">5G Drone API</h1> <h1 class="header">5G Drone API</h1>
<!-- <div class="video"> --> <!-- <div class="video"> -->
<div class="mainvideo"> <div class="mainvideo">
<p id="cameraview">Camera view:</p> <p id="cameraview">Camera view: Not connected</p>
<canvas id="result-video" style="border: 1px solid blue;" width="800" height="600"></canvas> <canvas id="result-video" style="border: 1px solid blue;" width="800" height="600"></canvas>
<div id="connectedbuttons"> <div id="connectedbuttons">
<div id="connectedstatus"> <div id="connectedstatus">
<h2 id="connectedlabel">Not connected to drone</h2> <h2 id="connectedlabel">Not connected to drone</h2>
<button id="connectbutton" onclick="connect()">Connect</button> <button id="connectbutton" onclick="local_connect()">Connect</button>
</div> </div>
<div id="buttons"> <div id="buttons">
<button id="take_picture" onclick="take_picture()">Take picture</button> <button id="take_picture" onclick="take_picture()">Take picture</button>
@@ -61,6 +61,7 @@
</body> </body>
<script> <script>
var ws;
assign_button_callbacks(); assign_button_callbacks();
openSocket = () => { openSocket = () => {
@@ -131,8 +132,6 @@
console.error(error); console.error(error);
} }
} }
openSocket();
}; };
function assign_button_callbacks() { function assign_button_callbacks() {
@@ -174,64 +173,62 @@
} }
function send_move_request(data) { function send_move_request(data) {
// console.log("sending move request " + data); console.log("sending move request");
var xhr = new XMLHttpRequest(); if (ws != null)
xhr.open("POST", "/move", true); ws.send(data);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(data);
} }
function turn_left() { function turn_left() {
console.log("turnleft"); 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 })); send_move_request(JSON.stringify({ "command": 3, "up_down": 0.0, "forward_backward": 0.0, "left_right": 0.0, "turn_left_right": -10.0 }));
} }
function turn_right() { function turn_right() {
console.log("turnright"); 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 })); send_move_request(JSON.stringify({ "command": 3, "up_down": 0.0, "forward_backward": 0.0, "left_right": 0.0, "turn_left_right": 10.0 }));
} }
function up() { function up() {
console.log("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 })); send_move_request(JSON.stringify({ "command": 3, "up_down": 1.0, "forward_backward": 0.0, "left_right": 0.0, "turn_left_right": 0.0 }));
} }
function down() { function down() {
console.log("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 })); send_move_request(JSON.stringify({ "command": 3, "up_down": -1.0, "forward_backward": 0.0, "left_right": 0.0, "turn_left_right": 0.0 }));
} }
function forward() { 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 })); console.log("forward"); send_move_request(JSON.stringify({ "command": 3, "up_down": 0.0, "forward_backward": 1.0, "left_right": 0.0, "turn_left_right": 0.0 }));
} }
function backward() { function backward() {
console.log("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 })); send_move_request(JSON.stringify({ "command": 3, "up_down": 0.0, "forward_backward": -1.0, "left_right": 0.0, "turn_left_right": 0.0 }));
} }
function left() { function left() {
console.log("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 })); send_move_request(JSON.stringify({ "command": 3, "up_down": 0.0, "forward_backward": 0.0, "left_right": -1.0, "turn_left_right": 0.0 }));
} }
function right() { function right() {
console.log("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 })); send_move_request(JSON.stringify({ "command": 3, "up_down": 0.0, "forward_backward": 0.0, "left_right": 1.0, "turn_left_right": 0.0 }));
} }
function stop() { function stop() {
console.log("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 })); send_move_request(JSON.stringify({ "command": 3, "up_down": 0.0, "forward_backward": 0.0, "left_right": 0.0, "turn_left_right": 0.0 }));
} }
function land_takeoff() { function land() {
console.log("land"); console.log("land");
var xhr = new XMLHttpRequest(); var request = JSON.stringify({ command: 0 });
xhr.open("POST", "/land", true); ws.send(request);
xhr.send();
} }
function estop() { function estop() {
console.log("estop"); console.log("estop");
var xhr = new XMLHttpRequest(); var request = JSON.stringify({
xhr.open("POST", "/estop", true); command: 6,
xhr.send(); });
ws.send(request);
} }
function take_picture() { function take_picture() {
@@ -245,9 +242,8 @@
function arm_disarm() { function arm_disarm() {
console.log("arm/disarm"); console.log("arm/disarm");
var xhr = new XMLHttpRequest(); var request = JSON.stringify({ command: 1 });
xhr.open("POST", "/arm_disarm", true); ws.send(request);
xhr.send();
} }
function connect_to_video_stream() { function connect_to_video_stream() {
@@ -285,6 +281,58 @@
} }
function handle_ws_message(message) {
console.log("Handling message " + message);
var data = JSON.parse(message);
if (data.type == "STATUS") {
document.getElementById("batterypercentage").innerHTML = "Battery percentage: " + data.data.battery_percentage.toString().substring(0, 4) + "%";
document.getElementById("cpuload").innerHTML = "CPU load: " + data.data.cpu_usage.toString().substring(0, 6).substring(2, 4) + "%";
document.getElementById("armed").innerHTML = "Armed: " + data.data.armed;
document.getElementById("control_mode").innerHTML = "Control mode: " + data.data.control_mode;
document.getElementById("speed").innerHTML = "Current speed (m/s): x: " + data.data.velocity[0] + " y: " + data.data.velocity[1] + " z: " + data.data.velocity[2];
document.getElementById("position").innerHTML = "Current position (m): x: " + data.data.position[0] + " y: " + data.data.position[1] + " z: " + data.data.position[2];
} else if (data.type == "FAILSAFE") {
document.getElementById("failsafe").innerHTML = "Failsafe: ACTIVATED";
document.getElementById("failsafe").style.backgroundColor = "red";
document.getElementById("failsafe").style.color = "white";
document.getElementById("failsafe").style.textDecoration = "bold";
alert("Failsafe enabled! Drone is landing. The failsafe message is:\n" + data.message);
} else {
// decodeBase64Image(data.image, document.getElementById("result-video"));
}
}
function local_connect() {
console.log("Connecting to API");
ws = new WebSocket("ws://10.100.0.40:9001/");
ws.on("open", function open() {
console.log("connected with websockets to API!");
document.getElementById("connectedlabel").innerHTML = "Connected to drone";
document.getElementById("connectbutton").disabled = true;
openSocket();
});
ws.on("message", function message(message) {
try {
var msg = JSON.parse(message);
handle_ws_message(msg);
} catch (error) {
console.log("could not parse as json");
// send_image_data_to_clients(message);
}
});
ws.on("error", function error(err) {
console.log("there was an error");
console.error("error: " + err);
alert("There was an error connecting to the API!");
document.getElementById("connectedlabel").innerHTML = "Not connected to drone";
document.getElementById("connectbutton").disabled = false;
});
}
function connect() { function connect() {
var received = false; var received = false;
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();