From 9025d0ed10d48e48153d98b8c5d03d3a50ff2008 Mon Sep 17 00:00:00 2001
From: Jason Coon <jasoncoon@hotmail.com>
Date: Tue, 5 Sep 2017 07:59:24 -0500
Subject: [PATCH] Updated for 8x8x8 tinytim cube.

---
 TwinkleFOX.h                  |  2 +-
 data/css/simple.css           | 14 ++++++--
 data/index.htm                |  4 +--
 data/js/app.js                |  2 +-
 data/js/simple.js             | 68 ++++++++++++++++++++++++-----------
 data/simple.htm               | 28 +++++++++++++--
 esp8266-fastled-webserver.ino | 50 +++++++++++++-------------
 7 files changed, 114 insertions(+), 54 deletions(-)

diff --git a/TwinkleFOX.h b/TwinkleFOX.h
index f27b563..e784a88 100644
--- a/TwinkleFOX.h
+++ b/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
diff --git a/data/css/simple.css b/data/css/simple.css
index 4c6be01..04b496e 100644
--- a/data/css/simple.css
+++ b/data/css/simple.css
@@ -2,10 +2,20 @@
   padding-bottom: 70px;
 }*/
 
+.grid-item-color-button {
+  border: 0px;
+  width: 7.69%;
+  height: 64px;
+  margin: 0px;
+  padding: 0px;
+}
+
 .grid-item-color {
-  width: 4%;
+  border: none;
+  width: 3.33%;
   height: 32px;
-  cursor: pointer;
+  margin: 0px;
+  padding: 0px;
 }
 
 .grid-item-pattern {
diff --git a/data/index.htm b/data/index.htm
index 9c27311..8f2b1d2 100644
--- a/data/index.htm
+++ b/data/index.htm
@@ -5,7 +5,7 @@
   <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>
+  <title>Cube 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">
@@ -36,7 +36,7 @@
       </div>
       <div class="collapse navbar-collapse" id="navbar-collapse-1">
         <ul class="nav navbar-nav">
-          <li class="active"><a href="/">ESP8266 + FastLED <span class="sr-only">(current)</span></a></li>
+          <li class="active"><a href="/">Cube <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>
diff --git a/data/js/app.js b/data/js/app.js
index 005dc34..2379574 100644
--- a/data/js/app.js
+++ b/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 = "esp8266-1920f7.local";
+// var address = "192.168.86.55";
 // var urlBase = "http://" + address + "/";
 
 var postColorTimer = {};
diff --git a/data/js/simple.js b/data/js/simple.js
index df2c5ce..7e1327e 100644
--- a/data/js/simple.js
+++ b/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.1.13";
+// var address = "192.168.86.55";
 // var urlBase = "http://" + address + "/";
 
 var postColorTimer = {};
@@ -15,6 +15,27 @@ 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",
@@ -35,15 +56,11 @@ 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']);
@@ -114,13 +131,13 @@ $(document).ready(function() {
 });
 
 function addColorButtons() {
-  var hues = 25;
+  var hues = 30;
   var hueStep = 360 / hues;
 
-  var levels = 10;
-  var levelStep = 60 / levels;
+  var levels = 25;
+  var levelStep = 50 / levels;
 
-  for(var l = 20; l < 80; l += levelStep) {
+  for(var l = 50; l < 95; l += levelStep) {
     for(var h = 0; h < hues; h++) {
       addColorButton(h * hueStep, 100, l);
     }
@@ -131,24 +148,35 @@ 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 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);
+function colorButtonClick() {
+  var rgb = $(this).css('backgroundColor');
+  var components = rgbToComponents(rgb);
 
-    $(".grid-item-color").css("border", "none");
+  $(".grid-item-color").css("border", "none");
+
+  if($(this).attr("class") === "grid-item-color") {
     $(this).css("border", "1px solid");
+  }
 
-    postColor("solidColor", components);
-  });
+  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);
 }
diff --git a/data/simple.htm b/data/simple.htm
index 55a5a59..bf03b0c 100644
--- a/data/simple.htm
+++ b/data/simple.htm
@@ -5,7 +5,7 @@
   <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>
+  <title>Cube 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">
@@ -20,22 +20,44 @@
 
 <body>
 
-  <div id="container" class="container">
+  <div id="container" class="container-fluid">
 
     <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">
 
-    <div id="colorButtonTemplate" class="grid-item-color"></div>
+    <button id="colorButtonTemplate" class="grid-item-color"></button>
 
     <button id="patternButtonTemplate" class="grid-item-pattern btn btn-default"></button>
 
diff --git a/esp8266-fastled-webserver.ino b/esp8266-fastled-webserver.ino
index 7a03024..ba88c07 100644
--- a/esp8266-fastled-webserver.ino
+++ b/esp8266-fastled-webserver.ino
@@ -32,14 +32,14 @@ extern "C" {
 #include <WebSocketsServer.h>
 #include <FS.h>
 #include <EEPROM.h>
-#include <IRremoteESP8266.h>
+//#include <IRremoteESP8266.h>
 #include "GradientPalettes.h"
 
 #define ARRAY_SIZE(A) (sizeof(A) / sizeof((A)[0]))
 
 #include "Field.h"
 
-#define HOSTNAME "ESP8266-" ///< Hostname. The setup function adds the Chip ID at the end.
+#define HOSTNAME "Cube-ESP8266-" ///< Hostname. The setup function adds the Chip ID at the end.
 
 //#define RECV_PIN D4
 //IRrecv irReceiver(RECV_PIN);
@@ -144,27 +144,27 @@ PatternAndNameList patterns = {
   { pride,                  "Pride" },
   { colorWaves,             "Color Waves" },
 
-  { cubeXGradientPalette,   "Cube X Gradient Palette" },
-  { cubeYGradientPalette,   "Cube Y Gradient Palette" },
-  { cubeZGradientPalette,   "Cube Z Gradient Palette" },
+  { cubeXGradientPalette,   "X Gradient Palette" },
+  { cubeYGradientPalette,   "Y Gradient Palette" },
+  { cubeZGradientPalette,   "Z Gradient Palette" },
   
-  { cubeXYGradientPalette,  "Cube XY Gradient Palette" },
-  { cubeXZGradientPalette,  "Cube XZ Gradient Palette" },
-  { cubeYZGradientPalette,  "Cube YZ Gradient Palette" },
-  { cubeXYZGradientPalette, "Cube XYZ Gradient Palette" },
+  { cubeXYGradientPalette,  "XY Gradient Palette" },
+  { cubeXZGradientPalette,  "XZ Gradient Palette" },
+  { cubeYZGradientPalette,  "YZ Gradient Palette" },
+  { cubeXYZGradientPalette, "XYZ Gradient Palette" },
 
   // 3d noise patterns
-  { fireNoise3d, "Fire Noise 3D" },
-  { fireNoise23d, "Fire Noise 2 3D" },
-  { lavaNoise3d, "Lava Noise 3D" },
-  { rainbowNoise3d, "Rainbow Noise 3D" },
-  { rainbowStripeNoise3d, "Rainbow Stripe Noise 3D" },
-  { partyNoise3d, "Party Noise 3D" },
-  { forestNoise3d, "Forest Noise 3D" },
-  { cloudNoise3d, "Cloud Noise 3D" },
-  { oceanNoise3d, "Ocean Noise 3D" },
-  { blackAndWhiteNoise3d, "Black & White Noise 3D" },
-  { blackAndBlueNoise3d, "Black & Blue Noise 3D" },
+  { 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" },
@@ -188,15 +188,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" }
 };
@@ -1155,7 +1155,7 @@ void heatMap(CRGBPalette16 palette, bool up)
   random16_add_entropy(random(256));
 
   // Array of temperature readings at each simulation cell
-  static byte heat[256];
+  static byte heat[NUM_LEDS];
 
   byte colorindex;