Go Down

Topic: Loading a picture from SD card to a webpage with W5100 and SDCARD (Read 1 time) previous topic - next topic


Hello everybody, okay?

          I'm having a problem uploading images to the sd card for my web application. As this link that I found here in the forum, was taught a way however, tried to run the code here and he says that libraries are old and even I trying to switch to the new, did not work. Summarizing what I want, it would be something like this:

#include <SPI.h>
#include <Ethernet.h>

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1, 177);

// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);

void setup() {
// Open serial communications and wait for port to open:
   while (!Serial) {
    ; // wait for serial port to connect. Needed for Leonardo only

  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  Serial.print("server is at ");

void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connnection: close");
          client.println("<!DOCTYPE HTML>");
      //********** PROBLEM IS HERE********************************************
          client.println("<img  src=\"image.jpg\" >");

        if (c == '\n') {
          // you're starting a new line
          currentLineIsBlank = true;
        else if (c != '\r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
    // give the web browser time to receive the data
    // close the connection:
    Serial.println("client disonnected");

the devices I'm using are a arduino mega 2560, sd card reader and an ethernet shield with the W5100. Have searched the internet the solution before disturbing you. Help me! Thank you!

PS: old link for a similar subject: http://arduino.cc/forum/index.php/topic,49407.0.html


Please format your code...

Regarding what you want to do: When your browser hits against this simple server, the server merely spits out some HTML code. Part of that code is you <img> tag, with a reference to your image (which I assume is on the SD card). Your browser then interprets the HTML to render it; when it gets to the <img> tag, what it does then is why you aren't getting this to work - because it gets real complicated, really quickly.

Your browser at that point, reaches back out to the server (the link you have given in the tag is called a "relative link", by the way), and makes a second request for the image.

So - in order for your sketch to work - you need to modify your sketch to intercept this request, validate that it is an image request, then use the information gained to look up the image on the SD card and dump the image data back to the browser in the proper format. You are, in effect, needing to write a nearly full-blown web server application on the Arduino:


There is an example; specifically, the code at the bottom (by Alessandro Calzavara and Alberto Capponi) contains a function for outputting an image from the FLASH memory - you would need to extend this to read the request from the browser, interpret it (ie, get the filename/path), and use that to pull the data from the SD card. Your code will likely need to be lean and mean to fit everything you'll need in memory (ie, the SD card library, the SPI library, the ethernet stuff, etc).

The above may or may not be the best example - in fact, maybe somebody has already taken that library and made something similar to what you want, or has created their own that does what you need. Do some more research - you may find that you don't have to reinvent the wheel (or you may find that you do!)...

This isn't a trivial project - you may also want to research how to implement simple web servers for the PC, as well as how HTTP and such actually work in the context of the browser and web server. There's a lot of stuff going on under the hood when you browse the web; you only need to implement a small subset of it, but you still need to do it right (and in a very tiny memory space) to get it to work at all.

EDIT: Just noticed in your post (as I was posting) that you are using a Mega - so memory issues may not be as great a concern, depending on what your total application is for. Still, this only makes your memory footprint less of a headache - it doesn't make the problem simpler...
I will not respond to Arduino help PM's from random forum users; if you have such a question, start a new topic thread.

Go Up