Added mqttRSSI.ino example

pull/8/head
Hieromon Ikasamo 7 years ago
parent e40b37579d
commit 5e10485ef0
  1. 2
      .travis.yml
  2. 200
      docs/examples/index.html
  3. BIN
      docs/images/APIKeys.png
  4. BIN
      docs/images/ChannelID.png
  5. BIN
      docs/images/ChannelStatus.png
  6. BIN
      docs/images/CreateChannel.png
  7. BIN
      docs/images/USERKey.png
  8. BIN
      docs/images/begin.png
  9. BIN
      docs/images/declare.png
  10. BIN
      docs/images/handleClient.png
  11. BIN
      docs/images/include.png
  12. 90
      docs/search/search_index.json
  13. 20
      docs/sitemap.xml
  14. 105
      examples/mqttRSSI/mqttRSSI.ino
  15. 80
      mkdocs/examples.md
  16. BIN
      mkdocs/images/APIKeys.png
  17. BIN
      mkdocs/images/ChannelID.png
  18. BIN
      mkdocs/images/ChannelStatus.png
  19. BIN
      mkdocs/images/CreateChannel.png
  20. BIN
      mkdocs/images/USERKey.png
  21. BIN
      mkdocs/images/begin.png
  22. BIN
      mkdocs/images/declare.png
  23. BIN
      mkdocs/images/handleClient.png
  24. BIN
      mkdocs/images/include.png

@ -20,12 +20,14 @@ install:
- arduino --pref "compiler.warning_level=all" --save-prefs
# - arduino --install-library "PageBuilder"
- git clone https://github.com/Hieromon/PageBuilder /usr/local/share/arduino/libraries/PageBuilder
- arduino --install-library "PubSubClient"
script:
- arduino --verify --board $BD $PWD/examples/Credential/Credential.ino
- arduino --verify --board $BD $PWD/examples/FSBrowser/FSBrowser.ino
- arduino --verify --board $BD $PWD/examples/HandleClient/HandleClient.ino
- arduino --verify --board $BD $PWD/examples/HandlePortal/HandlePortal.ino
- arduino --verify --board $BD $PWD/examples/HandlePortalEX/HandlePortalEX.ino
- arduino --verify --board $BD $PWD/examples/mqttRSSI/mqttRSSI.ino
- arduino --verify --board $BD $PWD/examples/Simple/Simple.ino
notifications:

@ -417,6 +417,67 @@
</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>
@ -523,6 +584,67 @@
</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>
@ -560,11 +682,85 @@
<h3 id="pattern-b"><i class="fa fa-code" aria-hidden="true"></i> Pattern B.<a class="headerlink" href="#pattern-b" title="Permanent link">&para;</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">&para;</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">&para;</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">&para;</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">&para;</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">&para;</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 &quot;****************&quot; </span><span class="c1">// Replace to User API Key.</span>
<span class="cp">#define CHANNEL_ID &quot;******&quot; </span><span class="c1">// Replace to Channel ID.</span>
<span class="cp">#define CHANNEL_API_KEY_WR &quot;****************&quot; </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">&para;</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">&para;</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.&#160;<a class="footnote-backref" href="#fnref:1" rev="footnote" title="Jump back to footnote 1 in the text">&#8617;</a></p>
</li>
<li id="fn:2">
<p>'454951' in the example above, but your channel ID should be different.&#160;<a class="footnote-backref" href="#fnref:2" rev="footnote" title="Jump back to footnote 2 in the text">&#8617;</a></p>
</li>
<li id="fn:3">
<p><code class="codehilite"><span class="cp">#include</span> <span class="cpf">&lt;ESP8266WebServer.h&gt;</span><span class="cp"></span></code> does not necessary for uses only client.
<script>
window.onload = function() {
Gifffer();
Gifffer();
}
</script>
</script>&#160;<a class="footnote-backref" href="#fnref:3" rev="footnote" title="Jump back to footnote 3 in the text">&#8617;</a></p>
</li>
</ol>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

File diff suppressed because one or more lines are too long

@ -4,7 +4,7 @@
<url>
<loc>https://Hieromon.github.io/AutoConnect//index.html</loc>
<lastmod>2018-03-21</lastmod>
<lastmod>2018-03-23</lastmod>
<changefreq>daily</changefreq>
</url>
@ -12,7 +12,7 @@
<url>
<loc>https://Hieromon.github.io/AutoConnect//gettingstarted/index.html</loc>
<lastmod>2018-03-21</lastmod>
<lastmod>2018-03-23</lastmod>
<changefreq>daily</changefreq>
</url>
@ -20,7 +20,7 @@
<url>
<loc>https://Hieromon.github.io/AutoConnect//menu/index.html</loc>
<lastmod>2018-03-21</lastmod>
<lastmod>2018-03-23</lastmod>
<changefreq>daily</changefreq>
</url>
@ -28,7 +28,7 @@
<url>
<loc>https://Hieromon.github.io/AutoConnect//basicusage/index.html</loc>
<lastmod>2018-03-21</lastmod>
<lastmod>2018-03-23</lastmod>
<changefreq>daily</changefreq>
</url>
@ -36,7 +36,7 @@
<url>
<loc>https://Hieromon.github.io/AutoConnect//advancedusage/index.html</loc>
<lastmod>2018-03-21</lastmod>
<lastmod>2018-03-23</lastmod>
<changefreq>daily</changefreq>
</url>
@ -44,7 +44,7 @@
<url>
<loc>https://Hieromon.github.io/AutoConnect//api/index.html</loc>
<lastmod>2018-03-21</lastmod>
<lastmod>2018-03-23</lastmod>
<changefreq>daily</changefreq>
</url>
@ -52,7 +52,7 @@
<url>
<loc>https://Hieromon.github.io/AutoConnect//examples/index.html</loc>
<lastmod>2018-03-21</lastmod>
<lastmod>2018-03-23</lastmod>
<changefreq>daily</changefreq>
</url>
@ -60,7 +60,7 @@
<url>
<loc>https://Hieromon.github.io/AutoConnect//faq/index.html</loc>
<lastmod>2018-03-21</lastmod>
<lastmod>2018-03-23</lastmod>
<changefreq>daily</changefreq>
</url>
@ -68,7 +68,7 @@
<url>
<loc>https://Hieromon.github.io/AutoConnect//changelog/index.html</loc>
<lastmod>2018-03-21</lastmod>
<lastmod>2018-03-23</lastmod>
<changefreq>daily</changefreq>
</url>
@ -76,7 +76,7 @@
<url>
<loc>https://Hieromon.github.io/AutoConnect//license/index.html</loc>
<lastmod>2018-03-21</lastmod>
<lastmod>2018-03-23</lastmod>
<changefreq>daily</changefreq>
</url>

@ -0,0 +1,105 @@
/*
ESP8266 publish the RSSI as the WiFi signal strength to ThingSpeak channel.
This example is for explaining how to use the AutoConnect library.
In order to execute this example, the ThingSpeak account is needed. Sing up
for New User Account and create a New Channel via My Channels.
For details, please refer to the project page.
https://hieromon.github.io/AutoConnect/examples/index.html#used-with-mqtt-as-a-client-application
This example is based on the environment as of March 20, 2018.
Copyright (c) 2018 Hieromon Ikasamo.
This software is released under the MIT License.
https://opensource.org/licenses/MIT
*/
#include <ESP8266WiFi.h>
#include <PubSubClient.h>
#include <AutoConnect.h>
#define MQTT_USER_KEY "****************" // Replace to User API Key.
#define CHANNEL_ID "******" // Replace to Channel ID.
#define CHANNEL_API_KEY_WR "****************" // Replace to the write API Key.
#define MQTT_UPDATE_INTERVAL 40000
#define MQTT_TOPIC "channels/" CHANNEL_ID "/publish/" CHANNEL_API_KEY_WR
#define MQTT_USER_ID "anyone"
#define MQTT_SERVER "mqtt.thingspeak.com"
AutoConnect portal;
WiFiClient wifiClient;
PubSubClient mqttClient(wifiClient);
bool mqttConnect() {
static const char alphanum[] = "0123456789"
"ABCDEFGHIJKLMNOPQRSTUVWXYZ"
"abcdefghijklmnopqrstuvwxyz"; // For random generation of client ID.
char clientId[9];
uint8_t retry = 10;
while (!mqttClient.connected()) {
Serial.println("Attempting MQTT broker:" MQTT_SERVER);
for (uint8_t i = 0; i < 8; i++) {
clientId[i] = alphanum[random(62)];
}
clientId[8] = '\0';
if (mqttClient.connect(clientId, MQTT_USER_ID, MQTT_USER_KEY)) {
Serial.println("Established:" + String(clientId));
return true;
} else {
Serial.println("Connection failed:" + String(mqttClient.state()));
if (!--retry)
return false;
}
delay(3000);
}
}
void mqttPublish(String msg) {
String path = String(MQTT_TOPIC);
int tLen = path.length();
char topic[tLen];
path.toCharArray(topic, tLen + 1);
int mLen = msg.length();
char payload[mLen];
msg.toCharArray(payload, mLen + 1);
mqttClient.publish(topic, payload);
}
unsigned long lastPub = 0;
void setup() {
delay(1000);
Serial.begin(115200);
Serial.println();
Serial.print("WiFi ");
if (portal.begin()) {
Serial.println("connected:" + WiFi.SSID());
Serial.println("IP:" + WiFi.localIP().toString());
} else {
Serial.println("connection failed:" + String(WiFi.status()));
while (1) {
delay(100);
yield();
}
}
mqttClient.setServer(MQTT_SERVER, 1883);
}
void loop() {
if (millis() - lastPub > MQTT_UPDATE_INTERVAL) {
if (!mqttClient.connected()) {
mqttConnect();
}
String item = String("field1=") + String(WiFi.RSSI());
mqttPublish(item);
mqttClient.loop();
lastPub = millis();
}
portal.handleClient();
}

@ -29,6 +29,86 @@ Declare only AutoConnect, performs handleClient.
<img src="../images/handlePortal.svg" />
## Used with MQTT as a client application
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.
This example tries to publish the WiFi signal strength of ESP8266 with MQTT. It uses the [ThingSpeak](https://thingspeak.com/) for MQTT broker. ESP8266 publishes the RSSI value to the channel created on ThingSpeak as [MQTT client](https://github.com/knolleary/pubsubclient). 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.
<img src="../images/ChannelStatus.png" width="70%"/>
### Advance procedures
- Arduino Client for MQTT - It's the [PubSubClient](https://github.com/knolleary/pubsubclient), install it to Arduino IDE. If you have the latest version already, this step does not need.
- Create a channel on ThingSpeak.
- Get the Channel API Keys from ThingSpeak, put its keys to the sketch.
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.[^1] You can sign up with the [ThingSpeak sign-up page](https://thingspeak.com/users/sign_up).
!!! warning "Whether you should do sign-up or not."
You are entrusted with the final judgment of account creation for ThingSpeak. Create an account at your own risk.
[^1]:As of March 21, 2018.
#### Create a channel on ThingSpeak
Sign in ThingSpeak. Select **Channels** to show the **My Channels**, then click **New Channel**.
At the **New Channel** screen, enter each field as a below. And click **Save Channel** at the bottom of the screen to save.
- Name: ```ESP8266 Signal Strength```
- Description: ```ESP8266 RSSI publish```
- Field1: ```RSSI```
<img src="../images/CreateChannel.png" width="70%"/>
#### Get Channel ID and API Keys
The channel successfully created, you can see the channel status screen as a below. **Channel ID** is displayed there.[^2]
[^2]:'454951' in the example above, but your channel ID should be different.
<img src="../images/ChannelID.png" width="70%"/>
Here, switch the channel status tab to **API Keys**. The API key required to publish the message is the **Write API Key**.
<img src="../images/APIKeys.png" width="70%"/>
The last key you need is the **User API Key** and can be confirmed it in the user profile. Pull down **Account** from the top menu, select **My profile**. Then you can see the ThingSpeak settings and the **User API Key** is displayed middle of this screen.
<img src="../images/USERKey.png" width="70%"/>
### The sketch, Publishes messages
The complete code of the sketch is [mqttRSSI.ino](https://github.com/Hieromon/AutoConnect/blob/master/examples/mqttRSSI/mqttRSSI.ino) in the [AutoConnect repository](https://github.com/Hieromon/AutoConnect). Replace the following #define in a sketch with **User API Key**, **Write API Key** and **Channel ID**. After Keys updated, compile the sketch and upload it.
```arduino
#define MQTT_USER_KEY "****************" // Replace to User API Key.
#define CHANNEL_ID "******" // Replace to Channel ID.
#define CHANNEL_API_KEY_WR "****************" // Replace to the write API Key.
```
### Publish messages
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.
### How embed to your sketches
For the client sketches, the code required to connect to WiFi is the following four parts only.
1. \#include directive[^3]
<img src="../images/include.png" width="55%"/>
2. Declare AutoConnect
<img src="../images/declare.png" width="55%"/>
3. Invokes "begin()"
<img src="../images/begin.png" width="55%"/>
4. Performs "handleClent()" in "loop()"
<img src="../images/handleClient.png" width="55%"/>
[^3]:```#include <ESP8266WebServer.h>``` does not necessary for uses only client.
<script>
window.onload = function() {
Gifffer();

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Loading…
Cancel
Save