Building the Web-a-gotchi: A Dual-Microcontroller Digital Pet System

For my final project, I created the Web-a-gotchi, an embedded digital pet system inspired by classic Tamagotchi devices but redesigned for modern hardware. The system uses an STM32 microcontroller to manage the core pet logic and an ESP32 to provide a wireless, browser-based interface that allows interaction from any phone or laptop.

This project allowed me to combine embedded systems, microcontroller communication, real-time design, and Wi-Fi user interfaces into a single cohesive platform.

Project Overview

The Web-a-gotchi is powered by two tightly integrated microcontrollers:

STM32 (Primary Controller)

• Manages all pet state variables:

  • Hunger

  • Cleanliness

  • Love/Happiness

• Performs time-based stat decay

• Reacts to physical buttons

• Drives the OLED display

• Implements the pet’s mood and lifecycle logic

• Sends stat data to the ESP32 via UART

ESP32 (Wi-Fi Server + Web UI)

• Runs in AP mode, broadcasting its own Wi-Fi network

• Hosts a live, responsive Web UI with:

  • Animated SVG pet graphics

  • Real-time progress bars

  • Mood descriptions

  • Buttons to feed, play, and clean the pet

• Communicates with the STM32 using a simple UART protocol

This two-microcontroller system allows the Web-a-gotchi to be interactive both physically and wirelessly.

System Architecture

Hardware Components

• STM32 Nucleo board

• ESP32 Dev Module

• SSD1306 128×64 OLED (I2C)

• Three momentary buttons

• USB power and serial debugging

• UART communication cable between STM32 and ESP32

Schematic Diagram

UART Communication Protocol

Embedded Software Design

STM32 Responsibilities

The STM32 acts as the brain of the pet. Its tasks include:

• Tracking three pet vitals on a 0–100 scale

• Reducing each vital every 30 seconds

• Updating the OLED with progress bars and messages

• Detecting button inputs (feed/play/clean)

• Determining whether the pet:

  • is hatching

  • is alive

  • is distressed

  • has died

• Sending formatted status updates to the ESP32

All game logic runs on the STM32, ensuring responsiveness even if the web interface is disconnected.

ESP32 Responsibilities

The ESP32 transforms the Web-a-gotchi into a networked device:

• Creates a Wi-Fi hotspot named “STM-a-gotchi-WIFI”

• Serves a fully styled HTML/CSS/JS webpage

• Displays animated SVG graphics representing the pet

• Shows real-time stat bars using a continuous /data JSON endpoint

• Sends POST commands to the STM32 for feed/play/clean

The website is designed in a sci-fi HUD style, with:

• neon progress bars,

• fading animations,

• mood-based filters, and

• a responsive layout for both mobile and desktop.

Key Features

1. Real-Time Dual-MCU Interaction

The Web-a-gotchi responds to:

• physical buttons on the STM32

• web-based commands on the ESP32

All updates propagate instantly across both systems.

2. Dynamic Web Interface

The browser interface includes:

• mood statements

• pet SVG animation

• live stat bars

• hatch timer

• death detection

• command buttons

3. Clean OLED Display Graphics

The OLED screen shows:

• three labeled progress bars

• stat percentages

• death screen when triggered

4. Safe and Reliable UART Handling

The ESP32 uses a buffered line-reading approach to avoid corrupted data.

Future Expansion Ideas

• Add pet animations on OLED

• Implement multiple evolution stages

• Integrate sounds in the web UI

• Save progress to Flash/EEPROM

Conclusion

The Web-a-gotchi demonstrates a successful integration of modern embedded systems with wireless user interfaces. By combining two microcontrollers, one dedicated to real-time gameplay and one dedicated to web hosting, I was able to build an interactive digital pet that works both physically and over Wi-Fi.

This project strengthened my skills in:

• Embedded C programming

• Microcontroller communication

• UART protocols

• Web design for IoT devices

• System-level architecture

• Real-time software design

Video Demonstration

Web-a-gotchi Demonstration Video

The Web-a-gotchi ultimately showcases how embedded hardware can be combined with modern web technologies to create engaging and innovative interactive systems.