add edit odo

This commit is contained in:
Bluedragon 2022-04-27 04:10:58 +07:00
parent 60acbe65d1
commit c769bd3184
3 changed files with 637 additions and 590 deletions

View File

@ -1,302 +1,349 @@
<!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">
<script type = "text/javascript">
var ping;
const ws = new WebSocket("ws://%serveripaddress%/ws");
ws.onopen = function() {
console.log("WebSocket Connected");
if(document.getElementById("mainTime").classList.contains("bg-danger")){
document.getElementById("mainTime").classList.remove("bg-danger")
}
ping = 1;
};
ws.onclose = function() {
// alert("WS Connection Closed");
console.log("WS Connection Closed");
<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">
<script type = "text/javascript">
var ping;
const ws = new WebSocket("ws://%serveripaddress%/ws");
ws.onopen = function() {
console.log("WebSocket Connected");
if(document.getElementById("mainTime").classList.contains("bg-danger")){
document.getElementById("mainTime").classList.remove("bg-danger")
}
ping = 1;
};
ws.onclose = function() {
// alert("WS Connection Closed");
console.log("WS Connection Closed");
if(!document.getElementById("mainTime").classList.contains("bg-danger")){
document.getElementById("mainTime").classList.add("bg-danger")
}
ping = -1;
};
ws.onmessage = function(event) {
// console.log(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;
// }
};
setInterval(checkPing, 1000); //heartbeat
function checkPing(){
// console.log("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")
}
ping = -1;
};
ws.onmessage = function(event) {
// console.log(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;
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;
// }
};
setInterval(checkPing, 1000); //heartbeat
function checkPing(){
// console.log("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")
}
}
}
</script>
</head><body>
<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>
<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-1">
<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>Speed: <span id="tripspeed">123.4</span>Km/h</h5></div>
<div class="col-2 mt-1 text-center"><h5>Time: <span id="triptime">123</span>Min</h5></div>
-->
<div class="col-3 mt-1 text-center"><h5>sTime: <span id="tripstime">12:34:50</span></h5></div>
<hr>
</div>
<!--//ODO1-->
<div class="row">
<div class="col-2"><h4>OD 1-></h4></div>
<div class="col-3 text-end"><h3><span id="odo1">123.4567</span> km</h3></div>
<div class="col-4"><h3><span id="dir1">DIRECT</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="resetodo1()" type="button" class="btn btn-primary btn-sm mb-2">Reset ODO1</button>
<button ondblclick="copytoodo2()" type="button" class="btn btn-primary btn-sm mb-2">&#8595 to ODO2</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-4 "><h3><span id="dir2">DIRECT</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="resetodo2()" type="button" class="btn btn-primary btn-sm mb-1">Reset ODO2</button>
<button ondblclick="copytoodo1()" type="button" class="btn btn-primary btn-sm mb-1 arrow-up down-arrow">&#8593 to ODO1</button></h5>
</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>
<button ondblclick="location.href='/menu';" class="btn btn-secondary fw-bold btn-sm mt-2 mb-2">Back to Menu</button>
</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">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<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 resetodo1(){
document.getElementById("btnyesreset").setAttribute( "onClick", "resetODO1()" );
document.getElementById("p1").innerHTML = "1";
elements = document.getElementsByClassName("odonum");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "1";
}
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 resetodo2(){
document.getElementById("btnyesreset").setAttribute( "onClick", "resetODO2()" );
document.getElementById("p1").innerHTML = "2";
elements = document.getElementsByClassName("odonum");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "2";
}
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 copytoodo2(){
document.getElementById("btnyesreset").setAttribute( "onClick", "copytoODO2()" );
document.getElementById("p1").innerHTML = "2";
elements = document.getElementsByClassName("odonum");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "2";
}
elements = document.getElementsByClassName("func");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "Copy ODO 1 to";
}
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
function copytoodo1(){
document.getElementById("btnyesreset").setAttribute( "onClick", "copytoODO1()" );
document.getElementById("p1").innerHTML = "1";
elements = document.getElementsByClassName("odonum");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "1";
}
elements = document.getElementsByClassName("func");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "Copy ODO 2 to";
}
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
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>
<script>
function resetODO1(){
ws.send('{"resetodo":1}');
console.log("resetodo->1");
</head><body>
<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>
<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-2"><h4>OD 1-></h4></div>
<div class="col-3 text-end"><h3><span id="odo1">123.4567</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="%dist%" 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("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;
}
function resetODO2(){
ws.send('{"resetodo":2}');
console.log("resetodo->2");
elements = document.getElementsByClassName("func");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "EDIT";
}
function copytoODO2(){
ws.send('{"copytoodo":2}');
console.log("copytoodo->2");
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
function editODO(odoNo){console.log(odoNo);}
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;
}
function copytoODO1(){
ws.send('{"copytoodo":1}');
console.log("copytoodo->1");
elements = document.getElementsByClassName("func");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "RESET";
}
function dirFW1(){
ws.send('{"dir1":0}');
console.log("dir1->0");
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
// function resetOdo2(){
// document.getElementById("editodo").hidden=true;
// document.getElementById("btnyesreset").setAttribute( "onClick", "resetODO2()" );
// document.getElementById("p1").innerHTML = "2";
// elements = document.getElementsByClassName("odonum");
// for (var i = 0; i < elements.length; i++) {
// elements[i].innerHTML = "2";
// }
// 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;
}
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);
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();
}
// function copyToOdo1(){
// document.getElementById("editodo").hidden=true;
// document.getElementById("btnyesreset").setAttribute( "onClick", "copytoODO1()" );
// document.getElementById("p1").innerHTML = "1";
// elements = document.getElementsByClassName("odonum");
// for (var i = 0; i < elements.length; i++) {
// elements[i].innerHTML = "1";
// }
// elements = document.getElementsByClassName("func");
// for (var i = 0; i < elements.length; i++) {
// elements[i].innerHTML = "Copy ODO 2 to";
// }
// var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
// myModal.show();
// }
</script>
</body></html>
<script>
function resetODO(odoNo){
ws.send('{"resetodo":'+odoNo+'}');
console.log("resetodo->"+odoNo);
}
function copytoODO(odoNo){
// ws.send('{"copytoodo":'+odoNo+'}');
console.log("copytoodo->"+odoNo);
}
// function resetODO1(){
// ws.send('{"resetodo":1}');
// console.log("resetodo->1");
// }
// function resetODO2(){
// ws.send('{"resetodo":2}');
// console.log("resetodo->2");
// }
// function copytoODO2(){
// ws.send('{"copytoodo":2}');
// console.log("copytoodo->2");
// }
// function copytoODO1(){
// ws.send('{"copytoodo":1}');
// console.log("copytoodo->1");
// }
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>

View File

@ -1,312 +1,310 @@
const char HTML_startrally1[] PROGMEM = R"rawliteral(
<!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">
<script type = "text/javascript">
var ping;
const ws = new WebSocket("ws://%serveripaddress%/ws");
ws.onopen = function() {
console.log("WebSocket Connected");
if(document.getElementById("mainTime").classList.contains("bg-danger")){
document.getElementById("mainTime").classList.remove("bg-danger")
}
ping = 1;
};
ws.onclose = function() {
// alert("WS Connection Closed");
console.log("WS Connection Closed");
<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">
<script type = "text/javascript">
var ping;
const ws = new WebSocket("ws://%serveripaddress%/ws");
ws.onopen = function() {
console.log("WebSocket Connected");
if(document.getElementById("mainTime").classList.contains("bg-danger")){
document.getElementById("mainTime").classList.remove("bg-danger")
}
ping = 1;
};
ws.onclose = function() {
// alert("WS Connection Closed");
console.log("WS Connection Closed");
if(!document.getElementById("mainTime").classList.contains("bg-danger")){
document.getElementById("mainTime").classList.add("bg-danger")
}
ping = -1;
};
ws.onmessage = function(event) {
console.log(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;
// }
};
setInterval(checkPing, 1000); //heartbeat
function checkPing(){
// console.log("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")
}
ping = -1;
};
ws.onmessage = function(event) {
// console.log(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;
// }
};
setInterval(checkPing, 1000); //heartbeat
function checkPing(){
// console.log("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")
}
}
}
</script>
</head><body>
<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>
<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-2"><h4>OD 1-></h4></div>
<div class="col-3 text-end"><h3><span id="odo1">123.4567</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="resetodo1()" type="button" class="btn btn-primary btn-sm mb-2">Reset ODO1</button>
<button ondblclick="copytoodo2()" type="button" class="btn btn-primary btn-sm mb-2">&#8595 to ODO2</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="resetodo2()" type="button" class="btn btn-primary btn-sm mb-1">Reset ODO2</button>
<button ondblclick="copytoodo1()" type="button" class="btn btn-primary btn-sm mb-1 arrow-up down-arrow">&#8593 to ODO1</button></h5>
</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">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<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 resetodo1(){
document.getElementById("btnyesreset").setAttribute( "onClick", "resetODO1()" );
document.getElementById("p1").innerHTML = "1";
elements = document.getElementsByClassName("odonum");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "1";
}
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 resetodo2(){
document.getElementById("btnyesreset").setAttribute( "onClick", "resetODO2()" );
document.getElementById("p1").innerHTML = "2";
elements = document.getElementsByClassName("odonum");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "2";
}
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 copytoodo2(){
document.getElementById("btnyesreset").setAttribute( "onClick", "copytoODO2()" );
document.getElementById("p1").innerHTML = "2";
elements = document.getElementsByClassName("odonum");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "2";
}
elements = document.getElementsByClassName("func");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "Copy ODO 1 to";
}
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
function copytoodo1(){
document.getElementById("btnyesreset").setAttribute( "onClick", "copytoODO1()" );
document.getElementById("p1").innerHTML = "1";
elements = document.getElementsByClassName("odonum");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "1";
}
elements = document.getElementsByClassName("func");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "Copy ODO 2 to";
}
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
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>
<script>
function resetODO1(){
ws.send('{"resetodo":1}');
console.log("resetodo->1");
</head><body>
<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>
<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-2"><h4>OD 1-></h4></div>
<div class="col-3 text-end"><h3><span id="odo1">123.4567</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="%dist%" 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("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;
}
function resetODO2(){
ws.send('{"resetodo":2}');
console.log("resetodo->2");
elements = document.getElementsByClassName("func");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "EDIT";
}
function copytoODO2(){
ws.send('{"copytoodo":2}');
console.log("copytoodo->2");
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
}
function editODO(odoNo){console.log(odoNo);}
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;
}
function copytoODO1(){
ws.send('{"copytoodo":1}');
console.log("copytoodo->1");
elements = document.getElementsByClassName("func");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "RESET";
}
function dirFW1(){
ws.send('{"dir1":0}');
console.log("dir1->0");
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;
}
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);
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>
</body></html>
<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>
)rawliteral";
//HTML_CALIBRATION

View File

@ -1385,7 +1385,7 @@ void redrawcalibrationMenu()
// }
}
// Declaration for calculationRally Variable
char gcur_speed_str[6];
char gcur_speed_str[7];
char gcur_distance1_str[7];
char gcur_distance2_str[7];
char gcur_time1_str[12];
@ -3832,7 +3832,7 @@ void loop() //loop from VSS RALLY V2
iscalculatingRally=true;
// redrawrallyMenu(); //Distance is edited?
// calculationRally();
Serial.println(millis()-testLoadTime);
// Serial.println(millis()-testLoadTime);
fillRallyLCDScreen();
iscalculatingRally=false;
}
@ -3913,7 +3913,8 @@ void loop() //loop from VSS RALLY V2
else if (VSSCountDiff <= 600) gVSSCountDiff='6';//lcd.print("6");
else if (VSSCountDiff <= 900) gVSSCountDiff='7';//lcd.print("7");
else if (VSSCountDiff <= 1200) gVSSCountDiff='8';//lcd.print("8");
else if (VSSCountDiff > 1200) gVSSCountDiff='9';//lcd.print("9");
else if (VSSCountDiff <= 1500) gVSSCountDiff='9';//lcd.print("9");
else if (VSSCountDiff > 1500) gVSSCountDiff='>';//lcd.print("9");
//lcd.print(VSSCountDiff);
//lcd.print(" ");
@ -3952,16 +3953,17 @@ void loop() //loop from VSS RALLY V2
prevCalculatingRallyMillis=now1;
}
if ((millis()-broadcastwebsocket) > 333 && !isloadingConst && globalClientRally) {
broadcastwebsocket = millis();
if ((millis()-broadcastwebsocket) > 330 && !isloadingConst && globalClientRally) {
broadcastwebsocket = micros();
iscalculatingRally=true;
// calculationRally();
Serial.print("calculationRallyTime=");Serial.println(millis()-broadcastwebsocket);
// calculationRally();
fillRallyJsonWithData();
// Serial.print("calculationRallyTime=");Serial.println(micros()-broadcastwebsocket);
iscalculatingRally=false;
// Serial.println(getRallyJson);
ws.textAll(getRallyJson);
Serial.print("calculationRallyToTTime=");Serial.println(millis()-broadcastwebsocket);
// Serial.print("calculationRallyToTTime=");Serial.println(micros()-broadcastwebsocket);
broadcastwebsocket = millis();
}
if ((millis()-broadcastwebsocketcalib) > 499 && !isloadingConst && globalClientCalib) {