Web Configuration Interface

Web Configuration Interface

Professional browser-based configuration and management system for ESP32 WiFi Utility v4.2.0.

Overview

The comprehensive web interface provides complete device management from any browser on your network. Access all configuration features, network analysis tools, and system monitoring from desktop or mobile devices.

Accessing the Web Interface

Station Mode (Connected to WiFi)

When connected to your WiFi network:

> connect "YourWiFi" "password"
> webserver start
Web server started at: http://192.168.1.100
Access the configuration page at: http://192.168.1.100/config

AP Mode (ESP32 Creates Hotspot)

When ESP32 is running as an Access Point:

> ap start
> webserver start
Web server started at: http://192.168.4.1
Connect to WiFi: ESP32-WiFi-ABCD1234

Available Pages

The web interface includes 10 professional pages:

1. Home Dashboard (/)

• System overview and quick statistics
• Device information and status summary
• Quick navigation to all features
• Real-time system health monitoring

2. Status Page (/status)

• Detailed system information with QR codes
• Network connection details and statistics
• Hardware information and capabilities
• QR code for easy WiFi sharing

3. Configuration Page (/config) - NEW in v4.2.0

• Complete device configuration management
• Access Point settings with persistence
• Station configuration with auto-connect
• Instant mode switching without reboot
• System reboot with countdown timer

4. Network Scanner (/scanner)

• Interactive WiFi network discovery
• Clickable network details with analysis
• Signal strength and security assessment
• Real-time scanning with progress indicators

5. Signal Strength Monitor (/signal) - NEW in v4.2.1

• Real-time RSSI monitoring of connected network
• Nearby networks signal scanning
• Graphical signal meters with color coding
• Auto-refreshing display (3-second updates)
• Quality percentage and ratings

6. Port Scanner (/portscan) - NEW in v4.3.0

• Network security auditing tool
• TCP port scanning with service identification
• Multiple scan modes (Common, Well-Known, Custom, All Ports)
• Real-time progress tracking
• Open port detection and service names

7. Analysis Dashboard (/analysis)

• Unified network testing hub
• Channel analysis and recommendations
• Performance testing suite access
• Network optimization tools

8. iPerf Testing (/iperf)

• Bandwidth and throughput analysis
• Server mode for receiving tests
• Performance metrics and statistics
• Network capacity evaluation

9. Latency Testing (/latency)

• Network performance and jitter analysis
• Real-time latency monitoring
• Connection quality assessment
• Performance trending and statistics

10. Channel Analysis (/channels)

• Complete spectrum analysis
• AI-powered channel recommendations
• Interference detection and avoidance
• Optimization suggestions

Configuration Management (NEW v4.2.0)

Configuration Page Features

The /config page provides comprehensive device configuration:

Access Point Configuration Section

Input Fields:

• SSID: Network name (1-32 characters, validated)
• Password: WPA2 password (8-63 characters, masked input)
• Channel: Dropdown selector for channels 1-13
• Auto-start: Toggle switch to enable automatic AP mode on boot

Actions:

• Save Configuration: Persists settings to NVS storage with base64 password encoding
• Clear Configuration: Removes saved AP settings
• Start AP: Immediately start Access Point mode using saved or entered settings

Station Configuration Section

Input Fields:

• SSID: Target network name (with validation)
• Password: Network password (masked input for security)
• Auto-connect: Toggle switch to enable automatic connection on boot

Actions:

• Save Configuration: Persists credentials to NVS with base64 encoding
• Clear Configuration: Removes saved station settings
• Connect: Immediately connect using saved or entered credentials

Instant Mode Switching

Features:

• Toggle between AP and Station modes without device reboot
• 2-second operation vs 10+ second reboot time
• Automatic use of saved configurations
• Real-time status updates and feedback
• Error handling for missing configurations

Usage:

1. Configure both AP and Station settings
2. Use mode switch buttons for instant switching
3. System automatically applies saved settings
4. Status updates show current mode and connection state

System Management

Reboot System:

• Reboot device with 10-second countdown modal
• Confirm/Cancel buttons for user control
• Visual countdown timer with progress display
• Automatic page reload after reboot completion
• Preserves all saved configurations

Mobile-Responsive Design

Responsive Layout Features

Desktop View (≥768px):

• Horizontal navigation bar with full menu visible
• Multi-column layouts for efficient space usage
• Hover effects and detailed tooltips
• Full-featured forms and controls

Mobile View (<768px):

• Hamburger menu (☰) with collapsible navigation
• Single-column stacked layouts
• Touch-friendly 44px minimum touch targets
• Simplified forms optimized for mobile input

Universal Features:

• Smooth CSS transitions for polished experience
• Professional gradient design with modern styling
• Intuitive icons and visual indicators
• Fast loading optimized for mobile networks

Mobile Interface Enhancements

QR Code WiFi Sharing

Automatic Generation:

• SVG-based QR codes for clean, scalable graphics
• 250×250px codes with gradient backgrounds
• WIFI configuration format for instant connection
• Compatible with all modern smartphones and tablets

Usage Process:

1. Navigate to Status page in web interface
2. QR code automatically generated for current AP configuration
3. Other devices scan code to connect instantly
4. No manual password entry required for guests

QR Code Format:

WIFI:T:WPA;S:ESP32-WiFi-ABCD1234;P:your_password;H:false;;

Touch Optimization

Mobile Enhancements:

• Large touch targets for finger navigation
• Swipe-friendly interface elements
• Touch-optimized button spacing
• Responsive breakpoints for various screen sizes
• Optimized loading for mobile data connections

Network Analysis Integration

Interactive Network Details

Enhanced Scanning: Click any network in scan results to view comprehensive information:

Signal Analysis:

• 8-level signal quality scale with percentage indicators
• Color-coded quality indicators (green/yellow/orange/red)
• RSSI values in dBm with range assessment
• Signal strength trending and stability analysis

Channel Information:

• Channel number with frequency band identification
• 5-level congestion analysis (Clear → Severely Congested)
• Network count on same channel
• Interference impact assessment and recommendations

Security Assessment:

• Support for all WiFi encryption types (WPA3, WPA2, WEP, Open)
• Security strength indicators and warnings
• Vulnerability alerts for weak encryption methods
• Connection recommendations based on security analysis

Smart Recommendations Engine

AI-Powered Analysis:

• Automated connection suggestions based on signal strength
• Security warnings for open or poorly secured networks
• Channel congestion impact analysis
• Overall network score with detailed reasoning

Recommendation Categories:

• Excellent: Strong signal, good security, low interference
• Good: Acceptable signal and security with minor issues
• Fair: Usable but with noticeable limitations
• Poor: Weak signal, security concerns, or heavy interference

API Integration

RESTful Endpoints

Configuration Management:

GET  /config              # Configuration page UI
POST /config/ap           # Save AP configuration
POST /config/station      # Save Station configuration
POST /config/clear        # Clear saved configurations
POST /reboot              # Reboot device with countdown

Mode Switching:

POST /mode/switch         # Instant mode switching (AP/Station)
GET  /mode/status         # Current mode and configuration status

Signal Monitoring (NEW v4.2.1):

GET  /signal              # Signal monitor page UI
GET  /signal/api?current=1  # JSON current signal data
GET  /signal/api?scan=1     # JSON nearby networks signal data

Port Scanning (NEW v4.3.0):

GET  /portscan            # Port scanner page UI
GET  /portscan/start?ip=<target>&type=<scan_type>  # Start scan
GET  /portscan/stop       # Stop current scan
GET  /portscan/status     # JSON scan status and results
GET  /portscan/api?gateway=1  # Get gateway IP

System Information:

GET  /api/status          # JSON system status
GET  /api/networks        # JSON network scan results
GET  /api/config          # JSON current configuration

Signal Monitoring API

Get Current Signal Strength:

fetch('/signal/api?current=1')
  .then(response => response.json())
  .then(data => {
    console.log(`Network: ${data.ssid}`);
    console.log(`RSSI: ${data.rssi} dBm`);
    console.log(`Quality: ${data.quality}% (${data.qualityText})`);
  });

Response Format:

{
  "connected": true,
  "ssid": "HomeWiFi",
  "rssi": -65,
  "quality": 70,
  "qualityText": "Fair",
  "timestamp": 12345678
}

Scan Nearby Networks:

fetch('/signal/api?scan=1')
  .then(response => response.json())
  .then(data => {
    console.log(`Found ${data.count} networks`);
    data.networks.forEach(net => {
      console.log(`${net.ssid}: ${net.rssi} dBm (${net.quality}%)`);
    });
  });

Response Format:

{
  "count": 3,
  "networks": [
    {
      "ssid": "HomeWiFi",
      "rssi": -65,
      "quality": 70,
      "qualityText": "Fair",
      "connected": true
    },
    {
      "ssid": "NeighborNetwork",
      "rssi": -72,
      "quality": 56,
      "qualityText": "Weak",
      "connected": false
    }
  ]
}

JavaScript Integration

Real-time Updates:

• WebSocket connections for live data streaming
• AJAX requests for configuration updates
• Dynamic content loading without page refresh
• Progress indicators for long-running operations

Error Handling:

• Comprehensive client-side validation
• Server response error processing
• User-friendly error messages and recovery suggestions
• Automatic retry mechanisms for network issues

Security Features

Password Protection

Security Implementation:

• All password inputs use HTML password type (masked)
• Base64 encoding before transmission and storage
• Never display saved passwords in plain text
• Secure form submission with validation

Privacy Protection:

• Passwords never transmitted in URLs or GET requests
• POST requests used for all sensitive data
• Local form validation before transmission
• Automatic form clearing after submission

Access Control

Network Security:

• Web interface only accessible on local network
• No external internet connectivity required
• Authentication tokens for administrative functions
• Session management for extended operations

Performance Optimization

Loading Performance

Optimization Features:

• Compressed CSS and JavaScript resources
• Efficient HTML generation with minimal overhead
• Progressive loading for large data sets
• Caching strategies for static content

Mobile Performance:

• Optimized images and graphics for mobile bandwidth
• Minimal JavaScript for core functionality
• CSS-based animations instead of JavaScript
• Efficient DOM manipulation and updates

Server Performance

ESP32 Web Server:

• Efficient request handling with minimal memory usage
• Asynchronous processing for multiple concurrent connections
• Optimized HTML generation with PROGMEM storage
• Smart caching of frequently accessed data

Resource Management:

• Memory-efficient string handling
• Minimal heap fragmentation during web operations
• Proper resource cleanup after request completion
• Connection pooling and management

Browser Compatibility

Supported Browsers

Desktop Browsers:

• Chrome 60+ (recommended)
• Firefox 55+
• Safari 12+
• Edge 79+

Mobile Browsers:

• Chrome Mobile 60+
• Safari iOS 12+
• Firefox Mobile 55+
• Samsung Internet 8+

Required Features:

• ES6 JavaScript support
• CSS Grid and Flexbox
• SVG rendering for QR codes
• WebSocket support (for real-time features)

Fallback Support

Progressive Enhancement:

• Core functionality works without JavaScript
• CSS-based styling with graceful degradation
• Alternative text for visual indicators
• Basic form submission without AJAX

---

← Back to Home | Next: WiFi Scanning & Analysis →