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.
 
 
 
 
 
AutoConnect/docs/menuize.html

59 lines
23 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/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-4.3.1"><title>Attach the menu - 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>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="#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">Attach the 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">&#xE5CD;</button></form><div class="md-search__output"><div class="md-search__scrollwrap" data-md-scrollfix><div class="md-search-result" data-md-component="result"><div class="md-search-result__meta">Type to start searching</div><ol class="md-search-result__list"></ol></div></div></div></div></div></div><div class="md-flex__cell md-flex__cell--shrink"><div class="md-header-nav__source"><a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-source="github"><div class="md-source__icon"><svg viewBox="0 0 24 24" width="24" height="24"><use xlink:href="#__github" width="24" height="24"></use></svg></div><div class="md-source__repository">Hieromon/AutoConnect</div></a></div></div></div></nav></header><div class="md-container"><main class="md-main"><div class="md-main__inner md-grid" data-md-component="container"><div class="md-sidebar md-sidebar--primary" data-md-component="navigation"><div class="md-sidebar__scrollwrap"><div class="md-sidebar__inner"><nav class="md-nav md-nav--primary" data-md-level="0"><label class="md-nav__title md-nav__title--site" for="__drawer"><a href="https://Hieromon.github.io/AutoConnect/" title="AutoConnect for ESP8266/ESP32" class="md-nav__button md-logo"><img src="images/arduino-logo.svg" width="48" height="48"></a>AutoConnect for ESP8266/ESP32</label><div class="md-nav__source"><a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-source="github"><div class="md-source__icon"><svg viewBox="0 0 24 24" width="24" height="24"><use xlink:href="#__github" width="24" height="24"></use></svg></div><div class="md-source__repository">Hieromon/AutoConnect</div></a></div><ul class="md-nav__list" data-md-scrollfix><li class="md-nav__item"><a href="index.html" title="Overview" class="md-nav__link">Overview</a></li><li class="md-nav__item"><a href="gettingstarted.html" title="Getting started" class="md-nav__link">Getting started</a></li><li class="md-nav__item"><a href="menu.html" title="AutoConnect menu" class="md-nav__link">AutoConnect menu</a></li><li class="md-nav__item"><a href="basicusage.html" title="Basic usage" class="md-nav__link">Basic usage</a></li><li class="md-nav__item"><a href="advancedusage.html" title="Advanced usage" class="md-nav__link">Advanced usage</a></li><li class="md-nav__item md-nav__item--nested"><input class="md-toggle md-nav__toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6"><label class="md-nav__link" for="nav-6">Custom Web pages</label><nav class="md-nav" data-md-component="collapsible" data-md-level="1"><label class="md-nav__title" for="nav-6">Custom Web pages</label><ul class="md-nav__list" data-md-scrollfix><li class="md-nav__item"><a href="acintro.html" title="Custom Web pages with AutoConnect" class="md-nav__link">Custom Web pages with AutoConnect</a></li><li class="md-nav__item"><a href="acelements.html" title="AutoConnectElements" class="md-nav__link">AutoConnectElements</a></li><li class="md-nav__item"><a href="acjson.html" title="Custom Web pages with JSON" class="md-nav__link">Custom Web pages with JSON</a></li><li class="md-nav__item"><a href="achandling.html" title="Handling the custom Web pages" class="md-nav__link">Handling the custom Web pages</a></li></ul></nav></li><li class="md-nav__item md-nav__item--nested"><input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7"><label class="md-nav__link" for="nav-7">Library APIs</label><nav class="md-nav" data-md-component="collapsible" data-md-level="1"><label class="md-nav__title" for="nav-7">Library APIs</label><ul class="md-nav__list" data-md-scrollfix><li class="md-nav__item"><a href="api.html" title="AutoConnect API" class="md-nav__link">AutoConnect API</a></li><li class="md-nav__item"><a href="apiaux.html" title="AutoConnectAux API" class="md-nav__link">AutoConnectAux API</a></li><li class="md-nav__item"><a href="apiconfig.html" title="AutoConnectConfig API" class="md-nav__link">AutoConnectConfig API</a></li><li class="md-nav__item"><a href="apielements.html" title="AutoConnectElements API" class="md-nav__link">AutoConnectElements API</a></li><li class="md-nav__item"><a href="apiextra.html" title="Something extra" class="md-nav__link">Something extra</a></li></ul></nav></li><li class="md-nav__item md-nav__item--active md-nav__item--nested"><input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8" checked><label class="md-nav__link" for="nav-8">Examples</label><nav class="md-nav" data-md-component="collapsible" data-md-level="1"><label class="md-nav__title" for="nav-8">Examples</label><ul class="md-nav__list" data-md-scrollfix><li class="md-nav__item"><a href="howtoembed.html" title="How to embed" class="md-nav__link">How to embed</a></li><li class="md-nav__item"><a href="datatips.html" title="Tips for data conversion" class="md-nav__link">Tips for data conversion</a></li><li class="md-nav__item 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">Attach the menu</label><a href="menuize.html" title="Attach the menu" class="md-nav__link md-nav__link--active">Attach the 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><li class="md-nav__item"><a href="wojson.html" title="Custom Web pages w/o JSON" class="md-nav__link">Custom Web pages w/o JSON</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-9" type="checkbox" id="nav-9"><label class="md-nav__link" for="nav-9">Appendix</label><nav class="md-nav" data-md-component="collapsible" data-md-level="1"><label class="md-nav__title" for="nav-9">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 credentail access" class="md-nav__link">Saved credentail 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></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>Attach the 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">&para;</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.<br>In other words, you can easily create a built-in menu featuring the WiFi connection facility embedding the legacy web pages.</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">&para;</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>&ensp;<strong>Basic menu</strong></dt>
<dd>It is the most basic menu for only connecting WiFi. Sketch can automatically display this menu with 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>&ensp;<strong>Extra menu with custom Web pages which is consisted by <a href="acelements.html">AutoConnectElements</a></strong></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 section <a href="acintro.html#custom-web-pages-in-autoconnect-menu"><em>Custom Web pages section</em></a>.</dd>
<dt><i class="fa fa-desktop"></i>&ensp;<strong>Extra menu which contains legacy pages</strong></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 as <code>&lt;li&gt;</code> tag generated from the <a href="apiaux.html#autoconnectaux"><strong>title</strong></a> and <a href="apiaux.html#autoconnectaux"><strong>uri</strong></a> member variable of the AutoConnectAux object to the menu list of AutoConnect's built-in HTML. 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">&para;</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>
<p><span style="display:block;margin-left:auto;margin-right:auto;width:282px;height:492px;border:1px solid lightgrey;"><img data-gifffer="images/aux_fsbrowser.gif" data-gifffer-height="490" data-gifffer-width="280" /></span></p>
<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 menu item named "<strong>Edit</strong>" and "<strong>List</strong>" of AutoConnectAux as each page.</li>
<li>Replace the instance of ESP8266WebServer to AutoConnect.</li>
<li>Change the menu title to FSBrowser using <a href="apiconfig.html#title">AutoConnectConfig::title</a>.</li>
<li>Join the legacy pages to AutoConnect declared at step #1 using <a href="api.html#join">AutoConnect::join</a>.<br>Joining multiple at one time with the <a href="https://en.cppreference.com/w/cpp/language/list_initialization">list initialization</a> for <a href="https://ja.cppreference.com/w/cpp/container/vector/vector">std::vector</a>.</li>
<li>According to the basic procedure of AutoConnect.<br>Establish a connection with <a href="api.html#begin">AutoConnect::begin</a> and perform <a href="api.html#handleclient">AutoConnect::handleClient</a> in <strong>loop()</strong>.</li>
</ol>
<p><i class="fa fa-code"></i>&ensp;<strong>Modification for FSBrowser</strong> <small>(a part of sketch code)</small></p>
<div style="overflow:auto"><img style="width:auto;max-width:none;height:840px" src="images/fsbrowser_ba.svg" /></div>
<p>... and embeds a hyperlink with an <a href="apiextra.html#icons">icon</a> in the bottom of the body section of <em>index.htm</em> contained in the data folder to jump to the AutoConnect menu.</p>
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">p</span> <span style="color: #a6e22e">style</span><span style="color: #f92672">=</span><span style="color: #e6db74">&quot;padding-top:15px;text-align:center&quot;</span><span style="color: #f8f8f2">&gt;</span>
<span style="color: #f8f8f2">&lt;</span><span style="color: #f92672">a</span> <span style="color: #a6e22e">href</span><span style="color: #f92672">=</span><span style="color: #e6db74">&quot;/_ac&quot;</span><span style="color: #f8f8f2">&gt;&lt;</span><span style="color: #f92672">img</span> <span style="color: #a6e22e">src</span><span style="color: #f92672">=</span><span style="color: #e6db74">&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC2klEQVRIS61VvWsUQRSfmU2pon9BUIkQUaKFaCBKgooSb2d3NSSFKbQR/KrEIiIKBiGF2CgRxEpjQNHs7mwOUcghwUQ7g58IsbGxEBWsb2f8zR177s3t3S2cA8ftzPu993vzvoaSnMu2vRKlaqgKp74Q/tE8qjQPyHGcrUrRjwlWShmDbFMURd/a6TcQwNiYUmpFCPElUebcuQ2vz6aNATMVReHEPwzfSSntDcNwNo2rI+DcvQzhpAbA40VKyV0p1Q9snzBG1qYVcYufXV1sREraDcxpyHdXgkfpRBj6Uwm2RsC5dxxmZ9pdOY9cKTISRcHTCmGiUCh4fYyplTwG2mAUbtMTBMHXOgK9QfyXEZr+TkgQ1oUwDA40hEgfIAfj+HuQRaBzAs9eKyUZ5Htx+T3ZODKG8DzOJMANhmGomJVMXPll+hx9UUAlzZrJJ4QNCDG3VEfguu7mcpmcB/gkBOtShhQhchAlu5jlLUgc9ENgyP5gf9+y6LTv+58p5zySkgwzLNOIGc8sEoT1Lc53NMlbCQQuvMxeCME1NNPVVkmH/i3IzzXDtCSA0qQQwZWOCJDY50jsQRjJmkslEOxvTcDRO6zPxOh5xZglKkYLhWM9jMVnkIsTyMT6NBj7IbOCEjm6HxNVVTo2WXqEWJZ1T8rytB6GxizyDkPhWVpBqfiXUtbo/HywYJSpA9kMamNNPZ71R9Hcm+TMHHZNGw3EuraXEUldbfvw25UdOjqOt+JhMwJd7+jSTpZaEiIcaCDwPK83jtWnTkwnunFMtxeL/ge9r4XItt1RNNaj/0GAcV2bR3U5sG3nEh6M61US+Qrfd9Bs31GGulI2GOS/8dgcQZV1w+ApjIxB7TDwF9GcNzJzoA+rD0/8HvPnXQJCt2qFCwbBTfRI7UyXumWVt+HJ9NO4XI++bdsb0YyrqXmlh+AWOLHaLqS5CLQR5EggR3YlcVS9gKeH2hnX8r8Kmi1CAsl36QAAAABJRU5ErkJggg==&quot;</span> <span style="color: #a6e22e">border</span><span style="color: #f92672">=</span><span style="color: #e6db74">&quot;0&quot;</span> <span style="color: #a6e22e">title</span><span style="color: #f92672">=</span><span style="color: #e6db74">&quot;AutoConnect menu&quot;</span> <span style="color: #a6e22e">alt</span><span style="color: #f92672">=</span><span style="color: #e6db74">&quot;AutoConnect menu&quot;</span><span style="color: #f8f8f2">/&gt;&lt;/</span><span style="color: #f92672">a</span><span style="color: #f8f8f2">&gt;</span>
<span style="color: #f8f8f2">&lt;/</span><span style="color: #f92672">p</span><span style="color: #f8f8f2">&gt;</span>
</pre></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="datatips.html" title="Tips for data conversion" 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>Tips for data conversion</span></div></a><a href="wojson.html" title="Custom Web pages w/o JSON" 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>Custom Web pages w/o JSON</span></div><div class="md-flex__cell md-flex__cell--shrink"><i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i></div></a></nav></div><div class="md-footer-meta md-typeset"><div class="md-footer-meta__inner md-grid"><div class="md-footer-copyright"><div class="md-footer-copyright__highlight">Copyright &copy; 2018-2019 Hieromon Ikasamo</div>powered by <a href="https://www.mkdocs.org">MkDocs</a> and <a href="https://squidfunk.github.io/mkdocs-material/">Material for MkDocs</a></div><div class="md-footer-social"><link rel="stylesheet" href="assets/fonts/font-awesome.css"> <a href="https://github.com/Hieromon" class="md-footer-social__link fa fa-github"></a> <a href="https://twitter.com/hieromon" class="md-footer-social__link fa fa-twitter"></a> </div></div></div></footer></div><script src="assets/javascripts/application.b260a35d.js"></script><script>app.initialize({version:"1.0.4",url:{base:"."}})</script><script src="js/gifffer.min.js"></script></body></html>