Skip to content

Progress Log: WiFi AP Mode Web Interface (v1.8.0)

Task Description

Created a simple HTML web server interface for OSECHI that allows users to confirm successful connection to the ESP32 when operating in Access Point（AP）mode. Users can now connect to the WiFi SSID OSECHI-DETECTOR and access http://192.168.4.1 to see a connection status page.

Requirements:

  • Simple, responsive HTML page
  • Display connection confirmation
  • Minimal memory footprint
  • Non-blocking HTTP server
  • Integration with existing WiFi manager

Outcome

✅ Successfully completed

Created Files

  1. include/web_server.h - Public API for web server
  2. web_server_init() - Initialize HTTP server

  3. web_server_update() - Handle incoming requests

  4. src/web_server.cpp - Full implementation

  5. Embedded HTML page (~3KB)
  6. HTTP/1.1 server on port 80
  7. Non-blocking request handler
  8. Simple routing: GET / (main page), GET /status (redirect)

  9. Proper HTTP response headers

  10. src/main.cpp - Integration

  11. Added #include "web_server.h"
  12. web_server_init() called in setup() after WiFi stabilization

  13. web_server_update() called in loop() for request processing

  14. docs/wifi-ap-interface.md - User documentation

  15. Setup instructions
  16. Feature overview
  17. Troubleshooting guide
  18. Security notes

HTML Page Features

  • Responsive Design - Works on desktop, tablet, and mobile
  • Visual Feedback - Gradient background, pulsing success icon
  • Bilingual Support - Japanese labels（OSECHI、宇宙線検出器）
  • Device Information - Shows SSID, IP address, protocol
  • Interactive Buttons - Refresh page, navigate to status
  • Modern CSS - Flexbox layout, smooth animations

Integration

  • Controlled via -DENABLE_WIFI=1 compile flag
  • Non-blocking: <5ms per request handling in loop
  • Safe: Gracefully handles missing WiFi hardware
  • Memory efficient: HTML embedded in binary (no SD card needed)

Learnings

  1. WiFiServer class usage - ESP32's native WiFiServer is simple and reliable for AP mode
  2. Raw HTML embedding - Using C raw string literals (R"rawliteral(...)") is clean and maintainable
  3. HTTP state machine - Non-blocking request handling requires proper client lifecycle management
  4. AP mode benefits - Default 192.168.4.1 IP is standard ESP32 behavior, makes documentation simple

Next Steps

Optional enhancements for future versions:

  • Add real-time sensor data display（JSONL over WebSocket）
  • Implement WiFi configuration portal（SSID/password change UI）
  • Add system logs page
  • HTTPS support for production deployments
  • REST API endpoints for telemetry data