mirror of
https://github.com/bcomsugi/VSS_Rally_V3.git
synced 2026-01-09 09:52:38 +07:00
413 lines
16 KiB
C
413 lines
16 KiB
C
const char MAIN_page[] PROGMEM = R"=====(
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<style>
|
|
.card{
|
|
max-width: 400px;
|
|
min-height: 250px;
|
|
background: #02b875;
|
|
padding: 30px;
|
|
box-sizing: border-box;
|
|
color: #FFF;
|
|
margin:20px;
|
|
box-shadow: 0px 2px 18px -4px rgba(0,0,0,0.75);
|
|
}
|
|
</style>
|
|
<body>
|
|
|
|
<div class="card">
|
|
<h4>The ESP32 Update web page without refresh</h4><br>
|
|
<h1>Sensor Value:<span id="ADCValue">0</span></h1><br>
|
|
<h1>Sensor 2 Value:<span id="ADCValue2">0</span></h1><br>
|
|
<h1>Sensor 3 Value:<span id="ADCValue3">0</span></h1><br>
|
|
<h1>Time: <span id="time">0</span></h1><br>
|
|
<br><a href="https://circuits4you.com">Circuits4you.com</a>
|
|
</div>
|
|
<script>
|
|
|
|
setInterval(function() {
|
|
// Call a function repetatively with 2 Second interval
|
|
getData();
|
|
}, 333); //2000mSeconds update rate
|
|
|
|
function getData() {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
var data = JSON.parse(this.responseText);
|
|
document.getElementById("ADCValue").innerHTML =
|
|
data.pin36;
|
|
document.getElementById("ADCValue2").innerHTML =
|
|
data.pin39;
|
|
document.getElementById("ADCValue3").innerHTML =
|
|
data.pin5;
|
|
document.getElementById("time").innerHTML =
|
|
data.time;
|
|
//this.responseText;
|
|
}
|
|
};
|
|
xhttp.open("GET", "readADC", true);
|
|
xhttp.send();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
)=====";
|
|
|
|
|
|
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">
|
|
const ws = new WebSocket("ws://%serveripaddress%/ws");
|
|
ws.onopen = function() {console.log("WebSocket Connected");};
|
|
ws.onclose = function() {alert("WS Connection Closed");};
|
|
ws.onmessage = function(event) {
|
|
console.log(event.data);
|
|
var data = JSON.parse(event.data);
|
|
document.getElementById("currenttime").innerHTML = data.curTime;
|
|
document.getElementById("currenttrack").innerHTML = data.curTrip;
|
|
document.getElementById("counter").innerHTML = data.counter;
|
|
document.getElementById("tripspeed").innerHTML = data.curTripSpeed;
|
|
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;
|
|
};
|
|
</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-1 mt-1"><h6><span id="counter">12345</span></h6></div>
|
|
|
|
<div class="col-3 mt-1 text-end"><h2>TRIP <span id="currenttrack">A</span> (<span id="tripspeed">123.4</span>Km/h)</h2></div>
|
|
<div class="col mt-1"><h2 class="text-center">Time: <span id="currenttime">00:00:00</span></h2></div>
|
|
<div class="col-2 mt-1 text-end"><h2><span id="currentspeed">123.4</span>Km/h</h2></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">↓ 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">↑ 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>
|
|
setInterval(function() {
|
|
// Call a function repetatively with 2 Second interval
|
|
getData();
|
|
}, 10000); //2000mSeconds update rate
|
|
</script>
|
|
<script>
|
|
function getData() {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
console.log(this.responseText);
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
var data = JSON.parse(this.responseText);
|
|
document.getElementById("currenttime").innerHTML = data.curtime;
|
|
document.getElementById("currenttrack").innerHTML = data.curtrack;
|
|
document.getElementById("counter").innerHTML = data.counter;
|
|
document.getElementById("speed").innerHTML = data.speed;
|
|
document.getElementById("dir1").innerHTML = data.dir1;
|
|
document.getElementById("dir2").innerHTML = data.dir2;
|
|
document.getElementById("odo1").innerHTML = data.odo1;
|
|
document.getElementById("odo2").innerHTML = data.odo2;
|
|
document.getElementById("time1").innerHTML = data.time1;
|
|
document.getElementById("time2").innerHTML = data.time2;
|
|
|
|
//this.responseText;
|
|
}
|
|
};
|
|
xhttp.open("GET", "readADC", true);
|
|
xhttp.send();
|
|
}
|
|
</script>
|
|
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
getData();
|
|
});
|
|
</script>
|
|
-->
|
|
<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();
|
|
}
|
|
</script>
|
|
<script>
|
|
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");
|
|
}
|
|
</script>
|
|
</body></html>
|
|
)rawliteral";
|
|
|
|
//HTML_CALIBRATION
|
|
|
|
|
|
|
|
const char HTML_CALIBRATION[] PROGMEM = R"rawliteral(
|
|
<!DOCTYPE HTML><html><head>
|
|
<title>Rally TerraTrip v1 Calibration</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">
|
|
const ws = new WebSocket("ws://%serveripaddress%/wscal");
|
|
ws.onopen = function() {console.log("WebSocket Connected");};
|
|
ws.onclose = function() {alert("WS Connection Closed");};
|
|
ws.onmessage = function(event) {
|
|
console.log(event.data);
|
|
var data = JSON.parse(event.data);
|
|
document.getElementById("currenttime").innerHTML = data.curTime;
|
|
document.getElementById("currenttrack").innerHTML = data.curTrip;
|
|
document.getElementById("counter").innerHTML = data.counter;
|
|
document.getElementById("speed").innerHTML = data.curTripSpeed;
|
|
document.getElementById("caldist").innerHTML = data.caldist;
|
|
document.getElementById("calman").innerHTML = data.calman;
|
|
document.getElementById("calkm").innerHTML = data.calkm;
|
|
document.getElementById("calmeter").innerHTML = data.calmeter;
|
|
document.getElementById("calval").innerHTML = data.calval;
|
|
};
|
|
</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-secondary text-white">
|
|
<div class="row">
|
|
<div class="col-2 mt-1"><h2><span id="counter">12345</span></h2></div>
|
|
<div class="col-3 mt-1"><h2>TRACK <span id="currenttrack">A</span></h2></div>
|
|
<div class="col mt-1"><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="speed">123.4</span>Km/h</h2></div>
|
|
<hr>
|
|
</div>
|
|
<!--//Calibration Menu-->
|
|
<div class="row">
|
|
<div class="col text-end"><h3>Set Distance (<span id="caldist">9</span> Km)-></h3></div>
|
|
<div class="col text-start"><h3>
|
|
|
|
<input type="number" step="any" maxlength="2" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
|
|
id="setdistance" name="setdistance" size="4">
|
|
<button class="btn btn-primary mb-2 fw-bold" onclick="setDistance()">SET</button>
|
|
</h3></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-end"><h3>Set Calibration Manually (<span id="calman">110000</span>)-></h3></div>
|
|
<div class="col text-start"><h3>
|
|
|
|
<input type="number" step="any" maxlength="6" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
|
|
size="3" id="setcalibration" name="setcalibration">
|
|
<button class="btn btn-primary mb-2 fw-bold" onclick="setCalibration()">SET</button>
|
|
</h3></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-end"><h4>
|
|
<button ondblclick="startCalibration()" type="button" class="btn btn-primary mb-2 me-md-4">Start Calibration</button>
|
|
<button ondblclick="stopCalibration()" type="button" class="btn btn-primary mb-2 me-md-4">Stop Calibration</button></h4>
|
|
</div>
|
|
<div class="col"><h3>
|
|
<span id="calkm">00.000</span>Km</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-end me-md-4"><h3>1 meter=<span id="calmeter">123.456</span></h3></div>
|
|
<div class="col"><h3><span id="calval">123456</span> Calibration Value</h3></div>
|
|
</div>
|
|
|
|
<button ondblclick="location.href='/menu';" class="btn btn-primary fw-bold btn-sm mt-2 mb-2 ms-3">Back to Menu</button>
|
|
</div>
|
|
|
|
<script>
|
|
function setDistance(e){
|
|
const setDis = document.getElementById("setdistance").value;
|
|
var full_data='{"setcaldis":'+setDis+'}';
|
|
console.log(full_data);
|
|
ws.send(full_data);
|
|
}
|
|
function setCalibration(e){
|
|
const setCal = document.getElementById("setcalibration").value;
|
|
var full_data='{"setcaldisman":'+setCal+'}';
|
|
console.log(full_data);
|
|
ws.send(full_data);
|
|
}
|
|
function startCalibration(e){
|
|
ws.send('{"calstart":1}');
|
|
console.log("calstart->1");
|
|
}
|
|
function stopCalibration(e){
|
|
ws.send('{"calstart":0}');
|
|
console.log("calstart->0");
|
|
}
|
|
</script>
|
|
</body></html>
|
|
)rawliteral"; |