Added mapping for half-cube

Map.h

@@ -0,0 +1,193 @@
+uint8_t cubeWidth = 8;
+uint8_t cubeDepth = 8;
+uint8_t cubeHeight = 8;
+
+uint8_t coordsX[NUM_LEDS] = { 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, 7, 6, 5, 4, 3, 2, 1, 0, 0, 1, 2, 3, 4, 5, 6, 7, 7, 6, 5, 4, 3, 2, 1, 0, 0, 1, 2, 3, 4, 5, 6, 7, 7, 6, 5, 4, 3, 2, 1, 0, 0, 1, 2, 3, 4, 5, 6, 7, 7, 6, 5, 4, 3, 2, 1, 0, 0, 1, 2, 3, 4, 5, 6, 7 };
+uint8_t coordsY[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, 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 };
+uint8_t coordsZ[NUM_LEDS] = { 7, 6, 5, 4, 3, 2, 1, 0, 0, 1, 2, 3, 4, 5, 6, 7, 7, 6, 5, 4, 3, 2, 1, 0, 0, 1, 2, 3, 4, 5, 6, 7, 7, 6, 5, 4, 3, 2, 1, 0, 0, 1, 2, 3, 4, 5, 6, 7, 7, 6, 5, 4, 3, 2, 1, 0, 0, 1, 2, 3, 4, 5, 6, 7, 7, 6, 5, 4, 3, 2, 1, 0, 0, 1, 2, 3, 4, 5, 6, 7, 7, 6, 5, 4, 3, 2, 1, 0, 0, 1, 2, 3, 4, 5, 6, 7, 7, 6, 5, 4, 3, 2, 1, 0, 0, 1, 2, 3, 4, 5, 6, 7, 7, 6, 5, 4, 3, 2, 1, 0, 0, 1, 2, 3, 4, 5, 6, 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 cubeTest() {
+  static uint8_t x = 0;
+  static uint8_t y = 0;
+  static uint8_t z = 0;
+
+  EVERY_N_MILLIS(255 - speed) {
+    x++;
+    if(x >= cubeWidth) {
+      x = 0;
+      y++;
+      if(y >= cubeDepth) {
+        y = 0;
+        z++;
+        if(z >= cubeHeight) {
+          z = 0;
+        }
+      }
+    }
+    
+    FastLED.clear();
+
+    CHSV color = CHSV(gHue, 255, 255);
+    
+    for(uint8_t i = 0; i < NUM_LEDS; i++) {
+      uint8_t cx = coordsX[i];
+      uint8_t cy = coordsY[i];
+      uint8_t cz = coordsZ[i];
+      
+      if((cx == x && cy == y) || (cx == x && cz == z) || (cy == y && cz == z)) {
+        leds[i] = color;
+      }
+    }
+  }
+}
+
+void cubeXPalette() {
+  uint8_t hues = 8;
+
+  for (uint8_t i = 0; i < NUM_LEDS; i++) {
+    uint8_t x = coordsX[i];
+
+    leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) - (x * hues));
+  }
+}
+
+void cubeYPalette() {
+  uint8_t hues = 8;
+
+  for (uint8_t i = 0; i < NUM_LEDS; i++) {
+    uint8_t y = coordsY[i];
+
+    leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) - (y * hues));
+  }
+}
+
+void cubeZPalette() {
+  uint8_t hues = 8;
+
+  for (uint8_t i = 0; i < NUM_LEDS; i++) {
+    uint8_t z = coordsZ[i];
+
+    leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) - (z * hues));
+  }
+}
+
+void cubeXYPalette() {
+  uint8_t hues = 8;
+
+  for (uint8_t i = 0; i < NUM_LEDS; i++) {
+    uint8_t x = coordsX[i];
+    uint8_t y = coordsY[i];
+
+    leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) - ((x + y) * hues));
+  }
+}
+
+void cubeXZPalette() {
+  uint8_t hues = 8;
+
+  for (uint8_t i = 0; i < NUM_LEDS; i++) {
+    uint8_t x = coordsX[i];
+    uint8_t z = coordsZ[i];
+
+    leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) - ((x + z) * hues));
+  }
+}
+
+void cubeYZPalette() {
+  uint8_t hues = 8;
+
+  for (uint8_t i = 0; i < NUM_LEDS; i++) {
+    uint8_t y = coordsY[i];
+    uint8_t z = coordsZ[i];
+
+    leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) - ((y + z) * hues));
+  }
+}
+
+void cubeXYZPalette() {
+  uint8_t hues = 8;
+
+  for (uint8_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(palettes[currentPaletteIndex], beat8(speed) - ((x + y + z) * hues));
+  }
+}
+
+void cubeXGradientPalette() {
+  uint8_t hues = 8;
+  
+  for (uint8_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 (uint8_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 (uint8_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 (uint8_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 (uint8_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 (uint8_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 (uint8_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

@@ -0,0 +1,346 @@
+/*
+   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 MAX_DIMENSION ((MatrixWidth > MatrixHeight) ? MatrixWidth : MatrixHeight)
+
+// 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.
+int noisespeedx = 0;
+int noisespeedy = 1;
+int 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
+
+// This is the array that we keep our computed noise values in
+uint8_t noise[MAX_DIMENSION][MAX_DIMENSION];
+
+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 drawNoise(CRGBPalette16 palette, uint8_t hueReduce = 0)
+{
+  for (uint8_t x = 0; x < MatrixWidth; x++) {
+    for(uint8_t y = 0; y < MatrixHeight; y++) {
+      uint16_t i = XY(x, y);
+      
+      int xoffset = noisescale * x;
+      int yoffset = noisescale * y;
+  
+      uint8_t data = inoise8(x + xoffset + noisex, y + yoffset + noisey, 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 drawNoise3d(CRGBPalette16 palette, uint8_t hueReduce = 0)
+{
+  for(uint8_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 rainbowNoise() {
+  noisespeedx = 0;
+  noisespeedy = -1;
+  noisespeedz = 0;
+  noisescale = 24;
+  colorLoop = 0;
+  drawNoise(RainbowColors_p);
+}
+
+void rainbowNoise3d() {
+  noisespeedx = 0;
+  noisespeedy = 0;
+  noisespeedz = -1;
+  noisescale = 24;
+  colorLoop = 0;
+  drawNoise3d(RainbowColors_p);
+}
+
+void rainbowStripeNoise() {
+  noisespeedx = 0;
+  noisespeedy = -2;
+  noisespeedz = 0;
+  noisescale = 24;
+  colorLoop = 0;
+  drawNoise(RainbowStripeColors_p);
+}
+
+void rainbowStripeNoise3d() {
+  noisespeedx = 0;
+  noisespeedy = 0;
+  noisespeedz = -2;
+  noisescale = 24;
+  colorLoop = 0;
+  drawNoise3d(RainbowStripeColors_p);
+}
+
+void partyNoise() {
+  noisespeedx = -9;
+  noisespeedy = 0;
+  noisespeedz = 0;
+  noisescale = 32;
+  colorLoop = 0;
+  drawNoise(PartyColors_p);
+}
+
+void partyNoise3d() {
+  noisespeedx = -9;
+  noisespeedy = 0;
+  noisespeedz = 0;
+  noisescale = 32;
+  colorLoop = 0;
+  drawNoise3d(PartyColors_p);
+}
+
+void forestNoise() {
+  noisespeedx = -9;
+  noisespeedy = 0;
+  noisespeedz = 0;
+  noisescale = 32;
+  colorLoop = 0;
+  drawNoise(ForestColors_p);
+}
+
+void forestNoise3d() {
+  noisespeedx = -9;
+  noisespeedy = 0;
+  noisespeedz = 0;
+  noisescale = 32;
+  colorLoop = 0;
+  drawNoise3d(ForestColors_p);
+}
+
+void cloudNoise() {
+  noisespeedx = -2;
+  noisespeedy = 0;
+  noisespeedz = 0;
+  noisescale = 24;
+  colorLoop = 0;
+  drawNoise(CloudColors_p);
+}
+
+void cloudNoise3d() {
+  noisespeedx = -2;
+  noisespeedy = 0;
+  noisespeedz = 0;
+  noisescale = 24;
+  colorLoop = 0;
+  drawNoise3d(CloudColors_p);
+}
+
+void fireNoise() {
+  noisespeedx = 0; // 24;
+  noisespeedy = -32;
+  noisespeedz = 0;
+  noisescale = 64;
+  colorLoop = 0;
+  drawNoise(HeatColors_p, 60);
+}
+
+void fireNoise3d() {
+  noisespeedx = 0;
+  noisespeedy = 0;
+  noisespeedz = 32;
+  noisescale = 64;
+  colorLoop = 0;
+  drawNoise3d(HeatColors_p, 60);
+}
+
+void fireNoise2() {
+  noisespeedx = 0;
+  noisespeedy = -8;
+  noisespeedz = 3;
+  noisescale = 32;
+  colorLoop = 0;
+  drawNoise(HeatColors_p);
+}
+
+void fireNoise23d() {
+  noisespeedx = 1;
+  noisespeedy = 3;
+  noisespeedz = 8;
+  noisescale = 32;
+  colorLoop = 0;
+  drawNoise3d(HeatColors_p);
+}
+
+void lavaNoise() {
+  noisespeedx = 0;
+  noisespeedy = -1;
+  noisespeedz = 1;
+  noisescale = 24;
+  colorLoop = 0;
+  drawNoise(LavaColors_p);
+}
+
+void lavaNoise3d() {
+  noisespeedx = 1;
+  noisespeedy = 3;
+  noisespeedz = -8;
+  noisescale = 32;
+  colorLoop = 0;
+  drawNoise3d(LavaColors_p);
+}
+
+void oceanNoise() {
+  noisespeedx = -2;
+  noisespeedy = 0;
+  noisespeedz = 4;
+  noisescale = 24;
+  colorLoop = 0;
+  drawNoise(OceanColors_p);
+}
+
+void oceanNoise3d() {
+  noisespeedx = -2;
+  noisespeedy = 0;
+  noisespeedz = 4;
+  noisescale = 24;
+  colorLoop = 0;
+  drawNoise3d(OceanColors_p);
+}
+
+void blackAndWhiteNoise() {
+  SetupBlackAndWhiteStripedPalette();
+  noisespeedx = -12;
+  noisespeedy = 0;
+  noisespeedz = 0;
+  noisescale = 24;
+  colorLoop = 0;
+  drawNoise(blackAndWhiteStripedPalette);
+}
+
+void blackAndWhiteNoise3d() {
+  SetupBlackAndWhiteStripedPalette();
+  noisespeedx = -12;
+  noisespeedy = 0;
+  noisespeedz = 0;
+  noisescale = 24;
+  colorLoop = 0;
+  drawNoise3d(blackAndWhiteStripedPalette);
+}
+
+void blackAndBlueNoise() {
+  SetupBlackAndBlueStripedPalette();
+  noisespeedx = 0;
+  noisespeedy = 8;
+  noisespeedz = 0;
+  noisescale = 32;
+  colorLoop = 0;
+  drawNoise(blackAndBlueStripedPalette);
+}
+
+void blackAndBlueNoise3d() {
+  SetupBlackAndBlueStripedPalette();
+  noisespeedx = -4;
+  noisespeedy = -4;
+  noisespeedz = -4;
+  noisescale = 32;
+  colorLoop = 0;
+  drawNoise3d(blackAndBlueStripedPalette);
+}

README.md

@@ -1,22 +1,26 @@
-FastLED + ESP8266 Web Server
+Ultim8x8 RGB LED Panel + FastLED + ESP8266 Web Server
 =========
 
-Control an addressable LED strip with an ESP8266 via a web browser or infrared remote control.
+Control an [ULTiM8x8 RGB LED Panel] with an ESP8266 via a web browser.
+
+[Demo Video](https://www.youtube.com/watch?v=xigy7J_K7Aw):
+
+[![Demo Video](http://img.youtube.com/vi/xigy7J_K7Aw/0.jpg)](http://www.youtube.com/watch?v=xigy7J_K7Aw)
 
 Hardware
 --------
 
-An ESP8266 development board, such as the [Adafruit HUZZAH ESP8266 Breakout]:
+[ULTiM8x8 RGB LED Panel](https://www.crowdsupply.com/maniacal-labs-wyolum/ultim8x8)
 
-[![Adafruit HUZZAH ESP8266 Breakout](https://cdn-shop.adafruit.com/310x233/2471-10.jpg)](https://www.adafruit.com/products/2471)
+[![ULTiM8x8 RGB LED Panel](https://www.crowdsupply.com/img/7d3e/ultim8x8-bothboards_jpg_project-body.jpg)](https://www.crowdsupply.com/maniacal-labs-wyolum/ultim8x8)
 
-Addressable LED strip, such as the [Adafruit NeoPixel Ring]:
+[Adafruit Feather HUZZAH with ESP8266 WiFi](https://www.adafruit.com/products/2821)
 
-[![Adafruit NeoPixel Ring](https://www.adafruit.com/images/145x109/1586-00.jpg)](https://www.adafruit.com/product/1586)
+[![Adafruit Feather HUZZAH with ESP8266 WiFi](https://cdn-shop.adafruit.com/310x233/2821-01.jpg)](https://www.adafruit.com/products/2821)
 
 Features
 --------
-* Turn the NeoPixel Ring on and off
+* Turn the LEDs on and off
 * Adjust the brightness
 * Change the display pattern
 * Adjust the color
@@ -30,17 +34,27 @@ Patterns are requested by the app from the ESP8266, so as new patterns are added
 
 The web app is stored in SPIFFS (on-board flash memory).
 
-The web app is a single page app with separate files for js and css, using [jQuery](https://jquery.com) and [Bootstrap](http://getbootstrap.com).  It has buttons for On/Off, a slider for brightness, a pattern selector, and a color picker (using [jQuery MiniColors](http://labs.abeautifulsite.net/jquery-minicolors)).  Event handlers for the controls are wired up, so you don't have to click a 'Send' button after making changes.  The brightness slider and the color picker use a delayed event handler, to prevent from flooding the ESP8266 web server with too many requests too quickly.
-
-The only drawback to SPIFFS that I've found so far is uploading the files is extremely slow, requiring several minutes, regardless of how large the files are.  It's so slow that I've been just developing the web app and debugging locally on my desktop (with a hard-coded IP for the ESP8266), before uploading to SPIFFS and testing on the ESP8266.
+The web app is a single page app that uses [jQuery](https://jquery.com) and [Bootstrap](http://getbootstrap.com).  It has buttons for On/Off, a slider for brightness, a pattern selector, and a color picker (using [jQuery MiniColors](http://labs.abeautifulsite.net/jquery-minicolors)).  Event handlers for the controls are wired up, so you don't have to click a 'Send' button after making changes.  The brightness slider and the color picker use a delayed event handler, to prevent from flooding the ESP8266 web server with too many requests too quickly.
 
+The only drawback to SPIFFS that I've found so far is uploading the files can be extremely slow, requiring several minutes, sometimes regardless of how large the files are.  It can be so slow that I've been just developing the web app and debugging locally on my desktop (with a hard-coded IP for the ESP8266), before uploading to SPIFFS and testing on the ESP8266.
 
 Installing
 -----------
+The app is installed via the Arduino IDE which can be [downloaded here](https://www.arduino.cc/en/main/software). The ESP8266 boards will need to be added to the Arduino IDE which is achieved as follows. Click File > Preferences and copy and paste the URL "http://arduino.esp8266.com/stable/package_esp8266com_index.json" into the Additional Boards Manager URLs field. Click OK. Click Tools > Boards: ... > Boards Manager. Find and click on ESP8266 (using the Search function may expedite this). Click on Install. After installation, click on Close and then select your ESP8266 board from the Tools > Board: ... menu.
+
+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)
+* [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).
 
-With ESP8266FS installed run the sketch and then upload the web app using `ESP8266 Sketch Data Upload` command in the Arduino Tools menu.
+With ESP8266FS installed upload the web app using `ESP8266 Sketch Data Upload` command in the Arduino Tools menu.
+
+Then enter your wi-fi network SSID and password in the .ino file, and upload the sketch using the Upload button.
 
 Compression
 -----------

TwinkleFOX.h

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