Home Explore Help
Sign In
titi
/
ESP32_OSC_IMU
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
ESP32_OSC_IMU
/
lib
/
AutoConnect
/
docs
/
basicusage.html

basicusage.html 47 KB
Permalink History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286 
  1. 

  2. <!doctype html>
    3. 

  3. <html lang="en" class="no-js">
    4. 

  4.   <head>
    5. 

  5.     
    6. 

  6.       <meta charset="utf-8">
    7. 

  7.       <meta name="viewport" content="width=device-width,initial-scale=1">
    8. 

  8.       
    9. 

  9.         <meta name="description" content="ESP8266/ESP32 WLAN configuration at run time with web interface">
    10. 

  10.       
    11. 

  11.       
    12. 

  12.       
    13. 

  13.         <link rel="canonical" href="https://Hieromon.github.io/AutoConnect/basicusage.html">
    14. 

  14.       
    15. 

  15.       
    16. 

  16.         <meta name="author" content="Hieromon Ikasamo">
    17. 

  17.       
    18. 

  18.       <link rel="shortcut icon" href="assets/images/favicon.png">
    19. 

  19.       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-6.1.6">
    20. 

  20.     
    21. 

  21.     
    22. 

  22.       
    23. 

  23.         <title>Basic usage - AutoConnect for ESP8266/ESP32</title>
    24. 

  24.       
    25. 

  25.     
    26. 

  26.     
    27. 

  27.       <link rel="stylesheet" href="assets/stylesheets/main.6910b76c.min.css">
    28. 

  28.       
    29. 

  29.         
    30. 

  30.         <link rel="stylesheet" href="assets/stylesheets/palette.196e0c26.min.css">
    31. 

  31.         
    32. 

  32.           
    33. 

  33.           
    34. 

  34.           <meta name="theme-color" content="#4051b5">
    35. 

  35.         
    36. 

  36.       
    37. 

  37.     
    38. 

  38.     
    39. 

  39.     
    40. 

  40.       
    41. 

  41.         
    42. 

  42.         <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
    43. 

  43.         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700%7CRoboto+Mono&display=fallback">
    44. 

  44.         <style>body,input{font-family:"Roboto",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono",SFMono-Regular,Consolas,Menlo,monospace}</style>
    45. 

  45.       
    46. 

  46.     
    47. 

  47.     
    48. 

  48.     
    49. 

  49.       <link rel="stylesheet" href="css/paragraph.css">
    50. 

  50.     
    51. 

  51.       <link rel="stylesheet" href="css/extra.css">
    52. 

  52.     
    53. 

  53.       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    54. 

  54.     
    55. 

  55.     
    56. 

  56.       
    57. 

  57.         
    58. 

  58. <script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-116150854-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){if(this.value){var e=document.location.pathname;ga("send","pageview",e+"?q="+this.value)}})}),document.addEventListener("DOMContentSwitch",function(){ga("send","pageview",document.location.pathname)})</script>
    59. 

  59. <script async src="https://www.google-analytics.com/analytics.js"></script>
    60. 

  60.       
    61. 

  61.     
    62. 

  62.     
    63. 

  63.   </head>
    64. 

  64.   
    65. 

  65.   
    66. 

  66.     
    67. 

  67.     
    68. 

  68.     
    69. 

  69.     
    70. 

  70.     
    71. 

  71.     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="indigo" data-md-color-accent="indigo">
    72. 

  72.       
    73. 

  73.   
    74. 

  74.     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    75. 

  75.     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    76. 

  76.     <label class="md-overlay" for="__drawer"></label>
    77. 

  77.     <div data-md-component="skip">
    78. 

  78.       
    79. 

  79.         
    80. 

  80.         <a href="#simple-usage" class="md-skip">
    81. 

  81.           Skip to content
    82. 

  82.         </a>
    83. 

  83.       
    84. 

  84.     </div>
    85. 

  85.     <div data-md-component="announce">
    86. 

  86.       
    87. 

  87.     </div>
    88. 

  88.     
    89. 

  89.       
    90. 

  90. 

  91. <header class="md-header" data-md-component="header">
    92. 

  92.   <nav class="md-header-nav md-grid" aria-label="Header">
    93. 

  93.     <a href="https://Hieromon.github.io/AutoConnect/" title="AutoConnect for ESP8266/ESP32" class="md-header-nav__button md-logo" aria-label="AutoConnect for ESP8266/ESP32">
    94. 

  94.       
    95. 

  95.   <img src="images/arduino-logo.svg" alt="logo">
    96. 

  96. 

  97.     </a>
    98. 

  98.     <label class="md-header-nav__button md-icon" for="__drawer">
    99. 

  99.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
    100. 

  100.     </label>
    101. 

  101.     <div class="md-header-nav__title" data-md-component="header-title">
    102. 

  102.       
    103. 

  103.         <div class="md-header-nav__ellipsis">
    104. 

  104.           <span class="md-header-nav__topic md-ellipsis">
    105. 

  105.             AutoConnect for ESP8266/ESP32
    106. 

  106.           </span>
    107. 

  107.           <span class="md-header-nav__topic md-ellipsis">
    108. 

  108.             
    109. 

  109.               Basic usage
    110. 

  110.             
    111. 

  111.           </span>
    112. 

  112.         </div>
    113. 

  113.       
    114. 

  114.     </div>
    115. 

  115.     
    116. 

  116.       <label class="md-header-nav__button md-icon" for="__search">
    117. 

  117.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0116 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 019.5 16 6.5 6.5 0 013 9.5 6.5 6.5 0 019.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
    118. 

  118.       </label>
    119. 

  119.       
    120. 

  120. <div class="md-search" data-md-component="search" role="dialog">
    121. 

  121.   <label class="md-search__overlay" for="__search"></label>
    122. 

  122.   <div class="md-search__inner" role="search">
    123. 

  123.     <form class="md-search__form" name="search">
    124. 

  124.       <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
    125. 

  125.       <label class="md-search__icon md-icon" for="__search">
    126. 

  126.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0116 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 019.5 16 6.5 6.5 0 013 9.5 6.5 6.5 0 019.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
    127. 

  127.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
    128. 

  128.       </label>
    129. 

  129.       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" data-md-component="search-reset" tabindex="-1">
    130. 

  130.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
    131. 

  131.       </button>
    132. 

  132.     </form>
    133. 

  133.     <div class="md-search__output">
    134. 

  134.       <div class="md-search__scrollwrap" data-md-scrollfix>
    135. 

  135.         <div class="md-search-result" data-md-component="search-result">
    136. 

  136.           <div class="md-search-result__meta">
    137. 

  137.             Initializing search
    138. 

  138.           </div>
    139. 

  139.           <ol class="md-search-result__list"></ol>
    140. 

  140.         </div>
    141. 

  141.       </div>
    142. 

  142.     </div>
    143. 

  143.   </div>
    144. 

  144. </div>
    145. 

  145.     
    146. 

  146.     
    147. 

  147.       <div class="md-header-nav__source">
    148. 

  148.         
    149. 

  149. <a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source">
    150. 

  150.   <div class="md-source__icon md-icon">
    151. 

  151.     
    152. 

  152.     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05L244 40.45a28.87 28.87 0 00-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 01-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 000 40.81l195.61 195.6a28.86 28.86 0 0040.8 0l194.69-194.69a28.86 28.86 0 000-40.81z"/></svg>
    153. 

  153.   </div>
    154. 

  154.   <div class="md-source__repository">
    155. 

  155.     Hieromon/AutoConnect
    156. 

  156.   </div>
    157. 

  157. </a>
    158. 

  158.       </div>
    159. 

  159.     
    160. 

  160.   </nav>
    161. 

  161. </header>
    162. 

  162.     
    163. 

  163.     <div class="md-container" data-md-component="container">
    164. 

  164.       
    165. 

  165.       
    166. 

  166.         
    167. 

  167.       
    168. 

  168.       <main class="md-main" data-md-component="main">
    169. 

  169.         <div class="md-main__inner md-grid">
    170. 

  170.           
    171. 

  171.             
    172. 

  172.               <div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
    173. 

  173.                 <div class="md-sidebar__scrollwrap">
    174. 

  174.                   <div class="md-sidebar__inner">
    175. 

  175.                     
    176. 

  176. 

  177. <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
    178. 

  178.   <label class="md-nav__title" for="__drawer">
    179. 

  179.     <a href="https://Hieromon.github.io/AutoConnect/" title="AutoConnect for ESP8266/ESP32" class="md-nav__button md-logo" aria-label="AutoConnect for ESP8266/ESP32">
    180. 

  180.       
    181. 

  181.   <img src="images/arduino-logo.svg" alt="logo">
    182. 

  182. 

  183.     </a>
    184. 

  184.     AutoConnect for ESP8266/ESP32
    185. 

  185.   </label>
    186. 

  186.   
    187. 

  187.     <div class="md-nav__source">
    188. 

  188.       
    189. 

  189. <a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source">
    190. 

  190.   <div class="md-source__icon md-icon">
    191. 

  191.     
    192. 

  192.     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05L244 40.45a28.87 28.87 0 00-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 01-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 000 40.81l195.61 195.6a28.86 28.86 0 0040.8 0l194.69-194.69a28.86 28.86 0 000-40.81z"/></svg>
    193. 

  193.   </div>
    194. 

  194.   <div class="md-source__repository">
    195. 

  195.     Hieromon/AutoConnect
    196. 

  196.   </div>
    197. 

  197. </a>
    198. 

  198.     </div>
    199. 

  199.   
    200. 

  200.   <ul class="md-nav__list" data-md-scrollfix>
    201. 

  201.     
    202. 

  202.       
    203. 

  203.       
    204. 

  204.       
    205. 

  205. 

  206. 

  207.   <li class="md-nav__item">
    208. 

  208.     <a href="index.html" class="md-nav__link">
    209. 

  209.       Overview
    210. 

  210.     </a>
    211. 

  211.   </li>
    212. 

  212. 

  213.     
    214. 

  214.       
    215. 

  215.       
    216. 

  216.       
    217. 

  217. 

  218. 

  219.   <li class="md-nav__item">
    220. 

  220.     <a href="gettingstarted.html" class="md-nav__link">
    221. 

  221.       Getting started
    222. 

  222.     </a>
    223. 

  223.   </li>
    224. 

  224. 

  225.     
    226. 

  226.       
    227. 

  227.       
    228. 

  228.       
    229. 

  229. 

  230. 

  231.   <li class="md-nav__item">
    232. 

  232.     <a href="menu.html" class="md-nav__link">
    233. 

  233.       AutoConnect menu
    234. 

  234.     </a>
    235. 

  235.   </li>
    236. 

  236. 

  237.     
    238. 

  238.       
    239. 

  239.       
    240. 

  240.       
    241. 

  241. 

  242.   
    243. 

  243. 

  244. 

  245.   <li class="md-nav__item md-nav__item--active">
    246. 

  246.     
    247. 

  247.     <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
    248. 

  248.     
    249. 

  249.     
    250. 

  250.       <label class="md-nav__link md-nav__link--active" for="__toc">
    251. 

  251.         Basic usage
    252. 

  252.         <span class="md-nav__icon md-icon"></span>
    253. 

  253.       </label>
    254. 

  254.     
    255. 

  255.     <a href="basicusage.html" class="md-nav__link md-nav__link--active">
    256. 

  256.       Basic usage
    257. 

  257.     </a>
    258. 

  258.     
    259. 

  259.       
    260. 

  260. <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
    261. 

  261.   
    262. 

  262.   
    263. 

  263.   
    264. 

  264.     <label class="md-nav__title" for="__toc">
    265. 

  265.       <span class="md-nav__icon md-icon"></span>
    266. 

  266.       Table of contents
    267. 

  267.     </label>
    268. 

  268.     <ul class="md-nav__list" data-md-scrollfix>
    269. 

  269.       
    270. 

  270.         <li class="md-nav__item">
    271. 

  271.   <a href="#simple-usage" class="md-nav__link">
    272. 

  272.     Simple usage
    273. 

  273.   </a>
    274. 

  274.   
    275. 

  275.     <nav class="md-nav" aria-label="Simple usage">
    276. 

  276.       <ul class="md-nav__list">
    277. 

  277.         
    278. 

  278.           <li class="md-nav__item">
    279. 

  279.   <a href="#embed-to-the-sketches" class="md-nav__link">
    280. 

  280.      Embed to the Sketches
    281. 

  281.   </a>
    282. 

  282.   
    283. 

  283. </li>
    284. 

  284.         
    285. 

  285.       </ul>
    286. 

  286.     </nav>
    287. 

  287.   
    288. 

  288. </li>
    289. 

  289.       
    290. 

  290.         <li class="md-nav__item">
    291. 

  291.   <a href="#basic-usage" class="md-nav__link">
    292. 

  292.     Basic usage
    293. 

  293.   </a>
    294. 

  294.   
    295. 

  295.     <nav class="md-nav" aria-label="Basic usage">
    296. 

  296.       <ul class="md-nav__list">
    297. 

  297.         
    298. 

  298.           <li class="md-nav__item">
    299. 

  299.   <a href="#basic-logic-sequence-for-the-user-sketches" class="md-nav__link">
    300. 

  300.      Basic logic sequence for the user Sketches
    301. 

  301.   </a>
    302. 

  302.   
    303. 

  303.     <nav class="md-nav" aria-label=" Basic logic sequence for the user Sketches">
    304. 

  304.       <ul class="md-nav__list">
    305. 

  305.         
    306. 

  306.           <li class="md-nav__item">
    307. 

  307.   <a href="#1-a-typical-logic-sequence" class="md-nav__link">
    308. 

  308.     1. A typical logic sequence
    309. 

  309.   </a>
    310. 

  310.   
    311. 

  311. </li>
    312. 

  312.         
    313. 

  313.           <li class="md-nav__item">
    314. 

  314.   <a href="#2-declare-autoconnect-object" class="md-nav__link">
    315. 

  315.     2. Declare AutoConnect object
    316. 

  316.   </a>
    317. 

  317.   
    318. 

  318. </li>
    319. 

  319.         
    320. 

  320.           <li class="md-nav__item">
    321. 

  321.   <a href="#3-no-need-wifibegin" class="md-nav__link">
    322. 

  322.     3. No need WiFI.begin(...)
    323. 

  323.   </a>
    324. 

  324.   
    325. 

  325. </li>
    326. 

  326.         
    327. 

  327.           <li class="md-nav__item">
    328. 

  328.   <a href="#4-alternate-esp8266webserverbegin-and-webserverbegin" class="md-nav__link">
    329. 

  329.     4. Alternate ESP8266WebServer::begin() and WebServer::begin()
    330. 

  330.   </a>
    331. 

  331.   
    332. 

  332. </li>
    333. 

  333.         
    334. 

  334.           <li class="md-nav__item">
    335. 

  335.   <a href="#5-autoconnectbegin-with-ssid-and-password" class="md-nav__link">
    336. 

  336.     5. AutoConnect::begin with SSID and Password
    337. 

  337.   </a>
    338. 

  338.   
    339. 

  339. </li>
    340. 

  340.         
    341. 

  341.           <li class="md-nav__item">
    342. 

  342.   <a href="#6-use-esp8266webserveron-and-webserveron-to-handle-url" class="md-nav__link">
    343. 

  343.     6. Use ESP8266WebServer::on and WebServer::on to handle URL
    344. 

  344.   </a>
    345. 

  345.   
    346. 

  346. </li>
    347. 

  347.         
    348. 

  348.           <li class="md-nav__item">
    349. 

  349.   <a href="#7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient" class="md-nav__link">
    350. 

  350.     7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()
    351. 

  351.   </a>
    352. 

  352.   
    353. 

  353. </li>
    354. 

  354.         
    355. 

  355.       </ul>
    356. 

  356.     </nav>
    357. 

  357.   
    358. 

  358. </li>
    359. 

  359.         
    360. 

  360.           <li class="md-nav__item">
    361. 

  361.   <a href="#esp8266webserverwebserver-hosted-or-parasitic" class="md-nav__link">
    362. 

  362.      ESP8266WebServer/WebServer hosted or parasitic
    363. 

  363.   </a>
    364. 

  364.   
    365. 

  365. </li>
    366. 

  366.         
    367. 

  367.       </ul>
    368. 

  368.     </nav>
    369. 

  369.   
    370. 

  370. </li>
    371. 

  371.       
    372. 

  372.     </ul>
    373. 

  373.   
    374. 

  374. </nav>
    375. 

  375.     
    376. 

  376.   </li>
    377. 

  377. 

  378.     
    379. 

  379.       
    380. 

  380.       
    381. 

  381.       
    382. 

  382. 

  383. 

  384.   <li class="md-nav__item md-nav__item--nested">
    385. 

  385.     
    386. 

  386.     <input class="md-nav__toggle md-toggle" data-md-toggle="nav-5" type="checkbox" id="nav-5" >
    387. 

  387.     <label class="md-nav__link" for="nav-5">
    388. 

  388.       Advanced usage
    389. 

  389.       <span class="md-nav__icon md-icon"></span>
    390. 

  390.     </label>
    391. 

  391.     <nav class="md-nav" aria-label="Advanced usage" data-md-level="1">
    392. 

  392.       <label class="md-nav__title" for="nav-5">
    393. 

  393.         <span class="md-nav__icon md-icon"></span>
    394. 

  394.         Advanced usage
    395. 

  395.       </label>
    396. 

  396.       <ul class="md-nav__list" data-md-scrollfix>
    397. 

  397.         
    398. 

  398.         
    399. 

  399.           
    400. 

  400.           
    401. 

  401.           
    402. 

  402. 

  403. 

  404.   <li class="md-nav__item">
    405. 

  405.     <a href="advancedusage.html" class="md-nav__link">
    406. 

  406.       Advanced usage
    407. 

  407.     </a>
    408. 

  408.   </li>
    409. 

  409. 

  410.         
    411. 

  411.           
    412. 

  412.           
    413. 

  413.           
    414. 

  414. 

  415. 

  416.   <li class="md-nav__item">
    417. 

  417.     <a href="adconnection.html" class="md-nav__link">
    418. 

  418.       AutoConnect WiFi connection control
    419. 

  419.     </a>
    420. 

  420.   </li>
    421. 

  421. 

  422.         
    423. 

  423.           
    424. 

  424.           
    425. 

  425.           
    426. 

  426. 

  427. 

  428.   <li class="md-nav__item">
    429. 

  429.     <a href="adcpcontrol.html" class="md-nav__link">
    430. 

  430.       Captive portal control
    431. 

  431.     </a>
    432. 

  432.   </li>
    433. 

  433. 

  434.         
    435. 

  435.           
    436. 

  436.           
    437. 

  437.           
    438. 

  438. 

  439. 

  440.   <li class="md-nav__item">
    441. 

  441.     <a href="adnetwork.html" class="md-nav__link">
    442. 

  442.       Settings and controls for network and WiFi
    443. 

  443.     </a>
    444. 

  444.   </li>
    445. 

  445. 

  446.         
    447. 

  447.           
    448. 

  448.           
    449. 

  449.           
    450. 

  450. 

  451. 

  452.   <li class="md-nav__item">
    453. 

  453.     <a href="adauthentication.html" class="md-nav__link">
    454. 

  454.       Authentication settings
    455. 

  455.     </a>
    456. 

  456.   </li>
    457. 

  457. 

  458.         
    459. 

  459.           
    460. 

  460.           
    461. 

  461.           
    462. 

  462. 

  463. 

  464.   <li class="md-nav__item">
    465. 

  465.     <a href="adcredential.html" class="md-nav__link">
    466. 

  466.       Credential accesses
    467. 

  467.     </a>
    468. 

  468.   </li>
    469. 

  469. 

  470.         
    471. 

  471.           
    472. 

  472.           
    473. 

  473.           
    474. 

  474. 

  475. 

  476.   <li class="md-nav__item">
    477. 

  477.     <a href="adexterior.html" class="md-nav__link">
    478. 

  478.       Customizing page appearance
    479. 

  479.     </a>
    480. 

  480.   </li>
    481. 

  481. 

  482.         
    483. 

  483.           
    484. 

  484.           
    485. 

  485.           
    486. 

  486. 

  487. 

  488.   <li class="md-nav__item">
    489. 

  489.     <a href="adothers.html" class="md-nav__link">
    490. 

  490.       Other operation settings and controls
    491. 

  491.     </a>
    492. 

  492.   </li>
    493. 

  493. 

  494.         
    495. 

  495.       </ul>
    496. 

  496.     </nav>
    497. 

  497.   </li>
    498. 

  498. 

  499.     
    500. 

  500.       
    501. 

  501.       
    502. 

  502.       
    503. 

  503. 

  504. 

  505.   <li class="md-nav__item md-nav__item--nested">
    506. 

  506.     
    507. 

  507.     <input class="md-nav__toggle md-toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6" >
    508. 

  508.     <label class="md-nav__link" for="nav-6">
    509. 

  509.       Custom Web pages
    510. 

  510.       <span class="md-nav__icon md-icon"></span>
    511. 

  511.     </label>
    512. 

  512.     <nav class="md-nav" aria-label="Custom Web pages" data-md-level="1">
    513. 

  513.       <label class="md-nav__title" for="nav-6">
    514. 

  514.         <span class="md-nav__icon md-icon"></span>
    515. 

  515.         Custom Web pages
    516. 

  516.       </label>
    517. 

  517.       <ul class="md-nav__list" data-md-scrollfix>
    518. 

  518.         
    519. 

  519.         
    520. 

  520.           
    521. 

  521.           
    522. 

  522.           
    523. 

  523. 

  524. 

  525.   <li class="md-nav__item">
    526. 

  526.     <a href="acintro.html" class="md-nav__link">
    527. 

  527.       Custom Web pages with AutoConnect
    528. 

  528.     </a>
    529. 

  529.   </li>
    530. 

  530. 

  531.         
    532. 

  532.           
    533. 

  533.           
    534. 

  534.           
    535. 

  535. 

  536. 

  537.   <li class="md-nav__item">
    538. 

  538.     <a href="acelements.html" class="md-nav__link">
    539. 

  539.       AutoConnectElements
    540. 

  540.     </a>
    541. 

  541.   </li>
    542. 

  542. 

  543.         
    544. 

  544.           
    545. 

  545.           
    546. 

  546.           
    547. 

  547. 

  548. 

  549.   <li class="md-nav__item">
    550. 

  550.     <a href="acjson.html" class="md-nav__link">
    551. 

  551.       Custom Web pages with JSON
    552. 

  552.     </a>
    553. 

  553.   </li>
    554. 

  554. 

  555.         
    556. 

  556.           
    557. 

  557.           
    558. 

  558.           
    559. 

  559. 

  560. 

  561.   <li class="md-nav__item">
    562. 

  562.     <a href="achandling.html" class="md-nav__link">
    563. 

  563.       Handling the custom Web pages
    564. 

  564.     </a>
    565. 

  565.   </li>
    566. 

  566. 

  567.         
    568. 

  568.       </ul>
    569. 

  569.     </nav>
    570. 

  570.   </li>
    571. 

  571. 

  572.     
    573. 

  573.       
    574. 

  574.       
    575. 

  575.       
    576. 

  576. 

  577. 

  578.   <li class="md-nav__item md-nav__item--nested">
    579. 

  579.     
    580. 

  580.     <input class="md-nav__toggle md-toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7" >
    581. 

  581.     <label class="md-nav__link" for="nav-7">
    582. 

  582.       OTA Updates
    583. 

  583.       <span class="md-nav__icon md-icon"></span>
    584. 

  584.     </label>
    585. 

  585.     <nav class="md-nav" aria-label="OTA Updates" data-md-level="1">
    586. 

  586.       <label class="md-nav__title" for="nav-7">
    587. 

  587.         <span class="md-nav__icon md-icon"></span>
    588. 

  588.         OTA Updates
    589. 

  589.       </label>
    590. 

  590.       <ul class="md-nav__list" data-md-scrollfix>
    591. 

  591.         
    592. 

  592.         
    593. 

  593.           
    594. 

  594.           
    595. 

  595.           
    596. 

  596. 

  597. 

  598.   <li class="md-nav__item">
    599. 

  599.     <a href="otaupdate.html" class="md-nav__link">
    600. 

  600.       OTA Updates
    601. 

  601.     </a>
    602. 

  602.   </li>
    603. 

  603. 

  604.         
    605. 

  605.           
    606. 

  606.           
    607. 

  607.           
    608. 

  608. 

  609. 

  610.   <li class="md-nav__item">
    611. 

  611.     <a href="otabrowser.html" class="md-nav__link">
    612. 

  612.       Using Web Browser
    613. 

  613.     </a>
    614. 

  614.   </li>
    615. 

  615. 

  616.         
    617. 

  617.           
    618. 

  618.           
    619. 

  619.           
    620. 

  620. 

  621. 

  622.   <li class="md-nav__item">
    623. 

  623.     <a href="otaserver.html" class="md-nav__link">
    624. 

  624.       Using Update Server
    625. 

  625.     </a>
    626. 

  626.   </li>
    627. 

  627. 

  628.         
    629. 

  629.       </ul>
    630. 

  630.     </nav>
    631. 

  631.   </li>
    632. 

  632. 

  633.     
    634. 

  634.       
    635. 

  635.       
    636. 

  636.       
    637. 

  637. 

  638. 

  639.   <li class="md-nav__item md-nav__item--nested">
    640. 

  640.     
    641. 

  641.     <input class="md-nav__toggle md-toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8" >
    642. 

  642.     <label class="md-nav__link" for="nav-8">
    643. 

  643.       Library APIs
    644. 

  644.       <span class="md-nav__icon md-icon"></span>
    645. 

  645.     </label>
    646. 

  646.     <nav class="md-nav" aria-label="Library APIs" data-md-level="1">
    647. 

  647.       <label class="md-nav__title" for="nav-8">
    648. 

  648.         <span class="md-nav__icon md-icon"></span>
    649. 

  649.         Library APIs
    650. 

  650.       </label>
    651. 

  651.       <ul class="md-nav__list" data-md-scrollfix>
    652. 

  652.         
    653. 

  653.         
    654. 

  654.           
    655. 

  655.           
    656. 

  656.           
    657. 

  657. 

  658. 

  659.   <li class="md-nav__item">
    660. 

  660.     <a href="api.html" class="md-nav__link">
    661. 

  661.       AutoConnect API
    662. 

  662.     </a>
    663. 

  663.   </li>
    664. 

  664. 

  665.         
    666. 

  666.           
    667. 

  667.           
    668. 

  668.           
    669. 

  669. 

  670. 

  671.   <li class="md-nav__item">
    672. 

  672.     <a href="apiaux.html" class="md-nav__link">
    673. 

  673.       AutoConnectAux API
    674. 

  674.     </a>
    675. 

  675.   </li>
    676. 

  676. 

  677.         
    678. 

  678.           
    679. 

  679.           
    680. 

  680.           
    681. 

  681. 

  682. 

  683.   <li class="md-nav__item">
    684. 

  684.     <a href="apiconfig.html" class="md-nav__link">
    685. 

  685.       AutoConnectConfig API
    686. 

  686.     </a>
    687. 

  687.   </li>
    688. 

  688. 

  689.         
    690. 

  690.           
    691. 

  691.           
    692. 

  692.           
    693. 

  693. 

  694. 

  695.   <li class="md-nav__item">
    696. 

  696.     <a href="apielements.html" class="md-nav__link">
    697. 

  697.       AutoConnectElements API
    698. 

  698.     </a>
    699. 

  699.   </li>
    700. 

  700. 

  701.         
    702. 

  702.           
    703. 

  703.           
    704. 

  704.           
    705. 

  705. 

  706. 

  707.   <li class="md-nav__item">
    708. 

  708.     <a href="apiupdate.html" class="md-nav__link">
    709. 

  709.       AutoConnectUpdate API
    710. 

  710.     </a>
    711. 

  711.   </li>
    712. 

  712. 

  713.         
    714. 

  714.           
    715. 

  715.           
    716. 

  716.           
    717. 

  717. 

  718. 

  719.   <li class="md-nav__item">
    720. 

  720.     <a href="apiextra.html" class="md-nav__link">
    721. 

  721.       Something extra
    722. 

  722.     </a>
    723. 

  723.   </li>
    724. 

  724. 

  725.         
    726. 

  726.       </ul>
    727. 

  727.     </nav>
    728. 

  728.   </li>
    729. 

  729. 

  730.     
    731. 

  731.       
    732. 

  732.       
    733. 

  733.       
    734. 

  734. 

  735. 

  736.   <li class="md-nav__item md-nav__item--nested">
    737. 

  737.     
    738. 

  738.     <input class="md-nav__toggle md-toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9" >
    739. 

  739.     <label class="md-nav__link" for="nav-9">
    740. 

  740.       Examples
    741. 

  741.       <span class="md-nav__icon md-icon"></span>
    742. 

  742.     </label>
    743. 

  743.     <nav class="md-nav" aria-label="Examples" data-md-level="1">
    744. 

  744.       <label class="md-nav__title" for="nav-9">
    745. 

  745.         <span class="md-nav__icon md-icon"></span>
    746. 

  746.         Examples
    747. 

  747.       </label>
    748. 

  748.       <ul class="md-nav__list" data-md-scrollfix>
    749. 

  749.         
    750. 

  750.         
    751. 

  751.           
    752. 

  752.           
    753. 

  753.           
    754. 

  754. 

  755. 

  756.   <li class="md-nav__item">
    757. 

  757.     <a href="howtoembed.html" class="md-nav__link">
    758. 

  758.       How to embed
    759. 

  759.     </a>
    760. 

  760.   </li>
    761. 

  761. 

  762.         
    763. 

  763.           
    764. 

  764.           
    765. 

  765.           
    766. 

  766. 

  767. 

  768.   <li class="md-nav__item">
    769. 

  769.     <a href="datatips.html" class="md-nav__link">
    770. 

  770.       Tips for data conversion
    771. 

  771.     </a>
    772. 

  772.   </li>
    773. 

  773. 

  774.         
    775. 

  775.           
    776. 

  776.           
    777. 

  777.           
    778. 

  778. 

  779. 

  780.   <li class="md-nav__item">
    781. 

  781.     <a href="menuize.html" class="md-nav__link">
    782. 

  782.       Attach the menus
    783. 

  783.     </a>
    784. 

  784.   </li>
    785. 

  785. 

  786.         
    787. 

  787.           
    788. 

  788.           
    789. 

  789.           
    790. 

  790. 

  791. 

  792.   <li class="md-nav__item">
    793. 

  793.     <a href="wojson.html" class="md-nav__link">
    794. 

  794.       Custom Web pages w/o JSON
    795. 

  795.     </a>
    796. 

  796.   </li>
    797. 

  797. 

  798.         
    799. 

  799.       </ul>
    800. 

  800.     </nav>
    801. 

  801.   </li>
    802. 

  802. 

  803.     
    804. 

  804.       
    805. 

  805.       
    806. 

  806.       
    807. 

  807. 

  808. 

  809.   <li class="md-nav__item md-nav__item--nested">
    810. 

  810.     
    811. 

  811.     <input class="md-nav__toggle md-toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10" >
    812. 

  812.     <label class="md-nav__link" for="nav-10">
    813. 

  813.       Appendix
    814. 

  814.       <span class="md-nav__icon md-icon"></span>
    815. 

  815.     </label>
    816. 

  816.     <nav class="md-nav" aria-label="Appendix" data-md-level="1">
    817. 

  817.       <label class="md-nav__title" for="nav-10">
    818. 

  818.         <span class="md-nav__icon md-icon"></span>
    819. 

  819.         Appendix
    820. 

  820.       </label>
    821. 

  821.       <ul class="md-nav__list" data-md-scrollfix>
    822. 

  822.         
    823. 

  823.         
    824. 

  824.           
    825. 

  825.           
    826. 

  826.           
    827. 

  827. 

  828. 

  829.   <li class="md-nav__item">
    830. 

  830.     <a href="lsbegin.html" class="md-nav__link">
    831. 

  831.       Inside AutoConnect::begin
    832. 

  832.     </a>
    833. 

  833.   </li>
    834. 

  834. 

  835.         
    836. 

  836.           
    837. 

  837.           
    838. 

  838.           
    839. 

  839. 

  840. 

  841.   <li class="md-nav__item">
    842. 

  842.     <a href="credit.html" class="md-nav__link">
    843. 

  843.       Saved credentials access
    844. 

  844.     </a>
    845. 

  845.   </li>
    846. 

  846. 

  847.         
    848. 

  848.           
    849. 

  849.           
    850. 

  850.           
    851. 

  851. 

  852. 

  853.   <li class="md-nav__item">
    854. 

  854.     <a href="acupload.html" class="md-nav__link">
    855. 

  855.       File upload handler
    856. 

  856.     </a>
    857. 

  857.   </li>
    858. 

  858. 

  859.         
    860. 

  860.           
    861. 

  861.           
    862. 

  862.           
    863. 

  863. 

  864. 

  865.   <li class="md-nav__item">
    866. 

  866.     <a href="colorized.html" class="md-nav__link">
    867. 

  867.       Custom colorized
    868. 

  868.     </a>
    869. 

  869.   </li>
    870. 

  870. 

  871.         
    872. 

  872.           
    873. 

  873.           
    874. 

  874.           
    875. 

  875. 

  876. 

  877.   <li class="md-nav__item">
    878. 

  878.     <a href="changelabel.html" class="md-nav__link">
    879. 

  879.       Change label text
    880. 

  880.     </a>
    881. 

  881.   </li>
    882. 

  882. 

  883.         
    884. 

  884.       </ul>
    885. 

  885.     </nav>
    886. 

  886.   </li>
    887. 

  887. 

  888.     
    889. 

  889.       
    890. 

  890.       
    891. 

  891.       
    892. 

  892. 

  893. 

  894.   <li class="md-nav__item">
    895. 

  895.     <a href="faq.html" class="md-nav__link">
    896. 

  896.       FAQ
    897. 

  897.     </a>
    898. 

  898.   </li>
    899. 

  899. 

  900.     
    901. 

  901.       
    902. 

  902.       
    903. 

  903.       
    904. 

  904. 

  905. 

  906.   <li class="md-nav__item">
    907. 

  907.     <a href="changelog.html" class="md-nav__link">
    908. 

  908.       Change log
    909. 

  909.     </a>
    910. 

  910.   </li>
    911. 

  911. 

  912.     
    913. 

  913.       
    914. 

  914.       
    915. 

  915.       
    916. 

  916. 

  917. 

  918.   <li class="md-nav__item">
    919. 

  919.     <a href="license.html" class="md-nav__link">
    920. 

  920.       License
    921. 

  921.     </a>
    922. 

  922.   </li>
    923. 

  923. 

  924.     
    925. 

  925.   </ul>
    926. 

  926. </nav>
    927. 

  927.                   </div>
    928. 

  928.                 </div>
    929. 

  929.               </div>
    930. 

  930.             
    931. 

  931.             
    932. 

  932.               <div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
    933. 

  933.                 <div class="md-sidebar__scrollwrap">
    934. 

  934.                   <div class="md-sidebar__inner">
    935. 

  935.                     
    936. 

  936. <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
    937. 

  937.   
    938. 

  938.   
    939. 

  939.   
    940. 

  940.     <label class="md-nav__title" for="__toc">
    941. 

  941.       <span class="md-nav__icon md-icon"></span>
    942. 

  942.       Table of contents
    943. 

  943.     </label>
    944. 

  944.     <ul class="md-nav__list" data-md-scrollfix>
    945. 

  945.       
    946. 

  946.         <li class="md-nav__item">
    947. 

  947.   <a href="#simple-usage" class="md-nav__link">
    948. 

  948.     Simple usage
    949. 

  949.   </a>
    950. 

  950.   
    951. 

  951.     <nav class="md-nav" aria-label="Simple usage">
    952. 

  952.       <ul class="md-nav__list">
    953. 

  953.         
    954. 

  954.           <li class="md-nav__item">
    955. 

  955.   <a href="#embed-to-the-sketches" class="md-nav__link">
    956. 

  956.      Embed to the Sketches
    957. 

  957.   </a>
    958. 

  958.   
    959. 

  959. </li>
    960. 

  960.         
    961. 

  961.       </ul>
    962. 

  962.     </nav>
    963. 

  963.   
    964. 

  964. </li>
    965. 

  965.       
    966. 

  966.         <li class="md-nav__item">
    967. 

  967.   <a href="#basic-usage" class="md-nav__link">
    968. 

  968.     Basic usage
    969. 

  969.   </a>
    970. 

  970.   
    971. 

  971.     <nav class="md-nav" aria-label="Basic usage">
    972. 

  972.       <ul class="md-nav__list">
    973. 

  973.         
    974. 

  974.           <li class="md-nav__item">
    975. 

  975.   <a href="#basic-logic-sequence-for-the-user-sketches" class="md-nav__link">
    976. 

  976.      Basic logic sequence for the user Sketches
    977. 

  977.   </a>
    978. 

  978.   
    979. 

  979.     <nav class="md-nav" aria-label=" Basic logic sequence for the user Sketches">
    980. 

  980.       <ul class="md-nav__list">
    981. 

  981.         
    982. 

  982.           <li class="md-nav__item">
    983. 

  983.   <a href="#1-a-typical-logic-sequence" class="md-nav__link">
    984. 

  984.     1. A typical logic sequence
    985. 

  985.   </a>
    986. 

  986.   
    987. 

  987. </li>
    988. 

  988.         
    989. 

  989.           <li class="md-nav__item">
    990. 

  990.   <a href="#2-declare-autoconnect-object" class="md-nav__link">
    991. 

  991.     2. Declare AutoConnect object
    992. 

  992.   </a>
    993. 

  993.   
    994. 

  994. </li>
    995. 

  995.         
    996. 

  996.           <li class="md-nav__item">
    997. 

  997.   <a href="#3-no-need-wifibegin" class="md-nav__link">
    998. 

  998.     3. No need WiFI.begin(...)
    999. 

  999.   </a>
    1000. 

  1000.   
    1001. 

  1001. </li>
    1002. 

  1002.         
    1003. 

  1003.           <li class="md-nav__item">
    1004. 

  1004.   <a href="#4-alternate-esp8266webserverbegin-and-webserverbegin" class="md-nav__link">
    1005. 

  1005.     4. Alternate ESP8266WebServer::begin() and WebServer::begin()
    1006. 

  1006.   </a>
    1007. 

  1007.   
    1008. 

  1008. </li>
    1009. 

  1009.         
    1010. 

  1010.           <li class="md-nav__item">
    1011. 

  1011.   <a href="#5-autoconnectbegin-with-ssid-and-password" class="md-nav__link">
    1012. 

  1012.     5. AutoConnect::begin with SSID and Password
    1013. 

  1013.   </a>
    1014. 

  1014.   
    1015. 

  1015. </li>
    1016. 

  1016.         
    1017. 

  1017.           <li class="md-nav__item">
    1018. 

  1018.   <a href="#6-use-esp8266webserveron-and-webserveron-to-handle-url" class="md-nav__link">
    1019. 

  1019.     6. Use ESP8266WebServer::on and WebServer::on to handle URL
    1020. 

  1020.   </a>
    1021. 

  1021.   
    1022. 

  1022. </li>
    1023. 

  1023.         
    1024. 

  1024.           <li class="md-nav__item">
    1025. 

  1025.   <a href="#7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient" class="md-nav__link">
    1026. 

  1026.     7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()
    1027. 

  1027.   </a>
    1028. 

  1028.   
    1029. 

  1029. </li>
    1030. 

  1030.         
    1031. 

  1031.       </ul>
    1032. 

  1032.     </nav>
    1033. 

  1033.   
    1034. 

  1034. </li>
    1035. 

  1035.         
    1036. 

  1036.           <li class="md-nav__item">
    1037. 

  1037.   <a href="#esp8266webserverwebserver-hosted-or-parasitic" class="md-nav__link">
    1038. 

  1038.      ESP8266WebServer/WebServer hosted or parasitic
    1039. 

  1039.   </a>
    1040. 

  1040.   
    1041. 

  1041. </li>
    1042. 

  1042.         
    1043. 

  1043.       </ul>
    1044. 

  1044.     </nav>
    1045. 

  1045.   
    1046. 

  1046. </li>
    1047. 

  1047.       
    1048. 

  1048.     </ul>
    1049. 

  1049.   
    1050. 

  1050. </nav>
    1051. 

  1051.                   </div>
    1052. 

  1052.                 </div>
    1053. 

  1053.               </div>
    1054. 

  1054.             
    1055. 

  1055.           
    1056. 

  1056.           <div class="md-content">
    1057. 

  1057.             <article class="md-content__inner md-typeset">
    1058. 

  1058.               
    1059. 

  1059.                 
    1060. 

  1060.                 
    1061. 

  1061.                   <h1>Basic usage</h1>
    1062. 

  1062.                 
    1063. 

  1063.                 <h2 id="simple-usage">Simple usage<a class="headerlink" href="#simple-usage" title="Permanent link">&para;</a></h2>
    1064. 

  1064. <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>
    1065. 

  1065. <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>
    1066. 

  1066. <p><img src="images/BeforeAfter.svg" /></p>
    1067. 

  1067. <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg></span> Insert <code class="highlight"><span class="cp">#include</span> <span class="cpf">&lt;AutoConnect.h&gt;</span></code> to behind of <code class="highlight"><span class="cp">#include</span> <span class="cpf">&lt;ESP8266WebServer.h&gt;</span></code>.</p>
    1068. 

  1068. <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg></span> Insert <code class="highlight"><span class="na">AutoConnect</span> <em>PORTAL(WEBSERVER);</em></code> to behind of <code class="highlight"><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></p>
    1069. 

  1069. <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg></span> Remove <code class="highlight">WiFi.<span class="na">begin</span>(<em>SSID</em>,<em>PSK</em>)</code> and the subsequent logic for the connection status check.</p>
    1070. 

  1070. <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg></span> Replace <code class="highlight"><em>WEBSERVER</em>.<span class="na">begin</span><span class="p">()</span></code> to <code class="highlight"><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></p>
    1071. 

  1071. <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg></span> Replace <code class="highlight"><em>WEBSERVER</em>.<span class="na">handleClient</span><span class="p">()</span></code> to <code class="highlight"><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></p>
    1072. 

  1072. <p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg></span> If the connection checks logic is needed, you can check the return value according to <code class="highlight"><em>PORTAL</em>.<span class="na">begin</span><span class="p">()</span></code> with <code class="highlight">true</code> or <code class="highlight">false</code>.</p>
    1073. 

  1073. <h2 id="basic-usage">Basic usage<a class="headerlink" href="#basic-usage" title="Permanent link">&para;</a></h2>
    1074. 

  1074. <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>
    1075. 

  1075. <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>
    1076. 

  1076. <div class="admonition note">
    1077. 

  1077. <ol>
    1078. 

  1078. <li><strong>Include headers,</strong> <code>ESP8266WebServer.h</code>/<code>WebServer.h</code> and <code>AutoConnect.h</code>  </li>
    1079. 

  1079. <li><strong>Declare an ESP8266WebServer variable for ESP8266 or a WebServer variable for ESP32.</strong>  </li>
    1080. 

  1080. <li><strong>Declare an AutoConnect variable.</strong>  </li>
    1081. 

  1081. <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>
    1082. 

  1082. <li><strong>setup()</strong><br />
    1083. 

  1083.    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 />
    1084. 

  1084.    5.2 <strong>Starts </strong><code>AutoConnect::begin()</code><strong>.</strong><br />
    1085. 

  1085.    5.3 <strong>Check WiFi connection status.</strong>  </li>
    1086. 

  1086. <li><strong>loop()</strong><br />
    1087. 

  1087.    6.1 <strong>Do the process for actual Sketch.</strong><br />
    1088. 

  1088.    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>
    1089. 

  1089. </ol>
    1090. 

  1090. </div>
    1091. 

  1091. <h4 id="2-declare-autoconnect-object">2. Declare AutoConnect object<a class="headerlink" href="#2-declare-autoconnect-object" title="Permanent link">&para;</a></h4>
    1092. 

  1092. <p><a href="#esp8266webserver-hosted-or-parasitic">Two options</a> are available for <a href="api.html#constructors">AutoConnect constructor</a>.</p>
    1093. 

  1093. <p><div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><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>
    1094. 

  1094. <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>
    1095. 

  1095. </code></pre></div>
    1096. 

  1096. or</p>
    1097. 

  1097. <div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><span style="color: #f8f8f2">AutoConnect</span> <span style="color: #f8f8f2">VARIABLE;</span>
    1098. 

  1098. </code></pre></div>
    1099. 

  1099. <ul>
    1100. 

  1100. <li>
    1101. 

  1101. <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>
    1102. 

  1102. </li>
    1103. 

  1103. <li>
    1104. 

  1104. <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>
    1105. 

  1105. </li>
    1106. 

  1106. </ul>
    1107. 

  1107. <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>
    1108. 

  1108. <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>
    1109. 

  1109. <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>
    1110. 

  1110. <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>
    1111. 

  1111. <div class="admonition info">
    1112. 

  1112. <p class="admonition-title">Why DNS Server starts</p>
    1113. 

  1113. <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>
    1114. 

  1114. </div>
    1115. 

  1115. <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>
    1116. 

  1116. <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>
    1117. 

  1117. <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>
    1118. 

  1118. <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>
    1119. 

  1119. <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>
    1120. 

  1120. <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>
    1121. 

  1121. <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>
    1122. 

  1122. <p>The interoperable process with an ESP8266WebServer/WebServer depends on the parameters of the <a href="api.html#constructors">AutoConnect constructor</a>.</p>
    1123. 

  1123. <table>
    1124. 

  1124. <thead>
    1125. 

  1125. <tr>
    1126. 

  1126. <th>Declaration parameter for the constructor</th>
    1127. 

  1127. <th>Use ESP8266WebServer::handleClient or WebServer::handleClient only</th>
    1128. 

  1128. <th>Use AutoConnect::handleClient</th>
    1129. 

  1129. </tr>
    1130. 

  1130. </thead>
    1131. 

  1131. <tbody>
    1132. 

  1132. <tr>
    1133. 

  1133. <td><a href="api.html#constructors">None</a></td>
    1134. 

  1134. <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>
    1135. 

  1135. <td>AutoConnect menu available.<br>To use ESP8266WebServer/WebServer natively, need <a href="api.html#host">AutoConnect::host()</a>.</td>
    1136. 

  1136. </tr>
    1137. 

  1137. <tr>
    1138. 

  1138. <td><a href="api.html#withparameter">Reference to ESP8266WebServer/WebServer</a></td>
    1139. 

  1139. <td>AutoConnect menu not available.<br>To use AutoConnect menu, need <a href="api.html#handlerequest">AutoConnect::handleRequest()</a>.</td>
    1140. 

  1140. <td>AutoConnect menu available.</td>
    1141. 

  1141. </tr>
    1142. 

  1142. </tbody>
    1143. 

  1143. </table>
    1144. 

  1144. <ul>
    1145. 

  1145. <li>
    1146. 

  1146. <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>
    1147. 

  1147. </li>
    1148. 

  1148. <li>
    1149. 

  1149. <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>
    1150. 

  1150. </li>
    1151. 

  1151. <li>
    1152. 

  1152. <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>
    1153. 

  1153. </li>
    1154. 

  1154. <li>
    1155. 

  1155. <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>
    1156. 

  1156. </li>
    1157. 

  1157. </ul>
    1158. 

  1158. <div class="admonition info">
    1159. 

  1159. <p class="admonition-title">Why AutoConnect::handleRequest is needed when using ESP8266WebServer::handleClient/WebServer::handleClient</p>
    1160. 

  1160. <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 />
    1161. 

  1161. <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>
    1162. 

  1162. </div>
    1163. 

  1163. <div class="footnote">
    1164. 

  1164. <hr />
    1165. 

  1165. <ol>
    1166. 

  1166. <li id="fn:1">
    1167. 

  1167. <p>Each <em>VARIABLE</em> conforms to the actual declaration in the Sketches.&#160;<a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">&#8617;</a></p>
    1168. 

  1168. </li>
    1169. 

  1169. <li id="fn:2">
    1170. 

  1170. <p>WiFi SSID and Password can be specified AutoConnect::begin() too.&#160;<a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">&#8617;</a></p>
    1171. 

  1171. </li>
    1172. 

  1172. <li id="fn:3">
    1173. 

  1173. <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" title="Jump back to footnote 3 in the text">&#8617;</a></p>
    1174. 

  1174. </li>
    1175. 

  1175. </ol>
    1176. 

  1176. </div>
    1177. 

  1177.                 
    1178. 

  1178.               
    1179. 

  1179.               
    1180. 

  1180.                 
    1181. 

  1181. 

  1182. 

  1183.               
    1184. 

  1184.             </article>
    1185. 

  1185.           </div>
    1186. 

  1186.         </div>
    1187. 

  1187.       </main>
    1188. 

  1188.       
    1189. 

  1189.         
    1190. 

  1190. <footer class="md-footer">
    1191. 

  1191.   
    1192. 

  1192.     <div class="md-footer-nav">
    1193. 

  1193.       <nav class="md-footer-nav__inner md-grid" aria-label="Footer">
    1194. 

  1194.         
    1195. 

  1195.           <a href="menu.html" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
    1196. 

  1196.             <div class="md-footer-nav__button md-icon">
    1197. 

  1197.               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
    1198. 

  1198.             </div>
    1199. 

  1199.             <div class="md-footer-nav__title">
    1200. 

  1200.               <div class="md-ellipsis">
    1201. 

  1201.                 <span class="md-footer-nav__direction">
    1202. 

  1202.                   Previous
    1203. 

  1203.                 </span>
    1204. 

  1204.                 AutoConnect menu
    1205. 

  1205.               </div>
    1206. 

  1206.             </div>
    1207. 

  1207.           </a>
    1208. 

  1208.         
    1209. 

  1209.         
    1210. 

  1210.           <a href="advancedusage.html" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
    1211. 

  1211.             <div class="md-footer-nav__title">
    1212. 

  1212.               <div class="md-ellipsis">
    1213. 

  1213.                 <span class="md-footer-nav__direction">
    1214. 

  1214.                   Next
    1215. 

  1215.                 </span>
    1216. 

  1216.                 Advanced usage
    1217. 

  1217.               </div>
    1218. 

  1218.             </div>
    1219. 

  1219.             <div class="md-footer-nav__button md-icon">
    1220. 

  1220.               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
    1221. 

  1221.             </div>
    1222. 

  1222.           </a>
    1223. 

  1223.         
    1224. 

  1224.       </nav>
    1225. 

  1225.     </div>
    1226. 

  1226.   
    1227. 

  1227.   <div class="md-footer-meta md-typeset">
    1228. 

  1228.     <div class="md-footer-meta__inner md-grid">
    1229. 

  1229.       <div class="md-footer-copyright">
    1230. 

  1230.         
    1231. 

  1231.           <div class="md-footer-copyright__highlight">
    1232. 

  1232.             Copyright &copy; 2018-2020 Hieromon Ikasamo
    1233. 

  1233.           </div>
    1234. 

  1234.         
    1235. 

  1235.         Made with
    1236. 

  1236.         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
    1237. 

  1237.           Material for MkDocs
    1238. 

  1238.         </a>
    1239. 

  1239.       </div>
    1240. 

  1240.       
    1241. 

  1241.   <div class="md-footer-social">
    1242. 

  1242.     
    1243. 

  1243.       
    1244. 

  1244.       
    1245. 

  1245.         
    1246. 

  1246.         
    1247. 

  1247.       
    1248. 

  1248.       <a href="https://github.com/Hieromon" target="_blank" rel="noopener" title="github.com" class="md-footer-social__link">
    1249. 

  1249.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
    1250. 

  1250.       </a>
    1251. 

  1251.     
    1252. 

  1252.       
    1253. 

  1253.       
    1254. 

  1254.         
    1255. 

  1255.         
    1256. 

  1256.       
    1257. 

  1257.       <a href="https://twitter.com/hieromon" target="_blank" rel="noopener" title="twitter.com" class="md-footer-social__link">
    1258. 

  1258.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
    1259. 

  1259.       </a>
    1260. 

  1260.     
    1261. 

  1261.   </div>
    1262. 

  1262. 

  1263.     </div>
    1264. 

  1264.   </div>
    1265. 

  1265. </footer>
    1266. 

  1266.       
    1267. 

  1267.     </div>
    1268. 

  1268.     
    1269. 

  1269.       <script src="assets/javascripts/vendor.fd16492e.min.js"></script>
    1270. 

  1270.       <script src="assets/javascripts/bundle.7836ba4d.min.js"></script><script id="__lang" type="application/json">{"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}</script>
    1271. 

  1271.       
    1272. 

  1272.       <script>
    1273. 

  1273.         app = initialize({
    1274. 

  1274.           base: ".",
    1275. 

  1275.           features: [],
    1276. 

  1276.           search: Object.assign({
    1277. 

  1277.             worker: "assets/javascripts/worker/search.4ac00218.min.js"
    1278. 

  1278.           }, typeof search !== "undefined" && search)
    1279. 

  1279.         })
    1280. 

  1280.       </script>
    1281. 

  1281.       
    1282. 

  1282.         <script src="js/gifffer.min.js"></script>
    1283. 

  1283.       
    1284. 

  1284.     
    1285. 

  1285.   </body>
    1286. 

  1286. </html>
    1287.