diff --git a/Field.h b/Field.h
index af72b68ec5f7e8f40d37eabdac6c550f0de246a2..47eb0d17f74785a7bc6187400c106437e2807c81 100644
--- a/Field.h
+++ b/Field.h
@@ -101,28 +101,4 @@ String getFieldsJson(FieldList fields, uint8_t count) {
return json;
}
-/*
- String json = "[";
-
- json += "{\"name\":\"power\",\"label\":\"Power\",\"type\":\"Boolean\",\"value\":" + String(power) + "},";
- json += "{\"name\":\"brightness\",\"label\":\"Brightness\",\"type\":\"Number\",\"value\":" + String(brightness) + "},";
-
- json += "{\"name\":\"pattern\",\"label\":\"Pattern\",\"type\":\"Select\",\"value\":" + String(currentPatternIndex) + ",\"options\":[";
- for (uint8_t i = 0; i < patternCount; i++)
- {
- json += "\"" + patterns[i].name + "\"";
- if (i < patternCount - 1)
- json += ",";
- }
- json += "]},";
-
- json += "{\"name\":\"autoplay\",\"label\":\"Autoplay\",\"type\":\"Boolean\",\"value\":" + String(autoplay) + "},";
- json += "{\"name\":\"autoplayDuration\",\"label\":\"Autoplay Duration\",\"type\":\"Number\",\"value\":" + String(autoplayDuration) + "},";
-
- json += "{\"name\":\"solidColor\",\"label\":\"Color\",\"type\":\"Color\",\"value\":\"" + String(solidColor.r) + "," + String(solidColor.g) + "," + String(solidColor.b) +"\"},";
-
- json += "{\"name\":\"cooling\",\"label\":\"Cooling\",\"type\":\"Number\",\"value\":" + String(cooling) + "},";
- json += "{\"name\":\"sparking\",\"label\":\"Sparking\",\"type\":\"Number\",\"value\":" + String(sparking) + "}";
-
- json += "]";
-*/
+// EOF
diff --git a/Fields.h b/Fields.h
index c1c868d333258f3aedecb3a3b68627ef59a68a4a..67631aa00d5dc20c1bd3f28349d598b92bfe34ff 100644
--- a/Fields.h
+++ b/Fields.h
@@ -49,7 +49,13 @@ String getPatterns() {
String json = "";
for (uint8_t i = 0; i < patternCount; i++) {
- json += "\"" + patterns[i].name + "\"";
+ json += "{ \"name\": \"" + patterns[i].name + "\",";
+ json += "\"show_palette\": " + String(patterns[i].show_palette ? "true": "false") + ",";
+ json += "\"show_speed\": " + String(patterns[i].show_speed ? "true": "false") + ",";
+ json += "\"show_color_picker\": " + String(patterns[i].show_color_picker ? "true": "false") + ",";
+ json += "\"show_cooling_sparking\": " + String(patterns[i].show_cooling_sparking ? "true": "false") + ",";
+ json += "\"show_twinkle\": " + String(patterns[i].show_twinkle ? "true": "false");
+ json += "}";
if (i < patternCount - 1)
json += ",";
}
@@ -65,7 +71,7 @@ String getPalettes() {
String json = "";
for (uint8_t i = 0; i < paletteCount; i++) {
- json += "\"" + paletteNames[i] + "\"";
+ json += "{ \"name\": \"" + paletteNames[i] + "\"}";
if (i < paletteCount - 1)
json += ",";
}
diff --git a/data/js/app.js b/data/js/app.js
index 19cc8a93309544c6ff99a79960c60c499c9ec95e..7e58b87e6ae23c83ca5d14521715d73357cd1736 100644
--- a/data/js/app.js
+++ b/data/js/app.js
@@ -11,6 +11,8 @@ var postValueTimer = {};
var ignoreColorChange = false;
+var patternData = {};
+
var ws = new ReconnectingWebSocket('ws://' + address + ':81/', ['arduino']);
ws.debug = true;
@@ -44,6 +46,9 @@ $(document).ready(function() {
} else if (field.type == "Setting") {
handleSetting(field);
}
+ if (field.name == "pattern") {
+ patternData = field;
+ }
});
$(".minicolors").minicolors({
@@ -54,6 +59,8 @@ $(document).ready(function() {
inline: true
});
+ updateDisplayedFields();
+
$("#status").html("Ready");
})
.fail(function(errorThrown) {
@@ -158,7 +165,7 @@ function addSelectField(field) {
select.attr("id", id);
for (var i = 0; i < field.options.length; i++) {
- var optionText = field.options[i];
+ var optionText = field.options[i].name;
var option = $("<option></option>");
option.text(optionText);
option.attr("value", i);
@@ -170,6 +177,9 @@ function addSelectField(field) {
select.change(function() {
var value = template.find("#" + id + " option:selected").index();
postValue(field.name, value);
+ if (field.name == "pattern") {
+ updateDisplayedFields(value);
+ }
});
var previousButton = template.find(".btn-previous");
@@ -183,6 +193,9 @@ function addSelectField(field) {
value = count - 1;
select.val(value);
postValue(field.name, value);
+ if (field.name == "pattern") {
+ updateDisplayedFields(value);
+ }
});
nextButton.click(function() {
@@ -193,6 +206,9 @@ function addSelectField(field) {
value = 0;
select.val(value);
postValue(field.name, value);
+ if (field.name == "pattern") {
+ updateDisplayedFields(value);
+ }
});
$("#form").append(template);
@@ -389,6 +405,9 @@ function updateFieldValue(name, value) {
} else if (type == "Select") {
var select = group.find(".form-control");
select.val(value);
+ if (name == "pattern") {
+ updateDisplayedFields(value);
+ }
} else if (type == "Color") {
var input = group.find(".form-control");
input.val("rgb(" + value + ")");
@@ -488,3 +507,58 @@ function rgbToComponents(rgb) {
return components;
}
+
+function updateDisplayedFields(pattern = null) {
+
+ // default value
+ var pattern_index = patternData.value;
+
+ if (pattern != null) {
+ pattern_index = pattern;
+ }
+
+ this_pattern = patternData.options[pattern_index];
+
+ if (this_pattern.show_palette == false) {
+ $("#form-group-palette").addClass("hidden");
+ } else {
+ $("#form-group-palette").removeClass("hidden");
+ }
+
+ if (this_pattern.show_speed == false) {
+ $("#form-group-speed").addClass("hidden");
+ } else {
+ $("#form-group-speed").removeClass("hidden");
+ }
+
+ if (this_pattern.show_color_picker == false) {
+ $("#form-group-section-solidColor").addClass("hidden");
+ $("#colorPaletteTemplate").addClass("hidden");
+ $("#form-group-solidColor").addClass("hidden");
+ } else {
+ $("#form-group-section-solidColor").removeClass("hidden");
+ $("#colorPaletteTemplate").removeClass("hidden");
+ $("#form-group-solidColor").removeClass("hidden");
+ }
+
+ if (this_pattern.show_cooling_sparking == false) {
+ $("#form-group-section-fire").addClass("hidden");
+ $("#form-group-cooling").addClass("hidden");
+ $("#form-group-sparking").addClass("hidden");
+ } else {
+ $("#form-group-section-fire").removeClass("hidden");
+ $("#form-group-cooling").removeClass("hidden");
+ $("#form-group-sparking").removeClass("hidden");
+ }
+
+ if (this_pattern.show_twinkle == false) {
+ $("#form-group-section-twinkles").addClass("hidden");
+ $("#form-group-twinkleSpeed").addClass("hidden");
+ $("#form-group-twinkleDensity").addClass("hidden");
+ } else {
+ $("#form-group-section-twinkles").removeClass("hidden");
+ $("#form-group-twinkleSpeed").removeClass("hidden");
+ $("#form-group-twinkleDensity").removeClass("hidden");
+ }
+
+}
\ No newline at end of file
diff --git a/esp8266-fastled-iot-webserver.ino b/esp8266-fastled-iot-webserver.ino
index 2b400ec4da4b9330c376279c7610bf3bf51fbace..6da584e5471c7404200c662f77765dd3abfcfba8 100644
--- a/esp8266-fastled-iot-webserver.ino
+++ b/esp8266-fastled-iot-webserver.ino
@@ -460,6 +460,12 @@ typedef Pattern PatternList[];
typedef struct {
Pattern pattern;
String name;
+ // these settings decide if certain controls/fields are displayed in the web interface
+ bool show_palette;
+ bool show_speed;
+ bool show_color_picker;
+ bool show_cooling_sparking;
+ bool show_twinkle;
} PatternAndName;
typedef PatternAndName PatternAndNameList[];
@@ -471,123 +477,123 @@ typedef PatternAndName PatternAndNameList[];
PatternAndNameList patterns = {
// Time patterns
- #if DEVICE_TYPE == 2
- { displayTimeStatic, "Time" },
- { displayTimeColorful, "Time Colorful" },
- { displayTimeGradient, "Time Gradient" },
- { displayTimeGradientLarge, "Time Gradient large" },
- { displayTimeRainbow, "Time Rainbow" },
- #endif
+#if DEVICE_TYPE == 2 // palet speed color spark twinkle
+ { displayTimeStatic, "Time", true, true, true, false, false},
+ { displayTimeColorful, "Time Colorful", true, true, true, false, false},
+ { displayTimeGradient, "Time Gradient", true, true, true, false, false},
+ { displayTimeGradientLarge, "Time Gradient large", true, true, true, false, false},
+ { displayTimeRainbow, "Time Rainbow", true, true, true, false, false},
+#endif
-#if DEVICE_TYPE == 3
- { pride_Waves, "Pride Waves" },
- { pride_Rings, "Pride Rings" },
- { colorWaves_hori, "Vertical Waves" },
- { colorWaves_vert, "Color Rings" },
- { rainbow_vert, "Vertical Rainbow" },
+#if DEVICE_TYPE == 3 // palet speed color spark twinkle
+ { pride_Waves, "Pride Waves", true, true, true, false, false},
+ { pride_Rings, "Pride Rings", true, true, true, false, false},
+ { colorWaves_hori, "Vertical Waves", true, true, true, false, false},
+ { colorWaves_vert, "Color Rings", true, true, true, false, false},
+ { rainbow_vert, "Vertical Rainbow", true, true, true, false, false},
#endif
- // animation patterns
- { pride, "Pride" },
- { colorWaves, "Color Waves" },
- { rainbow, "Horizontal Rainbow" },
- { rainbowSolid, "Solid Rainbow" },
- { confetti, "Confetti" },
- { sinelon, "Sinelon" },
- { bpm, "Beat" },
- { juggle, "Juggle" },
- { fire, "Fire" },
- { water, "Water" },
- { strobe, "Strobe"},
- { rainbow_strobe, "Rainbow Strobe"},
- { smooth_rainbow_strobe, "Smooth Rainbow Strobe"},
-
- // DigitalJohnson patterns
- { rainbowRoll, "Rainbow Roll" },
- { rainbowBeat, "Rainbow Beat" },
- { randomPaletteFades, "Palette Fades" },
- { rainbowChase, "Rainbow Chase" },
- { randomDots, "Rainbow Dots" },
- { randomFades, "Rainbow Fades" },
- { policeLights, "Police Lights" },
- { glitter, "Glitter" },
- { snowFlakes, "Snow Flakes" },
- { lightning, "Lightning"},
-
- // twinkle patterns
- { rainbowTwinkles, "Rainbow Twinkles" },
- { snowTwinkles, "Snow Twinkles" },
- { cloudTwinkles, "Cloud Twinkles" },
- { incandescentTwinkles, "Incandescent Twinkles" },
-
- // TwinkleFOX patterns
- { retroC9Twinkles, "Retro C9 Twinkles" },
- { redWhiteTwinkles, "Red & White Twinkles" },
- { blueWhiteTwinkles, "Blue & White Twinkles" },
- { redGreenWhiteTwinkles, "Red, Green & White Twinkles" },
- { fairyLightTwinkles, "Fairy Light Twinkles" },
- { snow2Twinkles, "Snow 2 Twinkles" },
- { hollyTwinkles, "Holly Twinkles" },
- { iceTwinkles, "Ice Twinkles" },
- { partyTwinkles, "Party Twinkles" },
- { forestTwinkles, "Forest Twinkles" },
- { lavaTwinkles, "Lava Twinkles" },
- { fireTwinkles, "Fire Twinkles" },
- { cloud2Twinkles, "Cloud 2 Twinkles" },
- { oceanTwinkles, "Ocean Twinkles" },
+ // animation patterns // palet speed color spark twinkle
+ { pride, "Pride", false, false, false, false, false},
+ { colorWaves, "Color Waves", false, false, false, false, false},
+ { rainbow, "Horizontal Rainbow", false, false, false, false, false},
+ { rainbowSolid, "Solid Rainbow", false, false, false, false, false},
+ { confetti, "Confetti", false, false, false, false, false},
+ { sinelon, "Sinelon", true, true, false, false, false},
+ { bpm, "Beat", true, true, false, false, false},
+ { juggle, "Juggle", false, false, false, false, false},
+ { fire, "Fire", false, false, false, true, false},
+ { water, "Water", false, false, false, true, false},
+ { strobe, "Strobe", false, true, true, false, false},
+ { rainbow_strobe, "Rainbow Strobe", false, true, false, false, false},
+ { smooth_rainbow_strobe, "Smooth Rainbow Strobe", false, true, false, false, false},
+
+ // DigitalJohnson patterns // palet speed color spark twinkle
+ { rainbowRoll, "Rainbow Roll", false, false, false, false, false},
+ { rainbowBeat, "Rainbow Beat", false, true, false, false, false},
+ { randomPaletteFades, "Palette Fades", true, false, false, false, false},
+ { rainbowChase, "Rainbow Chase", false, false, false, false, false},
+ { randomDots, "Rainbow Dots", false, false, false, false, false},
+ { randomFades, "Rainbow Fades", false, false, false, false, false},
+ { policeLights, "Police Lights", false, false, false, false, false},
+ { glitter, "Glitter", false, true, false, false, false},
+ { snowFlakes, "Snow Flakes", false, false, false, false, false},
+ { lightning, "Lightning", false, false, false, false, false},
+
+ // twinkle patterns // palet speed color spark twinkle
+ { rainbowTwinkles, "Rainbow Twinkles", false, false, false, false, false},
+ { snowTwinkles, "Snow Twinkles", false, false, false, false, false},
+ { cloudTwinkles, "Cloud Twinkles", false, false, false, false, false},
+ { incandescentTwinkles, "Incandescent Twinkles", false, false, false, false, false},
+
+ // TwinkleFOX patterns // palet speed color spark twinkle
+ { retroC9Twinkles, "Retro C9 Twinkles", false, false, false, false, true},
+ { redWhiteTwinkles, "Red & White Twinkles", false, false, false, false, true},
+ { blueWhiteTwinkles, "Blue & White Twinkles", false, false, false, false, true},
+ { redGreenWhiteTwinkles, "Red, Green & White Twinkles", false, false, false, false, true},
+ { fairyLightTwinkles, "Fairy Light Twinkles", false, false, false, false, true},
+ { snow2Twinkles, "Snow 2 Twinkles", false, false, false, false, true},
+ { hollyTwinkles, "Holly Twinkles", false, false, false, false, true},
+ { iceTwinkles, "Ice Twinkles", false, false, false, false, true},
+ { partyTwinkles, "Party Twinkles", false, false, false, false, true},
+ { forestTwinkles, "Forest Twinkles", false, false, false, false, true},
+ { lavaTwinkles, "Lava Twinkles", false, false, false, false, true},
+ { fireTwinkles, "Fire Twinkles", false, false, false, false, true},
+ { cloud2Twinkles, "Cloud 2 Twinkles", false, false, false, false, true},
+ { oceanTwinkles, "Ocean Twinkles", false, false, false, false, true},
#ifndef REMOVE_VISUALIZATION
// Visualization Patterns
-#if DEVICE_TYPE == 1 // Matrix
- { RainbowVisualizer, "Rainbow Visualization"},
- { SingleColorVisualizer, "Single Color Visualization"},
- { RainbowVisualizerDoubleSided, "Rainbow Visualization Outside"},
- { SingleColorVisualizerDoubleSided, "Single Color Visualization Outside"},
+#if DEVICE_TYPE == 1 // Matrix // palet speed color spark twinkle
+ { RainbowVisualizer, "Rainbow Visualization", true, true, true, false, false},
+ { SingleColorVisualizer, "Single Color Visualization", true, true, true, false, false},
+ { RainbowVisualizerDoubleSided, "Rainbow Visualization Outside", true, true, true, false, false},
+ { SingleColorVisualizerDoubleSided, "Single Color Visualization Outside" true, true, true, false, false},
#ifdef AddLogoVisualizers
- #if LENGTH == 32 && HEIGHT == 8 // Logo Visualizers
- { HbzVisualizerRainbow, "Hbz Visualizer Spectrum"},
- { HbzVisualizerWhite, "Hbz Visualizer"},
+ #if LENGTH == 32 && HEIGHT == 8 // Logo Visualizers
+ { HbzVisualizerRainbow, "Hbz Visualizer Spectrum", true, true, true, false, false},
+ { HbzVisualizerWhite, "Hbz Visualizer", true, true, true, false, false},
#endif
#endif
#endif
- #ifdef DEVICE_TYPE // Generic Visualization Patterns
- { vuMeterSolid, "Solid Volume Visualizer"},
- { vuMeterStaticRainbow, "Static Rainbow Volume Visualizer"},
- { vuMeterRainbow, "Flowing Rainbow Volume Visualizer"},
- { vuMeterTriColor, "Tri-Color Volume Visualizer"},
- { RefreshingVisualizer, "Wave Visualizer"},
- { CentralVisualizer, "Center Visualizer"},
- { SolidColorDualTone, "Solid-Color Pair Bullet Visualizer"},
- { SolidColorComplementary, "Solid-Color Complementary Bullet Visualizer"},
- { BluePurpleBullets, "Blue/Purple Bullet Visualizer"},
- { BulletVisualizer, "Beat-Bullet Visualization"},
- //{ RainbowPeaks, "Rainbow Peak Visualizer"}, // broken
- { RainbowBassRings, "Bass Ring Visualizer"},
- { RainbowKickRings, "Kick Ring Visualizer"},
- //{ TrailingBulletsVisualizer, "Trailing Bullet Visualization"}, // obsolete
- //{ BrightnessVisualizer, "Brightness Visualizer"}, // broken
- { RainbowBandVisualizer, "Rainbow Band Visualizer"},
- { SingleColorBandVisualizer, "Single Color Band Visualizer"},
+ #ifdef DEVICE_TYPE // Generic Visualization Patterns // palet speed color spark twinkle
+ { vuMeterSolid, "Solid Volume Visualizer", true, true, true, false, false},
+ { vuMeterStaticRainbow, "Static Rainbow Volume Visualizer", true, true, true, false, false},
+ { vuMeterRainbow, "Flowing Rainbow Volume Visualizer", true, true, true, false, false},
+ { vuMeterTriColor, "Tri-Color Volume Visualizer", true, true, true, false, false},
+ { RefreshingVisualizer, "Wave Visualizer", true, true, true, false, false},
+ { CentralVisualizer, "Center Visualizer", true, true, true, false, false},
+ { SolidColorDualTone, "Solid-Color Pair Bullet Visualizer", true, true, true, false, false},
+ { SolidColorComplementary, "Solid-Color Complementary Bullet Visualizer", true, true, true, false, false},
+ { BluePurpleBullets, "Blue/Purple Bullet Visualizer", true, true, true, false, false},
+ { BulletVisualizer, "Beat-Bullet Visualization", true, true, true, false, false},
+ //{ RainbowPeaks, "Rainbow Peak Visualizer"}, // broken
+ { RainbowBassRings, "Bass Ring Visualizer", true, true, true, false, false},
+ { RainbowKickRings, "Kick Ring Visualizer", true, true, true, false, false},
+ //{ TrailingBulletsVisualizer, "Trailing Bullet Visualization"}, // obsolete
+ //{ BrightnessVisualizer, "Brightness Visualizer"}, // broken
+ { RainbowBandVisualizer, "Rainbow Band Visualizer", true, true, true, false, false},
+ { SingleColorBandVisualizer, "Single Color Band Visualizer", true, true, true, false, false},
#endif
#endif
-#if DEVICE_TYPE == 4
- { NanoleafWaves, "Nanoleaf Wave Visualizer" },
- { NanoleafBand, "Nanoleaf Rainbow Band Visualizer" },
- { NanoleafSingleBand, "Nanoleaf Solid Color Band Visualizer" },
+#if DEVICE_TYPE == 4 // palet speed color spark twinkle
+ { NanoleafWaves, "Nanoleaf Wave Visualizer", true, true, true, false, false},
+ { NanoleafBand, "Nanoleaf Rainbow Band Visualizer", true, true, true, false, false},
+ { NanoleafSingleBand, "Nanoleaf Solid Color Band Visualizer", true, true, true, false, false},
#endif
- #ifdef ENABLE_SERIAL_AMBILIGHT
- { ambilight, "⋆Serial Ambilight"},
+ #ifdef ENABLE_SERIAL_AMBILIGHT // palet speed color spark twinkle
+ { ambilight, "⋆Serial Ambilight", true, true, true, false, false},
#endif // ENABLE_SERIAL_AMBILIGHT
#ifdef SOUND_SENSOR_SUPPORT
- { soundReactive, "Sound Reactive" },
+ { soundReactive, "Sound Reactive", true, true, true, false, false},
#endif
- { showSolidColor, "Solid Color" }
+ { showSolidColor, "Solid Color", false, false, true, false, false}
};