Home Explore Help
Sign In
titi
/
ESP32_OSC_IMU
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 27571b60a0
Branches Tags
ESP32_OSC_IMU
/
lib
/
AutoConnect
/
docs
/
acjson.html

acjson.html 81 KB
History Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032 
  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/acjson.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>Custom Web pages with JSON - 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="#json-objects-elements-for-the-custom-web-page" 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.               Custom Web pages with JSON
    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. 

  376. 

  377. 

  378.   <li class="md-nav__item md-nav__item--active md-nav__item--nested">
    379. 

  379.     
    380. 

  380.     <input class="md-nav__toggle md-toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6" checked>
    381. 

  381.     <label class="md-nav__link" for="nav-6">
    382. 

  382.       Custom Web pages
    383. 

  383.       <span class="md-nav__icon md-icon"></span>
    384. 

  384.     </label>
    385. 

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

  386.       <label class="md-nav__title" for="nav-6">
    387. 

  387.         <span class="md-nav__icon md-icon"></span>
    388. 

  388.         Custom Web pages
    389. 

  389.       </label>
    390. 

  390.       <ul class="md-nav__list" data-md-scrollfix>
    391. 

  391.         
    392. 

  392.         
    393. 

  393.           
    394. 

  394.           
    395. 

  395.           
    396. 

  396. 

  397. 

  398.   <li class="md-nav__item">
    399. 

  399.     <a href="acintro.html" class="md-nav__link">
    400. 

  400.       Custom Web pages with AutoConnect
    401. 

  401.     </a>
    402. 

  402.   </li>
    403. 

  403. 

  404.         
    405. 

  405.           
    406. 

  406.           
    407. 

  407.           
    408. 

  408. 

  409. 

  410.   <li class="md-nav__item">
    411. 

  411.     <a href="acelements.html" class="md-nav__link">
    412. 

  412.       AutoConnectElements
    413. 

  413.     </a>
    414. 

  414.   </li>
    415. 

  415. 

  416.         
    417. 

  417.           
    418. 

  418.           
    419. 

  419.           
    420. 

  420. 

  421.   
    422. 

  422. 

  423. 

  424.   <li class="md-nav__item md-nav__item--active">
    425. 

  425.     
    426. 

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

  427.     
    428. 

  428.     
    429. 

  429.       <label class="md-nav__link md-nav__link--active" for="__toc">
    430. 

  430.         Custom Web pages with JSON
    431. 

  431.         <span class="md-nav__icon md-icon"></span>
    432. 

  432.       </label>
    433. 

  433.     
    434. 

  434.     <a href="acjson.html" class="md-nav__link md-nav__link--active">
    435. 

  435.       Custom Web pages with JSON
    436. 

  436.     </a>
    437. 

  437.     
    438. 

  438.       
    439. 

  439. <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
    440. 

  440.   
    441. 

  441.   
    442. 

  442.   
    443. 

  443.     <label class="md-nav__title" for="__toc">
    444. 

  444.       <span class="md-nav__icon md-icon"></span>
    445. 

  445.       Table of contents
    446. 

  446.     </label>
    447. 

  447.     <ul class="md-nav__list" data-md-scrollfix>
    448. 

  448.       
    449. 

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

  450.   <a href="#json-objects-elements-for-the-custom-web-page" class="md-nav__link">
    451. 

  451.     JSON objects &amp; elements for the custom Web page
    452. 

  452.   </a>
    453. 

  453.   
    454. 

  454.     <nav class="md-nav" aria-label="JSON objects &amp; elements for the custom Web page">
    455. 

  455.       <ul class="md-nav__list">
    456. 

  456.         
    457. 

  457.           <li class="md-nav__item">
    458. 

  458.   <a href="#json-document-structure-for-autoconnectaux" class="md-nav__link">
    459. 

  459.      JSON document structure for AutoConnectAux
    460. 

  460.   </a>
    461. 

  461.   
    462. 

  462.     <nav class="md-nav" aria-label=" JSON document structure for AutoConnectAux">
    463. 

  463.       <ul class="md-nav__list">
    464. 

  464.         
    465. 

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

  466.   <a href="#title" class="md-nav__link">
    467. 

  467.      title
    468. 

  468.   </a>
    469. 

  469.   
    470. 

  470. </li>
    471. 

  471.         
    472. 

  472.           <li class="md-nav__item">
    473. 

  473.   <a href="#uri" class="md-nav__link">
    474. 

  474.      uri
    475. 

  475.   </a>
    476. 

  476.   
    477. 

  477. </li>
    478. 

  478.         
    479. 

  479.           <li class="md-nav__item">
    480. 

  480.   <a href="#menu" class="md-nav__link">
    481. 

  481.      menu
    482. 

  482.   </a>
    483. 

  483.   
    484. 

  484. </li>
    485. 

  485.         
    486. 

  486.           <li class="md-nav__item">
    487. 

  487.   <a href="#auth" class="md-nav__link">
    488. 

  488.      auth
    489. 

  489.   </a>
    490. 

  490.   
    491. 

  491. </li>
    492. 

  492.         
    493. 

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

  494.   <a href="#element" class="md-nav__link">
    495. 

  495.      element
    496. 

  496.   </a>
    497. 

  497.   
    498. 

  498. </li>
    499. 

  499.         
    500. 

  500.       </ul>
    501. 

  501.     </nav>
    502. 

  502.   
    503. 

  503. </li>
    504. 

  504.         
    505. 

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

  506.   <a href="#multiple-custom-web-pages-declaration-in-json-document" class="md-nav__link">
    507. 

  507.      Multiple custom Web pages declaration in JSON document
    508. 

  508.   </a>
    509. 

  509.   
    510. 

  510. </li>
    511. 

  511.         
    512. 

  512.           <li class="md-nav__item">
    513. 

  513.   <a href="#json-object-for-autoconnectelements" class="md-nav__link">
    514. 

  514.      JSON object for AutoConnectElements
    515. 

  515.   </a>
    516. 

  516.   
    517. 

  517.     <nav class="md-nav" aria-label=" JSON object for AutoConnectElements">
    518. 

  518.       <ul class="md-nav__list">
    519. 

  519.         
    520. 

  520.           <li class="md-nav__item">
    521. 

  521.   <a href="#name" class="md-nav__link">
    522. 

  522.      name
    523. 

  523.   </a>
    524. 

  524.   
    525. 

  525. </li>
    526. 

  526.         
    527. 

  527.           <li class="md-nav__item">
    528. 

  528.   <a href="#type" class="md-nav__link">
    529. 

  529.      type
    530. 

  530.   </a>
    531. 

  531.   
    532. 

  532. </li>
    533. 

  533.         
    534. 

  534.           <li class="md-nav__item">
    535. 

  535.   <a href="#posterior" class="md-nav__link">
    536. 

  536.      posterior
    537. 

  537.   </a>
    538. 

  538.   
    539. 

  539. </li>
    540. 

  540.         
    541. 

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

  542.   <a href="#key_according_to_type" class="md-nav__link">
    543. 

  543.      key_according_to_type
    544. 

  544.   </a>
    545. 

  545.   
    546. 

  546. </li>
    547. 

  547.         
    548. 

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

  549.   <a href="#acbutton" class="md-nav__link">
    550. 

  550.      ACButton
    551. 

  551.   </a>
    552. 

  552.   
    553. 

  553. </li>
    554. 

  554.         
    555. 

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

  556.   <a href="#accheckbox" class="md-nav__link">
    557. 

  557.      ACCheckbox
    558. 

  558.   </a>
    559. 

  559.   
    560. 

  560. </li>
    561. 

  561.         
    562. 

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

  563.   <a href="#acelement" class="md-nav__link">
    564. 

  564.      ACElement
    565. 

  565.   </a>
    566. 

  566.   
    567. 

  567. </li>
    568. 

  568.         
    569. 

  569.           <li class="md-nav__item">
    570. 

  570.   <a href="#acfile" class="md-nav__link">
    571. 

  571.      ACFile
    572. 

  572.   </a>
    573. 

  573.   
    574. 

  574. </li>
    575. 

  575.         
    576. 

  576.           <li class="md-nav__item">
    577. 

  577.   <a href="#acinput" class="md-nav__link">
    578. 

  578.      ACInput
    579. 

  579.   </a>
    580. 

  580.   
    581. 

  581. </li>
    582. 

  582.         
    583. 

  583.           <li class="md-nav__item">
    584. 

  584.   <a href="#acradio" class="md-nav__link">
    585. 

  585.      ACRadio
    586. 

  586.   </a>
    587. 

  587.   
    588. 

  588. </li>
    589. 

  589.         
    590. 

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

  591.   <a href="#acselect" class="md-nav__link">
    592. 

  592.      ACSelect
    593. 

  593.   </a>
    594. 

  594.   
    595. 

  595. </li>
    596. 

  596.         
    597. 

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

  598.   <a href="#acstyle" class="md-nav__link">
    599. 

  599.      ACStyle
    600. 

  600.   </a>
    601. 

  601.   
    602. 

  602. </li>
    603. 

  603.         
    604. 

  604.           <li class="md-nav__item">
    605. 

  605.   <a href="#acsubmit" class="md-nav__link">
    606. 

  606.      ACSubmit
    607. 

  607.   </a>
    608. 

  608.   
    609. 

  609. </li>
    610. 

  610.         
    611. 

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

  612.   <a href="#actext" class="md-nav__link">
    613. 

  613.      ACText
    614. 

  614.   </a>
    615. 

  615.   
    616. 

  616. </li>
    617. 

  617.         
    618. 

  618.       </ul>
    619. 

  619.     </nav>
    620. 

  620.   
    621. 

  621. </li>
    622. 

  622.         
    623. 

  623.       </ul>
    624. 

  624.     </nav>
    625. 

  625.   
    626. 

  626. </li>
    627. 

  627.       
    628. 

  628.         <li class="md-nav__item">
    629. 

  629.   <a href="#loading-json-document" class="md-nav__link">
    630. 

  630.     Loading JSON document
    631. 

  631.   </a>
    632. 

  632.   
    633. 

  633.     <nav class="md-nav" aria-label="Loading JSON document">
    634. 

  634.       <ul class="md-nav__list">
    635. 

  635.         
    636. 

  636.           <li class="md-nav__item">
    637. 

  637.   <a href="#loading-to-autoconnect" class="md-nav__link">
    638. 

  638.      Loading to AutoConnect
    639. 

  639.   </a>
    640. 

  640.   
    641. 

  641. </li>
    642. 

  642.         
    643. 

  643.           <li class="md-nav__item">
    644. 

  644.   <a href="#loading-from-the-streamed-file" class="md-nav__link">
    645. 

  645.      Loading from the streamed file
    646. 

  646.   </a>
    647. 

  647.   
    648. 

  648. </li>
    649. 

  649.         
    650. 

  650.           <li class="md-nav__item">
    651. 

  651.   <a href="#adjust-the-json-document-buffer-size" class="md-nav__link">
    652. 

  652.      Adjust the JSON document buffer size
    653. 

  653.   </a>
    654. 

  654.   
    655. 

  655.     <nav class="md-nav" aria-label=" Adjust the JSON document buffer size">
    656. 

  656.       <ul class="md-nav__list">
    657. 

  657.         
    658. 

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

  659.   <a href="#autoconnect_jsonbuffer_size" class="md-nav__link">
    660. 

  660.     AUTOCONNECT_JSONBUFFER_SIZE
    661. 

  661.   </a>
    662. 

  662.   
    663. 

  663. </li>
    664. 

  664.         
    665. 

  665.           <li class="md-nav__item">
    666. 

  666.   <a href="#autoconnect_jsondocument_size" class="md-nav__link">
    667. 

  667.     AUTOCONNECT_JSONDOCUMENT_SIZE
    668. 

  668.   </a>
    669. 

  669.   
    670. 

  670. </li>
    671. 

  671.         
    672. 

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

  673.   <a href="#autoconnect_jsonpsram_size" class="md-nav__link">
    674. 

  674.     AUTOCONNECT_JSONPSRAM_SIZE
    675. 

  675.   </a>
    676. 

  676.   
    677. 

  677. </li>
    678. 

  678.         
    679. 

  679.       </ul>
    680. 

  680.     </nav>
    681. 

  681.   
    682. 

  682. </li>
    683. 

  683.         
    684. 

  684.       </ul>
    685. 

  685.     </nav>
    686. 

  686.   
    687. 

  687. </li>
    688. 

  688.       
    689. 

  689.         <li class="md-nav__item">
    690. 

  690.   <a href="#saving-json-document" class="md-nav__link">
    691. 

  691.     Saving JSON document
    692. 

  692.   </a>
    693. 

  693.   
    694. 

  694. </li>
    695. 

  695.       
    696. 

  696.     </ul>
    697. 

  697.   
    698. 

  698. </nav>
    699. 

  699.     
    700. 

  700.   </li>
    701. 

  701. 

  702.         
    703. 

  703.           
    704. 

  704.           
    705. 

  705.           
    706. 

  706. 

  707. 

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

  709.     <a href="achandling.html" class="md-nav__link">
    710. 

  710.       Handling the custom Web pages
    711. 

  711.     </a>
    712. 

  712.   </li>
    713. 

  713. 

  714.         
    715. 

  715.       </ul>
    716. 

  716.     </nav>
    717. 

  717.   </li>
    718. 

  718. 

  719.     
    720. 

  720.       
    721. 

  721.       
    722. 

  722.       
    723. 

  723. 

  724. 

  725.   <li class="md-nav__item md-nav__item--nested">
    726. 

  726.     
    727. 

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

  728.     <label class="md-nav__link" for="nav-7">
    729. 

  729.       OTA Updates
    730. 

  730.       <span class="md-nav__icon md-icon"></span>
    731. 

  731.     </label>
    732. 

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

  733.       <label class="md-nav__title" for="nav-7">
    734. 

  734.         <span class="md-nav__icon md-icon"></span>
    735. 

  735.         OTA Updates
    736. 

  736.       </label>
    737. 

  737.       <ul class="md-nav__list" data-md-scrollfix>
    738. 

  738.         
    739. 

  739.         
    740. 

  740.           
    741. 

  741.           
    742. 

  742.           
    743. 

  743. 

  744. 

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

  746.     <a href="otaupdate.html" class="md-nav__link">
    747. 

  747.       OTA Updates
    748. 

  748.     </a>
    749. 

  749.   </li>
    750. 

  750. 

  751.         
    752. 

  752.           
    753. 

  753.           
    754. 

  754.           
    755. 

  755. 

  756. 

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

  758.     <a href="otabrowser.html" class="md-nav__link">
    759. 

  759.       Using Web Browser
    760. 

  760.     </a>
    761. 

  761.   </li>
    762. 

  762. 

  763.         
    764. 

  764.           
    765. 

  765.           
    766. 

  766.           
    767. 

  767. 

  768. 

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

  770.     <a href="otaserver.html" class="md-nav__link">
    771. 

  771.       Using Update Server
    772. 

  772.     </a>
    773. 

  773.   </li>
    774. 

  774. 

  775.         
    776. 

  776.       </ul>
    777. 

  777.     </nav>
    778. 

  778.   </li>
    779. 

  779. 

  780.     
    781. 

  781.       
    782. 

  782.       
    783. 

  783.       
    784. 

  784. 

  785. 

  786.   <li class="md-nav__item md-nav__item--nested">
    787. 

  787.     
    788. 

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

  789.     <label class="md-nav__link" for="nav-8">
    790. 

  790.       Library APIs
    791. 

  791.       <span class="md-nav__icon md-icon"></span>
    792. 

  792.     </label>
    793. 

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

  794.       <label class="md-nav__title" for="nav-8">
    795. 

  795.         <span class="md-nav__icon md-icon"></span>
    796. 

  796.         Library APIs
    797. 

  797.       </label>
    798. 

  798.       <ul class="md-nav__list" data-md-scrollfix>
    799. 

  799.         
    800. 

  800.         
    801. 

  801.           
    802. 

  802.           
    803. 

  803.           
    804. 

  804. 

  805. 

  806.   <li class="md-nav__item">
    807. 

  807.     <a href="api.html" class="md-nav__link">
    808. 

  808.       AutoConnect API
    809. 

  809.     </a>
    810. 

  810.   </li>
    811. 

  811. 

  812.         
    813. 

  813.           
    814. 

  814.           
    815. 

  815.           
    816. 

  816. 

  817. 

  818.   <li class="md-nav__item">
    819. 

  819.     <a href="apiaux.html" class="md-nav__link">
    820. 

  820.       AutoConnectAux API
    821. 

  821.     </a>
    822. 

  822.   </li>
    823. 

  823. 

  824.         
    825. 

  825.           
    826. 

  826.           
    827. 

  827.           
    828. 

  828. 

  829. 

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

  831.     <a href="apiconfig.html" class="md-nav__link">
    832. 

  832.       AutoConnectConfig API
    833. 

  833.     </a>
    834. 

  834.   </li>
    835. 

  835. 

  836.         
    837. 

  837.           
    838. 

  838.           
    839. 

  839.           
    840. 

  840. 

  841. 

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

  843.     <a href="apielements.html" class="md-nav__link">
    844. 

  844.       AutoConnectElements API
    845. 

  845.     </a>
    846. 

  846.   </li>
    847. 

  847. 

  848.         
    849. 

  849.           
    850. 

  850.           
    851. 

  851.           
    852. 

  852. 

  853. 

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

  855.     <a href="apiupdate.html" class="md-nav__link">
    856. 

  856.       AutoConnectUpdate API
    857. 

  857.     </a>
    858. 

  858.   </li>
    859. 

  859. 

  860.         
    861. 

  861.           
    862. 

  862.           
    863. 

  863.           
    864. 

  864. 

  865. 

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

  867.     <a href="apiextra.html" class="md-nav__link">
    868. 

  868.       Something extra
    869. 

  869.     </a>
    870. 

  870.   </li>
    871. 

  871. 

  872.         
    873. 

  873.       </ul>
    874. 

  874.     </nav>
    875. 

  875.   </li>
    876. 

  876. 

  877.     
    878. 

  878.       
    879. 

  879.       
    880. 

  880.       
    881. 

  881. 

  882. 

  883.   <li class="md-nav__item md-nav__item--nested">
    884. 

  884.     
    885. 

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

  886.     <label class="md-nav__link" for="nav-9">
    887. 

  887.       Examples
    888. 

  888.       <span class="md-nav__icon md-icon"></span>
    889. 

  889.     </label>
    890. 

  890.     <nav class="md-nav" aria-label="Examples" data-md-level="1">
    891. 

  891.       <label class="md-nav__title" for="nav-9">
    892. 

  892.         <span class="md-nav__icon md-icon"></span>
    893. 

  893.         Examples
    894. 

  894.       </label>
    895. 

  895.       <ul class="md-nav__list" data-md-scrollfix>
    896. 

  896.         
    897. 

  897.         
    898. 

  898.           
    899. 

  899.           
    900. 

  900.           
    901. 

  901. 

  902. 

  903.   <li class="md-nav__item">
    904. 

  904.     <a href="howtoembed.html" class="md-nav__link">
    905. 

  905.       How to embed
    906. 

  906.     </a>
    907. 

  907.   </li>
    908. 

  908. 

  909.         
    910. 

  910.           
    911. 

  911.           
    912. 

  912.           
    913. 

  913. 

  914. 

  915.   <li class="md-nav__item">
    916. 

  916.     <a href="datatips.html" class="md-nav__link">
    917. 

  917.       Tips for data conversion
    918. 

  918.     </a>
    919. 

  919.   </li>
    920. 

  920. 

  921.         
    922. 

  922.           
    923. 

  923.           
    924. 

  924.           
    925. 

  925. 

  926. 

  927.   <li class="md-nav__item">
    928. 

  928.     <a href="menuize.html" class="md-nav__link">
    929. 

  929.       Attach the menus
    930. 

  930.     </a>
    931. 

  931.   </li>
    932. 

  932. 

  933.         
    934. 

  934.           
    935. 

  935.           
    936. 

  936.           
    937. 

  937. 

  938. 

  939.   <li class="md-nav__item">
    940. 

  940.     <a href="wojson.html" class="md-nav__link">
    941. 

  941.       Custom Web pages w/o JSON
    942. 

  942.     </a>
    943. 

  943.   </li>
    944. 

  944. 

  945.         
    946. 

  946.       </ul>
    947. 

  947.     </nav>
    948. 

  948.   </li>
    949. 

  949. 

  950.     
    951. 

  951.       
    952. 

  952.       
    953. 

  953.       
    954. 

  954. 

  955. 

  956.   <li class="md-nav__item md-nav__item--nested">
    957. 

  957.     
    958. 

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

  959.     <label class="md-nav__link" for="nav-10">
    960. 

  960.       Appendix
    961. 

  961.       <span class="md-nav__icon md-icon"></span>
    962. 

  962.     </label>
    963. 

  963.     <nav class="md-nav" aria-label="Appendix" data-md-level="1">
    964. 

  964.       <label class="md-nav__title" for="nav-10">
    965. 

  965.         <span class="md-nav__icon md-icon"></span>
    966. 

  966.         Appendix
    967. 

  967.       </label>
    968. 

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

  969.         
    970. 

  970.         
    971. 

  971.           
    972. 

  972.           
    973. 

  973.           
    974. 

  974. 

  975. 

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

  977.     <a href="lsbegin.html" class="md-nav__link">
    978. 

  978.       Inside AutoConnect::begin
    979. 

  979.     </a>
    980. 

  980.   </li>
    981. 

  981. 

  982.         
    983. 

  983.           
    984. 

  984.           
    985. 

  985.           
    986. 

  986. 

  987. 

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

  989.     <a href="credit.html" class="md-nav__link">
    990. 

  990.       Saved credentials access
    991. 

  991.     </a>
    992. 

  992.   </li>
    993. 

  993. 

  994.         
    995. 

  995.           
    996. 

  996.           
    997. 

  997.           
    998. 

  998. 

  999. 

  1000.   <li class="md-nav__item">
    1001. 

  1001.     <a href="acupload.html" class="md-nav__link">
    1002. 

  1002.       File upload handler
    1003. 

  1003.     </a>
    1004. 

  1004.   </li>
    1005. 

  1005. 

  1006.         
    1007. 

  1007.           
    1008. 

  1008.           
    1009. 

  1009.           
    1010. 

  1010. 

  1011. 

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

  1013.     <a href="colorized.html" class="md-nav__link">
    1014. 

  1014.       Custom colorized
    1015. 

  1015.     </a>
    1016. 

  1016.   </li>
    1017. 

  1017. 

  1018.         
    1019. 

  1019.           
    1020. 

  1020.           
    1021. 

  1021.           
    1022. 

  1022. 

  1023. 

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

  1025.     <a href="changelabel.html" class="md-nav__link">
    1026. 

  1026.       Change label text
    1027. 

  1027.     </a>
    1028. 

  1028.   </li>
    1029. 

  1029. 

  1030.         
    1031. 

  1031.       </ul>
    1032. 

  1032.     </nav>
    1033. 

  1033.   </li>
    1034. 

  1034. 

  1035.     
    1036. 

  1036.       
    1037. 

  1037.       
    1038. 

  1038.       
    1039. 

  1039. 

  1040. 

  1041.   <li class="md-nav__item">
    1042. 

  1042.     <a href="faq.html" class="md-nav__link">
    1043. 

  1043.       FAQ
    1044. 

  1044.     </a>
    1045. 

  1045.   </li>
    1046. 

  1046. 

  1047.     
    1048. 

  1048.       
    1049. 

  1049.       
    1050. 

  1050.       
    1051. 

  1051. 

  1052. 

  1053.   <li class="md-nav__item">
    1054. 

  1054.     <a href="changelog.html" class="md-nav__link">
    1055. 

  1055.       Change log
    1056. 

  1056.     </a>
    1057. 

  1057.   </li>
    1058. 

  1058. 

  1059.     
    1060. 

  1060.       
    1061. 

  1061.       
    1062. 

  1062.       
    1063. 

  1063. 

  1064. 

  1065.   <li class="md-nav__item">
    1066. 

  1066.     <a href="license.html" class="md-nav__link">
    1067. 

  1067.       License
    1068. 

  1068.     </a>
    1069. 

  1069.   </li>
    1070. 

  1070. 

  1071.     
    1072. 

  1072.   </ul>
    1073. 

  1073. </nav>
    1074. 

  1074.                   </div>
    1075. 

  1075.                 </div>
    1076. 

  1076.               </div>
    1077. 

  1077.             
    1078. 

  1078.             
    1079. 

  1079.               <div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
    1080. 

  1080.                 <div class="md-sidebar__scrollwrap">
    1081. 

  1081.                   <div class="md-sidebar__inner">
    1082. 

  1082.                     
    1083. 

  1083. <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
    1084. 

  1084.   
    1085. 

  1085.   
    1086. 

  1086.   
    1087. 

  1087.     <label class="md-nav__title" for="__toc">
    1088. 

  1088.       <span class="md-nav__icon md-icon"></span>
    1089. 

  1089.       Table of contents
    1090. 

  1090.     </label>
    1091. 

  1091.     <ul class="md-nav__list" data-md-scrollfix>
    1092. 

  1092.       
    1093. 

  1093.         <li class="md-nav__item">
    1094. 

  1094.   <a href="#json-objects-elements-for-the-custom-web-page" class="md-nav__link">
    1095. 

  1095.     JSON objects &amp; elements for the custom Web page
    1096. 

  1096.   </a>
    1097. 

  1097.   
    1098. 

  1098.     <nav class="md-nav" aria-label="JSON objects &amp; elements for the custom Web page">
    1099. 

  1099.       <ul class="md-nav__list">
    1100. 

  1100.         
    1101. 

  1101.           <li class="md-nav__item">
    1102. 

  1102.   <a href="#json-document-structure-for-autoconnectaux" class="md-nav__link">
    1103. 

  1103.      JSON document structure for AutoConnectAux
    1104. 

  1104.   </a>
    1105. 

  1105.   
    1106. 

  1106.     <nav class="md-nav" aria-label=" JSON document structure for AutoConnectAux">
    1107. 

  1107.       <ul class="md-nav__list">
    1108. 

  1108.         
    1109. 

  1109.           <li class="md-nav__item">
    1110. 

  1110.   <a href="#title" class="md-nav__link">
    1111. 

  1111.      title
    1112. 

  1112.   </a>
    1113. 

  1113.   
    1114. 

  1114. </li>
    1115. 

  1115.         
    1116. 

  1116.           <li class="md-nav__item">
    1117. 

  1117.   <a href="#uri" class="md-nav__link">
    1118. 

  1118.      uri
    1119. 

  1119.   </a>
    1120. 

  1120.   
    1121. 

  1121. </li>
    1122. 

  1122.         
    1123. 

  1123.           <li class="md-nav__item">
    1124. 

  1124.   <a href="#menu" class="md-nav__link">
    1125. 

  1125.      menu
    1126. 

  1126.   </a>
    1127. 

  1127.   
    1128. 

  1128. </li>
    1129. 

  1129.         
    1130. 

  1130.           <li class="md-nav__item">
    1131. 

  1131.   <a href="#auth" class="md-nav__link">
    1132. 

  1132.      auth
    1133. 

  1133.   </a>
    1134. 

  1134.   
    1135. 

  1135. </li>
    1136. 

  1136.         
    1137. 

  1137.           <li class="md-nav__item">
    1138. 

  1138.   <a href="#element" class="md-nav__link">
    1139. 

  1139.      element
    1140. 

  1140.   </a>
    1141. 

  1141.   
    1142. 

  1142. </li>
    1143. 

  1143.         
    1144. 

  1144.       </ul>
    1145. 

  1145.     </nav>
    1146. 

  1146.   
    1147. 

  1147. </li>
    1148. 

  1148.         
    1149. 

  1149.           <li class="md-nav__item">
    1150. 

  1150.   <a href="#multiple-custom-web-pages-declaration-in-json-document" class="md-nav__link">
    1151. 

  1151.      Multiple custom Web pages declaration in JSON document
    1152. 

  1152.   </a>
    1153. 

  1153.   
    1154. 

  1154. </li>
    1155. 

  1155.         
    1156. 

  1156.           <li class="md-nav__item">
    1157. 

  1157.   <a href="#json-object-for-autoconnectelements" class="md-nav__link">
    1158. 

  1158.      JSON object for AutoConnectElements
    1159. 

  1159.   </a>
    1160. 

  1160.   
    1161. 

  1161.     <nav class="md-nav" aria-label=" JSON object for AutoConnectElements">
    1162. 

  1162.       <ul class="md-nav__list">
    1163. 

  1163.         
    1164. 

  1164.           <li class="md-nav__item">
    1165. 

  1165.   <a href="#name" class="md-nav__link">
    1166. 

  1166.      name
    1167. 

  1167.   </a>
    1168. 

  1168.   
    1169. 

  1169. </li>
    1170. 

  1170.         
    1171. 

  1171.           <li class="md-nav__item">
    1172. 

  1172.   <a href="#type" class="md-nav__link">
    1173. 

  1173.      type
    1174. 

  1174.   </a>
    1175. 

  1175.   
    1176. 

  1176. </li>
    1177. 

  1177.         
    1178. 

  1178.           <li class="md-nav__item">
    1179. 

  1179.   <a href="#posterior" class="md-nav__link">
    1180. 

  1180.      posterior
    1181. 

  1181.   </a>
    1182. 

  1182.   
    1183. 

  1183. </li>
    1184. 

  1184.         
    1185. 

  1185.           <li class="md-nav__item">
    1186. 

  1186.   <a href="#key_according_to_type" class="md-nav__link">
    1187. 

  1187.      key_according_to_type
    1188. 

  1188.   </a>
    1189. 

  1189.   
    1190. 

  1190. </li>
    1191. 

  1191.         
    1192. 

  1192.           <li class="md-nav__item">
    1193. 

  1193.   <a href="#acbutton" class="md-nav__link">
    1194. 

  1194.      ACButton
    1195. 

  1195.   </a>
    1196. 

  1196.   
    1197. 

  1197. </li>
    1198. 

  1198.         
    1199. 

  1199.           <li class="md-nav__item">
    1200. 

  1200.   <a href="#accheckbox" class="md-nav__link">
    1201. 

  1201.      ACCheckbox
    1202. 

  1202.   </a>
    1203. 

  1203.   
    1204. 

  1204. </li>
    1205. 

  1205.         
    1206. 

  1206.           <li class="md-nav__item">
    1207. 

  1207.   <a href="#acelement" class="md-nav__link">
    1208. 

  1208.      ACElement
    1209. 

  1209.   </a>
    1210. 

  1210.   
    1211. 

  1211. </li>
    1212. 

  1212.         
    1213. 

  1213.           <li class="md-nav__item">
    1214. 

  1214.   <a href="#acfile" class="md-nav__link">
    1215. 

  1215.      ACFile
    1216. 

  1216.   </a>
    1217. 

  1217.   
    1218. 

  1218. </li>
    1219. 

  1219.         
    1220. 

  1220.           <li class="md-nav__item">
    1221. 

  1221.   <a href="#acinput" class="md-nav__link">
    1222. 

  1222.      ACInput
    1223. 

  1223.   </a>
    1224. 

  1224.   
    1225. 

  1225. </li>
    1226. 

  1226.         
    1227. 

  1227.           <li class="md-nav__item">
    1228. 

  1228.   <a href="#acradio" class="md-nav__link">
    1229. 

  1229.      ACRadio
    1230. 

  1230.   </a>
    1231. 

  1231.   
    1232. 

  1232. </li>
    1233. 

  1233.         
    1234. 

  1234.           <li class="md-nav__item">
    1235. 

  1235.   <a href="#acselect" class="md-nav__link">
    1236. 

  1236.      ACSelect
    1237. 

  1237.   </a>
    1238. 

  1238.   
    1239. 

  1239. </li>
    1240. 

  1240.         
    1241. 

  1241.           <li class="md-nav__item">
    1242. 

  1242.   <a href="#acstyle" class="md-nav__link">
    1243. 

  1243.      ACStyle
    1244. 

  1244.   </a>
    1245. 

  1245.   
    1246. 

  1246. </li>
    1247. 

  1247.         
    1248. 

  1248.           <li class="md-nav__item">
    1249. 

  1249.   <a href="#acsubmit" class="md-nav__link">
    1250. 

  1250.      ACSubmit
    1251. 

  1251.   </a>
    1252. 

  1252.   
    1253. 

  1253. </li>
    1254. 

  1254.         
    1255. 

  1255.           <li class="md-nav__item">
    1256. 

  1256.   <a href="#actext" class="md-nav__link">
    1257. 

  1257.      ACText
    1258. 

  1258.   </a>
    1259. 

  1259.   
    1260. 

  1260. </li>
    1261. 

  1261.         
    1262. 

  1262.       </ul>
    1263. 

  1263.     </nav>
    1264. 

  1264.   
    1265. 

  1265. </li>
    1266. 

  1266.         
    1267. 

  1267.       </ul>
    1268. 

  1268.     </nav>
    1269. 

  1269.   
    1270. 

  1270. </li>
    1271. 

  1271.       
    1272. 

  1272.         <li class="md-nav__item">
    1273. 

  1273.   <a href="#loading-json-document" class="md-nav__link">
    1274. 

  1274.     Loading JSON document
    1275. 

  1275.   </a>
    1276. 

  1276.   
    1277. 

  1277.     <nav class="md-nav" aria-label="Loading JSON document">
    1278. 

  1278.       <ul class="md-nav__list">
    1279. 

  1279.         
    1280. 

  1280.           <li class="md-nav__item">
    1281. 

  1281.   <a href="#loading-to-autoconnect" class="md-nav__link">
    1282. 

  1282.      Loading to AutoConnect
    1283. 

  1283.   </a>
    1284. 

  1284.   
    1285. 

  1285. </li>
    1286. 

  1286.         
    1287. 

  1287.           <li class="md-nav__item">
    1288. 

  1288.   <a href="#loading-from-the-streamed-file" class="md-nav__link">
    1289. 

  1289.      Loading from the streamed file
    1290. 

  1290.   </a>
    1291. 

  1291.   
    1292. 

  1292. </li>
    1293. 

  1293.         
    1294. 

  1294.           <li class="md-nav__item">
    1295. 

  1295.   <a href="#adjust-the-json-document-buffer-size" class="md-nav__link">
    1296. 

  1296.      Adjust the JSON document buffer size
    1297. 

  1297.   </a>
    1298. 

  1298.   
    1299. 

  1299.     <nav class="md-nav" aria-label=" Adjust the JSON document buffer size">
    1300. 

  1300.       <ul class="md-nav__list">
    1301. 

  1301.         
    1302. 

  1302.           <li class="md-nav__item">
    1303. 

  1303.   <a href="#autoconnect_jsonbuffer_size" class="md-nav__link">
    1304. 

  1304.     AUTOCONNECT_JSONBUFFER_SIZE
    1305. 

  1305.   </a>
    1306. 

  1306.   
    1307. 

  1307. </li>
    1308. 

  1308.         
    1309. 

  1309.           <li class="md-nav__item">
    1310. 

  1310.   <a href="#autoconnect_jsondocument_size" class="md-nav__link">
    1311. 

  1311.     AUTOCONNECT_JSONDOCUMENT_SIZE
    1312. 

  1312.   </a>
    1313. 

  1313.   
    1314. 

  1314. </li>
    1315. 

  1315.         
    1316. 

  1316.           <li class="md-nav__item">
    1317. 

  1317.   <a href="#autoconnect_jsonpsram_size" class="md-nav__link">
    1318. 

  1318.     AUTOCONNECT_JSONPSRAM_SIZE
    1319. 

  1319.   </a>
    1320. 

  1320.   
    1321. 

  1321. </li>
    1322. 

  1322.         
    1323. 

  1323.       </ul>
    1324. 

  1324.     </nav>
    1325. 

  1325.   
    1326. 

  1326. </li>
    1327. 

  1327.         
    1328. 

  1328.       </ul>
    1329. 

  1329.     </nav>
    1330. 

  1330.   
    1331. 

  1331. </li>
    1332. 

  1332.       
    1333. 

  1333.         <li class="md-nav__item">
    1334. 

  1334.   <a href="#saving-json-document" class="md-nav__link">
    1335. 

  1335.     Saving JSON document
    1336. 

  1336.   </a>
    1337. 

  1337.   
    1338. 

  1338. </li>
    1339. 

  1339.       
    1340. 

  1340.     </ul>
    1341. 

  1341.   
    1342. 

  1342. </nav>
    1343. 

  1343.                   </div>
    1344. 

  1344.                 </div>
    1345. 

  1345.               </div>
    1346. 

  1346.             
    1347. 

  1347.           
    1348. 

  1348.           <div class="md-content">
    1349. 

  1349.             <article class="md-content__inner md-typeset">
    1350. 

  1350.               
    1351. 

  1351.                 
    1352. 

  1352.                 
    1353. 

  1353.                   <h1>Custom Web pages with JSON</h1>
    1354. 

  1354.                 
    1355. 

  1355.                 <p>You can embed custom Web pages written in <a href="https://www.json.org/index.html"><strong>JSON</strong></a> into AutoConnect without AutoConnectAux &amp; AutoConnectElements declaration. Custom Web page declaration by JSON can  embed in the Sketch as a fixed string or can store in the external file such as SPIFFS for stream loading. Also, you can also load and save AutoConnectElements objects individually.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup></p>
    1356. 

  1356. <p>By providing the following JSON document to AutoConnect, you can include the custom Web page like the below:</p>
    1357. 

  1357. <div style="float:left;width:50%;height:470px;overflow:auto"><img src="images/ac_json.png"></div>
    1358. 

  1358. <p><img style="margin-left:30px;width:40%;height:470px;" src="images/ac_mqtt_setting.png"></p>
    1359. 

  1359. <p>A JSON document for AutoConnect can contain the custom Web page multiple. You can further reduce the Sketch process by loading multiple pages of JSON document at once.</p>
    1360. 

  1360. <div class="admonition caution">
    1361. 

  1361. <p class="admonition-title">Adopt ArduinoJson v5 or v6</p>
    1362. 

  1362. <p>To handle AutoConnectAux and AutoConnectElements written in JSON, you need to install the ArduinoJson library. You can adopt either <a href="https://arduinojson.org/v5/doc/installation/">version 5</a> or <a href="https://arduinojson.org/v6/doc/installation/">version 6</a> for the ArduinoJson. AutoConnect supports both versions.</p>
    1363. 

  1363. </div>
    1364. 

  1364. <h2 id="json-objects-elements-for-the-custom-web-page">JSON objects &amp; elements for the custom Web page<a class="headerlink" href="#json-objects-elements-for-the-custom-web-page" title="Permanent link">&para;</a></h2>
    1365. 

  1365. <h3 id="json-document-structure-for-autoconnectaux"><i class="fa fa-caret-right"></i> JSON document structure for AutoConnectAux<a class="headerlink" href="#json-document-structure-for-autoconnectaux" title="Permanent link">&para;</a></h3>
    1366. 

  1366. <p>AutoConnectAux will configure custom Web pages with JSON objects. The elements that make up the object are as follows:</p>
    1367. 

  1367. <div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><span style="color: #f8f8f2">{</span>
    1368. 

  1368.   <span style="color: #e6db74">&quot;title&quot;</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">title</span><span style="color: #f8f8f2">,</span>
    1369. 

  1369.   <span style="color: #e6db74">&quot;uri&quot;</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">uri</span><span style="color: #f8f8f2">,</span>
    1370. 

  1370.   <span style="color: #e6db74">&quot;menu&quot;</span> <span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span> <span style="color: #f92672">|</span> <span style="color: #66d9ef">false</span><span style="color: #f8f8f2">,</span>
    1371. 

  1371.   <span style="color: #e6db74">&quot;auth&quot;</span><span style="color: #f92672">:</span> <span style="color: #a6e22e">authentication</span><span style="color: #f8f8f2">,</span>
    1372. 

  1372.   <span style="color: #e6db74">&quot;element&quot;</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">element_array</span>
    1373. 

  1373. <span style="color: #f8f8f2">}</span>
    1374. 

  1374. </code></pre></div>
    1375. 

  1375. <h4 id="title"><i class="fa fa-key"></i> <strong>title</strong><a class="headerlink" href="#title" title="Permanent link">&para;</a></h4>
    1376. 

  1376. <dl>
    1377. 

  1377. <dd>A title of the custom Web page. This is string value and specifies the <em>title</em> will be displayed in the AutoConnection menu.</dd>
    1378. 

  1378. </dl>
    1379. 

  1379. <h4 id="uri"><i class="fa fa-key"></i> <strong>uri</strong><a class="headerlink" href="#uri" title="Permanent link">&para;</a></h4>
    1380. 

  1380. <dl>
    1381. 

  1381. <dd>String of URI path that specifies where to place the custom Web page. It needs to be a location from the root path including '<strong>/</strong>'.</dd>
    1382. 

  1382. </dl>
    1383. 

  1383. <h4 id="menu"><i class="fa fa-key"></i> <strong>menu</strong><a class="headerlink" href="#menu" title="Permanent link">&para;</a></h4>
    1384. 

  1384. <dl>
    1385. 

  1385. <dd>This is a Boolean value indicating whether to include the custom Web page in the AutoConnect menu. If the page only responds to another page and you want to prevent the direct use from the menu, you can exclude from the AutoConnect menu. If this key is false, it will not appear in the menu.</dd>
    1386. 

  1386. </dl>
    1387. 

  1387. <h4 id="auth"><i class="fa fa-key"></i> <strong>auth</strong><a class="headerlink" href="#auth" title="Permanent link">&para;</a></h4>
    1388. 

  1388. <dl>
    1389. 

  1389. <dd>It allows that this page requires authentication. An <em>authentication</em> specifies the following string that represents the authentication scheme.</dd>
    1390. 

  1390. <dd>
    1391. 

  1391. <ul>
    1392. 

  1392. <li><strong>NONE</strong>: No authentication. This is default.</li>
    1393. 

  1393. </ul>
    1394. 

  1394. </dd>
    1395. 

  1395. <dd>
    1396. 

  1396. <ul>
    1397. 

  1397. <li><strong>BASIC</strong>: Apply Basic scheme.</li>
    1398. 

  1398. </ul>
    1399. 

  1399. </dd>
    1400. 

  1400. <dd>
    1401. 

  1401. <ul>
    1402. 

  1402. <li><strong>DIGEST</strong>: Apply Digest scheme.</li>
    1403. 

  1403. </ul>
    1404. 

  1404. </dd>
    1405. 

  1405. </dl>
    1406. 

  1406. <h4 id="element"><i class="fa fa-key"></i> <strong>element</strong><a class="headerlink" href="#element" title="Permanent link">&para;</a></h4>
    1407. 

  1407. <dl>
    1408. 

  1408. <dd>Describe an array of JSON objects as <em>element_array</em>. It is a JSON object array of the <a href="#json-object-for-autoconnectelements">AutoConnectElements</a> that make up the custom Web page.</dd>
    1409. 

  1409. </dl>
    1410. 

  1410. <div class="admonition note">
    1411. 

  1411. <p class="admonition-title">Order of elements on a custom Web page</p>
    1412. 

  1412. <p>The order in which AutoConnectElements are placed on a custom Web page is the order in the JSON document.</p>
    1413. 

  1413. </div>
    1414. 

  1414. <h3 id="multiple-custom-web-pages-declaration-in-json-document"><i class="fa fa-copy"></i> Multiple custom Web pages declaration in JSON document<a class="headerlink" href="#multiple-custom-web-pages-declaration-in-json-document" title="Permanent link">&para;</a></h3>
    1415. 

  1415. <p>You can put declarations of multiple custom Web pages in one JSON document. In that case, declare an array of each custom Web page with JSON. The following JSON document contains three custom Web pages:</p>
    1416. 

  1416. <div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><span style="color: #f8f8f2">[</span>
    1417. 

  1417.   <span style="color: #f8f8f2">{</span>
    1418. 

  1418.     <span style="color: #f92672">&quot;title&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Page 1 title&quot;</span><span style="color: #f8f8f2">,</span>
    1419. 

  1419.     <span style="color: #f92672">&quot;uri&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">,</span>
    1420. 

  1420.     <span style="color: #f92672">&quot;menu&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
    1421. 

  1421.     <span style="color: #f92672">&quot;element&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #f8f8f2">[</span>
    1422. 

  1422.       <span style="color: #f8f8f2">{</span>
    1423. 

  1423.         <span style="color: #f92672">&quot;name&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;caption&quot;</span><span style="color: #f8f8f2">,</span>
    1424. 

  1424.         <span style="color: #f92672">&quot;type&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACText&quot;</span><span style="color: #f8f8f2">,</span>
    1425. 

  1425.         <span style="color: #f92672">&quot;value&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;hello, world&quot;</span>
    1426. 

  1426.       <span style="color: #f8f8f2">},</span>
    1427. 

  1427.       <span style="color: #f8f8f2">{</span>
    1428. 

  1428.         <span style="color: #f92672">&quot;name&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;send&quot;</span><span style="color: #f8f8f2">,</span>
    1429. 

  1429.         <span style="color: #f92672">&quot;type&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACSubmit&quot;</span><span style="color: #f8f8f2">,</span>
    1430. 

  1430.         <span style="color: #f92672">&quot;uri&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;/page2&quot;</span>
    1431. 

  1431.       <span style="color: #f8f8f2">}</span>
    1432. 

  1432.     <span style="color: #f8f8f2">]</span>
    1433. 

  1433.   <span style="color: #f8f8f2">},</span>
    1434. 

  1434.   <span style="color: #f8f8f2">{</span>
    1435. 

  1435.     <span style="color: #f92672">&quot;title&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Page 1 title&quot;</span><span style="color: #f8f8f2">,</span>
    1436. 

  1436.     <span style="color: #f92672">&quot;uri&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;/page2&quot;</span><span style="color: #f8f8f2">,</span>
    1437. 

  1437.     <span style="color: #f92672">&quot;menu&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #66d9ef">false</span><span style="color: #f8f8f2">,</span>
    1438. 

  1438.     <span style="color: #f92672">&quot;element&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #f8f8f2">[</span>
    1439. 

  1439.       <span style="color: #f8f8f2">{</span>
    1440. 

  1440.         <span style="color: #f92672">&quot;name&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;responds&quot;</span><span style="color: #f8f8f2">,</span>
    1441. 

  1441.         <span style="color: #f92672">&quot;type&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACText&quot;</span><span style="color: #f8f8f2">,</span>
    1442. 

  1442.         <span style="color: #f92672">&quot;value&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Good day&quot;</span>
    1443. 

  1443.       <span style="color: #f8f8f2">},</span>
    1444. 

  1444.       <span style="color: #f8f8f2">{</span>
    1445. 

  1445.         <span style="color: #f92672">&quot;name&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;send&quot;</span><span style="color: #f8f8f2">,</span>
    1446. 

  1446.         <span style="color: #f92672">&quot;type&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACSubmit&quot;</span><span style="color: #f8f8f2">,</span>
    1447. 

  1447.         <span style="color: #f92672">&quot;uri&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;/page3&quot;</span>
    1448. 

  1448.       <span style="color: #f8f8f2">}</span>
    1449. 

  1449.     <span style="color: #f8f8f2">]</span>
    1450. 

  1450.   <span style="color: #f8f8f2">},</span>
    1451. 

  1451.   <span style="color: #f8f8f2">{</span>
    1452. 

  1452.     <span style="color: #f92672">&quot;title&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Page 3 title&quot;</span><span style="color: #f8f8f2">,</span>
    1453. 

  1453.     <span style="color: #f92672">&quot;uri&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;/page3&quot;</span><span style="color: #f8f8f2">,</span>
    1454. 

  1454.     <span style="color: #f92672">&quot;menu&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
    1455. 

  1455.     <span style="color: #f92672">&quot;element&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #f8f8f2">[</span>
    1456. 

  1456.       <span style="color: #f8f8f2">{</span>
    1457. 

  1457.         <span style="color: #f92672">&quot;name&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;responds&quot;</span><span style="color: #f8f8f2">,</span>
    1458. 

  1458.         <span style="color: #f92672">&quot;type&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACText&quot;</span><span style="color: #f8f8f2">,</span>
    1459. 

  1459.         <span style="color: #f92672">&quot;value&quot;</span> <span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;bye&quot;</span>
    1460. 

  1460.       <span style="color: #f8f8f2">}</span>
    1461. 

  1461.     <span style="color: #f8f8f2">]</span>
    1462. 

  1462.   <span style="color: #f8f8f2">}</span>
    1463. 

  1463. <span style="color: #f8f8f2">]</span>
    1464. 

  1464. </code></pre></div>
    1465. 

  1465. <p>The above custom Web page definitions can be loaded in a batch using the <a href="api.html#load">AutoConnect::load</a> function.</p>
    1466. 

  1466. <h3 id="json-object-for-autoconnectelements"><i class="fa fa-caret-right"></i> JSON object for AutoConnectElements<a class="headerlink" href="#json-object-for-autoconnectelements" title="Permanent link">&para;</a></h3>
    1467. 

  1467. <p>JSON description for AutoConnectElements describes as an array in the <em>element</em> with arguments of <a href="acelements.html#constructor">each constructor</a>.</p>
    1468. 

  1468. <div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><span style="color: #f8f8f2">{</span>
    1469. 

  1469.   <span style="color: #e6db74">&quot;name&quot;</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">name</span><span style="color: #f8f8f2">,</span>
    1470. 

  1470.   <span style="color: #e6db74">&quot;type&quot;</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">type</span><span style="color: #f8f8f2">,</span>
    1471. 

  1471.   <span style="color: #e6db74">&quot;posterior&quot;</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">posterior</span><span style="color: #f8f8f2">,</span>
    1472. 

  1472.   <span style="color: #a6e22e">key_according_to_type</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">the_value</span> <span style="color: #f92672">|</span> <span style="color: #a6e22e">array_of_value</span><span style="color: #f8f8f2">,</span>
    1473. 

  1473.   <span style="color: #f8f8f2">[</span> <span style="color: #a6e22e">key_according_to_type</span> <span style="color: #f92672">:</span> <span style="color: #a6e22e">the_value</span> <span style="color: #f92672">|</span> <span style="color: #a6e22e">array_of_value</span> <span style="color: #f8f8f2">]</span>
    1474. 

  1474. <span style="color: #f8f8f2">}</span>
    1475. 

  1475. </code></pre></div>
    1476. 

  1476. <h4 id="name"><i class="fa fa-key"></i> <strong>name</strong><a class="headerlink" href="#name" title="Permanent link">&para;</a></h4>
    1477. 

  1477. <dl>
    1478. 

  1478. <dd>A string of the name for the element.</dd>
    1479. 

  1479. </dl>
    1480. 

  1480. <h4 id="type"><i class="fa fa-key"></i> <strong>type</strong><a class="headerlink" href="#type" title="Permanent link">&para;</a></h4>
    1481. 

  1481. <dl>
    1482. 

  1482. <dd>A string of the type for the element. For this type, specify the following string corresponding to each element.</dd>
    1483. 

  1483. <dd>
    1484. 

  1484. <ul>
    1485. 

  1485. <li>AutoConnectButton: <a href="#acbutton"><strong>ACButton</strong></a></li>
    1486. 

  1486. </ul>
    1487. 

  1487. </dd>
    1488. 

  1488. <dd>
    1489. 

  1489. <ul>
    1490. 

  1490. <li>AutoConnectCheckbox: <a href="#accheckbox"><strong>ACCheckbox</strong> </a></li>
    1491. 

  1491. </ul>
    1492. 

  1492. </dd>
    1493. 

  1493. <dd>
    1494. 

  1494. <ul>
    1495. 

  1495. <li>AutoConnectElement: <a href="#acelement"><strong>ACElement</strong></a></li>
    1496. 

  1496. </ul>
    1497. 

  1497. </dd>
    1498. 

  1498. <dd>
    1499. 

  1499. <ul>
    1500. 

  1500. <li>AutoConnectFile: <a href="#acfile"><strong>ACFile</strong></a></li>
    1501. 

  1501. </ul>
    1502. 

  1502. </dd>
    1503. 

  1503. <dd>
    1504. 

  1504. <ul>
    1505. 

  1505. <li>AutoConnectInput: <a href="#acinput"><strong>ACInput</strong></a></li>
    1506. 

  1506. </ul>
    1507. 

  1507. </dd>
    1508. 

  1508. <dd>
    1509. 

  1509. <ul>
    1510. 

  1510. <li>AutoConnectRadio: <a href="#acradio"><strong>ACRadio</strong></a></li>
    1511. 

  1511. </ul>
    1512. 

  1512. </dd>
    1513. 

  1513. <dd>
    1514. 

  1514. <ul>
    1515. 

  1515. <li>AutoConnectSelect: <a href="#acselect"><strong>ACSelect</strong></a></li>
    1516. 

  1516. </ul>
    1517. 

  1517. </dd>
    1518. 

  1518. <dd>
    1519. 

  1519. <ul>
    1520. 

  1520. <li>AutoConnectStyle: <a href="#acstyle"><strong>ACStyle</strong></a></li>
    1521. 

  1521. </ul>
    1522. 

  1522. </dd>
    1523. 

  1523. <dd>
    1524. 

  1524. <ul>
    1525. 

  1525. <li>AutoConnectSubmit: <a href="#acsubmit"><strong>ACSubmit</strong></a></li>
    1526. 

  1526. </ul>
    1527. 

  1527. </dd>
    1528. 

  1528. <dd>
    1529. 

  1529. <ul>
    1530. 

  1530. <li>AutoConnectText: <a href="#actext"><strong>ACText</strong></a></li>
    1531. 

  1531. </ul>
    1532. 

  1532. </dd>
    1533. 

  1533. </dl>
    1534. 

  1534. <h4 id="posterior"><i class="fa fa-key"></i> posterior<a class="headerlink" href="#posterior" title="Permanent link">&para;</a></h4>
    1535. 

  1535. <dl>
    1536. 

  1536. <dt>Specifies a tag to add behind the HTML code generated from the element. Its purpose is to place elements on the custom Web page as intended by the user sketch. You can use the <strong>posterior</strong> key with the following values to arrange vertically or horizontal when the elements do not have the intended position on the custom Web Page specifying the following:</dt>
    1537. 

  1537. <dd>
    1538. 

  1538. <ul>
    1539. 

  1539. <li><strong>none</strong> : No generate additional tags.</li>
    1540. 

  1540. </ul>
    1541. 

  1541. </dd>
    1542. 

  1542. <dd>
    1543. 

  1543. <ul>
    1544. 

  1544. <li><strong>br</strong> : Add a <code>&lt;br&gt;</code> tag to the end of the element.</li>
    1545. 

  1545. </ul>
    1546. 

  1546. </dd>
    1547. 

  1547. <dd>
    1548. 

  1548. <ul>
    1549. 

  1549. <li><strong>par</strong> : Include the element in the <code>&lt;p&gt; ~ &lt;/p&gt;</code> tag.</li>
    1550. 

  1550. </ul>
    1551. 

  1551. </dd>
    1552. 

  1552. </dl>
    1553. 

  1553. <h4 id="key_according_to_type"><i class="fa fa-key"></i> <strong><i>key_according_to_type</i></strong><a class="headerlink" href="#key_according_to_type" title="Permanent link">&para;</a></h4>
    1554. 

  1554. <p>This is different for each AutoConnectElements, and the key that can be specified by the type of AutoConnectElements is determined.</p>
    1555. 

  1555. <h4 id="acbutton"><i class="fa fa-caret-right"></i> ACButton<a class="headerlink" href="#acbutton" title="Permanent link">&para;</a></h4>
    1556. 

  1556. <dl>
    1557. 

  1557. <dd>
    1558. 

  1558. <ul>
    1559. 

  1559. <li><strong>value</strong> : Specifies the button label. This value also applies to the <code>value</code> attribute of an HTML <code>button</code> tag.</li>
    1560. 

  1560. </ul>
    1561. 

  1561. </dd>
    1562. 

  1562. <dd>
    1563. 

  1563. <ul>
    1564. 

  1564. <li><strong>action</strong> : Specifies an action to be fire on a mouse click on the button. It is mostly used with a JavaScript to activate a script, or it directly describes a JavaScript.</li>
    1565. 

  1565. </ul>
    1566. 

  1566. </dd>
    1567. 

  1567. </dl>
    1568. 

  1568. <h4 id="accheckbox"><i class="fa fa-caret-right"></i> ACCheckbox<a class="headerlink" href="#accheckbox" title="Permanent link">&para;</a></h4>
    1569. 

  1569. <dl>
    1570. 

  1570. <dd>
    1571. 

  1571. <ul>
    1572. 

  1572. <li><strong>value</strong> : Specifies the value to be supplied to the checkbox. It will be packed in the query string as <code>name=value</code> when the checkbox is ticked.</li>
    1573. 

  1573. </ul>
    1574. 

  1574. </dd>
    1575. 

  1575. <dd>
    1576. 

  1576. <ul>
    1577. 

  1577. <li><strong>label</strong> : Specifies a label of the checkbox. Its placement is always to the right of the checkbox.</li>
    1578. 

  1578. </ul>
    1579. 

  1579. </dd>
    1580. 

  1580. <dd>
    1581. 

  1581. <ul>
    1582. 

  1582. <li><strong>checked</strong> : Specifies checking status as a <strong>boolean</strong> value. The value of the checked checkbox element is packed in the query string and sent.</li>
    1583. 

  1583. </ul>
    1584. 

  1584. </dd>
    1585. 

  1585. </dl>
    1586. 

  1586. <h4 id="acelement"><i class="fa fa-caret-right"></i> ACElement<a class="headerlink" href="#acelement" title="Permanent link">&para;</a></h4>
    1587. 

  1587. <dl>
    1588. 

  1588. <dd>
    1589. 

  1589. <ul>
    1590. 

  1590. <li><strong>value</strong> : Specifies the source code of generating HTML. The value is native HTML code and is output as HTML as it is.</li>
    1591. 

  1591. </ul>
    1592. 

  1592. </dd>
    1593. 

  1593. </dl>
    1594. 

  1594. <h4 id="acfile"><i class="fa fa-caret-right"></i> ACFile<a class="headerlink" href="#acfile" title="Permanent link">&para;</a></h4>
    1595. 

  1595. <dl>
    1596. 

  1596. <dd>
    1597. 

  1597. <ul>
    1598. 

  1598. <li><strong>value</strong> : The file name of the upload file will be stored. The <code>value</code> is read-only and will be ignored if specified.</li>
    1599. 

  1599. </ul>
    1600. 

  1600. </dd>
    1601. 

  1601. <dd>
    1602. 

  1602. <ul>
    1603. 

  1603. <li><strong>label</strong> : Specifies a label of the file selection box. Its placement is always to the left of the file selection box.</li>
    1604. 

  1604. </ul>
    1605. 

  1605. </dd>
    1606. 

  1606. <dd>
    1607. 

  1607. <ul>
    1608. 

  1608. <li>
    1609. 

  1609. <dl>
    1610. 

  1610. <dt><strong>store</strong> : Specifies the destination to save the uploaded file. Its value accepts one of the following:</dt>
    1611. 

  1611. <dd>
    1612. 

  1612. <ul>
    1613. 

  1613. <li><strong>fs</strong> : Save as the SPIFFS file in flash of ESP8266/ESP32 module. If the valid file system of the ESP8266 module incorporating the Sketch is <a href="https://arduino-esp8266.readthedocs.io/en/latest/filesystem.html#spiffs-and-littlefs">LittleFS</a>, AutoConnect assumes the file system to be LittleFS. However, it does not sense the actual file system, so If the Sketch implementation does not match the file system on the ESP8266 depends, a file writing error will occur.</li>
    1614. 

  1614. </ul>
    1615. 

  1615. </dd>
    1616. 

  1616. <dd>
    1617. 

  1617. <ul>
    1618. 

  1618. <li><strong>sd</strong> : Save to an external SD device connected to ESP8266/ESP32 module.</li>
    1619. 

  1619. </ul>
    1620. 

  1620. </dd>
    1621. 

  1621. <dd>
    1622. 

  1622. <ul>
    1623. 

  1623. <li><strong>extern</strong> : Pass the content of the uploaded file to the uploader which is declared by the Sketch individually. Its uploader must inherit <a href="acupload.html#to-upload-to-a-device-other-than-flash-or-sd"><strong>AutoConnectUploadHandler</strong></a> class and implements <em>_open</em>, <em>_write</em> and <em>_close</em> function.</li>
    1624. 

  1624. </ul>
    1625. 

  1625. </dd>
    1626. 

  1626. </dl>
    1627. 

  1627. </li>
    1628. 

  1628. </ul>
    1629. 

  1629. <div class="admonition note">
    1630. 

  1630. <p class="admonition-title">A valid filesystem of ESP8266 on board flash</p>
    1631. 

  1631. <p>AutoConnect has assumed <a href="https://arduino-esp8266.readthedocs.io/en/latest/filesystem.html#spiffs-and-littlefs"><strong>LittleFS</strong></a> as a valid file system since v1.2.0 enhancement. On the other hand, the ESP8266 arduino core has supported LittleFS officially since a release 2.7.0.<br>
    1632. 

  1632. LittleFS support in AutoConnect relies on the FS instance declared by the arduino core used at compile-time per project, and its FS instance will acquire by either the SPIFFS class or the LittleFS class. That is, you need to choose which file system will be available in the actual Sketch and make consistent it with AutoConnect assumed file system. So, you can choose which one uses the file systems per project via adjustment the <strong>AC_USE_SPIFFS</strong> macro enable or disable. AutoConnect determines the available file system by the <strong>AC_USE_SPIFFS</strong> macro which defined in <a href="api.html#defined-macros">AutoConnectDefs.h</a> header file. </p>
    1633. 

  1633. </div>
    1634. 

  1634. </dd>
    1635. 

  1635. </dl>
    1636. 

  1636. <h4 id="acinput"><i class="fa fa-caret-right"></i> ACInput<a class="headerlink" href="#acinput" title="Permanent link">&para;</a></h4>
    1637. 

  1637. <dl>
    1638. 

  1638. <dd>
    1639. 

  1639. <ul>
    1640. 

  1640. <li><strong>value</strong> : Specifies the initial text string of the input box. If this value is omitted, placeholder is displayed as the initial string.</li>
    1641. 

  1641. </ul>
    1642. 

  1642. </dd>
    1643. 

  1643. <dd>
    1644. 

  1644. <ul>
    1645. 

  1645. <li><strong>label</strong> : Specifies a label of the input box. Its placement is always to the left of the input box.</li>
    1646. 

  1646. </ul>
    1647. 

  1647. </dd>
    1648. 

  1648. <dd>
    1649. 

  1649. <ul>
    1650. 

  1650. <li><strong>placeholder</strong> : Specifies short hint of the input box.</li>
    1651. 

  1651. </ul>
    1652. 

  1652. </dd>
    1653. 

  1653. <dd>
    1654. 

  1654. <ul>
    1655. 

  1655. <li>
    1656. 

  1656. <dl>
    1657. 

  1657. <dt><strong>apply</strong> : Specifies the type of input that the text box accepts. Its value accepts one of the following:</dt>
    1658. 

  1658. <dd>
    1659. 

  1659. <ul>
    1660. 

  1660. <li><strong>text</strong> : A text.</li>
    1661. 

  1661. </ul>
    1662. 

  1662. </dd>
    1663. 

  1663. <dd>
    1664. 

  1664. <ul>
    1665. 

  1665. <li><strong>password</strong> : Password input field. The text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("<code>*</code>") or a dot ("<code>•</code>").</li>
    1666. 

  1666. </ul>
    1667. 

  1667. </dd>
    1668. 

  1668. <dd>
    1669. 

  1669. <ul>
    1670. 

  1670. <li><strong>number</strong> : A field let the user enter number characters only.</li>
    1671. 

  1671. </ul>
    1672. 

  1672. </dd>
    1673. 

  1673. </dl>
    1674. 

  1674. </li>
    1675. 

  1675. </ul>
    1676. 

  1676. </dd>
    1677. 

  1677. </dl>
    1678. 

  1678. <h4 id="acradio"><i class="fa fa-caret-right"></i> ACRadio<a class="headerlink" href="#acradio" title="Permanent link">&para;</a></h4>
    1679. 

  1679. <dl>
    1680. 

  1680. <dd>
    1681. 

  1681. <ul>
    1682. 

  1682. <li><strong>value</strong> : Specifies the collection of radio buttons as an array element.</li>
    1683. 

  1683. </ul>
    1684. 

  1684. </dd>
    1685. 

  1685. <dd>
    1686. 

  1686. <ul>
    1687. 

  1687. <li><strong>label</strong> : Specifies a label of the collection of radio buttons, not for each button. The arrangement will be the top or left side according to the <code>arrange</code>.</li>
    1688. 

  1688. </ul>
    1689. 

  1689. </dd>
    1690. 

  1690. <dd>
    1691. 

  1691. <ul>
    1692. 

  1692. <li>
    1693. 

  1693. <dl>
    1694. 

  1694. <dt><strong>arrange</strong> : Specifies the orientation of the radio buttons. Its value accepts one of the following:</dt>
    1695. 

  1695. <dd>
    1696. 

  1696. <ul>
    1697. 

  1697. <li><strong>horizontal</strong> : Horizontal arrangement.</li>
    1698. 

  1698. </ul>
    1699. 

  1699. </dd>
    1700. 

  1700. <dd>
    1701. 

  1701. <ul>
    1702. 

  1702. <li><strong>vertical</strong> : Vertical arrangement.</li>
    1703. 

  1703. </ul>
    1704. 

  1704. </dd>
    1705. 

  1705. </dl>
    1706. 

  1706. </li>
    1707. 

  1707. </ul>
    1708. 

  1708. </dd>
    1709. 

  1709. <dd>
    1710. 

  1710. <ul>
    1711. 

  1711. <li><strong>checked</strong> : Specifies the index number (1-based) of the radio buttons collection to be checked.</li>
    1712. 

  1712. </ul>
    1713. 

  1713. </dd>
    1714. 

  1714. </dl>
    1715. 

  1715. <h4 id="acselect"><i class="fa fa-caret-right"></i> ACSelect<a class="headerlink" href="#acselect" title="Permanent link">&para;</a></h4>
    1716. 

  1716. <dl>
    1717. 

  1717. <dd>
    1718. 

  1718. <ul>
    1719. 

  1719. <li><strong>label</strong> : Specifies a label of the drop-down list. Its placement is always to the left of the drop-down list.</li>
    1720. 

  1720. </ul>
    1721. 

  1721. </dd>
    1722. 

  1722. <dd>
    1723. 

  1723. <ul>
    1724. 

  1724. <li><strong>option</strong> : Specifies the initial value collection of the drop-down list as an array element.</li>
    1725. 

  1725. </ul>
    1726. 

  1726. </dd>
    1727. 

  1727. </dl>
    1728. 

  1728. <h4 id="acstyle"><i class="fa fa-caret-right"></i> ACStyle<a class="headerlink" href="#acstyle" title="Permanent link">&para;</a></h4>
    1729. 

  1729. <dl>
    1730. 

  1730. <dd>
    1731. 

  1731. <ul>
    1732. 

  1732. <li><strong>value</strong> : Specifies the custom CSS code.</li>
    1733. 

  1733. </ul>
    1734. 

  1734. </dd>
    1735. 

  1735. </dl>
    1736. 

  1736. <h4 id="acsubmit"><i class="fa fa-caret-right"></i> ACSubmit<a class="headerlink" href="#acsubmit" title="Permanent link">&para;</a></h4>
    1737. 

  1737. <dl>
    1738. 

  1738. <dd>
    1739. 

  1739. <ul>
    1740. 

  1740. <li><strong>value</strong> : Specifies a label of the submit button.</li>
    1741. 

  1741. </ul>
    1742. 

  1742. </dd>
    1743. 

  1743. <dd>
    1744. 

  1744. <ul>
    1745. 

  1745. <li><strong>uri</strong> : Specifies the URI to send form data when the button is clicked.</li>
    1746. 

  1746. </ul>
    1747. 

  1747. </dd>
    1748. 

  1748. </dl>
    1749. 

  1749. <h4 id="actext"><i class="fa fa-caret-right"></i> ACText<a class="headerlink" href="#actext" title="Permanent link">&para;</a></h4>
    1750. 

  1750. <dl>
    1751. 

  1751. <dd>
    1752. 

  1752. <ul>
    1753. 

  1753. <li><strong>value</strong> : Specifies a content and also can contain the native HTML code, but remember that your written code is enclosed by the div tag.</li>
    1754. 

  1754. </ul>
    1755. 

  1755. </dd>
    1756. 

  1756. <dd>
    1757. 

  1757. <ul>
    1758. 

  1758. <li><strong>style</strong> : Specifies the qualification style to give to the content and can use the style attribute format as it is.</li>
    1759. 

  1759. </ul>
    1760. 

  1760. </dd>
    1761. 

  1761. <dd>
    1762. 

  1762. <ul>
    1763. 

  1763. <li><strong>format</strong> : Specifies how to interpret the value. It specifies the conversion format when outputting values. The format string conforms to the C-style printf library functions, but depends on the espressif sdk implementation. The conversion specification is valid only for <strong>%s</strong> format. (Left and Right justification, width are also valid.)</li>
    1764. 

  1764. </ul>
    1765. 

  1765. </dd>
    1766. 

  1766. </dl>
    1767. 

  1767. <div class="admonition caution">
    1768. 

  1768. <p class="admonition-title">AutoConnect JSON parsing process is not perfect</p>
    1769. 

  1769. <p>It is based on analysis by ArduinoJson, but the semantic analysis is simplified to save memory. Consequently, it is not an error that a custom Web page JSON document to have unnecessary keys. It will be ignored.</p>
    1770. 

  1770. </div>
    1771. 

  1771. <h2 id="loading-json-document">Loading JSON document<a class="headerlink" href="#loading-json-document" title="Permanent link">&para;</a></h2>
    1772. 

  1772. <h3 id="loading-to-autoconnect"><i class="fa fa-caret-right"></i> Loading to AutoConnect<a class="headerlink" href="#loading-to-autoconnect" title="Permanent link">&para;</a></h3>
    1773. 

  1773. <p>There are two main ways to load the custom Web pages into AutoConnect.</p>
    1774. 

  1774. <ol>
    1775. 

  1775. <li>
    1776. 

  1776. <p>Load directly into AutoConnect</p>
    1777. 

  1777. <p>This way does not require an explicit declaration of AutoConnectAux objects with sketches and is also useful when importing the custom Web pages JSON document from an external file such as SPIFFS because the page definition and sketch coding structure can be separated.</p>
    1778. 

  1778. <p>Using the <a href="api.html#load">AutoCoonnect::load</a> function, AutoConnect dynamically generates the necessary AutoConnectAux objects internally based on the custom Web page definition of the imported JSON document content. In the Sketch, the generated AutoConnectAux object can be referenced using the <a href="api.html#aux">AutoConnect::aux</a> function. You can reach the AutoConnectElements you desired using the <a href="apiaux.html#getelement">AutoConnectAux::getElement</a> function of its AutoConnectAux.</p>
    1779. 

  1779. <p>In the following example, it loads in a batch a JSON document of custom Web pages stored in SPIFFS and accesses to the AutoConnectInput element.</p>
    1780. 

  1780. <div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><span style="color: #f8f8f2">[</span>
    1781. 

  1781.   <span style="color: #f8f8f2">{</span>
    1782. 

  1782.     <span style="color: #e6db74">&quot;title&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;page1&quot;</span><span style="color: #f8f8f2">,</span>
    1783. 

  1783.     <span style="color: #e6db74">&quot;uri&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">,</span>
    1784. 

  1784.     <span style="color: #e6db74">&quot;menu&quot;</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
    1785. 

  1785.     <span style="color: #e6db74">&quot;element&quot;</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">[</span>
    1786. 

  1786.       <span style="color: #f8f8f2">{</span>
    1787. 

  1787.         <span style="color: #e6db74">&quot;name&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">,</span>
    1788. 

  1788.         <span style="color: #e6db74">&quot;type&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span>
    1789. 

  1789.       <span style="color: #f8f8f2">}</span>
    1790. 

  1790.     <span style="color: #f8f8f2">]</span>
    1791. 

  1791.   <span style="color: #f8f8f2">},</span>
    1792. 

  1792.   <span style="color: #f8f8f2">{</span>
    1793. 

  1793.     <span style="color: #e6db74">&quot;title&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;page2&quot;</span><span style="color: #f8f8f2">,</span>
    1794. 

  1794.     <span style="color: #e6db74">&quot;uri&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;/page2&quot;</span><span style="color: #f8f8f2">,</span>
    1795. 

  1795.     <span style="color: #e6db74">&quot;menu&quot;</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
    1796. 

  1796.     <span style="color: #e6db74">&quot;element&quot;</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">[</span>
    1797. 

  1797.       <span style="color: #f8f8f2">{</span>
    1798. 

  1798.         <span style="color: #e6db74">&quot;name&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;input2&quot;</span><span style="color: #f8f8f2">,</span>
    1799. 

  1799.         <span style="color: #e6db74">&quot;type&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span>
    1800. 

  1800.       <span style="color: #f8f8f2">}</span>
    1801. 

  1801.     <span style="color: #f8f8f2">]</span>
    1802. 

  1802.   <span style="color: #f8f8f2">}</span>
    1803. 

  1803. <span style="color: #f8f8f2">]</span>
    1804. 

  1804. </code></pre></div>
    1805. 

  1805. <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">portal;</span>
    1806. 

  1806. <span style="color: #f8f8f2">File</span> <span style="color: #f8f8f2">page</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(</span><span style="color: #e6db74">&quot;/custom_page.json&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;r&quot;</span><span style="color: #f8f8f2">);</span>
    1807. 

  1807. <span style="background-color: #49483e"><span style="color: #f8f8f2">portal.load(page);</span>
    1808. 

  1808. </span><span style="color: #f8f8f2">page.close();</span>
    1809. 

  1809. <span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnectAux</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">aux</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">portal.aux(</span><span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">);</span>
    1810. 

  1810. </span><span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">input1</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">aux</span><span style="color: #f92672">-&gt;</span><span style="color: #f8f8f2">getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">);</span>
    1811. 

  1811. </span></code></pre></div>
    1812. 

  1812. </li>
    1813. 

  1813. <li>
    1814. 

  1814. <p>Load to AutoConnectAux and join to AutoConnect</p>
    1815. 

  1815. <p>This way declares AutoConnectAux in the Sketch and loads the custom Web pages JSON document there. It has an advantage for if you want to define each page of a custom Web page individually or allocate AutoConnectAux objects dynamically on the Sketch side.</p>
    1816. 

  1816. <p>After loading a JSON document using the <a href="apiaux.html#load">AutoConnectAux::load</a> function by each, integrate those into AutoConnect using the <a href="api.html#join">AutoConnect::join</a> function.</p>
    1817. 

  1817. <p>In the following example, you can see the difference between two sketches in a sketch modified using the AutoConnectAux::load.</p>
    1818. 

  1818. <p><div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><span style="color: #f8f8f2">{</span>
    1819. 

  1819.   <span style="color: #e6db74">&quot;title&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;page1&quot;</span><span style="color: #f8f8f2">,</span>
    1820. 

  1820.   <span style="color: #e6db74">&quot;uri&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;/page1&quot;</span><span style="color: #f8f8f2">,</span>
    1821. 

  1821.   <span style="color: #e6db74">&quot;menu&quot;</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
    1822. 

  1822.   <span style="color: #e6db74">&quot;element&quot;</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">[</span>
    1823. 

  1823.     <span style="color: #f8f8f2">{</span>
    1824. 

  1824.       <span style="color: #e6db74">&quot;name&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">,</span>
    1825. 

  1825.       <span style="color: #e6db74">&quot;type&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span>
    1826. 

  1826.     <span style="color: #f8f8f2">}</span>
    1827. 

  1827.   <span style="color: #f8f8f2">]</span>
    1828. 

  1828. <span style="color: #f8f8f2">}</span>
    1829. 

  1829. </code></pre></div>
    1830. 

  1830. <div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><span style="color: #f8f8f2">{</span>
    1831. 

  1831.   <span style="color: #e6db74">&quot;title&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;page2&quot;</span><span style="color: #f8f8f2">,</span>
    1832. 

  1832.   <span style="color: #e6db74">&quot;uri&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;/page2&quot;</span><span style="color: #f8f8f2">,</span>
    1833. 

  1833.   <span style="color: #e6db74">&quot;menu&quot;</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
    1834. 

  1834.   <span style="color: #e6db74">&quot;element&quot;</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">[</span>
    1835. 

  1835.     <span style="color: #f8f8f2">{</span>
    1836. 

  1836.       <span style="color: #e6db74">&quot;name&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;input2&quot;</span><span style="color: #f8f8f2">,</span>
    1837. 

  1837.       <span style="color: #e6db74">&quot;type&quot;</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span>
    1838. 

  1838.     <span style="color: #f8f8f2">}</span>
    1839. 

  1839.   <span style="color: #f8f8f2">]</span>
    1840. 

  1840. <span style="color: #f8f8f2">}</span>
    1841. 

  1841. </code></pre></div>
    1842. 

  1842. <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">portal;</span>
    1843. 

  1843. <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">page1;</span>
    1844. 

  1844. <span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #f8f8f2">page2;</span>
    1845. 

  1845. <span style="color: #f8f8f2">File</span> <span style="color: #f8f8f2">page</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(</span><span style="color: #e6db74">&quot;/custom_page1.json&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;r&quot;</span><span style="color: #f8f8f2">);</span>
    1846. 

  1846. <span style="background-color: #49483e"><span style="color: #f8f8f2">page1.load(page);</span>
    1847. 

  1847. </span><span style="color: #f8f8f2">page.close();</span>
    1848. 

  1848. <span style="color: #f8f8f2">page</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(</span><span style="color: #e6db74">&quot;/custom_page2.json&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;r&quot;</span><span style="color: #f8f8f2">);</span>
    1849. 

  1849. <span style="background-color: #49483e"><span style="color: #f8f8f2">page2.load(page);</span>
    1850. 

  1850. </span><span style="color: #f8f8f2">page.close();</span>
    1851. 

  1851. <span style="background-color: #49483e"><span style="color: #f8f8f2">portal.join(</span> <span style="color: #f8f8f2">{</span> <span style="color: #f8f8f2">page1,</span> <span style="color: #f8f8f2">page2</span> <span style="color: #f8f8f2">}</span> <span style="color: #f8f8f2">);</span>
    1852. 

  1852. </span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">input1</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">page1.getElement</span><span style="color: #f92672">&lt;</span><span style="color: #f8f8f2">AutoConnectInput</span><span style="color: #f92672">&gt;</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;input1&quot;</span><span style="color: #f8f8f2">);</span>
    1853. 

  1853. </code></pre></div></p>
    1854. 

  1854. </li>
    1855. 

  1855. </ol>
    1856. 

  1856. <h3 id="loading-from-the-streamed-file"><i class="fa fa-caret-right"></i> Loading from the streamed file<a class="headerlink" href="#loading-from-the-streamed-file" title="Permanent link">&para;</a></h3>
    1857. 

  1857. <p>AutoConnect supports loading of JSON document from the following instances:</p>
    1858. 

  1858. <ul>
    1859. 

  1859. <li>String</li>
    1860. 

  1860. <li>PROGMEM</li>
    1861. 

  1861. <li>Stream</li>
    1862. 

  1862. </ul>
    1863. 

  1863. <p>To load custom Web pages JSON document into AutoConnect, use the <a href="api.html#load">load</a> function of the AutoConnect class. Its JSON document can read must be completed as a description interpretable by the ArduinoJson library. It cannot import custom Web pages if there are syntax errors for the JSON. If you can not see the custom Web page prepared by JSON, you can check the syntax with <a href="https://arduinojson.org/v5/assistant/">ArduinoJson Assistant</a>. It is useful for pre-checking.</p>
    1864. 

  1864. <p><div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">AutoConnect</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">load(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux)</span>
    1865. 

  1865. </code></pre></div>
    1866. 

  1866. <div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">AutoConnect</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">load(</span><span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">__FlashStringHelper</span><span style="color: #f92672">*</span> <span style="color: #f8f8f2">aux)</span>
    1867. 

  1867. </code></pre></div>
    1868. 

  1868. <div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><span style="color: #66d9ef">bool</span> <span style="color: #f8f8f2">AutoConnect</span><span style="color: #f92672">::</span><span style="color: #f8f8f2">load(Stream</span><span style="color: #f92672">&amp;</span> <span style="color: #f8f8f2">aux)</span>
    1869. 

  1869. </code></pre></div>
    1870. 

  1870. An example of using each function is as follows.
    1871. 

  1871. <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">portal;</span>
    1872. 

  1872. 

  1873. <span style="color: #75715e">// Loading from String</span>
    1874. 

  1874. <span style="color: #66d9ef">const</span> <span style="color: #f8f8f2">String</span> <span style="color: #f8f8f2">aux</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">String(</span><span style="color: #e6db74">&quot;{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">Page 1 title</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">uri</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">/page1</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">menu</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:true,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">element</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:[{</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">name</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">caption</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">type</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">ACText</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">,</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">value</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">:</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">hello, world</span><span style="color: #ae81ff">\&quot;</span><span style="color: #e6db74">}]}&quot;</span><span style="color: #f8f8f2">);</span>
    1875. 

  1875. <span style="color: #f8f8f2">portal.load(aux);</span>
    1876. 

  1876. 

  1877. <span style="color: #75715e">// Loading from PROGMEM</span>
    1878. 

  1878. <span style="color: #66d9ef">const</span> <span style="color: #66d9ef">char</span> <span style="color: #f8f8f2">aux[]</span> <span style="color: #f8f8f2">PROGMEM</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">R&quot;raw(</span>
    1879. 

  1879. <span style="color: #e6db74">{</span>
    1880. 

  1880. <span style="color: #e6db74">  &quot;title&quot; : &quot;Page 1 title&quot;,</span>
    1881. 

  1881. <span style="color: #e6db74">  &quot;uri&quot; : &quot;/page1&quot;,</span>
    1882. 

  1882. <span style="color: #e6db74">  &quot;menu&quot; : true,</span>
    1883. 

  1883. <span style="color: #e6db74">  &quot;element&quot; : [</span>
    1884. 

  1884. <span style="color: #e6db74">    {</span>
    1885. 

  1885. <span style="color: #e6db74">      &quot;name&quot; : &quot;caption&quot;,</span>
    1886. 

  1886. <span style="color: #e6db74">      &quot;type&quot; : &quot;ACText&quot;,</span>
    1887. 

  1887. <span style="color: #e6db74">      &quot;value&quot; : &quot;hello, world&quot;</span>
    1888. 

  1888. <span style="color: #e6db74">    }</span>
    1889. 

  1889. <span style="color: #e6db74">  ]</span>
    1890. 

  1890. <span style="color: #e6db74">}</span>
    1891. 

  1891. <span style="color: #e6db74">)raw&quot;</span><span style="color: #f8f8f2">;</span>
    1892. 

  1892. <span style="color: #f8f8f2">portal.load(FPSTR(aux));</span>
    1893. 

  1893. 

  1894. <span style="color: #75715e">// Loading from Stream assumes &quot;aux.json&quot; file should be store in SPIFFS.</span>
    1895. 

  1895. <span style="color: #f8f8f2">File</span> <span style="color: #f8f8f2">aux</span> <span style="color: #f92672">=</span> <span style="color: #f8f8f2">SPIFFS.open(</span><span style="color: #e6db74">&quot;aux.json&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;r&quot;</span><span style="color: #f8f8f2">);</span>
    1896. 

  1896. <span style="color: #f8f8f2">portal.load(aux);</span>
    1897. 

  1897. <span style="color: #f8f8f2">aux.close();</span>
    1898. 

  1898. </code></pre></div></p>
    1899. 

  1899. <p>AutoConnect passes the given JSON document directly to the <a href="https://arduinojson.org/v5/api/jsonbuffer/parseobject/"><strong>parseObject()</strong></a> function of the ArduinoJson library for parsing. Therefore, the constraint of the parseObject() function is applied as it is in the parsing of the JSON document for the AutoConnect. That is, if the JSON string is read-only, duplicating the input string occurs and consumes more memory.</p>
    1900. 

  1900. <h3 id="adjust-the-json-document-buffer-size"><i class="fa fa-caret-right"></i> Adjust the JSON document buffer size<a class="headerlink" href="#adjust-the-json-document-buffer-size" title="Permanent link">&para;</a></h3>
    1901. 

  1901. <p>AutoConnect uses ArduinoJson library's dynamic buffer to parse JSON documents. Its dynamic buffer allocation scheme depends on the version 5 or version 6 of ArduinoJson library. Either version must have enough buffer to parse the custom web page's JSON document successfully. AutoConnect has the following three constants internally to complete the parsing as much as possible in both ArduinoJson version. These constants are macro defined in <a href="https://github.com/Hieromon/AutoConnect/blob/master/src/AutoConnectDefs.h">AutoConnectDefs.h</a>.</p>
    1902. 

  1902. <p>If memory insufficiency occurs during JSON document parsing, you can adjust these constants to avoid insufficiency by using the <a href="https://arduinojson.org/v6/assistant/">JsonAssistant</a> with deriving the required buffer size in advance.</p>
    1903. 

  1903. <div class="highlight" style="background: #272822"><pre style="line-height: 125%; margin: 0;"><span></span><code><span style="color: #75715e">#define AUTOCONNECT_JSONBUFFER_SIZE     256</span>
    1904. 

  1904. <span style="color: #75715e">#define AUTOCONNECT_JSONDOCUMENT_SIZE   (8 * 1024)</span>
    1905. 

  1905. <span style="color: #75715e">#define AUTOCONNECT_JSONPSRAM_SIZE      (16* 1024)</span>
    1906. 

  1906. </code></pre></div>
    1907. 

  1907. <h4 id="autoconnect_jsonbuffer_size">AUTOCONNECT_JSONBUFFER_SIZE<a class="headerlink" href="#autoconnect_jsonbuffer_size" title="Permanent link">&para;</a></h4>
    1908. 

  1908. <p>This is a unit size constant of <a href="https://arduinojson.org/v5/faq/what-are-the-differences-between-staticjsonbuffer-and-dynamicjsonbuffer/">DynamicJsonBuffer</a> and works when the library used is ArduinoJson version 5. A buffer size of the JSON document increases with this unit. This value relates to the impact of the fragmented heap area. If it is too large, may occur run-out of memory.</p>
    1909. 

  1909. <h4 id="autoconnect_jsondocument_size">AUTOCONNECT_JSONDOCUMENT_SIZE<a class="headerlink" href="#autoconnect_jsondocument_size" title="Permanent link">&para;</a></h4>
    1910. 

  1910. <p>This is a size of <a href="https://arduinojson.org/v6/api/dynamicjsondocument/">DynamicJsonDocument</a> for ArduinoJson version 6. This buffer is not automatically expanding, and the size determines the limit.</p>
    1911. 

  1911. <h4 id="autoconnect_jsonpsram_size">AUTOCONNECT_JSONPSRAM_SIZE<a class="headerlink" href="#autoconnect_jsonpsram_size" title="Permanent link">&para;</a></h4>
    1912. 

  1912. <p>For ESP32 module equips with PSRAM, you can allocate the JSON document buffer to PSRAM. Buffer allocation to PSRAM will enable when <strong>PSRAM:Enabled</strong> option selected in the Arduino IDE's Board Manager menu. It is available since ArduinoJson 6.10.0.</p>
    1913. 

  1913. <h2 id="saving-json-document">Saving JSON document<a class="headerlink" href="#saving-json-document" title="Permanent link">&para;</a></h2>
    1914. 

  1914. <p>the Sketch can persist AutoConnectElements as a JSON document and also uses <a href="achandling.html#saving-autoconnectelements-with-json">this function</a> to save the values ​​entered on the custom Web page. And you can reload the saved JSON document into AutoConnectElements as the field in a custom Web page using the <a href="achandling.html#loading-autoconnectaux-autoconnectelements-with-json">load function</a>. </p>
    1915. 

  1915. <div class="footnote">
    1916. 

  1916. <hr />
    1917. 

  1917. <ol>
    1918. 

  1918. <li id="fn:1">
    1919. 

  1919. <p>Loading and saving AutoConnect parameters adopt this method.&#160;<a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">&#8617;</a></p>
    1920. 

  1920. </li>
    1921. 

  1921. </ol>
    1922. 

  1922. </div>
    1923. 

  1923.                 
    1924. 

  1924.               
    1925. 

  1925.               
    1926. 

  1926.                 
    1927. 

  1927. 

  1928. 

  1929.               
    1930. 

  1930.             </article>
    1931. 

  1931.           </div>
    1932. 

  1932.         </div>
    1933. 

  1933.       </main>
    1934. 

  1934.       
    1935. 

  1935.         
    1936. 

  1936. <footer class="md-footer">
    1937. 

  1937.   
    1938. 

  1938.     <div class="md-footer-nav">
    1939. 

  1939.       <nav class="md-footer-nav__inner md-grid" aria-label="Footer">
    1940. 

  1940.         
    1941. 

  1941.           <a href="acelements.html" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
    1942. 

  1942.             <div class="md-footer-nav__button md-icon">
    1943. 

  1943.               <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>
    1944. 

  1944.             </div>
    1945. 

  1945.             <div class="md-footer-nav__title">
    1946. 

  1946.               <div class="md-ellipsis">
    1947. 

  1947.                 <span class="md-footer-nav__direction">
    1948. 

  1948.                   Previous
    1949. 

  1949.                 </span>
    1950. 

  1950.                 AutoConnectElements
    1951. 

  1951.               </div>
    1952. 

  1952.             </div>
    1953. 

  1953.           </a>
    1954. 

  1954.         
    1955. 

  1955.         
    1956. 

  1956.           <a href="achandling.html" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
    1957. 

  1957.             <div class="md-footer-nav__title">
    1958. 

  1958.               <div class="md-ellipsis">
    1959. 

  1959.                 <span class="md-footer-nav__direction">
    1960. 

  1960.                   Next
    1961. 

  1961.                 </span>
    1962. 

  1962.                 Handling the custom Web pages
    1963. 

  1963.               </div>
    1964. 

  1964.             </div>
    1965. 

  1965.             <div class="md-footer-nav__button md-icon">
    1966. 

  1966.               <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>
    1967. 

  1967.             </div>
    1968. 

  1968.           </a>
    1969. 

  1969.         
    1970. 

  1970.       </nav>
    1971. 

  1971.     </div>
    1972. 

  1972.   
    1973. 

  1973.   <div class="md-footer-meta md-typeset">
    1974. 

  1974.     <div class="md-footer-meta__inner md-grid">
    1975. 

  1975.       <div class="md-footer-copyright">
    1976. 

  1976.         
    1977. 

  1977.           <div class="md-footer-copyright__highlight">
    1978. 

  1978.             Copyright &copy; 2018-2020 Hieromon Ikasamo
    1979. 

  1979.           </div>
    1980. 

  1980.         
    1981. 

  1981.         Made with
    1982. 

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

  1983.           Material for MkDocs
    1984. 

  1984.         </a>
    1985. 

  1985.       </div>
    1986. 

  1986.       
    1987. 

  1987.   <div class="md-footer-social">
    1988. 

  1988.     
    1989. 

  1989.       
    1990. 

  1990.       
    1991. 

  1991.         
    1992. 

  1992.         
    1993. 

  1993.       
    1994. 

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

  1995.         <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>
    1996. 

  1996.       </a>
    1997. 

  1997.     
    1998. 

  1998.       
    1999. 

  1999.       
    2000. 

  2000.         
    2001. 

  2001.         
    2002. 

  2002.       
    2003. 

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

  2004.         <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>
    2005. 

  2005.       </a>
    2006. 

  2006.     
    2007. 

  2007.   </div>
    2008. 

  2008. 

  2009.     </div>
    2010. 

  2010.   </div>
    2011. 

  2011. </footer>
    2012. 

  2012.       
    2013. 

  2013.     </div>
    2014. 

  2014.     
    2015. 

  2015.       <script src="assets/javascripts/vendor.fd16492e.min.js"></script>
    2016. 

  2016.       <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>
    2017. 

  2017.       
    2018. 

  2018.       <script>
    2019. 

  2019.         app = initialize({
    2020. 

  2020.           base: ".",
    2021. 

  2021.           features: [],
    2022. 

  2022.           search: Object.assign({
    2023. 

  2023.             worker: "assets/javascripts/worker/search.4ac00218.min.js"
    2024. 

  2024.           }, typeof search !== "undefined" && search)
    2025. 

  2025.         })
    2026. 

  2026.       </script>
    2027. 

  2027.       
    2028. 

  2028.         <script src="js/gifffer.min.js"></script>
    2029. 

  2029.       
    2030. 

  2030.     
    2031. 

  2031.   </body>
    2032. 

  2032. </html>
    2033.