adding bootstrap.css and bootstrap.bundle.min.js

This commit is contained in:
Bluedragon 2022-04-27 10:12:47 +07:00
parent fffd7482d8
commit 6a8d497214
11 changed files with 162 additions and 37 deletions

7
backup/bootstrap.bundle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

6
backup/bootstrap.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -3,7 +3,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --> <!-- 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="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> <script>
function onlyNumberKey(evt,e) { function onlyNumberKey(evt,e) {
// Only ASCII character in that range allowed // Only ASCII character in that range allowed
@ -17,18 +20,20 @@
} }
</script> </script>
</head><body onload="loaded();"> </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="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-info text-white"> <div class="bg-info text-white">
<div class="row"> <!-- <div class="row">
<div class="col-2 mt-1"><h2><span id="counter">12345</span></h2></div> <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-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 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> <div class="col-3 mt-1 text-end"><h2><span id="speed">123.4</span>Km/h</h2></div>
<hr> <hr>
</div> </div>
-->
<!--//Constanta Menu--> <!--//Constanta Menu-->
<div class="row g-2 align-items-center"> <div class="row g-2 align-items-center">
<div class="col-1"></div> <div class="col-1"></div>
<div class="col-1 text-center "><label class="col-form-label fs-6 fw-bold">Dist(Km)</label></div> <div class="col-1 text-center "><label class="col-form-label fs-6 fw-bold">Dist(Km)</label></div>
@ -159,7 +164,7 @@ const char HTML_CONSTEND[] PROGMEM = R"rawliteral(
function setValBackColor(elem, jsonval){ function setValBackColor(elem, jsonval){
if (jsonval) { if (jsonval) {
elem.value = jsonval; elem.value = jsonval;
elem.style.backgroundColor = "#94C4E2"; elem.style.backgroundColor = "#ABEBC6";//"#E5E7E9";//"#C0C0C0";//"#94C4E2";
} else { } else {
elem.style.backgroundColor = "white"; elem.style.backgroundColor = "white";
} }

View File

@ -3,10 +3,18 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --> <!-- 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="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"> <script type = "text/javascript">
var ping; var ping;
const ws = new WebSocket("ws://%serveripaddress%/ws"); var ws;
function loaded(){
ws = new WebSocket("ws://%serveripaddress%/ws");
console.log("new ws");
// const ws = new WebSocket("ws://%serveripaddress%/ws");
ws.onopen = function() { ws.onopen = function() {
console.log("WebSocket Connected"); console.log("WebSocket Connected");
if(document.getElementById("mainTime").classList.contains("bg-danger")){ if(document.getElementById("mainTime").classList.contains("bg-danger")){
@ -16,14 +24,14 @@
}; };
ws.onclose = function() { ws.onclose = function() {
// alert("WS Connection Closed"); // alert("WS Connection Closed");
console.log("WS Connection Closed"); // console.log("WS Connection Closed");
if(!document.getElementById("mainTime").classList.contains("bg-danger")){ if(!document.getElementById("mainTime").classList.contains("bg-danger")){
document.getElementById("mainTime").classList.add("bg-danger") document.getElementById("mainTime").classList.add("bg-danger")
} }
ping = -1; ping = -1;
}; };
ws.onmessage = function(event) { ws.onmessage = function(event) {
console.log(event.data); // console.log(event.data);
let data = JSON.parse(event.data); let data = JSON.parse(event.data);
// if (data.hasOwnProperty("ping")) { // if (data.hasOwnProperty("ping")) {
// console.log("with ping key"); // console.log("with ping key");
@ -59,7 +67,7 @@
document.getElementById("tdiff2").innerHTML = data.TDiff; document.getElementById("tdiff2").innerHTML = data.TDiff;
// } // }
}; };
}
setInterval(checkPing, 1000); //heartbeat setInterval(checkPing, 1000); //heartbeat
function checkPing(){ function checkPing(){
// console.log("ping="+ping); // console.log("ping="+ping);
@ -82,8 +90,11 @@
return true; return true;
} }
</script> </script>
</head><body> </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="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=" bg-success text-white">
<div class="row"> <div class="row">
<div class="col-2 mt-1"><h6><span id="counter">12345</span></h6></div> <div class="col-2 mt-1"><h6><span id="counter">12345</span></h6></div>

7
data/bootstrap.bundle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

6
data/bootstrap.css vendored Normal file

File diff suppressed because one or more lines are too long

7
data/bootstrap.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,10 +1,13 @@
const char HTML_CONSTHEADER[] PROGMEM = R"rawliteral( const char HTML_CONSTHEADER[] PROGMEM = R"rawliteral(
<DOCTYPE HTML><html><head> <!DOCTYPE HTML><html><head>
<title>Rally TerraTrip v1 Constanta</title> <title>Rally TerraTrip v1 Constanta</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --> <!-- 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="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> <script>
function onlyNumberKey(evt,e) { function onlyNumberKey(evt,e) {
// Only ASCII character in that range allowed // Only ASCII character in that range allowed
@ -18,18 +21,20 @@ const char HTML_CONSTHEADER[] PROGMEM = R"rawliteral(
} }
</script> </script>
</head><body onload="loaded();"> </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="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-info text-white"> <div class="bg-info text-white">
<div class="row"> <!-- <div class="row">
<div class="col-2 mt-1"><h2><span id="counter">12345</span></h2></div> <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-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 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> <div class="col-3 mt-1 text-end"><h2><span id="speed">123.4</span>Km/h</h2></div>
<hr> <hr>
</div> </div>
-->
<!--//Constanta Menu--> <!--//Constanta Menu-->
<div class="row g-2 align-items-center"> <div class="row g-2 align-items-center">
<div class="col-1"></div> <div class="col-1"></div>
<div class="col-1 text-center "><label class="col-form-label fs-6 fw-bold">Dist(Km)</label></div> <div class="col-1 text-center "><label class="col-form-label fs-6 fw-bold">Dist(Km)</label></div>
@ -160,7 +165,7 @@ const char HTML_CONSTEND[] PROGMEM = R"rawliteral(
function setValBackColor(elem, jsonval){ function setValBackColor(elem, jsonval){
if (jsonval) { if (jsonval) {
elem.value = jsonval; elem.value = jsonval;
elem.style.backgroundColor = "#94C4E2"; elem.style.backgroundColor = "#ABEBC6";//"#E5E7E9";//"#C0C0C0";//"#94C4E2";
} else { } else {
elem.style.backgroundColor = "white"; elem.style.backgroundColor = "white";
} }

View File

@ -4,10 +4,18 @@ const char HTML_startrally1[] PROGMEM = R"rawliteral(
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --> <!-- 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="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"> <script type = "text/javascript">
var ping; var ping;
const ws = new WebSocket("ws://%serveripaddress%/ws"); var ws;
function loaded(){
ws = new WebSocket("ws://%serveripaddress%/ws");
console.log("new ws");
// const ws = new WebSocket("ws://%serveripaddress%/ws");
ws.onopen = function() { ws.onopen = function() {
console.log("WebSocket Connected"); console.log("WebSocket Connected");
if(document.getElementById("mainTime").classList.contains("bg-danger")){ if(document.getElementById("mainTime").classList.contains("bg-danger")){
@ -17,14 +25,14 @@ const char HTML_startrally1[] PROGMEM = R"rawliteral(
}; };
ws.onclose = function() { ws.onclose = function() {
// alert("WS Connection Closed"); // alert("WS Connection Closed");
console.log("WS Connection Closed"); // console.log("WS Connection Closed");
if(!document.getElementById("mainTime").classList.contains("bg-danger")){ if(!document.getElementById("mainTime").classList.contains("bg-danger")){
document.getElementById("mainTime").classList.add("bg-danger") document.getElementById("mainTime").classList.add("bg-danger")
} }
ping = -1; ping = -1;
}; };
ws.onmessage = function(event) { ws.onmessage = function(event) {
console.log(event.data); // console.log(event.data);
let data = JSON.parse(event.data); let data = JSON.parse(event.data);
// if (data.hasOwnProperty("ping")) { // if (data.hasOwnProperty("ping")) {
// console.log("with ping key"); // console.log("with ping key");
@ -60,7 +68,7 @@ const char HTML_startrally1[] PROGMEM = R"rawliteral(
document.getElementById("tdiff2").innerHTML = data.TDiff; document.getElementById("tdiff2").innerHTML = data.TDiff;
// } // }
}; };
}
setInterval(checkPing, 1000); //heartbeat setInterval(checkPing, 1000); //heartbeat
function checkPing(){ function checkPing(){
// console.log("ping="+ping); // console.log("ping="+ping);
@ -83,8 +91,11 @@ const char HTML_startrally1[] PROGMEM = R"rawliteral(
return true; return true;
} }
</script> </script>
</head><body> </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="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=" bg-success text-white">
<div class="row"> <div class="row">
<div class="col-2 mt-1"><h6><span id="counter">12345</span></h6></div> <div class="col-2 mt-1"><h6><span id="counter">12345</span></h6></div>
@ -311,6 +322,7 @@ function changeTrip(cTrip){
} }
</script> </script>
</body></html> </body></html>
)rawliteral"; )rawliteral";
//HTML_CALIBRATION //HTML_CALIBRATION
@ -323,7 +335,10 @@ const char HTML_CALIBRATION[] PROGMEM = R"rawliteral(
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --> <!-- 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="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"> <script type = "text/javascript">
const ws = new WebSocket("ws://%serveripaddress%/wscal"); const ws = new WebSocket("ws://%serveripaddress%/wscal");
ws.onopen = function() {console.log("WebSocket Connected");}; ws.onopen = function() {console.log("WebSocket Connected");};
@ -343,7 +358,10 @@ const char HTML_CALIBRATION[] PROGMEM = R"rawliteral(
}; };
</script> </script>
</head><body> </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="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-secondary text-white"> <div class=" bg-secondary text-white">
<div class="row"> <div class="row">
<div class="col-2 mt-1"><h2><span id="counter">12345</span></h2></div> <div class="col-2 mt-1"><h2><span id="counter">12345</span></h2></div>

View File

@ -80,6 +80,7 @@ boolean grequestIsFull=false;
AsyncWebServerRequest *gRequestConstHTML[REQUESTCOUNT]; AsyncWebServerRequest *gRequestConstHTML[REQUESTCOUNT];
uint8_t gReqCountConstHTML=0; uint8_t gReqCountConstHTML=0;
bool gGotRequestConstHTML[REQUESTCOUNT]; bool gGotRequestConstHTML[REQUESTCOUNT];
boolean grequestConstHTMLIsFull=false;
//////// ////////
// //
// //
@ -2785,6 +2786,24 @@ Serial.print("try to connect to ssid:");Serial.print(ssid);Serial.print("; with
request->send_P(200, "text/html", HTML_startrally1, processor); request->send_P(200, "text/html", HTML_startrally1, processor);
}); });
server.on("/bootstrap.css", HTTP_GET, [] (AsyncWebServerRequest *request) {
// request->send_P(200, "text/html", HTML_startrally1, processor);
Serial.println("load /bootstrap.css");
request->send(SPIFFS, "/bootstrap.css", "text/css");
});
server.on("/bootstrap.bundle.min.js", HTTP_GET, [] (AsyncWebServerRequest *request) {
// request->send_P(200, "text/html", HTML_startrally1, processor);
Serial.println("load /bootstrap.bundle.min.js");
request->send(SPIFFS, "/bootstrap.bundle.min.js", "text/javascript");
});
server.on("/bootstrap.min.js", HTTP_GET, [] (AsyncWebServerRequest *request) {
// request->send_P(200, "text/html", HTML_startrally1, processor);
Serial.println("load /bootstrap.min.js");
request->send(SPIFFS, "/bootstrap.min.js", "text/javascript");
});
server.on("/resetodo1", HTTP_GET, [] (AsyncWebServerRequest *request) { server.on("/resetodo1", HTTP_GET, [] (AsyncWebServerRequest *request) {
Serial.println("ODORESET 1"); Serial.println("ODORESET 1");
request->redirect("/startrally1"); request->redirect("/startrally1");
@ -2880,14 +2899,21 @@ Serial.print("try to connect to ssid:");Serial.print(ssid);Serial.print("; with
}); });
server.on("/constanta", HTTP_GET, [] (AsyncWebServerRequest *request) { server.on("/constanta", HTTP_GET, [] (AsyncWebServerRequest *request) {
Serial.println("start /const"); Serial.println("start /const");
if (grequestConstHTMLIsFull) {
Serial.println("XXXXXXXXXXXXXXXXXXXX CONSTHTML FULLLL");
// request->send(200, "text/plain", "{\"response\":\"request Const is full\"}");
Serial.println("XXXXXXXXXXXXXXXXXXXX CONSTHTML SENT");
} else {
for (uint8_t i=0; i<REQUESTCOUNT;i++){ for (uint8_t i=0; i<REQUESTCOUNT;i++){
if(!gGotRequestConstHTML[i]){ if(!gGotRequestConstHTML[i]){
grequestConstHTMLIsFull=true;
gRequestConstHTML[i]=request; gRequestConstHTML[i]=request;
gGotRequestConstHTML[i]=true; gGotRequestConstHTML[i]=true;
Serial.print("FILL/const:");Serial.println(i); Serial.print("FILL/const:");Serial.println(i);
break; break;
} }
} }
}
// handleConstantaHTML(request); // handleConstantaHTML(request);
}); });
@ -2903,7 +2929,7 @@ Serial.print("try to connect to ssid:");Serial.print(ssid);Serial.print("; with
// if (gGotRequest[0]) // if (gGotRequest[0])
if (grequestIsFull) { if (grequestIsFull) {
Serial.println("XXXXXXXXXXXXXXXXXXXX FULLLL"); Serial.println("XXXXXXXXXXXXXXXXXXXX FULLLL");
request->send(200, "text/plain", "{\"response\":\"request is full\"}"); // request->send(200, "text/plain", "{\"response\":\"request is full\"}");
Serial.println("XXXXXXXXXXXXXXXXXXXX SENT"); Serial.println("XXXXXXXXXXXXXXXXXXXX SENT");
} else { } else {
for (uint8_t i=0; i<REQUESTCOUNT;i++){ for (uint8_t i=0; i<REQUESTCOUNT;i++){
@ -4016,6 +4042,7 @@ void loop() //loop from VSS RALLY V2
} }
} }
grequestIsFull=false; grequestIsFull=false;
grequestConstHTMLIsFull=false;
} }
VSSCount=millis(); //VSSCount Simulator VSSCount=millis(); //VSSCount Simulator
#ifdef DEBUG #ifdef DEBUG

View File

@ -4,7 +4,10 @@ const char HTML_PAGEHEADER[] PROGMEM = R"rawliteral(
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --> <!-- 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="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"> <script type = "text/javascript">
const ws = new WebSocket("ws://%serveripaddress%/ws"); const ws = new WebSocket("ws://%serveripaddress%/ws");
ws.onopen = function() {console.log("websocket connected");}; ws.onopen = function() {console.log("websocket connected");};
@ -26,7 +29,11 @@ const char HTML_PAGEHEADER[] PROGMEM = R"rawliteral(
}; };
</script> </script>
</head><body> </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>)rawliteral"; <!--
<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( const char HTML_STYLECARD[] PROGMEM = R"rawliteral(
<style> <style>
@ -40,7 +47,8 @@ const char HTML_STYLECARD[] PROGMEM = R"rawliteral(
margin:20px; margin:20px;
box-shadow: 0px 2px 18px -4px rgba(0,0,0,0.75); box-shadow: 0px 2px 18px -4px rgba(0,0,0,0.75);
} }
</style>)rawliteral"; </style>
)rawliteral";
const char HTML_DIVSTARTRALLY[] PROGMEM = R"rawliteral( const char HTML_DIVSTARTRALLY[] PROGMEM = R"rawliteral(
<div class=" bg-success text-white"> <div class=" bg-success text-white">
@ -150,10 +158,12 @@ const char HTML_SCRIPTGETDATA[] PROGMEM = R"rawliteral(
xhttp.open("GET", "readADC", true); xhttp.open("GET", "readADC", true);
xhttp.send(); xhttp.send();
} }
</script>)rawliteral"; </script>
)rawliteral";
const char HTML_END[] PROGMEM = R"rawliteral( const char HTML_END[] PROGMEM = R"rawliteral(
</body></html>)rawliteral"; </body></html>
)rawliteral";
// HTML web page to handle 3 input fields (inputString, inputInt, inputFloat) // HTML web page to handle 3 input fields (inputString, inputInt, inputFloat)
const char index_html[] PROGMEM = R"rawliteral( const char index_html[] PROGMEM = R"rawliteral(
@ -179,7 +189,8 @@ const char index_html[] PROGMEM = R"rawliteral(
<input type="submit" value="Submit" onclick="submitMessage()"> <input type="submit" value="Submit" onclick="submitMessage()">
</form> </form>
<iframe style="display:none" name="hidden-form"></iframe></h3> <iframe style="display:none" name="hidden-form"></iframe></h3>
</body></html>)rawliteral"; </body></html>
)rawliteral";
const char wifi_html[] PROGMEM = R"rawliteral( const char wifi_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head> <!DOCTYPE HTML><html><head>
@ -211,9 +222,16 @@ const char main_menu[] PROGMEM = R"rawliteral(
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --> <!-- 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="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> </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="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> <fieldset>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -254,7 +272,8 @@ const char main_menu[] PROGMEM = R"rawliteral(
</fieldset> </fieldset>
</body></html>)rawliteral"; </body></html>
)rawliteral";
const char main_menu1[] PROGMEM = R"rawliteral( const char main_menu1[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head> <!DOCTYPE HTML><html><head>
@ -262,9 +281,15 @@ const char main_menu1[] PROGMEM = R"rawliteral(
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --> <!-- 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="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> </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="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> <fieldset>
<div class="card text-white bg-primary mb-3" style="max-width: 20rem;"> <div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
<div class="card-header">MENU</div> <div class="card-header">MENU</div>
@ -278,4 +303,5 @@ const char main_menu1[] PROGMEM = R"rawliteral(
</div> </div>
</fieldset> </fieldset>
</body></html>)rawliteral"; </body></html>
)rawliteral";