Go Down

Topic: A little lost... (Read 2283 times) previous topic - next topic


...can someone point the way to a reliable page where I can learn about designing or writing the actual page that the Ethernet shield serves up? I have experience writing web pages (need to relearn for html5) so I know most of the tags, but writing sketches for the shield...little confusing. As well, is it possible to write html, store it on an sd card, and use the shield to serve it up? I am under the impression that one cannot use wiznet and sd simultaneously...
At any rate, I just need help on finding info on how to write the sketch to design the webpage it serves. I've been using other peoples code to play with my shield, but im ready to write my own...


I actually just did a little searching, and think I kinda get it...if anyone has any useful tips or suggestions, im always open and always appreciate the assistance!
Very glad to have finally acquired the Ethernet shield!


Think about what is actually happening when somebody visits a web page

A TCP connection is made (over port 80 for websites, MOST of the time), you'll have to setup the Ethernet shield to open up port 80 and listen for this connection

a HTTP "GET" request is sent from the browser, specifying the page that they are looking for (there are other headers, like user agent, but we don't care for now)

your Arduino needs to catch this request, parse it, figure out which file is being requested

your Arduino needs to read the file from the SD card, at this point, you MUST know the file size in order to generate a proper content length for the next step

send the HTTP response header back, this usually includes the status code (404 for page not found, 200 for success, 500 for internal server error, etc), the data type is an important field, and so is content length

send the data from the SD card after content length is sent, I suggest doing it in 512 byte chunks (caching it in RAM from the SD card before sending it from RAM to Ethernet shield) because that's the size of any single read operation of a SD card, and it's also the sector size, most SD/FAT libraries use 512 bytes. To answer your question, the two devices cannot work simultaneously.

You can try playing with "developer tools" of your web browser, if it supports viewing HTTP headers. Or use a tool called Fiddler2.

Or you can find a library that does all this for you. But if you have POST requests, or any query strings in the GET request, you'll need to learn how to handle them manually. Cookies, user agent, error codes, these things all require you to understand HTTP


Quick tips: like below, use the single quote ' in the html instead of the double quote ", and use the F() function to put the static lines of text into program memory instead of the limited ram space.

Code: [Select]

client.println(F("<center><font color ='deepskyblue' >THE ROOM IS NOW - *DARK* - </font></center>") );
Google forum search: Use Google Search box in upper right side of this page.
Why I like my 2005 Rio Yellow Honda S2000  https://www.youtube.com/watch?v=pWjMvrkUqX0


Awesome. Thanks, zoomkat! This was most helpful!  :)


Thanks zoomkat. Didn't know about the F() command - will help me in future projects. Thanks!   XD


I totally missed the F() part. I actually did just write up a simple test page (with black background, white text, etc) just to make sure I still remembered HTML, and wrote it into the sketch. It seems a bit tedious, though, but you cleared a lot up for me and I appreciate it!  I'll definitely remember the F() tag for next time, when I get it down, but this is a great starting point for me. Thanks again!

Go Up