<h2id="how-to-embed-the-autoconnect">How to embed the AutoConnect<aclass="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 <ahref="https://github.com/Hieromon/PageBuilder">PageBuilder</a> library for HTML assemblies.</p>
<h2id="what-does-this-example-do">What does this example do?<aclass="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><ahref="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>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>
<h2id="used-with-mqtt-as-a-client-application">Used with MQTT as a client application<aclass="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 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>
<p>This example tries to publish the WiFi signal strength of ESP8266 with MQTT. It uses the <ahref="https://thingspeak.com/">ThingSpeak</a> for MQTT broker. ESP8266 publishes the RSSI value to the channel created on ThingSpeak as <ahref="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>
<li>Arduino Client for MQTT - It's the <ahref="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.<supid="fnref:1"><aclass="footnote-ref"href="#fn:1"rel="footnote">1</a></sup> You can sign up with the <ahref="https://thingspeak.com/users/sign_up">ThingSpeak sign-up page</a>.</p>
<divclass="admonition warning">
<pclass="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>
<h4id="create-a-channel-on-thingspeak">Create a channel on ThingSpeak<aclass="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: <codeclass="codehilite">ESP8266 Signal Strength</code></li>
<h4id="get-channel-id-and-api-keys">Get Channel ID and API Keys<aclass="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.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup></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>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>The complete code of the sketch is <ahref="https://github.com/Hieromon/AutoConnect/blob/master/examples/mqttRSSI/mqttRSSI.ino">mqttRSSI.ino</a> in the <ahref="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>
<divclass="codehilite"><pre><span></span><spanclass="cp">#define MQTT_USER_KEY "****************"</span><spanclass="c1">// Replace to User API Key.</span>
<spanclass="cp">#define CHANNEL_ID "******"</span><spanclass="c1">// Replace to Channel ID.</span>
<spanclass="cp">#define CHANNEL_API_KEY_WR "****************"</span><spanclass="c1">// Replace to the write API Key.</span>
<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>
<h3id="how-embed-to-your-sketches">How embed to your sketches<aclass="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>
<p>Call <ahref="../api/index.html#begin"><strong>AutoConnec::begin</strong></a>. If you need to assign a static IP address, executes <ahref="../api/index.html#autoconnectconfig-api"><strong>AutoConnectConfig</strong></a> before that. </p>
<p>Invokes <ahref="../api/index.html#handleclient"><strong>AutoConnect::handleClient()</strong></a> at inside <codeclass="codehilite">loop()</code> to enable the AutoConnect menu.</p>
<p>As of March 21, 2018. <aclass="footnote-backref"href="#fnref:1"rev="footnote"title="Jump back to footnote 1 in the text">↩</a></p>
</li>
<liid="fn:2">
<p>'454951' in the example above, but your channel ID should be different. <aclass="footnote-backref"href="#fnref:2"rev="footnote"title="Jump back to footnote 2 in the text">↩</a></p>
<p><codeclass="codehilite"><spanclass="cp">#include</span><spanclass="cpf"><ESP8266WebServer.h></span><spanclass="cp"></span></code> does not necessary for uses only client. <aclass="footnote-backref"href="#fnref:3"rev="footnote"title="Jump back to footnote 3 in the text">↩</a></p>
