Build a digital time piece with ESP32-web-Server

To use the below code,  you need to copy and paste code in your Arduino ide and install a library called ESPAsyncWebServer

  1. download .zip file
  2. Unzip the .ziped file and you should see a folder called ESPAsyncWebser-master
  3. rename the folder ESPAsyncWebserver-master to ESPAsyncWebserver
  4. move the folder ESPAsyncWebserver to the Arduino ide installation libraries folder
  5. Compile the code and open the serial monitor to view the IP Address of your ESP32 board(in case, if you didn’t find any IP Address on your serial monitor then at that instant, press the EN button of your ESP32 board)
  6. Copy and paste the IP Address of your ESP32   board on a web browser address bar to view the digital timepiece

// Import required libraries
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
// Replace with your network credentials
const char* ssid =  "xx";
const char* password = "%ssid6630&"; 
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  
<style>
*{
  margin: 0;
  padding: 0;
}
body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #10101E;
}
.datetime{
  color: #fff;
  background: #10101E;
  font-family: "Segoe UI", sans-serif;
  width: 340px;
  padding: 15px 10px;
  border: 3px solid #2E94E3;
  border-radius: 5px;
  -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255, 255, 255, 0.1));
  transition: 0.5s;
  transition-property: background, box-shadow;
}
.datetime:hover{
  background: #2E94E3;
  box-shadow: 0 0 30px #2E94E3;
}
.date{
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
}
.time{font-size: 40px;display: flex;justify-content: center;align-item:center;
}
.time span:not(:last-child){position: relative;margin: 0 6px;font-weight: 600;
  text-align: center;letter-spacing: 3px;
}
.time span:last-child{background: #2E94E3;font-size: 30px; font-weight: 600;
  text-transform: uppercase;margin-top: 10px;padding: 0 5px;border-radius: 3px;
}
</style>
</head>
    <body onload="initClock()">
    <!--digital clock start-->
    <div class="datetime"><div class="date">  <span id="dayname">Day</span>,<span id="month">Month</span><span id="daynum">00</span>, <span id="year">Year</span></div>
      <div class="time"><span id="hour">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span><span id="period">AM</span></div></div>
    <!--digital clock end-->
    <script type="text/javascript">function updateClock(){  var now = new Date();var dname = now.getDay(),mo = now.getMonth(),dnum = now.getDate(),
    yr = now.getFullYear(),hou = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(), pe = "AM";
          if(hou >= 12){ pe = "PM";  }
          if(hou == 0){hou = 12;}
          if(hou > 12){hou = hou - 12;}
          Number.prototype.pad = function(digits){for(var n = this.toString(); n.length < digits; n = 0 + n);return n; }
          var months = ["January", "February", "March", "April", "May", "June", "July", "Augest", "September", "October", "November", "December"];
          var week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
          var ids = ["dayname", "month", "daynum", "year", "hour", "minutes", "seconds", "period"];
          var values = [week[dname], months[mo], dnum.pad(2), yr, hou.pad(2), min.pad(2), sec.pad(2), pe];
          for(var i = 0; i < ids.length; i++)document.getElementById(ids[i]).firstChild.nodeValue = values[i]; }
    function initClock(){updateClock();window.setInterval("updateClock()", 1);}</script> </body>
</html>)rawliteral";
void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  
  
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address 
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  // Route for root / web page
 server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
   request->send_P(200, "text/html", index_html);
  });
  // Start server
  server.begin();
}
 
void loop(){
  
}

Mohammed Anees

Hey there, welcome to aneescraftsmanship I am Mohammed Anees an independent developer/blogger. I like to share and discuss the craft with others plus the things which I have learned because I believe that through discussion and sharing a new world opens up

Leave a Reply

Your email address will not be published.