next topic »

[on:]

Ciao!
I am writing a simple applicatin that shows sensor's state on a webpage.
I am using webuino and averythings seems work.
I want right now include some images on my page and I would like store these on the SD card.
I car read and write there but I cannot undestand the way to address this images.
Any idea/example?
Thanks in advance

[Reply #1 on:]

You mean getting an image into the webpage ?

Try first to load the webpage from the SD card.
There are examples for that.
Adding pictures is simple after that.
The browser sends a 'GET' request for the image, and you return it with the proper content type header.
The content type for html is "text/html" and for a *.jpg file it is "image/jpeg".
If you expand that for all types, you can have a whole site with subdirectories, javascript and stylesheets on the SD card.

I have my webpage on the SD card, and use the text "$1" and "$2" in the webpage where the Arduino will place its own data.
So while loading the webpage from the SD card, I check for '$' and read the number after it.

[Reply #2 on:]

I found my way:
using webduino and use a GET command:

Code:

P(http200Ok) ="HTTP/1.1 200 OK";
P(httpContentPNG) = "Content-Type: image/png";

void image(WebServer &server, WebServer::ConnectionType type, char *url_tail, bool tail_complete){
  loadImage(server, "image.png");
}

void loadImage(WebServer &server, char* image){
  server.printP(http200Ok);
  server.println();
  server.printP(httpContentPNG);
  server.println();
  server.println();
  myFile = SD.open(image, FILE_READ);
  int16_t c;
  while ((c = myFile.read()) >= 0) {
    server.print((char)c);
  }
  myFile.close();
}

and on setup function:

Code:

//load image from SD
  webserver.addCommand("image.png", &image);

another way was using the bytearray of image:

Code:

void imageLedOff(WebServer &server, WebServer::ConnectionType type, char *url_tail, bool tail_complete){
  P(ledOff) ={
    0x89,0x50,0x4e,0x47,0x0d,0x0a,0x1a,0x0a,0x00,0x00,0x00,0x0d,0x49,0x48,0x44,0x52,0x00,
    0x00,0x00,0x10,0x00,0x00,0x00,0x10,0x08,0x02,0x00,0x00,0x00,0x90,0x91,0x68,0x36,
    0x00,0x00,0x00,0x01,0x73,0x52,0x47,0x42,0x00,0xae,0xce,0x1c,0xe9,0x00,0x00,0x00,
    0x09,0x70,0x48,0x59,0x73,0x00,0x00,0x0b,0x13,0x00,0x00,0x0b,0x13,0x01,0x00,0x9a,
    0x9c,0x18,0x00,0x00,0x00,0x07,0x74,0x49,0x4d,0x45,0x07,0xdc,0x08,0x06,0x0d,0x13,
    0x34,0xf4,0xb0,0x44,0x9d,0x00,0x00,0x00,0x22,0x74,0x45,0x58,0x74,0x43,0x6f,0x6d,
    0x6d,0x65,0x6e,0x74,0x00,0x43,0x72,0x65,0x61,0x74,0x65,0x64,0x20,0x77,0x69,0x74,
    0x68,0x20,0x47,0x49,0x4d,0x50,0x20,0x6f,0x6e,0x20,0x61,0x20,0x4d,0x61,0x63,0x87,
    0xa8,0x77,0x43,0x00,0x00,0x00,0x16,0x49,0x44,0x41,0x54,0x28,0xcf,0x63,0xfc,0xcf,
    0x40,0x1a,0x60,0x62,0x18,0xd5,0x30,0xaa,0x61,0xd8,0x6a,0x00,0x00,0x40,0x2e,0x01,
    0x1f,0xb1,0x90,0xc2,0x4d,0x00,0x00,0x00,0x00,0x49,0x45,0x4e,0x44,0xae,0x42,0x60,0x82
  };

  if (type == WebServer::POST){
    // ignore POST data
    server.httpFail();
    return;
  }

  // for a GET or HEAD, send the standard "it's all OK headers" but identify our data as a PNG file
  server.httpSuccess("image/png");

  // we don't output the body for a HEAD request
  if (type == WebServer::GET){
    server.writeP(ledOff, sizeof(ledOff));
  }
}

and on setup function:

Code:

/* register our image output command */
  webserver.addCommand("ledOff.png", &imageLedOff);

[Reply #3 on:]

If the file could not be found on the SD card, you could return an 404 error.

[Reply #4 on:]

thanks, you are right!

Do you mean somethiing like this?

Code:

myFile = SD.open(image, FILE_READ);
if(myFile){
  server.printP(http200Ok);
  server.println();
  server.printP(httpContentPNG);
  server.println();
  server.println();
  int16_t c;
  while ((c = myFile.read()) >= 0) {
    server.print((char)c);
  }
  myFile.close();
}
else{
 server.println("HTTP/1.1 404 Not Found");
 server.printP(httpContentPNG);
 server.println();
 server.println();
}

[Reply #5 on:]

Code:

server.println("HTTP/1.1 404 Not Found");
 server.printP(httpContentPNG);

We couldn't find the file, but here it is anyway.

Do you see a problem with this?

[Reply #6 on:]

can U please better explain?
thanks.

[Reply #7 on:]

can U please better explain?

When you learn to spell.

[Reply #8 on:]

 
can you please better explain?

[Reply #9 on:]

I have this code:

Code:

if (error404)
{
      // The file didn't exist, or it was not a file after all.
      Serial.println(F("Error 404 !"));
     
      pClient->println(F("HTTP/1.1 404 Not Found"));
      pClient->println(F("Content-Type: text/html"));
      pClient->println();
      pClient->println(F("<h2>File Not Found !</h2>"));
}

The pClient is a pointer: EthernetClient *pClient;
The error404 is an error flag: boolean error404;
So an error is returned and a message is displayed.

[Reply #10 on:]

You have two lines of code that I highlighted. The first says that the requested file does not exist. The next one says what? It says that the remaining data is to be interpreted as "Content-Type: image/png".

There being no more data, why are you saying that it is image data?

[Reply #11 on:]

You have two lines of code that I highlighted. The first says that the requested file does not exist. The next one says what? It says that the remaining data is to be interpreted as "Content-Type: image/png".

There being no more data, why are you saying that it is image data?

Clear.

P.S. sorry for the spelling :-)