ESP32 Project

Elektroclock

In this project, I build a DIY smart clock using an ESP32, a P4 RGB LED matrix display, Wi-Fi time synchronization, weather data, and a BH1750 light sensor for automatic brightness control.

The clock shows the current time, date, weather icon, and temperature. It refreshes the weather data once per hour, and switches to a dimmer night mode when the room is dark.

DIY Elektroclock with ESP32 and P4 RGB LED matrix display

1. Required Parts

For this project, I used the following parts:

ControllerESP32 development board

DisplayP4 RGB LED matrix display

Display wiringDisplay power cable and HUB75 ribbon cable or jumper wires

Prototype wiringBreadboard, jumper wires, and male pin headers

Light sensorBH1750 light sensor module

Power5 V power supply

OptionalCustom PCB

OptionalEnclosure

For the first prototype, the display can be connected with jumper wires. For the final version, I recommend using a PCB and the ribbon cable that comes with the LED matrix display. This makes the wiring much cleaner and more reliable.

2. Connect the LED Matrix Display

Start by flipping the P4 LED matrix display over so the input connector is visible. Connect the display input pins to the ESP32 according to your wiring diagram.

For the prototype, I used jumper wires and a breadboard. I recommend connecting all ground wires to one common ground rail first. This makes the wiring easier to check and ensures that the ESP32, LED matrix, and power supply share the same reference ground.

The display uses a HUB75 interface, so several signal wires are required for the RGB color channels, row selection, latch, output enable, and clock signal.

Wiring diagram for ESP32 and HUB75 P4 LED matrix connector

ESP32 to HUB75 LED matrix wiring concept.

3. Power the Display

The LED matrix display requires a stable 5 V supply. For very simple tests at low brightness, the display may work when powered from the ESP32 5 V pin, but this is not recommended for the final version.

Important: For reliable operation, use an external 5 V power supply with enough current capacity. The display ground and the ESP32 ground must be connected together.

4. Test the Display

Before adding Wi-Fi, weather data, or sensors, test the LED matrix display with a simple Arduino sketch. This confirms that the wiring, display library, and ESP32 pin configuration are working correctly.

The test can show a simple text or color pattern on the display. Once this works, the hardware connection is ready for the smart clock software.

RGB Matrix Test Code

This example sketch is used to test an ESP32 with a HUB75 RGB LED matrix panel. The program has two test modes. First, it cycles through 31 solid colors, changing the display color once per second. After that, it switches to a shape animation mode, where different geometric shapes are drawn on the matrix.

The pin numbers and panel resolution can be adjusted in the configuration section of the code to match your own wiring and LED matrix size.

RGB Matrix Test Code

/*
  ESP32 + HUB75 RGB Matrix:
  ——————————————-
  Test 1: cycles through 31 solid colors, changing once per second.
  Test 2: draws a different geometric shape every second.

  Wiring: update the pin numbers to match your panel/adapter.
*/

#include <Arduino.h>
#include <math.h>  // for sinf/cosf/fmodf
#include <ESP32-HUB75-MatrixPanel-I2S-DMA.h>  // main display library

/*——————— Pins (edit to match your wiring) ———————*/
#define R1_PIN 25
#define G1_PIN 26
#define B1_PIN 27
#define R2_PIN 14
#define G2_PIN 12
#define B2_PIN 13
#define A_PIN  23
#define B_PIN  19
#define C_PIN  5
#define D_PIN  17
#define E_PIN  -1
#define LAT_PIN 4
#define OE_PIN  15
#define CLK_PIN 16

/*——————— Panel configuration ———————————-*/
#define PANEL_RES_X 64
#define PANEL_RES_Y 32
#define PANEL_CHAIN  1

HUB75_I2S_CFG mxconfig(PANEL_RES_X, PANEL_RES_Y, PANEL_CHAIN);

/*——————— Globals ———————————————-*/
MatrixPanel_I2S_DMA *dma_display = nullptr;

static const uint8_t NUM_COLORS = 31;
uint16_t PALETTE[NUM_COLORS];

enum Mode : uint8_t { MODE_COLORS = 0, MODE_SHAPES = 1 };
Mode mode = MODE_COLORS;

uint32_t lastTick = 0;
uint8_t  stepIdx  = 0;
static const uint8_t STEPS_PER_MODE = NUM_COLORS;

/*——————— Small helpers —————————————-*/
static inline uint16_t rgb888_to_565(uint8_t r, uint8_t g, uint8_t b) {
  return ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
}

static void hsv_to_rgb(float h, float s, float v, uint8_t &r, uint8_t &g, uint8_t &b) {
  float c = v * s;
  float hh = fmodf(h, 360.0f) / 60.0f;
  float x = c * (1.0f – fabsf(fmodf(hh, 2.0f) – 1.0f));
  float m = v – c;

  float rf = 0, gf = 0, bf = 0;

  if      (0 <= hh && hh < 1) { rf = c; gf = x; bf = 0; }
  else if (1 <= hh && hh < 2) { rf = x; gf = c; bf = 0; }
  else if (2 <= hh && hh < 3) { rf = 0; gf = c; bf = x; }
  else if (3 <= hh && hh < 4) { rf = 0; gf = x; bf = c; }
  else if (4 <= hh && hh < 5) { rf = x; gf = 0; bf = c; }
  else                        { rf = c; gf = 0; bf = x; }

  r = (uint8_t)((rf + m) * 255.0f + 0.5f);
  g = (uint8_t)((gf + m) * 255.0f + 0.5f);
  b = (uint8_t)((bf + m) * 255.0f + 0.5f);
}

static void build_palette() {
  for (uint8_t i = 0; i < NUM_COLORS; i++) {
    float h = (360.0f / NUM_COLORS) * i;
    uint8_t r, g, b;
    hsv_to_rgb(h, 1.0f, 1.0f, r, g, b);
    PALETTE[i] = rgb888_to_565(r, g, b);
  }
}

static inline int W() { return dma_display->width(); }
static inline int H() { return dma_display->height(); }

static uint16_t randomColor() {
  return PALETTE[random(NUM_COLORS)];
}

/*——————— Shape animation ————————————–*/
static void draw_shape_step(uint8_t k) {
  dma_display->fillScreen(0);

  int w = W();
  int h = H();
  int mind = (w < h ? w : h);

  switch (k % 8) {
    case 0: {
      int rw = 16 + (k * 3) % (w - 16);
      int rh = 12 + (k * 5) % (h - 12);

      if (rw < 4) rw = 4;
      if (rh < 4) rh = 4;

      int x = (w - rw) / 2;
      int y = (h - rh) / 2;

      dma_display->drawRect(x, y, rw, rh, randomColor());
      break;
    }

    case 1: {
      int rw = 10 + (k * 4) % (w – 10);
      int rh = 10 + (k * 2) % (h – 10);

      rw = max(4, rw);
      rh = max(4, rh);

      int x = (k * 7) % max(1, (w – rw));
      int y = (k * 5) % max(1, (h – rh));

      dma_display->fillRect(x, y, rw, rh, randomColor());
      break;
    }

    case 2: {
      int r  = 6 + (k * 3) % max(6, (mind / 2 – 2));
      int cx = 8 + (k * 4) % max(1, (w – 16));
      int cy = 8 + (k * 6) % max(1, (h – 16));

      dma_display->drawCircle(cx, cy, r, randomColor());
      break;
    }

    case 3: {
      int r  = 6 + (k * 5) % max(6, (mind / 2 – 4));
      int cx = (w / 2) + ((int)k % 9) – 4;
      int cy = (h / 2) + ((int)k % 11) – 5;

      dma_display->fillCircle(cx, cy, r, randomColor());
      break;
    }

    case 4: {
      int x0 = (k * 7) % w;
      int y0 = (k * 3) % h;
      int x1 = (x0 + 20 + (k * 5) % 28) % w;
      int y1 = (y0 + 15 + (k * 4) % 25) % h;
      int x2 = (x0 + 10 + (k * 6) % 30) % w;
      int y2 = (y0 + 25 + (k * 2) % 20) % h;

      dma_display->drawTriangle(x0, y0, x1, y1, x2, y2, randomColor());
      break;
    }

    case 5: {
      int x0 = w / 2;
      int y0 = 6 + (k * 3) % max(6, (h – 12));
      int x1 = 4 + (k * 5) % max(6, (w – 8));
      int y1 = 4;
      int x2 = w – 5;
      int y2 = h – 5;

      dma_display->fillTriangle(x0, y0, x1, y1, x2, y2, randomColor());
      break;
    }

    case 6: {
      int rw = 18 + (k * 2) % max(18, (w – 4));
      int rh = 12 + (k * 3) % max(12, (h – 4));

      rw = min(rw, w – 2);
      rh = min(rh, h – 2);

      int x = (w – rw) / 2;
      int y = (h – rh) / 2;
      int rr = 4 + (k % 8);

      dma_display->drawRoundRect(x, y, rw, rh, rr, randomColor());
      break;
    }

    default: {
      int cx = w / 2;
      int cy = h / 2;
      int R  = (mind / 2) – 2;

      for (int i = 0; i < 8; i++) {
        float ang = (TWO_PI / 8.0f) * (i + k * 0.25f);
        int x = cx + (int)(R * cosf(ang));
        int y = cy + (int)(R * sinf(ang));

        dma_display->drawLine(cx, cy, x, y, PALETTE[(i + k) % NUM_COLORS]);
      }

      break;
    }
  }
}

/*——————— Arduino setup/loop ———————————–*/
void setup() {
  Serial.begin(115200);
  delay(150);

  mxconfig.gpio.r1 = R1_PIN;
  mxconfig.gpio.g1 = G1_PIN;
  mxconfig.gpio.b1 = B1_PIN;

  mxconfig.gpio.r2 = R2_PIN;
  mxconfig.gpio.g2 = G2_PIN;
  mxconfig.gpio.b2 = B2_PIN;

  mxconfig.gpio.a = A_PIN;
  mxconfig.gpio.b = B_PIN;
  mxconfig.gpio.c = C_PIN;
  mxconfig.gpio.d = D_PIN;
  mxconfig.gpio.e = E_PIN;

  mxconfig.gpio.lat = LAT_PIN;
  mxconfig.gpio.oe  = OE_PIN;
  mxconfig.gpio.clk = CLK_PIN;

  // mxconfig.driver = HUB75_I2S_CFG::FM6126A;

  dma_display = new MatrixPanel_I2S_DMA(mxconfig);
  dma_display->begin();

  dma_display->setBrightness8(140);
  dma_display->fillScreen(0);

  build_palette();
  randomSeed((uint32_t)micros());

  lastTick = millis();
  stepIdx  = 0;
  mode     = MODE_COLORS;
}

void loop() {
  uint32_t now = millis();

  if (now – lastTick >= 1000) {
    lastTick = now;

    if (mode == MODE_COLORS) {
      dma_display->fillScreen(PALETTE[stepIdx]);
      stepIdx++;

      if (stepIdx >= STEPS_PER_MODE) {
        stepIdx = 0;
        mode = MODE_SHAPES;
      }
    } else {
      draw_shape_step(stepIdx);
      stepIdx++;

      if (stepIdx >= STEPS_PER_MODE) {
        stepIdx = 0;
        mode = MODE_COLORS;
      }
    }
  }
}

How the code works

The sketch starts by defining the GPIO pins used to connect the ESP32 to the HUB75 RGB matrix panel. These pins must match your own wiring. The panel size is defined with PANEL_RES_X and PANEL_RES_Y. For a typical 64 × 32 matrix, the values are set to 64 and 32.

The function build_palette() creates 31 different colors. These colors are generated using HSV color values and then converted into RGB565 format, which is the color format used by the matrix display library.

In the main loop, the display changes once per second. In the first mode, the whole matrix is filled with one solid color. After all 31 colors have been shown, the program switches to the second mode, where it draws different shapes such as rectangles, circles, triangles, rounded rectangles, and starburst lines.

The loop is non-blocking because it uses millis() instead of delay(). This makes it easier to add other features later, such as buttons, sensors, Wi-Fi, or animations.

5. Designing the Clock Layout

After the display was working, I tested different layout ideas for the clock. The goal was to make the most important information easy to read, even from a distance.

The display can show several types of information:

Current time
Date
Temperature
Weather icon

Because the display resolution is limited, the layout has to be simple and clear. Large digits work best for the time, while smaller text can be used for weather or status information.

Clock layout with time, date, temperature, and weather icon.

6. Wi-Fi, Time, and Weather Data

The next step was to connect the ESP32 to Wi-Fi. Once connected, the ESP32 can synchronize the time and download weather data.

For the weather information, I used OpenWeatherMap. To use this service, an API key and a location are required. These values are entered in the code as placeholders.

ESP32 connects to Wi-Fi

NTP synchronizes the local time

OpenWeatherMap provides weather data

The LED matrix shows time, date, weather icon, and temperature

The final Elektroclock code downloads the time and weather data at startup. The weather information is then updated automatically every 60 minutes. This is enough for a clock project because weather data does not need to be refreshed every few seconds.

7. Automatic Brightness Control with BH1750

During testing, I noticed that the LED matrix was too bright in a dark room. To solve this, I added a BH1750 light sensor. This sensor measures the ambient light level and allows the ESP32 to adjust the display brightness automatically.

The BH1750 communicates via I2C, so only a few wires are required:

The brightness value can then be calculated from the measured light level. In a bright room, the display brightness increases. In a dark room, the brightness is reduced to make the clock more comfortable to look at.

BH1750 light sensor wiring for Elektroclock

BH1750 wiring for automatic brightness control.

8. Final Software Structure

The final ElektroClock software is split into several logical parts:

Main Loop The loop updates the display once per second. Weather data is refreshed approximately once per hour. This structure is important because the clock combines multiple functions: display control, Wi-Fi communication, online weather data, time handling, and sensor input.

Configuration This section contains the display pin mapping, matrix size, Wi-Fi settings, OpenWeatherMap settings, NTP server, and timezone information.

Wi-Fi Connection The ESP32 scans available networks, selects the correct access point, and connects to Wi-Fi.

Time Synchronization The clock uses NTP to get the current local time. The timezone is configured for Central European Time and daylight saving time.

Display Drawing Functions Custom helper functions draw bitmap icons, custom digits, the time, date, year, weather icon, and temperature.

Weather Update The ESP32 sends an HTTP request to OpenWeatherMap, reads the JSON response, extracts the weather ID and temperature, and selects the correct icon.

Brightness and Night Mode The BH1750 light sensor measures the room brightness. The code then adjusts the LED matrix brightness and switches to dimmer colors at night.

You can find the full project code below. Create a new Arduino IDE project and name it ElektroClock. Paste the code from ElektroClock.ino into the main Arduino sketch file. Then create two header files named smart_clock.h and custom_fonts.h. Copy and paste the corresponding code into each header file. After that, you can compile and upload the project using the Arduino IDE.

ElektroClock.ino

#include <Arduino.h>
#include <ESP32-HUB75-MatrixPanel-I2S-DMA.h>

#include <smart_clock.h>
#include <custom_fonts.h>

#include <WiFi.h>
#include <HTTPClient.h>
#include “time.h”

#include <BLEDevice.h>
#include <BLEUtils.h>
#include <BLEServer.h>

#include <string.h>
#include <ArduinoJson.h>

#include <Wire.h>
#include <BH1750.h>

// ———- I2C / Sensor ———-
TwoWire I2C_1 = TwoWire(0);
BH1750 lightMeter;

// BH1750
#define BH1750_I2CADDR 0x23
#define BH1750_POWER_DOWN 0x00
#define BH1750_POWER_ON 0x01
#define BH1750_RESET 0x07
#define BH1750_CONTINUOUS_HIGH_RES_MODE 0x10

// ———- RGB DISPLAY PINS ———-
#define R1_PIN 25
#define G1_PIN 26
#define B1_PIN 27
#define R2_PIN 14
#define G2_PIN 12
#define B2_PIN 13
#define A_PIN 23
#define B_PIN 19
#define C_PIN 5
#define D_PIN 17
#define E_PIN -1
#define LAT_PIN 4
#define OE_PIN 15
#define CLK_PIN 16

// ———- MATRIX CONFIG ———-
#define PANEL_RES_X 64
#define PANEL_RES_Y 32
#define PANEL_CHAIN 1

// ———- COLORS ———-
#define TFT_BLACK 0x0000
#define TFT_NAVY 0x000F
#define TFT_DARKGREEN 0x03E0
#define TFT_DARKCYAN 0x03EF
#define TFT_MAROON 0x7800
#define TFT_PURPLE 0x780F
#define TFT_OLIVE 0x7BE0
#define TFT_LIGHTGREY 0xD69A
#define TFT_DARKGREY 0x7BEF
#define TFT_BLUE 0x001F
#define TFT_GREEN 0x07E0
#define TFT_CYAN 0x07FF
#define TFT_RED 0xF800
#define TFT_MAGENTA 0xF81F
#define TFT_YELLOW 0xFFE0
#define TFT_WHITE 0xFFFF
#define TFT_ORANGE 0xFDA0
#define TFT_GREENYELLOW 0xB7E0
#define TFT_PINK 0xFE19
#define TFT_BROWN 0x9A60
#define TFT_GOLD 0xFEA0
#define TFT_SILVER 0xC618
#define TFT_SKYBLUE 0x867D
#define TFT_VIOLET 0x915C

MatrixPanel_I2S_DMA *dma_display = nullptr;
HUB75_I2S_CFG mxconfig(PANEL_RES_X, PANEL_RES_Y, PANEL_CHAIN);

// ———- Sprites/Positionen ———-
uint8_t spriteHeight = 7;
uint8_t spriteWidht  = 7;
uint8_t spriteScale  = 3;
uint16_t bitmap_offset_x  = 0;
uint16_t bitmap_offset_y  = 0;
uint16_t bitmap_offset_x2 = 24;
uint16_t bitmap_offset_y2 = 0;
uint8_t move_amount = 0;

// ———- WiFi / API ———-
const char *ssid = “wifi_name”;
const char *password = “Wifi_password”;

// OpenWeatherMap
const char *weatherApiKey = “open_weather_map_api_key”;
const char *weatherLocation = “Town,country”;

// ———- NTP ———-
const char *ntpServer = “pool.ntp.org”;
const char *TZ_INFO   = “CET-1CEST,M3.5.0/2,M10.5.0/3”;

// ———- Global Variables ———-
char timeString[6];
uint8_t dth = 0;

uint32_t weather_update_cnt = 0;
String payload;

int id = 800;
int temperature = 0;
bool weatherValid = false;

float lightVal = 0;

uint16_t color_xbm565      = TFT_CYAN;
uint16_t color_daymon      = TFT_BLUE;
uint16_t color_temperature = TFT_YELLOW;

// =====================================================
// DST / Time Helpers
// =====================================================

bool isSummertime() {
  struct tm t;
  if (!getLocalTime(&t)) return false;
  return (t.tm_isdst > 0);
}

const char* tzAbbrev() {
  static char buf[8];
  struct tm t;
  if (!getLocalTime(&t)) {
    buf[0] = 0;
    return buf;
  }

  strftime(buf, sizeof(buf), “%Z”, &t);
  return buf;
}

// =====================================================
// WiFi Helper Functions
// =====================================================

String authModeToText(wifi_auth_mode_t auth) {
  switch (auth) {
    case WIFI_AUTH_OPEN: return “OPEN”;
    case WIFI_AUTH_WEP: return “WEP”;
    case WIFI_AUTH_WPA_PSK: return “WPA”;
    case WIFI_AUTH_WPA2_PSK: return “WPA2”;
    case WIFI_AUTH_WPA_WPA2_PSK: return “WPA/WPA2”;
    case WIFI_AUTH_WPA2_ENTERPRISE: return “WPA2 Enterprise”;
    case WIFI_AUTH_WPA3_PSK: return “WPA3”;
    case WIFI_AUTH_WPA2_WPA3_PSK: return “WPA2/WPA3”;
    default: return “UNKNOWN”;
  }
}

String wifiStatusToText(wl_status_t status) {
  switch (status) {
    case WL_IDLE_STATUS: return “WL_IDLE_STATUS”;
    case WL_NO_SSID_AVAIL: return “WL_NO_SSID_AVAIL”;
    case WL_SCAN_COMPLETED: return “WL_SCAN_COMPLETED”;
    case WL_CONNECTED: return “WL_CONNECTED”;
    case WL_CONNECT_FAILED: return “WL_CONNECT_FAILED”;
    case WL_CONNECTION_LOST: return “WL_CONNECTION_LOST”;
    case WL_DISCONNECTED: return “WL_DISCONNECTED”;
    default: return “UNKNOWN”;
  }
}

bool connectWiFiLocked(uint32_t timeout_ms = 30000) {
  Serial.println();
  Serial.println(“Starting locked WiFi connection…”);
  Serial.print(“Target SSID: “);
  Serial.println(ssid);

  WiFi.mode(WIFI_STA);
  WiFi.setSleep(false);
  WiFi.persistent(false);

  WiFi.disconnect(true);
  delay(1000);

  Serial.println(“Scanning WiFi networks…”);

  int n = WiFi.scanNetworks(false, true);

  if (n <= 0) {
    Serial.println(“No WiFi networks found.”);
    return false;
  }

  int targetIndex = -1;
  int bestRSSI = -999;

  for (int i = 0; i < n; i++) {
    Serial.print(i);
    Serial.print(” | SSID: “);
    Serial.print(WiFi.SSID(i));
    Serial.print(” | RSSI: “);
    Serial.print(WiFi.RSSI(i));
    Serial.print(” dBm | CH: “);
    Serial.print(WiFi.channel(i));
    Serial.print(” | Auth: “);
    Serial.print(authModeToText(WiFi.encryptionType(i)));
    Serial.print(” | BSSID: “);
    Serial.println(WiFi.BSSIDstr(i));

    if (WiFi.SSID(i) == ssid && WiFi.RSSI(i) > bestRSSI) {
      targetIndex = i;
      bestRSSI = WiFi.RSSI(i);
    }
  }

  if (targetIndex < 0) {
    Serial.println();
    Serial.println(“Target SSID not found during scan.”);
    WiFi.scanDelete();
    return false;
  }

  int32_t targetChannel = WiFi.channel(targetIndex);

  uint8_t targetBSSID[6];
  memcpy(targetBSSID, WiFi.BSSID(targetIndex), 6);

  Serial.println();
  Serial.println(“Selected target access point:”);
  Serial.print(“SSID: “);
  Serial.println(WiFi.SSID(targetIndex));
  Serial.print(“Channel: “);
  Serial.println(targetChannel);
  Serial.print(“BSSID: “);
  Serial.println(WiFi.BSSIDstr(targetIndex));
  Serial.print(“RSSI: “);
  Serial.print(WiFi.RSSI(targetIndex));
  Serial.println(” dBm”);
  Serial.print(“Auth: “);
  Serial.println(authModeToText(WiFi.encryptionType(targetIndex)));

  WiFi.scanDelete();
  delay(500);

  Serial.println();
  Serial.println(“Connecting to locked BSSID/channel…”);

  WiFi.begin(ssid, password, targetChannel, targetBSSID, true);

  uint32_t startAttempt = millis();

  while (WiFi.status() != WL_CONNECTED && millis() – startAttempt < timeout_ms) {
    Serial.print(“.”);
    delay(500);
  }

  Serial.println();

  if (WiFi.status() == WL_CONNECTED) {
    Serial.println(“WiFi connected successfully.”);
    Serial.print(“IP address: “);
    Serial.println(WiFi.localIP());
    Serial.print(“Gateway: “);
    Serial.println(WiFi.gatewayIP());
    Serial.print(“DNS: “);
    Serial.println(WiFi.dnsIP());
    Serial.print(“RSSI: “);
    Serial.print(WiFi.RSSI());
    Serial.println(” dBm”);
    return true;
  }

  Serial.println(“WiFi connection failed.”);
  Serial.print(“Final WiFi status: “);
  Serial.println(wifiStatusToText(WiFi.status()));

  return false;
}

// =====================================================
// Display Helper Functions
// =====================================================

void drawXbm565(int x, int y, int width, int height, const char *xbm, uint16_t color = 0) {
  if (color == 0) color = color_xbm565;

  if (width % 8 != 0) {
    width = ((width / 8) + 1) * 8;
  }

  for (int i = 0; i < width * height / 8; i++) {
    unsigned char charColumn = pgm_read_byte(xbm + i);

    for (int j = 0; j < 8; j++) {
      int targetX = (i * 8 + j) % width + x;
      int targetY = (8 * i / width) + y;

      if (bitRead(charColumn, j)) {
        dma_display->drawPixel(targetX, targetY, color);
      }
    }
  }
}

void draw_digit(int x, int y, int width, int height, const char *xbm, uint16_t color = 0) {
  if (color == 0) color = color_xbm565;

  if (width % 8 != 0) {
    width = ((width / 8) + 1) * 8;
  }

  for (int i = 0; i < width * height / 8; i++) {
    unsigned char charColumn = pgm_read_byte(xbm + i);

    for (int j = 0; j < 8; j++) {
      int targetX = (i * 8 + j) % width + x;
      int targetY = (8 * i / width) + y;

      if (bitRead(charColumn, j)) {
        dma_display->drawPixel(targetX, targetY, color);
      }
    }
  }
}

// =====================================================
// Time Display
// =====================================================

void draw_time_clock() {
  struct tm timeinfo;

  if (!getLocalTime(&timeinfo)) {
    return;
  }

  strftime(timeString, sizeof(timeString), “%H:%M”, &timeinfo);

  uint8_t hour   = atoi(timeString);
  uint8_t minute = atoi(timeString + 3);

  dth = hour;

  int digith[2] = {0, 0};
  int digitm[2] = {0, 0};

  uint8_t cnt_h = 0;
  uint8_t cnt_m = 0;

  if (hour == 0) {
    digith[0] = 0;
    digith[1] = 0;
  }

  while (hour > 0) {
    digith[cnt_h++] = hour % 10;
    hour /= 10;
  }

  if (minute == 0) {
    digitm[0] = 0;
    digitm[1] = 0;
  }

  while (minute > 0) {
    digitm[cnt_m++] = minute % 10;
    minute /= 10;
  }

  if (digith[1] == 0) draw_digit(24, 0, 8, 12, zero);
  if (digith[1] == 1) draw_digit(24, 0, 8, 12, one);
  if (digith[1] == 2) draw_digit(24, 0, 8, 12, two);
  if (digith[1] == 3) draw_digit(24, 0, 8, 12, three);
  if (digith[1] == 4) draw_digit(24, 0, 8, 12, four);
  if (digith[1] == 5) draw_digit(24, 0, 8, 12, five);
  if (digith[1] == 6) draw_digit(24, 0, 8, 12, six);
  if (digith[1] == 7) draw_digit(24, 0, 8, 12, seven);
  if (digith[1] == 8) draw_digit(24, 0, 8, 12, eight);
  if (digith[1] == 9) draw_digit(24, 0, 8, 12, nine);

  if (digith[0] == 0) draw_digit(32, 0, 8, 12, zero);
  if (digith[0] == 1) draw_digit(32, 0, 8, 12, one);
  if (digith[0] == 2) draw_digit(32, 0, 8, 12, two);
  if (digith[0] == 3) draw_digit(32, 0, 8, 12, three);
  if (digith[0] == 4) draw_digit(32, 0, 8, 12, four);
  if (digith[0] == 5) draw_digit(32, 0, 8, 12, five);
  if (digith[0] == 6) draw_digit(32, 0, 8, 12, six);
  if (digith[0] == 7) draw_digit(32, 0, 8, 12, seven);
  if (digith[0] == 8) draw_digit(32, 0, 8, 12, eight);
  if (digith[0] == 9) draw_digit(32, 0, 8, 12, nine);

  draw_digit(40, 0, 8, 12, colon);

  if (digitm[1] == 0) draw_digit(48, 0, 8, 12, zero);
  if (digitm[1] == 1) draw_digit(48, 0, 8, 12, one);
  if (digitm[1] == 2) draw_digit(48, 0, 8, 12, two);
  if (digitm[1] == 3) draw_digit(48, 0, 8, 12, three);
  if (digitm[1] == 4) draw_digit(48, 0, 8, 12, four);
  if (digitm[1] == 5) draw_digit(48, 0, 8, 12, five);
  if (digitm[1] == 6) draw_digit(48, 0, 8, 12, six);
  if (digitm[1] == 7) draw_digit(48, 0, 8, 12, seven);
  if (digitm[1] == 8) draw_digit(48, 0, 8, 12, eight);
  if (digitm[1] == 9) draw_digit(48, 0, 8, 12, nine);

  if (digitm[0] == 0) draw_digit(56, 0, 8, 12, zero);
  if (digitm[0] == 1) draw_digit(56, 0, 8, 12, one);
  if (digitm[0] == 2) draw_digit(56, 0, 8, 12, two);
  if (digitm[0] == 3) draw_digit(56, 0, 8, 12, three);
  if (digitm[0] == 4) draw_digit(56, 0, 8, 12, four);
  if (digitm[0] == 5) draw_digit(56, 0, 8, 12, five);
  if (digitm[0] == 6) draw_digit(56, 0, 8, 12, six);
  if (digitm[0] == 7) draw_digit(56, 0, 8, 12, seven);
  if (digitm[0] == 8) draw_digit(56, 0, 8, 12, eight);
  if (digitm[0] == 9) draw_digit(56, 0, 8, 12, nine);
}

void draw_time_daymon() {
  dma_display->setTextSize(1);
  dma_display->setTextWrap(false);
  dma_display->setCursor(32, 13);
  dma_display->setTextColor(color_daymon);

  struct tm timeinfo;

  if (!getLocalTime(&timeinfo)) {
    return;
  }

  dma_display->println(&timeinfo, “%d %m %Y”);
}

void draw_time_year() {
  dma_display->setTextSize(1);
  dma_display->setTextWrap(false);
  dma_display->setCursor(36, 21);
  dma_display->setTextColor(color_daymon);

  struct tm timeinfo;

  if (!getLocalTime(&timeinfo)) {
    return;
  }

  dma_display->println(&timeinfo, “%Y”);
}

// =====================================================
// Weather
// =====================================================

String makeWeatherUrl() {
  String url = “http://api.openweathermap.org/data/2.5/weather?q=”;
  url += weatherLocation;
  url += “&APPID=”;
  url += weatherApiKey;
  return url;
}

bool fetchWeatherData() {
  if (WiFi.status() != WL_CONNECTED) {
    Serial.println(“WiFi disconnected before weather update. Reconnecting…”);

    if (!connectWiFiLocked()) {
      Serial.println(“Reconnect failed. Skipping weather update.”);
      return false;
    }
  }

  String url = makeWeatherUrl();

  HTTPClient http;
  http.begin(url);

  int httpCode = http.GET();

  if (httpCode <= 0) {
    Serial.print(“Error in HTTP request. Code: “);
    Serial.println(httpCode);
    http.end();
    return false;
  }

  payload = http.getString();

  Serial.println(“Weather data:”);
  Serial.println(payload);

  http.end();

  StaticJsonDocument<1024> doc;
  DeserializationError error = deserializeJson(doc, payload);

  if (error) {
    Serial.print(“Error parsing JSON data: “);
    Serial.println(error.c_str());
    return false;
  }

  float tempKelvin = doc[“main”][“temp”] | 273.15;
  temperature = (int)(tempKelvin – 273.15 + 0.5);

  id = doc[“weather”][0][“id”] | 800;

  weatherValid = true;

  Serial.print(“Weather ID: “);
  Serial.println(id);
  Serial.print(“Temperature: “);
  Serial.print(temperature);
  Serial.println(” C”);

  return true;
}

void draw_weather() {
  if (!weatherValid) {
    return;
  }

  if ((id >= 200) && (id <= 299)) {
    drawXbm565(1, 1, 16, 16, thunder_bits);
  }

  if ((id >= 300) && (id <= 599)) {
    drawXbm565(1, 1, 16, 16, rain_bits);
  }

  if ((id >= 600) && (id <= 699)) {
    drawXbm565(1, 1, 16, 16, snow_bits);
  }

  if ((id >= 700) && (id <= 799)) {
    drawXbm565(1, 1, 16, 16, mist_bits);
  }

  if ((id >= 801) && (id <= 899)) {
    drawXbm565(1, 1, 16, 16, clouds_bits);
  }

  if ((id == 800) && (dth < 20) && (dth >= 5)) {
    drawXbm565(1, 1, 16, 16, sun_bits);
  }

  if ((id == 800) && ((dth >= 20) || (dth < 5))) {
    drawXbm565(1, 1, 16, 16, moon_bits);
  }

  dma_display->setTextSize(1);
  dma_display->setTextWrap(false);
  dma_display->setCursor(4, 21);
  dma_display->setTextColor(color_temperature);
  dma_display->println(temperature);

  dma_display->setCursor(17, 21);
  dma_display->println(“C”);
}

void get_weather() {
  if (weather_update_cnt == 0) {
    fetchWeatherData();
  }

  draw_weather();

  weather_update_cnt++;

  if (weather_update_cnt >= 3600) {
    weather_update_cnt = 0;
  }
}

// =====================================================
// Brightness / Color
// =====================================================

void set_colour() {
  uint8_t brightness = 90;

  if (lightVal < 100) {
    brightness = 15;
  } else if (lightVal < 200) {
    brightness = 25;
  } else if (lightVal < 300) {
    brightness = 35;
  } else if (lightVal < 400) {
    brightness = 50;
  } else if (lightVal < 500) {
    brightness = 70;
  } else {
    brightness = 90;
  }

  dma_display->setBrightness8(brightness);

  if ((dth < 20) && (dth >= 8)) {
    color_xbm565      = TFT_CYAN;
    color_daymon      = TFT_BLUE;
    color_temperature = TFT_YELLOW;
  } else {
    uint16_t dim = dma_display->color565(0, 25, 50);

    color_xbm565      = dim;
    color_daymon      = dim;
    color_temperature = dim;
  }

  Serial.printf(“Mode: %s | Brightness: %d | DST: %s (%s)\n”,
                (dth < 20 && dth >= 5) ? “DAY” : “NIGHT”,
                brightness,
                isSummertime() ? “Summertime” : “Wintertime”,
                tzAbbrev());
}

// =====================================================
// SETUP
// =====================================================

void setup() {
  Serial.begin(115200);
  delay(1000);

  Serial.println();
  Serial.println(“Smart Clock starting…”);
  Serial.println(“=======================”);

  // WiFi first, using scan + locked BSSID/channel
  bool wifiOK = connectWiFiLocked();

  // BH1750
  I2C_1.begin(21, 22);

  if (!lightMeter.begin(BH1750::CONTINUOUS_HIGH_RES_MODE, 0x23, &I2C_1)) {
    Serial.println(“Error initializing BH1750”);
  } else {
    Serial.println(“BH1750 initialized”);
  }

  // Display
  Serial.println(“…Starting Display”);

  dma_display = new MatrixPanel_I2S_DMA(mxconfig);
  dma_display->begin();
  dma_display->setBrightness8(50);
  dma_display->fillScreen(TFT_BLACK);

  if (!wifiOK) {
    Serial.println(“WiFi failed. Clock will continue, but NTP and weather will not work.”);
    return;
  }

  // NTP
  Serial.println(“Starting NTP time sync…”);

  configTzTime(TZ_INFO, ntpServer, “time.google.com”, “time.cloudflare.com”);

  struct tm timeinfo;
  uint32_t ntpStart = millis();

  while (!getLocalTime(&timeinfo) && millis() – ntpStart < 20000) {
    Serial.println(“Waiting for time…”);
    delay(500);
  }

  if (getLocalTime(&timeinfo)) {
    Serial.printf(“Time synced: %02d:%02d  %s  (%s)\n”,
                  timeinfo.tm_hour,
                  timeinfo.tm_min,
                  isSummertime() ? “Summertime” : “Wintertime”,
                  tzAbbrev());
  } else {
    Serial.println(“NTP time sync failed.”);
  }

  // Initial weather request
  fetchWeatherData();
}

// =====================================================
// LOOP
// =====================================================

void loop() {
  lightVal = lightMeter.readLightLevel();

  Serial.print(“Light value: “);
  Serial.println(lightVal);

  dma_display->fillScreen(TFT_BLACK);

  draw_time_clock();
  set_colour();

  draw_time_daymon();
  draw_time_year();

  get_weather();

  delay(1000);
}

smart_clock.h

#pragma
/*smart_clock.h
used to create all Datastructures and save the BitmapIcons
*/

/*———WEATHER BITMAPS——–*/           
#define small_widht 16
#define small_height 16
/*SUN*/
static char sun_bits[] = {
0x00,0x00,0x00,0x01,0x00,0x01,0x08,0x21,0x10,0x11,0xa0,0x0b,
 0x40,0x04,0x20,0x08,0x3e,0xf8,0x20,0x08,0x40,0x04,0xa0,0x0b,
 0x10,0x11,0x08,0x21,0x00,0x01,0x00,0x01,};
/*MOON*/
static char moon_bits[] = {
 0x00,0x00,0x80,0x00,0x60,0x00,0x50,0x00,0x68,0x00,0x2c,0x00,
 0x24,0x00,0x44,0x00,0x44,0x00,0x84,0x41,0x0c,0x7f,0x08,0x20,
 0x10,0x10,0x60,0x0e,0x80,0x03,0x00,0x00,};

/*CLOUDS*/
static char clouds_bits[] = {
0x00,0x1c,0x00,0x36,0x00,0x63,0xc0,0x81,0x20,0x80,0x20,0x40,
 0xc0,0x3f,0x00,0x00,0xe0,0x00,0xb0,0x01,0x18,0x07,0x0e,0x08,
 0x01,0x08,0x01,0x04,0xfe,0x03,0x00,0x00,};

/*RAIN*/
static char rain_bits[] = {
 0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xc0,0x03,0x60,0x06,
 0x30,0x1c,0x18,0x30,0x04,0x20,0x02,0x20,0xa2,0x2a,0xd6,0x37,
 0x5c,0x1d,0xa8,0x04,0xa8,0x04,0x88,0x00,};

/*SNOW*/
static char snow_bits[] = {
 0x00,0x00,0xc0,0x03,0x60,0x06,0x30,0x1c,0x18,0x30,0x04,0x20,
 0x02,0x20,0x02,0x20,0x06,0x30,0xfc,0x1f,0x00,0x00,0x08,0x02,
 0x14,0x05,0x48,0x12,0xa0,0x28,0x40,0x10,};

/*Thunder*/
static char thunder_bits[] = {
 0x00,0x00,0x00,0x00,0xc0,0x03,0x60,0x06,0x30,0x1c,0x18,0x30,
 0x04,0x20,0x82,0x20,0x82,0x20,0x46,0x30,0xdc,0x1b,0x00,0x03,
 0x80,0x01,0xc0,0x00,0x40,0x00,0x00,0x00,};

/*MIST*/
static char mist_bits[] = {
0x00,0x00,0xf0,0x0f,0x00,0x00,0xfc,0x1f,0x00,0x00,0xf8,0x3f,
0x00,0x00,0xfe,0x1f,0x00,0x00,0xf8,0x3f,0x00,0x00,0xfc,0x1f,
0x00,0x00,0xf0,0x0f,0x00,0x00,0x00,0x00,};

/*——–MATRIX COLORS——–*/
#define MTX_BLACK       0x0000      /*   0,   0,   0 */
#define MTX_NAVY        0x000F      /*   0,   0, 128 */
#define MTX_DARKGREEN   0x03E0      /*   0, 128,   0 */
#define MTX_DARKCYAN    0x03EF      /*   0, 128, 128 */
#define MTX_MAROON      0x7800      /* 128,   0,   0 */
#define MTX_PURPLE      0x780F      /* 128,   0, 128 */
#define MTX_OLIVE       0x7BE0      /* 128, 128,   0 */
#define MTX_LIGHTGREY   0xD69A      /* 211, 211, 211 */
#define MTX_DARKGREY    0x7BEF      /* 128, 128, 128 */
#define MTX_BLUE        0x001F      /*   0,   0, 255 */
#define MTX_GREEN       0x07E0      /*   0, 255,   0 */
#define MTX_CYAN        0x07FF      /*   0, 255, 255 */
#define MTX_RED         0xF800      /* 255,   0,   0 */
#define MTX_MAGENTA     0xF81F      /* 255,   0, 255 */
#define MTX_YELLOW      0xFFE0      /* 255, 255,   0 */
#define MTX_WHITE       0xFFFF      /* 255, 255, 255 */
#define MTX_ORANGE      0xFDA0      /* 255, 180,   0 */
#define MTX_GREENYELLOW 0xB7E0      /* 180, 255,   0 */
#define MTX_PINK        0xFE19      /* 255, 192, 203 */ //Lighter pink, was 0xFC9F
#define MTX_BROWN       0x9A60      /* 150,  75,   0 */
#define MTX_GOLD        0xFEA0      /* 255, 215,   0 */
#define MTX_SILVER      0xC618      /* 192, 192, 192 */
#define MTX_SKYBLUE     0x867D      /* 135, 206, 235 */
#define MTX_VIOLET      0x915C      /* 180,  46, 226 */

//Day Mode
uint16_t COLOR_TIME    =  0x07FF;//BLE Bitmask 0x1
uint16_t COLOR_DATE    =  0x03EF;//BLE Bitmask 0x2
uint16_t COLOR_BITMAP  =  0xFFFF;//BLE Bitmask 0x4
uint16_t COLOR_TEMP    =  0xFFE0;//BLE Bitmask 0x8
//Night Mode
uint16_t NIGHT_COLOR   =  0x5000;

#pragma

custom_fonts.h

#pragma
/*Custom Fonts BitMaps*/

#define number_width 8
#define number_height 12

/*0 8px x 12px*/
static char zero[] = {0x7E,0x7E,0x66,0x66,0x66,0x66,0x66,0x66,0x66,0x66,0x7E,0x7E,};

/*1 8px x 12px*/
static char one[] = {0x70,0x78,0x7C,0x6E,0x66,0x60,0x60,0x60,0x60,0x60,0x60,0x60,};

/*2 8px x 12px*/
static char two[] = {0x3C,0x7E,0x66,0x66,0x60,0x70,0x38,0x1C,0x0E,0x06,0x7E,0x7E,};

/*3 8px x 12px*/
static char three[] = {0x3E,0x7E,0x70,0x60,0x70,0x3E,0x3E,0x70,0x60,0x70,0x7E,0x3E,};
    
/*4 8px x 12px*/
static char four[] = {0x30,0x38,0x3C,0x36,0x33,0x31,0x7F,0x7F,0x30,0x30,0x30,0x30,};

/*5 8px x 12px*/
static char five[] = {0x7E,0x7E,0x06,0x06,0x06,0x3E,0x7C,0x60,0x60,0x66,0x7E,0x3C,};

/*6 8px x 12px*/
static char six[] = {0x7E,0x7E,0x06,0x06,0x06,0x7E,0x7E,0x66,0x66,0x66,0x7E,0x7E,};

/*7 8px x 12px*/
static char seven[] = {0x7F,0x7F,0x60,0x60,0x70,0x38,0x1C,0x0E,0x06,0x07,0x03,0x03,};


/*8 8px x 12px*/
static char eight[] = {0x3C,0x7E,0x66,0x66,0x66,0x7E,0x7E,0x66,0x66,0x66,0x7E,0x3C,};


/*9 8px x 12px*/
static char nine[] = {0x7E,0x7E,0x66,0x66,0x66,0x7E,0x7E,0x60,0x60,0x66,0x7E,0x7E,};

/*: 4px x 12px*/
#define colon_with 8
#define colon_height 12
static char colon[] = {0x00,0x00,0x00,0x18,0x18,0x00,0x00,0x18,0x18,0x00,0x00,0x00,};

#pragma

Full Code Explanation

Basic Configuration

At the beginning of the code, the required libraries are included. The project uses the HUB75 matrix library for the LED display, Wi-Fi and HTTP libraries for online data, ArduinoJson for parsing the weather response, and the BH1750 library for the light sensor.

#include <Arduino.h>
#include <ESP32-HUB75-MatrixPanel-I2S-DMA.h>

#include <smart_clock.h>
#include <custom_fonts.h>

#include <WiFi.h>
#include <HTTPClient.h>
#include “time.h”

#include <ArduinoJson.h>

#include <Wire.h>
#include <BH1750.h>

The display pins are defined according to the wiring between the ESP32 and the P4 LED matrix display. These pin numbers must match your own wiring.

// ———- RGB DISPLAY PINS ———-
#define R1_PIN 25
#define G1_PIN 26
#define B1_PIN 27

#define R2_PIN 14
#define G2_PIN 12
#define B2_PIN 13

#define A_PIN 23
#define B_PIN 19
#define C_PIN 5
#define D_PIN 17
#define E_PIN -1

#define LAT_PIN 4
#define OE_PIN 15
#define CLK_PIN 16

The display size is also defined in the code. In this project, a 64 × 32 pixel LED matrix panel is used.

// ———- MATRIX CONFIG ———-
#define PANEL_RES_X 64
#define PANEL_RES_Y 32
#define PANEL_CHAIN 1

MatrixPanel_I2S_DMA *dma_display = nullptr;
HUB75_I2S_CFG mxconfig(PANEL_RES_X, PANEL_RES_Y, PANEL_CHAIN);

Wi-Fi, Time, and Weather Settings

The smart clock needs Wi-Fi access to synchronize the time and download weather data. For the website version of the code, the Wi-Fi credentials and API key should always be shown as placeholders.

// ———- Wi-Fi ———-
const char *ssid = “YOUR_WIFI_NAME”;
const char *password = “YOUR_WIFI_PASSWORD”;

// ———- OpenWeatherMap ———-
const char *weatherApiKey = “YOUR_OPENWEATHERMAP_API_KEY”;
const char *weatherLocation = “YOUR_CITY,COUNTRY_CODE”;

// ———- NTP / Timezone ———-
const char *ntpServer = “pool.ntp.org”;
const char *TZ_INFO = “CET-1CEST,M3.5.0/2,M10.5.0/3”;

The timezone string is configured for Switzerland and other Central European regions. It automatically handles the switch between winter time and summertime.

What smart_clock.h Does

The file smart_clock.h stores the small weather icon bitmaps and the matrix color definitions. Keeping these icons in a separate header file makes the main ElektroClock.ino file easier to read. Instead of placing long bitmap arrays directly inside the main program, the main sketch only includes the file with #include <smart_clock.h> and can then use the icon names directly.

In this project, the weather icons are stored as 16 × 16 pixel bitmap arrays. Each icon is saved as hexadecimal values. The code later reads these values bit by bit and draws the active pixels on the LED matrix. Examples are sun_bits, moon_bits, clouds_bits, rain_bits, snow_bits, thunder_bits, and mist_bits.

The same file also stores color constants in RGB565 format. RGB565 is a compact 16-bit color format that is commonly used for small displays and LED matrix projects. The file also contains day and night color variables, for example for the time, date, bitmap icons, and temperature.

#pragma

/*
  smart_clock.h
  Used to store weather bitmap icons and matrix color values.
*/

/*——— WEATHER BITMAPS ——–*/
#define small_widht 16
#define small_height 16

/* SUN */
static char sun_bits[] = {
  0x00,0x00,0x00,0x01,0x00,0x01,0x08,0x21,
  0x10,0x11,0xa0,0x0b,0x40,0x04,0x20,0x08,
  0x3e,0xf8,0x20,0x08,0x40,0x04,0xa0,0x0b,
  0x10,0x11,0x08,0x21,0x00,0x01,0x00,0x01,
};

/* MOON */
static char moon_bits[] = {
  0x00,0x00,0x80,0x00,0x60,0x00,0x50,0x00,
  0x68,0x00,0x2c,0x00,0x24,0x00,0x44,0x00,
  0x44,0x00,0x84,0x41,0x0c,0x7f,0x08,0x20,
  0x10,0x10,0x60,0x0e,0x80,0x03,0x00,0x00,
};

/* CLOUDS */
static char clouds_bits[] = {
  0x00,0x1c,0x00,0x36,0x00,0x63,0xc0,0x81,
  0x20,0x80,0x20,0x40,0xc0,0x3f,0x00,0x00,
  0xe0,0x00,0xb0,0x01,0x18,0x07,0x0e,0x08,
  0x01,0x08,0x01,0x04,0xfe,0x03,0x00,0x00,
};

/*——— MATRIX COLORS ——–*/
#define MTX_BLACK  0x0000
#define MTX_BLUE   0x001F
#define MTX_CYAN   0x07FF
#define MTX_YELLOW 0xFFE0
#define MTX_WHITE  0xFFFF

uint16_t COLOR_TIME   = 0x07FF;
uint16_t COLOR_DATE   = 0x03EF;
uint16_t COLOR_BITMAP = 0xFFFF;
uint16_t COLOR_TEMP   = 0xFFE0;

uint16_t NIGHT_COLOR  = 0x5000;

#pragma

What custom_fonts.h Does

The file custom_fonts.h stores the custom number font used for the clock display. Instead of using a standard text font, every digit from 0 to 9 is saved as a small bitmap. This gives full control over the shape, width, and readability of the numbers on the 64 × 32 LED matrix.

Each number is 8 pixels wide and 12 pixels high. The file also contains a custom colon bitmap for the time separator. The main sketch can then draw the time by selecting the correct digit array and passing it to the drawing function.

This approach is useful because normal fonts can look too small, too thin, or badly aligned on low-resolution LED matrix displays. With custom bitmaps, the clock digits can be designed exactly for the available pixel grid.

#pragma

/*
  custom_fonts.h
  Custom digit bitmaps for the smart clock.
*/

#define number_width 8
#define number_height 12

/* 0 – 8px x 12px */
static char zero[] = {
  0x7E,0x7E,0x66,0x66,0x66,0x66,
  0x66,0x66,0x66,0x66,0x7E,0x7E,
};

/* 1 – 8px x 12px */
static char one[] = {
  0x70,0x78,0x7C,0x6E,0x66,0x60,
  0x60,0x60,0x60,0x60,0x60,0x60,
};

/* 2 – 8px x 12px */
static char two[] = {
  0x3C,0x7E,0x66,0x66,0x60,0x70,
  0x38,0x1C,0x0E,0x06,0x7E,0x7E,
};

/* 3 – 8px x 12px */
static char three[] = {
  0x3E,0x7E,0x70,0x60,0x70,0x3E,
  0x3E,0x70,0x60,0x70,0x7E,0x3E,
};

/* Colon – 8px x 12px */
#define colon_with 8
#define colon_height 12

static char colon[] = {
  0x00,0x00,0x00,0x18,0x18,0x00,
  0x00,0x18,0x18,0x00,0x00,0x00,
};

#pragma

Drawing Custom Bitmaps

The ElektroClock uses small bitmap arrays for the weather icons and the custom number font. The weather icons are stored in smart_clock.h, while the number digits and colon are stored in custom_fonts.h. The weather icons are 16 × 16 pixel bitmaps, and the custom digits are 8 × 12 pixel bitmaps.

A bitmap is a compact way of saving a small image in code. Each bit represents one pixel. If the bit is 1, the pixel is drawn. If the bit is 0, the pixel stays transparent. This makes it possible to store simple icons such as sun, moon, clouds, rain, snow, thunder, mist, and custom number shapes directly in the program memory.

The function drawXbm565() reads the bitmap data byte by byte. Each byte contains eight pixels. The code checks every bit, calculates the correct display position, and draws a pixel only when the bit is active.

void drawXbm565(int x, int y, int width, int height, const char *xbm, uint16_t color = 0) {
  if (color == 0) color = color_xbm565;

  if (width % 8 != 0) {
    width = ((width / 8) + 1) * 8;
  }

  for (int i = 0; i < width * height / 8; i++) {
    unsigned char charColumn = pgm_read_byte(xbm + i);

    for (int j = 0; j < 8; j++) {
      int targetX = (i * 8 + j) % width + x;
      int targetY = (8 * i / width) + y;

      if (bitRead(charColumn, j)) {
        dma_display->drawPixel(targetX, targetY, color);
      }
    }
  }
}

For example, a weather icon can be drawn like this:

drawXbm565(1, 1, 16, 16, sun_bits);

This draws the sun icon at position x = 1, y = 1 with a size of 16 × 16 pixels.

Drawing the Time with Custom Digits

Instead of using a standard text font for the time, the clock uses custom digit bitmaps. This gives better control over the look of the time display and makes the digits easier to read on the LED matrix.

The time is first read from the ESP32 local time. Then the hour and minute values are split into individual digits. Each digit is drawn with the draw_digit() function.

void draw_digit(int x, int y, int width, int height, const char *xbm, uint16_t color = 0) {
  if (color == 0) color = color_xbm565;

  if (width % 8 != 0) {
    width = ((width / 8) + 1) * 8;
  }

  for (int i = 0; i < width * height / 8; i++) {
    unsigned char charColumn = pgm_read_byte(xbm + i);

    for (int j = 0; j < 8; j++) {
      int targetX = (i * 8 + j) % width + x;
      int targetY = (8 * i / width) + y;

      if (bitRead(charColumn, j)) {
        dma_display->drawPixel(targetX, targetY, color);
      }
    }
  }
}

The digits are placed on the right side of the display. The weather icon and temperature are shown on the left side.

// Example positions for the clock digits
draw_digit(24, 0, 8, 12, zero);
draw_digit(32, 0, 8, 12, one);
draw_digit(40, 0, 8, 12, colon);
draw_digit(48, 0, 8, 12, three);
draw_digit(56, 0, 8, 12, five);

Weather Data and Icon Selection

The weather data is downloaded from OpenWeatherMap. The code creates a request URL using the selected location and API key. The response is returned as JSON data.

String makeWeatherUrl() {
  String url = “http://api.openweathermap.org/data/2.5/weather?q=”;
  url += weatherLocation;
  url += “&APPID=”;
  url += weatherApiKey;
  return url;
}

After the HTTP request, the JSON response is parsed. The temperature is converted from Kelvin to Celsius, and the weather ID is saved. This ID is later used to choose the correct weather icon.

float tempKelvin = doc[“main”][“temp”] | 273.15;
temperature = (int)(tempKelvin – 273.15 + 0.5);

id = doc[“weather”][0][“id”] | 800;
weatherValid = true;

The icon is selected based on the OpenWeatherMap weather ID. For example, thunderstorm IDs are in the 200 range, rain IDs are between 300 and 599, and clear sky uses ID 800.

void draw_weather() {
  if (!weatherValid) {
    return;
  }

  if ((id >= 200) && (id <= 299)) {
    drawXbm565(1, 1, 16, 16, thunder_bits);
  }

  if ((id >= 300) && (id <= 599)) {
    drawXbm565(1, 1, 16, 16, rain_bits);
  }

  if ((id >= 600) && (id <= 699)) {
    drawXbm565(1, 1, 16, 16, snow_bits);
  }

  if ((id >= 700) && (id <= 799)) {
    drawXbm565(1, 1, 16, 16, mist_bits);
  }

  if ((id >= 801) && (id <= 899)) {
    drawXbm565(1, 1, 16, 16, clouds_bits);
  }

  if ((id == 800) && (dth < 20) && (dth >= 5)) {
    drawXbm565(1, 1, 16, 16, sun_bits);
  }

  if ((id == 800) && ((dth >= 20) || (dth < 5))) {
    drawXbm565(1, 1, 16, 16, moon_bits);
  }
}

The weather update does not run every second. Instead, the code uses a counter. When the counter reaches 3600, it is reset and new weather data is downloaded.

void get_weather() {
  if (weather_update_cnt == 0) {
    fetchWeatherData();
  }

  draw_weather();

  weather_update_cnt++;

  if (weather_update_cnt >= 3600) {
    weather_update_cnt = 0;
  }
}

Automatic Brightness and Night Mode

During testing, I noticed that the LED matrix can be too bright in a dark room. To solve this, I added a BH1750 light sensor. The sensor measures the ambient light level in lux. The code then chooses a suitable brightness level for the display.

void set_colour() {
  uint8_t brightness = 90;

  if (lightVal < 100) {
    brightness = 15;
  } else if (lightVal < 200) {
    brightness = 25;
  } else if (lightVal < 300) {
    brightness = 35;
  } else if (lightVal < 400) {
    brightness = 50;
  } else if (lightVal < 500) {
    brightness = 70;
  } else {
    brightness = 90;
  }

  dma_display->setBrightness8(brightness);
}

The code also changes the display colors depending on the time of day. During the day, the clock uses brighter colors. At night, it switches to a dim blue color so the display is less distracting.

if ((dth < 20) && (dth >= 8)) {
  color_xbm565      = TFT_CYAN;
  color_daymon      = TFT_BLUE;
  color_temperature = TFT_YELLOW;
} else {
  uint16_t dim = dma_display->color565(0, 25, 50);

  color_xbm565      = dim;
  color_daymon      = dim;
  color_temperature = dim;
}

Main Setup Function

The setup() function prepares all hardware and online services. First, the serial monitor is started for debugging. Then the ESP32 connects to Wi-Fi, initializes the BH1750 sensor, starts the display, synchronizes the time over NTP, and performs the first weather request.

void setup() {
  Serial.begin(115200);
  delay(1000);

  bool wifiOK = connectWiFiLocked();

  I2C_1.begin(21, 22);

  if (!lightMeter.begin(BH1750::CONTINUOUS_HIGH_RES_MODE, 0x23, &I2C_1)) {
    Serial.println(“Error initializing BH1750”);
  } else {
    Serial.println(“BH1750 initialized”);
  }

  dma_display = new MatrixPanel_I2S_DMA(mxconfig);
  dma_display->begin();
  dma_display->setBrightness8(50);
  dma_display->fillScreen(TFT_BLACK);

  if (!wifiOK) {
    Serial.println(“WiFi failed. Clock will continue, but NTP and weather will not work.”);
    return;
  }

  configTzTime(TZ_INFO, ntpServer, “time.google.com”, “time.cloudflare.com”);

  fetchWeatherData();
}

Main Loop

The main loop runs continuously. Every second, the ESP32 reads the light level, clears the display, draws the time, updates the brightness and color mode, draws the date and year, and displays the weather information.

void loop() {
  lightVal = lightMeter.readLightLevel();

  dma_display->fillScreen(TFT_BLACK);

  draw_time_clock();
  set_colour();

  draw_time_daymon();
  draw_time_year();

  get_weather();

  delay(1000);
}

This simple loop structure makes the project easy to understand. The display is redrawn once per second, while the weather request is handled separately inside get_weather() so the API is not called too often.

9. From Prototype to PCB

The breadboard prototype worked, but the wiring was messy. A P4 matrix display needs many signal connections, so Dupont wires can quickly become difficult to manage.

To make the project cleaner and more reliable, I designed a custom PCB. The main advantage of the PCB is that the original ribbon cable from the display can be used. This reduces the number of loose wires and makes the assembly much easier.

I also added a pin header to the PCB so that unused ESP32 pins remain accessible. This makes future upgrades possible, for example adding buttons, extra sensors, or a different enclosure design.

Elektroclock schematic.

Elektroclock PCB layout.

PCB-based prototype.

10. Enclosure and Final Assembly

After the electronics were working, I built an enclosure for the clock. The enclosure protects the electronics and gives the project a cleaner look.

For one version, I used a simple prototype case. For another version, I created a laser-cut enclosure. Both approaches work, and the best option depends on the tools available.

When designing the enclosure, it is important to leave enough space for:

The LED matrix display
The ESP32 and PCB
The power connector
The light sensor
Cable routing
Ventilation, if required

Sensor placement: The BH1750 light sensor should be placed where it can measure the room brightness correctly. It should not be hidden inside the enclosure or placed directly behind the bright LED matrix.

11. Final Result

The final Elektroclock is a compact smart clock based on an ESP32 and a P4 LED matrix display. It shows the current time and weather information, updates the weather automatically, and adjusts its brightness depending on the room lighting.

This project is a good example of how a complex electronics project can be developed step by step. First, the display is tested on its own. Then Wi-Fi, time synchronization, weather data, and brightness control are added. Finally, the prototype is turned into a cleaner PCB-based version with an enclosure.

The full code, schematic, parts list, and additional project files are available on the Elektroclock project page.

Feel free to recreate this project and modify it for your own setup. You can change the display layout, add more weather information, use a different enclosure, or expand the PCB with additional features.