v1.0.0 deployment

pull/123/head
Hieromon Ikasamo 6 years ago
parent 2f815421b9
commit b1f3b55b46
  1. 4
      docs/404.html
  2. 4
      docs/acelements.html
  3. 155
      docs/achandling.html
  4. 4
      docs/acintro.html
  5. 107
      docs/acjson.html
  6. 8
      docs/acupload.html
  7. 50
      docs/advancedusage.html
  8. 4
      docs/api.html
  9. 27
      docs/apiaux.html
  10. 13
      docs/apiconfig.html
  11. 206
      docs/apielements.html
  12. 4
      docs/apiextra.html
  13. 4
      docs/apiupdate.html
  14. 4
      docs/basicusage.html
  15. 38
      docs/changelog.html
  16. 4
      docs/colorized.html
  17. 97
      docs/credit.html
  18. 4
      docs/datatips.html
  19. 4
      docs/faq.html
  20. 4
      docs/gettingstarted.html
  21. 4
      docs/howtoembed.html
  22. 524
      docs/images/global.svg
  23. BIN
      docs/images/global1.png
  24. BIN
      docs/images/global2.png
  25. 10
      docs/index.html
  26. 4
      docs/license.html
  27. 8
      docs/lsbegin.html
  28. 10
      docs/menu.html
  29. 4
      docs/menuize.html
  30. 46
      docs/otabrowser.html
  31. 16
      docs/otaserver.html
  32. 10
      docs/otaupdate.html
  33. 2
      docs/search/search_index.json
  34. 58
      docs/sitemap.xml
  35. BIN
      docs/sitemap.xml.gz
  36. 4
      docs/wojson.html

@ -644,8 +644,8 @@
<li class="md-nav__item">
<a href="/AutoConnect/credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="/AutoConnect/credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -1263,8 +1263,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -493,6 +493,13 @@
How you can reach the values
</a>
</li>
<li class="md-nav__item">
<a href="#transfer-of-input-values-across-pages" title=" Transfer of input values across pages" class="md-nav__link">
Transfer of input values across pages
</a>
</li>
<li class="md-nav__item">
@ -517,8 +524,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>
@ -850,8 +857,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -1034,6 +1041,13 @@
How you can reach the values
</a>
</li>
<li class="md-nav__item">
<a href="#transfer-of-input-values-across-pages" title=" Transfer of input values across pages" class="md-nav__link">
Transfer of input values across pages
</a>
</li>
<li class="md-nav__item">
@ -1058,8 +1072,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>
@ -1515,12 +1529,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>
@ -1660,9 +1674,72 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<span style="color: #f8f8f2">portal.begin();</span>
</pre></div>
<h3 id="transfer-of-input-values-across-pages"><i class="fa fa-wrench"></i> Transfer of input values across pages<a class="headerlink" href="#transfer-of-input-values-across-pages" title="Permanent link">&para;</a></h3>
<p>Since v1.0.0, AutoConnect supports a new attribute with each element that allows automatic transfer of input values across pages without sketching. AutoConnect will copy the input value of the elements declared as <a href="apielements.html#global_2">global</a> to the same-named global elements on a different custom Web pages at the page transition timing.</p>
<p><img src="images/global.svg"> </p>
<p>The <strong>global</strong> attribute will be useful for echoing input values back to another custom Web pages. This copy operation can be performed between different types. (eg., copy value from AutoConnectInput to AutoConnectText) The following example reflects the input value of PAGE1 to the AutoConnectText field of PAGE2 without sketch code.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">PAGE1[]</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;PAGE1&quot;,</span>
<span style="color: #e6db74"> &quot;uri&quot;: &quot;/page1&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="background-color: #49483e"><span style="color: #e6db74"> &quot;name&quot;: &quot;input1&quot;,</span>
</span><span style="color: #e6db74"> &quot;type&quot;: &quot;ACInput&quot;,</span>
<span style="background-color: #49483e"><span style="color: #e6db74"> &quot;global&quot;: true</span>
</span><span style="color: #e6db74"> },</span>
<span style="color: #e6db74"> {</span>
<span style="color: #e6db74"> &quot;name&quot;: &quot;send&quot;,</span>
<span style="color: #e6db74"> &quot;type&quot;: &quot;ACSubmit&quot;,</span>
<span style="color: #e6db74"> &quot;value&quot;: &quot;OK&quot;,</span>
<span style="color: #e6db74"> &quot;uri&quot;: &quot;/page2&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: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">PAGE2[]</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;PAGE2&quot;,</span>
<span style="color: #e6db74"> &quot;uri&quot;: &quot;/page2&quot;,</span>
<span style="color: #e6db74"> &quot;menu&quot;: false,</span>
<span style="color: #e6db74"> &quot;element&quot;: [</span>
<span style="color: #e6db74"> {</span>
<span style="background-color: #49483e"><span style="color: #e6db74"> &quot;name&quot;: &quot;input1&quot;,</span>
</span><span style="color: #e6db74"> &quot;type&quot;: &quot;ACText&quot;,</span>
<span style="background-color: #49483e"><span style="color: #e6db74"> &quot;global&quot;: true</span>
</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">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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">page1.load(PAGE1);</span>
<span style="color: #f8f8f2">page2.load(PAGE2);</span>
<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">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>
<p><i class="fa fa-arrow-down"></i><br><i class="fa fa-eye"></i> The value entered in <strong>input1 declared in PAGE1</strong> is reflected in <strong>input1 of PAGE2</strong> as an AutoConnectText value even if there is no sketch code to transfer it to PAGE2. It's shown as like:<br>
<span style="width:300px;height:159px"><img align="top" width="300" height="159" src="images/global1.png"></span>
<span style="margin-left:7px;"><img width="20" src="images/arrow_right.png"></span>
<span style="margin-left:7px;width:300px;height:159px"><img width="300" height="159" src="images/global2.png"></span></p>
<div class="admonition note">
<p class="admonition-title">Copy only for same-named and the global</p>
<p>The input value will be copied only if the global attribute of the destination element is true. If an element with the same name is declared non-global, the value is not copied.</p>
</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 class assume that the implementation of the ReqestHandler class contained in the WebServer library will handle the URL requests. Usually, it is sketch code registered by ESP8266WebServer::on function.</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">AutoConnectAux::fetchElement</a> function for value processing with the on-page handler.</p>
<p>When a page transition from a custom Web page created by AutoConnectAux to a handler registered with ESP2866WebServer::on function, a little trick is needed to retrieve the values of AutoConnectElements. (i.e. the URI of the ESP8266WebServer::on handler is specified in the <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 coded with the sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the <a href="apiaux.html#fetchelement">AutoConnectAux::fetchElement</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>
@ -1745,7 +1822,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>
@ -1761,15 +1838,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>

@ -728,8 +728,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -559,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
@ -905,8 +912,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -1167,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
@ -1332,6 +1346,7 @@
<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><span style="color: #f8f8f2">{</span>
@ -1522,7 +1537,7 @@
<dl>
<dd>
<ul>
<li><strong>value</strong> : Specifies the cuscom CSS code.</li>
<li><strong>value</strong> : Specifies the custom CSS code.</li>
</ul>
</dd>
</dl>
@ -1562,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>

@ -652,8 +652,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -1318,7 +1318,7 @@
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid">
<a href="credit.html" title="Saved credentail access" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<a href="credit.html" title="Saved credentails access" 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>
@ -1327,7 +1327,7 @@
<span class="md-footer-nav__direction">
Previous
</span>
Saved credentail access
Saved credentails access
</span>
</div>
</a>

@ -878,8 +878,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -1191,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>
@ -1203,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>
@ -1218,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>
@ -1428,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>

@ -837,8 +837,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -574,6 +574,13 @@
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">
@ -817,8 +824,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -974,6 +981,13 @@
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">
@ -1138,6 +1152,15 @@ Returns whether embedded in the menu or not. The isMenu is a function that compl
<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>

@ -908,8 +908,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -1273,10 +1273,10 @@
<p>Sets IP address for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">IPAddress</span><span class="apidesc">The default value is <strong>192.168.244.1</strong></span></dd>
<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>
@ -1328,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>
@ -1365,7 +1366,7 @@ The default value is 0.
<p>Sets gateway address for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">IPAddress</span><span class="apidesc">The default value is <strong>192.168.244.1</strong></span></dd>
<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="hidden"><i class="fa fa-caret-right"></i> hidden<a class="headerlink" href="#hidden" title="Permanent link">&para;</a></h3>
<p>Sets SoftAP to hidden SSID.

@ -565,6 +565,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -653,6 +660,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_1" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -741,6 +755,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_2" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -829,6 +850,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_3" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -938,6 +966,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_4" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -1054,6 +1089,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_5" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -1191,6 +1233,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_6" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -1402,6 +1451,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_7" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -1706,8 +1762,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -1830,6 +1886,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -1918,6 +1981,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_1" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -2006,6 +2076,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_2" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -2094,6 +2171,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_3" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -2203,6 +2287,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_4" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -2319,6 +2410,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_5" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -2456,6 +2554,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_6" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -2667,6 +2772,13 @@
enable
</a>
</li>
<li class="md-nav__item">
<a href="#global_7" title=" global" class="md-nav__link">
global
</a>
</li>
<li class="md-nav__item">
@ -2860,10 +2972,16 @@
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="enable"><i class="fa fa-caret-right"></i> enable<a class="headerlink" href="#enable" title="Permanent link">&para;</a></h4>
<p>Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<p>Enable HTML tag generation for the element.
<dl class="apidl">
<dt><strong>Type</strong></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></p>
<h4 id="global"><i class="fa fa-caret-right"></i> global<a class="headerlink" href="#global" title="Permanent link">&para;</a></h4>
<p>The global attribute copies input values between elements of the same name on different custom Web pages.
<dl class="apidl">
<dt><strong>Type</strong></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></p>
<h4 id="name"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name" title="Permanent link">&para;</a></h4>
<p>The element name.
@ -2915,13 +3033,19 @@ Returns type of AutoConnectElement.
<p>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><strong>Type</strong></dt>
<dd><span class="apidef">Boolean</span><span class="apidesc"></span></dd>
<dd><span class="apidef">bool</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="enable_1"><i class="fa fa-caret-right"></i> enable<a class="headerlink" href="#enable_1" title="Permanent link">&para;</a></h4>
<p>Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<p>Enable HTML tag generation for the element.
<dl class="apidl">
<dt><strong>Type</strong></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></p>
<h4 id="global_1"><i class="fa fa-caret-right"></i> global<a class="headerlink" href="#global_1" title="Permanent link">&para;</a></h4>
<p>The global attribute copies input values between elements of the same name on different custom Web pages.
<dl class="apidl">
<dt><strong>Type</strong></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></p>
<h4 id="label"><i class="fa fa-caret-right"></i> label<a class="headerlink" href="#label" title="Permanent link">&para;</a></h4>
<p>A label is an optional string. A label is always arranged on the right side of the checkbox. Specification of a label will generate an HTML <code class="codehilite"><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">label</span><span style="color: #f8f8f2">&gt;</span></code> tag with an <code>id</code> attribute. The checkbox and the label are connected by the id attribute.
@ -2974,10 +3098,16 @@ Returns type of AutoConnectElement.
</dl></p>
<h3 id="public-member-variables_2"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables_2" title="Permanent link">&para;</a></h3>
<h4 id="enable_2"><i class="fa fa-caret-right"></i> enable<a class="headerlink" href="#enable_2" title="Permanent link">&para;</a></h4>
<p>Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<p>Enable HTML tag generation for the element.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<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></p>
<h4 id="global_2"><i class="fa fa-caret-right"></i> global<a class="headerlink" href="#global_2" title="Permanent link">&para;</a></h4>
<p>The global attribute copies input values between elements of the same name on different custom Web pages.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">boolean</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></p>
<h4 id="name_2"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name_2" title="Permanent link">&para;</a></h4>
<p>The element name.
@ -3036,10 +3166,16 @@ Casts the reference to the AutoConnectElement the specified type.
</dl></p>
<h3 id="public-member-variables_3"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables_3" title="Permanent link">&para;</a></h3>
<h4 id="enable_3"><i class="fa fa-caret-right"></i> enable<a class="headerlink" href="#enable_3" title="Permanent link">&para;</a></h4>
<p>Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<p>Enable HTML tag generation for the element.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<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></p>
<h4 id="global_3"><i class="fa fa-caret-right"></i> global<a class="headerlink" href="#global_3" title="Permanent link">&para;</a></h4>
<p>The global attribute copies input values between elements of the same name on different custom Web pages.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">boolean</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></p>
<h4 id="label_1"><i class="fa fa-caret-right"></i> label<a class="headerlink" href="#label_1" title="Permanent link">&para;</a></h4>
<p>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 <code class="codehilite"><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">label</span><span style="color: #f8f8f2">&gt;</span></code> tag with an id attribute. The file input box and the label are connected by the id attribute.
@ -3119,10 +3255,16 @@ Returns type of AutoConnectFile.
</dl></p>
<h3 id="public-member-variables_4"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables_4" title="Permanent link">&para;</a></h3>
<h4 id="enable_4"><i class="fa fa-caret-right"></i> enable<a class="headerlink" href="#enable_4" title="Permanent link">&para;</a></h4>
<p>Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<p>Enable HTML tag generation for the element.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<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></p>
<h4 id="global_4"><i class="fa fa-caret-right"></i> global<a class="headerlink" href="#global_4" title="Permanent link">&para;</a></h4>
<p>The global attribute copies input values between elements of the same name on different custom Web pages.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">boolean</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></p>
<h4 id="label_2"><i class="fa fa-caret-right"></i> label<a class="headerlink" href="#label_2" title="Permanent link">&para;</a></h4>
<p>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 <code class="codehilite"><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">label</span><span style="color: #f8f8f2">&gt;</span></code> tag with an id attribute. The input box and the label are connected by the id attribute.
@ -3205,10 +3347,16 @@ Returns type of AutoConnectElement.
<dd><span class="apidef">uint8_t</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="enable_5"><i class="fa fa-caret-right"></i> enable<a class="headerlink" href="#enable_5" title="Permanent link">&para;</a></h4>
<p>Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<p>Enable HTML tag generation for the element.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<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></p>
<h4 id="global_5"><i class="fa fa-caret-right"></i> global<a class="headerlink" href="#global_5" title="Permanent link">&para;</a></h4>
<p>The global attribute copies input values between elements of the same name on different custom Web pages.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">boolean</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></p>
<h4 id="label_3"><i class="fa fa-caret-right"></i> label<a class="headerlink" href="#label_3" title="Permanent link">&para;</a></h4>
<p>A label is an optional string. A label will be arranged in the left or top of the radio buttons according to the <a href="#order">order</a>.
@ -3325,10 +3473,16 @@ Returns current checked option of the radio buttons.
</dl></p>
<h3 id="public-member-variables_6"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables_6" title="Permanent link">&para;</a></h3>
<h4 id="enable_6"><i class="fa fa-caret-right"></i> enable<a class="headerlink" href="#enable_6" title="Permanent link">&para;</a></h4>
<p>Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<p>Enable HTML tag generation for the element.
<dl class="apidl">
<dt><strong>Type</strong></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></p>
<h4 id="global_6"><i class="fa fa-caret-right"></i> global<a class="headerlink" href="#global_6" title="Permanent link">&para;</a></h4>
<p>The global attribute copies input values between elements of the same name on different custom Web pages.
<dl class="apidl">
<dt><strong>Type</strong></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></p>
<h4 id="name_6"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name_6" title="Permanent link">&para;</a></h4>
<p>The element name.
@ -3437,10 +3591,10 @@ Returns current selected option of the select list.
</dl></p>
<h3 id="public-member-variables_7"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables_7" title="Permanent link">&para;</a></h3>
<h4 id="enable_7"><i class="fa fa-caret-right"></i> enable<a class="headerlink" href="#enable_7" title="Permanent link">&para;</a></h4>
<p>Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<p>Enable HTML tag generation for the element.
<dl class="apidl">
<dt><strong>Type</strong></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></p>
<h4 id="name_7"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name_7" title="Permanent link">&para;</a></h4>
<p>The element name.
@ -3476,10 +3630,16 @@ Returns type of AutoConnectElement.
</dl></p>
<h3 id="public-member-variables_8"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables_8" title="Permanent link">&para;</a></h3>
<h4 id="enable_8"><i class="fa fa-caret-right"></i> enable<a class="headerlink" href="#enable_8" title="Permanent link">&para;</a></h4>
<p>Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<p>Enable HTML tag generation for the element.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<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></p>
<h4 id="global_7"><i class="fa fa-caret-right"></i> global<a class="headerlink" href="#global_7" title="Permanent link">&para;</a></h4>
<p>The global attribute copies input values between elements of the same name on different custom Web pages.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">boolean</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></p>
<h4 id="name_8"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name_8" title="Permanent link">&para;</a></h4>
<p>The element name.
@ -3534,10 +3694,10 @@ Returns type of AutoConnectElement.
</dl></p>
<h3 id="public-member-variables_9"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables_9" title="Permanent link">&para;</a></h3>
<h4 id="enable_9"><i class="fa fa-caret-right"></i> enable<a class="headerlink" href="#enable_9" title="Permanent link">&para;</a></h4>
<p>Enable HTML tag generation for the element. AutoConnect will generate the element into HTML only if the enable attribute is true.
<p>Enable HTML tag generation for the element.
<dl class="apidl">
<dt><strong>Type</strong></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></p>
<h4 id="format"><i class="fa fa-caret-right"></i> format<a class="headerlink" href="#format" title="Permanent link">&para;</a></h4>
<p>The conversion format when outputting values. The format string conforms to C-style printf library functions.

@ -686,8 +686,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -802,8 +802,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -779,8 +779,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -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="#100-aug-13-2019" tabindex="1" class="md-skip">
<a href="#100-sept-5-2019" tabindex="1" class="md-skip">
Skip to content
</a>
@ -650,8 +650,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -726,8 +726,15 @@
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#100-aug-13-2019" title="[1.0.0] Aug. 13, 2019" class="md-nav__link">
[1.0.0] Aug. 13, 2019
<a href="#100-sept-5-2019" title="[1.0.0] Sept. 5, 2019" class="md-nav__link">
[1.0.0] Sept. 5, 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
</a>
</li>
@ -851,8 +858,15 @@
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#100-aug-13-2019" title="[1.0.0] Aug. 13, 2019" class="md-nav__link">
[1.0.0] Aug. 13, 2019
<a href="#100-sept-5-2019" title="[1.0.0] Sept. 5, 2019" class="md-nav__link">
[1.0.0] Sept. 5, 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
</a>
</li>
@ -953,9 +967,17 @@
<h1>Change log</h1>
<h4 id="100-aug-13-2019">[1.0.0] Aug. 13, 2019<a class="headerlink" href="#100-aug-13-2019" title="Permanent link">&para;</a></h4>
<h4 id="100-sept-5-2019">[1.0.0] Sept. 5, 2019<a class="headerlink" href="#100-sept-5-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>
<h4 id="0911-july-13-2019">[0.9.11] July 13, 2019<a class="headerlink" href="#0911-july-13-2019" title="Permanent link">&para;</a></h4>
<ul>

@ -652,8 +652,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -42,7 +42,7 @@
<title>Saved credentail access - AutoConnect for ESP8266/ESP32</title>
<title>Saved credentails access - AutoConnect for ESP8266/ESP32</title>
@ -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>
@ -148,7 +148,7 @@
</span>
<span class="md-header-nav__topic">
Saved credentail access
Saved credentails access
</span>
@ -659,11 +659,11 @@
<label class="md-nav__link md-nav__link--active" for="__toc">
Saved credentail access
Saved credentails access
</label>
<a href="credit.html" title="Saved credentail access" class="md-nav__link md-nav__link--active">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link md-nav__link--active">
Saved credentails access
</a>
@ -675,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>
@ -878,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>
@ -1003,10 +1017,37 @@
<h1>Saved credentail access</h1>
<h1>Saved credentails access</h1>
<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>
<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>
<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>
@ -1016,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>
@ -1081,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>
@ -1098,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>
@ -1157,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>

@ -768,8 +768,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -650,8 +650,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -718,8 +718,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -781,8 +781,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -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

@ -790,8 +790,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -1018,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>
@ -1068,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>

@ -646,8 +646,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -686,8 +686,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -854,13 +854,13 @@
</a>
<a href="credit.html" title="Saved credentail access" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
<a href="credit.html" title="Saved credentails access" 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>
Saved credentail access
Saved credentails access
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">

@ -740,8 +740,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -916,7 +916,7 @@
<p>The AutoConnect menu is developed using the <a href="https://github.com/balzss/luxbar">LuxBar</a> which is licensed under the MIT License. See the <a href="license.html">License</a>.</p>
</div>
<h2 id="where-the-from"><i class="fa fa-external-link"></i> Where the from<a class="headerlink" href="#where-the-from" title="Permanent link">&para;</a></h2>
<p>The AutoConnect menu appears when you access the <strong>AutoConnect root path</strong>. It is assigned "<strong>/_ac</strong>" located on the <em>local IP address</em> of ESP8266/ESP32 module by default. This location can be changed in the sketch. The following screen will appear at access to <code>http://{localIP}/_ac</code> as the root path. This is the statistics of the current WiFi connection. You can access the menu from the here, to invoke it tap <i class="fa fa-bars"></i> at right on top. (e.g. <code>http://192.168.244.1/_ac</code> for SoftAP mode.)</p>
<p>The AutoConnect menu appears when you access the <strong>AutoConnect root path</strong>. It is assigned "<strong>/_ac</strong>" located on the <em>local IP address</em> of ESP8266/ESP32 module by default. This location can be changed in the sketch. The following screen will appear at access to <code>http://{localIP}/_ac</code> as the root path. This is the statistics of the current WiFi connection. You can access the menu from the here, to invoke it tap <i class="fa fa-bars"></i> at right on top. (e.g. <code>http://172.217.28.1/_ac</code> for SoftAP mode.)</p>
<p><img src="images/ac.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" /></p>
<div class="admonition note">
<p class="admonition-title">What's the local IP?</p>
@ -926,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>
@ -937,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>

@ -700,8 +700,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

@ -455,8 +455,8 @@
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#how-to-embed-esp8266httpupdateserver-with-autoconnect" title=" How to embed ESP8266HTTPUpdateServer with AutoConnect" class="md-nav__link">
How to embed ESP8266HTTPUpdateServer with AutoConnect
<a href="#how-to-embed-esp8266httpupdateserver-in-autoconnect" title=" How to embed ESP8266HTTPUpdateServer in AutoConnect" class="md-nav__link">
How to embed ESP8266HTTPUpdateServer in AutoConnect
</a>
</li>
@ -706,8 +706,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -804,8 +804,8 @@
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#how-to-embed-esp8266httpupdateserver-with-autoconnect" title=" How to embed ESP8266HTTPUpdateServer with AutoConnect" class="md-nav__link">
How to embed ESP8266HTTPUpdateServer with AutoConnect
<a href="#how-to-embed-esp8266httpupdateserver-in-autoconnect" title=" How to embed ESP8266HTTPUpdateServer in AutoConnect" class="md-nav__link">
How to embed ESP8266HTTPUpdateServer in AutoConnect
</a>
</li>
@ -842,29 +842,30 @@
<h1>Using Web Browser</h1>
<h2 id="updates-with-the-web-browser">Updates with the Web Browser<a class="headerlink" href="#updates-with-the-web-browser" title="Permanent link">&para;</a></h2>
<p>You can implement the user sketch as described in the <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#implementation-overview">ESP8266 Arduino Core documentation</a> to realize using the web browser as an update client. By incorporating the ESP8266HTTPUpdateServer class into AutoConnect, you can operate the page for selecting the update owned by ESP8266HTTPUpdateServer from the AutoConnect menu. Updates with a web browser are implemented using ESP8266HTTPUpdateServer class together with ESP8266WebServer and ESP8266mDNS classes. However, <strong>ESP32 Arduino core does not provide a class implementaion equivalent to ESP8266HTTPUpdateServer</strong>. Therefore, it is necessary to implement HTTPUpdateServer class for ESP32 to realize the update with a Web browser using the ESP32. <strong>The AutoConnect library includes an implementation of the HTTPUpdateServer class for ESP32 to make it easy for you to experience</strong>. <sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup></p>
<p>You can implement the user sketch as described in the <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#implementation-overview">ESP8266 Arduino Core documentation</a> 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. </p>
<p>Update feature with a web browser is implemented using ESP8266HTTPUpdateServer class and ESP8266mDNS class. However, <strong>ESP32 Arduino core does not provide a class implementation equivalent to ESP8266HTTPUpdateServer</strong>. Therefore, it is necessary to implement an HTTPUpdateServer class for ESP32 to realize the update using a Web browser. <strong>The AutoConnect library includes an implementation of the HTTPUpdateServer class for ESP32 to make it easy for you to experience</strong>. <sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup></p>
<p><img src="images/webupdate.png" width="480" /></p>
<div class="admonition warning">
<p class="admonition-title">Client device equipped with Android OS</p>
<p class="admonition-title">For the client devices equipped with Android OS</p>
<p>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.</p>
</div>
<h3 id="how-to-embed-esp8266httpupdateserver-with-autoconnect"><i class="fa fa-edit"></i> How to embed ESP8266HTTPUpdateServer with AutoConnect<a class="headerlink" href="#how-to-embed-esp8266httpupdateserver-with-autoconnect" title="Permanent link">&para;</a></h3>
<p>To embed the ESP8266HTTPUpdateServer class with AutoConnect into your sketch, basically follow these steps:</p>
<h3 id="how-to-embed-esp8266httpupdateserver-in-autoconnect"><i class="fa fa-edit"></i> How to embed ESP8266HTTPUpdateServer in AutoConnect<a class="headerlink" href="#how-to-embed-esp8266httpupdateserver-in-autoconnect" title="Permanent link">&para;</a></h3>
<p>To embed the ESP8266HTTPUpdateServer class with AutoConnect into your sketch, basically follow these steps:</p>
<ol>
<li>Include <code>ESP8266mDNS.h</code> and <code>ESP8266HTTPUpdateServer.h</code> and <code>WiFiClient.h</code> additionally, except the usual include directives as ESP8266WebServer and AutoConnect.</li>
<li>Include <code>ESP8266mDNS.h</code> and <code>ESP8266HTTPUpdateServer.h</code>, also <code>WiFiClient.h</code>, in addition to the usual directives as <code>ESP8266WebServer.h</code> and <code>AutoConnect.h</code>.</li>
<li>Declare an ESP8266WebServer object. (In ESP32, as WebServer)</li>
<li>Declare an ESP8266HTTPUpdateServer object.</li>
<li>Declare an AutoConnect object with an ESP8266WebServer object.</li>
<li>Declare an AutoConnect object with an ESP8266WebServer object as an argument.</li>
<li>Declare an AutoConnectAux object for the update operation page.</li>
<li>Assign <code>/update</code> to the URI of the update operation page.</li>
<li>Assign an arbitrary title as the AutoConnect menu for the update operation page.</li>
<li>Declare additional AutoConnectAux pages for your application intention as needed.</li>
<li>Assign <code>/update</code> to the URI of the update dialog page.</li>
<li>Assign any title as the AutoConnect menu for the update dialog page.</li>
<li>Declare additional AutoConnectAux pages for your application intention if needed.</li>
<li>Perform the following procedure steps in the <code>setup()</code> function:<ol>
<li>Invokes <code>ESP8288HTTPUpdateServer::setup</code> function, specifies the <strong>USERNAME</strong> and the <strong>PASSWORD</strong> as needed.</li>
<li>Load the AutoConnectAux pages declared in step #8 for your application. (Except the update operation page)</li>
<li>Join these pages to AutoConnect along with the update operation page declared in step #5.</li>
<li>Load the AutoConnectAux pages declared in step #8 for your application. (Except the update dialog page)</li>
<li>Join these pages to AutoConnect along with the update dialog page declared in step #5.</li>
<li>Invokes <a href="api.html#begin">AutoConnect::begin</a> function.</li>
<li>Call the <code>MDNS.begin</code> and <code>MDNS.addServer</code> functions to start the multicast DNS service.</li>
<li>Call the <code>MDNS.begin</code> and <code>MDNS.addServer</code> functions to start the multi cast DNS service.</li>
</ol>
</li>
<li>Perform the following procedure steps in the <code>loop()</code> function:<ol>
@ -913,7 +914,7 @@
<p class="admonition-title">For ESP32</p>
<p>This procedure is equally applicable to ESP32. If the target module is ESP32, change the following items:</p>
<ul>
<li>Change the include directive appropriately for the ESP32 environment.</li>
<li>Change the include directives appropriately for the ESP32 environment.</li>
<li>Change ESP8266HTTPUpdaetServer to HTTPUpdateServer using an implementation provided from AutoConnect library example code.</li>
<li>Remove <code>MDNS.update</code> line from the sketch code.</li>
</ul>
@ -924,16 +925,15 @@
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">httpServer;</span>
<span style="color: #f8f8f2">ESP8266HTTPUpdateServer</span> <span style="color: #f8f8f2">updateServer;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(httpServer);</span>
<span style="color: #f8f8f2">updateServer(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">httpServer);</span>
</pre></div>
This sharing specification is the same for ESP32.</p>
</div>
<p>The execution result of the above sketch should be as follows. <sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup></p>
<p>The result of the above sketch should be as follows. <sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup></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>
<div class="admonition faq">
<p class="admonition-title">How LED ticking during an update</p>
<p>You <strong>cannot</strong> get the ticker with LED during an update by using this way. It is since the current implementation of the <strong>ESP8266HTTPUpdateServer class provided Arduino core library does not supply</strong> an LED pin to the ESP8266HTTPUpdate class.</p>
<p class="admonition-title">How LED ticking during updates</p>
<p>You <strong>cannot</strong> 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 <strong>library does not assign an LED PIN</strong> to the ESP8266HTTPUpdate class.</p>
</div>
<h3 id="how-to-make-the-binary-sketch"><i class="fa fa-wrench"></i> How to make the binary sketch<a class="headerlink" href="#how-to-make-the-binary-sketch" title="Permanent link">&para;</a></h3>
<p>Binary sketch files for updating can be retrieved using the Arduino IDE. Open the <strong>Sketch</strong> menu and select the <strong>Export compiled Binary</strong>, then starts compilation.</p>

@ -747,8 +747,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -925,10 +925,10 @@
<h2 id="updates-with-the-update-server">Updates with the update server<a class="headerlink" href="#updates-with-the-update-server" title="Permanent link">&para;</a></h2>
<p>Since the v1.0.0 release, AutoConnect provides new feature for updating sketch firmware of ESP8266 or ESP32 modules via OTA using the <a href="apiupdate.html#autoconnectupdate">AutoConnectUpdate</a> class that is an implementation of the sketch binary update by the HTTP server mentioned in the <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#http-server">OTA update</a> 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.</p>
<p>This method allows you to remotely update the ESP module's firmware across network segments from the update server, as long as you can ensure proper routing and forwarding.</p>
<p>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.</p>
<p><img src="images/updateserver.png" width="380" /></p>
<p>If you choose this update method, you must prepare the server process that provides the binary sketch files for the update client agent as a variant of the HTTP server. This server requires to be able to handle the HTTP headers extended for updating the firmware generated by ESP8266HTTPUpdate class as described in the <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#server-request-handling">ESP8266 Arduino Core documentation</a>, and the AutoConnectUpdate class generates those headers for it.</p>
<p>There are various implementations of update servers that provide binary sketch files. The ESP8266 Arduino Core documentation publishes a php script for the <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#id5">Advanced updater</a> which is a process that works fully well with client agents using the ESP8266HTTPUpdate class, as suggested in the implementation. 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.</p>
<p>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 <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#server-request-handling">ESP8266 Arduino Core documentation</a>. There are various implementations of the update server that provide binary sketch files. For example, the ESP8266 Arduino Core documentation suggests an <a href="https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#id5">advanced updater</a> 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.<br />
The AutoConnect library provides an update server script implemented in Python that can combine with the AutoConnectUpdate class.</p>
<h3 id="how-to-embed-autoconnectupdate-to-your-sketch"><i class="fa fa-edit"></i> How to embed AutoConnectUpdate to your sketch<a class="headerlink" href="#how-to-embed-autoconnectupdate-to-your-sketch" title="Permanent link">&para;</a></h3>
<p>To embed the AutoConnectUpdate class into your sketch, basically follow these steps:</p>
<ol>
@ -969,7 +969,8 @@
<img style="margin-left:30px;" src="images/updated.png" width="240" /></p>
<p>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 <a href="api.html#handleclient">AutoConnect::handleClient</a> function in the <code>loop()</code>.</p>
<h3 id="update-server-for-the-autoconnectupdate-class"><i class="fas fa-server"></i> Update server for the AutoConnectUpdate class<a class="headerlink" href="#update-server-for-the-autoconnectupdate-class" title="Permanent link">&para;</a></h3>
<p>The above series of actions by the AutoConnectUpdate class requires a cooperated update server. You need to place the update server in a reachable location on the network. AutoConnect provides the update server scripts implemented in Python. This server script is implemented to fit with the AutoConnectUpdate class as a client agent for updating. Also, it exists for each corresponding version of Python 2 or 3.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup></p>
<p>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.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup></p>
<p>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.</p>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span>updateserver.py <span style="color: #f92672">[</span>-h<span style="color: #f92672">]</span> <span style="color: #f92672">[</span>--port PORT<span style="color: #f92672">]</span> <span style="color: #f92672">[</span>--bind IP_ADDRESS<span style="color: #f92672">]</span> <span style="color: #f92672">[</span>--catalog CATALOG<span style="color: #f92672">]</span> <span style="color: #f92672">[</span>--log LOG_LEVEL<span style="color: #f92672">]</span>
</pre></div>
<dl class="apidl">
@ -1005,7 +1006,8 @@
<p>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.</p>
</div>
<h3 id="http-contents-and-the-sequence-for-the-autoconnectupdate-class"><i class="far fa-handshake"></i> HTTP contents and the sequence for the AutoConnectUpdate class<a class="headerlink" href="#http-contents-and-the-sequence-for-the-autoconnectupdate-class" title="Permanent link">&para;</a></h3>
<p>The update server worked together the AutoConnectUpdate class can be prepared individually by yourself. If you want to improve the update server that can operate more broadly by equipping the extensions such as version control and authentications, it must implement the handshake requirements for AutoConnectUpdate class. The handshake with the AutoConnectUpdate class has two requirements:</p>
<p>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.</p>
<p>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:</p>
<ul>
<li>The update server notifies the catalog list of updatable binary files which stored in the update server to the client agent. <sup id="fnref:5"><a class="footnote-ref" href="#fn:5" rel="footnote">5</a></sup></li>
<li>Send an updating binary file and MD5 hash to a client in response to URI request (HTTP GET). <sup id="fnref:6"><a class="footnote-ref" href="#fn:6" rel="footnote">6</a></sup></li>

@ -686,8 +686,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>
@ -802,8 +802,8 @@
<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 types of the platform</strong> for updating the binary sketch stored 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> 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 when using a web browser</strong></a> as an update client keeps with the scenario assumed by the ESP8266 arduino core. Therefore, the user sketch must meet the requirements described in the ESP8266 Arduino Core documentation, but it is not difficult to incorporate an implementation for that into a sketch using AutoConnect. All you need to do is bind the <strong>ESP8266HTTPUpdateServer library class</strong><sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup> of the ESP8266 Arduino core as an <a href="acintro.html">AutoConnectAux</a> to the <a href="menu.html">AutoConnect menu</a>.</p>
<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>
@ -813,7 +813,7 @@
<p><img src="images/updatemodel.png" width="540" /></p>
<div class="admonition info">
<p class="admonition-title">Security Disclaimer</p>
<p>The security of the OTA update platform provided by AutoConnect is a very weak level. No guarantees as to the level of security provided for your application by the AutoConnect OTA Update is implied.</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 />

File diff suppressed because one or more lines are too long

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

Binary file not shown.

@ -700,8 +700,8 @@
<li class="md-nav__item">
<a href="credit.html" title="Saved credentail access" class="md-nav__link">
Saved credentail access
<a href="credit.html" title="Saved credentails access" class="md-nav__link">
Saved credentails access
</a>
</li>

Loading…
Cancel
Save