Release for v1.0.0

Fixes #26, #45, #62, #122
pull/126/head
Hieromon Ikasamo 5 years ago
parent 42fb77f56d
commit be3c560d41
  1. 10
      .travis.yml
  2. 12
      README.md
  3. 86
      docs/404.html
  4. 86
      docs/acelements.html
  5. 238
      docs/achandling.html
  6. 86
      docs/acintro.html
  7. 238
      docs/acjson.html
  8. 88
      docs/acupload.html
  9. 140
      docs/advancedusage.html
  10. 94
      docs/api.html
  11. 142
      docs/apiaux.html
  12. 99
      docs/apiconfig.html
  13. 733
      docs/apielements.html
  14. 95
      docs/apiextra.html
  15. 1224
      docs/apiupdate.html
  16. 86
      docs/basicusage.html
  17. 112
      docs/changelog.html
  18. 86
      docs/colorized.html
  19. 171
      docs/credit.html
  20. 86
      docs/datatips.html
  21. 132
      docs/faq.html
  22. 86
      docs/gettingstarted.html
  23. 86
      docs/howtoembed.html
  24. BIN
      docs/images/export_binary.png
  25. 524
      docs/images/global.svg
  26. BIN
      docs/images/global1.png
  27. BIN
      docs/images/global2.png
  28. BIN
      docs/images/serverupdate.gif
  29. BIN
      docs/images/updated.png
  30. BIN
      docs/images/updatelist.png
  31. BIN
      docs/images/updatemenu.png
  32. BIN
      docs/images/updatemodel.png
  33. 898
      docs/images/updatemodel.svg
  34. BIN
      docs/images/updateserver.png
  35. 627
      docs/images/updateserver.svg
  36. BIN
      docs/images/updating.png
  37. BIN
      docs/images/webupdate.gif
  38. BIN
      docs/images/webupdate.png
  39. 628
      docs/images/webupdate.svg
  40. BIN
      docs/images/webupdatemodel.png
  41. 354
      docs/images/webupdatemodel.svg
  42. 109
      docs/index.html
  43. 86
      docs/license.html
  44. 86
      docs/lsbegin.html
  45. 90
      docs/menu.html
  46. 86
      docs/menuize.html
  47. 1049
      docs/otabrowser.html
  48. 1178
      docs/otaserver.html
  49. 916
      docs/otaupdate.html
  50. 2
      docs/search/search_index.json
  51. 70
      docs/sitemap.xml
  52. BIN
      docs/sitemap.xml.gz
  53. 86
      docs/wojson.html
  54. 328
      examples/ConfigIP/ConfigIP.ino
  55. 4
      examples/Credential/Credential.ino
  56. 4
      examples/Elements/Elements.ino
  57. 3
      examples/Simple/Simple.ino
  58. 184
      examples/Update/Update.ino
  59. 130
      examples/WebUpdate/HTTPUpdateServer.cpp
  60. 42
      examples/WebUpdate/HTTPUpdateServer.h
  61. 48
      examples/WebUpdate/WebUpdate.ino
  62. 38
      keywords.txt
  63. 2
      library.json
  64. 2
      library.properties
  65. 5
      mkdocs.yml
  66. 126
      mkdocs/achandling.md
  67. 106
      mkdocs/acjson.md
  68. 2
      mkdocs/acupload.md
  69. 52
      mkdocs/advancedusage.md
  70. 30
      mkdocs/apiaux.md
  71. 9
      mkdocs/apiconfig.md
  72. 170
      mkdocs/apielements.md
  73. 1
      mkdocs/apiextra.md
  74. 135
      mkdocs/apiupdate.md
  75. 7
      mkdocs/changelog.md
  76. 62
      mkdocs/credit.md
  77. 35
      mkdocs/faq.md
  78. BIN
      mkdocs/images/export_binary.png
  79. 524
      mkdocs/images/global.svg
  80. BIN
      mkdocs/images/global1.png
  81. BIN
      mkdocs/images/global2.png
  82. BIN
      mkdocs/images/serverupdate.gif
  83. BIN
      mkdocs/images/updated.png
  84. BIN
      mkdocs/images/updatelist.png
  85. BIN
      mkdocs/images/updatemenu.png
  86. BIN
      mkdocs/images/updatemodel.png
  87. 898
      mkdocs/images/updatemodel.svg
  88. BIN
      mkdocs/images/updateserver.png
  89. 627
      mkdocs/images/updateserver.svg
  90. BIN
      mkdocs/images/updating.png
  91. BIN
      mkdocs/images/webupdate.gif
  92. BIN
      mkdocs/images/webupdate.png
  93. 628
      mkdocs/images/webupdate.svg
  94. BIN
      mkdocs/images/webupdatemodel.png
  95. 354
      mkdocs/images/webupdatemodel.svg
  96. 11
      mkdocs/index.md
  97. 4
      mkdocs/menu.md
  98. 111
      mkdocs/otabrowser.md
  99. 175
      mkdocs/otaserver.md
  100. 19
      mkdocs/otaupdate.md
  101. Some files were not shown because too many files have changed in this diff Show More

@ -23,7 +23,7 @@ before_install:
- if [[ "$BOARD" =~ "esp32:esp32:" ]]; then
arduino --install-boards esp32:esp32;
fi
- arduino --install-library PubSubClient,PageBuilder:1.3.3
- arduino --install-library PubSubClient,PageBuilder:1.3.4
- arduino --install-library ArduinoJson:5.13.5
- buildExampleSketch() { arduino --verify --board $BOARD $PWD/examples/$1/$1.ino; }
- arduino --install-library ArduinoJson:6.10.1
@ -32,14 +32,18 @@ install:
- mkdir -p ~/Arduino/libraries
- ln -s $PWD ~/Arduino/libraries/.
script:
- buildExampleSketch ConfigIP
- buildExampleSketch Credential
- buildExampleSketch Elements
- buildExampleSketch FileUpload
- buildExampleSketch FSBrowser
- buildExampleSketch HandleClient
- buildExampleSketch HandlePortal
- buildExampleSketch HandlePortalEX
- buildExampleSketch Simple
- buildExampleSketch HelloWorld
- buildExampleSketch mqttRSSI
- buildExampleSketch mqttRSSI_FS
- buildExampleSketch mqttRSSI_NA
- buildExampleSketch FileUpload
- buildExampleSketch Simple
- buildExampleSketch Update
- buildExampleSketch WebUpdate

@ -45,6 +45,10 @@ These HTML elements that make up the user-owned screen can be easily loaded from
<img width="32px" src="mkdocs/images/arrow_right.png" align="top">&emsp;
<img width="30%" height="400px" src="mkdocs/images/AutoConnectAux.gif">
### Quick and easy to equip the OTA update feature <sup><sub>ENHANCED w/ v1.0.0</sub></sup>
You can quickly and easily equip the [OTA update feature](https://hieromon.github.io/AutoConnect/otaupdate.html) to your sketch and also you can operate the firmware update process via OTA from AutoConnect menu.
## Supported hardware
Apply the [Arduino core](https://github.com/esp8266/Arduino) of the ESP8266 Community.
@ -66,6 +70,7 @@ Alter the platform applying the [arduino-esp32](https://github.com/espressif/ard
- Ai-Thinker NodeMCU-32S
- Heltec WiFi Kit 32
- M5Stack
- Unexpected Maker TinyPICO
- And other ESP32 modules supported by the Additional Board Manager URLs of the Arduino-IDE.
## Simple usage
@ -96,6 +101,13 @@ Full documentation is available on https://Hieromon.github.io/AutoConnect, some
## Change log
### [1.0.0] Sept. 7, 2019
- Supports Arduino core for ESP32 1.0.3.
- Supports AutoConnectUpdate for the OTA update.
- Supports Preferences for saving credentials with ESP32 core 1.0.3 and later. **In ESP32, the credentials stored past in EEPROM will lose**.
- Supports AutoConnectAux::isValid function.
- Supports the global attribute with all AutoConnectElements.
### [0.9.12] Aug. 18, 2019
- 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**. (issue #85)

@ -389,10 +389,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="/AutoConnect/otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="/AutoConnect/otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="/AutoConnect/otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -451,6 +511,18 @@
<li class="md-nav__item">
<a href="/AutoConnect/apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="/AutoConnect/apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -470,13 +542,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -542,13 +614,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>

@ -1008,10 +1008,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -1070,6 +1130,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -1089,13 +1161,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -1161,13 +1233,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>

@ -493,13 +493,6 @@
How you can reach the values
</a>
</li>
<li class="md-nav__item">
<a href="#retrieve-the-values-with-webserveron-handler" title=" Retrieve the values with WebServer::on handler" class="md-nav__link">
Retrieve the values with WebServer::on handler
</a>
</li>
<li class="md-nav__item">
@ -517,8 +510,8 @@
</li>
<li class="md-nav__item">
<a href="#validate-input-data" title=" Validate input data" class="md-nav__link">
Validate input data
<a href="#input-data-validation" title=" Input data validation" class="md-nav__link">
Input data validation
</a>
</li>
@ -595,10 +588,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -657,6 +710,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -676,13 +741,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -748,13 +813,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -962,13 +1027,6 @@
How you can reach the values
</a>
</li>
<li class="md-nav__item">
<a href="#retrieve-the-values-with-webserveron-handler" title=" Retrieve the values with WebServer::on handler" class="md-nav__link">
Retrieve the values with WebServer::on handler
</a>
</li>
<li class="md-nav__item">
@ -986,8 +1044,8 @@
</li>
<li class="md-nav__item">
<a href="#validate-input-data" title=" Validate input data" class="md-nav__link">
Validate input data
<a href="#input-data-validation" title=" Input data validation" class="md-nav__link">
Input data validation
</a>
</li>
@ -1064,9 +1122,9 @@
<p>The AutoConnectAux class has several functions to manipulate AutoConnectElements. The functions can add, delete, retrieve elements, and get and set values.</p>
<h3 id="add-autoconnectelements-to-the-autoconnectaux-object"><i class="fa fa-edit"></i> Add AutoConnectElements to the AutoConnectAux object<a class="headerlink" href="#add-autoconnectelements-to-the-autoconnectaux-object" title="Permanent link">&para;</a></h3>
<p>To add AutoConnectElment(s) to an AutoConnectAux object, use the add function.</p>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">add(AutoConenctElement</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">addon)</span>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">add(AutoConnectElement</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">addon)</span>
</pre></div>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">add(AutoConenctElementVT</span> <span style="color: #f8f8f2">addons)</span>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">add(AutoConnectElementVT</span> <span style="color: #f8f8f2">addons)</span>
</pre></div></p>
<p>The add function adds the specified AutoConnectElement to AutoConnectAux. The AutoConnectElementVT type is the <a href="https://en.cppreference.com/w/cpp/container/vector"><em>std::vector</em></a> of the <a href="https://en.cppreference.com/w/cpp/utility/functional/reference_wrapper"><em>reference wrapper</em></a> to AutoConnectElements, and you can add these elements in bulk by using the <a href="https://en.cppreference.com/w/cpp/language/list_initialization"><em>list initialization</em></a> with the sketch.</p>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">typedef</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">vector</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">reference_wrapper</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectElement</span><span style="color: #f92672">&gt;&gt;</span> <span style="color: #f8f8f2">AutoConnectElementVT;</span>
@ -1108,7 +1166,7 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectElement</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">name)</span>
</pre></div>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">T</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">AutoConenctAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">T</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">name)</span>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">T</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">T</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">name)</span>
</pre></div>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectElementVT</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">getElements(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
@ -1139,10 +1197,10 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<p>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.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">auxJson</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">Page 1 title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">uri</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">/page1</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">menu</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:true,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">element</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:[{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">name</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">caption</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">type</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">ACText</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">value</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">hello, world</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">}]}&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">AutoConenct</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">portal.load(auxJson);</span>
<span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">aux</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.aux(</span><span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Identify the AutoConnectAux instance with uri</span>
<span style="color: #f8f8f2">AutoConenctText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">text</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;caption&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Cast to real type and access members</span>
<span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">text</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;caption&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Cast to real type and access members</span>
<span style="color: #f8f8f2">Serial.println(text.value);</span>
</pre></div>
@ -1203,7 +1261,7 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">page;</span>
<span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">onPage</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux,</span> <span style="color: #f8f8f2">PageArgument</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">args)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">onPage</span><span style="color: #f8f8f2">(AutoConectAux</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux,</span> <span style="color: #f8f8f2">PageArgument</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">args)</span> <span style="color: #f8f8f2">{</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">AutoConnectSubmit</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">send</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux[</span><span style="color: #e6db74">&quot;send&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectSubmit</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">();</span>
</span><span style="background-color: #49483e"> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(WiFi.isConnected())</span>
</span><span style="background-color: #49483e"> <span style="color: #f8f8f2">send.enable</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">(WiFi.getMode()</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">WIFI_STA);</span>
@ -1444,12 +1502,12 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<span style="color: #75715e">// Get the AutoConnectInput named &quot;feels&quot;.</span>
<span style="color: #75715e">// The where() function returns an uri string of the AutoConnectAux that triggered this handler.</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">hello</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.aux(portal.where());</span>
</span> <span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">feels</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">hello</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;feels&quot;</span><span style="color: #f8f8f2">);</span>
<span style="background-color: #49483e"> <span style="color: #75715e">// Get the AutoConnectText named &quot;echo&quot;.</span>
</span> <span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">echo</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;echo&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">hello</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.aux(portal.where());</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">feels</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">hello</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;feels&quot;</span><span style="color: #f8f8f2">);</span>
</span>
<span style="color: #75715e">// Get the AutoConnectText named &quot;echo&quot;.</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">echo</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;echo&quot;</span><span style="color: #f8f8f2">);</span>
</span>
<span style="color: #75715e">// Echo back from input-box to /feels page.</span>
<span style="color: #f8f8f2">echo.value</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">feels.value</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot; and a bold world!&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #66d9ef">return</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">);</span>
@ -1589,56 +1647,6 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<span style="color: #f8f8f2">portal.begin();</span>
</pre></div>
<h3 id="retrieve-the-values-with-webserveron-handler"><i class="fa fa-wrench"></i> Retrieve the values with WebServer::on handler<a class="headerlink" href="#retrieve-the-values-with-webserveron-handler" title="Permanent link">&para;</a></h3>
<p>ESP8266WebServer class and the WebServer (for ESP32) 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 (or WebServer::on for ESP32) function.</p>
<p>When the page transitions from the custom Web page created by AutoConnectAux to the handler registered by 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 <a href="acelements.html#uri">uri</a> attribute of <a href="acelements.html#autoconnectsubmit">AutoConnectSubmit</a>) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler by the sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the <a href="apiaux.html#fetchelement"><strong>AutoConnectAux::fetchElement</strong></a> function for value processing with the on-page handler.</p>
<p>The following sketch is an example of extracting values inputted on a custom web page with an on-page handler and then processing it.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">server;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(server);</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">Input;</span>
<span style="color: #66d9ef">const</span> <span style="color: #66d9ef">static</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">InputPage[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;r(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74"> &quot;title&quot;: &quot;Input&quot;, &quot;uri&quot;: &quot;/input&quot;, &quot;menu&quot;: true, &quot;element&quot;: [</span>
<span style="color: #e6db74"> { &quot;name&quot;: &quot;input&quot;, &quot;type&quot;: &quot;ACInput&quot;, &quot;label&quot;: &quot;INPUT&quot; },</span>
<span style="color: #e6db74"> {</span>
<span style="color: #e6db74"> &quot;name&quot;: &quot;save&quot;,</span>
<span style="color: #e6db74"> &quot;type&quot;: &quot;ACSubmit&quot;,</span>
<span style="color: #e6db74"> &quot;value&quot;: &quot;SAVE&quot;,</span>
<span style="background-color: #49483e"><span style="color: #e6db74"> &quot;uri&quot;: &quot;/&quot;</span>
</span><span style="color: #e6db74"> }</span>
<span style="color: #e6db74"> ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)r&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #75715e">// An on-page handler for &#39;/&#39; access</span>
<span style="background-color: #49483e"><span style="color: #66d9ef">void</span> <span style="color: #a6e22e">onRoot</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
</span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">content</span> <span style="color: #f92672">=</span>
<span style="color: #e6db74">&quot;&lt;html&gt;&quot;</span>
<span style="color: #e6db74">&quot;&lt;head&gt;&lt;meta name=&#39;viewport&#39; content=&#39;width=device-width, initial-scale=1&#39;&gt;&lt;/head&gt;&quot;</span>
<span style="color: #e6db74">&quot;&lt;body&gt;&lt;div&gt;INPUT: {{value}}&lt;/div&gt;&lt;/body&gt;&quot;</span>
<span style="color: #e6db74">&quot;&lt;/html&gt;&quot;</span><span style="color: #f8f8f2">;</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">Input.fetchElement();</span> <span style="color: #75715e">// Preliminary acquisition</span>
</span>
<span style="color: #75715e">// For this steps to work, need to call fetchElement function beforehand.</span>
<span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">value</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">Input[</span><span style="color: #e6db74">&quot;input&quot;</span><span style="color: #f8f8f2">].value;</span>
<span style="color: #f8f8f2">content.replace(</span><span style="color: #e6db74">&quot;{{value}}&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">value);</span>
<span style="color: #f8f8f2">server.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text/html&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">content);</span>
<span style="color: #f8f8f2">}</span>
<span style="color: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">Input.load(InputPage);</span>
<span style="color: #f8f8f2">portal.join(Input);</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">server.on(</span><span style="color: #e6db74">&quot;/&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">onRoot);</span> <span style="color: #75715e">// Register the on-page handler</span>
</span> <span style="color: #f8f8f2">portal.begin();</span>
<span style="color: #f8f8f2">}</span>
<span style="color: #66d9ef">void</span> <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</pre></div>
<h3 id="overwrite-the-autoconnectelements"><i class="fa fa-wpforms"></i> Overwrite the AutoConnectElements<a class="headerlink" href="#overwrite-the-autoconnectelements" title="Permanent link">&para;</a></h3>
<p>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 <a href="apiaux.html#loadelement">AutoConnectAux::loadElement</a>. </p>
<p>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 <a href="api.html#load">AutoConnect::load</a> function.</p>
@ -1674,7 +1682,7 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<i class="fa fa-arrow-down"></i><br>
<i class="fa fa-eye"></i> It's shown as like:<span style="margin-left:14px;width:272px;height:118px;border:1px solid lightgray;"><img align="top" width="270" height="116" src="images/acow.png"></span></p>
<h3 id="check-data-against-on-submission"><i class="far fa-check-square"></i> Check data against on submission<a class="headerlink" href="#check-data-against-on-submission" title="Permanent link">&para;</a></h3>
<p>By giving a <a href="apielements.html#pattern">pattern</a> to <a href="apielements.html#autoconnectinput">AutoConnectInput</a>, you can find errors in data styles while typing in custom Web pages. The pattern is specified by <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a>.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup> 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.</p>
<p>By giving a <a href="apielements.html#pattern">pattern</a> to <a href="apielements.html#autoconnectinput">AutoConnectInput</a>, you can find errors in data styles while typing in custom Web pages. The pattern is specified with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a>.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup> 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.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">{</span>
<span style="color: #f92672">&quot;title&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Page-1&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f92672">&quot;uri&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">,</span>
@ -1690,15 +1698,49 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<span style="color: #f8f8f2">}</span>
</pre></div>
<div>
<span style="display:block;margin-left:136px;"><img width="32px" height="32xp" src="images/arrow_down.png"></span>
<span style="display:block;width:306px;height:136px;border:1px solid lightgrey;"><img data-gifffer="images/aux_pattern.gif" data-gifffer-height="134" data-gifffer-width="304" /></span>
</div>
<p>If you are not familiar with regular expressions, you may feel that description very strange. And matter of fact, it is a strange description for those unfamiliar with formal languages. If your regular expression can not interpret the intended syntax and semantics, you can use an online tester. The <a href="https://regex101.com/">regex101</a> is an exceptional online site for testing and debugging regular expressions.</p>
<h3 id="validate-input-data"><img src="images/regexp.png" align="top"> Validate input data<a class="headerlink" href="#validate-input-data" title="Permanent link">&para;</a></h3>
<p><i class="fa fa-arrow-down"></i><br><i class="fa fa-eye"></i> It's shown as like:<br>
<span style="display:block;width:306px;height:136px;border:1px solid lightgrey;"><img data-gifffer="images/aux_pattern.gif" data-gifffer-height="134" data-gifffer-width="304" /></span></p>
<p>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 <a href="https://regex101.com/">regex101</a> is an exceptional online tool for testing and debugging regular expressions.</p>
<h3 id="input-data-validation"><img src="images/regexp.png" align="top"> Input data validation<a class="headerlink" href="#input-data-validation" title="Permanent link">&para;</a></h3>
<p>The <a href="apielements.html#pattern">pattern</a> attribute of <a href="apielements.html#autoconnectinput">AutoConnectInput</a> 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.</p>
<p>You can validate input data from <a href="apielements.html#autoconnectinput">AutoConnectInput</a> using the <a href="apielements.html#isvalid">isValid</a> function before actually processing it. The <a href="apielements.html#isvalid">isValid</a> function determines whether the <a href="apielements.html#value_3">value</a> currently stored in <a href="apielements.html#autoconnectinput">AutoConnectInput</a> matches the <a href="apielements.html#pattern">pattern</a>. </p>
<p>You can validate input data from <a href="apielements.html#autoconnectinput">AutoConnectInput</a> using the <a href="apielements.html#isvalid">isValid</a> function before actually processing it. The <a href="apielements.html#isvalid">isValid</a> function determines whether the <a href="apielements.html#value_3">value</a> currently stored in <a href="apielements.html#autoconnectinput">AutoConnectInput</a> matches the <a href="apielements.html#pattern">pattern</a>.</p>
<p>You can also use the <a href="apiaux.html#isvalid">AutoConnectAux::isValid</a> function to verify the data input to all <a href="apielements.html#autoconnectinput">AutoConnectInput</a> elements on the custom Web page at once. The two sketches below show the difference between using <a href="apielements.html#isvalid">AutoConnectInput::isValid</a> and using <a href="apiaux.html#isvalid">AutoConnectAux::isValid</a>. 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.</p>
<p><strong>A common declaration</strong></p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">PAGE[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74"> &quot;title&quot;: &quot;Custom page&quot;,</span>
<span style="color: #e6db74"> &quot;uri&quot;: &quot;/page&quot;,</span>
<span style="color: #e6db74"> &quot;menu&quot;: true,</span>
<span style="color: #e6db74"> &quot;element&quot;: [</span>
<span style="color: #e6db74"> {</span>
<span style="color: #e6db74"> &quot;name&quot;: &quot;input1&quot;,</span>
<span style="color: #e6db74"> &quot;type&quot;: &quot;ACInput&quot;,</span>
<span style="color: #e6db74"> &quot;pattern&quot;: &quot;^[0-9]{4}$&quot;</span>
<span style="color: #e6db74"> },</span>
<span style="color: #e6db74"> {</span>
<span style="color: #e6db74"> &quot;name&quot;: &quot;input2&quot;,</span>
<span style="color: #e6db74"> &quot;type&quot;: &quot;ACInput&quot;,</span>
<span style="color: #e6db74"> &quot;pattern&quot;: &quot;^[a-zA-Z]{4}$&quot;</span>
<span style="color: #e6db74"> }</span>
<span style="color: #e6db74"> ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">page;</span>
<span style="color: #f8f8f2">page.load(PAGE);</span>
</pre></div>
<p><strong>Using AutoConnectInput::isValid</strong></p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">input1</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">page[</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">();</span>
<span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">input2</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">page[</span><span style="color: #e6db74">&quot;input2&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">();</span>
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(</span><span style="color: #f92672">!</span><span style="color: #f8f8f2">input1.isValid()</span> <span style="color: #f92672">||</span> <span style="color: #f92672">!</span><span style="color: #f8f8f2">input2.isValid())</span>
<span style="color: #f8f8f2">Serial.println(</span><span style="color: #e6db74">&quot;Validation error&quot;</span><span style="color: #f8f8f2">);</span>
</pre></div>
<p><strong>Using AutoConnectAux::isValid</strong></p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(</span><span style="color: #f92672">!</span><span style="color: #f8f8f2">page.isValid())</span>
<span style="color: #f8f8f2">Serial.println(</span><span style="color: #e6db74">&quot;Validation error&quot;</span><span style="color: #f8f8f2">);</span>
</pre></div>
<h3 id="convert-data-to-actually-type"><i class="fa fa-exchange"></i> Convert data to actually type<a class="headerlink" href="#convert-data-to-actually-type" title="Permanent link">&para;</a></h3>
<p>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 <a href="datatips.html#convert-autoconnectelements-value-to-actual-data-type"><em>Tips for data conversion</em></a>.</p>
<h2 id="transitions-of-the-custom-web-pages">Transitions of the custom Web pages<a class="headerlink" href="#transitions-of-the-custom-web-pages" title="Permanent link">&para;</a></h2>
@ -1817,13 +1859,13 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
</a>
<a href="api.html" title="AutoConnect API" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
<a href="otaupdate.html" title="OTA Updates" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
AutoConnect API
OTA Updates
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">

@ -473,10 +473,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -535,6 +595,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -554,13 +626,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -626,13 +698,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>

@ -518,6 +518,13 @@
ACSelect
</a>
</li>
<li class="md-nav__item">
<a href="#acstyle" title=" ACStyle" class="md-nav__link">
ACStyle
</a>
</li>
<li class="md-nav__item">
@ -552,6 +559,13 @@
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#loading-to-autoconnect" title=" Loading to AutoConnect" class="md-nav__link">
Loading to AutoConnect
</a>
</li>
<li class="md-nav__item">
<a href="#loading-from-the-streamed-file" title=" Loading from the streamed file" class="md-nav__link">
Loading from the streamed file
@ -643,10 +657,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -705,6 +779,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -724,13 +810,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -796,13 +882,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -1047,6 +1133,13 @@
ACSelect
</a>
</li>
<li class="md-nav__item">
<a href="#acstyle" title=" ACStyle" class="md-nav__link">
ACStyle
</a>
</li>
<li class="md-nav__item">
@ -1081,6 +1174,13 @@
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#loading-to-autoconnect" title=" Loading to AutoConnect" class="md-nav__link">
Loading to AutoConnect
</a>
</li>
<li class="md-nav__item">
<a href="#loading-from-the-streamed-file" title=" Loading from the streamed file" class="md-nav__link">
Loading from the streamed file
@ -1166,12 +1266,12 @@
<h2 id="json-objects-elements-for-the-custom-web-page">JSON objects &amp; elements for the custom Web page<a class="headerlink" href="#json-objects-elements-for-the-custom-web-page" title="Permanent link">&para;</a></h2>
<h3 id="json-document-structure-for-autoconnectaux"><i class="fa fa-caret-right"></i> JSON document structure for AutoConnectAux<a class="headerlink" href="#json-document-structure-for-autoconnectaux" title="Permanent link">&para;</a></h3>
<p>AutoConnectAux will configure custom Web pages with JSON objects. The elements that make up the object are as follows:</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span>{
&quot;title&quot; : title,
&quot;uri&quot; : uri,
&quot;menu&quot; : true | false,
&quot;element&quot; : element_array
}
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">{</span>
<span style="color: #e6db74">&quot;title&quot;</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">title</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;uri&quot;</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">uri</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;menu&quot;</span> <span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span> <span style="color: #f92672">|</span> <span style="color: #66d9ef">false</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;element&quot;</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">element_array</span>
<span style="color: #f8f8f2">}</span>
</pre></div>
<h4 id="title"><i class="fa fa-key"></i> <strong>title</strong><a class="headerlink" href="#title" title="Permanent link">&para;</a></h4>
@ -1246,14 +1346,15 @@
<span style="color: #f8f8f2">]</span>
</pre></div>
<p>The above custom Web page definitions can be loaded in a batch using the <a href="api.html#load">AutoConnect::load</a> function.</p>
<h3 id="json-object-for-autoconnectelements"><i class="fa fa-caret-right"></i> JSON object for AutoConnectElements<a class="headerlink" href="#json-object-for-autoconnectelements" title="Permanent link">&para;</a></h3>
<p>JSON description for AutoConnectElements describes as an array in the <em>element</em> with arguments of <a href="acelements.html#constructor">each constructor</a>.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span>{
&quot;name&quot; : name,
&quot;type&quot; : type,
key_according_to_type : the_value | array_of_value,
[ key_according_to_type : the_value | array_of_value ]
}
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">{</span>
<span style="color: #e6db74">&quot;name&quot;</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">name</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;type&quot;</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">type</span><span style="color: #f8f8f2">,</span>
<span style="color: #a6e22e">key_according_to_type</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">the_value</span> <span style="color: #f92672">|</span> <span style="color: #a6e22e">array_of_value</span><span style="color: #f8f8f2">,</span>
<span style="color: #f8f8f2">[</span> <span style="color: #a6e22e">key_according_to_type</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">the_value</span> <span style="color: #f92672">|</span> <span style="color: #a6e22e">array_of_value</span> <span style="color: #f8f8f2">]</span>
<span style="color: #f8f8f2">}</span>
</pre></div>
<h4 id="name"><i class="fa fa-key"></i> <strong>name</strong><a class="headerlink" href="#name" title="Permanent link">&para;</a></h4>
@ -1300,6 +1401,11 @@
</dd>
<dd>
<ul>
<li>AutoConnectStyle: <a href="#acstyle"><strong>ACStyle</strong></a></li>
</ul>
</dd>
<dd>
<ul>
<li>AutoConnectSubmit: <a href="#acsubmit"><strong>ACSubmit</strong></a></li>
</ul>
</dd>
@ -1427,6 +1533,14 @@
</ul>
</dd>
</dl>
<h4 id="acstyle"><i class="fa fa-caret-right"></i> ACStyle<a class="headerlink" href="#acstyle" title="Permanent link">&para;</a></h4>
<dl>
<dd>
<ul>
<li><strong>value</strong> : Specifies the custom CSS code.</li>
</ul>
</dd>
</dl>
<h4 id="acsubmit"><i class="fa fa-caret-right"></i> ACSubmit<a class="headerlink" href="#acsubmit" title="Permanent link">&para;</a></h4>
<dl>
<dd>
@ -1463,6 +1577,92 @@
<p>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.</p>
</div>
<h2 id="loading-json-document">Loading JSON document<a class="headerlink" href="#loading-json-document" title="Permanent link">&para;</a></h2>
<h3 id="loading-to-autoconnect"><i class="fa fa-caret-right"></i> Loading to AutoConnect<a class="headerlink" href="#loading-to-autoconnect" title="Permanent link">&para;</a></h3>
<p>There are two main ways to load the custom Web pages into AutoConnect.</p>
<ol>
<li>
<p>Load directly into AutoConnect</p>
<p>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.</p>
<p>Using the <a href="api.html#load">AutoCoonnect::load</a> 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 <a href="api.html#aux">AutoConnect::aux</a> function. You can reach the AutoConnectElements you desired using the <a href="apiaux.html#getelement">AutoConnectAux::getElement</a> function of its AutoConnectAux.</p>
<p>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.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">[</span>
<span style="color: #f8f8f2">{</span>
<span style="color: #e6db74">&quot;title&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;page1&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;uri&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;menu&quot;</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;element&quot;</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">[</span>
<span style="color: #f8f8f2">{</span>
<span style="color: #e6db74">&quot;name&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;type&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span>
<span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">]</span>
<span style="color: #f8f8f2">},</span>
<span style="color: #f8f8f2">{</span>
<span style="color: #e6db74">&quot;title&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;page2&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;uri&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;/page2&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;menu&quot;</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;element&quot;</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">[</span>
<span style="color: #f8f8f2">{</span>
<span style="color: #e6db74">&quot;name&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;input2&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;type&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span>
<span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">]</span>
<span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">]</span>
</pre></div>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">File</span> <span style="color: #f8f8f2">page</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(</span><span style="color: #e6db74">&quot;/custom_page.json&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;r&quot;</span><span style="color: #f8f8f2">);</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">portal.load(page);</span>
</span><span style="color: #f8f8f2">page.close();</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">aux</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.aux(</span><span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">);</span>
</span><span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">input1</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">);</span>
</span></pre></div>
</li>
<li>
<p>Load to AutoConnectAux and join to AutoConnect</p>
<p>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.</p>
<p>After loading a JSON document using the <a href="apiaux.html#load">AutoConnectAux::load</a> function by each, integrate those into AutoConnect using the <a href="api.html#join">AutoConnect::join</a> function.</p>
<p>In the following example, you can see the difference between two sketches in a sketch modified using the AutoConnectAux::load.</p>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">{</span>
<span style="color: #e6db74">&quot;title&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;page1&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;uri&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;menu&quot;</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;element&quot;</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">[</span>
<span style="color: #f8f8f2">{</span>
<span style="color: #e6db74">&quot;name&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;type&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span>
<span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">]</span>
<span style="color: #f8f8f2">}</span>
</pre></div>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">{</span>
<span style="color: #e6db74">&quot;title&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;page2&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;uri&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;/page2&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;menu&quot;</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;element&quot;</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">[</span>
<span style="color: #f8f8f2">{</span>
<span style="color: #e6db74">&quot;name&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;input2&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #e6db74">&quot;type&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span>
<span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">]</span>
<span style="color: #f8f8f2">}</span>
</pre></div>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">page1;</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">page2;</span>
<span style="color: #f8f8f2">File</span> <span style="color: #f8f8f2">page</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(</span><span style="color: #e6db74">&quot;/custom_page1.json&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;r&quot;</span><span style="color: #f8f8f2">);</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">page1.load(page);</span>
</span><span style="color: #f8f8f2">page.close();</span>
<span style="color: #f8f8f2">page</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(</span><span style="color: #e6db74">&quot;/custom_page2.json&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;r&quot;</span><span style="color: #f8f8f2">);</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">page2.load(page);</span>
</span><span style="color: #f8f8f2">page.close();</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">portal.join(</span> <span style="color: #f8f8f2">{</span> <span style="color: #f8f8f2">page1,</span> <span style="color: #f8f8f2">page2</span> <span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">);</span>
</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">input1</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">page1.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">);</span>
</pre></div></p>
</li>
</ol>
<h3 id="loading-from-the-streamed-file"><i class="fa fa-caret-right"></i> Loading from the streamed file<a class="headerlink" href="#loading-from-the-streamed-file" title="Permanent link">&para;</a></h3>
<p>AutoConnect supports loading of JSON document from the following instances:</p>
<ul>

@ -395,10 +395,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -457,6 +517,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -476,13 +548,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -550,13 +622,13 @@
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9" checked>
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10" checked>
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -999,7 +1071,7 @@
<li>SD device externally connected to the ESP8266/ESP32 module</li>
<li>Other character devices</li>
</ol>
<p>You can specify the device type to save with the <a href="acelements.html#store"><strong>store</strong></a> attribute of AutoConenctFile, and it accepts the following values:</p>
<p>You can specify the device type to save with the <a href="acelements.html#store"><strong>store</strong></a> attribute of AutoConnectFile, and it accepts the following values:</p>
<ul>
<li>Flash : <code>AC_File_FS</code> for the API parameter or <code>fs</code> for the JSON document</li>
<li>SD : <code>AC_File_SD</code> for the API parameter or <code>sd</code> for the JSON document</li>

@ -623,10 +623,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -685,6 +745,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -704,13 +776,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -776,13 +848,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -1119,11 +1191,16 @@
<h3 id="404-handler"><i class="fa fa-caret-right"></i> 404 handler<a class="headerlink" href="#404-handler" title="Permanent link">&para;</a></h3>
<p>Registering the "not found" handler is a different way than ESP8266WebServer (WebServer as ESP32). The <em>onNotFound</em> of ESP8266WebServer/WebServer does not work with AutoConnect. AutoConnect overrides <em>ESP8266WebServer::onNotFound</em>/<em>WebServer::onNotFound</em> to handle a captive portal. To register "not found" handler, use <a href="api.html#onnotfound"><em>AutoConnect::onNotFound</em></a>.</p>
<h3 id="access-to-saved-credentials"><i class="fa fa-caret-right"></i> Access to saved credentials<a class="headerlink" href="#access-to-saved-credentials" title="Permanent link">&para;</a></h3>
<p>AutoConnect stores the established WiFi connection in the EEPROM of the ESP8266/ESP32 module and equips the class to access it from the sketch. You can read, write or erase the credentials using this class individually. It's <a href="credit.html#autoconnectcredential">AutoConnectCredential</a> class which provides the access method to the saved credentials in EEPROM. Refer to section <a href="credit.html">Saved credentail access</a> for details.</p>
<p>AutoConnect stores the established WiFi connection in the flash of the ESP8266/ESP32 module and equips the class to access it from the sketch. You can read, write or erase the credentials using this class individually. It's <a href="credit.html#autoconnectcredential">AutoConnectCredential</a> class which provides the access method to the saved credentials in the flash. Refer to section <a href="credit.html">Saved credentials access</a> for details.</p>
<div class="admonition note">
<p class="admonition-title">Where to store credentials in ESP32 with AutoConnect v1.0.0 or later</p>
<p>Since v1.0.0, credentials are stored in nvs of ESP32. AutoConnect v1.0.0 or later accesses the credentials area using the <strong>Preferences</strong> class with the arduino esp-32 core. So in ESP32, the credentials are not in the EEPROM, it is in the namespace <strong>AC_CREDT</strong> of the nvs. See <a href="credit.html">Saved credentials access</a> for details.<br />
In ESP8266, it is saved in EEPROM as is conventionally done.</p>
</div>
<h3 id="automatic-reconnect"><i class="fa fa-caret-right"></i> Automatic reconnect<a class="headerlink" href="#automatic-reconnect" title="Permanent link">&para;</a></h3>
<p>When the captive portal is started, SoftAP starts and the STA is disconnected. The current SSID setting memorized in ESP8266 will be lost but then the reconnect behavior of ESP32 is somewhat different from this.</p>
<p>The <a href="https://github.com/espressif/arduino-esp32/blob/a0f0bd930cfd2d607bf3d3288f46e2d265dd2e11/libraries/WiFi/src/WiFiSTA.h#L46"><em>WiFiSTAClass::disconnect</em></a> 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 <a href="https://github.com/esp8266/Arduino/blob/7e1bdb225da8ab337373517e6a86a99432921a86/libraries/ESP8266WiFi/src/ESP8266WiFiSTA.cpp#L296">ESP8266WiFiSTAClass</a> has the effect of deleting the currently connected WiFi configuration and its default value is "false". On the ESP32 platform, even if WiFi.disconnect is executed, WiFi.begin() without the parameters in the next turn will try to connect to that AP. That is, automatic reconnection is implemented in arduino-esp32 already. Although this behavior appears seemingly competent, it is rather a disadvantage in scenes where you want to change the access point each time. When explicitly disconnecting WiFi from the Disconnect menu, AutoConnect will erase the AP connection settings saved by arduino-esp32 core. AutoConnect's automatic reconnection is a mechanism independent from the automatic reconnection of the arduino-esp32 core.</p>
<p>If the <a href="apiconfig.html#autoreconnect"><strong>autoReconnect</strong></a> option of the <a href="apiconfig.html">AutoConnectConfig</a> class is enabled, it automatically attempts to reconnect to the disconnected past access point. When the autoReconnect option is specified, AutoConnect will not start SoftAP immediately if the first WiFi.begin fails. It will scan WiFi signal and the same connection information as the detected BSSID is stored in EEPROM as AutoConnect's credentials, explicitly apply it with WiFi.begin and rerun.</p>
<p>If the <a href="apiconfig.html#autoreconnect"><strong>autoReconnect</strong></a> option of the <a href="apiconfig.html">AutoConnectConfig</a> class is enabled, it automatically attempts to reconnect to the disconnected past access point. When the autoReconnect option is specified, AutoConnect will not start SoftAP immediately if the first WiFi.begin fails. It will scan WiFi signal and the same connection information as the detected BSSID is stored in the flash as AutoConnect's credentials, explicitly apply it with WiFi.begin and rerun.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">Portal;</span>
<span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">Config;</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">Config.autoReconnect</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">true;</span>
@ -1131,13 +1208,14 @@
<span style="color: #f8f8f2">Portal.begin();</span>
</pre></div>
<p>An autoReconnect option is available to <em>AutoConnect::begin</em> without SSID and pass passphrase.</p>
<p>An autoReconnect option is available to <em>AutoConnect::begin</em> without SSID and pass Passphrase.</p>
<div class="admonition caution">
<p class="admonition-title">An autoReconnect will work if SSID detection succeeded</p>
<p>An autoReconnect will not effect if the SSID which stored credential to be connected is a hidden access point.</p>
</div>
<h3 id="auto-save-credential"><i class="fa fa-caret-right"></i> Auto save Credential<a class="headerlink" href="#auto-save-credential" title="Permanent link">&para;</a></h3>
<p>By default, AutoConnect saves the credentials of the established connection in EEPROM. You can disable it with the <a href="apiconfig.html#autosave"><strong>autoSave</strong></a> parameter specified by <a href="apiconfig.html">AutoConnectConfig</a>.</p>
<p>By default, AutoConnect saves the credentials of the established connection to the flash. You can disable it with the <a href="apiconfig.html#autosave"><strong>autoSave</strong></a> parameter specified by <a href="apiconfig.html">AutoConnectConfig</a>.<br />
See the <a href="credit.html">Saved credentials access</a> chapter for details on accessing stored credentials.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">Portal;</span>
<span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">Config;</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">Config.autoSave</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">AC_SAVECREDENTIAL_NEVER;</span>
@ -1146,8 +1224,30 @@
</pre></div>
<div class="admonition note">
<p class="admonition-title">In ESP32, the credentials for AutoConnect are not in NVS</p>
<p>The credentials used by AutoConnect are not saved in NVS on ESP32 module. ESP-IDF saves the WiFi connection configuration to NVS, but AutoConnect stores it on the EEPROM partition. You can find the partition table for default as <a href="https://github.com/espressif/arduino-esp32/blob/master/tools/partitions/default.csv">default.csv</a></p>
<p class="admonition-title">Credentials storage location</p>
<p>The location where AutoConnect saves credentials depends on the module type and the AutoConnect library version, also arduino-esp32 core version.
<table>
<tr>
<th rowspan="2" style="vertical-align:bottom">AutoConnect</th>
<th rowspan="2" style="vertical-align:bottom">Arduino core<br>for ESP8266</th>
<th colspan="2" style="text-align:center;vertical-align:bottom">Arduino core for ESP32</th>
</tr>
<tr>
<th style="text-align:center;vertical-align:bottom">1.0.2 earlier</td>
<th style="text-align:center;vertical-align:bottom">1.0.3 later</td>
</tr>
<tr>
<td>v0.9.12 earlier</td>
<td rowspan="2" style="text-align:center;vertical-align:middle">EEPROM</td>
<td>EEPROM (partition)</td>
<td>Not supported</td>
</tr>
<tr>
<td>v1.0.0 later</td>
<td>Preferences (nvs)<p>(Can be used EEPROM with turning off AUTOCONNECT_USE_PREFERENCES macro)</p></td>
<td>Preferences (nvs)</td>
</tr>
</table></p>
</div>
<h3 id="captive-portal-start-detection"><i class="fa fa-caret-right"></i> Captive portal start detection<a class="headerlink" href="#captive-portal-start-detection" title="Permanent link">&para;</a></h3>
<p>The captive portal will only be activated if the first <em>WiFi::begin</em> fails. Sketch can detect with the <a href="api.html#ondetect"><em>AutoConnect::onDetect</em></a> 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.</p>
@ -1322,7 +1422,7 @@ Also, if you want to stop AutoConnect completely when the captive portal is time
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">acConfig;</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">acConfig.autoRaise</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">false;</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">acConfig.autoRise</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">false;</span>
</span><span style="color: #f8f8f2">portal.config(acConfig);</span>
<span style="color: #f8f8f2">portal.begin();</span>
</pre></div>
@ -1356,8 +1456,12 @@ Sketch OTA update File system EEPROM WiFi config (SDK)
<blockquote>
<p>EEPROM library uses one sector of flash located <a href="http://arduino-esp8266.readthedocs.io/en/latest/libraries.html?highlight=SPIFFS#eeprom">just after the SPIFFS</a>.</p>
</blockquote>
<p>Also, the placement of the EEPROM area of ESP32 is described in the <a href="https://github.com/espressif/arduino-esp32/blob/master/tools/partitions/default.csv">partition table</a>. 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.</p>
<p>Also, in ESP32 arduino core 1.0.2 earlier, the placement of the EEPROM area of ESP32 is described in the <a href="https://github.com/espressif/arduino-esp32/blob/master/tools/partitions/default.csv">partition table</a>. 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.</p>
<p>The <a href="apiconfig.html#boundaryoffset"><strong>boundaryOffset</strong></a> in <a href="apiconfig.html">AutoConnectConfig</a> specifies the start offset of the credentials storage area. The default value is 0.</p>
<div class="admonition info">
<p class="admonition-title">The boundaryOffset ignored with AutoConnect v1.0.0 later on ESP32 arduino core 1.0.3 later</p>
<p>For ESP32 arduino core 1.0.3 and later, AutoConnect will store credentials to Preferences in the nvs. Since it is defined as the namespace dedicated to AutoConnect and separated from the area used for user sketches. Therefore, the boundaryOffet is ignored with the combination of AutoConnect v1.0.0 or later and the arduino-esp32 1.0.3 or later.</p>
</div>
<h3 id="on-demand-start-the-captive-portal"><i class="fa fa-caret-right"></i> On-demand start the captive portal<a class="headerlink" href="#on-demand-start-the-captive-portal" title="Permanent link">&para;</a></h3>
<p>If you do not usually connect to WiFi and need to establish a WiFi connection if necessary, you can combine the <a href="apiconfig.html#autorise"><strong>autoRise</strong></a> option with the <a href="apiconfig.html#immediatestart"><strong>immediateStart</strong></a> option to achieve on-demand connection. This behavior is similar to the <a href="https://github.com/tzapu/WiFiManager#on-demand-configuration-portal">WiFiManager's startConfigPortal</a> function. In order to do this, you usually configure only with AutoConnectConfig in <em>setup()</em> and <a href="api.html#begin"><em>AutoConnect::begin</em></a> handles in <em>loop()</em>.</p>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">Portal;</span>
@ -1544,7 +1648,7 @@ But this method is not recommended. The broadcast radio of SSID emitted from Sof
<p>The AutoConnect ticker indicates the WiFi connection status in the following three flicker patterns:</p>
<ul>
<li>Short blink: The ESP8266/ESP32 module stays in APSTA mode.</li>
<li>Short blink: The ESP module stays in APSTA mode.</li>
<li>Short-on and long-off: No STA connection state. (i.e. WiFi.status != WL_CONNECTED)</li>
<li>No blink: WiFi connection with access point established and data link enabled. (i.e. WiFi.status = WL_CONNECTED)</li>
</ul>
@ -1557,13 +1661,13 @@ But this method is not recommended. The broadcast radio of SSID emitted from Sof
<ul>
<li><code>AUTOCONNECTT_FLICKER_PERIODAP</code>:<br />
Assigns a flicker period when the ESP8266/ESP32 module stays in APSTA mode.</li>
Assigns a flicker period when the ESP module stays in APSTA mode.</li>
<li><code>AUTOCONNECT_FLICKER_PERIODDC</code>:<br />
Assigns a flicker period when WiFi is disconnected.</li>
<li><code>AUTOCONNECT_FLICKER_WIDTHAP</code> and <code>AUTOCONNECT_FLICKER_WIDTHDC</code>:<br />
Specify the duty rate for each period[ms] in 8-bit resolution.</li>
</ul>
<p><a href="apiconfig.html#tickerport">AutoConnectConfig::tickerPort</a> specifies a port that outputs the flicker signal. If you are using an LED-equipped ESP8266/ESP32 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 <strong>LED_BUILTIN</strong>. You can refer to the Arduino IDE's variant information to find out which pin actually on the module assign to <strong>LED_BUILTIN</strong>.<sup id="fnref:3"><a class="footnote-ref" href="#fn:3" rel="footnote">3</a></sup></p>
<p><a href="apiconfig.html#tickerport">AutoConnectConfig::tickerPort</a> 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 <strong>LED_BUILTIN</strong>. You can refer to the Arduino IDE's variant information to find out which pin actually on the module assign to <strong>LED_BUILTIN</strong>.<sup id="fnref:3"><a class="footnote-ref" href="#fn:3" rel="footnote">3</a></sup></p>
<p><a href="apiconfig.html#tickeron">AutoConnectConfig::tickerOn</a> 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 <strong>LOW</strong>. The logic level of LED_BUILTIN for popular modules are as follows:</p>
<table>
<thead>

@ -389,18 +389,78 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7" checked>
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8" checked>
<label class="md-nav__link" for="nav-7">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -644,6 +704,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -663,13 +735,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -735,13 +807,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -1316,7 +1388,7 @@ This function is provided to access the fields (ie. the AutoConnectElements) wit
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid">
<a href="achandling.html" title="Handling the custom Web pages" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<a href="otaserver.html" title="Using Update Server" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
</div>
@ -1325,7 +1397,7 @@ This function is provided to access the fields (ie. the AutoConnectElements) wit
<span class="md-footer-nav__direction">
Previous
</span>
Handling the custom Web pages
Using Update Server
</span>
</div>
</a>

@ -389,18 +389,78 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7" checked>
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8" checked>
<label class="md-nav__link" for="nav-7">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -507,6 +567,20 @@
getElements
</a>
</li>
<li class="md-nav__item">
<a href="#ismenu" title=" isMenu" class="md-nav__link">
isMenu
</a>
</li>
<li class="md-nav__item">
<a href="#isvalid" title=" isValid" class="md-nav__link">
isValid
</a>
</li>
<li class="md-nav__item">
@ -617,6 +691,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -636,13 +722,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -708,13 +794,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -888,6 +974,20 @@
getElements
</a>
</li>
<li class="md-nav__item">
<a href="#ismenu" title=" isMenu" class="md-nav__link">
isMenu
</a>
</li>
<li class="md-nav__item">
<a href="#isvalid" title=" isValid" class="md-nav__link">
isValid
</a>
</li>
<li class="md-nav__item">
@ -1043,6 +1143,24 @@ Get vector of reference of all elements.
<span style="color: #f8f8f2">}</span>
</pre></div>
<h3 id="ismenu"><i class="fa fa-caret-right"></i> isMenu<a class="headerlink" href="#ismenu" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">isMenu(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</pre></div>
Returns whether embedded in the menu or not. The isMenu is a function that complements the <a href="apiaux.html#menu">menu</a> function.
<dl class="apidl">
<dt><strong>Return value</strong></dt>
<dd><span class="apidef">true</span><span class="apidesc">The custom Web page has been incorporated into the AutoConnect menu as a menu item.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">This custom Web page is not currently a menu item.</span></dd>
</dl></p>
<h3 id="isvalid"><i class="fa fa-caret-right"></i> isValid<a class="headerlink" href="#isvalid" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">isValid(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</pre></div>
Performs <a href="apielements.html#isvalid">validation</a> of all <a href="apielements.html#autoconnectinput">AutoConnectInput</a> elements owned by AutoConnectAux and returns the result. The isValid function will return the true even if the AutoConnectAux does not own AutoConnectInputs.
<dl class="apidl">
<dt><strong>Return value</strong></dt>
<dd><span class="apidef">true</span><span class="apidesc">Validation is successful. A value of all AutoConnectInputs match with each pattern.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">Some elements failed validation.</span></dd>
</dl></p>
<h3 id="load"><i class="fa fa-caret-right"></i> load<a class="headerlink" href="#load" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">load(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">in)</span>
</pre></div>
@ -1122,7 +1240,7 @@ The outermost <code>[</code>, <code>]</code> is missing.</p>
<h3 id="menu"><i class="fa fa-caret-right"></i> menu<a class="headerlink" href="#menu" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">menu(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">post)</span>
</pre></div>
Set or reset the display as menu item for this AutoConnectAux. This function programmatically manipulates the menu parameter of the <a href="apiaux.html#autoconnectaux">AutoConenctAux constructor</a>.
Set or reset the display as menu item for this AutoConnectAux. This function programmatically manipulates the menu parameter of the <a href="apiaux.html#autoconnectaux">AutoConnectAux constructor</a>.
<dl class="apidl">
<dt><strong>Parameter</strong></dt>
<dd><span class="apidef">true</span><span class="apidesc">Show on the menu.</span></dd>
@ -1185,7 +1303,7 @@ Register the upload handler of the AutoConnectAux.
<h3 id="release"><i class="fa fa-caret-right"></i> release<a class="headerlink" href="#release" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">release(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">name)</span>
</pre></div>
Release a specified AutoConnectElement from AutoConenctAux. The release function is provided to dynamically change the structure of the custom Web pages with the sketch. By combining the release function and the <a href="apiaux.html#add">add</a> function or the <a href="apiaux.html#loadelement">loadElement</a> function, the sketch can change the style of the custom Web page according to its behavior.
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 <a href="apiaux.html#add">add</a> function or the <a href="apiaux.html#loadelement">loadElement</a> function, the sketch can change the style of the custom Web page according to its behavior.
<dl class="apidl">
<dt><strong>Parameter</strong></dt>
<dd><span class="apidef">name</span><span class="apidesc">Specifies the name of AutoConnectElements to be released.</span></dd>
@ -1196,7 +1314,7 @@ Release a specified AutoConnectElement from AutoConenctAux. The release function
<h3 id="saveelement"><i class="fa fa-caret-right"></i> saveElement<a class="headerlink" href="#saveelement" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">saveElement(Stream</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">out,</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">vector</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">String</span><span style="color: #f92672">&gt;</span> <span style="color: #66d9ef">const</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">names</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">{})</span>
</pre></div>
Write elements of AutoConnectAux to the stream. The saveElement function outputs the specified AutoConenctElements as a JSON document using the <a href="https://arduinojson.org/v5/api/jsonobject/prettyprintto/">prettyPrintTo</a> function of the <a href="https://arduinojson.org/">ArduinoJson</a> library.
Write elements of AutoConnectAux to the stream. The saveElement function outputs the specified AutoConnectElements as a JSON document using the <a href="https://arduinojson.org/v5/api/jsonobject/prettyprintto/">prettyPrintTo</a> function of the <a href="https://arduinojson.org/">ArduinoJson</a> library.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">out</span><span class="apidesc">Output stream to be output. SPIFFS, SD also Serial can be specified generally.</span></dd>

@ -389,18 +389,78 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7" checked>
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8" checked>
<label class="md-nav__link" for="nav-7">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -715,6 +775,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -734,13 +806,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -806,13 +878,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -1204,7 +1276,7 @@
<dd><span class="apidef">IPAddress</span><span class="apidesc">The default value is <strong>172.217.28.1</strong></span></dd>
</dl></p>
<h3 id="autoreconnect"><i class="fa fa-caret-right"></i> autoReconnect<a class="headerlink" href="#autoreconnect" title="Permanent link">&para;</a></h3>
<p>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, <em>AutoConnect::begin()</em> function will attempt to reconnect to a known access point using credentials stored in the EEPROM, even if the connection failed by current SSID.<br />
<p>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, <em>AutoConnect::begin()</em> function will attempt to reconnect to a known access point using credentials stored in the flash, even if the connection failed by current SSID.<br />
If the connection fails, starts the captive portal in SoftAP+STA mode.<br />
<dl class="apidl">
<dt><strong>Type</strong></dt>
@ -1256,7 +1328,8 @@ If the connection fails, starts the captive portal in SoftAP+STA mode.<br />
</dl></p>
<h3 id="boundaryoffset"><i class="fa fa-caret-right"></i> boundaryOffset<a class="headerlink" href="#boundaryoffset" title="Permanent link">&para;</a></h3>
<p>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)<br />
The default value is 0.
The default value is 0.<br />
This option is valid only for ESP8266 or ESP32 arduino core 1.0.2 earlier.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd>uint16_t</dd>
@ -1384,11 +1457,11 @@ The default value is 0.
<dt><strong>Type</strong></dt>
<dd>bool</dd>
<dt><strong>Value</strong></dt>
<dd><span class="apidef">true</span><span class="apidesc">Output the flicker signal while <a href="api.html#begin">AutoConnect::begin</a> operation. The <strong>AUTOCONNECT_TICKER_PORT</strong> macro defined in the <code>AutoConnectDefs.h</code> header file assigns pins for signal output. The default pin is arduino variants LED_BUILTIN. For boards without the LED_BUILTIN pin, assume pin #2.</span></dd>
<dd><span class="apidef">true</span><span class="apidesc">Output the flicker signal while <a href="api.html#begin">AutoConnect::begin</a> operation. The <strong>AUTOCONNECT_TICKER_PORT</strong> macro in the <code>AutoConnectDefs.h</code> 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.</span></dd>
<dd><span class="apidef">false</span>No flicker signal output.<span class="apidesc"></span></dd>
</dl></p>
<h3 id="tickerport"><i class="fa fa-caret-right"></i> tickerPort<a class="headerlink" href="#tickerport" title="Permanent link">&para;</a></h3>
<p>Specifies the GPIO port number to output the flicker signal of the ticker. The default assumes on the board dependent definition <strong>LED_BUILTIN</strong> macro redefined by <strong>AUTOCONNECT_TICKER_PORT</strong> in <code>AutoConnectDefs.h</code>.
<p>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 <strong>AUTOCONNECT_TICKER_PORT</strong> in <code>AutoConnectDefs.h</code>.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd>uint8_t</dd>

File diff suppressed because it is too large Load Diff

@ -389,18 +389,78 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7" checked>
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8" checked>
<label class="md-nav__link" for="nav-7">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -458,6 +518,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
@ -512,13 +584,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -584,13 +656,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -740,6 +812,7 @@
<dd><span class="apidef">BAR_24</span>Bars icon, 24x24.</dd>
<dd><span class="apidef">BAR_32</span>Bars icon, 32x32.</dd>
<dd><span class="apidef">BAR_48</span>Bars icon, 48x48.</dd>
<dd><span class="apidef">COG_16</span>Cog icon, 16x16.</dd>
<dd><span class="apidef">COG_24</span>Cog icon, 24x24.</dd>
<dd><span class="apidef">COG_32</span>Cog icon, 32x32.</dd>
</dl>
@ -773,7 +846,7 @@
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid">
<a href="apielements.html" title="AutoConnectElements API" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
</div>
@ -782,7 +855,7 @@
<span class="md-footer-nav__direction">
Previous
</span>
AutoConnectElements API
AutoConnectUpdate API
</span>
</div>
</a>

File diff suppressed because it is too large Load Diff

@ -524,10 +524,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -586,6 +646,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -605,13 +677,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -677,13 +749,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>

@ -122,7 +122,7 @@
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
<a href="#0912-aug-18-2019" tabindex="1" class="md-skip">
<a href="#100-sept-7-2019" tabindex="1" class="md-skip">
Skip to content
</a>
@ -395,10 +395,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -457,6 +517,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -476,13 +548,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -548,13 +620,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -653,6 +725,13 @@
<label class="md-nav__title" for="__toc">Table of contents</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#100-sept-7-2019" title="[1.0.0] Sept. 7, 2019" class="md-nav__link">
[1.0.0] Sept. 7, 2019
</a>
</li>
<li class="md-nav__item">
<a href="#0912-aug-18-2019" title="[0.9.12] Aug. 18, 2019" class="md-nav__link">
[0.9.12] Aug. 18, 2019
@ -778,6 +857,13 @@
<label class="md-nav__title" for="__toc">Table of contents</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#100-sept-7-2019" title="[1.0.0] Sept. 7, 2019" class="md-nav__link">
[1.0.0] Sept. 7, 2019
</a>
</li>
<li class="md-nav__item">
<a href="#0912-aug-18-2019" title="[0.9.12] Aug. 18, 2019" class="md-nav__link">
[0.9.12] Aug. 18, 2019
@ -881,7 +967,15 @@
<h1>Change log</h1>
<h4 id="0912-aug-18-2019">[0.9.12] Aug. 18, 2019<a class="headerlink" href="#0912-aug-18-2019" title="Permanent link">&para;</a></h4>
<h4 id="100-sept-7-2019">[1.0.0] Sept. 7, 2019<a class="headerlink" href="#100-sept-7-2019" title="Permanent link">&para;</a></h4>
<ul>
<li>Supports Arduino core for ESP32 1.0.3.</li>
<li>Supports AutoConnectUpdate for the <a href="otaupdate.html">OTA update</a>.</li>
<li>Supports Preferences for saving credentials with ESP32 core 1.0.3 and later. <strong>In ESP32, the credentials stored past in EEPROM will lose</strong>.</li>
<li>Supports <a href="apiaux.html#isvalid"><strong>AutoConnectAux::isValid</strong></a> function.</li>
<li>Supports the <a href="achandling.html#transfer-of-input-values-across-pages"><strong>global</strong></a> attribute with all AutoConnectElements.</li>
</ul>
<h4 id="0912-aug-18-2019">[0.9.12] Aug. 18, 2019<a class="headerlink" href="#0912-aug-18-2019" title="Permanent link">&para;</a></h4>
<ul>
<li>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 <strong>172.217.28.1</strong>.</li>
</ul>

@ -395,10 +395,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -457,6 +517,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -476,13 +548,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -550,13 +622,13 @@
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9" checked>
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10" checked>
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>

@ -122,7 +122,7 @@
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
<a href="#saved-credentials-in-eeprom" tabindex="1" class="md-skip">
<a href="#saved-credentials-in-the-flash" tabindex="1" class="md-skip">
Skip to content
</a>
@ -395,10 +395,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -457,6 +517,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -476,13 +548,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -550,13 +622,13 @@
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9" checked>
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10" checked>
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -603,8 +675,15 @@
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#saved-credentials-in-eeprom" title="Saved credentials in EEPROM" class="md-nav__link">
Saved credentials in EEPROM
<a href="#saved-credentials-in-the-flash" title="Saved credentials in the flash" class="md-nav__link">
Saved credentials in the flash
</a>
</li>
<li class="md-nav__item">
<a href="#credentials-storage-location" title="Credentials storage location" class="md-nav__link">
Credentials storage location
</a>
</li>
@ -806,8 +885,15 @@
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#saved-credentials-in-eeprom" title="Saved credentials in EEPROM" class="md-nav__link">
Saved credentials in EEPROM
<a href="#saved-credentials-in-the-flash" title="Saved credentials in the flash" class="md-nav__link">
Saved credentials in the flash
</a>
</li>
<li class="md-nav__item">
<a href="#credentials-storage-location" title="Credentials storage location" class="md-nav__link">
Credentials storage location
</a>
</li>
@ -933,8 +1019,35 @@
<h1>Saved credentials access</h1>
<h2 id="saved-credentials-in-eeprom">Saved credentials in EEPROM<a class="headerlink" href="#saved-credentials-in-eeprom" title="Permanent link">&para;</a></h2>
<p>AutoConnect stores the established WiFi connection in the EEPROM of the ESP8266/ESP32 module and equips the class to access it from the sketch. You can read, write or erase the credentials using this class individually. It's <a href="#autoconnectcredential"><strong>AutoConnectCredential</strong></a> class which provides the access method to the saved credentials in EEPROM.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup></p>
<h2 id="saved-credentials-in-the-flash">Saved credentials in the flash<a class="headerlink" href="#saved-credentials-in-the-flash" title="Permanent link">&para;</a></h2>
<p>AutoConnect stores the established WiFi connection in the flash memory of the ESP8266/ESP32 module and equips the class to access the credentials from the sketch. You can read, write or erase the credentials using this class individually. It's <a href="#autoconnectcredential"><strong>AutoConnectCredential</strong></a> class which provides the access method to the saved credentials in the flash.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup></p>
<h2 id="credentials-storage-location">Credentials storage location<a class="headerlink" href="#credentials-storage-location" title="Permanent link">&para;</a></h2>
<p>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<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup>) are used depending on the library versions.</p>
<table>
<tr>
<th rowspan="2" style="vertical-align:bottom">AutoConnect</th>
<th rowspan="2" style="vertical-align:bottom">Arduino core<br>for ESP8266</th>
<th colspan="2" style="text-align:center;vertical-align:bottom">Arduino core for ESP32</th>
</tr>
<tr>
<th style="text-align:center;vertical-align:bottom">1.0.2 earlier</td>
<th style="text-align:center;vertical-align:bottom">1.0.3 later</td>
</tr>
<tr>
<td>v0.9.12 earlier</td>
<td rowspan="2" style="text-align:center;vertical-align:middle">EEPROM</td>
<td>EEPROM (partition)</td>
<td>Not supported</td>
</tr>
<tr>
<td>v1.0.0 later</td>
<td>Preferences (nvs)<p>(Can be used EEPROM with turning off AUTOCONNECT_USE_PREFERENCES macro)</p></td>
<td>Preferences (nvs)</td>
</tr>
</table>
<p>However, sketches do not need to know where to store credentials using the commonly accessible <a href="#AutoConnectCredential">AutoConnectCredential</a> API.</p>
<p>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 <strong>AUTOCONNECT_USE_PREFERENCES</strong><sup id="fnref:3"><a class="footnote-ref" href="#fn:3" rel="footnote">3</a></sup> macro definition in <code>AutoConnectCredentials.h</code> file. AutoConnect behaves assuming that credentials are stored in EEPROM if <code>AUTOCONNECT_USE_PREFERENCES</code> is not defined.</p>
<h2 id="autoconnectcredential">AutoConnectCredential<a class="headerlink" href="#autoconnectcredential" title="Permanent link">&para;</a></h2>
<h3 id="include-header"><i class="fa fa-code"></i> Include header<a class="headerlink" href="#include-header" title="Permanent link">&para;</a></h3>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnectCredential.h&gt;</span>
@ -944,12 +1057,12 @@
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectCredential();</span>
</pre></div>
<p>AutoConnectCredential default constructor. The default offset value is 0. If the offset value is 0, the credential area starts from the top of the EEPROM. AutoConnect sometimes overwrites data when using this area with user sketch.</p>
<p>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.</p>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectCredential(</span><span style="color: #66d9ef">uint16_t</span> <span style="color: #f8f8f2">offset);</span>
</pre></div>
<dl class="apidl">
<dt><strong>Parameter</strong></dt>
<dd><span class="apidef">offset</span><span class="apidesc">Species offset from the top of the EEPROM for the credential area together. The offset value is from 0 to the flash sector size.</span></dd>
<dd><span class="apidef">offset</span><span class="apidesc">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.</span></dd>
</dl></p>
<h3 id="public-member-functions"><i class="fa fa-code"></i> Public member functions<a class="headerlink" href="#public-member-functions" title="Permanent link">&para;</a></h3>
<h4 id="entries"><i class="fa fa-caret-right"></i> entries<a class="headerlink" href="#entries" title="Permanent link">&para;</a></h4>
@ -1009,6 +1122,22 @@
<dd><span class="apidef">true</span><span class="apidesc">Successfully deleted.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">Failed to delete.</span></dd>
</dl></p>
<div class="admonition example">
<p class="admonition-title">Clear saved credentials</p>
<p>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.
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #a6e22e">deleteAllCredentials</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">AutoConnectCredential</span> <span style="color: #f8f8f2">credential;</span>
<span style="color: #66d9ef">struct</span> <span style="color: #f8f8f2">station_config</span> <span style="color: #f8f8f2">config;</span>
<span style="color: #66d9ef">uint8_t</span> <span style="color: #f8f8f2">ent</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">credential.entries();</span>
<span style="color: #66d9ef">while</span> <span style="color: #f8f8f2">(ent</span><span style="color: #f92672">--</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">credential.load(</span><span style="color: #ae81ff">0</span><span style="color: #f8f8f2">,</span> <span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">config);</span>
<span style="color: #f8f8f2">credential.del((</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span><span style="color: #f8f8f2">)</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">config.ssid[</span><span style="color: #ae81ff">0</span><span style="color: #f8f8f2">]);</span>
<span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">}</span>
</pre></div></p>
</div>
<h2 id="the-data-structures">The data structures<a class="headerlink" href="#the-data-structures" title="Permanent link">&para;</a></h2>
<h3 id="station_config"><i class="fa fa-code"></i> station_config<a class="headerlink" href="#station_config" title="Permanent link">&para;</a></h3>
<p>A structure is included in the ESP8266 SDK. You can use it in the sketch like as follows:</p>
@ -1026,7 +1155,7 @@
</pre></div>
<h3 id="the-credential-entry"><i class="fa fa-code"></i> The credential entry<a class="headerlink" href="#the-credential-entry" title="Permanent link">&para;</a></h3>
<p>A data structure of the credential saving area in EEPROM as the below. <sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup></p>
<p>A data structure of the credential saving area in EEPROM as the below. <sup id="fnref:4"><a class="footnote-ref" href="#fn:4" rel="footnote">4</a></sup></p>
<table>
<thead>
<tr>
@ -1085,7 +1214,13 @@
<p>An example using AutoConnectCredential is provided as <a href="https://github.com/Hieromon/AutoConnect/blob/master/examples/Credential/Credential.ino">an example</a> of a library sketch to delete saved credentials.&#160;<a class="footnote-backref" href="#fnref:1" rev="footnote" title="Jump back to footnote 1 in the text">&#8617;</a></p>
</li>
<li id="fn:2">
<p>There may be 0xff as an invalid data in the credential saving area. The 0xff area would be reused.&#160;<a class="footnote-backref" href="#fnref:2" rev="footnote" title="Jump back to footnote 2 in the text">&#8617;</a></p>
<p>The namespace for Preferences used by AutoConnect is <strong>AC_CREDT</strong>.&#160;<a class="footnote-backref" href="#fnref:2" rev="footnote" title="Jump back to footnote 2 in the text">&#8617;</a></p>
</li>
<li id="fn:3">
<p>Available only for AutoConnect v1.0.0 and later.&#160;<a class="footnote-backref" href="#fnref:3" rev="footnote" title="Jump back to footnote 3 in the text">&#8617;</a></p>
</li>
<li id="fn:4">
<p>There may be 0xff as an invalid data in the credential saving area. The 0xff area would be reused.&#160;<a class="footnote-backref" href="#fnref:4" rev="footnote" title="Jump back to footnote 4 in the text">&#8617;</a></p>
</li>
</ol>
</div>

@ -395,10 +395,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -457,6 +517,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -478,13 +550,13 @@
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8" checked>
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9" checked>
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -666,13 +738,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>

@ -395,10 +395,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -457,6 +517,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -476,13 +548,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -548,13 +620,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -684,15 +756,15 @@
</li>
<li class="md-nav__item">
<a href="#how-can-i-detect-the-captive-portal-starting" title=" How can I detect the captive portal starting?" class="md-nav__link">
How can I detect the captive portal starting?
<a href="#hang-up-after-reset" title=" Hang up after Reset?" class="md-nav__link">
Hang up after Reset?
</a>
</li>
<li class="md-nav__item">
<a href="#how-change-esp8266ap-for-ssid-name-in-captive-portal" title=" How change esp8266ap for SSID name in Captive portal?" class="md-nav__link">
How change esp8266ap for SSID name in Captive portal?
<a href="#how-can-i-detect-the-captive-portal-starting" title=" How can I detect the captive portal starting?" class="md-nav__link">
How can I detect the captive portal starting?
</a>
</li>
@ -705,8 +777,8 @@
</li>
<li class="md-nav__item">
<a href="#hang-up-after-reset" title=" Hang up after Reset?" class="md-nav__link">
Hang up after Reset?
<a href="#how-change-ssid-or-password-in-captive-portal" title=" How change SSID or Password in Captive portal?" class="md-nav__link">
How change SSID or Password in Captive portal?
</a>
</li>
@ -930,15 +1002,15 @@
</li>
<li class="md-nav__item">
<a href="#how-can-i-detect-the-captive-portal-starting" title=" How can I detect the captive portal starting?" class="md-nav__link">
How can I detect the captive portal starting?
<a href="#hang-up-after-reset" title=" Hang up after Reset?" class="md-nav__link">
Hang up after Reset?
</a>
</li>
<li class="md-nav__item">
<a href="#how-change-esp8266ap-for-ssid-name-in-captive-portal" title=" How change esp8266ap for SSID name in Captive portal?" class="md-nav__link">
How change esp8266ap for SSID name in Captive portal?
<a href="#how-can-i-detect-the-captive-portal-starting" title=" How can I detect the captive portal starting?" class="md-nav__link">
How can I detect the captive portal starting?
</a>
</li>
@ -951,8 +1023,8 @@
</li>
<li class="md-nav__item">
<a href="#hang-up-after-reset" title=" Hang up after Reset?" class="md-nav__link">
Hang up after Reset?
<a href="#how-change-ssid-or-password-in-captive-portal" title=" How change SSID or Password in Captive portal?" class="md-nav__link">
How change SSID or Password in Captive portal?
</a>
</li>
@ -1125,12 +1197,12 @@ You have the following two options to avoid this conflict:</p>
<ul>
<li>
<p>Move the credential saving area of EEPROM.<br />
You can protect your data from corruption by notifying AutoConnect where to save credentials. Notification of the save location for the credentials uses <a href="apiconfig.html#boundaryoffset"><strong>AutoConnectConfig::boundaryOffset</strong></a> option. Refer to the chapter on <a href="advancedusage.html#move-the-saving-area-of-eeprom-for-the-credentials">Advanced usage</a> for details.</p>
You can protect your data from corruption by notifying AutoConnect where to save credentials. Notification of the save location for the credentials uses <a href="apiconfig.html#boundaryoffset">AutoConnectConfig::boundaryOffset</a> option. Refer to the chapter on <a href="advancedusage.html#move-the-saving-area-of-eeprom-for-the-credentials">Advanced usage</a> for details.</p>
</li>
<li>
<p>Suppresses the automatic save operation of credentials by AutoConnect.<br />
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 <a href="advancedusage.html#automatic-reconnect">automatic reconnection feature</a> will be lost.<br />
If you want to stop the automatic saving of the credentials, uses <a href="apiconfig.html#autosave"><strong>AutoConnectConfig::autoSave</strong></a> option specifying <strong>AC_SAVECREDENTIAL_NEVER</strong>. Refer to the chapter on <a href="advancedusage.html#auto-save-credential">Advanced usage</a> for details.</p>
If you want to stop the automatic saving of the credentials, uses <a href="apiconfig.html#autosave">AutoConnectConfig::autoSave</a> option specifying <strong>AC_SAVECREDENTIAL_NEVER</strong>. Refer to the chapter on <a href="advancedusage.html#auto-save-credential">Advanced usage</a> for details.</p>
</li>
</ul>
<h2 id="does-not-appear-esp8266ap-in-smartphone"><i class="fa fa-question-circle"></i> Does not appear esp8266ap in smartphone.<a class="headerlink" href="#does-not-appear-esp8266ap-in-smartphone" title="Permanent link">&para;</a></h2>
@ -1162,15 +1234,6 @@ You have the following two options to avoid this conflict:</p>
</details>
<h2 id="does-not-response-from-95ac"><i class="fa fa-question-circle"></i> Does not response from /_ac.<a class="headerlink" href="#does-not-response-from-95ac" title="Permanent link">&para;</a></h2>
<p>Probably <strong>WiFi.begin</strong> failed with the specified SSID. Activating the <a href="advancedusage.html#debug-print">debug printing</a> will help you to track down the cause.</p>
<h2 id="how-can-i-detect-the-captive-portal-starting"><i class="fa fa-question-circle"></i> How can I detect the captive portal starting?<a class="headerlink" href="#how-can-i-detect-the-captive-portal-starting" title="Permanent link">&para;</a></h2>
<p>You can use the <a href="api.html#ondetect">AutoConnect::onDetect</a> exit routine. For more details and an implementation example of the onDetect exit routine, refer to the chapter "<a href="advancedusage.html#captive-portal-start-detection">Captive portal start detection</a>".</p>
<h2 id="how-change-esp8266ap-for-ssid-name-in-captive-portal"><i class="fa fa-question-circle"></i> How change esp8266ap for SSID name in Captive portal?<a class="headerlink" href="#how-change-esp8266ap-for-ssid-name-in-captive-portal" title="Permanent link">&para;</a></h2>
<p>You can change both by using <a href="apiconfig.html#apid">AutoConnectConfig::apid</a> and <a href="apiconfig.html#psk">AutoConnectConfig::psk</a>. Refer to section <a href="advancedusage.html#change-ssid-and-password-for-softap">Change SSID and Password for SoftAP</a> in <a href="advancedusage.html">Advanced usage</a>.</p>
<h2 id="how-change-http-port"><i class="fa fa-question-circle"></i> How change HTTP port?<a class="headerlink" href="#how-change-http-port" title="Permanent link">&para;</a></h2>
<p>HTTP port number is defined as a macro in <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h#L112">AutoConnectDefs.h</a> header file. You can change it directly with several editors and must re-compile.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #75715e">#define AUTOCONNECT_HTTPPORT 80</span>
</pre></div>
<h2 id="hang-up-after-reset"><i class="fa fa-question-circle"></i> Hang up after Reset?<a class="headerlink" href="#hang-up-after-reset" title="Permanent link">&para;</a></h2>
<p>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: <a href="https://github.com/esp8266/Arduino/issues/1017">https://github.com/esp8266/Arduino/issues/1017</a> <sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup></p>
<p>If you received the following message, the boot mode is still sketch uploaded. It needs to the manual reset once.</p>
@ -1202,6 +1265,15 @@ wdt reset
</tbody>
</table>
</div>
<h2 id="how-can-i-detect-the-captive-portal-starting"><i class="fa fa-question-circle"></i> How can I detect the captive portal starting?<a class="headerlink" href="#how-can-i-detect-the-captive-portal-starting" title="Permanent link">&para;</a></h2>
<p>You can use the <a href="api.html#ondetect">AutoConnect::onDetect</a> exit routine. For more details and an implementation example of the onDetect exit routine, refer to the chapter "<a href="advancedusage.html#captive-portal-start-detection">Captive portal start detection</a>".</p>
<h2 id="how-change-http-port"><i class="fa fa-question-circle"></i> How change HTTP port?<a class="headerlink" href="#how-change-http-port" title="Permanent link">&para;</a></h2>
<p>HTTP port number is defined as a macro in <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h#L112">AutoConnectDefs.h</a> header file. You can change it directly with several editors and must re-compile.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #75715e">#define AUTOCONNECT_HTTPPORT 80</span>
</pre></div>
<h2 id="how-change-ssid-or-password-in-captive-portal"><i class="fa fa-question-circle"></i> How change SSID or Password in Captive portal?<a class="headerlink" href="#how-change-ssid-or-password-in-captive-portal" title="Permanent link">&para;</a></h2>
<p>You can change both by using <a href="apiconfig.html#apid">AutoConnectConfig::apid</a> and <a href="apiconfig.html#psk">AutoConnectConfig::psk</a>. Refer to section <a href="advancedusage.html#change-ssid-and-password-for-softap">Change SSID and Password for SoftAP</a> in <a href="advancedusage.html">Advanced usage</a>.</p>
<h2 id="how-erase-the-credentials-saved-in-eeprom"><i class="fa fa-question-circle"></i> How erase the credentials saved in EEPROM?<a class="headerlink" href="#how-erase-the-credentials-saved-in-eeprom" title="Permanent link">&para;</a></h2>
<p>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 <em>AutoConnectCredential</em>. The <em>AutoConnectCrendential</em> class provides the access method to the saved credential in EEPROM and library source file is including it. Refer to '<a href="credit.html#saved-credential-in-eeprom">Saved credential access</a>' on section <a href="credit.html">Appendix</a> for details.</p>
<div class="admonition hint">

@ -463,10 +463,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -525,6 +585,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -544,13 +616,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -616,13 +688,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>

@ -395,10 +395,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -457,6 +517,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -478,13 +550,13 @@
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8" checked>
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9" checked>
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -679,13 +751,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

@ -0,0 +1,524 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="102.55424mm"
height="71.655258mm"
viewBox="0 0 102.55424 71.655259"
version="1.1"
id="svg8"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
sodipodi:docname="global.svg">
<defs
id="defs2">
<marker
inkscape:isstock="true"
style="overflow:visible"
id="marker2572"
refX="0"
refY="0"
orient="auto"
inkscape:stockid="TriangleOutS">
<path
transform="scale(0.2)"
style="fill:#3366cc;fill-opacity:1;fill-rule:evenodd;stroke:#3366cc;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 5.77,0 -2.88,5 V -5 Z"
id="path2570"
inkscape:connector-curvature="0" />
</marker>
<marker
inkscape:stockid="TriangleOutM"
orient="auto"
refY="0"
refX="0"
id="TriangleOutM"
style="overflow:visible"
inkscape:isstock="true">
<path
id="path1800"
d="M 5.77,0 -2.88,5 V -5 Z"
style="fill:#3366cc;fill-opacity:1;fill-rule:evenodd;stroke:#3366cc;stroke-width:1.00000003pt;stroke-opacity:1"
transform="scale(0.4)"
inkscape:connector-curvature="0" />
</marker>
<marker
inkscape:stockid="TriangleOutS"
orient="auto"
refY="0"
refX="0"
id="TriangleOutS"
style="overflow:visible"
inkscape:isstock="true"
inkscape:collect="always">
<path
id="path1803"
d="M 5.77,0 -2.88,5 V -5 Z"
style="fill:#af0000;fill-opacity:1;fill-rule:evenodd;stroke:#af0000;stroke-width:1.00000003pt;stroke-opacity:1"
transform="scale(0.2)"
inkscape:connector-curvature="0" />
</marker>
<marker
inkscape:stockid="Arrow2Mend"
orient="auto"
refY="0"
refX="0"
id="marker1939"
style="overflow:visible"
inkscape:isstock="true">
<path
id="path1937"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
transform="scale(-0.6)"
inkscape:connector-curvature="0" />
</marker>
<marker
inkscape:stockid="Arrow2Mend"
orient="auto"
refY="0"
refX="0"
id="Arrow2Mend"
style="overflow:visible"
inkscape:isstock="true">
<path
id="path1682"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
transform="scale(-0.6)"
inkscape:connector-curvature="0" />
</marker>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4142136"
inkscape:cx="208.76665"
inkscape:cy="161.50278"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1440"
inkscape:window-height="837"
inkscape:window-x="1576"
inkscape:window-y="137"
inkscape:window-maximized="0"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="レイヤー 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-23.157626,-20.551944)">
<path
style="fill:none;stroke:#3366cc;stroke-width:1.06500006;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.06499997, 1.06499997;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker2572)"
d="m 52.325266,81.310952 22.794264,0 -0.463021,-58.480845 2.640127,0"
id="path1653"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
<path
d="m 78.030534,20.565173 v 40.538383 m 2.768744,-40.538383 v 40.538383 m 2.768743,-40.538383 v 40.538383 m 2.768742,-40.538383 v 40.538383 m 2.768742,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76875,-40.538383 v 40.538383 m 2.768739,-40.538383 v 40.538383 m 2.768746,-40.538383 v 40.538383 m 2.76875,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76875,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76874,-40.538383 V 61.103556 M 78.030534,20.565173 H 125.71186 M 78.030534,23.333921 H 125.71186 M 78.030534,26.10267 h 47.681326 m -47.681326,2.76875 h 47.681326 m -47.681326,2.768749 h 47.681326 m -47.681326,2.76875 h 47.681326 m -47.681326,2.768749 h 47.681326 m -47.681326,2.76875 h 47.681326 m -47.681326,2.768749 h 47.681326 m -47.681326,2.76875 h 47.681326 m -47.681326,2.768747 h 47.681326 m -47.681326,2.768751 h 47.681326 m -47.681326,2.768751 h 47.681326 m -47.681326,2.768748 h 47.681326 m -47.681326,2.768748 h 47.681326"
style="fill:none;stroke:#000000;stroke-width:0.0264583px"
id="path1308-0"
inkscape:connector-curvature="0" />
<path
d="m 23.170855,20.565173 v 40.538384 m 2.768744,-40.538384 v 40.538384 m 2.768743,-40.538384 v 40.538384 m 2.768742,-40.538384 v 40.538384 m 2.768742,-40.538384 v 40.538384 m 2.76874,-40.538384 v 40.538384 m 2.76875,-40.538384 v 40.538384 m 2.768739,-40.538384 v 40.538384 m 2.76874,-40.538384 v 40.538384 m 2.76875,-40.538384 v 40.538384 m 2.76874,-40.538384 v 40.538384 m 2.76874,-40.538384 v 40.538384 m 2.76875,-40.538384 v 40.538384 m 2.768739,-40.538384 v 40.538384 m 2.76874,-40.538384 v 40.538384 m 2.76875,-40.538384 v 40.538384 m 2.76874,-40.538384 V 61.103557 M 70.239483,20.565173 V 61.103557 M 23.170855,20.565173 H 70.852182 M 23.170855,23.333922 H 70.852182 M 23.170855,26.102671 H 70.852182 M 23.170855,28.87142 h 47.681327 m -47.681327,2.76875 h 47.681327 m -47.681327,2.76875 h 47.681327 m -47.681327,2.768749 h 47.681327 m -47.681327,2.76875 h 47.681327 m -47.681327,2.768749 h 47.681327 m -47.681327,2.768749 h 47.681327 m -47.681327,2.768749 h 47.681327 m -47.681327,2.76875 h 47.681327 m -47.681327,2.76875 h 47.681327 m -47.681327,2.768749 h 47.681327 m -47.681327,2.768749 h 47.681327"
style="fill:none;stroke:#000000;stroke-width:0.0264583px"
id="path1308"
inkscape:connector-curvature="0" />
<g
id="g3173">
<g
transform="translate(-7.77956,-44.325031)"
id="g2826">
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.93888855px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="39.723991"
y="119.13956"
id="text949-6"><tspan
sodipodi:role="line"
id="tspan947-1"
x="39.723991"
y="119.13956"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332">Input</tspan></text>
<rect
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
id="rect971"
width="15.478125"
height="3.4395833"
x="48.869949"
y="116.46737"
rx="0.75240988"
ry="0.67219442" />
</g>
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
transform="matrix(0.05237375,0,0,0.04755636,28.780412,65.508778)"
id="g1153">
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1097">
<path
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
inkscape:connector-curvature="0"
d="M 578.766,51.487 V 50.592 H 575.77 35.93 32.934 v 0.895 C 15.272,52.701 2.095,66.753 0,83.808 v 3.002 355.724 c 0,6.898 1.795,12.712 4.791,17.949 6.893,12.137 17.068,18.269 31.14,18.269 h 197.012 v 49.695 h -37.425 c -9.281,0 -16.467,7.218 -16.467,16.48 0,9.262 7.186,16.479 16.467,16.479 h 220.666 c 9.281,0 16.768,-7.218 16.768,-16.479 0,-9.263 -7.486,-16.48 -16.768,-16.48 H 378.759 V 478.752 H 575.77 c 14.078,0 24.343,-6.132 31.14,-18.269 3.085,-5.493 5.091,-11.37 5.091,-17.949 V 86.811 83.809 C 609.905,66.753 595.833,52.701 578.766,51.487 Z m 0,35.324 v 355.724 c 0,2.108 -0.895,3.002 -2.996,3.002 H 35.93 c -2.095,0 -2.996,-0.894 -2.996,-3.002 V 86.811 83.809 h 545.831 v 3.002 z"
id="path1095" />
</g>
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1099" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1101" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1103" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1105" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1107" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1109" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1111" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1113" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1115" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1117" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1119" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1121" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1123" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1125" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1127" />
</g>
<g
id="g3143">
<rect
style="opacity:1;vector-effect:none;fill:#007000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
id="rect977"
width="14.163605"
height="4.2002602"
x="37.347015"
y="79.170319"
rx="0.75240886"
ry="0.67219514" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="41.77549"
y="82.452538"
id="text975"><tspan
sodipodi:role="line"
id="tspan973"
x="41.77549"
y="82.452538"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f4f4f4;fill-opacity:1;stroke-width:0.26458332">OK</tspan></text>
</g>
<text
id="text949-6-9"
y="74.906998"
x="44.31398"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.93888855px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
xml:space="preserve"><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332"
y="74.906998"
x="44.31398"
id="tspan947-1-9"
sodipodi:role="line">Value</tspan></text>
</g>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="24.222574"
y="23.870647"
id="text1881"><tspan
sodipodi:role="line"
id="tspan1879"
x="24.222574"
y="23.870647"
style="stroke-width:0.26458332">&quot;uri&quot;: &quot;/input&quot;,</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="27.839397"
style="stroke-width:0.26458332"
id="tspan1302">&quot;element&quot;: [</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="31.808147"
style="stroke-width:0.26458332"
id="tspan1300"> { &quot;name&quot;: &quot;<tspan
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3366cc"
id="tspan1628">Input</tspan>&quot;,</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="35.776897"
style="stroke-width:0.26458332"
id="tspan1254"> &quot;type&quot;: &quot;ACInput&quot;,</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="39.745647"
style="stroke-width:0.26458332"
id="tspan1256"> &quot;pattern&quot;: &quot;<tspan
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
id="tspan1640">^[0-9]{3}$</tspan>&quot;,</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="43.714397"
style="stroke-width:0.26458332"
id="tspan1258"> &quot;<tspan
style="fill:#00cc00;fill-opacity:1"
id="tspan1600">global</tspan>&quot;: <tspan
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#cb0000;fill-opacity:1"
id="tspan1604">true</tspan> },</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="47.683147"
style="stroke-width:0.26458332"
id="tspan1266"> { &quot;name&quot;: &quot;OK&quot;,</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="51.651897"
style="stroke-width:0.26458332"
id="tspan1262"> &quot;type&quot;: &quot;ACSubmit&quot;,</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="55.620647"
style="stroke-width:0.26458332"
id="tspan1264"> &quot;uri&quot;: &quot;/check&quot; }</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="59.589397"
style="stroke-width:0.26458332"
id="tspan1306">]</tspan></text>
<rect
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:none;stroke-width:2.64583325;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.55;paint-order:stroke markers fill"
id="rect1268"
width="52.250557"
height="39.618565"
x="45.316185"
y="76.466698"
rx="0"
ry="0" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="91.673447"
y="126.74931"
id="text1284"><tspan
sodipodi:role="line"
id="tspan1282"
x="91.673447"
y="131.89891"
style="stroke-width:0.26458332" /></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="79.425377"
y="23.870647"
id="text1881-0"><tspan
sodipodi:role="line"
id="tspan1879-8"
x="79.425377"
y="23.870647"
style="stroke-width:0.26458332">&quot;uri&quot;: &quot;/check&quot;,</tspan><tspan
sodipodi:role="line"
x="79.425377"
y="27.839397"
style="stroke-width:0.26458332"
id="tspan1302-2">&quot;element&quot;: [</tspan><tspan
sodipodi:role="line"
x="79.425377"
y="31.808147"
style="stroke-width:0.26458332"
id="tspan1300-2"> { &quot;name&quot;: &quot;<tspan
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3366cc"
id="tspan1632">Input</tspan>&quot;,</tspan><tspan
sodipodi:role="line"
x="79.425377"
y="35.776897"
style="stroke-width:0.26458332"
id="tspan1254-8"> &quot;type&quot;: &quot;ACText&quot;,</tspan><tspan
sodipodi:role="line"
x="79.425377"
y="39.745647"
style="stroke-width:0.26458332"
id="tspan1258-7"> &quot;<tspan
style="fill:#00cc00"
id="tspan1622">global</tspan>&quot;: <tspan
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#cc0000"
id="tspan1618">true</tspan> }</tspan><tspan
sodipodi:role="line"
x="79.425377"
y="43.714397"
style="stroke-width:0.26458332"
id="tspan1306-6">]</tspan></text>
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1099-9"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1101-7"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1103-7"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1105-9"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1107-3"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1109-4"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1111-8"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1113-2"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1115-2"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1117-0"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1119-2"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1121-9"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1123-3"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1125-5"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1127-1"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
id="g3178">
<path
style="fill:#565656;fill-opacity:1;stroke-width:0.05887029"
inkscape:connector-curvature="0"
d="m 116.15034,67.957308 v -0.04256 h -0.15691 -28.273451 -0.156912 v 0.04256 c -0.925025,0.05773 -1.615154,0.725996 -1.724877,1.537069 v 0.142765 16.916887 c 0,0.328037 0.09401,0.604527 0.250923,0.853584 0.361012,0.577187 0.893915,0.868797 1.630918,0.868797 h 10.318257 v 2.363305 h -1.960087 c -0.486081,0 -0.862439,0.34326 -0.862439,0.783717 0,0.440467 0.376358,0.783684 0.862439,0.783684 h 11.557109 c 0.48608,0 0.8782,-0.343267 0.8782,-0.783684 0,-0.440507 -0.39207,-0.783717 -0.8782,-0.783717 h -1.96009 V 88.27641 h 10.31821 c 0.73731,0 1.27493,-0.29161 1.63091,-0.868797 0.16158,-0.261227 0.26664,-0.540717 0.26664,-0.853584 v -16.91684 -0.142764 c -0.10978,-0.811121 -0.84678,-1.479383 -1.74064,-1.537117 z m 0,1.679881 v 16.91688 c 0,0.10025 -0.0469,0.14277 -0.15691,0.14277 H 87.719979 c -0.109723,0 -0.156912,-0.0425 -0.156912,-0.14277 v -16.91688 -0.142764 h 28.587223 v 0.142764 z"
id="path1095-7" />
<text
id="text949-6-9-5"
y="78.081978"
x="97.494308"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.93888855px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
xml:space="preserve"><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332"
y="78.081978"
x="97.494308"
id="tspan947-1-9-1"
sodipodi:role="line">Value</tspan></text>
</g>
<path
id="path1642-3-4"
d="m 102.25703,66.986603 3.87824,-3.878241 c 0.34627,-0.346269 0.10388,-0.946472 -0.39244,-0.946472 h -2.21614 v -3.139532 c 0,-0.30703 -0.247,-0.55404 -0.55403,-0.55404 h -2.21614 c -0.30703,0 -0.55403,0.24701 -0.55403,0.55404 v 3.139532 h -2.216154 c -0.49631,0 -0.73871,0.600203 -0.39244,0.946472 l 3.878254,3.878241 c 0.21699,0.214688 0.56788,0.214688 0.78488,0 z"
inkscape:connector-curvature="0"
style="fill:#bfbfbf;fill-opacity:1;stroke-width:0.26458332"
sodipodi:nodetypes="csscsssscsscc" />
<path
style="fill:none;stroke:#af0000;stroke-width:0.76499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#TriangleOutS)"
d="M 58.486302,30.696873 H 80.036457"
id="path2304"
inkscape:connector-curvature="0" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#003399;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="-68.695595"
y="73.504295"
id="text1881-9"
transform="rotate(-90)"><tspan
sodipodi:role="line"
id="tspan1879-2"
x="-68.695595"
y="73.504295"
style="fill:#003399;stroke-width:0.26458332">Page transition</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;line-height:0.69999999;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#cc0000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="58.435188"
y="26.984177"
id="text1881-5"><tspan
sodipodi:role="line"
id="tspan1879-83"
x="58.435188"
y="26.984177"
style="line-height:0.69999999;fill:#cc0000;stroke-width:0.26458332">Automatic</tspan><tspan
sodipodi:role="line"
x="58.435188"
y="29.206676"
style="line-height:0.69999999;fill:#cc0000;stroke-width:0.26458332"
id="tspan2710">copy</tspan></text>
<path
id="path1642-3-4-0"
d="m 45.018635,66.986603 3.878219,-3.878241 c 0.346267,-0.346269 0.10388,-0.946472 -0.392437,-0.946472 h -2.216128 v -3.139532 c 0,-0.30703 -0.247,-0.55404 -0.554027,-0.55404 h -2.216128 c -0.307027,0 -0.554027,0.24701 -0.554027,0.55404 v 3.139532 h -2.21615 c -0.49631,0 -0.73871,0.600203 -0.39244,0.946472 l 3.878244,3.878241 c 0.216987,0.214688 0.567877,0.214688 0.784874,0 z"
inkscape:connector-curvature="0"
style="fill:#bfbfbf;fill-opacity:1;stroke-width:0.26458332"
sodipodi:nodetypes="csscsssscsscc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 228 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 217 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 775 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 204 KiB

@ -333,6 +333,13 @@
Easy to add the custom Web pages ENHANCED w/v0.9.7
</a>
</li>
<li class="md-nav__item">
<a href="#quick-and-easy-to-equip-the-ota-update-feature-enhanced-wv100" title=" Quick and easy to equip the OTA update feature ENHANCED w/v1.0.0" class="md-nav__link">
Quick and easy to equip the OTA update feature ENHANCED w/v1.0.0
</a>
</li>
</ul>
@ -528,10 +535,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -590,6 +657,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -609,13 +688,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -681,13 +760,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -850,6 +929,13 @@
Easy to add the custom Web pages ENHANCED w/v0.9.7
</a>
</li>
<li class="md-nav__item">
<a href="#quick-and-easy-to-equip-the-ota-update-feature-enhanced-wv100" title=" Quick and easy to equip the OTA update feature ENHANCED w/v1.0.0" class="md-nav__link">
Quick and easy to equip the OTA update feature ENHANCED w/v1.0.0
</a>
</li>
</ul>
@ -932,7 +1018,7 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
<h3 id="simple-usage"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Simple usage<a class="headerlink" href="#simple-usage" title="Permanent link">&para;</a></h3>
<p><span class="lead">AutoConnect control screen will be displayed automatically for establishing new connections. It aids by the <a href="https://en.wikipedia.org/wiki/Captive_portal">captive portal</a> when vested the connection cannot be detected.<br>By using the <a href="menu.html">AutoConnect menu</a>, to manage the connections convenient.</span></p>
<h3 id="store-the-established-connection"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Store the established connection<a class="headerlink" href="#store-the-established-connection" title="Permanent link">&para;</a></h3>
<p><span class="lead">The connection authentication data as credentials are saved automatically in EEPROM of ESP8266/ESP32 and You can select the past SSID from the <a href="menu.html">AutoConnect menu</a>.</span></p>
<p><span class="lead">The connection authentication data as credentials are saved automatically in the flash of ESP8266/ESP32 and You can select the past SSID from the <a href="menu.html">AutoConnect menu</a>.</span></p>
<h3 id="easy-to-embed-in"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Easy to embed in<a class="headerlink" href="#easy-to-embed-in" title="Permanent link">&para;</a></h3>
<p><span class="lead">AutoConnect can be placed easily in your sketch. It's "<strong>begin</strong>" and "<strong>handleClient</strong>" only.</span></p>
<h3 id="lives-with-your-sketches"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Lives with your sketches<a class="headerlink" href="#lives-with-your-sketches" title="Permanent link">&para;</a></h3>
@ -945,6 +1031,9 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
<span style="float:left;width:242px;height:425px;border:1px solid lightgrey;"><img data-gifffer="images/aux_ov.gif" data-gifffer-width="240" data-gifffer-height="423" /></span>
</div>
<h3 id="quick-and-easy-to-equip-the-ota-update-feature-enhanced-wv100"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Quick and easy to equip the <a href="otaupdate.html">OTA update feature</a> <sup><sub>ENHANCED w/v1.0.0</sub></sup><a class="headerlink" href="#quick-and-easy-to-equip-the-ota-update-feature-enhanced-wv100" title="Permanent link">&para;</a></h3>
<p><span class="lead">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.</span></p>
<p><span style="display:block;margin-left:auto;margin-right:auto;width:282px;height:362px;border:1px solid lightgrey;"><img data-gifffer="images/webupdate.gif" data-gifffer-height="360" data-gifffer-width="280" /></span></p>
<h2 id="installation">Installation<a class="headerlink" href="#installation" title="Permanent link">&para;</a></h2>
<h3 id="requirements">Requirements<a class="headerlink" href="#requirements" title="Permanent link">&para;</a></h3>
<h4 id="supported-hardware">Supported hardware<a class="headerlink" href="#supported-hardware" title="Permanent link">&para;</a></h4>
@ -979,6 +1068,10 @@ Install third-party platform using the <em>Boards Manager</em> of Arduino IDE. P
<p><i class="fa fa-download"></i> <strong>ESP32 Arduino core</strong></p>
<p>Also, to apply AutoConnect to ESP32, the <a href="https://github.com/espressif/arduino-esp32">arduino-esp32 core</a> provided by Espressif is needed. Stable 1.0.1 or required and the <a href="https://github.com/espressif/arduino-esp32/releases/latest">latest release</a> is recommended.<br />
Install third-party platform using the <em>Boards Manager</em> of Arduino IDE. You can add multiple URLs into <em>Additional Board Manager URLs</em> field, separating them with commas. Package URL is <a href="https://dl.espressif.com/dl/package_esp32_index.json">https://dl.espressif.com/dl/package_esp32_index.json</a> for ESP32.</p>
<div class="admonition info">
<p class="admonition-title">Arduino core for ESP32 1.0.3 or later</p>
<p>For ESP32, AutoConnect v1.0.0 later is required for arduino-esp32 1.0.3 or later.</p>
</div>
<p><i class="fa fa-download"></i> <strong>Additional library (Required)</strong></p>
<p>The <a href="https://github.com/Hieromon/PageBuilder">PageBuilder</a> library to build HTML for ESP8266WebServer is needed.<br />
To install the PageBuilder library into your Arduino IDE, you can use the <em>Library Manager</em>. Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword '<strong>PageBuilder</strong>' with the topic '<strong>Communication</strong>', then you can see the <em>PageBuilder</em>. The latest version is required <strong>1.3.3</strong> <strong>later</strong>.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup></p>

@ -391,10 +391,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -453,6 +513,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -472,13 +544,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -544,13 +616,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>

@ -395,10 +395,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -457,6 +517,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -476,13 +548,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -550,13 +622,13 @@
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9" checked>
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10" checked>
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>

@ -485,10 +485,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -547,6 +607,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -566,13 +638,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -638,13 +710,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -854,7 +926,7 @@
<p>Currently, AutoConnect supports four menus. Undermost menu as "HOME" returns to the home path of its sketch.</p>
<ul>
<li><strong>Configure new AP</strong>: Configure SSID and Password for new access point.</li>
<li><strong>Open SSIDs</strong>: Opens the past SSID which has been established connection from EEPROM.</li>
<li><strong>Open SSIDs</strong>: Opens the past SSID which has been established connection from the flash.</li>
<li><strong>Disconnect</strong>: Disconnects current connection.</li>
<li><strong>Reset...</strong>: Rest the ESP8266/ESP32 module.</li>
<li><strong>HOME</strong>: Return to user home page.</li>
@ -865,7 +937,7 @@
Enter SSID and Passphrase and tap "<strong>apply</strong>" to starts WiFi connection. </p>
<p><img src="images/newap.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" /></p>
<h2 id="open-ssids"><i class="fa fa-bars"></i> Open SSIDs<a class="headerlink" href="#open-ssids" title="Permanent link">&para;</a></h2>
<p>Once it was established WiFi connection, its SSID and password will be saved in EEPROM of ESP8266/ESP32 automatically. The <strong>Open SSIDs</strong> menu reads the saved SSID credentials from the EEPROM. The stored credential data are listed by the SSID as shown below. Its label is a clickable button. Tap the SSID button, starts WiFi connection it.</p>
<p>Once it was established WiFi connection, its SSID and password will be saved in the flash of ESP8266/ESP32 automatically. The <strong>Open SSIDs</strong> menu reads the saved SSID credentials from the flash. The stored credential data are listed by the SSID as shown below. Its label is a clickable button. Tap the SSID button, starts WiFi connection it.</p>
<p><img src="images/open.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" /></p>
<h2 id="disconnect"><i class="fa fa-bars"></i> Disconnect<a class="headerlink" href="#disconnect" title="Permanent link">&para;</a></h2>
<p>Disconnect ESP8266/ESP32 from the current connection. It can also reset the ESP8266/ESP32 automatically after disconnection by instructing with using <a href="api.html#autoreset">API</a> in the sketch.</p>

@ -395,10 +395,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -457,6 +517,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -478,13 +550,13 @@
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8" checked>
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9" checked>
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -598,13 +670,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -0,0 +1,916 @@
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="ESP8266/ESP32 WLAN configuration at run time with web interface">
<link rel="canonical" href="https://Hieromon.github.io/AutoConnect/otaupdate.html">
<meta name="author" content="Hieromon Ikasamo">
<meta name="lang:clipboard.copy" content="Copy to clipboard">
<meta name="lang:clipboard.copied" content="Copied to clipboard">
<meta name="lang:search.language" content="en">
<meta name="lang:search.pipeline.stopwords" content="True">
<meta name="lang:search.pipeline.trimmer" content="True">
<meta name="lang:search.result.none" content="No matching documents">
<meta name="lang:search.result.one" content="1 matching document">
<meta name="lang:search.result.other" content="# matching documents">
<meta name="lang:search.tokenizer" content="[\s\-]+">
<link rel="shortcut icon" href="assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.0.4, mkdocs-material-4.4.0">
<title>OTA Updates - AutoConnect for ESP8266/ESP32</title>
<link rel="stylesheet" href="assets/stylesheets/application.0284f74d.css">
<link rel="stylesheet" href="assets/stylesheets/application-palette.01803549.css">
<meta name="theme-color" content="#3f51b5">
<script src="assets/javascripts/modernizr.74668098.js"></script>
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono&display=fallback">
<style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style>
<link rel="stylesheet" href="assets/fonts/material-icons.css">
<link rel="stylesheet" href="css/paragraph.css">
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script>
window.ga = window.ga || function() {
(ga.q = ga.q || []).push(arguments)
}
ga.l = +new Date
/* Setup integration and send page view */
ga("create", "UA-116150854-1", "auto")
ga("set", "anonymizeIp", true)
ga("send", "pageview")
/* Register handler to log search on blur */
document.addEventListener("DOMContentLoaded", () => {
if (document.forms.search) {
var query = document.forms.search.query
query.addEventListener("blur", function() {
if (this.value) {
var path = document.location.pathname;
ga("send", "pageview", path + "?q=" + this.value)
}
})
}
})
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
</head>
<body dir="ltr" data-md-color-primary="indigo" data-md-color-accent="indigo">
<svg class="md-svg">
<defs>
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448" id="__github"><path fill="currentColor" d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg>
</defs>
</svg>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
<a href="#ota-updates-with-autoconnect" tabindex="1" class="md-skip">
Skip to content
</a>
<header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid">
<div class="md-flex">
<div class="md-flex__cell md-flex__cell--shrink">
<a href="https://Hieromon.github.io/AutoConnect/" title="AutoConnect for ESP8266/ESP32" class="md-header-nav__button md-logo">
<img src="images/arduino-logo.svg" width="24" height="24">
</a>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
</div>
<div class="md-flex__cell md-flex__cell--stretch">
<div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
<span class="md-header-nav__topic">
AutoConnect for ESP8266/ESP32
</span>
<span class="md-header-nav__topic">
OTA Updates
</span>
</div>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
<label class="md-icon md-search__icon" for="__search"></label>
<button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">
&#xE5CD;
</button>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="result">
<div class="md-search-result__meta">
Type to start searching
</div>
<ol class="md-search-result__list"></ol>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<div class="md-header-nav__source">
<a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-source="github">
<div class="md-source__icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#__github" width="24" height="24"></use>
</svg>
</div>
<div class="md-source__repository">
Hieromon/AutoConnect
</div>
</a>
</div>
</div>
</div>
</nav>
</header>
<div class="md-container">
<main class="md-main">
<div class="md-main__inner md-grid" data-md-component="container">
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" data-md-level="0">
<label class="md-nav__title md-nav__title--site" for="__drawer">
<a href="https://Hieromon.github.io/AutoConnect/" title="AutoConnect for ESP8266/ESP32" class="md-nav__button md-logo">
<img src="images/arduino-logo.svg" width="48" height="48">
</a>
AutoConnect for ESP8266/ESP32
</label>
<div class="md-nav__source">
<a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-source="github">
<div class="md-source__icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#__github" width="24" height="24"></use>
</svg>
</div>
<div class="md-source__repository">
Hieromon/AutoConnect
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="index.html" title="Overview" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item">
<a href="gettingstarted.html" title="Getting started" class="md-nav__link">
Getting started
</a>
</li>
<li class="md-nav__item">
<a href="menu.html" title="AutoConnect menu" class="md-nav__link">
AutoConnect menu
</a>
</li>
<li class="md-nav__item">
<a href="basicusage.html" title="Basic usage" class="md-nav__link">
Basic usage
</a>
</li>
<li class="md-nav__item">
<a href="advancedusage.html" title="Advanced usage" class="md-nav__link">
Advanced usage
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6">
<label class="md-nav__link" for="nav-6">
Custom Web pages
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-6">
Custom Web pages
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="acintro.html" title="Custom Web pages with AutoConnect" class="md-nav__link">
Custom Web pages with AutoConnect
</a>
</li>
<li class="md-nav__item">
<a href="acelements.html" title="AutoConnectElements" class="md-nav__link">
AutoConnectElements
</a>
</li>
<li class="md-nav__item">
<a href="acjson.html" title="Custom Web pages with JSON" class="md-nav__link">
Custom Web pages with JSON
</a>
</li>
<li class="md-nav__item">
<a href="achandling.html" title="Handling the custom Web pages" class="md-nav__link">
Handling the custom Web pages
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7" checked>
<label class="md-nav__link" for="nav-7">
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
OTA Updates
</label>
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link md-nav__link--active">
OTA Updates
</a>
<nav class="md-nav md-nav--secondary">
<label class="md-nav__title" for="__toc">Table of contents</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#ota-updates-with-autoconnect" title="OTA Updates with AutoConnect" class="md-nav__link">
OTA Updates with AutoConnect
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="api.html" title="AutoConnect API" class="md-nav__link">
AutoConnect API
</a>
</li>
<li class="md-nav__item">
<a href="apiaux.html" title="AutoConnectAux API" class="md-nav__link">
AutoConnectAux API
</a>
</li>
<li class="md-nav__item">
<a href="apiconfig.html" title="AutoConnectConfig API" class="md-nav__link">
AutoConnectConfig API
</a>
</li>
<li class="md-nav__item">
<a href="apielements.html" title="AutoConnectElements API" class="md-nav__link">
AutoConnectElements API
</a>
</li>
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="howtoembed.html" title="How to embed" class="md-nav__link">
How to embed
</a>
</li>
<li class="md-nav__item">
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Attach the menu" class="md-nav__link">
Attach the menu
</a>
</li>
<li class="md-nav__item">
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="lsbegin.html" title="Inside AutoConnect::begin" class="md-nav__link">
Inside AutoConnect::begin
</a>
</li>
<li class="md-nav__item">
<a href="credit.html" title="Saved credentials access" class="md-nav__link">
Saved credentials access
</a>
</li>
<li class="md-nav__item">
<a href="acupload.html" title="File upload handler" class="md-nav__link">
File upload handler
</a>
</li>
<li class="md-nav__item">
<a href="colorized.html" title="Custom colorized" class="md-nav__link">
Custom colorized
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="faq.html" title="FAQ" class="md-nav__link">
FAQ
</a>
</li>
<li class="md-nav__item">
<a href="changelog.html" title="Change log" class="md-nav__link">
Change log
</a>
</li>
<li class="md-nav__item">
<a href="license.html" title="License" class="md-nav__link">
License
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary">
<label class="md-nav__title" for="__toc">Table of contents</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#ota-updates-with-autoconnect" title="OTA Updates with AutoConnect" class="md-nav__link">
OTA Updates with AutoConnect
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content">
<article class="md-content__inner md-typeset">
<h1>OTA Updates</h1>
<h2 id="ota-updates-with-autoconnect">OTA Updates with AutoConnect<a class="headerlink" href="#ota-updates-with-autoconnect" title="Permanent link">&para;</a></h2>
<p>AutoConnect provides <strong>two type platforms</strong> for updating the binary sketch in the ESP8266 or ESP32 module via OTA. They correspond to the <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#web-browser">Web Browser Update</a> and <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#http-server">HTTP Server Update</a> whiches mentioned in the <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#ota-updates">ESP8266 Arduino Core documentation</a>.</p>
<p><a href="otabrowser.html"><strong>The update behavior using a web browser</strong></a> as the client that supplies the binary sketch file for update follows the scenario assumed by the ESP8266 Arduino core. Therefore, the user sketch must meet the requirements described in the ESP8266 Arduino Core documentation, but you can easily embed the update feature that able to handle with the web browser by AutoConnect. All you need to do is that <a href="api.html#join">join</a> the <a href="apiaux.html">AutoConnectAux</a> with embedded <strong>ESP8266HTTPUpdateServer</strong><sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup> of the core library to AutoConnect.</p>
<p><img src="images/webupdatemodel.png" width="420" /></p>
<div class="admonition caution">
<p class="admonition-title">It is for the only the same network</p>
<p>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.</p>
</div>
<p><a href="otaserver.html"><strong>Another update method using an update server</strong></a> 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 <a href="otaserver.html#update-server-for-the-autoconnectupdate-class">update server</a> along with using the <a href="apiupdate.html">AutoConnectUpdate</a> class in your sketch.</p>
<p><img src="images/updatemodel.png" width="540" /></p>
<div class="admonition info">
<p class="admonition-title">Security Disclaimer</p>
<p>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.</p>
</div>
<div class="footnote">
<hr />
<ol>
<li id="fn:1">
<p>The AutoConnect library provides an implementation of the <strong>HTTPUpdateServer</strong> class that ported from ESP8266HTTPUpdateServer class for ESP32 intention. It is contained the <strong>WebUpdate</strong> under the examples folder.&#160;<a class="footnote-backref" href="#fnref:1" rev="footnote" title="Jump back to footnote 1 in the text">&#8617;</a></p>
</li>
</ol>
</div>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid">
<a href="achandling.html" title="Handling the custom Web pages" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
</div>
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Previous
</span>
Handling the custom Web pages
</span>
</div>
</a>
<a href="otabrowser.html" title="Using Web Browser" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
Using Web Browser
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
</div>
</a>
</nav>
</div>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-footer-copyright">
<div class="md-footer-copyright__highlight">
Copyright &copy; 2018-2019 Hieromon Ikasamo
</div>
powered by
<a href="https://www.mkdocs.org">MkDocs</a>
and
<a href="https://squidfunk.github.io/mkdocs-material/">
Material for MkDocs</a>
</div>
<div class="md-footer-social">
<link rel="stylesheet" href="assets/fonts/font-awesome.css">
<a href="https://github.com/Hieromon" class="md-footer-social__link fa fa-github"></a>
<a href="https://twitter.com/hieromon" class="md-footer-social__link fa fa-twitter"></a>
</div>
</div>
</div>
</footer>
</div>
<script src="assets/javascripts/application.245445c6.js"></script>
<script>app.initialize({version:"1.0.4",url:{base:"."}})</script>
<script src="js/gifffer.min.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

@ -2,127 +2,147 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://Hieromon.github.io/AutoConnect/index.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/gettingstarted.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/menu.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/basicusage.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/advancedusage.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/acintro.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/acelements.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/acjson.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/achandling.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/otaupdate.html</loc>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/otabrowser.html</loc>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/otaserver.html</loc>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/api.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/apiaux.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/apiconfig.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/apielements.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/apiupdate.html</loc>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/apiextra.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/howtoembed.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/datatips.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/menuize.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/wojson.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/lsbegin.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/credit.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/acupload.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/colorized.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/faq.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/changelog.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/license.html</loc>
<lastmod>2019-08-18</lastmod>
<lastmod>2019-09-08</lastmod>
<changefreq>daily</changefreq>
</url>
</urlset>

Binary file not shown.

@ -395,10 +395,70 @@
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
Library APIs
OTA Updates
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
OTA Updates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
OTA Updates
</a>
</li>
<li class="md-nav__item">
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
Using Web Browser
</a>
</li>
<li class="md-nav__item">
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
Using Update Server
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -457,6 +517,18 @@
<li class="md-nav__item">
<a href="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
AutoConnectUpdate API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
@ -478,13 +550,13 @@
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8" checked>
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9" checked>
<label class="md-nav__link" for="nav-8">
<label class="md-nav__link" for="nav-9">
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
<label class="md-nav__title" for="nav-9">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -598,13 +670,13 @@
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
<label class="md-nav__link" for="nav-9">
<label class="md-nav__link" for="nav-10">
Appendix
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-9">
<label class="md-nav__title" for="nav-10">
Appendix
</label>
<ul class="md-nav__list" data-md-scrollfix>

@ -0,0 +1,328 @@
/*
ConfigIP.ino, Example for the AutoConnect library.
Copyright (c) 2019, Hieromon Ikasamo
https://github.com/Hieromon/AutoConnect
This software is released under the MIT License.
https://opensource.org/licenses/MIT
This sketch implements an example of enabling a custom web page
according to the state of an externally equipped switch. The custom
web page configures and provides a static IP to the ESP module.
This example needs to equip an external switch circuit that pulls up
with a resistor (1K to 10K ohms) and then drops it to GND via a push
switch to connect to any GPIO of the ESP module.
An external switch circuit:
3.3V
--+--
|
+-+
| | 1K ~ 10K
+-+
|
+--> D2 (for ESP8266, ex: GPIO16 in case of ESP32)
|
| O
--+
| O
|
--+--
GND
*/
#if defined(ARDUINO_ARCH_ESP8266)
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#define EXTERNAL_SWITCH_PIN D2
#elif defined(ARDUINO_ARCH_ESP32)
#include <WiFi.h>
#include <WebServer.h>
#define EXTERNAL_SWITCH_PIN 16
#endif
#include <AutoConnect.h>
#include <EEPROM.h>
static const char AUX_CONFIGIP[] PROGMEM = R"(
{
"title": "Config IP",
"uri": "/configip",
"menu": true,
"element": [
{
"name": "caption",
"type": "ACText",
"value": "<b>Module IP configuration</b>",
"style": "color:steelblue"
},
{
"name": "mac",
"type": "ACText",
"format": "MAC: %s"
},
{
"name": "staip",
"type": "ACInput",
"label": "IP",
"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])$",
"global": true
},
{
"name": "gateway",
"type": "ACInput",
"label": "Gateway",
"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])$",
"global": true
},
{
"name": "netmask",
"type": "ACInput",
"label": "Netmask",
"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])$",
"global": true
},
{
"name": "dns1",
"type": "ACInput",
"label": "DNS",
"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])$",
"global": true
},
{
"name": "ok",
"type": "ACSubmit",
"value": "OK",
"uri": "/restart"
},
{
"name": "cancel",
"type": "ACSubmit",
"value": "Cancel",
"uri": "/_ac"
}
]
}
)";
static const char AUX_RESTART[] PROGMEM = R"(
{
"title": "Config IP",
"uri": "/restart",
"menu": false,
"element": [
{
"name": "caption",
"type": "ACText",
"value": "Settings",
"style": "font-family:Arial;font-weight:bold;text-align:center;margin-bottom:10px;color:steelblue"
},
{
"name": "staip",
"type": "ACText",
"format": "IP: %s",
"global": true
},
{
"name": "gateway",
"type": "ACText",
"format": "Gateway: %s",
"global": true
},
{
"name": "netmask",
"type": "ACText",
"format": "Netmask: %s",
"global": true
},
{
"name": "dns1",
"type": "ACText",
"format": "DNS1: %s",
"global": true
},
{
"name": "result",
"type": "ACText",
"posterior": "par"
}
]
}
)";
AutoConnect portal;
AutoConnectConfig config;
AutoConnectAux auxIPConfig;
AutoConnectAux auxRestart;
// Pin assignment for an external configuration switch
uint8_t ConfigPin = EXTERNAL_SWITCH_PIN;
uint8_t ActiveLevel = LOW;
// EEPROM saving structure
typedef union {
struct {
uint32_t ip;
uint32_t gateway;
uint32_t netmask;
uint32_t dns1;
} ipconfig;
uint8_t ipraw[sizeof(uint32_t) * 4];
} IPCONFIG;
// Load IP configuration from EEPROM
void loadConfig(IPCONFIG* ipconfig) {
EEPROM.begin(sizeof(IPCONFIG));
int dp = 0;
for (uint8_t i = 0; i < 4; i++) {
for (uint8_t c = 0; c < sizeof(uint32_t); c++)
ipconfig->ipraw[c + i * sizeof(uint32_t)] = EEPROM.read(dp++);
}
EEPROM.end();
// Unset value screening
if (ipconfig->ipconfig.ip == 0xffffffffL)
ipconfig->ipconfig.ip = 0U;
if (ipconfig->ipconfig.gateway == 0xffffffffL)
ipconfig->ipconfig.gateway = 0U;
if (ipconfig->ipconfig.netmask == 0xffffffffL)
ipconfig->ipconfig.netmask = 0U;
if (ipconfig->ipconfig.dns1 == 0xffffffffL)
ipconfig->ipconfig.dns1 = 0U;
Serial.println("IP configuration loaded");
Serial.printf("Sta IP :0x%08lx\n", ipconfig->ipconfig.ip);
Serial.printf("Gateway:0x%08lx\n", ipconfig->ipconfig.gateway);
Serial.printf("Netmask:0x%08lx\n", ipconfig->ipconfig.netmask);
Serial.printf("DNS1 :0x%08lx\n", ipconfig->ipconfig.dns1);
}
// Save current IP configuration to EEPROM
void saveConfig(const IPCONFIG* ipconfig) {
// EEPROM.begin will truncate the area to the size given by the argument.
// The part overflowing from the specified size is filled with 0xff,
// so if the argument value is too small, the credentials may be lost.
EEPROM.begin(128);
int dp = 0;
for (uint8_t i = 0; i < 4; i++) {
for (uint8_t d = 0; d < sizeof(uint32_t); d++)
EEPROM.write(dp++, ipconfig->ipraw[d + i * sizeof(uint32_t)]);
}
EEPROM.end();
delay(100);
}
// Custom web page handler to set current configuration to the page
String getConfig(AutoConnectAux& aux, PageArgument& args) {
IPCONFIG ipconfig;
loadConfig(&ipconfig);
// Fetch MAC address
String macAddress;
uint8_t mac[6];
WiFi.macAddress(mac);
for (uint8_t i = 0; i < 6; i++) {
char buf[3];
sprintf(buf, "%02X", mac[i]);
macAddress += buf;
if (i < 5)
macAddress += ':';
}
aux["mac"].value = macAddress;
// Fetch each IP address configuration from EEPROM
IPAddress staip = IPAddress(ipconfig.ipconfig.ip);
IPAddress gateway = IPAddress(ipconfig.ipconfig.gateway);
IPAddress netmask = IPAddress(ipconfig.ipconfig.netmask);
IPAddress dns1 = IPAddress(ipconfig.ipconfig.dns1);
// Echo back the IP settings
aux["staip"].value = staip.toString();
aux["gateway"].value = gateway.toString();
aux["netmask"].value = netmask.toString();
aux["dns1"].value = dns1.toString();
return String();
}
// Convert IP address from AutoConnectInput string value
void getIPAddress(String ipString, uint32_t* ip) {
IPAddress ipAddress;
if (ipString.length())
ipAddress.fromString(ipString);
*ip = (uint32_t)ipAddress;
}
// Custom web page handler to save the configuration to AutoConnectConfig
String setConfig(AutoConnectAux& aux, PageArgument& args) {
IPCONFIG ipconfig;
// Retrieve each IP address from AutoConnectInput field
getIPAddress(aux["staip"].value, &ipconfig.ipconfig.ip);
getIPAddress(aux["gateway"].value, &ipconfig.ipconfig.gateway);
getIPAddress(aux["netmask"].value, &ipconfig.ipconfig.netmask);
getIPAddress(aux["dns1"].value, &ipconfig.ipconfig.dns1);
// Make a result message
if (auxIPConfig.isValid()) {
saveConfig(&ipconfig);
aux["result"].value = "Reset by AutoConnect menu will restart with the above.";
}
else
aux["result"].value = "Invalid IP address specified.";
return String();
}
// Sense the external switch to enter the configuraton mode
bool senseSW(const uint8_t pin, const uint8_t activeLevel) {
bool sw = digitalRead(pin) == activeLevel;
if (sw) {
// Cut-off the chattering noise
unsigned long tm = millis();
while (digitalRead(pin) == activeLevel) {
if (millis() - tm > 1000)
break;
delay(1);
}
}
return sw;
}
void setup() {
delay(1000);
Serial.begin(115200);
Serial.println();
// Shift the credentials storage to reserve saving IPCONFIG
config.boundaryOffset = sizeof(IPCONFIG);
// Load current IP configuration
IPCONFIG ipconfig;
loadConfig(&ipconfig);
// Configure pre-loaded static IPs
config.staip = IPAddress(ipconfig.ipconfig.ip);
config.staGateway = IPAddress(ipconfig.ipconfig.gateway);
config.staNetmask = IPAddress(ipconfig.ipconfig.netmask);
config.dns1 = IPAddress(ipconfig.ipconfig.dns1);
portal.config(config);
// Sense the configuration button (external switch)
pinMode(ConfigPin, INPUT);
if (senseSW(ConfigPin, ActiveLevel)) {
Serial.println("IP configuration enable");
auxIPConfig.load(AUX_CONFIGIP);
auxIPConfig.on(getConfig);
auxRestart.load(AUX_RESTART);
auxRestart.on(setConfig);
portal.join({ auxIPConfig, auxRestart });
}
portal.begin();
}
void loop() {
// User sketch process is here.
portal.handleClient();
}

@ -123,13 +123,15 @@ String delCredential(PageArgument& args) {
AutoConnectCredential ac(CREDENTIAL_OFFSET);
if (args.hasArg("num")) {
int8_t e = args.arg("num").toInt();
Serial.printf("Request deletion #%d\n", e);
if (e > 0) {
struct station_config entry;
// If the input number is valid, delete that entry.
int8_t de = ac.load(e - 1, &entry); // A base of entry num is 0.
if (de > 0) {
ac.del((char *)entry.ssid);
Serial.printf("Delete for %s ", (char *)entry.ssid);
Serial.printf("%s\n", ac.del((char *)entry.ssid) ? "completed" : "failed");
// Returns the redirect response. The page is reloaded and its contents
// are updated to the state after deletion. It returns 302 response

@ -180,7 +180,11 @@ void setup() {
// formatted text using the format attribute.
aux["caption"].value = PARAM_FILE;
#if defined(ARDUINO_ARCH_ESP8266)
SPIFFS.begin();
#elif defined(ARDUINO_ARCH_ESP32)
SPIFFS.begin(true);
#endif
File param = SPIFFS.open(PARAM_FILE, "w");
if (param) {
// Save as a loadable set for parameters.

@ -99,6 +99,9 @@ void rootPage() {
"<html>"
"<head>"
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
"<script type=\"text/javascript\">"
"setTimeout(\"location.reload()\", 1000);"
"</script>"
"</head>"
"<body>"
"<h2 align=\"center\" style=\"color:blue;margin:20px;\">Hello, world</h2>"

@ -0,0 +1,184 @@
/*
Update.ino, Example for the AutoConnect library.
Copyright (c) 2019, Hieromon Ikasamo
https://github.com/Hieromon/AutoConnect
This software is released under the MIT License.
https://opensource.org/licenses/MIT
This example presents the simplest OTA Updates scheme.
*/
#if defined(ARDUINO_ARCH_ESP8266)
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
using WebServerClass = ESP8266WebServer;
#elif defined(ARDUINO_ARCH_ESP32)
#include <WiFi.h>
#include <WebServer.h>
using WebServerClass = WebServer;
#endif
#include <AutoConnect.h>
// Update server setting page
static const char SETUP_PAGE[] PROGMEM = R"(
{
"title": "Update setup",
"uri": "/setup",
"menu": true,
"element": [
{
"name": "caption",
"type": "ACText",
"value": "OTA update setup",
"style": ""
},
{
"name": "isvalid",
"type": "ACText",
"style": "color:red"
},
{
"name": "server",
"type": "ACInput",
"label": "Update server",
"pattern": "^((([a-zA-Z]|[a-zA-Z][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z]|[A-Za-z][A-Za-z0-9-]*[A-Za-z0-9]))|((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})$",
"placeholder": "Your update server address"
},
{
"name": "port",
"type": "ACInput",
"label": "port",
"pattern": "[0-9]{1,4}"
},
{
"name": "path",
"type": "ACInput",
"label": "path"
},
{
"name": "apply",
"type": "ACSubmit",
"value": "Apply",
"uri": "/apply"
},
{
"name": "cancel",
"type": "ACSubmit",
"value": "Discard",
"uri": "/"
}
]
}
)";
// The /apply handler validates the update server settings entered on
// the setup page. APPLY_PAGE exists to enable the /apply handler,
// and its role is a page redirector. If the /apply handler detects some
// errors, the page will redirect to the /setup page with error message.
static const char APPLY_PAGE[] PROGMEM = R"(
{
"title": "Update setup",
"uri": "/apply",
"menu": false,
"element": [
{
"name": "redirect",
"type": "ACElement",
"value": "<script type=\"text/javascript\">location.href='__REDIRECT__';</script>"
}
]
}
)";
WebServerClass server;
AutoConnect portal(server);
AutoConnectAux setupPage;
AutoConnectAux applyPage;
AutoConnectUpdate update;
#define UPDATESERVER_URL "" // Define to suit your environment
#define UPDATESERVER_PORT 8000
#define UPDATESERVER_PATH "bin"
void loadAux() {
setupPage.load(SETUP_PAGE);
setupPage["server"].value = UPDATESERVER_URL;
setupPage["port"].value = String(UPDATESERVER_PORT);
setupPage["path"].value = UPDATESERVER_PATH;
applyPage.load(APPLY_PAGE);
}
// The onSetup handler clears the error message field of the /setup page.
// Its field will be cleared after the /setup page generating by the
// effect of the AC_EXIT_LATER option.
String onSetup(AutoConnectAux& aux, PageArgument& arg) {
setupPage["isvalid"].value = String();
return String();
}
// The onApply handler validates the update server configuration.
// It does not do any semantic analysis but only verifies that the
// settings match the pattern defined in each field.
// The AutoConnectInput isValid function checks if the current value
// matches the pattern.
String onApply(AutoConnectAux& aux, PageArgument& arg) {
String returnUri;
AutoConnectInput& host = setupPage["server"].as<AutoConnectInput>();
AutoConnectInput& port = setupPage["port"].as<AutoConnectInput>();
AutoConnectInput& path = setupPage["path"].as<AutoConnectInput>();
Serial.printf("host: %s\n", host.value.c_str());
Serial.printf("port: %s\n", port.value.c_str());
Serial.printf("uri: %s\n", path.value.c_str());
if (host.isValid() & port.isValid()) {
update.host = host.value;
update.port = port.value.toInt();
update.uri = path.value;
setupPage["isvalid"].value = String();
returnUri = "/";
}
else {
setupPage["isvalid"].value = String("Incorrect value specified.");
returnUri = "/setup";
}
applyPage["redirect"].value.replace("__REDIRECT__", returnUri);
return String();
}
void setup() {
delay(1000);
Serial.begin(115200);
Serial.println();
// Responder of root page and apply page handled directly from WebServer class.
server.on("/", []() {
String content = R"(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
Place the root page with the sketch application.&ensp;
__AC_LINK__
</body>
</html>
)";
content.replace("__AC_LINK__", String(AUTOCONNECT_LINK(COG_16)));
server.send(200, "text/html", content);
});
// AUX page loading
loadAux();
setupPage.on(onSetup, AC_EXIT_LATER);
applyPage.on(onApply);
portal.join({ setupPage, applyPage });
portal.begin();
update.attach(portal);
}
void loop() {
portal.handleClient();
}

@ -0,0 +1,130 @@
/**
* Ported the ESP8266HTTPUpdateServer published by Arduino-core to
* provide the web browser based OTA update on the ESP32 platform.
* @file HTTPUpdateServer.cpp
* @author hieromon@gmail.com
* @version 0.9.10
* @date 2019-06-06
* @copyright MIT license.
*/
#ifdef ARDUINO_ARCH_ESP32
// This class will available only EPS32 actually.
#include <Arduino.h>
#include <WiFiClient.h>
#include <WiFiServer.h>
#include <WebServer.h>
#include <WiFiUdp.h>
#include <Update.h>
#include "StreamString.h"
#include "HTTPUpdateServer.h"
static const char serverIndex[] PROGMEM = R"(
<html><body>
<form method='POST' action='' enctype='multipart/form-data'>
<input type='file' name='update'>
<input type='submit' value='Update'>
</form>
</body></html>
)";
static const char successResponse[] PROGMEM =
"<meta http-equiv=\"refresh\" content=\"15;URL=/\">Update Success! Rebooting...\n";
/**
* Setup for the web update. Register the authentication procedure and
* binary file upload handler required to update the actual sketch binary by OTA.
* @param server A pointer to the WebServer instance
* @param path URI of the update handler
* @param username Username for authentication
* @arama password Password for authentication
*/
void HTTPUpdateServer::setup(WebServer* server, const String& path, const String& username, const String& password) {
_server = server;
_username = username;
_password = password;
// handler for the /update form page
_server->on(path.c_str(), HTTP_GET, [&] () {
if (_username != emptyString && _password != emptyString && !_server->authenticate(_username.c_str(), _password.c_str()))
return _server->requestAuthentication();
_server->send_P(200, PSTR("text/html"), serverIndex);
});
// handler for the /update form POST (once file upload finishes)
_server->on(path.c_str(), HTTP_POST, [&] () {
if(!_authenticated)
return _server->requestAuthentication();
if (Update.hasError()) {
_server->send(200, F("text/html"), String(F("Update error: ")) + _updaterError);
}
else {
_server->client().setNoDelay(true);
_server->send_P(200, PSTR("text/html"), successResponse);
delay(100);
_server->client().stop();
ESP.restart();
}
}, [&] () {
// handler for the file upload, get's the sketch bytes, and writes
// them through the Update object
HTTPUpload& upload = _server->upload();
if (upload.status == UPLOAD_FILE_START) {
_updaterError = String();
if (_serial_output)
Serial.setDebugOutput(true);
_authenticated = (_username == emptyString || _password == emptyString || _server->authenticate(_username.c_str(), _password.c_str()));
if (!_authenticated) {
if (_serial_output)
Serial.println("Unauthenticated Update");
return;
}
if (_serial_output)
Serial.printf("Update: %s\n", upload.filename.c_str());
uint32_t maxSketchSpace = (ESP.getFreeSketchSpace() - 0x1000) & 0xFFFFF000;
if (!Update.begin(maxSketchSpace)) { //start with max available size
_setUpdaterError();
}
}
else if (_authenticated && upload.status == UPLOAD_FILE_WRITE && !_updaterError.length()) {
if (_serial_output)
Serial.print('.');
if (Update.write(upload.buf, upload.currentSize) != upload.currentSize)
_setUpdaterError();
}
else if (_authenticated && upload.status == UPLOAD_FILE_END && !_updaterError.length()) {
if (Update.end(true)) { //true to set the size to the current progress
if (_serial_output)
Serial.printf("Update Success: %u\nRebooting...\n", upload.totalSize);
}
else {
_setUpdaterError();
}
if (_serial_output)
Serial.setDebugOutput(false);
}
else if (_authenticated && upload.status == UPLOAD_FILE_ABORTED) {
Update.end();
if (_serial_output)
Serial.println("Update was aborted");
}
delay(0);
});
}
/**
* Convert the update error code to string for notation.
*/
void HTTPUpdateServer::_setUpdaterError() {
if (_serial_output)
Update.printError(Serial);
StreamString str;
Update.printError(str);
_updaterError = str.c_str();
}
#endif // !ARDUINO_ARCH_ESP32

@ -0,0 +1,42 @@
/**
* Ported the ESP8266HTTPUpdateServer published by Arduino-core to
* provide the web browser based OTA update on the ESP32 platform.
* @file HTTPUpdateServer.h
* @author hieromon@gmail.com
* @version 0.9.10
* @date 2019-06-06
* @copyright MIT license.
*/
#ifndef __HTTP_UPDATE_SERVER_H
#define __HTTP_UPDATE_SERVER_H
#ifdef ARDUINO_ARCH_ESP32
// This class will available only EPS32 actually.
class WebServer;
class HTTPUpdateServer {
public:
explicit HTTPUpdateServer(bool serial_debug = false) : _serial_output(serial_debug), _server(nullptr), _username(emptyString), _password(emptyString), _authenticated(false) {}
~HTTPUpdateServer() {}
void setup(WebServer* server) { setup(server, emptyString, emptyString); }
void setup(WebServer* server, const String& path) { setup(server, path, emptyString, emptyString); }
void setup(WebServer* server, const String& username, const String& password) { setup(server, "/update", username, password); }
void setup(WebServer* server, const String& path, const String& username, const String& password);
void updateCredentials(const String& username, const String& password) { _username = username; _password = password; }
protected:
void _setUpdaterError();
private:
bool _serial_output;
WebServer* _server;
String _username;
String _password;
bool _authenticated;
String _updaterError;
};
#endif // !ARDUINO_ARCH_ESP32
#endif // !__HTTP_UPDATE_SERVER_H

@ -12,19 +12,13 @@
file on the update UI page to update the firmware.
Notes:
1. This example is valid only for ESP8266. In order to apply this
example to ESP32, it is necessary to quote WebUpdate.ino included
in the ESP32 arduino core distribution and implement a class
equivalent to ESP8266HTTPUpdateServer. But it is not included in this
example.
2. To experience this example, your client OS needs to be running a
1. To experience this example, your client OS needs to be running a
service that can respond to multicast DNS.
For Mac OSX support is built in through Bonjour already.
For Linux, install Avahi.
For Windows10, available since Windows10 1803(April 2018 Update/RS4).
3. If you receive an error as follows:
2. If you receive an error as follows:
Update error: ERROR[11]: Invalid bootstrapping state, reset ESP8266 before updating.
You need reset the module before sketch running.
Refer to https://hieromon.github.io/AutoConnect/faq.html#hang-up-after-reset for details.
@ -32,13 +26,27 @@
This software is released under the MIT License.
https://opensource.org/licenses/MIT
*/
#ifdef ARDUINO_ARCH_ESP8266
#if defined(ARDUINO_ARCH_ESP8266)
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <ESP8266HTTPUpdateServer.h>
#define HOSTIDENTIFY "esp8266"
#define mDNSUpdate(c) do { c.update(); } while(0)
using WebServerClass = ESP8266WebServer;
using HTTPUpdateServerClass = ESP8266HTTPUpdateServer;
#elif defined(ARDUINO_ARCH_ESP32)
#include <WiFi.h>
#include <WebServer.h>
#include <ESPmDNS.h>
#include "HTTPUpdateServer.h"
#define HOSTIDENTIFY "esp32"
#define mDNSUpdate(c) do {} while(0)
using WebServerClass = WebServer;
using HTTPUpdateServerClass = HTTPUpdateServer;
#endif
#include <WiFiClient.h>
#include <AutoConnect.h>
// This page for an example only, you can prepare the other for your application.
@ -64,17 +72,19 @@ static const char AUX_AppPage[] PROGMEM = R"(
)";
// Fix hostname for mDNS. It is a requirement for the lightweight update feature.
static const char* host = "esp8266-webupdate";
static const char* host = HOSTIDENTIFY "-webupdate";
#define HTTP_PORT 80
// ESP8266WebServer instance will be shared both AutoConnect and UpdateServer.
ESP8266WebServer httpServer(HTTP_PORT);
WebServerClass httpServer(HTTP_PORT);
#define USERNAME "user" //*< Replace the actual username you want */
#define PASSWORD "pass" //*< Replace the actual password you want */
// Declare AutoConnectAux to bind the HTTPWebUpdateServer via /update url
// and call it from the menu.
// The custom web page is an empty page that does not contain AutoConnectElements.
// Its content will be emitted by ESP8266HTTPUpdateServer.
ESP8266HTTPUpdateServer httpUpdater;
HTTPUpdateServerClass httpUpdater;
AutoConnectAux update("/update", "Update");
// Declare AutoConnect and the custom web pages for an application sketch.
@ -88,7 +98,7 @@ void setup() {
// Prepare the ESP8266HTTPUpdateServer
// The /update handler will be registered during this function.
httpUpdater.setup(&httpServer);
httpUpdater.setup(&httpServer, USERNAME, PASSWORD);
// Load a custom web page for a sketch and a dummy page for the updater.
hello.load(AUX_AppPage);
@ -105,14 +115,10 @@ void setup() {
}
void loop() {
// Sketch the application here.
// Sketches the application here.
// Invokes mDNS::update and AutoConnect::handleClient() for the menu processing.
MDNS.update();
mDNSUpdate(MDNS);
portal.handleClient();
delay(1);
}
#else
void setup() {}
void loop() {}
#endif

@ -12,25 +12,34 @@ AutoConnectFile KEYWORD1
AutoConnectInput KEYWORD1
AutoConnectRadio KEYWORD1
AutoConnectSelect KEYWORD1
AutoConnectStyle KEYWORD1
AutoConnectSubmit KEYWORD1
AutoConnectText KEYWORD1
AutoConnectUpdate KEYWORD1
#######################################
# Methods and Functions (KEYWORD2)
#######################################
add KEYWORD2
as KEYWORD2
attach KEYWORD2
aux KEYWORD2
config KEYWORD2
begin KEYWORD2
disable KEYWORD2
del KEYWORD2
end KEYWORD2
enable KEYWORD2
entries KEYWORD2
fetchElement KEYWORD2
getElement KEYWORD2
getElements KEYWORD2
handleClient KEYWORD2
handleRequest KEYWORD2
home KEYWORD2
host KEYWORD2
isEnabled KEYWORD2
isMenu KEYWORD2
isValid KEYWORD2
join KEYWORD2
load KEYWORD2
@ -44,6 +53,7 @@ onUpload KEYWORD2
release KEYWORD2
save KEYWORD2
saveElement KEYWORD2
select KEYWORD2
setElementValue KEYWORD2
setTitle KEYWORD2
toHTML KEYWORD2
@ -54,24 +64,33 @@ where KEYWORD2
#######################################
# Literals (KEYWORD3)
#######################################
AC_WEBSERVER_PARASITIC LITERAL1
AC_WEBSERVER_HOSTED LITERAL1
AC_SAVECREDENTIAL_NEVER LITERAL1
AC_SAVECREDENTIAL_AUTO LITERAL1
AC_URIONBOOT_ROOT LITERAL1
AC_URIONBOOT_HOME LITERAL1
AC_Behind LITERAL1
AC_EXIT_AHEAD LITERAL1
AC_EXIT_LATER LITERAL1
AC_EXIT_BOTH LITERAL1
AC_ONBOOTURI_ROOT LITERAL1
AC_ONBOOTURI_HOME LITERAL1
AC_SAVECREDENTIAL_NEVER LITERAL1
AC_SAVECREDENTIAL_AUTO LITERAL1
AC_Button LITERAL1
AC_Checkbox LITERAL1
AC_Element LITERAL1
AC_File LITERAL1
AC_File_FS LITERAL1
AC_File_SD LITERAL1
AC_File_Extern LITERAL1
AC_Horizontal LITERAL1
AC_Infront LITERAL1
AC_Input LITERAL1
AC_Radio LITERAL1
AC_Select LITERAL1
AC_Submit LITERAL1
AC_Style LITERAL1
AC_Tag_None LITERAL1
AC_Tag_BR LITERAL1
AC_Tag_P LITERAL1
AC_Text LITERAL1
AC_Vertical LITERAL1
#######################################
# PREPROCESSOR (KEYWORD3)
@ -84,4 +103,11 @@ ACInput PREPROCESSOR
ACRadio PREPROCESSOR
ACSelect PREPROCESSOR
ACSubmit PREPROCESSOR
ACStyle PREPROCESSOR
ACText PREPROCESSOR
AUTOCONNECT_GLYPH_COG_16 PREPROCESSOR
AUTOCONNECT_GLYPH_COG_24 PREPROCESSOR
AUTOCONNECT_GLYPH_COG_32 PREPROCESSOR
AUTOCONNECT_GLYPH_BAR_24 PREPROCESSOR
AUTOCONNECT_GLYPH_BAR_32 PREPROCESSOR
AUTOCONNECT_GLYPH_BAR_48 PREPROCESSOR

@ -25,6 +25,6 @@
"espressif8266",
"espressif32"
],
"version": "0.9.12",
"version": "1.0.0",
"license": "MIT"
}

@ -1,5 +1,5 @@
name=AutoConnect
version=0.9.12
version=1.0.0
author=Hieromon Ikasamo <hieromon@gmail.com>
maintainer=Hieromon Ikasamo <hieromon@gmail.com>
sentence=ESP8266/ESP32 WLAN configuration at runtime with web interface.

@ -19,11 +19,16 @@ nav:
- 'AutoConnectElements' : acelements.md
- 'Custom Web pages with JSON' : acjson.md
- 'Handling the custom Web pages' : achandling.md
- 'OTA Updates' :
- 'OTA Updates' : otaupdate.md
- 'Using Web Browser' : otabrowser.md
- 'Using Update Server' : otaserver.md
- 'Library APIs' :
- 'AutoConnect API': api.md
- 'AutoConnectAux API': apiaux.md
- 'AutoConnectConfig API': apiconfig.md
- 'AutoConnectElements API': apielements.md
- 'AutoConnectUpdate API' : apiupdate.md
- 'Something extra': apiextra.md
- 'Examples' :
- 'How to embed': howtoembed.md

@ -13,10 +13,10 @@ The AutoConnectAux class has several functions to manipulate AutoConnectElements
To add AutoConnectElment(s) to an AutoConnectAux object, use the add function.
```cpp
void AutoConnectAux::add(AutoConenctElement& addon)
void AutoConnectAux::add(AutoConnectElement& addon)
```
```cpp
void AutoConnectAux::add(AutoConenctElementVT addons)
void AutoConnectAux::add(AutoConnectElementVT addons)
```
The add function adds the specified AutoConnectElement to AutoConnectAux. The AutoConnectElementVT type is the [*std::vector*](https://en.cppreference.com/w/cpp/container/vector) of the [*reference wrapper*](https://en.cppreference.com/w/cpp/utility/functional/reference_wrapper) to AutoConnectElements, and you can add these elements in bulk by using the [*list initialization*](https://en.cppreference.com/w/cpp/language/list_initialization) with the sketch.
@ -70,7 +70,7 @@ AutoConnectElement* AutoConnectAux::getElement(const String& name)
```
```cpp
T& AutoConenctAux::getElement<T>(const String& name)
T& AutoConnectAux::getElement<T>(const String& name)
```
```cpp
@ -108,10 +108,10 @@ The AutoConnectElement type behaves as a variant of other element types. Therefo
```cpp
const String auxJson = String("{\"title\":\"Page 1 title\",\"uri\":\"/page1\",\"menu\":true,\"element\":[{\"name\":\"caption\",\"type\":\"ACText\",\"value\":\"hello, world\"}]}");
AutoConenct portal;
AutoConnect portal;
portal.load(auxJson);
AutoConnectAux* aux = portal.aux("/page1"); // Identify the AutoConnectAux instance with uri
AutoConenctText& text = aux->getElement<AutoConnectText>("caption"); // Cast to real type and access members
AutoConnectText& text = aux->getElement<AutoConnectText>("caption"); // Cast to real type and access members
Serial.println(text.value);
```
@ -180,7 +180,7 @@ static const char AUX[] PROGMEM = R"(
AutoConnect portal;
AutoConnectAux page;
String onPage(AutoConnectAux& aux, PageArgument& args) {
String onPage(AutoConectAux& aux, PageArgument& args) {
AutoConnectSubmit& send = aux["send"].as<AutoConnectSubmit>();
if (WiFi.isConnected())
send.enable = (WiFi.getMode() == WIFI_STA);
@ -397,7 +397,7 @@ An above example is the most simple sketch of handling values entered into a cus
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](#get-autoconnectelement-from-the-autoconnectaux) function. The following sketch executes the above example with AutoConnect only, without using the function of ESP8266WebServer.
```cpp hl_lines="47 50"
```cpp hl_lines="48 51"
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <AutoConnect.h>
@ -595,60 +595,6 @@ portal.on("/echo", [](AutoConnectAux& aux, PageArgument& args) {
portal.begin();
```
### <i class="fa fa-wrench"></i> Retrieve the values with WebServer::on handler
ESP8266WebServer class and the WebServer (for ESP32) 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 (or WebServer::on for ESP32) function.
When the page transitions from the custom Web page created by AutoConnectAux to the handler registered by 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](acelements.md#uri) attribute of [AutoConnectSubmit](acelements.md#autoconnectsubmit)) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler by the sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the [**AutoConnectAux::fetchElement**](apiaux.md#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.
```cpp hl_lines="13 20 27 38"
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();
}
```
### <i class="fa fa-wpforms"></i> Overwrite the AutoConnectElements
@ -694,7 +640,7 @@ void loop() {
### <i class="far fa-check-square"></i> Check data against on submission
By giving a [pattern](apielements.md#pattern) to [AutoConnectInput](apielements.md#autoconnectinput), you can find errors in data styles while typing in custom Web pages. The pattern is specified by [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).[^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.
By giving a [pattern](apielements.md#pattern) to [AutoConnectInput](apielements.md#autoconnectinput), you can find errors in data styles while typing in custom Web pages. The pattern is specified with [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).[^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.
[^2]:Regular expression specification as a pattern of AutoConnectInput is [JavaScript compliant](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).
@ -714,18 +660,60 @@ By giving a [pattern](apielements.md#pattern) to [AutoConnectInput](apielements.
}
```
<div>
<span style="display:block;margin-left:136px;"><img width="32px" height="32xp" src="images/arrow_down.png"></span>
<span style="display:block;width:306px;height:136px;border:1px solid lightgrey;"><img data-gifffer="images/aux_pattern.gif" data-gifffer-height="134" data-gifffer-width="304" /></span>
</div>
<i class="fa fa-arrow-down"></i><br><i class="fa fa-eye"></i> It's shown as like:<br>
<span style="display:block;width:306px;height:136px;border:1px solid lightgrey;"><img data-gifffer="images/aux_pattern.gif" data-gifffer-height="134" data-gifffer-width="304" /></span>
If you are not familiar with regular expressions, you may feel that description very strange. And matter of fact, it is a strange description for those unfamiliar with formal languages. If your regular expression can not interpret the intended syntax and semantics, you can use an online tester. The [regex101](https://regex101.com/) is an exceptional online site for testing and debugging regular expressions.
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](https://regex101.com/) is an exceptional online tool for testing and debugging regular expressions.
### <img src="images/regexp.png" align="top"> Validate input data
### <img src="images/regexp.png" align="top"> Input data validation
The [pattern](apielements.md#pattern) attribute of [AutoConnectInput](apielements.md#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](apielements.md#autoconnectinput) using the [isValid](apielements.md#isvalid) function before actually processing it. The [isValid](apielements.md#isvalid) function determines whether the [value](apielements.md#value_3) currently stored in [AutoConnectInput](apielements.md#autoconnectinput) matches the [pattern](apielements.md#pattern).
You can validate input data from [AutoConnectInput](apielements.md#autoconnectinput) using the [isValid](apielements.md#isvalid) function before actually processing it. The [isValid](apielements.md#isvalid) function determines whether the [value](apielements.md#value_3) currently stored in [AutoConnectInput](apielements.md#autoconnectinput) matches the [pattern](apielements.md#pattern).
You can also use the [AutoConnectAux::isValid](apiaux.md#isvalid) function to verify the data input to all [AutoConnectInput](apielements.md#autoconnectinput) elements on the custom Web page at once. The two sketches below show the difference between using [AutoConnectInput::isValid](apielements.md#isvalid) and using [AutoConnectAux::isValid](apiaux.md#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**
```cpp
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**
```cpp
AutoConnectInput& input1 = page["input1"].as<AutoConnectInput>();
AutoConnectInput& input2 = page["input2"].as<AutoConnectInput>();
if (!input1.isValid() || !input2.isValid())
Serial.println("Validation error");
```
**Using AutoConnectAux::isValid**
```cpp
if (!page.isValid())
Serial.println("Validation error");
```
### <i class="fa fa-exchange"></i> Convert data to actually type

@ -20,7 +20,7 @@ A JSON document for AutoConnect can contain the custom Web page multiple. You ca
AutoConnectAux will configure custom Web pages with JSON objects. The elements that make up the object are as follows:
```
```js
{
"title" : title,
"uri" : uri,
@ -99,11 +99,13 @@ You can put declarations of multiple custom Web pages in one JSON document. In t
]
```
The above custom Web page definitions can be loaded in a batch using the [AutoConnect::load](api.md#load) function.
### <i class="fa fa-caret-right"></i> JSON object for AutoConnectElements
JSON description for AutoConnectElements describes as an array in the *element* with arguments of [each constructor](acelements.md#constructor).
```
```js
{
"name" : name,
"type" : type,
@ -124,6 +126,7 @@ JSON description for AutoConnectElements describes as an array in the *element*
: - AutoConnectInput: [**ACInput**](#acinput)
: - AutoConnectRadio: [**ACRadio**](#acradio)
: - AutoConnectSelect: [**ACSelect**](#acselect)
: - AutoConnectStyle: [**ACStyle**](#acstyle)
: - AutoConnectSubmit: [**ACSubmit**](#acsubmit)
: - AutoConnectText: [**ACText**](#actext)
@ -169,6 +172,9 @@ This is different for each AutoConnectElements, and the key that can be specifie
: - **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.
#### <i class="fa fa-caret-right"></i> ACStyle
: - **value** : Specifies the custom CSS code.
#### <i class="fa fa-caret-right"></i> ACSubmit
: - **value** : Specifies a label of the submit button.
: - **uri** : Specifies the URI to send form data when the button is clicked.
@ -183,6 +189,102 @@ This is different for each AutoConnectElements, and the key that can be specifie
## Loading JSON document
### <i class="fa fa-caret-right"></i> Loading to AutoConnect
There are two main ways to load the custom Web pages into AutoConnect.
1. 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](api.md#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](api.md#aux) function. You can reach the AutoConnectElements you desired using the [AutoConnectAux::getElement](apiaux.md#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.
```js
[
{
"title": "page1",
"uri": "/page1",
"menu": true,
"element": [
{
"name": "input1",
"type": "ACInput"
}
]
},
{
"title": "page2",
"uri": "/page2",
"menu": true,
"element": [
{
"name": "input2",
"type": "ACInput"
}
]
}
]
```
```cpp hl_lines="3 5 6"
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");
```
2. 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](apiaux.md#load) function by each, integrate those into AutoConnect using the [AutoConnect::join](api.md#join) function.
In the following example, you can see the difference between two sketches in a sketch modified using the AutoConnectAux::load.
```js
{
"title": "page1",
"uri": "/page1",
"menu": true,
"element": [
{
"name": "input1",
"type": "ACInput"
}
]
}
```
```js
{
"title": "page2",
"uri": "/page2",
"menu": true,
"element": [
{
"name": "input2",
"type": "ACInput"
}
]
}
```
```cpp hl_lines="5 8 10"
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");
```
### <i class="fa fa-caret-right"></i> Loading from the streamed file
AutoConnect supports loading of JSON document from the following instances:

@ -125,7 +125,7 @@ The AutoConnect built-in upload handler can save the upload file to three locati
2. SD device externally connected to the ESP8266/ESP32 module
3. Other character devices
You can specify the device type to save with the [**store**](acelements.md#store) attribute of AutoConenctFile, and it accepts the following values:
You can specify the device type to save with the [**store**](acelements.md#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

@ -6,7 +6,11 @@ Registering the "not found" handler is a different way than ESP8266WebServer (We
### <i class="fa fa-caret-right"></i> Access to saved credentials
AutoConnect stores the established WiFi connection in the EEPROM of the ESP8266/ESP32 module and equips the class to access it from the sketch. You can read, write or erase the credentials using this class individually. It's [AutoConnectCredential](credit.md#autoconnectcredential) class which provides the access method to the saved credentials in EEPROM. Refer to section [Saved credentail access](credit.md) for details.
AutoConnect stores the established WiFi connection in the flash of the ESP8266/ESP32 module and equips the class to access it from the sketch. You can read, write or erase the credentials using this class individually. It's [AutoConnectCredential](credit.md#autoconnectcredential) class which provides the access method to the saved credentials in the flash. Refer to section [Saved credentials access](credit.md) for details.
!!! note "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](credit.md) for details.
In ESP8266, it is saved in EEPROM as is conventionally done.
### <i class="fa fa-caret-right"></i> Automatic reconnect
@ -14,7 +18,7 @@ When the captive portal is started, SoftAP starts and the STA is disconnected. T
The [*WiFiSTAClass::disconnect*](https://github.com/espressif/arduino-esp32/blob/a0f0bd930cfd2d607bf3d3288f46e2d265dd2e11/libraries/WiFi/src/WiFiSTA.h#L46) 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](https://github.com/esp8266/Arduino/blob/7e1bdb225da8ab337373517e6a86a99432921a86/libraries/ESP8266WiFi/src/ESP8266WiFiSTA.cpp#L296) has the effect of deleting the currently connected WiFi configuration and its default value is "false". On the ESP32 platform, even if WiFi.disconnect is executed, WiFi.begin() without the parameters in the next turn will try to connect to that AP. That is, automatic reconnection is implemented in arduino-esp32 already. Although this behavior appears seemingly competent, it is rather a disadvantage in scenes where you want to change the access point each time. When explicitly disconnecting WiFi from the Disconnect menu, AutoConnect will erase the AP connection settings saved by arduino-esp32 core. AutoConnect's automatic reconnection is a mechanism independent from the automatic reconnection of the arduino-esp32 core.
If the [**autoReconnect**](apiconfig.md#autoreconnect) option of the [AutoConnectConfig](apiconfig.md) class is enabled, it automatically attempts to reconnect to the disconnected past access point. When the autoReconnect option is specified, AutoConnect will not start SoftAP immediately if the first WiFi.begin fails. It will scan WiFi signal and the same connection information as the detected BSSID is stored in EEPROM as AutoConnect's credentials, explicitly apply it with WiFi.begin and rerun.
If the [**autoReconnect**](apiconfig.md#autoreconnect) option of the [AutoConnectConfig](apiconfig.md) class is enabled, it automatically attempts to reconnect to the disconnected past access point. When the autoReconnect option is specified, AutoConnect will not start SoftAP immediately if the first WiFi.begin fails. It will scan WiFi signal and the same connection information as the detected BSSID is stored in the flash as AutoConnect's credentials, explicitly apply it with WiFi.begin and rerun.
```cpp hl_lines="3"
AutoConnect Portal;
@ -24,14 +28,15 @@ Portal.config(Config);
Portal.begin();
```
An autoReconnect option is available to *AutoConnect::begin* without SSID and pass passphrase.
An autoReconnect option is available to *AutoConnect::begin* without SSID and pass Passphrase.
!!! caution "An autoReconnect will work if SSID detection succeeded"
An autoReconnect will not effect if the SSID which stored credential to be connected is a hidden access point.
### <i class="fa fa-caret-right"></i> Auto save Credential
By default, AutoConnect saves the credentials of the established connection in EEPROM. You can disable it with the [**autoSave**](apiconfig.md#autosave) parameter specified by [AutoConnectConfig](apiconfig.md).
By default, AutoConnect saves the credentials of the established connection to the flash. You can disable it with the [**autoSave**](apiconfig.md#autosave) parameter specified by [AutoConnectConfig](apiconfig.md).
See the [Saved credentials access](credit.md) chapter for details on accessing stored credentials.
```cpp hl_lines="3"
AutoConnect Portal;
@ -41,8 +46,30 @@ Portal.config(Config);
Portal.begin();
```
!!! note "In ESP32, the credentials for AutoConnect are not in NVS"
The credentials used by AutoConnect are not saved in NVS on ESP32 module. ESP-IDF saves the WiFi connection configuration to NVS, but AutoConnect stores it on the EEPROM partition. You can find the partition table for default as [default.csv](https://github.com/espressif/arduino-esp32/blob/master/tools/partitions/default.csv)
!!! note "Credentials storage location"
The location where AutoConnect saves credentials depends on the module type and the AutoConnect library version, also arduino-esp32 core version.
<table>
<tr>
<th rowspan="2" style="vertical-align:bottom">AutoConnect</th>
<th rowspan="2" style="vertical-align:bottom">Arduino core<br>for ESP8266</th>
<th colspan="2" style="text-align:center;vertical-align:bottom">Arduino core for ESP32</th>
</tr>
<tr>
<th style="text-align:center;vertical-align:bottom">1.0.2 earlier</td>
<th style="text-align:center;vertical-align:bottom">1.0.3 later</td>
</tr>
<tr>
<td>v0.9.12 earlier</td>
<td rowspan="2" style="text-align:center;vertical-align:middle">EEPROM</td>
<td>EEPROM (partition)</td>
<td>Not supported</td>
</tr>
<tr>
<td>v1.0.0 later</td>
<td>Preferences (nvs)<p>(Can be used EEPROM with turning off AUTOCONNECT_USE_PREFERENCES macro)</p></td>
<td>Preferences (nvs)</td>
</tr>
</table>
### <i class="fa fa-caret-right"></i> Captive portal start detection
@ -251,7 +278,7 @@ For disabling the captive portal, [**autoRise**](apiconfig.md#autorise) sets to
AutoConnect portal;
AutoConnectConfig acConfig;
acConfig.autoRaise = false;
acConfig.autoRise = false;
portal.config(acConfig);
portal.begin();
```
@ -290,10 +317,13 @@ and
> EEPROM library uses one sector of flash located [just after the SPIFFS](http://arduino-esp8266.readthedocs.io/en/latest/libraries.html?highlight=SPIFFS#eeprom).
Also, the placement of the EEPROM area of ESP32 is described in the [partition table](https://github.com/espressif/arduino-esp32/blob/master/tools/partitions/default.csv). 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.
Also, in ESP32 arduino core 1.0.2 earlier, the placement of the EEPROM area of ESP32 is described in the [partition table](https://github.com/espressif/arduino-esp32/blob/master/tools/partitions/default.csv). 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**](apiconfig.md#boundaryoffset) in [AutoConnectConfig](apiconfig.md) specifies the start offset of the credentials storage area. The default value is 0.
!!! info "The boundaryOffset ignored with AutoConnect v1.0.0 later on ESP32 arduino core 1.0.3 later"
For ESP32 arduino core 1.0.3 and later, AutoConnect will store credentials to Preferences in the nvs. Since it is defined as the namespace dedicated to AutoConnect and separated from the area used for user sketches. Therefore, the boundaryOffet is ignored with the combination of AutoConnect v1.0.0 or later and the arduino-esp32 1.0.3 or later.
### <i class="fa fa-caret-right"></i> On-demand start the captive portal
If you do not usually connect to WiFi and need to establish a WiFi connection if necessary, you can combine the [**autoRise**](apiconfig.md#autorise) option with the [**immediateStart**](apiconfig.md#immediatestart) option to achieve on-demand connection. This behavior is similar to the [WiFiManager's startConfigPortal](https://github.com/tzapu/WiFiManager#on-demand-configuration-portal) function. In order to do this, you usually configure only with AutoConnectConfig in *setup()* and [*AutoConnect::begin*](api.md#begin) handles in *loop()*.
@ -515,7 +545,7 @@ portal.begin();
The AutoConnect ticker indicates the WiFi connection status in the following three flicker patterns:
- Short blink: The ESP8266/ESP32 module stays in APSTA mode.
- Short blink: The ESP module stays in APSTA mode.
- Short-on and long-off: No STA connection state. (i.e. WiFi.status != WL_CONNECTED)
- No blink: WiFi connection with access point established and data link enabled. (i.e. WiFi.status = WL_CONNECTED)
@ -529,13 +559,13 @@ The flicker cycle length is defined by some macros in `AutoConnectDefs.h` header
```
- `AUTOCONNECTT_FLICKER_PERIODAP`:
Assigns a flicker period when the ESP8266/ESP32 module stays in APSTA mode.
Assigns a flicker period when the ESP module stays in APSTA mode.
- `AUTOCONNECT_FLICKER_PERIODDC`:
Assigns a flicker period when WiFi is disconnected.
- `AUTOCONNECT_FLICKER_WIDTHAP` and `AUTOCONNECT_FLICKER_WIDTHDC`:
Specify the duty rate for each period[ms] in 8-bit resolution.
[AutoConnectConfig::tickerPort](apiconfig.md#tickerport) specifies a port that outputs the flicker signal. If you are using an LED-equipped ESP8266/ESP32 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::tickerPort](apiconfig.md#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]
[^3]: It's defined in the `pins_arduino.h` file, located in the sub-folder named **variants** wherein Arduino IDE installed folder.

@ -88,6 +88,30 @@ for (AutoConnectElement& elm : elements) {
}
```
### <i class="fa fa-caret-right"></i> isMenu
```cpp
bool isMenu(void)
```
Returns whether embedded in the menu or not. The isMenu is a function that complements the [menu](apiaux.md#menu) function.
<dl class="apidl">
<dt>**Return value**</dt>
<dd><span class="apidef">true</span><span class="apidesc">The custom Web page has been incorporated into the AutoConnect menu as a menu item.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">This custom Web page is not currently a menu item.</span></dd>
</dl>
### <i class="fa fa-caret-right"></i> isValid
```cpp
bool isValid(void)
```
Performs [validation](apielements.md#isvalid) of all [AutoConnectInput](apielements.md#autoconnectinput) elements owned by AutoConnectAux and returns the result. The isValid function will return the true even if the AutoConnectAux does not own AutoConnectInputs.
<dl class="apidl">
<dt>**Return value**</dt>
<dd><span class="apidef">true</span><span class="apidesc">Validation is successful. A value of all AutoConnectInputs match with each pattern.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">Some elements failed validation.</span></dd>
</dl>
### <i class="fa fa-caret-right"></i> load
```cpp
@ -183,7 +207,7 @@ Load specified element from JSON document into AutoConnectAux. The JSON document
```cpp
void menu(const bool post)
```
Set or reset the display as menu item for this AutoConnectAux. This function programmatically manipulates the menu parameter of the [AutoConenctAux constructor](apiaux.md#autoconnectaux).
Set or reset the display as menu item for this AutoConnectAux. This function programmatically manipulates the menu parameter of the [AutoConnectAux constructor](apiaux.md#autoconnectaux).
<dl class="apidl">
<dt>**Parameter**</dt>
<dd><span class="apidef">true</span><span class="apidesc">Show on the menu.</span></dd>
@ -243,7 +267,7 @@ typedef struct {
```cpp
bool release(const String& name)
```
Release a specified AutoConnectElement from AutoConenctAux. The release function is provided to dynamically change the structure of the custom Web pages with the sketch. By combining the release function and the [add](apiaux.md#add) function or the [loadElement](apiaux.md#loadelement) function, the sketch can change the style of the custom Web page according to its behavior.
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](apiaux.md#add) function or the [loadElement](apiaux.md#loadelement) function, the sketch can change the style of the custom Web page according to its behavior.
<dl class="apidl">
<dt>**Parameter**</dt>
<dd><span class="apidef">name</span><span class="apidesc">Specifies the name of AutoConnectElements to be released.</span></dd>
@ -257,7 +281,7 @@ Release a specified AutoConnectElement from AutoConenctAux. The release function
```cpp
size_t saveElement(Stream& out, std::vector<String> const& names = {})
```
Write elements of AutoConnectAux to the stream. The saveElement function outputs the specified AutoConenctElements as a JSON document using the [prettyPrintTo](https://arduinojson.org/v5/api/jsonobject/prettyprintto/) function of the [ArduinoJson](https://arduinojson.org/) library.
Write elements of AutoConnectAux to the stream. The saveElement function outputs the specified AutoConnectElements as a JSON document using the [prettyPrintTo](https://arduinojson.org/v5/api/jsonobject/prettyprintto/) function of the [ArduinoJson](https://arduinojson.org/) library.
<dl class="apidl">
<dt>**Parameters**</dt>
<dd><span class="apidef">out</span><span class="apidesc">Output stream to be output. SPIFFS, SD also Serial can be specified generally.</span></dd>

@ -42,7 +42,7 @@ Sets IP address for Soft AP in captive portal. When AutoConnect fails the initia
### <i class="fa fa-caret-right"></i> autoReconnect
Automatically will try to reconnect with the past established access point (BSSID) when the current configured SSID in ESP8266/ESP32 could not be connected. By enabling this option, *AutoConnect::begin()* function will attempt to reconnect to a known access point using credentials stored in the EEPROM, even if the connection failed by current SSID.
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.
<dl class="apidl">
<dt>**Type**</dt>
@ -104,7 +104,8 @@ Specify the location to be redirected after module reset in the AutoConnect menu
### <i class="fa fa-caret-right"></i> boundaryOffset
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.
The default value is 0.
This option is valid only for ESP8266 or ESP32 arduino core 1.0.2 earlier.
<dl class="apidl">
<dt>**Type**</dt>
<dd>uint16_t</dd>
@ -260,13 +261,13 @@ Set flicker signal output according to WiFi connection status during AutoConnect
<dt>**Type**</dt>
<dd>bool</dd>
<dt>**Value**</dt>
<dd><span class="apidef">true</span><span class="apidesc">Output the flicker signal while [AutoConnect::begin](api.md#begin) operation. The **AUTOCONNECT_TICKER_PORT** macro defined in the `AutoConnectDefs.h` header file assigns pins for signal output. The default pin is arduino variants LED_BUILTIN. For boards without the LED\_BUILTIN pin, assume pin #2.</span></dd>
<dd><span class="apidef">true</span><span class="apidesc">Output the flicker signal while [AutoConnect::begin](api.md#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.</span></dd>
<dd><span class="apidef">false</span>No flicker signal output.<span class="apidesc"></span></dd>
</dl>
### <i class="fa fa-caret-right"></i> tickerPort
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`.
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`.
<dl class="apidl">
<dt>**Type**</dt>
<dd>uint8_t</dd>

@ -27,10 +27,18 @@ HTML native code of the action script to be executed when the button is clicked.
#### <i class="fa fa-caret-right"></i> enable
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
Enable HTML tag generation for the element.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">boolean</span><span class="apidesc"></span></dd>
<dd><span class="apidef">bool</span><span class="apidesc">AutoConnect will generate the element into HTML only if the enable attribute is true.</span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> global
The global attribute copies input values between elements of the same name on different custom Web pages.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">bool</span><span class="apidesc">An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition.<br>However, it will be copied only when the destination element has the true for a global attribute.</span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> name
@ -99,15 +107,15 @@ AutoConnectCheckbox(const char* name = "", const char* value = "", const char* l
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.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">Boolean</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> enable
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">boolean</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> label
@ -188,13 +196,6 @@ AutoConnectElement(const char* name = "", const char* value = "", const ACPoster
### <i class="fa fa-code"></i> Public member variables
#### <i class="fa fa-caret-right"></i> enable
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">boolean</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> name
@ -271,26 +272,18 @@ AutoConnectFile(const char* name = "", const char* value = "", const char* label
#### <i class="fa fa-caret-right"></i> enable
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">boolean</span><span class="apidesc"></span></dd>
<dd><span class="apidef">bool</span><span class="apidesc">AutoConnect will generate the element into HTML only if the enable attribute is true.</span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> label
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 `#!html <label>` tag with an id attribute. The file input box and the label are connected by the id attribute.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> mimeType
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](https://www.iana.org/assignments/media-types/media-types.xhtml).
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
<dd><span class="apidef">bool</span><span class="apidesc">An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition.<br>However, it will be copied only when the destination element has the true for a global attribute.</span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> name
@ -301,48 +294,23 @@ The element name.
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> post
Specifies a tag to add behind the HTML code generated from the element.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">ACPosterior_t</span><span class="apidesc">
- **`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.
</span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> size
Size of the uploading file.
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](https://www.iana.org/assignments/media-types/media-types.xhtml).
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">size_t</span><span class="apidesc"></span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> store
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.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">ACFile_t</span><span class="apidesc">
- **`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.
</span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> value
File name to be upload. The value contains the value entered by the client browser to the `#!html <input type="file">` tag and is read-only.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl>
### <i class="fa fa-code"></i> Public member functions
#### <i class="fa fa-caret-right"></i> typeOf
@ -377,15 +345,23 @@ AutoConnectInput(const char* name = "", const char* value = "", const char* labe
#### <i class="fa fa-caret-right"></i> enable
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">boolean</span><span class="apidesc"></span></dd>
<dd><span class="apidef">bool</span><span class="apidesc">AutoConnect will generate the element into HTML only if the enable attribute is true.</span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> label
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 `#!html <label>` tag with an id attribute. The input box and the label are connected by the id attribute.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">bool</span><span class="apidesc">An entered value will be copied to elements of the same name in other AutoConnectAuxes during page transition.<br>However, it will be copied only when the destination element has the true for a global attribute.</span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> value
Value of the element. It becomes a value attribute of an HTML `#!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.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
@ -490,10 +466,10 @@ Specifies the index number (1-based) of the **values** to be checked. If this pa
#### <i class="fa fa-caret-right"></i> enable
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">boolean</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> label
@ -646,13 +622,6 @@ AutoConnectSelect(const char* name = "", std::vector<String> const& options = {}
### <i class="fa fa-code"></i> Public member variables
#### <i class="fa fa-caret-right"></i> enable
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">boolean</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> name
@ -782,57 +751,6 @@ Returns current selected option of the select list.
<dd>A String of an option current selected. If there is no select option, a null string returned.</dd>
</dl>
## AutoConnectStyle
### <i class="fa fa-code"></i> Constructor
```cpp
AutoConnectStyle(const char* name = "", const char* value = "")
```
<dl class="apidl">
<dt>**Parameters**</dt>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">value</span><span class="apidesc">Raw CSS code to insert into a style block in a custom web page to generate.</span></dd>
</dl>
### <i class="fa fa-code"></i> Public member variables
#### <i class="fa fa-caret-right"></i> enable
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">boolean</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> name
The element name.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> value
Raw CSS code to insert into a style block in a custom web page to generate.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl>
### <i class="fa fa-code"></i> Public member functions
#### <i class="fa fa-caret-right"></i> typeOf
```cpp
ACElement_t typeOf(void)
```
Returns type of AutoConnectElement.
<dl class="apidl">
<dt>**Return value**</dt>
<dd>AC_Style</dd>
</dl>
## AutoConnectSubmit
@ -851,13 +769,6 @@ AutoConnectSubmit(const char* name = "", const char* value ="", char* uri = "",
### <i class="fa fa-code"></i> Public member variables
#### <i class="fa fa-caret-right"></i> enable
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">boolean</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> name
@ -927,21 +838,6 @@ AutoConnectText(const char* name = "", const char* value = "", const char* style
### <i class="fa fa-code"></i> Public member variables
#### <i class="fa fa-caret-right"></i> enable
Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">boolean</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> format
The conversion format when outputting values. The format string conforms to C-style printf library functions.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl>
#### <i class="fa fa-caret-right"></i> name

@ -11,6 +11,7 @@ To reference the icon, use the **AUTOCONNECT_LINK** macro in the sketch. It expa
<dd><span class="apidef">BAR_24</span>Bars icon, 24x24.</dd>
<dd><span class="apidef">BAR_32</span>Bars icon, 32x32.</dd>
<dd><span class="apidef">BAR_48</span>Bars icon, 48x48.</dd>
<dd><span class="apidef">COG_16</span>Cog icon, 16x16.</dd>
<dd><span class="apidef">COG_24</span>Cog icon, 24x24.</dd>
<dd><span class="apidef">COG_32</span>Cog icon, 32x32.</dd>
</dl>

@ -0,0 +1,135 @@
## <i class="fa fa-code"></i> Constructor
### AutoConnectUpdate
```cpp
AutoConnectUpdate(const String& host, const uint16_t port, const String& uri, const int timeout, const uint8_t ledOn)
```
<dl class="apidl">
<dt>**Parameters**</dt>
<dd><span class="apidef">host</span><span class="apidesc">Update server address. Specifies IP address or FQDN.</span></dd>
<dd><span class="apidef">port</span><span class="apidesc">Specifies HTTP port for the updating process. The default is defined as the **AUTOCONNECT_UPDATE_PORT** macro in the `AutoConnectDefs.h` header file.</span></dd>
<dd><span class="apidef">uri</span><span class="apidesc">Specifies a URI on the update server that has deployed available binary sketch files.</span></dd>
<dd><span class="apidef">timeout</span><span class="apidesc">Specifies the maximum response time for the update server. The default is defined as the **AUTOCONNECT_UPDATE_TIMEOUT** macro in the `AutoConnectDefs.h` header file.</span></dt>
<dd><span class="apidef">ledOn</span><span class="apidesc">Active signal to light the LED ticker during the update. Specifies **HIGH** or **LOW**</span></dt>
</dl>
The AutoConnectUpdate class inherits from the **ESP8266HTTPUpdate** (**HTTPUpdate** for ESP32) class.
## <i class="fa fa-code"></i> Public member functions
### <i class="fa fa-caret-right"></i> attach
```cpp
void AutoConnectUpdate::attach(AutoConnect& portal)
```
Attaches the [AutoConnectUpdate](apiupdate.md) to the AutoConnect which constitutes the bedrock of the update process. This function creates a [dialog page](otaserver.md#behavior-of-the-autoconnectupdate-class) for the update operation as an instance of [AutoConnectAux](apiaux.md) and participates in the [AutoConnect menu](menu.md).
<dl class="apidl">
<dt>**Parameter**</dt>
<dd><span class="apidef">portal</span><span class="apidesc">Specifies a reference to the AutoConnect instance to attach.</span></dd>
</dl>
### <i class="fa fa-caret-right"></i> disable
```cpp
void AutoConnectUpdate::disable(const bool activate)
```
Disable the Update item in [AutoConnect menu](menu.md). The [AutoConnect::disable](#disable) function only hides the Update item from the menu, and the [AutoConnectUpdate](apiupdate.md) class is still active with the parameter condition. You can use the [AutoConnectUpdate::enable](#enable) function to appear it again in the menu.
<dl class="apidl">
<dt>**Parameter**</dt>
<dd><span class="apidef">activate</span><span class="apidesc">If specified the **true** then the Update item will be displayed on the [AutoConnect menu](menu.md) and OTA update will be available during the WiFi status is WL_CONNECTED. For the **false**, the OTA update feature is disabled.</span></dd>
</dl>
### <i class="fa fa-caret-right"></i> enable
```cpp
void AutoConnectUpdate::enable(void)
```
Makes [AutoConnectUpdate](apiupdate.md) class available by incorporating the OTA update function into the [AutoConnect menu](menu.md). In ordinarily, the [AutoConnectUpdate](apiupdate.md) class becomes available by just calling the [AutoConnectUpdate::attach](#attach) function.
### <i class="fa fa-caret-right"></i> handleUpdate
```cpp
void AutoConnectUpdate::handleUpdate(void)
```
Performs the update process. This function is called by [AutoConnect::handleClient](api.md#handleClient) when AutoConnectUpdate is enabled. In many cases, sketches do not need to call this function on purpose.
### <i class="fa fa-caret-right"></i> isEnabled
```cpp
bool AutoConnectUpdate::isEnabled(void)
```
Returns whether AutoConnectUpdate is enabled.
### <i class="fa fa-caret-right"></i> rebootOnUpdate
```cpp
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.
<dl class="apidl">
<dt>**Parameter**</dt>
<dd><span class="apidef">reboot</span><span class="apidesc">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 updated firmware remains stored in the flash update firmware area equipped 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 the true.</span></dd>
</dl>
This function inherits from the ESP8266HTTPUpdate (HTTPUpdate for ESP32) class.
### <i class="fa fa-caret-right"></i> setLedPin
```cpp
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.
<dl class="apidl">
<dt>**Parameter**</dt>
<dd><span class="apidef">ledPin</span><span class="apidesc">Specifies the PIN connected external LED for the ticker. The default is defined as the **AUTOCONNECT_TICKER_PORT** macro 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](#setledpin) function.</span></dd>
<dd><span class="apidef">ledOn</span><span class="apidesc">Specifies the the ON signal level of the LED PIN port. It is **HIGH** or **LOW**.</span></dd>
</dl>
This function inherits from the ESP8266HTTPUpdate (HTTPUpdate for ESP32) class.
### <i class="fa fa-caret-right"></i> status
```cpp
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.
<dl class="apidl">
<dt>**Return value**</dt>
<dd>One of the enumerated values indicating the status of the Update class as follows:</dd>
<dd><span class="apidef"></span><span class="apidesc">
- 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.</span></dd>
</dl>
## <i class="fa fa-code"></i> Public member variables
### <i class="fa fa-caret-right"></i> host
Update server address. Specifies IP address or FQDN.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">String</span></dd><dd><span class="apidesc"></span></dd>
</dl>
### <i class="fa fa-caret-right"></i> port
HTTP port for the updating process.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">String</span><span class="apidesc">The default is defined as the **AUTOCONNECT_UPDATE_PORT** macro in the `AutoConnectDefs.h` header file.</span></dd>
</dl>
### <i class="fa fa-caret-right"></i> uri
URI on the update server that has deployed available binary sketch files.
<dl class="apidl">
<dt>**Type**</dt>
<dd><span class="apidef">String</span></dd><dd><span class="apidesc"></span></dd>
</dl>

@ -1,3 +1,10 @@
#### [1.0.0] Sept. 7, 2019
- Supports Arduino core for ESP32 1.0.3.
- Supports AutoConnectUpdate for the [OTA update](otaupdate.md).
- Supports Preferences for saving credentials with ESP32 core 1.0.3 and later. **In ESP32, the credentials stored past in EEPROM will lose**.
- Supports [**AutoConnectAux::isValid**](apiaux.md#isvalid) function.
- Supports the [**global**](achandling.md#transfer-of-input-values-across-pages) attribute with all AutoConnectElements.
#### [0.9.12] Aug. 18, 2019
- 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**.

@ -1,9 +1,43 @@
## Saved credentials in EEPROM
## Saved credentials in the flash
AutoConnect stores the established WiFi connection in the EEPROM of the ESP8266/ESP32 module and equips the class to access it from the sketch. You can read, write or erase the credentials using this class individually. It's [**AutoConnectCredential**](#autoconnectcredential) class which provides the access method to the saved credentials in EEPROM.[^1]
AutoConnect stores the established WiFi connection in the flash memory of the ESP8266/ESP32 module and equips the class to access the credentials from the sketch. You can read, write or erase the credentials using this class individually. It's [**AutoConnectCredential**](#autoconnectcredential) class which provides the access method to the saved credentials in the flash.[^1]
[^1]:An example using AutoConnectCredential is provided as [an example](https://github.com/Hieromon/AutoConnect/blob/master/examples/Credential/Credential.ino) of a library sketch to delete saved credentials.
## Credentials storage location
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.
<table>
<tr>
<th rowspan="2" style="vertical-align:bottom">AutoConnect</th>
<th rowspan="2" style="vertical-align:bottom">Arduino core<br>for ESP8266</th>
<th colspan="2" style="text-align:center;vertical-align:bottom">Arduino core for ESP32</th>
</tr>
<tr>
<th style="text-align:center;vertical-align:bottom">1.0.2 earlier</td>
<th style="text-align:center;vertical-align:bottom">1.0.3 later</td>
</tr>
<tr>
<td>v0.9.12 earlier</td>
<td rowspan="2" style="text-align:center;vertical-align:middle">EEPROM</td>
<td>EEPROM (partition)</td>
<td>Not supported</td>
</tr>
<tr>
<td>v1.0.0 later</td>
<td>Preferences (nvs)<p>(Can be used EEPROM with turning off AUTOCONNECT_USE_PREFERENCES macro)</p></td>
<td>Preferences (nvs)</td>
</tr>
</table>
However, sketches do not need to know where to store credentials using the commonly accessible [AutoConnectCredential](#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.
[^2]:The namespace for Preferences used by AutoConnect is **AC_CREDT**.
[^3]:Available only for AutoConnect v1.0.0 and later.
## AutoConnectCredential
### <i class="fa fa-code"></i> Include header
@ -18,14 +52,14 @@ AutoConnect stores the established WiFi connection in the EEPROM of the ESP8266/
AutoConnectCredential();
```
AutoConnectCredential default constructor. The default offset value is 0. If the offset value is 0, the credential area starts from the top of the EEPROM. AutoConnect sometimes overwrites data when using this area with user sketch.
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.
```cpp
AutoConnectCredential(uint16_t offset);
```
<dl class="apidl">
<dt>**Parameter**</dt>
<dd><span class="apidef">offset</span><span class="apidesc">Species offset from the top of the EEPROM for the credential area together. The offset value is from 0 to the flash sector size.</span></dd>
<dd><span class="apidef">offset</span><span class="apidesc">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.</span></dd>
</dl>
### <i class="fa fa-code"></i> Public member functions
@ -102,6 +136,22 @@ Delete a credential the specified SSID.
<dd><span class="apidef">false</span><span class="apidesc">Failed to delete.</span></dd>
</dl>
!!! example "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.
```cpp
void deleteAllCredentials(void) {
AutoConnectCredential credential;
struct station_config config;
uint8_t ent = credential.entries();
while (ent--) {
credential.load(0, &config);
credential.del((const char*)&config.ssid[0]);
}
}
```
## The data structures
### <i class="fa fa-code"></i> station_config
@ -125,9 +175,9 @@ struct station_config {
### <i class="fa fa-code"></i> The credential entry
A data structure of the credential saving area in EEPROM as the below. [^2]
A data structure of the credential saving area in EEPROM as the below. [^4]
[^2]:
[^4]:
There may be 0xff as an invalid data in the credential saving area. The 0xff area would be reused.
| Byte offset | Length | Value |

@ -31,11 +31,11 @@ By default, AutoConnect saves the credentials of the established connection into
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**](apiconfig.md#boundaryoffset) option. Refer to the chapter on [Advanced usage](advancedusage.md#move-the-saving-area-of-eeprom-for-the-credentials) for details.
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](apiconfig.md#boundaryoffset) option. Refer to the chapter on [Advanced usage](advancedusage.md#move-the-saving-area-of-eeprom-for-the-credentials) 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](advancedusage.md#automatic-reconnect) will be lost.
If you want to stop the automatic saving of the credentials, uses [**AutoConnectConfig::autoSave**](apiconfig.md#autosave) option specifying **AC_SAVECREDENTIAL_NEVER**. Refer to the chapter on [Advanced usage](advancedusage.md#auto-save-credential) for details.
If you want to stop the automatic saving of the credentials, uses [AutoConnectConfig::autoSave](apiconfig.md#autosave) option specifying **AC_SAVECREDENTIAL_NEVER**. Refer to the chapter on [Advanced usage](advancedusage.md#auto-save-credential) for details.
## <i class="fa fa-question-circle"></i> Does not appear esp8266ap in smartphone.
@ -74,21 +74,6 @@ void loop() {
Probably **WiFi.begin** failed with the specified SSID. Activating the [debug printing](advancedusage.md#debug-print) will help you to track down the cause.
## <i class="fa fa-question-circle"></i> How can I detect the captive portal starting?
You can use the [AutoConnect::onDetect](api.md#ondetect) exit routine. For more details and an implementation example of the onDetect exit routine, refer to the chapter "[Captive portal start detection](advancedusage.md#captive-portal-start-detection)".
## <i class="fa fa-question-circle"></i> How change esp8266ap for SSID name in Captive portal?
You can change both by using [AutoConnectConfig::apid](apiconfig.md#apid) and [AutoConnectConfig::psk](apiconfig.md#psk). Refer to section [Change SSID and Password for SoftAP](advancedusage.md#change-ssid-and-password-for-softap) in [Advanced usage](advancedusage.md).
## <i class="fa fa-question-circle"></i> How change HTTP port?
HTTP port number is defined as a macro in [AutoConnectDefs.h](https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h#L112) header file. You can change it directly with several editors and must re-compile.
```cpp
#define AUTOCONNECT_HTTPPORT 80
```
## <i class="fa fa-question-circle"></i> Hang up after Reset?
@ -114,6 +99,22 @@ The correct boot mode for starting the sketch is **(3, x)**.
| rst cause | 1: power on<br>2: external reset<br>4: hardware watchdog reset |
| boot mode<br>(the first parameter) | 1: ESP8266 is in UART-down mode (and downloads firmware into flash).<br>3: ESP8266 is in Flash-boot mode (and boots up from flash). |
## <i class="fa fa-question-circle"></i> How can I detect the captive portal starting?
You can use the [AutoConnect::onDetect](api.md#ondetect) exit routine. For more details and an implementation example of the onDetect exit routine, refer to the chapter "[Captive portal start detection](advancedusage.md#captive-portal-start-detection)".
## <i class="fa fa-question-circle"></i> How change HTTP port?
HTTP port number is defined as a macro in [AutoConnectDefs.h](https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h#L112) header file. You can change it directly with several editors and must re-compile.
```cpp
#define AUTOCONNECT_HTTPPORT 80
```
## <i class="fa fa-question-circle"></i> How change SSID or Password in Captive portal?
You can change both by using [AutoConnectConfig::apid](apiconfig.md#apid) and [AutoConnectConfig::psk](apiconfig.md#psk). Refer to section [Change SSID and Password for SoftAP](advancedusage.md#change-ssid-and-password-for-softap) in [Advanced usage](advancedusage.md).
## <i class="fa fa-question-circle"></i> How erase the credentials saved in EEPROM?
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](credit.md#saved-credential-in-eeprom)' on section [Appendix](credit.md) for details.

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

@ -0,0 +1,524 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="102.55424mm"
height="71.655258mm"
viewBox="0 0 102.55424 71.655259"
version="1.1"
id="svg8"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
sodipodi:docname="global.svg">
<defs
id="defs2">
<marker
inkscape:isstock="true"
style="overflow:visible"
id="marker2572"
refX="0"
refY="0"
orient="auto"
inkscape:stockid="TriangleOutS">
<path
transform="scale(0.2)"
style="fill:#3366cc;fill-opacity:1;fill-rule:evenodd;stroke:#3366cc;stroke-width:1.00000003pt;stroke-opacity:1"
d="M 5.77,0 -2.88,5 V -5 Z"
id="path2570"
inkscape:connector-curvature="0" />
</marker>
<marker
inkscape:stockid="TriangleOutM"
orient="auto"
refY="0"
refX="0"
id="TriangleOutM"
style="overflow:visible"
inkscape:isstock="true">
<path
id="path1800"
d="M 5.77,0 -2.88,5 V -5 Z"
style="fill:#3366cc;fill-opacity:1;fill-rule:evenodd;stroke:#3366cc;stroke-width:1.00000003pt;stroke-opacity:1"
transform="scale(0.4)"
inkscape:connector-curvature="0" />
</marker>
<marker
inkscape:stockid="TriangleOutS"
orient="auto"
refY="0"
refX="0"
id="TriangleOutS"
style="overflow:visible"
inkscape:isstock="true"
inkscape:collect="always">
<path
id="path1803"
d="M 5.77,0 -2.88,5 V -5 Z"
style="fill:#af0000;fill-opacity:1;fill-rule:evenodd;stroke:#af0000;stroke-width:1.00000003pt;stroke-opacity:1"
transform="scale(0.2)"
inkscape:connector-curvature="0" />
</marker>
<marker
inkscape:stockid="Arrow2Mend"
orient="auto"
refY="0"
refX="0"
id="marker1939"
style="overflow:visible"
inkscape:isstock="true">
<path
id="path1937"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
transform="scale(-0.6)"
inkscape:connector-curvature="0" />
</marker>
<marker
inkscape:stockid="Arrow2Mend"
orient="auto"
refY="0"
refX="0"
id="Arrow2Mend"
style="overflow:visible"
inkscape:isstock="true">
<path
id="path1682"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
transform="scale(-0.6)"
inkscape:connector-curvature="0" />
</marker>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4142136"
inkscape:cx="208.76665"
inkscape:cy="161.50278"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1440"
inkscape:window-height="837"
inkscape:window-x="1576"
inkscape:window-y="137"
inkscape:window-maximized="0"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="レイヤー 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-23.157626,-20.551944)">
<path
style="fill:none;stroke:#3366cc;stroke-width:1.06500006;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.06499997, 1.06499997;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker2572)"
d="m 52.325266,81.310952 22.794264,0 -0.463021,-58.480845 2.640127,0"
id="path1653"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
<path
d="m 78.030534,20.565173 v 40.538383 m 2.768744,-40.538383 v 40.538383 m 2.768743,-40.538383 v 40.538383 m 2.768742,-40.538383 v 40.538383 m 2.768742,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76875,-40.538383 v 40.538383 m 2.768739,-40.538383 v 40.538383 m 2.768746,-40.538383 v 40.538383 m 2.76875,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76875,-40.538383 v 40.538383 m 2.76874,-40.538383 v 40.538383 m 2.76874,-40.538383 V 61.103556 M 78.030534,20.565173 H 125.71186 M 78.030534,23.333921 H 125.71186 M 78.030534,26.10267 h 47.681326 m -47.681326,2.76875 h 47.681326 m -47.681326,2.768749 h 47.681326 m -47.681326,2.76875 h 47.681326 m -47.681326,2.768749 h 47.681326 m -47.681326,2.76875 h 47.681326 m -47.681326,2.768749 h 47.681326 m -47.681326,2.76875 h 47.681326 m -47.681326,2.768747 h 47.681326 m -47.681326,2.768751 h 47.681326 m -47.681326,2.768751 h 47.681326 m -47.681326,2.768748 h 47.681326 m -47.681326,2.768748 h 47.681326"
style="fill:none;stroke:#000000;stroke-width:0.0264583px"
id="path1308-0"
inkscape:connector-curvature="0" />
<path
d="m 23.170855,20.565173 v 40.538384 m 2.768744,-40.538384 v 40.538384 m 2.768743,-40.538384 v 40.538384 m 2.768742,-40.538384 v 40.538384 m 2.768742,-40.538384 v 40.538384 m 2.76874,-40.538384 v 40.538384 m 2.76875,-40.538384 v 40.538384 m 2.768739,-40.538384 v 40.538384 m 2.76874,-40.538384 v 40.538384 m 2.76875,-40.538384 v 40.538384 m 2.76874,-40.538384 v 40.538384 m 2.76874,-40.538384 v 40.538384 m 2.76875,-40.538384 v 40.538384 m 2.768739,-40.538384 v 40.538384 m 2.76874,-40.538384 v 40.538384 m 2.76875,-40.538384 v 40.538384 m 2.76874,-40.538384 V 61.103557 M 70.239483,20.565173 V 61.103557 M 23.170855,20.565173 H 70.852182 M 23.170855,23.333922 H 70.852182 M 23.170855,26.102671 H 70.852182 M 23.170855,28.87142 h 47.681327 m -47.681327,2.76875 h 47.681327 m -47.681327,2.76875 h 47.681327 m -47.681327,2.768749 h 47.681327 m -47.681327,2.76875 h 47.681327 m -47.681327,2.768749 h 47.681327 m -47.681327,2.768749 h 47.681327 m -47.681327,2.768749 h 47.681327 m -47.681327,2.76875 h 47.681327 m -47.681327,2.76875 h 47.681327 m -47.681327,2.768749 h 47.681327 m -47.681327,2.768749 h 47.681327"
style="fill:none;stroke:#000000;stroke-width:0.0264583px"
id="path1308"
inkscape:connector-curvature="0" />
<g
id="g3173">
<g
transform="translate(-7.77956,-44.325031)"
id="g2826">
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.93888855px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="39.723991"
y="119.13956"
id="text949-6"><tspan
sodipodi:role="line"
id="tspan947-1"
x="39.723991"
y="119.13956"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332">Input</tspan></text>
<rect
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
id="rect971"
width="15.478125"
height="3.4395833"
x="48.869949"
y="116.46737"
rx="0.75240988"
ry="0.67219442" />
</g>
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
transform="matrix(0.05237375,0,0,0.04755636,28.780412,65.508778)"
id="g1153">
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1097">
<path
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
inkscape:connector-curvature="0"
d="M 578.766,51.487 V 50.592 H 575.77 35.93 32.934 v 0.895 C 15.272,52.701 2.095,66.753 0,83.808 v 3.002 355.724 c 0,6.898 1.795,12.712 4.791,17.949 6.893,12.137 17.068,18.269 31.14,18.269 h 197.012 v 49.695 h -37.425 c -9.281,0 -16.467,7.218 -16.467,16.48 0,9.262 7.186,16.479 16.467,16.479 h 220.666 c 9.281,0 16.768,-7.218 16.768,-16.479 0,-9.263 -7.486,-16.48 -16.768,-16.48 H 378.759 V 478.752 H 575.77 c 14.078,0 24.343,-6.132 31.14,-18.269 3.085,-5.493 5.091,-11.37 5.091,-17.949 V 86.811 83.809 C 609.905,66.753 595.833,52.701 578.766,51.487 Z m 0,35.324 v 355.724 c 0,2.108 -0.895,3.002 -2.996,3.002 H 35.93 c -2.095,0 -2.996,-0.894 -2.996,-3.002 V 86.811 83.809 h 545.831 v 3.002 z"
id="path1095" />
</g>
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1099" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1101" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1103" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1105" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1107" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1109" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1111" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1113" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1115" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1117" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1119" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1121" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1123" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1125" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1127" />
</g>
<g
id="g3143">
<rect
style="opacity:1;vector-effect:none;fill:#007000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
id="rect977"
width="14.163605"
height="4.2002602"
x="37.347015"
y="79.170319"
rx="0.75240886"
ry="0.67219514" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="41.77549"
y="82.452538"
id="text975"><tspan
sodipodi:role="line"
id="tspan973"
x="41.77549"
y="82.452538"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f4f4f4;fill-opacity:1;stroke-width:0.26458332">OK</tspan></text>
</g>
<text
id="text949-6-9"
y="74.906998"
x="44.31398"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.93888855px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
xml:space="preserve"><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332"
y="74.906998"
x="44.31398"
id="tspan947-1-9"
sodipodi:role="line">Value</tspan></text>
</g>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="24.222574"
y="23.870647"
id="text1881"><tspan
sodipodi:role="line"
id="tspan1879"
x="24.222574"
y="23.870647"
style="stroke-width:0.26458332">&quot;uri&quot;: &quot;/input&quot;,</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="27.839397"
style="stroke-width:0.26458332"
id="tspan1302">&quot;element&quot;: [</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="31.808147"
style="stroke-width:0.26458332"
id="tspan1300"> { &quot;name&quot;: &quot;<tspan
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3366cc"
id="tspan1628">Input</tspan>&quot;,</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="35.776897"
style="stroke-width:0.26458332"
id="tspan1254"> &quot;type&quot;: &quot;ACInput&quot;,</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="39.745647"
style="stroke-width:0.26458332"
id="tspan1256"> &quot;pattern&quot;: &quot;<tspan
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
id="tspan1640">^[0-9]{3}$</tspan>&quot;,</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="43.714397"
style="stroke-width:0.26458332"
id="tspan1258"> &quot;<tspan
style="fill:#00cc00;fill-opacity:1"
id="tspan1600">global</tspan>&quot;: <tspan
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#cb0000;fill-opacity:1"
id="tspan1604">true</tspan> },</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="47.683147"
style="stroke-width:0.26458332"
id="tspan1266"> { &quot;name&quot;: &quot;OK&quot;,</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="51.651897"
style="stroke-width:0.26458332"
id="tspan1262"> &quot;type&quot;: &quot;ACSubmit&quot;,</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="55.620647"
style="stroke-width:0.26458332"
id="tspan1264"> &quot;uri&quot;: &quot;/check&quot; }</tspan><tspan
sodipodi:role="line"
x="24.222574"
y="59.589397"
style="stroke-width:0.26458332"
id="tspan1306">]</tspan></text>
<rect
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:none;stroke-width:2.64583325;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.55;paint-order:stroke markers fill"
id="rect1268"
width="52.250557"
height="39.618565"
x="45.316185"
y="76.466698"
rx="0"
ry="0" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="91.673447"
y="126.74931"
id="text1284"><tspan
sodipodi:role="line"
id="tspan1282"
x="91.673447"
y="131.89891"
style="stroke-width:0.26458332" /></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="79.425377"
y="23.870647"
id="text1881-0"><tspan
sodipodi:role="line"
id="tspan1879-8"
x="79.425377"
y="23.870647"
style="stroke-width:0.26458332">&quot;uri&quot;: &quot;/check&quot;,</tspan><tspan
sodipodi:role="line"
x="79.425377"
y="27.839397"
style="stroke-width:0.26458332"
id="tspan1302-2">&quot;element&quot;: [</tspan><tspan
sodipodi:role="line"
x="79.425377"
y="31.808147"
style="stroke-width:0.26458332"
id="tspan1300-2"> { &quot;name&quot;: &quot;<tspan
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#3366cc"
id="tspan1632">Input</tspan>&quot;,</tspan><tspan
sodipodi:role="line"
x="79.425377"
y="35.776897"
style="stroke-width:0.26458332"
id="tspan1254-8"> &quot;type&quot;: &quot;ACText&quot;,</tspan><tspan
sodipodi:role="line"
x="79.425377"
y="39.745647"
style="stroke-width:0.26458332"
id="tspan1258-7"> &quot;<tspan
style="fill:#00cc00"
id="tspan1622">global</tspan>&quot;: <tspan
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#cc0000"
id="tspan1618">true</tspan> }</tspan><tspan
sodipodi:role="line"
x="79.425377"
y="43.714397"
style="stroke-width:0.26458332"
id="tspan1306-6">]</tspan></text>
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1099-9"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1101-7"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1103-7"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1105-9"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1107-3"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1109-4"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1111-8"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1113-2"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1115-2"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1117-0"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1119-2"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1121-9"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1123-3"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1125-5"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
style="fill:#565656;fill-opacity:1;stroke-width:1.17960072"
id="g1127-1"
transform="matrix(0.05237375,0,0,0.04755636,77.729712,90.95425)" />
<g
id="g3178">
<path
style="fill:#565656;fill-opacity:1;stroke-width:0.05887029"
inkscape:connector-curvature="0"
d="m 116.15034,67.957308 v -0.04256 h -0.15691 -28.273451 -0.156912 v 0.04256 c -0.925025,0.05773 -1.615154,0.725996 -1.724877,1.537069 v 0.142765 16.916887 c 0,0.328037 0.09401,0.604527 0.250923,0.853584 0.361012,0.577187 0.893915,0.868797 1.630918,0.868797 h 10.318257 v 2.363305 h -1.960087 c -0.486081,0 -0.862439,0.34326 -0.862439,0.783717 0,0.440467 0.376358,0.783684 0.862439,0.783684 h 11.557109 c 0.48608,0 0.8782,-0.343267 0.8782,-0.783684 0,-0.440507 -0.39207,-0.783717 -0.8782,-0.783717 h -1.96009 V 88.27641 h 10.31821 c 0.73731,0 1.27493,-0.29161 1.63091,-0.868797 0.16158,-0.261227 0.26664,-0.540717 0.26664,-0.853584 v -16.91684 -0.142764 c -0.10978,-0.811121 -0.84678,-1.479383 -1.74064,-1.537117 z m 0,1.679881 v 16.91688 c 0,0.10025 -0.0469,0.14277 -0.15691,0.14277 H 87.719979 c -0.109723,0 -0.156912,-0.0425 -0.156912,-0.14277 v -16.91688 -0.142764 h 28.587223 v 0.142764 z"
id="path1095-7" />
<text
id="text949-6-9-5"
y="78.081978"
x="97.494308"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.93888855px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
xml:space="preserve"><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332"
y="78.081978"
x="97.494308"
id="tspan947-1-9-1"
sodipodi:role="line">Value</tspan></text>
</g>
<path
id="path1642-3-4"
d="m 102.25703,66.986603 3.87824,-3.878241 c 0.34627,-0.346269 0.10388,-0.946472 -0.39244,-0.946472 h -2.21614 v -3.139532 c 0,-0.30703 -0.247,-0.55404 -0.55403,-0.55404 h -2.21614 c -0.30703,0 -0.55403,0.24701 -0.55403,0.55404 v 3.139532 h -2.216154 c -0.49631,0 -0.73871,0.600203 -0.39244,0.946472 l 3.878254,3.878241 c 0.21699,0.214688 0.56788,0.214688 0.78488,0 z"
inkscape:connector-curvature="0"
style="fill:#bfbfbf;fill-opacity:1;stroke-width:0.26458332"
sodipodi:nodetypes="csscsssscsscc" />
<path
style="fill:none;stroke:#af0000;stroke-width:0.76499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#TriangleOutS)"
d="M 58.486302,30.696873 H 80.036457"
id="path2304"
inkscape:connector-curvature="0" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#003399;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="-68.695595"
y="73.504295"
id="text1881-9"
transform="rotate(-90)"><tspan
sodipodi:role="line"
id="tspan1879-2"
x="-68.695595"
y="73.504295"
style="fill:#003399;stroke-width:0.26458332">Page transition</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.17499995px;line-height:0.69999999;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#cc0000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="58.435188"
y="26.984177"
id="text1881-5"><tspan
sodipodi:role="line"
id="tspan1879-83"
x="58.435188"
y="26.984177"
style="line-height:0.69999999;fill:#cc0000;stroke-width:0.26458332">Automatic</tspan><tspan
sodipodi:role="line"
x="58.435188"
y="29.206676"
style="line-height:0.69999999;fill:#cc0000;stroke-width:0.26458332"
id="tspan2710">copy</tspan></text>
<path
id="path1642-3-4-0"
d="m 45.018635,66.986603 3.878219,-3.878241 c 0.346267,-0.346269 0.10388,-0.946472 -0.392437,-0.946472 h -2.216128 v -3.139532 c 0,-0.30703 -0.247,-0.55404 -0.554027,-0.55404 h -2.216128 c -0.307027,0 -0.554027,0.24701 -0.554027,0.55404 v 3.139532 h -2.21615 c -0.49631,0 -0.73871,0.600203 -0.39244,0.946472 l 3.878244,3.878241 c 0.216987,0.214688 0.567877,0.214688 0.784874,0 z"
inkscape:connector-curvature="0"
style="fill:#bfbfbf;fill-opacity:1;stroke-width:0.26458332"
sodipodi:nodetypes="csscsssscsscc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 228 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 217 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 775 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 204 KiB

@ -19,7 +19,7 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Store the established connection
<span class="lead">The connection authentication data as credentials are saved automatically in EEPROM of ESP8266/ESP32 and You can select the past SSID from the [AutoConnect menu](menu.md).</span>
<span class="lead">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](menu.md).</span>
### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Easy to embed in
@ -39,6 +39,12 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
<span style="float:left;width:242px;height:425px;border:1px solid lightgrey;"><img data-gifffer="images/aux_ov.gif" data-gifffer-width="240" data-gifffer-height="423" /></span>
</div>
### <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Quick and easy to equip the [OTA update feature](otaupdate.md) <sup><sub>ENHANCED w/v1.0.0</sub></sup>
<span class="lead">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.</span>
<span style="display:block;margin-left:auto;margin-right:auto;width:282px;height:362px;border:1px solid lightgrey;"><img data-gifffer="images/webupdate.gif" data-gifffer-height="360" data-gifffer-width="280" /></span>
## Installation
### Requirements
@ -82,6 +88,9 @@ Install third-party platform using the *Boards Manager* of Arduino IDE. Package
Also, to apply AutoConnect to ESP32, the [arduino-esp32 core](https://github.com/espressif/arduino-esp32) provided by Espressif is needed. Stable 1.0.1 or required and the [latest release](https://github.com/espressif/arduino-esp32/releases/latest) 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.
!!! info "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.
<i class="fa fa-download"></i> <strong>Additional library (Required)</strong>
The [PageBuilder](https://github.com/Hieromon/PageBuilder) library to build HTML for ESP8266WebServer is needed.

@ -15,7 +15,7 @@ The AutoConnect menu appears when you access the **AutoConnect root path**. It i
Currently, AutoConnect supports four menus. Undermost menu as "HOME" returns to the home path of its sketch.
- **Configure new AP**: Configure SSID and Password for new access point.
- **Open SSIDs**: Opens the past SSID which has been established connection from EEPROM.
- **Open SSIDs**: Opens the past SSID which has been established connection from the flash.
- **Disconnect**: Disconnects current connection.
- **Reset...**: Rest the ESP8266/ESP32 module.
- **HOME**: Return to user home page.
@ -31,7 +31,7 @@ Enter SSID and Passphrase and tap "**apply**" to starts WiFi connection.
## <i class="fa fa-bars"></i> Open SSIDs
Once it was established WiFi connection, its SSID and password will be saved in EEPROM of ESP8266/ESP32 automatically. The **Open SSIDs** menu reads the saved SSID credentials from the EEPROM. The stored credential data are listed by the SSID as shown below. Its label is a clickable button. Tap the SSID button, starts WiFi connection it.
Once it was established WiFi connection, its SSID and password will be saved in the flash of ESP8266/ESP32 automatically. The **Open SSIDs** menu reads the saved SSID credentials from the flash. The stored credential data are listed by the SSID as shown below. Its label is a clickable button. Tap the SSID button, starts WiFi connection it.
<img src="images/open.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" />

@ -0,0 +1,111 @@
## Updates with the Web Browser
You can implement the user sketch as described in the [ESP8266 Arduino Core documentation](https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#implementation-overview) to realize using the web browser as an update client. By incorporating the ESP8266HTTPUpdateServer class into AutoConnect, you can operate the dialog page for selecting the updating binary sketch file owned by ESP8266HTTPUpdateServer from the AutoConnect menu.
Update feature with a web browser is implemented using ESP8266HTTPUpdateServer class and ESP8266mDNS class. However, **ESP32 Arduino core does not provide a class implementation equivalent to ESP8266HTTPUpdateServer**. Therefore, it is necessary to implement an HTTPUpdateServer class for ESP32 to realize the update using a Web browser. **The AutoConnect library includes an implementation of the HTTPUpdateServer class for ESP32 to make it easy for you to experience**. [^1]
[^1]: You can find the implementation of the **HTTPUpdateServer** class in the **WebUpdate** folder included in the **AutoConnect library examples folder**.
<img src="images/webupdate.png" width="480" />
!!! warning "For the client devices equipped with Android OS"
Depending on the state of Android OS configuration, Bonjour service may not be incorporated. This method does not work with some Android devices as the client.
### <i class="fa fa-edit"></i> How to embed ESP8266HTTPUpdateServer in AutoConnect
To embed the ESP8266HTTPUpdateServer class with AutoConnect into your sketch, basically follow these steps:
1. Include `ESP8266mDNS.h` and `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)
3. Declare an ESP8266HTTPUpdateServer object.
4. Declare an AutoConnect object with an ESP8266WebServer object as an argument.
5. Declare an AutoConnectAux object for the update operation page.
6. Assign `/update` to the URI of the update dialog page.
7. Assign any title as the AutoConnect menu for the update dialog page.
8. Declare additional AutoConnectAux pages for your application intention if needed.
9. Perform the following procedure steps in the `setup()` function:
1. Invokes `ESP8288HTTPUpdateServer::setup` function, specifies the **USERNAME** and the **PASSWORD** as needed.
2. Load the AutoConnectAux pages declared in step #8 for your application. (Except the update dialog page)
3. Join these pages to AutoConnect along with the update dialog page declared in step #5.
4. Invokes [AutoConnect::begin](api.md#begin) function.
5. Call the `MDNS.begin` and `MDNS.addServer` functions to start the multi cast DNS service.
10. Perform the following procedure steps in the `loop()` function:
1. Call the `MDNS.update` function to parse requests for mDNS. (No needed as ESP32)
2. Invokes [AutoConnect::handleClient](api.md#handleclient) function.
```cpp
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266HTTPUpdateServer.h> // Step #1
#include <ESP8266mDNS.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
if (portal.begin()) { // Step #9.d
if (MDNS.begin("esp-webupdate")) // Step #9.e
MDNS.addService("http", "tcp", 80); // Step #9.e
}
}
void loop() {
MDNS.update(); // Step #10.a
portal.handleClient(); // Step #10.b
}
```
!!! hint "For ESP32"
This procedure is equally applicable to ESP32. If the target module is ESP32, change the following items:
- Change the include directives appropriately for the ESP32 environment.
- Change ESP8266HTTPUpdaetServer to HTTPUpdateServer using an implementation provided from AutoConnect library example code.
- Remove `MDNS.update` line from the sketch code.
!!! example "Share an ESP8266WebServer"
AutoConnect shares the ESP8266WebServer instance with the ESP8266HTTPUpdateServer class. You can give the same instance as ESP8266WebServer instance given to AutoConnect to ESP8266HTTPUpdateServer class.
```cpp
ESP8266WebServer httpServer;
ESP8266HTTPUpdateServer updateServer;
AutoConnect portal(httpServer);
updateServer(&httpServer);
```
This sharing specification is the same for ESP32.
The result of the above sketch should be as follows. [^2]
[^2]: The authentication dialog is displayed first.
<span style="display:block;margin-left:auto;margin-right:auto;width:282px;height:362px;border:1px solid lightgrey;"><img data-gifffer="images/webupdate.gif" data-gifffer-height="360" data-gifffer-width="280" /></span>
!!! faq "How LED ticking during updates"
You **cannot** get the ticker with LED during updates by using this way. It is since the current implementation of the ESP8266HTTPUpdateServer class of the Arduino core **library does not assign an LED PIN** to the ESP8266HTTPUpdate class.
### <i class="fa fa-wrench"></i> How to make the binary sketch
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.
<img src="images/export_binary.png" width="450" />
When the compilation is complete, a binary sketch will save with the extension `.bin` in the same folder as the sketch.
<script>
window.onload = function() {
Gifffer();
};
</script>

@ -0,0 +1,175 @@
## Updates with the update server
Since the v1.0.0 release, AutoConnect provides new feature for updating sketch firmware of ESP8266 or ESP32 modules via OTA using the [AutoConnectUpdate](apiupdate.md#autoconnectupdate) class that is an implementation of the sketch binary update by the HTTP server mentioned in the [OTA update](https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#http-server) 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.
<img src="images/updateserver.png" width="380" />
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](https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#server-request-handling). There are various implementations of the update server that provide binary sketch files. For example, the ESP8266 Arduino Core documentation suggests an [advanced updater](https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#id5) 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.
### <i class="fa fa-edit"></i> How to embed AutoConnectUpdate to your sketch
To embed the AutoConnectUpdate class into your sketch, basically follow these steps:
1. Declare an ESP8266WebServer object. (In ESP32, as WebServer)
2. Declare an AutoConnect object with an ESP8266WebServer object.
3. Declare an [AutoConnectUpdate](apiupdate.md) object with the update server address and the HTTP port as parameters.
4. Invokes [AutoConnect::begin](api.md#begin) function.
5. Attach the AutoConnectUpdate object to AutoConnect using [AutoConnectUpdate::attach](apiupdate.md#attach) function.
6. Invokes [AutoConnect::handleClient](api.md#handleclient) function in the `loop()`.
```cpp
#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
}
```
<span style="display:block;margin-left:auto;margin-right:auto;width:282px;height:362px;border:1px solid lightgrey;"><img data-gifffer="images/serverupdate.gif" data-gifffer-height="360" data-gifffer-width="280" /></span>
### <i class="fas fa-desktop"></i> Behavior of the AutoConnectUpdate class
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](#2-the-catalog-list-content) of updatable binary sketch files to the [update server](#update-server-for-the-autoconnectupdate-class). 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.
[^1]: You can scroll horizontally on the browser to see the timestamp and file size that the catalog list contains.
<img align="top" src="images/updatemenu.png" width="240" />
<img style="margin-left:30px;" src="images/updatelist.png" width="240" />
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.
<img src="images/updating.png" width="240" />
<img style="margin-left:30px;" src="images/updated.png" width="240" />
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](api.md#handleclient) function in the `loop()`.
### <i class="fas fa-server"></i> Update server for the AutoConnectUpdate class
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.
[^2]: The folders containing the script:
For Python2: *AUTOCONNECT\_LIBRARY\_PATH*/src/updateserver/python2
For Python3: *AUTOCONNECT\_LIBRARY\_PATH*/src/updateserver/python3
```bash
updateserver.py [-h] [--port PORT] [--bind IP_ADDRESS] [--catalog CATALOG] [--log LOG_LEVEL]
```
<dl class="apidl">
<dt></dt>
<dd><span class="apidef">**--help | -h**</span><span class="apidesc">Show help message and exit.</span>
<dd><span class="apidef">**--port | -p**</span><span class="apidesc">Specifies **PORT** number (Default: 8000)</span>
<dd><span class="apidef">**--bind | -b**</span><span class="apidesc">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)</span>
<dd><span class="apidef">**--catalog | -d**</span><span class="apidesc">Specifies the directory path on the update server that contains the binary sketch files. (Default: The current directory)</span>
<dd><span class="apidef">**--log | -l**</span><span class="apidesc">Specifies the level of logging output. It accepts the [Logging Levels](https://docs.python.org/3/library/logging.html?highlight=logging#logging-levels) specified in the Python logging module.</span>
</dl>
!!! example "updateserver.py usage"
1. Python
First, prepare a Python environment. It is also possible with a tiny single-board computer like the [raspberry pi](https://www.raspberrypi.org/). 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](https://wiki.python.org/moin/BeginnersGuide/Download) to install Python in your environment.
2. 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.
3. 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:
```bash
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.
[^3]: 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.
[^4]: The port of the update server and the port used by the AutoConnectUpdate class must be the same.
!!! note "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.
### <i class="far fa-handshake"></i> HTTP contents and the sequence for the AutoConnectUpdate class
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]
[^5]: The **client agent** is an instance of the AutoConnectUpdate class.
[^6]: The client agent will send its URI request to the update server.
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
```
[address]/_catalog?op=list&path=[path]
```
<dl class="apidl">
<dt></dt>
<dd><span class="apidef">**address**</span><span class="apidesc">URL of the update server</span>
<dd><span class="apidef">**/_catalog**</span><span class="apidesc">Request path, it is fixed.</span>
<dd><span class="apidef">**op**</span><span class="apidesc">Operation command for the update server. Currently, only '**list**' occurs.</span>
<dd><span class="apidef">**path**</span><span class="apidesc">Path containing the updatable binary files on the update server.</span>
</dl>
#### 2. The catalog list content
The response (that is, the catalog list) to the above query from the server is the following specification in JSON format.
```js
{
"name" : FILE_NAME,
"type" : FILE_TYPE,
"date" : FILE_TIMESTAMP_DATED,
"time" : FILE_TIMESTAMP_TIMED,
"size" : FILE_SIZE
}
```
<dl class="apidl">
<dt></dt>
<dd><span class="apidef">**name**</span><span class="apidesc">Binary sketch file name for update (String)</span>
<dd><span class="apidef">**type**</span><span class="apidesc">One of '**bin**', '**directory**' or '**file**'. AutoConnect Update recognizes only file types of '**bin**' as update targets. (String)</span>
<dd><span class="apidef">**date**</span><span class="apidesc">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)</span>
<dd><span class="apidef">**time**</span><span class="apidesc">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)</span>
<dd><span class="apidef">**size**</span><span class="apidesc">File byte count (Numeric)</span>
</dl>
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]
[^7]: It should be represented as `Content-Type: application/json` in the HTTP response header.
#### 3. The binary sketch file used for updating
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.
<script>
window.onload = function() {
Gifffer();
};
</script>

@ -0,0 +1,19 @@
## OTA Updates with AutoConnect
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](https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#web-browser) and [HTTP Server Update](https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#http-server) whiches mentioned in the [ESP8266 Arduino Core documentation](https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#ota-updates).
[**The update behavior using a web browser**](otabrowser.md) as the client that supplies the binary sketch file for update follows the scenario assumed by the ESP8266 Arduino core. Therefore, the user sketch must meet the requirements described in the ESP8266 Arduino Core documentation, but you can easily embed the update feature that able to handle with the web browser by AutoConnect. All you need to do is that [join](api.md#join) the [AutoConnectAux](apiaux.md) with embedded **ESP8266HTTPUpdateServer**[^1] of the core library to AutoConnect.
[^1]: 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.
<img src="images/webupdatemodel.png" width="420" />
!!! caution "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**](otaserver.md) 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](otaserver.md#update-server-for-the-autoconnectupdate-class) along with using the [AutoConnectUpdate](apiupdate.md) class in your sketch.
<img src="images/updatemodel.png" width="540" />
!!! info "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.

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save