Project Development¶

This section documents the complete development process of my final project from the initial sketch to the assembly and testing of the finished system.

My final project is an interactive physical dashboard shaped like the map of Côte d'Ivoire. Using electronics and digital fabrication, this device visualizes UNDP's regional actions in real-time. It transforms complex data into a tangible, light-coded experience, showcasing our developmental impact across the country's cities through innovation and technology.

It is also a Smart Clock Trophy the TFT screen embedded in the base displays the real-time clock and date, while the custom PCB mounted in the translucent map silhouette lights up with RGB LEDs geo-located across the country's regions.

¶

01. Sketch & System Architecture¶

The project was designed around two deeply integrated layers data visualization and timekeeping fused into a single physical artifact:

• The PCB map panel a custom circuit board shaped as the map of Côte d'Ivoire, with RGB LEDs positioned at key UNDP intervention cities across the country, producing a geo-coded light display
• The base enclosure a 3D-printed black box housing the ESP32 microcontroller, the TFT screen (real-time clock + date), and the interactive push buttons

The system is built around the ESP32 microcontroller, which simultaneously: - Controls the RGB LEDs on the map PCB to visualize UNDP regional data - Displays real-time clock and date on the TFT screen - Reads input from the push buttons to switch display modes - Connects to Wi-Fi to sync time via NTP and optionally fetch live data

02. Enclosure Design¶

For the 3D design of the device enclosure, I used SolidWorks.

The enclosure is made up of two parts:

• The base a black box housing the ESP32, the TFT screen, and the push buttons
• The trophy panel a translucent acrylic silhouette of Côte d'Ivoire holding the custom PCB

Design files:

• Enclosure STL file
• **Enclosure SolidWorks

03. 3D Printing¶

The enclosure base was printed using the Prusa MK4S available in our FabLab.

Printing parameters used:

For more details on the 3D printing procedure, refer to Week 5 3D Scanning and Printing.

04. Laser Cutting & Vinyl Cutting¶

Laser Cutting Côte d'Ivoire Silhouette¶

The trophy panel (the map silhouette) was cut from translucent acrylic using the Epilog Laser available in our FabLab.

For more details on the laser cutting procedure, refer to Week 3 Computer Controlled Cutting.

Design file:

• [Panel DXF file]

Vinyl Cutting Finishing Details¶

Vinyl cutting was used to add decorative finishing details to the panel surface.

05. Electronics Design¶

For the electronic design of the system, I used KiCad.

The circuit integrates the following components on a single custom PCB shaped as the map of Côte d'Ivoire:

• ESP32 microcontroller the brain of the system
• TFT LCD screen displays the real-time clock and date on the base
• RGB LEDs (NeoPixel ) each LED is geo-located on the map, representing a UNDP intervention city; their colors encode the type or status of the program
• Push buttons allow the user to switch between display modes (clock, data visualization, animations)
• Buzzer audio feedback for interactions

For more details on the electronics design process, refer to Week 6 Electronics Design.

Below is the schematic and PCB layout of the circuit:

Circuit schematic

PCB layout

PCB 3D view

Design files:

06. Electronics Production¶

The PCB was fabricated using the Roland SRM-20 milling machine in our FabLab.

Tools used:

For the full milling and soldering procedure, refer to Week 8 Electronics Production.

07. ESP32 Programming¶

For programming details, refer to [Week 4 Embedded Programming] and Week 14 Interface and Application Programming.

Overview¶

The ESP32 runs the following tasks simultaneously:

• Syncs time via NTP over Wi-Fi and formats the clock/date display
• Renders real-time time and date on the TFT LCD screen
• Controls geo-located RGB LEDs on the map PCB — each LED represents a UNDP intervention city, with colors encoding the type of program (health, education, environment, governance...)
• Handles push button inputs to switch between display modes:
• Mode 1 — Clock : displays time and date, LEDs show a passive ambient animation
• Mode 2 — UNDP Map : each LED lights up according to the programmed UNDP data per region
• Mode 3 — Highlight : sequential lighting of cities with a description on the TFT screen

Libraries Used¶

Pin Configuration¶

TFT Screen

RGB LEDs

Push Buttons

Main Loop Logic¶

Loop:
├── Check button inputs → switch display mode
├── Mode 1 — Clock:
│   ├── Read current time via NTP
│   ├── Display time (HH:MM:SS) on TFT screen
│   ├── Display date (YYYY-MM-DD) on TFT screen
│   └── LEDs → ambient animation (breathing / rainbow)
├── Mode 2 — UNDP Map:
│   ├── Load UNDP regional data (stored in flash / fetched via Wi-Fi)
│   ├── For each city LED:
│   │   ├── Set color based on program type (health=blue, education=yellow, env=green...)
│   │   └── Set brightness based on program intensity
│   └── TFT screen → display active program count & region name
└── Mode 3 — Highlight Tour:
    ├── Loop through each city sequentially
    ├── Light up corresponding LED (white flash)
    └── TFT screen → display city name + UNDP program summary

Complete Code¶

08. Assembly & Final Testing¶

Once all modules were validated individually, I assembled the full system:

1. Solder all components on the custom map-shaped PCB (LEDs, connectors)
2. Insert the PCB into the translucent acrylic silhouette of Côte d'Ivoire
3. Mount the silhouette panel on top of the 3D-printed black base
4. Install the TFT screen, push buttons, and ESP32 inside the base enclosure
5. Final wiring and cable management between base and panel
6. Power-on test — verify clock display, NTP sync, and LED geo-visualization
7. Validate all 3 interactive modes and button switching
8. Final demo — showcase UNDP regional data visualized across the map

09. Files¶

| Download project files | 2D or DXF model for final projet | | Download all Enclosure file | 3D model |