Published April 19, 2025 © CC BY

Wi-Fi Clock & Message Board Using ESP8266 + LED Matrix

A Smart Clock & Message Display that switches between real-time and real talk — all controlled from your phone. No fancy App

BeginnerFull instructions provided1 hour241

Wi-Fi Clock & Message Board Using ESP8266 + LED Matrix

Things used in this project

Hardware components

max7219 dot matrix display

Adafruit Feather HUZZAH with ESP8266 WiFi

Jumper wires (generic)

USB-A to Micro-USB Cable

Software apps and online services

Arduino Web Editor

Story

🧠 Why I Made This:

I wanted a simple digital clock that could also double as a message board — something fun and functional. I had an ESP8266 and an LED matrix lying around and thought: “Why not build a smart display that shows the time… or anything I want?”

No cloud, no mobile app — just raw Wi-Fi and code, with a web server to switch between display modes.

🔌 Wiring:

MAX7219 ESP8266

VCC---------------------------------------------3V

GND---------------------------------------------GND

DIN----------------------------------------------D7 (GPIO13)

CS-----------------------------------------------D8 (GPIO15)

CLK---------------------------------------------D5 (GPIO14)

📦 Software Setup:

Install Arduino IDE

Install Arduino IDE

Add ESP8266 board from Board Manager

Add ESP8266 board from Board Manager

Install required libraries:MD_ParolaMD_MAX72XXNTPClientESP8266WiFiWiFiUdp

🧩 How It Works:

The ESP8266 connects to your WiFi, gets real-time clock data using NTP, and displays it on the LED matrix in HH:MM format. The colon blinks every second for a clean digital clock vibe.

But here’s the twist — it runs a web server too.

You can:

Tap a button to switch to Clock Mode

Tap a button to switch to Clock Mode

Type a message into a text box to show a scrolling message

Type a message into a text box to show a scrolling message

🌐 Web Interface:

When the device boots, it prints its IP address on the LED matrix.Visit that IP from any browser on the same network, and boom — you see this UI:

⏰ Clock Mode button

⏰ Clock Mode button

💬 Message Mode input + send button

💬 Message Mode input + send button

No app needed. Just Wi-Fi.

🧪 Testing It:

I powered it via USB
LED matrix lit up — showed “Connecting…”
Then “192.168.xx.xx” appeared
Opened browser → typed IP → Web interface loade
Typed “Hello Hackster!” → It scrolled on the matrix
Switched to Clock Mode → Time appeared with blinking colon

1 / 2

CODE

#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include <SPI.h>
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <WiFiUdp.h>
#include <NTPClient.h>

// WiFi credentials
const char* ssid = "********************";
const char* password = "****************";

// LED Matrix setup
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4
#define CS_PIN 15

MD_Parola display = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);

// Time client
WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP, "pool.ntp.org", 19800, 60000); // IST offset

// Web server
ESP8266WebServer server(80);

// Mode and message
enum Mode { MODE_CLOCK, MODE_CUSTOM };
Mode currentMode = MODE_CLOCK;
String customMessage = "Hello it's me ARKA";

// Function to show IP address on boot
void showIP(IPAddress ip) {
  char ipPart[6];
  for (int i = 0; i < 4; i++) {
    sprintf(ipPart, "%d", ip[i]);
    display.displayClear();
    display.displayText(ipPart, PA_CENTER, 100, 0, PA_PRINT, PA_NO_EFFECT);
    display.displayAnimate();
    delay(1500);
  }
}

// Webpage HTML
String htmlPage = R"rawliteral(
<!DOCTYPE html>
<html>
<head><title>LED Control</title></head>
<body>
  <h2>ESP8266 LED Matrix Control</h2>
  <form action="/setMessage">
    <label>Enter Message:</label><br>
    <input type="text" name="message"><br><br>
    <input type="submit" value="Set Message">
  </form><br>
  <a href="/clock"><button>Clock Mode</button></a>
  <a href="/custom"><button>Custom Message Mode</button></a>
</body>
</html>
)rawliteral";

// Routes
void handleRoot() {
  server.send(200, "text/html", htmlPage);
}

void handleSetMessage() {
  if (server.hasArg("message")) {
    customMessage = server.arg("message");
    currentMode = MODE_CUSTOM;
  }
  server.send(200, "text/html", htmlPage);
}

void handleClock() {
  currentMode = MODE_CLOCK;
  server.send(200, "text/html", htmlPage);
}

void handleCustom() {
  currentMode = MODE_CUSTOM;
  server.send(200, "text/html", htmlPage);
}

void setup() {
  display.begin();
  display.setIntensity(5);
  display.displayClear();

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    display.print("WiFi..");
    delay(500);
  }

  showIP(WiFi.localIP());

  timeClient.begin();

  server.on("/", handleRoot);
  server.on("/setMessage", handleSetMessage);
  server.on("/clock", handleClock);
  server.on("/custom", handleCustom);
  server.begin();
}

void loop() {
  static unsigned long lastColonToggle = 0;
  static bool colonVisible = true;

  server.handleClient();

  if (currentMode == MODE_CLOCK) {
    timeClient.update();
    int h = timeClient.getHours();
    int m = timeClient.getMinutes();

    if (millis() - lastColonToggle >= 1000) {
      lastColonToggle = millis();
      colonVisible = !colonVisible;

      char displayTime[6];
      sprintf(displayTime, "%02d%c%02d", h, colonVisible ? ':' : ' ', m);

      display.displayClear();
      display.displayText(displayTime, PA_CENTER, 0, 0, PA_PRINT, PA_NO_EFFECT);
      display.displayAnimate();
    }
  } else if (currentMode == MODE_CUSTOM) {
    display.displayClear();
    display.displayScroll(customMessage.c_str(), PA_CENTER, PA_SCROLL_LEFT, 100);
    while (!display.displayAnimate()) delay(10);
  }

  delay(100);
}

Wi-Fi Clock & Message Board Using ESP8266 + LED Matrix

Things used in this project

Hardware components

Software apps and online services

Story

🧠 Why I Made This:

📦 Software Setup:

🧩 How It Works:

🌐 Web Interface:

🧪 Testing It:

Code

CODE

Credits

Arka Manna

Comments

Embed the widget on your own site

Wi-Fi Clock & Message Board Using ESP8266 + LED Matrix

Wi-Fi Clock & Message Board Using ESP8266 + LED Matrix

Things used in this project

Hardware components

Software apps and online services

Story

🧠 Why I Made This:

📦 Software Setup:

🧩 How It Works:

🌐 Web Interface:

🧪 Testing It:

Code

CODE

Credits

Arka Manna

Comments

Related channels and tags