ELEC50003-P1-CW/Control/data/index.html
jc4419 44f9d8ce7b Removed redundant leftover code from previous versions. Tweaked some coloring and formatting(again).
Added the 'Command Buffer' section.
Added the JSON format for sending data, yet to be implemented.
2021-06-12 04:18:04 +04:00

268 lines
10 KiB
HTML

<!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;
}
h2{
margin: 0px;
}
#command_space {
width:100%;
height: 200px;
line-height: normal;
overflow: auto;
background-color: rgb(248, 248, 248);
color: black;
border: 1px solid black;
}
meter {
width: 100%;
height: 40px;
transform: translateY(8px);
}
meter::after {
content: attr(value) attr(title);
top: -28px;
left: 45%;
position: relative;
}
button {
width: 100%;
display: inline-block;
padding: 7px 7px;
font-size: 12px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: rgb(255, 255, 255);
background-color: #222222;
border: none;
border-radius: 5px;
box-shadow: 0 3px rgb(161, 161, 161);
}
button:hover {
background-color: #585858
}
button:active {
background-color: #349134;
box-shadow: 0 3px rgb(161, 161, 161);
transform: translateY(1px);
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
<script>
var connection = new WebSocket('ws://' + location.hostname + ':81/');
var command_id = 0;
var mode = 0;
var reqHeading = 0;
var reqDistance = 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;
connection.onmessage = function (event) {
var raw_data = event.data;
console.log(raw_data);
var data = JSON.parse(raw_data);
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");
}
function send_data() {
var raw_data = '{"Cid":' + command_id + ',"mode":' + mode + ',"rH":' + reqHeading + ',"rD":' + reqDistance + ',"rS":' + reqSpeed + ',"rC":' + reqCharge + '}';
connection.send(raw_data);
console.log(raw_data);
}
function echoCommandbuf() {
document.getElementById("command_buffer").innerHTML += '[' + command_id + '] ' + document.getElementById("commandInput").value + "<br>";
cIdIncrement();
document.getElementById("commandInput").value = "";
console.log('test');
}
function cIdIncrement() {
command_id++;
}
</script>
</head>
<body>
<h1 style="text-align:center;">ROVER COMMAND CENTER</h1>
<div class="clearfix">
<table style="width:1000px; border-spacing: 10px; margin-left: auto; margin-right: auto;">
<tr>
<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>
</tr>
<tr><hr></tr>
<!-- Control Panel Section -->
<tr>
<td style="vertical-align: top;">
<table style="width:100%; 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 style="color: red;">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>Full <br> 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>
</td>
<!-- Telemetry Section -->
<td style="vertical-align: top;">
<table style="width:100%; border-spacing: 5px; ">
<tr><td colspan="6"><hr></td></tr>
<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>
<tr>
<td style="width:50%;"><label>Battery Voltage</label></td>
<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"
title="V"></meter></td>
</tr>
<tr>
<td style="width:50%;"><label>Charge Status</label></td>
<td style="width:50%;"><strong id="ChgStat">Disconnect</strong></td>
</tr>
</table>
</td>
<!-- Command Buffer Section -->
<td style="vertical-align: top;">
<table style="width:100%; border-spacing: 5px; ">
<tr><td><hr></td></tr>
<tr><td colspan="2"><div id="command_space"><p id="command_buffer" style="padding-left: 5px; font-size: 14px; font-family: 'Courier New', Courier, monospace;"></p></div></td></tr>
<tr>
<td><input type="text" placeholder="Type a command or 'help'." id="commandInput" value="" onkeyup="if(event.keyCode == 13){document.getElementById('commandEnter').click();}" style="width: 100%; font-size: 14px; font-family: 'Courier New', Courier, monospace;"></td>
<td style="width: 7%; "><button onclick="echoCommandbuf()" id="commandEnter" style="height: 20px; width: 20px; padding: 3px 2px;">&crarr;</button></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>