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

change arm check

Browse Source
This commit is contained in:
Sem van der Hoeven
2023-06-14 09:45:21 +02:00
parent 6d74605582
commit cc14b4a3eb
4 changed files with 27 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
api/index.js
View File

@@ -1,120 +1,11 @@
var express = require("express");
var app = express();
const WebSocket = require("ws");
//# TODO SSE https://www.digitalocean.com/community/tutorials/nodejs-server-sent-events-build-realtime-app
var last_status = {};
var last_image;
var received_picture = false;
var received_error = false;
let sse_clients = [];
app.use(express.static("public"));
app.use(express.json());
var ws;
var api_connected = false;
function send_events_to_clients(data) {
// console.log("sending events to clients");
sse_clients.forEach((client) => {
client.response.write("event: message\n");
client.response.write("data:" + JSON.stringify(data) + "\n\n");
});
}
function handle_sse_client(request, response, next) {
console.log("handling sse client");
const headers = {
"Content-Type": "text/event-stream",
Connection: "keep-alive",
"Cache-Control": "no-cache",
};
response.writeHead(200, headers);
response.write(JSON.stringify("yeet") + "\n\n");
const clientID = Date.now();
const newClient = {
id: clientID,
response,
};
sse_clients.push(newClient);
request.on("close", () => {
console.log(`${clientID} Connection closed`);
sse_clients = sse_clients.filter((client) => client.id !== clientID);
});
}
var connect_to_api = function () {
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!");
api_connected = true;
});
ws.on("message", function message(message) {
try {
var msg = JSON.parse(message);
if (msg.type != "IMAGE") {
// console.log("got message");
send_events_to_clients(msg);
} else {
console.log("got image");
}
} 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);
received_error = true;
});
};
function send_image_data_to_clients(videoData) {
sse_clients.forEach((client) => {
// Set the SSE event name as 'message'
client.response.write("event: message\n");
// Convert the Buffer to a base64-encoded string
const base64Data = videoData.toString("base64");
// Set the SSE event data as the base64-encoded string
client.response.write(
"data: " + JSON.stringify({ image: base64Data }) + "\n\n"
);
});
}
// Define the endpoint to receive video data
app.post("/video", (req, res) => {
// console.log("got video endpoint")
let videoData = Buffer.from("");
req.on("data", (chunk) => {
// Accumulate the received video data
videoData = Buffer.concat([videoData, chunk]);
});
req.on("end", () => {
// Process the received video data
// console.log("Received video data:" + videoData.length);
send_image_data_to_clients(videoData);
// Send a response indicating successful receipt
res.sendStatus(200);
});
});
// set the view engine to ejs
app.set("view engine", "ejs");
@@ -127,65 +18,5 @@ app.get("/", function (req, res) {
app.get("/events", handle_sse_client);
app.get("/image", function (req, res) {
console.log("got picture request");
var request = JSON.stringify({
command: 5,
});
console.log("sending picture request");
ws.send(request);
res.status(200).send(last_image);
});
app.post("/move", function (req, res) {
console.log("got move request");
var request = JSON.stringify({
command: 3,
up_down: req.body.up_down,
left_right: req.body.left_right,
forward_backward: req.body.forward_backward,
yaw: req.body.turn_left_right,
});
ws.send(request);
});
app.post("/estop", function (req, res) {
console.log("got estop request");
var request = JSON.stringify({
command: 6,
});
ws.send(request);
});
app.post("/land", function (req, res) {
console.log("got land request");
var request = JSON.stringify({ command: 0 });
ws.send(request);
});
app.post("/arm_disarm", function (req, res) {
console.log("got arm/disarm request");
var request = JSON.stringify({ command: 1 });
ws.send(request);
});
app.get("/connect", function (req, res) {
console.log("got connect request");
connect_to_api();
setTimeout(function () {
if (api_connected) {
console.log("Connected to API");
res.status(200).json({ connected: true });
} else {
received_error = false;
res.status(400).json({ connected: false });
}
}, 1000);
});
app.get("/test", function (req, res) {
res.render("test");
});
app.listen(8080);
console.log("Server is listening on port 8080");

145
api/views/index.ejs
View File

@@ -13,7 +13,6 @@
<div>
<h1 class="header">5G Drone API</h1>
</div>
<!-- <div class="video"> -->
<div class="mainvideo">
<p id="cameraview">Camera view: Not connected</p>
<canvas id="result-video" style="border: 1px solid blue;" width="800" height="600"></canvas>
@@ -26,14 +25,6 @@
<button id="take_picture" onclick="take_picture()">Take picture</button>
<br>
<button id="arm_disarm" onclick="arm_disarm()">Arm/Disarm</button>
<!-- <br>
<label for="control_mode">Control mode:</label>
<br>
<select name="control_mode" id="control_mode">
<option value="attitude">Attitude</option>
<option value="velocity">Velocity</option>
<option value="position">Position</option>
</select> -->
</div>
</div>
<div id="controls">
@@ -72,14 +63,10 @@
alt="ericsson logo">
<img class="headerimg" src="https://hightechcampus.com/storage/1069/5ghub-logo.png" alt="5g hub logo">
</div>
<!-- </div> -->
</body>
<script>
var ws;
var api_timout;
var checked_for_connection = false;
var connected_to_api = false;
assign_button_callbacks();
openSocket = () => {
@@ -108,55 +95,6 @@
});
}
// Helper function to decode base64 image and set it as source of <img> element
function decodeBase64Image(base64Data, imgElement) {
const img = new Image();
img.onload = function () {
// Once the image has loaded, set it as the source of the <img> element
imgElement.src = this.src;
// console.log("set image data src")
};
// Set the base64-encoded image data as the source of the image
img.src = 'data:image/jpeg;base64,' + base64Data;
}
window.onload = function () {
const events = new EventSource("/events");
events.onopen = () => {
console.log("OPENED EVENT");
}
events.onmessage = (event) => {
console.log("MESSAGE RECEIVED")
try {
const data = JSON.parse(event.data);
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].toString().substring(0, 4) + " y: " + data.data.velocity[1].toString().substring(0, 4) + " z: " + data.data.velocity[2].toString().substring(0, 4);
document.getElementById("position").innerHTML = "Current position (m): x: " + data.data.position[0].toString().substring(0, 4) + " y: " + data.data.position[1].toString().substring(0, 4) + " z: " + data.data.position[2].toString().substring(0, 4);
document.getElementById("height").innerHTML = "Height (m): " + data.data.height;
} 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"));
}
} catch (error) {
console.error("Received an error")
console.error(error);
}
}
};
function assign_button_callbacks() {
var buttons = document.getElementsByClassName("movebutton");
for (var i = 0; i < buttons.length; i++) {
@@ -174,27 +112,6 @@
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) {
console.log("sending move request");
if (ws != null)
@@ -239,6 +156,7 @@
console.log("stop");
send_move_request(JSON.stringify({ "command": 3, "up_down": 0.0, "forward_backward": 0.0, "left_right": 0.0, "yaw": 0.0 }));
}
function land() {
console.log("land");
var request = JSON.stringify({ command: 0 });
@@ -269,46 +187,7 @@
ws.send(request);
}
function connect_to_video_stream() {
console.log("Connecting to websocket")
const video_holder = document.getElementById("result-video");
const socket = new WebSocket('ws://10.100.0.40:9002/');
socket.addEventListener('open', (event) => {
console.log('Connected to WebSocket server');
});
socket.addEventListener('message', (event) => {
// Assuming the received data is an ArrayBuffer or Uint8Array
const imageData = event.data;
// Convert the image data to a Blob
const blob = new Blob([imageData], { type: 'image/jpeg' });
// Generate a temporary URL for the Blob
const imageURL = URL.createObjectURL(blob);
// Set the src attribute of the <img> element
video_holder.src = imageURL;
});
// Connection closed
socket.addEventListener('close', (event) => {
console.log('Disconnected from WebSocket server');
});
// Error occurred
socket.addEventListener('error', (event) => {
console.error('WebSocket error:', event.error);
});
}
// var set_timout = false;
function handle_ws_message(data) {
// console.log("Handling message " + data);
// clearTimeout(api_timout);
set_timout = false;
if (data.type == "STATUS") {
document.getElementById("batterypercentage").innerHTML = "Battery percentage: " + data.data.battery_percentage.toString().substring(0, 4) + "%";
@@ -317,16 +196,6 @@
document.getElementById("control_mode").innerHTML = "Control mode: " + data.data.control_mode;
document.getElementById("speed").innerHTML = "Current speed (m/s): x: " + data.data.velocity[0].toString().substring(0,4) + " y: " + data.data.velocity[1].toString().substring(0,4) + " z: " + data.data.velocity[2].toString().substring(0,4);
document.getElementById("position").innerHTML = "Current position (m): x: " + data.data.position[0].toString().substring(0,4) + " y: " + data.data.position[1].toString().substring(0,4) + " z: " + data.data.position[2].toString().substring(0,4);
// TODO fix
// if (set_timout == false) {
// api_timeout = setTimeout(function () {
// set_timout = true;
// console.log("API timed out")
// alert("Connection to API timed out!");
// document.getElementById("connectedlabel").innerHTML = "Not connected to drone";
// document.getElementById("connectbutton").disabled = false;
// }, 5000);
// }
} else if (data.type == "FAILSAFE") {
document.getElementById("failsafe").innerHTML = "Failsafe: ACTIVATED";
document.getElementById("failsafe").style.backgroundColor = "red";
@@ -336,8 +205,6 @@
} else if (data.type == "API_HEARTBEAT") {
concole.log("Got heartbeat from API")
clearTimeout(api_timout);
} else {
// decodeBase64Image(data.image, document.getElementById("result-video"));
}
}
@@ -349,26 +216,22 @@
console.log("connected with websockets to API!");
document.getElementById("connectedlabel").innerHTML = "Connected to drone";
document.getElementById("connectbutton").disabled = true;
connected_to_api = true;
openSocket();
});
ws.addEventListener("message", function message(message) {
try {
// console.log(message.data)
var msg = JSON.parse(message.data);
handle_ws_message(msg);
} catch (error) {
console.log("could not parse as json");
console.error(error)
// send_image_data_to_clients(message);
}
});
ws.addEventListener("error", function error(err) {
console.log("there was an error! " + err);
// console.error("error: " + err);
console.log("Showing alert!");
alert("There was an error connecting to the API!");
document.getElementById("connectedlabel").innerHTML = "Not connected to drone";
@@ -392,11 +255,8 @@
console.log(this.responseText);
if (this.responseText.length > 0) {
var status = JSON.parse(this.responseText);
// console.log(status)
document.getElementById("connectedlabel").innerHTML = "Connected to drone";
document.getElementById("connectbutton").disabled = true;
// connect_to_video_stream();
}
} else {
console.log("error");
@@ -410,9 +270,6 @@
};
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>