From 0d3d32258d02cdfe728b0ef3e9183636e890d472 Mon Sep 17 00:00:00 2001
From: Jason Coon <jasoncoon@users.noreply.github.com>
Date: Sat, 12 Mar 2016 11:28:33 -0600
Subject: [PATCH] Fixed compiler errors in Arduino 1.6.8. Added color swatch
buttons.
---
data/index.htm | 53 ++++++++++++++++++++++++++++-------
data/js/scripts.js | 24 ++++++++++++++++
esp8266-fastled-webserver.ino | 47 ++++++++++++++++---------------
3 files changed, 91 insertions(+), 33 deletions(-)
diff --git a/data/index.htm b/data/index.htm
index 864fe1d..fc06787 100644
--- a/data/index.htm
+++ b/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"> </button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-default btn-color" style="background: #FF8000;" title="Orange"> </button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-default btn-color" style="background: #FFFF00;" title="Yellow"> </button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-default btn-color" style="background: #80FF00;" title="Chartreuse"> </button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-default btn-color" style="background: #00FF00;" title="Green"> </button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-default btn-color" style="background: #00FF80;" title="Spring Green"> </button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-default btn-color" style="background: #00FFFF;" title="Cyan"> </button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-default btn-color" style="background: #0080FF;" title="Azure"> </button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-default btn-color" style="background: #0000FF;" title="Blue"> </button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-default btn-color" style="background: #8000FF;" title="Violet"> </button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-default btn-color" style="background: #FF00FF;" title="Magenta"> </button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-default btn-color" style="background: #FF0080;" title="Rose"> </button>
+ </div>
+ </div>
</div>
</div>
</form>
diff --git a/data/js/scripts.js b/data/js/scripts.js
index 7488dc5..b1e408f 100644
--- a/data/js/scripts.js
+++ b/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;
+ }
diff --git a/esp8266-fastled-webserver.ino b/esp8266-fastled-webserver.ino
index cb4c14d..40cfbd3 100644
--- a/esp8266-fastled-webserver.ino
+++ b/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));
--
GitLab