From 811bbfc6bd6bfd22b415e6485c192057ea95accd Mon Sep 17 00:00:00 2001
From: Hieromon Ikasamo <Hieromon@users.noreply.github.com>
Date: Wed, 26 Jan 2022 02:15:44 +0900
Subject: [PATCH] Deploy for v1.3.3

---
 docs/changelog.html           |  68 ++++++++++++++++++++++++-----
 docs/license.html             |   2 +-
 docs/search/search_index.json |   2 +-
 docs/sitemap.xml              |  78 +++++++++++++++++-----------------
 docs/sitemap.xml.gz           | Bin 477 -> 478 bytes
 5 files changed, 99 insertions(+), 51 deletions(-)

diff --git a/docs/changelog.html b/docs/changelog.html
index b52a3fcd..c552e29e 100644
--- a/docs/changelog.html
+++ b/docs/changelog.html
@@ -84,7 +84,7 @@
     <div data-md-component="skip">
       
         
-        <a href="#132-jan-1-2022" class="md-skip">
+        <a href="#133-jan-25-2022" class="md-skip">
           Skip to content
         </a>
       
@@ -982,6 +982,26 @@
     </label>
     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
       
+        <li class="md-nav__item">
+  <a href="#133-jan-25-2022" class="md-nav__link">
+    [1.3.3] Jan. 25, 2022
+  </a>
+  
+    <nav class="md-nav" aria-label="[1.3.3] Jan. 25, 2022">
+      <ul class="md-nav__list">
+        
+          <li class="md-nav__item">
+  <a href="#fix" class="md-nav__link">
+    Fix
+  </a>
+  
+</li>
+        
+      </ul>
+    </nav>
+  
+</li>
+      
         <li class="md-nav__item">
   <a href="#132-jan-1-2022" class="md-nav__link">
     [1.3.2] Jan. 1, 2022
@@ -998,7 +1018,7 @@
 </li>
         
           <li class="md-nav__item">
-  <a href="#fix" class="md-nav__link">
+  <a href="#fix_1" class="md-nav__link">
     Fix
   </a>
   
@@ -1085,7 +1105,7 @@
       <ul class="md-nav__list">
         
           <li class="md-nav__item">
-  <a href="#fix_1" class="md-nav__link">
+  <a href="#fix_2" class="md-nav__link">
     Fix
   </a>
   
@@ -1105,7 +1125,7 @@
       <ul class="md-nav__list">
         
           <li class="md-nav__item">
-  <a href="#fix_2" class="md-nav__link">
+  <a href="#fix_3" class="md-nav__link">
     Fix
   </a>
   
@@ -1769,6 +1789,26 @@
     </label>
     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
       
+        <li class="md-nav__item">
+  <a href="#133-jan-25-2022" class="md-nav__link">
+    [1.3.3] Jan. 25, 2022
+  </a>
+  
+    <nav class="md-nav" aria-label="[1.3.3] Jan. 25, 2022">
+      <ul class="md-nav__list">
+        
+          <li class="md-nav__item">
+  <a href="#fix" class="md-nav__link">
+    Fix
+  </a>
+  
+</li>
+        
+      </ul>
+    </nav>
+  
+</li>
+      
         <li class="md-nav__item">
   <a href="#132-jan-1-2022" class="md-nav__link">
     [1.3.2] Jan. 1, 2022
@@ -1785,7 +1825,7 @@
 </li>
         
           <li class="md-nav__item">
-  <a href="#fix" class="md-nav__link">
+  <a href="#fix_1" class="md-nav__link">
     Fix
   </a>
   
@@ -1872,7 +1912,7 @@
       <ul class="md-nav__list">
         
           <li class="md-nav__item">
-  <a href="#fix_1" class="md-nav__link">
+  <a href="#fix_2" class="md-nav__link">
     Fix
   </a>
   
@@ -1892,7 +1932,7 @@
       <ul class="md-nav__list">
         
           <li class="md-nav__item">
-  <a href="#fix_2" class="md-nav__link">
+  <a href="#fix_3" class="md-nav__link">
     Fix
   </a>
   
@@ -2524,6 +2564,14 @@
 
   <h1>Change log</h1>
 
+<h3 id="133-jan-25-2022">[1.3.3] Jan. 25, 2022<a class="headerlink" href="#133-jan-25-2022" title="Permanent link">&para;</a></h3>
+<h4 id="fix">Fix<a class="headerlink" href="#fix" title="Permanent link">&para;</a></h4>
+<ul>
+<li>Fixed the missing initialization of MQTT parameter settings of mqttRSSI.ino example sketch.</li>
+<li>Reverted the MQTT API endpoint of Thingspeak.com in the mqttRSSI example sketches.</li>
+<li>Changed ESP32Cam XCLK to be attenuated to avoid interference with WiFi signals.</li>
+</ul>
+<hr />
 <h3 id="132-jan-1-2022">[1.3.2] Jan. 1, 2022<a class="headerlink" href="#132-jan-1-2022" title="Permanent link">&para;</a></h3>
 <h4 id="enhancements">Enhancements<a class="headerlink" href="#enhancements" title="Permanent link">&para;</a></h4>
 <ul>
@@ -2532,7 +2580,7 @@ <h4 id="enhancements">Enhancements<a class="headerlink" href="#enhancements" tit
 <li>Adds an <a href="apiaux.html#redirect"><code>AutoConnectAux::redirect</code></a> function.</li>
 <li>Adds an example for using AutoConnect with the <a href="https://github.com/espressif/esp32-camera">ESP32 camera driver</a> as WebCamServer.</li>
 </ul>
-<h4 id="fix">Fix<a class="headerlink" href="#fix" title="Permanent link">&para;</a></h4>
+<h4 id="fix_1">Fix<a class="headerlink" href="#fix_1" title="Permanent link">&para;</a></h4>
 <ul>
 <li>Fixed an issue where a password is lost when SoftAP is stopped.</li>
 </ul>
@@ -2584,14 +2632,14 @@ <h4 id="enhancements_2">Enhancements<a class="headerlink" href="#enhancements_2"
 </div>
 <hr />
 <h3 id="122-dec-13-2020">[1.2.2] Dec. 13, 2020<a class="headerlink" href="#122-dec-13-2020" title="Permanent link">&para;</a></h3>
-<h4 id="fix_1">Fix<a class="headerlink" href="#fix_1" title="Permanent link">&para;</a></h4>
+<h4 id="fix_2">Fix<a class="headerlink" href="#fix_2" title="Permanent link">&para;</a></h4>
 <ul>
 <li>Fixed an issue where OTA updates would crash on the ESP32 platform. (issue <a class="magiclink magiclink-github magiclink-issue" href="https://github.com/Hieromon/AutoConnect/issues/284" title="GitHub Issue: Hieromon/AutoConnect #284">#284</a>)<br />
   With this fix, <code>AUTOCONNECT_UPLOAD_ASFIRMWARE_USE_REGEXP</code> must be enabled for regular expressions to be enabled in <code>AUTOCONNECT_UPLOAD_ASFIRMWARE</code>.</li>
 </ul>
 <hr />
 <h3 id="121-dec-5-2020">[1.2.1] Dec. 5, 2020<a class="headerlink" href="#121-dec-5-2020" title="Permanent link">&para;</a></h3>
-<h4 id="fix_2">Fix<a class="headerlink" href="#fix_2" title="Permanent link">&para;</a></h4>
+<h4 id="fix_3">Fix<a class="headerlink" href="#fix_3" title="Permanent link">&para;</a></h4>
 <ul>
 <li>Fixed that not declared error with <code>AUTOCONNECT_NOUSE_JSON</code>. (issue <a class="magiclink magiclink-github magiclink-issue" href="https://github.com/Hieromon/AutoConnect/issues/282" title="GitHub Issue: Hieromon/AutoConnect #282">#282</a>)</li>
 </ul>
diff --git a/docs/license.html b/docs/license.html
index a8b71f4e..40ffb674 100644
--- a/docs/license.html
+++ b/docs/license.html
@@ -994,7 +994,7 @@
   <h1>License</h1>
 
 <p><strong>MIT License</strong></p>
-<p>Copyright &copy; 2018-2021 Hieromon Ikasamo</p>
+<p>Copyright &copy; 2018-2022 Hieromon Ikasamo</p>
 <p>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:</p>
 <p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
 <p>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
diff --git a/docs/search/search_index.json b/docs/search/search_index.json
index 02a06f7a..573fc63a 100644
--- a/docs/search/search_index.json
+++ b/docs/search/search_index.json
@@ -1 +1 @@
-{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"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 UPDATED w/v1.1.5 \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.4.2 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 v1.2.3, PageBuilder v1.5.0 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 &amp; 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-updated-wv115","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 UPDATED w/v1.1.5"},{"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.4.2 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 v1.2.3, PageBuilder v1.5.0 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 AutoConnectRange : Labeled range slider 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\", \"<hr>\"); On the page: Constructor \u00b6 AutoConnectElement( const char * name, const char * value, const ACPosterior_t post) name \u00b6 Each element has a name. The name is the String data type. You can identify each element by the name to access it with sketches. value \u00b6 The value is the string which is a source to generate an HTML code. Characteristics of Value vary depending on the element. The value of AutoConnectElement is native HTML code. A string of value is output as HTML as it is. post \u00b6 The post specifies a tag to add behind the HTML code generated from the element. Its purpose is to place elements on the custom Web page as intended by the user sketch. AutoConnect will not actively be involved in the layout of custom Web pages generated from AutoConnectElements. Each element follows behind the previous one, with the exception of some elements. You can use the post value to arrange vertically or horizontal when the elements do not have the intended position on the custom Web Page specifying the following enumeration value as ACPosterior_t type for the post . AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 AutoConnectRange AC_Tag_BR AutoConnectSelect AC_Tag_BR AutoConnectSubmit AC_Tag_None AutoConnectText AC_Tag_None A placement posterior of AutoConnectText A placement posterior for AutoConnectText has a slightly peculiar specification. AutoConnectText element without the style attribute will be drained to HTML as a raw value and is accompanied by <p> , <br> or <div> tags according to the post enumeration values. If the style attribute is specified, the post enumeration value will be ignored and always be enclosed in the <div> tag, and the style value will be inserted into style attribute of the <div> tag. 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 AutoConnectRange: AC_Range 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<T> 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<AutoConnectText>().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\"( <script> function CopyText() { document.getElementById(\"Text2\").value = document.getElementById(\"Text1\").value; } </script> )\" ; ACInput(Text1, \"Text1\" ); ACInput(Text2, \"Text2\" ); ACButton(Button, \"COPY\" , \"CopyText()\" ); ACElement(TextCopy, scCopyText); 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 <label> tag with an id attribute. The checkbox and the label are connected by the id attribute. Only will be displayed if a label is not specified. checked \u00b6 A checked is a Boolean value and indicates the checked status of the checkbox. The value of the checked checkbox element is packed in the query string and sent. 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\" > , < input type = \"number\" > or < input type = \"password\" > 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, const ACInput_t apply) 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 . apply \u00b6 Specifies the type of input that the text box accepts. AutoConnectInput will generate either a input type=\"text\" , input type=\"password\" , or input type=\"number\" tag based on the apply specifying as input type. The input type can be specified the following values in the ACInput_t enumeration type. AC_Input_Text : input type=\"text\" AC_Input_Password : input type=\"password\" AC_Input_Number : input type=\"number\" Numerical keypad is different When the AutoConnectInput element with the AC_Input_Number applied is focused on the browser, the numeric keypad may be displayed automatically. For popular mobile OSes such as Android and iOS, the numeric keypad has the following styles and is different with each OS. 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 . AutoConnectRange \u00b6 AutoConnectRange generates an HTML < input type = \"range\" > tag and a < label > tag. Sample AutoConnectRange range(\"bri\", 0, \"Brightness\", -2, 2, 1, AC_Infront); On the page: Constructor \u00b6 AutoConnectRange( const char * name, const int value, const char * label, const int min, const int max, const int step, const ACPosition_t magnify, const ACPosterior_t post, const char * style) name \u00b6 It is the name of the AutoConnectRange 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 = \"range\" > tag, which indicates the default value of the range. label \u00b6 A label is an optional string. A label is always arranged on the left side of the range slider. Specification of a label will generate an HTML < label > tag with an id attribute. The range slider and the label are connected by the id attribute. min \u00b6 Specifies the most negative value within the range of allowed values and must not be less than the value argument. max \u00b6 It defines the greatest value in the range of permitted values. step \u00b6 It is a number that specifies the granularity that the value must adhere to. The default is 1. As you move the slider, it increases or decreases the value according to the step in granularity. magnify \u00b6 Displays the current value of the range on the left or right side of the slider. AC_Infront : Displays the current value on the left side. AC_Behind : Displays the current value on the right side. AC_Void : No display the current value. This is the default. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR . style \u00b6 A style specifies the qualification style to give to the content and can use the style attribute format as it is. 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 <style> </style> 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 . AutoConnectText element without the style parameter will be drained to HTML as a raw value and is accompanied by <p> , <br> or <div> tags according to the post enumeration values. If the style parameter is specified, the post enumeration value will be ignored and always be enclosed in the <div> tag, and the style value will be inserted into style attribute of the <div> tag. 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 | AC_Tag_DIV ] ) ACButton ( name [ , value ] [ , action ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACCheckbox ( name [ , value ] [ , label ] [ , true | false ] [ , AC_Infront | AC_Behind ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACFile ( name [ , value ] [ , label ] [ , AC_File_FS | AC_File_SD | AC_File_Extern ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACInput ( name [ , value ] [ , label ] [ , pattern ] [ , placeholder ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] [ , AC_Input_Text | AC_Input_Password | AC_Input_Number ] ) ACRadio ( name [ , values ] [ , label ] [ , AC_Horizontal | AC_Vertical ] [ , checked ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACRange ( name [ , value ] [ , label ] [ , min ] [ , max ] [ , step ] [ , AC_Infront | AC_Behind | AC_Void ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] [ , style ] ) ACSelect ( name [ , options ] [ , label ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACStyle ( name [ , value ] ) ACSubmit ( name [ , value ] [ , uri ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACText ( name [ , value ] [ , style ] [ , format ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) 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 AutoConnectRange : Labeled range slider 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\", \"<hr>\"); On the page:","title":"AutoConnectElement - A basic class of elements"},{"location":"acelements.html#constructor","text":"AutoConnectElement( const char * name, const char * value, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name","text":"Each element has a name. The name is the String data type. You can identify each element by the name to access it with sketches.","title":" name"},{"location":"acelements.html#value","text":"The value is the string which is a source to generate an HTML code. Characteristics of Value vary depending on the element. The value of AutoConnectElement is native HTML code. A string of value is output as HTML as it is.","title":" value"},{"location":"acelements.html#post","text":"The post specifies a tag to add behind the HTML code generated from the element. Its purpose is to place elements on the custom Web page as intended by the user sketch. AutoConnect will not actively be involved in the layout of custom Web pages generated from AutoConnectElements. Each element follows behind the previous one, with the exception of some elements. You can use the post value to arrange vertically or horizontal when the elements do not have the intended position on the custom Web Page specifying the following enumeration value as ACPosterior_t type for the post . AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 AutoConnectRange AC_Tag_BR AutoConnectSelect AC_Tag_BR AutoConnectSubmit AC_Tag_None AutoConnectText AC_Tag_None A placement posterior of AutoConnectText A placement posterior for AutoConnectText has a slightly peculiar specification. AutoConnectText element without the style attribute will be drained to HTML as a raw value and is accompanied by <p> , <br> or <div> tags according to the post enumeration values. If the style attribute is specified, the post enumeration value will be ignored and always be enclosed in the <div> tag, and the style value will be inserted into style attribute of the <div> tag.","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 AutoConnectRange: AC_Range 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<T> 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<AutoConnectText>().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\"( <script> function CopyText() { document.getElementById(\"Text2\").value = document.getElementById(\"Text1\").value; } </script> )\" ; ACInput(Text1, \"Text1\" ); ACInput(Text2, \"Text2\" ); ACButton(Button, \"COPY\" , \"CopyText()\" ); ACElement(TextCopy, scCopyText);","title":" action"},{"location":"acelements.html#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 <label> tag with an id attribute. The checkbox and the label are connected by the id attribute. Only will be displayed if a label is not specified.","title":" label"},{"location":"acelements.html#checked","text":"A checked is a Boolean value and indicates the checked status of the checkbox. The value of the checked checkbox element is packed in the query string and sent.","title":" checked"},{"location":"acelements.html#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\" > , < input type = \"number\" > or < input type = \"password\" > 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, const ACInput_t apply)","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#apply","text":"Specifies the type of input that the text box accepts. AutoConnectInput will generate either a input type=\"text\" , input type=\"password\" , or input type=\"number\" tag based on the apply specifying as input type. The input type can be specified the following values in the ACInput_t enumeration type. AC_Input_Text : input type=\"text\" AC_Input_Password : input type=\"password\" AC_Input_Number : input type=\"number\" Numerical keypad is different When the AutoConnectInput element with the AC_Input_Number applied is focused on the browser, the numeric keypad may be displayed automatically. For popular mobile OSes such as Android and iOS, the numeric keypad has the following styles and is different with each OS.","title":" apply"},{"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#autoconnectrange","text":"AutoConnectRange generates an HTML < input type = \"range\" > tag and a < label > tag. Sample AutoConnectRange range(\"bri\", 0, \"Brightness\", -2, 2, 1, AC_Infront); On the page:","title":"AutoConnectRange"},{"location":"acelements.html#constructor_6","text":"AutoConnectRange( const char * name, const int value, const char * label, const int min, const int max, const int step, const ACPosition_t magnify, const ACPosterior_t post, const char * style)","title":" Constructor"},{"location":"acelements.html#name_6","text":"It is the name of the AutoConnectRange 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_5","text":"It becomes a string value of the value attribute of an HTML < input type = \"range\" > tag, which indicates the default value of the range.","title":" value"},{"location":"acelements.html#label_4","text":"A label is an optional string. A label is always arranged on the left side of the range slider. Specification of a label will generate an HTML < label > tag with an id attribute. The range slider and the label are connected by the id attribute.","title":" label"},{"location":"acelements.html#min","text":"Specifies the most negative value within the range of allowed values and must not be less than the value argument.","title":" min"},{"location":"acelements.html#max","text":"It defines the greatest value in the range of permitted values.","title":" max"},{"location":"acelements.html#step","text":"It is a number that specifies the granularity that the value must adhere to. The default is 1. As you move the slider, it increases or decreases the value according to the step in granularity.","title":" step"},{"location":"acelements.html#magnify","text":"Displays the current value of the range on the left or right side of the slider. AC_Infront : Displays the current value on the left side. AC_Behind : Displays the current value on the right side. AC_Void : No display the current value. This is the default.","title":" magnify"},{"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#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#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_7","text":"AutoConnectStyle( const char * name, const char * value)","title":" Constructor"},{"location":"acelements.html#name_7","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_6","text":"The raw CSS code. It is not necessary to write <style> </style> 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_8","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_8","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_5","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_7","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_9","text":"AutoConnectSubmit( const char * name, const char * value, const char * uri, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_9","text":"It is the name of the AutoConnectSubmit element and matches the name attribute of the input tag.","title":" name"},{"location":"acelements.html#value_7","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_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#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_10","text":"AutoConnectText( const char * name, const char * value, const char * style, const char * format, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_10","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_8","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_1","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_9","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None . AutoConnectText element without the style parameter will be drained to HTML as a raw value and is accompanied by <p> , <br> or <div> tags according to the post enumeration values. If the style parameter is specified, the post enumeration value will be ignored and always be enclosed in the <div> tag, and the style value will be inserted into style attribute of the <div> tag.","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 | AC_Tag_DIV ] ) ACButton ( name [ , value ] [ , action ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACCheckbox ( name [ , value ] [ , label ] [ , true | false ] [ , AC_Infront | AC_Behind ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACFile ( name [ , value ] [ , label ] [ , AC_File_FS | AC_File_SD | AC_File_Extern ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACInput ( name [ , value ] [ , label ] [ , pattern ] [ , placeholder ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] [ , AC_Input_Text | AC_Input_Password | AC_Input_Number ] ) ACRadio ( name [ , values ] [ , label ] [ , AC_Horizontal | AC_Vertical ] [ , checked ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACRange ( name [ , value ] [ , label ] [ , min ] [ , max ] [ , step ] [ , AC_Infront | AC_Behind | AC_Void ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] [ , style ] ) ACSelect ( name [ , options ] [ , label ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACStyle ( name [ , value ] ) ACSubmit ( name [ , value ] [ , uri ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACText ( name [ , value ] [ , style ] [ , format ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) 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. Custom Web page handler programming model \u00b6 To handle Custom Web pages properly, the sketches need to implement to match the programming model. Custom Web page programming model is depicted as follows: Custom Web page handler acts as an event handler for processing the HTTP request captured by the WebServer class. The WebServer class parses the HTTP request and calls the registered uri handler appropriately. The custom web page uri (it should be specified by the JSON description for the custom web page, the AutoConnectAux constructor , or the AutoConnect::on function) is not registered directly with the WebServer class, and the Requests always go through the request dispatcher inside AutoConnect. When implementing the custom Web page handler, it is possible to give an appropriate function to the handler by understanding the above internal structure in advance. Custom web page handler can be sketched as regular function and has interface is as follows: String customWebpageHandler(AutoConnectAux & aux, PageArgument & args) Parameters for the customWebageHandler \u00b6 When the custom web page handler is called, AutoConnect passes the following two parameters: 1. Reference to the AutoConnectAux instance \u00b6 Custom Web page handlers can access the AutoConnectElements owned by its page through a reference to the AutoConnectAux instance. It can use this access to update the AutoConnectElements value before the user views the page or get the value of AutoConnectElements owned by the page that triggered the transition. A list of commonly used functions to access AutoConnectElements with your Sketch via reference to an AutoConnectAux instance is following: [] operator : Access to an AutoConnectElement by specified element name. getElement function : Access to an AutoConnectElement by specified element name. as<> function : Cast from a variant of AutoConnectElemnet type to an actual type such as AutoConnectText or AutoConnectInput etc. To access attributes that exist only in the actual type, it is necessary to convert from the AutoConnectElement type obtained with [] operator or getElement function. See the section Get AutoConnectElement from the AutoConnectAux and the section AutoConnectElements API for usage examples and API specifications for each above function. 2. Reference to the PageArgument instance \u00b6 The values of the AutoConnectCheckbox , AutoConnectFile , AutoConnectInput , AutoConnectRadio , and AutoConnectSelect elements are packed into the form data of the HTTP POST method by the page transition caused by AutoConnectSubmit . Use the PageArgument instance to retrieve the values of these transmitted AutoConnectElements with the customWebpageHandler. A list of commonly used functions to access PageArgment member variables with your Sketch via a reference to an PageArgument instance is following: arg function : Get an element value by specified element name. hasArg function : Checks for the existence of an element with the specified name. The method to get the form data attached to the HTTP request via PageArgument is described with the section How you can reach the values . 3. Access to the AutoConnectElement values \u00b6 Here, you have one thing to note. The custom web page handler registered with AutoConnect::on function is called to respond to an HTTP request to the URL of its page. And, the AutoConnectAux instance then references the custom web page assigned to the requested URL. That is, the AutoConnectAux instance passed to the custom web page handler owns the AutoConnectElements for that page, while the PageArgument instance has the AutoConnectElements value of the custom web page that caused the page transition. You need to keep the difference between the two in mind when implementing the custom web page handler with your Sketch and access these values via the appropriate approach. You can access the AutoConnect Elements of the custom web page itself via the AutoConnectAux& argument by specifying the element name. You can also use the PageArgument& argument to get the value of AutoConnectElements for the page that caused the transition to that custom web page. (the URL that issued the HTTP request) The following screenshots are outputs of custom web pages that are based on a scenario to help you understand how to access AutoConnectElements properly with a custom web page handler. The requirements for this scenario are: Calculate an addition simply, add B to A . Perform the calculation with a customWebPageHandler. Returns the calculated result in another custom web page with page transitions. The first thing to work on is defining two custom web pages. Here, Value A and Value B are easily defined by applying AutoConnectInput . Also, add an action button to perform the calculation with AutoConnectSubmit . { \"uri\" : \"/add\" , \"title\" : \"Adder\" , \"menu\" : true , \"element\" : [ { \"name\" : \"valueA\" , \"type\" : \"ACInput\" , \"label\" : \"Value A\" , \"apply\" : \"number\" }, { \"name\" : \"valueB\" , \"type\" : \"ACInput\" , \"label\" : \"Value B\" , \"apply\" : \"number\" }, { \"name\" : \"add\" , \"type\" : \"ACSubmit\" , \"value\" : \"ADD\" , \"uri\" : \"/results\" } ] } Next, define an additional page to display the results. Here we use AutoConnectText to display the calculation as a representation string of the expression. There is one thing to watch out for here. That is, the transition destination of the action button as ADD that accept the operand (it is specified by the uri of the ACSubmit element named \"add\") and the uri of the page that displays the answer are the same. { \"uri\" : \"/results\" , \"title\" : \"Adder\" , \"menu\" : false , \"element\" : [ { \"name\" : \"results\" , \"type\" : \"ACText\" } ] } When implementing a custom web page handler, it's usually a good idea to pre-determine the page design (which consists of the elements and layouts you want to use) for a better outlook when coding your Sketch. Especially when coding a custom web page handler, you need to specify the AutoConnectElements exactly, and it is recommended to implement it along the JSON defined earlier. After this, sketch the handlers for the above two custom web pages. First, the handler for the page allocated to /add . The role of this handler is to initialize the values respectively for the valueA and valueB input boxes. Both of these two input boxes are on the /add page, so the handler only references the AutoConnectAux& aux argument. You can use the [] operator with the element name like as aux[\"valueA\"] to get a reference to an AutoConnectElement by name. Then, once the reference is converted to AutoConnectInput, the value member of AutoConnectInput can be accessed. Use the as<AutoConnectInput>() function to convert from the AutoConnectElement type to the actual AutoConnectInput type. String onAdd (AutoConnectAux & aux, PageArgument & args) { aux[ \"valueA\" ].as < AutoConnectInput > ().value = \"0\" ; aux[ \"valueB\" ].as < AutoConnectInput > ().value = \"0\" ; return String(); } Next, the handler for the page allocated to /results . The role of this handler is to add the value B to A for the calculation. The /results page does not have an element that contains the operands Value A and Value B to calculate. Only the /add page has them. The /results page handler is called when ACSubmit on the /add page works, so valueA and valueB are included in the form data of the HTTP POST request to the /results page. That is, the handler for the /results page will get valueA and valueB from the PageArgument& args argument. String onResults (AutoConnectAux & aux, PageArgument & args) { int valueA = args.arg( \"valueA\" ).toInt(); int valueB = args.arg( \"valueB\" ).toInt(); aux[ \"results\" ].as < AutoConnectText > ().value = String(valueA) + \" + \" + String(valueB) + \" = \" + String(valueA + valueB); return String(); } PageArgument is a built-in class in the PageBuilder library. You can use the PageArgument::arg function to retrieve the parameters of the form data contained in the POST request by name. Since the PageArgument::arg function returns the parameters of the POSTed form data as a string, it converts Value A and Value B to the operand integer value of the addition via the String::toInt() function. int valueA = args.arg( \"valueA\" ).toInt(); int valueB = args.arg( \"valueB\" ).toInt(); In this scenario, in addition to the calculation result, the calculation formula is also displayed on the result page. aux[ \"results\" ].as < AutoConnectText > ().value = String(valueA) + \" + \" + String(valueB) + \" = \" + String(valueA + valueB); The customWebpageHandler return value \u00b6 The customWebpageHandler returns a string. The returned string is used internally by AutoConnect to temporarily qualify the HTML generating of the custom web page. AutoConnect typically calls a custom web page handler before HTML generation. When the customWebpageHandler returns an HTML string for qualification, it applies to the drawing area for the elements of AutoConnectElements. Additionally, you can then specify where the modifier HTML will be inserted. The second parameter of the AutoConnectAux::on function, which allows the registration of custom web page handlers, indicates where to insert the modifier HTML. The Sketch can specify the following three values for the second parameter of AutoConnectAux::on function: AC_EXIT_AHEAD : Modifiers HTML returned by the custom Web page handler is inserted into the front of the list expansion of AutoConnectElements. AC_EXIT_LATER : Modifiers HTML returned by the custom Web page handler is inserted into the back of the list expansion of AutoConnectElements. AC_EXIT_BOTH : The customWebpageHandle will be called twice before and after list expansion of AutoConnectElements. A detailed description of the AutoConnectAux::on function can be found in Section AutoConnectAux API . The actual sketch code implemented following these steps above would look like this (case of ESP8266): #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> const char PAGE_ADD[] PROGMEM = R\"( { \"uri\": \"/add\", \"title\": \"Adder\", \"menu\": true, \"element\": [ { \"name\": \"valueA\", \"type\": \"ACInput\", \"label\": \"Value A\", \"apply\": \"number\" }, { \"name\": \"valueB\", \"type\": \"ACInput\", \"label\": \"Value B\", \"apply\": \"number\" }, { \"name\": \"add\", \"type\": \"ACSubmit\", \"value\": \"ADD\", \"uri\": \"/results\" } ] } )\" ; const char PAGE_RESULTS[] PROGMEM = R\"( { \"uri\": \"/results\", \"title\": \"Adder\", \"menu\": false, \"element\": [ { \"name\": \"results\", \"type\": \"ACText\" } ] } )\" ; AutoConnect portal; AutoConnectAux page_add; AutoConnectAux page_results; String onAdd (AutoConnectAux & aux, PageArgument & args) { aux[ \"valueA\" ].as < AutoConnectInput > ().value = \"0\" ; aux[ \"valueB\" ].as < AutoConnectInput > ().value = \"0\" ; return String(); } String onResults (AutoConnectAux & aux, PageArgument & args) { int valueA = args.arg( \"valueA\" ).toInt(); int valueB = args.arg( \"valueB\" ).toInt(); aux[ \"results\" ].as < AutoConnectText > ().value = String(valueA) + \" + \" + String(valueB) + \" = \" + String(valueA + valueB); return String(); } void setup () { delay( 1000 ); page_add.load(PAGE_ADD); page_results.load(PAGE_RESULTS); portal.join({ page_add, page_results }); portal.on( \"/add\" , onAdd); portal.on( \"/results\" , onResults); portal.begin(); } void loop () { portal.handleClient(); } 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 char * name) AutoConnectElement * AutoConnectAux :: getElement( const __FlashStringHelper * name) 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 <T> to an argument of the getElement. A type of <T> 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<T> 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<T> 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char addonJson[] PROGMEM = R\"raw( { \"title\": \"Hello\", \"uri\": \"/hello\", \"menu\": true, \"element\": [ { \"name\": \"feels\", \"type\": \"ACInput\", \"label\": \"What's up?\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"Just it!\", \"uri\": \"/feels\" } ] } )raw\" ; ESP8266WebServer webServer; AutoConnect portal (webServer); // Here, /feels handler void feelsOn () { // Retrieve the value of a input-box named \"feels\" String feel = webServer.arg( \"feels\" ); // Echo back the value String echo = \"<html><p style= \\\" color:blue;font-family:verdana;font-size:300%; \\\" >\" + feel + String( \" and a bold world!</p></html>\" ); webServer.send( 200 , \"text/html\" , echo); } void setup () { delay( 1000 ); webServer.on( \"/feels\" , feelsOn); // Register /feels handler portal.load(addonJson); // Load a custom Web page portal.begin(); } void loop () { portal.handleClient(); } An above example is the most simple sketch of handling values entered into a custom Web page. This sketch obtains the string entered in the AutoConnectInput named feels with the /feels handler after page transition, and the AutoConnectInput is an <input type=\"text\" name=\"feels\"> element wrapped in the form as the actual HTML code. Should be accessed /_ac first When you actually try the above sketch, there is no a root handler. So the URL that should be accessed first is /_ac concatenated with the local IP address of the esp8266 module. Another method is effective when custom Web pages have complicated page transitions. It is a way to straight access the AutoConnectElements member value. You can get the AutoConnectElement with the specified name using the getElement function. The following sketch executes the above example with AutoConnect only, without using the function of ESP8266WebServer. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> const static char addonJson[] PROGMEM = R\"raw( [ { \"title\": \"Hello\", \"uri\": \"/hello\", \"menu\": true, \"element\": [ { \"name\": \"feels\", \"type\": \"ACInput\", \"label\": \"What's up?\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"Just it!\", \"uri\": \"/feels\" } ] }, { \"title\": \"Hello\", \"uri\": \"/feels\", \"menu\": false, \"element\": [ { \"name\": \"echo\", \"type\": \"ACText\", \"style\": \"color:blue;font-family:verdana;font-size:300%;\" } ] } ] )raw\" ; AutoConnect portal; // Here, /feels handler String feelsOn (AutoConnectAux & aux, PageArgument & args) { // Get the AutoConnectInput named \"feels\". // The where() function returns 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( \"<p>This text has been added.</p>\" ); } How you can reach the values \u00b6 AutoConnectSubmit uses the POST method to send HTTP requests. A value of AutoConnectInput sent to the ESP8266 or ESP32 with POST is stored in the request body of the HTTP request: POST /feels HTTP/1.1 Host: ESP8266_IP_ADDRESS name1=value1&name2=value2&name3=value3 ESP8266WebServer class will parse the query string and rebuilds its arguments when the above request arrives. A custom page handler registered with the ESP8266WebServer::on function can access the value of AutoConnectElements with ESP8266WebServe::arg function. It reaches the values of AutoConnectElements without the intermediation of AutoConnect. Therefore, its handler will not be AutoConnectAux and can send a response to the client directly. The following example is part of a server sketch which has two web pages. The /hello page is a custom Web page of AutoConnectAux which has an input box named \"input1\". Another /echo page is a page handler for ESP8266WebServer, which uses the ESP8266WebServer::send function to echo back the value of an input1 as an http response. ESP8266WebServer server; AutoConnect portal (server); ACInput(input1, \"\" , \"INPUT\" ); ACSubmit(send, \"HELLO\" , \"/echo\" ); AutoConnectAux aux ( \"/hello\" , { input1, send }); server.on( \"/echo\" , []() { String echo = server.arg( \"input1\" ); Serial.println(echo); server.send( 200 , \"text/plain\" , echo); }); portal.join(aux); portal.begin(); Also, you can choose another way to access arguments without going through the ESP8266WebServer class. The PageArgument object of the custom Web page handler argument is a copy of the arg object of the ESP8266WebServer class. Either of these methods is a simple and easy way to access parameters in custom Web page handlers. However, if you need to access from outside of the handler to the value of AutoConnectElements, you need to accomplish it using with the AutoConnectAux::getElement function. The following sketch code replaces the above example with JSON and PageArgument, and its behaves is equivalent basically to the above sketch. const static char auxPage[] PROGMEM = R\"raw( [ { \"title\":\"Hello\", \"uri\":\"/hello\", \"menu\":true, \"element\":[ { \"name\":\"input1\", \"type\": \"ACInput\", \"label\": \"INPUT\" }, { \"name\":\"send\", \"type\":\"ACSubmit\", \"value\":\"HELLO\", \"uri\":\"/echo\" }] }, { \"title\":\"Echo\", \"uri\":\"/echo\", \"menu\":false, \"element\":[ { \"name\":\"echo\", \"type\":\"ACText\" }] } ] )raw\" ; AutoConnect portal; portal.load(auxPage); portal.on( \"/echo\" , [](AutoConnectAux & aux, PageArgument & args) { AutoConnectText & ac_echo = aux.getElement < AutoConnectText > ( \"echo\" ); ac_echo.value = args.arg( \"input1\" ); return String(); }); portal.begin(); 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 = \"<html>\" \"<head><meta name='viewport' content='width=device-width, initial-scale=1'></head>\" \"<body><div>INPUT: {{value}}</div></body>\" \"</html>\" ; 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 . Place HTML elements undefined in AutoConnectElements \u00b6 Of the many HTML elements for markup, AutoConnet can only support a limited number. If you are designing a custom web page and the elements you want are not in AutoConnectElements, consider using an AutoConnectElement. AutoConnectElement can be applied in many cases when trying to place HTML tag elements that are undefined in AutoConnectElemets on custom web pages. Not all of them work The strongest constraint is the heap size required to generate HTML for the entire custom Web page. AutoConnect creates a custom web page as a chunk of String. It's not a stream. Therefore, it may not be possible to generate long HTML pages. See also FAQ . Place a markup or a styled HTML tag \u00b6 If the HTML element you want to place is just the tag that makes up the appearance of the web page, assign the tag element directly to the value member of AutoConnectElement. If the tag you are trying to place is for static markup effects, just write the value as follows: { \"name\" : \"headline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr style='height:1px;border-width:0;color:gray;background-color:#52a6ed'>\" } If the element has a hierarchy like a <table> ~ </table> , describe the entire element in the value : { \"name\" : \"table\" , \"type\" : \"ACElement\" , \"value\" : \"<table><tr><th>Board</th><th>Platform</th></tr><tr><td>NodeMCU</td><td>Espressif8266</td></tr><tr><td>ESP32-DevKitC</td><td>Espressif32</td></tr></table>\" } Also, using AutoConnectStyle combined, you can give the style effect of only that element. { \"name\" : \"tablestyle\" , \"type\" : \"ACStyle\" , \"value\" : \"table.style{font-family:arial,sans-serif;border-collapse:collapse;width:100%;color:black;}table.style td,table.style th{border:1px solid #dddddd;text-align:center;padding:8px;}table.style tr:nth-child(even){background-color:#dddddd;}\" }, { \"name\" : \"table\" , \"type\" : \"ACElement\" , \"value\" : \"<table class='style'><tr><th>Board</th><th>Platform</th></tr><tr><td>NodeMCU</td><td>Espressif8266</td></tr><tr><td>ESP32-DevKitC</td><td>Espressif32</td></tr></table>\" } As you see it: Board Platform NodeMCU Espressif8266 ESP32-DevKitC Espressif32 Place the input elements within a form \u00b6 There is still no dedicated AutoConnectElement for entering other than equivalent to checkbox , file , number , password , radio and text for <input type=\"...\"> HTML element. But you can substitute them with the AutoConnectElement. For example, if you use the <input> element of type=\"date\" to place a field where you can enter a date, the AutoConnectElement would look like this: { \"name\" : \"date\" , \"type\" : \"ACElement\" , \"value\" : \"<label for='picker'>Date:</label><input type='date' id='picker' name='date'>\" } And it becomes a textbox that validates the input or a special date picker interface. Then, instead of accessing that AutoConnectElement directly, obtains entered date value from the POST body included in the HTTP request from the hosted ESP8266WebServer class. Its process carries out with the AutoConnectAux page handler following: String aux_page_handler (AutoConnectAux & aux, PageArgument & arg) { Serial.println(arg.arg( \"date\" )); // Obtain a date value entered return \"\" ; } AutoConnect passes a PageArgument to the AutoConnectAux page handler. The handler can use the PageArgument::arg function to get the parameters contained in the HTTP request for the page. Also, the equivalent can also be implemented using ESP8266WebServer::arg function with the ESP8266WebServer client request handler . Using JavaScript \u00b6 What is described in this section belongs to the tips of what effectiveness a web page can have using AutoConnectElement, rather than the correct usage for AutoConnect. You can use AutoConnectElement to embed JavaScript into the custom Web page as with HTML elements for markup. The reason for embedding JavaScript on a page depends on your requirements, but One of the most common requirements is the need to access elements of a web page. You can implement the requirements by having the AutoConnectElement have JavaScript that contains DOM access. The following screenshot shows an example of accessing AutoConnectText via the DOM using an AutoConnectElement with JavaScript. This web page is a very simple example and returns the result of multiplying the multiplier entered in an AutoConnectInput field. This custom Web page is generated from the following JSON document: { \"uri\" : \"/jselement\" , \"title\" : \"Multiply\" , \"menu\" : true , \"element\" : [ { \"name\" : \"multiplier\" , \"type\" : \"ACInput\" , \"label\" : \"3 &times; \" , \"apply\" : \"number\" , \"posterior\" : \"none\" }, { \"name\" : \"op\" , \"type\" : \"ACButton\" , \"value\" : \" = \" , \"action\" : \"multi()\" , \"posterior\" : \"none\" }, { \"name\" : \"answer\" , \"type\" : \"ACText\" }, { \"name\" : \"js\" , \"type\" : \"ACElement\" , \"value\" : \"<script type='text/javascript'>function multi() {document.getElementById('answer').innerHTML=3*document.getElementById('multiplier').value;}</script>\" } ] } An input field for a multiplier is defined by AutoConnectInput. The field for displaying the results exists with the name answer . The multiplication function is what AutoConnectElement has as JavaScript and it has the following content: function multi () { document. getElementById ( 'answer' ). innerHTML = 3 * document. getElementById ( 'multiplier' ). value ; } And the action for calling the multi() function is the = labeled button as the AutoConnectButton element. AutoConnect generates the name attribute of each AutoConnectElement as the Id of the HTML tag. The Id should be useful for DOM access. JavaScript that is too long can cause insufficient memory If it reaches thousands of bytes, AutoConnect will not be able to complete the HTML generation for the page. Communicate with the Sketch using XHR \u00b6 AutoConnectElement allows having scripts that create sessions based on XHR . XMLHttpRequest (XHR) is a JavaScript API to create AJAX requests. Its methods provide the ability to send network requests between the browser and a server. The Sketch simply implements the server-side process as a response handler to a normal HTTP request and can equip with a dynamic custom Web page. This technique is tricky but does not cause page transitions and is useful for implementing dynamic pages. As a matter of fact, AutoConnectOTA class is implemented by using this technique and is a custom Web page by AutoConnectAux. Here's a simple example of JavaScript-based on XHR and a server-side request handler. It's like a clock that displays the time in real-time on an AutoConnect custom web page. The sketch in the following example is roughly divided into two structures. The AutoConnectElement defined with the name js gets the server time with XHR and updates the response via the DOM with the AutoConnectText named time and substance is the following JavaScript: var xhr ; function clock () { xhr . open ( 'GET' , '/clock' ); xhr . responseType = 'text' ; xhr . send (); } window. onclose = function () { xhr . abort (); }; window. onload = function () { xhr = new XMLHttpRequest (); xhr . onreadystatechange = function () { if ( this . readyState == 4 && xhr . status == 200 ) { document. getElementById ( 'time' ). innerHTML = this . responseText ; } }; setInterval ( clock , 1000 ); }; This script issues a GET request to /clock every second and updates the element of Id= time with the text content of its response. As this script shows, it will issue a send request using the XMLHttpRequest object. The other component is located on the AutoConnect-hosted ESP8266WebServer server. This component gets the current time from the NTP server and sends the value as text to the client. void auxClock () { time_t t; struct tm * tm; char dateTime[ 24 ]; t = time(NULL); tm = localtime( & t); sprintf(dateTime, \"%04d/%02d/%02d %02d:%02d:%02d.\" , tm -> tm_year + 1900 , tm -> tm_mon + 1 , tm -> tm_mday, tm -> tm_hour, tm -> tm_min, tm -> tm_sec); server.send( 200 , \"text/plain\" , dateTime); } Then just register the auxClock function as a /clock URL handler with the hosted ESP8266Server instance. server.on( \"/clock\" , auxClock); As you can see from the above two components, AutoConnect does not intervene in those communications and no page transitions occur. A complete sketch that integrates the above components and includes a custom Web page declaration for time display looks like this: #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> #include <time.h> static const char JSPAGE[] PROGMEM = R\"'( { \"uri\": \"/jselement\", \"title\": \"Clock\", \"menu\": true, \"element\": [ { \"name\": \"time\", \"type\": \"ACText\" }, { \"name\": \"js\", \"type\": \"ACElement\", \"value\": \"<script type='text/javascript'>var xhr;function clock(){xhr.open('GET', '/clock');xhr.responseType='text';xhr.send();}window.onclose=function(){xhr.abort();};window.onload=function(){xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState==4&&xhr.status==200){document.getElementById('time').innerHTML=this.responseText;}};setInterval(clock,1000);};</script>\" } ] } )'\" ; ESP8266WebServer server; AutoConnect portal (server); void auxClock () { time_t t; struct tm * tm; char dateTime[ 24 ]; t = time(NULL); tm = localtime( & t); sprintf(dateTime, \"%04d/%02d/%02d %02d:%02d:%02d.\" , tm -> tm_year + 1900 , tm -> tm_mon + 1 , tm -> tm_mday, tm -> tm_hour, tm -> tm_min, tm -> tm_sec); server.send( 200 , \"text/plain\" , dateTime); } void setup () { delay( 1000 ); portal.load(FPSTR(JSPAGE)); if (portal.begin()) { server.on( \"/clock\" , auxClock); configTime( 0 , 0 , \"europe.pool.ntp.org\" ); } } void loop () { portal.handleClient(); } 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const auxPage[] PROGMEM = R\"raw( { \"title\": \"Page-1\", \"uri\": \"/page1\", \"menu\": true, \"element\": [ { \"name\":\"Server\", \"type\":\"ACText\", \"label\":\"Server address\" } ] } )raw\" ; AutoConnect portal; void setup () { // This declaration is wrong. AutoConnectAux aux; aux.load(auxPage); portal.join(aux); portal.begin(); } void loop () { portal.handleClient(); } The URI of the custom Web pages \u00b6 The transition of the custom Web page follows the URI of the page, but the ESP8266WebServer class does not know the URI of an AutoConnectAux page. (Registering a custom Web page does not use the ESP8266WebServer::on / WebServer::on function.) Therefore ESP8266WebServer class does not detect its URI access. If you want to detect an http request to AutoConnectAux's custom Web page, you need to register its URI with the AutoConnectAux::on function. In addition to this, there are restrictions in the handler for the custom Web page as shown in the following section. An HTTP response from the custom Web page handler \u00b6 Normally, a custom web page handler does not need to respond to a request from the client. Its HTTP response will be sent by AutoConnect when it returns from the custom web page handler. In that case, the HTTP response code is 200. However, this structure requires AutoConnectAux to always respond with the page content. If AutoConnectAux does not have page content as an HTTP response, then the custom web page handler can respond with its own HTTP response by following the steps: Declare an AutoConnectAux with the responsive argument set to false , or describe \"response\" : false with JSON: AutoConnectAux aux ( \"/aux\" , \"AUX\" , false, {}, false); { \"title\" : \"AUX\" , \"uri\" : \"/aux\" , \"response\" : false , \"menu\" : false } Send an HTTP response from a custom web page handler (Case of ESP32): WebServer server; AutoConnect portal (server); String handleAux (AutoConnectAux & aux, PageArgument & args) { server.send( 202 , \"text/plain\" , \"Accepted\" ); return String(); } portal.on( \"/aux\" , handleAux); If you want to respond with a 302 from a custom web page handler, you can use the AutoConnectAux::redirect function. String handleAux (AutoConnectAux & aux, PageArgument & args) { aux.redirect( \"http://redirect.url:port/?query\" ); return String(); } 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#custom-web-page-handler-programming-model","text":"To handle Custom Web pages properly, the sketches need to implement to match the programming model. Custom Web page programming model is depicted as follows: Custom Web page handler acts as an event handler for processing the HTTP request captured by the WebServer class. The WebServer class parses the HTTP request and calls the registered uri handler appropriately. The custom web page uri (it should be specified by the JSON description for the custom web page, the AutoConnectAux constructor , or the AutoConnect::on function) is not registered directly with the WebServer class, and the Requests always go through the request dispatcher inside AutoConnect. When implementing the custom Web page handler, it is possible to give an appropriate function to the handler by understanding the above internal structure in advance. Custom web page handler can be sketched as regular function and has interface is as follows: String customWebpageHandler(AutoConnectAux & aux, PageArgument & args)","title":"Custom Web page handler programming model"},{"location":"achandling.html#parameters-for-the-customwebagehandler","text":"When the custom web page handler is called, AutoConnect passes the following two parameters:","title":" Parameters for the customWebageHandler"},{"location":"achandling.html#1-reference-to-the-autoconnectaux-instance","text":"Custom Web page handlers can access the AutoConnectElements owned by its page through a reference to the AutoConnectAux instance. It can use this access to update the AutoConnectElements value before the user views the page or get the value of AutoConnectElements owned by the page that triggered the transition. A list of commonly used functions to access AutoConnectElements with your Sketch via reference to an AutoConnectAux instance is following: [] operator : Access to an AutoConnectElement by specified element name. getElement function : Access to an AutoConnectElement by specified element name. as<> function : Cast from a variant of AutoConnectElemnet type to an actual type such as AutoConnectText or AutoConnectInput etc. To access attributes that exist only in the actual type, it is necessary to convert from the AutoConnectElement type obtained with [] operator or getElement function. See the section Get AutoConnectElement from the AutoConnectAux and the section AutoConnectElements API for usage examples and API specifications for each above function.","title":"1. Reference to the AutoConnectAux instance"},{"location":"achandling.html#2-reference-to-the-pageargument-instance","text":"The values of the AutoConnectCheckbox , AutoConnectFile , AutoConnectInput , AutoConnectRadio , and AutoConnectSelect elements are packed into the form data of the HTTP POST method by the page transition caused by AutoConnectSubmit . Use the PageArgument instance to retrieve the values of these transmitted AutoConnectElements with the customWebpageHandler. A list of commonly used functions to access PageArgment member variables with your Sketch via a reference to an PageArgument instance is following: arg function : Get an element value by specified element name. hasArg function : Checks for the existence of an element with the specified name. The method to get the form data attached to the HTTP request via PageArgument is described with the section How you can reach the values .","title":"2. Reference to the PageArgument instance"},{"location":"achandling.html#3-access-to-the-autoconnectelement-values","text":"Here, you have one thing to note. The custom web page handler registered with AutoConnect::on function is called to respond to an HTTP request to the URL of its page. And, the AutoConnectAux instance then references the custom web page assigned to the requested URL. That is, the AutoConnectAux instance passed to the custom web page handler owns the AutoConnectElements for that page, while the PageArgument instance has the AutoConnectElements value of the custom web page that caused the page transition. You need to keep the difference between the two in mind when implementing the custom web page handler with your Sketch and access these values via the appropriate approach. You can access the AutoConnect Elements of the custom web page itself via the AutoConnectAux& argument by specifying the element name. You can also use the PageArgument& argument to get the value of AutoConnectElements for the page that caused the transition to that custom web page. (the URL that issued the HTTP request) The following screenshots are outputs of custom web pages that are based on a scenario to help you understand how to access AutoConnectElements properly with a custom web page handler. The requirements for this scenario are: Calculate an addition simply, add B to A . Perform the calculation with a customWebPageHandler. Returns the calculated result in another custom web page with page transitions. The first thing to work on is defining two custom web pages. Here, Value A and Value B are easily defined by applying AutoConnectInput . Also, add an action button to perform the calculation with AutoConnectSubmit . { \"uri\" : \"/add\" , \"title\" : \"Adder\" , \"menu\" : true , \"element\" : [ { \"name\" : \"valueA\" , \"type\" : \"ACInput\" , \"label\" : \"Value A\" , \"apply\" : \"number\" }, { \"name\" : \"valueB\" , \"type\" : \"ACInput\" , \"label\" : \"Value B\" , \"apply\" : \"number\" }, { \"name\" : \"add\" , \"type\" : \"ACSubmit\" , \"value\" : \"ADD\" , \"uri\" : \"/results\" } ] } Next, define an additional page to display the results. Here we use AutoConnectText to display the calculation as a representation string of the expression. There is one thing to watch out for here. That is, the transition destination of the action button as ADD that accept the operand (it is specified by the uri of the ACSubmit element named \"add\") and the uri of the page that displays the answer are the same. { \"uri\" : \"/results\" , \"title\" : \"Adder\" , \"menu\" : false , \"element\" : [ { \"name\" : \"results\" , \"type\" : \"ACText\" } ] } When implementing a custom web page handler, it's usually a good idea to pre-determine the page design (which consists of the elements and layouts you want to use) for a better outlook when coding your Sketch. Especially when coding a custom web page handler, you need to specify the AutoConnectElements exactly, and it is recommended to implement it along the JSON defined earlier. After this, sketch the handlers for the above two custom web pages. First, the handler for the page allocated to /add . The role of this handler is to initialize the values respectively for the valueA and valueB input boxes. Both of these two input boxes are on the /add page, so the handler only references the AutoConnectAux& aux argument. You can use the [] operator with the element name like as aux[\"valueA\"] to get a reference to an AutoConnectElement by name. Then, once the reference is converted to AutoConnectInput, the value member of AutoConnectInput can be accessed. Use the as<AutoConnectInput>() function to convert from the AutoConnectElement type to the actual AutoConnectInput type. String onAdd (AutoConnectAux & aux, PageArgument & args) { aux[ \"valueA\" ].as < AutoConnectInput > ().value = \"0\" ; aux[ \"valueB\" ].as < AutoConnectInput > ().value = \"0\" ; return String(); } Next, the handler for the page allocated to /results . The role of this handler is to add the value B to A for the calculation. The /results page does not have an element that contains the operands Value A and Value B to calculate. Only the /add page has them. The /results page handler is called when ACSubmit on the /add page works, so valueA and valueB are included in the form data of the HTTP POST request to the /results page. That is, the handler for the /results page will get valueA and valueB from the PageArgument& args argument. String onResults (AutoConnectAux & aux, PageArgument & args) { int valueA = args.arg( \"valueA\" ).toInt(); int valueB = args.arg( \"valueB\" ).toInt(); aux[ \"results\" ].as < AutoConnectText > ().value = String(valueA) + \" + \" + String(valueB) + \" = \" + String(valueA + valueB); return String(); } PageArgument is a built-in class in the PageBuilder library. You can use the PageArgument::arg function to retrieve the parameters of the form data contained in the POST request by name. Since the PageArgument::arg function returns the parameters of the POSTed form data as a string, it converts Value A and Value B to the operand integer value of the addition via the String::toInt() function. int valueA = args.arg( \"valueA\" ).toInt(); int valueB = args.arg( \"valueB\" ).toInt(); In this scenario, in addition to the calculation result, the calculation formula is also displayed on the result page. aux[ \"results\" ].as < AutoConnectText > ().value = String(valueA) + \" + \" + String(valueB) + \" = \" + String(valueA + valueB);","title":"3. Access to the AutoConnectElement values"},{"location":"achandling.html#the-customwebpagehandler-return-value","text":"The customWebpageHandler returns a string. The returned string is used internally by AutoConnect to temporarily qualify the HTML generating of the custom web page. AutoConnect typically calls a custom web page handler before HTML generation. When the customWebpageHandler returns an HTML string for qualification, it applies to the drawing area for the elements of AutoConnectElements. Additionally, you can then specify where the modifier HTML will be inserted. The second parameter of the AutoConnectAux::on function, which allows the registration of custom web page handlers, indicates where to insert the modifier HTML. The Sketch can specify the following three values for the second parameter of AutoConnectAux::on function: AC_EXIT_AHEAD : Modifiers HTML returned by the custom Web page handler is inserted into the front of the list expansion of AutoConnectElements. AC_EXIT_LATER : Modifiers HTML returned by the custom Web page handler is inserted into the back of the list expansion of AutoConnectElements. AC_EXIT_BOTH : The customWebpageHandle will be called twice before and after list expansion of AutoConnectElements. A detailed description of the AutoConnectAux::on function can be found in Section AutoConnectAux API . The actual sketch code implemented following these steps above would look like this (case of ESP8266): #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> const char PAGE_ADD[] PROGMEM = R\"( { \"uri\": \"/add\", \"title\": \"Adder\", \"menu\": true, \"element\": [ { \"name\": \"valueA\", \"type\": \"ACInput\", \"label\": \"Value A\", \"apply\": \"number\" }, { \"name\": \"valueB\", \"type\": \"ACInput\", \"label\": \"Value B\", \"apply\": \"number\" }, { \"name\": \"add\", \"type\": \"ACSubmit\", \"value\": \"ADD\", \"uri\": \"/results\" } ] } )\" ; const char PAGE_RESULTS[] PROGMEM = R\"( { \"uri\": \"/results\", \"title\": \"Adder\", \"menu\": false, \"element\": [ { \"name\": \"results\", \"type\": \"ACText\" } ] } )\" ; AutoConnect portal; AutoConnectAux page_add; AutoConnectAux page_results; String onAdd (AutoConnectAux & aux, PageArgument & args) { aux[ \"valueA\" ].as < AutoConnectInput > ().value = \"0\" ; aux[ \"valueB\" ].as < AutoConnectInput > ().value = \"0\" ; return String(); } String onResults (AutoConnectAux & aux, PageArgument & args) { int valueA = args.arg( \"valueA\" ).toInt(); int valueB = args.arg( \"valueB\" ).toInt(); aux[ \"results\" ].as < AutoConnectText > ().value = String(valueA) + \" + \" + String(valueB) + \" = \" + String(valueA + valueB); return String(); } void setup () { delay( 1000 ); page_add.load(PAGE_ADD); page_results.load(PAGE_RESULTS); portal.join({ page_add, page_results }); portal.on( \"/add\" , onAdd); portal.on( \"/results\" , onResults); portal.begin(); } void loop () { portal.handleClient(); }","title":" The customWebpageHandler return value"},{"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 char * name) AutoConnectElement * AutoConnectAux :: getElement( const __FlashStringHelper * name) 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 <T> to an argument of the getElement. A type of <T> 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<T> 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<T> 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> 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 &amp; 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 &amp; 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char addonJson[] PROGMEM = R\"raw( { \"title\": \"Hello\", \"uri\": \"/hello\", \"menu\": true, \"element\": [ { \"name\": \"feels\", \"type\": \"ACInput\", \"label\": \"What's up?\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"Just it!\", \"uri\": \"/feels\" } ] } )raw\" ; ESP8266WebServer webServer; AutoConnect portal (webServer); // Here, /feels handler void feelsOn () { // Retrieve the value of a input-box named \"feels\" String feel = webServer.arg( \"feels\" ); // Echo back the value String echo = \"<html><p style= \\\" color:blue;font-family:verdana;font-size:300%; \\\" >\" + feel + String( \" and a bold world!</p></html>\" ); webServer.send( 200 , \"text/html\" , echo); } void setup () { delay( 1000 ); webServer.on( \"/feels\" , feelsOn); // Register /feels handler portal.load(addonJson); // Load a custom Web page portal.begin(); } void loop () { portal.handleClient(); } An above example is the most simple sketch of handling values entered into a custom Web page. This sketch obtains the string entered in the AutoConnectInput named feels with the /feels handler after page transition, and the AutoConnectInput is an <input type=\"text\" name=\"feels\"> element wrapped in the form as the actual HTML code. Should be accessed /_ac first When you actually try the above sketch, there is no a root handler. So the URL that should be accessed first is /_ac concatenated with the local IP address of the esp8266 module. Another method is effective when custom Web pages have complicated page transitions. It is a way to straight access the AutoConnectElements member value. You can get the AutoConnectElement with the specified name using the getElement function. The following sketch executes the above example with AutoConnect only, without using the function of ESP8266WebServer. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> const static char addonJson[] PROGMEM = R\"raw( [ { \"title\": \"Hello\", \"uri\": \"/hello\", \"menu\": true, \"element\": [ { \"name\": \"feels\", \"type\": \"ACInput\", \"label\": \"What's up?\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"Just it!\", \"uri\": \"/feels\" } ] }, { \"title\": \"Hello\", \"uri\": \"/feels\", \"menu\": false, \"element\": [ { \"name\": \"echo\", \"type\": \"ACText\", \"style\": \"color:blue;font-family:verdana;font-size:300%;\" } ] } ] )raw\" ; AutoConnect portal; // Here, /feels handler String feelsOn (AutoConnectAux & aux, PageArgument & args) { // Get the AutoConnectInput named \"feels\". // The where() function returns 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( \"<p>This text has been added.</p>\" ); }","title":" When setting the initial values"},{"location":"achandling.html#how-you-can-reach-the-values","text":"AutoConnectSubmit uses the POST method to send HTTP requests. A value of AutoConnectInput sent to the ESP8266 or ESP32 with POST is stored in the request body of the HTTP request: POST /feels HTTP/1.1 Host: ESP8266_IP_ADDRESS name1=value1&name2=value2&name3=value3 ESP8266WebServer class will parse the query string and rebuilds its arguments when the above request arrives. A custom page handler registered with the ESP8266WebServer::on function can access the value of AutoConnectElements with ESP8266WebServe::arg function. It reaches the values of AutoConnectElements without the intermediation of AutoConnect. Therefore, its handler will not be AutoConnectAux and can send a response to the client directly. The following example is part of a server sketch which has two web pages. The /hello page is a custom Web page of AutoConnectAux which has an input box named \"input1\". Another /echo page is a page handler for ESP8266WebServer, which uses the ESP8266WebServer::send function to echo back the value of an input1 as an http response. ESP8266WebServer server; AutoConnect portal (server); ACInput(input1, \"\" , \"INPUT\" ); ACSubmit(send, \"HELLO\" , \"/echo\" ); AutoConnectAux aux ( \"/hello\" , { input1, send }); server.on( \"/echo\" , []() { String echo = server.arg( \"input1\" ); Serial.println(echo); server.send( 200 , \"text/plain\" , echo); }); portal.join(aux); portal.begin(); Also, you can choose another way to access arguments without going through the ESP8266WebServer class. The PageArgument object of the custom Web page handler argument is a copy of the arg object of the ESP8266WebServer class. Either of these methods is a simple and easy way to access parameters in custom Web page handlers. However, if you need to access from outside of the handler to the value of AutoConnectElements, you need to accomplish it using with the AutoConnectAux::getElement function. The following sketch code replaces the above example with JSON and PageArgument, and its behaves is equivalent basically to the above sketch. const static char auxPage[] PROGMEM = R\"raw( [ { \"title\":\"Hello\", \"uri\":\"/hello\", \"menu\":true, \"element\":[ { \"name\":\"input1\", \"type\": \"ACInput\", \"label\": \"INPUT\" }, { \"name\":\"send\", \"type\":\"ACSubmit\", \"value\":\"HELLO\", \"uri\":\"/echo\" }] }, { \"title\":\"Echo\", \"uri\":\"/echo\", \"menu\":false, \"element\":[ { \"name\":\"echo\", \"type\":\"ACText\" }] } ] )raw\" ; AutoConnect portal; portal.load(auxPage); portal.on( \"/echo\" , [](AutoConnectAux & aux, PageArgument & args) { AutoConnectText & ac_echo = aux.getElement < AutoConnectText > ( \"echo\" ); ac_echo.value = args.arg( \"input1\" ); return String(); }); portal.begin();","title":" How you can reach the values"},{"location":"achandling.html#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 = \"<html>\" \"<head><meta name='viewport' content='width=device-width, initial-scale=1'></head>\" \"<body><div>INPUT: {{value}}</div></body>\" \"</html>\" ; 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#place-html-elements-undefined-in-autoconnectelements","text":"Of the many HTML elements for markup, AutoConnet can only support a limited number. If you are designing a custom web page and the elements you want are not in AutoConnectElements, consider using an AutoConnectElement. AutoConnectElement can be applied in many cases when trying to place HTML tag elements that are undefined in AutoConnectElemets on custom web pages. Not all of them work The strongest constraint is the heap size required to generate HTML for the entire custom Web page. AutoConnect creates a custom web page as a chunk of String. It's not a stream. Therefore, it may not be possible to generate long HTML pages. See also FAQ .","title":"Place HTML elements undefined in AutoConnectElements"},{"location":"achandling.html#place-a-markup-or-a-styled-html-tag","text":"If the HTML element you want to place is just the tag that makes up the appearance of the web page, assign the tag element directly to the value member of AutoConnectElement. If the tag you are trying to place is for static markup effects, just write the value as follows: { \"name\" : \"headline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr style='height:1px;border-width:0;color:gray;background-color:#52a6ed'>\" } If the element has a hierarchy like a <table> ~ </table> , describe the entire element in the value : { \"name\" : \"table\" , \"type\" : \"ACElement\" , \"value\" : \"<table><tr><th>Board</th><th>Platform</th></tr><tr><td>NodeMCU</td><td>Espressif8266</td></tr><tr><td>ESP32-DevKitC</td><td>Espressif32</td></tr></table>\" } Also, using AutoConnectStyle combined, you can give the style effect of only that element. { \"name\" : \"tablestyle\" , \"type\" : \"ACStyle\" , \"value\" : \"table.style{font-family:arial,sans-serif;border-collapse:collapse;width:100%;color:black;}table.style td,table.style th{border:1px solid #dddddd;text-align:center;padding:8px;}table.style tr:nth-child(even){background-color:#dddddd;}\" }, { \"name\" : \"table\" , \"type\" : \"ACElement\" , \"value\" : \"<table class='style'><tr><th>Board</th><th>Platform</th></tr><tr><td>NodeMCU</td><td>Espressif8266</td></tr><tr><td>ESP32-DevKitC</td><td>Espressif32</td></tr></table>\" } As you see it: Board Platform NodeMCU Espressif8266 ESP32-DevKitC Espressif32","title":" Place a markup or a styled HTML tag"},{"location":"achandling.html#place-the-input-elements-within-a-form","text":"There is still no dedicated AutoConnectElement for entering other than equivalent to checkbox , file , number , password , radio and text for <input type=\"...\"> HTML element. But you can substitute them with the AutoConnectElement. For example, if you use the <input> element of type=\"date\" to place a field where you can enter a date, the AutoConnectElement would look like this: { \"name\" : \"date\" , \"type\" : \"ACElement\" , \"value\" : \"<label for='picker'>Date:</label><input type='date' id='picker' name='date'>\" } And it becomes a textbox that validates the input or a special date picker interface. Then, instead of accessing that AutoConnectElement directly, obtains entered date value from the POST body included in the HTTP request from the hosted ESP8266WebServer class. Its process carries out with the AutoConnectAux page handler following: String aux_page_handler (AutoConnectAux & aux, PageArgument & arg) { Serial.println(arg.arg( \"date\" )); // Obtain a date value entered return \"\" ; } AutoConnect passes a PageArgument to the AutoConnectAux page handler. The handler can use the PageArgument::arg function to get the parameters contained in the HTTP request for the page. Also, the equivalent can also be implemented using ESP8266WebServer::arg function with the ESP8266WebServer client request handler .","title":" Place the input elements within a form"},{"location":"achandling.html#using-javascript","text":"What is described in this section belongs to the tips of what effectiveness a web page can have using AutoConnectElement, rather than the correct usage for AutoConnect. You can use AutoConnectElement to embed JavaScript into the custom Web page as with HTML elements for markup. The reason for embedding JavaScript on a page depends on your requirements, but One of the most common requirements is the need to access elements of a web page. You can implement the requirements by having the AutoConnectElement have JavaScript that contains DOM access. The following screenshot shows an example of accessing AutoConnectText via the DOM using an AutoConnectElement with JavaScript. This web page is a very simple example and returns the result of multiplying the multiplier entered in an AutoConnectInput field. This custom Web page is generated from the following JSON document: { \"uri\" : \"/jselement\" , \"title\" : \"Multiply\" , \"menu\" : true , \"element\" : [ { \"name\" : \"multiplier\" , \"type\" : \"ACInput\" , \"label\" : \"3 &times; \" , \"apply\" : \"number\" , \"posterior\" : \"none\" }, { \"name\" : \"op\" , \"type\" : \"ACButton\" , \"value\" : \" = \" , \"action\" : \"multi()\" , \"posterior\" : \"none\" }, { \"name\" : \"answer\" , \"type\" : \"ACText\" }, { \"name\" : \"js\" , \"type\" : \"ACElement\" , \"value\" : \"<script type='text/javascript'>function multi() {document.getElementById('answer').innerHTML=3*document.getElementById('multiplier').value;}</script>\" } ] } An input field for a multiplier is defined by AutoConnectInput. The field for displaying the results exists with the name answer . The multiplication function is what AutoConnectElement has as JavaScript and it has the following content: function multi () { document. getElementById ( 'answer' ). innerHTML = 3 * document. getElementById ( 'multiplier' ). value ; } And the action for calling the multi() function is the = labeled button as the AutoConnectButton element. AutoConnect generates the name attribute of each AutoConnectElement as the Id of the HTML tag. The Id should be useful for DOM access. JavaScript that is too long can cause insufficient memory If it reaches thousands of bytes, AutoConnect will not be able to complete the HTML generation for the page.","title":" Using JavaScript"},{"location":"achandling.html#communicate-with-the-sketch-using-xhr","text":"AutoConnectElement allows having scripts that create sessions based on XHR . XMLHttpRequest (XHR) is a JavaScript API to create AJAX requests. Its methods provide the ability to send network requests between the browser and a server. The Sketch simply implements the server-side process as a response handler to a normal HTTP request and can equip with a dynamic custom Web page. This technique is tricky but does not cause page transitions and is useful for implementing dynamic pages. As a matter of fact, AutoConnectOTA class is implemented by using this technique and is a custom Web page by AutoConnectAux. Here's a simple example of JavaScript-based on XHR and a server-side request handler. It's like a clock that displays the time in real-time on an AutoConnect custom web page. The sketch in the following example is roughly divided into two structures. The AutoConnectElement defined with the name js gets the server time with XHR and updates the response via the DOM with the AutoConnectText named time and substance is the following JavaScript: var xhr ; function clock () { xhr . open ( 'GET' , '/clock' ); xhr . responseType = 'text' ; xhr . send (); } window. onclose = function () { xhr . abort (); }; window. onload = function () { xhr = new XMLHttpRequest (); xhr . onreadystatechange = function () { if ( this . readyState == 4 && xhr . status == 200 ) { document. getElementById ( 'time' ). innerHTML = this . responseText ; } }; setInterval ( clock , 1000 ); }; This script issues a GET request to /clock every second and updates the element of Id= time with the text content of its response. As this script shows, it will issue a send request using the XMLHttpRequest object. The other component is located on the AutoConnect-hosted ESP8266WebServer server. This component gets the current time from the NTP server and sends the value as text to the client. void auxClock () { time_t t; struct tm * tm; char dateTime[ 24 ]; t = time(NULL); tm = localtime( & t); sprintf(dateTime, \"%04d/%02d/%02d %02d:%02d:%02d.\" , tm -> tm_year + 1900 , tm -> tm_mon + 1 , tm -> tm_mday, tm -> tm_hour, tm -> tm_min, tm -> tm_sec); server.send( 200 , \"text/plain\" , dateTime); } Then just register the auxClock function as a /clock URL handler with the hosted ESP8266Server instance. server.on( \"/clock\" , auxClock); As you can see from the above two components, AutoConnect does not intervene in those communications and no page transitions occur. A complete sketch that integrates the above components and includes a custom Web page declaration for time display looks like this: #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> #include <time.h> static const char JSPAGE[] PROGMEM = R\"'( { \"uri\": \"/jselement\", \"title\": \"Clock\", \"menu\": true, \"element\": [ { \"name\": \"time\", \"type\": \"ACText\" }, { \"name\": \"js\", \"type\": \"ACElement\", \"value\": \"<script type='text/javascript'>var xhr;function clock(){xhr.open('GET', '/clock');xhr.responseType='text';xhr.send();}window.onclose=function(){xhr.abort();};window.onload=function(){xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState==4&&xhr.status==200){document.getElementById('time').innerHTML=this.responseText;}};setInterval(clock,1000);};</script>\" } ] } )'\" ; ESP8266WebServer server; AutoConnect portal (server); void auxClock () { time_t t; struct tm * tm; char dateTime[ 24 ]; t = time(NULL); tm = localtime( & t); sprintf(dateTime, \"%04d/%02d/%02d %02d:%02d:%02d.\" , tm -> tm_year + 1900 , tm -> tm_mon + 1 , tm -> tm_mday, tm -> tm_hour, tm -> tm_min, tm -> tm_sec); server.send( 200 , \"text/plain\" , dateTime); } void setup () { delay( 1000 ); portal.load(FPSTR(JSPAGE)); if (portal.begin()) { server.on( \"/clock\" , auxClock); configTime( 0 , 0 , \"europe.pool.ntp.org\" ); } } void loop () { portal.handleClient(); }","title":" Communicate with the Sketch using XHR"},{"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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const auxPage[] PROGMEM = R\"raw( { \"title\": \"Page-1\", \"uri\": \"/page1\", \"menu\": true, \"element\": [ { \"name\":\"Server\", \"type\":\"ACText\", \"label\":\"Server address\" } ] } )raw\" ; AutoConnect portal; void setup () { // This declaration is wrong. AutoConnectAux aux; aux.load(auxPage); portal.join(aux); portal.begin(); } void loop () { portal.handleClient(); }","title":"Scope &amp; 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#an-http-response-from-the-custom-web-page-handler","text":"Normally, a custom web page handler does not need to respond to a request from the client. Its HTTP response will be sent by AutoConnect when it returns from the custom web page handler. In that case, the HTTP response code is 200. However, this structure requires AutoConnectAux to always respond with the page content. If AutoConnectAux does not have page content as an HTTP response, then the custom web page handler can respond with its own HTTP response by following the steps: Declare an AutoConnectAux with the responsive argument set to false , or describe \"response\" : false with JSON: AutoConnectAux aux ( \"/aux\" , \"AUX\" , false, {}, false); { \"title\" : \"AUX\" , \"uri\" : \"/aux\" , \"response\" : false , \"menu\" : false } Send an HTTP response from a custom web page handler (Case of ESP32): WebServer server; AutoConnect portal (server); String handleAux (AutoConnectAux & aux, PageArgument & args) { server.send( 202 , \"text/plain\" , \"Accepted\" ); return String(); } portal.on( \"/aux\" , handleAux); If you want to respond with a 302 from a custom web page handler, you can use the AutoConnectAux::redirect function. String handleAux (AutoConnectAux & aux, PageArgument & args) { aux.redirect( \"http://redirect.url:port/?query\" ); return String(); }","title":"An HTTP response from the custom Web page handler"},{"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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <FS.h> #include <AutoConnect.h> AutoConnect portal; void setup () { SPIFFS.begin(); File page = SPIFFS.open( \"/custom_page.json\" , \"r\" ); portal.load(page); page.close(); SPIFFS.end(); portal.begin(); } void loop () { portal.handleClient(); } Passing parameters with sketches and custom Web pages \u00b6 A sketch can access variables of AutoConnectElements 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; ACText(header, \"MQTT broker settings\" ); ACText(caption1, \"Publishing the WiFi...\" ); ACSubmit(save, \"SAVE\" , \"/mqtt_save\" ); AutoConnectAux aux1 ( \"/mqtt_setting\" , \"MQTT Setting\" , true, { 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <FS.h> #include <AutoConnect.h> AutoConnect portal; void setup () { SPIFFS.begin(); File page = SPIFFS.open( \"/custom_page.json\" , \"r\" ); portal.load(page); page.close(); SPIFFS.end(); portal.begin(); } void loop () { portal.handleClient(); }","title":"Write the custom Web page with JSON"},{"location":"acintro.html#passing-parameters-with-sketches-and-custom-web-pages","text":"A sketch can access variables of AutoConnectElements 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; ACText(header, \"MQTT broker settings\" ); ACText(caption1, \"Publishing the WiFi...\" ); ACSubmit(save, \"SAVE\" , \"/mqtt_save\" ); AutoConnectAux aux1 ( \"/mqtt_setting\" , \"MQTT Setting\" , true, { 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 , \"response\" : true | false , \"auth\" : authentication , \"element\" : element_array } title \u00b6 A title of the custom Web page. This is string value and specifies the 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. response \u00b6 This is a Boolean value indicating whether to respond to HTTP responses independently in its custom web page handler. Normally, AutoConnect will respond with a response code of 200 after its custom web page has processed the request from the client. However, depending on the processing status of the handler, it may be necessary to return a response other than 200. For example, it might respond with a 302 redirect. In such situations, the custom web page handler can apply the sendHeader, sendContent, and send functions of the WebServer library to respond with its own response. If the response is false , AutoConnect will not respond with an HTTP response when it returns from the custom web page handler. The custom web page handler needs to perform the HTTP response by itself. auth \u00b6 It allows that this page requires authentication. An authentication specifies the following string that represents the authentication scheme. NONE : No authentication. This is default. BASIC : Apply Basic scheme. DIGEST : Apply Digest scheme. 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 , \"posterior\" : posterior , 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 AutoConnectRange: ACRange AutoConnectSelect: ACSelect AutoConnectStyle: ACStyle AutoConnectSubmit: ACSubmit AutoConnectText: ACText posterior \u00b6 Specifies a tag to add behind the HTML code generated from the element. Its purpose is to place elements on the custom Web page as intended by the user sketch. You can use the posterior key with the following values to arrange vertically or horizontal when the elements do not have the intended position on the custom Web Page specifying the following: none : No generate additional tags. br : Add a <br> tag to the end of the element. par : Include the element in the <p> ~ </p> tag. div : Include the element in the <div> ~ </div> tag. 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. If the valid file system of the ESP8266 module incorporating the Sketch is LittleFS , AutoConnect assumes the file system to be LittleFS. However, it does not sense the actual file system, so If the Sketch implementation does not match the file system on the ESP8266 depends, a file writing error will occur. 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. A valid filesystem of ESP8266 on board flash AutoConnect has assumed LittleFS as a valid file system since v1.2.0 enhancement. On the other hand, the ESP8266 arduino core has supported LittleFS officially since a release 2.7.0. LittleFS support in AutoConnect relies on the FS instance declared by the arduino core used at compile-time per project, and its FS instance will acquire by either the SPIFFS class or the LittleFS class. That is, you need to choose which file system will be available in the actual Sketch and make consistent it with AutoConnect assumed file system. So, you can choose which one uses the file systems per project via adjustment the AC_USE_SPIFFS macro enable or disable. AutoConnect determines the available file system by the AC_USE_SPIFFS macro which defined in AutoConnectDefs.h header file. 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. apply : Specifies the type of input that the text box accepts. Its value accepts one of the following: text : A text. password : Password input field. The text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk (\" * \") or a dot (\" \u2022 \"). number : A field let the user enter number characters only. Numerical keypad is different When the AutoConnectInput element with the number applied is focused on the browser, the numeric keypad may be displayed automatically. For popular mobile OSes such as Android and iOS, the numeric keypad has the following styles and is different with each OS. 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. ACRange \u00b6 value : Specifies the initial value in the range. If the value is not specified, the default value is determined by the following algorithm: value = ( max < min ) ? min : min + ( max - min ) / 2 ; label : Specifies a label of the range slider. Its placement is always to the left of the input box. min : Specifies the most negative value within the range of allowed values and must not be less than the value . max : Specifies the greatest value in the range of permitted values. step : Specifies the granularity that the value must adhere to. The default is 1. As you move the slider, it increases or decreases the value according to the step in granularity. magnify : Displays the current value of the range on the left or right side of the slider. The magnify accepts one of the following: infront : Displays the current value on the left side. behind : Displays the current value on the right side. void : No display the current value. This is the default. style : Specifies the qualification style to give to the content and can use the style attribute format as it is. 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 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(FPSTR(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 &amp; 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 , \"response\" : true | false , \"auth\" : authentication , \"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 and specifies the 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#response","text":"This is a Boolean value indicating whether to respond to HTTP responses independently in its custom web page handler. Normally, AutoConnect will respond with a response code of 200 after its custom web page has processed the request from the client. However, depending on the processing status of the handler, it may be necessary to return a response other than 200. For example, it might respond with a 302 redirect. In such situations, the custom web page handler can apply the sendHeader, sendContent, and send functions of the WebServer library to respond with its own response. If the response is false , AutoConnect will not respond with an HTTP response when it returns from the custom web page handler. The custom web page handler needs to perform the HTTP response by itself.","title":" response"},{"location":"acjson.html#auth","text":"It allows that this page requires authentication. An authentication specifies the following string that represents the authentication scheme. NONE : No authentication. This is default. BASIC : Apply Basic scheme. DIGEST : Apply Digest scheme.","title":" auth"},{"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 , \"posterior\" : posterior , 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 AutoConnectRange: ACRange AutoConnectSelect: ACSelect AutoConnectStyle: ACStyle AutoConnectSubmit: ACSubmit AutoConnectText: ACText","title":" type"},{"location":"acjson.html#posterior","text":"Specifies a tag to add behind the HTML code generated from the element. Its purpose is to place elements on the custom Web page as intended by the user sketch. You can use the posterior key with the following values to arrange vertically or horizontal when the elements do not have the intended position on the custom Web Page specifying the following: none : No generate additional tags. br : Add a <br> tag to the end of the element. par : Include the element in the <p> ~ </p> tag. div : Include the element in the <div> ~ </div> tag.","title":" posterior"},{"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. If the valid file system of the ESP8266 module incorporating the Sketch is LittleFS , AutoConnect assumes the file system to be LittleFS. However, it does not sense the actual file system, so If the Sketch implementation does not match the file system on the ESP8266 depends, a file writing error will occur. 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. A valid filesystem of ESP8266 on board flash AutoConnect has assumed LittleFS as a valid file system since v1.2.0 enhancement. On the other hand, the ESP8266 arduino core has supported LittleFS officially since a release 2.7.0. LittleFS support in AutoConnect relies on the FS instance declared by the arduino core used at compile-time per project, and its FS instance will acquire by either the SPIFFS class or the LittleFS class. That is, you need to choose which file system will be available in the actual Sketch and make consistent it with AutoConnect assumed file system. So, you can choose which one uses the file systems per project via adjustment the AC_USE_SPIFFS macro enable or disable. AutoConnect determines the available file system by the AC_USE_SPIFFS macro which defined in AutoConnectDefs.h header file.","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. apply : Specifies the type of input that the text box accepts. Its value accepts one of the following: text : A text. password : Password input field. The text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk (\" * \") or a dot (\" \u2022 \"). number : A field let the user enter number characters only. Numerical keypad is different When the AutoConnectInput element with the number applied is focused on the browser, the numeric keypad may be displayed automatically. For popular mobile OSes such as Android and iOS, the numeric keypad has the following styles and is different with each OS.","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#acrange","text":"value : Specifies the initial value in the range. If the value is not specified, the default value is determined by the following algorithm: value = ( max < min ) ? min : min + ( max - min ) / 2 ; label : Specifies a label of the range slider. Its placement is always to the left of the input box. min : Specifies the most negative value within the range of allowed values and must not be less than the value . max : Specifies the greatest value in the range of permitted values. step : Specifies the granularity that the value must adhere to. The default is 1. As you move the slider, it increases or decreases the value according to the step in granularity. magnify : Displays the current value of the range on the left or right side of the slider. The magnify accepts one of the following: infront : Displays the current value on the left side. behind : Displays the current value on the right side. void : No display the current value. This is the default. style : Specifies the qualification style to give to the content and can use the style attribute format as it is.","title":" ACRange"},{"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 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(FPSTR(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 <input type=\"file\"> tag and can save uploaded file to the flash or external SD of the ESP8266/ESP32 module. The handler for saving is built into AutoConnect. You can use it to inject any sketch data such as the initial values for the custom Web page into the ESP module via OTA without using the Sketch data upload tool of Arduino-IDE. Basic steps of the file upload sketch \u00b6 Here is the basic procedure of the Sketch which can upload files from the client browser using AutoConnectFile: 1 Place AutoConnectFile on a custom Web page by writing JSON or constructor code directly with the Sketch. Place other AutoConnectElements as needed. Place AutoConnectSubmit on the same custom Web page. Perform the following process in the on-handler of submitting destination: Retrieve the AutoConnectFile instance from the custom Web page where you placed the AutoConnectFile element using the AutoConnectAux::getElement function or the operator [] . Start access to the device specified as the upload destination. In usually, it depends on the file system's begin function. For example, if you specified Flash's SPIFFS as the upload destination, invokes SPIFFS.begin() . The value member of AutoConnectFile contains the file name of the upload file. Use its file name to access the uploaded file on the device. Invokes the end function associated with the begin to close the device. It is the SPIFFS.end()* if the flash on the ESP module has been begun for SPIFFS. The following sketch is an example that implements the above basic steps. The postUpload function is the on-handler and retrieves the AutoConnectFile as named upload_file . You should note that this handler is not for a custom Web page placed with its AutoConnectFile element. The uploaded file should be processed by the handler for the transition destination page from the AutoConnectFile element placed page. AutoConnect built-in upload handler will save the uploaded file to the specified device before invoking the postUpload function. However, If you use uploaded files in different situations, it may be more appropriate to place the actual handling process outside the handler. It applies for the parameter file, etc. The important thing is that you do not have to sketch file reception and storing logic by using the AutoConnectFile element and the upload handler built into the AutoConnect. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <FS.h> #include <AutoConnect.h> // Upload request custom Web page static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"<h2>File uploading platform<h2>\" }, { \"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\":\"<h2>Uploading ended<h2>\" }, { \"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 <input type=\"file\"> tag on the browser. The file name used for uploading is stored in the AutoConnetFile's value member, which you can access after uploading. (i.e. In the handler of the destination page by the AutoConnectSubmit element.) You can not save it with a different name. It can be renamed after upload if you need to change the name. Upload to a device other than Flash or SD \u00b6 You can output the file to any device using a custom uploader by specifying extern with the store attribute of AutoConnectFile (or specifying AC_File_Extern for the store member variable) and can customize the uploader according to the need to upload files to other than Flash or SD. Implements your own uploader with inheriting the AutoConnectUploadHandler class which is the base class of the upload handler. It's not so difficult Implementing the custom uploader requires a little knowledge of the c++ language. If you are less attuned to programming c++, you may find it difficult. But don't worry. You can make it in various situations by just modifying the Sketch skeleton that appears at the end of this page. Upload handler base class \u00b6 AutoConnectUploadHandler is a base class of upload handler and It has one public member function and three protected functions. Constructor \u00b6 AutoConnectUploadHandler() Member functions \u00b6 The upload public function is an entry point, the ESP8266WebServer (WebServer as ESP32) library will invoke the upload with each time of uploading content divided into chunks. Also, the _open , _write and _close protected functions are actually responsible for saving files and are declared as pure virtual functions. A custom uploader class that inherits from the AutoConnectUploadHandler class need to implement these functions. The actual upload process is handled by the three private functions above, and then upload only invokes three functions according to the upload situation. In usually, there is no need to override the upload function in an inherited class. public virtual void upload( const String & requestUri, const HTTPUpload & upload) Parameters requestUri URI of upload request source. upload A data structure of the upload file as HTTPUpload . It is defined in the ESP8266WebServer (WebServer as 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; An upload handler needs to implement a procedure corresponding with HTTPUploadStatus enum value indicated by the uploading process of ESP8266WebServer class, which contained in HTTPUpload.status as following values: UPLOAD_FILE_START : Invokes to the _open. UPLOAD_FILE_WRITE : Invokes to the _write. UPLOAD_FILE_END : Invokes to the _close. UPLOAD_FILE_ABORTED : Invokes to the _close. The _open function will be invoked when HTTPUploadStatus is UPLOAD_FILE_START . Usually, the implementation of an inherited class will open the file. protected virtual bool _open( const char * filename, const char * mode) = 0 Parameters filename Uploading file name. mode An indicator for the file access mode, a \"w\" for writing. Return value true File open successful. false Failed to open. The _write function will be invoked when HTTPUploadStatus is UPLOAD_FILE_WRITE . The content of the upload file is divided and the _write will be invoked in multiple times. Usually, the implementation of an inherited class will write data. protected virtual size_t _write( const uint8_t * buf, const size_t size) = 0 Parameters buf File content block. size File block size to write. Return value Size written. The _close function will be invoked when HTTPUploadStatus is UPLOAD_FILE_END or UPLOAD_FILE_ABORTED . Usually, the implementation of an inherited class will close the file. protected virtual void _close( void ) = 0 For reference, the following AutoConnectUploadFS class is an implementation of AutoConnect built-in uploader and inherits from AutoConnectUploadHandler. class AutoConnectUploadFS : public AutoConnectUploadHandler { public : explicit AutoConnectUploadFS(SPIFFST & media) : _media( & media) {} ~ AutoConnectUploadFS() { _close(); } protected : bool _open( const char * filename, const char * mode) override { if (_media -> begin()) { _file = _media -> open(filename, mode); return _file != false; } return false; } size_t _write( const uint8_t * buf, const size_t size) override { if (_file) return _file.write(buf, size); else return -1 ; } void _close( void ) override { if (_file) _file.close(); _media -> end(); } private : SPIFFST * _media; SPIFileT _file; }; Register custom upload handler \u00b6 In order to upload a file by the custom uploader, it is necessary to register it to the custom Web page beforehand. To register a custom uploader, specify the custom uploader class name in the template argument of the AutoConnectAux::onUpload function and invokes it. void AutoConnectAux :: onUpload < T > (T & uploadClass) Parameters T Specifies a class name of the custom uploader. This class name is a class that you implemented by inheriting AutoConnectUploadHandler for custom upload. uploadClass Specifies the custom upload class instance. The rough structure of the Sketches that completed these implementations will be as follows: #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"<h2>File uploading platform<h2>\" }, { \"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\":\"<h2>File uploading ended<h2>\" } ] } )\" ; // 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 <input type=\"file\"> tag and can save uploaded file to the flash or external SD of the ESP8266/ESP32 module. The handler for saving is built into AutoConnect. You can use it to inject any sketch data such as the initial values for the custom Web page into the ESP module via OTA without using the Sketch data upload tool of Arduino-IDE.","title":"Uploading file from Web Browser"},{"location":"acupload.html#basic-steps-of-the-file-upload-sketch","text":"Here is the basic procedure of the Sketch which can upload files from the client browser using AutoConnectFile: 1 Place AutoConnectFile on a custom Web page by writing JSON or constructor code directly with the Sketch. Place other AutoConnectElements as needed. Place AutoConnectSubmit on the same custom Web page. Perform the following process in the on-handler of submitting destination: Retrieve the AutoConnectFile instance from the custom Web page where you placed the AutoConnectFile element using the AutoConnectAux::getElement function or the operator [] . Start access to the device specified as the upload destination. In usually, it depends on the file system's begin function. For example, if you specified Flash's SPIFFS as the upload destination, invokes SPIFFS.begin() . The value member of AutoConnectFile contains the file name of the upload file. Use its file name to access the uploaded file on the device. Invokes the end function associated with the begin to close the device. It is the SPIFFS.end()* if the flash on the ESP module has been begun for SPIFFS. The following sketch is an example that implements the above basic steps. The postUpload function is the on-handler and retrieves the AutoConnectFile as named upload_file . You should note that this handler is not for a custom Web page placed with its AutoConnectFile element. The uploaded file should be processed by the handler for the transition destination page from the AutoConnectFile element placed page. AutoConnect built-in upload handler will save the uploaded file to the specified device before invoking the postUpload function. However, If you use uploaded files in different situations, it may be more appropriate to place the actual handling process outside the handler. It applies for the parameter file, etc. The important thing is that you do not have to sketch file reception and storing logic by using the AutoConnectFile element and the upload handler built into the AutoConnect. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <FS.h> #include <AutoConnect.h> // Upload request custom Web page static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"<h2>File uploading platform<h2>\" }, { \"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\":\"<h2>Uploading ended<h2>\" }, { \"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 <input type=\"file\"> tag on the browser. The file name used for uploading is stored in the AutoConnetFile's value member, which you can access after uploading. (i.e. In the handler of the destination page by the AutoConnectSubmit element.) You can not save it with a different name. It can be renamed after upload if you need to change the name.","title":"The file name for the uploaded file"},{"location":"acupload.html#upload-to-a-device-other-than-flash-or-sd","text":"You can output the file to any device using a custom uploader by specifying extern with the store attribute of AutoConnectFile (or specifying AC_File_Extern for the store member variable) and can customize the uploader according to the need to upload files to other than Flash or SD. Implements your own uploader with inheriting the AutoConnectUploadHandler class which is the base class of the upload handler. It's not so difficult Implementing the custom uploader requires a little knowledge of the c++ language. If you are less attuned to programming c++, you may find it difficult. But don't worry. You can make it in various situations by just modifying the Sketch skeleton that appears at the end of this page.","title":"Upload to a device other than Flash or SD"},{"location":"acupload.html#upload-handler-base-class","text":"AutoConnectUploadHandler is a base class of upload handler and It has one public member function and three protected functions.","title":" Upload handler base class"},{"location":"acupload.html#constructor","text":"AutoConnectUploadHandler()","title":" Constructor"},{"location":"acupload.html#member-functions","text":"The upload public function is an entry point, the ESP8266WebServer (WebServer as ESP32) library will invoke the upload with each time of uploading content divided into chunks. Also, the _open , _write and _close protected functions are actually responsible for saving files and are declared as pure virtual functions. A custom uploader class that inherits from the AutoConnectUploadHandler class need to implement these functions. The actual upload process is handled by the three private functions above, and then upload only invokes three functions according to the upload situation. In usually, there is no need to override the upload function in an inherited class. public virtual void upload( const String & requestUri, const HTTPUpload & upload) Parameters requestUri URI of upload request source. upload A data structure of the upload file as HTTPUpload . It is defined in the ESP8266WebServer (WebServer as 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; An upload handler needs to implement a procedure corresponding with HTTPUploadStatus enum value indicated by the uploading process of ESP8266WebServer class, which contained in HTTPUpload.status as following values: UPLOAD_FILE_START : Invokes to the _open. UPLOAD_FILE_WRITE : Invokes to the _write. UPLOAD_FILE_END : Invokes to the _close. UPLOAD_FILE_ABORTED : Invokes to the _close. The _open function will be invoked when HTTPUploadStatus is UPLOAD_FILE_START . Usually, the implementation of an inherited class will open the file. protected virtual bool _open( const char * filename, const char * mode) = 0 Parameters filename Uploading file name. mode An indicator for the file access mode, a \"w\" for writing. Return value true File open successful. false Failed to open. The _write function will be invoked when HTTPUploadStatus is UPLOAD_FILE_WRITE . The content of the upload file is divided and the _write will be invoked in multiple times. Usually, the implementation of an inherited class will write data. protected virtual size_t _write( const uint8_t * buf, const size_t size) = 0 Parameters buf File content block. size File block size to write. Return value Size written. The _close function will be invoked when HTTPUploadStatus is UPLOAD_FILE_END or UPLOAD_FILE_ABORTED . Usually, the implementation of an inherited class will close the file. protected virtual void _close( void ) = 0 For reference, the following AutoConnectUploadFS class is an implementation of AutoConnect built-in uploader and inherits from AutoConnectUploadHandler. class AutoConnectUploadFS : public AutoConnectUploadHandler { public : explicit AutoConnectUploadFS(SPIFFST & media) : _media( & media) {} ~ AutoConnectUploadFS() { _close(); } protected : bool _open( const char * filename, const char * mode) override { if (_media -> begin()) { _file = _media -> open(filename, mode); return _file != false; } return false; } size_t _write( const uint8_t * buf, const size_t size) override { if (_file) return _file.write(buf, size); else return -1 ; } void _close( void ) override { if (_file) _file.close(); _media -> end(); } private : SPIFFST * _media; SPIFileT _file; };","title":" Member functions"},{"location":"acupload.html#register-custom-upload-handler","text":"In order to upload a file by the custom uploader, it is necessary to register it to the custom Web page beforehand. To register a custom uploader, specify the custom uploader class name in the template argument of the AutoConnectAux::onUpload function and invokes it. void AutoConnectAux :: onUpload < T > (T & uploadClass) Parameters T Specifies a class name of the custom uploader. This class name is a class that you implemented by inheriting AutoConnectUploadHandler for custom upload. uploadClass Specifies the custom upload class instance. The rough structure of the Sketches that completed these implementations will be as follows: #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"<h2>File uploading platform<h2>\" }, { \"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\":\"<h2>File uploading ended<h2>\" } ] } )\" ; // 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":"adauthentication.html","text":"The Sketch may use authentication to protect custom Web pages and prevent unauthorized access. AutoConnect has implemented HTTP authentication feature that can be applied to multiple scopes using the authentication methods provided by the platform's WebServer library for ESP8266 or ESP32. 1 Applying HTTP authentication Applying HTTP authentication for Built-in OTA Authentication within the captive portal state Applying HTTP authentication \u00b6 AutoConnectConfig::auth setting allows the Sketch to HTTP authenticate with \" BASIC \" or \" DIGEST \" scheme. AutoConnectConfig::authScope specifies the scope covered by authentication which is the whole range for all pages of the Sketch, custom web pages, or AutoConnect pages. AutoConnectConfig::username and AutoConnectConfig::password specifies credential as user-id/password pairs. The Sketch enables HTTP authentication with the AutoConnectConfig::auth setting, also specifies the authentication scheme: AC_AUTH_NONE AutoConnect pages and custom Web pages do not require authentication. Not protected from all HTTP access. This is the default. AC_AUTH_DIGEST Protect AutoConnect pages and custom Web pages with DIGEST authentication. AC_AUTH_BASIC Protect AutoConnect pages and custom Web pages with BASIC authentication. Note that the authentication scope specified in AutoConnectConfig::authScope is different from the protection space shown by Realm for HTTP authentication. AutoConnect assumes only one Realm and defines it as AUTOCONNECT_AUTH_REALM in AutoConnectDefs.h header file. Instead, the Sketch will be able to expand or narrow the range of authentication by AutoConnectConfig::authScope setting, which can be either as follows: AC_AUTHSCOPE_PORTAL Require authentication to access for all AutoConnect pages, including custom Web pages. AC_AUTHSCOPE_AUX Require authentication to access for all custom Web pages, excepting AutoConnect pages. This is the Default. AC_AUTHSCOPE_PARTIAL Authenticate only specific custom Web pages which are specified by AutoConnectAux::authentication function or JSON . Also, a credential used for authentication is specified in the Sketch using the AutoConnectConfig::username and AutoConnectConfig::password settings. 2 Here's a minimal Sketch with HTTP authentication for the custom Web page: #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char PAGE_AUTH[] PROGMEM = R\"( { \"uri\": \"/auth\", \"title\": \"Auth\", \"menu\": true, \"element\": [ { \"name\": \"text\", \"type\": \"ACText\", \"value\": \"AutoConnect has authorized\", \"style\": \"font-family:Arial;font-size:18px;font-weight:400;color:#191970\" } ] } )\" ; WebServerClass server; AutoConnect portal (server); AutoConnectConfig config; void setup () { config.auth = AC_AUTH_DIGEST; config.authScope = AC_AUTHSCOPE_AUX; config.username = \"user\" ; config.password = \"password\" ; portal.config(config); portal.load(FPSTR(PAGE_AUTH)); portal.begin(); } void loop () { portal.handleClient(); } If you want to authenticate only specific pages in a Sketch that handles multiple custom Web pages, set AC_AUTHSCOPE_PARTIAL to AutoConnectConfig::authScope . Then, it specifies the authentication scheme with the auth key in the JSON description of the page should be authenticated. AutoConnect determines which authentication method to use for custom Web pages (such as AutoConnectAux) based on its association with AutoConnectConfig::authScope setting. The table below shows which authentication scheme will be finally adopted. As shown in this table, the final authentication scheme depends on the AutoConnectConfig::authScope setting, and if AC_AUTHSCOPE_PARTIAL is specified it, AutoConnectAux's authentication setting takes precedence over the AutoConnectConfig::auth setting. AutoConnectConfig::authScope Authentication scheme for the custom Web page AC_AUTHSCOPE_PORTAL Specified by AutoConnectConfig::auth AC_AUTHSCOPE_AUX Specified by AutoConnectConfig::auth AC_AUTHSCOPE_PARTIAL Specified by AutoConnectAux::authentication , The default values is AC_AUTH_NONE . Authentication designation for AutoConnectAux can also be specified by giving the following value to the auth key by the JSON description: \"auth\" : \"basic\" \"auth\" : \"digest\" \"auth\" : \"none\" The following example Sketch has two custom Web pages, Hello and Auth . It applies authentication only to the Auth page by setting AC_AUTHSCOPE_PARTIAL to AutoConnectConfig::authScope. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char PAGE_HELLO[] PROGMEM = R\"( { \"uri\": \"/hello\", \"title\": \"Hello\", \"menu\": true, \"element\": [ { \"name\": \"text\", \"type\": \"ACText\", \"value\": \"Hello, word\", \"style\": \"font-family:Arial;font-size:18px;font-weight:400;color:#191970\" } ] } )\" ; static const char PAGE_AUTH[] PROGMEM = R\"( { \"uri\": \"/auth\", \"title\": \"Auth\", \"menu\": true, \"auth\": \"digest\", \"element\": [ { \"name\": \"text\", \"type\": \"ACText\", \"value\": \"AutoConnect has authorized\", \"style\": \"font-family:Arial;font-size:18px;font-weight:400;color:#191970\" } ] } )\" ; WebServerClass server; AutoConnect portal (server); AutoConnectConfig config; void setup () { // It's a default value but has no meaning in the AC_AUTHSCOPE_PARTIAL setting. // config.auth = AC_AUTH_NONE; config.authScope = AC_AUTHSCOPE_PARTIAL; config.username = \"user\" ; config.password = \"password\" ; portal.config(config); portal.load(FPSTR(PAGE_HELLO)); portal.load(FPSTR(PAGE_AUTH)); portal.begin(); } void loop () { portal.handleClient(); } PageBuilder v1.4.0 or later needed PageBuilder v1.4.0 or later is required to use HTTP authentication with AutoConnect. Also, v1.4.2 or later is required to eliminate SPIFFS, which is deprecated as a file system for ESP8266 module. Can not use DIGEST authentication for ESP32 arduino core 1.0.4 stable release For ESP32, Arduino core 1.0.4 stable has a bug for DIGEST authentication. The upstream of the master is recommended. (or use BASIC authentication) Applying HTTP authentication for Built-in OTA \u00b6 AutoConnectConfig::auth setting also affects the built-in OTA feature. AC_AUTH_BASIC or AC_AUTH_DIGEST setting allows Built-in OTA to authenticate with the UPDATE page. This setting is valid even if AutoConnectConfig::authScope is AC_AUTHSCOPE_PARTIAL . That is if the AutoConnectConfig::auth setting is BASIC or DIGEST, authentication will be required for Built-in OTA. See also Authentication with AutoconnectOTA . Authentication within the captive portal state \u00b6 When accessing the ESP module from an iOS or Android device in the captive portal state, the HTTP authentication framework is disabled in the OS of the client device. Even if the ESP module responds with a 401 unauthorized with WWW-Authenticate , those client device OSs under the captive portal do not display the login dialog and deprive the user of the opportunity to enter their credentials. There will always be an unauthorized error. AutoConnect's authentication operation based on HTTP (not HTTPS) depends on the OS of the client device, so in the captive portal state, most devices will unconditionally result in an authentication error. Therefore, the default authentication behavior of AutoConnect does not apply authentication in the captive portal state. (It will be ignored even if the AutoConnect setting is not AC_AUTH_NONE) However, if you want to deny unauthorized access to the protected page even in the captive portal state, you can use the extension bit of AutoConnectConfig::authScope . The AC_AUTHSCOPE_WITHCP flag allows AutoConnect to authentication in the captive portal state. It is set using a logical OR operator for the AutoConnectConfig::authScope setting and AutoConnect will enable authentication at the captive portal if the AC_AUTHSCOPE_WITHCP is ON. AutoConnectConfig config; ... config.auth = AC_AUTH_DIGEST; config.authScope = AC_AUTHSCOPE_AUX | AC_AUTHSCOPE_WITHCP; ... ESP32 Arduino core has the authenticate method provided by the WebServer library, similar to that of the ESP8266. \u21a9 The default user name and password for authentication inherits the setting of AutoConnectConfig::apid and AutoConnectConfig::psk . \u21a9","title":"Authentication settings"},{"location":"adauthentication.html#applying-http-authentication","text":"AutoConnectConfig::auth setting allows the Sketch to HTTP authenticate with \" BASIC \" or \" DIGEST \" scheme. AutoConnectConfig::authScope specifies the scope covered by authentication which is the whole range for all pages of the Sketch, custom web pages, or AutoConnect pages. AutoConnectConfig::username and AutoConnectConfig::password specifies credential as user-id/password pairs. The Sketch enables HTTP authentication with the AutoConnectConfig::auth setting, also specifies the authentication scheme: AC_AUTH_NONE AutoConnect pages and custom Web pages do not require authentication. Not protected from all HTTP access. This is the default. AC_AUTH_DIGEST Protect AutoConnect pages and custom Web pages with DIGEST authentication. AC_AUTH_BASIC Protect AutoConnect pages and custom Web pages with BASIC authentication. Note that the authentication scope specified in AutoConnectConfig::authScope is different from the protection space shown by Realm for HTTP authentication. AutoConnect assumes only one Realm and defines it as AUTOCONNECT_AUTH_REALM in AutoConnectDefs.h header file. Instead, the Sketch will be able to expand or narrow the range of authentication by AutoConnectConfig::authScope setting, which can be either as follows: AC_AUTHSCOPE_PORTAL Require authentication to access for all AutoConnect pages, including custom Web pages. AC_AUTHSCOPE_AUX Require authentication to access for all custom Web pages, excepting AutoConnect pages. This is the Default. AC_AUTHSCOPE_PARTIAL Authenticate only specific custom Web pages which are specified by AutoConnectAux::authentication function or JSON . Also, a credential used for authentication is specified in the Sketch using the AutoConnectConfig::username and AutoConnectConfig::password settings. 2 Here's a minimal Sketch with HTTP authentication for the custom Web page: #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char PAGE_AUTH[] PROGMEM = R\"( { \"uri\": \"/auth\", \"title\": \"Auth\", \"menu\": true, \"element\": [ { \"name\": \"text\", \"type\": \"ACText\", \"value\": \"AutoConnect has authorized\", \"style\": \"font-family:Arial;font-size:18px;font-weight:400;color:#191970\" } ] } )\" ; WebServerClass server; AutoConnect portal (server); AutoConnectConfig config; void setup () { config.auth = AC_AUTH_DIGEST; config.authScope = AC_AUTHSCOPE_AUX; config.username = \"user\" ; config.password = \"password\" ; portal.config(config); portal.load(FPSTR(PAGE_AUTH)); portal.begin(); } void loop () { portal.handleClient(); } If you want to authenticate only specific pages in a Sketch that handles multiple custom Web pages, set AC_AUTHSCOPE_PARTIAL to AutoConnectConfig::authScope . Then, it specifies the authentication scheme with the auth key in the JSON description of the page should be authenticated. AutoConnect determines which authentication method to use for custom Web pages (such as AutoConnectAux) based on its association with AutoConnectConfig::authScope setting. The table below shows which authentication scheme will be finally adopted. As shown in this table, the final authentication scheme depends on the AutoConnectConfig::authScope setting, and if AC_AUTHSCOPE_PARTIAL is specified it, AutoConnectAux's authentication setting takes precedence over the AutoConnectConfig::auth setting. AutoConnectConfig::authScope Authentication scheme for the custom Web page AC_AUTHSCOPE_PORTAL Specified by AutoConnectConfig::auth AC_AUTHSCOPE_AUX Specified by AutoConnectConfig::auth AC_AUTHSCOPE_PARTIAL Specified by AutoConnectAux::authentication , The default values is AC_AUTH_NONE . Authentication designation for AutoConnectAux can also be specified by giving the following value to the auth key by the JSON description: \"auth\" : \"basic\" \"auth\" : \"digest\" \"auth\" : \"none\" The following example Sketch has two custom Web pages, Hello and Auth . It applies authentication only to the Auth page by setting AC_AUTHSCOPE_PARTIAL to AutoConnectConfig::authScope. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char PAGE_HELLO[] PROGMEM = R\"( { \"uri\": \"/hello\", \"title\": \"Hello\", \"menu\": true, \"element\": [ { \"name\": \"text\", \"type\": \"ACText\", \"value\": \"Hello, word\", \"style\": \"font-family:Arial;font-size:18px;font-weight:400;color:#191970\" } ] } )\" ; static const char PAGE_AUTH[] PROGMEM = R\"( { \"uri\": \"/auth\", \"title\": \"Auth\", \"menu\": true, \"auth\": \"digest\", \"element\": [ { \"name\": \"text\", \"type\": \"ACText\", \"value\": \"AutoConnect has authorized\", \"style\": \"font-family:Arial;font-size:18px;font-weight:400;color:#191970\" } ] } )\" ; WebServerClass server; AutoConnect portal (server); AutoConnectConfig config; void setup () { // It's a default value but has no meaning in the AC_AUTHSCOPE_PARTIAL setting. // config.auth = AC_AUTH_NONE; config.authScope = AC_AUTHSCOPE_PARTIAL; config.username = \"user\" ; config.password = \"password\" ; portal.config(config); portal.load(FPSTR(PAGE_HELLO)); portal.load(FPSTR(PAGE_AUTH)); portal.begin(); } void loop () { portal.handleClient(); } PageBuilder v1.4.0 or later needed PageBuilder v1.4.0 or later is required to use HTTP authentication with AutoConnect. Also, v1.4.2 or later is required to eliminate SPIFFS, which is deprecated as a file system for ESP8266 module. Can not use DIGEST authentication for ESP32 arduino core 1.0.4 stable release For ESP32, Arduino core 1.0.4 stable has a bug for DIGEST authentication. The upstream of the master is recommended. (or use BASIC authentication)","title":"Applying HTTP authentication"},{"location":"adauthentication.html#applying-http-authentication-for-built-in-ota","text":"AutoConnectConfig::auth setting also affects the built-in OTA feature. AC_AUTH_BASIC or AC_AUTH_DIGEST setting allows Built-in OTA to authenticate with the UPDATE page. This setting is valid even if AutoConnectConfig::authScope is AC_AUTHSCOPE_PARTIAL . That is if the AutoConnectConfig::auth setting is BASIC or DIGEST, authentication will be required for Built-in OTA. See also Authentication with AutoconnectOTA .","title":"Applying HTTP authentication for Built-in OTA"},{"location":"adauthentication.html#authentication-within-the-captive-portal-state","text":"When accessing the ESP module from an iOS or Android device in the captive portal state, the HTTP authentication framework is disabled in the OS of the client device. Even if the ESP module responds with a 401 unauthorized with WWW-Authenticate , those client device OSs under the captive portal do not display the login dialog and deprive the user of the opportunity to enter their credentials. There will always be an unauthorized error. AutoConnect's authentication operation based on HTTP (not HTTPS) depends on the OS of the client device, so in the captive portal state, most devices will unconditionally result in an authentication error. Therefore, the default authentication behavior of AutoConnect does not apply authentication in the captive portal state. (It will be ignored even if the AutoConnect setting is not AC_AUTH_NONE) However, if you want to deny unauthorized access to the protected page even in the captive portal state, you can use the extension bit of AutoConnectConfig::authScope . The AC_AUTHSCOPE_WITHCP flag allows AutoConnect to authentication in the captive portal state. It is set using a logical OR operator for the AutoConnectConfig::authScope setting and AutoConnect will enable authentication at the captive portal if the AC_AUTHSCOPE_WITHCP is ON. AutoConnectConfig config; ... config.auth = AC_AUTH_DIGEST; config.authScope = AC_AUTHSCOPE_AUX | AC_AUTHSCOPE_WITHCP; ... ESP32 Arduino core has the authenticate method provided by the WebServer library, similar to that of the ESP8266. \u21a9 The default user name and password for authentication inherits the setting of AutoConnectConfig::apid and AutoConnectConfig::psk . \u21a9","title":"Authentication within the captive portal state"},{"location":"adconnection.html","text":"AutoConnect aims to connect the ESP module as a station to a WiFi access point and equips with various APIs to maintain a WiFi connection as possible while sketch running. The main APIs are AutoConnect::begin and AutoConnect::handleClient . You can make sketches with flexible WiFi connection capability by properly using these two APIs and the settings by AutoConnectConfig . Automatic reconnect Automatic reconnect (Background) Configure WiFi channel Connects depending on the WiFi signal strength Detects connection establishment to AP Match with known access points by SSID Preserve AP mode Timeout settings for a connection attempt Automatic reconnect \u00b6 AutoConnect will change the WiFi mode depending on the situation. The AutoConnect::begin function starts the webserver with WIFI_STA mode when the connection is successful with 1 st -WiFi.begin . If the connection with the last access point fails, AutoConnect will switch the WiFi mode to WIFI_AP_STA , launching a DNS server and allowing the ESP module to launch the captive portal. The captive portal launches SoftAP at its start and disconnects the STA. At this time, the ESP module discards its stored station configuration data (known as the SDK's station_config structure). This is the default behavior of AutoConnect. On the other hand, AutoConnect can connect to an access point again that has disconnected once, and its control is allowed by AutoConnectConfig::autoReconnect that option specifies to attempt to reconnect to the past established access point using the saved credentials. If the autoReconnect is enabled, AutoConnect will not launch SoftAP immediately even if 1 st -WiFi.begin fails. When AutoConnect fails WiFi connection, it will scan the WiFi signal and try to find the access point that the ESP module has connected to in the past. If AutoConnect finds one of the saved credentials from the broadcast with BSSID, it will explicitly apply the matching credential and attempt to reconnect while in WIFI_STA mode. (AutoReconnect works well even with hidden SSID access points) AutoConnect Portal; AutoConnectConfig Config; Config.autoReconnect = true; Portal.config(Config); Portal.begin(); The autoReconnect option is only available for AutoConnect::begin without SSID and PASSWORD parameter. If you use AutoConnect::begin with an SSID and PASSWORD, no reconnection attempt will be made if the 1 st -WiFi.begin fails to connect to that SSID. The autoReconnect is not autoreconnect 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 the arduino-esp32 core. AutoConnect's automatic reconnection is a mechanism independent from the automatic reconnection of the arduino-esp32 core. Automatic reconnect (Background) \u00b6 Combining autoReconnect with AutoConnectConfig::reconnectInterval allows you to periodically repeat connection attempts to known access points within AutoConnect::handleClient . This process is pseudo-asynchronous and does not block the Sketch process in the loop() function. The reconnectInterval specifies the interval time to seek for known access points with saved credentials during the handleClient loop and attempt to connect to the AP. AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoReconnect = true; // Attempt automatic reconnection. Config.reconnectInterval = 6 ; // Seek interval time is 180[s]. Portal.config(Config); Portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Here to do when WiFi is connected. } else { // Here to do when WiFi is not connected. } Portal.handleClient(); } Above Sketch shows a configuration example that you want to keep connecting to known access points as long as possible. When the WiFi connection is lost, it will start seeking the WiFi network every 30 seconds during the handleClient loop. Limitation for automatic reconnection to a specific access point An access point that ESP module to reconnect automatically depends on whether the SSID and password argument existence with AutoConnect::begin . If the Sketch calls AutoConnect::begin without specifying an SSID or password, the autoReconnect will connect to one of the detected access points and cannot be pre-determined. The other one, the case of the Sketch specifies SSID and password with AutoConnect::begin , the autoReconnect will try to reconnect to a specified access point periodically during the handleClient loop. Also, you can combine the background automatic reconnect performing inside the loop function by handleClient with AutoConnectConfig::retainPortal and AutoConnectConfig::autoReset , to enable pop up the captive portal automatically on the client device each time the ESP module disconnects from the access point. AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoReset = false; // Not reset the module even by intentional disconnection using AutoConnect menu. Config.autoReconnect = true; // Reconnect to known access points. Config.reconnectInterval = 6 ; // Reconnection attempting interval is 3[min]. Config.retainPortal = true; // Keep the captive portal open. Portal.config(Config); Portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Here to do when WiFi is connected. } else { // Here to do when WiFi is not connected. } } The effective range of the reconnectInterval depending on the setting value The range of values that reconnectInterval can take is 0 to 255. (Actual seconds are from 0 to 255\u00d7AUTOCONNECT_UNITTIME) Reconnect behavior depends on the setting value. If it is 0, reconnection will work if the 1 st -WiFi.begin in AutoConnect::begin fails and will suspend during the handleClient loop. If reconnectInterval is greater than 0, AutoConnect will attempt to reconnect both in AutoConnect::begin and during the handleClient loop. Configure WiFi channel \u00b6 Appropriately specifying the WiFi channel to use for ESP8266 and ESP32 is essential for a stable connection with the access point. AutoConnect remembers the WiFi channel with a credential of the access point once connected and reuses it. The default channel when a captive portal starts and AutoConnect itself becomes an access point is the AutoConnectConfig::channel member. If this channel is different from the channel of the access point you will attempt to connect, WiFi.begin may fail. The cause is that the ESP module shares the same channel in AP mode and STA mode. If the connection attempt is not stable, specifying a proper channel using AutoConnectConfig::channel may result in a stable connection. Connects depending on the WiFi signal strength \u00b6 When the ESP module found the multiple available access points (ie. AutoConnect has connected in the past), the default behavior AutoConnect will attempt to connect to the least recent one. However, If the ESP module can operate properly with any access point, it is advantageous to establish a connection with the best one of the reception sensitivity. The AutoConnectConfig::principle parameter has the connection disposition, and specifying AC_PRINCIPLE_RSSI will attempt to connect to one of the highest RSSI value among multiple available access points. Also You can expect stable WiFi connection by specifying the lower limit of signal strength using AutoConnectConfig::minRSSI . Combining these two parameters allows you to filter the destination AP when multiple available access points are found. AutoConnectConfig::principle affects the behavior of both 1 st -WiFi.begin and autoReconnect . If you specify AC_PRINCIPLE_RECENT for the principle , it will try according to the conventional connection rules, but if you specify AC_PRINCIPLE_RSSI , it will try to connect to the access point that is sending the strongest WiFi signal at that time instead of the last accessed AP. Also, the static IPs will be restored from a saved credential instead of AutoConnectConfig. (The values specified by AutoConnectConfig is ignored) SSID & Password AutoConnectConfig ::principle Which credentials would be selected Static IPs AutoConnect ::begin NULL specified AC_PRINCIPLE_RECENT Nothing, depends on SDK saves Use the specified value of AutoConnectConfig AC_PRINCIPLE_RSSI Auto-selected credentials with max RSSI Restoring static IPs suitable for the SSID from saved credentials Specified with the Sketch Not effective By AutoConnect::begin parameters Use the specified value of AutoConnectConfig AutoReconnect Load from saved credential AC_PRINCIPLE_RECENT Recently saved SSID would be chosen Restoring static IPs suitable for the SSID from saved credentials AC_PRINCIPLE_RSSI Auto-selected credentials with max RSSI In ESP32, the difference between the AutoConnectConfig::principle and WIFI_ALL_CHANNEL_SCAN in WiFi.begin In ESP32, if there are multiple access points with the same SSID and PW within reach, WiFi.begin with the SSID and PW explicitly specified will scan all radio channels and connect to the AP which has the highest signal strength. This feature has been enabled since ESP32 Arduino Release 1.0.6 . The principle setting is slightly different from this feature. AutoConnect does not specify the SSID and PW in the 1 st -WiFi.begin . It leaves that to the contents stored in the SDK. Even if there is an AP with a stronger signal nearby, it will try to connect to an AP with a smaller channel number . However, in the case where autoReconnect setting will attempt to reconnect, AutoConnect will read the SSID and PW from the saved credentials and explicitly pass them to WiFi.begin . Therefore, in this case, the connection will be made to the AP with the highest signal strength by WIFI_ALL_CHANNEL_SCAN . But it is only valid across multiple APs with the same SSID and PW . On the other hand, AC_PRINCIPLE_RSSI tries to connect the AP with the strongest signal from the connection candidates after selecting the SSID when multiple APs with different SSIDs are mixed in the reachable range. Detects connection establishment to AP \u00b6 The Sketch can detect that the ESP module has established a WiFi connection as a station to the access point. The AutoConnect::begin or AutoConnect::handleClient will transit the control temporarily to the function in the Sketch registered by AutoConnect::onConnect when the ESP module establish a WiFi connection. The ConnectExit function registered with AutoConnect::onConnect should have the following types and arguments: void ConnectExit(IPAddress & ip) The ConnectExit function is of type void . The argument ip is the IP address assigned to the ESP module by the connected AP. AutoConnect::onConnect allows the Sketch registers a ConnectExit function to AutoConnect. Also, you can make the function using a lambda expression . AutoConnect Portal; void onConnect (IPAddress & ipaddr) { Serial.print( \"WiFi connected with \" ); Serial.print(WiFi.SSID()); Serial.print( \", IP:\" ); Serial.println(ipaddr.toString()); } void setup () { Serial.begin( 115200 ); Portal.onConnect(onConnect); // Register the ConnectExit function Portal.begin(); } void loop () { Portal.handleClient(); } In addition, a sketch that shuts down SoftAP when the ESP module connects to the access point can be described using a lambda expression as follows: AutoConnect Portal; void setup () { Serial.begin( 115200 ); Portal.onConnect([](IPAddress & ipaddr){ Serial.printf( \"WiiFi connected with %s, IP:%s \\n \" , WiFi.SSID().c_str(), ipaddr.toString().c_str()); if (WiFi.getMode() & WIFI_AP) { WiFi.softAPdisconnect(true); WiFi.enableAP(false); Serial.printf( \"SoftAP:%s shut down \\n \" , WiFi.softAPSSID().c_str()); } }); Portal.begin(); } void loop () { Portal.handleClient(); } It is not an event AutoConnect::onConnect has the same effect on the Sketch as the WiFi.onStationModeConnected , but AutoConnect does not use the event. Sketch can use WiFi.onEvent independently of AutoConnect. Match with known access points by SSID \u00b6 By default, AutoConnect uses the BSSID to search for known access points. (Usually, it's the MAC address of the device) By using BSSID as the key to finding the WiFi network, AutoConnect can find even if the access point is hidden. However BSSIDs can change on some mobile hotspots, the BSSID-keyed searches may not be able to find known access points. If you operate inconvenience in aiming at the access point by BSSID, you can change the collation key from BSSID to SSID by uncommenting AUTOCONNECT_APKEY_SSID macro definition in AutoConnectDefs.h library source code. #define AUTOCONNECT_APKEY_SSID Allow you to use PlatformIO as a build system and give the following description to the platformio.ini , you can enable AUTOCONNECT_APKEY_SSID each build without modifying the library source code: build_flags = -DAUTOCONNECT_APKEY_SSID Can't be found hidden APs in SSID-keyed The hidden access point's SSID will be blank on the broadcast. So if the seek key is an SSID, AutoConnect will not find it. Preserve AP mode \u00b6 Sketch using AutoConnect can open a gateway to the Internet by connecting to a WiFi router even through use Espressif's peculiar WiFi protocol (eg. ESP-MESH or ESP-NOW ). These specific communication protocols require to keeps AP + STA as the WiFi mode. That is, to apply these protocols, it needs to launch SoftAP by a sketch itself and then call AutoConnect::begin . But the default behavior of AutoConnect::begin will turn off SoftAP always then it will unable to open a connection. AutoConnectConfig::preserveAPMode setting maintains WIFI_AP mode without disabling SoftAP inside AutoConnect::begin . The Sketch can utilize the WiFi connection via AutoConnect with ESP-MESH and ESP-NOW protocol by enabling this option. The following diagram quoted from the ESP-MESH documentation that illustrates the typical topology of the MESH network. The module located at the Root Node bridges between the mesh network and the router by an application that handles two protocols, TCP/IP and ESP-MESH. Its SoftAP communicates with the internal mesh network as an interface of the mesh layer. On the other hand, STA performs station communication with the WiFi router as an interface of the TCP/IP layer. AutoConnect allows assists the connection between the router and the STA of the Root Node using AutoConnectConfig::preserveAPMode and starting the SoftAP via Sketch separately. Also in general, the Sketch should set false to AutoConnectConfig::autoRise , true to AutoConnectConfig::immediateStart when applying to those protocols. Timeout settings for a connection attempt \u00b6 AutoConnect uses AutoConnectConfig::beginTimeout value to limit time to attempt when connecting the ESP module to the access point as a WiFi station. The default value is AUTOCONNECT_TIMEOUT defined in AutoConnectDefs.h and the initial value is 30 seconds. (actually specified in milliseconds) For example, the following sketch sets the connection timeout to 15 seconds: AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.beginTimeout = 15000 ; // Timeout sets to 15[s] Portal.config(Config); Portal.begin(); } void loop () { Portal.handleClient(); } In addition, the limit of the waiting time for connection attempts can be specified by the AutoConnect::begin parameter too. The timeout parameter specified in AutoConnect::begin takes precedence over AutoConnectConfig::beginTimeout . The beginTimeout has an effect on handleClient The beginTimeout value will be applied with handleClient when requesting a connection from the captive portal and when attempting to reconnect with autoReconnect .","title":"AutoConnect WiFi connection control"},{"location":"adconnection.html#automatic-reconnect","text":"AutoConnect will change the WiFi mode depending on the situation. The AutoConnect::begin function starts the webserver with WIFI_STA mode when the connection is successful with 1 st -WiFi.begin . If the connection with the last access point fails, AutoConnect will switch the WiFi mode to WIFI_AP_STA , launching a DNS server and allowing the ESP module to launch the captive portal. The captive portal launches SoftAP at its start and disconnects the STA. At this time, the ESP module discards its stored station configuration data (known as the SDK's station_config structure). This is the default behavior of AutoConnect. On the other hand, AutoConnect can connect to an access point again that has disconnected once, and its control is allowed by AutoConnectConfig::autoReconnect that option specifies to attempt to reconnect to the past established access point using the saved credentials. If the autoReconnect is enabled, AutoConnect will not launch SoftAP immediately even if 1 st -WiFi.begin fails. When AutoConnect fails WiFi connection, it will scan the WiFi signal and try to find the access point that the ESP module has connected to in the past. If AutoConnect finds one of the saved credentials from the broadcast with BSSID, it will explicitly apply the matching credential and attempt to reconnect while in WIFI_STA mode. (AutoReconnect works well even with hidden SSID access points) AutoConnect Portal; AutoConnectConfig Config; Config.autoReconnect = true; Portal.config(Config); Portal.begin(); The autoReconnect option is only available for AutoConnect::begin without SSID and PASSWORD parameter. If you use AutoConnect::begin with an SSID and PASSWORD, no reconnection attempt will be made if the 1 st -WiFi.begin fails to connect to that SSID. The autoReconnect is not autoreconnect 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 the arduino-esp32 core. AutoConnect's automatic reconnection is a mechanism independent from the automatic reconnection of the arduino-esp32 core.","title":"Automatic reconnect"},{"location":"adconnection.html#automatic-reconnect-background","text":"Combining autoReconnect with AutoConnectConfig::reconnectInterval allows you to periodically repeat connection attempts to known access points within AutoConnect::handleClient . This process is pseudo-asynchronous and does not block the Sketch process in the loop() function. The reconnectInterval specifies the interval time to seek for known access points with saved credentials during the handleClient loop and attempt to connect to the AP. AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoReconnect = true; // Attempt automatic reconnection. Config.reconnectInterval = 6 ; // Seek interval time is 180[s]. Portal.config(Config); Portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Here to do when WiFi is connected. } else { // Here to do when WiFi is not connected. } Portal.handleClient(); } Above Sketch shows a configuration example that you want to keep connecting to known access points as long as possible. When the WiFi connection is lost, it will start seeking the WiFi network every 30 seconds during the handleClient loop. Limitation for automatic reconnection to a specific access point An access point that ESP module to reconnect automatically depends on whether the SSID and password argument existence with AutoConnect::begin . If the Sketch calls AutoConnect::begin without specifying an SSID or password, the autoReconnect will connect to one of the detected access points and cannot be pre-determined. The other one, the case of the Sketch specifies SSID and password with AutoConnect::begin , the autoReconnect will try to reconnect to a specified access point periodically during the handleClient loop. Also, you can combine the background automatic reconnect performing inside the loop function by handleClient with AutoConnectConfig::retainPortal and AutoConnectConfig::autoReset , to enable pop up the captive portal automatically on the client device each time the ESP module disconnects from the access point. AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoReset = false; // Not reset the module even by intentional disconnection using AutoConnect menu. Config.autoReconnect = true; // Reconnect to known access points. Config.reconnectInterval = 6 ; // Reconnection attempting interval is 3[min]. Config.retainPortal = true; // Keep the captive portal open. Portal.config(Config); Portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Here to do when WiFi is connected. } else { // Here to do when WiFi is not connected. } } The effective range of the reconnectInterval depending on the setting value The range of values that reconnectInterval can take is 0 to 255. (Actual seconds are from 0 to 255\u00d7AUTOCONNECT_UNITTIME) Reconnect behavior depends on the setting value. If it is 0, reconnection will work if the 1 st -WiFi.begin in AutoConnect::begin fails and will suspend during the handleClient loop. If reconnectInterval is greater than 0, AutoConnect will attempt to reconnect both in AutoConnect::begin and during the handleClient loop.","title":"Automatic reconnect (Background)"},{"location":"adconnection.html#configure-wifi-channel","text":"Appropriately specifying the WiFi channel to use for ESP8266 and ESP32 is essential for a stable connection with the access point. AutoConnect remembers the WiFi channel with a credential of the access point once connected and reuses it. The default channel when a captive portal starts and AutoConnect itself becomes an access point is the AutoConnectConfig::channel member. If this channel is different from the channel of the access point you will attempt to connect, WiFi.begin may fail. The cause is that the ESP module shares the same channel in AP mode and STA mode. If the connection attempt is not stable, specifying a proper channel using AutoConnectConfig::channel may result in a stable connection.","title":"Configure WiFi channel"},{"location":"adconnection.html#connects-depending-on-the-wifi-signal-strength","text":"When the ESP module found the multiple available access points (ie. AutoConnect has connected in the past), the default behavior AutoConnect will attempt to connect to the least recent one. However, If the ESP module can operate properly with any access point, it is advantageous to establish a connection with the best one of the reception sensitivity. The AutoConnectConfig::principle parameter has the connection disposition, and specifying AC_PRINCIPLE_RSSI will attempt to connect to one of the highest RSSI value among multiple available access points. Also You can expect stable WiFi connection by specifying the lower limit of signal strength using AutoConnectConfig::minRSSI . Combining these two parameters allows you to filter the destination AP when multiple available access points are found. AutoConnectConfig::principle affects the behavior of both 1 st -WiFi.begin and autoReconnect . If you specify AC_PRINCIPLE_RECENT for the principle , it will try according to the conventional connection rules, but if you specify AC_PRINCIPLE_RSSI , it will try to connect to the access point that is sending the strongest WiFi signal at that time instead of the last accessed AP. Also, the static IPs will be restored from a saved credential instead of AutoConnectConfig. (The values specified by AutoConnectConfig is ignored) SSID & Password AutoConnectConfig ::principle Which credentials would be selected Static IPs AutoConnect ::begin NULL specified AC_PRINCIPLE_RECENT Nothing, depends on SDK saves Use the specified value of AutoConnectConfig AC_PRINCIPLE_RSSI Auto-selected credentials with max RSSI Restoring static IPs suitable for the SSID from saved credentials Specified with the Sketch Not effective By AutoConnect::begin parameters Use the specified value of AutoConnectConfig AutoReconnect Load from saved credential AC_PRINCIPLE_RECENT Recently saved SSID would be chosen Restoring static IPs suitable for the SSID from saved credentials AC_PRINCIPLE_RSSI Auto-selected credentials with max RSSI In ESP32, the difference between the AutoConnectConfig::principle and WIFI_ALL_CHANNEL_SCAN in WiFi.begin In ESP32, if there are multiple access points with the same SSID and PW within reach, WiFi.begin with the SSID and PW explicitly specified will scan all radio channels and connect to the AP which has the highest signal strength. This feature has been enabled since ESP32 Arduino Release 1.0.6 . The principle setting is slightly different from this feature. AutoConnect does not specify the SSID and PW in the 1 st -WiFi.begin . It leaves that to the contents stored in the SDK. Even if there is an AP with a stronger signal nearby, it will try to connect to an AP with a smaller channel number . However, in the case where autoReconnect setting will attempt to reconnect, AutoConnect will read the SSID and PW from the saved credentials and explicitly pass them to WiFi.begin . Therefore, in this case, the connection will be made to the AP with the highest signal strength by WIFI_ALL_CHANNEL_SCAN . But it is only valid across multiple APs with the same SSID and PW . On the other hand, AC_PRINCIPLE_RSSI tries to connect the AP with the strongest signal from the connection candidates after selecting the SSID when multiple APs with different SSIDs are mixed in the reachable range.","title":"Connects depending on the WiFi signal strength"},{"location":"adconnection.html#detects-connection-establishment-to-ap","text":"The Sketch can detect that the ESP module has established a WiFi connection as a station to the access point. The AutoConnect::begin or AutoConnect::handleClient will transit the control temporarily to the function in the Sketch registered by AutoConnect::onConnect when the ESP module establish a WiFi connection. The ConnectExit function registered with AutoConnect::onConnect should have the following types and arguments: void ConnectExit(IPAddress & ip) The ConnectExit function is of type void . The argument ip is the IP address assigned to the ESP module by the connected AP. AutoConnect::onConnect allows the Sketch registers a ConnectExit function to AutoConnect. Also, you can make the function using a lambda expression . AutoConnect Portal; void onConnect (IPAddress & ipaddr) { Serial.print( \"WiFi connected with \" ); Serial.print(WiFi.SSID()); Serial.print( \", IP:\" ); Serial.println(ipaddr.toString()); } void setup () { Serial.begin( 115200 ); Portal.onConnect(onConnect); // Register the ConnectExit function Portal.begin(); } void loop () { Portal.handleClient(); } In addition, a sketch that shuts down SoftAP when the ESP module connects to the access point can be described using a lambda expression as follows: AutoConnect Portal; void setup () { Serial.begin( 115200 ); Portal.onConnect([](IPAddress & ipaddr){ Serial.printf( \"WiiFi connected with %s, IP:%s \\n \" , WiFi.SSID().c_str(), ipaddr.toString().c_str()); if (WiFi.getMode() & WIFI_AP) { WiFi.softAPdisconnect(true); WiFi.enableAP(false); Serial.printf( \"SoftAP:%s shut down \\n \" , WiFi.softAPSSID().c_str()); } }); Portal.begin(); } void loop () { Portal.handleClient(); } It is not an event AutoConnect::onConnect has the same effect on the Sketch as the WiFi.onStationModeConnected , but AutoConnect does not use the event. Sketch can use WiFi.onEvent independently of AutoConnect.","title":"Detects connection establishment to AP"},{"location":"adconnection.html#match-with-known-access-points-by-ssid","text":"By default, AutoConnect uses the BSSID to search for known access points. (Usually, it's the MAC address of the device) By using BSSID as the key to finding the WiFi network, AutoConnect can find even if the access point is hidden. However BSSIDs can change on some mobile hotspots, the BSSID-keyed searches may not be able to find known access points. If you operate inconvenience in aiming at the access point by BSSID, you can change the collation key from BSSID to SSID by uncommenting AUTOCONNECT_APKEY_SSID macro definition in AutoConnectDefs.h library source code. #define AUTOCONNECT_APKEY_SSID Allow you to use PlatformIO as a build system and give the following description to the platformio.ini , you can enable AUTOCONNECT_APKEY_SSID each build without modifying the library source code: build_flags = -DAUTOCONNECT_APKEY_SSID Can't be found hidden APs in SSID-keyed The hidden access point's SSID will be blank on the broadcast. So if the seek key is an SSID, AutoConnect will not find it.","title":"Match with known access points by SSID"},{"location":"adconnection.html#preserve-ap-mode","text":"Sketch using AutoConnect can open a gateway to the Internet by connecting to a WiFi router even through use Espressif's peculiar WiFi protocol (eg. ESP-MESH or ESP-NOW ). These specific communication protocols require to keeps AP + STA as the WiFi mode. That is, to apply these protocols, it needs to launch SoftAP by a sketch itself and then call AutoConnect::begin . But the default behavior of AutoConnect::begin will turn off SoftAP always then it will unable to open a connection. AutoConnectConfig::preserveAPMode setting maintains WIFI_AP mode without disabling SoftAP inside AutoConnect::begin . The Sketch can utilize the WiFi connection via AutoConnect with ESP-MESH and ESP-NOW protocol by enabling this option. The following diagram quoted from the ESP-MESH documentation that illustrates the typical topology of the MESH network. The module located at the Root Node bridges between the mesh network and the router by an application that handles two protocols, TCP/IP and ESP-MESH. Its SoftAP communicates with the internal mesh network as an interface of the mesh layer. On the other hand, STA performs station communication with the WiFi router as an interface of the TCP/IP layer. AutoConnect allows assists the connection between the router and the STA of the Root Node using AutoConnectConfig::preserveAPMode and starting the SoftAP via Sketch separately. Also in general, the Sketch should set false to AutoConnectConfig::autoRise , true to AutoConnectConfig::immediateStart when applying to those protocols.","title":"Preserve AP mode"},{"location":"adconnection.html#timeout-settings-for-a-connection-attempt","text":"AutoConnect uses AutoConnectConfig::beginTimeout value to limit time to attempt when connecting the ESP module to the access point as a WiFi station. The default value is AUTOCONNECT_TIMEOUT defined in AutoConnectDefs.h and the initial value is 30 seconds. (actually specified in milliseconds) For example, the following sketch sets the connection timeout to 15 seconds: AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.beginTimeout = 15000 ; // Timeout sets to 15[s] Portal.config(Config); Portal.begin(); } void loop () { Portal.handleClient(); } In addition, the limit of the waiting time for connection attempts can be specified by the AutoConnect::begin parameter too. The timeout parameter specified in AutoConnect::begin takes precedence over AutoConnectConfig::beginTimeout . The beginTimeout has an effect on handleClient The beginTimeout value will be applied with handleClient when requesting a connection from the captive portal and when attempting to reconnect with autoReconnect .","title":"Timeout settings for a connection attempt"},{"location":"adcpcontrol.html","text":"The default behavior of AutoConnect is to launch the captive portal if 1 st -WiFi.begin attempting inside AutoConnect::begin fails. You can change this default behavior through the AutoConnectConfig settings join together with Sketch code that implements to control the WiFi connection attempting. Captive portal start control Captive portal start detection Captive portal timeout control Disable the captive portal Launch the captive portal on demand by external trigger Launch the captive portal on-demand at losing WiFi Shutdown the captive portal Sketch execution during the captive portal loop Captive portal start control \u00b6 AutoConnect will launch the captive portal based on the AutoConnectConfig settings when the WiFi connection status will become to certain conditions. AutoConnectConfig::autoRise and AutoConnectConfig::immediateStart are concern the conditions to launch the captive portal. Also, the AutoConnectConfig::retainPortal controls the continuity of the captive portal state and allows the Sketch to launch the captive portal dynamically even while in a handleClient loop. The autoRise allows or disallows the launch of the captive portal. AutoConnect launches the captive portal only if the autoRise is true . If the autoRise is false , the captive portal will not start even if the WiFi connection is lost. Basically, the captive portal initiation is triggered by the result of 1 st -WiFi.begin , but Sketch can control it according to direct the following four actions by configuring AutoConnectConfig with two parameters, the immediateStart and the autoRise . AutoConnectConfig ::immediateStart AutoConnectConfig::autoRise true false true Skip *1st-WiFi.begin* ESP module becomes SoftAP and the captive portal starts immediately. Not attempt WiFi connection. Only WebServer will start in STA mode. false Attempts WiFi connection in STA mode. In some cases, the autoReconnect may restore the connection even if 1st-WiFiBeing fails. If the connection is completely lost, the captive portal will be launched. This is the default. Attempts WiFi connection in STA mode. In some cases, the autoReconnect may restore the connection even if 1st-WiFiBeing fails. ESP module stays in STA mode and WebServer will start. The retainPortal specifies the continuity of the captive portal after AutoConnect::begin , allowing the captive portal would be launched after the Sketch execution has transitioned into the loop function. When AutoConnect establishes a WiFi connection while in the captive portal within AutoConnect::begin , it stops the DNS server to close the captive portal with SoftAP still running. In this situation, if the Sketch loses the established WiFi connection while executing the loop function, it can reopen the captive portal. However, this behavior can be redundant depending on the Sketch characteristics. In such a case, you can prevent to starting the captive portal during the loop() by autoRise setting to false . Captive portal start detection \u00b6 The captive portal will only be activated if 1 st -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:\" + ip.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 Once AutoConnect has entered the captive portal state due to the above conditions, the default behavior is that AutoConnect::begin will not exit until a WiFi connection is established. Captive portal timeout control prevents AutoConnect from blocking the Sketch progress. It allows Sketch to abort AutoConnect::begin and returns control to Sketch. AutoConnect has two parameters for timeout control. The first is the timeout value used when trying to connect to the specified AP. It works like a typical timeout control for connection attempts with WiFi.begin. This setting is specified by the AutoConnectConfig::beginTimeout or third argument of the AutoConnect::begin function. The default value is the macro defined by AUTOCONNECT_TIMEOUT in the AutoConnectDefs.h header file. Another timeout control is for the captive portal itself. It is useful if you want to keep the Sketch offline running even if a WiFi connection is not possible. You can also combine its setting with the immediateStart option to create highly mobile sketches. The timeout of the captive portal is specified by the AutoConnectConfig::portalTimeout as follows. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds portal.config(config); portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } portal.handleClient(); } Also, if you want to stop AutoConnect completely when the captive portal is timed out, you need to call the AutoConnect::end function. It looks like the following code: bool acEnable; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds portal.config(config); acEnable = portal.begin(); if ( ! acEnable) { portal.end(); } } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } if (acEnable) { portal.handleClient(); } } AutoConnectConfig has another option related to timeouts that you can enable to take advantage of the captive portal feature after a timeout occurrence. The AutoConnectConfig::retainPortal option will not shut down SoftAP and the internal DNS server even though AutoConnect::begin has aborted due to a timeout occurrence. Even after the captive portal times out, you can always try to connect to the AP while keeping the Sketch running offline. The following sample code is the Sketch above with the retainPortal setting added. As you can see, the implementation for captive portal continuation does not affect the main logic of the Sketch. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds config.retainPortal = true; portal.config(config); portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } portal.handleClient(); } Disable the captive portal \u00b6 It can also prevent the captive portal from starting even if the connection at the 1 st -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(); Launch the captive portal on demand by external trigger \u00b6 The default behavior of AutoConnect::begin gives priority to connect to the least recently established access point. In general, We expect this behavior in most situations, but will intentionally launch the captive portal on some occasion. Here section describes how to launch on demand the captive portal, and suggests two templates that you can use to implement it. Offline for usual operation, connect to WiFi with an external switch You can use this template if the ESP module does not connect to WiFi at an ordinal situation and need to establish by a manual trigger. In this case, it is desirable that AutoConnect not start until an external switch fires. This behavior is similar to the WiFiManager's startConfigPortal function. AutoConnectConfig::immediateStart is an option to launch the portal by the SoftAP immediately without attempting 1 st -WiFi.begin . Also, by setting the AutoConnectConfig::autoRise option to false, it is possible to suppress unintended automatic pop-ups of the portal screen when connecting to an ESP module SSID. To implement this, execute AutoConnect::config within the setup() function as usual, and handle AutoConnect::begin inside the loop() function. #define TRIGGER_PIN 5 // Trigger switch should be LOW active. #define HOLD_TIMER 3000 AutoConnect Portal; AutoConnectConfig Config; void setup () { pinMode( 5 , INPUT_PULLUP); Config.immediateStart = true; // Config.autoRise = false; // If you don't need to automatically pop-up the portal when connected to the ESP module's SSID. Portal.config(Config); } void loop () { if (digitalRead(TRIGGER_PIN) == LOW) { unsigned long tm = millis(); while (digitalRead(TRIGGER_PIN) == LOW) { yield(); } // Hold the switch while HOLD_TIMER time to start connect. if (millis() - tm > HOLD_TIMER) Portal.begin(); } if (WiFi.status() == WL_CONNECTED) { // Here, what to do if the module has connected to a WiFi access point } // Main process of your sketch Portal.handleClient(); // If WiFi is not connected, handleClient will do nothing. } It will not be automatic reconnect 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. Register new access points on demand The following template is useful for controlling the registration of unknown access points. In this case, the ESP module establishes a WiFi connection using WiFi.begin natively without relying on AutoConnect. Known access point credentials are saved by AutoConnect, to the ESP module can use the saved credentials to handle WiFi.begin natively. This means that you can explicitly register available access points when needed, and the ESP module will not use unknown access points under normal situations. AutoConnect * portal = nullptr ; bool detectSwitch () { /* Returns true if an external switch to configure is active. */ } bool connectWiFi ( const char * ssid, const char * password, unsigned long timeout) { WiFi.mode(WiFi_STA); delay( 100 ); WiFi.begin(ssid, password); unsigned long tm = millis(); while (WiFi.status() != WL_CONNECTED) { if (millis() - tm > timeout) return false; } return true; } void setup () { AutoConnectCredential credt; station_config_t config; for ( int8_t e = 0 ; e < credt.entries(); e ++ ) { credt.load(e, & config); if (connectWiFi(config.ssid, config.password, 30000 )) break ; } if (WiFi.status() != WL_CONNECTED) { // Here, do something when WiFi cannot reach. } } void loop () { if (detectSwitch()) { AutoConnectConfig config; config.immediateStart = true; if ( ! portal) { portal = new AutoConnect; } portal -> config(config); if (portal -> begin()) { portal -> end(); delete portal; portal = nullptr ; } } // Here, ordinary sketch logic. } Launch the captive portal on-demand at losing WiFi \u00b6 If the ESP module loses the established WiFi connection during the loop of handleClient , you can prevent the ESP module from going absolutely standalone by launching the captive portal on demand. When retainPortal and autoRise settings are enabled, AutoConnect will launch SoftAP and start DNS when it detects a WiFi disconnect with the router during a handleClient loop. This behavior will occur caused by a WiFi disconnect detection even if the WiFi mode is STA. Since AutoConnect v1.2.0 , An improved retainPortal option allows the captive portal to be restarted during a handleClient loop even if it is closed once in AutoConnect::begin . In this case, the Sketch execution stage has already transitioned into the loop function, so the Sketch process seems running concurrently with the captive portal loop. Its captive portal launched from inside handleClient does not block the execution of the Sketch, unlike that launched from AutoConnect::begin . AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoRise = true; // It's the default, no setting is needed explicitly. Config.retainPortal = true; Portal.config(Config); Portal.begin(); } void loop () { Portal.handleClient(); } Need autoRise enabled Need AutoConnectConfig::autoRise setting enabled to start the captive portal on demand during a handleClient loop. Although the Sketch above specifies the retainPortal , it does not instruct starts the captive portal always. AutoConnect will try WiFi.begin once in AutoConnect::begin unless the immediateStart option is specified. If AutoConnect fails the 1 st -WiFi.begin , the captive portal will be launched at that point and the Sketch execution will stay within the AutoConnect::begin function. There is also a way to avoid starting the captive portal inside AutoConnect::begin and start the captive portal according to the WiFi connection status after the Sketch execution transitions to a handleClient loop . Adjusting the timing of autoRise activation will allow the captive portal to start only from inside AutoConnect::handleClient function. AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.retainPortal = true; Config.autoRise = false; // Suppresses the launch of the captive portal from AutoConnect::begin. Portal.config(Config); // Don't forget it. Portal.begin(); Config.autoRise = true; // Enable the launch of the captive portal. Portal.config(Config); // Don't forget it. } void loop () { Portal.handleClient(); } The retainPortal option will keep SoftAP even if WiFi has established a connection as a client with the router. Since it has the effect of stopping the DNS server, the phenomenon that the portal screen will not pop up automatically even though SoftAP is in action occur. This is a legacy behavior to ensure backward compatibility with up to AutoConnect v1.1.7. To stop SoftAP on escape from the on-demand captive portal, you need to explicitly call WiFi.softAPdisconnect(true) and WiFi.enableAP(false) in the Sketch. AutoConnect Portal; AutoConnectConfig Config; bool Connected; unsigned long Elapsed; void onConnect (IPAddress & clientIP) { Connected = true; Elapsed = millis(); } void setup () { Config.retainPortal = true; Portal.config(Config); Portal.onConnect(onConnect); Portal.begin(); } void loop () { if (WiFi.status() != WL_CONNECTED) { connected = false; Elapsed = millis(); } if ((WiFi.getMode() & WIFI_AP) && Connected) { if (millis() - Elapsed > 30000 ) { WiFi.softAPdisconnect(true); WiFi.enableAP(false); } } // Actual sketch process is here. Portal.handleClient(); } The above sketch will shutdown the SoftAP after elapsed time exceeds 30 seconds since the connection was re-established. Its logic is a bit tricky and does not stop SoftAP immediately after the connection established, which has several seconds delay. Doing it ensures that AutoConnect can send the HTML response. Stopped SoftAP is still displayed After SoftAP stopped, there is a time lag before it disappears from the detected access points list on the client device. Shutdown the captive portal \u00b6 There is some complexity in the conditions under which AutoConnect shuts down the captive portal. Making a sketch that activates SoftAP only when needed can seem tedious. But there is a reason why. Even if AutoConnect could establish a connection using a captive portal, your cell phone as a client device would still have to keep connected to the ESP module-generated SoftAP in order to send the page for notifying the connection successful to a user. At that point, your client device that opened the captive portal still needs a connection with SoftAP. What happens, after all, is as follows: You made a connection to the access point such as WiFi router using the captive portal and took a successful page. Your sketch will rush into the loop function and starts to works well, hooray! Oops. Don't celebrate yet. I can see SoftAP ID on my cell phone. But the AutoConnect page never pops up automatically. Why? Because, for the above reasons, we can not promptly shut down the SoftAP. (However, DNS will stop) So, If you want to stop SoftAP after connecting to the access point using the captive portal, you need to implement the shutdown process with Sketch explicitly. A template of the basic sketch that can stop the SoftAP after the connection is the following: AutoConnect Portal; void setup () { if (Portal.begin()) { if (WiFi.getMode() & WIFI_AP) { WiFi.softAPdisconnect(true); WiFi.enableAP(false); } } } void loop () { Portal.handleClient(); } If you stop SoftAP, the connection will be lost If you stop SoftAP immediately after the AutoConnect::begin successful, will part with the connection and cannot see the result notifying on your client device. You can expect to receive result notifications if you run handleClient before stopping SoftAP. (although you may not always succeed; it will not work if the WiFi radio signal is weak) Sketch execution during the captive portal loop \u00b6 With AutoConnect::begin , once the captive portal is started without being able to connect to a known WiFi access point, control will not return to sketch until the WiFi connection is established or times out. This behavior helps to pin the ESP module's network participation as a WiFi client (that is, AutoConnect::begin is an alternative to WiFi.begin) but it can not rush into the loop function of the Sketch. Therefore, while the ESP module is in the captive portal state and waiting for a connection operation to the access point, the behavior of the Sketch will be restrained by the escape conditions from AutoConnect::begin . The whileCaptivePortal exit allows the Sketch to continue the process temporarily while the ESP module remains standalone and the captive portal is open. AutConnect::whileCaptivePortal function registers the user's sketch function to be called by AutoConnect::begin or AutoConnect::handleClient during the execution of the captive portal session loop. The whileCaptivePortal exit can be registered by following: AutoConnect portal; bool whileCP ( void ) { bool rc; // Here, something to process while the captive portal is open. // To escape from the captive portal loop, this exit function returns false. // rc = true;, or rc = false; return rc; } void setup () { ... portal.whileCaptivePortal(whileCP); portal.begin(); ... } AutoConnect will open the captive portal in the AutoConnect::begin and AutoConnect::handleClient scenes, but the whileCaptive portal exit will be called repeatedly from AutoConnect::begin until exits from it. The whileCaptivePortal exit will be called repeatedly while the captive portal is open until WiFi connected or times out occurs. In the Sketch, returning a FALSE value from the whileCaptivePortal function allows the control to escape from the captive portal loop even before the session elapsed time exceeds the limits.","title":"Captive portal control"},{"location":"adcpcontrol.html#captive-portal-start-control","text":"AutoConnect will launch the captive portal based on the AutoConnectConfig settings when the WiFi connection status will become to certain conditions. AutoConnectConfig::autoRise and AutoConnectConfig::immediateStart are concern the conditions to launch the captive portal. Also, the AutoConnectConfig::retainPortal controls the continuity of the captive portal state and allows the Sketch to launch the captive portal dynamically even while in a handleClient loop. The autoRise allows or disallows the launch of the captive portal. AutoConnect launches the captive portal only if the autoRise is true . If the autoRise is false , the captive portal will not start even if the WiFi connection is lost. Basically, the captive portal initiation is triggered by the result of 1 st -WiFi.begin , but Sketch can control it according to direct the following four actions by configuring AutoConnectConfig with two parameters, the immediateStart and the autoRise . AutoConnectConfig ::immediateStart AutoConnectConfig::autoRise true false true Skip *1st-WiFi.begin* ESP module becomes SoftAP and the captive portal starts immediately. Not attempt WiFi connection. Only WebServer will start in STA mode. false Attempts WiFi connection in STA mode. In some cases, the autoReconnect may restore the connection even if 1st-WiFiBeing fails. If the connection is completely lost, the captive portal will be launched. This is the default. Attempts WiFi connection in STA mode. In some cases, the autoReconnect may restore the connection even if 1st-WiFiBeing fails. ESP module stays in STA mode and WebServer will start. The retainPortal specifies the continuity of the captive portal after AutoConnect::begin , allowing the captive portal would be launched after the Sketch execution has transitioned into the loop function. When AutoConnect establishes a WiFi connection while in the captive portal within AutoConnect::begin , it stops the DNS server to close the captive portal with SoftAP still running. In this situation, if the Sketch loses the established WiFi connection while executing the loop function, it can reopen the captive portal. However, this behavior can be redundant depending on the Sketch characteristics. In such a case, you can prevent to starting the captive portal during the loop() by autoRise setting to false .","title":"Captive portal start control"},{"location":"adcpcontrol.html#captive-portal-start-detection","text":"The captive portal will only be activated if 1 st -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:\" + ip.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":"adcpcontrol.html#captive-portal-timeout-control","text":"Once AutoConnect has entered the captive portal state due to the above conditions, the default behavior is that AutoConnect::begin will not exit until a WiFi connection is established. Captive portal timeout control prevents AutoConnect from blocking the Sketch progress. It allows Sketch to abort AutoConnect::begin and returns control to Sketch. AutoConnect has two parameters for timeout control. The first is the timeout value used when trying to connect to the specified AP. It works like a typical timeout control for connection attempts with WiFi.begin. This setting is specified by the AutoConnectConfig::beginTimeout or third argument of the AutoConnect::begin function. The default value is the macro defined by AUTOCONNECT_TIMEOUT in the AutoConnectDefs.h header file. Another timeout control is for the captive portal itself. It is useful if you want to keep the Sketch offline running even if a WiFi connection is not possible. You can also combine its setting with the immediateStart option to create highly mobile sketches. The timeout of the captive portal is specified by the AutoConnectConfig::portalTimeout as follows. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds portal.config(config); portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } portal.handleClient(); } Also, if you want to stop AutoConnect completely when the captive portal is timed out, you need to call the AutoConnect::end function. It looks like the following code: bool acEnable; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds portal.config(config); acEnable = portal.begin(); if ( ! acEnable) { portal.end(); } } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } if (acEnable) { portal.handleClient(); } } AutoConnectConfig has another option related to timeouts that you can enable to take advantage of the captive portal feature after a timeout occurrence. The AutoConnectConfig::retainPortal option will not shut down SoftAP and the internal DNS server even though AutoConnect::begin has aborted due to a timeout occurrence. Even after the captive portal times out, you can always try to connect to the AP while keeping the Sketch running offline. The following sample code is the Sketch above with the retainPortal setting added. As you can see, the implementation for captive portal continuation does not affect the main logic of the Sketch. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds config.retainPortal = true; portal.config(config); portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } portal.handleClient(); }","title":"Captive portal timeout control"},{"location":"adcpcontrol.html#disable-the-captive-portal","text":"It can also prevent the captive portal from starting even if the connection at the 1 st -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":"adcpcontrol.html#launch-the-captive-portal-on-demand-by-external-trigger","text":"The default behavior of AutoConnect::begin gives priority to connect to the least recently established access point. In general, We expect this behavior in most situations, but will intentionally launch the captive portal on some occasion. Here section describes how to launch on demand the captive portal, and suggests two templates that you can use to implement it. Offline for usual operation, connect to WiFi with an external switch You can use this template if the ESP module does not connect to WiFi at an ordinal situation and need to establish by a manual trigger. In this case, it is desirable that AutoConnect not start until an external switch fires. This behavior is similar to the WiFiManager's startConfigPortal function. AutoConnectConfig::immediateStart is an option to launch the portal by the SoftAP immediately without attempting 1 st -WiFi.begin . Also, by setting the AutoConnectConfig::autoRise option to false, it is possible to suppress unintended automatic pop-ups of the portal screen when connecting to an ESP module SSID. To implement this, execute AutoConnect::config within the setup() function as usual, and handle AutoConnect::begin inside the loop() function. #define TRIGGER_PIN 5 // Trigger switch should be LOW active. #define HOLD_TIMER 3000 AutoConnect Portal; AutoConnectConfig Config; void setup () { pinMode( 5 , INPUT_PULLUP); Config.immediateStart = true; // Config.autoRise = false; // If you don't need to automatically pop-up the portal when connected to the ESP module's SSID. Portal.config(Config); } void loop () { if (digitalRead(TRIGGER_PIN) == LOW) { unsigned long tm = millis(); while (digitalRead(TRIGGER_PIN) == LOW) { yield(); } // Hold the switch while HOLD_TIMER time to start connect. if (millis() - tm > HOLD_TIMER) Portal.begin(); } if (WiFi.status() == WL_CONNECTED) { // Here, what to do if the module has connected to a WiFi access point } // Main process of your sketch Portal.handleClient(); // If WiFi is not connected, handleClient will do nothing. } It will not be automatic reconnect 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. Register new access points on demand The following template is useful for controlling the registration of unknown access points. In this case, the ESP module establishes a WiFi connection using WiFi.begin natively without relying on AutoConnect. Known access point credentials are saved by AutoConnect, to the ESP module can use the saved credentials to handle WiFi.begin natively. This means that you can explicitly register available access points when needed, and the ESP module will not use unknown access points under normal situations. AutoConnect * portal = nullptr ; bool detectSwitch () { /* Returns true if an external switch to configure is active. */ } bool connectWiFi ( const char * ssid, const char * password, unsigned long timeout) { WiFi.mode(WiFi_STA); delay( 100 ); WiFi.begin(ssid, password); unsigned long tm = millis(); while (WiFi.status() != WL_CONNECTED) { if (millis() - tm > timeout) return false; } return true; } void setup () { AutoConnectCredential credt; station_config_t config; for ( int8_t e = 0 ; e < credt.entries(); e ++ ) { credt.load(e, & config); if (connectWiFi(config.ssid, config.password, 30000 )) break ; } if (WiFi.status() != WL_CONNECTED) { // Here, do something when WiFi cannot reach. } } void loop () { if (detectSwitch()) { AutoConnectConfig config; config.immediateStart = true; if ( ! portal) { portal = new AutoConnect; } portal -> config(config); if (portal -> begin()) { portal -> end(); delete portal; portal = nullptr ; } } // Here, ordinary sketch logic. }","title":"Launch the captive portal on demand by external trigger"},{"location":"adcpcontrol.html#launch-the-captive-portal-on-demand-at-losing-wifi","text":"If the ESP module loses the established WiFi connection during the loop of handleClient , you can prevent the ESP module from going absolutely standalone by launching the captive portal on demand. When retainPortal and autoRise settings are enabled, AutoConnect will launch SoftAP and start DNS when it detects a WiFi disconnect with the router during a handleClient loop. This behavior will occur caused by a WiFi disconnect detection even if the WiFi mode is STA. Since AutoConnect v1.2.0 , An improved retainPortal option allows the captive portal to be restarted during a handleClient loop even if it is closed once in AutoConnect::begin . In this case, the Sketch execution stage has already transitioned into the loop function, so the Sketch process seems running concurrently with the captive portal loop. Its captive portal launched from inside handleClient does not block the execution of the Sketch, unlike that launched from AutoConnect::begin . AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoRise = true; // It's the default, no setting is needed explicitly. Config.retainPortal = true; Portal.config(Config); Portal.begin(); } void loop () { Portal.handleClient(); } Need autoRise enabled Need AutoConnectConfig::autoRise setting enabled to start the captive portal on demand during a handleClient loop. Although the Sketch above specifies the retainPortal , it does not instruct starts the captive portal always. AutoConnect will try WiFi.begin once in AutoConnect::begin unless the immediateStart option is specified. If AutoConnect fails the 1 st -WiFi.begin , the captive portal will be launched at that point and the Sketch execution will stay within the AutoConnect::begin function. There is also a way to avoid starting the captive portal inside AutoConnect::begin and start the captive portal according to the WiFi connection status after the Sketch execution transitions to a handleClient loop . Adjusting the timing of autoRise activation will allow the captive portal to start only from inside AutoConnect::handleClient function. AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.retainPortal = true; Config.autoRise = false; // Suppresses the launch of the captive portal from AutoConnect::begin. Portal.config(Config); // Don't forget it. Portal.begin(); Config.autoRise = true; // Enable the launch of the captive portal. Portal.config(Config); // Don't forget it. } void loop () { Portal.handleClient(); } The retainPortal option will keep SoftAP even if WiFi has established a connection as a client with the router. Since it has the effect of stopping the DNS server, the phenomenon that the portal screen will not pop up automatically even though SoftAP is in action occur. This is a legacy behavior to ensure backward compatibility with up to AutoConnect v1.1.7. To stop SoftAP on escape from the on-demand captive portal, you need to explicitly call WiFi.softAPdisconnect(true) and WiFi.enableAP(false) in the Sketch. AutoConnect Portal; AutoConnectConfig Config; bool Connected; unsigned long Elapsed; void onConnect (IPAddress & clientIP) { Connected = true; Elapsed = millis(); } void setup () { Config.retainPortal = true; Portal.config(Config); Portal.onConnect(onConnect); Portal.begin(); } void loop () { if (WiFi.status() != WL_CONNECTED) { connected = false; Elapsed = millis(); } if ((WiFi.getMode() & WIFI_AP) && Connected) { if (millis() - Elapsed > 30000 ) { WiFi.softAPdisconnect(true); WiFi.enableAP(false); } } // Actual sketch process is here. Portal.handleClient(); } The above sketch will shutdown the SoftAP after elapsed time exceeds 30 seconds since the connection was re-established. Its logic is a bit tricky and does not stop SoftAP immediately after the connection established, which has several seconds delay. Doing it ensures that AutoConnect can send the HTML response. Stopped SoftAP is still displayed After SoftAP stopped, there is a time lag before it disappears from the detected access points list on the client device.","title":"Launch the captive portal on-demand at losing WiFi"},{"location":"adcpcontrol.html#shutdown-the-captive-portal","text":"There is some complexity in the conditions under which AutoConnect shuts down the captive portal. Making a sketch that activates SoftAP only when needed can seem tedious. But there is a reason why. Even if AutoConnect could establish a connection using a captive portal, your cell phone as a client device would still have to keep connected to the ESP module-generated SoftAP in order to send the page for notifying the connection successful to a user. At that point, your client device that opened the captive portal still needs a connection with SoftAP. What happens, after all, is as follows: You made a connection to the access point such as WiFi router using the captive portal and took a successful page. Your sketch will rush into the loop function and starts to works well, hooray! Oops. Don't celebrate yet. I can see SoftAP ID on my cell phone. But the AutoConnect page never pops up automatically. Why? Because, for the above reasons, we can not promptly shut down the SoftAP. (However, DNS will stop) So, If you want to stop SoftAP after connecting to the access point using the captive portal, you need to implement the shutdown process with Sketch explicitly. A template of the basic sketch that can stop the SoftAP after the connection is the following: AutoConnect Portal; void setup () { if (Portal.begin()) { if (WiFi.getMode() & WIFI_AP) { WiFi.softAPdisconnect(true); WiFi.enableAP(false); } } } void loop () { Portal.handleClient(); } If you stop SoftAP, the connection will be lost If you stop SoftAP immediately after the AutoConnect::begin successful, will part with the connection and cannot see the result notifying on your client device. You can expect to receive result notifications if you run handleClient before stopping SoftAP. (although you may not always succeed; it will not work if the WiFi radio signal is weak)","title":"Shutdown the captive portal"},{"location":"adcpcontrol.html#sketch-execution-during-the-captive-portal-loop","text":"With AutoConnect::begin , once the captive portal is started without being able to connect to a known WiFi access point, control will not return to sketch until the WiFi connection is established or times out. This behavior helps to pin the ESP module's network participation as a WiFi client (that is, AutoConnect::begin is an alternative to WiFi.begin) but it can not rush into the loop function of the Sketch. Therefore, while the ESP module is in the captive portal state and waiting for a connection operation to the access point, the behavior of the Sketch will be restrained by the escape conditions from AutoConnect::begin . The whileCaptivePortal exit allows the Sketch to continue the process temporarily while the ESP module remains standalone and the captive portal is open. AutConnect::whileCaptivePortal function registers the user's sketch function to be called by AutoConnect::begin or AutoConnect::handleClient during the execution of the captive portal session loop. The whileCaptivePortal exit can be registered by following: AutoConnect portal; bool whileCP ( void ) { bool rc; // Here, something to process while the captive portal is open. // To escape from the captive portal loop, this exit function returns false. // rc = true;, or rc = false; return rc; } void setup () { ... portal.whileCaptivePortal(whileCP); portal.begin(); ... } AutoConnect will open the captive portal in the AutoConnect::begin and AutoConnect::handleClient scenes, but the whileCaptive portal exit will be called repeatedly from AutoConnect::begin until exits from it. The whileCaptivePortal exit will be called repeatedly while the captive portal is open until WiFi connected or times out occurs. In the Sketch, returning a FALSE value from the whileCaptivePortal function allows the control to escape from the captive portal loop even before the session elapsed time exceeds the limits.","title":"Sketch execution during the captive portal loop"},{"location":"adcredential.html","text":"AutoConnect automatically saves the credentials of the established WiFi connection according to the AutoConnectConfig::autoSave settings. The save destination differs depending on the type of ESP module. In the case of ESP8266, it is the EEPROM, and in the case of ESP32, it is the NVS ( Non-volatile storage ) partition implemented by the Preferences class. Sketches can access their stored credentials through a class that is independent of AutoConnect. Access to saved credentials Autosave Credential Move the saving area of EEPROM for the credentials Access to saved credentials \u00b6 AutoConnect stores the credentials of the established WiFi connection in the flash of the ESP8266/ESP32 module and equips the class to access them from the Sketch. The Sketch can read, write, or erase the credentials using this class as the AutoConnectCredential individually. 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. Autosave Credential \u00b6 In the sketch, you can give an indication of when to save the credentials by setting the following three options of AutoConnectConfig::autoSave : AC_SAVECREDENTIAL_AUTO : AutoConnect will save a credential when the WiFi connection is established with an access point. Its credential contains BSSID which a connection established access point has. AC_SAVECREDENTIAL_ALWAYS : AutoConnect will save a credential entered via Configure new AP menu even if a connection attempt has failed. BSSID does not exist in the credentials registered with this option. (will be 0x00) If this credential is selected as a connection candidate, the SSID will be adopted for matching attempts with the target access point even if AUTOCONNECT_APKEY_SSID is not enabled. AC_SAVECREDENTIAL_NEVER : AutoConnect will not store the credentials even if the connection to the access point is successful. However, the core SDK will save it, so it retains the previously established connection unless you disconnect the ESP module from the connected access point. 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) 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 boundaryOffset is ignored with the combination of AutoConnect v1.0.0 or later and the arduino-esp32 1.0.3 or later. The AutoConnectConfig::boundaryOffset setting allows AutoConnect to write its data to EEPROM while preserving custom configuration data. Similarly, when a Sketch writes its own data to EEPROM, it must preserve the data written by AutoConnect. The EEPROM library for ESP8266 erases the entire flash sector when it writes to any part of the sector. Therefore, when writing data to EEPROM with a sketch that handles the custom data, it is necessary to call EEPROM.begin using a total amount of a custom data size and the saved credentials size. The following code shows how to use the AutoConnect::getEEPROMUsedSize function to store custom configuration settings in EEPROM without conflicting with AutoConnect's use of that storage. AutoConnect portal; AutoConnectConfig config; // Defines the custom data should be stored in EEPROM. typedef struct { char data1[ 8 ]; char data2[ 8 ]; char data3[ 8 ]; } EEPROM_CONFIG_t; EEPROM_CONFIG_t eepromConfig; ... // Declares to reserve the EEPROM_CONFIG_t area for a Sketch using. config.boundaryOffset = sizeof (eepromConfig); portal.config(config); ... strcpy(eepromComfig.data1, \"data1\" ); strcpy(eepromComfig.data2, \"data2\" ); strcpy(eepromComfig.data3, \"data3\" ); // Use getEEPROMUsedSize to access the EEPROM with the appropriate region size. EEPROM.begin(portal.getEEPROMUsedSize()); EEPROM.put < EEPROM_CONFIG_t > ( 0 , eepromConfig); EEPROM.commit(); EEPROM.end(); ...","title":"Credential accesses"},{"location":"adcredential.html#access-to-saved-credentials","text":"AutoConnect stores the credentials of the established WiFi connection in the flash of the ESP8266/ESP32 module and equips the class to access them from the Sketch. The Sketch can read, write, or erase the credentials using this class as the AutoConnectCredential individually. 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":"adcredential.html#autosave-credential","text":"In the sketch, you can give an indication of when to save the credentials by setting the following three options of AutoConnectConfig::autoSave : AC_SAVECREDENTIAL_AUTO : AutoConnect will save a credential when the WiFi connection is established with an access point. Its credential contains BSSID which a connection established access point has. AC_SAVECREDENTIAL_ALWAYS : AutoConnect will save a credential entered via Configure new AP menu even if a connection attempt has failed. BSSID does not exist in the credentials registered with this option. (will be 0x00) If this credential is selected as a connection candidate, the SSID will be adopted for matching attempts with the target access point even if AUTOCONNECT_APKEY_SSID is not enabled. AC_SAVECREDENTIAL_NEVER : AutoConnect will not store the credentials even if the connection to the access point is successful. However, the core SDK will save it, so it retains the previously established connection unless you disconnect the ESP module from the connected access point. 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":"Autosave Credential"},{"location":"adcredential.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 boundaryOffset is ignored with the combination of AutoConnect v1.0.0 or later and the arduino-esp32 1.0.3 or later. The AutoConnectConfig::boundaryOffset setting allows AutoConnect to write its data to EEPROM while preserving custom configuration data. Similarly, when a Sketch writes its own data to EEPROM, it must preserve the data written by AutoConnect. The EEPROM library for ESP8266 erases the entire flash sector when it writes to any part of the sector. Therefore, when writing data to EEPROM with a sketch that handles the custom data, it is necessary to call EEPROM.begin using a total amount of a custom data size and the saved credentials size. The following code shows how to use the AutoConnect::getEEPROMUsedSize function to store custom configuration settings in EEPROM without conflicting with AutoConnect's use of that storage. AutoConnect portal; AutoConnectConfig config; // Defines the custom data should be stored in EEPROM. typedef struct { char data1[ 8 ]; char data2[ 8 ]; char data3[ 8 ]; } EEPROM_CONFIG_t; EEPROM_CONFIG_t eepromConfig; ... // Declares to reserve the EEPROM_CONFIG_t area for a Sketch using. config.boundaryOffset = sizeof (eepromConfig); portal.config(config); ... strcpy(eepromComfig.data1, \"data1\" ); strcpy(eepromComfig.data2, \"data2\" ); strcpy(eepromComfig.data3, \"data3\" ); // Use getEEPROMUsedSize to access the EEPROM with the appropriate region size. EEPROM.begin(portal.getEEPROMUsedSize()); EEPROM.put < EEPROM_CONFIG_t > ( 0 , eepromConfig); EEPROM.commit(); EEPROM.end(); ...","title":"Move the saving area of EEPROM for the credentials"},{"location":"adexterior.html","text":"The design of various AutoConnect web pages is basically inflexible. Its appearance and layout don't have many customizable visual aspects but nevertheless, you can customize the following appearances of your AutoConnect web pages: AutoConnect menu colorize (See Appendix ) Make different menu labels Make different menu title Capture the legacy web pages as items into the menu Make different menu labels \u00b6 You can change the label text for each menu item but cannot change them at run time. There are two ways to change the label text, both of which require coding the label literal. Overwrite the label literal of library source code directly. You can change the label of the AutoConnect menu item by rewriting the default label literal in AutoConnectLabels.h macros. However, changing menu items literal 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_UPDATE \"Update\" #define AUTOCONNECT_MENULABEL_HOME \"HOME\" #define AUTOCONNECT_MENULABEL_DEVINFO \"Device info\" #define AUTOCONNECT_BUTTONLABEL_RESET \"RESET\" #define AUTOCONNECT_BUTTONLABEL_UPDATE \"UPDATE\" build_flags with PlatformIO will no effect The mistake that many people make is to use PlatformIO's build_flags to try to redefine any literal at compile time. The AutoConnect library statically contains the label literals which are embedded as binary data when compiling the library code. The label literals will not change without compiling the library source. And PlatformIO is a build system. Library sources will not be compiled unless AutoConnectLabels.h is updated. Change the label literals for each Arduino project Another way to change the label literal is to provide a header file that defines the label literals, as mentioned in Appendix . You can also use this method to display label text and fixed text in the local language on the AutoConnect page. See Change the item's label text section for details. Make different 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. Capture the legacy web pages as items into the menu \u00b6 You can embed the ordinary page processed by the ESP8266WebServer request handler as an item into the AutoConnect menu. AutoConnect can capture the legacy web pages for ESP8266WebServer or WebServer of ESP32 and extends the menu containing these items. In ordinary, the Sketch registers the request handler for the page depending on URI using the ESP8266WebServer::on function. AutoConnect allows Sketch to bundle the registered legacy page into a menu. the Sketch is able to include its URI to a menu item using AutoConnect::append function that creates internally an AutoConnectAux depended on its URI and integrates into the menu. The following code has a mixture of both AutoConnectAux and the legacy web page. An AutoConnectAux page is menued automatically with the AutoConnect::join or AutoConnect::load function. Similarly, a legacy page is integrated by the AutoConnect::append function. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> ESP8266WebServer server; AutoConnect portal (server); // Definitions of AutoConnectAux page static const char PAGE[] PROGMEM = R\"( { \"title\": \"PAGE\", \"uri\": \"/page\", \"menu\": true, \"element\": [ { \"name\": \"cap\", \"type\": \"ACText\", \"value\": \"This is a custom web page.\" } ] } )\" ; void setup () { // The Web page handler located to /hello server.on( \"/hello\" , [](){ server.send( 200 , \"text/html\" , String(F( \"<html>\" \"<head><meta name='viewport' content='width=device-width,initial-scale=1.0'></head>\" \"<body><h2>Hello, world</h2></body>\" \"</html>\" ))); }); portal.append( \"/hello\" , \"HELLO\" ); // Adds an item as HELLO into the menu portal.load(FPSTR(PAGE)); // Load AutoConnectAux custom web page portal.begin(); } void loop () { portal.handleClient(); } The AutoConnect::append function also has the third parameter that directly specifies the request handler. It has similar efficacy to calling the append and ESP8266WebSever::on at once. 1 portal.append( \"/hello\" , \"HELLO\" , [](){ server.send( 200 , \"text/html\" , String(F( \"<html>\" \"<head><meta name='viewport' content='width=device-width,initial-scale=1.0'></head>\" \"<body><h2>Hello, world</h2></body>\" \"</html>\" ))); }); For more details, see section Attach the menus of Examples page. An instance of ESP8266WebServer/WebServer is needed When calling the append function with request handler parameters, an instance of the WebServer as the registration destination must exist. AutoConnect can instantiate and host a WebServer internally, but in that case, the point in time to call the AutoConnect::append function with a request handler parameter must be after AutoConnect::begin . window.onload = function() { Gifffer(); }; However, the pages registered this way remain legacy. Therefore, the AutoConnect menu bar is not appeared. \u21a9","title":"Customizing page appearance"},{"location":"adexterior.html#make-different-menu-labels","text":"You can change the label text for each menu item but cannot change them at run time. There are two ways to change the label text, both of which require coding the label literal. Overwrite the label literal of library source code directly. You can change the label of the AutoConnect menu item by rewriting the default label literal in AutoConnectLabels.h macros. However, changing menu items literal 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_UPDATE \"Update\" #define AUTOCONNECT_MENULABEL_HOME \"HOME\" #define AUTOCONNECT_MENULABEL_DEVINFO \"Device info\" #define AUTOCONNECT_BUTTONLABEL_RESET \"RESET\" #define AUTOCONNECT_BUTTONLABEL_UPDATE \"UPDATE\" build_flags with PlatformIO will no effect The mistake that many people make is to use PlatformIO's build_flags to try to redefine any literal at compile time. The AutoConnect library statically contains the label literals which are embedded as binary data when compiling the library code. The label literals will not change without compiling the library source. And PlatformIO is a build system. Library sources will not be compiled unless AutoConnectLabels.h is updated. Change the label literals for each Arduino project Another way to change the label literal is to provide a header file that defines the label literals, as mentioned in Appendix . You can also use this method to display label text and fixed text in the local language on the AutoConnect page. See Change the item's label text section for details.","title":"Make different menu labels"},{"location":"adexterior.html#make-different-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":"Make different menu title"},{"location":"adexterior.html#capture-the-legacy-web-pages-as-items-into-the-menu","text":"You can embed the ordinary page processed by the ESP8266WebServer request handler as an item into the AutoConnect menu. AutoConnect can capture the legacy web pages for ESP8266WebServer or WebServer of ESP32 and extends the menu containing these items. In ordinary, the Sketch registers the request handler for the page depending on URI using the ESP8266WebServer::on function. AutoConnect allows Sketch to bundle the registered legacy page into a menu. the Sketch is able to include its URI to a menu item using AutoConnect::append function that creates internally an AutoConnectAux depended on its URI and integrates into the menu. The following code has a mixture of both AutoConnectAux and the legacy web page. An AutoConnectAux page is menued automatically with the AutoConnect::join or AutoConnect::load function. Similarly, a legacy page is integrated by the AutoConnect::append function. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> ESP8266WebServer server; AutoConnect portal (server); // Definitions of AutoConnectAux page static const char PAGE[] PROGMEM = R\"( { \"title\": \"PAGE\", \"uri\": \"/page\", \"menu\": true, \"element\": [ { \"name\": \"cap\", \"type\": \"ACText\", \"value\": \"This is a custom web page.\" } ] } )\" ; void setup () { // The Web page handler located to /hello server.on( \"/hello\" , [](){ server.send( 200 , \"text/html\" , String(F( \"<html>\" \"<head><meta name='viewport' content='width=device-width,initial-scale=1.0'></head>\" \"<body><h2>Hello, world</h2></body>\" \"</html>\" ))); }); portal.append( \"/hello\" , \"HELLO\" ); // Adds an item as HELLO into the menu portal.load(FPSTR(PAGE)); // Load AutoConnectAux custom web page portal.begin(); } void loop () { portal.handleClient(); } The AutoConnect::append function also has the third parameter that directly specifies the request handler. It has similar efficacy to calling the append and ESP8266WebSever::on at once. 1 portal.append( \"/hello\" , \"HELLO\" , [](){ server.send( 200 , \"text/html\" , String(F( \"<html>\" \"<head><meta name='viewport' content='width=device-width,initial-scale=1.0'></head>\" \"<body><h2>Hello, world</h2></body>\" \"</html>\" ))); }); For more details, see section Attach the menus of Examples page. An instance of ESP8266WebServer/WebServer is needed When calling the append function with request handler parameters, an instance of the WebServer as the registration destination must exist. AutoConnect can instantiate and host a WebServer internally, but in that case, the point in time to call the AutoConnect::append function with a request handler parameter must be after AutoConnect::begin . window.onload = function() { Gifffer(); }; However, the pages registered this way remain legacy. Therefore, the AutoConnect menu bar is not appeared. \u21a9","title":"Capture the legacy web pages as items into the menu"},{"location":"adnetwork.html","text":"AutoConnect allows you to make the static configuration of SoftAP at runtime. Its configuration includes the identification information on the network such as the IP address and the access path of the Web page handled by AutoConnect etc. In addition, the mDNS service allows SoftAP to be accessed by hostname on the local network. The configuration settings for the network that can be set by AutoConnect is as follows: 404 handler Assign user sketch's home path Change SSID and Password for SoftAP Combination with mDNS Make SSID of SoftAP unique Relocate the AutoConnect home path SoftAP access point IP settings Static IP assignment as a client Station hostname 404 handler \u00b6 AutoConnect cannot allow the Sketch registers the \"Not-found\" handler (404-handler) to the ESP8266WebServer natively. AutoConnect traps Not-found handler of the ESP8266WebServer for its own page processing. If the Sketch overrides the Not-found handler, AutoConnect will miss the opportunity to control the HTTP session and becomes unresponsive to the menu. Registering the Not-found handler is a different method than for ESP8266WebServer, use AutoConnect::onNotFound . This restriction applies to the WebServer for ESP32 as well. 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. The Sketch HOME path is closely related to the bootUri that specifies the access path on module restart. AutoConnect has the following three parameters concerning control the URIs: AUTOCONNECT_URI The ROOT URI of AutoConnect. It is defined in AutoConnectDefs.h file and is assigned to AutoConnect statistics screen by default. AutoConnectConfig::homeUri It is the hyperlink of listed on the AutoConnect menu as HOME . AutoConnectConfig::bootUri Which page appears at the captive portal, AUTOCONNECT_URI, or the homeUri. Its page will pop up automatically when you visit the captive portal. The definition of HOME Behavior Specified by Default value Possible value ROOT of AutoConnect Default for AC_ONBOOTURI_ROOT #define AUTOCONNECT_URI in AutoConnectDefs.h /_ac URI string HOME for Application-specific Listed on the menu list as HOME Also, It may be linked from the menu title and is redundant with the HOME menu item. eg. Case of bootURI = AC_ONBOOTURI_HOME AutoConnectConfig::homeURI / URI string Which page loads at the boot time, ROOT or HOME Appears after module reboot by RESET button with AutoConnect menu AutoConnectConfig::bootURI AC_ONBOOTURI_ROOT AC_ONBOOTURI_HOME Which page appears at the captive portal, ROOT or HOME Auto pop-up AutoConnectConfig::bootURI AC_ONBOOTURI_ROOT AC_ONBOOTURI_HOME 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_password\" ); 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. Combination with mDNS \u00b6 With mDNS library , you can access to ESP8266 by name instead of IP address after connection. The Sketch can start the MDNS responder after AutoConnect::begin . #include <ESP8266WiFi.h> #include <ESP8266mDNS.h> #include <ESP8266WebServer.h> AutoConnect Portal; void setup () { if (Portal.begin()) { if (MDNS.begin( \"esp8266\" )) { MDNS.addService( \"http\" , \"tcp\" , 80 ); } } } void loop () { Portal.handleClient(); } 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); aConfig.psk = YOUR_PASSWORD; portal.config(acConfig); portal.begin(); Obtaining chip ID for ESP32 acConfig.apid = \"ESP-\" + String((uint32_t)(ESP.getEfuseMac() >> 32), HEX); Relocate the AutoConnect home path \u00b6 A home path of AutoConnect is /_ac by default. You can access from the browser with http://IPADDRESS_OF_ESP_MODULE/_ac . You can change the home path by revising AUTOCONNECT_URI macro in AutoConnectDefs.h header file. #define AUTOCONNECT_URI \"/_ac\" SoftAP access point IP settings \u00b6 AutoConnect will activate SoftAP at failed the 1 st -WiFi.begin. Its 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. AutoConnectConfig member Settings for Defined symbol Initial value apip SoftAP IP address AUTOCONNECT_AP_IP 172.217.28.1 gateway Gateway IP address AUTOCONNECT_AP_GW 172.217.28.1 netmask Subnet mask for the SoftAP AUTOCONNECT_AP_NM 255.255.255.0 channel WiFi channel for the SoftAP AUTOCONNECT_AP_CH 1 hidden Hide the SoftAP false Static IP assignment as a client \u00b6 It is possible to assign a static IP Address to ESP8266/ESP32 in STA mode. 1 By default DHCP is enabled and it becomes the IP address assigned by the DHCP server with WiFi.begin . These settings are made via AutoConnectConfig as in the case of SoftAP settings. To assign a static IP to ESP8266/ESP32 with WIFI_STA, the following parameters are required: AutoConnectConfig member Settings for Initial value staip Station IP address 0.0.0.0 staGateway Gateway address for the station 0.0.0.0 staNetmask Subnet mask for the the station 0.0.0.0 dns1 Primary DNS server IP address 0.0.0.0 dns2 Secondary DNS server IP address 0.0.0.0 The above parameters must be set using AutoConnect::config prior to AutoConnect::begin call as following: 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 hostname \u00b6 AutoConnectConfig::hostName assigns a station DHCP hostname to the ESP module. The hostname must satisfy RFC952 compliant and meet the following restrictions: Up to 24 characters Only the alphabet (a-z, A-Z), digits (0-9), minus sign (-) No '-' as last character Static IP address assignment is available from version 0.9.3. \u21a9","title":"Settings and controls for network and WiFi"},{"location":"adnetwork.html#404-handler","text":"AutoConnect cannot allow the Sketch registers the \"Not-found\" handler (404-handler) to the ESP8266WebServer natively. AutoConnect traps Not-found handler of the ESP8266WebServer for its own page processing. If the Sketch overrides the Not-found handler, AutoConnect will miss the opportunity to control the HTTP session and becomes unresponsive to the menu. Registering the Not-found handler is a different method than for ESP8266WebServer, use AutoConnect::onNotFound . This restriction applies to the WebServer for ESP32 as well.","title":"404 handler"},{"location":"adnetwork.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. The Sketch HOME path is closely related to the bootUri that specifies the access path on module restart. AutoConnect has the following three parameters concerning control the URIs: AUTOCONNECT_URI The ROOT URI of AutoConnect. It is defined in AutoConnectDefs.h file and is assigned to AutoConnect statistics screen by default. AutoConnectConfig::homeUri It is the hyperlink of listed on the AutoConnect menu as HOME . AutoConnectConfig::bootUri Which page appears at the captive portal, AUTOCONNECT_URI, or the homeUri. Its page will pop up automatically when you visit the captive portal. The definition of HOME Behavior Specified by Default value Possible value ROOT of AutoConnect Default for AC_ONBOOTURI_ROOT #define AUTOCONNECT_URI in AutoConnectDefs.h /_ac URI string HOME for Application-specific Listed on the menu list as HOME Also, It may be linked from the menu title and is redundant with the HOME menu item. eg. Case of bootURI = AC_ONBOOTURI_HOME AutoConnectConfig::homeURI / URI string Which page loads at the boot time, ROOT or HOME Appears after module reboot by RESET button with AutoConnect menu AutoConnectConfig::bootURI AC_ONBOOTURI_ROOT AC_ONBOOTURI_HOME Which page appears at the captive portal, ROOT or HOME Auto pop-up AutoConnectConfig::bootURI AC_ONBOOTURI_ROOT AC_ONBOOTURI_HOME","title":"Assign user sketch's home path"},{"location":"adnetwork.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_password\" ); 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":"adnetwork.html#combination-with-mdns","text":"With mDNS library , you can access to ESP8266 by name instead of IP address after connection. The Sketch can start the MDNS responder after AutoConnect::begin . #include <ESP8266WiFi.h> #include <ESP8266mDNS.h> #include <ESP8266WebServer.h> AutoConnect Portal; void setup () { if (Portal.begin()) { if (MDNS.begin( \"esp8266\" )) { MDNS.addService( \"http\" , \"tcp\" , 80 ); } } } void loop () { Portal.handleClient(); }","title":"Combination with mDNS"},{"location":"adnetwork.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); aConfig.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":"adnetwork.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_OF_ESP_MODULE/_ac . You can change the home path by revising AUTOCONNECT_URI macro in AutoConnectDefs.h header file. #define AUTOCONNECT_URI \"/_ac\"","title":"Relocate the AutoConnect home path"},{"location":"adnetwork.html#softap-access-point-ip-settings","text":"AutoConnect will activate SoftAP at failed the 1 st -WiFi.begin. Its 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. AutoConnectConfig member Settings for Defined symbol Initial value apip SoftAP IP address AUTOCONNECT_AP_IP 172.217.28.1 gateway Gateway IP address AUTOCONNECT_AP_GW 172.217.28.1 netmask Subnet mask for the SoftAP AUTOCONNECT_AP_NM 255.255.255.0 channel WiFi channel for the SoftAP AUTOCONNECT_AP_CH 1 hidden Hide the SoftAP false","title":"SoftAP access point IP settings"},{"location":"adnetwork.html#static-ip-assignment-as-a-client","text":"It is possible to assign a static IP Address to ESP8266/ESP32 in STA mode. 1 By default DHCP is enabled and it becomes the IP address assigned by the DHCP server with WiFi.begin . These settings are made via AutoConnectConfig as in the case of SoftAP settings. To assign a static IP to ESP8266/ESP32 with WIFI_STA, the following parameters are required: AutoConnectConfig member Settings for Initial value staip Station IP address 0.0.0.0 staGateway Gateway address for the station 0.0.0.0 staNetmask Subnet mask for the the station 0.0.0.0 dns1 Primary DNS server IP address 0.0.0.0 dns2 Secondary DNS server IP address 0.0.0.0 The above parameters must be set using AutoConnect::config prior to AutoConnect::begin call as following: 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 as a client"},{"location":"adnetwork.html#station-hostname","text":"AutoConnectConfig::hostName assigns a station DHCP hostname to the ESP module. The hostname must satisfy RFC952 compliant and meet the following restrictions: Up to 24 characters Only the alphabet (a-z, A-Z), digits (0-9), minus sign (-) No '-' as last character Static IP address assignment is available from version 0.9.3. \u21a9","title":"Station hostname"},{"location":"adothers.html","text":"AutoConnect also has features that are not directly related to WiFi connection abilities. They're mostly like a little accessory but can reduce the amount of sketch code. Built-in OTA update Choice of the filesystem for ESP8266 Debug Print File uploading via built-in OTA feature Refers the hosted ESP8266WebServer/WebServer Reset the ESP module after disconnecting from WLAN Ticker for WiFi status Usage for automatically instantiated ESP8266WebServer/WebServer Use with the PageBuilder library Built-in OTA update feature \u00b6 AutoConnect features a built-in OTA function to update ESP module firmware. You can easily make the Sketch that equips OTA and able to operate with the AutoConnect menu. AutoConnectConfig::ota specifies to import the built-in OTA update class into the Sketch. See the Updates with the Web Browser chapter for details. Choice of the filesystem for ESP8266 \u00b6 For ESP8266, since the Arduino core v2.7.0, SPIFFS has deprecated and the migration to LittleFS is being promoted currently. AutoConnect has adopted LittleFS as the default filesystem to follow the core standard. However, SPIFFS is still valid. AutoConnect can correctly compile and execute sketches made with SPIFFS assumed. When you make an AutoConnect sketch with SPIFFS enabled, you need to change the macro definition that AutoConnectDefs.h has. AC_USE_SPIFFS definition will enable SPIFFS as the filesystem. #define AC_USE_SPIFFS See also the FAQ to help you enable AC_USE_SPIFFS correctly. Note that refers to the Using Filesystem chapter to know the utilization capabilities of the file system with AutoConnect. 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 AutoConnect does not automatically start the Serial even if AC_DEBUG is activated. The Sketch should start the Serial during its setup phase using Serial.begin(BAUDRATE) . How to enable AC_DEBUG The #define is a C++ preprocessor directive. The build process of the Sketch by the Arduino IDE is processed independently of the subsequent C++ compilation unit. Writing the #define directive for AC_DEBUG in the Sketch has no effect on the AutoConnect library. To compile the AutoConnect library with the AC_DEBUG directive, you can either edit the library source code directly (usually it is located in ~/Arduino/libraries/AutoConnect/src) or use a build system which can configure the preprocessor directives externally such as PlatformIO . To enable AC_DEBUG using PlatformIO without modifying the library source, specify the build_flags directive in the platformio.ini file with each project. build_flags = -DAC_DEBUG File uploading via built-in OTA feature \u00b6 The built-in OTA update feature can update the firmware as well as upload regular files placed in the file system on the ESP module. It allows a regular file is uploaded via OTA using the Update of AutoConnect menu without adding a particular custom Web page that contains AutoConnectFile. This ability is useful for transferring the JSON document of the custom web page definition, the external parameter file of your sketch, and so on into the target ESP module via OTA. The built-in OTA update feature determines where to save the uploaded file according to the filename pattern. By default, a filename with ends a .bin extension is subject to firmware updates. A file that has the other extension will be saved as a regular to the filesystem in the flash. The file extension that should be treated as the firmware is defined as the AUTOCONNECT_UPLOAD_ASFIRMWARE macro in AutoConnectDefs.h header file of the library source code. When dealing with another extension for the updating file as firmware change this macro definition. #define AUTOCONNECT_UPLOAD_ASFIRMWARE \".bin\" Specify with the PlatformIO AUTOCONNECT_UPLOAD_ASFIRMWARE pattern will be embedded into the binary sketch is determined at compile time. The PlatformIO build system allows you to change the pattern expression for each project without modifying the library source code. build_flags = -DAUTOCONNECT_UPLOAD_ASFIRMWARE='\".bin\"' 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 . Reset the ESP module after disconnecting from WLAN \u00b6 Disconnect by menu operation allows the ESP8266/ESP32 module to reset automatically after disconnecting from WLAN. This behavior is enabled by default and can be disabled by AutoConnectConfig::autoReset settings. AutoConnect Portal; AutoConnectConfig Config; Config.autoReset = false; // Continue sketch processing even after disconnecting from by AutoConnect menu. Portal.config(Config); Portal.begin(); The autoReset setting will automatically reset the ESP module when disconnecting WiFi only if you intentionally navigate the menu . And it does not participate in passive disconnection conditions such as disconnection due to sketch processing or loss of WiFi signal. You can combine autoReset with autoReconnect to disconnect from WiFi and automatically reconnect to another AP while continuing the Sketch operation. The Sketch below shows an example of a meaningful combination of autoReset and autoReconnect . It can connect to the access point once with the captive portal but assumes that it can be disconnected from the WLAN by intentional menu navigation. In that case, the Sketch will continue processing without resetting the module. Then an external switch allows to start automatic reconnecting. In this situation, if known access points appear nearby, the ESP module will automatically reconnect to them in the handleClient loop. In this state transition, the module continues the Sketch process without resetting. AutoConnect Portal; AutoConnectConfig Config; const int reconnectSwitch = 14 ; // Assign the reconnect switch to GPIO14 ICACHE_RAM_ATTR void detectsReconnect() { if ( ! Config.autoReconnect) { // Chattering elimination // autoReconnect is enabled by interrupt of the GPIO trigger, Config.autoReconnect = true; // Activate reconnection Config.reconnectInterval = 2 ; // Attempt to reconnect at 60 seconds intervals. Portal.config(Config); Serial.printf( \"Turn on autoReconnect, interval %d[s] \\n \" , Config.reconnectInterval * AUTOCONNECT_UNITTIME); } } void setup() { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); Config.ticker = true; // Setting up WiFi connection indicator Portal.config(Config); if (Portal.begin()) { Config.autoReset = false; Portal.config(Config); // Set external switch pin to reconnect as interrupt, assign interrupt function and set RISING mode pinMode(reconnectSwitch, INPUT_PULLUP); attachInterrupt(digitalPinToInterrupt(reconnectSwitch), detectsReconnect, RISING); } } void loop() { if (WiFi.status() == WL_CONNECTED) { /* Here, your sketch process with WiFi connection */ } else { /* Here, your sketch process without WiFi connection */ } // Post process, turn to initial state of autoReconnect. if (Config.autoReconnect) { if (WiFi.status() == WL_CONNECTED) { Config.autoReconnect = false; Portal.config(Config); } } // The actual reconnection takes place within handleClient. Portal.handleClient(); } An external switch wiring to GPIO The wiring for the above Sketch assumes a momentary effects switch that connects the GPIO pin 14 to GND. You can experience it with easily wire on a breadboard using a NodeMCU as like: Ticker for WiFi status \u00b6 Flicker signal can be output from the ESP8266/ESP32 module according to WiFi connection status. By wiring the LED to the signal output pin with the appropriate limiting resistor, you can know the WiFi connection status through the LED blink during the inside behavior of AutoConnect::begin and loop of AutoConnect::handleClient. AutoConnectConfig::ticker option specifies flicker signal output. The following sketch is an example of blinking the active-low LED connected to GPIO16 depending on the WiFi connection status. 2 AutoConnect portal; AutoConnectConfig Config; Config.ticker = true; config.tickerPort = 16 ; Config.tickerOn = LOW; 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 AP_STA 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) AUTOCONNECT_FLICKER_PERIODAP : Assigns a flicker period when the ESP module stays in AP_STA 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. Ticker during OTA The LED blinking will always be a short blinking during the update via OTA, regardless of the definition of the flicker cycle. 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 Usage for automatically instantiated ESP8266WebServer/WebServer \u00b6 The Sketch can handle URL requests using ESP8266WebServer or WebServer that AutoConnect started internally. ESP8266WebServer/WebServer instantiated dynamically by AutoConnect can be referred to by AutoConnect::host function. The Sketch can use the ' on ' function, ' send ' function, ' client ' function and others by ESP8266WebServer/WebServer reference of its return value. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect Portal; void handleRoot () { ESP8266WebServer & IntServer = Portal.host(); IntServer.send( 200 , \"text/html\" , \"Hello, world\" ); } void handleNotFound () { ESP8266WebServer & IntServer = Portal.host(); IntServer.send( 404 , \"text/html\" , \"Unknown.\" ); } void setup () { bool r = Portal.begin(); if (r) { ESP8266WebServer & IntServer = Portal.host(); IntServer.on( \"/\" , handleRoot); Portal.onNotFound(handleNotFound); // For only onNotFound. } } void loop () { Portal.host().handleClient(); Portal.handleRequest(); /* or following one line code is equ. Portal.handleClient(); */ } ESP8266WebServer/WebServer function should be called after AutoConnect::begin The Sketch cannot refer to an instance of ESP8266WebServer/WebServer until AutoConnect::begin completes successfully. Do not use with ESP8266WebServer::begin or WebServer::begin ESP8266WebServer/WebServer is already running inside the AutoConnect. Use with the PageBuilder library \u00b6 In ordinary, the URL handler will respond to the request from the client by sending some HTML. It will dynamically generate the HTML to respond to based on the sensing data etc. for the changing scene, but it contains elements of variable values in the middle of the HTML fixed string. Therefore, sketches tend to be in a tangled that repeats the logic for data handling and string splicing in turn, which tends to be less readable and maintainable. PageBuilder library is an HTML assembly aid. it can handle predefined HTML like the 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 . window.onload = function() { Gifffer(); }; The source code placement of common macros for AutoConnect since v0.9.7 has changed. \u21a9 The ESP module pin mapping is different for each breakout. Definitions for assigning pin numbers to pin names usually exist in the variant definition program of Arduino core packages. (e.g. esp8266/arduino core , arduino-esp32 core ) You may find the definition as pins_arduino.h . \u21a9 It's defined in the pins_arduino.h file, located in the sub-folder named variants wherein Arduino IDE installed folder. \u21a9","title":"Other operation settings and controls"},{"location":"adothers.html#built-in-ota-update-feature","text":"AutoConnect features a built-in OTA function to update ESP module firmware. You can easily make the Sketch that equips OTA and able to operate with the AutoConnect menu. AutoConnectConfig::ota specifies to import the built-in OTA update class into the Sketch. See the Updates with the Web Browser chapter for details.","title":"Built-in OTA update feature"},{"location":"adothers.html#choice-of-the-filesystem-for-esp8266","text":"For ESP8266, since the Arduino core v2.7.0, SPIFFS has deprecated and the migration to LittleFS is being promoted currently. AutoConnect has adopted LittleFS as the default filesystem to follow the core standard. However, SPIFFS is still valid. AutoConnect can correctly compile and execute sketches made with SPIFFS assumed. When you make an AutoConnect sketch with SPIFFS enabled, you need to change the macro definition that AutoConnectDefs.h has. AC_USE_SPIFFS definition will enable SPIFFS as the filesystem. #define AC_USE_SPIFFS See also the FAQ to help you enable AC_USE_SPIFFS correctly. Note that refers to the Using Filesystem chapter to know the utilization capabilities of the file system with AutoConnect.","title":"Choice of the filesystem for ESP8266"},{"location":"adothers.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 AutoConnect does not automatically start the Serial even if AC_DEBUG is activated. The Sketch should start the Serial during its setup phase using Serial.begin(BAUDRATE) . How to enable AC_DEBUG The #define is a C++ preprocessor directive. The build process of the Sketch by the Arduino IDE is processed independently of the subsequent C++ compilation unit. Writing the #define directive for AC_DEBUG in the Sketch has no effect on the AutoConnect library. To compile the AutoConnect library with the AC_DEBUG directive, you can either edit the library source code directly (usually it is located in ~/Arduino/libraries/AutoConnect/src) or use a build system which can configure the preprocessor directives externally such as PlatformIO . To enable AC_DEBUG using PlatformIO without modifying the library source, specify the build_flags directive in the platformio.ini file with each project. build_flags = -DAC_DEBUG","title":"Debug Print"},{"location":"adothers.html#file-uploading-via-built-in-ota-feature","text":"The built-in OTA update feature can update the firmware as well as upload regular files placed in the file system on the ESP module. It allows a regular file is uploaded via OTA using the Update of AutoConnect menu without adding a particular custom Web page that contains AutoConnectFile. This ability is useful for transferring the JSON document of the custom web page definition, the external parameter file of your sketch, and so on into the target ESP module via OTA. The built-in OTA update feature determines where to save the uploaded file according to the filename pattern. By default, a filename with ends a .bin extension is subject to firmware updates. A file that has the other extension will be saved as a regular to the filesystem in the flash. The file extension that should be treated as the firmware is defined as the AUTOCONNECT_UPLOAD_ASFIRMWARE macro in AutoConnectDefs.h header file of the library source code. When dealing with another extension for the updating file as firmware change this macro definition. #define AUTOCONNECT_UPLOAD_ASFIRMWARE \".bin\" Specify with the PlatformIO AUTOCONNECT_UPLOAD_ASFIRMWARE pattern will be embedded into the binary sketch is determined at compile time. The PlatformIO build system allows you to change the pattern expression for each project without modifying the library source code. build_flags = -DAUTOCONNECT_UPLOAD_ASFIRMWARE='\".bin\"'","title":"File uploading via built-in OTA feature"},{"location":"adothers.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":"adothers.html#reset-the-esp-module-after-disconnecting-from-wlan","text":"Disconnect by menu operation allows the ESP8266/ESP32 module to reset automatically after disconnecting from WLAN. This behavior is enabled by default and can be disabled by AutoConnectConfig::autoReset settings. AutoConnect Portal; AutoConnectConfig Config; Config.autoReset = false; // Continue sketch processing even after disconnecting from by AutoConnect menu. Portal.config(Config); Portal.begin(); The autoReset setting will automatically reset the ESP module when disconnecting WiFi only if you intentionally navigate the menu . And it does not participate in passive disconnection conditions such as disconnection due to sketch processing or loss of WiFi signal. You can combine autoReset with autoReconnect to disconnect from WiFi and automatically reconnect to another AP while continuing the Sketch operation. The Sketch below shows an example of a meaningful combination of autoReset and autoReconnect . It can connect to the access point once with the captive portal but assumes that it can be disconnected from the WLAN by intentional menu navigation. In that case, the Sketch will continue processing without resetting the module. Then an external switch allows to start automatic reconnecting. In this situation, if known access points appear nearby, the ESP module will automatically reconnect to them in the handleClient loop. In this state transition, the module continues the Sketch process without resetting. AutoConnect Portal; AutoConnectConfig Config; const int reconnectSwitch = 14 ; // Assign the reconnect switch to GPIO14 ICACHE_RAM_ATTR void detectsReconnect() { if ( ! Config.autoReconnect) { // Chattering elimination // autoReconnect is enabled by interrupt of the GPIO trigger, Config.autoReconnect = true; // Activate reconnection Config.reconnectInterval = 2 ; // Attempt to reconnect at 60 seconds intervals. Portal.config(Config); Serial.printf( \"Turn on autoReconnect, interval %d[s] \\n \" , Config.reconnectInterval * AUTOCONNECT_UNITTIME); } } void setup() { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); Config.ticker = true; // Setting up WiFi connection indicator Portal.config(Config); if (Portal.begin()) { Config.autoReset = false; Portal.config(Config); // Set external switch pin to reconnect as interrupt, assign interrupt function and set RISING mode pinMode(reconnectSwitch, INPUT_PULLUP); attachInterrupt(digitalPinToInterrupt(reconnectSwitch), detectsReconnect, RISING); } } void loop() { if (WiFi.status() == WL_CONNECTED) { /* Here, your sketch process with WiFi connection */ } else { /* Here, your sketch process without WiFi connection */ } // Post process, turn to initial state of autoReconnect. if (Config.autoReconnect) { if (WiFi.status() == WL_CONNECTED) { Config.autoReconnect = false; Portal.config(Config); } } // The actual reconnection takes place within handleClient. Portal.handleClient(); } An external switch wiring to GPIO The wiring for the above Sketch assumes a momentary effects switch that connects the GPIO pin 14 to GND. You can experience it with easily wire on a breadboard using a NodeMCU as like:","title":"Reset the ESP module after disconnecting from WLAN"},{"location":"adothers.html#ticker-for-wifi-status","text":"Flicker signal can be output from the ESP8266/ESP32 module according to WiFi connection status. By wiring the LED to the signal output pin with the appropriate limiting resistor, you can know the WiFi connection status through the LED blink during the inside behavior of AutoConnect::begin and loop of AutoConnect::handleClient. AutoConnectConfig::ticker option specifies flicker signal output. The following sketch is an example of blinking the active-low LED connected to GPIO16 depending on the WiFi connection status. 2 AutoConnect portal; AutoConnectConfig Config; Config.ticker = true; config.tickerPort = 16 ; Config.tickerOn = LOW; 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 AP_STA 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) AUTOCONNECT_FLICKER_PERIODAP : Assigns a flicker period when the ESP module stays in AP_STA 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. Ticker during OTA The LED blinking will always be a short blinking during the update via OTA, regardless of the definition of the flicker cycle. 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","title":"Ticker for WiFi status"},{"location":"adothers.html#usage-for-automatically-instantiated-esp8266webserverwebserver","text":"The Sketch can handle URL requests using ESP8266WebServer or WebServer that AutoConnect started internally. ESP8266WebServer/WebServer instantiated dynamically by AutoConnect can be referred to by AutoConnect::host function. The Sketch can use the ' on ' function, ' send ' function, ' client ' function and others by ESP8266WebServer/WebServer reference of its return value. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect Portal; void handleRoot () { ESP8266WebServer & IntServer = Portal.host(); IntServer.send( 200 , \"text/html\" , \"Hello, world\" ); } void handleNotFound () { ESP8266WebServer & IntServer = Portal.host(); IntServer.send( 404 , \"text/html\" , \"Unknown.\" ); } void setup () { bool r = Portal.begin(); if (r) { ESP8266WebServer & IntServer = Portal.host(); IntServer.on( \"/\" , handleRoot); Portal.onNotFound(handleNotFound); // For only onNotFound. } } void loop () { Portal.host().handleClient(); Portal.handleRequest(); /* or following one line code is equ. Portal.handleClient(); */ } ESP8266WebServer/WebServer function should be called after AutoConnect::begin The Sketch cannot refer to an instance of ESP8266WebServer/WebServer until AutoConnect::begin completes successfully. Do not use with ESP8266WebServer::begin or WebServer::begin ESP8266WebServer/WebServer is already running inside the AutoConnect.","title":"Usage for automatically instantiated ESP8266WebServer/WebServer"},{"location":"adothers.html#use-with-the-pagebuilder-library","text":"In ordinary, the URL handler will respond to the request from the client by sending some HTML. It will dynamically generate the HTML to respond to based on the sensing data etc. for the changing scene, but it contains elements of variable values in the middle of the HTML fixed string. Therefore, sketches tend to be in a tangled that repeats the logic for data handling and string splicing in turn, which tends to be less readable and maintainable. PageBuilder library is an HTML assembly aid. it can handle predefined HTML like the 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 . window.onload = function() { Gifffer(); }; The source code placement of common macros for AutoConnect since v0.9.7 has changed. \u21a9 The ESP module pin mapping is different for each breakout. Definitions for assigning pin numbers to pin names usually exist in the variant definition program of Arduino core packages. (e.g. esp8266/arduino core , arduino-esp32 core ) You may find the definition as pins_arduino.h . \u21a9 It's defined in the pins_arduino.h file, located in the sub-folder named variants wherein Arduino IDE installed folder. \u21a9","title":"Use with the PageBuilder library"},{"location":"advancedusage.html","text":"Summary \u00b6 To make sketches work as you intended with AutoConnect, make sure you understand the implications of the setting parameters and configure AutoConnect. AutoConnectConfig allows you to incorporate settings into AutoConnect that coordinate control over WiFi connectivity and captive portal behavior. For advanced usages, the configuration settings and the Sketch examples are followings: AutoConnect WiFi connection control Captive portal control Authentication settings Credential accesses Settings for customizing the page exterior Settings and controls for network and WiFi Other operation settings and controls Don't forget AutoConnect::config The configuration cannot be reflected by only changing the member variables of AutoConnectConfig settings. It will be reflected in the actual ones by AutoConnect::config function. Don't forget to run the AutoConnect::config after changing the AutoConnectConfig member variables.","title":"Advanced usage"},{"location":"advancedusage.html#summary","text":"To make sketches work as you intended with AutoConnect, make sure you understand the implications of the setting parameters and configure AutoConnect. AutoConnectConfig allows you to incorporate settings into AutoConnect that coordinate control over WiFi connectivity and captive portal behavior. For advanced usages, the configuration settings and the Sketch examples are followings: AutoConnect WiFi connection control Captive portal control Authentication settings Credential accesses Settings for customizing the page exterior Settings and controls for network and WiFi Other operation settings and controls Don't forget AutoConnect::config The configuration cannot be reflected by only changing the member variables of AutoConnectConfig settings. It will be reflected in the actual ones by AutoConnect::config function. Don't forget to run the AutoConnect::config after changing the AutoConnectConfig member variables.","title":"Summary"},{"location":"api.html","text":"Include headers \u00b6 AutoConnect.h \u00b6 #include <AutoConnect.h> Defined macros \u00b6 They contain in AutoConnectDefs.h . #define AC_USE_SPIFFS // Use SPIFFS for the file system on the onboard flash, assumes LittleFS if not defined. #define AC_DEBUG // Monitor message output activation #define AC_DEBUG_PORT Serial // Default message output device #define AUTOCONNECT_AP_IP 0x011CD9AC // Default SoftAP IP #define AUTOCONNECT_AP_GW 0x011CD9AC // 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_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_STARTUPTIME 30 // Default waiting time[s] for after reset #define AUTOCONNECT_USE_JSON // Allow AutoConnect elements to be handled by JSON format #define AUTOCONNECT_USE_UPDATE // Indicator of whether to use the AutoConnectUpdate feature. #define AUTOCONNECT_UPDATE_PORT 8000 // Available HTTP port number for the update #define AUTOCONNECT_UPDATE_TIMEOUT 8000 // HTTP client timeout limitation for the update [ms] #define AUTOCONNECT_TICKER_PORT LED_BUILTIN // Ticker port #endif 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. AutoConnect will call the user added handler to respond to the HTTP request using the ESP8266WebServer::on (WebServer::on for ESP32) funtion. This call will be made from during the handleClient of AutoConnect function. Therefore, in the use case of assigning AutoConnect in this constructor, it is necessary to know the instance of ESP8266WebServer in order to register the request handler. Sketch can use host functions to obtain a reference to an ESP8266WebServer instance that is internally hosted by AutoConnect. 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. Parameter webServer A reference of ESP8266WebServer or WebServer instance. Public member functions \u00b6 append \u00b6 ESP8266/ESP32 Common AutoConnectAux * append( const String & uri, const String & title) For ESP8266 AutoConnectAux * append( const String & uri, const String & title, ESP8266WebServer :: THandlerFunction handler) For ESP32 AutoConnectAux * append( const String & uri, const String & title, WebServer :: THandlerFunction handler) Creates an AutoConnectAux dynamically with the specified URI and integrates it into the menu. Calls with a request handler parameter can use this function as menu registration for a legacy page of ESP8266WebServer/WebServer. If the handler parameter specified, also it will register the request handler for the ESP8266WebServer/WebServer. AutoConnect manages the menu items using a sequence list, and this function always adds the item to the end of the list. Therefore, the order of the menu items is the additional order. Returns the pointer to created AutoConnectAux instance, the nullptr if an AutoConnectAux with the same URI already exists. Parameter uri A string of the URI. title Title for menu item. handler Request handler function as type of ESP8266WebServer::THandlerFunction / WebServer::THandlerFunction . Return value A Pointer to a created AutoConnectAux instance. An instance of ESP8266WebServer/WebServer is needed The WebServer must have instantiated for calling with a request handler parameter. AutoConnect can instantiate and host a WebServer internally, but in that case, the point in time to call the append function with a request handler parameter must be after AutoConnect::begin. 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 AutoConnect configuration settings. 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. detach \u00b6 bool detach( const String & uri) Detach the AutoConnectAux with the specified URI from the management of AutoConnect. An unmanaged AutoConnectAux will no longer appear in menu items, and its page handler will no longer respond even if the URI is accessed directly. Parameter uri URI of AutoConnectAux to be detached. Return value true Successfully detached. false An AutoConnectAux with the specified URI does not exist. If the request handler registered in the detaching AutoConnectAux is for a legacy page of the ESP8266WebServer/WebServer, the URI is still valid after detaching. AutoConnect does not delete the request handler registered to ESP8266WebServer/WebServer with the on function. (It cannot be removed) Deleting the AutoConnectAux If the AutoConnectAux to detach was added by AutoConnect::append , it will be automatically removed and freed from memory. disableMenu \u00b6 void disableMenu( const uint16_t items) Disable the AutoConnect menu items specified by the items parameter with logical OR value using AC_MENUITEM_t constant. This function only works for AutoConnect primary menu items. It has no effect on disable for AutoConnectAux items. To disable the items by AutoConnectAux, use the AutoConnectAux::menu function. Parameter items Specify the combined value of AC_MENUITEM_t of the items deleting from the AutoConnect menu. It provides the value calculated from the logical OR by the AC_MENUITEM_t value of each item. Refer to the enableMenu about AC_MENUITEM_t. enableMenu \u00b6 void enableMenu( const uint16_t items) Enable the AutoConnect menu items specified by the items parameter with logical OR value using AC_MENUITEM_t constant. This function only works for AutoConnect primary menu items. It has no effect on enable for AutoConnectAux items. To enable the items by AutoConnectAux, use the AutoConnectAux::menu function. Parameter items Specify the combined value of AC_MENUITEM_t of the items applying to the AutoConnect menu. It provides the value calculated from the logical OR by the AC_MENUITEM_t value of each item applied as a menu. AC_MENUITEM_t is enumeration type to identify each menu item and it has the below values. AC_MENUITEM_CONFIGNEW : Configure new AP AC_MENUITEM_OPENSSIDS : Open SSIDs AC_MENUITEM_DISCONNECT : Disconnect AC_MENUITEM_RESET : Reset... AC_MENUITEM_HOME : HOME AC_MENUITEM_DEVINFO : Device statistics as AutoConnect root page It is added, not replaced. The initial configuration of the AutoConnect menu items: AC_MENUITEM_CONFIGNEW | AC_MENUITEM_OPENSSIDS | AC_MENUITEM_DISCONNECT | AC_MENUITEM_RESET | AC_MENUITEM_HOME The enableMenu function adds an indication of the specified items to the current. Therefore, use the disableMenu to remove the specified item from the initial menu. 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. getEEPROMUsedSize \u00b6 uint16_t getEEPROMUsedSize( void ) Returns the total amount of memory required to hold the AutoConnect credentials and any custom configuration settings stored in EEPROM. The Sketch that writes its own custom data to the EEPROM must call EEPROM.begin with this value. Return value Total amount size of saved AutoConnect credentials and custom data. The getEEPROMUsedSize is available for only ESP8266 use It is available for only ESP8266 use and will return 0 when used with ESP32. handleClient \u00b6 void handleClient( void ) Process the AutoConnect menu interface. The ESP8266WebServer::handleClient 1 function hosted by AutoConnect is also called from within AutoConnect to handle the request handlers contained in Sketch. Enhanced AutoConnect::handleClient The handleClient function enhanced since AutoConnect 1.2.0 can start the captive portal according to the WiFi connection status. By properly specifying AutoConnectConfig:: retainPortal and AutoConnectConfig:: autoRise , when handleClient detects WiFi disconnection, it shifts WiFi mode to WIFI_AP_STA and starts the DNS server together with SoftAP dynamically. Then trapping for incoming HTTP requests from client devices will be started by AutoConnect. Thus it will open the captive portal behind the execution of the sketch loop() function. The captive portal launched by enhanced handleClient does not interfere with sketch execution except waiting for the result of WiFi.begin. Also, AutoConnectConfig:: autoReconnect has improved. The Sketch can specify the AutoConnectConfig:: reconnectInterval to continue retrying the reconnection with enhanced handleClient. 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 following 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. onConnect \u00b6 void onConnect(ConnectExit_ft fn) Register the function which will call from AutoConnect at the WiFi connection established. Parameter fn A function called at the WiFi connected. An fn specifies the function called when the WiFi connected. Its prototype declaration is defined as ConnectExit_ft . typedef std :: function < void (IPaddress & localIP) > ConnectExit_ft Parameter localIP An IP address of the ESP module as STA. onDetect \u00b6 void onDetect(DetectExit_ft fn) Register the function which will call from AutoConnect at the start of the captive portal. Parameter fn A 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. onOTAEnd \u00b6 void onOTAEnd(OTAEndExit_ft fn) Register the on-end exit routine that is called only once when the OTA is finished. Parameter fn A function called when the OTA has been finished. An fn specifies the function called when the OTA has been finished. Its prototype declaration is defined as OTAEndExit_ft . typedef std :: function < void ( void ) > OTAEndExit_ft onOTAError \u00b6 void onOTAError(OTAErrorExit_ft fn) Register the exit routine that is called when some error occurred. Parameter fn A function called when some OTA error occurs. An fn specifies the function called when the some error occurred. Its prototype declaration is defined as OTAErrorExit_ft . typedef std :: function < void ( uint8_t error) > OTAErrorExit_ft Parameter error Error code of OTA. It is defined in the Updater class or the Update class of the Arduino core for each platform. onOTAProgress \u00b6 void onOTAProgress(OTAProgressExit_ft fn) Register the exit routine that is called during the OTA progress. Parameter fn A function called during the OTA progress. An fn specifies the function called during the OTA progress. Its prototype declaration is defined as OTAProgressExit_ft . typedef std :: function < void ( unsigned int amount, unsigned int size) > OTAProgressExit_ft Parameters amount Total amount of bytes received. size Block size of current send. onOTAStart \u00b6 void onOTAStart(OTAStartExit_ft fn) Register the on-start exit routine that is called only once when the OTA has been started. Parameter fn A function called at the OTA start. An fn specifies the function called when the OTA starts. Its prototype declaration is defined as OTAStartExit_ft . typedef std :: function < void ( void ) > OTAStartExit_ft 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 . whileCaptivePortal \u00b6 void whileCaptivePortal(WhileCaptivePortalExit_ft fn) Register the function which will call from AutoConnect during a stay in the captive portal. Parameter fn Function called at the captive portal start. An fn specifies the function called while staying in the captive portal. Its prototype declaration is defined as WhileCaptivePortalExit_ft . typedef std :: function < bool ( void ) > WhileCaptivePortalExit_ft Return value true Continues captive portal handling. false Cancel the captive portal. AutoConnect::begin function will return with a false. Equivalent to the WebServer::handleClient function on the ESP32 platform. \u21a9","title":"AutoConnect API"},{"location":"api.html#include-headers","text":"","title":" Include headers"},{"location":"api.html#autoconnecth","text":"#include <AutoConnect.h>","title":"AutoConnect.h"},{"location":"api.html#defined-macros","text":"They contain in AutoConnectDefs.h . #define AC_USE_SPIFFS // Use SPIFFS for the file system on the onboard flash, assumes LittleFS if not defined. #define AC_DEBUG // Monitor message output activation #define AC_DEBUG_PORT Serial // Default message output device #define AUTOCONNECT_AP_IP 0x011CD9AC // Default SoftAP IP #define AUTOCONNECT_AP_GW 0x011CD9AC // 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_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_STARTUPTIME 30 // Default waiting time[s] for after reset #define AUTOCONNECT_USE_JSON // Allow AutoConnect elements to be handled by JSON format #define AUTOCONNECT_USE_UPDATE // Indicator of whether to use the AutoConnectUpdate feature. #define AUTOCONNECT_UPDATE_PORT 8000 // Available HTTP port number for the update #define AUTOCONNECT_UPDATE_TIMEOUT 8000 // HTTP client timeout limitation for the update [ms] #define AUTOCONNECT_TICKER_PORT LED_BUILTIN // Ticker port #endif 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. AutoConnect will call the user added handler to respond to the HTTP request using the ESP8266WebServer::on (WebServer::on for ESP32) funtion. This call will be made from during the handleClient of AutoConnect function. Therefore, in the use case of assigning AutoConnect in this constructor, it is necessary to know the instance of ESP8266WebServer in order to register the request handler. Sketch can use host functions to obtain a reference to an ESP8266WebServer instance that is internally hosted by AutoConnect. 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. 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#append","text":"ESP8266/ESP32 Common AutoConnectAux * append( const String & uri, const String & title) For ESP8266 AutoConnectAux * append( const String & uri, const String & title, ESP8266WebServer :: THandlerFunction handler) For ESP32 AutoConnectAux * append( const String & uri, const String & title, WebServer :: THandlerFunction handler) Creates an AutoConnectAux dynamically with the specified URI and integrates it into the menu. Calls with a request handler parameter can use this function as menu registration for a legacy page of ESP8266WebServer/WebServer. If the handler parameter specified, also it will register the request handler for the ESP8266WebServer/WebServer. AutoConnect manages the menu items using a sequence list, and this function always adds the item to the end of the list. Therefore, the order of the menu items is the additional order. Returns the pointer to created AutoConnectAux instance, the nullptr if an AutoConnectAux with the same URI already exists. Parameter uri A string of the URI. title Title for menu item. handler Request handler function as type of ESP8266WebServer::THandlerFunction / WebServer::THandlerFunction . Return value A Pointer to a created AutoConnectAux instance. An instance of ESP8266WebServer/WebServer is needed The WebServer must have instantiated for calling with a request handler parameter. AutoConnect can instantiate and host a WebServer internally, but in that case, the point in time to call the append function with a request handler parameter must be after AutoConnect::begin.","title":" append"},{"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 AutoConnect configuration settings. 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#detach","text":"bool detach( const String & uri) Detach the AutoConnectAux with the specified URI from the management of AutoConnect. An unmanaged AutoConnectAux will no longer appear in menu items, and its page handler will no longer respond even if the URI is accessed directly. Parameter uri URI of AutoConnectAux to be detached. Return value true Successfully detached. false An AutoConnectAux with the specified URI does not exist. If the request handler registered in the detaching AutoConnectAux is for a legacy page of the ESP8266WebServer/WebServer, the URI is still valid after detaching. AutoConnect does not delete the request handler registered to ESP8266WebServer/WebServer with the on function. (It cannot be removed) Deleting the AutoConnectAux If the AutoConnectAux to detach was added by AutoConnect::append , it will be automatically removed and freed from memory.","title":" detach"},{"location":"api.html#disablemenu","text":"void disableMenu( const uint16_t items) Disable the AutoConnect menu items specified by the items parameter with logical OR value using AC_MENUITEM_t constant. This function only works for AutoConnect primary menu items. It has no effect on disable for AutoConnectAux items. To disable the items by AutoConnectAux, use the AutoConnectAux::menu function. Parameter items Specify the combined value of AC_MENUITEM_t of the items deleting from the AutoConnect menu. It provides the value calculated from the logical OR by the AC_MENUITEM_t value of each item. Refer to the enableMenu about AC_MENUITEM_t.","title":" disableMenu"},{"location":"api.html#enablemenu","text":"void enableMenu( const uint16_t items) Enable the AutoConnect menu items specified by the items parameter with logical OR value using AC_MENUITEM_t constant. This function only works for AutoConnect primary menu items. It has no effect on enable for AutoConnectAux items. To enable the items by AutoConnectAux, use the AutoConnectAux::menu function. Parameter items Specify the combined value of AC_MENUITEM_t of the items applying to the AutoConnect menu. It provides the value calculated from the logical OR by the AC_MENUITEM_t value of each item applied as a menu. AC_MENUITEM_t is enumeration type to identify each menu item and it has the below values. AC_MENUITEM_CONFIGNEW : Configure new AP AC_MENUITEM_OPENSSIDS : Open SSIDs AC_MENUITEM_DISCONNECT : Disconnect AC_MENUITEM_RESET : Reset... AC_MENUITEM_HOME : HOME AC_MENUITEM_DEVINFO : Device statistics as AutoConnect root page It is added, not replaced. The initial configuration of the AutoConnect menu items: AC_MENUITEM_CONFIGNEW | AC_MENUITEM_OPENSSIDS | AC_MENUITEM_DISCONNECT | AC_MENUITEM_RESET | AC_MENUITEM_HOME The enableMenu function adds an indication of the specified items to the current. Therefore, use the disableMenu to remove the specified item from the initial menu.","title":" enableMenu"},{"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#geteepromusedsize","text":"uint16_t getEEPROMUsedSize( void ) Returns the total amount of memory required to hold the AutoConnect credentials and any custom configuration settings stored in EEPROM. The Sketch that writes its own custom data to the EEPROM must call EEPROM.begin with this value. Return value Total amount size of saved AutoConnect credentials and custom data. The getEEPROMUsedSize is available for only ESP8266 use It is available for only ESP8266 use and will return 0 when used with ESP32.","title":" getEEPROMUsedSize"},{"location":"api.html#handleclient","text":"void handleClient( void ) Process the AutoConnect menu interface. The ESP8266WebServer::handleClient 1 function hosted by AutoConnect is also called from within AutoConnect to handle the request handlers contained in Sketch. Enhanced AutoConnect::handleClient The handleClient function enhanced since AutoConnect 1.2.0 can start the captive portal according to the WiFi connection status. By properly specifying AutoConnectConfig:: retainPortal and AutoConnectConfig:: autoRise , when handleClient detects WiFi disconnection, it shifts WiFi mode to WIFI_AP_STA and starts the DNS server together with SoftAP dynamically. Then trapping for incoming HTTP requests from client devices will be started by AutoConnect. Thus it will open the captive portal behind the execution of the sketch loop() function. The captive portal launched by enhanced handleClient does not interfere with sketch execution except waiting for the result of WiFi.begin. Also, AutoConnectConfig:: autoReconnect has improved. The Sketch can specify the AutoConnectConfig:: reconnectInterval to continue retrying the reconnection with enhanced handleClient.","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 following 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#onconnect","text":"void onConnect(ConnectExit_ft fn) Register the function which will call from AutoConnect at the WiFi connection established. Parameter fn A function called at the WiFi connected. An fn specifies the function called when the WiFi connected. Its prototype declaration is defined as ConnectExit_ft . typedef std :: function < void (IPaddress & localIP) > ConnectExit_ft Parameter localIP An IP address of the ESP module as STA.","title":" onConnect"},{"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 A 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#onotaend","text":"void onOTAEnd(OTAEndExit_ft fn) Register the on-end exit routine that is called only once when the OTA is finished. Parameter fn A function called when the OTA has been finished. An fn specifies the function called when the OTA has been finished. Its prototype declaration is defined as OTAEndExit_ft . typedef std :: function < void ( void ) > OTAEndExit_ft","title":" onOTAEnd"},{"location":"api.html#onotaerror","text":"void onOTAError(OTAErrorExit_ft fn) Register the exit routine that is called when some error occurred. Parameter fn A function called when some OTA error occurs. An fn specifies the function called when the some error occurred. Its prototype declaration is defined as OTAErrorExit_ft . typedef std :: function < void ( uint8_t error) > OTAErrorExit_ft Parameter error Error code of OTA. It is defined in the Updater class or the Update class of the Arduino core for each platform.","title":" onOTAError"},{"location":"api.html#onotaprogress","text":"void onOTAProgress(OTAProgressExit_ft fn) Register the exit routine that is called during the OTA progress. Parameter fn A function called during the OTA progress. An fn specifies the function called during the OTA progress. Its prototype declaration is defined as OTAProgressExit_ft . typedef std :: function < void ( unsigned int amount, unsigned int size) > OTAProgressExit_ft Parameters amount Total amount of bytes received. size Block size of current send.","title":" onOTAProgress"},{"location":"api.html#onotastart","text":"void onOTAStart(OTAStartExit_ft fn) Register the on-start exit routine that is called only once when the OTA has been started. Parameter fn A function called at the OTA start. An fn specifies the function called when the OTA starts. Its prototype declaration is defined as OTAStartExit_ft . typedef std :: function < void ( void ) > OTAStartExit_ft","title":" onOTAStart"},{"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":"api.html#whilecaptiveportal","text":"void whileCaptivePortal(WhileCaptivePortalExit_ft fn) Register the function which will call from AutoConnect during a stay in the captive portal. Parameter fn Function called at the captive portal start. An fn specifies the function called while staying in the captive portal. Its prototype declaration is defined as WhileCaptivePortalExit_ft . typedef std :: function < bool ( void ) > WhileCaptivePortalExit_ft Return value true Continues captive portal handling. false Cancel the captive portal. AutoConnect::begin function will return with a false. Equivalent to the WebServer::handleClient function on the ESP32 platform. \u21a9","title":" whileCaptivePortal"},{"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(), const responsive = true) 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. responsive Specifies whether to make HTTP response or not. Public member functions \u00b6 operator [ ] \u00b6 AutoConnectElement & operator []( const char * name) AutoConnectElement & operator []( const __FlashStringHelper * name) 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<std::reference_wrapper<AutoConnectElement>> . authentication \u00b6 void authentication( const AC_AUTH_t auth) Set to require authentication with access to a page. When you access a page that requires authentication, HTTP authentication will be performed according to the scheme specified with the auth parameter. Parameters auth Specifies authentication scheme with the following enumeration value. AC_AUTH_BASIC : Basic scheme. AC_AUTH_DIGEST : Digest scheme. content \u00b6 size_t content( void ) Returns the number of AutoConnectElements the AutoConnectAux contains. Return value A number of the registered AutoConnectElements. 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 char * name) AutoConnectElement * getElement( const __FlashStringHelper * 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 Specifies 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. redirect \u00b6 void redirect( const char * url) Generate a Location header field with the specified url and responds with a 302 response code to the client. This function is intended to be used from within the Custom Web Page handler. If the AutoConnectAux is going to redirect to another page without responding with page content, declare the responsive argument false in the AutoConnectAux constructor . With this construction, AutoConnectAux will not respond to HTTP responses. The redirect function can be useful in this situation to respond to a 302 redirect. Parameter url Specifies the URL to redirect a page to. 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(), const responsive = true) 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. responsive Specifies whether to make HTTP response or not.","title":"AutoConnectAux"},{"location":"apiaux.html#public-member-functions","text":"","title":" Public member functions"},{"location":"apiaux.html#operator","text":"AutoConnectElement & operator []( const char * name) AutoConnectElement & operator []( const __FlashStringHelper * name) 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<std::reference_wrapper<AutoConnectElement>> .","title":" add"},{"location":"apiaux.html#authentication","text":"void authentication( const AC_AUTH_t auth) Set to require authentication with access to a page. When you access a page that requires authentication, HTTP authentication will be performed according to the scheme specified with the auth parameter. Parameters auth Specifies authentication scheme with the following enumeration value. AC_AUTH_BASIC : Basic scheme. AC_AUTH_DIGEST : Digest scheme.","title":" authentication"},{"location":"apiaux.html#content","text":"size_t content( void ) Returns the number of AutoConnectElements the AutoConnectAux contains. Return value A number of the registered AutoConnectElements.","title":" content"},{"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 char * name) AutoConnectElement * getElement( const __FlashStringHelper * 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 Specifies 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#redirect","text":"void redirect( const char * url) Generate a Location header field with the specified url and responds with a 302 response code to the client. This function is intended to be used from within the Custom Web Page handler. If the AutoConnectAux is going to redirect to another page without responding with page content, declare the responsive argument false in the AutoConnectAux constructor . With this construction, AutoConnectAux will not respond to HTTP responses. The redirect function can be useful in this situation to respond to a 302 redirect. Parameter url Specifies the URL to redirect a page to.","title":" redirect"},{"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 SoftAP. 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 auth \u00b6 Apply HTTP authentication with the AutoConnect web page. This This setting allows the Sketch to authenticate with \"BASIC\" or \"DIGEST\" scheme. It is given as an enumeration value of AC_AUTH_t that indicates the authentication scheme. This setting determines the default scheme for HTTP authentication with AutoConnect. When the AutoConnectConfig::authScope is AC_AUTHSCOPE_PARTIAL , each AutoConnectAux authentication scheme has priority. Type AC_AUTH_t Value AC_AUTH_NONE No authentication. This is the default. AC_AUTH_DIGEST Use the digest scheme . AC_AUTH_BASIC Use the basic scheme . authScope \u00b6 Specifies the authentication scope of AutoConnect Web pages. The Sketch will be able to expand or narrow the range of authentication by this setting, which can be either as AC_AUTHSCOPE_t enumeration value. Type AC_AUTHSCOPE_t Value AC_AUTHSCOPE_AUX Require authentication to access for all custom Web pages, excepting AutoConnect's pages. This is the Default. AC_AUTHSCOPE_PARTIAL Authenticate only specific custom Web pages which are specified by AutoConnectAux::authentication function or JSON description. AC_AUTHSCOPE_PORTAL Require authentication to access for all AutoConnect's pages, including custom Web pages. This setting is available only when AutoConnectConfig::auth is other than AC_AUTH_NONE . Ignored if it is AC_AUTH_NONE. Also, the authScope setting has another bit that indicates to allow authentication in the captive portal state. Its enum value cannot be used alone and is always for qualifying the above three enum values. Value AC_AUTHSCOPE_WITHCP Allow authentication with the captive portal state. This value cannot be used alone to declare an authentication scope. It indicates to enable authentication in the captive portal by the logical OR operator with one of the AC_AUTHSCOPE_t values above. 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 credentials matches the BSSID (or SSID) detected by the network scan. Either BSSID or SSID to aim the access point Whether or not it points to the target access point is determined by matching the SSID or BSSID . The default key to collate is BSSID . The BSSID is usually fixed to the MAC address unique to its access point device, but when using some mobile hotspots, the BSSID may change even for the same access point. If you operate inconvenience in aiming at the access point by BSSID, you can change the collation key to SSID by uncomment the below line in AutoConnectDefs.h : #define AUTOCONNECT_APKEY_SSID If AUTOCONNECT_APKEY_SSID macro is defined when the library is compiled, the access points are collated by the SSID. 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 1 st -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_ALWAYS Save specified SSID and Password always even if a specified credential has been rejected. AC_SAVECREDENTIAL_NEVER The credential no saved. beginTimeout \u00b6 Specify the limit time to attempt WiFi connection to the access point. AutoConnect uses this value to abort the connection attempt at WiFi.begin . Its actual value specified in milliseconds unit. The default value is AUTOCONNECT_TIMEOUT defined in AutoConnectDefs.h and the initial value is 30 seconds. Type unsigned long 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 1 st -WiFi.begin and start the captive portal. If this option is enabled, the module will be in AP_STA mode and the captive portal. The evaluation rank of this parameter is lower than the AutoConnectConfig::autoRise . Even if immediateStart is true, the captive portal will not launch if autoRise is false. Type bool Value true Start the captive portal with AutoConnect::begin . false Enable the 1 st -WiFi.begin and it will start captive portal when connection failed. This is default. menuItems \u00b6 Configure applying items of the AutoConnect menu . You can arbitrarily combine valid menus by coordinating the menuItems value. Type uint16_t It provides the combined AC_MENUITEM_t value of the item to apply to the AutoConnect menu. Specify the value calculated from the logical OR by the AC_MENUITEM_t value of each item applied as a menu. It affects not only disappear the items from the menu also invalidates the URI they have. As a consequence, even if it accesses the URL directly will occur a 404 error. The default value is logical OR of AC_MENUITEM_CONFIGNEW, AC_MENUITEM_OPENSSIDS, AC_MENUITEM_DISCONNECT, AC_MENUITEM_RESET, AC_MENUITEM_UPDATE and AC_MENUITEM_HOME. Value AC_MENUITEM_NONE No assign items except for the AutoConnectAux page item. AC_MENUITEM_CONFIGNEW Appends Configure new AP item. AC_MENUITEM_OPENSSIDS Appends Open SSIDs item. AC_MENUITEM_DISCONNECT Appends Disconnect item. AC_MENUITEM_RESET Appends Reset... item. AC_MENUITEM_UPDATE Appends Update item. AC_MENUITEM_HOME Appends HOME item. AC_MENUITEM_DEVINFO Appends the Device info item which links to AutoConnect statistics page . How to specify the value of the menu items An menuItems accepts the logical OR of AC_MENUITEM_t type value. For example, to enable only Open SSIDs and HOME items, specify: AutoConnectConfig config; config.menuItems = AC_MENUITEM_OPENSSIDS | AC_MENUITEM_HOME; However, even if you specify like the above, the AutoConnectAux page items still display on the menu. To remove the AutoConnectAux items, use the AutoConnectAux::menu function. minRSSI \u00b6 Specify the lower limit of the WiFi signal strength allowed to use as an access point. This value should be greater than -120 as RSSI. Generally, a data link will not be established unless it exceeds -90 dBm. Also, packet transmission is not reliable below -70 dBm to -80 dBm. Type int16_t The default value is -120 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 ota \u00b6 Specifies to import the built-in OTA update class into the Sketch. When this option is enabled, an Update item will appear in the AutoConnect menu, and the OTA update via Web browser will be automatically embedded to the Sketch. Type AC_OTA_t Value AC_OTA_EXTRA AutoConnect does not import AutoConnectOTA. This is the default. AC_OTA_BUILTIN Specifies to include AutoConnectOTA in the Sketch. otaExtraCaption \u00b6 Specifies the caption to be displayed as an extra on the OTA update screen . The extra caption you specified will be displayed in the upper right corner of the OTA update screen. Also, you can only specify the caption string, and you cannot specify the style individually. An extra caption will draw up with the default style of AutoConnect. Type const char* An extra caption string pointer. password \u00b6 Set the password for authentication. Type String The default value is same as psk . 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. preserveAPMode \u00b6 Specifies starting the STA while maintaining the state of the SoftAP mode in the AutoConnect::begin . This setting only applies when the AutoConnectConfig::autoRise is false. Type bool Value true AutoConnect::begin keeps AP mode. false AutoConnect::begin will stop SoftAP at the beginning of the process. Note that this option is not for starting the SoftAP forcibly in AutoConnect::begin and only keeps AP mode, SoftAP initiation is left to the Sketch. principle \u00b6 Specify the connection order will attempt to connect to one of the highest RSSI values among multiple available access points. It is given as an enumeration value of AC_PRINCIPLE_t indicating. Type AC_PRINCIPLE_t Value AC_PRINCIPLE_RECENT Attempts to connect in the order of the saved credentials entries. The entry order is generally a time series connected in the past. AC_PRINCIPLE_RSSI Attempts to connect to one of the highest RSSI values among multiple available access points. psk \u00b6 Sets password for SoftAP. The length should be from 8 to up to 63. The default value is 12345678 . Type String reconnectInterval \u00b6 Specifies the number of units for interval time to attempt automatic reconnection when AutoConnectConfig::autoReconnect is enabled. This value is specified by the number of unit times from 0 to 255, and one unit time is macro-defined as AUTOCONNECT_UNITTIME in AutoConnectDefs.h file of library source code, and its initial value is 30[s]. Type uint8_t WiFi connection retry is repeated inside AutoConnect::handleClient after the number of seconds that the reconnectInterval value is multiplied by AUTOCONNECT_UNITTIME from the previous attempt. Then, when the connection with one of the saved credentials is established, the automatic reconnection will stop. And while AutoConnectConfig::autoReconnect is enabled, if the WiFi connection is lost, it will start to auto-reconnect again inside AutoConnect::handleClient . If 0 is specified for the reconnectInterval, background reconnection attempt repeatedly will not be made, and only once at the 1 st -WiFi.begin failure in AutoConnect::begin . (Only when AutoConnectConfig::autoReconnect is enabled) The default value is 0. AUTOCONNECT_UNITTIME AUTOCONNECT_UNITTIME as macro defined in AutoConnectDefs.h file of library source code as the below: // Number of seconds in uint time [s] #ifndef AUTOCONNECT_UNITTIME #define AUTOCONNECT_UNITTIME 30 #endif 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 uptime \u00b6 Specifies the waiting time for the module to reboot. Type int The default value is AUTOCONNECT_TIMEOUT/1000. username \u00b6 Set the username for authentication. Type String The default value is same as apid . AutoConnectConfig Initial values \u00b6 Public member Data type Initial value definition Defined symbol 1 apid String esp8266ap esp32ap AUTOCONNECT_APID apip IPAddress 172.217.28.1 AUTOCONNECT_AP_IP auth AC_AUTH_t AC_AUTH_NONE AC_AUTH_NONE AC_AUTH_DIGEST AC_AUTH_BASIC authScope AC_AUTHSCOPE_t AC_AUTHSCOPE_AUX AC_AUTHSCOPE_PARTIAL AC_AUTHSCOPE_AUX AC_AUTHSCOPE_AC AC_AUTHSCOPE_PORTAL AC_AUTHSCOPE_WITHCP autoReconnect bool false autoReset bool true autoRise bool true autoSave AC_SAVECREDENTIAL_t AC_SAVECREDENTIAL_AUTO AC_SAVECREDENTIAL_AUTO AC_SAVECREDENTIAL_ALWAYS AC_SAVECREDENTIAL_NEVER beginTimeout unsinged long 30000UL AUTOCONNECT_TIMEOUT bootUri AC_ONBOOTURI_t AC_ONBOOTURI_ROOT AC_ONBOOTURI_ROOT AC_ONBOOTURI_HOME boundaryOffset uint16_t 0 AC_IDENTIFIER_OFFSET channel uint8_t 1 AUTOCONNECT_AP_CH dns1 IPAddress 0UL dns2 IPAddress 0UL gateway IPAddress 172.217.28.1 AUTOCONNECT_AP_GW hidden uint8_t 0 homeUri String / AUTOCONNECT_HOMEURI hostName String NULL immediateStart bool false menuItems uint16_t AC_MENUITEM_CONFIGNEW + AC_MENUITEM_OPENSSIDS + AC_MENUITEM_DISCONNECT + AC_MENUITEM_RESET + AC_MENUITEM_UPDATE + AC_MENUITEM_HOME AC_MENUITEM_CONFIGNEW AC_MENUITEM_OPENSSIDS AC_MENUITEM_DISCONNECT AC_MENUITEM_RESET AC_MENUITEM_UPDATE AC_MENUITEM_HOME minRSSI int16_t -120 AUTOCONNECT_MIN_RSSI netmask IPAddress 172.217.28.1 AUTOCONNECT_AP_NM ota AC_OTA_t AC_OTA_EXTRA AC_OTA_EXTRA AC_OTA_BUILTIN otaExtraCaption const char* nullptr password String Follow psk portalTimeout unsigned long 0UL AUTOCONNECT_CAPTIVEPORTAL_TIMEOUT preserveAPMode bool false principle AC_PRINCIPLE_t AC_PRINCIPLE_RECENT AC_PRINCIPLE_RECENT AC_PRINCIPLE_RSSI psk String 12345678 AUTOCONNECT_PSK reconnectInterval uint8_t 0 retainPortal bool false staGateway IPAddress 0UL staip IPAddress 0UL staNetmask IPAddress 0UL ticker bool false tickerOn uint8_t LOW AUTOCONNECT_UPDATE_LEDON tickerPort uint8_t LED_BUILTIN AUTOCONNECT_TICKER_PORT title String AutoConnect AUTOCONNECT_MENU_TITLE uptime int AUTOCONNECT_TIMEOUT/1000 AUTOCONNECT_STARTUPTIME username String Follow apid 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.boundaryOffset = 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 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 Those symbols are defined in AutoConnectDefs.h . \u21a9","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 SoftAP. 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#auth","text":"Apply HTTP authentication with the AutoConnect web page. This This setting allows the Sketch to authenticate with \"BASIC\" or \"DIGEST\" scheme. It is given as an enumeration value of AC_AUTH_t that indicates the authentication scheme. This setting determines the default scheme for HTTP authentication with AutoConnect. When the AutoConnectConfig::authScope is AC_AUTHSCOPE_PARTIAL , each AutoConnectAux authentication scheme has priority. Type AC_AUTH_t Value AC_AUTH_NONE No authentication. This is the default. AC_AUTH_DIGEST Use the digest scheme . AC_AUTH_BASIC Use the basic scheme .","title":" auth"},{"location":"apiconfig.html#authscope","text":"Specifies the authentication scope of AutoConnect Web pages. The Sketch will be able to expand or narrow the range of authentication by this setting, which can be either as AC_AUTHSCOPE_t enumeration value. Type AC_AUTHSCOPE_t Value AC_AUTHSCOPE_AUX Require authentication to access for all custom Web pages, excepting AutoConnect's pages. This is the Default. AC_AUTHSCOPE_PARTIAL Authenticate only specific custom Web pages which are specified by AutoConnectAux::authentication function or JSON description. AC_AUTHSCOPE_PORTAL Require authentication to access for all AutoConnect's pages, including custom Web pages. This setting is available only when AutoConnectConfig::auth is other than AC_AUTH_NONE . Ignored if it is AC_AUTH_NONE. Also, the authScope setting has another bit that indicates to allow authentication in the captive portal state. Its enum value cannot be used alone and is always for qualifying the above three enum values. Value AC_AUTHSCOPE_WITHCP Allow authentication with the captive portal state. This value cannot be used alone to declare an authentication scope. It indicates to enable authentication in the captive portal by the logical OR operator with one of the AC_AUTHSCOPE_t values above.","title":" authScope"},{"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 credentials matches the BSSID (or SSID) detected by the network scan. Either BSSID or SSID to aim the access point Whether or not it points to the target access point is determined by matching the SSID or BSSID . The default key to collate is BSSID . The BSSID is usually fixed to the MAC address unique to its access point device, but when using some mobile hotspots, the BSSID may change even for the same access point. If you operate inconvenience in aiming at the access point by BSSID, you can change the collation key to SSID by uncomment the below line in AutoConnectDefs.h : #define AUTOCONNECT_APKEY_SSID If AUTOCONNECT_APKEY_SSID macro is defined when the library is compiled, the access points are collated by the SSID.","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 1 st -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_ALWAYS Save specified SSID and Password always even if a specified credential has been rejected. AC_SAVECREDENTIAL_NEVER The credential no saved.","title":" autoSave"},{"location":"apiconfig.html#begintimeout","text":"Specify the limit time to attempt WiFi connection to the access point. AutoConnect uses this value to abort the connection attempt at WiFi.begin . Its actual value specified in milliseconds unit. The default value is AUTOCONNECT_TIMEOUT defined in AutoConnectDefs.h and the initial value is 30 seconds. Type unsigned long","title":" beginTimeout"},{"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 1 st -WiFi.begin and start the captive portal. If this option is enabled, the module will be in AP_STA mode and the captive portal. The evaluation rank of this parameter is lower than the AutoConnectConfig::autoRise . Even if immediateStart is true, the captive portal will not launch if autoRise is false. Type bool Value true Start the captive portal with AutoConnect::begin . false Enable the 1 st -WiFi.begin and it will start captive portal when connection failed. This is default.","title":" immediateStart"},{"location":"apiconfig.html#menuitems","text":"Configure applying items of the AutoConnect menu . You can arbitrarily combine valid menus by coordinating the menuItems value. Type uint16_t It provides the combined AC_MENUITEM_t value of the item to apply to the AutoConnect menu. Specify the value calculated from the logical OR by the AC_MENUITEM_t value of each item applied as a menu. It affects not only disappear the items from the menu also invalidates the URI they have. As a consequence, even if it accesses the URL directly will occur a 404 error. The default value is logical OR of AC_MENUITEM_CONFIGNEW, AC_MENUITEM_OPENSSIDS, AC_MENUITEM_DISCONNECT, AC_MENUITEM_RESET, AC_MENUITEM_UPDATE and AC_MENUITEM_HOME. Value AC_MENUITEM_NONE No assign items except for the AutoConnectAux page item. AC_MENUITEM_CONFIGNEW Appends Configure new AP item. AC_MENUITEM_OPENSSIDS Appends Open SSIDs item. AC_MENUITEM_DISCONNECT Appends Disconnect item. AC_MENUITEM_RESET Appends Reset... item. AC_MENUITEM_UPDATE Appends Update item. AC_MENUITEM_HOME Appends HOME item. AC_MENUITEM_DEVINFO Appends the Device info item which links to AutoConnect statistics page . How to specify the value of the menu items An menuItems accepts the logical OR of AC_MENUITEM_t type value. For example, to enable only Open SSIDs and HOME items, specify: AutoConnectConfig config; config.menuItems = AC_MENUITEM_OPENSSIDS | AC_MENUITEM_HOME; However, even if you specify like the above, the AutoConnectAux page items still display on the menu. To remove the AutoConnectAux items, use the AutoConnectAux::menu function.","title":" menuItems"},{"location":"apiconfig.html#minrssi","text":"Specify the lower limit of the WiFi signal strength allowed to use as an access point. This value should be greater than -120 as RSSI. Generally, a data link will not be established unless it exceeds -90 dBm. Also, packet transmission is not reliable below -70 dBm to -80 dBm. Type int16_t The default value is -120","title":" minRSSI"},{"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#ota","text":"Specifies to import the built-in OTA update class into the Sketch. When this option is enabled, an Update item will appear in the AutoConnect menu, and the OTA update via Web browser will be automatically embedded to the Sketch. Type AC_OTA_t Value AC_OTA_EXTRA AutoConnect does not import AutoConnectOTA. This is the default. AC_OTA_BUILTIN Specifies to include AutoConnectOTA in the Sketch.","title":" ota"},{"location":"apiconfig.html#otaextracaption","text":"Specifies the caption to be displayed as an extra on the OTA update screen . The extra caption you specified will be displayed in the upper right corner of the OTA update screen. Also, you can only specify the caption string, and you cannot specify the style individually. An extra caption will draw up with the default style of AutoConnect. Type const char* An extra caption string pointer.","title":" otaExtraCaption"},{"location":"apiconfig.html#password","text":"Set the password for authentication. Type String The default value is same as psk .","title":" password"},{"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#preserveapmode","text":"Specifies starting the STA while maintaining the state of the SoftAP mode in the AutoConnect::begin . This setting only applies when the AutoConnectConfig::autoRise is false. Type bool Value true AutoConnect::begin keeps AP mode. false AutoConnect::begin will stop SoftAP at the beginning of the process. Note that this option is not for starting the SoftAP forcibly in AutoConnect::begin and only keeps AP mode, SoftAP initiation is left to the Sketch.","title":" preserveAPMode"},{"location":"apiconfig.html#principle","text":"Specify the connection order will attempt to connect to one of the highest RSSI values among multiple available access points. It is given as an enumeration value of AC_PRINCIPLE_t indicating. Type AC_PRINCIPLE_t Value AC_PRINCIPLE_RECENT Attempts to connect in the order of the saved credentials entries. The entry order is generally a time series connected in the past. AC_PRINCIPLE_RSSI Attempts to connect to one of the highest RSSI values among multiple available access points.","title":" principle"},{"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#reconnectinterval","text":"Specifies the number of units for interval time to attempt automatic reconnection when AutoConnectConfig::autoReconnect is enabled. This value is specified by the number of unit times from 0 to 255, and one unit time is macro-defined as AUTOCONNECT_UNITTIME in AutoConnectDefs.h file of library source code, and its initial value is 30[s]. Type uint8_t WiFi connection retry is repeated inside AutoConnect::handleClient after the number of seconds that the reconnectInterval value is multiplied by AUTOCONNECT_UNITTIME from the previous attempt. Then, when the connection with one of the saved credentials is established, the automatic reconnection will stop. And while AutoConnectConfig::autoReconnect is enabled, if the WiFi connection is lost, it will start to auto-reconnect again inside AutoConnect::handleClient . If 0 is specified for the reconnectInterval, background reconnection attempt repeatedly will not be made, and only once at the 1 st -WiFi.begin failure in AutoConnect::begin . (Only when AutoConnectConfig::autoReconnect is enabled) The default value is 0. AUTOCONNECT_UNITTIME AUTOCONNECT_UNITTIME as macro defined in AutoConnectDefs.h file of library source code as the below: // Number of seconds in uint time [s] #ifndef AUTOCONNECT_UNITTIME #define AUTOCONNECT_UNITTIME 30 #endif","title":" reconnectInterval"},{"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#uptime","text":"Specifies the waiting time for the module to reboot. Type int The default value is AUTOCONNECT_TIMEOUT/1000.","title":" uptime"},{"location":"apiconfig.html#username","text":"Set the username for authentication. Type String The default value is same as apid .","title":" username"},{"location":"apiconfig.html#autoconnectconfig-initial-values","text":"Public member Data type Initial value definition Defined symbol 1 apid String esp8266ap esp32ap AUTOCONNECT_APID apip IPAddress 172.217.28.1 AUTOCONNECT_AP_IP auth AC_AUTH_t AC_AUTH_NONE AC_AUTH_NONE AC_AUTH_DIGEST AC_AUTH_BASIC authScope AC_AUTHSCOPE_t AC_AUTHSCOPE_AUX AC_AUTHSCOPE_PARTIAL AC_AUTHSCOPE_AUX AC_AUTHSCOPE_AC AC_AUTHSCOPE_PORTAL AC_AUTHSCOPE_WITHCP autoReconnect bool false autoReset bool true autoRise bool true autoSave AC_SAVECREDENTIAL_t AC_SAVECREDENTIAL_AUTO AC_SAVECREDENTIAL_AUTO AC_SAVECREDENTIAL_ALWAYS AC_SAVECREDENTIAL_NEVER beginTimeout unsinged long 30000UL AUTOCONNECT_TIMEOUT bootUri AC_ONBOOTURI_t AC_ONBOOTURI_ROOT AC_ONBOOTURI_ROOT AC_ONBOOTURI_HOME boundaryOffset uint16_t 0 AC_IDENTIFIER_OFFSET channel uint8_t 1 AUTOCONNECT_AP_CH dns1 IPAddress 0UL dns2 IPAddress 0UL gateway IPAddress 172.217.28.1 AUTOCONNECT_AP_GW hidden uint8_t 0 homeUri String / AUTOCONNECT_HOMEURI hostName String NULL immediateStart bool false menuItems uint16_t AC_MENUITEM_CONFIGNEW + AC_MENUITEM_OPENSSIDS + AC_MENUITEM_DISCONNECT + AC_MENUITEM_RESET + AC_MENUITEM_UPDATE + AC_MENUITEM_HOME AC_MENUITEM_CONFIGNEW AC_MENUITEM_OPENSSIDS AC_MENUITEM_DISCONNECT AC_MENUITEM_RESET AC_MENUITEM_UPDATE AC_MENUITEM_HOME minRSSI int16_t -120 AUTOCONNECT_MIN_RSSI netmask IPAddress 172.217.28.1 AUTOCONNECT_AP_NM ota AC_OTA_t AC_OTA_EXTRA AC_OTA_EXTRA AC_OTA_BUILTIN otaExtraCaption const char* nullptr password String Follow psk portalTimeout unsigned long 0UL AUTOCONNECT_CAPTIVEPORTAL_TIMEOUT preserveAPMode bool false principle AC_PRINCIPLE_t AC_PRINCIPLE_RECENT AC_PRINCIPLE_RECENT AC_PRINCIPLE_RSSI psk String 12345678 AUTOCONNECT_PSK reconnectInterval uint8_t 0 retainPortal bool false staGateway IPAddress 0UL staip IPAddress 0UL staNetmask IPAddress 0UL ticker bool false tickerOn uint8_t LOW AUTOCONNECT_UPDATE_LEDON tickerPort uint8_t LED_BUILTIN AUTOCONNECT_TICKER_PORT title String AutoConnect AUTOCONNECT_MENU_TITLE uptime int AUTOCONNECT_TIMEOUT/1000 AUTOCONNECT_STARTUPTIME username String Follow apid","title":" AutoConnectConfig Initial values"},{"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.boundaryOffset = 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 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 Those symbols are defined in AutoConnectDefs.h . \u21a9","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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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<T> \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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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, const ACInput_t apply = AC_Input_Text) 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. apply Specifies the type of input that the text box accepts. 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 apply \u00b6 Specifies the type of input that the text box accepts. AutoConnectInput will generate either a < input type = \"text\" > , < input type = \"password\" > , or < input type = \"number\" > tag based on the apply specifying as input type. The input type can be specified the following values in the ACInput_t enumeration type. 1 Type ACInput_t AC_Input_Text : input type=\"text\" AC_Input_Password : input type=\"password\" AC_Input_Number : input type=\"number\" 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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<String> 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. AutoConnectRange \u00b6 Constructor \u00b6 AutoConnectRange( const char * name = \"\" , const int value = 0 , const char * label = \"\" , const int min = 0 , const int max = 0 , const int step = 1 , const ACPosition_t magnify = AC_Void, const ACPosterior_t post = AC_Tag_BR, const char * style = \"\" ) Parameters name The element name. value The initial value in the range. label Label string. min The most negative value within the range of allowed values. max The greatest value in the range of permitted values. step The granularity that the value must adhere to. magnify Specifies the display position of the current value of the range. post Specifies the tag to be output afterward the element. style A style code with CSS format that qualifiers the range slider. 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 range slider and the label are connected by the id attribute. Type String magnify \u00b6 Display position of the current value of the range. Type ACPosition_t AC_Infront : Displays the current value on the left side. AC_Behind : Displays the current value on the right side. AC_Void : No display the current value. This is the default. max \u00b6 The greatest value in the range. Type int min \u00b6 The most negative value within the range. Type int 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> tag. step \u00b6 The granularity that the value must adhere to. Type int style \u00b6 A style code with CSS format that qualifiers the range slider. Type String value \u00b6 Value of the element. It becomes a value attribute of an HTML < input type = \"range\" > tag. A value of range in the custom Web page will be sent with a query string of the form. Type int Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Range 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<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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 `#!html ` 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 ACInput_t does not mind what kind of display effects on the browser. For example, input type=\"number\" has a spin button in Chrome, but has no display effects in iOS Safari. You will see the numeric keypad at inputting the number field with giving the pattern as \\d* . \u21a9 \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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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#ast","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&lt;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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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, const ACInput_t apply = AC_Input_Text) 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. apply Specifies the type of input that the text box accepts.","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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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#apply","text":"Specifies the type of input that the text box accepts. AutoConnectInput will generate either a < input type = \"text\" > , < input type = \"password\" > , or < input type = \"number\" > tag based on the apply specifying as input type. The input type can be specified the following values in the ACInput_t enumeration type. 1 Type ACInput_t AC_Input_Text : input type=\"text\" AC_Input_Password : input type=\"password\" AC_Input_Number : input type=\"number\"","title":" apply"},{"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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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<String>","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 &#91;&nbsp;&#93;"},{"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#autoconnectrange","text":"","title":"AutoConnectRange"},{"location":"apielements.html#constructor_6","text":"AutoConnectRange( const char * name = \"\" , const int value = 0 , const char * label = \"\" , const int min = 0 , const int max = 0 , const int step = 1 , const ACPosition_t magnify = AC_Void, const ACPosterior_t post = AC_Tag_BR, const char * style = \"\" ) Parameters name The element name. value The initial value in the range. label Label string. min The most negative value within the range of allowed values. max The greatest value in the range of permitted values. step The granularity that the value must adhere to. magnify Specifies the display position of the current value of the range. post Specifies the tag to be output afterward the element. style A style code with CSS format that qualifiers the range slider.","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#label_4","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 range slider and the label are connected by the id attribute. Type String","title":" label"},{"location":"apielements.html#magnify","text":"Display position of the current value of the range. Type ACPosition_t AC_Infront : Displays the current value on the left side. AC_Behind : Displays the current value on the right side. AC_Void : No display the current value. This is the default.","title":" magnify"},{"location":"apielements.html#max","text":"The greatest value in the range. Type int","title":" max"},{"location":"apielements.html#min","text":"The most negative value within the range. Type int","title":" min"},{"location":"apielements.html#name_6","text":"The element name. Type String","title":" name"},{"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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> tag.","title":" post"},{"location":"apielements.html#step","text":"The granularity that the value must adhere to. Type int","title":" step"},{"location":"apielements.html#style","text":"A style code with CSS format that qualifiers the range slider. Type String","title":" style"},{"location":"apielements.html#value_6","text":"Value of the element. It becomes a value attribute of an HTML < input type = \"range\" > tag. A value of range in the custom Web page will be sent with a query string of the form. Type int","title":" value"},{"location":"apielements.html#public-member-functions_6","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_6","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Range","title":" typeOf"},{"location":"apielements.html#autoconnectselect","text":"","title":"AutoConnectSelect"},{"location":"apielements.html#constructor_7","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_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#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_7","text":"The element name. Type String","title":" name"},{"location":"apielements.html#label_5","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<String>","title":" options"},{"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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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_7","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 &#91;&nbsp;&#93;"},{"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_7","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Select","title":" typeOf"},{"location":"apielements.html#value_7","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_8","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_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#name_8","text":"The element name. Type String","title":" name"},{"location":"apielements.html#value_8","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_8","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_8","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_9","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 `#!html ` 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_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#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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> tag.","title":" post"},{"location":"apielements.html#uri","text":"Destination URI. Type String","title":" uri"},{"location":"apielements.html#value_9","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_9","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_9","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_10","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_10","text":"","title":" Public member variables"},{"location":"apielements.html#enable_10","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_9","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_10","text":"The element name. Type String","title":" name"},{"location":"apielements.html#post_9","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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> tag.","title":" post"},{"location":"apielements.html#style_1","text":"A style code with CSS format that qualifiers the text. Type String","title":" style"},{"location":"apielements.html#value_10","text":"A content string of the text element. Type String","title":" value"},{"location":"apielements.html#public-member-functions_10","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_10","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Text ACInput_t does not mind what kind of display effects on the browser. For example, input type=\"number\" has a spin button in Chrome, but has no display effects in iOS Safari. You will see the numeric keypad at inputting the number field with giving the pattern as \\d* . \u21a9 \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 <a></a> tag with PNG embedded of the AutoConnect menu hyperlinks. Icon type is specified by the parameter of the macro. BAR_24 Bars icon, 24x24. BAR_32 Bars icon, 32x32. BAR_48 Bars icon, 48x48. COG_16 Cog icon, 16x16. COG_24 Cog icon, 24x24. COG_32 Cog icon, 32x32. Usage String html = \"<html>\" ; html += AUTOCONNECT_LINK(BAR_32); html += \"</html>\" ; server.send( 200 , \"text/html\" , html);","title":"Something extra"},{"location":"apiextra.html#icons","text":"The library presents two PNG icons which can be used to embed a hyperlink to the AutoConnect menu. Bar type Cog type To reference the icon, use the AUTOCONNECT_LINK macro in the Sketch. It expands into the string literal as an HTML <a></a> tag with PNG embedded of the AutoConnect menu hyperlinks. Icon type is specified by the parameter of the macro. BAR_24 Bars icon, 24x24. BAR_32 Bars icon, 32x32. BAR_48 Bars icon, 48x48. COG_16 Cog icon, 16x16. COG_24 Cog icon, 24x24. COG_32 Cog icon, 32x32. Usage String html = \"<html>\" ; html += AUTOCONNECT_LINK(BAR_32); html += \"</html>\" ; server.send( 200 , \"text/html\" , html);","title":" Icons"},{"location":"apiupdate.html","text":"Constructor \u00b6 AutoConnectUpdate \u00b6 AutoConnectUpdate( const String & host, const uint16_t port, const String & uri, const int timeout, const uint8_t ledOn) Parameters host Update server address. Specifies IP address or FQDN. port Specifies HTTP port for the updating process. The default assumes AUTOCONNECT_UPDATE_PORT defined in the AutoConnectDefs.h header file. uri Specifies a URI on the update server that has deployed available binary sketch files. timeout Specifies the maximum response time for the update server. The default assumes AUTOCONNECT_UPDATE_TIMEOUT in the AutoConnectDefs.h header file. ledOn Active signal to light the LED ticker during the update. Specifies HIGH or LOW The AutoConnectUpdate class inherits from the ESP8266HTTPUpdate ( HTTPUpdate for ESP32) class. Public member functions \u00b6 attach \u00b6 void AutoConnectUpdate :: attach(AutoConnect & portal) Attaches the AutoConnectUpdate to the AutoConnect which constitutes the bedrock of the update process. This function creates a dialog page for the update operation as an instance of AutoConnectAux and participates in the AutoConnect menu . Parameter portal Specifies a reference to the AutoConnect instance to attach. disable \u00b6 void AutoConnectUpdate :: disable( const bool activate) Disable the Update item in AutoConnect menu . The AutoConnect::disable function only hides the Update item from the menu, and the AutoConnectUpdate class is still active with the parameter condition. You can use the AutoConnectUpdate::enable function to appear it again in the menu. Parameter activate If specified the true then the Update item will be displayed on the AutoConnect menu and OTA update will be available during the WiFi status is WL_CONNECTED. For the false , the OTA update feature is disabled. enable \u00b6 void AutoConnectUpdate :: enable( void ) Makes AutoConnectUpdate class available by incorporating the OTA update function into the AutoConnect menu . In ordinarily, the AutoConnectUpdate class becomes available by just calling the AutoConnectUpdate::attach function. handleUpdate \u00b6 void AutoConnectUpdate :: handleUpdate( void ) Performs the update process. This function is called by AutoConnect::handleClient when AutoConnectUpdate is enabled. In many cases, sketches do not need to call this function on purpose. isEnabled \u00b6 bool AutoConnectUpdate :: isEnabled( void ) Returns whether AutoConnectUpdate is enabled. rebootOnUpdate \u00b6 void AutoConnectUpdate :: rebootOnUpdate( bool reboot) Specifies whether or not to automatically restart the module as a result of the successful completion of the update process. Parameter reboot If specified the true then the ESP module will reboot after the updating successfully completed. For the false , The module does not reboot automatically. The uploaded new firmware remains in the updating stage of the flash on the ESP module. The boot process during the next start turn of the module by reset will copy the updated firmware to the actual program area and a new sketch program will start. The default value is true. This function inherits from the ESP8266HTTPUpdate (HTTPUpdate for ESP32) class. setLedPin \u00b6 void AutoConnectUpdate :: setLedPin( int ledPin, uint8_t ledOn) Sets the port and the ON signal level of the externally connected LED that should act as a ticker during the update process. Parameter ledPin Specifies the PIN connected external LED for the ticker. The default assumes AUTOCONNECT_TICKER_PORT defined in the AutoConnectDefs.h header file and it is derived from the board-specific LED_BUILTIN . By default, the AutoConnectUpdate class does not use the ticker for boards without the LED_BUILTIN definition. If you connect the ticker LED externally, you need to specify the PIN using the setLedPin function. ledOn Specifies the the ON signal level of the LED PIN port. It is HIGH or LOW . This function inherits from the ESP8266HTTPUpdate (HTTPUpdate for ESP32) class. status \u00b6 AC_UPDATESTATUS_t AutoConnectUpdate :: status( void ) Returns the update process status transition indicator as an enumerated value of the AC_UPDATESTATUS_t type that indicates the process status of the AutoConnectUpdate class. Return value One of the enumerated values \u200b\u200bindicating the status of the Update class as follows: UPDATE_RESET : Update process ended, need to reset. UPDATE_IDLE : Update process has not started. UPDATE_START : Update process has been started. UPDATE_PROGRESS : Update process has been started. UPDATE_SUCCESS : Update successfully completed. UPDATE_NOAVAIL : No available update. UPDATE_FAIL : Update failed. Public member variables \u00b6 host \u00b6 Update server address. Specifies IP address or FQDN. Type String port \u00b6 HTTP port for the updating process. Type String The default assumes AUTOCONNECT_UPDATE_PORT defined in the AutoConnectDefs.h header file. uri \u00b6 URI on the update server that has deployed available binary sketch files. Type String","title":"AutoConnectUpdate API"},{"location":"apiupdate.html#constructor","text":"","title":" Constructor"},{"location":"apiupdate.html#autoconnectupdate","text":"AutoConnectUpdate( const String & host, const uint16_t port, const String & uri, const int timeout, const uint8_t ledOn) Parameters host Update server address. Specifies IP address or FQDN. port Specifies HTTP port for the updating process. The default assumes AUTOCONNECT_UPDATE_PORT defined in the AutoConnectDefs.h header file. uri Specifies a URI on the update server that has deployed available binary sketch files. timeout Specifies the maximum response time for the update server. The default assumes AUTOCONNECT_UPDATE_TIMEOUT in the AutoConnectDefs.h header file. ledOn Active signal to light the LED ticker during the update. Specifies HIGH or LOW The AutoConnectUpdate class inherits from the ESP8266HTTPUpdate ( HTTPUpdate for ESP32) class.","title":"AutoConnectUpdate"},{"location":"apiupdate.html#public-member-functions","text":"","title":" Public member functions"},{"location":"apiupdate.html#attach","text":"void AutoConnectUpdate :: attach(AutoConnect & portal) Attaches the AutoConnectUpdate to the AutoConnect which constitutes the bedrock of the update process. This function creates a dialog page for the update operation as an instance of AutoConnectAux and participates in the AutoConnect menu . Parameter portal Specifies a reference to the AutoConnect instance to attach.","title":" attach"},{"location":"apiupdate.html#disable","text":"void AutoConnectUpdate :: disable( const bool activate) Disable the Update item in AutoConnect menu . The AutoConnect::disable function only hides the Update item from the menu, and the AutoConnectUpdate class is still active with the parameter condition. You can use the AutoConnectUpdate::enable function to appear it again in the menu. Parameter activate If specified the true then the Update item will be displayed on the AutoConnect menu and OTA update will be available during the WiFi status is WL_CONNECTED. For the false , the OTA update feature is disabled.","title":" disable"},{"location":"apiupdate.html#enable","text":"void AutoConnectUpdate :: enable( void ) Makes AutoConnectUpdate class available by incorporating the OTA update function into the AutoConnect menu . In ordinarily, the AutoConnectUpdate class becomes available by just calling the AutoConnectUpdate::attach function.","title":" enable"},{"location":"apiupdate.html#handleupdate","text":"void AutoConnectUpdate :: handleUpdate( void ) Performs the update process. This function is called by AutoConnect::handleClient when AutoConnectUpdate is enabled. In many cases, sketches do not need to call this function on purpose.","title":" handleUpdate"},{"location":"apiupdate.html#isenabled","text":"bool AutoConnectUpdate :: isEnabled( void ) Returns whether AutoConnectUpdate is enabled.","title":" isEnabled"},{"location":"apiupdate.html#rebootonupdate","text":"void AutoConnectUpdate :: rebootOnUpdate( bool reboot) Specifies whether or not to automatically restart the module as a result of the successful completion of the update process. Parameter reboot If specified the true then the ESP module will reboot after the updating successfully completed. For the false , The module does not reboot automatically. The uploaded new firmware remains in the updating stage of the flash on the ESP module. The boot process during the next start turn of the module by reset will copy the updated firmware to the actual program area and a new sketch program will start. The default value is true. This function inherits from the ESP8266HTTPUpdate (HTTPUpdate for ESP32) class.","title":" rebootOnUpdate"},{"location":"apiupdate.html#setledpin","text":"void AutoConnectUpdate :: setLedPin( int ledPin, uint8_t ledOn) Sets the port and the ON signal level of the externally connected LED that should act as a ticker during the update process. Parameter ledPin Specifies the PIN connected external LED for the ticker. The default assumes AUTOCONNECT_TICKER_PORT defined in the AutoConnectDefs.h header file and it is derived from the board-specific LED_BUILTIN . By default, the AutoConnectUpdate class does not use the ticker for boards without the LED_BUILTIN definition. If you connect the ticker LED externally, you need to specify the PIN using the setLedPin function. ledOn Specifies the the ON signal level of the LED PIN port. It is HIGH or LOW . This function inherits from the ESP8266HTTPUpdate (HTTPUpdate for ESP32) class.","title":" setLedPin"},{"location":"apiupdate.html#status","text":"AC_UPDATESTATUS_t AutoConnectUpdate :: status( void ) Returns the update process status transition indicator as an enumerated value of the AC_UPDATESTATUS_t type that indicates the process status of the AutoConnectUpdate class. Return value One of the enumerated values \u200b\u200bindicating the status of the Update class as follows: UPDATE_RESET : Update process ended, need to reset. UPDATE_IDLE : Update process has not started. UPDATE_START : Update process has been started. UPDATE_PROGRESS : Update process has been started. UPDATE_SUCCESS : Update successfully completed. UPDATE_NOAVAIL : No available update. UPDATE_FAIL : Update failed.","title":" status"},{"location":"apiupdate.html#public-member-variables","text":"","title":" Public member variables"},{"location":"apiupdate.html#host","text":"Update server address. Specifies IP address or FQDN. Type String","title":" host"},{"location":"apiupdate.html#port","text":"HTTP port for the updating process. Type String The default assumes AUTOCONNECT_UPDATE_PORT defined in the AutoConnectDefs.h header file.","title":" port"},{"location":"apiupdate.html#uri","text":"URI on the update server that has deployed available binary sketch files. Type String","title":" uri"},{"location":"basicusage.html","text":"Simple usage \u00b6 Embed to the Sketches \u00b6 How embed the AutoConnect to the Sketches you have. Most simple approach to applying AutoConnect for the existing Sketches, follow the below steps. The below Sketch is for ESP8266. For ESP32, replace ESP8266WebServer with WebServer and ESP8266WiFi.h with WiFi.h respectively. Insert #include <AutoConnect.h> to behind of #include <ESP8266WebServer.h> . Insert AutoConnect PORTAL(WEBSERVER); to behind of ESP8266WebServer WEBSERVER; declaration. 1 Remove WiFi. begin ( SSID , PSK ) and the subsequent logic for the connection status check. Replace WEBSERVER . begin () to PORTAL . begin () . 2 Replace WEBSERVER . handleClient () to PORTAL . handleClient () . 3 If the connection checks logic is needed, you can check the return value according to PORTAL . begin () with true or false . Basic usage \u00b6 Basic logic sequence for the user Sketches \u00b6 1. A typical logic sequence \u00b6 Include headers, ESP8266WebServer.h / WebServer.h and AutoConnect.h Declare an ESP8266WebServer variable for ESP8266 or a WebServer variable for ESP32. Declare an AutoConnect variable. Implement the URL handlers provided for the on method of ESP8266WebServer/WebServer with the function() . setup() 5.1 Sets URL handler the function() to ESP8266WebServer/WebServer by ESP8266WebServer::on / WebServer::on . 5.2 Starts AutoConnect::begin() . 5.3 Check WiFi connection status. loop() 6.1 Do the process for actual Sketch. 6.2 Invokes AutoConnect::handleClient() , or invokes ESP8266WebServer::handleClient() / WebServer::handleClient then AutoConnect::handleRequest() . 2. Declare AutoConnect object \u00b6 Two options are available for AutoConnect constructor . AutoConnect VARIABLE ( & ESP8266WebServer); // For ESP8266 AutoConnect VARIABLE ( & WebServer); // For ESP32 or AutoConnect VARIABLE; The parameter with an ESP8266WebServer/WebServer variable: An ESP8266WebServer/WebServer object variable must be declared. AutoConnect uses its variable to handles the AutoConnect menu . With no parameter: the Sketch does not declare ESP8266WebServer/WebServer object. In this case, AutoConnect allocates an instance of the ESP8266WebServer/WebServer internally. The logic sequence of the Sketch is somewhat different as the above. To register a URL handler function by ESP8266WebServer::on or WebServer::on should be performed after AutoConnect::begin . 3. No need WiFI.begin(...) \u00b6 AutoConnect internally performs WiFi.begin to establish a WiFi connection. There is no need for a general process to establish a connection using WiFi.begin with a Sketch code. 4. Alternate ESP8266WebServer::begin() and WebServer::begin() \u00b6 AutoConnect::begin executes ESP8266WebServer::begin / WebServer::begin internally too and it starts the DNS server to behave as a Captive portal. So it is not needed to call ESP8266WebServer::begin / WebServer::begin in the Sketch. Why DNS Server starts AutoConnect traps the detection of the captive portal and achieves a connection with the WLAN interactively by the AutoConnect menu. It responds SoftAP address to all DNS queries temporarily to trap. Once a WiFi connection establishes, the DNS server contributed by AutoConnect stops. 5. AutoConnect::begin with SSID and Password \u00b6 SSID and Password can also specify by AutoConnect::begin . ESP8266/ESP32 uses provided SSID and Password explicitly. If the connection false with specified SSID with Password then a captive portal is activated. SSID and Password are not present, ESP8266 SDK will attempt to connect using the still effectual SSID and password. Usually, it succeeds. 6. Use ESP8266WebServer::on and WebServer::on to handle URL \u00b6 AutoConnect is designed to coexist with the process for handling the web pages by user Sketches. The page processing function which will send an HTML to the client invoked by the \" on::ESP8266WebServer \" or the \" on::WebServer \" function is the same as when using ESP8266WebServer/WebServer natively. 7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient() \u00b6 Both classes member function name is the same: handleClient , but the behavior is different. Using the AutoConnect embedded along with ESP8266WebServer::handleClient/WebServer::handleClient has limitations. Refer to the below section for details. ESP8266WebServer/WebServer hosted or parasitic \u00b6 The interoperable process with an ESP8266WebServer/WebServer depends on the parameters of the AutoConnect constructor . Declaration parameter for the constructor Use ESP8266WebServer::handleClient or WebServer::handleClient only Use AutoConnect::handleClient None AutoConnect menu not available. To use AutoConnect menu, need AutoConnect::handleRequest() . also to use ESP8266WebServer/WebServer natively, need AutoConnect::host() . AutoConnect menu available. To use ESP8266WebServer/WebServer natively, need AutoConnect::host() . Reference to ESP8266WebServer/WebServer AutoConnect menu not available. To use AutoConnect menu, need AutoConnect::handleRequest() . AutoConnect menu available. By declaration for the AutoConnect variable with no parameter : The ESP8266WebServer/WebServer instance is hosted by AutoConnect automatically then the Sketches use AutoConnect::host as API to get it after AutoConnect::begin performed. By declaration for the AutoConnect variable with the reference of ESP8266WebServer/WebServer : AutoConnect will use it. the Sketch can use it is too. In use ESP8266WebServer::handleClient()/WebServer::handleClient() : AutoConnect menu can be dispatched but not works normally. It is necessary to call AutoConnect::handleRequest after ESP8255WebServer::handleClient / WebServer::handleClient invoking. In use AutoConnect::handleClient() : The handleClient() process and the AutoConnect menu is available without calling ESP8266WebServer::handleClient . Why AutoConnect::handleRequest is needed when using ESP8266WebServer::handleClient/WebServer::handleClient The AutoConnect menu function may affect WiFi connection state. It follows that the menu process must execute outside ESP8266WebServer::handleClient and WebServer::handleClient . AutoConnect::handleClient is equivalent ESP8266WebServer::handleClient and WEbServer::handleClient included AutoConnect::handleRequest . Each VARIABLE conforms to the actual declaration in the Sketches. \u21a9 WiFi SSID and Password can be specified AutoConnect::begin() too. \u21a9 Replacement the handleClient method is not indispensable. AutoConnect can still connect with the captive portal as it is ESP8266WebServer::handleClient. But it can not valid AutoConnect menu . \u21a9","title":"Basic usage"},{"location":"basicusage.html#simple-usage","text":"","title":"Simple usage"},{"location":"basicusage.html#embed-to-the-sketches","text":"How embed the AutoConnect to the Sketches you have. Most simple approach to applying AutoConnect for the existing Sketches, follow the below steps. The below Sketch is for ESP8266. For ESP32, replace ESP8266WebServer with WebServer and ESP8266WiFi.h with WiFi.h respectively. Insert #include <AutoConnect.h> to behind of #include <ESP8266WebServer.h> . Insert AutoConnect PORTAL(WEBSERVER); to behind of ESP8266WebServer WEBSERVER; declaration. 1 Remove WiFi. begin ( SSID , PSK ) and the subsequent logic for the connection status check. Replace WEBSERVER . begin () to PORTAL . begin () . 2 Replace WEBSERVER . handleClient () to PORTAL . handleClient () . 3 If the connection checks logic is needed, you can check the return value according to PORTAL . begin () with true or false .","title":" Embed to the Sketches"},{"location":"basicusage.html#basic-usage","text":"","title":"Basic usage"},{"location":"basicusage.html#basic-logic-sequence-for-the-user-sketches","text":"","title":" Basic logic sequence for the user Sketches"},{"location":"basicusage.html#1-a-typical-logic-sequence","text":"Include headers, ESP8266WebServer.h / WebServer.h and AutoConnect.h Declare an ESP8266WebServer variable for ESP8266 or a WebServer variable for ESP32. Declare an AutoConnect variable. Implement the URL handlers provided for the on method of ESP8266WebServer/WebServer with the function() . setup() 5.1 Sets URL handler the function() to ESP8266WebServer/WebServer by ESP8266WebServer::on / WebServer::on . 5.2 Starts AutoConnect::begin() . 5.3 Check WiFi connection status. loop() 6.1 Do the process for actual Sketch. 6.2 Invokes AutoConnect::handleClient() , or invokes ESP8266WebServer::handleClient() / WebServer::handleClient then AutoConnect::handleRequest() .","title":"1. A typical logic sequence"},{"location":"basicusage.html#2-declare-autoconnect-object","text":"Two options are available for AutoConnect constructor . AutoConnect VARIABLE ( & ESP8266WebServer); // For ESP8266 AutoConnect VARIABLE ( & WebServer); // For ESP32 or AutoConnect VARIABLE; The parameter with an ESP8266WebServer/WebServer variable: An ESP8266WebServer/WebServer object variable must be declared. AutoConnect uses its variable to handles the AutoConnect menu . With no parameter: the Sketch does not declare ESP8266WebServer/WebServer object. In this case, AutoConnect allocates an instance of the ESP8266WebServer/WebServer internally. The logic sequence of the Sketch is somewhat different as the above. To register a URL handler function by ESP8266WebServer::on or WebServer::on should be performed after AutoConnect::begin .","title":"2. Declare AutoConnect object"},{"location":"basicusage.html#3-no-need-wifibegin","text":"AutoConnect internally performs WiFi.begin to establish a WiFi connection. There is no need for a general process to establish a connection using WiFi.begin with a Sketch code.","title":"3. No need WiFI.begin(...)"},{"location":"basicusage.html#4-alternate-esp8266webserverbegin-and-webserverbegin","text":"AutoConnect::begin executes ESP8266WebServer::begin / WebServer::begin internally too and it starts the DNS server to behave as a Captive portal. So it is not needed to call ESP8266WebServer::begin / WebServer::begin in the Sketch. Why DNS Server starts AutoConnect traps the detection of the captive portal and achieves a connection with the WLAN interactively by the AutoConnect menu. It responds SoftAP address to all DNS queries temporarily to trap. Once a WiFi connection establishes, the DNS server contributed by AutoConnect stops.","title":"4. Alternate ESP8266WebServer::begin() and WebServer::begin()"},{"location":"basicusage.html#5-autoconnectbegin-with-ssid-and-password","text":"SSID and Password can also specify by AutoConnect::begin . ESP8266/ESP32 uses provided SSID and Password explicitly. If the connection false with specified SSID with Password then a captive portal is activated. SSID and Password are not present, ESP8266 SDK will attempt to connect using the still effectual SSID and password. Usually, it succeeds.","title":"5. AutoConnect::begin with SSID and Password"},{"location":"basicusage.html#6-use-esp8266webserveron-and-webserveron-to-handle-url","text":"AutoConnect is designed to coexist with the process for handling the web pages by user Sketches. The page processing function which will send an HTML to the client invoked by the \" on::ESP8266WebServer \" or the \" on::WebServer \" function is the same as when using ESP8266WebServer/WebServer natively.","title":"6. Use ESP8266WebServer::on and WebServer::on to handle URL"},{"location":"basicusage.html#7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient","text":"Both classes member function name is the same: handleClient , but the behavior is different. Using the AutoConnect embedded along with ESP8266WebServer::handleClient/WebServer::handleClient has limitations. Refer to the below section for details.","title":"7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()"},{"location":"basicusage.html#esp8266webserverwebserver-hosted-or-parasitic","text":"The interoperable process with an ESP8266WebServer/WebServer depends on the parameters of the AutoConnect constructor . Declaration parameter for the constructor Use ESP8266WebServer::handleClient or WebServer::handleClient only Use AutoConnect::handleClient None AutoConnect menu not available. To use AutoConnect menu, need AutoConnect::handleRequest() . also to use ESP8266WebServer/WebServer natively, need AutoConnect::host() . AutoConnect menu available. To use ESP8266WebServer/WebServer natively, need AutoConnect::host() . Reference to ESP8266WebServer/WebServer AutoConnect menu not available. To use AutoConnect menu, need AutoConnect::handleRequest() . AutoConnect menu available. By declaration for the AutoConnect variable with no parameter : The ESP8266WebServer/WebServer instance is hosted by AutoConnect automatically then the Sketches use AutoConnect::host as API to get it after AutoConnect::begin performed. By declaration for the AutoConnect variable with the reference of ESP8266WebServer/WebServer : AutoConnect will use it. the Sketch can use it is too. In use ESP8266WebServer::handleClient()/WebServer::handleClient() : AutoConnect menu can be dispatched but not works normally. It is necessary to call AutoConnect::handleRequest after ESP8255WebServer::handleClient / WebServer::handleClient invoking. In use AutoConnect::handleClient() : The handleClient() process and the AutoConnect menu is available without calling ESP8266WebServer::handleClient . Why AutoConnect::handleRequest is needed when using ESP8266WebServer::handleClient/WebServer::handleClient The AutoConnect menu function may affect WiFi connection state. It follows that the menu process must execute outside ESP8266WebServer::handleClient and WebServer::handleClient . AutoConnect::handleClient is equivalent ESP8266WebServer::handleClient and WEbServer::handleClient included AutoConnect::handleRequest . Each VARIABLE conforms to the actual declaration in the Sketches. \u21a9 WiFi SSID and Password can be specified AutoConnect::begin() too. \u21a9 Replacement the handleClient method is not indispensable. AutoConnect can still connect with the captive portal as it is ESP8266WebServer::handleClient. But it can not valid AutoConnect menu . \u21a9","title":" ESP8266WebServer/WebServer hosted or parasitic"},{"location":"changelabel.html","text":"Change the item's label text \u00b6 You can change the text of AutoConnect menu items. The easiest way is to rewrite the header file directly in the library that defines the menu label. Advanced Usage section describes the detailed how to change the label text directly. However, this way is less preferred as it modifies the library code and further affects the entire Arduino project you compile. So, here's how to change the label text for each Arduino project without directly modifying the library code. Using this method, you can also display the label text and fixed text on AutoConnect pages in your national language. (e.g. in Japanese) Preparation \u00b6 AutoConnect needs a definition file as c++ header (.h) to change the label text. It is used when your Arduino project is compiled, and there is no additional memory consumption due to changing the label text. This header file describes each fixed text of AutoConnect with the #define preprocessor directive. The next thing you need is PlatformIO . PlatformIO is a very powerful environment for embedded development with multi-platform and multi-architecture build systems. And you can easily set up a PlatformIO for the Arduino development system as follows on your host machine. Microsoft Visual Studio Code PlatformIO IDE (included PlatformIO core) Install PlatformIO and VSCode Please refer to the official documentation for PlatformIO and VSCode installation. The rest of this section assumes that you have a PlatformIO environment with VSCode as the front end that has installed on your host machine. How to change the label text \u00b6 Label text replacement header file \u00b6 AutoConnect label texts are pre-assigned with a fixed string so that it can be determined at compile time. Their default definitions are in the AutoConnectLabels.h file that has all the replaceable label text defined by the #define directive. Label placed Pre-defined text ID (#define macro) Menu item Configure new AP AUTOCONNECT_MENULABEL_CONFIGNEW Open SSIDs AUTOCONNECT_MENULABEL_OPENSSIDS Disconnect AUTOCONNECT_MENULABEL_DISCONNECT Reset... AUTOCONNECT_MENULABEL_RESET HOME AUTOCONNECT_MENULABEL_HOME Update AUTOCONNECT_MENULABEL_UPDATE Device info AUTOCONNECT_MENULABEL_DEVINFO Button label RESET AUTOCONNECT_BUTTONLABEL_RESET UPDATE AUTOCONNECT_BUTTONLABEL_UPDATE Page title Page not found AUTOCONNECT_PAGETITLE_NOTFOUND AutoConnect config AUTOCONNECT_PAGETITLE_CONFIG AutoConnect connecting AUTOCONNECT_PAGETITLE_CONNECTING AutoConnect connection failed AUTOCONNECT_PAGETITLE_CONNECTIONFAILED AutoConnect credentials AUTOCONNECT_PAGETITLE_CREDENTIALS AutoConnect disconnected AUTOCONNECT_PAGETITLE_DISCONNECTED AutoConnect resetting AUTOCONNECT_PAGETITLE_RESETTING AutoConnect statistics AUTOCONNECT_PAGETITLE_STATISTICS Page:[statistics] row Established connection AUTOCONNECT_PAGESTATS_ESTABLISHEDCONNECTION Mode AUTOCONNECT_PAGESTATS_MODE IP AUTOCONNECT_PAGESTATS_IP GW AUTOCONNECT_PAGESTATS_GATEWAY Subnet mask AUTOCONNECT_PAGESTATS_SUBNETMASK SoftAP IP AUTOCONNECT_PAGESTATS_SOFTAPIP AP MAC AUTOCONNECT_PAGESTATS_APMAC STA MAC AUTOCONNECT_PAGESTATS_STAMAC Channel AUTOCONNECT_PAGESTATS_CHANNEL dBm AUTOCONNECT_PAGESTATS_DBM Chip ID AUTOCONNECT_PAGESTATS_CHIPID CPU Freq. AUTOCONNECT_PAGESTATS_CPUFREQ Flash size AUTOCONNECT_PAGESTATS_FLASHSIZE Free memory AUTOCONNECT_PAGESTATS_FREEMEM Page:[config] text Total: AUTOCONNECT_PAGECONFIG_TOTAL Hidden: AUTOCONNECT_PAGECONFIG_HIDDEN SSID AUTOCONNECT_PAGECONFIG_SSID Passphrase AUTOCONNECT_PAGECONFIG_PASSPHRASE Enable DHCP AUTOCONNECT_PAGECONFIG_ENABLEDHCP Apply AUTOCONNECT_PAGECONFIG_APPLY Page:[update] text Updating firmware AUTOCONNECT_TEXT_UPDATINGFIRMWARE Select firmware: AUTOCONNECT_TEXT_SELECTFIRMWARE Successfully updated, rebooting... AUTOCONNECT_TEXT_OTASUCCESS Failed to update: AUTOCONNECT_TEXT_OTAFAILURE Page:[connection failed] Connection Failed AUTOCONNECT_PAGECONNECTIONFAILED_CONNECTIONFAILED Text No saved credentials. AUTOCONNECT_TEXT_NOSAVEDCREDENTIALS Menu Text Connecting AUTOCONNECT_MENUTEXT_CONNECTING Disconnect AUTOCONNECT_MENUTEXT_DISCONNECT Failed AUTOCONNECT_MENUTEXT_FAILED The definition of label text must conform to a certain coding pattern. Undefine with #undef the #define directive corresponding to the above IDs, and then redefine the ID with the replacement text. And surround it with #ifdef ~ #endif . #ifdef AUTOCONNECT_MENULABEL_CONFIGNEW #undef AUTOCONNECT_MENULABEL_CONFIGNEW #define AUTOCONNECT_MENULABEL_CONFIGNEW \"NEW_STRING_YOU_WISH\" #endif You may not need to rewrite all definitions. It depends on your wishes and is sufficient that the above the include file contains only the labels you need. Configuration of platformio.ini \u00b6 You prepare its header file and place it in the src folder of the project folder. You can name the file whatever you like, but for the sake of explanation, let's say mylabels.h . When you store mylabels.h containing the new label text definition in the src folder, your Arduino project folder structure should look like this: < Project folder > |-- < pio > |-- < . vscode > |-- < include > |-- < lib > |-- < src > | |-- main . cpp | |-- mylabels . h <-- Depends on the project |-- < test > |-- . gitignore |-- . travis . yml |-- platformio . ini Then, open platformio.ini file and add new build_flags for including mylabels.h to override the label text. build_flags = -DAC_LABELS='\"${PROJECT_SRC_DIR}/mylabels.h\"' Just change the mylabels.h Keep -DAC_LABELS='\"${PROJECT_SRC_DIR}/YOUR_FILE_NAME\"' when changing the above build_flags item to match your labels header file name. After placing the mylabels.h file and add the build_flags , build the project with the replaced label text. You will see the AutoConnect screen with the new text replaced by mylabels.h . Need clean-up before re-build with updated mylabels.h When you have updated mylabels.h , you need deleting compiled library object files before build. Use Clean of a PlatformIO task on VSCode status bar.","title":"Change label text"},{"location":"changelabel.html#change-the-items-label-text","text":"You can change the text of AutoConnect menu items. The easiest way is to rewrite the header file directly in the library that defines the menu label. Advanced Usage section describes the detailed how to change the label text directly. However, this way is less preferred as it modifies the library code and further affects the entire Arduino project you compile. So, here's how to change the label text for each Arduino project without directly modifying the library code. Using this method, you can also display the label text and fixed text on AutoConnect pages in your national language. (e.g. in Japanese)","title":"Change the item's label text"},{"location":"changelabel.html#preparation","text":"AutoConnect needs a definition file as c++ header (.h) to change the label text. It is used when your Arduino project is compiled, and there is no additional memory consumption due to changing the label text. This header file describes each fixed text of AutoConnect with the #define preprocessor directive. The next thing you need is PlatformIO . PlatformIO is a very powerful environment for embedded development with multi-platform and multi-architecture build systems. And you can easily set up a PlatformIO for the Arduino development system as follows on your host machine. Microsoft Visual Studio Code PlatformIO IDE (included PlatformIO core) Install PlatformIO and VSCode Please refer to the official documentation for PlatformIO and VSCode installation. The rest of this section assumes that you have a PlatformIO environment with VSCode as the front end that has installed on your host machine.","title":"Preparation"},{"location":"changelabel.html#how-to-change-the-label-text","text":"","title":"How to change the label text"},{"location":"changelabel.html#label-text-replacement-header-file","text":"AutoConnect label texts are pre-assigned with a fixed string so that it can be determined at compile time. Their default definitions are in the AutoConnectLabels.h file that has all the replaceable label text defined by the #define directive. Label placed Pre-defined text ID (#define macro) Menu item Configure new AP AUTOCONNECT_MENULABEL_CONFIGNEW Open SSIDs AUTOCONNECT_MENULABEL_OPENSSIDS Disconnect AUTOCONNECT_MENULABEL_DISCONNECT Reset... AUTOCONNECT_MENULABEL_RESET HOME AUTOCONNECT_MENULABEL_HOME Update AUTOCONNECT_MENULABEL_UPDATE Device info AUTOCONNECT_MENULABEL_DEVINFO Button label RESET AUTOCONNECT_BUTTONLABEL_RESET UPDATE AUTOCONNECT_BUTTONLABEL_UPDATE Page title Page not found AUTOCONNECT_PAGETITLE_NOTFOUND AutoConnect config AUTOCONNECT_PAGETITLE_CONFIG AutoConnect connecting AUTOCONNECT_PAGETITLE_CONNECTING AutoConnect connection failed AUTOCONNECT_PAGETITLE_CONNECTIONFAILED AutoConnect credentials AUTOCONNECT_PAGETITLE_CREDENTIALS AutoConnect disconnected AUTOCONNECT_PAGETITLE_DISCONNECTED AutoConnect resetting AUTOCONNECT_PAGETITLE_RESETTING AutoConnect statistics AUTOCONNECT_PAGETITLE_STATISTICS Page:[statistics] row Established connection AUTOCONNECT_PAGESTATS_ESTABLISHEDCONNECTION Mode AUTOCONNECT_PAGESTATS_MODE IP AUTOCONNECT_PAGESTATS_IP GW AUTOCONNECT_PAGESTATS_GATEWAY Subnet mask AUTOCONNECT_PAGESTATS_SUBNETMASK SoftAP IP AUTOCONNECT_PAGESTATS_SOFTAPIP AP MAC AUTOCONNECT_PAGESTATS_APMAC STA MAC AUTOCONNECT_PAGESTATS_STAMAC Channel AUTOCONNECT_PAGESTATS_CHANNEL dBm AUTOCONNECT_PAGESTATS_DBM Chip ID AUTOCONNECT_PAGESTATS_CHIPID CPU Freq. AUTOCONNECT_PAGESTATS_CPUFREQ Flash size AUTOCONNECT_PAGESTATS_FLASHSIZE Free memory AUTOCONNECT_PAGESTATS_FREEMEM Page:[config] text Total: AUTOCONNECT_PAGECONFIG_TOTAL Hidden: AUTOCONNECT_PAGECONFIG_HIDDEN SSID AUTOCONNECT_PAGECONFIG_SSID Passphrase AUTOCONNECT_PAGECONFIG_PASSPHRASE Enable DHCP AUTOCONNECT_PAGECONFIG_ENABLEDHCP Apply AUTOCONNECT_PAGECONFIG_APPLY Page:[update] text Updating firmware AUTOCONNECT_TEXT_UPDATINGFIRMWARE Select firmware: AUTOCONNECT_TEXT_SELECTFIRMWARE Successfully updated, rebooting... AUTOCONNECT_TEXT_OTASUCCESS Failed to update: AUTOCONNECT_TEXT_OTAFAILURE Page:[connection failed] Connection Failed AUTOCONNECT_PAGECONNECTIONFAILED_CONNECTIONFAILED Text No saved credentials. AUTOCONNECT_TEXT_NOSAVEDCREDENTIALS Menu Text Connecting AUTOCONNECT_MENUTEXT_CONNECTING Disconnect AUTOCONNECT_MENUTEXT_DISCONNECT Failed AUTOCONNECT_MENUTEXT_FAILED The definition of label text must conform to a certain coding pattern. Undefine with #undef the #define directive corresponding to the above IDs, and then redefine the ID with the replacement text. And surround it with #ifdef ~ #endif . #ifdef AUTOCONNECT_MENULABEL_CONFIGNEW #undef AUTOCONNECT_MENULABEL_CONFIGNEW #define AUTOCONNECT_MENULABEL_CONFIGNEW \"NEW_STRING_YOU_WISH\" #endif You may not need to rewrite all definitions. It depends on your wishes and is sufficient that the above the include file contains only the labels you need.","title":"Label text replacement header file"},{"location":"changelabel.html#configuration-of-platformioini","text":"You prepare its header file and place it in the src folder of the project folder. You can name the file whatever you like, but for the sake of explanation, let's say mylabels.h . When you store mylabels.h containing the new label text definition in the src folder, your Arduino project folder structure should look like this: < Project folder > |-- < pio > |-- < . vscode > |-- < include > |-- < lib > |-- < src > | |-- main . cpp | |-- mylabels . h <-- Depends on the project |-- < test > |-- . gitignore |-- . travis . yml |-- platformio . ini Then, open platformio.ini file and add new build_flags for including mylabels.h to override the label text. build_flags = -DAC_LABELS='\"${PROJECT_SRC_DIR}/mylabels.h\"' Just change the mylabels.h Keep -DAC_LABELS='\"${PROJECT_SRC_DIR}/YOUR_FILE_NAME\"' when changing the above build_flags item to match your labels header file name. After placing the mylabels.h file and add the build_flags , build the project with the replaced label text. You will see the AutoConnect screen with the new text replaced by mylabels.h . Need clean-up before re-build with updated mylabels.h When you have updated mylabels.h , you need deleting compiled library object files before build. Use Clean of a PlatformIO task on VSCode status bar.","title":"Configuration of platformio.ini"},{"location":"changelog.html","text":"[1.3.2] Jan. 1, 2022 \u00b6 Enhancements \u00b6 Supports an AutoConnectRange as a new AutoConnectElement. Adds the responsive parameter with AutoConnectAux. Adds an AutoConnectAux::redirect function. Adds an example for using AutoConnect with the ESP32 camera driver as WebCamServer. Fix \u00b6 Fixed an issue where a password is lost when SoftAP is stopped. [1.3.1] Oct. 09, 2021 \u00b6 Fixes \u00b6 Fixed an issue that was incompatible with ArduinoJson version 5. Fixed LittleFS mount check not working with ESP32. Fixed autoReconnect not being able to restore a static IP setting. Fixed that static IP settings were not cleared when loading credential. [1.3.0] Sep. 25, 2021 \u00b6 Enhancements \u00b6 Supports ESP8266 3.0.0 Arduino core. Supports ESP32 Arduino core 2.0.0. Supports LittleFS with ESP32. Supports AutoConnectOTA status notifications. Supports AutoConnectConfigAux. (Preview) Supports to save credentials always. Adds a style attribute with AutoConnectInput. Adds the div tag generation with the AutoConnectElement. Adds [] operator with const char for AutoConnectAux. Adds [] operator with __FlashStringHelper for AutoConnectAux. Adds AutoConnectAux::content function to get a number of AutoConnectElements. Adds AutoConnect::getConfig function to get an actual instance of AutoConnectConfig. Fixes \u00b6 Fixed CSS attribute missing of AutoConnectInput with the number type. Fixed garbage being mixed in a loaded credential. Fixed the output place of Posterior attribute for AutoConnectRadio. Improved the the calculation for the size of ArduinoJson document. Fixed Incomplete deletion with AutoConnectCredential. Fixed credentials not erased correctly. Fixed AutoConnectText posterior being unavailable. [1.2.3] Jan. 3, 2021 \u00b6 Enhancements \u00b6 Improved memory management. PageBuilder v1.5.0 is required Since AutoConnect v1.2.3, PageBuilder v1.5.0 or later is required. Please update PageBuilder to latest version. [1.2.2] Dec. 13, 2020 \u00b6 Fix \u00b6 Fixed an issue where OTA updates would crash on the ESP32 platform. (issue #284 ) With this fix, AUTOCONNECT_UPLOAD_ASFIRMWARE_USE_REGEXP must be enabled for regular expressions to be enabled in AUTOCONNECT_UPLOAD_ASFIRMWARE . [1.2.1] Dec. 5, 2020 \u00b6 Fix \u00b6 Fixed that not declared error with AUTOCONNECT_NOUSE_JSON . (issue #282 ) [1.2.0] Dec. 3, 2020 \u00b6 New features \u00b6 Supports a whileCaptivePortal exit. (issue #149 , issue #244 ) Supports an onConnect exit. Supports HTTP authentication . (issue #171 ) Enhancements \u00b6 Added AUTOCONNECT_APKEY_SSID definition to seek access points by SSID . (issue #251 ) Added AutoConnect::append and AutoConnect::detach function that can be dynamically AutoConnectAux attaching and detaching. (issue #230 ) Added AutoConnect::getEEPROMUsedSize that notifies the occupied size of the credential storage area. (issue #209 ) Added AutoConnectConfig::beginTimeout setting. (issue #247 ) Added AutoConnectConfig::preserveAPMode setting. (issue #210 ) Enable support for the LittleFS as filesystem with ESP8266 platform. Enhanced AutoConnectInput to allow accepts password and number type. (issue #237 , issue #255 ) Enhanced handleClient to dynamically launch the captive portal when losing WiFi connection. Enhanced the ability to upload a regular file with AutoConnectOTA . (issue #236 ) Enhanced ticker to work even in handleClient loop. Improved autoReconnect to work even in handleClient loop. (issue #234 , issue #251 ) Fixes \u00b6 Avoids an empty-body warning when AC_DEBUG is disabled. (issue #218 ) Fixed a core panic in the regex with ESP32. Fixed an exception in the AutoConnect::end function. Fixed an invalid SPIFFS compile error with ESP32. Fixed deficiently forward references with HandleClient.ino example. (PR #275 ) Fixed incorrect connection wait time. (issue #216 ) Fixed not being able to specify channel ID with a mqttRSSI.ino example. (issue #262 ) Fixed posterior being disabled in AutoConnectElement. [1.1.7] Apr. 19, 2020 \u00b6 Fixes \u00b6 Fixed Apply button not work. [1.1.6] Apr. 17, 2020 \u00b6 Fixes \u00b6 Fixed OTA page translation not work. [1.1.5] Apr. 15, 2020 \u00b6 New features \u00b6 Supports AutoConnect menu configuration . Supports the built-in OTA feature as AutoConnectOTA . Enhancements \u00b6 Enhanced allows the AutoConnect::begin to connect to the access point in order of signal strength. This option can specify the order of connection attempting according to the WiFi signal strength indicated with RSSI. Changed the bootUri behavior to be an automatic pop-up at the captive portal. [1.1.4] Feb. 14, 2020 \u00b6 New features \u00b6 Supports for overriding text of the menu items with user-defined labels. Fixes \u00b6 Fixed the compiler warning with experimental WiFi mode of ESP8266. [1.1.3] Jan. 1, 2020 \u00b6 Enhancements \u00b6 Improved Config New button behavior. Added AUTOCONNECT_NOUSE_JSON directive Fixes \u00b6 Fixed relocate Config New menu URI inability. Removed compiler warning of unused. [1.1.2] Oct. 22, 2019 \u00b6 Fixes \u00b6 Fixed a crash when no SSID found. Fixed memory leak on destruction. [1.1.1] Oct. 17, 2019 \u00b6 Fixes \u00b6 Fixed crash with unique_ptr deleting reference content. Fixed disconnection request initialization missing. [1.1.0] Oct. 15, 2019 \u00b6 Enhancements \u00b6 Enhanced to be able to specify static IP in the Configure new AP menu. Fixes \u00b6 Fixed compilation error that no member named 'printTo' with ArduinoJson version 5. [1.0.3] Sept. 30, 2019 \u00b6 Fixes \u00b6 Fixed a return of AutoConnectCredential::entries(). [1.0.2] Sept. 19, 2019 \u00b6 Fixes \u00b6 Fixed compilation error that no member named 'success' with ArduinoJson version 5. Fixed SSID non termination. Fixed compilation error that getBytesLength missing with ESP32. Added #include directive restriction for EEPROM and ESP8266httpUpdate to FAQ. [1.0.1] Sept. 13, 2019 \u00b6 Enhancements \u00b6 Added an example sketch for ESP32 boards that migrates credentials stored in EEPROM partition to the Preferences. [1.0.0] Sept. 7, 2019 \u00b6 New features \u00b6 Supports AutoConnectUpdate for the OTA update . Enhancements \u00b6 Supported Arduino core for ESP32 1.0.3. Added AutoConnectAux::isValid function. Added the global attribute with all AutoConnectElements. Changed the credential storage area to Preferences with ESP32 core 1.0.3 and later. In ESP32, the credentials stored past in EEPROM will lose . [0.9.12] Aug. 18, 2019 \u00b6 Fixes \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 New features \u00b6 Supports new element as AutoConnectSytle that can insert the custom CSS into AutoConnectAux page. Enhancements \u00b6 Supports that <br> tags can now be added to each element. Supports that able to place the checkbox label forward or backward. Supports flicker signal output according to the status of WiFi_mode. Supports AutoConnectAux::fetchElement function to retrieve inputted element values via a custom Web page. Fixes \u00b6 Fixed bug in AutoConnectCredential when offset is >256. [0.9.10] June 12, 2019 \u00b6 Fixes \u00b6 Fixed the unable to get AutoConnectElemets values \u200b\u200bin the sketch with ESP8266 arduino core 2.5.2. [0.9.9] May 25, 2019 \u00b6 Enhancements \u00b6 Supports ESP8266 Arduino core 2.5.2. Menu text/background color can be statically customized. Added the enable attribute to the AutoConnectElements. This attribute gives dynamically change to the element activation during the sketch executing. Added ID attribute to HTML tag generated from AutoConnectText. Fixes \u00b6 Fixed the input box layout collapsed. Fixed that the decoration of AutoConnectButton was disabled. Fixed that the value remains even after clearing the option with AutoConnectSelect. Fixed that an alignment violation exception occurred when loading AutoConnectAux described by JSON with PROGMEM attribute. [0.9.8] May 3, 2019 \u00b6 New features \u00b6 Supports new element type AutoConnectFile and built-in file uploader. Enhancements \u00b6 Enhanced to support ArduinoJson 6.9.1 or later. Enhanced to use PSRAM on ESP32 module as the buffer allocation destination of JsonDocument with ArduinoJson 6.10.0 or later. Added an operator [] as a shortcut for AutoConnectAux::getElement function. Added an AutoConnectElement::as<T> function to easily coding for conversion from an AutoConnectElement to an actual type. Added a format attribute with the AutoConnectText element. Added a selected attribute with the AutoConnectSelect element. Enhanced AutoConnectAux::loadElement with multiple elements loading. Changed menu labels placement in source files structure. Changed API interface of AutoConnect::where function. Fixes \u00b6 Fixed blank page responds with Configure new. Fixed loading elements value missing. Fixed losing elements in saveElement with ArduinoJson version 6. Fixed compile error with older than ESP8266 core 2.5.0. [0.9.7] Jan. 25, 2019 \u00b6 New features \u00b6 Supports AutoConnect menu extension by user sketch with AutoConnectAux . Supports loading and saving of user-defined parameters with JSON format. Enhancements \u00b6 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. Added 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 . Added AutoConnectConfig::hostName . It activates WiFi.hostname() / WiFi.setHostName() . Added the captive portal time-out. It can be controlled by AutoConnectConfig::portalTimeout and AutoConnectConfig::retainPortal . Fixes \u00b6 Fixed crash in some environments. Thank you @ageurtse [0.9.6] Sept.27, 2018. \u00b6 Enhancements \u00b6 Improvement of RSSI detection for saved SSIDs. Fixes \u00b6 Fixed disconnection SoftAP completely at the first connection phase of the AutoConnect::begin . [0.9.5] Aug.27, 2018. \u00b6 Enhancements \u00b6 Supports ESP32. Fixes \u00b6 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 New features \u00b6 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. Enhancements \u00b6 Automatically focus Passphrase after selecting SSID with Configure New AP. [0.9.3] March 23, 2018. \u00b6 Enhancements \u00b6 Supports a static IP address assignment. [0.9.2] March 19, 2018. \u00b6 Enhancements \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#132-jan-1-2022","text":"","title":"[1.3.2] Jan. 1, 2022"},{"location":"changelog.html#enhancements","text":"Supports an AutoConnectRange as a new AutoConnectElement. Adds the responsive parameter with AutoConnectAux. Adds an AutoConnectAux::redirect function. Adds an example for using AutoConnect with the ESP32 camera driver as WebCamServer.","title":"Enhancements"},{"location":"changelog.html#fix","text":"Fixed an issue where a password is lost when SoftAP is stopped.","title":"Fix"},{"location":"changelog.html#131-oct-09-2021","text":"","title":"[1.3.1] Oct. 09, 2021"},{"location":"changelog.html#fixes","text":"Fixed an issue that was incompatible with ArduinoJson version 5. Fixed LittleFS mount check not working with ESP32. Fixed autoReconnect not being able to restore a static IP setting. Fixed that static IP settings were not cleared when loading credential.","title":"Fixes"},{"location":"changelog.html#130-sep-25-2021","text":"","title":"[1.3.0] Sep. 25, 2021"},{"location":"changelog.html#enhancements_1","text":"Supports ESP8266 3.0.0 Arduino core. Supports ESP32 Arduino core 2.0.0. Supports LittleFS with ESP32. Supports AutoConnectOTA status notifications. Supports AutoConnectConfigAux. (Preview) Supports to save credentials always. Adds a style attribute with AutoConnectInput. Adds the div tag generation with the AutoConnectElement. Adds [] operator with const char for AutoConnectAux. Adds [] operator with __FlashStringHelper for AutoConnectAux. Adds AutoConnectAux::content function to get a number of AutoConnectElements. Adds AutoConnect::getConfig function to get an actual instance of AutoConnectConfig.","title":"Enhancements"},{"location":"changelog.html#fixes_1","text":"Fixed CSS attribute missing of AutoConnectInput with the number type. Fixed garbage being mixed in a loaded credential. Fixed the output place of Posterior attribute for AutoConnectRadio. Improved the the calculation for the size of ArduinoJson document. Fixed Incomplete deletion with AutoConnectCredential. Fixed credentials not erased correctly. Fixed AutoConnectText posterior being unavailable.","title":"Fixes"},{"location":"changelog.html#123-jan-3-2021","text":"","title":"[1.2.3] Jan. 3, 2021"},{"location":"changelog.html#enhancements_2","text":"Improved memory management. PageBuilder v1.5.0 is required Since AutoConnect v1.2.3, PageBuilder v1.5.0 or later is required. Please update PageBuilder to latest version.","title":"Enhancements"},{"location":"changelog.html#122-dec-13-2020","text":"","title":"[1.2.2] Dec. 13, 2020"},{"location":"changelog.html#fix_1","text":"Fixed an issue where OTA updates would crash on the ESP32 platform. (issue #284 ) With this fix, AUTOCONNECT_UPLOAD_ASFIRMWARE_USE_REGEXP must be enabled for regular expressions to be enabled in AUTOCONNECT_UPLOAD_ASFIRMWARE .","title":"Fix"},{"location":"changelog.html#121-dec-5-2020","text":"","title":"[1.2.1] Dec. 5, 2020"},{"location":"changelog.html#fix_2","text":"Fixed that not declared error with AUTOCONNECT_NOUSE_JSON . (issue #282 )","title":"Fix"},{"location":"changelog.html#120-dec-3-2020","text":"","title":"[1.2.0] Dec. 3, 2020"},{"location":"changelog.html#new-features","text":"Supports a whileCaptivePortal exit. (issue #149 , issue #244 ) Supports an onConnect exit. Supports HTTP authentication . (issue #171 )","title":"New features"},{"location":"changelog.html#enhancements_3","text":"Added AUTOCONNECT_APKEY_SSID definition to seek access points by SSID . (issue #251 ) Added AutoConnect::append and AutoConnect::detach function that can be dynamically AutoConnectAux attaching and detaching. (issue #230 ) Added AutoConnect::getEEPROMUsedSize that notifies the occupied size of the credential storage area. (issue #209 ) Added AutoConnectConfig::beginTimeout setting. (issue #247 ) Added AutoConnectConfig::preserveAPMode setting. (issue #210 ) Enable support for the LittleFS as filesystem with ESP8266 platform. Enhanced AutoConnectInput to allow accepts password and number type. (issue #237 , issue #255 ) Enhanced handleClient to dynamically launch the captive portal when losing WiFi connection. Enhanced the ability to upload a regular file with AutoConnectOTA . (issue #236 ) Enhanced ticker to work even in handleClient loop. Improved autoReconnect to work even in handleClient loop. (issue #234 , issue #251 )","title":"Enhancements"},{"location":"changelog.html#fixes_2","text":"Avoids an empty-body warning when AC_DEBUG is disabled. (issue #218 ) Fixed a core panic in the regex with ESP32. Fixed an exception in the AutoConnect::end function. Fixed an invalid SPIFFS compile error with ESP32. Fixed deficiently forward references with HandleClient.ino example. (PR #275 ) Fixed incorrect connection wait time. (issue #216 ) Fixed not being able to specify channel ID with a mqttRSSI.ino example. (issue #262 ) Fixed posterior being disabled in AutoConnectElement.","title":"Fixes"},{"location":"changelog.html#117-apr-19-2020","text":"","title":"[1.1.7] Apr. 19, 2020"},{"location":"changelog.html#fixes_3","text":"Fixed Apply button not work.","title":"Fixes"},{"location":"changelog.html#116-apr-17-2020","text":"","title":"[1.1.6] Apr. 17, 2020"},{"location":"changelog.html#fixes_4","text":"Fixed OTA page translation not work.","title":"Fixes"},{"location":"changelog.html#115-apr-15-2020","text":"","title":"[1.1.5] Apr. 15, 2020"},{"location":"changelog.html#new-features_1","text":"Supports AutoConnect menu configuration . Supports the built-in OTA feature as AutoConnectOTA .","title":"New features"},{"location":"changelog.html#enhancements_4","text":"Enhanced allows the AutoConnect::begin to connect to the access point in order of signal strength. This option can specify the order of connection attempting according to the WiFi signal strength indicated with RSSI. Changed the bootUri behavior to be an automatic pop-up at the captive portal.","title":"Enhancements"},{"location":"changelog.html#114-feb-14-2020","text":"","title":"[1.1.4] Feb. 14, 2020"},{"location":"changelog.html#new-features_2","text":"Supports for overriding text of the menu items with user-defined labels.","title":"New features"},{"location":"changelog.html#fixes_5","text":"Fixed the compiler warning with experimental WiFi mode of ESP8266.","title":"Fixes"},{"location":"changelog.html#113-jan-1-2020","text":"","title":"[1.1.3] Jan. 1, 2020"},{"location":"changelog.html#enhancements_5","text":"Improved Config New button behavior. Added AUTOCONNECT_NOUSE_JSON directive","title":"Enhancements"},{"location":"changelog.html#fixes_6","text":"Fixed relocate Config New menu URI inability. Removed compiler warning of unused.","title":"Fixes"},{"location":"changelog.html#112-oct-22-2019","text":"","title":"[1.1.2] Oct. 22, 2019"},{"location":"changelog.html#fixes_7","text":"Fixed a crash when no SSID found. Fixed memory leak on destruction.","title":"Fixes"},{"location":"changelog.html#111-oct-17-2019","text":"","title":"[1.1.1] Oct. 17, 2019"},{"location":"changelog.html#fixes_8","text":"Fixed crash with unique_ptr deleting reference content. Fixed disconnection request initialization missing.","title":"Fixes"},{"location":"changelog.html#110-oct-15-2019","text":"","title":"[1.1.0] Oct. 15, 2019"},{"location":"changelog.html#enhancements_6","text":"Enhanced to be able to specify static IP in the Configure new AP menu.","title":"Enhancements"},{"location":"changelog.html#fixes_9","text":"Fixed compilation error that no member named 'printTo' with ArduinoJson version 5.","title":"Fixes"},{"location":"changelog.html#103-sept-30-2019","text":"","title":"[1.0.3] Sept. 30, 2019"},{"location":"changelog.html#fixes_10","text":"Fixed a return of AutoConnectCredential::entries().","title":"Fixes"},{"location":"changelog.html#102-sept-19-2019","text":"","title":"[1.0.2] Sept. 19, 2019"},{"location":"changelog.html#fixes_11","text":"Fixed compilation error that no member named 'success' with ArduinoJson version 5. Fixed SSID non termination. Fixed compilation error that getBytesLength missing with ESP32. Added #include directive restriction for EEPROM and ESP8266httpUpdate to FAQ.","title":"Fixes"},{"location":"changelog.html#101-sept-13-2019","text":"","title":"[1.0.1] Sept. 13, 2019"},{"location":"changelog.html#enhancements_7","text":"Added an example sketch for ESP32 boards that migrates credentials stored in EEPROM partition to the Preferences.","title":"Enhancements"},{"location":"changelog.html#100-sept-7-2019","text":"","title":"[1.0.0] Sept. 7, 2019"},{"location":"changelog.html#new-features_3","text":"Supports AutoConnectUpdate for the OTA update .","title":"New features"},{"location":"changelog.html#enhancements_8","text":"Supported Arduino core for ESP32 1.0.3. Added AutoConnectAux::isValid function. Added the global attribute with all AutoConnectElements. Changed the credential storage area to Preferences with ESP32 core 1.0.3 and later. In ESP32, the credentials stored past in EEPROM will lose .","title":"Enhancements"},{"location":"changelog.html#0912-aug-18-2019","text":"","title":"[0.9.12] Aug. 18, 2019"},{"location":"changelog.html#fixes_12","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":"Fixes"},{"location":"changelog.html#0911-july-13-2019","text":"","title":"[0.9.11] July 13, 2019"},{"location":"changelog.html#new-features_4","text":"Supports new element as AutoConnectSytle that can insert the custom CSS into AutoConnectAux page.","title":"New features"},{"location":"changelog.html#enhancements_9","text":"Supports that <br> tags can now be added to each element. Supports that able to place the checkbox label forward or backward. Supports flicker signal output according to the status of WiFi_mode. Supports AutoConnectAux::fetchElement function to retrieve inputted element values via a custom Web page.","title":"Enhancements"},{"location":"changelog.html#fixes_13","text":"Fixed bug in AutoConnectCredential when offset is >256.","title":"Fixes"},{"location":"changelog.html#0910-june-12-2019","text":"","title":"[0.9.10] June 12, 2019"},{"location":"changelog.html#fixes_14","text":"Fixed the unable to get AutoConnectElemets values \u200b\u200bin the sketch with ESP8266 arduino core 2.5.2.","title":"Fixes"},{"location":"changelog.html#099-may-25-2019","text":"","title":"[0.9.9] May 25, 2019"},{"location":"changelog.html#enhancements_10","text":"Supports ESP8266 Arduino core 2.5.2. Menu text/background color can be statically customized. Added the enable attribute to the AutoConnectElements. This attribute gives dynamically change to the element activation during the sketch executing. Added ID attribute to HTML tag generated from AutoConnectText.","title":"Enhancements"},{"location":"changelog.html#fixes_15","text":"Fixed the input box layout collapsed. Fixed that the decoration of AutoConnectButton was disabled. Fixed that the value remains even after clearing the option with AutoConnectSelect. Fixed that an alignment violation exception occurred when loading AutoConnectAux described by JSON with PROGMEM attribute.","title":"Fixes"},{"location":"changelog.html#098-may-3-2019","text":"","title":"[0.9.8] May 3, 2019"},{"location":"changelog.html#new-features_5","text":"Supports new element type AutoConnectFile and built-in file uploader.","title":"New features"},{"location":"changelog.html#enhancements_11","text":"Enhanced to support ArduinoJson 6.9.1 or later. Enhanced to use PSRAM on ESP32 module as the buffer allocation destination of JsonDocument with ArduinoJson 6.10.0 or later. Added an operator [] as a shortcut for AutoConnectAux::getElement function. Added an AutoConnectElement::as<T> function to easily coding for conversion from an AutoConnectElement to an actual type. Added a format attribute with the AutoConnectText element. Added a selected attribute with the AutoConnectSelect element. Enhanced AutoConnectAux::loadElement with multiple elements loading. Changed menu labels placement in source files structure. Changed API interface of AutoConnect::where function.","title":"Enhancements"},{"location":"changelog.html#fixes_16","text":"Fixed blank page responds with Configure new. Fixed loading elements value missing. Fixed losing elements in saveElement with ArduinoJson version 6. Fixed compile error with older than ESP8266 core 2.5.0.","title":"Fixes"},{"location":"changelog.html#097-jan-25-2019","text":"","title":"[0.9.7] Jan. 25, 2019"},{"location":"changelog.html#new-features_6","text":"Supports AutoConnect menu extension by user sketch with AutoConnectAux . Supports loading and saving of user-defined parameters with JSON format.","title":"New features"},{"location":"changelog.html#enhancements_12","text":"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. Added 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 . Added AutoConnectConfig::hostName . It activates WiFi.hostname() / WiFi.setHostName() . Added the captive portal time-out. It can be controlled by AutoConnectConfig::portalTimeout and AutoConnectConfig::retainPortal .","title":"Enhancements"},{"location":"changelog.html#fixes_17","text":"Fixed crash in some environments. Thank you @ageurtse","title":"Fixes"},{"location":"changelog.html#096-sept27-2018","text":"","title":"[0.9.6] Sept.27, 2018."},{"location":"changelog.html#enhancements_13","text":"Improvement of RSSI detection for saved SSIDs.","title":"Enhancements"},{"location":"changelog.html#fixes_18","text":"Fixed disconnection SoftAP completely at the first connection phase of the AutoConnect::begin .","title":"Fixes"},{"location":"changelog.html#095-aug27-2018","text":"","title":"[0.9.5] Aug.27, 2018."},{"location":"changelog.html#enhancements_14","text":"Supports ESP32.","title":"Enhancements"},{"location":"changelog.html#fixes_19","text":"Fixed that crash may occur if the number of stored credentials in the EEPROM is smaller than the number of found WiFi networks.","title":"Fixes"},{"location":"changelog.html#094-may-5-2018","text":"","title":"[0.9.4] May 5, 2018."},{"location":"changelog.html#new-features_7","text":"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":"New features"},{"location":"changelog.html#enhancements_15","text":"Automatically focus Passphrase after selecting SSID with Configure New AP.","title":"Enhancements"},{"location":"changelog.html#093-march-23-2018","text":"","title":"[0.9.3] March 23, 2018."},{"location":"changelog.html#enhancements_16","text":"Supports a static IP address assignment.","title":"Enhancements"},{"location":"changelog.html#092-march-19-2018","text":"","title":"[0.9.2] March 19, 2018."},{"location":"changelog.html#enhancements_17","text":"Improvement of string literal declaration with the examples, no library change.","title":"Enhancements"},{"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 credentials of 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 the AutoConnectCredential , which provides the way of access to the credentials stored in 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 <AutoConnectCredential.h> 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, station_config_t * config) Load a credential entry and store to config . Parameters ssid SSID to be loaded. config station_config_t Return value Save the specified SSID's credential entry to station_config_t pointed to by the parameter as config . -1 is returned if the SSID is not saved. load \u00b6 bool load( int8_t entry, station_config_t * config) Load a credential entry and store to config . Parameters entry Specifies the index number based 0 to be loaded. config station_config_t Return value Save the specified credential entry to station_config_t pointed to by the parameter as config . -1 is returned if specified number is not saved. save \u00b6 bool save( const station_config_t * config) Save a credential entry. Parameter config station_config_t 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; station_config_t 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_t \u00b6 The saved credential structure is defined as station_config_t in the AcutoConnectCredential header file. typedef struct { uint8_t ssid[ 32 ]; uint8_t password[ 64 ]; uint8_t bssid[ 6 ]; uint8_t dhcp; /**< 0:DHCP, 1:Static IP */ union _config { uint32_t addr[ 5 ]; struct _sta { uint32_t ip; uint32_t gateway; uint32_t netmask; uint32_t dns1; uint32_t dns2; } sta; } config; } station_config_t; The byte size of station_config_t in program memory and stored credentials is different There is a gap byte for boundary alignment between the dhcp member and the static IP members of the above station_config_t . Its gap byte will be removed with saved credentials on the flash. 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 1 Flag for DHCP or Static IP (0:DHCP, 1:Static IP) The following IP address entries are stored only for static IPs. variable(1) 4 Station IP address (uint32_t) variable(5) 4 Gateway address (uint32_t) variable(9) 4 Netmask (uint32_t) variable(13) 4 Primary DNS address (uint32_t) variable(17) 4 Secondary DNS address (uint32_t) variable variable Contained the next entries. (Continuation SSID+Password+BSSID+DHCP flag+Static IPs(if exists)) variable 1 0x00. End of container. AutoConnectCredential has changed It was lost AutoConnectCredential backward compatibility. Credentials saved by AutoConnect v1.0.3 (or earlier) will not work properly with AutoConnect v1.1.0. You need to erase the flash of the ESP module using the esptool before the sketch uploading. esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash 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 credentials of 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 the AutoConnectCredential , which provides the way of access to the credentials stored in 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 <AutoConnectCredential.h>","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, station_config_t * config) Load a credential entry and store to config . Parameters ssid SSID to be loaded. config station_config_t Return value Save the specified SSID's credential entry to station_config_t 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, station_config_t * config) Load a credential entry and store to config . Parameters entry Specifies the index number based 0 to be loaded. config station_config_t Return value Save the specified credential entry to station_config_t 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 station_config_t * config) Save a credential entry. Parameter config station_config_t 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; station_config_t 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_t","text":"The saved credential structure is defined as station_config_t in the AcutoConnectCredential header file. typedef struct { uint8_t ssid[ 32 ]; uint8_t password[ 64 ]; uint8_t bssid[ 6 ]; uint8_t dhcp; /**< 0:DHCP, 1:Static IP */ union _config { uint32_t addr[ 5 ]; struct _sta { uint32_t ip; uint32_t gateway; uint32_t netmask; uint32_t dns1; uint32_t dns2; } sta; } config; } station_config_t; The byte size of station_config_t in program memory and stored credentials is different There is a gap byte for boundary alignment between the dhcp member and the static IP members of the above station_config_t . Its gap byte will be removed with saved credentials on the flash.","title":"  station_config_t"},{"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 1 Flag for DHCP or Static IP (0:DHCP, 1:Static IP) The following IP address entries are stored only for static IPs. variable(1) 4 Station IP address (uint32_t) variable(5) 4 Gateway address (uint32_t) variable(9) 4 Netmask (uint32_t) variable(13) 4 Primary DNS address (uint32_t) variable(17) 4 Secondary DNS address (uint32_t) variable variable Contained the next entries. (Continuation SSID+Password+BSSID+DHCP flag+Static IPs(if exists)) variable 1 0x00. End of container. AutoConnectCredential has changed It was lost AutoConnectCredential backward compatibility. Credentials saved by AutoConnect v1.0.3 (or earlier) will not work properly with AutoConnect v1.1.0. You need to erase the flash of the ESP module using the esptool before the sketch uploading. esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash 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 <TimeLib.h> 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> 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 <TimeLib.h> 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 &amp; 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> 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":"esp32cam.html","text":"What this example presents \u00b6 ESP-IDF is offering ESP32 Camera Driver as an interface to small image sensors that can work with ESP32. This driver supports a variety of popular image sensors, such as the OV2640, which has low power consumption and mega-pixel sensing capability. By reading through this chapter you will know how to make the sketch featuring a UI that looks like the followings. Of course, it has the convenience of AutoConnect as well. This example shows how to sketch the Web Camera Application that involves using AutoConnect together with the ESP32 Camera Driver. Why we can not use app_httpd.cpp together with AutoConnect \u00b6 The ESP32 library of the ESP32 Arduino core features a CameraWebServer.ino that includes an interface to drive the Camera Driver. The core process of the server-side of that sketch application is app_httpd.cpp , which consists of initializing and configuring the image sensor, configuring and capturing image frames, and sending the image frames through an internally started HTTP server . While Web UI provided by CameraWebServer.ino is sophisticated, the role of app_httpd.cpp is focused on responding to the Fetch required by the Web UI (which is actually an HTML page specific to each sensor model that is extracted from the gzipped camera_index.h ). It is a set of primitive functions that are integrated with the Web UI. Also, app_httpd.cpp has hardcoded the TCP port of the internally invoking HTTP server as fixed at 80, which conflicts with the HTTP port used by a typical captive portal. Therefore, It is impossible to apply app_httpd.cpp which has fixed 80 TCP port depending on the WebUI of CameraWebServer.ino to sketches using AutoConnect as it is. CameraWebServer.ino extended version available on GitHub An extended version of app_httpd.cpp is available on the GitHub repository to make it a bit more flexible for different usage scenarios. It also can handling the captive portal itself. Strategy \u00b6 As mentioned earlier, app_httpd.cpp is integrated with CameraWebServer.ino 's Web UI. However, its functionality can be separated into two parts: an interface for driving the image sensor correctly and sending the captured images on the HTTP stream as requested by the client. It also has the ability to configure the sensor settings over the network remotely, but this can be omitted at the expense of interactivity. (We can implement that feature after the initial purpose is achieved) So, I have prepared two separate classes with these functions. ESP32WebCam and ESP32Cam are independent classes inspired by app-httpd.cpp, and they can interface with the ESP32 Camera Driver individually, or send out motion JPEGs via an HTTP server task running inside the class. These two classes are completely independent of the AutoConnect library and can be incorporated into your various other sketches on their own. the source code for the ESP32WebCam and ESP32Cam classes can be found in the AutoConnect library examples and are distributed together. The API specifications for these two classes are described later in this chapter. Implementing a Streaming Server with ESP32-CAM using AutoConnect \u00b6 A minimal sketch that involves the ESP32WebCam and ESP32Cam classes and incorporates them together with AutoConnect is shown below. This sketch will work with Ai-Thinker ESP32-CAM , which is one of the most popular ESP32 modules with OmniVision OV2640 image sensor. In order to experience this sketch, copy the five files ESP32WebCam.h , ESP32WebCam.cpp , ESP32Cam.h , ESP32Cam.cpp , and ESP32Cam_pins.h from the WebCamServer folder located AutoConnect library examples to the same folder as the sketchbook folder where you placed this sketch. Connect the ESP32-CAM module to your PC and launch the Arduino IDE. Then select the correct board you using from the Tool menu of Arduino IDE and compile it. (Don't forget to open the serial monitor) #include <Arduino.h> #include <WiFi.h> #include <WebServer.h> #include <AutoConnect.h> #include \"ESP32WebCam.h\" const char CAMERA_VIEWER[] = R\"*( { \"title\": \"Camera\", \"uri\": \"/\", \"menu\": false, \"element\": [ { \"name\": \"viewport\", \"type\": \"ACText\", \"format\": \"<img src='http://%s'>\", \"posterior\": \"none\" }, { \"name\": \"discon\", \"type\": \"ACElement\", \"value\": \"<script>window.addEventListener('pagehide',function(){window.stop();});</script>\" } ] } )*\" ; // Declare ESP32-CAM handling interface. It contains ESP-IDF Web Server. ESP32WebCam webcam (ESP32Cam :: CAMERA_MODEL_AI_THINKER); // AutoConnect portal. It contains the WebServer from ESP32 Arduino Core. AutoConnect portal; AutoConnectConfig config; // AutoConnectAux page handler, it starts streaming by adding the ESP32WebCam // streaming endpoint to the src attribute of the img tag on the AutoConnectAux page. String viewer (AutoConnectAux & aux, PageArgument & args) { AutoConnectAux & viewer = * portal.aux( \"/\" ); // Set the Streaming server host, port, and endpoint viewer[ \"viewport\" ].value = WiFi.localIP().toString() + \":\" + String(webcam.getServerPort()) + String(webcam.getStreamPath()); return String(); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); // Start Image sensor if (webcam.sensorInit() != ESP_OK) { Serial.println( \"Camera initialize failed\" ); } // Allow automatic re-connection as long as the WiFi connection is established. config.autoReconnect = true; config.reconnectInterval = 1 ; portal.config(config); // Start the portal, it will launch the WebServer for the portal from inside of AutoConnect. if (portal.begin()) { portal.load(CAMERA_VIEWER); portal.on( \"/\" , viewer); // Start ESP32 Camera Web Server if (webcam.startCameraServer() == ESP_OK) { Serial.printf( \"ESP32WebCam server %s port %u ready \\n \" , WiFi.localIP().toString().c_str(), webcam.getServerPort()); } else { Serial.println( \"ESP32WebCam server start failed\" ); } } } void loop () { portal.handleClient(); } If your ESP32-CAM module still has no connection with any access point, a captive portal will open. Use your cellphone to connect the ESP32-CAM to the access point. When ESP32-CAM successfully connects to the access point, you will see the IP address on the serial monitor. You visit the IP address from your browser, you can see the image captured by the ESP32-CAM. Streaming stops caused by ERR_CONNECTION_RESET Sometimes the browser will throw the above error and the streaming will stop. In the simple sketch above, which does not include the transmission error recovery process, the TCP packet transmission is incomplete due to a weak WiFi signal or other reasons, and the browser will stop loading the image. Send errors can be recovered by incorporating an event handler into the img tag, and an example of its implementation is shown later in this chapter. Program structure \u00b6 The sketch of AutoConnect using ESP32WebCam and ESP32Cam classes is divided into several components, which will take a similar form in any sketch application. Their logical components are as follows: Include ESP32WebCam.h header file. #include \"ESP32WebCam.h\" AutoConnectAux defines a custom web page in JSON description. It includes an img tag that displays the captured image. The src attribute of the img tag is not hard-coded and can be dynamically set in a custom web page handler to make the sketch more applicable to various situations. { \"name\" : \"viewport\" , \"type\" : \"ACText\" , \"format\" : \"<img src='http://%s'>\" , \"posterior\" : \"none\" } Insert AutoConnectElement in the JSON description of your custom web page with JavaScript enclosed in <script>~</script> in HTML to stop streaming on page transition. window. addEventListener ( 'pagehide' , function () { window. stop (); }); Why window.stop() is needed That's because image streaming is achieved by continuous loading of Motion JPEG using HTTP multipart/x-mixed-replace keep-alive stream. With this type of MIME content, the server will continue to push the content unless the client explicitly notifies the server of the end of the session. The method of notifying the end of the session varies depending on the client browser, and by issuing window.stop() , the difference in the behavior of each browser is absorbed. Declare ESP32WebCam instance. It accompanies the parameters with the appropriate model specifiers. ESP32WebCam webcam (ESP32Cam :: CAMERA_MODEL_AI_THINKER); For details on identifiers that can be specified as image sensor models, please refer to the APIs described below. Declare AutoConnect instance. If your sketch requires a native web page that is not an AutoConnectAux, you can declare a WebServer instance at the same place to make it easier to call from functions in your sketch. AutoConnect portal; Declare AutoConnectConfig to control WiFi connection behavior if necessary. AutoConnectConfig config; Prepare an AutoConnectAux custom page handler for the declared above AutoConnectAux JSON. Typically, this handler is responsible for handling the ESP32Cam class via the endpoint interface provided by the ESP32Cam class. In the above sketch, we have only given the endpoint (i.e. http://{WiFi.localIP}:3000/_stream ) for streaming by the ESP32WebCam class as the src attribute of the img tag identified id=viewport , since we are focusing on the minimum necessary processing. ESP32WebCam class will deliver the captured image with just this operation. AutoConnectAux & viewer = * portal.aux( \"/\" ); viewer[ \"viewport\" ].value = WiFi.localIP().toString() + \":\" + String(webcam.getServerPort()) + String(webcam.getStreamPath()); For more information about ESP32Cam capability and ESP32WebCam endpoints, please refer to the Endpoint interfaces described below. Using AutoConnectText with format string In the sketch above, the format attribute of AutoConnectText is used to set the src attribute of the img tag. The AutoConnectText format attribute produces the same output as a C-style printf(format, value) , depending on the string that can be derived from the value. printf( \"<img src='http://%s'>\" , \"localhost:3000/_stream\" ); Start the sketch and initialize the camera using ESP32WebCam::sensorInit . ESP_OK will returned on success to initialize the image sensor. ESP32WebCam webcam (ESP32Cam :: CAMERA_MODEL_AI_THINKER); if (webcam.sensorInit() != ESP_OK) { Serial.println( \"Camera initialize failed\" ); } Configure WiFi state control to maintain connection. Usually, AutoConnectConfig::autoReconnect will keep WiFi connection stateful. config.autoReconnect = true; config.reconnectInterval = 1 ; portal.config(config); Start the portal, and load the view page. portal.begin(); portal.load(CAMERA_VIEWER); Register the view page handler and start the streaming server using ESP32WebCam::startCameraServer . ESP_OK will returned on start the streaming server successfully. portal.on( \"/\" , viewer); if (webcam.startCameraServer() == ESP_OK) { Serial.printf( \"ESP32WebCam server ready: %s \\n \" , WiFi.localIP().toString().c_str()); } else { Serial.println( \"ESP32WebCam server start failed\" ); } Loop for portal.handleClient(). The app_httpd.cpp , which is the core of CameraWebServer.ino 's functionality, has a mixture of an interface with the ESP32 Camera Driver and remote control over the network via an HTTP server . While it is highly functional, but it will cause a decline in versatility. ESP32WebCam and ESP32Cam separate the mixed functionality of app_httpd.cpp into two classes, each with a single role. This makes them versatile and simple to use. And they can coexist with AutoConnect. If you only need to stream from the image sensor, you can simplify the sketch structure as in the example above. The simplicity of the sketch is mainly due to the usefulness of the ESP32WebCam and ESP32Cam classes. In driving the ESP32 Camera Driver on the ESP32-CAM module, the sketch interfaces with the ESP32WebCam class and processes the ESP32Cam class through the ESP32WebCam endpoint interface. ESP32WebCam Class and ESP32Cam Class \u00b6 The ESP32WebCam class has an endpoint interface to allow the sketch to manipulate the image sensor over the network. The sketch can use HTTP GET method to capture images, stream the captured images, and save them to SD card. It also starts its own HTTP server task internally, and this HTTP server runs as a separate task from the WebServer hosted by AutoConnect. The ESP32Cam class is a wrapper that governs the native interface with the ESP32 Camera Driver which is a component of ESP-IDF. It can initialize the sensor, set the sensor characteristics, save and load the settings, and save the captured images to the SD card. In the case of accessing image sensors located across a network, the sketch will usually have a UI to remotely control the ESP32-CAM. If the UI is intended to be a web interface, the sketch will use a request handler that is compatible with the ESP32 WebServer hosted by AutoConnect to serve the manipulation web page. That page can be an AutoConnectAux-based custom web page, or it can be the RequestHanlder callback that can respond to the ESP32 WebServer class . In any case, those UI pages can remotely access the image sensor of the ESP32-CAM module through the HTTP endpoint interface deployed at a specific URL of the HTTP server launched by the ESP32WebCam class, and do the required processing. ESP32WebCam features: \u00b6 Run the HTTP server as a background task. Stream Motion JPEG via HTTP multipart/x-mixed-replace MIME. Serves a captured image via HTTP. Instruct the ESP32Cam to save the captured image to the SD card via HTTP. Of these processing requests, the ESP32Cam class is responsible for the ones that actually need to interface with the camera driver. (However, reading from the frame buffer is excluded. ESP32WebCam reads image data directly from the frame buffer of the image sensor without ESP32Cam.) The ESP32Cam class manipulates sensor characteristics, including setting image frame properties, image format settings, and exposure, gain, white balance, and band filter settings. It also saves the captured image to an SD card wired to the ESP32-CAM. ESP32Cam features: \u00b6 Directs and acquires sensor settings. Save and load the sensor settings to the flash memory on the ESP32 module. Save the captured image to the SD card which is wired to ESP32 module. Save captured images to SD card periodically using an ESP32 built-in hardware timer . ESP32WebCam Class APIs \u00b6 Constructor \u00b6 ESP32WebCam( const uint16_t port = ESP32CAM_DEFAULT_HTTPPORT) ESP32WebCam( const ESP32Cam :: CameraId model, const uint16_t port = ESP32CAM_DEFAULT_HTTPPORT) Instantiate ESP32WebCam. The constructor also instantiates ESP32Cam , so there is no need to explicitly declare the ESP32Cam class in the sketch. At the time of declaring the constructor, the camera is not initialized and the HTTP server is not started. Each of them requires a separate dedicated function to be called. Parameters port Port number of the HTTP server that ESP32WebCam starts. Default port number defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h model Specifies the model of the onboard image sensor. The image sensor models that can be specified are as follows: ESP32Cam::CAMERA_MODEL_WROVER_KIT ESP32Cam::CAMERA_MODEL_ESP_EYE ESP32Cam::CAMERA_MODEL_M5STACK_NO_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_V2_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_WIDE ESP32Cam::CAMERA_MODEL_M5STACK_ESP32CAM ESP32Cam::CAMERA_MODEL_M5STACK_UNITCAM ESP32Cam::CAMERA_MODEL_AI_THINKER ESP32Cam::CAMERA_MODEL_TTGO_T_JOURNAL getCapturePath \u00b6 const char * getCapturePath( void ) Get a path containing the first ' / ' of the currently valid endpoint URL to capture. Return value A path of capturing URL. Default path defined by ESP32CAM_DEFAULT_PATH_CAPTURE macro directive in ESP32WebCam.h . getPromptPath \u00b6 const char * getPromptPath( void ) Get a path containing the first ' / ' of the currently valid endpoint URL to prompt. Return value A path of prompting URL. Default path defined by ESP32CAM_DEFAULT_PATH_PROMPT macro directive in ESP32WebCam.h . getServerHandle \u00b6 httpd_handle_t getServerHandle( void ) Returns the handle of the HTTP server started by ESP32WebCam. Return value Returns the httpd_handle_t value of an HTTP server started by ESP32WebCam. If the HTTP server task is not running, nullptr is returned. getServerPort \u00b6 uint16_t getServerPort( void ) Returns the port number that the HTTP server on listens to. Return value Returns a port number of an HTTP server started by ESP32WebCam. Default port number defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h getStreamPath \u00b6 const char * getStreamPath( void ) Get a path containing the first ' / ' of the currently valid endpoint URL to streaming. Return value A path of streaming URL. Default path defined by ESP32CAM_DEFAULT_PATH_STREAM macro directive in ESP32WebCam.h . isServerStarted \u00b6 bool isServerStarted( void ) Returns a boolean value indicating whether the HTTP server task is running or not. Return value true The HTTP Server tasks is running. false The HTTP server task has not been started. sensor \u00b6 ESP32Cam & sensor( void ) Returns a reference to ESP32Cam , which is instantiated internally by ESP32WebCam constructor. Return value A reference to ESP32Cam instance. The image sensor is not initialized just by calling the ESP32WebCam constructor. To initialize the sensor, you need to call the sensorInit() function. ESP32WebCam webcam (); webcam.sensorInit(); sensorInit \u00b6 esp_err_t sensorInit( void ) esp_err_t sensorInit( const ESP32Cam :: CameraId model) Initialize the image sensor via the ESP32Cam class. The sketch needs to initialize the sensor with the sensorInit function prior to all processing of the image sensor. Parameters model Specifies the model of the onboard image sensor. The image sensor models that can be specified are same as the constructor parameter . Return value ESP_OK An image sensor successfully initialized. ESP_ERR_CAMERA_NOT_SUPPORTED Specified model is not supported. ESP_ERR_CAMERA_NOT_DETECTED An image sensor not detected. ESP_ERR_CAMERA_FAILED_TO_SET_FRAME_SIZE Frame identifier is invalid. ESP_ERR_CAMERA_FAILED_TO_SET_OUT_FORMAT Output image format is invalid. ESP_FAIL Other error occurred. setCapturePath \u00b6 void setCapturePath( const char * path) Reconfigure the already defined path of the endpoint for capture. Parameters path Specifies the path of the capture endpoint to be set newly, as a string starting with ' / '. If this path is not specified, the default path defined by ESP32CAM_DEFAULT_PATH_CAPTURE macro directive will be assumed. setPromptPath \u00b6 void setPromptPath( const char * path) Reconfigure the already defined path of the endpoint for prompt. Parameters path Specifies the path of the prompt endpoint to be set newly, as a string starting with ' / '. If this path is not specified, the default path defined by ESP32CAM_DEFAULT_PATH_PROMPT macro directive will be assumed. setServerPort \u00b6 void setServerPort( const uint16_t port) Reconfigure the already defined port number of an HTTP server. Parameters port Specifies port number of an HTTP Server. Default port number defined by ESP32CAM_DEFAULT_HTTPPORT macro directive will be assumed. setStreamPath \u00b6 void setStreamPath( const char * path) Reconfigure the already defined path of the endpoint for stream. Parameters path Specifies the path of the stream endpoint to be set newly, as a string starting with ' / '. If this path is not specified, the default path defined by ESP32CAM_DEFAULT_PATH_STREAM macro directive will be assumed. startCameraServer \u00b6 esp_err_t startCameraServer( const char * streamPath) esp_err_t startCameraServer( const char * streamPath, const char * capturePath, const char * promptPath) esp_err_t startCameraServer( const char * streamPath, const char * capturePath, const char * promptPath, const uint16_t port) esp_err_t startCameraServer( const char * streamPath, const uint16_t port) esp_err_t startCameraServer( const uint16_t port) esp_err_t startCameraServer( void ) Begins the HTTP server task, and start the endpoint service. By starting the HTTP server task, the endpoint interface provided by ESP32WebCam will be available. Parameters streamPath Specifies the path of the stream endpoint . Default stream path is defined by ESP32CAM_DEFAULT_PATH_STREAM macro directive in ESP32WebCam.h header file. capturePath Specifies the path of the capture endpoint . Default capture path is defined by ESP32CAM_DEFAULT_PATH_CAPTURE macro directive in ESP32WebCam.h header file. promptPath Specifies the path of the prompt endpoint . Default prompt path is defined by ESP32CAM_DEFAULT_PATH_PROMPT macro directive in ESP32WebCam.h header file. port Specifies port number on which the HTTP server listens. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. Return value ESP_OK An HTTP server task successfully started. ESP_ERR_HTTPD_HANDLERS_FULL All slots for registering URI handlers have been consumed. ESP_ERR_HTTPD_ALLOC_MEM Failed to dynamically allocate memory for resource. ESP_ERR_HTTPD_TASK Failed to launch server task/thread. ESP_FAIL Other error occurred. HTTP server task stack size ESP32WebCam allocates 8KB of stack when it starts the HTTP server task. This stack size is larger than the size allocated by the default HTTPD_DEFAULT_CONFIG in ESP-IDF. This is to include the stack consumed by the file system of the SD card triggered by the timer shot. This stack size can be changed as needed, and the default value is defined in the ESP32Cam.h header file as ESP32CAM_TIMERTASK_STACKSIZE . stopCameraServer \u00b6 void stopCameraServer( void ) Stop an HTTP server task and free resources. ESP32WebCam Endpoint Interfaces \u00b6 ESP32WebCam has endpoint interfaces for simple manipulation of image sensors over the network via an internally launched HTTP server, which follows the traditional HTTP request and response, not WebAPI or REST. It supports the HTTP GET 1 method and will be available after the HTTP server is started by the ESP32WebCam::startCameraServer function. If you are using Visual Studio Code as your build system for Arduino sketch, you can easily experiment with the ESP32WebCam endpoint interface using the VSCode extension. REST Client is an excellent VSCode extension that allows you to send HTTP requests directly from within the editor. The following screenshot shows the result of sending an HTTP request directly to the capture endpoint of ESP32WebCam using the REST Client on a VSCode with the PlatformIO build system. The top left editor pane is the sketch code described above, and the bottom pane is the serial monitor output of the sketch. The pane between the top and bottom panes is the REST Client. Run the sketch, and when the serial monitor shows a message that ESP32Cam has started the HTTP server, use the REST client to send an HTTP GET request as GET http://{HOST}:{PORT}/_capture (In the screenshot above, the request is sent to http://192.168.1.19:3000/_capture ) to the capture endpoint. 2 You will see the response of the image captured by ESP32-CAM in the right pane. The default settings for the endpoint interface provided by ESP32WebCam are as follows: \u00b6 Endpoint Default path Function Default value defined in ESP32WebCam.h Capture /_capture Responds as a captured image ESP32CAM_DEFAULT_PATH_CAPTURE Prompt /_prompt Save and load the captured image, Save the sensor settings ESP32CAM_DEFAULT_PATH_PROMPT Stream /_stream Stream image ESP32CAM_DEFAULT_PATH_STREAM Capture \u00b6 GET http://{HOST}:{PORT}{PATH} The capture endpoint responds captured image with the image/jpeg mime format. Parameters HOST Host address of ESP32-CAM. PORT Port number of HTTP server listening on. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. PATH A path for the capture endpoint. Response code 200 Content body contains captured image data. Prompt \u00b6 GET http://{HOST}:{PORT}{PATH}?{QUERY} You can use the prompt endpoint to save the captured image to the SD card at that moment or in a timer cycle, save the sensor settings, and load them into the flash memory built into the ESP32 module. The instructions for the prompt action performed by ESP32WebCam are specified as the query string with \" key=value \" form for the parameters of the GET request. Parameters HOST Host address of ESP32-CAM. PORT Port number of HTTP server listening on. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. PATH A path for the capture endpoint. QUERY The QUERY that Prompt can accept are different for each feature. The query formats that can be specified and the corresponding functions are shown below. Response code 202 Request accepted. 400 Query string has syntax error, or Fatal error occurred. Content body has detailed error code. The following features are currently supported by the prompt endpoint: \u00b6 Specifying by query string Function Behavior mf=oneshot[&fs={sd|mmc}][&filename=<FILENAME>] One-shot Take a one-shot image and save it to the SD card. mf=timershot[&fs={sd|mmc}][&filename=<FILENAME>][&period=<INTERVAL>] Timer-shot Repeatedly takes a one-shot image at specified an INTERVAL of seconds and saves it to the SD card. mf=distimer Disable timer Suspend timer for Timer-shot mf=entimer Enable timer Resume timer for Timer-shot mf=load Load settings Load the image sensor settings from the NVS mf=save Save settings Save the image sensor settings to the NVS The query formats that can be specified and their corresponding functions are described below. Functions: Specifies with the mf= query. oneshot Capture an image at the requested timing and save them to the SD card. Species either sd or mmc for the fs argument. If the fs argument does not exist, mmc is assumed. Saves the captured image with the file name specified by the filename argument; if the filename argument does not exist, it assumes a file name consisting of a prefix and a timestamp. In that case, the fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h is used as the prefix. timershot Repeatedly takes a one-shot image at specified an INTERVAL of seconds with period argument and saves it to the SD card. Species either sd or mmc for the fs argument. If the fs argument does not exist, mmc is assumed. Saves the captured image to a file whose name consists of the prefix and timestamp suffix specified by the filename argument. If the filename argument does not exist, the prefix will be assumed a fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h header file. distimer Temporarily stops the timer for the timershot . This can be resumed with entimer . entimer Resumes a timer-shot that was temporarily stopped by distimer . load Load the image sensor settings from NVS. save Save the image sensor settings to NVS. Whether it is SD or MMC depends on the hardware The ESP32 Arduino SD library supports two types of SD cards with different interfaces. Which type of SD card is used depends on the ESP32 module and needs to be chosen appropriately. In the case of the Ai-Thinker ESP32-CAM 3 , the ESP32 is wired to the SD slot with each HS2 signal . Hence, We can see from the schematic that it is using MMC. Stream \u00b6 GET http://{HOST}:{PORT}{PATH} The stream endpoint responds captured image with the image/jpeg mime format with multipart/x-mixed-replace HTTP header. Parameters HOST Host address of ESP32-CAM. PORT Port number of HTTP server listening on. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. PATH A path for the stream endpoint. Response code 200 Content body contains captured image data with multipart boundary. ESP32Cam Class APIs \u00b6 Constructor \u00b6 ESP32Cam() ESP32Cam( const CameraId model) Instantiate ESP32Cam. The image sensor is not initialized just by calling the constructor. To initialize the sensor, you need to call the init function. Parameters model Specifies the model of the onboard image sensor. The image sensor models that can be specified are as follows: ESP32Cam::CAMERA_MODEL_WROVER_KIT ESP32Cam::CAMERA_MODEL_ESP_EYE ESP32Cam::CAMERA_MODEL_M5STACK_NO_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_V2_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_WIDE ESP32Cam::CAMERA_MODEL_M5STACK_ESP32CAM ESP32Cam::CAMERA_MODEL_M5STACK_UNITCAM ESP32Cam::CAMERA_MODEL_AI_THINKER ESP32Cam::CAMERA_MODEL_TTGO_T_JOURNAL getStatus \u00b6 esp_err_t getStatus(camera_status_t * status) Get the camera_status_t data structure from the image sensor. Parameters status Pointer to the buffer to store the acquired camera_status_t structure. Return value ESP_OK camera_status_t is read successfully. ESP_FAIL Image sensor is not initialized. getFramesize \u00b6 framesize_t getFramesize( void ) Get the current configuration of the image sensor frame size. Return value framesize_t The framesize_t enumeration value. getFrameHeight \u00b6 uint16_t getFrameHeight( void ) Returns the height of the current image frame in pixels. Return value uint16_t Height of the image frame. getFrameWidth \u00b6 uint16_t getFrameWidth( void ) Returns the width of the current image frame in pixels. Return value uint16_t Width of the image frame. init \u00b6 esp_err_t init( void ) esp_err_t init( const CameraId model) Initialize the image sensor. Parameters model Specifies the model of the onboard image sensor. The image sensor models that can be specified are as follows: ESP32Cam::CAMERA_MODEL_WROVER_KIT ESP32Cam::CAMERA_MODEL_ESP_EYE ESP32Cam::CAMERA_MODEL_M5STACK_NO_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_V2_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_WIDE ESP32Cam::CAMERA_MODEL_M5STACK_ESP32CAM ESP32Cam::CAMERA_MODEL_M5STACK_UNITCAM ESP32Cam::CAMERA_MODEL_AI_THINKER ESP32Cam::CAMERA_MODEL_TTGO_T_JOURNAL loadSettings \u00b6 esp_err_t loadSettings( const char * key = nullptr ) Load the image sensor settings from NVS in the ESP32 flash. Parameters key Specifies NVS key name. If key is nullptr or not specified, default key which defined by ESP32CAM_NVS_KEYNAME macro directive in ESP32Cam.h header file will be assumed. Return value ESP_OK The image sensor settings has been successfully loaded. saveSettings \u00b6 esp_err_t saveSettings( const char * key = nullptr ) Save the current image sensor settings to NVS in the ESP32 flash. Parameters key Specifies NVS key name. If key is nullptr or not specified, default key which defined by ESP32CAM_NVS_KEYNAME macro directive in ESP32Cam.h header file will be assumed. Return value ESP_OK The image sensor settings has been successfully saved. setStatus \u00b6 esp_err_t setStatus( const camera_status_t & status) Set the content of camera_status_t structure to the image sensor. Parameters status Reference of the camera_status_t structure. Return value ESP_OK camera_status_t has been set successfully. ESP_FAIL Image sensor is not initialized. setFramesize \u00b6 esp_err_t setFramesize( const framesize_t framesize) Set the image sensor frame size. Parameters framesize The framesize_t enumeration value to be set. Return value ESP_OK Framesize has been set. ESP_ERR_CAMERA_FAILED_TO_SET_FRAME_SIZE Image sensor is not initialized, the framesize is invalid, or the pixel format is not JPEG. setImageFormat \u00b6 esp_err_t setImageFormat( const pixformat_t format) Set the image format. Parameters format The pixformat_t enumeration value to be set. Return value ESP_OK Format has been set. ESP_ERR_CAMERA_FAILED_TO_SET_OUT_FORMAT Specified format is invalid. ESP_FAIL Image sensor is not initialized. oneShot \u00b6 esp_err_t oneShot(fs :: SDFS & sd, const char * filename = nullptr ) esp_err_t oneShot(fs :: SDMMCFS & mmc, const char * filename = nullptr ) Take a one-shot image and save it to the SD card or MMC. This function writes to a file compliant with the ESP32 Arduino SD library . Either fs::SDFS or fs::SDMMCFS can be specified for the file system that represents sd or mmc . Parameters sd Specifies the SD file system when the SD card is wired with SPI interface. In usually, you can use a SD variable that is instantiated and exported globally by the ESP32 Arduino core. mmc Specifies the SD_MMC file system when the SD card is wired with HS2 interface. In usually, you can use a SD_MMC variable that is instantiated and exported globally by the ESP32 Arduino core. filename Specifies the file name when saving the captured image to the SD card. if the filename does not exist, it assumes a file name consisting of a prefix and a timestamp. In that case, the fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h is used as the prefix. Return value ESP_OK Format has been set. ESP_ERR_NOT_FOUND SD card is not mounted. ESP_FAIL Other error occurred. timerShot \u00b6 esp_err_t timerShot( const unsigned long period, fs :: SDFS & sd, const char * filePrefix = nullptr ) esp_err_t timerShot( const unsigned long period, fs :: SDMMCFS & mmc, const char * filePrefix = nullptr ) Repeatedly takes a one-shot image at specified an interval of seconds with period parameter and saves it to the SD card or MMC. This function writes to a file compliant with the ESP32 Arduino SD library . Either fs::SDFS or fs::SDMMCFS can be specified for the file system that represents sd or mmc . Parameters period Specifies the shooting interval time in second unit. sd Specifies the SD file system when the SD card is wired with SPI interface. In usually, you can use a SD variable that is instantiated and exported globally by the ESP32 Arduino core. mmc Specifies the SD_MMC file system when the SD card is wired with HS2 interface. In usually, you can use a SD_MMC variable that is instantiated and exported globally by the ESP32 Arduino core. filePrefix Specifies the prefix of file name when saving the captured image to the SD card. This function saves files each time whose name consists of the prefix and timestamp suffix specified by the filePrefix parameter. If the filePrefix does not exist, it assumes a fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h for the prefix. Return value ESP_OK Format has been set. ESP_ERR_NOT_FOUND SD card is not mounted. ESP_FAIL Other error occurred. disableTimerShot \u00b6 void disableTimerShot( void ) Temporarily stops the timerShot . To restart it, call enableTimerShot . enableTimerShot \u00b6 void enableTimerShot( void ) Restarts the timerShot that was temporarily stopped by disableTimerShot . deq \u00b6 void deq( void ) Release a semaphore. enq \u00b6 portBASE_TYPE enq(TickType_t ms) Take a semaphore to prevent resource collisions with the image sensor. ESP32Cam uses a semaphore for each of oneShot and timerShot to prevent image sensor resources from colliding while performing each other's tasks. The enq function reserves a semaphore to wait for a subsequent oneShot or timerShot task. Parameters ms Specifies the maximum waiting time in milliseconds for a semaphore to be released. If portMAX_DELAY is specified, it will wait indefinitely for the semaphore to be released. Return value pdTRUE Semaphore was reserved. !pdTRUE Semaphore was not released within the specified ms time. WebCamServer like as CameraWebServer \u00b6 The WebCamServer.ino sketch combines AutoConnectAux's custom web pages with native HTML pages. The image viewer is placed on the native HTML page using the img tag, and the slide-in navigation panel is incorporated using CSS. AutoConnect is only directly involved in the image sensor setup page, which is JSON defined in CAMERA_SETUP_PAGE . The setSensor function in the sketch is a handler for a custom web page for CAMERA_SETUP_PAGE , and its role is to communicate the sensor settings to the ESP32 camera driver via ESP32Cam. In the WebCamServer.ino sketch, most of the front-end is taken care of by the UI, which is a web page written in HTML. The slide-in menu allows navigation to stream images, capture still images, save a one-shot image to the SD card, and the timer-shot. Image streaming and capture are achieved by giving the URLs of the Stream endpoint and Capture endpoint in the src attribute of the img tag in the HTML using JavaScript DOM interface. < body > < li id = \"onair\" onclick = \"stream(!isStreaming())\" > Start Streaming </ li > < img id = \"img-frame\" /> </ body > const onAir = document. getElementById ( 'onair' ); const imgFrame = document. getElementById ( 'img-frame' ); function isStreaming () { status . innerText = null ; return onAir . innerText . startsWith ( \"Stop\" ); } function stream ( onOff ) { if ( onOff && ! isStreaming ()) { window. stop (); imgFrame . src = streamUrl ; onAir . innerText = onAir . innerText . replace ( \"Start\" , \"Stop\" ); content . focus (); } else if ( ! onOff && isStreaming ()) { window. stop (); imgFrame . src = noa ; onAir . innerText = onAir . innerText . replace ( \"Stop\" , \"Start\" ); } } Also, One-shot and timer-shot also use JavaScript Fetch API to send a query string compliant with each function to the Prompt endpoint. < li id = \"oneshot\" onclick = \"oneshot()\" > One-Shot </ li > < li >< label for = \"period\" > Period [s] </ label >< input type = \"number\" name = \"peirod\" id = \"period\" min = \"1\" value = \"1\" pattern = \"\\d*\" /></ li > < li >< input type = \"button\" value = \"ARM\" onclick = \"arm()\" /></ li > var promptUrl = endpoint ( host , promptPath , port ); function endpoint ( host , path , port ) { var url = new URL ( path , \"http://\" + host ); url . port = port ; return url ; } function prompt ( url ) { var res ; stream ( false ); fetch ( url ) . then ( response => { res = \"status:\" + response . status + \" \" ; if ( ! response . ok ) { return response . text (). then ( text => { throw new Error ( text ); }); } else { status . style . color = '#297acc' ; status . innerText = res + response . statusText ; } }) . catch ( err => { var desc = err . message ; if ( err . message . indexOf ( \"0x0103\" , 1 ) > 0 ) { desc = \"SD not mounted\" ; } if ( err . message . indexOf ( \"0x0105\" , 1 ) > 0 ) { desc = \"SD open failed\" ; } status . style . color = '#cc2929' ; status . innerText = res + desc ; }); } function oneshot () { promptUrl . search = \"?mf=oneshot&fs=mmc\" ; prompt ( promptUrl ); } function arm () { promptUrl . search = \"?mf=timershot&fs=mmc&period=\" + document. getElementById ( 'period' ). value ; prompt ( promptUrl ); } The following diagram shows the program structure of the WebCamServer.ino sketch. Its structure is somewhat more complex than the simple sketch presented at the beginning of this chapter because of the native HTML intervening. ESP32WebCam endpoint interface supports only HTTP GET method, it cannot respond to other HTTP methods such as POST. \u21a9 Do not use the REST Client to send requests to the stream endpoints, the REST Client does not fully support multipart/x-mixed-replace mime. \u21a9 When using MMC on AI-Thinker ES32-CAM, the LED flash on the module blinks every time the SD is accessed, because the HS2 DATA1 signal is wired to the driver transistor of the LED FLASH . I can't envision why HS2 DATA1 signal was chosen to drive the LED. \u21a9","title":"Works with ESP32-CAM"},{"location":"esp32cam.html#what-this-example-presents","text":"ESP-IDF is offering ESP32 Camera Driver as an interface to small image sensors that can work with ESP32. This driver supports a variety of popular image sensors, such as the OV2640, which has low power consumption and mega-pixel sensing capability. By reading through this chapter you will know how to make the sketch featuring a UI that looks like the followings. Of course, it has the convenience of AutoConnect as well. This example shows how to sketch the Web Camera Application that involves using AutoConnect together with the ESP32 Camera Driver.","title":"What this example presents"},{"location":"esp32cam.html#why-we-can-not-use-app_httpdcpp-together-with-autoconnect","text":"The ESP32 library of the ESP32 Arduino core features a CameraWebServer.ino that includes an interface to drive the Camera Driver. The core process of the server-side of that sketch application is app_httpd.cpp , which consists of initializing and configuring the image sensor, configuring and capturing image frames, and sending the image frames through an internally started HTTP server . While Web UI provided by CameraWebServer.ino is sophisticated, the role of app_httpd.cpp is focused on responding to the Fetch required by the Web UI (which is actually an HTML page specific to each sensor model that is extracted from the gzipped camera_index.h ). It is a set of primitive functions that are integrated with the Web UI. Also, app_httpd.cpp has hardcoded the TCP port of the internally invoking HTTP server as fixed at 80, which conflicts with the HTTP port used by a typical captive portal. Therefore, It is impossible to apply app_httpd.cpp which has fixed 80 TCP port depending on the WebUI of CameraWebServer.ino to sketches using AutoConnect as it is. CameraWebServer.ino extended version available on GitHub An extended version of app_httpd.cpp is available on the GitHub repository to make it a bit more flexible for different usage scenarios. It also can handling the captive portal itself.","title":"Why we can not use app_httpd.cpp together with AutoConnect"},{"location":"esp32cam.html#strategy","text":"As mentioned earlier, app_httpd.cpp is integrated with CameraWebServer.ino 's Web UI. However, its functionality can be separated into two parts: an interface for driving the image sensor correctly and sending the captured images on the HTTP stream as requested by the client. It also has the ability to configure the sensor settings over the network remotely, but this can be omitted at the expense of interactivity. (We can implement that feature after the initial purpose is achieved) So, I have prepared two separate classes with these functions. ESP32WebCam and ESP32Cam are independent classes inspired by app-httpd.cpp, and they can interface with the ESP32 Camera Driver individually, or send out motion JPEGs via an HTTP server task running inside the class. These two classes are completely independent of the AutoConnect library and can be incorporated into your various other sketches on their own. the source code for the ESP32WebCam and ESP32Cam classes can be found in the AutoConnect library examples and are distributed together. The API specifications for these two classes are described later in this chapter.","title":"Strategy"},{"location":"esp32cam.html#implementing-a-streaming-server-with-esp32-cam-using-autoconnect","text":"A minimal sketch that involves the ESP32WebCam and ESP32Cam classes and incorporates them together with AutoConnect is shown below. This sketch will work with Ai-Thinker ESP32-CAM , which is one of the most popular ESP32 modules with OmniVision OV2640 image sensor. In order to experience this sketch, copy the five files ESP32WebCam.h , ESP32WebCam.cpp , ESP32Cam.h , ESP32Cam.cpp , and ESP32Cam_pins.h from the WebCamServer folder located AutoConnect library examples to the same folder as the sketchbook folder where you placed this sketch. Connect the ESP32-CAM module to your PC and launch the Arduino IDE. Then select the correct board you using from the Tool menu of Arduino IDE and compile it. (Don't forget to open the serial monitor) #include <Arduino.h> #include <WiFi.h> #include <WebServer.h> #include <AutoConnect.h> #include \"ESP32WebCam.h\" const char CAMERA_VIEWER[] = R\"*( { \"title\": \"Camera\", \"uri\": \"/\", \"menu\": false, \"element\": [ { \"name\": \"viewport\", \"type\": \"ACText\", \"format\": \"<img src='http://%s'>\", \"posterior\": \"none\" }, { \"name\": \"discon\", \"type\": \"ACElement\", \"value\": \"<script>window.addEventListener('pagehide',function(){window.stop();});</script>\" } ] } )*\" ; // Declare ESP32-CAM handling interface. It contains ESP-IDF Web Server. ESP32WebCam webcam (ESP32Cam :: CAMERA_MODEL_AI_THINKER); // AutoConnect portal. It contains the WebServer from ESP32 Arduino Core. AutoConnect portal; AutoConnectConfig config; // AutoConnectAux page handler, it starts streaming by adding the ESP32WebCam // streaming endpoint to the src attribute of the img tag on the AutoConnectAux page. String viewer (AutoConnectAux & aux, PageArgument & args) { AutoConnectAux & viewer = * portal.aux( \"/\" ); // Set the Streaming server host, port, and endpoint viewer[ \"viewport\" ].value = WiFi.localIP().toString() + \":\" + String(webcam.getServerPort()) + String(webcam.getStreamPath()); return String(); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); // Start Image sensor if (webcam.sensorInit() != ESP_OK) { Serial.println( \"Camera initialize failed\" ); } // Allow automatic re-connection as long as the WiFi connection is established. config.autoReconnect = true; config.reconnectInterval = 1 ; portal.config(config); // Start the portal, it will launch the WebServer for the portal from inside of AutoConnect. if (portal.begin()) { portal.load(CAMERA_VIEWER); portal.on( \"/\" , viewer); // Start ESP32 Camera Web Server if (webcam.startCameraServer() == ESP_OK) { Serial.printf( \"ESP32WebCam server %s port %u ready \\n \" , WiFi.localIP().toString().c_str(), webcam.getServerPort()); } else { Serial.println( \"ESP32WebCam server start failed\" ); } } } void loop () { portal.handleClient(); } If your ESP32-CAM module still has no connection with any access point, a captive portal will open. Use your cellphone to connect the ESP32-CAM to the access point. When ESP32-CAM successfully connects to the access point, you will see the IP address on the serial monitor. You visit the IP address from your browser, you can see the image captured by the ESP32-CAM. Streaming stops caused by ERR_CONNECTION_RESET Sometimes the browser will throw the above error and the streaming will stop. In the simple sketch above, which does not include the transmission error recovery process, the TCP packet transmission is incomplete due to a weak WiFi signal or other reasons, and the browser will stop loading the image. Send errors can be recovered by incorporating an event handler into the img tag, and an example of its implementation is shown later in this chapter.","title":"Implementing a Streaming Server with ESP32-CAM using AutoConnect"},{"location":"esp32cam.html#program-structure","text":"The sketch of AutoConnect using ESP32WebCam and ESP32Cam classes is divided into several components, which will take a similar form in any sketch application. Their logical components are as follows: Include ESP32WebCam.h header file. #include \"ESP32WebCam.h\" AutoConnectAux defines a custom web page in JSON description. It includes an img tag that displays the captured image. The src attribute of the img tag is not hard-coded and can be dynamically set in a custom web page handler to make the sketch more applicable to various situations. { \"name\" : \"viewport\" , \"type\" : \"ACText\" , \"format\" : \"<img src='http://%s'>\" , \"posterior\" : \"none\" } Insert AutoConnectElement in the JSON description of your custom web page with JavaScript enclosed in <script>~</script> in HTML to stop streaming on page transition. window. addEventListener ( 'pagehide' , function () { window. stop (); }); Why window.stop() is needed That's because image streaming is achieved by continuous loading of Motion JPEG using HTTP multipart/x-mixed-replace keep-alive stream. With this type of MIME content, the server will continue to push the content unless the client explicitly notifies the server of the end of the session. The method of notifying the end of the session varies depending on the client browser, and by issuing window.stop() , the difference in the behavior of each browser is absorbed. Declare ESP32WebCam instance. It accompanies the parameters with the appropriate model specifiers. ESP32WebCam webcam (ESP32Cam :: CAMERA_MODEL_AI_THINKER); For details on identifiers that can be specified as image sensor models, please refer to the APIs described below. Declare AutoConnect instance. If your sketch requires a native web page that is not an AutoConnectAux, you can declare a WebServer instance at the same place to make it easier to call from functions in your sketch. AutoConnect portal; Declare AutoConnectConfig to control WiFi connection behavior if necessary. AutoConnectConfig config; Prepare an AutoConnectAux custom page handler for the declared above AutoConnectAux JSON. Typically, this handler is responsible for handling the ESP32Cam class via the endpoint interface provided by the ESP32Cam class. In the above sketch, we have only given the endpoint (i.e. http://{WiFi.localIP}:3000/_stream ) for streaming by the ESP32WebCam class as the src attribute of the img tag identified id=viewport , since we are focusing on the minimum necessary processing. ESP32WebCam class will deliver the captured image with just this operation. AutoConnectAux & viewer = * portal.aux( \"/\" ); viewer[ \"viewport\" ].value = WiFi.localIP().toString() + \":\" + String(webcam.getServerPort()) + String(webcam.getStreamPath()); For more information about ESP32Cam capability and ESP32WebCam endpoints, please refer to the Endpoint interfaces described below. Using AutoConnectText with format string In the sketch above, the format attribute of AutoConnectText is used to set the src attribute of the img tag. The AutoConnectText format attribute produces the same output as a C-style printf(format, value) , depending on the string that can be derived from the value. printf( \"<img src='http://%s'>\" , \"localhost:3000/_stream\" ); Start the sketch and initialize the camera using ESP32WebCam::sensorInit . ESP_OK will returned on success to initialize the image sensor. ESP32WebCam webcam (ESP32Cam :: CAMERA_MODEL_AI_THINKER); if (webcam.sensorInit() != ESP_OK) { Serial.println( \"Camera initialize failed\" ); } Configure WiFi state control to maintain connection. Usually, AutoConnectConfig::autoReconnect will keep WiFi connection stateful. config.autoReconnect = true; config.reconnectInterval = 1 ; portal.config(config); Start the portal, and load the view page. portal.begin(); portal.load(CAMERA_VIEWER); Register the view page handler and start the streaming server using ESP32WebCam::startCameraServer . ESP_OK will returned on start the streaming server successfully. portal.on( \"/\" , viewer); if (webcam.startCameraServer() == ESP_OK) { Serial.printf( \"ESP32WebCam server ready: %s \\n \" , WiFi.localIP().toString().c_str()); } else { Serial.println( \"ESP32WebCam server start failed\" ); } Loop for portal.handleClient(). The app_httpd.cpp , which is the core of CameraWebServer.ino 's functionality, has a mixture of an interface with the ESP32 Camera Driver and remote control over the network via an HTTP server . While it is highly functional, but it will cause a decline in versatility. ESP32WebCam and ESP32Cam separate the mixed functionality of app_httpd.cpp into two classes, each with a single role. This makes them versatile and simple to use. And they can coexist with AutoConnect. If you only need to stream from the image sensor, you can simplify the sketch structure as in the example above. The simplicity of the sketch is mainly due to the usefulness of the ESP32WebCam and ESP32Cam classes. In driving the ESP32 Camera Driver on the ESP32-CAM module, the sketch interfaces with the ESP32WebCam class and processes the ESP32Cam class through the ESP32WebCam endpoint interface.","title":"Program structure"},{"location":"esp32cam.html#esp32webcam-class-and-esp32cam-class","text":"The ESP32WebCam class has an endpoint interface to allow the sketch to manipulate the image sensor over the network. The sketch can use HTTP GET method to capture images, stream the captured images, and save them to SD card. It also starts its own HTTP server task internally, and this HTTP server runs as a separate task from the WebServer hosted by AutoConnect. The ESP32Cam class is a wrapper that governs the native interface with the ESP32 Camera Driver which is a component of ESP-IDF. It can initialize the sensor, set the sensor characteristics, save and load the settings, and save the captured images to the SD card. In the case of accessing image sensors located across a network, the sketch will usually have a UI to remotely control the ESP32-CAM. If the UI is intended to be a web interface, the sketch will use a request handler that is compatible with the ESP32 WebServer hosted by AutoConnect to serve the manipulation web page. That page can be an AutoConnectAux-based custom web page, or it can be the RequestHanlder callback that can respond to the ESP32 WebServer class . In any case, those UI pages can remotely access the image sensor of the ESP32-CAM module through the HTTP endpoint interface deployed at a specific URL of the HTTP server launched by the ESP32WebCam class, and do the required processing.","title":"ESP32WebCam Class and ESP32Cam Class"},{"location":"esp32cam.html#esp32webcam-features","text":"Run the HTTP server as a background task. Stream Motion JPEG via HTTP multipart/x-mixed-replace MIME. Serves a captured image via HTTP. Instruct the ESP32Cam to save the captured image to the SD card via HTTP. Of these processing requests, the ESP32Cam class is responsible for the ones that actually need to interface with the camera driver. (However, reading from the frame buffer is excluded. ESP32WebCam reads image data directly from the frame buffer of the image sensor without ESP32Cam.) The ESP32Cam class manipulates sensor characteristics, including setting image frame properties, image format settings, and exposure, gain, white balance, and band filter settings. It also saves the captured image to an SD card wired to the ESP32-CAM.","title":"ESP32WebCam features:"},{"location":"esp32cam.html#esp32cam-features","text":"Directs and acquires sensor settings. Save and load the sensor settings to the flash memory on the ESP32 module. Save the captured image to the SD card which is wired to ESP32 module. Save captured images to SD card periodically using an ESP32 built-in hardware timer .","title":"ESP32Cam features:"},{"location":"esp32cam.html#esp32webcam-class-apis","text":"","title":"ESP32WebCam Class APIs"},{"location":"esp32cam.html#constructor","text":"ESP32WebCam( const uint16_t port = ESP32CAM_DEFAULT_HTTPPORT) ESP32WebCam( const ESP32Cam :: CameraId model, const uint16_t port = ESP32CAM_DEFAULT_HTTPPORT) Instantiate ESP32WebCam. The constructor also instantiates ESP32Cam , so there is no need to explicitly declare the ESP32Cam class in the sketch. At the time of declaring the constructor, the camera is not initialized and the HTTP server is not started. Each of them requires a separate dedicated function to be called. Parameters port Port number of the HTTP server that ESP32WebCam starts. Default port number defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h model Specifies the model of the onboard image sensor. The image sensor models that can be specified are as follows: ESP32Cam::CAMERA_MODEL_WROVER_KIT ESP32Cam::CAMERA_MODEL_ESP_EYE ESP32Cam::CAMERA_MODEL_M5STACK_NO_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_V2_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_WIDE ESP32Cam::CAMERA_MODEL_M5STACK_ESP32CAM ESP32Cam::CAMERA_MODEL_M5STACK_UNITCAM ESP32Cam::CAMERA_MODEL_AI_THINKER ESP32Cam::CAMERA_MODEL_TTGO_T_JOURNAL","title":" Constructor"},{"location":"esp32cam.html#getcapturepath","text":"const char * getCapturePath( void ) Get a path containing the first ' / ' of the currently valid endpoint URL to capture. Return value A path of capturing URL. Default path defined by ESP32CAM_DEFAULT_PATH_CAPTURE macro directive in ESP32WebCam.h .","title":" getCapturePath"},{"location":"esp32cam.html#getpromptpath","text":"const char * getPromptPath( void ) Get a path containing the first ' / ' of the currently valid endpoint URL to prompt. Return value A path of prompting URL. Default path defined by ESP32CAM_DEFAULT_PATH_PROMPT macro directive in ESP32WebCam.h .","title":" getPromptPath"},{"location":"esp32cam.html#getserverhandle","text":"httpd_handle_t getServerHandle( void ) Returns the handle of the HTTP server started by ESP32WebCam. Return value Returns the httpd_handle_t value of an HTTP server started by ESP32WebCam. If the HTTP server task is not running, nullptr is returned.","title":" getServerHandle"},{"location":"esp32cam.html#getserverport","text":"uint16_t getServerPort( void ) Returns the port number that the HTTP server on listens to. Return value Returns a port number of an HTTP server started by ESP32WebCam. Default port number defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h","title":" getServerPort"},{"location":"esp32cam.html#getstreampath","text":"const char * getStreamPath( void ) Get a path containing the first ' / ' of the currently valid endpoint URL to streaming. Return value A path of streaming URL. Default path defined by ESP32CAM_DEFAULT_PATH_STREAM macro directive in ESP32WebCam.h .","title":" getStreamPath"},{"location":"esp32cam.html#isserverstarted","text":"bool isServerStarted( void ) Returns a boolean value indicating whether the HTTP server task is running or not. Return value true The HTTP Server tasks is running. false The HTTP server task has not been started.","title":" isServerStarted"},{"location":"esp32cam.html#sensor","text":"ESP32Cam & sensor( void ) Returns a reference to ESP32Cam , which is instantiated internally by ESP32WebCam constructor. Return value A reference to ESP32Cam instance. The image sensor is not initialized just by calling the ESP32WebCam constructor. To initialize the sensor, you need to call the sensorInit() function. ESP32WebCam webcam (); webcam.sensorInit();","title":" sensor"},{"location":"esp32cam.html#sensorinit","text":"esp_err_t sensorInit( void ) esp_err_t sensorInit( const ESP32Cam :: CameraId model) Initialize the image sensor via the ESP32Cam class. The sketch needs to initialize the sensor with the sensorInit function prior to all processing of the image sensor. Parameters model Specifies the model of the onboard image sensor. The image sensor models that can be specified are same as the constructor parameter . Return value ESP_OK An image sensor successfully initialized. ESP_ERR_CAMERA_NOT_SUPPORTED Specified model is not supported. ESP_ERR_CAMERA_NOT_DETECTED An image sensor not detected. ESP_ERR_CAMERA_FAILED_TO_SET_FRAME_SIZE Frame identifier is invalid. ESP_ERR_CAMERA_FAILED_TO_SET_OUT_FORMAT Output image format is invalid. ESP_FAIL Other error occurred.","title":" sensorInit"},{"location":"esp32cam.html#setcapturepath","text":"void setCapturePath( const char * path) Reconfigure the already defined path of the endpoint for capture. Parameters path Specifies the path of the capture endpoint to be set newly, as a string starting with ' / '. If this path is not specified, the default path defined by ESP32CAM_DEFAULT_PATH_CAPTURE macro directive will be assumed.","title":" setCapturePath"},{"location":"esp32cam.html#setpromptpath","text":"void setPromptPath( const char * path) Reconfigure the already defined path of the endpoint for prompt. Parameters path Specifies the path of the prompt endpoint to be set newly, as a string starting with ' / '. If this path is not specified, the default path defined by ESP32CAM_DEFAULT_PATH_PROMPT macro directive will be assumed.","title":" setPromptPath"},{"location":"esp32cam.html#setserverport","text":"void setServerPort( const uint16_t port) Reconfigure the already defined port number of an HTTP server. Parameters port Specifies port number of an HTTP Server. Default port number defined by ESP32CAM_DEFAULT_HTTPPORT macro directive will be assumed.","title":" setServerPort"},{"location":"esp32cam.html#setstreampath","text":"void setStreamPath( const char * path) Reconfigure the already defined path of the endpoint for stream. Parameters path Specifies the path of the stream endpoint to be set newly, as a string starting with ' / '. If this path is not specified, the default path defined by ESP32CAM_DEFAULT_PATH_STREAM macro directive will be assumed.","title":" setStreamPath"},{"location":"esp32cam.html#startcameraserver","text":"esp_err_t startCameraServer( const char * streamPath) esp_err_t startCameraServer( const char * streamPath, const char * capturePath, const char * promptPath) esp_err_t startCameraServer( const char * streamPath, const char * capturePath, const char * promptPath, const uint16_t port) esp_err_t startCameraServer( const char * streamPath, const uint16_t port) esp_err_t startCameraServer( const uint16_t port) esp_err_t startCameraServer( void ) Begins the HTTP server task, and start the endpoint service. By starting the HTTP server task, the endpoint interface provided by ESP32WebCam will be available. Parameters streamPath Specifies the path of the stream endpoint . Default stream path is defined by ESP32CAM_DEFAULT_PATH_STREAM macro directive in ESP32WebCam.h header file. capturePath Specifies the path of the capture endpoint . Default capture path is defined by ESP32CAM_DEFAULT_PATH_CAPTURE macro directive in ESP32WebCam.h header file. promptPath Specifies the path of the prompt endpoint . Default prompt path is defined by ESP32CAM_DEFAULT_PATH_PROMPT macro directive in ESP32WebCam.h header file. port Specifies port number on which the HTTP server listens. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. Return value ESP_OK An HTTP server task successfully started. ESP_ERR_HTTPD_HANDLERS_FULL All slots for registering URI handlers have been consumed. ESP_ERR_HTTPD_ALLOC_MEM Failed to dynamically allocate memory for resource. ESP_ERR_HTTPD_TASK Failed to launch server task/thread. ESP_FAIL Other error occurred. HTTP server task stack size ESP32WebCam allocates 8KB of stack when it starts the HTTP server task. This stack size is larger than the size allocated by the default HTTPD_DEFAULT_CONFIG in ESP-IDF. This is to include the stack consumed by the file system of the SD card triggered by the timer shot. This stack size can be changed as needed, and the default value is defined in the ESP32Cam.h header file as ESP32CAM_TIMERTASK_STACKSIZE .","title":" startCameraServer"},{"location":"esp32cam.html#stopcameraserver","text":"void stopCameraServer( void ) Stop an HTTP server task and free resources.","title":" stopCameraServer"},{"location":"esp32cam.html#esp32webcam-endpoint-interfaces","text":"ESP32WebCam has endpoint interfaces for simple manipulation of image sensors over the network via an internally launched HTTP server, which follows the traditional HTTP request and response, not WebAPI or REST. It supports the HTTP GET 1 method and will be available after the HTTP server is started by the ESP32WebCam::startCameraServer function. If you are using Visual Studio Code as your build system for Arduino sketch, you can easily experiment with the ESP32WebCam endpoint interface using the VSCode extension. REST Client is an excellent VSCode extension that allows you to send HTTP requests directly from within the editor. The following screenshot shows the result of sending an HTTP request directly to the capture endpoint of ESP32WebCam using the REST Client on a VSCode with the PlatformIO build system. The top left editor pane is the sketch code described above, and the bottom pane is the serial monitor output of the sketch. The pane between the top and bottom panes is the REST Client. Run the sketch, and when the serial monitor shows a message that ESP32Cam has started the HTTP server, use the REST client to send an HTTP GET request as GET http://{HOST}:{PORT}/_capture (In the screenshot above, the request is sent to http://192.168.1.19:3000/_capture ) to the capture endpoint. 2 You will see the response of the image captured by ESP32-CAM in the right pane.","title":"ESP32WebCam Endpoint Interfaces"},{"location":"esp32cam.html#the-default-settings-for-the-endpoint-interface-provided-by-esp32webcam-are-as-follows","text":"Endpoint Default path Function Default value defined in ESP32WebCam.h Capture /_capture Responds as a captured image ESP32CAM_DEFAULT_PATH_CAPTURE Prompt /_prompt Save and load the captured image, Save the sensor settings ESP32CAM_DEFAULT_PATH_PROMPT Stream /_stream Stream image ESP32CAM_DEFAULT_PATH_STREAM","title":"The default settings for the endpoint interface provided by ESP32WebCam are as follows:"},{"location":"esp32cam.html#capture","text":"GET http://{HOST}:{PORT}{PATH} The capture endpoint responds captured image with the image/jpeg mime format. Parameters HOST Host address of ESP32-CAM. PORT Port number of HTTP server listening on. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. PATH A path for the capture endpoint. Response code 200 Content body contains captured image data.","title":" Capture"},{"location":"esp32cam.html#prompt","text":"GET http://{HOST}:{PORT}{PATH}?{QUERY} You can use the prompt endpoint to save the captured image to the SD card at that moment or in a timer cycle, save the sensor settings, and load them into the flash memory built into the ESP32 module. The instructions for the prompt action performed by ESP32WebCam are specified as the query string with \" key=value \" form for the parameters of the GET request. Parameters HOST Host address of ESP32-CAM. PORT Port number of HTTP server listening on. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. PATH A path for the capture endpoint. QUERY The QUERY that Prompt can accept are different for each feature. The query formats that can be specified and the corresponding functions are shown below. Response code 202 Request accepted. 400 Query string has syntax error, or Fatal error occurred. Content body has detailed error code.","title":" Prompt"},{"location":"esp32cam.html#the-following-features-are-currently-supported-by-the-prompt-endpoint","text":"Specifying by query string Function Behavior mf=oneshot[&fs={sd|mmc}][&filename=<FILENAME>] One-shot Take a one-shot image and save it to the SD card. mf=timershot[&fs={sd|mmc}][&filename=<FILENAME>][&period=<INTERVAL>] Timer-shot Repeatedly takes a one-shot image at specified an INTERVAL of seconds and saves it to the SD card. mf=distimer Disable timer Suspend timer for Timer-shot mf=entimer Enable timer Resume timer for Timer-shot mf=load Load settings Load the image sensor settings from the NVS mf=save Save settings Save the image sensor settings to the NVS The query formats that can be specified and their corresponding functions are described below. Functions: Specifies with the mf= query. oneshot Capture an image at the requested timing and save them to the SD card. Species either sd or mmc for the fs argument. If the fs argument does not exist, mmc is assumed. Saves the captured image with the file name specified by the filename argument; if the filename argument does not exist, it assumes a file name consisting of a prefix and a timestamp. In that case, the fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h is used as the prefix. timershot Repeatedly takes a one-shot image at specified an INTERVAL of seconds with period argument and saves it to the SD card. Species either sd or mmc for the fs argument. If the fs argument does not exist, mmc is assumed. Saves the captured image to a file whose name consists of the prefix and timestamp suffix specified by the filename argument. If the filename argument does not exist, the prefix will be assumed a fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h header file. distimer Temporarily stops the timer for the timershot . This can be resumed with entimer . entimer Resumes a timer-shot that was temporarily stopped by distimer . load Load the image sensor settings from NVS. save Save the image sensor settings to NVS. Whether it is SD or MMC depends on the hardware The ESP32 Arduino SD library supports two types of SD cards with different interfaces. Which type of SD card is used depends on the ESP32 module and needs to be chosen appropriately. In the case of the Ai-Thinker ESP32-CAM 3 , the ESP32 is wired to the SD slot with each HS2 signal . Hence, We can see from the schematic that it is using MMC.","title":"The following features are currently supported by the prompt endpoint:"},{"location":"esp32cam.html#stream","text":"GET http://{HOST}:{PORT}{PATH} The stream endpoint responds captured image with the image/jpeg mime format with multipart/x-mixed-replace HTTP header. Parameters HOST Host address of ESP32-CAM. PORT Port number of HTTP server listening on. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. PATH A path for the stream endpoint. Response code 200 Content body contains captured image data with multipart boundary.","title":" Stream"},{"location":"esp32cam.html#esp32cam-class-apis","text":"","title":"ESP32Cam Class APIs"},{"location":"esp32cam.html#constructor_1","text":"ESP32Cam() ESP32Cam( const CameraId model) Instantiate ESP32Cam. The image sensor is not initialized just by calling the constructor. To initialize the sensor, you need to call the init function. Parameters model Specifies the model of the onboard image sensor. The image sensor models that can be specified are as follows: ESP32Cam::CAMERA_MODEL_WROVER_KIT ESP32Cam::CAMERA_MODEL_ESP_EYE ESP32Cam::CAMERA_MODEL_M5STACK_NO_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_V2_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_WIDE ESP32Cam::CAMERA_MODEL_M5STACK_ESP32CAM ESP32Cam::CAMERA_MODEL_M5STACK_UNITCAM ESP32Cam::CAMERA_MODEL_AI_THINKER ESP32Cam::CAMERA_MODEL_TTGO_T_JOURNAL","title":" Constructor"},{"location":"esp32cam.html#getstatus","text":"esp_err_t getStatus(camera_status_t * status) Get the camera_status_t data structure from the image sensor. Parameters status Pointer to the buffer to store the acquired camera_status_t structure. Return value ESP_OK camera_status_t is read successfully. ESP_FAIL Image sensor is not initialized.","title":" getStatus"},{"location":"esp32cam.html#getframesize","text":"framesize_t getFramesize( void ) Get the current configuration of the image sensor frame size. Return value framesize_t The framesize_t enumeration value.","title":" getFramesize"},{"location":"esp32cam.html#getframeheight","text":"uint16_t getFrameHeight( void ) Returns the height of the current image frame in pixels. Return value uint16_t Height of the image frame.","title":" getFrameHeight"},{"location":"esp32cam.html#getframewidth","text":"uint16_t getFrameWidth( void ) Returns the width of the current image frame in pixels. Return value uint16_t Width of the image frame.","title":" getFrameWidth"},{"location":"esp32cam.html#init","text":"esp_err_t init( void ) esp_err_t init( const CameraId model) Initialize the image sensor. Parameters model Specifies the model of the onboard image sensor. The image sensor models that can be specified are as follows: ESP32Cam::CAMERA_MODEL_WROVER_KIT ESP32Cam::CAMERA_MODEL_ESP_EYE ESP32Cam::CAMERA_MODEL_M5STACK_NO_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_V2_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_WIDE ESP32Cam::CAMERA_MODEL_M5STACK_ESP32CAM ESP32Cam::CAMERA_MODEL_M5STACK_UNITCAM ESP32Cam::CAMERA_MODEL_AI_THINKER ESP32Cam::CAMERA_MODEL_TTGO_T_JOURNAL","title":" init"},{"location":"esp32cam.html#loadsettings","text":"esp_err_t loadSettings( const char * key = nullptr ) Load the image sensor settings from NVS in the ESP32 flash. Parameters key Specifies NVS key name. If key is nullptr or not specified, default key which defined by ESP32CAM_NVS_KEYNAME macro directive in ESP32Cam.h header file will be assumed. Return value ESP_OK The image sensor settings has been successfully loaded.","title":" loadSettings"},{"location":"esp32cam.html#savesettings","text":"esp_err_t saveSettings( const char * key = nullptr ) Save the current image sensor settings to NVS in the ESP32 flash. Parameters key Specifies NVS key name. If key is nullptr or not specified, default key which defined by ESP32CAM_NVS_KEYNAME macro directive in ESP32Cam.h header file will be assumed. Return value ESP_OK The image sensor settings has been successfully saved.","title":" saveSettings"},{"location":"esp32cam.html#setstatus","text":"esp_err_t setStatus( const camera_status_t & status) Set the content of camera_status_t structure to the image sensor. Parameters status Reference of the camera_status_t structure. Return value ESP_OK camera_status_t has been set successfully. ESP_FAIL Image sensor is not initialized.","title":" setStatus"},{"location":"esp32cam.html#setframesize","text":"esp_err_t setFramesize( const framesize_t framesize) Set the image sensor frame size. Parameters framesize The framesize_t enumeration value to be set. Return value ESP_OK Framesize has been set. ESP_ERR_CAMERA_FAILED_TO_SET_FRAME_SIZE Image sensor is not initialized, the framesize is invalid, or the pixel format is not JPEG.","title":" setFramesize"},{"location":"esp32cam.html#setimageformat","text":"esp_err_t setImageFormat( const pixformat_t format) Set the image format. Parameters format The pixformat_t enumeration value to be set. Return value ESP_OK Format has been set. ESP_ERR_CAMERA_FAILED_TO_SET_OUT_FORMAT Specified format is invalid. ESP_FAIL Image sensor is not initialized.","title":" setImageFormat"},{"location":"esp32cam.html#oneshot","text":"esp_err_t oneShot(fs :: SDFS & sd, const char * filename = nullptr ) esp_err_t oneShot(fs :: SDMMCFS & mmc, const char * filename = nullptr ) Take a one-shot image and save it to the SD card or MMC. This function writes to a file compliant with the ESP32 Arduino SD library . Either fs::SDFS or fs::SDMMCFS can be specified for the file system that represents sd or mmc . Parameters sd Specifies the SD file system when the SD card is wired with SPI interface. In usually, you can use a SD variable that is instantiated and exported globally by the ESP32 Arduino core. mmc Specifies the SD_MMC file system when the SD card is wired with HS2 interface. In usually, you can use a SD_MMC variable that is instantiated and exported globally by the ESP32 Arduino core. filename Specifies the file name when saving the captured image to the SD card. if the filename does not exist, it assumes a file name consisting of a prefix and a timestamp. In that case, the fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h is used as the prefix. Return value ESP_OK Format has been set. ESP_ERR_NOT_FOUND SD card is not mounted. ESP_FAIL Other error occurred.","title":" oneShot"},{"location":"esp32cam.html#timershot","text":"esp_err_t timerShot( const unsigned long period, fs :: SDFS & sd, const char * filePrefix = nullptr ) esp_err_t timerShot( const unsigned long period, fs :: SDMMCFS & mmc, const char * filePrefix = nullptr ) Repeatedly takes a one-shot image at specified an interval of seconds with period parameter and saves it to the SD card or MMC. This function writes to a file compliant with the ESP32 Arduino SD library . Either fs::SDFS or fs::SDMMCFS can be specified for the file system that represents sd or mmc . Parameters period Specifies the shooting interval time in second unit. sd Specifies the SD file system when the SD card is wired with SPI interface. In usually, you can use a SD variable that is instantiated and exported globally by the ESP32 Arduino core. mmc Specifies the SD_MMC file system when the SD card is wired with HS2 interface. In usually, you can use a SD_MMC variable that is instantiated and exported globally by the ESP32 Arduino core. filePrefix Specifies the prefix of file name when saving the captured image to the SD card. This function saves files each time whose name consists of the prefix and timestamp suffix specified by the filePrefix parameter. If the filePrefix does not exist, it assumes a fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h for the prefix. Return value ESP_OK Format has been set. ESP_ERR_NOT_FOUND SD card is not mounted. ESP_FAIL Other error occurred.","title":" timerShot"},{"location":"esp32cam.html#disabletimershot","text":"void disableTimerShot( void ) Temporarily stops the timerShot . To restart it, call enableTimerShot .","title":" disableTimerShot"},{"location":"esp32cam.html#enabletimershot","text":"void enableTimerShot( void ) Restarts the timerShot that was temporarily stopped by disableTimerShot .","title":" enableTimerShot"},{"location":"esp32cam.html#deq","text":"void deq( void ) Release a semaphore.","title":" deq"},{"location":"esp32cam.html#enq","text":"portBASE_TYPE enq(TickType_t ms) Take a semaphore to prevent resource collisions with the image sensor. ESP32Cam uses a semaphore for each of oneShot and timerShot to prevent image sensor resources from colliding while performing each other's tasks. The enq function reserves a semaphore to wait for a subsequent oneShot or timerShot task. Parameters ms Specifies the maximum waiting time in milliseconds for a semaphore to be released. If portMAX_DELAY is specified, it will wait indefinitely for the semaphore to be released. Return value pdTRUE Semaphore was reserved. !pdTRUE Semaphore was not released within the specified ms time.","title":" enq"},{"location":"esp32cam.html#webcamserver-like-as-camerawebserver","text":"The WebCamServer.ino sketch combines AutoConnectAux's custom web pages with native HTML pages. The image viewer is placed on the native HTML page using the img tag, and the slide-in navigation panel is incorporated using CSS. AutoConnect is only directly involved in the image sensor setup page, which is JSON defined in CAMERA_SETUP_PAGE . The setSensor function in the sketch is a handler for a custom web page for CAMERA_SETUP_PAGE , and its role is to communicate the sensor settings to the ESP32 camera driver via ESP32Cam. In the WebCamServer.ino sketch, most of the front-end is taken care of by the UI, which is a web page written in HTML. The slide-in menu allows navigation to stream images, capture still images, save a one-shot image to the SD card, and the timer-shot. Image streaming and capture are achieved by giving the URLs of the Stream endpoint and Capture endpoint in the src attribute of the img tag in the HTML using JavaScript DOM interface. < body > < li id = \"onair\" onclick = \"stream(!isStreaming())\" > Start Streaming </ li > < img id = \"img-frame\" /> </ body > const onAir = document. getElementById ( 'onair' ); const imgFrame = document. getElementById ( 'img-frame' ); function isStreaming () { status . innerText = null ; return onAir . innerText . startsWith ( \"Stop\" ); } function stream ( onOff ) { if ( onOff && ! isStreaming ()) { window. stop (); imgFrame . src = streamUrl ; onAir . innerText = onAir . innerText . replace ( \"Start\" , \"Stop\" ); content . focus (); } else if ( ! onOff && isStreaming ()) { window. stop (); imgFrame . src = noa ; onAir . innerText = onAir . innerText . replace ( \"Stop\" , \"Start\" ); } } Also, One-shot and timer-shot also use JavaScript Fetch API to send a query string compliant with each function to the Prompt endpoint. < li id = \"oneshot\" onclick = \"oneshot()\" > One-Shot </ li > < li >< label for = \"period\" > Period [s] </ label >< input type = \"number\" name = \"peirod\" id = \"period\" min = \"1\" value = \"1\" pattern = \"\\d*\" /></ li > < li >< input type = \"button\" value = \"ARM\" onclick = \"arm()\" /></ li > var promptUrl = endpoint ( host , promptPath , port ); function endpoint ( host , path , port ) { var url = new URL ( path , \"http://\" + host ); url . port = port ; return url ; } function prompt ( url ) { var res ; stream ( false ); fetch ( url ) . then ( response => { res = \"status:\" + response . status + \" \" ; if ( ! response . ok ) { return response . text (). then ( text => { throw new Error ( text ); }); } else { status . style . color = '#297acc' ; status . innerText = res + response . statusText ; } }) . catch ( err => { var desc = err . message ; if ( err . message . indexOf ( \"0x0103\" , 1 ) > 0 ) { desc = \"SD not mounted\" ; } if ( err . message . indexOf ( \"0x0105\" , 1 ) > 0 ) { desc = \"SD open failed\" ; } status . style . color = '#cc2929' ; status . innerText = res + desc ; }); } function oneshot () { promptUrl . search = \"?mf=oneshot&fs=mmc\" ; prompt ( promptUrl ); } function arm () { promptUrl . search = \"?mf=timershot&fs=mmc&period=\" + document. getElementById ( 'period' ). value ; prompt ( promptUrl ); } The following diagram shows the program structure of the WebCamServer.ino sketch. Its structure is somewhat more complex than the simple sketch presented at the beginning of this chapter because of the native HTML intervening. ESP32WebCam endpoint interface supports only HTTP GET method, it cannot respond to other HTTP methods such as POST. \u21a9 Do not use the REST Client to send requests to the stream endpoints, the REST Client does not fully support multipart/x-mixed-replace mime. \u21a9 When using MMC on AI-Thinker ES32-CAM, the LED flash on the module blinks every time the SD is accessed, because the HS2 DATA1 signal is wired to the driver transistor of the LED FLASH . I can't envision why HS2 DATA1 signal was chosen to drive the LED. \u21a9","title":"WebCamServer like as CameraWebServer"},{"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 . After updating to AutoConnect v1.0.0, established APs disappear from Open SSIDs with ESP32. \u00b6 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 which the examples folder contains. 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. 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. Cannot automatically reconnect to a WiFi Hotspot \u00b6 WiFi Hotspot ability using a cell phone has no official designation name, but it is commonly referred to as a mobile hotspot or a Personal Hotspot. Generally, this feature using data communication with your cellular to ensure the connection to the Internet. AutoConnect allows you to connect to a WiFi hotspot that has been temporarily launched as an access point and then stores a credential for establishing a connection in the same way as a regular fixed access point. However, there's a case where it may not be able to reconnect automatically to a known WiFi hotspot. For security reasons, some device operating systems randomly change the MAC address of the WiFi hotspot at each boot for a hotspot. (Especially iOS14) AutoConnect uses the BSSID to find the known SSID from among WiFi signals being broadcast. (it's the MAC address) This method works if the BSSID that the hotspot originates is fixed, but AutoConnect will not be able to find known SSIDs when it changes. Consider activating the AUTOCONNECT_APKEY_SSID definition if you want to reconnect automatically to a known WiFi hotspot. Cannot immobilize the MAC address of Personal Hotspot We may not be able to immobilize the MAC address of Personal Hotspot on iOS14. This specification change seems to be related to the private network connection enhancement of iOS14 devices. I found this change during the testing phase, but it is not the confirmed information. (iOS14 offers an option to immobilize the MAC address as a client device, but there is still no option to immobilize it where the device became a hotspot) Captive portal does not pop up. \u00b6 If your ESP module is already transparent to the internet, the captive portal screen will not pop up even if AutoConnectConfig::retainPortal is enabled. Some people have mistaken sometimes about the behavioral condition of the Captive portal, it only pops up automatically when the ESP module is disconnected state from the Internet. We will hypothesize that you keep the ESP module with AP_STA mode by specifing the retainPortal and already connect to one of the access points which has Internet transparency as a WiFi client. At this time, your ESP module can already quote the DNS globally. Even if you take out the cellphone and access the esp32ap , the OS of your cellphone will determine that the access point (i.e. esp32ap ) is transparent to the Internet. That is, the captive portal does not pop up. Compile error due to File system header file not found \u00b6 In PlatformIO , it may occur compilation error such as the bellows: In file included from C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ AutoConnect \\ src \\ AutoConnect.h: 30 : 0 , from src / main.cpp: 28 : C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ PageBuilder \\ src \\ PageBuilder.h: 88 : 27 : fatal error: SPIFFS.h: No such file or directory In file included from C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ AutoConnect \\ src \\ AutoConnect.h: 30 , from src \\ main.cpp: 28 : C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ PageBuilder \\ src \\ PageBuilder.h: 93 : 17 : fatal error: LittleFS.h: No such file or directory This compilation error is due to PlatformIO's Library Dependency Finder not being able to detect #include with default mode chain . Chain mode does not recursively evaluate .cpp files. However, AutoConnect determines the default file system at compile time, depending on the platform. In order for LDF to detect it correctly, it is necessary to recursively scan #include of the header file, which depends on the file system used. To avoid compilation errors in PlatformIO, specify lib_ldf_mode in platformio.ini as follows: [env] lib_ldf_mode = deep You should specify deep with lib_ldf_mode . Compile error occurs due to the text section exceeds \u00b6 When building the sketch, you may receive a compilation error message similar that the text section exceeds the available space on the board . This error occurs with ESP32 arduino core 2.0.0 or later. Since ESP32 arduino core 2.0.0, the object size of the library tends to be oversized, and the AutoConnect object size is also bloated. And also for some example sketches such as mqttRSSI, the BIN size after linkage does not fit in the default partition scheme. I'm aware of this issue 1 and trying to reduce the size of the AutoConnect object, but for now, changing the partition table at build is the most effective workaround. See How much memory does AutoConnect consume? for information on how to change the partition table. Compile error that 'EEPROM' was not declared in this scope \u00b6 If the user sketch includes the header file as EEPROM.h , this compilation error may occur depending on the order of the #include directives. AutoConnectCredentials.h including in succession linked from AutoConnect.h defines NO_GLOBAL_EEPROM internally, so if your sketch includes EEPROM.h after AutoConnect.h , the EEPROM global variable will be lost. If you use EEPROM with your sketch, declare #include <EEPROM.h> in front of #include <AutoConnect.h> . Compile error that 'ESPhttpUpdate' was not declared in this scope \u00b6 If the user sketch includes the header file as ESP8266httpUpdate.h , this compilation error may occur depending on the order of the #include directives. AutoConnectUpdate.h including in succession linked from AutoConnect.h defines NO_GLOBAL_HTTPUPDATE internally, so if your sketch includes ESP8266httpUpdate.h after AutoConnect.h , the ESPhttpUpdate global variable will be lost. You can avoid a compile error in one of two ways: Disable an AutoConnectUpdate feature if you don't need. You can disable the AutoConnectUpdate feature by commenting out the AUTOCONNECT_USE_UPDATE macro in the AutoConnectDefs.h header file. #define AUTOCONNECT_USE_UPDATE Change the order of #include directives. With the Sketch, #include <ESP8266httpUpdate.h> before #include <AutoConnect.h> . 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 1 st -WiFi.begin . ESP8266 remembers the last SSID successfully connected and will use at the next. It means SoftAP will only start up when the first WiFi.begin() fails. The saved SSID would be cleared by WiFi.disconnect() with WIFI_STA mode. If you do not want automatic reconnection, you can erase the memorized SSID with the following simple sketch. #include <ESP8266WiFi.h> void setup () { delay( 1000 ); Serial.begin( 115200 ); WiFi.mode(WIFI_STA); delay( 100 ); WiFi.begin(); if (WiFi.waitForConnectResult() == WL_CONNECTED) { WiFi.disconnect(); while (WiFi.status() == WL_CONNECTED) delay( 100 ); } Serial.println( \"WiFi disconnected.\" ); } void loop () { delay( 1000 ); } You can interactively check the WiFi state of ESP8266. Please try ESPShaker . It is ESP8266 interactive serial command processor. Does not response from /_ac. \u00b6 Probably WiFi.begin failed with the specified SSID. Activating the debug printing will help you to track down the cause. 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 2 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 do I detach the ArdunoJson? \u00b6 If you don't use ArduinoJson at all, you can detach it from the library. By detaching ArduinoJson, the binary size after compilation can be reduced. You can implement custom Web pages with your sketches without using ArduinoJson. Its method is described in Custom Web pages w/o JSON . To completely remove ArduinoJson at compile-time from the binary, you need to define a special #define directive for it. And if you define the directive, you will not be able to use the OTA update with the update server feature as well as AutoConnectAux described by JSON. To exclude ArduinoJson at compile-time, give the following #define directive as a compiler option such as the arduino-cli or PlatformIO . #define AUTOCONNECT_NOUSE_JSON For example, add the following description to the [env] section of the platformio.ini file with the build-flags . build-flags = -DAUTOCONNECT_NOUSE_JSON 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 <a></a> tag in the generating HTML. < a style = \"background-color:SteelBlue; display:inline-block; padding:7px 13px; text-decoration:none;\" href = \"/_ac\" > MENU </ a > How much memory does AutoConnect consume? \u00b6 Sketch size \u00b6 For ESP8266 It increases about 53K bytes compared to the case without AutoConnect. A sketch size of the most simple example introduced in the Getting started is about 330K bytes. (270K byte without AutoConnect) For ESP32 The BIN size of the sketch grows to over 1M bytes. In the case of a sketch with many custom Web pages, when applying the partition table for the default scheme, the remaining flash size that can be utilized by the user application may be less than 200K bytes. Therefore, it is advisable to resize the partition to make more available space for the application. The ESP32 arduino core has various partition schemes , and you can choose it according to your Sketch feature. You can change the partition scheme from the Tools > Partition Scheme menu of Arduino IDE. Change the partition scheme with PlatformIO Use board_build.partitions directive with platformio.ini . [env:esp32dev] board_build.partitions = min_spiffs.csv Details for the PlatformIO documentation . Heap size \u00b6 It consumes about 2K bytes in the static and about 12K bytes are consumed at the moment when menu executed. How placing a style-qualified AutoConnectText horizontally? \u00b6 When the style parameter is specified for AutoConnectText , it is always enclosed by the <div> tag, so the element placement direction is vertical and subsequent elements cannot be horizontal. If you want to place an element after AutoConnectText with the style, you can place the AutoConnectText horizontally by specifying the display CSS property with inline or inline-block in the style value. { \"name\" : \"text1\" , \"type\" : \"ACText\" , \"value\" : \"Hello,\" , \"style\" : \"display:inline;color:#f5ad42;font-weight:bold;margin-right:3px\" }, { \"name\" : \"text2\" , \"type\" : \"ACText\" , \"value\" : \"world\" , \"posterior\" : \"br\" } See also AutoConnectText chapter, CSS Flow Layout by MDN . How placing HTML elements undefined in AutoConnectElements? \u00b6 AutoConnectElement can be applied in many cases when trying to place HTML elements that are undefined in AutoConnectElemets on custom Web pages. See Handling the custom Web Pages section. I cannot complete to Wi-Fi login from smartphone. \u00b6 Because AutoConnect does not send a login success response to the captive portal requests from the smartphone. The login success response varies iOS, Android and Windows. By analyzing the request URL of different login success inquiries for each OS, the correct behavior can be implemented, but not yet. Please resets ESP8266 from the AutoConnect menu. I cannot see the custom Web page. \u00b6 If the Sketch is correct, a JSON syntax error may have occurred. In this case, activate the AC_DEBUG and rerun. If you take the message of JSON syntax error, the Json Assistant helps syntax checking. This online tool is provided by the author of ArduinoJson and is most consistent for the AutoConnect. Saved credentials are wrong or lost. \u00b6 A structure of AutoConnect saved credentials has changed two times throughout enhancement with v1.0.3 and v1.1.0. In particular, due to enhancements in v1.1.0, AutoConnectCredential data structure has lost the backward compatibility with previous versions. You must erase the flash of the ESP module using the esptool completely to save the credentials correctly with v1.1.0. esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash Some AutoConnect page is cut off. \u00b6 It may be two possibilities as follows: Packet loss during transmission due to a too weak WiFi signal. Heap is insufficient memory. AutoConnect entrusts HTML generation to PageBuilder that makes heavy use the String::concatenate function and causes memory fragmentation. This is a structural problem with PageBuilder, but it is difficult to solve immediately. If this issue produces with your sketch, Reloading the page may recover. Also, you can check the memory running out status by rebuilding the Sketch with PageBuilder's debug log option turned on. If the heap memory is insufficient, the following message is displayed on the serial console. [PB] Failed building, free heap:<Size of free heap> Submit element in a custom Web page does not react. \u00b6 Is there the AutoConnectElements element named SUBMIT in the custom Web page? (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. You can not use SUBMIT as the element name of AutoConnectElements in a custom Web page that declares the AutoConnectSubmit element. Unable to change any macro definitions by the Sketch. \u00b6 The various macro definitions that determine the configuration of AutoConnect cannot be redefined by hard-coding with Sketch. The compilation unit has a different AutoConnect library itself than the Sketch, and the configuration definitions in AutoConnectDefs.h are quoted in the compilation for AutoConnect only. For example, the following Sketch does not enable AC_DEBUG and does not change HTTP port also the menu background color: #define AC_DEBUG // No effect #define AUTOCONNECT_HTTPPORT 8080 // No effect #define AUTOCONNECT_MENUCOLOR_BACKGROUND \"#696969\" // No effect #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect Portal; void setup () { Portal.begin(); } void loop () { Portal.handleClient(); } To enable them, edit AutoConnectDefs.h as the library source code directly, or supply them as the external parameters using a build system like PlatformIO with platformio.ini : platform = espressif8266 board = nodemcuv2 board_build.f_cpu = 160000000L board_build.f_flash = 80000000L board_build.flash_mode = dio board_build.filesystem = littlefs build_flags = -DAC_DEBUG -DAUTOCONNECT_HTTPPORT = 8080 -DAUTOCONNECT_MENUCOLOR_BACKGROUND = '\"#696969\"' Unauthorize error without prompting the login dialog. \u00b6 The custom web pages that require authentication will occur unauthorized error always without prompting the login dialog under the captive portal state on some OS. This is a captive portal restriction and expected behavior. The captive portal web browser is almost a complete web browser, but while the captive portal session restricts the response to WWW-authenticate requests. (In intrinsically, the captive portal is a mechanism for authentication in itself) Once you exit from the captive portal session and connect SoftAP IP directly afresh, you can access custom web pages along with prompting a login dialog. Still, not stable with my sketch. \u00b6 If AutoConnect behavior is not stable with your sketch, you can try the following measures. 1. Change WiFi channel \u00b6 Both ESP8266 and ESP32 can only work on one channel at any given moment. This will cause your station to lose connectivity on the channel hosting the captive portal. If the channel of the AP which you want to connect is different from the SoftAP channel, the operation of the captive portal will not respond with the screen of the AutoConnect connection attempt remains displayed. In such a case, please try to configure the channel with AutoConnectConfig to match the access point. AutoConnect portal; AutoConnectConfig config; config.channel = 3 ; // Specifies a channel number that matches the AP portal.config(config); // Apply channel configuration portal.begin(); // Start the portal Channel selection guide Espressif Systems has released a channel selection guide . 2. Change the arduino core version \u00b6 I recommend change installed an arduino core version to the upstream when your sketch is not stable with AutoConnect on each board. with ESP8266 arduino core \u00b6 You can select the lwIP variant to contribute for the stable behavior. The lwIP v2 Lower memory option of Arduino IDE for core version 2.4.2 is based on the lwIP-v2. On the other hand, the core version 2.5.0 upstream is based on the lwIP-2.1.2 stable release. You can select the option from Arduino IDE as Tool menu, if you are using ESP8266 core 2.5.0. It can be select lwIP v2 Lower Memory option. (not lwIP v2 Lower Memory (no features) ) It is expected to improve response performance and stability. with ESP32 arduino core \u00b6 The arduino-esp32 is still under development. It is necessary to judge whether the problem cause of the core or AutoConnect. Trace the log with the esp32 core and the AutoConnect debug option enabled for problem diagnosis and please you check the issue of arduino-esp32 . The problem that your sketch possesses may already have been solved. 3. Turn on the debug log options \u00b6 To fully enable for the AutoConnect debug logging options, change the following two files. AutoConnectDefs.h #define AC_DEBUG PageBuilder.h 3 #define PB_DEBUG How to enable the AC_DEBUG, PB_DEBUG See Debug Print section, and one similarly too. 4. Reports the issue to AutoConnect Github repository \u00b6 If you can not solve AutoConnect problems please report to Issues . And please make your question comprehensively, not a statement. Include all relevant information to start the problem diagnostics as follows: 4 Hardware module Arduino core version Including the upstream commit ID if necessary Operating System which you use Your smartphone OS and version (Especially for Android) Your AP information (IP, channel) if related lwIP variant Problem description If you have a STACK DUMP decoded result with formatted by the code block tag the Sketch code with formatted by the code block tag (Reduce to the reproducible minimum code for the problem) Debug messages output (Including arduino core) I will make efforts to solve as quickly as possible. But I would like you to know that it is not always possible. Thank you. In this case, the underlying factor is mainly the bloat of ESP-IDF. This issue is also being discussed by many contributors of the Arduino core development community and efforts are underway to make a solution. Refs: espressif/arduino-esp32/issue#5630 \u21a9 This issue has been resolved in ESP8266 core 2.5.0 and later. \u21a9 PageBuilder.h exists in the libraries/PageBuilder/src directory under your sketch folder. \u21a9 Without this information, the reproducibility of the problem is reduced, making diagnosis and analysis difficult. \u21a9","title":"FAQ"},{"location":"faq.html#after-connected-autoconnect-menu-performs-but-no-happens","text":"If you can access the AutoConnect root path as http://ESP8266IPADDRESS/_ac from browser, probably the Sketch uses ESP8266WebServer::handleClient() without AutoConnect::handleRequest() . For AutoConnect menus to work properly, call AutoConnect::handleRequest() after ESP8266WebServer::handleClient() invoked, or use AutoConnect::handleClient() . AutoConnect::handleClient() is equivalent ESP8266WebServer::handleClient combined AutoConnect::handleRequest() . See also the explanation here .","title":" After connected, AutoConnect menu performs but no happens."},{"location":"faq.html#after-updating-to-autoconnect-v100-established-aps-disappear-from-open-ssids-with-esp32","text":"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 which the examples folder contains. 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.","title":" After updating to AutoConnect v1.0.0, established APs disappear from Open SSIDs with ESP32."},{"location":"faq.html#an-esp8266ap-as-softap-was-connected-but-captive-portal-does-not-start","text":"Captive portal detection could not be trapped. It is necessary to disconnect and reset ESP8266 to clear memorized connection data in ESP8266. Also, It may be displayed on the smartphone if the connection information of esp8266ap is wrong. In that case, delete the connection information of esp8266ap memorized by the smartphone once.","title":" An esp8266ap as SoftAP was connected but Captive portal does not start."},{"location":"faq.html#cannot-automatically-reconnect-to-a-wifi-hotspot","text":"WiFi Hotspot ability using a cell phone has no official designation name, but it is commonly referred to as a mobile hotspot or a Personal Hotspot. Generally, this feature using data communication with your cellular to ensure the connection to the Internet. AutoConnect allows you to connect to a WiFi hotspot that has been temporarily launched as an access point and then stores a credential for establishing a connection in the same way as a regular fixed access point. However, there's a case where it may not be able to reconnect automatically to a known WiFi hotspot. For security reasons, some device operating systems randomly change the MAC address of the WiFi hotspot at each boot for a hotspot. (Especially iOS14) AutoConnect uses the BSSID to find the known SSID from among WiFi signals being broadcast. (it's the MAC address) This method works if the BSSID that the hotspot originates is fixed, but AutoConnect will not be able to find known SSIDs when it changes. Consider activating the AUTOCONNECT_APKEY_SSID definition if you want to reconnect automatically to a known WiFi hotspot. Cannot immobilize the MAC address of Personal Hotspot We may not be able to immobilize the MAC address of Personal Hotspot on iOS14. This specification change seems to be related to the private network connection enhancement of iOS14 devices. I found this change during the testing phase, but it is not the confirmed information. (iOS14 offers an option to immobilize the MAC address as a client device, but there is still no option to immobilize it where the device became a hotspot)","title":" Cannot automatically reconnect to a WiFi Hotspot"},{"location":"faq.html#captive-portal-does-not-pop-up","text":"If your ESP module is already transparent to the internet, the captive portal screen will not pop up even if AutoConnectConfig::retainPortal is enabled. Some people have mistaken sometimes about the behavioral condition of the Captive portal, it only pops up automatically when the ESP module is disconnected state from the Internet. We will hypothesize that you keep the ESP module with AP_STA mode by specifing the retainPortal and already connect to one of the access points which has Internet transparency as a WiFi client. At this time, your ESP module can already quote the DNS globally. Even if you take out the cellphone and access the esp32ap , the OS of your cellphone will determine that the access point (i.e. esp32ap ) is transparent to the Internet. That is, the captive portal does not pop up.","title":" Captive portal does not pop up."},{"location":"faq.html#compile-error-due-to-file-system-header-file-not-found","text":"In PlatformIO , it may occur compilation error such as the bellows: In file included from C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ AutoConnect \\ src \\ AutoConnect.h: 30 : 0 , from src / main.cpp: 28 : C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ PageBuilder \\ src \\ PageBuilder.h: 88 : 27 : fatal error: SPIFFS.h: No such file or directory In file included from C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ AutoConnect \\ src \\ AutoConnect.h: 30 , from src \\ main.cpp: 28 : C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ PageBuilder \\ src \\ PageBuilder.h: 93 : 17 : fatal error: LittleFS.h: No such file or directory This compilation error is due to PlatformIO's Library Dependency Finder not being able to detect #include with default mode chain . Chain mode does not recursively evaluate .cpp files. However, AutoConnect determines the default file system at compile time, depending on the platform. In order for LDF to detect it correctly, it is necessary to recursively scan #include of the header file, which depends on the file system used. To avoid compilation errors in PlatformIO, specify lib_ldf_mode in platformio.ini as follows: [env] lib_ldf_mode = deep You should specify deep with lib_ldf_mode .","title":" Compile error due to File system header file not found"},{"location":"faq.html#compile-error-occurs-due-to-the-text-section-exceeds","text":"When building the sketch, you may receive a compilation error message similar that the text section exceeds the available space on the board . This error occurs with ESP32 arduino core 2.0.0 or later. Since ESP32 arduino core 2.0.0, the object size of the library tends to be oversized, and the AutoConnect object size is also bloated. And also for some example sketches such as mqttRSSI, the BIN size after linkage does not fit in the default partition scheme. I'm aware of this issue 1 and trying to reduce the size of the AutoConnect object, but for now, changing the partition table at build is the most effective workaround. See How much memory does AutoConnect consume? for information on how to change the partition table.","title":" Compile error occurs due to the text section exceeds"},{"location":"faq.html#compile-error-that-eeprom-was-not-declared-in-this-scope","text":"If the user sketch includes the header file as EEPROM.h , this compilation error may occur depending on the order of the #include directives. AutoConnectCredentials.h including in succession linked from AutoConnect.h defines NO_GLOBAL_EEPROM internally, so if your sketch includes EEPROM.h after AutoConnect.h , the EEPROM global variable will be lost. If you use EEPROM with your sketch, declare #include <EEPROM.h> in front of #include <AutoConnect.h> .","title":" Compile error that 'EEPROM' was not declared in this scope"},{"location":"faq.html#compile-error-that-esphttpupdate-was-not-declared-in-this-scope","text":"If the user sketch includes the header file as ESP8266httpUpdate.h , this compilation error may occur depending on the order of the #include directives. AutoConnectUpdate.h including in succession linked from AutoConnect.h defines NO_GLOBAL_HTTPUPDATE internally, so if your sketch includes ESP8266httpUpdate.h after AutoConnect.h , the ESPhttpUpdate global variable will be lost. You can avoid a compile error in one of two ways: Disable an AutoConnectUpdate feature if you don't need. You can disable the AutoConnectUpdate feature by commenting out the AUTOCONNECT_USE_UPDATE macro in the AutoConnectDefs.h header file. #define AUTOCONNECT_USE_UPDATE Change the order of #include directives. With the Sketch, #include <ESP8266httpUpdate.h> before #include <AutoConnect.h> .","title":" Compile error that 'ESPhttpUpdate' was not declared in this scope"},{"location":"faq.html#connection-lost-immediately-after-establishment-with-ap","text":"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.","title":" Connection lost immediately after establishment with AP"},{"location":"faq.html#data-saved-to-eeprom-is-different-from-my-sketch-wrote","text":"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.","title":" Data saved to EEPROM is different from my sketch wrote."},{"location":"faq.html#does-not-appear-esp8266ap-in-smartphone","text":"Maybe it is successfully connected at the 1 st -WiFi.begin . ESP8266 remembers the last SSID successfully connected and will use at the next. It means SoftAP will only start up when the first WiFi.begin() fails. The saved SSID would be cleared by WiFi.disconnect() with WIFI_STA mode. If you do not want automatic reconnection, you can erase the memorized SSID with the following simple sketch. #include <ESP8266WiFi.h> void setup () { delay( 1000 ); Serial.begin( 115200 ); WiFi.mode(WIFI_STA); delay( 100 ); WiFi.begin(); if (WiFi.waitForConnectResult() == WL_CONNECTED) { WiFi.disconnect(); while (WiFi.status() == WL_CONNECTED) delay( 100 ); } Serial.println( \"WiFi disconnected.\" ); } void loop () { delay( 1000 ); } You can interactively check the WiFi state of ESP8266. Please try ESPShaker . It is ESP8266 interactive serial command processor.","title":" Does not appear esp8266ap in smartphone."},{"location":"faq.html#does-not-response-from-_ac","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 2 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-do-i-detach-the-ardunojson","text":"If you don't use ArduinoJson at all, you can detach it from the library. By detaching ArduinoJson, the binary size after compilation can be reduced. You can implement custom Web pages with your sketches without using ArduinoJson. Its method is described in Custom Web pages w/o JSON . To completely remove ArduinoJson at compile-time from the binary, you need to define a special #define directive for it. And if you define the directive, you will not be able to use the OTA update with the update server feature as well as AutoConnectAux described by JSON. To exclude ArduinoJson at compile-time, give the following #define directive as a compiler option such as the arduino-cli or PlatformIO . #define AUTOCONNECT_NOUSE_JSON For example, add the following description to the [env] section of the platformio.ini file with the build-flags . build-flags = -DAUTOCONNECT_NOUSE_JSON","title":" How do I detach the ArdunoJson?"},{"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 <a></a> tag in the generating HTML. < a style = \"background-color:SteelBlue; display:inline-block; padding:7px 13px; text-decoration:none;\" href = \"/_ac\" > MENU </ a >","title":" How locate the link button to the  AutoConnect menu?"},{"location":"faq.html#how-much-memory-does-autoconnect-consume","text":"","title":" How much memory does AutoConnect consume?"},{"location":"faq.html#sketch-size","text":"For ESP8266 It increases about 53K bytes compared to the case without AutoConnect. A sketch size of the most simple example introduced in the Getting started is about 330K bytes. (270K byte without AutoConnect) For ESP32 The BIN size of the sketch grows to over 1M bytes. In the case of a sketch with many custom Web pages, when applying the partition table for the default scheme, the remaining flash size that can be utilized by the user application may be less than 200K bytes. Therefore, it is advisable to resize the partition to make more available space for the application. The ESP32 arduino core has various partition schemes , and you can choose it according to your Sketch feature. You can change the partition scheme from the Tools > Partition Scheme menu of Arduino IDE. Change the partition scheme with PlatformIO Use board_build.partitions directive with platformio.ini . [env:esp32dev] board_build.partitions = min_spiffs.csv Details for the PlatformIO documentation .","title":"Sketch size"},{"location":"faq.html#heap-size","text":"It consumes about 2K bytes in the static and about 12K bytes are consumed at the moment when menu executed.","title":"Heap size"},{"location":"faq.html#how-placing-a-style-qualified-autoconnecttext-horizontally","text":"When the style parameter is specified for AutoConnectText , it is always enclosed by the <div> tag, so the element placement direction is vertical and subsequent elements cannot be horizontal. If you want to place an element after AutoConnectText with the style, you can place the AutoConnectText horizontally by specifying the display CSS property with inline or inline-block in the style value. { \"name\" : \"text1\" , \"type\" : \"ACText\" , \"value\" : \"Hello,\" , \"style\" : \"display:inline;color:#f5ad42;font-weight:bold;margin-right:3px\" }, { \"name\" : \"text2\" , \"type\" : \"ACText\" , \"value\" : \"world\" , \"posterior\" : \"br\" } See also AutoConnectText chapter, CSS Flow Layout by MDN .","title":" How placing a style-qualified AutoConnectText horizontally?"},{"location":"faq.html#how-placing-html-elements-undefined-in-autoconnectelements","text":"AutoConnectElement can be applied in many cases when trying to place HTML elements that are undefined in AutoConnectElemets on custom Web pages. See Handling the custom Web Pages section.","title":" How placing HTML elements undefined in AutoConnectElements?"},{"location":"faq.html#i-cannot-complete-to-wi-fi-login-from-smartphone","text":"Because AutoConnect does not send a login success response to the captive portal requests from the smartphone. The login success response varies iOS, Android and Windows. By analyzing the request URL of different login success inquiries for each OS, the correct behavior can be implemented, but not yet. Please resets ESP8266 from the AutoConnect menu.","title":" I cannot complete to Wi-Fi login from smartphone."},{"location":"faq.html#i-cannot-see-the-custom-web-page","text":"If the Sketch is correct, a JSON syntax error may have occurred. In this case, activate the AC_DEBUG and rerun. If you take the message of JSON syntax error, the Json Assistant helps syntax checking. This online tool is provided by the author of ArduinoJson and is most consistent for the AutoConnect.","title":" I cannot see the custom Web page."},{"location":"faq.html#saved-credentials-are-wrong-or-lost","text":"A structure of AutoConnect saved credentials has changed two times throughout enhancement with v1.0.3 and v1.1.0. In particular, due to enhancements in v1.1.0, AutoConnectCredential data structure has lost the backward compatibility with previous versions. You must erase the flash of the ESP module using the esptool completely to save the credentials correctly with v1.1.0. esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash","title":" Saved credentials are wrong or lost."},{"location":"faq.html#some-autoconnect-page-is-cut-off","text":"It may be two possibilities as follows: Packet loss during transmission due to a too weak WiFi signal. Heap is insufficient memory. AutoConnect entrusts HTML generation to PageBuilder that makes heavy use the String::concatenate function and causes memory fragmentation. This is a structural problem with PageBuilder, but it is difficult to solve immediately. If this issue produces with your sketch, Reloading the page may recover. Also, you can check the memory running out status by rebuilding the Sketch with PageBuilder's debug log option turned on. If the heap memory is insufficient, the following message is displayed on the serial console. [PB] Failed building, free heap:<Size of free heap>","title":" Some AutoConnect page is cut off."},{"location":"faq.html#submit-element-in-a-custom-web-page-does-not-react","text":"Is there the AutoConnectElements element named SUBMIT in the custom Web page? (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. You can not use SUBMIT as the element name of AutoConnectElements in a custom Web page that declares the AutoConnectSubmit element.","title":" Submit element in a custom Web page does not react."},{"location":"faq.html#unable-to-change-any-macro-definitions-by-the-sketch","text":"The various macro definitions that determine the configuration of AutoConnect cannot be redefined by hard-coding with Sketch. The compilation unit has a different AutoConnect library itself than the Sketch, and the configuration definitions in AutoConnectDefs.h are quoted in the compilation for AutoConnect only. For example, the following Sketch does not enable AC_DEBUG and does not change HTTP port also the menu background color: #define AC_DEBUG // No effect #define AUTOCONNECT_HTTPPORT 8080 // No effect #define AUTOCONNECT_MENUCOLOR_BACKGROUND \"#696969\" // No effect #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect Portal; void setup () { Portal.begin(); } void loop () { Portal.handleClient(); } To enable them, edit AutoConnectDefs.h as the library source code directly, or supply them as the external parameters using a build system like PlatformIO with platformio.ini : platform = espressif8266 board = nodemcuv2 board_build.f_cpu = 160000000L board_build.f_flash = 80000000L board_build.flash_mode = dio board_build.filesystem = littlefs build_flags = -DAC_DEBUG -DAUTOCONNECT_HTTPPORT = 8080 -DAUTOCONNECT_MENUCOLOR_BACKGROUND = '\"#696969\"'","title":" Unable to change any macro definitions by the Sketch."},{"location":"faq.html#unauthorize-error-without-prompting-the-login-dialog","text":"The custom web pages that require authentication will occur unauthorized error always without prompting the login dialog under the captive portal state on some OS. This is a captive portal restriction and expected behavior. The captive portal web browser is almost a complete web browser, but while the captive portal session restricts the response to WWW-authenticate requests. (In intrinsically, the captive portal is a mechanism for authentication in itself) Once you exit from the captive portal session and connect SoftAP IP directly afresh, you can access custom web pages along with prompting a login dialog.","title":" Unauthorize error without prompting the login dialog."},{"location":"faq.html#still-not-stable-with-my-sketch","text":"If AutoConnect behavior is not stable with your sketch, you can try the following measures.","title":" Still, not stable with my sketch."},{"location":"faq.html#1-change-wifi-channel","text":"Both ESP8266 and ESP32 can only work on one channel at any given moment. This will cause your station to lose connectivity on the channel hosting the captive portal. If the channel of the AP which you want to connect is different from the SoftAP channel, the operation of the captive portal will not respond with the screen of the AutoConnect connection attempt remains displayed. In such a case, please try to configure the channel with AutoConnectConfig to match the access point. AutoConnect portal; AutoConnectConfig config; config.channel = 3 ; // Specifies a channel number that matches the AP portal.config(config); // Apply channel configuration portal.begin(); // Start the portal Channel selection guide Espressif Systems has released a channel selection guide .","title":"1. Change WiFi channel"},{"location":"faq.html#2-change-the-arduino-core-version","text":"I recommend change installed an arduino core version to the upstream when your sketch is not stable with AutoConnect on each board.","title":"2. Change the arduino core version"},{"location":"faq.html#with-esp8266-arduino-core","text":"You can select the lwIP variant to contribute for the stable behavior. The lwIP v2 Lower memory option of Arduino IDE for core version 2.4.2 is based on the lwIP-v2. On the other hand, the core version 2.5.0 upstream is based on the lwIP-2.1.2 stable release. You can select the option from Arduino IDE as Tool menu, if you are using ESP8266 core 2.5.0. It can be select lwIP v2 Lower Memory option. (not lwIP v2 Lower Memory (no features) ) It is expected to improve response performance and stability.","title":"with ESP8266 arduino core"},{"location":"faq.html#with-esp32-arduino-core","text":"The arduino-esp32 is still under development. It is necessary to judge whether the problem cause of the core or AutoConnect. Trace the log with the esp32 core and the AutoConnect debug option enabled for problem diagnosis and please you check the issue of arduino-esp32 . The problem that your sketch possesses may already have been solved.","title":"with ESP32 arduino core"},{"location":"faq.html#3-turn-on-the-debug-log-options","text":"To fully enable for the AutoConnect debug logging options, change the following two files. AutoConnectDefs.h #define AC_DEBUG PageBuilder.h 3 #define PB_DEBUG How to enable the AC_DEBUG, PB_DEBUG See Debug Print section, and one similarly too.","title":"3. Turn on the debug log options"},{"location":"faq.html#4-reports-the-issue-to-autoconnect-github-repository","text":"If you can not solve AutoConnect problems please report to Issues . And please make your question comprehensively, not a statement. Include all relevant information to start the problem diagnostics as follows: 4 Hardware module Arduino core version Including the upstream commit ID if necessary Operating System which you use Your smartphone OS and version (Especially for Android) Your AP information (IP, channel) if related lwIP variant Problem description If you have a STACK DUMP decoded result with formatted by the code block tag the Sketch code with formatted by the code block tag (Reduce to the reproducible minimum code for the problem) Debug messages output (Including arduino core) I will make efforts to solve as quickly as possible. But I would like you to know that it is not always possible. Thank you. In this case, the underlying factor is mainly the bloat of ESP-IDF. This issue is also being discussed by many contributors of the Arduino core development community and efforts are underway to make a solution. Refs: espressif/arduino-esp32/issue#5630 \u21a9 This issue has been resolved in ESP8266 core 2.5.0 and later. \u21a9 PageBuilder.h exists in the libraries/PageBuilder/src directory under your sketch folder. \u21a9 Without this information, the reproducibility of the problem is reduced, making diagnosis and analysis difficult. \u21a9","title":"4. Reports the issue to AutoConnect Github repository"},{"location":"filesystem.html","text":"Selecting appropriate Filesystem \u00b6 There are two file systems for utilizing the onboard flash on the ESP8266 or the ESP32, SPIFFS and LittleFS. The file system to be applied is determined at the time of the sketch built. AutoConnect will determine as a file system to apply either SPIFFS or LittleFS according to the macro definition in AutoConnectDefs.h and has the following two definitions to include the file system. #define AC_USE_SPIFFS #define AC_USE_LITTLEFS The AC_USE_SPIFFS and AC_USE_LITTLEFS macros declare which file system to apply. Their definitions are contradictory to each other and you cannot activate both at the same time . Each platform supported by AutoConnect has a default file system, which is LittleFS for ESP8266 and SPIFFS for ESP32. Neither AC_USE_SPIFFS nor AC_USE_LITTLE_FS needs to be explicitly defined as long as you use the default file system. The default file system for each platform is assumed. SPIFFS has deprecated for ESP8266 SPIFFS has deprecated on EP8266 core. AC_USE_SPIFFS flag indicates that the migration to LittleFS has not completed for the Sketch with ESP8266. You will get a warning message when you compile a sketch using SPIFFS. Also, LittleFS support on the ESP32 is expected to be in the future beyond Arduino ESP32 core v2 . If you want to use the LittleFS library on your ESP32, you must use a third-party source provided externally. The file system intended by the sketch must match the file system applied to AutoConnect. (i.e. it is provided by the definitions of AC_USE_SPIFFS and AC_USE_LITTLEFS ) For example, if the sketch includes LittleFS.h , but AC_USE_SPIFFS is defined, the sketch will not be able to sucessfully acces the built file system. Filesystem applied to PageBuilder must match to AutoConnect \u00b6 Also, PageBuilder has a definition of file system choices to use, similar to AutoConnect. It is the definition of PB_USE_SPIFFS and PB_USE_LITTLEFS in PageBuilder.h of PageBuilder library source, and its role is the same as these of AutoConnect. #define PB_USE_SPIFFS #define PB_USE_LITTLEFS Note the version of each library Support for AC_USE_SPIFFS / AC_USE_LITTLEFS and PB_USE_SPIFFS / PB_USE_LITLTEFS is from AutoConnect 1.3.0 and PageBuilder 1.5.0 and later. To determine the file system to be used \u00b6 The most direct way is to edit the library source AutoConnectDefs.h directly and uncomment the definition of #define AC_USE_SPIFFS or #define AC_USE_LITTLES . In addition to that editing work, the definitions of PB_USE_SPIFFS and PB_USE_LITTLEFS in PageBuilder.h also need to be changed. Their definitions must match the AC_USE_SPIFFS and AC_USE_LITTLEFS definitions in AutoConnectDefs.h . PB_USE_SPIFFS enabled and AC_USE_LITTLEFS enabled state is not allowed, and vice-versa. However, this way makes the AutoConnect library inconsistent and may include your unintended file system on a project-by-project basis. By using PlatformIO , you can efficiently select a file system. That way, you can choose any file system for each project without polluting the library source. To apply a different file system for each project without modifying the library source code, add the following build_flags directive to platformio.ini as a project configuration file of each project. [env:esp_wroom_02] platform = espressif8266 board = esp_wroom_02 framework = arduino lib_extra_dirs = ~/Documents/Arduino/libraries lib_ldf_mode = deep build_flags = -DAC_USE_SPIFFS -DPB_USE_SPIFFS upload_speed = 921600 monitor_speed = 115200 The build_flags as build options allows PlatformIO can provide preprocessor macro definitions. -D name for build_flags , which specifies a predefined content, is treated as 1 equal to the #define directive. Library dependency search with PlatformIO If #include <LITTLEFS.h> becomes Not Found with PlatformIO built, try specifying lib_ldf_mode=deep with platformio.ini . Due to the deep nesting by preprocessor instructions, the include file cannot be detected by the chain mode (nested include search) of PlatformIO's Library Dependency Finder . See also FAQ . LittleFS for ESP8266 with PlatformIO The SPIFFS file system is used by default in order to keep legacy projects compatible. To choose LittleFS as the file system with ESP8266 platform, it should be explicitly specified using board_build.filesystem option in platformio.ini as follows: [env:esp_wroom_02] platform = espressif8266 framework = arduino board = esp_wroom_02 board_build.filesystem = littlefs ... Practical situations where AutoConnect uses a file system \u00b6 AutoConnect has the ability to use the file system that is: Place the custom web page defined in the JSON document in an external file and separate it from the sketch source code. This approach allows you to change the layout design of your custom web page by simply modifying the external file without recompiling the sketch. Use the AutoConnectFile element to upload some parameters that control sketch execution to the file system on the ESP module. You can upload from the browser on the client PC via OTA. The following is an example of a scenario that embodies the combination of these facilities. The sketch below controls LED that blinks like heartbeat by PWM (Pulse-Width Modulation) from ESP8266. Custom web page contains an AutoConnectFile element that allows you to upload a parameter file to the ESP module from the browser on the client PC. And place the custom web page as a JSON document on the LittleFS of the ESP module. Screenshot \u00b6 The sketch UI of this scenario provides as shown by the screenshot below: It arranges in a very simple style to focus on how the sketch incorporating AutoConnect will handle the file system. This custom web page is loaded from LittleFS at the beginning of the sketch processing and has already been uploaded to LittleFS on the ESP8266. Custom Web page JSON definition \u00b6 It has a file name as \" custom_pages.json \" and has two pages whose URI are \" / \" and \" /set \". An AutoConnectFile element named \" param \" is placed to upload a file from a client browser that contains the parameters to determine the behavior of this sketch. (ie. LED blinking cycle of the heartbeat) After selecting the parameter file to upload, click the AutoConnectSubmit element named \" set \". This will upload the selected file to LittleF on the ESP8266 module and start processing the sketch-coded \" /set \" page handler. [ { \"title\" : \"Heartbeat\" , \"uri\" : \"/\" , \"menu\" : true , \"element\" : [ { \"name\" : \"param\" , \"type\" : \"ACFile\" , \"label\" : \"Parameter file:\" , \"store\" : \"fs\" }, { \"name\" : \"set\" , \"type\" : \"ACSubmit\" , \"value\" : \"SET\" , \"uri\" : \"/set\" } ] }, { \"title\" : \"Heartbeat\" , \"uri\" : \"/set\" , \"menu\" : false , \"element\" : [ { \"name\" : \"param\" , \"type\" : \"ACText\" } ] } ] Parameter file \u00b6 You can make the parameters that determine the heartbeat cycle with the JSON definition using your favorite text editor as follows: { \"led\" : 16 , \"freq\" : 1000 , \"range\" : 511 , \"cycle\" : 2 } We use PWM to make the LED blinking gently repeat like a heartbeat. In addition, we also need the interval time to blink. We will put these values in the parameter file. led : Blinking LED assignment pin (Depending on your ESP8266 module) freq : PWM frequency [ms] (milliseconds unit) range : PWM range (511 ~ 1023, 511 ~ 767 is recommended for smooth blinking) cycle : Heartbeat cycle [s] (seconds unit. 4 seconds or less recommended) Save the text file with these settings as param.json on your PC. You can upload this file to the ESP8266 module using the AutoConnectFile element named param above. When executing a sketch, the settings described in this file will be read by the /set custom web page handler to control the analog output of the ESP8266 module. The sketch \u00b6 Below is the final sketch that allows the LED to blink like a heartbeat according to the settings contained in the two external files custome_pages.json and param.json mentioned above. #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <LittleFS.h> #include <AutoConnect.h> #include <ArduinoJson.h> AutoConnect portal; AutoConnectConfig config; // File names const char * paramFile = \"param.json\" ; const char * auxFile = \"custom_pages.json\" ; // Parameters for LED PWM control unsigned int led = 0 ; unsigned long freq; unsigned long range; unsigned int cycle; const unsigned long reso = 10 ; int duty; int increase; unsigned long tmCycle; unsigned long tmStep; String onSet (AutoConnectAux & aux, PageArgument & args) { StaticJsonDocument < 128 > doc; // Open uploaded parameter and parse parameters with JSON File param = LittleFS.open(paramFile, \"r\" ); if (param) { DeserializationError error = deserializeJson(doc, param); if (error) { aux[ \"param\" ].value = \"JSON de-serialization failed: \" + String(error.c_str()); } else { // Parsing the parameter JSON was successful. // Read the parameters as JSON document from the uploaded parameter file. led = doc[ \"led\" ]; freq = doc[ \"freq\" ]; range = doc[ \"range\" ]; cycle = doc[ \"cycle\" ]; // Set PWM conditions analogWriteFreq(freq); analogWriteRange(range); increase = ((range / cycle) / reso) / 2 ; duty = 0 ; tmCycle = millis(); tmStep = tmCycle; // Echo back uploaded parameters to Custom web page String result; serializeJson(doc, result); aux[ \"param\" ].value = result; } param.close(); } else aux[ \"param\" ].value = String(paramFile) + String( \" open error\" ); return String(); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); LittleFS.begin(); // Load Custom web pages from LittleFS File aux = LittleFS.open(auxFile, \"r\" ); if (aux) { // Attach Custom web page and handler portal.load(aux); portal.on( \"/set\" , onSet); // Exclude the HOME item from the menu as the custom web page will // be placed in the root path. config.menuItems = 0x00ff & ~ (AC_MENUITEM_HOME | AC_MENUITEM_DEVINFO); config.ota = AC_OTA_BUILTIN; // You can even update this sketch remotely portal.config(config); // You can close the file once the custom web page has finished loading. aux.close(); } else { Serial.print(auxFile); Serial.println( \" open error\" ); } portal.begin(); } void loop () { if (led) { // The heartbeat begins after the led parameter will set. if (millis() - tmStep > abs(increase)) { duty += increase; if (duty < 0 ) duty = 0 ; analogWrite(led, duty); tmStep = millis(); } if (millis() - tmCycle > (cycle * 1000 ) / 2 ) { increase *= -1 ; tmCycle = millis(); } } portal.handleClient(); } This final sketch consists of four components: Include appropriate header files : Include the appropriate file system header files to operate the external files of the ESP8266 module by the sketch. For LitteleFS, it is #include <LittleFS.h> . Also, since we wrote the parameter setting file in JSON, we will deserialize it using ArduinoJson . The header required for the deserialization process is #include <ArduinoJson.h> . setup : In the sketch setup phase, the procedure is similar to other sketches when using AutoConnect. In this case, the following steps are appended to apply the file system. Start the file system as LittleFS. Then open the custom web page definition file. Upload this file as a LittleFS file on the ESP8266 module in advance. Arduino can handle the opened file as a stream, so register the file stream with AutoConnect using the AutoConnect::load function. This procedure is also detailed in the documentation Loading & saving AutoConnectElements with JSON . loop : In the loop, the duty is calculated and analog output is performed to the LED pin. Duty is a value for PWM. PWM is a modulation method that can adjust strength of electric power by turning the pulse train on and off at regular intervals and change the on-time width. In this sketch, the LED on-time is dynamically changed and supplied as the PWM duty to achieve the slow blinking like the heartbeat. The loop calculates this dynamic on-time change from the heartbeat cycle time ( cycle setting of param.json ) and executes analogWrite at the appropriate timing. The freq value in the parameter settings indicates the regular interval of the PWM. Do not use delay in a loop to create time variation for PWM It is a fault often found in careless sketches. An HTTP request is sent to the ESP8266 module each time you interact with the AutoConnect menu from the client browser. The request is properly answered by the AutoConnect::handleClient function. The delay function in the loop obstructs the flow of its processing. Remember that the sketching process will be suspended for the time period you specify by the delay. /set custom web page handler : It is named onSet function in above sketch. The onSet handler retrieves PWM settings using ArduinoJson deserialization from the uploaded param.json file. Each fetched setting value is stored in each global variable. The loop function refers to that value to achieve PWM pulse control.","title":"Using Filesystem"},{"location":"filesystem.html#selecting-appropriate-filesystem","text":"There are two file systems for utilizing the onboard flash on the ESP8266 or the ESP32, SPIFFS and LittleFS. The file system to be applied is determined at the time of the sketch built. AutoConnect will determine as a file system to apply either SPIFFS or LittleFS according to the macro definition in AutoConnectDefs.h and has the following two definitions to include the file system. #define AC_USE_SPIFFS #define AC_USE_LITTLEFS The AC_USE_SPIFFS and AC_USE_LITTLEFS macros declare which file system to apply. Their definitions are contradictory to each other and you cannot activate both at the same time . Each platform supported by AutoConnect has a default file system, which is LittleFS for ESP8266 and SPIFFS for ESP32. Neither AC_USE_SPIFFS nor AC_USE_LITTLE_FS needs to be explicitly defined as long as you use the default file system. The default file system for each platform is assumed. SPIFFS has deprecated for ESP8266 SPIFFS has deprecated on EP8266 core. AC_USE_SPIFFS flag indicates that the migration to LittleFS has not completed for the Sketch with ESP8266. You will get a warning message when you compile a sketch using SPIFFS. Also, LittleFS support on the ESP32 is expected to be in the future beyond Arduino ESP32 core v2 . If you want to use the LittleFS library on your ESP32, you must use a third-party source provided externally. The file system intended by the sketch must match the file system applied to AutoConnect. (i.e. it is provided by the definitions of AC_USE_SPIFFS and AC_USE_LITTLEFS ) For example, if the sketch includes LittleFS.h , but AC_USE_SPIFFS is defined, the sketch will not be able to sucessfully acces the built file system.","title":"Selecting appropriate Filesystem"},{"location":"filesystem.html#filesystem-applied-to-pagebuilder-must-match-to-autoconnect","text":"Also, PageBuilder has a definition of file system choices to use, similar to AutoConnect. It is the definition of PB_USE_SPIFFS and PB_USE_LITTLEFS in PageBuilder.h of PageBuilder library source, and its role is the same as these of AutoConnect. #define PB_USE_SPIFFS #define PB_USE_LITTLEFS Note the version of each library Support for AC_USE_SPIFFS / AC_USE_LITTLEFS and PB_USE_SPIFFS / PB_USE_LITLTEFS is from AutoConnect 1.3.0 and PageBuilder 1.5.0 and later.","title":"Filesystem applied to PageBuilder must match to AutoConnect"},{"location":"filesystem.html#to-determine-the-file-system-to-be-used","text":"The most direct way is to edit the library source AutoConnectDefs.h directly and uncomment the definition of #define AC_USE_SPIFFS or #define AC_USE_LITTLES . In addition to that editing work, the definitions of PB_USE_SPIFFS and PB_USE_LITTLEFS in PageBuilder.h also need to be changed. Their definitions must match the AC_USE_SPIFFS and AC_USE_LITTLEFS definitions in AutoConnectDefs.h . PB_USE_SPIFFS enabled and AC_USE_LITTLEFS enabled state is not allowed, and vice-versa. However, this way makes the AutoConnect library inconsistent and may include your unintended file system on a project-by-project basis. By using PlatformIO , you can efficiently select a file system. That way, you can choose any file system for each project without polluting the library source. To apply a different file system for each project without modifying the library source code, add the following build_flags directive to platformio.ini as a project configuration file of each project. [env:esp_wroom_02] platform = espressif8266 board = esp_wroom_02 framework = arduino lib_extra_dirs = ~/Documents/Arduino/libraries lib_ldf_mode = deep build_flags = -DAC_USE_SPIFFS -DPB_USE_SPIFFS upload_speed = 921600 monitor_speed = 115200 The build_flags as build options allows PlatformIO can provide preprocessor macro definitions. -D name for build_flags , which specifies a predefined content, is treated as 1 equal to the #define directive. Library dependency search with PlatformIO If #include <LITTLEFS.h> becomes Not Found with PlatformIO built, try specifying lib_ldf_mode=deep with platformio.ini . Due to the deep nesting by preprocessor instructions, the include file cannot be detected by the chain mode (nested include search) of PlatformIO's Library Dependency Finder . See also FAQ . LittleFS for ESP8266 with PlatformIO The SPIFFS file system is used by default in order to keep legacy projects compatible. To choose LittleFS as the file system with ESP8266 platform, it should be explicitly specified using board_build.filesystem option in platformio.ini as follows: [env:esp_wroom_02] platform = espressif8266 framework = arduino board = esp_wroom_02 board_build.filesystem = littlefs ...","title":"To determine the file system to be used"},{"location":"filesystem.html#practical-situations-where-autoconnect-uses-a-file-system","text":"AutoConnect has the ability to use the file system that is: Place the custom web page defined in the JSON document in an external file and separate it from the sketch source code. This approach allows you to change the layout design of your custom web page by simply modifying the external file without recompiling the sketch. Use the AutoConnectFile element to upload some parameters that control sketch execution to the file system on the ESP module. You can upload from the browser on the client PC via OTA. The following is an example of a scenario that embodies the combination of these facilities. The sketch below controls LED that blinks like heartbeat by PWM (Pulse-Width Modulation) from ESP8266. Custom web page contains an AutoConnectFile element that allows you to upload a parameter file to the ESP module from the browser on the client PC. And place the custom web page as a JSON document on the LittleFS of the ESP module.","title":"Practical situations where AutoConnect uses a file system"},{"location":"filesystem.html#screenshot","text":"The sketch UI of this scenario provides as shown by the screenshot below: It arranges in a very simple style to focus on how the sketch incorporating AutoConnect will handle the file system. This custom web page is loaded from LittleFS at the beginning of the sketch processing and has already been uploaded to LittleFS on the ESP8266.","title":"Screenshot"},{"location":"filesystem.html#custom-web-page-json-definition","text":"It has a file name as \" custom_pages.json \" and has two pages whose URI are \" / \" and \" /set \". An AutoConnectFile element named \" param \" is placed to upload a file from a client browser that contains the parameters to determine the behavior of this sketch. (ie. LED blinking cycle of the heartbeat) After selecting the parameter file to upload, click the AutoConnectSubmit element named \" set \". This will upload the selected file to LittleF on the ESP8266 module and start processing the sketch-coded \" /set \" page handler. [ { \"title\" : \"Heartbeat\" , \"uri\" : \"/\" , \"menu\" : true , \"element\" : [ { \"name\" : \"param\" , \"type\" : \"ACFile\" , \"label\" : \"Parameter file:\" , \"store\" : \"fs\" }, { \"name\" : \"set\" , \"type\" : \"ACSubmit\" , \"value\" : \"SET\" , \"uri\" : \"/set\" } ] }, { \"title\" : \"Heartbeat\" , \"uri\" : \"/set\" , \"menu\" : false , \"element\" : [ { \"name\" : \"param\" , \"type\" : \"ACText\" } ] } ]","title":"Custom Web page JSON definition"},{"location":"filesystem.html#parameter-file","text":"You can make the parameters that determine the heartbeat cycle with the JSON definition using your favorite text editor as follows: { \"led\" : 16 , \"freq\" : 1000 , \"range\" : 511 , \"cycle\" : 2 } We use PWM to make the LED blinking gently repeat like a heartbeat. In addition, we also need the interval time to blink. We will put these values in the parameter file. led : Blinking LED assignment pin (Depending on your ESP8266 module) freq : PWM frequency [ms] (milliseconds unit) range : PWM range (511 ~ 1023, 511 ~ 767 is recommended for smooth blinking) cycle : Heartbeat cycle [s] (seconds unit. 4 seconds or less recommended) Save the text file with these settings as param.json on your PC. You can upload this file to the ESP8266 module using the AutoConnectFile element named param above. When executing a sketch, the settings described in this file will be read by the /set custom web page handler to control the analog output of the ESP8266 module.","title":"Parameter file"},{"location":"filesystem.html#the-sketch","text":"Below is the final sketch that allows the LED to blink like a heartbeat according to the settings contained in the two external files custome_pages.json and param.json mentioned above. #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <LittleFS.h> #include <AutoConnect.h> #include <ArduinoJson.h> AutoConnect portal; AutoConnectConfig config; // File names const char * paramFile = \"param.json\" ; const char * auxFile = \"custom_pages.json\" ; // Parameters for LED PWM control unsigned int led = 0 ; unsigned long freq; unsigned long range; unsigned int cycle; const unsigned long reso = 10 ; int duty; int increase; unsigned long tmCycle; unsigned long tmStep; String onSet (AutoConnectAux & aux, PageArgument & args) { StaticJsonDocument < 128 > doc; // Open uploaded parameter and parse parameters with JSON File param = LittleFS.open(paramFile, \"r\" ); if (param) { DeserializationError error = deserializeJson(doc, param); if (error) { aux[ \"param\" ].value = \"JSON de-serialization failed: \" + String(error.c_str()); } else { // Parsing the parameter JSON was successful. // Read the parameters as JSON document from the uploaded parameter file. led = doc[ \"led\" ]; freq = doc[ \"freq\" ]; range = doc[ \"range\" ]; cycle = doc[ \"cycle\" ]; // Set PWM conditions analogWriteFreq(freq); analogWriteRange(range); increase = ((range / cycle) / reso) / 2 ; duty = 0 ; tmCycle = millis(); tmStep = tmCycle; // Echo back uploaded parameters to Custom web page String result; serializeJson(doc, result); aux[ \"param\" ].value = result; } param.close(); } else aux[ \"param\" ].value = String(paramFile) + String( \" open error\" ); return String(); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); LittleFS.begin(); // Load Custom web pages from LittleFS File aux = LittleFS.open(auxFile, \"r\" ); if (aux) { // Attach Custom web page and handler portal.load(aux); portal.on( \"/set\" , onSet); // Exclude the HOME item from the menu as the custom web page will // be placed in the root path. config.menuItems = 0x00ff & ~ (AC_MENUITEM_HOME | AC_MENUITEM_DEVINFO); config.ota = AC_OTA_BUILTIN; // You can even update this sketch remotely portal.config(config); // You can close the file once the custom web page has finished loading. aux.close(); } else { Serial.print(auxFile); Serial.println( \" open error\" ); } portal.begin(); } void loop () { if (led) { // The heartbeat begins after the led parameter will set. if (millis() - tmStep > abs(increase)) { duty += increase; if (duty < 0 ) duty = 0 ; analogWrite(led, duty); tmStep = millis(); } if (millis() - tmCycle > (cycle * 1000 ) / 2 ) { increase *= -1 ; tmCycle = millis(); } } portal.handleClient(); } This final sketch consists of four components: Include appropriate header files : Include the appropriate file system header files to operate the external files of the ESP8266 module by the sketch. For LitteleFS, it is #include <LittleFS.h> . Also, since we wrote the parameter setting file in JSON, we will deserialize it using ArduinoJson . The header required for the deserialization process is #include <ArduinoJson.h> . setup : In the sketch setup phase, the procedure is similar to other sketches when using AutoConnect. In this case, the following steps are appended to apply the file system. Start the file system as LittleFS. Then open the custom web page definition file. Upload this file as a LittleFS file on the ESP8266 module in advance. Arduino can handle the opened file as a stream, so register the file stream with AutoConnect using the AutoConnect::load function. This procedure is also detailed in the documentation Loading & saving AutoConnectElements with JSON . loop : In the loop, the duty is calculated and analog output is performed to the LED pin. Duty is a value for PWM. PWM is a modulation method that can adjust strength of electric power by turning the pulse train on and off at regular intervals and change the on-time width. In this sketch, the LED on-time is dynamically changed and supplied as the PWM duty to achieve the slow blinking like the heartbeat. The loop calculates this dynamic on-time change from the heartbeat cycle time ( cycle setting of param.json ) and executes analogWrite at the appropriate timing. The freq value in the parameter settings indicates the regular interval of the PWM. Do not use delay in a loop to create time variation for PWM It is a fault often found in careless sketches. An HTTP request is sent to the ESP8266 module each time you interact with the AutoConnect menu from the client browser. The request is properly answered by the AutoConnect::handleClient function. The delay function in the loop obstructs the flow of its processing. Remember that the sketching process will be suspended for the time period you specify by the delay. /set custom web page handler : It is named onSet function in above sketch. The onSet handler retrieves PWM settings using ArduinoJson deserialization from the uploaded param.json file. Each fetched setting value is stored in each global variable. The loop function refers to that value to achieve PWM pulse control.","title":"The sketch"},{"location":"gettingstarted.html","text":"Let's do the most simple sketch \u00b6 Open the Arduino IDE, write the following sketch and upload it. The feature of this sketch is that the SSID and Password are not coded. #include <ESP8266WiFi.h> // Replace with WiFi.h for ESP32 #include <ESP8266WebServer.h> // Replace with WebServer.h for ESP32 #include <AutoConnect.h> ESP8266WebServer Server; // Replace with WebServer for ESP32 AutoConnect Portal (Server); void rootPage () { char content[] = \"Hello, world\" ; Server.send( 200 , \"text/plain\" , content); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); Server.on( \"/\" , rootPage); if (Portal.begin()) { Serial.println( \"WiFi connected: \" + WiFi.localIP().toString()); } } void loop () { Portal.handleClient(); } The above code can be applied to ESP8266. To apply to ESP32, replace ESP8266WebServer class with WebServer and include WiFi.h and WebServer.h of arduino-esp32 appropriately. Run at first \u00b6 After about 30 seconds, if the ESP8266 cannot connect to nearby Wi-Fi spot, you pull out your smartphone and open Wi-Fi settings from the Settings Apps. You can see the esp8266ap 1 in the list of \"CHOOSE A NETWORK...\" . Then tap the esp8266ap and enter password 12345678 , a something screen pops up automatically as shown below. This is the AutoConnect statistics screen. This screen displays the current status of the established connection, WiFi mode, IP address, free memory size, and etc. Also, the hamburger icon is the control menu of AutoConnect seems at the upper right. By tap the hamburger icon, the control menu appears as the below. Join to the new access point \u00b6 Here, tap \"Configure new AP\" to connect the new access point then the SSID configuration screen would be shown. Enter the SSID and Passphrase and tap apply to start connecting the access point. Can be configured with static IP Since v1.1.0, Configure new AP menu can configure for WIFI_STA with static IP. Connection establishment \u00b6 After connection established, the current status screen will appear. It is already connected to WLAN with WiFi mode as WIFI_AP_STA and the IP connection status is displayed there including the SSID. Then at this screen, you have two options for the next step. For one, continues execution of the Sketch while keeping this connection. You can access ESP8266 via browser through the established IP address after cancel to \" Log in \" by upper right on the screen. Or, \" RESET \" can be selected. The ESP8266 resets and reboots. After that, immediately before the connection will be restored automatically with WIFI_STA mode. Run for usually \u00b6 The IP address of ESP8266 would be displayed on the serial monitor after connection restored. Please access its address from the browser. The \"Hello, world\" page will respond. It's the page that was handled by in the Sketch with \" on \" function of ESP8266WebServer . window.onload = function() { Gifffer(); }; When applied to ESP32, SSID will appear as esp32ap . \u21a9","title":"Getting started"},{"location":"gettingstarted.html#lets-do-the-most-simple-sketch","text":"Open the Arduino IDE, write the following sketch and upload it. The feature of this sketch is that the SSID and Password are not coded. #include <ESP8266WiFi.h> // Replace with WiFi.h for ESP32 #include <ESP8266WebServer.h> // Replace with WebServer.h for ESP32 #include <AutoConnect.h> ESP8266WebServer Server; // Replace with WebServer for ESP32 AutoConnect Portal (Server); void rootPage () { char content[] = \"Hello, world\" ; Server.send( 200 , \"text/plain\" , content); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); Server.on( \"/\" , rootPage); if (Portal.begin()) { Serial.println( \"WiFi connected: \" + WiFi.localIP().toString()); } } void loop () { Portal.handleClient(); } The above code can be applied to ESP8266. To apply to ESP32, replace ESP8266WebServer class with WebServer and include WiFi.h and WebServer.h of arduino-esp32 appropriately.","title":"Let's do the most simple sketch"},{"location":"gettingstarted.html#run-at-first","text":"After about 30 seconds, if the ESP8266 cannot connect to nearby Wi-Fi spot, you pull out your smartphone and open Wi-Fi settings from the Settings Apps. You can see the esp8266ap 1 in the list of \"CHOOSE A NETWORK...\" . Then tap the esp8266ap and enter password 12345678 , a something screen pops up automatically as shown below. This is the AutoConnect statistics screen. This screen displays the current status of the established connection, WiFi mode, IP address, free memory size, and etc. Also, the hamburger icon is the control menu of AutoConnect seems at the upper right. By tap the hamburger icon, the control menu appears as the below.","title":" Run at first"},{"location":"gettingstarted.html#join-to-the-new-access-point","text":"Here, tap \"Configure new AP\" to connect the new access point then the SSID configuration screen would be shown. Enter the SSID and Passphrase and tap apply to start connecting the access point. Can be configured with static IP Since v1.1.0, Configure new AP menu can configure for WIFI_STA with static IP.","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. In this example, it is trying to publish a WiFi signal strength being received ESP8266 through the services on the cloud that can visualize the live data streams for IoT. Using the IoT platform provided by ThingSpeak \u2122, the ESP8266 publishes RSSI values to ThingSpeak MQTT broker channel via the MQTT client library. This example is a good indication of the usefulness of AutoConnect, as RSSI values can typically measure different intensities for each access point. By simply adding a few lines to the Sketch, you do not have to rewrite and upload the Sketch 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. Sketch publishes messages \u00b6 The mqttRSSI.ino sketch registered in the AutoConnect GitHub repository is the complete code for publishing RSSI to the ThingSpeak channel. It is a sketch with the AutoConnectAux extension pages that allow you to flexibly configure the channel information you create as ThingSpeak channels. Parameters for the ThingSpeak MQTT channels Various settings of the MQTT Setting for the ThingSpeak channels via the above AutoConnectAux are following: Server : mqtt3.thingspeak.com Channel ID : Specify the channel ID that can be confirmed with ThingSpeak My Channels page . User Key : Specify the User API Key of the API Keys that can be confirmed with ThingSpeak My Profile page . API Key : Specify the Write API Key that can be confirmed by following navigate to \" ThingSpeak My Channels > Your Channel Name > API Keys Tab > Write API Key \". Publish messages \u00b6 After upload and reboot complete, the message publishing will start via the access point now set. The message carries RSSI as the current WiFi signal strength. The signal strength variations in RSSI are displayed on ThingSpeak's Channel status screen. How embed to your sketches \u00b6 For the client sketches, the code required to connect to WiFi is the following four parts only. #include directive 3 Include AutoConnect.h header file behind the include of ESP8266WiFi.h . Declare AutoConnect The declaration of the AutoConnect variable is not accompanied by ESP8266WebServer. Invokes \"begin()\" Call AutoConnect::begin . If you need to assign a static IP address, executes AutoConnectConfig before that. Performs \"handleClent()\" in \"loop()\" Invokes AutoConnect::handleClient() at inside loop() to enable the AutoConnect menu. window.onload = function() { Gifffer(); }; As of March 21, 2018. \u21a9 '454951' in the example above, but your channel ID should be different. \u21a9 #include <ESP8266WebServer.h> does not necessary for uses only client. \u21a9","title":"How to embed"},{"location":"howtoembed.html#embed-the-autoconnect-to-the-sketch","text":"Here 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. In this example, it is trying to publish a WiFi signal strength being received ESP8266 through the services on the cloud that can visualize the live data streams for IoT. Using the IoT platform provided by ThingSpeak \u2122, the ESP8266 publishes RSSI values to ThingSpeak MQTT broker channel via the MQTT client library. This example is a good indication of the usefulness of AutoConnect, as RSSI values can typically measure different intensities for each access point. By simply adding a few lines to the Sketch, you do not have to rewrite and upload the Sketch 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#sketch-publishes-messages","text":"The mqttRSSI.ino sketch registered in the AutoConnect GitHub repository is the complete code for publishing RSSI to the ThingSpeak channel. It is a sketch with the AutoConnectAux extension pages that allow you to flexibly configure the channel information you create as ThingSpeak channels. Parameters for the ThingSpeak MQTT channels Various settings of the MQTT Setting for the ThingSpeak channels via the above AutoConnectAux are following: Server : mqtt3.thingspeak.com Channel ID : Specify the channel ID that can be confirmed with ThingSpeak My Channels page . User Key : Specify the User API Key of the API Keys that can be confirmed with ThingSpeak My Profile page . API Key : Specify the Write API Key that can be confirmed by following navigate to \" ThingSpeak My Channels > Your Channel Name > API Keys Tab > Write API Key \".","title":"Sketch publishes messages"},{"location":"howtoembed.html#publish-messages","text":"After upload and reboot complete, the message publishing will start via the access point now set. The message carries RSSI as the current WiFi signal strength. The signal strength variations in RSSI are displayed on ThingSpeak's Channel status screen.","title":"Publish messages"},{"location":"howtoembed.html#how-embed-to-your-sketches","text":"For the client sketches, the code required to connect to WiFi is the following four parts only. #include directive 3 Include AutoConnect.h header file behind the include of ESP8266WiFi.h . Declare AutoConnect The declaration of the AutoConnect variable is not accompanied by ESP8266WebServer. Invokes \"begin()\" Call AutoConnect::begin . If you need to assign a static IP address, executes AutoConnectConfig before that. Performs \"handleClent()\" in \"loop()\" Invokes AutoConnect::handleClient() at inside loop() to enable the AutoConnect menu. window.onload = function() { Gifffer(); }; As of March 21, 2018. \u21a9 '454951' in the example above, but your channel ID should be different. \u21a9 #include <ESP8266WebServer.h> does not necessary for uses only client. \u21a9","title":"How embed to your sketches"},{"location":"license.html","text":"MIT License Copyright \u00a9 2018-2021 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 The following parameters of AutoConnectConfig affect the behavior and control a logic sequence of AutoConnect::begin function. These parameters are evaluated on a case-by-case basis and may not be valid in all situations. The Sketch must consider the role of these parameters and the conditions under which they will work as intended. You need to understand what happens when using these parameters in combination. autoReconnect : Attempts re-connect with past SSID by saved credential. autoRise : Controls starting the captive portal. immediateStart : Starts the captive portal immediately, without the 1 st -WiFi.begin. portalTimeout : Time out limit for the portal. retainPortal : Keep DNS server functioning for the captive portal. The following chart shows the AutoConnect::begin logic sequence that contains the control flow with each parameter takes effect. For example, AutoConnect::begin will not end without the portalTimeout while the connection not establishes, but WebServer will start to work. Also, the DNS server will start to make a series of the captive portal operation on the client device. The custom web pages now respond correctly by the two internally launched servers, and the Sketch looks like working. But AutoConnect::begin does not end yet. Especially when invoking AutoConnect::begin in the setup() , control flow does not pass to the loop() . However, portalTimeout can be used effectively in various scenes in combination with immediateStart . Its combination is useful for implementing Sketches that can work in situations where WiFi is not always available. Namely, Sketch will support a running mode with both offline and online. If AutoConnect staying in the captive portal exceeds the time limit, Sketch can switch a process-mode to offline according to WiFi signal detection. Conversely, it can start a captive portal immediately with intentional control to shift the process-mode to online from offline. Especially, You can activate the process-mode shift manually by trigger via external switches. The retainPortal option allows continuing the captive portal operation even after exiting from AutoConnect::begin. This option allows the use of the automatic portal pop-ups on the smartphone devices etc. even after the ESP module has established a connection with some access point in STA mode. (Excepts blocking a series of portal processes via intentionally accessing a URL outside the scope of /_ac . eg., if you try to communicate with the mqtt server without connecting to the access point, its access will be redirected to /_ac caused by the trap of the captive portal detection) 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":"The following parameters of AutoConnectConfig affect the behavior and control a logic sequence of AutoConnect::begin function. These parameters are evaluated on a case-by-case basis and may not be valid in all situations. The Sketch must consider the role of these parameters and the conditions under which they will work as intended. You need to understand what happens when using these parameters in combination. autoReconnect : Attempts re-connect with past SSID by saved credential. autoRise : Controls starting the captive portal. immediateStart : Starts the captive portal immediately, without the 1 st -WiFi.begin. portalTimeout : Time out limit for the portal. retainPortal : Keep DNS server functioning for the captive portal. The following chart shows the AutoConnect::begin logic sequence that contains the control flow with each parameter takes effect. For example, AutoConnect::begin will not end without the portalTimeout while the connection not establishes, but WebServer will start to work. Also, the DNS server will start to make a series of the captive portal operation on the client device. The custom web pages now respond correctly by the two internally launched servers, and the Sketch looks like working. But AutoConnect::begin does not end yet. Especially when invoking AutoConnect::begin in the setup() , control flow does not pass to the loop() . However, portalTimeout can be used effectively in various scenes in combination with immediateStart . Its combination is useful for implementing Sketches that can work in situations where WiFi is not always available. Namely, Sketch will support a running mode with both offline and online. If AutoConnect staying in the captive portal exceeds the time limit, Sketch can switch a process-mode to offline according to WiFi signal detection. Conversely, it can start a captive portal immediately with intentional control to shift the process-mode to online from offline. Especially, You can activate the process-mode shift manually by trigger via external switches. The retainPortal option allows continuing the captive portal operation even after exiting from AutoConnect::begin. This option allows the use of the automatic portal pop-ups on the smartphone devices etc. even after the ESP module has established a connection with some access point in STA mode. (Excepts blocking a series of portal processes via intentionally accessing a URL outside the scope of /_ac . eg., if you try to communicate with the mqtt server without connecting to the access point, its access will be redirected to /_ac caused by the trap of the captive portal detection) 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 following screen will appear as the AutoConnect menu when you access to AutoConnect root URL via http://{localIP}/_ac . (eg. http://172.217.28.1/_ac ) It is a top page of AutoConnect which shows the current WiFi connection statistics. To invoke the AutoConnect menu, you can tap at right on top. AutoConnect root URL It is assigned \" /_ac \" located on the local IP address of ESP8266/ESP32 module by default and can be changed with the Sketch. A local IP means Local IP at connection established or SoftAP's IP. Right on top \u00b6 Currently, AutoConnect supports six 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. Update : OTA updates. (Optional) HOME : Return to user home page. Configure new AP \u00b6 It scans all available access points in the vicinity and display it further the WiFi signal strength and security indicator as of the detected AP. Below that, the number of discovered hidden APs will be displayed. Enter SSID and Passphrase and tap \" Apply \" to start a WiFi connection. If you want to configure with static IP, uncheck \" Enable DHCP \". Once the WiFi connection is established, the entered static IP 1 configuration will be stored to the credentials in the flash and restored to the station configuration via the Open SSIDs menu. Open SSIDs \u00b6 After WiFi connected, AutoConnect will automatically save the established SSID and password to the flash on the ESP module. Open SSIDs menu reads the saved SSID credentials and lists them as below. Listed items are clickable buttons and can initiate a connection to its access point. Saved credentials data structure has changed A structure of AutoConnect saved credentials has changed in v1.1.0 and was lost backward compatibility. Credentials saved by AutoConnect v1.0.3 (or earlier) will not display properly with AutoConnect v1.1.0. You need to erase the flash of the ESP module using the esptool before the Sketch uploading. esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash Disconnect \u00b6 It disconnects ESP8266/ESP32 from the current connection. Also, ESP8266/ESP32 can be automatically reset after WiFi cutting by instructing with the Sketch using the AutoConnect API . After tapping the Disconnect , you will not be able to reach the AutoConnect menu. Once disconnected, you will need to set the SSID again for connecting to the WLAN. Reset... \u00b6 Resetting the ESP8266/ESP32 module will initiate a reboot. When the module restarting, the esp8266ap or esp32ap access point will disappear from the WLAN and the ESP8266/ESP32 module will begin to reconnect a previous access point with WIFI_STA mode. 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 If the Sketch has custom Web pages, the AutoConnect menu lines them up with the AutoConnect's items. Details for Custom Web pages in AutoConnect menu . Update \u00b6 If you specify AutoConnectConfig::ota to import the OTA update feature into Sketch, an item will appear in the menu list as Update . The Update menu item will appear only AutoConnectOTA enabled The Update item is displayed automatically in the menu only when AutoConnectConfig::ota is specified with AC_OTA_BUILTIN or AutoConnectUpdate is attached. HOME \u00b6 A HOME item at the bottom of the menu list is a link to the home path, and the default URI is / which is defined by AUTOCONNECT_HOMEURI in AutoConnectDefs.h header file. #define AUTOCONNECT_HOMEURI \"/\" Also, you can change the HOME path using the AutoConnect API. The AutoConnect::home function sets the URI as a link of the HOME item in the AutoConnect menu. Applying the active menu items \u00b6 Each of the above menu items can be configured with a Sketch. AutoConnectConfig::menuItems specifies the menu items that will be enabled at runtime. You can also adjust available menu items using AutoConnect::enableMenu and AutoConnect::disableMenu function. It is an alternative to AutoConnectConfig::menuItems and provides a shortcut to avoid using AutoConnectConfig. For example, by disabling the Configure new AP and Disconnect item, you can prevent the configuration for unknown access points. AutoConnect portal; AutoConnectConfig config; void setup () { config.menuItems = AC_MENUITEM_OPENSSIDS | AC_MENUITEM_RESET | AC_MENUITEM_HOME; portal.config(config); } The next is another way to achieve the same effect. AutoConnect portal; void setup () { portal.disableMenu(AC_MENUITEM_CONFIGNEW | AC_MENUITEM_DISCONNECT); portal.config(config); } The result of executing the above Sketch is as below: Details for AutoConnectConfig::menuItems . Attaching to AutoConnect menu \u00b6 The AutoConnect menu can contain your sketch's web pages as extra items as a custom. It works for HTML pages implemented by the ESP8266WebServer::on handler or the WebServer::on handler for ESP32. That is, you can make them invoke the legacy web pages from the AutoConnect menu. The below screen-shot is the result of adding an example sketch for the ESP8266WebServer library known as FSBrowser to the AutoConnect menu item. It can add Edit and List items with little modification to the legacy sketch code. AutoConnect allows capturing the extra pages handled with ESP8266WebServer or WebServer's legacy into the AutoConnect menu. See Section Advanced Usage for detailed instructions on how to add the extra pages into its menu. AutoConnect does not check the syntax and validity of the entered IP address. If the entered static IPs are incorrect, it cannot connect to the access point. \u21a9","title":"AutoConnect menu"},{"location":"menu.html#where-the-from","text":"The following screen will appear as the AutoConnect menu when you access to AutoConnect root URL via http://{localIP}/_ac . (eg. http://172.217.28.1/_ac ) It is a top page of AutoConnect which shows the current WiFi connection statistics. To invoke the AutoConnect menu, you can tap at right on top. AutoConnect root URL It is assigned \" /_ac \" located on the local IP address of ESP8266/ESP32 module by default and can be changed with the Sketch. 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 six 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. Update : OTA updates. (Optional) HOME : Return to user home page.","title":" Right on top"},{"location":"menu.html#configure-new-ap","text":"It scans all available access points in the vicinity and display it further the WiFi signal strength and security indicator as of the detected AP. Below that, the number of discovered hidden APs will be displayed. Enter SSID and Passphrase and tap \" Apply \" to start a WiFi connection. If you want to configure with static IP, uncheck \" Enable DHCP \". Once the WiFi connection is established, the entered static IP 1 configuration will be stored to the credentials in the flash and restored to the station configuration via the Open SSIDs menu.","title":" Configure new AP"},{"location":"menu.html#open-ssids","text":"After WiFi connected, AutoConnect will automatically save the established SSID and password to the flash on the ESP module. Open SSIDs menu reads the saved SSID credentials and lists them as below. Listed items are clickable buttons and can initiate a connection to its access point. Saved credentials data structure has changed A structure of AutoConnect saved credentials has changed in v1.1.0 and was lost backward compatibility. Credentials saved by AutoConnect v1.0.3 (or earlier) will not display properly with AutoConnect v1.1.0. You need to erase the flash of the ESP module using the esptool before the Sketch uploading. esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash","title":" Open SSIDs"},{"location":"menu.html#disconnect","text":"It disconnects ESP8266/ESP32 from the current connection. Also, ESP8266/ESP32 can be automatically reset after WiFi cutting by instructing with the Sketch using the AutoConnect API . After tapping the Disconnect , you will not be able to reach the AutoConnect menu. Once disconnected, you will need to set the SSID again for connecting to the WLAN.","title":" Disconnect"},{"location":"menu.html#reset","text":"Resetting the ESP8266/ESP32 module will initiate a reboot. When the module restarting, the esp8266ap or esp32ap access point will disappear from the WLAN and the ESP8266/ESP32 module will begin to reconnect a previous access point with WIFI_STA mode. 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":"If the Sketch has custom Web pages, the AutoConnect menu lines them up with the AutoConnect's items. Details for Custom Web pages in AutoConnect menu .","title":" Custom menu items"},{"location":"menu.html#update","text":"If you specify AutoConnectConfig::ota to import the OTA update feature into Sketch, an item will appear in the menu list as Update . The Update menu item will appear only AutoConnectOTA enabled The Update item is displayed automatically in the menu only when AutoConnectConfig::ota is specified with AC_OTA_BUILTIN or AutoConnectUpdate is attached.","title":" Update"},{"location":"menu.html#home","text":"A HOME item at the bottom of the menu list is a link to the home path, and the default URI is / which is defined by AUTOCONNECT_HOMEURI in AutoConnectDefs.h header file. #define AUTOCONNECT_HOMEURI \"/\" Also, you can change the HOME path using the AutoConnect API. The AutoConnect::home function sets the URI as a link of the HOME item in the AutoConnect menu.","title":" HOME"},{"location":"menu.html#applying-the-active-menu-items","text":"Each of the above menu items can be configured with a Sketch. AutoConnectConfig::menuItems specifies the menu items that will be enabled at runtime. You can also adjust available menu items using AutoConnect::enableMenu and AutoConnect::disableMenu function. It is an alternative to AutoConnectConfig::menuItems and provides a shortcut to avoid using AutoConnectConfig. For example, by disabling the Configure new AP and Disconnect item, you can prevent the configuration for unknown access points. AutoConnect portal; AutoConnectConfig config; void setup () { config.menuItems = AC_MENUITEM_OPENSSIDS | AC_MENUITEM_RESET | AC_MENUITEM_HOME; portal.config(config); } The next is another way to achieve the same effect. AutoConnect portal; void setup () { portal.disableMenu(AC_MENUITEM_CONFIGNEW | AC_MENUITEM_DISCONNECT); portal.config(config); } The result of executing the above Sketch is as below: Details for AutoConnectConfig::menuItems .","title":" Applying the active menu items"},{"location":"menu.html#attaching-to-autoconnect-menu","text":"The AutoConnect menu can contain your sketch's web pages as extra items as a custom. It works for HTML pages implemented by the ESP8266WebServer::on handler or the WebServer::on handler for ESP32. That is, you can make them invoke the legacy web pages from the AutoConnect menu. The below screen-shot is the result of adding an example sketch for the ESP8266WebServer library known as FSBrowser to the AutoConnect menu item. It can add Edit and List items with little modification to the legacy sketch code. AutoConnect allows capturing the extra pages handled with ESP8266WebServer or WebServer's legacy into the AutoConnect menu. See Section Advanced Usage for detailed instructions on how to add the extra pages into its menu. AutoConnect does not check the syntax and validity of the entered IP address. If the entered static IPs are incorrect, it cannot connect to the access point. \u21a9","title":" Attaching to AutoConnect menu"},{"location":"menuize.html","text":"The feature of menu attaching using AutoConnect \u00b6 In this section, it presents numerous ways to customize the AutoConnect menu with your Sketch. AutoConnect dynamically materializes menu items at the Sketch run time with joined AutoConnectAux as a sourced configuration. Typically, it has AutoConnectElements for page rendering in its composition but can configure a Web page as a menu item without having AutoConnectElements. In other words, the AutoConnect Menu component allows you to easily embed a navigation menu with WiFi connection expansion in your Sketch, which has legacy pages for ESP8266WebServer or WebServer of ESP32. The basic mechanism for menu generation \u00b6 Sketch can equip the AutoConnect menu by using three patterns according to the appropriate usage of the AutoConnect API . \u2002 Basic menu It is the most basic menu for a WiFi connection only. Sketch can automatically display it using the typical calling sequence of the AutoConnect API with 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 provides an item for including a legacy page in the AutoConnect menu that natively uses the page request handler attached by the ESP8266WebServer::on function. (Similarly, WebServer::on for ESP32) The mechanism by which AutoConnect dynamically generates the menu is simple. The member variables title and uri of AutoConnectAux will be transferred into <li> HTML tag as they are. Then all <li> elements are included in the form that makes up the menu. Therefore, the Sketch can register the legacy web pages to the menu by simply declaring the title and URI with AutoConnectAux and binding it to AutoConnect. 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 . Slightly changes to adapt FSBrowser to AutoConnect menu \u00b6 The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows: Add AutoConnect declaration. Add AutoConnectConfig declaration to replace the menu title to FSBRowser . Set the menu title using AutoConnectConfig::title . Replace the destination of the not found handler (404 handler) from ESP8266WebServer to AutoConnect. 1 IMPORTANT Add AutoConnectAux using AutoConnect::append and combine an item for Edit . Add AutoConnectAux using AutoConnect::append and combine an item for List . Establish a WiFi connection using AutoConnect::begin and execute AutoConnect::handleClient in the loop , as in the case of handling the basic menu. FSBrowser with embedded AutoConnect \u00b6 Modification for FSBrowser as follows: (Excerpt of the 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\" /></ a > </ p > window.onload = function() { Gifffer(); }; Missing this step, AutoConnect cannot handle the menu. Refs: 404 handler \u21a9","title":"Attach the menus"},{"location":"menuize.html#the-feature-of-menu-attaching-using-autoconnect","text":"In this section, it presents numerous ways to customize the AutoConnect menu with your Sketch. AutoConnect dynamically materializes menu items at the Sketch run time with joined AutoConnectAux as a sourced configuration. Typically, it has AutoConnectElements for page rendering in its composition but can configure a Web page as a menu item without having AutoConnectElements. In other words, the AutoConnect Menu component allows you to easily embed a navigation menu with WiFi connection expansion in your Sketch, which has legacy pages for ESP8266WebServer or WebServer of ESP32.","title":"The feature of menu attaching using AutoConnect"},{"location":"menuize.html#the-basic-mechanism-for-menu-generation","text":"Sketch can equip the AutoConnect menu by using three patterns according to the appropriate usage of the AutoConnect API . \u2002 Basic menu It is the most basic menu for a WiFi connection only. Sketch can automatically display it using the typical calling sequence of the AutoConnect API with 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 provides an item for including a legacy page in the AutoConnect menu that natively uses the page request handler attached by the ESP8266WebServer::on function. (Similarly, WebServer::on for ESP32) The mechanism by which AutoConnect dynamically generates the menu is simple. The member variables title and uri of AutoConnectAux will be transferred into <li> HTML tag as they are. Then all <li> elements are included in the form that makes up the menu. Therefore, the Sketch can register the legacy web pages to the menu by simply declaring the title and URI with AutoConnectAux and binding it to AutoConnect.","title":"The basic mechanism for 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 .","title":"Place the item for the legacy sketches on the menu"},{"location":"menuize.html#slightly-changes-to-adapt-fsbrowser-to-autoconnect-menu","text":"The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows: Add AutoConnect declaration. Add AutoConnectConfig declaration to replace the menu title to FSBRowser . Set the menu title using AutoConnectConfig::title . Replace the destination of the not found handler (404 handler) from ESP8266WebServer to AutoConnect. 1 IMPORTANT Add AutoConnectAux using AutoConnect::append and combine an item for Edit . Add AutoConnectAux using AutoConnect::append and combine an item for List . Establish a WiFi connection using AutoConnect::begin and execute AutoConnect::handleClient in the loop , as in the case of handling the basic menu.","title":"  Slightly changes to adapt FSBrowser to AutoConnect menu"},{"location":"menuize.html#fsbrowser-with-embedded-autoconnect","text":"Modification for FSBrowser as follows: (Excerpt of the 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\" /></ a > </ p > window.onload = function() { Gifffer(); }; Missing this step, AutoConnect cannot handle the menu. Refs: 404 handler \u21a9","title":" FSBrowser with embedded AutoConnect"},{"location":"otabrowser.html","text":"Updates with the Web Browser UPDATED w/v1.1.5 \u00b6 AutoConnect features a built-in OTA function to update ESP module firmware. You can easily make the Sketch that equips OTA and able to operate with the AutoConnect menu. As the AutoConnectOTA class, which is compliant with OTA updates using a web browser as described in the ESP8266 Arduino Core documentation . You will be able to import the AutoConnectOTA class into your sketch just by specifying AutoConnectConfig::ota . By incorporating the AutoConnectOTA class into your Sketch, you can have an OTA updating feature which able to updating binary sketch from the AutoConnect menu. The AutoConnectOTA feature is implemented based on the Updater class of the ESP8266 arduino core library. Its Updater class is also supported by the ESP32 Arduino core, so you can commonly import AutoConnectOTA into the Sketch without being aware of the differences between ESP8266 and ESP32 modules. Limitation of AutoConnectOTA with authentication AutoConnectOTA does not support authentication in v1.1.5 yet. It is planned for inclusion in AutoConnect v1.2.0, which will support HTTP authentication. How to embed AutoConnectOTA in your sketch \u00b6 To embed the AutoConnectOTA class into your sketch, basically follow these steps: Include ESP8266WiFi.h , ESP8266WebServer.h and AutoConnect.h as usual. 1 Declare an ESP8266WebServer object. It's optional. (as WebServer for ESP32) Declare an AutoConnect object, with an argument as ESP8266WebServer if separate the declarations. Declare an AutoConnectConfig object. Declare an AutoConnectAux object for your sketch own if needed. Perform the following procedure steps in the setup() function: Set AutoConnectConfig::ota to AC_OTA_BUILTIN and configure AutoConnect. Load the AutoConnectAux pages declared in step #4 for your application. Join these pages to AutoConnect. Invokes AutoConnect::begin function. Invokes AutoConnect::handleClient function in the loop() . #include <ESP8266WiFi.h> // Step #1 #include <ESP8266WebServer.h> // Step #1 #include <AutoConnect.h> // Step #1 ESP8266WebServer server; // Step #2 AutoConnect portal (server); // Step #3 AutoConnectConfig config; // Step #4 AutoConnectAux hello; // Step #5 static const char HELLO_PAGE[] PROGMEM = R\"( { \"title\": \"Hello world\", \"uri\": \"/\", \"menu\": true, \"element\": [ { \"name\": \"caption\", \"type\": \"ACText\", \"value\": \"<h2>Hello, world</h2>\", \"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.\" } ] } )\" ; // Step #5 void setup () { config.ota = AC_OTA_BUILTIN; // Step #6.a portal.config(config); // Step #6.a hello.load(HELLO_PAGE); // Step #6.b portal.join({ hello }); // Step #6.c portal.begin(); // Step #6.d } void loop () { portal.handleClient(); // Step #7 } How LED ticking during updates AutoConnectOTA applies LED ticking during updates automatically. The destination LED port and ticker drive depends on AutoConnectConfig::tickerPort and AutoConnectConfig::tickerOn specifying. IMPORTANT The AutoConnectOTA activates the ticker constantly regardless of the AutoConnectConfig::ticker value. If you want to stop the ticker output to GPIO during updates, give 0xff to AutoConnectConfig::tickerPort . AutoConnectOTA allocation URI \u00b6 AutoConnectOTA has implemented using AutoConnectAUX. So it occupies two URIs by default. An update operation page is assigned to AUTOCONNECT_URI_UPDATE and the binary file uploader for the update is assigned to AUTOCONNECT_URI_UPDATE_ACT . These symbols are defined in the AutoConnectDefs.h header file as follows: #define AUTOCONNECT_URI \"/_ac\" #define AUTOCONNECT_URI_UPDATE AUTOCONNECT_URI \"/update\" #define AUTOCONNECT_URI_UPDATE_ACT AUTOCONNECT_URI \"/update_act\" Therefore, the normal Sketch that imports AutoConnectOTA while keeping the default, you cannot use the two URIs /_ac/update and /_ac/update_act for your specific. If you want to use the URIs for any purpose other than AutoConnectOTA, you need to override the AutoConnectDefs.h definition at compile time. It can be overwritten by giving the build flags for platformio.ini as follows with the PlatformIO environment for example. build_flags = -DAUTOCONNECT_URI_UPDATE = '\"/YOURURI\"' -DAUTOCONNECT_URI_UPDATE_ACT = '\"/YOURURIACT\"' Timing of AutoConnectOTA instantiation \u00b6 It will be born during AutoConnect::handleClient process. AutoConnect will evaluate the enabled state of AutoConnectConfig::ota each time the handleClient is executed, and if OTA is enabled then it creates an AutoConnectAux internally and assigns it to the update page. At this time, AutoConnectOTA is also instantiated together. The generated AUX page containing AutoConnectOTA is bound to AutoConnect inside the AutoConnect::handleClient process. If you want to attach AutoConnectOTA dynamically with an external trigger, you can sketch like this: This sketch imports the OTA update feature with an external switch assigned to the GPIO pin. While the trigger not occurs, AutoConnectOTA will not be imported into Sketch and will not appear on the menu list. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> #define TRIGGER 4 // pin assigned to external trigger switch AutoConnect portal; AutoConnectConfig config; void setup () { pinMode(TRIGGER, INPUT); portal.begin(); } void loop () { if (digitalRead(TRIGGER) == HIGH) { config.ota = AC_OTA_BUILTIN; portal.config(config); } portal.handleClient(); } AutoConnectOTA cannot detach dynamically Once imported, AutoConnectOTA cannot be removed from the Sketch. It can be only excluded from the menu by overriding AutoConnectConfig::menuItems . In this case, the AutoConnectOTA instance remains as a residue. Authentication with AutoConnectOTA \u00b6 HTTP authentication of AutoConnect is also effective for OTA. Since the implementation of AutoConnectOTA is based on AutoConnectAux, the AutoConnectConfig::auth setting is valid for AutoConnectOTA as well. Also, it allows you to make authentication only on the OTA page while various custom Web pages coexist. The AC_AUTH_BASIC or AC_AUTH_DIGEST setting to the AutoConnectConfig::auth enables HTTP authentication. If it is in combination with AC_AUTHSCOPE_PARTIAL specified AutoConnectConfig::authScope setting, only an OTA page will be authenticated, excluding other custom Web pages that co-exist. AutoConnect portal; AutoConnectConfig config; AutoConnectAux aux ( \"/aux\" , \"AUX\" ); void setup () { // Join some custom web page portal.join(aux); // Add OTA into the Sketch config.ota = AC_OTA_BUILTIN; // Enable authentication on OTA page only config.auth = AC_AUTH_DIGEST; config.authScope = AC_AUTHSCOPE_PARTIAL; // Configure other settings ... // Apply configuration settings portal.config(config); portal.begin(); } 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. OTA updates w/browser without using AutoConnectOTA \u00b6 The legacy OTA method based on ESP8266HTTPUpdateServer without AutoConnectOTA is still valid. To embed the ESP8266HTTPUpdateServer class with AutoConnect into your sketch, basically follow these steps: Include ESP8266HTTPUpdateServer.h , also WiFiClient.h , in addition to the usual directives as ESP8266WebServer.h and AutoConnect.h . 2 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. Invokes AutoConnect::handleClient function in the loop() . #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <ESP8266HTTPUpdateServer.h> // Step #1 #include <WiFiClient.h> // Step #1 #include <AutoConnect.h> static const char HELLO_PAGE[] PROGMEM = R\"( { \"title\": \"Hello world\", \"uri\": \"/\", \"menu\": true, \"element\": [ { \"name\": \"caption\", \"type\": \"ACText\", \"value\": \"<h2>Hello, world</h2>\", \"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 portal.begin(); // Step #9.d } void loop () { portal.handleClient(); // Step #10 } Regular file uploading using AutoConnectOTA ENHANCED w/v1.2.0 \u00b6 The built-in OTA update feature can update the firmware as well as upload regular files placed in the file system on the ESP module. It allows a regular file is uploaded via OTA using the Update of AutoConnect menu without adding a particular custom Web page that contains AutoConnectFile. This utilization is useful for the operation of transferring the JSON document of the custom web page definition, the external parameter file of your sketch, and so on into the target ESP module via OTA. The built-in OTA update feature determines where to save the uploaded file according to the filename pattern. By default, a filename with ends a .bin extension is subject to firmware updates. A file that has another extensions will be saved as a regular to LittleFS (or SPIFFS) in the flash. The filename extension that should be treated as the firmware is defined as the AUTOCONNECT_UPLOAD_ASFIRMWARE macro in AutoConnectDefs.h header file of the library source code. When dealing with another extensions for the updating file as firmware change this macro definition. #define AUTOCONNECT_UPLOAD_ASFIRMWARE \".bin\" Specify with the PlatformIO AUTOCONNECT_UPLOAD_ASFIRMWARE pattern will be embedded into the binary sketch is determined at compile time. The PlatformIO build system allows you to change the pattern of the file extension for each project without modifying the library source code. build_flags = -DAUTOCONNECT_UPLOAD_ASFIRMWARE='\".bin\"' Use a regular expression to specify the file extension By default, you can specify only one file extension to be treated as firmware in OTA updates. However, you can specify the file extension as a regular expression, but it consumes a lot of memory. If the file extension pattern contains a regular expression, you need to enable the flag of AUTOCONNECT_UPLOAD_ASFIRMWARE_USE_REGEXP in AutoConnectDefs.h . Also, the AUTOCONNECT_UPLOAD_ASFIRMWARE definition as a regular expression is treated as a replacement string for the #define directive for C++ preprocessor, so the backslash must be escaped. Display an extra string on the update screen ENHANCED w/v1.3.0 \u00b6 You can add an extra string to the OTA update screen by the sketch. If an extra string is specified, it will be displayed on the right side of \" Updating firmware \" caption. The screenshot above shows an example of adding the current version of the sketch to the OTA caption. To display in the add an extra caption to the OTA update screen, sets the AutoConnectConfig::otaExtraCaption by your sketch. A type of the extra caption type to set in AutoConnectConfig::otaExtraCaption is the const char pointer . So, its string must remain in the memory area for the duration of OTA. (This string is not copied to the AutoConnectOTA class and expiration must be guaranteed by your sketch) #define FIRMWARE_VERSION \"1.1.12-dev\" ... #include <AutoConnect.h> ... const char * fw_ver = FIRMWARE_VERSION; AutoConnect portal; AutoConnectConfig config; void setup () { config.ota = AC_OTA_BUILTIN; config.otaExtraCaption = fw_ver; portal.config(config); portal.begin(); } void loop () { portal.handleClient(); } Common mistakes about variable expiration Local variables are valid only within the function. The following code seems to work at first glance. But practically, *fw_ver is released at the end of the function. AutoConnectConfig::otaExtraCaption holds only a pointer to the extra caption string. #define FIRMWARE_VERSION \"1.1.12-dev\" ... #include <AutoConnect.h> ... AutoConnect portal; AutoConnectConfig config; void setupConfig () { const char * fw_ver = FIRMWARE_VERSION; config.ota = AC_OTA_BUILTIN; config.otaExtraCaption = fw_ver; // This code doesn't work as intended. portal.config(config); } void setup () { setupConfig(); portal.begin(); } void loop () { portal.handleClient(); } Receive the AutoConnectOTA status change ENHANCED w/v1.3.0 \u00b6 You can capture the change in the state of the OTA by registering the exit routine to AutoConnect. The exit routine for notifying the state change of AutoConnectOTA can execute the user's sketch function during specific stages of OTA or on an error. Also, these exit routines have the same interface as the similar exit functions included in the Arduino core. The following functions register the function in your sketch with AutoConnect to notify OTA state changes. AutoConnect::onOTAStart : Register the on-start exit routine that is called only once when the OTA has been started. AutoConnect::onOTAProgress : Register the exit routine that is called during the OTA progress. AutoConnect::onOTAEnd : Register the on-end exit routine that is called only once when the OTA is finished. AutoConnect::onOTAError : Register the exit routine that is called when some error occurred. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void OTAStart () { Serial.println( \"Start OTA updating\" ); } void OTAEnd () { Serial.println( \" \\n End\" ); } void OTAProgress ( unsigned int amount, unsigned int size) { Serial.printf( \"Progress: %u(%u) \\r \" , amount, size); } void OTAError ( uint8_t error) { Serial.printf( \"Error[%u]: \" , error); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); config.ota = AC_OTA_BUILTIN; portal.config(config); portal.onOTAStart(OTAStart); portal.onOTAEnd(OTAEnd); portal.onOTAProgress(OTAProgress); portal.onOTAError(OTAError); portal.begin(); } void loop () { portal.handleClient(); } window.onload = function() { Gifffer(); }; For ESP32, change the following items: Change the include directives appropriately for the ESP32 environment. Change ESP8266WebServer to WebServer. \u21a9 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":"Using Web Browser"},{"location":"otabrowser.html#updates-with-the-web-browserupdated-wv115","text":"AutoConnect features a built-in OTA function to update ESP module firmware. You can easily make the Sketch that equips OTA and able to operate with the AutoConnect menu. As the AutoConnectOTA class, which is compliant with OTA updates using a web browser as described in the ESP8266 Arduino Core documentation . You will be able to import the AutoConnectOTA class into your sketch just by specifying AutoConnectConfig::ota . By incorporating the AutoConnectOTA class into your Sketch, you can have an OTA updating feature which able to updating binary sketch from the AutoConnect menu. The AutoConnectOTA feature is implemented based on the Updater class of the ESP8266 arduino core library. Its Updater class is also supported by the ESP32 Arduino core, so you can commonly import AutoConnectOTA into the Sketch without being aware of the differences between ESP8266 and ESP32 modules. Limitation of AutoConnectOTA with authentication AutoConnectOTA does not support authentication in v1.1.5 yet. It is planned for inclusion in AutoConnect v1.2.0, which will support HTTP authentication.","title":"Updates with the Web Browser&nbsp;UPDATED w/v1.1.5"},{"location":"otabrowser.html#how-to-embed-autoconnectota-in-your-sketch","text":"To embed the AutoConnectOTA class into your sketch, basically follow these steps: Include ESP8266WiFi.h , ESP8266WebServer.h and AutoConnect.h as usual. 1 Declare an ESP8266WebServer object. It's optional. (as WebServer for ESP32) Declare an AutoConnect object, with an argument as ESP8266WebServer if separate the declarations. Declare an AutoConnectConfig object. Declare an AutoConnectAux object for your sketch own if needed. Perform the following procedure steps in the setup() function: Set AutoConnectConfig::ota to AC_OTA_BUILTIN and configure AutoConnect. Load the AutoConnectAux pages declared in step #4 for your application. Join these pages to AutoConnect. Invokes AutoConnect::begin function. Invokes AutoConnect::handleClient function in the loop() . #include <ESP8266WiFi.h> // Step #1 #include <ESP8266WebServer.h> // Step #1 #include <AutoConnect.h> // Step #1 ESP8266WebServer server; // Step #2 AutoConnect portal (server); // Step #3 AutoConnectConfig config; // Step #4 AutoConnectAux hello; // Step #5 static const char HELLO_PAGE[] PROGMEM = R\"( { \"title\": \"Hello world\", \"uri\": \"/\", \"menu\": true, \"element\": [ { \"name\": \"caption\", \"type\": \"ACText\", \"value\": \"<h2>Hello, world</h2>\", \"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.\" } ] } )\" ; // Step #5 void setup () { config.ota = AC_OTA_BUILTIN; // Step #6.a portal.config(config); // Step #6.a hello.load(HELLO_PAGE); // Step #6.b portal.join({ hello }); // Step #6.c portal.begin(); // Step #6.d } void loop () { portal.handleClient(); // Step #7 } How LED ticking during updates AutoConnectOTA applies LED ticking during updates automatically. The destination LED port and ticker drive depends on AutoConnectConfig::tickerPort and AutoConnectConfig::tickerOn specifying. IMPORTANT The AutoConnectOTA activates the ticker constantly regardless of the AutoConnectConfig::ticker value. If you want to stop the ticker output to GPIO during updates, give 0xff to AutoConnectConfig::tickerPort .","title":" How to embed AutoConnectOTA in your sketch"},{"location":"otabrowser.html#autoconnectota-allocation-uri","text":"AutoConnectOTA has implemented using AutoConnectAUX. So it occupies two URIs by default. An update operation page is assigned to AUTOCONNECT_URI_UPDATE and the binary file uploader for the update is assigned to AUTOCONNECT_URI_UPDATE_ACT . These symbols are defined in the AutoConnectDefs.h header file as follows: #define AUTOCONNECT_URI \"/_ac\" #define AUTOCONNECT_URI_UPDATE AUTOCONNECT_URI \"/update\" #define AUTOCONNECT_URI_UPDATE_ACT AUTOCONNECT_URI \"/update_act\" Therefore, the normal Sketch that imports AutoConnectOTA while keeping the default, you cannot use the two URIs /_ac/update and /_ac/update_act for your specific. If you want to use the URIs for any purpose other than AutoConnectOTA, you need to override the AutoConnectDefs.h definition at compile time. It can be overwritten by giving the build flags for platformio.ini as follows with the PlatformIO environment for example. build_flags = -DAUTOCONNECT_URI_UPDATE = '\"/YOURURI\"' -DAUTOCONNECT_URI_UPDATE_ACT = '\"/YOURURIACT\"'","title":" AutoConnectOTA allocation URI"},{"location":"otabrowser.html#timing-of-autoconnectota-instantiation","text":"It will be born during AutoConnect::handleClient process. AutoConnect will evaluate the enabled state of AutoConnectConfig::ota each time the handleClient is executed, and if OTA is enabled then it creates an AutoConnectAux internally and assigns it to the update page. At this time, AutoConnectOTA is also instantiated together. The generated AUX page containing AutoConnectOTA is bound to AutoConnect inside the AutoConnect::handleClient process. If you want to attach AutoConnectOTA dynamically with an external trigger, you can sketch like this: This sketch imports the OTA update feature with an external switch assigned to the GPIO pin. While the trigger not occurs, AutoConnectOTA will not be imported into Sketch and will not appear on the menu list. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> #define TRIGGER 4 // pin assigned to external trigger switch AutoConnect portal; AutoConnectConfig config; void setup () { pinMode(TRIGGER, INPUT); portal.begin(); } void loop () { if (digitalRead(TRIGGER) == HIGH) { config.ota = AC_OTA_BUILTIN; portal.config(config); } portal.handleClient(); } AutoConnectOTA cannot detach dynamically Once imported, AutoConnectOTA cannot be removed from the Sketch. It can be only excluded from the menu by overriding AutoConnectConfig::menuItems . In this case, the AutoConnectOTA instance remains as a residue.","title":" Timing of AutoConnectOTA instantiation"},{"location":"otabrowser.html#authentication-with-autoconnectota","text":"HTTP authentication of AutoConnect is also effective for OTA. Since the implementation of AutoConnectOTA is based on AutoConnectAux, the AutoConnectConfig::auth setting is valid for AutoConnectOTA as well. Also, it allows you to make authentication only on the OTA page while various custom Web pages coexist. The AC_AUTH_BASIC or AC_AUTH_DIGEST setting to the AutoConnectConfig::auth enables HTTP authentication. If it is in combination with AC_AUTHSCOPE_PARTIAL specified AutoConnectConfig::authScope setting, only an OTA page will be authenticated, excluding other custom Web pages that co-exist. AutoConnect portal; AutoConnectConfig config; AutoConnectAux aux ( \"/aux\" , \"AUX\" ); void setup () { // Join some custom web page portal.join(aux); // Add OTA into the Sketch config.ota = AC_OTA_BUILTIN; // Enable authentication on OTA page only config.auth = AC_AUTH_DIGEST; config.authScope = AC_AUTHSCOPE_PARTIAL; // Configure other settings ... // Apply configuration settings portal.config(config); portal.begin(); }","title":" Authentication with AutoConnectOTA"},{"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.","title":" How to make the binary sketch"},{"location":"otabrowser.html#ota-updates-wbrowser-without-using-autoconnectota","text":"The legacy OTA method based on ESP8266HTTPUpdateServer without AutoConnectOTA is still valid. To embed the ESP8266HTTPUpdateServer class with AutoConnect into your sketch, basically follow these steps: Include ESP8266HTTPUpdateServer.h , also WiFiClient.h , in addition to the usual directives as ESP8266WebServer.h and AutoConnect.h . 2 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. Invokes AutoConnect::handleClient function in the loop() . #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <ESP8266HTTPUpdateServer.h> // Step #1 #include <WiFiClient.h> // Step #1 #include <AutoConnect.h> static const char HELLO_PAGE[] PROGMEM = R\"( { \"title\": \"Hello world\", \"uri\": \"/\", \"menu\": true, \"element\": [ { \"name\": \"caption\", \"type\": \"ACText\", \"value\": \"<h2>Hello, world</h2>\", \"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 portal.begin(); // Step #9.d } void loop () { portal.handleClient(); // Step #10 }","title":" OTA updates w/browser without using AutoConnectOTA"},{"location":"otabrowser.html#regular-file-uploading-using-autoconnectotaenhanced-wv120","text":"The built-in OTA update feature can update the firmware as well as upload regular files placed in the file system on the ESP module. It allows a regular file is uploaded via OTA using the Update of AutoConnect menu without adding a particular custom Web page that contains AutoConnectFile. This utilization is useful for the operation of transferring the JSON document of the custom web page definition, the external parameter file of your sketch, and so on into the target ESP module via OTA. The built-in OTA update feature determines where to save the uploaded file according to the filename pattern. By default, a filename with ends a .bin extension is subject to firmware updates. A file that has another extensions will be saved as a regular to LittleFS (or SPIFFS) in the flash. The filename extension that should be treated as the firmware is defined as the AUTOCONNECT_UPLOAD_ASFIRMWARE macro in AutoConnectDefs.h header file of the library source code. When dealing with another extensions for the updating file as firmware change this macro definition. #define AUTOCONNECT_UPLOAD_ASFIRMWARE \".bin\" Specify with the PlatformIO AUTOCONNECT_UPLOAD_ASFIRMWARE pattern will be embedded into the binary sketch is determined at compile time. The PlatformIO build system allows you to change the pattern of the file extension for each project without modifying the library source code. build_flags = -DAUTOCONNECT_UPLOAD_ASFIRMWARE='\".bin\"' Use a regular expression to specify the file extension By default, you can specify only one file extension to be treated as firmware in OTA updates. However, you can specify the file extension as a regular expression, but it consumes a lot of memory. If the file extension pattern contains a regular expression, you need to enable the flag of AUTOCONNECT_UPLOAD_ASFIRMWARE_USE_REGEXP in AutoConnectDefs.h . Also, the AUTOCONNECT_UPLOAD_ASFIRMWARE definition as a regular expression is treated as a replacement string for the #define directive for C++ preprocessor, so the backslash must be escaped.","title":" Regular file uploading using AutoConnectOTA&nbsp;ENHANCED w/v1.2.0"},{"location":"otabrowser.html#display-an-extra-string-on-the-update-screenenhanced-wv130","text":"You can add an extra string to the OTA update screen by the sketch. If an extra string is specified, it will be displayed on the right side of \" Updating firmware \" caption. The screenshot above shows an example of adding the current version of the sketch to the OTA caption. To display in the add an extra caption to the OTA update screen, sets the AutoConnectConfig::otaExtraCaption by your sketch. A type of the extra caption type to set in AutoConnectConfig::otaExtraCaption is the const char pointer . So, its string must remain in the memory area for the duration of OTA. (This string is not copied to the AutoConnectOTA class and expiration must be guaranteed by your sketch) #define FIRMWARE_VERSION \"1.1.12-dev\" ... #include <AutoConnect.h> ... const char * fw_ver = FIRMWARE_VERSION; AutoConnect portal; AutoConnectConfig config; void setup () { config.ota = AC_OTA_BUILTIN; config.otaExtraCaption = fw_ver; portal.config(config); portal.begin(); } void loop () { portal.handleClient(); } Common mistakes about variable expiration Local variables are valid only within the function. The following code seems to work at first glance. But practically, *fw_ver is released at the end of the function. AutoConnectConfig::otaExtraCaption holds only a pointer to the extra caption string. #define FIRMWARE_VERSION \"1.1.12-dev\" ... #include <AutoConnect.h> ... AutoConnect portal; AutoConnectConfig config; void setupConfig () { const char * fw_ver = FIRMWARE_VERSION; config.ota = AC_OTA_BUILTIN; config.otaExtraCaption = fw_ver; // This code doesn't work as intended. portal.config(config); } void setup () { setupConfig(); portal.begin(); } void loop () { portal.handleClient(); }","title":" Display an extra string on the update screen&nbsp;ENHANCED w/v1.3.0"},{"location":"otabrowser.html#receive-the-autoconnectota-status-changeenhanced-wv130","text":"You can capture the change in the state of the OTA by registering the exit routine to AutoConnect. The exit routine for notifying the state change of AutoConnectOTA can execute the user's sketch function during specific stages of OTA or on an error. Also, these exit routines have the same interface as the similar exit functions included in the Arduino core. The following functions register the function in your sketch with AutoConnect to notify OTA state changes. AutoConnect::onOTAStart : Register the on-start exit routine that is called only once when the OTA has been started. AutoConnect::onOTAProgress : Register the exit routine that is called during the OTA progress. AutoConnect::onOTAEnd : Register the on-end exit routine that is called only once when the OTA is finished. AutoConnect::onOTAError : Register the exit routine that is called when some error occurred. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void OTAStart () { Serial.println( \"Start OTA updating\" ); } void OTAEnd () { Serial.println( \" \\n End\" ); } void OTAProgress ( unsigned int amount, unsigned int size) { Serial.printf( \"Progress: %u(%u) \\r \" , amount, size); } void OTAError ( uint8_t error) { Serial.printf( \"Error[%u]: \" , error); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); config.ota = AC_OTA_BUILTIN; portal.config(config); portal.onOTAStart(OTAStart); portal.onOTAEnd(OTAEnd); portal.onOTAProgress(OTAProgress); portal.onOTAError(OTAError); portal.begin(); } void loop () { portal.handleClient(); } window.onload = function() { Gifffer(); }; For ESP32, change the following items: Change the include directives appropriately for the ESP32 environment. Change ESP8266WebServer to WebServer. \u21a9 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":" Receive the AutoConnectOTA status change&nbsp;ENHANCED w/v1.3.0"},{"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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> 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 OTA update feature that able to operate via the web browser by AutoConnect menu. All you need to do is that specify AutoConnectConfig . 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.","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 OTA update feature that able to operate via the web browser by AutoConnect menu. All you need to do is that specify AutoConnectConfig . 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.","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. Exclude the ArduinoJson by each compile-time If you want to exclude ArduinoJson without changing the library code, specify the AUTOCONNECT_NOUSE_JSON directive as a compiler option according to the method described in the FAQ . Implementation example without ArduinoJson \u00b6 The code excluding JSON processing from the mqttRSSI sketch attached to the library is as follows. (It is a part of code. Refer to mqttRSSI_NA.ino for the whole sketch.) The JSON document for mqttRSSI [ { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_setting\" , \"menu\" : true , \"element\" : [ { \"name\" : \"header\" , \"type\" : \"ACText\" , \"value\" : \"<h2>MQTT broker settings</h2>\" , \"style\" : \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\" , \"style\" : \"font-family:serif;color:#4682b4;\" }, { \"name\" : \"mqttserver\" , \"type\" : \"ACInput\" , \"value\" : \"\" , \"label\" : \"Server\" , \"pattern\" : \"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\\\-]*[a-zA-Z0-9])\\\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\\\-]*[A-Za-z0-9])$\" , \"placeholder\" : \"MQTT broker server\" }, { \"name\" : \"channelid\" , \"type\" : \"ACInput\" , \"label\" : \"Channel ID\" , \"pattern\" : \"^[0-9]{6}$\" }, { \"name\" : \"userkey\" , \"type\" : \"ACInput\" , \"label\" : \"User Key\" }, { \"name\" : \"apikey\" , \"type\" : \"ACInput\" , \"label\" : \"API Key\" }, { \"name\" : \"newline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr>\" }, { \"name\" : \"uniqueid\" , \"type\" : \"ACCheckbox\" , \"value\" : \"unique\" , \"label\" : \"Use APID unique\" , \"checked\" : false }, { \"name\" : \"period\" , \"type\" : \"ACRadio\" , \"value\" : [ \"30 sec.\" , \"60 sec.\" , \"180 sec.\" ], \"label\" : \"Update period\" , \"arrange\" : \"vertical\" , \"checked\" : 1 }, { \"name\" : \"newline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr>\" }, { \"name\" : \"hostname\" , \"type\" : \"ACInput\" , \"value\" : \"\" , \"label\" : \"ESP host name\" , \"pattern\" : \"^([a-zA-Z0-9]([a-zA-Z0-9-])*[a-zA-Z0-9]){1,32}$\" }, { \"name\" : \"save\" , \"type\" : \"ACSubmit\" , \"value\" : \"Save&amp;Start\" , \"uri\" : \"/mqtt_save\" }, { \"name\" : \"discard\" , \"type\" : \"ACSubmit\" , \"value\" : \"Discard\" , \"uri\" : \"/\" } ] }, { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_save\" , \"menu\" : false , \"element\" : [ { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"<h4>Parameters saved as:</h4>\" , \"style\" : \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\" : \"parameters\" , \"type\" : \"ACText\" }, { \"name\" : \"clear\" , \"type\" : \"ACSubmit\" , \"value\" : \"Clear channel\" , \"uri\" : \"/mqtt_clear\" } ] } ] Exclude the JSON and replace to the AutoConnectElements natively // In the declaration, // Declare AutoConnectElements for the page asf /mqtt_setting ACText(header, \"<h2>MQTT broker settings</h2>\" , \"text-align:center;color:#2f4f4f;padding:10px;\" ); ACText(caption, \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\" , \"font-family:serif;color:#4682b4;\" ); ACInput(mqttserver, \"\" , \"Server\" , \"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9 \\\\ -]*[a-zA-Z0-9]) \\\\ .)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9 \\\\ -]*[A-Za-z0-9])$\" , \"MQTT broker server\" ); ACInput(channelid, \"\" , \"Channel ID\" , \"^[0-9]{6}$\" ); ACInput(userkey, \"\" , \"User Key\" ); ACInput(apikey, \"\" , \"API Key\" ); ACElement(newline, \"<hr>\" ); ACCheckbox(uniqueid, \"unique\" , \"Use APID unique\" ); ACRadio(period, { \"30 sec.\" , \"60 sec.\" , \"180 sec.\" }, \"Update period\" , AC_Vertical, 1 ); ACSubmit(save, \"Start\" , \"mqtt_save\" ); ACSubmit(discard, \"Discard\" , \"/\" ); // Declare the custom Web page as /mqtt_setting and contains the AutoConnectElements AutoConnectAux mqtt_setting ( \"/mqtt_setting\" , \"MQTT Setting\" , true, { header, caption, mqttserver, channelid, userkey, apikey, newline, uniqueid, period, newline, save, discard }); // Declare AutoConnectElements for the page as /mqtt_save ACText(caption2, \"<h4>Parameters available as:</h4>\" , \"text-align:center;color:#2f4f4f;padding:10px;\" ); ACText(parameters); ACSubmit(clear, \"Clear channel\" , \"/mqtt_clear\" ); // Declare the custom Web page as /mqtt_save and contains the AutoConnectElements AutoConnectAux mqtt_save ( \"/mqtt_save\" , \"MQTT Setting\" , false, { caption2, parameters, clear }); // In the setup(), // Join the custom Web pages and performs begin portal.join({ mqtt_setting, mqtt_save }); portal.begin(); Detaching the ArduinoJson library reduces the Sketch size by approximately 10K bytes. \u21a9","title":"Custom Web pages w/o JSON"},{"location":"wojson.html#suppress-increase-in-memory-consumption","text":"Custom Web page processing consumes a lot of memory. AutoConnect will take a whole string of the JSON document for the custom Web pages into memory. The required buffer size for the JSON document of example sketch mqttRSSI reaches approximately 3000 bytes. And actually, it needs twice the heap area. Especially this constraint will be a problem with the ESP8266 which has a heap size poor. AutoConnect can handle custom Web pages without using JSON. In that case, since the ArduinoJson library will not be bound, the Sketch size will also be reduced.","title":"Suppress increase in memory consumption"},{"location":"wojson.html#writing-the-custom-web-pages-without-json","text":"To handle 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. Exclude the ArduinoJson by each compile-time If you want to exclude ArduinoJson without changing the library code, specify the AUTOCONNECT_NOUSE_JSON directive as a compiler option according to the method described in the FAQ .","title":"Writing the custom Web pages without JSON"},{"location":"wojson.html#implementation-example-without-arduinojson","text":"The code excluding JSON processing from the mqttRSSI sketch attached to the library is as follows. (It is a part of code. Refer to mqttRSSI_NA.ino for the whole sketch.) The JSON document for mqttRSSI [ { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_setting\" , \"menu\" : true , \"element\" : [ { \"name\" : \"header\" , \"type\" : \"ACText\" , \"value\" : \"<h2>MQTT broker settings</h2>\" , \"style\" : \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\" , \"style\" : \"font-family:serif;color:#4682b4;\" }, { \"name\" : \"mqttserver\" , \"type\" : \"ACInput\" , \"value\" : \"\" , \"label\" : \"Server\" , \"pattern\" : \"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\\\-]*[a-zA-Z0-9])\\\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\\\-]*[A-Za-z0-9])$\" , \"placeholder\" : \"MQTT broker server\" }, { \"name\" : \"channelid\" , \"type\" : \"ACInput\" , \"label\" : \"Channel ID\" , \"pattern\" : \"^[0-9]{6}$\" }, { \"name\" : \"userkey\" , \"type\" : \"ACInput\" , \"label\" : \"User Key\" }, { \"name\" : \"apikey\" , \"type\" : \"ACInput\" , \"label\" : \"API Key\" }, { \"name\" : \"newline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr>\" }, { \"name\" : \"uniqueid\" , \"type\" : \"ACCheckbox\" , \"value\" : \"unique\" , \"label\" : \"Use APID unique\" , \"checked\" : false }, { \"name\" : \"period\" , \"type\" : \"ACRadio\" , \"value\" : [ \"30 sec.\" , \"60 sec.\" , \"180 sec.\" ], \"label\" : \"Update period\" , \"arrange\" : \"vertical\" , \"checked\" : 1 }, { \"name\" : \"newline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr>\" }, { \"name\" : \"hostname\" , \"type\" : \"ACInput\" , \"value\" : \"\" , \"label\" : \"ESP host name\" , \"pattern\" : \"^([a-zA-Z0-9]([a-zA-Z0-9-])*[a-zA-Z0-9]){1,32}$\" }, { \"name\" : \"save\" , \"type\" : \"ACSubmit\" , \"value\" : \"Save&amp;Start\" , \"uri\" : \"/mqtt_save\" }, { \"name\" : \"discard\" , \"type\" : \"ACSubmit\" , \"value\" : \"Discard\" , \"uri\" : \"/\" } ] }, { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_save\" , \"menu\" : false , \"element\" : [ { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"<h4>Parameters saved as:</h4>\" , \"style\" : \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\" : \"parameters\" , \"type\" : \"ACText\" }, { \"name\" : \"clear\" , \"type\" : \"ACSubmit\" , \"value\" : \"Clear channel\" , \"uri\" : \"/mqtt_clear\" } ] } ] Exclude the JSON and replace to the AutoConnectElements natively // In the declaration, // Declare AutoConnectElements for the page asf /mqtt_setting ACText(header, \"<h2>MQTT broker settings</h2>\" , \"text-align:center;color:#2f4f4f;padding:10px;\" ); ACText(caption, \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\" , \"font-family:serif;color:#4682b4;\" ); ACInput(mqttserver, \"\" , \"Server\" , \"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9 \\\\ -]*[a-zA-Z0-9]) \\\\ .)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9 \\\\ -]*[A-Za-z0-9])$\" , \"MQTT broker server\" ); ACInput(channelid, \"\" , \"Channel ID\" , \"^[0-9]{6}$\" ); ACInput(userkey, \"\" , \"User Key\" ); ACInput(apikey, \"\" , \"API Key\" ); ACElement(newline, \"<hr>\" ); ACCheckbox(uniqueid, \"unique\" , \"Use APID unique\" ); ACRadio(period, { \"30 sec.\" , \"60 sec.\" , \"180 sec.\" }, \"Update period\" , AC_Vertical, 1 ); ACSubmit(save, \"Start\" , \"mqtt_save\" ); ACSubmit(discard, \"Discard\" , \"/\" ); // Declare the custom Web page as /mqtt_setting and contains the AutoConnectElements AutoConnectAux mqtt_setting ( \"/mqtt_setting\" , \"MQTT Setting\" , true, { header, caption, mqttserver, channelid, userkey, apikey, newline, uniqueid, period, newline, save, discard }); // Declare AutoConnectElements for the page as /mqtt_save ACText(caption2, \"<h4>Parameters available as:</h4>\" , \"text-align:center;color:#2f4f4f;padding:10px;\" ); ACText(parameters); ACSubmit(clear, \"Clear channel\" , \"/mqtt_clear\" ); // Declare the custom Web page as /mqtt_save and contains the AutoConnectElements AutoConnectAux mqtt_save ( \"/mqtt_save\" , \"MQTT Setting\" , false, { caption2, parameters, clear }); // In the setup(), // Join the custom Web pages and performs begin portal.join({ mqtt_setting, mqtt_save }); portal.begin(); Detaching the ArduinoJson library reduces the Sketch size by approximately 10K bytes. \u21a9","title":"Implementation example without ArduinoJson"}]}
\ No newline at end of file
+{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"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 UPDATED w/v1.1.5 \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.4.2 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 v1.2.3, PageBuilder v1.5.0 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 &amp; 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-updated-wv115","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 UPDATED w/v1.1.5"},{"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.4.2 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 v1.2.3, PageBuilder v1.5.0 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 AutoConnectRange : Labeled range slider 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\", \"<hr>\"); On the page: Constructor \u00b6 AutoConnectElement( const char * name, const char * value, const ACPosterior_t post) name \u00b6 Each element has a name. The name is the String data type. You can identify each element by the name to access it with sketches. value \u00b6 The value is the string which is a source to generate an HTML code. Characteristics of Value vary depending on the element. The value of AutoConnectElement is native HTML code. A string of value is output as HTML as it is. post \u00b6 The post specifies a tag to add behind the HTML code generated from the element. Its purpose is to place elements on the custom Web page as intended by the user sketch. AutoConnect will not actively be involved in the layout of custom Web pages generated from AutoConnectElements. Each element follows behind the previous one, with the exception of some elements. You can use the post value to arrange vertically or horizontal when the elements do not have the intended position on the custom Web Page specifying the following enumeration value as ACPosterior_t type for the post . AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 AutoConnectRange AC_Tag_BR AutoConnectSelect AC_Tag_BR AutoConnectSubmit AC_Tag_None AutoConnectText AC_Tag_None A placement posterior of AutoConnectText A placement posterior for AutoConnectText has a slightly peculiar specification. AutoConnectText element without the style attribute will be drained to HTML as a raw value and is accompanied by <p> , <br> or <div> tags according to the post enumeration values. If the style attribute is specified, the post enumeration value will be ignored and always be enclosed in the <div> tag, and the style value will be inserted into style attribute of the <div> tag. 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 AutoConnectRange: AC_Range 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<T> 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<AutoConnectText>().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\"( <script> function CopyText() { document.getElementById(\"Text2\").value = document.getElementById(\"Text1\").value; } </script> )\" ; ACInput(Text1, \"Text1\" ); ACInput(Text2, \"Text2\" ); ACButton(Button, \"COPY\" , \"CopyText()\" ); ACElement(TextCopy, scCopyText); 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 <label> tag with an id attribute. The checkbox and the label are connected by the id attribute. Only will be displayed if a label is not specified. checked \u00b6 A checked is a Boolean value and indicates the checked status of the checkbox. The value of the checked checkbox element is packed in the query string and sent. 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\" > , < input type = \"number\" > or < input type = \"password\" > 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, const ACInput_t apply) 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 . apply \u00b6 Specifies the type of input that the text box accepts. AutoConnectInput will generate either a input type=\"text\" , input type=\"password\" , or input type=\"number\" tag based on the apply specifying as input type. The input type can be specified the following values in the ACInput_t enumeration type. AC_Input_Text : input type=\"text\" AC_Input_Password : input type=\"password\" AC_Input_Number : input type=\"number\" Numerical keypad is different When the AutoConnectInput element with the AC_Input_Number applied is focused on the browser, the numeric keypad may be displayed automatically. For popular mobile OSes such as Android and iOS, the numeric keypad has the following styles and is different with each OS. 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 . AutoConnectRange \u00b6 AutoConnectRange generates an HTML < input type = \"range\" > tag and a < label > tag. Sample AutoConnectRange range(\"bri\", 0, \"Brightness\", -2, 2, 1, AC_Infront); On the page: Constructor \u00b6 AutoConnectRange( const char * name, const int value, const char * label, const int min, const int max, const int step, const ACPosition_t magnify, const ACPosterior_t post, const char * style) name \u00b6 It is the name of the AutoConnectRange 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 = \"range\" > tag, which indicates the default value of the range. label \u00b6 A label is an optional string. A label is always arranged on the left side of the range slider. Specification of a label will generate an HTML < label > tag with an id attribute. The range slider and the label are connected by the id attribute. min \u00b6 Specifies the most negative value within the range of allowed values and must not be less than the value argument. max \u00b6 It defines the greatest value in the range of permitted values. step \u00b6 It is a number that specifies the granularity that the value must adhere to. The default is 1. As you move the slider, it increases or decreases the value according to the step in granularity. magnify \u00b6 Displays the current value of the range on the left or right side of the slider. AC_Infront : Displays the current value on the left side. AC_Behind : Displays the current value on the right side. AC_Void : No display the current value. This is the default. post \u00b6 Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_BR . style \u00b6 A style specifies the qualification style to give to the content and can use the style attribute format as it is. 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 <style> </style> 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 . AutoConnectText element without the style parameter will be drained to HTML as a raw value and is accompanied by <p> , <br> or <div> tags according to the post enumeration values. If the style parameter is specified, the post enumeration value will be ignored and always be enclosed in the <div> tag, and the style value will be inserted into style attribute of the <div> tag. 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 | AC_Tag_DIV ] ) ACButton ( name [ , value ] [ , action ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACCheckbox ( name [ , value ] [ , label ] [ , true | false ] [ , AC_Infront | AC_Behind ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACFile ( name [ , value ] [ , label ] [ , AC_File_FS | AC_File_SD | AC_File_Extern ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACInput ( name [ , value ] [ , label ] [ , pattern ] [ , placeholder ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] [ , AC_Input_Text | AC_Input_Password | AC_Input_Number ] ) ACRadio ( name [ , values ] [ , label ] [ , AC_Horizontal | AC_Vertical ] [ , checked ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACRange ( name [ , value ] [ , label ] [ , min ] [ , max ] [ , step ] [ , AC_Infront | AC_Behind | AC_Void ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] [ , style ] ) ACSelect ( name [ , options ] [ , label ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACStyle ( name [ , value ] ) ACSubmit ( name [ , value ] [ , uri ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACText ( name [ , value ] [ , style ] [ , format ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) 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 AutoConnectRange : Labeled range slider 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\", \"<hr>\"); On the page:","title":"AutoConnectElement - A basic class of elements"},{"location":"acelements.html#constructor","text":"AutoConnectElement( const char * name, const char * value, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name","text":"Each element has a name. The name is the String data type. You can identify each element by the name to access it with sketches.","title":" name"},{"location":"acelements.html#value","text":"The value is the string which is a source to generate an HTML code. Characteristics of Value vary depending on the element. The value of AutoConnectElement is native HTML code. A string of value is output as HTML as it is.","title":" value"},{"location":"acelements.html#post","text":"The post specifies a tag to add behind the HTML code generated from the element. Its purpose is to place elements on the custom Web page as intended by the user sketch. AutoConnect will not actively be involved in the layout of custom Web pages generated from AutoConnectElements. Each element follows behind the previous one, with the exception of some elements. You can use the post value to arrange vertically or horizontal when the elements do not have the intended position on the custom Web Page specifying the following enumeration value as ACPosterior_t type for the post . AC_Tag_None : No generate additional tags. AC_Tag_BR : Add a <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 AutoConnectRange AC_Tag_BR AutoConnectSelect AC_Tag_BR AutoConnectSubmit AC_Tag_None AutoConnectText AC_Tag_None A placement posterior of AutoConnectText A placement posterior for AutoConnectText has a slightly peculiar specification. AutoConnectText element without the style attribute will be drained to HTML as a raw value and is accompanied by <p> , <br> or <div> tags according to the post enumeration values. If the style attribute is specified, the post enumeration value will be ignored and always be enclosed in the <div> tag, and the style value will be inserted into style attribute of the <div> tag.","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 AutoConnectRange: AC_Range 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<T> 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<AutoConnectText>().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\"( <script> function CopyText() { document.getElementById(\"Text2\").value = document.getElementById(\"Text1\").value; } </script> )\" ; ACInput(Text1, \"Text1\" ); ACInput(Text2, \"Text2\" ); ACButton(Button, \"COPY\" , \"CopyText()\" ); ACElement(TextCopy, scCopyText);","title":" action"},{"location":"acelements.html#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 <label> tag with an id attribute. The checkbox and the label are connected by the id attribute. Only will be displayed if a label is not specified.","title":" label"},{"location":"acelements.html#checked","text":"A checked is a Boolean value and indicates the checked status of the checkbox. The value of the checked checkbox element is packed in the query string and sent.","title":" checked"},{"location":"acelements.html#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\" > , < input type = \"number\" > or < input type = \"password\" > 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, const ACInput_t apply)","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#apply","text":"Specifies the type of input that the text box accepts. AutoConnectInput will generate either a input type=\"text\" , input type=\"password\" , or input type=\"number\" tag based on the apply specifying as input type. The input type can be specified the following values in the ACInput_t enumeration type. AC_Input_Text : input type=\"text\" AC_Input_Password : input type=\"password\" AC_Input_Number : input type=\"number\" Numerical keypad is different When the AutoConnectInput element with the AC_Input_Number applied is focused on the browser, the numeric keypad may be displayed automatically. For popular mobile OSes such as Android and iOS, the numeric keypad has the following styles and is different with each OS.","title":" apply"},{"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#autoconnectrange","text":"AutoConnectRange generates an HTML < input type = \"range\" > tag and a < label > tag. Sample AutoConnectRange range(\"bri\", 0, \"Brightness\", -2, 2, 1, AC_Infront); On the page:","title":"AutoConnectRange"},{"location":"acelements.html#constructor_6","text":"AutoConnectRange( const char * name, const int value, const char * label, const int min, const int max, const int step, const ACPosition_t magnify, const ACPosterior_t post, const char * style)","title":" Constructor"},{"location":"acelements.html#name_6","text":"It is the name of the AutoConnectRange 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_5","text":"It becomes a string value of the value attribute of an HTML < input type = \"range\" > tag, which indicates the default value of the range.","title":" value"},{"location":"acelements.html#label_4","text":"A label is an optional string. A label is always arranged on the left side of the range slider. Specification of a label will generate an HTML < label > tag with an id attribute. The range slider and the label are connected by the id attribute.","title":" label"},{"location":"acelements.html#min","text":"Specifies the most negative value within the range of allowed values and must not be less than the value argument.","title":" min"},{"location":"acelements.html#max","text":"It defines the greatest value in the range of permitted values.","title":" max"},{"location":"acelements.html#step","text":"It is a number that specifies the granularity that the value must adhere to. The default is 1. As you move the slider, it increases or decreases the value according to the step in granularity.","title":" step"},{"location":"acelements.html#magnify","text":"Displays the current value of the range on the left or right side of the slider. AC_Infront : Displays the current value on the left side. AC_Behind : Displays the current value on the right side. AC_Void : No display the current value. This is the default.","title":" magnify"},{"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#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#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_7","text":"AutoConnectStyle( const char * name, const char * value)","title":" Constructor"},{"location":"acelements.html#name_7","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_6","text":"The raw CSS code. It is not necessary to write <style> </style> 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_8","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_8","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_5","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_7","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_9","text":"AutoConnectSubmit( const char * name, const char * value, const char * uri, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_9","text":"It is the name of the AutoConnectSubmit element and matches the name attribute of the input tag.","title":" name"},{"location":"acelements.html#value_7","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_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#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_10","text":"AutoConnectText( const char * name, const char * value, const char * style, const char * format, const ACPosterior_t post)","title":" Constructor"},{"location":"acelements.html#name_10","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_8","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_1","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_9","text":"Specifies a tag to add behind the HTML code generated from the element. The default values is AC_Tag_None . AutoConnectText element without the style parameter will be drained to HTML as a raw value and is accompanied by <p> , <br> or <div> tags according to the post enumeration values. If the style parameter is specified, the post enumeration value will be ignored and always be enclosed in the <div> tag, and the style value will be inserted into style attribute of the <div> tag.","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 | AC_Tag_DIV ] ) ACButton ( name [ , value ] [ , action ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACCheckbox ( name [ , value ] [ , label ] [ , true | false ] [ , AC_Infront | AC_Behind ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACFile ( name [ , value ] [ , label ] [ , AC_File_FS | AC_File_SD | AC_File_Extern ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACInput ( name [ , value ] [ , label ] [ , pattern ] [ , placeholder ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] [ , AC_Input_Text | AC_Input_Password | AC_Input_Number ] ) ACRadio ( name [ , values ] [ , label ] [ , AC_Horizontal | AC_Vertical ] [ , checked ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACRange ( name [ , value ] [ , label ] [ , min ] [ , max ] [ , step ] [ , AC_Infront | AC_Behind | AC_Void ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] [ , style ] ) ACSelect ( name [ , options ] [ , label ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACStyle ( name [ , value ] ) ACSubmit ( name [ , value ] [ , uri ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) ACText ( name [ , value ] [ , style ] [ , format ] [ , AC_Tag_None | AC_Tag_BR | AC_Tag_P | AC_Tag_DIV ] ) 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. Custom Web page handler programming model \u00b6 To handle Custom Web pages properly, the sketches need to implement to match the programming model. Custom Web page programming model is depicted as follows: Custom Web page handler acts as an event handler for processing the HTTP request captured by the WebServer class. The WebServer class parses the HTTP request and calls the registered uri handler appropriately. The custom web page uri (it should be specified by the JSON description for the custom web page, the AutoConnectAux constructor , or the AutoConnect::on function) is not registered directly with the WebServer class, and the Requests always go through the request dispatcher inside AutoConnect. When implementing the custom Web page handler, it is possible to give an appropriate function to the handler by understanding the above internal structure in advance. Custom web page handler can be sketched as regular function and has interface is as follows: String customWebpageHandler(AutoConnectAux & aux, PageArgument & args) Parameters for the customWebageHandler \u00b6 When the custom web page handler is called, AutoConnect passes the following two parameters: 1. Reference to the AutoConnectAux instance \u00b6 Custom Web page handlers can access the AutoConnectElements owned by its page through a reference to the AutoConnectAux instance. It can use this access to update the AutoConnectElements value before the user views the page or get the value of AutoConnectElements owned by the page that triggered the transition. A list of commonly used functions to access AutoConnectElements with your Sketch via reference to an AutoConnectAux instance is following: [] operator : Access to an AutoConnectElement by specified element name. getElement function : Access to an AutoConnectElement by specified element name. as<> function : Cast from a variant of AutoConnectElemnet type to an actual type such as AutoConnectText or AutoConnectInput etc. To access attributes that exist only in the actual type, it is necessary to convert from the AutoConnectElement type obtained with [] operator or getElement function. See the section Get AutoConnectElement from the AutoConnectAux and the section AutoConnectElements API for usage examples and API specifications for each above function. 2. Reference to the PageArgument instance \u00b6 The values of the AutoConnectCheckbox , AutoConnectFile , AutoConnectInput , AutoConnectRadio , and AutoConnectSelect elements are packed into the form data of the HTTP POST method by the page transition caused by AutoConnectSubmit . Use the PageArgument instance to retrieve the values of these transmitted AutoConnectElements with the customWebpageHandler. A list of commonly used functions to access PageArgment member variables with your Sketch via a reference to an PageArgument instance is following: arg function : Get an element value by specified element name. hasArg function : Checks for the existence of an element with the specified name. The method to get the form data attached to the HTTP request via PageArgument is described with the section How you can reach the values . 3. Access to the AutoConnectElement values \u00b6 Here, you have one thing to note. The custom web page handler registered with AutoConnect::on function is called to respond to an HTTP request to the URL of its page. And, the AutoConnectAux instance then references the custom web page assigned to the requested URL. That is, the AutoConnectAux instance passed to the custom web page handler owns the AutoConnectElements for that page, while the PageArgument instance has the AutoConnectElements value of the custom web page that caused the page transition. You need to keep the difference between the two in mind when implementing the custom web page handler with your Sketch and access these values via the appropriate approach. You can access the AutoConnect Elements of the custom web page itself via the AutoConnectAux& argument by specifying the element name. You can also use the PageArgument& argument to get the value of AutoConnectElements for the page that caused the transition to that custom web page. (the URL that issued the HTTP request) The following screenshots are outputs of custom web pages that are based on a scenario to help you understand how to access AutoConnectElements properly with a custom web page handler. The requirements for this scenario are: Calculate an addition simply, add B to A . Perform the calculation with a customWebPageHandler. Returns the calculated result in another custom web page with page transitions. The first thing to work on is defining two custom web pages. Here, Value A and Value B are easily defined by applying AutoConnectInput . Also, add an action button to perform the calculation with AutoConnectSubmit . { \"uri\" : \"/add\" , \"title\" : \"Adder\" , \"menu\" : true , \"element\" : [ { \"name\" : \"valueA\" , \"type\" : \"ACInput\" , \"label\" : \"Value A\" , \"apply\" : \"number\" }, { \"name\" : \"valueB\" , \"type\" : \"ACInput\" , \"label\" : \"Value B\" , \"apply\" : \"number\" }, { \"name\" : \"add\" , \"type\" : \"ACSubmit\" , \"value\" : \"ADD\" , \"uri\" : \"/results\" } ] } Next, define an additional page to display the results. Here we use AutoConnectText to display the calculation as a representation string of the expression. There is one thing to watch out for here. That is, the transition destination of the action button as ADD that accept the operand (it is specified by the uri of the ACSubmit element named \"add\") and the uri of the page that displays the answer are the same. { \"uri\" : \"/results\" , \"title\" : \"Adder\" , \"menu\" : false , \"element\" : [ { \"name\" : \"results\" , \"type\" : \"ACText\" } ] } When implementing a custom web page handler, it's usually a good idea to pre-determine the page design (which consists of the elements and layouts you want to use) for a better outlook when coding your Sketch. Especially when coding a custom web page handler, you need to specify the AutoConnectElements exactly, and it is recommended to implement it along the JSON defined earlier. After this, sketch the handlers for the above two custom web pages. First, the handler for the page allocated to /add . The role of this handler is to initialize the values respectively for the valueA and valueB input boxes. Both of these two input boxes are on the /add page, so the handler only references the AutoConnectAux& aux argument. You can use the [] operator with the element name like as aux[\"valueA\"] to get a reference to an AutoConnectElement by name. Then, once the reference is converted to AutoConnectInput, the value member of AutoConnectInput can be accessed. Use the as<AutoConnectInput>() function to convert from the AutoConnectElement type to the actual AutoConnectInput type. String onAdd (AutoConnectAux & aux, PageArgument & args) { aux[ \"valueA\" ].as < AutoConnectInput > ().value = \"0\" ; aux[ \"valueB\" ].as < AutoConnectInput > ().value = \"0\" ; return String(); } Next, the handler for the page allocated to /results . The role of this handler is to add the value B to A for the calculation. The /results page does not have an element that contains the operands Value A and Value B to calculate. Only the /add page has them. The /results page handler is called when ACSubmit on the /add page works, so valueA and valueB are included in the form data of the HTTP POST request to the /results page. That is, the handler for the /results page will get valueA and valueB from the PageArgument& args argument. String onResults (AutoConnectAux & aux, PageArgument & args) { int valueA = args.arg( \"valueA\" ).toInt(); int valueB = args.arg( \"valueB\" ).toInt(); aux[ \"results\" ].as < AutoConnectText > ().value = String(valueA) + \" + \" + String(valueB) + \" = \" + String(valueA + valueB); return String(); } PageArgument is a built-in class in the PageBuilder library. You can use the PageArgument::arg function to retrieve the parameters of the form data contained in the POST request by name. Since the PageArgument::arg function returns the parameters of the POSTed form data as a string, it converts Value A and Value B to the operand integer value of the addition via the String::toInt() function. int valueA = args.arg( \"valueA\" ).toInt(); int valueB = args.arg( \"valueB\" ).toInt(); In this scenario, in addition to the calculation result, the calculation formula is also displayed on the result page. aux[ \"results\" ].as < AutoConnectText > ().value = String(valueA) + \" + \" + String(valueB) + \" = \" + String(valueA + valueB); The customWebpageHandler return value \u00b6 The customWebpageHandler returns a string. The returned string is used internally by AutoConnect to temporarily qualify the HTML generating of the custom web page. AutoConnect typically calls a custom web page handler before HTML generation. When the customWebpageHandler returns an HTML string for qualification, it applies to the drawing area for the elements of AutoConnectElements. Additionally, you can then specify where the modifier HTML will be inserted. The second parameter of the AutoConnectAux::on function, which allows the registration of custom web page handlers, indicates where to insert the modifier HTML. The Sketch can specify the following three values for the second parameter of AutoConnectAux::on function: AC_EXIT_AHEAD : Modifiers HTML returned by the custom Web page handler is inserted into the front of the list expansion of AutoConnectElements. AC_EXIT_LATER : Modifiers HTML returned by the custom Web page handler is inserted into the back of the list expansion of AutoConnectElements. AC_EXIT_BOTH : The customWebpageHandle will be called twice before and after list expansion of AutoConnectElements. A detailed description of the AutoConnectAux::on function can be found in Section AutoConnectAux API . The actual sketch code implemented following these steps above would look like this (case of ESP8266): #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> const char PAGE_ADD[] PROGMEM = R\"( { \"uri\": \"/add\", \"title\": \"Adder\", \"menu\": true, \"element\": [ { \"name\": \"valueA\", \"type\": \"ACInput\", \"label\": \"Value A\", \"apply\": \"number\" }, { \"name\": \"valueB\", \"type\": \"ACInput\", \"label\": \"Value B\", \"apply\": \"number\" }, { \"name\": \"add\", \"type\": \"ACSubmit\", \"value\": \"ADD\", \"uri\": \"/results\" } ] } )\" ; const char PAGE_RESULTS[] PROGMEM = R\"( { \"uri\": \"/results\", \"title\": \"Adder\", \"menu\": false, \"element\": [ { \"name\": \"results\", \"type\": \"ACText\" } ] } )\" ; AutoConnect portal; AutoConnectAux page_add; AutoConnectAux page_results; String onAdd (AutoConnectAux & aux, PageArgument & args) { aux[ \"valueA\" ].as < AutoConnectInput > ().value = \"0\" ; aux[ \"valueB\" ].as < AutoConnectInput > ().value = \"0\" ; return String(); } String onResults (AutoConnectAux & aux, PageArgument & args) { int valueA = args.arg( \"valueA\" ).toInt(); int valueB = args.arg( \"valueB\" ).toInt(); aux[ \"results\" ].as < AutoConnectText > ().value = String(valueA) + \" + \" + String(valueB) + \" = \" + String(valueA + valueB); return String(); } void setup () { delay( 1000 ); page_add.load(PAGE_ADD); page_results.load(PAGE_RESULTS); portal.join({ page_add, page_results }); portal.on( \"/add\" , onAdd); portal.on( \"/results\" , onResults); portal.begin(); } void loop () { portal.handleClient(); } 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 char * name) AutoConnectElement * AutoConnectAux :: getElement( const __FlashStringHelper * name) 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 <T> to an argument of the getElement. A type of <T> 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<T> 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<T> 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char addonJson[] PROGMEM = R\"raw( { \"title\": \"Hello\", \"uri\": \"/hello\", \"menu\": true, \"element\": [ { \"name\": \"feels\", \"type\": \"ACInput\", \"label\": \"What's up?\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"Just it!\", \"uri\": \"/feels\" } ] } )raw\" ; ESP8266WebServer webServer; AutoConnect portal (webServer); // Here, /feels handler void feelsOn () { // Retrieve the value of a input-box named \"feels\" String feel = webServer.arg( \"feels\" ); // Echo back the value String echo = \"<html><p style= \\\" color:blue;font-family:verdana;font-size:300%; \\\" >\" + feel + String( \" and a bold world!</p></html>\" ); webServer.send( 200 , \"text/html\" , echo); } void setup () { delay( 1000 ); webServer.on( \"/feels\" , feelsOn); // Register /feels handler portal.load(addonJson); // Load a custom Web page portal.begin(); } void loop () { portal.handleClient(); } An above example is the most simple sketch of handling values entered into a custom Web page. This sketch obtains the string entered in the AutoConnectInput named feels with the /feels handler after page transition, and the AutoConnectInput is an <input type=\"text\" name=\"feels\"> element wrapped in the form as the actual HTML code. Should be accessed /_ac first When you actually try the above sketch, there is no a root handler. So the URL that should be accessed first is /_ac concatenated with the local IP address of the esp8266 module. Another method is effective when custom Web pages have complicated page transitions. It is a way to straight access the AutoConnectElements member value. You can get the AutoConnectElement with the specified name using the getElement function. The following sketch executes the above example with AutoConnect only, without using the function of ESP8266WebServer. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> const static char addonJson[] PROGMEM = R\"raw( [ { \"title\": \"Hello\", \"uri\": \"/hello\", \"menu\": true, \"element\": [ { \"name\": \"feels\", \"type\": \"ACInput\", \"label\": \"What's up?\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"Just it!\", \"uri\": \"/feels\" } ] }, { \"title\": \"Hello\", \"uri\": \"/feels\", \"menu\": false, \"element\": [ { \"name\": \"echo\", \"type\": \"ACText\", \"style\": \"color:blue;font-family:verdana;font-size:300%;\" } ] } ] )raw\" ; AutoConnect portal; // Here, /feels handler String feelsOn (AutoConnectAux & aux, PageArgument & args) { // Get the AutoConnectInput named \"feels\". // The where() function returns 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( \"<p>This text has been added.</p>\" ); } How you can reach the values \u00b6 AutoConnectSubmit uses the POST method to send HTTP requests. A value of AutoConnectInput sent to the ESP8266 or ESP32 with POST is stored in the request body of the HTTP request: POST /feels HTTP/1.1 Host: ESP8266_IP_ADDRESS name1=value1&name2=value2&name3=value3 ESP8266WebServer class will parse the query string and rebuilds its arguments when the above request arrives. A custom page handler registered with the ESP8266WebServer::on function can access the value of AutoConnectElements with ESP8266WebServe::arg function. It reaches the values of AutoConnectElements without the intermediation of AutoConnect. Therefore, its handler will not be AutoConnectAux and can send a response to the client directly. The following example is part of a server sketch which has two web pages. The /hello page is a custom Web page of AutoConnectAux which has an input box named \"input1\". Another /echo page is a page handler for ESP8266WebServer, which uses the ESP8266WebServer::send function to echo back the value of an input1 as an http response. ESP8266WebServer server; AutoConnect portal (server); ACInput(input1, \"\" , \"INPUT\" ); ACSubmit(send, \"HELLO\" , \"/echo\" ); AutoConnectAux aux ( \"/hello\" , { input1, send }); server.on( \"/echo\" , []() { String echo = server.arg( \"input1\" ); Serial.println(echo); server.send( 200 , \"text/plain\" , echo); }); portal.join(aux); portal.begin(); Also, you can choose another way to access arguments without going through the ESP8266WebServer class. The PageArgument object of the custom Web page handler argument is a copy of the arg object of the ESP8266WebServer class. Either of these methods is a simple and easy way to access parameters in custom Web page handlers. However, if you need to access from outside of the handler to the value of AutoConnectElements, you need to accomplish it using with the AutoConnectAux::getElement function. The following sketch code replaces the above example with JSON and PageArgument, and its behaves is equivalent basically to the above sketch. const static char auxPage[] PROGMEM = R\"raw( [ { \"title\":\"Hello\", \"uri\":\"/hello\", \"menu\":true, \"element\":[ { \"name\":\"input1\", \"type\": \"ACInput\", \"label\": \"INPUT\" }, { \"name\":\"send\", \"type\":\"ACSubmit\", \"value\":\"HELLO\", \"uri\":\"/echo\" }] }, { \"title\":\"Echo\", \"uri\":\"/echo\", \"menu\":false, \"element\":[ { \"name\":\"echo\", \"type\":\"ACText\" }] } ] )raw\" ; AutoConnect portal; portal.load(auxPage); portal.on( \"/echo\" , [](AutoConnectAux & aux, PageArgument & args) { AutoConnectText & ac_echo = aux.getElement < AutoConnectText > ( \"echo\" ); ac_echo.value = args.arg( \"input1\" ); return String(); }); portal.begin(); 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 = \"<html>\" \"<head><meta name='viewport' content='width=device-width, initial-scale=1'></head>\" \"<body><div>INPUT: {{value}}</div></body>\" \"</html>\" ; 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 . Place HTML elements undefined in AutoConnectElements \u00b6 Of the many HTML elements for markup, AutoConnet can only support a limited number. If you are designing a custom web page and the elements you want are not in AutoConnectElements, consider using an AutoConnectElement. AutoConnectElement can be applied in many cases when trying to place HTML tag elements that are undefined in AutoConnectElemets on custom web pages. Not all of them work The strongest constraint is the heap size required to generate HTML for the entire custom Web page. AutoConnect creates a custom web page as a chunk of String. It's not a stream. Therefore, it may not be possible to generate long HTML pages. See also FAQ . Place a markup or a styled HTML tag \u00b6 If the HTML element you want to place is just the tag that makes up the appearance of the web page, assign the tag element directly to the value member of AutoConnectElement. If the tag you are trying to place is for static markup effects, just write the value as follows: { \"name\" : \"headline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr style='height:1px;border-width:0;color:gray;background-color:#52a6ed'>\" } If the element has a hierarchy like a <table> ~ </table> , describe the entire element in the value : { \"name\" : \"table\" , \"type\" : \"ACElement\" , \"value\" : \"<table><tr><th>Board</th><th>Platform</th></tr><tr><td>NodeMCU</td><td>Espressif8266</td></tr><tr><td>ESP32-DevKitC</td><td>Espressif32</td></tr></table>\" } Also, using AutoConnectStyle combined, you can give the style effect of only that element. { \"name\" : \"tablestyle\" , \"type\" : \"ACStyle\" , \"value\" : \"table.style{font-family:arial,sans-serif;border-collapse:collapse;width:100%;color:black;}table.style td,table.style th{border:1px solid #dddddd;text-align:center;padding:8px;}table.style tr:nth-child(even){background-color:#dddddd;}\" }, { \"name\" : \"table\" , \"type\" : \"ACElement\" , \"value\" : \"<table class='style'><tr><th>Board</th><th>Platform</th></tr><tr><td>NodeMCU</td><td>Espressif8266</td></tr><tr><td>ESP32-DevKitC</td><td>Espressif32</td></tr></table>\" } As you see it: Board Platform NodeMCU Espressif8266 ESP32-DevKitC Espressif32 Place the input elements within a form \u00b6 There is still no dedicated AutoConnectElement for entering other than equivalent to checkbox , file , number , password , radio and text for <input type=\"...\"> HTML element. But you can substitute them with the AutoConnectElement. For example, if you use the <input> element of type=\"date\" to place a field where you can enter a date, the AutoConnectElement would look like this: { \"name\" : \"date\" , \"type\" : \"ACElement\" , \"value\" : \"<label for='picker'>Date:</label><input type='date' id='picker' name='date'>\" } And it becomes a textbox that validates the input or a special date picker interface. Then, instead of accessing that AutoConnectElement directly, obtains entered date value from the POST body included in the HTTP request from the hosted ESP8266WebServer class. Its process carries out with the AutoConnectAux page handler following: String aux_page_handler (AutoConnectAux & aux, PageArgument & arg) { Serial.println(arg.arg( \"date\" )); // Obtain a date value entered return \"\" ; } AutoConnect passes a PageArgument to the AutoConnectAux page handler. The handler can use the PageArgument::arg function to get the parameters contained in the HTTP request for the page. Also, the equivalent can also be implemented using ESP8266WebServer::arg function with the ESP8266WebServer client request handler . Using JavaScript \u00b6 What is described in this section belongs to the tips of what effectiveness a web page can have using AutoConnectElement, rather than the correct usage for AutoConnect. You can use AutoConnectElement to embed JavaScript into the custom Web page as with HTML elements for markup. The reason for embedding JavaScript on a page depends on your requirements, but One of the most common requirements is the need to access elements of a web page. You can implement the requirements by having the AutoConnectElement have JavaScript that contains DOM access. The following screenshot shows an example of accessing AutoConnectText via the DOM using an AutoConnectElement with JavaScript. This web page is a very simple example and returns the result of multiplying the multiplier entered in an AutoConnectInput field. This custom Web page is generated from the following JSON document: { \"uri\" : \"/jselement\" , \"title\" : \"Multiply\" , \"menu\" : true , \"element\" : [ { \"name\" : \"multiplier\" , \"type\" : \"ACInput\" , \"label\" : \"3 &times; \" , \"apply\" : \"number\" , \"posterior\" : \"none\" }, { \"name\" : \"op\" , \"type\" : \"ACButton\" , \"value\" : \" = \" , \"action\" : \"multi()\" , \"posterior\" : \"none\" }, { \"name\" : \"answer\" , \"type\" : \"ACText\" }, { \"name\" : \"js\" , \"type\" : \"ACElement\" , \"value\" : \"<script type='text/javascript'>function multi() {document.getElementById('answer').innerHTML=3*document.getElementById('multiplier').value;}</script>\" } ] } An input field for a multiplier is defined by AutoConnectInput. The field for displaying the results exists with the name answer . The multiplication function is what AutoConnectElement has as JavaScript and it has the following content: function multi () { document. getElementById ( 'answer' ). innerHTML = 3 * document. getElementById ( 'multiplier' ). value ; } And the action for calling the multi() function is the = labeled button as the AutoConnectButton element. AutoConnect generates the name attribute of each AutoConnectElement as the Id of the HTML tag. The Id should be useful for DOM access. JavaScript that is too long can cause insufficient memory If it reaches thousands of bytes, AutoConnect will not be able to complete the HTML generation for the page. Communicate with the Sketch using XHR \u00b6 AutoConnectElement allows having scripts that create sessions based on XHR . XMLHttpRequest (XHR) is a JavaScript API to create AJAX requests. Its methods provide the ability to send network requests between the browser and a server. The Sketch simply implements the server-side process as a response handler to a normal HTTP request and can equip with a dynamic custom Web page. This technique is tricky but does not cause page transitions and is useful for implementing dynamic pages. As a matter of fact, AutoConnectOTA class is implemented by using this technique and is a custom Web page by AutoConnectAux. Here's a simple example of JavaScript-based on XHR and a server-side request handler. It's like a clock that displays the time in real-time on an AutoConnect custom web page. The sketch in the following example is roughly divided into two structures. The AutoConnectElement defined with the name js gets the server time with XHR and updates the response via the DOM with the AutoConnectText named time and substance is the following JavaScript: var xhr ; function clock () { xhr . open ( 'GET' , '/clock' ); xhr . responseType = 'text' ; xhr . send (); } window. onclose = function () { xhr . abort (); }; window. onload = function () { xhr = new XMLHttpRequest (); xhr . onreadystatechange = function () { if ( this . readyState == 4 && xhr . status == 200 ) { document. getElementById ( 'time' ). innerHTML = this . responseText ; } }; setInterval ( clock , 1000 ); }; This script issues a GET request to /clock every second and updates the element of Id= time with the text content of its response. As this script shows, it will issue a send request using the XMLHttpRequest object. The other component is located on the AutoConnect-hosted ESP8266WebServer server. This component gets the current time from the NTP server and sends the value as text to the client. void auxClock () { time_t t; struct tm * tm; char dateTime[ 24 ]; t = time(NULL); tm = localtime( & t); sprintf(dateTime, \"%04d/%02d/%02d %02d:%02d:%02d.\" , tm -> tm_year + 1900 , tm -> tm_mon + 1 , tm -> tm_mday, tm -> tm_hour, tm -> tm_min, tm -> tm_sec); server.send( 200 , \"text/plain\" , dateTime); } Then just register the auxClock function as a /clock URL handler with the hosted ESP8266Server instance. server.on( \"/clock\" , auxClock); As you can see from the above two components, AutoConnect does not intervene in those communications and no page transitions occur. A complete sketch that integrates the above components and includes a custom Web page declaration for time display looks like this: #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> #include <time.h> static const char JSPAGE[] PROGMEM = R\"'( { \"uri\": \"/jselement\", \"title\": \"Clock\", \"menu\": true, \"element\": [ { \"name\": \"time\", \"type\": \"ACText\" }, { \"name\": \"js\", \"type\": \"ACElement\", \"value\": \"<script type='text/javascript'>var xhr;function clock(){xhr.open('GET', '/clock');xhr.responseType='text';xhr.send();}window.onclose=function(){xhr.abort();};window.onload=function(){xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState==4&&xhr.status==200){document.getElementById('time').innerHTML=this.responseText;}};setInterval(clock,1000);};</script>\" } ] } )'\" ; ESP8266WebServer server; AutoConnect portal (server); void auxClock () { time_t t; struct tm * tm; char dateTime[ 24 ]; t = time(NULL); tm = localtime( & t); sprintf(dateTime, \"%04d/%02d/%02d %02d:%02d:%02d.\" , tm -> tm_year + 1900 , tm -> tm_mon + 1 , tm -> tm_mday, tm -> tm_hour, tm -> tm_min, tm -> tm_sec); server.send( 200 , \"text/plain\" , dateTime); } void setup () { delay( 1000 ); portal.load(FPSTR(JSPAGE)); if (portal.begin()) { server.on( \"/clock\" , auxClock); configTime( 0 , 0 , \"europe.pool.ntp.org\" ); } } void loop () { portal.handleClient(); } 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const auxPage[] PROGMEM = R\"raw( { \"title\": \"Page-1\", \"uri\": \"/page1\", \"menu\": true, \"element\": [ { \"name\":\"Server\", \"type\":\"ACText\", \"label\":\"Server address\" } ] } )raw\" ; AutoConnect portal; void setup () { // This declaration is wrong. AutoConnectAux aux; aux.load(auxPage); portal.join(aux); portal.begin(); } void loop () { portal.handleClient(); } The URI of the custom Web pages \u00b6 The transition of the custom Web page follows the URI of the page, but the ESP8266WebServer class does not know the URI of an AutoConnectAux page. (Registering a custom Web page does not use the ESP8266WebServer::on / WebServer::on function.) Therefore ESP8266WebServer class does not detect its URI access. If you want to detect an http request to AutoConnectAux's custom Web page, you need to register its URI with the AutoConnectAux::on function. In addition to this, there are restrictions in the handler for the custom Web page as shown in the following section. An HTTP response from the custom Web page handler \u00b6 Normally, a custom web page handler does not need to respond to a request from the client. Its HTTP response will be sent by AutoConnect when it returns from the custom web page handler. In that case, the HTTP response code is 200. However, this structure requires AutoConnectAux to always respond with the page content. If AutoConnectAux does not have page content as an HTTP response, then the custom web page handler can respond with its own HTTP response by following the steps: Declare an AutoConnectAux with the responsive argument set to false , or describe \"response\" : false with JSON: AutoConnectAux aux ( \"/aux\" , \"AUX\" , false, {}, false); { \"title\" : \"AUX\" , \"uri\" : \"/aux\" , \"response\" : false , \"menu\" : false } Send an HTTP response from a custom web page handler (Case of ESP32): WebServer server; AutoConnect portal (server); String handleAux (AutoConnectAux & aux, PageArgument & args) { server.send( 202 , \"text/plain\" , \"Accepted\" ); return String(); } portal.on( \"/aux\" , handleAux); If you want to respond with a 302 from a custom web page handler, you can use the AutoConnectAux::redirect function. String handleAux (AutoConnectAux & aux, PageArgument & args) { aux.redirect( \"http://redirect.url:port/?query\" ); return String(); } 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#custom-web-page-handler-programming-model","text":"To handle Custom Web pages properly, the sketches need to implement to match the programming model. Custom Web page programming model is depicted as follows: Custom Web page handler acts as an event handler for processing the HTTP request captured by the WebServer class. The WebServer class parses the HTTP request and calls the registered uri handler appropriately. The custom web page uri (it should be specified by the JSON description for the custom web page, the AutoConnectAux constructor , or the AutoConnect::on function) is not registered directly with the WebServer class, and the Requests always go through the request dispatcher inside AutoConnect. When implementing the custom Web page handler, it is possible to give an appropriate function to the handler by understanding the above internal structure in advance. Custom web page handler can be sketched as regular function and has interface is as follows: String customWebpageHandler(AutoConnectAux & aux, PageArgument & args)","title":"Custom Web page handler programming model"},{"location":"achandling.html#parameters-for-the-customwebagehandler","text":"When the custom web page handler is called, AutoConnect passes the following two parameters:","title":" Parameters for the customWebageHandler"},{"location":"achandling.html#1-reference-to-the-autoconnectaux-instance","text":"Custom Web page handlers can access the AutoConnectElements owned by its page through a reference to the AutoConnectAux instance. It can use this access to update the AutoConnectElements value before the user views the page or get the value of AutoConnectElements owned by the page that triggered the transition. A list of commonly used functions to access AutoConnectElements with your Sketch via reference to an AutoConnectAux instance is following: [] operator : Access to an AutoConnectElement by specified element name. getElement function : Access to an AutoConnectElement by specified element name. as<> function : Cast from a variant of AutoConnectElemnet type to an actual type such as AutoConnectText or AutoConnectInput etc. To access attributes that exist only in the actual type, it is necessary to convert from the AutoConnectElement type obtained with [] operator or getElement function. See the section Get AutoConnectElement from the AutoConnectAux and the section AutoConnectElements API for usage examples and API specifications for each above function.","title":"1. Reference to the AutoConnectAux instance"},{"location":"achandling.html#2-reference-to-the-pageargument-instance","text":"The values of the AutoConnectCheckbox , AutoConnectFile , AutoConnectInput , AutoConnectRadio , and AutoConnectSelect elements are packed into the form data of the HTTP POST method by the page transition caused by AutoConnectSubmit . Use the PageArgument instance to retrieve the values of these transmitted AutoConnectElements with the customWebpageHandler. A list of commonly used functions to access PageArgment member variables with your Sketch via a reference to an PageArgument instance is following: arg function : Get an element value by specified element name. hasArg function : Checks for the existence of an element with the specified name. The method to get the form data attached to the HTTP request via PageArgument is described with the section How you can reach the values .","title":"2. Reference to the PageArgument instance"},{"location":"achandling.html#3-access-to-the-autoconnectelement-values","text":"Here, you have one thing to note. The custom web page handler registered with AutoConnect::on function is called to respond to an HTTP request to the URL of its page. And, the AutoConnectAux instance then references the custom web page assigned to the requested URL. That is, the AutoConnectAux instance passed to the custom web page handler owns the AutoConnectElements for that page, while the PageArgument instance has the AutoConnectElements value of the custom web page that caused the page transition. You need to keep the difference between the two in mind when implementing the custom web page handler with your Sketch and access these values via the appropriate approach. You can access the AutoConnect Elements of the custom web page itself via the AutoConnectAux& argument by specifying the element name. You can also use the PageArgument& argument to get the value of AutoConnectElements for the page that caused the transition to that custom web page. (the URL that issued the HTTP request) The following screenshots are outputs of custom web pages that are based on a scenario to help you understand how to access AutoConnectElements properly with a custom web page handler. The requirements for this scenario are: Calculate an addition simply, add B to A . Perform the calculation with a customWebPageHandler. Returns the calculated result in another custom web page with page transitions. The first thing to work on is defining two custom web pages. Here, Value A and Value B are easily defined by applying AutoConnectInput . Also, add an action button to perform the calculation with AutoConnectSubmit . { \"uri\" : \"/add\" , \"title\" : \"Adder\" , \"menu\" : true , \"element\" : [ { \"name\" : \"valueA\" , \"type\" : \"ACInput\" , \"label\" : \"Value A\" , \"apply\" : \"number\" }, { \"name\" : \"valueB\" , \"type\" : \"ACInput\" , \"label\" : \"Value B\" , \"apply\" : \"number\" }, { \"name\" : \"add\" , \"type\" : \"ACSubmit\" , \"value\" : \"ADD\" , \"uri\" : \"/results\" } ] } Next, define an additional page to display the results. Here we use AutoConnectText to display the calculation as a representation string of the expression. There is one thing to watch out for here. That is, the transition destination of the action button as ADD that accept the operand (it is specified by the uri of the ACSubmit element named \"add\") and the uri of the page that displays the answer are the same. { \"uri\" : \"/results\" , \"title\" : \"Adder\" , \"menu\" : false , \"element\" : [ { \"name\" : \"results\" , \"type\" : \"ACText\" } ] } When implementing a custom web page handler, it's usually a good idea to pre-determine the page design (which consists of the elements and layouts you want to use) for a better outlook when coding your Sketch. Especially when coding a custom web page handler, you need to specify the AutoConnectElements exactly, and it is recommended to implement it along the JSON defined earlier. After this, sketch the handlers for the above two custom web pages. First, the handler for the page allocated to /add . The role of this handler is to initialize the values respectively for the valueA and valueB input boxes. Both of these two input boxes are on the /add page, so the handler only references the AutoConnectAux& aux argument. You can use the [] operator with the element name like as aux[\"valueA\"] to get a reference to an AutoConnectElement by name. Then, once the reference is converted to AutoConnectInput, the value member of AutoConnectInput can be accessed. Use the as<AutoConnectInput>() function to convert from the AutoConnectElement type to the actual AutoConnectInput type. String onAdd (AutoConnectAux & aux, PageArgument & args) { aux[ \"valueA\" ].as < AutoConnectInput > ().value = \"0\" ; aux[ \"valueB\" ].as < AutoConnectInput > ().value = \"0\" ; return String(); } Next, the handler for the page allocated to /results . The role of this handler is to add the value B to A for the calculation. The /results page does not have an element that contains the operands Value A and Value B to calculate. Only the /add page has them. The /results page handler is called when ACSubmit on the /add page works, so valueA and valueB are included in the form data of the HTTP POST request to the /results page. That is, the handler for the /results page will get valueA and valueB from the PageArgument& args argument. String onResults (AutoConnectAux & aux, PageArgument & args) { int valueA = args.arg( \"valueA\" ).toInt(); int valueB = args.arg( \"valueB\" ).toInt(); aux[ \"results\" ].as < AutoConnectText > ().value = String(valueA) + \" + \" + String(valueB) + \" = \" + String(valueA + valueB); return String(); } PageArgument is a built-in class in the PageBuilder library. You can use the PageArgument::arg function to retrieve the parameters of the form data contained in the POST request by name. Since the PageArgument::arg function returns the parameters of the POSTed form data as a string, it converts Value A and Value B to the operand integer value of the addition via the String::toInt() function. int valueA = args.arg( \"valueA\" ).toInt(); int valueB = args.arg( \"valueB\" ).toInt(); In this scenario, in addition to the calculation result, the calculation formula is also displayed on the result page. aux[ \"results\" ].as < AutoConnectText > ().value = String(valueA) + \" + \" + String(valueB) + \" = \" + String(valueA + valueB);","title":"3. Access to the AutoConnectElement values"},{"location":"achandling.html#the-customwebpagehandler-return-value","text":"The customWebpageHandler returns a string. The returned string is used internally by AutoConnect to temporarily qualify the HTML generating of the custom web page. AutoConnect typically calls a custom web page handler before HTML generation. When the customWebpageHandler returns an HTML string for qualification, it applies to the drawing area for the elements of AutoConnectElements. Additionally, you can then specify where the modifier HTML will be inserted. The second parameter of the AutoConnectAux::on function, which allows the registration of custom web page handlers, indicates where to insert the modifier HTML. The Sketch can specify the following three values for the second parameter of AutoConnectAux::on function: AC_EXIT_AHEAD : Modifiers HTML returned by the custom Web page handler is inserted into the front of the list expansion of AutoConnectElements. AC_EXIT_LATER : Modifiers HTML returned by the custom Web page handler is inserted into the back of the list expansion of AutoConnectElements. AC_EXIT_BOTH : The customWebpageHandle will be called twice before and after list expansion of AutoConnectElements. A detailed description of the AutoConnectAux::on function can be found in Section AutoConnectAux API . The actual sketch code implemented following these steps above would look like this (case of ESP8266): #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> const char PAGE_ADD[] PROGMEM = R\"( { \"uri\": \"/add\", \"title\": \"Adder\", \"menu\": true, \"element\": [ { \"name\": \"valueA\", \"type\": \"ACInput\", \"label\": \"Value A\", \"apply\": \"number\" }, { \"name\": \"valueB\", \"type\": \"ACInput\", \"label\": \"Value B\", \"apply\": \"number\" }, { \"name\": \"add\", \"type\": \"ACSubmit\", \"value\": \"ADD\", \"uri\": \"/results\" } ] } )\" ; const char PAGE_RESULTS[] PROGMEM = R\"( { \"uri\": \"/results\", \"title\": \"Adder\", \"menu\": false, \"element\": [ { \"name\": \"results\", \"type\": \"ACText\" } ] } )\" ; AutoConnect portal; AutoConnectAux page_add; AutoConnectAux page_results; String onAdd (AutoConnectAux & aux, PageArgument & args) { aux[ \"valueA\" ].as < AutoConnectInput > ().value = \"0\" ; aux[ \"valueB\" ].as < AutoConnectInput > ().value = \"0\" ; return String(); } String onResults (AutoConnectAux & aux, PageArgument & args) { int valueA = args.arg( \"valueA\" ).toInt(); int valueB = args.arg( \"valueB\" ).toInt(); aux[ \"results\" ].as < AutoConnectText > ().value = String(valueA) + \" + \" + String(valueB) + \" = \" + String(valueA + valueB); return String(); } void setup () { delay( 1000 ); page_add.load(PAGE_ADD); page_results.load(PAGE_RESULTS); portal.join({ page_add, page_results }); portal.on( \"/add\" , onAdd); portal.on( \"/results\" , onResults); portal.begin(); } void loop () { portal.handleClient(); }","title":" The customWebpageHandler return value"},{"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 char * name) AutoConnectElement * AutoConnectAux :: getElement( const __FlashStringHelper * name) 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 <T> to an argument of the getElement. A type of <T> 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<T> 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<T> 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> 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 &amp; 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 &amp; 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char addonJson[] PROGMEM = R\"raw( { \"title\": \"Hello\", \"uri\": \"/hello\", \"menu\": true, \"element\": [ { \"name\": \"feels\", \"type\": \"ACInput\", \"label\": \"What's up?\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"Just it!\", \"uri\": \"/feels\" } ] } )raw\" ; ESP8266WebServer webServer; AutoConnect portal (webServer); // Here, /feels handler void feelsOn () { // Retrieve the value of a input-box named \"feels\" String feel = webServer.arg( \"feels\" ); // Echo back the value String echo = \"<html><p style= \\\" color:blue;font-family:verdana;font-size:300%; \\\" >\" + feel + String( \" and a bold world!</p></html>\" ); webServer.send( 200 , \"text/html\" , echo); } void setup () { delay( 1000 ); webServer.on( \"/feels\" , feelsOn); // Register /feels handler portal.load(addonJson); // Load a custom Web page portal.begin(); } void loop () { portal.handleClient(); } An above example is the most simple sketch of handling values entered into a custom Web page. This sketch obtains the string entered in the AutoConnectInput named feels with the /feels handler after page transition, and the AutoConnectInput is an <input type=\"text\" name=\"feels\"> element wrapped in the form as the actual HTML code. Should be accessed /_ac first When you actually try the above sketch, there is no a root handler. So the URL that should be accessed first is /_ac concatenated with the local IP address of the esp8266 module. Another method is effective when custom Web pages have complicated page transitions. It is a way to straight access the AutoConnectElements member value. You can get the AutoConnectElement with the specified name using the getElement function. The following sketch executes the above example with AutoConnect only, without using the function of ESP8266WebServer. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> const static char addonJson[] PROGMEM = R\"raw( [ { \"title\": \"Hello\", \"uri\": \"/hello\", \"menu\": true, \"element\": [ { \"name\": \"feels\", \"type\": \"ACInput\", \"label\": \"What's up?\" }, { \"name\": \"send\", \"type\": \"ACSubmit\", \"value\": \"Just it!\", \"uri\": \"/feels\" } ] }, { \"title\": \"Hello\", \"uri\": \"/feels\", \"menu\": false, \"element\": [ { \"name\": \"echo\", \"type\": \"ACText\", \"style\": \"color:blue;font-family:verdana;font-size:300%;\" } ] } ] )raw\" ; AutoConnect portal; // Here, /feels handler String feelsOn (AutoConnectAux & aux, PageArgument & args) { // Get the AutoConnectInput named \"feels\". // The where() function returns 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( \"<p>This text has been added.</p>\" ); }","title":" When setting the initial values"},{"location":"achandling.html#how-you-can-reach-the-values","text":"AutoConnectSubmit uses the POST method to send HTTP requests. A value of AutoConnectInput sent to the ESP8266 or ESP32 with POST is stored in the request body of the HTTP request: POST /feels HTTP/1.1 Host: ESP8266_IP_ADDRESS name1=value1&name2=value2&name3=value3 ESP8266WebServer class will parse the query string and rebuilds its arguments when the above request arrives. A custom page handler registered with the ESP8266WebServer::on function can access the value of AutoConnectElements with ESP8266WebServe::arg function. It reaches the values of AutoConnectElements without the intermediation of AutoConnect. Therefore, its handler will not be AutoConnectAux and can send a response to the client directly. The following example is part of a server sketch which has two web pages. The /hello page is a custom Web page of AutoConnectAux which has an input box named \"input1\". Another /echo page is a page handler for ESP8266WebServer, which uses the ESP8266WebServer::send function to echo back the value of an input1 as an http response. ESP8266WebServer server; AutoConnect portal (server); ACInput(input1, \"\" , \"INPUT\" ); ACSubmit(send, \"HELLO\" , \"/echo\" ); AutoConnectAux aux ( \"/hello\" , { input1, send }); server.on( \"/echo\" , []() { String echo = server.arg( \"input1\" ); Serial.println(echo); server.send( 200 , \"text/plain\" , echo); }); portal.join(aux); portal.begin(); Also, you can choose another way to access arguments without going through the ESP8266WebServer class. The PageArgument object of the custom Web page handler argument is a copy of the arg object of the ESP8266WebServer class. Either of these methods is a simple and easy way to access parameters in custom Web page handlers. However, if you need to access from outside of the handler to the value of AutoConnectElements, you need to accomplish it using with the AutoConnectAux::getElement function. The following sketch code replaces the above example with JSON and PageArgument, and its behaves is equivalent basically to the above sketch. const static char auxPage[] PROGMEM = R\"raw( [ { \"title\":\"Hello\", \"uri\":\"/hello\", \"menu\":true, \"element\":[ { \"name\":\"input1\", \"type\": \"ACInput\", \"label\": \"INPUT\" }, { \"name\":\"send\", \"type\":\"ACSubmit\", \"value\":\"HELLO\", \"uri\":\"/echo\" }] }, { \"title\":\"Echo\", \"uri\":\"/echo\", \"menu\":false, \"element\":[ { \"name\":\"echo\", \"type\":\"ACText\" }] } ] )raw\" ; AutoConnect portal; portal.load(auxPage); portal.on( \"/echo\" , [](AutoConnectAux & aux, PageArgument & args) { AutoConnectText & ac_echo = aux.getElement < AutoConnectText > ( \"echo\" ); ac_echo.value = args.arg( \"input1\" ); return String(); }); portal.begin();","title":" How you can reach the values"},{"location":"achandling.html#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 = \"<html>\" \"<head><meta name='viewport' content='width=device-width, initial-scale=1'></head>\" \"<body><div>INPUT: {{value}}</div></body>\" \"</html>\" ; 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#place-html-elements-undefined-in-autoconnectelements","text":"Of the many HTML elements for markup, AutoConnet can only support a limited number. If you are designing a custom web page and the elements you want are not in AutoConnectElements, consider using an AutoConnectElement. AutoConnectElement can be applied in many cases when trying to place HTML tag elements that are undefined in AutoConnectElemets on custom web pages. Not all of them work The strongest constraint is the heap size required to generate HTML for the entire custom Web page. AutoConnect creates a custom web page as a chunk of String. It's not a stream. Therefore, it may not be possible to generate long HTML pages. See also FAQ .","title":"Place HTML elements undefined in AutoConnectElements"},{"location":"achandling.html#place-a-markup-or-a-styled-html-tag","text":"If the HTML element you want to place is just the tag that makes up the appearance of the web page, assign the tag element directly to the value member of AutoConnectElement. If the tag you are trying to place is for static markup effects, just write the value as follows: { \"name\" : \"headline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr style='height:1px;border-width:0;color:gray;background-color:#52a6ed'>\" } If the element has a hierarchy like a <table> ~ </table> , describe the entire element in the value : { \"name\" : \"table\" , \"type\" : \"ACElement\" , \"value\" : \"<table><tr><th>Board</th><th>Platform</th></tr><tr><td>NodeMCU</td><td>Espressif8266</td></tr><tr><td>ESP32-DevKitC</td><td>Espressif32</td></tr></table>\" } Also, using AutoConnectStyle combined, you can give the style effect of only that element. { \"name\" : \"tablestyle\" , \"type\" : \"ACStyle\" , \"value\" : \"table.style{font-family:arial,sans-serif;border-collapse:collapse;width:100%;color:black;}table.style td,table.style th{border:1px solid #dddddd;text-align:center;padding:8px;}table.style tr:nth-child(even){background-color:#dddddd;}\" }, { \"name\" : \"table\" , \"type\" : \"ACElement\" , \"value\" : \"<table class='style'><tr><th>Board</th><th>Platform</th></tr><tr><td>NodeMCU</td><td>Espressif8266</td></tr><tr><td>ESP32-DevKitC</td><td>Espressif32</td></tr></table>\" } As you see it: Board Platform NodeMCU Espressif8266 ESP32-DevKitC Espressif32","title":" Place a markup or a styled HTML tag"},{"location":"achandling.html#place-the-input-elements-within-a-form","text":"There is still no dedicated AutoConnectElement for entering other than equivalent to checkbox , file , number , password , radio and text for <input type=\"...\"> HTML element. But you can substitute them with the AutoConnectElement. For example, if you use the <input> element of type=\"date\" to place a field where you can enter a date, the AutoConnectElement would look like this: { \"name\" : \"date\" , \"type\" : \"ACElement\" , \"value\" : \"<label for='picker'>Date:</label><input type='date' id='picker' name='date'>\" } And it becomes a textbox that validates the input or a special date picker interface. Then, instead of accessing that AutoConnectElement directly, obtains entered date value from the POST body included in the HTTP request from the hosted ESP8266WebServer class. Its process carries out with the AutoConnectAux page handler following: String aux_page_handler (AutoConnectAux & aux, PageArgument & arg) { Serial.println(arg.arg( \"date\" )); // Obtain a date value entered return \"\" ; } AutoConnect passes a PageArgument to the AutoConnectAux page handler. The handler can use the PageArgument::arg function to get the parameters contained in the HTTP request for the page. Also, the equivalent can also be implemented using ESP8266WebServer::arg function with the ESP8266WebServer client request handler .","title":" Place the input elements within a form"},{"location":"achandling.html#using-javascript","text":"What is described in this section belongs to the tips of what effectiveness a web page can have using AutoConnectElement, rather than the correct usage for AutoConnect. You can use AutoConnectElement to embed JavaScript into the custom Web page as with HTML elements for markup. The reason for embedding JavaScript on a page depends on your requirements, but One of the most common requirements is the need to access elements of a web page. You can implement the requirements by having the AutoConnectElement have JavaScript that contains DOM access. The following screenshot shows an example of accessing AutoConnectText via the DOM using an AutoConnectElement with JavaScript. This web page is a very simple example and returns the result of multiplying the multiplier entered in an AutoConnectInput field. This custom Web page is generated from the following JSON document: { \"uri\" : \"/jselement\" , \"title\" : \"Multiply\" , \"menu\" : true , \"element\" : [ { \"name\" : \"multiplier\" , \"type\" : \"ACInput\" , \"label\" : \"3 &times; \" , \"apply\" : \"number\" , \"posterior\" : \"none\" }, { \"name\" : \"op\" , \"type\" : \"ACButton\" , \"value\" : \" = \" , \"action\" : \"multi()\" , \"posterior\" : \"none\" }, { \"name\" : \"answer\" , \"type\" : \"ACText\" }, { \"name\" : \"js\" , \"type\" : \"ACElement\" , \"value\" : \"<script type='text/javascript'>function multi() {document.getElementById('answer').innerHTML=3*document.getElementById('multiplier').value;}</script>\" } ] } An input field for a multiplier is defined by AutoConnectInput. The field for displaying the results exists with the name answer . The multiplication function is what AutoConnectElement has as JavaScript and it has the following content: function multi () { document. getElementById ( 'answer' ). innerHTML = 3 * document. getElementById ( 'multiplier' ). value ; } And the action for calling the multi() function is the = labeled button as the AutoConnectButton element. AutoConnect generates the name attribute of each AutoConnectElement as the Id of the HTML tag. The Id should be useful for DOM access. JavaScript that is too long can cause insufficient memory If it reaches thousands of bytes, AutoConnect will not be able to complete the HTML generation for the page.","title":" Using JavaScript"},{"location":"achandling.html#communicate-with-the-sketch-using-xhr","text":"AutoConnectElement allows having scripts that create sessions based on XHR . XMLHttpRequest (XHR) is a JavaScript API to create AJAX requests. Its methods provide the ability to send network requests between the browser and a server. The Sketch simply implements the server-side process as a response handler to a normal HTTP request and can equip with a dynamic custom Web page. This technique is tricky but does not cause page transitions and is useful for implementing dynamic pages. As a matter of fact, AutoConnectOTA class is implemented by using this technique and is a custom Web page by AutoConnectAux. Here's a simple example of JavaScript-based on XHR and a server-side request handler. It's like a clock that displays the time in real-time on an AutoConnect custom web page. The sketch in the following example is roughly divided into two structures. The AutoConnectElement defined with the name js gets the server time with XHR and updates the response via the DOM with the AutoConnectText named time and substance is the following JavaScript: var xhr ; function clock () { xhr . open ( 'GET' , '/clock' ); xhr . responseType = 'text' ; xhr . send (); } window. onclose = function () { xhr . abort (); }; window. onload = function () { xhr = new XMLHttpRequest (); xhr . onreadystatechange = function () { if ( this . readyState == 4 && xhr . status == 200 ) { document. getElementById ( 'time' ). innerHTML = this . responseText ; } }; setInterval ( clock , 1000 ); }; This script issues a GET request to /clock every second and updates the element of Id= time with the text content of its response. As this script shows, it will issue a send request using the XMLHttpRequest object. The other component is located on the AutoConnect-hosted ESP8266WebServer server. This component gets the current time from the NTP server and sends the value as text to the client. void auxClock () { time_t t; struct tm * tm; char dateTime[ 24 ]; t = time(NULL); tm = localtime( & t); sprintf(dateTime, \"%04d/%02d/%02d %02d:%02d:%02d.\" , tm -> tm_year + 1900 , tm -> tm_mon + 1 , tm -> tm_mday, tm -> tm_hour, tm -> tm_min, tm -> tm_sec); server.send( 200 , \"text/plain\" , dateTime); } Then just register the auxClock function as a /clock URL handler with the hosted ESP8266Server instance. server.on( \"/clock\" , auxClock); As you can see from the above two components, AutoConnect does not intervene in those communications and no page transitions occur. A complete sketch that integrates the above components and includes a custom Web page declaration for time display looks like this: #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> #include <time.h> static const char JSPAGE[] PROGMEM = R\"'( { \"uri\": \"/jselement\", \"title\": \"Clock\", \"menu\": true, \"element\": [ { \"name\": \"time\", \"type\": \"ACText\" }, { \"name\": \"js\", \"type\": \"ACElement\", \"value\": \"<script type='text/javascript'>var xhr;function clock(){xhr.open('GET', '/clock');xhr.responseType='text';xhr.send();}window.onclose=function(){xhr.abort();};window.onload=function(){xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState==4&&xhr.status==200){document.getElementById('time').innerHTML=this.responseText;}};setInterval(clock,1000);};</script>\" } ] } )'\" ; ESP8266WebServer server; AutoConnect portal (server); void auxClock () { time_t t; struct tm * tm; char dateTime[ 24 ]; t = time(NULL); tm = localtime( & t); sprintf(dateTime, \"%04d/%02d/%02d %02d:%02d:%02d.\" , tm -> tm_year + 1900 , tm -> tm_mon + 1 , tm -> tm_mday, tm -> tm_hour, tm -> tm_min, tm -> tm_sec); server.send( 200 , \"text/plain\" , dateTime); } void setup () { delay( 1000 ); portal.load(FPSTR(JSPAGE)); if (portal.begin()) { server.on( \"/clock\" , auxClock); configTime( 0 , 0 , \"europe.pool.ntp.org\" ); } } void loop () { portal.handleClient(); }","title":" Communicate with the Sketch using XHR"},{"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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const auxPage[] PROGMEM = R\"raw( { \"title\": \"Page-1\", \"uri\": \"/page1\", \"menu\": true, \"element\": [ { \"name\":\"Server\", \"type\":\"ACText\", \"label\":\"Server address\" } ] } )raw\" ; AutoConnect portal; void setup () { // This declaration is wrong. AutoConnectAux aux; aux.load(auxPage); portal.join(aux); portal.begin(); } void loop () { portal.handleClient(); }","title":"Scope &amp; 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#an-http-response-from-the-custom-web-page-handler","text":"Normally, a custom web page handler does not need to respond to a request from the client. Its HTTP response will be sent by AutoConnect when it returns from the custom web page handler. In that case, the HTTP response code is 200. However, this structure requires AutoConnectAux to always respond with the page content. If AutoConnectAux does not have page content as an HTTP response, then the custom web page handler can respond with its own HTTP response by following the steps: Declare an AutoConnectAux with the responsive argument set to false , or describe \"response\" : false with JSON: AutoConnectAux aux ( \"/aux\" , \"AUX\" , false, {}, false); { \"title\" : \"AUX\" , \"uri\" : \"/aux\" , \"response\" : false , \"menu\" : false } Send an HTTP response from a custom web page handler (Case of ESP32): WebServer server; AutoConnect portal (server); String handleAux (AutoConnectAux & aux, PageArgument & args) { server.send( 202 , \"text/plain\" , \"Accepted\" ); return String(); } portal.on( \"/aux\" , handleAux); If you want to respond with a 302 from a custom web page handler, you can use the AutoConnectAux::redirect function. String handleAux (AutoConnectAux & aux, PageArgument & args) { aux.redirect( \"http://redirect.url:port/?query\" ); return String(); }","title":"An HTTP response from the custom Web page handler"},{"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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <FS.h> #include <AutoConnect.h> AutoConnect portal; void setup () { SPIFFS.begin(); File page = SPIFFS.open( \"/custom_page.json\" , \"r\" ); portal.load(page); page.close(); SPIFFS.end(); portal.begin(); } void loop () { portal.handleClient(); } Passing parameters with sketches and custom Web pages \u00b6 A sketch can access variables of AutoConnectElements 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; ACText(header, \"MQTT broker settings\" ); ACText(caption1, \"Publishing the WiFi...\" ); ACSubmit(save, \"SAVE\" , \"/mqtt_save\" ); AutoConnectAux aux1 ( \"/mqtt_setting\" , \"MQTT Setting\" , true, { 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <FS.h> #include <AutoConnect.h> AutoConnect portal; void setup () { SPIFFS.begin(); File page = SPIFFS.open( \"/custom_page.json\" , \"r\" ); portal.load(page); page.close(); SPIFFS.end(); portal.begin(); } void loop () { portal.handleClient(); }","title":"Write the custom Web page with JSON"},{"location":"acintro.html#passing-parameters-with-sketches-and-custom-web-pages","text":"A sketch can access variables of AutoConnectElements 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; ACText(header, \"MQTT broker settings\" ); ACText(caption1, \"Publishing the WiFi...\" ); ACSubmit(save, \"SAVE\" , \"/mqtt_save\" ); AutoConnectAux aux1 ( \"/mqtt_setting\" , \"MQTT Setting\" , true, { 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 , \"response\" : true | false , \"auth\" : authentication , \"element\" : element_array } title \u00b6 A title of the custom Web page. This is string value and specifies the 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. response \u00b6 This is a Boolean value indicating whether to respond to HTTP responses independently in its custom web page handler. Normally, AutoConnect will respond with a response code of 200 after its custom web page has processed the request from the client. However, depending on the processing status of the handler, it may be necessary to return a response other than 200. For example, it might respond with a 302 redirect. In such situations, the custom web page handler can apply the sendHeader, sendContent, and send functions of the WebServer library to respond with its own response. If the response is false , AutoConnect will not respond with an HTTP response when it returns from the custom web page handler. The custom web page handler needs to perform the HTTP response by itself. auth \u00b6 It allows that this page requires authentication. An authentication specifies the following string that represents the authentication scheme. NONE : No authentication. This is default. BASIC : Apply Basic scheme. DIGEST : Apply Digest scheme. 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 , \"posterior\" : posterior , 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 AutoConnectRange: ACRange AutoConnectSelect: ACSelect AutoConnectStyle: ACStyle AutoConnectSubmit: ACSubmit AutoConnectText: ACText posterior \u00b6 Specifies a tag to add behind the HTML code generated from the element. Its purpose is to place elements on the custom Web page as intended by the user sketch. You can use the posterior key with the following values to arrange vertically or horizontal when the elements do not have the intended position on the custom Web Page specifying the following: none : No generate additional tags. br : Add a <br> tag to the end of the element. par : Include the element in the <p> ~ </p> tag. div : Include the element in the <div> ~ </div> tag. 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. If the valid file system of the ESP8266 module incorporating the Sketch is LittleFS , AutoConnect assumes the file system to be LittleFS. However, it does not sense the actual file system, so If the Sketch implementation does not match the file system on the ESP8266 depends, a file writing error will occur. 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. A valid filesystem of ESP8266 on board flash AutoConnect has assumed LittleFS as a valid file system since v1.2.0 enhancement. On the other hand, the ESP8266 arduino core has supported LittleFS officially since a release 2.7.0. LittleFS support in AutoConnect relies on the FS instance declared by the arduino core used at compile-time per project, and its FS instance will acquire by either the SPIFFS class or the LittleFS class. That is, you need to choose which file system will be available in the actual Sketch and make consistent it with AutoConnect assumed file system. So, you can choose which one uses the file systems per project via adjustment the AC_USE_SPIFFS macro enable or disable. AutoConnect determines the available file system by the AC_USE_SPIFFS macro which defined in AutoConnectDefs.h header file. 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. apply : Specifies the type of input that the text box accepts. Its value accepts one of the following: text : A text. password : Password input field. The text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk (\" * \") or a dot (\" \u2022 \"). number : A field let the user enter number characters only. Numerical keypad is different When the AutoConnectInput element with the number applied is focused on the browser, the numeric keypad may be displayed automatically. For popular mobile OSes such as Android and iOS, the numeric keypad has the following styles and is different with each OS. 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. ACRange \u00b6 value : Specifies the initial value in the range. If the value is not specified, the default value is determined by the following algorithm: value = ( max < min ) ? min : min + ( max - min ) / 2 ; label : Specifies a label of the range slider. Its placement is always to the left of the input box. min : Specifies the most negative value within the range of allowed values and must not be less than the value . max : Specifies the greatest value in the range of permitted values. step : Specifies the granularity that the value must adhere to. The default is 1. As you move the slider, it increases or decreases the value according to the step in granularity. magnify : Displays the current value of the range on the left or right side of the slider. The magnify accepts one of the following: infront : Displays the current value on the left side. behind : Displays the current value on the right side. void : No display the current value. This is the default. style : Specifies the qualification style to give to the content and can use the style attribute format as it is. 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 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(FPSTR(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 &amp; 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 , \"response\" : true | false , \"auth\" : authentication , \"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 and specifies the 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#response","text":"This is a Boolean value indicating whether to respond to HTTP responses independently in its custom web page handler. Normally, AutoConnect will respond with a response code of 200 after its custom web page has processed the request from the client. However, depending on the processing status of the handler, it may be necessary to return a response other than 200. For example, it might respond with a 302 redirect. In such situations, the custom web page handler can apply the sendHeader, sendContent, and send functions of the WebServer library to respond with its own response. If the response is false , AutoConnect will not respond with an HTTP response when it returns from the custom web page handler. The custom web page handler needs to perform the HTTP response by itself.","title":" response"},{"location":"acjson.html#auth","text":"It allows that this page requires authentication. An authentication specifies the following string that represents the authentication scheme. NONE : No authentication. This is default. BASIC : Apply Basic scheme. DIGEST : Apply Digest scheme.","title":" auth"},{"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 , \"posterior\" : posterior , 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 AutoConnectRange: ACRange AutoConnectSelect: ACSelect AutoConnectStyle: ACStyle AutoConnectSubmit: ACSubmit AutoConnectText: ACText","title":" type"},{"location":"acjson.html#posterior","text":"Specifies a tag to add behind the HTML code generated from the element. Its purpose is to place elements on the custom Web page as intended by the user sketch. You can use the posterior key with the following values to arrange vertically or horizontal when the elements do not have the intended position on the custom Web Page specifying the following: none : No generate additional tags. br : Add a <br> tag to the end of the element. par : Include the element in the <p> ~ </p> tag. div : Include the element in the <div> ~ </div> tag.","title":" posterior"},{"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. If the valid file system of the ESP8266 module incorporating the Sketch is LittleFS , AutoConnect assumes the file system to be LittleFS. However, it does not sense the actual file system, so If the Sketch implementation does not match the file system on the ESP8266 depends, a file writing error will occur. 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. A valid filesystem of ESP8266 on board flash AutoConnect has assumed LittleFS as a valid file system since v1.2.0 enhancement. On the other hand, the ESP8266 arduino core has supported LittleFS officially since a release 2.7.0. LittleFS support in AutoConnect relies on the FS instance declared by the arduino core used at compile-time per project, and its FS instance will acquire by either the SPIFFS class or the LittleFS class. That is, you need to choose which file system will be available in the actual Sketch and make consistent it with AutoConnect assumed file system. So, you can choose which one uses the file systems per project via adjustment the AC_USE_SPIFFS macro enable or disable. AutoConnect determines the available file system by the AC_USE_SPIFFS macro which defined in AutoConnectDefs.h header file.","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. apply : Specifies the type of input that the text box accepts. Its value accepts one of the following: text : A text. password : Password input field. The text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk (\" * \") or a dot (\" \u2022 \"). number : A field let the user enter number characters only. Numerical keypad is different When the AutoConnectInput element with the number applied is focused on the browser, the numeric keypad may be displayed automatically. For popular mobile OSes such as Android and iOS, the numeric keypad has the following styles and is different with each OS.","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#acrange","text":"value : Specifies the initial value in the range. If the value is not specified, the default value is determined by the following algorithm: value = ( max < min ) ? min : min + ( max - min ) / 2 ; label : Specifies a label of the range slider. Its placement is always to the left of the input box. min : Specifies the most negative value within the range of allowed values and must not be less than the value . max : Specifies the greatest value in the range of permitted values. step : Specifies the granularity that the value must adhere to. The default is 1. As you move the slider, it increases or decreases the value according to the step in granularity. magnify : Displays the current value of the range on the left or right side of the slider. The magnify accepts one of the following: infront : Displays the current value on the left side. behind : Displays the current value on the right side. void : No display the current value. This is the default. style : Specifies the qualification style to give to the content and can use the style attribute format as it is.","title":" ACRange"},{"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 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(FPSTR(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 <input type=\"file\"> tag and can save uploaded file to the flash or external SD of the ESP8266/ESP32 module. The handler for saving is built into AutoConnect. You can use it to inject any sketch data such as the initial values for the custom Web page into the ESP module via OTA without using the Sketch data upload tool of Arduino-IDE. Basic steps of the file upload sketch \u00b6 Here is the basic procedure of the Sketch which can upload files from the client browser using AutoConnectFile: 1 Place AutoConnectFile on a custom Web page by writing JSON or constructor code directly with the Sketch. Place other AutoConnectElements as needed. Place AutoConnectSubmit on the same custom Web page. Perform the following process in the on-handler of submitting destination: Retrieve the AutoConnectFile instance from the custom Web page where you placed the AutoConnectFile element using the AutoConnectAux::getElement function or the operator [] . Start access to the device specified as the upload destination. In usually, it depends on the file system's begin function. For example, if you specified Flash's SPIFFS as the upload destination, invokes SPIFFS.begin() . The value member of AutoConnectFile contains the file name of the upload file. Use its file name to access the uploaded file on the device. Invokes the end function associated with the begin to close the device. It is the SPIFFS.end()* if the flash on the ESP module has been begun for SPIFFS. The following sketch is an example that implements the above basic steps. The postUpload function is the on-handler and retrieves the AutoConnectFile as named upload_file . You should note that this handler is not for a custom Web page placed with its AutoConnectFile element. The uploaded file should be processed by the handler for the transition destination page from the AutoConnectFile element placed page. AutoConnect built-in upload handler will save the uploaded file to the specified device before invoking the postUpload function. However, If you use uploaded files in different situations, it may be more appropriate to place the actual handling process outside the handler. It applies for the parameter file, etc. The important thing is that you do not have to sketch file reception and storing logic by using the AutoConnectFile element and the upload handler built into the AutoConnect. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <FS.h> #include <AutoConnect.h> // Upload request custom Web page static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"<h2>File uploading platform<h2>\" }, { \"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\":\"<h2>Uploading ended<h2>\" }, { \"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 <input type=\"file\"> tag on the browser. The file name used for uploading is stored in the AutoConnetFile's value member, which you can access after uploading. (i.e. In the handler of the destination page by the AutoConnectSubmit element.) You can not save it with a different name. It can be renamed after upload if you need to change the name. Upload to a device other than Flash or SD \u00b6 You can output the file to any device using a custom uploader by specifying extern with the store attribute of AutoConnectFile (or specifying AC_File_Extern for the store member variable) and can customize the uploader according to the need to upload files to other than Flash or SD. Implements your own uploader with inheriting the AutoConnectUploadHandler class which is the base class of the upload handler. It's not so difficult Implementing the custom uploader requires a little knowledge of the c++ language. If you are less attuned to programming c++, you may find it difficult. But don't worry. You can make it in various situations by just modifying the Sketch skeleton that appears at the end of this page. Upload handler base class \u00b6 AutoConnectUploadHandler is a base class of upload handler and It has one public member function and three protected functions. Constructor \u00b6 AutoConnectUploadHandler() Member functions \u00b6 The upload public function is an entry point, the ESP8266WebServer (WebServer as ESP32) library will invoke the upload with each time of uploading content divided into chunks. Also, the _open , _write and _close protected functions are actually responsible for saving files and are declared as pure virtual functions. A custom uploader class that inherits from the AutoConnectUploadHandler class need to implement these functions. The actual upload process is handled by the three private functions above, and then upload only invokes three functions according to the upload situation. In usually, there is no need to override the upload function in an inherited class. public virtual void upload( const String & requestUri, const HTTPUpload & upload) Parameters requestUri URI of upload request source. upload A data structure of the upload file as HTTPUpload . It is defined in the ESP8266WebServer (WebServer as 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; An upload handler needs to implement a procedure corresponding with HTTPUploadStatus enum value indicated by the uploading process of ESP8266WebServer class, which contained in HTTPUpload.status as following values: UPLOAD_FILE_START : Invokes to the _open. UPLOAD_FILE_WRITE : Invokes to the _write. UPLOAD_FILE_END : Invokes to the _close. UPLOAD_FILE_ABORTED : Invokes to the _close. The _open function will be invoked when HTTPUploadStatus is UPLOAD_FILE_START . Usually, the implementation of an inherited class will open the file. protected virtual bool _open( const char * filename, const char * mode) = 0 Parameters filename Uploading file name. mode An indicator for the file access mode, a \"w\" for writing. Return value true File open successful. false Failed to open. The _write function will be invoked when HTTPUploadStatus is UPLOAD_FILE_WRITE . The content of the upload file is divided and the _write will be invoked in multiple times. Usually, the implementation of an inherited class will write data. protected virtual size_t _write( const uint8_t * buf, const size_t size) = 0 Parameters buf File content block. size File block size to write. Return value Size written. The _close function will be invoked when HTTPUploadStatus is UPLOAD_FILE_END or UPLOAD_FILE_ABORTED . Usually, the implementation of an inherited class will close the file. protected virtual void _close( void ) = 0 For reference, the following AutoConnectUploadFS class is an implementation of AutoConnect built-in uploader and inherits from AutoConnectUploadHandler. class AutoConnectUploadFS : public AutoConnectUploadHandler { public : explicit AutoConnectUploadFS(SPIFFST & media) : _media( & media) {} ~ AutoConnectUploadFS() { _close(); } protected : bool _open( const char * filename, const char * mode) override { if (_media -> begin()) { _file = _media -> open(filename, mode); return _file != false; } return false; } size_t _write( const uint8_t * buf, const size_t size) override { if (_file) return _file.write(buf, size); else return -1 ; } void _close( void ) override { if (_file) _file.close(); _media -> end(); } private : SPIFFST * _media; SPIFileT _file; }; Register custom upload handler \u00b6 In order to upload a file by the custom uploader, it is necessary to register it to the custom Web page beforehand. To register a custom uploader, specify the custom uploader class name in the template argument of the AutoConnectAux::onUpload function and invokes it. void AutoConnectAux :: onUpload < T > (T & uploadClass) Parameters T Specifies a class name of the custom uploader. This class name is a class that you implemented by inheriting AutoConnectUploadHandler for custom upload. uploadClass Specifies the custom upload class instance. The rough structure of the Sketches that completed these implementations will be as follows: #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"<h2>File uploading platform<h2>\" }, { \"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\":\"<h2>File uploading ended<h2>\" } ] } )\" ; // 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 <input type=\"file\"> tag and can save uploaded file to the flash or external SD of the ESP8266/ESP32 module. The handler for saving is built into AutoConnect. You can use it to inject any sketch data such as the initial values for the custom Web page into the ESP module via OTA without using the Sketch data upload tool of Arduino-IDE.","title":"Uploading file from Web Browser"},{"location":"acupload.html#basic-steps-of-the-file-upload-sketch","text":"Here is the basic procedure of the Sketch which can upload files from the client browser using AutoConnectFile: 1 Place AutoConnectFile on a custom Web page by writing JSON or constructor code directly with the Sketch. Place other AutoConnectElements as needed. Place AutoConnectSubmit on the same custom Web page. Perform the following process in the on-handler of submitting destination: Retrieve the AutoConnectFile instance from the custom Web page where you placed the AutoConnectFile element using the AutoConnectAux::getElement function or the operator [] . Start access to the device specified as the upload destination. In usually, it depends on the file system's begin function. For example, if you specified Flash's SPIFFS as the upload destination, invokes SPIFFS.begin() . The value member of AutoConnectFile contains the file name of the upload file. Use its file name to access the uploaded file on the device. Invokes the end function associated with the begin to close the device. It is the SPIFFS.end()* if the flash on the ESP module has been begun for SPIFFS. The following sketch is an example that implements the above basic steps. The postUpload function is the on-handler and retrieves the AutoConnectFile as named upload_file . You should note that this handler is not for a custom Web page placed with its AutoConnectFile element. The uploaded file should be processed by the handler for the transition destination page from the AutoConnectFile element placed page. AutoConnect built-in upload handler will save the uploaded file to the specified device before invoking the postUpload function. However, If you use uploaded files in different situations, it may be more appropriate to place the actual handling process outside the handler. It applies for the parameter file, etc. The important thing is that you do not have to sketch file reception and storing logic by using the AutoConnectFile element and the upload handler built into the AutoConnect. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <FS.h> #include <AutoConnect.h> // Upload request custom Web page static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"<h2>File uploading platform<h2>\" }, { \"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\":\"<h2>Uploading ended<h2>\" }, { \"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 <input type=\"file\"> tag on the browser. The file name used for uploading is stored in the AutoConnetFile's value member, which you can access after uploading. (i.e. In the handler of the destination page by the AutoConnectSubmit element.) You can not save it with a different name. It can be renamed after upload if you need to change the name.","title":"The file name for the uploaded file"},{"location":"acupload.html#upload-to-a-device-other-than-flash-or-sd","text":"You can output the file to any device using a custom uploader by specifying extern with the store attribute of AutoConnectFile (or specifying AC_File_Extern for the store member variable) and can customize the uploader according to the need to upload files to other than Flash or SD. Implements your own uploader with inheriting the AutoConnectUploadHandler class which is the base class of the upload handler. It's not so difficult Implementing the custom uploader requires a little knowledge of the c++ language. If you are less attuned to programming c++, you may find it difficult. But don't worry. You can make it in various situations by just modifying the Sketch skeleton that appears at the end of this page.","title":"Upload to a device other than Flash or SD"},{"location":"acupload.html#upload-handler-base-class","text":"AutoConnectUploadHandler is a base class of upload handler and It has one public member function and three protected functions.","title":" Upload handler base class"},{"location":"acupload.html#constructor","text":"AutoConnectUploadHandler()","title":" Constructor"},{"location":"acupload.html#member-functions","text":"The upload public function is an entry point, the ESP8266WebServer (WebServer as ESP32) library will invoke the upload with each time of uploading content divided into chunks. Also, the _open , _write and _close protected functions are actually responsible for saving files and are declared as pure virtual functions. A custom uploader class that inherits from the AutoConnectUploadHandler class need to implement these functions. The actual upload process is handled by the three private functions above, and then upload only invokes three functions according to the upload situation. In usually, there is no need to override the upload function in an inherited class. public virtual void upload( const String & requestUri, const HTTPUpload & upload) Parameters requestUri URI of upload request source. upload A data structure of the upload file as HTTPUpload . It is defined in the ESP8266WebServer (WebServer as 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; An upload handler needs to implement a procedure corresponding with HTTPUploadStatus enum value indicated by the uploading process of ESP8266WebServer class, which contained in HTTPUpload.status as following values: UPLOAD_FILE_START : Invokes to the _open. UPLOAD_FILE_WRITE : Invokes to the _write. UPLOAD_FILE_END : Invokes to the _close. UPLOAD_FILE_ABORTED : Invokes to the _close. The _open function will be invoked when HTTPUploadStatus is UPLOAD_FILE_START . Usually, the implementation of an inherited class will open the file. protected virtual bool _open( const char * filename, const char * mode) = 0 Parameters filename Uploading file name. mode An indicator for the file access mode, a \"w\" for writing. Return value true File open successful. false Failed to open. The _write function will be invoked when HTTPUploadStatus is UPLOAD_FILE_WRITE . The content of the upload file is divided and the _write will be invoked in multiple times. Usually, the implementation of an inherited class will write data. protected virtual size_t _write( const uint8_t * buf, const size_t size) = 0 Parameters buf File content block. size File block size to write. Return value Size written. The _close function will be invoked when HTTPUploadStatus is UPLOAD_FILE_END or UPLOAD_FILE_ABORTED . Usually, the implementation of an inherited class will close the file. protected virtual void _close( void ) = 0 For reference, the following AutoConnectUploadFS class is an implementation of AutoConnect built-in uploader and inherits from AutoConnectUploadHandler. class AutoConnectUploadFS : public AutoConnectUploadHandler { public : explicit AutoConnectUploadFS(SPIFFST & media) : _media( & media) {} ~ AutoConnectUploadFS() { _close(); } protected : bool _open( const char * filename, const char * mode) override { if (_media -> begin()) { _file = _media -> open(filename, mode); return _file != false; } return false; } size_t _write( const uint8_t * buf, const size_t size) override { if (_file) return _file.write(buf, size); else return -1 ; } void _close( void ) override { if (_file) _file.close(); _media -> end(); } private : SPIFFST * _media; SPIFileT _file; };","title":" Member functions"},{"location":"acupload.html#register-custom-upload-handler","text":"In order to upload a file by the custom uploader, it is necessary to register it to the custom Web page beforehand. To register a custom uploader, specify the custom uploader class name in the template argument of the AutoConnectAux::onUpload function and invokes it. void AutoConnectAux :: onUpload < T > (T & uploadClass) Parameters T Specifies a class name of the custom uploader. This class name is a class that you implemented by inheriting AutoConnectUploadHandler for custom upload. uploadClass Specifies the custom upload class instance. The rough structure of the Sketches that completed these implementations will be as follows: #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char PAGE_UPLOAD[] PROGMEM = R\"( { \"uri\": \"/\", \"title\": \"Upload\", \"menu\": true, \"element\": [ { \"name\":\"caption\", \"type\":\"ACText\", \"value\":\"<h2>File uploading platform<h2>\" }, { \"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\":\"<h2>File uploading ended<h2>\" } ] } )\" ; // 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":"adauthentication.html","text":"The Sketch may use authentication to protect custom Web pages and prevent unauthorized access. AutoConnect has implemented HTTP authentication feature that can be applied to multiple scopes using the authentication methods provided by the platform's WebServer library for ESP8266 or ESP32. 1 Applying HTTP authentication Applying HTTP authentication for Built-in OTA Authentication within the captive portal state Applying HTTP authentication \u00b6 AutoConnectConfig::auth setting allows the Sketch to HTTP authenticate with \" BASIC \" or \" DIGEST \" scheme. AutoConnectConfig::authScope specifies the scope covered by authentication which is the whole range for all pages of the Sketch, custom web pages, or AutoConnect pages. AutoConnectConfig::username and AutoConnectConfig::password specifies credential as user-id/password pairs. The Sketch enables HTTP authentication with the AutoConnectConfig::auth setting, also specifies the authentication scheme: AC_AUTH_NONE AutoConnect pages and custom Web pages do not require authentication. Not protected from all HTTP access. This is the default. AC_AUTH_DIGEST Protect AutoConnect pages and custom Web pages with DIGEST authentication. AC_AUTH_BASIC Protect AutoConnect pages and custom Web pages with BASIC authentication. Note that the authentication scope specified in AutoConnectConfig::authScope is different from the protection space shown by Realm for HTTP authentication. AutoConnect assumes only one Realm and defines it as AUTOCONNECT_AUTH_REALM in AutoConnectDefs.h header file. Instead, the Sketch will be able to expand or narrow the range of authentication by AutoConnectConfig::authScope setting, which can be either as follows: AC_AUTHSCOPE_PORTAL Require authentication to access for all AutoConnect pages, including custom Web pages. AC_AUTHSCOPE_AUX Require authentication to access for all custom Web pages, excepting AutoConnect pages. This is the Default. AC_AUTHSCOPE_PARTIAL Authenticate only specific custom Web pages which are specified by AutoConnectAux::authentication function or JSON . Also, a credential used for authentication is specified in the Sketch using the AutoConnectConfig::username and AutoConnectConfig::password settings. 2 Here's a minimal Sketch with HTTP authentication for the custom Web page: #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char PAGE_AUTH[] PROGMEM = R\"( { \"uri\": \"/auth\", \"title\": \"Auth\", \"menu\": true, \"element\": [ { \"name\": \"text\", \"type\": \"ACText\", \"value\": \"AutoConnect has authorized\", \"style\": \"font-family:Arial;font-size:18px;font-weight:400;color:#191970\" } ] } )\" ; WebServerClass server; AutoConnect portal (server); AutoConnectConfig config; void setup () { config.auth = AC_AUTH_DIGEST; config.authScope = AC_AUTHSCOPE_AUX; config.username = \"user\" ; config.password = \"password\" ; portal.config(config); portal.load(FPSTR(PAGE_AUTH)); portal.begin(); } void loop () { portal.handleClient(); } If you want to authenticate only specific pages in a Sketch that handles multiple custom Web pages, set AC_AUTHSCOPE_PARTIAL to AutoConnectConfig::authScope . Then, it specifies the authentication scheme with the auth key in the JSON description of the page should be authenticated. AutoConnect determines which authentication method to use for custom Web pages (such as AutoConnectAux) based on its association with AutoConnectConfig::authScope setting. The table below shows which authentication scheme will be finally adopted. As shown in this table, the final authentication scheme depends on the AutoConnectConfig::authScope setting, and if AC_AUTHSCOPE_PARTIAL is specified it, AutoConnectAux's authentication setting takes precedence over the AutoConnectConfig::auth setting. AutoConnectConfig::authScope Authentication scheme for the custom Web page AC_AUTHSCOPE_PORTAL Specified by AutoConnectConfig::auth AC_AUTHSCOPE_AUX Specified by AutoConnectConfig::auth AC_AUTHSCOPE_PARTIAL Specified by AutoConnectAux::authentication , The default values is AC_AUTH_NONE . Authentication designation for AutoConnectAux can also be specified by giving the following value to the auth key by the JSON description: \"auth\" : \"basic\" \"auth\" : \"digest\" \"auth\" : \"none\" The following example Sketch has two custom Web pages, Hello and Auth . It applies authentication only to the Auth page by setting AC_AUTHSCOPE_PARTIAL to AutoConnectConfig::authScope. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char PAGE_HELLO[] PROGMEM = R\"( { \"uri\": \"/hello\", \"title\": \"Hello\", \"menu\": true, \"element\": [ { \"name\": \"text\", \"type\": \"ACText\", \"value\": \"Hello, word\", \"style\": \"font-family:Arial;font-size:18px;font-weight:400;color:#191970\" } ] } )\" ; static const char PAGE_AUTH[] PROGMEM = R\"( { \"uri\": \"/auth\", \"title\": \"Auth\", \"menu\": true, \"auth\": \"digest\", \"element\": [ { \"name\": \"text\", \"type\": \"ACText\", \"value\": \"AutoConnect has authorized\", \"style\": \"font-family:Arial;font-size:18px;font-weight:400;color:#191970\" } ] } )\" ; WebServerClass server; AutoConnect portal (server); AutoConnectConfig config; void setup () { // It's a default value but has no meaning in the AC_AUTHSCOPE_PARTIAL setting. // config.auth = AC_AUTH_NONE; config.authScope = AC_AUTHSCOPE_PARTIAL; config.username = \"user\" ; config.password = \"password\" ; portal.config(config); portal.load(FPSTR(PAGE_HELLO)); portal.load(FPSTR(PAGE_AUTH)); portal.begin(); } void loop () { portal.handleClient(); } PageBuilder v1.4.0 or later needed PageBuilder v1.4.0 or later is required to use HTTP authentication with AutoConnect. Also, v1.4.2 or later is required to eliminate SPIFFS, which is deprecated as a file system for ESP8266 module. Can not use DIGEST authentication for ESP32 arduino core 1.0.4 stable release For ESP32, Arduino core 1.0.4 stable has a bug for DIGEST authentication. The upstream of the master is recommended. (or use BASIC authentication) Applying HTTP authentication for Built-in OTA \u00b6 AutoConnectConfig::auth setting also affects the built-in OTA feature. AC_AUTH_BASIC or AC_AUTH_DIGEST setting allows Built-in OTA to authenticate with the UPDATE page. This setting is valid even if AutoConnectConfig::authScope is AC_AUTHSCOPE_PARTIAL . That is if the AutoConnectConfig::auth setting is BASIC or DIGEST, authentication will be required for Built-in OTA. See also Authentication with AutoconnectOTA . Authentication within the captive portal state \u00b6 When accessing the ESP module from an iOS or Android device in the captive portal state, the HTTP authentication framework is disabled in the OS of the client device. Even if the ESP module responds with a 401 unauthorized with WWW-Authenticate , those client device OSs under the captive portal do not display the login dialog and deprive the user of the opportunity to enter their credentials. There will always be an unauthorized error. AutoConnect's authentication operation based on HTTP (not HTTPS) depends on the OS of the client device, so in the captive portal state, most devices will unconditionally result in an authentication error. Therefore, the default authentication behavior of AutoConnect does not apply authentication in the captive portal state. (It will be ignored even if the AutoConnect setting is not AC_AUTH_NONE) However, if you want to deny unauthorized access to the protected page even in the captive portal state, you can use the extension bit of AutoConnectConfig::authScope . The AC_AUTHSCOPE_WITHCP flag allows AutoConnect to authentication in the captive portal state. It is set using a logical OR operator for the AutoConnectConfig::authScope setting and AutoConnect will enable authentication at the captive portal if the AC_AUTHSCOPE_WITHCP is ON. AutoConnectConfig config; ... config.auth = AC_AUTH_DIGEST; config.authScope = AC_AUTHSCOPE_AUX | AC_AUTHSCOPE_WITHCP; ... ESP32 Arduino core has the authenticate method provided by the WebServer library, similar to that of the ESP8266. \u21a9 The default user name and password for authentication inherits the setting of AutoConnectConfig::apid and AutoConnectConfig::psk . \u21a9","title":"Authentication settings"},{"location":"adauthentication.html#applying-http-authentication","text":"AutoConnectConfig::auth setting allows the Sketch to HTTP authenticate with \" BASIC \" or \" DIGEST \" scheme. AutoConnectConfig::authScope specifies the scope covered by authentication which is the whole range for all pages of the Sketch, custom web pages, or AutoConnect pages. AutoConnectConfig::username and AutoConnectConfig::password specifies credential as user-id/password pairs. The Sketch enables HTTP authentication with the AutoConnectConfig::auth setting, also specifies the authentication scheme: AC_AUTH_NONE AutoConnect pages and custom Web pages do not require authentication. Not protected from all HTTP access. This is the default. AC_AUTH_DIGEST Protect AutoConnect pages and custom Web pages with DIGEST authentication. AC_AUTH_BASIC Protect AutoConnect pages and custom Web pages with BASIC authentication. Note that the authentication scope specified in AutoConnectConfig::authScope is different from the protection space shown by Realm for HTTP authentication. AutoConnect assumes only one Realm and defines it as AUTOCONNECT_AUTH_REALM in AutoConnectDefs.h header file. Instead, the Sketch will be able to expand or narrow the range of authentication by AutoConnectConfig::authScope setting, which can be either as follows: AC_AUTHSCOPE_PORTAL Require authentication to access for all AutoConnect pages, including custom Web pages. AC_AUTHSCOPE_AUX Require authentication to access for all custom Web pages, excepting AutoConnect pages. This is the Default. AC_AUTHSCOPE_PARTIAL Authenticate only specific custom Web pages which are specified by AutoConnectAux::authentication function or JSON . Also, a credential used for authentication is specified in the Sketch using the AutoConnectConfig::username and AutoConnectConfig::password settings. 2 Here's a minimal Sketch with HTTP authentication for the custom Web page: #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char PAGE_AUTH[] PROGMEM = R\"( { \"uri\": \"/auth\", \"title\": \"Auth\", \"menu\": true, \"element\": [ { \"name\": \"text\", \"type\": \"ACText\", \"value\": \"AutoConnect has authorized\", \"style\": \"font-family:Arial;font-size:18px;font-weight:400;color:#191970\" } ] } )\" ; WebServerClass server; AutoConnect portal (server); AutoConnectConfig config; void setup () { config.auth = AC_AUTH_DIGEST; config.authScope = AC_AUTHSCOPE_AUX; config.username = \"user\" ; config.password = \"password\" ; portal.config(config); portal.load(FPSTR(PAGE_AUTH)); portal.begin(); } void loop () { portal.handleClient(); } If you want to authenticate only specific pages in a Sketch that handles multiple custom Web pages, set AC_AUTHSCOPE_PARTIAL to AutoConnectConfig::authScope . Then, it specifies the authentication scheme with the auth key in the JSON description of the page should be authenticated. AutoConnect determines which authentication method to use for custom Web pages (such as AutoConnectAux) based on its association with AutoConnectConfig::authScope setting. The table below shows which authentication scheme will be finally adopted. As shown in this table, the final authentication scheme depends on the AutoConnectConfig::authScope setting, and if AC_AUTHSCOPE_PARTIAL is specified it, AutoConnectAux's authentication setting takes precedence over the AutoConnectConfig::auth setting. AutoConnectConfig::authScope Authentication scheme for the custom Web page AC_AUTHSCOPE_PORTAL Specified by AutoConnectConfig::auth AC_AUTHSCOPE_AUX Specified by AutoConnectConfig::auth AC_AUTHSCOPE_PARTIAL Specified by AutoConnectAux::authentication , The default values is AC_AUTH_NONE . Authentication designation for AutoConnectAux can also be specified by giving the following value to the auth key by the JSON description: \"auth\" : \"basic\" \"auth\" : \"digest\" \"auth\" : \"none\" The following example Sketch has two custom Web pages, Hello and Auth . It applies authentication only to the Auth page by setting AC_AUTHSCOPE_PARTIAL to AutoConnectConfig::authScope. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> static const char PAGE_HELLO[] PROGMEM = R\"( { \"uri\": \"/hello\", \"title\": \"Hello\", \"menu\": true, \"element\": [ { \"name\": \"text\", \"type\": \"ACText\", \"value\": \"Hello, word\", \"style\": \"font-family:Arial;font-size:18px;font-weight:400;color:#191970\" } ] } )\" ; static const char PAGE_AUTH[] PROGMEM = R\"( { \"uri\": \"/auth\", \"title\": \"Auth\", \"menu\": true, \"auth\": \"digest\", \"element\": [ { \"name\": \"text\", \"type\": \"ACText\", \"value\": \"AutoConnect has authorized\", \"style\": \"font-family:Arial;font-size:18px;font-weight:400;color:#191970\" } ] } )\" ; WebServerClass server; AutoConnect portal (server); AutoConnectConfig config; void setup () { // It's a default value but has no meaning in the AC_AUTHSCOPE_PARTIAL setting. // config.auth = AC_AUTH_NONE; config.authScope = AC_AUTHSCOPE_PARTIAL; config.username = \"user\" ; config.password = \"password\" ; portal.config(config); portal.load(FPSTR(PAGE_HELLO)); portal.load(FPSTR(PAGE_AUTH)); portal.begin(); } void loop () { portal.handleClient(); } PageBuilder v1.4.0 or later needed PageBuilder v1.4.0 or later is required to use HTTP authentication with AutoConnect. Also, v1.4.2 or later is required to eliminate SPIFFS, which is deprecated as a file system for ESP8266 module. Can not use DIGEST authentication for ESP32 arduino core 1.0.4 stable release For ESP32, Arduino core 1.0.4 stable has a bug for DIGEST authentication. The upstream of the master is recommended. (or use BASIC authentication)","title":"Applying HTTP authentication"},{"location":"adauthentication.html#applying-http-authentication-for-built-in-ota","text":"AutoConnectConfig::auth setting also affects the built-in OTA feature. AC_AUTH_BASIC or AC_AUTH_DIGEST setting allows Built-in OTA to authenticate with the UPDATE page. This setting is valid even if AutoConnectConfig::authScope is AC_AUTHSCOPE_PARTIAL . That is if the AutoConnectConfig::auth setting is BASIC or DIGEST, authentication will be required for Built-in OTA. See also Authentication with AutoconnectOTA .","title":"Applying HTTP authentication for Built-in OTA"},{"location":"adauthentication.html#authentication-within-the-captive-portal-state","text":"When accessing the ESP module from an iOS or Android device in the captive portal state, the HTTP authentication framework is disabled in the OS of the client device. Even if the ESP module responds with a 401 unauthorized with WWW-Authenticate , those client device OSs under the captive portal do not display the login dialog and deprive the user of the opportunity to enter their credentials. There will always be an unauthorized error. AutoConnect's authentication operation based on HTTP (not HTTPS) depends on the OS of the client device, so in the captive portal state, most devices will unconditionally result in an authentication error. Therefore, the default authentication behavior of AutoConnect does not apply authentication in the captive portal state. (It will be ignored even if the AutoConnect setting is not AC_AUTH_NONE) However, if you want to deny unauthorized access to the protected page even in the captive portal state, you can use the extension bit of AutoConnectConfig::authScope . The AC_AUTHSCOPE_WITHCP flag allows AutoConnect to authentication in the captive portal state. It is set using a logical OR operator for the AutoConnectConfig::authScope setting and AutoConnect will enable authentication at the captive portal if the AC_AUTHSCOPE_WITHCP is ON. AutoConnectConfig config; ... config.auth = AC_AUTH_DIGEST; config.authScope = AC_AUTHSCOPE_AUX | AC_AUTHSCOPE_WITHCP; ... ESP32 Arduino core has the authenticate method provided by the WebServer library, similar to that of the ESP8266. \u21a9 The default user name and password for authentication inherits the setting of AutoConnectConfig::apid and AutoConnectConfig::psk . \u21a9","title":"Authentication within the captive portal state"},{"location":"adconnection.html","text":"AutoConnect aims to connect the ESP module as a station to a WiFi access point and equips with various APIs to maintain a WiFi connection as possible while sketch running. The main APIs are AutoConnect::begin and AutoConnect::handleClient . You can make sketches with flexible WiFi connection capability by properly using these two APIs and the settings by AutoConnectConfig . Automatic reconnect Automatic reconnect (Background) Configure WiFi channel Connects depending on the WiFi signal strength Detects connection establishment to AP Match with known access points by SSID Preserve AP mode Timeout settings for a connection attempt Automatic reconnect \u00b6 AutoConnect will change the WiFi mode depending on the situation. The AutoConnect::begin function starts the webserver with WIFI_STA mode when the connection is successful with 1 st -WiFi.begin . If the connection with the last access point fails, AutoConnect will switch the WiFi mode to WIFI_AP_STA , launching a DNS server and allowing the ESP module to launch the captive portal. The captive portal launches SoftAP at its start and disconnects the STA. At this time, the ESP module discards its stored station configuration data (known as the SDK's station_config structure). This is the default behavior of AutoConnect. On the other hand, AutoConnect can connect to an access point again that has disconnected once, and its control is allowed by AutoConnectConfig::autoReconnect that option specifies to attempt to reconnect to the past established access point using the saved credentials. If the autoReconnect is enabled, AutoConnect will not launch SoftAP immediately even if 1 st -WiFi.begin fails. When AutoConnect fails WiFi connection, it will scan the WiFi signal and try to find the access point that the ESP module has connected to in the past. If AutoConnect finds one of the saved credentials from the broadcast with BSSID, it will explicitly apply the matching credential and attempt to reconnect while in WIFI_STA mode. (AutoReconnect works well even with hidden SSID access points) AutoConnect Portal; AutoConnectConfig Config; Config.autoReconnect = true; Portal.config(Config); Portal.begin(); The autoReconnect option is only available for AutoConnect::begin without SSID and PASSWORD parameter. If you use AutoConnect::begin with an SSID and PASSWORD, no reconnection attempt will be made if the 1 st -WiFi.begin fails to connect to that SSID. The autoReconnect is not autoreconnect 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 the arduino-esp32 core. AutoConnect's automatic reconnection is a mechanism independent from the automatic reconnection of the arduino-esp32 core. Automatic reconnect (Background) \u00b6 Combining autoReconnect with AutoConnectConfig::reconnectInterval allows you to periodically repeat connection attempts to known access points within AutoConnect::handleClient . This process is pseudo-asynchronous and does not block the Sketch process in the loop() function. The reconnectInterval specifies the interval time to seek for known access points with saved credentials during the handleClient loop and attempt to connect to the AP. AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoReconnect = true; // Attempt automatic reconnection. Config.reconnectInterval = 6 ; // Seek interval time is 180[s]. Portal.config(Config); Portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Here to do when WiFi is connected. } else { // Here to do when WiFi is not connected. } Portal.handleClient(); } Above Sketch shows a configuration example that you want to keep connecting to known access points as long as possible. When the WiFi connection is lost, it will start seeking the WiFi network every 30 seconds during the handleClient loop. Limitation for automatic reconnection to a specific access point An access point that ESP module to reconnect automatically depends on whether the SSID and password argument existence with AutoConnect::begin . If the Sketch calls AutoConnect::begin without specifying an SSID or password, the autoReconnect will connect to one of the detected access points and cannot be pre-determined. The other one, the case of the Sketch specifies SSID and password with AutoConnect::begin , the autoReconnect will try to reconnect to a specified access point periodically during the handleClient loop. Also, you can combine the background automatic reconnect performing inside the loop function by handleClient with AutoConnectConfig::retainPortal and AutoConnectConfig::autoReset , to enable pop up the captive portal automatically on the client device each time the ESP module disconnects from the access point. AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoReset = false; // Not reset the module even by intentional disconnection using AutoConnect menu. Config.autoReconnect = true; // Reconnect to known access points. Config.reconnectInterval = 6 ; // Reconnection attempting interval is 3[min]. Config.retainPortal = true; // Keep the captive portal open. Portal.config(Config); Portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Here to do when WiFi is connected. } else { // Here to do when WiFi is not connected. } } The effective range of the reconnectInterval depending on the setting value The range of values that reconnectInterval can take is 0 to 255. (Actual seconds are from 0 to 255\u00d7AUTOCONNECT_UNITTIME) Reconnect behavior depends on the setting value. If it is 0, reconnection will work if the 1 st -WiFi.begin in AutoConnect::begin fails and will suspend during the handleClient loop. If reconnectInterval is greater than 0, AutoConnect will attempt to reconnect both in AutoConnect::begin and during the handleClient loop. Configure WiFi channel \u00b6 Appropriately specifying the WiFi channel to use for ESP8266 and ESP32 is essential for a stable connection with the access point. AutoConnect remembers the WiFi channel with a credential of the access point once connected and reuses it. The default channel when a captive portal starts and AutoConnect itself becomes an access point is the AutoConnectConfig::channel member. If this channel is different from the channel of the access point you will attempt to connect, WiFi.begin may fail. The cause is that the ESP module shares the same channel in AP mode and STA mode. If the connection attempt is not stable, specifying a proper channel using AutoConnectConfig::channel may result in a stable connection. Connects depending on the WiFi signal strength \u00b6 When the ESP module found the multiple available access points (ie. AutoConnect has connected in the past), the default behavior AutoConnect will attempt to connect to the least recent one. However, If the ESP module can operate properly with any access point, it is advantageous to establish a connection with the best one of the reception sensitivity. The AutoConnectConfig::principle parameter has the connection disposition, and specifying AC_PRINCIPLE_RSSI will attempt to connect to one of the highest RSSI value among multiple available access points. Also You can expect stable WiFi connection by specifying the lower limit of signal strength using AutoConnectConfig::minRSSI . Combining these two parameters allows you to filter the destination AP when multiple available access points are found. AutoConnectConfig::principle affects the behavior of both 1 st -WiFi.begin and autoReconnect . If you specify AC_PRINCIPLE_RECENT for the principle , it will try according to the conventional connection rules, but if you specify AC_PRINCIPLE_RSSI , it will try to connect to the access point that is sending the strongest WiFi signal at that time instead of the last accessed AP. Also, the static IPs will be restored from a saved credential instead of AutoConnectConfig. (The values specified by AutoConnectConfig is ignored) SSID & Password AutoConnectConfig ::principle Which credentials would be selected Static IPs AutoConnect ::begin NULL specified AC_PRINCIPLE_RECENT Nothing, depends on SDK saves Use the specified value of AutoConnectConfig AC_PRINCIPLE_RSSI Auto-selected credentials with max RSSI Restoring static IPs suitable for the SSID from saved credentials Specified with the Sketch Not effective By AutoConnect::begin parameters Use the specified value of AutoConnectConfig AutoReconnect Load from saved credential AC_PRINCIPLE_RECENT Recently saved SSID would be chosen Restoring static IPs suitable for the SSID from saved credentials AC_PRINCIPLE_RSSI Auto-selected credentials with max RSSI In ESP32, the difference between the AutoConnectConfig::principle and WIFI_ALL_CHANNEL_SCAN in WiFi.begin In ESP32, if there are multiple access points with the same SSID and PW within reach, WiFi.begin with the SSID and PW explicitly specified will scan all radio channels and connect to the AP which has the highest signal strength. This feature has been enabled since ESP32 Arduino Release 1.0.6 . The principle setting is slightly different from this feature. AutoConnect does not specify the SSID and PW in the 1 st -WiFi.begin . It leaves that to the contents stored in the SDK. Even if there is an AP with a stronger signal nearby, it will try to connect to an AP with a smaller channel number . However, in the case where autoReconnect setting will attempt to reconnect, AutoConnect will read the SSID and PW from the saved credentials and explicitly pass them to WiFi.begin . Therefore, in this case, the connection will be made to the AP with the highest signal strength by WIFI_ALL_CHANNEL_SCAN . But it is only valid across multiple APs with the same SSID and PW . On the other hand, AC_PRINCIPLE_RSSI tries to connect the AP with the strongest signal from the connection candidates after selecting the SSID when multiple APs with different SSIDs are mixed in the reachable range. Detects connection establishment to AP \u00b6 The Sketch can detect that the ESP module has established a WiFi connection as a station to the access point. The AutoConnect::begin or AutoConnect::handleClient will transit the control temporarily to the function in the Sketch registered by AutoConnect::onConnect when the ESP module establish a WiFi connection. The ConnectExit function registered with AutoConnect::onConnect should have the following types and arguments: void ConnectExit(IPAddress & ip) The ConnectExit function is of type void . The argument ip is the IP address assigned to the ESP module by the connected AP. AutoConnect::onConnect allows the Sketch registers a ConnectExit function to AutoConnect. Also, you can make the function using a lambda expression . AutoConnect Portal; void onConnect (IPAddress & ipaddr) { Serial.print( \"WiFi connected with \" ); Serial.print(WiFi.SSID()); Serial.print( \", IP:\" ); Serial.println(ipaddr.toString()); } void setup () { Serial.begin( 115200 ); Portal.onConnect(onConnect); // Register the ConnectExit function Portal.begin(); } void loop () { Portal.handleClient(); } In addition, a sketch that shuts down SoftAP when the ESP module connects to the access point can be described using a lambda expression as follows: AutoConnect Portal; void setup () { Serial.begin( 115200 ); Portal.onConnect([](IPAddress & ipaddr){ Serial.printf( \"WiiFi connected with %s, IP:%s \\n \" , WiFi.SSID().c_str(), ipaddr.toString().c_str()); if (WiFi.getMode() & WIFI_AP) { WiFi.softAPdisconnect(true); WiFi.enableAP(false); Serial.printf( \"SoftAP:%s shut down \\n \" , WiFi.softAPSSID().c_str()); } }); Portal.begin(); } void loop () { Portal.handleClient(); } It is not an event AutoConnect::onConnect has the same effect on the Sketch as the WiFi.onStationModeConnected , but AutoConnect does not use the event. Sketch can use WiFi.onEvent independently of AutoConnect. Match with known access points by SSID \u00b6 By default, AutoConnect uses the BSSID to search for known access points. (Usually, it's the MAC address of the device) By using BSSID as the key to finding the WiFi network, AutoConnect can find even if the access point is hidden. However BSSIDs can change on some mobile hotspots, the BSSID-keyed searches may not be able to find known access points. If you operate inconvenience in aiming at the access point by BSSID, you can change the collation key from BSSID to SSID by uncommenting AUTOCONNECT_APKEY_SSID macro definition in AutoConnectDefs.h library source code. #define AUTOCONNECT_APKEY_SSID Allow you to use PlatformIO as a build system and give the following description to the platformio.ini , you can enable AUTOCONNECT_APKEY_SSID each build without modifying the library source code: build_flags = -DAUTOCONNECT_APKEY_SSID Can't be found hidden APs in SSID-keyed The hidden access point's SSID will be blank on the broadcast. So if the seek key is an SSID, AutoConnect will not find it. Preserve AP mode \u00b6 Sketch using AutoConnect can open a gateway to the Internet by connecting to a WiFi router even through use Espressif's peculiar WiFi protocol (eg. ESP-MESH or ESP-NOW ). These specific communication protocols require to keeps AP + STA as the WiFi mode. That is, to apply these protocols, it needs to launch SoftAP by a sketch itself and then call AutoConnect::begin . But the default behavior of AutoConnect::begin will turn off SoftAP always then it will unable to open a connection. AutoConnectConfig::preserveAPMode setting maintains WIFI_AP mode without disabling SoftAP inside AutoConnect::begin . The Sketch can utilize the WiFi connection via AutoConnect with ESP-MESH and ESP-NOW protocol by enabling this option. The following diagram quoted from the ESP-MESH documentation that illustrates the typical topology of the MESH network. The module located at the Root Node bridges between the mesh network and the router by an application that handles two protocols, TCP/IP and ESP-MESH. Its SoftAP communicates with the internal mesh network as an interface of the mesh layer. On the other hand, STA performs station communication with the WiFi router as an interface of the TCP/IP layer. AutoConnect allows assists the connection between the router and the STA of the Root Node using AutoConnectConfig::preserveAPMode and starting the SoftAP via Sketch separately. Also in general, the Sketch should set false to AutoConnectConfig::autoRise , true to AutoConnectConfig::immediateStart when applying to those protocols. Timeout settings for a connection attempt \u00b6 AutoConnect uses AutoConnectConfig::beginTimeout value to limit time to attempt when connecting the ESP module to the access point as a WiFi station. The default value is AUTOCONNECT_TIMEOUT defined in AutoConnectDefs.h and the initial value is 30 seconds. (actually specified in milliseconds) For example, the following sketch sets the connection timeout to 15 seconds: AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.beginTimeout = 15000 ; // Timeout sets to 15[s] Portal.config(Config); Portal.begin(); } void loop () { Portal.handleClient(); } In addition, the limit of the waiting time for connection attempts can be specified by the AutoConnect::begin parameter too. The timeout parameter specified in AutoConnect::begin takes precedence over AutoConnectConfig::beginTimeout . The beginTimeout has an effect on handleClient The beginTimeout value will be applied with handleClient when requesting a connection from the captive portal and when attempting to reconnect with autoReconnect .","title":"AutoConnect WiFi connection control"},{"location":"adconnection.html#automatic-reconnect","text":"AutoConnect will change the WiFi mode depending on the situation. The AutoConnect::begin function starts the webserver with WIFI_STA mode when the connection is successful with 1 st -WiFi.begin . If the connection with the last access point fails, AutoConnect will switch the WiFi mode to WIFI_AP_STA , launching a DNS server and allowing the ESP module to launch the captive portal. The captive portal launches SoftAP at its start and disconnects the STA. At this time, the ESP module discards its stored station configuration data (known as the SDK's station_config structure). This is the default behavior of AutoConnect. On the other hand, AutoConnect can connect to an access point again that has disconnected once, and its control is allowed by AutoConnectConfig::autoReconnect that option specifies to attempt to reconnect to the past established access point using the saved credentials. If the autoReconnect is enabled, AutoConnect will not launch SoftAP immediately even if 1 st -WiFi.begin fails. When AutoConnect fails WiFi connection, it will scan the WiFi signal and try to find the access point that the ESP module has connected to in the past. If AutoConnect finds one of the saved credentials from the broadcast with BSSID, it will explicitly apply the matching credential and attempt to reconnect while in WIFI_STA mode. (AutoReconnect works well even with hidden SSID access points) AutoConnect Portal; AutoConnectConfig Config; Config.autoReconnect = true; Portal.config(Config); Portal.begin(); The autoReconnect option is only available for AutoConnect::begin without SSID and PASSWORD parameter. If you use AutoConnect::begin with an SSID and PASSWORD, no reconnection attempt will be made if the 1 st -WiFi.begin fails to connect to that SSID. The autoReconnect is not autoreconnect 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 the arduino-esp32 core. AutoConnect's automatic reconnection is a mechanism independent from the automatic reconnection of the arduino-esp32 core.","title":"Automatic reconnect"},{"location":"adconnection.html#automatic-reconnect-background","text":"Combining autoReconnect with AutoConnectConfig::reconnectInterval allows you to periodically repeat connection attempts to known access points within AutoConnect::handleClient . This process is pseudo-asynchronous and does not block the Sketch process in the loop() function. The reconnectInterval specifies the interval time to seek for known access points with saved credentials during the handleClient loop and attempt to connect to the AP. AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoReconnect = true; // Attempt automatic reconnection. Config.reconnectInterval = 6 ; // Seek interval time is 180[s]. Portal.config(Config); Portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Here to do when WiFi is connected. } else { // Here to do when WiFi is not connected. } Portal.handleClient(); } Above Sketch shows a configuration example that you want to keep connecting to known access points as long as possible. When the WiFi connection is lost, it will start seeking the WiFi network every 30 seconds during the handleClient loop. Limitation for automatic reconnection to a specific access point An access point that ESP module to reconnect automatically depends on whether the SSID and password argument existence with AutoConnect::begin . If the Sketch calls AutoConnect::begin without specifying an SSID or password, the autoReconnect will connect to one of the detected access points and cannot be pre-determined. The other one, the case of the Sketch specifies SSID and password with AutoConnect::begin , the autoReconnect will try to reconnect to a specified access point periodically during the handleClient loop. Also, you can combine the background automatic reconnect performing inside the loop function by handleClient with AutoConnectConfig::retainPortal and AutoConnectConfig::autoReset , to enable pop up the captive portal automatically on the client device each time the ESP module disconnects from the access point. AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoReset = false; // Not reset the module even by intentional disconnection using AutoConnect menu. Config.autoReconnect = true; // Reconnect to known access points. Config.reconnectInterval = 6 ; // Reconnection attempting interval is 3[min]. Config.retainPortal = true; // Keep the captive portal open. Portal.config(Config); Portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Here to do when WiFi is connected. } else { // Here to do when WiFi is not connected. } } The effective range of the reconnectInterval depending on the setting value The range of values that reconnectInterval can take is 0 to 255. (Actual seconds are from 0 to 255\u00d7AUTOCONNECT_UNITTIME) Reconnect behavior depends on the setting value. If it is 0, reconnection will work if the 1 st -WiFi.begin in AutoConnect::begin fails and will suspend during the handleClient loop. If reconnectInterval is greater than 0, AutoConnect will attempt to reconnect both in AutoConnect::begin and during the handleClient loop.","title":"Automatic reconnect (Background)"},{"location":"adconnection.html#configure-wifi-channel","text":"Appropriately specifying the WiFi channel to use for ESP8266 and ESP32 is essential for a stable connection with the access point. AutoConnect remembers the WiFi channel with a credential of the access point once connected and reuses it. The default channel when a captive portal starts and AutoConnect itself becomes an access point is the AutoConnectConfig::channel member. If this channel is different from the channel of the access point you will attempt to connect, WiFi.begin may fail. The cause is that the ESP module shares the same channel in AP mode and STA mode. If the connection attempt is not stable, specifying a proper channel using AutoConnectConfig::channel may result in a stable connection.","title":"Configure WiFi channel"},{"location":"adconnection.html#connects-depending-on-the-wifi-signal-strength","text":"When the ESP module found the multiple available access points (ie. AutoConnect has connected in the past), the default behavior AutoConnect will attempt to connect to the least recent one. However, If the ESP module can operate properly with any access point, it is advantageous to establish a connection with the best one of the reception sensitivity. The AutoConnectConfig::principle parameter has the connection disposition, and specifying AC_PRINCIPLE_RSSI will attempt to connect to one of the highest RSSI value among multiple available access points. Also You can expect stable WiFi connection by specifying the lower limit of signal strength using AutoConnectConfig::minRSSI . Combining these two parameters allows you to filter the destination AP when multiple available access points are found. AutoConnectConfig::principle affects the behavior of both 1 st -WiFi.begin and autoReconnect . If you specify AC_PRINCIPLE_RECENT for the principle , it will try according to the conventional connection rules, but if you specify AC_PRINCIPLE_RSSI , it will try to connect to the access point that is sending the strongest WiFi signal at that time instead of the last accessed AP. Also, the static IPs will be restored from a saved credential instead of AutoConnectConfig. (The values specified by AutoConnectConfig is ignored) SSID & Password AutoConnectConfig ::principle Which credentials would be selected Static IPs AutoConnect ::begin NULL specified AC_PRINCIPLE_RECENT Nothing, depends on SDK saves Use the specified value of AutoConnectConfig AC_PRINCIPLE_RSSI Auto-selected credentials with max RSSI Restoring static IPs suitable for the SSID from saved credentials Specified with the Sketch Not effective By AutoConnect::begin parameters Use the specified value of AutoConnectConfig AutoReconnect Load from saved credential AC_PRINCIPLE_RECENT Recently saved SSID would be chosen Restoring static IPs suitable for the SSID from saved credentials AC_PRINCIPLE_RSSI Auto-selected credentials with max RSSI In ESP32, the difference between the AutoConnectConfig::principle and WIFI_ALL_CHANNEL_SCAN in WiFi.begin In ESP32, if there are multiple access points with the same SSID and PW within reach, WiFi.begin with the SSID and PW explicitly specified will scan all radio channels and connect to the AP which has the highest signal strength. This feature has been enabled since ESP32 Arduino Release 1.0.6 . The principle setting is slightly different from this feature. AutoConnect does not specify the SSID and PW in the 1 st -WiFi.begin . It leaves that to the contents stored in the SDK. Even if there is an AP with a stronger signal nearby, it will try to connect to an AP with a smaller channel number . However, in the case where autoReconnect setting will attempt to reconnect, AutoConnect will read the SSID and PW from the saved credentials and explicitly pass them to WiFi.begin . Therefore, in this case, the connection will be made to the AP with the highest signal strength by WIFI_ALL_CHANNEL_SCAN . But it is only valid across multiple APs with the same SSID and PW . On the other hand, AC_PRINCIPLE_RSSI tries to connect the AP with the strongest signal from the connection candidates after selecting the SSID when multiple APs with different SSIDs are mixed in the reachable range.","title":"Connects depending on the WiFi signal strength"},{"location":"adconnection.html#detects-connection-establishment-to-ap","text":"The Sketch can detect that the ESP module has established a WiFi connection as a station to the access point. The AutoConnect::begin or AutoConnect::handleClient will transit the control temporarily to the function in the Sketch registered by AutoConnect::onConnect when the ESP module establish a WiFi connection. The ConnectExit function registered with AutoConnect::onConnect should have the following types and arguments: void ConnectExit(IPAddress & ip) The ConnectExit function is of type void . The argument ip is the IP address assigned to the ESP module by the connected AP. AutoConnect::onConnect allows the Sketch registers a ConnectExit function to AutoConnect. Also, you can make the function using a lambda expression . AutoConnect Portal; void onConnect (IPAddress & ipaddr) { Serial.print( \"WiFi connected with \" ); Serial.print(WiFi.SSID()); Serial.print( \", IP:\" ); Serial.println(ipaddr.toString()); } void setup () { Serial.begin( 115200 ); Portal.onConnect(onConnect); // Register the ConnectExit function Portal.begin(); } void loop () { Portal.handleClient(); } In addition, a sketch that shuts down SoftAP when the ESP module connects to the access point can be described using a lambda expression as follows: AutoConnect Portal; void setup () { Serial.begin( 115200 ); Portal.onConnect([](IPAddress & ipaddr){ Serial.printf( \"WiiFi connected with %s, IP:%s \\n \" , WiFi.SSID().c_str(), ipaddr.toString().c_str()); if (WiFi.getMode() & WIFI_AP) { WiFi.softAPdisconnect(true); WiFi.enableAP(false); Serial.printf( \"SoftAP:%s shut down \\n \" , WiFi.softAPSSID().c_str()); } }); Portal.begin(); } void loop () { Portal.handleClient(); } It is not an event AutoConnect::onConnect has the same effect on the Sketch as the WiFi.onStationModeConnected , but AutoConnect does not use the event. Sketch can use WiFi.onEvent independently of AutoConnect.","title":"Detects connection establishment to AP"},{"location":"adconnection.html#match-with-known-access-points-by-ssid","text":"By default, AutoConnect uses the BSSID to search for known access points. (Usually, it's the MAC address of the device) By using BSSID as the key to finding the WiFi network, AutoConnect can find even if the access point is hidden. However BSSIDs can change on some mobile hotspots, the BSSID-keyed searches may not be able to find known access points. If you operate inconvenience in aiming at the access point by BSSID, you can change the collation key from BSSID to SSID by uncommenting AUTOCONNECT_APKEY_SSID macro definition in AutoConnectDefs.h library source code. #define AUTOCONNECT_APKEY_SSID Allow you to use PlatformIO as a build system and give the following description to the platformio.ini , you can enable AUTOCONNECT_APKEY_SSID each build without modifying the library source code: build_flags = -DAUTOCONNECT_APKEY_SSID Can't be found hidden APs in SSID-keyed The hidden access point's SSID will be blank on the broadcast. So if the seek key is an SSID, AutoConnect will not find it.","title":"Match with known access points by SSID"},{"location":"adconnection.html#preserve-ap-mode","text":"Sketch using AutoConnect can open a gateway to the Internet by connecting to a WiFi router even through use Espressif's peculiar WiFi protocol (eg. ESP-MESH or ESP-NOW ). These specific communication protocols require to keeps AP + STA as the WiFi mode. That is, to apply these protocols, it needs to launch SoftAP by a sketch itself and then call AutoConnect::begin . But the default behavior of AutoConnect::begin will turn off SoftAP always then it will unable to open a connection. AutoConnectConfig::preserveAPMode setting maintains WIFI_AP mode without disabling SoftAP inside AutoConnect::begin . The Sketch can utilize the WiFi connection via AutoConnect with ESP-MESH and ESP-NOW protocol by enabling this option. The following diagram quoted from the ESP-MESH documentation that illustrates the typical topology of the MESH network. The module located at the Root Node bridges between the mesh network and the router by an application that handles two protocols, TCP/IP and ESP-MESH. Its SoftAP communicates with the internal mesh network as an interface of the mesh layer. On the other hand, STA performs station communication with the WiFi router as an interface of the TCP/IP layer. AutoConnect allows assists the connection between the router and the STA of the Root Node using AutoConnectConfig::preserveAPMode and starting the SoftAP via Sketch separately. Also in general, the Sketch should set false to AutoConnectConfig::autoRise , true to AutoConnectConfig::immediateStart when applying to those protocols.","title":"Preserve AP mode"},{"location":"adconnection.html#timeout-settings-for-a-connection-attempt","text":"AutoConnect uses AutoConnectConfig::beginTimeout value to limit time to attempt when connecting the ESP module to the access point as a WiFi station. The default value is AUTOCONNECT_TIMEOUT defined in AutoConnectDefs.h and the initial value is 30 seconds. (actually specified in milliseconds) For example, the following sketch sets the connection timeout to 15 seconds: AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.beginTimeout = 15000 ; // Timeout sets to 15[s] Portal.config(Config); Portal.begin(); } void loop () { Portal.handleClient(); } In addition, the limit of the waiting time for connection attempts can be specified by the AutoConnect::begin parameter too. The timeout parameter specified in AutoConnect::begin takes precedence over AutoConnectConfig::beginTimeout . The beginTimeout has an effect on handleClient The beginTimeout value will be applied with handleClient when requesting a connection from the captive portal and when attempting to reconnect with autoReconnect .","title":"Timeout settings for a connection attempt"},{"location":"adcpcontrol.html","text":"The default behavior of AutoConnect is to launch the captive portal if 1 st -WiFi.begin attempting inside AutoConnect::begin fails. You can change this default behavior through the AutoConnectConfig settings join together with Sketch code that implements to control the WiFi connection attempting. Captive portal start control Captive portal start detection Captive portal timeout control Disable the captive portal Launch the captive portal on demand by external trigger Launch the captive portal on-demand at losing WiFi Shutdown the captive portal Sketch execution during the captive portal loop Captive portal start control \u00b6 AutoConnect will launch the captive portal based on the AutoConnectConfig settings when the WiFi connection status will become to certain conditions. AutoConnectConfig::autoRise and AutoConnectConfig::immediateStart are concern the conditions to launch the captive portal. Also, the AutoConnectConfig::retainPortal controls the continuity of the captive portal state and allows the Sketch to launch the captive portal dynamically even while in a handleClient loop. The autoRise allows or disallows the launch of the captive portal. AutoConnect launches the captive portal only if the autoRise is true . If the autoRise is false , the captive portal will not start even if the WiFi connection is lost. Basically, the captive portal initiation is triggered by the result of 1 st -WiFi.begin , but Sketch can control it according to direct the following four actions by configuring AutoConnectConfig with two parameters, the immediateStart and the autoRise . AutoConnectConfig ::immediateStart AutoConnectConfig::autoRise true false true Skip *1st-WiFi.begin* ESP module becomes SoftAP and the captive portal starts immediately. Not attempt WiFi connection. Only WebServer will start in STA mode. false Attempts WiFi connection in STA mode. In some cases, the autoReconnect may restore the connection even if 1st-WiFiBeing fails. If the connection is completely lost, the captive portal will be launched. This is the default. Attempts WiFi connection in STA mode. In some cases, the autoReconnect may restore the connection even if 1st-WiFiBeing fails. ESP module stays in STA mode and WebServer will start. The retainPortal specifies the continuity of the captive portal after AutoConnect::begin , allowing the captive portal would be launched after the Sketch execution has transitioned into the loop function. When AutoConnect establishes a WiFi connection while in the captive portal within AutoConnect::begin , it stops the DNS server to close the captive portal with SoftAP still running. In this situation, if the Sketch loses the established WiFi connection while executing the loop function, it can reopen the captive portal. However, this behavior can be redundant depending on the Sketch characteristics. In such a case, you can prevent to starting the captive portal during the loop() by autoRise setting to false . Captive portal start detection \u00b6 The captive portal will only be activated if 1 st -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:\" + ip.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 Once AutoConnect has entered the captive portal state due to the above conditions, the default behavior is that AutoConnect::begin will not exit until a WiFi connection is established. Captive portal timeout control prevents AutoConnect from blocking the Sketch progress. It allows Sketch to abort AutoConnect::begin and returns control to Sketch. AutoConnect has two parameters for timeout control. The first is the timeout value used when trying to connect to the specified AP. It works like a typical timeout control for connection attempts with WiFi.begin. This setting is specified by the AutoConnectConfig::beginTimeout or third argument of the AutoConnect::begin function. The default value is the macro defined by AUTOCONNECT_TIMEOUT in the AutoConnectDefs.h header file. Another timeout control is for the captive portal itself. It is useful if you want to keep the Sketch offline running even if a WiFi connection is not possible. You can also combine its setting with the immediateStart option to create highly mobile sketches. The timeout of the captive portal is specified by the AutoConnectConfig::portalTimeout as follows. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds portal.config(config); portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } portal.handleClient(); } Also, if you want to stop AutoConnect completely when the captive portal is timed out, you need to call the AutoConnect::end function. It looks like the following code: bool acEnable; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds portal.config(config); acEnable = portal.begin(); if ( ! acEnable) { portal.end(); } } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } if (acEnable) { portal.handleClient(); } } AutoConnectConfig has another option related to timeouts that you can enable to take advantage of the captive portal feature after a timeout occurrence. The AutoConnectConfig::retainPortal option will not shut down SoftAP and the internal DNS server even though AutoConnect::begin has aborted due to a timeout occurrence. Even after the captive portal times out, you can always try to connect to the AP while keeping the Sketch running offline. The following sample code is the Sketch above with the retainPortal setting added. As you can see, the implementation for captive portal continuation does not affect the main logic of the Sketch. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds config.retainPortal = true; portal.config(config); portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } portal.handleClient(); } Disable the captive portal \u00b6 It can also prevent the captive portal from starting even if the connection at the 1 st -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(); Launch the captive portal on demand by external trigger \u00b6 The default behavior of AutoConnect::begin gives priority to connect to the least recently established access point. In general, We expect this behavior in most situations, but will intentionally launch the captive portal on some occasion. Here section describes how to launch on demand the captive portal, and suggests two templates that you can use to implement it. Offline for usual operation, connect to WiFi with an external switch You can use this template if the ESP module does not connect to WiFi at an ordinal situation and need to establish by a manual trigger. In this case, it is desirable that AutoConnect not start until an external switch fires. This behavior is similar to the WiFiManager's startConfigPortal function. AutoConnectConfig::immediateStart is an option to launch the portal by the SoftAP immediately without attempting 1 st -WiFi.begin . Also, by setting the AutoConnectConfig::autoRise option to false, it is possible to suppress unintended automatic pop-ups of the portal screen when connecting to an ESP module SSID. To implement this, execute AutoConnect::config within the setup() function as usual, and handle AutoConnect::begin inside the loop() function. #define TRIGGER_PIN 5 // Trigger switch should be LOW active. #define HOLD_TIMER 3000 AutoConnect Portal; AutoConnectConfig Config; void setup () { pinMode( 5 , INPUT_PULLUP); Config.immediateStart = true; // Config.autoRise = false; // If you don't need to automatically pop-up the portal when connected to the ESP module's SSID. Portal.config(Config); } void loop () { if (digitalRead(TRIGGER_PIN) == LOW) { unsigned long tm = millis(); while (digitalRead(TRIGGER_PIN) == LOW) { yield(); } // Hold the switch while HOLD_TIMER time to start connect. if (millis() - tm > HOLD_TIMER) Portal.begin(); } if (WiFi.status() == WL_CONNECTED) { // Here, what to do if the module has connected to a WiFi access point } // Main process of your sketch Portal.handleClient(); // If WiFi is not connected, handleClient will do nothing. } It will not be automatic reconnect 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. Register new access points on demand The following template is useful for controlling the registration of unknown access points. In this case, the ESP module establishes a WiFi connection using WiFi.begin natively without relying on AutoConnect. Known access point credentials are saved by AutoConnect, to the ESP module can use the saved credentials to handle WiFi.begin natively. This means that you can explicitly register available access points when needed, and the ESP module will not use unknown access points under normal situations. AutoConnect * portal = nullptr ; bool detectSwitch () { /* Returns true if an external switch to configure is active. */ } bool connectWiFi ( const char * ssid, const char * password, unsigned long timeout) { WiFi.mode(WiFi_STA); delay( 100 ); WiFi.begin(ssid, password); unsigned long tm = millis(); while (WiFi.status() != WL_CONNECTED) { if (millis() - tm > timeout) return false; } return true; } void setup () { AutoConnectCredential credt; station_config_t config; for ( int8_t e = 0 ; e < credt.entries(); e ++ ) { credt.load(e, & config); if (connectWiFi(config.ssid, config.password, 30000 )) break ; } if (WiFi.status() != WL_CONNECTED) { // Here, do something when WiFi cannot reach. } } void loop () { if (detectSwitch()) { AutoConnectConfig config; config.immediateStart = true; if ( ! portal) { portal = new AutoConnect; } portal -> config(config); if (portal -> begin()) { portal -> end(); delete portal; portal = nullptr ; } } // Here, ordinary sketch logic. } Launch the captive portal on-demand at losing WiFi \u00b6 If the ESP module loses the established WiFi connection during the loop of handleClient , you can prevent the ESP module from going absolutely standalone by launching the captive portal on demand. When retainPortal and autoRise settings are enabled, AutoConnect will launch SoftAP and start DNS when it detects a WiFi disconnect with the router during a handleClient loop. This behavior will occur caused by a WiFi disconnect detection even if the WiFi mode is STA. Since AutoConnect v1.2.0 , An improved retainPortal option allows the captive portal to be restarted during a handleClient loop even if it is closed once in AutoConnect::begin . In this case, the Sketch execution stage has already transitioned into the loop function, so the Sketch process seems running concurrently with the captive portal loop. Its captive portal launched from inside handleClient does not block the execution of the Sketch, unlike that launched from AutoConnect::begin . AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoRise = true; // It's the default, no setting is needed explicitly. Config.retainPortal = true; Portal.config(Config); Portal.begin(); } void loop () { Portal.handleClient(); } Need autoRise enabled Need AutoConnectConfig::autoRise setting enabled to start the captive portal on demand during a handleClient loop. Although the Sketch above specifies the retainPortal , it does not instruct starts the captive portal always. AutoConnect will try WiFi.begin once in AutoConnect::begin unless the immediateStart option is specified. If AutoConnect fails the 1 st -WiFi.begin , the captive portal will be launched at that point and the Sketch execution will stay within the AutoConnect::begin function. There is also a way to avoid starting the captive portal inside AutoConnect::begin and start the captive portal according to the WiFi connection status after the Sketch execution transitions to a handleClient loop . Adjusting the timing of autoRise activation will allow the captive portal to start only from inside AutoConnect::handleClient function. AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.retainPortal = true; Config.autoRise = false; // Suppresses the launch of the captive portal from AutoConnect::begin. Portal.config(Config); // Don't forget it. Portal.begin(); Config.autoRise = true; // Enable the launch of the captive portal. Portal.config(Config); // Don't forget it. } void loop () { Portal.handleClient(); } The retainPortal option will keep SoftAP even if WiFi has established a connection as a client with the router. Since it has the effect of stopping the DNS server, the phenomenon that the portal screen will not pop up automatically even though SoftAP is in action occur. This is a legacy behavior to ensure backward compatibility with up to AutoConnect v1.1.7. To stop SoftAP on escape from the on-demand captive portal, you need to explicitly call WiFi.softAPdisconnect(true) and WiFi.enableAP(false) in the Sketch. AutoConnect Portal; AutoConnectConfig Config; bool Connected; unsigned long Elapsed; void onConnect (IPAddress & clientIP) { Connected = true; Elapsed = millis(); } void setup () { Config.retainPortal = true; Portal.config(Config); Portal.onConnect(onConnect); Portal.begin(); } void loop () { if (WiFi.status() != WL_CONNECTED) { connected = false; Elapsed = millis(); } if ((WiFi.getMode() & WIFI_AP) && Connected) { if (millis() - Elapsed > 30000 ) { WiFi.softAPdisconnect(true); WiFi.enableAP(false); } } // Actual sketch process is here. Portal.handleClient(); } The above sketch will shutdown the SoftAP after elapsed time exceeds 30 seconds since the connection was re-established. Its logic is a bit tricky and does not stop SoftAP immediately after the connection established, which has several seconds delay. Doing it ensures that AutoConnect can send the HTML response. Stopped SoftAP is still displayed After SoftAP stopped, there is a time lag before it disappears from the detected access points list on the client device. Shutdown the captive portal \u00b6 There is some complexity in the conditions under which AutoConnect shuts down the captive portal. Making a sketch that activates SoftAP only when needed can seem tedious. But there is a reason why. Even if AutoConnect could establish a connection using a captive portal, your cell phone as a client device would still have to keep connected to the ESP module-generated SoftAP in order to send the page for notifying the connection successful to a user. At that point, your client device that opened the captive portal still needs a connection with SoftAP. What happens, after all, is as follows: You made a connection to the access point such as WiFi router using the captive portal and took a successful page. Your sketch will rush into the loop function and starts to works well, hooray! Oops. Don't celebrate yet. I can see SoftAP ID on my cell phone. But the AutoConnect page never pops up automatically. Why? Because, for the above reasons, we can not promptly shut down the SoftAP. (However, DNS will stop) So, If you want to stop SoftAP after connecting to the access point using the captive portal, you need to implement the shutdown process with Sketch explicitly. A template of the basic sketch that can stop the SoftAP after the connection is the following: AutoConnect Portal; void setup () { if (Portal.begin()) { if (WiFi.getMode() & WIFI_AP) { WiFi.softAPdisconnect(true); WiFi.enableAP(false); } } } void loop () { Portal.handleClient(); } If you stop SoftAP, the connection will be lost If you stop SoftAP immediately after the AutoConnect::begin successful, will part with the connection and cannot see the result notifying on your client device. You can expect to receive result notifications if you run handleClient before stopping SoftAP. (although you may not always succeed; it will not work if the WiFi radio signal is weak) Sketch execution during the captive portal loop \u00b6 With AutoConnect::begin , once the captive portal is started without being able to connect to a known WiFi access point, control will not return to sketch until the WiFi connection is established or times out. This behavior helps to pin the ESP module's network participation as a WiFi client (that is, AutoConnect::begin is an alternative to WiFi.begin) but it can not rush into the loop function of the Sketch. Therefore, while the ESP module is in the captive portal state and waiting for a connection operation to the access point, the behavior of the Sketch will be restrained by the escape conditions from AutoConnect::begin . The whileCaptivePortal exit allows the Sketch to continue the process temporarily while the ESP module remains standalone and the captive portal is open. AutConnect::whileCaptivePortal function registers the user's sketch function to be called by AutoConnect::begin or AutoConnect::handleClient during the execution of the captive portal session loop. The whileCaptivePortal exit can be registered by following: AutoConnect portal; bool whileCP ( void ) { bool rc; // Here, something to process while the captive portal is open. // To escape from the captive portal loop, this exit function returns false. // rc = true;, or rc = false; return rc; } void setup () { ... portal.whileCaptivePortal(whileCP); portal.begin(); ... } AutoConnect will open the captive portal in the AutoConnect::begin and AutoConnect::handleClient scenes, but the whileCaptive portal exit will be called repeatedly from AutoConnect::begin until exits from it. The whileCaptivePortal exit will be called repeatedly while the captive portal is open until WiFi connected or times out occurs. In the Sketch, returning a FALSE value from the whileCaptivePortal function allows the control to escape from the captive portal loop even before the session elapsed time exceeds the limits.","title":"Captive portal control"},{"location":"adcpcontrol.html#captive-portal-start-control","text":"AutoConnect will launch the captive portal based on the AutoConnectConfig settings when the WiFi connection status will become to certain conditions. AutoConnectConfig::autoRise and AutoConnectConfig::immediateStart are concern the conditions to launch the captive portal. Also, the AutoConnectConfig::retainPortal controls the continuity of the captive portal state and allows the Sketch to launch the captive portal dynamically even while in a handleClient loop. The autoRise allows or disallows the launch of the captive portal. AutoConnect launches the captive portal only if the autoRise is true . If the autoRise is false , the captive portal will not start even if the WiFi connection is lost. Basically, the captive portal initiation is triggered by the result of 1 st -WiFi.begin , but Sketch can control it according to direct the following four actions by configuring AutoConnectConfig with two parameters, the immediateStart and the autoRise . AutoConnectConfig ::immediateStart AutoConnectConfig::autoRise true false true Skip *1st-WiFi.begin* ESP module becomes SoftAP and the captive portal starts immediately. Not attempt WiFi connection. Only WebServer will start in STA mode. false Attempts WiFi connection in STA mode. In some cases, the autoReconnect may restore the connection even if 1st-WiFiBeing fails. If the connection is completely lost, the captive portal will be launched. This is the default. Attempts WiFi connection in STA mode. In some cases, the autoReconnect may restore the connection even if 1st-WiFiBeing fails. ESP module stays in STA mode and WebServer will start. The retainPortal specifies the continuity of the captive portal after AutoConnect::begin , allowing the captive portal would be launched after the Sketch execution has transitioned into the loop function. When AutoConnect establishes a WiFi connection while in the captive portal within AutoConnect::begin , it stops the DNS server to close the captive portal with SoftAP still running. In this situation, if the Sketch loses the established WiFi connection while executing the loop function, it can reopen the captive portal. However, this behavior can be redundant depending on the Sketch characteristics. In such a case, you can prevent to starting the captive portal during the loop() by autoRise setting to false .","title":"Captive portal start control"},{"location":"adcpcontrol.html#captive-portal-start-detection","text":"The captive portal will only be activated if 1 st -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:\" + ip.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":"adcpcontrol.html#captive-portal-timeout-control","text":"Once AutoConnect has entered the captive portal state due to the above conditions, the default behavior is that AutoConnect::begin will not exit until a WiFi connection is established. Captive portal timeout control prevents AutoConnect from blocking the Sketch progress. It allows Sketch to abort AutoConnect::begin and returns control to Sketch. AutoConnect has two parameters for timeout control. The first is the timeout value used when trying to connect to the specified AP. It works like a typical timeout control for connection attempts with WiFi.begin. This setting is specified by the AutoConnectConfig::beginTimeout or third argument of the AutoConnect::begin function. The default value is the macro defined by AUTOCONNECT_TIMEOUT in the AutoConnectDefs.h header file. Another timeout control is for the captive portal itself. It is useful if you want to keep the Sketch offline running even if a WiFi connection is not possible. You can also combine its setting with the immediateStart option to create highly mobile sketches. The timeout of the captive portal is specified by the AutoConnectConfig::portalTimeout as follows. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds portal.config(config); portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } portal.handleClient(); } Also, if you want to stop AutoConnect completely when the captive portal is timed out, you need to call the AutoConnect::end function. It looks like the following code: bool acEnable; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds portal.config(config); acEnable = portal.begin(); if ( ! acEnable) { portal.end(); } } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } if (acEnable) { portal.handleClient(); } } AutoConnectConfig has another option related to timeouts that you can enable to take advantage of the captive portal feature after a timeout occurrence. The AutoConnectConfig::retainPortal option will not shut down SoftAP and the internal DNS server even though AutoConnect::begin has aborted due to a timeout occurrence. Even after the captive portal times out, you can always try to connect to the AP while keeping the Sketch running offline. The following sample code is the Sketch above with the retainPortal setting added. As you can see, the implementation for captive portal continuation does not affect the main logic of the Sketch. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void setup () { config.portalTimeout = 60000 ; // It will time out in 60 seconds config.retainPortal = true; portal.config(config); portal.begin(); } void loop () { if (WiFi.status() == WL_CONNECTED) { // Some sketch code for the connected scene is here. } else { // Some sketch code for not connected scene is here. } portal.handleClient(); }","title":"Captive portal timeout control"},{"location":"adcpcontrol.html#disable-the-captive-portal","text":"It can also prevent the captive portal from starting even if the connection at the 1 st -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":"adcpcontrol.html#launch-the-captive-portal-on-demand-by-external-trigger","text":"The default behavior of AutoConnect::begin gives priority to connect to the least recently established access point. In general, We expect this behavior in most situations, but will intentionally launch the captive portal on some occasion. Here section describes how to launch on demand the captive portal, and suggests two templates that you can use to implement it. Offline for usual operation, connect to WiFi with an external switch You can use this template if the ESP module does not connect to WiFi at an ordinal situation and need to establish by a manual trigger. In this case, it is desirable that AutoConnect not start until an external switch fires. This behavior is similar to the WiFiManager's startConfigPortal function. AutoConnectConfig::immediateStart is an option to launch the portal by the SoftAP immediately without attempting 1 st -WiFi.begin . Also, by setting the AutoConnectConfig::autoRise option to false, it is possible to suppress unintended automatic pop-ups of the portal screen when connecting to an ESP module SSID. To implement this, execute AutoConnect::config within the setup() function as usual, and handle AutoConnect::begin inside the loop() function. #define TRIGGER_PIN 5 // Trigger switch should be LOW active. #define HOLD_TIMER 3000 AutoConnect Portal; AutoConnectConfig Config; void setup () { pinMode( 5 , INPUT_PULLUP); Config.immediateStart = true; // Config.autoRise = false; // If you don't need to automatically pop-up the portal when connected to the ESP module's SSID. Portal.config(Config); } void loop () { if (digitalRead(TRIGGER_PIN) == LOW) { unsigned long tm = millis(); while (digitalRead(TRIGGER_PIN) == LOW) { yield(); } // Hold the switch while HOLD_TIMER time to start connect. if (millis() - tm > HOLD_TIMER) Portal.begin(); } if (WiFi.status() == WL_CONNECTED) { // Here, what to do if the module has connected to a WiFi access point } // Main process of your sketch Portal.handleClient(); // If WiFi is not connected, handleClient will do nothing. } It will not be automatic reconnect 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. Register new access points on demand The following template is useful for controlling the registration of unknown access points. In this case, the ESP module establishes a WiFi connection using WiFi.begin natively without relying on AutoConnect. Known access point credentials are saved by AutoConnect, to the ESP module can use the saved credentials to handle WiFi.begin natively. This means that you can explicitly register available access points when needed, and the ESP module will not use unknown access points under normal situations. AutoConnect * portal = nullptr ; bool detectSwitch () { /* Returns true if an external switch to configure is active. */ } bool connectWiFi ( const char * ssid, const char * password, unsigned long timeout) { WiFi.mode(WiFi_STA); delay( 100 ); WiFi.begin(ssid, password); unsigned long tm = millis(); while (WiFi.status() != WL_CONNECTED) { if (millis() - tm > timeout) return false; } return true; } void setup () { AutoConnectCredential credt; station_config_t config; for ( int8_t e = 0 ; e < credt.entries(); e ++ ) { credt.load(e, & config); if (connectWiFi(config.ssid, config.password, 30000 )) break ; } if (WiFi.status() != WL_CONNECTED) { // Here, do something when WiFi cannot reach. } } void loop () { if (detectSwitch()) { AutoConnectConfig config; config.immediateStart = true; if ( ! portal) { portal = new AutoConnect; } portal -> config(config); if (portal -> begin()) { portal -> end(); delete portal; portal = nullptr ; } } // Here, ordinary sketch logic. }","title":"Launch the captive portal on demand by external trigger"},{"location":"adcpcontrol.html#launch-the-captive-portal-on-demand-at-losing-wifi","text":"If the ESP module loses the established WiFi connection during the loop of handleClient , you can prevent the ESP module from going absolutely standalone by launching the captive portal on demand. When retainPortal and autoRise settings are enabled, AutoConnect will launch SoftAP and start DNS when it detects a WiFi disconnect with the router during a handleClient loop. This behavior will occur caused by a WiFi disconnect detection even if the WiFi mode is STA. Since AutoConnect v1.2.0 , An improved retainPortal option allows the captive portal to be restarted during a handleClient loop even if it is closed once in AutoConnect::begin . In this case, the Sketch execution stage has already transitioned into the loop function, so the Sketch process seems running concurrently with the captive portal loop. Its captive portal launched from inside handleClient does not block the execution of the Sketch, unlike that launched from AutoConnect::begin . AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.autoRise = true; // It's the default, no setting is needed explicitly. Config.retainPortal = true; Portal.config(Config); Portal.begin(); } void loop () { Portal.handleClient(); } Need autoRise enabled Need AutoConnectConfig::autoRise setting enabled to start the captive portal on demand during a handleClient loop. Although the Sketch above specifies the retainPortal , it does not instruct starts the captive portal always. AutoConnect will try WiFi.begin once in AutoConnect::begin unless the immediateStart option is specified. If AutoConnect fails the 1 st -WiFi.begin , the captive portal will be launched at that point and the Sketch execution will stay within the AutoConnect::begin function. There is also a way to avoid starting the captive portal inside AutoConnect::begin and start the captive portal according to the WiFi connection status after the Sketch execution transitions to a handleClient loop . Adjusting the timing of autoRise activation will allow the captive portal to start only from inside AutoConnect::handleClient function. AutoConnect Portal; AutoConnectConfig Config; void setup () { Config.retainPortal = true; Config.autoRise = false; // Suppresses the launch of the captive portal from AutoConnect::begin. Portal.config(Config); // Don't forget it. Portal.begin(); Config.autoRise = true; // Enable the launch of the captive portal. Portal.config(Config); // Don't forget it. } void loop () { Portal.handleClient(); } The retainPortal option will keep SoftAP even if WiFi has established a connection as a client with the router. Since it has the effect of stopping the DNS server, the phenomenon that the portal screen will not pop up automatically even though SoftAP is in action occur. This is a legacy behavior to ensure backward compatibility with up to AutoConnect v1.1.7. To stop SoftAP on escape from the on-demand captive portal, you need to explicitly call WiFi.softAPdisconnect(true) and WiFi.enableAP(false) in the Sketch. AutoConnect Portal; AutoConnectConfig Config; bool Connected; unsigned long Elapsed; void onConnect (IPAddress & clientIP) { Connected = true; Elapsed = millis(); } void setup () { Config.retainPortal = true; Portal.config(Config); Portal.onConnect(onConnect); Portal.begin(); } void loop () { if (WiFi.status() != WL_CONNECTED) { connected = false; Elapsed = millis(); } if ((WiFi.getMode() & WIFI_AP) && Connected) { if (millis() - Elapsed > 30000 ) { WiFi.softAPdisconnect(true); WiFi.enableAP(false); } } // Actual sketch process is here. Portal.handleClient(); } The above sketch will shutdown the SoftAP after elapsed time exceeds 30 seconds since the connection was re-established. Its logic is a bit tricky and does not stop SoftAP immediately after the connection established, which has several seconds delay. Doing it ensures that AutoConnect can send the HTML response. Stopped SoftAP is still displayed After SoftAP stopped, there is a time lag before it disappears from the detected access points list on the client device.","title":"Launch the captive portal on-demand at losing WiFi"},{"location":"adcpcontrol.html#shutdown-the-captive-portal","text":"There is some complexity in the conditions under which AutoConnect shuts down the captive portal. Making a sketch that activates SoftAP only when needed can seem tedious. But there is a reason why. Even if AutoConnect could establish a connection using a captive portal, your cell phone as a client device would still have to keep connected to the ESP module-generated SoftAP in order to send the page for notifying the connection successful to a user. At that point, your client device that opened the captive portal still needs a connection with SoftAP. What happens, after all, is as follows: You made a connection to the access point such as WiFi router using the captive portal and took a successful page. Your sketch will rush into the loop function and starts to works well, hooray! Oops. Don't celebrate yet. I can see SoftAP ID on my cell phone. But the AutoConnect page never pops up automatically. Why? Because, for the above reasons, we can not promptly shut down the SoftAP. (However, DNS will stop) So, If you want to stop SoftAP after connecting to the access point using the captive portal, you need to implement the shutdown process with Sketch explicitly. A template of the basic sketch that can stop the SoftAP after the connection is the following: AutoConnect Portal; void setup () { if (Portal.begin()) { if (WiFi.getMode() & WIFI_AP) { WiFi.softAPdisconnect(true); WiFi.enableAP(false); } } } void loop () { Portal.handleClient(); } If you stop SoftAP, the connection will be lost If you stop SoftAP immediately after the AutoConnect::begin successful, will part with the connection and cannot see the result notifying on your client device. You can expect to receive result notifications if you run handleClient before stopping SoftAP. (although you may not always succeed; it will not work if the WiFi radio signal is weak)","title":"Shutdown the captive portal"},{"location":"adcpcontrol.html#sketch-execution-during-the-captive-portal-loop","text":"With AutoConnect::begin , once the captive portal is started without being able to connect to a known WiFi access point, control will not return to sketch until the WiFi connection is established or times out. This behavior helps to pin the ESP module's network participation as a WiFi client (that is, AutoConnect::begin is an alternative to WiFi.begin) but it can not rush into the loop function of the Sketch. Therefore, while the ESP module is in the captive portal state and waiting for a connection operation to the access point, the behavior of the Sketch will be restrained by the escape conditions from AutoConnect::begin . The whileCaptivePortal exit allows the Sketch to continue the process temporarily while the ESP module remains standalone and the captive portal is open. AutConnect::whileCaptivePortal function registers the user's sketch function to be called by AutoConnect::begin or AutoConnect::handleClient during the execution of the captive portal session loop. The whileCaptivePortal exit can be registered by following: AutoConnect portal; bool whileCP ( void ) { bool rc; // Here, something to process while the captive portal is open. // To escape from the captive portal loop, this exit function returns false. // rc = true;, or rc = false; return rc; } void setup () { ... portal.whileCaptivePortal(whileCP); portal.begin(); ... } AutoConnect will open the captive portal in the AutoConnect::begin and AutoConnect::handleClient scenes, but the whileCaptive portal exit will be called repeatedly from AutoConnect::begin until exits from it. The whileCaptivePortal exit will be called repeatedly while the captive portal is open until WiFi connected or times out occurs. In the Sketch, returning a FALSE value from the whileCaptivePortal function allows the control to escape from the captive portal loop even before the session elapsed time exceeds the limits.","title":"Sketch execution during the captive portal loop"},{"location":"adcredential.html","text":"AutoConnect automatically saves the credentials of the established WiFi connection according to the AutoConnectConfig::autoSave settings. The save destination differs depending on the type of ESP module. In the case of ESP8266, it is the EEPROM, and in the case of ESP32, it is the NVS ( Non-volatile storage ) partition implemented by the Preferences class. Sketches can access their stored credentials through a class that is independent of AutoConnect. Access to saved credentials Autosave Credential Move the saving area of EEPROM for the credentials Access to saved credentials \u00b6 AutoConnect stores the credentials of the established WiFi connection in the flash of the ESP8266/ESP32 module and equips the class to access them from the Sketch. The Sketch can read, write, or erase the credentials using this class as the AutoConnectCredential individually. 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. Autosave Credential \u00b6 In the sketch, you can give an indication of when to save the credentials by setting the following three options of AutoConnectConfig::autoSave : AC_SAVECREDENTIAL_AUTO : AutoConnect will save a credential when the WiFi connection is established with an access point. Its credential contains BSSID which a connection established access point has. AC_SAVECREDENTIAL_ALWAYS : AutoConnect will save a credential entered via Configure new AP menu even if a connection attempt has failed. BSSID does not exist in the credentials registered with this option. (will be 0x00) If this credential is selected as a connection candidate, the SSID will be adopted for matching attempts with the target access point even if AUTOCONNECT_APKEY_SSID is not enabled. AC_SAVECREDENTIAL_NEVER : AutoConnect will not store the credentials even if the connection to the access point is successful. However, the core SDK will save it, so it retains the previously established connection unless you disconnect the ESP module from the connected access point. 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) 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 boundaryOffset is ignored with the combination of AutoConnect v1.0.0 or later and the arduino-esp32 1.0.3 or later. The AutoConnectConfig::boundaryOffset setting allows AutoConnect to write its data to EEPROM while preserving custom configuration data. Similarly, when a Sketch writes its own data to EEPROM, it must preserve the data written by AutoConnect. The EEPROM library for ESP8266 erases the entire flash sector when it writes to any part of the sector. Therefore, when writing data to EEPROM with a sketch that handles the custom data, it is necessary to call EEPROM.begin using a total amount of a custom data size and the saved credentials size. The following code shows how to use the AutoConnect::getEEPROMUsedSize function to store custom configuration settings in EEPROM without conflicting with AutoConnect's use of that storage. AutoConnect portal; AutoConnectConfig config; // Defines the custom data should be stored in EEPROM. typedef struct { char data1[ 8 ]; char data2[ 8 ]; char data3[ 8 ]; } EEPROM_CONFIG_t; EEPROM_CONFIG_t eepromConfig; ... // Declares to reserve the EEPROM_CONFIG_t area for a Sketch using. config.boundaryOffset = sizeof (eepromConfig); portal.config(config); ... strcpy(eepromComfig.data1, \"data1\" ); strcpy(eepromComfig.data2, \"data2\" ); strcpy(eepromComfig.data3, \"data3\" ); // Use getEEPROMUsedSize to access the EEPROM with the appropriate region size. EEPROM.begin(portal.getEEPROMUsedSize()); EEPROM.put < EEPROM_CONFIG_t > ( 0 , eepromConfig); EEPROM.commit(); EEPROM.end(); ...","title":"Credential accesses"},{"location":"adcredential.html#access-to-saved-credentials","text":"AutoConnect stores the credentials of the established WiFi connection in the flash of the ESP8266/ESP32 module and equips the class to access them from the Sketch. The Sketch can read, write, or erase the credentials using this class as the AutoConnectCredential individually. 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":"adcredential.html#autosave-credential","text":"In the sketch, you can give an indication of when to save the credentials by setting the following three options of AutoConnectConfig::autoSave : AC_SAVECREDENTIAL_AUTO : AutoConnect will save a credential when the WiFi connection is established with an access point. Its credential contains BSSID which a connection established access point has. AC_SAVECREDENTIAL_ALWAYS : AutoConnect will save a credential entered via Configure new AP menu even if a connection attempt has failed. BSSID does not exist in the credentials registered with this option. (will be 0x00) If this credential is selected as a connection candidate, the SSID will be adopted for matching attempts with the target access point even if AUTOCONNECT_APKEY_SSID is not enabled. AC_SAVECREDENTIAL_NEVER : AutoConnect will not store the credentials even if the connection to the access point is successful. However, the core SDK will save it, so it retains the previously established connection unless you disconnect the ESP module from the connected access point. 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":"Autosave Credential"},{"location":"adcredential.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 boundaryOffset is ignored with the combination of AutoConnect v1.0.0 or later and the arduino-esp32 1.0.3 or later. The AutoConnectConfig::boundaryOffset setting allows AutoConnect to write its data to EEPROM while preserving custom configuration data. Similarly, when a Sketch writes its own data to EEPROM, it must preserve the data written by AutoConnect. The EEPROM library for ESP8266 erases the entire flash sector when it writes to any part of the sector. Therefore, when writing data to EEPROM with a sketch that handles the custom data, it is necessary to call EEPROM.begin using a total amount of a custom data size and the saved credentials size. The following code shows how to use the AutoConnect::getEEPROMUsedSize function to store custom configuration settings in EEPROM without conflicting with AutoConnect's use of that storage. AutoConnect portal; AutoConnectConfig config; // Defines the custom data should be stored in EEPROM. typedef struct { char data1[ 8 ]; char data2[ 8 ]; char data3[ 8 ]; } EEPROM_CONFIG_t; EEPROM_CONFIG_t eepromConfig; ... // Declares to reserve the EEPROM_CONFIG_t area for a Sketch using. config.boundaryOffset = sizeof (eepromConfig); portal.config(config); ... strcpy(eepromComfig.data1, \"data1\" ); strcpy(eepromComfig.data2, \"data2\" ); strcpy(eepromComfig.data3, \"data3\" ); // Use getEEPROMUsedSize to access the EEPROM with the appropriate region size. EEPROM.begin(portal.getEEPROMUsedSize()); EEPROM.put < EEPROM_CONFIG_t > ( 0 , eepromConfig); EEPROM.commit(); EEPROM.end(); ...","title":"Move the saving area of EEPROM for the credentials"},{"location":"adexterior.html","text":"The design of various AutoConnect web pages is basically inflexible. Its appearance and layout don't have many customizable visual aspects but nevertheless, you can customize the following appearances of your AutoConnect web pages: AutoConnect menu colorize (See Appendix ) Make different menu labels Make different menu title Capture the legacy web pages as items into the menu Make different menu labels \u00b6 You can change the label text for each menu item but cannot change them at run time. There are two ways to change the label text, both of which require coding the label literal. Overwrite the label literal of library source code directly. You can change the label of the AutoConnect menu item by rewriting the default label literal in AutoConnectLabels.h macros. However, changing menu items literal 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_UPDATE \"Update\" #define AUTOCONNECT_MENULABEL_HOME \"HOME\" #define AUTOCONNECT_MENULABEL_DEVINFO \"Device info\" #define AUTOCONNECT_BUTTONLABEL_RESET \"RESET\" #define AUTOCONNECT_BUTTONLABEL_UPDATE \"UPDATE\" build_flags with PlatformIO will no effect The mistake that many people make is to use PlatformIO's build_flags to try to redefine any literal at compile time. The AutoConnect library statically contains the label literals which are embedded as binary data when compiling the library code. The label literals will not change without compiling the library source. And PlatformIO is a build system. Library sources will not be compiled unless AutoConnectLabels.h is updated. Change the label literals for each Arduino project Another way to change the label literal is to provide a header file that defines the label literals, as mentioned in Appendix . You can also use this method to display label text and fixed text in the local language on the AutoConnect page. See Change the item's label text section for details. Make different 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. Capture the legacy web pages as items into the menu \u00b6 You can embed the ordinary page processed by the ESP8266WebServer request handler as an item into the AutoConnect menu. AutoConnect can capture the legacy web pages for ESP8266WebServer or WebServer of ESP32 and extends the menu containing these items. In ordinary, the Sketch registers the request handler for the page depending on URI using the ESP8266WebServer::on function. AutoConnect allows Sketch to bundle the registered legacy page into a menu. the Sketch is able to include its URI to a menu item using AutoConnect::append function that creates internally an AutoConnectAux depended on its URI and integrates into the menu. The following code has a mixture of both AutoConnectAux and the legacy web page. An AutoConnectAux page is menued automatically with the AutoConnect::join or AutoConnect::load function. Similarly, a legacy page is integrated by the AutoConnect::append function. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> ESP8266WebServer server; AutoConnect portal (server); // Definitions of AutoConnectAux page static const char PAGE[] PROGMEM = R\"( { \"title\": \"PAGE\", \"uri\": \"/page\", \"menu\": true, \"element\": [ { \"name\": \"cap\", \"type\": \"ACText\", \"value\": \"This is a custom web page.\" } ] } )\" ; void setup () { // The Web page handler located to /hello server.on( \"/hello\" , [](){ server.send( 200 , \"text/html\" , String(F( \"<html>\" \"<head><meta name='viewport' content='width=device-width,initial-scale=1.0'></head>\" \"<body><h2>Hello, world</h2></body>\" \"</html>\" ))); }); portal.append( \"/hello\" , \"HELLO\" ); // Adds an item as HELLO into the menu portal.load(FPSTR(PAGE)); // Load AutoConnectAux custom web page portal.begin(); } void loop () { portal.handleClient(); } The AutoConnect::append function also has the third parameter that directly specifies the request handler. It has similar efficacy to calling the append and ESP8266WebSever::on at once. 1 portal.append( \"/hello\" , \"HELLO\" , [](){ server.send( 200 , \"text/html\" , String(F( \"<html>\" \"<head><meta name='viewport' content='width=device-width,initial-scale=1.0'></head>\" \"<body><h2>Hello, world</h2></body>\" \"</html>\" ))); }); For more details, see section Attach the menus of Examples page. An instance of ESP8266WebServer/WebServer is needed When calling the append function with request handler parameters, an instance of the WebServer as the registration destination must exist. AutoConnect can instantiate and host a WebServer internally, but in that case, the point in time to call the AutoConnect::append function with a request handler parameter must be after AutoConnect::begin . window.onload = function() { Gifffer(); }; However, the pages registered this way remain legacy. Therefore, the AutoConnect menu bar is not appeared. \u21a9","title":"Customizing page appearance"},{"location":"adexterior.html#make-different-menu-labels","text":"You can change the label text for each menu item but cannot change them at run time. There are two ways to change the label text, both of which require coding the label literal. Overwrite the label literal of library source code directly. You can change the label of the AutoConnect menu item by rewriting the default label literal in AutoConnectLabels.h macros. However, changing menu items literal 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_UPDATE \"Update\" #define AUTOCONNECT_MENULABEL_HOME \"HOME\" #define AUTOCONNECT_MENULABEL_DEVINFO \"Device info\" #define AUTOCONNECT_BUTTONLABEL_RESET \"RESET\" #define AUTOCONNECT_BUTTONLABEL_UPDATE \"UPDATE\" build_flags with PlatformIO will no effect The mistake that many people make is to use PlatformIO's build_flags to try to redefine any literal at compile time. The AutoConnect library statically contains the label literals which are embedded as binary data when compiling the library code. The label literals will not change without compiling the library source. And PlatformIO is a build system. Library sources will not be compiled unless AutoConnectLabels.h is updated. Change the label literals for each Arduino project Another way to change the label literal is to provide a header file that defines the label literals, as mentioned in Appendix . You can also use this method to display label text and fixed text in the local language on the AutoConnect page. See Change the item's label text section for details.","title":"Make different menu labels"},{"location":"adexterior.html#make-different-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":"Make different menu title"},{"location":"adexterior.html#capture-the-legacy-web-pages-as-items-into-the-menu","text":"You can embed the ordinary page processed by the ESP8266WebServer request handler as an item into the AutoConnect menu. AutoConnect can capture the legacy web pages for ESP8266WebServer or WebServer of ESP32 and extends the menu containing these items. In ordinary, the Sketch registers the request handler for the page depending on URI using the ESP8266WebServer::on function. AutoConnect allows Sketch to bundle the registered legacy page into a menu. the Sketch is able to include its URI to a menu item using AutoConnect::append function that creates internally an AutoConnectAux depended on its URI and integrates into the menu. The following code has a mixture of both AutoConnectAux and the legacy web page. An AutoConnectAux page is menued automatically with the AutoConnect::join or AutoConnect::load function. Similarly, a legacy page is integrated by the AutoConnect::append function. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> ESP8266WebServer server; AutoConnect portal (server); // Definitions of AutoConnectAux page static const char PAGE[] PROGMEM = R\"( { \"title\": \"PAGE\", \"uri\": \"/page\", \"menu\": true, \"element\": [ { \"name\": \"cap\", \"type\": \"ACText\", \"value\": \"This is a custom web page.\" } ] } )\" ; void setup () { // The Web page handler located to /hello server.on( \"/hello\" , [](){ server.send( 200 , \"text/html\" , String(F( \"<html>\" \"<head><meta name='viewport' content='width=device-width,initial-scale=1.0'></head>\" \"<body><h2>Hello, world</h2></body>\" \"</html>\" ))); }); portal.append( \"/hello\" , \"HELLO\" ); // Adds an item as HELLO into the menu portal.load(FPSTR(PAGE)); // Load AutoConnectAux custom web page portal.begin(); } void loop () { portal.handleClient(); } The AutoConnect::append function also has the third parameter that directly specifies the request handler. It has similar efficacy to calling the append and ESP8266WebSever::on at once. 1 portal.append( \"/hello\" , \"HELLO\" , [](){ server.send( 200 , \"text/html\" , String(F( \"<html>\" \"<head><meta name='viewport' content='width=device-width,initial-scale=1.0'></head>\" \"<body><h2>Hello, world</h2></body>\" \"</html>\" ))); }); For more details, see section Attach the menus of Examples page. An instance of ESP8266WebServer/WebServer is needed When calling the append function with request handler parameters, an instance of the WebServer as the registration destination must exist. AutoConnect can instantiate and host a WebServer internally, but in that case, the point in time to call the AutoConnect::append function with a request handler parameter must be after AutoConnect::begin . window.onload = function() { Gifffer(); }; However, the pages registered this way remain legacy. Therefore, the AutoConnect menu bar is not appeared. \u21a9","title":"Capture the legacy web pages as items into the menu"},{"location":"adnetwork.html","text":"AutoConnect allows you to make the static configuration of SoftAP at runtime. Its configuration includes the identification information on the network such as the IP address and the access path of the Web page handled by AutoConnect etc. In addition, the mDNS service allows SoftAP to be accessed by hostname on the local network. The configuration settings for the network that can be set by AutoConnect is as follows: 404 handler Assign user sketch's home path Change SSID and Password for SoftAP Combination with mDNS Make SSID of SoftAP unique Relocate the AutoConnect home path SoftAP access point IP settings Static IP assignment as a client Station hostname 404 handler \u00b6 AutoConnect cannot allow the Sketch registers the \"Not-found\" handler (404-handler) to the ESP8266WebServer natively. AutoConnect traps Not-found handler of the ESP8266WebServer for its own page processing. If the Sketch overrides the Not-found handler, AutoConnect will miss the opportunity to control the HTTP session and becomes unresponsive to the menu. Registering the Not-found handler is a different method than for ESP8266WebServer, use AutoConnect::onNotFound . This restriction applies to the WebServer for ESP32 as well. 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. The Sketch HOME path is closely related to the bootUri that specifies the access path on module restart. AutoConnect has the following three parameters concerning control the URIs: AUTOCONNECT_URI The ROOT URI of AutoConnect. It is defined in AutoConnectDefs.h file and is assigned to AutoConnect statistics screen by default. AutoConnectConfig::homeUri It is the hyperlink of listed on the AutoConnect menu as HOME . AutoConnectConfig::bootUri Which page appears at the captive portal, AUTOCONNECT_URI, or the homeUri. Its page will pop up automatically when you visit the captive portal. The definition of HOME Behavior Specified by Default value Possible value ROOT of AutoConnect Default for AC_ONBOOTURI_ROOT #define AUTOCONNECT_URI in AutoConnectDefs.h /_ac URI string HOME for Application-specific Listed on the menu list as HOME Also, It may be linked from the menu title and is redundant with the HOME menu item. eg. Case of bootURI = AC_ONBOOTURI_HOME AutoConnectConfig::homeURI / URI string Which page loads at the boot time, ROOT or HOME Appears after module reboot by RESET button with AutoConnect menu AutoConnectConfig::bootURI AC_ONBOOTURI_ROOT AC_ONBOOTURI_HOME Which page appears at the captive portal, ROOT or HOME Auto pop-up AutoConnectConfig::bootURI AC_ONBOOTURI_ROOT AC_ONBOOTURI_HOME 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_password\" ); 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. Combination with mDNS \u00b6 With mDNS library , you can access to ESP8266 by name instead of IP address after connection. The Sketch can start the MDNS responder after AutoConnect::begin . #include <ESP8266WiFi.h> #include <ESP8266mDNS.h> #include <ESP8266WebServer.h> AutoConnect Portal; void setup () { if (Portal.begin()) { if (MDNS.begin( \"esp8266\" )) { MDNS.addService( \"http\" , \"tcp\" , 80 ); } } } void loop () { Portal.handleClient(); } 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); aConfig.psk = YOUR_PASSWORD; portal.config(acConfig); portal.begin(); Obtaining chip ID for ESP32 acConfig.apid = \"ESP-\" + String((uint32_t)(ESP.getEfuseMac() >> 32), HEX); Relocate the AutoConnect home path \u00b6 A home path of AutoConnect is /_ac by default. You can access from the browser with http://IPADDRESS_OF_ESP_MODULE/_ac . You can change the home path by revising AUTOCONNECT_URI macro in AutoConnectDefs.h header file. #define AUTOCONNECT_URI \"/_ac\" SoftAP access point IP settings \u00b6 AutoConnect will activate SoftAP at failed the 1 st -WiFi.begin. Its 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. AutoConnectConfig member Settings for Defined symbol Initial value apip SoftAP IP address AUTOCONNECT_AP_IP 172.217.28.1 gateway Gateway IP address AUTOCONNECT_AP_GW 172.217.28.1 netmask Subnet mask for the SoftAP AUTOCONNECT_AP_NM 255.255.255.0 channel WiFi channel for the SoftAP AUTOCONNECT_AP_CH 1 hidden Hide the SoftAP false Static IP assignment as a client \u00b6 It is possible to assign a static IP Address to ESP8266/ESP32 in STA mode. 1 By default DHCP is enabled and it becomes the IP address assigned by the DHCP server with WiFi.begin . These settings are made via AutoConnectConfig as in the case of SoftAP settings. To assign a static IP to ESP8266/ESP32 with WIFI_STA, the following parameters are required: AutoConnectConfig member Settings for Initial value staip Station IP address 0.0.0.0 staGateway Gateway address for the station 0.0.0.0 staNetmask Subnet mask for the the station 0.0.0.0 dns1 Primary DNS server IP address 0.0.0.0 dns2 Secondary DNS server IP address 0.0.0.0 The above parameters must be set using AutoConnect::config prior to AutoConnect::begin call as following: 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 hostname \u00b6 AutoConnectConfig::hostName assigns a station DHCP hostname to the ESP module. The hostname must satisfy RFC952 compliant and meet the following restrictions: Up to 24 characters Only the alphabet (a-z, A-Z), digits (0-9), minus sign (-) No '-' as last character Static IP address assignment is available from version 0.9.3. \u21a9","title":"Settings and controls for network and WiFi"},{"location":"adnetwork.html#404-handler","text":"AutoConnect cannot allow the Sketch registers the \"Not-found\" handler (404-handler) to the ESP8266WebServer natively. AutoConnect traps Not-found handler of the ESP8266WebServer for its own page processing. If the Sketch overrides the Not-found handler, AutoConnect will miss the opportunity to control the HTTP session and becomes unresponsive to the menu. Registering the Not-found handler is a different method than for ESP8266WebServer, use AutoConnect::onNotFound . This restriction applies to the WebServer for ESP32 as well.","title":"404 handler"},{"location":"adnetwork.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. The Sketch HOME path is closely related to the bootUri that specifies the access path on module restart. AutoConnect has the following three parameters concerning control the URIs: AUTOCONNECT_URI The ROOT URI of AutoConnect. It is defined in AutoConnectDefs.h file and is assigned to AutoConnect statistics screen by default. AutoConnectConfig::homeUri It is the hyperlink of listed on the AutoConnect menu as HOME . AutoConnectConfig::bootUri Which page appears at the captive portal, AUTOCONNECT_URI, or the homeUri. Its page will pop up automatically when you visit the captive portal. The definition of HOME Behavior Specified by Default value Possible value ROOT of AutoConnect Default for AC_ONBOOTURI_ROOT #define AUTOCONNECT_URI in AutoConnectDefs.h /_ac URI string HOME for Application-specific Listed on the menu list as HOME Also, It may be linked from the menu title and is redundant with the HOME menu item. eg. Case of bootURI = AC_ONBOOTURI_HOME AutoConnectConfig::homeURI / URI string Which page loads at the boot time, ROOT or HOME Appears after module reboot by RESET button with AutoConnect menu AutoConnectConfig::bootURI AC_ONBOOTURI_ROOT AC_ONBOOTURI_HOME Which page appears at the captive portal, ROOT or HOME Auto pop-up AutoConnectConfig::bootURI AC_ONBOOTURI_ROOT AC_ONBOOTURI_HOME","title":"Assign user sketch's home path"},{"location":"adnetwork.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_password\" ); 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":"adnetwork.html#combination-with-mdns","text":"With mDNS library , you can access to ESP8266 by name instead of IP address after connection. The Sketch can start the MDNS responder after AutoConnect::begin . #include <ESP8266WiFi.h> #include <ESP8266mDNS.h> #include <ESP8266WebServer.h> AutoConnect Portal; void setup () { if (Portal.begin()) { if (MDNS.begin( \"esp8266\" )) { MDNS.addService( \"http\" , \"tcp\" , 80 ); } } } void loop () { Portal.handleClient(); }","title":"Combination with mDNS"},{"location":"adnetwork.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); aConfig.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":"adnetwork.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_OF_ESP_MODULE/_ac . You can change the home path by revising AUTOCONNECT_URI macro in AutoConnectDefs.h header file. #define AUTOCONNECT_URI \"/_ac\"","title":"Relocate the AutoConnect home path"},{"location":"adnetwork.html#softap-access-point-ip-settings","text":"AutoConnect will activate SoftAP at failed the 1 st -WiFi.begin. Its 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. AutoConnectConfig member Settings for Defined symbol Initial value apip SoftAP IP address AUTOCONNECT_AP_IP 172.217.28.1 gateway Gateway IP address AUTOCONNECT_AP_GW 172.217.28.1 netmask Subnet mask for the SoftAP AUTOCONNECT_AP_NM 255.255.255.0 channel WiFi channel for the SoftAP AUTOCONNECT_AP_CH 1 hidden Hide the SoftAP false","title":"SoftAP access point IP settings"},{"location":"adnetwork.html#static-ip-assignment-as-a-client","text":"It is possible to assign a static IP Address to ESP8266/ESP32 in STA mode. 1 By default DHCP is enabled and it becomes the IP address assigned by the DHCP server with WiFi.begin . These settings are made via AutoConnectConfig as in the case of SoftAP settings. To assign a static IP to ESP8266/ESP32 with WIFI_STA, the following parameters are required: AutoConnectConfig member Settings for Initial value staip Station IP address 0.0.0.0 staGateway Gateway address for the station 0.0.0.0 staNetmask Subnet mask for the the station 0.0.0.0 dns1 Primary DNS server IP address 0.0.0.0 dns2 Secondary DNS server IP address 0.0.0.0 The above parameters must be set using AutoConnect::config prior to AutoConnect::begin call as following: 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 as a client"},{"location":"adnetwork.html#station-hostname","text":"AutoConnectConfig::hostName assigns a station DHCP hostname to the ESP module. The hostname must satisfy RFC952 compliant and meet the following restrictions: Up to 24 characters Only the alphabet (a-z, A-Z), digits (0-9), minus sign (-) No '-' as last character Static IP address assignment is available from version 0.9.3. \u21a9","title":"Station hostname"},{"location":"adothers.html","text":"AutoConnect also has features that are not directly related to WiFi connection abilities. They're mostly like a little accessory but can reduce the amount of sketch code. Built-in OTA update Choice of the filesystem for ESP8266 Debug Print File uploading via built-in OTA feature Refers the hosted ESP8266WebServer/WebServer Reset the ESP module after disconnecting from WLAN Ticker for WiFi status Usage for automatically instantiated ESP8266WebServer/WebServer Use with the PageBuilder library Built-in OTA update feature \u00b6 AutoConnect features a built-in OTA function to update ESP module firmware. You can easily make the Sketch that equips OTA and able to operate with the AutoConnect menu. AutoConnectConfig::ota specifies to import the built-in OTA update class into the Sketch. See the Updates with the Web Browser chapter for details. Choice of the filesystem for ESP8266 \u00b6 For ESP8266, since the Arduino core v2.7.0, SPIFFS has deprecated and the migration to LittleFS is being promoted currently. AutoConnect has adopted LittleFS as the default filesystem to follow the core standard. However, SPIFFS is still valid. AutoConnect can correctly compile and execute sketches made with SPIFFS assumed. When you make an AutoConnect sketch with SPIFFS enabled, you need to change the macro definition that AutoConnectDefs.h has. AC_USE_SPIFFS definition will enable SPIFFS as the filesystem. #define AC_USE_SPIFFS See also the FAQ to help you enable AC_USE_SPIFFS correctly. Note that refers to the Using Filesystem chapter to know the utilization capabilities of the file system with AutoConnect. 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 AutoConnect does not automatically start the Serial even if AC_DEBUG is activated. The Sketch should start the Serial during its setup phase using Serial.begin(BAUDRATE) . How to enable AC_DEBUG The #define is a C++ preprocessor directive. The build process of the Sketch by the Arduino IDE is processed independently of the subsequent C++ compilation unit. Writing the #define directive for AC_DEBUG in the Sketch has no effect on the AutoConnect library. To compile the AutoConnect library with the AC_DEBUG directive, you can either edit the library source code directly (usually it is located in ~/Arduino/libraries/AutoConnect/src) or use a build system which can configure the preprocessor directives externally such as PlatformIO . To enable AC_DEBUG using PlatformIO without modifying the library source, specify the build_flags directive in the platformio.ini file with each project. build_flags = -DAC_DEBUG File uploading via built-in OTA feature \u00b6 The built-in OTA update feature can update the firmware as well as upload regular files placed in the file system on the ESP module. It allows a regular file is uploaded via OTA using the Update of AutoConnect menu without adding a particular custom Web page that contains AutoConnectFile. This ability is useful for transferring the JSON document of the custom web page definition, the external parameter file of your sketch, and so on into the target ESP module via OTA. The built-in OTA update feature determines where to save the uploaded file according to the filename pattern. By default, a filename with ends a .bin extension is subject to firmware updates. A file that has the other extension will be saved as a regular to the filesystem in the flash. The file extension that should be treated as the firmware is defined as the AUTOCONNECT_UPLOAD_ASFIRMWARE macro in AutoConnectDefs.h header file of the library source code. When dealing with another extension for the updating file as firmware change this macro definition. #define AUTOCONNECT_UPLOAD_ASFIRMWARE \".bin\" Specify with the PlatformIO AUTOCONNECT_UPLOAD_ASFIRMWARE pattern will be embedded into the binary sketch is determined at compile time. The PlatformIO build system allows you to change the pattern expression for each project without modifying the library source code. build_flags = -DAUTOCONNECT_UPLOAD_ASFIRMWARE='\".bin\"' 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 . Reset the ESP module after disconnecting from WLAN \u00b6 Disconnect by menu operation allows the ESP8266/ESP32 module to reset automatically after disconnecting from WLAN. This behavior is enabled by default and can be disabled by AutoConnectConfig::autoReset settings. AutoConnect Portal; AutoConnectConfig Config; Config.autoReset = false; // Continue sketch processing even after disconnecting from by AutoConnect menu. Portal.config(Config); Portal.begin(); The autoReset setting will automatically reset the ESP module when disconnecting WiFi only if you intentionally navigate the menu . And it does not participate in passive disconnection conditions such as disconnection due to sketch processing or loss of WiFi signal. You can combine autoReset with autoReconnect to disconnect from WiFi and automatically reconnect to another AP while continuing the Sketch operation. The Sketch below shows an example of a meaningful combination of autoReset and autoReconnect . It can connect to the access point once with the captive portal but assumes that it can be disconnected from the WLAN by intentional menu navigation. In that case, the Sketch will continue processing without resetting the module. Then an external switch allows to start automatic reconnecting. In this situation, if known access points appear nearby, the ESP module will automatically reconnect to them in the handleClient loop. In this state transition, the module continues the Sketch process without resetting. AutoConnect Portal; AutoConnectConfig Config; const int reconnectSwitch = 14 ; // Assign the reconnect switch to GPIO14 ICACHE_RAM_ATTR void detectsReconnect() { if ( ! Config.autoReconnect) { // Chattering elimination // autoReconnect is enabled by interrupt of the GPIO trigger, Config.autoReconnect = true; // Activate reconnection Config.reconnectInterval = 2 ; // Attempt to reconnect at 60 seconds intervals. Portal.config(Config); Serial.printf( \"Turn on autoReconnect, interval %d[s] \\n \" , Config.reconnectInterval * AUTOCONNECT_UNITTIME); } } void setup() { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); Config.ticker = true; // Setting up WiFi connection indicator Portal.config(Config); if (Portal.begin()) { Config.autoReset = false; Portal.config(Config); // Set external switch pin to reconnect as interrupt, assign interrupt function and set RISING mode pinMode(reconnectSwitch, INPUT_PULLUP); attachInterrupt(digitalPinToInterrupt(reconnectSwitch), detectsReconnect, RISING); } } void loop() { if (WiFi.status() == WL_CONNECTED) { /* Here, your sketch process with WiFi connection */ } else { /* Here, your sketch process without WiFi connection */ } // Post process, turn to initial state of autoReconnect. if (Config.autoReconnect) { if (WiFi.status() == WL_CONNECTED) { Config.autoReconnect = false; Portal.config(Config); } } // The actual reconnection takes place within handleClient. Portal.handleClient(); } An external switch wiring to GPIO The wiring for the above Sketch assumes a momentary effects switch that connects the GPIO pin 14 to GND. You can experience it with easily wire on a breadboard using a NodeMCU as like: Ticker for WiFi status \u00b6 Flicker signal can be output from the ESP8266/ESP32 module according to WiFi connection status. By wiring the LED to the signal output pin with the appropriate limiting resistor, you can know the WiFi connection status through the LED blink during the inside behavior of AutoConnect::begin and loop of AutoConnect::handleClient. AutoConnectConfig::ticker option specifies flicker signal output. The following sketch is an example of blinking the active-low LED connected to GPIO16 depending on the WiFi connection status. 2 AutoConnect portal; AutoConnectConfig Config; Config.ticker = true; config.tickerPort = 16 ; Config.tickerOn = LOW; 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 AP_STA 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) AUTOCONNECT_FLICKER_PERIODAP : Assigns a flicker period when the ESP module stays in AP_STA 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. Ticker during OTA The LED blinking will always be a short blinking during the update via OTA, regardless of the definition of the flicker cycle. 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 Usage for automatically instantiated ESP8266WebServer/WebServer \u00b6 The Sketch can handle URL requests using ESP8266WebServer or WebServer that AutoConnect started internally. ESP8266WebServer/WebServer instantiated dynamically by AutoConnect can be referred to by AutoConnect::host function. The Sketch can use the ' on ' function, ' send ' function, ' client ' function and others by ESP8266WebServer/WebServer reference of its return value. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect Portal; void handleRoot () { ESP8266WebServer & IntServer = Portal.host(); IntServer.send( 200 , \"text/html\" , \"Hello, world\" ); } void handleNotFound () { ESP8266WebServer & IntServer = Portal.host(); IntServer.send( 404 , \"text/html\" , \"Unknown.\" ); } void setup () { bool r = Portal.begin(); if (r) { ESP8266WebServer & IntServer = Portal.host(); IntServer.on( \"/\" , handleRoot); Portal.onNotFound(handleNotFound); // For only onNotFound. } } void loop () { Portal.host().handleClient(); Portal.handleRequest(); /* or following one line code is equ. Portal.handleClient(); */ } ESP8266WebServer/WebServer function should be called after AutoConnect::begin The Sketch cannot refer to an instance of ESP8266WebServer/WebServer until AutoConnect::begin completes successfully. Do not use with ESP8266WebServer::begin or WebServer::begin ESP8266WebServer/WebServer is already running inside the AutoConnect. Use with the PageBuilder library \u00b6 In ordinary, the URL handler will respond to the request from the client by sending some HTML. It will dynamically generate the HTML to respond to based on the sensing data etc. for the changing scene, but it contains elements of variable values in the middle of the HTML fixed string. Therefore, sketches tend to be in a tangled that repeats the logic for data handling and string splicing in turn, which tends to be less readable and maintainable. PageBuilder library is an HTML assembly aid. it can handle predefined HTML like the 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 . window.onload = function() { Gifffer(); }; The source code placement of common macros for AutoConnect since v0.9.7 has changed. \u21a9 The ESP module pin mapping is different for each breakout. Definitions for assigning pin numbers to pin names usually exist in the variant definition program of Arduino core packages. (e.g. esp8266/arduino core , arduino-esp32 core ) You may find the definition as pins_arduino.h . \u21a9 It's defined in the pins_arduino.h file, located in the sub-folder named variants wherein Arduino IDE installed folder. \u21a9","title":"Other operation settings and controls"},{"location":"adothers.html#built-in-ota-update-feature","text":"AutoConnect features a built-in OTA function to update ESP module firmware. You can easily make the Sketch that equips OTA and able to operate with the AutoConnect menu. AutoConnectConfig::ota specifies to import the built-in OTA update class into the Sketch. See the Updates with the Web Browser chapter for details.","title":"Built-in OTA update feature"},{"location":"adothers.html#choice-of-the-filesystem-for-esp8266","text":"For ESP8266, since the Arduino core v2.7.0, SPIFFS has deprecated and the migration to LittleFS is being promoted currently. AutoConnect has adopted LittleFS as the default filesystem to follow the core standard. However, SPIFFS is still valid. AutoConnect can correctly compile and execute sketches made with SPIFFS assumed. When you make an AutoConnect sketch with SPIFFS enabled, you need to change the macro definition that AutoConnectDefs.h has. AC_USE_SPIFFS definition will enable SPIFFS as the filesystem. #define AC_USE_SPIFFS See also the FAQ to help you enable AC_USE_SPIFFS correctly. Note that refers to the Using Filesystem chapter to know the utilization capabilities of the file system with AutoConnect.","title":"Choice of the filesystem for ESP8266"},{"location":"adothers.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 AutoConnect does not automatically start the Serial even if AC_DEBUG is activated. The Sketch should start the Serial during its setup phase using Serial.begin(BAUDRATE) . How to enable AC_DEBUG The #define is a C++ preprocessor directive. The build process of the Sketch by the Arduino IDE is processed independently of the subsequent C++ compilation unit. Writing the #define directive for AC_DEBUG in the Sketch has no effect on the AutoConnect library. To compile the AutoConnect library with the AC_DEBUG directive, you can either edit the library source code directly (usually it is located in ~/Arduino/libraries/AutoConnect/src) or use a build system which can configure the preprocessor directives externally such as PlatformIO . To enable AC_DEBUG using PlatformIO without modifying the library source, specify the build_flags directive in the platformio.ini file with each project. build_flags = -DAC_DEBUG","title":"Debug Print"},{"location":"adothers.html#file-uploading-via-built-in-ota-feature","text":"The built-in OTA update feature can update the firmware as well as upload regular files placed in the file system on the ESP module. It allows a regular file is uploaded via OTA using the Update of AutoConnect menu without adding a particular custom Web page that contains AutoConnectFile. This ability is useful for transferring the JSON document of the custom web page definition, the external parameter file of your sketch, and so on into the target ESP module via OTA. The built-in OTA update feature determines where to save the uploaded file according to the filename pattern. By default, a filename with ends a .bin extension is subject to firmware updates. A file that has the other extension will be saved as a regular to the filesystem in the flash. The file extension that should be treated as the firmware is defined as the AUTOCONNECT_UPLOAD_ASFIRMWARE macro in AutoConnectDefs.h header file of the library source code. When dealing with another extension for the updating file as firmware change this macro definition. #define AUTOCONNECT_UPLOAD_ASFIRMWARE \".bin\" Specify with the PlatformIO AUTOCONNECT_UPLOAD_ASFIRMWARE pattern will be embedded into the binary sketch is determined at compile time. The PlatformIO build system allows you to change the pattern expression for each project without modifying the library source code. build_flags = -DAUTOCONNECT_UPLOAD_ASFIRMWARE='\".bin\"'","title":"File uploading via built-in OTA feature"},{"location":"adothers.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":"adothers.html#reset-the-esp-module-after-disconnecting-from-wlan","text":"Disconnect by menu operation allows the ESP8266/ESP32 module to reset automatically after disconnecting from WLAN. This behavior is enabled by default and can be disabled by AutoConnectConfig::autoReset settings. AutoConnect Portal; AutoConnectConfig Config; Config.autoReset = false; // Continue sketch processing even after disconnecting from by AutoConnect menu. Portal.config(Config); Portal.begin(); The autoReset setting will automatically reset the ESP module when disconnecting WiFi only if you intentionally navigate the menu . And it does not participate in passive disconnection conditions such as disconnection due to sketch processing or loss of WiFi signal. You can combine autoReset with autoReconnect to disconnect from WiFi and automatically reconnect to another AP while continuing the Sketch operation. The Sketch below shows an example of a meaningful combination of autoReset and autoReconnect . It can connect to the access point once with the captive portal but assumes that it can be disconnected from the WLAN by intentional menu navigation. In that case, the Sketch will continue processing without resetting the module. Then an external switch allows to start automatic reconnecting. In this situation, if known access points appear nearby, the ESP module will automatically reconnect to them in the handleClient loop. In this state transition, the module continues the Sketch process without resetting. AutoConnect Portal; AutoConnectConfig Config; const int reconnectSwitch = 14 ; // Assign the reconnect switch to GPIO14 ICACHE_RAM_ATTR void detectsReconnect() { if ( ! Config.autoReconnect) { // Chattering elimination // autoReconnect is enabled by interrupt of the GPIO trigger, Config.autoReconnect = true; // Activate reconnection Config.reconnectInterval = 2 ; // Attempt to reconnect at 60 seconds intervals. Portal.config(Config); Serial.printf( \"Turn on autoReconnect, interval %d[s] \\n \" , Config.reconnectInterval * AUTOCONNECT_UNITTIME); } } void setup() { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); Config.ticker = true; // Setting up WiFi connection indicator Portal.config(Config); if (Portal.begin()) { Config.autoReset = false; Portal.config(Config); // Set external switch pin to reconnect as interrupt, assign interrupt function and set RISING mode pinMode(reconnectSwitch, INPUT_PULLUP); attachInterrupt(digitalPinToInterrupt(reconnectSwitch), detectsReconnect, RISING); } } void loop() { if (WiFi.status() == WL_CONNECTED) { /* Here, your sketch process with WiFi connection */ } else { /* Here, your sketch process without WiFi connection */ } // Post process, turn to initial state of autoReconnect. if (Config.autoReconnect) { if (WiFi.status() == WL_CONNECTED) { Config.autoReconnect = false; Portal.config(Config); } } // The actual reconnection takes place within handleClient. Portal.handleClient(); } An external switch wiring to GPIO The wiring for the above Sketch assumes a momentary effects switch that connects the GPIO pin 14 to GND. You can experience it with easily wire on a breadboard using a NodeMCU as like:","title":"Reset the ESP module after disconnecting from WLAN"},{"location":"adothers.html#ticker-for-wifi-status","text":"Flicker signal can be output from the ESP8266/ESP32 module according to WiFi connection status. By wiring the LED to the signal output pin with the appropriate limiting resistor, you can know the WiFi connection status through the LED blink during the inside behavior of AutoConnect::begin and loop of AutoConnect::handleClient. AutoConnectConfig::ticker option specifies flicker signal output. The following sketch is an example of blinking the active-low LED connected to GPIO16 depending on the WiFi connection status. 2 AutoConnect portal; AutoConnectConfig Config; Config.ticker = true; config.tickerPort = 16 ; Config.tickerOn = LOW; 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 AP_STA 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) AUTOCONNECT_FLICKER_PERIODAP : Assigns a flicker period when the ESP module stays in AP_STA 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. Ticker during OTA The LED blinking will always be a short blinking during the update via OTA, regardless of the definition of the flicker cycle. 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","title":"Ticker for WiFi status"},{"location":"adothers.html#usage-for-automatically-instantiated-esp8266webserverwebserver","text":"The Sketch can handle URL requests using ESP8266WebServer or WebServer that AutoConnect started internally. ESP8266WebServer/WebServer instantiated dynamically by AutoConnect can be referred to by AutoConnect::host function. The Sketch can use the ' on ' function, ' send ' function, ' client ' function and others by ESP8266WebServer/WebServer reference of its return value. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect Portal; void handleRoot () { ESP8266WebServer & IntServer = Portal.host(); IntServer.send( 200 , \"text/html\" , \"Hello, world\" ); } void handleNotFound () { ESP8266WebServer & IntServer = Portal.host(); IntServer.send( 404 , \"text/html\" , \"Unknown.\" ); } void setup () { bool r = Portal.begin(); if (r) { ESP8266WebServer & IntServer = Portal.host(); IntServer.on( \"/\" , handleRoot); Portal.onNotFound(handleNotFound); // For only onNotFound. } } void loop () { Portal.host().handleClient(); Portal.handleRequest(); /* or following one line code is equ. Portal.handleClient(); */ } ESP8266WebServer/WebServer function should be called after AutoConnect::begin The Sketch cannot refer to an instance of ESP8266WebServer/WebServer until AutoConnect::begin completes successfully. Do not use with ESP8266WebServer::begin or WebServer::begin ESP8266WebServer/WebServer is already running inside the AutoConnect.","title":"Usage for automatically instantiated ESP8266WebServer/WebServer"},{"location":"adothers.html#use-with-the-pagebuilder-library","text":"In ordinary, the URL handler will respond to the request from the client by sending some HTML. It will dynamically generate the HTML to respond to based on the sensing data etc. for the changing scene, but it contains elements of variable values in the middle of the HTML fixed string. Therefore, sketches tend to be in a tangled that repeats the logic for data handling and string splicing in turn, which tends to be less readable and maintainable. PageBuilder library is an HTML assembly aid. it can handle predefined HTML like the 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 . window.onload = function() { Gifffer(); }; The source code placement of common macros for AutoConnect since v0.9.7 has changed. \u21a9 The ESP module pin mapping is different for each breakout. Definitions for assigning pin numbers to pin names usually exist in the variant definition program of Arduino core packages. (e.g. esp8266/arduino core , arduino-esp32 core ) You may find the definition as pins_arduino.h . \u21a9 It's defined in the pins_arduino.h file, located in the sub-folder named variants wherein Arduino IDE installed folder. \u21a9","title":"Use with the PageBuilder library"},{"location":"advancedusage.html","text":"Summary \u00b6 To make sketches work as you intended with AutoConnect, make sure you understand the implications of the setting parameters and configure AutoConnect. AutoConnectConfig allows you to incorporate settings into AutoConnect that coordinate control over WiFi connectivity and captive portal behavior. For advanced usages, the configuration settings and the Sketch examples are followings: AutoConnect WiFi connection control Captive portal control Authentication settings Credential accesses Settings for customizing the page exterior Settings and controls for network and WiFi Other operation settings and controls Don't forget AutoConnect::config The configuration cannot be reflected by only changing the member variables of AutoConnectConfig settings. It will be reflected in the actual ones by AutoConnect::config function. Don't forget to run the AutoConnect::config after changing the AutoConnectConfig member variables.","title":"Advanced usage"},{"location":"advancedusage.html#summary","text":"To make sketches work as you intended with AutoConnect, make sure you understand the implications of the setting parameters and configure AutoConnect. AutoConnectConfig allows you to incorporate settings into AutoConnect that coordinate control over WiFi connectivity and captive portal behavior. For advanced usages, the configuration settings and the Sketch examples are followings: AutoConnect WiFi connection control Captive portal control Authentication settings Credential accesses Settings for customizing the page exterior Settings and controls for network and WiFi Other operation settings and controls Don't forget AutoConnect::config The configuration cannot be reflected by only changing the member variables of AutoConnectConfig settings. It will be reflected in the actual ones by AutoConnect::config function. Don't forget to run the AutoConnect::config after changing the AutoConnectConfig member variables.","title":"Summary"},{"location":"api.html","text":"Include headers \u00b6 AutoConnect.h \u00b6 #include <AutoConnect.h> Defined macros \u00b6 They contain in AutoConnectDefs.h . #define AC_USE_SPIFFS // Use SPIFFS for the file system on the onboard flash, assumes LittleFS if not defined. #define AC_DEBUG // Monitor message output activation #define AC_DEBUG_PORT Serial // Default message output device #define AUTOCONNECT_AP_IP 0x011CD9AC // Default SoftAP IP #define AUTOCONNECT_AP_GW 0x011CD9AC // 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_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_STARTUPTIME 30 // Default waiting time[s] for after reset #define AUTOCONNECT_USE_JSON // Allow AutoConnect elements to be handled by JSON format #define AUTOCONNECT_USE_UPDATE // Indicator of whether to use the AutoConnectUpdate feature. #define AUTOCONNECT_UPDATE_PORT 8000 // Available HTTP port number for the update #define AUTOCONNECT_UPDATE_TIMEOUT 8000 // HTTP client timeout limitation for the update [ms] #define AUTOCONNECT_TICKER_PORT LED_BUILTIN // Ticker port #endif 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. AutoConnect will call the user added handler to respond to the HTTP request using the ESP8266WebServer::on (WebServer::on for ESP32) funtion. This call will be made from during the handleClient of AutoConnect function. Therefore, in the use case of assigning AutoConnect in this constructor, it is necessary to know the instance of ESP8266WebServer in order to register the request handler. Sketch can use host functions to obtain a reference to an ESP8266WebServer instance that is internally hosted by AutoConnect. 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. Parameter webServer A reference of ESP8266WebServer or WebServer instance. Public member functions \u00b6 append \u00b6 ESP8266/ESP32 Common AutoConnectAux * append( const String & uri, const String & title) For ESP8266 AutoConnectAux * append( const String & uri, const String & title, ESP8266WebServer :: THandlerFunction handler) For ESP32 AutoConnectAux * append( const String & uri, const String & title, WebServer :: THandlerFunction handler) Creates an AutoConnectAux dynamically with the specified URI and integrates it into the menu. Calls with a request handler parameter can use this function as menu registration for a legacy page of ESP8266WebServer/WebServer. If the handler parameter specified, also it will register the request handler for the ESP8266WebServer/WebServer. AutoConnect manages the menu items using a sequence list, and this function always adds the item to the end of the list. Therefore, the order of the menu items is the additional order. Returns the pointer to created AutoConnectAux instance, the nullptr if an AutoConnectAux with the same URI already exists. Parameter uri A string of the URI. title Title for menu item. handler Request handler function as type of ESP8266WebServer::THandlerFunction / WebServer::THandlerFunction . Return value A Pointer to a created AutoConnectAux instance. An instance of ESP8266WebServer/WebServer is needed The WebServer must have instantiated for calling with a request handler parameter. AutoConnect can instantiate and host a WebServer internally, but in that case, the point in time to call the append function with a request handler parameter must be after AutoConnect::begin. 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 AutoConnect configuration settings. 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. detach \u00b6 bool detach( const String & uri) Detach the AutoConnectAux with the specified URI from the management of AutoConnect. An unmanaged AutoConnectAux will no longer appear in menu items, and its page handler will no longer respond even if the URI is accessed directly. Parameter uri URI of AutoConnectAux to be detached. Return value true Successfully detached. false An AutoConnectAux with the specified URI does not exist. If the request handler registered in the detaching AutoConnectAux is for a legacy page of the ESP8266WebServer/WebServer, the URI is still valid after detaching. AutoConnect does not delete the request handler registered to ESP8266WebServer/WebServer with the on function. (It cannot be removed) Deleting the AutoConnectAux If the AutoConnectAux to detach was added by AutoConnect::append , it will be automatically removed and freed from memory. disableMenu \u00b6 void disableMenu( const uint16_t items) Disable the AutoConnect menu items specified by the items parameter with logical OR value using AC_MENUITEM_t constant. This function only works for AutoConnect primary menu items. It has no effect on disable for AutoConnectAux items. To disable the items by AutoConnectAux, use the AutoConnectAux::menu function. Parameter items Specify the combined value of AC_MENUITEM_t of the items deleting from the AutoConnect menu. It provides the value calculated from the logical OR by the AC_MENUITEM_t value of each item. Refer to the enableMenu about AC_MENUITEM_t. enableMenu \u00b6 void enableMenu( const uint16_t items) Enable the AutoConnect menu items specified by the items parameter with logical OR value using AC_MENUITEM_t constant. This function only works for AutoConnect primary menu items. It has no effect on enable for AutoConnectAux items. To enable the items by AutoConnectAux, use the AutoConnectAux::menu function. Parameter items Specify the combined value of AC_MENUITEM_t of the items applying to the AutoConnect menu. It provides the value calculated from the logical OR by the AC_MENUITEM_t value of each item applied as a menu. AC_MENUITEM_t is enumeration type to identify each menu item and it has the below values. AC_MENUITEM_CONFIGNEW : Configure new AP AC_MENUITEM_OPENSSIDS : Open SSIDs AC_MENUITEM_DISCONNECT : Disconnect AC_MENUITEM_RESET : Reset... AC_MENUITEM_HOME : HOME AC_MENUITEM_DEVINFO : Device statistics as AutoConnect root page It is added, not replaced. The initial configuration of the AutoConnect menu items: AC_MENUITEM_CONFIGNEW | AC_MENUITEM_OPENSSIDS | AC_MENUITEM_DISCONNECT | AC_MENUITEM_RESET | AC_MENUITEM_HOME The enableMenu function adds an indication of the specified items to the current. Therefore, use the disableMenu to remove the specified item from the initial menu. 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. getEEPROMUsedSize \u00b6 uint16_t getEEPROMUsedSize( void ) Returns the total amount of memory required to hold the AutoConnect credentials and any custom configuration settings stored in EEPROM. The Sketch that writes its own custom data to the EEPROM must call EEPROM.begin with this value. Return value Total amount size of saved AutoConnect credentials and custom data. The getEEPROMUsedSize is available for only ESP8266 use It is available for only ESP8266 use and will return 0 when used with ESP32. handleClient \u00b6 void handleClient( void ) Process the AutoConnect menu interface. The ESP8266WebServer::handleClient 1 function hosted by AutoConnect is also called from within AutoConnect to handle the request handlers contained in Sketch. Enhanced AutoConnect::handleClient The handleClient function enhanced since AutoConnect 1.2.0 can start the captive portal according to the WiFi connection status. By properly specifying AutoConnectConfig:: retainPortal and AutoConnectConfig:: autoRise , when handleClient detects WiFi disconnection, it shifts WiFi mode to WIFI_AP_STA and starts the DNS server together with SoftAP dynamically. Then trapping for incoming HTTP requests from client devices will be started by AutoConnect. Thus it will open the captive portal behind the execution of the sketch loop() function. The captive portal launched by enhanced handleClient does not interfere with sketch execution except waiting for the result of WiFi.begin. Also, AutoConnectConfig:: autoReconnect has improved. The Sketch can specify the AutoConnectConfig:: reconnectInterval to continue retrying the reconnection with enhanced handleClient. 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 following 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. onConnect \u00b6 void onConnect(ConnectExit_ft fn) Register the function which will call from AutoConnect at the WiFi connection established. Parameter fn A function called at the WiFi connected. An fn specifies the function called when the WiFi connected. Its prototype declaration is defined as ConnectExit_ft . typedef std :: function < void (IPaddress & localIP) > ConnectExit_ft Parameter localIP An IP address of the ESP module as STA. onDetect \u00b6 void onDetect(DetectExit_ft fn) Register the function which will call from AutoConnect at the start of the captive portal. Parameter fn A 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. onOTAEnd \u00b6 void onOTAEnd(OTAEndExit_ft fn) Register the on-end exit routine that is called only once when the OTA is finished. Parameter fn A function called when the OTA has been finished. An fn specifies the function called when the OTA has been finished. Its prototype declaration is defined as OTAEndExit_ft . typedef std :: function < void ( void ) > OTAEndExit_ft onOTAError \u00b6 void onOTAError(OTAErrorExit_ft fn) Register the exit routine that is called when some error occurred. Parameter fn A function called when some OTA error occurs. An fn specifies the function called when the some error occurred. Its prototype declaration is defined as OTAErrorExit_ft . typedef std :: function < void ( uint8_t error) > OTAErrorExit_ft Parameter error Error code of OTA. It is defined in the Updater class or the Update class of the Arduino core for each platform. onOTAProgress \u00b6 void onOTAProgress(OTAProgressExit_ft fn) Register the exit routine that is called during the OTA progress. Parameter fn A function called during the OTA progress. An fn specifies the function called during the OTA progress. Its prototype declaration is defined as OTAProgressExit_ft . typedef std :: function < void ( unsigned int amount, unsigned int size) > OTAProgressExit_ft Parameters amount Total amount of bytes received. size Block size of current send. onOTAStart \u00b6 void onOTAStart(OTAStartExit_ft fn) Register the on-start exit routine that is called only once when the OTA has been started. Parameter fn A function called at the OTA start. An fn specifies the function called when the OTA starts. Its prototype declaration is defined as OTAStartExit_ft . typedef std :: function < void ( void ) > OTAStartExit_ft 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 . whileCaptivePortal \u00b6 void whileCaptivePortal(WhileCaptivePortalExit_ft fn) Register the function which will call from AutoConnect during a stay in the captive portal. Parameter fn Function called at the captive portal start. An fn specifies the function called while staying in the captive portal. Its prototype declaration is defined as WhileCaptivePortalExit_ft . typedef std :: function < bool ( void ) > WhileCaptivePortalExit_ft Return value true Continues captive portal handling. false Cancel the captive portal. AutoConnect::begin function will return with a false. Equivalent to the WebServer::handleClient function on the ESP32 platform. \u21a9","title":"AutoConnect API"},{"location":"api.html#include-headers","text":"","title":" Include headers"},{"location":"api.html#autoconnecth","text":"#include <AutoConnect.h>","title":"AutoConnect.h"},{"location":"api.html#defined-macros","text":"They contain in AutoConnectDefs.h . #define AC_USE_SPIFFS // Use SPIFFS for the file system on the onboard flash, assumes LittleFS if not defined. #define AC_DEBUG // Monitor message output activation #define AC_DEBUG_PORT Serial // Default message output device #define AUTOCONNECT_AP_IP 0x011CD9AC // Default SoftAP IP #define AUTOCONNECT_AP_GW 0x011CD9AC // 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_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_STARTUPTIME 30 // Default waiting time[s] for after reset #define AUTOCONNECT_USE_JSON // Allow AutoConnect elements to be handled by JSON format #define AUTOCONNECT_USE_UPDATE // Indicator of whether to use the AutoConnectUpdate feature. #define AUTOCONNECT_UPDATE_PORT 8000 // Available HTTP port number for the update #define AUTOCONNECT_UPDATE_TIMEOUT 8000 // HTTP client timeout limitation for the update [ms] #define AUTOCONNECT_TICKER_PORT LED_BUILTIN // Ticker port #endif 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. AutoConnect will call the user added handler to respond to the HTTP request using the ESP8266WebServer::on (WebServer::on for ESP32) funtion. This call will be made from during the handleClient of AutoConnect function. Therefore, in the use case of assigning AutoConnect in this constructor, it is necessary to know the instance of ESP8266WebServer in order to register the request handler. Sketch can use host functions to obtain a reference to an ESP8266WebServer instance that is internally hosted by AutoConnect. 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. 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#append","text":"ESP8266/ESP32 Common AutoConnectAux * append( const String & uri, const String & title) For ESP8266 AutoConnectAux * append( const String & uri, const String & title, ESP8266WebServer :: THandlerFunction handler) For ESP32 AutoConnectAux * append( const String & uri, const String & title, WebServer :: THandlerFunction handler) Creates an AutoConnectAux dynamically with the specified URI and integrates it into the menu. Calls with a request handler parameter can use this function as menu registration for a legacy page of ESP8266WebServer/WebServer. If the handler parameter specified, also it will register the request handler for the ESP8266WebServer/WebServer. AutoConnect manages the menu items using a sequence list, and this function always adds the item to the end of the list. Therefore, the order of the menu items is the additional order. Returns the pointer to created AutoConnectAux instance, the nullptr if an AutoConnectAux with the same URI already exists. Parameter uri A string of the URI. title Title for menu item. handler Request handler function as type of ESP8266WebServer::THandlerFunction / WebServer::THandlerFunction . Return value A Pointer to a created AutoConnectAux instance. An instance of ESP8266WebServer/WebServer is needed The WebServer must have instantiated for calling with a request handler parameter. AutoConnect can instantiate and host a WebServer internally, but in that case, the point in time to call the append function with a request handler parameter must be after AutoConnect::begin.","title":" append"},{"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 AutoConnect configuration settings. 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#detach","text":"bool detach( const String & uri) Detach the AutoConnectAux with the specified URI from the management of AutoConnect. An unmanaged AutoConnectAux will no longer appear in menu items, and its page handler will no longer respond even if the URI is accessed directly. Parameter uri URI of AutoConnectAux to be detached. Return value true Successfully detached. false An AutoConnectAux with the specified URI does not exist. If the request handler registered in the detaching AutoConnectAux is for a legacy page of the ESP8266WebServer/WebServer, the URI is still valid after detaching. AutoConnect does not delete the request handler registered to ESP8266WebServer/WebServer with the on function. (It cannot be removed) Deleting the AutoConnectAux If the AutoConnectAux to detach was added by AutoConnect::append , it will be automatically removed and freed from memory.","title":" detach"},{"location":"api.html#disablemenu","text":"void disableMenu( const uint16_t items) Disable the AutoConnect menu items specified by the items parameter with logical OR value using AC_MENUITEM_t constant. This function only works for AutoConnect primary menu items. It has no effect on disable for AutoConnectAux items. To disable the items by AutoConnectAux, use the AutoConnectAux::menu function. Parameter items Specify the combined value of AC_MENUITEM_t of the items deleting from the AutoConnect menu. It provides the value calculated from the logical OR by the AC_MENUITEM_t value of each item. Refer to the enableMenu about AC_MENUITEM_t.","title":" disableMenu"},{"location":"api.html#enablemenu","text":"void enableMenu( const uint16_t items) Enable the AutoConnect menu items specified by the items parameter with logical OR value using AC_MENUITEM_t constant. This function only works for AutoConnect primary menu items. It has no effect on enable for AutoConnectAux items. To enable the items by AutoConnectAux, use the AutoConnectAux::menu function. Parameter items Specify the combined value of AC_MENUITEM_t of the items applying to the AutoConnect menu. It provides the value calculated from the logical OR by the AC_MENUITEM_t value of each item applied as a menu. AC_MENUITEM_t is enumeration type to identify each menu item and it has the below values. AC_MENUITEM_CONFIGNEW : Configure new AP AC_MENUITEM_OPENSSIDS : Open SSIDs AC_MENUITEM_DISCONNECT : Disconnect AC_MENUITEM_RESET : Reset... AC_MENUITEM_HOME : HOME AC_MENUITEM_DEVINFO : Device statistics as AutoConnect root page It is added, not replaced. The initial configuration of the AutoConnect menu items: AC_MENUITEM_CONFIGNEW | AC_MENUITEM_OPENSSIDS | AC_MENUITEM_DISCONNECT | AC_MENUITEM_RESET | AC_MENUITEM_HOME The enableMenu function adds an indication of the specified items to the current. Therefore, use the disableMenu to remove the specified item from the initial menu.","title":" enableMenu"},{"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#geteepromusedsize","text":"uint16_t getEEPROMUsedSize( void ) Returns the total amount of memory required to hold the AutoConnect credentials and any custom configuration settings stored in EEPROM. The Sketch that writes its own custom data to the EEPROM must call EEPROM.begin with this value. Return value Total amount size of saved AutoConnect credentials and custom data. The getEEPROMUsedSize is available for only ESP8266 use It is available for only ESP8266 use and will return 0 when used with ESP32.","title":" getEEPROMUsedSize"},{"location":"api.html#handleclient","text":"void handleClient( void ) Process the AutoConnect menu interface. The ESP8266WebServer::handleClient 1 function hosted by AutoConnect is also called from within AutoConnect to handle the request handlers contained in Sketch. Enhanced AutoConnect::handleClient The handleClient function enhanced since AutoConnect 1.2.0 can start the captive portal according to the WiFi connection status. By properly specifying AutoConnectConfig:: retainPortal and AutoConnectConfig:: autoRise , when handleClient detects WiFi disconnection, it shifts WiFi mode to WIFI_AP_STA and starts the DNS server together with SoftAP dynamically. Then trapping for incoming HTTP requests from client devices will be started by AutoConnect. Thus it will open the captive portal behind the execution of the sketch loop() function. The captive portal launched by enhanced handleClient does not interfere with sketch execution except waiting for the result of WiFi.begin. Also, AutoConnectConfig:: autoReconnect has improved. The Sketch can specify the AutoConnectConfig:: reconnectInterval to continue retrying the reconnection with enhanced handleClient.","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 following 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#onconnect","text":"void onConnect(ConnectExit_ft fn) Register the function which will call from AutoConnect at the WiFi connection established. Parameter fn A function called at the WiFi connected. An fn specifies the function called when the WiFi connected. Its prototype declaration is defined as ConnectExit_ft . typedef std :: function < void (IPaddress & localIP) > ConnectExit_ft Parameter localIP An IP address of the ESP module as STA.","title":" onConnect"},{"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 A 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#onotaend","text":"void onOTAEnd(OTAEndExit_ft fn) Register the on-end exit routine that is called only once when the OTA is finished. Parameter fn A function called when the OTA has been finished. An fn specifies the function called when the OTA has been finished. Its prototype declaration is defined as OTAEndExit_ft . typedef std :: function < void ( void ) > OTAEndExit_ft","title":" onOTAEnd"},{"location":"api.html#onotaerror","text":"void onOTAError(OTAErrorExit_ft fn) Register the exit routine that is called when some error occurred. Parameter fn A function called when some OTA error occurs. An fn specifies the function called when the some error occurred. Its prototype declaration is defined as OTAErrorExit_ft . typedef std :: function < void ( uint8_t error) > OTAErrorExit_ft Parameter error Error code of OTA. It is defined in the Updater class or the Update class of the Arduino core for each platform.","title":" onOTAError"},{"location":"api.html#onotaprogress","text":"void onOTAProgress(OTAProgressExit_ft fn) Register the exit routine that is called during the OTA progress. Parameter fn A function called during the OTA progress. An fn specifies the function called during the OTA progress. Its prototype declaration is defined as OTAProgressExit_ft . typedef std :: function < void ( unsigned int amount, unsigned int size) > OTAProgressExit_ft Parameters amount Total amount of bytes received. size Block size of current send.","title":" onOTAProgress"},{"location":"api.html#onotastart","text":"void onOTAStart(OTAStartExit_ft fn) Register the on-start exit routine that is called only once when the OTA has been started. Parameter fn A function called at the OTA start. An fn specifies the function called when the OTA starts. Its prototype declaration is defined as OTAStartExit_ft . typedef std :: function < void ( void ) > OTAStartExit_ft","title":" onOTAStart"},{"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":"api.html#whilecaptiveportal","text":"void whileCaptivePortal(WhileCaptivePortalExit_ft fn) Register the function which will call from AutoConnect during a stay in the captive portal. Parameter fn Function called at the captive portal start. An fn specifies the function called while staying in the captive portal. Its prototype declaration is defined as WhileCaptivePortalExit_ft . typedef std :: function < bool ( void ) > WhileCaptivePortalExit_ft Return value true Continues captive portal handling. false Cancel the captive portal. AutoConnect::begin function will return with a false. Equivalent to the WebServer::handleClient function on the ESP32 platform. \u21a9","title":" whileCaptivePortal"},{"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(), const responsive = true) 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. responsive Specifies whether to make HTTP response or not. Public member functions \u00b6 operator [ ] \u00b6 AutoConnectElement & operator []( const char * name) AutoConnectElement & operator []( const __FlashStringHelper * name) 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<std::reference_wrapper<AutoConnectElement>> . authentication \u00b6 void authentication( const AC_AUTH_t auth) Set to require authentication with access to a page. When you access a page that requires authentication, HTTP authentication will be performed according to the scheme specified with the auth parameter. Parameters auth Specifies authentication scheme with the following enumeration value. AC_AUTH_BASIC : Basic scheme. AC_AUTH_DIGEST : Digest scheme. content \u00b6 size_t content( void ) Returns the number of AutoConnectElements the AutoConnectAux contains. Return value A number of the registered AutoConnectElements. 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 char * name) AutoConnectElement * getElement( const __FlashStringHelper * 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 Specifies 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. redirect \u00b6 void redirect( const char * url) Generate a Location header field with the specified url and responds with a 302 response code to the client. This function is intended to be used from within the Custom Web Page handler. If the AutoConnectAux is going to redirect to another page without responding with page content, declare the responsive argument false in the AutoConnectAux constructor . With this construction, AutoConnectAux will not respond to HTTP responses. The redirect function can be useful in this situation to respond to a 302 redirect. Parameter url Specifies the URL to redirect a page to. 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(), const responsive = true) 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. responsive Specifies whether to make HTTP response or not.","title":"AutoConnectAux"},{"location":"apiaux.html#public-member-functions","text":"","title":" Public member functions"},{"location":"apiaux.html#operator","text":"AutoConnectElement & operator []( const char * name) AutoConnectElement & operator []( const __FlashStringHelper * name) 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<std::reference_wrapper<AutoConnectElement>> .","title":" add"},{"location":"apiaux.html#authentication","text":"void authentication( const AC_AUTH_t auth) Set to require authentication with access to a page. When you access a page that requires authentication, HTTP authentication will be performed according to the scheme specified with the auth parameter. Parameters auth Specifies authentication scheme with the following enumeration value. AC_AUTH_BASIC : Basic scheme. AC_AUTH_DIGEST : Digest scheme.","title":" authentication"},{"location":"apiaux.html#content","text":"size_t content( void ) Returns the number of AutoConnectElements the AutoConnectAux contains. Return value A number of the registered AutoConnectElements.","title":" content"},{"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 char * name) AutoConnectElement * getElement( const __FlashStringHelper * 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 Specifies 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#redirect","text":"void redirect( const char * url) Generate a Location header field with the specified url and responds with a 302 response code to the client. This function is intended to be used from within the Custom Web Page handler. If the AutoConnectAux is going to redirect to another page without responding with page content, declare the responsive argument false in the AutoConnectAux constructor . With this construction, AutoConnectAux will not respond to HTTP responses. The redirect function can be useful in this situation to respond to a 302 redirect. Parameter url Specifies the URL to redirect a page to.","title":" redirect"},{"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 SoftAP. 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 auth \u00b6 Apply HTTP authentication with the AutoConnect web page. This This setting allows the Sketch to authenticate with \"BASIC\" or \"DIGEST\" scheme. It is given as an enumeration value of AC_AUTH_t that indicates the authentication scheme. This setting determines the default scheme for HTTP authentication with AutoConnect. When the AutoConnectConfig::authScope is AC_AUTHSCOPE_PARTIAL , each AutoConnectAux authentication scheme has priority. Type AC_AUTH_t Value AC_AUTH_NONE No authentication. This is the default. AC_AUTH_DIGEST Use the digest scheme . AC_AUTH_BASIC Use the basic scheme . authScope \u00b6 Specifies the authentication scope of AutoConnect Web pages. The Sketch will be able to expand or narrow the range of authentication by this setting, which can be either as AC_AUTHSCOPE_t enumeration value. Type AC_AUTHSCOPE_t Value AC_AUTHSCOPE_AUX Require authentication to access for all custom Web pages, excepting AutoConnect's pages. This is the Default. AC_AUTHSCOPE_PARTIAL Authenticate only specific custom Web pages which are specified by AutoConnectAux::authentication function or JSON description. AC_AUTHSCOPE_PORTAL Require authentication to access for all AutoConnect's pages, including custom Web pages. This setting is available only when AutoConnectConfig::auth is other than AC_AUTH_NONE . Ignored if it is AC_AUTH_NONE. Also, the authScope setting has another bit that indicates to allow authentication in the captive portal state. Its enum value cannot be used alone and is always for qualifying the above three enum values. Value AC_AUTHSCOPE_WITHCP Allow authentication with the captive portal state. This value cannot be used alone to declare an authentication scope. It indicates to enable authentication in the captive portal by the logical OR operator with one of the AC_AUTHSCOPE_t values above. 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 credentials matches the BSSID (or SSID) detected by the network scan. Either BSSID or SSID to aim the access point Whether or not it points to the target access point is determined by matching the SSID or BSSID . The default key to collate is BSSID . The BSSID is usually fixed to the MAC address unique to its access point device, but when using some mobile hotspots, the BSSID may change even for the same access point. If you operate inconvenience in aiming at the access point by BSSID, you can change the collation key to SSID by uncomment the below line in AutoConnectDefs.h : #define AUTOCONNECT_APKEY_SSID If AUTOCONNECT_APKEY_SSID macro is defined when the library is compiled, the access points are collated by the SSID. 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 1 st -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_ALWAYS Save specified SSID and Password always even if a specified credential has been rejected. AC_SAVECREDENTIAL_NEVER The credential no saved. beginTimeout \u00b6 Specify the limit time to attempt WiFi connection to the access point. AutoConnect uses this value to abort the connection attempt at WiFi.begin . Its actual value specified in milliseconds unit. The default value is AUTOCONNECT_TIMEOUT defined in AutoConnectDefs.h and the initial value is 30 seconds. Type unsigned long 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 1 st -WiFi.begin and start the captive portal. If this option is enabled, the module will be in AP_STA mode and the captive portal. The evaluation rank of this parameter is lower than the AutoConnectConfig::autoRise . Even if immediateStart is true, the captive portal will not launch if autoRise is false. Type bool Value true Start the captive portal with AutoConnect::begin . false Enable the 1 st -WiFi.begin and it will start captive portal when connection failed. This is default. menuItems \u00b6 Configure applying items of the AutoConnect menu . You can arbitrarily combine valid menus by coordinating the menuItems value. Type uint16_t It provides the combined AC_MENUITEM_t value of the item to apply to the AutoConnect menu. Specify the value calculated from the logical OR by the AC_MENUITEM_t value of each item applied as a menu. It affects not only disappear the items from the menu also invalidates the URI they have. As a consequence, even if it accesses the URL directly will occur a 404 error. The default value is logical OR of AC_MENUITEM_CONFIGNEW, AC_MENUITEM_OPENSSIDS, AC_MENUITEM_DISCONNECT, AC_MENUITEM_RESET, AC_MENUITEM_UPDATE and AC_MENUITEM_HOME. Value AC_MENUITEM_NONE No assign items except for the AutoConnectAux page item. AC_MENUITEM_CONFIGNEW Appends Configure new AP item. AC_MENUITEM_OPENSSIDS Appends Open SSIDs item. AC_MENUITEM_DISCONNECT Appends Disconnect item. AC_MENUITEM_RESET Appends Reset... item. AC_MENUITEM_UPDATE Appends Update item. AC_MENUITEM_HOME Appends HOME item. AC_MENUITEM_DEVINFO Appends the Device info item which links to AutoConnect statistics page . How to specify the value of the menu items An menuItems accepts the logical OR of AC_MENUITEM_t type value. For example, to enable only Open SSIDs and HOME items, specify: AutoConnectConfig config; config.menuItems = AC_MENUITEM_OPENSSIDS | AC_MENUITEM_HOME; However, even if you specify like the above, the AutoConnectAux page items still display on the menu. To remove the AutoConnectAux items, use the AutoConnectAux::menu function. minRSSI \u00b6 Specify the lower limit of the WiFi signal strength allowed to use as an access point. This value should be greater than -120 as RSSI. Generally, a data link will not be established unless it exceeds -90 dBm. Also, packet transmission is not reliable below -70 dBm to -80 dBm. Type int16_t The default value is -120 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 ota \u00b6 Specifies to import the built-in OTA update class into the Sketch. When this option is enabled, an Update item will appear in the AutoConnect menu, and the OTA update via Web browser will be automatically embedded to the Sketch. Type AC_OTA_t Value AC_OTA_EXTRA AutoConnect does not import AutoConnectOTA. This is the default. AC_OTA_BUILTIN Specifies to include AutoConnectOTA in the Sketch. otaExtraCaption \u00b6 Specifies the caption to be displayed as an extra on the OTA update screen . The extra caption you specified will be displayed in the upper right corner of the OTA update screen. Also, you can only specify the caption string, and you cannot specify the style individually. An extra caption will draw up with the default style of AutoConnect. Type const char* An extra caption string pointer. password \u00b6 Set the password for authentication. Type String The default value is same as psk . 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. preserveAPMode \u00b6 Specifies starting the STA while maintaining the state of the SoftAP mode in the AutoConnect::begin . This setting only applies when the AutoConnectConfig::autoRise is false. Type bool Value true AutoConnect::begin keeps AP mode. false AutoConnect::begin will stop SoftAP at the beginning of the process. Note that this option is not for starting the SoftAP forcibly in AutoConnect::begin and only keeps AP mode, SoftAP initiation is left to the Sketch. principle \u00b6 Specify the connection order will attempt to connect to one of the highest RSSI values among multiple available access points. It is given as an enumeration value of AC_PRINCIPLE_t indicating. Type AC_PRINCIPLE_t Value AC_PRINCIPLE_RECENT Attempts to connect in the order of the saved credentials entries. The entry order is generally a time series connected in the past. AC_PRINCIPLE_RSSI Attempts to connect to one of the highest RSSI values among multiple available access points. psk \u00b6 Sets password for SoftAP. The length should be from 8 to up to 63. The default value is 12345678 . Type String reconnectInterval \u00b6 Specifies the number of units for interval time to attempt automatic reconnection when AutoConnectConfig::autoReconnect is enabled. This value is specified by the number of unit times from 0 to 255, and one unit time is macro-defined as AUTOCONNECT_UNITTIME in AutoConnectDefs.h file of library source code, and its initial value is 30[s]. Type uint8_t WiFi connection retry is repeated inside AutoConnect::handleClient after the number of seconds that the reconnectInterval value is multiplied by AUTOCONNECT_UNITTIME from the previous attempt. Then, when the connection with one of the saved credentials is established, the automatic reconnection will stop. And while AutoConnectConfig::autoReconnect is enabled, if the WiFi connection is lost, it will start to auto-reconnect again inside AutoConnect::handleClient . If 0 is specified for the reconnectInterval, background reconnection attempt repeatedly will not be made, and only once at the 1 st -WiFi.begin failure in AutoConnect::begin . (Only when AutoConnectConfig::autoReconnect is enabled) The default value is 0. AUTOCONNECT_UNITTIME AUTOCONNECT_UNITTIME as macro defined in AutoConnectDefs.h file of library source code as the below: // Number of seconds in uint time [s] #ifndef AUTOCONNECT_UNITTIME #define AUTOCONNECT_UNITTIME 30 #endif 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 uptime \u00b6 Specifies the waiting time for the module to reboot. Type int The default value is AUTOCONNECT_TIMEOUT/1000. username \u00b6 Set the username for authentication. Type String The default value is same as apid . AutoConnectConfig Initial values \u00b6 Public member Data type Initial value definition Defined symbol 1 apid String esp8266ap esp32ap AUTOCONNECT_APID apip IPAddress 172.217.28.1 AUTOCONNECT_AP_IP auth AC_AUTH_t AC_AUTH_NONE AC_AUTH_NONE AC_AUTH_DIGEST AC_AUTH_BASIC authScope AC_AUTHSCOPE_t AC_AUTHSCOPE_AUX AC_AUTHSCOPE_PARTIAL AC_AUTHSCOPE_AUX AC_AUTHSCOPE_AC AC_AUTHSCOPE_PORTAL AC_AUTHSCOPE_WITHCP autoReconnect bool false autoReset bool true autoRise bool true autoSave AC_SAVECREDENTIAL_t AC_SAVECREDENTIAL_AUTO AC_SAVECREDENTIAL_AUTO AC_SAVECREDENTIAL_ALWAYS AC_SAVECREDENTIAL_NEVER beginTimeout unsinged long 30000UL AUTOCONNECT_TIMEOUT bootUri AC_ONBOOTURI_t AC_ONBOOTURI_ROOT AC_ONBOOTURI_ROOT AC_ONBOOTURI_HOME boundaryOffset uint16_t 0 AC_IDENTIFIER_OFFSET channel uint8_t 1 AUTOCONNECT_AP_CH dns1 IPAddress 0UL dns2 IPAddress 0UL gateway IPAddress 172.217.28.1 AUTOCONNECT_AP_GW hidden uint8_t 0 homeUri String / AUTOCONNECT_HOMEURI hostName String NULL immediateStart bool false menuItems uint16_t AC_MENUITEM_CONFIGNEW + AC_MENUITEM_OPENSSIDS + AC_MENUITEM_DISCONNECT + AC_MENUITEM_RESET + AC_MENUITEM_UPDATE + AC_MENUITEM_HOME AC_MENUITEM_CONFIGNEW AC_MENUITEM_OPENSSIDS AC_MENUITEM_DISCONNECT AC_MENUITEM_RESET AC_MENUITEM_UPDATE AC_MENUITEM_HOME minRSSI int16_t -120 AUTOCONNECT_MIN_RSSI netmask IPAddress 172.217.28.1 AUTOCONNECT_AP_NM ota AC_OTA_t AC_OTA_EXTRA AC_OTA_EXTRA AC_OTA_BUILTIN otaExtraCaption const char* nullptr password String Follow psk portalTimeout unsigned long 0UL AUTOCONNECT_CAPTIVEPORTAL_TIMEOUT preserveAPMode bool false principle AC_PRINCIPLE_t AC_PRINCIPLE_RECENT AC_PRINCIPLE_RECENT AC_PRINCIPLE_RSSI psk String 12345678 AUTOCONNECT_PSK reconnectInterval uint8_t 0 retainPortal bool false staGateway IPAddress 0UL staip IPAddress 0UL staNetmask IPAddress 0UL ticker bool false tickerOn uint8_t LOW AUTOCONNECT_UPDATE_LEDON tickerPort uint8_t LED_BUILTIN AUTOCONNECT_TICKER_PORT title String AutoConnect AUTOCONNECT_MENU_TITLE uptime int AUTOCONNECT_TIMEOUT/1000 AUTOCONNECT_STARTUPTIME username String Follow apid 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.boundaryOffset = 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 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 Those symbols are defined in AutoConnectDefs.h . \u21a9","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 SoftAP. 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#auth","text":"Apply HTTP authentication with the AutoConnect web page. This This setting allows the Sketch to authenticate with \"BASIC\" or \"DIGEST\" scheme. It is given as an enumeration value of AC_AUTH_t that indicates the authentication scheme. This setting determines the default scheme for HTTP authentication with AutoConnect. When the AutoConnectConfig::authScope is AC_AUTHSCOPE_PARTIAL , each AutoConnectAux authentication scheme has priority. Type AC_AUTH_t Value AC_AUTH_NONE No authentication. This is the default. AC_AUTH_DIGEST Use the digest scheme . AC_AUTH_BASIC Use the basic scheme .","title":" auth"},{"location":"apiconfig.html#authscope","text":"Specifies the authentication scope of AutoConnect Web pages. The Sketch will be able to expand or narrow the range of authentication by this setting, which can be either as AC_AUTHSCOPE_t enumeration value. Type AC_AUTHSCOPE_t Value AC_AUTHSCOPE_AUX Require authentication to access for all custom Web pages, excepting AutoConnect's pages. This is the Default. AC_AUTHSCOPE_PARTIAL Authenticate only specific custom Web pages which are specified by AutoConnectAux::authentication function or JSON description. AC_AUTHSCOPE_PORTAL Require authentication to access for all AutoConnect's pages, including custom Web pages. This setting is available only when AutoConnectConfig::auth is other than AC_AUTH_NONE . Ignored if it is AC_AUTH_NONE. Also, the authScope setting has another bit that indicates to allow authentication in the captive portal state. Its enum value cannot be used alone and is always for qualifying the above three enum values. Value AC_AUTHSCOPE_WITHCP Allow authentication with the captive portal state. This value cannot be used alone to declare an authentication scope. It indicates to enable authentication in the captive portal by the logical OR operator with one of the AC_AUTHSCOPE_t values above.","title":" authScope"},{"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 credentials matches the BSSID (or SSID) detected by the network scan. Either BSSID or SSID to aim the access point Whether or not it points to the target access point is determined by matching the SSID or BSSID . The default key to collate is BSSID . The BSSID is usually fixed to the MAC address unique to its access point device, but when using some mobile hotspots, the BSSID may change even for the same access point. If you operate inconvenience in aiming at the access point by BSSID, you can change the collation key to SSID by uncomment the below line in AutoConnectDefs.h : #define AUTOCONNECT_APKEY_SSID If AUTOCONNECT_APKEY_SSID macro is defined when the library is compiled, the access points are collated by the SSID.","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 1 st -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_ALWAYS Save specified SSID and Password always even if a specified credential has been rejected. AC_SAVECREDENTIAL_NEVER The credential no saved.","title":" autoSave"},{"location":"apiconfig.html#begintimeout","text":"Specify the limit time to attempt WiFi connection to the access point. AutoConnect uses this value to abort the connection attempt at WiFi.begin . Its actual value specified in milliseconds unit. The default value is AUTOCONNECT_TIMEOUT defined in AutoConnectDefs.h and the initial value is 30 seconds. Type unsigned long","title":" beginTimeout"},{"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 1 st -WiFi.begin and start the captive portal. If this option is enabled, the module will be in AP_STA mode and the captive portal. The evaluation rank of this parameter is lower than the AutoConnectConfig::autoRise . Even if immediateStart is true, the captive portal will not launch if autoRise is false. Type bool Value true Start the captive portal with AutoConnect::begin . false Enable the 1 st -WiFi.begin and it will start captive portal when connection failed. This is default.","title":" immediateStart"},{"location":"apiconfig.html#menuitems","text":"Configure applying items of the AutoConnect menu . You can arbitrarily combine valid menus by coordinating the menuItems value. Type uint16_t It provides the combined AC_MENUITEM_t value of the item to apply to the AutoConnect menu. Specify the value calculated from the logical OR by the AC_MENUITEM_t value of each item applied as a menu. It affects not only disappear the items from the menu also invalidates the URI they have. As a consequence, even if it accesses the URL directly will occur a 404 error. The default value is logical OR of AC_MENUITEM_CONFIGNEW, AC_MENUITEM_OPENSSIDS, AC_MENUITEM_DISCONNECT, AC_MENUITEM_RESET, AC_MENUITEM_UPDATE and AC_MENUITEM_HOME. Value AC_MENUITEM_NONE No assign items except for the AutoConnectAux page item. AC_MENUITEM_CONFIGNEW Appends Configure new AP item. AC_MENUITEM_OPENSSIDS Appends Open SSIDs item. AC_MENUITEM_DISCONNECT Appends Disconnect item. AC_MENUITEM_RESET Appends Reset... item. AC_MENUITEM_UPDATE Appends Update item. AC_MENUITEM_HOME Appends HOME item. AC_MENUITEM_DEVINFO Appends the Device info item which links to AutoConnect statistics page . How to specify the value of the menu items An menuItems accepts the logical OR of AC_MENUITEM_t type value. For example, to enable only Open SSIDs and HOME items, specify: AutoConnectConfig config; config.menuItems = AC_MENUITEM_OPENSSIDS | AC_MENUITEM_HOME; However, even if you specify like the above, the AutoConnectAux page items still display on the menu. To remove the AutoConnectAux items, use the AutoConnectAux::menu function.","title":" menuItems"},{"location":"apiconfig.html#minrssi","text":"Specify the lower limit of the WiFi signal strength allowed to use as an access point. This value should be greater than -120 as RSSI. Generally, a data link will not be established unless it exceeds -90 dBm. Also, packet transmission is not reliable below -70 dBm to -80 dBm. Type int16_t The default value is -120","title":" minRSSI"},{"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#ota","text":"Specifies to import the built-in OTA update class into the Sketch. When this option is enabled, an Update item will appear in the AutoConnect menu, and the OTA update via Web browser will be automatically embedded to the Sketch. Type AC_OTA_t Value AC_OTA_EXTRA AutoConnect does not import AutoConnectOTA. This is the default. AC_OTA_BUILTIN Specifies to include AutoConnectOTA in the Sketch.","title":" ota"},{"location":"apiconfig.html#otaextracaption","text":"Specifies the caption to be displayed as an extra on the OTA update screen . The extra caption you specified will be displayed in the upper right corner of the OTA update screen. Also, you can only specify the caption string, and you cannot specify the style individually. An extra caption will draw up with the default style of AutoConnect. Type const char* An extra caption string pointer.","title":" otaExtraCaption"},{"location":"apiconfig.html#password","text":"Set the password for authentication. Type String The default value is same as psk .","title":" password"},{"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#preserveapmode","text":"Specifies starting the STA while maintaining the state of the SoftAP mode in the AutoConnect::begin . This setting only applies when the AutoConnectConfig::autoRise is false. Type bool Value true AutoConnect::begin keeps AP mode. false AutoConnect::begin will stop SoftAP at the beginning of the process. Note that this option is not for starting the SoftAP forcibly in AutoConnect::begin and only keeps AP mode, SoftAP initiation is left to the Sketch.","title":" preserveAPMode"},{"location":"apiconfig.html#principle","text":"Specify the connection order will attempt to connect to one of the highest RSSI values among multiple available access points. It is given as an enumeration value of AC_PRINCIPLE_t indicating. Type AC_PRINCIPLE_t Value AC_PRINCIPLE_RECENT Attempts to connect in the order of the saved credentials entries. The entry order is generally a time series connected in the past. AC_PRINCIPLE_RSSI Attempts to connect to one of the highest RSSI values among multiple available access points.","title":" principle"},{"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#reconnectinterval","text":"Specifies the number of units for interval time to attempt automatic reconnection when AutoConnectConfig::autoReconnect is enabled. This value is specified by the number of unit times from 0 to 255, and one unit time is macro-defined as AUTOCONNECT_UNITTIME in AutoConnectDefs.h file of library source code, and its initial value is 30[s]. Type uint8_t WiFi connection retry is repeated inside AutoConnect::handleClient after the number of seconds that the reconnectInterval value is multiplied by AUTOCONNECT_UNITTIME from the previous attempt. Then, when the connection with one of the saved credentials is established, the automatic reconnection will stop. And while AutoConnectConfig::autoReconnect is enabled, if the WiFi connection is lost, it will start to auto-reconnect again inside AutoConnect::handleClient . If 0 is specified for the reconnectInterval, background reconnection attempt repeatedly will not be made, and only once at the 1 st -WiFi.begin failure in AutoConnect::begin . (Only when AutoConnectConfig::autoReconnect is enabled) The default value is 0. AUTOCONNECT_UNITTIME AUTOCONNECT_UNITTIME as macro defined in AutoConnectDefs.h file of library source code as the below: // Number of seconds in uint time [s] #ifndef AUTOCONNECT_UNITTIME #define AUTOCONNECT_UNITTIME 30 #endif","title":" reconnectInterval"},{"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#uptime","text":"Specifies the waiting time for the module to reboot. Type int The default value is AUTOCONNECT_TIMEOUT/1000.","title":" uptime"},{"location":"apiconfig.html#username","text":"Set the username for authentication. Type String The default value is same as apid .","title":" username"},{"location":"apiconfig.html#autoconnectconfig-initial-values","text":"Public member Data type Initial value definition Defined symbol 1 apid String esp8266ap esp32ap AUTOCONNECT_APID apip IPAddress 172.217.28.1 AUTOCONNECT_AP_IP auth AC_AUTH_t AC_AUTH_NONE AC_AUTH_NONE AC_AUTH_DIGEST AC_AUTH_BASIC authScope AC_AUTHSCOPE_t AC_AUTHSCOPE_AUX AC_AUTHSCOPE_PARTIAL AC_AUTHSCOPE_AUX AC_AUTHSCOPE_AC AC_AUTHSCOPE_PORTAL AC_AUTHSCOPE_WITHCP autoReconnect bool false autoReset bool true autoRise bool true autoSave AC_SAVECREDENTIAL_t AC_SAVECREDENTIAL_AUTO AC_SAVECREDENTIAL_AUTO AC_SAVECREDENTIAL_ALWAYS AC_SAVECREDENTIAL_NEVER beginTimeout unsinged long 30000UL AUTOCONNECT_TIMEOUT bootUri AC_ONBOOTURI_t AC_ONBOOTURI_ROOT AC_ONBOOTURI_ROOT AC_ONBOOTURI_HOME boundaryOffset uint16_t 0 AC_IDENTIFIER_OFFSET channel uint8_t 1 AUTOCONNECT_AP_CH dns1 IPAddress 0UL dns2 IPAddress 0UL gateway IPAddress 172.217.28.1 AUTOCONNECT_AP_GW hidden uint8_t 0 homeUri String / AUTOCONNECT_HOMEURI hostName String NULL immediateStart bool false menuItems uint16_t AC_MENUITEM_CONFIGNEW + AC_MENUITEM_OPENSSIDS + AC_MENUITEM_DISCONNECT + AC_MENUITEM_RESET + AC_MENUITEM_UPDATE + AC_MENUITEM_HOME AC_MENUITEM_CONFIGNEW AC_MENUITEM_OPENSSIDS AC_MENUITEM_DISCONNECT AC_MENUITEM_RESET AC_MENUITEM_UPDATE AC_MENUITEM_HOME minRSSI int16_t -120 AUTOCONNECT_MIN_RSSI netmask IPAddress 172.217.28.1 AUTOCONNECT_AP_NM ota AC_OTA_t AC_OTA_EXTRA AC_OTA_EXTRA AC_OTA_BUILTIN otaExtraCaption const char* nullptr password String Follow psk portalTimeout unsigned long 0UL AUTOCONNECT_CAPTIVEPORTAL_TIMEOUT preserveAPMode bool false principle AC_PRINCIPLE_t AC_PRINCIPLE_RECENT AC_PRINCIPLE_RECENT AC_PRINCIPLE_RSSI psk String 12345678 AUTOCONNECT_PSK reconnectInterval uint8_t 0 retainPortal bool false staGateway IPAddress 0UL staip IPAddress 0UL staNetmask IPAddress 0UL ticker bool false tickerOn uint8_t LOW AUTOCONNECT_UPDATE_LEDON tickerPort uint8_t LED_BUILTIN AUTOCONNECT_TICKER_PORT title String AutoConnect AUTOCONNECT_MENU_TITLE uptime int AUTOCONNECT_TIMEOUT/1000 AUTOCONNECT_STARTUPTIME username String Follow apid","title":" AutoConnectConfig Initial values"},{"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.boundaryOffset = 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 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 Those symbols are defined in AutoConnectDefs.h . \u21a9","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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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<T> \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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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, const ACInput_t apply = AC_Input_Text) 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. apply Specifies the type of input that the text box accepts. 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 apply \u00b6 Specifies the type of input that the text box accepts. AutoConnectInput will generate either a < input type = \"text\" > , < input type = \"password\" > , or < input type = \"number\" > tag based on the apply specifying as input type. The input type can be specified the following values in the ACInput_t enumeration type. 1 Type ACInput_t AC_Input_Text : input type=\"text\" AC_Input_Password : input type=\"password\" AC_Input_Number : input type=\"number\" 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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<String> 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. AutoConnectRange \u00b6 Constructor \u00b6 AutoConnectRange( const char * name = \"\" , const int value = 0 , const char * label = \"\" , const int min = 0 , const int max = 0 , const int step = 1 , const ACPosition_t magnify = AC_Void, const ACPosterior_t post = AC_Tag_BR, const char * style = \"\" ) Parameters name The element name. value The initial value in the range. label Label string. min The most negative value within the range of allowed values. max The greatest value in the range of permitted values. step The granularity that the value must adhere to. magnify Specifies the display position of the current value of the range. post Specifies the tag to be output afterward the element. style A style code with CSS format that qualifiers the range slider. 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 range slider and the label are connected by the id attribute. Type String magnify \u00b6 Display position of the current value of the range. Type ACPosition_t AC_Infront : Displays the current value on the left side. AC_Behind : Displays the current value on the right side. AC_Void : No display the current value. This is the default. max \u00b6 The greatest value in the range. Type int min \u00b6 The most negative value within the range. Type int 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> tag. step \u00b6 The granularity that the value must adhere to. Type int style \u00b6 A style code with CSS format that qualifiers the range slider. Type String value \u00b6 Value of the element. It becomes a value attribute of an HTML < input type = \"range\" > tag. A value of range in the custom Web page will be sent with a query string of the form. Type int Public member functions \u00b6 typeOf \u00b6 ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Range 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<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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 `#!html ` 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 ACInput_t does not mind what kind of display effects on the browser. For example, input type=\"number\" has a spin button in Chrome, but has no display effects in iOS Safari. You will see the numeric keypad at inputting the number field with giving the pattern as \\d* . \u21a9 \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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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#ast","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&lt;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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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, const ACInput_t apply = AC_Input_Text) 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. apply Specifies the type of input that the text box accepts.","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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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#apply","text":"Specifies the type of input that the text box accepts. AutoConnectInput will generate either a < input type = \"text\" > , < input type = \"password\" > , or < input type = \"number\" > tag based on the apply specifying as input type. The input type can be specified the following values in the ACInput_t enumeration type. 1 Type ACInput_t AC_Input_Text : input type=\"text\" AC_Input_Password : input type=\"password\" AC_Input_Number : input type=\"number\"","title":" apply"},{"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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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<String>","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 &#91;&nbsp;&#93;"},{"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#autoconnectrange","text":"","title":"AutoConnectRange"},{"location":"apielements.html#constructor_6","text":"AutoConnectRange( const char * name = \"\" , const int value = 0 , const char * label = \"\" , const int min = 0 , const int max = 0 , const int step = 1 , const ACPosition_t magnify = AC_Void, const ACPosterior_t post = AC_Tag_BR, const char * style = \"\" ) Parameters name The element name. value The initial value in the range. label Label string. min The most negative value within the range of allowed values. max The greatest value in the range of permitted values. step The granularity that the value must adhere to. magnify Specifies the display position of the current value of the range. post Specifies the tag to be output afterward the element. style A style code with CSS format that qualifiers the range slider.","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#label_4","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 range slider and the label are connected by the id attribute. Type String","title":" label"},{"location":"apielements.html#magnify","text":"Display position of the current value of the range. Type ACPosition_t AC_Infront : Displays the current value on the left side. AC_Behind : Displays the current value on the right side. AC_Void : No display the current value. This is the default.","title":" magnify"},{"location":"apielements.html#max","text":"The greatest value in the range. Type int","title":" max"},{"location":"apielements.html#min","text":"The most negative value within the range. Type int","title":" min"},{"location":"apielements.html#name_6","text":"The element name. Type String","title":" name"},{"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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> tag.","title":" post"},{"location":"apielements.html#step","text":"The granularity that the value must adhere to. Type int","title":" step"},{"location":"apielements.html#style","text":"A style code with CSS format that qualifiers the range slider. Type String","title":" style"},{"location":"apielements.html#value_6","text":"Value of the element. It becomes a value attribute of an HTML < input type = \"range\" > tag. A value of range in the custom Web page will be sent with a query string of the form. Type int","title":" value"},{"location":"apielements.html#public-member-functions_6","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_6","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Range","title":" typeOf"},{"location":"apielements.html#autoconnectselect","text":"","title":"AutoConnectSelect"},{"location":"apielements.html#constructor_7","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_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#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_7","text":"The element name. Type String","title":" name"},{"location":"apielements.html#label_5","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<String>","title":" options"},{"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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> 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_7","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 &#91;&nbsp;&#93;"},{"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_7","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Select","title":" typeOf"},{"location":"apielements.html#value_7","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_8","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_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#name_8","text":"The element name. Type String","title":" name"},{"location":"apielements.html#value_8","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_8","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_8","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_9","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 `#!html ` 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_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#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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> tag.","title":" post"},{"location":"apielements.html#uri","text":"Destination URI. Type String","title":" uri"},{"location":"apielements.html#value_9","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_9","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_9","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_10","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_10","text":"","title":" Public member variables"},{"location":"apielements.html#enable_10","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_9","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_10","text":"The element name. Type String","title":" name"},{"location":"apielements.html#post_9","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 <br> tag to the end of the element. AC_Tag_P : Include the element in the <p> ~ </p> tag. AC_Tag_DIV : Include the element in the <div> ~ </div> tag.","title":" post"},{"location":"apielements.html#style_1","text":"A style code with CSS format that qualifiers the text. Type String","title":" style"},{"location":"apielements.html#value_10","text":"A content string of the text element. Type String","title":" value"},{"location":"apielements.html#public-member-functions_10","text":"","title":" Public member functions"},{"location":"apielements.html#typeof_10","text":"ACElement_t typeOf( void ) Returns type of AutoConnectElement. Return value AC_Text ACInput_t does not mind what kind of display effects on the browser. For example, input type=\"number\" has a spin button in Chrome, but has no display effects in iOS Safari. You will see the numeric keypad at inputting the number field with giving the pattern as \\d* . \u21a9 \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 <a></a> tag with PNG embedded of the AutoConnect menu hyperlinks. Icon type is specified by the parameter of the macro. BAR_24 Bars icon, 24x24. BAR_32 Bars icon, 32x32. BAR_48 Bars icon, 48x48. COG_16 Cog icon, 16x16. COG_24 Cog icon, 24x24. COG_32 Cog icon, 32x32. Usage String html = \"<html>\" ; html += AUTOCONNECT_LINK(BAR_32); html += \"</html>\" ; server.send( 200 , \"text/html\" , html);","title":"Something extra"},{"location":"apiextra.html#icons","text":"The library presents two PNG icons which can be used to embed a hyperlink to the AutoConnect menu. Bar type Cog type To reference the icon, use the AUTOCONNECT_LINK macro in the Sketch. It expands into the string literal as an HTML <a></a> tag with PNG embedded of the AutoConnect menu hyperlinks. Icon type is specified by the parameter of the macro. BAR_24 Bars icon, 24x24. BAR_32 Bars icon, 32x32. BAR_48 Bars icon, 48x48. COG_16 Cog icon, 16x16. COG_24 Cog icon, 24x24. COG_32 Cog icon, 32x32. Usage String html = \"<html>\" ; html += AUTOCONNECT_LINK(BAR_32); html += \"</html>\" ; server.send( 200 , \"text/html\" , html);","title":" Icons"},{"location":"apiupdate.html","text":"Constructor \u00b6 AutoConnectUpdate \u00b6 AutoConnectUpdate( const String & host, const uint16_t port, const String & uri, const int timeout, const uint8_t ledOn) Parameters host Update server address. Specifies IP address or FQDN. port Specifies HTTP port for the updating process. The default assumes AUTOCONNECT_UPDATE_PORT defined in the AutoConnectDefs.h header file. uri Specifies a URI on the update server that has deployed available binary sketch files. timeout Specifies the maximum response time for the update server. The default assumes AUTOCONNECT_UPDATE_TIMEOUT in the AutoConnectDefs.h header file. ledOn Active signal to light the LED ticker during the update. Specifies HIGH or LOW The AutoConnectUpdate class inherits from the ESP8266HTTPUpdate ( HTTPUpdate for ESP32) class. Public member functions \u00b6 attach \u00b6 void AutoConnectUpdate :: attach(AutoConnect & portal) Attaches the AutoConnectUpdate to the AutoConnect which constitutes the bedrock of the update process. This function creates a dialog page for the update operation as an instance of AutoConnectAux and participates in the AutoConnect menu . Parameter portal Specifies a reference to the AutoConnect instance to attach. disable \u00b6 void AutoConnectUpdate :: disable( const bool activate) Disable the Update item in AutoConnect menu . The AutoConnect::disable function only hides the Update item from the menu, and the AutoConnectUpdate class is still active with the parameter condition. You can use the AutoConnectUpdate::enable function to appear it again in the menu. Parameter activate If specified the true then the Update item will be displayed on the AutoConnect menu and OTA update will be available during the WiFi status is WL_CONNECTED. For the false , the OTA update feature is disabled. enable \u00b6 void AutoConnectUpdate :: enable( void ) Makes AutoConnectUpdate class available by incorporating the OTA update function into the AutoConnect menu . In ordinarily, the AutoConnectUpdate class becomes available by just calling the AutoConnectUpdate::attach function. handleUpdate \u00b6 void AutoConnectUpdate :: handleUpdate( void ) Performs the update process. This function is called by AutoConnect::handleClient when AutoConnectUpdate is enabled. In many cases, sketches do not need to call this function on purpose. isEnabled \u00b6 bool AutoConnectUpdate :: isEnabled( void ) Returns whether AutoConnectUpdate is enabled. rebootOnUpdate \u00b6 void AutoConnectUpdate :: rebootOnUpdate( bool reboot) Specifies whether or not to automatically restart the module as a result of the successful completion of the update process. Parameter reboot If specified the true then the ESP module will reboot after the updating successfully completed. For the false , The module does not reboot automatically. The uploaded new firmware remains in the updating stage of the flash on the ESP module. The boot process during the next start turn of the module by reset will copy the updated firmware to the actual program area and a new sketch program will start. The default value is true. This function inherits from the ESP8266HTTPUpdate (HTTPUpdate for ESP32) class. setLedPin \u00b6 void AutoConnectUpdate :: setLedPin( int ledPin, uint8_t ledOn) Sets the port and the ON signal level of the externally connected LED that should act as a ticker during the update process. Parameter ledPin Specifies the PIN connected external LED for the ticker. The default assumes AUTOCONNECT_TICKER_PORT defined in the AutoConnectDefs.h header file and it is derived from the board-specific LED_BUILTIN . By default, the AutoConnectUpdate class does not use the ticker for boards without the LED_BUILTIN definition. If you connect the ticker LED externally, you need to specify the PIN using the setLedPin function. ledOn Specifies the the ON signal level of the LED PIN port. It is HIGH or LOW . This function inherits from the ESP8266HTTPUpdate (HTTPUpdate for ESP32) class. status \u00b6 AC_UPDATESTATUS_t AutoConnectUpdate :: status( void ) Returns the update process status transition indicator as an enumerated value of the AC_UPDATESTATUS_t type that indicates the process status of the AutoConnectUpdate class. Return value One of the enumerated values \u200b\u200bindicating the status of the Update class as follows: UPDATE_RESET : Update process ended, need to reset. UPDATE_IDLE : Update process has not started. UPDATE_START : Update process has been started. UPDATE_PROGRESS : Update process has been started. UPDATE_SUCCESS : Update successfully completed. UPDATE_NOAVAIL : No available update. UPDATE_FAIL : Update failed. Public member variables \u00b6 host \u00b6 Update server address. Specifies IP address or FQDN. Type String port \u00b6 HTTP port for the updating process. Type String The default assumes AUTOCONNECT_UPDATE_PORT defined in the AutoConnectDefs.h header file. uri \u00b6 URI on the update server that has deployed available binary sketch files. Type String","title":"AutoConnectUpdate API"},{"location":"apiupdate.html#constructor","text":"","title":" Constructor"},{"location":"apiupdate.html#autoconnectupdate","text":"AutoConnectUpdate( const String & host, const uint16_t port, const String & uri, const int timeout, const uint8_t ledOn) Parameters host Update server address. Specifies IP address or FQDN. port Specifies HTTP port for the updating process. The default assumes AUTOCONNECT_UPDATE_PORT defined in the AutoConnectDefs.h header file. uri Specifies a URI on the update server that has deployed available binary sketch files. timeout Specifies the maximum response time for the update server. The default assumes AUTOCONNECT_UPDATE_TIMEOUT in the AutoConnectDefs.h header file. ledOn Active signal to light the LED ticker during the update. Specifies HIGH or LOW The AutoConnectUpdate class inherits from the ESP8266HTTPUpdate ( HTTPUpdate for ESP32) class.","title":"AutoConnectUpdate"},{"location":"apiupdate.html#public-member-functions","text":"","title":" Public member functions"},{"location":"apiupdate.html#attach","text":"void AutoConnectUpdate :: attach(AutoConnect & portal) Attaches the AutoConnectUpdate to the AutoConnect which constitutes the bedrock of the update process. This function creates a dialog page for the update operation as an instance of AutoConnectAux and participates in the AutoConnect menu . Parameter portal Specifies a reference to the AutoConnect instance to attach.","title":" attach"},{"location":"apiupdate.html#disable","text":"void AutoConnectUpdate :: disable( const bool activate) Disable the Update item in AutoConnect menu . The AutoConnect::disable function only hides the Update item from the menu, and the AutoConnectUpdate class is still active with the parameter condition. You can use the AutoConnectUpdate::enable function to appear it again in the menu. Parameter activate If specified the true then the Update item will be displayed on the AutoConnect menu and OTA update will be available during the WiFi status is WL_CONNECTED. For the false , the OTA update feature is disabled.","title":" disable"},{"location":"apiupdate.html#enable","text":"void AutoConnectUpdate :: enable( void ) Makes AutoConnectUpdate class available by incorporating the OTA update function into the AutoConnect menu . In ordinarily, the AutoConnectUpdate class becomes available by just calling the AutoConnectUpdate::attach function.","title":" enable"},{"location":"apiupdate.html#handleupdate","text":"void AutoConnectUpdate :: handleUpdate( void ) Performs the update process. This function is called by AutoConnect::handleClient when AutoConnectUpdate is enabled. In many cases, sketches do not need to call this function on purpose.","title":" handleUpdate"},{"location":"apiupdate.html#isenabled","text":"bool AutoConnectUpdate :: isEnabled( void ) Returns whether AutoConnectUpdate is enabled.","title":" isEnabled"},{"location":"apiupdate.html#rebootonupdate","text":"void AutoConnectUpdate :: rebootOnUpdate( bool reboot) Specifies whether or not to automatically restart the module as a result of the successful completion of the update process. Parameter reboot If specified the true then the ESP module will reboot after the updating successfully completed. For the false , The module does not reboot automatically. The uploaded new firmware remains in the updating stage of the flash on the ESP module. The boot process during the next start turn of the module by reset will copy the updated firmware to the actual program area and a new sketch program will start. The default value is true. This function inherits from the ESP8266HTTPUpdate (HTTPUpdate for ESP32) class.","title":" rebootOnUpdate"},{"location":"apiupdate.html#setledpin","text":"void AutoConnectUpdate :: setLedPin( int ledPin, uint8_t ledOn) Sets the port and the ON signal level of the externally connected LED that should act as a ticker during the update process. Parameter ledPin Specifies the PIN connected external LED for the ticker. The default assumes AUTOCONNECT_TICKER_PORT defined in the AutoConnectDefs.h header file and it is derived from the board-specific LED_BUILTIN . By default, the AutoConnectUpdate class does not use the ticker for boards without the LED_BUILTIN definition. If you connect the ticker LED externally, you need to specify the PIN using the setLedPin function. ledOn Specifies the the ON signal level of the LED PIN port. It is HIGH or LOW . This function inherits from the ESP8266HTTPUpdate (HTTPUpdate for ESP32) class.","title":" setLedPin"},{"location":"apiupdate.html#status","text":"AC_UPDATESTATUS_t AutoConnectUpdate :: status( void ) Returns the update process status transition indicator as an enumerated value of the AC_UPDATESTATUS_t type that indicates the process status of the AutoConnectUpdate class. Return value One of the enumerated values \u200b\u200bindicating the status of the Update class as follows: UPDATE_RESET : Update process ended, need to reset. UPDATE_IDLE : Update process has not started. UPDATE_START : Update process has been started. UPDATE_PROGRESS : Update process has been started. UPDATE_SUCCESS : Update successfully completed. UPDATE_NOAVAIL : No available update. UPDATE_FAIL : Update failed.","title":" status"},{"location":"apiupdate.html#public-member-variables","text":"","title":" Public member variables"},{"location":"apiupdate.html#host","text":"Update server address. Specifies IP address or FQDN. Type String","title":" host"},{"location":"apiupdate.html#port","text":"HTTP port for the updating process. Type String The default assumes AUTOCONNECT_UPDATE_PORT defined in the AutoConnectDefs.h header file.","title":" port"},{"location":"apiupdate.html#uri","text":"URI on the update server that has deployed available binary sketch files. Type String","title":" uri"},{"location":"basicusage.html","text":"Simple usage \u00b6 Embed to the Sketches \u00b6 How embed the AutoConnect to the Sketches you have. Most simple approach to applying AutoConnect for the existing Sketches, follow the below steps. The below Sketch is for ESP8266. For ESP32, replace ESP8266WebServer with WebServer and ESP8266WiFi.h with WiFi.h respectively. Insert #include <AutoConnect.h> to behind of #include <ESP8266WebServer.h> . Insert AutoConnect PORTAL(WEBSERVER); to behind of ESP8266WebServer WEBSERVER; declaration. 1 Remove WiFi. begin ( SSID , PSK ) and the subsequent logic for the connection status check. Replace WEBSERVER . begin () to PORTAL . begin () . 2 Replace WEBSERVER . handleClient () to PORTAL . handleClient () . 3 If the connection checks logic is needed, you can check the return value according to PORTAL . begin () with true or false . Basic usage \u00b6 Basic logic sequence for the user Sketches \u00b6 1. A typical logic sequence \u00b6 Include headers, ESP8266WebServer.h / WebServer.h and AutoConnect.h Declare an ESP8266WebServer variable for ESP8266 or a WebServer variable for ESP32. Declare an AutoConnect variable. Implement the URL handlers provided for the on method of ESP8266WebServer/WebServer with the function() . setup() 5.1 Sets URL handler the function() to ESP8266WebServer/WebServer by ESP8266WebServer::on / WebServer::on . 5.2 Starts AutoConnect::begin() . 5.3 Check WiFi connection status. loop() 6.1 Do the process for actual Sketch. 6.2 Invokes AutoConnect::handleClient() , or invokes ESP8266WebServer::handleClient() / WebServer::handleClient then AutoConnect::handleRequest() . 2. Declare AutoConnect object \u00b6 Two options are available for AutoConnect constructor . AutoConnect VARIABLE ( & ESP8266WebServer); // For ESP8266 AutoConnect VARIABLE ( & WebServer); // For ESP32 or AutoConnect VARIABLE; The parameter with an ESP8266WebServer/WebServer variable: An ESP8266WebServer/WebServer object variable must be declared. AutoConnect uses its variable to handles the AutoConnect menu . With no parameter: the Sketch does not declare ESP8266WebServer/WebServer object. In this case, AutoConnect allocates an instance of the ESP8266WebServer/WebServer internally. The logic sequence of the Sketch is somewhat different as the above. To register a URL handler function by ESP8266WebServer::on or WebServer::on should be performed after AutoConnect::begin . 3. No need WiFI.begin(...) \u00b6 AutoConnect internally performs WiFi.begin to establish a WiFi connection. There is no need for a general process to establish a connection using WiFi.begin with a Sketch code. 4. Alternate ESP8266WebServer::begin() and WebServer::begin() \u00b6 AutoConnect::begin executes ESP8266WebServer::begin / WebServer::begin internally too and it starts the DNS server to behave as a Captive portal. So it is not needed to call ESP8266WebServer::begin / WebServer::begin in the Sketch. Why DNS Server starts AutoConnect traps the detection of the captive portal and achieves a connection with the WLAN interactively by the AutoConnect menu. It responds SoftAP address to all DNS queries temporarily to trap. Once a WiFi connection establishes, the DNS server contributed by AutoConnect stops. 5. AutoConnect::begin with SSID and Password \u00b6 SSID and Password can also specify by AutoConnect::begin . ESP8266/ESP32 uses provided SSID and Password explicitly. If the connection false with specified SSID with Password then a captive portal is activated. SSID and Password are not present, ESP8266 SDK will attempt to connect using the still effectual SSID and password. Usually, it succeeds. 6. Use ESP8266WebServer::on and WebServer::on to handle URL \u00b6 AutoConnect is designed to coexist with the process for handling the web pages by user Sketches. The page processing function which will send an HTML to the client invoked by the \" on::ESP8266WebServer \" or the \" on::WebServer \" function is the same as when using ESP8266WebServer/WebServer natively. 7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient() \u00b6 Both classes member function name is the same: handleClient , but the behavior is different. Using the AutoConnect embedded along with ESP8266WebServer::handleClient/WebServer::handleClient has limitations. Refer to the below section for details. ESP8266WebServer/WebServer hosted or parasitic \u00b6 The interoperable process with an ESP8266WebServer/WebServer depends on the parameters of the AutoConnect constructor . Declaration parameter for the constructor Use ESP8266WebServer::handleClient or WebServer::handleClient only Use AutoConnect::handleClient None AutoConnect menu not available. To use AutoConnect menu, need AutoConnect::handleRequest() . also to use ESP8266WebServer/WebServer natively, need AutoConnect::host() . AutoConnect menu available. To use ESP8266WebServer/WebServer natively, need AutoConnect::host() . Reference to ESP8266WebServer/WebServer AutoConnect menu not available. To use AutoConnect menu, need AutoConnect::handleRequest() . AutoConnect menu available. By declaration for the AutoConnect variable with no parameter : The ESP8266WebServer/WebServer instance is hosted by AutoConnect automatically then the Sketches use AutoConnect::host as API to get it after AutoConnect::begin performed. By declaration for the AutoConnect variable with the reference of ESP8266WebServer/WebServer : AutoConnect will use it. the Sketch can use it is too. In use ESP8266WebServer::handleClient()/WebServer::handleClient() : AutoConnect menu can be dispatched but not works normally. It is necessary to call AutoConnect::handleRequest after ESP8255WebServer::handleClient / WebServer::handleClient invoking. In use AutoConnect::handleClient() : The handleClient() process and the AutoConnect menu is available without calling ESP8266WebServer::handleClient . Why AutoConnect::handleRequest is needed when using ESP8266WebServer::handleClient/WebServer::handleClient The AutoConnect menu function may affect WiFi connection state. It follows that the menu process must execute outside ESP8266WebServer::handleClient and WebServer::handleClient . AutoConnect::handleClient is equivalent ESP8266WebServer::handleClient and WEbServer::handleClient included AutoConnect::handleRequest . Each VARIABLE conforms to the actual declaration in the Sketches. \u21a9 WiFi SSID and Password can be specified AutoConnect::begin() too. \u21a9 Replacement the handleClient method is not indispensable. AutoConnect can still connect with the captive portal as it is ESP8266WebServer::handleClient. But it can not valid AutoConnect menu . \u21a9","title":"Basic usage"},{"location":"basicusage.html#simple-usage","text":"","title":"Simple usage"},{"location":"basicusage.html#embed-to-the-sketches","text":"How embed the AutoConnect to the Sketches you have. Most simple approach to applying AutoConnect for the existing Sketches, follow the below steps. The below Sketch is for ESP8266. For ESP32, replace ESP8266WebServer with WebServer and ESP8266WiFi.h with WiFi.h respectively. Insert #include <AutoConnect.h> to behind of #include <ESP8266WebServer.h> . Insert AutoConnect PORTAL(WEBSERVER); to behind of ESP8266WebServer WEBSERVER; declaration. 1 Remove WiFi. begin ( SSID , PSK ) and the subsequent logic for the connection status check. Replace WEBSERVER . begin () to PORTAL . begin () . 2 Replace WEBSERVER . handleClient () to PORTAL . handleClient () . 3 If the connection checks logic is needed, you can check the return value according to PORTAL . begin () with true or false .","title":" Embed to the Sketches"},{"location":"basicusage.html#basic-usage","text":"","title":"Basic usage"},{"location":"basicusage.html#basic-logic-sequence-for-the-user-sketches","text":"","title":" Basic logic sequence for the user Sketches"},{"location":"basicusage.html#1-a-typical-logic-sequence","text":"Include headers, ESP8266WebServer.h / WebServer.h and AutoConnect.h Declare an ESP8266WebServer variable for ESP8266 or a WebServer variable for ESP32. Declare an AutoConnect variable. Implement the URL handlers provided for the on method of ESP8266WebServer/WebServer with the function() . setup() 5.1 Sets URL handler the function() to ESP8266WebServer/WebServer by ESP8266WebServer::on / WebServer::on . 5.2 Starts AutoConnect::begin() . 5.3 Check WiFi connection status. loop() 6.1 Do the process for actual Sketch. 6.2 Invokes AutoConnect::handleClient() , or invokes ESP8266WebServer::handleClient() / WebServer::handleClient then AutoConnect::handleRequest() .","title":"1. A typical logic sequence"},{"location":"basicusage.html#2-declare-autoconnect-object","text":"Two options are available for AutoConnect constructor . AutoConnect VARIABLE ( & ESP8266WebServer); // For ESP8266 AutoConnect VARIABLE ( & WebServer); // For ESP32 or AutoConnect VARIABLE; The parameter with an ESP8266WebServer/WebServer variable: An ESP8266WebServer/WebServer object variable must be declared. AutoConnect uses its variable to handles the AutoConnect menu . With no parameter: the Sketch does not declare ESP8266WebServer/WebServer object. In this case, AutoConnect allocates an instance of the ESP8266WebServer/WebServer internally. The logic sequence of the Sketch is somewhat different as the above. To register a URL handler function by ESP8266WebServer::on or WebServer::on should be performed after AutoConnect::begin .","title":"2. Declare AutoConnect object"},{"location":"basicusage.html#3-no-need-wifibegin","text":"AutoConnect internally performs WiFi.begin to establish a WiFi connection. There is no need for a general process to establish a connection using WiFi.begin with a Sketch code.","title":"3. No need WiFI.begin(...)"},{"location":"basicusage.html#4-alternate-esp8266webserverbegin-and-webserverbegin","text":"AutoConnect::begin executes ESP8266WebServer::begin / WebServer::begin internally too and it starts the DNS server to behave as a Captive portal. So it is not needed to call ESP8266WebServer::begin / WebServer::begin in the Sketch. Why DNS Server starts AutoConnect traps the detection of the captive portal and achieves a connection with the WLAN interactively by the AutoConnect menu. It responds SoftAP address to all DNS queries temporarily to trap. Once a WiFi connection establishes, the DNS server contributed by AutoConnect stops.","title":"4. Alternate ESP8266WebServer::begin() and WebServer::begin()"},{"location":"basicusage.html#5-autoconnectbegin-with-ssid-and-password","text":"SSID and Password can also specify by AutoConnect::begin . ESP8266/ESP32 uses provided SSID and Password explicitly. If the connection false with specified SSID with Password then a captive portal is activated. SSID and Password are not present, ESP8266 SDK will attempt to connect using the still effectual SSID and password. Usually, it succeeds.","title":"5. AutoConnect::begin with SSID and Password"},{"location":"basicusage.html#6-use-esp8266webserveron-and-webserveron-to-handle-url","text":"AutoConnect is designed to coexist with the process for handling the web pages by user Sketches. The page processing function which will send an HTML to the client invoked by the \" on::ESP8266WebServer \" or the \" on::WebServer \" function is the same as when using ESP8266WebServer/WebServer natively.","title":"6. Use ESP8266WebServer::on and WebServer::on to handle URL"},{"location":"basicusage.html#7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient","text":"Both classes member function name is the same: handleClient , but the behavior is different. Using the AutoConnect embedded along with ESP8266WebServer::handleClient/WebServer::handleClient has limitations. Refer to the below section for details.","title":"7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()"},{"location":"basicusage.html#esp8266webserverwebserver-hosted-or-parasitic","text":"The interoperable process with an ESP8266WebServer/WebServer depends on the parameters of the AutoConnect constructor . Declaration parameter for the constructor Use ESP8266WebServer::handleClient or WebServer::handleClient only Use AutoConnect::handleClient None AutoConnect menu not available. To use AutoConnect menu, need AutoConnect::handleRequest() . also to use ESP8266WebServer/WebServer natively, need AutoConnect::host() . AutoConnect menu available. To use ESP8266WebServer/WebServer natively, need AutoConnect::host() . Reference to ESP8266WebServer/WebServer AutoConnect menu not available. To use AutoConnect menu, need AutoConnect::handleRequest() . AutoConnect menu available. By declaration for the AutoConnect variable with no parameter : The ESP8266WebServer/WebServer instance is hosted by AutoConnect automatically then the Sketches use AutoConnect::host as API to get it after AutoConnect::begin performed. By declaration for the AutoConnect variable with the reference of ESP8266WebServer/WebServer : AutoConnect will use it. the Sketch can use it is too. In use ESP8266WebServer::handleClient()/WebServer::handleClient() : AutoConnect menu can be dispatched but not works normally. It is necessary to call AutoConnect::handleRequest after ESP8255WebServer::handleClient / WebServer::handleClient invoking. In use AutoConnect::handleClient() : The handleClient() process and the AutoConnect menu is available without calling ESP8266WebServer::handleClient . Why AutoConnect::handleRequest is needed when using ESP8266WebServer::handleClient/WebServer::handleClient The AutoConnect menu function may affect WiFi connection state. It follows that the menu process must execute outside ESP8266WebServer::handleClient and WebServer::handleClient . AutoConnect::handleClient is equivalent ESP8266WebServer::handleClient and WEbServer::handleClient included AutoConnect::handleRequest . Each VARIABLE conforms to the actual declaration in the Sketches. \u21a9 WiFi SSID and Password can be specified AutoConnect::begin() too. \u21a9 Replacement the handleClient method is not indispensable. AutoConnect can still connect with the captive portal as it is ESP8266WebServer::handleClient. But it can not valid AutoConnect menu . \u21a9","title":" ESP8266WebServer/WebServer hosted or parasitic"},{"location":"changelabel.html","text":"Change the item's label text \u00b6 You can change the text of AutoConnect menu items. The easiest way is to rewrite the header file directly in the library that defines the menu label. Advanced Usage section describes the detailed how to change the label text directly. However, this way is less preferred as it modifies the library code and further affects the entire Arduino project you compile. So, here's how to change the label text for each Arduino project without directly modifying the library code. Using this method, you can also display the label text and fixed text on AutoConnect pages in your national language. (e.g. in Japanese) Preparation \u00b6 AutoConnect needs a definition file as c++ header (.h) to change the label text. It is used when your Arduino project is compiled, and there is no additional memory consumption due to changing the label text. This header file describes each fixed text of AutoConnect with the #define preprocessor directive. The next thing you need is PlatformIO . PlatformIO is a very powerful environment for embedded development with multi-platform and multi-architecture build systems. And you can easily set up a PlatformIO for the Arduino development system as follows on your host machine. Microsoft Visual Studio Code PlatformIO IDE (included PlatformIO core) Install PlatformIO and VSCode Please refer to the official documentation for PlatformIO and VSCode installation. The rest of this section assumes that you have a PlatformIO environment with VSCode as the front end that has installed on your host machine. How to change the label text \u00b6 Label text replacement header file \u00b6 AutoConnect label texts are pre-assigned with a fixed string so that it can be determined at compile time. Their default definitions are in the AutoConnectLabels.h file that has all the replaceable label text defined by the #define directive. Label placed Pre-defined text ID (#define macro) Menu item Configure new AP AUTOCONNECT_MENULABEL_CONFIGNEW Open SSIDs AUTOCONNECT_MENULABEL_OPENSSIDS Disconnect AUTOCONNECT_MENULABEL_DISCONNECT Reset... AUTOCONNECT_MENULABEL_RESET HOME AUTOCONNECT_MENULABEL_HOME Update AUTOCONNECT_MENULABEL_UPDATE Device info AUTOCONNECT_MENULABEL_DEVINFO Button label RESET AUTOCONNECT_BUTTONLABEL_RESET UPDATE AUTOCONNECT_BUTTONLABEL_UPDATE Page title Page not found AUTOCONNECT_PAGETITLE_NOTFOUND AutoConnect config AUTOCONNECT_PAGETITLE_CONFIG AutoConnect connecting AUTOCONNECT_PAGETITLE_CONNECTING AutoConnect connection failed AUTOCONNECT_PAGETITLE_CONNECTIONFAILED AutoConnect credentials AUTOCONNECT_PAGETITLE_CREDENTIALS AutoConnect disconnected AUTOCONNECT_PAGETITLE_DISCONNECTED AutoConnect resetting AUTOCONNECT_PAGETITLE_RESETTING AutoConnect statistics AUTOCONNECT_PAGETITLE_STATISTICS Page:[statistics] row Established connection AUTOCONNECT_PAGESTATS_ESTABLISHEDCONNECTION Mode AUTOCONNECT_PAGESTATS_MODE IP AUTOCONNECT_PAGESTATS_IP GW AUTOCONNECT_PAGESTATS_GATEWAY Subnet mask AUTOCONNECT_PAGESTATS_SUBNETMASK SoftAP IP AUTOCONNECT_PAGESTATS_SOFTAPIP AP MAC AUTOCONNECT_PAGESTATS_APMAC STA MAC AUTOCONNECT_PAGESTATS_STAMAC Channel AUTOCONNECT_PAGESTATS_CHANNEL dBm AUTOCONNECT_PAGESTATS_DBM Chip ID AUTOCONNECT_PAGESTATS_CHIPID CPU Freq. AUTOCONNECT_PAGESTATS_CPUFREQ Flash size AUTOCONNECT_PAGESTATS_FLASHSIZE Free memory AUTOCONNECT_PAGESTATS_FREEMEM Page:[config] text Total: AUTOCONNECT_PAGECONFIG_TOTAL Hidden: AUTOCONNECT_PAGECONFIG_HIDDEN SSID AUTOCONNECT_PAGECONFIG_SSID Passphrase AUTOCONNECT_PAGECONFIG_PASSPHRASE Enable DHCP AUTOCONNECT_PAGECONFIG_ENABLEDHCP Apply AUTOCONNECT_PAGECONFIG_APPLY Page:[update] text Updating firmware AUTOCONNECT_TEXT_UPDATINGFIRMWARE Select firmware: AUTOCONNECT_TEXT_SELECTFIRMWARE Successfully updated, rebooting... AUTOCONNECT_TEXT_OTASUCCESS Failed to update: AUTOCONNECT_TEXT_OTAFAILURE Page:[connection failed] Connection Failed AUTOCONNECT_PAGECONNECTIONFAILED_CONNECTIONFAILED Text No saved credentials. AUTOCONNECT_TEXT_NOSAVEDCREDENTIALS Menu Text Connecting AUTOCONNECT_MENUTEXT_CONNECTING Disconnect AUTOCONNECT_MENUTEXT_DISCONNECT Failed AUTOCONNECT_MENUTEXT_FAILED The definition of label text must conform to a certain coding pattern. Undefine with #undef the #define directive corresponding to the above IDs, and then redefine the ID with the replacement text. And surround it with #ifdef ~ #endif . #ifdef AUTOCONNECT_MENULABEL_CONFIGNEW #undef AUTOCONNECT_MENULABEL_CONFIGNEW #define AUTOCONNECT_MENULABEL_CONFIGNEW \"NEW_STRING_YOU_WISH\" #endif You may not need to rewrite all definitions. It depends on your wishes and is sufficient that the above the include file contains only the labels you need. Configuration of platformio.ini \u00b6 You prepare its header file and place it in the src folder of the project folder. You can name the file whatever you like, but for the sake of explanation, let's say mylabels.h . When you store mylabels.h containing the new label text definition in the src folder, your Arduino project folder structure should look like this: < Project folder > |-- < pio > |-- < . vscode > |-- < include > |-- < lib > |-- < src > | |-- main . cpp | |-- mylabels . h <-- Depends on the project |-- < test > |-- . gitignore |-- . travis . yml |-- platformio . ini Then, open platformio.ini file and add new build_flags for including mylabels.h to override the label text. build_flags = -DAC_LABELS='\"${PROJECT_SRC_DIR}/mylabels.h\"' Just change the mylabels.h Keep -DAC_LABELS='\"${PROJECT_SRC_DIR}/YOUR_FILE_NAME\"' when changing the above build_flags item to match your labels header file name. After placing the mylabels.h file and add the build_flags , build the project with the replaced label text. You will see the AutoConnect screen with the new text replaced by mylabels.h . Need clean-up before re-build with updated mylabels.h When you have updated mylabels.h , you need deleting compiled library object files before build. Use Clean of a PlatformIO task on VSCode status bar.","title":"Change label text"},{"location":"changelabel.html#change-the-items-label-text","text":"You can change the text of AutoConnect menu items. The easiest way is to rewrite the header file directly in the library that defines the menu label. Advanced Usage section describes the detailed how to change the label text directly. However, this way is less preferred as it modifies the library code and further affects the entire Arduino project you compile. So, here's how to change the label text for each Arduino project without directly modifying the library code. Using this method, you can also display the label text and fixed text on AutoConnect pages in your national language. (e.g. in Japanese)","title":"Change the item's label text"},{"location":"changelabel.html#preparation","text":"AutoConnect needs a definition file as c++ header (.h) to change the label text. It is used when your Arduino project is compiled, and there is no additional memory consumption due to changing the label text. This header file describes each fixed text of AutoConnect with the #define preprocessor directive. The next thing you need is PlatformIO . PlatformIO is a very powerful environment for embedded development with multi-platform and multi-architecture build systems. And you can easily set up a PlatformIO for the Arduino development system as follows on your host machine. Microsoft Visual Studio Code PlatformIO IDE (included PlatformIO core) Install PlatformIO and VSCode Please refer to the official documentation for PlatformIO and VSCode installation. The rest of this section assumes that you have a PlatformIO environment with VSCode as the front end that has installed on your host machine.","title":"Preparation"},{"location":"changelabel.html#how-to-change-the-label-text","text":"","title":"How to change the label text"},{"location":"changelabel.html#label-text-replacement-header-file","text":"AutoConnect label texts are pre-assigned with a fixed string so that it can be determined at compile time. Their default definitions are in the AutoConnectLabels.h file that has all the replaceable label text defined by the #define directive. Label placed Pre-defined text ID (#define macro) Menu item Configure new AP AUTOCONNECT_MENULABEL_CONFIGNEW Open SSIDs AUTOCONNECT_MENULABEL_OPENSSIDS Disconnect AUTOCONNECT_MENULABEL_DISCONNECT Reset... AUTOCONNECT_MENULABEL_RESET HOME AUTOCONNECT_MENULABEL_HOME Update AUTOCONNECT_MENULABEL_UPDATE Device info AUTOCONNECT_MENULABEL_DEVINFO Button label RESET AUTOCONNECT_BUTTONLABEL_RESET UPDATE AUTOCONNECT_BUTTONLABEL_UPDATE Page title Page not found AUTOCONNECT_PAGETITLE_NOTFOUND AutoConnect config AUTOCONNECT_PAGETITLE_CONFIG AutoConnect connecting AUTOCONNECT_PAGETITLE_CONNECTING AutoConnect connection failed AUTOCONNECT_PAGETITLE_CONNECTIONFAILED AutoConnect credentials AUTOCONNECT_PAGETITLE_CREDENTIALS AutoConnect disconnected AUTOCONNECT_PAGETITLE_DISCONNECTED AutoConnect resetting AUTOCONNECT_PAGETITLE_RESETTING AutoConnect statistics AUTOCONNECT_PAGETITLE_STATISTICS Page:[statistics] row Established connection AUTOCONNECT_PAGESTATS_ESTABLISHEDCONNECTION Mode AUTOCONNECT_PAGESTATS_MODE IP AUTOCONNECT_PAGESTATS_IP GW AUTOCONNECT_PAGESTATS_GATEWAY Subnet mask AUTOCONNECT_PAGESTATS_SUBNETMASK SoftAP IP AUTOCONNECT_PAGESTATS_SOFTAPIP AP MAC AUTOCONNECT_PAGESTATS_APMAC STA MAC AUTOCONNECT_PAGESTATS_STAMAC Channel AUTOCONNECT_PAGESTATS_CHANNEL dBm AUTOCONNECT_PAGESTATS_DBM Chip ID AUTOCONNECT_PAGESTATS_CHIPID CPU Freq. AUTOCONNECT_PAGESTATS_CPUFREQ Flash size AUTOCONNECT_PAGESTATS_FLASHSIZE Free memory AUTOCONNECT_PAGESTATS_FREEMEM Page:[config] text Total: AUTOCONNECT_PAGECONFIG_TOTAL Hidden: AUTOCONNECT_PAGECONFIG_HIDDEN SSID AUTOCONNECT_PAGECONFIG_SSID Passphrase AUTOCONNECT_PAGECONFIG_PASSPHRASE Enable DHCP AUTOCONNECT_PAGECONFIG_ENABLEDHCP Apply AUTOCONNECT_PAGECONFIG_APPLY Page:[update] text Updating firmware AUTOCONNECT_TEXT_UPDATINGFIRMWARE Select firmware: AUTOCONNECT_TEXT_SELECTFIRMWARE Successfully updated, rebooting... AUTOCONNECT_TEXT_OTASUCCESS Failed to update: AUTOCONNECT_TEXT_OTAFAILURE Page:[connection failed] Connection Failed AUTOCONNECT_PAGECONNECTIONFAILED_CONNECTIONFAILED Text No saved credentials. AUTOCONNECT_TEXT_NOSAVEDCREDENTIALS Menu Text Connecting AUTOCONNECT_MENUTEXT_CONNECTING Disconnect AUTOCONNECT_MENUTEXT_DISCONNECT Failed AUTOCONNECT_MENUTEXT_FAILED The definition of label text must conform to a certain coding pattern. Undefine with #undef the #define directive corresponding to the above IDs, and then redefine the ID with the replacement text. And surround it with #ifdef ~ #endif . #ifdef AUTOCONNECT_MENULABEL_CONFIGNEW #undef AUTOCONNECT_MENULABEL_CONFIGNEW #define AUTOCONNECT_MENULABEL_CONFIGNEW \"NEW_STRING_YOU_WISH\" #endif You may not need to rewrite all definitions. It depends on your wishes and is sufficient that the above the include file contains only the labels you need.","title":"Label text replacement header file"},{"location":"changelabel.html#configuration-of-platformioini","text":"You prepare its header file and place it in the src folder of the project folder. You can name the file whatever you like, but for the sake of explanation, let's say mylabels.h . When you store mylabels.h containing the new label text definition in the src folder, your Arduino project folder structure should look like this: < Project folder > |-- < pio > |-- < . vscode > |-- < include > |-- < lib > |-- < src > | |-- main . cpp | |-- mylabels . h <-- Depends on the project |-- < test > |-- . gitignore |-- . travis . yml |-- platformio . ini Then, open platformio.ini file and add new build_flags for including mylabels.h to override the label text. build_flags = -DAC_LABELS='\"${PROJECT_SRC_DIR}/mylabels.h\"' Just change the mylabels.h Keep -DAC_LABELS='\"${PROJECT_SRC_DIR}/YOUR_FILE_NAME\"' when changing the above build_flags item to match your labels header file name. After placing the mylabels.h file and add the build_flags , build the project with the replaced label text. You will see the AutoConnect screen with the new text replaced by mylabels.h . Need clean-up before re-build with updated mylabels.h When you have updated mylabels.h , you need deleting compiled library object files before build. Use Clean of a PlatformIO task on VSCode status bar.","title":"Configuration of platformio.ini"},{"location":"changelog.html","text":"[1.3.3] Jan. 25, 2022 \u00b6 Fix \u00b6 Fixed the missing initialization of MQTT parameter settings of mqttRSSI.ino example sketch. Reverted the MQTT API endpoint of Thingspeak.com in the mqttRSSI example sketches. Changed ESP32Cam XCLK to be attenuated to avoid interference with WiFi signals. [1.3.2] Jan. 1, 2022 \u00b6 Enhancements \u00b6 Supports an AutoConnectRange as a new AutoConnectElement. Adds the responsive parameter with AutoConnectAux. Adds an AutoConnectAux::redirect function. Adds an example for using AutoConnect with the ESP32 camera driver as WebCamServer. Fix \u00b6 Fixed an issue where a password is lost when SoftAP is stopped. [1.3.1] Oct. 09, 2021 \u00b6 Fixes \u00b6 Fixed an issue that was incompatible with ArduinoJson version 5. Fixed LittleFS mount check not working with ESP32. Fixed autoReconnect not being able to restore a static IP setting. Fixed that static IP settings were not cleared when loading credential. [1.3.0] Sep. 25, 2021 \u00b6 Enhancements \u00b6 Supports ESP8266 3.0.0 Arduino core. Supports ESP32 Arduino core 2.0.0. Supports LittleFS with ESP32. Supports AutoConnectOTA status notifications. Supports AutoConnectConfigAux. (Preview) Supports to save credentials always. Adds a style attribute with AutoConnectInput. Adds the div tag generation with the AutoConnectElement. Adds [] operator with const char for AutoConnectAux. Adds [] operator with __FlashStringHelper for AutoConnectAux. Adds AutoConnectAux::content function to get a number of AutoConnectElements. Adds AutoConnect::getConfig function to get an actual instance of AutoConnectConfig. Fixes \u00b6 Fixed CSS attribute missing of AutoConnectInput with the number type. Fixed garbage being mixed in a loaded credential. Fixed the output place of Posterior attribute for AutoConnectRadio. Improved the the calculation for the size of ArduinoJson document. Fixed Incomplete deletion with AutoConnectCredential. Fixed credentials not erased correctly. Fixed AutoConnectText posterior being unavailable. [1.2.3] Jan. 3, 2021 \u00b6 Enhancements \u00b6 Improved memory management. PageBuilder v1.5.0 is required Since AutoConnect v1.2.3, PageBuilder v1.5.0 or later is required. Please update PageBuilder to latest version. [1.2.2] Dec. 13, 2020 \u00b6 Fix \u00b6 Fixed an issue where OTA updates would crash on the ESP32 platform. (issue #284 ) With this fix, AUTOCONNECT_UPLOAD_ASFIRMWARE_USE_REGEXP must be enabled for regular expressions to be enabled in AUTOCONNECT_UPLOAD_ASFIRMWARE . [1.2.1] Dec. 5, 2020 \u00b6 Fix \u00b6 Fixed that not declared error with AUTOCONNECT_NOUSE_JSON . (issue #282 ) [1.2.0] Dec. 3, 2020 \u00b6 New features \u00b6 Supports a whileCaptivePortal exit. (issue #149 , issue #244 ) Supports an onConnect exit. Supports HTTP authentication . (issue #171 ) Enhancements \u00b6 Added AUTOCONNECT_APKEY_SSID definition to seek access points by SSID . (issue #251 ) Added AutoConnect::append and AutoConnect::detach function that can be dynamically AutoConnectAux attaching and detaching. (issue #230 ) Added AutoConnect::getEEPROMUsedSize that notifies the occupied size of the credential storage area. (issue #209 ) Added AutoConnectConfig::beginTimeout setting. (issue #247 ) Added AutoConnectConfig::preserveAPMode setting. (issue #210 ) Enable support for the LittleFS as filesystem with ESP8266 platform. Enhanced AutoConnectInput to allow accepts password and number type. (issue #237 , issue #255 ) Enhanced handleClient to dynamically launch the captive portal when losing WiFi connection. Enhanced the ability to upload a regular file with AutoConnectOTA . (issue #236 ) Enhanced ticker to work even in handleClient loop. Improved autoReconnect to work even in handleClient loop. (issue #234 , issue #251 ) Fixes \u00b6 Avoids an empty-body warning when AC_DEBUG is disabled. (issue #218 ) Fixed a core panic in the regex with ESP32. Fixed an exception in the AutoConnect::end function. Fixed an invalid SPIFFS compile error with ESP32. Fixed deficiently forward references with HandleClient.ino example. (PR #275 ) Fixed incorrect connection wait time. (issue #216 ) Fixed not being able to specify channel ID with a mqttRSSI.ino example. (issue #262 ) Fixed posterior being disabled in AutoConnectElement. [1.1.7] Apr. 19, 2020 \u00b6 Fixes \u00b6 Fixed Apply button not work. [1.1.6] Apr. 17, 2020 \u00b6 Fixes \u00b6 Fixed OTA page translation not work. [1.1.5] Apr. 15, 2020 \u00b6 New features \u00b6 Supports AutoConnect menu configuration . Supports the built-in OTA feature as AutoConnectOTA . Enhancements \u00b6 Enhanced allows the AutoConnect::begin to connect to the access point in order of signal strength. This option can specify the order of connection attempting according to the WiFi signal strength indicated with RSSI. Changed the bootUri behavior to be an automatic pop-up at the captive portal. [1.1.4] Feb. 14, 2020 \u00b6 New features \u00b6 Supports for overriding text of the menu items with user-defined labels. Fixes \u00b6 Fixed the compiler warning with experimental WiFi mode of ESP8266. [1.1.3] Jan. 1, 2020 \u00b6 Enhancements \u00b6 Improved Config New button behavior. Added AUTOCONNECT_NOUSE_JSON directive Fixes \u00b6 Fixed relocate Config New menu URI inability. Removed compiler warning of unused. [1.1.2] Oct. 22, 2019 \u00b6 Fixes \u00b6 Fixed a crash when no SSID found. Fixed memory leak on destruction. [1.1.1] Oct. 17, 2019 \u00b6 Fixes \u00b6 Fixed crash with unique_ptr deleting reference content. Fixed disconnection request initialization missing. [1.1.0] Oct. 15, 2019 \u00b6 Enhancements \u00b6 Enhanced to be able to specify static IP in the Configure new AP menu. Fixes \u00b6 Fixed compilation error that no member named 'printTo' with ArduinoJson version 5. [1.0.3] Sept. 30, 2019 \u00b6 Fixes \u00b6 Fixed a return of AutoConnectCredential::entries(). [1.0.2] Sept. 19, 2019 \u00b6 Fixes \u00b6 Fixed compilation error that no member named 'success' with ArduinoJson version 5. Fixed SSID non termination. Fixed compilation error that getBytesLength missing with ESP32. Added #include directive restriction for EEPROM and ESP8266httpUpdate to FAQ. [1.0.1] Sept. 13, 2019 \u00b6 Enhancements \u00b6 Added an example sketch for ESP32 boards that migrates credentials stored in EEPROM partition to the Preferences. [1.0.0] Sept. 7, 2019 \u00b6 New features \u00b6 Supports AutoConnectUpdate for the OTA update . Enhancements \u00b6 Supported Arduino core for ESP32 1.0.3. Added AutoConnectAux::isValid function. Added the global attribute with all AutoConnectElements. Changed the credential storage area to Preferences with ESP32 core 1.0.3 and later. In ESP32, the credentials stored past in EEPROM will lose . [0.9.12] Aug. 18, 2019 \u00b6 Fixes \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 New features \u00b6 Supports new element as AutoConnectSytle that can insert the custom CSS into AutoConnectAux page. Enhancements \u00b6 Supports that <br> tags can now be added to each element. Supports that able to place the checkbox label forward or backward. Supports flicker signal output according to the status of WiFi_mode. Supports AutoConnectAux::fetchElement function to retrieve inputted element values via a custom Web page. Fixes \u00b6 Fixed bug in AutoConnectCredential when offset is >256. [0.9.10] June 12, 2019 \u00b6 Fixes \u00b6 Fixed the unable to get AutoConnectElemets values \u200b\u200bin the sketch with ESP8266 arduino core 2.5.2. [0.9.9] May 25, 2019 \u00b6 Enhancements \u00b6 Supports ESP8266 Arduino core 2.5.2. Menu text/background color can be statically customized. Added the enable attribute to the AutoConnectElements. This attribute gives dynamically change to the element activation during the sketch executing. Added ID attribute to HTML tag generated from AutoConnectText. Fixes \u00b6 Fixed the input box layout collapsed. Fixed that the decoration of AutoConnectButton was disabled. Fixed that the value remains even after clearing the option with AutoConnectSelect. Fixed that an alignment violation exception occurred when loading AutoConnectAux described by JSON with PROGMEM attribute. [0.9.8] May 3, 2019 \u00b6 New features \u00b6 Supports new element type AutoConnectFile and built-in file uploader. Enhancements \u00b6 Enhanced to support ArduinoJson 6.9.1 or later. Enhanced to use PSRAM on ESP32 module as the buffer allocation destination of JsonDocument with ArduinoJson 6.10.0 or later. Added an operator [] as a shortcut for AutoConnectAux::getElement function. Added an AutoConnectElement::as<T> function to easily coding for conversion from an AutoConnectElement to an actual type. Added a format attribute with the AutoConnectText element. Added a selected attribute with the AutoConnectSelect element. Enhanced AutoConnectAux::loadElement with multiple elements loading. Changed menu labels placement in source files structure. Changed API interface of AutoConnect::where function. Fixes \u00b6 Fixed blank page responds with Configure new. Fixed loading elements value missing. Fixed losing elements in saveElement with ArduinoJson version 6. Fixed compile error with older than ESP8266 core 2.5.0. [0.9.7] Jan. 25, 2019 \u00b6 New features \u00b6 Supports AutoConnect menu extension by user sketch with AutoConnectAux . Supports loading and saving of user-defined parameters with JSON format. Enhancements \u00b6 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. Added 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 . Added AutoConnectConfig::hostName . It activates WiFi.hostname() / WiFi.setHostName() . Added the captive portal time-out. It can be controlled by AutoConnectConfig::portalTimeout and AutoConnectConfig::retainPortal . Fixes \u00b6 Fixed crash in some environments. Thank you @ageurtse [0.9.6] Sept.27, 2018. \u00b6 Enhancements \u00b6 Improvement of RSSI detection for saved SSIDs. Fixes \u00b6 Fixed disconnection SoftAP completely at the first connection phase of the AutoConnect::begin . [0.9.5] Aug.27, 2018. \u00b6 Enhancements \u00b6 Supports ESP32. Fixes \u00b6 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 New features \u00b6 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. Enhancements \u00b6 Automatically focus Passphrase after selecting SSID with Configure New AP. [0.9.3] March 23, 2018. \u00b6 Enhancements \u00b6 Supports a static IP address assignment. [0.9.2] March 19, 2018. \u00b6 Enhancements \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#133-jan-25-2022","text":"","title":"[1.3.3] Jan. 25, 2022"},{"location":"changelog.html#fix","text":"Fixed the missing initialization of MQTT parameter settings of mqttRSSI.ino example sketch. Reverted the MQTT API endpoint of Thingspeak.com in the mqttRSSI example sketches. Changed ESP32Cam XCLK to be attenuated to avoid interference with WiFi signals.","title":"Fix"},{"location":"changelog.html#132-jan-1-2022","text":"","title":"[1.3.2] Jan. 1, 2022"},{"location":"changelog.html#enhancements","text":"Supports an AutoConnectRange as a new AutoConnectElement. Adds the responsive parameter with AutoConnectAux. Adds an AutoConnectAux::redirect function. Adds an example for using AutoConnect with the ESP32 camera driver as WebCamServer.","title":"Enhancements"},{"location":"changelog.html#fix_1","text":"Fixed an issue where a password is lost when SoftAP is stopped.","title":"Fix"},{"location":"changelog.html#131-oct-09-2021","text":"","title":"[1.3.1] Oct. 09, 2021"},{"location":"changelog.html#fixes","text":"Fixed an issue that was incompatible with ArduinoJson version 5. Fixed LittleFS mount check not working with ESP32. Fixed autoReconnect not being able to restore a static IP setting. Fixed that static IP settings were not cleared when loading credential.","title":"Fixes"},{"location":"changelog.html#130-sep-25-2021","text":"","title":"[1.3.0] Sep. 25, 2021"},{"location":"changelog.html#enhancements_1","text":"Supports ESP8266 3.0.0 Arduino core. Supports ESP32 Arduino core 2.0.0. Supports LittleFS with ESP32. Supports AutoConnectOTA status notifications. Supports AutoConnectConfigAux. (Preview) Supports to save credentials always. Adds a style attribute with AutoConnectInput. Adds the div tag generation with the AutoConnectElement. Adds [] operator with const char for AutoConnectAux. Adds [] operator with __FlashStringHelper for AutoConnectAux. Adds AutoConnectAux::content function to get a number of AutoConnectElements. Adds AutoConnect::getConfig function to get an actual instance of AutoConnectConfig.","title":"Enhancements"},{"location":"changelog.html#fixes_1","text":"Fixed CSS attribute missing of AutoConnectInput with the number type. Fixed garbage being mixed in a loaded credential. Fixed the output place of Posterior attribute for AutoConnectRadio. Improved the the calculation for the size of ArduinoJson document. Fixed Incomplete deletion with AutoConnectCredential. Fixed credentials not erased correctly. Fixed AutoConnectText posterior being unavailable.","title":"Fixes"},{"location":"changelog.html#123-jan-3-2021","text":"","title":"[1.2.3] Jan. 3, 2021"},{"location":"changelog.html#enhancements_2","text":"Improved memory management. PageBuilder v1.5.0 is required Since AutoConnect v1.2.3, PageBuilder v1.5.0 or later is required. Please update PageBuilder to latest version.","title":"Enhancements"},{"location":"changelog.html#122-dec-13-2020","text":"","title":"[1.2.2] Dec. 13, 2020"},{"location":"changelog.html#fix_2","text":"Fixed an issue where OTA updates would crash on the ESP32 platform. (issue #284 ) With this fix, AUTOCONNECT_UPLOAD_ASFIRMWARE_USE_REGEXP must be enabled for regular expressions to be enabled in AUTOCONNECT_UPLOAD_ASFIRMWARE .","title":"Fix"},{"location":"changelog.html#121-dec-5-2020","text":"","title":"[1.2.1] Dec. 5, 2020"},{"location":"changelog.html#fix_3","text":"Fixed that not declared error with AUTOCONNECT_NOUSE_JSON . (issue #282 )","title":"Fix"},{"location":"changelog.html#120-dec-3-2020","text":"","title":"[1.2.0] Dec. 3, 2020"},{"location":"changelog.html#new-features","text":"Supports a whileCaptivePortal exit. (issue #149 , issue #244 ) Supports an onConnect exit. Supports HTTP authentication . (issue #171 )","title":"New features"},{"location":"changelog.html#enhancements_3","text":"Added AUTOCONNECT_APKEY_SSID definition to seek access points by SSID . (issue #251 ) Added AutoConnect::append and AutoConnect::detach function that can be dynamically AutoConnectAux attaching and detaching. (issue #230 ) Added AutoConnect::getEEPROMUsedSize that notifies the occupied size of the credential storage area. (issue #209 ) Added AutoConnectConfig::beginTimeout setting. (issue #247 ) Added AutoConnectConfig::preserveAPMode setting. (issue #210 ) Enable support for the LittleFS as filesystem with ESP8266 platform. Enhanced AutoConnectInput to allow accepts password and number type. (issue #237 , issue #255 ) Enhanced handleClient to dynamically launch the captive portal when losing WiFi connection. Enhanced the ability to upload a regular file with AutoConnectOTA . (issue #236 ) Enhanced ticker to work even in handleClient loop. Improved autoReconnect to work even in handleClient loop. (issue #234 , issue #251 )","title":"Enhancements"},{"location":"changelog.html#fixes_2","text":"Avoids an empty-body warning when AC_DEBUG is disabled. (issue #218 ) Fixed a core panic in the regex with ESP32. Fixed an exception in the AutoConnect::end function. Fixed an invalid SPIFFS compile error with ESP32. Fixed deficiently forward references with HandleClient.ino example. (PR #275 ) Fixed incorrect connection wait time. (issue #216 ) Fixed not being able to specify channel ID with a mqttRSSI.ino example. (issue #262 ) Fixed posterior being disabled in AutoConnectElement.","title":"Fixes"},{"location":"changelog.html#117-apr-19-2020","text":"","title":"[1.1.7] Apr. 19, 2020"},{"location":"changelog.html#fixes_3","text":"Fixed Apply button not work.","title":"Fixes"},{"location":"changelog.html#116-apr-17-2020","text":"","title":"[1.1.6] Apr. 17, 2020"},{"location":"changelog.html#fixes_4","text":"Fixed OTA page translation not work.","title":"Fixes"},{"location":"changelog.html#115-apr-15-2020","text":"","title":"[1.1.5] Apr. 15, 2020"},{"location":"changelog.html#new-features_1","text":"Supports AutoConnect menu configuration . Supports the built-in OTA feature as AutoConnectOTA .","title":"New features"},{"location":"changelog.html#enhancements_4","text":"Enhanced allows the AutoConnect::begin to connect to the access point in order of signal strength. This option can specify the order of connection attempting according to the WiFi signal strength indicated with RSSI. Changed the bootUri behavior to be an automatic pop-up at the captive portal.","title":"Enhancements"},{"location":"changelog.html#114-feb-14-2020","text":"","title":"[1.1.4] Feb. 14, 2020"},{"location":"changelog.html#new-features_2","text":"Supports for overriding text of the menu items with user-defined labels.","title":"New features"},{"location":"changelog.html#fixes_5","text":"Fixed the compiler warning with experimental WiFi mode of ESP8266.","title":"Fixes"},{"location":"changelog.html#113-jan-1-2020","text":"","title":"[1.1.3] Jan. 1, 2020"},{"location":"changelog.html#enhancements_5","text":"Improved Config New button behavior. Added AUTOCONNECT_NOUSE_JSON directive","title":"Enhancements"},{"location":"changelog.html#fixes_6","text":"Fixed relocate Config New menu URI inability. Removed compiler warning of unused.","title":"Fixes"},{"location":"changelog.html#112-oct-22-2019","text":"","title":"[1.1.2] Oct. 22, 2019"},{"location":"changelog.html#fixes_7","text":"Fixed a crash when no SSID found. Fixed memory leak on destruction.","title":"Fixes"},{"location":"changelog.html#111-oct-17-2019","text":"","title":"[1.1.1] Oct. 17, 2019"},{"location":"changelog.html#fixes_8","text":"Fixed crash with unique_ptr deleting reference content. Fixed disconnection request initialization missing.","title":"Fixes"},{"location":"changelog.html#110-oct-15-2019","text":"","title":"[1.1.0] Oct. 15, 2019"},{"location":"changelog.html#enhancements_6","text":"Enhanced to be able to specify static IP in the Configure new AP menu.","title":"Enhancements"},{"location":"changelog.html#fixes_9","text":"Fixed compilation error that no member named 'printTo' with ArduinoJson version 5.","title":"Fixes"},{"location":"changelog.html#103-sept-30-2019","text":"","title":"[1.0.3] Sept. 30, 2019"},{"location":"changelog.html#fixes_10","text":"Fixed a return of AutoConnectCredential::entries().","title":"Fixes"},{"location":"changelog.html#102-sept-19-2019","text":"","title":"[1.0.2] Sept. 19, 2019"},{"location":"changelog.html#fixes_11","text":"Fixed compilation error that no member named 'success' with ArduinoJson version 5. Fixed SSID non termination. Fixed compilation error that getBytesLength missing with ESP32. Added #include directive restriction for EEPROM and ESP8266httpUpdate to FAQ.","title":"Fixes"},{"location":"changelog.html#101-sept-13-2019","text":"","title":"[1.0.1] Sept. 13, 2019"},{"location":"changelog.html#enhancements_7","text":"Added an example sketch for ESP32 boards that migrates credentials stored in EEPROM partition to the Preferences.","title":"Enhancements"},{"location":"changelog.html#100-sept-7-2019","text":"","title":"[1.0.0] Sept. 7, 2019"},{"location":"changelog.html#new-features_3","text":"Supports AutoConnectUpdate for the OTA update .","title":"New features"},{"location":"changelog.html#enhancements_8","text":"Supported Arduino core for ESP32 1.0.3. Added AutoConnectAux::isValid function. Added the global attribute with all AutoConnectElements. Changed the credential storage area to Preferences with ESP32 core 1.0.3 and later. In ESP32, the credentials stored past in EEPROM will lose .","title":"Enhancements"},{"location":"changelog.html#0912-aug-18-2019","text":"","title":"[0.9.12] Aug. 18, 2019"},{"location":"changelog.html#fixes_12","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":"Fixes"},{"location":"changelog.html#0911-july-13-2019","text":"","title":"[0.9.11] July 13, 2019"},{"location":"changelog.html#new-features_4","text":"Supports new element as AutoConnectSytle that can insert the custom CSS into AutoConnectAux page.","title":"New features"},{"location":"changelog.html#enhancements_9","text":"Supports that <br> tags can now be added to each element. Supports that able to place the checkbox label forward or backward. Supports flicker signal output according to the status of WiFi_mode. Supports AutoConnectAux::fetchElement function to retrieve inputted element values via a custom Web page.","title":"Enhancements"},{"location":"changelog.html#fixes_13","text":"Fixed bug in AutoConnectCredential when offset is >256.","title":"Fixes"},{"location":"changelog.html#0910-june-12-2019","text":"","title":"[0.9.10] June 12, 2019"},{"location":"changelog.html#fixes_14","text":"Fixed the unable to get AutoConnectElemets values \u200b\u200bin the sketch with ESP8266 arduino core 2.5.2.","title":"Fixes"},{"location":"changelog.html#099-may-25-2019","text":"","title":"[0.9.9] May 25, 2019"},{"location":"changelog.html#enhancements_10","text":"Supports ESP8266 Arduino core 2.5.2. Menu text/background color can be statically customized. Added the enable attribute to the AutoConnectElements. This attribute gives dynamically change to the element activation during the sketch executing. Added ID attribute to HTML tag generated from AutoConnectText.","title":"Enhancements"},{"location":"changelog.html#fixes_15","text":"Fixed the input box layout collapsed. Fixed that the decoration of AutoConnectButton was disabled. Fixed that the value remains even after clearing the option with AutoConnectSelect. Fixed that an alignment violation exception occurred when loading AutoConnectAux described by JSON with PROGMEM attribute.","title":"Fixes"},{"location":"changelog.html#098-may-3-2019","text":"","title":"[0.9.8] May 3, 2019"},{"location":"changelog.html#new-features_5","text":"Supports new element type AutoConnectFile and built-in file uploader.","title":"New features"},{"location":"changelog.html#enhancements_11","text":"Enhanced to support ArduinoJson 6.9.1 or later. Enhanced to use PSRAM on ESP32 module as the buffer allocation destination of JsonDocument with ArduinoJson 6.10.0 or later. Added an operator [] as a shortcut for AutoConnectAux::getElement function. Added an AutoConnectElement::as<T> function to easily coding for conversion from an AutoConnectElement to an actual type. Added a format attribute with the AutoConnectText element. Added a selected attribute with the AutoConnectSelect element. Enhanced AutoConnectAux::loadElement with multiple elements loading. Changed menu labels placement in source files structure. Changed API interface of AutoConnect::where function.","title":"Enhancements"},{"location":"changelog.html#fixes_16","text":"Fixed blank page responds with Configure new. Fixed loading elements value missing. Fixed losing elements in saveElement with ArduinoJson version 6. Fixed compile error with older than ESP8266 core 2.5.0.","title":"Fixes"},{"location":"changelog.html#097-jan-25-2019","text":"","title":"[0.9.7] Jan. 25, 2019"},{"location":"changelog.html#new-features_6","text":"Supports AutoConnect menu extension by user sketch with AutoConnectAux . Supports loading and saving of user-defined parameters with JSON format.","title":"New features"},{"location":"changelog.html#enhancements_12","text":"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. Added 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 . Added AutoConnectConfig::hostName . It activates WiFi.hostname() / WiFi.setHostName() . Added the captive portal time-out. It can be controlled by AutoConnectConfig::portalTimeout and AutoConnectConfig::retainPortal .","title":"Enhancements"},{"location":"changelog.html#fixes_17","text":"Fixed crash in some environments. Thank you @ageurtse","title":"Fixes"},{"location":"changelog.html#096-sept27-2018","text":"","title":"[0.9.6] Sept.27, 2018."},{"location":"changelog.html#enhancements_13","text":"Improvement of RSSI detection for saved SSIDs.","title":"Enhancements"},{"location":"changelog.html#fixes_18","text":"Fixed disconnection SoftAP completely at the first connection phase of the AutoConnect::begin .","title":"Fixes"},{"location":"changelog.html#095-aug27-2018","text":"","title":"[0.9.5] Aug.27, 2018."},{"location":"changelog.html#enhancements_14","text":"Supports ESP32.","title":"Enhancements"},{"location":"changelog.html#fixes_19","text":"Fixed that crash may occur if the number of stored credentials in the EEPROM is smaller than the number of found WiFi networks.","title":"Fixes"},{"location":"changelog.html#094-may-5-2018","text":"","title":"[0.9.4] May 5, 2018."},{"location":"changelog.html#new-features_7","text":"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":"New features"},{"location":"changelog.html#enhancements_15","text":"Automatically focus Passphrase after selecting SSID with Configure New AP.","title":"Enhancements"},{"location":"changelog.html#093-march-23-2018","text":"","title":"[0.9.3] March 23, 2018."},{"location":"changelog.html#enhancements_16","text":"Supports a static IP address assignment.","title":"Enhancements"},{"location":"changelog.html#092-march-19-2018","text":"","title":"[0.9.2] March 19, 2018."},{"location":"changelog.html#enhancements_17","text":"Improvement of string literal declaration with the examples, no library change.","title":"Enhancements"},{"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 credentials of 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 the AutoConnectCredential , which provides the way of access to the credentials stored in 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 <AutoConnectCredential.h> 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, station_config_t * config) Load a credential entry and store to config . Parameters ssid SSID to be loaded. config station_config_t Return value Save the specified SSID's credential entry to station_config_t pointed to by the parameter as config . -1 is returned if the SSID is not saved. load \u00b6 bool load( int8_t entry, station_config_t * config) Load a credential entry and store to config . Parameters entry Specifies the index number based 0 to be loaded. config station_config_t Return value Save the specified credential entry to station_config_t pointed to by the parameter as config . -1 is returned if specified number is not saved. save \u00b6 bool save( const station_config_t * config) Save a credential entry. Parameter config station_config_t 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; station_config_t 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_t \u00b6 The saved credential structure is defined as station_config_t in the AcutoConnectCredential header file. typedef struct { uint8_t ssid[ 32 ]; uint8_t password[ 64 ]; uint8_t bssid[ 6 ]; uint8_t dhcp; /**< 0:DHCP, 1:Static IP */ union _config { uint32_t addr[ 5 ]; struct _sta { uint32_t ip; uint32_t gateway; uint32_t netmask; uint32_t dns1; uint32_t dns2; } sta; } config; } station_config_t; The byte size of station_config_t in program memory and stored credentials is different There is a gap byte for boundary alignment between the dhcp member and the static IP members of the above station_config_t . Its gap byte will be removed with saved credentials on the flash. 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 1 Flag for DHCP or Static IP (0:DHCP, 1:Static IP) The following IP address entries are stored only for static IPs. variable(1) 4 Station IP address (uint32_t) variable(5) 4 Gateway address (uint32_t) variable(9) 4 Netmask (uint32_t) variable(13) 4 Primary DNS address (uint32_t) variable(17) 4 Secondary DNS address (uint32_t) variable variable Contained the next entries. (Continuation SSID+Password+BSSID+DHCP flag+Static IPs(if exists)) variable 1 0x00. End of container. AutoConnectCredential has changed It was lost AutoConnectCredential backward compatibility. Credentials saved by AutoConnect v1.0.3 (or earlier) will not work properly with AutoConnect v1.1.0. You need to erase the flash of the ESP module using the esptool before the sketch uploading. esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash 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 credentials of 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 the AutoConnectCredential , which provides the way of access to the credentials stored in 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 <AutoConnectCredential.h>","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, station_config_t * config) Load a credential entry and store to config . Parameters ssid SSID to be loaded. config station_config_t Return value Save the specified SSID's credential entry to station_config_t 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, station_config_t * config) Load a credential entry and store to config . Parameters entry Specifies the index number based 0 to be loaded. config station_config_t Return value Save the specified credential entry to station_config_t 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 station_config_t * config) Save a credential entry. Parameter config station_config_t 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; station_config_t 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_t","text":"The saved credential structure is defined as station_config_t in the AcutoConnectCredential header file. typedef struct { uint8_t ssid[ 32 ]; uint8_t password[ 64 ]; uint8_t bssid[ 6 ]; uint8_t dhcp; /**< 0:DHCP, 1:Static IP */ union _config { uint32_t addr[ 5 ]; struct _sta { uint32_t ip; uint32_t gateway; uint32_t netmask; uint32_t dns1; uint32_t dns2; } sta; } config; } station_config_t; The byte size of station_config_t in program memory and stored credentials is different There is a gap byte for boundary alignment between the dhcp member and the static IP members of the above station_config_t . Its gap byte will be removed with saved credentials on the flash.","title":"  station_config_t"},{"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 1 Flag for DHCP or Static IP (0:DHCP, 1:Static IP) The following IP address entries are stored only for static IPs. variable(1) 4 Station IP address (uint32_t) variable(5) 4 Gateway address (uint32_t) variable(9) 4 Netmask (uint32_t) variable(13) 4 Primary DNS address (uint32_t) variable(17) 4 Secondary DNS address (uint32_t) variable variable Contained the next entries. (Continuation SSID+Password+BSSID+DHCP flag+Static IPs(if exists)) variable 1 0x00. End of container. AutoConnectCredential has changed It was lost AutoConnectCredential backward compatibility. Credentials saved by AutoConnect v1.0.3 (or earlier) will not work properly with AutoConnect v1.1.0. You need to erase the flash of the ESP module using the esptool before the sketch uploading. esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash 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 <TimeLib.h> 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> 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 <TimeLib.h> 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 &amp; 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> 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":"esp32cam.html","text":"What this example presents \u00b6 ESP-IDF is offering ESP32 Camera Driver as an interface to small image sensors that can work with ESP32. This driver supports a variety of popular image sensors, such as the OV2640, which has low power consumption and mega-pixel sensing capability. By reading through this chapter you will know how to make the sketch featuring a UI that looks like the followings. Of course, it has the convenience of AutoConnect as well. This example shows how to sketch the Web Camera Application that involves using AutoConnect together with the ESP32 Camera Driver. Why we can not use app_httpd.cpp together with AutoConnect \u00b6 The ESP32 library of the ESP32 Arduino core features a CameraWebServer.ino that includes an interface to drive the Camera Driver. The core process of the server-side of that sketch application is app_httpd.cpp , which consists of initializing and configuring the image sensor, configuring and capturing image frames, and sending the image frames through an internally started HTTP server . While Web UI provided by CameraWebServer.ino is sophisticated, the role of app_httpd.cpp is focused on responding to the Fetch required by the Web UI (which is actually an HTML page specific to each sensor model that is extracted from the gzipped camera_index.h ). It is a set of primitive functions that are integrated with the Web UI. Also, app_httpd.cpp has hardcoded the TCP port of the internally invoking HTTP server as fixed at 80, which conflicts with the HTTP port used by a typical captive portal. Therefore, It is impossible to apply app_httpd.cpp which has fixed 80 TCP port depending on the WebUI of CameraWebServer.ino to sketches using AutoConnect as it is. CameraWebServer.ino extended version available on GitHub An extended version of app_httpd.cpp is available on the GitHub repository to make it a bit more flexible for different usage scenarios. It also can handling the captive portal itself. Strategy \u00b6 As mentioned earlier, app_httpd.cpp is integrated with CameraWebServer.ino 's Web UI. However, its functionality can be separated into two parts: an interface for driving the image sensor correctly and sending the captured images on the HTTP stream as requested by the client. It also has the ability to configure the sensor settings over the network remotely, but this can be omitted at the expense of interactivity. (We can implement that feature after the initial purpose is achieved) So, I have prepared two separate classes with these functions. ESP32WebCam and ESP32Cam are independent classes inspired by app-httpd.cpp, and they can interface with the ESP32 Camera Driver individually, or send out motion JPEGs via an HTTP server task running inside the class. These two classes are completely independent of the AutoConnect library and can be incorporated into your various other sketches on their own. the source code for the ESP32WebCam and ESP32Cam classes can be found in the AutoConnect library examples and are distributed together. The API specifications for these two classes are described later in this chapter. Implementing a Streaming Server with ESP32-CAM using AutoConnect \u00b6 A minimal sketch that involves the ESP32WebCam and ESP32Cam classes and incorporates them together with AutoConnect is shown below. This sketch will work with Ai-Thinker ESP32-CAM , which is one of the most popular ESP32 modules with OmniVision OV2640 image sensor. In order to experience this sketch, copy the five files ESP32WebCam.h , ESP32WebCam.cpp , ESP32Cam.h , ESP32Cam.cpp , and ESP32Cam_pins.h from the WebCamServer folder located AutoConnect library examples to the same folder as the sketchbook folder where you placed this sketch. Connect the ESP32-CAM module to your PC and launch the Arduino IDE. Then select the correct board you using from the Tool menu of Arduino IDE and compile it. (Don't forget to open the serial monitor) #include <Arduino.h> #include <WiFi.h> #include <WebServer.h> #include <AutoConnect.h> #include \"ESP32WebCam.h\" const char CAMERA_VIEWER[] = R\"*( { \"title\": \"Camera\", \"uri\": \"/\", \"menu\": false, \"element\": [ { \"name\": \"viewport\", \"type\": \"ACText\", \"format\": \"<img src='http://%s'>\", \"posterior\": \"none\" }, { \"name\": \"discon\", \"type\": \"ACElement\", \"value\": \"<script>window.addEventListener('pagehide',function(){window.stop();});</script>\" } ] } )*\" ; // Declare ESP32-CAM handling interface. It contains ESP-IDF Web Server. ESP32WebCam webcam (ESP32Cam :: CAMERA_MODEL_AI_THINKER); // AutoConnect portal. It contains the WebServer from ESP32 Arduino Core. AutoConnect portal; AutoConnectConfig config; // AutoConnectAux page handler, it starts streaming by adding the ESP32WebCam // streaming endpoint to the src attribute of the img tag on the AutoConnectAux page. String viewer (AutoConnectAux & aux, PageArgument & args) { AutoConnectAux & viewer = * portal.aux( \"/\" ); // Set the Streaming server host, port, and endpoint viewer[ \"viewport\" ].value = WiFi.localIP().toString() + \":\" + String(webcam.getServerPort()) + String(webcam.getStreamPath()); return String(); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); // Start Image sensor if (webcam.sensorInit() != ESP_OK) { Serial.println( \"Camera initialize failed\" ); } // Allow automatic re-connection as long as the WiFi connection is established. config.autoReconnect = true; config.reconnectInterval = 1 ; portal.config(config); // Start the portal, it will launch the WebServer for the portal from inside of AutoConnect. if (portal.begin()) { portal.load(CAMERA_VIEWER); portal.on( \"/\" , viewer); // Start ESP32 Camera Web Server if (webcam.startCameraServer() == ESP_OK) { Serial.printf( \"ESP32WebCam server %s port %u ready \\n \" , WiFi.localIP().toString().c_str(), webcam.getServerPort()); } else { Serial.println( \"ESP32WebCam server start failed\" ); } } } void loop () { portal.handleClient(); } If your ESP32-CAM module still has no connection with any access point, a captive portal will open. Use your cellphone to connect the ESP32-CAM to the access point. When ESP32-CAM successfully connects to the access point, you will see the IP address on the serial monitor. You visit the IP address from your browser, you can see the image captured by the ESP32-CAM. Streaming stops caused by ERR_CONNECTION_RESET Sometimes the browser will throw the above error and the streaming will stop. In the simple sketch above, which does not include the transmission error recovery process, the TCP packet transmission is incomplete due to a weak WiFi signal or other reasons, and the browser will stop loading the image. Send errors can be recovered by incorporating an event handler into the img tag, and an example of its implementation is shown later in this chapter. Program structure \u00b6 The sketch of AutoConnect using ESP32WebCam and ESP32Cam classes is divided into several components, which will take a similar form in any sketch application. Their logical components are as follows: Include ESP32WebCam.h header file. #include \"ESP32WebCam.h\" AutoConnectAux defines a custom web page in JSON description. It includes an img tag that displays the captured image. The src attribute of the img tag is not hard-coded and can be dynamically set in a custom web page handler to make the sketch more applicable to various situations. { \"name\" : \"viewport\" , \"type\" : \"ACText\" , \"format\" : \"<img src='http://%s'>\" , \"posterior\" : \"none\" } Insert AutoConnectElement in the JSON description of your custom web page with JavaScript enclosed in <script>~</script> in HTML to stop streaming on page transition. window. addEventListener ( 'pagehide' , function () { window. stop (); }); Why window.stop() is needed That's because image streaming is achieved by continuous loading of Motion JPEG using HTTP multipart/x-mixed-replace keep-alive stream. With this type of MIME content, the server will continue to push the content unless the client explicitly notifies the server of the end of the session. The method of notifying the end of the session varies depending on the client browser, and by issuing window.stop() , the difference in the behavior of each browser is absorbed. Declare ESP32WebCam instance. It accompanies the parameters with the appropriate model specifiers. ESP32WebCam webcam (ESP32Cam :: CAMERA_MODEL_AI_THINKER); For details on identifiers that can be specified as image sensor models, please refer to the APIs described below. Declare AutoConnect instance. If your sketch requires a native web page that is not an AutoConnectAux, you can declare a WebServer instance at the same place to make it easier to call from functions in your sketch. AutoConnect portal; Declare AutoConnectConfig to control WiFi connection behavior if necessary. AutoConnectConfig config; Prepare an AutoConnectAux custom page handler for the declared above AutoConnectAux JSON. Typically, this handler is responsible for handling the ESP32Cam class via the endpoint interface provided by the ESP32Cam class. In the above sketch, we have only given the endpoint (i.e. http://{WiFi.localIP}:3000/_stream ) for streaming by the ESP32WebCam class as the src attribute of the img tag identified id=viewport , since we are focusing on the minimum necessary processing. ESP32WebCam class will deliver the captured image with just this operation. AutoConnectAux & viewer = * portal.aux( \"/\" ); viewer[ \"viewport\" ].value = WiFi.localIP().toString() + \":\" + String(webcam.getServerPort()) + String(webcam.getStreamPath()); For more information about ESP32Cam capability and ESP32WebCam endpoints, please refer to the Endpoint interfaces described below. Using AutoConnectText with format string In the sketch above, the format attribute of AutoConnectText is used to set the src attribute of the img tag. The AutoConnectText format attribute produces the same output as a C-style printf(format, value) , depending on the string that can be derived from the value. printf( \"<img src='http://%s'>\" , \"localhost:3000/_stream\" ); Start the sketch and initialize the camera using ESP32WebCam::sensorInit . ESP_OK will returned on success to initialize the image sensor. ESP32WebCam webcam (ESP32Cam :: CAMERA_MODEL_AI_THINKER); if (webcam.sensorInit() != ESP_OK) { Serial.println( \"Camera initialize failed\" ); } Configure WiFi state control to maintain connection. Usually, AutoConnectConfig::autoReconnect will keep WiFi connection stateful. config.autoReconnect = true; config.reconnectInterval = 1 ; portal.config(config); Start the portal, and load the view page. portal.begin(); portal.load(CAMERA_VIEWER); Register the view page handler and start the streaming server using ESP32WebCam::startCameraServer . ESP_OK will returned on start the streaming server successfully. portal.on( \"/\" , viewer); if (webcam.startCameraServer() == ESP_OK) { Serial.printf( \"ESP32WebCam server ready: %s \\n \" , WiFi.localIP().toString().c_str()); } else { Serial.println( \"ESP32WebCam server start failed\" ); } Loop for portal.handleClient(). The app_httpd.cpp , which is the core of CameraWebServer.ino 's functionality, has a mixture of an interface with the ESP32 Camera Driver and remote control over the network via an HTTP server . While it is highly functional, but it will cause a decline in versatility. ESP32WebCam and ESP32Cam separate the mixed functionality of app_httpd.cpp into two classes, each with a single role. This makes them versatile and simple to use. And they can coexist with AutoConnect. If you only need to stream from the image sensor, you can simplify the sketch structure as in the example above. The simplicity of the sketch is mainly due to the usefulness of the ESP32WebCam and ESP32Cam classes. In driving the ESP32 Camera Driver on the ESP32-CAM module, the sketch interfaces with the ESP32WebCam class and processes the ESP32Cam class through the ESP32WebCam endpoint interface. ESP32WebCam Class and ESP32Cam Class \u00b6 The ESP32WebCam class has an endpoint interface to allow the sketch to manipulate the image sensor over the network. The sketch can use HTTP GET method to capture images, stream the captured images, and save them to SD card. It also starts its own HTTP server task internally, and this HTTP server runs as a separate task from the WebServer hosted by AutoConnect. The ESP32Cam class is a wrapper that governs the native interface with the ESP32 Camera Driver which is a component of ESP-IDF. It can initialize the sensor, set the sensor characteristics, save and load the settings, and save the captured images to the SD card. In the case of accessing image sensors located across a network, the sketch will usually have a UI to remotely control the ESP32-CAM. If the UI is intended to be a web interface, the sketch will use a request handler that is compatible with the ESP32 WebServer hosted by AutoConnect to serve the manipulation web page. That page can be an AutoConnectAux-based custom web page, or it can be the RequestHanlder callback that can respond to the ESP32 WebServer class . In any case, those UI pages can remotely access the image sensor of the ESP32-CAM module through the HTTP endpoint interface deployed at a specific URL of the HTTP server launched by the ESP32WebCam class, and do the required processing. ESP32WebCam features: \u00b6 Run the HTTP server as a background task. Stream Motion JPEG via HTTP multipart/x-mixed-replace MIME. Serves a captured image via HTTP. Instruct the ESP32Cam to save the captured image to the SD card via HTTP. Of these processing requests, the ESP32Cam class is responsible for the ones that actually need to interface with the camera driver. (However, reading from the frame buffer is excluded. ESP32WebCam reads image data directly from the frame buffer of the image sensor without ESP32Cam.) The ESP32Cam class manipulates sensor characteristics, including setting image frame properties, image format settings, and exposure, gain, white balance, and band filter settings. It also saves the captured image to an SD card wired to the ESP32-CAM. ESP32Cam features: \u00b6 Directs and acquires sensor settings. Save and load the sensor settings to the flash memory on the ESP32 module. Save the captured image to the SD card which is wired to ESP32 module. Save captured images to SD card periodically using an ESP32 built-in hardware timer . ESP32WebCam Class APIs \u00b6 Constructor \u00b6 ESP32WebCam( const uint16_t port = ESP32CAM_DEFAULT_HTTPPORT) ESP32WebCam( const ESP32Cam :: CameraId model, const uint16_t port = ESP32CAM_DEFAULT_HTTPPORT) Instantiate ESP32WebCam. The constructor also instantiates ESP32Cam , so there is no need to explicitly declare the ESP32Cam class in the sketch. At the time of declaring the constructor, the camera is not initialized and the HTTP server is not started. Each of them requires a separate dedicated function to be called. Parameters port Port number of the HTTP server that ESP32WebCam starts. Default port number defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h model Specifies the model of the onboard image sensor. The image sensor models that can be specified are as follows: ESP32Cam::CAMERA_MODEL_WROVER_KIT ESP32Cam::CAMERA_MODEL_ESP_EYE ESP32Cam::CAMERA_MODEL_M5STACK_NO_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_V2_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_WIDE ESP32Cam::CAMERA_MODEL_M5STACK_ESP32CAM ESP32Cam::CAMERA_MODEL_M5STACK_UNITCAM ESP32Cam::CAMERA_MODEL_AI_THINKER ESP32Cam::CAMERA_MODEL_TTGO_T_JOURNAL getCapturePath \u00b6 const char * getCapturePath( void ) Get a path containing the first ' / ' of the currently valid endpoint URL to capture. Return value A path of capturing URL. Default path defined by ESP32CAM_DEFAULT_PATH_CAPTURE macro directive in ESP32WebCam.h . getPromptPath \u00b6 const char * getPromptPath( void ) Get a path containing the first ' / ' of the currently valid endpoint URL to prompt. Return value A path of prompting URL. Default path defined by ESP32CAM_DEFAULT_PATH_PROMPT macro directive in ESP32WebCam.h . getServerHandle \u00b6 httpd_handle_t getServerHandle( void ) Returns the handle of the HTTP server started by ESP32WebCam. Return value Returns the httpd_handle_t value of an HTTP server started by ESP32WebCam. If the HTTP server task is not running, nullptr is returned. getServerPort \u00b6 uint16_t getServerPort( void ) Returns the port number that the HTTP server on listens to. Return value Returns a port number of an HTTP server started by ESP32WebCam. Default port number defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h getStreamPath \u00b6 const char * getStreamPath( void ) Get a path containing the first ' / ' of the currently valid endpoint URL to streaming. Return value A path of streaming URL. Default path defined by ESP32CAM_DEFAULT_PATH_STREAM macro directive in ESP32WebCam.h . isServerStarted \u00b6 bool isServerStarted( void ) Returns a boolean value indicating whether the HTTP server task is running or not. Return value true The HTTP Server tasks is running. false The HTTP server task has not been started. sensor \u00b6 ESP32Cam & sensor( void ) Returns a reference to ESP32Cam , which is instantiated internally by ESP32WebCam constructor. Return value A reference to ESP32Cam instance. The image sensor is not initialized just by calling the ESP32WebCam constructor. To initialize the sensor, you need to call the sensorInit() function. ESP32WebCam webcam (); webcam.sensorInit(); sensorInit \u00b6 esp_err_t sensorInit( void ) esp_err_t sensorInit( const ESP32Cam :: CameraId model) Initialize the image sensor via the ESP32Cam class. The sketch needs to initialize the sensor with the sensorInit function prior to all processing of the image sensor. Parameters model Specifies the model of the onboard image sensor. The image sensor models that can be specified are same as the constructor parameter . Return value ESP_OK An image sensor successfully initialized. ESP_ERR_CAMERA_NOT_SUPPORTED Specified model is not supported. ESP_ERR_CAMERA_NOT_DETECTED An image sensor not detected. ESP_ERR_CAMERA_FAILED_TO_SET_FRAME_SIZE Frame identifier is invalid. ESP_ERR_CAMERA_FAILED_TO_SET_OUT_FORMAT Output image format is invalid. ESP_FAIL Other error occurred. setCapturePath \u00b6 void setCapturePath( const char * path) Reconfigure the already defined path of the endpoint for capture. Parameters path Specifies the path of the capture endpoint to be set newly, as a string starting with ' / '. If this path is not specified, the default path defined by ESP32CAM_DEFAULT_PATH_CAPTURE macro directive will be assumed. setPromptPath \u00b6 void setPromptPath( const char * path) Reconfigure the already defined path of the endpoint for prompt. Parameters path Specifies the path of the prompt endpoint to be set newly, as a string starting with ' / '. If this path is not specified, the default path defined by ESP32CAM_DEFAULT_PATH_PROMPT macro directive will be assumed. setServerPort \u00b6 void setServerPort( const uint16_t port) Reconfigure the already defined port number of an HTTP server. Parameters port Specifies port number of an HTTP Server. Default port number defined by ESP32CAM_DEFAULT_HTTPPORT macro directive will be assumed. setStreamPath \u00b6 void setStreamPath( const char * path) Reconfigure the already defined path of the endpoint for stream. Parameters path Specifies the path of the stream endpoint to be set newly, as a string starting with ' / '. If this path is not specified, the default path defined by ESP32CAM_DEFAULT_PATH_STREAM macro directive will be assumed. startCameraServer \u00b6 esp_err_t startCameraServer( const char * streamPath) esp_err_t startCameraServer( const char * streamPath, const char * capturePath, const char * promptPath) esp_err_t startCameraServer( const char * streamPath, const char * capturePath, const char * promptPath, const uint16_t port) esp_err_t startCameraServer( const char * streamPath, const uint16_t port) esp_err_t startCameraServer( const uint16_t port) esp_err_t startCameraServer( void ) Begins the HTTP server task, and start the endpoint service. By starting the HTTP server task, the endpoint interface provided by ESP32WebCam will be available. Parameters streamPath Specifies the path of the stream endpoint . Default stream path is defined by ESP32CAM_DEFAULT_PATH_STREAM macro directive in ESP32WebCam.h header file. capturePath Specifies the path of the capture endpoint . Default capture path is defined by ESP32CAM_DEFAULT_PATH_CAPTURE macro directive in ESP32WebCam.h header file. promptPath Specifies the path of the prompt endpoint . Default prompt path is defined by ESP32CAM_DEFAULT_PATH_PROMPT macro directive in ESP32WebCam.h header file. port Specifies port number on which the HTTP server listens. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. Return value ESP_OK An HTTP server task successfully started. ESP_ERR_HTTPD_HANDLERS_FULL All slots for registering URI handlers have been consumed. ESP_ERR_HTTPD_ALLOC_MEM Failed to dynamically allocate memory for resource. ESP_ERR_HTTPD_TASK Failed to launch server task/thread. ESP_FAIL Other error occurred. HTTP server task stack size ESP32WebCam allocates 8KB of stack when it starts the HTTP server task. This stack size is larger than the size allocated by the default HTTPD_DEFAULT_CONFIG in ESP-IDF. This is to include the stack consumed by the file system of the SD card triggered by the timer shot. This stack size can be changed as needed, and the default value is defined in the ESP32Cam.h header file as ESP32CAM_TIMERTASK_STACKSIZE . stopCameraServer \u00b6 void stopCameraServer( void ) Stop an HTTP server task and free resources. ESP32WebCam Endpoint Interfaces \u00b6 ESP32WebCam has endpoint interfaces for simple manipulation of image sensors over the network via an internally launched HTTP server, which follows the traditional HTTP request and response, not WebAPI or REST. It supports the HTTP GET 1 method and will be available after the HTTP server is started by the ESP32WebCam::startCameraServer function. If you are using Visual Studio Code as your build system for Arduino sketch, you can easily experiment with the ESP32WebCam endpoint interface using the VSCode extension. REST Client is an excellent VSCode extension that allows you to send HTTP requests directly from within the editor. The following screenshot shows the result of sending an HTTP request directly to the capture endpoint of ESP32WebCam using the REST Client on a VSCode with the PlatformIO build system. The top left editor pane is the sketch code described above, and the bottom pane is the serial monitor output of the sketch. The pane between the top and bottom panes is the REST Client. Run the sketch, and when the serial monitor shows a message that ESP32Cam has started the HTTP server, use the REST client to send an HTTP GET request as GET http://{HOST}:{PORT}/_capture (In the screenshot above, the request is sent to http://192.168.1.19:3000/_capture ) to the capture endpoint. 2 You will see the response of the image captured by ESP32-CAM in the right pane. The default settings for the endpoint interface provided by ESP32WebCam are as follows: \u00b6 Endpoint Default path Function Default value defined in ESP32WebCam.h Capture /_capture Responds as a captured image ESP32CAM_DEFAULT_PATH_CAPTURE Prompt /_prompt Save and load the captured image, Save the sensor settings ESP32CAM_DEFAULT_PATH_PROMPT Stream /_stream Stream image ESP32CAM_DEFAULT_PATH_STREAM Capture \u00b6 GET http://{HOST}:{PORT}{PATH} The capture endpoint responds captured image with the image/jpeg mime format. Parameters HOST Host address of ESP32-CAM. PORT Port number of HTTP server listening on. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. PATH A path for the capture endpoint. Response code 200 Content body contains captured image data. Prompt \u00b6 GET http://{HOST}:{PORT}{PATH}?{QUERY} You can use the prompt endpoint to save the captured image to the SD card at that moment or in a timer cycle, save the sensor settings, and load them into the flash memory built into the ESP32 module. The instructions for the prompt action performed by ESP32WebCam are specified as the query string with \" key=value \" form for the parameters of the GET request. Parameters HOST Host address of ESP32-CAM. PORT Port number of HTTP server listening on. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. PATH A path for the capture endpoint. QUERY The QUERY that Prompt can accept are different for each feature. The query formats that can be specified and the corresponding functions are shown below. Response code 202 Request accepted. 400 Query string has syntax error, or Fatal error occurred. Content body has detailed error code. The following features are currently supported by the prompt endpoint: \u00b6 Specifying by query string Function Behavior mf=oneshot[&fs={sd|mmc}][&filename=<FILENAME>] One-shot Take a one-shot image and save it to the SD card. mf=timershot[&fs={sd|mmc}][&filename=<FILENAME>][&period=<INTERVAL>] Timer-shot Repeatedly takes a one-shot image at specified an INTERVAL of seconds and saves it to the SD card. mf=distimer Disable timer Suspend timer for Timer-shot mf=entimer Enable timer Resume timer for Timer-shot mf=load Load settings Load the image sensor settings from the NVS mf=save Save settings Save the image sensor settings to the NVS The query formats that can be specified and their corresponding functions are described below. Functions: Specifies with the mf= query. oneshot Capture an image at the requested timing and save them to the SD card. Species either sd or mmc for the fs argument. If the fs argument does not exist, mmc is assumed. Saves the captured image with the file name specified by the filename argument; if the filename argument does not exist, it assumes a file name consisting of a prefix and a timestamp. In that case, the fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h is used as the prefix. timershot Repeatedly takes a one-shot image at specified an INTERVAL of seconds with period argument and saves it to the SD card. Species either sd or mmc for the fs argument. If the fs argument does not exist, mmc is assumed. Saves the captured image to a file whose name consists of the prefix and timestamp suffix specified by the filename argument. If the filename argument does not exist, the prefix will be assumed a fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h header file. distimer Temporarily stops the timer for the timershot . This can be resumed with entimer . entimer Resumes a timer-shot that was temporarily stopped by distimer . load Load the image sensor settings from NVS. save Save the image sensor settings to NVS. Whether it is SD or MMC depends on the hardware The ESP32 Arduino SD library supports two types of SD cards with different interfaces. Which type of SD card is used depends on the ESP32 module and needs to be chosen appropriately. In the case of the Ai-Thinker ESP32-CAM 3 , the ESP32 is wired to the SD slot with each HS2 signal . Hence, We can see from the schematic that it is using MMC. Stream \u00b6 GET http://{HOST}:{PORT}{PATH} The stream endpoint responds captured image with the image/jpeg mime format with multipart/x-mixed-replace HTTP header. Parameters HOST Host address of ESP32-CAM. PORT Port number of HTTP server listening on. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. PATH A path for the stream endpoint. Response code 200 Content body contains captured image data with multipart boundary. ESP32Cam Class APIs \u00b6 Constructor \u00b6 ESP32Cam() ESP32Cam( const CameraId model) Instantiate ESP32Cam. The image sensor is not initialized just by calling the constructor. To initialize the sensor, you need to call the init function. Parameters model Specifies the model of the onboard image sensor. The image sensor models that can be specified are as follows: ESP32Cam::CAMERA_MODEL_WROVER_KIT ESP32Cam::CAMERA_MODEL_ESP_EYE ESP32Cam::CAMERA_MODEL_M5STACK_NO_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_V2_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_WIDE ESP32Cam::CAMERA_MODEL_M5STACK_ESP32CAM ESP32Cam::CAMERA_MODEL_M5STACK_UNITCAM ESP32Cam::CAMERA_MODEL_AI_THINKER ESP32Cam::CAMERA_MODEL_TTGO_T_JOURNAL getStatus \u00b6 esp_err_t getStatus(camera_status_t * status) Get the camera_status_t data structure from the image sensor. Parameters status Pointer to the buffer to store the acquired camera_status_t structure. Return value ESP_OK camera_status_t is read successfully. ESP_FAIL Image sensor is not initialized. getFramesize \u00b6 framesize_t getFramesize( void ) Get the current configuration of the image sensor frame size. Return value framesize_t The framesize_t enumeration value. getFrameHeight \u00b6 uint16_t getFrameHeight( void ) Returns the height of the current image frame in pixels. Return value uint16_t Height of the image frame. getFrameWidth \u00b6 uint16_t getFrameWidth( void ) Returns the width of the current image frame in pixels. Return value uint16_t Width of the image frame. init \u00b6 esp_err_t init( void ) esp_err_t init( const CameraId model) Initialize the image sensor. Parameters model Specifies the model of the onboard image sensor. The image sensor models that can be specified are as follows: ESP32Cam::CAMERA_MODEL_WROVER_KIT ESP32Cam::CAMERA_MODEL_ESP_EYE ESP32Cam::CAMERA_MODEL_M5STACK_NO_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_V2_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_WIDE ESP32Cam::CAMERA_MODEL_M5STACK_ESP32CAM ESP32Cam::CAMERA_MODEL_M5STACK_UNITCAM ESP32Cam::CAMERA_MODEL_AI_THINKER ESP32Cam::CAMERA_MODEL_TTGO_T_JOURNAL loadSettings \u00b6 esp_err_t loadSettings( const char * key = nullptr ) Load the image sensor settings from NVS in the ESP32 flash. Parameters key Specifies NVS key name. If key is nullptr or not specified, default key which defined by ESP32CAM_NVS_KEYNAME macro directive in ESP32Cam.h header file will be assumed. Return value ESP_OK The image sensor settings has been successfully loaded. saveSettings \u00b6 esp_err_t saveSettings( const char * key = nullptr ) Save the current image sensor settings to NVS in the ESP32 flash. Parameters key Specifies NVS key name. If key is nullptr or not specified, default key which defined by ESP32CAM_NVS_KEYNAME macro directive in ESP32Cam.h header file will be assumed. Return value ESP_OK The image sensor settings has been successfully saved. setStatus \u00b6 esp_err_t setStatus( const camera_status_t & status) Set the content of camera_status_t structure to the image sensor. Parameters status Reference of the camera_status_t structure. Return value ESP_OK camera_status_t has been set successfully. ESP_FAIL Image sensor is not initialized. setFramesize \u00b6 esp_err_t setFramesize( const framesize_t framesize) Set the image sensor frame size. Parameters framesize The framesize_t enumeration value to be set. Return value ESP_OK Framesize has been set. ESP_ERR_CAMERA_FAILED_TO_SET_FRAME_SIZE Image sensor is not initialized, the framesize is invalid, or the pixel format is not JPEG. setImageFormat \u00b6 esp_err_t setImageFormat( const pixformat_t format) Set the image format. Parameters format The pixformat_t enumeration value to be set. Return value ESP_OK Format has been set. ESP_ERR_CAMERA_FAILED_TO_SET_OUT_FORMAT Specified format is invalid. ESP_FAIL Image sensor is not initialized. oneShot \u00b6 esp_err_t oneShot(fs :: SDFS & sd, const char * filename = nullptr ) esp_err_t oneShot(fs :: SDMMCFS & mmc, const char * filename = nullptr ) Take a one-shot image and save it to the SD card or MMC. This function writes to a file compliant with the ESP32 Arduino SD library . Either fs::SDFS or fs::SDMMCFS can be specified for the file system that represents sd or mmc . Parameters sd Specifies the SD file system when the SD card is wired with SPI interface. In usually, you can use a SD variable that is instantiated and exported globally by the ESP32 Arduino core. mmc Specifies the SD_MMC file system when the SD card is wired with HS2 interface. In usually, you can use a SD_MMC variable that is instantiated and exported globally by the ESP32 Arduino core. filename Specifies the file name when saving the captured image to the SD card. if the filename does not exist, it assumes a file name consisting of a prefix and a timestamp. In that case, the fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h is used as the prefix. Return value ESP_OK Format has been set. ESP_ERR_NOT_FOUND SD card is not mounted. ESP_FAIL Other error occurred. timerShot \u00b6 esp_err_t timerShot( const unsigned long period, fs :: SDFS & sd, const char * filePrefix = nullptr ) esp_err_t timerShot( const unsigned long period, fs :: SDMMCFS & mmc, const char * filePrefix = nullptr ) Repeatedly takes a one-shot image at specified an interval of seconds with period parameter and saves it to the SD card or MMC. This function writes to a file compliant with the ESP32 Arduino SD library . Either fs::SDFS or fs::SDMMCFS can be specified for the file system that represents sd or mmc . Parameters period Specifies the shooting interval time in second unit. sd Specifies the SD file system when the SD card is wired with SPI interface. In usually, you can use a SD variable that is instantiated and exported globally by the ESP32 Arduino core. mmc Specifies the SD_MMC file system when the SD card is wired with HS2 interface. In usually, you can use a SD_MMC variable that is instantiated and exported globally by the ESP32 Arduino core. filePrefix Specifies the prefix of file name when saving the captured image to the SD card. This function saves files each time whose name consists of the prefix and timestamp suffix specified by the filePrefix parameter. If the filePrefix does not exist, it assumes a fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h for the prefix. Return value ESP_OK Format has been set. ESP_ERR_NOT_FOUND SD card is not mounted. ESP_FAIL Other error occurred. disableTimerShot \u00b6 void disableTimerShot( void ) Temporarily stops the timerShot . To restart it, call enableTimerShot . enableTimerShot \u00b6 void enableTimerShot( void ) Restarts the timerShot that was temporarily stopped by disableTimerShot . deq \u00b6 void deq( void ) Release a semaphore. enq \u00b6 portBASE_TYPE enq(TickType_t ms) Take a semaphore to prevent resource collisions with the image sensor. ESP32Cam uses a semaphore for each of oneShot and timerShot to prevent image sensor resources from colliding while performing each other's tasks. The enq function reserves a semaphore to wait for a subsequent oneShot or timerShot task. Parameters ms Specifies the maximum waiting time in milliseconds for a semaphore to be released. If portMAX_DELAY is specified, it will wait indefinitely for the semaphore to be released. Return value pdTRUE Semaphore was reserved. !pdTRUE Semaphore was not released within the specified ms time. WebCamServer like as CameraWebServer \u00b6 The WebCamServer.ino sketch combines AutoConnectAux's custom web pages with native HTML pages. The image viewer is placed on the native HTML page using the img tag, and the slide-in navigation panel is incorporated using CSS. AutoConnect is only directly involved in the image sensor setup page, which is JSON defined in CAMERA_SETUP_PAGE . The setSensor function in the sketch is a handler for a custom web page for CAMERA_SETUP_PAGE , and its role is to communicate the sensor settings to the ESP32 camera driver via ESP32Cam. In the WebCamServer.ino sketch, most of the front-end is taken care of by the UI, which is a web page written in HTML. The slide-in menu allows navigation to stream images, capture still images, save a one-shot image to the SD card, and the timer-shot. Image streaming and capture are achieved by giving the URLs of the Stream endpoint and Capture endpoint in the src attribute of the img tag in the HTML using JavaScript DOM interface. < body > < li id = \"onair\" onclick = \"stream(!isStreaming())\" > Start Streaming </ li > < img id = \"img-frame\" /> </ body > const onAir = document. getElementById ( 'onair' ); const imgFrame = document. getElementById ( 'img-frame' ); function isStreaming () { status . innerText = null ; return onAir . innerText . startsWith ( \"Stop\" ); } function stream ( onOff ) { if ( onOff && ! isStreaming ()) { window. stop (); imgFrame . src = streamUrl ; onAir . innerText = onAir . innerText . replace ( \"Start\" , \"Stop\" ); content . focus (); } else if ( ! onOff && isStreaming ()) { window. stop (); imgFrame . src = noa ; onAir . innerText = onAir . innerText . replace ( \"Stop\" , \"Start\" ); } } Also, One-shot and timer-shot also use JavaScript Fetch API to send a query string compliant with each function to the Prompt endpoint. < li id = \"oneshot\" onclick = \"oneshot()\" > One-Shot </ li > < li >< label for = \"period\" > Period [s] </ label >< input type = \"number\" name = \"peirod\" id = \"period\" min = \"1\" value = \"1\" pattern = \"\\d*\" /></ li > < li >< input type = \"button\" value = \"ARM\" onclick = \"arm()\" /></ li > var promptUrl = endpoint ( host , promptPath , port ); function endpoint ( host , path , port ) { var url = new URL ( path , \"http://\" + host ); url . port = port ; return url ; } function prompt ( url ) { var res ; stream ( false ); fetch ( url ) . then ( response => { res = \"status:\" + response . status + \" \" ; if ( ! response . ok ) { return response . text (). then ( text => { throw new Error ( text ); }); } else { status . style . color = '#297acc' ; status . innerText = res + response . statusText ; } }) . catch ( err => { var desc = err . message ; if ( err . message . indexOf ( \"0x0103\" , 1 ) > 0 ) { desc = \"SD not mounted\" ; } if ( err . message . indexOf ( \"0x0105\" , 1 ) > 0 ) { desc = \"SD open failed\" ; } status . style . color = '#cc2929' ; status . innerText = res + desc ; }); } function oneshot () { promptUrl . search = \"?mf=oneshot&fs=mmc\" ; prompt ( promptUrl ); } function arm () { promptUrl . search = \"?mf=timershot&fs=mmc&period=\" + document. getElementById ( 'period' ). value ; prompt ( promptUrl ); } The following diagram shows the program structure of the WebCamServer.ino sketch. Its structure is somewhat more complex than the simple sketch presented at the beginning of this chapter because of the native HTML intervening. ESP32WebCam endpoint interface supports only HTTP GET method, it cannot respond to other HTTP methods such as POST. \u21a9 Do not use the REST Client to send requests to the stream endpoints, the REST Client does not fully support multipart/x-mixed-replace mime. \u21a9 When using MMC on AI-Thinker ES32-CAM, the LED flash on the module blinks every time the SD is accessed, because the HS2 DATA1 signal is wired to the driver transistor of the LED FLASH . I can't envision why HS2 DATA1 signal was chosen to drive the LED. \u21a9","title":"Works with ESP32-CAM"},{"location":"esp32cam.html#what-this-example-presents","text":"ESP-IDF is offering ESP32 Camera Driver as an interface to small image sensors that can work with ESP32. This driver supports a variety of popular image sensors, such as the OV2640, which has low power consumption and mega-pixel sensing capability. By reading through this chapter you will know how to make the sketch featuring a UI that looks like the followings. Of course, it has the convenience of AutoConnect as well. This example shows how to sketch the Web Camera Application that involves using AutoConnect together with the ESP32 Camera Driver.","title":"What this example presents"},{"location":"esp32cam.html#why-we-can-not-use-app_httpdcpp-together-with-autoconnect","text":"The ESP32 library of the ESP32 Arduino core features a CameraWebServer.ino that includes an interface to drive the Camera Driver. The core process of the server-side of that sketch application is app_httpd.cpp , which consists of initializing and configuring the image sensor, configuring and capturing image frames, and sending the image frames through an internally started HTTP server . While Web UI provided by CameraWebServer.ino is sophisticated, the role of app_httpd.cpp is focused on responding to the Fetch required by the Web UI (which is actually an HTML page specific to each sensor model that is extracted from the gzipped camera_index.h ). It is a set of primitive functions that are integrated with the Web UI. Also, app_httpd.cpp has hardcoded the TCP port of the internally invoking HTTP server as fixed at 80, which conflicts with the HTTP port used by a typical captive portal. Therefore, It is impossible to apply app_httpd.cpp which has fixed 80 TCP port depending on the WebUI of CameraWebServer.ino to sketches using AutoConnect as it is. CameraWebServer.ino extended version available on GitHub An extended version of app_httpd.cpp is available on the GitHub repository to make it a bit more flexible for different usage scenarios. It also can handling the captive portal itself.","title":"Why we can not use app_httpd.cpp together with AutoConnect"},{"location":"esp32cam.html#strategy","text":"As mentioned earlier, app_httpd.cpp is integrated with CameraWebServer.ino 's Web UI. However, its functionality can be separated into two parts: an interface for driving the image sensor correctly and sending the captured images on the HTTP stream as requested by the client. It also has the ability to configure the sensor settings over the network remotely, but this can be omitted at the expense of interactivity. (We can implement that feature after the initial purpose is achieved) So, I have prepared two separate classes with these functions. ESP32WebCam and ESP32Cam are independent classes inspired by app-httpd.cpp, and they can interface with the ESP32 Camera Driver individually, or send out motion JPEGs via an HTTP server task running inside the class. These two classes are completely independent of the AutoConnect library and can be incorporated into your various other sketches on their own. the source code for the ESP32WebCam and ESP32Cam classes can be found in the AutoConnect library examples and are distributed together. The API specifications for these two classes are described later in this chapter.","title":"Strategy"},{"location":"esp32cam.html#implementing-a-streaming-server-with-esp32-cam-using-autoconnect","text":"A minimal sketch that involves the ESP32WebCam and ESP32Cam classes and incorporates them together with AutoConnect is shown below. This sketch will work with Ai-Thinker ESP32-CAM , which is one of the most popular ESP32 modules with OmniVision OV2640 image sensor. In order to experience this sketch, copy the five files ESP32WebCam.h , ESP32WebCam.cpp , ESP32Cam.h , ESP32Cam.cpp , and ESP32Cam_pins.h from the WebCamServer folder located AutoConnect library examples to the same folder as the sketchbook folder where you placed this sketch. Connect the ESP32-CAM module to your PC and launch the Arduino IDE. Then select the correct board you using from the Tool menu of Arduino IDE and compile it. (Don't forget to open the serial monitor) #include <Arduino.h> #include <WiFi.h> #include <WebServer.h> #include <AutoConnect.h> #include \"ESP32WebCam.h\" const char CAMERA_VIEWER[] = R\"*( { \"title\": \"Camera\", \"uri\": \"/\", \"menu\": false, \"element\": [ { \"name\": \"viewport\", \"type\": \"ACText\", \"format\": \"<img src='http://%s'>\", \"posterior\": \"none\" }, { \"name\": \"discon\", \"type\": \"ACElement\", \"value\": \"<script>window.addEventListener('pagehide',function(){window.stop();});</script>\" } ] } )*\" ; // Declare ESP32-CAM handling interface. It contains ESP-IDF Web Server. ESP32WebCam webcam (ESP32Cam :: CAMERA_MODEL_AI_THINKER); // AutoConnect portal. It contains the WebServer from ESP32 Arduino Core. AutoConnect portal; AutoConnectConfig config; // AutoConnectAux page handler, it starts streaming by adding the ESP32WebCam // streaming endpoint to the src attribute of the img tag on the AutoConnectAux page. String viewer (AutoConnectAux & aux, PageArgument & args) { AutoConnectAux & viewer = * portal.aux( \"/\" ); // Set the Streaming server host, port, and endpoint viewer[ \"viewport\" ].value = WiFi.localIP().toString() + \":\" + String(webcam.getServerPort()) + String(webcam.getStreamPath()); return String(); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); // Start Image sensor if (webcam.sensorInit() != ESP_OK) { Serial.println( \"Camera initialize failed\" ); } // Allow automatic re-connection as long as the WiFi connection is established. config.autoReconnect = true; config.reconnectInterval = 1 ; portal.config(config); // Start the portal, it will launch the WebServer for the portal from inside of AutoConnect. if (portal.begin()) { portal.load(CAMERA_VIEWER); portal.on( \"/\" , viewer); // Start ESP32 Camera Web Server if (webcam.startCameraServer() == ESP_OK) { Serial.printf( \"ESP32WebCam server %s port %u ready \\n \" , WiFi.localIP().toString().c_str(), webcam.getServerPort()); } else { Serial.println( \"ESP32WebCam server start failed\" ); } } } void loop () { portal.handleClient(); } If your ESP32-CAM module still has no connection with any access point, a captive portal will open. Use your cellphone to connect the ESP32-CAM to the access point. When ESP32-CAM successfully connects to the access point, you will see the IP address on the serial monitor. You visit the IP address from your browser, you can see the image captured by the ESP32-CAM. Streaming stops caused by ERR_CONNECTION_RESET Sometimes the browser will throw the above error and the streaming will stop. In the simple sketch above, which does not include the transmission error recovery process, the TCP packet transmission is incomplete due to a weak WiFi signal or other reasons, and the browser will stop loading the image. Send errors can be recovered by incorporating an event handler into the img tag, and an example of its implementation is shown later in this chapter.","title":"Implementing a Streaming Server with ESP32-CAM using AutoConnect"},{"location":"esp32cam.html#program-structure","text":"The sketch of AutoConnect using ESP32WebCam and ESP32Cam classes is divided into several components, which will take a similar form in any sketch application. Their logical components are as follows: Include ESP32WebCam.h header file. #include \"ESP32WebCam.h\" AutoConnectAux defines a custom web page in JSON description. It includes an img tag that displays the captured image. The src attribute of the img tag is not hard-coded and can be dynamically set in a custom web page handler to make the sketch more applicable to various situations. { \"name\" : \"viewport\" , \"type\" : \"ACText\" , \"format\" : \"<img src='http://%s'>\" , \"posterior\" : \"none\" } Insert AutoConnectElement in the JSON description of your custom web page with JavaScript enclosed in <script>~</script> in HTML to stop streaming on page transition. window. addEventListener ( 'pagehide' , function () { window. stop (); }); Why window.stop() is needed That's because image streaming is achieved by continuous loading of Motion JPEG using HTTP multipart/x-mixed-replace keep-alive stream. With this type of MIME content, the server will continue to push the content unless the client explicitly notifies the server of the end of the session. The method of notifying the end of the session varies depending on the client browser, and by issuing window.stop() , the difference in the behavior of each browser is absorbed. Declare ESP32WebCam instance. It accompanies the parameters with the appropriate model specifiers. ESP32WebCam webcam (ESP32Cam :: CAMERA_MODEL_AI_THINKER); For details on identifiers that can be specified as image sensor models, please refer to the APIs described below. Declare AutoConnect instance. If your sketch requires a native web page that is not an AutoConnectAux, you can declare a WebServer instance at the same place to make it easier to call from functions in your sketch. AutoConnect portal; Declare AutoConnectConfig to control WiFi connection behavior if necessary. AutoConnectConfig config; Prepare an AutoConnectAux custom page handler for the declared above AutoConnectAux JSON. Typically, this handler is responsible for handling the ESP32Cam class via the endpoint interface provided by the ESP32Cam class. In the above sketch, we have only given the endpoint (i.e. http://{WiFi.localIP}:3000/_stream ) for streaming by the ESP32WebCam class as the src attribute of the img tag identified id=viewport , since we are focusing on the minimum necessary processing. ESP32WebCam class will deliver the captured image with just this operation. AutoConnectAux & viewer = * portal.aux( \"/\" ); viewer[ \"viewport\" ].value = WiFi.localIP().toString() + \":\" + String(webcam.getServerPort()) + String(webcam.getStreamPath()); For more information about ESP32Cam capability and ESP32WebCam endpoints, please refer to the Endpoint interfaces described below. Using AutoConnectText with format string In the sketch above, the format attribute of AutoConnectText is used to set the src attribute of the img tag. The AutoConnectText format attribute produces the same output as a C-style printf(format, value) , depending on the string that can be derived from the value. printf( \"<img src='http://%s'>\" , \"localhost:3000/_stream\" ); Start the sketch and initialize the camera using ESP32WebCam::sensorInit . ESP_OK will returned on success to initialize the image sensor. ESP32WebCam webcam (ESP32Cam :: CAMERA_MODEL_AI_THINKER); if (webcam.sensorInit() != ESP_OK) { Serial.println( \"Camera initialize failed\" ); } Configure WiFi state control to maintain connection. Usually, AutoConnectConfig::autoReconnect will keep WiFi connection stateful. config.autoReconnect = true; config.reconnectInterval = 1 ; portal.config(config); Start the portal, and load the view page. portal.begin(); portal.load(CAMERA_VIEWER); Register the view page handler and start the streaming server using ESP32WebCam::startCameraServer . ESP_OK will returned on start the streaming server successfully. portal.on( \"/\" , viewer); if (webcam.startCameraServer() == ESP_OK) { Serial.printf( \"ESP32WebCam server ready: %s \\n \" , WiFi.localIP().toString().c_str()); } else { Serial.println( \"ESP32WebCam server start failed\" ); } Loop for portal.handleClient(). The app_httpd.cpp , which is the core of CameraWebServer.ino 's functionality, has a mixture of an interface with the ESP32 Camera Driver and remote control over the network via an HTTP server . While it is highly functional, but it will cause a decline in versatility. ESP32WebCam and ESP32Cam separate the mixed functionality of app_httpd.cpp into two classes, each with a single role. This makes them versatile and simple to use. And they can coexist with AutoConnect. If you only need to stream from the image sensor, you can simplify the sketch structure as in the example above. The simplicity of the sketch is mainly due to the usefulness of the ESP32WebCam and ESP32Cam classes. In driving the ESP32 Camera Driver on the ESP32-CAM module, the sketch interfaces with the ESP32WebCam class and processes the ESP32Cam class through the ESP32WebCam endpoint interface.","title":"Program structure"},{"location":"esp32cam.html#esp32webcam-class-and-esp32cam-class","text":"The ESP32WebCam class has an endpoint interface to allow the sketch to manipulate the image sensor over the network. The sketch can use HTTP GET method to capture images, stream the captured images, and save them to SD card. It also starts its own HTTP server task internally, and this HTTP server runs as a separate task from the WebServer hosted by AutoConnect. The ESP32Cam class is a wrapper that governs the native interface with the ESP32 Camera Driver which is a component of ESP-IDF. It can initialize the sensor, set the sensor characteristics, save and load the settings, and save the captured images to the SD card. In the case of accessing image sensors located across a network, the sketch will usually have a UI to remotely control the ESP32-CAM. If the UI is intended to be a web interface, the sketch will use a request handler that is compatible with the ESP32 WebServer hosted by AutoConnect to serve the manipulation web page. That page can be an AutoConnectAux-based custom web page, or it can be the RequestHanlder callback that can respond to the ESP32 WebServer class . In any case, those UI pages can remotely access the image sensor of the ESP32-CAM module through the HTTP endpoint interface deployed at a specific URL of the HTTP server launched by the ESP32WebCam class, and do the required processing.","title":"ESP32WebCam Class and ESP32Cam Class"},{"location":"esp32cam.html#esp32webcam-features","text":"Run the HTTP server as a background task. Stream Motion JPEG via HTTP multipart/x-mixed-replace MIME. Serves a captured image via HTTP. Instruct the ESP32Cam to save the captured image to the SD card via HTTP. Of these processing requests, the ESP32Cam class is responsible for the ones that actually need to interface with the camera driver. (However, reading from the frame buffer is excluded. ESP32WebCam reads image data directly from the frame buffer of the image sensor without ESP32Cam.) The ESP32Cam class manipulates sensor characteristics, including setting image frame properties, image format settings, and exposure, gain, white balance, and band filter settings. It also saves the captured image to an SD card wired to the ESP32-CAM.","title":"ESP32WebCam features:"},{"location":"esp32cam.html#esp32cam-features","text":"Directs and acquires sensor settings. Save and load the sensor settings to the flash memory on the ESP32 module. Save the captured image to the SD card which is wired to ESP32 module. Save captured images to SD card periodically using an ESP32 built-in hardware timer .","title":"ESP32Cam features:"},{"location":"esp32cam.html#esp32webcam-class-apis","text":"","title":"ESP32WebCam Class APIs"},{"location":"esp32cam.html#constructor","text":"ESP32WebCam( const uint16_t port = ESP32CAM_DEFAULT_HTTPPORT) ESP32WebCam( const ESP32Cam :: CameraId model, const uint16_t port = ESP32CAM_DEFAULT_HTTPPORT) Instantiate ESP32WebCam. The constructor also instantiates ESP32Cam , so there is no need to explicitly declare the ESP32Cam class in the sketch. At the time of declaring the constructor, the camera is not initialized and the HTTP server is not started. Each of them requires a separate dedicated function to be called. Parameters port Port number of the HTTP server that ESP32WebCam starts. Default port number defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h model Specifies the model of the onboard image sensor. The image sensor models that can be specified are as follows: ESP32Cam::CAMERA_MODEL_WROVER_KIT ESP32Cam::CAMERA_MODEL_ESP_EYE ESP32Cam::CAMERA_MODEL_M5STACK_NO_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_V2_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_WIDE ESP32Cam::CAMERA_MODEL_M5STACK_ESP32CAM ESP32Cam::CAMERA_MODEL_M5STACK_UNITCAM ESP32Cam::CAMERA_MODEL_AI_THINKER ESP32Cam::CAMERA_MODEL_TTGO_T_JOURNAL","title":" Constructor"},{"location":"esp32cam.html#getcapturepath","text":"const char * getCapturePath( void ) Get a path containing the first ' / ' of the currently valid endpoint URL to capture. Return value A path of capturing URL. Default path defined by ESP32CAM_DEFAULT_PATH_CAPTURE macro directive in ESP32WebCam.h .","title":" getCapturePath"},{"location":"esp32cam.html#getpromptpath","text":"const char * getPromptPath( void ) Get a path containing the first ' / ' of the currently valid endpoint URL to prompt. Return value A path of prompting URL. Default path defined by ESP32CAM_DEFAULT_PATH_PROMPT macro directive in ESP32WebCam.h .","title":" getPromptPath"},{"location":"esp32cam.html#getserverhandle","text":"httpd_handle_t getServerHandle( void ) Returns the handle of the HTTP server started by ESP32WebCam. Return value Returns the httpd_handle_t value of an HTTP server started by ESP32WebCam. If the HTTP server task is not running, nullptr is returned.","title":" getServerHandle"},{"location":"esp32cam.html#getserverport","text":"uint16_t getServerPort( void ) Returns the port number that the HTTP server on listens to. Return value Returns a port number of an HTTP server started by ESP32WebCam. Default port number defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h","title":" getServerPort"},{"location":"esp32cam.html#getstreampath","text":"const char * getStreamPath( void ) Get a path containing the first ' / ' of the currently valid endpoint URL to streaming. Return value A path of streaming URL. Default path defined by ESP32CAM_DEFAULT_PATH_STREAM macro directive in ESP32WebCam.h .","title":" getStreamPath"},{"location":"esp32cam.html#isserverstarted","text":"bool isServerStarted( void ) Returns a boolean value indicating whether the HTTP server task is running or not. Return value true The HTTP Server tasks is running. false The HTTP server task has not been started.","title":" isServerStarted"},{"location":"esp32cam.html#sensor","text":"ESP32Cam & sensor( void ) Returns a reference to ESP32Cam , which is instantiated internally by ESP32WebCam constructor. Return value A reference to ESP32Cam instance. The image sensor is not initialized just by calling the ESP32WebCam constructor. To initialize the sensor, you need to call the sensorInit() function. ESP32WebCam webcam (); webcam.sensorInit();","title":" sensor"},{"location":"esp32cam.html#sensorinit","text":"esp_err_t sensorInit( void ) esp_err_t sensorInit( const ESP32Cam :: CameraId model) Initialize the image sensor via the ESP32Cam class. The sketch needs to initialize the sensor with the sensorInit function prior to all processing of the image sensor. Parameters model Specifies the model of the onboard image sensor. The image sensor models that can be specified are same as the constructor parameter . Return value ESP_OK An image sensor successfully initialized. ESP_ERR_CAMERA_NOT_SUPPORTED Specified model is not supported. ESP_ERR_CAMERA_NOT_DETECTED An image sensor not detected. ESP_ERR_CAMERA_FAILED_TO_SET_FRAME_SIZE Frame identifier is invalid. ESP_ERR_CAMERA_FAILED_TO_SET_OUT_FORMAT Output image format is invalid. ESP_FAIL Other error occurred.","title":" sensorInit"},{"location":"esp32cam.html#setcapturepath","text":"void setCapturePath( const char * path) Reconfigure the already defined path of the endpoint for capture. Parameters path Specifies the path of the capture endpoint to be set newly, as a string starting with ' / '. If this path is not specified, the default path defined by ESP32CAM_DEFAULT_PATH_CAPTURE macro directive will be assumed.","title":" setCapturePath"},{"location":"esp32cam.html#setpromptpath","text":"void setPromptPath( const char * path) Reconfigure the already defined path of the endpoint for prompt. Parameters path Specifies the path of the prompt endpoint to be set newly, as a string starting with ' / '. If this path is not specified, the default path defined by ESP32CAM_DEFAULT_PATH_PROMPT macro directive will be assumed.","title":" setPromptPath"},{"location":"esp32cam.html#setserverport","text":"void setServerPort( const uint16_t port) Reconfigure the already defined port number of an HTTP server. Parameters port Specifies port number of an HTTP Server. Default port number defined by ESP32CAM_DEFAULT_HTTPPORT macro directive will be assumed.","title":" setServerPort"},{"location":"esp32cam.html#setstreampath","text":"void setStreamPath( const char * path) Reconfigure the already defined path of the endpoint for stream. Parameters path Specifies the path of the stream endpoint to be set newly, as a string starting with ' / '. If this path is not specified, the default path defined by ESP32CAM_DEFAULT_PATH_STREAM macro directive will be assumed.","title":" setStreamPath"},{"location":"esp32cam.html#startcameraserver","text":"esp_err_t startCameraServer( const char * streamPath) esp_err_t startCameraServer( const char * streamPath, const char * capturePath, const char * promptPath) esp_err_t startCameraServer( const char * streamPath, const char * capturePath, const char * promptPath, const uint16_t port) esp_err_t startCameraServer( const char * streamPath, const uint16_t port) esp_err_t startCameraServer( const uint16_t port) esp_err_t startCameraServer( void ) Begins the HTTP server task, and start the endpoint service. By starting the HTTP server task, the endpoint interface provided by ESP32WebCam will be available. Parameters streamPath Specifies the path of the stream endpoint . Default stream path is defined by ESP32CAM_DEFAULT_PATH_STREAM macro directive in ESP32WebCam.h header file. capturePath Specifies the path of the capture endpoint . Default capture path is defined by ESP32CAM_DEFAULT_PATH_CAPTURE macro directive in ESP32WebCam.h header file. promptPath Specifies the path of the prompt endpoint . Default prompt path is defined by ESP32CAM_DEFAULT_PATH_PROMPT macro directive in ESP32WebCam.h header file. port Specifies port number on which the HTTP server listens. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. Return value ESP_OK An HTTP server task successfully started. ESP_ERR_HTTPD_HANDLERS_FULL All slots for registering URI handlers have been consumed. ESP_ERR_HTTPD_ALLOC_MEM Failed to dynamically allocate memory for resource. ESP_ERR_HTTPD_TASK Failed to launch server task/thread. ESP_FAIL Other error occurred. HTTP server task stack size ESP32WebCam allocates 8KB of stack when it starts the HTTP server task. This stack size is larger than the size allocated by the default HTTPD_DEFAULT_CONFIG in ESP-IDF. This is to include the stack consumed by the file system of the SD card triggered by the timer shot. This stack size can be changed as needed, and the default value is defined in the ESP32Cam.h header file as ESP32CAM_TIMERTASK_STACKSIZE .","title":" startCameraServer"},{"location":"esp32cam.html#stopcameraserver","text":"void stopCameraServer( void ) Stop an HTTP server task and free resources.","title":" stopCameraServer"},{"location":"esp32cam.html#esp32webcam-endpoint-interfaces","text":"ESP32WebCam has endpoint interfaces for simple manipulation of image sensors over the network via an internally launched HTTP server, which follows the traditional HTTP request and response, not WebAPI or REST. It supports the HTTP GET 1 method and will be available after the HTTP server is started by the ESP32WebCam::startCameraServer function. If you are using Visual Studio Code as your build system for Arduino sketch, you can easily experiment with the ESP32WebCam endpoint interface using the VSCode extension. REST Client is an excellent VSCode extension that allows you to send HTTP requests directly from within the editor. The following screenshot shows the result of sending an HTTP request directly to the capture endpoint of ESP32WebCam using the REST Client on a VSCode with the PlatformIO build system. The top left editor pane is the sketch code described above, and the bottom pane is the serial monitor output of the sketch. The pane between the top and bottom panes is the REST Client. Run the sketch, and when the serial monitor shows a message that ESP32Cam has started the HTTP server, use the REST client to send an HTTP GET request as GET http://{HOST}:{PORT}/_capture (In the screenshot above, the request is sent to http://192.168.1.19:3000/_capture ) to the capture endpoint. 2 You will see the response of the image captured by ESP32-CAM in the right pane.","title":"ESP32WebCam Endpoint Interfaces"},{"location":"esp32cam.html#the-default-settings-for-the-endpoint-interface-provided-by-esp32webcam-are-as-follows","text":"Endpoint Default path Function Default value defined in ESP32WebCam.h Capture /_capture Responds as a captured image ESP32CAM_DEFAULT_PATH_CAPTURE Prompt /_prompt Save and load the captured image, Save the sensor settings ESP32CAM_DEFAULT_PATH_PROMPT Stream /_stream Stream image ESP32CAM_DEFAULT_PATH_STREAM","title":"The default settings for the endpoint interface provided by ESP32WebCam are as follows:"},{"location":"esp32cam.html#capture","text":"GET http://{HOST}:{PORT}{PATH} The capture endpoint responds captured image with the image/jpeg mime format. Parameters HOST Host address of ESP32-CAM. PORT Port number of HTTP server listening on. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. PATH A path for the capture endpoint. Response code 200 Content body contains captured image data.","title":" Capture"},{"location":"esp32cam.html#prompt","text":"GET http://{HOST}:{PORT}{PATH}?{QUERY} You can use the prompt endpoint to save the captured image to the SD card at that moment or in a timer cycle, save the sensor settings, and load them into the flash memory built into the ESP32 module. The instructions for the prompt action performed by ESP32WebCam are specified as the query string with \" key=value \" form for the parameters of the GET request. Parameters HOST Host address of ESP32-CAM. PORT Port number of HTTP server listening on. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. PATH A path for the capture endpoint. QUERY The QUERY that Prompt can accept are different for each feature. The query formats that can be specified and the corresponding functions are shown below. Response code 202 Request accepted. 400 Query string has syntax error, or Fatal error occurred. Content body has detailed error code.","title":" Prompt"},{"location":"esp32cam.html#the-following-features-are-currently-supported-by-the-prompt-endpoint","text":"Specifying by query string Function Behavior mf=oneshot[&fs={sd|mmc}][&filename=<FILENAME>] One-shot Take a one-shot image and save it to the SD card. mf=timershot[&fs={sd|mmc}][&filename=<FILENAME>][&period=<INTERVAL>] Timer-shot Repeatedly takes a one-shot image at specified an INTERVAL of seconds and saves it to the SD card. mf=distimer Disable timer Suspend timer for Timer-shot mf=entimer Enable timer Resume timer for Timer-shot mf=load Load settings Load the image sensor settings from the NVS mf=save Save settings Save the image sensor settings to the NVS The query formats that can be specified and their corresponding functions are described below. Functions: Specifies with the mf= query. oneshot Capture an image at the requested timing and save them to the SD card. Species either sd or mmc for the fs argument. If the fs argument does not exist, mmc is assumed. Saves the captured image with the file name specified by the filename argument; if the filename argument does not exist, it assumes a file name consisting of a prefix and a timestamp. In that case, the fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h is used as the prefix. timershot Repeatedly takes a one-shot image at specified an INTERVAL of seconds with period argument and saves it to the SD card. Species either sd or mmc for the fs argument. If the fs argument does not exist, mmc is assumed. Saves the captured image to a file whose name consists of the prefix and timestamp suffix specified by the filename argument. If the filename argument does not exist, the prefix will be assumed a fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h header file. distimer Temporarily stops the timer for the timershot . This can be resumed with entimer . entimer Resumes a timer-shot that was temporarily stopped by distimer . load Load the image sensor settings from NVS. save Save the image sensor settings to NVS. Whether it is SD or MMC depends on the hardware The ESP32 Arduino SD library supports two types of SD cards with different interfaces. Which type of SD card is used depends on the ESP32 module and needs to be chosen appropriately. In the case of the Ai-Thinker ESP32-CAM 3 , the ESP32 is wired to the SD slot with each HS2 signal . Hence, We can see from the schematic that it is using MMC.","title":"The following features are currently supported by the prompt endpoint:"},{"location":"esp32cam.html#stream","text":"GET http://{HOST}:{PORT}{PATH} The stream endpoint responds captured image with the image/jpeg mime format with multipart/x-mixed-replace HTTP header. Parameters HOST Host address of ESP32-CAM. PORT Port number of HTTP server listening on. Default port number is 3000 which defined by ESP32CAM_DEFAULT_HTTPPORT macro directive in ESP32WebCam.h header file. PATH A path for the stream endpoint. Response code 200 Content body contains captured image data with multipart boundary.","title":" Stream"},{"location":"esp32cam.html#esp32cam-class-apis","text":"","title":"ESP32Cam Class APIs"},{"location":"esp32cam.html#constructor_1","text":"ESP32Cam() ESP32Cam( const CameraId model) Instantiate ESP32Cam. The image sensor is not initialized just by calling the constructor. To initialize the sensor, you need to call the init function. Parameters model Specifies the model of the onboard image sensor. The image sensor models that can be specified are as follows: ESP32Cam::CAMERA_MODEL_WROVER_KIT ESP32Cam::CAMERA_MODEL_ESP_EYE ESP32Cam::CAMERA_MODEL_M5STACK_NO_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_V2_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_WIDE ESP32Cam::CAMERA_MODEL_M5STACK_ESP32CAM ESP32Cam::CAMERA_MODEL_M5STACK_UNITCAM ESP32Cam::CAMERA_MODEL_AI_THINKER ESP32Cam::CAMERA_MODEL_TTGO_T_JOURNAL","title":" Constructor"},{"location":"esp32cam.html#getstatus","text":"esp_err_t getStatus(camera_status_t * status) Get the camera_status_t data structure from the image sensor. Parameters status Pointer to the buffer to store the acquired camera_status_t structure. Return value ESP_OK camera_status_t is read successfully. ESP_FAIL Image sensor is not initialized.","title":" getStatus"},{"location":"esp32cam.html#getframesize","text":"framesize_t getFramesize( void ) Get the current configuration of the image sensor frame size. Return value framesize_t The framesize_t enumeration value.","title":" getFramesize"},{"location":"esp32cam.html#getframeheight","text":"uint16_t getFrameHeight( void ) Returns the height of the current image frame in pixels. Return value uint16_t Height of the image frame.","title":" getFrameHeight"},{"location":"esp32cam.html#getframewidth","text":"uint16_t getFrameWidth( void ) Returns the width of the current image frame in pixels. Return value uint16_t Width of the image frame.","title":" getFrameWidth"},{"location":"esp32cam.html#init","text":"esp_err_t init( void ) esp_err_t init( const CameraId model) Initialize the image sensor. Parameters model Specifies the model of the onboard image sensor. The image sensor models that can be specified are as follows: ESP32Cam::CAMERA_MODEL_WROVER_KIT ESP32Cam::CAMERA_MODEL_ESP_EYE ESP32Cam::CAMERA_MODEL_M5STACK_NO_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_V2_PSRAM ESP32Cam::CAMERA_MODEL_M5STACK_WIDE ESP32Cam::CAMERA_MODEL_M5STACK_ESP32CAM ESP32Cam::CAMERA_MODEL_M5STACK_UNITCAM ESP32Cam::CAMERA_MODEL_AI_THINKER ESP32Cam::CAMERA_MODEL_TTGO_T_JOURNAL","title":" init"},{"location":"esp32cam.html#loadsettings","text":"esp_err_t loadSettings( const char * key = nullptr ) Load the image sensor settings from NVS in the ESP32 flash. Parameters key Specifies NVS key name. If key is nullptr or not specified, default key which defined by ESP32CAM_NVS_KEYNAME macro directive in ESP32Cam.h header file will be assumed. Return value ESP_OK The image sensor settings has been successfully loaded.","title":" loadSettings"},{"location":"esp32cam.html#savesettings","text":"esp_err_t saveSettings( const char * key = nullptr ) Save the current image sensor settings to NVS in the ESP32 flash. Parameters key Specifies NVS key name. If key is nullptr or not specified, default key which defined by ESP32CAM_NVS_KEYNAME macro directive in ESP32Cam.h header file will be assumed. Return value ESP_OK The image sensor settings has been successfully saved.","title":" saveSettings"},{"location":"esp32cam.html#setstatus","text":"esp_err_t setStatus( const camera_status_t & status) Set the content of camera_status_t structure to the image sensor. Parameters status Reference of the camera_status_t structure. Return value ESP_OK camera_status_t has been set successfully. ESP_FAIL Image sensor is not initialized.","title":" setStatus"},{"location":"esp32cam.html#setframesize","text":"esp_err_t setFramesize( const framesize_t framesize) Set the image sensor frame size. Parameters framesize The framesize_t enumeration value to be set. Return value ESP_OK Framesize has been set. ESP_ERR_CAMERA_FAILED_TO_SET_FRAME_SIZE Image sensor is not initialized, the framesize is invalid, or the pixel format is not JPEG.","title":" setFramesize"},{"location":"esp32cam.html#setimageformat","text":"esp_err_t setImageFormat( const pixformat_t format) Set the image format. Parameters format The pixformat_t enumeration value to be set. Return value ESP_OK Format has been set. ESP_ERR_CAMERA_FAILED_TO_SET_OUT_FORMAT Specified format is invalid. ESP_FAIL Image sensor is not initialized.","title":" setImageFormat"},{"location":"esp32cam.html#oneshot","text":"esp_err_t oneShot(fs :: SDFS & sd, const char * filename = nullptr ) esp_err_t oneShot(fs :: SDMMCFS & mmc, const char * filename = nullptr ) Take a one-shot image and save it to the SD card or MMC. This function writes to a file compliant with the ESP32 Arduino SD library . Either fs::SDFS or fs::SDMMCFS can be specified for the file system that represents sd or mmc . Parameters sd Specifies the SD file system when the SD card is wired with SPI interface. In usually, you can use a SD variable that is instantiated and exported globally by the ESP32 Arduino core. mmc Specifies the SD_MMC file system when the SD card is wired with HS2 interface. In usually, you can use a SD_MMC variable that is instantiated and exported globally by the ESP32 Arduino core. filename Specifies the file name when saving the captured image to the SD card. if the filename does not exist, it assumes a file name consisting of a prefix and a timestamp. In that case, the fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h is used as the prefix. Return value ESP_OK Format has been set. ESP_ERR_NOT_FOUND SD card is not mounted. ESP_FAIL Other error occurred.","title":" oneShot"},{"location":"esp32cam.html#timershot","text":"esp_err_t timerShot( const unsigned long period, fs :: SDFS & sd, const char * filePrefix = nullptr ) esp_err_t timerShot( const unsigned long period, fs :: SDMMCFS & mmc, const char * filePrefix = nullptr ) Repeatedly takes a one-shot image at specified an interval of seconds with period parameter and saves it to the SD card or MMC. This function writes to a file compliant with the ESP32 Arduino SD library . Either fs::SDFS or fs::SDMMCFS can be specified for the file system that represents sd or mmc . Parameters period Specifies the shooting interval time in second unit. sd Specifies the SD file system when the SD card is wired with SPI interface. In usually, you can use a SD variable that is instantiated and exported globally by the ESP32 Arduino core. mmc Specifies the SD_MMC file system when the SD card is wired with HS2 interface. In usually, you can use a SD_MMC variable that is instantiated and exported globally by the ESP32 Arduino core. filePrefix Specifies the prefix of file name when saving the captured image to the SD card. This function saves files each time whose name consists of the prefix and timestamp suffix specified by the filePrefix parameter. If the filePrefix does not exist, it assumes a fixed string defined by the ESP32CAM_GLOBAL_IDENTIFIER macro directive in ESP32Cam.h for the prefix. Return value ESP_OK Format has been set. ESP_ERR_NOT_FOUND SD card is not mounted. ESP_FAIL Other error occurred.","title":" timerShot"},{"location":"esp32cam.html#disabletimershot","text":"void disableTimerShot( void ) Temporarily stops the timerShot . To restart it, call enableTimerShot .","title":" disableTimerShot"},{"location":"esp32cam.html#enabletimershot","text":"void enableTimerShot( void ) Restarts the timerShot that was temporarily stopped by disableTimerShot .","title":" enableTimerShot"},{"location":"esp32cam.html#deq","text":"void deq( void ) Release a semaphore.","title":" deq"},{"location":"esp32cam.html#enq","text":"portBASE_TYPE enq(TickType_t ms) Take a semaphore to prevent resource collisions with the image sensor. ESP32Cam uses a semaphore for each of oneShot and timerShot to prevent image sensor resources from colliding while performing each other's tasks. The enq function reserves a semaphore to wait for a subsequent oneShot or timerShot task. Parameters ms Specifies the maximum waiting time in milliseconds for a semaphore to be released. If portMAX_DELAY is specified, it will wait indefinitely for the semaphore to be released. Return value pdTRUE Semaphore was reserved. !pdTRUE Semaphore was not released within the specified ms time.","title":" enq"},{"location":"esp32cam.html#webcamserver-like-as-camerawebserver","text":"The WebCamServer.ino sketch combines AutoConnectAux's custom web pages with native HTML pages. The image viewer is placed on the native HTML page using the img tag, and the slide-in navigation panel is incorporated using CSS. AutoConnect is only directly involved in the image sensor setup page, which is JSON defined in CAMERA_SETUP_PAGE . The setSensor function in the sketch is a handler for a custom web page for CAMERA_SETUP_PAGE , and its role is to communicate the sensor settings to the ESP32 camera driver via ESP32Cam. In the WebCamServer.ino sketch, most of the front-end is taken care of by the UI, which is a web page written in HTML. The slide-in menu allows navigation to stream images, capture still images, save a one-shot image to the SD card, and the timer-shot. Image streaming and capture are achieved by giving the URLs of the Stream endpoint and Capture endpoint in the src attribute of the img tag in the HTML using JavaScript DOM interface. < body > < li id = \"onair\" onclick = \"stream(!isStreaming())\" > Start Streaming </ li > < img id = \"img-frame\" /> </ body > const onAir = document. getElementById ( 'onair' ); const imgFrame = document. getElementById ( 'img-frame' ); function isStreaming () { status . innerText = null ; return onAir . innerText . startsWith ( \"Stop\" ); } function stream ( onOff ) { if ( onOff && ! isStreaming ()) { window. stop (); imgFrame . src = streamUrl ; onAir . innerText = onAir . innerText . replace ( \"Start\" , \"Stop\" ); content . focus (); } else if ( ! onOff && isStreaming ()) { window. stop (); imgFrame . src = noa ; onAir . innerText = onAir . innerText . replace ( \"Stop\" , \"Start\" ); } } Also, One-shot and timer-shot also use JavaScript Fetch API to send a query string compliant with each function to the Prompt endpoint. < li id = \"oneshot\" onclick = \"oneshot()\" > One-Shot </ li > < li >< label for = \"period\" > Period [s] </ label >< input type = \"number\" name = \"peirod\" id = \"period\" min = \"1\" value = \"1\" pattern = \"\\d*\" /></ li > < li >< input type = \"button\" value = \"ARM\" onclick = \"arm()\" /></ li > var promptUrl = endpoint ( host , promptPath , port ); function endpoint ( host , path , port ) { var url = new URL ( path , \"http://\" + host ); url . port = port ; return url ; } function prompt ( url ) { var res ; stream ( false ); fetch ( url ) . then ( response => { res = \"status:\" + response . status + \" \" ; if ( ! response . ok ) { return response . text (). then ( text => { throw new Error ( text ); }); } else { status . style . color = '#297acc' ; status . innerText = res + response . statusText ; } }) . catch ( err => { var desc = err . message ; if ( err . message . indexOf ( \"0x0103\" , 1 ) > 0 ) { desc = \"SD not mounted\" ; } if ( err . message . indexOf ( \"0x0105\" , 1 ) > 0 ) { desc = \"SD open failed\" ; } status . style . color = '#cc2929' ; status . innerText = res + desc ; }); } function oneshot () { promptUrl . search = \"?mf=oneshot&fs=mmc\" ; prompt ( promptUrl ); } function arm () { promptUrl . search = \"?mf=timershot&fs=mmc&period=\" + document. getElementById ( 'period' ). value ; prompt ( promptUrl ); } The following diagram shows the program structure of the WebCamServer.ino sketch. Its structure is somewhat more complex than the simple sketch presented at the beginning of this chapter because of the native HTML intervening. ESP32WebCam endpoint interface supports only HTTP GET method, it cannot respond to other HTTP methods such as POST. \u21a9 Do not use the REST Client to send requests to the stream endpoints, the REST Client does not fully support multipart/x-mixed-replace mime. \u21a9 When using MMC on AI-Thinker ES32-CAM, the LED flash on the module blinks every time the SD is accessed, because the HS2 DATA1 signal is wired to the driver transistor of the LED FLASH . I can't envision why HS2 DATA1 signal was chosen to drive the LED. \u21a9","title":"WebCamServer like as CameraWebServer"},{"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 . After updating to AutoConnect v1.0.0, established APs disappear from Open SSIDs with ESP32. \u00b6 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 which the examples folder contains. 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. 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. Cannot automatically reconnect to a WiFi Hotspot \u00b6 WiFi Hotspot ability using a cell phone has no official designation name, but it is commonly referred to as a mobile hotspot or a Personal Hotspot. Generally, this feature using data communication with your cellular to ensure the connection to the Internet. AutoConnect allows you to connect to a WiFi hotspot that has been temporarily launched as an access point and then stores a credential for establishing a connection in the same way as a regular fixed access point. However, there's a case where it may not be able to reconnect automatically to a known WiFi hotspot. For security reasons, some device operating systems randomly change the MAC address of the WiFi hotspot at each boot for a hotspot. (Especially iOS14) AutoConnect uses the BSSID to find the known SSID from among WiFi signals being broadcast. (it's the MAC address) This method works if the BSSID that the hotspot originates is fixed, but AutoConnect will not be able to find known SSIDs when it changes. Consider activating the AUTOCONNECT_APKEY_SSID definition if you want to reconnect automatically to a known WiFi hotspot. Cannot immobilize the MAC address of Personal Hotspot We may not be able to immobilize the MAC address of Personal Hotspot on iOS14. This specification change seems to be related to the private network connection enhancement of iOS14 devices. I found this change during the testing phase, but it is not the confirmed information. (iOS14 offers an option to immobilize the MAC address as a client device, but there is still no option to immobilize it where the device became a hotspot) Captive portal does not pop up. \u00b6 If your ESP module is already transparent to the internet, the captive portal screen will not pop up even if AutoConnectConfig::retainPortal is enabled. Some people have mistaken sometimes about the behavioral condition of the Captive portal, it only pops up automatically when the ESP module is disconnected state from the Internet. We will hypothesize that you keep the ESP module with AP_STA mode by specifing the retainPortal and already connect to one of the access points which has Internet transparency as a WiFi client. At this time, your ESP module can already quote the DNS globally. Even if you take out the cellphone and access the esp32ap , the OS of your cellphone will determine that the access point (i.e. esp32ap ) is transparent to the Internet. That is, the captive portal does not pop up. Compile error due to File system header file not found \u00b6 In PlatformIO , it may occur compilation error such as the bellows: In file included from C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ AutoConnect \\ src \\ AutoConnect.h: 30 : 0 , from src / main.cpp: 28 : C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ PageBuilder \\ src \\ PageBuilder.h: 88 : 27 : fatal error: SPIFFS.h: No such file or directory In file included from C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ AutoConnect \\ src \\ AutoConnect.h: 30 , from src \\ main.cpp: 28 : C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ PageBuilder \\ src \\ PageBuilder.h: 93 : 17 : fatal error: LittleFS.h: No such file or directory This compilation error is due to PlatformIO's Library Dependency Finder not being able to detect #include with default mode chain . Chain mode does not recursively evaluate .cpp files. However, AutoConnect determines the default file system at compile time, depending on the platform. In order for LDF to detect it correctly, it is necessary to recursively scan #include of the header file, which depends on the file system used. To avoid compilation errors in PlatformIO, specify lib_ldf_mode in platformio.ini as follows: [env] lib_ldf_mode = deep You should specify deep with lib_ldf_mode . Compile error occurs due to the text section exceeds \u00b6 When building the sketch, you may receive a compilation error message similar that the text section exceeds the available space on the board . This error occurs with ESP32 arduino core 2.0.0 or later. Since ESP32 arduino core 2.0.0, the object size of the library tends to be oversized, and the AutoConnect object size is also bloated. And also for some example sketches such as mqttRSSI, the BIN size after linkage does not fit in the default partition scheme. I'm aware of this issue 1 and trying to reduce the size of the AutoConnect object, but for now, changing the partition table at build is the most effective workaround. See How much memory does AutoConnect consume? for information on how to change the partition table. Compile error that 'EEPROM' was not declared in this scope \u00b6 If the user sketch includes the header file as EEPROM.h , this compilation error may occur depending on the order of the #include directives. AutoConnectCredentials.h including in succession linked from AutoConnect.h defines NO_GLOBAL_EEPROM internally, so if your sketch includes EEPROM.h after AutoConnect.h , the EEPROM global variable will be lost. If you use EEPROM with your sketch, declare #include <EEPROM.h> in front of #include <AutoConnect.h> . Compile error that 'ESPhttpUpdate' was not declared in this scope \u00b6 If the user sketch includes the header file as ESP8266httpUpdate.h , this compilation error may occur depending on the order of the #include directives. AutoConnectUpdate.h including in succession linked from AutoConnect.h defines NO_GLOBAL_HTTPUPDATE internally, so if your sketch includes ESP8266httpUpdate.h after AutoConnect.h , the ESPhttpUpdate global variable will be lost. You can avoid a compile error in one of two ways: Disable an AutoConnectUpdate feature if you don't need. You can disable the AutoConnectUpdate feature by commenting out the AUTOCONNECT_USE_UPDATE macro in the AutoConnectDefs.h header file. #define AUTOCONNECT_USE_UPDATE Change the order of #include directives. With the Sketch, #include <ESP8266httpUpdate.h> before #include <AutoConnect.h> . 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 1 st -WiFi.begin . ESP8266 remembers the last SSID successfully connected and will use at the next. It means SoftAP will only start up when the first WiFi.begin() fails. The saved SSID would be cleared by WiFi.disconnect() with WIFI_STA mode. If you do not want automatic reconnection, you can erase the memorized SSID with the following simple sketch. #include <ESP8266WiFi.h> void setup () { delay( 1000 ); Serial.begin( 115200 ); WiFi.mode(WIFI_STA); delay( 100 ); WiFi.begin(); if (WiFi.waitForConnectResult() == WL_CONNECTED) { WiFi.disconnect(); while (WiFi.status() == WL_CONNECTED) delay( 100 ); } Serial.println( \"WiFi disconnected.\" ); } void loop () { delay( 1000 ); } You can interactively check the WiFi state of ESP8266. Please try ESPShaker . It is ESP8266 interactive serial command processor. Does not response from /_ac. \u00b6 Probably WiFi.begin failed with the specified SSID. Activating the debug printing will help you to track down the cause. 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 2 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 do I detach the ArdunoJson? \u00b6 If you don't use ArduinoJson at all, you can detach it from the library. By detaching ArduinoJson, the binary size after compilation can be reduced. You can implement custom Web pages with your sketches without using ArduinoJson. Its method is described in Custom Web pages w/o JSON . To completely remove ArduinoJson at compile-time from the binary, you need to define a special #define directive for it. And if you define the directive, you will not be able to use the OTA update with the update server feature as well as AutoConnectAux described by JSON. To exclude ArduinoJson at compile-time, give the following #define directive as a compiler option such as the arduino-cli or PlatformIO . #define AUTOCONNECT_NOUSE_JSON For example, add the following description to the [env] section of the platformio.ini file with the build-flags . build-flags = -DAUTOCONNECT_NOUSE_JSON 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 <a></a> tag in the generating HTML. < a style = \"background-color:SteelBlue; display:inline-block; padding:7px 13px; text-decoration:none;\" href = \"/_ac\" > MENU </ a > How much memory does AutoConnect consume? \u00b6 Sketch size \u00b6 For ESP8266 It increases about 53K bytes compared to the case without AutoConnect. A sketch size of the most simple example introduced in the Getting started is about 330K bytes. (270K byte without AutoConnect) For ESP32 The BIN size of the sketch grows to over 1M bytes. In the case of a sketch with many custom Web pages, when applying the partition table for the default scheme, the remaining flash size that can be utilized by the user application may be less than 200K bytes. Therefore, it is advisable to resize the partition to make more available space for the application. The ESP32 arduino core has various partition schemes , and you can choose it according to your Sketch feature. You can change the partition scheme from the Tools > Partition Scheme menu of Arduino IDE. Change the partition scheme with PlatformIO Use board_build.partitions directive with platformio.ini . [env:esp32dev] board_build.partitions = min_spiffs.csv Details for the PlatformIO documentation . Heap size \u00b6 It consumes about 2K bytes in the static and about 12K bytes are consumed at the moment when menu executed. How placing a style-qualified AutoConnectText horizontally? \u00b6 When the style parameter is specified for AutoConnectText , it is always enclosed by the <div> tag, so the element placement direction is vertical and subsequent elements cannot be horizontal. If you want to place an element after AutoConnectText with the style, you can place the AutoConnectText horizontally by specifying the display CSS property with inline or inline-block in the style value. { \"name\" : \"text1\" , \"type\" : \"ACText\" , \"value\" : \"Hello,\" , \"style\" : \"display:inline;color:#f5ad42;font-weight:bold;margin-right:3px\" }, { \"name\" : \"text2\" , \"type\" : \"ACText\" , \"value\" : \"world\" , \"posterior\" : \"br\" } See also AutoConnectText chapter, CSS Flow Layout by MDN . How placing HTML elements undefined in AutoConnectElements? \u00b6 AutoConnectElement can be applied in many cases when trying to place HTML elements that are undefined in AutoConnectElemets on custom Web pages. See Handling the custom Web Pages section. I cannot complete to Wi-Fi login from smartphone. \u00b6 Because AutoConnect does not send a login success response to the captive portal requests from the smartphone. The login success response varies iOS, Android and Windows. By analyzing the request URL of different login success inquiries for each OS, the correct behavior can be implemented, but not yet. Please resets ESP8266 from the AutoConnect menu. I cannot see the custom Web page. \u00b6 If the Sketch is correct, a JSON syntax error may have occurred. In this case, activate the AC_DEBUG and rerun. If you take the message of JSON syntax error, the Json Assistant helps syntax checking. This online tool is provided by the author of ArduinoJson and is most consistent for the AutoConnect. Saved credentials are wrong or lost. \u00b6 A structure of AutoConnect saved credentials has changed two times throughout enhancement with v1.0.3 and v1.1.0. In particular, due to enhancements in v1.1.0, AutoConnectCredential data structure has lost the backward compatibility with previous versions. You must erase the flash of the ESP module using the esptool completely to save the credentials correctly with v1.1.0. esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash Some AutoConnect page is cut off. \u00b6 It may be two possibilities as follows: Packet loss during transmission due to a too weak WiFi signal. Heap is insufficient memory. AutoConnect entrusts HTML generation to PageBuilder that makes heavy use the String::concatenate function and causes memory fragmentation. This is a structural problem with PageBuilder, but it is difficult to solve immediately. If this issue produces with your sketch, Reloading the page may recover. Also, you can check the memory running out status by rebuilding the Sketch with PageBuilder's debug log option turned on. If the heap memory is insufficient, the following message is displayed on the serial console. [PB] Failed building, free heap:<Size of free heap> Submit element in a custom Web page does not react. \u00b6 Is there the AutoConnectElements element named SUBMIT in the custom Web page? (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. You can not use SUBMIT as the element name of AutoConnectElements in a custom Web page that declares the AutoConnectSubmit element. Unable to change any macro definitions by the Sketch. \u00b6 The various macro definitions that determine the configuration of AutoConnect cannot be redefined by hard-coding with Sketch. The compilation unit has a different AutoConnect library itself than the Sketch, and the configuration definitions in AutoConnectDefs.h are quoted in the compilation for AutoConnect only. For example, the following Sketch does not enable AC_DEBUG and does not change HTTP port also the menu background color: #define AC_DEBUG // No effect #define AUTOCONNECT_HTTPPORT 8080 // No effect #define AUTOCONNECT_MENUCOLOR_BACKGROUND \"#696969\" // No effect #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect Portal; void setup () { Portal.begin(); } void loop () { Portal.handleClient(); } To enable them, edit AutoConnectDefs.h as the library source code directly, or supply them as the external parameters using a build system like PlatformIO with platformio.ini : platform = espressif8266 board = nodemcuv2 board_build.f_cpu = 160000000L board_build.f_flash = 80000000L board_build.flash_mode = dio board_build.filesystem = littlefs build_flags = -DAC_DEBUG -DAUTOCONNECT_HTTPPORT = 8080 -DAUTOCONNECT_MENUCOLOR_BACKGROUND = '\"#696969\"' Unauthorize error without prompting the login dialog. \u00b6 The custom web pages that require authentication will occur unauthorized error always without prompting the login dialog under the captive portal state on some OS. This is a captive portal restriction and expected behavior. The captive portal web browser is almost a complete web browser, but while the captive portal session restricts the response to WWW-authenticate requests. (In intrinsically, the captive portal is a mechanism for authentication in itself) Once you exit from the captive portal session and connect SoftAP IP directly afresh, you can access custom web pages along with prompting a login dialog. Still, not stable with my sketch. \u00b6 If AutoConnect behavior is not stable with your sketch, you can try the following measures. 1. Change WiFi channel \u00b6 Both ESP8266 and ESP32 can only work on one channel at any given moment. This will cause your station to lose connectivity on the channel hosting the captive portal. If the channel of the AP which you want to connect is different from the SoftAP channel, the operation of the captive portal will not respond with the screen of the AutoConnect connection attempt remains displayed. In such a case, please try to configure the channel with AutoConnectConfig to match the access point. AutoConnect portal; AutoConnectConfig config; config.channel = 3 ; // Specifies a channel number that matches the AP portal.config(config); // Apply channel configuration portal.begin(); // Start the portal Channel selection guide Espressif Systems has released a channel selection guide . 2. Change the arduino core version \u00b6 I recommend change installed an arduino core version to the upstream when your sketch is not stable with AutoConnect on each board. with ESP8266 arduino core \u00b6 You can select the lwIP variant to contribute for the stable behavior. The lwIP v2 Lower memory option of Arduino IDE for core version 2.4.2 is based on the lwIP-v2. On the other hand, the core version 2.5.0 upstream is based on the lwIP-2.1.2 stable release. You can select the option from Arduino IDE as Tool menu, if you are using ESP8266 core 2.5.0. It can be select lwIP v2 Lower Memory option. (not lwIP v2 Lower Memory (no features) ) It is expected to improve response performance and stability. with ESP32 arduino core \u00b6 The arduino-esp32 is still under development. It is necessary to judge whether the problem cause of the core or AutoConnect. Trace the log with the esp32 core and the AutoConnect debug option enabled for problem diagnosis and please you check the issue of arduino-esp32 . The problem that your sketch possesses may already have been solved. 3. Turn on the debug log options \u00b6 To fully enable for the AutoConnect debug logging options, change the following two files. AutoConnectDefs.h #define AC_DEBUG PageBuilder.h 3 #define PB_DEBUG How to enable the AC_DEBUG, PB_DEBUG See Debug Print section, and one similarly too. 4. Reports the issue to AutoConnect Github repository \u00b6 If you can not solve AutoConnect problems please report to Issues . And please make your question comprehensively, not a statement. Include all relevant information to start the problem diagnostics as follows: 4 Hardware module Arduino core version Including the upstream commit ID if necessary Operating System which you use Your smartphone OS and version (Especially for Android) Your AP information (IP, channel) if related lwIP variant Problem description If you have a STACK DUMP decoded result with formatted by the code block tag the Sketch code with formatted by the code block tag (Reduce to the reproducible minimum code for the problem) Debug messages output (Including arduino core) I will make efforts to solve as quickly as possible. But I would like you to know that it is not always possible. Thank you. In this case, the underlying factor is mainly the bloat of ESP-IDF. This issue is also being discussed by many contributors of the Arduino core development community and efforts are underway to make a solution. Refs: espressif/arduino-esp32/issue#5630 \u21a9 This issue has been resolved in ESP8266 core 2.5.0 and later. \u21a9 PageBuilder.h exists in the libraries/PageBuilder/src directory under your sketch folder. \u21a9 Without this information, the reproducibility of the problem is reduced, making diagnosis and analysis difficult. \u21a9","title":"FAQ"},{"location":"faq.html#after-connected-autoconnect-menu-performs-but-no-happens","text":"If you can access the AutoConnect root path as http://ESP8266IPADDRESS/_ac from browser, probably the Sketch uses ESP8266WebServer::handleClient() without AutoConnect::handleRequest() . For AutoConnect menus to work properly, call AutoConnect::handleRequest() after ESP8266WebServer::handleClient() invoked, or use AutoConnect::handleClient() . AutoConnect::handleClient() is equivalent ESP8266WebServer::handleClient combined AutoConnect::handleRequest() . See also the explanation here .","title":" After connected, AutoConnect menu performs but no happens."},{"location":"faq.html#after-updating-to-autoconnect-v100-established-aps-disappear-from-open-ssids-with-esp32","text":"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 which the examples folder contains. 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.","title":" After updating to AutoConnect v1.0.0, established APs disappear from Open SSIDs with ESP32."},{"location":"faq.html#an-esp8266ap-as-softap-was-connected-but-captive-portal-does-not-start","text":"Captive portal detection could not be trapped. It is necessary to disconnect and reset ESP8266 to clear memorized connection data in ESP8266. Also, It may be displayed on the smartphone if the connection information of esp8266ap is wrong. In that case, delete the connection information of esp8266ap memorized by the smartphone once.","title":" An esp8266ap as SoftAP was connected but Captive portal does not start."},{"location":"faq.html#cannot-automatically-reconnect-to-a-wifi-hotspot","text":"WiFi Hotspot ability using a cell phone has no official designation name, but it is commonly referred to as a mobile hotspot or a Personal Hotspot. Generally, this feature using data communication with your cellular to ensure the connection to the Internet. AutoConnect allows you to connect to a WiFi hotspot that has been temporarily launched as an access point and then stores a credential for establishing a connection in the same way as a regular fixed access point. However, there's a case where it may not be able to reconnect automatically to a known WiFi hotspot. For security reasons, some device operating systems randomly change the MAC address of the WiFi hotspot at each boot for a hotspot. (Especially iOS14) AutoConnect uses the BSSID to find the known SSID from among WiFi signals being broadcast. (it's the MAC address) This method works if the BSSID that the hotspot originates is fixed, but AutoConnect will not be able to find known SSIDs when it changes. Consider activating the AUTOCONNECT_APKEY_SSID definition if you want to reconnect automatically to a known WiFi hotspot. Cannot immobilize the MAC address of Personal Hotspot We may not be able to immobilize the MAC address of Personal Hotspot on iOS14. This specification change seems to be related to the private network connection enhancement of iOS14 devices. I found this change during the testing phase, but it is not the confirmed information. (iOS14 offers an option to immobilize the MAC address as a client device, but there is still no option to immobilize it where the device became a hotspot)","title":" Cannot automatically reconnect to a WiFi Hotspot"},{"location":"faq.html#captive-portal-does-not-pop-up","text":"If your ESP module is already transparent to the internet, the captive portal screen will not pop up even if AutoConnectConfig::retainPortal is enabled. Some people have mistaken sometimes about the behavioral condition of the Captive portal, it only pops up automatically when the ESP module is disconnected state from the Internet. We will hypothesize that you keep the ESP module with AP_STA mode by specifing the retainPortal and already connect to one of the access points which has Internet transparency as a WiFi client. At this time, your ESP module can already quote the DNS globally. Even if you take out the cellphone and access the esp32ap , the OS of your cellphone will determine that the access point (i.e. esp32ap ) is transparent to the Internet. That is, the captive portal does not pop up.","title":" Captive portal does not pop up."},{"location":"faq.html#compile-error-due-to-file-system-header-file-not-found","text":"In PlatformIO , it may occur compilation error such as the bellows: In file included from C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ AutoConnect \\ src \\ AutoConnect.h: 30 : 0 , from src / main.cpp: 28 : C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ PageBuilder \\ src \\ PageBuilder.h: 88 : 27 : fatal error: SPIFFS.h: No such file or directory In file included from C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ AutoConnect \\ src \\ AutoConnect.h: 30 , from src \\ main.cpp: 28 : C: \\ Users \\ < user > \\ Documents \\ Arduino \\ libraries \\ PageBuilder \\ src \\ PageBuilder.h: 93 : 17 : fatal error: LittleFS.h: No such file or directory This compilation error is due to PlatformIO's Library Dependency Finder not being able to detect #include with default mode chain . Chain mode does not recursively evaluate .cpp files. However, AutoConnect determines the default file system at compile time, depending on the platform. In order for LDF to detect it correctly, it is necessary to recursively scan #include of the header file, which depends on the file system used. To avoid compilation errors in PlatformIO, specify lib_ldf_mode in platformio.ini as follows: [env] lib_ldf_mode = deep You should specify deep with lib_ldf_mode .","title":" Compile error due to File system header file not found"},{"location":"faq.html#compile-error-occurs-due-to-the-text-section-exceeds","text":"When building the sketch, you may receive a compilation error message similar that the text section exceeds the available space on the board . This error occurs with ESP32 arduino core 2.0.0 or later. Since ESP32 arduino core 2.0.0, the object size of the library tends to be oversized, and the AutoConnect object size is also bloated. And also for some example sketches such as mqttRSSI, the BIN size after linkage does not fit in the default partition scheme. I'm aware of this issue 1 and trying to reduce the size of the AutoConnect object, but for now, changing the partition table at build is the most effective workaround. See How much memory does AutoConnect consume? for information on how to change the partition table.","title":" Compile error occurs due to the text section exceeds"},{"location":"faq.html#compile-error-that-eeprom-was-not-declared-in-this-scope","text":"If the user sketch includes the header file as EEPROM.h , this compilation error may occur depending on the order of the #include directives. AutoConnectCredentials.h including in succession linked from AutoConnect.h defines NO_GLOBAL_EEPROM internally, so if your sketch includes EEPROM.h after AutoConnect.h , the EEPROM global variable will be lost. If you use EEPROM with your sketch, declare #include <EEPROM.h> in front of #include <AutoConnect.h> .","title":" Compile error that 'EEPROM' was not declared in this scope"},{"location":"faq.html#compile-error-that-esphttpupdate-was-not-declared-in-this-scope","text":"If the user sketch includes the header file as ESP8266httpUpdate.h , this compilation error may occur depending on the order of the #include directives. AutoConnectUpdate.h including in succession linked from AutoConnect.h defines NO_GLOBAL_HTTPUPDATE internally, so if your sketch includes ESP8266httpUpdate.h after AutoConnect.h , the ESPhttpUpdate global variable will be lost. You can avoid a compile error in one of two ways: Disable an AutoConnectUpdate feature if you don't need. You can disable the AutoConnectUpdate feature by commenting out the AUTOCONNECT_USE_UPDATE macro in the AutoConnectDefs.h header file. #define AUTOCONNECT_USE_UPDATE Change the order of #include directives. With the Sketch, #include <ESP8266httpUpdate.h> before #include <AutoConnect.h> .","title":" Compile error that 'ESPhttpUpdate' was not declared in this scope"},{"location":"faq.html#connection-lost-immediately-after-establishment-with-ap","text":"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.","title":" Connection lost immediately after establishment with AP"},{"location":"faq.html#data-saved-to-eeprom-is-different-from-my-sketch-wrote","text":"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.","title":" Data saved to EEPROM is different from my sketch wrote."},{"location":"faq.html#does-not-appear-esp8266ap-in-smartphone","text":"Maybe it is successfully connected at the 1 st -WiFi.begin . ESP8266 remembers the last SSID successfully connected and will use at the next. It means SoftAP will only start up when the first WiFi.begin() fails. The saved SSID would be cleared by WiFi.disconnect() with WIFI_STA mode. If you do not want automatic reconnection, you can erase the memorized SSID with the following simple sketch. #include <ESP8266WiFi.h> void setup () { delay( 1000 ); Serial.begin( 115200 ); WiFi.mode(WIFI_STA); delay( 100 ); WiFi.begin(); if (WiFi.waitForConnectResult() == WL_CONNECTED) { WiFi.disconnect(); while (WiFi.status() == WL_CONNECTED) delay( 100 ); } Serial.println( \"WiFi disconnected.\" ); } void loop () { delay( 1000 ); } You can interactively check the WiFi state of ESP8266. Please try ESPShaker . It is ESP8266 interactive serial command processor.","title":" Does not appear esp8266ap in smartphone."},{"location":"faq.html#does-not-response-from-_ac","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 2 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-do-i-detach-the-ardunojson","text":"If you don't use ArduinoJson at all, you can detach it from the library. By detaching ArduinoJson, the binary size after compilation can be reduced. You can implement custom Web pages with your sketches without using ArduinoJson. Its method is described in Custom Web pages w/o JSON . To completely remove ArduinoJson at compile-time from the binary, you need to define a special #define directive for it. And if you define the directive, you will not be able to use the OTA update with the update server feature as well as AutoConnectAux described by JSON. To exclude ArduinoJson at compile-time, give the following #define directive as a compiler option such as the arduino-cli or PlatformIO . #define AUTOCONNECT_NOUSE_JSON For example, add the following description to the [env] section of the platformio.ini file with the build-flags . build-flags = -DAUTOCONNECT_NOUSE_JSON","title":" How do I detach the ArdunoJson?"},{"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 <a></a> tag in the generating HTML. < a style = \"background-color:SteelBlue; display:inline-block; padding:7px 13px; text-decoration:none;\" href = \"/_ac\" > MENU </ a >","title":" How locate the link button to the  AutoConnect menu?"},{"location":"faq.html#how-much-memory-does-autoconnect-consume","text":"","title":" How much memory does AutoConnect consume?"},{"location":"faq.html#sketch-size","text":"For ESP8266 It increases about 53K bytes compared to the case without AutoConnect. A sketch size of the most simple example introduced in the Getting started is about 330K bytes. (270K byte without AutoConnect) For ESP32 The BIN size of the sketch grows to over 1M bytes. In the case of a sketch with many custom Web pages, when applying the partition table for the default scheme, the remaining flash size that can be utilized by the user application may be less than 200K bytes. Therefore, it is advisable to resize the partition to make more available space for the application. The ESP32 arduino core has various partition schemes , and you can choose it according to your Sketch feature. You can change the partition scheme from the Tools > Partition Scheme menu of Arduino IDE. Change the partition scheme with PlatformIO Use board_build.partitions directive with platformio.ini . [env:esp32dev] board_build.partitions = min_spiffs.csv Details for the PlatformIO documentation .","title":"Sketch size"},{"location":"faq.html#heap-size","text":"It consumes about 2K bytes in the static and about 12K bytes are consumed at the moment when menu executed.","title":"Heap size"},{"location":"faq.html#how-placing-a-style-qualified-autoconnecttext-horizontally","text":"When the style parameter is specified for AutoConnectText , it is always enclosed by the <div> tag, so the element placement direction is vertical and subsequent elements cannot be horizontal. If you want to place an element after AutoConnectText with the style, you can place the AutoConnectText horizontally by specifying the display CSS property with inline or inline-block in the style value. { \"name\" : \"text1\" , \"type\" : \"ACText\" , \"value\" : \"Hello,\" , \"style\" : \"display:inline;color:#f5ad42;font-weight:bold;margin-right:3px\" }, { \"name\" : \"text2\" , \"type\" : \"ACText\" , \"value\" : \"world\" , \"posterior\" : \"br\" } See also AutoConnectText chapter, CSS Flow Layout by MDN .","title":" How placing a style-qualified AutoConnectText horizontally?"},{"location":"faq.html#how-placing-html-elements-undefined-in-autoconnectelements","text":"AutoConnectElement can be applied in many cases when trying to place HTML elements that are undefined in AutoConnectElemets on custom Web pages. See Handling the custom Web Pages section.","title":" How placing HTML elements undefined in AutoConnectElements?"},{"location":"faq.html#i-cannot-complete-to-wi-fi-login-from-smartphone","text":"Because AutoConnect does not send a login success response to the captive portal requests from the smartphone. The login success response varies iOS, Android and Windows. By analyzing the request URL of different login success inquiries for each OS, the correct behavior can be implemented, but not yet. Please resets ESP8266 from the AutoConnect menu.","title":" I cannot complete to Wi-Fi login from smartphone."},{"location":"faq.html#i-cannot-see-the-custom-web-page","text":"If the Sketch is correct, a JSON syntax error may have occurred. In this case, activate the AC_DEBUG and rerun. If you take the message of JSON syntax error, the Json Assistant helps syntax checking. This online tool is provided by the author of ArduinoJson and is most consistent for the AutoConnect.","title":" I cannot see the custom Web page."},{"location":"faq.html#saved-credentials-are-wrong-or-lost","text":"A structure of AutoConnect saved credentials has changed two times throughout enhancement with v1.0.3 and v1.1.0. In particular, due to enhancements in v1.1.0, AutoConnectCredential data structure has lost the backward compatibility with previous versions. You must erase the flash of the ESP module using the esptool completely to save the credentials correctly with v1.1.0. esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash","title":" Saved credentials are wrong or lost."},{"location":"faq.html#some-autoconnect-page-is-cut-off","text":"It may be two possibilities as follows: Packet loss during transmission due to a too weak WiFi signal. Heap is insufficient memory. AutoConnect entrusts HTML generation to PageBuilder that makes heavy use the String::concatenate function and causes memory fragmentation. This is a structural problem with PageBuilder, but it is difficult to solve immediately. If this issue produces with your sketch, Reloading the page may recover. Also, you can check the memory running out status by rebuilding the Sketch with PageBuilder's debug log option turned on. If the heap memory is insufficient, the following message is displayed on the serial console. [PB] Failed building, free heap:<Size of free heap>","title":" Some AutoConnect page is cut off."},{"location":"faq.html#submit-element-in-a-custom-web-page-does-not-react","text":"Is there the AutoConnectElements element named SUBMIT in the custom Web page? (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. You can not use SUBMIT as the element name of AutoConnectElements in a custom Web page that declares the AutoConnectSubmit element.","title":" Submit element in a custom Web page does not react."},{"location":"faq.html#unable-to-change-any-macro-definitions-by-the-sketch","text":"The various macro definitions that determine the configuration of AutoConnect cannot be redefined by hard-coding with Sketch. The compilation unit has a different AutoConnect library itself than the Sketch, and the configuration definitions in AutoConnectDefs.h are quoted in the compilation for AutoConnect only. For example, the following Sketch does not enable AC_DEBUG and does not change HTTP port also the menu background color: #define AC_DEBUG // No effect #define AUTOCONNECT_HTTPPORT 8080 // No effect #define AUTOCONNECT_MENUCOLOR_BACKGROUND \"#696969\" // No effect #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect Portal; void setup () { Portal.begin(); } void loop () { Portal.handleClient(); } To enable them, edit AutoConnectDefs.h as the library source code directly, or supply them as the external parameters using a build system like PlatformIO with platformio.ini : platform = espressif8266 board = nodemcuv2 board_build.f_cpu = 160000000L board_build.f_flash = 80000000L board_build.flash_mode = dio board_build.filesystem = littlefs build_flags = -DAC_DEBUG -DAUTOCONNECT_HTTPPORT = 8080 -DAUTOCONNECT_MENUCOLOR_BACKGROUND = '\"#696969\"'","title":" Unable to change any macro definitions by the Sketch."},{"location":"faq.html#unauthorize-error-without-prompting-the-login-dialog","text":"The custom web pages that require authentication will occur unauthorized error always without prompting the login dialog under the captive portal state on some OS. This is a captive portal restriction and expected behavior. The captive portal web browser is almost a complete web browser, but while the captive portal session restricts the response to WWW-authenticate requests. (In intrinsically, the captive portal is a mechanism for authentication in itself) Once you exit from the captive portal session and connect SoftAP IP directly afresh, you can access custom web pages along with prompting a login dialog.","title":" Unauthorize error without prompting the login dialog."},{"location":"faq.html#still-not-stable-with-my-sketch","text":"If AutoConnect behavior is not stable with your sketch, you can try the following measures.","title":" Still, not stable with my sketch."},{"location":"faq.html#1-change-wifi-channel","text":"Both ESP8266 and ESP32 can only work on one channel at any given moment. This will cause your station to lose connectivity on the channel hosting the captive portal. If the channel of the AP which you want to connect is different from the SoftAP channel, the operation of the captive portal will not respond with the screen of the AutoConnect connection attempt remains displayed. In such a case, please try to configure the channel with AutoConnectConfig to match the access point. AutoConnect portal; AutoConnectConfig config; config.channel = 3 ; // Specifies a channel number that matches the AP portal.config(config); // Apply channel configuration portal.begin(); // Start the portal Channel selection guide Espressif Systems has released a channel selection guide .","title":"1. Change WiFi channel"},{"location":"faq.html#2-change-the-arduino-core-version","text":"I recommend change installed an arduino core version to the upstream when your sketch is not stable with AutoConnect on each board.","title":"2. Change the arduino core version"},{"location":"faq.html#with-esp8266-arduino-core","text":"You can select the lwIP variant to contribute for the stable behavior. The lwIP v2 Lower memory option of Arduino IDE for core version 2.4.2 is based on the lwIP-v2. On the other hand, the core version 2.5.0 upstream is based on the lwIP-2.1.2 stable release. You can select the option from Arduino IDE as Tool menu, if you are using ESP8266 core 2.5.0. It can be select lwIP v2 Lower Memory option. (not lwIP v2 Lower Memory (no features) ) It is expected to improve response performance and stability.","title":"with ESP8266 arduino core"},{"location":"faq.html#with-esp32-arduino-core","text":"The arduino-esp32 is still under development. It is necessary to judge whether the problem cause of the core or AutoConnect. Trace the log with the esp32 core and the AutoConnect debug option enabled for problem diagnosis and please you check the issue of arduino-esp32 . The problem that your sketch possesses may already have been solved.","title":"with ESP32 arduino core"},{"location":"faq.html#3-turn-on-the-debug-log-options","text":"To fully enable for the AutoConnect debug logging options, change the following two files. AutoConnectDefs.h #define AC_DEBUG PageBuilder.h 3 #define PB_DEBUG How to enable the AC_DEBUG, PB_DEBUG See Debug Print section, and one similarly too.","title":"3. Turn on the debug log options"},{"location":"faq.html#4-reports-the-issue-to-autoconnect-github-repository","text":"If you can not solve AutoConnect problems please report to Issues . And please make your question comprehensively, not a statement. Include all relevant information to start the problem diagnostics as follows: 4 Hardware module Arduino core version Including the upstream commit ID if necessary Operating System which you use Your smartphone OS and version (Especially for Android) Your AP information (IP, channel) if related lwIP variant Problem description If you have a STACK DUMP decoded result with formatted by the code block tag the Sketch code with formatted by the code block tag (Reduce to the reproducible minimum code for the problem) Debug messages output (Including arduino core) I will make efforts to solve as quickly as possible. But I would like you to know that it is not always possible. Thank you. In this case, the underlying factor is mainly the bloat of ESP-IDF. This issue is also being discussed by many contributors of the Arduino core development community and efforts are underway to make a solution. Refs: espressif/arduino-esp32/issue#5630 \u21a9 This issue has been resolved in ESP8266 core 2.5.0 and later. \u21a9 PageBuilder.h exists in the libraries/PageBuilder/src directory under your sketch folder. \u21a9 Without this information, the reproducibility of the problem is reduced, making diagnosis and analysis difficult. \u21a9","title":"4. Reports the issue to AutoConnect Github repository"},{"location":"filesystem.html","text":"Selecting appropriate Filesystem \u00b6 There are two file systems for utilizing the onboard flash on the ESP8266 or the ESP32, SPIFFS and LittleFS. The file system to be applied is determined at the time of the sketch built. AutoConnect will determine as a file system to apply either SPIFFS or LittleFS according to the macro definition in AutoConnectDefs.h and has the following two definitions to include the file system. #define AC_USE_SPIFFS #define AC_USE_LITTLEFS The AC_USE_SPIFFS and AC_USE_LITTLEFS macros declare which file system to apply. Their definitions are contradictory to each other and you cannot activate both at the same time . Each platform supported by AutoConnect has a default file system, which is LittleFS for ESP8266 and SPIFFS for ESP32. Neither AC_USE_SPIFFS nor AC_USE_LITTLE_FS needs to be explicitly defined as long as you use the default file system. The default file system for each platform is assumed. SPIFFS has deprecated for ESP8266 SPIFFS has deprecated on EP8266 core. AC_USE_SPIFFS flag indicates that the migration to LittleFS has not completed for the Sketch with ESP8266. You will get a warning message when you compile a sketch using SPIFFS. Also, LittleFS support on the ESP32 is expected to be in the future beyond Arduino ESP32 core v2 . If you want to use the LittleFS library on your ESP32, you must use a third-party source provided externally. The file system intended by the sketch must match the file system applied to AutoConnect. (i.e. it is provided by the definitions of AC_USE_SPIFFS and AC_USE_LITTLEFS ) For example, if the sketch includes LittleFS.h , but AC_USE_SPIFFS is defined, the sketch will not be able to sucessfully acces the built file system. Filesystem applied to PageBuilder must match to AutoConnect \u00b6 Also, PageBuilder has a definition of file system choices to use, similar to AutoConnect. It is the definition of PB_USE_SPIFFS and PB_USE_LITTLEFS in PageBuilder.h of PageBuilder library source, and its role is the same as these of AutoConnect. #define PB_USE_SPIFFS #define PB_USE_LITTLEFS Note the version of each library Support for AC_USE_SPIFFS / AC_USE_LITTLEFS and PB_USE_SPIFFS / PB_USE_LITLTEFS is from AutoConnect 1.3.0 and PageBuilder 1.5.0 and later. To determine the file system to be used \u00b6 The most direct way is to edit the library source AutoConnectDefs.h directly and uncomment the definition of #define AC_USE_SPIFFS or #define AC_USE_LITTLES . In addition to that editing work, the definitions of PB_USE_SPIFFS and PB_USE_LITTLEFS in PageBuilder.h also need to be changed. Their definitions must match the AC_USE_SPIFFS and AC_USE_LITTLEFS definitions in AutoConnectDefs.h . PB_USE_SPIFFS enabled and AC_USE_LITTLEFS enabled state is not allowed, and vice-versa. However, this way makes the AutoConnect library inconsistent and may include your unintended file system on a project-by-project basis. By using PlatformIO , you can efficiently select a file system. That way, you can choose any file system for each project without polluting the library source. To apply a different file system for each project without modifying the library source code, add the following build_flags directive to platformio.ini as a project configuration file of each project. [env:esp_wroom_02] platform = espressif8266 board = esp_wroom_02 framework = arduino lib_extra_dirs = ~/Documents/Arduino/libraries lib_ldf_mode = deep build_flags = -DAC_USE_SPIFFS -DPB_USE_SPIFFS upload_speed = 921600 monitor_speed = 115200 The build_flags as build options allows PlatformIO can provide preprocessor macro definitions. -D name for build_flags , which specifies a predefined content, is treated as 1 equal to the #define directive. Library dependency search with PlatformIO If #include <LITTLEFS.h> becomes Not Found with PlatformIO built, try specifying lib_ldf_mode=deep with platformio.ini . Due to the deep nesting by preprocessor instructions, the include file cannot be detected by the chain mode (nested include search) of PlatformIO's Library Dependency Finder . See also FAQ . LittleFS for ESP8266 with PlatformIO The SPIFFS file system is used by default in order to keep legacy projects compatible. To choose LittleFS as the file system with ESP8266 platform, it should be explicitly specified using board_build.filesystem option in platformio.ini as follows: [env:esp_wroom_02] platform = espressif8266 framework = arduino board = esp_wroom_02 board_build.filesystem = littlefs ... Practical situations where AutoConnect uses a file system \u00b6 AutoConnect has the ability to use the file system that is: Place the custom web page defined in the JSON document in an external file and separate it from the sketch source code. This approach allows you to change the layout design of your custom web page by simply modifying the external file without recompiling the sketch. Use the AutoConnectFile element to upload some parameters that control sketch execution to the file system on the ESP module. You can upload from the browser on the client PC via OTA. The following is an example of a scenario that embodies the combination of these facilities. The sketch below controls LED that blinks like heartbeat by PWM (Pulse-Width Modulation) from ESP8266. Custom web page contains an AutoConnectFile element that allows you to upload a parameter file to the ESP module from the browser on the client PC. And place the custom web page as a JSON document on the LittleFS of the ESP module. Screenshot \u00b6 The sketch UI of this scenario provides as shown by the screenshot below: It arranges in a very simple style to focus on how the sketch incorporating AutoConnect will handle the file system. This custom web page is loaded from LittleFS at the beginning of the sketch processing and has already been uploaded to LittleFS on the ESP8266. Custom Web page JSON definition \u00b6 It has a file name as \" custom_pages.json \" and has two pages whose URI are \" / \" and \" /set \". An AutoConnectFile element named \" param \" is placed to upload a file from a client browser that contains the parameters to determine the behavior of this sketch. (ie. LED blinking cycle of the heartbeat) After selecting the parameter file to upload, click the AutoConnectSubmit element named \" set \". This will upload the selected file to LittleF on the ESP8266 module and start processing the sketch-coded \" /set \" page handler. [ { \"title\" : \"Heartbeat\" , \"uri\" : \"/\" , \"menu\" : true , \"element\" : [ { \"name\" : \"param\" , \"type\" : \"ACFile\" , \"label\" : \"Parameter file:\" , \"store\" : \"fs\" }, { \"name\" : \"set\" , \"type\" : \"ACSubmit\" , \"value\" : \"SET\" , \"uri\" : \"/set\" } ] }, { \"title\" : \"Heartbeat\" , \"uri\" : \"/set\" , \"menu\" : false , \"element\" : [ { \"name\" : \"param\" , \"type\" : \"ACText\" } ] } ] Parameter file \u00b6 You can make the parameters that determine the heartbeat cycle with the JSON definition using your favorite text editor as follows: { \"led\" : 16 , \"freq\" : 1000 , \"range\" : 511 , \"cycle\" : 2 } We use PWM to make the LED blinking gently repeat like a heartbeat. In addition, we also need the interval time to blink. We will put these values in the parameter file. led : Blinking LED assignment pin (Depending on your ESP8266 module) freq : PWM frequency [ms] (milliseconds unit) range : PWM range (511 ~ 1023, 511 ~ 767 is recommended for smooth blinking) cycle : Heartbeat cycle [s] (seconds unit. 4 seconds or less recommended) Save the text file with these settings as param.json on your PC. You can upload this file to the ESP8266 module using the AutoConnectFile element named param above. When executing a sketch, the settings described in this file will be read by the /set custom web page handler to control the analog output of the ESP8266 module. The sketch \u00b6 Below is the final sketch that allows the LED to blink like a heartbeat according to the settings contained in the two external files custome_pages.json and param.json mentioned above. #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <LittleFS.h> #include <AutoConnect.h> #include <ArduinoJson.h> AutoConnect portal; AutoConnectConfig config; // File names const char * paramFile = \"param.json\" ; const char * auxFile = \"custom_pages.json\" ; // Parameters for LED PWM control unsigned int led = 0 ; unsigned long freq; unsigned long range; unsigned int cycle; const unsigned long reso = 10 ; int duty; int increase; unsigned long tmCycle; unsigned long tmStep; String onSet (AutoConnectAux & aux, PageArgument & args) { StaticJsonDocument < 128 > doc; // Open uploaded parameter and parse parameters with JSON File param = LittleFS.open(paramFile, \"r\" ); if (param) { DeserializationError error = deserializeJson(doc, param); if (error) { aux[ \"param\" ].value = \"JSON de-serialization failed: \" + String(error.c_str()); } else { // Parsing the parameter JSON was successful. // Read the parameters as JSON document from the uploaded parameter file. led = doc[ \"led\" ]; freq = doc[ \"freq\" ]; range = doc[ \"range\" ]; cycle = doc[ \"cycle\" ]; // Set PWM conditions analogWriteFreq(freq); analogWriteRange(range); increase = ((range / cycle) / reso) / 2 ; duty = 0 ; tmCycle = millis(); tmStep = tmCycle; // Echo back uploaded parameters to Custom web page String result; serializeJson(doc, result); aux[ \"param\" ].value = result; } param.close(); } else aux[ \"param\" ].value = String(paramFile) + String( \" open error\" ); return String(); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); LittleFS.begin(); // Load Custom web pages from LittleFS File aux = LittleFS.open(auxFile, \"r\" ); if (aux) { // Attach Custom web page and handler portal.load(aux); portal.on( \"/set\" , onSet); // Exclude the HOME item from the menu as the custom web page will // be placed in the root path. config.menuItems = 0x00ff & ~ (AC_MENUITEM_HOME | AC_MENUITEM_DEVINFO); config.ota = AC_OTA_BUILTIN; // You can even update this sketch remotely portal.config(config); // You can close the file once the custom web page has finished loading. aux.close(); } else { Serial.print(auxFile); Serial.println( \" open error\" ); } portal.begin(); } void loop () { if (led) { // The heartbeat begins after the led parameter will set. if (millis() - tmStep > abs(increase)) { duty += increase; if (duty < 0 ) duty = 0 ; analogWrite(led, duty); tmStep = millis(); } if (millis() - tmCycle > (cycle * 1000 ) / 2 ) { increase *= -1 ; tmCycle = millis(); } } portal.handleClient(); } This final sketch consists of four components: Include appropriate header files : Include the appropriate file system header files to operate the external files of the ESP8266 module by the sketch. For LitteleFS, it is #include <LittleFS.h> . Also, since we wrote the parameter setting file in JSON, we will deserialize it using ArduinoJson . The header required for the deserialization process is #include <ArduinoJson.h> . setup : In the sketch setup phase, the procedure is similar to other sketches when using AutoConnect. In this case, the following steps are appended to apply the file system. Start the file system as LittleFS. Then open the custom web page definition file. Upload this file as a LittleFS file on the ESP8266 module in advance. Arduino can handle the opened file as a stream, so register the file stream with AutoConnect using the AutoConnect::load function. This procedure is also detailed in the documentation Loading & saving AutoConnectElements with JSON . loop : In the loop, the duty is calculated and analog output is performed to the LED pin. Duty is a value for PWM. PWM is a modulation method that can adjust strength of electric power by turning the pulse train on and off at regular intervals and change the on-time width. In this sketch, the LED on-time is dynamically changed and supplied as the PWM duty to achieve the slow blinking like the heartbeat. The loop calculates this dynamic on-time change from the heartbeat cycle time ( cycle setting of param.json ) and executes analogWrite at the appropriate timing. The freq value in the parameter settings indicates the regular interval of the PWM. Do not use delay in a loop to create time variation for PWM It is a fault often found in careless sketches. An HTTP request is sent to the ESP8266 module each time you interact with the AutoConnect menu from the client browser. The request is properly answered by the AutoConnect::handleClient function. The delay function in the loop obstructs the flow of its processing. Remember that the sketching process will be suspended for the time period you specify by the delay. /set custom web page handler : It is named onSet function in above sketch. The onSet handler retrieves PWM settings using ArduinoJson deserialization from the uploaded param.json file. Each fetched setting value is stored in each global variable. The loop function refers to that value to achieve PWM pulse control.","title":"Using Filesystem"},{"location":"filesystem.html#selecting-appropriate-filesystem","text":"There are two file systems for utilizing the onboard flash on the ESP8266 or the ESP32, SPIFFS and LittleFS. The file system to be applied is determined at the time of the sketch built. AutoConnect will determine as a file system to apply either SPIFFS or LittleFS according to the macro definition in AutoConnectDefs.h and has the following two definitions to include the file system. #define AC_USE_SPIFFS #define AC_USE_LITTLEFS The AC_USE_SPIFFS and AC_USE_LITTLEFS macros declare which file system to apply. Their definitions are contradictory to each other and you cannot activate both at the same time . Each platform supported by AutoConnect has a default file system, which is LittleFS for ESP8266 and SPIFFS for ESP32. Neither AC_USE_SPIFFS nor AC_USE_LITTLE_FS needs to be explicitly defined as long as you use the default file system. The default file system for each platform is assumed. SPIFFS has deprecated for ESP8266 SPIFFS has deprecated on EP8266 core. AC_USE_SPIFFS flag indicates that the migration to LittleFS has not completed for the Sketch with ESP8266. You will get a warning message when you compile a sketch using SPIFFS. Also, LittleFS support on the ESP32 is expected to be in the future beyond Arduino ESP32 core v2 . If you want to use the LittleFS library on your ESP32, you must use a third-party source provided externally. The file system intended by the sketch must match the file system applied to AutoConnect. (i.e. it is provided by the definitions of AC_USE_SPIFFS and AC_USE_LITTLEFS ) For example, if the sketch includes LittleFS.h , but AC_USE_SPIFFS is defined, the sketch will not be able to sucessfully acces the built file system.","title":"Selecting appropriate Filesystem"},{"location":"filesystem.html#filesystem-applied-to-pagebuilder-must-match-to-autoconnect","text":"Also, PageBuilder has a definition of file system choices to use, similar to AutoConnect. It is the definition of PB_USE_SPIFFS and PB_USE_LITTLEFS in PageBuilder.h of PageBuilder library source, and its role is the same as these of AutoConnect. #define PB_USE_SPIFFS #define PB_USE_LITTLEFS Note the version of each library Support for AC_USE_SPIFFS / AC_USE_LITTLEFS and PB_USE_SPIFFS / PB_USE_LITLTEFS is from AutoConnect 1.3.0 and PageBuilder 1.5.0 and later.","title":"Filesystem applied to PageBuilder must match to AutoConnect"},{"location":"filesystem.html#to-determine-the-file-system-to-be-used","text":"The most direct way is to edit the library source AutoConnectDefs.h directly and uncomment the definition of #define AC_USE_SPIFFS or #define AC_USE_LITTLES . In addition to that editing work, the definitions of PB_USE_SPIFFS and PB_USE_LITTLEFS in PageBuilder.h also need to be changed. Their definitions must match the AC_USE_SPIFFS and AC_USE_LITTLEFS definitions in AutoConnectDefs.h . PB_USE_SPIFFS enabled and AC_USE_LITTLEFS enabled state is not allowed, and vice-versa. However, this way makes the AutoConnect library inconsistent and may include your unintended file system on a project-by-project basis. By using PlatformIO , you can efficiently select a file system. That way, you can choose any file system for each project without polluting the library source. To apply a different file system for each project without modifying the library source code, add the following build_flags directive to platformio.ini as a project configuration file of each project. [env:esp_wroom_02] platform = espressif8266 board = esp_wroom_02 framework = arduino lib_extra_dirs = ~/Documents/Arduino/libraries lib_ldf_mode = deep build_flags = -DAC_USE_SPIFFS -DPB_USE_SPIFFS upload_speed = 921600 monitor_speed = 115200 The build_flags as build options allows PlatformIO can provide preprocessor macro definitions. -D name for build_flags , which specifies a predefined content, is treated as 1 equal to the #define directive. Library dependency search with PlatformIO If #include <LITTLEFS.h> becomes Not Found with PlatformIO built, try specifying lib_ldf_mode=deep with platformio.ini . Due to the deep nesting by preprocessor instructions, the include file cannot be detected by the chain mode (nested include search) of PlatformIO's Library Dependency Finder . See also FAQ . LittleFS for ESP8266 with PlatformIO The SPIFFS file system is used by default in order to keep legacy projects compatible. To choose LittleFS as the file system with ESP8266 platform, it should be explicitly specified using board_build.filesystem option in platformio.ini as follows: [env:esp_wroom_02] platform = espressif8266 framework = arduino board = esp_wroom_02 board_build.filesystem = littlefs ...","title":"To determine the file system to be used"},{"location":"filesystem.html#practical-situations-where-autoconnect-uses-a-file-system","text":"AutoConnect has the ability to use the file system that is: Place the custom web page defined in the JSON document in an external file and separate it from the sketch source code. This approach allows you to change the layout design of your custom web page by simply modifying the external file without recompiling the sketch. Use the AutoConnectFile element to upload some parameters that control sketch execution to the file system on the ESP module. You can upload from the browser on the client PC via OTA. The following is an example of a scenario that embodies the combination of these facilities. The sketch below controls LED that blinks like heartbeat by PWM (Pulse-Width Modulation) from ESP8266. Custom web page contains an AutoConnectFile element that allows you to upload a parameter file to the ESP module from the browser on the client PC. And place the custom web page as a JSON document on the LittleFS of the ESP module.","title":"Practical situations where AutoConnect uses a file system"},{"location":"filesystem.html#screenshot","text":"The sketch UI of this scenario provides as shown by the screenshot below: It arranges in a very simple style to focus on how the sketch incorporating AutoConnect will handle the file system. This custom web page is loaded from LittleFS at the beginning of the sketch processing and has already been uploaded to LittleFS on the ESP8266.","title":"Screenshot"},{"location":"filesystem.html#custom-web-page-json-definition","text":"It has a file name as \" custom_pages.json \" and has two pages whose URI are \" / \" and \" /set \". An AutoConnectFile element named \" param \" is placed to upload a file from a client browser that contains the parameters to determine the behavior of this sketch. (ie. LED blinking cycle of the heartbeat) After selecting the parameter file to upload, click the AutoConnectSubmit element named \" set \". This will upload the selected file to LittleF on the ESP8266 module and start processing the sketch-coded \" /set \" page handler. [ { \"title\" : \"Heartbeat\" , \"uri\" : \"/\" , \"menu\" : true , \"element\" : [ { \"name\" : \"param\" , \"type\" : \"ACFile\" , \"label\" : \"Parameter file:\" , \"store\" : \"fs\" }, { \"name\" : \"set\" , \"type\" : \"ACSubmit\" , \"value\" : \"SET\" , \"uri\" : \"/set\" } ] }, { \"title\" : \"Heartbeat\" , \"uri\" : \"/set\" , \"menu\" : false , \"element\" : [ { \"name\" : \"param\" , \"type\" : \"ACText\" } ] } ]","title":"Custom Web page JSON definition"},{"location":"filesystem.html#parameter-file","text":"You can make the parameters that determine the heartbeat cycle with the JSON definition using your favorite text editor as follows: { \"led\" : 16 , \"freq\" : 1000 , \"range\" : 511 , \"cycle\" : 2 } We use PWM to make the LED blinking gently repeat like a heartbeat. In addition, we also need the interval time to blink. We will put these values in the parameter file. led : Blinking LED assignment pin (Depending on your ESP8266 module) freq : PWM frequency [ms] (milliseconds unit) range : PWM range (511 ~ 1023, 511 ~ 767 is recommended for smooth blinking) cycle : Heartbeat cycle [s] (seconds unit. 4 seconds or less recommended) Save the text file with these settings as param.json on your PC. You can upload this file to the ESP8266 module using the AutoConnectFile element named param above. When executing a sketch, the settings described in this file will be read by the /set custom web page handler to control the analog output of the ESP8266 module.","title":"Parameter file"},{"location":"filesystem.html#the-sketch","text":"Below is the final sketch that allows the LED to blink like a heartbeat according to the settings contained in the two external files custome_pages.json and param.json mentioned above. #include <Arduino.h> #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <LittleFS.h> #include <AutoConnect.h> #include <ArduinoJson.h> AutoConnect portal; AutoConnectConfig config; // File names const char * paramFile = \"param.json\" ; const char * auxFile = \"custom_pages.json\" ; // Parameters for LED PWM control unsigned int led = 0 ; unsigned long freq; unsigned long range; unsigned int cycle; const unsigned long reso = 10 ; int duty; int increase; unsigned long tmCycle; unsigned long tmStep; String onSet (AutoConnectAux & aux, PageArgument & args) { StaticJsonDocument < 128 > doc; // Open uploaded parameter and parse parameters with JSON File param = LittleFS.open(paramFile, \"r\" ); if (param) { DeserializationError error = deserializeJson(doc, param); if (error) { aux[ \"param\" ].value = \"JSON de-serialization failed: \" + String(error.c_str()); } else { // Parsing the parameter JSON was successful. // Read the parameters as JSON document from the uploaded parameter file. led = doc[ \"led\" ]; freq = doc[ \"freq\" ]; range = doc[ \"range\" ]; cycle = doc[ \"cycle\" ]; // Set PWM conditions analogWriteFreq(freq); analogWriteRange(range); increase = ((range / cycle) / reso) / 2 ; duty = 0 ; tmCycle = millis(); tmStep = tmCycle; // Echo back uploaded parameters to Custom web page String result; serializeJson(doc, result); aux[ \"param\" ].value = result; } param.close(); } else aux[ \"param\" ].value = String(paramFile) + String( \" open error\" ); return String(); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); LittleFS.begin(); // Load Custom web pages from LittleFS File aux = LittleFS.open(auxFile, \"r\" ); if (aux) { // Attach Custom web page and handler portal.load(aux); portal.on( \"/set\" , onSet); // Exclude the HOME item from the menu as the custom web page will // be placed in the root path. config.menuItems = 0x00ff & ~ (AC_MENUITEM_HOME | AC_MENUITEM_DEVINFO); config.ota = AC_OTA_BUILTIN; // You can even update this sketch remotely portal.config(config); // You can close the file once the custom web page has finished loading. aux.close(); } else { Serial.print(auxFile); Serial.println( \" open error\" ); } portal.begin(); } void loop () { if (led) { // The heartbeat begins after the led parameter will set. if (millis() - tmStep > abs(increase)) { duty += increase; if (duty < 0 ) duty = 0 ; analogWrite(led, duty); tmStep = millis(); } if (millis() - tmCycle > (cycle * 1000 ) / 2 ) { increase *= -1 ; tmCycle = millis(); } } portal.handleClient(); } This final sketch consists of four components: Include appropriate header files : Include the appropriate file system header files to operate the external files of the ESP8266 module by the sketch. For LitteleFS, it is #include <LittleFS.h> . Also, since we wrote the parameter setting file in JSON, we will deserialize it using ArduinoJson . The header required for the deserialization process is #include <ArduinoJson.h> . setup : In the sketch setup phase, the procedure is similar to other sketches when using AutoConnect. In this case, the following steps are appended to apply the file system. Start the file system as LittleFS. Then open the custom web page definition file. Upload this file as a LittleFS file on the ESP8266 module in advance. Arduino can handle the opened file as a stream, so register the file stream with AutoConnect using the AutoConnect::load function. This procedure is also detailed in the documentation Loading & saving AutoConnectElements with JSON . loop : In the loop, the duty is calculated and analog output is performed to the LED pin. Duty is a value for PWM. PWM is a modulation method that can adjust strength of electric power by turning the pulse train on and off at regular intervals and change the on-time width. In this sketch, the LED on-time is dynamically changed and supplied as the PWM duty to achieve the slow blinking like the heartbeat. The loop calculates this dynamic on-time change from the heartbeat cycle time ( cycle setting of param.json ) and executes analogWrite at the appropriate timing. The freq value in the parameter settings indicates the regular interval of the PWM. Do not use delay in a loop to create time variation for PWM It is a fault often found in careless sketches. An HTTP request is sent to the ESP8266 module each time you interact with the AutoConnect menu from the client browser. The request is properly answered by the AutoConnect::handleClient function. The delay function in the loop obstructs the flow of its processing. Remember that the sketching process will be suspended for the time period you specify by the delay. /set custom web page handler : It is named onSet function in above sketch. The onSet handler retrieves PWM settings using ArduinoJson deserialization from the uploaded param.json file. Each fetched setting value is stored in each global variable. The loop function refers to that value to achieve PWM pulse control.","title":"The sketch"},{"location":"gettingstarted.html","text":"Let's do the most simple sketch \u00b6 Open the Arduino IDE, write the following sketch and upload it. The feature of this sketch is that the SSID and Password are not coded. #include <ESP8266WiFi.h> // Replace with WiFi.h for ESP32 #include <ESP8266WebServer.h> // Replace with WebServer.h for ESP32 #include <AutoConnect.h> ESP8266WebServer Server; // Replace with WebServer for ESP32 AutoConnect Portal (Server); void rootPage () { char content[] = \"Hello, world\" ; Server.send( 200 , \"text/plain\" , content); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); Server.on( \"/\" , rootPage); if (Portal.begin()) { Serial.println( \"WiFi connected: \" + WiFi.localIP().toString()); } } void loop () { Portal.handleClient(); } The above code can be applied to ESP8266. To apply to ESP32, replace ESP8266WebServer class with WebServer and include WiFi.h and WebServer.h of arduino-esp32 appropriately. Run at first \u00b6 After about 30 seconds, if the ESP8266 cannot connect to nearby Wi-Fi spot, you pull out your smartphone and open Wi-Fi settings from the Settings Apps. You can see the esp8266ap 1 in the list of \"CHOOSE A NETWORK...\" . Then tap the esp8266ap and enter password 12345678 , a something screen pops up automatically as shown below. This is the AutoConnect statistics screen. This screen displays the current status of the established connection, WiFi mode, IP address, free memory size, and etc. Also, the hamburger icon is the control menu of AutoConnect seems at the upper right. By tap the hamburger icon, the control menu appears as the below. Join to the new access point \u00b6 Here, tap \"Configure new AP\" to connect the new access point then the SSID configuration screen would be shown. Enter the SSID and Passphrase and tap apply to start connecting the access point. Can be configured with static IP Since v1.1.0, Configure new AP menu can configure for WIFI_STA with static IP. Connection establishment \u00b6 After connection established, the current status screen will appear. It is already connected to WLAN with WiFi mode as WIFI_AP_STA and the IP connection status is displayed there including the SSID. Then at this screen, you have two options for the next step. For one, continues execution of the Sketch while keeping this connection. You can access ESP8266 via browser through the established IP address after cancel to \" Log in \" by upper right on the screen. Or, \" RESET \" can be selected. The ESP8266 resets and reboots. After that, immediately before the connection will be restored automatically with WIFI_STA mode. Run for usually \u00b6 The IP address of ESP8266 would be displayed on the serial monitor after connection restored. Please access its address from the browser. The \"Hello, world\" page will respond. It's the page that was handled by in the Sketch with \" on \" function of ESP8266WebServer . window.onload = function() { Gifffer(); }; When applied to ESP32, SSID will appear as esp32ap . \u21a9","title":"Getting started"},{"location":"gettingstarted.html#lets-do-the-most-simple-sketch","text":"Open the Arduino IDE, write the following sketch and upload it. The feature of this sketch is that the SSID and Password are not coded. #include <ESP8266WiFi.h> // Replace with WiFi.h for ESP32 #include <ESP8266WebServer.h> // Replace with WebServer.h for ESP32 #include <AutoConnect.h> ESP8266WebServer Server; // Replace with WebServer for ESP32 AutoConnect Portal (Server); void rootPage () { char content[] = \"Hello, world\" ; Server.send( 200 , \"text/plain\" , content); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); Server.on( \"/\" , rootPage); if (Portal.begin()) { Serial.println( \"WiFi connected: \" + WiFi.localIP().toString()); } } void loop () { Portal.handleClient(); } The above code can be applied to ESP8266. To apply to ESP32, replace ESP8266WebServer class with WebServer and include WiFi.h and WebServer.h of arduino-esp32 appropriately.","title":"Let's do the most simple sketch"},{"location":"gettingstarted.html#run-at-first","text":"After about 30 seconds, if the ESP8266 cannot connect to nearby Wi-Fi spot, you pull out your smartphone and open Wi-Fi settings from the Settings Apps. You can see the esp8266ap 1 in the list of \"CHOOSE A NETWORK...\" . Then tap the esp8266ap and enter password 12345678 , a something screen pops up automatically as shown below. This is the AutoConnect statistics screen. This screen displays the current status of the established connection, WiFi mode, IP address, free memory size, and etc. Also, the hamburger icon is the control menu of AutoConnect seems at the upper right. By tap the hamburger icon, the control menu appears as the below.","title":" Run at first"},{"location":"gettingstarted.html#join-to-the-new-access-point","text":"Here, tap \"Configure new AP\" to connect the new access point then the SSID configuration screen would be shown. Enter the SSID and Passphrase and tap apply to start connecting the access point. Can be configured with static IP Since v1.1.0, Configure new AP menu can configure for WIFI_STA with static IP.","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. In this example, it is trying to publish a WiFi signal strength being received ESP8266 through the services on the cloud that can visualize the live data streams for IoT. Using the IoT platform provided by ThingSpeak \u2122, the ESP8266 publishes RSSI values to ThingSpeak MQTT broker channel via the MQTT client library. This example is a good indication of the usefulness of AutoConnect, as RSSI values can typically measure different intensities for each access point. By simply adding a few lines to the Sketch, you do not have to rewrite and upload the Sketch 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. Sketch publishes messages \u00b6 The mqttRSSI.ino sketch registered in the AutoConnect GitHub repository is the complete code for publishing RSSI to the ThingSpeak channel. It is a sketch with the AutoConnectAux extension pages that allow you to flexibly configure the channel information you create as ThingSpeak channels. Parameters for the ThingSpeak MQTT channels Various settings of the MQTT Setting for the ThingSpeak channels via the above AutoConnectAux are following: Server : mqtt3.thingspeak.com Channel ID : Specify the channel ID that can be confirmed with ThingSpeak My Channels page . User Key : Specify the User API Key of the API Keys that can be confirmed with ThingSpeak My Profile page . API Key : Specify the Write API Key that can be confirmed by following navigate to \" ThingSpeak My Channels > Your Channel Name > API Keys Tab > Write API Key \". Publish messages \u00b6 After upload and reboot complete, the message publishing will start via the access point now set. The message carries RSSI as the current WiFi signal strength. The signal strength variations in RSSI are displayed on ThingSpeak's Channel status screen. How embed to your sketches \u00b6 For the client sketches, the code required to connect to WiFi is the following four parts only. #include directive 3 Include AutoConnect.h header file behind the include of ESP8266WiFi.h . Declare AutoConnect The declaration of the AutoConnect variable is not accompanied by ESP8266WebServer. Invokes \"begin()\" Call AutoConnect::begin . If you need to assign a static IP address, executes AutoConnectConfig before that. Performs \"handleClent()\" in \"loop()\" Invokes AutoConnect::handleClient() at inside loop() to enable the AutoConnect menu. window.onload = function() { Gifffer(); }; As of March 21, 2018. \u21a9 '454951' in the example above, but your channel ID should be different. \u21a9 #include <ESP8266WebServer.h> does not necessary for uses only client. \u21a9","title":"How to embed"},{"location":"howtoembed.html#embed-the-autoconnect-to-the-sketch","text":"Here 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. In this example, it is trying to publish a WiFi signal strength being received ESP8266 through the services on the cloud that can visualize the live data streams for IoT. Using the IoT platform provided by ThingSpeak \u2122, the ESP8266 publishes RSSI values to ThingSpeak MQTT broker channel via the MQTT client library. This example is a good indication of the usefulness of AutoConnect, as RSSI values can typically measure different intensities for each access point. By simply adding a few lines to the Sketch, you do not have to rewrite and upload the Sketch 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#sketch-publishes-messages","text":"The mqttRSSI.ino sketch registered in the AutoConnect GitHub repository is the complete code for publishing RSSI to the ThingSpeak channel. It is a sketch with the AutoConnectAux extension pages that allow you to flexibly configure the channel information you create as ThingSpeak channels. Parameters for the ThingSpeak MQTT channels Various settings of the MQTT Setting for the ThingSpeak channels via the above AutoConnectAux are following: Server : mqtt3.thingspeak.com Channel ID : Specify the channel ID that can be confirmed with ThingSpeak My Channels page . User Key : Specify the User API Key of the API Keys that can be confirmed with ThingSpeak My Profile page . API Key : Specify the Write API Key that can be confirmed by following navigate to \" ThingSpeak My Channels > Your Channel Name > API Keys Tab > Write API Key \".","title":"Sketch publishes messages"},{"location":"howtoembed.html#publish-messages","text":"After upload and reboot complete, the message publishing will start via the access point now set. The message carries RSSI as the current WiFi signal strength. The signal strength variations in RSSI are displayed on ThingSpeak's Channel status screen.","title":"Publish messages"},{"location":"howtoembed.html#how-embed-to-your-sketches","text":"For the client sketches, the code required to connect to WiFi is the following four parts only. #include directive 3 Include AutoConnect.h header file behind the include of ESP8266WiFi.h . Declare AutoConnect The declaration of the AutoConnect variable is not accompanied by ESP8266WebServer. Invokes \"begin()\" Call AutoConnect::begin . If you need to assign a static IP address, executes AutoConnectConfig before that. Performs \"handleClent()\" in \"loop()\" Invokes AutoConnect::handleClient() at inside loop() to enable the AutoConnect menu. window.onload = function() { Gifffer(); }; As of March 21, 2018. \u21a9 '454951' in the example above, but your channel ID should be different. \u21a9 #include <ESP8266WebServer.h> does not necessary for uses only client. \u21a9","title":"How embed to your sketches"},{"location":"license.html","text":"MIT License Copyright \u00a9 2018-2022 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 The following parameters of AutoConnectConfig affect the behavior and control a logic sequence of AutoConnect::begin function. These parameters are evaluated on a case-by-case basis and may not be valid in all situations. The Sketch must consider the role of these parameters and the conditions under which they will work as intended. You need to understand what happens when using these parameters in combination. autoReconnect : Attempts re-connect with past SSID by saved credential. autoRise : Controls starting the captive portal. immediateStart : Starts the captive portal immediately, without the 1 st -WiFi.begin. portalTimeout : Time out limit for the portal. retainPortal : Keep DNS server functioning for the captive portal. The following chart shows the AutoConnect::begin logic sequence that contains the control flow with each parameter takes effect. For example, AutoConnect::begin will not end without the portalTimeout while the connection not establishes, but WebServer will start to work. Also, the DNS server will start to make a series of the captive portal operation on the client device. The custom web pages now respond correctly by the two internally launched servers, and the Sketch looks like working. But AutoConnect::begin does not end yet. Especially when invoking AutoConnect::begin in the setup() , control flow does not pass to the loop() . However, portalTimeout can be used effectively in various scenes in combination with immediateStart . Its combination is useful for implementing Sketches that can work in situations where WiFi is not always available. Namely, Sketch will support a running mode with both offline and online. If AutoConnect staying in the captive portal exceeds the time limit, Sketch can switch a process-mode to offline according to WiFi signal detection. Conversely, it can start a captive portal immediately with intentional control to shift the process-mode to online from offline. Especially, You can activate the process-mode shift manually by trigger via external switches. The retainPortal option allows continuing the captive portal operation even after exiting from AutoConnect::begin. This option allows the use of the automatic portal pop-ups on the smartphone devices etc. even after the ESP module has established a connection with some access point in STA mode. (Excepts blocking a series of portal processes via intentionally accessing a URL outside the scope of /_ac . eg., if you try to communicate with the mqtt server without connecting to the access point, its access will be redirected to /_ac caused by the trap of the captive portal detection) 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":"The following parameters of AutoConnectConfig affect the behavior and control a logic sequence of AutoConnect::begin function. These parameters are evaluated on a case-by-case basis and may not be valid in all situations. The Sketch must consider the role of these parameters and the conditions under which they will work as intended. You need to understand what happens when using these parameters in combination. autoReconnect : Attempts re-connect with past SSID by saved credential. autoRise : Controls starting the captive portal. immediateStart : Starts the captive portal immediately, without the 1 st -WiFi.begin. portalTimeout : Time out limit for the portal. retainPortal : Keep DNS server functioning for the captive portal. The following chart shows the AutoConnect::begin logic sequence that contains the control flow with each parameter takes effect. For example, AutoConnect::begin will not end without the portalTimeout while the connection not establishes, but WebServer will start to work. Also, the DNS server will start to make a series of the captive portal operation on the client device. The custom web pages now respond correctly by the two internally launched servers, and the Sketch looks like working. But AutoConnect::begin does not end yet. Especially when invoking AutoConnect::begin in the setup() , control flow does not pass to the loop() . However, portalTimeout can be used effectively in various scenes in combination with immediateStart . Its combination is useful for implementing Sketches that can work in situations where WiFi is not always available. Namely, Sketch will support a running mode with both offline and online. If AutoConnect staying in the captive portal exceeds the time limit, Sketch can switch a process-mode to offline according to WiFi signal detection. Conversely, it can start a captive portal immediately with intentional control to shift the process-mode to online from offline. Especially, You can activate the process-mode shift manually by trigger via external switches. The retainPortal option allows continuing the captive portal operation even after exiting from AutoConnect::begin. This option allows the use of the automatic portal pop-ups on the smartphone devices etc. even after the ESP module has established a connection with some access point in STA mode. (Excepts blocking a series of portal processes via intentionally accessing a URL outside the scope of /_ac . eg., if you try to communicate with the mqtt server without connecting to the access point, its access will be redirected to /_ac caused by the trap of the captive portal detection) 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 following screen will appear as the AutoConnect menu when you access to AutoConnect root URL via http://{localIP}/_ac . (eg. http://172.217.28.1/_ac ) It is a top page of AutoConnect which shows the current WiFi connection statistics. To invoke the AutoConnect menu, you can tap at right on top. AutoConnect root URL It is assigned \" /_ac \" located on the local IP address of ESP8266/ESP32 module by default and can be changed with the Sketch. A local IP means Local IP at connection established or SoftAP's IP. Right on top \u00b6 Currently, AutoConnect supports six 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. Update : OTA updates. (Optional) HOME : Return to user home page. Configure new AP \u00b6 It scans all available access points in the vicinity and display it further the WiFi signal strength and security indicator as of the detected AP. Below that, the number of discovered hidden APs will be displayed. Enter SSID and Passphrase and tap \" Apply \" to start a WiFi connection. If you want to configure with static IP, uncheck \" Enable DHCP \". Once the WiFi connection is established, the entered static IP 1 configuration will be stored to the credentials in the flash and restored to the station configuration via the Open SSIDs menu. Open SSIDs \u00b6 After WiFi connected, AutoConnect will automatically save the established SSID and password to the flash on the ESP module. Open SSIDs menu reads the saved SSID credentials and lists them as below. Listed items are clickable buttons and can initiate a connection to its access point. Saved credentials data structure has changed A structure of AutoConnect saved credentials has changed in v1.1.0 and was lost backward compatibility. Credentials saved by AutoConnect v1.0.3 (or earlier) will not display properly with AutoConnect v1.1.0. You need to erase the flash of the ESP module using the esptool before the Sketch uploading. esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash Disconnect \u00b6 It disconnects ESP8266/ESP32 from the current connection. Also, ESP8266/ESP32 can be automatically reset after WiFi cutting by instructing with the Sketch using the AutoConnect API . After tapping the Disconnect , you will not be able to reach the AutoConnect menu. Once disconnected, you will need to set the SSID again for connecting to the WLAN. Reset... \u00b6 Resetting the ESP8266/ESP32 module will initiate a reboot. When the module restarting, the esp8266ap or esp32ap access point will disappear from the WLAN and the ESP8266/ESP32 module will begin to reconnect a previous access point with WIFI_STA mode. 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 If the Sketch has custom Web pages, the AutoConnect menu lines them up with the AutoConnect's items. Details for Custom Web pages in AutoConnect menu . Update \u00b6 If you specify AutoConnectConfig::ota to import the OTA update feature into Sketch, an item will appear in the menu list as Update . The Update menu item will appear only AutoConnectOTA enabled The Update item is displayed automatically in the menu only when AutoConnectConfig::ota is specified with AC_OTA_BUILTIN or AutoConnectUpdate is attached. HOME \u00b6 A HOME item at the bottom of the menu list is a link to the home path, and the default URI is / which is defined by AUTOCONNECT_HOMEURI in AutoConnectDefs.h header file. #define AUTOCONNECT_HOMEURI \"/\" Also, you can change the HOME path using the AutoConnect API. The AutoConnect::home function sets the URI as a link of the HOME item in the AutoConnect menu. Applying the active menu items \u00b6 Each of the above menu items can be configured with a Sketch. AutoConnectConfig::menuItems specifies the menu items that will be enabled at runtime. You can also adjust available menu items using AutoConnect::enableMenu and AutoConnect::disableMenu function. It is an alternative to AutoConnectConfig::menuItems and provides a shortcut to avoid using AutoConnectConfig. For example, by disabling the Configure new AP and Disconnect item, you can prevent the configuration for unknown access points. AutoConnect portal; AutoConnectConfig config; void setup () { config.menuItems = AC_MENUITEM_OPENSSIDS | AC_MENUITEM_RESET | AC_MENUITEM_HOME; portal.config(config); } The next is another way to achieve the same effect. AutoConnect portal; void setup () { portal.disableMenu(AC_MENUITEM_CONFIGNEW | AC_MENUITEM_DISCONNECT); portal.config(config); } The result of executing the above Sketch is as below: Details for AutoConnectConfig::menuItems . Attaching to AutoConnect menu \u00b6 The AutoConnect menu can contain your sketch's web pages as extra items as a custom. It works for HTML pages implemented by the ESP8266WebServer::on handler or the WebServer::on handler for ESP32. That is, you can make them invoke the legacy web pages from the AutoConnect menu. The below screen-shot is the result of adding an example sketch for the ESP8266WebServer library known as FSBrowser to the AutoConnect menu item. It can add Edit and List items with little modification to the legacy sketch code. AutoConnect allows capturing the extra pages handled with ESP8266WebServer or WebServer's legacy into the AutoConnect menu. See Section Advanced Usage for detailed instructions on how to add the extra pages into its menu. AutoConnect does not check the syntax and validity of the entered IP address. If the entered static IPs are incorrect, it cannot connect to the access point. \u21a9","title":"AutoConnect menu"},{"location":"menu.html#where-the-from","text":"The following screen will appear as the AutoConnect menu when you access to AutoConnect root URL via http://{localIP}/_ac . (eg. http://172.217.28.1/_ac ) It is a top page of AutoConnect which shows the current WiFi connection statistics. To invoke the AutoConnect menu, you can tap at right on top. AutoConnect root URL It is assigned \" /_ac \" located on the local IP address of ESP8266/ESP32 module by default and can be changed with the Sketch. 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 six 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. Update : OTA updates. (Optional) HOME : Return to user home page.","title":" Right on top"},{"location":"menu.html#configure-new-ap","text":"It scans all available access points in the vicinity and display it further the WiFi signal strength and security indicator as of the detected AP. Below that, the number of discovered hidden APs will be displayed. Enter SSID and Passphrase and tap \" Apply \" to start a WiFi connection. If you want to configure with static IP, uncheck \" Enable DHCP \". Once the WiFi connection is established, the entered static IP 1 configuration will be stored to the credentials in the flash and restored to the station configuration via the Open SSIDs menu.","title":" Configure new AP"},{"location":"menu.html#open-ssids","text":"After WiFi connected, AutoConnect will automatically save the established SSID and password to the flash on the ESP module. Open SSIDs menu reads the saved SSID credentials and lists them as below. Listed items are clickable buttons and can initiate a connection to its access point. Saved credentials data structure has changed A structure of AutoConnect saved credentials has changed in v1.1.0 and was lost backward compatibility. Credentials saved by AutoConnect v1.0.3 (or earlier) will not display properly with AutoConnect v1.1.0. You need to erase the flash of the ESP module using the esptool before the Sketch uploading. esptool -c esp8266 (or esp32) -p [COM_PORT] erase_flash","title":" Open SSIDs"},{"location":"menu.html#disconnect","text":"It disconnects ESP8266/ESP32 from the current connection. Also, ESP8266/ESP32 can be automatically reset after WiFi cutting by instructing with the Sketch using the AutoConnect API . After tapping the Disconnect , you will not be able to reach the AutoConnect menu. Once disconnected, you will need to set the SSID again for connecting to the WLAN.","title":" Disconnect"},{"location":"menu.html#reset","text":"Resetting the ESP8266/ESP32 module will initiate a reboot. When the module restarting, the esp8266ap or esp32ap access point will disappear from the WLAN and the ESP8266/ESP32 module will begin to reconnect a previous access point with WIFI_STA mode. 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":"If the Sketch has custom Web pages, the AutoConnect menu lines them up with the AutoConnect's items. Details for Custom Web pages in AutoConnect menu .","title":" Custom menu items"},{"location":"menu.html#update","text":"If you specify AutoConnectConfig::ota to import the OTA update feature into Sketch, an item will appear in the menu list as Update . The Update menu item will appear only AutoConnectOTA enabled The Update item is displayed automatically in the menu only when AutoConnectConfig::ota is specified with AC_OTA_BUILTIN or AutoConnectUpdate is attached.","title":" Update"},{"location":"menu.html#home","text":"A HOME item at the bottom of the menu list is a link to the home path, and the default URI is / which is defined by AUTOCONNECT_HOMEURI in AutoConnectDefs.h header file. #define AUTOCONNECT_HOMEURI \"/\" Also, you can change the HOME path using the AutoConnect API. The AutoConnect::home function sets the URI as a link of the HOME item in the AutoConnect menu.","title":" HOME"},{"location":"menu.html#applying-the-active-menu-items","text":"Each of the above menu items can be configured with a Sketch. AutoConnectConfig::menuItems specifies the menu items that will be enabled at runtime. You can also adjust available menu items using AutoConnect::enableMenu and AutoConnect::disableMenu function. It is an alternative to AutoConnectConfig::menuItems and provides a shortcut to avoid using AutoConnectConfig. For example, by disabling the Configure new AP and Disconnect item, you can prevent the configuration for unknown access points. AutoConnect portal; AutoConnectConfig config; void setup () { config.menuItems = AC_MENUITEM_OPENSSIDS | AC_MENUITEM_RESET | AC_MENUITEM_HOME; portal.config(config); } The next is another way to achieve the same effect. AutoConnect portal; void setup () { portal.disableMenu(AC_MENUITEM_CONFIGNEW | AC_MENUITEM_DISCONNECT); portal.config(config); } The result of executing the above Sketch is as below: Details for AutoConnectConfig::menuItems .","title":" Applying the active menu items"},{"location":"menu.html#attaching-to-autoconnect-menu","text":"The AutoConnect menu can contain your sketch's web pages as extra items as a custom. It works for HTML pages implemented by the ESP8266WebServer::on handler or the WebServer::on handler for ESP32. That is, you can make them invoke the legacy web pages from the AutoConnect menu. The below screen-shot is the result of adding an example sketch for the ESP8266WebServer library known as FSBrowser to the AutoConnect menu item. It can add Edit and List items with little modification to the legacy sketch code. AutoConnect allows capturing the extra pages handled with ESP8266WebServer or WebServer's legacy into the AutoConnect menu. See Section Advanced Usage for detailed instructions on how to add the extra pages into its menu. AutoConnect does not check the syntax and validity of the entered IP address. If the entered static IPs are incorrect, it cannot connect to the access point. \u21a9","title":" Attaching to AutoConnect menu"},{"location":"menuize.html","text":"The feature of menu attaching using AutoConnect \u00b6 In this section, it presents numerous ways to customize the AutoConnect menu with your Sketch. AutoConnect dynamically materializes menu items at the Sketch run time with joined AutoConnectAux as a sourced configuration. Typically, it has AutoConnectElements for page rendering in its composition but can configure a Web page as a menu item without having AutoConnectElements. In other words, the AutoConnect Menu component allows you to easily embed a navigation menu with WiFi connection expansion in your Sketch, which has legacy pages for ESP8266WebServer or WebServer of ESP32. The basic mechanism for menu generation \u00b6 Sketch can equip the AutoConnect menu by using three patterns according to the appropriate usage of the AutoConnect API . \u2002 Basic menu It is the most basic menu for a WiFi connection only. Sketch can automatically display it using the typical calling sequence of the AutoConnect API with 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 provides an item for including a legacy page in the AutoConnect menu that natively uses the page request handler attached by the ESP8266WebServer::on function. (Similarly, WebServer::on for ESP32) The mechanism by which AutoConnect dynamically generates the menu is simple. The member variables title and uri of AutoConnectAux will be transferred into <li> HTML tag as they are. Then all <li> elements are included in the form that makes up the menu. Therefore, the Sketch can register the legacy web pages to the menu by simply declaring the title and URI with AutoConnectAux and binding it to AutoConnect. 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 . Slightly changes to adapt FSBrowser to AutoConnect menu \u00b6 The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows: Add AutoConnect declaration. Add AutoConnectConfig declaration to replace the menu title to FSBRowser . Set the menu title using AutoConnectConfig::title . Replace the destination of the not found handler (404 handler) from ESP8266WebServer to AutoConnect. 1 IMPORTANT Add AutoConnectAux using AutoConnect::append and combine an item for Edit . Add AutoConnectAux using AutoConnect::append and combine an item for List . Establish a WiFi connection using AutoConnect::begin and execute AutoConnect::handleClient in the loop , as in the case of handling the basic menu. FSBrowser with embedded AutoConnect \u00b6 Modification for FSBrowser as follows: (Excerpt of the 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\" /></ a > </ p > window.onload = function() { Gifffer(); }; Missing this step, AutoConnect cannot handle the menu. Refs: 404 handler \u21a9","title":"Attach the menus"},{"location":"menuize.html#the-feature-of-menu-attaching-using-autoconnect","text":"In this section, it presents numerous ways to customize the AutoConnect menu with your Sketch. AutoConnect dynamically materializes menu items at the Sketch run time with joined AutoConnectAux as a sourced configuration. Typically, it has AutoConnectElements for page rendering in its composition but can configure a Web page as a menu item without having AutoConnectElements. In other words, the AutoConnect Menu component allows you to easily embed a navigation menu with WiFi connection expansion in your Sketch, which has legacy pages for ESP8266WebServer or WebServer of ESP32.","title":"The feature of menu attaching using AutoConnect"},{"location":"menuize.html#the-basic-mechanism-for-menu-generation","text":"Sketch can equip the AutoConnect menu by using three patterns according to the appropriate usage of the AutoConnect API . \u2002 Basic menu It is the most basic menu for a WiFi connection only. Sketch can automatically display it using the typical calling sequence of the AutoConnect API with 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 provides an item for including a legacy page in the AutoConnect menu that natively uses the page request handler attached by the ESP8266WebServer::on function. (Similarly, WebServer::on for ESP32) The mechanism by which AutoConnect dynamically generates the menu is simple. The member variables title and uri of AutoConnectAux will be transferred into <li> HTML tag as they are. Then all <li> elements are included in the form that makes up the menu. Therefore, the Sketch can register the legacy web pages to the menu by simply declaring the title and URI with AutoConnectAux and binding it to AutoConnect.","title":"The basic mechanism for 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 .","title":"Place the item for the legacy sketches on the menu"},{"location":"menuize.html#slightly-changes-to-adapt-fsbrowser-to-autoconnect-menu","text":"The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows: Add AutoConnect declaration. Add AutoConnectConfig declaration to replace the menu title to FSBRowser . Set the menu title using AutoConnectConfig::title . Replace the destination of the not found handler (404 handler) from ESP8266WebServer to AutoConnect. 1 IMPORTANT Add AutoConnectAux using AutoConnect::append and combine an item for Edit . Add AutoConnectAux using AutoConnect::append and combine an item for List . Establish a WiFi connection using AutoConnect::begin and execute AutoConnect::handleClient in the loop , as in the case of handling the basic menu.","title":"  Slightly changes to adapt FSBrowser to AutoConnect menu"},{"location":"menuize.html#fsbrowser-with-embedded-autoconnect","text":"Modification for FSBrowser as follows: (Excerpt of the 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\" /></ a > </ p > window.onload = function() { Gifffer(); }; Missing this step, AutoConnect cannot handle the menu. Refs: 404 handler \u21a9","title":" FSBrowser with embedded AutoConnect"},{"location":"otabrowser.html","text":"Updates with the Web Browser UPDATED w/v1.1.5 \u00b6 AutoConnect features a built-in OTA function to update ESP module firmware. You can easily make the Sketch that equips OTA and able to operate with the AutoConnect menu. As the AutoConnectOTA class, which is compliant with OTA updates using a web browser as described in the ESP8266 Arduino Core documentation . You will be able to import the AutoConnectOTA class into your sketch just by specifying AutoConnectConfig::ota . By incorporating the AutoConnectOTA class into your Sketch, you can have an OTA updating feature which able to updating binary sketch from the AutoConnect menu. The AutoConnectOTA feature is implemented based on the Updater class of the ESP8266 arduino core library. Its Updater class is also supported by the ESP32 Arduino core, so you can commonly import AutoConnectOTA into the Sketch without being aware of the differences between ESP8266 and ESP32 modules. Limitation of AutoConnectOTA with authentication AutoConnectOTA does not support authentication in v1.1.5 yet. It is planned for inclusion in AutoConnect v1.2.0, which will support HTTP authentication. How to embed AutoConnectOTA in your sketch \u00b6 To embed the AutoConnectOTA class into your sketch, basically follow these steps: Include ESP8266WiFi.h , ESP8266WebServer.h and AutoConnect.h as usual. 1 Declare an ESP8266WebServer object. It's optional. (as WebServer for ESP32) Declare an AutoConnect object, with an argument as ESP8266WebServer if separate the declarations. Declare an AutoConnectConfig object. Declare an AutoConnectAux object for your sketch own if needed. Perform the following procedure steps in the setup() function: Set AutoConnectConfig::ota to AC_OTA_BUILTIN and configure AutoConnect. Load the AutoConnectAux pages declared in step #4 for your application. Join these pages to AutoConnect. Invokes AutoConnect::begin function. Invokes AutoConnect::handleClient function in the loop() . #include <ESP8266WiFi.h> // Step #1 #include <ESP8266WebServer.h> // Step #1 #include <AutoConnect.h> // Step #1 ESP8266WebServer server; // Step #2 AutoConnect portal (server); // Step #3 AutoConnectConfig config; // Step #4 AutoConnectAux hello; // Step #5 static const char HELLO_PAGE[] PROGMEM = R\"( { \"title\": \"Hello world\", \"uri\": \"/\", \"menu\": true, \"element\": [ { \"name\": \"caption\", \"type\": \"ACText\", \"value\": \"<h2>Hello, world</h2>\", \"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.\" } ] } )\" ; // Step #5 void setup () { config.ota = AC_OTA_BUILTIN; // Step #6.a portal.config(config); // Step #6.a hello.load(HELLO_PAGE); // Step #6.b portal.join({ hello }); // Step #6.c portal.begin(); // Step #6.d } void loop () { portal.handleClient(); // Step #7 } How LED ticking during updates AutoConnectOTA applies LED ticking during updates automatically. The destination LED port and ticker drive depends on AutoConnectConfig::tickerPort and AutoConnectConfig::tickerOn specifying. IMPORTANT The AutoConnectOTA activates the ticker constantly regardless of the AutoConnectConfig::ticker value. If you want to stop the ticker output to GPIO during updates, give 0xff to AutoConnectConfig::tickerPort . AutoConnectOTA allocation URI \u00b6 AutoConnectOTA has implemented using AutoConnectAUX. So it occupies two URIs by default. An update operation page is assigned to AUTOCONNECT_URI_UPDATE and the binary file uploader for the update is assigned to AUTOCONNECT_URI_UPDATE_ACT . These symbols are defined in the AutoConnectDefs.h header file as follows: #define AUTOCONNECT_URI \"/_ac\" #define AUTOCONNECT_URI_UPDATE AUTOCONNECT_URI \"/update\" #define AUTOCONNECT_URI_UPDATE_ACT AUTOCONNECT_URI \"/update_act\" Therefore, the normal Sketch that imports AutoConnectOTA while keeping the default, you cannot use the two URIs /_ac/update and /_ac/update_act for your specific. If you want to use the URIs for any purpose other than AutoConnectOTA, you need to override the AutoConnectDefs.h definition at compile time. It can be overwritten by giving the build flags for platformio.ini as follows with the PlatformIO environment for example. build_flags = -DAUTOCONNECT_URI_UPDATE = '\"/YOURURI\"' -DAUTOCONNECT_URI_UPDATE_ACT = '\"/YOURURIACT\"' Timing of AutoConnectOTA instantiation \u00b6 It will be born during AutoConnect::handleClient process. AutoConnect will evaluate the enabled state of AutoConnectConfig::ota each time the handleClient is executed, and if OTA is enabled then it creates an AutoConnectAux internally and assigns it to the update page. At this time, AutoConnectOTA is also instantiated together. The generated AUX page containing AutoConnectOTA is bound to AutoConnect inside the AutoConnect::handleClient process. If you want to attach AutoConnectOTA dynamically with an external trigger, you can sketch like this: This sketch imports the OTA update feature with an external switch assigned to the GPIO pin. While the trigger not occurs, AutoConnectOTA will not be imported into Sketch and will not appear on the menu list. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> #define TRIGGER 4 // pin assigned to external trigger switch AutoConnect portal; AutoConnectConfig config; void setup () { pinMode(TRIGGER, INPUT); portal.begin(); } void loop () { if (digitalRead(TRIGGER) == HIGH) { config.ota = AC_OTA_BUILTIN; portal.config(config); } portal.handleClient(); } AutoConnectOTA cannot detach dynamically Once imported, AutoConnectOTA cannot be removed from the Sketch. It can be only excluded from the menu by overriding AutoConnectConfig::menuItems . In this case, the AutoConnectOTA instance remains as a residue. Authentication with AutoConnectOTA \u00b6 HTTP authentication of AutoConnect is also effective for OTA. Since the implementation of AutoConnectOTA is based on AutoConnectAux, the AutoConnectConfig::auth setting is valid for AutoConnectOTA as well. Also, it allows you to make authentication only on the OTA page while various custom Web pages coexist. The AC_AUTH_BASIC or AC_AUTH_DIGEST setting to the AutoConnectConfig::auth enables HTTP authentication. If it is in combination with AC_AUTHSCOPE_PARTIAL specified AutoConnectConfig::authScope setting, only an OTA page will be authenticated, excluding other custom Web pages that co-exist. AutoConnect portal; AutoConnectConfig config; AutoConnectAux aux ( \"/aux\" , \"AUX\" ); void setup () { // Join some custom web page portal.join(aux); // Add OTA into the Sketch config.ota = AC_OTA_BUILTIN; // Enable authentication on OTA page only config.auth = AC_AUTH_DIGEST; config.authScope = AC_AUTHSCOPE_PARTIAL; // Configure other settings ... // Apply configuration settings portal.config(config); portal.begin(); } 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. OTA updates w/browser without using AutoConnectOTA \u00b6 The legacy OTA method based on ESP8266HTTPUpdateServer without AutoConnectOTA is still valid. To embed the ESP8266HTTPUpdateServer class with AutoConnect into your sketch, basically follow these steps: Include ESP8266HTTPUpdateServer.h , also WiFiClient.h , in addition to the usual directives as ESP8266WebServer.h and AutoConnect.h . 2 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. Invokes AutoConnect::handleClient function in the loop() . #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <ESP8266HTTPUpdateServer.h> // Step #1 #include <WiFiClient.h> // Step #1 #include <AutoConnect.h> static const char HELLO_PAGE[] PROGMEM = R\"( { \"title\": \"Hello world\", \"uri\": \"/\", \"menu\": true, \"element\": [ { \"name\": \"caption\", \"type\": \"ACText\", \"value\": \"<h2>Hello, world</h2>\", \"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 portal.begin(); // Step #9.d } void loop () { portal.handleClient(); // Step #10 } Regular file uploading using AutoConnectOTA ENHANCED w/v1.2.0 \u00b6 The built-in OTA update feature can update the firmware as well as upload regular files placed in the file system on the ESP module. It allows a regular file is uploaded via OTA using the Update of AutoConnect menu without adding a particular custom Web page that contains AutoConnectFile. This utilization is useful for the operation of transferring the JSON document of the custom web page definition, the external parameter file of your sketch, and so on into the target ESP module via OTA. The built-in OTA update feature determines where to save the uploaded file according to the filename pattern. By default, a filename with ends a .bin extension is subject to firmware updates. A file that has another extensions will be saved as a regular to LittleFS (or SPIFFS) in the flash. The filename extension that should be treated as the firmware is defined as the AUTOCONNECT_UPLOAD_ASFIRMWARE macro in AutoConnectDefs.h header file of the library source code. When dealing with another extensions for the updating file as firmware change this macro definition. #define AUTOCONNECT_UPLOAD_ASFIRMWARE \".bin\" Specify with the PlatformIO AUTOCONNECT_UPLOAD_ASFIRMWARE pattern will be embedded into the binary sketch is determined at compile time. The PlatformIO build system allows you to change the pattern of the file extension for each project without modifying the library source code. build_flags = -DAUTOCONNECT_UPLOAD_ASFIRMWARE='\".bin\"' Use a regular expression to specify the file extension By default, you can specify only one file extension to be treated as firmware in OTA updates. However, you can specify the file extension as a regular expression, but it consumes a lot of memory. If the file extension pattern contains a regular expression, you need to enable the flag of AUTOCONNECT_UPLOAD_ASFIRMWARE_USE_REGEXP in AutoConnectDefs.h . Also, the AUTOCONNECT_UPLOAD_ASFIRMWARE definition as a regular expression is treated as a replacement string for the #define directive for C++ preprocessor, so the backslash must be escaped. Display an extra string on the update screen ENHANCED w/v1.3.0 \u00b6 You can add an extra string to the OTA update screen by the sketch. If an extra string is specified, it will be displayed on the right side of \" Updating firmware \" caption. The screenshot above shows an example of adding the current version of the sketch to the OTA caption. To display in the add an extra caption to the OTA update screen, sets the AutoConnectConfig::otaExtraCaption by your sketch. A type of the extra caption type to set in AutoConnectConfig::otaExtraCaption is the const char pointer . So, its string must remain in the memory area for the duration of OTA. (This string is not copied to the AutoConnectOTA class and expiration must be guaranteed by your sketch) #define FIRMWARE_VERSION \"1.1.12-dev\" ... #include <AutoConnect.h> ... const char * fw_ver = FIRMWARE_VERSION; AutoConnect portal; AutoConnectConfig config; void setup () { config.ota = AC_OTA_BUILTIN; config.otaExtraCaption = fw_ver; portal.config(config); portal.begin(); } void loop () { portal.handleClient(); } Common mistakes about variable expiration Local variables are valid only within the function. The following code seems to work at first glance. But practically, *fw_ver is released at the end of the function. AutoConnectConfig::otaExtraCaption holds only a pointer to the extra caption string. #define FIRMWARE_VERSION \"1.1.12-dev\" ... #include <AutoConnect.h> ... AutoConnect portal; AutoConnectConfig config; void setupConfig () { const char * fw_ver = FIRMWARE_VERSION; config.ota = AC_OTA_BUILTIN; config.otaExtraCaption = fw_ver; // This code doesn't work as intended. portal.config(config); } void setup () { setupConfig(); portal.begin(); } void loop () { portal.handleClient(); } Receive the AutoConnectOTA status change ENHANCED w/v1.3.0 \u00b6 You can capture the change in the state of the OTA by registering the exit routine to AutoConnect. The exit routine for notifying the state change of AutoConnectOTA can execute the user's sketch function during specific stages of OTA or on an error. Also, these exit routines have the same interface as the similar exit functions included in the Arduino core. The following functions register the function in your sketch with AutoConnect to notify OTA state changes. AutoConnect::onOTAStart : Register the on-start exit routine that is called only once when the OTA has been started. AutoConnect::onOTAProgress : Register the exit routine that is called during the OTA progress. AutoConnect::onOTAEnd : Register the on-end exit routine that is called only once when the OTA is finished. AutoConnect::onOTAError : Register the exit routine that is called when some error occurred. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void OTAStart () { Serial.println( \"Start OTA updating\" ); } void OTAEnd () { Serial.println( \" \\n End\" ); } void OTAProgress ( unsigned int amount, unsigned int size) { Serial.printf( \"Progress: %u(%u) \\r \" , amount, size); } void OTAError ( uint8_t error) { Serial.printf( \"Error[%u]: \" , error); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); config.ota = AC_OTA_BUILTIN; portal.config(config); portal.onOTAStart(OTAStart); portal.onOTAEnd(OTAEnd); portal.onOTAProgress(OTAProgress); portal.onOTAError(OTAError); portal.begin(); } void loop () { portal.handleClient(); } window.onload = function() { Gifffer(); }; For ESP32, change the following items: Change the include directives appropriately for the ESP32 environment. Change ESP8266WebServer to WebServer. \u21a9 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":"Using Web Browser"},{"location":"otabrowser.html#updates-with-the-web-browserupdated-wv115","text":"AutoConnect features a built-in OTA function to update ESP module firmware. You can easily make the Sketch that equips OTA and able to operate with the AutoConnect menu. As the AutoConnectOTA class, which is compliant with OTA updates using a web browser as described in the ESP8266 Arduino Core documentation . You will be able to import the AutoConnectOTA class into your sketch just by specifying AutoConnectConfig::ota . By incorporating the AutoConnectOTA class into your Sketch, you can have an OTA updating feature which able to updating binary sketch from the AutoConnect menu. The AutoConnectOTA feature is implemented based on the Updater class of the ESP8266 arduino core library. Its Updater class is also supported by the ESP32 Arduino core, so you can commonly import AutoConnectOTA into the Sketch without being aware of the differences between ESP8266 and ESP32 modules. Limitation of AutoConnectOTA with authentication AutoConnectOTA does not support authentication in v1.1.5 yet. It is planned for inclusion in AutoConnect v1.2.0, which will support HTTP authentication.","title":"Updates with the Web Browser&nbsp;UPDATED w/v1.1.5"},{"location":"otabrowser.html#how-to-embed-autoconnectota-in-your-sketch","text":"To embed the AutoConnectOTA class into your sketch, basically follow these steps: Include ESP8266WiFi.h , ESP8266WebServer.h and AutoConnect.h as usual. 1 Declare an ESP8266WebServer object. It's optional. (as WebServer for ESP32) Declare an AutoConnect object, with an argument as ESP8266WebServer if separate the declarations. Declare an AutoConnectConfig object. Declare an AutoConnectAux object for your sketch own if needed. Perform the following procedure steps in the setup() function: Set AutoConnectConfig::ota to AC_OTA_BUILTIN and configure AutoConnect. Load the AutoConnectAux pages declared in step #4 for your application. Join these pages to AutoConnect. Invokes AutoConnect::begin function. Invokes AutoConnect::handleClient function in the loop() . #include <ESP8266WiFi.h> // Step #1 #include <ESP8266WebServer.h> // Step #1 #include <AutoConnect.h> // Step #1 ESP8266WebServer server; // Step #2 AutoConnect portal (server); // Step #3 AutoConnectConfig config; // Step #4 AutoConnectAux hello; // Step #5 static const char HELLO_PAGE[] PROGMEM = R\"( { \"title\": \"Hello world\", \"uri\": \"/\", \"menu\": true, \"element\": [ { \"name\": \"caption\", \"type\": \"ACText\", \"value\": \"<h2>Hello, world</h2>\", \"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.\" } ] } )\" ; // Step #5 void setup () { config.ota = AC_OTA_BUILTIN; // Step #6.a portal.config(config); // Step #6.a hello.load(HELLO_PAGE); // Step #6.b portal.join({ hello }); // Step #6.c portal.begin(); // Step #6.d } void loop () { portal.handleClient(); // Step #7 } How LED ticking during updates AutoConnectOTA applies LED ticking during updates automatically. The destination LED port and ticker drive depends on AutoConnectConfig::tickerPort and AutoConnectConfig::tickerOn specifying. IMPORTANT The AutoConnectOTA activates the ticker constantly regardless of the AutoConnectConfig::ticker value. If you want to stop the ticker output to GPIO during updates, give 0xff to AutoConnectConfig::tickerPort .","title":" How to embed AutoConnectOTA in your sketch"},{"location":"otabrowser.html#autoconnectota-allocation-uri","text":"AutoConnectOTA has implemented using AutoConnectAUX. So it occupies two URIs by default. An update operation page is assigned to AUTOCONNECT_URI_UPDATE and the binary file uploader for the update is assigned to AUTOCONNECT_URI_UPDATE_ACT . These symbols are defined in the AutoConnectDefs.h header file as follows: #define AUTOCONNECT_URI \"/_ac\" #define AUTOCONNECT_URI_UPDATE AUTOCONNECT_URI \"/update\" #define AUTOCONNECT_URI_UPDATE_ACT AUTOCONNECT_URI \"/update_act\" Therefore, the normal Sketch that imports AutoConnectOTA while keeping the default, you cannot use the two URIs /_ac/update and /_ac/update_act for your specific. If you want to use the URIs for any purpose other than AutoConnectOTA, you need to override the AutoConnectDefs.h definition at compile time. It can be overwritten by giving the build flags for platformio.ini as follows with the PlatformIO environment for example. build_flags = -DAUTOCONNECT_URI_UPDATE = '\"/YOURURI\"' -DAUTOCONNECT_URI_UPDATE_ACT = '\"/YOURURIACT\"'","title":" AutoConnectOTA allocation URI"},{"location":"otabrowser.html#timing-of-autoconnectota-instantiation","text":"It will be born during AutoConnect::handleClient process. AutoConnect will evaluate the enabled state of AutoConnectConfig::ota each time the handleClient is executed, and if OTA is enabled then it creates an AutoConnectAux internally and assigns it to the update page. At this time, AutoConnectOTA is also instantiated together. The generated AUX page containing AutoConnectOTA is bound to AutoConnect inside the AutoConnect::handleClient process. If you want to attach AutoConnectOTA dynamically with an external trigger, you can sketch like this: This sketch imports the OTA update feature with an external switch assigned to the GPIO pin. While the trigger not occurs, AutoConnectOTA will not be imported into Sketch and will not appear on the menu list. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> #define TRIGGER 4 // pin assigned to external trigger switch AutoConnect portal; AutoConnectConfig config; void setup () { pinMode(TRIGGER, INPUT); portal.begin(); } void loop () { if (digitalRead(TRIGGER) == HIGH) { config.ota = AC_OTA_BUILTIN; portal.config(config); } portal.handleClient(); } AutoConnectOTA cannot detach dynamically Once imported, AutoConnectOTA cannot be removed from the Sketch. It can be only excluded from the menu by overriding AutoConnectConfig::menuItems . In this case, the AutoConnectOTA instance remains as a residue.","title":" Timing of AutoConnectOTA instantiation"},{"location":"otabrowser.html#authentication-with-autoconnectota","text":"HTTP authentication of AutoConnect is also effective for OTA. Since the implementation of AutoConnectOTA is based on AutoConnectAux, the AutoConnectConfig::auth setting is valid for AutoConnectOTA as well. Also, it allows you to make authentication only on the OTA page while various custom Web pages coexist. The AC_AUTH_BASIC or AC_AUTH_DIGEST setting to the AutoConnectConfig::auth enables HTTP authentication. If it is in combination with AC_AUTHSCOPE_PARTIAL specified AutoConnectConfig::authScope setting, only an OTA page will be authenticated, excluding other custom Web pages that co-exist. AutoConnect portal; AutoConnectConfig config; AutoConnectAux aux ( \"/aux\" , \"AUX\" ); void setup () { // Join some custom web page portal.join(aux); // Add OTA into the Sketch config.ota = AC_OTA_BUILTIN; // Enable authentication on OTA page only config.auth = AC_AUTH_DIGEST; config.authScope = AC_AUTHSCOPE_PARTIAL; // Configure other settings ... // Apply configuration settings portal.config(config); portal.begin(); }","title":" Authentication with AutoConnectOTA"},{"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.","title":" How to make the binary sketch"},{"location":"otabrowser.html#ota-updates-wbrowser-without-using-autoconnectota","text":"The legacy OTA method based on ESP8266HTTPUpdateServer without AutoConnectOTA is still valid. To embed the ESP8266HTTPUpdateServer class with AutoConnect into your sketch, basically follow these steps: Include ESP8266HTTPUpdateServer.h , also WiFiClient.h , in addition to the usual directives as ESP8266WebServer.h and AutoConnect.h . 2 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. Invokes AutoConnect::handleClient function in the loop() . #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <ESP8266HTTPUpdateServer.h> // Step #1 #include <WiFiClient.h> // Step #1 #include <AutoConnect.h> static const char HELLO_PAGE[] PROGMEM = R\"( { \"title\": \"Hello world\", \"uri\": \"/\", \"menu\": true, \"element\": [ { \"name\": \"caption\", \"type\": \"ACText\", \"value\": \"<h2>Hello, world</h2>\", \"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 portal.begin(); // Step #9.d } void loop () { portal.handleClient(); // Step #10 }","title":" OTA updates w/browser without using AutoConnectOTA"},{"location":"otabrowser.html#regular-file-uploading-using-autoconnectotaenhanced-wv120","text":"The built-in OTA update feature can update the firmware as well as upload regular files placed in the file system on the ESP module. It allows a regular file is uploaded via OTA using the Update of AutoConnect menu without adding a particular custom Web page that contains AutoConnectFile. This utilization is useful for the operation of transferring the JSON document of the custom web page definition, the external parameter file of your sketch, and so on into the target ESP module via OTA. The built-in OTA update feature determines where to save the uploaded file according to the filename pattern. By default, a filename with ends a .bin extension is subject to firmware updates. A file that has another extensions will be saved as a regular to LittleFS (or SPIFFS) in the flash. The filename extension that should be treated as the firmware is defined as the AUTOCONNECT_UPLOAD_ASFIRMWARE macro in AutoConnectDefs.h header file of the library source code. When dealing with another extensions for the updating file as firmware change this macro definition. #define AUTOCONNECT_UPLOAD_ASFIRMWARE \".bin\" Specify with the PlatformIO AUTOCONNECT_UPLOAD_ASFIRMWARE pattern will be embedded into the binary sketch is determined at compile time. The PlatformIO build system allows you to change the pattern of the file extension for each project without modifying the library source code. build_flags = -DAUTOCONNECT_UPLOAD_ASFIRMWARE='\".bin\"' Use a regular expression to specify the file extension By default, you can specify only one file extension to be treated as firmware in OTA updates. However, you can specify the file extension as a regular expression, but it consumes a lot of memory. If the file extension pattern contains a regular expression, you need to enable the flag of AUTOCONNECT_UPLOAD_ASFIRMWARE_USE_REGEXP in AutoConnectDefs.h . Also, the AUTOCONNECT_UPLOAD_ASFIRMWARE definition as a regular expression is treated as a replacement string for the #define directive for C++ preprocessor, so the backslash must be escaped.","title":" Regular file uploading using AutoConnectOTA&nbsp;ENHANCED w/v1.2.0"},{"location":"otabrowser.html#display-an-extra-string-on-the-update-screenenhanced-wv130","text":"You can add an extra string to the OTA update screen by the sketch. If an extra string is specified, it will be displayed on the right side of \" Updating firmware \" caption. The screenshot above shows an example of adding the current version of the sketch to the OTA caption. To display in the add an extra caption to the OTA update screen, sets the AutoConnectConfig::otaExtraCaption by your sketch. A type of the extra caption type to set in AutoConnectConfig::otaExtraCaption is the const char pointer . So, its string must remain in the memory area for the duration of OTA. (This string is not copied to the AutoConnectOTA class and expiration must be guaranteed by your sketch) #define FIRMWARE_VERSION \"1.1.12-dev\" ... #include <AutoConnect.h> ... const char * fw_ver = FIRMWARE_VERSION; AutoConnect portal; AutoConnectConfig config; void setup () { config.ota = AC_OTA_BUILTIN; config.otaExtraCaption = fw_ver; portal.config(config); portal.begin(); } void loop () { portal.handleClient(); } Common mistakes about variable expiration Local variables are valid only within the function. The following code seems to work at first glance. But practically, *fw_ver is released at the end of the function. AutoConnectConfig::otaExtraCaption holds only a pointer to the extra caption string. #define FIRMWARE_VERSION \"1.1.12-dev\" ... #include <AutoConnect.h> ... AutoConnect portal; AutoConnectConfig config; void setupConfig () { const char * fw_ver = FIRMWARE_VERSION; config.ota = AC_OTA_BUILTIN; config.otaExtraCaption = fw_ver; // This code doesn't work as intended. portal.config(config); } void setup () { setupConfig(); portal.begin(); } void loop () { portal.handleClient(); }","title":" Display an extra string on the update screen&nbsp;ENHANCED w/v1.3.0"},{"location":"otabrowser.html#receive-the-autoconnectota-status-changeenhanced-wv130","text":"You can capture the change in the state of the OTA by registering the exit routine to AutoConnect. The exit routine for notifying the state change of AutoConnectOTA can execute the user's sketch function during specific stages of OTA or on an error. Also, these exit routines have the same interface as the similar exit functions included in the Arduino core. The following functions register the function in your sketch with AutoConnect to notify OTA state changes. AutoConnect::onOTAStart : Register the on-start exit routine that is called only once when the OTA has been started. AutoConnect::onOTAProgress : Register the exit routine that is called during the OTA progress. AutoConnect::onOTAEnd : Register the on-end exit routine that is called only once when the OTA is finished. AutoConnect::onOTAError : Register the exit routine that is called when some error occurred. #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> AutoConnect portal; AutoConnectConfig config; void OTAStart () { Serial.println( \"Start OTA updating\" ); } void OTAEnd () { Serial.println( \" \\n End\" ); } void OTAProgress ( unsigned int amount, unsigned int size) { Serial.printf( \"Progress: %u(%u) \\r \" , amount, size); } void OTAError ( uint8_t error) { Serial.printf( \"Error[%u]: \" , error); } void setup () { delay( 1000 ); Serial.begin( 115200 ); Serial.println(); config.ota = AC_OTA_BUILTIN; portal.config(config); portal.onOTAStart(OTAStart); portal.onOTAEnd(OTAEnd); portal.onOTAProgress(OTAProgress); portal.onOTAError(OTAError); portal.begin(); } void loop () { portal.handleClient(); } window.onload = function() { Gifffer(); }; For ESP32, change the following items: Change the include directives appropriately for the ESP32 environment. Change ESP8266WebServer to WebServer. \u21a9 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":" Receive the AutoConnectOTA status change&nbsp;ENHANCED w/v1.3.0"},{"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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> 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 <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <AutoConnect.h> 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 OTA update feature that able to operate via the web browser by AutoConnect menu. All you need to do is that specify AutoConnectConfig . 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.","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 OTA update feature that able to operate via the web browser by AutoConnect menu. All you need to do is that specify AutoConnectConfig . 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.","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. Exclude the ArduinoJson by each compile-time If you want to exclude ArduinoJson without changing the library code, specify the AUTOCONNECT_NOUSE_JSON directive as a compiler option according to the method described in the FAQ . Implementation example without ArduinoJson \u00b6 The code excluding JSON processing from the mqttRSSI sketch attached to the library is as follows. (It is a part of code. Refer to mqttRSSI_NA.ino for the whole sketch.) The JSON document for mqttRSSI [ { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_setting\" , \"menu\" : true , \"element\" : [ { \"name\" : \"header\" , \"type\" : \"ACText\" , \"value\" : \"<h2>MQTT broker settings</h2>\" , \"style\" : \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\" , \"style\" : \"font-family:serif;color:#4682b4;\" }, { \"name\" : \"mqttserver\" , \"type\" : \"ACInput\" , \"value\" : \"\" , \"label\" : \"Server\" , \"pattern\" : \"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\\\-]*[a-zA-Z0-9])\\\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\\\-]*[A-Za-z0-9])$\" , \"placeholder\" : \"MQTT broker server\" }, { \"name\" : \"channelid\" , \"type\" : \"ACInput\" , \"label\" : \"Channel ID\" , \"pattern\" : \"^[0-9]{6}$\" }, { \"name\" : \"userkey\" , \"type\" : \"ACInput\" , \"label\" : \"User Key\" }, { \"name\" : \"apikey\" , \"type\" : \"ACInput\" , \"label\" : \"API Key\" }, { \"name\" : \"newline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr>\" }, { \"name\" : \"uniqueid\" , \"type\" : \"ACCheckbox\" , \"value\" : \"unique\" , \"label\" : \"Use APID unique\" , \"checked\" : false }, { \"name\" : \"period\" , \"type\" : \"ACRadio\" , \"value\" : [ \"30 sec.\" , \"60 sec.\" , \"180 sec.\" ], \"label\" : \"Update period\" , \"arrange\" : \"vertical\" , \"checked\" : 1 }, { \"name\" : \"newline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr>\" }, { \"name\" : \"hostname\" , \"type\" : \"ACInput\" , \"value\" : \"\" , \"label\" : \"ESP host name\" , \"pattern\" : \"^([a-zA-Z0-9]([a-zA-Z0-9-])*[a-zA-Z0-9]){1,32}$\" }, { \"name\" : \"save\" , \"type\" : \"ACSubmit\" , \"value\" : \"Save&amp;Start\" , \"uri\" : \"/mqtt_save\" }, { \"name\" : \"discard\" , \"type\" : \"ACSubmit\" , \"value\" : \"Discard\" , \"uri\" : \"/\" } ] }, { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_save\" , \"menu\" : false , \"element\" : [ { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"<h4>Parameters saved as:</h4>\" , \"style\" : \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\" : \"parameters\" , \"type\" : \"ACText\" }, { \"name\" : \"clear\" , \"type\" : \"ACSubmit\" , \"value\" : \"Clear channel\" , \"uri\" : \"/mqtt_clear\" } ] } ] Exclude the JSON and replace to the AutoConnectElements natively // In the declaration, // Declare AutoConnectElements for the page asf /mqtt_setting ACText(header, \"<h2>MQTT broker settings</h2>\" , \"text-align:center;color:#2f4f4f;padding:10px;\" ); ACText(caption, \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\" , \"font-family:serif;color:#4682b4;\" ); ACInput(mqttserver, \"\" , \"Server\" , \"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9 \\\\ -]*[a-zA-Z0-9]) \\\\ .)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9 \\\\ -]*[A-Za-z0-9])$\" , \"MQTT broker server\" ); ACInput(channelid, \"\" , \"Channel ID\" , \"^[0-9]{6}$\" ); ACInput(userkey, \"\" , \"User Key\" ); ACInput(apikey, \"\" , \"API Key\" ); ACElement(newline, \"<hr>\" ); ACCheckbox(uniqueid, \"unique\" , \"Use APID unique\" ); ACRadio(period, { \"30 sec.\" , \"60 sec.\" , \"180 sec.\" }, \"Update period\" , AC_Vertical, 1 ); ACSubmit(save, \"Start\" , \"mqtt_save\" ); ACSubmit(discard, \"Discard\" , \"/\" ); // Declare the custom Web page as /mqtt_setting and contains the AutoConnectElements AutoConnectAux mqtt_setting ( \"/mqtt_setting\" , \"MQTT Setting\" , true, { header, caption, mqttserver, channelid, userkey, apikey, newline, uniqueid, period, newline, save, discard }); // Declare AutoConnectElements for the page as /mqtt_save ACText(caption2, \"<h4>Parameters available as:</h4>\" , \"text-align:center;color:#2f4f4f;padding:10px;\" ); ACText(parameters); ACSubmit(clear, \"Clear channel\" , \"/mqtt_clear\" ); // Declare the custom Web page as /mqtt_save and contains the AutoConnectElements AutoConnectAux mqtt_save ( \"/mqtt_save\" , \"MQTT Setting\" , false, { caption2, parameters, clear }); // In the setup(), // Join the custom Web pages and performs begin portal.join({ mqtt_setting, mqtt_save }); portal.begin(); Detaching the ArduinoJson library reduces the Sketch size by approximately 10K bytes. \u21a9","title":"Custom Web pages w/o JSON"},{"location":"wojson.html#suppress-increase-in-memory-consumption","text":"Custom Web page processing consumes a lot of memory. AutoConnect will take a whole string of the JSON document for the custom Web pages into memory. The required buffer size for the JSON document of example sketch mqttRSSI reaches approximately 3000 bytes. And actually, it needs twice the heap area. Especially this constraint will be a problem with the ESP8266 which has a heap size poor. AutoConnect can handle custom Web pages without using JSON. In that case, since the ArduinoJson library will not be bound, the Sketch size will also be reduced.","title":"Suppress increase in memory consumption"},{"location":"wojson.html#writing-the-custom-web-pages-without-json","text":"To handle 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. Exclude the ArduinoJson by each compile-time If you want to exclude ArduinoJson without changing the library code, specify the AUTOCONNECT_NOUSE_JSON directive as a compiler option according to the method described in the FAQ .","title":"Writing the custom Web pages without JSON"},{"location":"wojson.html#implementation-example-without-arduinojson","text":"The code excluding JSON processing from the mqttRSSI sketch attached to the library is as follows. (It is a part of code. Refer to mqttRSSI_NA.ino for the whole sketch.) The JSON document for mqttRSSI [ { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_setting\" , \"menu\" : true , \"element\" : [ { \"name\" : \"header\" , \"type\" : \"ACText\" , \"value\" : \"<h2>MQTT broker settings</h2>\" , \"style\" : \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\" , \"style\" : \"font-family:serif;color:#4682b4;\" }, { \"name\" : \"mqttserver\" , \"type\" : \"ACInput\" , \"value\" : \"\" , \"label\" : \"Server\" , \"pattern\" : \"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\\\-]*[a-zA-Z0-9])\\\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\\\-]*[A-Za-z0-9])$\" , \"placeholder\" : \"MQTT broker server\" }, { \"name\" : \"channelid\" , \"type\" : \"ACInput\" , \"label\" : \"Channel ID\" , \"pattern\" : \"^[0-9]{6}$\" }, { \"name\" : \"userkey\" , \"type\" : \"ACInput\" , \"label\" : \"User Key\" }, { \"name\" : \"apikey\" , \"type\" : \"ACInput\" , \"label\" : \"API Key\" }, { \"name\" : \"newline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr>\" }, { \"name\" : \"uniqueid\" , \"type\" : \"ACCheckbox\" , \"value\" : \"unique\" , \"label\" : \"Use APID unique\" , \"checked\" : false }, { \"name\" : \"period\" , \"type\" : \"ACRadio\" , \"value\" : [ \"30 sec.\" , \"60 sec.\" , \"180 sec.\" ], \"label\" : \"Update period\" , \"arrange\" : \"vertical\" , \"checked\" : 1 }, { \"name\" : \"newline\" , \"type\" : \"ACElement\" , \"value\" : \"<hr>\" }, { \"name\" : \"hostname\" , \"type\" : \"ACInput\" , \"value\" : \"\" , \"label\" : \"ESP host name\" , \"pattern\" : \"^([a-zA-Z0-9]([a-zA-Z0-9-])*[a-zA-Z0-9]){1,32}$\" }, { \"name\" : \"save\" , \"type\" : \"ACSubmit\" , \"value\" : \"Save&amp;Start\" , \"uri\" : \"/mqtt_save\" }, { \"name\" : \"discard\" , \"type\" : \"ACSubmit\" , \"value\" : \"Discard\" , \"uri\" : \"/\" } ] }, { \"title\" : \"MQTT Setting\" , \"uri\" : \"/mqtt_save\" , \"menu\" : false , \"element\" : [ { \"name\" : \"caption\" , \"type\" : \"ACText\" , \"value\" : \"<h4>Parameters saved as:</h4>\" , \"style\" : \"text-align:center;color:#2f4f4f;padding:10px;\" }, { \"name\" : \"parameters\" , \"type\" : \"ACText\" }, { \"name\" : \"clear\" , \"type\" : \"ACSubmit\" , \"value\" : \"Clear channel\" , \"uri\" : \"/mqtt_clear\" } ] } ] Exclude the JSON and replace to the AutoConnectElements natively // In the declaration, // Declare AutoConnectElements for the page asf /mqtt_setting ACText(header, \"<h2>MQTT broker settings</h2>\" , \"text-align:center;color:#2f4f4f;padding:10px;\" ); ACText(caption, \"Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak\" , \"font-family:serif;color:#4682b4;\" ); ACInput(mqttserver, \"\" , \"Server\" , \"^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9 \\\\ -]*[a-zA-Z0-9]) \\\\ .)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9 \\\\ -]*[A-Za-z0-9])$\" , \"MQTT broker server\" ); ACInput(channelid, \"\" , \"Channel ID\" , \"^[0-9]{6}$\" ); ACInput(userkey, \"\" , \"User Key\" ); ACInput(apikey, \"\" , \"API Key\" ); ACElement(newline, \"<hr>\" ); ACCheckbox(uniqueid, \"unique\" , \"Use APID unique\" ); ACRadio(period, { \"30 sec.\" , \"60 sec.\" , \"180 sec.\" }, \"Update period\" , AC_Vertical, 1 ); ACSubmit(save, \"Start\" , \"mqtt_save\" ); ACSubmit(discard, \"Discard\" , \"/\" ); // Declare the custom Web page as /mqtt_setting and contains the AutoConnectElements AutoConnectAux mqtt_setting ( \"/mqtt_setting\" , \"MQTT Setting\" , true, { header, caption, mqttserver, channelid, userkey, apikey, newline, uniqueid, period, newline, save, discard }); // Declare AutoConnectElements for the page as /mqtt_save ACText(caption2, \"<h4>Parameters available as:</h4>\" , \"text-align:center;color:#2f4f4f;padding:10px;\" ); ACText(parameters); ACSubmit(clear, \"Clear channel\" , \"/mqtt_clear\" ); // Declare the custom Web page as /mqtt_save and contains the AutoConnectElements AutoConnectAux mqtt_save ( \"/mqtt_save\" , \"MQTT Setting\" , false, { caption2, parameters, clear }); // In the setup(), // Join the custom Web pages and performs begin portal.join({ mqtt_setting, mqtt_save }); portal.begin(); Detaching the ArduinoJson library reduces the Sketch size by approximately 10K bytes. \u21a9","title":"Implementation example without ArduinoJson"}]}
\ No newline at end of file
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
index f7e37259..d16a5229 100644
--- a/docs/sitemap.xml
+++ b/docs/sitemap.xml
@@ -2,197 +2,197 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/index.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/acelements.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/achandling.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/acintro.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/acjson.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/acupload.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/adauthentication.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/adconnection.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/adcpcontrol.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/adcredential.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/adexterior.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/adnetwork.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/adothers.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/advancedusage.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/api.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/apiaux.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/apiconfig.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/apielements.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/apiextra.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/apiupdate.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/basicusage.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/changelabel.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/changelog.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/colorized.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/credit.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/datatips.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/esp32cam.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/faq.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/filesystem.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/gettingstarted.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/howtoembed.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/license.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/lsbegin.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/menu.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/menuize.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/otabrowser.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/otaserver.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/otaupdate.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
          <loc>https://Hieromon.github.io/AutoConnect/wojson.html</loc>
-         <lastmod>2022-01-03</lastmod>
+         <lastmod>2022-01-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
 </urlset>
\ No newline at end of file
diff --git a/docs/sitemap.xml.gz b/docs/sitemap.xml.gz
index ee3e382f972ca4594494513af72e4fe8c1c9d653..625b0d6c212e737986a9ccf19782cce29879697b 100644
GIT binary patch
delta 461
zcmV;;0W$vG1KtA%ABzYG5HRqO2OWQqS*l8H#jvU>RegZ=0Zifnw;^U@Gq8R7hMiS4
z_ezzV3lM_!DS-3SK5bJxTrmrAI#-YNsXAct94HOv>c{u5#}Cz0_s}jm3hJRWPI9hB
z)%lZi>$=uLiWAIIa~_=dv0R9It8}OOW7RzzO4$S4&R$C!*>`&sDPg`5W}bgI)dT6c
z^fj^jyeNO+l+dfA6mY9Yonq_u$L^zm=)|FGPEB(>Jsz9)rO8{}T{AyI8t{_wxeGw?
zrFC~TH=g_J`v)m_j5uLZF~TijLo9FF2$zy(He&rL<)#hlGDn7B0~=t`vHW4=LCH!F
z2Y)*=1fC1I{A|&RH)Ghp3b20y#!WF3XCvH%x^n(yM9U>bWFup6xI*$67J&h6h-b3m
zgk`frE$Q|`gB7i<X>Rdun!yTonFFYeT+oA%x0AYVQ6uyiEqU2SUho__({Hq~lGtaA
zq$a2(9hAk+Y$MyE%<mcxlL_nvo^3cOqP&Qrjcy%KmC_&zS&gKFkykxsoO&bNNFI~e
z7<HrcIFOB<k20%W%s|UnYr@J3edbj#Tj3V!)sEKCf??(Vw=e#B5Y+Auv(hnD<Qf0~
DFUsH5

delta 460
zcmV;-0W<#I1Kk4$ABzYG3@Fo)2OWP9cJ|U%46CYA)dy%Fz$6}U8)7y#1KX!>*jZI`
zuT;so03leP0ysbI^ESo96|)ehbM;s^)d7>|KxsHvKfZrGeyE<ihjz(PP!FYXl5;hx
z&YzrH*R>W>oM4uk^Wemf<wD$hrEBVsRrhcxWe;#Wdn;{Z-|bPPg!x98dE$Rm52WML
z*TnAgqWpzZLa&Zez^xv2imlrpyN?2*6Nm29oKDB)@z^|-Chv83&HM;yz)QxLE&#>X
z*4@?Ic<!(7AEe+h;)F@X2)Bd{vAk&`TuPeRi1nwGn>MJ+92tTQY=A|_@`sTJB`ZA~
z{O!yTcrN7fvqdZ3jA8#OzzTmDH^oexjc^m{%K4WOEteFLjf}zJ3dv(w1O~Jrp2><6
zmdy&aq}vM(R<yRJxy8F_1}oTQ4xl!2K@URSPU^ZvjnHGX<YgOq!E@wHztP4@VxKXR
znxK|+P!>D0jckiDKb<^GCa@QHvEihM@+yipx^+NRN`ok5HIfcSUX?s?>Wy$Cc}!ws
z)Q!^PKsI(h%B*%V11)2%2`ek~nODJVg<GgsJ6b~vhL!){zWCcgP`f{PL)S>;8UO%<
CAK(lC