Updated README, fixed Arduino ESP8266FS tool link.

Map.h

@@ -1,79 +0,0 @@
-uint8_t coordsX[NUM_LEDS] = {   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 6, 6, 6, 6, 6, 6, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 7, 6, 5, 4, 3, 2, 1, 0, 7, 6, 5, 4, 3, 2, 1, 0, 7, 6, 5, 4, 3, 2, 1, 0, 7, 6, 5, 4, 3, 2, 1, 0, 7, 6, 5, 4, 3, 2, 1, 0, 7, 6, 5, 4, 3, 2, 1, 0, 7, 6, 5, 4, 3, 2, 1, 0, 7, 6, 5, 4, 3, 2, 1, 0  };
-uint8_t coordsY[NUM_LEDS] = {   0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 6, 6, 6, 6, 6, 6, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 7, 7, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 7, 7  };
-uint8_t coordsZ[NUM_LEDS] = {   0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0  };
-
-void cubeXGradientPalette() {
-  uint8_t hues = 8;
-
-  for (uint16_t i = 0; i < NUM_LEDS; i++) {
-    uint8_t x = coordsX[i];
-
-    leds[i] = ColorFromPalette(gCurrentPalette, beat8(speed) - (x * hues));
-  }
-}
-
-void cubeYGradientPalette() {
-  uint8_t hues = 8;
-
-  for (uint16_t i = 0; i < NUM_LEDS; i++) {
-    uint8_t y = coordsY[i];
-
-    leds[i] = ColorFromPalette(gCurrentPalette, beat8(speed) - (y * hues));
-  }
-}
-
-void cubeZGradientPalette() {
-  uint8_t hues = 8;
-
-  for (uint16_t i = 0; i < NUM_LEDS; i++) {
-    uint8_t z = coordsZ[i];
-
-    leds[i] = ColorFromPalette(gCurrentPalette, beat8(speed) - (z * hues));
-  }
-}
-
-void cubeXYGradientPalette() {
-  uint8_t hues = 8;
-
-  for (uint16_t i = 0; i < NUM_LEDS; i++) {
-    uint8_t x = coordsX[i];
-    uint8_t y = coordsY[i];
-
-    leds[i] = ColorFromPalette(gCurrentPalette, beat8(speed) - ((x + y) * hues));
-  }
-}
-
-void cubeXZGradientPalette() {
-  uint8_t hues = 8;
-
-  for (uint16_t i = 0; i < NUM_LEDS; i++) {
-    uint8_t x = coordsX[i];
-    uint8_t z = coordsZ[i];
-
-    leds[i] = ColorFromPalette(gCurrentPalette, beat8(speed) - ((x + z) * hues));
-  }
-}
-
-void cubeYZGradientPalette() {
-  uint8_t hues = 8;
-
-  for (uint16_t i = 0; i < NUM_LEDS; i++) {
-    uint8_t y = coordsY[i];
-    uint8_t z = coordsZ[i];
-
-    leds[i] = ColorFromPalette(gCurrentPalette, beat8(speed) - ((y + z) * hues));
-  }
-}
-
-void cubeXYZGradientPalette() {
-  uint8_t hues = 8;
-
-  for (uint16_t i = 0; i < NUM_LEDS; i++) {
-    uint8_t x = coordsX[i];
-    uint8_t y = coordsY[i];
-    uint8_t z = coordsZ[i];
-
-    leds[i] = ColorFromPalette(gCurrentPalette, beat8(speed) - ((x + y + z) * hues));
-  }
-}
-

Noise.h

@@ -1,212 +0,0 @@
-/*
-   ESP8266 + FastLED + IR Remote: https://github.com/jasoncoon/esp8266-fastled-webserver
-   Copyright (C) 2015-2016 Jason Coon
-
-   This program is free software: you can redistribute it and/or modify
-   it under the terms of the GNU General Public License as published by
-   the Free Software Foundation, either version 3 of the License, or
-   (at your option) any later version.
-
-   This program is distributed in the hope that it will be useful,
-   but WITHOUT ANY WARRANTY; without even the implied warranty of
-   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-   GNU General Public License for more details.
-
-   You should have received a copy of the GNU General Public License
-   along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-// The 16 bit version of our coordinates
-uint16_t noisex;
-uint16_t noisey;
-uint16_t noisez;
-
-// We're using the x/y dimensions to map to the x/y pixels on the matrix.  We'll
-// use the z-axis for "time".  speed determines how fast time moves forward.  Try
-// 1 for a very slow moving effect, or 60 for something that ends up looking like
-// water.
-int8_t noisespeedx = 0;
-int8_t noisespeedy = 1;
-int8_t noisespeedz = 0;
-
-// Scale determines how far apart the pixels in our noise matrix are.  Try
-// changing these values around to see how it affects the motion of the display.  The
-// higher the value of scale, the more "zoomed out" the noise will be.  A value
-// of 1 will be so zoomed in, you'll mostly see solid colors.
-uint16_t noisescale = 1; // scale is set dynamically once we've started up
-
-uint8_t colorLoop = 0;
-
-CRGBPalette16 blackAndWhiteStripedPalette;
-
-// This function sets up a palette of black and white stripes,
-// using code.  Since the palette is effectively an array of
-// sixteen CRGB colors, the various fill_* functions can be used
-// to set them up.
-void SetupBlackAndWhiteStripedPalette()
-{
-  // 'black out' all 16 palette entries...
-  fill_solid( blackAndWhiteStripedPalette, 16, CRGB::Black);
-  // and set every fourth one to white.
-  blackAndWhiteStripedPalette[0] = CRGB::White;
-  blackAndWhiteStripedPalette[4] = CRGB::White;
-  blackAndWhiteStripedPalette[8] = CRGB::White;
-  blackAndWhiteStripedPalette[12] = CRGB::White;
-
-}
-
-CRGBPalette16 blackAndBlueStripedPalette;
-
-// This function sets up a palette of black and blue stripes,
-// using code.  Since the palette is effectively an array of
-// sixteen CRGB colors, the various fill_* functions can be used
-// to set them up.
-void SetupBlackAndBlueStripedPalette()
-{
-  // 'black out' all 16 palette entries...
-  fill_solid( blackAndBlueStripedPalette, 16, CRGB::Black);
-
-  for(uint8_t i = 0; i < 6; i++) {
-    blackAndBlueStripedPalette[i] = CRGB::Blue;
-  }
-}
-
-// There are several different palettes of colors demonstrated here.
-//
-// FastLED provides several 'preset' palettes: RainbowColors_p, RainbowStripeColors_p,
-// OceanColors_p, CloudColors_p, LavaColors_p, ForestColors_p, and PartyColors_p.
-//
-// Additionally, you can manually define your own color palettes, or you can write
-// code that creates color palettes on the fly.
-
-void drawNoise3d(CRGBPalette16 palette, uint8_t hueReduce = 0)
-{
-  for(uint16_t i = 0; i < NUM_LEDS; i++) {
-    uint8_t x = coordsX[i];
-    uint8_t y = coordsY[i];
-    uint8_t z = coordsZ[i];
-   
-    int xoffset = noisescale * x;
-    int yoffset = noisescale * y;
-    int zoffset = noisescale * z;
-
-    uint8_t data = inoise8(x + xoffset + noisex, y + yoffset + noisey, z + zoffset + noisez);
-
-    // The range of the inoise8 function is roughly 16-238.
-    // These two operations expand those values out to roughly 0..255
-    // You can comment them out if you want the raw noise data.
-    data = qsub8(data, 16);
-    data = qadd8(data, scale8(data, 39));
-
-    if(hueReduce > 0 && data >= hueReduce)
-      data -= hueReduce;
-
-    leds[i] = ColorFromPalette(palette, data, 255, LINEARBLEND); 
-  }
-  
-  noisex += noisespeedx;
-  noisey += noisespeedy;
-  noisez += noisespeedz;
-}
-
-void rainbowNoise3d() {
-  noisespeedx = 0;
-  noisespeedy = 0;
-  noisespeedz = -1;
-  noisescale = 24;
-  colorLoop = 0;
-  drawNoise3d(RainbowColors_p);
-}
-
-void rainbowStripeNoise3d() {
-  noisespeedx = 0;
-  noisespeedy = 0;
-  noisespeedz = -2;
-  noisescale = 24;
-  colorLoop = 0;
-  drawNoise3d(RainbowStripeColors_p);
-}
-
-void partyNoise3d() {
-  noisespeedx = -9;
-  noisespeedy = 0;
-  noisespeedz = 0;
-  noisescale = 32;
-  colorLoop = 0;
-  drawNoise3d(PartyColors_p);
-}
-
-void forestNoise3d() {
-  noisespeedx = -9;
-  noisespeedy = 0;
-  noisespeedz = 0;
-  noisescale = 32;
-  colorLoop = 0;
-  drawNoise3d(ForestColors_p);
-}
-
-void cloudNoise3d() {
-  noisespeedx = -2;
-  noisespeedy = 0;
-  noisespeedz = 0;
-  noisescale = 24;
-  colorLoop = 0;
-  drawNoise3d(CloudColors_p);
-}
-
-void fireNoise3d() {
-  noisespeedx = 16;
-  noisespeedy = 16;
-  noisespeedz = 16;
-  noisescale = 64;
-  colorLoop = 0;
-  drawNoise3d(HeatColors_p, 60);
-}
-
-void fireNoise23d() {
-  noisespeedx = 3;
-  noisespeedy = 3;
-  noisespeedz = 3;
-  noisescale = 32;
-  colorLoop = 0;
-  drawNoise3d(HeatColors_p);
-}
-
-void lavaNoise3d() {
-  noisespeedx = -4;
-  noisespeedy = -4;
-  noisespeedz = -4;
-  noisescale = 32;
-  colorLoop = 0;
-  drawNoise3d(LavaColors_p);
-}
-
-void oceanNoise3d() {
-  noisespeedx = -2;
-  noisespeedy = 0;
-  noisespeedz = 4;
-  noisescale = 24;
-  colorLoop = 0;
-  drawNoise3d(OceanColors_p);
-}
-
-void blackAndWhiteNoise3d() {
-  SetupBlackAndWhiteStripedPalette();
-  noisespeedx = -12;
-  noisespeedy = 0;
-  noisespeedz = 0;
-  noisescale = 24;
-  colorLoop = 0;
-  drawNoise3d(blackAndWhiteStripedPalette);
-}
-
-void blackAndBlueNoise3d() {
-  SetupBlackAndBlueStripedPalette();
-  noisespeedx = -4;
-  noisespeedy = -4;
-  noisespeedz = -4;
-  noisescale = 32;
-  colorLoop = 0;
-  drawNoise3d(blackAndBlueStripedPalette);
-}
-

README.md

@@ -6,14 +6,38 @@ Control an addressable LED strip with an ESP8266 via a web browser or infrared r
 Hardware
 --------
 
-An ESP8266 development board, such as the [Adafruit HUZZAH ESP8266 Breakout]:
+##### ESP8266 development board
+
+[![Wemos D1 Mini Pro & Headers](https://ae01.alicdn.com/kf/HTB1P1KVaMsSMeJjSsphq6xuJFXah/WEMOS-D1-mini-Pro-V1-1-0-16M-bytes-external-antenna-connector-ESP8266-WIFI-Internet-of.jpg_200x200.jpg)](https://www.aliexpress.com/item/WEMOS-D1-mini-Pro-16M-bytes-external-antenna-connector-ESP8266-WIFI-Internet-of-Things-development-board/32724692514.html)
+
+[Wemos D1 Mini Pro & Headers](https://www.aliexpress.com/item/WEMOS-D1-mini-Pro-16M-bytes-external-antenna-connector-ESP8266-WIFI-Internet-of-Things-development-board/32724692514.html)
+
+or
 
 [![Adafruit HUZZAH ESP8266 Breakout](https://cdn-shop.adafruit.com/310x233/2471-10.jpg)](https://www.adafruit.com/products/2471)
 
-Addressable LED strip, such as the [Adafruit NeoPixel Ring]:
+[Adafruit HUZZAH ESP8266 Breakout](https://www.adafruit.com/products/2471)
+
+##### Addressable LED strip
 
 [![Adafruit NeoPixel Ring](https://www.adafruit.com/images/145x109/1586-00.jpg)](https://www.adafruit.com/product/1586)
 
+[Adafruit NeoPixel Ring]
+
+Other hardware:
+
+* [3.3V to 5V Logic Level Shifter](http://www.digikey.com/product-detail/en/texas-instruments/SN74HCT245N/296-1612-5-ND/277258) (required if LEDs "glitch")
+
+Recommended by [Adafruit NeoPixel "Best Practices"](https://learn.adafruit.com/adafruit-neopixel-uberguide/best-practices) to help protect LEDs from current onrush:
+* [1000µF Capacitor](http://www.digikey.com/product-detail/en/panasonic-electronic-components/ECA-1EM102/P5156-ND/245015)
+* [300 to 500 Ohm resistor](https://www.digikey.com/product-detail/en/stackpole-electronics-inc/CF14JT470R/CF14JT470RCT-ND/1830342)
+
+Optional shield to make everything more tidy:
+
+[![Wemos D1 Mini ESP8266 LED & Level Shifter Shield](https://d3s5r33r268y59.cloudfront.net/13194/products/thumbs/2017-05-06T15:02:37.208Z-IMG_20170506_100623.jpg.114x76_q85_pad_rcrop.jpg)](https://www.tindie.com/products/jasoncoon/wemos-d1-mini-esp8266-led-and-level-shifter-shield/)
+
+[Wemos D1 Mini ESP8266 LED & Level Shifter Shield](https://www.tindie.com/products/jasoncoon/wemos-d1-mini-esp8266-led-and-level-shifter-shield)
+
 Features
 --------
 * Turn the NeoPixel Ring on and off
@@ -41,12 +65,12 @@ The app is installed via the Arduino IDE which can be [downloaded here](https://
 The app depends on the following libraries. They must either be downloaded from GitHub and placed in the Arduino 'libraries' folder, or installed as [described here](https://www.arduino.cc/en/Guide/Libraries) by using the Arduino library manager.
 
 * [FastLED](https://github.com/FastLED/FastLED)
-* [IRremoteESP8266](https://github.com/markszabo/IRremoteESP8266)
+* [IRremoteESP8266](https://github.com/sebastienwarin/IRremoteESP8266)
 * [Arduino WebSockets](https://github.com/Links2004/arduinoWebSockets)
 
 Download the app code from GitHub using the green Clone or Download button from [the GitHub project main page](https://github.com/jasoncoon/esp8266-fastled-webserver) and click Download ZIP. Decompress the ZIP file in your Arduino sketch folder.
 
-The web app needs to be uploaded to the ESP8266's SPIFFS.  You can do this within the Arduino IDE after installing the [Arduino ESP8266FS tool](https://github.com/esp8266/Arduino/blob/master/doc/filesystem.md#uploading-files-to-file-system).
+The web app needs to be uploaded to the ESP8266's SPIFFS.  You can do this within the Arduino IDE after installing the [Arduino ESP8266FS tool](http://esp8266.github.io/Arduino/versions/2.3.0/doc/filesystem.html#uploading-files-to-file-system).
 
 With ESP8266FS installed upload the web app using `ESP8266 Sketch Data Upload` command in the Arduino Tools menu.
 
@@ -71,7 +95,7 @@ The firmware implements basic [RESTful web services](https://en.wikipedia.org/wi
 Infrared Remote Control
 -----------------------
 
-Control via infrared remote control is also supported, via the [ESP8266 port of the IRremote library](https://github.com/markszabo/IRremoteESP8266).
+Control via infrared remote control is also supported, via the [ESP8266 port of the IRremote library](https://github.com/sebastienwarin/IRremoteESP8266).
 
 [Adafruit NeoPixel Ring]:https://www.adafruit.com/product/1586
 [Adafruit HUZZAH ESP8266 Breakout]:https://www.adafruit.com/products/2471

TwinkleFOX.h

@@ -194,7 +194,7 @@ void drawTwinkles()
 
   uint8_t backgroundBrightness = bg.getAverageLight();
 
-  for(uint16_t i = 0; i < NUM_LEDS; i++) {
+  for(uint8_t i = 0; i < NUM_LEDS; i++) {
     CRGB& pixel = leds[i];
 
     PRNG16 = (uint16_t)(PRNG16 * 2053) + 1384; // next 'random' number

WiFi.h

@@ -0,0 +1,186 @@
+//#include <DNSServer.h>
+
+//DNSServer dnsServer;
+
+//const byte DNS_PORT = 53;
+
+// bool apMode = false;
+
+// AP mode password
+const char WiFiAPPSK[] = "";
+
+// Wi-Fi network to connect to (if not in AP mode)
+char* ssid = "";
+char* password = "";
+
+#define HOSTNAME "ESP8266-" ///< Hostname. The initializeWiFi function adds the Chip ID at the end.
+
+#define DEBUG_WIFI 1
+
+unsigned long futureTimeout = 0;
+uint16_t connectionTimeout = 20000;
+
+template <typename Generic>
+void debugPrintln(Generic text) {
+  if (DEBUG_WIFI) {
+    Serial.print("*WiFi: ");
+    Serial.println(text);
+  }
+}
+
+void startAp() {
+  // WiFi.disconnect();
+
+  // apMode = true;
+
+  //  WiFi.mode(WIFI_AP_STA);
+  // debugPrintln("SET AP STA");
+
+  String AP_NameString = "ESP8266-";
+  AP_NameString += String(ESP.getChipId(), HEX);
+
+  char AP_NameChar[AP_NameString.length() + 1];
+  memset(AP_NameChar, 0, AP_NameString.length() + 1);
+
+  for (int i = 0; i < AP_NameString.length(); i++)
+    AP_NameChar[i] = AP_NameString.charAt(i);
+
+  debugPrintln("Starting soft AP");
+
+  if (WiFiAPPSK != NULL) {
+    debugPrintln(WiFi.softAP(AP_NameChar, WiFiAPPSK) ? "ready" : "failed");
+  } else {
+    debugPrintln(WiFi.softAP(AP_NameChar) ? "ready" : "failed");
+  }
+
+  debugPrintln("Connect to Wi-Fi access point: ");
+  debugPrintln(AP_NameChar);
+
+  delay(500); // Without delay I've seen the IP address blank
+  debugPrintln("AP IP address: ");
+  debugPrintln(WiFi.softAPIP());
+
+  //  dnsServer.setErrorReplyCode(DNSReplyCode::NoError);
+  //  dnsServer.start(DNS_PORT, "*", WiFi.softAPIP());
+}
+
+String getWiFiJson() {
+  String hostname = String(HOSTNAME);
+  hostname += String(ESP.getChipId(), HEX);
+
+  String json = "{";
+
+  json += "\"status\":\"" + String(WiFi.status()) + "\"";
+  json += ",\"localIP\":\"" + WiFi.localIP().toString() + "\"";
+  json += ",\"softAPIP\":\"" + WiFi.softAPIP().toString() + "\"";
+  json += ",\"hostname\":\"" + hostname + "\"";
+  json += ",\"ssid\":\"" + WiFi.SSID() + "\"";
+  json += ",\"rssi\":\"" + String(WiFi.RSSI()) + "\"";
+
+  //  json += ",\"networks\":[";
+  //  byte ssidCount = WiFi.scanNetworks();
+  //  for (byte i = 0; i < ssidCount; i++) {
+  //    if (i > 0)
+  //      json += ",";
+  //
+  //    json += "{\"name\":\"" + WiFi.SSID(i) + "\",\"rssi\":\"" + String(WiFi.RSSI(i)) + "\"}";
+  //  }
+  //
+  //  json += "]";
+
+  json += "}";
+
+  return json;
+}
+
+void initializeWiFi() {
+  WiFi.mode(WIFI_AP_STA);
+
+  // Set Hostname.
+  String hostname = String(HOSTNAME);
+  hostname += String(ESP.getChipId(), HEX);
+  WiFi.hostname(hostname);
+
+  // Print hostname.
+  Serial.println("Hostname: " + hostname);
+
+  char hostnameChar[hostname.length() + 1];
+  memset(hostnameChar, 0, hostname.length() + 1);
+
+  for (uint8_t i = 0; i < hostname.length(); i++)
+    hostnameChar[i] = hostname.charAt(i);
+
+  //  MDNS.begin(hostnameChar);
+
+  // Add service to MDNS-SD
+  //  MDNS.addService("http", "tcp", 80);
+
+  // attempt to connect; should it fail, fall back to AP mode
+  //  WiFi.mode(WIFI_STA);
+
+  String stored_ssid = WiFi.SSID();
+  if (stored_ssid != NULL && stored_ssid != "") {
+    debugPrintln("Connecting to stored SSID:");
+    debugPrintln(stored_ssid);
+    WiFi.begin();
+  } else {
+    debugPrintln("No stored SSID");
+  }
+
+  startAp();
+
+  webServer.on("/wifi", HTTP_POST, []() {
+    String ssid = webServer.arg("ssid");
+    String password = webServer.arg("password");
+    // String mode = webServer.arg("mode");
+
+    char ssidChars[50];
+    ssid.toCharArray(ssidChars, 50);
+
+    char passwordChars[50];
+    password.toCharArray(passwordChars, 50);
+
+    debugPrintln("Connecting to new SSID:");
+    debugPrintln(ssid);
+
+    // dnsServer.stop();
+    // WiFi.softAPdisconnect(true);
+
+    // apMode = false;
+    // WiFi.mode(WIFI_STA);
+    WiFi.begin(ssidChars, passwordChars);
+    // futureTimeout = millis() + connectionTimeout;
+
+    webServer.sendHeader("Location", "/wifi.htm");
+    webServer.send(303);
+  });
+
+  webServer.on("/wifi", HTTP_GET, []() {
+    String json = getWiFiJson();
+    webServer.send(200, "application/json", json);
+  });
+}
+
+void checkWiFi() {
+  //  if (WiFi.status() == WL_CONNECTED) {
+  //    debugPrintln("connected");
+  //    futureTimeout = millis() + connectionTimeout;
+  //    return;
+  //  }
+  //
+  //  if (apMode) {
+  //    debugPrintln("Already running in AP mode.");
+  //    return;
+  //  }
+  //
+  //  // time to give up on the stored network and switch to ap mode?
+  //  if (futureTimeout != 0 && millis() < futureTimeout) {
+  //    return;
+  //  }
+  //
+  //  debugPrintln("Switching to AP mode, timeout elapsed: ");
+  //  debugPrintln(connectionTimeout);
+  //
+  //  startApMode();
+}
+

data/css/simple.css

@@ -2,20 +2,10 @@
   padding-bottom: 70px;
 }*/
 
-.grid-item-color-button {
-  border: 0px;
-  width: 7.69%;
-  height: 64px;
-  margin: 0px;
-  padding: 0px;
-}
-
 .grid-item-color {
-  border: none;
-  width: 3.33%;
+  width: 4%;
   height: 32px;
-  margin: 0px;
-  padding: 0px;
+  cursor: pointer;
 }
 
 .grid-item-pattern {

data/index.htm

@@ -5,15 +5,15 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Cube by Evil Genius Labs</title>
+  <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">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css" integrity="sha256-4wnSkPYU5B4yngAlx/rEb8LdfMah4teUth4AfhGEuaY=" crossorigin="anonymous" />
+  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
+  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css" integrity="sha256-4wnSkPYU5B4yngAlx/rEb8LdfMah4teUth4AfhGEuaY=" crossorigin="anonymous" /> -->
 
   <!-- request CSS from the ESP8266 web server -->
-  <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
-  <!-- <link rel="stylesheet" href="css/jquery.minicolors.min.css"> -->
+  <link rel="stylesheet" href="css/bootstrap.min.css">
+  <link rel="stylesheet" href="css/minicolors.min.css">
 
   <link rel="stylesheet" href="css/styles.css">
 
@@ -31,20 +31,21 @@
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
-        <a class="navbar-brand" href="https://www.evilgeniuslabs.org" target="_blank"><img src="https://evilgeniuslabs.org/images/atom.svg" style="width: 24px; height: 24px;" /></a>
+        <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 class="active"><a href="/">Cube <span class="sr-only">(current)</span></a></li>
+          <li class="active"><a href="/">ESP8266 + FastLED <span class="sr-only">(current)</span></a></li>
           <li><a href="/simple.htm" target="_blank" title="Simple Mode">Simple</a></li>
           <li><a href="/edit.htm" target="_blank" title="Edit Files">Files</a></li>
           <li><a href="/update" target="_blank" title="Update Firmware">Firmware</a></li>
+          <li><a href="/wifi.htm" target="_blank" title="Wi-Fi Settings">Wi-Fi</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
           <li>
             <a href="https://github.com/jasoncoon/esp8266-fastled-webserver">
-              <img style="height: 16px;" src="https://assets-cdn.github.com/favicon.ico" />
+              <img style="height: 16px;" src="/images/github.ico" />
             </a>
           </li>
         </ul>
@@ -215,16 +216,16 @@
   </nav>
 
   <!-- 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://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js" integrity="sha256-XAFQ9dZ6hy8p/GRhU8h/8pMvM1etymiJLZW1CiHV3bQ=" crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js" integrity="sha256-A4JwlcDvqO4JXpvEtvWY1RH8JAEMu5W21wP8GUXLUNs=" crossorigin="anonymous"></script>
+  <!-- <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://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js" integrity="sha256-XAFQ9dZ6hy8p/GRhU8h/8pMvM1etymiJLZW1CiHV3bQ=" crossorigin="anonymous"></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/jquery.minicolors.min.js"></script> -->
-  <!-- <script src="js/r-websocket.min.js"></script> -->
+  <script src="js/jquery-3.1.1.min.js"></script>
+  <script src="js/bootstrap.min.js"></script>
+  <script src="js/minicolors.min.js"></script>
+  <script src="js/r-websocket.min.js"></script>
 
   <script src="js/app.js"></script>
 

data/js/app.js

@@ -3,7 +3,7 @@ var address = location.hostname;
 var urlBase = "";
 
 // used when hosting the site somewhere other than the ESP8266 (handy for testing without waiting forever to upload to SPIFFS)
-// var address = "192.168.86.55";
+// var address = "esp8266-1920f7.local";
 // var urlBase = "http://" + address + "/";
 
 var postColorTimer = {};

data/js/simple.js

@@ -3,7 +3,7 @@ var address = location.hostname;
 var urlBase = "";
 
 // used when hosting the site somewhere other than the ESP8266 (handy for testing without waiting forever to upload to SPIFFS)
-// var address = "192.168.86.55";
+// var address = "192.168.1.13";
 // var urlBase = "http://" + address + "/";
 
 var postColorTimer = {};
@@ -15,27 +15,6 @@ var patterns = [
   "Pride",
   "Color Waves",
 
-  "X Gradient Palette",
-  "Y Gradient Palette",
-  "Z Gradient Palette",
-
-  "XY Gradient Palette",
-  "XZ Gradient Palette",
-  "YZ Gradient Palette",
-  "XYZ Gradient Palette",
-
-  "Fire Noise",
-  "Fire Noise 2",
-  "Lava Noise",
-  "Rainbow Noise",
-  "Rainbow Stripe Noise",
-  "Party Noise",
-  "Forest Noise",
-  "Cloud Noise",
-  "Ocean Noise",
-  "Black & White Noise",
-  "Black & Blue Noise",
-
   "Rainbow Twinkles",
   "Snow Twinkles",
   "Cloud Twinkles",
@@ -56,11 +35,15 @@ var patterns = [
   "Cloud 2 Twinkles",
   "Ocean Twinkles",
 
+  "Rainbow",
+  "Rainbow With Glitter",
   "Solid Rainbow",
   "Confetti",
   "Sinelon",
   "Beat",
   "Juggle",
+  "Fire",
+  "Water"
 ];
 
 var ws = new ReconnectingWebSocket('ws://' + address + ':81/', ['arduino']);
@@ -131,13 +114,13 @@ $(document).ready(function() {
 });
 
 function addColorButtons() {
-  var hues = 30;
+  var hues = 25;
   var hueStep = 360 / hues;
 
-  var levels = 25;
-  var levelStep = 50 / levels;
+  var levels = 10;
+  var levelStep = 60 / levels;
 
-  for(var l = 50; l < 95; l += levelStep) {
+  for(var l = 20; l < 80; l += levelStep) {
     for(var h = 0; h < hues; h++) {
       addColorButton(h * hueStep, 100, l);
     }
@@ -148,35 +131,24 @@ function addColorButtons() {
     layoutMode: 'fitRows'
   });
 
-  $('.grid-color-buttons').isotope({
-    itemSelector: '.grid-item-color-button',
-    layoutMode: 'fitRows'
-  });
-
-  $('.grid-item-color-button').click(colorButtonClick);
 }
 
 var colorButtonIndex = 0;
 
-function colorButtonClick() {
+function addColorButton(h, s, l) {
+  var color = "hsla(" + h + ", " + s + "%, " + l + "%, 1)"
+  var template = $("#colorButtonTemplate").clone();
+  template.attr("id", "color-button-" + colorButtonIndex++);
+  template.css("background-color", color);
+  template.click(function() {
     var rgb = $(this).css('backgroundColor');
     var components = rgbToComponents(rgb);
 
     $(".grid-item-color").css("border", "none");
-
-  if($(this).attr("class") === "grid-item-color") {
     $(this).css("border", "1px solid");
-  }
 
     postColor("solidColor", components);
-}
-
-function addColorButton(h, s, l) {
-  var color = "hsl(" + h + ", " + s + "%, " + l + "%)"
-  var template = $("#colorButtonTemplate").clone();
-  template.css("background-color", color);
-  template.attr("title", template.css("background-color") + "\r\n" + color);
-  template.click(colorButtonClick);
+  });
 
   $("#colorButtonsRow").append(template);
 }

data/simple.htm

@@ -5,13 +5,13 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Cube by Evil Genius Labs</title>
+  <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">
+  <!-- <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/bootstrap.min.css">
 
   <link rel="stylesheet" href="css/simple.css">
 
@@ -20,58 +20,36 @@
 
 <body>
 
-  <div id="container" class="container-fluid">
+  <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>
 
-    <h4>Patterns</h4>
-
     <div id="patternGrid" class="grid-pattern"></div>
 
-    <h4>Basic Colors</h4>
-
-    <div class="grid-color-buttons">
-      <button type="button" class="grid-item-color-button" style="background: #FF0000;" title="Red">&nbsp;</button>
-      <button type="button" class="grid-item-color-button" style="background: #FF8000;" title="Orange">&nbsp;</button>
-      <button type="button" class="grid-item-color-button" style="background: #FFFF00;" title="Yellow">&nbsp;</button>
-      <button type="button" class="grid-item-color-button" style="background: #80FF00;" title="Chartreuse">&nbsp;</button>
-      <button type="button" class="grid-item-color-button" style="background: #00FF00;" title="Green">&nbsp;</button>
-      <button type="button" class="grid-item-color-button" style="background: #00FF80;" title="Spring Green">&nbsp;</button>
-      <button type="button" class="grid-item-color-button" style="background: #00FFFF;" title="Cyan">&nbsp;</button>
-      <button type="button" class="grid-item-color-button" style="background: #0080FF;" title="Azure">&nbsp;</button>
-      <button type="button" class="grid-item-color-button" style="background: #0000FF;" title="Blue">&nbsp;</button>
-      <button type="button" class="grid-item-color-button" style="background: #8000FF;" title="Violet">&nbsp;</button>
-      <button type="button" class="grid-item-color-button" style="background: #FF00FF;" title="Magenta">&nbsp;</button>
-      <button type="button" class="grid-item-color-button" style="background: #FF0080;" title="Rose">&nbsp;</button>
-      <button type="button" class="grid-item-color-button" style="background: #FFFFFF; border: 1px solid;" title="White">&nbsp;</button>
-    </div>
-
-    <h4>Color Palette</h4>
-
     <div id="colorButtonsRow" class="grid-color"></div>
 
   </div>
 
   <div id="templates" style="display: none">
 
-    <button id="colorButtonTemplate" class="grid-item-color"></button>
+    <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>
+  <!-- <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/jquery-3.1.1.min.js"></script>
+  <script src="js/bootstrap.min.js"></script>
 
   <script src="js/simple.js"></script>
 

data/wifi.htm

@@ -0,0 +1,95 @@
+<!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="/">ESP8266 + FastLED <span class="sr-only">(current)</span></a></li>
+          <li><a href="/simple.htm" target="_blank" title="Simple Mode">Simple</a></li>
+          <li><a href="/edit.htm" target="_blank" title="Edit Files">Files</a></li>
+          <li><a href="/update" target="_blank" title="Update Firmware">Firmware</a></li>
+          <li class="active"><a href="/wifi.htm" target="_blank" title="Wi-Fi Settings">Wi-Fi</a></li>
+        </ul>
+        <ul class="nav navbar-nav navbar-right">
+          <li>
+            <a href="https://github.com/jasoncoon/esp8266-fastled-webserver">
+              <img style="height: 16px;" src="/images/github.ico" />
+            </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>

esp8266-fastled-webserver.ino

@@ -1,23 +1,21 @@
 /*
-   ESP8266 + FastLED + IR Remote: https://github.com/jasoncoon/esp8266-fastled-webserver
-   Copyright (C) 2015-2016 Jason Coon
-
-   This program is free software: you can redistribute it and/or modify
-   it under the terms of the GNU General Public License as published by
-   the Free Software Foundation, either version 3 of the License, or
-   (at your option) any later version.
-
-   This program is distributed in the hope that it will be useful,
-   but WITHOUT ANY WARRANTY; without even the implied warranty of
-   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-   GNU General Public License for more details.
-
-   You should have received a copy of the GNU General Public License
-   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * ESP8266 + FastLED + IR Remote: https://github.com/jasoncoon/esp8266-fastled-webserver
+ * Copyright (C) 2015-2016 Jason Coon
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-//#define FASTLED_ALLOW_INTERRUPTS 0
-#define FASTLED_INTERRUPT_RETRY_COUNT 0
 #include <FastLED.h>
 FASTLED_USING_NAMESPACE
 
@@ -26,7 +24,7 @@ extern "C" {
 }
 
 #include <ESP8266WiFi.h>
-#include <ESP8266mDNS.h>
+//#include <ESP8266mDNS.h>
 #include <ESP8266WebServer.h>
 #include <ESP8266HTTPUpdateServer.h>
 #include <WebSocketsServer.h>
@@ -39,32 +37,23 @@ extern "C" {
 
 #include "Field.h"
 
-#define HOSTNAME "Cube-ESP8266-" ///< Hostname. The setup function adds the Chip ID at the end.
-
 //#define RECV_PIN D4
 //IRrecv irReceiver(RECV_PIN);
 
 //#include "Commands.h"
 
-const bool apMode = false;
-
-// AP mode password
-const char WiFiAPPSK[] = "";
-
-// Wi-Fi network to connect to (if not in AP mode)
-const char* ssid = "";
-const char* password = "";
-
 ESP8266WebServer webServer(80);
 WebSocketsServer webSocketsServer = WebSocketsServer(81);
 ESP8266HTTPUpdateServer httpUpdateServer;
 
+#include "WiFi.h"
+
 #include "FSBrowser.h"
 
-#define DATA_PIN      D5
-#define LED_TYPE      WS2812B
+#define DATA_PIN      D8
+#define LED_TYPE      WS2811
 #define COLOR_ORDER   GRB
-#define NUM_LEDS      8 * 8 * 6
+#define NUM_LEDS      24
 
 #define MILLI_AMPS         2000     // IMPORTANT: set the max milli-Amps of your power supply (4A = 4000mA)
 #define FRAMES_PER_SECOND  120 // here you can control the speed. With the Access Point / Web Server the animations run a bit slower.
@@ -135,8 +124,6 @@ typedef PatternAndName PatternAndNameList[];
 
 #include "Twinkles.h"
 #include "TwinkleFOX.h"
-#include "Map.h"
-#include "Noise.h"
 
 // List of patterns to cycle through.  Each is defined as a separate function below.
 
@@ -144,28 +131,6 @@ PatternAndNameList patterns = {
   { pride,                  "Pride" },
   { colorWaves,             "Color Waves" },
 
-  { cubeXGradientPalette,   "X Gradient Palette" },
-  { cubeYGradientPalette,   "Y Gradient Palette" },
-  { cubeZGradientPalette,   "Z Gradient Palette" },
-  
-  { cubeXYGradientPalette,  "XY Gradient Palette" },
-  { cubeXZGradientPalette,  "XZ Gradient Palette" },
-  { cubeYZGradientPalette,  "YZ Gradient Palette" },
-  { cubeXYZGradientPalette, "XYZ Gradient Palette" },
-
-  // 3d noise patterns
-  { fireNoise3d, "Fire Noise" },
-  { fireNoise23d, "Fire Noise 2" },
-  { lavaNoise3d, "Lava Noise" },
-  { rainbowNoise3d, "Rainbow Noise" },
-  { rainbowStripeNoise3d, "Rainbow Stripe Noise" },
-  { partyNoise3d, "Party Noise" },
-  { forestNoise3d, "Forest Noise" },
-  { cloudNoise3d, "Cloud Noise" },
-  { oceanNoise3d, "Ocean Noise" },
-  { blackAndWhiteNoise3d, "Black & White Noise" },
-  { blackAndBlueNoise3d, "Black & Blue Noise" },
-  
   // twinkle patterns
   { rainbowTwinkles,        "Rainbow Twinkles" },
   { snowTwinkles,           "Snow Twinkles" },
@@ -188,15 +153,15 @@ PatternAndNameList patterns = {
   { cloud2Twinkles,         "Cloud 2 Twinkles" },
   { oceanTwinkles,          "Ocean Twinkles" },
 
-//  { rainbow,                "Rainbow" },
-//  { rainbowWithGlitter,     "Rainbow With Glitter" },
+  { rainbow,                "Rainbow" },
+  { rainbowWithGlitter,     "Rainbow With Glitter" },
   { rainbowSolid,           "Solid Rainbow" },
   { confetti,               "Confetti" },
   { sinelon,                "Sinelon" },
   { bpm,                    "Beat" },
   { juggle,                 "Juggle" },
-//  { fire,                   "Fire" },
-//  { water,                  "Water" },
+  { fire,                   "Fire" },
+  { water,                  "Water" },
 
   { showSolidColor,         "Solid Color" }
 };
@@ -236,8 +201,6 @@ const String paletteNames[paletteCount] = {
 #include "Fields.h"
 
 void setup() {
-  WiFi.setSleepMode(WIFI_NONE_SLEEP);
-  
   Serial.begin(115200);
   delay(100);
   Serial.setDebugOutput(true);
@@ -280,57 +243,9 @@ void setup() {
     Serial.printf("\n");
   }
 
-  // Set Hostname.
-  String hostname(HOSTNAME);
-  hostname += String(ESP.getChipId(), HEX);
-  WiFi.hostname(hostname);
+  initializeWiFi();
 
-  char hostnameChar[hostname.length() + 1];
-  memset(hostnameChar, 0, hostname.length() + 1);
-
-  for (uint8_t i = 0; i < hostname.length(); i++)
-    hostnameChar[i] = hostname.charAt(i);
-
-  MDNS.begin(hostnameChar);
-
-  // Add service to MDNS-SD
-  MDNS.addService("http", "tcp", 80);
-
-  // Print hostname.
-  Serial.println("Hostname: " + hostname);
-
-  if (apMode)
-  {
-    WiFi.mode(WIFI_AP);
-
-    // Do a little work to get a unique-ish name. Append the
-    // last two bytes of the MAC (HEX'd) to "Thing-":
-    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();
-    String AP_NameString = "ESP8266-" + macID;
-
-    char AP_NameChar[AP_NameString.length() + 1];
-    memset(AP_NameChar, 0, AP_NameString.length() + 1);
-
-    for (int i = 0; i < AP_NameString.length(); i++)
-      AP_NameChar[i] = AP_NameString.charAt(i);
-
-    WiFi.softAP(AP_NameChar, WiFiAPPSK);
-
-    Serial.printf("Connect to Wi-Fi access point: %s\n", AP_NameChar);
-    Serial.println("and open http://192.168.4.1 in your browser");
-  }
-  else
-  {
-    WiFi.mode(WIFI_STA);
-    Serial.printf("Connecting to %s\n", ssid);
-    if (String(WiFi.SSID()) != String(ssid)) {
-      WiFi.begin(ssid, password);
-    }
-  }
+  checkWiFi();
 
   httpUpdateServer.setup(&webServer);
 
@@ -501,6 +416,11 @@ void loop() {
   // Add entropy to random number generator; we use a lot of it.
   random16_add_entropy(random(65535));
 
+  EVERY_N_SECONDS(10) {
+    checkWiFi();
+  }
+
+//  dnsServer.processNextRequest();
   webSocketsServer.loop();
   webServer.handleClient();
 
@@ -1155,7 +1075,7 @@ void heatMap(CRGBPalette16 palette, bool up)
   random16_add_entropy(random(256));
 
   // Array of temperature readings at each simulation cell
-  static byte heat[NUM_LEDS];
+  static byte heat[256];
 
   byte colorindex;