<!doctype html>
< html lang = "en" class = "no-js" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width,initial-scale=1" >
< meta http-equiv = "x-ua-compatible" content = "ie=edge" >
< meta name = "description" content = "ESP8266/ESP32 WLAN configuration at run time with web interface" >
< link rel = "canonical" href = "https://Hieromon.github.io/AutoConnect/menu.html" >
< meta name = "author" content = "Hieromon Ikasamo" >
< meta name = "lang:clipboard.copy" content = "Copy to clipboard" >
< meta name = "lang:clipboard.copied" content = "Copied to clipboard" >
< meta name = "lang:search.language" content = "en" >
< meta name = "lang:search.pipeline.stopwords" content = "True" >
< meta name = "lang:search.pipeline.trimmer" content = "True" >
< meta name = "lang:search.result.none" content = "No matching documents" >
< meta name = "lang:search.result.one" content = "1 matching document" >
< meta name = "lang:search.result.other" content = "# matching documents" >
< meta name = "lang:search.tokenizer" content = "[\s\-]+" >
< link rel = "shortcut icon" href = "assets/images/favicon.png" >
< meta name = "generator" content = "mkdocs-1.0.4, mkdocs-material-3.3.0" >
< title > AutoConnect menu - AutoConnect for ESP8266/ESP32< / title >
< link rel = "stylesheet" href = "assets/stylesheets/application.572ca0f0.css" >
< link rel = "stylesheet" href = "assets/stylesheets/application-palette.22915126.css" >
< meta name = "theme-color" content = "#3f51b5" >
< script src = "assets/javascripts/modernizr.962652e9.js" > < / script >
< link href = "https://fonts.gstatic.com" rel = "preconnect" crossorigin >
< link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono" >
< style > body , input { font-family : "Roboto" , "Helvetica Neue" , Helvetica , Arial , sans-serif } code , kbd , pre { font-family : "Roboto Mono" , "Courier New" , Courier , monospace } < / style >
< link rel = "stylesheet" href = "assets/fonts/material-icons.css" >
< link rel = "stylesheet" href = "css/paragraph.css" >
< link rel = "stylesheet" href = "css/extra.css" >
< script async src = "https://www.googletagmanager.com/gtag/js?id=None" > < / script >
< script > function gtag ( ) { dataLayer . push ( arguments ) } window . dataLayer = window . dataLayer || [ ] , gtag ( "js" , new Date ) , gtag ( "config" , "None" ) < / script >
< / head >
< body dir = "ltr" data-md-color-primary = "indigo" data-md-color-accent = "indigo" >
< svg class = "md-svg" >
< defs >
< svg xmlns = "http://www.w3.org/2000/svg" width = "416" height = "448"
viewBox="0 0 416 448" id="__github">
< path fill = "currentColor" d = "M160 304q0 10-3 . 125 20 . 5t-10 . 75 19-18 . 125
8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5
18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75
19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19
18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360
304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25
2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8
38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0
37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25
82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75
1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75
0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25
30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5
46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34
99.5z" />
< / svg >
< / defs >
< / svg >
< input class = "md-toggle" data-md-toggle = "drawer" type = "checkbox" id = "__drawer" autocomplete = "off" >
< input class = "md-toggle" data-md-toggle = "search" type = "checkbox" id = "__search" autocomplete = "off" >
< label class = "md-overlay" data-md-component = "overlay" for = "__drawer" > < / label >
< a href = "#where-the-from" tabindex = "1" class = "md-skip" >
Skip to content
< / a >
< header class = "md-header" data-md-component = "header" >
< nav class = "md-header-nav md-grid" >
< div class = "md-flex" >
< div class = "md-flex__cell md-flex__cell--shrink" >
< a href = "https://Hieromon.github.io/AutoConnect/" title = "AutoConnect for ESP8266/ESP32" class = "md-header-nav__button md-logo" >
< img src = "images/arduino-logo.svg" width = "24" height = "24" >
< / a >
< / div >
< div class = "md-flex__cell md-flex__cell--shrink" >
< label class = "md-icon md-icon--menu md-header-nav__button" for = "__drawer" > < / label >
< / div >
< div class = "md-flex__cell md-flex__cell--stretch" >
< div class = "md-flex__ellipsis md-header-nav__title" data-md-component = "title" >
< span class = "md-header-nav__topic" >
AutoConnect for ESP8266/ESP32
< / span >
< span class = "md-header-nav__topic" >
AutoConnect menu
< / span >
< / div >
< / div >
< div class = "md-flex__cell md-flex__cell--shrink" >
< label class = "md-icon md-icon--search md-header-nav__button" for = "__search" > < / label >
< div class = "md-search" data-md-component = "search" role = "dialog" >
< label class = "md-search__overlay" for = "__search" > < / label >
< div class = "md-search__inner" role = "search" >
< form class = "md-search__form" name = "search" >
< input type = "text" class = "md-search__input" name = "query" placeholder = "Search" autocapitalize = "off" autocorrect = "off" autocomplete = "off" spellcheck = "false" data-md-component = "query" data-md-state = "active" >
< label class = "md-icon md-search__icon" for = "__search" > < / label >
< button type = "reset" class = "md-icon md-search__icon" data-md-component = "reset" tabindex = "-1" >

< / button >
< / form >
< div class = "md-search__output" >
< div class = "md-search__scrollwrap" data-md-scrollfix >
< div class = "md-search-result" data-md-component = "result" >
< div class = "md-search-result__meta" >
Type to start searching
< / div >
< ol class = "md-search-result__list" > < / ol >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "md-flex__cell md-flex__cell--shrink" >
< div class = "md-header-nav__source" >
< a href = "https://github.com/Hieromon/AutoConnect" title = "Go to repository" class = "md-source" data-md-source = "github" >
< div class = "md-source__icon" >
< svg viewBox = "0 0 24 24" width = "24" height = "24" >
< use xlink:href = "#__github" width = "24" height = "24" > < / use >
< / svg >
< / div >
< div class = "md-source__repository" >
Hieromon/AutoConnect
< / div >
< / a >
< / div >
< / div >
< / div >
< / nav >
< / header >
< div class = "md-container" >
< nav class = "md-tabs" data-md-component = "tabs" >
< div class = "md-tabs__inner md-grid" >
< ul class = "md-tabs__list" >
< li class = "md-tabs__item" >
< a href = "index.html" title = "Overview" class = "md-tabs__link md-tabs__link--active" >
Overview
< / a >
< / li >
< li class = "md-tabs__item" >
< a href = "acintro.html" title = "Custom Web pages" class = "md-tabs__link" >
Custom Web pages
< / a >
< / li >
< li class = "md-tabs__item" >
< a href = "api.html" title = "Library APIs" class = "md-tabs__link" >
Library APIs
< / a >
< / li >
< li class = "md-tabs__item" >
< a href = "howtoembed.html" title = "Examples" class = "md-tabs__link" >
Examples
< / a >
< / li >
< / ul >
< / div >
< / nav >
< main class = "md-main" >
< div class = "md-main__inner md-grid" data-md-component = "container" >
< div class = "md-sidebar md-sidebar--primary" data-md-component = "navigation" >
< div class = "md-sidebar__scrollwrap" >
< div class = "md-sidebar__inner" >
< nav class = "md-nav md-nav--primary" data-md-level = "0" >
< label class = "md-nav__title md-nav__title--site" for = "__drawer" >
< a href = "https://Hieromon.github.io/AutoConnect/" title = "AutoConnect for ESP8266/ESP32" class = "md-nav__button md-logo" >
< img src = "images/arduino-logo.svg" width = "48" height = "48" >
< / a >
AutoConnect for ESP8266/ESP32
< / label >
< div class = "md-nav__source" >
< a href = "https://github.com/Hieromon/AutoConnect" title = "Go to repository" class = "md-source" data-md-source = "github" >
< div class = "md-source__icon" >
< svg viewBox = "0 0 24 24" width = "24" height = "24" >
< use xlink:href = "#__github" width = "24" height = "24" > < / use >
< / svg >
< / div >
< div class = "md-source__repository" >
Hieromon/AutoConnect
< / div >
< / a >
< / div >
< ul class = "md-nav__list" data-md-scrollfix >
< li class = "md-nav__item" >
< a href = "index.html" title = "Overview" class = "md-nav__link" >
Overview
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "gettingstarted.html" title = "Getting started" class = "md-nav__link" >
Getting started
< / a >
< / li >
< li class = "md-nav__item md-nav__item--active" >
< input class = "md-toggle md-nav__toggle" data-md-toggle = "toc" type = "checkbox" id = "__toc" >
< label class = "md-nav__link md-nav__link--active" for = "__toc" >
AutoConnect menu
< / label >
< a href = "menu.html" title = "AutoConnect menu" class = "md-nav__link md-nav__link--active" >
AutoConnect menu
< / a >
< nav class = "md-nav md-nav--secondary" >
< label class = "md-nav__title" for = "__toc" > Table of contents< / label >
< ul class = "md-nav__list" data-md-scrollfix >
< li class = "md-nav__item" >
< a href = "#where-the-from" title = " Where the from" class = "md-nav__link" >
Where the from
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#right-on-top" title = " Right on top" class = "md-nav__link" >
Right on top
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#configure-new-ap" title = " Configure new AP" class = "md-nav__link" >
Configure new AP
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#open-ssids" title = " Open SSIDs" class = "md-nav__link" >
Open SSIDs
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#disconnect" title = " Disconnect" class = "md-nav__link" >
Disconnect
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#reset" title = " Reset..." class = "md-nav__link" >
Reset...
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#custom-menu-items" title = " Custom menu items" class = "md-nav__link" >
Custom menu items
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#home" title = " HOME" class = "md-nav__link" >
HOME
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#extend-autoconnect-menu-with-your-sketches" title = " Extend AutoConnect menu with your sketches" class = "md-nav__link" >
Extend AutoConnect menu with your sketches
< / a >
< / li >
< / ul >
< / nav >
< / li >
< li class = "md-nav__item" >
< a href = "basicusage.html" title = "Basic usage" class = "md-nav__link" >
Basic usage
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "advancedusage.html" title = "Advanced usage" class = "md-nav__link" >
Advanced usage
< / a >
< / li >
< li class = "md-nav__item md-nav__item--nested" >
< input class = "md-toggle md-nav__toggle" data-md-toggle = "nav-6" type = "checkbox" id = "nav-6" >
< label class = "md-nav__link" for = "nav-6" >
Custom Web pages
< / label >
< nav class = "md-nav" data-md-component = "collapsible" data-md-level = "1" >
< label class = "md-nav__title" for = "nav-6" >
Custom Web pages
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
< li class = "md-nav__item" >
< a href = "acintro.html" title = "Custom Web pages with AutoConnect" class = "md-nav__link" >
Custom Web pages with AutoConnect
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "acelements.html" title = "AutoConnectElements" class = "md-nav__link" >
AutoConnectElements
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "acjson.html" title = "Custom Web pages with JSON" class = "md-nav__link" >
Custom Web pages with JSON
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "achandling.html" title = "Handling the custom Web pages" class = "md-nav__link" >
Handling the custom Web pages
< / a >
< / li >
< / ul >
< / nav >
< / li >
< li class = "md-nav__item md-nav__item--nested" >
< input class = "md-toggle md-nav__toggle" data-md-toggle = "nav-7" type = "checkbox" id = "nav-7" >
< label class = "md-nav__link" for = "nav-7" >
Library APIs
< / label >
< nav class = "md-nav" data-md-component = "collapsible" data-md-level = "1" >
< label class = "md-nav__title" for = "nav-7" >
Library APIs
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
< li class = "md-nav__item" >
< a href = "api.html" title = "AutoConnect API" class = "md-nav__link" >
AutoConnect API
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "apiaux.html" title = "AutoConnectAux API" class = "md-nav__link" >
AutoConnectAux API
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "apiconfig.html" title = "AutoConnectConfig API" class = "md-nav__link" >
AutoConnectConfig API
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "apielements.html" title = "AutoConnectElements API" class = "md-nav__link" >
AutoConnectElements API
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "apiextra.html" title = "Something extra" class = "md-nav__link" >
Something extra
< / a >
< / li >
< / ul >
< / nav >
< / li >
< li class = "md-nav__item md-nav__item--nested" >
< input class = "md-toggle md-nav__toggle" data-md-toggle = "nav-8" type = "checkbox" id = "nav-8" >
< label class = "md-nav__link" for = "nav-8" >
Examples
< / label >
< nav class = "md-nav" data-md-component = "collapsible" data-md-level = "1" >
< label class = "md-nav__title" for = "nav-8" >
Examples
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
< li class = "md-nav__item" >
< a href = "howtoembed.html" title = "How to embed" class = "md-nav__link" >
How to embed
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "datatips.md" title = "Tips for data retrieval" class = "md-nav__link" >
Tips for data retrieval
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "menuize.html" title = "Constucting menu" class = "md-nav__link" >
Constucting menu
< / a >
< / li >
< / ul >
< / nav >
< / li >
< li class = "md-nav__item" >
< a href = "faq.html" title = "FAQ" class = "md-nav__link" >
FAQ
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "changelog.html" title = "Change log" class = "md-nav__link" >
Change log
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "license.html" title = "License" class = "md-nav__link" >
License
< / a >
< / li >
< / ul >
< / nav >
< / div >
< / div >
< / div >
< div class = "md-sidebar md-sidebar--secondary" data-md-component = "toc" >
< div class = "md-sidebar__scrollwrap" >
< div class = "md-sidebar__inner" >
< nav class = "md-nav md-nav--secondary" >
< label class = "md-nav__title" for = "__toc" > Table of contents< / label >
< ul class = "md-nav__list" data-md-scrollfix >
< li class = "md-nav__item" >
< a href = "#where-the-from" title = " Where the from" class = "md-nav__link" >
Where the from
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#right-on-top" title = " Right on top" class = "md-nav__link" >
Right on top
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#configure-new-ap" title = " Configure new AP" class = "md-nav__link" >
Configure new AP
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#open-ssids" title = " Open SSIDs" class = "md-nav__link" >
Open SSIDs
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#disconnect" title = " Disconnect" class = "md-nav__link" >
Disconnect
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#reset" title = " Reset..." class = "md-nav__link" >
Reset...
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#custom-menu-items" title = " Custom menu items" class = "md-nav__link" >
Custom menu items
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#home" title = " HOME" class = "md-nav__link" >
HOME
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#extend-autoconnect-menu-with-your-sketches" title = " Extend AutoConnect menu with your sketches" class = "md-nav__link" >
Extend AutoConnect menu with your sketches
< / a >
< / li >
< / ul >
< / nav >
< / div >
< / div >
< / div >
< div class = "md-content" >
< article class = "md-content__inner md-typeset" >
< h1 > AutoConnect menu< / h1 >
< div class = "admonition info" >
< p class = "admonition-title" > Luxbar< / p >
< p > The AutoConnect menu is developed using the < a href = "https://github.com/balzss/luxbar" > LuxBar< / a > which is licensed under the MIT License. See the < a href = "license.html" > License< / a > .< / p >
< / div >
< h2 id = "where-the-from" > < i class = "fa fa-external-link" > < / i > Where the from< a class = "headerlink" href = "#where-the-from" title = "Permanent link" > ¶ < / a > < / h2 >
< p > The AutoConnect menu appears when you access the < strong > AutoConnect root path< / strong > . It is assigned "< strong > /_ac< / strong > " located on the < em > local IP address< / em > of ESP8266/ESP32 module by default. This location can be changed in the sketch. The following screen will appear at access to < code > http://{localIP}/_ac< / code > as the root path. This is the statistics of the current WiFi connection. You can access the menu from the here, to invoke it tap < i class = "fa fa-bars" > < / i > at right on top. (e.g. < code > http://192.168.244.1/_ac< / code > for SoftAP mode.)< / p >
< p > < img src = "./images/ac.png" style = "border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" / > < / p >
< div class = "admonition note" >
< p class = "admonition-title" > What's the local IP?< / p >
< p > A local IP means Local IP at connection established or SoftAP's IP.< / p >
< / div >
< h2 id = "right-on-top" > < i class = "fa fa-bars" > < / i > Right on top< a class = "headerlink" href = "#right-on-top" title = "Permanent link" > ¶ < / a > < / h2 >
< p > Currently, AutoConnect supports four menus. Undermost menu as "HOME" returns to the home path of its sketch.< / p >
< ul >
< li > < strong > Configure new AP< / strong > : Configure SSID and Password for new access point.< / li >
< li > < strong > Open SSIDs< / strong > : Opens the past SSID which has been established connection from EEPROM.< / li >
< li > < strong > Disconnect< / strong > : Disconnects current connection.< / li >
< li > < strong > Reset...< / strong > : Rest the ESP8266/ESP32 module.< / li >
< li > < strong > HOME< / strong > : Return to user home page.< / li >
< / ul >
< p > < img src = "./images/menu.png" style = "width:280px;" / > < / p >
< h2 id = "configure-new-ap" > < i class = "fa fa-bars" > < / i > Configure new AP< a class = "headerlink" href = "#configure-new-ap" title = "Permanent link" > ¶ < / a > < / h2 >
< p > Scan all available access point in the vicinity and display it. Strength and security of the detected AP are marked. The < i class = "fa fa-lock" > < / i > is indicated for the SSID that needs a security key. "< strong > Hidden:< / strong > " means the number of hidden SSIDs discovered.< br / >
Enter SSID and Passphrase and tap "< strong > apply< / strong > " to starts WiFi connection. < / p >
< p > < img src = "./images/newap.png" style = "border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" / > < / p >
< h2 id = "open-ssids" > < i class = "fa fa-bars" > < / i > Open SSIDs< a class = "headerlink" href = "#open-ssids" title = "Permanent link" > ¶ < / a > < / h2 >
< p > Once it was established WiFi connection, its SSID and password will be saved in EEPROM of ESP8266/ESP32 automatically. The < strong > Open SSIDs< / strong > menu reads the saved SSID credentials from the EEPROM. The stored credential data are listed by the SSID as shown below. Its label is a clickable button. Tap the SSID button, starts WiFi connection it.< / p >
< p > < img src = "./images/open.png" style = "border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" / > < / p >
< h2 id = "disconnect" > < i class = "fa fa-bars" > < / i > Disconnect< a class = "headerlink" href = "#disconnect" title = "Permanent link" > ¶ < / a > < / h2 >
< p > Disconnect ESP8266/ESP32 from the current connection. It can also reset the ESP8266/ESP32 automatically after disconnection by instructing with using < a href = "api.html#autoreset" > API< / a > in the sketch.< / p >
< p > After tapping "Disconnect", you will not be able to reach the AutoConnect menu. Once disconnected, you will need to set the SSID again for connecting the WLAN. < / p >
< h2 id = "reset" > < i class = "fa fa-bars" > < / i > Reset...< a class = "headerlink" href = "#reset" title = "Permanent link" > ¶ < / a > < / h2 >
< p > Reset the ESP8266/ESP32 module, it will start rebooting. After rebooting complete, the ESP8266/ESP32 module begins establishing the previous connection with WIFI_STA mode, and < em > esp8266ap< / em > or < em > esp32ap< / em > of an access point will disappear from WLAN.< / p >
< p > < img src = "./images/resetting.png" style = "width:280px;" / > < / p >
< div class = "admonition warning" >
< p class = "admonition-title" > Not every ESP8266 module will be rebooted normally< / p >
< p > The Reset menu is using the < strong > ESP.reset()< / strong > function for ESP8266. This is an almost hardware reset. In order to resume the sketch normally, the < a href = "https://github.com/esp8266/esp8266-wiki/wiki/Boot-Process#esp-boot-modes" > state of GPIO0< / a > is important. Since this depends on the circuit implementation for each module, not every module will be rebooted normally. See also < a href = "faq.html#hang-up-after-reset" > FAQ< / a > .< / p >
< / div >
< h2 id = "custom-menu-items" > < i class = "fa fa-bars" > < / i > Custom menu items< a class = "headerlink" href = "#custom-menu-items" title = "Permanent link" > ¶ < / a > < / h2 >
< p > The menu items of the custom Web page line up at the below in the AutoConnect menu if the custom Web pages are joined. Details for < a href = "acintro.html#custom-web-pages-in-autoconnectmenu" > Custom Web pages in AutoConnect menu< / a > .< / p >
< h2 id = "home" > < i class = "fa fa-bars" > < / i > HOME< a class = "headerlink" href = "#home" title = "Permanent link" > ¶ < / a > < / h2 >
< p > A < strong > HOME< / strong > item located at the bottom of the menu list is a link to the home path. The URI as the home path is < code > /< / code > by default, and it is defined by < code > AUTOCONNECT_HOMEURI< / code > with < strong > AutoConnectDefs.h< / strong > file.< / p >
< div class = "codehilite" style = "background: #272822" > < pre style = "line-height: 125%" > < span > < / span > < span style = "color: #75715e" > #define AUTOCONNECT_HOMEURI " /" < / span >
< / pre > < / div >
< p > You can change the HOME path using the AutoConnect API. The < a href = "api.html#home" > < strong > AutoConnect::home< / strong > < / a > function sets the URI as a link of the HOME item of the AutoConnect menu.< / p >
< h2 id = "extend-autoconnect-menu-with-your-sketches" > < i class = "fa fa-bars" > < / i > Extend AutoConnect menu with your sketches< a class = "headerlink" href = "#extend-autoconnect-menu-with-your-sketches" title = "Permanent link" > ¶ < / a > < / h2 >
< p > The AutoConnect menu can contain custom items of your own sketch. It works for the custom Web pages by < a href = "acintro.html" > AutoConnectAux< / a > , addition to the request handler for ESP8266WebServer class that is registered by the ESP8266WebServer::on function or WebServer::on for ESP32. That is, you can make it as a menu item to invoke a legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as < a href = "https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser" > FSBrowser< / a > to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code.< / p >
< div style = "float:left;width:auto;height:420px;" > < img style = "width:auto;height:420px;" src = "./images/fsbmenu.png" > < / div >
< p > < img style = "margin-left:70px;width:auto;height:420px;" src = "./images/fsbmenu_expand.png" > < / p >
< p > The procedure to extend the AutoConnect menu is described in the < a href = "advancedusage.html#cast-items-of-your-sketch-own-into-the-autoccnnect-menu" > Advanced usage section< / a > .< / p >
< / article >
< / div >
< / div >
< / main >
< footer class = "md-footer" >
< div class = "md-footer-nav" >
< nav class = "md-footer-nav__inner md-grid" >
< a href = "gettingstarted.html" title = "Getting started" class = "md-flex md-footer-nav__link md-footer-nav__link--prev" rel = "prev" >
< div class = "md-flex__cell md-flex__cell--shrink" >
< i class = "md-icon md-icon--arrow-back md-footer-nav__button" > < / i >
< / div >
< div class = "md-flex__cell md-flex__cell--stretch md-footer-nav__title" >
< span class = "md-flex__ellipsis" >
< span class = "md-footer-nav__direction" >
Previous
< / span >
Getting started
< / span >
< / div >
< / a >
< a href = "basicusage.html" title = "Basic usage" class = "md-flex md-footer-nav__link md-footer-nav__link--next" rel = "next" >
< div class = "md-flex__cell md-flex__cell--stretch md-footer-nav__title" >
< span class = "md-flex__ellipsis" >
< span class = "md-footer-nav__direction" >
Next
< / span >
Basic usage
< / span >
< / div >
< div class = "md-flex__cell md-flex__cell--shrink" >
< i class = "md-icon md-icon--arrow-forward md-footer-nav__button" > < / i >
< / div >
< / a >
< / nav >
< / div >
< div class = "md-footer-meta md-typeset" >
< div class = "md-footer-meta__inner md-grid" >
< div class = "md-footer-copyright" >
< div class = "md-footer-copyright__highlight" >
Copyright © 2018-2019 Hieromon Ikasamo
< / div >
powered by
< a href = "https://www.mkdocs.org" > MkDocs< / a >
and
< a href = "https://squidfunk.github.io/mkdocs-material/" >
Material for MkDocs< / a >
< / div >
< div class = "md-footer-social" >
< link rel = "stylesheet" href = "assets/fonts/font-awesome.css" >
< a href = "https://github.com/Hieromon" class = "md-footer-social__link fa fa-github" > < / a >
< a href = "https://twitter.com/hieromon" class = "md-footer-social__link fa fa-twitter" > < / a >
< / div >
< / div >
< / div >
< / footer >
< / div >
< script src = "assets/javascripts/application.a353778b.js" > < / script >
< script > app . initialize ( { version : "1.0.4" , url : { base : "." } } ) < / script >
< script src = "js/gifffer.min.js" > < / script >
< / body >
< / html >
