Noval Aryansah

•

Dzovani Sandy Putra Prayitno

•

Naufal Fadillah

•

Rafid Afiyanto

Published August 6, 2025

Birthday Wishes Display

Interactive Birthday Wish Box - with ESP32S3 as access point!

BeginnerFull instructions provided56

Things used in this project

Hardware components

Seeed Studio XIAO ESP32S3 Sense

ElectroPeak 0.96" OLED 64x128 Display Module

Buzzer

Jumper wires (generic)

Breadboard (generic)

Software apps and online services

Arduino IDE

Story

In an age where birthday greetings are mostly reduced to templated social media messages, this project aims to bring back the magic of personal celebrations with a technological twist

What if you could make a birthday wish interactive What if your message didn't just exist on a screen but was broadcast live, shown in big bold letters, and sung aloud by a smart little device

This project turns that idea into reality

Using the ultra-compact and powerful XIAO ESP32S3, a 0.96 OLED display, and a buzzer, we created a portable Birthday Message Display system that works entirely offline no internet or router required. While the project does use WiFi, it operates in local access point mode. This means the ESP32 creates its own network that nearby users can connect to directly.

Through this private network, users can access a built-in web page hosted by the ESP32 to type and send a custom birthday message. The message is then beautifully rendered on the OLED display, line by line, and accompanied by a cheerful birthday melody

Whether it's used as a digital gift, a classroom IoT demo, or a party centerpiece, this project showcases how embedded systems can create meaningful and joyful experiences one message, one melody, one smile at a time.

How it works

ESP32 starts in access point mode and creates a local WiFi network

User connects to the ESP32 network using a phone or laptop

A built-in web page is served from the ESP32 to input a birthday message
Message is saved and displayed on a 0.96 inch OLED, animated line by line
A cheerful melody is played through a buzzer
All functions work offline without internet access

Display Modes

The project includes several visual modes to enhance the celebration experience

Startup mode displays the WiFi connection instructions on the OLED screen including the SSID and IP address

This helps users easily connect to the device

Message mode shows the received birthday message across up to four lines with a fade in or scrolling animation effect for added visual appeal

For example, if the user types "happy birthday brother", the OLED will display happy birthday brother.

Music mode plays a short birthday melody through the buzzer whenever the play button is triggered from the web interface

Reset mode clears the stored message and resets the screen back to the initial state so a new message can be entered

These modes work together to create an interactive flow that is both fun and easy to use.

Circuit Diagram

OLED 0.96 Inch

VCC → 3V3

GND → GND

SDA → SDA / GPIO5

SCL → SCL / GPIO6

BUZZER

+ → D10 / GPIO9

- → GND

This code enables the ESP32 to host its own WiFi network and serve a web page for message input. No external router or internet is required.

Getting Started

Upload the Birthday\_Whises code to the ESP32S3 board
Connect the OLED display and buzzer as shown in the circuit diagram
Power the board and wait for the OLED to display the WiFi SSID and IP address
On your phone or laptop, connect to the WiFi network created by the ESP32 (e.g., Birthday-ESP32)
Open the IP address shown on the OLED in a browser
Enter your birthday message and press the play button to display it and play the song

The ESP32 uses WiFi access point (AP) mode to create its own local network using this code:

#include <WiFi.h>
#include <ESPAsyncWebServer.h>

const char* ssid = "Birthday-ESP32";
const char* password = "";

AsyncWebServer server(80);

void setup() {
  WiFi.softAP(ssid, password);
  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", "<form>...</form>");
  });

  server.begin();
}

Possible Extensions

Add an SD card to store multiple birthday messages and switch between them
Integrate a real-time clock module to trigger the message automatically at a scheduled time
Replace the buzzer with a speaker and use an audio file (MP3 or WAV) for better sound quality
Use a larger OLED or LED matrix to show longer messages or add emojis
Add a battery and enclosure to make it fully portable
Create a version that supports multiple languages or animated fonts
Implement Bluetooth for mobile app control in addition to WiFi

About Pitches.h

This project uses a helper file named pitches.h that contains frequency definitions for musical notes. Each note (like NOTE\_C4, NOTE\_D4, etc.) is mapped to its correct frequency in Hertz. This makes it easier to write melodies using note names instead of raw numbers. The buzzer uses these note definitions to play the Happy Birthday melody cleanly and accurately.

Conclusion

This project is more than a technical showcase. It brings together code, hardware, and creativity to turn a birthday wish into a memorable experience. With just a small ESP32 board, an OLED screen, and a buzzer, you can create something that brings joy, surprise, and smiles all offline, and all yours to build.

Code

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include "pitches.h"

// OLED Configuration
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// Buzzer Pin
#define BUZZER_PIN D10

// Wi-Fi AP
const char* ssid = "BirthdayWishes";
const char* password = "12345678";

// Web Server
AsyncWebServer server(80);

// Message System
String currentMessage = "";
bool hasMessage = false;

// Display Control
unsigned long lastAnimTime = 0;
const unsigned long animInterval = 30;
int fadeState = 0;
int brightness = 0;
const int maxBrightness = 15;

const int LINE_HEIGHT = 10;
const int MAX_LINES = 4;
String displayedLines[MAX_LINES];
int lineCount = 0;

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

  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("OLED failed"));
    for (;;);
  }
  display.clearDisplay();
  display.display();

  pinMode(BUZZER_PIN, OUTPUT);
  digitalWrite(BUZZER_PIN, LOW);

  tone(BUZZER_PIN, NOTE_A4, 200);
  delay(200);
  noTone(BUZZER_PIN);

  WiFi.softAP(ssid, password);
  displayConnectionInfo();

  setupWebServer();
  server.begin();
}

void displayConnectionInfo() {
  display.clearDisplay();
  display.setTextSize(1);
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(0, 0);
  display.println("Connect to:");
  display.println(ssid);
  display.println("IP:");
  display.println(WiFi.softAPIP());
  display.display();
}

void setupWebServer() {
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    String html = R"rawliteral(
    <!DOCTYPE html><html>
    <head><title>Birthday Wishes</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
      body { font-family: Arial; background: #f0f8ff; padding: 20px; }
      .container { max-width: 500px; margin: auto; background: white; padding: 20px; border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
      h2 { color: #ff6b6b; text-align: center; }
      textarea { width: 100%; height: 100px; border: 1px solid #ccc; border-radius: 10px; padding: 10px; font-size: 16px; }
      button { width: 100%; padding: 12px; margin: 10px 0; font-size: 16px; font-weight: bold; border: none; border-radius: 10px; cursor: pointer; }
      .btn-submit { background: #4CAF50; color: white; }
      .btn-music { background: #2196F3; color: white; }
      .btn-reset { background: #f44336; color: white; }
      button:hover { opacity: 0.9; }
    </style></head>
    <body>
    <div class="container">
      <h2>Birthday Message Center</h2>
      <form id="messageForm">
        <textarea id="messageInput" maxlength="120" placeholder="Type your birthday message here..."></textarea>
        <button type="submit" class="btn-submit">Display Message</button>
      </form>
      <button onclick="playMusic()" class="btn-music">Play Birthday Song</button>
      <button onclick="resetDisplay()" class="btn-reset">Reset Display</button>
    </div>
    <script>
      function playMusic() { fetch('/play'); }
      function resetDisplay() {
        if (confirm("Clear current message?")) {
          fetch('/reset');
        }
      }
      document.getElementById('messageForm').onsubmit = function(e) {
        e.preventDefault();
        const msg = document.getElementById('messageInput').value;
        if (msg.trim()) {
          fetch('/submit?msg=' + encodeURIComponent(msg));
        }
      };
    </script></body></html>
    )rawliteral";
    request->send(200, "text/html", html);
  });

  server.on("/submit", HTTP_GET, [](AsyncWebServerRequest *request) {
    if (request->hasParam("msg")) {
      currentMessage = request->getParam("msg")->value();
      currentMessage.replace("+", " ");
      prepareTextForDisplay(currentMessage);
      hasMessage = true;
      fadeState = 0;
      brightness = 0;
      playSuccessTone();
      request->send(200, "text/plain", "Message displayed");
    }
  });

  server.on("/play", HTTP_GET, [](AsyncWebServerRequest *request) {
    playBirthdaySong();
    request->send(200, "text/plain", "Playing song");
  });

  server.on("/reset", HTTP_GET, [](AsyncWebServerRequest *request) {
    currentMessage = "";
    hasMessage = false;
    display.clearDisplay();
    display.display();
    request->send(200, "text/plain", "Display reset");
  });
}

void prepareTextForDisplay(String text) {
  for (int i = 0; i < MAX_LINES; i++) displayedLines[i] = "";
  lineCount = 0;

  int newlinePos = text.indexOf('\n');
  while (newlinePos != -1 && lineCount < MAX_LINES - 1) {
    displayedLines[lineCount++] = text.substring(0, newlinePos);
    text = text.substring(newlinePos + 1);
    newlinePos = text.indexOf('\n');
  }

  if (lineCount < MAX_LINES && text.length() > 0) {
    displayedLines[lineCount++] = text;
  }
}

void playBirthdaySong() {
  noTone(BUZZER_PIN);

  // 🎵 Happy birthday to you
  tone(BUZZER_PIN, NOTE_C4); delay(200);
  tone(BUZZER_PIN, NOTE_C4); delay(200);
  tone(BUZZER_PIN, NOTE_D4); delay(400);
  tone(BUZZER_PIN, NOTE_C4); delay(400);
  tone(BUZZER_PIN, NOTE_F4); delay(400);
  tone(BUZZER_PIN, NOTE_E4); delay(800);

  // 🎵 Happy birthday to you
  tone(BUZZER_PIN, NOTE_C4); delay(200);
  tone(BUZZER_PIN, NOTE_C4); delay(200);
  tone(BUZZER_PIN, NOTE_D4); delay(400);
  tone(BUZZER_PIN, NOTE_C4); delay(400);
  tone(BUZZER_PIN, NOTE_G4); delay(400);
  tone(BUZZER_PIN, NOTE_F4); delay(800);

  noTone(BUZZER_PIN);
}

void playSuccessTone() {
  tone(BUZZER_PIN, NOTE_E6, 200); delay(250);
  tone(BUZZER_PIN, NOTE_G6, 200); delay(250);
  noTone(BUZZER_PIN);
}

void displayCurrentMessage() {
  display.clearDisplay();

  if (!hasMessage) return;

  display.setTextSize(1);
  display.setTextColor(SSD1306_WHITE);

  int totalHeight = lineCount * LINE_HEIGHT;
  int startY = (SCREEN_HEIGHT - totalHeight) / 2;

  for (int i = 0; i < lineCount; i++) {
    int16_t x1, y1;
    uint16_t w, h;
    display.getTextBounds(displayedLines[i], 0, 0, &x1, &y1, &w, &h);
    display.setCursor((SCREEN_WIDTH - w) / 2, startY + (i * LINE_HEIGHT));
    display.println(displayedLines[i]);
  }

  display.dim(brightness < maxBrightness);
  display.display();
}

void loop() {
  if (!hasMessage) return;

  if (millis() - lastAnimTime > animInterval) {
    lastAnimTime = millis();

    switch (fadeState) {
      case 0: brightness++;
              if (brightness >= maxBrightness) {
                brightness = maxBrightness;
                fadeState = 1;
                lastAnimTime = millis() + 3000;
              }
              break;

      case 1: if (millis() >= lastAnimTime) fadeState = 2;
              break;

      case 2: brightness--;
              if (brightness <= 0) {
                brightness = 0;
                fadeState = 0;
              }
              break;
    }

    displayCurrentMessage();
  }
}

Birthday Wishes Display

Things used in this project

Hardware components

Software apps and online services

Story

How it works

Display Modes

Circuit Diagram

Getting Started

Possible Extensions

About Pitches.h

Conclusion

Schematics

Schematics

Code

Birthday Code

pitches.h code

Credits

Noval Aryansah

Dzovani Sandy Putra Prayitno

Naufal Fadillah

Rafid Afiyanto

Comments

Embed the widget on your own site

Birthday Wishes Display

Birthday Wishes Display

Things used in this project

Hardware components

Software apps and online services

Story

How it works

Display Modes

Circuit Diagram

Getting Started

Possible Extensions

About Pitches.h

Conclusion

Schematics

Schematics

Code

Birthday Code

pitches.h code

Credits

Noval Aryansah

Dzovani Sandy Putra Prayitno

Naufal Fadillah

Rafid Afiyanto

Comments

Related channels and tags