Go Down

Topic: Webduino, getting data from SD card (Read 4414 times) previous topic - next topic

simmete

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

Krodal

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.

simmete

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

Code: [Select]

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: [Select]
//load image from SD
  webserver.addCommand("image.png", &image);


another way was using the bytearray of image:
Code: [Select]
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: [Select]
/* register our image output command */
  webserver.addCommand("ledOff.png", &imageLedOff);

Krodal

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

simmete

thanks, you are right!

Do you mean somethiing like this?

Code: [Select]
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();
}

PaulS

Code: [Select]
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?

simmete

can U please better explain?
thanks.

PaulS

Quote
can U please better explain?

When you learn to spell.


Krodal

I have this code:
Code: [Select]

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.

PaulS

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?

simmete

Quote
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 :-)

novolo


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.


I've seen multiple examples on how to do this but never with webduino.
Would you please give us an example on how to define all content types and how to detect a tag in the website to input our sensor data?

Thank you and sorry to revive an old post!

Go Up