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.
860 lines
29 KiB
860 lines
29 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 WLAN configuration at run time with web interface">
|
|
|
|
|
|
<link rel="canonical" href="https://Hieromon.github.io/AutoConnect/examples/index.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-0.17.3, mkdocs-material-2.7.0">
|
|
|
|
|
|
|
|
<title>Examples - AutoConnect for ESP8266</title>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../assets/stylesheets/application.78aab2dc.css">
|
|
|
|
<link rel="stylesheet" href="../assets/stylesheets/application-palette.6079476c.css">
|
|
|
|
|
|
|
|
<script src="../assets/javascripts/modernizr.1aa3b519.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="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
|
|
|
|
<link rel="stylesheet" href="../css/paragraph.css">
|
|
|
|
|
|
</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">
|
|
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="search">
|
|
<label class="md-overlay" data-md-component="overlay" for="drawer"></label>
|
|
|
|
<a href="#how-to-embed-the-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" 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
|
|
</span>
|
|
<span class="md-header-nav__topic">
|
|
Examples
|
|
</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" 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 md-tabs__link--active">
|
|
Overview
|
|
</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">
|
|
<span class="md-nav__button md-logo">
|
|
|
|
<img src="../images/arduino-logo.svg" width="48" height="48">
|
|
|
|
</span>
|
|
AutoConnect for ESP8266
|
|
</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/index.html" title="Getting started" class="md-nav__link">
|
|
Getting started
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../menu/index.html" title="AutoConnect menu" class="md-nav__link">
|
|
AutoConnect menu
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../basicusage/index.html" title="Basic usage" class="md-nav__link">
|
|
Basic usage
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../advancedusage/index.html" title="Advanced usage" class="md-nav__link">
|
|
Advanced usage
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../api/index.html" title="Library APIs" class="md-nav__link">
|
|
Library APIs
|
|
</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">
|
|
Examples
|
|
</label>
|
|
|
|
<a href="index.html" title="Examples" class="md-nav__link md-nav__link--active">
|
|
Examples
|
|
</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="#how-to-embed-the-autoconnect" title="How to embed the AutoConnect" class="md-nav__link">
|
|
How to embed the AutoConnect
|
|
</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>
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../faq/index.html" title="FAQ" class="md-nav__link">
|
|
FAQ
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../changelog/index.html" title="Change log" class="md-nav__link">
|
|
Change log
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../license/index.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="#how-to-embed-the-autoconnect" title="How to embed the AutoConnect" class="md-nav__link">
|
|
How to embed the AutoConnect
|
|
</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>
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="md-content">
|
|
<article class="md-content__inner md-typeset">
|
|
|
|
|
|
|
|
<h1>Examples</h1>
|
|
|
|
<h2 id="how-to-embed-the-autoconnect">How to embed the AutoConnect<a class="headerlink" href="#how-to-embed-the-autoconnect" title="Permanent link">¶</a></h2>
|
|
<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>
|
|
<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>
|
|
<p><img data-gifffer="../images/ac2.gif" /></p>
|
|
<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>
|
|
<p><img src="../images/handleClient.svg" /></p>
|
|
<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>
|
|
<p><img src="../images/handlePortal.svg" /></p>
|
|
<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>
|
|
<p>The effect of AutoConnect is not only for ESP8266 as the Web server. It has a benefit for something WiFi client too. AutoConnect is effective too when publishing with MQTT from various measurement points. Even if the SSID is different for each measurement point, it is no need to modify the sketch.</p>
|
|
<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>
|
|
<p><img src="../images/ChannelStatus.png" width="70%"/></p>
|
|
<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>
|
|
<li>Name: <code class="codehilite">ESP8266 Signal Strength</code></li>
|
|
<li>Description: <code class="codehilite">ESP8266 RSSI publish</code></li>
|
|
<li>Field1: <code class="codehilite">RSSI</code></li>
|
|
</ul>
|
|
<p><img src="../images/CreateChannel.png" width="70%"/></p>
|
|
<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>
|
|
<p><img src="../images/ChannelID.png" width="70%"/></p>
|
|
<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>
|
|
<p><img src="../images/APIKeys.png" width="70%"/></p>
|
|
<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>
|
|
<p><img src="../images/USERKey.png" width="70%"/></p>
|
|
<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>
|
|
<div class="codehilite"><pre><span></span><span class="cp">#define MQTT_USER_KEY "****************" </span><span class="c1">// Replace to User API Key.</span>
|
|
<span class="cp">#define CHANNEL_ID "******" </span><span class="c1">// Replace to Channel ID.</span>
|
|
<span class="cp">#define CHANNEL_API_KEY_WR "****************" </span><span class="c1">// Replace to the write API Key.</span>
|
|
</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>
|
|
<p>#include directive<sup id="fnref:3"><a class="footnote-ref" href="#fn:3" rel="footnote">3</a></sup><br />
|
|
<img src="../images/include.png" width="55%"/></p>
|
|
</li>
|
|
<li>
|
|
<p>Declare AutoConnect<br />
|
|
<img src="../images/declare.png" width="55%"/></p>
|
|
</li>
|
|
<li>
|
|
<p>Invokes "begin()"<br />
|
|
<img src="../images/begin.png" width="55%"/></p>
|
|
</li>
|
|
<li>
|
|
<p>Performs "handleClent()" in "loop()"<br />
|
|
<img src="../images/handleClient.png" width="55%"/></p>
|
|
</li>
|
|
</ol>
|
|
<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">
|
|
<p><code class="codehilite"><span class="cp">#include</span> <span class="cpf"><ESP8266WebServer.h></span><span class="cp"></span></code> does not necessary for uses only client.
|
|
<script>
|
|
window.onload = function() {
|
|
Gifffer();
|
|
}
|
|
</script> <a class="footnote-backref" href="#fnref:3" rev="footnote" title="Jump back to footnote 3 in the text">↩</a></p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<footer class="md-footer">
|
|
|
|
<div class="md-footer-nav">
|
|
<nav class="md-footer-nav__inner md-grid">
|
|
|
|
<a href="../api/index.html" title="Library APIs" 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>
|
|
Library APIs
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a href="../faq/index.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 Hieromon Ikasamo
|
|
</div>
|
|
|
|
powered by
|
|
<a href="http://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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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.8eb9be28.js"></script>
|
|
|
|
<script>app.initialize({version:"0.17.3",url:{base:".."}})</script>
|
|
|
|
<script src="../js/gifffer.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>!function(e,a,t,n,o,c,i){e.GoogleAnalyticsObject=o,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(t),i=a.getElementsByTagName(t)[0],c.async=1,c.src="https://www.google-analytics.com/analytics.js",i.parentNode.insertBefore(c,i)}(window,document,"script",0,"ga"),ga("create","UA-116150854-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview");var links=document.getElementsByTagName("a");if(Array.prototype.map.call(links,function(e){e.host!=document.location.host&&e.addEventListener("click",function(){var a=e.getAttribute("data-md-action")||"follow";ga("send","event","outbound",a,e.href)})}),document.forms.search){var query=document.forms.search.query;query.addEventListener("blur",function(){if(this.value){var e=document.location.pathname;ga("send","pageview",e+"?q="+this.value)}})}</script>
|
|
|
|
|
|
</body>
|
|
</html> |