Skip to content

Constucting menu

What menus can be made using AutoConnect

AutoConnect generates a menu dynamically depending on the instantiated AutoConnectAux at the sketch executing time. Usually, it is a collection of AutoConnectElement. In addition to this, you can generate a menu from only AutoConnectAux, without AutoConnectElements. That is, you can easily make the built-in menu with legacy sketches of yours.

Basic mechanism of menu generation

The sketch can display the AutoConnect menu by following three patterns depending on AutoConnect-API usage.

Basic menu
It is the most basic menu only for WiFi connection. Sketch can automatically display this menu with only the basic call sequence of the AutoConnect API which invokes AutoConnect::begin and AutoConnect::handleClient.
Extra menu with custom Web pages which is consisted by AutoConnectElements
It is an extended menu that appears when the sketch consists of the custom Web pages with AutoConnectAux and AutoConnectElements. Refer to Custom Web pages section.
Extra menu which contains legacy pages
It is for the legacy sketches using the on handler of ESP8266WebServer/WebServer(for ESP32) class natively and looks the same as the extra menu as above.

The mechanism to generate the AutoConnect menu is simple. It will insert the item generated from the title member variable of the AutoConnectAux object to AutoConnect's built-in HTML menu list which is implemented as the HTML <li> tag. Therefore, the legacy sketches can invoke the web pages from the AutoConnect menu with just declaration the title and URI to AutoConnectAux.

Place the item for the legacy sketches on the menu

To implement this with your sketch, use only the AutoConnectAux constructed with the title and URI of that page. AutoConnectElements is not required.

The AutoConnect library package contains an example sketch for ESP8266WebServer known as FSBrowser. Its example is a sample implementation that supports AutoConnect without changing the structure of the original FSBrowser and has the menu item for Edit and List.

The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows.

  1. Add AutoConnect declaration.
  2. Add the AutoConnectAux named "Edit" and "List" as each page.
  3. Replace the instance of ESP8266WebServer to AutoConnect.
  4. Change menu title to FSBrowser using AutoConnectConfig::title.
  5. Join the legacy pages declared at step #2 to AutoConnect using AutoConnect::join.