Interface & Application Programming
Key captures from the group and individual assignments with links to their sections.
This week focuses on creating user interfaces and applications that connect users with input and output devices. We'll explore interface design patterns, application programming techniques, and how to build interactive systems that provide meaningful user experiences.
Training materials and documentation for interface and application programming.
No recitation this week.
Essential resources for interface and application programming.
Interface and Application Programming - MIT Academy
Comprehensive resource covering interface design, application programming, GUI frameworks, embedded UI development, web interfaces for embedded systems, and user interaction patterns. Includes detailed tutorials, code examples, and implementation guides for various interface programming tools and frameworks.
Write an application that interfaces a user with an input &/or output device that you made. This assignment demonstrates two interface applications: a simple button user interface on OLED and a real-time graphical user interface through OLED and Wi-Fi for pulse oximeter readings.
A dual-interface health monitoring system that interfaces users with a MAX30102 pulse oximeter sensor through both an OLED display and a WiFi-enabled web interface. The system provides real-time visualization of heart rate (BPM), blood oxygen saturation (SpO2), and raw sensor data (IR and RED LED readings) through multiple output channels. Users can view data locally on the OLED display or remotely via a web browser accessing the ESP32-S3's built-in HTTP server. See Ethical AI Use: I2C Device Not Found for troubleshooting documentation.
The system provides dual-interface access: a local OLED display shows real-time sensor readings (IR, RED, BPM, SpO2) with visual heartbeat indicators, while a WiFi web interface provides comprehensive data visualization including numerical displays and real-time plotting charts. The web interface uses Chart.js for dynamic graph generation and automatically refreshes every 300ms to maintain real-time data updates. Both interfaces run simultaneously, enabling local monitoring and remote access.
Initial OLED display test showing successful I2C communication and display initialization. See Ethical AI Use: Hello World Code for development details.
Real-time pulse oximeter data displayed on OLED showing IR and RED LED readings, heart rate (BPM), and blood oxygen saturation (SpO2) percentage. A heartbeat indicator flashes when a pulse is detected. See Ethical AI Use: MAX30102 Initialization Fix for sensor setup documentation.
WiFi web interface providing remote access to pulse oximeter data through a responsive HTML dashboard. The interface displays real-time numerical values for BPM, SpO2, IR, and RED readings with automatic data refresh. The web server runs on the ESP32-S3, allowing access from any device on the same WiFi network.
Enhanced WiFi web interface with real-time plotting capabilities using Chart.js library. The interface displays live line charts for BPM and SpO2 values, showing trends over time with automatic scrolling and data point management. This visualization enables users to observe patterns in heart rate and blood oxygen levels during monitoring sessions.
Successful I2C device detection after fixing power isolation issues. The system now correctly identifies the OLED display at address 0x3C and the MAX30102 sensor at address 0x57. Initial troubleshooting required isolating the RD (red LED) and IRD (infrared LED) ground terminals from the general ground plane to prevent power issues and enable proper sensor operation.
20:04:48.612 -> Scanning...
20:04:48.644 -> I2C device found at address 0x3C !
20:04:48.644 -> I2C device found at address 0x57 !
20:04:48.644 -> done
Summary of how each interface application connects users with input and output devices.
| Application | How It Interfaces with the User | Input Device(s) | Output Device(s) |
|---|---|---|---|
| (a) Button User Interface | Button press patterns (single, double, triple press, hold) provide mode selection input. OLED display shows current menu state and mode options. Users receive immediate visual feedback for each interaction. | Button (GPIO pin 4) | OLED Display (SSD1306, I²C 0x3C) LED (GPIO pin 3, flashlight mode) |
| (b) Real-Time GUI (OLED & WiFi) | Physical finger placement on MAX30102 sensor provides input. OLED displays real-time sensor data locally. WiFi web interface enables remote monitoring with numerical displays and live plotting charts accessible from any web browser. | MAX30102 Pulse Oximeter Sensor (I²C 0x57) | OLED Display (SSD1306, I²C 0x3C) WiFi Web Interface (HTTP Server with Chart.js visualization) |
Compare as many tool options as possible for interface and application programming.
Comprehensive comparison of interface and application programming tools available for embedded systems and IoT development. This analysis covers tools from the MIT Academy Interface & Application Programming class page, evaluating their capabilities, use cases, and trade-offs for different application scenarios.
| Tool/Framework | Description | Pros | Cons | Best For |
|---|---|---|---|---|
| OLED (SSD1306) | Monochrome OLED displays via I²C | Low power, high contrast, simple I²C interface, pixel-level control | Limited resolution (128x64), monochrome only, small display size | Status displays, sensor readouts, simple menus, embedded dashboards |
| LCD Character Displays | Character-based LCD displays (16x2, 20x4) | Simple API, readable in sunlight, low cost | Limited to text/characters, no graphics, requires backlight power | Text-only interfaces, status messages, debugging output |
| TFT Color Displays | Full-color TFT LCD displays | Color graphics, touch support, high resolution | High power consumption, complex drivers, larger footprint | Rich GUIs, image display, interactive touch interfaces |
| Tool/Framework | Description | Pros | Cons | Best For |
|---|---|---|---|---|
| HTTP Server (ESP32) | Built-in HTTP server on ESP32 for web interfaces | Remote access, cross-platform (any browser), no app installation, real-time updates | Requires WiFi, network dependency, limited to local network without port forwarding | Remote monitoring, data visualization, control panels, sensor dashboards |
| WebSockets | Real-time bidirectional communication | Low latency, bidirectional, efficient for frequent updates | More complex than HTTP, requires persistent connection | Real-time streaming, interactive controls, live data feeds |
| Chart.js | JavaScript charting library for web interfaces | Beautiful charts, interactive, responsive, easy integration | Requires JavaScript, CDN dependency or local hosting | Data visualization, time series plots, sensor monitoring dashboards |
| Tool/Framework | Description | Pros | Cons | Best For |
|---|---|---|---|---|
| React Native | Cross-platform mobile app framework | Cross-platform (iOS/Android), native performance, large ecosystem | Complex setup, requires mobile development knowledge | Full-featured mobile apps, production deployments |
| Flutter | Google's UI toolkit for cross-platform apps | Single codebase, high performance, customizable UI | Dart language, larger app size, learning curve | Custom mobile interfaces, platform-specific designs |
| Progressive Web Apps (PWA) | Web apps with native-like features | No app store, cross-platform, offline capability | Limited native API access, browser dependency | Web-based mobile interfaces, simple deployment |
Detailed comparison of the specific interface programming tools implemented in this week's individual assignment, evaluating their performance, ease of use, and suitability for embedded health monitoring applications.
| Aspect | Evaluation |
|---|---|
| Ease of Implementation | Simple I²C interface, well-documented Adafruit library, minimal wiring (SDA, SCL, power, ground) |
| Display Quality | High contrast monochrome display, crisp text rendering, suitable for sensor data visualization |
| Power Consumption | Very low power draw, ideal for battery-powered applications |
| Limitations | 128x64 pixel resolution limits detail, monochrome only, small physical size (0.96" typical) |
| Best Use Cases | Local sensor readouts, menu systems, status indicators, simple data displays |
| Aspect | Evaluation |
|---|---|
| Ease of Implementation | ESP32 WebServer library provides straightforward HTTP server, Chart.js CDN integration requires minimal setup |
| Remote Access | Accessible from any device on WiFi network (phone, tablet, computer), no app installation required |
| Visualization Capabilities | Chart.js enables rich data visualization with real-time plotting, smooth animations, and interactive features |
| Real-Time Updates | JSON API endpoint provides efficient data transfer, 300ms refresh rate maintains responsive feel |
| Limitations | Requires WiFi network, limited to local network without additional configuration, power consumption higher than OLED alone |
| Best Use Cases | Remote monitoring, data logging visualization, multi-user access, professional dashboards |
| Aspect | Evaluation |
|---|---|
| Implementation Approach | Digital GPIO reading with debouncing, press pattern detection (single/double/triple/hold) enables mode navigation |
| User Experience | Intuitive press patterns, immediate visual feedback on OLED, no complex UI navigation required |
| Reliability | Hardware debouncing with INPUT_PULLUP, timeout-based pattern recognition prevents accidental triggers |
| Limitations | Limited to single button interaction, pattern learning required, less flexible than touchscreen interfaces |
| Best Use Cases | Simple mode selection, menu navigation, embedded system controls, low-cost input solutions |
The combination of OLED display and WiFi web interface provides complementary benefits: OLED offers immediate local feedback with minimal latency and power consumption, while the WiFi interface enables rich visualization and remote access. The button-based input provides an intuitive, low-cost navigation method suitable for embedded systems. Together, these tools create a robust interface system that supports both local and remote interaction with sensor data.
Design files and code documentation for interface and application programming projects.
Code files for ESP32-S3 development board interfaces including I2C scanning, OLED display control, and button-based user interface systems. See Week 4 documentation for board design and Week 8 documentation for pinout configurations.
i2cscan_generic.ino)Utility code for scanning and detecting I2C devices on the bus, essential for troubleshooting connection issues.
SETUP:
Initialize I2C bus
Initialize Serial communication
Print "I2C Scanner" message
LOOP:
Print "Scanning..." message
Initialize device counter to 0
FOR each address from 1 to 126:
Begin I2C transmission to address
Check transmission result
IF transmission successful (error == 0):
Print device found at address (hex format)
Increment device counter
ELSE IF unknown error (error == 4):
Print unknown error at address
IF no devices found:
Print "No I2C devices found"
ELSE:
Print "done"
Wait 5 seconds before next scan
hello_world.ino)Basic OLED display test code that initializes the display and shows "Hello World" text, confirming I2C communication and display functionality.
SETUP:
Initialize Serial communication at 115200 baud
Wait 500ms for Serial to stabilize
Initialize I2C bus with SDA pin 5, SCL pin 6
Print "Starting..." message
Attempt to initialize OLED display:
IF initialization fails:
Print "OLED not found" error
Enter infinite loop (halt)
Clear display buffer
Set text size to 2
Set text color to white
Set cursor position to (0, 20)
Print "Hello" line
Print "World!" line
Update display (send buffer to hardware)
LOOP:
Empty (runs once, then waits)
display.display() to send buffer to hardware; drawing functions only modify bufferoutputs.ino)Mode-based navigation system using button press patterns (single, double, triple, hold) to control multiple output devices including OLED display, camera, sensors, and LED flashlight.
SETUP:
Initialize OLED display
Initialize camera module
Initialize sensors (MPU6050, HX711)
Initialize button pin (INPUT_PULLUP)
Initialize LED pin (OUTPUT)
Set current mode to MENU
Display menu screen
LOOP:
Read button state
IF button pressed:
Record press start time
Start press detection timer
IF button released:
Calculate press duration
IF duration > HOLD_THRESHOLD:
Activate flashlight mode
ELSE:
Increment press count
Reset press timeout timer
IF press timeout exceeded:
Process accumulated press count:
IF press count == 1: Switch to CAMERA mode
IF press count == 2: Switch to SENSORS mode
IF press count == 3: Switch to MENU mode
Reset press count
IF current mode == MENU:
Display menu screen (button instructions)
IF current mode == CAMERA:
Capture camera frame
Process image with dithering algorithm
Display on OLED
Run Edge Impulse inference (optional)
Overlay results on display
IF current mode == SENSORS:
Read accelerometer/gyroscope data
Read load cell data
Display sensor readings on OLED
Update display
Code files for the Invisible String pulse oximeter interface system, providing real-time health monitoring through OLED display and WiFi web interface. See Week 11 PCB design documentation for hardware details.
pulse_vo2_reads_fixing.ino)Local OLED display interface showing real-time pulse oximeter readings including heart rate (BPM), blood oxygen saturation (SpO2), and raw IR/RED LED sensor values.
SETUP:
Initialize Serial communication
Initialize I2C bus (SDA=5, SCL=6) at 400kHz
Initialize MAX30102 sensor
Configure sensor:
Set LED mode to RED + IR
Set ADC range to 16384
Set sample rate to 100 Hz
Set pulse width to 411 μs
Set LED brightness to medium (0x3F)
Initialize OLED display
Clear and prepare display
LOOP:
Read IR and RED LED values from sensor
Heart Rate Detection:
Check for heartbeat in IR signal using peak detection
IF heartbeat detected:
Calculate time since last beat
Calculate BPM = 60 / (time_delta / 1000)
Set beat flag for visual indicator
Update last beat timestamp
SpO2 Calculation (every 300ms):
Add IR and RED values to circular buffer
IF buffer has 50 samples:
Calculate DC components (average)
Calculate AC components (RMS)
Calculate R ratio = (AC_RED/DC_RED) / (AC_IR/DC_IR)
Estimate SpO2 = 110 - 25 * R
Clamp SpO2 to 70-100% range
Serial Output:
Print IR, RED, BPM for Serial Plotter visualization
OLED Display Update:
Clear display buffer
Display IR value (small text)
Display RED value (small text)
Display BPM value (large text, size 2)
Display SpO2 percentage (small text)
IF beat detected: Draw heartbeat indicator dot
Update display hardware
Delay 20ms (50 Hz update rate)
pulse_gui.ino)WiFi-enabled web interface providing remote access to pulse oximeter data through HTTP server with JSON API endpoint for real-time data updates.
SETUP:
Initialize Serial communication
Initialize I2C bus
Initialize MAX30102 sensor
Configure sensor (LED mode, sample rate, pulse width)
Initialize OLED display
Initialize WiFi:
Connect to network (SSID, password)
Wait for connection
Print IP address
Initialize HTTP server:
Route "/" → serve GUI HTML page
Route "/gui" → serve GUI HTML page
Route "/metrics" → serve JSON data
Start web server
LOOP:
Handle incoming HTTP client requests
Read IR and RED values from sensor
Heart Rate Calculation:
Check for heartbeat in IR signal
IF heartbeat detected:
Calculate BPM from time delta
Update global BPM variable
SpO2 Calculation:
Add IR/RED to circular buffer
IF buffer full (50 samples):
Calculate SpO2 using ratio-of-ratios
Update global SpO2 variable
Update global variables (g_ir, g_red, g_bpm, g_spo2)
OLED Display Update:
Display IR, RED, BPM, SpO2 values
Update display hardware
server.handleClient() frequently in loop() for responsive web interfacepulse_gui_2.ino)Enhanced WiFi web interface with real-time plotting capabilities using Chart.js library, displaying live line charts for BPM and SpO2 values with automatic scrolling and data management.
SETUP:
(Same as pulse_gui.ino)
Initialize WiFi, sensor, OLED, HTTP server
LOOP:
(Same as pulse_gui.ino)
Handle HTTP requests, read sensor, calculate BPM/SpO2
GUI HTML PAGE (embedded in PROGMEM):
Load Chart.js library from CDN
Create two Chart.js line chart instances:
- BPM chart (y-axis: 40-160 BPM)
- SpO2 chart (y-axis: 70-100%)
Initialize data arrays for each chart
JavaScript Update Function (runs every 300ms):
Fetch JSON data from /metrics endpoint
Update numerical displays (BPM, SpO2, IR, RED)
Add new BPM value to BPM data array
Add new SpO2 value to SpO2 data array
IF array length > maxPoints (100):
Remove oldest value (shift)
Update chart labels (array indices)
Update chart datasets with new data
Call chart.update() to refresh display
Set interval to call update function every 300ms
Key insights and learnings from working with interface and application programming.
Acknowledgements and team roles for interface and application programming work.
Transparent documentation of AI assistance used in this week's interface and application programming work.
This section documents all AI assistance used during Week 12 interface and application programming work. ChatGPT was used for code development, troubleshooting, and technical guidance. All transcripts are linked below for transparency.
AI assistance for developing the button-based menu system with mode navigation (Menu, Camera, Sensors) using press pattern detection. The conversation covered button debouncing, press pattern recognition, mode state management, and OLED menu display design.
Related to: Part (a): Simple Button User Interface on OLED
Troubleshooting session for I2C device detection issues with MAX30102 pulse oximeter sensor. The conversation addressed power isolation problems, I2C wiring verification, sensor initialization order, and ground plane isolation requirements for accurate sensor operation.
Related to: Part (b): Real-Time Graphical User Interface through OLED and WiFi
Development assistance for creating the initial OLED "Hello World" test program. The conversation covered I2C initialization, OLED display library setup, text rendering, and basic display configuration for XIAO ESP32-S3 development board.
Related to: Part (b): Real-Time Graphical User Interface through OLED and WiFi (initial OLED test)
Technical guidance for fixing MAX30102 pulse oximeter sensor initialization issues. The conversation addressed sensor configuration parameters, LED brightness settings, sample rate optimization, initialization sequence requirements, and troubleshooting sensor communication problems.
Related to: Part (b): Real-Time Graphical User Interface through OLED and WiFi (pulse oximeter readings)
Complete Cursor AI transcript for Week 12 interface and application programming project documentation. This comprehensive conversation covers the creation and population of the Week 12 HTML page, including Individual Assignment sections (button UI and WiFi GUI), Group Assignment tool comparisons, Design Files documentation with pseudocode, and Ethical AI Use section organization. The transcript demonstrates the collaborative process of building professional documentation with structured content, embedded media, and comprehensive code documentation.
Related to: Complete Week 12 documentation including Individual Assignment, Group Assignment, Design Files, and overall page structure
This work is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License