Using the WifiManager

This article expands on the previous initial development by adding the WifiManager class to the sketch. This adds an element of user-friendliness to our sketch as the parameters are not hard coded into the sketch.

The hardware is the same as the previous article. If you are following along but have not read the previous article, please do so now. We will not repeat anything that has been previously documented, so let's jump right into loading the new sketch.

With this sketch loaded, the serial monitor should present to you something similar to the following:

*WM: 
*WM: AutoConnect
*WM: Reading SSID
*WM: SSID: 
*WM: 
*WM: Reading Password
*WM: Password: 
*WM: Connecting as wifi client...
*WM: Connection result: 
*WM: 0
*WM: 
*WM: Configuring access point... 
*WM: ESP8266AutoConnectAP
*WM: electricity
*WM: AP IP address: 
*WM: 192.168.4.1
*WM: HTTP server started

When the device boots up, it will attempt to connect to the wireless network saved in its config. Since it won't have a config the first time it boots up, it will instead change into access point mode and wait for you to connect to it and program it. Let's do that now.

From any mobile device or wireless pc, connect to the wireless network named "ESP8266AutoConnectAP" using a password of "electricity". Once connected, open a browser and point it to "192.168.4.1". You will be presented with a screen similar to the one shown in the figure.

WiFiManager Initial Screen

The WiFiManager class acts as a captive portal when in access point mode. When connected to it, theoretically any attempt to access any web site should redirect to the WiFiManager screen. However, in practice this does not appear to work with my Android tablet. One has to manually enter 192.168.4.1 to get to the WiFiManager configuration screen.

You can have the ESP8266 scan for WiFi networks around you, but it is faster to just type in your WiFi network credentials manually.

Clicking "Configure WiFi (No Scan)" will present you with the following screen.

WiFi Manager Configuration Screen

Unlike the figure, help text will appear in each field as long as there are no parameters already typed into it. The fields should be self explanatory. Click the Save button when you are done. The device will attempt to reconnect as a client to the WiFi network you specified. If if is successful, it will not return to access point mode.

*WM: Sent wifi save page
*WM: Connecting to new AP
*WM: Connecting as wifi client...
*WM: Connection result: 
*WM: 3
Should save config

WiFi Connected!
saving config
{"zm_server":"192.168.1.122","zmtrigger_port":"6802","monitor_id":"2","alarm_delay":"10","alarm_score":"200","alarm_cause":"Barking detected","alarm_desc":"Go see what the dogs are barking at."}
HTTP server started

WiFi Status
IP address: 192.168.1.196
MAC address: 5C:CF:7F:0B:2F:18
SSID: mgmt
Signal Strength (dBm): -49

From this point on, the device will work just like the previous article. Pressing the button wired to GPIO2 will cause the ESP8266 to trigger an alarm on the ZoneMinder server. Alternatively, the status of GPIO0 and GPIO2 can be actively polled using http as well.

TO-DO

Once the device has been successfully programmed, the only way to reprogram the device is to turn off the WiFi access point it is connected to so the ESP8266 returns to programming mode on its own. To change this behavior, I plan to attach a button to GPIO0. When in normal mode of operation, pressing this button will cause the device to go back into configuration mode. This requires a little more programming work than it sounds as it will require restructuring things around a bit differently.