You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1139 lines
48 KiB
1139 lines
48 KiB
|
|
|
|
|
|
|
|
<!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.1, mkdocs-material-4.6.3">
|
|
|
|
|
|
|
|
<title>Custom Web pages w/o JSON - AutoConnect for ESP8266/ESP32</title>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="assets/stylesheets/application.adb8469c.css">
|
|
|
|
<link rel="stylesheet" href="assets/stylesheets/application-palette.a8b3c06d.css">
|
|
|
|
|
|
|
|
|
|
<meta name="theme-color" content="#3f51b5">
|
|
|
|
|
|
|
|
<script src="assets/javascripts/modernizr.86422ebf.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%7CRoboto+Mono&display=fallback">
|
|
<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.3/css/all.css">
|
|
|
|
|
|
|
|
|
|
<script>
|
|
window.ga = window.ga || function() {
|
|
(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="0" 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" aria-label="AutoConnect for ESP8266/ESP32" class="md-header-nav__button md-logo">
|
|
|
|
<img alt="logo" 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" aria-label="search" 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" role="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 alt="logo" 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">
|
|
OTA Updates
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-7">
|
|
OTA Updates
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="otaupdate.html" title="OTA Updates" class="md-nav__link">
|
|
OTA Updates
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="otabrowser.html" title="Using Web Browser" class="md-nav__link">
|
|
Using Web Browser
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="otaserver.html" title="Using Update Server" class="md-nav__link">
|
|
Using Update Server
|
|
</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-8" type="checkbox" id="nav-8">
|
|
|
|
<label class="md-nav__link" for="nav-8">
|
|
Library APIs
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-8">
|
|
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="apiupdate.html" title="AutoConnectUpdate API" class="md-nav__link">
|
|
AutoConnectUpdate 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-9" type="checkbox" id="nav-9" checked>
|
|
|
|
<label class="md-nav__link" for="nav-9">
|
|
Examples
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-9">
|
|
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="Attach the menu" class="md-nav__link">
|
|
Attach 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" 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" class="md-nav__link">
|
|
Writing the custom Web pages without JSON
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#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 md-nav__item--nested">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
|
|
|
|
<label class="md-nav__link" for="nav-10">
|
|
Appendix
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-10">
|
|
Appendix
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="lsbegin.html" title="Inside AutoConnect::begin" class="md-nav__link">
|
|
Inside AutoConnect::begin
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="credit.html" title="Saved credentials access" class="md-nav__link">
|
|
Saved credentials access
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="acupload.html" title="File upload handler" class="md-nav__link">
|
|
File upload handler
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="colorized.html" title="Custom colorized" class="md-nav__link">
|
|
Custom colorized
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="changelabel.html" title="Change label text" class="md-nav__link">
|
|
Change label text
|
|
</a>
|
|
</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" 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" class="md-nav__link">
|
|
Writing the custom Web pages without JSON
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#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">¶</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">¶</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">1</a></sup></p>
|
|
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><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>
|
|
</code></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>
|
|
<div class="admonition hint">
|
|
<p class="admonition-title">Exclude the ArduinoJson by each compile-time</p>
|
|
<p>If you want to exclude ArduinoJson without changing the library code, specify the <strong>AUTOCONNECT_NOUSE_JSON</strong> directive as a compiler option according to the method described in the <a href="faq.html#how-do-i-detach-the-ardunojson">FAQ</a>.</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="fab fa-js-square"></i> The JSON document for mqttRSSI</p>
|
|
<p><div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><code><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>
|
|
</code></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><code><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>
|
|
</code></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" 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-2020 Hieromon Ikasamo
|
|
</div>
|
|
|
|
powered by
|
|
<a href="https://www.mkdocs.org" target="_blank" rel="noopener">MkDocs</a>
|
|
and
|
|
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
|
|
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" target="_blank" rel="noopener" title="github" class="md-footer-social__link fa fa-github"></a>
|
|
|
|
<a href="https://twitter.com/hieromon" target="_blank" rel="noopener" title="twitter" class="md-footer-social__link fa fa-twitter"></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script src="assets/javascripts/application.c33a9706.js"></script>
|
|
|
|
<script>app.initialize({version:"1.1",url:{base:"."}})</script>
|
|
|
|
<script src="js/gifffer.min.js"></script>
|
|
|
|
|
|
</body>
|
|
</html> |