<p>AutoConnectElement is a base class for other element classes and has common attributes for all elements. It can also be used as a <ahref="#variant-for-autoconnectelements">variant</a> of each element. The following items are attributes that AutoConnectElement has and are common to other elements.</p>
<p>AutoConnectButton generates an HTML <codeclass="codehilite"><spanstyle="color: #f8f8f2"><</span><spanstyle="color: #f92672">button</span><spanstyle="color: #a6e22e">type</span><spanstyle="color: #f92672">=</span><spanstyle="color: #e6db74">"button"</span><spanstyle="color: #f8f8f2">></span></code> tag and locates a clickable button to a custom Web page. Currently AutoConnectButton corresponds only to name, value, an <em>onclick</em> attribute of HTML button tag. An <em>onclick</em> attribute is generated from an <code>action</code> member variable of the AutoConnectButton, which is mostly used with a JavaScript to activate a script.</p>
<p>AutoConnectCheckbox generates 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">"checkbox"</span><spanstyle="color: #f8f8f2">></span></code> tag and a <codeclass="codehilite"><spanstyle="color: #f8f8f2"><</span><spanstyle="color: #f92672">label</span><spanstyle="color: #f8f8f2">></span></code> tag. It places horizontally on a custom Web page by default.</p>
@ -1646,7 +1646,7 @@ Only <i class="far fa-square"></i> will be displayed if a label is not specified
<p>AutoConnectInput generates 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">"text"</span><spanstyle="color: #f8f8f2">></span></code> tag and a <codeclass="codehilite"><spanstyle="color: #f8f8f2"><</span><spanstyle="color: #f92672">label</span><spanstyle="color: #f8f8f2">></span></code> tag. It can also have a placeholder. The value of the input box is passed to the destination in the query string and can be retrieved programmatically. You can also update from the sketches.</p>
@ -1683,7 +1683,7 @@ Only <i class="far fa-square"></i> will be displayed if a label is not specified
<p>AutoConnectRadio generates few HTML <codeclass="codehilite"><spanstyle="color: #f8f8f2"><</span><spanstyle="color: #f92672">input</span><spanstyle="color: #a6e22e">type</span><spanstyle="color: #f92672">=</span><spanstyle="color: #e6db74">"radio"</span><spanstyle="color: #f8f8f2">></span></code> tags as grouped and the same number of <codeclass="codehilite"><spanstyle="color: #f8f8f2"><</span><spanstyle="color: #f92672">label</span><spanstyle="color: #f8f8f2">></span></code> tags. AutoConnectRadio can keep the value of a radio button as a collection. The grouped values will be placed in the custom Web page to select only one exclusively.</p>
@ -1707,7 +1707,7 @@ Only <i class="far fa-square"></i> will be displayed if a label is not specified
<p>AutoConnectSelect generates an HTML <codeclass="codehilite"><spanstyle="color: #f8f8f2"><</span><spanstyle="color: #f92672">select</span><spanstyle="color: #f8f8f2">></span></code> tag (drop-down list) and few <codeclass="codehilite"><spanstyle="color: #f8f8f2"><</span><spanstyle="color: #f92672">option</span><spanstyle="color: #f8f8f2">></span></code> tags.</p>
@ -1722,7 +1722,7 @@ Only <i class="far fa-square"></i> will be displayed if a label is not specified
<p>AutoConnectSubmit generates 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 attached <codeclass="codehilite">onclick</code> attribute. The native code of the <codeclass="codehilite">onclick</code> attribute is the submission of the form with the <strong>POST</strong> method.</p>
@ -1739,7 +1739,7 @@ Only <i class="far fa-square"></i> will be displayed if a label is not specified
<p>AutoConnectText generates an HTML <codeclass="codehilite"><spanstyle="color: #f8f8f2"><</span><spanstyle="color: #f92672">div</span><spanstyle="color: #f8f8f2">></span></code> tag. A <codeclass="codehilite">style</code> attribute will be attached if a <ahref="#style">style</a> parameter is passed.</p>
<small><strong><code>AutoConnectText text("text", "Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak", "font-family:serif;color:#4682b4;");</code></strong></small></p>
<p><small>On the page:</small><br><imgsrc="./images/actext.png"></p>
<p><small>On the page:</small><br><imgsrc="images/actext.png"></p>
<p><em>AutoConnectElementVT</em> is a predefined type for it and can use methods of <ahref="https://en.cppreference.com/w/cpp/container/vector">std::vector</a><<ahref="https://en.cppreference.com/w/cpp/utility/functional/reference_wrapper">std::reference_wrapper</a>>.</p>
<h2id="loading-saving-autoconnectelements-with-json">Loading & saving AutoConnectElements with JSON<aclass="headerlink"href="#loading-saving-autoconnectelements-with-json"title="Permanent link">¶</a></h2>
<p>AutoConnect supports reading the custom Web page definitions written in JSON and also supports loading and saving of AutoConnectElements. In both cases, the target object is a <ahref="acjson.html">JSON document for AutoConnect</a>. However, it can not save all AutoConnectElements contained in the page as a custom Web page. (ie. AutoConnectAux)</p>
<p><imgsrc="./images/ac_load_save.svg"></p>
<p><imgsrc="images/ac_load_save.svg"></p>
<h3id="loading-autoconnectaux-autoconnectelements-with-json"><iclass="fa fa-upload"></i> Loading AutoConnectAux & AutoConnectElements with JSON<aclass="headerlink"href="#loading-autoconnectaux-autoconnectelements-with-json"title="Permanent link">¶</a></h3>
<p>To load a JSON document as AutoConnectAux use the <ahref="api.html#load"><strong>AutoConnect::load</strong></a> function and load the JSON document of each AutoConnectElement using the <ahref="apiaux.html#loadelement"><strong>AutoConnectAux::loadElement</strong></a> function. Although the functions of both are similar, the structure of the target JSON document is different.</p>
<p>The <ahref="apiaux.html#load">AutoConnect::load</a> function loads the entire AutoConnectAux and creates both the AutoConnectAux instance and each AutoConnectElement instance. A single JSON document can contain multiple custom Web pages. If you write JSON of AutoConnectAux as an array, the load function generates all the pages contained in that array. Therefore, it is necessary to supply the JSON document of AutoConnectAux as an input of the load function and must contain the elements described section <ahref="acjson.html#json-document-structure-for-autoconnectaux"><em>JSON document structure for AutoConnectAux</em></a>.</p>
@ -1191,7 +1191,7 @@
<h2id="custom-field-data-handling">Custom field data handling<aclass="headerlink"href="#custom-field-data-handling"title="Permanent link">¶</a></h2>
<p>A sketch can access variables of AutoConnectElements in the custom Web page. The value entered into the AutoConnectElements on the page is stored in the member variable of each element by AutoConnect whenever GET/POST transmission occurs. </p>
<p>The following diagram shows the flow of the input values of a custom Web page into a sketch and is the basis for actions to manipulate the values of custom Web pages using sketches.</p>
<p><imgsrc="./images/ac_param_flow.svg"></p>
<p><imgsrc="images/ac_param_flow.svg"></p>
<h3id="where-to-pick-up-the-values"><iclass="fa fa-desktop"></i> Where to pick up the values<aclass="headerlink"href="#where-to-pick-up-the-values"title="Permanent link">¶</a></h3>
<p>A sketch composed of handlers can receive the value of AutoConnectElements entered in a custom Web page after sending, but that handler is different from the page where the value was entered. It is necessary to be aware that can accept the entered values by the next page handler after the transition.</p>
<p>Usually, two ways to retrieve entered values we have. One is to use the <ahref="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#getting-information-about-request-arguments">ESP8266WebServer::arg</a> (or WebServer::arg for ESP32) function in the <ahref="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#client-request-handlers"><code>on handler</code></a> attached by ESP8266WebServer (WebServer w/ESP32 also).</p>
@ -1475,7 +1475,7 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<spanstyle="color: #f8f8f2">}</span>
</pre></div>
<iclass="fa fa-arrow-down"></i><br>
<iclass="fa fa-eye"></i> It's shown as like:<spanstyle="margin-left:14px;width:272px;height:118px;border:1px solid lightgray;"><imgalign="top"width="270"src="./images/acow.png"></span></p>
<iclass="fa fa-eye"></i> It's shown as like:<spanstyle="margin-left:14px;width:272px;height:118px;border:1px solid lightgray;"><imgalign="top"width="270"src="images/acow.png"></span></p>
<h3id="check-data-against-on-submission"><iclass="far fa-check-square"></i> Check data against on submission<aclass="headerlink"href="#check-data-against-on-submission"title="Permanent link">¶</a></h3>
<p>By giving a <ahref="apielements.html#pattern">pattern</a> to <ahref="apielements.html#autoconenctinput">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">regular expression</a>.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup> If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. The following example shows the behavior when checking the IP address in the AutoConnectInput field.</p>
<h3id="convert-data-to-actually-type"><iclass="fa fa-exchange"></i> Convert data to actually type<aclass="headerlink"href="#convert-data-to-actually-type"title="Permanent link">¶</a></h3>
AutoConnect can handle custom Web pages prepared by user sketches individually. Custom Web pages can be integrated into the AutoConnect menu and executed as menu items and can have input-output parameters and handle them.</p>
<p>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>AutoConnect creates the custom Web pages dynamically at runtime. Sketch describes the custom Web pages using classes and APIs necessary for dynamic creation which are <ahref="apiaux.html#autoconnectaux"><strong>AutoConnectAux</strong></a> and the variant of <ahref="acelements.html"><strong>AutoConnectElements</strong></a>. AutoConnectAux is an object dependent on AutoConnect, which provides an easy way to incorporate custom Web pages into AutoConnect like the one on the right figure. The elements make up a custom Web page are provided as an AutoConnectElement class.</p>
<p>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><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 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;"src="./images/ac_auxmenu.png">
<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 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;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>
<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>
<p>You can embed custom Web pages written in <ahref="https://www.json.org/index.html"><strong>JSON</strong></a> into AutoConnect without AutoConnectAux & AutoConnectElements declaration. Custom Web page declaration by JSON can embed in the sketch as a fixed string or can store in the external file such as SPIFFS for stream loading. Also, you can also load and save AutoConnectElements objects individually.<supid="fnref:1"><aclass="footnote-ref"href="#fn:1"rel="footnote">1</a></sup></p>
<p>By providing the following JSON document to AutoConnect, you can include the custom Web page like the below:</p>
<p>A JSON document for AutoConnect can contain the custom Web page multiple. You can further reduce the sketch process by loading multiple pages of JSON document at once.</p>
<h3id="combination-with-mdns"><iclass="fa fa-caret-right"></i> Combination with mDNS<aclass="headerlink"href="#combination-with-mdns"title="Permanent link">¶</a></h3>
<p>With <ahref="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266mDNS">mDNS library</a>, you can access to ESP8266 by name instead of IP address after connection. The sketch can start the MDNS responder after <ahref="api.html#begin"><em>AutoConnect::begin</em></a>.</p>
@ -1373,7 +1373,7 @@ The above example does not connect to WiFi until TRIGGER_PIN goes LOW. When TRIG
<h3id="use-with-the-pagebuilder-library"><iclass="fa fa-caret-right"></i> Use with the <ahref="https://github.com/Hieromon/PageBuilder">PageBuilder</a> library<aclass="headerlink"href="#use-with-the-pagebuilder-library"title="Permanent link">¶</a></h3>
<p>In ordinary, the URL handler will respond the request by sending some HTML. <ahref="https://github.com/Hieromon/PageBuilder">PageBuilder</a> library is HTML assembly aid. it can handle predefined HTML as like a template and simplify an HTML string assemble logic, and also the generated HTML send automatically.</p>
<p>An example sketch used with the PageBuilder as follows and it explains how it aids for the HTML generating. Details for <ahref="https://github.com/Hieromon/PageBuilder">Github repository</a>.</p>
<h3id="configuration-for-soft-ap-and-captive-portal"><iclass="fa fa-caret-right"></i> Configuration for Soft AP and captive portal<aclass="headerlink"href="#configuration-for-soft-ap-and-captive-portal"title="Permanent link">¶</a></h3>
<p>AutoConnect will activate SoftAP at failed the first <em>WiFi.begin</em>. It SoftAP settings are stored in <ahref="api.html#autoconnectconfig"><strong>AutoConnectConfig</strong></a> as the following parameters. The sketch could be configured SoftAP using these parameters, refer the <ahref="api.html#autoconnectconfig-api">AutoConnectConfig API</a> for details.</p>
@ -1404,7 +1404,7 @@ The above example does not connect to WiFi until TRIGGER_PIN goes LOW. When TRIG
</div>
<h3id="assign-user-sketchs-home-path"><iclass="fa fa-caret-right"></i> Assign user sketch's home path<aclass="headerlink"href="#assign-user-sketchs-home-path"title="Permanent link">¶</a></h3>
<p><strong>HOME</strong> for returning to the user's sketch homepage will display at the bottom of the AutoConnect menu. It could be set using the <ahref="api.html#home"><em>AutoConnect::home</em></a> function.</p>
<p><imgsrc="./images/menu_home.png"/></p>
<p><imgsrc="images/menu_home.png"/></p>
<h3id="relocate-the-autoconnect-home-path"><iclass="fa fa-caret-right"></i> Relocate the AutoConnect home path<aclass="headerlink"href="#relocate-the-autoconnect-home-path"title="Permanent link">¶</a></h3>
<p>A home path of AutoConnect is <strong>/_ac</strong> by default. You can access from the browser with http://IPADDRESS/_ac. You can change the home path by revising <ahref="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnect.h#L58"><strong>AUTOCONNECT_URI</strong></a> macro in the include header file as <ahref="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnect.h">AutoConnect.h</a>.</p>
<h3id="embed-to-the-sketches"><iclass="fa fa-edit"></i> Embed to the sketches<aclass="headerlink"href="#embed-to-the-sketches"title="Permanent link">¶</a></h3>
<p>How embed the AutoConnect to the sketches you have. Most simple approach to applying AutoConnect for the existing sketches, follow the below steps. The below sketch is for ESP8266. For ESP32, replace <code>ESP8266WebServer</code> with <code>WebServer</code> and <code>ESP8266WiFi.h</code> with <code>WiFi.h</code> respectively.</p>
<p><imgsrc="./images/BeforeAfter.svg"/></p>
<p><imgsrc="images/BeforeAfter.svg"/></p>
<ulclass="ulsty-edit"style="list-style:none;">
<li>Insert <codeclass="codehilite"><spanclass="cp">#include</span><spanclass="cpf"><AutoConnect.h></span></code> to behind of <codeclass="codehilite"><spanclass="cp">#include</span><spanclass="cpf"><ESP8266WebServer.h></span></code>.</li>
<li>Insert <codeclass="codehilite"><spanclass="na">AutoConnect</span><em>PORTAL(WEBSERVER);</em></code> to behind of <codeclass="codehilite"><spanclass="na">ESP8266WebServer</span><em>WEBSERVER;</em></code> declaration.<supid="fnref:1"><aclass="footnote-ref"href="#fn:1"rel="footnote">1</a></sup></li>
<ahref="#date-as-mmddyyyy-2"title=" Date as MM/DD/YYYY 2"class="md-nav__link">
Date as MM/DD/YYYY 2
<ahref="#date-as-mmddyyyy-3"title=" Date as MM/DD/YYYY 3"class="md-nav__link">
Date as MM/DD/YYYY 3
</a>
</li>
@ -1015,23 +1015,23 @@
<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>
</div>
<p>Here, represent examples the typical regular expression for the input validation.</p>
<h3id="dns-hostname"><imgsrc="./images/regexp.png"align="top"> DNS hostname<aclass="headerlink"href="#dns-hostname"title="Permanent link">¶</a></h3>
<h3id="dns-hostname"><imgsrc="images/regexp.png"align="top"> DNS hostname<aclass="headerlink"href="#dns-hostname"title="Permanent link">¶</a></h3>
<h3id="date-as-mmddyyyy-2"><imgsrc="./images/regexp.png"align="top"> Date as MM/DD/YYYY <supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup><aclass="headerlink"href="#date-as-mmddyyyy-2"title="Permanent link">¶</a></h3>
<h3id="date-as-mmddyyyy-3"><imgsrc="images/regexp.png"align="top"> Date as MM/DD/YYYY <supid="fnref:3"><aclass="footnote-ref"href="#fn:3"rel="footnote">3</a></sup><aclass="headerlink"href="#date-as-mmddyyyy-3"title="Permanent link">¶</a></h3>
<p>This regular expression does not fully support the format of the e-mail address requested in <ahref="https://tools.ietf.org/html/rfc5322">RFC5322</a>. <aclass="footnote-backref"href="#fnref:1"rev="footnote"title="Jump back to footnote 1 in the text">↩</a><aclass="footnote-backref"href="#fnref2:1"rev="footnote"title="Jump back to footnote 1 in the text">↩</a></p>
<p>The ssanf library function cannot be used with the old Arduino core. <aclass="footnote-backref"href="#fnref:1"rev="footnote"title="Jump back to footnote 1 in the text">↩</a></p>
</li>
<liid="fn:2">
<p>This regular expression does not consider semantic constraints. It is not possible to detect errors that do not exist as actual dates. <aclass="footnote-backref"href="#fnref:2"rev="footnote"title="Jump back to footnote 2 in the text">↩</a></p>
<p>This regular expression does not fully support the format of the e-mail address requested in <ahref="https://tools.ietf.org/html/rfc5322">RFC5322</a>. <aclass="footnote-backref"href="#fnref:2"rev="footnote"title="Jump back to footnote 2 in the text">↩</a></p>
</li>
<liid="fn:3">
<p>This regular expression does not consider semantic constraints. It is not possible to detect errors that do not exist as actual dates. <aclass="footnote-backref"href="#fnref:3"rev="footnote"title="Jump back to footnote 3 in the text">↩</a></p>
@ -1144,7 +1144,7 @@ For AutoConnect menus to work properly, call <a href="api.html#handlerequest"><e
</pre></div>
<detailsclass="hint"><summary>You can interactively check the WiFi state of ESP8266.</summary><p>Please try <ahref="https://github.com/Hieromon/ESPShaker"><strong>ESPShaker</strong></a>. It is ESP8266 interactive serial command processor.</p>
<p><imgsrc="./images/espshaker.gif"/></p>
<p><imgsrc="images/espshaker.gif"/></p>
</details>
<h2id="does-not-response-from-95ac"><iclass="fa fa-question-circle"></i> Does not response from /_ac.<aclass="headerlink"href="#does-not-response-from-95ac"title="Permanent link">¶</a></h2>
<p>Probably <strong>WiFi.begin</strong> failed with the specified SSID. Activating the <ahref="advancedusage.html#debug-print">debug printing</a> will help you to track down the cause.</p>
<h3id="run-at-first"><iclass="fa fa-play-circle"></i> Run at first<aclass="headerlink"href="#run-at-first"title="Permanent link">¶</a></h3>
<p>After about 30 seconds, if the ESP8266 cannot connect to nearby Wi-Fi spot, you pull out your smartphone and open <em>Wi-Fi settings</em> from the <em>Settings</em> Apps. You can see the <strong>esp8266ap</strong><supid="fnref:1"><aclass="footnote-ref"href="#fn:1"rel="footnote">1</a></sup> in the list of <em>"CHOOSE A NETWORK..."</em>. Then tap the esp8266ap and enter password <strong>12345678</strong>, a something screen pops up automatically as shown below.</p>
<p>This is the AutoConnect statistics screen. This screen displays the current status of the established connection, WiFi mode, IP address, free memory size, and etc. Also, the <strong>hamburger icon</strong> is the control menu of AutoConnect seems at the upper right. By tap the hamburger icon, the control menu appears as the below.</p>
<h3id="join-to-the-new-access-point"><iclass="fa fa-cog"></i> Join to the new access point<aclass="headerlink"href="#join-to-the-new-access-point"title="Permanent link">¶</a></h3>
<p>Here, tap <em>"Configure new AP"</em> to connect the new access point then the SSID configuration screen would be shown. Enter the <strong>SSID</strong> and <strong>Passphrase</strong> and tap <strong>apply</strong> to start connecting the access point.</p>
<p>After connection established, the current status screen will appear. It is already connected to WLAN with WiFi mode as WIFI_AP_STA and the IP connection status is displayed there including the SSID. Then at this screen, you have two options for the next step.</p>
<p>For one, continues execution of the sketch while keeping this connection. You can access ESP8266 via browser through the established IP address after cancel to "<strong>Log in</strong>" by upper right on the screen.<br/>
Or, "<strong>RESET</strong>" can be selected. The ESP8266 resets and reboots. After that, immediately before the connection will be restored automatically with WIFI_STA mode.</p>
<h3id="run-for-usually"><iclass="fa fa-play-circle"></i> Run for usually<aclass="headerlink"href="#run-for-usually"title="Permanent link">¶</a></h3>
<p>The IP address of ESP8266 would be displayed on the serial monitor after connection restored. Please access its address from the browser. The "Hello, world" page will respond. It's the page that was handled by in the sketch with "<strong>on</strong>" function of <em>ESP8266WebServer</em>.</p>
<h2id="what-does-this-example-do">What does this example do?<aclass="headerlink"href="#what-does-this-example-do"title="Permanent link">¶</a></h2>
<p>Uses the web interface to light the LED connected to the <strong><ahref="https://github.com/nodemcu/nodemcu-devkit-v1.0">NodeMCU</a></strong> module D0 port (which could be referred to as <em>BUILTIN_LED</em>), the following animation is it.</p>
<p>Access to the ESP8266 module connected WiFi from the browser then the page contains the current value of the D0 port would be displayed. The page has the buttons to switch the port value. The LED blinks according to the value of the button that was clicked. This example is a typical sketch of manipulating ESP8266's GPIO via WLAN.</p>
<p><imgdata-gifffer="./images/ac2.gif"/></p>
<p><imgdata-gifffer="images/ac2.gif"/></p>
<p>Embed AutoConnect library into this sketch. There are few places to be changed. And you can use AutoConnect's captive portal function to establish a connection freely to other WiFi spots.</p>
<p>Declare only AutoConnect, performs handleClient.</p>
<p><imgsrc="./images/handlePortal.svg"/></p>
<p><imgsrc="images/handlePortal.svg"/></p>
<h2id="used-with-mqtt-as-a-client-application">Used with MQTT as a client application<aclass="headerlink"href="#used-with-mqtt-as-a-client-application"title="Permanent link">¶</a></h2>
<p>The effect of AutoConnect is not only for ESP8266/ESP32 as the web server. It has advantages for something WiFi client as well. For example, AutoConnect is also effective for publishing MQTT messages from various measurement points. Even if the SSID is different for each measurement point, it is not necessary to modify the sketch.</p>
<p>This example tries to publish the WiFi signal strength of ESP8266 with MQTT. It uses the <ahref="https://thingspeak.com/">ThingSpeak</a> for MQTT broker. ESP8266 publishes the RSSI value to the channel created on ThingSpeak as <ahref="https://github.com/knolleary/pubsubclient">MQTT client</a>. This example is well suited to demonstrate the usefulness of AutoConnect, as RSSI values are measured at each access point usually. Just adding a few lines of code makes it unnecessary to upload sketches with the different SSIDs rewrite for each access point.</p>
<li>Arduino Client for MQTT - It's the <ahref="https://github.com/knolleary/pubsubclient">PubSubClient</a>, install it to Arduino IDE. If you have the latest version already, this step does not need.</li>
<h4id="get-channel-id-and-api-keys">Get Channel ID and API Keys<aclass="headerlink"href="#get-channel-id-and-api-keys"title="Permanent link">¶</a></h4>
<p>The channel successfully created, you can see the channel status screen as a below. <strong>Channel ID</strong> is displayed there.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup></p>
<p>Here, switch the channel status tab to <strong>API Keys</strong>. The API key required to publish the message is the <strong>Write API Key</strong>.</p>
<p>The last key you need is the <strong>User API Key</strong> and can be confirmed it in the user profile. Pull down <strong>Account</strong> from the top menu, select <strong>My profile</strong>. Then you can see the ThingSpeak settings and the <strong>User API Key</strong> is displayed middle of this screen.</p>
<p>The complete code of the sketch is <ahref="https://github.com/Hieromon/AutoConnect/blob/master/examples/mqttRSSI/mqttRSSI.ino">mqttRSSI.ino</a> in the <ahref="https://github.com/Hieromon/AutoConnect">AutoConnect repository</a>. Replace the following #define in a sketch with <strong>User API Key</strong>, <strong>Write API Key</strong> and <strong>Channel ID</strong>. After Keys updated, compile the sketch and upload it.</p>
<divclass="codehilite"style="background: #272822"><prestyle="line-height: 125%"><span></span><spanstyle="color: #75715e">#define MQTT_USER_KEY "****************" // Replace to User API Key.</span>
<p>Call <ahref="api.html#begin"><strong>AutoConnect::begin</strong></a>. If you need to assign a static IP address, executes <ahref="api.html#autoconnectconfig-api"><strong>AutoConnectConfig</strong></a> before that. </p>
<p><imgsrc="./images/begin.png"width="55%"/></p>
<p><imgsrc="images/begin.png"width="55%"/></p>
</li>
<li>
<p>Performs "handleClent()" in "loop()"</p>
<p>Invokes <ahref="api.html#handleclient"><strong>AutoConnect::handleClient()</strong></a> at inside <code>loop()</code> to enable the AutoConnect menu.</p>
<p>To the dynamic configuration for joining to WLAN with SSID and PSK accordingly. It an Arduino library united with <em>ESP8266WebServer</em> class for ESP8266 or <em>WebServer</em> class for ESP32.
Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi connection. With this library to make a sketch easily which connects from ESP8266/ESP32 to the access point at runtime by the web interface without hard-coded SSID and password.</p>
<h3id="no-need-pre-coded-ssid-password"><iclass="fa fa-arrow-circle-right"aria-hidden="true"></i> No need pre-coded SSID & password<aclass="headerlink"href="#no-need-pre-coded-ssid-password"title="Permanent link">¶</a></h3>
<p><spanclass="lead">It is no needed hard-coding in advance the SSID and Password into the sketch to connect between ESP8266/ESP32 and WLAN. You can input SSID & Password from a smartphone via the web interface at runtime.</span></p>
@ -942,9 +942,9 @@ Easy implementing the Web interface constituting the WLAN for ESP8266/ESP32 WiFi
<h3id="easy-to-add-the-custom-web-pages-enhanced-wv097"><iclass="fa fa-arrow-circle-right"aria-hidden="true"></i> Easy to add the <ahref="acintro.html">custom Web pages</a><sup><sub>ENHANCED w/v0.9.7</sub></sup><aclass="headerlink"href="#easy-to-add-the-custom-web-pages-enhanced-wv097"title="Permanent link">¶</a></h3>
<p><spanclass="lead">You can easily add your owned web screens that can consist of representative HTML elements and invoke them from the menu. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD.</span></p>
<p>The <ahref="https://github.com/Hieromon/PageBuilder">PageBuilder</a> library to build HTML for ESP8266WebServer is needed.<br/>
To install the PageBuilder library into your Arduino IDE, you can use the <em>Library Manager</em>. Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword '<strong>PageBuilder</strong>' with the topic '<strong>Communication</strong>', then you can see the <em>PageBuilder</em>. The latest version is required 1.3.2 later.<supid="fnref:1"><aclass="footnote-ref"href="#fn:1"rel="footnote">1</a></sup></p>
<p>By adding the <ahref="https://github.com/bblanchon/ArduinoJson">ArduinoJson</a> library, AutoConnect will be able to handle the <ahref="acintro.html"><strong>custom Web pages</strong></a> described with JSON. With AutoConnect v0.9.7 you can insert user-owned screens that can consist of representative HTML elements as styled TEXT, INPUT, BUTTON, CHECKBOX, SELECT, SUBMIT and invoke them from the AutoConnect menu. These HTML elements can be added by sketches using the AutoConnect API. Further it possible importing the custom Web pages declarations described with JSON which stored in PROGMEM, SPIFFS, or SD. <ahref="https://arduinojson.org/v5/doc/">ArduinoJson version 5</a> is required to use this feature.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup></p>
<divclass="admonition info">
@ -993,9 +993,9 @@ To install the PageBuilder library into your Arduino IDE, you can use the <em>Li
</div>
<h3id="install-the-autoconnect">Install the AutoConnect<aclass="headerlink"href="#install-the-autoconnect"title="Permanent link">¶</a></h3>
<p>Clone or download from the <ahref="https://github.com/Hieromon/AutoConnect">AutoConnect GitHub repository</a>.</p>
<p>When you select Download, you can import it to Arduino IDE immediately. After downloaded, the AutoConnect-master.zip file will be saved in your download folder. Then in the Arduino IDE, navigate to <em>"Sketch > Include Library"</em>. At the top of the drop down list, select the option to <em>"Add .ZIP Library..."</em>. Details for <ahref="https://www.arduino.cc/en/Guide/Libraries#toc4">Arduino official page</a>.</p>
<p><imgsrc="./images/ins_lib.png"/></p>
<p><imgsrc="images/ins_lib.png"/></p>
<divclass="admonition info">
<pclass="admonition-title">Supported by Library manager.</p>
<p>AutoConnect was added to the Arduino IDE library manager. It can be used with the PlatformIO library also.</p>
<h2id="where-the-from"><iclass="fa fa-external-link"></i> Where the from<aclass="headerlink"href="#where-the-from"title="Permanent link">¶</a></h2>
<p>The AutoConnect menu appears when you access the <strong>AutoConnect root path</strong>. It is assigned "<strong>/_ac</strong>" located on the <em>local IP address</em> of ESP8266/ESP32 module by default. This location can be changed in the sketch. The following screen will appear at access to <code>http://{localIP}/_ac</code> as the root path. This is the statistics of the current WiFi connection. You can access the menu from the here, to invoke it tap <iclass="fa fa-bars"></i> at right on top. (e.g. <code>http://192.168.244.1/_ac</code> for SoftAP mode.)</p>
<h2id="configure-new-ap"><iclass="fa fa-bars"></i> Configure new AP<aclass="headerlink"href="#configure-new-ap"title="Permanent link">¶</a></h2>
<p>Scan all available access point in the vicinity and display it. Strength and security of the detected AP are marked. The <iclass="fa fa-lock"></i> is indicated for the SSID that needs a security key. "<strong>Hidden:</strong>" means the number of hidden SSIDs discovered.<br/>
Enter SSID and Passphrase and tap "<strong>apply</strong>" to starts WiFi connection. </p>
<h2id="open-ssids"><iclass="fa fa-bars"></i> Open SSIDs<aclass="headerlink"href="#open-ssids"title="Permanent link">¶</a></h2>
<p>Once it was established WiFi connection, its SSID and password will be saved in EEPROM of ESP8266/ESP32 automatically. The <strong>Open SSIDs</strong> menu reads the saved SSID credentials from the EEPROM. The stored credential data are listed by the SSID as shown below. Its label is a clickable button. Tap the SSID button, starts WiFi connection it.</p>
<p>Disconnect ESP8266/ESP32 from the current connection. It can also reset the ESP8266/ESP32 automatically after disconnection by instructing with using <ahref="api.html#autoreset">API</a> in the sketch.</p>
<p>After tapping "Disconnect", you will not be able to reach the AutoConnect menu. Once disconnected, you will need to set the SSID again for connecting the WLAN. </p>
<p>Reset the ESP8266/ESP32 module, it will start rebooting. After rebooting complete, the ESP8266/ESP32 module begins establishing the previous connection with WIFI_STA mode, and <em>esp8266ap</em> or <em>esp32ap</em> of an access point will disappear from WLAN.</p>
<pclass="admonition-title">Not every ESP8266 module will be rebooted normally</p>
<p>The Reset menu is using the <strong>ESP.reset()</strong> function for ESP8266. This is an almost hardware reset. In order to resume the sketch normally, the <ahref="https://github.com/esp8266/esp8266-wiki/wiki/Boot-Process#esp-boot-modes">state of GPIO0</a> is important. Since this depends on the circuit implementation for each module, not every module will be rebooted normally. See also <ahref="faq.html#hang-up-after-reset">FAQ</a>.</p>
@ -889,9 +889,9 @@ Enter SSID and Passphrase and tap "<strong>apply</strong>" to starts WiFi connec
<p>You can change the HOME path using the AutoConnect API. The <ahref="api.html#home"><strong>AutoConnect::home</strong></a> function sets the URI as a link of the HOME item of the AutoConnect menu.</p>
<h2id="extend-autoconnect-menu-with-your-sketches"><iclass="fa fa-bars"></i> Extend AutoConnect menu with your sketches<aclass="headerlink"href="#extend-autoconnect-menu-with-your-sketches"title="Permanent link">¶</a></h2>
<p>The AutoConnect menu can contain HTML pages of your sketch as custom items. It works for HTML pages implemented by <strong>ESP8266WebServer::on</strong> handler or <strong>WebServer::on</strong> handler for ESP32. That is, you can make it as menu items to invoke the legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as <ahref="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser">FSBrowser</a> to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code.</p>
<p>You can extend the AutoConnect menu to improve the original sketches and according to the procedure described in section <ahref="advancedusage.html#casts-the-html-pages-to-be-add-on-into-the-menu">Advanced Usage section</a>.</p>
<h2id="place-the-item-for-the-legacy-sketches-on-the-menu">Place the item for the legacy sketches on the menu<aclass="headerlink"href="#place-the-item-for-the-legacy-sketches-on-the-menu"title="Permanent link">¶</a></h2>
<p>To implement this with your sketch, use only the <ahref="apiaux.html#autoconnectaux">AutoConnectAux</a> constructed with the title and URI of that page. <ahref="acelements.html">AutoConnectElements</a> is not required.</p>
<p>The AutoConnect library package contains an example sketch for ESP8266WebServer known as FSBrowser. Its example is a sample implementation that supports AutoConnect without changing the structure of the original FSBrowser and has the menu item for <strong>Edit</strong> and <strong>List</strong>.</p>
<p>The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows:</p>
<ol>
<li>Add AutoConnect declaration.</li>
@ -788,7 +788,7 @@
<li>According to the basic procedure of AutoConnect.<br>Establish a connection with <ahref="api.html#begin">AutoConnect::begin</a> and perform <ahref="api.html#handleclient">AutoConnect::handleClient</a> in <strong>loop()</strong>.</li>
</ol>
<p><iclass="fa fa-code"></i> <strong>Modification for FSBrowser</strong><small>(part of sketch code)</small></p>
<spanstyle="margin-right:6px;margin-top:2px;"><imgalign="middle"width="32"height="32"src="./images/arrow_down.png"></span><iclass="fa fa-code"></i> Exclude the JSON and replace to the AutoConnectElements natively</p>
<spanstyle="margin-right:6px;margin-top:2px;"><imgalign="middle"width="32"height="32"src="images/arrow_down.png"></span><iclass="fa fa-code"></i> Exclude the JSON and replace to the AutoConnectElements natively</p>
<divclass="codehilite"style="background: #272822"><prestyle="line-height: 125%"><span></span><spanstyle="color: #75715e">// In the declaration,</span>
<spanstyle="color: #75715e">// Declare AutoConnectElements for the page asf /mqtt_setting</span>
Hieromon Ikasamo
5 years ago