<!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/howtoembed.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 > How to embed - 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 = "#embed-the-autoconnect-to-the-sketch" 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" >
How to embed
< / 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 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" >
How to embed
< / label >
< a href = "howtoembed.html" title = "How to embed" class = "md-nav__link md-nav__link--active" >
How to embed
< / 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 = "#embed-the-autoconnect-to-the-sketch" class = "md-nav__link" >
Embed the AutoConnect to the Sketch
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#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" 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" class = "md-nav__link" >
Pattern A.
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#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" 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" 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" class = "md-nav__link" >
Create a channel on ThingSpeak
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#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" class = "md-nav__link" >
the Sketch, Publishes messages
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#publish-messages" class = "md-nav__link" >
Publish messages
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#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 = "datatips.html" title = "Tips for data conversion" class = "md-nav__link" >
Tips for data conversion
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "menuize.html" title = "Attach the menu" class = "md-nav__link" >
Attach the menu
< / a >
< / 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 = "#embed-the-autoconnect-to-the-sketch" class = "md-nav__link" >
Embed the AutoConnect to the Sketch
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#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" 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" class = "md-nav__link" >
Pattern A.
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#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" 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" 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" class = "md-nav__link" >
Create a channel on ThingSpeak
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#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" class = "md-nav__link" >
the Sketch, Publishes messages
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#publish-messages" class = "md-nav__link" >
Publish messages
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#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 > How to embed< / h1 >
< 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 >
< p > Here hold 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 D0 (sometimes called < em > BUILTIN_LED< / em > ) port of the < strong > < a href = "https://github.com/nodemcu/nodemcu-devkit-v1.0" > NodeMCU< / a > < / strong > module like the following animation.< / 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 will blink according to the value with clicked by the button. 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/ESP32 as the web server. It has advantages for something WiFi client as well. For example, AutoConnect is also convenient 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 >
< 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" > 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 > ESP8266 Signal Strength< / code > < / li >
< li > Description: < code > ESP8266 RSSI publish< / code > < / li >
< li > Field1: < code > 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" > 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" style = "background: #272822" > < pre style = "line-height: 125%" > < span > < / span > < code > < 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 >
< / code > < / 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" > 3< / a > < / sup > < / p >
< 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 >
< / li >
< li >
< p > Declare AutoConnect< / p >
< 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 >
< / li >
< li >
< p > Invokes "begin()"< / p >
< p > Call < a href = "api.html#begin" > < strong > AutoConnect::begin< / strong > < / a > . If you need to assign a static IP address, executes < a href = "apiconfig.html" > AutoConnectConfig< / a > before that. < / p >
< p > < img src = "images/begin.png" width = "55%" / > < / p >
< / li >
< li >
< p > Performs "handleClent()" in "loop()"< / p >
< 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 >
< / li >
< / ol >
< script >
window.onload = function() {
Gifffer();
};
< / script >
< div class = "footnote" >
< hr / >
< ol >
< li id = "fn:1" >
< p > As of March 21, 2018.  < a class = "footnote-backref" href = "#fnref:1" 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" title = "Jump back to footnote 2 in the text" > ↩ < / a > < / p >
< / li >
< li id = "fn:3" >
< p > < code > #include < ESP8266WebServer.h> < / code > does not necessary for uses only client.  < a class = "footnote-backref" href = "#fnref:3" 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 = "apiextra.html" title = "Something extra" 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 >
Something extra
< / span >
< / div >
< / a >
< a href = "datatips.html" title = "Tips for data conversion" 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 >
Tips for data conversion
< / 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 >
