Skip to content

Commit c963afa

Browse files
jasoncoonjasoncoon
committed
Finished porting parameters
Added twinkle speed & density fields Added palette cycle & duration fields Reorganized fields Combined RGB and gradient palettes Added fire & water patterns Added pride & colorwaves patterns
1 parent fa642e2 commit c963afa

File tree

7 files changed

+910
-81
lines changed

7 files changed

+910
-81
lines changed

‎README.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,22 @@ Control addressable LEDs with an ESP32 via a web browser over Wi-Fi.
99
* [x] [Sam's multi-core support](https://github.com/samguyer/FastLED/blob/master/examples/DemoReelESP32/DemoReelESP32.ino)
1010
* [x] Static web app file serving from SPIFFS
1111
* [x] Ability to adjust these parameters via the HTTP REST API:
12-
* [x] power
12+
* [x] power on/off
1313
* [x] brightness
1414
* [x] pattern
15-
* [x] autoplay
15+
* [x] autoplay on/off
1616
* [x] autoplay duration
1717
* [x] speed
1818
* [x] palette
19+
* [x] auto palette cycling
20+
* [x] palette duration
1921
* [x] solid color
2022
* [x] twinkle speed/density
23+
* [x] fire cooling/sparking
2124

2225
### Currently Lacking:
2326
* [ ] Setting storage in EEPROM
2427
* [ ] More patterns
25-
* [ ] More parameters
26-
* [ ] fire cooling/sparking
2728

2829
## Requirements
2930

‎data/index.htm

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
<!DOCTYPE html>
21
<html>
32

43
<head>
5-
<meta charset="utf-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
87
<title>ESP32 FastLED Web Server by Evil Genius Labs</title>
98

109
<!-- request CSS from internet CDN -->
11-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
1211
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css" integrity="sha256-4wnSkPYU5B4yngAlx/rEb8LdfMah4teUth4AfhGEuaY=" crossorigin="anonymous" />
1312

1413
<!-- request CSS from the ESP32 web server -->
1514
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
1615
<!-- <link rel="stylesheet" href="css/jquery.minicolors.min.css"> -->
1716

18-
<link rel="stylesheet" href="css/styles.css">
17+
<!-- <link rel="stylesheet" href="/css/styles.css" /> -->
1918

20-
<link rel="icon" href="images/atom196.png">
19+
<link rel="icon" href="images/atom196.png" />
2120
</head>
2221

23-
<body>
22+
<body style="padding-bottom: 70px;">
2423

2524
<nav class="navbar navbar-default navbar-static-top" id="top" role="banner">
2625
<div class="container">
@@ -90,7 +89,7 @@
9089
<div id="selectTemplate" class="form-group">
9190
<label class="col-sm-2 control-label"></label>
9291
<div class="col-sm-8">
93-
<select class="form-control"><select>
92+
<select class="form-control"></select>
9493
</div>
9594
<div class="col-sm-2">
9695
<div class="btn-group" role="group" aria-label="...">
@@ -111,43 +110,43 @@
111110
<div class="col-sm-10">
112111
<div class="btn-group btn-group-justified" role="group">
113112
<div class="btn-group" role="group">
114-
<button type="button" class="btn btn-default btn-color" style="background: #FF0000;" title="Red">&nbsp;</button>
113+
<button type="button" class="btn btn-default btn-color" style="background: #FF0000;" title="Red">&#160;</button>
115114
</div>
116115
<div class="btn-group" role="group">
117-
<button type="button" class="btn btn-default btn-color" style="background: #FF8000;" title="Orange">&nbsp;</button>
116+
<button type="button" class="btn btn-default btn-color" style="background: #FF8000;" title="Orange">&#160;</button>
118117
</div>
119118
<div class="btn-group" role="group">
120-
<button type="button" class="btn btn-default btn-color" style="background: #FFFF00;" title="Yellow">&nbsp;</button>
119+
<button type="button" class="btn btn-default btn-color" style="background: #FFFF00;" title="Yellow">&#160;</button>
121120
</div>
122121
<div class="btn-group" role="group">
123-
<button type="button" class="btn btn-default btn-color" style="background: #80FF00;" title="Chartreuse">&nbsp;</button>
122+
<button type="button" class="btn btn-default btn-color" style="background: #80FF00;" title="Chartreuse">&#160;</button>
124123
</div>
125124
<div class="btn-group" role="group">
126-
<button type="button" class="btn btn-default btn-color" style="background: #00FF00;" title="Green">&nbsp;</button>
125+
<button type="button" class="btn btn-default btn-color" style="background: #00FF00;" title="Green">&#160;</button>
127126
</div>
128127
<div class="btn-group" role="group">
129-
<button type="button" class="btn btn-default btn-color" style="background: #00FF80;" title="Spring Green">&nbsp;</button>
128+
<button type="button" class="btn btn-default btn-color" style="background: #00FF80;" title="Spring Green">&#160;</button>
130129
</div>
131130
<div class="btn-group" role="group">
132-
<button type="button" class="btn btn-default btn-color" style="background: #00FFFF;" title="Cyan">&nbsp;</button>
131+
<button type="button" class="btn btn-default btn-color" style="background: #00FFFF;" title="Cyan">&#160;</button>
133132
</div>
134133
<div class="btn-group" role="group">
135-
<button type="button" class="btn btn-default btn-color" style="background: #0080FF;" title="Azure">&nbsp;</button>
134+
<button type="button" class="btn btn-default btn-color" style="background: #0080FF;" title="Azure">&#160;</button>
136135
</div>
137136
<div class="btn-group" role="group">
138-
<button type="button" class="btn btn-default btn-color" style="background: #0000FF;" title="Blue">&nbsp;</button>
137+
<button type="button" class="btn btn-default btn-color" style="background: #0000FF;" title="Blue">&#160;</button>
139138
</div>
140139
<div class="btn-group" role="group">
141-
<button type="button" class="btn btn-default btn-color" style="background: #8000FF;" title="Violet">&nbsp;</button>
140+
<button type="button" class="btn btn-default btn-color" style="background: #8000FF;" title="Violet">&#160;</button>
142141
</div>
143142
<div class="btn-group" role="group">
144-
<button type="button" class="btn btn-default btn-color" style="background: #FF00FF;" title="Magenta">&nbsp;</button>
143+
<button type="button" class="btn btn-default btn-color" style="background: #FF00FF;" title="Magenta">&#160;</button>
145144
</div>
146145
<div class="btn-group" role="group">
147-
<button type="button" class="btn btn-default btn-color" style="background: #FF0080;" title="Rose">&nbsp;</button>
146+
<button type="button" class="btn btn-default btn-color" style="background: #FF0080;" title="Rose">&#160;</button>
148147
</div>
149148
<div class="btn-group" role="group">
150-
<button type="button" class="btn btn-default btn-color" style="background: #FFFFFF;" title="White">&nbsp;</button>
149+
<button type="button" class="btn btn-default btn-color" style="background: #FFFFFF;" title="White">&#160;</button>
151150
</div>
152151
</div>
153152
</div>

‎esp32-fastled-webserver.ino

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,23 +41,38 @@ uint8_t autoplayDuration = 10;
4141
unsigned long autoPlayTimeout = 0;
4242

4343
uint8_t currentPatternIndex = 0; // Index number of which pattern is current
44-
uint8_t currentPaletteIndex = 0;
44+
4545
uint8_t gHue = 0; // rotating "base color" used by many of the patterns
4646

4747
uint8_t power = 1;
4848
uint8_t brightness = 64;
4949

5050
uint8_t speed = 30;
5151

52+
// COOLING: How much does the air cool as it rises?
53+
// Less cooling = taller flames. More cooling = shorter flames.
54+
// Default 50, suggested range 20-100
55+
uint8_t cooling = 50;
56+
57+
// SPARKING: What chance (out of 255) is there that a new spark will be lit?
58+
// Higher chance = more roaring fire. Lower chance = more flickery fire.
59+
// Default 120, suggested range 50-200.
60+
uint8_t sparking = 120;
61+
5262
CRGB solidColor = CRGB::Blue;
5363

64+
uint8_t cyclePalettes = 0;
65+
uint8_t paletteDuration = 10;
66+
uint8_t currentPaletteIndex = 0;
67+
unsigned long paletteTimeout = 0;
68+
5469
#define ARRAY_SIZE(A) (sizeof(A) / sizeof((A)[0]))
5570

5671
#define DATA_PIN 12
5772
//#define CLK_PIN 4
5873
#define LED_TYPE WS2812B
5974
#define COLOR_ORDER GRB
60-
#define NUM_LEDS 14
75+
#define NUM_LEDS 4 * 14
6176
CRGB leds[NUM_LEDS];
6277

6378
#define FRAMES_PER_SECOND 120
@@ -181,7 +196,7 @@ void setup() {
181196

182197
// -- Create the FastLED show task
183198
xTaskCreatePinnedToCore(FastLEDshowTask, "FastLEDshowTask", 2048, NULL, 2, &FastLEDshowTaskHandle, FASTLED_SHOW_CORE);
184-
199+
185200
autoPlayTimeout = millis() + (autoplayDuration * 1000);
186201
}
187202

@@ -197,14 +212,21 @@ void loop()
197212
patterns[currentPatternIndex].pattern();
198213

199214
// do some periodic updates
200-
EVERY_N_MILLISECONDS( 20 ) {
215+
EVERY_N_MILLISECONDS(40) {
216+
// slowly blend the current palette to the next
217+
nblendPaletteTowardPalette(currentPalette, targetPalette, 8);
201218
gHue++; // slowly cycle the "base color" through the rainbow
202219
}
203220

204221
if (autoplay == 1 && (millis() > autoPlayTimeout)) {
205222
nextPattern();
206223
autoPlayTimeout = millis() + (autoplayDuration * 1000);
207224
}
225+
226+
if (cyclePalettes == 1 && (millis() > paletteTimeout)) {
227+
nextPalette();
228+
paletteTimeout = millis() + (paletteDuration * 1000);
229+
}
208230
}
209231

210232
// send the 'leds' array out to the actual LED strip
@@ -218,8 +240,13 @@ void loop()
218240
void nextPattern()
219241
{
220242
// add one to the current pattern number, and wrap around at the end
221-
currentPatternIndex = (currentPatternIndex + 1) % ARRAY_SIZE( patterns);
243+
currentPatternIndex = (currentPatternIndex + 1) % patternCount;
222244
}
223245

246+
void nextPalette()
247+
{
248+
currentPaletteIndex = (currentPaletteIndex + 1) % paletteCount;
249+
targetPalette = palettes[currentPaletteIndex];
250+
}
224251

225252

‎fields.h

Lines changed: 58 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ String setPalette(String value) {
8888
currentPaletteIndex = value.toInt();
8989
if (currentPaletteIndex < 0) currentPaletteIndex = 0;
9090
else if (currentPaletteIndex >= paletteCount) currentPaletteIndex = paletteCount - 1;
91+
targetPalette = palettes[currentPaletteIndex];
9192
return String(currentPaletteIndex);
9293
}
9394

@@ -129,12 +130,35 @@ String getAutoplayDuration() {
129130

130131
String setAutoplayDuration(String value) {
131132
autoplayDuration = value.toInt();
132-
if (autoplayDuration < 0) autoplayDuration = 0;
133+
if (autoplayDuration < 1) autoplayDuration = 1;
133134
else if (autoplayDuration > 255) autoplayDuration = 255;
134135
autoPlayTimeout = millis() + (autoplayDuration * 1000);
135136
return String(autoplayDuration);
136137
}
137138

139+
String getCyclePalettes() {
140+
return String(cyclePalettes);
141+
}
142+
143+
String setCyclePalettes(String value) {
144+
cyclePalettes = value.toInt();
145+
cyclePalettes = cyclePalettes == 0 ? 0 : 1;
146+
paletteTimeout = millis() + (paletteDuration * 1000);
147+
return String(cyclePalettes);
148+
}
149+
150+
String getPaletteDuration() {
151+
return String(paletteDuration);
152+
}
153+
154+
String setPaletteDuration(String value) {
155+
paletteDuration = value.toInt();
156+
if (paletteDuration < 1) paletteDuration = 1;
157+
else if (paletteDuration > 255) paletteDuration = 255;
158+
paletteTimeout = millis() + (paletteDuration * 1000);
159+
return String(paletteDuration);
160+
}
161+
138162
String getSolidColor() {
139163
return String(solidColor.r) + "," + String(solidColor.g) + "," + String(solidColor.b);
140164
}
@@ -166,6 +190,24 @@ String setSolidColor(String value) {
166190
return String(solidColor.r) + "," + String(solidColor.g) + "," + String(solidColor.b);
167191
}
168192

193+
String getCooling() {
194+
return String(cooling);
195+
}
196+
197+
String setCooling(String value) {
198+
cooling = value.toInt();
199+
return String(cooling);
200+
}
201+
202+
String getSparking() {
203+
return String(sparking);
204+
}
205+
206+
String setSparking(String value) {
207+
sparking = value.toInt();
208+
return String(sparking);
209+
}
210+
169211
String getTwinkleSpeed() {
170212
return String(twinkleSpeed);
171213
}
@@ -195,14 +237,25 @@ String setTwinkleDensity(String value) {
195237
FieldList fields = {
196238
{ "power", "Power", BooleanFieldType, 0, 1, getPower, NULL, setPower },
197239
{ "brightness", "Brightness", NumberFieldType, 1, 255, getBrightness, NULL, setBrightness },
240+
{ "speed", "Speed", NumberFieldType, 1, 255, getSpeed, NULL, setSpeed },
241+
242+
{ "patternSection", "Pattern", SectionFieldType },
198243
{ "pattern", "Pattern", SelectFieldType, 0, patternCount, getPattern, getPatterns, setPattern },
244+
{ "autoplay", "Cycle Patterns", BooleanFieldType, 0, 1, getAutoplay, NULL, setAutoplay },
245+
{ "autoplayDuration", "Pattern Duration", NumberFieldType, 1, 255, getAutoplayDuration, NULL, setAutoplayDuration },
246+
247+
{ "paletteSection", "Palette", SectionFieldType },
199248
{ "palette", "Palette", SelectFieldType, 0, paletteCount, getPalette, getPalettes, setPalette },
200-
{ "speed", "Speed", NumberFieldType, 1, 255, getSpeed, NULL, setSpeed },
201-
{ "autoplaySection", "Autoplay", SectionFieldType },
202-
{ "autoplay", "Autoplay", BooleanFieldType, 0, 1, getAutoplay, NULL, setAutoplay },
203-
{ "autoplayDuration", "Autoplay Duration", NumberFieldType, 0, 255, getAutoplayDuration, NULL, setAutoplayDuration },
249+
{ "cyclePalettes", "Cycle Palettes", BooleanFieldType, 0, 1, getCyclePalettes, NULL, setCyclePalettes },
250+
{ "paletteDuration", "Palette Duration", NumberFieldType, 1, 255, getPaletteDuration, NULL, setPaletteDuration },
251+
204252
{ "solidColorSection", "Solid Color", SectionFieldType },
205253
{ "solidColor", "Color", ColorFieldType, 0, 255, getSolidColor, NULL, setSolidColor },
254+
255+
{ "fire", "Fire & Water", SectionFieldType },
256+
{ "cooling", "Cooling", NumberFieldType, 0, 255, getCooling, NULL, setCooling },
257+
{ "sparking", "Sparking", NumberFieldType, 0, 255, getSparking, NULL, setSparking },
258+
206259
{ "twinklesSection", "Twinkles", SectionFieldType },
207260
{ "twinkleSpeed", "Twinkle Speed", NumberFieldType, 0, 8, getTwinkleSpeed, NULL, setTwinkleSpeed },
208261
{ "twinkleDensity", "Twinkle Density", NumberFieldType, 0, 8, getTwinkleDensity, NULL, setTwinkleDensity },

0 commit comments

Comments
 (0)