Skip to main content

Smart Fu - Digital Door Guardian

Traditional Chinese Fu into an Interactive Visitor Notification System

Final Result

Door Guardian - FU is an interactive door decoration inspired by the traditional Chinese Fu (福 character and door guardian culture).

Final Door Guardian FU assembly with ePaper display inside the laser-cut diamond frame

Most of the time it behaves like a quiet decorative object. The 7.3 inch color ePaper display shows Fu artwork, seasonal posters, or personalized graphics with a paper-like calmness. When a visitor arrives, they do not need to press a loud doorbell. They touch the small sensor near the decoration, the OLED greets them with " Hello My Friend"

Final Door Guardian FU assembly with ePaper display inside the laser-cut diamond frame

At the same time, the touch device sends a WiFi message to a local Node.js server. The web dashboard shows a visitor notification, and the ePaper display switches to a visitor poster. In that moment, the traditional Fu is "awakened" and becomes a digital door guardian.

Final Door Guardian FU assembly with ePaper display inside the laser-cut diamond frame

The finished project combines:

  • Chinese cultural heritage
  • digital fabrication
  • custom electronics
  • embedded programming
  • WiFi communication
  • a web dashboard
  • physical interaction
  • ePaper visual output

The result is not a commercial smart doorbell. I see it more as a small calm-technology object: useful when someone arrives, quiet when nothing is happening, and still recognizable as a cultural decoration.

Why I Made It

Growing up in China, Fu has always been part of my memory of home. Every Spring Festival, my family would write or hang a Fu decoration on the front door. It symbolized good fortune, welcome, and protection. Traditionally, Chinese households also placed Door Guardians at the entrance to watch over the home and greet visitors.

Round Fu referenceHandwritten Fu referenceSquare Fu door decoration reference

Last year, I hand-wrote a large Fu character with ink on special paper.

Round Fu referenceHandwritten Fu referenceSquare Fu door decoration reference

I liked it a lot, but after one year the color had faded. That made me ask a very simple question:

How to make a Fu that does not fade?

At first, this sounded like only a material problem: replace paper with LEDs or a screen. But the more I worked through Fab Academy, the more I realized the interesting part was not only the display. It was the relationship between the object, the door, the person inside, and the visitor outside.

I often work with headphones on, in that focused state I can easily miss someone knocking at the door. I wanted a gentle way for visitors to announce themselves without adding a loud, technical-looking doorbell.

So my question became:

Could a traditional Fu decoration still carry the feeling of welcome and protection, while also becoming useful in modern daily life?

These references shaped the project visually and emotionally. The round Fu, my handwritten Fu, and the square door decoration each carried a different feeling: festival, memory, and threshold. I wanted the final object to keep that feeling instead of becoming only a gadget with a Chinese character attached to it.

Concept Development

My first idea was much simpler: a smart Fu decoration that could display the character, time, and weather. I also imagined a pull-ring interaction, like an old lamp. One pull could show time, another pull could show weather.

Early smart Fu concept with pull ring, screen, frame, and tassel

This early concept was useful because it gave me a visual direction, but it was not yet a strong interaction. It felt like an indoor information object. The turning point came after conversations with instructors and friends. The repeated question was:

What if it could interact with visitors?

That question moved the project back to the door, where Fu already belongs. Instead of asking the object to show many types of information, I focused on one meaningful moment: someone arrives, touches the Fu, and the home becomes aware of them.

The project evolved in spirals:

  1. Decorative Fu object: focus on the traditional symbol and visual identity.
  2. Smart Fu display: add a digital screen and poster logic.
  3. Interactive Fu: add touch as the visitor input.
  4. Door Guardian: connect the outside touch to an indoor notification.
  5. Two-board system: separate visitor interaction from ePaper display control.
  6. Networked dashboard: let the web interface monitor device state and manually switch posters.

Each spiral made the project less like a decorative screen and more like an interaction system.

System Overview

The final system has three connected modules.

Module 1 - Visitor Interaction

This module sits near the entrance and is handled by a XIAO ESP32-C3.

It includes:

  • custom XIAO ESP32-C3 board
  • Grove touch sensor connected to D2
  • 128 x 128 Grove OLED display
  • WiFi connection to the local server

The OLED shows WELCOME, TOUCH ME, and the WiFi/IP status. When touched, it displays Hello / My Friend for two seconds and sends an HTTP POST request to the server.

Early smart Fu concept with pull ring, screen, frame, and tassel

For the test part, I used Hello Alison instead.

Early smart Fu concept with pull ring, screen, frame, and tassel

Module 2 - Network Hub

A local Node.js Express server acts as the communication hub.

It provides:

  • GET /api/status for the web dashboard and S3 board
  • POST /api/status for touch events and poster changes
  • POST /api/reset to return to poster 1
  • static hosting for the dashboard and poster images
  • online/offline tracking for the C3 and S3 devices

When the C3 sends status=coming, the server changes currentPoster to 3, records lastEvent as touch, and updates the dashboard state.

Module 3 - Ambient Display

The main Fu display uses:

  • EE04 ePaper driver board
  • 7.3 inch Spectra 6 color ePaper display
  • three prepared poster bitmap arrays

The EE04(XIAO ESP32 S3 Sense inside of it) polls the server every five seconds using GET /api/status?device=s3. It only refreshes the ePaper when the poster ID changes. This state-lock behavior matters because ePaper refresh is slow and repeated refreshes can reduce the life of the display.

Interaction Flow

flowchart LR
A[Visitor touches sensor] --> B[XIAO ESP32-C3]
B --> C[OLED shows Hello / My Friend]
B --> D[POST status=coming]
D --> E[Node.js server]
E --> F[Web dashboard toast alert]
E --> G[currentPoster = 3]
G --> H[EE04 polls status]
H --> I[7.3 inch ePaper switches to visitor poster]

The same server also supports manual poster selection from the dashboard. This helped during debugging because I could test the S3 and ePaper without touching the C3 every time.

Poster and Interface Design

The ePaper display normally shows Fu-style artwork. I prepared three poster states:

  • Poster 1: calm Fu blessing poster
  • Poster 2: alternate festive Fu poster
  • Poster 3: visitor notification poster
Poster 1 Fu blessing artworkPoster 2 Fu and dragon artworkPoster 3 visitor notification artwork

The dashboard: I used a warm orange-red palette, rounded cards, poster thumbnails, device status pills, and a toast notification. The most important thing is that it shows the system state clearly:

  • which poster is active
  • whether the C3 touch board is online
  • whether the S3 display board is online
  • whether the last event came from touch, web control, or reset

Physical Design

From Flat Decoration to Real Object

Early smart Fu concept with pull ring, screen, frame, and tassel

The physical object began as a simple diamond-shaped Fu display. I wanted the overall silhouette to feel familiar, close to the square decorations that are often rotated 45 degrees and pasted on doors.

The first physical questions were simple but stubborn:

  • How big should the ePaper opening be?
  • Where should the OLED and touch sensor live?
  • How can the structure hang vertically?
  • How can I still access the electronics after assembly?
  • How can the front look decorative while the back remains serviceable?

The answers did not arrive in one design. They arrived through repeated misfits.

Laser-Cut Frame Iterations

The front frame was laser-cut from plywood. It includes:

  • a central opening for the ePaper display
  • finger-joint style edge slots
  • holes for hanging or mounting
  • a diamond-shaped Fu decoration proportion

The first version ignored real assembly tolerances. It looked correct on screen, but the parts could not fit together.

The second version introduced directional panels, but many pieces looked visually identical after cutting. I kept assembling them incorrectly. That failure was not dramatic, but it was very annoying, and it taught me that orientation markings are part of design, not an afterthought.

Eventually I added clearer assembly references and made several cut versions before getting an acceptable fit.

Three laser-cut wooden frame iterations

CAD and Holders

For the internal parts, I designed and printed multiple custom holders:

  • ePaper holder
  • OLED holder
  • touch sensor holder
  • decorative cloud-pattern support
Three laser-cut wooden frame iterations

At first, I designed the holders almost like small boxes for a table setup. Then I realized the final object had to stand vertically on a door or wall. That changed everything. Gravity, cable routing, display orientation, and screw positions all became more important.

In total I printed six versions of the ePaper holder, several OLED support revisions, and several touch sensor support tests.

Three laser-cut wooden frame iterations Onshape assembly for the final project enclosure and ePaper holder Early smart Fu concept with pull ring, screen, frame, and tassel

Rear Support and Mechanical Integration

One of the biggest mechanical challenges was connecting the wooden front panel with the 3D-printed internal structure. Glue alone felt too fragile and too final. If something failed, I wanted to be able to open or repair the object.

During molding and casting week, I made a decorative ruyi cloud pattern. Later, that cloud-pattern box gave me a better idea for the rear support. I reused the visual language of the cloud as a structural element behind the display.

Decorative cloud-pattern structure used as rear support

The support included four screw mounting points. By drilling matching holes in the wooden panel, I could fasten the ePaper enclosure mechanically instead of depending completely on glue.

Decorative cloud-pattern structure used as rear support

This was one of the moments where a weekly assignment came back into the final project in an unexpected way. A decorative experiment became a structural answer.

Electronics Development

First PCB: Learning the Base

My PCB work started before the final interaction was fully defined. The first board was closer to an environmental sensing and Hello World board. It helped me practice:

  • schematic design in KiCad
  • footprints and routing
  • ERC and DRC checks
  • trace width decisions
  • milling and soldering
  • testing with LED and button code

The first board successfully collected temperature and humidity data, and the onboard indicator LED worked. That gave me confidence that I could move beyond a breadboard demo.

But the board was not perfect. One revision had a missing ground connection, so the LED never illuminated. At first I looked at the code, the resistor, and the LED orientation. Eventually the real problem was simpler and deeper: the net was not connected. That mistake made me much more careful about checking every ground and power path before fabrication. And the second try is perfect:

Decorative cloud-pattern structure used as rear support

Thrid PCB: Matching the Final Interaction

As the project changed from environmental sensing to visitor interaction, the original PCB architecture no longer matched the needs. I redesigned the board so the XIAO ESP32-C3 could expose the pins needed for:

  • touch sensor input
  • OLED display connection
  • WiFi communication
  • future expansion

This was a good example of Fab Academy iteration. The first board was not a waste; it taught me the method. The final project board designed more neat and useful:

Decorative cloud-pattern structure used as rear support

Embedded Programming

C3 Touch Sender

The C3 firmware has four main jobs:

  1. Connect to the 2.4 GHz WiFi network.
  2. Show an idle screen on the OLED.
  3. Detect touch on D2.
  4. Send POST /api/status with status=coming.

I added debounce and cooldown timing so one long touch does not create many repeated events. The OLED gives immediate feedback to the visitor, while the WiFi request triggers the rest of the system.

The touch logic also carries lessons from input device week. With the DHT11 sensor, I spent a lot of time chasing problems caused by wrong GND wiring, loose jumper wires, and pin confusion. For the final touch sensor I tried to debug more calmly: check pinout, check power, check ground, print values, then add the network layer.

EE04 ePaper Controller

The EE04 firmware polls the server every five seconds. If the poster ID changes, it updates the display. If the ID is the same, it does nothing.

That sounds simple, but the ePaper was the hardest debugging part of the final system.

The first display examples worked, so I assumed poster switching would be straightforward. It was not. The display could show one poster, then hang during the second update. The board looked like it was repeatedly failing WiFi, but the real root cause was deeper: the ED2208 ePaper controller did not wake reliably after the library's sleep/update cycle.

I tried changing wake macros and reinitializing the display. The reliable solution was to bypass the problematic library update/sleep path and manually send the SPI command sequence:

0x04  power on
0x10 send image data with color mapping
0x12 refresh display

I also kept the display awake instead of putting it into deep sleep, and disconnected WiFi during the display push to avoid conflicts during the refresh.

This was the technical knot of the project. It also changed my respect for ePaper. It looks quiet from the outside, but the refresh pipeline is very specific.

Node.js Server

The server is the bridge between the two microcontrollers and the browser. It stores one shared state object:

currentPoster
lastEvent
lastEventTime
devices.c3
devices.s3

The important server behavior is:

  • C3 touch event sets currentPoster = 3
  • web poster click sets currentPoster = 1, 2, or 3
  • reset returns to poster 1
  • S3 identifies itself with ?device=s3
  • devices are marked offline if they have not been seen recently

This local-server approach kept the system inspectable. I could open the browser, check JSON responses, and see whether the bug was in the C3, server, dashboard, or S3.

Fabrication and Weekly Spirals

This final project is really a bundle of smaller weekly lessons. Some weeks contributed a finished part. Other weeks contributed a failure pattern that I recognized later.

Computer-Aided Design

In CAD week, I explored Fu compositions in Inkscape and Onshape. I learned that a clean vector drawing is not only for appearance. It affects laser cutting, 3D printing, and later image preparation. The Fu character became the visual identity, the display composition, and the logic of the touch interaction.

3D Printing

In 3D printing week, I learned that a shape can look connected on screen but still fail as a physical object. A Fu print separated because the strokes were not structurally connected. Adding a continuous backing layer made it printable. This lesson returned when I designed display holders: visual parts need structural continuity.

Input and Output Devices

The input week taught me to debug sensors physically before blaming code. The output week taught me that a screen lighting up is not the same as a screen working correctly. I saw noisy OLED output, LCD issues, and display library problems before reaching the final ePaper system.

Those frustrations became useful habits:

  • test the smallest working example first
  • confirm the board and pin definitions
  • use Serial Monitor before guessing
  • add one system layer at a time

Networking

Networking week gave me the basic architecture for the final project: one device sends or exposes a state, another device or browser reads it. The most practical lesson was that ESP32 boards need 2.4 GHz WiFi. When the board is trying to connect to the wrong network band, it can look broken even when the code is fine.

Molding and Casting

Molding and casting gave the project both a design language and a cautionary story. I designed ruyi cloud patterns and a circular Fu mold. I also made a very clear chemistry mistake: I poured silicone without adding curing agent. Later I repeated a similar mistake with resin hardener.

That sounds unrelated to a networked door guardian, but the lesson is the same: some systems have essential pairings. Silicone needs catalyst. Resin needs hardener. Electronics need ground. WiFi needs the right band. ePaper needs the right refresh sequence.

Early smart Fu concept with pull ring, screen, frame, and tassel

Main Failures and Fixes

Laser Cutting Tolerance

The first frame could not be assembled. I had designed the pieces as if the material and laser cut were mathematically perfect. They were not. I adjusted the fit and kept testing with physical parts.

Final Door Guardian FU assembly with ePaper display inside the laser-cut diamond frame

Assembly Orientation

Several wooden panels looked almost identical after cutting. I repeatedly assembled them in the wrong direction. The fix was to add clearer orientation references and treat assembly guidance as part of the design.

Missing Ground

One PCB revision had a missing ground connection. The LED did not work because the electrical path did not exist. This was a quiet failure, but an important one.

Touch and OLED Integration

The touch sensor and OLED worked well separately on XIAO Extension Board, but failed to worked together using dupont thread. I had to confirm the pin behavior, also the OLED font sizes that need actually fit the 128 x 128 screen. At one point WELCOME was too large and the last letter was cut off.

ePaper Second Refresh

The ePaper display could show an image once, then hang on later refreshes. The final fix was not cosmetic. I changed the control approach by manually pushing data and refresh commands instead of relying on the library sleep/wake cycle.

Dashboard Repeated Toast

The web dashboard kept showing the visitor toast even when there was no new touch. The fix was to compare the current event with the previous known event and only animate on transition.

Mechanical Integration

Many holders fit their own components but failed when installed in the full object. This was the difference between designing a part and designing an assembly. Cable routing, screw access, display orientation, and vertical mounting only became obvious when everything was together.

What I Designed and Made

I designed and fabricated:

  • the interaction concept and visitor flow
  • the Fu poster graphics for the ePaper display
  • the laser-cut wooden front frame
  • the ePaper holder and rear support structure
  • OLED and touch sensor supports
  • a custom ESP32-C3 PCB workflow
  • the C3 touch/OLED/WiFi firmware
  • the S3 ePaper poster-switching firmware
  • the Node.js server and API
  • the browser dashboard
  • image conversion workflow for the ePaper posters

The project uses existing modules where that made sense, especially for the ePaper driver and sensor hardware, but the system integration, enclosure, interaction logic, dashboard, and final behavior were designed for this project.

Materials and Components

Main electronics:

  • Seeed Studio XIAO ESP32-C3
  • Custom PCB for the C3 interaction board
  • Normal touch sensor
  • Grove 128 x 128 OLED display
  • Seeed EE04 ePaper driver board
  • 7.3 inch Spectra 6 color ePaper display
  • Jumper wires, headers, screws, and USB power

Fabrication materials:

  • plywood for the laser-cut frame
  • PLA filament for holders and support parts
  • resin and silicone from molding/casting experiments
  • screws for the mechanical mounting points

Software:

  • Arduino IDE / Arduino toolchain
  • KiCad
  • Inkscape
  • Onshape
  • Node.js
  • Express
  • Tailwind CSS
  • Python image conversion script
  • Seeed ePaper / display libraries

Evaluation

The final system was evaluated by testing the full interaction loop:

  1. Start the local Node.js server.
  2. Open the dashboard in the browser.
  3. Power the S3 ePaper board and confirm poster 1 appears.
  4. Power the C3 touch board and confirm the OLED idle screen appears.
  5. Touch the sensor.
  6. Confirm the OLED shows Hello / My Friend.
  7. Confirm the server receives the event.
  8. Confirm the dashboard shows the visitor toast.
  9. Confirm the ePaper switches to poster 3.
  10. Use the dashboard reset button to return to poster 1.

The full loop works. It is still a prototype, but it proves the central idea: a visitor can interact with a culturally familiar object, and the object can quietly notify the inside system.

What works well:

  • touch event triggers the network flow
  • OLED gives immediate local feedback
  • dashboard can switch posters manually
  • S3 updates the ePaper only when the poster state changes
  • device status is visible on the dashboard
  • the physical frame communicates the Fu decoration idea

What still needs improvement:

  • the internal wiring could be cleaner and more robust
  • the enclosure could use a more polished rear cover
  • the touch area should be better integrated into the visual design
  • the ePaper refresh remains slow, so interaction timing must respect it
  • the server currently runs locally, not as a long-term deployed service
  • WiFi credentials are still hardcoded in the prototype firmware

Bill of Materials

This is the approximate final-project BOM. Exact prices depend on supplier and local stock.

ItemQuantityPurpose
XIAO ESP32-C31Touch sensing and WiFi event sender
XIAO ESP32-S3 Plus1ePaper display controller
Custom PCB1Main C3 interaction board
Grove touch sensor1Visitor input
Grove 128 x 128 OLED1Local visitor feedback
EE04 ePaper driver board1Driver for 7.3 inch ePaper
7.3 inch Spectra 6 ePaper display1Main ambient Fu display
Plywood sheet1Laser-cut front frame
PLA filamentAs needed3D-printed holders and supports
Screws / headers / wiresAs neededMechanical and electrical assembly
USB power / power bank1-2Prototype power

Project Files

Paths below are repository-relative. In GitLab, open a file and use Download or Raw, or clone the repo to get everything.

Final implementation files:

WhatLink
C3 touch sender firmwarec3_touch_sender.ino
S3 ePaper poster firmwareEE04_S3_Poster.ino
S3 driver configurationdriver.h
Poster bitmap arraysimages.h
Node.js serverserver.js
Web dashboardstatic/img/interface/index.html
Poster conversion scriptconvert.py
Windows quick-launch scriptstart_server.bat
Serial debug helperread_serial.py
Earlier touch/OLED testhelloalison-touchsuccess531.ino
7.3 inch ePaper bitmap exampleBitmap_07inch30.ino
Fu box frame v5.0 (SVG)FU BOX 5.0.svg
Fu box frame v5.0 (DXF)FU BOX 5.0.dxf
Round Fu mold positive (STL)圆形福-3D图.stl

Related weekly documentation:

Final presentation assets:

Implications and Future Development

This project makes me think differently about smart home objects. Many smart devices begin from function and then try to look domestic afterward. Door Guardian - FU begins from a domestic and cultural object, then asks what kind of function belongs there.

Possible future directions:

  • stronger enclosure and cable management
  • battery power or a safer permanent power design
  • more seasonal Fu poster sets
  • a mobile notification option
  • integration with a soft indoor light
  • better weather/time poster modes
  • a more hidden touch area inside the Fu surface
  • AI-generated festival greetings or visitor messages

The most important future improvement would be making the system feel even less like separate modules. In the final prototype, I can still see the seams between wood, holder, board, display, and dashboard. The next version should feel more like one object.

Final Reflection

At the beginning, I thought I was making a smart Fu decoration. By the end, I understood the project more as a conversation between culture and technology.

The Fu character carries memory, blessing, and welcome. The touch sensor gives it a small ritual. The OLED answers the visitor immediately. The server carries the message indoors. The ePaper display changes slowly, almost like a paper sign being replaced. The dashboard makes the invisible network visible.

I also learned that interaction is not only about adding sensors. It is deciding what should happen, when it should happen, how strongly it should respond, and what feeling the response should create. I did not want the visitor to feel like they were pressing a machine button. I wanted the action to feel gentle: touching a Fu, sending a greeting, waking the guardian.

The hardest parts were not always the most impressive-looking parts. A missing ground, a wrong WiFi band, a too-large OLED font, a repeated toast, and an ePaper sleep problem each stopped the project in a different way. At the time, these mistakes felt like delays. Looking back, they are the actual structure of the project. Each failure forced the next spiral.

Door Guardian - FU is still a prototype, but it represents the kind of maker I want to become: someone who can connect personal culture, physical form, electronics, and software into one object that feels meaningful, not only functional.