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.
1106 lines
33 KiB
1106 lines
33 KiB
7 years ago
|
|
||
|
|
||
|
|
||
|
|
||
6 years ago
|
<!doctype html>
|
||
7 years ago
|
<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">
|
||
|
|
||
6 years ago
|
<meta name="description" content="ESP8266/ESP32 WLAN configuration at run time with web interface">
|
||
7 years ago
|
|
||
|
|
||
6 years ago
|
<link rel="canonical" href="https://Hieromon.github.io/AutoConnect/howtoembed.html">
|
||
7 years ago
|
|
||
|
|
||
|
<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\-]+">
|
||
|
|
||
6 years ago
|
<link rel="shortcut icon" href="assets/images/favicon.png">
|
||
6 years ago
|
<meta name="generator" content="mkdocs-1.0.4, mkdocs-material-3.3.0">
|
||
7 years ago
|
|
||
|
|
||
|
|
||
6 years ago
|
<title>How to embed - AutoConnect for ESP8266/ESP32</title>
|
||
7 years ago
|
|
||
|
|
||
|
|
||
6 years ago
|
<link rel="stylesheet" href="assets/stylesheets/application.572ca0f0.css">
|
||
7 years ago
|
|
||
6 years ago
|
<link rel="stylesheet" href="assets/stylesheets/application-palette.22915126.css">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<meta name="theme-color" content="#3f51b5">
|
||
7 years ago
|
|
||
|
|
||
|
|
||
6 years ago
|
<script src="assets/javascripts/modernizr.962652e9.js"></script>
|
||
7 years ago
|
|
||
|
|
||
|
|
||
6 years ago
|
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
|
||
7 years ago
|
<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>
|
||
|
|
||
6 years ago
|
|
||
|
<link rel="stylesheet" href="assets/fonts/material-icons.css">
|
||
7 years ago
|
|
||
|
|
||
6 years ago
|
<link rel="stylesheet" href="css/paragraph.css">
|
||
|
|
||
|
<link rel="stylesheet" href="css/extra.css">
|
||
7 years ago
|
|
||
|
|
||
6 years ago
|
|
||
|
<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>
|
||
|
|
||
|
|
||
|
|
||
7 years ago
|
</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"
|
||
6 years ago
|
viewBox="0 0 416 448" id="__github">
|
||
7 years ago
|
<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>
|
||
6 years ago
|
<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>
|
||
7 years ago
|
|
||
6 years ago
|
<a href="#embed-the-autoconnect-to-the-sketch" tabindex="1" class="md-skip">
|
||
7 years ago
|
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">
|
||
6 years ago
|
<a href="https://Hieromon.github.io/AutoConnect/" title="AutoConnect for ESP8266/ESP32" class="md-header-nav__button md-logo">
|
||
7 years ago
|
|
||
6 years ago
|
<img src="images/arduino-logo.svg" width="24" height="24">
|
||
7 years ago
|
|
||
|
</a>
|
||
|
</div>
|
||
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||
6 years ago
|
<label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
|
||
7 years ago
|
</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">
|
||
6 years ago
|
AutoConnect for ESP8266/ESP32
|
||
7 years ago
|
</span>
|
||
|
<span class="md-header-nav__topic">
|
||
6 years ago
|
How to embed
|
||
7 years ago
|
</span>
|
||
|
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||
|
|
||
|
|
||
6 years ago
|
<label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
|
||
7 years ago
|
|
||
|
<div class="md-search" data-md-component="search" role="dialog">
|
||
6 years ago
|
<label class="md-search__overlay" for="__search"></label>
|
||
7 years ago
|
<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">
|
||
6 years ago
|
<label class="md-icon md-search__icon" for="__search"></label>
|
||
7 years ago
|
<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">
|
||
6 years ago
|
<use xlink:href="#__github" width="24" height="24"></use>
|
||
7 years ago
|
</svg>
|
||
|
</div>
|
||
|
|
||
|
<div class="md-source__repository">
|
||
|
Hieromon/AutoConnect
|
||
|
</div>
|
||
|
</a>
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
</nav>
|
||
|
</header>
|
||
|
|
||
|
<div class="md-container">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
6 years ago
|
|
||
|
|
||
|
<nav class="md-tabs md-tabs--active" data-md-component="tabs">
|
||
7 years ago
|
<div class="md-tabs__inner md-grid">
|
||
|
<ul class="md-tabs__list">
|
||
|
|
||
|
|
||
|
<li class="md-tabs__item">
|
||
|
|
||
6 years ago
|
<a href="index.html" title="Overview" class="md-tabs__link">
|
||
7 years ago
|
Overview
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
7 years ago
|
|
||
7 years ago
|
|
||
7 years ago
|
|
||
|
|
||
6 years ago
|
|
||
|
|
||
|
<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>
|
||
|
|
||
|
|
||
7 years ago
|
|
||
|
|
||
6 years ago
|
|
||
|
|
||
|
<li class="md-tabs__item">
|
||
|
|
||
|
<a href="howtoembed.html" title="Examples" class="md-tabs__link md-tabs__link--active">
|
||
|
Examples
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
|
||
7 years ago
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
7 years ago
|
|
||
|
|
||
7 years ago
|
</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">
|
||
6 years ago
|
<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">
|
||
7 years ago
|
|
||
6 years ago
|
<img src="images/arduino-logo.svg" width="48" height="48">
|
||
7 years ago
|
|
||
6 years ago
|
</a>
|
||
6 years ago
|
AutoConnect for ESP8266/ESP32
|
||
7 years ago
|
</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">
|
||
6 years ago
|
<use xlink:href="#__github" width="24" height="24"></use>
|
||
7 years ago
|
</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">
|
||
6 years ago
|
<a href="index.html" title="Overview" class="md-nav__link">
|
||
7 years ago
|
Overview
|
||
|
</a>
|
||
|
</li>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<li class="md-nav__item">
|
||
6 years ago
|
<a href="gettingstarted.html" title="Getting started" class="md-nav__link">
|
||
7 years ago
|
Getting started
|
||
|
</a>
|
||
|
</li>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<li class="md-nav__item">
|
||
6 years ago
|
<a href="menu.html" title="AutoConnect menu" class="md-nav__link">
|
||
7 years ago
|
AutoConnect menu
|
||
|
</a>
|
||
|
</li>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
7 years ago
|
<li class="md-nav__item">
|
||
6 years ago
|
<a href="basicusage.html" title="Basic usage" class="md-nav__link">
|
||
7 years ago
|
Basic usage
|
||
|
</a>
|
||
|
</li>
|
||
|
|
||
7 years ago
|
|
||
|
|
||
|
|
||
|
|
||
7 years ago
|
|
||
|
|
||
|
<li class="md-nav__item">
|
||
6 years ago
|
<a href="advancedusage.html" title="Advanced usage" class="md-nav__link">
|
||
7 years ago
|
Advanced usage
|
||
7 years ago
|
</a>
|
||
|
</li>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
6 years ago
|
<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>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
7 years ago
|
<li class="md-nav__item">
|
||
6 years ago
|
<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">
|
||
7 years ago
|
Library APIs
|
||
6 years ago
|
</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
|
||
7 years ago
|
</a>
|
||
|
</li>
|
||
|
|
||
6 years ago
|
|
||
|
</ul>
|
||
|
</nav>
|
||
|
</li>
|
||
|
|
||
7 years ago
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
6 years ago
|
<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>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
7 years ago
|
<li class="md-nav__item md-nav__item--active">
|
||
|
|
||
6 years ago
|
<input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc">
|
||
7 years ago
|
|
||
|
|
||
6 years ago
|
<label class="md-nav__link md-nav__link--active" for="__toc">
|
||
6 years ago
|
How to embed
|
||
7 years ago
|
</label>
|
||
|
|
||
6 years ago
|
<a href="howtoembed.html" title="How to embed" class="md-nav__link md-nav__link--active">
|
||
|
How to embed
|
||
7 years ago
|
</a>
|
||
|
|
||
|
|
||
|
<nav class="md-nav md-nav--secondary">
|
||
|
|
||
|
|
||
|
|
||
6 years ago
|
<label class="md-nav__title" for="__toc">Table of contents</label>
|
||
7 years ago
|
<ul class="md-nav__list" data-md-scrollfix>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
6 years ago
|
<a href="#embed-the-autoconnect-to-the-sketch" title="Embed the AutoConnect to the sketch" class="md-nav__link">
|
||
|
Embed the AutoConnect to the sketch
|
||
7 years ago
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#what-does-this-example-do" title="What does this example do?" class="md-nav__link">
|
||
|
What does this example do?
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#embed-autoconnect" title="Embed AutoConnect" class="md-nav__link">
|
||
|
Embed AutoConnect
|
||
|
</a>
|
||
|
|
||
|
<nav class="md-nav">
|
||
|
<ul class="md-nav__list">
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#pattern-a" title=" Pattern A." class="md-nav__link">
|
||
|
Pattern A.
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#pattern-b" title=" Pattern B." class="md-nav__link">
|
||
|
Pattern B.
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
</ul>
|
||
|
</nav>
|
||
|
|
||
|
</li>
|
||
|
|
||
7 years ago
|
<li class="md-nav__item">
|
||
|
<a href="#used-with-mqtt-as-a-client-application" title="Used with MQTT as a client application" class="md-nav__link">
|
||
|
Used with MQTT as a client application
|
||
|
</a>
|
||
|
|
||
|
<nav class="md-nav">
|
||
|
<ul class="md-nav__list">
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#advance-procedures" title="Advance procedures" class="md-nav__link">
|
||
|
Advance procedures
|
||
|
</a>
|
||
|
|
||
|
<nav class="md-nav">
|
||
|
<ul class="md-nav__list">
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#create-a-channel-on-thingspeak" title="Create a channel on ThingSpeak" class="md-nav__link">
|
||
|
Create a channel on ThingSpeak
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#get-channel-id-and-api-keys" title="Get Channel ID and API Keys" class="md-nav__link">
|
||
|
Get Channel ID and API Keys
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
</ul>
|
||
|
</nav>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#the-sketch-publishes-messages" title="The sketch, Publishes messages" class="md-nav__link">
|
||
|
The sketch, Publishes messages
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#publish-messages" title="Publish messages" class="md-nav__link">
|
||
|
Publish messages
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#how-embed-to-your-sketches" title="How embed to your sketches" class="md-nav__link">
|
||
|
How embed to your sketches
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
</ul>
|
||
|
</nav>
|
||
|
|
||
|
</li>
|
||
|
|
||
7 years ago
|
|
||
|
|
||
|
|
||
|
|
||
|
</ul>
|
||
|
|
||
|
</nav>
|
||
|
|
||
|
</li>
|
||
|
|
||
6 years ago
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<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">
|
||
|
<a href="menuize.html" title="Constucting menu" class="md-nav__link">
|
||
|
Constucting menu
|
||
|
</a>
|
||
|
</li>
|
||
|
|
||
|
|
||
|
</ul>
|
||
|
</nav>
|
||
|
</li>
|
||
|
|
||
7 years ago
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<li class="md-nav__item">
|
||
6 years ago
|
<a href="faq.html" title="FAQ" class="md-nav__link">
|
||
7 years ago
|
FAQ
|
||
|
</a>
|
||
|
</li>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
7 years ago
|
<li class="md-nav__item">
|
||
6 years ago
|
<a href="changelog.html" title="Change log" class="md-nav__link">
|
||
7 years ago
|
Change log
|
||
|
</a>
|
||
|
</li>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
7 years ago
|
<li class="md-nav__item">
|
||
6 years ago
|
<a href="license.html" title="License" class="md-nav__link">
|
||
7 years ago
|
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">
|
||
|
|
||
|
|
||
|
|
||
6 years ago
|
<label class="md-nav__title" for="__toc">Table of contents</label>
|
||
7 years ago
|
<ul class="md-nav__list" data-md-scrollfix>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
6 years ago
|
<a href="#embed-the-autoconnect-to-the-sketch" title="Embed the AutoConnect to the sketch" class="md-nav__link">
|
||
|
Embed the AutoConnect to the sketch
|
||
7 years ago
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#what-does-this-example-do" title="What does this example do?" class="md-nav__link">
|
||
|
What does this example do?
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#embed-autoconnect" title="Embed AutoConnect" class="md-nav__link">
|
||
|
Embed AutoConnect
|
||
|
</a>
|
||
|
|
||
|
<nav class="md-nav">
|
||
|
<ul class="md-nav__list">
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#pattern-a" title=" Pattern A." class="md-nav__link">
|
||
|
Pattern A.
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#pattern-b" title=" Pattern B." class="md-nav__link">
|
||
|
Pattern B.
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
</ul>
|
||
|
</nav>
|
||
|
|
||
|
</li>
|
||
|
|
||
7 years ago
|
<li class="md-nav__item">
|
||
|
<a href="#used-with-mqtt-as-a-client-application" title="Used with MQTT as a client application" class="md-nav__link">
|
||
|
Used with MQTT as a client application
|
||
|
</a>
|
||
|
|
||
|
<nav class="md-nav">
|
||
|
<ul class="md-nav__list">
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#advance-procedures" title="Advance procedures" class="md-nav__link">
|
||
|
Advance procedures
|
||
|
</a>
|
||
|
|
||
|
<nav class="md-nav">
|
||
|
<ul class="md-nav__list">
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#create-a-channel-on-thingspeak" title="Create a channel on ThingSpeak" class="md-nav__link">
|
||
|
Create a channel on ThingSpeak
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#get-channel-id-and-api-keys" title="Get Channel ID and API Keys" class="md-nav__link">
|
||
|
Get Channel ID and API Keys
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
</ul>
|
||
|
</nav>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#the-sketch-publishes-messages" title="The sketch, Publishes messages" class="md-nav__link">
|
||
|
The sketch, Publishes messages
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#publish-messages" title="Publish messages" class="md-nav__link">
|
||
|
Publish messages
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
<li class="md-nav__item">
|
||
|
<a href="#how-embed-to-your-sketches" title="How embed to your sketches" class="md-nav__link">
|
||
|
How embed to your sketches
|
||
|
</a>
|
||
|
|
||
|
</li>
|
||
|
|
||
|
</ul>
|
||
|
</nav>
|
||
|
|
||
|
</li>
|
||
|
|
||
7 years ago
|
|
||
|
|
||
|
|
||
|
|
||
|
</ul>
|
||
|
|
||
|
</nav>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
<div class="md-content">
|
||
|
<article class="md-content__inner md-typeset">
|
||
|
|
||
|
|
||
|
|
||
6 years ago
|
<h1>How to embed</h1>
|
||
7 years ago
|
|
||
6 years ago
|
<h2 id="embed-the-autoconnect-to-the-sketch">Embed the AutoConnect to the sketch<a class="headerlink" href="#embed-the-autoconnect-to-the-sketch" title="Permanent link">¶</a></h2>
|
||
7 years ago
|
<p>Here holds two case examples. Both examples perform the same function. Only how to incorporate the <strong>AutoConnect</strong> into the sketch differs. Also included in the sample folder, HandlePortal.ino also shows how to use the <a href="https://github.com/Hieromon/PageBuilder">PageBuilder</a> library for HTML assemblies.</p>
|
||
|
<h2 id="what-does-this-example-do">What does this example do?<a class="headerlink" href="#what-does-this-example-do" title="Permanent link">¶</a></h2>
|
||
|
<p>Uses the web interface to light the LED connected to the <strong><a href="https://github.com/nodemcu/nodemcu-devkit-v1.0">NodeMCU</a></strong> module D0 port (which could be referred to as <em>BUILTIN_LED</em>), the following animation is it.</p>
|
||
7 years ago
|
<p>Access to the ESP8266 module connected WiFi from the browser then the page contains the current value of the D0 port would be displayed. The page has the buttons to switch the port value. The LED blinks according to the value of the button that was clicked. This example is a typical sketch of manipulating ESP8266's GPIO via WLAN.</p>
|
||
6 years ago
|
<p><img data-gifffer="./images/ac2.gif" /></p>
|
||
7 years ago
|
<p>Embed AutoConnect library into this sketch. There are few places to be changed. And you can use AutoConnect's captive portal function to establish a connection freely to other WiFi spots.</p>
|
||
|
<h2 id="embed-autoconnect">Embed AutoConnect<a class="headerlink" href="#embed-autoconnect" title="Permanent link">¶</a></h2>
|
||
|
<h3 id="pattern-a"><i class="fa fa-code" aria-hidden="true"></i> Pattern A.<a class="headerlink" href="#pattern-a" title="Permanent link">¶</a></h3>
|
||
|
<p>Bind to ESP8266WebServer, performs handleClient with handleRequest.</p>
|
||
6 years ago
|
<p><img src="./images/handleClient.svg" /></p>
|
||
7 years ago
|
<div class="admonition hint">
|
||
|
<p class="admonition-title">In what situations should the handleRequest be used.</p>
|
||
|
<p>It is something needs to be done immediately after the handle client. It is better to call only AutoConnect::handleClient whenever possible.</p>
|
||
|
</div>
|
||
|
<h3 id="pattern-b"><i class="fa fa-code" aria-hidden="true"></i> Pattern B.<a class="headerlink" href="#pattern-b" title="Permanent link">¶</a></h3>
|
||
|
<p>Declare only AutoConnect, performs handleClient.</p>
|
||
6 years ago
|
<p><img src="./images/handlePortal.svg" /></p>
|
||
7 years ago
|
<h2 id="used-with-mqtt-as-a-client-application">Used with MQTT as a client application<a class="headerlink" href="#used-with-mqtt-as-a-client-application" title="Permanent link">¶</a></h2>
|
||
6 years ago
|
<p>The effect of AutoConnect is not only for ESP8266/ESP32 as the web server. It has advantages for something WiFi client as well. For example, AutoConnect is also effective for publishing MQTT messages from various measurement points. Even if the SSID is different for each measurement point, it is not necessary to modify the sketch.</p>
|
||
7 years ago
|
<p>This example tries to publish the WiFi signal strength of ESP8266 with MQTT. It uses the <a href="https://thingspeak.com/">ThingSpeak</a> for MQTT broker. ESP8266 publishes the RSSI value to the channel created on ThingSpeak as <a href="https://github.com/knolleary/pubsubclient">MQTT client</a>. This example is well suited to demonstrate the usefulness of AutoConnect, as RSSI values are measured at each access point usually. Just adding a few lines of code makes it unnecessary to upload sketches with the different SSIDs rewrite for each access point.</p>
|
||
6 years ago
|
<p><img src="./images/ChannelStatus.png" width="70%"/></p>
|
||
7 years ago
|
<h3 id="advance-procedures">Advance procedures<a class="headerlink" href="#advance-procedures" title="Permanent link">¶</a></h3>
|
||
|
<ul>
|
||
|
<li>Arduino Client for MQTT - It's the <a href="https://github.com/knolleary/pubsubclient">PubSubClient</a>, install it to Arduino IDE. If you have the latest version already, this step does not need.</li>
|
||
|
<li>Create a channel on ThingSpeak.</li>
|
||
|
<li>Get the Channel API Keys from ThingSpeak, put its keys to the sketch.</li>
|
||
|
</ul>
|
||
|
<p>The ThingSpeak is the open IoT platform. It is capable of sending data privately to the cloud and analyzing, visualizing its data. If you do not have an account of ThingSpeak, you need that account to proceed further. ThingSpeak has the free plan for the account which uses within the scope of this example.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup> You can sign up with the <a href="https://thingspeak.com/users/sign_up">ThingSpeak sign-up page</a>.</p>
|
||
|
<div class="admonition warning">
|
||
|
<p class="admonition-title">Whether you should do sign-up or not.</p>
|
||
|
<p>You are entrusted with the final judgment of account creation for ThingSpeak. Create an account at your own risk.</p>
|
||
|
</div>
|
||
|
<h4 id="create-a-channel-on-thingspeak">Create a channel on ThingSpeak<a class="headerlink" href="#create-a-channel-on-thingspeak" title="Permanent link">¶</a></h4>
|
||
|
<p>Sign in ThingSpeak. Select <strong>Channels</strong> to show the <strong>My Channels</strong>, then click <strong>New Channel</strong>.</p>
|
||
|
<p>At the <strong>New Channel</strong> screen, enter each field as a below. And click <strong>Save Channel</strong> at the bottom of the screen to save.</p>
|
||
|
<ul>
|
||
6 years ago
|
<li>Name: <code>ESP8266 Signal Strength</code></li>
|
||
|
<li>Description: <code>ESP8266 RSSI publish</code></li>
|
||
|
<li>Field1: <code>RSSI</code></li>
|
||
7 years ago
|
</ul>
|
||
6 years ago
|
<p><img src="./images/CreateChannel.png" width="70%"/></p>
|
||
7 years ago
|
<h4 id="get-channel-id-and-api-keys">Get Channel ID and API Keys<a class="headerlink" href="#get-channel-id-and-api-keys" title="Permanent link">¶</a></h4>
|
||
|
<p>The channel successfully created, you can see the channel status screen as a below. <strong>Channel ID</strong> is displayed there.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup></p>
|
||
6 years ago
|
<p><img src="./images/ChannelID.png" width="70%"/></p>
|
||
7 years ago
|
<p>Here, switch the channel status tab to <strong>API Keys</strong>. The API key required to publish the message is the <strong>Write API Key</strong>.</p>
|
||
6 years ago
|
<p><img src="./images/APIKeys.png" width="70%"/></p>
|
||
7 years ago
|
<p>The last key you need is the <strong>User API Key</strong> and can be confirmed it in the user profile. Pull down <strong>Account</strong> from the top menu, select <strong>My profile</strong>. Then you can see the ThingSpeak settings and the <strong>User API Key</strong> is displayed middle of this screen.</p>
|
||
6 years ago
|
<p><img src="./images/USERKey.png" width="70%"/></p>
|
||
7 years ago
|
<h3 id="the-sketch-publishes-messages">The sketch, Publishes messages<a class="headerlink" href="#the-sketch-publishes-messages" title="Permanent link">¶</a></h3>
|
||
|
<p>The complete code of the sketch is <a href="https://github.com/Hieromon/AutoConnect/blob/master/examples/mqttRSSI/mqttRSSI.ino">mqttRSSI.ino</a> in the <a href="https://github.com/Hieromon/AutoConnect">AutoConnect repository</a>. Replace the following #define in a sketch with <strong>User API Key</strong>, <strong>Write API Key</strong> and <strong>Channel ID</strong>. After Keys updated, compile the sketch and upload it.</p>
|
||
6 years ago
|
<div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #75715e">#define MQTT_USER_KEY "****************" // Replace to User API Key.</span>
|
||
|
<span style="color: #75715e">#define CHANNEL_ID "******" // Replace to Channel ID.</span>
|
||
|
<span style="color: #75715e">#define CHANNEL_API_KEY_WR "****************" // Replace to the write API Key.</span>
|
||
7 years ago
|
</pre></div>
|
||
|
|
||
|
<h3 id="publish-messages">Publish messages<a class="headerlink" href="#publish-messages" title="Permanent link">¶</a></h3>
|
||
|
<p>After upload and reboot complete, the message publishing will start via the access point now set. The message carries RSSI as the current WiFi signal strength. The signal strength variations in RSSI are displayed on ThingSpeak's Channel status screen.</p>
|
||
|
<h3 id="how-embed-to-your-sketches">How embed to your sketches<a class="headerlink" href="#how-embed-to-your-sketches" title="Permanent link">¶</a></h3>
|
||
|
<p>For the client sketches, the code required to connect to WiFi is the following four parts only.</p>
|
||
|
<ol>
|
||
|
<li>
|
||
7 years ago
|
<p>#include directive<sup id="fnref:3"><a class="footnote-ref" href="#fn:3" rel="footnote">3</a></sup></p>
|
||
6 years ago
|
<p>Include <code>AutoConnect.h</code> header file behind the include of <code>ESP8266WiFi.h</code>.</p>
|
||
|
<p><img src="./images/include.png" width="55%"/></p>
|
||
7 years ago
|
</li>
|
||
|
<li>
|
||
7 years ago
|
<p>Declare AutoConnect</p>
|
||
6 years ago
|
<p>The declaration of the <a href="api.html#autoconnect"><strong>AutoConnect variable</strong></a> is not accompanied by ESP8266WebServer.</p>
|
||
|
<p><img src="./images/declare.png" width="55%"/></p>
|
||
7 years ago
|
</li>
|
||
|
<li>
|
||
7 years ago
|
<p>Invokes "begin()"</p>
|
||
6 years ago
|
<p>Call <a href="api.html#begin"><strong>AutoConnect::begin</strong></a>. If you need to assign a static IP address, executes <a href="api.html#autoconnectconfig-api"><strong>AutoConnectConfig</strong></a> before that. </p>
|
||
|
<p><img src="./images/begin.png" width="55%"/></p>
|
||
7 years ago
|
</li>
|
||
|
<li>
|
||
7 years ago
|
<p>Performs "handleClent()" in "loop()"</p>
|
||
6 years ago
|
<p>Invokes <a href="api.html#handleclient"><strong>AutoConnect::handleClient()</strong></a> at inside <code>loop()</code> to enable the AutoConnect menu.</p>
|
||
|
<p><img src="./images/handleClient.png" width="55%"/></p>
|
||
7 years ago
|
</li>
|
||
|
</ol>
|
||
7 years ago
|
<script>
|
||
|
window.onload = function() {
|
||
|
Gifffer();
|
||
6 years ago
|
};
|
||
7 years ago
|
</script>
|
||
|
|
||
7 years ago
|
<div class="footnote">
|
||
|
<hr />
|
||
|
<ol>
|
||
|
<li id="fn:1">
|
||
|
<p>As of March 21, 2018. <a class="footnote-backref" href="#fnref:1" rev="footnote" title="Jump back to footnote 1 in the text">↩</a></p>
|
||
|
</li>
|
||
|
<li id="fn:2">
|
||
|
<p>'454951' in the example above, but your channel ID should be different. <a class="footnote-backref" href="#fnref:2" rev="footnote" title="Jump back to footnote 2 in the text">↩</a></p>
|
||
|
</li>
|
||
|
<li id="fn:3">
|
||
6 years ago
|
<p><code>#include <ESP8266WebServer.h></code> does not necessary for uses only client. <a class="footnote-backref" href="#fnref:3" rev="footnote" title="Jump back to footnote 3 in the text">↩</a></p>
|
||
7 years ago
|
</li>
|
||
|
</ol>
|
||
|
</div>
|
||
7 years ago
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
6 years ago
|
|
||
|
|
||
7 years ago
|
|
||
|
</article>
|
||
|
</div>
|
||
|
</div>
|
||
|
</main>
|
||
|
|
||
|
|
||
|
<footer class="md-footer">
|
||
|
|
||
|
<div class="md-footer-nav">
|
||
|
<nav class="md-footer-nav__inner md-grid">
|
||
|
|
||
6 years ago
|
<a href="apiextra.html" title="Something extra" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
|
||
7 years ago
|
<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>
|
||
6 years ago
|
Something extra
|
||
7 years ago
|
</span>
|
||
|
</div>
|
||
|
</a>
|
||
|
|
||
|
|
||
6 years ago
|
<a href="menuize.html" title="Constucting menu" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
|
||
7 years ago
|
<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>
|
||
6 years ago
|
Constucting menu
|
||
7 years ago
|
</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">
|
||
6 years ago
|
Copyright © 2018-2019 Hieromon Ikasamo
|
||
7 years ago
|
</div>
|
||
|
|
||
|
powered by
|
||
6 years ago
|
<a href="https://www.mkdocs.org">MkDocs</a>
|
||
7 years ago
|
and
|
||
|
<a href="https://squidfunk.github.io/mkdocs-material/">
|
||
|
Material for MkDocs</a>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
<div class="md-footer-social">
|
||
6 years ago
|
<link rel="stylesheet" href="assets/fonts/font-awesome.css">
|
||
7 years ago
|
|
||
|
<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>
|
||
|
|
||
6 years ago
|
<script src="assets/javascripts/application.a353778b.js"></script>
|
||
7 years ago
|
|
||
6 years ago
|
<script>app.initialize({version:"1.0.4",url:{base:"."}})</script>
|
||
7 years ago
|
|
||
6 years ago
|
<script src="js/gifffer.min.js"></script>
|
||
7 years ago
|
|
||
|
|
||
|
</body>
|
||
|
</html>
|