Hieromon Ikasamo
5 years ago
parent
401000579a
commit
bd16286da9
|
After Width: | Height: | Size: 161 KiB |
|
After Width: | Height: | Size: 87 KiB |
@ -0,0 +1,875 @@ |
||||
|
||||
|
||||
|
||||
|
||||
<!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/menuize.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>Constucting menu - 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"> |
||||
|
||||
|
||||
|
||||
<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="#what-menus-can-be-made-using-autoconnect" 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"> |
||||
Constucting menu |
||||
</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"> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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.md" title="Tips for data retrieval" class="md-nav__link"> |
||||
Tips for data retrieval |
||||
</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"> |
||||
Constucting menu |
||||
</label> |
||||
|
||||
<a href="menuize.html" title="Constucting menu" class="md-nav__link md-nav__link--active"> |
||||
Constucting menu |
||||
</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="#what-menus-can-be-made-using-autoconnect" title="What menus can be made using AutoConnect" class="md-nav__link"> |
||||
What menus can be made using AutoConnect |
||||
</a> |
||||
|
||||
</li> |
||||
|
||||
<li class="md-nav__item"> |
||||
<a href="#basic-mechanism-of-menu-generation" title="Basic mechanism of menu generation" class="md-nav__link"> |
||||
Basic mechanism of menu generation |
||||
</a> |
||||
|
||||
</li> |
||||
|
||||
<li class="md-nav__item"> |
||||
<a href="#place-the-item-for-the-legacy-sketches-on-the-menu" title="Place the item for the legacy sketches on the menu" class="md-nav__link"> |
||||
Place the item for the legacy sketches on the menu |
||||
</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="#what-menus-can-be-made-using-autoconnect" title="What menus can be made using AutoConnect" class="md-nav__link"> |
||||
What menus can be made using AutoConnect |
||||
</a> |
||||
|
||||
</li> |
||||
|
||||
<li class="md-nav__item"> |
||||
<a href="#basic-mechanism-of-menu-generation" title="Basic mechanism of menu generation" class="md-nav__link"> |
||||
Basic mechanism of menu generation |
||||
</a> |
||||
|
||||
</li> |
||||
|
||||
<li class="md-nav__item"> |
||||
<a href="#place-the-item-for-the-legacy-sketches-on-the-menu" title="Place the item for the legacy sketches on the menu" class="md-nav__link"> |
||||
Place the item for the legacy sketches on the menu |
||||
</a> |
||||
|
||||
</li> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</ul> |
||||
|
||||
</nav> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<div class="md-content"> |
||||
<article class="md-content__inner md-typeset"> |
||||
|
||||
|
||||
|
||||
<h1>Constucting menu</h1> |
||||
|
||||
<h2 id="what-menus-can-be-made-using-autoconnect">What menus can be made using AutoConnect<a class="headerlink" href="#what-menus-can-be-made-using-autoconnect" title="Permanent link">¶</a></h2> |
||||
<p>AutoConnect generates a menu dynamically depending on the instantiated <a href="acintro.html#how-it-works">AutoConnectAux</a> at the sketch executing time. Usually, it is a collection of <a href="acelements.html">AutoConnectElement</a>. In addition to this, you can generate a menu from only AutoConnectAux, without AutoConnectElements. That is, you can easily make the built-in menu with legacy sketches of yours.</p> |
||||
<h2 id="basic-mechanism-of-menu-generation">Basic mechanism of menu generation<a class="headerlink" href="#basic-mechanism-of-menu-generation" title="Permanent link">¶</a></h2> |
||||
<p>The sketch can display the <a href="menu.html">AutoConnect menu</a> by following three patterns depending on AutoConnect-API usage.</p> |
||||
<dl> |
||||
<dt><i class="fa fa-desktop"></i> Basic menu</dt> |
||||
<dd>It is the most basic menu only for WiFi connection. Sketch can automatically display this menu with only the basic call sequence of the AutoConnect API which invokes <a href="api.html#begin">AutoConnect::begin</a> and <a href="api.html#handleclient">AutoConnect::handleClient</a>.</dd> |
||||
<dt><i class="fa fa-desktop"></i> Extra menu with custom Web pages which is consisted by <a href="acelements.html">AutoConnectElements</a></dt> |
||||
<dd>It is an extended menu that appears when the sketch consists of the custom Web pages with <a href="acintro.html#how-it-works">AutoConnectAux</a> and AutoConnectElements. Refer to <a href="acintro.html#custom-web-pages-in-autoconnect-menu">Custom Web pages section</a>.</dd> |
||||
<dt><i class="fa fa-desktop"></i> Extra menu which contains legacy pages</dt> |
||||
<dd>It is for the legacy sketches using the <strong>on</strong> handler of ESP8266WebServer/WebServer(for ESP32) class natively and looks the same as the extra menu as above.</dd> |
||||
</dl> |
||||
<p>The mechanism to generate the AutoConnect menu is simple. It will insert the item generated from the <a href="apiaux.html#autoconnectaux"><strong>title</strong></a> member variable of the AutoConnectAux object to AutoConnect's built-in HTML menu list which is implemented as the HTML <code><li></code> tag. Therefore, the legacy sketches can invoke the web pages from the AutoConnect menu with just declaration the title and URI to AutoConnectAux.</p> |
||||
<h2 id="place-the-item-for-the-legacy-sketches-on-the-menu">Place the item for the legacy sketches on the menu<a class="headerlink" href="#place-the-item-for-the-legacy-sketches-on-the-menu" title="Permanent link">¶</a></h2> |
||||
<p>To implement this with your sketch, use only the <a href="apiaux.html#autoconnectaux">AutoConnectAux</a> constructed with the title and URI of that page. <a href="acelements.html">AutoConnectElements</a> is not required.</p> |
||||
<p>The AutoConnect library package contains an example sketch for ESP8266WebServer known as FSBrowser. Its example is a sample implementation that supports AutoConnect without changing the structure of the original FSBrowser and has the menu item for <strong>Edit</strong> and <strong>List</strong>.</p> |
||||
<div style="display:block;margin-left:auto;margin-right:auto;width:284px;height:491px;border:1px solid lightgrey;"><img data-gifffer="./images/aux_fsbrowser.gif" data-gifffer-width="280" data-gifffer-height="490" /></div> |
||||
|
||||
<p>The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows.</p> |
||||
<ol> |
||||
<li>Add AutoConnect declaration.</li> |
||||
<li>Add the AutoConnectAux named "<strong>Edit</strong>" and "<strong>List</strong>" as each page.</li> |
||||
<li>Replace the instance of ESP8266WebServer to AutoConnect.</li> |
||||
<li>Change menu title to FSBrowser using <a href="apiconfig.html#title">AutoConnectConfig::title</a>.</li> |
||||
<li>Join the legacy pages declared at step #2 to AutoConnect using <a href="api.html#join">AutoConnect::join</a>.</li> |
||||
</ol> |
||||
<div style="overflow:auto"><img style="width:auto;max-width:none;height:840px" src="./images/fsbrowser_ba.svg" /></div> |
||||
|
||||
<script> |
||||
window.onload = function() { |
||||
Gifffer(); |
||||
}; |
||||
</script> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</article> |
||||
</div> |
||||
</div> |
||||
</main> |
||||
|
||||
|
||||
<footer class="md-footer"> |
||||
|
||||
<div class="md-footer-nav"> |
||||
<nav class="md-footer-nav__inner md-grid"> |
||||
|
||||
<a href="howtoembed.html" title="How to embed" 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> |
||||
How to embed |
||||
</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 © 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> |
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
@ -1,4 +1,4 @@ |
||||
## How to embed the AutoConnect |
||||
## Embed the AutoConnect to the sketch |
||||
|
||||
Here holds two case examples. Both examples perform the same function. Only how to incorporate the **AutoConnect** into the sketch differs. Also included in the sample folder, HandlePortal.ino also shows how to use the [PageBuilder](https://github.com/Hieromon/PageBuilder) library for HTML assemblies. |
||||
|
||||
|
After Width: | Height: | Size: 161 KiB |
|
After Width: | Height: | Size: 87 KiB |
@ -0,0 +1,42 @@ |
||||
## What menus can be made using AutoConnect |
||||
|
||||
AutoConnect generates a menu dynamically depending on the instantiated [AutoConnectAux](acintro.md#how-it-works) at the sketch executing time. Usually, it is a collection of [AutoConnectElement](acelements.md). In addition to this, you can generate a menu from only AutoConnectAux, without AutoConnectElements. That is, you can easily make the built-in menu with legacy sketches of yours. |
||||
|
||||
## Basic mechanism of menu generation |
||||
|
||||
The sketch can display the [AutoConnect menu](menu.md) by following three patterns depending on AutoConnect-API usage. |
||||
|
||||
<i class="fa fa-desktop"></i> Basic menu |
||||
: It is the most basic menu only for WiFi connection. Sketch can automatically display this menu with only the basic call sequence of the AutoConnect API which invokes [AutoConnect::begin](api.md#begin) and [AutoConnect::handleClient](api.md#handleclient). |
||||
|
||||
<i class="fa fa-desktop"></i> Extra menu with custom Web pages which is consisted by [AutoConnectElements](acelements.md) |
||||
: It is an extended menu that appears when the sketch consists of the custom Web pages with [AutoConnectAux](acintro.md#how-it-works) and AutoConnectElements. Refer to [Custom Web pages section](acintro.md#custom-web-pages-in-autoconnect-menu). |
||||
|
||||
<i class="fa fa-desktop"></i> Extra menu which contains legacy pages |
||||
: It is for the legacy sketches using the **on** handler of ESP8266WebServer/WebServer(for ESP32) class natively and looks the same as the extra menu as above. |
||||
|
||||
The mechanism to generate the AutoConnect menu is simple. It will insert the item generated from the [**title**](apiaux.md#autoconnectaux) member variable of the AutoConnectAux object to AutoConnect's built-in HTML menu list which is implemented as the HTML `<li>` tag. Therefore, the legacy sketches can invoke the web pages from the AutoConnect menu with just declaration the title and URI to AutoConnectAux. |
||||
|
||||
## Place the item for the legacy sketches on the menu |
||||
|
||||
To implement this with your sketch, use only the [AutoConnectAux](apiaux.md#autoconnectaux) constructed with the title and URI of that page. [AutoConnectElements](acelements.md) is not required. |
||||
|
||||
The AutoConnect library package contains an example sketch for ESP8266WebServer known as FSBrowser. Its example is a sample implementation that supports AutoConnect without changing the structure of the original FSBrowser and has the menu item for **Edit** and **List**. |
||||
|
||||
<div style="display:block;margin-left:auto;margin-right:auto;width:284px;height:491px;border:1px solid lightgrey;"><img data-gifffer="./images/aux_fsbrowser.gif" data-gifffer-width="280" data-gifffer-height="490" /></div> |
||||
|
||||
The changes I made to adapt the FSBrowser to the AutoConnect menu are slight as follows. |
||||
|
||||
1. Add AutoConnect declaration. |
||||
2. Add the AutoConnectAux named "**Edit**" and "**List**" as each page. |
||||
3. Replace the instance of ESP8266WebServer to AutoConnect. |
||||
4. Change menu title to FSBrowser using [AutoConnectConfig::title](apiconfig.md#title). |
||||
5. Join the legacy pages declared at step #2 to AutoConnect using [AutoConnect::join](api.md#join). |
||||
|
||||
<div style="overflow:auto"><img style="width:auto;max-width:none;height:840px" src="./images/fsbrowser_ba.svg" /></div> |
||||
|
||||
<script> |
||||
window.onload = function() { |
||||
Gifffer(); |
||||
}; |
||||
</script> |
||||
Loading…
Reference in new issue