Hi,
I have a sketch I use as a starting point for most of my esp based projects which I thought might be of interest as it serves some basic pages with control buttons etc. in the easiest way I know of, I have tried to make it as easy to follow/modify as I can (it works with esp8266 or esp32)
@alanesq
... can you please check all your examples against valid html?
and if you allow me to give some personal feedback:
I dislike the mixed usage of print with and without F-Makro
Serial.println(F("---------------------------------------"));
Serial.println( "ESP type: " + ESPType );
the single client.prints
the mixed uppercase/lowercase html tags
client.write("
<iframe id='dataframe' height=150; width=600; frameborder='0';></iframe>\n");
I doubt that this has to be String object
String JavaRefreshTime = "500"; // time delay when loading url in web pages (Javascript)
anyhow - I appreciate your efforts.
noiasca:
@alanesq ... can you please check all your examples against valid html? https://validator.w3.org/
Thanks, that should help me out a lot with my HTML
I am always glad to receive some feedback (I am in no doubt my coding is far from perfect as I have never had any formal training, just dabble...)
update: Yep, I have just been through it and fixed my worst mistakes - that site has helped me a lot
remaining errors now are just obsolete things which I will look at later if I can modify them..
I have updated my sketch in the github
Currently I'm starting learning HTML from scratch and following YouTube tutorials.
Learned some basics of html tools are just the design of the webpage. Then CSS for adding style to the html parts.
I guess next step is to learn the esp8266 html items and to use them in Arduino C++ programming.
wolfrose:
Currently I'm starting learning HTML from scratch and following YouTube tutorials.
Learned some basics of html tools are just the design of the webpage. Then CSS for adding style to the html parts.
I guess next step is to learn the esp8266 html items and to use them in Arduino C++ programming.
I think the trick is to start small, just create something very basic. Then as you learn more you can keep modifying/adding to it and getting more advanced as you experiment with what you can do with it all. Otherwise you will just get overwhelmed.
I have learned lots of new stuff myself today and so going back applying it to all my sketches...
If you have a look at this: W3Schools Tryit Editor
I find it very helpful to experiment with basic html stuff there
And they have lots of examples to look at: HTML Tutorial
Then the tool I have just been introduced to looks like it will be excellent for telling us where we are going wrong 
i.e. https://validator.w3.org/
Then see if you can transfer your creation to your ESP8266
Basically you will be writing C++ code to "print out" the required HTML, it gets really confusing when you start using Javascript as you are writing Javascript inside HTML inside C++ - lol
before sending the HTML itself.
Didn't get this part.
HTTP concerns itself with URLs like:
https://forum.arduino.cc/index.php?topic=705974.0, and with a bunch of sideband data that you don't normally see when you open a URL in a web browser.
And this too.
So when your ESP8266 sends an html "hello world" to your web browser in reply to a GET message, what actually happens is that your web browser sends this over the wire:
GET /HelloWorld.html HTTP/1.1
Accept: text/html
Connection: close
Hello, World! > ```And the web browser replies with:HTTP/1.1 200 OK
Content-Type:text/html
Connection: close
I just more time to get this transaction protocol.
Are the: GET - Accept - Connection
part of of any HTTP transaction ? That any process should take these 3 steps ?
Of course, in a real request there will be much more than just the Accept and Connection headers.
Do you mean "real request" the ones that carry information like, numbers, images ... etc. ?
As noiasca says, the ESP libraries contain stuff to make it far simpler to do the HTTP side of what a webserver needs to do - which can be very much more complicated than in this toy example here.
I've been to ESP libraries, opened some core libraries then also opened some wifi libraries and I think esp libraries are much more complex than Arduino libraries. I need a lot of time to start understand what each library is for which is very important concept to learn, then I should understand the set of functions of any library.
I know those libraries are well done and developed by very professional programmers. What I want to learn at this point is with all the libraries in the esp libraries, for me, what can I do ? can I do something new ? are there some areas in esp development that hasn't been covered ?
But I guess what is more important now, is to forget about the libraries and write some application projects with the esp.
But even though the ESP takes care of much of it, it helps to understand what it is doing for you, especially if you want to do a complicated website with multiple pages and error handling.
So what you mean I should learn about ?
You can work on just the HTML side of things by editing HTML files on your computer and opening them with a web browser. There's a world of stuff to learn, depending on how fancy you want your pages to be.
Yeah there are a lot of stuff I want to learn.
The area of esp is really rich and I think esp is much more powerful than an arduino combined with nrf24l01 module.
But I want to write a library for the nrf by myself and I hope working in esp world should improve my skills and experience in wifi.
When it comes to serving those files and having the arduino do something useful when a user hits a button, you have to deal with HTTP. At the very least, you need to know that the stuff after a question mark in the URL is called the "parameters".
Didn't get to this far of knowing what things are connected to HTTP. Or I just should care about the "parameters" ?[/quote]
wolfrose:
Didn't get this part.
And this too.
Oh dear.
wolfrose:
Are the: GET - Accept - Connection
part of of any HTTP transaction ? That any process should take these 3 steps ?
An HTTP request may be GET, POST, PUT, DELETE, OPTIONS, or HEAD. GET is the correct request when a url is being requested with no request body.
Accept and Connection are HTTP headers. There are a number of possible headers - these are two of them. An HTTP request is a request line, a number of headers, a blank line, and a message body (if any). An HTTP response is a response line, a number of hearders, a blank line, and a response body (if any).
The protocol is described here: RFC 2616 - Hypertext Transfer Protocol -- HTTP/1.1 . But if you use the esp8266 library, you don't need to do this explicitly.
wolfrose:
Do you mean "real request" the ones that carry information like, numbers, images ... etc. ?
By "real request", I meant a request coming from a real web browser. A request coming from a real web browser will have many more headers. To see what's going on, most web browsers will show a developer screen when you hit F12, which will allow you to view the web traffic.
wolfrose:
then I should understand the set of functions of any library.
The problem is that you can't understnd the set of functions of a library without understanding what the libraries are about. The 'set header' function doen't mean anything to you until you know that HTTP requests and responses have headers.
wolfrose:
I know those libraries are well done and developed by very professional programmers. What I want to learn at this point is with all the libraries in the esp libraries, for me, what can I do ? can I do something new ? are there some areas in esp development that hasn't been covered ?But I guess what is more important now, is to forget about the libraries and write some application projects with the esp.
Cool. In that case you will be writing your own response lines and headers, and parsing the input request url and headers. It's a big job, which is why people prefer to use libraries.
wolfrose:
So what you mean I should learn about ?
Write some web pages - html, css.
Write a website in PHP or something, something with simple forms, to understand HTTP, parameters, POST and GET.
wolfrose:
But I want to write a library for the nrf by myself and I hope working in esp world should improve my skills and experience in wifi.
Well, it will do that at least.
wolfrose:
Didn't get to this far of knowing what things are connected to HTTP. Or I just should care about the "parameters" ?
I guess the answer is: "work your way through a tutorial".
hi,
I've got some ideas about html and css, how to design a simple UI web server for the esp.
I think web servers for esp shouldn't be so good looking website but rather a simple basic one to run the task.
An HTTP request may be GET, POST, PUT, DELETE, OPTIONS, or HEAD. GET is the correct request when a url is being requested with no request body.
Is there a source to learn the basics of http requests ? and which one should I start http requests for esp or desktop ?
Accept and Connection are HTTP headers. There are a number of possible headers - these are two of them. An HTTP request is a request line, a number of headers, a blank line, and a message body (if any). An HTTP response is a response line, a number of hearders, a blank line, and a response body (if any).
OK, I think I can get the main framework of http transactions, how to start a transaction, what to do and ending the connection. Is it actually 3 stages transaction for any http transaction ?
The protocol is described here: RFC 2616 - Hypertext Transfer Protocol -- HTTP/1.1 . But if you use the esp8266 library, you don't need to do this explicitly.
wow thanks for the link I've gone through like %5 of that page, it's tough right now as I'm really new to these stuff.
I know I heard about proxy, http .. etc. before doing any programming but now it's the time for me to really start learning about them.
To see what's going on, most web browsers will show a developer screen when you hit F12, which will allow you to view the web traffic.
What content should I learn when I hit F12 ? JavaScript or html ? Is http requests possible to view ?
The problem is that you can't understnd the set of functions of a library without understanding what the libraries are about.
Yep, and that got really big when I started browsing ESP8266 core/drive libraries for Arduino, the wifi stuff is really big and wide.
I think that who wrote these libraries, because that depends, it could be companies, professional programmers that part of ESP enthusiast programmers in ESP community. There are libraries that is in thousands of lines.
I wondered in that situation for writing a code for something that is complicated like the esp, I was surprised of how complicated the set of functions for a library.
These are the set of libraries in Github page:
1st column is the name of the library
2nd column for the I guess the last update of that library
3rd column is the time of the last update
Now I know they all shouldn't work together at the same time to do something. I guess for a simple example that switch on/off LED, at least II need these libraries:
ESP8266HTTPClient
ESP8266WebServer
ESP8266WiFi
Am I right ?
The 'set header' function doen't mean anything to you until you know that HTTP requests and responses have headers.
Cool. In that case you will be writing your own response lines and headers, and parsing the input request url and headers. It's a big job, which is why people prefer to use libraries.
Write some web pages - html, css.
I was working the last days with html, css. Did colors, tables, divs. For esp I would do something really simple just the main parts of the project; sensors readings div and control switches, leds div.
Write a website in PHP or something, something with simple forms, to understand HTTP, parameters, POST and GET.
Well, it will do that at least.
RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
Aha, so PHP is a good source to learn HTTP. Well thanks for this tip
I guess the answer is: "work your way through a tutorial".
Yep, and you helped me with many learning key points for me to start with in the huge programming area.