Home Verkennen Help
Inloggen
titi
/
ESP32_OSC_IMU
Volgen 1
Ster 0
Vork 0
Bestanden Kwesties 0 Pull-aanvragen 0 Wiki
Boom: 27571b60a0
Aftakkingen Labels
ESP32_OSC_IMU
/
lib
/
AutoConnect
/
docs
/
howtoembed.html

howtoembed.html 39 KB
Geschiedenis Ruwe

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275 
  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/howtoembed.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>How to embed - 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="#embed-the-autoconnect-to-the-sketch" 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.               How to embed
    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.   <li class="md-nav__item">
    244. 

  244.     <a href="basicusage.html" class="md-nav__link">
    245. 

  245.       Basic usage
    246. 

  246.     </a>
    247. 

  247.   </li>
    248. 

  248. 

  249.     
    250. 

  250.       
    251. 

  251.       
    252. 

  252.       
    253. 

  253. 

  254. 

  255.   <li class="md-nav__item md-nav__item--nested">
    256. 

  256.     
    257. 

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

  258.     <label class="md-nav__link" for="nav-5">
    259. 

  259.       Advanced usage
    260. 

  260.       <span class="md-nav__icon md-icon"></span>
    261. 

  261.     </label>
    262. 

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

  263.       <label class="md-nav__title" for="nav-5">
    264. 

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

  265.         Advanced usage
    266. 

  266.       </label>
    267. 

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

  268.         
    269. 

  269.         
    270. 

  270.           
    271. 

  271.           
    272. 

  272.           
    273. 

  273. 

  274. 

  275.   <li class="md-nav__item">
    276. 

  276.     <a href="advancedusage.html" class="md-nav__link">
    277. 

  277.       Advanced usage
    278. 

  278.     </a>
    279. 

  279.   </li>
    280. 

  280. 

  281.         
    282. 

  282.           
    283. 

  283.           
    284. 

  284.           
    285. 

  285. 

  286. 

  287.   <li class="md-nav__item">
    288. 

  288.     <a href="adconnection.html" class="md-nav__link">
    289. 

  289.       AutoConnect WiFi connection control
    290. 

  290.     </a>
    291. 

  291.   </li>
    292. 

  292. 

  293.         
    294. 

  294.           
    295. 

  295.           
    296. 

  296.           
    297. 

  297. 

  298. 

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

  300.     <a href="adcpcontrol.html" class="md-nav__link">
    301. 

  301.       Captive portal control
    302. 

  302.     </a>
    303. 

  303.   </li>
    304. 

  304. 

  305.         
    306. 

  306.           
    307. 

  307.           
    308. 

  308.           
    309. 

  309. 

  310. 

  311.   <li class="md-nav__item">
    312. 

  312.     <a href="adnetwork.html" class="md-nav__link">
    313. 

  313.       Settings and controls for network and WiFi
    314. 

  314.     </a>
    315. 

  315.   </li>
    316. 

  316. 

  317.         
    318. 

  318.           
    319. 

  319.           
    320. 

  320.           
    321. 

  321. 

  322. 

  323.   <li class="md-nav__item">
    324. 

  324.     <a href="adauthentication.html" class="md-nav__link">
    325. 

  325.       Authentication settings
    326. 

  326.     </a>
    327. 

  327.   </li>
    328. 

  328. 

  329.         
    330. 

  330.           
    331. 

  331.           
    332. 

  332.           
    333. 

  333. 

  334. 

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

  336.     <a href="adcredential.html" class="md-nav__link">
    337. 

  337.       Credential accesses
    338. 

  338.     </a>
    339. 

  339.   </li>
    340. 

  340. 

  341.         
    342. 

  342.           
    343. 

  343.           
    344. 

  344.           
    345. 

  345. 

  346. 

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

  348.     <a href="adexterior.html" class="md-nav__link">
    349. 

  349.       Customizing page appearance
    350. 

  350.     </a>
    351. 

  351.   </li>
    352. 

  352. 

  353.         
    354. 

  354.           
    355. 

  355.           
    356. 

  356.           
    357. 

  357. 

  358. 

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

  360.     <a href="adothers.html" class="md-nav__link">
    361. 

  361.       Other operation settings and controls
    362. 

  362.     </a>
    363. 

  363.   </li>
    364. 

  364. 

  365.         
    366. 

  366.       </ul>
    367. 

  367.     </nav>
    368. 

  368.   </li>
    369. 

  369. 

  370.     
    371. 

  371.       
    372. 

  372.       
    373. 

  373.       
    374. 

  374. 

  375. 

  376.   <li class="md-nav__item md-nav__item--nested">
    377. 

  377.     
    378. 

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

  379.     <label class="md-nav__link" for="nav-6">
    380. 

  380.       Custom Web pages
    381. 

  381.       <span class="md-nav__icon md-icon"></span>
    382. 

  382.     </label>
    383. 

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

  384.       <label class="md-nav__title" for="nav-6">
    385. 

  385.         <span class="md-nav__icon md-icon"></span>
    386. 

  386.         Custom Web pages
    387. 

  387.       </label>
    388. 

  388.       <ul class="md-nav__list" data-md-scrollfix>
    389. 

  389.         
    390. 

  390.         
    391. 

  391.           
    392. 

  392.           
    393. 

  393.           
    394. 

  394. 

  395. 

  396.   <li class="md-nav__item">
    397. 

  397.     <a href="acintro.html" class="md-nav__link">
    398. 

  398.       Custom Web pages with AutoConnect
    399. 

  399.     </a>
    400. 

  400.   </li>
    401. 

  401. 

  402.         
    403. 

  403.           
    404. 

  404.           
    405. 

  405.           
    406. 

  406. 

  407. 

  408.   <li class="md-nav__item">
    409. 

  409.     <a href="acelements.html" class="md-nav__link">
    410. 

  410.       AutoConnectElements
    411. 

  411.     </a>
    412. 

  412.   </li>
    413. 

  413. 

  414.         
    415. 

  415.           
    416. 

  416.           
    417. 

  417.           
    418. 

  418. 

  419. 

  420.   <li class="md-nav__item">
    421. 

  421.     <a href="acjson.html" class="md-nav__link">
    422. 

  422.       Custom Web pages with JSON
    423. 

  423.     </a>
    424. 

  424.   </li>
    425. 

  425. 

  426.         
    427. 

  427.           
    428. 

  428.           
    429. 

  429.           
    430. 

  430. 

  431. 

  432.   <li class="md-nav__item">
    433. 

  433.     <a href="achandling.html" class="md-nav__link">
    434. 

  434.       Handling the custom Web pages
    435. 

  435.     </a>
    436. 

  436.   </li>
    437. 

  437. 

  438.         
    439. 

  439.       </ul>
    440. 

  440.     </nav>
    441. 

  441.   </li>
    442. 

  442. 

  443.     
    444. 

  444.       
    445. 

  445.       
    446. 

  446.       
    447. 

  447. 

  448. 

  449.   <li class="md-nav__item md-nav__item--nested">
    450. 

  450.     
    451. 

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

  452.     <label class="md-nav__link" for="nav-7">
    453. 

  453.       OTA Updates
    454. 

  454.       <span class="md-nav__icon md-icon"></span>
    455. 

  455.     </label>
    456. 

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

  457.       <label class="md-nav__title" for="nav-7">
    458. 

  458.         <span class="md-nav__icon md-icon"></span>
    459. 

  459.         OTA Updates
    460. 

  460.       </label>
    461. 

  461.       <ul class="md-nav__list" data-md-scrollfix>
    462. 

  462.         
    463. 

  463.         
    464. 

  464.           
    465. 

  465.           
    466. 

  466.           
    467. 

  467. 

  468. 

  469.   <li class="md-nav__item">
    470. 

  470.     <a href="otaupdate.html" class="md-nav__link">
    471. 

  471.       OTA Updates
    472. 

  472.     </a>
    473. 

  473.   </li>
    474. 

  474. 

  475.         
    476. 

  476.           
    477. 

  477.           
    478. 

  478.           
    479. 

  479. 

  480. 

  481.   <li class="md-nav__item">
    482. 

  482.     <a href="otabrowser.html" class="md-nav__link">
    483. 

  483.       Using Web Browser
    484. 

  484.     </a>
    485. 

  485.   </li>
    486. 

  486. 

  487.         
    488. 

  488.           
    489. 

  489.           
    490. 

  490.           
    491. 

  491. 

  492. 

  493.   <li class="md-nav__item">
    494. 

  494.     <a href="otaserver.html" class="md-nav__link">
    495. 

  495.       Using Update Server
    496. 

  496.     </a>
    497. 

  497.   </li>
    498. 

  498. 

  499.         
    500. 

  500.       </ul>
    501. 

  501.     </nav>
    502. 

  502.   </li>
    503. 

  503. 

  504.     
    505. 

  505.       
    506. 

  506.       
    507. 

  507.       
    508. 

  508. 

  509. 

  510.   <li class="md-nav__item md-nav__item--nested">
    511. 

  511.     
    512. 

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

  513.     <label class="md-nav__link" for="nav-8">
    514. 

  514.       Library APIs
    515. 

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

  516.     </label>
    517. 

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

  518.       <label class="md-nav__title" for="nav-8">
    519. 

  519.         <span class="md-nav__icon md-icon"></span>
    520. 

  520.         Library APIs
    521. 

  521.       </label>
    522. 

  522.       <ul class="md-nav__list" data-md-scrollfix>
    523. 

  523.         
    524. 

  524.         
    525. 

  525.           
    526. 

  526.           
    527. 

  527.           
    528. 

  528. 

  529. 

  530.   <li class="md-nav__item">
    531. 

  531.     <a href="api.html" class="md-nav__link">
    532. 

  532.       AutoConnect API
    533. 

  533.     </a>
    534. 

  534.   </li>
    535. 

  535. 

  536.         
    537. 

  537.           
    538. 

  538.           
    539. 

  539.           
    540. 

  540. 

  541. 

  542.   <li class="md-nav__item">
    543. 

  543.     <a href="apiaux.html" class="md-nav__link">
    544. 

  544.       AutoConnectAux API
    545. 

  545.     </a>
    546. 

  546.   </li>
    547. 

  547. 

  548.         
    549. 

  549.           
    550. 

  550.           
    551. 

  551.           
    552. 

  552. 

  553. 

  554.   <li class="md-nav__item">
    555. 

  555.     <a href="apiconfig.html" class="md-nav__link">
    556. 

  556.       AutoConnectConfig API
    557. 

  557.     </a>
    558. 

  558.   </li>
    559. 

  559. 

  560.         
    561. 

  561.           
    562. 

  562.           
    563. 

  563.           
    564. 

  564. 

  565. 

  566.   <li class="md-nav__item">
    567. 

  567.     <a href="apielements.html" class="md-nav__link">
    568. 

  568.       AutoConnectElements API
    569. 

  569.     </a>
    570. 

  570.   </li>
    571. 

  571. 

  572.         
    573. 

  573.           
    574. 

  574.           
    575. 

  575.           
    576. 

  576. 

  577. 

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

  579.     <a href="apiupdate.html" class="md-nav__link">
    580. 

  580.       AutoConnectUpdate API
    581. 

  581.     </a>
    582. 

  582.   </li>
    583. 

  583. 

  584.         
    585. 

  585.           
    586. 

  586.           
    587. 

  587.           
    588. 

  588. 

  589. 

  590.   <li class="md-nav__item">
    591. 

  591.     <a href="apiextra.html" class="md-nav__link">
    592. 

  592.       Something extra
    593. 

  593.     </a>
    594. 

  594.   </li>
    595. 

  595. 

  596.         
    597. 

  597.       </ul>
    598. 

  598.     </nav>
    599. 

  599.   </li>
    600. 

  600. 

  601.     
    602. 

  602.       
    603. 

  603.       
    604. 

  604.       
    605. 

  605. 

  606.   
    607. 

  607. 

  608. 

  609.   <li class="md-nav__item md-nav__item--active md-nav__item--nested">
    610. 

  610.     
    611. 

  611.     <input class="md-nav__toggle md-toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9" checked>
    612. 

  612.     <label class="md-nav__link" for="nav-9">
    613. 

  613.       Examples
    614. 

  614.       <span class="md-nav__icon md-icon"></span>
    615. 

  615.     </label>
    616. 

  616.     <nav class="md-nav" aria-label="Examples" data-md-level="1">
    617. 

  617.       <label class="md-nav__title" for="nav-9">
    618. 

  618.         <span class="md-nav__icon md-icon"></span>
    619. 

  619.         Examples
    620. 

  620.       </label>
    621. 

  621.       <ul class="md-nav__list" data-md-scrollfix>
    622. 

  622.         
    623. 

  623.         
    624. 

  624.           
    625. 

  625.           
    626. 

  626.           
    627. 

  627. 

  628.   
    629. 

  629. 

  630. 

  631.   <li class="md-nav__item md-nav__item--active">
    632. 

  632.     
    633. 

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

  634.     
    635. 

  635.     
    636. 

  636.       <label class="md-nav__link md-nav__link--active" for="__toc">
    637. 

  637.         How to embed
    638. 

  638.         <span class="md-nav__icon md-icon"></span>
    639. 

  639.       </label>
    640. 

  640.     
    641. 

  641.     <a href="howtoembed.html" class="md-nav__link md-nav__link--active">
    642. 

  642.       How to embed
    643. 

  643.     </a>
    644. 

  644.     
    645. 

  645.       
    646. 

  646. <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
    647. 

  647.   
    648. 

  648.   
    649. 

  649.   
    650. 

  650.     <label class="md-nav__title" for="__toc">
    651. 

  651.       <span class="md-nav__icon md-icon"></span>
    652. 

  652.       Table of contents
    653. 

  653.     </label>
    654. 

  654.     <ul class="md-nav__list" data-md-scrollfix>
    655. 

  655.       
    656. 

  656.         <li class="md-nav__item">
    657. 

  657.   <a href="#embed-the-autoconnect-to-the-sketch" class="md-nav__link">
    658. 

  658.     Embed the AutoConnect to the Sketch
    659. 

  659.   </a>
    660. 

  660.   
    661. 

  661. </li>
    662. 

  662.       
    663. 

  663.         <li class="md-nav__item">
    664. 

  664.   <a href="#what-does-this-example-do" class="md-nav__link">
    665. 

  665.     What does this example do?
    666. 

  666.   </a>
    667. 

  667.   
    668. 

  668. </li>
    669. 

  669.       
    670. 

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

  671.   <a href="#embed-autoconnect" class="md-nav__link">
    672. 

  672.     Embed AutoConnect
    673. 

  673.   </a>
    674. 

  674.   
    675. 

  675.     <nav class="md-nav" aria-label="Embed AutoConnect">
    676. 

  676.       <ul class="md-nav__list">
    677. 

  677.         
    678. 

  678.           <li class="md-nav__item">
    679. 

  679.   <a href="#pattern-a" class="md-nav__link">
    680. 

  680.      Pattern A.
    681. 

  681.   </a>
    682. 

  682.   
    683. 

  683. </li>
    684. 

  684.         
    685. 

  685.           <li class="md-nav__item">
    686. 

  686.   <a href="#pattern-b" class="md-nav__link">
    687. 

  687.      Pattern B.
    688. 

  688.   </a>
    689. 

  689.   
    690. 

  690. </li>
    691. 

  691.         
    692. 

  692.       </ul>
    693. 

  693.     </nav>
    694. 

  694.   
    695. 

  695. </li>
    696. 

  696.       
    697. 

  697.         <li class="md-nav__item">
    698. 

  698.   <a href="#used-with-mqtt-as-a-client-application" class="md-nav__link">
    699. 

  699.     Used with MQTT as a client application
    700. 

  700.   </a>
    701. 

  701.   
    702. 

  702.     <nav class="md-nav" aria-label="Used with MQTT as a client application">
    703. 

  703.       <ul class="md-nav__list">
    704. 

  704.         
    705. 

  705.           <li class="md-nav__item">
    706. 

  706.   <a href="#advance-procedures" class="md-nav__link">
    707. 

  707.     Advance procedures
    708. 

  708.   </a>
    709. 

  709.   
    710. 

  710.     <nav class="md-nav" aria-label="Advance procedures">
    711. 

  711.       <ul class="md-nav__list">
    712. 

  712.         
    713. 

  713.           <li class="md-nav__item">
    714. 

  714.   <a href="#create-a-channel-on-thingspeak" class="md-nav__link">
    715. 

  715.     Create a channel on ThingSpeak
    716. 

  716.   </a>
    717. 

  717.   
    718. 

  718. </li>
    719. 

  719.         
    720. 

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

  721.   <a href="#get-channel-id-and-api-keys" class="md-nav__link">
    722. 

  722.     Get Channel ID and API Keys
    723. 

  723.   </a>
    724. 

  724.   
    725. 

  725. </li>
    726. 

  726.         
    727. 

  727.       </ul>
    728. 

  728.     </nav>
    729. 

  729.   
    730. 

  730. </li>
    731. 

  731.         
    732. 

  732.           <li class="md-nav__item">
    733. 

  733.   <a href="#the-sketch-publishes-messages" class="md-nav__link">
    734. 

  734.     the Sketch, Publishes messages
    735. 

  735.   </a>
    736. 

  736.   
    737. 

  737. </li>
    738. 

  738.         
    739. 

  739.           <li class="md-nav__item">
    740. 

  740.   <a href="#publish-messages" class="md-nav__link">
    741. 

  741.     Publish messages
    742. 

  742.   </a>
    743. 

  743.   
    744. 

  744. </li>
    745. 

  745.         
    746. 

  746.           <li class="md-nav__item">
    747. 

  747.   <a href="#how-embed-to-your-sketches" class="md-nav__link">
    748. 

  748.     How embed to your sketches
    749. 

  749.   </a>
    750. 

  750.   
    751. 

  751. </li>
    752. 

  752.         
    753. 

  753.       </ul>
    754. 

  754.     </nav>
    755. 

  755.   
    756. 

  756. </li>
    757. 

  757.       
    758. 

  758.     </ul>
    759. 

  759.   
    760. 

  760. </nav>
    761. 

  761.     
    762. 

  762.   </li>
    763. 

  763. 

  764.         
    765. 

  765.           
    766. 

  766.           
    767. 

  767.           
    768. 

  768. 

  769. 

  770.   <li class="md-nav__item">
    771. 

  771.     <a href="datatips.html" class="md-nav__link">
    772. 

  772.       Tips for data conversion
    773. 

  773.     </a>
    774. 

  774.   </li>
    775. 

  775. 

  776.         
    777. 

  777.           
    778. 

  778.           
    779. 

  779.           
    780. 

  780. 

  781. 

  782.   <li class="md-nav__item">
    783. 

  783.     <a href="menuize.html" class="md-nav__link">
    784. 

  784.       Attach the menus
    785. 

  785.     </a>
    786. 

  786.   </li>
    787. 

  787. 

  788.         
    789. 

  789.           
    790. 

  790.           
    791. 

  791.           
    792. 

  792. 

  793. 

  794.   <li class="md-nav__item">
    795. 

  795.     <a href="wojson.html" class="md-nav__link">
    796. 

  796.       Custom Web pages w/o JSON
    797. 

  797.     </a>
    798. 

  798.   </li>
    799. 

  799. 

  800.         
    801. 

  801.       </ul>
    802. 

  802.     </nav>
    803. 

  803.   </li>
    804. 

  804. 

  805.     
    806. 

  806.       
    807. 

  807.       
    808. 

  808.       
    809. 

  809. 

  810. 

  811.   <li class="md-nav__item md-nav__item--nested">
    812. 

  812.     
    813. 

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

  814.     <label class="md-nav__link" for="nav-10">
    815. 

  815.       Appendix
    816. 

  816.       <span class="md-nav__icon md-icon"></span>
    817. 

  817.     </label>
    818. 

  818.     <nav class="md-nav" aria-label="Appendix" data-md-level="1">
    819. 

  819.       <label class="md-nav__title" for="nav-10">
    820. 

  820.         <span class="md-nav__icon md-icon"></span>
    821. 

  821.         Appendix
    822. 

  822.       </label>
    823. 

  823.       <ul class="md-nav__list" data-md-scrollfix>
    824. 

  824.         
    825. 

  825.         
    826. 

  826.           
    827. 

  827.           
    828. 

  828.           
    829. 

  829. 

  830. 

  831.   <li class="md-nav__item">
    832. 

  832.     <a href="lsbegin.html" class="md-nav__link">
    833. 

  833.       Inside AutoConnect::begin
    834. 

  834.     </a>
    835. 

  835.   </li>
    836. 

  836. 

  837.         
    838. 

  838.           
    839. 

  839.           
    840. 

  840.           
    841. 

  841. 

  842. 

  843.   <li class="md-nav__item">
    844. 

  844.     <a href="credit.html" class="md-nav__link">
    845. 

  845.       Saved credentials access
    846. 

  846.     </a>
    847. 

  847.   </li>
    848. 

  848. 

  849.         
    850. 

  850.           
    851. 

  851.           
    852. 

  852.           
    853. 

  853. 

  854. 

  855.   <li class="md-nav__item">
    856. 

  856.     <a href="acupload.html" class="md-nav__link">
    857. 

  857.       File upload handler
    858. 

  858.     </a>
    859. 

  859.   </li>
    860. 

  860. 

  861.         
    862. 

  862.           
    863. 

  863.           
    864. 

  864.           
    865. 

  865. 

  866. 

  867.   <li class="md-nav__item">
    868. 

  868.     <a href="colorized.html" class="md-nav__link">
    869. 

  869.       Custom colorized
    870. 

  870.     </a>
    871. 

  871.   </li>
    872. 

  872. 

  873.         
    874. 

  874.           
    875. 

  875.           
    876. 

  876.           
    877. 

  877. 

  878. 

  879.   <li class="md-nav__item">
    880. 

  880.     <a href="changelabel.html" class="md-nav__link">
    881. 

  881.       Change label text
    882. 

  882.     </a>
    883. 

  883.   </li>
    884. 

  884. 

  885.         
    886. 

  886.       </ul>
    887. 

  887.     </nav>
    888. 

  888.   </li>
    889. 

  889. 

  890.     
    891. 

  891.       
    892. 

  892.       
    893. 

  893.       
    894. 

  894. 

  895. 

  896.   <li class="md-nav__item">
    897. 

  897.     <a href="faq.html" class="md-nav__link">
    898. 

  898.       FAQ
    899. 

  899.     </a>
    900. 

  900.   </li>
    901. 

  901. 

  902.     
    903. 

  903.       
    904. 

  904.       
    905. 

  905.       
    906. 

  906. 

  907. 

  908.   <li class="md-nav__item">
    909. 

  909.     <a href="changelog.html" class="md-nav__link">
    910. 

  910.       Change log
    911. 

  911.     </a>
    912. 

  912.   </li>
    913. 

  913. 

  914.     
    915. 

  915.       
    916. 

  916.       
    917. 

  917.       
    918. 

  918. 

  919. 

  920.   <li class="md-nav__item">
    921. 

  921.     <a href="license.html" class="md-nav__link">
    922. 

  922.       License
    923. 

  923.     </a>
    924. 

  924.   </li>
    925. 

  925. 

  926.     
    927. 

  927.   </ul>
    928. 

  928. </nav>
    929. 

  929.                   </div>
    930. 

  930.                 </div>
    931. 

  931.               </div>
    932. 

  932.             
    933. 

  933.             
    934. 

  934.               <div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
    935. 

  935.                 <div class="md-sidebar__scrollwrap">
    936. 

  936.                   <div class="md-sidebar__inner">
    937. 

  937.                     
    938. 

  938. <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
    939. 

  939.   
    940. 

  940.   
    941. 

  941.   
    942. 

  942.     <label class="md-nav__title" for="__toc">
    943. 

  943.       <span class="md-nav__icon md-icon"></span>
    944. 

  944.       Table of contents
    945. 

  945.     </label>
    946. 

  946.     <ul class="md-nav__list" data-md-scrollfix>
    947. 

  947.       
    948. 

  948.         <li class="md-nav__item">
    949. 

  949.   <a href="#embed-the-autoconnect-to-the-sketch" class="md-nav__link">
    950. 

  950.     Embed the AutoConnect to the Sketch
    951. 

  951.   </a>
    952. 

  952.   
    953. 

  953. </li>
    954. 

  954.       
    955. 

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

  956.   <a href="#what-does-this-example-do" class="md-nav__link">
    957. 

  957.     What does this example do?
    958. 

  958.   </a>
    959. 

  959.   
    960. 

  960. </li>
    961. 

  961.       
    962. 

  962.         <li class="md-nav__item">
    963. 

  963.   <a href="#embed-autoconnect" class="md-nav__link">
    964. 

  964.     Embed AutoConnect
    965. 

  965.   </a>
    966. 

  966.   
    967. 

  967.     <nav class="md-nav" aria-label="Embed AutoConnect">
    968. 

  968.       <ul class="md-nav__list">
    969. 

  969.         
    970. 

  970.           <li class="md-nav__item">
    971. 

  971.   <a href="#pattern-a" class="md-nav__link">
    972. 

  972.      Pattern A.
    973. 

  973.   </a>
    974. 

  974.   
    975. 

  975. </li>
    976. 

  976.         
    977. 

  977.           <li class="md-nav__item">
    978. 

  978.   <a href="#pattern-b" class="md-nav__link">
    979. 

  979.      Pattern B.
    980. 

  980.   </a>
    981. 

  981.   
    982. 

  982. </li>
    983. 

  983.         
    984. 

  984.       </ul>
    985. 

  985.     </nav>
    986. 

  986.   
    987. 

  987. </li>
    988. 

  988.       
    989. 

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

  990.   <a href="#used-with-mqtt-as-a-client-application" class="md-nav__link">
    991. 

  991.     Used with MQTT as a client application
    992. 

  992.   </a>
    993. 

  993.   
    994. 

  994.     <nav class="md-nav" aria-label="Used with MQTT as a client application">
    995. 

  995.       <ul class="md-nav__list">
    996. 

  996.         
    997. 

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

  998.   <a href="#advance-procedures" class="md-nav__link">
    999. 

  999.     Advance procedures
    1000. 

  1000.   </a>
    1001. 

  1001.   
    1002. 

  1002.     <nav class="md-nav" aria-label="Advance procedures">
    1003. 

  1003.       <ul class="md-nav__list">
    1004. 

  1004.         
    1005. 

  1005.           <li class="md-nav__item">
    1006. 

  1006.   <a href="#create-a-channel-on-thingspeak" class="md-nav__link">
    1007. 

  1007.     Create a channel on ThingSpeak
    1008. 

  1008.   </a>
    1009. 

  1009.   
    1010. 

  1010. </li>
    1011. 

  1011.         
    1012. 

  1012.           <li class="md-nav__item">
    1013. 

  1013.   <a href="#get-channel-id-and-api-keys" class="md-nav__link">
    1014. 

  1014.     Get Channel ID and API Keys
    1015. 

  1015.   </a>
    1016. 

  1016.   
    1017. 

  1017. </li>
    1018. 

  1018.         
    1019. 

  1019.       </ul>
    1020. 

  1020.     </nav>
    1021. 

  1021.   
    1022. 

  1022. </li>
    1023. 

  1023.         
    1024. 

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

  1025.   <a href="#the-sketch-publishes-messages" class="md-nav__link">
    1026. 

  1026.     the Sketch, Publishes messages
    1027. 

  1027.   </a>
    1028. 

  1028.   
    1029. 

  1029. </li>
    1030. 

  1030.         
    1031. 

  1031.           <li class="md-nav__item">
    1032. 

  1032.   <a href="#publish-messages" class="md-nav__link">
    1033. 

  1033.     Publish messages
    1034. 

  1034.   </a>
    1035. 

  1035.   
    1036. 

  1036. </li>
    1037. 

  1037.         
    1038. 

  1038.           <li class="md-nav__item">
    1039. 

  1039.   <a href="#how-embed-to-your-sketches" class="md-nav__link">
    1040. 

  1040.     How embed to your sketches
    1041. 

  1041.   </a>
    1042. 

  1042.   
    1043. 

  1043. </li>
    1044. 

  1044.         
    1045. 

  1045.       </ul>
    1046. 

  1046.     </nav>
    1047. 

  1047.   
    1048. 

  1048. </li>
    1049. 

  1049.       
    1050. 

  1050.     </ul>
    1051. 

  1051.   
    1052. 

  1052. </nav>
    1053. 

  1053.                   </div>
    1054. 

  1054.                 </div>
    1055. 

  1055.               </div>
    1056. 

  1056.             
    1057. 

  1057.           
    1058. 

  1058.           <div class="md-content">
    1059. 

  1059.             <article class="md-content__inner md-typeset">
    1060. 

  1060.               
    1061. 

  1061.                 
    1062. 

  1062.                 
    1063. 

  1063.                   <h1>How to embed</h1>
    1064. 

  1064.                 
    1065. 

  1065.                 <h2 id="embed-the-autoconnect-to-the-sketch">Embed the AutoConnect to the Sketch<a class="headerlink" href="#embed-the-autoconnect-to-the-sketch" title="Permanent link">&para;</a></h2>
    1066. 

  1066. <p>Here hold 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>
    1067. 

  1067. <h2 id="what-does-this-example-do">What does this example do?<a class="headerlink" href="#what-does-this-example-do" title="Permanent link">&para;</a></h2>
    1068. 

  1068. <p>Uses the web interface to light the LED connected to the D0 (sometimes called <em>BUILTIN_LED</em>) port of the <strong><a href="https://github.com/nodemcu/nodemcu-devkit-v1.0">NodeMCU</a></strong> module like the following animation.</p>
    1069. 

  1069. <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 will blink according to the value with clicked by the button. This example is a typical sketch of manipulating ESP8266's GPIO via WLAN.</p>
    1070. 

  1070. <p><img data-gifffer="images/ac2.gif" /></p>
    1071. 

  1071. <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>
    1072. 

  1072. <h2 id="embed-autoconnect">Embed AutoConnect<a class="headerlink" href="#embed-autoconnect" title="Permanent link">&para;</a></h2>
    1073. 

  1073. <h3 id="pattern-a"><i class="fa fa-code" aria-hidden="true"></i> Pattern A.<a class="headerlink" href="#pattern-a" title="Permanent link">&para;</a></h3>
    1074. 

  1074. <p>Bind to ESP8266WebServer, performs handleClient with handleRequest.</p>
    1075. 

  1075. <p><img src="images/handleClient.svg" /></p>
    1076. 

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

  1077. <p class="admonition-title">In what situations should the handleRequest be used.</p>
    1078. 

  1078. <p>It is something needs to be done immediately after the handle client. It is better to call only AutoConnect::handleClient whenever possible.</p>
    1079. 

  1079. </div>
    1080. 

  1080. <h3 id="pattern-b"><i class="fa fa-code" aria-hidden="true"></i> Pattern B.<a class="headerlink" href="#pattern-b" title="Permanent link">&para;</a></h3>
    1081. 

  1081. <p>Declare only AutoConnect, performs handleClient.</p>
    1082. 

  1082. <p><img src="images/handlePortal.svg" /></p>
    1083. 

  1083. <h2 id="used-with-mqtt-as-a-client-application">Used with MQTT as a client application<a class="headerlink" href="#used-with-mqtt-as-a-client-application" title="Permanent link">&para;</a></h2>
    1084. 

  1084. <p>The effect of AutoConnect is not only for ESP8266/ESP32 as the web server. It has advantages for something WiFi client as well. For example, AutoConnect is also convenient for publishing MQTT messages from various measurement points. Even if the SSID is different for each measurement point, it is not necessary to modify the Sketch.</p>
    1085. 

  1085. <p>This example tries to publish the WiFi signal strength of ESP8266 with MQTT. It uses the <a href="https://thingspeak.com/">ThingSpeak</a> for MQTT broker. ESP8266 publishes the RSSI value to the channel created on ThingSpeak as <a href="https://github.com/knolleary/pubsubclient">MQTT client</a>. This example is well suited to demonstrate the usefulness of AutoConnect, as RSSI values are measured at each access point usually. Just adding a few lines of code makes it unnecessary to upload sketches with the different SSIDs rewrite for each access point.</p>
    1086. 

  1086. <p><img src="images/ChannelStatus.png" width="70%"/></p>
    1087. 

  1087. <h3 id="advance-procedures">Advance procedures<a class="headerlink" href="#advance-procedures" title="Permanent link">&para;</a></h3>
    1088. 

  1088. <ul>
    1089. 

  1089. <li>Arduino Client for MQTT - It's the <a href="https://github.com/knolleary/pubsubclient">PubSubClient</a>, install it to Arduino IDE. If you have the latest version already, this step does not need.</li>
    1090. 

  1090. <li>Create a channel on ThingSpeak.</li>
    1091. 

  1091. <li>Get the Channel API Keys from ThingSpeak, put its keys to the Sketch.</li>
    1092. 

  1092. </ul>
    1093. 

  1093. <p>The ThingSpeak is the open IoT platform. It is capable of sending data privately to the cloud and analyzing, visualizing its data. If you do not have an account of ThingSpeak, you need that account to proceed further. ThingSpeak has the free plan for the account which uses within the scope of this example.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup> You can sign up with the <a href="https://thingspeak.com/users/sign_up">ThingSpeak sign-up page</a>.</p>
    1094. 

  1094. <div class="admonition warning">
    1095. 

  1095. <p class="admonition-title">Whether you should do sign-up or not.</p>
    1096. 

  1096. <p>You are entrusted with the final judgment of account creation for ThingSpeak. Create an account at your own risk.</p>
    1097. 

  1097. </div>
    1098. 

  1098. <h4 id="create-a-channel-on-thingspeak">Create a channel on ThingSpeak<a class="headerlink" href="#create-a-channel-on-thingspeak" title="Permanent link">&para;</a></h4>
    1099. 

  1099. <p>Sign in ThingSpeak. Select <strong>Channels</strong> to show the <strong>My Channels</strong>, then click <strong>New Channel</strong>.</p>
    1100. 

  1100. <p>At the <strong>New Channel</strong> screen, enter each field as a below. And click <strong>Save Channel</strong> at the bottom of the screen to save.</p>
    1101. 

  1101. <ul>
    1102. 

  1102. <li>Name: <code>ESP8266 Signal Strength</code></li>
    1103. 

  1103. <li>Description: <code>ESP8266 RSSI publish</code></li>
    1104. 

  1104. <li>Field1: <code>RSSI</code></li>
    1105. 

  1105. </ul>
    1106. 

  1106. <p><img src="images/CreateChannel.png" width="70%"/></p>
    1107. 

  1107. <h4 id="get-channel-id-and-api-keys">Get Channel ID and API Keys<a class="headerlink" href="#get-channel-id-and-api-keys" title="Permanent link">&para;</a></h4>
    1108. 

  1108. <p>The channel successfully created, you can see the channel status screen as a below. <strong>Channel ID</strong> is displayed there.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup></p>
    1109. 

  1109. <p><img src="images/ChannelID.png" width="70%"/></p>
    1110. 

  1110. <p>Here, switch the channel status tab to <strong>API Keys</strong>. The API key required to publish the message is the <strong>Write API Key</strong>.</p>
    1111. 

  1111. <p><img src="images/APIKeys.png" width="70%"/></p>
    1112. 

  1112. <p>The last key you need is the <strong>User API Key</strong> and can be confirmed it in the user profile. Pull down <strong>Account</strong> from the top menu, select <strong>My profile</strong>. Then you can see the ThingSpeak settings and the <strong>User API Key</strong> is displayed middle of this screen.</p>
    1113. 

  1113. <p><img src="images/USERKey.png" width="70%"/></p>
    1114. 

  1114. <h3 id="the-sketch-publishes-messages">the Sketch, Publishes messages<a class="headerlink" href="#the-sketch-publishes-messages" title="Permanent link">&para;</a></h3>
    1115. 

  1115. <p>The complete code of the Sketch is <a href="https://github.com/Hieromon/AutoConnect/blob/master/examples/mqttRSSI/mqttRSSI.ino">mqttRSSI.ino</a> in the <a href="https://github.com/Hieromon/AutoConnect">AutoConnect repository</a>. Replace the following #define in a sketch with <strong>User API Key</strong>, <strong>Write API Key</strong> and <strong>Channel ID</strong>. After Keys updated, compile the Sketch and upload it.</p>
    1116. 

  1116. <div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><span style="color: #75715e">#define MQTT_USER_KEY        &quot;****************&quot;  // Replace to User API Key.</span>
    1117. 

  1117. <span style="color: #75715e">#define CHANNEL_ID           &quot;******&quot;            // Replace to Channel ID.</span>
    1118. 

  1118. <span style="color: #75715e">#define CHANNEL_API_KEY_WR   &quot;****************&quot;  // Replace to the write API Key.</span>
    1119. 

  1119. </code></pre></div>
    1120. 

  1120. <h3 id="publish-messages">Publish messages<a class="headerlink" href="#publish-messages" title="Permanent link">&para;</a></h3>
    1121. 

  1121. <p>After upload and reboot complete, the message publishing will start via the access point now set. The message carries RSSI as the current WiFi signal strength. The signal strength variations in RSSI are displayed on ThingSpeak's Channel status screen.</p>
    1122. 

  1122. <h3 id="how-embed-to-your-sketches">How embed to your sketches<a class="headerlink" href="#how-embed-to-your-sketches" title="Permanent link">&para;</a></h3>
    1123. 

  1123. <p>For the client sketches, the code required to connect to WiFi is the following four parts only.</p>
    1124. 

  1124. <ol>
    1125. 

  1125. <li>
    1126. 

  1126. <p>#include directive<sup id="fnref:3"><a class="footnote-ref" href="#fn:3">3</a></sup></p>
    1127. 

  1127. <p>Include <code>AutoConnect.h</code> header file behind the include of <code>ESP8266WiFi.h</code>.</p>
    1128. 

  1128. <p><img src="images/include.png" width="55%"/></p>
    1129. 

  1129. </li>
    1130. 

  1130. <li>
    1131. 

  1131. <p>Declare AutoConnect</p>
    1132. 

  1132. <p>The declaration of the <a href="api.html#autoconnect"><strong>AutoConnect variable</strong></a> is not accompanied by ESP8266WebServer.</p>
    1133. 

  1133. <p><img src="images/declare.png" width="55%"/></p>
    1134. 

  1134. </li>
    1135. 

  1135. <li>
    1136. 

  1136. <p>Invokes "begin()"</p>
    1137. 

  1137. <p>Call <a href="api.html#begin"><strong>AutoConnect::begin</strong></a>. If you need to assign a static IP address, executes <a href="apiconfig.html">AutoConnectConfig</a> before that. </p>
    1138. 

  1138. <p><img src="images/begin.png" width="55%"/></p>
    1139. 

  1139. </li>
    1140. 

  1140. <li>
    1141. 

  1141. <p>Performs "handleClent()" in "loop()"</p>
    1142. 

  1142. <p>Invokes <a href="api.html#handleclient"><strong>AutoConnect::handleClient()</strong></a> at inside <code>loop()</code> to enable the AutoConnect menu.</p>
    1143. 

  1143. <p><img src="images/handleClient.png" width="55%"/></p>
    1144. 

  1144. </li>
    1145. 

  1145. </ol>
    1146. 

  1146. <script>
    1147. 

  1147.   window.onload = function() {
    1148. 

  1148.     Gifffer();
    1149. 

  1149.   };
    1150. 

  1150. </script>
    1151. 

  1151. 

  1152. <div class="footnote">
    1153. 

  1153. <hr />
    1154. 

  1154. <ol>
    1155. 

  1155. <li id="fn:1">
    1156. 

  1156. <p>As of March 21, 2018.&#160;<a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">&#8617;</a></p>
    1157. 

  1157. </li>
    1158. 

  1158. <li id="fn:2">
    1159. 

  1159. <p>'454951' in the example above, but your channel ID should be different.&#160;<a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">&#8617;</a></p>
    1160. 

  1160. </li>
    1161. 

  1161. <li id="fn:3">
    1162. 

  1162. <p><code>#include &lt;ESP8266WebServer.h&gt;</code> does not necessary for uses only client.&#160;<a class="footnote-backref" href="#fnref:3" title="Jump back to footnote 3 in the text">&#8617;</a></p>
    1163. 

  1163. </li>
    1164. 

  1164. </ol>
    1165. 

  1165. </div>
    1166. 

  1166.                 
    1167. 

  1167.               
    1168. 

  1168.               
    1169. 

  1169.                 
    1170. 

  1170. 

  1171. 

  1172.               
    1173. 

  1173.             </article>
    1174. 

  1174.           </div>
    1175. 

  1175.         </div>
    1176. 

  1176.       </main>
    1177. 

  1177.       
    1178. 

  1178.         
    1179. 

  1179. <footer class="md-footer">
    1180. 

  1180.   
    1181. 

  1181.     <div class="md-footer-nav">
    1182. 

  1182.       <nav class="md-footer-nav__inner md-grid" aria-label="Footer">
    1183. 

  1183.         
    1184. 

  1184.           <a href="apiextra.html" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
    1185. 

  1185.             <div class="md-footer-nav__button md-icon">
    1186. 

  1186.               <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>
    1187. 

  1187.             </div>
    1188. 

  1188.             <div class="md-footer-nav__title">
    1189. 

  1189.               <div class="md-ellipsis">
    1190. 

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

  1191.                   Previous
    1192. 

  1192.                 </span>
    1193. 

  1193.                 Something extra
    1194. 

  1194.               </div>
    1195. 

  1195.             </div>
    1196. 

  1196.           </a>
    1197. 

  1197.         
    1198. 

  1198.         
    1199. 

  1199.           <a href="datatips.html" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
    1200. 

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

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

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

  1203.                   Next
    1204. 

  1204.                 </span>
    1205. 

  1205.                 Tips for data conversion
    1206. 

  1206.               </div>
    1207. 

  1207.             </div>
    1208. 

  1208.             <div class="md-footer-nav__button md-icon">
    1209. 

  1209.               <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>
    1210. 

  1210.             </div>
    1211. 

  1211.           </a>
    1212. 

  1212.         
    1213. 

  1213.       </nav>
    1214. 

  1214.     </div>
    1215. 

  1215.   
    1216. 

  1216.   <div class="md-footer-meta md-typeset">
    1217. 

  1217.     <div class="md-footer-meta__inner md-grid">
    1218. 

  1218.       <div class="md-footer-copyright">
    1219. 

  1219.         
    1220. 

  1220.           <div class="md-footer-copyright__highlight">
    1221. 

  1221.             Copyright &copy; 2018-2020 Hieromon Ikasamo
    1222. 

  1222.           </div>
    1223. 

  1223.         
    1224. 

  1224.         Made with
    1225. 

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

  1226.           Material for MkDocs
    1227. 

  1227.         </a>
    1228. 

  1228.       </div>
    1229. 

  1229.       
    1230. 

  1230.   <div class="md-footer-social">
    1231. 

  1231.     
    1232. 

  1232.       
    1233. 

  1233.       
    1234. 

  1234.         
    1235. 

  1235.         
    1236. 

  1236.       
    1237. 

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

  1238.         <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>
    1239. 

  1239.       </a>
    1240. 

  1240.     
    1241. 

  1241.       
    1242. 

  1242.       
    1243. 

  1243.         
    1244. 

  1244.         
    1245. 

  1245.       
    1246. 

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

  1247.         <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>
    1248. 

  1248.       </a>
    1249. 

  1249.     
    1250. 

  1250.   </div>
    1251. 

  1251. 

  1252.     </div>
    1253. 

  1253.   </div>
    1254. 

  1254. </footer>
    1255. 

  1255.       
    1256. 

  1256.     </div>
    1257. 

  1257.     
    1258. 

  1258.       <script src="assets/javascripts/vendor.fd16492e.min.js"></script>
    1259. 

  1259.       <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>
    1260. 

  1260.       
    1261. 

  1261.       <script>
    1262. 

  1262.         app = initialize({
    1263. 

  1263.           base: ".",
    1264. 

  1264.           features: [],
    1265. 

  1265.           search: Object.assign({
    1266. 

  1266.             worker: "assets/javascripts/worker/search.4ac00218.min.js"
    1267. 

  1267.           }, typeof search !== "undefined" && search)
    1268. 

  1268.         })
    1269. 

  1269.       </script>
    1270. 

  1270.       
    1271. 

  1271.         <script src="js/gifffer.min.js"></script>
    1272. 

  1272.       
    1273. 

  1273.     
    1274. 

  1274.   </body>
    1275. 

  1275. </html>
    1276.