You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
AutoConnect/docs/basicusage.html

1132 lines
38 KiB

7 years ago
<!doctype html>
7 years ago
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
6 years ago
<meta name="description" content="ESP8266/ESP32 WLAN configuration at run time with web interface">
7 years ago
<link rel="canonical" href="https://Hieromon.github.io/AutoConnect/basicusage.html">
7 years ago
<meta name="author" content="Hieromon Ikasamo">
<meta name="lang:clipboard.copy" content="Copy to clipboard">
<meta name="lang:clipboard.copied" content="Copied to clipboard">
<meta name="lang:search.language" content="en">
<meta name="lang:search.pipeline.stopwords" content="True">
<meta name="lang:search.pipeline.trimmer" content="True">
<meta name="lang:search.result.none" content="No matching documents">
<meta name="lang:search.result.one" content="1 matching document">
<meta name="lang:search.result.other" content="# matching documents">
<meta name="lang:search.tokenizer" content="[\s\-]+">
<link rel="shortcut icon" href="assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.0.4, mkdocs-material-3.3.0">
7 years ago
6 years ago
<title>Basic usage - AutoConnect for ESP8266/ESP32</title>
7 years ago
<link rel="stylesheet" href="assets/stylesheets/application.572ca0f0.css">
7 years ago
<link rel="stylesheet" href="assets/stylesheets/application-palette.22915126.css">
<meta name="theme-color" content="#3f51b5">
7 years ago
<script src="assets/javascripts/modernizr.962652e9.js"></script>
7 years ago
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
7 years ago
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono">
<style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style>
<link rel="stylesheet" href="assets/fonts/material-icons.css">
7 years ago
<link rel="stylesheet" href="css/paragraph.css">
<link rel="stylesheet" href="css/extra.css">
7 years ago
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
7 years ago
<script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","None")</script>
7 years ago
</head>
<body dir="ltr" data-md-color-primary="indigo" data-md-color-accent="indigo">
<svg class="md-svg">
<defs>
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448"
viewBox="0 0 416 448" id="__github">
7 years ago
<path fill="currentColor" d="M160 304q0 10-3.125 20.5t-10.75 19-18.125
8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5
18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75
19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19
18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360
304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25
2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8
38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0
37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25
82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75
1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75
0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25
30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5
46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34
99.5z" />
</svg>
</defs>
</svg>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
7 years ago
<a href="#simple-usage" tabindex="1" class="md-skip">
Skip to content
</a>
<header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid">
<div class="md-flex">
<div class="md-flex__cell md-flex__cell--shrink">
6 years ago
<a href="https://Hieromon.github.io/AutoConnect/" title="AutoConnect for ESP8266/ESP32" class="md-header-nav__button md-logo">
7 years ago
<img src="images/arduino-logo.svg" width="24" height="24">
7 years ago
</a>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
7 years ago
</div>
<div class="md-flex__cell md-flex__cell--stretch">
<div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
<span class="md-header-nav__topic">
6 years ago
AutoConnect for ESP8266/ESP32
7 years ago
</span>
<span class="md-header-nav__topic">
Basic usage
7 years ago
</span>
</div>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
7 years ago
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
7 years ago
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
<label class="md-icon md-search__icon" for="__search"></label>
7 years ago
<button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">
&#xE5CD;
</button>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="result">
<div class="md-search-result__meta">
Type to start searching
</div>
<ol class="md-search-result__list"></ol>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<div class="md-header-nav__source">
<a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-source="github">
<div class="md-source__icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#__github" width="24" height="24"></use>
7 years ago
</svg>
</div>
<div class="md-source__repository">
Hieromon/AutoConnect
</div>
</a>
</div>
</div>
</div>
</nav>
</header>
<div class="md-container">
<nav class="md-tabs" data-md-component="tabs">
7 years ago
<div class="md-tabs__inner md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="index.html" title="Overview" class="md-tabs__link md-tabs__link--active">
7 years ago
Overview
</a>
</li>
7 years ago
<li class="md-tabs__item">
<a href="acintro.html" title="Custom Web pages" class="md-tabs__link">
Custom Web pages
</a>
</li>
<li class="md-tabs__item">
<a href="api.html" title="Library APIs" class="md-tabs__link">
Library APIs
</a>
</li>
7 years ago
<li class="md-tabs__item">
<a href="howtoembed.html" title="Examples" class="md-tabs__link">
Examples
</a>
</li>
7 years ago
7 years ago
</ul>
</div>
</nav>
<main class="md-main">
<div class="md-main__inner md-grid" data-md-component="container">
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" data-md-level="0">
<label class="md-nav__title md-nav__title--site" for="__drawer">
<a href="https://Hieromon.github.io/AutoConnect/" title="AutoConnect for ESP8266/ESP32" class="md-nav__button md-logo">
7 years ago
<img src="images/arduino-logo.svg" width="48" height="48">
7 years ago
</a>
6 years ago
AutoConnect for ESP8266/ESP32
7 years ago
</label>
<div class="md-nav__source">
<a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-source="github">
<div class="md-source__icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#__github" width="24" height="24"></use>
7 years ago
</svg>
</div>
<div class="md-source__repository">
Hieromon/AutoConnect
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="index.html" title="Overview" class="md-nav__link">
7 years ago
Overview
</a>
</li>
<li class="md-nav__item">
<a href="gettingstarted.html" title="Getting started" class="md-nav__link">
7 years ago
Getting started
</a>
</li>
<li class="md-nav__item">
<a href="menu.html" title="AutoConnect menu" class="md-nav__link">
7 years ago
AutoConnect menu
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc">
7 years ago
<label class="md-nav__link md-nav__link--active" for="__toc">
Basic usage
7 years ago
</label>
<a href="basicusage.html" title="Basic usage" class="md-nav__link md-nav__link--active">
Basic usage
7 years ago
</a>
<nav class="md-nav md-nav--secondary">
<label class="md-nav__title" for="__toc">Table of contents</label>
7 years ago
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#simple-usage" title="Simple usage" class="md-nav__link">
Simple usage
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#embed-to-the-sketches" title=" Embed to the sketches" class="md-nav__link">
Embed to the sketches
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#basic-usage" title="Basic usage" class="md-nav__link">
Basic usage
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#basic-logic-sequence-for-the-user-sketches" title=" Basic logic sequence for the user sketches" class="md-nav__link">
Basic logic sequence for the user sketches
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-a-typical-logic-sequence" title="1. A typical logic sequence" class="md-nav__link">
1. A typical logic sequence
</a>
</li>
<li class="md-nav__item">
<a href="#2-declare-autoconnect-object" title="2. Declare AutoConnect object" class="md-nav__link">
2. Declare AutoConnect object
</a>
</li>
<li class="md-nav__item">
<a href="#3-no-need-wifibegin" title="3. No need WiFI.begin(...)" class="md-nav__link">
3. No need WiFI.begin(...)
</a>
</li>
<li class="md-nav__item">
6 years ago
<a href="#4-alternate-esp8266webserverbegin-and-webserverbegin" title="4. Alternate ESP8266WebServer::begin() and WebServer::begin()" class="md-nav__link">
4. Alternate ESP8266WebServer::begin() and WebServer::begin()
7 years ago
</a>
</li>
<li class="md-nav__item">
<a href="#5-autoconnectbegin-with-ssid-and-password" title="5. AutoConnect::begin with SSID and Password" class="md-nav__link">
5. AutoConnect::begin with SSID and Password
</a>
</li>
<li class="md-nav__item">
6 years ago
<a href="#6-use-esp8266webserveron-and-webserveron-to-handle-url" title="6. Use ESP8266WebServer::on and WebServer::on to handle URL" class="md-nav__link">
6. Use ESP8266WebServer::on and WebServer::on to handle URL
7 years ago
</a>
</li>
<li class="md-nav__item">
6 years ago
<a href="#7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient" title="7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()" class="md-nav__link">
7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()
7 years ago
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
6 years ago
<a href="#esp8266webserverwebserver-hosted-or-parasitic" title=" ESP8266WebServer/WebServer hosted or parasitic" class="md-nav__link">
ESP8266WebServer/WebServer hosted or parasitic
7 years ago
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="advancedusage.html" title="Advanced usage" class="md-nav__link">
Advanced usage
</a>
</li>
7 years ago
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6">
<label class="md-nav__link" for="nav-6">
Custom Web pages
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-6">
Custom Web pages
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="acintro.html" title="Custom Web pages with AutoConnect" class="md-nav__link">
Custom Web pages with AutoConnect
</a>
</li>
<li class="md-nav__item">
<a href="acelements.html" title="AutoConnectElements" class="md-nav__link">
AutoConnectElements
</a>
</li>
7 years ago
<li class="md-nav__item">
<a href="acjson.html" title="Custom Web pages with JSON" class="md-nav__link">
Custom Web pages with JSON
</a>
</li>
<li class="md-nav__item">
<a href="achandling.html" title="Handling the custom Web pages" class="md-nav__link">
Handling the custom Web pages
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<label class="md-nav__link" for="nav-7">
7 years ago
Library APIs
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-7">
Library APIs
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="api.html" title="AutoConnect API" class="md-nav__link">
AutoConnect API
</a>
</li>
<li class="md-nav__item">
<a href="apiaux.html" title="AutoConnectAux API" class="md-nav__link">
AutoConnectAux API
</a>
</li>
<li class="md-nav__item">
<a href="apiconfig.html" title="AutoConnectConfig API" class="md-nav__link">
AutoConnectConfig API
</a>
</li>
<li class="md-nav__item">
<a href="apielements.html" title="AutoConnectElements API" class="md-nav__link">
AutoConnectElements API
</a>
</li>
<li class="md-nav__item">
<a href="apiextra.html" title="Something extra" class="md-nav__link">
Something extra
7 years ago
</a>
</li>
</ul>
</nav>
</li>
7 years ago
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
<label class="md-nav__link" for="nav-8">
7 years ago
Examples
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-8">
Examples
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="howtoembed.html" title="How to embed" class="md-nav__link">
How to embed
7 years ago
</a>
</li>
<li class="md-nav__item">
<a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
Tips for data conversion
</a>
</li>
<li class="md-nav__item">
<a href="menuize.html" title="Constucting the menu" class="md-nav__link">
Constucting the menu
</a>
</li>
<li class="md-nav__item">
<a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">
Custom Web pages w/o JSON
</a>
</li>
</ul>
</nav>
</li>
7 years ago
<li class="md-nav__item">
<a href="faq.html" title="FAQ" class="md-nav__link">
7 years ago
FAQ
</a>
</li>
<li class="md-nav__item">
<a href="changelog.html" title="Change log" class="md-nav__link">
Change log
</a>
</li>
7 years ago
<li class="md-nav__item">
<a href="license.html" title="License" class="md-nav__link">
7 years ago
License
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary">
<label class="md-nav__title" for="__toc">Table of contents</label>
7 years ago
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#simple-usage" title="Simple usage" class="md-nav__link">
Simple usage
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#embed-to-the-sketches" title=" Embed to the sketches" class="md-nav__link">
Embed to the sketches
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#basic-usage" title="Basic usage" class="md-nav__link">
Basic usage
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#basic-logic-sequence-for-the-user-sketches" title=" Basic logic sequence for the user sketches" class="md-nav__link">
Basic logic sequence for the user sketches
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-a-typical-logic-sequence" title="1. A typical logic sequence" class="md-nav__link">
1. A typical logic sequence
</a>
</li>
<li class="md-nav__item">
<a href="#2-declare-autoconnect-object" title="2. Declare AutoConnect object" class="md-nav__link">
2. Declare AutoConnect object
</a>
</li>
<li class="md-nav__item">
<a href="#3-no-need-wifibegin" title="3. No need WiFI.begin(...)" class="md-nav__link">
3. No need WiFI.begin(...)
</a>
</li>
<li class="md-nav__item">
6 years ago
<a href="#4-alternate-esp8266webserverbegin-and-webserverbegin" title="4. Alternate ESP8266WebServer::begin() and WebServer::begin()" class="md-nav__link">
4. Alternate ESP8266WebServer::begin() and WebServer::begin()
7 years ago
</a>
</li>
<li class="md-nav__item">
<a href="#5-autoconnectbegin-with-ssid-and-password" title="5. AutoConnect::begin with SSID and Password" class="md-nav__link">
5. AutoConnect::begin with SSID and Password
</a>
</li>
<li class="md-nav__item">
6 years ago
<a href="#6-use-esp8266webserveron-and-webserveron-to-handle-url" title="6. Use ESP8266WebServer::on and WebServer::on to handle URL" class="md-nav__link">
6. Use ESP8266WebServer::on and WebServer::on to handle URL
7 years ago
</a>
</li>
<li class="md-nav__item">
6 years ago
<a href="#7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient" title="7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()" class="md-nav__link">
7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()
7 years ago
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
6 years ago
<a href="#esp8266webserverwebserver-hosted-or-parasitic" title=" ESP8266WebServer/WebServer hosted or parasitic" class="md-nav__link">
ESP8266WebServer/WebServer hosted or parasitic
7 years ago
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content">
<article class="md-content__inner md-typeset">
<h1>Basic usage</h1>
7 years ago
<h2 id="simple-usage">Simple usage<a class="headerlink" href="#simple-usage" title="Permanent link">&para;</a></h2>
<h3 id="embed-to-the-sketches"><i class="fa fa-edit"></i> Embed to the sketches<a class="headerlink" href="#embed-to-the-sketches" title="Permanent link">&para;</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><img src="./images/BeforeAfter.svg" /></p>
<ul class="ulsty-edit" style="list-style:none;">
<li>Insert <code class="codehilite"><span class="cp">#include</span> <span class="cpf">&lt;AutoConnect.h&gt;</span></code> to behind of <code class="codehilite"><span class="cp">#include</span> <span class="cpf">&lt;ESP8266WebServer.h&gt;</span></code>.</li>
<li>Insert <code class="codehilite"><span class="na">AutoConnect</span> <em>PORTAL(WEBSERVER);</em></code> to behind of <code class="codehilite"><span class="na">ESP8266WebServer</span> <em>WEBSERVER;</em></code> declaration.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup></li>
<li>Remove <code class="codehilite">WiFi.<span class="na">begin</span>(<em>SSID</em>,<em>PSK</em>)</code> and the subsequent logic for the connection status check.</li>
<li>Replace <code class="codehilite"><em>WEBSERVER</em>.<span class="na">begin</span><span class="p">()</span></code> to <code class="codehilite"><em>PORTAL</em>.<span class="na">begin</span><span class="p">()</span></code>.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup></li>
<li>Replace <code class="codehilite"><em>WEBSERVER</em>.<span class="na">handleClient</span><span class="p">()</span></code> to <code class="codehilite"><em>PORTAL</em>.<span class="na">handleClient</span><span class="p">()</span></code>.<sup id="fnref:3"><a class="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 <code class="codehilite"><em>PORTAL</em>.<span class="na">begin</span><span class="p">()</span></code> with <code class="codehilite">true</code> or <code class="codehilite">false</code>.</li>
</ul>
7 years ago
<h2 id="basic-usage">Basic usage<a class="headerlink" href="#basic-usage" title="Permanent link">&para;</a></h2>
<h3 id="basic-logic-sequence-for-the-user-sketches"><i class="fa fa-caret-right"></i> Basic logic sequence for the user sketches<a class="headerlink" href="#basic-logic-sequence-for-the-user-sketches" title="Permanent link">&para;</a></h3>
<h4 id="1-a-typical-logic-sequence">1. A typical logic sequence<a class="headerlink" href="#1-a-typical-logic-sequence" title="Permanent link">&para;</a></h4>
<div class="admonition note">
<ol>
<li><strong>Include headers,</strong> <code>ESP8266WebServer.h</code>/<code>WebServer.h</code> and <code>AutoConnect.h</code> </li>
6 years ago
<li><strong>Declare an ESP8266WebServer variable for ESP8266 or a WebServer variable for ESP32.</strong> </li>
<li><strong>Declare an AutoConnect variable.</strong> </li>
<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>
7 years ago
<li><strong>setup()</strong><br />
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 />
5.2 <strong>Starts </strong><code>AutoConnect::begin()</code><strong>.</strong><br />
5.3 <strong>Check WiFi connection status.</strong> </li>
7 years ago
<li><strong>loop()</strong><br />
6 years ago
6.1 <strong>Do the process for actual sketch.</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>
7 years ago
</ol>
</div>
<h4 id="2-declare-autoconnect-object">2. Declare AutoConnect object<a class="headerlink" href="#2-declare-autoconnect-object" title="Permanent link">&para;</a></h4>
<p><a href="#esp8266webserver-hosted-or-parasitic">Two options</a> are available for <a href="api.html#constructors">AutoConnect constructor</a>.</p>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">VARIABLE</span><span style="color: #f8f8f2">(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">ESP8266WebServer);</span> <span style="color: #75715e">// For ESP8266</span>
<span style="color: #f8f8f2">AutoConnect</span> <span style="color: #a6e22e">VARIABLE</span><span style="color: #f8f8f2">(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">WebServer);</span> <span style="color: #75715e">// For ESP32</span>
7 years ago
</pre></div>
or</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">VARIABLE;</span>
7 years ago
</pre></div>
<ul>
<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 <a href="menu.html">AutoConnect menu</a>.</p>
7 years ago
</li>
<li>
<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 <a href="api.html#begin"><em>AutoConnect::begin</em></a>.</p>
7 years ago
</li>
</ul>
<h4 id="3-no-need-wifibegin">3. No need WiFI.begin(...)<a class="headerlink" href="#3-no-need-wifibegin" title="Permanent link">&para;</a></h4>
<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>
6 years ago
<h4 id="4-alternate-esp8266webserverbegin-and-webserverbegin">4. Alternate ESP8266WebServer::begin() and WebServer::begin()<a class="headerlink" href="#4-alternate-esp8266webserverbegin-and-webserverbegin" title="Permanent link">&para;</a></h4>
<p><a href="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>
7 years ago
<div class="admonition info">
<p class="admonition-title">Why DNS Server starts</p>
6 years ago
<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>
7 years ago
</div>
<h4 id="5-autoconnectbegin-with-ssid-and-password">5. AutoConnect::begin with SSID and Password<a class="headerlink" href="#5-autoconnectbegin-with-ssid-and-password" title="Permanent link">&para;</a></h4>
<p>SSID and Password can also specify by <a href="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>
6 years ago
<h4 id="6-use-esp8266webserveron-and-webserveron-to-handle-url">6. Use ESP8266WebServer::on and WebServer::on to handle URL<a class="headerlink" href="#6-use-esp8266webserveron-and-webserveron-to-handle-url" title="Permanent link">&para;</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>
<h4 id="7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient">7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()<a class="headerlink" href="#7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient" title="Permanent link">&para;</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>
<h3 id="esp8266webserverwebserver-hosted-or-parasitic"><i class="fa fa-caret-right"></i> ESP8266WebServer/WebServer hosted or parasitic<a class="headerlink" href="#esp8266webserverwebserver-hosted-or-parasitic" title="Permanent link">&para;</a></h3>
<p>The interoperable process with an ESP8266WebServer/WebServer depends on the parameters of the <a href="api.html#constructors">AutoConnect constructor</a>.</p>
7 years ago
<table>
<thead>
<tr>
<th>Declaration parameter for the constructor</th>
6 years ago
<th>Use ESP8266WebServer::handleClient or WebServer::handleClient only</th>
7 years ago
<th>Use AutoConnect::handleClient</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="api.html#constructors">None</a></td>
<td>AutoConnect menu not available.<br>To use AutoConnect menu, need <a href="api.html#handlerequest">AutoConnect::handleRequest()</a>.<br>also to use ESP8266WebServer/WebServer natively, need <a href="api.html#host">AutoConnect::host()</a>.</td>
<td>AutoConnect menu available.<br>To use ESP8266WebServer/WebServer natively, need <a href="api.html#host">AutoConnect::host()</a>.</td>
7 years ago
</tr>
<tr>
<td><a href="api.html#withparameter">Reference to ESP8266WebServer/WebServer</a></td>
<td>AutoConnect menu not available.<br>To use AutoConnect menu, need <a href="api.html#handlerequest">AutoConnect::handleRequest()</a>.</td>
<td>AutoConnect menu available.</td>
7 years ago
</tr>
</tbody>
</table>
<ul>
<li>
<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 <a href="api.html#host"><em>AutoConnect::host</em></a> as API to get it after <a href="api.html#begin"><em>AutoConnect::begin</em></a> performed.</p>
7 years ago
</li>
<li>
6 years ago
<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>
7 years ago
</li>
<li>
<p><strong>In use ESP8266WebServer::handleClient()/WebServer::handleClient()</strong>: AutoConnect menu can be dispatched but not works normally. It is necessary to call <a href="api.html#void-handlerequest"><em>AutoConnect::handleRequest</em></a> after <em>ESP8255WebServer::handleClient</em>/<em>WebServer::handleClient</em> invoking.</p>
7 years ago
</li>
<li>
<p><strong>In use <a href="api.html#void-handleclient">AutoConnect::handleClient()</a></strong>: The handleClient() process and the AutoConnect menu is available without calling <em>ESP8266WebServer::handleClient</em>.</p>
7 years ago
</li>
</ul>
<div class="admonition info">
6 years ago
<p class="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 />
<a href="api.html#void-handleclient"><em>AutoConnect::handleClient</em></a> is equivalent <em>ESP8266WebServer::handleClient</em> and <em>WEbServer::handleClient</em> included <a href="api.html#void-handlerequest"><em>AutoConnect::handleRequest</em></a>.</p>
7 years ago
</div>
<div class="footnote">
<hr />
<ol>
<li id="fn:1">
<p>Each <em>VARIABLE</em> conforms to the actual declaration in the sketches.&#160;<a class="footnote-backref" href="#fnref:1" rev="footnote" title="Jump back to footnote 1 in the text">&#8617;</a></p>
</li>
<li id="fn:2">
<p>WiFi SSID and Password can be specified AutoConnect::begin() too.&#160;<a class="footnote-backref" href="#fnref:2" rev="footnote" title="Jump back to footnote 2 in the text">&#8617;</a></p>
</li>
<li id="fn:3">
<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>.&#160;<a class="footnote-backref" href="#fnref:3" rev="footnote" title="Jump back to footnote 3 in the text">&#8617;</a></p>
</li>
</ol>
</div>
7 years ago
</article>
</div>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid">
<a href="menu.html" title="AutoConnect menu" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
7 years ago
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
</div>
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Previous
</span>
AutoConnect menu
</span>
</div>
</a>
<a href="advancedusage.html" title="Advanced usage" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
7 years ago
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
Advanced usage
7 years ago
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
</div>
</a>
</nav>
</div>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-footer-copyright">
<div class="md-footer-copyright__highlight">
Copyright &copy; 2018-2019 Hieromon Ikasamo
7 years ago
</div>
powered by
<a href="https://www.mkdocs.org">MkDocs</a>
7 years ago
and
<a href="https://squidfunk.github.io/mkdocs-material/">
Material for MkDocs</a>
</div>
<div class="md-footer-social">
<link rel="stylesheet" href="assets/fonts/font-awesome.css">
7 years ago
<a href="https://github.com/Hieromon" class="md-footer-social__link fa fa-github"></a>
<a href="https://twitter.com/hieromon" class="md-footer-social__link fa fa-twitter"></a>
</div>
</div>
</div>
</footer>
</div>
<script src="assets/javascripts/application.a353778b.js"></script>
7 years ago
<script>app.initialize({version:"1.0.4",url:{base:"."}})</script>
7 years ago
<script src="js/gifffer.min.js"></script>
7 years ago
</body>
</html>