ManuelW/esp8266-nanoleaf-webserver
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jason Coon 2016-03-12 11:28:33 -06:00
parent b9398eac51
commit 0d3d32258d
3 changed files with 91 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
data/index.htm
View File

@ -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>

24
data/js/scripts.js
View File

@ -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;
}

47
esp8266-fastled-webserver.ino
View File

@ -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));