Fixed compiler errors in Arduino 1.6.8. Added color swatch buttons.

data/index.htm

@@ -14,17 +14,8 @@
   <header class="navbar navbar-default navbar-static-top" id="top" role="banner">
     <div class="container">
       <div class="navbar-header">
-        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse" aria-expanded="false" aria-controls="navbar">
-          <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="/">ESP8266 + FastLED</a>
       </div>
-      <nav class="collapse navbar-collapse bs-navbar-collapse">
-      </nav>
-      <!--/.nav-collapse -->
     </div>
   </header>
   <div class="container">
@@ -70,7 +61,49 @@
       <div class="form-group">
         <label for="inputColor" class="col-sm-2 control-label">Color</label>
         <div class="col-sm-6">
-          <input id="inputColor" type="text" id="hue-demo" class="form-control demo">
+          <input id="inputColor" type="text" class="form-control">
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-sm-6 col-sm-offset-2">
+          <div class="btn-group btn-group-justified" role="group">
+            <div class="btn-group" role="group">
+              <button type="button" class="btn btn-default btn-color" style="background: #FF0000;" title="Red">&nbsp;</button>
+            </div>
+            <div class="btn-group" role="group">
+              <button type="button" class="btn btn-default btn-color" style="background: #FF8000;" title="Orange">&nbsp;</button>
+            </div>
+            <div class="btn-group" role="group">
+              <button type="button" class="btn btn-default btn-color" style="background: #FFFF00;" title="Yellow">&nbsp;</button>
+            </div>
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-default btn-color" style="background: #80FF00;" title="Chartreuse">&nbsp;</button>
+              </div>
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-default btn-color" style="background: #00FF00;" title="Green">&nbsp;</button>
+              </div>
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-default btn-color" style="background: #00FF80;" title="Spring Green">&nbsp;</button>
+              </div>
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-default btn-color" style="background: #00FFFF;" title="Cyan">&nbsp;</button>
+              </div>
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-default btn-color" style="background: #0080FF;" title="Azure">&nbsp;</button>
+              </div>
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-default btn-color" style="background: #0000FF;" title="Blue">&nbsp;</button>
+              </div>
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-default btn-color" style="background: #8000FF;" title="Violet">&nbsp;</button>
+              </div>
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-default btn-color" style="background: #FF00FF;" title="Magenta">&nbsp;</button>
+              </div>
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-default btn-color" style="background: #FF0080;" title="Rose">&nbsp;</button>
+              </div>
+          </div>
         </div>
       </div>
     </form>

data/js/scripts.js

@@ -77,6 +77,19 @@ $("#inputColor").change(function() {
   delaySetColor(rgb);
 });
 
+$(".btn-color").click(function() {
+  if(ignoreColorChange) return;
+
+  var rgb = $(this).css('backgroundColor');
+  var components = rgbToComponents(rgb);
+  delaySetColor(components);
+
+  var hexString = rgbToHex(components.r, components.g, components.b);
+  ignoreColorChange = true;
+  $("#inputColor").minicolors('value', hexString);
+  ignoreColorChange = false;
+});
+
 function getAll() {
   $.get(urlBase + "all", function(data) {
     allData = data;
@@ -163,3 +176,14 @@ function componentToHex(c) {
 function rgbToHex(r, g, b) {
     return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
 }
+
+function rgbToComponents(rgb){
+  var components = {};
+
+   rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+   components.r = parseInt(rgb[1]);
+   components.g = parseInt(rgb[2]);
+   components.b = parseInt(rgb[3]);
+
+   return components;
+ }

esp8266-fastled-webserver.ino

@@ -63,28 +63,6 @@ uint8_t brightnessMap[brightnessCount] = { 16, 32, 64, 128, 255 };
 int brightnessIndex = 0;
 uint8_t brightness = brightnessMap[brightnessIndex];
 
-typedef void (*Pattern)();
-typedef Pattern PatternList[];
-typedef struct {
-  Pattern pattern;
-  String name;
-} PatternAndName;
-typedef PatternAndName PatternAndNameList[];
-
-// List of patterns to cycle through.  Each is defined as a separate function below.
-PatternAndNameList patterns = {
-  { colorwaves, "Color Waves" },
-  { palettetest, "Palette Test" },
-  { pride, "Pride" },
-  { rainbow, "Rainbow" },
-  { rainbowWithGlitter, "Rainbow With Glitter" },
-  { confetti, "Confetti" },
-  { sinelon, "Sinelon" },
-  { juggle, "Juggle" },
-  { bpm, "BPM" },
-  { showSolidColor, "Solid Color" },
-};
-
 #define ARRAY_SIZE(A) (sizeof(A) / sizeof((A)[0]))
 
 // ten seconds per color palette makes a good demo
@@ -105,7 +83,6 @@ uint8_t gCurrentPaletteNumber = 0;
 CRGBPalette16 gCurrentPalette( CRGB::Black);
 CRGBPalette16 gTargetPalette( gGradientPalettes[0] );
 
-const uint8_t patternCount = ARRAY_SIZE(patterns);
 uint8_t currentPatternIndex = 0; // Index number of which pattern is current
 bool autoplayEnabled = false;
 
@@ -281,6 +258,30 @@ void setup(void) {
   autoPlayTimeout = millis() + (autoPlayDurationSeconds * 1000);
 }
 
+typedef void (*Pattern)();
+typedef Pattern PatternList[];
+typedef struct {
+  Pattern pattern;
+  String name;
+} PatternAndName;
+typedef PatternAndName PatternAndNameList[];
+
+// List of patterns to cycle through.  Each is defined as a separate function below.
+PatternAndNameList patterns = {
+  { colorwaves, "Color Waves" },
+  { palettetest, "Palette Test" },
+  { pride, "Pride" },
+  { rainbow, "Rainbow" },
+  { rainbowWithGlitter, "Rainbow With Glitter" },
+  { confetti, "Confetti" },
+  { sinelon, "Sinelon" },
+  { juggle, "Juggle" },
+  { bpm, "BPM" },
+  { showSolidColor, "Solid Color" },
+};
+
+const uint8_t patternCount = ARRAY_SIZE(patterns);
+
 void loop(void) {
   // Add entropy to random number generator; we use a lot of it.
   random16_add_entropy(random(65535));