supleed2/ELEC50003-P1-CW
1
0
Fork 0
mirror of https://github.com/supleed2/ELEC50003-P1-CW.git synced 2024-09-20 04:16:17 +00:00
Code Issues Packages Projects Releases Wiki Activity
ELEC50003-P1-CW/Control/data/index.html

310 lines
11 KiB
HTML
Raw Normal View History

Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Rover Control Panel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<style>
* {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: nowrap;
}
:is(h1, h2, h3, h4, h5, h6, label, strong, meter) {
font-family: Arial, Helvetica, sans-serif;
}
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
h2{
margin: 0px;
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
}
meter {
width: 100%;
height: 40px;
Changed layout fomatting to use tables instead of 'float' property. Removed com port field so it works in my environment.
2021-06-11 13:44:12 +00:00
transform: translateY(8px);
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
}
meter::after {
content: attr(value) attr(title);
top: -28px;
Changed layout fomatting to use tables instead of 'float' property. Removed com port field so it works in my environment.
2021-06-11 13:44:12 +00:00
left: 45%;
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
position: relative;
}
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
button {
width: 100%;
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
display: inline-block;
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
padding: 7px 7px;
font-size: 12px;
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: rgb(255, 255, 255);
background-color: #161616;
border: none;
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
border-radius: 5px;
box-shadow: 0 3px rgb(161, 161, 161);
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
}
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
button:hover {
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
background-color: #585858
}
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
button:active {
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
background-color: #107C10;
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
box-shadow: 0 3px rgb(161, 161, 161);
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
transform: translateY(4px);
}
.pressed {
background-color: #107C10;
box-shadow: 0 5px rgb(161, 161, 161);
transform: translateY(4px);
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
<script>
var connection = new WebSocket('ws://' + location.hostname + ':81/');
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
var command_id = 0;
var mode = 0;
var reqHeading = 0;
var reqSpeed = 0;
var reqCharge = 0;
var batteryVoltage = 0;
var totalTripDistance = 0;
var currentHeading = rdoc["cH"];
var current_pos = [,];
var current_x = 0;
var current_y = 0;
var signal_strength = 0;
var lastCompletedCommand_id = rdoc["LCCid"];
var ChargeStatus = 0;
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
connection.onmessage = function (event) {
var raw_data = event.data;
console.log(raw_data);
var data = JSON.parse(raw_data);
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
batteryVoltage = data.bV;
totalTripDistance = data.tD;
currentHeading = data.cH;
current_pos = data.pos;
current_x = current_pos[0];
current_y = current_pos[1];
signal_strength = data.rssi;
lastCompletedCommand_id = data.LCCid;
ChargeStatus = data.cS;
document.getElementById("SigStr").value = signal_strength;
document.getElementById("PosX").innerHTML = current_x;
document.getElementById("PosY").innerHTML = current_y;
document.getElementById("Hdg").innerHTML = currentHeading;
document.getElementById("TrpDist").innerHTML = totalTripDistance;
document.getElementById("btry_meter").value = batteryVoltage;
document.getElementById("ChgStat").innerHTML = (ChargeStatus ? "Charging" : "Discharging");
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
}
function send_data() {
var raw_data = '{"MVM_F":' + MVM_F_status + ',"MVM_L":' + MVM_L_status + ',"MVM_R":' + MVM_R_status + ',"MVM_B":' + MVM_B_status + '}';
connection.send(raw_data);
console.log(raw_data);
}
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
function cIdIncrement() {
command_id++;
}
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
function left_pressed() {
MVM_L_status = 1;
send_data();
}
function left_unpressed() {
MVM_L_status = 0;
send_data();
}
function up_pressed() {
MVM_F_status = 1;
send_data();
}
function up_unpressed() {
MVM_F_status = 0;
send_data();
}
function right_pressed() {
MVM_R_status = 1;
send_data();
}
function right_unpressed() {
MVM_R_status = 0;
send_data();
}
function down_pressed() {
MVM_B_status = 1;
send_data();
}
function down_unpressed() {
MVM_B_status = 0;
send_data();
}
var timer = null;
function up_mouseDown() {
timer = setInterval(up_pressed, 100);
}
function up_mouseUp() {
clearInterval(timer);
up_unpressed();
}
function down_mouseDown() {
timer = setInterval(down_pressed, 100);
}
function down_mouseUp() {
clearInterval(timer);
down_unpressed();
}
function right_mouseDown() {
timer = setInterval(right_pressed, 100);
}
function right_mouseUp() {
clearInterval(timer);
right_unpressed();
}
function left_mouseDown() {
timer = setInterval(left_pressed, 100);
}
function left_mouseUp() {
clearInterval(timer);
left_unpressed();
}
</script>
</head>
<body>
<h1 style="text-align:center;">ROVER COMMAND CENTER</h1>
<div class="clearfix">
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
<table style="width:1000px; border-spacing: 10px; margin-left: auto; margin-right: auto;">
Changed layout fomatting to use tables instead of 'float' property. Removed com port field so it works in my environment.
2021-06-11 13:44:12 +00:00
<tr>
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
<th style="width: 33%;"><h2>Control Panel</h2></th>
<th style="width: 33%;"><h2>Telemetry</h2></th>
<th style="width: 33%;"><h2>Command Buffer</h2></th>
Changed layout fomatting to use tables instead of 'float' property. Removed com port field so it works in my environment.
2021-06-11 13:44:12 +00:00
</tr>
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
<tr><hr></tr>
Changed layout fomatting to use tables instead of 'float' property. Removed com port field so it works in my environment.
2021-06-11 13:44:12 +00:00
<tr>
<td>
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
<table style="border-spacing: 5px;">
<tr><td colspan="6"><hr></td></tr>
<tr>
<td style="text-align: center;" colspan="6"><strong>Main</strong></td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><button>Emergency <br> Stop</button></td>
<td style="text-align: center;" colspan="2"><button>Telemetry Reset</button></td>
<td style="text-align: center;" colspan="2"><button>Stop and Charge</button></td>
</tr>
<tr><td colspan="6"><hr></td></tr>
<tr>
<td style="text-align: center;" colspan="6"><strong >Rotation</strong></td>
</tr>
<tr>
<td><button><i>-90&#176;</i></button></td>
<td><button><i>-45&#176;</i></button></td>
<td><button><i>-30&#176;</i></button></td>
<td><button><i>30&#176;</i></button></td>
<td><button><i>45&#176;</i></button></td>
<td><button><i>90&#176;</i></button></td>
</tr>
<tr><td colspan="6"><hr></td></tr>
<tr>
<td style="text-align: center;" colspan="6"><strong>Translation</strong></td>
</tr>
<tr>
<td><button><i>-10000 mm</i></button></td>
<td><button><i>-1000 mm</i></button></td>
<td><button><i>-100 mm</i></button></td>
<td><button><i>100 mm</i></button></td>
<td><button><i>1000 mm</i></button></td>
<td><button><i>10000 mm</i></button></td>
</tr>
<tr><td colspan="6"><hr></td></tr>
</table>
<!-- <div style="transform: translateY(0px); text-align:center;">
Changed layout fomatting to use tables instead of 'float' property. Removed com port field so it works in my environment.
2021-06-11 13:44:12 +00:00
<button id="up_arrow" onmousedown="up_mouseDown()" onmouseup="up_mouseUp()"
class="button"><span>&#8679;</span></button>
</div>
<div style="transform: translateY(13px); text-align:center;">
<button id="left_arrow" onmousedown="left_mouseDown()" onmouseup="left_mouseUp()"
class="button"><span>&#8678;</span></button>
<button id="down_arrow" onmousedown="down_mouseDown()" onmouseup="down_mouseUp()"
class="button"><span>&#8681;</span></button>
<button id="right_arrow" onmousedown="right_mouseDown()" onmouseup="right_mouseUp()"
class="button"><span>&#8680;</span></button>
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
</div> -->
Changed layout fomatting to use tables instead of 'float' property. Removed com port field so it works in my environment.
2021-06-11 13:44:12 +00:00
</td>
<td>
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
<table style="width:100%; border-spacing: 5px;">
<tr>
<td style="width:50%;"><label>Signal Strength</label></td>
<td style="width:50%;"><meter id="SigStr" min="-80" max="-30" low="-70" high="-50" optimum="-40" value="-XX"
title="dB"></meter></td>
</tr>
<tr>
<td style="width:50%;"><label>Position</label></td>
<td style="width:50%;"><strong id="PosX">X</strong><strong>,</strong><strong id="PosY">Y</strong></td>
</tr>
<tr>
<td style="width:50%;"><label>Heading</label></td>
<td style="width:50%;"><strong id="Hdg">H</strong><strong>&#176;</strong></td>
</tr>
<tr>
<td style="width:50%;"><label>Trip Distance</label></td>
<td style="width:50%;"><strong id="TrpDist">X</strong><strong> mm</strong></td>
</tr>
Changed layout fomatting to use tables instead of 'float' property. Removed com port field so it works in my environment.
2021-06-11 13:44:12 +00:00
<tr>
<td style="width:50%;"><label>Battery Voltage</label></td>
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
<td style="width:50%;"><meter id="btry_meter" min="4.0" max="6.0" low="4.5" high="4.8" optimum="5.0" value="X.X"
Changed layout fomatting to use tables instead of 'float' property. Removed com port field so it works in my environment.
2021-06-11 13:44:12 +00:00
title="V"></meter></td>
</tr>
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
Changed layout fomatting to use tables instead of 'float' property. Removed com port field so it works in my environment.
2021-06-11 13:44:12 +00:00
<tr>
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
<td style="width:50%;"><label>Charge Status</label></td>
<td style="width:50%;"><strong id="ChgStat">Disconnect</strong></td>
Changed layout fomatting to use tables instead of 'float' property. Removed com port field so it works in my environment.
2021-06-11 13:44:12 +00:00
</tr>
Added extra telemetry data parameters, and the corresponding javascript websocket back end. In short rover to client interface is done, needs to be tested. Also changed button interface to accomodate new 'command buffer' system. No real time control. Also made layout static so that button layout doesnt break when resizing window.
2021-06-11 18:45:00 +00:00
Changed layout fomatting to use tables instead of 'float' property. Removed com port field so it works in my environment.
2021-06-11 13:44:12 +00:00
</table>
</td>
</tr>
</table>
Migrate to SPIFFS, untested
2021-06-04 00:02:32 +00:00
</div>
</body>
</html>
Reference in a new issue Copy permalink