<div align="center">

Futuristic Interactive Restaurant Signage System

Promotion Display • Voice Ordering • Staff Dashboard

A Raspberry Pi-powered cyberpunk kiosk combining AI vision, voice interaction, and real-time restaurant management.

</div>

📑 Contents

• 🚀 Overview
• ❓ Problem & Solution
• 🏗️ System Architecture
• 🔧 Hardware Components
• 💻 Software Stack
• 👤 Customer Journey
• 👨‍🍳 Staff Dashboard
• 🖥️ Physical Design & Enclosure
• 🔩 Build Assembly
• 📷 ESP32 Integration
• 🎙 Voice Recognition
• 🌐 WebSocket Architecture
• ⭐ Post-Dine Review System

✨ Key Features

🚀 Overview

> CYBERWAVE is a futuristic, cyberpunk-inspired interactive restaurant signage system that combines promotion display, touch & voice ordering, and a real-time staff dashboard into a single Raspberry Pi-powered kiosk.

❓ Problem & Solution

In today's competitive food industry, restaurant signage has evolved at a fraction of the pace of everything else. Most restaurants still rely on static chalkboards, printed menus, and plasticized displays, passive by nature, offering zero engagement and zero data. The result is a forgettable first impression at the exact moment a business needs to be memorable.

CYBERWAVE transforms passive restaurant signage into an intelligent customer experience. Designed as an all-in-one kiosk, it serves as:

• 📢 Dynamic promotional display
• 🍔 Interactive touchscreen ordering menu
• 🎙 Voice-controlled ordering system
• 📈 Real-time restaurant analytics dashboard

Whether placed at a front desk, reception counter, customer table, or outside a food truck, CYBERWAVE creates a memorable and engaging dining experience.

<table> <tr> <td width="50%"> <img src="images/cyberwave/image1.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image2.png" width="100%"> </td> </tr>

<tr> <td colspan="2"> <img src="images/cyberwave/image3.png" width="100%"> </td> </tr> </table>

🏗️ System Architecture

CYBERWAVE runs entirely as a web application hosted on a Raspberry Pi 5 inside a local network.

📌 Architecture Summary

<br> The backend is built with Django and Django REST Framework, while the frontend is developed in Angular and served through nginx in Chromium kiosk mode.

Real-time communication is handled by Django Channels over WebSockets, allowing both the AI camera and voice recognition system to instantly notify the frontend of events.

🔧 Hardware Components (BOM)

Bill of Materials

• Raspberry Pi 5 + Heatsink
• Purpose: Main compute platform
• Quantity: 1
• Cost: $160
• Link: Amazon

• Hosyond 7" Touchscreen
• Purpose: Customer interface
• Quantity: 1
• Cost: $39
• Link: Amazon

• XIAO Vision AI Camera + XIAO ESP32C3
• Purpose: Face detection & inference events
• Quantity: 1
• Cost: Free (contest) / $26.90
• Link: Seeed Studio

• reSpeaker XVF3800
• Purpose: Voice recognition
• Quantity: 1
• Cost: Free (contest) / $60.90
• Link: Seeed Studio

• USB Speaker
• Purpose: Audio output
• Quantity: 1
• Cost: $14
• Link: Amazon

• Elegoo Matte Black PLA
• Purpose: Enclosure body
• Quantity: 1
• Cost: $10
• Link: Amazon

• Sunlu Cyan Glow PETG
• Purpose: Accent pieces
• Quantity: 1
• Cost: $25
• Link: Amazon

• M3/M2 Hardware Kit
• Purpose: Mechanical assembly
• Quantity: 1 kit
• Cost: $8
• Link: Amazon

• UV Flashlight
• Purpose: Charge glow-in-the-dark PETG
• Quantity: 1
• Cost: $8
• Link: Amazon

> XIAO Vision AI Camera and reSpeaker XVF3800 were generously provided by Seeed Studio as part of the Interactive Signage Contest 2026.

💻 Software Stack

<br> CYBERWAVE was developed entirely using Visual Studio Code for the full-stack web application and Arduino IDE for the embedded ESP32 firmware. The web application is built on Angular 20 and Django 5, chosen for their real-time capabilities, Django Channels handles WebSocket communication for live event broadcasting, while Django REST Framework manages the API layer for orders, menu items, and analytics.

Python was the natural backend choice given my existing experience with the language. Angular's signal-based reactivity and standalone component architecture made it ideal for a kiosk UI that needs instant state changes without page reloads. The ESP32 firmware is written in C++ using the Arduino ecosystem, leveraging the built-in WiFi stack to POST detection events to the Django backend over the local network. For the physical enclosure, Fusion 360 was used for the full 3D design and engineering, and OrcaSlicer for slicing and print preparation.

👤 Customer Journey

The customer experience begins with a futuristic boot screen before transitioning into an idle promotional display.

Once the AI camera detects a customer, CYBERWAVE presents a welcome screen where users can choose between:

• 📱 Touch Ordering
• 🎙 Voice Ordering

Both interaction methods lead to the same ordering workflow:

1. Browse menu categories
2. Add items to cart
3. Review order
4. Confirm purchase
5. Receive order number
6. Submit a pre-dine rating

<table> <tr> <td width="50%"> <img src="images/cyberwave/image7.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image8.png" width="100%"> </td> </tr>

<tr> <td width="50%"> <img src="images/cyberwave/image9.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image10.png" width="100%"> </td> </tr>

<tr> <td width="50%"> <img src="images/cyberwave/image11.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image12.png" width="100%"> </td> </tr>

<tr> <td colspan="2"> <img src="images/cyberwave/image13.png" width="100%"> </td> </tr> </table>

👨‍🍳 Staff Dashboard

Accessible through a PIN-protected interface or any browser on the local network.

The main view displays all active orders with their status, which staff advance manually through the workflow: Waiting → Preparing → Ready → Delivered → Payment Pending → Completed. When an order is marked Completed, the post-dine QR review activates automatically for that desk. The tables view shows all nine desks on a grid, color-coded by status, green for available, yellow for waiting, blue for occupied, and red for needing attention after 15 minutes. The menu view provides a read-only reference for all items and prices. The analytics dashboard consolidates the most operationally valuable data: active orders, total income, popular items, peak ordering hours, voice versus touch interaction split, and both pre-dine and post-dine satisfaction scores

<br>

📌 Order Workflow

Waiting
↓
Preparing
↓
Ready
↓
Delivered
↓
Payment Pending
↓
Completed

<table> <tr> <td width="50%"> <img src="images/cyberwave/image14.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image15.png" width="100%"> </td> </tr>

<tr> <td width="50%"> <img src="images/cyberwave/image16.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image17.png" width="100%"> </td> </tr>

<tr> <td width="50%"> <img src="images/cyberwave/image18.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image19.png" width="100%"> </td> </tr> </table>

🖥️ Physical Design & Enclosure

The CYBERWAVE enclosure was designed from scratch in Fusion 360, with every component measured and modeled before printing began. The front face holds the 7-inch touchscreen at a 45-degree angle for a more natural customer interaction posture, the screen is retained by four alignment holes and a printed frame rather than screws, making it serviceable without tools. The Raspberry Pi 5 mounts directly to the rear of the screen assembly, keeping the compute and display tightly integrated.

The top of the enclosure features a precision-fit cavity for the XIAO Vision AI Camera, with cable routing channels feeding down to the Pi. The rear panel includes a modular, snap-on housing designed specifically for the reSpeaker XVF3800, positioned to keep the LED ring visible and the four-microphone array unobstructed, with a dedicated cable pass-through. A rear cable exit handles the power supply.

The enclosure is printed in matte black PLA for the structural body, giving it a clean, minimal aesthetic. The accent pieces, border trim and feet, are printed in cyan glow-in-the-dark PETG, which charges passively from ambient light and emits a soft diffused neon glow without any active LEDs. Assembly uses M3 screws and brass heat-set inserts throughout.

<table> <tr> <td width="50%"> <img src="images/cyberwave/image20.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image21.png" width="100%"> </td> </tr>

<tr> <td width="50%"> <img src="images/cyberwave/image22.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image23.png" width="100%"> </td> </tr> </table>

🔩 Build Assembly

Assembly begins after the base print completes. A soldering iron is used to press the brass heat-set inserts into their designed holes, providing threaded metal anchors for the M3 screws throughout the enclosure.

With inserts seated, the USB-C cables for the reSpeaker, XIAO camera, and USB speaker are routed through the internal cable channels before closing the enclosure, threading them early avoids disassembly later. Each device connects via USB-C on the device side and USB-A into the Raspberry Pi. The Raspberry Pi 5 mounts directly to the rear of the 7-inch touchscreen, eliminating the need for a separate mounting bracket. The screen assembly drops into four alignment holes on the front face, and the screen border frame is screwed down to apply pressure and lock the display in place without adhesive, keeping it fully serviceable.

The cyan glow-in-the-dark PETG accent pieces are added last and secured with hot glue. The base is screwed into position with the USB speaker fixed internally using double-sided tape. At this point the enclosure is complete, fully wired, and ready to run

<table> <tr> <td width="50%"> <img src="images/cyberwave/image31.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image32.png" width="100%"> </td> </tr>

<tr> <td width="50%"> <img src="images/cyberwave/image33.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image34.png" width="100%"> </td> </tr>

<tr> <td width="50%"> <img src="images/cyberwave/image35.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image36.png" width="100%"> </td> </tr> </table>

How to Replicate CYBERWAVE

> Everything you need to rebuild this project from scratch. All software is open source, all hardware is off-the-shelf, and the enclosure is fully 3D printable.

Repository

GitHub: https://github.com/jorgeeldis/cyberwave

> Clone the repo first, all configuration files, firmware, and setup scripts are included.

Wiring & Connections

Raspberry Pi 5

<br> The Raspberry Pi 5 mounts directly to the rear of the 7" touchscreen via the standard mounting holes, no separate bracket needed.

XIAO Vision AI Camera → XIAO ESP32C3

<br> Connect via the Grove connector, no soldering required. The XIAO ESP32C3 connects to the Pi via USB-C for power and connects to the network over WiFi.

Upload the Face Detection Model from SenseCraft: https://sensecraft.seeed.cc/ai/view-model/60094-face-detection?tab=public&from=model-library

reSpeaker XVF3800

Plug directly into any USB-A port on the Raspberry Pi. No GPIO wiring needed, it is a USB audio device. Firmware must be flashed on first boot (handled automatically by the udev rule in the repo).

3D Print Settings

Enclosure Body (Matte Black PLA)

<br>

Accent Pieces (Cyan Glow PETG)

<br> > After printing accent pieces, charge with a UV flashlight for 2–3 minutes for maximum glow intensity.

Getting Started, Step by Step

1. Flash Raspberry Pi OS

• Download Raspberry Pi Imager
• Flash Raspberry Pi OS (64-bit) to a microSD card
• Enable SSH and set hostname/password in Imager settings before flashing

2. Clone the repository

git clone https://github.com/jorgeeldis/cyberwave.git
cd cyberwave

3. Install system dependencies

sudo apt update && sudo apt upgrade -y
sudo apt install -y nodejs npm nginx python3-pip python3-venv portaudio19-dev
sudo npm install -g @angular/cli

4. Install Python dependencies

cd backend
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
cd ..
pip install -r voice_requirements.txt

5. Configure environment variables

cp backend/.env.example backend/.env
nano backend/.env   # set SECRET_KEY and other values

6. Configure WiFi credentials for ESP32

Open ai_camera_arduino/ai_camera_arduino.ino and update:

const char* ssid     = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";
const char* serverName = "http://YOUR_PI_IP/api/events/";

7. Flash ESP32 firmware

• Open Arduino IDE
• Install the Seeed SSCMA library via Library Manager
• Select board: XIAO_ESP32C3
• Flash ai_camera_arduino/ai_camera_arduino.ino
• For setup help: https://wiki.seeedstudio.com/XIAO_ESP32C3_Getting_Started/

8. Flash reSpeaker firmware

Plug in the reSpeaker, the udev rule handles flashing automatically on first connection. Wait 8 seconds for re-enumeration. Verify with:

arecord -l
# Should show: card X: Array [reSpeaker XVF3800 4-Mic Array]

Note the card index and update RESPEAKER_INDEX in voice_recognition.py if it differs from 3.

9. Run database migrations

cd backend
source venv/bin/activate
python manage.py migrate

10. Seed the menu

python manage.py shell < scripts/seed_menu.py

11. Build Angular frontend

cd frontend
npm install
ng build --configuration production

12. Configure nginx

sudo cp config/cyberwave.nginx /etc/nginx/sites-available/cyberwave
sudo ln -s /etc/nginx/sites-available/cyberwave /etc/nginx/sites-enabled/
sudo rm -f /etc/nginx/sites-enabled/default
sudo nginx -t && sudo systemctl restart nginx

13. Enable autostart services

sudo cp config/cyberpunk.service /etc/systemd/system/
sudo cp config/voice.service /etc/systemd/system/
sudo systemctl daemon-reload
sudo systemctl enable cyberpunk.service voice.service
sudo cp config/kiosk.desktop /etc/xdg/autostart/

14. Reboot

sudo reboot

The system boots directly into Chromium kiosk mode, the Django backend starts automatically via systemd, and the voice recognition service activates once the reSpeaker is ready.

Seeding Analytics (optional)

Generate realistic sample order and review data for the staff dashboard:

cd backend
source venv/bin/activate
python manage.py seed_analytics --days 35

Default Staff PIN

The default staff dashboard PIN is 1234, change it immediately via the Settings tab after first login.

Analytics & Dashboard Documentation

The staff dashboard is powered by the Django REST API and surfaces operational metrics from live order data. It is intended for kiosk staff to monitor order flow, table activity, review sentiment, and interaction usage.

Analytics Overview

The Analytics section displays the following metrics:

• Active orders count
• Total orders count
• Total income generated from completed and active orders
• Top 5 popular menu items by quantity sold
• Review counts and average ratings by review type (pre_dine and post_dine)
• Peak-hour distribution across morning, afternoon, evening, and night
• Interaction mode split between touch and speak orders

🔌 API Endpoints

Base path: /api/

• GET /api/menu/

• Purpose: Return all available menu items

• GET /api/orders/

• Purpose: Return all orders

• POST /api/orders/create/

• Purpose: Create a new order with nested items

• GET /api/orders/active/

• Purpose: Return currently active orders

• GET /api/orders/<order_id>/

• Purpose: Return a single order by ID

• PATCH /api/orders/<order_id>/update_status/

• Purpose: Update an order status

• GET /api/tables/status/

• Purpose: Return the current status for each active table

• GET /api/reviews/check/<desk_number>/

• Purpose: Check whether a review exists for a completed desk order

• GET /api/analytics/overview/

• Purpose: Return analytics summary payload for the dashboard

• POST /api/interactions/

• Purpose: Log a kiosk interaction event

• POST /api/reviews/

• Purpose: Submit a new review

• GET /api/staff/

• Purpose: Return staff accounts

• POST /api/events/

• Purpose: Broadcast a device event to the kiosk WebSocket channel

<br>

🗄️ Django Models

• Staff

• Purpose: Stores staff access credentials for dashboard login

• Key Fields: id, name, code

• Relationships: No foreign-key relationships

• InteractionEvent

• Purpose: Tracks kiosk interaction telemetry

• Key Fields: id, order, event_type, timestamp, duration

• Relationships: Belongs to an Order (optional)

• MenuItem

• Purpose: Defines the menu catalog

• Key Fields: id, section, name, description, price, image_url, available

• Relationships: Used by OrderItem

• Order

• Purpose: Represents a customer order

• Key Fields: id, table_number, status, interaction_mode, timestamp

• Relationships:

• Has many OrderItem

• Has many InteractionEvent

• Has many Review records

• OrderItem

• Purpose: Links an order to a menu item and quantity

• Key Fields: id, order, menu_item, quantity

• Relationships:

• Many-to-one with Order

• Many-to-one with MenuItem

• Review

• Purpose: Stores customer feedback

• Key Fields: id, order, rating, comment, review_type, timestamp

• Relationships:

• Belongs to an Order

<br>

Database Schema

The backend currently uses SQLite for local development, with the database file at backend/db.sqlite3.

ORDER {
int id PK
int table_number
string status
string interaction_mode
datetime timestamp
}

MENU_ITEM {
int id PK
string section
string name
string description
decimal price
string image_url
bool available
}

ORDER_ITEM {
int id PK
int order_id FK
int menu_item_id FK
int quantity
}

INTERACTION_EVENT {
int id PK
int order_id FK
string event_type
datetime timestamp
float duration
}

REVIEW {
int id PK
int order_id FK
int rating
string comment
string review_type
datetime timestamp
}

Notes for Dashboard Operations

• The analytics endpoint aggregates data from orders, order items, reviews, and interaction events in one payload.
• The dashboard is driven by the staff view in the Angular frontend and consumes the analytics overview endpoint directly.
• The reviews/check/<desk_number>/ endpoint is used for desk-based review prompts and lookup flow.

🛠️ Troubleshooting

• reSpeaker not detected

• Fix: Unplug and replug, udev rule reflashes automatically

• Voice recognition not starting

• Fix:

sudo systemctl status voice.service

Check service logs for errors.

• Frontend not loading
• Fix:

sudo systemctl status nginx

Verify nginx is running.

• Camera not detecting

• Fix: Check ESP32 serial output in Arduino IDE.

• WebSocket not connecting

• Fix:

sudo systemctl status cyberpunk

Confirm Daphne is running.

• Audio not playing
• Fix: Verify Chromium launched with:

--autoplay-policy=no-user-gesture-required

• New build not picked up
• Fix:

rm -rf ~/.cache/chromium/Default/Cache

Clear browser cache.

🎙 Voice Recognition

The voice recognition pipeline runs as an independent Python process on the Raspberry Pi, using the reSpeaker XVF3800 4-microphone array as input. The XVF3800 performs hardware-level beamforming and noise suppression before audio even reaches the software layer, which is critical in a noisy restaurant environment.

On boot, a udev rule detects the reSpeaker in DFU mode and automatically flashes the USB firmware using dfu-util. Once the device re-enumerates as a USB audio interface, a systemd service starts the voice recognition process as the admin user with full access to the ALSA audio session.

Speech is captured using Python's speech_recognition library and transcribed via Google Speech Recognition. Recognized text is matched against a predefined command set using exact matching first, falling back to difflib fuzzy matching with a 0.6 similarity threshold to handle accent variation and cyberpunk menu item names that speech models have never been trained on. Matched commands are POSTed to the Django backend as voice_command events, entering the same WebSocket pipeline as camera events and reaching the Angular frontend in real time

<table> <tr> <td width="50%"> <img src="images/cyberwave/image27.png" width="100%"> </td> <td width="50%"> <img src="images/cyberwave/image28.png" width="100%"> </td> </tr> </table>

🌐 WebSocket Architecture

Real-time communication between hardware, backend, and frontend is handled through Django Channels over WebSockets. All connected hardware, the ESP32 camera module and the voice recognition process, communicates with Django via standard HTTP POST to a single /api/events/ endpoint. Django processes the event, logs it as an InteractionEvent, and broadcasts it to a shared kiosk channel group via the in-memory channel layer.

The Angular frontend maintains a persistent WebSocket connection to ws://localhost/ws/kiosk/ from app initialization. Incoming messages are parsed and routed through a KioskStateService, which holds the current UI state as an Angular signal. Components across the application react to state changes through Angular's effect() system, triggering view transitions, modal appearances, and voice command handling without any polling or manual change detection.

To handle repeated identical commands, a natural occurrence in voice ordering, each incoming payload is wrapped with a timestamp before being set on the signal, guaranteeing a new object reference and forcing the effect to re-run even when the command string is unchanged.

⭐ Post-Dine Review System

CYBERWAVE captures customer feedback at two distinct moments in the dining experience, keeping pre-dine and post-dine satisfaction as separate metrics in the analytics dashboard. Pre-dine feedback is collected immediately at the kiosk on the order confirmation screen, a 5-star rating prompt appears after the order is placed, capturing the customer's impression of the ordering experience while it's still fresh. This requires no additional hardware and completes in seconds before the customer walks to their table.

Post-dine feedback is collected via a permanently affixed QR code on each desk surface. The QR links to a lightweight mobile web app styled with the same cyberpunk aesthetic as the kiosk. The link is inactive by default, only when staff advances an order status to Completed does the backend activate that desk's review link. This prevents premature or duplicate reviews and ties the review directly to a completed order in the database. Submitted ratings feed into the analytics dashboard as a separate post-dine satisfaction score, giving restaurant operators a complete picture of both the ordering experience and the dining experience as independent data points

<div align="center">

Built with Django • Angular • Raspberry Pi 5 • Seeed Studio Hardware

A cyberpunk-inspired interactive restaurant signage system integrating AI vision, voice interaction, and real-time restaurant management.

⭐ Interactive Signage Contest 2026 Participant

</div>