PaulS:
Hell, even I was able to do it.
After nearly 10yrs of watching this forum, even I can appreciate the attempt of modesty.
A year or so age, xl97, Robin2, and others sent me down a good path - https://www.w3schools.com/.
The nano is too small to house any webpage code; the esp8266 has enough to hold a few pages.
Below are snippits from a program used for a card reader; the card reader is active only during a predetermined time period.
Note the "function GetTime()"; this allows real time update every second - no need to refresh page.
ESP8266 Server Setup:
void ServerSetup() {
ESP8266server.on("/", HTTP_GET, handleRoot);
ESP8266server.on("/ESP8266Time.txt", HTTP_GET, handleGetTime);
}
handleRoot: (html "style" at end of post)
void handleRoot() { // When URI / is requested, send a web page with a button to toggle the LED
static unsigned long last = millis();
if (millis() - last < 3000) {ESP8266server.handleClient();}
ESP8266server.send(200, "text/html",
"<!DOCTYPE html>"
"<html>"
"<title>" + String(WEBTITLE) + "</title>"
"<body onload = \"PageLoad()\">"
"<style type=\"text/css\">"
+ String(style) +
"</style>"
"<script>"
" function PageLoad(){"
" myTimer = setInterval(GetTime, 1000)"
" }"
" function GetTime(){"
" var xhttp = new XMLHttpRequest();"
" xhttp.onreadystatechange = function() {"
" if (this.readyState == 4 && this.status == 200) {"
" document.getElementById(\"TimeLine\").innerHTML = this.responseText;"
" }"
" };"
" xhttp.open(\"GET\", \"/GetTimeHIST.txt\", true);"
" xhttp.send(null);"
" }"
/*
" function GetHistory(){"
" var xhttp = new XMLHttpRequest();"
" xhttp.onreadystatechange = function() {"
" if (this.readyState == 4 && this.status == 200) {"
" document.getElementById(\"HistLine\").innerHTML =\"Card Reader History: \" + this.responseText;"
" }"
" };"
" xhttp.open(\"GET\", \"/GetHIST.txt\", true);"
" xhttp.send(null);"
" }"
*/
" function SetTime(){"
" document.getElementById(\"TimeLine\").innerHTML =\"Contacting NTP Server... \";"
" var xhttp = new XMLHttpRequest();"
" xhttp.onreadystatechange = function() {"
" if (this.readyState == 4 && this.status == 200) {"
" }"
" };"
" xhttp.open(\"GET\", \"/SetTime.txt\", true);"
" xhttp.send(null);"
" }"
"</script>"
" <a href=\"http://www.exportmoose.com/\" target=\"_blank\"><img src=\"http://www.exportmoose.com/images/Moose/MainFratMooseLogo.gif\" alt=\"No Internet\"></a>"
//" <a href=\"http://www.exportmoose.com/\" target=\"_blank\"><img src=\"http://www.exportmoose.com/images/Moose/MainFratMooseLogo.gif\" alt=\"No Internet\">"
//" </a>"
"<form action=\"/loginSubmit\" method=\"POST\">"
"<div class = tbox>"
"<input type=\"text\" name=\"username\" placeholder=\"Username\">
"
"</p>"
"<input type=\"password\" name=\"password\" placeholder=\"Password\">
"
"</div>"
"<div class = btn2>"
"<input type=\"submit\" value=\"Login\"></form>"
"</div>"
"<input type=\"button\" id=\"SetT\" name=\"Time\" value=\"Update Time\" onclick=\"SetTime()\" >"
"<div class = msg>"
"<p2 id=\"TimeLine\"></p2>"
"</div>"
"<p></p>"
"<p></p>"
"<p></p>"
"<p></p>"
"<p3 id=\"HistLine\"></p3>"
"</body>"
"</html>");
}
handleGetTime:
void handleGetTime(){
LoadDATE(); // retrieve time from NTP server
if (proALIVE == true){ // if ProMini is communicating, do this..
ESP8266server.send(200, "text/plain", "<p>" + String(REV) + "</p>" + "Arduino Time:" + String(DATE) + '\t' + "ProMini: ONLINE");
}else{
ESP8266server.send(200, "text/plain", "<p>" + String(REV) + "</p>" + "Arduino Time:" + String(DATE) + '\t' + "ProMini: OFFLINE");
}
}
html style:
const char* style =
"*{"
" box-sizing: border-box; /* resets box model to avoid dimensional issues*/"
" margin: 0; /* Resets user agent default values */"
" padding: 0; /* Resets user agent default values */"
" position: relative;"
"}"
"h3 {text-shadow: 0 0 5px #FF00FF, 0 0 4px #00AFFF;}"
"body{background-color:lightblue;}"
".instr {"
"width: 400px;"
"font-size: 11px;"
"font-style: italic;"
"font-family:Lao UI;"
"align:left;"
"line-height: 1.5em;"
"word-spacing: 0.05em;"
"letter-spacing: 0.05em;"
"margin: 1px 10px 1px 10px ;"
"padding: 5px 0px 15px 0px ;"
"}"
".ipaddr {"
"color: darkred;"
"margin: 0px 0px 0px 450px;"
"}"
".tbox {"
"margin: 2px 0px 1px 0px ;"
"padding: 5px 2px 5px 2px ;"
"width: 174px;"
"text-color:blue;"
"/*box-shadow: 2px 2px grey; */"
"display: inline;"
"postion: absolute;"
"}"
".btn1 {"
"margin: 1px 10px 1px 10px ;"
"padding: 2px 4px 2px 2px ;"
"width: 151px;"
"/*box-shadow: 2px 2px grey; */"
"}"
".btn2 {"
"align:center;"
"margin: 1px 0px 1px 10px ;"
"padding: 2px 0px 3px 3px ;"
"width: 40px;"
"/* box-shadow: 2px 2px grey; */"
"display: inline;"
"}"
".btn1:hover, .btn2:hover {"
" background: #000FFF;"
"}"
".radios{"
"margin: 10px;"
"padding: 1px 4px 1px 2px ;"
"width: 250px;"
"}"
".msg {"
"color:darkblue;"
"font-size: 18px;"
"font-family: Lao UI;"
"font-style: bold;"
"}"
".HostSlave{"
"display: inline;"
"postion: absolute;"
"}"
".PassUser{"
"margin: 40px 0px 1px 10px ;"
"padding: 5px 2px 5px 2px ;"
"width: 174px;"
"text-color:blue;"
"}";
Hope this helps to get you started.