search

harlequin-tech / WiFlyHQ

WiFly RN-XV Arduino Library
Other
110 stars 68 forks source link

Web server with SD card problem, don't send index.htm correctly with <img> tag #33

Open Sterpa opened 10 years ago

Sterpa commented 10 years ago

Hi! I'm trying to write a simple web server on which when the GET /index.htm request got, the index.htm file from SD card will be send. index.htm containing tag <img src="pic.jpg" /> and is very simple pic.jpg is also on the SD card.

<!DOCTYPE html>
<html>
    <head>
        <title>Arduino SD Card Web Page</title>
    </head>
    <body>
        <h1>Arduino SD Card Page with Image</h1>
        <img src="pic.jpg" />
    </body>
</html>

I took as a basis an example code from the library WifFyHQ - httpserver, and added a few designs from the following example - http://startingelectronics.com/tutorials/arduino/ethernet-shield-web-server-tutorial/SD-card-web-server-image/

for request "GET /index.htm" and sending index.htm:

else if (strncmp_P(buf, PSTR("GET /index.htm"), 14) {
    wifly.println("HTTP/1.1 200 OK");
    wifly.println("Content-Type: text/html");
    wifly.println("Connnection: close");
    wifly.println();
    webFile = SD.open("index.htm");        // open web page file
    if (webFile) {
        while(webFile.available()) {
        wifly.write(webFile.read());       // send web page to client
    }
    webFile.close();
    wifly.println();
}

and for next request "GET /pic.jpg" and sending pic.jpg:

else if (strncmp_P(buf, PSTR("GET /pic.jpg"), 12) {
    wifly.println("HTTP/1.1 200 OK");
    wifly.println();
    webFile = SD.open("pic.jpg");        // open web page file
    if (webFile) {
        while(webFile.available()) {
        wifly.write(webFile.read());     // send web page to client
    }
    webFile.close();
    wifly.println();
}

Unfortunately, after receiving index.htm browser does not send a "GET /pic.jpg" request to pic.jpg, and waiting for something..., and the picture on the page is not mapped.

However, if you add an <img src="pic.jpg" /> tag to the native code of the "httpserver" sample (third line from the bottom), where the body is sent as chunks, the browser receives the page correctly and then sends a request for a picture, the picture is unloaded and its perfectly mapped on a page:

    /* Send the header direclty with print */
    wifly.println(F("HTTP/1.1 200 OK"));
    wifly.println(F("Content-Type: text/html"));
    wifly.println(F("Transfer-Encoding: chunked"));
    wifly.println();
    /* Send the body using the chunked protocol so the client knows when
     * the message is finished.
    wifly.sendChunkln(F("<html>"));
    wifly.sendChunkln(F("<title>WiFly HTTP Server Example</title>"));
    wifly.sendChunkln(F("<h1>"));
    wifly.sendChunkln(F("<p>Hello</p>"));
    wifly.sendChunkln(F("</h1>"));
    wifly.sendChunkln(F("<form name=\"input\" action=\"/\" method=\"post\">"));
    wifly.sendChunkln(F("Username:"));
    wifly.sendChunkln(F("<input type=\"text\" name=\"user\" />"));
    wifly.sendChunkln(F("<input type=\"submit\" value=\"Submit\" />"));
    wifly.sendChunkln(F("</form>")); 
    wifly.sendChunkln(F("<img src='pic.jpg' />")); 
    wifly.sendChunkln(F("</html>"));
    wifly.sendChunkln();

Also separately works fine direct request for a picture "https://wiflyip/pic.jpg", it is unloaded and displayed in the browser well.

What am I doing wrong with the SD card, why wifly.write(webFile.read()) constraction do not works correctly with index.htm file on SD card and with WiFlyHQ?