ESP8266 Community Forum

- Thu Jan 17, 2019 8:50 pm #80123

Code to have the browser not send additional requests, until the current ones are in, is what I planned to do to compensate for this.

Would you be able to advise me on how I can go about this? As in should I be trying to code this in hte .ino sketch or the htm?

I have not done this yet. I had done some playing around with the ESP8266 as a general web server. Html code, some css for styling. And while it worked it had a bunch of hiccups because of the number of files I was trying to access.

Browsers take a generic page and fire off as many requests as possible. And the ESP can't handle that. After I did some digging I found that there are ways to make web pages smarter. Not to load images below the ones that are currently in the viewable screen area. This is pretty important when a web page is loading with a limited bandwidth connection.

For example, viewing a page with a cell phone. There is no good reason to load pictures at the bottom of a page until the top ones have been loaded. And the person viewing it might not want to go further, after they have seen what was on the top of the page, and decided that it wasn't what they were interested in.

Do a search for Lazy Loaders. That is a term for code that delays loading information because it may really not be needed.

I put on hold doing fancy web page stuff as it looked like it was going to take a lot of time to learn what I needed to know, html, css, javascript. I decided to get hardware in place before I worry about the presentation.

EDIT:

With normal web development html, css, javascript, are all separate files, for a lot of good reasons. But with the limited connection capability of the ESP8266 it makes more sense to integrate everything into one file, if there are other requests that need to be made. Like for images.

If you know that there will be reliable internet, then having non changing files served from other servers. But in my case I want it all on the ESP as I want it to work even without internet.

- Thu Jan 17, 2019 9:29 pm #80124 I certainly agree on the amount of learning needed. I spent the best part of 2 months in 2017 going from knowing nothing to being able to get html/javascript with ajax working, it really is a nightmare if it's not your day job. Still I guess that's true of C/C++ and everything else too if you're not expert at it.

On the subject of tips & tricks:
1. To speed up throughput of serving files I always gzip them when placing on spiffs. Not only saving space it very much speeds up the transfer given they are mostly text, well unless you have images of course!
2. Common/basic html/css/etc that I use a lot and that doesn't change I convert the gzip to a hex dump (linux xxd command) and then create a byte array stored in code - this is then served instead of a file when getting the request. This means you don't need to copy these files to spiffs for every new board, and I use it mainly for the spiffs file browser related things.

- Fri Jan 18, 2019 11:02 am #80136 Thanks again QuickFix!

Code: Select allYou should build in some debug-to-serial routines that dumps the request when a GET-request is made and what your code is doing in response to that.


Ok, totally happy and able to learn via doing for this project to work. At the same time I'm a bit of a novice...To build in the debug -to-serial routines I'm assuming that is in my .ino sketch?

Also, I'll have to read up on GET-requests but do do you mean, do serial outputs (error) message so I can determine where my issues is?

- Fri Jan 18, 2019 11:05 am #80138

Code to have the browser not send additional requests, until the current ones are in, is what I planned to do to compensate for this.

Would you be able to advise me on how I can go about this? As in should I be trying to code this in hte .ino sketch or the htm?

I have not done this yet. I had done some playing around with the ESP8266 as a general web server. Html code, some css for styling. And while it worked it had a bunch of hiccups because of the number of files I was trying to access.

Browsers take a generic page and fire off as many requests as possible. And the ESP can't handle that. After I did some digging I found that there are ways to make web pages smarter. Not to load images below the ones that are currently in the viewable screen area. This is pretty important when a web page is loading with a limited bandwidth connection.

For example, viewing a page with a cell phone. There is no good reason to load pictures at the bottom of a page until the top ones have been loaded. And the person viewing it might not want to go further, after they have seen what was on the top of the page, and decided that it wasn't what they were interested in.

Do a search for Lazy Loaders. That is a term for code that delays loading information because it may really not be needed.

I put on hold doing fancy web page stuff as it looked like it was going to take a lot of time to learn what I needed to know, html, css, javascript. I decided to get hardware in place before I worry about the presentation.

EDIT:

With normal web development html, css, javascript, are all separate files, for a lot of good reasons. But with the limited connection capability of the ESP8266 it makes more sense to integrate everything into one file, if there are other requests that need to be made. Like for images.

If you know that there will be reliable internet, then having non changing files served from other servers. But in my case I want it all on the ESP as I want it to work even without internet.

Thanks Ruby...I'll check out Lazy Loaders ...Just to be clear on what I'm trying to acheive

When user connects to ESP wifi:

1. An image appears in the captive portal page (no text, just one image).
2. ESP is totally offline.
3. BTW it's for an art installation,..hence there weird specifications