Deploy for v1.1.7

master v1.1.7
Hieromon Ikasamo 5 years ago
parent 920d92b187
commit d39545ce13
  1. 4
      docs/acelements.html
  2. 104
      docs/achandling.html
  3. 14
      docs/acintro.html
  4. 12
      docs/acjson.html
  5. 68
      docs/acupload.html
  6. 138
      docs/advancedusage.html
  7. 38
      docs/api.html
  8. 8
      docs/apiaux.html
  9. 36
      docs/apiconfig.html
  10. 4
      docs/basicusage.html
  11. 8
      docs/changelabel.html
  12. 22
      docs/changelog.html
  13. 18
      docs/colorized.html
  14. 4
      docs/credit.html
  15. 10
      docs/datatips.html
  16. 18
      docs/faq.html
  17. 8
      docs/gettingstarted.html
  18. 6
      docs/howtoembed.html
  19. 2
      docs/menu.html
  20. 72
      docs/otabrowser.html
  21. 18
      docs/otaserver.html
  22. 2
      docs/search/search_index.json
  23. 60
      docs/sitemap.xml
  24. BIN
      docs/sitemap.xml.gz
  25. 18
      docs/wojson.html

@ -2091,8 +2091,8 @@ AutoConnect will not actively be involved in the layout of custom Web pages gene
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(elm.type()</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">AC_Text)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(elm.type()</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">AC_Text)</span> <span style="color: #f8f8f2">{</span>
<span style="background-color: #49483e"> <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">customPage[elm.name].as</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="background-color: #49483e"> <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">customPage[elm.name].as</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> <span style="color: #f8f8f2">text.style</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;color:gray;&quot;</span><span style="color: #f8f8f2">;</span> </span> <span style="color: #f8f8f2">text.style</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;color:gray;&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #7a7a7a">// Or, it is also possible to write the code further reduced as follows.</span> <span style="color: #75715e">// Or, it is also possible to write the code further reduced as follows.</span>
<span style="color: #7a7a7a">// customPage[elm.name].as&lt;AutoConnectText&gt;().style = &quot;color:gray;&quot;;</span> <span style="color: #75715e">// customPage[elm.name].as&lt;AutoConnectText&gt;().style = &quot;color:gray;&quot;;</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
</code></pre></div> </code></pre></div>

@ -1172,7 +1172,7 @@
AutoConnectElements contained in AutoConnectAux object are uniquely identified by name. When adding an AutoConnectElement, if an element with the same name already exists in the AutoConnectAux, checking the type, and if it is the same, the value will be replaced. If another type of AutoConnectElement exists with the same name, that add operation will be invalid.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup> In the following example, AutoConnectButton <code>button</code> addition will invalid because <code>hello</code> with the same name already exists as AutoConnectText.</p> AutoConnectElements contained in AutoConnectAux object are uniquely identified by name. When adding an AutoConnectElement, if an element with the same name already exists in the AutoConnectAux, checking the type, and if it is the same, the value will be replaced. If another type of AutoConnectElement exists with the same name, that add operation will be invalid.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup> In the following example, AutoConnectButton <code>button</code> addition will invalid because <code>hello</code> with the same name already exists as AutoConnectText.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span>
<span style="color: #f8f8f2">AutoConnectText</span> <span style="color: #a6e22e">text</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, world&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">AutoConnectText</span> <span style="color: #a6e22e">text</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, world&quot;</span><span style="color: #f8f8f2">);</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnectButton</span> <span style="color: #a6e22e">button</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, world&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;alert(&#39;Hello world!&#39;)&quot;)</span><span style="color: #f8f8f2">;</span> <span style="color: #7a7a7a">// This is invalid.</span> <span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnectButton</span> <span style="color: #a6e22e">button</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, world&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;alert(&#39;Hello world!&#39;)&quot;)</span><span style="color: #f8f8f2">;</span> <span style="color: #75715e">// This is invalid.</span>
</span><span style="color: #f8f8f2">aux.add({</span> <span style="color: #f8f8f2">text,</span> <span style="color: #f8f8f2">button</span> <span style="color: #f8f8f2">});</span> </span><span style="color: #f8f8f2">aux.add({</span> <span style="color: #f8f8f2">text,</span> <span style="color: #f8f8f2">button</span> <span style="color: #f8f8f2">});</span>
</code></pre></div> </code></pre></div>
@ -1228,10 +1228,10 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span>
<span style="color: #f8f8f2">aux.load(</span><span style="color: #e6db74">&quot;SOME_JSON_DOCUMENT&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">aux.load(</span><span style="color: #e6db74">&quot;SOME_JSON_DOCUMENT&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #7a7a7a">// Retrieve the pointer of the AutoConnectText</span> <span style="color: #75715e">// Retrieve the pointer of the AutoConnectText</span>
<span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">text</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">reinterpret_cast</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">*&gt;</span><span style="color: #f8f8f2">(aux.getElement(</span><span style="color: #e6db74">&quot;TEXT_ELEMENT_NAME&quot;</span><span style="color: #f8f8f2">));</span> <span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">text</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">reinterpret_cast</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">*&gt;</span><span style="color: #f8f8f2">(aux.getElement(</span><span style="color: #e6db74">&quot;TEXT_ELEMENT_NAME&quot;</span><span style="color: #f8f8f2">));</span>
<span style="color: #7a7a7a">// Retrieve the reference of the AutoConnectText</span> <span style="color: #75715e">// Retrieve the reference of the AutoConnectText</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_ELEMENT_NAME&quot;</span><span style="color: #f8f8f2">);</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_ELEMENT_NAME&quot;</span><span style="color: #f8f8f2">);</span>
</code></pre></div> </code></pre></div>
@ -1239,8 +1239,8 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">auxJson</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">Page 1 title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">uri</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">/page1</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">menu</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:true,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">element</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:[{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">name</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">caption</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">type</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">ACText</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">value</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">hello, world</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">}]}&quot;</span><span style="color: #f8f8f2">);</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">auxJson</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">Page 1 title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">uri</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">/page1</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">menu</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:true,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">element</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:[{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">name</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">caption</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">type</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">ACText</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">value</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">hello, world</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">}]}&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">portal.load(auxJson);</span> <span style="color: #f8f8f2">portal.load(auxJson);</span>
<span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">aux</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.aux(</span><span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// Identify the AutoConnectAux instance with uri</span> <span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">aux</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.aux(</span><span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Identify the AutoConnectAux instance with uri</span>
<span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">text</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;caption&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// Cast to real type and access members</span> <span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">text</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;caption&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Cast to real type and access members</span>
<span style="color: #f8f8f2">Serial.println(text.value);</span> <span style="color: #f8f8f2">Serial.println(text.value);</span>
</code></pre></div> </code></pre></div>
@ -1273,9 +1273,9 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<h3 id="enable-autoconnectelements-during-the-sketch-execution"><i class="fa fa-edit"></i> Enable AutoConnectElements during the Sketch execution<a class="headerlink" href="#enable-autoconnectelements-during-the-sketch-execution" title="Permanent link">&para;</a></h3> <h3 id="enable-autoconnectelements-during-the-sketch-execution"><i class="fa fa-edit"></i> Enable AutoConnectElements during the Sketch execution<a class="headerlink" href="#enable-autoconnectelements-during-the-sketch-execution" title="Permanent link">&para;</a></h3>
<p>AutoConnectElemets have an enable attribute to activate its own HTML generation. Sketches can change the HTMLization of their elements dynamically by setting or resetting the enable value. An element whose the enable attribute is true will generate itself HTML and place on the custom Web page. And conversely, it will not generate the HTML when the value is false.</p> <p>AutoConnectElemets have an enable attribute to activate its own HTML generation. Sketches can change the HTMLization of their elements dynamically by setting or resetting the enable value. An element whose the enable attribute is true will generate itself HTML and place on the custom Web page. And conversely, it will not generate the HTML when the value is false.</p>
<p>For example, to enable the submit button only when the ESP module is connected to the access point in STA mode, you can sketch the following:</p> <p>For example, to enable the submit button only when the ESP module is connected to the access point in STA mode, you can sketch the following:</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.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: #66d9ef">char</span> <span style="color: #f8f8f2">AUX[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">R(</span><span style="color: #e6db74">&quot;</span> <span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">AUX[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">R(</span><span style="color: #e6db74">&quot;</span>
<span style="color: #f8f8f2">{</span> <span style="color: #f8f8f2">{</span>
@ -1332,7 +1332,7 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<p>To load a JSON document as AutoConnectAux use the <a href="api.html#load"><strong>AutoConnect::load</strong></a> function and load the JSON document of each AutoConnectElement using the <a href="apiaux.html#loadelement"><strong>AutoConnectAux::loadElement</strong></a> function. Although the functions of both are similar, the structure of the target JSON document is different.</p> <p>To load a JSON document as AutoConnectAux use the <a href="api.html#load"><strong>AutoConnect::load</strong></a> function and load the JSON document of each AutoConnectElement using the <a href="apiaux.html#loadelement"><strong>AutoConnectAux::loadElement</strong></a> function. Although the functions of both are similar, the structure of the target JSON document is different.</p>
<p>The <a href="apiaux.html#load">AutoConnect::load</a> function loads the entire AutoConnectAux and creates both the AutoConnectAux instance and each AutoConnectElement instance. A single JSON document can contain multiple custom Web pages. If you write JSON of AutoConnectAux as an array, the load function generates all the pages contained in that array. Therefore, it is necessary to supply the JSON document of AutoConnectAux as an input of the load function and must contain the elements described section <a href="acjson.html#json-document-structure-for-autoconnectaux"><em>JSON document structure for AutoConnectAux</em></a>.</p> <p>The <a href="apiaux.html#load">AutoConnect::load</a> function loads the entire AutoConnectAux and creates both the AutoConnectAux instance and each AutoConnectElement instance. A single JSON document can contain multiple custom Web pages. If you write JSON of AutoConnectAux as an array, the load function generates all the pages contained in that array. Therefore, it is necessary to supply the JSON document of AutoConnectAux as an input of the load function and must contain the elements described section <a href="acjson.html#json-document-structure-for-autoconnectaux"><em>JSON document structure for AutoConnectAux</em></a>.</p>
<p>The <a href="apiaux.html#loadelement">AutoConnectAux::loadElement</a> function loads the elements individually into an AutoConnectAux object. The structure of its supplying JSON document is not AutoConnectAux. It must be a <a href="acjson.html#json-object-for-autoconnectelements">JSON structure for AutoConnectElement</a>, but you can specify an array.</p> <p>The <a href="apiaux.html#loadelement">AutoConnectAux::loadElement</a> function loads the elements individually into an AutoConnectAux object. The structure of its supplying JSON document is not AutoConnectAux. It must be a <a href="acjson.html#json-object-for-autoconnectelements">JSON structure for AutoConnectElement</a>, but you can specify an array.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">// AutoConnectAux as a custom Web page.</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">// AutoConnectAux as a custom Web page.</span>
<span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">page[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;raw(</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">page[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;raw(</span>
<span style="color: #e6db74">{</span> <span style="color: #e6db74">{</span>
<span style="color: #e6db74"> &quot;title&quot;: &quot;Settings&quot;,</span> <span style="color: #e6db74"> &quot;title&quot;: &quot;Settings&quot;,</span>
@ -1354,7 +1354,7 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<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: #e6db74">)raw&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #7a7a7a">// Additional AutoConnectElements.</span> <span style="color: #75715e">// Additional AutoConnectElements.</span>
<span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">addons[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;raw(</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">addons[]</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">[</span>
<span style="color: #e6db74"> {</span> <span style="color: #e6db74"> {</span>
@ -1379,30 +1379,30 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">auxPage;</span> <span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">auxPage;</span>
<span style="color: #7a7a7a">// Load a custom Web page.</span> <span style="color: #75715e">// Load a custom Web page.</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">portal.load(page);</span> <span style="background-color: #49483e"><span style="color: #f8f8f2">portal.load(page);</span>
</span> </span>
<span style="color: #7a7a7a">// Get a &#39;/settings&#39; page</span> <span style="color: #75715e">// Get a &#39;/settings&#39; page</span>
<span style="color: #f8f8f2">auxPage</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.aux(</span><span style="color: #e6db74">&quot;/settings&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">auxPage</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.aux(</span><span style="color: #e6db74">&quot;/settings&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #7a7a7a">// Also, load only AutoConnectRadio named the period.</span> <span style="color: #75715e">// Also, load only AutoConnectRadio named the period.</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">auxPage</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">loadElement(addons,</span> <span style="color: #e6db74">&quot;period&quot;</span><span style="color: #f8f8f2">);</span> <span style="background-color: #49483e"><span style="color: #f8f8f2">auxPage</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">loadElement(addons,</span> <span style="color: #e6db74">&quot;period&quot;</span><span style="color: #f8f8f2">);</span>
</span> </span>
<span style="color: #7a7a7a">// Retrieve a server name from an AutoConnectText value.</span> <span style="color: #75715e">// Retrieve a server name from an AutoConnectText value.</span>
<span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">serverName</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">auxPage</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;server&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">serverName</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">auxPage</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;server&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">Serial.println(serverName.value);</span> <span style="color: #f8f8f2">Serial.println(serverName.value);</span>
</code></pre></div> </code></pre></div>
<h3 id="saving-autoconnectelements-with-json"><i class="fa fa-download"></i> Saving AutoConnectElements with JSON<a class="headerlink" href="#saving-autoconnectelements-with-json" title="Permanent link">&para;</a></h3> <h3 id="saving-autoconnectelements-with-json"><i class="fa fa-download"></i> Saving AutoConnectElements with JSON<a class="headerlink" href="#saving-autoconnectelements-with-json" title="Permanent link">&para;</a></h3>
<p>To save the AutoConnectAux or the AutoConnectElement as a JSON document, use the <a href="apiaux.html#saveelement">AutoConnectAux::saveElement</a> function. It serializes the contents of the object based on the type of the AutoConnectElement. You can persist a serialized AutoConnectElements as a JSON document to a stream.</p> <p>To save the AutoConnectAux or the AutoConnectElement as a JSON document, use the <a href="apiaux.html#saveelement">AutoConnectAux::saveElement</a> function. It serializes the contents of the object based on the type of the AutoConnectElement. You can persist a serialized AutoConnectElements as a JSON document to a stream.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">// Open a parameter file on the SPIFFS.</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">// Open a parameter file on the SPIFFS.</span>
<span style="color: #f8f8f2">SPIFFS.begin();</span> <span style="color: #f8f8f2">SPIFFS.begin();</span>
<span style="color: #66d9ef">FILE</span> <span style="color: #f8f8f2">param</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(</span><span style="color: #e6db74">&quot;/param&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;w&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #66d9ef">FILE</span> <span style="color: #f8f8f2">param</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(</span><span style="color: #e6db74">&quot;/param&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;w&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #7a7a7a">// Save elements as the parameters.</span> <span style="color: #75715e">// Save elements as the parameters.</span>
<span style="color: #f8f8f2">auxPage</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">saveElement(param,</span> <span style="color: #f8f8f2">{</span> <span style="color: #e6db74">&quot;server&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;period&quot;</span> <span style="color: #f8f8f2">});</span> <span style="color: #f8f8f2">auxPage</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">saveElement(param,</span> <span style="color: #f8f8f2">{</span> <span style="color: #e6db74">&quot;server&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;period&quot;</span> <span style="color: #f8f8f2">});</span>
<span style="color: #7a7a7a">// Close a parameter file.</span> <span style="color: #75715e">// Close a parameter file.</span>
<span style="color: #f8f8f2">param.close();</span> <span style="color: #f8f8f2">param.close();</span>
<span style="color: #f8f8f2">SPIFFS.end();</span> <span style="color: #f8f8f2">SPIFFS.end();</span>
</code></pre></div> </code></pre></div>
@ -1438,9 +1438,9 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<h3 id="where-to-pick-up-the-values"><i class="fa fa-desktop"></i> Where to pick up the values<a class="headerlink" href="#where-to-pick-up-the-values" title="Permanent link">&para;</a></h3> <h3 id="where-to-pick-up-the-values"><i class="fa fa-desktop"></i> Where to pick up the values<a class="headerlink" href="#where-to-pick-up-the-values" title="Permanent link">&para;</a></h3>
<p>A sketch composed of handlers can receive the value of AutoConnectElements entered in a custom Web page after sending, but that handler is different from the page where the value was entered. It is necessary to be aware that can accept the entered values by the next page handler after the transition.</p> <p>A sketch composed of handlers can receive the value of AutoConnectElements entered in a custom Web page after sending, but that handler is different from the page where the value was entered. It is necessary to be aware that can accept the entered values by the next page handler after the transition.</p>
<p>Usually, two ways to retrieve entered values we have. One is to use the <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#getting-information-about-request-arguments">ESP8266WebServer::arg</a> (or WebServer::arg for ESP32) function in the <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#client-request-handlers"><code>on handler</code></a> attached by ESP8266WebServer (WebServer w/ESP32 also).</p> <p>Usually, two ways to retrieve entered values we have. One is to use the <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#getting-information-about-request-arguments">ESP8266WebServer::arg</a> (or WebServer::arg for ESP32) function in the <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#client-request-handlers"><code>on handler</code></a> attached by ESP8266WebServer (WebServer w/ESP32 also).</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.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: #66d9ef">char</span> <span style="color: #f8f8f2">addonJson[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;raw(</span> <span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">addonJson[]</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">{</span>
@ -1466,21 +1466,21 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">webServer;</span> <span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">webServer;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(webServer);</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(webServer);</span>
<span style="color: #7a7a7a">// Here, /feels handler</span> <span style="color: #75715e">// Here, /feels handler</span>
<span style="color: #66d9ef">void</span> <span style="color: #a6e22e">feelsOn</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">void</span> <span style="color: #a6e22e">feelsOn</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Retrieve the value of a input-box named &quot;feels&quot;</span> <span style="color: #75715e">// Retrieve the value of a input-box named &quot;feels&quot;</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">feel</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">webServer.arg(</span><span style="color: #e6db74">&quot;feels&quot;</span><span style="color: #f8f8f2">);</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">feel</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">webServer.arg(</span><span style="color: #e6db74">&quot;feels&quot;</span><span style="color: #f8f8f2">);</span>
</span> </span>
<span style="color: #7a7a7a">// Echo back the value</span> <span style="color: #75715e">// Echo back the value</span>
<span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">echo</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&lt;html&gt;&lt;p style=</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">color:blue;font-family:verdana;font-size:300%;</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">&gt;&quot;</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">feel</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot; and a bold world!&lt;/p&gt;&lt;/html&gt;&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">echo</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&lt;html&gt;&lt;p style=</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">color:blue;font-family:verdana;font-size:300%;</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">&gt;&quot;</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">feel</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot; and a bold world!&lt;/p&gt;&lt;/html&gt;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">webServer.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text/html&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">echo);</span> <span style="color: #f8f8f2">webServer.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text/html&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">echo);</span>
<span style="color: #f8f8f2">}</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">delay(</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">delay(</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">webServer.on(</span><span style="color: #e6db74">&quot;/feels&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">feelsOn);</span> <span style="color: #7a7a7a">// Register /feels handler</span> <span style="color: #f8f8f2">webServer.on(</span><span style="color: #e6db74">&quot;/feels&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">feelsOn);</span> <span style="color: #75715e">// Register /feels handler</span>
<span style="color: #f8f8f2">portal.load(addonJson);</span> <span style="color: #7a7a7a">// Load a custom Web page</span> <span style="color: #f8f8f2">portal.load(addonJson);</span> <span style="color: #75715e">// Load a custom Web page</span>
<span style="color: #f8f8f2">portal.begin();</span> <span style="color: #f8f8f2">portal.begin();</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
@ -1495,9 +1495,9 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<p>When you actually try the above sketch, there is no a root handler. So the URL that should be accessed first is <code>/_ac</code> concatenated with the local IP address of the esp8266 module.</p> <p>When you actually try the above sketch, there is no a root handler. So the URL that should be accessed first is <code>/_ac</code> concatenated with the local IP address of the esp8266 module.</p>
</div> </div>
<p>Another method is effective when custom Web pages have complicated page transitions. It is a way to straight access the AutoConnectElements member value. You can get the AutoConnectElement with the specified name using the <a href="#get-autoconnectelement-from-the-autoconnectaux">getElement</a> function. The following sketch executes the above example with AutoConnect only, without using the function of ESP8266WebServer.</p> <p>Another method is effective when custom Web pages have complicated page transitions. It is a way to straight access the AutoConnectElements member value. You can get the AutoConnectElement with the specified name using the <a href="#get-autoconnectelement-from-the-autoconnectaux">getElement</a> function. The following sketch executes the above example with AutoConnect only, without using the function of ESP8266WebServer.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #66d9ef">const</span> <span style="color: #66d9ef">static</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">addonJson[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;raw(</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">static</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">addonJson[]</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">[</span>
@ -1536,26 +1536,26 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #7a7a7a">// Here, /feels handler</span> <span style="color: #75715e">// Here, /feels handler</span>
<span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">feelsOn</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux,</span> <span style="color: #f8f8f2">PageArgument</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">args)</span> <span style="color: #f8f8f2">{</span> <span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">feelsOn</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: #7a7a7a">// Get the AutoConnectInput named &quot;feels&quot;.</span> <span style="color: #75715e">// Get the AutoConnectInput named &quot;feels&quot;.</span>
<span style="color: #7a7a7a">// The where() function returns an uri string of the AutoConnectAux that triggered this handler.</span> <span style="color: #75715e">// The where() function returns an uri string of the AutoConnectAux that triggered this handler.</span>
<span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">hello</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.aux(portal.where());</span> <span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">hello</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.aux(portal.where());</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">feels</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">hello</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;feels&quot;</span><span style="color: #f8f8f2">);</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">feels</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">hello</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;feels&quot;</span><span style="color: #f8f8f2">);</span>
</span> </span>
<span style="color: #7a7a7a">// Get the AutoConnectText named &quot;echo&quot;.</span> <span style="color: #75715e">// Get the AutoConnectText named &quot;echo&quot;.</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">echo</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;echo&quot;</span><span style="color: #f8f8f2">);</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">echo</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;echo&quot;</span><span style="color: #f8f8f2">);</span>
</span> </span>
<span style="color: #7a7a7a">// Echo back from input-box to /feels page.</span> <span style="color: #75715e">// Echo back from input-box to /feels page.</span>
<span style="color: #f8f8f2">echo.value</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">feels.value</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot; and a bold world!&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">echo.value</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">feels.value</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot; and a bold world!&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #66d9ef">return</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #66d9ef">return</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">}</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">delay(</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">delay(</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">portal.load(addonJson);</span> <span style="color: #7a7a7a">// Load custom Web pages</span> <span style="color: #f8f8f2">portal.load(addonJson);</span> <span style="color: #75715e">// Load custom Web pages</span>
<span style="color: #f8f8f2">portal.on(</span><span style="color: #e6db74">&quot;/feels&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">feelsOn,</span> <span style="color: #f8f8f2">AC_EXIT_AHEAD);</span> <span style="color: #7a7a7a">// Register /feels handler</span> <span style="color: #f8f8f2">portal.on(</span><span style="color: #e6db74">&quot;/feels&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">feelsOn,</span> <span style="color: #f8f8f2">AC_EXIT_AHEAD);</span> <span style="color: #75715e">// Register /feels handler</span>
<span style="color: #f8f8f2">portal.begin();</span> <span style="color: #f8f8f2">portal.begin();</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
@ -1606,34 +1606,34 @@ AutoConnectElements contained in AutoConnectAux object are uniquely identified b
</dd> </dd>
</dl> </dl>
<p>The following example is a part of sketch contained the handlers. </p> <p>The following example is a part of sketch contained the handlers. </p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">// AutoConnect object declarations</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">// AutoConnect object declarations</span>
<span style="color: #f8f8f2">ACInput(input1);</span> <span style="color: #f8f8f2">ACInput(input1);</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">aux</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;/aux&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">{</span> <span style="color: #f8f8f2">input1</span> <span style="color: #f8f8f2">});</span> <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">aux</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;/aux&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">{</span> <span style="color: #f8f8f2">input1</span> <span style="color: #f8f8f2">});</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #7a7a7a">// Pre-declare handlers</span> <span style="color: #75715e">// Pre-declare handlers</span>
<span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">initialize</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">initialize</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">append</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">append</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">PageArgument</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">);</span>
<span style="color: #7a7a7a">// Register handlers and launch the portal.</span> <span style="color: #75715e">// Register handlers and launch the portal.</span>
<span style="color: #f8f8f2">aux.on(initialize,</span> <span style="color: #f8f8f2">AC_AHEAD);</span> <span style="color: #f8f8f2">aux.on(initialize,</span> <span style="color: #f8f8f2">AC_AHEAD);</span>
<span style="color: #f8f8f2">aux.on(append,</span> <span style="color: #f8f8f2">AC_LATER);</span> <span style="color: #f8f8f2">aux.on(append,</span> <span style="color: #f8f8f2">AC_LATER);</span>
<span style="color: #f8f8f2">portal.join(aux);</span> <span style="color: #f8f8f2">portal.join(aux);</span>
<span style="color: #f8f8f2">portal.begin();</span> <span style="color: #f8f8f2">portal.begin();</span>
<span style="color: #7a7a7a">// Some code here...</span> <span style="color: #75715e">// Some code here...</span>
<span style="color: #7a7a7a">// The handler called before HTML generating</span> <span style="color: #75715e">// The handler called before HTML generating</span>
<span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">initialize</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux,</span> <span style="color: #f8f8f2">PageArgument</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">args)</span> <span style="color: #f8f8f2">{</span> <span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">initialize</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">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">input1</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">input1</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #7a7a7a">// Set initial value for the input box in a custom Web page.</span> <span style="color: #75715e">// Set initial value for the input box in a custom Web page.</span>
<span style="color: #f8f8f2">input1.value</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;Initial value&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #f8f8f2">input1.value</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;Initial value&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #7a7a7a">// Nothing appendix for a generated HTML.</span> <span style="color: #75715e">// Nothing appendix for a generated HTML.</span>
<span style="color: #66d9ef">return</span> <span style="color: #f8f8f2">String();</span> <span style="color: #66d9ef">return</span> <span style="color: #f8f8f2">String();</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #7a7a7a">// The handler called after HTML generated</span> <span style="color: #75715e">// The handler called after HTML generated</span>
<span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">append</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux,</span> <span style="color: #f8f8f2">PageArgument</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">args)</span> <span style="color: #f8f8f2">{</span> <span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">append</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: #7a7a7a">// Append an HTML</span> <span style="color: #75715e">// Append an HTML</span>
<span style="color: #66d9ef">return</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;&lt;p&gt;This text has been added.&lt;/p&gt;&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #66d9ef">return</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;&lt;p&gt;This text has been added.&lt;/p&gt;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
</code></pre></div> </code></pre></div>
@ -1771,7 +1771,7 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<span style="color: #e6db74">}</span> <span style="color: #e6db74">}</span>
<span style="color: #e6db74">)r&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #e6db74">)r&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #7a7a7a">// An on-page handler for &#39;/&#39; access</span> <span style="color: #75715e">// An on-page handler for &#39;/&#39; access</span>
<span style="background-color: #49483e"><span style="color: #66d9ef">void</span> <span style="color: #a6e22e">onRoot</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span> <span style="background-color: #49483e"><span style="color: #66d9ef">void</span> <span style="color: #a6e22e">onRoot</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
</span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">content</span> <span style="color: #f92672">=</span> </span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">content</span> <span style="color: #f92672">=</span>
<span style="color: #e6db74">&quot;&lt;html&gt;&quot;</span> <span style="color: #e6db74">&quot;&lt;html&gt;&quot;</span>
@ -1779,9 +1779,9 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<span style="color: #e6db74">&quot;&lt;body&gt;&lt;div&gt;INPUT: {{value}}&lt;/div&gt;&lt;/body&gt;&quot;</span> <span style="color: #e6db74">&quot;&lt;body&gt;&lt;div&gt;INPUT: {{value}}&lt;/div&gt;&lt;/body&gt;&quot;</span>
<span style="color: #e6db74">&quot;&lt;/html&gt;&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #e6db74">&quot;&lt;/html&gt;&quot;</span><span style="color: #f8f8f2">;</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">Input.fetchElement();</span> <span style="color: #7a7a7a">// Preliminary acquisition</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">Input.fetchElement();</span> <span style="color: #75715e">// Preliminary acquisition</span>
</span> </span>
<span style="color: #7a7a7a">// For this steps to work, need to call fetchElement function beforehand.</span> <span style="color: #75715e">// For this steps to work, need to call fetchElement function beforehand.</span>
<span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">value</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">Input[</span><span style="color: #e6db74">&quot;input&quot;</span><span style="color: #f8f8f2">].value;</span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">value</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">Input[</span><span style="color: #e6db74">&quot;input&quot;</span><span style="color: #f8f8f2">].value;</span>
<span style="color: #f8f8f2">content.replace(</span><span style="color: #e6db74">&quot;{{value}}&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">value);</span> <span style="color: #f8f8f2">content.replace(</span><span style="color: #e6db74">&quot;{{value}}&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">value);</span>
<span style="color: #f8f8f2">server.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text/html&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">content);</span> <span style="color: #f8f8f2">server.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text/html&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">content);</span>
@ -1790,7 +1790,7 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">Input.load(InputPage);</span> <span style="color: #f8f8f2">Input.load(InputPage);</span>
<span style="color: #f8f8f2">portal.join(Input);</span> <span style="color: #f8f8f2">portal.join(Input);</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">server.on(</span><span style="color: #e6db74">&quot;/&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">onRoot);</span> <span style="color: #7a7a7a">// Register the on-page handler</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">server.on(</span><span style="color: #e6db74">&quot;/&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">onRoot);</span> <span style="color: #75715e">// Register the on-page handler</span>
</span> <span style="color: #f8f8f2">portal.begin();</span> </span> <span style="color: #f8f8f2">portal.begin();</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
@ -1898,9 +1898,9 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<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> <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> <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>AutoConnectAux and AutoConnectElements must live while the custom Web pages are available. The implementation of the custom Web page inherits from requestHandler driven from ESP8266WebServer (WebServer for ESP32), so the instance of AutoConnectAux and AutoConnectElements must exist for the duration of effect of handleClient. The following example is incorrect for manipulating custom Web pages. Its AutoConnectAux instance will be destructed at the exit of the setup().</p> <p>AutoConnectAux and AutoConnectElements must live while the custom Web pages are available. The implementation of the custom Web page inherits from requestHandler driven from ESP8266WebServer (WebServer for ESP32), so the instance of AutoConnectAux and AutoConnectElements must exist for the duration of effect of handleClient. The following example is incorrect for manipulating custom Web pages. Its AutoConnectAux instance will be destructed at the exit of the setup().</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.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: #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">{</span>
@ -1916,7 +1916,7 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// This declaration is wrong.</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 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> <span style="color: #f8f8f2">aux.load(auxPage);</span>
<span style="color: #f8f8f2">portal.join(aux);</span> <span style="color: #f8f8f2">portal.join(aux);</span>

@ -988,10 +988,10 @@ The following JSON code and sketch will execute the custom Web page as an exampl
<span style="color: #f8f8f2">]</span> <span style="color: #f8f8f2">]</span>
</code></pre></div></p> </code></pre></div></p>
<p><strong>the Sketch</strong> <p><strong>the Sketch</strong>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;FS.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;FS.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
@ -1027,9 +1027,9 @@ The following JSON code and sketch will execute the custom Web page as an exampl
</li> </li>
<li id="fn:2"> <li id="fn:2">
<p>the Sketch is actually this: <p>the Sketch is actually this:
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>

@ -1692,11 +1692,11 @@
An example of using each function is as follows. An example of using each function is as follows.
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #7a7a7a">// Loading from String</span> <span style="color: #75715e">// Loading from String</span>
<span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">aux</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">Page 1 title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">uri</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">/page1</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">menu</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:true,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">element</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:[{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">name</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">caption</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">type</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">ACText</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">value</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">hello, world</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">}]}&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">aux</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">Page 1 title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">uri</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">/page1</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">menu</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:true,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">element</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:[{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">name</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">caption</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">type</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">ACText</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">value</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">hello, world</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">}]}&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">portal.load(aux);</span> <span style="color: #f8f8f2">portal.load(aux);</span>
<span style="color: #7a7a7a">// Loading from PROGMEM</span> <span style="color: #75715e">// Loading from PROGMEM</span>
<span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">aux[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;raw(</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">aux[]</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">{</span>
<span style="color: #e6db74"> &quot;title&quot; : &quot;Page 1 title&quot;,</span> <span style="color: #e6db74"> &quot;title&quot; : &quot;Page 1 title&quot;,</span>
@ -1713,7 +1713,7 @@ An example of using each function is as follows.
<span style="color: #e6db74">)raw&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #e6db74">)raw&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">portal.load(aux);</span> <span style="color: #f8f8f2">portal.load(aux);</span>
<span style="color: #7a7a7a">// Loading from Stream assumes &quot;aux.json&quot; file should be store in SPIFFS.</span> <span style="color: #75715e">// Loading from Stream assumes &quot;aux.json&quot; file should be store in SPIFFS.</span>
<span style="color: #f8f8f2">File</span> <span style="color: #f8f8f2">aux</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(</span><span style="color: #e6db74">&quot;aux.json&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;r&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">File</span> <span style="color: #f8f8f2">aux</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(</span><span style="color: #e6db74">&quot;aux.json&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;r&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">portal.load(aux);</span> <span style="color: #f8f8f2">portal.load(aux);</span>
<span style="color: #f8f8f2">aux.close();</span> <span style="color: #f8f8f2">aux.close();</span>
@ -1722,9 +1722,9 @@ An example of using each function is as follows.
<h3 id="adjust-the-json-document-buffer-size"><i class="fa fa-caret-right"></i> Adjust the JSON document buffer size<a class="headerlink" href="#adjust-the-json-document-buffer-size" title="Permanent link">&para;</a></h3> <h3 id="adjust-the-json-document-buffer-size"><i class="fa fa-caret-right"></i> Adjust the JSON document buffer size<a class="headerlink" href="#adjust-the-json-document-buffer-size" title="Permanent link">&para;</a></h3>
<p>AutoConnect uses ArduinoJson library's dynamic buffer to parse JSON documents. Its dynamic buffer allocation scheme depends on the version 5 or version 6 of ArduinoJson library. Either version must have enough buffer to parse the custom web page's JSON document successfully. AutoConnect has the following three constants internally to complete the parsing as much as possible in both ArduinoJson version. These constants are macro defined in <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h">AutoConnectDefs.h</a>.</p> <p>AutoConnect uses ArduinoJson library's dynamic buffer to parse JSON documents. Its dynamic buffer allocation scheme depends on the version 5 or version 6 of ArduinoJson library. Either version must have enough buffer to parse the custom web page's JSON document successfully. AutoConnect has the following three constants internally to complete the parsing as much as possible in both ArduinoJson version. These constants are macro defined in <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h">AutoConnectDefs.h</a>.</p>
<p>If memory insufficiency occurs during JSON document parsing, you can adjust these constants to avoid insufficiency by using the <a href="https://arduinojson.org/v6/assistant/">JsonAssistant</a> with deriving the required buffer size in advance.</p> <p>If memory insufficiency occurs during JSON document parsing, you can adjust these constants to avoid insufficiency by using the <a href="https://arduinojson.org/v6/assistant/">JsonAssistant</a> with deriving the required buffer size in advance.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_JSONBUFFER_SIZE 256</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_JSONBUFFER_SIZE 256</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_JSONDOCUMENT_SIZE (8 * 1024)</span> <span style="color: #75715e">#define AUTOCONNECT_JSONDOCUMENT_SIZE (8 * 1024)</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_JSONPSRAM_SIZE (16* 1024)</span> <span style="color: #75715e">#define AUTOCONNECT_JSONPSRAM_SIZE (16* 1024)</span>
</code></pre></div> </code></pre></div>
<h4 id="autoconnect_jsonbuffer_size">AUTOCONNECT_JSONBUFFER_SIZE<a class="headerlink" href="#autoconnect_jsonbuffer_size" title="Permanent link">&para;</a></h4> <h4 id="autoconnect_jsonbuffer_size">AUTOCONNECT_JSONBUFFER_SIZE<a class="headerlink" href="#autoconnect_jsonbuffer_size" title="Permanent link">&para;</a></h4>

@ -982,12 +982,12 @@
</ol> </ol>
<p>The following sketch is an example that implements the above basic steps. The <em>postUpload</em> function is the on-handler and retrieves the AutoConnectFile as named <code>upload_file</code>. You should note that this handler is <strong>not</strong> for a custom Web page placed with its AutoConnectFile element. The uploaded file should be processed by the handler for the transition destination page from the AutoConnectFile element placed page. AutoConnect built-in upload handler will save the uploaded file to the specified device before invoking the <em>postUpload</em> function.</p> <p>The following sketch is an example that implements the above basic steps. The <em>postUpload</em> function is the on-handler and retrieves the AutoConnectFile as named <code>upload_file</code>. You should note that this handler is <strong>not</strong> for a custom Web page placed with its AutoConnectFile element. The uploaded file should be processed by the handler for the transition destination page from the AutoConnectFile element placed page. AutoConnect built-in upload handler will save the uploaded file to the specified device before invoking the <em>postUpload</em> function.</p>
<p>However, If you use uploaded files in different situations, it may be more appropriate to place the actual handling process outside the handler. It applies for the parameter file, etc. The important thing is that you do not have to sketch file reception and storing logic by using the AutoConnectFile element and the upload handler built into the AutoConnect.</p> <p>However, If you use uploaded files in different situations, it may be more appropriate to place the actual handling process outside the handler. It applies for the parameter file, etc. The important thing is that you do not have to sketch file reception and storing logic by using the AutoConnectFile element and the upload handler built into the AutoConnect.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;FS.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;FS.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #7a7a7a">// Upload request custom Web page</span> <span style="color: #75715e">// Upload request custom Web page</span>
<span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">PAGE_UPLOAD[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;(</span> <span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">PAGE_UPLOAD[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;(</span>
<span style="color: #e6db74">{</span> <span style="color: #e6db74">{</span>
<span style="color: #e6db74"> &quot;uri&quot;: &quot;/&quot;,</span> <span style="color: #e6db74"> &quot;uri&quot;: &quot;/&quot;,</span>
@ -1001,7 +1001,7 @@
<span style="color: #e6db74">}</span> <span style="color: #e6db74">}</span>
<span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #7a7a7a">// Upload result display</span> <span style="color: #75715e">// Upload result display</span>
<span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">PAGE_BROWSE[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;(</span> <span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">PAGE_BROWSE[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;(</span>
<span style="color: #e6db74">{</span> <span style="color: #e6db74">{</span>
<span style="color: #e6db74"> &quot;uri&quot;: &quot;/upload&quot;,</span> <span style="color: #e6db74"> &quot;uri&quot;: &quot;/upload&quot;,</span>
@ -1018,32 +1018,32 @@
<span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">server;</span> <span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">server;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(server);</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(server);</span>
<span style="color: #7a7a7a">// Declare AutoConnectAux separately as a custom web page to access</span> <span style="color: #75715e">// Declare AutoConnectAux separately as a custom web page to access</span>
<span style="color: #7a7a7a">// easily for each page in the post-upload handler.</span> <span style="color: #75715e">// easily for each page in the post-upload handler.</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">auxUpload;</span> <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">auxUpload;</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">auxBrowse;</span> <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">auxBrowse;</span>
<span style="color: #7a7a7a">/**</span> <span style="color: #75715e">/**</span>
<span style="color: #7a7a7a"> * Post uploading, AutoConnectFile&#39;s built-in upload handler reads the</span> <span style="color: #75715e"> * Post uploading, AutoConnectFile&#39;s built-in upload handler reads the</span>
<span style="color: #7a7a7a"> * file saved in SPIFFS and displays the file contents on /upload custom</span> <span style="color: #75715e"> * file saved in SPIFFS and displays the file contents on /upload custom</span>
<span style="color: #7a7a7a"> * web page. However, only files with mime type uploaded as text are</span> <span style="color: #75715e"> * web page. However, only files with mime type uploaded as text are</span>
<span style="color: #7a7a7a"> * displayed. A custom web page handler is called after upload.</span> <span style="color: #75715e"> * displayed. A custom web page handler is called after upload.</span>
<span style="color: #7a7a7a"> * @param aux AutoConnectAux(/upload)</span> <span style="color: #75715e"> * @param aux AutoConnectAux(/upload)</span>
<span style="color: #7a7a7a"> * @param args PageArgument</span> <span style="color: #75715e"> * @param args PageArgument</span>
<span style="color: #7a7a7a"> * @return Uploaded text content</span> <span style="color: #75715e"> * @return Uploaded text content</span>
<span style="color: #7a7a7a"> */</span> <span style="color: #75715e"> */</span>
<span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">postUpload</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux,</span> <span style="color: #f8f8f2">PageArgument</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">args)</span> <span style="color: #f8f8f2">{</span> <span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">postUpload</span><span style="color: #f8f8f2">(AutoConnectAux</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux,</span> <span style="color: #f8f8f2">PageArgument</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">args)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">content;</span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">content;</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">AutoConnectFile</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">upload</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">auxUpload[</span><span style="color: #e6db74">&quot;upload_file&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectFile</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">();</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">AutoConnectFile</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">upload</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">auxUpload[</span><span style="color: #e6db74">&quot;upload_file&quot;</span><span style="color: #f8f8f2">].as</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectFile</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">();</span>
</span> <span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux_filename</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux[</span><span style="color: #e6db74">&quot;filename&quot;</span><span style="color: #f8f8f2">].as</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> <span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux_filename</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux[</span><span style="color: #e6db74">&quot;filename&quot;</span><span style="color: #f8f8f2">].as</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: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux_size</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux[</span><span style="color: #e6db74">&quot;size&quot;</span><span style="color: #f8f8f2">].as</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: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux_size</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux[</span><span style="color: #e6db74">&quot;size&quot;</span><span style="color: #f8f8f2">].as</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: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux_contentType</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux[</span><span style="color: #e6db74">&quot;content_type&quot;</span><span style="color: #f8f8f2">].as</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: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux_contentType</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux[</span><span style="color: #e6db74">&quot;content_type&quot;</span><span style="color: #f8f8f2">].as</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: #7a7a7a">// Assignment operator can be used for the element attribute.</span> <span style="color: #75715e">// Assignment operator can be used for the element attribute.</span>
<span style="color: #f8f8f2">aux_filename.value</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">upload.value;</span> <span style="color: #f8f8f2">aux_filename.value</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">upload.value;</span>
<span style="color: #f8f8f2">aux_size.value</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">String(upload.size);</span> <span style="color: #f8f8f2">aux_size.value</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">String(upload.size);</span>
<span style="color: #f8f8f2">aux_contentType.value</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">upload.mimeType;</span> <span style="color: #f8f8f2">aux_contentType.value</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">upload.mimeType;</span>
<span style="color: #7a7a7a">// The file saved by the AutoConnect upload handler is read from</span> <span style="color: #75715e">// The file saved by the AutoConnect upload handler is read from</span>
<span style="color: #7a7a7a">// the EEPROM and echoed to a custom web page.</span> <span style="color: #75715e">// the EEPROM and echoed to a custom web page.</span>
<span style="color: #f8f8f2">SPIFFS.begin();</span> <span style="color: #f8f8f2">SPIFFS.begin();</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">File</span> <span style="color: #f8f8f2">uploadFile</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(String(</span><span style="color: #e6db74">&quot;/&quot;</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">upload.value).c_str(),</span> <span style="color: #e6db74">&quot;r&quot;</span><span style="color: #f8f8f2">);</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">File</span> <span style="color: #f8f8f2">uploadFile</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(String(</span><span style="color: #e6db74">&quot;/&quot;</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">upload.value).c_str(),</span> <span style="color: #e6db74">&quot;r&quot;</span><span style="color: #f8f8f2">);</span>
</span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(uploadFile)</span> <span style="color: #f8f8f2">{</span> </span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(uploadFile)</span> <span style="color: #f8f8f2">{</span>
@ -1091,8 +1091,8 @@
</ul> </ul>
<p>The substance of AC_File_FS (fs) is a SPIFFS file system implemented by the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance <strong>SPIFFS</strong> to access SPIFFS.</p> <p>The substance of AC_File_FS (fs) is a SPIFFS file system implemented by the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance <strong>SPIFFS</strong> to access SPIFFS.</p>
<p>Also, the substance of AC_File_SD (sd) is a FAT file of Arduino SD library ported to the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance <strong>SD</strong> to access SD. When saving to an external SD device, there are additional required parameters for the connection interface and is defined as the macro in AutoConnectDefs.h.</p> <p>Also, the substance of AC_File_SD (sd) is a FAT file of Arduino SD library ported to the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance <strong>SD</strong> to access SD. When saving to an external SD device, there are additional required parameters for the connection interface and is defined as the macro in AutoConnectDefs.h.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_SD_CS SS</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_SD_CS SS</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_SD_SPEED 4000000</span> <span style="color: #75715e">#define AUTOCONNECT_SD_SPEED 4000000</span>
</code></pre></div> </code></pre></div>
<p><code>AUTOCONNECT_SD_CS</code> defines which GPIO for the CS (Chip Select, or SS as Slave Select) pin. This definition is derived from pins_arduino.h, which is included in the Arduino core distribution. If you want to assign the CS pin to another GPIO, you need to change the macro definition of AutoConnectDefs.h.</p> <p><code>AUTOCONNECT_SD_CS</code> defines which GPIO for the CS (Chip Select, or SS as Slave Select) pin. This definition is derived from pins_arduino.h, which is included in the Arduino core distribution. If you want to assign the CS pin to another GPIO, you need to change the macro definition of AutoConnectDefs.h.</p>
@ -1219,9 +1219,9 @@
<dd><span class="apidef">uploadClass</span><span class="apidesc">Specifies the custom upload class instance.</span></dd> <dd><span class="apidef">uploadClass</span><span class="apidesc">Specifies the custom upload class instance.</span></dd>
</dl></p> </dl></p>
<p>The rough structure of the Sketches that completed these implementations will be as follows:</p> <p>The rough structure of the Sketches that completed these implementations will be as follows:</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.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: #66d9ef">char</span> <span style="color: #f8f8f2">PAGE_UPLOAD[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;(</span> <span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">PAGE_UPLOAD[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;(</span>
<span style="color: #e6db74">{</span> <span style="color: #e6db74">{</span>
@ -1247,7 +1247,7 @@
<span style="color: #e6db74">}</span> <span style="color: #e6db74">}</span>
<span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #7a7a7a">// Custom upload handler class</span> <span style="color: #75715e">// Custom upload handler class</span>
<span style="color: #66d9ef">class</span> <span style="color: #a6e22e">CustomUploader</span> <span style="color: #f92672">:</span> <span style="color: #66d9ef">public</span> <span style="color: #f8f8f2">AutoConnectUploadHandler</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">class</span> <span style="color: #a6e22e">CustomUploader</span> <span style="color: #f92672">:</span> <span style="color: #66d9ef">public</span> <span style="color: #f8f8f2">AutoConnectUploadHandler</span> <span style="color: #f8f8f2">{</span>
<span style="color: #66d9ef">public</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">public</span><span style="color: #f92672">:</span>
<span style="color: #f8f8f2">CustomUploader()</span> <span style="color: #f8f8f2">{}</span> <span style="color: #f8f8f2">CustomUploader()</span> <span style="color: #f8f8f2">{}</span>
@ -1259,31 +1259,31 @@
<span style="color: #66d9ef">void</span> <span style="color: #a6e22e">_close</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span> <span style="color: #66d9ef">override</span><span style="color: #f8f8f2">;</span> <span style="color: #66d9ef">void</span> <span style="color: #a6e22e">_close</span><span style="color: #f8f8f2">(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span> <span style="color: #66d9ef">override</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">};</span> <span style="color: #f8f8f2">};</span>
<span style="color: #7a7a7a">// _open for custom open</span> <span style="color: #75715e">// _open for custom open</span>
<span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">CustomUploader</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">_open(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">filename,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">mode)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">CustomUploader</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">_open(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">filename,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">mode)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Here, an implementation for the open file.</span> <span style="color: #75715e">// Here, an implementation for the open file.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #7a7a7a">// _open for custom write</span> <span style="color: #75715e">// _open for custom write</span>
<span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">CustomUploader</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">_write(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">uint8_t</span> <span style="color: #f92672">*</span><span style="color: #f8f8f2">buf,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">size)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">CustomUploader</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">_write(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">uint8_t</span> <span style="color: #f92672">*</span><span style="color: #f8f8f2">buf,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">size)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Here, an implementation for the writing the file data.</span> <span style="color: #75715e">// Here, an implementation for the writing the file data.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #7a7a7a">// _open for custom close</span> <span style="color: #75715e">// _open for custom close</span>
<span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">CustomUploader</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">_close(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">CustomUploader</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">_close(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Here, an implementation for the close file.</span> <span style="color: #75715e">// Here, an implementation for the close file.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">uploadPage;</span> <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">uploadPage;</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">receivePage;</span> <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">receivePage;</span>
<span style="color: #f8f8f2">CustomUploader</span> <span style="color: #f8f8f2">uploader;</span> <span style="color: #7a7a7a">// Declare the custom uploader</span> <span style="color: #f8f8f2">CustomUploader</span> <span style="color: #f8f8f2">uploader;</span> <span style="color: #75715e">// Declare the custom uploader</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">uploadPage.load(PAGE_UPLOAD);</span> <span style="color: #f8f8f2">uploadPage.load(PAGE_UPLOAD);</span>
<span style="color: #f8f8f2">receivePage.load(PAGE_RECEIVED);</span> <span style="color: #f8f8f2">receivePage.load(PAGE_RECEIVED);</span>
<span style="color: #f8f8f2">portal.join({</span> <span style="color: #f8f8f2">uploadPage,</span> <span style="color: #f8f8f2">receivePage</span> <span style="color: #f8f8f2">});</span> <span style="color: #f8f8f2">portal.join({</span> <span style="color: #f8f8f2">uploadPage,</span> <span style="color: #f8f8f2">receivePage</span> <span style="color: #f8f8f2">});</span>
<span style="color: #f8f8f2">receivePage.onUpload</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">CustomUploader</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(uploader);</span> <span style="color: #7a7a7a">// Register the custom uploader</span> <span style="color: #f8f8f2">receivePage.onUpload</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">CustomUploader</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(uploader);</span> <span style="color: #75715e">// Register the custom uploader</span>
<span style="color: #f8f8f2">portal.begin();</span> <span style="color: #f8f8f2">portal.begin();</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>

@ -1370,25 +1370,25 @@ See the <a href="credit.html">Saved credentials access</a> chapter for details o
<p>The Sketch can abort the <a href="api.html#begin"><em>AutoConnect::begin</em></a> by setting the captive portal timeout and returns control to Sketch. AutoConnect has two parameters for timeout control. One is a timeout value used when trying to connect to the specified AP. It behaves the same as general timeout control in connection attempt by WiFi.begin. This control is specified by the third parameter of <a href="api.html#begin"><em>AutoConnect::begin</em></a>. The default value is macro defined by <a href="api.html#defined-macros"><strong>AUTOCONNECT_TIMEOUT</strong></a> in the <strong>AutoConnectDefs.h</strong> file.</p> <p>The Sketch can abort the <a href="api.html#begin"><em>AutoConnect::begin</em></a> by setting the captive portal timeout and returns control to Sketch. AutoConnect has two parameters for timeout control. One is a timeout value used when trying to connect to the specified AP. It behaves the same as general timeout control in connection attempt by WiFi.begin. This control is specified by the third parameter of <a href="api.html#begin"><em>AutoConnect::begin</em></a>. The default value is macro defined by <a href="api.html#defined-macros"><strong>AUTOCONNECT_TIMEOUT</strong></a> in the <strong>AutoConnectDefs.h</strong> file.</p>
<p>The other timeout control is for the captive portal itself. It is useful when you want to continue sketch execution with offline even if the WiFi connection is not possible. You can also combine it with the <a href="#on-demand-start-the-captive-portal"><strong>immediateStart</strong></a> option to create sketches with high mobility.</p> <p>The other timeout control is for the captive portal itself. It is useful when you want to continue sketch execution with offline even if the WiFi connection is not possible. You can also combine it with the <a href="#on-demand-start-the-captive-portal"><strong>immediateStart</strong></a> option to create sketches with high mobility.</p>
<p>The timeout of the captive portal is specified together with <a href="apiconfig.html#portaltimeout"><em>AutoConnectConfig::portalTimeout</em></a> as follows.</p> <p>The timeout of the captive portal is specified together with <a href="apiconfig.html#portaltimeout"><em>AutoConnectConfig::portalTimeout</em></a> as follows.</p>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">config;</span> <span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">config;</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">config.portalTimeout</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">60000</span><span style="color: #f8f8f2">;</span> <span style="color: #7a7a7a">// It will time out in 60 seconds</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">config.portalTimeout</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">60000</span><span style="color: #f8f8f2">;</span> <span style="color: #75715e">// It will time out in 60 seconds</span>
</span> <span style="color: #f8f8f2">portal.config(config);</span> </span> <span style="color: #f8f8f2">portal.config(config);</span>
<span style="color: #f8f8f2">portal.begin();</span> <span style="color: #f8f8f2">portal.begin();</span>
<span style="color: #f8f8f2">}</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: #66d9ef">void</span> <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(WiFi.status()</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">WL_CONNECTED)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(WiFi.status()</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">WL_CONNECTED)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Some sketch code for the connected scene is here.</span> <span style="color: #75715e">// Some sketch code for the connected scene is here.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #66d9ef">else</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">else</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Some sketch code for not connected scene is here.</span> <span style="color: #75715e">// Some sketch code for not connected scene is here.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">portal.handleClient();</span> <span style="color: #f8f8f2">portal.handleClient();</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
@ -1397,7 +1397,7 @@ Also, if you want to stop AutoConnect completely when the captive portal is time
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">acEnable;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">acEnable;</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">config.portalTimeout</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">60000</span><span style="color: #f8f8f2">;</span> <span style="color: #7a7a7a">// It will time out in 60 seconds</span> <span style="color: #f8f8f2">config.portalTimeout</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">60000</span><span style="color: #f8f8f2">;</span> <span style="color: #75715e">// It will time out in 60 seconds</span>
<span style="color: #f8f8f2">portal.config(config);</span> <span style="color: #f8f8f2">portal.config(config);</span>
<span style="color: #f8f8f2">acEnable</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.begin();</span> <span style="color: #f8f8f2">acEnable</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.begin();</span>
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(</span><span style="color: #f92672">!</span><span style="color: #f8f8f2">acEnable)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(</span><span style="color: #f92672">!</span><span style="color: #f8f8f2">acEnable)</span> <span style="color: #f8f8f2">{</span>
@ -1407,10 +1407,10 @@ Also, if you want to stop AutoConnect completely when the captive portal is time
<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: #66d9ef">void</span> <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(WiFi.status()</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">WL_CONNECTED)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(WiFi.status()</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">WL_CONNECTED)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Some sketch code for the connected scene is here.</span> <span style="color: #75715e">// Some sketch code for the connected scene is here.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #66d9ef">else</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">else</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Some sketch code for not connected scene is here.</span> <span style="color: #75715e">// Some sketch code for not connected scene is here.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(acEnable)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(acEnable)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">portal.handleClient();</span> <span style="color: #f8f8f2">portal.handleClient();</span>
@ -1419,15 +1419,15 @@ Also, if you want to stop AutoConnect completely when the captive portal is time
</code></pre></div> </code></pre></div>
<p>There is another option related to timeout in AutoConnectConfig. It can make use of the captive portal function even after a timeout. The <a href="apiconfig.html#retainportal"><em>AutoConnectConfig::retainPortal</em></a> option will not stop the SoftAP when the captive portal is timed out. If you enable the ratainPortal option, you can try to connect to the AP at any time while continuing to sketch execution with offline even after the captive portal timed-out. Compared to the above code specified no option with the following example code, the captive portal will remain available even after a timeout without changing the logic of the Sketch.</p> <p>There is another option related to timeout in AutoConnectConfig. It can make use of the captive portal function even after a timeout. The <a href="apiconfig.html#retainportal"><em>AutoConnectConfig::retainPortal</em></a> option will not stop the SoftAP when the captive portal is timed out. If you enable the ratainPortal option, you can try to connect to the AP at any time while continuing to sketch execution with offline even after the captive portal timed-out. Compared to the above code specified no option with the following example code, the captive portal will remain available even after a timeout without changing the logic of the Sketch.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">config;</span> <span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">config;</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">config.portalTimeout</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">60000</span><span style="color: #f8f8f2">;</span> <span style="color: #7a7a7a">// It will time out in 60 seconds</span> <span style="color: #f8f8f2">config.portalTimeout</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">60000</span><span style="color: #f8f8f2">;</span> <span style="color: #75715e">// It will time out in 60 seconds</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">config.retainPortal</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">true;</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">config.retainPortal</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">true;</span>
</span> <span style="color: #f8f8f2">portal.config(config);</span> </span> <span style="color: #f8f8f2">portal.config(config);</span>
<span style="color: #f8f8f2">portal.begin();</span> <span style="color: #f8f8f2">portal.begin();</span>
@ -1435,10 +1435,10 @@ Also, if you want to stop AutoConnect completely when the captive portal is time
<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: #66d9ef">void</span> <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(WiFi.status()</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">WL_CONNECTED)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(WiFi.status()</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">WL_CONNECTED)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Some sketch code for the connected scene is here.</span> <span style="color: #75715e">// Some sketch code for the connected scene is here.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #66d9ef">else</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">else</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Some sketch code for not connected scene is here.</span> <span style="color: #75715e">// Some sketch code for not connected scene is here.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">portal.handleClient();</span> <span style="color: #f8f8f2">portal.handleClient();</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
@ -1455,20 +1455,20 @@ Also, if you want to stop AutoConnect completely when the captive portal is time
<li><a href="api.html#begin">Begin</a> the portal.</li> <li><a href="api.html#begin">Begin</a> the portal.</li>
<li>Performs <a href="api.html#handleClient"><em>AutoConnect::handleClient</em></a> in the <strong>loop</strong> function.</li> <li>Performs <a href="api.html#handleClient"><em>AutoConnect::handleClient</em></a> in the <strong>loop</strong> function.</li>
</ol> </ol>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">server;</span> <span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">server;</span>
<span style="color: #7a7a7a">// Declaration for casting legacy page to AutoConnect menu.</span> <span style="color: #75715e">// Declaration for casting legacy page to AutoConnect menu.</span>
<span style="color: #7a7a7a">// Specifies an uri and the menu label.</span> <span style="color: #75715e">// Specifies an uri and the menu label.</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(server);</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(server);</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">hello</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: #7a7a7a">// Step #1 as the above procedure</span> <span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">hello</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: #75715e">// Step #1 as the above procedure</span>
</span> </span>
<span style="color: #7a7a7a">// Step #2 as the above procedure</span> <span style="color: #75715e">// Step #2 as the above procedure</span>
<span style="color: #7a7a7a">// A conventional web page driven by the ESP8266WebServer::on handler.</span> <span style="color: #75715e">// A conventional web page driven by the ESP8266WebServer::on handler.</span>
<span style="color: #7a7a7a">// This is a legacy.</span> <span style="color: #75715e">// This is a legacy.</span>
<span style="color: #66d9ef">void</span> <span style="color: #a6e22e">handleHello</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">void</span> <span style="color: #a6e22e">handleHello</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">server.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text/html&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">String(F(</span> <span style="color: #f8f8f2">server.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text/html&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">String(F(</span>
<span style="color: #e6db74">&quot;&lt;html&gt;&quot;</span> <span style="color: #e6db74">&quot;&lt;html&gt;&quot;</span>
@ -1479,19 +1479,19 @@ Also, if you want to stop AutoConnect completely when the captive portal is time
<span style="color: #f8f8f2">}</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Step #3 as the above procedure</span> <span style="color: #75715e">// Step #3 as the above procedure</span>
<span style="color: #7a7a7a">// Register the &quot;on&quot; handler as usual to ESP8266WebServer.</span> <span style="color: #75715e">// Register the &quot;on&quot; handler as usual to ESP8266WebServer.</span>
<span style="color: #7a7a7a">// Match this URI with the URI of AutoConnectAux to cast.</span> <span style="color: #75715e">// Match this URI with the URI of AutoConnectAux to cast.</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">server.on(</span><span style="color: #e6db74">&quot;/hello&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">handleHello);</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">server.on(</span><span style="color: #e6db74">&quot;/hello&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">handleHello);</span>
</span> </span>
<span style="color: #7a7a7a">// Step #4 as the above procedure</span> <span style="color: #75715e">// Step #4 as the above procedure</span>
<span style="color: #7a7a7a">// Joins AutoConnectAux to cast the page via the handleRoot to AutoConnect.</span> <span style="color: #75715e">// Joins AutoConnectAux to cast the page via the handleRoot to AutoConnect.</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">portal.join({</span> <span style="color: #f8f8f2">hello</span> <span style="color: #f8f8f2">});</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">portal.join({</span> <span style="color: #f8f8f2">hello</span> <span style="color: #f8f8f2">});</span>
</span> <span style="color: #f8f8f2">portal.begin();</span> <span style="color: #7a7a7a">// Step #5 as the above procedure</span> </span> <span style="color: #f8f8f2">portal.begin();</span> <span style="color: #75715e">// Step #5 as the above procedure</span>
<span style="color: #f8f8f2">}</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: #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: #7a7a7a">// Step #6 as the above procedure</span> <span style="color: #f8f8f2">portal.handleClient();</span> <span style="color: #75715e">// Step #6 as the above procedure</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
</code></pre></div> </code></pre></div>
@ -1503,15 +1503,15 @@ Also, if you want to stop AutoConnect completely when the captive portal is time
<li> <li>
<p>Overwrite the label literal of library source code directly.</p> <p>Overwrite the label literal of library source code directly.</p>
<p>You can change the label of the AutoConnect menu item by rewriting the default label literal in <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectLabels.h">AutoConnectLabels.h</a> macros. However, changing menu items literal influences all the Sketch's build scenes.</p> <p>You can change the label of the AutoConnect menu item by rewriting the default label literal in <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectLabels.h">AutoConnectLabels.h</a> macros. However, changing menu items literal influences all the Sketch's build scenes.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_MENULABEL_CONFIGNEW &quot;Configure new AP&quot;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_MENULABEL_CONFIGNEW &quot;Configure new AP&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENULABEL_OPENSSIDS &quot;Open SSIDs&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENULABEL_OPENSSIDS &quot;Open SSIDs&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENULABEL_DISCONNECT &quot;Disconnect&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENULABEL_DISCONNECT &quot;Disconnect&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENULABEL_RESET &quot;Reset...&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENULABEL_RESET &quot;Reset...&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENULABEL_UPDATE &quot;Update&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENULABEL_UPDATE &quot;Update&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENULABEL_HOME &quot;HOME&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENULABEL_HOME &quot;HOME&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENULABEL_DEVINFO &quot;Device info&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENULABEL_DEVINFO &quot;Device info&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_BUTTONLABEL_RESET &quot;RESET&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_BUTTONLABEL_RESET &quot;RESET&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_BUTTONLABEL_UPDATE &quot;UPDATE&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_BUTTONLABEL_UPDATE &quot;UPDATE&quot;</span>
</code></pre></div> </code></pre></div>
<div class="admonition note"> <div class="admonition note">
@ -1528,9 +1528,9 @@ And PlatformIO is a build system. Library sources will not be compiled unless Au
</ol> </ol>
<h3 id="combination-with-mdns"><i class="fa fa-caret-right"></i> Combination with mDNS<a class="headerlink" href="#combination-with-mdns" title="Permanent link">&para;</a></h3> <h3 id="combination-with-mdns"><i class="fa fa-caret-right"></i> Combination with mDNS<a class="headerlink" href="#combination-with-mdns" title="Permanent link">&para;</a></h3>
<p>With <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266mDNS">mDNS library</a>, you can access to ESP8266 by name instead of IP address after connection. The Sketch can start the MDNS responder after <a href="api.html#begin"><em>AutoConnect::begin</em></a>.</p> <p>With <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266mDNS">mDNS library</a>, you can access to ESP8266 by name instead of IP address after connection. The Sketch can start the MDNS responder after <a href="api.html#begin"><em>AutoConnect::begin</em></a>.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266mDNS.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266mDNS.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">Portal;</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
@ -1594,7 +1594,7 @@ Combining these two parameters allows you to filter the destination AP when mult
<h3 id="debug-print"><i class="fa fa-caret-right"></i> Debug print<a class="headerlink" href="#debug-print" title="Permanent link">&para;</a></h3> <h3 id="debug-print"><i class="fa fa-caret-right"></i> Debug print<a class="headerlink" href="#debug-print" title="Permanent link">&para;</a></h3>
<p>You can output AutoConnect monitor messages to the <strong>Serial</strong>. A monitor message activation switch is in an include header file <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h">AutoConnectDefs.h</a> of library source. Define <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h#L14"><strong>AC_DEBUG</strong></a> macro to output the monitor messages.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup></p> <p>You can output AutoConnect monitor messages to the <strong>Serial</strong>. A monitor message activation switch is in an include header file <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h">AutoConnectDefs.h</a> of library source. Define <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h#L14"><strong>AC_DEBUG</strong></a> macro to output the monitor messages.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup></p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AC_DEBUG</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AC_DEBUG</span>
</code></pre></div> </code></pre></div>
<h3 id="disable-the-captive-portal"><i class="fa fa-caret-right"></i> Disable the captive portal<a class="headerlink" href="#disable-the-captive-portal" title="Permanent link">&para;</a></h3> <h3 id="disable-the-captive-portal"><i class="fa fa-caret-right"></i> Disable the captive portal<a class="headerlink" href="#disable-the-captive-portal" title="Permanent link">&para;</a></h3>
@ -1632,8 +1632,8 @@ Combining these two parameters allows you to filter the destination AP when mult
<p>You can use this template if the ESP module does not connect to WiFi at an ordinal situation and need to establish by a manual trigger. In this case, it is desirable that AutoConnect not start until an external switch fires. This behavior is similar to the <a href="https://github.com/tzapu/WiFiManager#on-demand-configuration-portal">WiFiManager's startConfigPortal</a> function.<br /> <p>You can use this template if the ESP module does not connect to WiFi at an ordinal situation and need to establish by a manual trigger. In this case, it is desirable that AutoConnect not start until an external switch fires. This behavior is similar to the <a href="https://github.com/tzapu/WiFiManager#on-demand-configuration-portal">WiFiManager's startConfigPortal</a> function.<br />
<a href="apiconfig.html#immediatestart"><em>AutoConnectConfig::immediateStart</em></a> is an option to launch the portal by the SoftAP immediately without attempting 1<sup>st</sup>-WiFi.begin. Also, by setting the <a href="apiconfig.html#autorise"><em>AutoConnectConfig::autoRise</em></a> option to false, it is possible to suppress unintended automatic pop-ups of the portal screen when connecting to an ESP module SSID.<br /> <a href="apiconfig.html#immediatestart"><em>AutoConnectConfig::immediateStart</em></a> is an option to launch the portal by the SoftAP immediately without attempting 1<sup>st</sup>-WiFi.begin. Also, by setting the <a href="apiconfig.html#autorise"><em>AutoConnectConfig::autoRise</em></a> option to false, it is possible to suppress unintended automatic pop-ups of the portal screen when connecting to an ESP module SSID.<br />
To implement this, execute AutoConnect::config within the <strong>setup()</strong> function as usual, and handle AutoConnect::begin inside the <strong>loop()</strong> function.</p> To implement this, execute AutoConnect::config within the <strong>setup()</strong> function as usual, and handle AutoConnect::begin inside the <strong>loop()</strong> function.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define TRIGGER_PIN 5 // Trigger switch should be LOW active.</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define TRIGGER_PIN 5 // Trigger switch should be LOW active.</span>
<span style="color: #7a7a7a">#define HOLD_TIMER 3000</span> <span style="color: #75715e">#define HOLD_TIMER 3000</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">Portal;</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">Portal;</span>
<span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">Config;</span> <span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">Config;</span>
@ -1641,7 +1641,7 @@ To implement this, execute AutoConnect::config within the <strong>setup()</stron
<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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">pinMode(</span><span style="color: #ae81ff">5</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">INPUT_PULLUP);</span> <span style="color: #f8f8f2">pinMode(</span><span style="color: #ae81ff">5</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">INPUT_PULLUP);</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">Config.immediateStart</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">true;</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">Config.immediateStart</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">true;</span>
</span> <span style="color: #7a7a7a">// Config.autoRise = false; // If you don&#39;t need to automatically pop-up the portal when connected to the ESP module&#39;s SSID.</span> </span> <span style="color: #75715e">// Config.autoRise = false; // If you don&#39;t need to automatically pop-up the portal when connected to the ESP module&#39;s SSID.</span>
<span style="color: #f8f8f2">Portal.config(Config);</span> <span style="color: #f8f8f2">Portal.config(Config);</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
@ -1651,18 +1651,18 @@ To implement this, execute AutoConnect::config within the <strong>setup()</stron
<span style="color: #66d9ef">while</span> <span style="color: #f8f8f2">(digitalRead(TRIGGER_PIN)</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">LOW)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">while</span> <span style="color: #f8f8f2">(digitalRead(TRIGGER_PIN)</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">LOW)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">yield();</span> <span style="color: #f8f8f2">yield();</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #7a7a7a">// Hold the switch while HOLD_TIMER time to start connect.</span> <span style="color: #75715e">// Hold the switch while HOLD_TIMER time to start connect.</span>
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(millis()</span> <span style="color: #f92672">-</span> <span style="color: #f8f8f2">tm</span> <span style="color: #f92672">&gt;</span> <span style="color: #f8f8f2">HOLD_TIMER)</span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(millis()</span> <span style="color: #f92672">-</span> <span style="color: #f8f8f2">tm</span> <span style="color: #f92672">&gt;</span> <span style="color: #f8f8f2">HOLD_TIMER)</span>
<span style="color: #f8f8f2">Portal.begin();</span> <span style="color: #f8f8f2">Portal.begin();</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(WiFi.status()</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">WL_CONNECTED)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(WiFi.status()</span> <span style="color: #f92672">==</span> <span style="color: #f8f8f2">WL_CONNECTED)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Here, what to do if the module has connected to a WiFi access point</span> <span style="color: #75715e">// Here, what to do if the module has connected to a WiFi access point</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #7a7a7a">// Main process of your sketch</span> <span style="color: #75715e">// Main process of your sketch</span>
<span style="color: #f8f8f2">Portal.handleClient();</span> <span style="color: #7a7a7a">// If WiFi is not connected, handleClient will do nothing.</span> <span style="color: #f8f8f2">Portal.handleClient();</span> <span style="color: #75715e">// If WiFi is not connected, handleClient will do nothing.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
</code></pre></div> </code></pre></div>
@ -1678,9 +1678,9 @@ Known access point credentials are saved by AutoConnect, to the ESP module can u
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnect</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">portal</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">nullptr</span><span style="color: #f8f8f2">;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnect</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">portal</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">nullptr</span><span style="color: #f8f8f2">;</span>
<span style="color: #66d9ef">bool</span> <span style="color: #a6e22e">detectSwitch</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">bool</span> <span style="color: #a6e22e">detectSwitch</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">/*</span> <span style="color: #75715e">/*</span>
<span style="color: #7a7a7a"> Returns true if an external switch to configure is active.</span> <span style="color: #75715e"> Returns true if an external switch to configure is active.</span>
<span style="color: #7a7a7a"> */</span> <span style="color: #75715e"> */</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #66d9ef">bool</span> <span style="color: #a6e22e">connectWiFi</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">ssid,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">password,</span> <span style="color: #66d9ef">unsigned</span> <span style="color: #66d9ef">long</span> <span style="color: #f8f8f2">timeout)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">bool</span> <span style="color: #a6e22e">connectWiFi</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">ssid,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">password,</span> <span style="color: #66d9ef">unsigned</span> <span style="color: #66d9ef">long</span> <span style="color: #f8f8f2">timeout)</span> <span style="color: #f8f8f2">{</span>
@ -1704,7 +1704,7 @@ Known access point credentials are saved by AutoConnect, to the ESP module can u
<span style="color: #66d9ef">break</span><span style="color: #f8f8f2">;</span> <span style="color: #66d9ef">break</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(WiFi.status()</span> <span style="color: #f92672">!=</span> <span style="color: #f8f8f2">WL_CONNECTED)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(WiFi.status()</span> <span style="color: #f92672">!=</span> <span style="color: #f8f8f2">WL_CONNECTED)</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Here, do something when WiFi cannot reach.</span> <span style="color: #75715e">// Here, do something when WiFi cannot reach.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
@ -1722,7 +1722,7 @@ Known access point credentials are saved by AutoConnect, to the ESP module can u
<span style="color: #f8f8f2">portal</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">nullptr</span><span style="color: #f8f8f2">;</span> <span style="color: #f8f8f2">portal</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">nullptr</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #7a7a7a">// Here, ordinally sketch logic.</span> <span style="color: #75715e">// Here, ordinally sketch logic.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
</code></pre></div> </code></pre></div>
@ -1743,9 +1743,9 @@ Known access point credentials are saved by AutoConnect, to the ESP module can u
</div> </div>
<h3 id="usage-for-automatically-instantiated-esp8266webserverwebserver"><i class="fa fa-caret-right"></i> Usage for automatically instantiated ESP8266WebServer/WebServer<a class="headerlink" href="#usage-for-automatically-instantiated-esp8266webserverwebserver" title="Permanent link">&para;</a></h3> <h3 id="usage-for-automatically-instantiated-esp8266webserverwebserver"><i class="fa fa-caret-right"></i> Usage for automatically instantiated ESP8266WebServer/WebServer<a class="headerlink" href="#usage-for-automatically-instantiated-esp8266webserverwebserver" title="Permanent link">&para;</a></h3>
<p>The Sketch can handle URL requests using ESP8266WebServer or WebServer that AutoConnect started internally. ESP8266WebServer/WebServer instantiated dynamically by AutoConnect can be referred to by <a href="api.html#host"><em>AutoConnect::host</em></a> function. The Sketch can use the '<strong>on</strong>' function, '<strong>send</strong>' function, '<strong>client</strong>' function and others by ESP8266WebServer/WebServer reference of its return value.</p> <p>The Sketch can handle URL requests using ESP8266WebServer or WebServer that AutoConnect started internally. ESP8266WebServer/WebServer instantiated dynamically by AutoConnect can be referred to by <a href="api.html#host"><em>AutoConnect::host</em></a> function. The Sketch can use the '<strong>on</strong>' function, '<strong>send</strong>' function, '<strong>client</strong>' function and others by ESP8266WebServer/WebServer reference of its return value.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">Portal;</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">Portal;</span>
@ -1764,16 +1764,16 @@ Known access point credentials are saved by AutoConnect, to the ESP module can u
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(r)</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(r)</span> <span style="color: #f8f8f2">{</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">ESP8266WebServer</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">IntServer</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">Portal.host();</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">ESP8266WebServer</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">IntServer</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">Portal.host();</span>
</span><span style="background-color: #49483e"> <span style="color: #f8f8f2">IntServer.on(</span><span style="color: #e6db74">&quot;/&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">handleRoot);</span> </span><span style="background-color: #49483e"> <span style="color: #f8f8f2">IntServer.on(</span><span style="color: #e6db74">&quot;/&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">handleRoot);</span>
</span> <span style="color: #f8f8f2">Portal.onNotFound(handleNotFound);</span> <span style="color: #7a7a7a">// For only onNotFound.</span> </span> <span style="color: #f8f8f2">Portal.onNotFound(handleNotFound);</span> <span style="color: #75715e">// For only onNotFound.</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">}</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: #66d9ef">void</span> <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">Portal.host().handleClient();</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">Portal.host().handleClient();</span>
</span> <span style="color: #f8f8f2">Portal.handleRequest();</span> </span> <span style="color: #f8f8f2">Portal.handleRequest();</span>
<span style="color: #7a7a7a">/* or following one line code is equ.</span> <span style="color: #75715e">/* or following one line code is equ.</span>
<span style="color: #7a7a7a"> Portal.handleClient();</span> <span style="color: #75715e"> Portal.handleClient();</span>
<span style="color: #7a7a7a"> */</span> <span style="color: #75715e"> */</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
</code></pre></div> </code></pre></div>
@ -1873,7 +1873,7 @@ See the <a href="otabrowser.html">Updates with the Web Browser</a> chapter for d
<span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">Config;</span> <span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">Config;</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #7a7a7a">// Set menu title</span> <span style="color: #75715e">// Set menu title</span>
<span style="background-color: #49483e"> <span style="color: #f8f8f2">Config.title</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;FSBrowser&quot;</span><span style="color: #f8f8f2">;</span> <span style="background-color: #49483e"> <span style="color: #f8f8f2">Config.title</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;FSBrowser&quot;</span><span style="color: #f8f8f2">;</span>
</span><span style="background-color: #49483e"> <span style="color: #f8f8f2">Portal.config(Config);</span> </span><span style="background-color: #49483e"> <span style="color: #f8f8f2">Portal.config(Config);</span>
</span> <span style="color: #f8f8f2">Portal.begin();</span> </span> <span style="color: #f8f8f2">Portal.begin();</span>
@ -1936,7 +1936,7 @@ But this method is not recommended. The broadcast radio of SSID emitted from Sof
</div> </div>
<h3 id="relocate-the-autoconnect-home-path"><i class="fa fa-caret-right"></i> Relocate the AutoConnect home path<a class="headerlink" href="#relocate-the-autoconnect-home-path" title="Permanent link">&para;</a></h3> <h3 id="relocate-the-autoconnect-home-path"><i class="fa fa-caret-right"></i> Relocate the AutoConnect home path<a class="headerlink" href="#relocate-the-autoconnect-home-path" title="Permanent link">&para;</a></h3>
<p>A home path of AutoConnect is <strong>/_ac</strong> by default. You can access from the browser with <a href="http://IPADDRESS/">http://IPADDRESS/</a>_ac. You can change the home path by revising <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h#L69"><strong>AUTOCONNECT_URI</strong></a> macro in the include header file as <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h">AutoConnectDefs.h</a>.</p> <p>A home path of AutoConnect is <strong>/_ac</strong> by default. You can access from the browser with <a href="http://IPADDRESS/">http://IPADDRESS/</a>_ac. You can change the home path by revising <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h#L69"><strong>AUTOCONNECT_URI</strong></a> macro in the include header file as <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h">AutoConnectDefs.h</a>.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_URI &quot;/_ac&quot;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_URI &quot;/_ac&quot;</span>
</code></pre></div> </code></pre></div>
<h3 id="static-ip-assignment-2"><i class="fa fa-caret-right"></i> Static IP assignment <sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup><a class="headerlink" href="#static-ip-assignment-2" title="Permanent link">&para;</a></h3> <h3 id="static-ip-assignment-2"><i class="fa fa-caret-right"></i> Static IP assignment <sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup><a class="headerlink" href="#static-ip-assignment-2" title="Permanent link">&para;</a></h3>
@ -1986,10 +1986,10 @@ But this method is not recommended. The broadcast radio of SSID emitted from Sof
<li>No blink: WiFi connection with access point established and data link enabled. (i.e. WiFi.status = WL_CONNECTED)</li> <li>No blink: WiFi connection with access point established and data link enabled. (i.e. WiFi.status = WL_CONNECTED)</li>
</ul> </ul>
<p>The flicker cycle length is defined by some macros in <code>AutoConnectDefs.h</code> header file.</p> <p>The flicker cycle length is defined by some macros in <code>AutoConnectDefs.h</code> header file.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_FLICKER_PERIODAP 1000 // [ms]</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_FLICKER_PERIODAP 1000 // [ms]</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_FLICKER_PERIODDC (AUTOCONNECT_FLICKER_PERIODAP &lt;&lt; 1) // [ms]</span> <span style="color: #75715e">#define AUTOCONNECT_FLICKER_PERIODDC (AUTOCONNECT_FLICKER_PERIODAP &lt;&lt; 1) // [ms]</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_FLICKER_WIDTHAP 96 // (8 bit resolution)</span> <span style="color: #75715e">#define AUTOCONNECT_FLICKER_WIDTHAP 96 // (8 bit resolution)</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_FLICKER_WIDTHDC 16 // (8 bit resolution)</span> <span style="color: #75715e">#define AUTOCONNECT_FLICKER_WIDTHDC 16 // (8 bit resolution)</span>
</code></pre></div> </code></pre></div>
<ul> <ul>

@ -1145,29 +1145,29 @@
<h2 id="include-headers"><i class="fa fa-code"></i> Include headers<a class="headerlink" href="#include-headers" title="Permanent link">&para;</a></h2> <h2 id="include-headers"><i class="fa fa-code"></i> Include headers<a class="headerlink" href="#include-headers" title="Permanent link">&para;</a></h2>
<h3 id="autoconnecth">AutoConnect.h<a class="headerlink" href="#autoconnecth" title="Permanent link">&para;</a></h3> <h3 id="autoconnecth">AutoConnect.h<a class="headerlink" href="#autoconnecth" title="Permanent link">&para;</a></h3>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
</code></pre></div> </code></pre></div>
<h2 id="defined-macros"><i class="fa fa-code"></i> Defined macros<a class="headerlink" href="#defined-macros" title="Permanent link">&para;</a></h2> <h2 id="defined-macros"><i class="fa fa-code"></i> Defined macros<a class="headerlink" href="#defined-macros" title="Permanent link">&para;</a></h2>
<p>They contain in <code>AutoConnectDefs.h</code>.</p> <p>They contain in <code>AutoConnectDefs.h</code>.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AC_DEBUG // Monitor message output activation</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AC_DEBUG // Monitor message output activation</span>
<span style="color: #7a7a7a">#define AC_DEBUG_PORT Serial // Default message output device</span> <span style="color: #75715e">#define AC_DEBUG_PORT Serial // Default message output device</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_AP_IP 0x011CD9AC // Default SoftAP IP</span> <span style="color: #75715e">#define AUTOCONNECT_AP_IP 0x011CD9AC // Default SoftAP IP</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_AP_GW 0x011CD9AC // Default SoftAP Gateway IP</span> <span style="color: #75715e">#define AUTOCONNECT_AP_GW 0x011CD9AC // Default SoftAP Gateway IP</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_AP_NM 0x00FFFFFF // Default subnet mask</span> <span style="color: #75715e">#define AUTOCONNECT_AP_NM 0x00FFFFFF // Default subnet mask</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_DNSPORT 53 // Default DNS port at captive portal</span> <span style="color: #75715e">#define AUTOCONNECT_DNSPORT 53 // Default DNS port at captive portal</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_HTTPPORT 80 // Default HTTP</span> <span style="color: #75715e">#define AUTOCONNECT_HTTPPORT 80 // Default HTTP</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENU_TITLE &quot;AutoConnect&quot; // Default AutoConnect menu title</span> <span style="color: #75715e">#define AUTOCONNECT_MENU_TITLE &quot;AutoConnect&quot; // Default AutoConnect menu title</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_URI &quot;/_ac&quot; // Default AutoConnect root path</span> <span style="color: #75715e">#define AUTOCONNECT_URI &quot;/_ac&quot; // Default AutoConnect root path</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_TIMEOUT 30000 // Default connection timeout[ms]</span> <span style="color: #75715e">#define AUTOCONNECT_TIMEOUT 30000 // Default connection timeout[ms]</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_CAPTIVEPORTAL_TIMEOUT 0 // Captive portal timeout value</span> <span style="color: #75715e">#define AUTOCONNECT_CAPTIVEPORTAL_TIMEOUT 0 // Captive portal timeout value</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_STARTUPTIME 30 // Default waiting time[s] for after reset</span> <span style="color: #75715e">#define AUTOCONNECT_STARTUPTIME 30 // Default waiting time[s] for after reset</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_USE_JSON // Allow AutoConnect elements to be handled by JSON format</span> <span style="color: #75715e">#define AUTOCONNECT_USE_JSON // Allow AutoConnect elements to be handled by JSON format</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_USE_UPDATE // Indicator of whether to use the AutoConnectUpdate feature.</span> <span style="color: #75715e">#define AUTOCONNECT_USE_UPDATE // Indicator of whether to use the AutoConnectUpdate feature.</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_UPDATE_PORT 8000 // Available HTTP port number for the update</span> <span style="color: #75715e">#define AUTOCONNECT_UPDATE_PORT 8000 // Available HTTP port number for the update</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_UPDATE_TIMEOUT 8000 // HTTP client timeout limitation for the update [ms]</span> <span style="color: #75715e">#define AUTOCONNECT_UPDATE_TIMEOUT 8000 // HTTP client timeout limitation for the update [ms]</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_TICKER_PORT LED_BUILTIN // Ticker port</span> <span style="color: #75715e">#define AUTOCONNECT_TICKER_PORT LED_BUILTIN // Ticker port</span>
<span style="color: #7a7a7a">#endif</span> <span style="color: #75715e">#endif</span>
</code></pre></div> </code></pre></div>
<div class="admonition note"> <div class="admonition note">

@ -1146,9 +1146,9 @@ Get vector of reference of all elements.
<dd>A reference to std::vector of reference to AutoConnecctElements.</dd> <dd>A reference to std::vector of reference to AutoConnecctElements.</dd>
</dl></p> </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> <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><code><span style="color: #7a7a7a">// An example of getting type and name of all AutoConnectElements registered in AutoConnectAux.</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><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: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span>
<span style="color: #7a7a7a">// some code here...</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: #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: #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">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>
@ -1361,11 +1361,11 @@ Sets the value of the specified AutoConnectElement. If values is specified
<p class="admonition-title">You can directly access the value member variable.</p> <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. <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><code><span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span>
<span style="color: #7a7a7a">// ... Griping the AutoConnectText here.</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> <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>
</code></pre></div> </code></pre></div>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">aux;</span>
<span style="color: #7a7a7a">// ... Griping the AutoConnectText here.</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">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> <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>
</code></pre></div> </code></pre></div>

@ -1598,24 +1598,24 @@ However, even if you specify like the above, the AutoConnectAux page items still
</dl></p> </dl></p>
<h2 id="autoconnectconfig-example"><i class="fa fa-code"></i> AutoConnectConfig example<a class="headerlink" href="#autoconnectconfig-example" title="Permanent link">&para;</a></h2> <h2 id="autoconnectconfig-example"><i class="fa fa-code"></i> AutoConnectConfig example<a class="headerlink" href="#autoconnectconfig-example" title="Permanent link">&para;</a></h2>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">Portal;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">Portal;</span>
<span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #a6e22e">Config</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;passpass&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// SoftAp name is determined at runtime</span> <span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #a6e22e">Config</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;passpass&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// SoftAp name is determined at runtime</span>
<span style="color: #f8f8f2">Config.apid</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">ESP.hostname();</span> <span style="color: #7a7a7a">// Retrieve host name to SotAp identification</span> <span style="color: #f8f8f2">Config.apid</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">ESP.hostname();</span> <span style="color: #75715e">// Retrieve host name to SotAp identification</span>
<span style="color: #f8f8f2">Config.apip</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">192</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">168</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">10</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">101</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// Sets SoftAP IP address</span> <span style="color: #f8f8f2">Config.apip</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">192</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">168</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">10</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">101</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Sets SoftAP IP address</span>
<span style="color: #f8f8f2">Config.gateway</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">192</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">168</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">10</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">1</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// Sets WLAN router IP address</span> <span style="color: #f8f8f2">Config.gateway</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">192</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">168</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">10</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">1</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Sets WLAN router IP address</span>
<span style="color: #f8f8f2">Config.netmask</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">255</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">255</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">255</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">0</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// Sets WLAN scope</span> <span style="color: #f8f8f2">Config.netmask</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">255</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">255</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">255</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">0</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Sets WLAN scope</span>
<span style="color: #f8f8f2">Config.autoReconnect</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">true;</span> <span style="color: #7a7a7a">// Enable auto-reconnect</span> <span style="color: #f8f8f2">Config.autoReconnect</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">true;</span> <span style="color: #75715e">// Enable auto-reconnect</span>
<span style="color: #f8f8f2">Config.autoSave</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">AC_SAVECREDENTIAL_NEVER;</span> <span style="color: #7a7a7a">// No save credential</span> <span style="color: #f8f8f2">Config.autoSave</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">AC_SAVECREDENTIAL_NEVER;</span> <span style="color: #75715e">// No save credential</span>
<span style="color: #f8f8f2">Config.boundaryOffset</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">64</span><span style="color: #f8f8f2">;</span> <span style="color: #7a7a7a">// Reserve 64 bytes for the user data in EEPROM.</span> <span style="color: #f8f8f2">Config.boundaryOffset</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">64</span><span style="color: #f8f8f2">;</span> <span style="color: #75715e">// Reserve 64 bytes for the user data in EEPROM.</span>
<span style="color: #f8f8f2">Config.portalTimeout</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">60000</span><span style="color: #f8f8f2">;</span> <span style="color: #7a7a7a">// Sets timeout value for the captive portal</span> <span style="color: #f8f8f2">Config.portalTimeout</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">60000</span><span style="color: #f8f8f2">;</span> <span style="color: #75715e">// Sets timeout value for the captive portal</span>
<span style="color: #f8f8f2">Config.retainPortal</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">true;</span> <span style="color: #7a7a7a">// Retains the portal function after timed-out</span> <span style="color: #f8f8f2">Config.retainPortal</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">true;</span> <span style="color: #75715e">// Retains the portal function after timed-out</span>
<span style="color: #f8f8f2">Config.homeUri</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;/index.html&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #7a7a7a">// Sets home path of Sketch application</span> <span style="color: #f8f8f2">Config.homeUri</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;/index.html&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #75715e">// Sets home path of Sketch application</span>
<span style="color: #f8f8f2">Config.title</span> <span style="color: #f92672">=</span><span style="color: #e6db74">&quot;My menu&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #7a7a7a">// Customize the menu title</span> <span style="color: #f8f8f2">Config.title</span> <span style="color: #f92672">=</span><span style="color: #e6db74">&quot;My menu&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #75715e">// Customize the menu title</span>
<span style="color: #f8f8f2">Config.staip</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">192</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">168</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">10</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">10</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// Sets static IP</span> <span style="color: #f8f8f2">Config.staip</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">192</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">168</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">10</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">10</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Sets static IP</span>
<span style="color: #f8f8f2">Config.staGateway</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">192</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">168</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">10</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">1</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// Sets WiFi router address</span> <span style="color: #f8f8f2">Config.staGateway</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">192</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">168</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">10</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">1</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Sets WiFi router address</span>
<span style="color: #f8f8f2">Config.staNetmask</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">255</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">255</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">255</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">0</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// Sets WLAN scope</span> <span style="color: #f8f8f2">Config.staNetmask</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">255</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">255</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">255</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">0</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Sets WLAN scope</span>
<span style="color: #f8f8f2">Config.dns1</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">192</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">168</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">10</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">1</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// Sets primary DNS address</span> <span style="color: #f8f8f2">Config.dns1</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">IPAddress(</span><span style="color: #ae81ff">192</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">168</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">10</span><span style="color: #f8f8f2">,</span><span style="color: #ae81ff">1</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Sets primary DNS address</span>
<span style="color: #f8f8f2">Portal.config(Config);</span> <span style="color: #7a7a7a">// Configure AutoConnect</span> <span style="color: #f8f8f2">Portal.config(Config);</span> <span style="color: #75715e">// Configure AutoConnect</span>
<span style="color: #f8f8f2">Portal.begin();</span> <span style="color: #7a7a7a">// Starts and behaves captive portal</span> <span style="color: #f8f8f2">Portal.begin();</span> <span style="color: #75715e">// Starts and behaves captive portal</span>
</code></pre></div> </code></pre></div>

@ -1034,8 +1034,8 @@
</div> </div>
<h4 id="2-declare-autoconnect-object">2. Declare AutoConnect object<a class="headerlink" href="#2-declare-autoconnect-object" title="Permanent link">&para;</a></h4> <h4 id="2-declare-autoconnect-object">2. Declare AutoConnect object<a class="headerlink" href="#2-declare-autoconnect-object" title="Permanent link">&para;</a></h4>
<p><a href="#esp8266webserver-hosted-or-parasitic">Two options</a> are available for <a href="api.html#constructors">AutoConnect constructor</a>.</p> <p><a href="#esp8266webserver-hosted-or-parasitic">Two options</a> are available for <a href="api.html#constructors">AutoConnect constructor</a>.</p>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">VARIABLE</span><span style="color: #f8f8f2">(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">ESP8266WebServer);</span> <span style="color: #7a7a7a">// For ESP8266</span> <p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">VARIABLE</span><span style="color: #f8f8f2">(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">ESP8266WebServer);</span> <span style="color: #75715e">// For ESP8266</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">VARIABLE</span><span style="color: #f8f8f2">(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">WebServer);</span> <span style="color: #7a7a7a">// For ESP32</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">VARIABLE</span><span style="color: #f8f8f2">(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">WebServer);</span> <span style="color: #75715e">// For ESP32</span>
</code></pre></div> </code></pre></div>
or</p> or</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">VARIABLE;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">VARIABLE;</span>

@ -964,10 +964,10 @@
</table> </table>
<p>The definition of label text must conform to a certain coding pattern. Undefine with <code>#undef</code> the <code>#define</code> directive corresponding to the above IDs, and then redefine the ID with the replacement text. And surround it with <code>#ifdef</code> ~ <code>#endif</code>.</p> <p>The definition of label text must conform to a certain coding pattern. Undefine with <code>#undef</code> the <code>#define</code> directive corresponding to the above IDs, and then redefine the ID with the replacement text. And surround it with <code>#ifdef</code> ~ <code>#endif</code>.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#ifdef AUTOCONNECT_MENULABEL_CONFIGNEW</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#ifdef AUTOCONNECT_MENULABEL_CONFIGNEW</span>
<span style="color: #7a7a7a">#undef AUTOCONNECT_MENULABEL_CONFIGNEW</span> <span style="color: #75715e">#undef AUTOCONNECT_MENULABEL_CONFIGNEW</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENULABEL_CONFIGNEW &quot;NEW_STRING_YOU_WISH&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENULABEL_CONFIGNEW &quot;NEW_STRING_YOU_WISH&quot;</span>
<span style="color: #7a7a7a">#endif</span> <span style="color: #75715e">#endif</span>
</code></pre></div> </code></pre></div>
<p>You may not need to rewrite all definitions. It depends on your wishes and is sufficient that the above the include file contains only the labels you need.</p> <p>You may not need to rewrite all definitions. It depends on your wishes and is sufficient that the above the include file contains only the labels you need.</p>

@ -122,7 +122,7 @@
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" data-md-component="overlay" for="__drawer"></label> <label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
<a href="#116-apr-17-2020" tabindex="0" class="md-skip"> <a href="#117-apr-19-2020" tabindex="0" class="md-skip">
Skip to content Skip to content
</a> </a>
@ -737,6 +737,13 @@
<label class="md-nav__title" for="__toc">Table of contents</label> <label class="md-nav__title" for="__toc">Table of contents</label>
<ul class="md-nav__list" data-md-scrollfix> <ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#117-apr-19-2020" class="md-nav__link">
[1.1.7] Apr. 19, 2020
</a>
</li>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#116-apr-17-2020" class="md-nav__link"> <a href="#116-apr-17-2020" class="md-nav__link">
[1.1.6] Apr. 17, 2020 [1.1.6] Apr. 17, 2020
@ -939,6 +946,13 @@
<label class="md-nav__title" for="__toc">Table of contents</label> <label class="md-nav__title" for="__toc">Table of contents</label>
<ul class="md-nav__list" data-md-scrollfix> <ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#117-apr-19-2020" class="md-nav__link">
[1.1.7] Apr. 19, 2020
</a>
</li>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#116-apr-17-2020" class="md-nav__link"> <a href="#116-apr-17-2020" class="md-nav__link">
[1.1.6] Apr. 17, 2020 [1.1.6] Apr. 17, 2020
@ -1119,7 +1133,11 @@
<h1>Change log</h1> <h1>Change log</h1>
<h4 id="116-apr-17-2020">[1.1.6] Apr. 17, 2020<a class="headerlink" href="#116-apr-17-2020" title="Permanent link">&para;</a></h4> <h4 id="117-apr-19-2020">[1.1.7] Apr. 19, 2020<a class="headerlink" href="#117-apr-19-2020" title="Permanent link">&para;</a></h4>
<ul>
<li>Fixed Apply button not work.</li>
</ul>
<h4 id="116-apr-17-2020">[1.1.6] Apr. 17, 2020<a class="headerlink" href="#116-apr-17-2020" title="Permanent link">&para;</a></h4>
<ul> <ul>
<li>Fixed OTA page translation not work.</li> <li>Fixed OTA page translation not work.</li>
</ul> </ul>

@ -902,23 +902,23 @@ Defines the active menu item background color.</p>
<h2 id="typical-color-schemes">Typical color schemes<a class="headerlink" href="#typical-color-schemes" title="Permanent link">&para;</a></h2> <h2 id="typical-color-schemes">Typical color schemes<a class="headerlink" href="#typical-color-schemes" title="Permanent link">&para;</a></h2>
<p>Here are some color schemes picked up.</p> <p>Here are some color schemes picked up.</p>
<h3 id="indigo"><i class="fas fa-palette"></i> Indigo<a class="headerlink" href="#indigo" title="Permanent link">&para;</a></h3> <h3 id="indigo"><i class="fas fa-palette"></i> Indigo<a class="headerlink" href="#indigo" title="Permanent link">&para;</a></h3>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_MENUCOLOR_TEXT &quot;#ffa500&quot;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_MENUCOLOR_TEXT &quot;#ffa500&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENUCOLOR_BACKGROUND &quot;#1a237e&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENUCOLOR_BACKGROUND &quot;#1a237e&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENUCOLOR_ACTIVE &quot;#283593&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENUCOLOR_ACTIVE &quot;#283593&quot;</span>
</code></pre></div> </code></pre></div>
<p><img src="images/ACMenu_indigo.png"></p> <p><img src="images/ACMenu_indigo.png"></p>
<h3 id="dim-gray"><i class="fas fa-palette"></i> Dim-gray<a class="headerlink" href="#dim-gray" title="Permanent link">&para;</a></h3> <h3 id="dim-gray"><i class="fas fa-palette"></i> Dim-gray<a class="headerlink" href="#dim-gray" title="Permanent link">&para;</a></h3>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_MENUCOLOR_TEXT &quot;#fffacd&quot;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_MENUCOLOR_TEXT &quot;#fffacd&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENUCOLOR_BACKGROUND &quot;#696969&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENUCOLOR_BACKGROUND &quot;#696969&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENUCOLOR_ACTIVE &quot;#808080&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENUCOLOR_ACTIVE &quot;#808080&quot;</span>
</code></pre></div> </code></pre></div>
<p><img src="images/ACMenu_dimgray.png"></p> <p><img src="images/ACMenu_dimgray.png"></p>
<h3 id="brown"><i class="fas fa-palette"></i> Brown<a class="headerlink" href="#brown" title="Permanent link">&para;</a></h3> <h3 id="brown"><i class="fas fa-palette"></i> Brown<a class="headerlink" href="#brown" title="Permanent link">&para;</a></h3>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_MENUCOLOR_TEXT &quot;#e6e6fa&quot;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_MENUCOLOR_TEXT &quot;#e6e6fa&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENUCOLOR_BACKGROUND &quot;#3e2723&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENUCOLOR_BACKGROUND &quot;#3e2723&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_MENUCOLOR_ACTIVE &quot;#4e342e&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_MENUCOLOR_ACTIVE &quot;#4e342e&quot;</span>
</code></pre></div> </code></pre></div>
<p><img src="images/ACMenu_brown.png"></p> <p><img src="images/ACMenu_brown.png"></p>

@ -1062,7 +1062,7 @@
<p>If you are using an Arduino core for ESP32 1.0.2 earlier and need to use credentials in EEPROM for backward compatibility, turns off the <strong>AUTOCONNECT_USE_PREFERENCES</strong><sup id="fnref:3"><a class="footnote-ref" href="#fn:3">3</a></sup> macro definition in <code>AutoConnectCredentials.h</code> file. AutoConnect behaves assuming that credentials are stored in EEPROM if <code>AUTOCONNECT_USE_PREFERENCES</code> is not defined.</p> <p>If you are using an Arduino core for ESP32 1.0.2 earlier and need to use credentials in EEPROM for backward compatibility, turns off the <strong>AUTOCONNECT_USE_PREFERENCES</strong><sup id="fnref:3"><a class="footnote-ref" href="#fn:3">3</a></sup> macro definition in <code>AutoConnectCredentials.h</code> file. AutoConnect behaves assuming that credentials are stored in EEPROM if <code>AUTOCONNECT_USE_PREFERENCES</code> is not defined.</p>
<h2 id="autoconnectcredential">AutoConnectCredential<a class="headerlink" href="#autoconnectcredential" title="Permanent link">&para;</a></h2> <h2 id="autoconnectcredential">AutoConnectCredential<a class="headerlink" href="#autoconnectcredential" title="Permanent link">&para;</a></h2>
<h3 id="include-header"><i class="fa fa-code"></i> Include header<a class="headerlink" href="#include-header" title="Permanent link">&para;</a></h3> <h3 id="include-header"><i class="fa fa-code"></i> Include header<a class="headerlink" href="#include-header" title="Permanent link">&para;</a></h3>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnectCredential.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnectCredential.h&gt;</span>
</code></pre></div> </code></pre></div>
<h3 id="constructors"><i class="fa fa-code"></i> Constructors<a class="headerlink" href="#constructors" title="Permanent link">&para;</a></h3> <h3 id="constructors"><i class="fa fa-code"></i> Constructors<a class="headerlink" href="#constructors" title="Permanent link">&para;</a></h3>
@ -1157,7 +1157,7 @@ The following function is an implementation example, and you can use it to achie
<span style="color: #66d9ef">uint8_t</span> <span style="color: #f8f8f2">ssid[</span><span style="color: #ae81ff">32</span><span style="color: #f8f8f2">];</span> <span style="color: #66d9ef">uint8_t</span> <span style="color: #f8f8f2">ssid[</span><span style="color: #ae81ff">32</span><span style="color: #f8f8f2">];</span>
<span style="color: #66d9ef">uint8_t</span> <span style="color: #f8f8f2">password[</span><span style="color: #ae81ff">64</span><span style="color: #f8f8f2">];</span> <span style="color: #66d9ef">uint8_t</span> <span style="color: #f8f8f2">password[</span><span style="color: #ae81ff">64</span><span style="color: #f8f8f2">];</span>
<span style="color: #66d9ef">uint8_t</span> <span style="color: #f8f8f2">bssid[</span><span style="color: #ae81ff">6</span><span style="color: #f8f8f2">];</span> <span style="color: #66d9ef">uint8_t</span> <span style="color: #f8f8f2">bssid[</span><span style="color: #ae81ff">6</span><span style="color: #f8f8f2">];</span>
<span style="color: #66d9ef">uint8_t</span> <span style="color: #f8f8f2">dhcp;</span> <span style="color: #7a7a7a">/**&lt; 0:DHCP, 1:Static IP */</span> <span style="color: #66d9ef">uint8_t</span> <span style="color: #f8f8f2">dhcp;</span> <span style="color: #75715e">/**&lt; 0:DHCP, 1:Static IP */</span>
<span style="color: #66d9ef">union</span> <span style="color: #f8f8f2">_config</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">union</span> <span style="color: #f8f8f2">_config</span> <span style="color: #f8f8f2">{</span>
<span style="color: #66d9ef">uint32_t</span> <span style="color: #f8f8f2">addr[</span><span style="color: #ae81ff">5</span><span style="color: #f8f8f2">];</span> <span style="color: #66d9ef">uint32_t</span> <span style="color: #f8f8f2">addr[</span><span style="color: #ae81ff">5</span><span style="color: #f8f8f2">];</span>
<span style="color: #66d9ef">struct</span> <span style="color: #f8f8f2">_sta</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">struct</span> <span style="color: #f8f8f2">_sta</span> <span style="color: #f8f8f2">{</span>

@ -999,7 +999,7 @@ You can shorten it and write as like:
</code></pre></div></p> </code></pre></div></p>
<h3 id="date-time"><i class="fa fa-exchange"></i> Date &amp; Time<a class="headerlink" href="#date-time" title="Permanent link">&para;</a></h3> <h3 id="date-time"><i class="fa fa-exchange"></i> Date &amp; Time<a class="headerlink" href="#date-time" title="Permanent link">&para;</a></h3>
<p>The easiest way is to use the <a href="https://www.pjrc.com/teensy/td_libs_Time.html">Arduino Time Library</a>. Sketches must accommodate differences in date and time formats depending on the time zone. You can absorb the difference in DateTime format by using <code>sscanf</code> function.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup></p> <p>The easiest way is to use the <a href="https://www.pjrc.com/teensy/td_libs_Time.html">Arduino Time Library</a>. Sketches must accommodate differences in date and time formats depending on the time zone. You can absorb the difference in DateTime format by using <code>sscanf</code> function.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup></p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;TimeLib.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;TimeLib.h&gt;</span>
<span style="color: #66d9ef">time_t</span> <span style="color: #f8f8f2">tm;</span> <span style="color: #66d9ef">time_t</span> <span style="color: #f8f8f2">tm;</span>
<span style="color: #66d9ef">int</span> <span style="color: #f8f8f2">Year,</span> <span style="color: #f8f8f2">Month,</span> <span style="color: #f8f8f2">Day,</span> <span style="color: #f8f8f2">Hour,</span> <span style="color: #f8f8f2">Minute,</span> <span style="color: #f8f8f2">Second;</span> <span style="color: #66d9ef">int</span> <span style="color: #f8f8f2">Year,</span> <span style="color: #f8f8f2">Month,</span> <span style="color: #f8f8f2">Day,</span> <span style="color: #f8f8f2">Hour,</span> <span style="color: #f8f8f2">Minute,</span> <span style="color: #f8f8f2">Second;</span>
@ -1026,9 +1026,9 @@ You can shorten it and write as like:
<p>To convert input data correctly from the string, it must match its format. The validation implementation with sketches depends on various perspectives. Usually, the tiny devices have no enough power for the lexical analysis completely. But you can reduce the burden for data verification using the <a href="achandling.html#check-data-against-on-submission"><strong>pattern</strong></a> of AutoConnectInput.</p> <p>To convert input data correctly from the string, it must match its format. The validation implementation with sketches depends on various perspectives. Usually, the tiny devices have no enough power for the lexical analysis completely. But you can reduce the burden for data verification using the <a href="achandling.html#check-data-against-on-submission"><strong>pattern</strong></a> of AutoConnectInput.</p>
<p>By giving a <a href="acelements.html#pattern">pattern</a> to <a href="apielements.html#pattern">AutoConnectInput</a>, you can find errors in data format while typing in custom Web pages. Specifying the input data rule as a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> will validate the type match during input. If there is an error in the format during input, the background color of the field will change to pink. Refer to section <a href="achandling.html#check-data-against-on-submission"><em>Handling the custom Web pages</em></a>.</p> <p>By giving a <a href="acelements.html#pattern">pattern</a> to <a href="apielements.html#pattern">AutoConnectInput</a>, you can find errors in data format while typing in custom Web pages. Specifying the input data rule as a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> will validate the type match during input. If there is an error in the format during input, the background color of the field will change to pink. Refer to section <a href="achandling.html#check-data-against-on-submission"><em>Handling the custom Web pages</em></a>.</p>
<p>However, input data will be transmitted even if the value does not match the pattern. Sketches require the validation of the received data. You can use the <a href="apielements.html#isvalid">AutoConnectInput::isValid</a> function to validate it. The isValid function validates whether the value member variable matches a pattern and returns true or false.</p> <p>However, input data will be transmitted even if the value does not match the pattern. Sketches require the validation of the received data. You can use the <a href="apielements.html#isvalid">AutoConnectInput::isValid</a> function to validate it. The isValid function validates whether the value member variable matches a pattern and returns true or false.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.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: #66d9ef">char</span> <span style="color: #f8f8f2">input_page[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;raw(</span> <span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">input_page[]</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">[</span>
@ -1108,7 +1108,7 @@ You can shorten it and write as like:
</code></pre></div> </code></pre></div>
<h3 id="email-address-2"><img src="images/regexp.png" align="top"> email address <sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup><a class="headerlink" href="#email-address-2" title="Permanent link">&para;</a></h3> <h3 id="email-address-2"><img src="images/regexp.png" align="top"> email address <sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup><a class="headerlink" href="#email-address-2" title="Permanent link">&para;</a></h3>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">^[a-zA-Z0-9.!</span><span style="color: #7a7a7a">#$%&amp;&#39;*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">^[a-zA-Z0-9.!</span><span style="color: #75715e">#$%&amp;&#39;*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$</span>
</code></pre></div> </code></pre></div>
<h3 id="ip-address_1"><img src="images/regexp.png" align="top"> IP Address<a class="headerlink" href="#ip-address_1" title="Permanent link">&para;</a></h3> <h3 id="ip-address_1"><img src="images/regexp.png" align="top"> IP Address<a class="headerlink" href="#ip-address_1" title="Permanent link">&para;</a></h3>

@ -1290,7 +1290,7 @@ For AutoConnect menus to work properly, call <a href="api.html#handlerequest"><e
<li> <li>
<p>Disable an AutoConnectUpdate feature if you don't need.</p> <p>Disable an AutoConnectUpdate feature if you don't need.</p>
<p>You can disable the AutoConnectUpdate feature by commenting out the <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h#L34"><strong>AUTOCONNECT_USE_UPDATE</strong></a> macro in the <a href="api.html#defined-macros"><code>AutoConnectDefs.h</code></a> header file. <p>You can disable the AutoConnectUpdate feature by commenting out the <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h#L34"><strong>AUTOCONNECT_USE_UPDATE</strong></a> macro in the <a href="api.html#defined-macros"><code>AutoConnectDefs.h</code></a> header file.
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_USE_UPDATE</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_USE_UPDATE</span>
</code></pre></div></p> </code></pre></div></p>
</li> </li>
<li> <li>
@ -1329,7 +1329,7 @@ You have the following two options to avoid this conflict:</p>
<h2 id="does-not-appear-esp8266ap-in-smartphone"><i class="fa fa-question-circle"></i> Does not appear esp8266ap in smartphone.<a class="headerlink" href="#does-not-appear-esp8266ap-in-smartphone" title="Permanent link">&para;</a></h2> <h2 id="does-not-appear-esp8266ap-in-smartphone"><i class="fa fa-question-circle"></i> Does not appear esp8266ap in smartphone.<a class="headerlink" href="#does-not-appear-esp8266ap-in-smartphone" title="Permanent link">&para;</a></h2>
<p>Maybe it is successfully connected at the <a href="lsbegin.html#autoconnectbegin-logic-sequence"><strong>first WiFi.begin</strong></a>. ESP8266 remembers the last SSID successfully connected and will use at the next. It means SoftAP will only start up when the first <em>WiFi.begin()</em> fails.</p> <p>Maybe it is successfully connected at the <a href="lsbegin.html#autoconnectbegin-logic-sequence"><strong>first WiFi.begin</strong></a>. ESP8266 remembers the last SSID successfully connected and will use at the next. It means SoftAP will only start up when the first <em>WiFi.begin()</em> fails.</p>
<p>The saved SSID would be cleared by <em>WiFi.disconnect()</em> with WIFI_STA mode. If you do not want automatic reconnection, you can erase the memorized SSID with the following simple sketch.</p> <p>The saved SSID would be cleared by <em>WiFi.disconnect()</em> with WIFI_STA mode. If you do not want automatic reconnection, you can erase the memorized SSID with the following simple sketch.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">delay(</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">delay(</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span>
@ -1390,7 +1390,7 @@ You have the following two options to avoid this conflict:</p>
<p>You can use the <a href="api.html#ondetect">AutoConnect::onDetect</a> exit routine. For more details and an implementation example of the onDetect exit routine, refer to the chapter "<a href="advancedusage.html#captive-portal-start-detection">Captive portal start detection</a>".</p> <p>You can use the <a href="api.html#ondetect">AutoConnect::onDetect</a> exit routine. For more details and an implementation example of the onDetect exit routine, refer to the chapter "<a href="advancedusage.html#captive-portal-start-detection">Captive portal start detection</a>".</p>
<h2 id="how-change-http-port"><i class="fa fa-question-circle"></i> How change HTTP port?<a class="headerlink" href="#how-change-http-port" title="Permanent link">&para;</a></h2> <h2 id="how-change-http-port"><i class="fa fa-question-circle"></i> How change HTTP port?<a class="headerlink" href="#how-change-http-port" title="Permanent link">&para;</a></h2>
<p>HTTP port number is defined as a macro in <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h#L123">AutoConnectDefs.h</a> header file. You can change it directly with several editors and must re-compile.</p> <p>HTTP port number is defined as a macro in <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h#L123">AutoConnectDefs.h</a> header file. You can change it directly with several editors and must re-compile.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_HTTPPORT 80</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_HTTPPORT 80</span>
</code></pre></div> </code></pre></div>
<h2 id="how-change-ssid-or-password-in-captive-portal"><i class="fa fa-question-circle"></i> How change SSID or Password in Captive portal?<a class="headerlink" href="#how-change-ssid-or-password-in-captive-portal" title="Permanent link">&para;</a></h2> <h2 id="how-change-ssid-or-password-in-captive-portal"><i class="fa fa-question-circle"></i> How change SSID or Password in Captive portal?<a class="headerlink" href="#how-change-ssid-or-password-in-captive-portal" title="Permanent link">&para;</a></h2>
@ -1399,7 +1399,7 @@ You have the following two options to avoid this conflict:</p>
<p>If you don't use ArduinoJson at all, you can detach it from the library. By detaching ArduinoJson, the binary size after compilation can be reduced. You can implement custom Web pages with your sketches without using ArduinoJson. Its method is described in <a href="wojson.html">Custom Web pages w/o JSON</a>.<br /> <p>If you don't use ArduinoJson at all, you can detach it from the library. By detaching ArduinoJson, the binary size after compilation can be reduced. You can implement custom Web pages with your sketches without using ArduinoJson. Its method is described in <a href="wojson.html">Custom Web pages w/o JSON</a>.<br />
To completely remove ArduinoJson at compile-time from the binary, you need to define a special <code>#define</code> directive for it. And if you define the directive, you will not be able to use the <a href="otaserver.html#updates-with-the-update-server">OTA update with the update server</a> feature as well as AutoConnectAux described by JSON.</p> To completely remove ArduinoJson at compile-time from the binary, you need to define a special <code>#define</code> directive for it. And if you define the directive, you will not be able to use the <a href="otaserver.html#updates-with-the-update-server">OTA update with the update server</a> feature as well as AutoConnectAux described by JSON.</p>
<p>To exclude ArduinoJson at compile-time, give the following <code>#define</code> directive as a compiler option such as the <a href="https://github.com/arduino/arduino-cli">arduino-cli</a> or <a href="https://platformio.org/">PlatformIO</a>.</p> <p>To exclude ArduinoJson at compile-time, give the following <code>#define</code> directive as a compiler option such as the <a href="https://github.com/arduino/arduino-cli">arduino-cli</a> or <a href="https://platformio.org/">PlatformIO</a>.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_NOUSE_JSON</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_NOUSE_JSON</span>
</code></pre></div> </code></pre></div>
<p>For example, add the following description to the <code>[env]</code> section of the <code>platformio.ini</code> file with the <code>build-flags</code>.</p> <p>For example, add the following description to the <code>[env]</code> section of the <code>platformio.ini</code> file with the <code>build-flags</code>.</p>
@ -1451,9 +1451,9 @@ Also, you can check the memory running out status by rebuilding the Sketch with
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">config;</span> <span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">config;</span>
<span style="color: #f8f8f2">config.channel</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">3</span><span style="color: #f8f8f2">;</span> <span style="color: #7a7a7a">// Specifies a channel number that matches the AP</span> <span style="color: #f8f8f2">config.channel</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">3</span><span style="color: #f8f8f2">;</span> <span style="color: #75715e">// Specifies a channel number that matches the AP</span>
<span style="color: #f8f8f2">portal.config(config);</span> <span style="color: #7a7a7a">// Apply channel configurration</span> <span style="color: #f8f8f2">portal.config(config);</span> <span style="color: #75715e">// Apply channel configurration</span>
<span style="color: #f8f8f2">portal.begin();</span> <span style="color: #7a7a7a">// Start the portal</span> <span style="color: #f8f8f2">portal.begin();</span> <span style="color: #75715e">// Start the portal</span>
</code></pre></div> </code></pre></div>
<div class="admonition info"> <div class="admonition info">
@ -1470,11 +1470,11 @@ Also, you can check the memory running out status by rebuilding the Sketch with
<h3 id="3-turn-on-the-debug-log-options">3. Turn on the debug log options<a class="headerlink" href="#3-turn-on-the-debug-log-options" title="Permanent link">&para;</a></h3> <h3 id="3-turn-on-the-debug-log-options">3. Turn on the debug log options<a class="headerlink" href="#3-turn-on-the-debug-log-options" title="Permanent link">&para;</a></h3>
<p>To fully enable for the AutoConnect debug logging options, change the following two files.</p> <p>To fully enable for the AutoConnect debug logging options, change the following two files.</p>
<p><i class="fas fa-angle-right"></i> AutoConnectDefs.h</p> <p><i class="fas fa-angle-right"></i> AutoConnectDefs.h</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AC_DEBUG</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AC_DEBUG</span>
</code></pre></div> </code></pre></div>
<p><i class="fas fa-angle-right"></i> PageBuilder.h <sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup></p> <p><i class="fas fa-angle-right"></i> PageBuilder.h <sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup></p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define PB_DEBUG</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define PB_DEBUG</span>
</code></pre></div> </code></pre></div>
<h3 id="4-reports-the-issue-to-autoconnect-github-repository">4. Reports the issue to AutoConnect Github repository<a class="headerlink" href="#4-reports-the-issue-to-autoconnect-github-repository" title="Permanent link">&para;</a></h3> <h3 id="4-reports-the-issue-to-autoconnect-github-repository">4. Reports the issue to AutoConnect Github repository<a class="headerlink" href="#4-reports-the-issue-to-autoconnect-github-repository" title="Permanent link">&para;</a></h3>

@ -881,11 +881,11 @@
<h2 id="lets-do-the-most-simple-sketch">Let's do the most simple sketch<a class="headerlink" href="#lets-do-the-most-simple-sketch" title="Permanent link">&para;</a></h2> <h2 id="lets-do-the-most-simple-sketch">Let's do the most simple sketch<a class="headerlink" href="#lets-do-the-most-simple-sketch" title="Permanent link">&para;</a></h2>
<p>Open the Arduino IDE, write the following sketch and upload it. The feature of this sketch is that the SSID and Password are not coded.</p> <p>Open the Arduino IDE, write the following sketch and upload it. The feature of this sketch is that the SSID and Password are not coded.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt; // Replace with WiFi.h for ESP32</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt; // Replace with WiFi.h for ESP32</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt; // Replace with WebServer.h for ESP32</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt; // Replace with WebServer.h for ESP32</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">Server;</span> <span style="color: #7a7a7a">// Replace with WebServer for ESP32</span> <span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">Server;</span> <span style="color: #75715e">// Replace with WebServer for ESP32</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">Portal</span><span style="color: #f8f8f2">(Server);</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">Portal</span><span style="color: #f8f8f2">(Server);</span>
<span style="color: #66d9ef">void</span> <span style="color: #a6e22e">rootPage</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span> <span style="color: #66d9ef">void</span> <span style="color: #a6e22e">rootPage</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>

@ -1054,9 +1054,9 @@
<p><img src="images/USERKey.png" width="70%"/></p> <p><img src="images/USERKey.png" width="70%"/></p>
<h3 id="the-sketch-publishes-messages">the Sketch, Publishes messages<a class="headerlink" href="#the-sketch-publishes-messages" title="Permanent link">&para;</a></h3> <h3 id="the-sketch-publishes-messages">the Sketch, Publishes messages<a class="headerlink" href="#the-sketch-publishes-messages" title="Permanent link">&para;</a></h3>
<p>The complete code of the Sketch is <a href="https://github.com/Hieromon/AutoConnect/blob/master/examples/mqttRSSI/mqttRSSI.ino">mqttRSSI.ino</a> in the <a href="https://github.com/Hieromon/AutoConnect">AutoConnect repository</a>. Replace the following #define in a sketch with <strong>User API Key</strong>, <strong>Write API Key</strong> and <strong>Channel ID</strong>. After Keys updated, compile the Sketch and upload it.</p> <p>The complete code of the Sketch is <a href="https://github.com/Hieromon/AutoConnect/blob/master/examples/mqttRSSI/mqttRSSI.ino">mqttRSSI.ino</a> in the <a href="https://github.com/Hieromon/AutoConnect">AutoConnect repository</a>. Replace the following #define in a sketch with <strong>User API Key</strong>, <strong>Write API Key</strong> and <strong>Channel ID</strong>. After Keys updated, compile the Sketch and upload it.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define MQTT_USER_KEY &quot;****************&quot; // Replace to User API Key.</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define MQTT_USER_KEY &quot;****************&quot; // Replace to User API Key.</span>
<span style="color: #7a7a7a">#define CHANNEL_ID &quot;******&quot; // Replace to Channel ID.</span> <span style="color: #75715e">#define CHANNEL_ID &quot;******&quot; // Replace to Channel ID.</span>
<span style="color: #7a7a7a">#define CHANNEL_API_KEY_WR &quot;****************&quot; // Replace to the write API Key.</span> <span style="color: #75715e">#define CHANNEL_API_KEY_WR &quot;****************&quot; // Replace to the write API Key.</span>
</code></pre></div> </code></pre></div>
<h3 id="publish-messages">Publish messages<a class="headerlink" href="#publish-messages" title="Permanent link">&para;</a></h3> <h3 id="publish-messages">Publish messages<a class="headerlink" href="#publish-messages" title="Permanent link">&para;</a></h3>

@ -1008,7 +1008,7 @@ Enter SSID and Passphrase and tap "<strong>Apply</strong>" to start a WiFi conne
</div> </div>
<h2 id="home"><i class="fa fa-bars"></i> HOME<a class="headerlink" href="#home" title="Permanent link">&para;</a></h2> <h2 id="home"><i class="fa fa-bars"></i> HOME<a class="headerlink" href="#home" title="Permanent link">&para;</a></h2>
<p>A <strong>HOME</strong> item at the bottom of the menu list is a link to the home path, and the default URI is <code>/</code> which is defined by <code>AUTOCONNECT_HOMEURI</code> in <strong>AutoConnectDefs.h</strong> header file.</p> <p>A <strong>HOME</strong> item at the bottom of the menu list is a link to the home path, and the default URI is <code>/</code> which is defined by <code>AUTOCONNECT_HOMEURI</code> in <strong>AutoConnectDefs.h</strong> header file.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_HOMEURI &quot;/&quot;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_HOMEURI &quot;/&quot;</span>
</code></pre></div> </code></pre></div>
<p>Also, 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 in the AutoConnect menu.</p> <p>Also, 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 in the AutoConnect menu.</p>

@ -922,32 +922,32 @@
</li> </li>
<li>Invokes <a href="api.html#handleclient">AutoConnect::handleClient</a> function in the <code>loop()</code>.</li> <li>Invokes <a href="api.html#handleclient">AutoConnect::handleClient</a> function in the <code>loop()</code>.</li>
</ol> </ol>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt; // Step #1</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt; // Step #1</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt; // Step #1</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt; // Step #1</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt; // Step #1</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt; // Step #1</span>
<span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">server;</span> <span style="color: #7a7a7a">// Step #2</span> <span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">server;</span> <span style="color: #75715e">// Step #2</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(server);</span> <span style="color: #7a7a7a">// Step #3</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(server);</span> <span style="color: #75715e">// Step #3</span>
<span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">config;</span> <span style="color: #7a7a7a">// Step #4</span> <span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">config;</span> <span style="color: #75715e">// Step #4</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">hello;</span> <span style="color: #7a7a7a">// Step #5</span> <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">hello;</span> <span style="color: #75715e">// Step #5</span>
<span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">HELLO_PAGE[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;(</span> <span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">HELLO_PAGE[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;(</span>
<span style="color: #e6db74">{ &quot;title&quot;: &quot;Hello world&quot;, &quot;uri&quot;: &quot;/&quot;, &quot;menu&quot;: true, &quot;element&quot;: [</span> <span style="color: #e6db74">{ &quot;title&quot;: &quot;Hello world&quot;, &quot;uri&quot;: &quot;/&quot;, &quot;menu&quot;: true, &quot;element&quot;: [</span>
<span style="color: #e6db74"> { &quot;name&quot;: &quot;caption&quot;, &quot;type&quot;: &quot;ACText&quot;, &quot;value&quot;: &quot;&lt;h2&gt;Hello, world&lt;/h2&gt;&quot;, &quot;style&quot;: &quot;text-align:center;color:#2f4f4f;padding:10px;&quot; },</span> <span style="color: #e6db74"> { &quot;name&quot;: &quot;caption&quot;, &quot;type&quot;: &quot;ACText&quot;, &quot;value&quot;: &quot;&lt;h2&gt;Hello, world&lt;/h2&gt;&quot;, &quot;style&quot;: &quot;text-align:center;color:#2f4f4f;padding:10px;&quot; },</span>
<span style="color: #e6db74"> { &quot;name&quot;: &quot;content&quot;, &quot;type&quot;: &quot;ACText&quot;, &quot;value&quot;: &quot;In this page, place the custom web page handled by the Sketch application.&quot; } ]</span> <span style="color: #e6db74"> { &quot;name&quot;: &quot;content&quot;, &quot;type&quot;: &quot;ACText&quot;, &quot;value&quot;: &quot;In this page, place the custom web page handled by the Sketch application.&quot; } ]</span>
<span style="color: #e6db74">}</span> <span style="color: #e6db74">}</span>
<span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #7a7a7a">// Step #5</span> <span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #75715e">// Step #5</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">config.ota</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">AC_OTA_BUILTIN;</span> <span style="color: #7a7a7a">// Step #6.a</span> <span style="color: #f8f8f2">config.ota</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">AC_OTA_BUILTIN;</span> <span style="color: #75715e">// Step #6.a</span>
<span style="color: #f8f8f2">portal.config(config);</span> <span style="color: #7a7a7a">// Step #6.a</span> <span style="color: #f8f8f2">portal.config(config);</span> <span style="color: #75715e">// Step #6.a</span>
<span style="color: #f8f8f2">hello.load(HELLO_PAGE);</span> <span style="color: #7a7a7a">// Step #6.b</span> <span style="color: #f8f8f2">hello.load(HELLO_PAGE);</span> <span style="color: #75715e">// Step #6.b</span>
<span style="color: #f8f8f2">portal.join({</span> <span style="color: #f8f8f2">hello</span> <span style="color: #f8f8f2">});</span> <span style="color: #7a7a7a">// Step #6.c</span> <span style="color: #f8f8f2">portal.join({</span> <span style="color: #f8f8f2">hello</span> <span style="color: #f8f8f2">});</span> <span style="color: #75715e">// Step #6.c</span>
<span style="color: #f8f8f2">portal.begin();</span> <span style="color: #7a7a7a">// Step #6.d</span> <span style="color: #f8f8f2">portal.begin();</span> <span style="color: #75715e">// Step #6.d</span>
<span style="color: #f8f8f2">}</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: #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: #7a7a7a">// Step #7</span> <span style="color: #f8f8f2">portal.handleClient();</span> <span style="color: #75715e">// Step #7</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
</code></pre></div> </code></pre></div>
@ -959,9 +959,9 @@ The AutoConnectOTA activates the ticker constantly regardless of the <a href="ap
</div> </div>
<h3 id="autoconnectota-allocation-uri"><i class="fa fa-wrench"></i> AutoConnectOTA allocation URI<a class="headerlink" href="#autoconnectota-allocation-uri" title="Permanent link">&para;</a></h3> <h3 id="autoconnectota-allocation-uri"><i class="fa fa-wrench"></i> AutoConnectOTA allocation URI<a class="headerlink" href="#autoconnectota-allocation-uri" title="Permanent link">&para;</a></h3>
<p>AutoConnectOTA has implemented using AutoConnectAUX. So it occupies two URIs by default. An update operation page is assigned to <strong>AUTOCONNECT_URI_UPDATE</strong> and the binary file uploader for the update is assigned to <strong>AUTOCONNECT_URI_UPDATE_ACT</strong>. These symbols are defined in the <code>AutoConnectDefs.h</code> header file as follows:</p> <p>AutoConnectOTA has implemented using AutoConnectAUX. So it occupies two URIs by default. An update operation page is assigned to <strong>AUTOCONNECT_URI_UPDATE</strong> and the binary file uploader for the update is assigned to <strong>AUTOCONNECT_URI_UPDATE_ACT</strong>. These symbols are defined in the <code>AutoConnectDefs.h</code> header file as follows:</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#define AUTOCONNECT_URI &quot;/_ac&quot;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_URI &quot;/_ac&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_URI_UPDATE AUTOCONNECT_URI &quot;/update&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_URI_UPDATE AUTOCONNECT_URI &quot;/update&quot;</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_URI_UPDATE_ACT AUTOCONNECT_URI &quot;/update_act&quot;</span> <span style="color: #75715e">#define AUTOCONNECT_URI_UPDATE_ACT AUTOCONNECT_URI &quot;/update_act&quot;</span>
</code></pre></div> </code></pre></div>
<p>Therefore, the normal Sketch that imports AutoConnectOTA while keeping the default, you cannot use the two URIs <code>/_ac/update</code> and <code>/_ac/update_act</code> for your specific. If you want to use the URIs for any purpose other than AutoConnectOTA, you need to override the <code>AutoConnectDefs.h</code> definition at compile time. It can be overwritten by giving the build flags for platformio.ini as follows with the PlatformIO environment for example.</p> <p>Therefore, the normal Sketch that imports AutoConnectOTA while keeping the default, you cannot use the two URIs <code>/_ac/update</code> and <code>/_ac/update_act</code> for your specific. If you want to use the URIs for any purpose other than AutoConnectOTA, you need to override the <code>AutoConnectDefs.h</code> definition at compile time. It can be overwritten by giving the build flags for platformio.ini as follows with the PlatformIO environment for example.</p>
@ -974,11 +974,11 @@ The AutoConnectOTA activates the ticker constantly regardless of the <a href="ap
<p>It will be born during <a href="api.html#handleclient">AutoConnect::handleClient</a> process. AutoConnect will evaluate the enabled state of <a href="apiconfig.html#ota">AutoConnectConfig::ota</a> each time the handleClient is executed, and if OTA is enabled then it creates an AutoConnectAux internally and assigns it to the update page. At this time, AutoConnectOTA is also instantiated together. The generated AUX page containing AutoConnectOTA is bound to AutoConnect inside the AutoConnect::handleClient process.</p> <p>It will be born during <a href="api.html#handleclient">AutoConnect::handleClient</a> process. AutoConnect will evaluate the enabled state of <a href="apiconfig.html#ota">AutoConnectConfig::ota</a> each time the handleClient is executed, and if OTA is enabled then it creates an AutoConnectAux internally and assigns it to the update page. At this time, AutoConnectOTA is also instantiated together. The generated AUX page containing AutoConnectOTA is bound to AutoConnect inside the AutoConnect::handleClient process.</p>
<p>If you want to attach AutoConnectOTA dynamically with an external trigger, you can sketch like this:<br /> <p>If you want to attach AutoConnectOTA dynamically with an external trigger, you can sketch like this:<br />
<em>This sketch imports the OTA update feature with an external switch assigned to the GPIO pin. While the trigger not occurs, AutoConnect OTA will not be imported into Sketch and will not appear on the menu list.</em></p> <em>This sketch imports the OTA update feature with an external switch assigned to the GPIO pin. While the trigger not occurs, AutoConnect OTA will not be imported into Sketch and will not appear on the menu list.</em></p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #7a7a7a">#define TRIGGER 4 // pin assigned to external trigger switch</span> <span style="color: #75715e">#define TRIGGER 4 // pin assigned to external trigger switch</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">config;</span> <span style="color: #f8f8f2">AutoConnectConfig</span> <span style="color: #f8f8f2">config;</span>
@ -1026,11 +1026,11 @@ To embed the ESP8266HTTPUpdateServer class with AutoConnect into your sketch, ba
</li> </li>
<li>Invokes <a href="api.html#handleclient">AutoConnect::handleClient</a> function in the <code>loop()</code>. </li> <li>Invokes <a href="api.html#handleclient">AutoConnect::handleClient</a> function in the <code>loop()</code>. </li>
</ol> </ol>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266HTTPUpdateServer.h&gt; // Step #1</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266HTTPUpdateServer.h&gt; // Step #1</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;WiFiClient.h&gt; // Step #1</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;WiFiClient.h&gt; // Step #1</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.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: #66d9ef">char</span> <span style="color: #f8f8f2">HELLO_PAGE[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;(</span> <span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">HELLO_PAGE[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;(</span>
<span style="color: #e6db74">{ &quot;title&quot;: &quot;Hello world&quot;, &quot;uri&quot;: &quot;/&quot;, &quot;menu&quot;: true, &quot;element&quot;: [</span> <span style="color: #e6db74">{ &quot;title&quot;: &quot;Hello world&quot;, &quot;uri&quot;: &quot;/&quot;, &quot;menu&quot;: true, &quot;element&quot;: [</span>
@ -1039,21 +1039,21 @@ To embed the ESP8266HTTPUpdateServer class with AutoConnect into your sketch, ba
<span style="color: #e6db74">}</span> <span style="color: #e6db74">}</span>
<span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span> <span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">httpServer;</span> <span style="color: #7a7a7a">// Step #2</span> <span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">httpServer;</span> <span style="color: #75715e">// Step #2</span>
<span style="color: #f8f8f2">ESP8266HTTPUpdateServer</span> <span style="color: #f8f8f2">httpUpdate;</span> <span style="color: #7a7a7a">// Step #3</span> <span style="color: #f8f8f2">ESP8266HTTPUpdateServer</span> <span style="color: #f8f8f2">httpUpdate;</span> <span style="color: #75715e">// Step #3</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(httpServer);</span> <span style="color: #7a7a7a">// Step #4</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">portal</span><span style="color: #f8f8f2">(httpServer);</span> <span style="color: #75715e">// Step #4</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">update</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;/update&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;UPDATE&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// Step #5, #6, #7</span> <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">update</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;/update&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;UPDATE&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Step #5, #6, #7</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">hello;</span> <span style="color: #7a7a7a">// Step #8</span> <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">hello;</span> <span style="color: #75715e">// Step #8</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">httpUpdate.setup(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">httpServer,</span> <span style="color: #e6db74">&quot;USERNAME&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;PASSWORD&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// Step #9.a</span> <span style="color: #f8f8f2">httpUpdate.setup(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">httpServer,</span> <span style="color: #e6db74">&quot;USERNAME&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;PASSWORD&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Step #9.a</span>
<span style="color: #f8f8f2">hello.load(HELLO_PAGE);</span> <span style="color: #7a7a7a">// Step #9.b</span> <span style="color: #f8f8f2">hello.load(HELLO_PAGE);</span> <span style="color: #75715e">// Step #9.b</span>
<span style="color: #f8f8f2">portal.join({</span> <span style="color: #f8f8f2">hello,</span> <span style="color: #f8f8f2">update</span> <span style="color: #f8f8f2">});</span> <span style="color: #7a7a7a">// Step #9.c</span> <span style="color: #f8f8f2">portal.join({</span> <span style="color: #f8f8f2">hello,</span> <span style="color: #f8f8f2">update</span> <span style="color: #f8f8f2">});</span> <span style="color: #75715e">// Step #9.c</span>
<span style="color: #f8f8f2">portal.begin();</span> <span style="color: #7a7a7a">// Step #9.d</span> <span style="color: #f8f8f2">portal.begin();</span> <span style="color: #75715e">// Step #9.d</span>
<span style="color: #f8f8f2">}</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: #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: #7a7a7a">// Step #10</span> <span style="color: #f8f8f2">portal.handleClient();</span> <span style="color: #75715e">// Step #10</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
</code></pre></div> </code></pre></div>

@ -951,22 +951,22 @@ The AutoConnect library provides an update server script implemented in Python t
<li>Attach the AutoConnectUpdate object to AutoConnect using <a href="apiupdate.html#attach">AutoConnectUpdate::attach</a> function.</li> <li>Attach the AutoConnectUpdate object to AutoConnect using <a href="apiupdate.html#attach">AutoConnectUpdate::attach</a> function.</li>
<li>Invokes <a href="api.html#handleclient">AutoConnect::handleClient</a> function in the <code>loop()</code>.</li> <li>Invokes <a href="api.html#handleclient">AutoConnect::handleClient</a> function in the <code>loop()</code>.</li>
</ol> </ol>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WiFi.h&gt;</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;ESP8266WebServer.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #7a7a7a">#include</span> <span style="color: #7a7a7a">&lt;AutoConnect.h&gt;</span> <span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">server;</span> <span style="color: #7a7a7a">// Step #1</span> <span style="color: #f8f8f2">ESP8266WebServer</span> <span style="color: #f8f8f2">server;</span> <span style="color: #75715e">// Step #1</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <span style="color: #7a7a7a">// Step #2</span> <span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span> <span style="color: #75715e">// Step #2</span>
<span style="color: #f8f8f2">AutoConnectUpdate</span> <span style="color: #a6e22e">update</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;192.168.0.100&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #ae81ff">8000</span><span style="color: #f8f8f2">);</span> <span style="color: #7a7a7a">// Step #3</span> <span style="color: #f8f8f2">AutoConnectUpdate</span> <span style="color: #a6e22e">update</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;192.168.0.100&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #ae81ff">8000</span><span style="color: #f8f8f2">);</span> <span style="color: #75715e">// Step #3</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(portal.begin())</span> <span style="color: #f8f8f2">{</span> <span style="color: #7a7a7a">// Step #4</span> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(portal.begin())</span> <span style="color: #f8f8f2">{</span> <span style="color: #75715e">// Step #4</span>
<span style="color: #f8f8f2">update.attach(portal);</span> <span style="color: #7a7a7a">// Step #5</span> <span style="color: #f8f8f2">update.attach(portal);</span> <span style="color: #75715e">// Step #5</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">}</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: #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: #7a7a7a">// Step #6</span> <span style="color: #f8f8f2">portal.handleClient();</span> <span style="color: #75715e">// Step #6</span>
<span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">}</span>
</code></pre></div> </code></pre></div>

File diff suppressed because one or more lines are too long

@ -1,123 +1,123 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url>
<loc>https://Hieromon.github.io/AutoConnect/index.html</loc> <loc>https://Hieromon.github.io/AutoConnect/index.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/gettingstarted.html</loc> <loc>https://Hieromon.github.io/AutoConnect/gettingstarted.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/menu.html</loc> <loc>https://Hieromon.github.io/AutoConnect/menu.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/basicusage.html</loc> <loc>https://Hieromon.github.io/AutoConnect/basicusage.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/advancedusage.html</loc> <loc>https://Hieromon.github.io/AutoConnect/advancedusage.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/acintro.html</loc> <loc>https://Hieromon.github.io/AutoConnect/acintro.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/acelements.html</loc> <loc>https://Hieromon.github.io/AutoConnect/acelements.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/acjson.html</loc> <loc>https://Hieromon.github.io/AutoConnect/acjson.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/achandling.html</loc> <loc>https://Hieromon.github.io/AutoConnect/achandling.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/otaupdate.html</loc> <loc>https://Hieromon.github.io/AutoConnect/otaupdate.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/otabrowser.html</loc> <loc>https://Hieromon.github.io/AutoConnect/otabrowser.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/otaserver.html</loc> <loc>https://Hieromon.github.io/AutoConnect/otaserver.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/api.html</loc> <loc>https://Hieromon.github.io/AutoConnect/api.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/apiaux.html</loc> <loc>https://Hieromon.github.io/AutoConnect/apiaux.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/apiconfig.html</loc> <loc>https://Hieromon.github.io/AutoConnect/apiconfig.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/apielements.html</loc> <loc>https://Hieromon.github.io/AutoConnect/apielements.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/apiupdate.html</loc> <loc>https://Hieromon.github.io/AutoConnect/apiupdate.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/apiextra.html</loc> <loc>https://Hieromon.github.io/AutoConnect/apiextra.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/howtoembed.html</loc> <loc>https://Hieromon.github.io/AutoConnect/howtoembed.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/datatips.html</loc> <loc>https://Hieromon.github.io/AutoConnect/datatips.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/menuize.html</loc> <loc>https://Hieromon.github.io/AutoConnect/menuize.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/wojson.html</loc> <loc>https://Hieromon.github.io/AutoConnect/wojson.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/lsbegin.html</loc> <loc>https://Hieromon.github.io/AutoConnect/lsbegin.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/credit.html</loc> <loc>https://Hieromon.github.io/AutoConnect/credit.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/acupload.html</loc> <loc>https://Hieromon.github.io/AutoConnect/acupload.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/colorized.html</loc> <loc>https://Hieromon.github.io/AutoConnect/colorized.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/changelabel.html</loc> <loc>https://Hieromon.github.io/AutoConnect/changelabel.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/faq.html</loc> <loc>https://Hieromon.github.io/AutoConnect/faq.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/changelog.html</loc> <loc>https://Hieromon.github.io/AutoConnect/changelog.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url><url> </url><url>
<loc>https://Hieromon.github.io/AutoConnect/license.html</loc> <loc>https://Hieromon.github.io/AutoConnect/license.html</loc>
<lastmod>2020-04-17</lastmod> <lastmod>2020-04-19</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
</url> </url>
</urlset> </urlset>

Binary file not shown.

@ -856,8 +856,8 @@
<li>Invoke <a href="api.html#begin">AutoConnect::begin()</a>.</li> <li>Invoke <a href="api.html#begin">AutoConnect::begin()</a>.</li>
</ol> </ol>
<p>In addition to the above procedure, to completely cut off for binding with the ArduinoJson library, turn off the ArduinoJson use indicator which is declared by the <a href="api.html#defined-macros">AutoConnect definitions</a>. Its declaration is in <strong>AutoConnectDefs.h</strong> file.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup></p> <p>In addition to the above procedure, to completely cut off for binding with the ArduinoJson library, turn off the ArduinoJson use indicator which is declared by the <a href="api.html#defined-macros">AutoConnect definitions</a>. Its declaration is in <strong>AutoConnectDefs.h</strong> file.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup></p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">// Comment out the AUTOCONNECT_USE_JSON macro to detach the ArduinoJson.</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">// Comment out the AUTOCONNECT_USE_JSON macro to detach the ArduinoJson.</span>
<span style="color: #7a7a7a">#define AUTOCONNECT_USE_JSON</span> <span style="color: #75715e">#define AUTOCONNECT_USE_JSON</span>
</code></pre></div> </code></pre></div>
<div class="admonition caution"> <div class="admonition caution">
@ -989,8 +989,8 @@
<span style="color: #f8f8f2">]</span> <span style="color: #f8f8f2">]</span>
</code></pre></div> </code></pre></div>
<span style="margin-right:6px;margin-top:2px;"><img align="middle" width="32" height="32" src="images/arrow_down.png"></span><i class="fa fa-code"></i> Exclude the JSON and replace to the AutoConnectElements natively</p> <span style="margin-right:6px;margin-top:2px;"><img align="middle" width="32" height="32" src="images/arrow_down.png"></span><i class="fa fa-code"></i> Exclude the JSON and replace to the AutoConnectElements natively</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #7a7a7a">// In the declaration,</span> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><span style="color: #75715e">// In the declaration,</span>
<span style="color: #7a7a7a">// Declare AutoConnectElements for the page asf /mqtt_setting</span> <span style="color: #75715e">// Declare AutoConnectElements for the page asf /mqtt_setting</span>
<span style="color: #f8f8f2">ACText(header,</span> <span style="color: #e6db74">&quot;&lt;h2&gt;MQTT broker settings&lt;/h2&gt;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text-align:center;color:#2f4f4f;padding:10px;&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">ACText(header,</span> <span style="color: #e6db74">&quot;&lt;h2&gt;MQTT broker settings&lt;/h2&gt;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text-align:center;color:#2f4f4f;padding:10px;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACText(caption,</span> <span style="color: #e6db74">&quot;Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;font-family:serif;color:#4682b4;&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">ACText(caption,</span> <span style="color: #e6db74">&quot;Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;font-family:serif;color:#4682b4;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACInput(mqttserver,</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;Server&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9</span><span style="color: #ae81ff">\\</span><span style="color: #e6db74">-]*[a-zA-Z0-9])</span><span style="color: #ae81ff">\\</span><span style="color: #e6db74">.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9</span><span style="color: #ae81ff">\\</span><span style="color: #e6db74">-]*[A-Za-z0-9])$&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;MQTT broker server&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">ACInput(mqttserver,</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;Server&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9</span><span style="color: #ae81ff">\\</span><span style="color: #e6db74">-]*[a-zA-Z0-9])</span><span style="color: #ae81ff">\\</span><span style="color: #e6db74">.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9</span><span style="color: #ae81ff">\\</span><span style="color: #e6db74">-]*[A-Za-z0-9])$&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;MQTT broker server&quot;</span><span style="color: #f8f8f2">);</span>
@ -1003,7 +1003,7 @@
<span style="color: #f8f8f2">ACSubmit(save,</span> <span style="color: #e6db74">&quot;Start&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;mqtt_save&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">ACSubmit(save,</span> <span style="color: #e6db74">&quot;Start&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;mqtt_save&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACSubmit(discard,</span> <span style="color: #e6db74">&quot;Discard&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;/&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">ACSubmit(discard,</span> <span style="color: #e6db74">&quot;Discard&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;/&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #7a7a7a">// Declare the custom Web page as /mqtt_setting and contains the AutoConnectElements</span> <span style="color: #75715e">// Declare the custom Web page as /mqtt_setting and contains the AutoConnectElements</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">mqtt_setting</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;/mqtt_setting&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;MQTT Setting&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">true,</span> <span style="color: #f8f8f2">{</span> <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">mqtt_setting</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;/mqtt_setting&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;MQTT Setting&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">true,</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">header,</span> <span style="color: #f8f8f2">header,</span>
<span style="color: #f8f8f2">caption,</span> <span style="color: #f8f8f2">caption,</span>
@ -1019,20 +1019,20 @@
<span style="color: #f8f8f2">discard</span> <span style="color: #f8f8f2">discard</span>
<span style="color: #f8f8f2">});</span> <span style="color: #f8f8f2">});</span>
<span style="color: #7a7a7a">// Declare AutoConnectElements for the page as /mqtt_save</span> <span style="color: #75715e">// Declare AutoConnectElements for the page as /mqtt_save</span>
<span style="color: #f8f8f2">ACText(caption2,</span> <span style="color: #e6db74">&quot;&lt;h4&gt;Parameters available as:&lt;/h4&gt;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text-align:center;color:#2f4f4f;padding:10px;&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">ACText(caption2,</span> <span style="color: #e6db74">&quot;&lt;h4&gt;Parameters available as:&lt;/h4&gt;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text-align:center;color:#2f4f4f;padding:10px;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACText(parameters);</span> <span style="color: #f8f8f2">ACText(parameters);</span>
<span style="color: #f8f8f2">ACSubmit(clear,</span> <span style="color: #e6db74">&quot;Clear channel&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;/mqtt_clear&quot;</span><span style="color: #f8f8f2">);</span> <span style="color: #f8f8f2">ACSubmit(clear,</span> <span style="color: #e6db74">&quot;Clear channel&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;/mqtt_clear&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #7a7a7a">// Declare the custom Web page as /mqtt_save and contains the AutoConnectElements</span> <span style="color: #75715e">// Declare the custom Web page as /mqtt_save and contains the AutoConnectElements</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">mqtt_save</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;/mqtt_save&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;MQTT Setting&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">false,</span> <span style="color: #f8f8f2">{</span> <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">mqtt_save</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;/mqtt_save&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;MQTT Setting&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">false,</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">caption2,</span> <span style="color: #f8f8f2">caption2,</span>
<span style="color: #f8f8f2">parameters,</span> <span style="color: #f8f8f2">parameters,</span>
<span style="color: #f8f8f2">clear</span> <span style="color: #f8f8f2">clear</span>
<span style="color: #f8f8f2">});</span> <span style="color: #f8f8f2">});</span>
<span style="color: #7a7a7a">// In the setup(),</span> <span style="color: #75715e">// In the setup(),</span>
<span style="color: #7a7a7a">// Join the custom Web pages and performs begin</span> <span style="color: #75715e">// Join the custom Web pages and performs begin</span>
<span style="color: #f8f8f2">portal.join({</span> <span style="color: #f8f8f2">mqtt_setting,</span> <span style="color: #f8f8f2">mqtt_save</span> <span style="color: #f8f8f2">});</span> <span style="color: #f8f8f2">portal.join({</span> <span style="color: #f8f8f2">mqtt_setting,</span> <span style="color: #f8f8f2">mqtt_save</span> <span style="color: #f8f8f2">});</span>
<span style="color: #f8f8f2">portal.begin();</span> <span style="color: #f8f8f2">portal.begin();</span>
</code></pre></div> </code></pre></div>

Loading…
Cancel
Save