<!DOCTYPE html>
< 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" >
< meta name = "description" content = "ESP8266 WLAN configuration at run time with web interface" >
< link rel = "canonical" href = "https://Hieromon.github.io/AutoConnect/examples/index.html" >
< 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-0.17.3, mkdocs-material-2.7.0" >
< title > Examples - AutoConnect for ESP8266< / title >
< link rel = "stylesheet" href = "../assets/stylesheets/application.78aab2dc.css" >
< link rel = "stylesheet" href = "../assets/stylesheets/application-palette.6079476c.css" >
< script src = "../assets/javascripts/modernizr.1aa3b519.js" > < / script >
< link href = "https://fonts.gstatic.com" rel = "preconnect" crossorigin >
< 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 = "https://fonts.googleapis.com/icon?family=Material+Icons" >
< link rel = "stylesheet" href = "../css/paragraph.css" >
< / 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">
< 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" >
< input class = "md-toggle" data-md-toggle = "search" type = "checkbox" id = "search" >
< label class = "md-overlay" data-md-component = "overlay" for = "drawer" > < / label >
< a href = "#how-to-embed-the-autoconnect" 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" >
< a href = "https://Hieromon.github.io/AutoConnect/" title = "AutoConnect for ESP8266" class = "md-header-nav__button md-logo" >
< img src = "../images/arduino-logo.svg" width = "24" height = "24" >
< / 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 >
< / 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" >
AutoConnect for ESP8266
< / span >
< span class = "md-header-nav__topic" >
Examples
< / 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 >
< div class = "md-search" data-md-component = "search" role = "dialog" >
< label class = "md-search__overlay" for = "search" > < / label >
< 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 >
< button type = "reset" class = "md-icon md-search__icon" data-md-component = "reset" tabindex = "-1" >

< / 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 >
< / 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" >
< 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" >
Overview
< / a >
< / li >
< / 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" >
< span class = "md-nav__button md-logo" >
< img src = "../images/arduino-logo.svg" width = "48" height = "48" >
< / span >
AutoConnect for ESP8266
< / 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 >
< / 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" >
Overview
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "../gettingstarted/index.html" title = "Getting started" class = "md-nav__link" >
Getting started
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "../menu/index.html" title = "AutoConnect menu" class = "md-nav__link" >
AutoConnect menu
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "../basicusage/index.html" title = "Basic usage" class = "md-nav__link" >
Basic usage
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "../advancedusage/index.html" title = "Advanced usage" class = "md-nav__link" >
Advanced usage
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "../api/index.html" title = "Library APIs" class = "md-nav__link" >
Library APIs
< / 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" >
< label class = "md-nav__link md-nav__link--active" for = "toc" >
Examples
< / label >
< a href = "index.html" title = "Examples" class = "md-nav__link md-nav__link--active" >
Examples
< / a >
< nav class = "md-nav md-nav--secondary" >
< label class = "md-nav__title" for = "toc" > Table of contents< / label >
< ul class = "md-nav__list" data-md-scrollfix >
< li class = "md-nav__item" >
< a href = "#how-to-embed-the-autoconnect" title = "How to embed the AutoConnect" class = "md-nav__link" >
How to embed the AutoConnect
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#what-does-this-example-do" title = "What does this example do?" class = "md-nav__link" >
What does this example do?
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#embed-autoconnect" title = "Embed AutoConnect" class = "md-nav__link" >
Embed AutoConnect
< / a >
< nav class = "md-nav" >
< ul class = "md-nav__list" >
< li class = "md-nav__item" >
< a href = "#pattern-a" title = " Pattern A." class = "md-nav__link" >
Pattern A.
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#pattern-b" title = " Pattern B." class = "md-nav__link" >
Pattern B.
< / a >
< / li >
< / ul >
< / nav >
< / li >
< / ul >
< / nav >
< / li >
< li class = "md-nav__item" >
< a href = "../faq/index.html" title = "FAQ" class = "md-nav__link" >
FAQ
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "../changelog/index.html" title = "Change log" class = "md-nav__link" >
Change log
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "../license/index.html" title = "License" class = "md-nav__link" >
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 >
< ul class = "md-nav__list" data-md-scrollfix >
< li class = "md-nav__item" >
< a href = "#how-to-embed-the-autoconnect" title = "How to embed the AutoConnect" class = "md-nav__link" >
How to embed the AutoConnect
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#what-does-this-example-do" title = "What does this example do?" class = "md-nav__link" >
What does this example do?
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#embed-autoconnect" title = "Embed AutoConnect" class = "md-nav__link" >
Embed AutoConnect
< / a >
< nav class = "md-nav" >
< ul class = "md-nav__list" >
< li class = "md-nav__item" >
< a href = "#pattern-a" title = " Pattern A." class = "md-nav__link" >
Pattern A.
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#pattern-b" title = " Pattern B." class = "md-nav__link" >
Pattern B.
< / a >
< / li >
< / ul >
< / nav >
< / li >
< / ul >
< / nav >
< / div >
< / div >
< / div >
< div class = "md-content" >
< article class = "md-content__inner md-typeset" >
< h1 > Examples< / h1 >
< h2 id = "how-to-embed-the-autoconnect" > How to embed the AutoConnect< a class = "headerlink" href = "#how-to-embed-the-autoconnect" title = "Permanent link" > ¶ < / a > < / h2 >
< p > Here holds two case examples. Both examples perform the same function. Only how to incorporate the < strong > AutoConnect< / strong > into the sketch differs. Also included in the sample folder, HandlePortal.ino also shows how to use the < a href = "https://github.com/Hieromon/PageBuilder" > PageBuilder< / a > library for HTML assemblies.< / p >
< h2 id = "what-does-this-example-do" > What does this example do?< a class = "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 > < a href = "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 > < img data-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 >
< h2 id = "embed-autoconnect" > Embed AutoConnect< a class = "headerlink" href = "#embed-autoconnect" title = "Permanent link" > ¶ < / a > < / h2 >
< h3 id = "pattern-a" > < i class = "fa fa-code" aria-hidden = "true" > < / i > Pattern A.< a class = "headerlink" href = "#pattern-a" title = "Permanent link" > ¶ < / a > < / h3 >
< p > Bind to ESP8266WebServer, performs handleClient with handleRequest.< / p >
< p > < img src = "../images/handleClient.svg" / > < / p >
< div class = "admonition hint" >
< p class = "admonition-title" > In what situations should the handleRequest be used.< / p >
< p > It is something needs to be done immediately after the handle client. It is better to call only AutoConnect::handleClient whenever possible.< / p >
< / div >
< h3 id = "pattern-b" > < i class = "fa fa-code" aria-hidden = "true" > < / i > Pattern B.< a class = "headerlink" href = "#pattern-b" title = "Permanent link" > ¶ < / a > < / h3 >
< p > Declare only AutoConnect, performs handleClient.< / p >
< p > < img src = "../images/handlePortal.svg" / > < / p >
< script >
window.onload = function() {
Gifffer();
}
< / script >
< / article >
< / div >
< / div >
< / main >
< footer class = "md-footer" >
< div class = "md-footer-nav" >
< nav class = "md-footer-nav__inner md-grid" >
< a href = "../api/index.html" title = "Library APIs" class = "md-flex md-footer-nav__link md-footer-nav__link--prev" rel = "prev" >
< 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 >
Library APIs
< / span >
< / div >
< / a >
< a href = "../faq/index.html" title = "FAQ" class = "md-flex md-footer-nav__link md-footer-nav__link--next" rel = "next" >
< 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 >
FAQ
< / 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 © 2018 Hieromon Ikasamo
< / div >
powered by
< a href = "http://www.mkdocs.org" > MkDocs< / a >
and
< a href = "https://squidfunk.github.io/mkdocs-material/" >
Material for MkDocs< / a >
< / div >
< div class = "md-footer-social" >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >
< 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.8eb9be28.js" > < / script >
< script > app . initialize ( { version : "0.17.3" , url : { base : ".." } } ) < / script >
< script src = "../js/gifffer.min.js" > < / script >
< script > ! function ( e , a , t , n , o , c , i ) { e . GoogleAnalyticsObject = o , e . ga = e . ga || function ( ) { ( e . ga . q = e . ga . q || [ ] ) . push ( arguments ) } , e . ga . l = 1 * new Date , c = a . createElement ( t ) , i = a . getElementsByTagName ( t ) [ 0 ] , c . async = 1 , c . src = "https://www.google-analytics.com/analytics.js" , i . parentNode . insertBefore ( c , i ) } ( window , document , "script" , 0 , "ga" ) , ga ( "create" , "None" , "auto" ) , ga ( "set" , "anonymizeIp" , ! 0 ) , ga ( "send" , "pageview" ) ; var links = document . getElementsByTagName ( "a" ) ; if ( Array . prototype . map . call ( links , function ( e ) { e . host != document . location . host && e . addEventListener ( "click" , function ( ) { var a = e . getAttribute ( "data-md-action" ) || "follow" ; ga ( "send" , "event" , "outbound" , a , e . href ) } ) } ) , document . forms . search ) { var query = document . forms . search . query ; query . addEventListener ( "blur" , function ( ) { if ( this . value ) { var e = document . location . pathname ; ga ( "send" , "pageview" , e + "?q=" + this . value ) } } ) } < / script >
< / body >
< / html >
