In this article we will display a clock in the web browser, we will use the RTC feature of the R4 Wifi board and also the ESP32 Web Server – essentially we have joined 2 examples together
Once you have figured out how you can display sensor info in the serial output and create a web server, this is a fairly common thing you can do.
Open the serial monitor window and you will hopefully get an IP address
SSID: mywifinetwork IP Address: 192.168.1.144
Now using your favourite browser you can visit that IP address and the time will be displayed
Complete Code
You need to replace the following with your details
char ssid[] = “yournetwork”; // your network SSID (name)
char pass[] = “yourpassword”; // your network password (use for WPA, or use as key for WEP)
The HTML part which displays the time is
client.println(“<html>”);
client.print(“<h1>”);
client.print(“Current Time “);
client.print(currentTime.getHour());
client.print(“:”);
client.print(currentTime.getMinutes());
client.print(“:”);
client.print(currentTime.getSeconds());
client.print(“</h1>”);
client.println(“</html>”);
We could of also displayed the Date as well
#include "WiFiS3.h"
#include "RTC.h"
char ssid[] = "yournetwork"; // your network SSID (name)
char pass[] = "yourpassword"; // your network password (use for WPA, or use as key for WEP)
int keyIndex = 0; // your network key index number (needed only for WEP)
int status = WL_IDLE_STATUS;
WiFiServer server(80);
void setup() {
//Initialize serial and wait for port to open:
Serial.begin(9600);
// attempt to connect to WiFi network:
while (status != WL_CONNECTED) {
Serial.print("Attempting to connect to SSID: ");
Serial.println(ssid);
// Connect to WPA/WPA2 network. Change this line if using open or WEP network:
status = WiFi.begin(ssid, pass);
// wait 10 seconds for connection:
delay(10000);
}
server.begin();
printWifiStatus();
RTC.begin();
RTCTime startTime(02, Month::JULY, 2023, 15, 00, 00, DayOfWeek::SUNDAY, SaveLight::SAVING_TIME_ACTIVE);
RTC.setTime(startTime);
}
void loop()
{
RTCTime currentTime;
// Get current time from RTC
RTC.getTime(currentTime);
// listen for incoming clients
WiFiClient client = server.available();
if (client)
{
// Serial.println("new client");
// an HTTP request ends with a blank line
boolean currentLineIsBlank = true;
while (client.connected())
{
if (client.available())
{
char c = client.read();
//Serial.write(c);
// if you've gotten to the end of the line (received a newline
// character) and the line is blank, the HTTP request has ended,
// so you can send a reply
if (c == '\n' && currentLineIsBlank)
{
// send a standard HTTP response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close"); // the connection will be closed after completion of the response
client.println("Refresh: 1"); // refresh the page automatically every 1 sec
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.print("<h1>");
client.print("Current Time ");
client.print(currentTime.getHour());
client.print(":");
client.print(currentTime.getMinutes());
client.print(":");
client.print(currentTime.getSeconds());
client.print("</h1>");
client.println("</html>");
break;
}
if (c == '\n')
{
// you're starting a new line
currentLineIsBlank = true;
} else if (c != '\r')
{
// you've gotten a character on the current line
currentLineIsBlank = false;
}
}
}
// give the web browser time to receive the data
//delay(0.1);
// close the connection:
client.stop();
// Serial.println("client disconnected");
}
}
void printWifiStatus() {
// print the SSID of the network you're attached to:
Serial.print("SSID: ");
Serial.println(WiFi.SSID());
// print your board's IP address:
IPAddress ip = WiFi.localIP();
Serial.print("IP Address: ");
Serial.println(ip);
}
One issue is that the web page will not update every 1 second every time, sometimes it is 2 seconds
Links
https://github.com/programmershelp/Arduino/tree/main/Examples/rtcdateserver
