Finally picked up an ESP8266 and got it controlling a small 24 NeoPixel Ring

Archive FastLED Archive
81

@Jason_Coon Great example! Thank you very much. At the moment im digging into the code and have build my own example with a bootstrap switch button which works great. For performance I have gzipped the index.htm and the .css and .js but my Brwoser always opens a download dialog. Can you say, where I have to add what so that the browser decompresses the files. Thanks :wink:

82

Thanks, @Lars_Walpurgis ! Hrm, do your files have a .gz extension? Can you post a link to your code?

83

@Jason_Coon ​ thanks I will post it tomorrow

84

Hi jason , after two weeks of chasing the same problem im looking for help .
my project is similar to yours in a way, but also based on others, and it is working fine if i use my computer to run the web page , but if i use the ESP address most of the times it fails , and almost always fails when trying to load the CSS file .

i tried everything, purifying the css, minifying, gzip, changing load order ,… no luck

have you experienced unreliable behavior , on esp, as a good web server?

do you know if there is a way, to improve it ?

my esp, uses one CSS ( i have loaded all peaces into one), the the JQM.js , a wheelcolorpicker.js , and my own JS .
normally, all JS, loads ok, and 99_% of the time the CSS failed to load with the classical : net::ERR_CONTENT_LENGTH_MISMATCH , error

appreciate any advice,
thanks

85

@Gustavo_K Does it work if you don’t gzip the files? If the files are gzipped the file name should end in .gz (like styles.css.gz). That’s how the ESP web server knows to send it with the Content-Encoding set to gzip.

86

yes it does on the computer server, but on the ESPSERVER it complains by sending the ERR_CONTENT_LENGHTH… message when loading the page .it seams im reaching some of the ESP8266 Server limitations …

87

@Jason_Coon here is my Example.

In this example my source of code was the bootstrap switch button test.html which is in the same folder. These shows only 2 bootstrap switch buttons(no functionality). I changed the code like in your example… copied the js und css folders together. (Why have you to to that? Cant the esp handle more files?) And in the arduino sketch folder is my code with the data folder. This code and data works, but it needs a lot of time to load. At first you see 2 checkboxes than he loads the css and at least he transforms these into the switch buttons. But i think this could be faster. So I gzipped the html , css and js files. (files are in the folder data gzipped) And exchanged the two lines to: server.serveStatic("/", SPIFFS, “/test.htm.gz”);
server.serveStatic("/test.htm.gz", SPIFFS, “/test.htm.gz”);
But the webserver doesnt find a htm file. Why? And why do I have to use the two lines? Where is the difference between them?
Thanks for help!

88

@Lars_Walpurgis try it without the .gz (http://test.htm instead of http://test.htm.gz) in the calls to http://server.serveStatic. The actual file should end in .gz, but not the path passed to serveStatic.

89

Thanks @Jason_Coon it works :wink: can you answer me the question why I have to copy all css and js files in one file? And why do I need these two lines? server.serveStatic("/", SPIFFS, “/test.htm”);
server.serveStatic("/test.htm.gz", SPIFFS, “/test.htm”);
Thanks a lot!!

90

@Lars_Walpurgis You don’t have to combine the css and js, but it cuts down on the number of requests the ESP8266 has to serve. It seemed to speed up the load time.

I think the line server.serveStatic("/", SPIFFS, “/index.htm”); makes it serve the index page for requests to /, so you don’t have to type in ipaddress/htm in your browser.

You shouldn’t need the line server.serveStatic("/test.htm.gz", SPIFFS, “/test.htm”); I have no idea where that came from.

91

Hi Jason, I found very interesting the way you update the effect list on the html code at startup , could you please Give a basic explanation on how this part of the code work on both sides?
Thank you

92

Hey thanks @Gustavo_K . In esp8266-fastled-webserver.ino, line 580 (https://github.com/jasoncoon/esp8266-fastled-webserver/blob/master/esp8266-fastled-webserver.ino#L580), I build a JSON string array of the pattern names, which ends up looking like:

“patterns”: [“Pattern 1”, “Pattern 2”, …]

This list, along with all of the other current variable values exposed via HTTP REST services (brightness, color, etc), are returned with a GET request to /all.

In /data/js/scripts.js, line 94 (https://github.com/jasoncoon/esp8266-fastled-webserver/blob/master/data/js/scripts.js), the web app sends the GET request to /all and updates the controls in the web page (using jQuery). On line 110 it reads the pattern name list and adds then to the drop down list.

93

@Jason_Coon , have you ever had multiple ESPs running the webserver program at once?

94

@Chris_Creel I have three running right now. :slight_smile: Why, are you having issues?

95

Yes, unfortunately. I keep getting the same error that we were emailing about. It looked like it might not be connecting to an ip, so I wondered if me having another webserver running might be the problem. Here’s the error again in case anyone has an idea. This is running the tree_v2 master:

Heap: 25072
Boot Vers: 31
CPU: 160
SDK: 1.5.3(aec24ac9)
Chip ID: 2887081
Flash ID: 1589487
Flash Size: 16777216
Vcc: 65535

scandone
state: 0 -> 2 (b0)
state: 2 -> 3 (0)
state: 3 -> 5 (10)
add 0
aid 2
cnt
FS File: /css/bootstrap.min.css, size: 121093
FS File: /css/jquery.minicolors.min.css, size: 96597
FS File: /css/simple.css, size: 237
FS File: /css/styles.css, size: 31
FS File: /edit.htm, size: 7887
FS File: /favicon.ico, size: 4286
FS File: /fonts/glyphicons.eot, size: 20127
FS File: /fonts/glyphicons.svg, size: 108738
FS File: /fonts/glyphicons.ttf, size: 45404
FS File: /fonts/glyphicons.woff, size: 23424
FS File: /fonts/glyphicons.woff2, size: 18028
FS File: /images/atom196.png, size: 5469
FS File: /index.htm, size: 11096
FS File: /js/app.js, size: 12933
FS File: /js/bootstrap.min.js, size: 37045
FS File: /js/jquery-3.1.1.min.js, size: 86709
FS File: /js/jquery.minicolors.min.js, size: 15463
FS File: /js/r-websocket.min.js, size: 3100
FS File: /js/simple.js, size: 6261
FS File: /simple.htm, size: 2203

Hostname: ESP8266-2c0da9
Connecting to House of Jack
HTTP web server started
Web socket server started
state: 5 -> 2 (2c0)
rm 0
reconnect
state: 2 -> 0 (0)
f r0, scandone
state: 0 -> 2 (b0)
state: 2 -> 3 (0)
state: 3 -> 5 (10)
add 0
aid 2
cnt
state: 5 -> 2 (2c0)
rm 0
reconnect
state: 2 -> 0 (0)
f r0, scandone
state: 0 -> 2 (b0)
state: 2 -> 3 (0)
state: 3 -> 5 (10)
add 0
aid 2
cnt

96

Yeah, looks like it’s still not getting an IP address. Tried disconnecting the board and bringing it closer to your access point? This might be a case where you need to use the external antenna connector: https://forum.wemos.cc/topic/849/wemos-d1-mini-pro-wifi-antenna/7

97

Hmm. I was sitting five feet away from the router. This error was from a spare. The one running on the roof is still peachy. I’ll keep messing with it. Thanks

98

I’m sorry if this is a stupid question but how do you include animations like, for example, Fire 2012 or others?