[Profile Image Placeholder]

Week 12

Interface & Application Programming

Week Highlights

Key captures from the group and individual assignments with links to their sections.

Table of Contents

Interface & Application Programming

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.

Creating user interfaces for embedded devices
Building applications that interface with input and output devices
Comparing interface programming tools and frameworks

This Week's Goals

  • User Interface Design
    Learn to create intuitive interfaces for embedded devices and applications
  • Application Programming
    Build applications that interface users with input and/or output devices
  • Tool Comparison
    Compare interface programming tools and frameworks to select appropriate solutions

Assignments

  • Group Assignment
    Compare as many tool options as possible
  • Individual Assignment
    Write an application that interfaces a user with an input &/or output device that you made

Tools & Materials

  • ESP32-S3 Development Boards
  • OLED Displays (SSD1306)
  • MAX30102 Pulse Oximeter Sensor
  • Buttons & User Input Devices
  • Interface Programming Frameworks

Training Documentation

Training materials and documentation for interface and application programming.

No recitation this week.

Useful Documentation

Essential resources for interface and application programming.

Class Page

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.

Key Topics

  • Interface Design: User experience principles, interaction patterns, feedback mechanisms
  • Embedded UI: OLED displays, LCD interfaces, character displays
  • Web Interfaces: HTTP servers, REST APIs, WebSockets, real-time data visualization
  • Application Frameworks: GUI toolkits, web frameworks, mobile apps
  • User Input: Buttons, touch interfaces, gesture recognition, voice commands

Additional References

Individual Assignment: Interface & Application Programming

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.

Part (a): Simple Button User Interface on OLED

A mode-based user interface system that interfaces users with multiple input and output devices through a simple button press interface. The system provides visual feedback on an OLED display and enables navigation between different modes (Menu, Camera, Sensors) using button press patterns. Users interact by pressing a button multiple times to select modes, with visual confirmation displayed on the OLED screen.

Interface Design

The interface uses a mode-based navigation system where button presses trigger mode changes. A single press enters Camera mode, two presses enter Sensors mode, three presses return to Menu, and holding the button activates a flashlight function. The OLED display shows the current menu state and provides clear visual feedback for each mode transition. See Ethical AI Use: Menu System with Modes for AI-assisted development details.

OLED button user interface menu system displaying mode selection options
OLED button user interface menuMenu screen showing available modes: Camera, Sensors, and Menu navigation options with button press instructions.
Button UI demonstrationVideo showing button press interactions navigating through different modes on the OLED display.
First video stream on OLEDInitial camera feed streaming to OLED display using dithering algorithm for monochrome conversion, demonstrating real-time video output interface.
Download Design Files
  • outputs.ino — Button user interface code with mode system
  • camera_pins.h — Camera pin definitions header file
  • outputs.zip — Complete project archive including all dependencies

Part (b): Real-Time Graphical User Interface through OLED and WiFi

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.

Interface Design

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.

Hello World on OLED

Initial OLED display test showing successful I2C communication and display initialization. See Ethical AI Use: Hello World Code for development details.

Hello World display on OLED for Invisible String project showing successful display initialization
Hello World on OLEDInitial OLED test confirming I2C communication and display functionality before implementing sensor interfaces.
Pulse Oximeter Readings on OLED

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.

Pulse oximeter readings on OLED displaying IR, RED, BPM, and SpO2 values
OLED sensor readings displayReal-time pulse oximeter data showing IR and RED LED values, heart rate (BPM), and blood oxygen saturation (SpO2) with heartbeat indicator.
BPM and SpO2 demonstrationVideo showing real-time heart rate and blood oxygen saturation measurements updating on OLED display with sensor interaction.
Pulse Oximeter Readings on WiFi GUI

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.

WiFi web interface displaying real-time pulse oximeter readings including BPM, SpO2, IR, and RED values
WiFi GUI readings dashboardRemote web interface showing real-time pulse oximeter data accessible from any device on the WiFi network, displaying BPM, SpO2, IR, and RED values with automatic updates.
Pulse Oximeter Plots on WiFi GUI

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.

Serial monitor output showing sensor readings rising on touch interaction
Serial monitor sensor responseSerial output demonstrating sensor readings increase when finger is placed on MAX30102 sensor, showing IR and RED LED response to touch.
WiFi web interface with real-time plotting of BPM and SpO2 data using Chart.js
WiFi GUI with plotting chartsEnhanced web interface displaying real-time line charts for BPM and SpO2 values, showing trends over time with automatic data refresh and chart scrolling.

I2C Device Detection

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
Download Design Files

User Interface Comparison

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)

Group Assignment: Compare as Many Tool Options as Possible

Compare as many tool options as possible for interface and application programming.

General Comparison: Interface & Application Programming Tools

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.

Embedded Display Interfaces

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

Web-Based 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

Mobile & Native App Frameworks

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

Specific Comparison: Tools Used in Individual Assignment

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.

OLED Display Interface (Adafruit SSD1306)

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

WiFi Web Interface (ESP32 HTTP Server + Chart.js)

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

Button Input Interface

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

Comparison Summary

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

Design files and code documentation for interface and application programming projects.

ESP32-S3 Development Board and Pinouts

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.

I2C Scanner (i2cscan_generic.ino)

Utility code for scanning and detecting I2C devices on the bus, essential for troubleshooting connection issues.

How the Code Works (Pseudocode)
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
Key Features
  • Scans all 127 possible I2C addresses (0x01-0x7E)
  • Detects and reports connected devices with hex address format
  • Handles multiple error conditions (device not found, unknown errors)
  • Continuous scanning mode with 5-second intervals
  • Compatible with any I2C bus configuration (Wire, Wire1, etc.)
What You Need to Know
  • I2C Address Range: Valid addresses are 0x08-0x77 (8-119 decimal); addresses 0x00-0x07 and 0x78-0x7F are reserved
  • Common Addresses: OLED displays typically use 0x3C or 0x3D; sensors vary (MAX30102 uses 0x57)
  • Troubleshooting: If no devices found, check wiring (SDA, SCL, power, ground), verify pull-up resistors, confirm device power
  • Usage: Run this before connecting other devices to verify I2C bus is working correctly
Download: i2cscan_generic.ino

Hello World OLED Display (hello_world.ino)

Basic OLED display test code that initializes the display and shows "Hello World" text, confirming I2C communication and display functionality.

How the Code Works (Pseudocode)
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)
Key Features
  • Simple OLED initialization and text display
  • Custom I2C pin configuration for XIAO ESP32-S3 (SDA=5, SCL=6)
  • Error handling with infinite loop if display not found
  • Text size and cursor positioning for centered display
  • One-time display update (no loop refresh needed for static text)
What You Need to Know
  • I2C Pin Configuration: XIAO ESP32-S3 uses pins 5 (SDA) and 6 (SCL) by default; verify your board's pinout
  • Display Address: SSD1306 OLED typically uses address 0x3C; some variants use 0x3D
  • Display Update: Must call display.display() to send buffer to hardware; drawing functions only modify buffer
  • Testing: Use this as first test after connecting OLED to verify wiring and I2C communication before adding complex features
  • Libraries Required: Adafruit_GFX, Adafruit_SSD1306, Wire
Download: hello_world.ino

Button User Interface (outputs.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.

How the Code Works (Pseudocode)
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
Key Features
  • Press pattern detection: single (1x), double (2x), triple (3x), and hold
  • Mode-based navigation system (Menu, Camera, Sensors)
  • Button debouncing with timeout-based pattern recognition
  • Floyd-Steinberg dithering for camera-to-OLED video display
  • Edge Impulse AI inference integration for face detection
  • Multi-sensor integration (MPU6050 accelerometer/gyro, HX711 load cell)
  • Flashlight mode activated by button hold
What You Need to Know
  • Button Wiring: Use INPUT_PULLUP mode (button connects pin to GND when pressed, internal pull-up to 3.3V)
  • Press Detection: Press count is accumulated until timeout (1 second); longer timeout allows slower multiple presses
  • Mode Switching: Each mode has distinct display update logic; ensure proper initialization in setup()
  • Camera Performance: Video streaming to OLED requires significant processing; frame rate depends on resolution and dithering complexity
  • Dependencies: Requires camera_pins.h header file with XIAO ESP32-S3 camera pin definitions; see Ethical AI Use for development details
  • Sensor Conflicts: Code uses preprocessor directives to resolve sensor_t type conflict between ESP32 camera and Adafruit MPU6050 libraries
Download: outputs.ino | camera_pins.h | outputs.zip (complete project)

Invisible String Chain of Hearts

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.

OLED GUI for Pulse Oximeter (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.

How the Code Works (Pseudocode)
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)
Key Features
  • Real-time heart rate detection using peak detection algorithm on IR signal
  • SpO2 calculation using ratio-of-ratios method with DC/AC component analysis
  • Circular buffer system for storing 50 samples of IR/RED data
  • Visual heartbeat indicator (flashing dot) when pulse detected
  • Dual output: OLED display and Serial Plotter for real-time waveform visualization
  • Optimized sensor configuration for reliable readings (100 Hz sample rate, medium brightness)
What You Need to Know
  • Sensor Placement: Finger must cover sensor completely; proper contact ensures accurate readings
  • I2C Address: MAX30102 uses address 0x57; verify with I2C scanner if sensor not detected
  • Ground Isolation: RD and IRD pins must be isolated from main ground plane to prevent power issues (see Week 11 PCB design)
  • SpO2 Accuracy: Calculation provides estimation; medical-grade accuracy requires calibration and FDA-approved algorithms
  • Buffer Size: 50-sample buffer provides balance between calculation accuracy and response time
  • Libraries Required: MAX30105 (SparkFun library), Adafruit_GFX, Adafruit_SSD1306, heartRate.h (beat detection)
  • Troubleshooting: If sensor not detected, check power isolation, I2C wiring, and sensor initialization order
Download: pulse_vo2_reads_fixing.ino

WiFi Readings GUI (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.

How the Code Works (Pseudocode)
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
Key Features
  • Dual interface: OLED display (local) and WiFi web interface (remote)
  • HTTP server with embedded HTML page stored in PROGMEM
  • JSON API endpoint (/metrics) for real-time data retrieval
  • Automatic WiFi connection with connection status feedback
  • IP address display for easy access
  • Simultaneous sensor reading and web server operation
  • Global variable system for data sharing between sensor reading and HTTP handlers
What You Need to Know
  • WiFi Configuration: Update SSID and password in code; for MIT network, use generated device password from wifi.mit.edu
  • Network Access: Web interface accessible only from devices on same WiFi network; IP address printed to Serial Monitor
  • HTML Storage: GUI HTML page stored in PROGMEM (program memory) to conserve RAM; use PROGMEM for large strings
  • Server Handling: Must call server.handleClient() frequently in loop() for responsive web interface
  • Data Refresh: Client-side JavaScript polls /metrics endpoint every 300ms for real-time updates
  • Power Consumption: WiFi significantly increases power draw compared to OLED-only mode; consider power management for battery operation
  • Libraries Required: WiFi, WebServer, MAX30105, Adafruit_SSD1306
Download: pulse_gui.ino

WiFi Plot GUI (pulse_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.

How the Code Works (Pseudocode)
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 Features
  • Real-time line chart visualization using Chart.js library
  • Dual chart display: BPM and SpO2 trends over time
  • Automatic data scrolling: maintains 100 most recent data points
  • Numerical displays alongside charts for precise values
  • Responsive design with dark theme for OLED-style aesthetic
  • Automatic chart scaling with fixed y-axis ranges for consistent visualization
  • CDN-based Chart.js loading for minimal memory footprint
What You Need to Know
  • Chart.js CDN: Library loaded from jsdelivr.net CDN; requires internet connection on client device
  • Data Management: Arrays limited to 100 points to prevent memory overflow; older data automatically discarded
  • Update Rate: 300ms refresh rate balances responsiveness with server load; adjust based on network conditions
  • Chart Configuration: Y-axis ranges fixed (BPM: 40-160, SpO2: 70-100) for consistent scaling; modify in JavaScript if needed
  • Browser Compatibility: Requires modern browser with JavaScript enabled; tested on Chrome, Firefox, Safari
  • Performance: Chart updates are lightweight; multiple simultaneous clients may impact ESP32 performance
  • Offline Operation: Charts won't load if client device lacks internet (Chart.js CDN unavailable); consider local hosting for offline use
Download: pulse_gui_2.ino

Reflections & Learnings

Key insights and learnings from working with interface and application programming.

Contributions

Acknowledgements and team roles for interface and application programming work.

Ethical AI Use

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.

Menu System with Modes

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

View ChatGPT Transcript: Menu System with Modes

I2C Device Not Found

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

View ChatGPT Transcript: I2C Device Not Found

Hello World Code

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)

View ChatGPT Transcript: Hello World Code

MAX30102 Initialization Fix

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)

View ChatGPT Transcript: MAX30102 Initialization Fix

Week 12 Project Documentation

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

View HTML Transcript Download Markdown Transcript

Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License