style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3366cc;stroke-width:0.26458332">Insert for attaching the menu</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3366cc;stroke-width:0.26458332">Insert for attaching the menu</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#99cc33;stroke-width:0.26458332">Replace for AutoConnect</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#99cc33;stroke-width:0.26458332">Replace for AutoConnect</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3366cc;stroke-width:0.26458332">Insert for attaching the menu</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3366cc;stroke-width:0.26458332">Insert for attaching the menu</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#99cc33;stroke-width:0.26458332">Replace for AutoConnect</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#99cc33;stroke-width:0.26458332">Replace for AutoConnect</tspan></text>
<h2id="basic-mechanism-of-menu-generation">Basic mechanism of menu generation<aclass="headerlink"href="#basic-mechanism-of-menu-generation"title="Permanent link">¶</a></h2>
<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>
<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 only for WiFi connection. Sketch can automatically display this menu with only 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>
<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>Extra menu with custom Web pages which is consisted by <ahref="acelements.html">AutoConnectElements</a></dt>
<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 <ahref="acintro.html#custom-web-pages-in-autoconnect-menu">Custom Web pages section</a>.</dd>
<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 <ahref="acintro.html#custom-web-pages-in-autoconnect-menu">Custom Web pages section</a>.</dd>
<dt><iclass="fa fa-desktop"></i>Extra menu which contains legacy pages</dt>
<dt><iclass="fa fa-desktop"></i> <strong>Extra menu which contains legacy pages</strong></dt>
<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>
<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>
</dl>
</dl>
<p>The mechanism to generate the AutoConnect menu is simple. It will insert the item generated from the <ahref="apiaux.html#autoconnectaux"><strong>title</strong></a>member variable of the AutoConnectAux object to AutoConnect's built-in HTML menu list which is implemented as the HTML <code><li></code> tag. Therefore, the legacy sketches can invoke the web pages from the AutoConnect menu with just declaration the title and URI to AutoConnectAux.</p>
<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>
<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>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>
<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>
@ -768,11 +768,13 @@
<p>The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows.</p>
<p>The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows.</p>
<ol>
<ol>
<li>Add AutoConnect declaration.</li>
<li>Add AutoConnect declaration.</li>
<li>Add the AutoConnectAux named "<strong>Edit</strong>" and "<strong>List</strong>" as each page.</li>
<li>Add the menu item named "<strong>Edit</strong>" and "<strong>List</strong>" of AutoConnectAux as each page.</li>
<li>Replace the instance of ESP8266WebServer to AutoConnect.</li>
<li>Replace the instance of ESP8266WebServer to AutoConnect.</li>
<li>Change menu title to FSBrowser using <ahref="apiconfig.html#title">AutoConnectConfig::title</a>.</li>
<li>Change the menu title to FSBrowser using <ahref="apiconfig.html#title">AutoConnectConfig::title</a>.</li>
<li>Join the legacy pages declared at step #2 to AutoConnect using <ahref="api.html#join">AutoConnect::join</a>.</li>
<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 <ahref="https://ja.cppreference.com/w/cpp/container/vector/vector">std::vector</a>'s' <ahref="https://en.cppreference.com/w/cpp/language/list_initialization">list initialization</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>
</ol>
</ol>
<p><iclass="fa fa-code"></i> <strong>Modification for FSBrowser</strong><small>(part of sketch code)</small></p>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3366cc;stroke-width:0.26458332">Insert for attaching the menu</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3366cc;stroke-width:0.26458332">Insert for attaching the menu</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#99cc33;stroke-width:0.26458332">Replace for AutoConnect</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#99cc33;stroke-width:0.26458332">Replace for AutoConnect</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3366cc;stroke-width:0.26458332">Insert for attaching the menu</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3366cc;stroke-width:0.26458332">Insert for attaching the menu</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#99cc33;stroke-width:0.26458332">Replace for AutoConnect</tspan></text>
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#99cc33;stroke-width:0.26458332">Replace for AutoConnect</tspan></text>
@ -6,16 +6,16 @@ AutoConnect generates a menu dynamically depending on the instantiated [AutoConn
The sketch can display the [AutoConnect menu](menu.md) by following three patterns depending on AutoConnect-API usage.
The sketch can display the [AutoConnect menu](menu.md) by following three patterns depending on AutoConnect-API usage.
<iclass="fa fa-desktop"></i>Basic menu
<iclass="fa fa-desktop"></i> **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](api.md#begin) and [AutoConnect::handleClient](api.md#handleclient).
: 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](api.md#begin) and [AutoConnect::handleClient](api.md#handleclient).
<iclass="fa fa-desktop"></i>Extra menu with custom Web pages which is consisted by [AutoConnectElements](acelements.md)
<iclass="fa fa-desktop"></i> **Extra menu with custom Web pages which is consisted by [AutoConnectElements](acelements.md)**
: It is an extended menu that appears when the sketch consists of the custom Web pages with [AutoConnectAux](acintro.md#how-it-works) and AutoConnectElements. Refer to [Custom Web pages section](acintro.md#custom-web-pages-in-autoconnect-menu).
: It is an extended menu that appears when the sketch consists of the custom Web pages with [AutoConnectAux](acintro.md#how-it-works) and AutoConnectElements. Refer to [Custom Web pages section](acintro.md#custom-web-pages-in-autoconnect-menu).
<iclass="fa fa-desktop"></i>Extra menu which contains legacy pages
<iclass="fa fa-desktop"></i> **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.
: 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**](apiaux.md#autoconnectaux) 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.
The mechanism to generate the AutoConnect menu is simple. It will insert the item as `<li>` tag generated from the [**title**](apiaux.md#autoconnectaux) and [**uri**](apiaux.md#autoconnectaux) 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
## Place the item for the legacy sketches on the menu
@ -28,10 +28,13 @@ The AutoConnect library package contains an example sketch for ESP8266WebServer
The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows.
The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows.
1. Add AutoConnect declaration.
1. Add AutoConnect declaration.
2. Add the AutoConnectAux named "**Edit**" and "**List**" as each page.
2. Add the menu item named "**Edit**" and "**List**" of AutoConnectAux as each page.
3. Replace the instance of ESP8266WebServer to AutoConnect.
3. Replace the instance of ESP8266WebServer to AutoConnect.
4. Change menu title to FSBrowser using [AutoConnectConfig::title](apiconfig.md#title).
4. Change the menu title to FSBrowser using [AutoConnectConfig::title](apiconfig.md#title).
5. Join the legacy pages declared at step #2 to AutoConnect using [AutoConnect::join](api.md#join).
5. Join the legacy pages to AutoConnect declared at step #1 using [AutoConnect::join](api.md#join).<br>Joining multiple at one time with [std::vector](https://ja.cppreference.com/w/cpp/container/vector/vector)'s' [list initialization](https://en.cppreference.com/w/cpp/language/list_initialization).
6. According to the basic procedure of AutoConnect.<br>Establish a connection with [AutoConnect::begin](api.md#begin) and perform [AutoConnect::handleClient](api.md#handleclient) in **loop()**.
<iclass="fa fa-code"></i> **Modification for FSBrowser** <small>(part of sketch code)</small>