Deployed the RC documentation

pull/41/head
Hieromon Ikasamo 5 years ago
parent fb15d69f42
commit d5975a272e
  1. 12
      docs/acelements.html
  2. 19
      docs/acintro.html
  3. 2
      docs/apiconfig.html
  4. 452
      docs/apielements.html
  5. 71
      docs/datatips.html
  6. 70
      docs/faq.html
  7. BIN
      docs/images/ac_auxmenu.png
  8. BIN
      docs/images/aux_menu.gif
  9. 4
      docs/index.html
  10. 2
      docs/search/search_index.json
  11. 42
      docs/sitemap.xml
  12. BIN
      docs/sitemap.xml.gz
  13. 2
      docs/wojson.html

@ -1659,20 +1659,20 @@ Only <i class="far fa-square"></i> will be displayed if a label is not specified
<h3 id="label_1"><i class="fa fa-caret-right"></i> label<a class="headerlink" href="#label_1" title="Permanent link">&para;</a></h3>
<p>A <code>label</code> is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML <code class="codehilite"><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">label</span><span style="color: #f8f8f2">&gt;</span></code> tag with an id attribute. The input box and the label are connected by the id attribute.</p>
<h3 id="pattern"><i class="fa fa-caret-right"></i> pattern<a class="headerlink" href="#pattern" title="Permanent link">&para;</a></h3>
<p>A <code>pattern</code> specifies a <a href="https://www.w3schools.com/js/js_regexp.asp">regular expression</a> that the AutoConnectInput element's value is checked against on form submission. If it is invalid, the background color will change, but it will be sent even if the data format does not match. </p>
<p>A <code>pattern</code> specifies a <a href="https://www.w3schools.com/js/js_regexp.asp">regular expression</a> that the AutoConnectInput element's value is checked against on form submission. If it is invalid, the background color will change, but it will be sent even if the data format does not match. To check whether the entered value matches the pattern, use the <a href="apielements.html#isvalid">isValid</a> function.</p>
<ul>
<li>The password that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter:<br><code>(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}</code></li>
<li>
<p>Email address as <em>characters@characters.domain</em>:<br><code>[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$</code></p>
<p>Email address as <em>characters@characters.domain</em>:<br><code>[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}</code></p>
</li>
<li>
<p>IP address</p>
<p>IP address:<br><code>(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])</code></p>
</li>
<li>
<p>Host name of the internet</p>
<p>Host name of the internet:<br><code>(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])</code></p>
</li>
<li>
<p>Date (MM-DD-YYYY)</p>
<p>Date (MM/DD/YYYY) as range 1900-2099:<br><code>(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d</code></p>
</li>
<li>
<p>Twitter account:<br><code>^@?(\w){1,15}$</code></p>
@ -1757,7 +1757,7 @@ Only <i class="far fa-square"></i> will be displayed if a label is not specified
<p>ACElement ( <em>name</em> <small>[</small> , <em>value</em> <small>]</small> )</p>
<p>ACButton ( <em>name</em> <small>[</small> , <em>value</em> <small>]</small> <small>[</small> , <em>action</em> <small>]</small> )</p>
<p>ACCheckbox ( <em>name</em> <small>[</small> , <em>value</em> <small>]</small> <small>[</small> , <em>label</em> <small>]</small> <small>[</small> , <strong>true</strong> | <strong>false</strong> <small>]</small> )</p>
<p>ACInput ( <em>name</em> <small>[</small> , <em>value</em> <small>]</small> <small>[</small> , <em>label</em> <small>]</small> <small>[</small> , <em>placeholder</em> <small>]</small> )</p>
<p>ACInput ( <em>name</em> <small>[</small> , <em>value</em> <small>]</small> <small>[</small> , <em>label</em> <small>]</small> <small>[</small> , <em>pattern</em> <small>]</small> <small>[</small> , <em>placeholder</em> <small>]</small> )</p>
<p>ACRadio ( <em>name</em> <small>[</small> , <em>values</em> <small>]</small> <small>[</small> , <em>label</em> <small>]</small> <small>[</small> , <strong>AC_Horizontal</strong> | <strong>AC_Vertical</strong> <small>]</small> <small>[</small> , <em>checked</em> <small>]</small> )</p>
<p>ACSelect ( <em>name</em> <small>[</small> , <em>options</em> <small>]</small> <small>[</small> , <em>label</em> <small>]</small> )</p>
<p>ACSubmit ( <em>name</em> <small>[</small> , <em>value</em> <small>]</small> <small>[</small> , <em>uri</em> <small>]</small> )</p>

@ -818,26 +818,25 @@
<h1>Custom Web pages with AutoConnect</h1>
<h2 id="what-it-is">What it is<a class="headerlink" href="#what-it-is" title="Permanent link">&para;</a></h2>
<p><span style="margin-left:20px;margin-bottom:10px;float:right;width:280px;height:497px;"><img data-gifffer="./images/aux_ov.gif" data-gifffer-width="280" data-gifffer-height="497" /></span>
<p><span style="margin-left:20px;margin-bottom:10px;float:right;width:280px;height:497px;border:1px solid lightgray;"><img data-gifffer="./images/aux_ov.gif" data-gifffer-width="278" data-gifffer-height="495" /></span>
AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages are displayed in the <a href="menu.html">AutoConnect menu</a> and can be used from there. It can also have input-output parameters and handle it with sketches. For example, you can program some sketches that publish messages by entering the URI or unique ID of the MQTT broker on a custom page. You do not need to code the processing to handle the web page, it retrieves the input parameters and passes to the MQTT broker connection API is only.</p>
<h2 id="how-it-works">How it works<a class="headerlink" href="#how-it-works" title="Permanent link">&para;</a></h2>
<p>Custom Web pages are dynamically created by AutoConnect. The Classes and APIs necessary for dynamic creation are provided. <a href="apiaux.html#autoconnectaux"><strong>AutoConnectAux</strong></a> is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages like the one on the right figure into AutoConnect. The elements that make up a custom web page are provided as an <a href="acelements.html"><strong>AutoConnectElement</strong></a> class. Furthermore, an input box, a check box, a submit button, etc. are implemented by classes derived from AutoConnectElement.
<p align="center"><img align="center" width="560px" src="./images/ac_objects.svg"></p>
AutoConnectAux is a container for AutoConnectElements. To make a custom Web page, create elements that make up the page and put it in the AutoConnectAux object. Joining its AutoConnectAux object to AutoConnect will integrate the custom Web page into the AutoConnect menu.</p>
<p><img src="./images/ac_declaration.svg"></p>
<p>The above figure shows a code sequence that declares AutoConnectElements and put in the AutoConnectAux container and integrates those into AutoConnect. It declares two text elements named &#39;<em>header</em>&#39;and &#39;<em>caption</em>&#39;, adds them to the AutoConnectAux object &#39;<em>aux</em>&#39;, binds to an AutoConnect object named &#39;<em>portal</em>&#39;. It's the basic procedure for configuring the custom Web page. Also, further explanation of AutoConnectElements is the <a href="acelements.html">documentation</a>.</p>
<p>The above figure shows a code sequence that declares AutoConnectElements and put in the AutoConnectAux container and integrates those into AutoConnect. It declares two text elements named <em>header</em> and <em>caption</em>, adds them to the AutoConnectAux object as <em>aux</em>, binds to an AutoConnect object named <em>portal</em>. This sequence is the basic procedure for creating custom Web pages with the sketch. Also, further explanation of AutoConnectElements is the <a href="acelements.html">documentation</a>.</p>
<h2 id="custom-web-pages-in-autoconnect-menu">Custom Web pages in AutoConnect menu<a class="headerlink" href="#custom-web-pages-in-autoconnect-menu" title="Permanent link">&para;</a></h2>
<ul class="horizontal-list">
<li><img style="margin:0 20px 0 -20px;float:left;width:300px;height:343px;" src="./images/ac_auxmenu.png">
Custom Web pages as AutoConnectAux are integrated into the <a href="menu.html">AutoConnect menu</a>. AutoConnectAux object contains member variables which are URI and the title. It also has an indicator to show on the AutoConnect menu. You give the title and URI of the custom web page to the AutoConnectAux object with Sketch. Then the title of the custom Web page would be displayed at the bottom of the AutoConnect menu as the left figure.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup> It is a hyperlink as URI you given to the custom Web page and taps it will display a page composed of AutoConnectElements. Also, a title will display in the upper left corner of the page, which includes a hyperlink to the AutoConnect statistics screen.</li>
<li><img style="margin:0 20px 0 -20px;float:left;width:300px;" src="./images/ac_auxmenu.png">
AutoConnect integrates custom Web page objects into menus as AutoConnectAux. The AutoConnectAux object contains URI and title as member variables and has an indicator to display in the AutoConnect menu.<br>You give the title and URI of the custom Web page to the AutoConnectAux object with Sketch. Then the title of the custom Web page would be displayed in the AutoConnect menu as the left figure.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup> It is a hyperlink to a custom Web page which will be displayed tapped it.</li>
</ul>
<h2 id="multiple-custom-web-pages">Multiple custom Web pages<a class="headerlink" href="#multiple-custom-web-pages" title="Permanent link">&para;</a></h2>
<p>You can create multiple custom Web pages and specify which pages you can invoke from the menu.<br>
In the sketch below, it shows the sequence of codes to integrate three custom Web pages into one and embed them into the menu.</p>
<p>You can create multiple custom Web pages and specify pages that can be called from the menu. The following sketch shows a code sequence for integrating three custom Web pages into one and embedding them in a menu.</p>
<p><img align="center" width="520px" src="./images/ac_auxjoin_multi.svg"></p>
<ul class="horizontal-list">
<li><p style="margin:0 20px 0 -20px"><span style="margin-left:20px;float:right;width:280px;height:497px;"><img data-gifffer="./images/aux_menu.gif" data-gifffer-width="280" data-gifffer-height="497" /></span>In the above code, the third parameter of &#39;<i>aux2</i>&#39; is <b>false</b>. The third parameter of the AutoConnectAux constructor is an indicator of whether it's shown to the AutoConnect menu. Right animation is the execution result of the above code. You will see that the custom Web page&#39;s menu is displayed only in the last two lines. The sketch of this animation is written to transition to &#39;<i>aux2</i>&#39; by the utility of the <a href="acelements.html#autoconnectsubmit"><b>AutoConnectSubmit</b></a> element owned by &#39;<i>aux1</i>&#39;.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup><br>An &#39;<i>aux2</i>&#39; page transitions only from the &#39;<i>aux1</i>&#39;. It is a page that saves the parameters you entered on the previous page as shown in mqttRSSI in the library example. It is to want to hide &#39;<i>aux2</i>&#39; from AutoConnect menu lines. The utility of the third parameter of the AutoConnectAux constructor is that.</p></li>
<li><p style="margin:0 20px 0 -20px"><span style="margin-left:20px;float:right;width:280px;height:497px;border:1px solid lightgrey;"><img data-gifffer="./images/aux_menu.gif" data-gifffer-width="278" data-gifffer-height="495" /></span>In the above code, the third parameter of <i>aux2</i> is <b>false</b>. The third parameter of the AutoConnectAux constructor is an indicator for whether it's shown to the AutoConnect menu. Right animation is an execution result of the above code. You will see that the menu applies only two items for three custom Web pages. The sketch of this animation is written to transition to <i>aux2</i> by the utility of the <a href="acelements.html#autoconnectsubmit"><b>AutoConnectSubmit</b></a> element owned by <i>aux1</i>.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup><br>The <i>aux2</i> page transitions only from the <i>aux1</i> page. As shown in mqttRSSI in the library example, its page replies the saving result for the parameters entered on the previous page. It can not be invoked directly from the menu and want to hide them with AutoConnect menu items. The utility of the third parameter of the AutoConnectAux constructor is that.</p></li>
</ul>
<h2 id="basic-steps-to-use-custom-web-pages">Basic steps to use custom Web pages<a class="headerlink" href="#basic-steps-to-use-custom-web-pages" title="Permanent link">&para;</a></h2>
@ -852,8 +851,8 @@ In the sketch below, it shows the sequence of codes to integrate three custom We
<li>Invoke <a href="api.html#begin">AutoConnect::begin()</a>.</li>
</ol>
<h2 id="write-the-custom-web-page-with-json">Write the custom Web page with JSON<a class="headerlink" href="#write-the-custom-web-page-with-json" title="Permanent link">&para;</a></h2>
<p>You can write the custom Web page in JSON without using sketch codes.<sup id="fnref:3"><a class="footnote-ref" href="#fn:3" rel="footnote">3</a></sup> It is possible to describe the entire page in JSON and can be described for each element also. The JSON description can be saved in SPIFFS or SD and read using AutoConnect's <a href="api.html#load"><strong>load</strong></a> function. If you take this approach, you can further reduce the steps of the above but this way consumes a lot of memory.
The following JSON code and sketch will execute the custom Web page as the example in the above figure. That is, the sketch of this code and footnote<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup> is equivalent.</p>
<p>You can write the custom Web page in JSON without using sketch codes.<sup id="fnref:3"><a class="footnote-ref" href="#fn:3" rel="footnote">3</a></sup> It is possible to describe the entire page in JSON and can be described for each element also. The JSON document can be saved in SPIFFS or SD and read using AutoConnect's <a href="api.html#load"><strong>load</strong></a> function. you can reduce the steps of the basic procedure with this approach, but this way consumes a lot of memory.
The following JSON code and sketch will execute the custom Web page as an example in the above figure. That is, the sketch of this code and footnote<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup> is equivalent.</p>
<p><strong>custom_page.json</strong>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">[</span>
<span style="color: #f8f8f2">{</span>
@ -930,7 +929,7 @@ The following JSON code and sketch will execute the custom Web page as the examp
<span style="color: #f8f8f2">}</span>
</pre></div></p>
<h2 id="passing-parameters-with-sketches-and-custom-web-pages">Passing parameters with sketches and custom Web pages<a class="headerlink" href="#passing-parameters-with-sketches-and-custom-web-pages" title="Permanent link">&para;</a></h2>
<p>A sketch can access variables of <a href="acelements.html">AutoConnectElements</a> in the custom Web page. The value entered into the AutoConnectElements on the page is stored to the <a href="acelements.html#form-and-autoconnectelements">member variables</a> of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the GET / POST request handler. If you assign a value to an element before a request to the page occurs, its value will appear as the initial value when the page is displayed. Details are explained in the <a href="achandling.html#parameter-handling">Parameter handling</a>.</p>
<p>A sketch can access variables of <a href="acelements.html">AutoConnectElements</a> on the custom Web page. The value entered into the AutoConnectElements is stored to the <a href="acelements.html#form-and-autoconnectelements">member variables</a> of the element by AutoConnect whenever GET / POST transmission occurs. Your sketches can get these values with the request handler which will be registered by <a href="api.html#on">AutoConnect::on</a> function. And if you assign a value to an element before a request to the page occurs, its value will appear as the initial value when the page is displayed. The details are explained in the <a href="achandling.html#custom-field-data-handling">Custom field data handling</a> section.</p>
<script>
window.onload = function() {
Gifffer();

@ -1167,7 +1167,7 @@
</dl></p>
<h3 id="autoreconnect"><i class="fa fa-caret-right"></i> autoReconnect<a class="headerlink" href="#autoreconnect" title="Permanent link">&para;</a></h3>
<p>Automatically will try to reconnect with the past established access point (BSSID) when the current configured SSID in ESP8266/ESP32 could not be connected. By enabling this option, <em>AutoConnect::begin()</em> function will attempt to reconnect to a known access point using credentials stored in the EEPROM, even if the connection failed by current SSID.<br />
If the connection fails, starts the captive portal in SoftAP + STA mode.<br />
If the connection fails, starts the captive portal in SoftAP+STA mode.<br />
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd>bool</dd>

@ -844,6 +844,13 @@
typeOf
</a>
</li>
<li class="md-nav__item">
<a href="#isvalid" title=" isValid" class="md-nav__link">
isValid
</a>
</li>
</ul>
@ -960,6 +967,13 @@
operator &#91;&nbsp;&#93;
</a>
</li>
<li class="md-nav__item">
<a href="#size" title=" size" class="md-nav__link">
size
</a>
</li>
<li class="md-nav__item">
@ -1058,15 +1072,15 @@
</li>
<li class="md-nav__item">
<a href="#size" title=" size" class="md-nav__link">
size
<a href="#operator_1" title=" operator &#91;&nbsp;&#93;" class="md-nav__link">
operator &#91;&nbsp;&#93;
</a>
</li>
<li class="md-nav__item">
<a href="#operator_1" title=" operator &#91;&nbsp;&#93;" class="md-nav__link">
operator &#91;&nbsp;&#93;
<a href="#size_1" title=" size" class="md-nav__link">
size
</a>
</li>
@ -1086,6 +1100,73 @@
AutoConnectSubmit
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#constructor_6" title=" Constructor" class="md-nav__link">
Constructor
</a>
</li>
<li class="md-nav__item">
<a href="#public-member-variables_6" title=" Public member variables" class="md-nav__link">
Public member variables
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#name_6" title=" name" class="md-nav__link">
name
</a>
</li>
<li class="md-nav__item">
<a href="#value_5" title=" value" class="md-nav__link">
value
</a>
</li>
<li class="md-nav__item">
<a href="#uri" title=" uri" class="md-nav__link">
uri
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#public-member-functions_6" title=" Public member functions" class="md-nav__link">
Public member functions
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#typeof_6" title=" typeOf" class="md-nav__link">
typeOf
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
@ -1093,6 +1174,73 @@
AutoConnectText
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#constructor_7" title=" Constructor" class="md-nav__link">
Constructor
</a>
</li>
<li class="md-nav__item">
<a href="#public-member-variables_7" title=" Public member variables" class="md-nav__link">
Public member variables
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#name_7" title=" name" class="md-nav__link">
name
</a>
</li>
<li class="md-nav__item">
<a href="#value_6" title=" value" class="md-nav__link">
value
</a>
</li>
<li class="md-nav__item">
<a href="#style" title=" style" class="md-nav__link">
style
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#public-member-functions_7" title=" Public member functions" class="md-nav__link">
Public member functions
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#typeof_7" title=" typeOf" class="md-nav__link">
typeOf
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
@ -1547,6 +1695,13 @@
typeOf
</a>
</li>
<li class="md-nav__item">
<a href="#isvalid" title=" isValid" class="md-nav__link">
isValid
</a>
</li>
</ul>
@ -1663,6 +1818,13 @@
operator &#91;&nbsp;&#93;
</a>
</li>
<li class="md-nav__item">
<a href="#size" title=" size" class="md-nav__link">
size
</a>
</li>
<li class="md-nav__item">
@ -1761,15 +1923,15 @@
</li>
<li class="md-nav__item">
<a href="#size" title=" size" class="md-nav__link">
size
<a href="#operator_1" title=" operator &#91;&nbsp;&#93;" class="md-nav__link">
operator &#91;&nbsp;&#93;
</a>
</li>
<li class="md-nav__item">
<a href="#operator_1" title=" operator &#91;&nbsp;&#93;" class="md-nav__link">
operator &#91;&nbsp;&#93;
<a href="#size_1" title=" size" class="md-nav__link">
size
</a>
</li>
@ -1789,6 +1951,73 @@
AutoConnectSubmit
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#constructor_6" title=" Constructor" class="md-nav__link">
Constructor
</a>
</li>
<li class="md-nav__item">
<a href="#public-member-variables_6" title=" Public member variables" class="md-nav__link">
Public member variables
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#name_6" title=" name" class="md-nav__link">
name
</a>
</li>
<li class="md-nav__item">
<a href="#value_5" title=" value" class="md-nav__link">
value
</a>
</li>
<li class="md-nav__item">
<a href="#uri" title=" uri" class="md-nav__link">
uri
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#public-member-functions_6" title=" Public member functions" class="md-nav__link">
Public member functions
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#typeof_6" title=" typeOf" class="md-nav__link">
typeOf
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
@ -1796,6 +2025,73 @@
AutoConnectText
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#constructor_7" title=" Constructor" class="md-nav__link">
Constructor
</a>
</li>
<li class="md-nav__item">
<a href="#public-member-variables_7" title=" Public member variables" class="md-nav__link">
Public member variables
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#name_7" title=" name" class="md-nav__link">
name
</a>
</li>
<li class="md-nav__item">
<a href="#value_6" title=" value" class="md-nav__link">
value
</a>
</li>
<li class="md-nav__item">
<a href="#style" title=" style" class="md-nav__link">
style
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#public-member-functions_7" title=" Public member functions" class="md-nav__link">
Public member functions
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#typeof_7" title=" typeOf" class="md-nav__link">
typeOf
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
@ -1983,6 +2279,15 @@ Returns type of AutoConnectElement.
<dt><strong>Return value</strong></dt>
<dd>AC_Input</dd>
</dl></p>
<h4 id="isvalid"><i class="fa fa-caret-right"></i> isValid<a class="headerlink" href="#isvalid" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">isValid(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</pre></div>
Evaluate the pattern as a regexp and return whether value matches. Always return true if the pattern is undefined.
<dl class="apidl">
<dt><strong>Return value</strong></dt>
<dd><span class="apidef">true</span><span class="apidesc">The value matches a pattern.</span></dd>
<dd><span class="apidef">false</span><span class="apidesc">The value does not match a pattern.</span></dd>
</dl></p>
<h2 id="autoconnectradio">AutoConnectRadio<a class="headerlink" href="#autoconnectradio" title="Permanent link">&para;</a></h2>
<h3 id="constructor_4"><i class="fa fa-code"></i> Constructor<a class="headerlink" href="#constructor_4" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectRadio(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">name</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">vector</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">String</span><span style="color: #f92672">&gt;</span> <span style="color: #66d9ef">const</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">values</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">{},</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">label</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">ACArrange_t</span> <span style="color: #f8f8f2">order</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">AC_Vertical,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">uint8_t</span> <span style="color: #f8f8f2">checked</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">)</span>
@ -2059,18 +2364,28 @@ Indicates the check of the specified option for the radio buttons. You can use t
<h4 id="empty"><i class="fa fa-caret-right"></i> empty<a class="headerlink" href="#empty" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">empty(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">reserve</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">)</span>
</pre></div>
Clear the array of option strings that AutoConnectRadio has in values. When a <strong><em>reserve</em></strong> parameter is specified, a vector container of that size is reserved.
Clear the array of option strings that AutoConnectRadio has in the values. When a <strong><em>reserve</em></strong> parameter is specified, a vector container of that size is reserved.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">reserve</span><span class="apidesc">Reserved size of a container for option strings.</span></dd>
<dd><span class="apidef">reserve</span><span class="apidesc">Reserved size of a container for the radio button option strings.</span></dd>
</dl></p>
<h4 id="operator"><i class="fa fa-caret-right"></i> operator &#91;&nbsp;&#93;<a class="headerlink" href="#operator" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #66d9ef">operator</span><span style="color: #f8f8f2">[]</span> <span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">n)</span>
</pre></div>
Returns the option string of the index specified by <strong><em>n</em></strong>.
Returns a value string of the index specified by <strong><em>n</em></strong>.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">n</span><span class="apidesc">Index of values array to return.</span></dd>
<dd><span class="apidef">n</span><span class="apidesc">Index of values array to return. Its base number is 0.</span></dd>
<dt><strong>Return value</strong></dt>
<dd>A reference of a value string indexed by the specified the <strong>n</strong>.</dd>
</dl></p>
<h4 id="size"><i class="fa fa-caret-right"></i> size<a class="headerlink" href="#size" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">size(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</pre></div>
Returns number of options which contained.
<dl class="apidl">
<dt><strong>Return value</strong></dt>
<dd>Number of options which contained.</dd>
</dl></p>
<h4 id="value_4"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value_4" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span> <span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">value(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span> <span style="color: #66d9ef">const</span>
@ -2119,23 +2434,116 @@ Returns type of AutoConnectElement.
<dd>AC_Select</dd>
</dl></p>
<h4 id="add_1"><i class="fa fa-caret-right"></i> add<a class="headerlink" href="#add_1" title="Permanent link">&para;</a></h4>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">add(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">option)</span>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">add(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">option)</span>
</pre></div>
Adds a selectable option string for the selection list.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">option</span><span class="apidesc">A string of selectable item to be contained in the select element.</span></dd>
</dl></p>
<h4 id="empty_1"><i class="fa fa-caret-right"></i> empty<a class="headerlink" href="#empty_1" title="Permanent link">&para;</a></h4>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">empty(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">reserve</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">)</span>
</pre></div>
<h4 id="size"><i class="fa fa-caret-right"></i> size<a class="headerlink" href="#size" title="Permanent link">&para;</a></h4>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">size(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">void</span> <span style="color: #f8f8f2">empty(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">reserve</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">)</span>
</pre></div>
Clear the array of options list that AutoConnectSelect has in the options. When a <strong><em>reserve</em></strong> parameter is specified, a vector container of that size is reserved.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">reserve</span><span class="apidesc">Reserved size of a container for the options.</span></dd>
</dl></p>
<h4 id="operator_1"><i class="fa fa-caret-right"></i> operator &#91;&nbsp;&#93;<a class="headerlink" href="#operator_1" title="Permanent link">&para;</a></h4>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #66d9ef">operator</span><span style="color: #f8f8f2">[]</span> <span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">n)</span>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #66d9ef">operator</span><span style="color: #f8f8f2">[]</span> <span style="color: #f8f8f2">(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">std</span><span style="color: #f92672">::</span><span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">n)</span>
</pre></div>
Returns an option string of the index specified by <strong><em>n</em></strong>.
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">n</span><span class="apidesc">Index of options array to return. Its base number is 0.</span></dd>
<dt><strong>Return value</strong></dt>
<dd>A reference of a option string indexed by the specified the <strong>n</strong>.</dd>
<dd>
</dl></p>
<h4 id="size_1"><i class="fa fa-caret-right"></i> size<a class="headerlink" href="#size_1" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #66d9ef">size_t</span> <span style="color: #f8f8f2">size(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</pre></div>
Returns number of options which contained.
<dl class="apidl">
<dt><strong>Return value</strong></dt>
<dd>Number of options which contained.</dd>
</dl></p>
<h2 id="autoconnectsubmit">AutoConnectSubmit<a class="headerlink" href="#autoconnectsubmit" title="Permanent link">&para;</a></h2>
<h3 id="constructor_6"><i class="fa fa-code"></i> Constructor<a class="headerlink" href="#constructor_6" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectSubmit(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">name</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">value</span> <span style="color: #f92672">=</span><span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">uri</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">)</span>
</pre></div>
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">value</span><span class="apidesc">The name of the submit button as an HTML <code class="codehilite"><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">input</span> <span style="color: #a6e22e">type</span><span style="color: #f92672">=</span><span style="color: #e6db74">&quot;button&quot;</span><span style="color: #f8f8f2">&gt;</span></code> tag, it will also be the label of the button.</span></dd>
<dd><span class="apidef">uri</span><span class="apidesc">Destination URI.</span></dd>
</dl></p>
<h3 id="public-member-variables_6"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables_6" title="Permanent link">&para;</a></h3>
<h4 id="name_6"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name_6" title="Permanent link">&para;</a></h4>
<p>The element name.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="value_5"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value_5" title="Permanent link">&para;</a></h4>
<p>The name of the submit button. It will also be the label of the button.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="uri"><i class="fa fa-caret-right"></i> uri<a class="headerlink" href="#uri" title="Permanent link">&para;</a></h4>
<p>Destination URI.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h3 id="public-member-functions_6"><i class="fa fa-code"></i> Public member functions<a class="headerlink" href="#public-member-functions_6" title="Permanent link">&para;</a></h3>
<h4 id="typeof_6"><i class="fa fa-caret-right"></i> typeOf<a class="headerlink" href="#typeof_6" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">ACElement_t</span> <span style="color: #f8f8f2">typeOf(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</pre></div>
Returns type of AutoConnectElement.
<dl class="apidl">
<dt><strong>Return value</strong></dt>
<dd>AC_Submit</dd>
</dl></p>
<h2 id="autoconnecttext">AutoConnectText<a class="headerlink" href="#autoconnecttext" title="Permanent link">&para;</a></h2>
<h3 id="constructor_7"><i class="fa fa-code"></i> Constructor<a class="headerlink" href="#constructor_7" title="Permanent link">&para;</a></h3>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectText(</span><span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">name</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">value</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</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">style</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">)</span>
</pre></div>
<dl class="apidl">
<dt><strong>Parameters</strong></dt>
<dd><span class="apidef">name</span><span class="apidesc">The element name.</span></dd>
<dd><span class="apidef">value</span><span class="apidesc">String of content for the text element.</span></dd>
<dd><span class="apidef">style</span><span class="apidesc">A style code with CSS format that qualifiers the text.</span></dd>
</dl></p>
<h3 id="public-member-variables_7"><i class="fa fa-code"></i> Public member variables<a class="headerlink" href="#public-member-variables_7" title="Permanent link">&para;</a></h3>
<h4 id="name_7"><i class="fa fa-caret-right"></i> name<a class="headerlink" href="#name_7" title="Permanent link">&para;</a></h4>
<p>The element name.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="value_6"><i class="fa fa-caret-right"></i> value<a class="headerlink" href="#value_6" title="Permanent link">&para;</a></h4>
<p>A content string of the text element.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h4 id="style"><i class="fa fa-caret-right"></i> style<a class="headerlink" href="#style" title="Permanent link">&para;</a></h4>
<p>A style code with CSS format that qualifiers the text.
<dl class="apidl">
<dt><strong>Type</strong></dt>
<dd><span class="apidef">String</span><span class="apidesc"></span></dd>
</dl></p>
<h3 id="public-member-functions_7"><i class="fa fa-code"></i> Public member functions<a class="headerlink" href="#public-member-functions_7" title="Permanent link">&para;</a></h3>
<h4 id="typeof_7"><i class="fa fa-caret-right"></i> typeOf<a class="headerlink" href="#typeof_7" title="Permanent link">&para;</a></h4>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">ACElement_t</span> <span style="color: #f8f8f2">typeOf(</span><span style="color: #66d9ef">void</span><span style="color: #f8f8f2">)</span>
</pre></div>
Returns type of AutoConnectElement.
<dl class="apidl">
<dt><strong>Return value</strong></dt>
<dd>AC_Text</dd>
</dl></p>
<div class="footnote">
<hr />
<ol>

@ -940,7 +940,76 @@
<h2 id="validation-for-the-value">Validation for the value<a class="headerlink" href="#validation-for-the-value" title="Permanent link">&para;</a></h2>
<p>In order for data to be correctly converted from a string, the input data must be consistent with the format. How to implement strict validation in sketches depends on various perspectives and the power of tiny devices is not enough to implement a complete lexical analysis. But you can reduce the burden for data verification using the <strong>pattern</strong> of AutoConnectInput.</p>
<p>By giving a <a href="achandling.html#check-data-against-on-submission"><strong>pattern</strong></a> to <a href="apielements.html#pattern">AutoConnectInput</a>, you can find errors in data styles while typing in custom Web pages. The pattern is specified by <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions"><strong>regular expression</strong></a>. If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. Refer to <a href="achandling.html#check-data-against-on-submission">Handling the custom Web pages</a> section.</p>
<p>By giving a <a href="achandling.html#check-data-against-on-submission"><strong>pattern</strong></a> to <a href="apielements.html#pattern">AutoConnectInput</a>, you can find errors in data format while typing in custom Web pages. The pattern is specified by <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions"><strong>regular expression</strong></a>. If the value during input of AutoConnectInput does not match the regular expression specified by the pattern, its background color changes to pink. Refer to <a href="achandling.html#check-data-against-on-submission">Handling the custom Web pages</a> section.</p>
<p>However, input data will be transmitted even if the value does not match the pattern. To check the value with the sketch, using the <a href="apielements.html#isvalid"><strong>AutoConnectInput::isValid</strong></a> function. 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><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WiFi.h&gt;</span>
<span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;ESP8266WebServer.h&gt;</span>
<span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
<span style="color: #66d9ef">static</span> <span style="color: #66d9ef">const</span> <span style="color: #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>
<span style="color: #e6db74"> &quot;title&quot;: &quot;IP Address&quot;,</span>
<span style="color: #e6db74"> &quot;uri&quot;: &quot;/&quot;,</span>
<span style="color: #e6db74"> &quot;menu&quot;: true,</span>
<span style="color: #e6db74"> &quot;element&quot;: [</span>
<span style="color: #e6db74"> {</span>
<span style="color: #e6db74"> &quot;name&quot;: &quot;ipaddress&quot;,</span>
<span style="color: #e6db74"> &quot;type&quot;: &quot;ACInput&quot;,</span>
<span style="color: #e6db74"> &quot;label&quot;: &quot;IP Address&quot;,</span>
<span style="background-color: #49483e"><span style="color: #e6db74"> &quot;pattern&quot;: &quot;^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$&quot;</span>
</span><span style="color: #e6db74"> },</span>
<span style="color: #e6db74"> {</span>
<span style="color: #e6db74"> &quot;name&quot;: &quot;send&quot;,</span>
<span style="color: #e6db74"> &quot;type&quot;: &quot;ACSubmit&quot;,</span>
<span style="color: #e6db74"> &quot;value&quot;: &quot;SEND&quot;,</span>
<span style="color: #e6db74"> &quot;uri&quot;: &quot;/check&quot;</span>
<span style="color: #e6db74"> }</span>
<span style="color: #e6db74"> ]</span>
<span style="color: #e6db74"> },</span>
<span style="color: #e6db74"> {</span>
<span style="color: #e6db74"> &quot;title&quot;: &quot;IP Address&quot;,</span>
<span style="color: #e6db74"> &quot;uri&quot;: &quot;/check&quot;,</span>
<span style="color: #e6db74"> &quot;menu&quot;: false,</span>
<span style="color: #e6db74"> &quot;element&quot;: [</span>
<span style="color: #e6db74"> {</span>
<span style="color: #e6db74"> &quot;name&quot;: &quot;result&quot;,</span>
<span style="color: #e6db74"> &quot;type&quot;: &quot;ACText&quot;</span>
<span style="color: #e6db74"> }</span>
<span style="color: #e6db74"> ]</span>
<span style="color: #e6db74"> }</span>
<span style="color: #e6db74">]</span>
<span style="color: #e6db74">)raw&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">portal;</span>
<span style="color: #f8f8f2">String</span> <span style="color: #a6e22e">checkIPAddress</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">AutoConnectAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">input_page</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.aux(</span><span style="color: #e6db74">&quot;/&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">ipaddress</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">input_page</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;ipaddress&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">AutoConnectText</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">result</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;result&quot;</span><span style="color: #f8f8f2">);</span>
<span style="background-color: #49483e"> <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(ipaddress.isValid())</span> <span style="color: #f8f8f2">{</span>
</span> <span style="color: #f8f8f2">result.value</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;IP Address &quot;</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">ipaddress.value</span> <span style="color: #f92672">+</span> <span style="color: #e6db74">&quot; is OK.&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">result.style</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;&quot;</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: #f8f8f2">result.value</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;IP Address &quot;</span> <span style="color: #f92672">+</span> <span style="color: #f8f8f2">ipaddress.value</span> <span style="color: #f92672">+</span> <span style="color: #e6db74">&quot; error.&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">result.style</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;color:red;&quot;</span><span style="color: #f8f8f2">;</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: #66d9ef">void</span> <span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">portal.load(input_page);</span>
<span style="color: #f8f8f2">portal.on(</span><span style="color: #e6db74">&quot;/check&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">checkIPAddress);</span>
<span style="color: #f8f8f2">portal.begin();</span>
<span style="color: #f8f8f2">}</span>
<span style="color: #66d9ef">void</span> <span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">{</span>
<span style="color: #f8f8f2">portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</pre></div>
<div class="admonition caution">
<p class="admonition-title">Regular Expressions for JavaScript</p>
<p>Regular expressions specified in the AutoConnectInput pattern conforms to the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript specification</a>.</p>

@ -701,29 +701,29 @@
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#include-header" title="Include header" class="md-nav__link">
Include header
<a href="#include-header" title=" Include header" class="md-nav__link">
Include header
</a>
</li>
<li class="md-nav__item">
<a href="#constructor" title="Constructor" class="md-nav__link">
Constructor
<a href="#constructor" title=" Constructor" class="md-nav__link">
Constructor
</a>
</li>
<li class="md-nav__item">
<a href="#public-member-functions" title="Public member functions" class="md-nav__link">
Public member functions
<a href="#public-member-functions" title=" Public member functions" class="md-nav__link">
Public member functions
</a>
</li>
<li class="md-nav__item">
<a href="#data-structures" title="Data structures" class="md-nav__link">
Data structures
<a href="#data-structures" title=" Data structures" class="md-nav__link">
Data structures
</a>
</li>
@ -953,29 +953,29 @@
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#include-header" title="Include header" class="md-nav__link">
Include header
<a href="#include-header" title=" Include header" class="md-nav__link">
Include header
</a>
</li>
<li class="md-nav__item">
<a href="#constructor" title="Constructor" class="md-nav__link">
Constructor
<a href="#constructor" title=" Constructor" class="md-nav__link">
Constructor
</a>
</li>
<li class="md-nav__item">
<a href="#public-member-functions" title="Public member functions" class="md-nav__link">
Public member functions
<a href="#public-member-functions" title=" Public member functions" class="md-nav__link">
Public member functions
</a>
</li>
<li class="md-nav__item">
<a href="#data-structures" title="Data structures" class="md-nav__link">
Data structures
<a href="#data-structures" title=" Data structures" class="md-nav__link">
Data structures
</a>
</li>
@ -1189,11 +1189,11 @@ wdt reset
<h2 id="how-erase-the-credentials-saved-in-eeprom"><i class="fa fa-question-circle"></i> How erase the credentials saved in EEPROM?<a class="headerlink" href="#how-erase-the-credentials-saved-in-eeprom" title="Permanent link">&para;</a></h2>
<p>Make some sketches for erasing the EEPROM area, or some erasing utility is needed. You can prepare the sketch to erase the saved credential with <em>AutoConnectCredential</em>. The <em>AutoConnectCrendential</em> class provides the access method to the saved credential in EEPROM and library source file is including it.</p>
<p>A class description of AutoConnectCredential is follows.</p>
<h3 id="include-header">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><span style="color: #75715e">#include</span> <span style="color: #75715e">&lt;AutoConnectCredential.h&gt;</span>
</pre></div>
<h3 id="constructor">Constructor<a class="headerlink" href="#constructor" title="Permanent link">&para;</a></h3>
<h3 id="constructor"><i class="fa fa-code"></i> Constructor<a class="headerlink" href="#constructor" title="Permanent link">&para;</a></h3>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnectCredential();</span>
</pre></div>
@ -1202,7 +1202,7 @@ wdt reset
</pre></div>
<p>Specify offset from the top of the EEPROM for the credential storage area together. The offset value is from 0 to the flash sector size.</p>
<h3 id="public-member-functions">Public member functions<a class="headerlink" href="#public-member-functions" title="Permanent link">&para;</a></h3>
<h3 id="public-member-functions"><i class="fa fa-code"></i> Public member functions<a class="headerlink" href="#public-member-functions" title="Permanent link">&para;</a></h3>
<ul>
<li>
<p>uint8_t <strong>entries()</strong><br />
@ -1225,7 +1225,7 @@ wdt reset
Delete a credential entry specified <em>ssid</em>. Returns the true as successfully deleted.</p>
</li>
</ul>
<h3 id="data-structures">Data structures<a class="headerlink" href="#data-structures" title="Permanent link">&para;</a></h3>
<h3 id="data-structures"><i class="fa fa-code"></i> Data structures<a class="headerlink" href="#data-structures" title="Permanent link">&para;</a></h3>
<ul>
<li>station_config<br />
A structure is included in the ESP8266 SDK. You can use it in the sketch like as follows.</li>
@ -1319,7 +1319,7 @@ wdt reset
<h2 id="autoconnect-behaves-not-stable-with-my-sketch-yet"><i class="fa fa-question-circle"></i> AutoConnect behaves not stable with my sketch yet.<a class="headerlink" href="#autoconnect-behaves-not-stable-with-my-sketch-yet" title="Permanent link">&para;</a></h2>
<p>If AutoConnect behavior is not stable with your sketch, you can try the following measures.</p>
<h3 id="1-change-wifi-channel">1. Change WiFi channel<a class="headerlink" href="#1-change-wifi-channel" title="Permanent link">&para;</a></h3>
<p>Both ESP8266 and ESP32 can only work on one channel at any given moment, this will cause loss of connection on the channel where your station operates the captive portal. If the channel of the AP which you want to connect is different from the SoftAP channel, the operation of the captive portal will not respond with the screen of the AutoConnect connection attempt remains displayed. In such a case please try the <a href="apiconfig.html#autoconnectconfig">AutoConnectConfig</a> to match the <a href="apiconfig.html#channel">channel</a> to the access point.</p>
<p>Both ESP8266 and ESP32 can only work on one channel at any given moment. This will cause your station to lose connectivity on the channel hosting the captive portal. If the channel of the AP which you want to connect is different from the SoftAP channel, the operation of the captive portal will not respond with the screen of the AutoConnect connection attempt remains displayed. In such a case, please try the <a href="apiconfig.html#autoconnectconfig">AutoConnectConfig</a> to match the <a href="apiconfig.html#channel">channel</a> to the access point.</p>
<h3 id="2-change-arduino-core-version">2. Change arduino core version<a class="headerlink" href="#2-change-arduino-core-version" title="Permanent link">&para;</a></h3>
<p>I recommend change installed an arduino core version to the upstream when your sketch is not stable with AutoConnect on each board.</p>
<h4 id="with-esp8266-arduino-core">with ESP8266 arduino core<a class="headerlink" href="#with-esp8266-arduino-core" title="Permanent link">&para;</a></h4>
@ -1329,29 +1329,25 @@ wdt reset
<p>The <a href="https://github.com/espressif/arduino-esp32">arduino-esp32</a> is still under development even if it is a stable release. It is necessary to judge whether the cause of the problem is the core or AutoConnect. Trace the log with the esp32 core and the AutoConnect debug option enabled for problem diagnosis and please you check the <a href="https://github.com/espressif/arduino-esp32/issues">issue of arduino-esp32</a>. The problem that your sketch possesses may already have been solved.</p>
<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>
<ul>
<li>AutoConnectDefs.h</li>
</ul>
<p><i class="fas fa-angle-right"></i> AutoConnectDefs.h</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #75715e">#define AC_DEBUG</span>
</pre></div>
<ul>
<li>PageBuilder.h <sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup></li>
</ul>
<p><i class="fas fa-angle-right"></i> PageBuilder.h <sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup></p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #75715e">#define PB_DEBUG</span>
</pre></div>
<h3 id="4-reports-the-issue-to-autoconnect-repository-on-github">4. Reports the issue to AutoConnect repository on Github<a class="headerlink" href="#4-reports-the-issue-to-autoconnect-repository-on-github" title="Permanent link">&para;</a></h3>
<p>If you can not solve AutoConnect problems please report to <a href="https://github.com/Hieromon/AutoConnect/issues">Issues</a>. And please make your question comprehensively, not a statement. Include all relevant information as follows.</p>
<ul>
<li>Hardware module</li>
<li>Arduino core Version (including the upstream tag ID.)</li>
<li>Operating System which you use</li>
<li>lwIP variant</li>
<li>Problem description</li>
<li>If you have a STACK DUMP decoded result with formatted by the code block tag</li>
<li>The sketch code with formatted by the code block tag</li>
<li>Debug messages output</li>
<p>If you can not solve AutoConnect problems please report to <a href="https://github.com/Hieromon/AutoConnect/issues">Issues</a>. And please make your question comprehensively, not a statement. Include all relevant information to start the problem diagnostics as follows:</p>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" disabled checked/> Hardware module</li>
<li class="task-list-item"><input type="checkbox" disabled checked/> Arduino core version (Including the upstream tag ID.)</li>
<li class="task-list-item"><input type="checkbox" disabled checked/> Operating System which you use</li>
<li class="task-list-item"><input type="checkbox" disabled checked/> lwIP variant</li>
<li class="task-list-item"><input type="checkbox" disabled checked/> Problem description</li>
<li class="task-list-item"><input type="checkbox" disabled checked/> If you have a STACK DUMP decoded result with formatted by the code block tag</li>
<li class="task-list-item"><input type="checkbox" disabled checked/> The sketch code with formatted by the code block tag (Reduce to the reproducible minimum code for the problem)</li>
<li class="task-list-item"><input type="checkbox" disabled checked/> Debug messages output</li>
</ul>
<div class="footnote">
<hr />

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 160 KiB

After

Width:  |  Height:  |  Size: 80 KiB

@ -976,10 +976,10 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
<p><i class="fa fa-download"></i> <strong>Arduino IDE</strong></p>
<p>The current upstream at the 1.8 level or later is needed. Please install from the <a href="https://www.arduino.cc/en/Main/Software">official Arduino IDE download page</a>. This step is not required if you already have a modern version.</p>
<p><i class="fa fa-download"></i> <strong>ESP8266 Arduino core</strong></p>
<p>AutoConnect targets sketches made on the assumption of <a href="https://github.com/esp8266/Arduino">ESP8266 Community's Arduino core</a>. The <a href="https://github.com/esp8266/Arduino/releases/latest">latest release</a> is recommended.<br />
<p>AutoConnect targets sketches made on the assumption of <a href="https://github.com/esp8266/Arduino">ESP8266 Community's Arduino core</a>. Stable 2.4.0 or higher required and the <a href="https://github.com/esp8266/Arduino/releases/latest">latest release</a> is recommended.<br />
Install third-party platform using the <em>Boards Manager</em> of Arduino IDE. Package URL is <a href="http://arduino.esp8266.com/stable/package_esp8266com_index.json">http://arduino.esp8266.com/stable/package_esp8266com_index.json</a></p>
<p><i class="fa fa-download"></i> <strong>ESP32 Arduino core</strong></p>
<p>Also, to apply AutoConnect to ESP32, the <a href="https://github.com/espressif/arduino-esp32">arduino-esp32 core</a> provided by Espressif is needed. The <a href="https://github.com/espressif/arduino-esp32/releases/latest">latest release</a> is recommended.<br />
<p>Also, to apply AutoConnect to ESP32, the <a href="https://github.com/espressif/arduino-esp32">arduino-esp32 core</a> provided by Espressif is needed. Stable 1.0.1 or required and the <a href="https://github.com/espressif/arduino-esp32/releases/latest">latest release</a> is recommended.<br />
Install third-party platform using the <em>Boards Manager</em> of Arduino IDE. You can add multiple URLs into <em>Additional Board Manager URLs</em> field, separating them with commas. Package URL is <a href="https://dl.espressif.com/dl/package_esp32_index.json">https://dl.espressif.com/dl/package_esp32_index.json</a> for ESP32.</p>
<p><i class="fa fa-download"></i> <strong>Additional library (Required)</strong></p>
<p>The <a href="https://github.com/Hieromon/PageBuilder">PageBuilder</a> library to build HTML for ESP8266WebServer is needed.<br />

File diff suppressed because one or more lines are too long

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

Binary file not shown.

@ -765,7 +765,7 @@
<p>Custom Web page processing consumes a lot of memory. AutoConnect will take a whole string of the JSON document for the custom Web pages into memory. The required buffer size for the JSON document of example sketch <em>mqttRSSI</em> reaches approximately 3000 bytes. And actually, it needs twice the heap area. Especially this constraint will be a problem with the ESP8266 which has a heap size poor.</p>
<p>AutoConnect can handle custom Web pages without using JSON. In that case, since the ArduinoJson library will not be bound, the sketch size will also be reduced.</p>
<h2 id="writing-the-custom-web-pages-without-json">Writing the custom Web pages without JSON<a class="headerlink" href="#writing-the-custom-web-pages-without-json" title="Permanent link">&para;</a></h2>
<p>To handle a custom Web page without using JSON, follow the steps below.</p>
<p>To handle the custom Web pages without using JSON, follow the steps below.</p>
<ol>
<li>Create or define <a href="apiaux.html">AutoConnectAux</a> for each page.</li>
<li>Create or define <a href="acelements.html">AutoConnectElement(s)</a>.</li>

Loading…
Cancel
Save