diff --git a/data/index.htm b/data/index.htm
index 4fedff7bcde4326bf851cec291ad416ca12f652b..2cdd27d04b29e910b80cf46d0f6154c56d1089e8 100644
--- a/data/index.htm
+++ b/data/index.htm
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
<html>
<head>
@@ -34,20 +34,23 @@
<a class="navbar-brand" href="https://www.thingiverse.com/Surrbradl08/designs" target="_blank">Surrbradl08</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
- <ul class="nav navbar-nav">
- <li class="active bg-light"><a href="/" class="bg-light">Home <span class="sr-only bg-light">(current)</span></a></li>
- <li><a href="/ota" target="_blank" title="Simple Mode">OTA Update</a></li>
- <li><a href="/alexa" target="_blank" title="Edit Files">Alexa Pairing</a></li>
- <li><a href="/reboot" target="_blank" title="Update Firmware">Reboot</a></li>
- <li><a>
- <div class="custom-control custom-switch">
- <input type="checkbox" class="custom-control-input" id="darkSwitch" />
- <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
- </div>
- <script src="js/dark-mode-switch.min.js"></script>
- </a>
- </li>
- </ul>
+ <ul class="nav navbar-nav">
+ <li class="active bg-light"><a href="/" class="bg-light">Home <span class="sr-only bg-light">(current)</span></a></li>
+ <li><a href="/ota" target="_blank" title="OTA">OTA Update</a></li>
+ <li><a href="/alexa" target="_blank" title="Alexa">Alexa Pairing</a></li>
+ <li><a href="/reboot" target="_blank" title="Reboot">Reboot</a></li>
+ <li><a href="/simple" target="_blank" title="Simple Page">Simple</a></li>
+ <li><a href="/wifi" target="_blank" title="WiFi - Config">WiFi</a></li>
+ <li>
+ <a>
+ <div class="custom-control custom-switch">
+ <input type="checkbox" class="custom-control-input" id="darkSwitch" />
+ <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
+ </div>
+ <script src="js/dark-mode-switch.min.js"></script>
+ </a>
+ </li>
+ </ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="https://github.com/NimmLor/esp8266-fastled-iot-webserver">
diff --git a/data/simple.htm b/data/simple.htm
new file mode 100644
index 0000000000000000000000000000000000000000..5fc862278f51e232b823054811e220aed3bf9219
--- /dev/null
+++ b/data/simple.htm
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>ESP8266 + FastLED by Evil Genius Labs</title>
+
+ <!-- request CSS from internet CDN -->
+ <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
+
+ <!-- request CSS from the ESP8266 web server -->
+ <link rel="stylesheet" href="css/bootstrap.min.css">
+
+ <link rel="stylesheet" href="css/simple.css">
+
+ <link rel="icon" href="images/atom196.png">
+</head>
+
+<body>
+
+ <div id="container" class="container">
+
+ <div style="margin: 5px;">
+ <button type="button" class="btn btn-default" id="btnOn">On</button>
+ <button type="button" class="btn btn-default" id="btnOff">Off</button>
+ </div>
+
+ <div id="patternGrid" class="grid-pattern"></div>
+
+ <div id="colorButtonsRow" class="grid-color"></div>
+
+ </div>
+
+ <div id="templates" style="display: none">
+
+ <div id="colorButtonTemplate" class="grid-item-color"></div>
+
+ <button id="patternButtonTemplate" class="grid-item-pattern btn btn-default"></button>
+
+ </div>
+
+ <!-- request js from internet CDN -->
+ <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> -->
+ <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
+ <!-- <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> -->
+ <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js" integrity="sha256-A4JwlcDvqO4JXpvEtvWY1RH8JAEMu5W21wP8GUXLUNs=" crossorigin="anonymous"></script> -->
+
+ <!-- request js from the ESP8266 web server -->
+ <script src="js/jquery-3.1.1.min.js"></script>
+ <script src="js/bootstrap.min.js"></script>
+ <script src="js/r-websocket.min.js"></script>
+
+ <script src="js/simple.js"></script>
+
+</body>
+
+</html>
diff --git a/data/wifi.htm b/data/wifi.htm
new file mode 100644
index 0000000000000000000000000000000000000000..6c9a8c648f4c1c60517a5ba46742e43b29723d16
--- /dev/null
+++ b/data/wifi.htm
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>ESP8266 + FastLED by Evil Genius Labs</title>
+
+ <!-- request CSS from internet CDN -->
+ <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
+
+ <!-- request CSS from the ESP8266 web server -->
+ <link rel="stylesheet" href="css/bootstrap.min.css">
+
+ <link rel="stylesheet" href="css/styles.css">
+
+ <link rel="icon" href="images/atom196.png">
+</head>
+
+<body>
+
+ <nav class="navbar navbar-default navbar-static-top" id="top" role="banner">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="https://www.evilgeniuslabs.org" target="_blank"><img src="/images/atom196.png" style="width: 24px; height: 24px;" /></a>
+ <a class="navbar-brand" href="https://www.evilgeniuslabs.org" target="_blank">Evil Genius Labs</a>
+ </div>
+ <div class="collapse navbar-collapse" id="navbar-collapse-1">
+ <ul class="nav navbar-nav">
+ <li><a href="/">Home<span class="sr-only">(current)</span></a></li>
+ <li class="active"><a href="/wifi.htm" target="_blank" title="Wi-Fi Settings">Wi-Fi</a></li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+
+ <div id="container" class="container">
+
+ <form class="form-horizontal" id="form" action="/wifi" method="post">
+
+ <div class="form-group">
+ <label for="inputSSID" class="col-sm-2 control-label">SSID</label>
+ <div class="col-sm-10">
+ <input type="text" autocorrect="off" autocapitalize="none"
+ class="form-control" id="inputSSID" name="ssid" placeholder="SSID (Wi-Fi network name)">
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="inputPassword" class="col-sm-2 control-label">Password</label>
+ <div class="col-sm-10">
+ <input type="password" class="form-control" id="inputPassword" name="password" placeholder="Password">
+ </div>
+ </div>
+
+ <div class="form-group">
+ <div class="col-sm-offset-2 col-sm-10">
+ <button type="submit" class="btn btn-default">Connect</button>
+ </div>
+ </div>
+
+ </form>
+
+ </div>
+
+ <!-- request js from internet CDN -->
+ <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> -->
+ <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
+ <!-- <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> -->
+ <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js" integrity="sha256-A4JwlcDvqO4JXpvEtvWY1RH8JAEMu5W21wP8GUXLUNs=" crossorigin="anonymous"></script> -->
+
+ <!-- request js from the ESP8266 web server -->
+ <script src="js/jquery-3.1.1.min.js"></script>
+ <script src="js/bootstrap.min.js"></script>
+
+</body>
+
+</html>
diff --git a/esp8266-fastled-iot-webserver.ino b/esp8266-fastled-iot-webserver.ino
index 0b1f51bc7ff27ccc105a5122b75579698127238c..b3466ca5ed9cb0f428527cec1ccb446b06d17951 100644
--- a/esp8266-fastled-iot-webserver.ino
+++ b/esp8266-fastled-iot-webserver.ino
@@ -159,6 +159,8 @@ extern "C" {
//#define ENABLE_MQTT_SUPPORT // allows integration in homeassistant/googlehome/mqtt,
// mqtt server required, see MQTT Configuration for more, implemented by GitHub/WarDrake
+#define WIFI_MANAGER // enables '/wifi.html' page to connect to a different network
+
//---------------------------------------------------------------------------------------------------------//
@@ -355,6 +357,11 @@ if you have connected the ring first it should look like this: const int twpOffs
#endif
#endif
+#ifdef WIFI_MANAGER
+ #include <WiFiManager.h> // https://github.com/tzapu/WiFiManager/tree/development
+ WiFiManager wifiManager;
+#endif
+
// Misc Params
#define AVG_ARRAY_SIZE 10
#define BAND_START 0
@@ -772,6 +779,33 @@ void setup() {
initUdp(UDP_PORT);
+#ifdef WIFI_MANAGER
+ String nameString;
+ uint8_t mac[WL_MAC_ADDR_LENGTH];
+ WiFi.softAPmacAddress(mac);
+ String macID = String(mac[WL_MAC_ADDR_LENGTH - 2], HEX) +
+ String(mac[WL_MAC_ADDR_LENGTH - 1], HEX);
+ macID.toUpperCase();
+
+ nameString = "ESP8266-" + macID;
+
+ char nameChar[nameString.length() + 1];
+ memset(nameChar, 0, nameString.length() + 1);
+
+ for (int i = 0; i < nameString.length(); i++)
+ nameChar[i] = nameString.charAt(i);
+
+ Serial.printf("Name: %s\n", nameChar);
+
+ wifiManager.setConfigPortalBlocking(false);
+ if (wifiManager.autoConnect(nameChar)) {
+ Serial.println("Wi-Fi connected");
+ }
+ else {
+ Serial.println("Wi-Fi manager portal running");
+ }
+#endif
+
#ifdef ENABLE_OTA_SUPPORT
@@ -1121,6 +1155,9 @@ void loop() {
// dnsServer.processNextRequest();
// webSocketsServer.loop();
+#ifdef WIFI_MANAGER
+ wifiManager.process();
+#endif
#ifdef ENABLE_ALEXA_SUPPORT
espalexa.loop();
#else