<!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-4.3.1" > < title > Custom Web pages w/o JSON - AutoConnect for ESP8266/ESP32< / title > < link rel = "stylesheet" href = "assets/stylesheets/application.4031d38b.css" > < link rel = "stylesheet" href = "assets/stylesheets/application-palette.224b79ff.css" > < meta name = "theme-color" content = "#3f51b5" > < script src = "assets/javascripts/modernizr.74668098.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&display=swap" > < 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 > w i n d o w . g a = w i n d o w . g a | | f u n c t i o n ( ) {
(ga.q = ga.q || []).push(arguments)
}
ga.l = +new Date
/* Setup integration and send page view */
ga("create", "UA-116150854-1", "auto")
ga("set", "anonymizeIp", true)
ga("send", "pageview")
/* Register handler to log search on blur */
document.addEventListener("DOMContentLoaded", () => {
if (document.forms.search) {
var query = document.forms.search.query
query.addEventListener("blur", function() {
if (this.value) {
var path = document.location.pathname;
ga("send", "pageview", path + "?q=" + this.value)
}
})
}
})< / script > < script async src = "https://www.google-analytics.com/analytics.js" > < / 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 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 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.75T360 304zm56-44q0 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.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-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.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.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" >  < / 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" > < 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" da
< 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" > ¶ < / 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" > ¶ < / 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" > " title" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " MQTT Setting" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " uri" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " /mqtt_setting" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " menu" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #66d9ef" > true< / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " element" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #f8f8f2" > [< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " header" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACText" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " value" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " < h2> MQTT broker settings< /h2> " < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " style" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " text-align:center;color:#2f4f4f;padding:10px;" < / span >
< span style = "color: #f8f8f2" > },< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " caption" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACText" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " value" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " style" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " font-family:serif;color:#4682b4;" < / span >
< span style = "color: #f8f8f2" > },< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " mqttserver" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACInput" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " value" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " " < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " label" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " Server" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " pattern" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ^(([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])$" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " placeholder" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " MQTT broker server" < / span >
< span style = "color: #f8f8f2" > },< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " channelid" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACInput" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " label" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " Channel ID" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " pattern" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ^[0-9]{6}$" < / span >
< span style = "color: #f8f8f2" > },< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " userkey" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACInput" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " label" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " User Key" < / span >
< span style = "color: #f8f8f2" > },< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " apikey" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACInput" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " label" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " API Key" < / span >
< span style = "color: #f8f8f2" > },< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " newline" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACElement" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " value" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " < hr> " < / span >
< span style = "color: #f8f8f2" > },< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " uniqueid" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACCheckbox" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " value" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " unique" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " label" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " Use APID unique" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " checked" < / 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" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " period" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACRadio" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " value" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #f8f8f2" > [< / span >
< span style = "color: #e6db74" > " 30 sec." < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #e6db74" > " 60 sec." < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #e6db74" > " 180 sec." < / span >
< span style = "color: #f8f8f2" > ],< / span >
< span style = "color: #f92672" > " label" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " Update period" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " arrange" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " vertical" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " checked" < / 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" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " newline" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACElement" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " value" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " < hr> " < / span >
< span style = "color: #f8f8f2" > },< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " hostname" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACInput" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " value" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " " < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " label" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ESP host name" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " pattern" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ^([a-zA-Z0-9]([a-zA-Z0-9-])*[a-zA-Z0-9]){1,32}$" < / span >
< span style = "color: #f8f8f2" > },< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " save" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACSubmit" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " value" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " Save& amp;Start" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " uri" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " /mqtt_save" < / span >
< span style = "color: #f8f8f2" > },< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " discard" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACSubmit" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " value" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " Discard" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " uri" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " /" < / 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" > " title" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " MQTT Setting" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " uri" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " /mqtt_save" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " menu" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #66d9ef" > false< / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " element" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #f8f8f2" > [< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " caption" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACText" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " value" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " < h4> Parameters saved as:< /h4> " < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " style" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " text-align:center;color:#2f4f4f;padding:10px;" < / span >
< span style = "color: #f8f8f2" > },< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " parameters" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACText" < / span >
< span style = "color: #f8f8f2" > },< / span >
< span style = "color: #f8f8f2" > {< / span >
< span style = "color: #f92672" > " name" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " clear" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " type" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " ACSubmit" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " value" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " Clear channel" < / span > < span style = "color: #f8f8f2" > ,< / span >
< span style = "color: #f92672" > " uri" < / span > < span style = "color: #f8f8f2" > :< / span > < span style = "color: #e6db74" > " /mqtt_clear" < / 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" > " < h2> MQTT broker settings< /h2> " < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " text-align:center;color:#2f4f4f;padding:10px;" < / span > < span style = "color: #f8f8f2" > );< / span >
< span style = "color: #f8f8f2" > ACText(caption,< / span > < span style = "color: #e6db74" > " Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak" < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " font-family:serif;color:#4682b4;" < / span > < span style = "color: #f8f8f2" > );< / span >
< span style = "color: #f8f8f2" > ACInput(mqttserver,< / span > < span style = "color: #e6db74" > " " < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " Server" < / span > < span style = "color: #f8f8f2" > ,< / 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])< / 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])$" < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " MQTT broker server" < / span > < span style = "color: #f8f8f2" > );< / span >
< span style = "color: #f8f8f2" > ACInput(channelid,< / span > < span style = "color: #e6db74" > " " < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " Channel ID" < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " ^[0-9]{6}$" < / span > < span style = "color: #f8f8f2" > );< / span >
< span style = "color: #f8f8f2" > ACInput(userkey,< / span > < span style = "color: #e6db74" > " " < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " User Key" < / span > < span style = "color: #f8f8f2" > );< / span >
< span style = "color: #f8f8f2" > ACInput(apikey,< / span > < span style = "color: #e6db74" > " " < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " API Key" < / span > < span style = "color: #f8f8f2" > );< / span >
< span style = "color: #f8f8f2" > ACElement(newline,< / span > < span style = "color: #e6db74" > " < hr> " < / span > < span style = "color: #f8f8f2" > );< / span >
< span style = "color: #f8f8f2" > ACCheckbox(uniqueid,< / span > < span style = "color: #e6db74" > " unique" < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " Use APID unique" < / span > < span style = "color: #f8f8f2" > );< / span >
< span style = "color: #f8f8f2" > ACRadio(period,< / span > < span style = "color: #f8f8f2" > {< / span > < span style = "color: #e6db74" > " 30 sec." < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " 60 sec." < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " 180 sec." < / span > < span style = "color: #f8f8f2" > },< / span > < span style = "color: #e6db74" > " Update period" < / 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" > " Start" < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " mqtt_save" < / span > < span style = "color: #f8f8f2" > );< / span >
< span style = "color: #f8f8f2" > ACSubmit(discard,< / span > < span style = "color: #e6db74" > " Discard" < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " /" < / 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" > " /mqtt_setting" < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " MQTT Setting" < / 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" > " < h4> Parameters available as:< /h4> " < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " text-align:center;color:#2f4f4f;padding:10px;" < / span > < span style = "color: #f8f8f2" > );< / span >
< span style = "color: #f8f8f2" > ACText(parameters);< / span >
< span style = "color: #f8f8f2" > ACSubmit(clear,< / span > < span style = "color: #e6db74" > " Clear channel" < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " /mqtt_clear" < / 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" > " /mqtt_save" < / span > < span style = "color: #f8f8f2" > ,< / span > < span style = "color: #e6db74" > " MQTT Setting" < / 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.  < a class = "footnote-backref" href = "#fnref:1" rev = "footnote" title = "Jump back to footnote 1 in the text" > ↩ < / 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 = "Attach 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 > Attach the menu< / span > < / div > < / a > < a href = "lsbegin.html" title = "Inside AutoConnect::begin" 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 > Inside AutoConnect::begin< / span > < / div > < div class = "md-flex__cell md-flex__cell--shrink" > < i class = "md-icon md-icon--arrow-forward md-footer-nav__button" > < / i > < / div > < / a > < / nav > < / div > < div class = "md-footer-meta md-typeset" > < div class = "md-footer-meta__inner md-grid" > < div class = "md-footer-copyright" > < div class = "md-footer-copyright__highlight" > Copyright © 2018-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.b260a35d.js" > < / script > < script > app . initialize ( { version : "1.0.4" , url : { base : "." } } ) < / script > < script src = "js/gifffer.min.js" > < / script > < / body > < / html >
