mirror of
https://github.com/bcomsugi/VSS_Rally_V3.git
synced 2026-01-11 10:52:38 +07:00
307 lines
14 KiB
C
307 lines
14 KiB
C
const char HTML_PAGEHEADER[] 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">
|
|
-->
|
|
<link href="bootstrap.css" rel="stylesheet">
|
|
<script type = "text/javascript">
|
|
const ws = new WebSocket("ws://%serveripaddress%/ws");
|
|
ws.onopen = function() {console.log("websocket connected");};
|
|
ws.onclose = function() {alert("WSocket 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("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>
|
|
-->
|
|
<script src="bootstrap.bundle.min.js"></script>
|
|
)rawliteral";
|
|
|
|
const char HTML_STYLECARD[] PROGMEM = R"rawliteral(
|
|
<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>
|
|
)rawliteral";
|
|
|
|
const char HTML_DIVSTARTRALLY[] PROGMEM = R"rawliteral(
|
|
<div class=" bg-success 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>
|
|
<!--//ODO1-->
|
|
<div class="row">
|
|
<div class="col-1"><h6>OD 1-></h6></div>
|
|
<div class="col-3 text-end"><h3><span id="odo1">123.4567</span> km</h3></div>
|
|
<div class="col"></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="location.href='/DIR?DIR1=FW';" type="button" class="btn btn-primary btn-sm mb-2">FW</button>
|
|
<button ondblclick="location.href='/DIR?DIR1=ST';" type="button" class="btn btn-primary btn-sm mb-2">STOP</button>
|
|
<button ondblclick="location.href='/DIR?DIR1=BK';" 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="location.href='/TG1';" 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="location.href='/DIR?DIR2=FW';" class="btn btn-primary btn-sm mb-1" type="button">FW</button>
|
|
<button ondblclick="location.href='/DIR?DIR2=ST';" class="btn btn-primary btn-sm mb-1" type="button">STOP</button>
|
|
<button ondblclick="location.href='/DIR?DIR2=BK';" 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="location.href='/TG2';" 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" class="btn btn-primary">Yes, <span class="func">Reset</span> ODO <span class="odonum"></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)rawliteral";
|
|
|
|
const char HTML_SCRIPTSETINTERVAL[] PROGMEM = R"rawliteral(
|
|
<script>setInterval(function() {
|
|
// Call a function repetatively with 333 miliSecond interval
|
|
getData();
|
|
}, 333); //333mSeconds update rate
|
|
</script>
|
|
)rawliteral";
|
|
|
|
const char HTML_SCRIPTGETDATA[] PROGMEM = R"rawliteral(
|
|
<script>
|
|
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>
|
|
)rawliteral";
|
|
|
|
const char HTML_END[] PROGMEM = R"rawliteral(
|
|
</body></html>
|
|
)rawliteral";
|
|
|
|
// HTML web page to handle 3 input fields (inputString, inputInt, inputFloat)
|
|
const char index_html[] PROGMEM = R"rawliteral(
|
|
<!DOCTYPE HTML><html><head>
|
|
<title>ESP Input Form</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script>
|
|
function submitMessage() {
|
|
alert("Saved value to ESP SPIFFS");
|
|
setTimeout(function(){ document.location.reload(false); }, 500);
|
|
}
|
|
</script></head><body><h3>
|
|
<form action="/get" target="hidden-form">
|
|
inputString (current value %inputString%): <input type="text" name="inputString">
|
|
<input type="submit" value="Submit" onclick="submitMessage()">
|
|
</form><br>
|
|
<form action="/get" target="hidden-form">
|
|
inputInt (current value %inputInt%): <input type="number " name="inputInt">
|
|
<input type="submit" value="Submit" onclick="submitMessage()">
|
|
</form><br>
|
|
<form action="/get" target="hidden-form">
|
|
inputFloat (current value %inputFloat%): <input type="number " name="inputFloat">
|
|
<input type="submit" value="Submit" onclick="submitMessage()">
|
|
</form>
|
|
<iframe style="display:none" name="hidden-form"></iframe></h3>
|
|
</body></html>
|
|
)rawliteral";
|
|
|
|
const char wifi_html[] PROGMEM = R"rawliteral(
|
|
<!DOCTYPE HTML><html><head>
|
|
<title>ESP WIFI Station</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script>
|
|
function submitMessage() {
|
|
alert("Saved value to ESP SPIFFS");
|
|
setTimeout(function(){ document.location.reload(false); }, 500);
|
|
}
|
|
</script></head><body>
|
|
<h3>Your Local IP is: %localip% <hr>
|
|
<form action="/setwifi" method="POST" target="hidden-form" >
|
|
Wifi SSID (current value %ssidString%): <input type="text" name="ssidString">
|
|
Password (current value %inputPwd%): <input type="text" name="inputPwd">
|
|
<input type="submit" value="Submit" >
|
|
</form><br>
|
|
|
|
<iframe style="display:none" name="hidden-form"></iframe></h3>
|
|
</body></html>
|
|
)rawliteral";
|
|
|
|
|
|
|
|
|
|
const char main_menu[] 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">
|
|
-->
|
|
<link href="bootstrap.css" rel="stylesheet">
|
|
</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>
|
|
-->
|
|
<script src="bootstrap.bundle.min.js"></script>
|
|
|
|
<fieldset>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col align-self-end"><h1>MENU1</h1></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col justify-content-around d-flex flex-column">
|
|
<div><button onclick="location.href='/startrally';" id="startrally" name="startrally" class="btn btn-primary mt-2 mb-2">START RALLY</button></div>
|
|
<div><button onclick="location.href='/startrally1';" id="startrally1" name="startrally1" class="btn btn-primary mt-2 mb-2">START RALLY 1</button></div>
|
|
<div><button onclick="location.href='/settime';" id="settime" name="settime" class="btn btn-primary mt-2 mb-2">Set TIME</button></div>
|
|
<div><button onclick="location.href='/wifi';" id="setwifi" name="setwifi" class="btn btn-primary mt-2 mb-2">Set Wifi</button></div>
|
|
<div><button onclick="location.href='/calibration';" id="calibration" name="calibration" class="btn btn-primary mt-2 mb-2">CALIBRATION</button></div>
|
|
<div><button onclick="location.href='/constanta';" id="constanta" name="constanta" class="btn btn-primary mt-2 mb-2">CONSTANTA</button></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row row-cols-auto">
|
|
|
|
<div class="col"><button onclick="location.href='/startrally';" id="startrally" name="startrally" class="btn btn-primary mt-2 mb-2">START RALLY</button></div>
|
|
<div class="col"><button onclick="location.href='/settime';" id="settime" name="settime" class="btn btn-primary mt-2 mb-2">Set TIME</button></div>
|
|
<div class="col"><button onclick="location.href='/wifi';" id="setwifi" name="setwifi" class="btn btn-primary mt-2 mb-2">Set Wifi</button></div>
|
|
<div class="col"><button onclick="location.href='/calibration';" id="calibration" name="calibration" class="btn btn-primary mt-2 mb-2">CALIBRATION</button></div>
|
|
<div class="col"><button onclick="location.href='/constanta';" id="constanta" name="constanta" class="btn btn-primary mt-2 mb-2">CONSTANTA</button></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">MENU</div>
|
|
<div class="card-body">
|
|
<button onclick="location.href='/startrally';" id="startrally" name="startrally" class="btn btn-primary ">START RALLY</button>
|
|
<button onclick="location.href='/wifi';" id="settime" name="settime" class="btn btn-primary">Wifi</button>
|
|
<button onclick="location.href='/calibration';" id="calibration" name="calibration" class="btn btn-primary">CALIBRATION</button>
|
|
<button onclick="location.href='/constanta';" id="constanta" name="constanta" class="btn btn-primary">CONSTANTA</button>
|
|
<a href='/wifi' class='btn btn-primary' alt='Broken Link'>Wifi</a>
|
|
</div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
|
|
</body></html>
|
|
)rawliteral";
|
|
|
|
const char main_menu1[] 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">
|
|
-->
|
|
<link href="bootstrap.css" rel="stylesheet">
|
|
</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>
|
|
-->
|
|
<script src="bootstrap.bundle.min.js"></script>
|
|
<fieldset>
|
|
<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">MENU</div>
|
|
<div class="card-body">
|
|
<button onclick="location.href='/startrally';" id="startrally" name="startrally" class="btn btn-primary ">START RALLY</button>
|
|
<button onclick="location.href='/wifi';" id="settime" name="settime" class="btn btn-primary">Wifi</button>
|
|
<button onclick="location.href='/calibration';" id="calibration" name="calibration" class="btn btn-primary">CALIBRATION</button>
|
|
<button onclick="location.href='/constanta';" id="constanta" name="constanta" class="btn btn-primary">CONSTANTA</button>
|
|
<a href='/wifi' class='btn btn-primary' alt='Broken Link'>Wifi</a>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
</body></html>
|
|
)rawliteral"; |