<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 <codeclass="codehilite"><spanstyle="color: #f8f8f2"><</span><spanstyle="color: #f92672">label</span><spanstyle="color: #f8f8f2">></span></code> tag with an id attribute. The input box and the label are connected by the id attribute.</p>
<p>A <code>pattern</code> specifies a <ahref="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 <ahref="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 <ahref="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>
<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>
AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages are displayed in the <ahref="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>
<h2id="how-it-works">How it works<aclass="headerlink"href="#how-it-works"title="Permanent link">¶</a></h2>
<p>Custom Web pages are dynamically created by AutoConnect. The Classes and APIs necessary for dynamic creation are provided. <ahref="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 <ahref="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.
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><imgsrc="./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 '<em>header</em>'and '<em>caption</em>', adds them to the AutoConnectAux object '<em>aux</em>', binds to an AutoConnect object named '<em>portal</em>'. It's the basic procedure for configuring the custom Web page. Also, further explanation of AutoConnectElements is the <ahref="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 <ahref="acelements.html">documentation</a>.</p>
<h2id="custom-web-pages-in-autoconnect-menu">Custom Web pages in AutoConnect menu<aclass="headerlink"href="#custom-web-pages-in-autoconnect-menu"title="Permanent link">¶</a></h2>
<ulclass="horizontal-list">
<li><imgstyle="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 <ahref="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.<supid="fnref:1"><aclass="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><imgstyle="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.<supid="fnref:1"><aclass="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>
<h2id="multiple-custom-web-pages">Multiple custom Web pages<aclass="headerlink"href="#multiple-custom-web-pages"title="Permanent link">¶</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>
<li><pstyle="margin:0 20px 0 -20px"><spanstyle="margin-left:20px;float:right;width:280px;height:497px;"><imgdata-gifffer="./images/aux_menu.gif"data-gifffer-width="280"data-gifffer-height="497"/></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 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's menu is displayed only in the last two lines. The sketch of this animation is written to transition to '<i>aux2</i>' by the utility of the <ahref="acelements.html#autoconnectsubmit"><b>AutoConnectSubmit</b></a> element owned by '<i>aux1</i>'.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup><br>An '<i>aux2</i>' page transitions only from the '<i>aux1</i>'. 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 '<i>aux2</i>' from AutoConnect menu lines. The utility of the third parameter of the AutoConnectAux constructor is that.</p></li>
<li><pstyle="margin:0 20px 0 -20px"><spanstyle="margin-left:20px;float:right;width:280px;height:497px;border:1px solid lightgrey;"><imgdata-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 <ahref="acelements.html#autoconnectsubmit"><b>AutoConnectSubmit</b></a> element owned by <i>aux1</i>.<supid="fnref:2"><aclass="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>
<h2id="basic-steps-to-use-custom-web-pages">Basic steps to use custom Web pages<aclass="headerlink"href="#basic-steps-to-use-custom-web-pages"title="Permanent link">¶</a></h2>
@ -852,8 +851,8 @@ In the sketch below, it shows the sequence of codes to integrate three custom We
<h2id="write-the-custom-web-page-with-json">Write the custom Web page with JSON<aclass="headerlink"href="#write-the-custom-web-page-with-json"title="Permanent link">¶</a></h2>
<p>You can write the custom Web page in JSON without using sketch codes.<supid="fnref:3"><aclass="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 <ahref="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<supid="fnref:2"><aclass="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.<supid="fnref:3"><aclass="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 <ahref="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<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup> is equivalent.</p>
@ -930,7 +929,7 @@ The following JSON code and sketch will execute the custom Web page as the examp
<spanstyle="color: #f8f8f2">}</span>
</pre></div></p>
<h2id="passing-parameters-with-sketches-and-custom-web-pages">Passing parameters with sketches and custom Web pages<aclass="headerlink"href="#passing-parameters-with-sketches-and-custom-web-pages"title="Permanent link">¶</a></h2>
<p>A sketch can access variables of <ahref="acelements.html">AutoConnectElements</a>in the custom Web page. The value entered into the AutoConnectElements on the page is stored to the <ahref="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 <ahref="achandling.html#parameter-handling">Parameter handling</a>.</p>
<p>A sketch can access variables of <ahref="acelements.html">AutoConnectElements</a>on the custom Web page. The value entered into the AutoConnectElements is stored to the <ahref="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 <ahref="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 <ahref="achandling.html#custom-field-data-handling">Custom field data handling</a> section.</p>
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.
<dlclass="apidl">
<dt><strong>Parameters</strong></dt>
<dd><spanclass="apidef">reserve</span><spanclass="apidesc">Reserved size of a container for option strings.</span></dd>
<dd><spanclass="apidef">reserve</span><spanclass="apidesc">Reserved size of a container for the radio button option strings.</span></dd>
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.
<dlclass="apidl">
<dt><strong>Parameters</strong></dt>
<dd><spanclass="apidef">reserve</span><spanclass="apidesc">Reserved size of a container for the options.</span></dd>
<dd><spanclass="apidef">name</span><spanclass="apidesc">The element name.</span></dd>
<dd><spanclass="apidef">value</span><spanclass="apidesc">The name of the submit button as an HTML <codeclass="codehilite"><spanstyle="color: #f8f8f2"><</span><spanstyle="color: #f92672">input</span><spanstyle="color: #a6e22e">type</span><spanstyle="color: #f92672">=</span><spanstyle="color: #e6db74">"button"</span><spanstyle="color: #f8f8f2">></span></code> tag, it will also be the label of the button.</span></dd>
<h3id="public-member-variables_6"><iclass="fa fa-code"></i> Public member variables<aclass="headerlink"href="#public-member-variables_6"title="Permanent link">¶</a></h3>
<h3id="public-member-functions_6"><iclass="fa fa-code"></i> Public member functions<aclass="headerlink"href="#public-member-functions_6"title="Permanent link">¶</a></h3>
<dd><spanclass="apidef">name</span><spanclass="apidesc">The element name.</span></dd>
<dd><spanclass="apidef">value</span><spanclass="apidesc">String of content for the text element.</span></dd>
<dd><spanclass="apidef">style</span><spanclass="apidesc">A style code with CSS format that qualifiers the text.</span></dd>
</dl></p>
<h3id="public-member-variables_7"><iclass="fa fa-code"></i> Public member variables<aclass="headerlink"href="#public-member-variables_7"title="Permanent link">¶</a></h3>
<h3id="public-member-functions_7"><iclass="fa fa-code"></i> Public member functions<aclass="headerlink"href="#public-member-functions_7"title="Permanent link">¶</a></h3>
<h2id="validation-for-the-value">Validation for the value<aclass="headerlink"href="#validation-for-the-value"title="Permanent link">¶</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 <ahref="achandling.html#check-data-against-on-submission"><strong>pattern</strong></a> to <ahref="apielements.html#pattern">AutoConnectInput</a>, you can find errors in data styles while typing in custom Web pages. The pattern is specified by <ahref="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 <ahref="achandling.html#check-data-against-on-submission">Handling the custom Web pages</a> section.</p>
<p>By giving a <ahref="achandling.html#check-data-against-on-submission"><strong>pattern</strong></a> to <ahref="apielements.html#pattern">AutoConnectInput</a>, you can find errors in data format while typing in custom Web pages. The pattern is specified by <ahref="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 <ahref="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 <ahref="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>
<pclass="admonition-title">Regular Expressions for JavaScript</p>
<p>Regular expressions specified in the AutoConnectInput pattern conforms to the <ahref="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript specification</a>.</p>
<h2id="how-erase-the-credentials-saved-in-eeprom"><iclass="fa fa-question-circle"></i> How erase the credentials saved in EEPROM?<aclass="headerlink"href="#how-erase-the-credentials-saved-in-eeprom"title="Permanent link">¶</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>
<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>
<h3id="public-member-functions">Public member functions<aclass="headerlink"href="#public-member-functions"title="Permanent link">¶</a></h3>
<h3id="public-member-functions"><iclass="fa fa-code"></i>Public member functions<aclass="headerlink"href="#public-member-functions"title="Permanent link">¶</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>
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
<h2id="autoconnect-behaves-not-stable-with-my-sketch-yet"><iclass="fa fa-question-circle"></i> AutoConnect behaves not stable with my sketch yet.<aclass="headerlink"href="#autoconnect-behaves-not-stable-with-my-sketch-yet"title="Permanent link">¶</a></h2>
<p>If AutoConnect behavior is not stable with your sketch, you can try the following measures.</p>
<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 <ahref="apiconfig.html#autoconnectconfig">AutoConnectConfig</a> to match the <ahref="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 <ahref="apiconfig.html#autoconnectconfig">AutoConnectConfig</a> to match the <ahref="apiconfig.html#channel">channel</a> to the access point.</p>
<p>The <ahref="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 <ahref="https://github.com/espressif/arduino-esp32/issues">issue of arduino-esp32</a>. The problem that your sketch possesses may already have been solved.</p>
<h3id="3-turn-on-the-debug-log-options">3. Turn on the debug log options<aclass="headerlink"href="#3-turn-on-the-debug-log-options"title="Permanent link">¶</a></h3>
<p>To fully enable for the AutoConnect debug logging options, change the following two files.</p>
<h3id="4-reports-the-issue-to-autoconnect-repository-on-github">4. Reports the issue to AutoConnect repository on Github<aclass="headerlink"href="#4-reports-the-issue-to-autoconnect-repository-on-github"title="Permanent link">¶</a></h3>
<p>If you can not solve AutoConnect problems please report to <ahref="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 <ahref="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>
<liclass="task-list-item"><inputtype="checkbox"disabledchecked/>If you have a STACK DUMP decoded result with formatted by the code block tag</li>
<liclass="task-list-item"><inputtype="checkbox"disabledchecked/>The sketch code with formatted by the code block tag (Reduce to the reproducible minimum code for the problem)</li>
<p>The current upstream at the 1.8 level or later is needed. Please install from the <ahref="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>AutoConnect targets sketches made on the assumption of <ahref="https://github.com/esp8266/Arduino">ESP8266 Community's Arduino core</a>. The <ahref="https://github.com/esp8266/Arduino/releases/latest">latest release</a> is recommended.<br/>
<p>AutoConnect targets sketches made on the assumption of <ahref="https://github.com/esp8266/Arduino">ESP8266 Community's Arduino core</a>. Stable 2.4.0 or higher required and the <ahref="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 <ahref="http://arduino.esp8266.com/stable/package_esp8266com_index.json">http://arduino.esp8266.com/stable/package_esp8266com_index.json</a></p>
<p>Also, to apply AutoConnect to ESP32, the <ahref="https://github.com/espressif/arduino-esp32">arduino-esp32 core</a> provided by Espressif is needed. The <ahref="https://github.com/espressif/arduino-esp32/releases/latest">latest release</a> is recommended.<br/>
<p>Also, to apply AutoConnect to ESP32, the <ahref="https://github.com/espressif/arduino-esp32">arduino-esp32 core</a> provided by Espressif is needed. Stable 1.0.1 or required and the <ahref="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 <ahref="https://dl.espressif.com/dl/package_esp32_index.json">https://dl.espressif.com/dl/package_esp32_index.json</a> for ESP32.</p>
<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>
<h2id="writing-the-custom-web-pages-without-json">Writing the custom Web pages without JSON<aclass="headerlink"href="#writing-the-custom-web-pages-without-json"title="Permanent link">¶</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 <ahref="apiaux.html">AutoConnectAux</a> for each page.</li>
<li>Create or define <ahref="acelements.html">AutoConnectElement(s)</a>.</li>
Hieromon Ikasamo
6 years ago
