Wifi Web UI

Example Path: examples/Wifi/ESP32/WifiWebUI

ESP32-C5 WiFi – Application Web UI Example

Overview

Most ESP32-C5 examples send the user to the library's built-in provisioning page at /wifi. This example shows how to build your OWN application web interface for WiFi setup instead, driven entirely by the public ESP32C5 API (g_wifi).

The application serves its own page (html/index.html) and registers its own AJAX endpoints under the /api/app/ prefix (src/webui.cpp): scan for networks, set the station (STA) credentials, push them to the radio, and report live connection status.

The Built-in Page Is Not Removed

The library's /wifi page and its /api/wifi/ JSON handlers are auto-registered inside g_wifi.Init() and remain fully available. This example does not (and cannot, without forking the library) remove them – it demonstrates an app-owned UI living alongside them. The app page links to the built-in page from its "Built-in Provisioning" card.

How It Works

• src/main.cpp – defines g_wifi, brings WiFi up from AddNonEthernetInterfaces(), calls StartHttp(), and provides a small serial diagnostic menu.
• src/webui.cpp – the heart of the example: the app-owned web endpoints.
• html/index.html – the app-owned page; vanilla-JS fetch() to the endpoints below.

Application Endpoints

Served by webui.cpp, under /api/app/ so they never collide with the library's /api/wifi/ handlers:

Method	URL	Purpose
GET	/api/app/status	JSON: hardware + STA + AP state (polled live)
POST	/api/app/scan	Start a scan; replies {"ok":true}
GET	/api/app/scan	JSON: {"scanning":bool,"count":N,"networks":[...]}
POST	/api/app/connect	Form vars ssid + pass: store, push to the ESP32, reply {"ok":true}

These use NetBurner's standard web-handler classes: CallBackFunctionPageHandler for the GET/POST JSON endpoints, and HtmlPostVariableListCallback for the connect form. SSIDs read off the air are JSON-escaped before being echoed back to the page.

Reaching the UI

• App web UI: http://<device-ip>/
• Built-in provisioning: http://<device-ip>/wifi

Reach the device over wired Ethernet, or over the provisioning AP (default SSID NetBurnerC5Wifi, 5 GHz). On SOMRT1061, holding the IRQ button (pin 30 low) at boot forces the AP on, so the UI is always reachable even with bad stored credentials.

Serial Console Commands

The application prints a menu on the serial debug port (115200 baud):

Key	Function
N	Start a WiFi scan
R	Show last scan results
I	Show interface info (STA/AP state, IPs)
A	Turn AP mode on
a	Turn AP mode off

Press any other key to reprint the menu.

Web Page

The example serves its UI from html/index.html, styled with the shared NetBurner SDK example look – a self-contained stylesheet, no framework or CDN. The page polls /api/app/status, drives a scan, and submits credentials, all via fetch().

Supported Platforms

• SOMRT1061

Adding a new host platform is a small port – see platform/esp32_c5_wifi_mod/Porting_To_New_Platforms.md.

Related Examples

• Wifi Basic – the minimal integration: bring WiFi up and serve the library's built-in /wifi provisioning page. Start there.
• Wifi OTA Auto – auto-update the ESP32-C5 to the NNDK-bundled firmware version at boot.
• Wifi OTA Upload – push a new ESP32-C5 firmware image via a browser upload.