<!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.1, mkdocs-material-4.6.3" >
< title > Attach the menu - 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 = "#what-menus-can-be-made-using-autoconnect" 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" >
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" 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 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" 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" 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" 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-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 = "#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" 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" 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" > ¶ < / 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" > ¶ < / 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 >   < 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 >   < 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 >   < 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 > < li> < / 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" > ¶ < / 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 >   < 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 > < code > < span style = "color: #f8f8f2" > < < / span > < span style = "color: #f92672" > p< / span > < span style = "color: #a6e22e" > style< / span > < span style = "color: #f92672" > =< / span > < span style = "color: #e6db74" > " padding-top:15px;text-align:center" < / span > < span style = "color: #f8f8f2" > > < / span >
< span style = "color: #f8f8f2" > < < / span > < span style = "color: #f92672" > a< / span > < span style = "color: #a6e22e" > href< / span > < span style = "color: #f92672" > =< / span > < span style = "color: #e6db74" > " /_ac" < / span > < span style = "color: #f8f8f2" > > < < / span > < span style = "color: #f92672" > img< / span > < span style = "color: #a6e22e" > src< / span > < span style = "color: #f92672" > =< / span > < span style = "color: #e6db74" > " 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==" < / span > < span style = "color: #a6e22e" > border< / span > < span style = "color: #f92672" > =< / span > < span style = "color: #e6db74" > " 0" < / span > < span style = "color: #a6e22e" > title< / span > < span style = "color: #f92672" > =< / span > < span style = "color: #e6db74" > " AutoConnect menu" < / span > < span style = "color: #a6e22e" > alt< / span > < span style = "color: #f92672" > =< / span > < span style = "color: #e6db74" > " AutoConnect menu" < / span > < span style = "color: #f8f8f2" > /> < /< / span > < span style = "color: #f92672" > a< / span > < span style = "color: #f8f8f2" > > < / span >
< span style = "color: #f8f8f2" > < /< / span > < span style = "color: #f92672" > p< / span > < span style = "color: #f8f8f2" > > < / span >
< / code > < / 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 © 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 >
