<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      
        <meta name="description" content="ESP8266/ESP32 WLAN configuration at run time with web interface">
      
      
        <link rel="canonical" href="https://Hieromon.github.io/AutoConnect/wojson.html">
      
      
        <meta name="author" content="Hieromon Ikasamo">
      
      
        <meta name="lang:clipboard.copy" content="Copy to clipboard">
      
        <meta name="lang:clipboard.copied" content="Copied to clipboard">
      
        <meta name="lang:search.language" content="en">
      
        <meta name="lang:search.pipeline.stopwords" content="True">
      
        <meta name="lang:search.pipeline.trimmer" content="True">
      
        <meta name="lang:search.result.none" content="No matching documents">
      
        <meta name="lang:search.result.one" content="1 matching document">
      
        <meta name="lang:search.result.other" content="# matching documents">
      
        <meta name="lang:search.tokenizer" content="[\s\-]+">
      
      <link rel="shortcut icon" href="assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.0.4, mkdocs-material-3.3.0">
    
    
      
        <title>Custom Web pages w/o JSON - AutoConnect for ESP8266/ESP32</title>
      
    
    
      <link rel="stylesheet" href="assets/stylesheets/application.572ca0f0.css">
      
        <link rel="stylesheet" href="assets/stylesheets/application-palette.22915126.css">
      
      
        
        
        <meta name="theme-color" content="#3f51b5">
      
    
    
      <script src="assets/javascripts/modernizr.962652e9.js"></script>
    
    
      
        <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono">
        <style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style>
      
    
    <link rel="stylesheet" href="assets/fonts/material-icons.css">
    
    
      <link rel="stylesheet" href="css/paragraph.css">
    
      <link rel="stylesheet" href="css/extra.css">
    
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
    
    
      
        <script async src="https://www.googletagmanager.com/gtag/js?id=None"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","None")</script>
      
    
    
  </head>
  
    
    
    <body dir="ltr" data-md-color-primary="indigo" data-md-color-accent="indigo">
  
    <svg class="md-svg">
      <defs>
        
        
          <svg xmlns="http://www.w3.org/2000/svg" width="416" height="448"
    viewBox="0 0 416 448" id="__github">
  <path fill="currentColor" d="M160 304q0 10-3.125 20.5t-10.75 19-18.125
        8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5
        18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75
        19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19
        18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360
        304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25
        2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8
        38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0
        37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25
        82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75
        1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75
        0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25
        30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5
        46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34
        99.5z" />
</svg>
        
      </defs>
    </svg>
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
    
      <a href="#suppress-increase-in-memory-consumption" tabindex="1" class="md-skip">
        Skip to content
      </a>
    
    
      <header class="md-header" data-md-component="header">
  <nav class="md-header-nav md-grid">
    <div class="md-flex">
      <div class="md-flex__cell md-flex__cell--shrink">
        <a href="https://Hieromon.github.io/AutoConnect/" title="AutoConnect for ESP8266/ESP32" class="md-header-nav__button md-logo">
          
            <img src="images/arduino-logo.svg" width="24" height="24">
          
        </a>
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
        <label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
      </div>
      <div class="md-flex__cell md-flex__cell--stretch">
        <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
          
            
              <span class="md-header-nav__topic">
                AutoConnect for ESP8266/ESP32
              </span>
              <span class="md-header-nav__topic">
                Custom Web pages w/o JSON
              </span>
            
          
        </div>
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
        
          
            <label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
            
<div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
      <label class="md-icon md-search__icon" for="__search"></label>
      <button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">
        &#xE5CD;
      </button>
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="result">
          <div class="md-search-result__meta">
            Type to start searching
          </div>
          <ol class="md-search-result__list"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
          
        
      </div>
      
        <div class="md-flex__cell md-flex__cell--shrink">
          <div class="md-header-nav__source">
            


  


  <a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-source="github">
    
      <div class="md-source__icon">
        <svg viewBox="0 0 24 24" width="24" height="24">
          <use xlink:href="#__github" width="24" height="24"></use>
        </svg>
      </div>
    
    <div class="md-source__repository">
      Hieromon/AutoConnect
    </div>
  </a>

          </div>
        </div>
      
    </div>
  </nav>
</header>
    
    <div class="md-container">
      
        
      
      
        

  

<nav class="md-tabs md-tabs--active" data-md-component="tabs">
  <div class="md-tabs__inner md-grid">
    <ul class="md-tabs__list">
      
        
  <li class="md-tabs__item">
    
      <a href="index.html" title="Overview" class="md-tabs__link">
        Overview
      </a>
    
  </li>

      
        
      
        
      
        
      
        
      
        
  
  
    <li class="md-tabs__item">
      
        <a href="acintro.html" title="Custom Web pages" class="md-tabs__link">
          Custom Web pages
        </a>
      
    </li>
  

      
        
  
  
    <li class="md-tabs__item">
      
        <a href="api.html" title="Library APIs" class="md-tabs__link">
          Library APIs
        </a>
      
    </li>
  

      
        
  
  
    <li class="md-tabs__item">
      
        <a href="howtoembed.html" title="Examples" class="md-tabs__link md-tabs__link--active">
          Examples
        </a>
      
    </li>
  

      
        
      
        
      
        
      
    </ul>
  </div>
</nav>
      
      <main class="md-main">
        <div class="md-main__inner md-grid" data-md-component="container">
          
            
              <div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    <nav class="md-nav md-nav--primary" data-md-level="0">
  <label class="md-nav__title md-nav__title--site" for="__drawer">
    <a href="https://Hieromon.github.io/AutoConnect/" title="AutoConnect for ESP8266/ESP32" class="md-nav__button md-logo">
      
        <img src="images/arduino-logo.svg" width="48" height="48">
      
    </a>
    AutoConnect for ESP8266/ESP32
  </label>
  
    <div class="md-nav__source">
      


  


  <a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-source="github">
    
      <div class="md-source__icon">
        <svg viewBox="0 0 24 24" width="24" height="24">
          <use xlink:href="#__github" width="24" height="24"></use>
        </svg>
      </div>
    
    <div class="md-source__repository">
      Hieromon/AutoConnect
    </div>
  </a>

    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
      


  <li class="md-nav__item">
    <a href="index.html" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

    
      
      
      


  <li class="md-nav__item">
    <a href="gettingstarted.html" title="Getting started" class="md-nav__link">
      Getting started
    </a>
  </li>

    
      
      
      


  <li class="md-nav__item">
    <a href="menu.html" title="AutoConnect menu" class="md-nav__link">
      AutoConnect menu
    </a>
  </li>

    
      
      
      


  <li class="md-nav__item">
    <a href="basicusage.html" title="Basic usage" class="md-nav__link">
      Basic usage
    </a>
  </li>

    
      
      
      


  <li class="md-nav__item">
    <a href="advancedusage.html" title="Advanced usage" class="md-nav__link">
      Advanced usage
    </a>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6">
    
    <label class="md-nav__link" for="nav-6">
      Custom Web pages
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-6">
        Custom Web pages
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="acintro.html" title="Custom Web pages with AutoConnect" class="md-nav__link">
      Custom Web pages with AutoConnect
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="acelements.html" title="AutoConnectElements" class="md-nav__link">
      AutoConnectElements
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="acjson.html" title="Custom Web pages with JSON" class="md-nav__link">
      Custom Web pages with JSON
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="achandling.html" title="Handling the custom Web pages" class="md-nav__link">
      Handling the custom Web pages
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
    
    <label class="md-nav__link" for="nav-7">
      Library APIs
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-7">
        Library APIs
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="api.html" title="AutoConnect API" class="md-nav__link">
      AutoConnect API
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="apiaux.html" title="AutoConnectAux API" class="md-nav__link">
      AutoConnectAux API
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="apiconfig.html" title="AutoConnectConfig API" class="md-nav__link">
      AutoConnectConfig API
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="apielements.html" title="AutoConnectElements API" class="md-nav__link">
      AutoConnectElements API
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="apiextra.html" title="Something extra" class="md-nav__link">
      Something extra
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      

  


  <li class="md-nav__item md-nav__item--active md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8" checked>
    
    <label class="md-nav__link" for="nav-8">
      Examples
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-8">
        Examples
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="howtoembed.html" title="How to embed" class="md-nav__link">
      How to embed
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="datatips.html" title="Tips for data conversion" class="md-nav__link">
      Tips for data conversion
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="menuize.html" title="Constucting the menu" class="md-nav__link">
      Constucting the menu
    </a>
  </li>

        
          
          
          

  


  <li class="md-nav__item md-nav__item--active">
    
    <input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc">
    
    
      <label class="md-nav__link md-nav__link--active" for="__toc">
        Custom Web pages w/o JSON
      </label>
    
    <a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link md-nav__link--active">
      Custom Web pages w/o JSON
    </a>
    
      
<nav class="md-nav md-nav--secondary">
  
  
  
    <label class="md-nav__title" for="__toc">Table of contents</label>
    <ul class="md-nav__list" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#suppress-increase-in-memory-consumption" title="Suppress increase in memory consumption" class="md-nav__link">
    Suppress increase in memory consumption
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#writing-the-custom-web-pages-without-json" title="Writing the custom Web pages without JSON" class="md-nav__link">
    Writing the custom Web pages without JSON
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#implementation-example-without-arduinojson" title="Implementation example without ArduinoJson" class="md-nav__link">
    Implementation example without ArduinoJson
  </a>
  
</li>
      
      
      
      
      
    </ul>
  
</nav>
    
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item">
    <a href="faq.html" title="FAQ" class="md-nav__link">
      FAQ
    </a>
  </li>

    
      
      
      


  <li class="md-nav__item">
    <a href="changelog.html" title="Change log" class="md-nav__link">
      Change log
    </a>
  </li>

    
      
      
      


  <li class="md-nav__item">
    <a href="license.html" title="License" class="md-nav__link">
      License
    </a>
  </li>

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              <div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    
<nav class="md-nav md-nav--secondary">
  
  
  
    <label class="md-nav__title" for="__toc">Table of contents</label>
    <ul class="md-nav__list" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#suppress-increase-in-memory-consumption" title="Suppress increase in memory consumption" class="md-nav__link">
    Suppress increase in memory consumption
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#writing-the-custom-web-pages-without-json" title="Writing the custom Web pages without JSON" class="md-nav__link">
    Writing the custom Web pages without JSON
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#implementation-example-without-arduinojson" title="Implementation example without ArduinoJson" class="md-nav__link">
    Implementation example without ArduinoJson
  </a>
  
</li>
      
      
      
      
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          <div class="md-content">
            <article class="md-content__inner md-typeset">
              
                
                
                  <h1>Custom Web pages w/o JSON</h1>
                
                <h2 id="suppress-increase-in-memory-consumption">Suppress increase in memory consumption<a class="headerlink" href="#suppress-increase-in-memory-consumption" title="Permanent link">&para;</a></h2>
<p>Custom Web page processing consumes a lot of memory. AutoConnect will take a whole string of the JSON document for the custom Web pages into memory. The required buffer size for the JSON document of example sketch <em>mqttRSSI</em> reaches approximately 3000 bytes. And actually, it needs twice the heap area. Especially this constraint will be a problem with the ESP8266 which has a heap size poor.</p>
<p>AutoConnect can handle custom Web pages without using JSON. In that case, since the ArduinoJson library will not be bound, the sketch size will also be reduced.</p>
<h2 id="writing-the-custom-web-pages-without-json">Writing the custom Web pages without JSON<a class="headerlink" href="#writing-the-custom-web-pages-without-json" title="Permanent link">&para;</a></h2>
<p>To handle the custom Web pages without using JSON, follow the steps below.</p>
<ol>
<li>Create or define <a href="apiaux.html">AutoConnectAux</a> for each page.</li>
<li>Create or define <a href="acelements.html">AutoConnectElement(s)</a>.</li>
<li>Add <a href="acelements.html">AutoConnectElement(s)</a> to AutoConnectAux.</li>
<li>Create more AutoConnectAux containing <a href="acelements.html">AutoConnectElement(s)</a>, if necessary.</li>
<li>Register the request handlers for the custom Web pages.</li>
<li><a href="api.html#join">Join</a> prepared AutoConnectAux(s) to AutoConnect.</li>
<li>Invoke <a href="api.html#begin">AutoConnect::begin()</a>.</li>
</ol>
<p>In addition to the above procedure, to completely cut off for binding with the ArduinoJson library, turn off the ArduinoJson use indicator which is declared by the <a href="api.html#defined-macros">AutoConnect definitions</a>. Its declaration is in <strong>AutoConnectDefs.h</strong> file.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup></p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #75715e">// Comment out the AUTOCONNECT_USE_JSON macro to detach the ArduinoJson.</span>
<span style="color: #75715e">#define AUTOCONNECT_USE_JSON</span>
</pre></div>

<div class="admonition caution">
<p class="admonition-title">JSON processing will be disabled</p>
<p>Commenting out the <strong>AUTOCONNECT_USE_JSON</strong> macro invalidates all functions related to JSON processing. If the sketch is using the JSON function, it will result in a compile error.</p>
</div>
<h2 id="implementation-example-without-arduinojson">Implementation example without ArduinoJson<a class="headerlink" href="#implementation-example-without-arduinojson" title="Permanent link">&para;</a></h2>
<p>The code excluding JSON processing from the mqttRSSI sketch attached to the library is as follows. <small>(It is a part of code. Refer to mqttRSSI_NA.ino for the whole sketch.)</small></p>
<p><i class="fa fa-code"></i> The JSON document for mqttRSSI</p>
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">[</span>
  <span style="color: #f8f8f2">{</span>
    <span style="color: #f92672">&quot;title&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;MQTT Setting&quot;</span><span style="color: #f8f8f2">,</span>
    <span style="color: #f92672">&quot;uri&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;/mqtt_setting&quot;</span><span style="color: #f8f8f2">,</span>
    <span style="color: #f92672">&quot;menu&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
    <span style="color: #f92672">&quot;element&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #f8f8f2">[</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;header&quot;</span><span style="color: #f8f8f2">,</span>
        <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>
        <span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;&lt;h2&gt;MQTT broker settings&lt;/h2&gt;&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;style&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;text-align:center;color:#2f4f4f;padding:10px;&quot;</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <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>
        <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>
        <span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;style&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;font-family:serif;color:#4682b4;&quot;</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;mqttserver&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Server&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;pattern&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\-]*[a-zA-Z0-9])\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\-]*[A-Za-z0-9])$&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;placeholder&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;MQTT broker server&quot;</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;channelid&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Channel ID&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;pattern&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;^[0-9]{6}$&quot;</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;userkey&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;User Key&quot;</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;apikey&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;API Key&quot;</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;newline&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACElement&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;&lt;hr&gt;&quot;</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;uniqueid&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACCheckbox&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;unique&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Use APID unique&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;checked&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #66d9ef">false</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;period&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACRadio&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #f8f8f2">[</span>
          <span style="color: #e6db74">&quot;30 sec.&quot;</span><span style="color: #f8f8f2">,</span>
          <span style="color: #e6db74">&quot;60 sec.&quot;</span><span style="color: #f8f8f2">,</span>
          <span style="color: #e6db74">&quot;180 sec.&quot;</span>
        <span style="color: #f8f8f2">],</span>
        <span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Update period&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;arrange&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;vertical&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;checked&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #ae81ff">1</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;newline&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACElement&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;&lt;hr&gt;&quot;</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;hostname&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;type&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ACInput&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;label&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;ESP host name&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;pattern&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;^([a-zA-Z0-9]([a-zA-Z0-9-])*[a-zA-Z0-9]){1,32}$&quot;</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;save&quot;</span><span style="color: #f8f8f2">,</span>
        <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>
        <span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Save&amp;amp;Start&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;uri&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;/mqtt_save&quot;</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;discard&quot;</span><span style="color: #f8f8f2">,</span>
        <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>
        <span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Discard&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;uri&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;/&quot;</span>
      <span style="color: #f8f8f2">}</span>
    <span style="color: #f8f8f2">]</span>
  <span style="color: #f8f8f2">},</span>
  <span style="color: #f8f8f2">{</span>
    <span style="color: #f92672">&quot;title&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;MQTT Setting&quot;</span><span style="color: #f8f8f2">,</span>
    <span style="color: #f92672">&quot;uri&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;/mqtt_save&quot;</span><span style="color: #f8f8f2">,</span>
    <span style="color: #f92672">&quot;menu&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #66d9ef">false</span><span style="color: #f8f8f2">,</span>
    <span style="color: #f92672">&quot;element&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #f8f8f2">[</span>
      <span style="color: #f8f8f2">{</span>
        <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>
        <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>
        <span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;&lt;h4&gt;Parameters saved as:&lt;/h4&gt;&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;style&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;text-align:center;color:#2f4f4f;padding:10px;&quot;</span>
      <span style="color: #f8f8f2">},</span>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;parameters&quot;</span><span style="color: #f8f8f2">,</span>
        <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>
      <span style="color: #f8f8f2">{</span>
        <span style="color: #f92672">&quot;name&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;clear&quot;</span><span style="color: #f8f8f2">,</span>
        <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>
        <span style="color: #f92672">&quot;value&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;Clear channel&quot;</span><span style="color: #f8f8f2">,</span>
        <span style="color: #f92672">&quot;uri&quot;</span><span style="color: #f8f8f2">:</span> <span style="color: #e6db74">&quot;/mqtt_clear&quot;</span>
      <span style="color: #f8f8f2">}</span>
    <span style="color: #f8f8f2">]</span>
  <span style="color: #f8f8f2">}</span>
<span style="color: #f8f8f2">]</span>
</pre></div>
<span style="margin-right:6px;margin-top:2px;"><img align="middle" width="32" height="32" src="images/arrow_down.png"></span><i class="fa fa-code"></i> Exclude the JSON and replace to the AutoConnectElements natively</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #75715e">// In the declaration,</span>
<span style="color: #75715e">// Declare AutoConnectElements for the page asf /mqtt_setting</span>
<span style="color: #f8f8f2">ACText(header,</span> <span style="color: #e6db74">&quot;&lt;h2&gt;MQTT broker settings&lt;/h2&gt;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text-align:center;color:#2f4f4f;padding:10px;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACText(caption,</span> <span style="color: #e6db74">&quot;Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;font-family:serif;color:#4682b4;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACInput(mqttserver,</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;Server&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9</span><span style="color: #ae81ff">\\</span><span style="color: #e6db74">-]*[a-zA-Z0-9])</span><span style="color: #ae81ff">\\</span><span style="color: #e6db74">.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9</span><span style="color: #ae81ff">\\</span><span style="color: #e6db74">-]*[A-Za-z0-9])$&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;MQTT broker server&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACInput(channelid,</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;Channel ID&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;^[0-9]{6}$&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACInput(userkey,</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;User Key&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACInput(apikey,</span> <span style="color: #e6db74">&quot;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;API Key&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACElement(newline,</span> <span style="color: #e6db74">&quot;&lt;hr&gt;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACCheckbox(uniqueid,</span> <span style="color: #e6db74">&quot;unique&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;Use APID unique&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACRadio(period,</span> <span style="color: #f8f8f2">{</span> <span style="color: #e6db74">&quot;30 sec.&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;60 sec.&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;180 sec.&quot;</span> <span style="color: #f8f8f2">},</span> <span style="color: #e6db74">&quot;Update period&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">AC_Vertical,</span> <span style="color: #ae81ff">1</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACSubmit(save,</span> <span style="color: #e6db74">&quot;Start&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;mqtt_save&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACSubmit(discard,</span> <span style="color: #e6db74">&quot;Discard&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;/&quot;</span><span style="color: #f8f8f2">);</span>

<span style="color: #75715e">// Declare the custom Web page as /mqtt_setting and contains the AutoConnectElements</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">mqtt_setting</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;/mqtt_setting&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;MQTT Setting&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">true,</span> <span style="color: #f8f8f2">{</span>
  <span style="color: #f8f8f2">header,</span>
  <span style="color: #f8f8f2">caption,</span>
  <span style="color: #f8f8f2">mqttserver,</span>
  <span style="color: #f8f8f2">channelid,</span>
  <span style="color: #f8f8f2">userkey,</span>
  <span style="color: #f8f8f2">apikey,</span>
  <span style="color: #f8f8f2">newline,</span>
  <span style="color: #f8f8f2">uniqueid,</span>
  <span style="color: #f8f8f2">period,</span>
  <span style="color: #f8f8f2">newline,</span>
  <span style="color: #f8f8f2">save,</span>
  <span style="color: #f8f8f2">discard</span>
<span style="color: #f8f8f2">});</span>

<span style="color: #75715e">// Declare AutoConnectElements for the page as /mqtt_save</span>
<span style="color: #f8f8f2">ACText(caption2,</span> <span style="color: #e6db74">&quot;&lt;h4&gt;Parameters available as:&lt;/h4&gt;&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;text-align:center;color:#2f4f4f;padding:10px;&quot;</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">ACText(parameters);</span>
<span style="color: #f8f8f2">ACSubmit(clear,</span> <span style="color: #e6db74">&quot;Clear channel&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;/mqtt_clear&quot;</span><span style="color: #f8f8f2">);</span>

<span style="color: #75715e">// Declare the custom Web page as /mqtt_save and contains the AutoConnectElements</span>
<span style="color: #f8f8f2">AutoConnectAux</span> <span style="color: #a6e22e">mqtt_save</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;/mqtt_save&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&quot;MQTT Setting&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">false,</span> <span style="color: #f8f8f2">{</span>
  <span style="color: #f8f8f2">caption2,</span>
  <span style="color: #f8f8f2">parameters,</span>
  <span style="color: #f8f8f2">clear</span>
<span style="color: #f8f8f2">});</span>

<span style="color: #75715e">// In the setup(),</span>
<span style="color: #75715e">// Join the custom Web pages and performs begin</span>
  <span style="color: #f8f8f2">portal.join({</span> <span style="color: #f8f8f2">mqtt_setting,</span> <span style="color: #f8f8f2">mqtt_save</span> <span style="color: #f8f8f2">});</span>
  <span style="color: #f8f8f2">portal.begin();</span>
</pre></div>

<div class="footnote">
<hr />
<ol>
<li id="fn:1">
<p>Detaching the ArduinoJson library reduces the sketch size by approximately 10K bytes.&#160;<a class="footnote-backref" href="#fnref:1" rev="footnote" title="Jump back to footnote 1 in the text">&#8617;</a></p>
</li>
</ol>
</div>
                
                  
                
              
              
                


              
            </article>
          </div>
        </div>
      </main>
      
        
<footer class="md-footer">
  
    <div class="md-footer-nav">
      <nav class="md-footer-nav__inner md-grid">
        
          <a href="menuize.html" title="Constucting the menu" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
            <div class="md-flex__cell md-flex__cell--shrink">
              <i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
            </div>
            <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
              <span class="md-flex__ellipsis">
                <span class="md-footer-nav__direction">
                  Previous
                </span>
                Constucting the menu
              </span>
            </div>
          </a>
        
        
          <a href="faq.html" title="FAQ" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
            <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
              <span class="md-flex__ellipsis">
                <span class="md-footer-nav__direction">
                  Next
                </span>
                FAQ
              </span>
            </div>
            <div class="md-flex__cell md-flex__cell--shrink">
              <i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
            </div>
          </a>
        
      </nav>
    </div>
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-footer-copyright">
        
          <div class="md-footer-copyright__highlight">
            Copyright &copy; 2018-2019 Hieromon Ikasamo
          </div>
        
        powered by
        <a href="https://www.mkdocs.org">MkDocs</a>
        and
        <a href="https://squidfunk.github.io/mkdocs-material/">
          Material for MkDocs</a>
      </div>
      
        
  <div class="md-footer-social">
    <link rel="stylesheet" href="assets/fonts/font-awesome.css">
    
      <a href="https://github.com/Hieromon" class="md-footer-social__link fa fa-github"></a>
    
      <a href="https://twitter.com/hieromon" class="md-footer-social__link fa fa-twitter"></a>
    
  </div>

      
    </div>
  </div>
</footer>
      
    </div>
    
      <script src="assets/javascripts/application.a353778b.js"></script>
      
      <script>app.initialize({version:"1.0.4",url:{base:"."}})</script>
      
        <script src="js/gifffer.min.js"></script>
      
    
  </body>
</html>