@@ -1175,6 +1189,13 @@
If you can access the AutoConnect root path as http://ESP8266IPADDRESS/_ac from browser, probably the sketch uses ESP8266WebServer::handleClient() without AutoConnect::handleRequest() AutoConnect::handleRequest() ESP8266WebServer::handleClient() invoked, or use AutoConnect::handleClient() AutoConnect::handleClient() ESP8266WebServer::handleClient combined AutoConnect::handleRequest()
See also the explanation here .
+Since AutoConnect v1.0.0 for ESP32, the storage location in the flash of established credentials has moved from EEPROM to Preferences. After You update AutoConnect to v1.0.0, past credentials saved by v0.9.12 earlier will not be accessible from the AutoConnect menu - Open SSIDs . You need to transfer once the stored credentials from the EEPROM area to the Preferences area.
+You can migrate the past saved credentials using CreditMigrate.ino
+
+
Needs to Arduino core for ESP32 1.0.2 or earlier
+
EEPROM area with arduino-esp32 core 1.0.3 has moved from partition to the nvs . CreditMigrate.ino requires arduino-esp32 core 1.0.2 or earlier to migrate saved credentials.
+
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.
diff --git a/docs/images/creditmigrate.png b/docs/images/creditmigrate.png
new file mode 100644
index 0000000..344ef3e
Binary files /dev/null and b/docs/images/creditmigrate.png differ
diff --git a/docs/search/search_index.json b/docs/search/search_index.json
index fbf13b7..bc84159 100644
--- a/docs/search/search_index.json
+++ b/docs/search/search_index.json
@@ -1 +1 @@
-{"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 the flash 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 pages ENHANCED w/v0.9.7 \u00b6 You can easily add your owned web pages 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. Quick and easy to equip the OTA update feature ENHANCED w/v1.0.0 \u00b6 You can quickly and easily equip the OTA update feature to your sketch and also you can operate the firmware update process via OTA from AutoConnect menu. 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 . Stable 2.4.0 or higher required and 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. Stable 1.0.1 or required and 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. Arduino core for ESP32 1.0.3 or later For ESP32, AutoConnect v1.0.0 later is required for arduino-esp32 1.0.3 or later. 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.3 later . 1 Additional library (Optional) By adding the ArduinoJson library, AutoConnect will be able to handle the custom Web pages described with JSON. Since AutoConnect v0.9.7 you can insert user-owned web pages 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 is required to use this feature. 2 AutoConnect can work with ArduinoJson both version 5 and version 6 . 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.8, PageBuilder v1.3.3 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 the flash 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-pages-enhanced-wv097","text":"You can easily add your owned web pages 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 pages ENHANCED w/v0.9.7"},{"location":"index.html#quick-and-easy-to-equip-the-ota-update-feature-enhanced-wv100","text":"You can quickly and easily equip the OTA update feature to your sketch and also you can operate the firmware update process via OTA from AutoConnect menu.","title":" Quick and easy to equip the OTA update feature ENHANCED w/v1.0.0"},{"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 . Stable 2.4.0 or higher required and 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. Stable 1.0.1 or required and 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. Arduino core for ESP32 1.0.3 or later For ESP32, AutoConnect v1.0.0 later is required for arduino-esp32 1.0.3 or later. 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.3 later . 1 Additional library (Optional) By adding the ArduinoJson library, AutoConnect will be able to handle the custom Web pages described with JSON. Since AutoConnect v0.9.7 you can insert user-owned web pages 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 is required to use this feature. 2 AutoConnect can work with ArduinoJson both version 5 and version 6 .","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.8, PageBuilder v1.3.3 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 AutoConnectFile : File uploader AutoConnectInput : Labeled text input box AutoConnectRadio : Labeled radio button AutoConnectSelect : Selection list AutoConnectStyle : Custom CSS code AutoConnectSubmit : Submit button AutoConnectText : Style attributed text Layout on a custom Web page \u00b6 AutoConnect will not actively be involved in the layout of custom Web pages generated from AutoConnectElements. However, each element has an attribute to arrange placement on a custom web page by horizontally or vertically. Custom CSS for a custom Web page \u00b6 All custom Web page styles are limited to the built-in unique CSS embedded in the library code. Direct modification of the CSS affects AutoConnect behavior. You can use dedicated elements to relatively safely modify the style of your custom Web page. The AutoConnectStyle will insert the raw CSS code into the style block in HTML of the custom Web page. Form and AutoConnectElements \u00b6 All AutoConnectElements placed on custom web pages will be contained into one form. Its form is fixed and created by AutoConnect. The form value (usually the text or checkbox you entered) is sent by AutoConnectSubmit using the POST method with HTTP. The post method sends the actual form data which is a query string whose contents are the name and value of AutoConnectElements. You can retrieve the value for the parameter with the sketch from the query string with ESP8266WebServer::arg function or PageArgument class of the 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\", \" ~
tag. The default interpretation of the post value is specific to each element. AutoConnectElements Default interpretation of the post value AutoConnectElement AC_Tag_None AutoConnectButton AC_Tag_None AutoConnectCheckBox AC_Tag_BR AutoConnectFile AC_Tag_BR AutoConnectInput AC_Tag_BR AutoConnectRadio AC_Tag_BR AutoConnectSelect AC_Tag_BR AutoConnectSubmit AC_Tag_None AutoConnectText AC_Tag_None 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 AutoConnectFile: AC_File AutoConnectInput: AC_Input AutoConnectRadio: AC_Radio AutoConnectSelect: AC_Select AutoConnectStyle: AC_Style 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++. Or, you can be coding the sketch more easily with using the as function. AutoConnectAux customPage; AutoConnectElementVT & elements = customPage.getElements(); for (AutoConnectElement & elm : elements) { if (elm.type() == AC_Text) { AutoConnectText & text = customPage[elm.name].as < AutoConnectText > (); text.style = \"color:gray;\" ; // Or, it is also possible to write the code further reduced as follows. // customPage[elm.name].as().style = \"color:gray;\"; } } 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, const ACPosterior_t post) 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\"( )\" ; ACInput(Text1, \"Text1\" ); ACInput(Text2, \"Text2\" ); ACButton(Button, \"COPY\" , \"CopyText()\" ); ACElement(TextCopy, scCopyText); post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None . 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, const ACPosition_t labelPosition, const ACPosterior_t post) 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 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. labelPosition \u00b6 The position of the label belonging to the checkbox can be specified around the element. The labelPosition specifies the position of the label to generate with ACPostion_t enumeration value. The default value is AC_Behind . AC_Infront : Place a label in front of the check box. AC_Behind : Place a label behind the check box. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR . AutoConnectFile \u00b6 AutoConnectFile generates an HTML < input type = \"file\" > tag and a < label > tag. AutoConnectFile enables file upload from the client through the web browser to ESP8266/ESP32 module. You can select the flash in the module, external SD device or any output destination as the storage of the uploaded file. Sample AutoConnectFile file(\"file\", \"\", \"Upload:\", AC_File_FS) On the page: Constructor \u00b6 AutoConnectFile( const char * name, const char * value, const char * label, const ACFile_t store, const ACPosterior_t post) name \u00b6 It is the name of the AutoConnectFile element and matches the name attribute of the input tag. It also becomes the parameter name of the query string when submitted. value \u00b6 File name to be upload. The value contains the value entered by the client browser to the < input type = \"file\" > tag and is read-only. Even If you give a value to the constructor, it does not affect as an initial value like a default file name. 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. store \u00b6 Specifies the destination to save the uploaded file. The destination can be specified the following values \u200b\u200bin the ACFile_t enumeration type. AC_File_FS : Save as the SPIFFS file in flash of ESP8266/ESP32 module. AC_File_SD : Save to an external SD device connected to ESP8266/ESP32 module. AC_File_Extern : Pass the content of the uploaded file to the uploader which is declared by the sketch individually. Its uploader must inherit AutoConnectUploadHandler class and implements _open , _write and _close function. Built-in uploader is ready. AutoConnect already equips the built-in uploader for saving to the SPIFFS as AC_File_FS and the external SD as AC_File_SD. It is already implemented inside AutoConnect and will store uploaded file automatically. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR . 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, const ACPosterior_t post) 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. To check whether the entered value matches the pattern, use the isValid function. 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: (([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]) Host name of Internet: (([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]) Date (MM/DD/YYYY) as range 1900-2099: (0[1-9]|1[012])[- \\/.](0[1-9]|[12][0-9]|3[01])[- \\/.](19|20)\\d\\d 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. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR . 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, const ACPosterior_t post) 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. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR . AutoConnectStyle \u00b6 AutoConnectStyle inserts the string given by the value into the style block of a custom Web page as it is raw. The validity as CSS will not be checked AutoConnectStyle does not do syntax checking and semantic analysis of value. Insert the specified string into the style block of the custom Web page without processing it. Therefore, specifying the wrong CSS will modulate the behavior of the custom Web page. Constructor \u00b6 AutoConnectStyle( const char * name, const char * value) name \u00b6 It is the name of the AutoConnectStyle element and is useful only to access this element from the sketch. It does not affect the generated HTML code. value \u00b6 The raw CSS code. It is not necessary to write tags. 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, const uint8_t selected, const ACPosterior_t post) 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. selected \u00b6 A selected is an optional value. Specifies that an option should be pre-selected when the page loads. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR . 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, const ACPosterior_t post) 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 post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None . 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, const char * format, const ACPosterior_t post) 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. format \u00b6 A format is a pointer to a null-terminated multi byte string specifying how to interpret the value. It specifies the conversion format when outputting values. The format string conforms to C-style printf library functions, but depends on the Espressif's SDK implementation. The conversion specification is valid only in %s format. (Left and Right justification, width are also valid.) post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None . 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 ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACButton ( name [ , value ] [ , action ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACCheckbox ( name [ , value ] [ , label ] [ , true | false ] [ , AC_Infront | AC_Behind ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACFile ( name [ , value ] [ , label ] [ , AC_File_FS | AC_File_SD | AC_File_Extern ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACInput ( name [ , value ] [ , label ] [ , pattern ] [ , placeholder ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACRadio ( name [ , values ] [ , label ] [ , AC_Horizontal | AC_Vertical ] [ , checked ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACSelect ( name [ , options ] [ , label ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACStyle ( name [ , value ] ) ACSubmit ( name [ , value ] [ , uri ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACText ( name [ , value ] [ , style ] [ , format ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) 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 AutoConnectFile : File uploader AutoConnectInput : Labeled text input box AutoConnectRadio : Labeled radio button AutoConnectSelect : Selection list AutoConnectStyle : Custom CSS code 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":"AutoConnect will not actively be involved in the layout of custom Web pages generated from AutoConnectElements. However, each element has an attribute to arrange placement on a custom web page by horizontally or vertically.","title":"Layout on a custom Web page"},{"location":"acelements.html#custom-css-for-a-custom-web-page","text":"All custom Web page styles are limited to the built-in unique CSS embedded in the library code. Direct modification of the CSS affects AutoConnect behavior. You can use dedicated elements to relatively safely modify the style of your custom Web page. The AutoConnectStyle will insert the raw CSS code into the style block in HTML of the custom Web page.","title":"Custom CSS for a custom Web page"},{"location":"acelements.html#form-and-autoconnectelements","text":"All AutoConnectElements placed on custom web pages will be contained into one form. Its form is fixed and created by AutoConnect. The form value (usually the text or checkbox you entered) is sent by AutoConnectSubmit using the POST method with HTTP. The post method sends the actual form data which is a query string whose contents are the name and value of AutoConnectElements. You can retrieve the value for the parameter with the sketch from the query string with ESP8266WebServer::arg function or PageArgument class of the 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\", \" ~
tag. The default interpretation of the post value is specific to each element. AutoConnectElements Default interpretation of the post value AutoConnectElement AC_Tag_None AutoConnectButton AC_Tag_None AutoConnectCheckBox AC_Tag_BR AutoConnectFile AC_Tag_BR AutoConnectInput AC_Tag_BR AutoConnectRadio AC_Tag_BR AutoConnectSelect AC_Tag_BR AutoConnectSubmit AC_Tag_None AutoConnectText AC_Tag_None","title":" post"},{"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 AutoConnectFile: AC_File AutoConnectInput: AC_Input AutoConnectRadio: AC_Radio AutoConnectSelect: AC_Select AutoConnectStyle: AC_Style 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++. Or, you can be coding the sketch more easily with using the as function. AutoConnectAux customPage; AutoConnectElementVT & elements = customPage.getElements(); for (AutoConnectElement & elm : elements) { if (elm.type() == AC_Text) { AutoConnectText & text = customPage[elm.name].as < AutoConnectText > (); text.style = \"color:gray;\" ; // Or, it is also possible to write the code further reduced as follows. // customPage[elm.name].as().style = \"color:gray;\"; } }","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, const ACPosterior_t post)","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\"( )\" ; ACInput(Text1, \"Text1\" ); ACInput(Text2, \"Text2\" ); ACButton(Button, \"COPY\" , \"CopyText()\" ); ACElement(TextCopy, scCopyText);","title":" action"},{"location":"acelements.html#post_1","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None .","title":" post"},{"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, const ACPosition_t labelPosition, const ACPosterior_t post)","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 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#labelposition","text":"The position of the label belonging to the checkbox can be specified around the element. The labelPosition specifies the position of the label to generate with ACPostion_t enumeration value. The default value is AC_Behind . AC_Infront : Place a label in front of the check box. AC_Behind : Place a label behind the check box.","title":" labelPosition"},{"location":"acelements.html#post_2","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR .","title":" post"},{"location":"acelements.html#autoconnectfile","text":"AutoConnectFile generates an HTML < input type = \"file\" > tag and a < label > tag. AutoConnectFile enables file upload from the client through the web browser to ESP8266/ESP32 module. You can select the flash in the module, external SD device or any output destination as the storage of the uploaded file. Sample AutoConnectFile file(\"file\", \"\", \"Upload:\", AC_File_FS) On the page:","title":"AutoConnectFile"},{"location":"acelements.html#constructor_3","text":"AutoConnectFile( const char * name, const char * value, const char * label, const ACFile_t store, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_3","text":"It is the name of the AutoConnectFile 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_3","text":"File name to be upload. The value contains the value entered by the client browser to the < input type = \"file\" > tag and is read-only. Even If you give a value to the constructor, it does not affect as an initial value like a default file name.","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#store","text":"Specifies the destination to save the uploaded file. The destination can be specified the following values \u200b\u200bin the ACFile_t enumeration type. AC_File_FS : Save as the SPIFFS file in flash of ESP8266/ESP32 module. AC_File_SD : Save to an external SD device connected to ESP8266/ESP32 module. AC_File_Extern : Pass the content of the uploaded file to the uploader which is declared by the sketch individually. Its uploader must inherit AutoConnectUploadHandler class and implements _open , _write and _close function. Built-in uploader is ready. AutoConnect already equips the built-in uploader for saving to the SPIFFS as AC_File_FS and the external SD as AC_File_SD. It is already implemented inside AutoConnect and will store uploaded file automatically.","title":" store"},{"location":"acelements.html#post_3","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR .","title":" post"},{"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_4","text":"AutoConnectInput( const char * name, const char * value, const char * label, const char * pattern, const char * placeholder, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_4","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_4","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_2","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. To check whether the entered value matches the pattern, use the isValid function. 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: (([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]) Host name of Internet: (([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]) Date (MM/DD/YYYY) as range 1900-2099: (0[1-9]|1[012])[- \\/.](0[1-9]|[12][0-9]|3[01])[- \\/.](19|20)\\d\\d 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#post_4","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR .","title":" post"},{"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_5","text":"AutoConnectRadio( const char * name, std :: vector < String > const & values, const char * label, const ACArrange_t order, const uint8_t checked, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_5","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_3","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#post_5","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR .","title":" post"},{"location":"acelements.html#autoconnectstyle","text":"AutoConnectStyle inserts the string given by the value into the style block of a custom Web page as it is raw. The validity as CSS will not be checked AutoConnectStyle does not do syntax checking and semantic analysis of value. Insert the specified string into the style block of the custom Web page without processing it. Therefore, specifying the wrong CSS will modulate the behavior of the custom Web page.","title":"AutoConnectStyle"},{"location":"acelements.html#constructor_6","text":"AutoConnectStyle( const char * name, const char * value)","title":" Constructor"},{"location":"acelements.html#name_6","text":"It is the name of the AutoConnectStyle element and is useful only to access this element from the sketch. It does not affect the generated HTML code.","title":" name"},{"location":"acelements.html#value_5","text":"The raw CSS code. It is not necessary to write tags.","title":" value"},{"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_7","text":"AutoConnectSelect( const char * name, std :: vector < String > const & options, const char * label, const uint8_t selected, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_7","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_4","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#selected","text":"A selected is an optional value. Specifies that an option should be pre-selected when the page loads.","title":" selected"},{"location":"acelements.html#post_6","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR .","title":" post"},{"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_8","text":"AutoConnectSubmit( const char * name, const char * value, const char * uri, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_8","text":"It is the name of the AutoConnectSubmit element and matches the name attribute of the input tag.","title":" name"},{"location":"acelements.html#value_6","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#post_7","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None .","title":" post"},{"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_9","text":"AutoConnectText( const char * name, const char * value, const char * style, const char * format, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_9","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_7","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#format","text":"A format is a pointer to a null-terminated multi byte string specifying how to interpret the value. It specifies the conversion format when outputting values. The format string conforms to C-style printf library functions, but depends on the Espressif's SDK implementation. The conversion specification is valid only in %s format. (Left and Right justification, width are also valid.)","title":" format"},{"location":"acelements.html#post_8","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None .","title":" post"},{"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 ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACButton ( name [ , value ] [ , action ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACCheckbox ( name [ , value ] [ , label ] [ , true | false ] [ , AC_Infront | AC_Behind ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACFile ( name [ , value ] [ , label ] [ , AC_File_FS | AC_File_SD | AC_File_Extern ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACInput ( name [ , value ] [ , label ] [ , pattern ] [ , placeholder ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACRadio ( name [ , values ] [ , label ] [ , AC_Horizontal | AC_Vertical ] [ , checked ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACSelect ( name [ , options ] [ , label ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACStyle ( name [ , value ] ) ACSubmit ( name [ , value ] [ , uri ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACText ( name [ , value ] [ , style ] [ , format ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) 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":"Page, Container, Component \u00b6 AutoConnectAux is the container for a custom Web page, AutoConnectElement is the component of a page. AutoConnectElements must be contained in AutoConnectAux object. (ie. they are the elements displayed on the custom Web page.) Then AutoConnect makes an AutoConnectAux to a page. 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 document. In either method, it is common to use the function of AutoConnectAux to access an element with a sketch. Handing AutoConnectElements with the sketches \u00b6 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(AutoConnectElement & addon) void AutoConnectAux :: add(AutoConnectElementVT addons) The add function adds the specified AutoConnectElement to AutoConnectAux. The AutoConnectElementVT type is the std::vector of the reference wrapper to AutoConnectElements, and you can add these elements in bulk by using the list initialization with the sketch. typedef std :: vector < std :: reference_wrapper < AutoConnectElement >> AutoConnectElementVT; AutoConnectElements contained in AutoConnectAux object are uniquely identified by 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, AutoConnectButton button addition will invalid because hello with the same name already exists as AutoConnectText. 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) T & AutoConnectAux :: getElement < T > ( 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 and specify its type to an argument of the getElement. A type of can be specified as follows. AutoConnectButton & AutoConnectAux :: getElement < AutoConnectButton > ( const String & name) AutoConnectCheckbox & AutoConnectAux :: getElement < AutoConnectCheckbox > ( const String & name) AutoConnectElement & AutoConnectAux :: getElement < AutoConnectElement > ( const String & name) AutoConnectFile & AutoConnectAux :: getElement < AutoConnectFile > ( const String & name) AutoConnectInput & AutoConnectAux :: getElement < AutoConnectInput > ( const String & name) AutoConnectRadio & AutoConnectAux :: getElement < AutoConnectRadio > ( const String & name) AutoConnectSelect & AutoConnectAux :: getElement < AutoConnectSelect > ( const String & name) AutoConnectSubmit & AutoConnectAux :: getElement < AutoConnectSubmit > ( const String & name) AutoConnectText & AutoConnectAux :: getElement < AutoConnectText > ( const String & name) 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 \\\" }]}\" ); AutoConnect portal; portal.load(auxJson); AutoConnectAux * aux = portal.aux( \"/page1\" ); // Identify the AutoConnectAux instance with uri AutoConnectText & text = aux -> getElement < AutoConnectText > ( \"caption\" ); // Cast to real type and access members Serial.println(text.value); You can also use the operator [] of AutoConnectAux as another way to get the desired element. An operator [] is a shortcut for getElement function with the reference casting and makes simplify the sketch code and treats like an array with the elements placed on a custom Web page. Its argument is the name of the element to be acquired similarly to getElement function. In the sketch, by combining the AutoConnectElement::as function with the operator [] , you can access the AutoConnectElements reference according to its actual type. For example, the following sketch code returns the same as a reference of AutoConnectText element as the caption . AutoConnect portal; portal.load(auxJson); AutoConnectAux & aux = * portal.aux( \"/page1\" ); AutoConnectText & text1 = aux.getElement < AutoConnectElement > ( \"caption\" ); AutoConnectText & text2 = aux[ \"caption\" ].as < AutoConnectText > (); Need cast to convert to the actual type An operator [] returns a reference of an AutoConnectElement. It is necessary to convert the type according to the actual element type with AutoConnectElement::as function. AutoConnectButton & AutoConnectElement :: as < AutoConnectButton > () AutoConnectCheckbox & AutoConnectElement :: as < AutoConnectCheckbox > () AutoConnectElement & AutoConnectElement :: as < AutoConnectElement > () AutoConnectFile & AutoConnectElement :: as < AutoConnectFile > () AutoConnectInput & AutoConnectElement :: as < AutoConnectInput > () AutoConnectRadio & AutoConnectElement :: as < AutoConnectRadio > () AutoConnectSelect & AutoConnectElement :: as < AutoConnectSelect > () AutoConnectSubmit & AutoConnectElement :: as < AutoConnectSubmit > () AutoConnectText & AutoConnectElement :: as < AutoConnectText > () To get all the AutoConnectElements in 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 & AutoConnectAux :: getElements( void ) Enable AutoConnectElements during the sketch execution \u00b6 AutoConnectElemets have an enable attribute to activate its own HTML generation. Sketches can change the HTMLization of their elements dynamically by setting or resetting the enable value. An element whose the enable attribute is true will generate itself HTML and place on the custom Web page. And conversely, it will not generate the HTML when the value is false. For example, to enable the submit button only when the ESP module is connected to the access point in STA mode, you can sketch the following: #include #include #include static const char AUX[] PROGMEM = R( \" { \"name\" : \"aux\" , \"uri\" : \"/aux\" , \"menu\" : true, \"element\" : [ { \"name\" : \"input\" , \"type\" : \"ACInput\" , \"label\" : \"Input\" }, { \"name\" : \"send\" , \"type\" : \"ACSubmit\" , \"uri\" : \"/send\" } ] } \"); AutoConnect portal; AutoConnectAux page; String onPage (AutoConectAux & aux, PageArgument & args) { AutoConnectSubmit & send = aux[ \"send\" ].as < AutoConnectSubmit > (); if (WiFi.isConnected()) send.enable = (WiFi.getMode() == WIFI_STA); else send.enable = false; return String(); } void setup () { page.load(AUX); page.on(onPage); portal.join(page); portal.begin(); } void loop () { portal.handleClient(); } Desirable to set or reset the enable attribute in the page handler The enable attribute can be set at any time during the sketch execution. The page handler with the AC_EXIT_AHEAD option is sure to handle it. Loading & saving AutoConnectElements with JSON \u00b6 AutoConnect supports reading the custom Web page definitions written in JSON and also supports loading and saving of AutoConnectAux or 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 section JSON document structure for AutoConnectAux . 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 AutoConnectAux or 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 } ] Above JSON document can be loaded as it is into a custom Web page using the loadElement function. The loadElement function also loads the value of the element, so the saved value can be restored on the custom Web page. 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 #include #include 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 = \"\" + feel + String( \" and a bold world!
\" ); 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 #include #include 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 an uri string of the AutoConnectAux that triggered this handler. AutoConnectAux * hello = portal.aux(portal.where()); AutoConnectInput & feels = hello -> 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 an uri string of 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/WebServer for 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( \"This text has been added.
\" ); } 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(); Transfer of input values \u200b\u200bacross pages \u00b6 Since v1.0.0, AutoConnect supports a new attribute with each element that allows automatic transfer of input values across pages without sketching. AutoConnect will copy the input value of the elements declared as global to the same-named global elements on a different custom Web pages at the page transition timing. The global attribute will be useful for echoing input values back to another custom Web pages. This copy operation can be performed between different types. (eg., copy value from AutoConnectInput to AutoConnectText) The following example reflects the input value of PAGE1 to the AutoConnectText field of PAGE2 without sketch code. static const char PAGE1[] PROGMEM = R\"( { \"title\": \"PAGE1\", \"uri\": \"/page1\", \"menu\": true, \"element\": [ { \"name\": \"input1\", \"type\": \"ACInput\", \"global\": true }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"OK\", \"uri\": \"/page2\" } ] } )\" ; static const char PAGE2[] PROGMEM = R\"( { \"title\": \"PAGE2\", \"uri\": \"/page2\", \"menu\": false, \"element\": [ { \"name\": \"input1\", \"type\": \"ACText\", \"global\": true } ] } )\" ; AutoConnect portal; AutoConnectAux page1; AutoConnectAux page2; void setup () { page1.load(PAGE1); page2.load(PAGE2); portal.join( { page1, page2 }); portal.begin(); } void loop () { portal.handleClient(); } The value entered in input1 declared in PAGE1 is reflected in input1 of PAGE2 as an AutoConnectText value even if there is no sketch code to transfer it to PAGE2. It's shown as like: Copy only for same-named and the global The input value will be copied only if the global attribute of the destination element is true. If an element with the same name is declared non-global, the value is not copied. Retrieve the values with WebServer::on handler \u00b6 ESP8266WebServer class and the WebServer class assume that the implementation of the ReqestHandler class contained in the WebServer library will handle the URL requests. Usually, it is sketch code registered by ESP8266WebServer::on function. When a page transition from a custom Web page created by AutoConnectAux to a handler registered with ESP2866WebServer::on function, a little trick is needed to retrieve the values of AutoConnectElements. (i.e. the URI of the ESP8266WebServer::on handler is specified in the uri attribute of AutoConnectSubmit ) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler coded with the sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the AutoConnectAux::fetchElement function for value processing with the on-page handler. The following sketch is an example of extracting values inputted on a custom web page with an on-page handler and then processing it. ESP8266WebServer server; AutoConnect portal (server); AutoConnectAux Input; const static char InputPage[] PROGMEM = R\"r( { \"title\": \"Input\", \"uri\": \"/input\", \"menu\": true, \"element\": [ { \"name\": \"input\", \"type\": \"ACInput\", \"label\": \"INPUT\" }, { \"name\": \"save\", \"type\": \"ACSubmit\", \"value\": \"SAVE\", \"uri\": \"/\" } ] } )r\" ; // An on-page handler for '/' access void onRoot () { String content = \"\" \"INPUT: {{value}}
\" \"\" ; Input.fetchElement(); // Preliminary acquisition // For this steps to work, need to call fetchElement function beforehand. String value = Input[ \"input\" ].value; content.replace( \"{{value}}\" , value); server.send( 200 , \"text/html\" , content); } void setup () { Input.load(InputPage); portal.join(Input); server.on( \"/\" , onRoot); // Register the on-page handler portal.begin(); } void loop () { portal.handleClient(); } 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 Caption (ie. \"Hello, world\") as AutoConnectText value. External JSON document for the below sketch to modify the text style. { \"name\" : \"Caption\" , \"type\" : \"ACText\" , \"style\" : \"text-align:center;font-size:24px;font-family:'Impact','Futura',sans-serif;color:tomato;\" } The sketch (a part of code), load above JSON. 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(); } It's shown as like: 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 with 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])$\" } ] } It's shown as like: If you are not familiar with regular expressions, you may feel that description very strange. Matter of fact, it's a strange description for those who are unfamiliar with the formal languages. If your regular expression can not interpret the intended syntax and semantics, you can use an online tester. The regex101 is an exceptional online tool for testing and debugging regular expressions. Input data validation \u00b6 The pattern attribute of AutoConnectInput only determines the data consistency on the web browser based on the given regular expression. In order to guarantee the validity of input data, it is necessary to verify it before actually using it. You can validate input data from AutoConnectInput using the isValid function before actually processing it. The isValid function determines whether the value currently stored in AutoConnectInput matches the pattern . You can also use the AutoConnectAux::isValid function to verify the data input to all AutoConnectInput elements on the custom Web page at once. The two sketches below show the difference between using AutoConnectInput::isValid and using AutoConnectAux::isValid . In both cases, it verifies the input data of the same AutoConnectInput, but in the case of using AutoConnectAux::isValid, the amount of sketch coding is small. A common declaration const char PAGE[] PROGMEM = R\"( { \"title\": \"Custom page\", \"uri\": \"/page\", \"menu\": true, \"element\": [ { \"name\": \"input1\", \"type\": \"ACInput\", \"pattern\": \"^[0-9]{4}$\" }, { \"name\": \"input2\", \"type\": \"ACInput\", \"pattern\": \"^[a-zA-Z]{4}$\" } ] } )\" ; AutoConnectAux page; page.load(PAGE); Using AutoConnectInput::isValid AutoConnectInput & input1 = page[ \"input1\" ].as < AutoConnectInput > (); AutoConnectInput & input2 = page[ \"input2\" ].as < AutoConnectInput > (); if ( ! input1.isValid() || ! input2.isValid()) Serial.println( \"Validation error\" ); Using AutoConnectAux::isValid if ( ! page.isValid()) Serial.println( \"Validation error\" ); Convert data to actually type \u00b6 The values in the AutoConnectElements field of the custom Web page are all typed as String. A sketch needs to be converted to an actual data type if the data type required for sketch processing is not a String type. For the typical data type conversion method, refer to section Tips for data conversion . Transitions of the custom Web pages \u00b6 Scope & Lifetime of AutoConnectAux \u00b6 AutoConnectAux and AutoConnectElements must live while the custom Web pages are available. 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 #include #include 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. Limitations \u00b6 The custom Web pages handler has the following limitations. 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 . Can not use the element named SUBMIT . You can not use 'SUBMIT' as the element name of AutoConnectElements in a custom Web page that declares the AutoConnectSubmit element. (Case sensitive ignored) AutoConnect does not rely on the input type=submit element for the form submission and uses HTML form element submit function instead. So, the submit function will fail if there is an element named 'submit' in the form. Do not handle for the same page Do not duplicate AutoConnect::on with ESP8266WebServer::on (also WebServer::on) for the same custom web page. window.onload = function() { Gifffer(); }; The valid scope of the name is within an AutoConnectAux. \u21a9 Regular expression specification as a pattern of AutoConnectInput is JavaScript compliant . \u21a9","title":"Handling the custom Web pages"},{"location":"achandling.html#page-container-component","text":"AutoConnectAux is the container for a custom Web page, AutoConnectElement is the component of a page. AutoConnectElements must be contained in AutoConnectAux object. (ie. they are the elements displayed on the custom Web page.) Then AutoConnect makes an AutoConnectAux to a page. 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 document. In either method, it is common to use the function of AutoConnectAux to access an element with a sketch.","title":"Page, Container, Component"},{"location":"achandling.html#handing-autoconnectelements-with-the-sketches","text":"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(AutoConnectElement & addon) void AutoConnectAux :: add(AutoConnectElementVT addons) The add function adds the specified AutoConnectElement to AutoConnectAux. The AutoConnectElementVT type is the std::vector of the reference wrapper to AutoConnectElements, and you can add these elements in bulk by using the list initialization with the sketch. typedef std :: vector < std :: reference_wrapper < AutoConnectElement >> AutoConnectElementVT; AutoConnectElements contained in AutoConnectAux object are uniquely identified by 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, AutoConnectButton button addition will invalid because hello with the same name already exists as AutoConnectText. 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) T & AutoConnectAux :: getElement < T > ( 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 and specify its type to an argument of the getElement. A type of can be specified as follows. AutoConnectButton & AutoConnectAux :: getElement < AutoConnectButton > ( const String & name) AutoConnectCheckbox & AutoConnectAux :: getElement < AutoConnectCheckbox > ( const String & name) AutoConnectElement & AutoConnectAux :: getElement < AutoConnectElement > ( const String & name) AutoConnectFile & AutoConnectAux :: getElement < AutoConnectFile > ( const String & name) AutoConnectInput & AutoConnectAux :: getElement < AutoConnectInput > ( const String & name) AutoConnectRadio & AutoConnectAux :: getElement < AutoConnectRadio > ( const String & name) AutoConnectSelect & AutoConnectAux :: getElement < AutoConnectSelect > ( const String & name) AutoConnectSubmit & AutoConnectAux :: getElement < AutoConnectSubmit > ( const String & name) AutoConnectText & AutoConnectAux :: getElement < AutoConnectText > ( const String & name) 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 \\\" }]}\" ); AutoConnect portal; portal.load(auxJson); AutoConnectAux * aux = portal.aux( \"/page1\" ); // Identify the AutoConnectAux instance with uri AutoConnectText & text = aux -> getElement < AutoConnectText > ( \"caption\" ); // Cast to real type and access members Serial.println(text.value); You can also use the operator [] of AutoConnectAux as another way to get the desired element. An operator [] is a shortcut for getElement function with the reference casting and makes simplify the sketch code and treats like an array with the elements placed on a custom Web page. Its argument is the name of the element to be acquired similarly to getElement function. In the sketch, by combining the AutoConnectElement::as function with the operator [] , you can access the AutoConnectElements reference according to its actual type. For example, the following sketch code returns the same as a reference of AutoConnectText element as the caption . AutoConnect portal; portal.load(auxJson); AutoConnectAux & aux = * portal.aux( \"/page1\" ); AutoConnectText & text1 = aux.getElement < AutoConnectElement > ( \"caption\" ); AutoConnectText & text2 = aux[ \"caption\" ].as < AutoConnectText > (); Need cast to convert to the actual type An operator [] returns a reference of an AutoConnectElement. It is necessary to convert the type according to the actual element type with AutoConnectElement::as function. AutoConnectButton & AutoConnectElement :: as < AutoConnectButton > () AutoConnectCheckbox & AutoConnectElement :: as < AutoConnectCheckbox > () AutoConnectElement & AutoConnectElement :: as < AutoConnectElement > () AutoConnectFile & AutoConnectElement :: as < AutoConnectFile > () AutoConnectInput & AutoConnectElement :: as < AutoConnectInput > () AutoConnectRadio & AutoConnectElement :: as < AutoConnectRadio > () AutoConnectSelect & AutoConnectElement :: as < AutoConnectSelect > () AutoConnectSubmit & AutoConnectElement :: as < AutoConnectSubmit > () AutoConnectText & AutoConnectElement :: as < AutoConnectText > () To get all the AutoConnectElements in 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 & AutoConnectAux :: getElements( void )","title":" Get AutoConnectElement from the AutoConnectAux"},{"location":"achandling.html#enable-autoconnectelements-during-the-sketch-execution","text":"AutoConnectElemets have an enable attribute to activate its own HTML generation. Sketches can change the HTMLization of their elements dynamically by setting or resetting the enable value. An element whose the enable attribute is true will generate itself HTML and place on the custom Web page. And conversely, it will not generate the HTML when the value is false. For example, to enable the submit button only when the ESP module is connected to the access point in STA mode, you can sketch the following: #include #include #include static const char AUX[] PROGMEM = R( \" { \"name\" : \"aux\" , \"uri\" : \"/aux\" , \"menu\" : true, \"element\" : [ { \"name\" : \"input\" , \"type\" : \"ACInput\" , \"label\" : \"Input\" }, { \"name\" : \"send\" , \"type\" : \"ACSubmit\" , \"uri\" : \"/send\" } ] } \"); AutoConnect portal; AutoConnectAux page; String onPage (AutoConectAux & aux, PageArgument & args) { AutoConnectSubmit & send = aux[ \"send\" ].as < AutoConnectSubmit > (); if (WiFi.isConnected()) send.enable = (WiFi.getMode() == WIFI_STA); else send.enable = false; return String(); } void setup () { page.load(AUX); page.on(onPage); portal.join(page); portal.begin(); } void loop () { portal.handleClient(); } Desirable to set or reset the enable attribute in the page handler The enable attribute can be set at any time during the sketch execution. The page handler with the AC_EXIT_AHEAD option is sure to handle it.","title":" Enable AutoConnectElements during the sketch execution"},{"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 AutoConnectAux or 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 section JSON document structure for AutoConnectAux . 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 AutoConnectAux or 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 } ] Above JSON document can be loaded as it is into a custom Web page using the loadElement function. The loadElement function also loads the value of the element, so the saved value can be restored on the custom Web page.","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 #include #include 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 = \"\" + feel + String( \" and a bold world!
\" ); 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 #include #include 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 an uri string of the AutoConnectAux that triggered this handler. AutoConnectAux * hello = portal.aux(portal.where()); AutoConnectInput & feels = hello -> 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 an uri string of 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/WebServer for 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( \"This text has been added.
\" ); }","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#transfer-of-input-values-across-pages","text":"Since v1.0.0, AutoConnect supports a new attribute with each element that allows automatic transfer of input values across pages without sketching. AutoConnect will copy the input value of the elements declared as global to the same-named global elements on a different custom Web pages at the page transition timing. The global attribute will be useful for echoing input values back to another custom Web pages. This copy operation can be performed between different types. (eg., copy value from AutoConnectInput to AutoConnectText) The following example reflects the input value of PAGE1 to the AutoConnectText field of PAGE2 without sketch code. static const char PAGE1[] PROGMEM = R\"( { \"title\": \"PAGE1\", \"uri\": \"/page1\", \"menu\": true, \"element\": [ { \"name\": \"input1\", \"type\": \"ACInput\", \"global\": true }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"OK\", \"uri\": \"/page2\" } ] } )\" ; static const char PAGE2[] PROGMEM = R\"( { \"title\": \"PAGE2\", \"uri\": \"/page2\", \"menu\": false, \"element\": [ { \"name\": \"input1\", \"type\": \"ACText\", \"global\": true } ] } )\" ; AutoConnect portal; AutoConnectAux page1; AutoConnectAux page2; void setup () { page1.load(PAGE1); page2.load(PAGE2); portal.join( { page1, page2 }); portal.begin(); } void loop () { portal.handleClient(); } The value entered in input1 declared in PAGE1 is reflected in input1 of PAGE2 as an AutoConnectText value even if there is no sketch code to transfer it to PAGE2. It's shown as like: Copy only for same-named and the global The input value will be copied only if the global attribute of the destination element is true. If an element with the same name is declared non-global, the value is not copied.","title":" Transfer of input values \u200b\u200bacross pages"},{"location":"achandling.html#retrieve-the-values-with-webserveron-handler","text":"ESP8266WebServer class and the WebServer class assume that the implementation of the ReqestHandler class contained in the WebServer library will handle the URL requests. Usually, it is sketch code registered by ESP8266WebServer::on function. When a page transition from a custom Web page created by AutoConnectAux to a handler registered with ESP2866WebServer::on function, a little trick is needed to retrieve the values of AutoConnectElements. (i.e. the URI of the ESP8266WebServer::on handler is specified in the uri attribute of AutoConnectSubmit ) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler coded with the sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the AutoConnectAux::fetchElement function for value processing with the on-page handler. The following sketch is an example of extracting values inputted on a custom web page with an on-page handler and then processing it. ESP8266WebServer server; AutoConnect portal (server); AutoConnectAux Input; const static char InputPage[] PROGMEM = R\"r( { \"title\": \"Input\", \"uri\": \"/input\", \"menu\": true, \"element\": [ { \"name\": \"input\", \"type\": \"ACInput\", \"label\": \"INPUT\" }, { \"name\": \"save\", \"type\": \"ACSubmit\", \"value\": \"SAVE\", \"uri\": \"/\" } ] } )r\" ; // An on-page handler for '/' access void onRoot () { String content = \"\" \"INPUT: {{value}}
\" \"\" ; Input.fetchElement(); // Preliminary acquisition // For this steps to work, need to call fetchElement function beforehand. String value = Input[ \"input\" ].value; content.replace( \"{{value}}\" , value); server.send( 200 , \"text/html\" , content); } void setup () { Input.load(InputPage); portal.join(Input); server.on( \"/\" , onRoot); // Register the on-page handler portal.begin(); } void loop () { portal.handleClient(); }","title":" Retrieve the values with WebServer::on handler"},{"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 Caption (ie. \"Hello, world\") as AutoConnectText value. External JSON document for the below sketch to modify the text style. { \"name\" : \"Caption\" , \"type\" : \"ACText\" , \"style\" : \"text-align:center;font-size:24px;font-family:'Impact','Futura',sans-serif;color:tomato;\" } The sketch (a part of code), load above JSON. 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(); } It's shown as like:","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 with 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])$\" } ] } It's shown as like: If you are not familiar with regular expressions, you may feel that description very strange. Matter of fact, it's a strange description for those who are unfamiliar with the formal languages. If your regular expression can not interpret the intended syntax and semantics, you can use an online tester. The regex101 is an exceptional online tool for testing and debugging regular expressions.","title":" Check data against on submission"},{"location":"achandling.html#input-data-validation","text":"The pattern attribute of AutoConnectInput only determines the data consistency on the web browser based on the given regular expression. In order to guarantee the validity of input data, it is necessary to verify it before actually using it. You can validate input data from AutoConnectInput using the isValid function before actually processing it. The isValid function determines whether the value currently stored in AutoConnectInput matches the pattern . You can also use the AutoConnectAux::isValid function to verify the data input to all AutoConnectInput elements on the custom Web page at once. The two sketches below show the difference between using AutoConnectInput::isValid and using AutoConnectAux::isValid . In both cases, it verifies the input data of the same AutoConnectInput, but in the case of using AutoConnectAux::isValid, the amount of sketch coding is small. A common declaration const char PAGE[] PROGMEM = R\"( { \"title\": \"Custom page\", \"uri\": \"/page\", \"menu\": true, \"element\": [ { \"name\": \"input1\", \"type\": \"ACInput\", \"pattern\": \"^[0-9]{4}$\" }, { \"name\": \"input2\", \"type\": \"ACInput\", \"pattern\": \"^[a-zA-Z]{4}$\" } ] } )\" ; AutoConnectAux page; page.load(PAGE); Using AutoConnectInput::isValid AutoConnectInput & input1 = page[ \"input1\" ].as < AutoConnectInput > (); AutoConnectInput & input2 = page[ \"input2\" ].as < AutoConnectInput > (); if ( ! input1.isValid() || ! input2.isValid()) Serial.println( \"Validation error\" ); Using AutoConnectAux::isValid if ( ! page.isValid()) Serial.println( \"Validation error\" );","title":" Input data validation"},{"location":"achandling.html#convert-data-to-actually-type","text":"The values in the AutoConnectElements field of the custom Web page are all typed as String. A sketch needs to be converted to an actual data type if the data type required for sketch processing is not a String type. For the typical data type conversion method, refer to section Tips for data conversion .","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":"AutoConnectAux and AutoConnectElements must live while the custom Web pages are available. 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 #include #include 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#limitations","text":"The custom Web pages handler has the following limitations. 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 . Can not use the element named SUBMIT . You can not use 'SUBMIT' as the element name of AutoConnectElements in a custom Web page that declares the AutoConnectSubmit element. (Case sensitive ignored) AutoConnect does not rely on the input type=submit element for the form submission and uses HTML form element submit function instead. So, the submit function will fail if there is an element named 'submit' in the form. Do not handle for the same page Do not duplicate AutoConnect::on with ESP8266WebServer::on (also WebServer::on) for the same custom web page. window.onload = function() { Gifffer(); }; The valid scope of the name is within an AutoConnectAux. \u21a9 Regular expression specification as a pattern of AutoConnectInput is JavaScript compliant . \u21a9","title":"Limitations"},{"location":"acintro.html","text":"What it is \u00b6 AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages can be integrated into the AutoConnect menu and executed as menu items and can have input-output parameters and handle them. 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 AutoConnect creates the custom Web pages dynamically at runtime. Sketch describes the custom Web pages using classes and APIs necessary for dynamic creation which are AutoConnectAux and the variant of AutoConnectElements . AutoConnectAux is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages into AutoConnect like the one on the right figure. The elements 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 as aux , binds to an AutoConnect object named portal . This sequence is the basic procedure for creating custom Web pages with the sketch. The further explanation is available in section AutoConnectElements also. Custom Web pages in AutoConnect menu \u00b6 AutoConnect integrates custom Web page objects into menus as AutoConnectAux. The AutoConnectAux object contains URI and title as member variables and has an indicator to display in 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 in the AutoConnect menu as the left figure. 1 It is a hyperlink to a custom Web page which will be displayed tapped it. Multiple custom Web pages \u00b6 You can create multiple custom Web pages and specify pages that can be called from the menu. The following sketch shows a code sequence for integrating three custom Web pages into one and embedding them in a menu. In the above code, the third parameter of aux2 is false . The third parameter of the AutoConnectAux constructor is an indicator for whether it's shown to the AutoConnect menu. Right animation is an execution result of the above code. You will see that the menu applies only two items for three custom Web pages. The sketch of this animation is written to transition to aux2 by the utility of the AutoConnectSubmit element owned by aux1 . 2 The aux2 page transitions only from the aux1 page. As shown in mqttRSSI in the library example, its page replies the saving result for the parameters entered on the previous page. It can not be invoked directly from the menu and want to hide them with AutoConnect menu items. 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() . Perform AutoConnect::handleClient() . 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 document can be saved in SPIFFS or SD and read using AutoConnect's load function. you can reduce the steps of the basic procedure with this approach, but this way consumes a lot of memory. The following JSON code and sketch will execute the custom Web page as an 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 #include #include #include 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 on the custom Web page. The value entered into the AutoConnectElements is stored to the member variables of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the request handler which will be registered by AutoConnect::on function. And 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. The details are explained in section Custom field data handling . window.onload = function() { Gifffer(); }; There is no overlay in the actual menu. \u21a9 The sketch is actually this: #include #include #include 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 can be integrated into the AutoConnect menu and executed as menu items and can have input-output parameters and handle them. 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":"AutoConnect creates the custom Web pages dynamically at runtime. Sketch describes the custom Web pages using classes and APIs necessary for dynamic creation which are AutoConnectAux and the variant of AutoConnectElements . AutoConnectAux is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages into AutoConnect like the one on the right figure. The elements 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 as aux , binds to an AutoConnect object named portal . This sequence is the basic procedure for creating custom Web pages with the sketch. The further explanation is available in section AutoConnectElements also.","title":"How it works"},{"location":"acintro.html#custom-web-pages-in-autoconnect-menu","text":"AutoConnect integrates custom Web page objects into menus as AutoConnectAux. The AutoConnectAux object contains URI and title as member variables and has an indicator to display in 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 in the AutoConnect menu as the left figure. 1 It is a hyperlink to a custom Web page which will be displayed tapped it.","title":"Custom Web pages in AutoConnect menu"},{"location":"acintro.html#multiple-custom-web-pages","text":"You can create multiple custom Web pages and specify pages that can be called from the menu. The following sketch shows a code sequence for integrating three custom Web pages into one and embedding them in a menu. In the above code, the third parameter of aux2 is false . The third parameter of the AutoConnectAux constructor is an indicator for whether it's shown to the AutoConnect menu. Right animation is an execution result of the above code. You will see that the menu applies only two items for three custom Web pages. The sketch of this animation is written to transition to aux2 by the utility of the AutoConnectSubmit element owned by aux1 . 2 The aux2 page transitions only from the aux1 page. As shown in mqttRSSI in the library example, its page replies the saving result for the parameters entered on the previous page. It can not be invoked directly from the menu and want to hide them with AutoConnect menu items. 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() . Perform AutoConnect::handleClient() .","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 document can be saved in SPIFFS or SD and read using AutoConnect's load function. you can reduce the steps of the basic procedure with this approach, but this way consumes a lot of memory. The following JSON code and sketch will execute the custom Web page as an 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 #include #include #include 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 on the custom Web page. The value entered into the AutoConnectElements is stored to the member variables of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the request handler which will be registered by AutoConnect::on function. And 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. The details are explained in section Custom field data handling . window.onload = function() { Gifffer(); }; There is no overlay in the actual menu. \u21a9 The sketch is actually this: #include #include #include 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 AutoConnectAux & AutoConnectElements declaration. Custom Web page declaration by JSON can embed in the sketch as a fixed string or can store in the external file such as SPIFFS for stream loading. Also, 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 like the below: A JSON document for AutoConnect can contain the custom Web page multiple. You can further reduce the sketch process by loading multiple pages of JSON document at once. Adopt ArduinoJson v5 or v6 To handle AutoConnectAux and AutoConnectElements written in JSON, you need to install the ArduinoJson library. You can adopt either version 5 or version 6 for the ArduinoJson. AutoConnect supports both versions. JSON objects & elements for the custom Web page \u00b6 JSON document structure for AutoConnectAux \u00b6 AutoConnectAux will configure custom Web pages with JSON objects. The elements that make up the 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\" } ] } ] The above custom Web page definitions can be loaded in a batch using the AutoConnect::load function. JSON object for AutoConnectElements \u00b6 JSON description for AutoConnectElements describes 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 AutoConnectFile: ACFile AutoConnectInput: ACInput AutoConnectRadio: ACRadio AutoConnectSelect: ACSelect AutoConnectStyle: ACStyle AutoConnectSubmit: ACSubmit AutoConnectText: ACText key_according_to_type \u00b6 This is different for each AutoConnectElements, and the key that can be specified by the type of AutoConnectElements 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. ACFile \u00b6 value : The file name of the upload file will be stored. The value is read-only and will be ignored if specified. label : Specifies a label of the file selection box. Its placement is always to the left of the file selection box. store : Specifies the destination to save the uploaded file. Its value accepts one of the following: fs : Save as the SPIFFS file in flash of ESP8266/ESP32 module. sd : Save to an external SD device connected to ESP8266/ESP32 module. extern : Pass the content of the uploaded file to the uploader which is declared by the sketch individually. Its uploader must inherit AutoConnectUploadHandler class and implements _open , _write and _close function. 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. ACStyle \u00b6 value : Specifies the custom CSS code. 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. format : Specifies how to interpret the value. It specifies the conversion format when outputting values. The format string conforms to the C-style printf library functions, but depends on the espressif sdk implementation. The conversion specification is valid only for %s format. (Left and Right justification, width are also valid.) AutoConnect's JSON parsing process is not perfect It is based on analysis by ArduinoJson, but the semantic analysis is simplified to save memory. Consequently, it is not an error that a custom Web page JSON document to have unnecessary keys. It will be ignored. Loading JSON document \u00b6 Loading to AutoConnect \u00b6 There are two main ways to load the custom Web pages into AutoConnect. Load directly into AutoConnect This way does not require an explicit declaration of AutoConnectAux objects with sketches and is also useful when importing the custom Web pages JSON document from an external file such as SPIFFS because the page definition and sketch coding structure can be separated. Using the AutoCoonnect::load function, AutoConnect dynamically generates the necessary AutoConnectAux objects internally based on the custom Web page definition of the imported JSON document content. In the sketch, the generated AutoConnectAux object can be referenced using the AutoConnect::aux function. You can reach the AutoConnectElements you desired using the AutoConnectAux::getElement function of its AutoConnectAux. In the following example, it loads in a batch a JSON document of custom Web pages stored in SPIFFS and accesses to the AutoConnectInput element. [ { \"title\" : \"page1\" , \"uri\" : \"/page1\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input1\" , \"type\" : \"ACInput\" } ] }, { \"title\" : \"page2\" , \"uri\" : \"/page2\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input2\" , \"type\" : \"ACInput\" } ] } ] AutoConnect portal; File page = SPIFFS.open( \"/custom_page.json\" , \"r\" ); portal.load(page); page.close(); AutoConnectAux * aux = portal.aux( \"/page1\" ); AutoConnectInput & input1 = aux -> getElement < AutoConnectInput > ( \"input1\" ); Load to AutoConnectAux and join to AutoConnect This way declares AutoConnectAux in the sketch and loads the custom Web pages JSON document there. It has an advantage for if you want to define each page of a custom Web page individually or allocate AutoConnectAux objects dynamically on the sketch side. After loading a JSON document using the AutoConnectAux::load function by each, integrate those into AutoConnect using the AutoConnect::join function. In the following example, you can see the difference between two sketches in a sketch modified using the AutoConnectAux::load. { \"title\" : \"page1\" , \"uri\" : \"/page1\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input1\" , \"type\" : \"ACInput\" } ] } { \"title\" : \"page2\" , \"uri\" : \"/page2\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input2\" , \"type\" : \"ACInput\" } ] } AutoConnect portal; AutoConnectAux page1; AutoConnectAux page2; File page = SPIFFS.open( \"/custom_page1.json\" , \"r\" ); page1.load(page); page.close(); page = SPIFFS.open( \"/custom_page2.json\" , \"r\" ); page2.load(page); page.close(); portal.join( { page1, page2 } ); AutoConnectInput & input1 = page1.getElement < AutoConnectInput > ( \"input1\" ); Loading from the streamed file \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. Adjust the JSON document buffer size \u00b6 AutoConnect uses ArduinoJson library's dynamic buffer to parse JSON documents. Its dynamic buffer allocation scheme depends on the version 5 or version 6 of ArduinoJson library. Either version must have enough buffer to parse the custom web page's JSON document successfully. AutoConnect has the following three constants internally to complete the parsing as much as possible in both ArduinoJson version. These constants are macro defined in AutoConnectDefs.h . If memory insufficiency occurs during JSON document parsing, you can adjust these constants to avoid insufficiency by using the JsonAssistant with deriving the required buffer size in advance. #define AUTOCONNECT_JSONBUFFER_SIZE 256 #define AUTOCONNECT_JSONDOCUMENT_SIZE (8 * 1024) #define AUTOCONNECT_JSONPSRAM_SIZE (16* 1024) AUTOCONNECT_JSONBUFFER_SIZE \u00b6 This is a unit size constant of DynamicJsonBuffer and works when the library used is ArduinoJson version 5. A buffer size of the JSON document increases with this unit. This value relates to the impact of the fragmented heap area. If it is too large, may occur run-out of memory. AUTOCONNECT_JSONDOCUMENT_SIZE \u00b6 This is a size of DynamicJsonDocument for ArduinoJson version 6. This buffer is not automatically expanding, and the size determines the limit. AUTOCONNECT_JSONPSRAM_SIZE \u00b6 For ESP32 module equips with PSRAM, you can allocate the JSON document buffer to PSRAM. Buffer allocation to PSRAM will enable when PSRAM:Enabled option selected in the Arduino IDE's Board Manager menu. It is available since ArduinoJson 6.10.0. 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":"AutoConnectAux will configure custom Web pages with JSON objects. The elements that make up the 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\" } ] } ] The above custom Web page definitions can be loaded in a batch using the AutoConnect::load function.","title":" Multiple custom Web pages declaration in JSON document"},{"location":"acjson.html#json-object-for-autoconnectelements","text":"JSON description for AutoConnectElements describes 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 AutoConnectFile: ACFile AutoConnectInput: ACInput AutoConnectRadio: ACRadio AutoConnectSelect: ACSelect AutoConnectStyle: ACStyle AutoConnectSubmit: ACSubmit AutoConnectText: ACText","title":" type"},{"location":"acjson.html#key_according_to_type","text":"This is different for each AutoConnectElements, and the key that can be specified by the type of AutoConnectElements 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#acfile","text":"value : The file name of the upload file will be stored. The value is read-only and will be ignored if specified. label : Specifies a label of the file selection box. Its placement is always to the left of the file selection box. store : Specifies the destination to save the uploaded file. Its value accepts one of the following: fs : Save as the SPIFFS file in flash of ESP8266/ESP32 module. sd : Save to an external SD device connected to ESP8266/ESP32 module. extern : Pass the content of the uploaded file to the uploader which is declared by the sketch individually. Its uploader must inherit AutoConnectUploadHandler class and implements _open , _write and _close function.","title":" ACFile"},{"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#acstyle","text":"value : Specifies the custom CSS code.","title":" ACStyle"},{"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. format : Specifies how to interpret the value. It specifies the conversion format when outputting values. The format string conforms to the C-style printf library functions, but depends on the espressif sdk implementation. The conversion specification is valid only for %s format. (Left and Right justification, width are also valid.) AutoConnect's JSON parsing process is not perfect It is based on analysis by ArduinoJson, but the semantic analysis is simplified to save memory. Consequently, it is not an error that a custom Web page JSON document to have unnecessary keys. It will be ignored.","title":" ACText"},{"location":"acjson.html#loading-json-document","text":"","title":"Loading JSON document"},{"location":"acjson.html#loading-to-autoconnect","text":"There are two main ways to load the custom Web pages into AutoConnect. Load directly into AutoConnect This way does not require an explicit declaration of AutoConnectAux objects with sketches and is also useful when importing the custom Web pages JSON document from an external file such as SPIFFS because the page definition and sketch coding structure can be separated. Using the AutoCoonnect::load function, AutoConnect dynamically generates the necessary AutoConnectAux objects internally based on the custom Web page definition of the imported JSON document content. In the sketch, the generated AutoConnectAux object can be referenced using the AutoConnect::aux function. You can reach the AutoConnectElements you desired using the AutoConnectAux::getElement function of its AutoConnectAux. In the following example, it loads in a batch a JSON document of custom Web pages stored in SPIFFS and accesses to the AutoConnectInput element. [ { \"title\" : \"page1\" , \"uri\" : \"/page1\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input1\" , \"type\" : \"ACInput\" } ] }, { \"title\" : \"page2\" , \"uri\" : \"/page2\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input2\" , \"type\" : \"ACInput\" } ] } ] AutoConnect portal; File page = SPIFFS.open( \"/custom_page.json\" , \"r\" ); portal.load(page); page.close(); AutoConnectAux * aux = portal.aux( \"/page1\" ); AutoConnectInput & input1 = aux -> getElement < AutoConnectInput > ( \"input1\" ); Load to AutoConnectAux and join to AutoConnect This way declares AutoConnectAux in the sketch and loads the custom Web pages JSON document there. It has an advantage for if you want to define each page of a custom Web page individually or allocate AutoConnectAux objects dynamically on the sketch side. After loading a JSON document using the AutoConnectAux::load function by each, integrate those into AutoConnect using the AutoConnect::join function. In the following example, you can see the difference between two sketches in a sketch modified using the AutoConnectAux::load. { \"title\" : \"page1\" , \"uri\" : \"/page1\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input1\" , \"type\" : \"ACInput\" } ] } { \"title\" : \"page2\" , \"uri\" : \"/page2\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input2\" , \"type\" : \"ACInput\" } ] } AutoConnect portal; AutoConnectAux page1; AutoConnectAux page2; File page = SPIFFS.open( \"/custom_page1.json\" , \"r\" ); page1.load(page); page.close(); page = SPIFFS.open( \"/custom_page2.json\" , \"r\" ); page2.load(page); page.close(); portal.join( { page1, page2 } ); AutoConnectInput & input1 = page1.getElement < AutoConnectInput > ( \"input1\" );","title":" Loading to AutoConnect"},{"location":"acjson.html#loading-from-the-streamed-file","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 from the streamed file"},{"location":"acjson.html#adjust-the-json-document-buffer-size","text":"AutoConnect uses ArduinoJson library's dynamic buffer to parse JSON documents. Its dynamic buffer allocation scheme depends on the version 5 or version 6 of ArduinoJson library. Either version must have enough buffer to parse the custom web page's JSON document successfully. AutoConnect has the following three constants internally to complete the parsing as much as possible in both ArduinoJson version. These constants are macro defined in AutoConnectDefs.h . If memory insufficiency occurs during JSON document parsing, you can adjust these constants to avoid insufficiency by using the JsonAssistant with deriving the required buffer size in advance. #define AUTOCONNECT_JSONBUFFER_SIZE 256 #define AUTOCONNECT_JSONDOCUMENT_SIZE (8 * 1024) #define AUTOCONNECT_JSONPSRAM_SIZE (16* 1024)","title":" Adjust the JSON document buffer size"},{"location":"acjson.html#autoconnect_jsonbuffer_size","text":"This is a unit size constant of DynamicJsonBuffer and works when the library used is ArduinoJson version 5. A buffer size of the JSON document increases with this unit. This value relates to the impact of the fragmented heap area. If it is too large, may occur run-out of memory.","title":"AUTOCONNECT_JSONBUFFER_SIZE"},{"location":"acjson.html#autoconnect_jsondocument_size","text":"This is a size of DynamicJsonDocument for ArduinoJson version 6. This buffer is not automatically expanding, and the size determines the limit.","title":"AUTOCONNECT_JSONDOCUMENT_SIZE"},{"location":"acjson.html#autoconnect_jsonpsram_size","text":"For ESP32 module equips with PSRAM, you can allocate the JSON document buffer to PSRAM. Buffer allocation to PSRAM will enable when PSRAM:Enabled option selected in the Arduino IDE's Board Manager menu. It is available since ArduinoJson 6.10.0.","title":"AUTOCONNECT_JSONPSRAM_SIZE"},{"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":"acupload.html","text":"Uploading file from Web Browser \u00b6 If you have to write some data individually to the ESP8266/ESP32 module for the sketch behavior, the AutoConnectFile element will assist with your wants implementation. The AutoConnectFile element produces an HTML #include #include #include // Upload request custom Web page static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"File uploading platform\" }, { \"name\":\"upload_file\", \"type\":\"ACFile\", \"label\":\"Select file: \", \"store\":\"fs\" }, { \"name\":\"upload\", \"type\":\"ACSubmit\", \"value\":\"UPLOAD\", \"uri\":\"/upload\" } ] } )\" ; // Upload result display static const char PAGE_BROWSE[] PROGMEM = R\"( { \"uri\": \"/upload\", \"title\": \"Upload\", \"menu\": false, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"Uploading ended\" }, { \"name\":\"filename\", \"type\":\"ACText\" }, { \"name\":\"size\", \"type\":\"ACText\", \"format\":\"%s bytes uploaded\" }, { \"name\":\"content_type\", \"type\":\"ACText\", \"format\":\"Content: %s\" } ] } )\" ; ESP8266WebServer server; AutoConnect portal (server); // Declare AutoConnectAux separately as a custom web page to access // easily for each page in the post-upload handler. AutoConnectAux auxUpload; AutoConnectAux auxBrowse; /** * Post uploading, AutoConnectFile's built-in upload handler reads the * file saved in SPIFFS and displays the file contents on /upload custom * web page. However, only files with mime type uploaded as text are * displayed. A custom web page handler is called after upload. * @param aux AutoConnectAux(/upload) * @param args PageArgument * @return Uploaded text content */ String postUpload (AutoConnectAux & aux, PageArgument & args) { String content; AutoConnectFile & upload = auxUpload[ \"upload_file\" ].as < AutoConnectFile > (); AutoConnectText & aux_filename = aux[ \"filename\" ].as < AutoConnectText > (); AutoConnectText & aux_size = aux[ \"size\" ].as < AutoConnectText > (); AutoConnectText & aux_contentType = aux[ \"content_type\" ].as < AutoConnectText > (); // Assignment operator can be used for the element attribute. aux_filename.value = upload.value; aux_size.value = String(upload.size); aux_contentType.value = upload.mimeType; // The file saved by the AutoConnect upload handler is read from // the EEPROM and echoed to a custom web page. SPIFFS.begin(); File uploadFile = SPIFFS.open(String( \"/\" + upload.value).c_str(), \"r\" ); if (uploadFile) { while (uploadFile.available()) { char c = uploadFile.read(); Serial.print(c); } uploadFile.close(); } else content = \"Not saved\" ; SPIFFS.end(); return String(); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); auxUpload.load(PAGE_UPLOAD); auxBrowse.load(PAGE_BROWSE); portal.join({ auxUpload, auxBrowse }); auxBrowse.on(postUpload); portal.begin(); } void loop () { portal.handleClient(); } Where will the file upload \u00b6 The AutoConnect built-in upload handler can save the upload file to three locations: Flash memory embedded in the ESP8266/ESP32 module SD device externally connected to the ESP8266/ESP32 module Other character devices You can specify the device type to save with the store attribute of AutoConnectFile, and it accepts the following values: Flash : AC_File_FS for the API parameter or fs for the JSON document SD : AC_File_SD for the API parameter or sd for the JSON document Other : AC_File_Extern for the API parameter or extern for the JSON document The substance of AC_File_FS (fs) is a SPIFFS file system implemented by the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance SPIFFS to access SPIFFS. Also, the substance of AC_File_SD (sd) is a FAT file of Arduino SD library ported to the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance SD to access SD. When saving to an external SD device, there are additional required parameters for the connection interface and is defined as the macro in AutoConnectDefs.h. #define AUTOCONNECT_SD_CS SS #define AUTOCONNECT_SD_SPEED 4000000 AUTOCONNECT_SD_CS defines which GPIO for the CS (Chip Select, or SS as Slave Select) pin. This definition is derived from pins_arduino.h, which is included in the Arduino core distribution. If you want to assign the CS pin to another GPIO, you need to change the macro definition of AutoConnectDefs.h. AUTOCONNECT_SD_SPEED defines SPI clock speed depending on the connected device. Involves both the begin() and the end() The built-in uploader executes the begin and end functions regardless of the sketch whence the file system of the device will terminate with the uploader termination. Therefore, to use the device in the sketch after uploading, you need to restart it with the begin function. When it will be uploaded \u00b6 Upload handler will be launched by ESP8266WebServer/WebServer(as ESP32) library which is triggered by receiving an HTTP stream of POST BODY including file content. Its launching occurs before invoking the page handler. The following diagram illustrates the file uploading sequence: At the time of the page handler behaves, the uploaded file already saved to the device, and the member variables of AutoConnectFile reflects the file name and transfer size. The file name for the uploaded file \u00b6 AutoConnetFile saves the uploaded file with the file name you selected by #include #include static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"File uploading platform\" }, { \"name\":\"upload_file\", \"type\":\"ACFile\", \"label\":\"Select file: \", \"store\":\"extern\" }, { \"name\":\"upload\", \"type\":\"ACSubmit\", \"value\":\"UPLOAD\", \"uri\":\"/upload\" } ] } )\" ; static const char PAGE_RECEIVED[] PROGMEM = R\"( { \"uri\": \"/upload\", \"title\": \"Upload ended\", \"menu\": false, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"File uploading ended\" } ] } )\" ; // Custom upload handler class class CustomUploader : public AutoConnectUploadHandler { public : CustomUploader() {} ~ CustomUploader() {} protected : bool _open( const char * filename, const char * mode) override ; size_t _write ( const uint8_t * buf, const size_t size) override ; void _close ( void ) override ; }; // _open for custom open bool CustomUploader :: _open( const char * filename, const char * mode) { // Here, an implementation for the open file. } // _open for custom write size_t CustomUploader :: _write( const uint8_t * buf, const size_t size) { // Here, an implementation for the writing the file data. } // _open for custom close void CustomUploader :: _close( void ) { // Here, an implementation for the close file. } AutoConnect portal; AutoConnectAux uploadPage; AutoConnectAux receivePage; CustomUploader uploader; // Declare the custom uploader void setup () { uploadPage.load(PAGE_UPLOAD); receivePage.load(PAGE_RECEIVED); portal.join({ uploadPage, receivePage }); receivePage.onUpload < CustomUploader > (uploader); // Register the custom uploader portal.begin(); } void loop () { portal.handleClient(); } Don't forget to specify the store When using a custom uploader, remember to specify the extern for the store attribute of AutoConnectFile. window.onload = function() { Gifffer(); }; The AutoConnectFile element can be used with other AutoConnectElements on the same page. \u21a9","title":"File upload handler"},{"location":"acupload.html#uploading-file-from-web-browser","text":"If you have to write some data individually to the ESP8266/ESP32 module for the sketch behavior, the AutoConnectFile element will assist with your wants implementation. The AutoConnectFile element produces an HTML #include #include #include // Upload request custom Web page static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"File uploading platform\" }, { \"name\":\"upload_file\", \"type\":\"ACFile\", \"label\":\"Select file: \", \"store\":\"fs\" }, { \"name\":\"upload\", \"type\":\"ACSubmit\", \"value\":\"UPLOAD\", \"uri\":\"/upload\" } ] } )\" ; // Upload result display static const char PAGE_BROWSE[] PROGMEM = R\"( { \"uri\": \"/upload\", \"title\": \"Upload\", \"menu\": false, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"Uploading ended\" }, { \"name\":\"filename\", \"type\":\"ACText\" }, { \"name\":\"size\", \"type\":\"ACText\", \"format\":\"%s bytes uploaded\" }, { \"name\":\"content_type\", \"type\":\"ACText\", \"format\":\"Content: %s\" } ] } )\" ; ESP8266WebServer server; AutoConnect portal (server); // Declare AutoConnectAux separately as a custom web page to access // easily for each page in the post-upload handler. AutoConnectAux auxUpload; AutoConnectAux auxBrowse; /** * Post uploading, AutoConnectFile's built-in upload handler reads the * file saved in SPIFFS and displays the file contents on /upload custom * web page. However, only files with mime type uploaded as text are * displayed. A custom web page handler is called after upload. * @param aux AutoConnectAux(/upload) * @param args PageArgument * @return Uploaded text content */ String postUpload (AutoConnectAux & aux, PageArgument & args) { String content; AutoConnectFile & upload = auxUpload[ \"upload_file\" ].as < AutoConnectFile > (); AutoConnectText & aux_filename = aux[ \"filename\" ].as < AutoConnectText > (); AutoConnectText & aux_size = aux[ \"size\" ].as < AutoConnectText > (); AutoConnectText & aux_contentType = aux[ \"content_type\" ].as < AutoConnectText > (); // Assignment operator can be used for the element attribute. aux_filename.value = upload.value; aux_size.value = String(upload.size); aux_contentType.value = upload.mimeType; // The file saved by the AutoConnect upload handler is read from // the EEPROM and echoed to a custom web page. SPIFFS.begin(); File uploadFile = SPIFFS.open(String( \"/\" + upload.value).c_str(), \"r\" ); if (uploadFile) { while (uploadFile.available()) { char c = uploadFile.read(); Serial.print(c); } uploadFile.close(); } else content = \"Not saved\" ; SPIFFS.end(); return String(); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); auxUpload.load(PAGE_UPLOAD); auxBrowse.load(PAGE_BROWSE); portal.join({ auxUpload, auxBrowse }); auxBrowse.on(postUpload); portal.begin(); } void loop () { portal.handleClient(); }","title":"Basic steps of the file upload sketch"},{"location":"acupload.html#where-will-the-file-upload","text":"The AutoConnect built-in upload handler can save the upload file to three locations: Flash memory embedded in the ESP8266/ESP32 module SD device externally connected to the ESP8266/ESP32 module Other character devices You can specify the device type to save with the store attribute of AutoConnectFile, and it accepts the following values: Flash : AC_File_FS for the API parameter or fs for the JSON document SD : AC_File_SD for the API parameter or sd for the JSON document Other : AC_File_Extern for the API parameter or extern for the JSON document The substance of AC_File_FS (fs) is a SPIFFS file system implemented by the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance SPIFFS to access SPIFFS. Also, the substance of AC_File_SD (sd) is a FAT file of Arduino SD library ported to the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance SD to access SD. When saving to an external SD device, there are additional required parameters for the connection interface and is defined as the macro in AutoConnectDefs.h. #define AUTOCONNECT_SD_CS SS #define AUTOCONNECT_SD_SPEED 4000000 AUTOCONNECT_SD_CS defines which GPIO for the CS (Chip Select, or SS as Slave Select) pin. This definition is derived from pins_arduino.h, which is included in the Arduino core distribution. If you want to assign the CS pin to another GPIO, you need to change the macro definition of AutoConnectDefs.h. AUTOCONNECT_SD_SPEED defines SPI clock speed depending on the connected device. Involves both the begin() and the end() The built-in uploader executes the begin and end functions regardless of the sketch whence the file system of the device will terminate with the uploader termination. Therefore, to use the device in the sketch after uploading, you need to restart it with the begin function.","title":"Where will the file upload"},{"location":"acupload.html#when-it-will-be-uploaded","text":"Upload handler will be launched by ESP8266WebServer/WebServer(as ESP32) library which is triggered by receiving an HTTP stream of POST BODY including file content. Its launching occurs before invoking the page handler. The following diagram illustrates the file uploading sequence: At the time of the page handler behaves, the uploaded file already saved to the device, and the member variables of AutoConnectFile reflects the file name and transfer size.","title":"When it will be uploaded"},{"location":"acupload.html#the-file-name-for-the-uploaded-file","text":"AutoConnetFile saves the uploaded file with the file name you selected by #include #include static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"File uploading platform\" }, { \"name\":\"upload_file\", \"type\":\"ACFile\", \"label\":\"Select file: \", \"store\":\"extern\" }, { \"name\":\"upload\", \"type\":\"ACSubmit\", \"value\":\"UPLOAD\", \"uri\":\"/upload\" } ] } )\" ; static const char PAGE_RECEIVED[] PROGMEM = R\"( { \"uri\": \"/upload\", \"title\": \"Upload ended\", \"menu\": false, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"File uploading ended\" } ] } )\" ; // Custom upload handler class class CustomUploader : public AutoConnectUploadHandler { public : CustomUploader() {} ~ CustomUploader() {} protected : bool _open( const char * filename, const char * mode) override ; size_t _write ( const uint8_t * buf, const size_t size) override ; void _close ( void ) override ; }; // _open for custom open bool CustomUploader :: _open( const char * filename, const char * mode) { // Here, an implementation for the open file. } // _open for custom write size_t CustomUploader :: _write( const uint8_t * buf, const size_t size) { // Here, an implementation for the writing the file data. } // _open for custom close void CustomUploader :: _close( void ) { // Here, an implementation for the close file. } AutoConnect portal; AutoConnectAux uploadPage; AutoConnectAux receivePage; CustomUploader uploader; // Declare the custom uploader void setup () { uploadPage.load(PAGE_UPLOAD); receivePage.load(PAGE_RECEIVED); portal.join({ uploadPage, receivePage }); receivePage.onUpload < CustomUploader > (uploader); // Register the custom uploader portal.begin(); } void loop () { portal.handleClient(); } Don't forget to specify the store When using a custom uploader, remember to specify the extern for the store attribute of AutoConnectFile. window.onload = function() { Gifffer(); }; The AutoConnectFile element can be used with other AutoConnectElements on the same page. \u21a9","title":" Register custom upload handler"},{"location":"advancedusage.html","text":"Advanced usage \u00b6 404 handler \u00b6 Registering the \"not found\" handler is a different way than ESP8266WebServer (WebServer as ESP32). 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 . Access to saved credentials \u00b6 AutoConnect stores the established WiFi connection in the flash of the ESP8266/ESP32 module and equips the class to access it from the sketch. You can read, write or erase the credentials using this class individually. It's AutoConnectCredential class which provides the access method to the saved credentials in the flash. Refer to section Saved credentials access for details. Where to store credentials in ESP32 with AutoConnect v1.0.0 or later Since v1.0.0, credentials are stored in nvs of ESP32. AutoConnect v1.0.0 or later accesses the credentials area using the Preferences class with the arduino esp-32 core. So in ESP32, the credentials are not in the EEPROM, it is in the namespace AC_CREDT of the nvs. See Saved credentials access for details. In ESP8266, it is saved in EEPROM as is conventionally done. 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 the flash 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 to the flash. You can disable it with the autoSave parameter specified by AutoConnectConfig . See the Saved credentials access chapter for details on accessing stored credentials. AutoConnect Portal; AutoConnectConfig Config; Config.autoSave = AC_SAVECREDENTIAL_NEVER; Portal.config(Config); Portal.begin(); Credentials storage location The location where AutoConnect saves credentials depends on the module type and the AutoConnect library version, also arduino-esp32 core version. AutoConnect Arduino core for ESP8266 Arduino core for ESP32 1.0.2 earlier 1.0.3 later v0.9.12 earlier EEPROM EEPROM (partition) Not supported v1.0.0 later Preferences (nvs) (Can be used EEPROM with turning off AUTOCONNECT_USE_PREFERENCES macro) Preferences (nvs) 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 . The default value is macro defined by AUTOCONNECT_TIMEOUT in the AutoConnectDef.h file. The other timeout control is 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 #include #include 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. Compared to the above code specified no option with the following example code, the captive portal will remain available even after a timeout without changing the logic of the sketch. #include #include #include 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(); } Casts the HTML pages to be add-on into the menu \u00b6 If your sketch handles web pages, you can embed the pages into the AutoConnect menu in continuance enjoying the utility of the WiFi connection feature. Unlike the custom Web pages by AutoConnectElements , this allows to legacy web pages registered by ESP8266WebServer::on or WebServer::on function. You can use AutoConnectAux only constructed with the URI of the page to be embedding. 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 section Constructing the menu 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 for the FSBrowser as the below. Change the menu labels \u00b6 You can change the label of the AutoConnect menu item by rewriting the default label letter in AutoConnectLabels.h macros. However, changing menu items letter influences all the sketch's build scenes. #define AUTOCONNECT_MENULABEL_CONFIGNEW \"Configure new AP\" #define AUTOCONNECT_MENULABEL_OPENSSIDS \"Open SSIDs\" #define AUTOCONNECT_MENULABEL_DISCONNECT \"Disconnect\" #define AUTOCONNECT_MENULABEL_RESET \"Reset...\" #define AUTOCONNECT_MENULABEL_HOME \"HOME\" #define AUTOCONNECT_BUTTONLABEL_RESET \"RESET\" 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 #include #include 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.autoRise = 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, in ESP32 arduino core 1.0.2 earlier, 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. The boundaryOffset ignored with AutoConnect v1.0.0 later on ESP32 arduino core 1.0.3 later For ESP32 arduino core 1.0.3 and later, AutoConnect will store credentials to Preferences in the nvs. Since it is defined as the namespace dedicated to AutoConnect and separated from the area used for user sketches. Therefore, the boundaryOffet is ignored with the combination of AutoConnect v1.0.0 or later and the arduino-esp32 1.0.3 or later. 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 #include #include 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. Station hostname. Auto save credential. Offset address of the credentials storage area in EEPROM. Captive portal time out limit. Maintain portal function even after a timeout. 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. Menu title. Ticker signal output. 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 will display at the bottom of the AutoConnect menu. It could be set using the AutoConnect::home function. Change SSID and Password for SoftAP \u00b6 An esp8266ap is default SSID name for SoftAP of captive portal and password is 12345678 for ESP8266. Similarly, esp32ap and 12345678 for ESP32. You can change both by setting apid and psk . AutoConnect portal; AutoConnectConfig config; void setup () { config.apid = \"ap_portal\" ; config.psk = \"new_password\" ; portal.config(config); portal.begin(); } Also, you can specify the SSID, password for SoftAP with the constructor of the AutoConnectConfig as below. AutoConnect portal; AutoConnectConfig config ( \"ap_portal\" , \"new_passwrod\" ); void setup () { portal.config(config); portal.begin(); } You can also assign no password to SoftAP launched as a captive portal. Assigning a null string as String(\"\") to AutoConnectConfig::psk does not require a password when connecting to SoftAP. But this method is not recommended. The broadcast radio of SSID emitted from SoftAP will leak and reach several tens of meters. 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 AutoConnectDef.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 AutoConnectConfig::hostName assigns the station DHCP hostname which complies with RFC952 . It must satisfy the following constraints. Up to 24 characters Only the alphabet (a-z, A-Z), digits (0-9), minus sign (-) No '-' as last character Ticker for WiFi status \u00b6 Flicker signal can be output from the ESP8266/ESP32 module according to WiFi connection status. If you connect the LED to the signal output pin, you can know the WiFi connection status during behavior inside AutoConnect::begin through the LED blink. AutoConnectConfig::ticker option specifies flicker signal output. The following sketch is an example of flashing the active-high LED connected to pin #16 according to WiFi connection during the AutoConnect::begin. AutoConnect portal; AutoConnectConfig Config; Config.ticker = true; config.tickerPort = 16 ; Config.tickerOn = HIGH; portal.config(Config); portal.begin(); The AutoConnect ticker indicates the WiFi connection status in the following three flicker patterns: Short blink: The ESP module stays in APSTA mode. Short-on and long-off: No STA connection state. (i.e. WiFi.status != WL_CONNECTED) No blink: WiFi connection with access point established and data link enabled. (i.e. WiFi.status = WL_CONNECTED) The flicker cycle length is defined by some macros in AutoConnectDefs.h header file. #define AUTOCONNECT_FLICKER_PERIODAP 1000 // [ms] #define AUTOCONNECT_FLICKER_PERIODDC (AUTOCONNECT_FLICKER_PERIODAP << 1) // [ms] #define AUTOCONNECT_FLICKER_WIDTHAP 96 // (8 bit resolution) #define AUTOCONNECT_FLICKER_WIDTHDC 16 // (8 bit resolution) AUTOCONNECTT_FLICKER_PERIODAP : Assigns a flicker period when the ESP module stays in APSTA mode. AUTOCONNECT_FLICKER_PERIODDC : Assigns a flicker period when WiFi is disconnected. AUTOCONNECT_FLICKER_WIDTHAP and AUTOCONNECT_FLICKER_WIDTHDC : Specify the duty rate for each period[ms] in 8-bit resolution. AutoConnectConfig::tickerPort specifies a port that outputs the flicker signal. If you are using an LED-equipped ESP module board, you can assign a LED pin to the tick-port for the WiFi connection monitoring without the external LED. The default pin is arduino valiant's LED_BUILTIN . You can refer to the Arduino IDE's variant information to find out which pin actually on the module assign to LED_BUILTIN . 3 AutoConnectConfig::tickerOn specifies the active logic level of the flicker signal. This value indicates the active signal level when driving the ticker. For example, if the LED connected to tickPort lights by LOW, the tickerOn is LOW . The logic level of LED_BUILTIN for popular modules are as follows: module Logic level LED_BUILTIN Pin Arduino alias NodeMCU V1.0 Active-low 16 D0 WEMOS D1 mini Active-low 2 D4 SparkFun ESP8266 Thing Active-high 5 Adafruit Feather HUZZAH ESP8266 Active-low 0 NodeMCU 32s Active-high 2 T2 LOLIN32 Pro Active-low 5 SS SparkFun ESP32 Thing Active-high 5 Adafruit Feather HUZZAH32 Active-high 13 A12 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 It's defined in the pins_arduino.h file, located in the sub-folder named variants wherein Arduino IDE installed folder. \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 as ESP32). 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#access-to-saved-credentials","text":"AutoConnect stores the established WiFi connection in the flash of the ESP8266/ESP32 module and equips the class to access it from the sketch. You can read, write or erase the credentials using this class individually. It's AutoConnectCredential class which provides the access method to the saved credentials in the flash. Refer to section Saved credentials access for details. Where to store credentials in ESP32 with AutoConnect v1.0.0 or later Since v1.0.0, credentials are stored in nvs of ESP32. AutoConnect v1.0.0 or later accesses the credentials area using the Preferences class with the arduino esp-32 core. So in ESP32, the credentials are not in the EEPROM, it is in the namespace AC_CREDT of the nvs. See Saved credentials access for details. In ESP8266, it is saved in EEPROM as is conventionally done.","title":" Access to saved credentials"},{"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 the flash 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 to the flash. You can disable it with the autoSave parameter specified by AutoConnectConfig . See the Saved credentials access chapter for details on accessing stored credentials. AutoConnect Portal; AutoConnectConfig Config; Config.autoSave = AC_SAVECREDENTIAL_NEVER; Portal.config(Config); Portal.begin(); Credentials storage location The location where AutoConnect saves credentials depends on the module type and the AutoConnect library version, also arduino-esp32 core version. AutoConnect Arduino core for ESP8266 Arduino core for ESP32 1.0.2 earlier 1.0.3 later v0.9.12 earlier EEPROM EEPROM (partition) Not supported v1.0.0 later Preferences (nvs) (Can be used EEPROM with turning off AUTOCONNECT_USE_PREFERENCES macro) Preferences (nvs)","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 . The default value is macro defined by AUTOCONNECT_TIMEOUT in the AutoConnectDef.h file. The other timeout control is 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 #include #include 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. Compared to the above code specified no option with the following example code, the captive portal will remain available even after a timeout without changing the logic of the sketch. #include #include #include 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#casts-the-html-pages-to-be-add-on-into-the-menu","text":"If your sketch handles web pages, you can embed the pages into the AutoConnect menu in continuance enjoying the utility of the WiFi connection feature. Unlike the custom Web pages by AutoConnectElements , this allows to legacy web pages registered by ESP8266WebServer::on or WebServer::on function. You can use AutoConnectAux only constructed with the URI of the page to be embedding. 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 section Constructing the menu of Examples page.","title":" Casts the HTML pages to be add-on into the menu"},{"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 for the FSBrowser as the below.","title":" Change menu title"},{"location":"advancedusage.html#change-the-menu-labels","text":"You can change the label of the AutoConnect menu item by rewriting the default label letter in AutoConnectLabels.h macros. However, changing menu items letter influences all the sketch's build scenes. #define AUTOCONNECT_MENULABEL_CONFIGNEW \"Configure new AP\" #define AUTOCONNECT_MENULABEL_OPENSSIDS \"Open SSIDs\" #define AUTOCONNECT_MENULABEL_DISCONNECT \"Disconnect\" #define AUTOCONNECT_MENULABEL_RESET \"Reset...\" #define AUTOCONNECT_MENULABEL_HOME \"HOME\" #define AUTOCONNECT_BUTTONLABEL_RESET \"RESET\"","title":" Change the menu labels"},{"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 #include #include 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.autoRise = 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, in ESP32 arduino core 1.0.2 earlier, 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. The boundaryOffset ignored with AutoConnect v1.0.0 later on ESP32 arduino core 1.0.3 later For ESP32 arduino core 1.0.3 and later, AutoConnect will store credentials to Preferences in the nvs. Since it is defined as the namespace dedicated to AutoConnect and separated from the area used for user sketches. Therefore, the boundaryOffet is ignored with the combination of AutoConnect v1.0.0 or later and the arduino-esp32 1.0.3 or later.","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 #include #include 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. Station hostname. Auto save credential. Offset address of the credentials storage area in EEPROM. Captive portal time out limit. Maintain portal function even after a timeout. 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. Menu title. Ticker signal output. 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 will display 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#change-ssid-and-password-for-softap","text":"An esp8266ap is default SSID name for SoftAP of captive portal and password is 12345678 for ESP8266. Similarly, esp32ap and 12345678 for ESP32. You can change both by setting apid and psk . AutoConnect portal; AutoConnectConfig config; void setup () { config.apid = \"ap_portal\" ; config.psk = \"new_password\" ; portal.config(config); portal.begin(); } Also, you can specify the SSID, password for SoftAP with the constructor of the AutoConnectConfig as below. AutoConnect portal; AutoConnectConfig config ( \"ap_portal\" , \"new_passwrod\" ); void setup () { portal.config(config); portal.begin(); } You can also assign no password to SoftAP launched as a captive portal. Assigning a null string as String(\"\") to AutoConnectConfig::psk does not require a password when connecting to SoftAP. But this method is not recommended. The broadcast radio of SSID emitted from SoftAP will leak and reach several tens of meters.","title":" Change SSID and Password for SoftAP"},{"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 AutoConnectDef.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":"AutoConnectConfig::hostName assigns the station DHCP hostname which complies with RFC952 . It must satisfy the following constraints. Up to 24 characters Only the alphabet (a-z, A-Z), digits (0-9), minus sign (-) No '-' as last character","title":" Station host name"},{"location":"advancedusage.html#ticker-for-wifi-status","text":"Flicker signal can be output from the ESP8266/ESP32 module according to WiFi connection status. If you connect the LED to the signal output pin, you can know the WiFi connection status during behavior inside AutoConnect::begin through the LED blink. AutoConnectConfig::ticker option specifies flicker signal output. The following sketch is an example of flashing the active-high LED connected to pin #16 according to WiFi connection during the AutoConnect::begin. AutoConnect portal; AutoConnectConfig Config; Config.ticker = true; config.tickerPort = 16 ; Config.tickerOn = HIGH; portal.config(Config); portal.begin(); The AutoConnect ticker indicates the WiFi connection status in the following three flicker patterns: Short blink: The ESP module stays in APSTA mode. Short-on and long-off: No STA connection state. (i.e. WiFi.status != WL_CONNECTED) No blink: WiFi connection with access point established and data link enabled. (i.e. WiFi.status = WL_CONNECTED) The flicker cycle length is defined by some macros in AutoConnectDefs.h header file. #define AUTOCONNECT_FLICKER_PERIODAP 1000 // [ms] #define AUTOCONNECT_FLICKER_PERIODDC (AUTOCONNECT_FLICKER_PERIODAP << 1) // [ms] #define AUTOCONNECT_FLICKER_WIDTHAP 96 // (8 bit resolution) #define AUTOCONNECT_FLICKER_WIDTHDC 16 // (8 bit resolution) AUTOCONNECTT_FLICKER_PERIODAP : Assigns a flicker period when the ESP module stays in APSTA mode. AUTOCONNECT_FLICKER_PERIODDC : Assigns a flicker period when WiFi is disconnected. AUTOCONNECT_FLICKER_WIDTHAP and AUTOCONNECT_FLICKER_WIDTHDC : Specify the duty rate for each period[ms] in 8-bit resolution. AutoConnectConfig::tickerPort specifies a port that outputs the flicker signal. If you are using an LED-equipped ESP module board, you can assign a LED pin to the tick-port for the WiFi connection monitoring without the external LED. The default pin is arduino valiant's LED_BUILTIN . You can refer to the Arduino IDE's variant information to find out which pin actually on the module assign to LED_BUILTIN . 3 AutoConnectConfig::tickerOn specifies the active logic level of the flicker signal. This value indicates the active signal level when driving the ticker. For example, if the LED connected to tickPort lights by LOW, the tickerOn is LOW . The logic level of LED_BUILTIN for popular modules are as follows: module Logic level LED_BUILTIN Pin Arduino alias NodeMCU V1.0 Active-low 16 D0 WEMOS D1 mini Active-low 2 D4 SparkFun ESP8266 Thing Active-high 5 Adafruit Feather HUZZAH ESP8266 Active-low 0 NodeMCU 32s Active-high 2 T2 LOLIN32 Pro Active-low 5 SS SparkFun ESP32 Thing Active-high 5 Adafruit Feather HUZZAH32 Active-high 13 A12 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 It's defined in the pins_arduino.h file, located in the sub-folder named variants wherein Arduino IDE installed folder. \u21a9","title":" Ticker for WiFi status"},{"location":"api.html","text":"Include headers \u00b6 AutoConnect.h \u00b6 #include 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. Parameter 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 . Parameter 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( void ) 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( void ) 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( void ) 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. Parameter uri A URI string of user site's home path. host \u00b6 For ESP8266 ESP8266WebServer & host( void ) For ESP32 WebServer & host( void ) 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. Parameter 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(PGM_P 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. Parameter 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. Parameter 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 Parameter softapIP An IP address of SoftAP for the captive portal. Return 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. Parameter fn A function of the \"not found\" handler. where \u00b6 String where( void ) Returns an uri string of the AutoConnectAux uri object of the custom Web page that caused the request to the page. AutoConnect identifies the URI (ie. the referrer URI) that caused the request each time from the client occurs and will save the URI If the request source is a custom Web page of AutoConnectAux. The where function returns a pointer of AutoConnectAux which is a URI of a least recent request from the custom Web page. This function is provided to access the fields (ie. the AutoConnectElements) with a custom Web page handler of a page and is available only for request source that is the custom Web pages. It is invalid for HTTP requests from individual pages registered with the on handler of ESP8266WebServer/WebServer for ESP32. In other words, this function only returns the AutoConnecAux page which is a least recently displayed. Return value An uri string of the AutoConnectAux that caused the request the page. The where function usage is described in the section Where to pick up the values .","title":"AutoConnect API"},{"location":"api.html#include-headers","text":"","title":" Include headers"},{"location":"api.html#autoconnecth","text":"#include ","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. Parameter 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 . Parameter 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( void ) 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( void ) 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( void ) 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. Parameter uri A URI string of user site's home path.","title":" home"},{"location":"api.html#host","text":"For ESP8266 ESP8266WebServer & host( void ) For ESP32 WebServer & host( void ) 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. Parameter 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(PGM_P 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. Parameter 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. Parameter 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 Parameter softapIP An IP address of SoftAP for the captive portal. Return 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. Parameter fn A function of the \"not found\" handler.","title":" onNotFound"},{"location":"api.html#where","text":"String where( void ) Returns an uri string of the AutoConnectAux uri object of the custom Web page that caused the request to the page. AutoConnect identifies the URI (ie. the referrer URI) that caused the request each time from the client occurs and will save the URI If the request source is a custom Web page of AutoConnectAux. The where function returns a pointer of AutoConnectAux which is a URI of a least recent request from the custom Web page. This function is provided to access the fields (ie. the AutoConnectElements) with a custom Web page handler of a page and is available only for request source that is the custom Web pages. It is invalid for HTTP requests from individual pages registered with the on handler of ESP8266WebServer/WebServer for ESP32. In other words, this function only returns the AutoConnecAux page which is a least recently displayed. Return value An uri string of the AutoConnectAux that caused the request the page. The where function usage is described in the section Where to pick up the values .","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 operator [ ] \u00b6 AutoConnectElement & operator []( const String & name) Returns a reference to the element specified by name . An operator [] is a shortcut for getElement function with the reference casting. Unlike getElement, which returns a pointer to that element, an operator [] returns a reference to that element. You also need to cast the return value to the actual type, just like the getElement function. Parameter name Name of the AutoConnectElements to be retrieved. Return value A reference to AutoConnectElement. It is different from the actual element type. 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. The list initialization with braced-init-list of the std::vector can be used for the addons parameter cause the actual definition of type AutoConnectElementVT is std::vector> . fetchElement \u00b6 void fetchElement( void ) Retrieve the values of the AutoConnectElements on the custom Web page. Refer to how to use the fetchElement . 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 , AutoConnectFile , 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()); } isMenu \u00b6 bool isMenu( void ) Returns whether embedded in the menu or not. The isMenu is a function that complements the menu function. Return value true The custom Web page has been incorporated into the AutoConnect menu as a menu item. false This custom Web page is not currently a menu item. isValid \u00b6 bool isValid( void ) Performs validation of all AutoConnectInput elements owned by AutoConnectAux and returns the result. The isValid function will return the true even if the AutoConnectAux does not own AutoConnectInputs. Return value true Validation is successful. A value of all AutoConnectInputs match with each pattern. false Some elements failed validation. load \u00b6 bool load( const String & in) bool load(PGM_P 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. Parameter 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 String & in, std :: vector < String > const & names) bool loadElement(PGM_P in, const String & name = String( \"\" )) bool loadElement(PGM_P in, std :: vector < String > const & names) bool loadElement( const __FlashStringHelper * in, const String & name = String( \"\" )) bool loadElement( const __FlashStringHelper * in, std :: vector < String > const & names) bool loadElement(Stream & in, const String & name = String( \"\" )) bool loadElement(Stream & in, std :: vector < String > const & names) 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. names Spefifies an array list of String indicating the name of the element to be loaded. The list initialization with braced-init-list of the std::vector can be used. 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 AutoConnectAux constructor . Parameter 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. onUpload \u00b6 void onUpload < T &> (T handler) void onUpload(PageBuilder :: UploadFuncT uploadFunc) Register the upload handler of the AutoConnectAux. Parameters T Specifies a class name of the custom uploader inherited from AutoConnectUploadHandler class. Refer to the appendix for details. handler Specifies the custom uploader inherited from AutoConnectUploadHandler class. Refer to the appendix for details. uploadFunc A function that behaves when request to upload with the AutoConnectAux page. UploadFuncT type is defined by the following declaration. void(const String&, const HTTPUpload&) A data structure of the upload file as HTTPUpload. It is defined in the ESP8266WebServer (the WebServer for ESP32) library as follows: typedef struct { HTTPUploadStatus status; String filename; String name; String type; size_t totalSize; size_t currentSize; size_t contentLength; uint8_t buf[HTTP_UPLOAD_BUFLEN]; } HTTPUpload; Refer to ' To upload to a device other than Flash or SD ' in section appendix for details. release \u00b6 bool release( const String & name) Release a specified AutoConnectElement from AutoConnectAux. 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. Parameter 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 AutoConnectElements 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. It is not complementary with loadElement The saveElement function which missing the names parameter without name list to be saved that saves an entire AutoConnectAux element, not just AutoConnectElements. Its saved JSON document is not a complementary input to the loadElement function. The JSON document describing AutoConnectAux saved without the names parameter must be loaded by the AutoConnectAux::load function or AutoConnect::load function. 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#operator","text":"AutoConnectElement & operator []( const String & name) Returns a reference to the element specified by name . An operator [] is a shortcut for getElement function with the reference casting. Unlike getElement, which returns a pointer to that element, an operator [] returns a reference to that element. You also need to cast the return value to the actual type, just like the getElement function. Parameter name Name of the AutoConnectElements to be retrieved. Return value A reference to AutoConnectElement. It is different from the actual element type.","title":" operator [ ]"},{"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. The list initialization with braced-init-list of the std::vector can be used for the addons parameter cause the actual definition of type AutoConnectElementVT is std::vector> .","title":" add"},{"location":"apiaux.html#fetchelement","text":"void fetchElement( void ) Retrieve the values of the AutoConnectElements on the custom Web page. Refer to how to use the fetchElement .","title":" fetchElement"},{"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 , AutoConnectFile , 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#ismenu","text":"bool isMenu( void ) Returns whether embedded in the menu or not. The isMenu is a function that complements the menu function. Return value true The custom Web page has been incorporated into the AutoConnect menu as a menu item. false This custom Web page is not currently a menu item.","title":" isMenu"},{"location":"apiaux.html#isvalid","text":"bool isValid( void ) Performs validation of all AutoConnectInput elements owned by AutoConnectAux and returns the result. The isValid function will return the true even if the AutoConnectAux does not own AutoConnectInputs. Return value true Validation is successful. A value of all AutoConnectInputs match with each pattern. false Some elements failed validation.","title":" isValid"},{"location":"apiaux.html#load","text":"bool load( const String & in) bool load(PGM_P 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. Parameter 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 String & in, std :: vector < String > const & names) bool loadElement(PGM_P in, const String & name = String( \"\" )) bool loadElement(PGM_P in, std :: vector < String > const & names) bool loadElement( const __FlashStringHelper * in, const String & name = String( \"\" )) bool loadElement( const __FlashStringHelper * in, std :: vector < String > const & names) bool loadElement(Stream & in, const String & name = String( \"\" )) bool loadElement(Stream & in, std :: vector < String > const & names) 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. names Spefifies an array list of String indicating the name of the element to be loaded. The list initialization with braced-init-list of the std::vector can be used. 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 AutoConnectAux constructor . Parameter 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#onupload","text":"void onUpload < T &> (T handler) void onUpload(PageBuilder :: UploadFuncT uploadFunc) Register the upload handler of the AutoConnectAux. Parameters T Specifies a class name of the custom uploader inherited from AutoConnectUploadHandler class. Refer to the appendix for details. handler Specifies the custom uploader inherited from AutoConnectUploadHandler class. Refer to the appendix for details. uploadFunc A function that behaves when request to upload with the AutoConnectAux page. UploadFuncT type is defined by the following declaration. void(const String&, const HTTPUpload&) A data structure of the upload file as HTTPUpload. It is defined in the ESP8266WebServer (the WebServer for ESP32) library as follows: typedef struct { HTTPUploadStatus status; String filename; String name; String type; size_t totalSize; size_t currentSize; size_t contentLength; uint8_t buf[HTTP_UPLOAD_BUFLEN]; } HTTPUpload; Refer to ' To upload to a device other than Flash or SD ' in section appendix for details.","title":" onUpload"},{"location":"apiaux.html#release","text":"bool release( const String & name) Release a specified AutoConnectElement from AutoConnectAux. 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. Parameter 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 AutoConnectElements 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. It is not complementary with loadElement The saveElement function which missing the names parameter without name list to be saved that saves an entire AutoConnectAux element, not just AutoConnectElements. Its saved JSON document is not a complementary input to the loadElement function. The JSON document describing AutoConnectAux saved without the names parameter must be loaded by the AutoConnectAux::load function or AutoConnect::load function.","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 The default value is esp8266ap for ESP8266, esp32ap for ESP32. 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 172.217.28.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 flash, 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. This option is valid only for ESP8266 or ESP32 arduino core 1.0.2 earlier. 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 172.217.28.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 (i.e. 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(). All unresolved addresses redirects to /_ac If you enable the retainPortal option, all unresolved URIs will be redirected to SoftAPIP/_ac . It happens frequently as client devices repeat captive portal probes in particular. To avoid this, you need to exit from the WiFi connection Apps on your device once. 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 ticker \u00b6 Set flicker signal output according to WiFi connection status during AutoConnect::begin behavior. Type bool Value true Output the flicker signal while AutoConnect::begin operation. The AUTOCONNECT_TICKER_PORT macro in the AutoConnectDefs.h header file assigns pins for signal output. The default pin is arduino valiant's LED_BUILTIN. For boards without the LED_BUILTIN pin, assume pin #2. false No flicker signal output. tickerPort \u00b6 Specifies the GPIO port number to output the flicker signal of the ticker. The default assumes on the board dependent definition LED_BUILTIN macro redefined by AUTOCONNECT_TICKER_PORT in AutoConnectDefs.h . Type uint8_t tickerOn \u00b6 Specifies the active logic level of the flicker signal. This value indicates the active signal level when driving the ticker. Type uint8_t Value LOW A flicker signal is an active-high. HIGH A flicker signal is an active-low. title \u00b6 Set the menu title. Type String AutoConnectConfig example \u00b6 AutoConnect Portal; AutoConnectConfig 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 The default value is esp8266ap for ESP8266, esp32ap for ESP32.","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 172.217.28.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 flash, 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. This option is valid only for ESP8266 or ESP32 arduino core 1.0.2 earlier. 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 172.217.28.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 (i.e. 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(). All unresolved addresses redirects to /_ac If you enable the retainPortal option, all unresolved URIs will be redirected to SoftAPIP/_ac . It happens frequently as client devices repeat captive portal probes in particular. To avoid this, you need to exit from the WiFi connection Apps on your device once.","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#ticker","text":"Set flicker signal output according to WiFi connection status during AutoConnect::begin behavior. Type bool Value true Output the flicker signal while AutoConnect::begin operation. The AUTOCONNECT_TICKER_PORT macro in the AutoConnectDefs.h header file assigns pins for signal output. The default pin is arduino valiant's LED_BUILTIN. For boards without the LED_BUILTIN pin, assume pin #2. false No flicker signal output.","title":" ticker"},{"location":"apiconfig.html#tickerport","text":"Specifies the GPIO port number to output the flicker signal of the ticker. The default assumes on the board dependent definition LED_BUILTIN macro redefined by AUTOCONNECT_TICKER_PORT in AutoConnectDefs.h . Type uint8_t","title":" tickerPort"},{"location":"apiconfig.html#tickeron","text":"Specifies the active logic level of the flicker signal. This value indicates the active signal level when driving the ticker. Type uint8_t Value LOW A flicker signal is an active-high. HIGH A flicker signal is an active-low.","title":" tickerOn"},{"location":"apiconfig.html#title","text":"Set the menu title. Type String","title":" title"},{"location":"apiconfig.html#autoconnectconfig-example","text":"AutoConnect Portal; AutoConnectConfig 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(), const ACPosterior_t post = AC_Tag_None) Parameters name The element name. value Value of the element. action Native code of the action script executed when the button is clicked. post Specifies the tag to be output afterward the element. Public member variables \u00b6 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 enable \u00b6 Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true. global \u00b6 The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute. name \u00b6 The element name. Type String post \u00b6 Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag. value \u00b6 Value of the element. Type String Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Button AutoConnectCheckbox \u00b6 Constructor \u00b6 AutoConnectCheckbox( const char * name = \"\" , const char * value = \"\" , const char * label = \"\" , const bool checked = false, const ACPosition_t labelPosition = AC_Behind, const ACPosterior_t post = AC_Tag_BR) Parameters name The element name. value Value of the element. label A label string prefixed to the checkbox. check Checked state of the checkbox. labelPosition Specifies the position of the label to generate. post Specifies the tag to be output afterward the element. Public member variables \u00b6 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 bool enable \u00b6 Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true. global \u00b6 The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute. 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 labelPosition \u00b6 Specifies the position of the label to generate with ACPostion_t enumeration value. Type ACPosition_t AC_Infront : Place a label in front of the check box. AC_Behind : Place a label behind the check box. name \u00b6 The element name. Type String post \u00b6 Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag. value \u00b6 Value of the element. It becomes a value attribute of an HTML < input type = \"checkbox\" > tag. Type String 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 = \"\" , const ACPosterior_t post = AC_Tag_None) Parameters name The element name. value Value of the element. post Specifies the tag to be output afterward the element. Public member variables \u00b6 enable \u00b6 Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true. global \u00b6 The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute. name \u00b6 The element name. Type String post \u00b6 Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag. 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 as \u00b6 AutoConnectElement & as < T > ( void ) Casts the reference to the AutoConnectElement the specified type. Parameter T The element type. AutoConnectElements type such as AutoConnectButton , AutoConnectCheckbox , AutoConnectFile , AutoConnectInput , AutoConnectRadio , AutoConnectSelect , AutoConnectStyle , AutoConnectSubmit , AutoConnectText . Return value A reference to the AutoConnectElement with actual type. AutoConnectFile \u00b6 Constructor \u00b6 AutoConnectFile( const char * name = \"\" , const char * value = \"\" , const char * label = \"\" , const ACFile_t store = AC_File_FS, const ACPosterior_t post = AC_Tag_BR) Parameters name The element name. value File name to be upload. label Label string. store The ACFile_t enumerator that represents the media to save the uploaded file. post Specifies the tag to be output afterward the element. Public member variables \u00b6 enable \u00b6 Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true. global \u00b6 The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute. label \u00b6 A label is an optional string. A label is always arranged on the left side of the file input box. Specification of a label will generate an HTML < label > tag with an id attribute. The file input box and the label are connected by the id attribute. Type String mimeType \u00b6 The mime type of the upload file which included as Media type in the http post request. Set by the client (usually the browser) that requested the upload. It is determined by the file type as application/octet-stream , text etc. which is described in IANA Media Type . Type String name \u00b6 The element name. Type String post \u00b6 Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag. size \u00b6 Size of the uploading file. Type size_t store \u00b6 Specifies the save destination of the uploaded file. You can use the built-in uploader to save uploaded file to the flash of the ESP8266/ESP32 module or external SD media without writing a dedicated sketch code. It also supports saving to any destination using a custom uploader that inherits from the AutoConnectUploadHandler class. Type ACFile_t AC_File_FS : Save the uploaded file to SPIFFS in the flash. AC_File_SD : Save the uploaded file to SD. AC_File_Extern : Save the file using your own upload handler. value \u00b6 File name to be upload. The value contains the value entered by the client browser to the < input type = \"file\" > tag and is read-only. Type String Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectFile. Return value AC_File AutoConnectInput \u00b6 Constructor \u00b6 AutoConnectInput( const char * name = \"\" , const char * value = \"\" , const char * label = \"\" , const char * pattern = \"\" , const char * placeholder = \"\" , const ACPosterior_t post = AC_Tag_BR) 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. post Specifies the tag to be output afterward the element. Public member variables \u00b6 enable \u00b6 Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true. global \u00b6 The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute. 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 name \u00b6 The element name. 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 post \u00b6 Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag. 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 Public member functions \u00b6 isValid \u00b6 bool isValid( void ) Evaluate the pattern as a regexp and return whether value matches. Always return true if the pattern is undefined. Return value true The value matches a pattern. false The value does not match a pattern. 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 , const ACPosterior_t post = AC_Tag_BR) Parameters name The element name. values An array of values of the radio buttons. Specifies a std::vector object. label Label string. order The direction to arrange the radio buttons. checked An index to be checked in the radio buttons. post Specifies the tag to be output afterward the element. Public member variables \u00b6 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 enable \u00b6 Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true. global \u00b6 The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute. 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 name \u00b6 The element name. 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. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag. 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 Public member functions \u00b6 add \u00b6 void add( const String & value) Adds an option for the radio button. Parameter 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. Parameter 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 the values. When the reserve parameter is specified, a vector container of that size is reserved. The empty function resets the checked value to zero. When the empty function is executed, any button will be turned off. Parameter reserve Reserved size of a container for the radio button option strings. operator [ ] \u00b6 const String & operator [] ( const std :: size_t n) Returns a value string of the index specified by n . Parameter n Index of values array to return. Its base number is 0. Return value A reference of a value string indexed by the specified the n . size \u00b6 size_t size( void ) Returns number of options which contained. Return value Number of options which contained. typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Radio 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 = \"\" , const uint8_t selected = 0 , const ACPosterior_t post = AC_Tag_BR) Parameters name The element name. options An array of options of the select element. Specifies a std::vector object. label Label string. selected An option should be pre-selected when the page loads. post Specifies the tag to be output afterward the element. Public member variables \u00b6 enable \u00b6 Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true. global \u00b6 The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute. name \u00b6 The element name. Type String label \u00b6 A label is an optional string. A label will be arranged in the top of the selection list. 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 post \u00b6 Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag. selected \u00b6 A selected is an optional value. Specifies 1-based index value of an options array that an option should be pre-selected when the page loads. Type uint8_t Public member functions \u00b6 add \u00b6 void add( const String & option) Adds a selectable option string for the selection list. Parameter option A string of selectable item to be contained in the select element. empty \u00b6 void empty( const size_t reserve = 0 ) Clear the array of options list that AutoConnectSelect has in the options. When the reserve parameter is specified, a vector container of that size is reserved. The empty function resets the selected value to zero. When the empty function is executed, there are no selected options and the first item is placed at the beginning. Parameter reserve Reserved size of a container for the options. operator [ ] \u00b6 const String & operator [] ( const std :: size_t n) Returns an option string of the index specified by n . Parameter n Index of options array to return. Its base number is 0. Return value A reference of a option string indexed by the specified the n . select \u00b6 void select ( const String & value); Selects an option with the value. Parameter value String value that option should be selected in an option array. size \u00b6 size_t size( void ) Returns number of options which contained. Return value Number of options which contained. typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Select value \u00b6 const String & value( void ) const ; Returns current selected option of the select list. Return value A String of an option current selected. If there is no select option, a null string returned. AutoConnectStyle \u00b6 Constructor \u00b6 AutoConnectStyle( const char * name = \"\" , const char * value = \"\" ) Parameters name The element name. value Raw CSS code to insert into a style block in a custom web page to generate. Public member variables \u00b6 enable \u00b6 Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true. name \u00b6 The element name. Type String value \u00b6 Raw CSS code to insert into a style block in a custom web page to generate. Type String Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Style AutoConnectSubmit \u00b6 Constructor \u00b6 AutoConnectSubmit( const char * name = \"\" , const char * value = \"\" , char * uri = \"\" , const ACPosterior_t post = AC_Tag_None) Parameters name The element name. value The name of the submit button as an HTML < input type = \"button\" > tag, it will also be the label of the button. uri Destination URI. post Specifies the tag to be output afterward the element. Public member variables \u00b6 enable \u00b6 Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true. global \u00b6 The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute. name \u00b6 The element name. Type String post \u00b6 Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag. uri \u00b6 Destination URI. Type String value \u00b6 The name of the submit button. It will also be the label of the button. Type String Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Submit AutoConnectText \u00b6 Constructor \u00b6 AutoConnectText( const char * name = \"\" , const char * value = \"\" , const char * style = \"\" , const char * format = \"\" , const ACPosterior_t post = AC_Tag_None) Parameters name The element name. value String of content for the text element. style A style code with CSS format that qualifiers the text. format A pointer to a null-terminated multibyte string specifying how to interpret the value. It specifies the conversion format when outputting values. The format string conforms to C-style printf library functions post Specifies the tag to be output afterward the element. Public member variables \u00b6 enable \u00b6 Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true. format \u00b6 The conversion format when outputting values. The format string conforms to C-style printf library functions. Type String global \u00b6 The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute. name \u00b6 The element name. Type String post \u00b6 Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag. style \u00b6 A style code with CSS format that qualifiers the text. Type String value \u00b6 A content string of the text element. Type String Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Text 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(), const ACPosterior_t post = AC_Tag_None) Parameters name The element name. value Value of the element. action Native code of the action script executed when the button is clicked. post Specifies the tag to be output afterward the element.","title":" Constructor"},{"location":"apielements.html#public-member-variables","text":"","title":" Public member variables"},{"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#enable","text":"Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true.","title":" enable"},{"location":"apielements.html#global","text":"The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute.","title":" global"},{"location":"apielements.html#name","text":"The element name. Type String","title":" name"},{"location":"apielements.html#post","text":"Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag.","title":" post"},{"location":"apielements.html#value","text":"Value of the element. Type String","title":" value"},{"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":"AutoConnectCheckbox( const char * name = \"\" , const char * value = \"\" , const char * label = \"\" , const bool checked = false, const ACPosition_t labelPosition = AC_Behind, const ACPosterior_t post = AC_Tag_BR) Parameters name The element name. value Value of the element. label A label string prefixed to the checkbox. check Checked state of the checkbox. labelPosition Specifies the position of the label to generate. post Specifies the tag to be output afterward the element.","title":" Constructor"},{"location":"apielements.html#public-member-variables_1","text":"","title":" Public member variables"},{"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 bool","title":" checked"},{"location":"apielements.html#enable_1","text":"Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true.","title":" enable"},{"location":"apielements.html#global_1","text":"The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute.","title":" global"},{"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#labelposition","text":"Specifies the position of the label to generate with ACPostion_t enumeration value. Type ACPosition_t AC_Infront : Place a label in front of the check box. AC_Behind : Place a label behind the check box.","title":" labelPosition"},{"location":"apielements.html#name_1","text":"The element name. Type String","title":" name"},{"location":"apielements.html#post_1","text":"Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag.","title":" post"},{"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#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 = \"\" , const ACPosterior_t post = AC_Tag_None) Parameters name The element name. value Value of the element. post Specifies the tag to be output afterward the element.","title":" Constructor"},{"location":"apielements.html#public-member-variables_2","text":"","title":" Public member variables"},{"location":"apielements.html#enable_2","text":"Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true.","title":" enable"},{"location":"apielements.html#global_2","text":"The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute.","title":" global"},{"location":"apielements.html#name_2","text":"The element name. Type String","title":" name"},{"location":"apielements.html#post_2","text":"Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag.","title":" post"},{"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#ast62","text":"AutoConnectElement & as < T > ( void ) Casts the reference to the AutoConnectElement the specified type. Parameter T The element type. AutoConnectElements type such as AutoConnectButton , AutoConnectCheckbox , AutoConnectFile , AutoConnectInput , AutoConnectRadio , AutoConnectSelect , AutoConnectStyle , AutoConnectSubmit , AutoConnectText . Return value A reference to the AutoConnectElement with actual type.","title":" as<T>"},{"location":"apielements.html#autoconnectfile","text":"","title":"AutoConnectFile"},{"location":"apielements.html#constructor_3","text":"AutoConnectFile( const char * name = \"\" , const char * value = \"\" , const char * label = \"\" , const ACFile_t store = AC_File_FS, const ACPosterior_t post = AC_Tag_BR) Parameters name The element name. value File name to be upload. label Label string. store The ACFile_t enumerator that represents the media to save the uploaded file. post Specifies the tag to be output afterward the element.","title":" Constructor"},{"location":"apielements.html#public-member-variables_3","text":"","title":" Public member variables"},{"location":"apielements.html#enable_3","text":"Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true.","title":" enable"},{"location":"apielements.html#global_3","text":"The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute.","title":" global"},{"location":"apielements.html#label_1","text":"A label is an optional string. A label is always arranged on the left side of the file input box. Specification of a label will generate an HTML < label > tag with an id attribute. The file input box and the label are connected by the id attribute. Type String","title":" label"},{"location":"apielements.html#mimetype","text":"The mime type of the upload file which included as Media type in the http post request. Set by the client (usually the browser) that requested the upload. It is determined by the file type as application/octet-stream , text etc. which is described in IANA Media Type . Type String","title":" mimeType"},{"location":"apielements.html#name_3","text":"The element name. Type String","title":" name"},{"location":"apielements.html#post_3","text":"Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag.","title":" post"},{"location":"apielements.html#size","text":"Size of the uploading file. Type size_t","title":" size"},{"location":"apielements.html#store","text":"Specifies the save destination of the uploaded file. You can use the built-in uploader to save uploaded file to the flash of the ESP8266/ESP32 module or external SD media without writing a dedicated sketch code. It also supports saving to any destination using a custom uploader that inherits from the AutoConnectUploadHandler class. Type ACFile_t AC_File_FS : Save the uploaded file to SPIFFS in the flash. AC_File_SD : Save the uploaded file to SD. AC_File_Extern : Save the file using your own upload handler.","title":" store"},{"location":"apielements.html#value_3","text":"File name to be upload. The value contains the value entered by the client browser to the < input type = \"file\" > tag and is read-only. Type String","title":" value"},{"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 AutoConnectFile. Return value AC_File","title":" typeOf"},{"location":"apielements.html#autoconnectinput","text":"","title":"AutoConnectInput"},{"location":"apielements.html#constructor_4","text":"AutoConnectInput( const char * name = \"\" , const char * value = \"\" , const char * label = \"\" , const char * pattern = \"\" , const char * placeholder = \"\" , const ACPosterior_t post = AC_Tag_BR) 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. post Specifies the tag to be output afterward the element.","title":" Constructor"},{"location":"apielements.html#public-member-variables_4","text":"","title":" Public member variables"},{"location":"apielements.html#enable_4","text":"Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true.","title":" enable"},{"location":"apielements.html#global_4","text":"The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute.","title":" global"},{"location":"apielements.html#label_2","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#name_4","text":"The element name. Type String","title":" name"},{"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#post_4","text":"Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag.","title":" post"},{"location":"apielements.html#value_4","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#public-member-functions_4","text":"","title":" Public member functions"},{"location":"apielements.html#isvalid","text":"bool isValid( void ) Evaluate the pattern as a regexp and return whether value matches. Always return true if the pattern is undefined. Return value true The value matches a pattern. false The value does not match a pattern.","title":" isValid"},{"location":"apielements.html#typeof_4","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_5","text":"AutoConnectRadio( const char * name = \"\" , std :: vector < String > const & values = {}, const char * label = \"\" , const ACArrange_t order = AC_Vertical, const uint8_t checked = 0 , const ACPosterior_t post = AC_Tag_BR) Parameters name The element name. values An array of values of the radio buttons. Specifies a std::vector object. label Label string. order The direction to arrange the radio buttons. checked An index to be checked in the radio buttons. post Specifies the tag to be output afterward the element.","title":" Constructor"},{"location":"apielements.html#public-member-variables_5","text":"","title":" Public member variables"},{"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#enable_5","text":"Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true.","title":" enable"},{"location":"apielements.html#global_5","text":"The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute.","title":" global"},{"location":"apielements.html#label_3","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#name_5","text":"The element name. Type String","title":" name"},{"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#post_5","text":"Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag.","title":" post"},{"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","title":" values"},{"location":"apielements.html#public-member-functions_5","text":"","title":" Public member functions"},{"location":"apielements.html#add","text":"void add( const String & value) Adds an option for the radio button. Parameter 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. Parameter 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 the values. When the reserve parameter is specified, a vector container of that size is reserved. The empty function resets the checked value to zero. When the empty function is executed, any button will be turned off. Parameter reserve Reserved size of a container for the radio button option strings.","title":" empty"},{"location":"apielements.html#operator","text":"const String & operator [] ( const std :: size_t n) Returns a value string of the index specified by n . Parameter n Index of values array to return. Its base number is 0. Return value A reference of a value string indexed by the specified the n .","title":" operator [ ]"},{"location":"apielements.html#size_1","text":"size_t size( void ) Returns number of options which contained. Return value Number of options which contained.","title":" size"},{"location":"apielements.html#typeof_5","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Radio","title":" typeOf"},{"location":"apielements.html#value_5","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_6","text":"AutoConnectSelect( const char * name = \"\" , std :: vector < String > const & options = {}, const char * label = \"\" , const uint8_t selected = 0 , const ACPosterior_t post = AC_Tag_BR) Parameters name The element name. options An array of options of the select element. Specifies a std::vector object. label Label string. selected An option should be pre-selected when the page loads. post Specifies the tag to be output afterward the element.","title":" Constructor"},{"location":"apielements.html#public-member-variables_6","text":"","title":" Public member variables"},{"location":"apielements.html#enable_6","text":"Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true.","title":" enable"},{"location":"apielements.html#global_6","text":"The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute.","title":" global"},{"location":"apielements.html#name_6","text":"The element name. Type String","title":" name"},{"location":"apielements.html#label_4","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#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","title":" options"},{"location":"apielements.html#post_6","text":"Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag.","title":" post"},{"location":"apielements.html#selected","text":"A selected is an optional value. Specifies 1-based index value of an options array that an option should be pre-selected when the page loads. Type uint8_t","title":" selected"},{"location":"apielements.html#public-member-functions_6","text":"","title":" Public member functions"},{"location":"apielements.html#add_1","text":"void add( const String & option) Adds a selectable option string for the selection list. Parameter option A string of selectable item to be contained in the select element.","title":" add"},{"location":"apielements.html#empty_1","text":"void empty( const size_t reserve = 0 ) Clear the array of options list that AutoConnectSelect has in the options. When the reserve parameter is specified, a vector container of that size is reserved. The empty function resets the selected value to zero. When the empty function is executed, there are no selected options and the first item is placed at the beginning. Parameter reserve Reserved size of a container for the options.","title":" empty"},{"location":"apielements.html#operator_1","text":"const String & operator [] ( const std :: size_t n) Returns an option string of the index specified by n . Parameter n Index of options array to return. Its base number is 0. Return value A reference of a option string indexed by the specified the n .","title":" operator [ ]"},{"location":"apielements.html#select","text":"void select ( const String & value); Selects an option with the value. Parameter value String value that option should be selected in an option array.","title":" select"},{"location":"apielements.html#size_2","text":"size_t size( void ) Returns number of options which contained. Return value Number of options which contained.","title":" size"},{"location":"apielements.html#typeof_6","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Select","title":" typeOf"},{"location":"apielements.html#value_6","text":"const String & value( void ) const ; Returns current selected option of the select list. Return value A String of an option current selected. If there is no select option, a null string returned.","title":" value"},{"location":"apielements.html#autoconnectstyle","text":"","title":"AutoConnectStyle"},{"location":"apielements.html#constructor_7","text":"AutoConnectStyle( const char * name = \"\" , const char * value = \"\" ) Parameters name The element name. value Raw CSS code to insert into a style block in a custom web page to generate.","title":" Constructor"},{"location":"apielements.html#public-member-variables_7","text":"","title":" Public member variables"},{"location":"apielements.html#enable_7","text":"Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true.","title":" enable"},{"location":"apielements.html#name_7","text":"The element name. Type String","title":" name"},{"location":"apielements.html#value_7","text":"Raw CSS code to insert into a style block in a custom web page to generate. Type String","title":" value"},{"location":"apielements.html#public-member-functions_7","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_7","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Style","title":" typeOf"},{"location":"apielements.html#autoconnectsubmit","text":"","title":"AutoConnectSubmit"},{"location":"apielements.html#constructor_8","text":"AutoConnectSubmit( const char * name = \"\" , const char * value = \"\" , char * uri = \"\" , const ACPosterior_t post = AC_Tag_None) Parameters name The element name. value The name of the submit button as an HTML < input type = \"button\" > tag, it will also be the label of the button. uri Destination URI. post Specifies the tag to be output afterward the element.","title":" Constructor"},{"location":"apielements.html#public-member-variables_8","text":"","title":" Public member variables"},{"location":"apielements.html#enable_8","text":"Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true.","title":" enable"},{"location":"apielements.html#global_7","text":"The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute.","title":" global"},{"location":"apielements.html#name_8","text":"The element name. Type String","title":" name"},{"location":"apielements.html#post_7","text":"Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag.","title":" post"},{"location":"apielements.html#uri","text":"Destination URI. Type String","title":" uri"},{"location":"apielements.html#value_8","text":"The name of the submit button. It will also be the label of the button. Type String","title":" value"},{"location":"apielements.html#public-member-functions_8","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_8","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Submit","title":" typeOf"},{"location":"apielements.html#autoconnecttext","text":"","title":"AutoConnectText"},{"location":"apielements.html#constructor_9","text":"AutoConnectText( const char * name = \"\" , const char * value = \"\" , const char * style = \"\" , const char * format = \"\" , const ACPosterior_t post = AC_Tag_None) Parameters name The element name. value String of content for the text element. style A style code with CSS format that qualifiers the text. format A pointer to a null-terminated multibyte string specifying how to interpret the value. It specifies the conversion format when outputting values. The format string conforms to C-style printf library functions post Specifies the tag to be output afterward the element.","title":" Constructor"},{"location":"apielements.html#public-member-variables_9","text":"","title":" Public member variables"},{"location":"apielements.html#enable_9","text":"Enable HTML tag generation for the element. Type bool AutoConnect will generate the element into HTML only if the enable attribute is true.","title":" enable"},{"location":"apielements.html#format","text":"The conversion format when outputting values. The format string conforms to C-style printf library functions. Type String","title":" format"},{"location":"apielements.html#global_8","text":"The global attribute copies input values \u200b\u200bbetween elements of the same name on different custom Web pages. Type bool An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition. However, it will be copied only when the destination element has the true for a global attribute.","title":" global"},{"location":"apielements.html#name_9","text":"The element name. Type String","title":" name"},{"location":"apielements.html#post_8","text":"Specifies a tag to add behind the HTML code generated from the element. Type ACPosterior_t AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a ~
tag.","title":" post"},{"location":"apielements.html#style","text":"A style code with CSS format that qualifiers the text. Type String","title":" style"},{"location":"apielements.html#value_9","text":"A content string of the text element. Type String","title":" value"},{"location":"apielements.html#public-member-functions_9","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_9","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Text JavaScript can be inserted into a custom Web page using AutoConnectElement. \u21a9","title":" typeOf"},{"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 to behind of #include . 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 to behind of #include . 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":"[1.0.0] Sept. 7, 2019 \u00b6 Supports Arduino core for ESP32 1.0.3. Supports AutoConnectUpdate for the OTA update . Supports Preferences for saving credentials with ESP32 core 1.0.3 and later. In ESP32, the credentials stored past in EEPROM will lose . Supports AutoConnectAux::isValid function. Supports the global attribute with all AutoConnectElements. [0.9.12] Aug. 18, 2019 \u00b6 Fixed missing captive portal notifications on the newer mobile OS client. As a result of this fix, the SoftAP default IP address and gateway have been changed to 172.217.28.1 . [0.9.11] July 13, 2019 \u00b6 Supports new element as AutoConnectSytle that can insert the custom CSS into AutoConnectAux page. Supports that function to easily coding for conversion from an AutoConnectElement to an actual type. Supports new element type AutoConnectFile and built-in file uploader. Supports a format attribute with the AutoConnectText element. Supports a selected attribute with the AutoConnectSelect element. Supports multiple element loading with AutoConnectAux::loadElement . Changed menu labels placement in source files structure. Changed API interface of **AutoConnect::where function. Fixed blank page responds with Configure new. Fixed loading elements value missing. Fixed losing elements in saveElement with ArduinoJson V6. Fixed compile error with older than ESP8266 core 2.5.0. [0.9.7] Jan. 25, 2019 \u00b6 Fixed crash in some environments. Thank you @ageurtse Supports AutoConnect menu extension 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] Sept.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#100-sept-7-2019","text":"Supports Arduino core for ESP32 1.0.3. Supports AutoConnectUpdate for the OTA update . Supports Preferences for saving credentials with ESP32 core 1.0.3 and later. In ESP32, the credentials stored past in EEPROM will lose . Supports AutoConnectAux::isValid function. Supports the global attribute with all AutoConnectElements.","title":"[1.0.0] Sept. 7, 2019"},{"location":"changelog.html#0912-aug-18-2019","text":"Fixed missing captive portal notifications on the newer mobile OS client. As a result of this fix, the SoftAP default IP address and gateway have been changed to 172.217.28.1 .","title":"[0.9.12] Aug. 18, 2019"},{"location":"changelog.html#0911-july-13-2019","text":"Supports new element as AutoConnectSytle that can insert the custom CSS into AutoConnectAux page. Supports that function to easily coding for conversion from an AutoConnectElement to an actual type. Supports new element type AutoConnectFile and built-in file uploader. Supports a format attribute with the AutoConnectText element. Supports a selected attribute with the AutoConnectSelect element. Supports multiple element loading with AutoConnectAux::loadElement . Changed menu labels placement in source files structure. Changed API interface of **AutoConnect::where function. Fixed blank page responds with Configure new. Fixed loading elements value missing. Fixed losing elements in saveElement with ArduinoJson V6. Fixed compile error with older than ESP8266 core 2.5.0.","title":"[0.9.8] May 3, 2019"},{"location":"changelog.html#097-jan-25-2019","text":"Fixed crash in some environments. Thank you @ageurtse Supports AutoConnect menu extension 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-sept27-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] Sept.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":"colorized.html","text":"AutoConnect menu colorizing \u00b6 You can easily change the color of the AutoConnect menu. Menu colors can be changed statically by the AutoConnect menu color definition determined at compile time. You cannot change the color while the sketch is running. The menu color scheme has been separated to AutoConnectLabels.h placed the AutoConnect library folder. 1 You can change the color scheme of the menu with the following three color codes. The color code also accepts CSS standard color names. 2 In AutoConnectLabels.h you can find three definition macros for menu colors: #define AUTOCONNECT_MENUCOLOR_TEXT Defines the menu text color. #define AUTOCONNECT_MENUCOLOR_BACKGROUND Defines the menu background color. #define AUTOCONNECT_MENUCOLOR_ACTIVE Defines the active menu item background color. Typical color schemes \u00b6 Here are some color schemes picked up. Indigo \u00b6 #define AUTOCONNECT_MENUCOLOR_TEXT \"#ffa500\" #define AUTOCONNECT_MENUCOLOR_BACKGROUND \"#1a237e\" #define AUTOCONNECT_MENUCOLOR_ACTIVE \"#283593\" Dim-gray \u00b6 #define AUTOCONNECT_MENUCOLOR_TEXT \"#fffacd\" #define AUTOCONNECT_MENUCOLOR_BACKGROUND \"#696969\" #define AUTOCONNECT_MENUCOLOR_ACTIVE \"#808080\" Brown \u00b6 #define AUTOCONNECT_MENUCOLOR_TEXT \"#e6e6fa\" #define AUTOCONNECT_MENUCOLOR_BACKGROUND \"#3e2723\" #define AUTOCONNECT_MENUCOLOR_ACTIVE \"#4e342e\" Usually, it will locate to the Arduino/libraries/AutoConnect/src folder of user documents. \u21a9 The W3C HTML and CSS standards have listed only 16 valid color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Major browsers can accept more color names, but they are not web safe in typically. \u21a9","title":"Custom colorized"},{"location":"colorized.html#autoconnect-menu-colorizing","text":"You can easily change the color of the AutoConnect menu. Menu colors can be changed statically by the AutoConnect menu color definition determined at compile time. You cannot change the color while the sketch is running. The menu color scheme has been separated to AutoConnectLabels.h placed the AutoConnect library folder. 1 You can change the color scheme of the menu with the following three color codes. The color code also accepts CSS standard color names. 2 In AutoConnectLabels.h you can find three definition macros for menu colors: #define AUTOCONNECT_MENUCOLOR_TEXT Defines the menu text color. #define AUTOCONNECT_MENUCOLOR_BACKGROUND Defines the menu background color. #define AUTOCONNECT_MENUCOLOR_ACTIVE Defines the active menu item background color.","title":"AutoConnect menu colorizing"},{"location":"colorized.html#typical-color-schemes","text":"Here are some color schemes picked up.","title":"Typical color schemes"},{"location":"colorized.html#indigo","text":"#define AUTOCONNECT_MENUCOLOR_TEXT \"#ffa500\" #define AUTOCONNECT_MENUCOLOR_BACKGROUND \"#1a237e\" #define AUTOCONNECT_MENUCOLOR_ACTIVE \"#283593\"","title":" Indigo"},{"location":"colorized.html#dim-gray","text":"#define AUTOCONNECT_MENUCOLOR_TEXT \"#fffacd\" #define AUTOCONNECT_MENUCOLOR_BACKGROUND \"#696969\" #define AUTOCONNECT_MENUCOLOR_ACTIVE \"#808080\"","title":" Dim-gray"},{"location":"colorized.html#brown","text":"#define AUTOCONNECT_MENUCOLOR_TEXT \"#e6e6fa\" #define AUTOCONNECT_MENUCOLOR_BACKGROUND \"#3e2723\" #define AUTOCONNECT_MENUCOLOR_ACTIVE \"#4e342e\" Usually, it will locate to the Arduino/libraries/AutoConnect/src folder of user documents. \u21a9 The W3C HTML and CSS standards have listed only 16 valid color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Major browsers can accept more color names, but they are not web safe in typically. \u21a9","title":" Brown"},{"location":"credit.html","text":"Saved credentials in the flash \u00b6 AutoConnect stores the established WiFi connection in the flash memory of the ESP8266/ESP32 module and equips the class to access the credentials from the sketch. You can read, write or erase the credentials using this class individually. It's AutoConnectCredential class which provides the access method to the saved credentials in the flash. 1 Credentials storage location \u00b6 The location where AutoConnect saves credentials depends on the module type and the AutoConnect library version, also arduino-esp32 core version. In either case, the location is flash memory, but EEPROM and Preferences (in the nvs 2 ) are used depending on the library versions. AutoConnect Arduino core for ESP8266 Arduino core for ESP32 1.0.2 earlier 1.0.3 later v0.9.12 earlier EEPROM EEPROM (partition) Not supported v1.0.0 later Preferences (nvs) (Can be used EEPROM with turning off AUTOCONNECT_USE_PREFERENCES macro) Preferences (nvs) However, sketches do not need to know where to store credentials using the commonly accessible AutoConnectCredential API. If you are using an Arduino core for ESP32 1.0.2 earlier and need to use credentials in EEPROM for backward compatibility, turns off the AUTOCONNECT_USE_PREFERENCES 3 macro definition in AutoConnectCredentials.h file. AutoConnect behaves assuming that credentials are stored in EEPROM if AUTOCONNECT_USE_PREFERENCES is not defined. AutoConnectCredential \u00b6 Include header \u00b6 #include Constructors \u00b6 AutoConnectCredential(); AutoConnectCredential default constructor. The default offset value is 0. In ESP8266 or ESP32 with arduino core 1.0.2 earlier, if the offset value is 0, the credential area starts from the top of the EEPROM. If you use this area in a user sketch, AutoConnect may overwrite that data. AutoConnectCredential( uint16_t offset); Parameter offset Species offset from the top of the EEPROM for the credential area together. The offset value is from 0 to the flash sector size. This parameter is ignored for AutoConnect v1.0.0 or later with arduino-esp32 core 1.0.3 or later. Public member functions \u00b6 entries \u00b6 uint8_t entries( void ) Returns number of entries as contained credentials. Return value Number of entries as contained credentials. load \u00b6 int8_t load( const char * ssid, struct station_config * config) Load a credential entry and store to config . Parameters ssid SSID to be loaded. config station_config Return value Save the specified SSID's credential entry to station_config pointed to by the parameter as config . -1 is returned if the SSID is not saved. load \u00b6 bool load( int8_t entry, struct station_config * config) Load a credential entry and store to config . Parameters entry Specifies the index number based 0 to be loaded. config station_config Return value Save the specified credential entry to station_config pointed to by the parameter as config . -1 is returned if specified number is not saved. save \u00b6 bool save( const struct station_config * config) Save a credential entry. Parameter config station_config to be saved. Return value true Successfully saved. false Failed to save. del \u00b6 bool del( const char * ssid) Delete a credential the specified SSID. Parameter ssid SSID to be deleted. Return value true Successfully deleted. false Failed to delete. Clear saved credentials There is no particular API for batch clearing of all credential data stored by AutoConnect. It is necessary to prepare a sketch function that combines several AutoConnectCredential APIs to erase all saved credentials. The following function is an implementation example, and you can use it to achieve batch clearing. void deleteAllCredentials ( void ) { AutoConnectCredential credential; struct station_config config; uint8_t ent = credential.entries(); while (ent -- ) { credential.load( 0 , & config); credential.del(( const char * ) & config.ssid[ 0 ]); } } The data structures \u00b6 station_config \u00b6 A structure is included in the ESP8266 SDK. You can use it in the sketch like as follows: extern \"C\" { #include } struct station_config { uint8 ssid[ 32 ]; uint8 password[ 64 ]; uint8 bssid_set; uint8 bssid[ 6 ]; }; The credential entry \u00b6 A data structure of the credential saving area in EEPROM as the below. 4 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. An example using AutoConnectCredential is provided as an example of a library sketch to delete saved credentials. \u21a9 The namespace for Preferences used by AutoConnect is AC_CREDT . \u21a9 Available only for AutoConnect v1.0.0 and later. \u21a9 There may be 0xff as an invalid data in the credential saving area. The 0xff area would be reused. \u21a9","title":"Saved credentials access"},{"location":"credit.html#saved-credentials-in-the-flash","text":"AutoConnect stores the established WiFi connection in the flash memory of the ESP8266/ESP32 module and equips the class to access the credentials from the sketch. You can read, write or erase the credentials using this class individually. It's AutoConnectCredential class which provides the access method to the saved credentials in the flash. 1","title":"Saved credentials in the flash"},{"location":"credit.html#credentials-storage-location","text":"The location where AutoConnect saves credentials depends on the module type and the AutoConnect library version, also arduino-esp32 core version. In either case, the location is flash memory, but EEPROM and Preferences (in the nvs 2 ) are used depending on the library versions. AutoConnect Arduino core for ESP8266 Arduino core for ESP32 1.0.2 earlier 1.0.3 later v0.9.12 earlier EEPROM EEPROM (partition) Not supported v1.0.0 later Preferences (nvs) (Can be used EEPROM with turning off AUTOCONNECT_USE_PREFERENCES macro) Preferences (nvs) However, sketches do not need to know where to store credentials using the commonly accessible AutoConnectCredential API. If you are using an Arduino core for ESP32 1.0.2 earlier and need to use credentials in EEPROM for backward compatibility, turns off the AUTOCONNECT_USE_PREFERENCES 3 macro definition in AutoConnectCredentials.h file. AutoConnect behaves assuming that credentials are stored in EEPROM if AUTOCONNECT_USE_PREFERENCES is not defined.","title":"Credentials storage location"},{"location":"credit.html#autoconnectcredential","text":"","title":"AutoConnectCredential"},{"location":"credit.html#include-header","text":"#include ","title":" Include header"},{"location":"credit.html#constructors","text":"AutoConnectCredential(); AutoConnectCredential default constructor. The default offset value is 0. In ESP8266 or ESP32 with arduino core 1.0.2 earlier, if the offset value is 0, the credential area starts from the top of the EEPROM. If you use this area in a user sketch, AutoConnect may overwrite that data. AutoConnectCredential( uint16_t offset); Parameter offset Species offset from the top of the EEPROM for the credential area together. The offset value is from 0 to the flash sector size. This parameter is ignored for AutoConnect v1.0.0 or later with arduino-esp32 core 1.0.3 or later.","title":" Constructors"},{"location":"credit.html#public-member-functions","text":"","title":" Public member functions"},{"location":"credit.html#entries","text":"uint8_t entries( void ) Returns number of entries as contained credentials. Return value Number of entries as contained credentials.","title":" entries"},{"location":"credit.html#load","text":"int8_t load( const char * ssid, struct station_config * config) Load a credential entry and store to config . Parameters ssid SSID to be loaded. config station_config Return value Save the specified SSID's credential entry to station_config pointed to by the parameter as config . -1 is returned if the SSID is not saved.","title":" load"},{"location":"credit.html#load_1","text":"bool load( int8_t entry, struct station_config * config) Load a credential entry and store to config . Parameters entry Specifies the index number based 0 to be loaded. config station_config Return value Save the specified credential entry to station_config pointed to by the parameter as config . -1 is returned if specified number is not saved.","title":" load"},{"location":"credit.html#save","text":"bool save( const struct station_config * config) Save a credential entry. Parameter config station_config to be saved. Return value true Successfully saved. false Failed to save.","title":" save"},{"location":"credit.html#del","text":"bool del( const char * ssid) Delete a credential the specified SSID. Parameter ssid SSID to be deleted. Return value true Successfully deleted. false Failed to delete. Clear saved credentials There is no particular API for batch clearing of all credential data stored by AutoConnect. It is necessary to prepare a sketch function that combines several AutoConnectCredential APIs to erase all saved credentials. The following function is an implementation example, and you can use it to achieve batch clearing. void deleteAllCredentials ( void ) { AutoConnectCredential credential; struct station_config config; uint8_t ent = credential.entries(); while (ent -- ) { credential.load( 0 , & config); credential.del(( const char * ) & config.ssid[ 0 ]); } }","title":" del"},{"location":"credit.html#the-data-structures","text":"","title":"The data structures"},{"location":"credit.html#station_config","text":"A structure is included in the ESP8266 SDK. You can use it in the sketch like as follows: extern \"C\" { #include } struct station_config { uint8 ssid[ 32 ]; uint8 password[ 64 ]; uint8 bssid_set; uint8 bssid[ 6 ]; };","title":" station_config"},{"location":"credit.html#the-credential-entry","text":"A data structure of the credential saving area in EEPROM as the below. 4 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. An example using AutoConnectCredential is provided as an example of a library sketch to delete saved credentials. \u21a9 The namespace for Preferences used by AutoConnect is AC_CREDT . \u21a9 Available only for AutoConnect v1.0.0 and later. \u21a9 There may be 0xff as an invalid data in the credential saving area. The 0xff area would be reused. \u21a9","title":" The credential entry"},{"location":"datatips.html","text":"Convert AutoConnectElements value to actual data type \u00b6 The values in the AutoConnectElements field of the custom Web page are all typed as String. A sketch needs to be converted to an actual data type if the data type required for sketch processing is not a String type. The 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(); You can shorten it and write as like: int value = aux[ \"INPUT\" ].value.toInt(); Float \u00b6 Use float() or toFloat() of String . AutoConnectInput & input = aux.getElement < AutoConnectInput > ( \"INPUT\" ); float value = input.value.toFloat(); You can shorten it and write as like: float value = aux[ \"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 time_t tm; int Year, Month, Day, Hour, Minute, Second; AutoConnectInput & input = aux.[ \"INPUT\" ].as < AutoConnectInput > (); 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 address \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[ \"INPUT\" ].as < AutoConnectInput > (); ip.fromString(input.value); input.value = ip.toString(); Validation for the value \u00b6 To convert input data correctly from the string, it must match its format. The validation implementation with sketches depends on various perspectives. Usually, the tiny devices have no enough power for the lexical analysis completely. 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 format while typing in custom Web pages. Specifying the input data rule as a regular expression will validate the type match during input. If there is an error in the format during input, the background color of the field will change to pink. Refer to section Handling the custom Web pages . However, input data will be transmitted even if the value does not match the pattern. Sketches require the validation of the received data. You can use the AutoConnectInput::isValid function to validate it. The isValid function validates whether the value member variable matches a pattern and returns true or false. #include #include #include static const char input_page[] PROGMEM = R\"raw( [ { \"title\": \"IP Address\", \"uri\": \"/\", \"menu\": true, \"element\": [ { \"name\": \"ipaddress\", \"type\": \"ACInput\", \"label\": \"IP 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])$\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"SEND\", \"uri\": \"/check\" } ] }, { \"title\": \"IP Address\", \"uri\": \"/check\", \"menu\": false, \"element\": [ { \"name\": \"result\", \"type\": \"ACText\" } ] } ] )raw\" ; AutoConnect portal; String checkIPAddress (AutoConnectAux & aux, PageArgument & args) { AutoConnectAux & input_page = * portal.aux( \"/\" ); AutoConnectInput & ipaddress = input_page[ \"ipaddress\" ].as < AutoConnectInput > (); AutoConnectText & result = aux[ \"result\" ].as < AutoConnectText > (); if (ipaddress.isValid()) { result.value = \"IP Address \" + ipaddress.value + \" is OK.\" ; result.style = \"\" ; } else { result.value = \"IP Address \" + ipaddress.value + \" error.\" ; result.style = \"color:red;\" ; } return String( \"\" ); } void setup () { portal.load(input_page); portal.on( \"/check\" , checkIPAddress); portal.begin(); } void loop () { portal.handleClient(); } 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 2 \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 3 \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. The ssanf library function cannot be used with the old Arduino core. \u21a9 This regular expression does not fully support the format of the e-mail address requested in RFC5322 . \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 values in the AutoConnectElements field of the custom Web page are all typed as String. A sketch needs to be converted to an actual data type if the data type required for sketch processing is not a String type. The 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(); You can shorten it and write as like: int value = aux[ \"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(); You can shorten it and write as like: float value = aux[ \"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 time_t tm; int Year, Month, Day, Hour, Minute, Second; AutoConnectInput & input = aux.[ \"INPUT\" ].as < AutoConnectInput > (); 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-address","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[ \"INPUT\" ].as < AutoConnectInput > (); ip.fromString(input.value); input.value = ip.toString();","title":" IP address"},{"location":"datatips.html#validation-for-the-value","text":"To convert input data correctly from the string, it must match its format. The validation implementation with sketches depends on various perspectives. Usually, the tiny devices have no enough power for the lexical analysis completely. 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 format while typing in custom Web pages. Specifying the input data rule as a regular expression will validate the type match during input. If there is an error in the format during input, the background color of the field will change to pink. Refer to section Handling the custom Web pages . However, input data will be transmitted even if the value does not match the pattern. Sketches require the validation of the received data. You can use the AutoConnectInput::isValid function to validate it. The isValid function validates whether the value member variable matches a pattern and returns true or false. #include #include #include static const char input_page[] PROGMEM = R\"raw( [ { \"title\": \"IP Address\", \"uri\": \"/\", \"menu\": true, \"element\": [ { \"name\": \"ipaddress\", \"type\": \"ACInput\", \"label\": \"IP 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])$\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"SEND\", \"uri\": \"/check\" } ] }, { \"title\": \"IP Address\", \"uri\": \"/check\", \"menu\": false, \"element\": [ { \"name\": \"result\", \"type\": \"ACText\" } ] } ] )raw\" ; AutoConnect portal; String checkIPAddress (AutoConnectAux & aux, PageArgument & args) { AutoConnectAux & input_page = * portal.aux( \"/\" ); AutoConnectInput & ipaddress = input_page[ \"ipaddress\" ].as < AutoConnectInput > (); AutoConnectText & result = aux[ \"result\" ].as < AutoConnectText > (); if (ipaddress.isValid()) { result.value = \"IP Address \" + ipaddress.value + \" is OK.\" ; result.style = \"\" ; } else { result.value = \"IP Address \" + ipaddress.value + \" error.\" ; result.style = \"color:red;\" ; } return String( \"\" ); } void setup () { portal.load(input_page); portal.on( \"/check\" , checkIPAddress); portal.begin(); } void loop () { portal.handleClient(); } 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-2","text":"^[a-zA-Z0-9.!#$%&'*+\\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$","title":" email address 2"},{"location":"datatips.html#ip-address_1","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-3","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. The ssanf library function cannot be used with the old Arduino core. \u21a9 This regular expression does not fully support the format of the e-mail address requested in RFC5322 . \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 3"},{"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. Connection lost immediately after establishment with AP \u00b6 A captive portal is disconnected immediately after the connection establishes with the new AP. This is a known problem of ESP32, and it may occur when the following conditions are satisfied at the same time. SoftAP channel on ESP32 and the connecting AP channel you specified are different. (The default channel of SoftAP is 1.) NVS had erased by erase_flash causes the connection data lost. The NVS partition has been moved. Never connected to the AP in the past. There are receivable multiple WiFi signals which are the same SSID with different channels using the WiFi repeater etc. (This condition is loose, it may occur even if there is no WiFi repeater.) Or the using channel of the AP which established a connection is congested with the radio signal on the same band. (If the channel crowd, connections to known APs may also fail.) Other possibilities The above conditions are not absolute. It results from my investigation, and other conditions may exist. To avoid this problem, try changing the channel . ESP32 hardware equips only one RF circuitry for WiFi signal. At the AP_STA mode, ESP32 as an AP attempts connect to another AP on another channel while keeping the connection with the station then the channel switching will occur causes the station may be disconnected. But it may not be just a matter of channel switching causes ESP8266 has the same constraints too. It may be a problem with AutoConnect or the arduino core or SDK issue. This problem will persist until a specific solution. Data saved to EEPROM is different from my sketch wrote. \u00b6 By default, AutoConnect saves the credentials of the established connection into EEPROM. The credential area of EEPROM used by AutoConnect will conflict with data owned by the user sketch if without measures taken. It will destroy the user sketch data and the data stored in EEPROM by AutoConnect with each other. You have the following two options to avoid this conflict: Move the credential saving area of EEPROM. You can protect your data from corruption by notifying AutoConnect where to save credentials. Notification of the save location for the credentials uses AutoConnectConfig::boundaryOffset option. Refer to the chapter on Advanced usage for details. Suppresses the automatic save operation of credentials by AutoConnect. You can completely stop saving the credentials by AutoConnect. However, if you select this option, you lose the past credentials which were able to connect to the AP. Therefore, the effect of the automatic reconnection feature will be lost. If you want to stop the automatic saving of the credentials, uses AutoConnectConfig::autoSave option specifying AC_SAVECREDENTIAL_NEVER . Refer to the chapter on Advanced usage for details. 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 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. 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 1 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 can I detect the captive portal starting? \u00b6 You can use the AutoConnect::onDetect exit routine. For more details and an implementation example of the onDetect exit routine, refer to the chapter \" Captive portal start detection \". How change HTTP port? \u00b6 HTTP port number is defined as a macro in AutoConnectDefs.h header file. You can change it directly with several editors and must re-compile. #define AUTOCONNECT_HTTPPORT 80 How change SSID or Password in Captive portal? \u00b6 You can change both by using AutoConnectConfig::apid and AutoConnectConfig::psk . Refer to section Change SSID and Password for SoftAP in Advanced usage . 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. Refer to ' Saved credential access ' on section Appendix for details. 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 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#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 1 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-can-i-detect-the-captive-portal-starting","text":"You can use the AutoConnect::onDetect exit routine. For more details and an implementation example of the onDetect exit routine, refer to the chapter \" Captive portal start detection \".","title":" How can I detect the captive portal starting?"},{"location":"faq.html#how-change-http-port","text":"HTTP port number is defined as a macro in AutoConnectDefs.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#how-change-ssid-or-password-in-captive-portal","text":"You can change both by using AutoConnectConfig::apid and AutoConnectConfig::psk . Refer to section Change SSID and Password for SoftAP in Advanced usage .","title":" How change SSID or Password in Captive portal?"},{"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. Refer to ' Saved credential access ' on section Appendix for details. Hint With the ESPShaker , you can access EEPROM interactively from the serial monitor, and of course you can erase saved credentials.","title":" How erase the credentials saved in EEPROM?"},{"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 // Replace with WiFi.h for ESP32 #include // Replace with WebServer.h for ESP32 #include 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 // Replace with WiFi.h for ESP32 #include // Replace with WebServer.h for ESP32 #include 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 hold 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 D0 (sometimes called BUILTIN_LED ) port of the NodeMCU module like the following animation. 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 will blink according to the value with clicked by the button. 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 convenient 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 does not necessary for uses only client. \u21a9","title":"How to embed"},{"location":"howtoembed.html#embed-the-autoconnect-to-the-sketch","text":"Here hold 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 D0 (sometimes called BUILTIN_LED ) port of the NodeMCU module like the following animation. 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 will blink according to the value with clicked by the button. 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 convenient 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 does not necessary for uses only client. \u21a9","title":"How embed to your sketches"},{"location":"license.html","text":"MIT License Copyright \u00a9 2018-2019 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 Each of the following libraries used by AutoConnect is under its license: 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":"lsbegin.html","text":"AutoConnect::begin logic sequence \u00b6 Several parameters as follows of AutoConnectConfig affect the behavior of AutoConnect::begin function. Each parameter affects the behaves in interacted order with the priority and apply to the logic sequence of AutoConnect::begin . immediateStart : The captive portal start immediately, without first WiFi.begin. autoReconenct : Attempt re-connect with past SSID by saved credential. portalTimeout : Time out limit for the portal. retainPortal : Keep DNS server functioning for the captive portal. You can use these parameters in combination with sketch requirements and need to understand correctly the behavior caused by the parameters. The following chart shows the AutoConnect::begin logic sequence including the effect of these parameters. For example, AutoConnect::begin will not exits without the portalTimeout while the connection not establishes, but WebServer will start to work. A DNS server that detects the probe of the captive portal is also effective. So, your sketch may work seemingly, but it will close with inside a loop of the AutoConnect::begin function. Especially when invoking AutoConnect::begin in the setup() , execution control does not pass to the loop() . As different scenes, you may use the immediateStart effectively. Equipped the external switch to activate the captive portal with the ESP module, combined with the portalTime and the retainPortal it will become WiFi active connection feature. You can start AutoConnect::begin at any point in the loop() , which allows your sketch can behave both the offline mode and the online mode. The retainPortal option allows the DNS server to continue operation after exiting from AutoConnect::begin . AutoConnect traps captive portal detection from the client and redirects it to the AutoConnect menu. That trap will answer all unresolved addresses with SoftAP's IP address. If the URI handler for the source request is undefined, it returns a 302 response with SoftAPIP/_ac to the client. This is the mechanism of AutoConnect's captive portal. Captive portal probes will frequently occur while you are attempting on the client device's WiFi connection Apps and these implementations are varied each OS, so it not realistic to identify all probing URIs. Therefore, while retainPortal is enabled, it is not preferable to executing the sketch under the WiFi connection Apps on the client device. (Probably not work correctly) You need to exit from the WiFi connection Apps once. Please consider these kinds of influence when you make sketches. The AutoConnect::begin 3 rd parameter Another parameter as the 3 rd parameter of AutoConnect::begin related to timeout constrains the connection wait time after WiFi.begin. It is the CONNECTED judgment of the above chart that it has an effect.","title":"Inside AutoConnect::begin"},{"location":"lsbegin.html#autoconnectbegin-logic-sequence","text":"Several parameters as follows of AutoConnectConfig affect the behavior of AutoConnect::begin function. Each parameter affects the behaves in interacted order with the priority and apply to the logic sequence of AutoConnect::begin . immediateStart : The captive portal start immediately, without first WiFi.begin. autoReconenct : Attempt re-connect with past SSID by saved credential. portalTimeout : Time out limit for the portal. retainPortal : Keep DNS server functioning for the captive portal. You can use these parameters in combination with sketch requirements and need to understand correctly the behavior caused by the parameters. The following chart shows the AutoConnect::begin logic sequence including the effect of these parameters. For example, AutoConnect::begin will not exits without the portalTimeout while the connection not establishes, but WebServer will start to work. A DNS server that detects the probe of the captive portal is also effective. So, your sketch may work seemingly, but it will close with inside a loop of the AutoConnect::begin function. Especially when invoking AutoConnect::begin in the setup() , execution control does not pass to the loop() . As different scenes, you may use the immediateStart effectively. Equipped the external switch to activate the captive portal with the ESP module, combined with the portalTime and the retainPortal it will become WiFi active connection feature. You can start AutoConnect::begin at any point in the loop() , which allows your sketch can behave both the offline mode and the online mode. The retainPortal option allows the DNS server to continue operation after exiting from AutoConnect::begin . AutoConnect traps captive portal detection from the client and redirects it to the AutoConnect menu. That trap will answer all unresolved addresses with SoftAP's IP address. If the URI handler for the source request is undefined, it returns a 302 response with SoftAPIP/_ac to the client. This is the mechanism of AutoConnect's captive portal. Captive portal probes will frequently occur while you are attempting on the client device's WiFi connection Apps and these implementations are varied each OS, so it not realistic to identify all probing URIs. Therefore, while retainPortal is enabled, it is not preferable to executing the sketch under the WiFi connection Apps on the client device. (Probably not work correctly) You need to exit from the WiFi connection Apps once. Please consider these kinds of influence when you make sketches. The AutoConnect::begin 3 rd parameter Another parameter as the 3 rd parameter of AutoConnect::begin related to timeout constrains the connection wait time after WiFi.begin. It is the CONNECTED judgment of the above chart that it has an effect.","title":"AutoConnect::begin logic sequence"},{"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://172.217.28.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 the flash. 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 the flash of ESP8266/ESP32 automatically. The Open SSIDs menu reads the saved SSID credentials from the flash. 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. by attaching AutoConnect menu \u00b6 The AutoConnect menu can contain HTML pages of your owns 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 to the legacy sketch code. You can extend the AutoConnect menu to improve the original sketches and according to the procedure described in section Advanced Usage .","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://172.217.28.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 the flash. 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 the flash of ESP8266/ESP32 automatically. The Open SSIDs menu reads the saved SSID credentials from the flash. 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#by-attaching-autoconnect-menu","text":"The AutoConnect menu can contain HTML pages of your owns 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 to the legacy sketch code. You can extend the AutoConnect menu to improve the original sketches and according to the procedure described in section Advanced Usage .","title":" by attaching AutoConnect menu"},{"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 section 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 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 the list initialization for std::vector . According to the basic procedure of AutoConnect. Establish a connection with AutoConnect::begin and perform AutoConnect::handleClient in loop() . \u2002 Modification for FSBrowser (a part of sketch code) ... and embeds a hyperlink with an icon in the bottom of the body section of index.htm contained in the data folder to jump to the AutoConnect menu. < p style = \"padding-top:15px;text-align:center\" > < a href = \"/_ac\" >< img src = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC2klEQVRIS61VvWsUQRSfmU2pon9BUIkQUaKFaCBKgooSb2d3NSSFKbQR/KrEIiIKBiGF2CgRxEpjQNHs7mwOUcghwUQ7g58IsbGxEBWsb2f8zR177s3t3S2cA8ftzPu993vzvoaSnMu2vRKlaqgKp74Q/tE8qjQPyHGcrUrRjwlWShmDbFMURd/a6TcQwNiYUmpFCPElUebcuQ2vz6aNATMVReHEPwzfSSntDcNwNo2rI+DcvQzhpAbA40VKyV0p1Q9snzBG1qYVcYufXV1sREraDcxpyHdXgkfpRBj6Uwm2RsC5dxxmZ9pdOY9cKTISRcHTCmGiUCh4fYyplTwG2mAUbtMTBMHXOgK9QfyXEZr+TkgQ1oUwDA40hEgfIAfj+HuQRaBzAs9eKyUZ5Htx+T3ZODKG8DzOJMANhmGomJVMXPll+hx9UUAlzZrJJ4QNCDG3VEfguu7mcpmcB/gkBOtShhQhchAlu5jlLUgc9ENgyP5gf9+y6LTv+58p5zySkgwzLNOIGc8sEoT1Lc53NMlbCQQuvMxeCME1NNPVVkmH/i3IzzXDtCSA0qQQwZWOCJDY50jsQRjJmkslEOxvTcDRO6zPxOh5xZglKkYLhWM9jMVnkIsTyMT6NBj7IbOCEjm6HxNVVTo2WXqEWJZ1T8rytB6GxizyDkPhWVpBqfiXUtbo/HywYJSpA9kMamNNPZ71R9Hcm+TMHHZNGw3EuraXEUldbfvw25UdOjqOt+JhMwJd7+jSTpZaEiIcaCDwPK83jtWnTkwnunFMtxeL/ge9r4XItt1RNNaj/0GAcV2bR3U5sG3nEh6M61US+Qrfd9Bs31GGulI2GOS/8dgcQZV1w+ApjIxB7TDwF9GcNzJzoA+rD0/8HvPnXQJCt2qFCwbBTfRI7UyXumWVt+HJ9NO4XI++bdsb0YyrqXmlh+AWOLHaLqS5CLQR5EggR3YlcVS9gKeH2hnX8r8Kmi1CAsl36QAAAABJRU5ErkJggg==\" border = \"0\" title = \"AutoConnect menu\" alt = \"AutoConnect menu\" /> window.onload = function() { Gifffer(); };","title":"Attach 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 section 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 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 the list initialization for std::vector . According to the basic procedure of AutoConnect. Establish a connection with AutoConnect::begin and perform AutoConnect::handleClient in loop() . \u2002 Modification for FSBrowser (a part of sketch code) ... and embeds a hyperlink with an icon in the bottom of the body section of index.htm contained in the data folder to jump to the AutoConnect menu. < p style = \"padding-top:15px;text-align:center\" > < a href = \"/_ac\" >< img src = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC2klEQVRIS61VvWsUQRSfmU2pon9BUIkQUaKFaCBKgooSb2d3NSSFKbQR/KrEIiIKBiGF2CgRxEpjQNHs7mwOUcghwUQ7g58IsbGxEBWsb2f8zR177s3t3S2cA8ftzPu993vzvoaSnMu2vRKlaqgKp74Q/tE8qjQPyHGcrUrRjwlWShmDbFMURd/a6TcQwNiYUmpFCPElUebcuQ2vz6aNATMVReHEPwzfSSntDcNwNo2rI+DcvQzhpAbA40VKyV0p1Q9snzBG1qYVcYufXV1sREraDcxpyHdXgkfpRBj6Uwm2RsC5dxxmZ9pdOY9cKTISRcHTCmGiUCh4fYyplTwG2mAUbtMTBMHXOgK9QfyXEZr+TkgQ1oUwDA40hEgfIAfj+HuQRaBzAs9eKyUZ5Htx+T3ZODKG8DzOJMANhmGomJVMXPll+hx9UUAlzZrJJ4QNCDG3VEfguu7mcpmcB/gkBOtShhQhchAlu5jlLUgc9ENgyP5gf9+y6LTv+58p5zySkgwzLNOIGc8sEoT1Lc53NMlbCQQuvMxeCME1NNPVVkmH/i3IzzXDtCSA0qQQwZWOCJDY50jsQRjJmkslEOxvTcDRO6zPxOh5xZglKkYLhWM9jMVnkIsTyMT6NBj7IbOCEjm6HxNVVTo2WXqEWJZ1T8rytB6GxizyDkPhWVpBqfiXUtbo/HywYJSpA9kMamNNPZ71R9Hcm+TMHHZNGw3EuraXEUldbfvw25UdOjqOt+JhMwJd7+jSTpZaEiIcaCDwPK83jtWnTkwnunFMtxeL/ge9r4XItt1RNNaj/0GAcV2bR3U5sG3nEh6M61US+Qrfd9Bs31GGulI2GOS/8dgcQZV1w+ApjIxB7TDwF9GcNzJzoA+rD0/8HvPnXQJCt2qFCwbBTfRI7UyXumWVt+HJ9NO4XI++bdsb0YyrqXmlh+AWOLHaLqS5CLQR5EggR3YlcVS9gKeH2hnX8r8Kmi1CAsl36QAAAABJRU5ErkJggg==\" border = \"0\" title = \"AutoConnect menu\" alt = \"AutoConnect menu\" /> window.onload = function() { Gifffer(); };","title":"Place the item for the legacy sketches on the menu"},{"location":"otabrowser.html","text":"Updates with the Web Browser \u00b6 You can implement the user sketch as described in the ESP8266 Arduino Core documentation to realize using the web browser as an update client. By incorporating the ESP8266HTTPUpdateServer class into AutoConnect, you can operate the dialog page for selecting the updating binary sketch file owned by ESP8266HTTPUpdateServer from the AutoConnect menu. Update feature with a web browser is implemented using ESP8266HTTPUpdateServer class and ESP8266mDNS class. However, ESP32 Arduino core does not provide a class implementation equivalent to ESP8266HTTPUpdateServer . Therefore, it is necessary to implement an HTTPUpdateServer class for ESP32 to realize the update using a Web browser. The AutoConnect library includes an implementation of the HTTPUpdateServer class for ESP32 to make it easy for you to experience . 1 For the client devices equipped with Android OS Depending on the state of Android OS configuration, Bonjour service may not be incorporated. This method does not work with some Android devices as the client. How to embed ESP8266HTTPUpdateServer in AutoConnect \u00b6 To embed the ESP8266HTTPUpdateServer class with AutoConnect into your sketch, basically follow these steps: Include ESP8266mDNS.h and ESP8266HTTPUpdateServer.h , also WiFiClient.h , in addition to the usual directives as ESP8266WebServer.h and AutoConnect.h . Declare an ESP8266WebServer object. (In ESP32, as WebServer) Declare an ESP8266HTTPUpdateServer object. Declare an AutoConnect object with an ESP8266WebServer object as an argument. Declare an AutoConnectAux object for the update operation page. Assign /update to the URI of the update dialog page. Assign any title as the AutoConnect menu for the update dialog page. Declare additional AutoConnectAux pages for your application intention if needed. Perform the following procedure steps in the setup() function: Invokes ESP8288HTTPUpdateServer::setup function, specifies the USERNAME and the PASSWORD as needed. Load the AutoConnectAux pages declared in step #8 for your application. (Except the update dialog page) Join these pages to AutoConnect along with the update dialog page declared in step #5. Invokes AutoConnect::begin function. Call the MDNS.begin and MDNS.addServer functions to start the multi cast DNS service. Perform the following procedure steps in the loop() function: Call the MDNS.update function to parse requests for mDNS. (No needed as ESP32) Invokes AutoConnect::handleClient function. #include #include #include // Step #1 #include // Step #1 #include // Step #1 #include static const char HELLO_PAGE[] PROGMEM = R\"( { \"title\": \"Hello world\", \"uri\": \"/\", \"menu\": true, \"element\": [ { \"name\": \"caption\", \"type\": \"ACText\", \"value\": \"Hello, world \", \"style\": \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\": \"content\", \"type\": \"ACText\", \"value\": \"In this page, place the custom web page handled by the sketch application.\" } ] } )\" ; ESP8266WebServer httpServer; // Step #2 ESP8266HTTPUpdateServer httpUpdate; // Step #3 AutoConnect portal (httpServer); // Step #4 AutoConnectAux update ( \"/update\" , \"UPDATE\" ); // Step #5, #6, #7 AutoConnectAux hello; // Step #8 void setup () { httpUpdate.setup( & httpServer, \"USERNAME\" , \"PASSWORD\" ); // Step #9.a hello.load(HELLO_PAGE); // Step #9.b portal.join({ hello, update }); // Step #9.c if (portal.begin()) { // Step #9.d if (MDNS.begin( \"esp-webupdate\" )) // Step #9.e MDNS.addService( \"http\" , \"tcp\" , 80 ); // Step #9.e } } void loop () { MDNS.update(); // Step #10.a portal.handleClient(); // Step #10.b } For ESP32 This procedure is equally applicable to ESP32. If the target module is ESP32, change the following items: Change the include directives appropriately for the ESP32 environment. Change ESP8266HTTPUpdaetServer to HTTPUpdateServer using an implementation provided from AutoConnect library example code. Remove MDNS.update line from the sketch code. Share an ESP8266WebServer AutoConnect shares the ESP8266WebServer instance with the ESP8266HTTPUpdateServer class. You can give the same instance as ESP8266WebServer instance given to AutoConnect to ESP8266HTTPUpdateServer class. ESP8266WebServer httpServer; ESP8266HTTPUpdateServer updateServer; AutoConnect portal (httpServer); updateServer( & httpServer); This sharing specification is the same for ESP32. The result of the above sketch should be as follows. 2 How LED ticking during updates You cannot get the ticker with LED during updates by using this way. It is since the current implementation of the ESP8266HTTPUpdateServer class of the Arduino core library does not assign an LED PIN to the ESP8266HTTPUpdate class. How to make the binary sketch \u00b6 Binary sketch files for updating can be retrieved using the Arduino IDE. Open the Sketch menu and select the Export compiled Binary , then starts compilation. When the compilation is complete, a binary sketch will save with the extension .bin in the same folder as the sketch. window.onload = function() { Gifffer(); }; You can find the implementation of the HTTPUpdateServer class in the WebUpdate folder included in the AutoConnect library examples folder . \u21a9 The authentication dialog is displayed first. \u21a9","title":"Using Web Browser"},{"location":"otabrowser.html#updates-with-the-web-browser","text":"You can implement the user sketch as described in the ESP8266 Arduino Core documentation to realize using the web browser as an update client. By incorporating the ESP8266HTTPUpdateServer class into AutoConnect, you can operate the dialog page for selecting the updating binary sketch file owned by ESP8266HTTPUpdateServer from the AutoConnect menu. Update feature with a web browser is implemented using ESP8266HTTPUpdateServer class and ESP8266mDNS class. However, ESP32 Arduino core does not provide a class implementation equivalent to ESP8266HTTPUpdateServer . Therefore, it is necessary to implement an HTTPUpdateServer class for ESP32 to realize the update using a Web browser. The AutoConnect library includes an implementation of the HTTPUpdateServer class for ESP32 to make it easy for you to experience . 1 For the client devices equipped with Android OS Depending on the state of Android OS configuration, Bonjour service may not be incorporated. This method does not work with some Android devices as the client.","title":"Updates with the Web Browser"},{"location":"otabrowser.html#how-to-embed-esp8266httpupdateserver-in-autoconnect","text":"To embed the ESP8266HTTPUpdateServer class with AutoConnect into your sketch, basically follow these steps: Include ESP8266mDNS.h and ESP8266HTTPUpdateServer.h , also WiFiClient.h , in addition to the usual directives as ESP8266WebServer.h and AutoConnect.h . Declare an ESP8266WebServer object. (In ESP32, as WebServer) Declare an ESP8266HTTPUpdateServer object. Declare an AutoConnect object with an ESP8266WebServer object as an argument. Declare an AutoConnectAux object for the update operation page. Assign /update to the URI of the update dialog page. Assign any title as the AutoConnect menu for the update dialog page. Declare additional AutoConnectAux pages for your application intention if needed. Perform the following procedure steps in the setup() function: Invokes ESP8288HTTPUpdateServer::setup function, specifies the USERNAME and the PASSWORD as needed. Load the AutoConnectAux pages declared in step #8 for your application. (Except the update dialog page) Join these pages to AutoConnect along with the update dialog page declared in step #5. Invokes AutoConnect::begin function. Call the MDNS.begin and MDNS.addServer functions to start the multi cast DNS service. Perform the following procedure steps in the loop() function: Call the MDNS.update function to parse requests for mDNS. (No needed as ESP32) Invokes AutoConnect::handleClient function. #include #include #include // Step #1 #include // Step #1 #include // Step #1 #include static const char HELLO_PAGE[] PROGMEM = R\"( { \"title\": \"Hello world\", \"uri\": \"/\", \"menu\": true, \"element\": [ { \"name\": \"caption\", \"type\": \"ACText\", \"value\": \"Hello, world \", \"style\": \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\": \"content\", \"type\": \"ACText\", \"value\": \"In this page, place the custom web page handled by the sketch application.\" } ] } )\" ; ESP8266WebServer httpServer; // Step #2 ESP8266HTTPUpdateServer httpUpdate; // Step #3 AutoConnect portal (httpServer); // Step #4 AutoConnectAux update ( \"/update\" , \"UPDATE\" ); // Step #5, #6, #7 AutoConnectAux hello; // Step #8 void setup () { httpUpdate.setup( & httpServer, \"USERNAME\" , \"PASSWORD\" ); // Step #9.a hello.load(HELLO_PAGE); // Step #9.b portal.join({ hello, update }); // Step #9.c if (portal.begin()) { // Step #9.d if (MDNS.begin( \"esp-webupdate\" )) // Step #9.e MDNS.addService( \"http\" , \"tcp\" , 80 ); // Step #9.e } } void loop () { MDNS.update(); // Step #10.a portal.handleClient(); // Step #10.b } For ESP32 This procedure is equally applicable to ESP32. If the target module is ESP32, change the following items: Change the include directives appropriately for the ESP32 environment. Change ESP8266HTTPUpdaetServer to HTTPUpdateServer using an implementation provided from AutoConnect library example code. Remove MDNS.update line from the sketch code. Share an ESP8266WebServer AutoConnect shares the ESP8266WebServer instance with the ESP8266HTTPUpdateServer class. You can give the same instance as ESP8266WebServer instance given to AutoConnect to ESP8266HTTPUpdateServer class. ESP8266WebServer httpServer; ESP8266HTTPUpdateServer updateServer; AutoConnect portal (httpServer); updateServer( & httpServer); This sharing specification is the same for ESP32. The result of the above sketch should be as follows. 2 How LED ticking during updates You cannot get the ticker with LED during updates by using this way. It is since the current implementation of the ESP8266HTTPUpdateServer class of the Arduino core library does not assign an LED PIN to the ESP8266HTTPUpdate class.","title":" How to embed ESP8266HTTPUpdateServer in AutoConnect"},{"location":"otabrowser.html#how-to-make-the-binary-sketch","text":"Binary sketch files for updating can be retrieved using the Arduino IDE. Open the Sketch menu and select the Export compiled Binary , then starts compilation. When the compilation is complete, a binary sketch will save with the extension .bin in the same folder as the sketch. window.onload = function() { Gifffer(); }; You can find the implementation of the HTTPUpdateServer class in the WebUpdate folder included in the AutoConnect library examples folder . \u21a9 The authentication dialog is displayed first. \u21a9","title":" How to make the binary sketch"},{"location":"otaserver.html","text":"Updates with the update server \u00b6 Since the v1.0.0 release, AutoConnect provides new feature for updating sketch firmware of ESP8266 or ESP32 modules via OTA using the AutoConnectUpdate class that is an implementation of the sketch binary update by the HTTP server mentioned in the OTA update of the ESP8266 Arduino Core documentation, which inherits from the ESP8266HTTPUpdate class (as HTTPUpdate class in the case of ESP32). It acts as a client agent for a series of update operations. This method allows you to remotely update the ESP module's firmware beyond the network segments from the update server, as long as you can ensure proper routing and forwarding. If you choose this update method, you need to prepare the server process as a variant of the HTTP server that supplies the binary sketch files to the updating client agent. Its server requires to be able to handle the HTTP headers extended by ESP8266HTTPUpdate class as described in the ESP8266 Arduino Core documentation . There are various implementations of the update server that provide binary sketch files. For example, the ESP8266 Arduino Core documentation suggests an advanced updater php script that can be fully communicated with the client agent using the ESP8266HTTPUpdate class. That is, the update server for AutoConnect must work with the client agent, and its implementation should make the handshake well with the AutoConnectUpdate class which wraps an ESP8266HTTPUpdate class. The AutoConnect library provides an update server script implemented in Python that can combine with the AutoConnectUpdate class. How to embed AutoConnectUpdate to your sketch \u00b6 To embed the AutoConnectUpdate class into your sketch, basically follow these steps: Declare an ESP8266WebServer object. (In ESP32, as WebServer) Declare an AutoConnect object with an ESP8266WebServer object. Declare an AutoConnectUpdate object with the update server address and the HTTP port as parameters. Invokes AutoConnect::begin function. Attach the AutoConnectUpdate object to AutoConnect using AutoConnectUpdate::attach function. Invokes AutoConnect::handleClient function in the loop() . #include #include #include ESP8266WebServer server; // Step #1 AutoConnect portal; // Step #2 AutoConnectUpdate update ( \"192.168.0.100\" , 8000 ); // Step #3 void setup () { if (portal.begin()) { // Step #4 update.attach(portal); // Step #5 } } void loop () { portal.handleClient(); // Step #6 } Behavior of the AutoConnectUpdate class \u00b6 A sketch incorporating the AutoConnectUpdate class has an extended menu item as UPDATE in the AutoConnect menu. UPDATE as menu item will be attached by the AutoConnectUpdate automatically. When an UPDATE item started, its first action is requesting a catalog list of updatable binary sketch files to the update server . Then the update server sends back the catalog list of stored binary sketch files to a client which is the ESP module. The AutoConnectUpdate class will display responded list to a custom Web page 1 on the browser. The substance of Available firmware list is a custom Web page by AutoConnectAux, and you can select the target binary sketch file with the radio button (AutoConnectRadio). A progress bar will appear to notify the updating status once the update has begun. When the update finished, the ESP module will reset automatically to launch a new firmware. The AutoConnectUpdate class performs the above series of operations in conjunction with the update server. All you need to do is attach the AutoConnectUpdate class to AutoConnect and execute the AutoConnect::handleClient function in the loop() . Update server for the AutoConnectUpdate class \u00b6 The above series of operations using AutoConnectUpdate class requires an update server that can work with it. AutoConnect provides an update server script implemented in Python. This server script conforms to a sketch that uses the AutoConnectUpdate class as an update client agent. 2 In the OTA platform, you can place the update server operated by the script in a location that is reachable from the ESP module on the network. updateserver.py [ -h ] [ --port PORT ] [ --bind IP_ADDRESS ] [ --catalog CATALOG ] [ --log LOG_LEVEL ] --help | -h Show help message and exit. --port | -p Specifies PORT number (Default: 8000) --bind | -b Specifies the IP address to which the update server binds. Usually, it is the host address of the update server. When multiple NICs configured, specify one of the IP addresses. (Default: HOST IP or 127.0.0.0) --catalog | -d Specifies the directory path on the update server that contains the binary sketch files. (Default: The current directory) --log | -l Specifies the level of logging output. It accepts the Logging Levels specified in the Python logging module. updateserver.py usage Python First, prepare a Python environment. It is also possible with a tiny single-board computer like the raspberry pi . Popular distributions such as Ubuntu for Linux include Python. You can easily set up a Python 2 or 3 environment. If you are using a Mac, you already have the Python 2 environment. macOS is equipped with Python 2.7 by default. In the case of Windows OS, it is necessary to install the Python environment intentionally. Please refer to the Python official page to install Python in your environment. Deploy the binary sketch files Use the Arduino IDE to output a binary file of sketches and deploy it 3 under the update server. The path which specifies for the --catalog option of updateServer.py is the path of the binary sketch files you deployed. Start updateserver.py For example, to start the update server on the host with IP address 172.16.1.10 using 8080 port 4 , execute the following command: python updateserver.py --port 8080 --bind 172 .16.1.10 --catalog bin --log debug In this example assumes that the binary sketch files are deployed under the path bin from the current directory. Limitations of the updateserver.py The updateserver.py script equips only the minimum facility because it assumes a private small OTA platform without identifying individual modules and version restrictions etc. To operate a larger OTA platform, it is necessary to identify the individual ESP module and to consider version control and security. HTTP contents and the sequence for the AutoConnectUpdate class \u00b6 You can also equip an update server that works with the AutoConnectUpdate class. It can be improved more widely applicable by adding extensions such as version control and authentication to the updateserver.py script. It is necessary to understand the specifications related to HTTP data streams and sequences to enhance the update server that the AutoConnectUpdate class assumes. This section describes the contents of the HTTP data stream required by the communication with AutoConnectUpdate class. To work correctly with the AutoConnectUpdate class, the update server must meet two requirements: The update server notifies the catalog list of updatable binary files which stored in the update server to the client agent. 5 Send an updating binary file and MD5 hash to a client in response to URI request (HTTP GET). 6 Above requirements will be implemented on along the HTTP protocol. The AutoConnectUpdate class requests an update server to notify the client for a catalog list of binary sketch files using an HTTP URL query string. The specifications of the HTTP query and the contents of the catalog list to be returned are as follows: 1. HTTP URL query for the catalog list of the updatable \u00b6 [address]/_catalog?op=list&path=[path] address URL of the update server /_catalog Request path, it is fixed. op Operation command for the update server. Currently, only ' list ' occurs. path Path containing the updatable binary files on the update server. 2. The catalog list content \u00b6 The response (that is, the catalog list) to the above query from the server is the following specification in JSON format. { \"name\" : FILE_NAME , \"type\" : FILE_TYPE , \"date\" : FILE_TIMESTAMP_DATED , \"time\" : FILE_TIMESTAMP_TIMED , \"size\" : FILE_SIZE } name Binary sketch file name for update (String) type One of ' bin ', ' directory ' or ' file '. AutoConnect Update recognizes only file types of ' bin ' as update targets. (String) date File update date. AutoConnect v1.0.0 treats the file update date as an annotation and is not equip the version control feature yet. (String) time File update time. AutoConnect v1.0.0 treats the file update date as an annotation and is not equip the version control feature yet. (String) size File byte count (Numeric) The above JSON object is one entry. The actual catalog list is an array of this entry since it assumes that an update server will provide multiple update binary files in production. The update server should respond with the MIME type specified as application/json for the catalog list. 7 3. The binary sketch file used for updating \u00b6 The AutoConnectUpdate class issues a HTTP GET request with the specified host address and URI. The update server responds by sending back a binary sketch file with the following header: Content-Type: application/octet-stream Content-Disposition: attachment; filename=\"BINARY_SKETCH_FILE_NAME\" Content-Length: LENGTH_OF_CONTENT x-MD5: HEXDIGEST The header x-MD5 is a 128-bit hash value (digest in hexadecimal) that represents the checksum of the binary sketch file for updates required for the ESP8266HTTPUpdate class. window.onload = function() { Gifffer(); }; You can scroll horizontally on the browser to see the timestamp and file size that the catalog list contains. \u21a9 The folders containing the script: For Python2: AUTOCONNECT_LIBRARY_PATH /src/updateserver/python2 For Python3: AUTOCONNECT_LIBRARY_PATH /src/updateserver/python3 \u21a9 Deploying the binary sketch file output by Arduino IDE is usually just copying to the folder for deployment. However, its folder must be accessible from the updateserver.py script. \u21a9 The port of the update server and the port used by the AutoConnectUpdate class must be the same. \u21a9 The client agent is an instance of the AutoConnectUpdate class. \u21a9 The client agent will send its URI request to the update server. \u21a9 It should be represented as Content-Type: application/json in the HTTP response header. \u21a9","title":"Using Update Server"},{"location":"otaserver.html#updates-with-the-update-server","text":"Since the v1.0.0 release, AutoConnect provides new feature for updating sketch firmware of ESP8266 or ESP32 modules via OTA using the AutoConnectUpdate class that is an implementation of the sketch binary update by the HTTP server mentioned in the OTA update of the ESP8266 Arduino Core documentation, which inherits from the ESP8266HTTPUpdate class (as HTTPUpdate class in the case of ESP32). It acts as a client agent for a series of update operations. This method allows you to remotely update the ESP module's firmware beyond the network segments from the update server, as long as you can ensure proper routing and forwarding. If you choose this update method, you need to prepare the server process as a variant of the HTTP server that supplies the binary sketch files to the updating client agent. Its server requires to be able to handle the HTTP headers extended by ESP8266HTTPUpdate class as described in the ESP8266 Arduino Core documentation . There are various implementations of the update server that provide binary sketch files. For example, the ESP8266 Arduino Core documentation suggests an advanced updater php script that can be fully communicated with the client agent using the ESP8266HTTPUpdate class. That is, the update server for AutoConnect must work with the client agent, and its implementation should make the handshake well with the AutoConnectUpdate class which wraps an ESP8266HTTPUpdate class. The AutoConnect library provides an update server script implemented in Python that can combine with the AutoConnectUpdate class.","title":"Updates with the update server"},{"location":"otaserver.html#how-to-embed-autoconnectupdate-to-your-sketch","text":"To embed the AutoConnectUpdate class into your sketch, basically follow these steps: Declare an ESP8266WebServer object. (In ESP32, as WebServer) Declare an AutoConnect object with an ESP8266WebServer object. Declare an AutoConnectUpdate object with the update server address and the HTTP port as parameters. Invokes AutoConnect::begin function. Attach the AutoConnectUpdate object to AutoConnect using AutoConnectUpdate::attach function. Invokes AutoConnect::handleClient function in the loop() . #include #include #include ESP8266WebServer server; // Step #1 AutoConnect portal; // Step #2 AutoConnectUpdate update ( \"192.168.0.100\" , 8000 ); // Step #3 void setup () { if (portal.begin()) { // Step #4 update.attach(portal); // Step #5 } } void loop () { portal.handleClient(); // Step #6 }","title":" How to embed AutoConnectUpdate to your sketch"},{"location":"otaserver.html#behavior-of-the-autoconnectupdate-class","text":"A sketch incorporating the AutoConnectUpdate class has an extended menu item as UPDATE in the AutoConnect menu. UPDATE as menu item will be attached by the AutoConnectUpdate automatically. When an UPDATE item started, its first action is requesting a catalog list of updatable binary sketch files to the update server . Then the update server sends back the catalog list of stored binary sketch files to a client which is the ESP module. The AutoConnectUpdate class will display responded list to a custom Web page 1 on the browser. The substance of Available firmware list is a custom Web page by AutoConnectAux, and you can select the target binary sketch file with the radio button (AutoConnectRadio). A progress bar will appear to notify the updating status once the update has begun. When the update finished, the ESP module will reset automatically to launch a new firmware. The AutoConnectUpdate class performs the above series of operations in conjunction with the update server. All you need to do is attach the AutoConnectUpdate class to AutoConnect and execute the AutoConnect::handleClient function in the loop() .","title":" Behavior of the AutoConnectUpdate class"},{"location":"otaserver.html#update-server-for-the-autoconnectupdate-class","text":"The above series of operations using AutoConnectUpdate class requires an update server that can work with it. AutoConnect provides an update server script implemented in Python. This server script conforms to a sketch that uses the AutoConnectUpdate class as an update client agent. 2 In the OTA platform, you can place the update server operated by the script in a location that is reachable from the ESP module on the network. updateserver.py [ -h ] [ --port PORT ] [ --bind IP_ADDRESS ] [ --catalog CATALOG ] [ --log LOG_LEVEL ] --help | -h Show help message and exit. --port | -p Specifies PORT number (Default: 8000) --bind | -b Specifies the IP address to which the update server binds. Usually, it is the host address of the update server. When multiple NICs configured, specify one of the IP addresses. (Default: HOST IP or 127.0.0.0) --catalog | -d Specifies the directory path on the update server that contains the binary sketch files. (Default: The current directory) --log | -l Specifies the level of logging output. It accepts the Logging Levels specified in the Python logging module. updateserver.py usage Python First, prepare a Python environment. It is also possible with a tiny single-board computer like the raspberry pi . Popular distributions such as Ubuntu for Linux include Python. You can easily set up a Python 2 or 3 environment. If you are using a Mac, you already have the Python 2 environment. macOS is equipped with Python 2.7 by default. In the case of Windows OS, it is necessary to install the Python environment intentionally. Please refer to the Python official page to install Python in your environment. Deploy the binary sketch files Use the Arduino IDE to output a binary file of sketches and deploy it 3 under the update server. The path which specifies for the --catalog option of updateServer.py is the path of the binary sketch files you deployed. Start updateserver.py For example, to start the update server on the host with IP address 172.16.1.10 using 8080 port 4 , execute the following command: python updateserver.py --port 8080 --bind 172 .16.1.10 --catalog bin --log debug In this example assumes that the binary sketch files are deployed under the path bin from the current directory. Limitations of the updateserver.py The updateserver.py script equips only the minimum facility because it assumes a private small OTA platform without identifying individual modules and version restrictions etc. To operate a larger OTA platform, it is necessary to identify the individual ESP module and to consider version control and security.","title":" Update server for the AutoConnectUpdate class"},{"location":"otaserver.html#http-contents-and-the-sequence-for-the-autoconnectupdate-class","text":"You can also equip an update server that works with the AutoConnectUpdate class. It can be improved more widely applicable by adding extensions such as version control and authentication to the updateserver.py script. It is necessary to understand the specifications related to HTTP data streams and sequences to enhance the update server that the AutoConnectUpdate class assumes. This section describes the contents of the HTTP data stream required by the communication with AutoConnectUpdate class. To work correctly with the AutoConnectUpdate class, the update server must meet two requirements: The update server notifies the catalog list of updatable binary files which stored in the update server to the client agent. 5 Send an updating binary file and MD5 hash to a client in response to URI request (HTTP GET). 6 Above requirements will be implemented on along the HTTP protocol. The AutoConnectUpdate class requests an update server to notify the client for a catalog list of binary sketch files using an HTTP URL query string. The specifications of the HTTP query and the contents of the catalog list to be returned are as follows:","title":" HTTP contents and the sequence for the AutoConnectUpdate class"},{"location":"otaserver.html#1-http-url-query-for-the-catalog-list-of-the-updatable","text":"[address]/_catalog?op=list&path=[path] address URL of the update server /_catalog Request path, it is fixed. op Operation command for the update server. Currently, only ' list ' occurs. path Path containing the updatable binary files on the update server.","title":"1. HTTP URL query for the catalog list of the updatable"},{"location":"otaserver.html#2-the-catalog-list-content","text":"The response (that is, the catalog list) to the above query from the server is the following specification in JSON format. { \"name\" : FILE_NAME , \"type\" : FILE_TYPE , \"date\" : FILE_TIMESTAMP_DATED , \"time\" : FILE_TIMESTAMP_TIMED , \"size\" : FILE_SIZE } name Binary sketch file name for update (String) type One of ' bin ', ' directory ' or ' file '. AutoConnect Update recognizes only file types of ' bin ' as update targets. (String) date File update date. AutoConnect v1.0.0 treats the file update date as an annotation and is not equip the version control feature yet. (String) time File update time. AutoConnect v1.0.0 treats the file update date as an annotation and is not equip the version control feature yet. (String) size File byte count (Numeric) The above JSON object is one entry. The actual catalog list is an array of this entry since it assumes that an update server will provide multiple update binary files in production. The update server should respond with the MIME type specified as application/json for the catalog list. 7","title":"2. The catalog list content"},{"location":"otaserver.html#3-the-binary-sketch-file-used-for-updating","text":"The AutoConnectUpdate class issues a HTTP GET request with the specified host address and URI. The update server responds by sending back a binary sketch file with the following header: Content-Type: application/octet-stream Content-Disposition: attachment; filename=\"BINARY_SKETCH_FILE_NAME\" Content-Length: LENGTH_OF_CONTENT x-MD5: HEXDIGEST The header x-MD5 is a 128-bit hash value (digest in hexadecimal) that represents the checksum of the binary sketch file for updates required for the ESP8266HTTPUpdate class. window.onload = function() { Gifffer(); }; You can scroll horizontally on the browser to see the timestamp and file size that the catalog list contains. \u21a9 The folders containing the script: For Python2: AUTOCONNECT_LIBRARY_PATH /src/updateserver/python2 For Python3: AUTOCONNECT_LIBRARY_PATH /src/updateserver/python3 \u21a9 Deploying the binary sketch file output by Arduino IDE is usually just copying to the folder for deployment. However, its folder must be accessible from the updateserver.py script. \u21a9 The port of the update server and the port used by the AutoConnectUpdate class must be the same. \u21a9 The client agent is an instance of the AutoConnectUpdate class. \u21a9 The client agent will send its URI request to the update server. \u21a9 It should be represented as Content-Type: application/json in the HTTP response header. \u21a9","title":"3. The binary sketch file used for updating"},{"location":"otaupdate.html","text":"OTA Updates with AutoConnect \u00b6 AutoConnect provides two type platforms for updating the binary sketch in the ESP8266 or ESP32 module via OTA. They correspond to the Web Browser Update and HTTP Server Update whiches mentioned in the ESP8266 Arduino Core documentation . The update behavior using a web browser as the client that supplies the binary sketch file for update follows the scenario assumed by the ESP8266 Arduino core. Therefore, the user sketch must meet the requirements described in the ESP8266 Arduino Core documentation, but you can easily embed the update feature that able to handle with the web browser by AutoConnect. All you need to do is that join the AutoConnectAux with embedded ESP8266HTTPUpdateServer 1 of the core library to AutoConnect. It is for the only the same network This method can apply only if the client browser and the ESP module belong to the same network segment. It cannot work correctly across networks. Another update method using an update server can be applied more broadly than using a web browser. This method can also update the ESP module over the Internet if you can secure the correct route and transparency between the ESP module and the update server. To configure this platform, you need to have an update server along with using the AutoConnectUpdate class in your sketch. Security Disclaimer The security level of the OTA update platform provided by AutoConnect is very weak. No guarantees as to the level of security for your application by the AutoConnect OTA Update is implied. The AutoConnect library provides an implementation of the HTTPUpdateServer class that ported from ESP8266HTTPUpdateServer class for ESP32 intention. It is contained the WebUpdate under the examples folder. \u21a9","title":"OTA Updates"},{"location":"otaupdate.html#ota-updates-with-autoconnect","text":"AutoConnect provides two type platforms for updating the binary sketch in the ESP8266 or ESP32 module via OTA. They correspond to the Web Browser Update and HTTP Server Update whiches mentioned in the ESP8266 Arduino Core documentation . The update behavior using a web browser as the client that supplies the binary sketch file for update follows the scenario assumed by the ESP8266 Arduino core. Therefore, the user sketch must meet the requirements described in the ESP8266 Arduino Core documentation, but you can easily embed the update feature that able to handle with the web browser by AutoConnect. All you need to do is that join the AutoConnectAux with embedded ESP8266HTTPUpdateServer 1 of the core library to AutoConnect. It is for the only the same network This method can apply only if the client browser and the ESP module belong to the same network segment. It cannot work correctly across networks. Another update method using an update server can be applied more broadly than using a web browser. This method can also update the ESP module over the Internet if you can secure the correct route and transparency between the ESP module and the update server. To configure this platform, you need to have an update server along with using the AutoConnectUpdate class in your sketch. Security Disclaimer The security level of the OTA update platform provided by AutoConnect is very weak. No guarantees as to the level of security for your application by the AutoConnect OTA Update is implied. The AutoConnect library provides an implementation of the HTTPUpdateServer class that ported from ESP8266HTTPUpdateServer class for ESP32 intention. It is contained the WebUpdate under the examples folder. \u21a9","title":"OTA Updates with AutoConnect"},{"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 the custom Web pages 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\" : \"MQTT broker settings \" , \"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\" : \"Parameters saved as: \" , \"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, \"MQTT broker settings \" , \"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, \"Parameters available as: \" , \"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 the custom Web pages 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\" : \"MQTT broker settings \" , \"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\" : \"Parameters saved as: \" , \"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, \"MQTT broker settings \" , \"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, \"Parameters available as: \" , \"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"}]}
\ No newline at end of file
+{"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 the flash 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 pages ENHANCED w/v0.9.7 \u00b6 You can easily add your owned web pages 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. Quick and easy to equip the OTA update feature ENHANCED w/v1.0.0 \u00b6 You can quickly and easily equip the OTA update feature to your sketch and also you can operate the firmware update process via OTA from AutoConnect menu. 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 . Stable 2.4.0 or higher required and 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. Stable 1.0.1 or required and 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. Arduino core for ESP32 1.0.3 or later For ESP32, AutoConnect v1.0.0 later is required for arduino-esp32 1.0.3 or later. 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.3 later . 1 Additional library (Optional) By adding the ArduinoJson library, AutoConnect will be able to handle the custom Web pages described with JSON. Since AutoConnect v0.9.7 you can insert user-owned web pages 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 is required to use this feature. 2 AutoConnect can work with ArduinoJson both version 5 and version 6 . 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.8, PageBuilder v1.3.3 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 the flash 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-pages-enhanced-wv097","text":"You can easily add your owned web pages 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 pages ENHANCED w/v0.9.7"},{"location":"index.html#quick-and-easy-to-equip-the-ota-update-feature-enhanced-wv100","text":"You can quickly and easily equip the OTA update feature to your sketch and also you can operate the firmware update process via OTA from AutoConnect menu.","title":" Quick and easy to equip the OTA update feature ENHANCED w/v1.0.0"},{"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 . Stable 2.4.0 or higher required and 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. Stable 1.0.1 or required and 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. Arduino core for ESP32 1.0.3 or later For ESP32, AutoConnect v1.0.0 later is required for arduino-esp32 1.0.3 or later. 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.3 later . 1 Additional library (Optional) By adding the ArduinoJson library, AutoConnect will be able to handle the custom Web pages described with JSON. Since AutoConnect v0.9.7 you can insert user-owned web pages 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 is required to use this feature. 2 AutoConnect can work with ArduinoJson both version 5 and version 6 .","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.8, PageBuilder v1.3.3 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 AutoConnectFile : File uploader AutoConnectInput : Labeled text input box AutoConnectRadio : Labeled radio button AutoConnectSelect : Selection list AutoConnectStyle : Custom CSS code AutoConnectSubmit : Submit button AutoConnectText : Style attributed text Layout on a custom Web page \u00b6 AutoConnect will not actively be involved in the layout of custom Web pages generated from AutoConnectElements. However, each element has an attribute to arrange placement on a custom web page by horizontally or vertically. Custom CSS for a custom Web page \u00b6 All custom Web page styles are limited to the built-in unique CSS embedded in the library code. Direct modification of the CSS affects AutoConnect behavior. You can use dedicated elements to relatively safely modify the style of your custom Web page. The AutoConnectStyle will insert the raw CSS code into the style block in HTML of the custom Web page. Form and AutoConnectElements \u00b6 All AutoConnectElements placed on custom web pages will be contained into one form. Its form is fixed and created by AutoConnect. The form value (usually the text or checkbox you entered) is sent by AutoConnectSubmit using the POST method with HTTP. The post method sends the actual form data which is a query string whose contents are the name and value of AutoConnectElements. You can retrieve the value for the parameter with the sketch from the query string with ESP8266WebServer::arg function or PageArgument class of the 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\", \" ~
tag. The default interpretation of the post value is specific to each element. AutoConnectElements Default interpretation of the post value AutoConnectElement AC_Tag_None AutoConnectButton AC_Tag_None AutoConnectCheckBox AC_Tag_BR AutoConnectFile AC_Tag_BR AutoConnectInput AC_Tag_BR AutoConnectRadio AC_Tag_BR AutoConnectSelect AC_Tag_BR AutoConnectSubmit AC_Tag_None AutoConnectText AC_Tag_None 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 AutoConnectFile: AC_File AutoConnectInput: AC_Input AutoConnectRadio: AC_Radio AutoConnectSelect: AC_Select AutoConnectStyle: AC_Style 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++. Or, you can be coding the sketch more easily with using the as function. AutoConnectAux customPage; AutoConnectElementVT & elements = customPage.getElements(); for (AutoConnectElement & elm : elements) { if (elm.type() == AC_Text) { AutoConnectText & text = customPage[elm.name].as < AutoConnectText > (); text.style = \"color:gray;\" ; // Or, it is also possible to write the code further reduced as follows. // customPage[elm.name].as().style = \"color:gray;\"; } } 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, const ACPosterior_t post) 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\"( )\" ; ACInput(Text1, \"Text1\" ); ACInput(Text2, \"Text2\" ); ACButton(Button, \"COPY\" , \"CopyText()\" ); ACElement(TextCopy, scCopyText); post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None . 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, const ACPosition_t labelPosition, const ACPosterior_t post) 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 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. labelPosition \u00b6 The position of the label belonging to the checkbox can be specified around the element. The labelPosition specifies the position of the label to generate with ACPostion_t enumeration value. The default value is AC_Behind . AC_Infront : Place a label in front of the check box. AC_Behind : Place a label behind the check box. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR . AutoConnectFile \u00b6 AutoConnectFile generates an HTML < input type = \"file\" > tag and a < label > tag. AutoConnectFile enables file upload from the client through the web browser to ESP8266/ESP32 module. You can select the flash in the module, external SD device or any output destination as the storage of the uploaded file. Sample AutoConnectFile file(\"file\", \"\", \"Upload:\", AC_File_FS) On the page: Constructor \u00b6 AutoConnectFile( const char * name, const char * value, const char * label, const ACFile_t store, const ACPosterior_t post) name \u00b6 It is the name of the AutoConnectFile element and matches the name attribute of the input tag. It also becomes the parameter name of the query string when submitted. value \u00b6 File name to be upload. The value contains the value entered by the client browser to the < input type = \"file\" > tag and is read-only. Even If you give a value to the constructor, it does not affect as an initial value like a default file name. 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. store \u00b6 Specifies the destination to save the uploaded file. The destination can be specified the following values \u200b\u200bin the ACFile_t enumeration type. AC_File_FS : Save as the SPIFFS file in flash of ESP8266/ESP32 module. AC_File_SD : Save to an external SD device connected to ESP8266/ESP32 module. AC_File_Extern : Pass the content of the uploaded file to the uploader which is declared by the sketch individually. Its uploader must inherit AutoConnectUploadHandler class and implements _open , _write and _close function. Built-in uploader is ready. AutoConnect already equips the built-in uploader for saving to the SPIFFS as AC_File_FS and the external SD as AC_File_SD. It is already implemented inside AutoConnect and will store uploaded file automatically. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR . 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, const ACPosterior_t post) 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. To check whether the entered value matches the pattern, use the isValid function. 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: (([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]) Host name of Internet: (([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]) Date (MM/DD/YYYY) as range 1900-2099: (0[1-9]|1[012])[- \\/.](0[1-9]|[12][0-9]|3[01])[- \\/.](19|20)\\d\\d 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. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR . 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, const ACPosterior_t post) 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. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR . AutoConnectStyle \u00b6 AutoConnectStyle inserts the string given by the value into the style block of a custom Web page as it is raw. The validity as CSS will not be checked AutoConnectStyle does not do syntax checking and semantic analysis of value. Insert the specified string into the style block of the custom Web page without processing it. Therefore, specifying the wrong CSS will modulate the behavior of the custom Web page. Constructor \u00b6 AutoConnectStyle( const char * name, const char * value) name \u00b6 It is the name of the AutoConnectStyle element and is useful only to access this element from the sketch. It does not affect the generated HTML code. value \u00b6 The raw CSS code. It is not necessary to write tags. 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, const uint8_t selected, const ACPosterior_t post) 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. selected \u00b6 A selected is an optional value. Specifies that an option should be pre-selected when the page loads. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR . 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, const ACPosterior_t post) 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 post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None . 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, const char * format, const ACPosterior_t post) 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. format \u00b6 A format is a pointer to a null-terminated multi byte string specifying how to interpret the value. It specifies the conversion format when outputting values. The format string conforms to C-style printf library functions, but depends on the Espressif's SDK implementation. The conversion specification is valid only in %s format. (Left and Right justification, width are also valid.) post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None . 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 ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACButton ( name [ , value ] [ , action ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACCheckbox ( name [ , value ] [ , label ] [ , true | false ] [ , AC_Infront | AC_Behind ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACFile ( name [ , value ] [ , label ] [ , AC_File_FS | AC_File_SD | AC_File_Extern ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACInput ( name [ , value ] [ , label ] [ , pattern ] [ , placeholder ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACRadio ( name [ , values ] [ , label ] [ , AC_Horizontal | AC_Vertical ] [ , checked ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACSelect ( name [ , options ] [ , label ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACStyle ( name [ , value ] ) ACSubmit ( name [ , value ] [ , uri ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACText ( name [ , value ] [ , style ] [ , format ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) 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 AutoConnectFile : File uploader AutoConnectInput : Labeled text input box AutoConnectRadio : Labeled radio button AutoConnectSelect : Selection list AutoConnectStyle : Custom CSS code 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":"AutoConnect will not actively be involved in the layout of custom Web pages generated from AutoConnectElements. However, each element has an attribute to arrange placement on a custom web page by horizontally or vertically.","title":"Layout on a custom Web page"},{"location":"acelements.html#custom-css-for-a-custom-web-page","text":"All custom Web page styles are limited to the built-in unique CSS embedded in the library code. Direct modification of the CSS affects AutoConnect behavior. You can use dedicated elements to relatively safely modify the style of your custom Web page. The AutoConnectStyle will insert the raw CSS code into the style block in HTML of the custom Web page.","title":"Custom CSS for a custom Web page"},{"location":"acelements.html#form-and-autoconnectelements","text":"All AutoConnectElements placed on custom web pages will be contained into one form. Its form is fixed and created by AutoConnect. The form value (usually the text or checkbox you entered) is sent by AutoConnectSubmit using the POST method with HTTP. The post method sends the actual form data which is a query string whose contents are the name and value of AutoConnectElements. You can retrieve the value for the parameter with the sketch from the query string with ESP8266WebServer::arg function or PageArgument class of the 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\", \" ~
tag. The default interpretation of the post value is specific to each element. AutoConnectElements Default interpretation of the post value AutoConnectElement AC_Tag_None AutoConnectButton AC_Tag_None AutoConnectCheckBox AC_Tag_BR AutoConnectFile AC_Tag_BR AutoConnectInput AC_Tag_BR AutoConnectRadio AC_Tag_BR AutoConnectSelect AC_Tag_BR AutoConnectSubmit AC_Tag_None AutoConnectText AC_Tag_None","title":" post"},{"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 AutoConnectFile: AC_File AutoConnectInput: AC_Input AutoConnectRadio: AC_Radio AutoConnectSelect: AC_Select AutoConnectStyle: AC_Style 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++. Or, you can be coding the sketch more easily with using the as function. AutoConnectAux customPage; AutoConnectElementVT & elements = customPage.getElements(); for (AutoConnectElement & elm : elements) { if (elm.type() == AC_Text) { AutoConnectText & text = customPage[elm.name].as < AutoConnectText > (); text.style = \"color:gray;\" ; // Or, it is also possible to write the code further reduced as follows. // customPage[elm.name].as().style = \"color:gray;\"; } }","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, const ACPosterior_t post)","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\"( )\" ; ACInput(Text1, \"Text1\" ); ACInput(Text2, \"Text2\" ); ACButton(Button, \"COPY\" , \"CopyText()\" ); ACElement(TextCopy, scCopyText);","title":" action"},{"location":"acelements.html#post_1","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None .","title":" post"},{"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, const ACPosition_t labelPosition, const ACPosterior_t post)","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 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#labelposition","text":"The position of the label belonging to the checkbox can be specified around the element. The labelPosition specifies the position of the label to generate with ACPostion_t enumeration value. The default value is AC_Behind . AC_Infront : Place a label in front of the check box. AC_Behind : Place a label behind the check box.","title":" labelPosition"},{"location":"acelements.html#post_2","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR .","title":" post"},{"location":"acelements.html#autoconnectfile","text":"AutoConnectFile generates an HTML < input type = \"file\" > tag and a < label > tag. AutoConnectFile enables file upload from the client through the web browser to ESP8266/ESP32 module. You can select the flash in the module, external SD device or any output destination as the storage of the uploaded file. Sample AutoConnectFile file(\"file\", \"\", \"Upload:\", AC_File_FS) On the page:","title":"AutoConnectFile"},{"location":"acelements.html#constructor_3","text":"AutoConnectFile( const char * name, const char * value, const char * label, const ACFile_t store, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_3","text":"It is the name of the AutoConnectFile 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_3","text":"File name to be upload. The value contains the value entered by the client browser to the < input type = \"file\" > tag and is read-only. Even If you give a value to the constructor, it does not affect as an initial value like a default file name.","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#store","text":"Specifies the destination to save the uploaded file. The destination can be specified the following values \u200b\u200bin the ACFile_t enumeration type. AC_File_FS : Save as the SPIFFS file in flash of ESP8266/ESP32 module. AC_File_SD : Save to an external SD device connected to ESP8266/ESP32 module. AC_File_Extern : Pass the content of the uploaded file to the uploader which is declared by the sketch individually. Its uploader must inherit AutoConnectUploadHandler class and implements _open , _write and _close function. Built-in uploader is ready. AutoConnect already equips the built-in uploader for saving to the SPIFFS as AC_File_FS and the external SD as AC_File_SD. It is already implemented inside AutoConnect and will store uploaded file automatically.","title":" store"},{"location":"acelements.html#post_3","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR .","title":" post"},{"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_4","text":"AutoConnectInput( const char * name, const char * value, const char * label, const char * pattern, const char * placeholder, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_4","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_4","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_2","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. To check whether the entered value matches the pattern, use the isValid function. 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: (([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]) Host name of Internet: (([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]) Date (MM/DD/YYYY) as range 1900-2099: (0[1-9]|1[012])[- \\/.](0[1-9]|[12][0-9]|3[01])[- \\/.](19|20)\\d\\d 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#post_4","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR .","title":" post"},{"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_5","text":"AutoConnectRadio( const char * name, std :: vector < String > const & values, const char * label, const ACArrange_t order, const uint8_t checked, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_5","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_3","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#post_5","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR .","title":" post"},{"location":"acelements.html#autoconnectstyle","text":"AutoConnectStyle inserts the string given by the value into the style block of a custom Web page as it is raw. The validity as CSS will not be checked AutoConnectStyle does not do syntax checking and semantic analysis of value. Insert the specified string into the style block of the custom Web page without processing it. Therefore, specifying the wrong CSS will modulate the behavior of the custom Web page.","title":"AutoConnectStyle"},{"location":"acelements.html#constructor_6","text":"AutoConnectStyle( const char * name, const char * value)","title":" Constructor"},{"location":"acelements.html#name_6","text":"It is the name of the AutoConnectStyle element and is useful only to access this element from the sketch. It does not affect the generated HTML code.","title":" name"},{"location":"acelements.html#value_5","text":"The raw CSS code. It is not necessary to write tags.","title":" value"},{"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_7","text":"AutoConnectSelect( const char * name, std :: vector < String > const & options, const char * label, const uint8_t selected, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_7","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_4","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#selected","text":"A selected is an optional value. Specifies that an option should be pre-selected when the page loads.","title":" selected"},{"location":"acelements.html#post_6","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR .","title":" post"},{"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_8","text":"AutoConnectSubmit( const char * name, const char * value, const char * uri, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_8","text":"It is the name of the AutoConnectSubmit element and matches the name attribute of the input tag.","title":" name"},{"location":"acelements.html#value_6","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#post_7","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None .","title":" post"},{"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_9","text":"AutoConnectText( const char * name, const char * value, const char * style, const char * format, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_9","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_7","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#format","text":"A format is a pointer to a null-terminated multi byte string specifying how to interpret the value. It specifies the conversion format when outputting values. The format string conforms to C-style printf library functions, but depends on the Espressif's SDK implementation. The conversion specification is valid only in %s format. (Left and Right justification, width are also valid.)","title":" format"},{"location":"acelements.html#post_8","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None .","title":" post"},{"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 ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACButton ( name [ , value ] [ , action ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACCheckbox ( name [ , value ] [ , label ] [ , true | false ] [ , AC_Infront | AC_Behind ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACFile ( name [ , value ] [ , label ] [ , AC_File_FS | AC_File_SD | AC_File_Extern ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACInput ( name [ , value ] [ , label ] [ , pattern ] [ , placeholder ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACRadio ( name [ , values ] [ , label ] [ , AC_Horizontal | AC_Vertical ] [ , checked ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACSelect ( name [ , options ] [ , label ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACStyle ( name [ , value ] ) ACSubmit ( name [ , value ] [ , uri ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) ACText ( name [ , value ] [ , style ] [ , format ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P ] ) 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":"Page, Container, Component \u00b6 AutoConnectAux is the container for a custom Web page, AutoConnectElement is the component of a page. AutoConnectElements must be contained in AutoConnectAux object. (ie. they are the elements displayed on the custom Web page.) Then AutoConnect makes an AutoConnectAux to a page. 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 document. In either method, it is common to use the function of AutoConnectAux to access an element with a sketch. Handing AutoConnectElements with the sketches \u00b6 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(AutoConnectElement & addon) void AutoConnectAux :: add(AutoConnectElementVT addons) The add function adds the specified AutoConnectElement to AutoConnectAux. The AutoConnectElementVT type is the std::vector of the reference wrapper to AutoConnectElements, and you can add these elements in bulk by using the list initialization with the sketch. typedef std :: vector < std :: reference_wrapper < AutoConnectElement >> AutoConnectElementVT; AutoConnectElements contained in AutoConnectAux object are uniquely identified by 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, AutoConnectButton button addition will invalid because hello with the same name already exists as AutoConnectText. 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) T & AutoConnectAux :: getElement < T > ( 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 and specify its type to an argument of the getElement. A type of can be specified as follows. AutoConnectButton & AutoConnectAux :: getElement < AutoConnectButton > ( const String & name) AutoConnectCheckbox & AutoConnectAux :: getElement < AutoConnectCheckbox > ( const String & name) AutoConnectElement & AutoConnectAux :: getElement < AutoConnectElement > ( const String & name) AutoConnectFile & AutoConnectAux :: getElement < AutoConnectFile > ( const String & name) AutoConnectInput & AutoConnectAux :: getElement < AutoConnectInput > ( const String & name) AutoConnectRadio & AutoConnectAux :: getElement < AutoConnectRadio > ( const String & name) AutoConnectSelect & AutoConnectAux :: getElement < AutoConnectSelect > ( const String & name) AutoConnectSubmit & AutoConnectAux :: getElement < AutoConnectSubmit > ( const String & name) AutoConnectText & AutoConnectAux :: getElement < AutoConnectText > ( const String & name) 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 \\\" }]}\" ); AutoConnect portal; portal.load(auxJson); AutoConnectAux * aux = portal.aux( \"/page1\" ); // Identify the AutoConnectAux instance with uri AutoConnectText & text = aux -> getElement < AutoConnectText > ( \"caption\" ); // Cast to real type and access members Serial.println(text.value); You can also use the operator [] of AutoConnectAux as another way to get the desired element. An operator [] is a shortcut for getElement function with the reference casting and makes simplify the sketch code and treats like an array with the elements placed on a custom Web page. Its argument is the name of the element to be acquired similarly to getElement function. In the sketch, by combining the AutoConnectElement::as function with the operator [] , you can access the AutoConnectElements reference according to its actual type. For example, the following sketch code returns the same as a reference of AutoConnectText element as the caption . AutoConnect portal; portal.load(auxJson); AutoConnectAux & aux = * portal.aux( \"/page1\" ); AutoConnectText & text1 = aux.getElement < AutoConnectElement > ( \"caption\" ); AutoConnectText & text2 = aux[ \"caption\" ].as < AutoConnectText > (); Need cast to convert to the actual type An operator [] returns a reference of an AutoConnectElement. It is necessary to convert the type according to the actual element type with AutoConnectElement::as function. AutoConnectButton & AutoConnectElement :: as < AutoConnectButton > () AutoConnectCheckbox & AutoConnectElement :: as < AutoConnectCheckbox > () AutoConnectElement & AutoConnectElement :: as < AutoConnectElement > () AutoConnectFile & AutoConnectElement :: as < AutoConnectFile > () AutoConnectInput & AutoConnectElement :: as < AutoConnectInput > () AutoConnectRadio & AutoConnectElement :: as < AutoConnectRadio > () AutoConnectSelect & AutoConnectElement :: as < AutoConnectSelect > () AutoConnectSubmit & AutoConnectElement :: as < AutoConnectSubmit > () AutoConnectText & AutoConnectElement :: as < AutoConnectText > () To get all the AutoConnectElements in 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 & AutoConnectAux :: getElements( void ) Enable AutoConnectElements during the sketch execution \u00b6 AutoConnectElemets have an enable attribute to activate its own HTML generation. Sketches can change the HTMLization of their elements dynamically by setting or resetting the enable value. An element whose the enable attribute is true will generate itself HTML and place on the custom Web page. And conversely, it will not generate the HTML when the value is false. For example, to enable the submit button only when the ESP module is connected to the access point in STA mode, you can sketch the following: #include #include #include static const char AUX[] PROGMEM = R( \" { \"name\" : \"aux\" , \"uri\" : \"/aux\" , \"menu\" : true, \"element\" : [ { \"name\" : \"input\" , \"type\" : \"ACInput\" , \"label\" : \"Input\" }, { \"name\" : \"send\" , \"type\" : \"ACSubmit\" , \"uri\" : \"/send\" } ] } \"); AutoConnect portal; AutoConnectAux page; String onPage (AutoConectAux & aux, PageArgument & args) { AutoConnectSubmit & send = aux[ \"send\" ].as < AutoConnectSubmit > (); if (WiFi.isConnected()) send.enable = (WiFi.getMode() == WIFI_STA); else send.enable = false; return String(); } void setup () { page.load(AUX); page.on(onPage); portal.join(page); portal.begin(); } void loop () { portal.handleClient(); } Desirable to set or reset the enable attribute in the page handler The enable attribute can be set at any time during the sketch execution. The page handler with the AC_EXIT_AHEAD option is sure to handle it. Loading & saving AutoConnectElements with JSON \u00b6 AutoConnect supports reading the custom Web page definitions written in JSON and also supports loading and saving of AutoConnectAux or 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 section JSON document structure for AutoConnectAux . 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 AutoConnectAux or 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 } ] Above JSON document can be loaded as it is into a custom Web page using the loadElement function. The loadElement function also loads the value of the element, so the saved value can be restored on the custom Web page. 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 #include #include 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 = \"\" + feel + String( \" and a bold world!
\" ); 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 #include #include 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 an uri string of the AutoConnectAux that triggered this handler. AutoConnectAux * hello = portal.aux(portal.where()); AutoConnectInput & feels = hello -> 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 an uri string of 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/WebServer for 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( \"This text has been added.
\" ); } 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(); Transfer of input values \u200b\u200bacross pages \u00b6 Since v1.0.0, AutoConnect supports a new attribute with each element that allows automatic transfer of input values across pages without sketching. AutoConnect will copy the input value of the elements declared as global to the same-named global elements on a different custom Web pages at the page transition timing. The global attribute will be useful for echoing input values back to another custom Web pages. This copy operation can be performed between different types. (eg., copy value from AutoConnectInput to AutoConnectText) The following example reflects the input value of PAGE1 to the AutoConnectText field of PAGE2 without sketch code. static const char PAGE1[] PROGMEM = R\"( { \"title\": \"PAGE1\", \"uri\": \"/page1\", \"menu\": true, \"element\": [ { \"name\": \"input1\", \"type\": \"ACInput\", \"global\": true }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"OK\", \"uri\": \"/page2\" } ] } )\" ; static const char PAGE2[] PROGMEM = R\"( { \"title\": \"PAGE2\", \"uri\": \"/page2\", \"menu\": false, \"element\": [ { \"name\": \"input1\", \"type\": \"ACText\", \"global\": true } ] } )\" ; AutoConnect portal; AutoConnectAux page1; AutoConnectAux page2; void setup () { page1.load(PAGE1); page2.load(PAGE2); portal.join( { page1, page2 }); portal.begin(); } void loop () { portal.handleClient(); } The value entered in input1 declared in PAGE1 is reflected in input1 of PAGE2 as an AutoConnectText value even if there is no sketch code to transfer it to PAGE2. It's shown as like: Copy only for same-named and the global The input value will be copied only if the global attribute of the destination element is true. If an element with the same name is declared non-global, the value is not copied. Retrieve the values with WebServer::on handler \u00b6 ESP8266WebServer class and the WebServer class assume that the implementation of the ReqestHandler class contained in the WebServer library will handle the URL requests. Usually, it is sketch code registered by ESP8266WebServer::on function. When a page transition from a custom Web page created by AutoConnectAux to a handler registered with ESP2866WebServer::on function, a little trick is needed to retrieve the values of AutoConnectElements. (i.e. the URI of the ESP8266WebServer::on handler is specified in the uri attribute of AutoConnectSubmit ) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler coded with the sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the AutoConnectAux::fetchElement function for value processing with the on-page handler. The following sketch is an example of extracting values inputted on a custom web page with an on-page handler and then processing it. ESP8266WebServer server; AutoConnect portal (server); AutoConnectAux Input; const static char InputPage[] PROGMEM = R\"r( { \"title\": \"Input\", \"uri\": \"/input\", \"menu\": true, \"element\": [ { \"name\": \"input\", \"type\": \"ACInput\", \"label\": \"INPUT\" }, { \"name\": \"save\", \"type\": \"ACSubmit\", \"value\": \"SAVE\", \"uri\": \"/\" } ] } )r\" ; // An on-page handler for '/' access void onRoot () { String content = \"\" \"INPUT: {{value}}
\" \"\" ; Input.fetchElement(); // Preliminary acquisition // For this steps to work, need to call fetchElement function beforehand. String value = Input[ \"input\" ].value; content.replace( \"{{value}}\" , value); server.send( 200 , \"text/html\" , content); } void setup () { Input.load(InputPage); portal.join(Input); server.on( \"/\" , onRoot); // Register the on-page handler portal.begin(); } void loop () { portal.handleClient(); } 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 Caption (ie. \"Hello, world\") as AutoConnectText value. External JSON document for the below sketch to modify the text style. { \"name\" : \"Caption\" , \"type\" : \"ACText\" , \"style\" : \"text-align:center;font-size:24px;font-family:'Impact','Futura',sans-serif;color:tomato;\" } The sketch (a part of code), load above JSON. 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(); } It's shown as like: 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 with 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])$\" } ] } It's shown as like: If you are not familiar with regular expressions, you may feel that description very strange. Matter of fact, it's a strange description for those who are unfamiliar with the formal languages. If your regular expression can not interpret the intended syntax and semantics, you can use an online tester. The regex101 is an exceptional online tool for testing and debugging regular expressions. Input data validation \u00b6 The pattern attribute of AutoConnectInput only determines the data consistency on the web browser based on the given regular expression. In order to guarantee the validity of input data, it is necessary to verify it before actually using it. You can validate input data from AutoConnectInput using the isValid function before actually processing it. The isValid function determines whether the value currently stored in AutoConnectInput matches the pattern . You can also use the AutoConnectAux::isValid function to verify the data input to all AutoConnectInput elements on the custom Web page at once. The two sketches below show the difference between using AutoConnectInput::isValid and using AutoConnectAux::isValid . In both cases, it verifies the input data of the same AutoConnectInput, but in the case of using AutoConnectAux::isValid, the amount of sketch coding is small. A common declaration const char PAGE[] PROGMEM = R\"( { \"title\": \"Custom page\", \"uri\": \"/page\", \"menu\": true, \"element\": [ { \"name\": \"input1\", \"type\": \"ACInput\", \"pattern\": \"^[0-9]{4}$\" }, { \"name\": \"input2\", \"type\": \"ACInput\", \"pattern\": \"^[a-zA-Z]{4}$\" } ] } )\" ; AutoConnectAux page; page.load(PAGE); Using AutoConnectInput::isValid AutoConnectInput & input1 = page[ \"input1\" ].as < AutoConnectInput > (); AutoConnectInput & input2 = page[ \"input2\" ].as < AutoConnectInput > (); if ( ! input1.isValid() || ! input2.isValid()) Serial.println( \"Validation error\" ); Using AutoConnectAux::isValid if ( ! page.isValid()) Serial.println( \"Validation error\" ); Convert data to actually type \u00b6 The values in the AutoConnectElements field of the custom Web page are all typed as String. A sketch needs to be converted to an actual data type if the data type required for sketch processing is not a String type. For the typical data type conversion method, refer to section Tips for data conversion . Transitions of the custom Web pages \u00b6 Scope & Lifetime of AutoConnectAux \u00b6 AutoConnectAux and AutoConnectElements must live while the custom Web pages are available. 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 #include #include 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. Limitations \u00b6 The custom Web pages handler has the following limitations. 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 . Can not use the element named SUBMIT . You can not use 'SUBMIT' as the element name of AutoConnectElements in a custom Web page that declares the AutoConnectSubmit element. (Case sensitive ignored) AutoConnect does not rely on the input type=submit element for the form submission and uses HTML form element submit function instead. So, the submit function will fail if there is an element named 'submit' in the form. Do not handle for the same page Do not duplicate AutoConnect::on with ESP8266WebServer::on (also WebServer::on) for the same custom web page. window.onload = function() { Gifffer(); }; The valid scope of the name is within an AutoConnectAux. \u21a9 Regular expression specification as a pattern of AutoConnectInput is JavaScript compliant . \u21a9","title":"Handling the custom Web pages"},{"location":"achandling.html#page-container-component","text":"AutoConnectAux is the container for a custom Web page, AutoConnectElement is the component of a page. AutoConnectElements must be contained in AutoConnectAux object. (ie. they are the elements displayed on the custom Web page.) Then AutoConnect makes an AutoConnectAux to a page. 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 document. In either method, it is common to use the function of AutoConnectAux to access an element with a sketch.","title":"Page, Container, Component"},{"location":"achandling.html#handing-autoconnectelements-with-the-sketches","text":"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(AutoConnectElement & addon) void AutoConnectAux :: add(AutoConnectElementVT addons) The add function adds the specified AutoConnectElement to AutoConnectAux. The AutoConnectElementVT type is the std::vector of the reference wrapper to AutoConnectElements, and you can add these elements in bulk by using the list initialization with the sketch. typedef std :: vector < std :: reference_wrapper < AutoConnectElement >> AutoConnectElementVT; AutoConnectElements contained in AutoConnectAux object are uniquely identified by 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, AutoConnectButton button addition will invalid because hello with the same name already exists as AutoConnectText. 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) T & AutoConnectAux :: getElement < T > ( 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 and specify its type to an argument of the getElement. A type of can be specified as follows. AutoConnectButton & AutoConnectAux :: getElement < AutoConnectButton > ( const String & name) AutoConnectCheckbox & AutoConnectAux :: getElement < AutoConnectCheckbox > ( const String & name) AutoConnectElement & AutoConnectAux :: getElement < AutoConnectElement > ( const String & name) AutoConnectFile & AutoConnectAux :: getElement < AutoConnectFile > ( const String & name) AutoConnectInput & AutoConnectAux :: getElement < AutoConnectInput > ( const String & name) AutoConnectRadio & AutoConnectAux :: getElement < AutoConnectRadio > ( const String & name) AutoConnectSelect & AutoConnectAux :: getElement < AutoConnectSelect > ( const String & name) AutoConnectSubmit & AutoConnectAux :: getElement < AutoConnectSubmit > ( const String & name) AutoConnectText & AutoConnectAux :: getElement < AutoConnectText > ( const String & name) 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 \\\" }]}\" ); AutoConnect portal; portal.load(auxJson); AutoConnectAux * aux = portal.aux( \"/page1\" ); // Identify the AutoConnectAux instance with uri AutoConnectText & text = aux -> getElement < AutoConnectText > ( \"caption\" ); // Cast to real type and access members Serial.println(text.value); You can also use the operator [] of AutoConnectAux as another way to get the desired element. An operator [] is a shortcut for getElement function with the reference casting and makes simplify the sketch code and treats like an array with the elements placed on a custom Web page. Its argument is the name of the element to be acquired similarly to getElement function. In the sketch, by combining the AutoConnectElement::as function with the operator [] , you can access the AutoConnectElements reference according to its actual type. For example, the following sketch code returns the same as a reference of AutoConnectText element as the caption . AutoConnect portal; portal.load(auxJson); AutoConnectAux & aux = * portal.aux( \"/page1\" ); AutoConnectText & text1 = aux.getElement < AutoConnectElement > ( \"caption\" ); AutoConnectText & text2 = aux[ \"caption\" ].as < AutoConnectText > (); Need cast to convert to the actual type An operator [] returns a reference of an AutoConnectElement. It is necessary to convert the type according to the actual element type with AutoConnectElement::as function. AutoConnectButton & AutoConnectElement :: as < AutoConnectButton > () AutoConnectCheckbox & AutoConnectElement :: as < AutoConnectCheckbox > () AutoConnectElement & AutoConnectElement :: as < AutoConnectElement > () AutoConnectFile & AutoConnectElement :: as < AutoConnectFile > () AutoConnectInput & AutoConnectElement :: as < AutoConnectInput > () AutoConnectRadio & AutoConnectElement :: as < AutoConnectRadio > () AutoConnectSelect & AutoConnectElement :: as < AutoConnectSelect > () AutoConnectSubmit & AutoConnectElement :: as < AutoConnectSubmit > () AutoConnectText & AutoConnectElement :: as < AutoConnectText > () To get all the AutoConnectElements in 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 & AutoConnectAux :: getElements( void )","title":" Get AutoConnectElement from the AutoConnectAux"},{"location":"achandling.html#enable-autoconnectelements-during-the-sketch-execution","text":"AutoConnectElemets have an enable attribute to activate its own HTML generation. Sketches can change the HTMLization of their elements dynamically by setting or resetting the enable value. An element whose the enable attribute is true will generate itself HTML and place on the custom Web page. And conversely, it will not generate the HTML when the value is false. For example, to enable the submit button only when the ESP module is connected to the access point in STA mode, you can sketch the following: #include #include #include static const char AUX[] PROGMEM = R( \" { \"name\" : \"aux\" , \"uri\" : \"/aux\" , \"menu\" : true, \"element\" : [ { \"name\" : \"input\" , \"type\" : \"ACInput\" , \"label\" : \"Input\" }, { \"name\" : \"send\" , \"type\" : \"ACSubmit\" , \"uri\" : \"/send\" } ] } \"); AutoConnect portal; AutoConnectAux page; String onPage (AutoConectAux & aux, PageArgument & args) { AutoConnectSubmit & send = aux[ \"send\" ].as < AutoConnectSubmit > (); if (WiFi.isConnected()) send.enable = (WiFi.getMode() == WIFI_STA); else send.enable = false; return String(); } void setup () { page.load(AUX); page.on(onPage); portal.join(page); portal.begin(); } void loop () { portal.handleClient(); } Desirable to set or reset the enable attribute in the page handler The enable attribute can be set at any time during the sketch execution. The page handler with the AC_EXIT_AHEAD option is sure to handle it.","title":" Enable AutoConnectElements during the sketch execution"},{"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 AutoConnectAux or 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 section JSON document structure for AutoConnectAux . 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 AutoConnectAux or 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 } ] Above JSON document can be loaded as it is into a custom Web page using the loadElement function. The loadElement function also loads the value of the element, so the saved value can be restored on the custom Web page.","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 #include #include 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 = \"\" + feel + String( \" and a bold world!
\" ); 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 #include #include 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 an uri string of the AutoConnectAux that triggered this handler. AutoConnectAux * hello = portal.aux(portal.where()); AutoConnectInput & feels = hello -> 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 an uri string of 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/WebServer for 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( \"This text has been added.
\" ); }","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#transfer-of-input-values-across-pages","text":"Since v1.0.0, AutoConnect supports a new attribute with each element that allows automatic transfer of input values across pages without sketching. AutoConnect will copy the input value of the elements declared as global to the same-named global elements on a different custom Web pages at the page transition timing. The global attribute will be useful for echoing input values back to another custom Web pages. This copy operation can be performed between different types. (eg., copy value from AutoConnectInput to AutoConnectText) The following example reflects the input value of PAGE1 to the AutoConnectText field of PAGE2 without sketch code. static const char PAGE1[] PROGMEM = R\"( { \"title\": \"PAGE1\", \"uri\": \"/page1\", \"menu\": true, \"element\": [ { \"name\": \"input1\", \"type\": \"ACInput\", \"global\": true }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"OK\", \"uri\": \"/page2\" } ] } )\" ; static const char PAGE2[] PROGMEM = R\"( { \"title\": \"PAGE2\", \"uri\": \"/page2\", \"menu\": false, \"element\": [ { \"name\": \"input1\", \"type\": \"ACText\", \"global\": true } ] } )\" ; AutoConnect portal; AutoConnectAux page1; AutoConnectAux page2; void setup () { page1.load(PAGE1); page2.load(PAGE2); portal.join( { page1, page2 }); portal.begin(); } void loop () { portal.handleClient(); } The value entered in input1 declared in PAGE1 is reflected in input1 of PAGE2 as an AutoConnectText value even if there is no sketch code to transfer it to PAGE2. It's shown as like: Copy only for same-named and the global The input value will be copied only if the global attribute of the destination element is true. If an element with the same name is declared non-global, the value is not copied.","title":" Transfer of input values \u200b\u200bacross pages"},{"location":"achandling.html#retrieve-the-values-with-webserveron-handler","text":"ESP8266WebServer class and the WebServer class assume that the implementation of the ReqestHandler class contained in the WebServer library will handle the URL requests. Usually, it is sketch code registered by ESP8266WebServer::on function. When a page transition from a custom Web page created by AutoConnectAux to a handler registered with ESP2866WebServer::on function, a little trick is needed to retrieve the values of AutoConnectElements. (i.e. the URI of the ESP8266WebServer::on handler is specified in the uri attribute of AutoConnectSubmit ) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler coded with the sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the AutoConnectAux::fetchElement function for value processing with the on-page handler. The following sketch is an example of extracting values inputted on a custom web page with an on-page handler and then processing it. ESP8266WebServer server; AutoConnect portal (server); AutoConnectAux Input; const static char InputPage[] PROGMEM = R\"r( { \"title\": \"Input\", \"uri\": \"/input\", \"menu\": true, \"element\": [ { \"name\": \"input\", \"type\": \"ACInput\", \"label\": \"INPUT\" }, { \"name\": \"save\", \"type\": \"ACSubmit\", \"value\": \"SAVE\", \"uri\": \"/\" } ] } )r\" ; // An on-page handler for '/' access void onRoot () { String content = \"\" \"INPUT: {{value}}
\" \"\" ; Input.fetchElement(); // Preliminary acquisition // For this steps to work, need to call fetchElement function beforehand. String value = Input[ \"input\" ].value; content.replace( \"{{value}}\" , value); server.send( 200 , \"text/html\" , content); } void setup () { Input.load(InputPage); portal.join(Input); server.on( \"/\" , onRoot); // Register the on-page handler portal.begin(); } void loop () { portal.handleClient(); }","title":" Retrieve the values with WebServer::on handler"},{"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 Caption (ie. \"Hello, world\") as AutoConnectText value. External JSON document for the below sketch to modify the text style. { \"name\" : \"Caption\" , \"type\" : \"ACText\" , \"style\" : \"text-align:center;font-size:24px;font-family:'Impact','Futura',sans-serif;color:tomato;\" } The sketch (a part of code), load above JSON. 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(); } It's shown as like:","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 with 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])$\" } ] } It's shown as like: If you are not familiar with regular expressions, you may feel that description very strange. Matter of fact, it's a strange description for those who are unfamiliar with the formal languages. If your regular expression can not interpret the intended syntax and semantics, you can use an online tester. The regex101 is an exceptional online tool for testing and debugging regular expressions.","title":" Check data against on submission"},{"location":"achandling.html#input-data-validation","text":"The pattern attribute of AutoConnectInput only determines the data consistency on the web browser based on the given regular expression. In order to guarantee the validity of input data, it is necessary to verify it before actually using it. You can validate input data from AutoConnectInput using the isValid function before actually processing it. The isValid function determines whether the value currently stored in AutoConnectInput matches the pattern . You can also use the AutoConnectAux::isValid function to verify the data input to all AutoConnectInput elements on the custom Web page at once. The two sketches below show the difference between using AutoConnectInput::isValid and using AutoConnectAux::isValid . In both cases, it verifies the input data of the same AutoConnectInput, but in the case of using AutoConnectAux::isValid, the amount of sketch coding is small. A common declaration const char PAGE[] PROGMEM = R\"( { \"title\": \"Custom page\", \"uri\": \"/page\", \"menu\": true, \"element\": [ { \"name\": \"input1\", \"type\": \"ACInput\", \"pattern\": \"^[0-9]{4}$\" }, { \"name\": \"input2\", \"type\": \"ACInput\", \"pattern\": \"^[a-zA-Z]{4}$\" } ] } )\" ; AutoConnectAux page; page.load(PAGE); Using AutoConnectInput::isValid AutoConnectInput & input1 = page[ \"input1\" ].as < AutoConnectInput > (); AutoConnectInput & input2 = page[ \"input2\" ].as < AutoConnectInput > (); if ( ! input1.isValid() || ! input2.isValid()) Serial.println( \"Validation error\" ); Using AutoConnectAux::isValid if ( ! page.isValid()) Serial.println( \"Validation error\" );","title":" Input data validation"},{"location":"achandling.html#convert-data-to-actually-type","text":"The values in the AutoConnectElements field of the custom Web page are all typed as String. A sketch needs to be converted to an actual data type if the data type required for sketch processing is not a String type. For the typical data type conversion method, refer to section Tips for data conversion .","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":"AutoConnectAux and AutoConnectElements must live while the custom Web pages are available. 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 #include #include 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#limitations","text":"The custom Web pages handler has the following limitations. 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 . Can not use the element named SUBMIT . You can not use 'SUBMIT' as the element name of AutoConnectElements in a custom Web page that declares the AutoConnectSubmit element. (Case sensitive ignored) AutoConnect does not rely on the input type=submit element for the form submission and uses HTML form element submit function instead. So, the submit function will fail if there is an element named 'submit' in the form. Do not handle for the same page Do not duplicate AutoConnect::on with ESP8266WebServer::on (also WebServer::on) for the same custom web page. window.onload = function() { Gifffer(); }; The valid scope of the name is within an AutoConnectAux. \u21a9 Regular expression specification as a pattern of AutoConnectInput is JavaScript compliant . \u21a9","title":"Limitations"},{"location":"acintro.html","text":"What it is \u00b6 AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages can be integrated into the AutoConnect menu and executed as menu items and can have input-output parameters and handle them. 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 AutoConnect creates the custom Web pages dynamically at runtime. Sketch describes the custom Web pages using classes and APIs necessary for dynamic creation which are AutoConnectAux and the variant of AutoConnectElements . AutoConnectAux is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages into AutoConnect like the one on the right figure. The elements 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 as aux , binds to an AutoConnect object named portal . This sequence is the basic procedure for creating custom Web pages with the sketch. The further explanation is available in section AutoConnectElements also. Custom Web pages in AutoConnect menu \u00b6 AutoConnect integrates custom Web page objects into menus as AutoConnectAux. The AutoConnectAux object contains URI and title as member variables and has an indicator to display in 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 in the AutoConnect menu as the left figure. 1 It is a hyperlink to a custom Web page which will be displayed tapped it. Multiple custom Web pages \u00b6 You can create multiple custom Web pages and specify pages that can be called from the menu. The following sketch shows a code sequence for integrating three custom Web pages into one and embedding them in a menu. In the above code, the third parameter of aux2 is false . The third parameter of the AutoConnectAux constructor is an indicator for whether it's shown to the AutoConnect menu. Right animation is an execution result of the above code. You will see that the menu applies only two items for three custom Web pages. The sketch of this animation is written to transition to aux2 by the utility of the AutoConnectSubmit element owned by aux1 . 2 The aux2 page transitions only from the aux1 page. As shown in mqttRSSI in the library example, its page replies the saving result for the parameters entered on the previous page. It can not be invoked directly from the menu and want to hide them with AutoConnect menu items. 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() . Perform AutoConnect::handleClient() . 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 document can be saved in SPIFFS or SD and read using AutoConnect's load function. you can reduce the steps of the basic procedure with this approach, but this way consumes a lot of memory. The following JSON code and sketch will execute the custom Web page as an 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 #include #include #include 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 on the custom Web page. The value entered into the AutoConnectElements is stored to the member variables of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the request handler which will be registered by AutoConnect::on function. And 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. The details are explained in section Custom field data handling . window.onload = function() { Gifffer(); }; There is no overlay in the actual menu. \u21a9 The sketch is actually this: #include #include #include 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 can be integrated into the AutoConnect menu and executed as menu items and can have input-output parameters and handle them. 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":"AutoConnect creates the custom Web pages dynamically at runtime. Sketch describes the custom Web pages using classes and APIs necessary for dynamic creation which are AutoConnectAux and the variant of AutoConnectElements . AutoConnectAux is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages into AutoConnect like the one on the right figure. The elements 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 as aux , binds to an AutoConnect object named portal . This sequence is the basic procedure for creating custom Web pages with the sketch. The further explanation is available in section AutoConnectElements also.","title":"How it works"},{"location":"acintro.html#custom-web-pages-in-autoconnect-menu","text":"AutoConnect integrates custom Web page objects into menus as AutoConnectAux. The AutoConnectAux object contains URI and title as member variables and has an indicator to display in 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 in the AutoConnect menu as the left figure. 1 It is a hyperlink to a custom Web page which will be displayed tapped it.","title":"Custom Web pages in AutoConnect menu"},{"location":"acintro.html#multiple-custom-web-pages","text":"You can create multiple custom Web pages and specify pages that can be called from the menu. The following sketch shows a code sequence for integrating three custom Web pages into one and embedding them in a menu. In the above code, the third parameter of aux2 is false . The third parameter of the AutoConnectAux constructor is an indicator for whether it's shown to the AutoConnect menu. Right animation is an execution result of the above code. You will see that the menu applies only two items for three custom Web pages. The sketch of this animation is written to transition to aux2 by the utility of the AutoConnectSubmit element owned by aux1 . 2 The aux2 page transitions only from the aux1 page. As shown in mqttRSSI in the library example, its page replies the saving result for the parameters entered on the previous page. It can not be invoked directly from the menu and want to hide them with AutoConnect menu items. 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() . Perform AutoConnect::handleClient() .","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 document can be saved in SPIFFS or SD and read using AutoConnect's load function. you can reduce the steps of the basic procedure with this approach, but this way consumes a lot of memory. The following JSON code and sketch will execute the custom Web page as an 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 #include #include #include 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 on the custom Web page. The value entered into the AutoConnectElements is stored to the member variables of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the request handler which will be registered by AutoConnect::on function. And 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. The details are explained in section Custom field data handling . window.onload = function() { Gifffer(); }; There is no overlay in the actual menu. \u21a9 The sketch is actually this: #include #include #include 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 AutoConnectAux & AutoConnectElements declaration. Custom Web page declaration by JSON can embed in the sketch as a fixed string or can store in the external file such as SPIFFS for stream loading. Also, 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 like the below: A JSON document for AutoConnect can contain the custom Web page multiple. You can further reduce the sketch process by loading multiple pages of JSON document at once. Adopt ArduinoJson v5 or v6 To handle AutoConnectAux and AutoConnectElements written in JSON, you need to install the ArduinoJson library. You can adopt either version 5 or version 6 for the ArduinoJson. AutoConnect supports both versions. JSON objects & elements for the custom Web page \u00b6 JSON document structure for AutoConnectAux \u00b6 AutoConnectAux will configure custom Web pages with JSON objects. The elements that make up the 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\" } ] } ] The above custom Web page definitions can be loaded in a batch using the AutoConnect::load function. JSON object for AutoConnectElements \u00b6 JSON description for AutoConnectElements describes 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 AutoConnectFile: ACFile AutoConnectInput: ACInput AutoConnectRadio: ACRadio AutoConnectSelect: ACSelect AutoConnectStyle: ACStyle AutoConnectSubmit: ACSubmit AutoConnectText: ACText key_according_to_type \u00b6 This is different for each AutoConnectElements, and the key that can be specified by the type of AutoConnectElements 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. ACFile \u00b6 value : The file name of the upload file will be stored. The value is read-only and will be ignored if specified. label : Specifies a label of the file selection box. Its placement is always to the left of the file selection box. store : Specifies the destination to save the uploaded file. Its value accepts one of the following: fs : Save as the SPIFFS file in flash of ESP8266/ESP32 module. sd : Save to an external SD device connected to ESP8266/ESP32 module. extern : Pass the content of the uploaded file to the uploader which is declared by the sketch individually. Its uploader must inherit AutoConnectUploadHandler class and implements _open , _write and _close function. 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. ACStyle \u00b6 value : Specifies the custom CSS code. 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. format : Specifies how to interpret the value. It specifies the conversion format when outputting values. The format string conforms to the C-style printf library functions, but depends on the espressif sdk implementation. The conversion specification is valid only for %s format. (Left and Right justification, width are also valid.) AutoConnect's JSON parsing process is not perfect It is based on analysis by ArduinoJson, but the semantic analysis is simplified to save memory. Consequently, it is not an error that a custom Web page JSON document to have unnecessary keys. It will be ignored. Loading JSON document \u00b6 Loading to AutoConnect \u00b6 There are two main ways to load the custom Web pages into AutoConnect. Load directly into AutoConnect This way does not require an explicit declaration of AutoConnectAux objects with sketches and is also useful when importing the custom Web pages JSON document from an external file such as SPIFFS because the page definition and sketch coding structure can be separated. Using the AutoCoonnect::load function, AutoConnect dynamically generates the necessary AutoConnectAux objects internally based on the custom Web page definition of the imported JSON document content. In the sketch, the generated AutoConnectAux object can be referenced using the AutoConnect::aux function. You can reach the AutoConnectElements you desired using the AutoConnectAux::getElement function of its AutoConnectAux. In the following example, it loads in a batch a JSON document of custom Web pages stored in SPIFFS and accesses to the AutoConnectInput element. [ { \"title\" : \"page1\" , \"uri\" : \"/page1\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input1\" , \"type\" : \"ACInput\" } ] }, { \"title\" : \"page2\" , \"uri\" : \"/page2\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input2\" , \"type\" : \"ACInput\" } ] } ] AutoConnect portal; File page = SPIFFS.open( \"/custom_page.json\" , \"r\" ); portal.load(page); page.close(); AutoConnectAux * aux = portal.aux( \"/page1\" ); AutoConnectInput & input1 = aux -> getElement < AutoConnectInput > ( \"input1\" ); Load to AutoConnectAux and join to AutoConnect This way declares AutoConnectAux in the sketch and loads the custom Web pages JSON document there. It has an advantage for if you want to define each page of a custom Web page individually or allocate AutoConnectAux objects dynamically on the sketch side. After loading a JSON document using the AutoConnectAux::load function by each, integrate those into AutoConnect using the AutoConnect::join function. In the following example, you can see the difference between two sketches in a sketch modified using the AutoConnectAux::load. { \"title\" : \"page1\" , \"uri\" : \"/page1\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input1\" , \"type\" : \"ACInput\" } ] } { \"title\" : \"page2\" , \"uri\" : \"/page2\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input2\" , \"type\" : \"ACInput\" } ] } AutoConnect portal; AutoConnectAux page1; AutoConnectAux page2; File page = SPIFFS.open( \"/custom_page1.json\" , \"r\" ); page1.load(page); page.close(); page = SPIFFS.open( \"/custom_page2.json\" , \"r\" ); page2.load(page); page.close(); portal.join( { page1, page2 } ); AutoConnectInput & input1 = page1.getElement < AutoConnectInput > ( \"input1\" ); Loading from the streamed file \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. Adjust the JSON document buffer size \u00b6 AutoConnect uses ArduinoJson library's dynamic buffer to parse JSON documents. Its dynamic buffer allocation scheme depends on the version 5 or version 6 of ArduinoJson library. Either version must have enough buffer to parse the custom web page's JSON document successfully. AutoConnect has the following three constants internally to complete the parsing as much as possible in both ArduinoJson version. These constants are macro defined in AutoConnectDefs.h . If memory insufficiency occurs during JSON document parsing, you can adjust these constants to avoid insufficiency by using the JsonAssistant with deriving the required buffer size in advance. #define AUTOCONNECT_JSONBUFFER_SIZE 256 #define AUTOCONNECT_JSONDOCUMENT_SIZE (8 * 1024) #define AUTOCONNECT_JSONPSRAM_SIZE (16* 1024) AUTOCONNECT_JSONBUFFER_SIZE \u00b6 This is a unit size constant of DynamicJsonBuffer and works when the library used is ArduinoJson version 5. A buffer size of the JSON document increases with this unit. This value relates to the impact of the fragmented heap area. If it is too large, may occur run-out of memory. AUTOCONNECT_JSONDOCUMENT_SIZE \u00b6 This is a size of DynamicJsonDocument for ArduinoJson version 6. This buffer is not automatically expanding, and the size determines the limit. AUTOCONNECT_JSONPSRAM_SIZE \u00b6 For ESP32 module equips with PSRAM, you can allocate the JSON document buffer to PSRAM. Buffer allocation to PSRAM will enable when PSRAM:Enabled option selected in the Arduino IDE's Board Manager menu. It is available since ArduinoJson 6.10.0. 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":"AutoConnectAux will configure custom Web pages with JSON objects. The elements that make up the 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\" } ] } ] The above custom Web page definitions can be loaded in a batch using the AutoConnect::load function.","title":" Multiple custom Web pages declaration in JSON document"},{"location":"acjson.html#json-object-for-autoconnectelements","text":"JSON description for AutoConnectElements describes 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 AutoConnectFile: ACFile AutoConnectInput: ACInput AutoConnectRadio: ACRadio AutoConnectSelect: ACSelect AutoConnectStyle: ACStyle AutoConnectSubmit: ACSubmit AutoConnectText: ACText","title":" type"},{"location":"acjson.html#key_according_to_type","text":"This is different for each AutoConnectElements, and the key that can be specified by the type of AutoConnectElements 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#acfile","text":"value : The file name of the upload file will be stored. The value is read-only and will be ignored if specified. label : Specifies a label of the file selection box. Its placement is always to the left of the file selection box. store : Specifies the destination to save the uploaded file. Its value accepts one of the following: fs : Save as the SPIFFS file in flash of ESP8266/ESP32 module. sd : Save to an external SD device connected to ESP8266/ESP32 module. extern : Pass the content of the uploaded file to the uploader which is declared by the sketch individually. Its uploader must inherit AutoConnectUploadHandler class and implements _open , _write and _close function.","title":" ACFile"},{"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#acstyle","text":"value : Specifies the custom CSS code.","title":" ACStyle"},{"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. format : Specifies how to interpret the value. It specifies the conversion format when outputting values. The format string conforms to the C-style printf library functions, but depends on the espressif sdk implementation. The conversion specification is valid only for %s format. (Left and Right justification, width are also valid.) AutoConnect's JSON parsing process is not perfect It is based on analysis by ArduinoJson, but the semantic analysis is simplified to save memory. Consequently, it is not an error that a custom Web page JSON document to have unnecessary keys. It will be ignored.","title":" ACText"},{"location":"acjson.html#loading-json-document","text":"","title":"Loading JSON document"},{"location":"acjson.html#loading-to-autoconnect","text":"There are two main ways to load the custom Web pages into AutoConnect. Load directly into AutoConnect This way does not require an explicit declaration of AutoConnectAux objects with sketches and is also useful when importing the custom Web pages JSON document from an external file such as SPIFFS because the page definition and sketch coding structure can be separated. Using the AutoCoonnect::load function, AutoConnect dynamically generates the necessary AutoConnectAux objects internally based on the custom Web page definition of the imported JSON document content. In the sketch, the generated AutoConnectAux object can be referenced using the AutoConnect::aux function. You can reach the AutoConnectElements you desired using the AutoConnectAux::getElement function of its AutoConnectAux. In the following example, it loads in a batch a JSON document of custom Web pages stored in SPIFFS and accesses to the AutoConnectInput element. [ { \"title\" : \"page1\" , \"uri\" : \"/page1\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input1\" , \"type\" : \"ACInput\" } ] }, { \"title\" : \"page2\" , \"uri\" : \"/page2\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input2\" , \"type\" : \"ACInput\" } ] } ] AutoConnect portal; File page = SPIFFS.open( \"/custom_page.json\" , \"r\" ); portal.load(page); page.close(); AutoConnectAux * aux = portal.aux( \"/page1\" ); AutoConnectInput & input1 = aux -> getElement < AutoConnectInput > ( \"input1\" ); Load to AutoConnectAux and join to AutoConnect This way declares AutoConnectAux in the sketch and loads the custom Web pages JSON document there. It has an advantage for if you want to define each page of a custom Web page individually or allocate AutoConnectAux objects dynamically on the sketch side. After loading a JSON document using the AutoConnectAux::load function by each, integrate those into AutoConnect using the AutoConnect::join function. In the following example, you can see the difference between two sketches in a sketch modified using the AutoConnectAux::load. { \"title\" : \"page1\" , \"uri\" : \"/page1\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input1\" , \"type\" : \"ACInput\" } ] } { \"title\" : \"page2\" , \"uri\" : \"/page2\" , \"menu\" : true , \"element\" : [ { \"name\" : \"input2\" , \"type\" : \"ACInput\" } ] } AutoConnect portal; AutoConnectAux page1; AutoConnectAux page2; File page = SPIFFS.open( \"/custom_page1.json\" , \"r\" ); page1.load(page); page.close(); page = SPIFFS.open( \"/custom_page2.json\" , \"r\" ); page2.load(page); page.close(); portal.join( { page1, page2 } ); AutoConnectInput & input1 = page1.getElement < AutoConnectInput > ( \"input1\" );","title":" Loading to AutoConnect"},{"location":"acjson.html#loading-from-the-streamed-file","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 from the streamed file"},{"location":"acjson.html#adjust-the-json-document-buffer-size","text":"AutoConnect uses ArduinoJson library's dynamic buffer to parse JSON documents. Its dynamic buffer allocation scheme depends on the version 5 or version 6 of ArduinoJson library. Either version must have enough buffer to parse the custom web page's JSON document successfully. AutoConnect has the following three constants internally to complete the parsing as much as possible in both ArduinoJson version. These constants are macro defined in AutoConnectDefs.h . If memory insufficiency occurs during JSON document parsing, you can adjust these constants to avoid insufficiency by using the JsonAssistant with deriving the required buffer size in advance. #define AUTOCONNECT_JSONBUFFER_SIZE 256 #define AUTOCONNECT_JSONDOCUMENT_SIZE (8 * 1024) #define AUTOCONNECT_JSONPSRAM_SIZE (16* 1024)","title":" Adjust the JSON document buffer size"},{"location":"acjson.html#autoconnect_jsonbuffer_size","text":"This is a unit size constant of DynamicJsonBuffer and works when the library used is ArduinoJson version 5. A buffer size of the JSON document increases with this unit. This value relates to the impact of the fragmented heap area. If it is too large, may occur run-out of memory.","title":"AUTOCONNECT_JSONBUFFER_SIZE"},{"location":"acjson.html#autoconnect_jsondocument_size","text":"This is a size of DynamicJsonDocument for ArduinoJson version 6. This buffer is not automatically expanding, and the size determines the limit.","title":"AUTOCONNECT_JSONDOCUMENT_SIZE"},{"location":"acjson.html#autoconnect_jsonpsram_size","text":"For ESP32 module equips with PSRAM, you can allocate the JSON document buffer to PSRAM. Buffer allocation to PSRAM will enable when PSRAM:Enabled option selected in the Arduino IDE's Board Manager menu. It is available since ArduinoJson 6.10.0.","title":"AUTOCONNECT_JSONPSRAM_SIZE"},{"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":"acupload.html","text":"Uploading file from Web Browser \u00b6 If you have to write some data individually to the ESP8266/ESP32 module for the sketch behavior, the AutoConnectFile element will assist with your wants implementation. The AutoConnectFile element produces an HTML #include #include #include // Upload request custom Web page static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"File uploading platform\" }, { \"name\":\"upload_file\", \"type\":\"ACFile\", \"label\":\"Select file: \", \"store\":\"fs\" }, { \"name\":\"upload\", \"type\":\"ACSubmit\", \"value\":\"UPLOAD\", \"uri\":\"/upload\" } ] } )\" ; // Upload result display static const char PAGE_BROWSE[] PROGMEM = R\"( { \"uri\": \"/upload\", \"title\": \"Upload\", \"menu\": false, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"Uploading ended\" }, { \"name\":\"filename\", \"type\":\"ACText\" }, { \"name\":\"size\", \"type\":\"ACText\", \"format\":\"%s bytes uploaded\" }, { \"name\":\"content_type\", \"type\":\"ACText\", \"format\":\"Content: %s\" } ] } )\" ; ESP8266WebServer server; AutoConnect portal (server); // Declare AutoConnectAux separately as a custom web page to access // easily for each page in the post-upload handler. AutoConnectAux auxUpload; AutoConnectAux auxBrowse; /** * Post uploading, AutoConnectFile's built-in upload handler reads the * file saved in SPIFFS and displays the file contents on /upload custom * web page. However, only files with mime type uploaded as text are * displayed. A custom web page handler is called after upload. * @param aux AutoConnectAux(/upload) * @param args PageArgument * @return Uploaded text content */ String postUpload (AutoConnectAux & aux, PageArgument & args) { String content; AutoConnectFile & upload = auxUpload[ \"upload_file\" ].as < AutoConnectFile > (); AutoConnectText & aux_filename = aux[ \"filename\" ].as < AutoConnectText > (); AutoConnectText & aux_size = aux[ \"size\" ].as < AutoConnectText > (); AutoConnectText & aux_contentType = aux[ \"content_type\" ].as < AutoConnectText > (); // Assignment operator can be used for the element attribute. aux_filename.value = upload.value; aux_size.value = String(upload.size); aux_contentType.value = upload.mimeType; // The file saved by the AutoConnect upload handler is read from // the EEPROM and echoed to a custom web page. SPIFFS.begin(); File uploadFile = SPIFFS.open(String( \"/\" + upload.value).c_str(), \"r\" ); if (uploadFile) { while (uploadFile.available()) { char c = uploadFile.read(); Serial.print(c); } uploadFile.close(); } else content = \"Not saved\" ; SPIFFS.end(); return String(); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); auxUpload.load(PAGE_UPLOAD); auxBrowse.load(PAGE_BROWSE); portal.join({ auxUpload, auxBrowse }); auxBrowse.on(postUpload); portal.begin(); } void loop () { portal.handleClient(); } Where will the file upload \u00b6 The AutoConnect built-in upload handler can save the upload file to three locations: Flash memory embedded in the ESP8266/ESP32 module SD device externally connected to the ESP8266/ESP32 module Other character devices You can specify the device type to save with the store attribute of AutoConnectFile, and it accepts the following values: Flash : AC_File_FS for the API parameter or fs for the JSON document SD : AC_File_SD for the API parameter or sd for the JSON document Other : AC_File_Extern for the API parameter or extern for the JSON document The substance of AC_File_FS (fs) is a SPIFFS file system implemented by the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance SPIFFS to access SPIFFS. Also, the substance of AC_File_SD (sd) is a FAT file of Arduino SD library ported to the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance SD to access SD. When saving to an external SD device, there are additional required parameters for the connection interface and is defined as the macro in AutoConnectDefs.h. #define AUTOCONNECT_SD_CS SS #define AUTOCONNECT_SD_SPEED 4000000 AUTOCONNECT_SD_CS defines which GPIO for the CS (Chip Select, or SS as Slave Select) pin. This definition is derived from pins_arduino.h, which is included in the Arduino core distribution. If you want to assign the CS pin to another GPIO, you need to change the macro definition of AutoConnectDefs.h. AUTOCONNECT_SD_SPEED defines SPI clock speed depending on the connected device. Involves both the begin() and the end() The built-in uploader executes the begin and end functions regardless of the sketch whence the file system of the device will terminate with the uploader termination. Therefore, to use the device in the sketch after uploading, you need to restart it with the begin function. When it will be uploaded \u00b6 Upload handler will be launched by ESP8266WebServer/WebServer(as ESP32) library which is triggered by receiving an HTTP stream of POST BODY including file content. Its launching occurs before invoking the page handler. The following diagram illustrates the file uploading sequence: At the time of the page handler behaves, the uploaded file already saved to the device, and the member variables of AutoConnectFile reflects the file name and transfer size. The file name for the uploaded file \u00b6 AutoConnetFile saves the uploaded file with the file name you selected by #include #include static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"File uploading platform\" }, { \"name\":\"upload_file\", \"type\":\"ACFile\", \"label\":\"Select file: \", \"store\":\"extern\" }, { \"name\":\"upload\", \"type\":\"ACSubmit\", \"value\":\"UPLOAD\", \"uri\":\"/upload\" } ] } )\" ; static const char PAGE_RECEIVED[] PROGMEM = R\"( { \"uri\": \"/upload\", \"title\": \"Upload ended\", \"menu\": false, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"File uploading ended\" } ] } )\" ; // Custom upload handler class class CustomUploader : public AutoConnectUploadHandler { public : CustomUploader() {} ~ CustomUploader() {} protected : bool _open( const char * filename, const char * mode) override ; size_t _write ( const uint8_t * buf, const size_t size) override ; void _close ( void ) override ; }; // _open for custom open bool CustomUploader :: _open( const char * filename, const char * mode) { // Here, an implementation for the open file. } // _open for custom write size_t CustomUploader :: _write( const uint8_t * buf, const size_t size) { // Here, an implementation for the writing the file data. } // _open for custom close void CustomUploader :: _close( void ) { // Here, an implementation for the close file. } AutoConnect portal; AutoConnectAux uploadPage; AutoConnectAux receivePage; CustomUploader uploader; // Declare the custom uploader void setup () { uploadPage.load(PAGE_UPLOAD); receivePage.load(PAGE_RECEIVED); portal.join({ uploadPage, receivePage }); receivePage.onUpload < CustomUploader > (uploader); // Register the custom uploader portal.begin(); } void loop () { portal.handleClient(); } Don't forget to specify the store When using a custom uploader, remember to specify the extern for the store attribute of AutoConnectFile. window.onload = function() { Gifffer(); }; The AutoConnectFile element can be used with other AutoConnectElements on the same page. \u21a9","title":"File upload handler"},{"location":"acupload.html#uploading-file-from-web-browser","text":"If you have to write some data individually to the ESP8266/ESP32 module for the sketch behavior, the AutoConnectFile element will assist with your wants implementation. The AutoConnectFile element produces an HTML #include #include #include // Upload request custom Web page static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"File uploading platform\" }, { \"name\":\"upload_file\", \"type\":\"ACFile\", \"label\":\"Select file: \", \"store\":\"fs\" }, { \"name\":\"upload\", \"type\":\"ACSubmit\", \"value\":\"UPLOAD\", \"uri\":\"/upload\" } ] } )\" ; // Upload result display static const char PAGE_BROWSE[] PROGMEM = R\"( { \"uri\": \"/upload\", \"title\": \"Upload\", \"menu\": false, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"Uploading ended\" }, { \"name\":\"filename\", \"type\":\"ACText\" }, { \"name\":\"size\", \"type\":\"ACText\", \"format\":\"%s bytes uploaded\" }, { \"name\":\"content_type\", \"type\":\"ACText\", \"format\":\"Content: %s\" } ] } )\" ; ESP8266WebServer server; AutoConnect portal (server); // Declare AutoConnectAux separately as a custom web page to access // easily for each page in the post-upload handler. AutoConnectAux auxUpload; AutoConnectAux auxBrowse; /** * Post uploading, AutoConnectFile's built-in upload handler reads the * file saved in SPIFFS and displays the file contents on /upload custom * web page. However, only files with mime type uploaded as text are * displayed. A custom web page handler is called after upload. * @param aux AutoConnectAux(/upload) * @param args PageArgument * @return Uploaded text content */ String postUpload (AutoConnectAux & aux, PageArgument & args) { String content; AutoConnectFile & upload = auxUpload[ \"upload_file\" ].as < AutoConnectFile > (); AutoConnectText & aux_filename = aux[ \"filename\" ].as < AutoConnectText > (); AutoConnectText & aux_size = aux[ \"size\" ].as < AutoConnectText > (); AutoConnectText & aux_contentType = aux[ \"content_type\" ].as < AutoConnectText > (); // Assignment operator can be used for the element attribute. aux_filename.value = upload.value; aux_size.value = String(upload.size); aux_contentType.value = upload.mimeType; // The file saved by the AutoConnect upload handler is read from // the EEPROM and echoed to a custom web page. SPIFFS.begin(); File uploadFile = SPIFFS.open(String( \"/\" + upload.value).c_str(), \"r\" ); if (uploadFile) { while (uploadFile.available()) { char c = uploadFile.read(); Serial.print(c); } uploadFile.close(); } else content = \"Not saved\" ; SPIFFS.end(); return String(); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); auxUpload.load(PAGE_UPLOAD); auxBrowse.load(PAGE_BROWSE); portal.join({ auxUpload, auxBrowse }); auxBrowse.on(postUpload); portal.begin(); } void loop () { portal.handleClient(); }","title":"Basic steps of the file upload sketch"},{"location":"acupload.html#where-will-the-file-upload","text":"The AutoConnect built-in upload handler can save the upload file to three locations: Flash memory embedded in the ESP8266/ESP32 module SD device externally connected to the ESP8266/ESP32 module Other character devices You can specify the device type to save with the store attribute of AutoConnectFile, and it accepts the following values: Flash : AC_File_FS for the API parameter or fs for the JSON document SD : AC_File_SD for the API parameter or sd for the JSON document Other : AC_File_Extern for the API parameter or extern for the JSON document The substance of AC_File_FS (fs) is a SPIFFS file system implemented by the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance SPIFFS to access SPIFFS. Also, the substance of AC_File_SD (sd) is a FAT file of Arduino SD library ported to the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance SD to access SD. When saving to an external SD device, there are additional required parameters for the connection interface and is defined as the macro in AutoConnectDefs.h. #define AUTOCONNECT_SD_CS SS #define AUTOCONNECT_SD_SPEED 4000000 AUTOCONNECT_SD_CS defines which GPIO for the CS (Chip Select, or SS as Slave Select) pin. This definition is derived from pins_arduino.h, which is included in the Arduino core distribution. If you want to assign the CS pin to another GPIO, you need to change the macro definition of AutoConnectDefs.h. AUTOCONNECT_SD_SPEED defines SPI clock speed depending on the connected device. Involves both the begin() and the end() The built-in uploader executes the begin and end functions regardless of the sketch whence the file system of the device will terminate with the uploader termination. Therefore, to use the device in the sketch after uploading, you need to restart it with the begin function.","title":"Where will the file upload"},{"location":"acupload.html#when-it-will-be-uploaded","text":"Upload handler will be launched by ESP8266WebServer/WebServer(as ESP32) library which is triggered by receiving an HTTP stream of POST BODY including file content. Its launching occurs before invoking the page handler. The following diagram illustrates the file uploading sequence: At the time of the page handler behaves, the uploaded file already saved to the device, and the member variables of AutoConnectFile reflects the file name and transfer size.","title":"When it will be uploaded"},{"location":"acupload.html#the-file-name-for-the-uploaded-file","text":"AutoConnetFile saves the uploaded file with the file name you selected by #include #include static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"File uploading platform\" }, { \"name\":\"upload_file\", \"type\":\"ACFile\", \"label\":\"Select file: \", \"store\":\"extern\" }, { \"name\":\"upload\", \"type\":\"ACSubmit\", \"value\":\"UPLOAD\", \"uri\":\"/upload\" } ] } )\" ; static const char PAGE_RECEIVED[] PROGMEM = R\"( { \"uri\": \"/upload\", \"title\": \"Upload ended\", \"menu\": false, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"File uploading ended\" } ] } )\" ; // Custom upload handler class class CustomUploader : public AutoConnectUploadHandler { public : CustomUploader() {} ~ CustomUploader() {} protected : bool _open( const char * filename, const char * mode) override ; size_t _write ( const uint8_t * buf, const size_t size) override ; void _close ( void ) override ; }; // _open for custom open bool CustomUploader :: _open( const char * filename, const char * mode) { // Here, an implementation for the open file. } // _open for custom write size_t CustomUploader :: _write( const uint8_t * buf, const size_t size) { // Here, an implementation for the writing the file data. } // _open for custom close void CustomUploader :: _close( void ) { // Here, an implementation for the close file. } AutoConnect portal; AutoConnectAux uploadPage; AutoConnectAux receivePage; CustomUploader uploader; // Declare the custom uploader void setup () { uploadPage.load(PAGE_UPLOAD); receivePage.load(PAGE_RECEIVED); portal.join({ uploadPage, receivePage }); receivePage.onUpload < CustomUploader > (uploader); // Register the custom uploader portal.begin(); } void loop () { portal.handleClient(); } Don't forget to specify the store When using a custom uploader, remember to specify the extern for the store attribute of AutoConnectFile. window.onload = function() { Gifffer(); }; The AutoConnectFile element can be used with other AutoConnectElements on the same page. \u21a9","title":" Register custom upload handler"},{"location":"advancedusage.html","text":"Advanced usage \u00b6 404 handler \u00b6 Registering the \"not found\" handler is a different way than ESP8266WebServer (WebServer as ESP32). 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 . Access to saved credentials \u00b6 AutoConnect stores the established WiFi connection in the flash of the ESP8266/ESP32 module and equips the class to access it from the sketch. You can read, write or erase the credentials using this class individually. It's AutoConnectCredential class which provides the access method to the saved credentials in the flash. Refer to section Saved credentials access for details. Where to store credentials in ESP32 with AutoConnect v1.0.0 or later Since v1.0.0, credentials are stored in nvs of ESP32. AutoConnect v1.0.0 or later accesses the credentials area using the Preferences class with the arduino esp-32 core. So in ESP32, the credentials are not in the EEPROM, it is in the namespace AC_CREDT of the nvs. See Saved credentials access for details. In ESP8266, it is saved in EEPROM as is conventionally done. 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 the flash 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 to the flash. You can disable it with the autoSave parameter specified by AutoConnectConfig . See the Saved credentials access chapter for details on accessing stored credentials. AutoConnect Portal; AutoConnectConfig Config; Config.autoSave = AC_SAVECREDENTIAL_NEVER; Portal.config(Config); Portal.begin(); Credentials storage location The location where AutoConnect saves credentials depends on the module type and the AutoConnect library version, also arduino-esp32 core version. AutoConnect Arduino core for ESP8266 Arduino core for ESP32 1.0.2 earlier 1.0.3 later v0.9.12 earlier EEPROM EEPROM (partition) Not supported v1.0.0 later Preferences (nvs) (Can be used EEPROM with turning off AUTOCONNECT_USE_PREFERENCES macro) Preferences (nvs) 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 . The default value is macro defined by AUTOCONNECT_TIMEOUT in the AutoConnectDef.h file. The other timeout control is 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 #include #include 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. Compared to the above code specified no option with the following example code, the captive portal will remain available even after a timeout without changing the logic of the sketch. #include #include #include 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(); } Casts the HTML pages to be add-on into the menu \u00b6 If your sketch handles web pages, you can embed the pages into the AutoConnect menu in continuance enjoying the utility of the WiFi connection feature. Unlike the custom Web pages by AutoConnectElements , this allows to legacy web pages registered by ESP8266WebServer::on or WebServer::on function. You can use AutoConnectAux only constructed with the URI of the page to be embedding. 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 section Constructing the menu 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 for the FSBrowser as the below. Change the menu labels \u00b6 You can change the label of the AutoConnect menu item by rewriting the default label letter in AutoConnectLabels.h macros. However, changing menu items letter influences all the sketch's build scenes. #define AUTOCONNECT_MENULABEL_CONFIGNEW \"Configure new AP\" #define AUTOCONNECT_MENULABEL_OPENSSIDS \"Open SSIDs\" #define AUTOCONNECT_MENULABEL_DISCONNECT \"Disconnect\" #define AUTOCONNECT_MENULABEL_RESET \"Reset...\" #define AUTOCONNECT_MENULABEL_HOME \"HOME\" #define AUTOCONNECT_BUTTONLABEL_RESET \"RESET\" 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 #include #include