bluedragon/VSS_Rally_V3
1
0
Fork 0
mirror of https://github.com/bcomsugi/VSS_Rally_V3.git synced 2026-01-09 09:52:38 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity
master
VSS_Rally_V3/data/startrally.html
Bluedragon 8bc6fed494 bug fix
2022-05-12 21:24:28 +07:00

371 lines
16 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE HTML><html><head>
<title>Rally TerraTrip v1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<!--
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-->
<link href="bootstrap.css" rel="stylesheet">
<script type = "text/javascript">
var ping;
var ws;
var wsInterval;
window.onerror = function (message, file, line, col, error) {
const date = new Date();
console.log(date.toLocaleTimeString()+";Onerror->Error occurred: " + error.message);
return false;
};
function checkWS(){
const date = new Date();
console.log(date.toLocaleTimeString()+";checkWS")
if (!ws || ws.readyState === 3 ) loaded();
}
function wsStartTimer(){
const date = new Date();
console.log(date.toLocaleTimeString()+";startwsStartTimer")
wsInterval = setInterval(checkWS(), 1000);
}
function wsStopTimer(){
const date = new Date();
console.log(date.toLocaleTimeString()+";clearWSInterval")
if (wsInterval) clearInterval(wsInterval);
console.log(wsInterval);
}
function loaded(){
ws = new WebSocket("ws://%serveripaddress%/ws");
const date = new Date();
console.log(date.toLocaleTimeString()+";new ws");
// const ws = new WebSocket("ws://%serveripaddress%/ws");
ws.onopen = function() {
const date = new Date();
console.log(date.toLocaleTimeString()+";WebSocket Connected");
wsStopTimer();
if(document.getElementById("mainTime").classList.contains("bg-danger")){
document.getElementById("mainTime").classList.remove("bg-danger")
}
ping = 1;
};
ws.onclose = function() {
// alert("WS Connection Closed");
const date = new Date();
console.log(date.toLocaleTimeString()+";WS Connection Closed");
if(!document.getElementById("mainTime").classList.contains("bg-danger")){
document.getElementById("mainTime").classList.add("bg-danger")
}
ping = -1;
wsStartTimer();
};
ws.onerror = function(err) {
const date = new Date();
console.error(date.toLocaleTimeString()+';Socket encountered error: ', err.message, 'Closing socket');
ws.close();
};
ws.onmessage = function(event) {
// console.log(event.data);
if(event.data && IsJsonString(event.data)){
let data = JSON.parse(event.data);
// if (data.hasOwnProperty("ping")) {
// console.log("with ping key");
// ping++;
// } else{
let curTrack=document.getElementById("currenttrack").innerHTML;
let tripSpeed=document.getElementById("tripspeed").innerHTML;
let tripDist=document.getElementById("tripdist").innerHTML;
let tripTime=document.getElementById("triptime").innerHTML;
let tripsTime=document.getElementById("tripstime").innerHTML;
if(curTrack==data.Trip){
if(tripSpeed!=data.TSpeed || tripDist != data.TDist || tripTime!=data.TTime ||tripsTime!=data.TsTime){
console.log("Refresh Trip "+data.Trip);
changeTrip(data.Trip);
}
}
ping++;
document.getElementById("counter").innerHTML = data.counter+";"+data.counter2;
document.getElementById("currenttime").innerHTML = data.Time;
document.getElementById("currenttrack").innerHTML = data.Trip;
document.getElementById("tripspeed").innerHTML = data.TSpeed;
document.getElementById("tripdist").innerHTML = data.TDist;
document.getElementById("triptime").innerHTML = data.TTime;
document.getElementById("tripstime").innerHTML = data.TsTime;
document.getElementById("currentspeed").innerHTML = data.curSpeed;
document.getElementById("dir1").innerHTML = data.dir1;
document.getElementById("dir2").innerHTML = data.dir2;
document.getElementById("odo1").innerHTML = data.curDist1;
document.getElementById("odo2").innerHTML = data.curDist2;
document.getElementById("time1").innerHTML = data.time1;
document.getElementById("time2").innerHTML = data.time2;
document.getElementById("tdiff1").innerHTML = data.TDiff;
document.getElementById("tdiff2").innerHTML = data.TDiff;
// }
} else console.log(event.data);
};
}
function IsJsonString(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
}
const checkhealt = setInterval(checkPing, 1000); //heartbeat
function checkPing(){
// const date = new Date();
// console.log(date.toLocaleTimeString()+";ping="+ping);
ping--;
if (ping>=0){
ping=0;
} else if (ping<=-20){
ping = -19;
} else if (ping<-3){ // 3secs ping timeout
if(!document.getElementById("mainTime").classList.contains("bg-danger")){
document.getElementById("mainTime").classList.add("bg-danger")
}
}
}
function onlyNumberKey(evt,e) {
// Only ASCII character in that range allowed
var ASCIICode = (evt.which) ? evt.which : evt.keyCode
if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57) && ASCIICode !=46)
return false;
return true;
}
</script>
</head><body onload="loaded();">
<!--
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-->
<script src="bootstrap.bundle.min.js"></script>
<div class=" bg-success text-white">
<div class="row">
<div class="col-2 mt-1"><h6><span id="counter">12345</span></h6></div>
<div id="mainTime" class="col mt-1 bg-danger"><h2 class="text-center">Time: <span id="currenttime">00:00:00</span></h2></div>
<div class="col-3 mt-1 text-end"><h2><span id="currentspeed">123.4</span>Km/h</h2></div>
<div class="col-2"><button ondblclick="location.href='/menu';" class="btn btn-secondary fw-bold btn-sm mt-2 mb-2">To Menu</button></div>
</div>
<div class="row">
<div class="col-2">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
TRIP <span id="currenttrack">A</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" onclick="changeTrip('A');">TRIP A</a></li>
<li><a class="dropdown-item" onclick="changeTrip('B');">TRIP B</a></li>
<li><a class="dropdown-item" onclick="changeTrip('C');">TRIP C</a></li>
<li><a class="dropdown-item" onclick="changeTrip('D');">TRIP D</a></li>
<li><a class="dropdown-item" onclick="changeTrip('E');">TRIP E</a></li>
<li><a class="dropdown-item" onclick="changeTrip('F');">TRIP F</a></li>
<li><a class="dropdown-item" onclick="changeTrip('G');">TRIP G</a></li>
<li><a class="dropdown-item" onclick="changeTrip('H');">TRIP H</a></li>
<li><a class="dropdown-item" onclick="changeTrip('I');">TRIP I</a></li>
<li><a class="dropdown-item" onclick="changeTrip('J');">TRIP J</a></li>
<li><a class="dropdown-item" onclick="changeTrip('K');">TRIP K</a></li>
<li><a class="dropdown-item" onclick="changeTrip('L');">TRIP L</a></li>
<li><a class="dropdown-item" onclick="changeTrip('M');">TRIP M</a></li>
<li><a class="dropdown-item" onclick="changeTrip('N');">TRIP N</a></li>
<li><a class="dropdown-item" onclick="changeTrip('O');">TRIP O</a></li>
<li><a class="dropdown-item" onclick="changeTrip('P');">TRIP P</a></li>
</ul>
</div>
</div>
<div class="col mt-1 text-center"><h5>S: <span id="tripdist">123.45</span>Km | V: <span id="tripspeed">123.4</span>Km/h | T: <span id="triptime">123</span>Min</h5></div>
<!--
<div class="col-3 mt-1 text-center"><h5>S: <span id="tripdist">123.45</span>Km</h5></div>
<div class="col-2 mt-1 text-center"><h5>V: <span id="tripspeed">123.4</span>Km/h</h5></div>
<div class="col-2 mt-1 text-center"><h5>T: <span id="triptime">123</span>Min</h5></div>
-->
<div class="col-3 mt-1 text-center"><h5>ST: <span id="tripstime">12:34:50</span></h5></div>
<hr>
</div>
<!--//ODO1-->
<div class="row">
<div class="col-5 "><h3>OD 1>> <span id="odo1">123.456</span> Km</h3></div>
<div class="col-3"><h3><span id="dir1">DIRECT</span></h3></div>
<div class="col-1"><h3><span id="tdiff1">TDiff</span>:</h3></div>
<div class="col-3 text-end"><h3><span id="time1">00:00:00</span></h3></div>
</div>
<div class="row">
<div class="col-5"><h4>
<button ondblclick="resetOdo(1)" type="button" class="btn btn-primary btn-sm mb-2">Reset ODO1</button>
<button ondblclick="copyToOdo(2,1)" type="button" class="btn btn-primary btn-sm mb-2">&#8595 to ODO2</button>
<button ondblclick="editOdo(1)" type="button" class="btn btn-primary btn-sm mb-2">Edit</button></h4>
</div>
<div class="col-4"><h4>
<button ondblclick="dirFW1()" type="button" class="btn btn-primary btn-sm mb-2">FW</button>
<button ondblclick="dirStop1()" type="button" class="btn btn-primary btn-sm mb-2">STOP</button>
<button ondblclick="dirBack1()" type="button" class="btn btn-primary btn-sm mb-2">BACK</button></h4>
</div>
<div class="col"><h4>
<div class="d-grid gap-0 d-md-flex justify-content-md-end">
<button onclick="toggleTime1()" class="btn btn-primary btn-sm me-md-4" type="button">Toggle</button>
</div></h4>
</div>
</div>
<!--
<hr>
-->
<!--//ODO2-->
<div class="row">
<div class="col-5 "><h3>OD 2>> <span id="odo2">123.456</span> Km</h3></div>
<div class="col-3 "><h3><span id="dir2">DIRECT</span></h3></div>
<div class="col-1"><h3><span id="tdiff2">TDiff</span>:</h3></div>
<div class="col-3 text-end"><h3><span id="time2">00:00:00</span></h3></div>
</div>
<div class="row">
<div class="col-5"><h5>
<button ondblclick="resetOdo(2)" type="button" class="btn btn-primary btn-sm mb-1">Reset ODO2</button>
<button ondblclick="copyToOdo(1,2)" type="button" class="btn btn-primary btn-sm mb-1 arrow-up down-arrow">&#8593 to ODO1</button>
<button ondblclick="editOdo(2)" type="button" class="btn btn-primary btn-sm mb-2">Edit</button></h4>
</div>
<div class="col-4"><h5>
<button ondblclick="dirFW2()" class="btn btn-primary btn-sm mb-1" type="button">FW</button>
<button ondblclick="dirStop2()" class="btn btn-primary btn-sm mb-1" type="button">STOP</button>
<button ondblclick="dirBack2()" class="btn btn-primary btn-sm mb-1" type="button">BACK</button></h5>
</div>
<div class="col"><h2>
<div class="d-grid gap-0 d-md-flex justify-content-md-end">
<button onclick="toggleTime2()" class="btn btn-primary btn-sm me-md-4" type="button">Toggle</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" id="editodo">
<h5 class="modal-title" id="exampleModalLabel">Edit Odo:</h5>
<input type="number" step="any" maxlength="6" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
id="inputeditodo" name="%dist%" class="form-control dist" onkeypress="return onlyNumberKey(event,this)">
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you Sure <span class="func">Reset</span> ODO <span id="p1" class="odonum">1</span> ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button id="btnyesreset" type="button" data-bs-dismiss="modal" class="btn btn-primary">Yes, <span class="func">Reset</span> ODO <span class="odonum"></span></button>
</div>
</div>
</div>
</div>
<script>
function editOdo(odoNo){
document.getElementById("editodo").hidden=false;
document.getElementById("inputeditodo").value="";
document.getElementById("btnyesreset").setAttribute("onClick", "editODO("+odoNo+")");
document.getElementById("p1").innerHTML = "1";
elements = document.getElementsByClassName("odonum");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = odoNo;
}
elements = document.getElementsByClassName("func");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "EDIT";
}
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
function editODO(odoNo){
console.log(odoNo);
console.log(document.getElementById("inputeditodo").value);
var newOdo = document.getElementById("inputeditodo").value;
ws.send('{"editodo'+odoNo+'":'+newOdo+'}');
console.log('{"editodo'+odoNo+'":'+newOdo+'}');
}
function resetOdo(odoNo){
document.getElementById("editodo").hidden=true;
document.getElementById("btnyesreset").setAttribute( "onClick", "resetODO("+odoNo+")" );
document.getElementById("p1").innerHTML = "1";
elements = document.getElementsByClassName("odonum");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = odoNo;
}
elements = document.getElementsByClassName("func");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "RESET";
}
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
function copyToOdo(odoNo,fromOdo){
document.getElementById("editodo").hidden=true;
document.getElementById("btnyesreset").setAttribute( "onClick", "copytoODO("+odoNo+")" );
document.getElementById("p1").innerHTML = "2";
elements = document.getElementsByClassName("odonum");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = odoNo;
}
elements = document.getElementsByClassName("func");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "Copy ODO "+fromOdo+" to";
}
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
</script>
<script>
function resetODO(odoNo){
ws.send('{"resetodo":'+odoNo+'}');
console.log("resetodo->"+odoNo);
}
function copytoODO(odoNo){
ws.send('{"copytoodo":'+odoNo+'}');
console.log("copytoodo->"+odoNo);
}
function dirFW1(){
ws.send('{"dir1":0}');
console.log("dir1->0");
}
function dirStop1(){
ws.send('{"dir1":1}');
console.log("dir1->1");
}
function dirBack1(){
ws.send('{"dir1":2}');
console.log("dir1->2");
}
function dirFW2(){
ws.send('{"dir2":0}');
console.log("dir2->0");
}
function dirStop2(){
ws.send('{"dir2":1}');
console.log("dir2->1");
}
function dirBack2(){
ws.send('{"dir2":2}');
console.log("dir2->2");
}
function toggleTime1(){
ws.send('{"toggle":1}');
console.log("toggle->1");
}
function toggleTime2(){
ws.send('{"toggle":2}');
console.log("toggle->2");
}
function changeTrip(cTrip){
// alert("Change to TRIP "+cTrip);
ws.send('{"ctotrip":"'+cTrip+'"}');
console.log("ctotrip->"+cTrip);
}
</script>
</body></html>
Reference in New Issue View Git Blame Copy Permalink