{"id":537,"date":"2025-12-10T16:46:55","date_gmt":"2025-12-10T16:46:55","guid":{"rendered":"https:\/\/portfolio.wcu.edu\/asmamane1\/?p=537"},"modified":"2025-12-10T16:46:55","modified_gmt":"2025-12-10T16:46:55","slug":"building-the-web-a-gotchi-a-dual-microcontroller-digital-pet-system","status":"publish","type":"post","link":"https:\/\/portfolio.wcu.edu\/asmamane1\/2025\/12\/10\/building-the-web-a-gotchi-a-dual-microcontroller-digital-pet-system\/","title":{"rendered":"Building the Web-a-gotchi: A Dual-Microcontroller Digital Pet System"},"content":{"rendered":"

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.<\/p>\n

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

Project Overview<\/strong><\/h2>\n

The Web-a-gotchi is powered by two tightly integrated microcontrollers:<\/p>\n

STM32 (Primary Controller)<\/strong><\/h3>\n
    \n
  • \n

    Manages all pet state variables:<\/p>\n

      \n
    • \n

      Hunger<\/p>\n<\/li>\n

    • \n

      Cleanliness<\/p>\n<\/li>\n

    • \n

      Love\/Happiness<\/p>\n<\/li>\n<\/ul>\n<\/li>\n

    • \n

      Performs time-based stat decay<\/p>\n<\/li>\n

    • \n

      Reacts to physical buttons<\/p>\n<\/li>\n

    • \n

      Drives the OLED display<\/p>\n<\/li>\n

    • \n

      Implements the pet\u2019s mood and lifecycle logic<\/p>\n<\/li>\n

    • \n

      Sends stat data to the ESP32 via UART<\/p>\n<\/li>\n<\/ul>\n

      ESP32 (Wi-Fi Server + Web UI)<\/strong><\/h3>\n
        \n
      • \n

        Runs in AP mode, broadcasting its own Wi-Fi network<\/p>\n<\/li>\n

      • \n

        Hosts a live, responsive Web UI with:<\/p>\n

          \n
        • \n

          Animated SVG pet graphics<\/p>\n<\/li>\n

        • \n

          Real-time progress bars<\/p>\n<\/li>\n

        • \n

          Mood descriptions<\/p>\n<\/li>\n

        • \n

          Buttons to feed, play, and clean the pet<\/p>\n<\/li>\n<\/ul>\n<\/li>\n

        • \n

          Communicates with the STM32 using a simple UART protocol<\/p>\n<\/li>\n<\/ul>\n

          This two-microcontroller system allows the Web-a-gotchi to be interactive both physically and wirelessly.<\/p>\n

          System Architecture<\/strong><\/h2>\n

          Hardware Components<\/strong><\/h3>\n
            \n
          • \n

            STM32 Nucleo board<\/p>\n<\/li>\n

          • \n

            ESP32 Dev Module<\/p>\n<\/li>\n

          • \n

            SSD1306 128\u00d764 OLED (I2C)<\/p>\n<\/li>\n

          • \n

            Three momentary buttons<\/p>\n<\/li>\n

          • \n

            USB power and serial debugging<\/p>\n<\/li>\n

          • \n

            UART communication cable between STM32 and ESP32<\/p>\n<\/li>\n<\/ul>\n

            Schematic Diagram<\/strong><\/h3>\n

            \"\"<\/p>\n

            UART Communication Protocol<\/strong><\/h3>\n
            \n
            \n\n\n\n\n\n\n\n\n\n
            Direction<\/th>\nMessage Example<\/th>\nMeaning<\/th>\n<\/tr>\n<\/thead>\n
            STM32 \u2192 ESP32<\/td>\n85,92,70<\/code><\/td>\nHunger, Clean, Love values<\/td>\n<\/tr>\n
            STM32 \u2192 ESP32<\/td>\nDEAD<\/code><\/td>\nPet has died<\/td>\n<\/tr>\n
            ESP32 \u2192 STM32<\/td>\n'F'<\/code><\/td>\nFeed pet<\/td>\n<\/tr>\n
            ESP32 \u2192 STM32<\/td>\n'P'<\/code><\/td>\nPlay with pet<\/td>\n<\/tr>\n
            ESP32 \u2192 STM32<\/td>\n'C'<\/code><\/td>\nClean pet<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

            Embedded Software Design<\/strong><\/h2>\n

            STM32 Responsibilities<\/strong><\/h3>\n

            The STM32 acts as the brain of the pet. Its tasks include:<\/p>\n

              \n
            • \n

              Tracking three pet vitals on a 0\u2013100 scale<\/p>\n<\/li>\n

            • \n

              Reducing each vital every 30 seconds<\/p>\n<\/li>\n

            • \n

              Updating the OLED with progress bars and messages<\/p>\n<\/li>\n

            • \n

              Detecting button inputs (feed\/play\/clean)<\/p>\n<\/li>\n

            • \n

              Determining whether the pet:<\/p>\n

                \n
              • \n

                is hatching<\/p>\n<\/li>\n

              • \n

                is alive<\/p>\n<\/li>\n

              • \n

                is distressed<\/p>\n<\/li>\n

              • \n

                has died<\/p>\n<\/li>\n<\/ul>\n<\/li>\n

              • \n

                Sending formatted status updates to the ESP32<\/p>\n<\/li>\n<\/ul>\n

                All game logic runs on the STM32, ensuring responsiveness even if the web interface is disconnected.<\/p>\n

                ESP32 Responsibilities<\/strong><\/h3>\n

                The ESP32 transforms the Web-a-gotchi into a networked device:<\/p>\n

                  \n
                • \n

                  Creates a Wi-Fi hotspot named \u201cSTM-a-gotchi-WIFI\u201d<\/p>\n<\/li>\n

                • \n

                  Serves a fully styled HTML\/CSS\/JS webpage<\/p>\n<\/li>\n

                • \n

                  Displays animated SVG graphics representing the pet<\/p>\n<\/li>\n

                • \n

                  Shows real-time stat bars using a continuous \/data<\/code> JSON endpoint<\/p>\n<\/li>\n

                • \n

                  Sends POST commands to the STM32 for feed\/play\/clean<\/p>\n<\/li>\n<\/ul>\n

                  The website is designed in a sci-fi HUD style, with:<\/p>\n

                    \n
                  • \n

                    neon progress bars,<\/p>\n<\/li>\n

                  • \n

                    fading animations,<\/p>\n<\/li>\n

                  • \n

                    mood-based filters, and<\/p>\n<\/li>\n

                  • \n

                    a responsive layout for both mobile and desktop.<\/p>\n<\/li>\n<\/ul>\n

                    Key Features<\/strong><\/h2>\n

                    1. Real-Time Dual-MCU Interaction<\/strong><\/h3>\n

                    The Web-a-gotchi responds to:<\/p>\n

                      \n
                    • \n

                      physical buttons on the STM32<\/p>\n<\/li>\n

                    • \n

                      web-based commands on the ESP32<\/p>\n<\/li>\n<\/ul>\n

                      All updates propagate instantly across both systems.<\/p>\n

                      2. Dynamic Web Interface<\/strong><\/h3>\n

                      The browser interface includes:<\/p>\n

                        \n
                      • \n

                        mood statements<\/p>\n<\/li>\n

                      • \n

                        pet SVG animation<\/p>\n<\/li>\n

                      • \n

                        live stat bars<\/p>\n<\/li>\n

                      • \n

                        hatch timer<\/p>\n<\/li>\n

                      • \n

                        death detection<\/p>\n<\/li>\n

                      • \n

                        command buttons<\/p>\n<\/li>\n<\/ul>\n

                        3. Clean OLED Display Graphics<\/strong><\/h3>\n

                        The OLED screen shows:<\/p>\n

                          \n
                        • \n

                          three labeled progress bars<\/p>\n<\/li>\n

                        • \n

                          stat percentages<\/p>\n<\/li>\n

                        • \n

                          death screen when triggered<\/p>\n<\/li>\n<\/ul>\n

                          4. Safe and Reliable UART Handling<\/strong><\/h3>\n

                          The ESP32 uses a buffered line-reading approach to avoid corrupted data.<\/p>\n

                          Future Expansion Ideas<\/strong><\/h2>\n
                            \n
                          • \n

                            Add pet animations on OLED<\/p>\n<\/li>\n

                          • \n

                            Implement multiple evolution stages<\/p>\n<\/li>\n

                          • \n

                            Integrate sounds in the web UI<\/p>\n<\/li>\n

                          • \n

                            Save progress to Flash\/EEPROM<\/p>\n<\/li>\n<\/ul>\n

                            Conclusion<\/strong><\/h2>\n

                            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.<\/p>\n

                            This project strengthened my skills in:<\/p>\n

                              \n
                            • \n

                              Embedded C programming<\/p>\n<\/li>\n

                            • \n

                              Microcontroller communication<\/p>\n<\/li>\n

                            • \n

                              UART protocols<\/p>\n<\/li>\n

                            • \n

                              Web design for IoT devices<\/p>\n<\/li>\n

                            • \n

                              System-level architecture<\/p>\n<\/li>\n

                            • \n

                              Real-time software design<\/p>\n<\/li>\n<\/ul>\n

                              Video Demonstration<\/h3>\n

                              Web-a-gotchi Demonstration Video<\/p>\n