I've updated the ESP8266 FastLED Web Server example to include a palette selector.

Archive FastLED Archive
21

@Chris_Cooper thanks, glad you like it!

You should be able to add new color buttons in just the index.html file. The js just sends the backgroundColor of the button that’s clicked.

22

Well that’s fancy as hell. Nice! I’ll try it out tonight. Also, I lied about understanding the patterns (and how they differ from the fastled animations I’ve used before) but I want to try to figure that out myself.

Thanks again!

23

@Jason_Coon Alas, I have failed to add the simplest of patterns. What the heck am I doing wrong?

void newpattern()
{

uint8_t fadeAmount = 50; // Set the amount to fade
uint8_t brightnesstart = 0;

for(uint16_t r = 0 ; r < NUM_LEDS; r++ )
{
leds[r].setRGB(255,0,0); // setRGB functions works by setting
// (RED value 0-255, GREEN value 0-255, BLUE value 0-255)
// RED = setRGB(255,0,0)
// GREEN = setRGB(0,255,0)
leds[r].fadeLightBy(brightnesstart);
}

brightnesstart = brightnesstart + fadeAmount;
// reverse the direction of the fading at the ends of the fade:
if(brightnesstart == 0 || brightnesstart == 255)
{
fadeAmount = -fadeAmount ;
}
}

24

@Chris_Cooper what’s wrong with it? Does it compile, but just doesn’t look right?

25

Oh, sorry. Yeah. It compiles fine but doesn’t seem to work. Basically it just turns all pixels red and they sit there. I think it needs some kind of delay between loops but I don’t know how to do that.

26

@Chris_Cooper no problem, just making sure. Looks like brightnessstart starts out at 0, then you’re adding 50 to it, then checking to see if it’s equal to 255, which it’ll never be. uint8_t rolls over from 255 to 0, so after the fifth time through, it’ll be 250. The next time through it’ll roll over to 45.

27

@Jason_Coon Thanks! Seems like it should still be doing something though. I think I’m going to start over and just try to get the whole strip to “breath” and then come back to a breathing chase and finally a breathing chase with red white and blue. I built four 10 watt RGB floods with RobG’s kits that I’m hoping to use this pattern for. I think it’ll look pretty neat in the trees! If you have any other tips, I’m all ears.

28

Take a look at some examples that use sin8 and beatsin8, they’re great for “breathing” effects, and much simpler than most other manual increment/decrement methods.

29

@Jason_Coon Oh, something weird I did want to ask you though. I tried pulling your “juggle” pattern over from the v1.1 fork, added the pattern above with a new name and then down below with the actual patterns. When I tried to compile it though, I got this strange error about ColorWave not being referenced…even though I didn’t modify that one at all. Am i missing something about the correct way to add a pattern? Does the order matter or something?

30

@Chris_Cooper order shouldn’t matter. Share the code somewhere and post a link here and I can take a look later tonight.

31

Thanks again @Jason_Coon , I think I realized my mistake with the error compiling. I suspect I didn’t paste the entire juggle pattern and likely didn’t close it which would have screwed up many things. That’s my theory, I’ll have to test it at home as well. Also, thanks for the tip on sin8 and beatsin8, I’ll try to wrap my brain around how they work. I may start with the Sinelon pattern and try to use it with a 3 color palette for red white and blue rather than HSV…if that’s even possible. I made a gist of my current code that you were trying to help me with before, maybe you can see where I went wrong. https://gist.github.com/coopooc/7743e653487a9cc722621cf40cd49149

32

I’m all over you today Jason. Thanks for the sweet code.

33

Thank you @Jason_Coon very much for this work. I am lately playing a lot with FastLED and the esp8266 webserver. The interface is just nice and responsive.

I know this discussion is quite old but I think the question fits quite good in here.

I am able to add fields to the webserver / code and such. I successfully changed the behaviour to use e.g. /set?mode=4&brightness=200 … (enables me to change almost all parameters at once by e.g. my home automation server).

However, it actually seems that I am well under-educated regarding css and HTML5.

I simply would like to have a “SectionFieldType” where the name is visible as header of the particular section. In additon I would like to have such sections foldable but thats currently a bonus only.

Also, is there an easy way to set the page header / name dynamically by e.g. a specific field?

I would love to learn myself but not sure where to start from…

Thanks a lot,
Toby

34

@Jason_Coon I porting your fibbonacci project to ESP 8266. And I want as you to make palettes puts in one array.
I’m pore programmer (and English too), and I found this solution:
search alot of ready sketches I found some one, where used next code:
CRGBPalette16 Sunset_Real = Sunset_Real_gp;
In other words this construction make *_gp palettes as CRGBPalette16 like *_p (“onboard”) palettes. (as I understand)

In my code I’m predefine *gp palettes as CRGBPalette16 and add them to your arrays of *_p palettes.
Code compilles, palettes number changing periodicly. But as I see - changing just palette numbers, but not palettes themself (new palette number doesnt make new CurrentPalette).
I dont’t know does this information useful or not, but I want to help you to improve your great projects )
Thanks!