Skip to content

Attach the 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.
In other words, you can easily create a built-in menu featuring the WiFi connection facility embedding the legacy web pages.

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 for only connecting WiFi. Sketch can automatically display this menu with 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 section 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 as <li> tag generated from the title and uri member variable of the AutoConnectAux object to the menu list of AutoConnect's built-in HTML. 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 menu item named "Edit" and "List" of AutoConnectAux as each page.
  3. Replace the instance of ESP8266WebServer to AutoConnect.
  4. Change the menu title to FSBrowser using AutoConnectConfig::title.
  5. Join the legacy pages to AutoConnect declared at step #1 using AutoConnect::join.
    Joining multiple at one time with the list initialization for std::vector.
  6. According to the basic procedure of AutoConnect.
    Establish a connection with AutoConnect::begin and perform AutoConnect::handleClient in loop().

 Modification for FSBrowser (a part of sketch code)

... and embeds a hyperlink with an icon in the bottom of the body section of index.htm contained in the data folder to jump to the AutoConnect menu.

<p style="padding-top:15px;text-align:center">
  <a href="/_ac"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC2klEQVRIS61VvWsUQRSfmU2pon9BUIkQUaKFaCBKgooSb2d3NSSFKbQR/KrEIiIKBiGF2CgRxEpjQNHs7mwOUcghwUQ7g58IsbGxEBWsb2f8zR177s3t3S2cA8ftzPu993vzvoaSnMu2vRKlaqgKp74Q/tE8qjQPyHGcrUrRjwlWShmDbFMURd/a6TcQwNiYUmpFCPElUebcuQ2vz6aNATMVReHEPwzfSSntDcNwNo2rI+DcvQzhpAbA40VKyV0p1Q9snzBG1qYVcYufXV1sREraDcxpyHdXgkfpRBj6Uwm2RsC5dxxmZ9pdOY9cKTISRcHTCmGiUCh4fYyplTwG2mAUbtMTBMHXOgK9QfyXEZr+TkgQ1oUwDA40hEgfIAfj+HuQRaBzAs9eKyUZ5Htx+T3ZODKG8DzOJMANhmGomJVMXPll+hx9UUAlzZrJJ4QNCDG3VEfguu7mcpmcB/gkBOtShhQhchAlu5jlLUgc9ENgyP5gf9+y6LTv+58p5zySkgwzLNOIGc8sEoT1Lc53NMlbCQQuvMxeCME1NNPVVkmH/i3IzzXDtCSA0qQQwZWOCJDY50jsQRjJmkslEOxvTcDRO6zPxOh5xZglKkYLhWM9jMVnkIsTyMT6NBj7IbOCEjm6HxNVVTo2WXqEWJZ1T8rytB6GxizyDkPhWVpBqfiXUtbo/HywYJSpA9kMamNNPZ71R9Hcm+TMHHZNGw3EuraXEUldbfvw25UdOjqOt+JhMwJd7+jSTpZaEiIcaCDwPK83jtWnTkwnunFMtxeL/ge9r4XItt1RNNaj/0GAcV2bR3U5sG3nEh6M61US+Qrfd9Bs31GGulI2GOS/8dgcQZV1w+ApjIxB7TDwF9GcNzJzoA+rD0/8HvPnXQJCt2qFCwbBTfRI7UyXumWVt+HJ9NO4XI++bdsb0YyrqXmlh+AWOLHaLqS5CLQR5EggR3YlcVS9gKeH2hnX8r8Kmi1CAsl36QAAAABJRU5ErkJggg==" border="0" title="AutoConnect menu" alt="AutoConnect menu"/></a>
</p>