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

move websockets to html

Browse Source
This commit is contained in:
Sem van der Hoeven
2023-05-31 20:30:24 +02:00
parent 2839e0cfcf
commit 209828d35a
2 changed files with 73 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
api/index.js
View File

@@ -88,7 +88,6 @@ var connect_to_api = function () {
} }
} catch (error) { } catch (error) {
console.log("could not parse as json, must be bytes"); console.log("could not parse as json, must be bytes");
logSizeInBytes("image", message.data);
} }
}); });

115
api/views/index.ejs
View File

@@ -29,10 +29,10 @@
<div id="controls"> <div id="controls">
<h2>Controls</h2> <h2>Controls</h2>
<div id="buttons"> <div id="buttons">
<button class="movebutton" id="button_turnleft" >Turn left</button> <button class="movebutton" id="button_turnleft">Turn left</button>
<button class="movebutton" id="button_turnright">Turn right</button> <button class="movebutton" id="button_turnright">Turn right</button>
<button class="movebutton" id="button_up" >Up</button> <button class="movebutton" id="button_up">Up</button>
<button class="movebutton" id="button_down" >Down</button> <button class="movebutton" id="button_down">Down</button>
<button class="movebutton" id="button_forward">Forward</button> <button class="movebutton" id="button_forward">Forward</button>
<button class="movebutton" id="button_backward">Backward</button> <button class="movebutton" id="button_backward">Backward</button>
<button class="movebutton" id="button_left">Left</button> <button class="movebutton" id="button_left">Left</button>
@@ -83,14 +83,14 @@
stop(); stop();
}); });
} }
document.getElementById("button_forward").addEventListener("mousedown", function () {forward();}); document.getElementById("button_forward").addEventListener("mousedown", function () { forward(); });
document.getElementById("button_backward").addEventListener("mousedown", function () {backward();}); document.getElementById("button_backward").addEventListener("mousedown", function () { backward(); });
document.getElementById("button_left").addEventListener("mousedown", function () {left();}); document.getElementById("button_left").addEventListener("mousedown", function () { left(); });
document.getElementById("button_right").addEventListener("mousedown", function () {right();}); document.getElementById("button_right").addEventListener("mousedown", function () { right(); });
document.getElementById("button_turnleft").addEventListener("mousedown", function () {turn_left();}); document.getElementById("button_turnleft").addEventListener("mousedown", function () { turn_left(); });
document.getElementById("button_turnright").addEventListener("mousedown", function () {turn_right();}); document.getElementById("button_turnright").addEventListener("mousedown", function () { turn_right(); });
document.getElementById("button_up").addEventListener("mousedown", function () {up();}); document.getElementById("button_up").addEventListener("mousedown", function () { up(); });
document.getElementById("button_down").addEventListener("mousedown", function () {down();}); document.getElementById("button_down").addEventListener("mousedown", function () { down(); });
} }
function update_status() { function update_status() {
@@ -114,8 +114,7 @@
xhr.send(); xhr.send();
} }
function send_move_request(data) function send_move_request(data) {
{
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open("POST", "/move", true); xhr.open("POST", "/move", true);
xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Content-Type", "application/json");
@@ -124,41 +123,41 @@
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({ "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({ "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({ "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({ "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({ "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({ "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({ "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({ "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({ "up_down": 0.0, "forward_backward": 0.0, "left_right": 0.0, "turn_left_right": 0.0 }));
} }
function estop() { function estop() {
@@ -184,30 +183,60 @@
} }
function connect() { function connect() {
var received = false;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/connect", true);
xhr.onreadystatechange = function () { console.log("Connecting to API");
if (this.status == 200) { var ws = new WebSocket("ws://10.100.0.40:9001/");
console.log(this.responseText);
if (this.responseText.length > 0) { ws.on("open", function open() {
var status = JSON.parse(this.responseText); console.log("connected with websockets to API!");
// console.log(status) });
document.getElementById("connectedlabel").innerHTML = "Connected: true";
document.getElementById("connectbutton").disabled = true; ws.on("message", function message(message) {
} try {
var msg = JSON.parse(message);
if (msg.type != "IMAGE") {
send_events_to_clients(msg);
} else { } else {
console.log("error"); console.log("got image");
document.getElementById("connectedlabel").innerHTML = "Connected: false"; }
if (!received) } catch (error) {
{ console.log("could not parse as json, must be bytes");
alert("Could not connect to API!");
received = true;
} }
} });
};
xhr.send(); ws.on("error", function error(err) {
console.log("there was an error");
console.error("error: " + err);
received_error = true;
});
// 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 // 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 // function die elke 100 ms een request doet om de status te updaten