<!doctype html><htmllang="en"class="no-js"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><metahttp-equiv="x-ua-compatible"content="ie=edge"><metaname="description"content="ESP8266/ESP32 WLAN configuration at run time with web interface"><linkrel="canonical"href="https://Hieromon.github.io/AutoConnect/menuize.html"><metaname="author"content="Hieromon Ikasamo"><metaname="lang:clipboard.copy"content="Copy to clipboard"><metaname="lang:clipboard.copied"content="Copied to clipboard"><metaname="lang:search.language"content="en"><metaname="lang:search.pipeline.stopwords"content="True"><metaname="lang:search.pipeline.trimmer"content="True"><metaname="lang:search.result.none"content="No matching documents"><metaname="lang:search.result.one"content="1 matching document"><metaname="lang:search.result.other"content="# matching documents"><metaname="lang:search.tokenizer"content="[\s\-]+"><linkrel="shortcut icon"href="assets/images/favicon.png"><metaname="generator"content="mkdocs-1.0.4, mkdocs-material-4.3.1"><title>Attach the menu - AutoConnect for ESP8266/ESP32</title><linkrel="stylesheet"href="assets/stylesheets/application.4031d38b.css"><linkrel="stylesheet"href="assets/stylesheets/application-palette.224b79ff.css"><metaname="theme-color"content="#3f51b5"><scriptsrc="assets/javascripts/modernizr.74668098.js"></script><linkhref="https://fonts.gstatic.com"rel="preconnect"crossorigin><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono&display=swap"><style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style><linkrel="stylesheet"href="assets/fonts/material-icons.css"><linkrel="stylesheet"href="css/paragraph.css"><linkrel="stylesheet"href="css/extra.css"><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"><script>window.ga=window.ga||function(){
<p>AutoConnect generates a menu dynamically depending on the instantiated <ahref="acintro.html#how-it-works">AutoConnectAux</a> at the sketch executing time. Usually, it is a collection of <ahref="acelements.html">AutoConnectElement</a>. In addition to this, you can generate a menu from only AutoConnectAux, without AutoConnectElements.<br>In other words, you can easily create a built-in menu featuring the WiFi connection facility embedding the legacy web pages.</p>
<h2id="basic-mechanism-of-menu-generation">Basic mechanism of menu generation<aclass="headerlink"href="#basic-mechanism-of-menu-generation"title="Permanent link">¶</a></h2>
<p>The sketch can display the <ahref="menu.html">AutoConnect menu</a> by following three patterns depending on AutoConnect-API usage.</p>
<dd>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 <ahref="api.html#begin">AutoConnect::begin</a> and <ahref="api.html#handleclient">AutoConnect::handleClient</a>.</dd>
<dt><iclass="fa fa-desktop"></i> <strong>Extra menu with custom Web pages which is consisted by <ahref="acelements.html">AutoConnectElements</a></strong></dt>
<dd>It is an extended menu that appears when the sketch consists of the custom Web pages with <ahref="acintro.html#how-it-works">AutoConnectAux</a> and AutoConnectElements. Refer to section <ahref="acintro.html#custom-web-pages-in-autoconnect-menu"><em>Custom Web pages section</em></a>.</dd>
<dd>It is for the legacy sketches using the <strong>on</strong> handler of ESP8266WebServer/WebServer(for ESP32) class natively and looks the same as the extra menu as above.</dd>
<p>The mechanism to generate the AutoConnect menu is simple. It will insert the item as <code><li></code> tag generated from the <ahref="apiaux.html#autoconnectaux"><strong>title</strong></a> and <ahref="apiaux.html#autoconnectaux"><strong>uri</strong></a> 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.</p>
<h2id="place-the-item-for-the-legacy-sketches-on-the-menu">Place the item for the legacy sketches on the menu<aclass="headerlink"href="#place-the-item-for-the-legacy-sketches-on-the-menu"title="Permanent link">¶</a></h2>
<p>To implement this with your sketch, use only the <ahref="apiaux.html#autoconnectaux">AutoConnectAux</a> constructed with the title and URI of that page. <ahref="acelements.html">AutoConnectElements</a> is not required.</p>
<p>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 <strong>Edit</strong> and <strong>List</strong>.</p>
<li>Join the legacy pages to AutoConnect declared at step #1 using <ahref="api.html#join">AutoConnect::join</a>.<br>Joining multiple at one time with the <ahref="https://en.cppreference.com/w/cpp/language/list_initialization">list initialization</a> for <ahref="https://ja.cppreference.com/w/cpp/container/vector/vector">std::vector</a>.</li>
<li>According to the basic procedure of AutoConnect.<br>Establish a connection with <ahref="api.html#begin">AutoConnect::begin</a> and perform <ahref="api.html#handleclient">AutoConnect::handleClient</a> in <strong>loop()</strong>.</li>
<p>... and embeds a hyperlink with an <ahref="apiextra.html#icons">icon</a> in the bottom of the body section of <em>index.htm</em> contained in the data folder to jump to the AutoConnect menu.</p>
