Under the work of v0.9.7 documentation

pull/41/head
Hieromon Ikasamo 6 years ago
parent 04ec5fcfc9
commit c99d91c8e4
  1. 22
      docs/404.html
  2. 22
      docs/acelements.html
  3. 144
      docs/achandling.html
  4. 22
      docs/acintro.html
  5. 67
      docs/acjson.html
  6. 40
      docs/advancedusage.html
  7. 77
      docs/api.html
  8. 187
      docs/apiaux.html
  9. 70
      docs/apiconfig.html
  10. 358
      docs/apielements.html
  11. 22
      docs/apiextra.html
  12. 22
      docs/basicusage.html
  13. 22
      docs/changelog.html
  14. 12
      docs/css/paragraph.css
  15. 1076
      docs/datatips.html
  16. 50
      docs/faq.html
  17. 22
      docs/gettingstarted.html
  18. 26
      docs/howtoembed.html
  19. BIN
      docs/images/arrow_down.png
  20. BIN
      docs/images/aux_fsbrowser.gif
  21. BIN
      docs/images/aux_ov.gif
  22. BIN
      docs/images/aux_pattern.gif
  23. 24
      docs/index.html
  24. 2
      docs/js/gifffer.min.js
  25. 22
      docs/license.html
  26. 26
      docs/menu.html
  27. 45
      docs/menuize.html
  28. 2
      docs/search/search_index.json
  29. 47
      docs/sitemap.xml
  30. BIN
      docs/sitemap.xml.gz
  31. 1056
      docs/wojson.html
  32. 2
      mkdocs.yml
  33. 10
      mkdocs/advancedusage.md
  34. 4
      mkdocs/menu.md
  35. 4
      mkdocs/menuize.md

@ -71,6 +71,8 @@
<link rel="stylesheet" href="/AutoConnect/css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -572,8 +574,20 @@
<li class="md-nav__item">
<a href="/AutoConnect/datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="/AutoConnect/datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="/AutoConnect/menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -584,8 +598,8 @@
<li class="md-nav__item">
<a href="/AutoConnect/menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="/AutoConnect/wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -1020,8 +1022,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -1032,8 +1046,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -556,8 +558,8 @@
</li>
<li class="md-nav__item">
<a href="#over-typing-with-loadelement-function" title=" Over typing with LoadElement function" class="md-nav__link">
Over typing with LoadElement function
<a href="#overwrite-the-autoconnectelements" title=" Overwrite the AutoConnectElements" class="md-nav__link">
Overwrite the AutoConnectElements
</a>
</li>
@ -589,6 +591,13 @@
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#scope-lifetime-of-autoconnectaux" title="Scope &amp; Lifetime of AutoConnectAux" class="md-nav__link">
Scope &amp; Lifetime of AutoConnectAux
</a>
</li>
<li class="md-nav__item">
<a href="#the-uri-of-the-custom-web-pages" title="The URI of the custom Web pages" class="md-nav__link">
The URI of the custom Web pages
@ -745,8 +754,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -757,8 +778,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
@ -906,8 +927,8 @@
</li>
<li class="md-nav__item">
<a href="#over-typing-with-loadelement-function" title=" Over typing with LoadElement function" class="md-nav__link">
Over typing with LoadElement function
<a href="#overwrite-the-autoconnectelements" title=" Overwrite the AutoConnectElements" class="md-nav__link">
Overwrite the AutoConnectElements
</a>
</li>
@ -939,6 +960,13 @@
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#scope-lifetime-of-autoconnectaux" title="Scope &amp; Lifetime of AutoConnectAux" class="md-nav__link">
Scope &amp; Lifetime of AutoConnectAux
</a>
</li>
<li class="md-nav__item">
<a href="#the-uri-of-the-custom-web-pages" title="The URI of the custom Web pages" class="md-nav__link">
The URI of the custom Web pages
@ -1292,7 +1320,7 @@
<span style="color: #f8f8f2">}</span>
</pre></div>
<p>The above example handles in the handler for the values of a custom web page. An <a href="api.html#on">AutoConnect::on</a> function registers a handler for the AutoConnectAux page of the specified uri. The argument of the custom Web page handler is an AutoConnectAux of the page itself and the <a href="https://github.com/Hieromon/PageBuilder#arguments-of-invoked-user-function">PageArgument</a> object.</p>
<p>The above example handles in the handler for the values of a custom Web page. An <a href="api.html#on">AutoConnect::on</a> function registers a handler for the AutoConnectAux page of the specified uri. The argument of the custom Web page handler is an AutoConnectAux of the page itself and the <a href="https://github.com/Hieromon/PageBuilder#arguments-of-invoked-user-function">PageArgument</a> object.</p>
<p>To retrieve the values entered in a custom Web page you need to access the AutoConnectElement of the page that caused the request to this page and to do this, you use the <a href="api.html#where">AutoConnect::where</a> function. The <code>AutoConnect::where</code> function returns a pointer to the AutoConnectAux object of the custom Web page that caused the HTTP request.</p>
<div class="admonition note">
<p class="admonition-title">The where() function is available for only AutoConnectAux.</p>
@ -1414,11 +1442,94 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<span style="color: #f8f8f2">portal.begin();</span>
</pre></div>
<h3 id="over-typing-with-loadelement-function"><i class="fa fa-wpforms"></i> Over typing with LoadElement function<a class="headerlink" href="#over-typing-with-loadelement-function" title="Permanent link">&para;</a></h3>
<p>The <a href="apiaux.html#loadelement">AutoConnectAux::loadElement</a> function overwrites its value when loading an AutoConnectElement. If the loadElement function wields an element with an input value, the previous value will be lost by the loaded value. If you need to preserve input values even during page transition operations, we recommend that you load parameters only once at an early stage in the <code>setup()</code> of sketches.</p>
<h3 id="check-data-against-on-submission"><i class="fa fa-check-square"></i> Check data against on submission<a class="headerlink" href="#check-data-against-on-submission" title="Permanent link">&para;</a></h3>
<h3 id="overwrite-the-autoconnectelements"><i class="fa fa-wpforms"></i> Overwrite the AutoConnectElements<a class="headerlink" href="#overwrite-the-autoconnectelements" title="Permanent link">&para;</a></h3>
<p>Sketches can update the attributes of AutoConnectElements with two approaches. A one is to assign directly to the attributes of a member variable of its element. The other is to overwrite them with loading the element by <a href="apiaux.html#loadelement">AutoConnectAux::loadElement</a>. </p>
<p>The elements for attributes described in the JSON document for AutoConnectElements overwrites the member variables of the target AutoConnectElements. However, AutoConnectAux::loadElement keeps the member variables unchanged if there is no element in the JSON document. This overwriting behavior is the same for the <a href="api.html#load">AutoConnect::load</a> function.</p>
<p>For example, the combination of the sketch and JSON document as follows updates only the style while keeping Captiopn (ie. "Hello, world") as AutoConnectText value.</p>
<p><i class="fa fa-code"></i> The sketch (part of code)</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">ACText(Caption,</span> <span style="color: #e6db74">&quot;Hello, world&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">helloPage</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;/hello&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;Hello&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">true,</span> <span style="color: #f8f8f2">{</span> <span style="color: #f8f8f2">Caption</span> <span style="color: #f8f8f2">});</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">onHello</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux,</span> <span style="color: #f8f8f2">PageArgument</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">args)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">aux.loadElement(JSON);</span>
<span style="color: #66d9ef">return</span> <span style="color: #f8f8f2">String();</span>
<span style="color: #f8f8f2">}</span>
<span style="color: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">helloPage.on(onHello);</span>
<span style="color: #f8f8f2">portal.join(helloPage);</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="fab fa-js-square"></i> External JSON document for the above sketch to modify the text style
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">{</span>
<span style="color: #f92672">&quot;name&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Caption&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f92672">&quot;type&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACText&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f92672">&quot;style&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;text-align:center;font-family:&#39;Avenir&#39;,&#39;Corbel&#39;,&#39;Osaka&#39;;color:Green;&quot;</span>
<span style="color: #f8f8f2">}</span>
</pre></div></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#autoconenctinput">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>
<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>
<span style="color: #f92672">&quot;menu&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
<span style="color: #f92672">&quot;element&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #f8f8f2">[</span>
<span style="color: #f8f8f2">{</span>
<span style="color: #f92672">&quot;name&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Server&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f92672">&quot;type&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Server address&quot;</span><span style="color: #f8f8f2">,</span>
<span style="background-color: #49483e"> <span style="color: #f92672">&quot;pattern&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$&quot;</span>
</span> <span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">]</span>
<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>
<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>
<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>
<h3 id="scope-lifetime-of-autoconnectaux">Scope &amp; Lifetime of AutoConnectAux<a class="headerlink" href="#scope-lifetime-of-autoconnectaux" title="Permanent link">&para;</a></h3>
<p>The lifetime of AutoConnectAux and AutoConnectElements must remain in the period when the custom Web page can be manipulated. The implementation of the custom Web page inherits from requestHandler driven from ESP8266WebServer (WebServer for ESP32), so the instance of AutoConnectAux and AutoConnectElements must exist for the duration of effect of handleClient. The following example is incorrect for manipulating custom Web pages. Its AutoConnectAux instance will be destructed at the exit of the setup().</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">auxPage[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;raw(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74"> &quot;title&quot;: &quot;Page-1&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"> { &quot;name&quot;:&quot;Server&quot;, &quot;type&quot;:&quot;ACText&quot;, &quot;label&quot;:&quot;Server address&quot; }</span>
<span style="color: #e6db74"> ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)raw&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</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: #75715e">// This declaration is wrong.</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span>
</span> <span style="color: #f8f8f2">aux.load(auxPage);</span>
<span style="color: #f8f8f2">portal.join(aux);</span>
<span style="color: #f8f8f2">portal.begin();</span>
<span style="color: #f8f8f2">}</span>
<span style="color: #66d9ef">void</span> <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</pre></div>
<h3 id="the-uri-of-the-custom-web-pages">The URI of the custom Web pages<a class="headerlink" href="#the-uri-of-the-custom-web-pages" title="Permanent link">&para;</a></h3>
<p>The transition of the custom Web page follows the URI of the page, but the ESP8266WebServer class does not know the URI of an AutoConnectAux page. (Registering a custom Web page does not use the <em>ESP8266WebServer::on</em>/<em>WebServer::on</em> function.) Therefore ESP8266WebServer class does not detect its URI access. If you want to detect an http request to AutoConnectAux's custom Web page, you need to register its URI with the <a href="apiaux.html#on">AutoConnectAux::on</a> function.</p>
<p>In addition to this, there are restrictions in the handler for the custom Web page as shown in the following section.</p>
@ -1446,12 +1557,21 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<p class="admonition-title">302 Redirect Alternatives</p>
<p>To transition from a custom Web page to a sketch owned page, execute the link function of JavaScript with the AutoConnectElement element.</p>
</div>
<script>
window.onload = function() {
Gifffer();
};
</script>
<div class="footnote">
<hr />
<ol>
<li id="fn:1">
<p>The valid scope of the name is within an AutoConnectAux.&#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>The pattern of AutoConnectInput conforms to javascript specification.&#160;<a class="footnote-backref" href="#fnref:2" rev="footnote" title="Jump back to footnote 2 in the text">&#8617;</a></p>
</li>
</ol>
</div>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -658,8 +660,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -670,8 +684,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -115,7 +117,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="#describe-custom-web-pages-with-json" tabindex="1" class="md-skip">
<a href="#json-objects-elements-for-the-custom-web-page" tabindex="1" class="md-skip">
Skip to content
</a>
@ -460,13 +462,6 @@
<label class="md-nav__title" for="__toc">Table of contents</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#describe-custom-web-pages-with-json" title="Describe custom Web pages with JSON" class="md-nav__link">
Describe custom Web pages with JSON
</a>
</li>
<li class="md-nav__item">
<a href="#json-objects-elements-for-the-custom-web-page" title="JSON objects &amp; elements for the custom Web page" class="md-nav__link">
JSON objects &amp; elements for the custom Web page
@ -781,8 +776,8 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
@ -793,8 +788,20 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
<li class="md-nav__item">
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
@ -858,13 +865,6 @@
<label class="md-nav__title" for="__toc">Table of contents</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#describe-custom-web-pages-with-json" title="Describe custom Web pages with JSON" class="md-nav__link">
Describe custom Web pages with JSON
</a>
</li>
<li class="md-nav__item">
<a href="#json-objects-elements-for-the-custom-web-page" title="JSON objects &amp; elements for the custom Web page" class="md-nav__link">
JSON objects &amp; elements for the custom Web page
@ -1049,13 +1049,12 @@
<h1>Custom Web pages with JSON</h1>
<h2 id="describe-custom-web-pages-with-json">Describe custom Web pages with JSON<a class="headerlink" href="#describe-custom-web-pages-with-json" title="Permanent link">&para;</a></h2>
<p>You can embed custom Web pages written in <a href="https://www.json.org/index.html"><strong>JSON</strong></a> into AutoConnect without declaring AutoConnectAux &amp; AutoConnectElements in sketches. Custom Web page declaration in JSON can be included in the sketch in advance as the fixed string, or it can be stored in the external file such as SPIFFS for stream loading. You can also load and save AutoConnectElements objects individually.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup></p>
<p>You can embed custom Web pages written in <a href="https://www.json.org/index.html"><strong>JSON</strong></a> into AutoConnect without declaring AutoConnectAux &amp; AutoConnectElements in sketches. Custom Web page declaration in JSON can be included in the sketch in advance as the fixed string, or it can be stored in the external file such as SPIFFS for stream loading. You can also load and save AutoConnectElements objects individually.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup></p>
<p>By providing the following JSON document to AutoConnect, you can include the custom Web page as the bellow:</p>
<div style="float:left;width:50%;height:470px;overflow:auto"><img src="./images/ac_json.png"></div>
<p><img style="margin-left:30px;width:40%;height:470px;" src="./images/ac_mqtt_setting.png"></p>
<p>A JSON document for AutoConnect can also contain declarations of multiple custom web pages. If you fit those multiple pages in one JSON document, sketch processing for loading AutoConnectAux will degenerate further.</p>
<p>A JSON document for AutoConnect can also contain declarations of multiple custom Web pages. If you fit those multiple pages in one JSON document, sketch processing for loading AutoConnectAux will degenerate further.</p>
<div class="admonition caution">
<p class="admonition-title">Need ArduinoJson v5</p>
<p>To process the AutoConnectAux &amp; AutoConnectElements written in the JSON is you need to install the <a href="https://arduinojson.org/v5/doc/installation/">ArduinoJson version 5</a> library.</p>
@ -1077,11 +1076,11 @@
</dl>
<h4 id="uri"><i class="fa fa-key"></i> <strong>uri</strong><a class="headerlink" href="#uri" title="Permanent link">&para;</a></h4>
<dl>
<dd>String of URI path that specifies where to place the custom web page. It needs to be a location from the root path including '<strong>/</strong>'.</dd>
<dd>String of URI path that specifies where to place the custom Web page. It needs to be a location from the root path including '<strong>/</strong>'.</dd>
</dl>
<h4 id="menu"><i class="fa fa-key"></i> <strong>menu</strong><a class="headerlink" href="#menu" title="Permanent link">&para;</a></h4>
<dl>
<dd>This is a Boolean value indicating whether to include the custom web page in the AutoConnect menu. If the page only responds to another page and you want to prevent the direct use from the menu, you can exclude from the AutoConnect menu. If this key is false, it will not appear in the menu.</dd>
<dd>This is a Boolean value indicating whether to include the custom Web page in the AutoConnect menu. If the page only responds to another page and you want to prevent the direct use from the menu, you can exclude from the AutoConnect menu. If this key is false, it will not appear in the menu.</dd>
</dl>
<h4 id="element"><i class="fa fa-key"></i> <strong>element</strong><a class="headerlink" href="#element" title="Permanent link">&para;</a></h4>
<dl>
@ -1089,7 +1088,7 @@
</dl>
<div class="admonition note">
<p class="admonition-title">Order of elements on a custom Web page</p>
<p>The order in which AutoConnectElements are placed on a custom web page is the order in the JSON document.</p>
<p>The order in which AutoConnectElements are placed on a custom Web page is the order in the JSON document.</p>
</div>
<h3 id="multiple-custom-web-pages-declaration-in-json-document"><i class="fa fa-copy"></i> Multiple custom Web pages declaration in JSON document<a class="headerlink" href="#multiple-custom-web-pages-declaration-in-json-document" title="Permanent link">&para;</a></h3>
<p>You can put declarations of multiple custom Web pages in one JSON document. In that case, declare an array of each custom Web page with JSON. The following JSON document contains three custom Web pages:</p>
@ -1145,16 +1144,12 @@
<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>AutoConnectElements in JSON description are described as an array in the <code>element</code> with arguments of each <a href="acelements.html#constructor">constructor</a>.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span>&quot;element&quot; : [
{
&quot;name&quot; : name,
&quot;type&quot; : type,
key_according_to_type : the_value | array_of_value , key_according_to_type : the_value | array_of_value
},
{
the_nect_element
}
]
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span>{
&quot;name&quot; : name,
&quot;type&quot; : type,
key_according_to_type : the_value | array_of_value,
[ key_according_to_type : the_value | array_of_value ]
}
</pre></div>
<h4 id="name"><i class="fa fa-key"></i> <strong>name</strong><a class="headerlink" href="#name" title="Permanent link">&para;</a></h4>
@ -1377,7 +1372,7 @@ An example of using each function is as follows.
</pre></div></p>
<p>AutoConnect passes the given JSON document directly to the <a href="https://arduinojson.org/v5/api/jsonbuffer/parseobject/"><strong>parseObject()</strong></a> function of the ArduinoJson library for parsing. Therefore, the constraint of the parseObject() function is applied as it is in the parsing of the JSON document for the AutoConnect. That is, if the JSON string is read-only, duplicating the input string occurs and consumes more memory.</p>
<h2 id="saving-json-document">Saving JSON document<a class="headerlink" href="#saving-json-document" title="Permanent link">&para;</a></h2>
<p>However, AutoConnect does not support saving AutoConnectAux as a whole custom Web page. If you want to persist an AutoConnectElements object, you need to save it as an AutoConenctElement object unit. AutoConnectAux has a <a href="achandling.html#saving-autoconnectelements">function</a> to write multiple elements to the stream in a batch.</p>
<p>The sketch can persist AutoConnectElements as a JSON document and also uses <a href="achandling.html#saving-autoconnectelements-with-json">this function</a> to save the values entered on the custom Web page. And you can reload the saved JSON document into AutoConnectElements as the field in a custom Web page using the <a href="achandling.html#loading-autoconnectaux-autoconnectelements-with-json">load function</a>. </p>
<div class="footnote">
<hr />
<ol>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -445,8 +447,8 @@
</li>
<li class="md-nav__item">
<a href="#cast-items-of-your-sketch-own-into-the-autoccnnect-menu" title=" Cast items of your sketch own into the AutocCnnect menu" class="md-nav__link">
Cast items of your sketch own into the AutocCnnect menu
<a href="#cast-the-legacy-html-pages-as-the-add-on-menu-items" title=" Cast the legacy HTML pages as the add-on menu items" class="md-nav__link">
Cast the legacy HTML pages as the add-on menu items
</a>
</li>
@ -778,8 +780,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -790,8 +804,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
@ -899,8 +913,8 @@
</li>
<li class="md-nav__item">
<a href="#cast-items-of-your-sketch-own-into-the-autoccnnect-menu" title=" Cast items of your sketch own into the AutocCnnect menu" class="md-nav__link">
Cast items of your sketch own into the AutocCnnect menu
<a href="#cast-the-legacy-html-pages-as-the-add-on-menu-items" title=" Cast the legacy HTML pages as the add-on menu items" class="md-nav__link">
Cast the legacy HTML pages as the add-on menu items
</a>
</li>
@ -1182,18 +1196,18 @@ Also, if you want to stop AutoConnect completely when the captive portal is time
<span style="color: #f8f8f2">}</span>
</pre></div>
<h3 id="cast-items-of-your-sketch-own-into-the-autoccnnect-menu"><i class="fa fa-caret-right"></i> Cast items of your sketch own into the AutocCnnect menu<a class="headerlink" href="#cast-items-of-your-sketch-own-into-the-autoccnnect-menu" title="Permanent link">&para;</a></h3>
<p>If your sketch is handling your own web page, you can call that page from the <a href="menu.html">AutoConnect menu</a>. Unlike the custom Web pages by <a href="apiaux.html#autoconnectaux">AutoConnectAux</a>, this allows AutoConnect menu to legacy web pages registered by <em>ESP8266WebServer::on</em>/<em>WebServer::on</em> function.</p>
<p>To implement this with your sketch, use only the <a href="apiaux.html#autoconnectaux">AutoConnectAux</a> constructed with the URI of that page. <a href="acelements.html">AutoConnectElements</a> is not required. The basic procedure for this as follows. </p>
<h3 id="cast-the-legacy-html-pages-as-the-add-on-menu-items"><i class="fa fa-caret-right"></i> Cast the legacy HTML pages as the add-on menu items<a class="headerlink" href="#cast-the-legacy-html-pages-as-the-add-on-menu-items" title="Permanent link">&para;</a></h3>
<p>If your sketch handles web pages, you can embed the pages into the AutoConnect menu with keeping the WiFi connection feature. Unlike the custom Web pages by <a href="apiaux.html#autoconnectaux">AutoConnectAux</a>, this allows to legacy web pages registered by <em>ESP8266WebServer::on</em> or <em>WebServer::on</em> function.</p>
<p>To implement embedding the your sketch web pages, use only the <a href="apiaux.html#autoconnectaux">AutoConnectAux</a> constructed with the URI of that page. <a href="acelements.html">AutoConnectElements</a> is not required. The basic procedure for this as follows:</p>
<ol>
<li>Declare AutoConnectAux for each legacy page. It includes the URI of the page and item string which will display in the AutoConnect menu.</li>
<li>Sketch legacy page handlers.</li>
<li>Sketch the legacy page handlers.</li>
<li>Register those handler functions to ESP8266WebServer/WebServer with the <strong>on</strong> function.</li>
<li>Register AutoConnectAux declared with #1 to AutoConnect using <a href="api.html#join">AutoConnect::join</a> function. It serves as a menu item.</li>
<li><a href="api.html#begin">Begin</a> the portal.</li>
<li>Performs <a href="api.html#handleClient">AutoConnect::handleClient</a> in the <strong>loop</strong> function.</li>
</ol>
<p>For details see the <a href="menuize.html">Constructing menu</a> section of Examples page.</p>
<p>For details see the <a href="menuize.html">Constructing the menu</a> section of Examples page.</p>
<h3 id="change-menu-title"><i class="fa fa-caret-right"></i> Change menu title<a class="headerlink" href="#change-menu-title" title="Permanent link">&para;</a></h3>
<p>Although the default menu title is <strong>AutoConnect</strong>, you can change the title by setting <a href="apiconfig.html#title">AutoConnectConfig::title</a>. To set the menu title properly, you must set before calling <a href="api.html#begin">AutoConnect::begin</a>.</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>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -767,8 +769,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -779,8 +793,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
@ -1070,7 +1084,7 @@
<p>The <a href="api.html#handleclient"><strong>handleClient</strong></a> function of AutoConnect can include the response of the URI handler added by the user using the "<em>on</em>" function of ESP8266WebServer/WebServer. If ESP8266WebServer/WebServer is assigned internally by AutoConnect, the sketch can obtain that reference with the <a href="api.html#host"><strong>host</strong></a> function.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">webServer</span>A reference of ESP8266WebServer or WebServer instance.</dd>
<dd><span class="apidef">webServer</span><span class="apidesc">A reference of ESP8266WebServer or WebServer instance.</span></dd>
</dl></p>
<h2 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></h2>
<h3 id="aux"><i class="fa fa-caret-right"></i> aux<a class="headerlink" href="#aux" title="Permanent link">&para;</a></h3>
@ -1079,7 +1093,7 @@
Returns a pointer to AutoConnectAux with the URI specified by <em>uri</em>. If AutoConnectAux with that URI is not bound, it returns <strong>nullptr</strong>.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">uri</span>A string of the URI.</dd>
<dd><span class="apidef">uri</span><span class="apidesc">A string of the URI.</span></dd>
<dt><strong>Return value</strong></dt>
<dd>A Pointer of the AutoConnectAux instance.</dd>
</dl></p>
@ -1095,12 +1109,12 @@ AutoConnect first invokes <em>WiFi.begin</em>. If the <em>ssid</em> and the <em>
The captive portal will not be started if the connection has been established with first <em>WiFi.begin</em>. If the connection cannot establish, switch to WIFI_AP_STA mode and activate SoftAP. Then DNS server starts.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">ssid</span>SSID to be connected.</dd>
<dd><span class="apidef">passphrase</span>Password for connection.</dd>
<dd><span class="apidef">timeout</span>A time out value in milliseconds for waiting connection.</dd>
<dd><span class="apidef">ssid</span><span class="apidesc">SSID to be connected.</span></dd>
<dd><span class="apidef">passphrase</span><span class="apidesc">Password for connection.</span></dd>
<dd><span class="apidef">timeout</span><span class="apidesc">A time out value in milliseconds for waiting connection.</span></dd>
<dt><strong>Return value</strong></dt>
<dd><span class="apidef">true</span>Connection established, AutoConnect service started with WIFI_STA mode.</dd>
<dd><span class="apidef">false</span>Could not connected, Captive portal started with WIFI_AP_STA mode.</dd>
<dd><span class="apidef">true</span><span class="apidesc">Connection established, AutoConnect service started with WIFI_STA mode.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">Could not connected, Captive portal started with WIFI_AP_STA mode.</span></dd>
</dl></p>
<h3 id="config"><i class="fa fa-caret-right"></i> config<a class="headerlink" href="#config" 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">config(AutoConnectConfig</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">config)</span>
@ -1110,12 +1124,12 @@ The captive portal will not be started if the connection has been established wi
<p>Set SoftAP's WiFi configuration and static IP configuration.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">config</span>Reference to <a href="apiconfig.html"><strong>AutoConnectConfig</strong></a> containing SoftAP's parameters and static IP parameters.</dd>
<dd><span class="apidef">ap</span>SSID for SoftAP. The default value is <strong>esp8266ap</strong> for ESP8266, <strong>esp32ap</strong> for ESP32.</dd>
<dd><span class="apidef">password</span>Password for SodtAP. The default value is <strong>12345678</strong>.</dd>
<dd><span class="apidef">config</span><span class="apidesc">Reference to <a href="apiconfig.html"><strong>AutoConnectConfig</strong></a> containing SoftAP's parameters and static IP parameters.</span></dd>
<dd><span class="apidef">ap</span><span class="apidesc">SSID for SoftAP. The default value is <strong>esp8266ap</strong> for ESP8266, <strong>esp32ap</strong> for ESP32.</span></dd>
<dd><span class="apidef">password</span><span class="apidesc">Password for SodtAP. The default value is <strong>12345678</strong>.</span></dd>
<dt><strong>Return value</strong></dt>
<dd><span class="apidef">true</span>Successfully configured.</dd>
<dd><span class="apidef">false</span>Configuration parameter is invalid, some values out of range.</dd>
<dd><span class="apidef">true</span><span class="apidesc">Successfully configured.</span></dd>
<dd><span class="apidef">false</span><span class="aidesc">Configuration parameter is invalid, some values out of range.</span></dd>
</dl></p>
<h3 id="end"><i class="fa fa-caret-right"></i> end<a class="headerlink" href="#end" title="Permanent link">&para;</a></h3>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">end()</span>
@ -1141,13 +1155,13 @@ The captive portal will not be started if the connection has been established wi
<p>The handleRequest function is not supposed to use with AutoConnect::handleClient. It should be used with ESP8266WebServer::handleClient or WebServer::handleClient.</p>
</div>
<h3 id="home"><i class="fa fa-caret-right"></i> home<a class="headerlink" href="#home" title="Permanent link">&para;</a></h3>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">home(String</span> <span style="color: #f8f8f2">uri)</span>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">home(String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">uri)</span>
</pre></div>
<p>Put a user site's home URI. The URI specified by home is linked from "HOME" in the AutoConnect menu.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">uri</span> A URI string of user site's home path.</dd>
<dd><span class="apidef">uri</span><span class="aidesc">A URI string of user site's home path.</span></dd>
</dl></p>
<h3 id="host"><i class="fa fa-caret-right"></i> host<a class="headerlink" href="#host" title="Permanent link">&para;</a></h3>
<ul>
@ -1185,7 +1199,7 @@ or<br />
Join the AutoConnectAux object to AutoConnect. AutoConnectAux objects can be joined one by one, or joined altogether. The AutoConnectAux object joined by the join function can be handled from the AutoConnect menu.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">aux</span>Reference to AutoConnectAux. It can be std::vector of std::reference_wrapper of AutoConnectAux with <a href="https://en.cppreference.com/w/cpp/language/list_initialization">list initialization</a>.</dd>
<dd><span class="apidef">aux</span><span class="apidesc">Reference to AutoConnectAux. It can be std::vector of std::reference_wrapper of AutoConnectAux with <a href="https://en.cppreference.com/w/cpp/language/list_initialization">list initialization</a>.</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">aux)</span>
@ -1197,10 +1211,10 @@ Join the AutoConnectAux object to AutoConnect. AutoConnectAux objects can be joi
Load JSON document of AutoConnectAux which contains AutoConnectElements. If there is a syntax error in the JSON document, false is returned.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">aux</span>The input string to be loaded.</dd>
<dd><span class="apidef">aux</span><span class="apidesc">The input string to be loaded.</span></dd>
<dt><strong>Return value</strong></dt>
<dd><span class="apidef">true</span>The JSON document as AutoConnectAux successfully loaded.</dd>
<dd><span class="apidef">false</span>Loading JSON document unsuccessful, probably syntax errors have occurred or insufficient memory. You can diagnose the cause of loading failure using the <a href="https://arduinojson.org/v5/assistant/">ArduinoJson Assistant</a>.</dd>
<dd><span class="apidef">true</span><span class="apidesc">The JSON document as AutoConnectAux successfully loaded.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">Loading JSON document unsuccessful, probably syntax errors have occurred or insufficient memory. You can diagnose the cause of loading failure using the <a href="https://arduinojson.org/v5/assistant/">ArduinoJson Assistant</a>.</span></dd>
</dl></p>
<h3 id="on"><i class="fa fa-caret-right"></i> on<a class="headerlink" href="#on" title="Permanent link">&para;</a></h3>
<dl>
@ -1209,10 +1223,9 @@ Load JSON document of AutoConnectAux which contains AutoConnectElements. If ther
<dt>Register the handler function of the AutoConnectAux.</dt>
<dt><dl class="apidl"></dt>
<dt><dt><strong>Parameters</strong></dt></dt>
<dt><dd><span class="apidef">uri</span>A string of the URI assigned to the AutoConnectAux page.</dd></dt>
<dt><dd><span class="apidef">handler</span>A function that behaves when a request to the AutoConnectAux page occurs. AuxHandlerFunctionT type is defined by the following declaration.</dd></dt>
<dt><dd><span class="apidef"></span><code>String handler(AutoConnectAux&amp;, PageArgument&amp;)</code></dd></dt>
<dt><dd><span class="apidef">order</span>Specifies when the handler is called with the following enumeration value.</dd></dt>
<dt><dd><span class="apidef">uri</span><span class="apidesc">A string of the URI assigned to the AutoConnectAux page.</span></dd></dt>
<dt><dd><span class="apidef">handler</span><span class="apidesc">A function that behaves when a request to the AutoConnectAux page occurs. AuxHandlerFunctionT type is defined by the following declaration.<p class=""apidesc"><code>String handler(AutoConnectAux&amp;, PageArgument&amp;)</code></p></span></dd></dt>
<dt><dd><span class="apidef">order</span><span class="apidesc">Specifies when the handler is called with the following enumeration value.</span></dd></dt>
<dd>
<ul>
<li><strong>AC_EXIT_AHEAD</strong> :
@ -1244,7 +1257,7 @@ Called even before generating HTML and after generated.</li>
Register the function which will call from AutoConnect at the start of the captive portal.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">fn</span>Function called at the captive portal start.</dd></p>
<dd><span class="apidef">fn</span><span class="apidesc">Function called at the captive portal start.</span></dd></p>
</dl>
<p>An <em>fn</em> specifies the function called when the captive portal starts. Its prototype declaration is defined as "<em>DetectExit_ft</em>".</p>
@ -1252,10 +1265,10 @@ Register the function which will call from AutoConnect at the start of the capti
</pre></div>
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">softapIP</span>An IP address of SoftAP for the captive portal.</dd>
<dd><span class="apidef">softapIP</span><span class="apidesc">An IP address of SoftAP for the captive portal.</span></dd>
<dt><strong>Retuen value</strong></dt>
<dd><span class="apidef">true</span>Continues captive portal handling.</dd>
<dd><span class="apidef">false</span>Cancel the captive portal. AutoConnect::begin function will return with a false.</dd>
<dd><span class="apidef">true</span><span class="apidesc">Continues captive portal handling.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">Cancel the captive portal. AutoConnect::begin function will return with a false.</span></dd>
</dl></p>
<h3 id="onnotfound"><i class="fa fa-caret-right"></i> onNotFound<a class="headerlink" href="#onnotfound" title="Permanent link">&para;</a></h3>
<ul>
@ -1272,12 +1285,12 @@ Register the function which will call from AutoConnect at the start of the capti
Register the handler function for undefined URL request detected.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">fn</span>A function of the "not found" handler.</dd>
<dd><span class="apidef">fn</span><span class="apidesc">A function of the "not found" handler.</span></dd>
</dl></p>
<h3 id="where"><i class="fa fa-caret-right"></i> where<a class="headerlink" href="#where" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConenctAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">where(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</pre></div>
Returns a pointer to the AutoConnectAux object of the custom web page that caused the request to that page. This function is available only for the AutoConnectAux object. It is invalid for HTTP requests from individual pages registered with the <strong>on</strong> handler of ESP8266WebServer/ESP32. In other words, this function only returns the last AutoConnecAux page called.
Returns a pointer to the AutoConnectAux object of the custom Web page that caused the request to that page. This function is available only for the AutoConnectAux object. It is invalid for HTTP requests from individual pages registered with the <strong>on</strong> handler of ESP8266WebServer/ESP32. In other words, this function only returns the last AutoConnecAux page called.
<dl class="apidl">
<dt><strong>Retuen value</strong></dt>
<dd>A pointer to the AutoConnectAux that caused the request the page.</dd>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -719,8 +721,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -731,8 +745,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
@ -931,9 +945,10 @@
</pre></div>
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">uri</span>URI of this custom Web Page.</dd>
<dd><span class="apidef">title</span>Page title of this custom web page. It will appear on the auto connection menu and at the top of that page.</dd>
<dd><span class="apidef">addons</span>Reference to AutoConnectElement collection.</dt>
<dd><span class="apidef">uri</span><span class="apidesc">URI of this custom Web Page.</span></dd>
<dd><span class="apidef">title</span><span class="apidesc">Page title of this custom Web page. It will appear on the auto connection menu and at the top of that page.</span></dd>
<dd><span class="apidef">menu</span><span class="apidesc">Specifies whether to display this page on menu.</span></dd>
<dd><span class="apidef">addons</span><span class="apidesc">Reference to AutoConnectElement collection.</span></dt>
</dl></p>
<h2 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></h2>
<h3 id="add"><i class="fa fa-caret-right"></i> add<a class="headerlink" href="#add" title="Permanent link">&para;</a></h3>
@ -941,17 +956,42 @@
</pre></div>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">add(AutoConnectElementVT</span> <span style="color: #f8f8f2">addons)</span>
</pre></div>
Add an element to the AutoConnectAux. An added element is displayed on the custom Web page invoked from the AutoConnect menu.</p>
Add an element to the AutoConnectAux. An added element is displayed on the custom Web page invoked from the AutoConnect menu.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">addon</span><span class="apidesc">Reference of AutoConnectElements. Specifies one of the AutoConnectElements classes.</span></dd>
<dd><span class="apidef">addons</span><span class="apidesc">An array list of reference of AutoConnectElements. An <a href="https://en.cppreference.com/w/cpp/language/list_initialization">list initialization</a> of the <a href="https://en.cppreference.com/w/cpp/container/vector">std::vector</a> can be used for the addons parameter cause the actual definition of type <strong>AutoConnectElementVT</strong> is <code>std::vector&lt;std::reference_wrapper&lt;AutoConnectElement&gt;&gt;</code>.</span></dd>
</dl></p>
<h3 id="getelement"><i class="fa fa-caret-right"></i> getElement<a class="headerlink" href="#getelement" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">template</span><span style="color: #f92672">&lt;</span><span style="color: #66d9ef">typename</span> <span style="color: #f8f8f2">T</span><span style="color: #f92672">&gt;</span> <span style="color: #f8f8f2">T</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">getElement(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">name)</span>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">T</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">T</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">name)</span>
</pre></div>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectElement</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">getElement(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">name)</span>
</pre></div></p>
<p>Get registered AutoConnectElement as specified name.</p>
</pre></div>
Get a registered AutoConnectElement as specified name. If <strong>T</strong> is specified as an actual type of AutoConnectElements, it returns a reference to that instance.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">T</span><span class="apidesc">Actual type name of AutoConnectElements as <a href="apielements.html#autoconnectbutton">AutoConnectButton</a>, <a href="apielements.html#autoconnectcheckbox">AutoConnectCheckbox</a>, <a href="apielements.html#autoconnectelement">AutoConnectElement</a>, <a href="apielements.html#autoconnectinput">AutoConnectInput</a>, <a href="apielements.html#autoconnectradio">AutoConnectRadio</a>, <a href="apielements.html#autoconnectselect">AutoConnectSelect</a>, <a href="apielements.html#autoconnectsubmit">AutoConnectSubmit</a>, <a href="apielements.html#autoconnecttext">AutoConnectText</a>.</span></dd>
<dd><span class="apidef">name</span><span class="apidesc">Name of the AutoConnectElements to be retrieved.</span></dd>
<dt><strong>Return value</strong></dt><dd>A reference of the AutoConnectElements. If a type is not specified returns a pointer.</dd>
</dl></p>
<h3 id="getelements"><i class="fa fa-caret-right"></i> getElements<a class="headerlink" href="#getelements" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectElementVT</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">getElements(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</pre></div>
Get vector of reference of all elements.</p>
Get vector of reference of all elements.
<dl class="apidl">
<dt><strong>Return value</strong></dt>
<dd>A reference to std::vector of reference to AutoConnecctElements.</dd>
</dl></p>
<p>The getElements returns a reference to std::vector of reference to AutoConnecctElements. This function is provided to handle AutoConnectElemets owned by AutoConnectAux in bulk, and you can use each method of std::vector for a return value.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #75715e">// An example of getting type and name of all AutoConnectElements registered in AutoConnectAux.</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span>
<span style="color: #75715e">// some code here...</span>
<span style="color: #f8f8f2">AutoConnectElementVt</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">elements</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux.getElements();</span>
<span style="color: #66d9ef">for</span> <span style="color: #f8f8f2">(AutoConnectElement</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">elm</span> <span style="color: #f8f8f2">:</span> <span style="color: #f8f8f2">elements)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">Serial.printf(</span><span style="color: #e6db74">&quot;name&lt;%s&gt; as type %d</span><span style="color: #ae81ff">\n</span><span style="color: #e6db74">&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">elm.name.c_str(),</span> <span style="color: #f8f8f2">(</span><span style="color: #66d9ef">int</span><span style="color: #f8f8f2">)elm.typeOf());</span>
<span style="color: #f8f8f2">}</span>
</pre></div>
<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>
@ -959,7 +999,24 @@ Get vector of reference of all elements.</p>
</pre></div>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">load(Stream</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">in)</span>
</pre></div>
Load whole elements to AutoConnectAux Pages.</p>
Load all AutoConnectElements elements from JSON document into AutoConnectAux as custom Web pages. The JSON document specified by the load function must be the <a href="acjson.html#json-objects-elements-for-the-custom-web-page">document structure</a> of AutoConnectAux. Its JSON document can describe multiple pages as an array.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">in</span><span class="apidesc">Specifies the JSON document to be load. The load function can input the following objects.</p>
<ul>
<li>String : Read-only String</li>
<li>PROGMEM : Character array contained in the flash</li>
<li>Stream : An entity that inherits stream class, generally SPIFFS or SD.
</span></dd>
<dt><strong>Return value</strong></dt>
<dd><span class="apidef">true</span><span class="apidesc">JSON document as the custom Web pages successfully loaded.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">JSON document loading failed.</span></dd>
</dl></li>
</ul>
<div class="admonition hint">
<p class="admonition-title">Load multiple custom Web pages separately</p>
<p>Multiple custom Web pages can be loaded at once with JSON as an array. But it will consume a lot of memory. By loading a JSON document by page as much as possible, you can reduce memory consumption.</p>
</div>
<h3 id="loadelement"><i class="fa fa-caret-right"></i> loadElement<a class="headerlink" href="#loadelement" 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">loadElement(</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> <span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">name</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">))</span>
</pre></div>
@ -967,11 +1024,46 @@ Load whole elements to AutoConnectAux Pages.</p>
</pre></div>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">loadElement(Stream</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">in,</span> <span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">name</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">))</span>
</pre></div>
Load specified element.</p>
Load specified element from JSON document into AutoConnectAux. The JSON document specified by the loadElement function must be the <a href="acjson.html#json-object-for-autoconnectelements">AutoConnectElement document structure</a>. When loading from a JSON document that describes multiple elements, its description must be an array syntax.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">in</span><span class="apidesc">Specifies the JSON document to be load. The load function can input the following objects.</p>
<ul>
<li>String : Read-only String</li>
<li>PROGMEM : Character array contained in the flash</li>
<li>Stream : An entity that inherits stream class, generally SPIFFS or SD.
</span></dd>
<dd><span class="apidef">name</span><span class="apidesc">Specifies the name to be load. If the name is not specified, the loadElement function will load all elements contained in the JSON document.</span></dd>
<dt><strong>Return value</strong></dt>
<dd><span class="apidef">true</span><span class="apidesc">Specified AutoConnectElements successfully loaded.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">JSON document loading failed.</span></dd>
</dl></li>
</ul>
<div class="admonition caution">
<p class="admonition-title">Maybe it is an array</p>
<p>Please note that the JSON document that is the input for loadElement is an array syntax of AutoConnectElements when there are multiple elements. For example, the following JSON document has a syntax error:</p>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">{</span>
<span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Caption&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACText&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Hello, world&quot;</span>
<span style="color: #f8f8f2">}</span><span style="color: #960050; background-color: #1e0010">,</span>
<span style="color: #f8f8f2">{</span>
<span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Server&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
<span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Server address&quot;</span>
<span style="color: #f8f8f2">}</span>
</pre></div>
The outermost <code>[</code>, <code>]</code> is missing.</p>
</div>
<h3 id="menu"><i class="fa fa-caret-right"></i> menu<a class="headerlink" href="#menu" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">menu(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">post)</span>
</pre></div>
Set or reset the display as menu item for this AutoConnectAux.</p>
Set or reset the display as menu item for this AutoConnectAux. This function programmatically manipulates the menu parameter of the <a href="apiaux.html#autoconnectaux">AutoConenctAux constructor</a>.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">true</span><span class="apidesc">Show on the menu.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">Hidden on the menu.</span></dd>
</dl></p>
<h3 id="on"><i class="fa fa-caret-right"></i> on<a class="headerlink" href="#on" title="Permanent link">&para;</a></h3>
<dl>
<dt><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">on(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">AuxHandlerFunctionT</span> <span style="color: #f8f8f2">handler,</span> <span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">AutoConnectExitOrder_t</span> <span style="color: #f8f8f2">order</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">AC_EXIT_AHEAD)</span>
@ -979,9 +1071,8 @@ Set or reset the display as menu item for this AutoConnectAux.</p>
<dt>Register the handler function of the AutoConnectAux.</dt>
<dt><dl class="apidl"></dt>
<dt><dt><strong>Parameters</strong></dt></dt>
<dt><dd><span class="apidef">handler</span>A function that behaves when a request to the AutoConnectAux page occurs. AuxHandlerFunctionT type is defined by the following declaration.</dd></dt>
<dt><dd><span class="apidef"></span><code>String handler(AutoConnectAux&amp;, PageArgument&amp;)</code></dd></dt>
<dt><dd><span class="apidef">order</span>Specifies when the handler is called with the following enumeration value.</dd></dt>
<dt><dd><span class="apidef">handler</span><span class="apidesc">A function that behaves when a request to the AutoConnectAux page occurs. AuxHandlerFunctionT type is defined by the following declaration.<p class="apidesc"><code>String handler(AutoConnectAux&amp;, PageArgument&amp;)</code></p></span></dd></dt>
<dt><dd><span class="apidef">order</span><span class="apidesc">Specifies when the handler is called with the following enumeration value.</span></dt>
<dd>
<ul>
<li><strong>AC_EXIT_AHEAD</strong> :
@ -997,7 +1088,7 @@ Called after AutoConnect generates the HTML of the page. You can append to HTML
<dd>
<ul>
<li><strong>AC_EXIT_BOTH</strong> :
Called even before generating HTML and after generated.</li>
Called even before generating HTML and after generated.</dd></li>
</ul>
</dd>
</dl>
@ -1006,20 +1097,70 @@ Called even before generating HTML and after generated.</li>
<h3 id="release"><i class="fa fa-caret-right"></i> release<a class="headerlink" href="#release" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">release(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">name)</span>
</pre></div>
Release a specified AutoConnectElement.</p>
Release a specified AutoConnectElement from AutoConenctAux. The release function is provided to dynamically change the structure of the custom Web pages with the sketch. By combining the release function and the <a href="apiaux.html#add">add</a> function or the <a href="apiaux.html#loadelement">loadElement</a> function, the sketch can change the style of the custom Web page according to its behavior.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">name</span><span class="apidesc">Specifies the name of AutoConnectElements to be released.</span></dd>
<dt><strong>Return value</strong></dt>
<dd><span class="apidef">true</span><span class="apidesc">The AutoConnectElement successfully released.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">The AutoConnectElement can not be released.</span></dd>
</dl></p>
<h3 id="saveelement"><i class="fa fa-caret-right"></i> saveElement<a class="headerlink" href="#saveelement" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">saveElement(Stream</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">out,</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">vector</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">String</span><span style="color: #f92672">&gt;</span> <span style="color: #66d9ef">const</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">names</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">{})</span>
</pre></div>
Write elements of AutoConnectAux to the stream.</p>
Write elements of AutoConnectAux to the stream. The saveElement function outputs the specified AutoConenctElements as a JSON document using the <a href="https://arduinojson.org/v5/api/jsonobject/prettyprintto/">prettyPrintTo</a> function of the <a href="https://arduinojson.org/">ArduinoJson</a> library.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">out</span><span class="apidesc">Output stream to be output. SPIFFS, SD also Serial can be specified generally.</span></dd>
<dd><span class="apidef">names</span><span class="apidesc">The array of the name of AutoConnectElements to be output. If the names parameter is not specified, all AutoConnectElements registered in AutoConnectAux are output.</span></dd>
<dt><strong>Return value</strong></dt>
<dd>The number of bytes written.</dd>
</dl></p>
<div class="admonition note">
<p class="admonition-title">The output format is pretty</p>
<p>The saveElement function outputs a prettified JSON document.</p>
</div>
<h3 id="setelementvalue"><i class="fa fa-caret-right"></i> setElementValue<a class="headerlink" href="#setelementvalue" 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">setElementValue(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">name,</span> <span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">value)</span>
</pre></div>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">setElementValue(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">name,</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">vector</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">String</span><span style="color: #f92672">&gt;</span> <span style="color: #66d9ef">const</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">values)</span>
</pre></div></p>
</pre></div>
Sets the value of the specified AutoConnectElement. If values is specified as a <em>std::vector</em> of String, the element that can set the values is the <a href="apielements.html#autoconnectradio">AutoConnectRadio</a> or the <a href="apielements.html#autoconnectselect">AutoConnectSelect</a>.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">name</span><span class="apidesc">Specifies the name of the AutoConnectElements that you want to set the value.</span></dd>
<dd><span class="apidef">value</span><span class="apidesc">Specifies the value to be set.</span></dd>
<dd><span class="apidef">values</span><span class="apidesc">Specifies a reference of a <em>std::vector</em> of String. It contains the values of the AutoConnectRadio or the AutoConnectSelect.</span></dd>
<dt><strong>Return value</strong></dt>
<dd><span class="apidef">true</span><span class="apidesc">The value has been set.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">AutoConnectElements with the specified name are not registered. Or the type of the value is not consistent with the specified AutoConnectElements.</span></dd>
</dl></p>
<div class="admonition hint">
<p class="admonition-title">You can directly access the value member variable.</p>
<p>If you are gripping with the sketch to the AutoConnectElements of the target that sets the value, you can access the value member variable directly. The following sketch code has the same effect.
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span>
<span style="color: #75715e">// ... Griping the AutoConnectText here.</span>
<span style="color: #f8f8f2">aux.setElementValue(</span><span style="color: #e6db74">&quot;TEXT_FIELD&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;New value&quot;</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">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span>
<span style="color: #75715e">// ... Griping the AutoConnectText here.</span>
<span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">text</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux.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;TEXT_FIELD&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">text.value</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;New value&quot;</span><span style="color: #f8f8f2">;</span>
</pre></div>
The difference between the setElementValue and the value access with the <a href="apiaux.html#getelement">getElement</a> is the certainty of the registration state for the element. The <a href="apiaux.html#getelement">getElement</a> returns an empty object if the element is not registered then a sketch assigns the value to it. May occur unexpected results and crashes. You should use the setElementValue if its registration is unsettled.</p>
</div>
<h3 id="settitle"><i class="fa fa-caret-right"></i> setTitle<a class="headerlink" href="#settitle" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">setTitle(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">title)</span>
</pre></div>
Set the title string of the AutoConnectAux page.</p>
Set the title string of the custom Web page. This title will be displayed as the menu title of the custom Web page.
<dl class="apidl">
<dt><strong>Parameter</strong></dt>
<dd><span class="apidef">title</span><span class="apidesc">Title string to be display.</span></dd>
</dl></p>
<div class="admonition caution">
<p class="admonition-title">Not the menu title</p>
<p>The setTitle function is not set for the AutoConnect menu title. The effect of this function is that custom Web page only. To change the AutoConnect menu title use <a href="apiconfig.html#title">AutoConnectConfig::title</a>.</p>
</div>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -817,8 +819,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -829,8 +843,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
@ -1133,10 +1147,10 @@
</pre></div>
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">ap</span>SSID for SoftAP. The length should be up to 31. The default value is <strong>esp8266ap</strong> for ESP8266, <strong>esp32ap</strong> for ESP32.</dd>
<dd><span class="apidef">password</span>Password for SodtAP. The length should be from 8 to up to 63. The default value is <strong>12345678</strong>.</dd>
<dd><span class="apidef">timeout</span>The timeout value of the captive portal in [ms] units. The default value is 0.</dd>
<dd><span class="apidef">channel</span>The channel number of WIFi when SoftAP starts. The default values is 1.</dd>
<dd><span class="apidef">ap</span><span class="apidesc">SSID for SoftAP. The length should be up to 31. The default value is <strong>esp8266ap</strong> for ESP8266, <strong>esp32ap</strong> for ESP32.</span></dd>
<dd><span class="apidef">password</span><span class="apidesc">Password for SodtAP. The length should be from 8 to up to 63. The default value is <strong>12345678</strong>.</span></dd>
<dd><span class="apidef">timeout</span><span class="apidesc">The timeout value of the captive portal in [ms] units. The default value is 0.</span></dd>
<dd><span class="apidef">channel</span><span class="apidesc">The channel number of WIFi when SoftAP starts. The default values is 1.</span></dd>
</dl></p>
<h2 id="public-member-variables"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables" title="Permanent link">&para;</a></h2>
<h3 id="apid"><i class="fa fa-caret-right"></i> apid<a class="headerlink" href="#apid" title="Permanent link">&para;</a></h3>
@ -1149,7 +1163,7 @@
<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" style="width:230px;">IPAddress</span>The default value is <strong>192.168.244.1</strong></dd>
<dd><span class="apidef">IPAddress</span><span class="apidesc">The default value is <strong>192.168.244.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 />
@ -1158,8 +1172,8 @@ If the connection fails, starts the captive portal in SoftAP + STA mode.<br />
<dt><strong>Type</strong></dt>
<dd>bool</dd>
<dt><strong>Value</strong></dt>
<dd><span class="apidef" style="width:230px;">true</span>Reconnect automatically.</dd>
<dd><span class="apidef" style="width:230px;">false</span>Starts Captive Portal in SoftAP + STA mode without trying to reconnect. This is the default.</dd>
<dd><span class="apidef">true</span><span class="apidesc">Reconnect automatically.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">Starts Captive Portal in SoftAP + STA mode without trying to reconnect. This is the default.</span></dd>
</dl></p>
<p>When the autoReconnect option is enabled, an automatic connection will behave if the following conditions are satisfied.</p>
<ul>
@ -1172,8 +1186,8 @@ If the connection fails, starts the captive portal in SoftAP + STA mode.<br />
<dt><strong>Type</strong></dt>
<dd>bool</dd>
<dt><strong>Value</strong></dt>
<dd><span class="apidef" style="width:230px;">true</span>Reset after WiFi disconnected automatically.</dd>
<dd><span class="apidef" style="width:230px;">false</span>No reset.</dd>
<dd><span class="apidef">true</span><span class="apidesc">Reset after WiFi disconnected automatically.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">No reset.</span></dd>
</dl></p>
<h3 id="autorise"><i class="fa fa-caret-right"></i> autoRise<a class="headerlink" href="#autorise" title="Permanent link">&para;</a></h3>
<p>Captive portal activation switch. False for disabling the captive portal. It prevents starting the captive portal even if the connection at the first <em>WiFi.begin</em> fails.
@ -1181,8 +1195,8 @@ If the connection fails, starts the captive portal in SoftAP + STA mode.<br />
<dt><strong>Type</strong></dt>
<dd>bool</dd>
<dt><strong>Value</strong></dt>
<dd><span class="apidef" style="width:230px;">true</span>Enable the captive portal. This is the default.</dd>
<dd><span class="apidef" style="width:230px;">false</span>Disable the captive portal.</dd>
<dd><span class="apidef">true</span><span class="apidesc">Enable the captive portal. This is the default.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">Disable the captive portal.</span></dd>
</dl></p>
<h3 id="autosave"><i class="fa fa-caret-right"></i> autoSave<a class="headerlink" href="#autosave" title="Permanent link">&para;</a></h3>
<p>The credential saved automatically at the connection establishment.
@ -1190,8 +1204,8 @@ If the connection fails, starts the captive portal in SoftAP + STA mode.<br />
<dt><strong>Type</strong></dt>
<dd>AC_SAVECREDENTIAL_t</dd>
<dt><strong>Value</strong></dt>
<dd><span class="apidef" style="width:230px;">AC_SAVECREDENTIAL_AUTO</span>The credential saved automatically. This is the default.</dd>
<dd><span class="apidef" style="width:230px;">AC_SAVECREDENTIAL_NEVER</span>The credential no saved.</dd>
<dd><span class="apidef">AC_SAVECREDENTIAL_AUTO</span><span class="apidesc"></span><span class="apidef">&nbsp;</span><span class="apidesc">The credential saved automatically. This is the default.</span></dd>
<dd><span class="apidef">AC_SAVECREDENTIAL_NEVER</span><span class="apidesc"></span><span class="apidef">&nbsp;</span><span class="apidesc">The credential no saved.</span></dd>
</dl></p>
<h3 id="booturi"><i class="fa fa-caret-right"></i> bootUri<a class="headerlink" href="#booturi" title="Permanent link">&para;</a></h3>
<p>Specify the location to be redirected after module reset in the AutoConnect menu. It is given as an enumeration value of <strong>AC_ONBOOTURI_t</strong> indicating either the AutoConnect root path or the user screen home path.
@ -1199,8 +1213,8 @@ If the connection fails, starts the captive portal in SoftAP + STA mode.<br />
<dt><strong>Type</strong></dt>
<dd>AC_ONBOOTURI_t</dd>
<dt><strong>Value</strong></dt>
<dd><span class="apidef" style="width:230px;">AC_ONBOOTURI_ROOT</span>Resetting the module redirects it to the AutoConnect root path. The root path is assumed to be AUTOCONNECT_URI defined in AutoConnectDefs.h.</dd>
<dd><span class="apidef" style="width:230px;">AC_ONBOOTURI_HOME</span>It is redirected to the uri specified by <a href="apiconfig.html#homeuri"><strong>AutoConnectConfig::homeUri</strong></a>.</dd>
<dd><span class="apidef">AC_ONBOOTURI_ROOT</span><span class="apidesc"></span><span class="apidef">&nbsp;</span><span class="apidesc">Resetting the module redirects it to the AutoConnect root path. The root path is assumed to be AUTOCONNECT_URI defined in AutoConnectDefs.h.</span></dd>
<dd><span class="apidef">AC_ONBOOTURI_HOME</span><span class="apidesc"></span><span class="apidef">&nbsp;</span><span class="apidesc">It is redirected to the uri specified by <a href="apiconfig.html#homeuri"><strong>AutoConnectConfig::homeUri</strong></a>.</span></dd>
</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 />
@ -1241,7 +1255,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" style="width:230px;">IPAddress</span>The default value is <strong>192.168.244.1</strong></dd>
<dd><span class="apidef">IPAddress</span><span class="apidesc">The default value is <strong>192.168.244.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.
@ -1249,8 +1263,8 @@ The default value is 0.
<dt><strong>Type</strong></dt>
<dd>uint8_t</dd>
<dt><strong>Value</strong></dt>
<dd><span class="apidef" style="width:230px;">0</span>SSID will be appeared. This is the default.</dd>
<dd><span class="apidef" style="width:230px;">1</span>SSID will be hidden.</dd>
<dd><span class="apidef">0</span><span class="aidesc">SSID will be appeared. This is the default.</span></dd>
<dd><span class="apidef">1</span><span class="apidesc">SSID will be hidden.</span></dd>
</dl></p>
<h3 id="homeuri"><i class="fa fa-caret-right"></i> homeUri<a class="headerlink" href="#homeuri" title="Permanent link">&para;</a></h3>
<p>Sets the home path of user sketch. This path would be linked from 'HOME' in the AutoConnect menu. The default for homeUri is "/".
@ -1270,20 +1284,20 @@ The default value is 0.
<dt><strong>Type</strong></dt>
<dd>bool</dd>
<dt><strong>Value</strong></dt>
<dd><span class="apidef" style="width:230px;">true</span>Start the captive portal with <a href="api.html#begin"><strong>AutoConnect::begin</strong></a>.</dd>
<dd><span class="apidef" style="width:230px;">false</span>Enable the first WiFi.begin() and it will start captive portal when connection failed. This is default.</dd>
<dd><span class="apidef">true</span><span class="apidesc">Start the captive portal with <a href="api.html#begin"><strong>AutoConnect::begin</strong></a>.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">Enable the first WiFi.begin() and it will start captive portal when connection failed. This is default.</span></dd>
</dl></p>
<h3 id="netmask"><i class="fa fa-caret-right"></i> netmask<a class="headerlink" href="#netmask" title="Permanent link">&para;</a></h3>
<p>Sets subnet mask for Soft AP in captive portal. When AutoConnect fails the initial WiFi.begin, it starts the captive portal with the IP address specified this.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">IPAddress</span>The default value is <strong>255.255.255.0</strong></dd>
<dd><span class="apidef">IPAddress</span><span class="apidesc">The default value is <strong>255.255.255.0</strong></span></dd>
</dl></p>
<h3 id="portaltimeout"><i class="fa fa-caret-right"></i> portalTimeout<a class="headerlink" href="#portaltimeout" title="Permanent link">&para;</a></h3>
<p>Specify the timeout value of the captive portal in [ms] units. It is valid when the station is not connected and does not time out if the station is connected to the ESP module in SoftAP mode (ie Attempting WiFi connection with the portal function). If 0, the captive portal will not be timed-out.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">unsigned long</span>Captive portal timeout value. The default value is 0.</dd>
<dd><span class="apidef">unsigned long</span><span class="apidesc">Captive portal timeout value. The default value is 0.</span></dd>
</dl></p>
<h3 id="psk"><i class="fa fa-caret-right"></i> psk<a class="headerlink" href="#psk" title="Permanent link">&para;</a></h3>
<p>Sets password for SoftAP. The length should be from 8 to up to 63. The default value is <strong>12345678</strong>.
@ -1297,8 +1311,8 @@ The default value is 0.
<dt><strong>Type</strong></dt>
<dd>bool</dd>
<dt><strong>Value</strong></dt>
<dd><span class="apidef" style="width:230px;">true</span>Continue the portal function even if the captive portal times out. The STA + SoftAP mode of the ESP module continues and accepts the connection request to the AP.</dd>
<dd><span class="apidef" style="width:230px;">false</span>When the captive portal times out, STA + SoftAP mode of the ESP module is stopped. This is default.</dd>
<dd><span class="apidef">true</span><span class="apidesc">Continue the portal function even if the captive portal times out. The STA + SoftAP mode of the ESP module continues and accepts the connection request to the AP.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">When the captive portal times out, STA + SoftAP mode of the ESP module is stopped. This is default.</span></dd>
</dl></p>
<div class="admonition hint">
<p class="admonition-title">Connection request after timed-out</p>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -982,6 +984,101 @@
AutoConnectSelect
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#constructor_5" title=" Constructor" class="md-nav__link">
Constructor
</a>
</li>
<li class="md-nav__item">
<a href="#public-member-variables_5" title=" Public member variables" class="md-nav__link">
Public member variables
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#name_5" title=" name" class="md-nav__link">
name
</a>
</li>
<li class="md-nav__item">
<a href="#options" title=" options" class="md-nav__link">
options
</a>
</li>
<li class="md-nav__item">
<a href="#label_3" title=" label" class="md-nav__link">
label
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#public-member-functions_5" title=" Public member functions" class="md-nav__link">
Public member functions
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#typeof_5" title=" typeOf" class="md-nav__link">
typeOf
</a>
</li>
<li class="md-nav__item">
<a href="#add_1" title=" add" class="md-nav__link">
add
</a>
</li>
<li class="md-nav__item">
<a href="#empty_1" title=" empty" class="md-nav__link">
empty
</a>
</li>
<li class="md-nav__item">
<a href="#size" title=" size" class="md-nav__link">
size
</a>
</li>
<li class="md-nav__item">
<a href="#operator_1" title=" operator &#91;&nbsp;&#93;" class="md-nav__link">
operator &#91;&nbsp;&#93;
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
@ -1063,8 +1160,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -1075,8 +1184,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
@ -1578,6 +1687,101 @@
AutoConnectSelect
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#constructor_5" title=" Constructor" class="md-nav__link">
Constructor
</a>
</li>
<li class="md-nav__item">
<a href="#public-member-variables_5" title=" Public member variables" class="md-nav__link">
Public member variables
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#name_5" title=" name" class="md-nav__link">
name
</a>
</li>
<li class="md-nav__item">
<a href="#options" title=" options" class="md-nav__link">
options
</a>
</li>
<li class="md-nav__item">
<a href="#label_3" title=" label" class="md-nav__link">
label
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#public-member-functions_5" title=" Public member functions" class="md-nav__link">
Public member functions
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#typeof_5" title=" typeOf" class="md-nav__link">
typeOf
</a>
</li>
<li class="md-nav__item">
<a href="#add_1" title=" add" class="md-nav__link">
add
</a>
</li>
<li class="md-nav__item">
<a href="#empty_1" title=" empty" class="md-nav__link">
empty
</a>
</li>
<li class="md-nav__item">
<a href="#size" title=" size" class="md-nav__link">
size
</a>
</li>
<li class="md-nav__item">
<a href="#operator_1" title=" operator &#91;&nbsp;&#93;" class="md-nav__link">
operator &#91;&nbsp;&#93;
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
@ -1619,28 +1823,28 @@
</pre></div>
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">name</span>The element name.</dd>
<dd><span class="apidef">value</span>Value of the element.</dd>
<dd><span class="apidef">action</span>Native code of the action script executed when the button is clicked.</dd>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">value</span><span class="apidesc">Value of the element.</span></dd>
<dd><span class="apidef">action</span><span class="apidesc">Native code of the action script executed when the button is clicked.</span></dd>
</dl></p>
<h3 id="public-member-variables"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables" title="Permanent link">&para;</a></h3>
<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.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="value"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value" title="Permanent link">&para;</a></h4>
<p>Value of the element.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="action"><i class="fa fa-caret-right"></i> action<a class="headerlink" href="#action" title="Permanent link">&para;</a></h4>
<p>HTML native code of the action script to be executed when the button is clicked. It is mostly used with a JavaScript to activate a script.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup>
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></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="typeof"><i class="fa fa-caret-right"></i> typeOf<a class="headerlink" href="#typeof" title="Permanent link">&para;</a></h4>
@ -1657,35 +1861,35 @@ Returns type of AutoConnectElement.
</pre></div>
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">name</span>The element name.</dd>
<dd><span class="apidef">value</span>Value of the element.</dd>
<dd><span class="apidef">label</span>A label string prefixed to the checkbox.</dd>
<dd><span class="apidef">check</span>Checked state of the checkbox.</dd>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">value</span><span class="apidesc">Value of the element.</span></dd>
<dd><span class="apidef">label</span><span class="apidesc">A label string prefixed to the checkbox.</span></dd>
<dd><span class="apidef">check</span><span class="apidesc">Checked state of the checkbox.</span></dd>
</dl></p>
<h3 id="public-member-variables_1"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables_1" title="Permanent link">&para;</a></h3>
<h4 id="name_1"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name_1" title="Permanent link">&para;</a></h4>
<p>The element name.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="value_1"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value_1" title="Permanent link">&para;</a></h4>
<p>Value of the element. It becomes a value attribute of an HTML <code class="codehilite"><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">input</span> <span style="color: #a6e22e">type</span><span style="color: #f92672">=</span><span style="color: #e6db74">&quot;checkbox&quot;</span><span style="color: #f8f8f2">&gt;</span></code> tag.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></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.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="checked"><i class="fa fa-caret-right"></i> checked<a class="headerlink" href="#checked" title="Permanent link">&para;</a></h4>
<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" style="width:230px;">Boolean</span></dd>
<dd><span class="apidef">Boolean</span><span class="apidesc"></span></dd>
</dl></p>
<h3 id="public-member-functions_1"><i class="fa fa-code"></i> Public member functions<a class="headerlink" href="#public-member-functions_1" title="Permanent link">&para;</a></h3>
<h4 id="typeof_1"><i class="fa fa-caret-right"></i> typeOf<a class="headerlink" href="#typeof_1" title="Permanent link">&para;</a></h4>
@ -1702,21 +1906,21 @@ Returns type of AutoConnectElement.
</pre></div>
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">name</span>The element name.</dd>
<dd><span class="apidef">value</span>Value of the element.</dd>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">value</span><span class="apidesc">Value of the element.</span></dd>
</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="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.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="value_2"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value_2" title="Permanent link">&para;</a></h4>
<p>Value of the element. It is output as HTML as it is as a source for generating HTML code.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h3 id="public-member-functions_2"><i class="fa fa-code"></i> Public member functions<a class="headerlink" href="#public-member-functions_2" title="Permanent link">&para;</a></h3>
<h4 id="typeof_2"><i class="fa fa-caret-right"></i> typeOf<a class="headerlink" href="#typeof_2" title="Permanent link">&para;</a></h4>
@ -1733,42 +1937,42 @@ Returns type of AutoConnectElement.
</pre></div>
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">name</span>The element name.</dd>
<dd><span class="apidef">value</span>Value of the element.</dd>
<dd><span class="apidef">label</span>Label string.</dd>
<dd><span class="apidef">pattern</span>Regular expression string for checking data format.</dd>
<dd><span class="apidef">placeholder</span>A placeholder string.</dd>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">value</span><span class="apidesc">Value of the element.</span></dd>
<dd><span class="apidef">label</span><span class="apidesc">Label string.</span></dd>
<dd><span class="apidef">pattern</span><span class="apidesc">Regular expression string for checking data format.</span></dd>
<dd><span class="apidef">placeholder</span><span class="apidesc">A placeholder string.</span></dd>
</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="name_3"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name_3" title="Permanent link">&para;</a></h4>
<p>The element name.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="value_3"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value_3" title="Permanent link">&para;</a></h4>
<p>Value of the element. It becomes a value attribute of an HTML <code class="codehilite"><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">input</span> <span style="color: #a6e22e">type</span><span style="color: #f92672">=</span><span style="color: #e6db74">&quot;text&quot;</span><span style="color: #f8f8f2">&gt;</span></code> tag. An entered text in the custom Web page will be sent with a query string of the form. The value set before accessing the page is displayed as the initial value.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></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 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.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="pattern"><i class="fa fa-caret-right"></i> pattern<a class="headerlink" href="#pattern" title="Permanent link">&para;</a></h4>
<p>A pattern specifies a regular expression that the input-box's value is checked against on form submission.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="placeholder"><i class="fa fa-caret-right"></i> placeholder<a class="headerlink" href="#placeholder" title="Permanent link">&para;</a></h4>
<p>A placeholder is an option string. Specification of a placeholder will generate a <code>placeholder</code> attribute for the input tag.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h3 id="public-member-functions_3"><i class="fa fa-code"></i> Public member functions<a class="headerlink" href="#public-member-functions_3" title="Permanent link">&para;</a></h3>
<h4 id="typeof_3"><i class="fa fa-caret-right"></i> typeOf<a class="headerlink" href="#typeof_3" title="Permanent link">&para;</a></h4>
@ -1785,46 +1989,47 @@ Returns type of AutoConnectElement.
</pre></div>
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">name</span>The element name.</dd>
<dd><span class="apidef">values</span>An array of values of the radio buttons. Specifies an <a href="https://en.cppreference.com/w/cpp/container/vector">std::vector</a> object.</dd>
<dd><span class="apidef">label</span>Label string.</dd>
<dd><span class="apidef">order</span>The direction to arrange the radio buttons.</dd>
<dd><span class="apidef">checked</span>An index to be checked in the radio buttons.</dd>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">values</span><span class="apidesc">An array of values of the radio buttons. Specifies an <a href="https://en.cppreference.com/w/cpp/container/vector">std::vector</a> object.</span></dd>
<dd><span class="apidef">label</span><span class="apidesc">Label string.</span></dd>
<dd><span class="apidef">order</span><span class="apidesc">The direction to arrange the radio buttons.</span></dd>
<dd><span class="apidef">checked</span><span class="apidesc">An index to be checked in the radio buttons.</span></dd>
</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="name_4"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name_4" title="Permanent link">&para;</a></h4>
<p>The element name.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="values"><i class="fa fa-caret-right"></i> values<a class="headerlink" href="#values" title="Permanent link">&para;</a></h4>
<p>An array of String type for the radio button options. It is an initialization list can be used. The <code class="codehilite"><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">input</span> <span style="color: #a6e22e">type</span><span style="color: #f92672">=</span><span style="color: #e6db74">&quot;radio&quot;</span><span style="color: #f8f8f2">&gt;</span></code> tags will be generated from each entry in the values.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">std::vector&lt;String&gt;</span></dd>
<dd><span class="apidef">std::vector&lt;String&gt;</span><span class="apidesc"></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 will be arranged in the left or top of the radio buttons according to the <a href="#order">order</a>.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">String</span></dd>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="order"><i class="fa fa-caret-right"></i> order<a class="headerlink" href="#order" title="Permanent link">&para;</a></h4>
<p>Specifies the direction to arrange the radio buttons. A label will place in the left or the top according to the <strong><em>order</em></strong>. It is a value of <strong>ACArrange_t</strong> type and accepts one of the following:</p>
<ul>
<li><strong><code>AC_Horizontal</code></strong> : Horizontal arrangement.</li>
<li><strong><code>AC_Vertical</code></strong> : Vertical arrangement.<br />
<p>Specifies the direction to arrange the radio buttons. A label will place in the left or the top according to the <strong><em>order</em></strong>. It is a value of <strong>ACArrange_t</strong> type and accepts one of the following:
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">ACArrange_t</span></dd>
<dd><span class="apidef">ACArrange_t</span><span class="apidesc"></p>
<ul>
<li><strong><code>AC_Horizontal</code></strong> : Horizontal arrangement.</li>
<li><strong><code>AC_Vertical</code></strong> : Vertical arrangement.
</span></dd>
</dl></li>
</ul>
<h4 id="checked_1"><i class="fa fa-caret-right"></i> checked<a class="headerlink" href="#checked_1" title="Permanent link">&para;</a></h4>
<p>Specifies the index number (1-based) of the <strong>values</strong> to be checked. If this parameter is not specified neither item is checked.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef" style="width:230px;">uint8_t</span></dd>
<dd><span class="apidef">uint8_t</span><span class="apidesc"></span></dd>
</dl></p>
<h3 id="public-member-functions_4"><i class="fa fa-code"></i> Public member functions<a class="headerlink" href="#public-member-functions_4" title="Permanent link">&para;</a></h3>
<h4 id="typeof_4"><i class="fa fa-caret-right"></i> typeOf<a class="headerlink" href="#typeof_4" title="Permanent link">&para;</a></h4>
@ -1841,7 +2046,7 @@ Returns type of AutoConnectElement.
Adds an option for the radio button.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">value</span>An option string to add to the radio button.</dd>
<dd><span class="apidef">value</span><span class="apidesc">An option string to add to the radio button.</span></dd>
</dl></p>
<h4 id="check"><i class="fa fa-caret-right"></i> check<a class="headerlink" href="#check" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">check(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">value)</span>
@ -1849,7 +2054,7 @@ Adds an option for the radio button.
Indicates the check of the specified option for the radio buttons. You can use the <strong>check</strong> function for checking dynamically with arbitrary of the radio button.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">value</span>An option string to be checked.</dd>
<dd><span class="apidef">value</span><span class="apidesc">An option string to be checked.</span></dd>
</dl></p>
<h4 id="empty"><i class="fa fa-caret-right"></i> empty<a class="headerlink" href="#empty" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">empty(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">reserve</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">)</span>
@ -1857,7 +2062,7 @@ Indicates the check of the specified option for the radio buttons. You can use t
Clear the array of option strings that AutoConnectRadio has in values. When a <strong><em>reserve</em></strong> parameter is specified, a vector container of that size is reserved.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">reserve</span>Reserved size of a container for option strings.</dd>
<dd><span class="apidef">reserve</span><span class="apidesc">Reserved size of a container for option strings.</span></dd>
</dl></p>
<h4 id="operator"><i class="fa fa-caret-right"></i> operator &#91;&nbsp;&#93;<a class="headerlink" href="#operator" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #66d9ef">operator</span><span style="color: #f8f8f2">[]</span> <span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">n)</span>
@ -1865,7 +2070,7 @@ Clear the array of option strings that AutoConnectRadio has in values. When a <s
Returns the option string of the index specified by <strong><em>n</em></strong>.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">n</span>Index of values array to return.</dd>
<dd><span class="apidef">n</span><span class="apidesc">Index of values array to return.</span></dd>
</dl></p>
<h4 id="value_4"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value_4" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span> <span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">value(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span> <span style="color: #66d9ef">const</span>
@ -1876,6 +2081,59 @@ Returns current checked option of the radio buttons.
<dd>A String of an option current checked. If there is no checked option, a null string returned.</dd>
</dl></p>
<h2 id="autoconnectselect">AutoConnectSelect<a class="headerlink" href="#autoconnectselect" title="Permanent link">&para;</a></h2>
<h3 id="constructor_5"><i class="fa fa-code"></i> Constructor<a class="headerlink" href="#constructor_5" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectSelect(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">name</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">vector</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">String</span><span style="color: #f92672">&gt;</span> <span style="color: #66d9ef">const</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">options</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">{},</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">label</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">)</span>
</pre></div>
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">options</span><span class="apidesc">An array of options of the select element. Specifies an <a href="https://en.cppreference.com/w/cpp/container/vector">std::vector</a> object.</span></dd>
<dd><span class="apidef">label</span><span class="apidesc">Label string.</span></dd>
</dl></p>
<h3 id="public-member-variables_5"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables_5" title="Permanent link">&para;</a></h3>
<h4 id="name_5"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name_5" title="Permanent link">&para;</a></h4>
<p>The element name.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="options"><i class="fa fa-caret-right"></i> options<a class="headerlink" href="#options" title="Permanent link">&para;</a></h4>
<p>An array of String type for the selection options. It is an initialization list can be used. The <code class="codehilite"><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">option</span> <span style="color: #a6e22e">value</span><span style="color: #f8f8f2">&gt;</span></code> tags will be generated from each entry in the options.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">std::vector&lt;String&gt;</span><span class="apidesc"></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 top of the selection list.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h3 id="public-member-functions_5"><i class="fa fa-code"></i> Public member functions<a class="headerlink" href="#public-member-functions_5" title="Permanent link">&para;</a></h3>
<h4 id="typeof_5"><i class="fa fa-caret-right"></i> typeOf<a class="headerlink" href="#typeof_5" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">ACElement_t</span> <span style="color: #f8f8f2">typeOf(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</pre></div>
Returns type of AutoConnectElement.
<dl class="apidl">
<dt><strong>Return value</strong></dt>
<dd>AC_Select</dd>
</dl></p>
<h4 id="add_1"><i class="fa fa-caret-right"></i> add<a class="headerlink" href="#add_1" title="Permanent link">&para;</a></h4>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">add(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">option)</span>
</pre></div>
<h4 id="empty_1"><i class="fa fa-caret-right"></i> empty<a class="headerlink" href="#empty_1" title="Permanent link">&para;</a></h4>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">empty(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">reserve</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">)</span>
</pre></div>
<h4 id="size"><i class="fa fa-caret-right"></i> size<a class="headerlink" href="#size" title="Permanent link">&para;</a></h4>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">size(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</pre></div>
<h4 id="operator_1"><i class="fa fa-caret-right"></i> operator &#91;&nbsp;&#93;<a class="headerlink" href="#operator_1" title="Permanent link">&para;</a></h4>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #66d9ef">operator</span><span style="color: #f8f8f2">[]</span> <span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">n)</span>
</pre></div>
<h2 id="autoconnectsubmit">AutoConnectSubmit<a class="headerlink" href="#autoconnectsubmit" title="Permanent link">&para;</a></h2>
<h2 id="autoconnecttext">AutoConnectText<a class="headerlink" href="#autoconnecttext" title="Permanent link">&para;</a></h2>
<div class="footnote">

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -616,8 +618,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -628,8 +642,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -707,8 +709,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -719,8 +733,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -578,8 +580,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -590,8 +604,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>

@ -35,13 +35,19 @@
color: rgba(102,217,224,1);
}
.apidl {
margin-left: 20px;
}
.apidef {
display: inline-block;
display: block;
float: left;
width: 100px;
}
.apidl {
margin-left: 20px;
.apidesc {
display: inline-block;
width: calc(100% - 100px);
}
.ulsty-edit > li:before {

File diff suppressed because it is too large Load Diff

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -578,8 +580,8 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
@ -590,8 +592,20 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
<li class="md-nav__item">
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
@ -761,8 +775,8 @@
</li>
<li class="md-nav__item">
<a href="#i-can-not-see-the-custom-web-page" title=" I can not see the custom web page." class="md-nav__link">
I can not see the custom web page.
<a href="#i-cannot-see-the-custom-web-page" title=" I cannot see the custom Web page." class="md-nav__link">
I cannot see the custom Web page.
</a>
</li>
@ -1013,8 +1027,8 @@
</li>
<li class="md-nav__item">
<a href="#i-can-not-see-the-custom-web-page" title=" I can not see the custom web page." class="md-nav__link">
I can not see the custom web page.
<a href="#i-cannot-see-the-custom-web-page" title=" I cannot see the custom Web page." class="md-nav__link">
I cannot see the custom Web page.
</a>
</li>
@ -1300,8 +1314,8 @@ wdt reset
<p>It consumes about 2K bytes in the static and about 12K bytes are consumed at the moment when menu executed.</p>
<h2 id="i-cannot-complete-to-wi-fi-login-from-smartphone"><i class="fa fa-question-circle"></i> I cannot complete to Wi-Fi login from smartphone.<a class="headerlink" href="#i-cannot-complete-to-wi-fi-login-from-smartphone" title="Permanent link">&para;</a></h2>
<p>Because AutoConnect does not send a login success response to the captive portal requests from the smartphone. The login success response varies iOS, Android and Windows. By analyzing the request URL of different login success inquiries for each OS, the correct behavior can be implemented, but not yet. Please resets ESP8266 from the AutoConnect menu.</p>
<h2 id="i-can-not-see-the-custom-web-page"><i class="fa fa-question-circle"></i> I can not see the custom web page.<a class="headerlink" href="#i-can-not-see-the-custom-web-page" title="Permanent link">&para;</a></h2>
<p>JSON parse error</p>
<h2 id="i-cannot-see-the-custom-web-page"><i class="fa fa-question-circle"></i> I cannot see the custom Web page.<a class="headerlink" href="#i-cannot-see-the-custom-web-page" title="Permanent link">&para;</a></h2>
<p>If the sketch is correct, a JSON syntax error may have occurred. In this case, activate the <a href="faq.html#3-turn-on-the-debug-log-options">AC_DEBUG</a> and rerun. If you take the message of JSON syntax error, the <a href="https://arduinojson.org/v5/assistant/">Json Assistant</a> helps syntax checking. This online tool is provided by the author of ArduinoJson and is most consistent for the AutoConnect. </p>
<h2 id="autoconnect-behaves-not-stable-with-my-sketch-yet"><i class="fa fa-question-circle"></i> AutoConnect behaves not stable with my sketch yet.<a class="headerlink" href="#autoconnect-behaves-not-stable-with-my-sketch-yet" title="Permanent link">&para;</a></h2>
<p>If AutoConnect behavior is not stable with your sketch, you can try the following measures.</p>
<h3 id="1-change-wifi-channel">1. Change WiFi channel<a class="headerlink" href="#1-change-wifi-channel" title="Permanent link">&para;</a></h3>
@ -1328,7 +1342,17 @@ wdt reset
</pre></div>
<h3 id="4-reports-the-issue-to-autoconnect-repository-on-github">4. Reports the issue to AutoConnect repository on Github<a class="headerlink" href="#4-reports-the-issue-to-autoconnect-repository-on-github" title="Permanent link">&para;</a></h3>
<p>If you can not solve AutoConnect problems please report to <a href="https://github.com/Hieromon/AutoConnect/issues">Issues</a>. And please make your question comprehensively, not a statement. Include all relevant information.</p>
<p>If you can not solve AutoConnect problems please report to <a href="https://github.com/Hieromon/AutoConnect/issues">Issues</a>. And please make your question comprehensively, not a statement. Include all relevant information as follows.</p>
<ul>
<li>Hardware module</li>
<li>Arduino core Version (including the upstream tag ID.)</li>
<li>Operating System which you use</li>
<li>lwIP variant</li>
<li>Problem description</li>
<li>If you have a STACK DUMP decoded result with formatted by the code block tag</li>
<li>The sketch code with formatted by the code block tag</li>
<li>Debug messages output</li>
</ul>
<div class="footnote">
<hr />
<ol>
@ -1360,7 +1384,7 @@ wdt reset
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid">
<a href="menuize.html" title="Constucting menu" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<a href="wojson.html" title="Custom Web pages w/o JSON" 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>
@ -1369,7 +1393,7 @@ wdt reset
<span class="md-footer-nav__direction">
Previous
</span>
Constucting menu
Custom Web pages w/o JSON
</span>
</div>
</a>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -646,8 +648,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -658,8 +672,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -711,8 +713,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -723,8 +737,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
@ -1046,13 +1060,13 @@
</a>
<a href="menuize.html" title="Constucting menu" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
<a href="datatips.html" title="Tips for data conversion" 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>
Constucting menu
Tips for data conversion
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 161 KiB

After

Width:  |  Height:  |  Size: 243 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 189 KiB

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -711,8 +713,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -723,8 +737,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
@ -930,7 +944,7 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
<div style="display:block;height:425px;">
<img style="float:left;width:380px;" src="./images/aux_json.png">
<img style="float:left;margin-top:200px;margin-left:10px;margin-right:10px;width:32px;" src="./images/arrow_right.png">
<img style="float:left;width:240px" src="./images/AutoConnectAux.gif">
<span style="float:left;width:242px;height:425px;border:1px solid lightgrey;"><img data-gifffer="./images/aux_ov.gif" data-gifffer-width="240" data-gifffer-height="423" /></span>
</div>
<h2 id="installation">Installation<a class="headerlink" href="#installation" title="Permanent link">&para;</a></h2>

@ -1 +1 @@
(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory();else if(typeof define==="function"&&define.amd)define("Gifffer",[],factory);else if(typeof exports==="object")exports["Gifffer"]=factory();else root["Gifffer"]=factory()})(this,function(){var d=document;var playSize=60;var Gifffer=function(options){var images,i=0,gifs=[];images=d.querySelectorAll("[data-gifffer]");for(;i<images.length;++i)process(images[i],gifs,options);return gifs};function formatUnit(v){return v+(v.toString().indexOf("%")>0?"":"px")}function parseStyles(styles){var stylesStr="";for(prop in styles)stylesStr+=prop+":"+styles[prop]+";";return stylesStr}function createContainer(w,h,el,altText,opts){var alt;var con=d.createElement("BUTTON");var cls=el.getAttribute("class");var id=el.getAttribute("id");var playButtonStyles=opts&&opts.playButtonStyles?parseStyles(opts.playButtonStyles):["width:"+playSize+"px","height:"+playSize+"px","border-radius:"+playSize/2+"px","background:rgba(0, 0, 0, 0.3)","position:absolute","top:50%","left:50%","margin:-"+playSize/2+"px"].join(";");var playButtonIconStyles=opts&&opts.playButtonIconStyles?parseStyles(opts.playButtonIconStyles):["width: 0","height: 0","border-top: 14px solid transparent","border-bottom: 14px solid transparent","border-left: 14px solid rgba(0, 0, 0, 0.5)","position: absolute","left: 26px","top: 16px"].join(";");cls?con.setAttribute("class",el.getAttribute("class")):null;id?con.setAttribute("id",el.getAttribute("id")):null;con.setAttribute("style","position:relative;cursor:pointer;background:none;border:none;padding:0;");con.setAttribute("aria-hidden","true");var play=d.createElement("DIV");play.setAttribute("class","gifffer-play-button");play.setAttribute("style",playButtonStyles);var trngl=d.createElement("DIV");trngl.setAttribute("style",playButtonIconStyles);play.appendChild(trngl);if(altText){alt=d.createElement("p");alt.setAttribute("class","gifffer-alt");alt.setAttribute("style","border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px;");alt.innerText=altText+", image"}con.appendChild(play);el.parentNode.replaceChild(con,el);altText?con.parentNode.insertBefore(alt,con.nextSibling):null;return{c:con,p:play}}function calculatePercentageDim(el,w,h,wOrig,hOrig){var parentDimW=el.parentNode.offsetWidth;var parentDimH=el.parentNode.offsetHeight;var ratio=wOrig/hOrig;if(w.toString().indexOf("%")>0){w=parseInt(w.toString().replace("%",""));w=w/100*parentDimW;h=w/ratio}else if(h.toString().indexOf("%")>0){h=parseInt(h.toString().replace("%",""));h=h/100*parentDimW;w=h*ratio}return{w:w,h:h}}function process(el,gifs,options){var url,con,c,w,h,duration,play,gif,playing=false,cc,isC,durationTimeout,dims,altText;url=el.getAttribute("data-gifffer");w=el.getAttribute("data-gifffer-width");h=el.getAttribute("data-gifffer-height");duration=el.getAttribute("data-gifffer-duration");altText=el.getAttribute("data-gifffer-alt");el.style.display="block";c=document.createElement("canvas");isC=!!(c.getContext&&c.getContext("2d"));if(w&&h&&isC)cc=createContainer(w,h,el,altText,options);el.onload=function(){if(!isC)return;w=w||el.width;h=h||el.height;if(!cc)cc=createContainer(w,h,el,altText,options);con=cc.c;play=cc.p;dims=calculatePercentageDim(con,w,h,el.width,el.height);gifs.push(con);con.addEventListener("click",function(){clearTimeout(durationTimeout);if(!playing){playing=true;gif=document.createElement("IMG");gif.setAttribute("style","width:100%;height:100%;");gif.setAttribute("data-uri",Math.floor(Math.random()*1e5)+1);setTimeout(function(){gif.src=url},0);con.removeChild(play);con.removeChild(c);con.appendChild(gif);if(parseInt(duration)>0){durationTimeout=setTimeout(function(){playing=false;con.appendChild(play);con.removeChild(gif);con.appendChild(c);gif=null},duration)}}else{playing=false;con.appendChild(play);con.removeChild(gif);con.appendChild(c);gif=null}});c.width=dims.w;c.height=dims.h;c.getContext("2d").drawImage(el,0,0,dims.w,dims.h);con.appendChild(c);con.setAttribute("style","position:relative;cursor:pointer;width:"+dims.w+"px;height:"+dims.h+"px;background:none;border:none;padding:0;");c.style.width="100%";c.style.height="100%";if(w.toString().indexOf("%")>0&&h.toString().indexOf("%")>0){con.style.width=w;con.style.height=h}else if(w.toString().indexOf("%")>0){con.style.width=w;con.style.height="inherit"}else if(h.toString().indexOf("%")>0){con.style.width="inherit";con.style.height=h}else{con.style.width=dims.w+"px";con.style.height=dims.h+"px"}};el.src=url}return Gifffer});
(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory();else if(typeof define==="function"&&define.amd)define("Gifffer",[],factory);else if(typeof exports==="object")exports["Gifffer"]=factory();else root["Gifffer"]=factory()})(this,function(){if(typeof window==="undefined"||typeof document==="undefined"){return}var d=document;var playSize=60;var Gifffer=function(options){var images,i=0,gifs=[];images=d.querySelectorAll("[data-gifffer]");for(;i<images.length;++i)process(images[i],gifs,options);return gifs};function formatUnit(v){return v+(v.toString().indexOf("%")>0?"":"px")}function parseStyles(styles){var stylesStr="";for(prop in styles)stylesStr+=prop+":"+styles[prop]+";";return stylesStr}function createContainer(w,h,el,altText,opts){var alt;var con=d.createElement("BUTTON");var cls=el.getAttribute("class");var id=el.getAttribute("id");var playButtonStyles=opts&&opts.playButtonStyles?parseStyles(opts.playButtonStyles):["width:"+playSize+"px","height:"+playSize+"px","border-radius:"+playSize/2+"px","background:rgba(0, 0, 0, 0.3)","position:absolute","top:50%","left:50%","margin:-"+playSize/2+"px"].join(";");var playButtonIconStyles=opts&&opts.playButtonIconStyles?parseStyles(opts.playButtonIconStyles):["width: 0","height: 0","border-top: 14px solid transparent","border-bottom: 14px solid transparent","border-left: 14px solid rgba(0, 0, 0, 0.5)","position: absolute","left: 26px","top: 16px"].join(";");cls?con.setAttribute("class",el.getAttribute("class")):null;id?con.setAttribute("id",el.getAttribute("id")):null;con.setAttribute("style","position:relative;cursor:pointer;background:none;border:none;padding:0;");con.setAttribute("aria-hidden","true");var play=d.createElement("DIV");play.setAttribute("class","gifffer-play-button");play.setAttribute("style",playButtonStyles);var trngl=d.createElement("DIV");trngl.setAttribute("style",playButtonIconStyles);play.appendChild(trngl);if(altText){alt=d.createElement("p");alt.setAttribute("class","gifffer-alt");alt.setAttribute("style","border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px;");alt.innerText=altText+", image"}con.appendChild(play);el.parentNode.replaceChild(con,el);altText?con.parentNode.insertBefore(alt,con.nextSibling):null;return{c:con,p:play}}function calculatePercentageDim(el,w,h,wOrig,hOrig){var parentDimW=el.parentNode.offsetWidth;var parentDimH=el.parentNode.offsetHeight;var ratio=wOrig/hOrig;if(w.toString().indexOf("%")>0){w=parseInt(w.toString().replace("%",""));w=w/100*parentDimW;h=w/ratio}else if(h.toString().indexOf("%")>0){h=parseInt(h.toString().replace("%",""));h=h/100*parentDimW;w=h*ratio}return{w:w,h:h}}function process(el,gifs,options){var url,con,c,w,h,duration,play,gif,playing=false,cc,isC,durationTimeout,dims,altText;url=el.getAttribute("data-gifffer");w=el.getAttribute("data-gifffer-width");h=el.getAttribute("data-gifffer-height");duration=el.getAttribute("data-gifffer-duration");altText=el.getAttribute("data-gifffer-alt");el.style.display="block";c=document.createElement("canvas");isC=!!(c.getContext&&c.getContext("2d"));if(w&&h&&isC)cc=createContainer(w,h,el,altText,options);el.onload=function(){if(!isC)return;w=w||el.width;h=h||el.height;if(!cc)cc=createContainer(w,h,el,altText,options);con=cc.c;play=cc.p;dims=calculatePercentageDim(con,w,h,el.width,el.height);gifs.push(con);con.addEventListener("click",function(){clearTimeout(durationTimeout);if(!playing){playing=true;gif=document.createElement("IMG");gif.setAttribute("style","width:100%;height:100%;");gif.setAttribute("data-uri",Math.floor(Math.random()*1e5)+1);setTimeout(function(){gif.src=url},0);con.removeChild(play);con.removeChild(c);con.appendChild(gif);if(parseInt(duration)>0){durationTimeout=setTimeout(function(){playing=false;con.appendChild(play);con.removeChild(gif);con.appendChild(c);gif=null},duration)}}else{playing=false;con.appendChild(play);con.removeChild(gif);con.appendChild(c);gif=null}});c.width=dims.w;c.height=dims.h;c.getContext("2d").drawImage(el,0,0,dims.w,dims.h);con.appendChild(c);con.setAttribute("style","position:relative;cursor:pointer;width:"+dims.w+"px;height:"+dims.h+"px;background:none;border:none;padding:0;");c.style.width="100%";c.style.height="100%";if(w.toString().indexOf("%")>0&&h.toString().indexOf("%")>0){con.style.width=w;con.style.height=h}else if(w.toString().indexOf("%")>0){con.style.width=w;con.style.height="inherit"}else if(h.toString().indexOf("%")>0){con.style.width="inherit";con.style.height=h}else{con.style.width=dims.w+"px";con.style.height=dims.h+"px"}};el.src=url}return Gifffer});

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -574,8 +576,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -586,8 +600,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>

@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -668,8 +670,20 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
@ -680,8 +694,8 @@
<li class="md-nav__item">
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
Constucting menu
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
@ -874,11 +888,11 @@ Enter SSID and Passphrase and tap "<strong>apply</strong>" to starts WiFi connec
<p>You can change the HOME path using the AutoConnect API. The <a href="api.html#home"><strong>AutoConnect::home</strong></a> function sets the URI as a link of the HOME item of the AutoConnect menu.</p>
<h2 id="extend-autoconnect-menu-with-your-sketches"><i class="fa fa-bars"></i> Extend AutoConnect menu with your sketches<a class="headerlink" href="#extend-autoconnect-menu-with-your-sketches" title="Permanent link">&para;</a></h2>
<p>The AutoConnect menu can contain custom items of your own sketch. It works for the custom Web pages by <a href="acintro.html">AutoConnectAux</a>, addition to the request handler for ESP8266WebServer class that is registered by the ESP8266WebServer::on function or WebServer::on for ESP32. That is, you can make it as a menu item to invoke a legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser">FSBrowser</a> to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code.</p>
<p>The AutoConnect menu can contain HTML pages of your sketch as custom items. It works for HTML pages implemented by <strong>ESP8266WebServer::on</strong> handler or <strong>WebServer::on</strong> handler for ESP32. That is, you can make it as menu items to invoke the legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser">FSBrowser</a> to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code.</p>
<div style="float:left;width:auto;height:420px;"><img style="width:auto;height:420px;" src="./images/fsbmenu.png"></div>
<p><img style="margin-left:70px;width:auto;height:420px;" src="./images/fsbmenu_expand.png"></p>
<p>The procedure to extend the AutoConnect menu is described in the <a href="advancedusage.html#cast-items-of-your-sketch-own-into-the-autoccnnect-menu">Advanced usage section</a>.</p>
<p>You can extend the AutoConnect menu to match legacy sketches and according to the procedure described in the <a href="advancedusage.html#cast-the-legacy-html-pages-as-the-add-on-menu-items">Advanced Usage section</a>.</p>

@ -42,7 +42,7 @@
<title>Constucting menu - AutoConnect for ESP8266/ESP32</title>
<title>Constucting the menu - AutoConnect for ESP8266/ESP32</title>
@ -73,6 +73,8 @@
<link rel="stylesheet" href="css/extra.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
@ -141,7 +143,7 @@
AutoConnect for ESP8266/ESP32
</span>
<span class="md-header-nav__topic">
Constucting menu
Constucting the menu
</span>
@ -582,8 +584,8 @@
<li class="md-nav__item">
<a href="datatips.md" title="Tips for data retrieval" class="md-nav__link">
Tips for data retrieval
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
@ -601,11 +603,11 @@
<label class="md-nav__link md-nav__link--active" for="__toc">
Constucting menu
Constucting the menu
</label>
<a href="menuize.html" title="Constucting menu" class="md-nav__link md-nav__link--active">
Constucting menu
<a href="menuize.html" title="Constucting the menu" class="md-nav__link md-nav__link--active">
Constucting the menu
</a>
@ -648,6 +650,18 @@
</li>
<li class="md-nav__item">
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
</ul>
</nav>
</li>
@ -745,10 +759,10 @@
<h1>Constucting menu</h1>
<h1>Constucting the menu</h1>
<h2 id="what-menus-can-be-made-using-autoconnect">What menus can be made using AutoConnect<a class="headerlink" href="#what-menus-can-be-made-using-autoconnect" title="Permanent link">&para;</a></h2>
<p>AutoConnect generates a menu dynamically depending on the instantiated <a href="acintro.html#how-it-works">AutoConnectAux</a> at the sketch executing time. Usually, it is a collection of <a href="acelements.html">AutoConnectElement</a>. In addition to this, you can generate a menu from only AutoConnectAux, without AutoConnectElements. That is, you can easily make the built-in menu with legacy sketches of yours.</p>
<p>AutoConnect generates a menu dynamically depending on the instantiated <a href="acintro.html#how-it-works">AutoConnectAux</a> at the sketch executing time. Usually, it is a collection of <a href="acelements.html">AutoConnectElement</a>. In addition to this, you can generate a menu from only AutoConnectAux, without AutoConnectElements.<br>In other words, you can easily create a built-in menu featuring the WiFi connection facility embedding the legacy web pages.</p>
<h2 id="basic-mechanism-of-menu-generation">Basic mechanism of menu generation<a class="headerlink" href="#basic-mechanism-of-menu-generation" title="Permanent link">&para;</a></h2>
<p>The sketch can display the <a href="menu.html">AutoConnect menu</a> by following three patterns depending on AutoConnect-API usage.</p>
<dl>
@ -763,9 +777,8 @@
<h2 id="place-the-item-for-the-legacy-sketches-on-the-menu">Place the item for the legacy sketches on the menu<a class="headerlink" href="#place-the-item-for-the-legacy-sketches-on-the-menu" title="Permanent link">&para;</a></h2>
<p>To implement this with your sketch, use only the <a href="apiaux.html#autoconnectaux">AutoConnectAux</a> constructed with the title and URI of that page. <a href="acelements.html">AutoConnectElements</a> is not required.</p>
<p>The AutoConnect library package contains an example sketch for ESP8266WebServer known as FSBrowser. Its example is a sample implementation that supports AutoConnect without changing the structure of the original FSBrowser and has the menu item for <strong>Edit</strong> and <strong>List</strong>.</p>
<div style="display:block;margin-left:auto;margin-right:auto;width:284px;height:491px;border:1px solid lightgrey;"><img data-gifffer="./images/aux_fsbrowser.gif" data-gifffer-width="280" data-gifffer-height="490" /></div>
<p>The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows.</p>
<p><span style="display:block;margin-left:auto;margin-right:auto;width:282px;height:492px;border:1px solid lightgrey;"><img data-gifffer="./images/aux_fsbrowser.gif" data-gifffer-height="490" data-gifffer-width="280" /></span></p>
<p>The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows:</p>
<ol>
<li>Add AutoConnect declaration.</li>
<li>Add the menu item named "<strong>Edit</strong>" and "<strong>List</strong>" of AutoConnectAux as each page.</li>
@ -802,7 +815,7 @@
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid">
<a href="howtoembed.html" title="How to embed" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<a href="datatips.html" title="Tips for data conversion" 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>
@ -811,19 +824,19 @@
<span class="md-footer-nav__direction">
Previous
</span>
How to embed
Tips for data conversion
</span>
</div>
</a>
<a href="faq.html" title="FAQ" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
<a href="wojson.html" title="Custom Web pages w/o JSON" 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>
FAQ
Custom Web pages w/o JSON
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">

File diff suppressed because one or more lines are too long

@ -2,102 +2,107 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://Hieromon.github.io/AutoConnect/index.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/gettingstarted.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/menu.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/basicusage.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/advancedusage.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/acintro.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/acelements.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/acjson.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/achandling.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/api.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/apiaux.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/apiconfig.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/apielements.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/apiextra.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/howtoembed.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc></loc>
<loc>https://Hieromon.github.io/AutoConnect/datatips.html</loc>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/menuize.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/wojson.html</loc>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/faq.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/changelog.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://Hieromon.github.io/AutoConnect/license.html</loc>
<lastmod>2019-02-16</lastmod>
<lastmod>2019-02-20</lastmod>
<changefreq>daily</changefreq>
</url>
</urlset>

Binary file not shown.

File diff suppressed because it is too large Load Diff

@ -28,7 +28,7 @@ nav:
- 'Examples' :
- 'How to embed': howtoembed.md
- 'Tips for data conversion': datatips.md
- 'Constucting menu': menuize.md
- 'Constucting the menu': menuize.md
- 'Custom Web pages w/o JSON': wojson.md
- 'FAQ' : faq.md
- 'Change log' : changelog.md

@ -155,20 +155,20 @@ void loop() {
}
```
### <i class="fa fa-caret-right"></i> Cast items of your sketch own into the AutocCnnect menu
### <i class="fa fa-caret-right"></i> Cast the legacy HTML pages as the add-on menu items
If your sketch is handling your own web page, you can call that page from the [AutoConnect menu](menu.md). Unlike the custom Web pages by [AutoConnectAux](apiaux.md#autoconnectaux), this allows AutoConnect menu to legacy web pages registered by *ESP8266WebServer::on*/*WebServer::on* function.
If your sketch handles web pages, you can embed the pages into the AutoConnect menu with keeping the WiFi connection feature. Unlike the custom Web pages by [AutoConnectAux](apiaux.md#autoconnectaux), this allows to legacy web pages registered by *ESP8266WebServer::on* or *WebServer::on* function.
To implement this with your sketch, use only the [AutoConnectAux](apiaux.md#autoconnectaux) constructed with the URI of that page. [AutoConnectElements](acelements.md) is not required. The basic procedure for this as follows.
To implement embedding the your sketch web pages, use only the [AutoConnectAux](apiaux.md#autoconnectaux) constructed with the URI of that page. [AutoConnectElements](acelements.md) is not required. The basic procedure for this as follows:
1. Declare AutoConnectAux for each legacy page. It includes the URI of the page and item string which will display in the AutoConnect menu.
2. Sketch legacy page handlers.
2. Sketch the legacy page handlers.
3. Register those handler functions to ESP8266WebServer/WebServer with the **on** function.
4. Register AutoConnectAux declared with #1 to AutoConnect using [AutoConnect::join](api.md#join) function. It serves as a menu item.
5. [Begin](api.md#begin) the portal.
6. Performs [AutoConnect::handleClient](api.md#handleClient) in the **loop** function.
For details see the [Constructing menu](menuize.md) section of Examples page.
For details see the [Constructing the menu](menuize.md) section of Examples page.
### <i class="fa fa-caret-right"></i> Change menu title

@ -66,9 +66,9 @@ You can change the HOME path using the AutoConnect API. The [**AutoConnect::home
## <i class="fa fa-bars"></i> Extend AutoConnect menu with your sketches
The AutoConnect menu can contain custom items of your own sketch. It works for the custom Web pages by [AutoConnectAux](acintro.md), addition to the request handler for ESP8266WebServer class that is registered by the ESP8266WebServer::on function or WebServer::on for ESP32. That is, you can make it as a menu item to invoke a legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as [FSBrowser](https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser) to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code.
The AutoConnect menu can contain HTML pages of your sketch as custom items. It works for HTML pages implemented by **ESP8266WebServer::on** handler or **WebServer::on** handler for ESP32. That is, you can make it as menu items to invoke the legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as [FSBrowser](https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser) to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code.
<div style="float:left;width:auto;height:420px;"><img style="width:auto;height:420px;" src="./images/fsbmenu.png"></div>
<img style="margin-left:70px;width:auto;height:420px;" src="./images/fsbmenu_expand.png">
The procedure to extend the AutoConnect menu is described in the [Advanced usage section](advancedusage.md#cast-items-of-your-sketch-own-into-the-autoccnnect-menu).
You can extend the AutoConnect menu to match legacy sketches and according to the procedure described in the [Advanced Usage section](advancedusage.md#cast-the-legacy-html-pages-as-the-add-on-menu-items).

@ -1,6 +1,6 @@
## What menus can be made using AutoConnect
AutoConnect generates a menu dynamically depending on the instantiated [AutoConnectAux](acintro.md#how-it-works) at the sketch executing time. Usually, it is a collection of [AutoConnectElement](acelements.md). In addition to this, you can generate a menu from only AutoConnectAux, without AutoConnectElements. That is, you can easily make the built-in menu with legacy sketches of yours.
AutoConnect generates a menu dynamically depending on the instantiated [AutoConnectAux](acintro.md#how-it-works) at the sketch executing time. Usually, it is a collection of [AutoConnectElement](acelements.md). In addition to this, you can generate a menu from only AutoConnectAux, without AutoConnectElements.<br>In other words, you can easily create a built-in menu featuring the WiFi connection facility embedding the legacy web pages.
## Basic mechanism of menu generation
@ -25,7 +25,7 @@ The AutoConnect library package contains an example sketch for ESP8266WebServer
<span style="display:block;margin-left:auto;margin-right:auto;width:282px;height:492px;border:1px solid lightgrey;"><img data-gifffer="./images/aux_fsbrowser.gif" data-gifffer-height="490" data-gifffer-width="280" /></span>
The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows.
The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows:
1. Add AutoConnect declaration.
2. Add the menu item named "**Edit**" and "**List**" of AutoConnectAux as each page.

Loading…
Cancel
Save