<!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-4.0.1" >
< title > AutoConnect menu - AutoConnect for ESP8266/ESP32< / title >
< link rel = "stylesheet" href = "assets/stylesheets/application.982221ab.css" >
< link rel = "stylesheet" href = "assets/stylesheets/application-palette.224b79ff.css" >
< meta name = "theme-color" content = "#3f51b5" >
< script src = "assets/javascripts/modernizr.1f0bcf2b.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" >
< link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.1/css/all.css" >
< script >
window.ga = window.ga || function() {
(ga.q = ga.q || []).push(arguments)
}
ga.l = +new Date
/* Setup integration and send page view */
ga("create", "UA-116150854-1", "auto")
ga("set", "anonymizeIp", true)
ga("send", "pageview")
/* Register handler to log search on blur */
document.addEventListener("DOMContentLoaded", () => {
if (document.forms.search) {
var query = document.forms.search.query
query.addEventListener("blur", function() {
if (this.value) {
var path = document.location.pathname;
ga("send", "pageview", path + "?q=" + this.value)
}
})
}
})
< / script >
< script async src = "https://www.google-analytics.com/analytics.js" > < / 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 = "#by-attaching-autoconnect-menu" title = " by attaching AutoConnect menu" class = "md-nav__link" >
by attaching AutoConnect menu
< / 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.html" title = "Tips for data conversion" class = "md-nav__link" >
Tips for data conversion
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "menuize.html" title = "Attach the menu" class = "md-nav__link" >
Attach the menu
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "wojson.html" title = "Custom Web pages w/o JSON" class = "md-nav__link" >
Custom Web pages w/o JSON
< / a >
< / li >
< / ul >
< / nav >
< / li >
< li class = "md-nav__item" >
< a href = "lsbegin.html" title = "Appendix" class = "md-nav__link" >
Appendix
< / a >
< / 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 = "#by-attaching-autoconnect-menu" title = " by attaching AutoConnect menu" class = "md-nav__link" >
by attaching AutoConnect menu
< / 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 = "by-attaching-autoconnect-menu" > < i class = "fa fa-bars" > < / i > by attaching AutoConnect menu< a class = "headerlink" href = "#by-attaching-autoconnect-menu" title = "Permanent link" > ¶ < / a > < / h2 >
< p > The AutoConnect menu can contain HTML pages of your owns sketch as custom items. It works for HTML pages implemented by < strong > ESP8266WebServer::on< / strong > handler or < strong > WebServer::on< / strong > handler for ESP32. That is, you can make it as menu items to invoke the 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 to 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 > You can extend the AutoConnect menu to improve the original sketches and according to the procedure described in section < a href = "advancedusage.html#casts-the-html-pages-to-be-add-on-into-the-menu" > < em > Advanced Usage< / em > < / 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.b806dc00.js" > < / script >
< script > app . initialize ( { version : "1.0.4" , url : { base : "." } } ) < / script >
< script src = "js/gifffer.min.js" > < / script >
< / body >
< / html >
