<ahref="https://Hieromon.github.io/AutoConnect/"title="AutoConnect for ESP8266/ESP32"aria-label="AutoConnect for ESP8266/ESP32"class="md-header-nav__button md-logo">
<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>
<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>
<li>Remove <codeclass="codehilite">WiFi.<spanclass="na">begin</span>(<em>SSID</em>,<em>PSK</em>)</code> and the subsequent logic for the connection status check.</li>
<li>Replace <codeclass="codehilite"><em>WEBSERVER</em>.<spanclass="na">begin</span><spanclass="p">()</span></code> to <codeclass="codehilite"><em>PORTAL</em>.<spanclass="na">begin</span><spanclass="p">()</span></code>.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup></li>
<li>Replace <codeclass="codehilite"><em>WEBSERVER</em>.<spanclass="na">handleClient</span><spanclass="p">()</span></code> to <codeclass="codehilite"><em>PORTAL</em>.<spanclass="na">handleClient</span><spanclass="p">()</span></code>.<supid="fnref:3"><aclass="footnote-ref"href="#fn:3"rel="footnote">3</a></sup></li>
<li>If the connection checks logic is needed, you can check the return value according to <codeclass="codehilite"><em>PORTAL</em>.<spanclass="na">begin</span><spanclass="p">()</span></code> with <codeclass="codehilite">true</code> or <codeclass="codehilite">false</code>.</li>
<h3id="basic-logic-sequence-for-the-user-sketches"><iclass="fa fa-caret-right"></i> Basic logic sequence for the user Sketches<aclass="headerlink"href="#basic-logic-sequence-for-the-user-sketches"title="Permanent link">¶</a></h3>
<li><strong>Implement the URL handlers provided for the </strong><code>on</code><strong> method of ESP8266WebServer/WebServer with the <em>function()</em>.</strong></li>
5.1 <strong>Sets URL handler the <em>function()</em> to ESP8266WebServer/WebServer by</strong><code>ESP8266WebServer::on</code><strong>/</strong><code>WebServer::on</code><strong>.</strong><br/>
6.2 <strong>Invokes </strong><code>AutoConnect::handleClient()</code><strong>, or invokes </strong><code>ESP8266WebServer::handleClient()</code><strong>/</strong><code>WebServer::handleClient</code><strong> then </strong><code>AutoConnect::handleRequest()</code><strong>.</strong></li>
<p><strong>The parameter with an ESP8266WebServer/WebServer variable:</strong> An ESP8266WebServer/WebServer object variable must be declared. AutoConnect uses its variable to handles the <ahref="menu.html">AutoConnect menu</a>.</p>
<p><strong>With no parameter:</strong> the Sketch does not declare ESP8266WebServer/WebServer object. In this case, AutoConnect allocates an instance of the ESP8266WebServer/WebServer internally. The logic sequence of the Sketch is somewhat different as the above. To register a URL handler function by <em>ESP8266WebServer::on</em> or <em>WebServer::on</em> should be performed after <ahref="api.html#begin"><em>AutoConnect::begin</em></a>.</p>
<p>AutoConnect internally performs <em>WiFi.begin</em> to establish a WiFi connection. There is no need for a general process to establish a connection using <em>WiFi.begin</em> with a Sketch code.</p>
<p><ahref="api.html#begin"><em>AutoConnect::begin</em></a> executes <em>ESP8266WebServer::begin</em>/<em>WebServer::begin</em> internally too and it starts the DNS server to behave as a Captive portal. So it is not needed to call <em>ESP8266WebServer::begin</em>/<em>WebServer::begin</em> in the Sketch.</p>
<p>AutoConnect traps the detection of the captive portal and achieves a connection with the WLAN interactively by the AutoConnect menu. It responds SoftAP address to all DNS queries temporarily to trap. Once a WiFi connection establishes, the DNS server contributed by AutoConnect stops.</p>
<h4id="5-autoconnectbegin-with-ssid-and-password">5. AutoConnect::begin with SSID and Password<aclass="headerlink"href="#5-autoconnectbegin-with-ssid-and-password"title="Permanent link">¶</a></h4>
<p>SSID and Password can also specify by <ahref="api.html#begin"><em>AutoConnect::begin</em></a>. ESP8266/ESP32 uses provided SSID and Password explicitly. If the connection false with specified SSID with Password then a captive portal is activated. SSID and Password are not present, ESP8266 SDK will attempt to connect using the still effectual SSID and password. Usually, it succeeds.</p>
<h4id="6-use-esp8266webserveron-and-webserveron-to-handle-url">6. Use ESP8266WebServer::on and WebServer::on to handle URL<aclass="headerlink"href="#6-use-esp8266webserveron-and-webserveron-to-handle-url"title="Permanent link">¶</a></h4>
<p>AutoConnect is designed to coexist with the process for handling the web pages by user Sketches. The page processing function which will send an HTML to the client invoked by the "<em>on::ESP8266WebServer</em>" or the "<em>on::WebServer</em>" function is the same as when using ESP8266WebServer/WebServer natively.</p>
<h4id="7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient">7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()<aclass="headerlink"href="#7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient"title="Permanent link">¶</a></h4>
<p>Both classes member function name is the same: <em>handleClient</em>, but the behavior is different. Using the AutoConnect embedded along with ESP8266WebServer::handleClient/WebServer::handleClient has limitations. Refer to the below section for details. </p>
<h3id="esp8266webserverwebserver-hosted-or-parasitic"><iclass="fa fa-caret-right"></i> ESP8266WebServer/WebServer hosted or parasitic<aclass="headerlink"href="#esp8266webserverwebserver-hosted-or-parasitic"title="Permanent link">¶</a></h3>
<p>The interoperable process with an ESP8266WebServer/WebServer depends on the parameters of the <ahref="api.html#constructors">AutoConnect constructor</a>.</p>
<td>AutoConnect menu not available.<br>To use AutoConnect menu, need <ahref="api.html#handlerequest">AutoConnect::handleRequest()</a>.<br>also to use ESP8266WebServer/WebServer natively, need <ahref="api.html#host">AutoConnect::host()</a>.</td>
<td>AutoConnect menu available.<br>To use ESP8266WebServer/WebServer natively, need <ahref="api.html#host">AutoConnect::host()</a>.</td>
<p><strong>By declaration for the AutoConnect variable with no parameter</strong>: The ESP8266WebServer/WebServer instance is hosted by AutoConnect automatically then the Sketches use <ahref="api.html#host"><em>AutoConnect::host</em></a> as API to get it after <ahref="api.html#begin"><em>AutoConnect::begin</em></a> performed.</p>
<p><strong>By declaration for the AutoConnect variable with the reference of ESP8266WebServer/WebServer</strong>: AutoConnect will use it. the Sketch can use it is too.</p>
<p><strong>In use ESP8266WebServer::handleClient()/WebServer::handleClient()</strong>: AutoConnect menu can be dispatched but not works normally. It is necessary to call <ahref="api.html#void-handlerequest"><em>AutoConnect::handleRequest</em></a> after <em>ESP8255WebServer::handleClient</em>/<em>WebServer::handleClient</em> invoking.</p>
<p><strong>In use <ahref="api.html#void-handleclient">AutoConnect::handleClient()</a></strong>: The handleClient() process and the AutoConnect menu is available without calling <em>ESP8266WebServer::handleClient</em>.</p>
<pclass="admonition-title">Why AutoConnect::handleRequest is needed when using ESP8266WebServer::handleClient/WebServer::handleClient</p>
<p>The AutoConnect menu function may affect WiFi connection state. It follows that the menu process must execute outside <em>ESP8266WebServer::handleClient</em> and <em>WebServer::handleClient</em>.<br/>
<ahref="api.html#void-handleclient"><em>AutoConnect::handleClient</em></a> is equivalent <em>ESP8266WebServer::handleClient</em> and <em>WEbServer::handleClient</em> included <ahref="api.html#void-handlerequest"><em>AutoConnect::handleRequest</em></a>.</p>
<p>Each <em>VARIABLE</em> conforms to the actual declaration in the Sketches. <aclass="footnote-backref"href="#fnref:1"title="Jump back to footnote 1 in the text">↩</a></p>
<p>WiFi SSID and Password can be specified AutoConnect::begin() too. <aclass="footnote-backref"href="#fnref:2"title="Jump back to footnote 2 in the text">↩</a></p>
<p>Replacement the <strong>handleClient</strong> method is not indispensable. AutoConnect can still connect with the captive portal as it is ESP8266WebServer::handleClient. But it can <strong>not valid AutoConnect menu</strong>. <aclass="footnote-backref"href="#fnref:3"title="Jump back to footnote 3 in the text">↩</a></p>
