Week 15 - Interface and Application Programming

Group Assignment

This week as paet of our group assiginment we explorded diffrent type of interface and do commnunication with the hardware project, most of us designined an interface application conected to our final project. as part of this week we explored the web application and mobile application also the diffrent type of communicaton with the hardware device

Butterflies - Architha

The web application is a music playing platform that uses WebSocket over WiFi. It's a two-way, always-open connection between the browser and the ESP32S3. The browser sends short text commands like PLAY, DIAL:45, TRACK:2 and the ESP32 can also send messages back like DURATION:248. It runs on port 81. The reason WebSocket was chosen over simpler options like HTTP requests is because of the dial scrubbing, sending angle updates potentially dozens of times per second as the user drags the disk. WebSocket handles that kind of continuous real-time stream well. A regular HTTP request would be too slow and heavy for that.

The browser page is the control surface for the hardware.

DODO - Kurian

• Built with HTML, CSS and JavaScript — no frameworks, no installation needed
• Served directly from the XIAO ESP32-S3 — just open the device IP in any mobile browser
• Create multiple named task lists and switch between them
• Add, delete and mark tasks done from the browser
• Each list holds up to 10 tasks, 15 characters each — matched to the e-ink display limit
• Progress bar shows completion status per list
• UPDATE IN DO-DO button pushes the selected list to the physical device instantly
• Browser auto-polls the device every 3 seconds — changes made on the hardware reflect in the app automatically
• Web app and device communicate over HTTP REST — GET /tasks to read, POST /tasks to push
• Celebration animation and completion time shown when all tasks are done

Pixel game - Ashtami

The game prototype was developed using Godot Engine as a 2D pixel-art game using GDScript for gameplay programming and logic development. To interface the game with custom hardware, the Seeed Studio XIAO RP2040 was programmed using the Keyboard.h library, allowing the PCB to function as a USB Human Interface Device (HID). The push button on the PCB acts like a keyboard key(space bar) input and controls the jump action inside the game.

Pixel plant - Kevin

A game interface which runs locally using Pygame and PySerial, enabling serial communication between the Python game script and the microcontroller board for real time interaction and feedback.

Smart Piggy App - Michale

The interface is designed as a real-time dashboard for setting a savings goal and tracking deposits as coins are added to the piggy bank. It is built using Kodular, serving as a front-end for input and live data display. At the top, a piggy bank icon establishes context. An input field allows the user to enter a goal amount in rupees, and the “Set Goal” button writes this value to Firebase Realtime Database. The XIAO ESP32-C6 reads this goal and uses it as the reference for all calculations. All computation is handled on the hardware. The XIAO detects coins, maintains the running total, calculates progress, and records the last coin. These values are sent to Firebase over WiFi after each event. The app listens to Firebase and updates the interface in real time without performing any calculations. It displays: Total Amount (cumulative savings) Progress (goal completion) Last Coin (most recent input) The system operates as a two-way communication loop via Firebase: Goal is written from the app and read by the XIAO Processed data is written by the XIAO and read by the app The layout follows a clear vertical flow—goal input, total savings, progress, and last coin—using familiar financial visuals to keep interaction intuitive. Overall, the setup separates roles clearly: Kodular handles interaction, Firebase manages synchronization, and the XIAO ESP32-C6 executes all logic, forming a responsive, event-driven system connected to the physical piggy bank.

Time sync - Ardhra

I built a BLE based time sync system where a web app sends UTC time and timezone to an ESP32 S3, which passes it over UART to an ATtiny1614 that converts it to local time and stores it in a DS1307 RTC.