Hello everyone!

In a previous Instructable, I talked about Avoiding hard-coding WiFi credentials on your ESP8266 using the great WifiManager Library.

You can also use the library to manage your Arduino sketch's configurations and in this instructable I'm going to show you how. There is a little more setup steps than the WiFi Credentials Instructable, but it's still very straight forward.

Check out the video or continue reading here to find out how to add it and how it works.

Step 1: What's the Advantage of This?

Especially with the addition of networking capabilities, sketches contain a lot of configuration values such as API keys or server addresses.

Normally you would need to re-program your device to change these values, but using WiFiManager you can configure them easily.

It also makes your sketches more shareable, as you really don't want to be checking in your API Keys, like I have many many times!

Step 2: What Your Sketch Needs

You sketch will need a couple of things to achieve this setup.

In normal behaviour, WiFiManager will launch config mode if it fails to connect to the WiFi network, which is fine for just WiFi Credentials, but if you are managing other configurations as well you will need to be able to launch the WiFiManager config mode on demand. The easiest way to do this is with a button.

The other thing your sketch will need is the ability to persist your configurations across restarts of your device, I think the best way of doing is using SPIFFS. The code in the example in the final step has methods for reading and saving your configurations to SPIFFS, but if you want to learn more about it Andreas Spiess (the guy with the Swiss accent) has a really good video on it.

Step 3: How It Looks With Configurations

When config mode is activated on the device, either by failing to connect to the previously known network or by the user pressing the button, it will create an adhoc network that you will connect to.

After you connect any requests on your browser will automatically redirect to the devices config portal.

From here you can enter the details of the WiFi Network you want to connect to, and also set the configurations.

Step 4: Adding the Additional Configurations to WiFiManager

Now all that's left to do is to show you add these additional configurations to the WiFiManager portal. I'm going to use an example from my Arduino-YouTube-Api library to show it working.

I'm not going to through all the sketch, but if you have any questions please do ask in the comments!

Note: Each step here corresponds with one of the images from above.

  1. The first thing you'll see is the "setSaveConfigCallback" which basically is just a method that sets the flag that lets the sketch know it needs to save the config.
  2. The second thing is WiFiManagerParameters, you need to initialize one for each additional configuration you want. These take 4 inputs:
    1. ID (not overly important, just make it unique)
    2. Placeholder (example shown in image 3)
    3. Default value (as shown in Image 4)
    4. Max Length (limits the length of the value the user can enter)
  3. You then can read the values from the WiFiManagerParameters using the "getValue()" method.
  4. The autoConnect line is where you set the name of the adhoc access point that you want config mode to broadcast, I've also added a password to it for additional security.

Hopefully you find this useful and as always if you have any questions please ask!



<p>Hi Brian ,</p><p>I have the sketch like below :</p><p>#include &lt;ESP8266WiFi.h&gt;</p><p>#include &lt;WiFiClient.h&gt;</p><p>#include &lt;ESP8266WebServer.h&gt;</p><p>//#include &lt;ESP8266mDNS.h&gt;</p><p>// Fill in your WiFi router SSID and password</p><p>const char *ssid = &quot;suzuki&quot;;</p><p>const char *password = &quot;12345678&quot;;</p><p>//MDNSResponder mdns;</p><p>ESP8266WebServer server(80);</p><p>const char INDEX_HTML[] =</p><p>&quot;&lt;!DOCTYPE HTML&gt;&quot;</p><p>&quot;&lt;html&gt;&quot;</p><p>&quot;&lt;head&gt;&quot;</p><p>&quot;&lt;meta name = \&quot;viewport\&quot; content = \&quot;width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=0\&quot;&gt;&quot;</p><p>&quot;&lt;title&gt;Suzuki Wagon R+&lt;/title&gt;&quot;</p><p>&quot;&lt;style&gt;&quot;</p><p>&quot;\&quot;body { background-color: #808080; font-family: Arial, Helvetica, Sans-Serif; Color: #000000; }\&quot;&quot;</p><p>&quot;&lt;/style&gt;&quot;</p><p>&quot;&lt;/head&gt;&quot;</p><p>&quot;&lt;body&gt;&quot;</p><p>&quot;&lt;h1&gt;Suzuki Wagon R+&lt;/h1&gt;&quot;</p><p>&quot;&lt;h3&gt;Door Open Controller&lt;/h3&gt;&quot;</p><p>&quot;&lt;FORM action=\&quot;/\&quot; method=\&quot;post\&quot;&gt;&quot;</p><p>&quot;&lt;P&gt;&quot;</p><p>&quot;Username &lt;input type=\&quot;text\&quot; name=\&quot;username\&quot; id=\&quot;username\&quot; /&gt;&quot;</p><p>&quot;&lt;P&gt;&quot;</p><p>&quot;Password &lt;input type=\&quot;password\&quot; name=\&quot;password\&quot; id=\&quot;password\&quot; /&gt;&quot;</p><p>&quot;&lt;P&gt;&quot;</p><p>&quot;&lt;P&gt;&quot;</p><p>&quot;&lt;INPUT type=\&quot;radio\&quot; name=\&quot;LED\&quot; value=\&quot;1\&quot;&gt;Open Now&lt;BR&gt;&quot;</p><p>&quot;&lt;P&gt;&quot;</p><p>&quot;&lt;INPUT type=\&quot;submit\&quot; value=\&quot;Send\&quot;&gt; &lt;INPUT type=\&quot;reset\&quot;&gt;&quot;</p><p>&quot;&lt;/P&gt;&quot;</p><p>&quot;&lt;/FORM&gt;&quot;</p><p>&quot;&lt;P&gt;&quot;</p><p>&quot;Copied &amp; Modified by Cuong Ngo Tan&quot;</p><p>&quot;&lt;/body&gt;&quot;</p><p>&quot;&lt;/html&gt;&quot;;</p><p>// GPIO#0 is for Adafruit ESP8266 HUZZAH board. Your board LED might be on 13.</p><p>const int LEDPIN1 = 4;</p><p>const int LEDPIN2 = 5;</p><p>void handleRoot()</p><p>{</p><p>if (server.hasArg(&quot;LED&quot;)) {</p><p>handleSubmit();</p><p>}</p><p>else {</p><p>server.send(200, &quot;text/html&quot;, INDEX_HTML);</p><p>}</p><p>}</p><p>void returnFail(String msg)</p><p>{</p><p>server.sendHeader(&quot;Connection&quot;, &quot;close&quot;);</p><p>server.sendHeader(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;);</p><p>server.send(500, &quot;text/plain&quot;, msg + &quot;\r\n&quot;);</p><p>}</p><p>void handleSubmit()</p><p>{</p><p>String LEDvalue;</p><p>String user;</p><p>String pass;</p><p>if (!server.hasArg(&quot;LED&quot;)) return returnFail(&quot;BAD ARGS&quot;);</p><p>LEDvalue = server.arg(&quot;LED&quot;);</p><p>user = server.arg(&quot;username&quot;);</p><p>pass = server.arg(&quot;password&quot;);</p><p>if ((LEDvalue == &quot;1&quot;) &amp;&amp; (pass == &quot;xxxxx&quot;)) {</p><p>Serial.println(LEDvalue);</p><p>Serial.println(user);</p><p>Serial.println(pass);</p><p>// writeLED(true);</p><p>opendoor();</p><p>server.send(200, &quot;text/html&quot;, INDEX_HTML);</p><p>}</p><p>else if ((LEDvalue == &quot;0&quot;) &amp;&amp; (pass == &quot;xxxxx&quot;)) {</p><p>Serial.println(LEDvalue);</p><p>Serial.println(user);</p><p>Serial.println(pass);</p><p>writeLED(false);</p><p>server.send(200, &quot;text/html&quot;, INDEX_HTML);</p><p>}</p><p>else {</p><p>returnFail(&quot;Bad LED value&quot;);</p><p>}</p><p>}</p><p>void returnOK()</p><p>{</p><p>server.sendHeader(&quot;Connection&quot;, &quot;close&quot;);</p><p>server.sendHeader(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;);</p><p>server.send(200, &quot;text/plain&quot;, &quot;OK\r\n&quot;);</p><p>}</p><p>/*</p><p>* Imperative to turn the LED on using a non-browser http client.</p><p>* For example, using wget.</p><p>* $ wget <a href="http://esp8266webform/ledon" rel="nofollow">http://esp8266webform/ledon</a></p><p>*/</p><p>void handleLEDon()</p><p>{</p><p>writeLED(true);</p><p>returnOK();</p><p>}</p><p>/*</p><p>* Imperative to turn the LED off using a non-browser http client.</p><p>* For example, using wget.</p><p>* $ wget <a href="http://esp8266webform/ledoff" rel="nofollow">http://esp8266webform/ledoff</a></p><p>*/</p><p>void handleLEDoff()</p><p>{</p><p>writeLED(false);</p><p>returnOK();</p><p>}</p><p>void handleNotFound()</p><p>{</p><p>String message = &quot;File Not Found\n\n&quot;;</p><p>message += &quot;URI: &quot;;</p><p>message += server.uri();</p><p>message += &quot;\nMethod: &quot;;</p><p>message += (server.method() == HTTP_GET)?&quot;GET&quot;:&quot;POST&quot;;</p><p>message += &quot;\nArguments: &quot;;</p><p>message += server.args();</p><p>message += &quot;\n&quot;;</p><p>for (uint8_t i=0; i&lt;server.args(); i++){</p><p>message += &quot; &quot; + server.argName(i) + &quot;: &quot; + server.arg(i) + &quot;\n&quot;;</p><p>}</p><p>server.send(404, &quot;text/plain&quot;, message);</p><p>}</p><p>void opendoor()</p><p>{</p><p>digitalWrite(LEDPIN1, 1);</p><p>digitalWrite(LEDPIN2, 1);</p><p>delay(700);</p><p>digitalWrite(LEDPIN1, 0);</p><p>digitalWrite(LEDPIN2, 0);</p><p>}</p><p>void writeLED(bool LEDon)</p><p>{</p><p>// Note inverted logic for Adafruit HUZZAH board</p><p>if (LEDon) {</p><p>digitalWrite(LEDPIN1, 1);</p><p>digitalWrite(LEDPIN2, 1);</p><p>}</p><p>else {</p><p>digitalWrite(LEDPIN1, 0);</p><p>digitalWrite(LEDPIN2, 0);</p><p>}</p><p>}</p><p>void setup(void)</p><p>{</p><p>pinMode(LEDPIN1, OUTPUT);</p><p>pinMode(LEDPIN2, OUTPUT);</p><p>writeLED(false);</p><p>Serial.begin(115200);</p><p>Serial.println(&quot;&quot;);</p><p>WiFi.softAP(ssid, password);</p><p>IPAddress apip = WiFi.softAPIP();</p><p>Serial.print(&quot;visit: \n&quot;);</p><p>Serial.println(apip);</p><p>server.on(&quot;/&quot;, handleRoot);</p><p>//server.on(&quot;/ledon&quot;, handleLEDon);</p><p>//server.on(&quot;/ledoff&quot;, handleLEDoff);</p><p>server.onNotFound(handleNotFound);</p><p>server.begin();</p><p>}</p><p>void loop(void)</p><p>{</p><p>server.handleClient();</p><p>}</p><p>===================</p><p>Look the code will make ESP8266 work in AP mode and hard code with SSID : suzuki and password : 12345678 . When user connect to this SSID and access webserver it will show the submit form that help to control LedPin 4 , 5</p><p>Now I want to modify my sketch that users can change SSID and password of wifi follow their demand but after they changed they still need to submit the form (with any username and password &quot;xxxxx&quot; ) that I designed in my sketch above . Can you advise what will I do ? Tks</p>

About This Instructable




Bio: Hey everyone! My name is Brian and thanks for checking my Instructables. I'm a software developer by trade but I've recently gotten into ... More »
More by witnessmenow:Arduino Commute Checker Social Stats Counter Managing Configurations on Your ESP8266 Using WiFiManager 
Add instructable to: