You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
326 KiB
1 lines
326 KiB
{"config":{"lang":["en"],"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"index.html","text":"AutoConnect for ESP8266/ESP32 \u00b6 An Arduino library for ESP8266/ESP32 WLAN configuration at run time with web interface. Overview \u00b6 To the dynamic configuration for joining to WLAN with SSID and PSK accordingly. It an Arduino library united with ESP8266WebServer class for ESP8266 or WebServer class for ESP32. Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi connection. With this library to make a sketch easily which connects from ESP8266/ESP32 to the access point at runtime by the web interface without hard-coded SSID and password. No need pre-coded SSID & password \u00b6 It is no needed hard-coding in advance the SSID and Password into the sketch to connect between ESP8266/ESP32 and WLAN. You can input SSID & Password from a smartphone via the web interface at runtime. Simple usage \u00b6 AutoConnect control screen will be displayed automatically for establishing new connections. It aids by the captive portal when vested the connection cannot be detected. By using the AutoConnect menu , to manage the connections convenient. Store the established connection \u00b6 The connection authentication data as credentials are saved automatically in EEPROM of ESP8266/ESP32 and You can select the past SSID from the AutoConnect menu . Easy to embed in \u00b6 AutoConnect can be placed easily in your sketch. It's \" begin \" and \" handleClient \" only. Lives with your sketches \u00b6 The sketches which provide the web page using ESP8266WebServer there is, AutoConnect will not disturb it. AutoConnect can use an already instantiated ESP8266WebServer object, or itself can assign it. This effect also applies to ESP32. The corresponding class for ESP32 will be the WebServer. Easy to add the custom Web screens ENHANCED w/v0.9.7 \u00b6 You can easily add your owned web screens that can consist of representative HTML elements and invoke them from the menu. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD. Installation \u00b6 Requirements \u00b6 Supported hardware \u00b6 Generic ESP8266 modules (applying the ESP8266 Community's Arduino core) Adafruit HUZZAH ESP8266 (ESP-12) ESP-WROOM-02 Heltec WiFi Kit 8 NodeMCU 0.9 (ESP-12) / NodeMCU 1.0 (ESP-12E) Olimex MOD-WIFI-ESP8266 SparkFun Thing SweetPea ESP-210 ESP32Dev Board (applying the Espressif's arduino-esp32 core) SparkFun ESP32 Thing WEMOS LOLIN D32 Ai-Thinker NodeMCU-32S Heltec WiFi Kit 32 M5Stack And other ESP8266/ESP32 modules supported by the Additional Board Manager URLs of the Arduino-IDE. About flash size on the module The AutoConnect sketch size is relatively large. Large flash capacity is necessary. 512Kbyte (4Mbits) flash inclusion module such as ESP-01 is not recommended. Required libraries \u00b6 AutoConnect requires the following environment and libraries. Arduino IDE The current upstream at the 1.8 level or later is needed. Please install from the official Arduino IDE download page . This step is not required if you already have a modern version. ESP8266 Arduino core AutoConnect targets sketches made on the assumption of ESP8266 Community's Arduino core . The latest release is recommended. Install third-party platform using the Boards Manager of Arduino IDE. Package URL is http://arduino.esp8266.com/stable/package_esp8266com_index.json ESP32 Arduino core Also, to apply AutoConnect to ESP32, the arduino-esp32 core provided by Espressif is needed. The latest release is recommended. Install third-party platform using the Boards Manager of Arduino IDE. You can add multiple URLs into Additional Board Manager URLs field, separating them with commas. Package URL is https://dl.espressif.com/dl/package_esp32_index.json for ESP32. Additional library (Required) The PageBuilder library to build HTML for ESP8266WebServer is needed. To install the PageBuilder library into your Arduino IDE, you can use the Library Manager . Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword ' PageBuilder ' with the topic ' Communication ', then you can see the PageBuilder . The latest version is required 1.3.2 later. 1 Additional library (Optional) By adding the ArduinoJson library, AutoConnect will be able to handle the custom Web pages described with JSON. With AutoConnect v0.9.7 you can insert user-owned screens that can consist of representative HTML elements as styled TEXT, INPUT, BUTTON, CHECKBOX, SELECT, SUBMIT and invoke them from the AutoConnect menu. These HTML elements can be added by sketches using the AutoConnect API. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD. ArduinoJson version 5 is required to use this feature. 2 AutoConnect supports ArduinoJson version 5 only And ArduinoJson version 6 is still in beta. The Arduino Library Manager installs the ArduinoJson version 6 by default. Open the Arduino Library Manager and make sure that ArduinoJson version 5 is installed. Install the AutoConnect \u00b6 Clone or download from the AutoConnect GitHub repository . When you select Download, you can import it to Arduino IDE immediately. After downloaded, the AutoConnect-master.zip file will be saved in your download folder. Then in the Arduino IDE, navigate to \"Sketch > Include Library\" . At the top of the drop down list, select the option to \"Add .ZIP Library...\" . Details for Arduino official page . Supported by Library manager. AutoConnect was added to the Arduino IDE library manager. It can be used with the PlatformIO library also. window.onload = function() { Gifffer(); }; Since AutoConnect v0.9.7, PageBuilder v1.3.2 later is required. \u21a9 Using the AutoConnect API natively allows you to sketch custom Web pages without JSON. \u21a9","title":"Overview"},{"location":"index.html#autoconnect-for-esp8266esp32","text":"An Arduino library for ESP8266/ESP32 WLAN configuration at run time with web interface.","title":"AutoConnect for ESP8266/ESP32"},{"location":"index.html#overview","text":"To the dynamic configuration for joining to WLAN with SSID and PSK accordingly. It an Arduino library united with ESP8266WebServer class for ESP8266 or WebServer class for ESP32. Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi connection. With this library to make a sketch easily which connects from ESP8266/ESP32 to the access point at runtime by the web interface without hard-coded SSID and password.","title":"Overview"},{"location":"index.html#no-need-pre-coded-ssid-password","text":"It is no needed hard-coding in advance the SSID and Password into the sketch to connect between ESP8266/ESP32 and WLAN. You can input SSID & Password from a smartphone via the web interface at runtime.","title":" No need pre-coded SSID & password"},{"location":"index.html#simple-usage","text":"AutoConnect control screen will be displayed automatically for establishing new connections. It aids by the captive portal when vested the connection cannot be detected. By using the AutoConnect menu , to manage the connections convenient.","title":" Simple usage"},{"location":"index.html#store-the-established-connection","text":"The connection authentication data as credentials are saved automatically in EEPROM of ESP8266/ESP32 and You can select the past SSID from the AutoConnect menu .","title":" Store the established connection"},{"location":"index.html#easy-to-embed-in","text":"AutoConnect can be placed easily in your sketch. It's \" begin \" and \" handleClient \" only.","title":" Easy to embed in"},{"location":"index.html#lives-with-your-sketches","text":"The sketches which provide the web page using ESP8266WebServer there is, AutoConnect will not disturb it. AutoConnect can use an already instantiated ESP8266WebServer object, or itself can assign it. This effect also applies to ESP32. The corresponding class for ESP32 will be the WebServer.","title":" Lives with your sketches"},{"location":"index.html#easy-to-add-the-custom-web-screens-enhanced-wv097","text":"You can easily add your owned web screens that can consist of representative HTML elements and invoke them from the menu. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD.","title":" Easy to add the custom Web screens ENHANCED w/v0.9.7"},{"location":"index.html#installation","text":"","title":"Installation"},{"location":"index.html#requirements","text":"","title":"Requirements"},{"location":"index.html#supported-hardware","text":"Generic ESP8266 modules (applying the ESP8266 Community's Arduino core) Adafruit HUZZAH ESP8266 (ESP-12) ESP-WROOM-02 Heltec WiFi Kit 8 NodeMCU 0.9 (ESP-12) / NodeMCU 1.0 (ESP-12E) Olimex MOD-WIFI-ESP8266 SparkFun Thing SweetPea ESP-210 ESP32Dev Board (applying the Espressif's arduino-esp32 core) SparkFun ESP32 Thing WEMOS LOLIN D32 Ai-Thinker NodeMCU-32S Heltec WiFi Kit 32 M5Stack And other ESP8266/ESP32 modules supported by the Additional Board Manager URLs of the Arduino-IDE. About flash size on the module The AutoConnect sketch size is relatively large. Large flash capacity is necessary. 512Kbyte (4Mbits) flash inclusion module such as ESP-01 is not recommended.","title":"Supported hardware"},{"location":"index.html#required-libraries","text":"AutoConnect requires the following environment and libraries. Arduino IDE The current upstream at the 1.8 level or later is needed. Please install from the official Arduino IDE download page . This step is not required if you already have a modern version. ESP8266 Arduino core AutoConnect targets sketches made on the assumption of ESP8266 Community's Arduino core . The latest release is recommended. Install third-party platform using the Boards Manager of Arduino IDE. Package URL is http://arduino.esp8266.com/stable/package_esp8266com_index.json ESP32 Arduino core Also, to apply AutoConnect to ESP32, the arduino-esp32 core provided by Espressif is needed. The latest release is recommended. Install third-party platform using the Boards Manager of Arduino IDE. You can add multiple URLs into Additional Board Manager URLs field, separating them with commas. Package URL is https://dl.espressif.com/dl/package_esp32_index.json for ESP32. Additional library (Required) The PageBuilder library to build HTML for ESP8266WebServer is needed. To install the PageBuilder library into your Arduino IDE, you can use the Library Manager . Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword ' PageBuilder ' with the topic ' Communication ', then you can see the PageBuilder . The latest version is required 1.3.2 later. 1 Additional library (Optional) By adding the ArduinoJson library, AutoConnect will be able to handle the custom Web pages described with JSON. With AutoConnect v0.9.7 you can insert user-owned screens that can consist of representative HTML elements as styled TEXT, INPUT, BUTTON, CHECKBOX, SELECT, SUBMIT and invoke them from the AutoConnect menu. These HTML elements can be added by sketches using the AutoConnect API. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD. ArduinoJson version 5 is required to use this feature. 2 AutoConnect supports ArduinoJson version 5 only And ArduinoJson version 6 is still in beta. The Arduino Library Manager installs the ArduinoJson version 6 by default. Open the Arduino Library Manager and make sure that ArduinoJson version 5 is installed.","title":"Required libraries"},{"location":"index.html#install-the-autoconnect","text":"Clone or download from the AutoConnect GitHub repository . When you select Download, you can import it to Arduino IDE immediately. After downloaded, the AutoConnect-master.zip file will be saved in your download folder. Then in the Arduino IDE, navigate to \"Sketch > Include Library\" . At the top of the drop down list, select the option to \"Add .ZIP Library...\" . Details for Arduino official page . Supported by Library manager. AutoConnect was added to the Arduino IDE library manager. It can be used with the PlatformIO library also. window.onload = function() { Gifffer(); }; Since AutoConnect v0.9.7, PageBuilder v1.3.2 later is required. \u21a9 Using the AutoConnect API natively allows you to sketch custom Web pages without JSON. \u21a9","title":"Install the AutoConnect"},{"location":"acelements.html","text":"The elements for the custom Web pages \u00b6 Representative HTML elements for making the custom Web page are provided as AutoConnectElements. AutoConnectButton : Labeled action button AutoConnectCheckbox : Labeled checkbox AutoConnectElement : General tag AutoConnectInput : Labeled text input box AutoConnectRadio : Labeled radio button AutoConnectSelect : Selection list AutoConnectSubmit : Submit button AutoConnectText : Style attributed text Layout on a custom Web page \u00b6 You can specify the direction to arrange the radio buttons as AutoConnectRadio vertically or horizontally. Other elements are arranged vertically in the order of addition to AutoConnectAux. This basic layout depends on the CSS of the AutoConnect menu so it can not be changed drastically. Form and AutoConnectElements \u00b6 All AutoConnectElements placed on a custom Web page are included in one form. Its form is fixed and created by AutoConnect. The form's value (usually the text or checkbox you entered) is sent by AutoConnectSubmit using the POST method. name and value of each AutoConnectElement which own form-data are reflected in the query string when the custom Web page was sent. You can retrieve the value in the sketch as the parameter's value of the query string with ESP8266WebServer::arg function or PageArgument class of AutoConnect::on handler when the form is submitted. AutoConnectElement - A basic class of elements \u00b6 AutoConnectElement is a base class for other element classes and has common attributes for all elements. It can also be used as a variant of each element. The following items are attributes that AutoConnectElement has and are common to other elements. Sample AutoConnectElement element(\"element\", \"<hr>\"); On the page: Constructor \u00b6 AutoConnectElement( const char * name, const char * value) name \u00b6 Each element has a name. The name is the String data type. You can identify each element by the name to access it with sketches. value \u00b6 The value is the string which is a source to generate an HTML code. Characteristics of Value vary depending on the element. The value of AutoConnectElement is native HTML code. A string of value is output as HTML as it is. type \u00b6 The type indicates the type of the element and represented as the ACElement_t enumeration type in the sketch. Since AutoConnectElement also acts as a variant of other elements, it can be applied to handle elements collectively. At that time, the type can be referred to by the typeOf() function. The following example changes the font color of all AutoConnectText elements of a custom Web page to gray. AutoConnectAux customPage; AutoConnectElementVT & elements = customPage.getElements(); for (AutoConnectElement & elm : elements) { if (elm.typeOf() == AC_Text) { AutoConnectText & text = reinterpret_cast < AutoConnectText &> (elm); text.style = \"color:gray;\" ; } } The enumerators for ACElement_t are as follows: AutoConnectButton: AC_Button AutoConnectCheckbox: AC_Checkbox AutoConnectElement: AC_Element AutoConnectInput: AC_Input AutoConnectRadio: AC_Radio AutoConnectSelect: AC_Select AutoConnectSubmit: AC_Submit AutoConnectText: AC_Text Uninitialized element: AC_Unknown Furthermore, to convert an entity that is not an AutoConnectElement to its native type, you must re-interpret that type with c++. AutoConnectButton \u00b6 AutoConnectButton generates an HTML < button type = \"button\" > tag and locates a clickable button to a custom Web page. Currently AutoConnectButton corresponds only to name, value, an onclick attribute of HTML button tag. An onclick attribute is generated from an action member variable of the AutoConnectButton, which is mostly used with a JavaScript to activate a script. Sample AutoConnectButton button(\"button\", \"OK\", \"myFunction()\"); On the page: Constructor \u00b6 AutoConnectButton( const char * name, const char * value, const String & action) name \u00b6 It is the name of the AutoConnectButton element and matches the name attribute of the button tag. It also becomes the parameter name of the query string when submitted. value \u00b6 It becomes a value of the value attribute of an HTML button tag. action \u00b6 action is String data type and is an onclick attribute fire on a mouse click on the element. It is mostly used with a JavaScript to activate a script. 1 For example, the following code defines a custom Web page that copies a content of Text1 to Text2 by clicking Button . const char * scCopyText = R\"( <script> function CopyText() { document.getElementById(\"Text2\").value = document.getElementById(\"Text1\").value; } </script> )\" ; ACInput(Text1, \"Text1\" ); ACInput(Text2, \"Text2\" ); ACButton(Button, \"COPY\" , \"CopyText()\" ); ACElement(TextCopy, scCopyText); AutoConnectCheckbox \u00b6 AutoConnectCheckbox generates an HTML < input type = \"checkbox\" > tag and a < label > tag. It places horizontally on a custom Web page by default. Sample AutoConnectCheckbox checkbox(\"checkbox\", \"uniqueapid\", \"Use APID unique\", false); On the page: Constructor \u00b6 AutoConnectCheckbox( const char * name, const char * value, const char * label, const bool checked) name \u00b6 It is the name of the AutoConnectCheckbox element and matches the name attribute of the input tag. It also becomes the parameter name of the query string when submitted. value \u00b6 It becomes a value of the value attribute of an HTML < input type = \"checkbox\" > tag. label \u00b6 A label is an optional string. A label is always arranged on the right side of the checkbox. Specification of a label will generate an HTML <label> tag with an id attribute. The checkbox and the label are connected by the id attribute. Only will be displayed if a label is not specified. checked \u00b6 A checked is a Boolean value and indicates the checked status of the checkbox. The value of the checked checkbox element is packed in the query string and sent. AutoConnectInput \u00b6 AutoConnectInput generates an HTML < input type = \"text\" > tag and a < label > tag. It can also have a placeholder. The value of the input box is passed to the destination in the query string and can be retrieved programmatically. You can also update from the sketches. Sample AutoConnectInput input(\"input\", \"\", \"Server\", \"MQTT broker server\"); On the page: Constructor \u00b6 AutoConnectInput( const char * name, const char * value, const char * label, const char * pattern, const char * placeholder) name \u00b6 It is the name of the AutoConnectInput element and matches the name attribute, the id attribute of the input tag. It also becomes the parameter name of the query string when submitted. value \u00b6 It becomes a string value of the value attribute of an HTML < input type = \"text\" > tag. The text entered from the custom Web page will be grouped in the query string of the form submission and the string set before accessing the page will be displayed as the initial value. label \u00b6 A label is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML < label > tag with an id attribute. The input box and the label are connected by the id attribute. pattern \u00b6 A pattern specifies a regular expression that the AutoConnectInput element's value is checked against on form submission. If it is invalid, the background color will change, but it will be sent even if the data format does not match. The password that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter: (?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,} Email address as characters@characters.domain : [a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$ IP address Host name of the internet Date (MM-DD-YYYY) Twitter account: ^@?(\\w){1,15}$ placeholder \u00b6 A placeholder is an option string. Specification of a placeholder will generate a placeholder attribute for the input tag. AutoConnectRadio \u00b6 AutoConnectRadio generates few HTML < input type = \"radio\" > tags as grouped and the same number of < label > tags. AutoConnectRadio can keep the value of a radio button as a collection. The grouped values will be placed in the custom Web page to select only one exclusively. Sample AutoConnectRadio radio(\"radio\", { \"30 sec.\", \"60 sec.\", \"180 sec.\" }, \"Update period\", AC_Vertical, 1); On the page: Constructor \u00b6 AutoConnectRadio( const char * name, std :: vector < String > const & values, const char * label, const ACArrange_t order, const uint8_t checked) name \u00b6 It is the name of the AutoConnectRadio element and matches the name attribute of the input tags. It also becomes the parameter name of the query string when submitted. values \u00b6 A values is an array of String type for the radio button options which as actually std::vector . It is an initialization list can be used. The input tags will be generated from each entry in the values, the amount of which is the same as the number of items in values . label \u00b6 A label is an optional string. A label will be arranged in the left or top of the radio buttons according to the order . Specification of a label will generate an HTML < label > tag with an id attribute. The radio buttons and the label are connected by the id attribute. order \u00b6 A order specifies the direction to arrange the radio buttons. It is a value of type ACArrange_t and accepts one of the following: AC_Horizontal : Horizontal arrangement. AC_Vertical : Vertical arrangement. A label will place in the left or the top according to the order . checked \u00b6 A checked specifies the index number (1-based) of the values to be checked. If this parameter is not specified neither item is checked. AutoConnectSelect \u00b6 AutoConnectSelect generates an HTML < select > tag (drop-down list) and few < option > tags. Sample AutoConnectSelect select(\"select\", { String(\"Europe/London\"), String(\"Europe/Berlin\"), String(\"Europe/Helsinki\"), String(\"Europe/Moscow\"), String(\"Asia/Dubai\") }, \"Select TZ name\"); On the page: Constructor \u00b6 AutoConnectSelect( const char * name, std :: vector < String > const & options, const char * label) name \u00b6 It is the name of the AutoConnectSelect element and matches the name attribute of the select tags. options \u00b6 An options is an array of String type for the options which as actually std::vector for an HTML < option > tag. It is an initialization list can be used. The option tags will be generated from each entry in the options, the amount of which is the same as the number of items in an options . label \u00b6 A label is an optional string. A label is always arranged on the left side of the drop-down list. Specification of a label will generate an HTML < label > tag with an id attribute. The select tag and the label are connected by the id attribute. AutoConnectSubmit \u00b6 AutoConnectSubmit generates an HTML < input type = \"button\" > tag attached onclick attribute. The native code of the onclick attribute is the submission of the form with the POST method. Sample AutoConnectSubmit submit(\"submit\", \"Save\", \"/mqtt_save\"); On the page: Constructor \u00b6 AutoConnectSubmit( const char * name, const char * value, const char * uri) name \u00b6 It is the name of the AutoConnectSubmit element and matches the name attribute of the input tag. value \u00b6 It becomes a string of the value attribute of an HTML < input type = \"button\" > tag. The value will be displayed as a label of the button. uri \u00b6 A uri specifies the URI to send form data when the button declared by AutoConnectSubmit is clicked. The query string of the form data sent with AutoConnectSubmit contains the URI of the page. Its parameter name is _acuri . In Sketch, you can know the called URI by referring to the _acuri parameter with the destination page handler. The actual query string is as follows: _acuri= CALLER_URI AutoConnectText \u00b6 AutoConnectText generates an HTML < div > tag. A style attribute will be attached if a style parameter is passed. Sample AutoConnectText text(\"text\", \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\", \"font-family:serif;color:#4682b4;\"); On the page: Constructor \u00b6 AutoConnectText( const char * name, const char * value, const char * style) name \u00b6 A name does not exist in the generated HTML. It provides only a means of accessing elements with the sketches. value \u00b6 It becomes content and also can contain the native HTML code, but remember that your written code is enclosed by the div tag. style \u00b6 A style specifies the qualification style to give to the content and can use the style attribute format as it is. How to coding for the elements \u00b6 Declaration for the elements in Sketches \u00b6 Variables of each AutoConnetElement can be declared with macros. By using the macros, you can treat element name that is String type as variable in sketches. 2 ACElement ( name [ , value ] ) ACButton ( name [ , value ] [ , action ] ) ACCheckbox ( name [ , value ] [ , label ] [ , true | false ] ) ACInput ( name [ , value ] [ , label ] [ , placeholder ] ) ACRadio ( name [ , values ] [ , label ] [ , AC_Horizontal | AC_Vertical ] [ , checked ] ) ACSelect ( name [ , options ] [ , label ] ) ACSubmit ( name [ , value ] [ , uri ] ) ACText ( name [ , value ] [ , style ] ) Declaration macro usage For example, AutoConnectText can be declared using macros. AutoConnectText caption( \"caption\" , \"hello, world\" , \"color:blue;\" ) equals by using ACText macro. ACText(caption, \"hello, world\" , \"color:blue;\" ) Variant for AutoConnectElements \u00b6 Some AutoConnectAux APIs specify AutoConnectElements as an argument. There are also functions that return a pointer to AutoConnectElements. AutoConnectElement behaves as a variant type of each element class to make these interfaces a single. Use reinterpret_cast to cast from a variant pointer to an Actual type pointer of AutoConnectElements. AutoConnectAux aux; ACText(Text1, \"hello, world\" ); aux.add(Text1); AutoConnectText * text_p = reinterpret_cast < AutoConnectText > (aux.getElement( \"Text1\" )); AutoConnectText & text = aux.getElement < AutoConnectText > ( \"Text1\" ); JavaScript can be inserted into a custom Web page using AutoConnectElement. \u21a9 The square brackets in the syntax are optional parameters, the stroke is a selection parameter, the bold fonts are literal. \u21a9","title":"AutoConnectElements"},{"location":"acelements.html#the-elements-for-the-custom-web-pages","text":"Representative HTML elements for making the custom Web page are provided as AutoConnectElements. AutoConnectButton : Labeled action button AutoConnectCheckbox : Labeled checkbox AutoConnectElement : General tag AutoConnectInput : Labeled text input box AutoConnectRadio : Labeled radio button AutoConnectSelect : Selection list AutoConnectSubmit : Submit button AutoConnectText : Style attributed text","title":"The elements for the custom Web pages"},{"location":"acelements.html#layout-on-a-custom-web-page","text":"You can specify the direction to arrange the radio buttons as AutoConnectRadio vertically or horizontally. Other elements are arranged vertically in the order of addition to AutoConnectAux. This basic layout depends on the CSS of the AutoConnect menu so it can not be changed drastically.","title":"Layout on a custom Web page"},{"location":"acelements.html#form-and-autoconnectelements","text":"All AutoConnectElements placed on a custom Web page are included in one form. Its form is fixed and created by AutoConnect. The form's value (usually the text or checkbox you entered) is sent by AutoConnectSubmit using the POST method. name and value of each AutoConnectElement which own form-data are reflected in the query string when the custom Web page was sent. You can retrieve the value in the sketch as the parameter's value of the query string with ESP8266WebServer::arg function or PageArgument class of AutoConnect::on handler when the form is submitted.","title":"Form and AutoConnectElements"},{"location":"acelements.html#autoconnectelement-a-basic-class-of-elements","text":"AutoConnectElement is a base class for other element classes and has common attributes for all elements. It can also be used as a variant of each element. The following items are attributes that AutoConnectElement has and are common to other elements. Sample AutoConnectElement element(\"element\", \"<hr>\"); On the page:","title":"AutoConnectElement - A basic class of elements"},{"location":"acelements.html#constructor","text":"AutoConnectElement( const char * name, const char * value)","title":" Constructor"},{"location":"acelements.html#name","text":"Each element has a name. The name is the String data type. You can identify each element by the name to access it with sketches.","title":" name"},{"location":"acelements.html#value","text":"The value is the string which is a source to generate an HTML code. Characteristics of Value vary depending on the element. The value of AutoConnectElement is native HTML code. A string of value is output as HTML as it is.","title":" value"},{"location":"acelements.html#type","text":"The type indicates the type of the element and represented as the ACElement_t enumeration type in the sketch. Since AutoConnectElement also acts as a variant of other elements, it can be applied to handle elements collectively. At that time, the type can be referred to by the typeOf() function. The following example changes the font color of all AutoConnectText elements of a custom Web page to gray. AutoConnectAux customPage; AutoConnectElementVT & elements = customPage.getElements(); for (AutoConnectElement & elm : elements) { if (elm.typeOf() == AC_Text) { AutoConnectText & text = reinterpret_cast < AutoConnectText &> (elm); text.style = \"color:gray;\" ; } } The enumerators for ACElement_t are as follows: AutoConnectButton: AC_Button AutoConnectCheckbox: AC_Checkbox AutoConnectElement: AC_Element AutoConnectInput: AC_Input AutoConnectRadio: AC_Radio AutoConnectSelect: AC_Select AutoConnectSubmit: AC_Submit AutoConnectText: AC_Text Uninitialized element: AC_Unknown Furthermore, to convert an entity that is not an AutoConnectElement to its native type, you must re-interpret that type with c++.","title":" type"},{"location":"acelements.html#autoconnectbutton","text":"AutoConnectButton generates an HTML < button type = \"button\" > tag and locates a clickable button to a custom Web page. Currently AutoConnectButton corresponds only to name, value, an onclick attribute of HTML button tag. An onclick attribute is generated from an action member variable of the AutoConnectButton, which is mostly used with a JavaScript to activate a script. Sample AutoConnectButton button(\"button\", \"OK\", \"myFunction()\"); On the page:","title":"AutoConnectButton"},{"location":"acelements.html#constructor_1","text":"AutoConnectButton( const char * name, const char * value, const String & action)","title":" Constructor"},{"location":"acelements.html#name_1","text":"It is the name of the AutoConnectButton element and matches the name attribute of the button tag. It also becomes the parameter name of the query string when submitted.","title":" name"},{"location":"acelements.html#value_1","text":"It becomes a value of the value attribute of an HTML button tag.","title":" value"},{"location":"acelements.html#action","text":"action is String data type and is an onclick attribute fire on a mouse click on the element. It is mostly used with a JavaScript to activate a script. 1 For example, the following code defines a custom Web page that copies a content of Text1 to Text2 by clicking Button . const char * scCopyText = R\"( <script> function CopyText() { document.getElementById(\"Text2\").value = document.getElementById(\"Text1\").value; } </script> )\" ; ACInput(Text1, \"Text1\" ); ACInput(Text2, \"Text2\" ); ACButton(Button, \"COPY\" , \"CopyText()\" ); ACElement(TextCopy, scCopyText);","title":" action"},{"location":"acelements.html#autoconnectcheckbox","text":"AutoConnectCheckbox generates an HTML < input type = \"checkbox\" > tag and a < label > tag. It places horizontally on a custom Web page by default. Sample AutoConnectCheckbox checkbox(\"checkbox\", \"uniqueapid\", \"Use APID unique\", false); On the page:","title":"AutoConnectCheckbox"},{"location":"acelements.html#constructor_2","text":"AutoConnectCheckbox( const char * name, const char * value, const char * label, const bool checked)","title":" Constructor"},{"location":"acelements.html#name_2","text":"It is the name of the AutoConnectCheckbox element and matches the name attribute of the input tag. It also becomes the parameter name of the query string when submitted.","title":" name"},{"location":"acelements.html#value_2","text":"It becomes a value of the value attribute of an HTML < input type = \"checkbox\" > tag.","title":" value"},{"location":"acelements.html#label","text":"A label is an optional string. A label is always arranged on the right side of the checkbox. Specification of a label will generate an HTML <label> tag with an id attribute. The checkbox and the label are connected by the id attribute. Only will be displayed if a label is not specified.","title":" label"},{"location":"acelements.html#checked","text":"A checked is a Boolean value and indicates the checked status of the checkbox. The value of the checked checkbox element is packed in the query string and sent.","title":" checked"},{"location":"acelements.html#autoconnectinput","text":"AutoConnectInput generates an HTML < input type = \"text\" > tag and a < label > tag. It can also have a placeholder. The value of the input box is passed to the destination in the query string and can be retrieved programmatically. You can also update from the sketches. Sample AutoConnectInput input(\"input\", \"\", \"Server\", \"MQTT broker server\"); On the page:","title":"AutoConnectInput"},{"location":"acelements.html#constructor_3","text":"AutoConnectInput( const char * name, const char * value, const char * label, const char * pattern, const char * placeholder)","title":" Constructor"},{"location":"acelements.html#name_3","text":"It is the name of the AutoConnectInput element and matches the name attribute, the id attribute of the input tag. It also becomes the parameter name of the query string when submitted.","title":" name"},{"location":"acelements.html#value_3","text":"It becomes a string value of the value attribute of an HTML < input type = \"text\" > tag. The text entered from the custom Web page will be grouped in the query string of the form submission and the string set before accessing the page will be displayed as the initial value.","title":" value"},{"location":"acelements.html#label_1","text":"A label is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML < label > tag with an id attribute. The input box and the label are connected by the id attribute.","title":" label"},{"location":"acelements.html#pattern","text":"A pattern specifies a regular expression that the AutoConnectInput element's value is checked against on form submission. If it is invalid, the background color will change, but it will be sent even if the data format does not match. The password that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter: (?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,} Email address as characters@characters.domain : [a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$ IP address Host name of the internet Date (MM-DD-YYYY) Twitter account: ^@?(\\w){1,15}$","title":" pattern"},{"location":"acelements.html#placeholder","text":"A placeholder is an option string. Specification of a placeholder will generate a placeholder attribute for the input tag.","title":" placeholder"},{"location":"acelements.html#autoconnectradio","text":"AutoConnectRadio generates few HTML < input type = \"radio\" > tags as grouped and the same number of < label > tags. AutoConnectRadio can keep the value of a radio button as a collection. The grouped values will be placed in the custom Web page to select only one exclusively. Sample AutoConnectRadio radio(\"radio\", { \"30 sec.\", \"60 sec.\", \"180 sec.\" }, \"Update period\", AC_Vertical, 1); On the page:","title":"AutoConnectRadio"},{"location":"acelements.html#constructor_4","text":"AutoConnectRadio( const char * name, std :: vector < String > const & values, const char * label, const ACArrange_t order, const uint8_t checked)","title":" Constructor"},{"location":"acelements.html#name_4","text":"It is the name of the AutoConnectRadio element and matches the name attribute of the input tags. It also becomes the parameter name of the query string when submitted.","title":" name"},{"location":"acelements.html#values","text":"A values is an array of String type for the radio button options which as actually std::vector . It is an initialization list can be used. The input tags will be generated from each entry in the values, the amount of which is the same as the number of items in values .","title":" values"},{"location":"acelements.html#label_2","text":"A label is an optional string. A label will be arranged in the left or top of the radio buttons according to the order . Specification of a label will generate an HTML < label > tag with an id attribute. The radio buttons and the label are connected by the id attribute.","title":" label"},{"location":"acelements.html#order","text":"A order specifies the direction to arrange the radio buttons. It is a value of type ACArrange_t and accepts one of the following: AC_Horizontal : Horizontal arrangement. AC_Vertical : Vertical arrangement. A label will place in the left or the top according to the order .","title":" order"},{"location":"acelements.html#checked_1","text":"A checked specifies the index number (1-based) of the values to be checked. If this parameter is not specified neither item is checked.","title":" checked"},{"location":"acelements.html#autoconnectselect","text":"AutoConnectSelect generates an HTML < select > tag (drop-down list) and few < option > tags. Sample AutoConnectSelect select(\"select\", { String(\"Europe/London\"), String(\"Europe/Berlin\"), String(\"Europe/Helsinki\"), String(\"Europe/Moscow\"), String(\"Asia/Dubai\") }, \"Select TZ name\"); On the page:","title":"AutoConnectSelect"},{"location":"acelements.html#constructor_5","text":"AutoConnectSelect( const char * name, std :: vector < String > const & options, const char * label)","title":" Constructor"},{"location":"acelements.html#name_5","text":"It is the name of the AutoConnectSelect element and matches the name attribute of the select tags.","title":" name"},{"location":"acelements.html#options","text":"An options is an array of String type for the options which as actually std::vector for an HTML < option > tag. It is an initialization list can be used. The option tags will be generated from each entry in the options, the amount of which is the same as the number of items in an options .","title":" options"},{"location":"acelements.html#label_3","text":"A label is an optional string. A label is always arranged on the left side of the drop-down list. Specification of a label will generate an HTML < label > tag with an id attribute. The select tag and the label are connected by the id attribute.","title":" label"},{"location":"acelements.html#autoconnectsubmit","text":"AutoConnectSubmit generates an HTML < input type = \"button\" > tag attached onclick attribute. The native code of the onclick attribute is the submission of the form with the POST method. Sample AutoConnectSubmit submit(\"submit\", \"Save\", \"/mqtt_save\"); On the page:","title":"AutoConnectSubmit"},{"location":"acelements.html#constructor_6","text":"AutoConnectSubmit( const char * name, const char * value, const char * uri)","title":" Constructor"},{"location":"acelements.html#name_6","text":"It is the name of the AutoConnectSubmit element and matches the name attribute of the input tag.","title":" name"},{"location":"acelements.html#value_4","text":"It becomes a string of the value attribute of an HTML < input type = \"button\" > tag. The value will be displayed as a label of the button.","title":" value"},{"location":"acelements.html#uri","text":"A uri specifies the URI to send form data when the button declared by AutoConnectSubmit is clicked. The query string of the form data sent with AutoConnectSubmit contains the URI of the page. Its parameter name is _acuri . In Sketch, you can know the called URI by referring to the _acuri parameter with the destination page handler. The actual query string is as follows: _acuri= CALLER_URI","title":" uri"},{"location":"acelements.html#autoconnecttext","text":"AutoConnectText generates an HTML < div > tag. A style attribute will be attached if a style parameter is passed. Sample AutoConnectText text(\"text\", \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\", \"font-family:serif;color:#4682b4;\"); On the page:","title":"AutoConnectText"},{"location":"acelements.html#constructor_7","text":"AutoConnectText( const char * name, const char * value, const char * style)","title":" Constructor"},{"location":"acelements.html#name_7","text":"A name does not exist in the generated HTML. It provides only a means of accessing elements with the sketches.","title":" name"},{"location":"acelements.html#value_5","text":"It becomes content and also can contain the native HTML code, but remember that your written code is enclosed by the div tag.","title":" value"},{"location":"acelements.html#style","text":"A style specifies the qualification style to give to the content and can use the style attribute format as it is.","title":" style"},{"location":"acelements.html#how-to-coding-for-the-elements","text":"","title":"How to coding for the elements"},{"location":"acelements.html#declaration-for-the-elements-in-sketches","text":"Variables of each AutoConnetElement can be declared with macros. By using the macros, you can treat element name that is String type as variable in sketches. 2 ACElement ( name [ , value ] ) ACButton ( name [ , value ] [ , action ] ) ACCheckbox ( name [ , value ] [ , label ] [ , true | false ] ) ACInput ( name [ , value ] [ , label ] [ , placeholder ] ) ACRadio ( name [ , values ] [ , label ] [ , AC_Horizontal | AC_Vertical ] [ , checked ] ) ACSelect ( name [ , options ] [ , label ] ) ACSubmit ( name [ , value ] [ , uri ] ) ACText ( name [ , value ] [ , style ] ) Declaration macro usage For example, AutoConnectText can be declared using macros. AutoConnectText caption( \"caption\" , \"hello, world\" , \"color:blue;\" ) equals by using ACText macro. ACText(caption, \"hello, world\" , \"color:blue;\" )","title":" Declaration for the elements in Sketches"},{"location":"acelements.html#variant-for-autoconnectelements","text":"Some AutoConnectAux APIs specify AutoConnectElements as an argument. There are also functions that return a pointer to AutoConnectElements. AutoConnectElement behaves as a variant type of each element class to make these interfaces a single. Use reinterpret_cast to cast from a variant pointer to an Actual type pointer of AutoConnectElements. AutoConnectAux aux; ACText(Text1, \"hello, world\" ); aux.add(Text1); AutoConnectText * text_p = reinterpret_cast < AutoConnectText > (aux.getElement( \"Text1\" )); AutoConnectText & text = aux.getElement < AutoConnectText > ( \"Text1\" ); JavaScript can be inserted into a custom Web page using AutoConnectElement. \u21a9 The square brackets in the syntax are optional parameters, the stroke is a selection parameter, the bold fonts are literal. \u21a9","title":" Variant for AutoConnectElements"},{"location":"achandling.html","text":"Handing AutoConnectElements with the sketches \u00b6 AutoConnectElements (i.e. they are the elements displayed on the custom Web page) must be contained in AutoConnectAux object. AutoConnectElements declared in sketch must be programmed to add to AutoConnectAux one after another. Elements are automatically included in AutoConnectAux by AutoConnect if you load it from the JSON description. In either method, it is common to use the function of AutoConnectAux to access an element with a sketch. The AutoConnectAux class has several functions to manipulate AutoConnectElements. The functions can add, delete, retrieve elements, and get and set values. Add AutoConnectElements to the AutoConnectAux object \u00b6 To add AutoConnectElment(s) to an AutoConnectAux object, use the add function. void AutoConnectAux :: add(AutoConenctElement & addon) void AutoConnectAux :: add(AutoConenctElementVT addons) The add function adds specified AutoConnectElement to the AutoConnectAux. If specified the collection of AutoConnectElements as a std::vector of the references to each element, these elements added in bulk. The AutoConnectElements contained in the AutoConnectAux object are uniquely identified by the name. When adding an AutoConnectElement, if an element with the same name already exists in the AutoConnectAux, checking the type, and if it is the same, the value will be replaced. If another type of AutoConnectElement exists with the same name, that add operation will be invalid. 1 In the following example, an AutoConnectButton as button addition is invalid. AutoConnectAux aux; AutoConnectText text ( \"hello\" , \"hello, world\" ); AutoConnectButton button ( \"hello\" , \"hello, world\" , \"alert('Hello world!')\") ; // This is invalid. aux.add({ text, button }); Similarly this, the uniqueness of the name is also necessary within the JSON document { \"name\" : \"aux\" , \"uri\" : \"/aux\" , \"menu\" : true , \"element\" : [ { \"name\" : \"hello\" , \"type\" : \"ACText\" , \"value\" : \"hello, world\" }, { \"name\" : \"hello\" , \"type\" : \"ACButton\" , \"value\" : \"hello, world\" , \"action\" : \"alert('Hello world!')\" } ] } Load all elements from JSON document If you load all AutoConnectElements from JSON document into AutoConnect, you do not need to sketch the population process of the AutoConnectElements. It is managed by the AutoConnect library automatically. Get AutoConnectElement from the AutoConnectAux \u00b6 To retrieve an element from AutoConnectAux, use the getElement or getElements function. Normally, the getElement is needed when accessing the value of AutoConnectElement in the sketch. AutoConnectElement * AutoConnectAux :: getElement( const String & name); template < typename T > T & AutoConnectAux :: getElement( const String & name); AutoConnectElementVT * AutoConnectAux :: getElements( void ); The getElement function returns an AutoConnectElement with the specified name as a key. When you use this function, you need to know the type of AutoConnectElement in advance. To retrieve an AutoConnectElement by specifying its type, use the following method. AutoConnectAux aux; aux.load( \"SOME_JSON_DOCUMENT\" ); // Retrieve the pointer of the AutoConnectText AutoConnectText * text = reinterpret_cast < AutoConnectText *> (aux.getElement( \"TEXT_ELEMENT_NAME\" )); // Retrieve the reference of the AutoConnectText AutoConnectText & text = aux.getElement < AutoConnectText > ( \"TEXT_ELEMENT_NAME\" ); The AutoConnectElement type behaves as a variant of other element types. Therefore use cast or template to convert to actual type as above. In the sketch, you access the real type of AutoConnectElement after casting it and storing into the variable. const String auxJson = String( \"{ \\\" title \\\" : \\\" Page 1 title \\\" , \\\" uri \\\" : \\\" /page1 \\\" , \\\" menu \\\" :true, \\\" element \\\" :[{ \\\" name \\\" : \\\" caption \\\" , \\\" type \\\" : \\\" ACText \\\" , \\\" value \\\" : \\\" hello, world \\\" }]}\" ); AutoConenct portal; portal.load(auxJson); AutoConnectAux * aux = portal.aux( \"/page1\" ); // Identify the AutoConnectAux instance with uri AutoConenctText & text = aux -> getElement < AutoConnectText > ( \"caption\" ); // Cast to real type and access members Serial.println(text.value); To get all the AutoConnectElements of an AutoConnectAux object use the getElements function. This function returns the vector of the reference wrapper as AutoConnectElementVT to all AutoConnectElements registered in the AutoConnectAux. AutoConnectElementVT & getElements( void ) AutoConnectElementVT is a predefined type for it and can use methods of std::vector < std::reference_wrapper >. Loading & saving AutoConnectElements with JSON \u00b6 AutoConnect supports reading the custom Web page definitions written in JSON and also supports loading and saving of AutoConnectElements. In both cases, the target object is a JSON document for AutoConnect . However, it can not save all AutoConnectElements contained in the page as a custom Web page. (ie. AutoConnectAux) Loading AutoConnectAux & AutoConnectElements with JSON \u00b6 To load a JSON document as AutoConnectAux use the AutoConnect::load function and load the JSON document of each AutoConnectElement using the AutoConnectAux::loadElement function. Although the functions of both are similar, the structure of the target JSON document is different. The AutoConnect::load function loads the entire AutoConnectAux and creates both the AutoConnectAux instance and each AutoConnectElement instance. A single JSON document can contain multiple custom Web pages. If you write JSON of AutoConnectAux as an array, the load function generates all the pages contained in that array. Therefore, it is necessary to supply the JSON document of AutoConnectAux as an input of the load function and must contain the elements described here . The AutoConnectAux::loadElement function loads the elements individually into an AutoConnectAux object. The structure of its supplying JSON document is not AutoConnectAux. It must be a JSON structure for AutoConnectElement , but you can specify an array. // AutoConnectAux as a custom Web page. const char page[] PROGMEM = R\"raw( { \"title\": \"Settings\", \"uri\": \"/settings\", \"menu\": true, \"element\": [ { \"name\": \"server\", \"type\": \"ACInput\", \"label\": \"Server\" }, { \"name\": \"set\", \"type\": \"ACSubmit\", \"value\": \"SET\", \"uri\" : \"/set\" } ] } )raw\" ; // Additional AutoConnectElements. const char addons[] PROGMEM = R\"raw( [ { \"name\": \"notes\", \"type\": \"ACText\", \"value\": \"An update period as the below optionally.\" }, { \"name\": \"period\", \"type\": \"ACRadio\", \"value\": [ \"30 sec.\", \"60 sec.\", \"180 sec.\" ], \"arrange\": \"vertical\", \"checked\": 1 } ] )raw\" ; AutoConnect portal; AutoConnectAux * auxPage; // Load a custom Web page. portal.load(page); // Get a '/settings' page auxPage = portal.aux( \"/settings\" ); // Also, load only AutoConnectRadio named the period. auxPage -> loadElement(addons, \"period\" ); // Retrieve a server name from an AutoConnectText value. AutoConnectText & serverName = auxPage -> getElement < AutoConnectText > ( \"server\" ); Serial.println(serverName.value); Saving AutoConnectElements with JSON \u00b6 To save the AutoConnectElement as a JSON document, use the AutoConnectAux::saveElement function. It serializes the contents of the object based on the type of the AutoConnectElement. You can persist a serialized AutoConnectElements as a JSON document to a stream. // Open a parameter file on the SPIFFS. SPIFFS.begin(); FILE param = SPIFFS.open( \"/param\" , \"w\" ); // Save elements as the parameters. auxPage -> saveElement(param, { \"server\" , \"period\" }); // Close a parameter file. param.close(); SPIFFS.end(); The example above saves server and period elements from the AutoConnectAux object as mentioned above to the /param file on SPIFFS. Its JSON document of AutoConnectElements saved by its code looks like this: [ { \"name\" : \"server\" , \"type\" : \"ACInput\" , \"value\" : \"An inputted server name\" , \"label\" : \"Server\" , \"placeholder\" : \"\" }, { \"name\" : \"period\" , \"type\" : \"ACRadio\" , \"value\" : [ \"30 sec.\" , \"60 sec.\" , \"180 sec.\" ], \"arrange\" : \"vertical\" , \"checked\" : 2 } ] Custom field data handling \u00b6 A sketch can access variables of AutoConnectElements in the custom Web page. The value entered into the AutoConnectElements on the page is stored in the member variable of each element by AutoConnect whenever GET/POST transmission occurs. The following diagram shows the flow of the input values of a custom Web page into a sketch and is the basis for actions to manipulate the values of custom Web pages using sketches. Where to pick up the values \u00b6 A sketch composed of handlers can receive the value of AutoConnectElements entered in a custom Web page after sending, but that handler is different from the page where the value was entered. It is necessary to be aware that can accept the entered values by the next page handler after the transition. Usually, two ways to retrieve entered values we have. One is to use the ESP8266WebServer::arg (or WebServer::arg for ESP32) function in the on handler attached by ESP8266WebServer (WebServer w/ESP32 also). #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char addonJson[] PROGMEM = R\"raw( { \"title\": \"Hello\", \"uri\": \"/hello\", \"menu\": true, \"element\": [ { \"name\": \"feels\", \"type\": \"ACInput\", \"label\": \"What's up?\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"Just it!\", \"uri\": \"/feels\" } ] } )raw\" ; ESP8266WebServer webServer; AutoConnect portal (webServer); // Here, /feels handler void feelsOn () { // Retrieve the value of a input-box named \"feels\" String feel = webServer.arg( \"feels\" ); // Echo back the value String echo = \"<html><p style= \\\" color:blue;font-family:verdana;font-size:300%; \\\" >\" + feel + String( \" and a bold world!</p></html>\" ); webServer.send( 200 , \"text/html\" , echo); } void setup () { delay( 1000 ); webServer.on( \"/feels\" , feelsOn); // Register /feels handler portal.load(addonJson); // Load a custom Web page portal.begin(); } void loop () { portal.handleClient(); } An above example is the most simple sketch of handling values entered into a custom Web page. This sketch obtains the string entered in the AutoConnectInput named feels with the /feels handler after page transition, and the AutoConnectInput is an <input type=\"text\" name=\"feels\"> element wrapped in the form as the actual HTML code. Should be accessed /_ac first When you actually try the above sketch, there is no a root handler. So the URL that should be accessed first is /_ac concatenated with the local IP address of the esp8266 module. Another method is effective when custom Web pages have complicated page transitions. It is a way to straight access the AutoConnectElements member value. You can get the AutoConnectElement with the specified name using the getElement function. The following sketch executes the above example with AutoConnect only, without using the function of ESP8266WebServer. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> const static char addonJson[] PROGMEM = R\"raw( [ { \"title\": \"Hello\", \"uri\": \"/hello\", \"menu\": true, \"element\": [ { \"name\": \"feels\", \"type\": \"ACInput\", \"label\": \"What's up?\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"Just it!\", \"uri\": \"/feels\" } ] }, { \"title\": \"Hello\", \"uri\": \"/feels\", \"menu\": false, \"element\": [ { \"name\": \"echo\", \"type\": \"ACText\", \"style\": \"color:blue;font-family:verdana;font-size:300%;\" } ] } ] )raw\" ; AutoConnect portal; // Here, /feels handler String feelsOn (AutoConnectAux & aux, PageArgument & args) { // Get the AutoConnectInput named \"feels\". // The where() function returns the AutoConnectAux of the page that triggered this handler. AutoConnectInput & feels = portal.where() -> getElement < AutoConnectInput > ( \"feels\" ); // Get the AutoConnectText named \"echo\". AutoConnectText & echo = aux.getElement < AutoConnectText > ( \"echo\" ); // Echo back from input-box to /feels page. echo.value = feels.value + String( \" and a bold world!\" ); return String( \"\" ); } void setup () { delay( 1000 ); portal.load(addonJson); // Load custom Web pages portal.on( \"/feels\" , feelsOn, AC_EXIT_AHEAD); // Register /feels handler portal.begin(); } void loop () { portal.handleClient(); } The above example handles in the handler for the values of a custom Web page. An AutoConnect::on function registers a handler for the AutoConnectAux page of the specified uri. The argument of the custom Web page handler is an AutoConnectAux of the page itself and the PageArgument object. To retrieve the values entered in a custom Web page you need to access the AutoConnectElement of the page that caused the request to this page and to do this, you use the AutoConnect::where function. The AutoConnect::where function returns a pointer to the AutoConnectAux object of the custom Web page that caused the HTTP request. The where() function is available for only AutoConnectAux. The AutoConnect::where function is available only for the AutoConnectAux object. It is invalid for HTTP requests from individual pages registered with the on handler of ESP8266WebServer/ESP32. In other words, the AutoConnect::where function only returns the last AutoConnecAux page called. When setting the initial values \u00b6 An AutoConnectAux page is dynamically created by AutoConnect when its uri is requested. The initial value of AutoConnectElements can be set before its page request. It is also possible during loop() . To set the initial value when the page is accessed it needs by the handler of its page. The AutoConnect::on and AutoConnectAux::on functions register a handler for a custom Web page and also specify when to call that handler. The behavior of the two on functions is the same, only the class and arguments are different. bool AutoConnect :: on( const String & uri, const AuxHandlerFunctionT handler, AutoConnectExitOrder_t order) void AutoConnectAux :: on( const AuxHandlerFunctionT handler, const AutoConnectExitOrder_t order) Parameter uri specifies an URI of the custom Web page, but an AutoConnectAux object with its URI must be registered with AutoConnect via the AutoConnect::join function beforehand. AutoConnect::on/AutoConnectAux::on is not ESP8266WebServer::on The on function for AutoConnect is different from the on function of Arduino core ESP8266WebServer (WebServer for ESP32). You can share the same handler via wrapper, but access to AutoConnectElements is valid only for handlers registered with on function for AutoConnect . AuxHandlerFunctionT type is a handler declaration using with std::function . String handler(AutoConnectAux & aux, PageArgument & args) The handler of the custom Web page has two arguments by a reference of AutoConnectAux and a reference of PageArgument, it returns String. AutoConnect appends the string returned from the handler to the generated HTML. This allows you to add an HTML part before displaying the page. AutoConnectExitOrder_t specifies when the handler is called with the following enumeration value. AC_EXIT_AHEAD : Called before AutoConnect generates the HTML of the page. You set the value of AutoConnectElements in the handler then its value will be displayed on the page. AC_EXIT_LATER : Called after AutoConnect generates the HTML of the page. You can append to HTML generated by AutoConnect. AC_EXIT_BOTH : Called even before generating HTML and after generated. The following example is a part of sketch contained the handlers. // AutoConnect object declarations ACInput(input1); AutoConnectAux aux ( \"/aux\" , { input1 }); AutoConnect portal; // Pre-declare handlers String initialize (AutoConnectAux & , PageArgument & ); String append (AutoConnectAux & , PageArgument & ); // Register handlers and launch the portal. aux.on(initialize, AC_AHEAD); aux.on(append, AC_LATER); portal.join(aux); portal.begin(); // Some code here... // The handler called before HTML generating String initialize (AutoConnectAux & aux, PageArgument & args) { AutoConnectInput & input1 = aux.getElement < AutoConnectInput > ( \"input1\" ); // Set initial value for the input box in a custom Web page. input1.value = \"Initial value\" ; // Nothing appendix for a generated HTML. return String(); } // The handler called after HTML generated String append (AutoConnectAux & aux, PageArgument & args) { // Append an HTML return String( \"<p>This text has been added.</p>\" ); } How you can reach the values \u00b6 AutoConnectSubmit uses the POST method to send HTTP requests. A value of AutoConnectInput sent to the ESP8266 or ESP32 with POST is stored in the request body of the HTTP request: POST /feels HTTP/1.1 Host: ESP8266_IP_ADDRESS name1=value1&name2=value2&name3=value3 ESP8266WebServer class will parse the query string and rebuilds its arguments when the above request arrives. A custom page handler registered with the ESP8266WebServer::on function can access the value of AutoConnectElements with ESP8266WebServe::arg function. It reaches the values of AutoConnectElements without the intermediation of AutoConnect. Therefore, its handler will not be AutoConnectAux and can send a response to the client directly. The following example is part of a server sketch which has two web pages. The /hello page is a custom Web page of AutoConnectAux which has an input box named \"input1\". Another /echo page is a page handler for ESP8266WebServer, which uses the ESP8266WebServer::send function to echo back the value of an input1 as an http response. ESP8266WebServer server; AutoConnect portal (server); ACInput(input1, \"\" , \"INPUT\" ); ACSubmit(send, \"HELLO\" , \"/echo\" ); AutoConnectAux aux ( \"/hello\" , { input1, send }); server.on( \"/echo\" , []() { String echo = server.arg( \"input1\" ); Serial.println(echo); server.send( 200 , \"text/plain\" , echo); }); portal.join(aux); portal.begin(); Also, you can choose another way to access arguments without going through the ESP8266WebServer class. The PageArgument object of the custom Web page handler argument is a copy of the arg object of the ESP8266WebServer class. Either of these methods is a simple and easy way to access parameters in custom Web page handlers. However, if you need to access from outside of the handler to the value of AutoConnectElements, you need to accomplish it using with the AutoConnectAux::getElement function. The following sketch code replaces the above example with JSON and PageArgument, and its behaves is equivalent basically to the above sketch. const static char auxPage[] PROGMEM = R \"raw ( [ { \"title\" : \"Hello\" , \"uri\" : \"/hello\" , \"menu\" : true, \"element\" : [ { \"name\" : \"input1\" , \"type\" : \"ACInput\" , \"label\" : \"INPUT\" }, { \"name\" : \"send\" , \"type\" : \"ACSubmit\" , \"value\" : \"HELLO\" , \"uri\" : \"/echo\" }] }, { \"title\" : \"Echo\" , \"uri\" : \"/echo\" , \"menu\" : false, \"element\" : [ { \"name\" : \"echo\" , \"type\" : \"ACText\" }] } ] )raw \"; AutoConnect portal; portal.load(auxPage); portal.on( \"/echo\" , [](AutoConnectAux & aux, PageArgument & args) { AutoConnectText & ac_echo = aux.getElement < AutoConnectText > ( \"echo\" ); ac_echo.value = args.arg( \"input1\" ); return String (); }); portal.begin(); Overwrite the AutoConnectElements \u00b6 Sketches can update the attributes of AutoConnectElements with two approaches. A one is to assign directly to the attributes of a member variable of its element. The other is to overwrite them with loading the element by AutoConnectAux::loadElement . The elements for attributes described in the JSON document for AutoConnectElements overwrites the member variables of the target AutoConnectElements. However, AutoConnectAux::loadElement keeps the member variables unchanged if there is no element in the JSON document. This overwriting behavior is the same for the AutoConnect::load function. For example, the combination of the sketch and JSON document as follows updates only the style while keeping Captiopn (ie. \"Hello, world\") as AutoConnectText value. The sketch (part of code) ACText(Caption, \"Hello, world\" ); AutoConnectAux helloPage ( \"/hello\" , \"Hello\" , true, { Caption }); AutoConnect portal; String onHello (AutoConnectAux & aux, PageArgument & args) { aux.loadElement(JSON); return String(); } void setup () { helloPage.on(onHello); portal.join(helloPage); portal.begin(); } void loop () { portal.handleClient(); } External JSON document for the above sketch to modify the text style { \"name\" : \"Caption\" , \"type\" : \"ACText\" , \"style\" : \"text-align:center;font-family:'Avenir','Corbel','Osaka';color:Green;\" } Check data against on submission \u00b6 By giving a pattern to AutoConnectInput , you can find errors in data styles while typing in custom Web pages. The pattern is specified by regular expression . 2 If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. The following example shows the behavior when checking the IP address in the AutoConnectInput field. { \"title\" : \"Page-1\" , \"uri\" : \"/page1\" , \"menu\" : true , \"element\" : [ { \"name\" : \"Server\" , \"type\" : \"ACInput\" , \"label\" : \"Server address\" , \"pattern\" : \"^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$\" } ] } Convert data to actually type \u00b6 Transitions of the custom Web pages \u00b6 Scope & Lifetime of AutoConnectAux \u00b6 The lifetime of AutoConnectAux and AutoConnectElements must remain in the period when the custom Web page can be manipulated. The implementation of the custom Web page inherits from requestHandler driven from ESP8266WebServer (WebServer for ESP32), so the instance of AutoConnectAux and AutoConnectElements must exist for the duration of effect of handleClient. The following example is incorrect for manipulating custom Web pages. Its AutoConnectAux instance will be destructed at the exit of the setup(). #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const auxPage[] PROGMEM = R\"raw( { \"title\": \"Page-1\", \"uri\": \"/page1\", \"menu\": true, \"element\": [ { \"name\":\"Server\", \"type\":\"ACText\", \"label\":\"Server address\" } ] } )raw\" ; AutoConnect portal; void setup () { // This declaration is wrong. AutoConnectAux aux; aux.load(auxPage); portal.join(aux); portal.begin(); } void loop () { portal.handleClient(); } The URI of the custom Web pages \u00b6 The transition of the custom Web page follows the URI of the page, but the ESP8266WebServer class does not know the URI of an AutoConnectAux page. (Registering a custom Web page does not use the ESP8266WebServer::on / WebServer::on function.) Therefore ESP8266WebServer class does not detect its URI access. If you want to detect an http request to AutoConnectAux's custom Web page, you need to register its URI with the AutoConnectAux::on function. In addition to this, there are restrictions in the handler for the custom Web page as shown in the following section. Restrictions \u00b6 The custom Web pages handler has the following restrictions. Do not send HTTP responses from the handler. If the handler returns its own response, the custom Web page will be lost. Use AutoConnectSubmit whenever possible. AutoConnect will hold the values of a custom Web Page is sent by AutoConnectSubmit. Can not handle the custom Web pages during a connection is not established yet. During the connection attempt, the web browser of the client will send a probe for a captive portal. Its request will cause unintended custom Web page transitions. Can not place URI of the custom Web pages to AUTOCONNECT_URI]. AutoConnect will not work if you place a custom Web page to AUTOCONNECT_URI . 302 Redirect Alternatives To transition from a custom Web page to a sketch owned page, execute the link function of JavaScript with the AutoConnectElement element. window.onload = function() { Gifffer(); }; The valid scope of the name is within an AutoConnectAux. \u21a9 The pattern of AutoConnectInput conforms to javascript specification. \u21a9","title":"Handling the custom Web pages"},{"location":"achandling.html#handing-autoconnectelements-with-the-sketches","text":"AutoConnectElements (i.e. they are the elements displayed on the custom Web page) must be contained in AutoConnectAux object. AutoConnectElements declared in sketch must be programmed to add to AutoConnectAux one after another. Elements are automatically included in AutoConnectAux by AutoConnect if you load it from the JSON description. In either method, it is common to use the function of AutoConnectAux to access an element with a sketch. The AutoConnectAux class has several functions to manipulate AutoConnectElements. The functions can add, delete, retrieve elements, and get and set values.","title":"Handing AutoConnectElements with the sketches"},{"location":"achandling.html#add-autoconnectelements-to-the-autoconnectaux-object","text":"To add AutoConnectElment(s) to an AutoConnectAux object, use the add function. void AutoConnectAux :: add(AutoConenctElement & addon) void AutoConnectAux :: add(AutoConenctElementVT addons) The add function adds specified AutoConnectElement to the AutoConnectAux. If specified the collection of AutoConnectElements as a std::vector of the references to each element, these elements added in bulk. The AutoConnectElements contained in the AutoConnectAux object are uniquely identified by the name. When adding an AutoConnectElement, if an element with the same name already exists in the AutoConnectAux, checking the type, and if it is the same, the value will be replaced. If another type of AutoConnectElement exists with the same name, that add operation will be invalid. 1 In the following example, an AutoConnectButton as button addition is invalid. AutoConnectAux aux; AutoConnectText text ( \"hello\" , \"hello, world\" ); AutoConnectButton button ( \"hello\" , \"hello, world\" , \"alert('Hello world!')\") ; // This is invalid. aux.add({ text, button }); Similarly this, the uniqueness of the name is also necessary within the JSON document { \"name\" : \"aux\" , \"uri\" : \"/aux\" , \"menu\" : true , \"element\" : [ { \"name\" : \"hello\" , \"type\" : \"ACText\" , \"value\" : \"hello, world\" }, { \"name\" : \"hello\" , \"type\" : \"ACButton\" , \"value\" : \"hello, world\" , \"action\" : \"alert('Hello world!')\" } ] } Load all elements from JSON document If you load all AutoConnectElements from JSON document into AutoConnect, you do not need to sketch the population process of the AutoConnectElements. It is managed by the AutoConnect library automatically.","title":" Add AutoConnectElements to the AutoConnectAux object"},{"location":"achandling.html#get-autoconnectelement-from-the-autoconnectaux","text":"To retrieve an element from AutoConnectAux, use the getElement or getElements function. Normally, the getElement is needed when accessing the value of AutoConnectElement in the sketch. AutoConnectElement * AutoConnectAux :: getElement( const String & name); template < typename T > T & AutoConnectAux :: getElement( const String & name); AutoConnectElementVT * AutoConnectAux :: getElements( void ); The getElement function returns an AutoConnectElement with the specified name as a key. When you use this function, you need to know the type of AutoConnectElement in advance. To retrieve an AutoConnectElement by specifying its type, use the following method. AutoConnectAux aux; aux.load( \"SOME_JSON_DOCUMENT\" ); // Retrieve the pointer of the AutoConnectText AutoConnectText * text = reinterpret_cast < AutoConnectText *> (aux.getElement( \"TEXT_ELEMENT_NAME\" )); // Retrieve the reference of the AutoConnectText AutoConnectText & text = aux.getElement < AutoConnectText > ( \"TEXT_ELEMENT_NAME\" ); The AutoConnectElement type behaves as a variant of other element types. Therefore use cast or template to convert to actual type as above. In the sketch, you access the real type of AutoConnectElement after casting it and storing into the variable. const String auxJson = String( \"{ \\\" title \\\" : \\\" Page 1 title \\\" , \\\" uri \\\" : \\\" /page1 \\\" , \\\" menu \\\" :true, \\\" element \\\" :[{ \\\" name \\\" : \\\" caption \\\" , \\\" type \\\" : \\\" ACText \\\" , \\\" value \\\" : \\\" hello, world \\\" }]}\" ); AutoConenct portal; portal.load(auxJson); AutoConnectAux * aux = portal.aux( \"/page1\" ); // Identify the AutoConnectAux instance with uri AutoConenctText & text = aux -> getElement < AutoConnectText > ( \"caption\" ); // Cast to real type and access members Serial.println(text.value); To get all the AutoConnectElements of an AutoConnectAux object use the getElements function. This function returns the vector of the reference wrapper as AutoConnectElementVT to all AutoConnectElements registered in the AutoConnectAux. AutoConnectElementVT & getElements( void ) AutoConnectElementVT is a predefined type for it and can use methods of std::vector < std::reference_wrapper >.","title":" Get AutoConnectElement from the AutoConnectAux"},{"location":"achandling.html#loading-saving-autoconnectelements-with-json","text":"AutoConnect supports reading the custom Web page definitions written in JSON and also supports loading and saving of AutoConnectElements. In both cases, the target object is a JSON document for AutoConnect . However, it can not save all AutoConnectElements contained in the page as a custom Web page. (ie. AutoConnectAux)","title":"Loading & saving AutoConnectElements with JSON"},{"location":"achandling.html#loading-autoconnectaux-autoconnectelements-with-json","text":"To load a JSON document as AutoConnectAux use the AutoConnect::load function and load the JSON document of each AutoConnectElement using the AutoConnectAux::loadElement function. Although the functions of both are similar, the structure of the target JSON document is different. The AutoConnect::load function loads the entire AutoConnectAux and creates both the AutoConnectAux instance and each AutoConnectElement instance. A single JSON document can contain multiple custom Web pages. If you write JSON of AutoConnectAux as an array, the load function generates all the pages contained in that array. Therefore, it is necessary to supply the JSON document of AutoConnectAux as an input of the load function and must contain the elements described here . The AutoConnectAux::loadElement function loads the elements individually into an AutoConnectAux object. The structure of its supplying JSON document is not AutoConnectAux. It must be a JSON structure for AutoConnectElement , but you can specify an array. // AutoConnectAux as a custom Web page. const char page[] PROGMEM = R\"raw( { \"title\": \"Settings\", \"uri\": \"/settings\", \"menu\": true, \"element\": [ { \"name\": \"server\", \"type\": \"ACInput\", \"label\": \"Server\" }, { \"name\": \"set\", \"type\": \"ACSubmit\", \"value\": \"SET\", \"uri\" : \"/set\" } ] } )raw\" ; // Additional AutoConnectElements. const char addons[] PROGMEM = R\"raw( [ { \"name\": \"notes\", \"type\": \"ACText\", \"value\": \"An update period as the below optionally.\" }, { \"name\": \"period\", \"type\": \"ACRadio\", \"value\": [ \"30 sec.\", \"60 sec.\", \"180 sec.\" ], \"arrange\": \"vertical\", \"checked\": 1 } ] )raw\" ; AutoConnect portal; AutoConnectAux * auxPage; // Load a custom Web page. portal.load(page); // Get a '/settings' page auxPage = portal.aux( \"/settings\" ); // Also, load only AutoConnectRadio named the period. auxPage -> loadElement(addons, \"period\" ); // Retrieve a server name from an AutoConnectText value. AutoConnectText & serverName = auxPage -> getElement < AutoConnectText > ( \"server\" ); Serial.println(serverName.value);","title":" Loading AutoConnectAux & AutoConnectElements with JSON"},{"location":"achandling.html#saving-autoconnectelements-with-json","text":"To save the AutoConnectElement as a JSON document, use the AutoConnectAux::saveElement function. It serializes the contents of the object based on the type of the AutoConnectElement. You can persist a serialized AutoConnectElements as a JSON document to a stream. // Open a parameter file on the SPIFFS. SPIFFS.begin(); FILE param = SPIFFS.open( \"/param\" , \"w\" ); // Save elements as the parameters. auxPage -> saveElement(param, { \"server\" , \"period\" }); // Close a parameter file. param.close(); SPIFFS.end(); The example above saves server and period elements from the AutoConnectAux object as mentioned above to the /param file on SPIFFS. Its JSON document of AutoConnectElements saved by its code looks like this: [ { \"name\" : \"server\" , \"type\" : \"ACInput\" , \"value\" : \"An inputted server name\" , \"label\" : \"Server\" , \"placeholder\" : \"\" }, { \"name\" : \"period\" , \"type\" : \"ACRadio\" , \"value\" : [ \"30 sec.\" , \"60 sec.\" , \"180 sec.\" ], \"arrange\" : \"vertical\" , \"checked\" : 2 } ]","title":" Saving AutoConnectElements with JSON"},{"location":"achandling.html#custom-field-data-handling","text":"A sketch can access variables of AutoConnectElements in the custom Web page. The value entered into the AutoConnectElements on the page is stored in the member variable of each element by AutoConnect whenever GET/POST transmission occurs. The following diagram shows the flow of the input values of a custom Web page into a sketch and is the basis for actions to manipulate the values of custom Web pages using sketches.","title":"Custom field data handling"},{"location":"achandling.html#where-to-pick-up-the-values","text":"A sketch composed of handlers can receive the value of AutoConnectElements entered in a custom Web page after sending, but that handler is different from the page where the value was entered. It is necessary to be aware that can accept the entered values by the next page handler after the transition. Usually, two ways to retrieve entered values we have. One is to use the ESP8266WebServer::arg (or WebServer::arg for ESP32) function in the on handler attached by ESP8266WebServer (WebServer w/ESP32 also). #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char addonJson[] PROGMEM = R\"raw( { \"title\": \"Hello\", \"uri\": \"/hello\", \"menu\": true, \"element\": [ { \"name\": \"feels\", \"type\": \"ACInput\", \"label\": \"What's up?\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"Just it!\", \"uri\": \"/feels\" } ] } )raw\" ; ESP8266WebServer webServer; AutoConnect portal (webServer); // Here, /feels handler void feelsOn () { // Retrieve the value of a input-box named \"feels\" String feel = webServer.arg( \"feels\" ); // Echo back the value String echo = \"<html><p style= \\\" color:blue;font-family:verdana;font-size:300%; \\\" >\" + feel + String( \" and a bold world!</p></html>\" ); webServer.send( 200 , \"text/html\" , echo); } void setup () { delay( 1000 ); webServer.on( \"/feels\" , feelsOn); // Register /feels handler portal.load(addonJson); // Load a custom Web page portal.begin(); } void loop () { portal.handleClient(); } An above example is the most simple sketch of handling values entered into a custom Web page. This sketch obtains the string entered in the AutoConnectInput named feels with the /feels handler after page transition, and the AutoConnectInput is an <input type=\"text\" name=\"feels\"> element wrapped in the form as the actual HTML code. Should be accessed /_ac first When you actually try the above sketch, there is no a root handler. So the URL that should be accessed first is /_ac concatenated with the local IP address of the esp8266 module. Another method is effective when custom Web pages have complicated page transitions. It is a way to straight access the AutoConnectElements member value. You can get the AutoConnectElement with the specified name using the getElement function. The following sketch executes the above example with AutoConnect only, without using the function of ESP8266WebServer. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> const static char addonJson[] PROGMEM = R\"raw( [ { \"title\": \"Hello\", \"uri\": \"/hello\", \"menu\": true, \"element\": [ { \"name\": \"feels\", \"type\": \"ACInput\", \"label\": \"What's up?\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"Just it!\", \"uri\": \"/feels\" } ] }, { \"title\": \"Hello\", \"uri\": \"/feels\", \"menu\": false, \"element\": [ { \"name\": \"echo\", \"type\": \"ACText\", \"style\": \"color:blue;font-family:verdana;font-size:300%;\" } ] } ] )raw\" ; AutoConnect portal; // Here, /feels handler String feelsOn (AutoConnectAux & aux, PageArgument & args) { // Get the AutoConnectInput named \"feels\". // The where() function returns the AutoConnectAux of the page that triggered this handler. AutoConnectInput & feels = portal.where() -> getElement < AutoConnectInput > ( \"feels\" ); // Get the AutoConnectText named \"echo\". AutoConnectText & echo = aux.getElement < AutoConnectText > ( \"echo\" ); // Echo back from input-box to /feels page. echo.value = feels.value + String( \" and a bold world!\" ); return String( \"\" ); } void setup () { delay( 1000 ); portal.load(addonJson); // Load custom Web pages portal.on( \"/feels\" , feelsOn, AC_EXIT_AHEAD); // Register /feels handler portal.begin(); } void loop () { portal.handleClient(); } The above example handles in the handler for the values of a custom Web page. An AutoConnect::on function registers a handler for the AutoConnectAux page of the specified uri. The argument of the custom Web page handler is an AutoConnectAux of the page itself and the PageArgument object. To retrieve the values entered in a custom Web page you need to access the AutoConnectElement of the page that caused the request to this page and to do this, you use the AutoConnect::where function. The AutoConnect::where function returns a pointer to the AutoConnectAux object of the custom Web page that caused the HTTP request. The where() function is available for only AutoConnectAux. The AutoConnect::where function is available only for the AutoConnectAux object. It is invalid for HTTP requests from individual pages registered with the on handler of ESP8266WebServer/ESP32. In other words, the AutoConnect::where function only returns the last AutoConnecAux page called.","title":" Where to pick up the values"},{"location":"achandling.html#when-setting-the-initial-values","text":"An AutoConnectAux page is dynamically created by AutoConnect when its uri is requested. The initial value of AutoConnectElements can be set before its page request. It is also possible during loop() . To set the initial value when the page is accessed it needs by the handler of its page. The AutoConnect::on and AutoConnectAux::on functions register a handler for a custom Web page and also specify when to call that handler. The behavior of the two on functions is the same, only the class and arguments are different. bool AutoConnect :: on( const String & uri, const AuxHandlerFunctionT handler, AutoConnectExitOrder_t order) void AutoConnectAux :: on( const AuxHandlerFunctionT handler, const AutoConnectExitOrder_t order) Parameter uri specifies an URI of the custom Web page, but an AutoConnectAux object with its URI must be registered with AutoConnect via the AutoConnect::join function beforehand. AutoConnect::on/AutoConnectAux::on is not ESP8266WebServer::on The on function for AutoConnect is different from the on function of Arduino core ESP8266WebServer (WebServer for ESP32). You can share the same handler via wrapper, but access to AutoConnectElements is valid only for handlers registered with on function for AutoConnect . AuxHandlerFunctionT type is a handler declaration using with std::function . String handler(AutoConnectAux & aux, PageArgument & args) The handler of the custom Web page has two arguments by a reference of AutoConnectAux and a reference of PageArgument, it returns String. AutoConnect appends the string returned from the handler to the generated HTML. This allows you to add an HTML part before displaying the page. AutoConnectExitOrder_t specifies when the handler is called with the following enumeration value. AC_EXIT_AHEAD : Called before AutoConnect generates the HTML of the page. You set the value of AutoConnectElements in the handler then its value will be displayed on the page. AC_EXIT_LATER : Called after AutoConnect generates the HTML of the page. You can append to HTML generated by AutoConnect. AC_EXIT_BOTH : Called even before generating HTML and after generated. The following example is a part of sketch contained the handlers. // AutoConnect object declarations ACInput(input1); AutoConnectAux aux ( \"/aux\" , { input1 }); AutoConnect portal; // Pre-declare handlers String initialize (AutoConnectAux & , PageArgument & ); String append (AutoConnectAux & , PageArgument & ); // Register handlers and launch the portal. aux.on(initialize, AC_AHEAD); aux.on(append, AC_LATER); portal.join(aux); portal.begin(); // Some code here... // The handler called before HTML generating String initialize (AutoConnectAux & aux, PageArgument & args) { AutoConnectInput & input1 = aux.getElement < AutoConnectInput > ( \"input1\" ); // Set initial value for the input box in a custom Web page. input1.value = \"Initial value\" ; // Nothing appendix for a generated HTML. return String(); } // The handler called after HTML generated String append (AutoConnectAux & aux, PageArgument & args) { // Append an HTML return String( \"<p>This text has been added.</p>\" ); }","title":" When setting the initial values"},{"location":"achandling.html#how-you-can-reach-the-values","text":"AutoConnectSubmit uses the POST method to send HTTP requests. A value of AutoConnectInput sent to the ESP8266 or ESP32 with POST is stored in the request body of the HTTP request: POST /feels HTTP/1.1 Host: ESP8266_IP_ADDRESS name1=value1&name2=value2&name3=value3 ESP8266WebServer class will parse the query string and rebuilds its arguments when the above request arrives. A custom page handler registered with the ESP8266WebServer::on function can access the value of AutoConnectElements with ESP8266WebServe::arg function. It reaches the values of AutoConnectElements without the intermediation of AutoConnect. Therefore, its handler will not be AutoConnectAux and can send a response to the client directly. The following example is part of a server sketch which has two web pages. The /hello page is a custom Web page of AutoConnectAux which has an input box named \"input1\". Another /echo page is a page handler for ESP8266WebServer, which uses the ESP8266WebServer::send function to echo back the value of an input1 as an http response. ESP8266WebServer server; AutoConnect portal (server); ACInput(input1, \"\" , \"INPUT\" ); ACSubmit(send, \"HELLO\" , \"/echo\" ); AutoConnectAux aux ( \"/hello\" , { input1, send }); server.on( \"/echo\" , []() { String echo = server.arg( \"input1\" ); Serial.println(echo); server.send( 200 , \"text/plain\" , echo); }); portal.join(aux); portal.begin(); Also, you can choose another way to access arguments without going through the ESP8266WebServer class. The PageArgument object of the custom Web page handler argument is a copy of the arg object of the ESP8266WebServer class. Either of these methods is a simple and easy way to access parameters in custom Web page handlers. However, if you need to access from outside of the handler to the value of AutoConnectElements, you need to accomplish it using with the AutoConnectAux::getElement function. The following sketch code replaces the above example with JSON and PageArgument, and its behaves is equivalent basically to the above sketch. const static char auxPage[] PROGMEM = R \"raw ( [ { \"title\" : \"Hello\" , \"uri\" : \"/hello\" , \"menu\" : true, \"element\" : [ { \"name\" : \"input1\" , \"type\" : \"ACInput\" , \"label\" : \"INPUT\" }, { \"name\" : \"send\" , \"type\" : \"ACSubmit\" , \"value\" : \"HELLO\" , \"uri\" : \"/echo\" }] }, { \"title\" : \"Echo\" , \"uri\" : \"/echo\" , \"menu\" : false, \"element\" : [ { \"name\" : \"echo\" , \"type\" : \"ACText\" }] } ] )raw \"; AutoConnect portal; portal.load(auxPage); portal.on( \"/echo\" , [](AutoConnectAux & aux, PageArgument & args) { AutoConnectText & ac_echo = aux.getElement < AutoConnectText > ( \"echo\" ); ac_echo.value = args.arg( \"input1\" ); return String (); }); portal.begin();","title":" How you can reach the values"},{"location":"achandling.html#overwrite-the-autoconnectelements","text":"Sketches can update the attributes of AutoConnectElements with two approaches. A one is to assign directly to the attributes of a member variable of its element. The other is to overwrite them with loading the element by AutoConnectAux::loadElement . The elements for attributes described in the JSON document for AutoConnectElements overwrites the member variables of the target AutoConnectElements. However, AutoConnectAux::loadElement keeps the member variables unchanged if there is no element in the JSON document. This overwriting behavior is the same for the AutoConnect::load function. For example, the combination of the sketch and JSON document as follows updates only the style while keeping Captiopn (ie. \"Hello, world\") as AutoConnectText value. The sketch (part of code) ACText(Caption, \"Hello, world\" ); AutoConnectAux helloPage ( \"/hello\" , \"Hello\" , true, { Caption }); AutoConnect portal; String onHello (AutoConnectAux & aux, PageArgument & args) { aux.loadElement(JSON); return String(); } void setup () { helloPage.on(onHello); portal.join(helloPage); portal.begin(); } void loop () { portal.handleClient(); } External JSON document for the above sketch to modify the text style { \"name\" : \"Caption\" , \"type\" : \"ACText\" , \"style\" : \"text-align:center;font-family:'Avenir','Corbel','Osaka';color:Green;\" }","title":" Overwrite the AutoConnectElements"},{"location":"achandling.html#check-data-against-on-submission","text":"By giving a pattern to AutoConnectInput , you can find errors in data styles while typing in custom Web pages. The pattern is specified by regular expression . 2 If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. The following example shows the behavior when checking the IP address in the AutoConnectInput field. { \"title\" : \"Page-1\" , \"uri\" : \"/page1\" , \"menu\" : true , \"element\" : [ { \"name\" : \"Server\" , \"type\" : \"ACInput\" , \"label\" : \"Server address\" , \"pattern\" : \"^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$\" } ] }","title":" Check data against on submission"},{"location":"achandling.html#convert-data-to-actually-type","text":"","title":" Convert data to actually type"},{"location":"achandling.html#transitions-of-the-custom-web-pages","text":"","title":"Transitions of the custom Web pages"},{"location":"achandling.html#scope-lifetime-of-autoconnectaux","text":"The lifetime of AutoConnectAux and AutoConnectElements must remain in the period when the custom Web page can be manipulated. The implementation of the custom Web page inherits from requestHandler driven from ESP8266WebServer (WebServer for ESP32), so the instance of AutoConnectAux and AutoConnectElements must exist for the duration of effect of handleClient. The following example is incorrect for manipulating custom Web pages. Its AutoConnectAux instance will be destructed at the exit of the setup(). #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const auxPage[] PROGMEM = R\"raw( { \"title\": \"Page-1\", \"uri\": \"/page1\", \"menu\": true, \"element\": [ { \"name\":\"Server\", \"type\":\"ACText\", \"label\":\"Server address\" } ] } )raw\" ; AutoConnect portal; void setup () { // This declaration is wrong. AutoConnectAux aux; aux.load(auxPage); portal.join(aux); portal.begin(); } void loop () { portal.handleClient(); }","title":"Scope & Lifetime of AutoConnectAux"},{"location":"achandling.html#the-uri-of-the-custom-web-pages","text":"The transition of the custom Web page follows the URI of the page, but the ESP8266WebServer class does not know the URI of an AutoConnectAux page. (Registering a custom Web page does not use the ESP8266WebServer::on / WebServer::on function.) Therefore ESP8266WebServer class does not detect its URI access. If you want to detect an http request to AutoConnectAux's custom Web page, you need to register its URI with the AutoConnectAux::on function. In addition to this, there are restrictions in the handler for the custom Web page as shown in the following section.","title":"The URI of the custom Web pages"},{"location":"achandling.html#restrictions","text":"The custom Web pages handler has the following restrictions. Do not send HTTP responses from the handler. If the handler returns its own response, the custom Web page will be lost. Use AutoConnectSubmit whenever possible. AutoConnect will hold the values of a custom Web Page is sent by AutoConnectSubmit. Can not handle the custom Web pages during a connection is not established yet. During the connection attempt, the web browser of the client will send a probe for a captive portal. Its request will cause unintended custom Web page transitions. Can not place URI of the custom Web pages to AUTOCONNECT_URI]. AutoConnect will not work if you place a custom Web page to AUTOCONNECT_URI . 302 Redirect Alternatives To transition from a custom Web page to a sketch owned page, execute the link function of JavaScript with the AutoConnectElement element. window.onload = function() { Gifffer(); }; The valid scope of the name is within an AutoConnectAux. \u21a9 The pattern of AutoConnectInput conforms to javascript specification. \u21a9","title":"Restrictions"},{"location":"acintro.html","text":"What it is \u00b6 AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages are displayed in the AutoConnect menu and can be used from there. It can also have input-output parameters and handle it with sketches. For example, you can program some sketches that publish messages by entering the URI or unique ID of the MQTT broker on a custom page. You do not need to code the processing to handle the web page, it retrieves the input parameters and passes to the MQTT broker connection API is only. How it works \u00b6 Custom Web pages are dynamically created by AutoConnect. The Classes and APIs necessary for dynamic creation are provided. AutoConnectAux is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages like the one on the right figure into AutoConnect. The elements that make up a custom web page are provided as an AutoConnectElement class. Furthermore, an input box, a check box, a submit button, etc. are implemented by classes derived from AutoConnectElement. AutoConnectAux is a container for AutoConnectElements. To make a custom Web page, create elements that make up the page and put it in the AutoConnectAux object. Joining its AutoConnectAux object to AutoConnect will integrate the custom Web page into the AutoConnect menu. The above figure shows a code sequence that declares AutoConnectElements and put in the AutoConnectAux container and integrates those into AutoConnect. It declares two text elements named ' header 'and ' caption ', adds them to the AutoConnectAux object ' aux ', binds to an AutoConnect object named ' portal '. It's the basic procedure for configuring the custom Web page. Also, further explanation of AutoConnectElements is the documentation . Custom Web pages in AutoConnect menu \u00b6 Custom Web pages as AutoConnectAux are integrated into the AutoConnect menu . AutoConnectAux object contains member variables which are URI and the title. It also has an indicator to show on the AutoConnect menu. You give the title and URI of the custom web page to the AutoConnectAux object with Sketch. Then the title of the custom Web page would be displayed at the bottom of the AutoConnect menu as the left figure. 1 It is a hyperlink as URI you given to the custom Web page and taps it will display a page composed of AutoConnectElements. Also, a title will display in the upper left corner of the page, which includes a hyperlink to the AutoConnect statistics screen. Multiple custom Web pages \u00b6 You can create multiple custom Web pages and specify which pages you can invoke from the menu. In the sketch below, it shows the sequence of codes to integrate three custom Web pages into one and embed them into the menu. In the above code, the third parameter of ' aux2 ' is false . The third parameter of the AutoConnectAux constructor is an indicator of whether it's shown to the AutoConnect menu. Right animation is the execution result of the above code. You will see that the custom Web page's menu is displayed only in the last two lines. The sketch of this animation is written to transition to ' aux2 ' by the utility of the AutoConnectSubmit element owned by ' aux1 '. 2 An ' aux2 ' page transitions only from the ' aux1 '. It is a page that saves the parameters you entered on the previous page as shown in mqttRSSI in the library example. It is to want to hide ' aux2 ' from AutoConnect menu lines. The utility of the third parameter of the AutoConnectAux constructor is that. Basic steps to use custom Web pages \u00b6 So, the basic procedure for handling of the custom Web pages is as follows: Create or define AutoConnectAux. Create or define AutoConnectElement(s) . Add AutoConnectElement(s) to AutoConnectAux. Create more AutoConnectAux containing AutoConnectElement(s) , if necessary. Register the request handlers for the custom Web pages. Join prepared AutoConnectAux(s) to AutoConnect. Invoke AutoConnect::begin() . Write the custom Web page with JSON \u00b6 You can write the custom Web page in JSON without using sketch codes. 3 It is possible to describe the entire page in JSON and can be described for each element also. The JSON description can be saved in SPIFFS or SD and read using AutoConnect's load function. If you take this approach, you can further reduce the steps of the above but this way consumes a lot of memory. The following JSON code and sketch will execute the custom Web page as the example in the above figure. That is, the sketch of this code and footnote 2 is equivalent. custom_page.json [ { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_setting\" , \"menu\" : true , \"element\" : [ { \"name\" : \"header\" , \"type\" : \"ACText\" , \"value\" : \"MQTT broker settings\" }, { \"name\" : \"caption1\" , \"type\" : \"ACText\" , \"value\" : \"Publishing the WiFi...\" }, { \"name\" : \"save\" , \"type\" : \"ACSubmit\" , \"value\" : \"SAVE\" , \"uri\" : \"/mqtt_save\" } ] }, { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_save\" , \"menu\" : false , \"element\" : [ { \"name\" : \"caption2\" , \"type\" : \"ACText\" , \"value\" : \"Save parameters\" }, { \"name\" : \"start\" , \"type\" : \"ACSubmit\" , \"value\" : \"START\" , \"uri\" : \"/mqtt_start\" } ] }, { \"title\" : \"MQTT Start\" , \"uri\" : \"/mqtt_start\" , \"menu\" : true , \"element\" : [] } ] The sketch #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <FS.h> #include <AutoConnect.h> AutoConnect portal; void setup () { SPIFFS.begin(); File page = SPIFFS.open( \"/custom_page.json\" , \"r\" ); portal.load(page); page.close(); SPIFFS.end(); portal.begin(); } void loop () { portal.handleClient(); } Passing parameters with sketches and custom Web pages \u00b6 A sketch can access variables of AutoConnectElements in the custom Web page. The value entered into the AutoConnectElements on the page is stored to the member variables of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the GET / POST request handler. If you assign a value to an element before a request to the page occurs, its value will appear as the initial value when the page is displayed. Details are explained in the Parameter handling . window.onload = function() { Gifffer(); }; There is no overlay in the actual menu. \u21a9 The sketch is actually this: #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; ACText(header, \"MQTT broker settings\" ); ACText(caption1, \"Publishing the WiFi...\" ); ACSubmit(save, \"SAVE\" , \"/mqtt_save\" ); AutoConnectAux aux1 ( \"/mqtt_setting\" , \"MQTT Setting\" , { header, caption1, save }); ACText(caption2, \"Save parameters\" ); ACSubmit(start, \"START\" , \"/mqtt_start\" ); AutoConnectAux aux2 ( \"/mqtt_save\" , \"MQTT Setting\" , false, { caption2, start }); AutoConnectAux aux3 ( \"/mqtt_start\" , \"MQTT Start\" ); void setup () { portal.join({ aux1, aux2, aux3 }); portal.begin(); } void loop () { portal.handleClient(); } \u21a9 Installation of the ArduinoJson as the latest release of version 5 series is required. \u21a9","title":"Custom Web pages with AutoConnect"},{"location":"acintro.html#what-it-is","text":"AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages are displayed in the AutoConnect menu and can be used from there. It can also have input-output parameters and handle it with sketches. For example, you can program some sketches that publish messages by entering the URI or unique ID of the MQTT broker on a custom page. You do not need to code the processing to handle the web page, it retrieves the input parameters and passes to the MQTT broker connection API is only.","title":"What it is"},{"location":"acintro.html#how-it-works","text":"Custom Web pages are dynamically created by AutoConnect. The Classes and APIs necessary for dynamic creation are provided. AutoConnectAux is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages like the one on the right figure into AutoConnect. The elements that make up a custom web page are provided as an AutoConnectElement class. Furthermore, an input box, a check box, a submit button, etc. are implemented by classes derived from AutoConnectElement. AutoConnectAux is a container for AutoConnectElements. To make a custom Web page, create elements that make up the page and put it in the AutoConnectAux object. Joining its AutoConnectAux object to AutoConnect will integrate the custom Web page into the AutoConnect menu. The above figure shows a code sequence that declares AutoConnectElements and put in the AutoConnectAux container and integrates those into AutoConnect. It declares two text elements named ' header 'and ' caption ', adds them to the AutoConnectAux object ' aux ', binds to an AutoConnect object named ' portal '. It's the basic procedure for configuring the custom Web page. Also, further explanation of AutoConnectElements is the documentation .","title":"How it works"},{"location":"acintro.html#custom-web-pages-in-autoconnect-menu","text":"Custom Web pages as AutoConnectAux are integrated into the AutoConnect menu . AutoConnectAux object contains member variables which are URI and the title. It also has an indicator to show on the AutoConnect menu. You give the title and URI of the custom web page to the AutoConnectAux object with Sketch. Then the title of the custom Web page would be displayed at the bottom of the AutoConnect menu as the left figure. 1 It is a hyperlink as URI you given to the custom Web page and taps it will display a page composed of AutoConnectElements. Also, a title will display in the upper left corner of the page, which includes a hyperlink to the AutoConnect statistics screen.","title":"Custom Web pages in AutoConnect menu"},{"location":"acintro.html#multiple-custom-web-pages","text":"You can create multiple custom Web pages and specify which pages you can invoke from the menu. In the sketch below, it shows the sequence of codes to integrate three custom Web pages into one and embed them into the menu. In the above code, the third parameter of ' aux2 ' is false . The third parameter of the AutoConnectAux constructor is an indicator of whether it's shown to the AutoConnect menu. Right animation is the execution result of the above code. You will see that the custom Web page's menu is displayed only in the last two lines. The sketch of this animation is written to transition to ' aux2 ' by the utility of the AutoConnectSubmit element owned by ' aux1 '. 2 An ' aux2 ' page transitions only from the ' aux1 '. It is a page that saves the parameters you entered on the previous page as shown in mqttRSSI in the library example. It is to want to hide ' aux2 ' from AutoConnect menu lines. The utility of the third parameter of the AutoConnectAux constructor is that.","title":"Multiple custom Web pages"},{"location":"acintro.html#basic-steps-to-use-custom-web-pages","text":"So, the basic procedure for handling of the custom Web pages is as follows: Create or define AutoConnectAux. Create or define AutoConnectElement(s) . Add AutoConnectElement(s) to AutoConnectAux. Create more AutoConnectAux containing AutoConnectElement(s) , if necessary. Register the request handlers for the custom Web pages. Join prepared AutoConnectAux(s) to AutoConnect. Invoke AutoConnect::begin() .","title":"Basic steps to use custom Web pages"},{"location":"acintro.html#write-the-custom-web-page-with-json","text":"You can write the custom Web page in JSON without using sketch codes. 3 It is possible to describe the entire page in JSON and can be described for each element also. The JSON description can be saved in SPIFFS or SD and read using AutoConnect's load function. If you take this approach, you can further reduce the steps of the above but this way consumes a lot of memory. The following JSON code and sketch will execute the custom Web page as the example in the above figure. That is, the sketch of this code and footnote 2 is equivalent. custom_page.json [ { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_setting\" , \"menu\" : true , \"element\" : [ { \"name\" : \"header\" , \"type\" : \"ACText\" , \"value\" : \"MQTT broker settings\" }, { \"name\" : \"caption1\" , \"type\" : \"ACText\" , \"value\" : \"Publishing the WiFi...\" }, { \"name\" : \"save\" , \"type\" : \"ACSubmit\" , \"value\" : \"SAVE\" , \"uri\" : \"/mqtt_save\" } ] }, { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_save\" , \"menu\" : false , \"element\" : [ { \"name\" : \"caption2\" , \"type\" : \"ACText\" , \"value\" : \"Save parameters\" }, { \"name\" : \"start\" , \"type\" : \"ACSubmit\" , \"value\" : \"START\" , \"uri\" : \"/mqtt_start\" } ] }, { \"title\" : \"MQTT Start\" , \"uri\" : \"/mqtt_start\" , \"menu\" : true , \"element\" : [] } ] The sketch #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <FS.h> #include <AutoConnect.h> AutoConnect portal; void setup () { SPIFFS.begin(); File page = SPIFFS.open( \"/custom_page.json\" , \"r\" ); portal.load(page); page.close(); SPIFFS.end(); portal.begin(); } void loop () { portal.handleClient(); }","title":"Write the custom Web page with JSON"},{"location":"acintro.html#passing-parameters-with-sketches-and-custom-web-pages","text":"A sketch can access variables of AutoConnectElements in the custom Web page. The value entered into the AutoConnectElements on the page is stored to the member variables of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the GET / POST request handler. If you assign a value to an element before a request to the page occurs, its value will appear as the initial value when the page is displayed. Details are explained in the Parameter handling . window.onload = function() { Gifffer(); }; There is no overlay in the actual menu. \u21a9 The sketch is actually this: #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; ACText(header, \"MQTT broker settings\" ); ACText(caption1, \"Publishing the WiFi...\" ); ACSubmit(save, \"SAVE\" , \"/mqtt_save\" ); AutoConnectAux aux1 ( \"/mqtt_setting\" , \"MQTT Setting\" , { header, caption1, save }); ACText(caption2, \"Save parameters\" ); ACSubmit(start, \"START\" , \"/mqtt_start\" ); AutoConnectAux aux2 ( \"/mqtt_save\" , \"MQTT Setting\" , false, { caption2, start }); AutoConnectAux aux3 ( \"/mqtt_start\" , \"MQTT Start\" ); void setup () { portal.join({ aux1, aux2, aux3 }); portal.begin(); } void loop () { portal.handleClient(); } \u21a9 Installation of the ArduinoJson as the latest release of version 5 series is required. \u21a9","title":"Passing parameters with sketches and custom Web pages"},{"location":"acjson.html","text":"You can embed custom Web pages written in JSON into AutoConnect without declaring AutoConnectAux & AutoConnectElements in sketches. Custom Web page declaration in JSON can be included in the sketch in advance as the fixed string, or it can be stored in the external file such as SPIFFS for stream loading. You can also load and save AutoConnectElements objects individually. 1 By providing the following JSON document to AutoConnect, you can include the custom Web page as the bellow: A JSON document for AutoConnect can also contain declarations of multiple custom Web pages. If you fit those multiple pages in one JSON document, sketch processing for loading AutoConnectAux will degenerate further. Need ArduinoJson v5 To process the AutoConnectAux & AutoConnectElements written in the JSON is you need to install the ArduinoJson version 5 library. JSON objects & elements for the custom Web page \u00b6 JSON document structure for AutoConnectAux \u00b6 An AutoConnectAux is described by a JSON object. The elements that make up an object are as follows: { \"title\" : title, \"uri\" : uri, \"menu\" : true | false, \"element\" : element_array } title \u00b6 A title of the custom Web page. This is string value. String specified title will be displayed in the AutoConnection menu. uri \u00b6 String of URI path that specifies where to place the custom Web page. It needs to be a location from the root path including ' / '. menu \u00b6 This is a Boolean value indicating whether to include the custom Web page in the AutoConnect menu. If the page only responds to another page and you want to prevent the direct use from the menu, you can exclude from the AutoConnect menu. If this key is false, it will not appear in the menu. element \u00b6 Describe an array of JSON objects as element_array . It is a JSON object array of the AutoConnectElements that make up the custom Web page. Order of elements on a custom Web page The order in which AutoConnectElements are placed on a custom Web page is the order in the JSON document. Multiple custom Web pages declaration in JSON document \u00b6 You can put declarations of multiple custom Web pages in one JSON document. In that case, declare an array of each custom Web page with JSON. The following JSON document contains three custom Web pages: [ { \"title\" : \"Page 1 title\" , \"uri\" : \"/page1\" , \"menu\" : true , \"element\" : [ { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"hello, world\" }, { \"name\" : \"send\" , \"type\" : \"ACSubmit\" , \"uri\" : \"/page2\" } ] }, { \"title\" : \"Page 1 title\" , \"uri\" : \"/page2\" , \"menu\" : false , \"element\" : [ { \"name\" : \"responds\" , \"type\" : \"ACText\" , \"value\" : \"Good day\" }, { \"name\" : \"send\" , \"type\" : \"ACSubmit\" , \"uri\" : \"/page3\" } ] }, { \"title\" : \"Page 3 title\" , \"uri\" : \"/page3\" , \"menu\" : true , \"element\" : [ { \"name\" : \"responds\" , \"type\" : \"ACText\" , \"value\" : \"bye\" } ] } ] JSON object for AutoConnectElements \u00b6 AutoConnectElements in JSON description are described as an array in the element with arguments of each constructor . { \"name\" : name, \"type\" : type, key_according_to_type : the_value | array_of_value, [ key_according_to_type : the_value | array_of_value ] } name \u00b6 A string of the name for the element. type \u00b6 A string of the type for the element. For this type, specify the following string corresponding to each element. AutoConnectButton: ACButton AutoConnectCheckbox: ACCheckbox AutoConnectElement: ACElement AutoConnectInput: ACInput AutoConnectRadio: ACRadio AutoConnectSelect: ACSelect AutoConnectSubmit: ACSubmit AutoConnectText: ACText key_according_to_type \u00b6 This is different for each AutoConnectElements type, and the key that can be specified by the type is determined. ACButton \u00b6 value : Specifies the button label. This value also applies to the value attribute of an HTML button tag. action : Specifies an action to be fire on a mouse click on the button. It is mostly used with a JavaScript to activate a script, or it directly describes a JavaScript. ACCheckbox \u00b6 value : Specifies the value to be supplied to the checkbox. It will be packed in the query string as name=value when the checkbox is ticked. label : Specifies a label of the checkbox. Its placement is always to the right of the checkbox. checked : Specifies checking status as a boolean value. The value of the checked checkbox element is packed in the query string and sent. ACElement \u00b6 value : Specifies the source code of generating HTML. The value is native HTML code and is output as HTML as it is. ACInput \u00b6 value : Specifies the initial text string of the input box. If this value is omitted, placeholder is displayed as the initial string. label : Specifies a label of the input box. Its placement is always to the left of the input box. placeholder : Specifies short hint of the input box. ACRadio \u00b6 value : Specifies the collection of radio buttons as an array element. label : Specifies a label of the collection of radio buttons, not for each button. The arrangement will be the top or left side according to the arrange . arrange : Specifies the orientation of the radio buttons. Its value accepts one of the following: horizontal : Horizontal arrangement. vertical : Vertical arrangement. checked : Specifies the index number (1-based) of the radio buttons collection to be checked. ACSelect \u00b6 label : Specifies a label of the drop-down list. Its placement is always to the left of the drop-down list. option : Specifies the initial value collection of the drop-down list as an array element. ACSubmit \u00b6 value : Specifies a label of the submit button. uri : Specifies the URI to send form data when the button is clicked. ACText \u00b6 value : Specifies a content and also can contain the native HTML code, but remember that your written code is enclosed by the div tag. style : Specifies the qualification style to give to the content and can use the style attribute format as it is. AutoConnect's JSON parsing process is not perfect It is based on ArduinoJson, but the process is simplified to save memory. As a result, even if there is an unnecessary key, it will not be an error. It is ignored. Loading JSON document \u00b6 AutoConnect supports loading of JSON document from the following instances: String PROGMEM Stream To load custom Web pages JSON document into AutoConnect, use the load function of the AutoConnect class. Its JSON document can read must be completed as a description interpretable by the ArduinoJson library. It cannot import custom Web pages if there are syntax errors for the JSON. If you can not see the custom Web page prepared by JSON, you can check the syntax with ArduinoJson Assistant . It is useful for pre-checking. bool AutoConnect :: load( const String & aux) bool AutoConnect :: load( const __FlashStringHelper * aux) bool AutoConnect :: load(Stream & aux) An example of using each function is as follows. AutoConnect portal; // Loading from String const String aux = String( \"{ \\\" title \\\" : \\\" Page 1 title \\\" , \\\" uri \\\" : \\\" /page1 \\\" , \\\" menu \\\" :true, \\\" element \\\" :[{ \\\" name \\\" : \\\" caption \\\" , \\\" type \\\" : \\\" ACText \\\" , \\\" value \\\" : \\\" hello, world \\\" }]}\" ); portal.load(aux); // Loading from PROGMEM const char aux[] PROGMEM = R\"raw( { \"title\" : \"Page 1 title\", \"uri\" : \"/page1\", \"menu\" : true, \"element\" : [ { \"name\" : \"caption\", \"type\" : \"ACText\", \"value\" : \"hello, world\" } ] } )raw\" ; portal.load(aux); // Loading from Stream assumes \"aux.json\" file should be store in SPIFFS. File aux = SPIFFS.open( \"aux.json\" , \"r\" ); portal.load(aux); aux.close(); AutoConnect passes the given JSON document directly to the parseObject() function of the ArduinoJson library for parsing. Therefore, the constraint of the parseObject() function is applied as it is in the parsing of the JSON document for the AutoConnect. That is, if the JSON string is read-only, duplicating the input string occurs and consumes more memory. Saving JSON document \u00b6 The sketch can persist AutoConnectElements as a JSON document and also uses this function to save the values \u200b\u200bentered on the custom Web page. And you can reload the saved JSON document into AutoConnectElements as the field in a custom Web page using the load function . Loading and saving AutoConnect parameters adopt this method. \u21a9","title":"Custom Web pages with JSON"},{"location":"acjson.html#json-objects-elements-for-the-custom-web-page","text":"","title":"JSON objects & elements for the custom Web page"},{"location":"acjson.html#json-document-structure-for-autoconnectaux","text":"An AutoConnectAux is described by a JSON object. The elements that make up an object are as follows: { \"title\" : title, \"uri\" : uri, \"menu\" : true | false, \"element\" : element_array }","title":" JSON document structure for AutoConnectAux"},{"location":"acjson.html#title","text":"A title of the custom Web page. This is string value. String specified title will be displayed in the AutoConnection menu.","title":" title"},{"location":"acjson.html#uri","text":"String of URI path that specifies where to place the custom Web page. It needs to be a location from the root path including ' / '.","title":" uri"},{"location":"acjson.html#menu","text":"This is a Boolean value indicating whether to include the custom Web page in the AutoConnect menu. If the page only responds to another page and you want to prevent the direct use from the menu, you can exclude from the AutoConnect menu. If this key is false, it will not appear in the menu.","title":" menu"},{"location":"acjson.html#element","text":"Describe an array of JSON objects as element_array . It is a JSON object array of the AutoConnectElements that make up the custom Web page. Order of elements on a custom Web page The order in which AutoConnectElements are placed on a custom Web page is the order in the JSON document.","title":" element"},{"location":"acjson.html#multiple-custom-web-pages-declaration-in-json-document","text":"You can put declarations of multiple custom Web pages in one JSON document. In that case, declare an array of each custom Web page with JSON. The following JSON document contains three custom Web pages: [ { \"title\" : \"Page 1 title\" , \"uri\" : \"/page1\" , \"menu\" : true , \"element\" : [ { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"hello, world\" }, { \"name\" : \"send\" , \"type\" : \"ACSubmit\" , \"uri\" : \"/page2\" } ] }, { \"title\" : \"Page 1 title\" , \"uri\" : \"/page2\" , \"menu\" : false , \"element\" : [ { \"name\" : \"responds\" , \"type\" : \"ACText\" , \"value\" : \"Good day\" }, { \"name\" : \"send\" , \"type\" : \"ACSubmit\" , \"uri\" : \"/page3\" } ] }, { \"title\" : \"Page 3 title\" , \"uri\" : \"/page3\" , \"menu\" : true , \"element\" : [ { \"name\" : \"responds\" , \"type\" : \"ACText\" , \"value\" : \"bye\" } ] } ]","title":" Multiple custom Web pages declaration in JSON document"},{"location":"acjson.html#json-object-for-autoconnectelements","text":"AutoConnectElements in JSON description are described as an array in the element with arguments of each constructor . { \"name\" : name, \"type\" : type, key_according_to_type : the_value | array_of_value, [ key_according_to_type : the_value | array_of_value ] }","title":" JSON object for AutoConnectElements"},{"location":"acjson.html#name","text":"A string of the name for the element.","title":" name"},{"location":"acjson.html#type","text":"A string of the type for the element. For this type, specify the following string corresponding to each element. AutoConnectButton: ACButton AutoConnectCheckbox: ACCheckbox AutoConnectElement: ACElement AutoConnectInput: ACInput AutoConnectRadio: ACRadio AutoConnectSelect: ACSelect AutoConnectSubmit: ACSubmit AutoConnectText: ACText","title":" type"},{"location":"acjson.html#key_according_to_type","text":"This is different for each AutoConnectElements type, and the key that can be specified by the type is determined.","title":" key_according_to_type"},{"location":"acjson.html#acbutton","text":"value : Specifies the button label. This value also applies to the value attribute of an HTML button tag. action : Specifies an action to be fire on a mouse click on the button. It is mostly used with a JavaScript to activate a script, or it directly describes a JavaScript.","title":" ACButton"},{"location":"acjson.html#accheckbox","text":"value : Specifies the value to be supplied to the checkbox. It will be packed in the query string as name=value when the checkbox is ticked. label : Specifies a label of the checkbox. Its placement is always to the right of the checkbox. checked : Specifies checking status as a boolean value. The value of the checked checkbox element is packed in the query string and sent.","title":" ACCheckbox"},{"location":"acjson.html#acelement","text":"value : Specifies the source code of generating HTML. The value is native HTML code and is output as HTML as it is.","title":" ACElement"},{"location":"acjson.html#acinput","text":"value : Specifies the initial text string of the input box. If this value is omitted, placeholder is displayed as the initial string. label : Specifies a label of the input box. Its placement is always to the left of the input box. placeholder : Specifies short hint of the input box.","title":" ACInput"},{"location":"acjson.html#acradio","text":"value : Specifies the collection of radio buttons as an array element. label : Specifies a label of the collection of radio buttons, not for each button. The arrangement will be the top or left side according to the arrange . arrange : Specifies the orientation of the radio buttons. Its value accepts one of the following: horizontal : Horizontal arrangement. vertical : Vertical arrangement. checked : Specifies the index number (1-based) of the radio buttons collection to be checked.","title":" ACRadio"},{"location":"acjson.html#acselect","text":"label : Specifies a label of the drop-down list. Its placement is always to the left of the drop-down list. option : Specifies the initial value collection of the drop-down list as an array element.","title":" ACSelect"},{"location":"acjson.html#acsubmit","text":"value : Specifies a label of the submit button. uri : Specifies the URI to send form data when the button is clicked.","title":" ACSubmit"},{"location":"acjson.html#actext","text":"value : Specifies a content and also can contain the native HTML code, but remember that your written code is enclosed by the div tag. style : Specifies the qualification style to give to the content and can use the style attribute format as it is. AutoConnect's JSON parsing process is not perfect It is based on ArduinoJson, but the process is simplified to save memory. As a result, even if there is an unnecessary key, it will not be an error. It is ignored.","title":" ACText"},{"location":"acjson.html#loading-json-document","text":"AutoConnect supports loading of JSON document from the following instances: String PROGMEM Stream To load custom Web pages JSON document into AutoConnect, use the load function of the AutoConnect class. Its JSON document can read must be completed as a description interpretable by the ArduinoJson library. It cannot import custom Web pages if there are syntax errors for the JSON. If you can not see the custom Web page prepared by JSON, you can check the syntax with ArduinoJson Assistant . It is useful for pre-checking. bool AutoConnect :: load( const String & aux) bool AutoConnect :: load( const __FlashStringHelper * aux) bool AutoConnect :: load(Stream & aux) An example of using each function is as follows. AutoConnect portal; // Loading from String const String aux = String( \"{ \\\" title \\\" : \\\" Page 1 title \\\" , \\\" uri \\\" : \\\" /page1 \\\" , \\\" menu \\\" :true, \\\" element \\\" :[{ \\\" name \\\" : \\\" caption \\\" , \\\" type \\\" : \\\" ACText \\\" , \\\" value \\\" : \\\" hello, world \\\" }]}\" ); portal.load(aux); // Loading from PROGMEM const char aux[] PROGMEM = R\"raw( { \"title\" : \"Page 1 title\", \"uri\" : \"/page1\", \"menu\" : true, \"element\" : [ { \"name\" : \"caption\", \"type\" : \"ACText\", \"value\" : \"hello, world\" } ] } )raw\" ; portal.load(aux); // Loading from Stream assumes \"aux.json\" file should be store in SPIFFS. File aux = SPIFFS.open( \"aux.json\" , \"r\" ); portal.load(aux); aux.close(); AutoConnect passes the given JSON document directly to the parseObject() function of the ArduinoJson library for parsing. Therefore, the constraint of the parseObject() function is applied as it is in the parsing of the JSON document for the AutoConnect. That is, if the JSON string is read-only, duplicating the input string occurs and consumes more memory.","title":"Loading JSON document"},{"location":"acjson.html#saving-json-document","text":"The sketch can persist AutoConnectElements as a JSON document and also uses this function to save the values \u200b\u200bentered on the custom Web page. And you can reload the saved JSON document into AutoConnectElements as the field in a custom Web page using the load function . Loading and saving AutoConnect parameters adopt this method. \u21a9","title":"Saving JSON document"},{"location":"advancedusage.html","text":"Advanced usage \u00b6 404 handler \u00b6 Registering the \"not found\" handler is a different way than ESP8266WebServer/WebServer. The onNotFound of ESP8266WebServer/WebServer does not work with AutoConnect. AutoConnect overrides ESP8266WebServer::onNotFound / WebServer::onNotFound to handle a captive portal. To register \"not found\" handler, use AutoConnect::onNotFound . Automatic reconnect \u00b6 When the captive portal is started, SoftAP starts and the STA is disconnected. The current SSID setting memorized in ESP8266 will be lost but then the reconnect behavior of ESP32 is somewhat different from this. The WiFiSTAClass::disconnect function implemented in the arduino-esp32 has extended parameters than the ESP8266's arduino-core. The second parameter of WiFi.disconnect on the arduino-esp32 core that does not exist in the ESP8266WiFiSTAClass has the effect of deleting the currently connected WiFi configuration and its default value is \"false\". On the ESP32 platform, even if WiFi.disconnect is executed, WiFi.begin() without the parameters in the next turn will try to connect to that AP. That is, automatic reconnection is implemented in arduino-esp32 already. Although this behavior appears seemingly competent, it is rather a disadvantage in scenes where you want to change the access point each time. When explicitly disconnecting WiFi from the Disconnect menu, AutoConnect will erase the AP connection settings saved by arduino-esp32 core. AutoConnect's automatic reconnection is a mechanism independent from the automatic reconnection of the arduino-esp32 core. If the autoReconnect option of the AutoConnectConfig class is enabled, it automatically attempts to reconnect to the disconnected past access point. When the autoReconnect option is specified, AutoConnect will not start SoftAP immediately if the first WiFi.begin fails. It will scan WiFi signal and the same connection information as the detected BSSID is stored in EEPROM as AutoConnect's credentials, explicitly apply it with WiFi.begin and rerun. AutoConnect Portal; AutoConnectConfig Config; Config.autoReconnect = true; Portal.config(Config); Portal.begin(); An autoReconnect option is available to AutoConnect::begin without SSID and pass passphrase. An autoReconnect will work if SSID detection succeeded An autoReconnect will not effect if the SSID which stored credential to be connected is a hidden access point. Auto save Credential \u00b6 By default, AutoConnect saves the credentials of the established connection in EEPROM. You can disable it with the autoSave parameter specified by AutoConnectConfig . AutoConnect Portal; AutoConnectConfig Config; Config.autoSave = AC_SAVECREDENTIAL_NEVER; Portal.config(Config); Portal.begin(); In ESP32, the credentials for AutoConnect are not in NVS The credentials used by AutoConnect are not saved in NVS on ESP32 module. ESP-IDF saves the WiFi connection configuration to NVS, but AutoConnect stores it on the EEPROM partition. You can find the partition table for default as default.csv Captive portal start detection \u00b6 The captive portal will only be activated if the first WiFi::begin fails. Sketch can detect with the AutoConnect::onDetect function that the captive portal has started. For example, the sketch can be written like as follows that turns on the LED at the start captive portal. AutoConnect Portal; bool startCP (IPAddress ip) { digitalWrite(BUILTIN_LED, HIGH); Serial.println( \"C.P. started, IP:\" + WiFi.localIP().toString()); return true; } void setup () { Serial.begin( 115200 ); pinMode(BUILTIN_LED, OUTPUT); digitalWrite(BUILTIN_LED, LOW); Portal.onDetect(startCP); if (Portal.begin()) { digitalWrite(BUILTIN_LED, LOW); } } void loop () { Portal.handleClient(); } Captive portal timeout control \u00b6 AutoConnect has two parameters for timeout control. One is a timeout value used when trying to connect to the specified AP. It behaves the same as general timeout control in connection attempt by WiFi.begin. This control is specified by the third parameter of AutoConnect::begin . Default value is macro defined by AUTOCONNECT_TIMEOUT in the AutoConnectDef.h file. The other is timeout control for the captive portal itself. It is useful when you want to continue sketch execution with offline even if the WiFi connection is not possible. You can also combine it with the immediateStart option to create sketches with high mobility. The timeout of the captive portal is specified together with AutoConnectConfig::portalTimeout as follows. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds portal.config(config); portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } portal.handleClient(); } Also, if you want to stop AutoConnect completely when the captive portal is timed out, you need to call the AutoConnect::end function. It looks like the following code: bool acEnable; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds portal.config(config); acEnable = portal.begin(); if ( ! acEnable) { portal.end(); } } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } if (acEnable) { portal.handleClient(); } } There is another option related to timeout in AutoConnectConfig. It can make use of the captive portal function even after a timeout. The AutoConnectConfig::retainPortal option will not stop the SoftAP when the captive portal is timed out. If you enable the ratainPortal option, you can try to connect to the AP at any time while continuing to sketch execution with offline even after the captive portal timed-out. The following code is its example. It can enable the captive portal after timed-out without changing sketch skeleton compared to the above code which does not specify an option. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds config.retainPortal = true; portal.config(config); portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } portal.handleClient(); } Cast the legacy HTML pages as the add-on menu items \u00b6 If your sketch handles web pages, you can embed the pages into the AutoConnect menu with keeping the WiFi connection feature. Unlike the custom Web pages by AutoConnectAux , this allows to legacy web pages registered by ESP8266WebServer::on or WebServer::on function. To implement embedding the your sketch web pages, use only the AutoConnectAux constructed with the URI of that page. AutoConnectElements is not required. The basic procedure for this as follows: Declare AutoConnectAux for each legacy page. It includes the URI of the page and item string which will display in the AutoConnect menu. Sketch the legacy page handlers. Register those handler functions to ESP8266WebServer/WebServer with the on function. Register AutoConnectAux declared with #1 to AutoConnect using AutoConnect::join function. It serves as a menu item. Begin the portal. Performs AutoConnect::handleClient in the loop function. For details see the Constructing the menu section of Examples page. Change menu title \u00b6 Although the default menu title is AutoConnect , you can change the title by setting AutoConnectConfig::title . To set the menu title properly, you must set before calling AutoConnect::begin . AutoConnect Portal; AutoConnectConfig Config; void setup () { // Set menu title Config.title = \"FSBrowser\" ; Portal.config(Config); Portal.begin(); } Executing the above sketch will rewrite the menu title to FSBrowser as the below. Combination with mDNS \u00b6 With mDNS library , you can access to ESP8266 by name instead of IP address after connection. The sketch can start the MDNS responder after AutoConnect::begin . #include <ESP8266WiFi.h> #include <ESP8266mDNS.h> #include <ESP8266WebServer.h> AutoConnect Portal; void setup () { if (Portal.begin()) { if (MDNS.begin( \"esp8266\" )) { MDNS.addService( \"http\" , \"tcp\" , 80 ); } } } void loop () { Portal.handleClient(); } Debug print \u00b6 You can output AutoConnect monitor messages to the Serial . A monitor message activation switch is in an include header file AutoConnectDefs.h of library source. Define AC_DEBUG macro to output the monitor messages. 1 #define AC_DEBUG Disable the captive portal \u00b6 It can also prevent the captive portal from starting even if the connection at the first WiFi.begin fails. In this case, AutoConnect::begin behaves same as WiFi.begin . For disabling the captive portal, autoRise sets to false with AutoConnectConfig . AutoConnect portal; AutoConnectConfig acConfig; acConfig.autoRaise = false; portal.config(acConfig); portal.begin(); Make SSID of SoftAP unique \u00b6 You can change SoftAP's SSID and password programmatically when the captive portal starts up. By using chip specific ID of esp8266/esp32 you can make SSID of SoftAP unique. SSID and password for SoftAP is AutoConnectConfig::apid and AutoConnectConfig::psk . AutoConnect portal; AutoConnectConfig acConfig; acConfig.apid = \"ESP-\" + String(ESP.getChipId(), HEX); acConfig.psk = YOUR_PASSWORD; portal.config(acConfig); portal.begin(); Obtaining chip ID for ESP32 acConfig.apid = \"ESP-\" + String((uint32_t)(ESP.getEfuseMac() >> 32), HEX); Move the saving area of EEPROM for the credentials \u00b6 By default, the credentials saving area is occupied from the beginning of EEPROM area. ESP8266 Arduino core document says that: The following diagram illustrates flash layout used in Arduino environment: |--------------|-------|---------------|--|--|--|--|--| ^ ^ ^ ^ ^ Sketch OTA update File system EEPROM WiFi config (SDK) and EEPROM library uses one sector of flash located just after the SPIFFS . Also, the placement of the EEPROM area of ESP32 is described in the partition table . So in the default state, the credential storage area used by AutoConnect conflicts with data owned by the user sketch. It will be destroyed together saved data in EEPROM by user sketch and AutoConnect each other. But you can move the storage area to avoid this. The boundaryOffset in AutoConnectConfig specifies the start offset of the credentials storage area. The default value is 0. On-demand start the captive portal \u00b6 If you do not usually connect to WiFi and need to establish a WiFi connection if necessary, you can combine the autoRise option with the immediateStart option to achieve on-demand connection. This behavior is similar to the WiFiManager's startConfigPortal function. In order to do this, you usually configure only with AutoConnectConfig in setup() and AutoConnect::begin() handles in loop() . AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoRise = false; Config.immediateStart = true; Portal.config(Config); } void loop () { if (digitalRead(TRIGGER_PIN) == LOW) { while (digitalRead(TRIGGER_PIN) == LOW) yield(); Portal.begin(); } Portal.handleClient(); } The above example does not connect to WiFi until TRIGGER_PIN goes LOW. When TRIGGER_PIN goes LOW, the captive portal starts and you can connect to WiFi. Even if you reset the module, it will not automatically reconnect. Refers the hosted ESP8266WebServer/WebServer \u00b6 Constructing an AutoConnect object variable without parameters then creates and starts an ESP8266WebServer/WebServer inside the AutoConnect. This object variable could be referred by AutoConnect::host() function to access ESP8266WebServer/WebServer instance as like below. AutoConnect Portal; Portal.begin(); ESP8266WebServer & server = Portal.host(); server.send( 200 , \"text/plain\" , \"Hello, world\" ); When host() is valid The host() can be referred at after AutoConnect::begin . Usage for automatically instantiated ESP8266WebServer/WebServer \u00b6 The sketch can handle URL requests using ESP8266WebServer or WebServer that AutoConnect started internally. ESP8266WebServer/WebServer instantiated dynamically by AutoConnect can be referred to by AutoConnect::host function. The sketch can use the ' on ' function, ' send ' function, ' client ' function and others by ESP8266WebServer/WebServer reference of its return value. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect Portal; void handleRoot () { ESP8266WebServer & IntServer = Portal.host(); IntServer.send( 200 , \"text/html\" , \"Hello, world\" ); } void handleNotFound () { ESP8266WebServer & IntServer = Portal.host(); IntServer.send( 404 , \"text/html\" , \"Unknown.\" ); } void setup () { bool r = Portal.begin(); if (r) { ESP8266WebServer & IntServer = Portal.host(); IntServer.on( \"/\" , handleRoot); Portal.onNotFound(handleNotFound); // For only onNotFound. } } void loop () { Portal.host().handleClient(); Portal.handleRequest(); /* or following one line code is equ. Portal.handleClient(); */ } ESP8266WebServer/WebServer function should be called after AutoConnect::begin The sketch cannot refer to an instance of ESP8266WebServer/WebServer until AutoConnect::begin completes successfully. Do not use with ESP8266WebServer::begin or WebServer::begin ESP8266WebServer/WebServer is already running inside the AutoConnect. Use with the PageBuilder library \u00b6 In ordinary, the URL handler will respond the request by sending some HTML. PageBuilder library is HTML assembly aid. it can handle predefined HTML as like a template and simplify an HTML string assemble logic, and also the generated HTML send automatically. An example sketch used with the PageBuilder as follows and it explains how it aids for the HTML generating. Details for Github repository . Configuration functions \u00b6 Configuration for Soft AP and captive portal \u00b6 AutoConnect will activate SoftAP at failed the first WiFi.begin . It SoftAP settings are stored in AutoConnectConfig as the following parameters. The sketch could be configured SoftAP using these parameters, refer the AutoConnectConfig API for details. IP address of SoftAP activated. Gateway IP address. Subnet mask. SSID for SoftAP. Password for SoftAP. Channel. SoftAP name. Hidden attribute. Auto save credential. Offset address of the credentials storage area in EEPROM. Captive portal time out limit. Retains the portal function after time out. Length of start up time after reset. Automatic starting the captive portal. Start the captive portal forcefully. Auto reset after connection establishment. Home URL of the user sketch application. AutoConnect::config before AutoConnect::begin AutoConnect::config must be executed before AutoConnect::begin . Assign user sketch's home path \u00b6 \" HOME \" for returning to the user's sketch homepage is displayed at the bottom of the AutoConnect menu. It could be set using the AutoConnect::home function. Relocate the AutoConnect home path \u00b6 A home path of AutoConnect is /_ac by default. You can access from the browser with http://IPADDRESS/_ac. You can change the home path by revising AUTOCONNECT_URI macro in the include header file as AutoConnect.h . #define AUTOCONNECT_URI \"/_ac\" Static IP assignment 2 \u00b6 It is also possible to assign static IP Address to ESP8266/ESP32 in STA mode. By default DHCP is enabled and it becomes the IP address assigned by the DHCP server with WiFi.begin . To assign a static IP to ESP8266/ESP32 with WIFI_MODE_STA, the following parameters are required: IP address. Gateway address. Subnet mask. Primary DNS server. Secondary DNS server. (optional) The above parameters must be executed before AutoConnect::begin as arguments of AutoConnectConfig . AutoConnect portal; AutoConnectConfig Config; Config.staip = IPAddress( 192 , 168 , 1 , 10 ); Config.staGateway = IPAddress( 192 , 168 , 1 , 1 ); Config.staNetmask = IPAddress( 255 , 255 , 255 , 0 ); Config.dns1 = IPAddress( 192 , 168 , 1 , 1 ); portal.config(Config); portal.begin(); Station host name \u00b6 The source code placement of common macros for AutoConnect since v0.9.7 has changed. \u21a9 Static IP address assignment is available from version 0.9.3. \u21a9","title":"Advanced usage"},{"location":"advancedusage.html#advanced-usage","text":"","title":"Advanced usage"},{"location":"advancedusage.html#404-handler","text":"Registering the \"not found\" handler is a different way than ESP8266WebServer/WebServer. The onNotFound of ESP8266WebServer/WebServer does not work with AutoConnect. AutoConnect overrides ESP8266WebServer::onNotFound / WebServer::onNotFound to handle a captive portal. To register \"not found\" handler, use AutoConnect::onNotFound .","title":" 404 handler"},{"location":"advancedusage.html#automatic-reconnect","text":"When the captive portal is started, SoftAP starts and the STA is disconnected. The current SSID setting memorized in ESP8266 will be lost but then the reconnect behavior of ESP32 is somewhat different from this. The WiFiSTAClass::disconnect function implemented in the arduino-esp32 has extended parameters than the ESP8266's arduino-core. The second parameter of WiFi.disconnect on the arduino-esp32 core that does not exist in the ESP8266WiFiSTAClass has the effect of deleting the currently connected WiFi configuration and its default value is \"false\". On the ESP32 platform, even if WiFi.disconnect is executed, WiFi.begin() without the parameters in the next turn will try to connect to that AP. That is, automatic reconnection is implemented in arduino-esp32 already. Although this behavior appears seemingly competent, it is rather a disadvantage in scenes where you want to change the access point each time. When explicitly disconnecting WiFi from the Disconnect menu, AutoConnect will erase the AP connection settings saved by arduino-esp32 core. AutoConnect's automatic reconnection is a mechanism independent from the automatic reconnection of the arduino-esp32 core. If the autoReconnect option of the AutoConnectConfig class is enabled, it automatically attempts to reconnect to the disconnected past access point. When the autoReconnect option is specified, AutoConnect will not start SoftAP immediately if the first WiFi.begin fails. It will scan WiFi signal and the same connection information as the detected BSSID is stored in EEPROM as AutoConnect's credentials, explicitly apply it with WiFi.begin and rerun. AutoConnect Portal; AutoConnectConfig Config; Config.autoReconnect = true; Portal.config(Config); Portal.begin(); An autoReconnect option is available to AutoConnect::begin without SSID and pass passphrase. An autoReconnect will work if SSID detection succeeded An autoReconnect will not effect if the SSID which stored credential to be connected is a hidden access point.","title":" Automatic reconnect"},{"location":"advancedusage.html#auto-save-credential","text":"By default, AutoConnect saves the credentials of the established connection in EEPROM. You can disable it with the autoSave parameter specified by AutoConnectConfig . AutoConnect Portal; AutoConnectConfig Config; Config.autoSave = AC_SAVECREDENTIAL_NEVER; Portal.config(Config); Portal.begin(); In ESP32, the credentials for AutoConnect are not in NVS The credentials used by AutoConnect are not saved in NVS on ESP32 module. ESP-IDF saves the WiFi connection configuration to NVS, but AutoConnect stores it on the EEPROM partition. You can find the partition table for default as default.csv","title":" Auto save Credential"},{"location":"advancedusage.html#captive-portal-start-detection","text":"The captive portal will only be activated if the first WiFi::begin fails. Sketch can detect with the AutoConnect::onDetect function that the captive portal has started. For example, the sketch can be written like as follows that turns on the LED at the start captive portal. AutoConnect Portal; bool startCP (IPAddress ip) { digitalWrite(BUILTIN_LED, HIGH); Serial.println( \"C.P. started, IP:\" + WiFi.localIP().toString()); return true; } void setup () { Serial.begin( 115200 ); pinMode(BUILTIN_LED, OUTPUT); digitalWrite(BUILTIN_LED, LOW); Portal.onDetect(startCP); if (Portal.begin()) { digitalWrite(BUILTIN_LED, LOW); } } void loop () { Portal.handleClient(); }","title":" Captive portal start detection"},{"location":"advancedusage.html#captive-portal-timeout-control","text":"AutoConnect has two parameters for timeout control. One is a timeout value used when trying to connect to the specified AP. It behaves the same as general timeout control in connection attempt by WiFi.begin. This control is specified by the third parameter of AutoConnect::begin . Default value is macro defined by AUTOCONNECT_TIMEOUT in the AutoConnectDef.h file. The other is timeout control for the captive portal itself. It is useful when you want to continue sketch execution with offline even if the WiFi connection is not possible. You can also combine it with the immediateStart option to create sketches with high mobility. The timeout of the captive portal is specified together with AutoConnectConfig::portalTimeout as follows. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds portal.config(config); portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } portal.handleClient(); } Also, if you want to stop AutoConnect completely when the captive portal is timed out, you need to call the AutoConnect::end function. It looks like the following code: bool acEnable; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds portal.config(config); acEnable = portal.begin(); if ( ! acEnable) { portal.end(); } } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } if (acEnable) { portal.handleClient(); } } There is another option related to timeout in AutoConnectConfig. It can make use of the captive portal function even after a timeout. The AutoConnectConfig::retainPortal option will not stop the SoftAP when the captive portal is timed out. If you enable the ratainPortal option, you can try to connect to the AP at any time while continuing to sketch execution with offline even after the captive portal timed-out. The following code is its example. It can enable the captive portal after timed-out without changing sketch skeleton compared to the above code which does not specify an option. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds config.retainPortal = true; portal.config(config); portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } portal.handleClient(); }","title":" Captive portal timeout control"},{"location":"advancedusage.html#cast-the-legacy-html-pages-as-the-add-on-menu-items","text":"If your sketch handles web pages, you can embed the pages into the AutoConnect menu with keeping the WiFi connection feature. Unlike the custom Web pages by AutoConnectAux , this allows to legacy web pages registered by ESP8266WebServer::on or WebServer::on function. To implement embedding the your sketch web pages, use only the AutoConnectAux constructed with the URI of that page. AutoConnectElements is not required. The basic procedure for this as follows: Declare AutoConnectAux for each legacy page. It includes the URI of the page and item string which will display in the AutoConnect menu. Sketch the legacy page handlers. Register those handler functions to ESP8266WebServer/WebServer with the on function. Register AutoConnectAux declared with #1 to AutoConnect using AutoConnect::join function. It serves as a menu item. Begin the portal. Performs AutoConnect::handleClient in the loop function. For details see the Constructing the menu section of Examples page.","title":" Cast the legacy HTML pages as the add-on menu items"},{"location":"advancedusage.html#change-menu-title","text":"Although the default menu title is AutoConnect , you can change the title by setting AutoConnectConfig::title . To set the menu title properly, you must set before calling AutoConnect::begin . AutoConnect Portal; AutoConnectConfig Config; void setup () { // Set menu title Config.title = \"FSBrowser\" ; Portal.config(Config); Portal.begin(); } Executing the above sketch will rewrite the menu title to FSBrowser as the below.","title":" Change menu title"},{"location":"advancedusage.html#combination-with-mdns","text":"With mDNS library , you can access to ESP8266 by name instead of IP address after connection. The sketch can start the MDNS responder after AutoConnect::begin . #include <ESP8266WiFi.h> #include <ESP8266mDNS.h> #include <ESP8266WebServer.h> AutoConnect Portal; void setup () { if (Portal.begin()) { if (MDNS.begin( \"esp8266\" )) { MDNS.addService( \"http\" , \"tcp\" , 80 ); } } } void loop () { Portal.handleClient(); }","title":" Combination with mDNS"},{"location":"advancedusage.html#debug-print","text":"You can output AutoConnect monitor messages to the Serial . A monitor message activation switch is in an include header file AutoConnectDefs.h of library source. Define AC_DEBUG macro to output the monitor messages. 1 #define AC_DEBUG","title":" Debug print"},{"location":"advancedusage.html#disable-the-captive-portal","text":"It can also prevent the captive portal from starting even if the connection at the first WiFi.begin fails. In this case, AutoConnect::begin behaves same as WiFi.begin . For disabling the captive portal, autoRise sets to false with AutoConnectConfig . AutoConnect portal; AutoConnectConfig acConfig; acConfig.autoRaise = false; portal.config(acConfig); portal.begin();","title":" Disable the captive portal"},{"location":"advancedusage.html#make-ssid-of-softap-unique","text":"You can change SoftAP's SSID and password programmatically when the captive portal starts up. By using chip specific ID of esp8266/esp32 you can make SSID of SoftAP unique. SSID and password for SoftAP is AutoConnectConfig::apid and AutoConnectConfig::psk . AutoConnect portal; AutoConnectConfig acConfig; acConfig.apid = \"ESP-\" + String(ESP.getChipId(), HEX); acConfig.psk = YOUR_PASSWORD; portal.config(acConfig); portal.begin(); Obtaining chip ID for ESP32 acConfig.apid = \"ESP-\" + String((uint32_t)(ESP.getEfuseMac() >> 32), HEX);","title":" Make SSID of SoftAP unique"},{"location":"advancedusage.html#move-the-saving-area-of-eeprom-for-the-credentials","text":"By default, the credentials saving area is occupied from the beginning of EEPROM area. ESP8266 Arduino core document says that: The following diagram illustrates flash layout used in Arduino environment: |--------------|-------|---------------|--|--|--|--|--| ^ ^ ^ ^ ^ Sketch OTA update File system EEPROM WiFi config (SDK) and EEPROM library uses one sector of flash located just after the SPIFFS . Also, the placement of the EEPROM area of ESP32 is described in the partition table . So in the default state, the credential storage area used by AutoConnect conflicts with data owned by the user sketch. It will be destroyed together saved data in EEPROM by user sketch and AutoConnect each other. But you can move the storage area to avoid this. The boundaryOffset in AutoConnectConfig specifies the start offset of the credentials storage area. The default value is 0.","title":" Move the saving area of EEPROM for the credentials"},{"location":"advancedusage.html#on-demand-start-the-captive-portal","text":"If you do not usually connect to WiFi and need to establish a WiFi connection if necessary, you can combine the autoRise option with the immediateStart option to achieve on-demand connection. This behavior is similar to the WiFiManager's startConfigPortal function. In order to do this, you usually configure only with AutoConnectConfig in setup() and AutoConnect::begin() handles in loop() . AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoRise = false; Config.immediateStart = true; Portal.config(Config); } void loop () { if (digitalRead(TRIGGER_PIN) == LOW) { while (digitalRead(TRIGGER_PIN) == LOW) yield(); Portal.begin(); } Portal.handleClient(); } The above example does not connect to WiFi until TRIGGER_PIN goes LOW. When TRIGGER_PIN goes LOW, the captive portal starts and you can connect to WiFi. Even if you reset the module, it will not automatically reconnect.","title":" On-demand start the captive portal"},{"location":"advancedusage.html#refers-the-hosted-esp8266webserverwebserver","text":"Constructing an AutoConnect object variable without parameters then creates and starts an ESP8266WebServer/WebServer inside the AutoConnect. This object variable could be referred by AutoConnect::host() function to access ESP8266WebServer/WebServer instance as like below. AutoConnect Portal; Portal.begin(); ESP8266WebServer & server = Portal.host(); server.send( 200 , \"text/plain\" , \"Hello, world\" ); When host() is valid The host() can be referred at after AutoConnect::begin .","title":" Refers the hosted ESP8266WebServer/WebServer"},{"location":"advancedusage.html#usage-for-automatically-instantiated-esp8266webserverwebserver","text":"The sketch can handle URL requests using ESP8266WebServer or WebServer that AutoConnect started internally. ESP8266WebServer/WebServer instantiated dynamically by AutoConnect can be referred to by AutoConnect::host function. The sketch can use the ' on ' function, ' send ' function, ' client ' function and others by ESP8266WebServer/WebServer reference of its return value. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect Portal; void handleRoot () { ESP8266WebServer & IntServer = Portal.host(); IntServer.send( 200 , \"text/html\" , \"Hello, world\" ); } void handleNotFound () { ESP8266WebServer & IntServer = Portal.host(); IntServer.send( 404 , \"text/html\" , \"Unknown.\" ); } void setup () { bool r = Portal.begin(); if (r) { ESP8266WebServer & IntServer = Portal.host(); IntServer.on( \"/\" , handleRoot); Portal.onNotFound(handleNotFound); // For only onNotFound. } } void loop () { Portal.host().handleClient(); Portal.handleRequest(); /* or following one line code is equ. Portal.handleClient(); */ } ESP8266WebServer/WebServer function should be called after AutoConnect::begin The sketch cannot refer to an instance of ESP8266WebServer/WebServer until AutoConnect::begin completes successfully. Do not use with ESP8266WebServer::begin or WebServer::begin ESP8266WebServer/WebServer is already running inside the AutoConnect.","title":" Usage for automatically instantiated ESP8266WebServer/WebServer"},{"location":"advancedusage.html#use-with-the-pagebuilder-library","text":"In ordinary, the URL handler will respond the request by sending some HTML. PageBuilder library is HTML assembly aid. it can handle predefined HTML as like a template and simplify an HTML string assemble logic, and also the generated HTML send automatically. An example sketch used with the PageBuilder as follows and it explains how it aids for the HTML generating. Details for Github repository .","title":" Use with the PageBuilder library"},{"location":"advancedusage.html#configuration-functions","text":"","title":"Configuration functions"},{"location":"advancedusage.html#configuration-for-soft-ap-and-captive-portal","text":"AutoConnect will activate SoftAP at failed the first WiFi.begin . It SoftAP settings are stored in AutoConnectConfig as the following parameters. The sketch could be configured SoftAP using these parameters, refer the AutoConnectConfig API for details. IP address of SoftAP activated. Gateway IP address. Subnet mask. SSID for SoftAP. Password for SoftAP. Channel. SoftAP name. Hidden attribute. Auto save credential. Offset address of the credentials storage area in EEPROM. Captive portal time out limit. Retains the portal function after time out. Length of start up time after reset. Automatic starting the captive portal. Start the captive portal forcefully. Auto reset after connection establishment. Home URL of the user sketch application. AutoConnect::config before AutoConnect::begin AutoConnect::config must be executed before AutoConnect::begin .","title":" Configuration for Soft AP and captive portal"},{"location":"advancedusage.html#assign-user-sketchs-home-path","text":"\" HOME \" for returning to the user's sketch homepage is displayed at the bottom of the AutoConnect menu. It could be set using the AutoConnect::home function.","title":" Assign user sketch's home path"},{"location":"advancedusage.html#relocate-the-autoconnect-home-path","text":"A home path of AutoConnect is /_ac by default. You can access from the browser with http://IPADDRESS/_ac. You can change the home path by revising AUTOCONNECT_URI macro in the include header file as AutoConnect.h . #define AUTOCONNECT_URI \"/_ac\"","title":" Relocate the AutoConnect home path"},{"location":"advancedusage.html#static-ip-assignment-2","text":"It is also possible to assign static IP Address to ESP8266/ESP32 in STA mode. By default DHCP is enabled and it becomes the IP address assigned by the DHCP server with WiFi.begin . To assign a static IP to ESP8266/ESP32 with WIFI_MODE_STA, the following parameters are required: IP address. Gateway address. Subnet mask. Primary DNS server. Secondary DNS server. (optional) The above parameters must be executed before AutoConnect::begin as arguments of AutoConnectConfig . AutoConnect portal; AutoConnectConfig Config; Config.staip = IPAddress( 192 , 168 , 1 , 10 ); Config.staGateway = IPAddress( 192 , 168 , 1 , 1 ); Config.staNetmask = IPAddress( 255 , 255 , 255 , 0 ); Config.dns1 = IPAddress( 192 , 168 , 1 , 1 ); portal.config(Config); portal.begin();","title":" Static IP assignment 2"},{"location":"advancedusage.html#station-host-name","text":"The source code placement of common macros for AutoConnect since v0.9.7 has changed. \u21a9 Static IP address assignment is available from version 0.9.3. \u21a9","title":" Station host name"},{"location":"api.html","text":"Include headers \u00b6 AutoConnect.h \u00b6 #include <AutoConnect.h> Defined macros \u00b6 They contain in AutoConnectDefs.h . #define AC_DEBUG // Monitor message output activation #define AC_DEBUG_PORT Serial // Default message output device #define AUTOCONNECT_AP_IP 0x01F4A8C0 // Default SoftAP IP #define AUTOCONNECT_AP_GW 0x01F4A8C0 // Default SoftAP Gateway IP #define AUTOCONNECT_AP_NM 0x00FFFFFF // Default subnet mask #define AUTOCONNECT_DNSPORT 53 // Default DNS port at captive portal #define AUTOCONNECT_HTTPPORT 80 // Default HTTP #define AUTOCONNECT_MENU_TITLE \"AutoConnect\" // Default AutoConnect menu title #define AUTOCONNECT_STARTUPTIME 10 // Default waiting time[s] for after reset #define AUTOCONNECT_URI \"/_ac\" // Default AutoConnect root path #define AUTOCONNECT_TIMEOUT 30000 // Default connection timeout[ms] #define AUTOCONNECT_CAPTIVEPORTAL_TIMEOUT 0 // Captive portal timeout value #define AUTOCONNECT_USE_JSON // Allow AutoConnect elements to be handled by JSON format Macros placement moved Source code placement of the above macros provided for user sketch changed from v0.9.7. The new code is in AutoConnectDefs.h . Constructors \u00b6 AutoConnect \u00b6 AutoConnect() AutoConnect default constructor. This entry internally allocates the ESP8266WebServer for ESP8266 or WebServer for ESP32 and is activated internally. For ESP8266 AutoConnect(ESP8266WebServer & webServer) For ESP32 AutoConnect(WebServer & webServer) Run the AutoConnect site using the externally ensured ESP8266WebServer for ESP8266 or WebServer for ESP32. The handleClient function of AutoConnect can include the response of the URI handler added by the user using the \" on \" function of ESP8266WebServer/WebServer. If ESP8266WebServer/WebServer is assigned internally by AutoConnect, the sketch can obtain that reference with the host function. Parameters webServer A reference of ESP8266WebServer or WebServer instance. Public member functions \u00b6 aux \u00b6 AutoConnectAux * aux( const String & uri) const Returns a pointer to AutoConnectAux with the URI specified by uri . If AutoConnectAux with that URI is not bound, it returns nullptr . Parameters uri A string of the URI. Return value A Pointer of the AutoConnectAux instance. begin \u00b6 bool begin() bool begin( const char * ssid, const char * passphrase) bool begin( const char * ssid, const char * passphrase, unsigned long timeout) Starts establishing the WiFi connection. The WiFi mode at this time is WIFI_STA. AutoConnect first invokes WiFi.begin . If the ssid and the passphrase are missing, its WiFi.begin has no SSID and Password. Regardless of the result, ESP8266WebServer/WebServer will start immediately after the first WiFi.begin . The captive portal will not be started if the connection has been established with first WiFi.begin . If the connection cannot establish, switch to WIFI_AP_STA mode and activate SoftAP. Then DNS server starts. Parameters ssid SSID to be connected. passphrase Password for connection. timeout A time out value in milliseconds for waiting connection. Return value true Connection established, AutoConnect service started with WIFI_STA mode. false Could not connected, Captive portal started with WIFI_AP_STA mode. config \u00b6 bool config(AutoConnectConfig & config) bool config( const char * ap, const char * password = nullptr ) Set SoftAP's WiFi configuration and static IP configuration. Parameters config Reference to AutoConnectConfig containing SoftAP's parameters and static IP parameters. ap SSID for SoftAP. The default value is esp8266ap for ESP8266, esp32ap for ESP32. password Password for SodtAP. The default value is 12345678 . Return value true Successfully configured. false Configuration parameter is invalid, some values out of range. end \u00b6 void end() Stops AutoConnect captive portal service. Release ESP8266WebServer/WebServer and DNSServer. Attention to end The end function releases the instance of ESP8266WebServer/WebServer and DNSServer. It can not process them after the end function. handleClient \u00b6 void handleClient() Process the AutoConnect menu interface. The handleClient() function of the ESP8266WebServer/WebServer hosted by AutoConnect is also called from within AutoConnect, and the client request handlers contained in the user sketch are also handled. handleRequest \u00b6 void handleRequest() Handling for the AutoConnect menu request. About used in combination with handleClient The handleRequest function is not supposed to use with AutoConnect::handleClient. It should be used with ESP8266WebServer::handleClient or WebServer::handleClient. home \u00b6 void home(String & uri) Put a user site's home URI. The URI specified by home is linked from \"HOME\" in the AutoConnect menu. Parameters uri A URI string of user site's home path. host \u00b6 For ESP8266 ESP8266WebServer & host() For ESP32 WebServer & host() Returns the reference of the ESP8266WebServer/WebServer which is allocated in AutoConnect automatically. Return value A reference of the ESP8266WebServer/WebServer. &reference is not a pointer A reference cannot be re-assigned, and must be assigned at initialization. It's like as bind as alias. ESP8266WebServer & server = portal.host(); server.handleClient(); or portal.host().handleClient(); join \u00b6 void join(AutoConnectAux & aux) void join(std :: vector < std :: reference_wrapper < AutoConnectAux >> aux) Join the AutoConnectAux object to AutoConnect. AutoConnectAux objects can be joined one by one, or joined altogether. The AutoConnectAux object joined by the join function can be handled from the AutoConnect menu. Parameters aux Reference to AutoConnectAux. It can be std::vector of std::reference_wrapper of AutoConnectAux with list initialization . load \u00b6 bool load( const String & aux) bool load( const __FlashStringHelper * aux) bool load(Stream & aux) Load JSON document of AutoConnectAux which contains AutoConnectElements. If there is a syntax error in the JSON document, false is returned. Parameters aux The input string to be loaded. Return value true The JSON document as AutoConnectAux successfully loaded. false Loading JSON document unsuccessful, probably syntax errors have occurred or insufficient memory. You can diagnose the cause of loading failure using the ArduinoJson Assistant . on \u00b6 bool on( const String & uri, const AuxHandlerFunctionT handler, AutoConnectExitOrder_t order = AC_EXIT_AHEAD) Register the handler function of the AutoConnectAux. Parameters uri A string of the URI assigned to the AutoConnectAux page. handler A function that behaves when a request to the AutoConnectAux page occurs. AuxHandlerFunctionT type is defined by the following declaration. String handler(AutoConnectAux&, PageArgument&) order Specifies when the handler is called with the following enumeration value. AC_EXIT_AHEAD : Called before AutoConnect generates the HTML of the page. You set the value of AutoConnectElements in the handler then its value will be displayed on the page. AC_EXIT_LATER : Called after AutoConnect generates the HTML of the page. You can append to HTML generated by AutoConnect. AC_EXIT_BOTH : Called even before generating HTML and after generated. It is not ESP8266WebServer::on, not WebServer::on for ESP32. This function effects to AutoConnectAux only. However, it coexists with that of ESP8266WebServer::on or WebServer::on of ESP32. onDetect \u00b6 void onDetect(DetectExit_ft fn) Register the function which will call from AutoConnect at the start of the captive portal. Parameters fn Function called at the captive portal start. An fn specifies the function called when the captive portal starts. Its prototype declaration is defined as \" DetectExit_ft \". typedef std :: function < bool (IPAddress softapIP) > DetectExit_ft Parameters softapIP An IP address of SoftAP for the captive portal. Retuen value true Continues captive portal handling. false Cancel the captive portal. AutoConnect::begin function will return with a false. onNotFound \u00b6 For ESP8266 void onNotFound(ESP8266WebServer :: THandlerFunction fn) For ESP32 void onNotFound(WebServer :: THandlerFunction fn) Register the handler function for undefined URL request detected. Parameters fn A function of the \"not found\" handler. where \u00b6 AutoConenctAux * where( void ) Returns a pointer to the AutoConnectAux object of the custom Web page that caused the request to that page. This function is available only for the AutoConnectAux object. It is invalid for HTTP requests from individual pages registered with the on handler of ESP8266WebServer/ESP32. In other words, this function only returns the last AutoConnecAux page called. Retuen value A pointer to the AutoConnectAux that caused the request the page.","title":"AutoConnect API"},{"location":"api.html#include-headers","text":"","title":" Include headers"},{"location":"api.html#autoconnecth","text":"#include <AutoConnect.h>","title":"AutoConnect.h"},{"location":"api.html#defined-macros","text":"They contain in AutoConnectDefs.h . #define AC_DEBUG // Monitor message output activation #define AC_DEBUG_PORT Serial // Default message output device #define AUTOCONNECT_AP_IP 0x01F4A8C0 // Default SoftAP IP #define AUTOCONNECT_AP_GW 0x01F4A8C0 // Default SoftAP Gateway IP #define AUTOCONNECT_AP_NM 0x00FFFFFF // Default subnet mask #define AUTOCONNECT_DNSPORT 53 // Default DNS port at captive portal #define AUTOCONNECT_HTTPPORT 80 // Default HTTP #define AUTOCONNECT_MENU_TITLE \"AutoConnect\" // Default AutoConnect menu title #define AUTOCONNECT_STARTUPTIME 10 // Default waiting time[s] for after reset #define AUTOCONNECT_URI \"/_ac\" // Default AutoConnect root path #define AUTOCONNECT_TIMEOUT 30000 // Default connection timeout[ms] #define AUTOCONNECT_CAPTIVEPORTAL_TIMEOUT 0 // Captive portal timeout value #define AUTOCONNECT_USE_JSON // Allow AutoConnect elements to be handled by JSON format Macros placement moved Source code placement of the above macros provided for user sketch changed from v0.9.7. The new code is in AutoConnectDefs.h .","title":" Defined macros"},{"location":"api.html#constructors","text":"","title":" Constructors"},{"location":"api.html#autoconnect","text":"AutoConnect() AutoConnect default constructor. This entry internally allocates the ESP8266WebServer for ESP8266 or WebServer for ESP32 and is activated internally. For ESP8266 AutoConnect(ESP8266WebServer & webServer) For ESP32 AutoConnect(WebServer & webServer) Run the AutoConnect site using the externally ensured ESP8266WebServer for ESP8266 or WebServer for ESP32. The handleClient function of AutoConnect can include the response of the URI handler added by the user using the \" on \" function of ESP8266WebServer/WebServer. If ESP8266WebServer/WebServer is assigned internally by AutoConnect, the sketch can obtain that reference with the host function. Parameters webServer A reference of ESP8266WebServer or WebServer instance.","title":"AutoConnect"},{"location":"api.html#public-member-functions","text":"","title":" Public member functions"},{"location":"api.html#aux","text":"AutoConnectAux * aux( const String & uri) const Returns a pointer to AutoConnectAux with the URI specified by uri . If AutoConnectAux with that URI is not bound, it returns nullptr . Parameters uri A string of the URI. Return value A Pointer of the AutoConnectAux instance.","title":" aux"},{"location":"api.html#begin","text":"bool begin() bool begin( const char * ssid, const char * passphrase) bool begin( const char * ssid, const char * passphrase, unsigned long timeout) Starts establishing the WiFi connection. The WiFi mode at this time is WIFI_STA. AutoConnect first invokes WiFi.begin . If the ssid and the passphrase are missing, its WiFi.begin has no SSID and Password. Regardless of the result, ESP8266WebServer/WebServer will start immediately after the first WiFi.begin . The captive portal will not be started if the connection has been established with first WiFi.begin . If the connection cannot establish, switch to WIFI_AP_STA mode and activate SoftAP. Then DNS server starts. Parameters ssid SSID to be connected. passphrase Password for connection. timeout A time out value in milliseconds for waiting connection. Return value true Connection established, AutoConnect service started with WIFI_STA mode. false Could not connected, Captive portal started with WIFI_AP_STA mode.","title":" begin"},{"location":"api.html#config","text":"bool config(AutoConnectConfig & config) bool config( const char * ap, const char * password = nullptr ) Set SoftAP's WiFi configuration and static IP configuration. Parameters config Reference to AutoConnectConfig containing SoftAP's parameters and static IP parameters. ap SSID for SoftAP. The default value is esp8266ap for ESP8266, esp32ap for ESP32. password Password for SodtAP. The default value is 12345678 . Return value true Successfully configured. false Configuration parameter is invalid, some values out of range.","title":" config"},{"location":"api.html#end","text":"void end() Stops AutoConnect captive portal service. Release ESP8266WebServer/WebServer and DNSServer. Attention to end The end function releases the instance of ESP8266WebServer/WebServer and DNSServer. It can not process them after the end function.","title":" end"},{"location":"api.html#handleclient","text":"void handleClient() Process the AutoConnect menu interface. The handleClient() function of the ESP8266WebServer/WebServer hosted by AutoConnect is also called from within AutoConnect, and the client request handlers contained in the user sketch are also handled.","title":" handleClient"},{"location":"api.html#handlerequest","text":"void handleRequest() Handling for the AutoConnect menu request. About used in combination with handleClient The handleRequest function is not supposed to use with AutoConnect::handleClient. It should be used with ESP8266WebServer::handleClient or WebServer::handleClient.","title":" handleRequest"},{"location":"api.html#home","text":"void home(String & uri) Put a user site's home URI. The URI specified by home is linked from \"HOME\" in the AutoConnect menu. Parameters uri A URI string of user site's home path.","title":" home"},{"location":"api.html#host","text":"For ESP8266 ESP8266WebServer & host() For ESP32 WebServer & host() Returns the reference of the ESP8266WebServer/WebServer which is allocated in AutoConnect automatically. Return value A reference of the ESP8266WebServer/WebServer. &reference is not a pointer A reference cannot be re-assigned, and must be assigned at initialization. It's like as bind as alias. ESP8266WebServer & server = portal.host(); server.handleClient(); or portal.host().handleClient();","title":" host"},{"location":"api.html#join","text":"void join(AutoConnectAux & aux) void join(std :: vector < std :: reference_wrapper < AutoConnectAux >> aux) Join the AutoConnectAux object to AutoConnect. AutoConnectAux objects can be joined one by one, or joined altogether. The AutoConnectAux object joined by the join function can be handled from the AutoConnect menu. Parameters aux Reference to AutoConnectAux. It can be std::vector of std::reference_wrapper of AutoConnectAux with list initialization .","title":" join"},{"location":"api.html#load","text":"bool load( const String & aux) bool load( const __FlashStringHelper * aux) bool load(Stream & aux) Load JSON document of AutoConnectAux which contains AutoConnectElements. If there is a syntax error in the JSON document, false is returned. Parameters aux The input string to be loaded. Return value true The JSON document as AutoConnectAux successfully loaded. false Loading JSON document unsuccessful, probably syntax errors have occurred or insufficient memory. You can diagnose the cause of loading failure using the ArduinoJson Assistant .","title":" load"},{"location":"api.html#on","text":"bool on( const String & uri, const AuxHandlerFunctionT handler, AutoConnectExitOrder_t order = AC_EXIT_AHEAD) Register the handler function of the AutoConnectAux. Parameters uri A string of the URI assigned to the AutoConnectAux page. handler A function that behaves when a request to the AutoConnectAux page occurs. AuxHandlerFunctionT type is defined by the following declaration. String handler(AutoConnectAux&, PageArgument&) order Specifies when the handler is called with the following enumeration value. AC_EXIT_AHEAD : Called before AutoConnect generates the HTML of the page. You set the value of AutoConnectElements in the handler then its value will be displayed on the page. AC_EXIT_LATER : Called after AutoConnect generates the HTML of the page. You can append to HTML generated by AutoConnect. AC_EXIT_BOTH : Called even before generating HTML and after generated. It is not ESP8266WebServer::on, not WebServer::on for ESP32. This function effects to AutoConnectAux only. However, it coexists with that of ESP8266WebServer::on or WebServer::on of ESP32.","title":" on"},{"location":"api.html#ondetect","text":"void onDetect(DetectExit_ft fn) Register the function which will call from AutoConnect at the start of the captive portal. Parameters fn Function called at the captive portal start. An fn specifies the function called when the captive portal starts. Its prototype declaration is defined as \" DetectExit_ft \". typedef std :: function < bool (IPAddress softapIP) > DetectExit_ft Parameters softapIP An IP address of SoftAP for the captive portal. Retuen value true Continues captive portal handling. false Cancel the captive portal. AutoConnect::begin function will return with a false.","title":" onDetect"},{"location":"api.html#onnotfound","text":"For ESP8266 void onNotFound(ESP8266WebServer :: THandlerFunction fn) For ESP32 void onNotFound(WebServer :: THandlerFunction fn) Register the handler function for undefined URL request detected. Parameters fn A function of the \"not found\" handler.","title":" onNotFound"},{"location":"api.html#where","text":"AutoConenctAux * where( void ) Returns a pointer to the AutoConnectAux object of the custom Web page that caused the request to that page. This function is available only for the AutoConnectAux object. It is invalid for HTTP requests from individual pages registered with the on handler of ESP8266WebServer/ESP32. In other words, this function only returns the last AutoConnecAux page called. Retuen value A pointer to the AutoConnectAux that caused the request the page.","title":" where"},{"location":"apiaux.html","text":"Constructor \u00b6 AutoConnectAux \u00b6 AutoConnectAux( const String & uri = String( \"\" ), const String & title = String( \"\" ), const bool menu = true, const AutoConnectElementVT addons = AutoConnectElementVT()) Parameters uri URI of this custom Web Page. title Page title of this custom Web page. It will appear on the auto connection menu and at the top of that page. menu Specifies whether to display this page on menu. addons Reference to AutoConnectElement collection. Public member functions \u00b6 add \u00b6 void add(AutoConnectElement & addon) void add(AutoConnectElementVT addons) Add an element to the AutoConnectAux. An added element is displayed on the custom Web page invoked from the AutoConnect menu. Parameters addon Reference of AutoConnectElements. Specifies one of the AutoConnectElements classes. addons An array list of reference of AutoConnectElements. An list initialization of the std::vector can be used for the addons parameter cause the actual definition of type AutoConnectElementVT is std::vector<std::reference_wrapper<AutoConnectElement>> . getElement \u00b6 T & getElement < T > ( const String & name) AutoConnectElement * getElement( const String & name) Get a registered AutoConnectElement as specified name. If T is specified as an actual type of AutoConnectElements, it returns a reference to that instance. Parameters T Actual type name of AutoConnectElements as AutoConnectButton , AutoConnectCheckbox , AutoConnectElement , AutoConnectInput , AutoConnectRadio , AutoConnectSelect , AutoConnectSubmit , AutoConnectText . name Name of the AutoConnectElements to be retrieved. Return value A reference of the AutoConnectElements. If a type is not specified returns a pointer. getElements \u00b6 AutoConnectElementVT & getElements( void ) Get vector of reference of all elements. Return value A reference to std::vector of reference to AutoConnecctElements. The getElements returns a reference to std::vector of reference to AutoConnecctElements. This function is provided to handle AutoConnectElemets owned by AutoConnectAux in bulk, and you can use each method of std::vector for a return value. // An example of getting type and name of all AutoConnectElements registered in AutoConnectAux. AutoConnectAux aux; // some code here... AutoConnectElementVt & elements = aux.getElements(); for (AutoConnectElement & elm : elements) { Serial.printf( \"name<%s> as type %d \\n \" , elm.name.c_str(), ( int )elm.typeOf()); } load \u00b6 bool load( const String & in) bool load( const __FlashStringHelper * in) bool load(Stream & in) Load all AutoConnectElements elements from JSON document into AutoConnectAux as custom Web pages. The JSON document specified by the load function must be the document structure of AutoConnectAux. Its JSON document can describe multiple pages as an array. Parameters in Specifies the JSON document to be load. The load function can input the following objects. String : Read-only String PROGMEM : Character array contained in the flash Stream : An entity that inherits stream class, generally SPIFFS or SD. Return value true JSON document as the custom Web pages successfully loaded. false JSON document loading failed. Load multiple custom Web pages separately Multiple custom Web pages can be loaded at once with JSON as an array. But it will consume a lot of memory. By loading a JSON document by page as much as possible, you can reduce memory consumption. loadElement \u00b6 bool loadElement( const String & in, const String & name = String( \"\" )) bool loadElement( const __FlashStringHelper * in, const String & name = String( \"\" )) bool loadElement(Stream & in, const String & name = String( \"\" )) Load specified element from JSON document into AutoConnectAux. The JSON document specified by the loadElement function must be the AutoConnectElement document structure . When loading from a JSON document that describes multiple elements, its description must be an array syntax. Parameters in Specifies the JSON document to be load. The load function can input the following objects. String : Read-only String PROGMEM : Character array contained in the flash Stream : An entity that inherits stream class, generally SPIFFS or SD. name Specifies the name to be load. If the name is not specified, the loadElement function will load all elements contained in the JSON document. Return value true Specified AutoConnectElements successfully loaded. false JSON document loading failed. Maybe it is an array Please note that the JSON document that is the input for loadElement is an array syntax of AutoConnectElements when there are multiple elements. For example, the following JSON document has a syntax error: { \"name\" : \"Caption\" , \"type\" : \"ACText\" , \"value\" : \"Hello, world\" } , { \"name\" : \"Server\" , \"type\" : \"ACInput\" , \"label\" : \"Server address\" } The outermost [ , ] is missing. menu \u00b6 void menu( const bool post) Set or reset the display as menu item for this AutoConnectAux. This function programmatically manipulates the menu parameter of the AutoConenctAux constructor . Parameters true Show on the menu. false Hidden on the menu. on \u00b6 void on( const AuxHandlerFunctionT handler, const AutoConnectExitOrder_t order = AC_EXIT_AHEAD) Register the handler function of the AutoConnectAux. Parameters handler A function that behaves when a request to the AutoConnectAux page occurs. AuxHandlerFunctionT type is defined by the following declaration. String handler(AutoConnectAux&, PageArgument&) order Specifies when the handler is called with the following enumeration value. AC_EXIT_AHEAD : Called before AutoConnect generates the HTML of the page. You set the value of AutoConnectElements in the handler then its value will be displayed on the page. AC_EXIT_LATER : Called after AutoConnect generates the HTML of the page. You can append to HTML generated by AutoConnect. AC_EXIT_BOTH : Called even before generating HTML and after generated. release \u00b6 bool release( const String & name) Release a specified AutoConnectElement from AutoConenctAux. The release function is provided to dynamically change the structure of the custom Web pages with the sketch. By combining the release function and the add function or the loadElement function, the sketch can change the style of the custom Web page according to its behavior. Parameters name Specifies the name of AutoConnectElements to be released. Return value true The AutoConnectElement successfully released. false The AutoConnectElement can not be released. saveElement \u00b6 size_t saveElement(Stream & out, std :: vector < String > const & names = {}) Write elements of AutoConnectAux to the stream. The saveElement function outputs the specified AutoConenctElements as a JSON document using the prettyPrintTo function of the ArduinoJson library. Parameters out Output stream to be output. SPIFFS, SD also Serial can be specified generally. names The array of the name of AutoConnectElements to be output. If the names parameter is not specified, all AutoConnectElements registered in AutoConnectAux are output. Return value The number of bytes written. The output format is pretty The saveElement function outputs a prettified JSON document. setElementValue \u00b6 bool setElementValue( const String & name, const String value) bool setElementValue( const String & name, std :: vector < String > const & values) Sets the value of the specified AutoConnectElement. If values \u200b\u200bis specified as a std::vector of String, the element that can set the values is the AutoConnectRadio or the AutoConnectSelect . Parameters name Specifies the name of the AutoConnectElements that you want to set the value. value Specifies the value to be set. values Specifies a reference of a std::vector of String. It contains the values of the AutoConnectRadio or the AutoConnectSelect. Return value true The value has been set. false AutoConnectElements with the specified name are not registered. Or the type of the value is not consistent with the specified AutoConnectElements. You can directly access the value member variable. If you are gripping with the sketch to the AutoConnectElements of the target that sets the value, you can access the value member variable directly. The following sketch code has the same effect. AutoConnectAux aux; // ... Griping the AutoConnectText here. aux.setElementValue( \"TEXT_FIELD\" , \"New value\" ); AutoConnectAux aux; // ... Griping the AutoConnectText here. AutoConnectText & text = aux.getElement < AutoConnectText > ( \"TEXT_FIELD\" ); text.value = \"New value\" ; The difference between the setElementValue and the value access with the getElement is the certainty of the registration state for the element. The getElement returns an empty object if the element is not registered then a sketch assigns the value to it. May occur unexpected results and crashes. You should use the setElementValue if its registration is unsettled. setTitle \u00b6 void setTitle( const String & title) Set the title string of the custom Web page. This title will be displayed as the menu title of the custom Web page. Parameter title Title string to be display. Not the menu title The setTitle function is not set for the AutoConnect menu title. The effect of this function is that custom Web page only. To change the AutoConnect menu title use AutoConnectConfig::title .","title":"AutoConnectAux API"},{"location":"apiaux.html#constructor","text":"","title":" Constructor"},{"location":"apiaux.html#autoconnectaux","text":"AutoConnectAux( const String & uri = String( \"\" ), const String & title = String( \"\" ), const bool menu = true, const AutoConnectElementVT addons = AutoConnectElementVT()) Parameters uri URI of this custom Web Page. title Page title of this custom Web page. It will appear on the auto connection menu and at the top of that page. menu Specifies whether to display this page on menu. addons Reference to AutoConnectElement collection.","title":"AutoConnectAux"},{"location":"apiaux.html#public-member-functions","text":"","title":" Public member functions"},{"location":"apiaux.html#add","text":"void add(AutoConnectElement & addon) void add(AutoConnectElementVT addons) Add an element to the AutoConnectAux. An added element is displayed on the custom Web page invoked from the AutoConnect menu. Parameters addon Reference of AutoConnectElements. Specifies one of the AutoConnectElements classes. addons An array list of reference of AutoConnectElements. An list initialization of the std::vector can be used for the addons parameter cause the actual definition of type AutoConnectElementVT is std::vector<std::reference_wrapper<AutoConnectElement>> .","title":" add"},{"location":"apiaux.html#getelement","text":"T & getElement < T > ( const String & name) AutoConnectElement * getElement( const String & name) Get a registered AutoConnectElement as specified name. If T is specified as an actual type of AutoConnectElements, it returns a reference to that instance. Parameters T Actual type name of AutoConnectElements as AutoConnectButton , AutoConnectCheckbox , AutoConnectElement , AutoConnectInput , AutoConnectRadio , AutoConnectSelect , AutoConnectSubmit , AutoConnectText . name Name of the AutoConnectElements to be retrieved. Return value A reference of the AutoConnectElements. If a type is not specified returns a pointer.","title":" getElement"},{"location":"apiaux.html#getelements","text":"AutoConnectElementVT & getElements( void ) Get vector of reference of all elements. Return value A reference to std::vector of reference to AutoConnecctElements. The getElements returns a reference to std::vector of reference to AutoConnecctElements. This function is provided to handle AutoConnectElemets owned by AutoConnectAux in bulk, and you can use each method of std::vector for a return value. // An example of getting type and name of all AutoConnectElements registered in AutoConnectAux. AutoConnectAux aux; // some code here... AutoConnectElementVt & elements = aux.getElements(); for (AutoConnectElement & elm : elements) { Serial.printf( \"name<%s> as type %d \\n \" , elm.name.c_str(), ( int )elm.typeOf()); }","title":" getElements"},{"location":"apiaux.html#load","text":"bool load( const String & in) bool load( const __FlashStringHelper * in) bool load(Stream & in) Load all AutoConnectElements elements from JSON document into AutoConnectAux as custom Web pages. The JSON document specified by the load function must be the document structure of AutoConnectAux. Its JSON document can describe multiple pages as an array. Parameters in Specifies the JSON document to be load. The load function can input the following objects. String : Read-only String PROGMEM : Character array contained in the flash Stream : An entity that inherits stream class, generally SPIFFS or SD. Return value true JSON document as the custom Web pages successfully loaded. false JSON document loading failed. Load multiple custom Web pages separately Multiple custom Web pages can be loaded at once with JSON as an array. But it will consume a lot of memory. By loading a JSON document by page as much as possible, you can reduce memory consumption.","title":" load"},{"location":"apiaux.html#loadelement","text":"bool loadElement( const String & in, const String & name = String( \"\" )) bool loadElement( const __FlashStringHelper * in, const String & name = String( \"\" )) bool loadElement(Stream & in, const String & name = String( \"\" )) Load specified element from JSON document into AutoConnectAux. The JSON document specified by the loadElement function must be the AutoConnectElement document structure . When loading from a JSON document that describes multiple elements, its description must be an array syntax. Parameters in Specifies the JSON document to be load. The load function can input the following objects. String : Read-only String PROGMEM : Character array contained in the flash Stream : An entity that inherits stream class, generally SPIFFS or SD. name Specifies the name to be load. If the name is not specified, the loadElement function will load all elements contained in the JSON document. Return value true Specified AutoConnectElements successfully loaded. false JSON document loading failed. Maybe it is an array Please note that the JSON document that is the input for loadElement is an array syntax of AutoConnectElements when there are multiple elements. For example, the following JSON document has a syntax error: { \"name\" : \"Caption\" , \"type\" : \"ACText\" , \"value\" : \"Hello, world\" } , { \"name\" : \"Server\" , \"type\" : \"ACInput\" , \"label\" : \"Server address\" } The outermost [ , ] is missing.","title":" loadElement"},{"location":"apiaux.html#menu","text":"void menu( const bool post) Set or reset the display as menu item for this AutoConnectAux. This function programmatically manipulates the menu parameter of the AutoConenctAux constructor . Parameters true Show on the menu. false Hidden on the menu.","title":" menu"},{"location":"apiaux.html#on","text":"void on( const AuxHandlerFunctionT handler, const AutoConnectExitOrder_t order = AC_EXIT_AHEAD) Register the handler function of the AutoConnectAux. Parameters handler A function that behaves when a request to the AutoConnectAux page occurs. AuxHandlerFunctionT type is defined by the following declaration. String handler(AutoConnectAux&, PageArgument&) order Specifies when the handler is called with the following enumeration value. AC_EXIT_AHEAD : Called before AutoConnect generates the HTML of the page. You set the value of AutoConnectElements in the handler then its value will be displayed on the page. AC_EXIT_LATER : Called after AutoConnect generates the HTML of the page. You can append to HTML generated by AutoConnect. AC_EXIT_BOTH : Called even before generating HTML and after generated.","title":" on"},{"location":"apiaux.html#release","text":"bool release( const String & name) Release a specified AutoConnectElement from AutoConenctAux. The release function is provided to dynamically change the structure of the custom Web pages with the sketch. By combining the release function and the add function or the loadElement function, the sketch can change the style of the custom Web page according to its behavior. Parameters name Specifies the name of AutoConnectElements to be released. Return value true The AutoConnectElement successfully released. false The AutoConnectElement can not be released.","title":" release"},{"location":"apiaux.html#saveelement","text":"size_t saveElement(Stream & out, std :: vector < String > const & names = {}) Write elements of AutoConnectAux to the stream. The saveElement function outputs the specified AutoConenctElements as a JSON document using the prettyPrintTo function of the ArduinoJson library. Parameters out Output stream to be output. SPIFFS, SD also Serial can be specified generally. names The array of the name of AutoConnectElements to be output. If the names parameter is not specified, all AutoConnectElements registered in AutoConnectAux are output. Return value The number of bytes written. The output format is pretty The saveElement function outputs a prettified JSON document.","title":" saveElement"},{"location":"apiaux.html#setelementvalue","text":"bool setElementValue( const String & name, const String value) bool setElementValue( const String & name, std :: vector < String > const & values) Sets the value of the specified AutoConnectElement. If values \u200b\u200bis specified as a std::vector of String, the element that can set the values is the AutoConnectRadio or the AutoConnectSelect . Parameters name Specifies the name of the AutoConnectElements that you want to set the value. value Specifies the value to be set. values Specifies a reference of a std::vector of String. It contains the values of the AutoConnectRadio or the AutoConnectSelect. Return value true The value has been set. false AutoConnectElements with the specified name are not registered. Or the type of the value is not consistent with the specified AutoConnectElements. You can directly access the value member variable. If you are gripping with the sketch to the AutoConnectElements of the target that sets the value, you can access the value member variable directly. The following sketch code has the same effect. AutoConnectAux aux; // ... Griping the AutoConnectText here. aux.setElementValue( \"TEXT_FIELD\" , \"New value\" ); AutoConnectAux aux; // ... Griping the AutoConnectText here. AutoConnectText & text = aux.getElement < AutoConnectText > ( \"TEXT_FIELD\" ); text.value = \"New value\" ; The difference between the setElementValue and the value access with the getElement is the certainty of the registration state for the element. The getElement returns an empty object if the element is not registered then a sketch assigns the value to it. May occur unexpected results and crashes. You should use the setElementValue if its registration is unsettled.","title":" setElementValue"},{"location":"apiaux.html#settitle","text":"void setTitle( const String & title) Set the title string of the custom Web page. This title will be displayed as the menu title of the custom Web page. Parameter title Title string to be display. Not the menu title The setTitle function is not set for the AutoConnect menu title. The effect of this function is that custom Web page only. To change the AutoConnect menu title use AutoConnectConfig::title .","title":" setTitle"},{"location":"apiconfig.html","text":"Constructor \u00b6 AutoConnectConfig \u00b6 AutoConnectConfig() AutoConnectConfig( const char * ap, const char * password) AutoConnectConfig( const char * ap, const char * password, const unsigned long timeout) AutoConnectConfig( const char * ap, const char * password, const unsigned long timeout, const uint8_t channel) Parameters ap SSID for SoftAP. The length should be up to 31. The default value is esp8266ap for ESP8266, esp32ap for ESP32. password Password for SodtAP. The length should be from 8 to up to 63. The default value is 12345678 . timeout The timeout value of the captive portal in [ms] units. The default value is 0. channel The channel number of WIFi when SoftAP starts. The default values is 1. Public member variables \u00b6 apid \u00b6 SoftAP's SSID. Type String apip \u00b6 Sets IP address for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this. Type IPAddress The default value is 192.168.244.1 autoReconnect \u00b6 Automatically will try to reconnect with the past established access point (BSSID) when the current configured SSID in ESP8266/ESP32 could not be connected. By enabling this option, AutoConnect::begin() function will attempt to reconnect to a known access point using credentials stored in the EEPROM, even if the connection failed by current SSID. If the connection fails, starts the captive portal in SoftAP + STA mode. Type bool Value true Reconnect automatically. false Starts Captive Portal in SoftAP + STA mode without trying to reconnect. This is the default. When the autoReconnect option is enabled, an automatic connection will behave if the following conditions are satisfied. Invokes AutoConnect::begin without user name and password parameter as begin() . If one of the saved BSSIDs (not the SSID) of the credentials matches the BSSID detected by the network scan. autoReset \u00b6 Reset ESP8266 module automatically after WLAN disconnected. Type bool Value true Reset after WiFi disconnected automatically. false No reset. autoRise \u00b6 Captive portal activation switch. False for disabling the captive portal. It prevents starting the captive portal even if the connection at the first WiFi.begin fails. Type bool Value true Enable the captive portal. This is the default. false Disable the captive portal. autoSave \u00b6 The credential saved automatically at the connection establishment. Type AC_SAVECREDENTIAL_t Value AC_SAVECREDENTIAL_AUTO The credential saved automatically. This is the default. AC_SAVECREDENTIAL_NEVER The credential no saved. bootUri \u00b6 Specify the location to be redirected after module reset in the AutoConnect menu. It is given as an enumeration value of AC_ONBOOTURI_t indicating either the AutoConnect root path or the user screen home path. Type AC_ONBOOTURI_t Value AC_ONBOOTURI_ROOT Resetting the module redirects it to the AutoConnect root path. The root path is assumed to be AUTOCONNECT_URI defined in AutoConnectDefs.h. AC_ONBOOTURI_HOME It is redirected to the uri specified by AutoConnectConfig::homeUri . boundaryOffset \u00b6 Sets the offset address of the credential storage area for EEPROM. This value must be between greater than 4 and less than flash sector size. (4096 by SDK) The default value is 0. Type uint16_t It will conflict with user data. If the sketch leaves this offset at zero, it will conflict the storage area of credentials with the user sketch owned data. It needs to use the behind of credential area. channel \u00b6 The channel number of WIFi when SoftAP starts. Type uint8_t Value 1 ~ 14. The default value is 1. How do I choose Channel Espressif Systems had announced the application note about Wi-Fi channel selection. dns1 \u00b6 Set primary DNS server address when using static IP address. Type IPAddress dns2 \u00b6 Set secondary DNS server address when using static IP address. Type IPAddress gateway \u00b6 Sets gateway address for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this. Type IPAddress The default value is 192.168.244.1 hidden \u00b6 Sets SoftAP to hidden SSID. Type uint8_t Value 0 SSID will be appeared. This is the default. 1 SSID will be hidden. homeUri \u00b6 Sets the home path of user sketch. This path would be linked from 'HOME' in the AutoConnect menu. The default for homeUri is \"/\". Type String hostName \u00b6 Sets the station host name of ESP8266/ESP32. Type String immediateStart \u00b6 Disable the first WiFi.begin() and start the captive portal. If this option is enabled, the module will be in AP_STA mode and the captive portal will be activated regardless of AutoConnectConfig::autoRise specification. Type bool Value true Start the captive portal with AutoConnect::begin . false Enable the first WiFi.begin() and it will start captive portal when connection failed. This is default. netmask \u00b6 Sets subnet mask for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this. Type IPAddress The default value is 255.255.255.0 portalTimeout \u00b6 Specify the timeout value of the captive portal in [ms] units. It is valid when the station is not connected and does not time out if the station is connected to the ESP module in SoftAP mode (ie Attempting WiFi connection with the portal function). If 0, the captive portal will not be timed-out. Type unsigned long Captive portal timeout value. The default value is 0. psk \u00b6 Sets password for SoftAP. The length should be from 8 to up to 63. The default value is 12345678 . Type String retainPortal \u00b6 Specify whether to continue the portal function even if the captive portal timed out. If the true, when a timeout occurs, the AutoConnect::begin function is exited with returns false, but the portal facility remains alive. So SoftAP remains alive and you can invoke AutoConnect while continuing sketch execution. The default is false. Type bool Value true Continue the portal function even if the captive portal times out. The STA + SoftAP mode of the ESP module continues and accepts the connection request to the AP. false When the captive portal times out, STA + SoftAP mode of the ESP module is stopped. This is default. Connection request after timed-out With the retainPortal , even if AutoConnect::begin in the setup() is timed out, you can execute the sketch and the portal function as a WiFi connection attempt by calling AutoConnect::handleClient in the loop(). staip \u00b6 Set a static IP address. The IP will behave with STA mode. Type IPAddress staGateway \u00b6 Set the gateway address when using static IP address. Type IPAddress staNetmask \u00b6 Set the subnetmask when using static IP address. Type IPAddress title \u00b6 Set the menu title. Type String AutoConnectConfig example \u00b6 AutoConenct Portal; AutoConenctConfig Config ( \"\" , \"passpass\" ); // SoftAp name is determined at runtime Config.apid = ESP.hostname(); // Retrieve host name to SotAp identification Config.apip = IPAddress( 192 , 168 , 10 , 101 ); // Sets SoftAP IP address Config.gateway = IPAddress( 192 , 168 , 10 , 1 ); // Sets WLAN router IP address Config.netmask = IPAddress( 255 , 255 , 255 , 0 ); // Sets WLAN scope Config.autoReconnect = true; // Enable auto-reconnect Config.autoSave = AC_SAVECREDENTIAL_NEVER; // No save credential Config.boundaryOffet = 64 ; // Reserve 64 bytes for the user data in EEPROM. Config.portalTimeout = 60000 ; // Sets timeout value for the captive portal Config.retainPortal = true; // Retains the portal function after timed-out Config.homeUri = \"/index.html\" ; // Sets home path of the sketch application Config.title = \"My menu\" ; // Customize the menu title Config.staip = IPAddress( 192 , 168 , 10 , 10 ); // Sets static IP Config.staGateway = IPAddress( 192 , 168 , 10 , 1 ); // Sets WiFi router address Config.staNetmask = IPAddress( 255 , 255 , 255 , 0 ); // Sets WLAN scope Config.dns1 = IPAddress( 192 , 168 , 10 , 1 ); // Sets primary DNS address Portal.config(Config); // Configure AutoConnect Portal.begin(); // Starts and behaves captive portal","title":"AutoConnectConfig API"},{"location":"apiconfig.html#constructor","text":"","title":" Constructor"},{"location":"apiconfig.html#autoconnectconfig","text":"AutoConnectConfig() AutoConnectConfig( const char * ap, const char * password) AutoConnectConfig( const char * ap, const char * password, const unsigned long timeout) AutoConnectConfig( const char * ap, const char * password, const unsigned long timeout, const uint8_t channel) Parameters ap SSID for SoftAP. The length should be up to 31. The default value is esp8266ap for ESP8266, esp32ap for ESP32. password Password for SodtAP. The length should be from 8 to up to 63. The default value is 12345678 . timeout The timeout value of the captive portal in [ms] units. The default value is 0. channel The channel number of WIFi when SoftAP starts. The default values is 1.","title":"AutoConnectConfig"},{"location":"apiconfig.html#public-member-variables","text":"","title":" Public member variables"},{"location":"apiconfig.html#apid","text":"SoftAP's SSID. Type String","title":" apid"},{"location":"apiconfig.html#apip","text":"Sets IP address for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this. Type IPAddress The default value is 192.168.244.1","title":" apip"},{"location":"apiconfig.html#autoreconnect","text":"Automatically will try to reconnect with the past established access point (BSSID) when the current configured SSID in ESP8266/ESP32 could not be connected. By enabling this option, AutoConnect::begin() function will attempt to reconnect to a known access point using credentials stored in the EEPROM, even if the connection failed by current SSID. If the connection fails, starts the captive portal in SoftAP + STA mode. Type bool Value true Reconnect automatically. false Starts Captive Portal in SoftAP + STA mode without trying to reconnect. This is the default. When the autoReconnect option is enabled, an automatic connection will behave if the following conditions are satisfied. Invokes AutoConnect::begin without user name and password parameter as begin() . If one of the saved BSSIDs (not the SSID) of the credentials matches the BSSID detected by the network scan.","title":" autoReconnect"},{"location":"apiconfig.html#autoreset","text":"Reset ESP8266 module automatically after WLAN disconnected. Type bool Value true Reset after WiFi disconnected automatically. false No reset.","title":" autoReset"},{"location":"apiconfig.html#autorise","text":"Captive portal activation switch. False for disabling the captive portal. It prevents starting the captive portal even if the connection at the first WiFi.begin fails. Type bool Value true Enable the captive portal. This is the default. false Disable the captive portal.","title":" autoRise"},{"location":"apiconfig.html#autosave","text":"The credential saved automatically at the connection establishment. Type AC_SAVECREDENTIAL_t Value AC_SAVECREDENTIAL_AUTO The credential saved automatically. This is the default. AC_SAVECREDENTIAL_NEVER The credential no saved.","title":" autoSave"},{"location":"apiconfig.html#booturi","text":"Specify the location to be redirected after module reset in the AutoConnect menu. It is given as an enumeration value of AC_ONBOOTURI_t indicating either the AutoConnect root path or the user screen home path. Type AC_ONBOOTURI_t Value AC_ONBOOTURI_ROOT Resetting the module redirects it to the AutoConnect root path. The root path is assumed to be AUTOCONNECT_URI defined in AutoConnectDefs.h. AC_ONBOOTURI_HOME It is redirected to the uri specified by AutoConnectConfig::homeUri .","title":" bootUri"},{"location":"apiconfig.html#boundaryoffset","text":"Sets the offset address of the credential storage area for EEPROM. This value must be between greater than 4 and less than flash sector size. (4096 by SDK) The default value is 0. Type uint16_t It will conflict with user data. If the sketch leaves this offset at zero, it will conflict the storage area of credentials with the user sketch owned data. It needs to use the behind of credential area.","title":" boundaryOffset"},{"location":"apiconfig.html#channel","text":"The channel number of WIFi when SoftAP starts. Type uint8_t Value 1 ~ 14. The default value is 1. How do I choose Channel Espressif Systems had announced the application note about Wi-Fi channel selection.","title":" channel"},{"location":"apiconfig.html#dns1","text":"Set primary DNS server address when using static IP address. Type IPAddress","title":" dns1"},{"location":"apiconfig.html#dns2","text":"Set secondary DNS server address when using static IP address. Type IPAddress","title":" dns2"},{"location":"apiconfig.html#gateway","text":"Sets gateway address for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this. Type IPAddress The default value is 192.168.244.1","title":" gateway"},{"location":"apiconfig.html#hidden","text":"Sets SoftAP to hidden SSID. Type uint8_t Value 0 SSID will be appeared. This is the default. 1 SSID will be hidden.","title":" hidden"},{"location":"apiconfig.html#homeuri","text":"Sets the home path of user sketch. This path would be linked from 'HOME' in the AutoConnect menu. The default for homeUri is \"/\". Type String","title":" homeUri"},{"location":"apiconfig.html#hostname","text":"Sets the station host name of ESP8266/ESP32. Type String","title":" hostName"},{"location":"apiconfig.html#immediatestart","text":"Disable the first WiFi.begin() and start the captive portal. If this option is enabled, the module will be in AP_STA mode and the captive portal will be activated regardless of AutoConnectConfig::autoRise specification. Type bool Value true Start the captive portal with AutoConnect::begin . false Enable the first WiFi.begin() and it will start captive portal when connection failed. This is default.","title":" immediateStart"},{"location":"apiconfig.html#netmask","text":"Sets subnet mask for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this. Type IPAddress The default value is 255.255.255.0","title":" netmask"},{"location":"apiconfig.html#portaltimeout","text":"Specify the timeout value of the captive portal in [ms] units. It is valid when the station is not connected and does not time out if the station is connected to the ESP module in SoftAP mode (ie Attempting WiFi connection with the portal function). If 0, the captive portal will not be timed-out. Type unsigned long Captive portal timeout value. The default value is 0.","title":" portalTimeout"},{"location":"apiconfig.html#psk","text":"Sets password for SoftAP. The length should be from 8 to up to 63. The default value is 12345678 . Type String","title":" psk"},{"location":"apiconfig.html#retainportal","text":"Specify whether to continue the portal function even if the captive portal timed out. If the true, when a timeout occurs, the AutoConnect::begin function is exited with returns false, but the portal facility remains alive. So SoftAP remains alive and you can invoke AutoConnect while continuing sketch execution. The default is false. Type bool Value true Continue the portal function even if the captive portal times out. The STA + SoftAP mode of the ESP module continues and accepts the connection request to the AP. false When the captive portal times out, STA + SoftAP mode of the ESP module is stopped. This is default. Connection request after timed-out With the retainPortal , even if AutoConnect::begin in the setup() is timed out, you can execute the sketch and the portal function as a WiFi connection attempt by calling AutoConnect::handleClient in the loop().","title":" retainPortal"},{"location":"apiconfig.html#staip","text":"Set a static IP address. The IP will behave with STA mode. Type IPAddress","title":" staip"},{"location":"apiconfig.html#stagateway","text":"Set the gateway address when using static IP address. Type IPAddress","title":" staGateway"},{"location":"apiconfig.html#stanetmask","text":"Set the subnetmask when using static IP address. Type IPAddress","title":" staNetmask"},{"location":"apiconfig.html#title","text":"Set the menu title. Type String","title":" title"},{"location":"apiconfig.html#autoconnectconfig-example","text":"AutoConenct Portal; AutoConenctConfig Config ( \"\" , \"passpass\" ); // SoftAp name is determined at runtime Config.apid = ESP.hostname(); // Retrieve host name to SotAp identification Config.apip = IPAddress( 192 , 168 , 10 , 101 ); // Sets SoftAP IP address Config.gateway = IPAddress( 192 , 168 , 10 , 1 ); // Sets WLAN router IP address Config.netmask = IPAddress( 255 , 255 , 255 , 0 ); // Sets WLAN scope Config.autoReconnect = true; // Enable auto-reconnect Config.autoSave = AC_SAVECREDENTIAL_NEVER; // No save credential Config.boundaryOffet = 64 ; // Reserve 64 bytes for the user data in EEPROM. Config.portalTimeout = 60000 ; // Sets timeout value for the captive portal Config.retainPortal = true; // Retains the portal function after timed-out Config.homeUri = \"/index.html\" ; // Sets home path of the sketch application Config.title = \"My menu\" ; // Customize the menu title Config.staip = IPAddress( 192 , 168 , 10 , 10 ); // Sets static IP Config.staGateway = IPAddress( 192 , 168 , 10 , 1 ); // Sets WiFi router address Config.staNetmask = IPAddress( 255 , 255 , 255 , 0 ); // Sets WLAN scope Config.dns1 = IPAddress( 192 , 168 , 10 , 1 ); // Sets primary DNS address Portal.config(Config); // Configure AutoConnect Portal.begin(); // Starts and behaves captive portal","title":" AutoConnectConfig example"},{"location":"apielements.html","text":"AutoConnectButton \u00b6 Constructor \u00b6 AutoConnectButton( const char * name = \"\" , const char * value = \"\" , const String & action = String()) Parameters name The element name. value Value of the element. action Native code of the action script executed when the button is clicked. Public member variables \u00b6 name \u00b6 The element name. Type String value \u00b6 Value of the element. Type String action \u00b6 HTML native code of the action script to be executed when the button is clicked. It is mostly used with a JavaScript to activate a script. 1 Type String Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Button AutoConnectCheckbox \u00b6 Constructor \u00b6 explicit AutoConnectCheckboxBasis( const char * name = \"\" , const char * value = \"\" , const char * label = \"\" , const bool checked = false) Parameters name The element name. value Value of the element. label A label string prefixed to the checkbox. check Checked state of the checkbox. Public member variables \u00b6 name \u00b6 The element name. Type String value \u00b6 Value of the element. It becomes a value attribute of an HTML < input type = \"checkbox\" > tag. Type String label \u00b6 A label is an optional string. A label is always arranged on the right side of the checkbox. Specification of a label will generate an HTML < label > tag with an id attribute. The checkbox and the label are connected by the id attribute. Type String checked \u00b6 It indicates the checked status of the checkbox. The value of the checked checkbox element is packed in the query string and sent by submit. Type Boolean Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Checkbox AutoConnectElement \u00b6 Constructor \u00b6 AutoConnectElement( const char * name = \"\" , const char * value = \"\" ) Parameters name The element name. value Value of the element. Public member variables \u00b6 name \u00b6 The element name. Type String value \u00b6 Value of the element. It is output as HTML as it is as a source for generating HTML code. Type String Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Element AutoConnectInput \u00b6 Constructor \u00b6 AutoConnectInput( const char * name = \"\" , const char * value = \"\" , const char * label = \"\" , const char * pattern = \"\" , const char * placeholder = \"\" ) Parameters name The element name. value Value of the element. label Label string. pattern Regular expression string for checking data format. placeholder A placeholder string. Public member variables \u00b6 name \u00b6 The element name. Type String value \u00b6 Value of the element. It becomes a value attribute of an HTML < input type = \"text\" > tag. An entered text in the custom Web page will be sent with a query string of the form. The value set before accessing the page is displayed as the initial value. Type String label \u00b6 A label is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML < label > tag with an id attribute. The input box and the label are connected by the id attribute. Type String pattern \u00b6 A pattern specifies a regular expression that the input-box's value is checked against on form submission. Type String placeholder \u00b6 A placeholder is an option string. Specification of a placeholder will generate a placeholder attribute for the input tag. Type String Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Input AutoConnectRadio \u00b6 Constructor \u00b6 AutoConnectRadio( const char * name = \"\" , std :: vector < String > const & values = {}, const char * label = \"\" , const ACArrange_t order = AC_Vertical, const uint8_t checked = 0 ) Parameters name The element name. values An array of values of the radio buttons. Specifies an std::vector object. label Label string. order The direction to arrange the radio buttons. checked An index to be checked in the radio buttons. Public member variables \u00b6 name \u00b6 The element name. Type String values \u00b6 An array of String type for the radio button options. It is an initialization list can be used. The < input type = \"radio\" > tags will be generated from each entry in the values. Type std::vector<String> label \u00b6 A label is an optional string. A label will be arranged in the left or top of the radio buttons according to the order . Type String order \u00b6 Specifies the direction to arrange the radio buttons. A label will place in the left or the top according to the order . It is a value of ACArrange_t type and accepts one of the following: Type ACArrange_t AC_Horizontal : Horizontal arrangement. AC_Vertical : Vertical arrangement. checked \u00b6 Specifies the index number (1-based) of the values to be checked. If this parameter is not specified neither item is checked. Type uint8_t Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Radio add \u00b6 void add( const String & value) Adds an option for the radio button. Parameters value An option string to add to the radio button. check \u00b6 void check( const String & value) Indicates the check of the specified option for the radio buttons. You can use the check function for checking dynamically with arbitrary of the radio button. Parameters value An option string to be checked. empty \u00b6 void empty( const size_t reserve = 0 ) Clear the array of option strings that AutoConnectRadio has in values. When a reserve parameter is specified, a vector container of that size is reserved. Parameters reserve Reserved size of a container for option strings. operator [ ] \u00b6 const String & operator [] ( const std :: size_t n) Returns the option string of the index specified by n . Parameters n Index of values array to return. value \u00b6 const String & value( void ) const Returns current checked option of the radio buttons. Return value A String of an option current checked. If there is no checked option, a null string returned. AutoConnectSelect \u00b6 Constructor \u00b6 AutoConnectSelect( const char * name = \"\" , std :: vector < String > const & options = {}, const char * label = \"\" ) Parameters name The element name. options An array of options of the select element. Specifies an std::vector object. label Label string. Public member variables \u00b6 name \u00b6 The element name. Type String options \u00b6 An array of String type for the selection options. It is an initialization list can be used. The < option value > tags will be generated from each entry in the options. Type std::vector<String> label \u00b6 A label is an optional string. A label will be arranged in the top of the selection list. Type String Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Select add \u00b6 void add( const String & option) empty \u00b6 void empty( const size_t reserve = 0 ) size \u00b6 size_t size( void ) operator [ ] \u00b6 const String & operator [] ( const std :: size_t n) AutoConnectSubmit \u00b6 AutoConnectText \u00b6 JavaScript can be inserted into a custom Web page using AutoConnectElement. \u21a9","title":"AutoConnectElements API"},{"location":"apielements.html#autoconnectbutton","text":"","title":"AutoConnectButton"},{"location":"apielements.html#constructor","text":"AutoConnectButton( const char * name = \"\" , const char * value = \"\" , const String & action = String()) Parameters name The element name. value Value of the element. action Native code of the action script executed when the button is clicked.","title":" Constructor"},{"location":"apielements.html#public-member-variables","text":"","title":" Public member variables"},{"location":"apielements.html#name","text":"The element name. Type String","title":" name"},{"location":"apielements.html#value","text":"Value of the element. Type String","title":" value"},{"location":"apielements.html#action","text":"HTML native code of the action script to be executed when the button is clicked. It is mostly used with a JavaScript to activate a script. 1 Type String","title":" action"},{"location":"apielements.html#public-member-functions","text":"","title":" Public member functions"},{"location":"apielements.html#typeof","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Button","title":" typeOf"},{"location":"apielements.html#autoconnectcheckbox","text":"","title":"AutoConnectCheckbox"},{"location":"apielements.html#constructor_1","text":"explicit AutoConnectCheckboxBasis( const char * name = \"\" , const char * value = \"\" , const char * label = \"\" , const bool checked = false) Parameters name The element name. value Value of the element. label A label string prefixed to the checkbox. check Checked state of the checkbox.","title":" Constructor"},{"location":"apielements.html#public-member-variables_1","text":"","title":" Public member variables"},{"location":"apielements.html#name_1","text":"The element name. Type String","title":" name"},{"location":"apielements.html#value_1","text":"Value of the element. It becomes a value attribute of an HTML < input type = \"checkbox\" > tag. Type String","title":" value"},{"location":"apielements.html#label","text":"A label is an optional string. A label is always arranged on the right side of the checkbox. Specification of a label will generate an HTML < label > tag with an id attribute. The checkbox and the label are connected by the id attribute. Type String","title":" label"},{"location":"apielements.html#checked","text":"It indicates the checked status of the checkbox. The value of the checked checkbox element is packed in the query string and sent by submit. Type Boolean","title":" checked"},{"location":"apielements.html#public-member-functions_1","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_1","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Checkbox","title":" typeOf"},{"location":"apielements.html#autoconnectelement","text":"","title":"AutoConnectElement"},{"location":"apielements.html#constructor_2","text":"AutoConnectElement( const char * name = \"\" , const char * value = \"\" ) Parameters name The element name. value Value of the element.","title":" Constructor"},{"location":"apielements.html#public-member-variables_2","text":"","title":" Public member variables"},{"location":"apielements.html#name_2","text":"The element name. Type String","title":" name"},{"location":"apielements.html#value_2","text":"Value of the element. It is output as HTML as it is as a source for generating HTML code. Type String","title":" value"},{"location":"apielements.html#public-member-functions_2","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_2","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Element","title":" typeOf"},{"location":"apielements.html#autoconnectinput","text":"","title":"AutoConnectInput"},{"location":"apielements.html#constructor_3","text":"AutoConnectInput( const char * name = \"\" , const char * value = \"\" , const char * label = \"\" , const char * pattern = \"\" , const char * placeholder = \"\" ) Parameters name The element name. value Value of the element. label Label string. pattern Regular expression string for checking data format. placeholder A placeholder string.","title":" Constructor"},{"location":"apielements.html#public-member-variables_3","text":"","title":" Public member variables"},{"location":"apielements.html#name_3","text":"The element name. Type String","title":" name"},{"location":"apielements.html#value_3","text":"Value of the element. It becomes a value attribute of an HTML < input type = \"text\" > tag. An entered text in the custom Web page will be sent with a query string of the form. The value set before accessing the page is displayed as the initial value. Type String","title":" value"},{"location":"apielements.html#label_1","text":"A label is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML < label > tag with an id attribute. The input box and the label are connected by the id attribute. Type String","title":" label"},{"location":"apielements.html#pattern","text":"A pattern specifies a regular expression that the input-box's value is checked against on form submission. Type String","title":" pattern"},{"location":"apielements.html#placeholder","text":"A placeholder is an option string. Specification of a placeholder will generate a placeholder attribute for the input tag. Type String","title":" placeholder"},{"location":"apielements.html#public-member-functions_3","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_3","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Input","title":" typeOf"},{"location":"apielements.html#autoconnectradio","text":"","title":"AutoConnectRadio"},{"location":"apielements.html#constructor_4","text":"AutoConnectRadio( const char * name = \"\" , std :: vector < String > const & values = {}, const char * label = \"\" , const ACArrange_t order = AC_Vertical, const uint8_t checked = 0 ) Parameters name The element name. values An array of values of the radio buttons. Specifies an std::vector object. label Label string. order The direction to arrange the radio buttons. checked An index to be checked in the radio buttons.","title":" Constructor"},{"location":"apielements.html#public-member-variables_4","text":"","title":" Public member variables"},{"location":"apielements.html#name_4","text":"The element name. Type String","title":" name"},{"location":"apielements.html#values","text":"An array of String type for the radio button options. It is an initialization list can be used. The < input type = \"radio\" > tags will be generated from each entry in the values. Type std::vector<String>","title":" values"},{"location":"apielements.html#label_2","text":"A label is an optional string. A label will be arranged in the left or top of the radio buttons according to the order . Type String","title":" label"},{"location":"apielements.html#order","text":"Specifies the direction to arrange the radio buttons. A label will place in the left or the top according to the order . It is a value of ACArrange_t type and accepts one of the following: Type ACArrange_t AC_Horizontal : Horizontal arrangement. AC_Vertical : Vertical arrangement.","title":" order"},{"location":"apielements.html#checked_1","text":"Specifies the index number (1-based) of the values to be checked. If this parameter is not specified neither item is checked. Type uint8_t","title":" checked"},{"location":"apielements.html#public-member-functions_4","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_4","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Radio","title":" typeOf"},{"location":"apielements.html#add","text":"void add( const String & value) Adds an option for the radio button. Parameters value An option string to add to the radio button.","title":" add"},{"location":"apielements.html#check","text":"void check( const String & value) Indicates the check of the specified option for the radio buttons. You can use the check function for checking dynamically with arbitrary of the radio button. Parameters value An option string to be checked.","title":" check"},{"location":"apielements.html#empty","text":"void empty( const size_t reserve = 0 ) Clear the array of option strings that AutoConnectRadio has in values. When a reserve parameter is specified, a vector container of that size is reserved. Parameters reserve Reserved size of a container for option strings.","title":" empty"},{"location":"apielements.html#operator","text":"const String & operator [] ( const std :: size_t n) Returns the option string of the index specified by n . Parameters n Index of values array to return.","title":" operator [ ]"},{"location":"apielements.html#value_4","text":"const String & value( void ) const Returns current checked option of the radio buttons. Return value A String of an option current checked. If there is no checked option, a null string returned.","title":" value"},{"location":"apielements.html#autoconnectselect","text":"","title":"AutoConnectSelect"},{"location":"apielements.html#constructor_5","text":"AutoConnectSelect( const char * name = \"\" , std :: vector < String > const & options = {}, const char * label = \"\" ) Parameters name The element name. options An array of options of the select element. Specifies an std::vector object. label Label string.","title":" Constructor"},{"location":"apielements.html#public-member-variables_5","text":"","title":" Public member variables"},{"location":"apielements.html#name_5","text":"The element name. Type String","title":" name"},{"location":"apielements.html#options","text":"An array of String type for the selection options. It is an initialization list can be used. The < option value > tags will be generated from each entry in the options. Type std::vector<String>","title":" options"},{"location":"apielements.html#label_3","text":"A label is an optional string. A label will be arranged in the top of the selection list. Type String","title":" label"},{"location":"apielements.html#public-member-functions_5","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_5","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Select","title":" typeOf"},{"location":"apielements.html#add_1","text":"void add( const String & option)","title":" add"},{"location":"apielements.html#empty_1","text":"void empty( const size_t reserve = 0 )","title":" empty"},{"location":"apielements.html#size","text":"size_t size( void )","title":" size"},{"location":"apielements.html#operator_1","text":"const String & operator [] ( const std :: size_t n)","title":" operator [ ]"},{"location":"apielements.html#autoconnectsubmit","text":"","title":"AutoConnectSubmit"},{"location":"apielements.html#autoconnecttext","text":"JavaScript can be inserted into a custom Web page using AutoConnectElement. \u21a9","title":"AutoConnectText"},{"location":"apiextra.html","text":"Icons \u00b6 The library presents two PNG icons which can be used to embed a hyperlink to the AutoConnect menu. Bar type Cog type To reference the icon, use the AUTOCONNECT_LINK macro in the sketch. It expands into the string literal as an HTML <a></a> tag with PNG embedded of the AutoConnect menu hyperlinks. Icon type is specified by the parameter of the macro. BAR_24 Bars icon, 24x24. BAR_32 Bars icon, 32x32. BAR_48 Bars icon, 48x48. COG_24 Cog icon, 24x24. COG_32 Cog icon, 32x32. Usage String html = \"<html>\" ; html += AUTOCONNECT_LINK(BAR_32); html += \"</html>\" ; server.send( 200 , \"text/html\" , html);","title":"Something extra"},{"location":"apiextra.html#icons","text":"The library presents two PNG icons which can be used to embed a hyperlink to the AutoConnect menu. Bar type Cog type To reference the icon, use the AUTOCONNECT_LINK macro in the sketch. It expands into the string literal as an HTML <a></a> tag with PNG embedded of the AutoConnect menu hyperlinks. Icon type is specified by the parameter of the macro. BAR_24 Bars icon, 24x24. BAR_32 Bars icon, 32x32. BAR_48 Bars icon, 48x48. COG_24 Cog icon, 24x24. COG_32 Cog icon, 32x32. Usage String html = \"<html>\" ; html += AUTOCONNECT_LINK(BAR_32); html += \"</html>\" ; server.send( 200 , \"text/html\" , html);","title":" Icons"},{"location":"basicusage.html","text":"Simple usage \u00b6 Embed to the sketches \u00b6 How embed the AutoConnect to the sketches you have. Most simple approach to applying AutoConnect for the existing sketches, follow the below steps. The below sketch is for ESP8266. For ESP32, replace ESP8266WebServer with WebServer and ESP8266WiFi.h with WiFi.h respectively. Insert #include <AutoConnect.h> to behind of #include <ESP8266WebServer.h> . Insert AutoConnect PORTAL(WEBSERVER); to behind of ESP8266WebServer WEBSERVER; declaration. 1 Remove WiFi. begin ( SSID , PSK ) and the subsequent logic for the connection status check. Replace WEBSERVER . begin () to PORTAL . begin () . 2 Replace WEBSERVER . handleClient () to PORTAL . handleClient () . 3 If the connection checks logic is needed, you can check the return value according to PORTAL . begin () with true or false . Basic usage \u00b6 Basic logic sequence for the user sketches \u00b6 1. A typical logic sequence \u00b6 Include headers, ESP8266WebServer.h / WebServer.h and AutoConnect.h Declare an ESP8266WebServer variable for ESP8266 or a WebServer variable for ESP32. Declare an AutoConnect variable. Implement the URL handlers provided for the on method of ESP8266WebServer/WebServer with the function() . setup() 5.1 Sets URL handler the function() to ESP8266WebServer/WebServer by ESP8266WebServer::on / WebServer::on . 5.2 Starts AutoConnect::begin() . 5.3 Check WiFi connection status. loop() 6.1 Do the process for actual sketch. 6.2 Invokes AutoConnect::handleClient() , or invokes ESP8266WebServer::handleClient() / WebServer::handleClient then AutoConnect::handleRequest() . 2. Declare AutoConnect object \u00b6 Two options are available for AutoConnect constructor . AutoConnect VARIABLE ( & ESP8266WebServer); // For ESP8266 AutoConnect VARIABLE ( & WebServer); // For ESP32 or AutoConnect VARIABLE; The parameter with an ESP8266WebServer/WebServer variable: An ESP8266WebServer/WebServer object variable must be declared. AutoConnect uses its variable to handles the AutoConnect menu . With no parameter: The sketch does not declare ESP8266WebServer/WebServer object. In this case, AutoConnect allocates an instance of the ESP8266WebServer/WebServer internally. The logic sequence of the sketch is somewhat different as the above. To register a URL handler function by ESP8266WebServer::on or WebServer::on should be performed after AutoConnect::begin . 3. No need WiFI.begin(...) \u00b6 AutoConnect internally performs WiFi.begin to establish a WiFi connection. There is no need for a general process to establish a connection using WiFi.begin with a sketch code. 4. Alternate ESP8266WebServer::begin() and WebServer::begin() \u00b6 AutoConnect::begin executes ESP8266WebServer::begin / WebServer::begin internally too and it starts the DNS server to behave as a Captive portal. So it is not needed to call ESP8266WebServer::begin / WebServer::begin in the sketch. Why DNS Server starts AutoConnect traps the detection of the captive portal and achieves a connection with the WLAN interactively by the AutoConnect menu. It responds SoftAP address to all DNS queries temporarily to trap. Once a WiFi connection establishes, the DNS server contributed by AutoConnect stops. 5. AutoConnect::begin with SSID and Password \u00b6 SSID and Password can also specify by AutoConnect::begin . ESP8266/ESP32 uses provided SSID and Password explicitly. If the connection false with specified SSID with Password then a captive portal is activated. SSID and Password are not present, ESP8266 SDK will attempt to connect using the still effectual SSID and password. Usually, it succeeds. 6. Use ESP8266WebServer::on and WebServer::on to handle URL \u00b6 AutoConnect is designed to coexist with the process for handling the web pages by user sketches. The page processing function which will send an HTML to the client invoked by the \" on::ESP8266WebServer \" or the \" on::WebServer \" function is the same as when using ESP8266WebServer/WebServer natively. 7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient() \u00b6 Both classes member function name is the same: handleClient , but the behavior is different. Using the AutoConnect embedded along with ESP8266WebServer::handleClient/WebServer::handleClient has limitations. Refer to the below section for details. ESP8266WebServer/WebServer hosted or parasitic \u00b6 The interoperable process with an ESP8266WebServer/WebServer depends on the parameters of the AutoConnect constructor . Declaration parameter for the constructor Use ESP8266WebServer::handleClient or WebServer::handleClient only Use AutoConnect::handleClient None AutoConnect menu not available. To use AutoConnect menu, need AutoConnect::handleRequest() . also to use ESP8266WebServer/WebServer natively, need AutoConnect::host() . AutoConnect menu available. To use ESP8266WebServer/WebServer natively, need AutoConnect::host() . Reference to ESP8266WebServer/WebServer AutoConnect menu not available. To use AutoConnect menu, need AutoConnect::handleRequest() . AutoConnect menu available. By declaration for the AutoConnect variable with no parameter : The ESP8266WebServer/WebServer instance is hosted by AutoConnect automatically then the sketches use AutoConnect::host as API to get it after AutoConnect::begin performed. By declaration for the AutoConnect variable with the reference of ESP8266WebServer/WebServer : AutoConnect will use it. The sketch can use it is too. In use ESP8266WebServer::handleClient()/WebServer::handleClient() : AutoConnect menu can be dispatched but not works normally. It is necessary to call AutoConnect::handleRequest after ESP8255WebServer::handleClient / WebServer::handleClient invoking. In use AutoConnect::handleClient() : The handleClient() process and the AutoConnect menu is available without calling ESP8266WebServer::handleClient . Why AutoConnect::handleRequest is needed when using ESP8266WebServer::handleClient/WebServer::handleClient The AutoConnect menu function may affect WiFi connection state. It follows that the menu process must execute outside ESP8266WebServer::handleClient and WebServer::handleClient . AutoConnect::handleClient is equivalent ESP8266WebServer::handleClient and WEbServer::handleClient included AutoConnect::handleRequest . Each VARIABLE conforms to the actual declaration in the sketches. \u21a9 WiFi SSID and Password can be specified AutoConnect::begin() too. \u21a9 Replacement the handleClient method is not indispensable. AutoConnect can still connect with the captive portal as it is ESP8266WebServer::handleClient. But it can not valid AutoConnect menu . \u21a9","title":"Basic usage"},{"location":"basicusage.html#simple-usage","text":"","title":"Simple usage"},{"location":"basicusage.html#embed-to-the-sketches","text":"How embed the AutoConnect to the sketches you have. Most simple approach to applying AutoConnect for the existing sketches, follow the below steps. The below sketch is for ESP8266. For ESP32, replace ESP8266WebServer with WebServer and ESP8266WiFi.h with WiFi.h respectively. Insert #include <AutoConnect.h> to behind of #include <ESP8266WebServer.h> . Insert AutoConnect PORTAL(WEBSERVER); to behind of ESP8266WebServer WEBSERVER; declaration. 1 Remove WiFi. begin ( SSID , PSK ) and the subsequent logic for the connection status check. Replace WEBSERVER . begin () to PORTAL . begin () . 2 Replace WEBSERVER . handleClient () to PORTAL . handleClient () . 3 If the connection checks logic is needed, you can check the return value according to PORTAL . begin () with true or false .","title":" Embed to the sketches"},{"location":"basicusage.html#basic-usage","text":"","title":"Basic usage"},{"location":"basicusage.html#basic-logic-sequence-for-the-user-sketches","text":"","title":" Basic logic sequence for the user sketches"},{"location":"basicusage.html#1-a-typical-logic-sequence","text":"Include headers, ESP8266WebServer.h / WebServer.h and AutoConnect.h Declare an ESP8266WebServer variable for ESP8266 or a WebServer variable for ESP32. Declare an AutoConnect variable. Implement the URL handlers provided for the on method of ESP8266WebServer/WebServer with the function() . setup() 5.1 Sets URL handler the function() to ESP8266WebServer/WebServer by ESP8266WebServer::on / WebServer::on . 5.2 Starts AutoConnect::begin() . 5.3 Check WiFi connection status. loop() 6.1 Do the process for actual sketch. 6.2 Invokes AutoConnect::handleClient() , or invokes ESP8266WebServer::handleClient() / WebServer::handleClient then AutoConnect::handleRequest() .","title":"1. A typical logic sequence"},{"location":"basicusage.html#2-declare-autoconnect-object","text":"Two options are available for AutoConnect constructor . AutoConnect VARIABLE ( & ESP8266WebServer); // For ESP8266 AutoConnect VARIABLE ( & WebServer); // For ESP32 or AutoConnect VARIABLE; The parameter with an ESP8266WebServer/WebServer variable: An ESP8266WebServer/WebServer object variable must be declared. AutoConnect uses its variable to handles the AutoConnect menu . With no parameter: The sketch does not declare ESP8266WebServer/WebServer object. In this case, AutoConnect allocates an instance of the ESP8266WebServer/WebServer internally. The logic sequence of the sketch is somewhat different as the above. To register a URL handler function by ESP8266WebServer::on or WebServer::on should be performed after AutoConnect::begin .","title":"2. Declare AutoConnect object"},{"location":"basicusage.html#3-no-need-wifibegin","text":"AutoConnect internally performs WiFi.begin to establish a WiFi connection. There is no need for a general process to establish a connection using WiFi.begin with a sketch code.","title":"3. No need WiFI.begin(...)"},{"location":"basicusage.html#4-alternate-esp8266webserverbegin-and-webserverbegin","text":"AutoConnect::begin executes ESP8266WebServer::begin / WebServer::begin internally too and it starts the DNS server to behave as a Captive portal. So it is not needed to call ESP8266WebServer::begin / WebServer::begin in the sketch. Why DNS Server starts AutoConnect traps the detection of the captive portal and achieves a connection with the WLAN interactively by the AutoConnect menu. It responds SoftAP address to all DNS queries temporarily to trap. Once a WiFi connection establishes, the DNS server contributed by AutoConnect stops.","title":"4. Alternate ESP8266WebServer::begin() and WebServer::begin()"},{"location":"basicusage.html#5-autoconnectbegin-with-ssid-and-password","text":"SSID and Password can also specify by AutoConnect::begin . ESP8266/ESP32 uses provided SSID and Password explicitly. If the connection false with specified SSID with Password then a captive portal is activated. SSID and Password are not present, ESP8266 SDK will attempt to connect using the still effectual SSID and password. Usually, it succeeds.","title":"5. AutoConnect::begin with SSID and Password"},{"location":"basicusage.html#6-use-esp8266webserveron-and-webserveron-to-handle-url","text":"AutoConnect is designed to coexist with the process for handling the web pages by user sketches. The page processing function which will send an HTML to the client invoked by the \" on::ESP8266WebServer \" or the \" on::WebServer \" function is the same as when using ESP8266WebServer/WebServer natively.","title":"6. Use ESP8266WebServer::on and WebServer::on to handle URL"},{"location":"basicusage.html#7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient","text":"Both classes member function name is the same: handleClient , but the behavior is different. Using the AutoConnect embedded along with ESP8266WebServer::handleClient/WebServer::handleClient has limitations. Refer to the below section for details.","title":"7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()"},{"location":"basicusage.html#esp8266webserverwebserver-hosted-or-parasitic","text":"The interoperable process with an ESP8266WebServer/WebServer depends on the parameters of the AutoConnect constructor . Declaration parameter for the constructor Use ESP8266WebServer::handleClient or WebServer::handleClient only Use AutoConnect::handleClient None AutoConnect menu not available. To use AutoConnect menu, need AutoConnect::handleRequest() . also to use ESP8266WebServer/WebServer natively, need AutoConnect::host() . AutoConnect menu available. To use ESP8266WebServer/WebServer natively, need AutoConnect::host() . Reference to ESP8266WebServer/WebServer AutoConnect menu not available. To use AutoConnect menu, need AutoConnect::handleRequest() . AutoConnect menu available. By declaration for the AutoConnect variable with no parameter : The ESP8266WebServer/WebServer instance is hosted by AutoConnect automatically then the sketches use AutoConnect::host as API to get it after AutoConnect::begin performed. By declaration for the AutoConnect variable with the reference of ESP8266WebServer/WebServer : AutoConnect will use it. The sketch can use it is too. In use ESP8266WebServer::handleClient()/WebServer::handleClient() : AutoConnect menu can be dispatched but not works normally. It is necessary to call AutoConnect::handleRequest after ESP8255WebServer::handleClient / WebServer::handleClient invoking. In use AutoConnect::handleClient() : The handleClient() process and the AutoConnect menu is available without calling ESP8266WebServer::handleClient . Why AutoConnect::handleRequest is needed when using ESP8266WebServer::handleClient/WebServer::handleClient The AutoConnect menu function may affect WiFi connection state. It follows that the menu process must execute outside ESP8266WebServer::handleClient and WebServer::handleClient . AutoConnect::handleClient is equivalent ESP8266WebServer::handleClient and WEbServer::handleClient included AutoConnect::handleRequest . Each VARIABLE conforms to the actual declaration in the sketches. \u21a9 WiFi SSID and Password can be specified AutoConnect::begin() too. \u21a9 Replacement the handleClient method is not indispensable. AutoConnect can still connect with the captive portal as it is ESP8266WebServer::handleClient. But it can not valid AutoConnect menu . \u21a9","title":" ESP8266WebServer/WebServer hosted or parasitic"},{"location":"changelog.html","text":"[0.9.7] Jan. 25, 2019 \u00b6 Fixed crash in some environments. Thank you @ageurtse Supports AutoConnect menu extention by user sketch with AutoConnectAux . Supports loading and saving of user-defined parameters with JSON format. Improved the WiFi connection sequence at the first WiFi.begin. Even if AutoConnectConfig::autoReconnect is disabled when SSID and PSK are not specified, it will use the information of the last established access point. The autoReconnect option will achieve trying the connect after a previous connection failed. Supports the AutoConnectConfig::immediateStart option and immediately starts the portal without first trying WiFi.begin. You can start the captive portal at any time in combination with the AutoConnectConfig::autoRise option. Improved boot uri after reset. AutoConnectConfig::bootUri can be specified either /_ac or HOME path as the uri to be accessed after invoking Reset from AutoConnect menu. Improved source code placement of predefined macros. Defined common macros have been moved to AutoConnectDefs.h . Supports AutoConnectConfig::hostName . It activates WiFi.hostname() / WiFi.setHostName() . Supports the captive portal time-out. It can be controlled by AutoConnectConfig::portalTimeout and AutoConnectConfig::retainPortal . [0.9.6] Sep.27, 2018. \u00b6 Improvement of RSSI detection for saved SSIDs. Fixed disconnection SoftAP completely at the first connection phase of the AutoConnect::begin . [0.9.5] Aug.27, 2018. \u00b6 Supports ESP32. Fixed that crash may occur if the number of stored credentials in the EEPROM is smaller than the number of found WiFi networks. [0.9.4] May 5, 2018. \u00b6 Automatically focus passphrase after selecting SSID with Configure New AP. Supports AutoConnectConfig::autoReconnect option, it will scan the WLAN when it can not connect to the default SSID, apply the applicable credentials if it is saved, and try reconnecting. [0.9.3] March 23, 2018. \u00b6 Supports a static IP address assignment. [0.9.2] March 19, 2018. \u00b6 Improvement of string literal declaration with the examples, no library change. [0.9.1] March 13, 2018. \u00b6 A release of the stable.","title":"Change log"},{"location":"changelog.html#097-jan-25-2019","text":"Fixed crash in some environments. Thank you @ageurtse Supports AutoConnect menu extention by user sketch with AutoConnectAux . Supports loading and saving of user-defined parameters with JSON format. Improved the WiFi connection sequence at the first WiFi.begin. Even if AutoConnectConfig::autoReconnect is disabled when SSID and PSK are not specified, it will use the information of the last established access point. The autoReconnect option will achieve trying the connect after a previous connection failed. Supports the AutoConnectConfig::immediateStart option and immediately starts the portal without first trying WiFi.begin. You can start the captive portal at any time in combination with the AutoConnectConfig::autoRise option. Improved boot uri after reset. AutoConnectConfig::bootUri can be specified either /_ac or HOME path as the uri to be accessed after invoking Reset from AutoConnect menu. Improved source code placement of predefined macros. Defined common macros have been moved to AutoConnectDefs.h . Supports AutoConnectConfig::hostName . It activates WiFi.hostname() / WiFi.setHostName() . Supports the captive portal time-out. It can be controlled by AutoConnectConfig::portalTimeout and AutoConnectConfig::retainPortal .","title":"[0.9.7] Jan. 25, 2019"},{"location":"changelog.html#096-sep27-2018","text":"Improvement of RSSI detection for saved SSIDs. Fixed disconnection SoftAP completely at the first connection phase of the AutoConnect::begin .","title":"[0.9.6] Sep.27, 2018."},{"location":"changelog.html#095-aug27-2018","text":"Supports ESP32. Fixed that crash may occur if the number of stored credentials in the EEPROM is smaller than the number of found WiFi networks.","title":"[0.9.5] Aug.27, 2018."},{"location":"changelog.html#094-may-5-2018","text":"Automatically focus passphrase after selecting SSID with Configure New AP. Supports AutoConnectConfig::autoReconnect option, it will scan the WLAN when it can not connect to the default SSID, apply the applicable credentials if it is saved, and try reconnecting.","title":"[0.9.4] May 5, 2018."},{"location":"changelog.html#093-march-23-2018","text":"Supports a static IP address assignment.","title":"[0.9.3] March 23, 2018."},{"location":"changelog.html#092-march-19-2018","text":"Improvement of string literal declaration with the examples, no library change.","title":"[0.9.2] March 19, 2018."},{"location":"changelog.html#091-march-13-2018","text":"A release of the stable.","title":"[0.9.1] March 13, 2018."},{"location":"datatips.html","text":"Convert AutoConnectElements value to actual data type \u00b6 The value of the AutoConnectElements field of the custom Web pages consists of String type for all. Sketches will need to convert them to the actual data type. And then if the data type required for processing in the sketch is not a String type, it is necessary to convert to String type when storing to the AutoConenctElements value. AutoConnect library does not provide the data conversion utility, and its function depends on Arduino language functions or functions of the type class. However, commonly used data conversion methods are generally similar. Here, represent examples the typical method for the data type conversion for the AutoConnectElements value of custom Web pages. Integer \u00b6 Use int() or toInt() of String . AutoConnectInput & input = aux.getElement < AutoConnectInput > ( \"INPUT\" ); int value = input.value.toInt(); Float \u00b6 Use float() or toFloat() of String . AutoConnectInput & input = aux.getElement < AutoConnectInput > ( \"INPUT\" ); float value = input.value.toFloat(); Date & Time \u00b6 The easiest way is to use the Arduino Time Library . Sketches must accommodate differences in date and time formats depending on the time zone. You can absorb the difference in DateTime format by using sscanf function. 1 #include <TimeLib.h> time_t tm; int Year, Month, Day, Hour, Minute, Second; AutoConnectInput & input = aux.getElement < AutoConnectInput > ( \"INPUT\" ); sscanf(input.value.c_str(), \"%d-%d-%d %d:%d:%d\" , & Year, & Month, & Day, & Hour, & Minute, & Second); tm.Year = CalendarYrToTm(Year); tm.Month = Month; tm.Day = Day; tm.Hour = Hour; tm.Minute = Minute; tm.Second = Second; IP adderss \u00b6 To convert a String to an IP address, use IPAddress::fromString . To stringize an instance of an IP address, use IPAddress::toString . IPAddress ip; AutoConnectInput & input aux.getElement < AutoConnectInput > ( \"INPUT\" ); ip.fromString(input.value); input.value = ip.toString(); Validation for the value \u00b6 In order for data to be correctly converted from a string, the input data must be consistent with the format. How to implement strict validation in sketches depends on various perspectives and the power of tiny devices is not enough to implement a complete lexical analysis. But you can reduce the burden for data verification using the pattern of AutoConnectInput. By giving a pattern to AutoConnectInput , you can find errors in data styles while typing in custom Web pages. The pattern is specified by regular expression . If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. Refer to Handling the custom Web pages section. Regular Expressions for JavaScript Regular expressions specified in the AutoConnectInput pattern conforms to the JavaScript specification . Here, represent examples the typical regular expression for the input validation. URL \u00b6 ^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$ DNS hostname \u00b6 ^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\-]*[a-zA-Z0-9])\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\-]*[A-Za-z0-9])$ email address 1 \u00b6 ^[a-zA-Z0-9.!#$%&'*+\\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$ IP Address \u00b6 ^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$ Date as MM/DD/YYYY 2 \u00b6 ^(0[1-9]|1[012])[- \\/.](0[1-9]|[12][0-9]|3[01])[- \\/.](19|20)\\d\\d$ Contain with backquote If that regular expression contains a backquote it must be escaped by backquote duplication. This regular expression does not fully support the format of the e-mail address requested in RFC5322 . \u21a9 \u21a9 This regular expression does not consider semantic constraints. It is not possible to detect errors that do not exist as actual dates. \u21a9","title":"Tips for data conversion"},{"location":"datatips.html#convert-autoconnectelements-value-to-actual-data-type","text":"The value of the AutoConnectElements field of the custom Web pages consists of String type for all. Sketches will need to convert them to the actual data type. And then if the data type required for processing in the sketch is not a String type, it is necessary to convert to String type when storing to the AutoConenctElements value. AutoConnect library does not provide the data conversion utility, and its function depends on Arduino language functions or functions of the type class. However, commonly used data conversion methods are generally similar. Here, represent examples the typical method for the data type conversion for the AutoConnectElements value of custom Web pages.","title":"Convert AutoConnectElements value to actual data type"},{"location":"datatips.html#integer","text":"Use int() or toInt() of String . AutoConnectInput & input = aux.getElement < AutoConnectInput > ( \"INPUT\" ); int value = input.value.toInt();","title":" Integer"},{"location":"datatips.html#float","text":"Use float() or toFloat() of String . AutoConnectInput & input = aux.getElement < AutoConnectInput > ( \"INPUT\" ); float value = input.value.toFloat();","title":" Float"},{"location":"datatips.html#date-time","text":"The easiest way is to use the Arduino Time Library . Sketches must accommodate differences in date and time formats depending on the time zone. You can absorb the difference in DateTime format by using sscanf function. 1 #include <TimeLib.h> time_t tm; int Year, Month, Day, Hour, Minute, Second; AutoConnectInput & input = aux.getElement < AutoConnectInput > ( \"INPUT\" ); sscanf(input.value.c_str(), \"%d-%d-%d %d:%d:%d\" , & Year, & Month, & Day, & Hour, & Minute, & Second); tm.Year = CalendarYrToTm(Year); tm.Month = Month; tm.Day = Day; tm.Hour = Hour; tm.Minute = Minute; tm.Second = Second;","title":" Date & Time"},{"location":"datatips.html#ip-adderss","text":"To convert a String to an IP address, use IPAddress::fromString . To stringize an instance of an IP address, use IPAddress::toString . IPAddress ip; AutoConnectInput & input aux.getElement < AutoConnectInput > ( \"INPUT\" ); ip.fromString(input.value); input.value = ip.toString();","title":" IP adderss"},{"location":"datatips.html#validation-for-the-value","text":"In order for data to be correctly converted from a string, the input data must be consistent with the format. How to implement strict validation in sketches depends on various perspectives and the power of tiny devices is not enough to implement a complete lexical analysis. But you can reduce the burden for data verification using the pattern of AutoConnectInput. By giving a pattern to AutoConnectInput , you can find errors in data styles while typing in custom Web pages. The pattern is specified by regular expression . If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. Refer to Handling the custom Web pages section. Regular Expressions for JavaScript Regular expressions specified in the AutoConnectInput pattern conforms to the JavaScript specification . Here, represent examples the typical regular expression for the input validation.","title":"Validation for the value"},{"location":"datatips.html#url","text":"^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$","title":" URL"},{"location":"datatips.html#dns-hostname","text":"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\-]*[a-zA-Z0-9])\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\-]*[A-Za-z0-9])$","title":" DNS hostname"},{"location":"datatips.html#email-address-1","text":"^[a-zA-Z0-9.!#$%&'*+\\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$","title":" email address 1"},{"location":"datatips.html#ip-address","text":"^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$","title":" IP Address"},{"location":"datatips.html#date-as-mmddyyyy-2","text":"^(0[1-9]|1[012])[- \\/.](0[1-9]|[12][0-9]|3[01])[- \\/.](19|20)\\d\\d$ Contain with backquote If that regular expression contains a backquote it must be escaped by backquote duplication. This regular expression does not fully support the format of the e-mail address requested in RFC5322 . \u21a9 \u21a9 This regular expression does not consider semantic constraints. It is not possible to detect errors that do not exist as actual dates. \u21a9","title":" Date as MM/DD/YYYY 2"},{"location":"faq.html","text":"After connected, AutoConnect menu performs but no happens. \u00b6 If you can access the AutoConnect root path as http://ESP8266IPADDRESS/_ac from browser, probably the sketch uses ESP8266WebServer::handleClient() without AutoConnect::handleRequest() . For AutoConnect menus to work properly, call AutoConnect::handleRequest() after ESP8266WebServer::handleClient() invoked, or use AutoConnect::handleClient() . AutoConnect::handleClient() is equivalent ESP8266WebServer::handleClient combined AutoConnect::handleRequest() . See also the explanation here . An esp8266ap as SoftAP was connected but Captive portal does not start. \u00b6 Captive portal detection could not be trapped. It is necessary to disconnect and reset ESP8266 to clear memorized connection data in ESP8266. Also, It may be displayed on the smartphone if the connection information of esp8266ap is wrong. In that case, delete the connection information of esp8266ap memorized by the smartphone once. Does not appear esp8266ap in smartphone. \u00b6 Maybe it is successfully connected at the first WiFi.begin . ESP8266 remembers the last SSID successfully connected and will use at the next. It means SoftAP will only start up when the first WiFi.begin() fails. The saved SSID would be cleared by WiFi.disconnect() with WIFI_STA mode. If you do not want automatic reconnection, you can erase the memorized SSID with the following simple sketch. #include <ESP8266WiFi.h> void setup () { delay( 1000 ); Serial.begin( 115200 ); WiFi.mode(WIFI_STA); delay( 100 ); WiFi.begin(); if (WiFi.waitForConnectResult() == WL_CONNECTED) { WiFi.disconnect(); while (WiFi.status() == WL_CONNECTED) delay( 100 ); } Serial.println( \"WiFi disconnected.\" ); } void loop () { delay( 1000 ); } You can interactively check the WiFi state of ESP8266. Please try ESPShaker . It is ESP8266 interactive serial command processor. Does not response from /_ac. \u00b6 Probably WiFi.begin failed with the specified SSID. Activating the debug printing will help you to track down the cause. How change esp8266ap for SSID name in Captive portal? \u00b6 An esp8266ap is default SSID name for SoftAP of captive portal and password is 12345678 . You can change both by using AutoConnectConfig . How change HTTP port? \u00b6 HTTP port number is defined as a macro in AutoConnect.h header file. You can change it directly with several editors and must re-compile. #define AUTOCONNECT_HTTPPORT 80 Hang up after Reset? \u00b6 If ESP8266 hang up after reset by AutoConnect menu, perhaps manual reset is not yet. Especially if it is not manual reset yet after uploading the sketch, the boot mode will stay 'Uart Download'. There is some discussion about this on the Github's ESP8266 core: https://github.com/esp8266/Arduino/issues/1017 If you received the following message, the boot mode is still sketch uploaded. It needs to the manual reset once. ets Jan 8 2013,rst cause:2, boot mode:(1,6) or (1,7) ets Jan 8 2013,rst cause:4, boot mode:(1,6) or (1,7) wdt reset The correct boot mode for starting the sketch is (3, x) . ESP8266 Boot Messages It is described by ESP8266 Non-OS SDK API Reference , section A.5. Messages Description rst cause 1: power on 2: external reset 4: hardware watchdog reset boot mode (the first parameter) 1: ESP8266 is in UART-down mode (and downloads firmware into flash). 3: ESP8266 is in Flash-boot mode (and boots up from flash). How erase the credentials saved in EEPROM? \u00b6 Make some sketches for erasing the EEPROM area, or some erasing utility is needed. You can prepare the sketch to erase the saved credential with AutoConnectCredential . The AutoConnectCrendential class provides the access method to the saved credential in EEPROM and library source file is including it. A class description of AutoConnectCredential is follows. Include header \u00b6 #include <AutoConnectCredential.h> Constructor \u00b6 AutoConnectCredential(); AutoConnectCredential default constructor. The default offset value is 0. If the offset value is 0, the credential storage area starts from the top of the EEPROM. AutoConnect sometimes overwrites data when using this area with user sketch. AutoConnectCredential( uint16_t offset); Specify offset from the top of the EEPROM for the credential storage area together. The offset value is from 0 to the flash sector size. Public member functions \u00b6 uint8_t entries() Returns number of entries as contained credentials. int8_t load(const char* ssid , struct station_config* config ) Load a credential entry specified ssid to config . Returns -1 as unsuccessfully loaded. bool load(int8_t entry , struct station_config* config ) Load a credential entry to config . The entry parameter specify to index of the entry. bool save(const struct station_config* config ) Save a credential entry stored in config to EEPROM. Returns the true as succeeded. bool del(const char* ssid ) Delete a credential entry specified ssid . Returns the true as successfully deleted. Data structures \u00b6 station_config A structure is included in the ESP8266 SDK. You can use it in the sketch like as follows. extern \"C\" { #include <user_interface.h> } struct station_config { uint8 ssid[ 32 ]; uint8 password[ 64 ]; uint8 bssid_set; uint8 bssid[ 6 ]; }; EEPROM data structure A data structure of the credential saving area in EEPROM as the below. 1 Byte offset Length Value 0 8 AC_CREDT 8 1 Number of contained entries (uint8_t) 9 2 Container size, excluding size of AC_CREDT and size of the number of entries(width for uint16_t type). 11 variable SSID terminated by 0x00. Max length is 32 bytes. variable variable Password plain text terminated by 0x00. Max length is 64 bytes. variable 6 BSSID variable Contained the next entries. (Continuation SSID+Password+BSSID) variable 1 0x00. End of container. Hint With the ESPShaker , you can access EEPROM interactively from the serial monitor, and of course you can erase saved credentials. How locate the link button to the AutoConnect menu? \u00b6 Link button to AutoConnect menu can be embedded into Sketch's web page. The root path of the menu is /_ac by default and embed the following <a></a> tag in the generating HTML. < a style = \"background-color:SteelBlue; display:inline-block; padding:7px 13px; text-decoration:none;\" href = \"/_ac\" > MENU </ a > How much memory does AutoConnect consume? \u00b6 Sketch size \u00b6 It increases about 53K bytes compared to the case without AutoConnect. A sketch size of the most simple example introduced in the Getting started is about 330K bytes. (270K byte without AutoConnect) Heap size \u00b6 It consumes about 2K bytes in the static and about 12K bytes are consumed at the moment when menu executed. I cannot complete to Wi-Fi login from smartphone. \u00b6 Because AutoConnect does not send a login success response to the captive portal requests from the smartphone. The login success response varies iOS, Android and Windows. By analyzing the request URL of different login success inquiries for each OS, the correct behavior can be implemented, but not yet. Please resets ESP8266 from the AutoConnect menu. I cannot see the custom Web page. \u00b6 If the sketch is correct, a JSON syntax error may have occurred. In this case, activate the AC_DEBUG and rerun. If you take the message of JSON syntax error, the Json Assistant helps syntax checking. This online tool is provided by the author of ArduinoJson and is most consistent for the AutoConnect. AutoConnect behaves not stable with my sketch yet. \u00b6 If AutoConnect behavior is not stable with your sketch, you can try the following measures. 1. Change WiFi channel \u00b6 Both ESP8266 and ESP32 can only work on one channel at any given moment, this will cause loss of connection on the channel where your station operates the captive portal. If the channel of the AP which you want to connect is different from the SoftAP channel, the operation of the captive portal will not respond with the screen of the AutoConnect connection attempt remains displayed. In such a case please try the AutoConnectConfig to match the channel to the access point. 2. Change arduino core version \u00b6 I recommend change installed an arduino core version to the upstream when your sketch is not stable with AutoConnect on each board. with ESP8266 arduino core \u00b6 To stabilize the behavior, You can select the lwIP variant to contribute. Lower memory option of Arduino IDE for core version 2.4.2 is based on the lwIP-v2. On the other hand, the core version 2.5.0 upstream is based on the lwIP-2.1.2 stable release. You can select the option from Arduino IDE as Tool menu, if you are using ESP8266 core 2.5.0. It can be select lwIP v2 Lower Memory option. (not lwIP v2 Lower Memory (no features) ) It is expected to improve response performance and stability. with ESP32 arduino core \u00b6 The arduino-esp32 is still under development even if it is a stable release. It is necessary to judge whether the cause of the problem is the core or AutoConnect. Trace the log with the esp32 core and the AutoConnect debug option enabled for problem diagnosis and please you check the issue of arduino-esp32 . The problem that your sketch possesses may already have been solved. 3. Turn on the debug log options \u00b6 To fully enable for the AutoConnect debug logging options, change the following two files. AutoConnectDefs.h #define AC_DEBUG PageBuilder.h 2 #define PB_DEBUG 4. Reports the issue to AutoConnect repository on Github \u00b6 If you can not solve AutoConnect problems please report to Issues . And please make your question comprehensively, not a statement. Include all relevant information as follows. Hardware module Arduino core Version (including the upstream tag ID.) Operating System which you use lwIP variant Problem description If you have a STACK DUMP decoded result with formatted by the code block tag The sketch code with formatted by the code block tag Debug messages output There may be 0xff as an invalid data in the credential saving area. The 0xff area would be reused. \u21a9 PageBuilder.h file exists in the libraries/PageBuilder/src directory under your sketch folder. \u21a9","title":"FAQ"},{"location":"faq.html#after-connected-autoconnect-menu-performs-but-no-happens","text":"If you can access the AutoConnect root path as http://ESP8266IPADDRESS/_ac from browser, probably the sketch uses ESP8266WebServer::handleClient() without AutoConnect::handleRequest() . For AutoConnect menus to work properly, call AutoConnect::handleRequest() after ESP8266WebServer::handleClient() invoked, or use AutoConnect::handleClient() . AutoConnect::handleClient() is equivalent ESP8266WebServer::handleClient combined AutoConnect::handleRequest() . See also the explanation here .","title":" After connected, AutoConnect menu performs but no happens."},{"location":"faq.html#an-esp8266ap-as-softap-was-connected-but-captive-portal-does-not-start","text":"Captive portal detection could not be trapped. It is necessary to disconnect and reset ESP8266 to clear memorized connection data in ESP8266. Also, It may be displayed on the smartphone if the connection information of esp8266ap is wrong. In that case, delete the connection information of esp8266ap memorized by the smartphone once.","title":" An esp8266ap as SoftAP was connected but Captive portal does not start."},{"location":"faq.html#does-not-appear-esp8266ap-in-smartphone","text":"Maybe it is successfully connected at the first WiFi.begin . ESP8266 remembers the last SSID successfully connected and will use at the next. It means SoftAP will only start up when the first WiFi.begin() fails. The saved SSID would be cleared by WiFi.disconnect() with WIFI_STA mode. If you do not want automatic reconnection, you can erase the memorized SSID with the following simple sketch. #include <ESP8266WiFi.h> void setup () { delay( 1000 ); Serial.begin( 115200 ); WiFi.mode(WIFI_STA); delay( 100 ); WiFi.begin(); if (WiFi.waitForConnectResult() == WL_CONNECTED) { WiFi.disconnect(); while (WiFi.status() == WL_CONNECTED) delay( 100 ); } Serial.println( \"WiFi disconnected.\" ); } void loop () { delay( 1000 ); } You can interactively check the WiFi state of ESP8266. Please try ESPShaker . It is ESP8266 interactive serial command processor.","title":" Does not appear esp8266ap in smartphone."},{"location":"faq.html#does-not-response-from-95ac","text":"Probably WiFi.begin failed with the specified SSID. Activating the debug printing will help you to track down the cause.","title":" Does not response from /_ac."},{"location":"faq.html#how-change-esp8266ap-for-ssid-name-in-captive-portal","text":"An esp8266ap is default SSID name for SoftAP of captive portal and password is 12345678 . You can change both by using AutoConnectConfig .","title":" How change esp8266ap for SSID name in Captive portal?"},{"location":"faq.html#how-change-http-port","text":"HTTP port number is defined as a macro in AutoConnect.h header file. You can change it directly with several editors and must re-compile. #define AUTOCONNECT_HTTPPORT 80","title":" How change HTTP port?"},{"location":"faq.html#hang-up-after-reset","text":"If ESP8266 hang up after reset by AutoConnect menu, perhaps manual reset is not yet. Especially if it is not manual reset yet after uploading the sketch, the boot mode will stay 'Uart Download'. There is some discussion about this on the Github's ESP8266 core: https://github.com/esp8266/Arduino/issues/1017 If you received the following message, the boot mode is still sketch uploaded. It needs to the manual reset once. ets Jan 8 2013,rst cause:2, boot mode:(1,6) or (1,7) ets Jan 8 2013,rst cause:4, boot mode:(1,6) or (1,7) wdt reset The correct boot mode for starting the sketch is (3, x) . ESP8266 Boot Messages It is described by ESP8266 Non-OS SDK API Reference , section A.5. Messages Description rst cause 1: power on 2: external reset 4: hardware watchdog reset boot mode (the first parameter) 1: ESP8266 is in UART-down mode (and downloads firmware into flash). 3: ESP8266 is in Flash-boot mode (and boots up from flash).","title":" Hang up after Reset?"},{"location":"faq.html#how-erase-the-credentials-saved-in-eeprom","text":"Make some sketches for erasing the EEPROM area, or some erasing utility is needed. You can prepare the sketch to erase the saved credential with AutoConnectCredential . The AutoConnectCrendential class provides the access method to the saved credential in EEPROM and library source file is including it. A class description of AutoConnectCredential is follows.","title":" How erase the credentials saved in EEPROM?"},{"location":"faq.html#include-header","text":"#include <AutoConnectCredential.h>","title":"Include header"},{"location":"faq.html#constructor","text":"AutoConnectCredential(); AutoConnectCredential default constructor. The default offset value is 0. If the offset value is 0, the credential storage area starts from the top of the EEPROM. AutoConnect sometimes overwrites data when using this area with user sketch. AutoConnectCredential( uint16_t offset); Specify offset from the top of the EEPROM for the credential storage area together. The offset value is from 0 to the flash sector size.","title":"Constructor"},{"location":"faq.html#public-member-functions","text":"uint8_t entries() Returns number of entries as contained credentials. int8_t load(const char* ssid , struct station_config* config ) Load a credential entry specified ssid to config . Returns -1 as unsuccessfully loaded. bool load(int8_t entry , struct station_config* config ) Load a credential entry to config . The entry parameter specify to index of the entry. bool save(const struct station_config* config ) Save a credential entry stored in config to EEPROM. Returns the true as succeeded. bool del(const char* ssid ) Delete a credential entry specified ssid . Returns the true as successfully deleted.","title":"Public member functions"},{"location":"faq.html#data-structures","text":"station_config A structure is included in the ESP8266 SDK. You can use it in the sketch like as follows. extern \"C\" { #include <user_interface.h> } struct station_config { uint8 ssid[ 32 ]; uint8 password[ 64 ]; uint8 bssid_set; uint8 bssid[ 6 ]; }; EEPROM data structure A data structure of the credential saving area in EEPROM as the below. 1 Byte offset Length Value 0 8 AC_CREDT 8 1 Number of contained entries (uint8_t) 9 2 Container size, excluding size of AC_CREDT and size of the number of entries(width for uint16_t type). 11 variable SSID terminated by 0x00. Max length is 32 bytes. variable variable Password plain text terminated by 0x00. Max length is 64 bytes. variable 6 BSSID variable Contained the next entries. (Continuation SSID+Password+BSSID) variable 1 0x00. End of container. Hint With the ESPShaker , you can access EEPROM interactively from the serial monitor, and of course you can erase saved credentials.","title":"Data structures"},{"location":"faq.html#how-locate-the-link-button-to-the-autoconnect-menu","text":"Link button to AutoConnect menu can be embedded into Sketch's web page. The root path of the menu is /_ac by default and embed the following <a></a> tag in the generating HTML. < a style = \"background-color:SteelBlue; display:inline-block; padding:7px 13px; text-decoration:none;\" href = \"/_ac\" > MENU </ a >","title":" How locate the link button to the AutoConnect menu?"},{"location":"faq.html#how-much-memory-does-autoconnect-consume","text":"","title":" How much memory does AutoConnect consume?"},{"location":"faq.html#sketch-size","text":"It increases about 53K bytes compared to the case without AutoConnect. A sketch size of the most simple example introduced in the Getting started is about 330K bytes. (270K byte without AutoConnect)","title":"Sketch size"},{"location":"faq.html#heap-size","text":"It consumes about 2K bytes in the static and about 12K bytes are consumed at the moment when menu executed.","title":"Heap size"},{"location":"faq.html#i-cannot-complete-to-wi-fi-login-from-smartphone","text":"Because AutoConnect does not send a login success response to the captive portal requests from the smartphone. The login success response varies iOS, Android and Windows. By analyzing the request URL of different login success inquiries for each OS, the correct behavior can be implemented, but not yet. Please resets ESP8266 from the AutoConnect menu.","title":" I cannot complete to Wi-Fi login from smartphone."},{"location":"faq.html#i-cannot-see-the-custom-web-page","text":"If the sketch is correct, a JSON syntax error may have occurred. In this case, activate the AC_DEBUG and rerun. If you take the message of JSON syntax error, the Json Assistant helps syntax checking. This online tool is provided by the author of ArduinoJson and is most consistent for the AutoConnect.","title":" I cannot see the custom Web page."},{"location":"faq.html#autoconnect-behaves-not-stable-with-my-sketch-yet","text":"If AutoConnect behavior is not stable with your sketch, you can try the following measures.","title":" AutoConnect behaves not stable with my sketch yet."},{"location":"faq.html#1-change-wifi-channel","text":"Both ESP8266 and ESP32 can only work on one channel at any given moment, this will cause loss of connection on the channel where your station operates the captive portal. If the channel of the AP which you want to connect is different from the SoftAP channel, the operation of the captive portal will not respond with the screen of the AutoConnect connection attempt remains displayed. In such a case please try the AutoConnectConfig to match the channel to the access point.","title":"1. Change WiFi channel"},{"location":"faq.html#2-change-arduino-core-version","text":"I recommend change installed an arduino core version to the upstream when your sketch is not stable with AutoConnect on each board.","title":"2. Change arduino core version"},{"location":"faq.html#with-esp8266-arduino-core","text":"To stabilize the behavior, You can select the lwIP variant to contribute. Lower memory option of Arduino IDE for core version 2.4.2 is based on the lwIP-v2. On the other hand, the core version 2.5.0 upstream is based on the lwIP-2.1.2 stable release. You can select the option from Arduino IDE as Tool menu, if you are using ESP8266 core 2.5.0. It can be select lwIP v2 Lower Memory option. (not lwIP v2 Lower Memory (no features) ) It is expected to improve response performance and stability.","title":"with ESP8266 arduino core"},{"location":"faq.html#with-esp32-arduino-core","text":"The arduino-esp32 is still under development even if it is a stable release. It is necessary to judge whether the cause of the problem is the core or AutoConnect. Trace the log with the esp32 core and the AutoConnect debug option enabled for problem diagnosis and please you check the issue of arduino-esp32 . The problem that your sketch possesses may already have been solved.","title":"with ESP32 arduino core"},{"location":"faq.html#3-turn-on-the-debug-log-options","text":"To fully enable for the AutoConnect debug logging options, change the following two files. AutoConnectDefs.h #define AC_DEBUG PageBuilder.h 2 #define PB_DEBUG","title":"3. Turn on the debug log options"},{"location":"faq.html#4-reports-the-issue-to-autoconnect-repository-on-github","text":"If you can not solve AutoConnect problems please report to Issues . And please make your question comprehensively, not a statement. Include all relevant information as follows. Hardware module Arduino core Version (including the upstream tag ID.) Operating System which you use lwIP variant Problem description If you have a STACK DUMP decoded result with formatted by the code block tag The sketch code with formatted by the code block tag Debug messages output There may be 0xff as an invalid data in the credential saving area. The 0xff area would be reused. \u21a9 PageBuilder.h file exists in the libraries/PageBuilder/src directory under your sketch folder. \u21a9","title":"4. Reports the issue to AutoConnect repository on Github"},{"location":"gettingstarted.html","text":"Let's do the most simple sketch \u00b6 Open the Arduino IDE, write the following sketch and upload it. The feature of this sketch is that the SSID and Password are not coded. #include <ESP8266WiFi.h> // Replace with WiFi.h for ESP32 #include <ESP8266WebServer.h> // Replace with WebServer.h for ESP32 #include <AutoConnect.h> ESP8266WebServer Server; // Replace with WebServer for ESP32 AutoConnect Portal (Server); void rootPage () { char content[] = \"Hello, world\" ; Server.send( 200 , \"text/plain\" , content); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); Server.on( \"/\" , rootPage); if (Portal.begin()) { Serial.println( \"WiFi connected: \" + WiFi.localIP().toString()); } } void loop () { Portal.handleClient(); } The above code can be applied to ESP8266. To apply to ESP32, replace ESP8266WebServer class with WebServer and include WiFi.h and WebServer.h of arduino-esp32 appropriately. Run at first \u00b6 After about 30 seconds, if the ESP8266 cannot connect to nearby Wi-Fi spot, you pull out your smartphone and open Wi-Fi settings from the Settings Apps. You can see the esp8266ap 1 in the list of \"CHOOSE A NETWORK...\" . Then tap the esp8266ap and enter password 12345678 , a something screen pops up automatically as shown below. This is the AutoConnect statistics screen. This screen displays the current status of the established connection, WiFi mode, IP address, free memory size, and etc. Also, the hamburger icon is the control menu of AutoConnect seems at the upper right. By tap the hamburger icon, the control menu appears as the below. Join to the new access point \u00b6 Here, tap \"Configure new AP\" to connect the new access point then the SSID configuration screen would be shown. Enter the SSID and Passphrase and tap apply to start connecting the access point. Connection establishment \u00b6 After connection established, the current status screen will appear. It is already connected to WLAN with WiFi mode as WIFI_AP_STA and the IP connection status is displayed there including the SSID. Then at this screen, you have two options for the next step. For one, continues execution of the sketch while keeping this connection. You can access ESP8266 via browser through the established IP address after cancel to \" Log in \" by upper right on the screen. Or, \" RESET \" can be selected. The ESP8266 resets and reboots. After that, immediately before the connection will be restored automatically with WIFI_STA mode. Run for usually \u00b6 The IP address of ESP8266 would be displayed on the serial monitor after connection restored. Please access its address from the browser. The \"Hello, world\" page will respond. It's the page that was handled by in the sketch with \" on \" function of ESP8266WebServer . window.onload = function() { Gifffer(); }; When applied to ESP32, SSID will appear as esp32ap . \u21a9","title":"Getting started"},{"location":"gettingstarted.html#lets-do-the-most-simple-sketch","text":"Open the Arduino IDE, write the following sketch and upload it. The feature of this sketch is that the SSID and Password are not coded. #include <ESP8266WiFi.h> // Replace with WiFi.h for ESP32 #include <ESP8266WebServer.h> // Replace with WebServer.h for ESP32 #include <AutoConnect.h> ESP8266WebServer Server; // Replace with WebServer for ESP32 AutoConnect Portal (Server); void rootPage () { char content[] = \"Hello, world\" ; Server.send( 200 , \"text/plain\" , content); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); Server.on( \"/\" , rootPage); if (Portal.begin()) { Serial.println( \"WiFi connected: \" + WiFi.localIP().toString()); } } void loop () { Portal.handleClient(); } The above code can be applied to ESP8266. To apply to ESP32, replace ESP8266WebServer class with WebServer and include WiFi.h and WebServer.h of arduino-esp32 appropriately.","title":"Let's do the most simple sketch"},{"location":"gettingstarted.html#run-at-first","text":"After about 30 seconds, if the ESP8266 cannot connect to nearby Wi-Fi spot, you pull out your smartphone and open Wi-Fi settings from the Settings Apps. You can see the esp8266ap 1 in the list of \"CHOOSE A NETWORK...\" . Then tap the esp8266ap and enter password 12345678 , a something screen pops up automatically as shown below. This is the AutoConnect statistics screen. This screen displays the current status of the established connection, WiFi mode, IP address, free memory size, and etc. Also, the hamburger icon is the control menu of AutoConnect seems at the upper right. By tap the hamburger icon, the control menu appears as the below.","title":" Run at first"},{"location":"gettingstarted.html#join-to-the-new-access-point","text":"Here, tap \"Configure new AP\" to connect the new access point then the SSID configuration screen would be shown. Enter the SSID and Passphrase and tap apply to start connecting the access point.","title":" Join to the new access point"},{"location":"gettingstarted.html#connection-establishment","text":"After connection established, the current status screen will appear. It is already connected to WLAN with WiFi mode as WIFI_AP_STA and the IP connection status is displayed there including the SSID. Then at this screen, you have two options for the next step. For one, continues execution of the sketch while keeping this connection. You can access ESP8266 via browser through the established IP address after cancel to \" Log in \" by upper right on the screen. Or, \" RESET \" can be selected. The ESP8266 resets and reboots. After that, immediately before the connection will be restored automatically with WIFI_STA mode.","title":" Connection establishment"},{"location":"gettingstarted.html#run-for-usually","text":"The IP address of ESP8266 would be displayed on the serial monitor after connection restored. Please access its address from the browser. The \"Hello, world\" page will respond. It's the page that was handled by in the sketch with \" on \" function of ESP8266WebServer . window.onload = function() { Gifffer(); }; When applied to ESP32, SSID will appear as esp32ap . \u21a9","title":" Run for usually"},{"location":"howtoembed.html","text":"Embed the AutoConnect to the sketch \u00b6 Here holds two case examples. Both examples perform the same function. Only how to incorporate the AutoConnect into the sketch differs. Also included in the sample folder, HandlePortal.ino also shows how to use the PageBuilder library for HTML assemblies. What does this example do? \u00b6 Uses the web interface to light the LED connected to the NodeMCU module D0 port (which could be referred to as BUILTIN_LED ), the following animation is it. Access to the ESP8266 module connected WiFi from the browser then the page contains the current value of the D0 port would be displayed. The page has the buttons to switch the port value. The LED blinks according to the value of the button that was clicked. This example is a typical sketch of manipulating ESP8266's GPIO via WLAN. Embed AutoConnect library into this sketch. There are few places to be changed. And you can use AutoConnect's captive portal function to establish a connection freely to other WiFi spots. Embed AutoConnect \u00b6 Pattern A. \u00b6 Bind to ESP8266WebServer, performs handleClient with handleRequest. In what situations should the handleRequest be used. It is something needs to be done immediately after the handle client. It is better to call only AutoConnect::handleClient whenever possible. Pattern B. \u00b6 Declare only AutoConnect, performs handleClient. Used with MQTT as a client application \u00b6 The effect of AutoConnect is not only for ESP8266/ESP32 as the web server. It has advantages for something WiFi client as well. For example, AutoConnect is also effective for publishing MQTT messages from various measurement points. Even if the SSID is different for each measurement point, it is not necessary to modify the sketch. This example tries to publish the WiFi signal strength of ESP8266 with MQTT. It uses the ThingSpeak for MQTT broker. ESP8266 publishes the RSSI value to the channel created on ThingSpeak as MQTT client . This example is well suited to demonstrate the usefulness of AutoConnect, as RSSI values are measured at each access point usually. Just adding a few lines of code makes it unnecessary to upload sketches with the different SSIDs rewrite for each access point. Advance procedures \u00b6 Arduino Client for MQTT - It's the PubSubClient , install it to Arduino IDE. If you have the latest version already, this step does not need. Create a channel on ThingSpeak. Get the Channel API Keys from ThingSpeak, put its keys to the sketch. The ThingSpeak is the open IoT platform. It is capable of sending data privately to the cloud and analyzing, visualizing its data. If you do not have an account of ThingSpeak, you need that account to proceed further. ThingSpeak has the free plan for the account which uses within the scope of this example. 1 You can sign up with the ThingSpeak sign-up page . Whether you should do sign-up or not. You are entrusted with the final judgment of account creation for ThingSpeak. Create an account at your own risk. Create a channel on ThingSpeak \u00b6 Sign in ThingSpeak. Select Channels to show the My Channels , then click New Channel . At the New Channel screen, enter each field as a below. And click Save Channel at the bottom of the screen to save. Name: ESP8266 Signal Strength Description: ESP8266 RSSI publish Field1: RSSI Get Channel ID and API Keys \u00b6 The channel successfully created, you can see the channel status screen as a below. Channel ID is displayed there. 2 Here, switch the channel status tab to API Keys . The API key required to publish the message is the Write API Key . The last key you need is the User API Key and can be confirmed it in the user profile. Pull down Account from the top menu, select My profile . Then you can see the ThingSpeak settings and the User API Key is displayed middle of this screen. The sketch, Publishes messages \u00b6 The complete code of the sketch is mqttRSSI.ino in the AutoConnect repository . Replace the following #define in a sketch with User API Key , Write API Key and Channel ID . After Keys updated, compile the sketch and upload it. #define MQTT_USER_KEY \"****************\" // Replace to User API Key. #define CHANNEL_ID \"******\" // Replace to Channel ID. #define CHANNEL_API_KEY_WR \"****************\" // Replace to the write API Key. Publish messages \u00b6 After upload and reboot complete, the message publishing will start via the access point now set. The message carries RSSI as the current WiFi signal strength. The signal strength variations in RSSI are displayed on ThingSpeak's Channel status screen. How embed to your sketches \u00b6 For the client sketches, the code required to connect to WiFi is the following four parts only. #include directive 3 Include AutoConnect.h header file behind the include of ESP8266WiFi.h . Declare AutoConnect The declaration of the AutoConnect variable is not accompanied by ESP8266WebServer. Invokes \"begin()\" Call AutoConnect::begin . If you need to assign a static IP address, executes AutoConnectConfig before that. Performs \"handleClent()\" in \"loop()\" Invokes AutoConnect::handleClient() at inside loop() to enable the AutoConnect menu. window.onload = function() { Gifffer(); }; As of March 21, 2018. \u21a9 '454951' in the example above, but your channel ID should be different. \u21a9 #include <ESP8266WebServer.h> does not necessary for uses only client. \u21a9","title":"How to embed"},{"location":"howtoembed.html#embed-the-autoconnect-to-the-sketch","text":"Here holds two case examples. Both examples perform the same function. Only how to incorporate the AutoConnect into the sketch differs. Also included in the sample folder, HandlePortal.ino also shows how to use the PageBuilder library for HTML assemblies.","title":"Embed the AutoConnect to the sketch"},{"location":"howtoembed.html#what-does-this-example-do","text":"Uses the web interface to light the LED connected to the NodeMCU module D0 port (which could be referred to as BUILTIN_LED ), the following animation is it. Access to the ESP8266 module connected WiFi from the browser then the page contains the current value of the D0 port would be displayed. The page has the buttons to switch the port value. The LED blinks according to the value of the button that was clicked. This example is a typical sketch of manipulating ESP8266's GPIO via WLAN. Embed AutoConnect library into this sketch. There are few places to be changed. And you can use AutoConnect's captive portal function to establish a connection freely to other WiFi spots.","title":"What does this example do?"},{"location":"howtoembed.html#embed-autoconnect","text":"","title":"Embed AutoConnect"},{"location":"howtoembed.html#pattern-a","text":"Bind to ESP8266WebServer, performs handleClient with handleRequest. In what situations should the handleRequest be used. It is something needs to be done immediately after the handle client. It is better to call only AutoConnect::handleClient whenever possible.","title":" Pattern A."},{"location":"howtoembed.html#pattern-b","text":"Declare only AutoConnect, performs handleClient.","title":" Pattern B."},{"location":"howtoembed.html#used-with-mqtt-as-a-client-application","text":"The effect of AutoConnect is not only for ESP8266/ESP32 as the web server. It has advantages for something WiFi client as well. For example, AutoConnect is also effective for publishing MQTT messages from various measurement points. Even if the SSID is different for each measurement point, it is not necessary to modify the sketch. This example tries to publish the WiFi signal strength of ESP8266 with MQTT. It uses the ThingSpeak for MQTT broker. ESP8266 publishes the RSSI value to the channel created on ThingSpeak as MQTT client . This example is well suited to demonstrate the usefulness of AutoConnect, as RSSI values are measured at each access point usually. Just adding a few lines of code makes it unnecessary to upload sketches with the different SSIDs rewrite for each access point.","title":"Used with MQTT as a client application"},{"location":"howtoembed.html#advance-procedures","text":"Arduino Client for MQTT - It's the PubSubClient , install it to Arduino IDE. If you have the latest version already, this step does not need. Create a channel on ThingSpeak. Get the Channel API Keys from ThingSpeak, put its keys to the sketch. The ThingSpeak is the open IoT platform. It is capable of sending data privately to the cloud and analyzing, visualizing its data. If you do not have an account of ThingSpeak, you need that account to proceed further. ThingSpeak has the free plan for the account which uses within the scope of this example. 1 You can sign up with the ThingSpeak sign-up page . Whether you should do sign-up or not. You are entrusted with the final judgment of account creation for ThingSpeak. Create an account at your own risk.","title":"Advance procedures"},{"location":"howtoembed.html#create-a-channel-on-thingspeak","text":"Sign in ThingSpeak. Select Channels to show the My Channels , then click New Channel . At the New Channel screen, enter each field as a below. And click Save Channel at the bottom of the screen to save. Name: ESP8266 Signal Strength Description: ESP8266 RSSI publish Field1: RSSI","title":"Create a channel on ThingSpeak"},{"location":"howtoembed.html#get-channel-id-and-api-keys","text":"The channel successfully created, you can see the channel status screen as a below. Channel ID is displayed there. 2 Here, switch the channel status tab to API Keys . The API key required to publish the message is the Write API Key . The last key you need is the User API Key and can be confirmed it in the user profile. Pull down Account from the top menu, select My profile . Then you can see the ThingSpeak settings and the User API Key is displayed middle of this screen.","title":"Get Channel ID and API Keys"},{"location":"howtoembed.html#the-sketch-publishes-messages","text":"The complete code of the sketch is mqttRSSI.ino in the AutoConnect repository . Replace the following #define in a sketch with User API Key , Write API Key and Channel ID . After Keys updated, compile the sketch and upload it. #define MQTT_USER_KEY \"****************\" // Replace to User API Key. #define CHANNEL_ID \"******\" // Replace to Channel ID. #define CHANNEL_API_KEY_WR \"****************\" // Replace to the write API Key.","title":"The sketch, Publishes messages"},{"location":"howtoembed.html#publish-messages","text":"After upload and reboot complete, the message publishing will start via the access point now set. The message carries RSSI as the current WiFi signal strength. The signal strength variations in RSSI are displayed on ThingSpeak's Channel status screen.","title":"Publish messages"},{"location":"howtoembed.html#how-embed-to-your-sketches","text":"For the client sketches, the code required to connect to WiFi is the following four parts only. #include directive 3 Include AutoConnect.h header file behind the include of ESP8266WiFi.h . Declare AutoConnect The declaration of the AutoConnect variable is not accompanied by ESP8266WebServer. Invokes \"begin()\" Call AutoConnect::begin . If you need to assign a static IP address, executes AutoConnectConfig before that. Performs \"handleClent()\" in \"loop()\" Invokes AutoConnect::handleClient() at inside loop() to enable the AutoConnect menu. window.onload = function() { Gifffer(); }; As of March 21, 2018. \u21a9 '454951' in the example above, but your channel ID should be different. \u21a9 #include <ESP8266WebServer.h> does not necessary for uses only client. \u21a9","title":"How embed to your sketches"},{"location":"license.html","text":"MIT License Copyright \u00a9 2018 Hieromon Ikasamo Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Acknowledgments The Luxbar is licensed under the MIT License. https://github.com/balzss/luxbar ArduinoJson is licensed under the MIT License. https://arduinojson.org/","title":"License"},{"location":"menu.html","text":"Luxbar The AutoConnect menu is developed using the LuxBar which is licensed under the MIT License. See the License . Where the from \u00b6 The AutoConnect menu appears when you access the AutoConnect root path . It is assigned \" /_ac \" located on the local IP address of ESP8266/ESP32 module by default. This location can be changed in the sketch. The following screen will appear at access to http://{localIP}/_ac 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 at right on top. (e.g. http://192.168.244.1/_ac for SoftAP mode.) What's the local IP? A local IP means Local IP at connection established or SoftAP's IP. Right on top \u00b6 Currently, AutoConnect supports four menus. Undermost menu as \"HOME\" returns to the home path of its sketch. Configure new AP : Configure SSID and Password for new access point. Open SSIDs : Opens the past SSID which has been established connection from EEPROM. Disconnect : Disconnects current connection. Reset... : Rest the ESP8266/ESP32 module. HOME : Return to user home page. Configure new AP \u00b6 Scan all available access point in the vicinity and display it. Strength and security of the detected AP are marked. The is indicated for the SSID that needs a security key. \" Hidden: \" means the number of hidden SSIDs discovered. Enter SSID and Passphrase and tap \" apply \" to starts WiFi connection. Open SSIDs \u00b6 Once it was established WiFi connection, its SSID and password will be saved in EEPROM of ESP8266/ESP32 automatically. The Open SSIDs 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. Disconnect \u00b6 Disconnect ESP8266/ESP32 from the current connection. It can also reset the ESP8266/ESP32 automatically after disconnection by instructing with using API in the sketch. 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. Reset... \u00b6 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 esp8266ap or esp32ap of an access point will disappear from WLAN. Not every ESP8266 module will be rebooted normally The Reset menu is using the ESP.reset() function for ESP8266. This is an almost hardware reset. In order to resume the sketch normally, the state of GPIO0 is important. Since this depends on the circuit implementation for each module, not every module will be rebooted normally. See also FAQ . Custom menu items \u00b6 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 Custom Web pages in AutoConnect menu . HOME \u00b6 A HOME item located at the bottom of the menu list is a link to the home path. The URI as the home path is / by default, and it is defined by AUTOCONNECT_HOMEURI with AutoConnectDefs.h file. #define AUTOCONNECT_HOMEURI \"/\" You can change the HOME path using the AutoConnect API. The AutoConnect::home function sets the URI as a link of the HOME item of the AutoConnect menu. Extend AutoConnect menu with your sketches \u00b6 The AutoConnect menu can contain HTML pages of your sketch as custom items. It works for HTML pages implemented by ESP8266WebServer::on handler or WebServer::on 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 FSBrowser to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code. You can extend the AutoConnect menu to match legacy sketches and according to the procedure described in the Advanced Usage section .","title":"AutoConnect menu"},{"location":"menu.html#where-the-from","text":"The AutoConnect menu appears when you access the AutoConnect root path . It is assigned \" /_ac \" located on the local IP address of ESP8266/ESP32 module by default. This location can be changed in the sketch. The following screen will appear at access to http://{localIP}/_ac 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 at right on top. (e.g. http://192.168.244.1/_ac for SoftAP mode.) What's the local IP? A local IP means Local IP at connection established or SoftAP's IP.","title":" Where the from"},{"location":"menu.html#right-on-top","text":"Currently, AutoConnect supports four menus. Undermost menu as \"HOME\" returns to the home path of its sketch. Configure new AP : Configure SSID and Password for new access point. Open SSIDs : Opens the past SSID which has been established connection from EEPROM. Disconnect : Disconnects current connection. Reset... : Rest the ESP8266/ESP32 module. HOME : Return to user home page.","title":" Right on top"},{"location":"menu.html#configure-new-ap","text":"Scan all available access point in the vicinity and display it. Strength and security of the detected AP are marked. The is indicated for the SSID that needs a security key. \" Hidden: \" means the number of hidden SSIDs discovered. Enter SSID and Passphrase and tap \" apply \" to starts WiFi connection.","title":" Configure new AP"},{"location":"menu.html#open-ssids","text":"Once it was established WiFi connection, its SSID and password will be saved in EEPROM of ESP8266/ESP32 automatically. The Open SSIDs 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.","title":" Open SSIDs"},{"location":"menu.html#disconnect","text":"Disconnect ESP8266/ESP32 from the current connection. It can also reset the ESP8266/ESP32 automatically after disconnection by instructing with using API in the sketch. 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.","title":" Disconnect"},{"location":"menu.html#reset","text":"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 esp8266ap or esp32ap of an access point will disappear from WLAN. Not every ESP8266 module will be rebooted normally The Reset menu is using the ESP.reset() function for ESP8266. This is an almost hardware reset. In order to resume the sketch normally, the state of GPIO0 is important. Since this depends on the circuit implementation for each module, not every module will be rebooted normally. See also FAQ .","title":" Reset..."},{"location":"menu.html#custom-menu-items","text":"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 Custom Web pages in AutoConnect menu .","title":" Custom menu items"},{"location":"menu.html#home","text":"A HOME item located at the bottom of the menu list is a link to the home path. The URI as the home path is / by default, and it is defined by AUTOCONNECT_HOMEURI with AutoConnectDefs.h file. #define AUTOCONNECT_HOMEURI \"/\" You can change the HOME path using the AutoConnect API. The AutoConnect::home function sets the URI as a link of the HOME item of the AutoConnect menu.","title":" HOME"},{"location":"menu.html#extend-autoconnect-menu-with-your-sketches","text":"The AutoConnect menu can contain HTML pages of your sketch as custom items. It works for HTML pages implemented by ESP8266WebServer::on handler or WebServer::on 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 FSBrowser to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code. You can extend the AutoConnect menu to match legacy sketches and according to the procedure described in the Advanced Usage section .","title":" Extend AutoConnect menu with your sketches"},{"location":"menuize.html","text":"What menus can be made using AutoConnect \u00b6 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 \u00b6 The sketch can display the AutoConnect menu by following three patterns depending on AutoConnect-API usage. \u2002 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 . \u2002 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 Custom Web pages section . \u2002 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 \u00b6 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: Add AutoConnect declaration. Add the menu item named \" Edit \" and \" List \" of AutoConnectAux as each page. Replace the instance of ESP8266WebServer to AutoConnect. Change the menu title to FSBrowser using AutoConnectConfig::title . Join the legacy pages to AutoConnect declared at step #1 using AutoConnect::join . Joining multiple at one time with std::vector 's' list initialization . According to the basic procedure of AutoConnect. Establish a connection with AutoConnect::begin and perform AutoConnect::handleClient in loop() . \u2002 Modification for FSBrowser (part of sketch code) window.onload = function() { Gifffer(); };","title":"Constucting the menu"},{"location":"menuize.html#what-menus-can-be-made-using-autoconnect","text":"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.","title":"What menus can be made using AutoConnect"},{"location":"menuize.html#basic-mechanism-of-menu-generation","text":"The sketch can display the AutoConnect menu by following three patterns depending on AutoConnect-API usage. \u2002 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 . \u2002 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 Custom Web pages section . \u2002 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.","title":"Basic mechanism of menu generation"},{"location":"menuize.html#place-the-item-for-the-legacy-sketches-on-the-menu","text":"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: Add AutoConnect declaration. Add the menu item named \" Edit \" and \" List \" of AutoConnectAux as each page. Replace the instance of ESP8266WebServer to AutoConnect. Change the menu title to FSBrowser using AutoConnectConfig::title . Join the legacy pages to AutoConnect declared at step #1 using AutoConnect::join . Joining multiple at one time with std::vector 's' list initialization . According to the basic procedure of AutoConnect. Establish a connection with AutoConnect::begin and perform AutoConnect::handleClient in loop() . \u2002 Modification for FSBrowser (part of sketch code) window.onload = function() { Gifffer(); };","title":"Place the item for the legacy sketches on the menu"},{"location":"wojson.html","text":"Suppress increase in memory consumption \u00b6 Custom Web page processing consumes a lot of memory. AutoConnect will take a whole string of the JSON document for the custom Web pages into memory. The required buffer size for the JSON document of example sketch mqttRSSI reaches approximately 3000 bytes. And actually, it needs twice the heap area. Especially this constraint will be a problem with the ESP8266 which has a heap size poor. AutoConnect can handle custom Web pages without using JSON. In that case, since the ArduinoJson library will not be bound, the sketch size will also be reduced. Writing the custom Web pages without JSON \u00b6 To handle a custom Web page without using JSON, follow the steps below. Create or define AutoConnectAux for each page. Create or define AutoConnectElement(s) . Add AutoConnectElement(s) to AutoConnectAux. Create more AutoConnectAux containing AutoConnectElement(s) , if necessary. Register the request handlers for the custom Web pages. Join prepared AutoConnectAux(s) to AutoConnect. Invoke AutoConnect::begin() . In addition to the above procedure, to completely cut off for binding with the ArduinoJson library, turn off the ArduinoJson use indicator which is declared by the AutoConnect definitions . Its declaration is in AutoConnectDefs.h file. 1 // Comment out the AUTOCONNECT_USE_JSON macro to detach the ArduinoJson. #define AUTOCONNECT_USE_JSON JSON processing will be disabled Commenting out the AUTOCONNECT_USE_JSON macro invalidates all functions related to JSON processing. If the sketch is using the JSON function, it will result in a compile error. Implementation example without ArduinoJson \u00b6 The code excluding JSON processing from the mqttRSSI sketch attached to the library is as follows. (It is a part of code. Refer to mqttRSSI_NA.ino for the whole sketch.) The JSON document for mqttRSSI [ { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_setting\" , \"menu\" : true , \"element\" : [ { \"name\" : \"header\" , \"type\" : \"ACText\" , \"value\" : \"<h2>MQTT broker settings</h2>\" , \"style\" : \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\" , \"style\" : \"font-family:serif;color:#4682b4;\" }, { \"name\" : \"mqttserver\" , \"type\" : \"ACInput\" , \"value\" : \"\" , \"label\" : \"Server\" , \"pattern\" : \"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\\\-]*[a-zA-Z0-9])\\\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\\\-]*[A-Za-z0-9])$\" , \"placeholder\" : \"MQTT broker server\" }, { \"name\" : \"channelid\" , \"type\" : \"ACInput\" , \"label\" : \"Channel ID\" , \"pattern\" : \"^[0-9]{6}$\" }, { \"name\" : \"userkey\" , \"type\" : \"ACInput\" , \"label\" : \"User Key\" }, { \"name\" : \"apikey\" , \"type\" : \"ACInput\" , \"label\" : \"API Key\" }, { \"name\" : \"newline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr>\" }, { \"name\" : \"uniqueid\" , \"type\" : \"ACCheckbox\" , \"value\" : \"unique\" , \"label\" : \"Use APID unique\" , \"checked\" : false }, { \"name\" : \"period\" , \"type\" : \"ACRadio\" , \"value\" : [ \"30 sec.\" , \"60 sec.\" , \"180 sec.\" ], \"label\" : \"Update period\" , \"arrange\" : \"vertical\" , \"checked\" : 1 }, { \"name\" : \"newline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr>\" }, { \"name\" : \"hostname\" , \"type\" : \"ACInput\" , \"value\" : \"\" , \"label\" : \"ESP host name\" , \"pattern\" : \"^([a-zA-Z0-9]([a-zA-Z0-9-])*[a-zA-Z0-9]){1,32}$\" }, { \"name\" : \"save\" , \"type\" : \"ACSubmit\" , \"value\" : \"Save&Start\" , \"uri\" : \"/mqtt_save\" }, { \"name\" : \"discard\" , \"type\" : \"ACSubmit\" , \"value\" : \"Discard\" , \"uri\" : \"/\" } ] }, { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_save\" , \"menu\" : false , \"element\" : [ { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"<h4>Parameters saved as:</h4>\" , \"style\" : \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\" : \"parameters\" , \"type\" : \"ACText\" }, { \"name\" : \"clear\" , \"type\" : \"ACSubmit\" , \"value\" : \"Clear channel\" , \"uri\" : \"/mqtt_clear\" } ] } ] Exclude the JSON and replace to the AutoConnectElements natively // In the declaration, // Declare AutoConnectElements for the page asf /mqtt_setting ACText(header, \"<h2>MQTT broker settings</h2>\" , \"text-align:center;color:#2f4f4f;padding:10px;\" ); ACText(caption, \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\" , \"font-family:serif;color:#4682b4;\" ); ACInput(mqttserver, \"\" , \"Server\" , \"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9 \\\\ -]*[a-zA-Z0-9]) \\\\ .)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9 \\\\ -]*[A-Za-z0-9])$\" , \"MQTT broker server\" ); ACInput(channelid, \"\" , \"Channel ID\" , \"^[0-9]{6}$\" ); ACInput(userkey, \"\" , \"User Key\" ); ACInput(apikey, \"\" , \"API Key\" ); ACElement(newline, \"<hr>\" ); ACCheckbox(uniqueid, \"unique\" , \"Use APID unique\" ); ACRadio(period, { \"30 sec.\" , \"60 sec.\" , \"180 sec.\" }, \"Update period\" , AC_Vertical, 1 ); ACSubmit(save, \"Start\" , \"mqtt_save\" ); ACSubmit(discard, \"Discard\" , \"/\" ); // Declare the custom Web page as /mqtt_setting and contains the AutoConnectElements AutoConnectAux mqtt_setting ( \"/mqtt_setting\" , \"MQTT Setting\" , true, { header, caption, mqttserver, channelid, userkey, apikey, newline, uniqueid, period, newline, save, discard }); // Declare AutoConnectElements for the page as /mqtt_save ACText(caption2, \"<h4>Parameters available as:</h4>\" , \"text-align:center;color:#2f4f4f;padding:10px;\" ); ACText(parameters); ACSubmit(clear, \"Clear channel\" , \"/mqtt_clear\" ); // Declare the custom Web page as /mqtt_save and contains the AutoConnectElements AutoConnectAux mqtt_save ( \"/mqtt_save\" , \"MQTT Setting\" , false, { caption2, parameters, clear }); // In the setup(), // Join the custom Web pages and performs begin portal.join({ mqtt_setting, mqtt_save }); portal.begin(); Detaching the ArduinoJson library reduces the sketch size by approximately 10K bytes. \u21a9","title":"Custom Web pages w/o JSON"},{"location":"wojson.html#suppress-increase-in-memory-consumption","text":"Custom Web page processing consumes a lot of memory. AutoConnect will take a whole string of the JSON document for the custom Web pages into memory. The required buffer size for the JSON document of example sketch mqttRSSI reaches approximately 3000 bytes. And actually, it needs twice the heap area. Especially this constraint will be a problem with the ESP8266 which has a heap size poor. AutoConnect can handle custom Web pages without using JSON. In that case, since the ArduinoJson library will not be bound, the sketch size will also be reduced.","title":"Suppress increase in memory consumption"},{"location":"wojson.html#writing-the-custom-web-pages-without-json","text":"To handle a custom Web page without using JSON, follow the steps below. Create or define AutoConnectAux for each page. Create or define AutoConnectElement(s) . Add AutoConnectElement(s) to AutoConnectAux. Create more AutoConnectAux containing AutoConnectElement(s) , if necessary. Register the request handlers for the custom Web pages. Join prepared AutoConnectAux(s) to AutoConnect. Invoke AutoConnect::begin() . In addition to the above procedure, to completely cut off for binding with the ArduinoJson library, turn off the ArduinoJson use indicator which is declared by the AutoConnect definitions . Its declaration is in AutoConnectDefs.h file. 1 // Comment out the AUTOCONNECT_USE_JSON macro to detach the ArduinoJson. #define AUTOCONNECT_USE_JSON JSON processing will be disabled Commenting out the AUTOCONNECT_USE_JSON macro invalidates all functions related to JSON processing. If the sketch is using the JSON function, it will result in a compile error.","title":"Writing the custom Web pages without JSON"},{"location":"wojson.html#implementation-example-without-arduinojson","text":"The code excluding JSON processing from the mqttRSSI sketch attached to the library is as follows. (It is a part of code. Refer to mqttRSSI_NA.ino for the whole sketch.) The JSON document for mqttRSSI [ { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_setting\" , \"menu\" : true , \"element\" : [ { \"name\" : \"header\" , \"type\" : \"ACText\" , \"value\" : \"<h2>MQTT broker settings</h2>\" , \"style\" : \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\" , \"style\" : \"font-family:serif;color:#4682b4;\" }, { \"name\" : \"mqttserver\" , \"type\" : \"ACInput\" , \"value\" : \"\" , \"label\" : \"Server\" , \"pattern\" : \"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\\\-]*[a-zA-Z0-9])\\\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\\\-]*[A-Za-z0-9])$\" , \"placeholder\" : \"MQTT broker server\" }, { \"name\" : \"channelid\" , \"type\" : \"ACInput\" , \"label\" : \"Channel ID\" , \"pattern\" : \"^[0-9]{6}$\" }, { \"name\" : \"userkey\" , \"type\" : \"ACInput\" , \"label\" : \"User Key\" }, { \"name\" : \"apikey\" , \"type\" : \"ACInput\" , \"label\" : \"API Key\" }, { \"name\" : \"newline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr>\" }, { \"name\" : \"uniqueid\" , \"type\" : \"ACCheckbox\" , \"value\" : \"unique\" , \"label\" : \"Use APID unique\" , \"checked\" : false }, { \"name\" : \"period\" , \"type\" : \"ACRadio\" , \"value\" : [ \"30 sec.\" , \"60 sec.\" , \"180 sec.\" ], \"label\" : \"Update period\" , \"arrange\" : \"vertical\" , \"checked\" : 1 }, { \"name\" : \"newline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr>\" }, { \"name\" : \"hostname\" , \"type\" : \"ACInput\" , \"value\" : \"\" , \"label\" : \"ESP host name\" , \"pattern\" : \"^([a-zA-Z0-9]([a-zA-Z0-9-])*[a-zA-Z0-9]){1,32}$\" }, { \"name\" : \"save\" , \"type\" : \"ACSubmit\" , \"value\" : \"Save&Start\" , \"uri\" : \"/mqtt_save\" }, { \"name\" : \"discard\" , \"type\" : \"ACSubmit\" , \"value\" : \"Discard\" , \"uri\" : \"/\" } ] }, { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_save\" , \"menu\" : false , \"element\" : [ { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"<h4>Parameters saved as:</h4>\" , \"style\" : \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\" : \"parameters\" , \"type\" : \"ACText\" }, { \"name\" : \"clear\" , \"type\" : \"ACSubmit\" , \"value\" : \"Clear channel\" , \"uri\" : \"/mqtt_clear\" } ] } ] Exclude the JSON and replace to the AutoConnectElements natively // In the declaration, // Declare AutoConnectElements for the page asf /mqtt_setting ACText(header, \"<h2>MQTT broker settings</h2>\" , \"text-align:center;color:#2f4f4f;padding:10px;\" ); ACText(caption, \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\" , \"font-family:serif;color:#4682b4;\" ); ACInput(mqttserver, \"\" , \"Server\" , \"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9 \\\\ -]*[a-zA-Z0-9]) \\\\ .)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9 \\\\ -]*[A-Za-z0-9])$\" , \"MQTT broker server\" ); ACInput(channelid, \"\" , \"Channel ID\" , \"^[0-9]{6}$\" ); ACInput(userkey, \"\" , \"User Key\" ); ACInput(apikey, \"\" , \"API Key\" ); ACElement(newline, \"<hr>\" ); ACCheckbox(uniqueid, \"unique\" , \"Use APID unique\" ); ACRadio(period, { \"30 sec.\" , \"60 sec.\" , \"180 sec.\" }, \"Update period\" , AC_Vertical, 1 ); ACSubmit(save, \"Start\" , \"mqtt_save\" ); ACSubmit(discard, \"Discard\" , \"/\" ); // Declare the custom Web page as /mqtt_setting and contains the AutoConnectElements AutoConnectAux mqtt_setting ( \"/mqtt_setting\" , \"MQTT Setting\" , true, { header, caption, mqttserver, channelid, userkey, apikey, newline, uniqueid, period, newline, save, discard }); // Declare AutoConnectElements for the page as /mqtt_save ACText(caption2, \"<h4>Parameters available as:</h4>\" , \"text-align:center;color:#2f4f4f;padding:10px;\" ); ACText(parameters); ACSubmit(clear, \"Clear channel\" , \"/mqtt_clear\" ); // Declare the custom Web page as /mqtt_save and contains the AutoConnectElements AutoConnectAux mqtt_save ( \"/mqtt_save\" , \"MQTT Setting\" , false, { caption2, parameters, clear }); // In the setup(), // Join the custom Web pages and performs begin portal.join({ mqtt_setting, mqtt_save }); portal.begin(); Detaching the ArduinoJson library reduces the sketch size by approximately 10K bytes. \u21a9","title":"Implementation example without ArduinoJson"}]} |