A smart clock can display much more information than a traditional digital clock. Most importantly, a smart clock is connected to the network or internet and can be controlled through a smartphone or PC. You can also display whatever text or information on the smart clock.

In this guide, we will build a smart DIY Wi-Fi-based clock using an ESP8266 microcontroller, and MAX7219 4x8x8 LED matrix. You may use it to display time, date, temperature, humidity, desired text, alerts, Instagram followers, YouTube subscribers, views, animated texts, emoji, and other information with just a few taps.

Things You Will Need

To build a DIY smart clock, you need the following:

  • An MQTT Server with Node-Red. You can install and set up a Home Assistant server with MQTT and Node-Red for clock automation and sending data.
  • An ESP8266-based MCU, such as NodemCU or D1 Mini. An ESP32 will also work.
  • MAX7219 4-in-1 or 8-in-1 (preferred) Matrix Display.
  • DuPont or jumper wires
  • Micros USB cable with 5V adapter
  • A 3D printed case to assemble all components
  • A frosted acrylic sheet, preferably black. It shouldn’t be opaque. If the black frosted sheet isn’t available, you can use a white frosted acrylic sheet with tinted film used on car mirrors and a butter paper sheet for diffusing LED light.
things you will need to build smart wifi clock notification panel

Steps to Build a Smart Clock

Follow these steps in the given order to build the DIY smart clock using the MAX7219 matrix. You may also buy one of these best smart clocks.

Step 1: Download and Setup Arduino IDE

install esp8266 boards in arduino ide

Alternatively, you may also these libraries as a .zip file and extract them in the Documents > Arduino > libraries folder.

Step 2: Compile and Flash the Firmware

  • Download the Pixel-led MQTT Panel project from GitHub and extract it in the Documents > Arduino folder.
  • Open the extracted folder and double-click on pixel_led_mqtt_panel.ino file.
  • Go to Tools > Boards > ESP8266 Boards (x.x.x) and select NodeMCU 1.0 or LOLIN(WEMOS) D1—based on the board you are using for this project.
select nodemcu for flashing the firmware
  • Select the COM port
  • Then make the following changes in the pixel_led_mqtt_panel.ino sketch.
    • Enter your Wi-Fi name, password, and OTA password.
    • Enter the MQTT server IP, username, and password.
        const char* WIFI_ssid       = "EnterYourWiFiName";
const char* WIFI_password = "WIFiPassword";
  // OTA updates settings //
const char* OTA_hostname = "wLed-panel-01";
const char* OTA_password = "OTAPassword";
  // MQTT settings //
const char* mqtt_server = "192.168.xx.xx";
const char* mqtt_user = "mqtt-username";
const char* mqtt_password = "mqtt-password";
  • Also, edit the following based on your MAX7219 matrix. If you have an 8x8x8, keep everything default. However, if you are using a 4x8x8 matrix as we do, make these changes:
        #define MAX_DEVICES  4 
    
        void setup() {
  setup_serial();

  P.begin(2);
  P.setZone(0, 0, 2);
  P.setZone(1, 3, 3);
  • Save the sketch and then press CTRL + R to verify the sketch. If there are missing libraries, make sure to install them. And recompile the sketch.
  • If the sketch compiles successfully, press CTRL + U to upload it to your NodeMCU or D1 Mini MCU.
  • After the upload is finished, disconnect the MCU.

Step 3: Connect MAX7219 to MCU

  • Refer to the following diagram to connect the MAX7219 to the D1 Mini or ESP8266 board.
connect nodemcu to max7219 matrix display schematic
  • Make sure to connect the DuPont wires that come with the display correctly.

Step 4: Display Information on the Smart Clock

The smart clock is ready to display whatever text or sensor data you want to display on it via MQTT topics. You can use any MQTT client app to send JSON data for display on the smart clocks. To automate the clock, you can install and set up a Home Assistant server with an MQTT broker and NodeRed on a Raspberry Pi.

You can then use it to display various sensor information and status on the DIY smart clock. To learn more about the topic and animations you can use with the clock, refer to the project on GitHub.

Meanwhile, you can use the following NodeRed sample flow, import it into your NodeRed and edit it according to your sensors to display desired data.

        [{"id":"f342606a2cb01a7c","type":"mqtt out","z":"f1f7ad6a657d809a","g":"d0cb3ac3e49ba96d","name":"","topic":"wled/zone0_text","qos":"","retain":"","respTopic":"","contentType":"","userProps":"","correl":"","expiry":"","broker":"d4ab875e8280590a","x":1160,"y":840,"wires":[]},{"id":"d4ab875e8280590a","type":"mqtt-broker","name":"MQTT HA","broker":"192.168.0.171","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"my/pixelit/","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""}]
    
node red mqtt flow for smart diy clock

Integrate Your Home Assistant

MAX7219 is a popular matrix display that you can control through Arduino boards or ESP8266 WIFI-based microcontrollers, such as NodeMCU and D1 Mini, to display desired information or animations.

This DIY guide used a 4-in-1 MAX7219 matrix to build a smart clock. More than that, it can also be used as a notification panel to display information, such as room temperature, humidity, tank water level, energy usage, and any data or information received via MQTT topics.

If you have set up a Home Assistant or any other home automation server at your home, you may integrate this smart MQTT clock panel to fetch and display all the information received through various sensors and devices you may have installed in your home and integrated with Home Assistant.