having some error in load image from SD card into arduino HTML

hello, I'm new in arduino. hope anyone can help me to guide me and show me the way to solve my problem. I'm having some logic error which is when i'm try to load image from my SD Card,the HTML output get what i want but it also show some symbols or words that i really don't know what's the problem with my code.

i attach the image of the logic error..

here is my code:

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

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 6 }; // ip in lan
EthernetServer server(80); //server port

String readString; 
String s;
String ss;
//////////////////////

void setup(){

  pinMode(2, OUTPUT);
  pinMode(3, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(6, OUTPUT); //pin selected to control
  pinMode(7, OUTPUT); //pin selected to control
  pinMode(8, OUTPUT); //pin selected to control
  pinMode(9, OUTPUT);
  pinMode(11, OUTPUT);
  pinMode(12, OUTPUT);
  pinMode(13, OUTPUT);
  //start Ethernet
  

  //enable serial data print 
  Serial.begin(9600); 
  // disable w5100 while setting up SD
  pinMode(10,OUTPUT);
  digitalWrite(10,HIGH);
  Serial.print("Starting SD..");
  if(!SD.begin(4)) Serial.println("failed");
  else Serial.println("ok");
  
  Serial.println("server multi pin button test 1.0"); // so I can keep track of what is loaded
  
  Ethernet.begin(mac, ip);
  server.begin();
}

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string 
          readString += c; 
          //Serial.print(c);
        } 

        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString); //print to serial monitor for debuging 

          client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");
          client.println("Connection: keep-alive");
          client.println();
          
          File myFile = SD.open("kpm.jpg");
          
          if(myFile){
            byte clientBuf[64];
            int clientCount = 0;

            while(myFile.available())
            {
              clientBuf[clientCount] = myFile.read();
              clientCount++;

              if(clientCount > 63)
              {
                // Serial.println("Packet");
                client.write(clientBuf,64);
                clientCount = 0;
              }
              
            }
            if(clientCount > 0) client.write(clientBuf,clientCount);            
            // close the file:
            myFile.close();
          }
 
          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<TITLE>LED NOTIFY STATUS</TITLE>");
          client.println("</HEAD>");
          client.println("<body style='background-color:rgb(255,255,204);'>");
          client.println("<img src= kpm.jpg >");             
          
          client.println("&nbsp;<font color=black><H1 align=center>LECTURER STATUS</font> </H1>

");
          client.println("*******PLEASE DOUBLE CLICK ON THE BUTTON ********");
          // For simple testing, pin 5, 6, 7, and 8 are used in buttons
         client.println("<font color=black><H2 align=center>Day</font> </H2>");
      

          // mousedown buttons
          client.println("<input type=button value=ISNIN onmousedown=location.href='/?ISNIN2;'>"); 
          client.println("<input type=button value=SELASA onmousedown=location.href='/?SELASA3;'>");
          client.println("<input type=button value=RABU onmousedown=location.href='/?RABU5;'>");
          client.println("<input type=button value=KHAMIS onmousedown=location.href='/?KHAMIS6;'>");    
          client.println("<input type=button value=JUMAAT onmousedown=location.href='/?JUMAAT7;'>");
          client.println("&nbsp;<input type=button value='ALL OFF' onmousedown=location.href='/?off4;'>

"); 
          client.println(s);
          
          client.println("<font color=black><H2 align=center>STATUS</font> </H2>");
          client.println("<input type=button value=ADA onmousedown=location.href='/?ada8;'>"); 
          client.println("<input type=button value=KELAS onmousedown=location.href='/?kelas9;'>");
          client.println("<input type=button value=BERCUTI onmousedown=location.href='/?bcuti@;'>");
          client.println("<input type=button value=MESYUARAT onmousedown=location.href='/?mesyuarat%;'>");    
          client.println("<input type=button value=BERTUGAS DILUAR onmousedown=location.href='/?btgsDLuar$;'>");
          client.println("&nbsp;<input type=button value='ALL OFF' onmousedown=location.href='/?off10;'>

");
          client.println(ss);
          
          client.println("</BODY>");
          client.println("</HTML>");
          
          
          delay(1);
          //stopping client
          client.stop();

          ///////////////////// control arduino pin
          if(readString.indexOf('2') >0)//checks for 2
          {
            s=("ISNIN");
            digitalWrite(2, HIGH);    // set pin 5 high
            Serial.println("Led 2 On");
            
          }
          if(readString.indexOf('3') >0)//checks for 3
          {
            s=("SELASA");
            digitalWrite(3, HIGH);    // set pin 5 low
            Serial.println("Led 3 On");
          }
          if(readString.indexOf('5') >0)//checks for 4
          {
            s=("RABU");
            digitalWrite(5, HIGH);    // set pin 6 high
            Serial.println("Led 5 On");
          }
          if(readString.indexOf('6') >0)//checks for 5
          {
             s=("KHAMIS");
            digitalWrite(6, HIGH);    // set pin 6 low
            Serial.println("Led 6 On");
          }
          if(readString.indexOf('7') >0)//checks for 6
          {
            s=("JUMAAT");
            digitalWrite(7, HIGH);    // set pin 7 high
            Serial.println("Led 7 On");
          }
           if(readString.indexOf('4') >0)//checks for 7
          {
            s=("OFF");
            digitalWrite(2, LOW);    // set pin 7 low
            digitalWrite(3, LOW);
            digitalWrite(5, LOW);
            digitalWrite(6, LOW);
            digitalWrite(7, LOW);
            Serial.println("All Led OFF");
          }         
          
          if(readString.indexOf('8') >0)//checks for 2
          {
            ss=("ADA");
            digitalWrite(8, HIGH);    // set pin 5 high
            Serial.println("Led 8 On");
          }
          if(readString.indexOf('9') >0)//checks for 3
          {
            ss=("KELAS");
            digitalWrite(9, HIGH);    // set pin 5 low
            Serial.println("Led 9 On");
          }
          if(readString.indexOf('@') >0)//checks for 4
          {
            ss=("BERCUTI");
            digitalWrite(11, HIGH);    // set pin 6 high
            Serial.println("Led 11 On");
          }
          if(readString.indexOf('%') >0)//checks for 5
          {
            ss=("MESYUARAT");
            digitalWrite(12, HIGH);    // set pin 6 low
            Serial.println("Led 12 On");
          }
           if(readString.indexOf('

please help me and teach me how...
thank you :slight_smile:

) >0)//checks for 6
          {
            ss=("BERTUGAS DI LUAR");
            digitalWrite(13, HIGH);    // set pin 7 high
            Serial.println("Led 13 On");
          }
          if(readString.indexOf('10') >0)//checks for 7
          {
            ss=("STATUS OFF");
            digitalWrite(8, LOW);    // set pin 7 low
            digitalWrite(9, LOW);
            digitalWrite(11, LOW);
            digitalWrite(12, LOW);
            digitalWrite(13, LOW);
            Serial.println("All Led OFF");
          }       
         
          //clearing string for next read
          readString="";

}
      }
    }
  }
}


please help me and teach me how...
thank you :)

![nbnbnb.JPG|1365x703](upload://pziP18rXG3jnOgfdreRpAyodYdI.jpeg)

You've got an awful lot of string literals gobbling up precious RAM.
I'd start moving those to flash, using the F macro.

Serial.println(F("server multi pin button test 1.0"));

client.println(F("<body style='background-color:rgb(255,255,204);'>")); and so on

i try to remove the string did you said,it's nothing changed the logic error still got..
do you have any solution?

sorry for my english :slight_smile:
thank you for your attention

i try to remove the string did you said,it's nothing changed the logic error still got..

The "logic error" is you sending binary data to a device that displays ASCII data and expecting something useful to happen. It did, but it was hardly of use TO YOU.

If you're usng an ds card, why not put the html on the card? There are lots of examples using html and images.

Below is some picture upload code. Note that image/jpeg is used as the content type and not text/html.

//zoomkat 12/26/12
//SD server test code
//open serial monitor to see what the arduino receives
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields

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

byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 
  192, 168, 1, 102 }; // ip in lan
byte gateway[] = { 
  192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 
  255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port
String readString; 

//////////////////////

void setup(){

  Serial.begin(9600);

  // disable w5100 while setting up SD
  pinMode(10,OUTPUT);
  digitalWrite(10,HIGH);
  Serial.print("Starting SD..");
  if(!SD.begin(4)) Serial.println("failed");
  else Serial.println("ok");

  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  //delay(2000);
  server.begin();
  Serial.println("Ready");
}

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {
          //store characters to string 
          readString += c; 
          //Serial.print(c);
        } 
        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString); //print to serial monitor for debuging 

            client.println("HTTP/1.1 200 OK"); //send new page
          //client.println("Content-Type: text/html");
          client.println("Content-Type: image/jpeg");
          //client.println("Content-Type: image/gif");
          //client.println("Content-Type: application/x-javascript");
          //client.println("Content-Type: text");

          client.println();

          //File myFile = SD.open("boom.htm");
          File myFile = SD.open("HYPNO.JPG");
          //File myFile = SD.open("BLUEH_SL.GIF");
          //File myFile = SD.open("SERVOSLD.HTM");

          if (myFile) {

            byte clientBuf[64];
            int clientCount = 0;

            while(myFile.available())
            {
              clientBuf[clientCount] = myFile.read();
              clientCount++;

              if(clientCount > 63)
              {
                // Serial.println("Packet");
                client.write(clientBuf,64);
                clientCount = 0;
              }
            }
            //final <64 byte cleanup packet
            if(clientCount > 0) client.write(clientBuf,clientCount);            
            // close the file:
            myFile.close();
          }
          delay(1);
          //stopping client
          client.stop();
          readString="";
        }
      }
    }
  } 
}

zoomkat, i try to change what did you said,but it just showing the image only not with my html that i created in my code. can you show me how to relate the html with image in sd card? because i'm using your code way to do my project..please..

thank you mistergreen for the advice, i already used that way but i don't know how to make the button in html related with led at arduino because i'm new in this code and arduino.

i try to modify my code to find out where is the problem occur, i found that the problem at this code,can you guys help me ?

if(myFile){
            byte clientBuf[64];
            int clientCount = 0;

            while(myFile.available())
            {
              clientBuf[clientCount] = myFile.read();
              clientCount++;

              if(clientCount > 63)
              {
                // Serial.println("Packet");
                client.write(clientBuf,64);
                clientCount = 0;
              }
              
            }
            if(clientCount > 0) client.write(clientBuf,clientCount);            
            // close the file:
            myFile.close();
          }

i don't know why but it's really come from here, when i try to remove some line the image doesn't load up so i think i should not change any thing from this code but the problem come from here. i hope you guys can help me to solve this and teach me more in this arduino code..

thanks you :slight_smile:

i try to change what did you said,but it just showing the image only not with my html that i created in my code. can you show me how to relate the html with image in sd card? because i'm using your code way to do my project..please..

If the image loaded into the browser, then the issue is probably not in the image upload. You may be having a low memory issue if you did not follow the suggestions about using the F() macro in your code. Probably the best thing for you is to develop your main web page and serve it off of your SD card instead of including it in your arduino code. Below is how to put an image into a web page.

can you please explain to me how to use f() macro in my code and teach me how about it?

sorry zoomkat, i also try to use F()macro and it's really minimize the size of ram i used but the symbol still not remove from it..can you help me please?

wawi:
can you please explain to me how to use f() macro in my code and teach me how about it?

See reply #1

i already try it,still the symbol not remove from it..

Get rid of the serial print. You don't need to print the entire file to know if things work.
Check out this tutorial.

He uses Ajax to contol the arduino.

What symbol? I thought you had this working.
http://forum.arduino.cc/index.php?topic=252951.0

edit:This is what I told you in that thread:

The code in the link I posted above is the minimum for me. Take what you need from that if you wish, but it won't have any fault tolerance if you remove anything.

You removed things, didn't you?

but the symbol still not remove from it

Can you explain what the "symbol" is that you are referring to?

mistergreen, i try that way also and it's working well but i don't want to change my code.thanks mistergreen

zoomkat, i already attach the image that contain the symbol.

but right now i used another way which is i load the index.htm that contain in SD Card and relate each button in index.htm with led and it's working well but i can't load the image. here the new code i used.

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

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 6 }; // ip in lan
EthernetServer server(80); //server port

String readString; 
String s;
String ss;
File myFile;
//////////////////////

void setup(){

  pinMode(2, OUTPUT);
  pinMode(3, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(6, OUTPUT); //pin selected to control
  pinMode(7, OUTPUT); //pin selected to control
  pinMode(8, OUTPUT); //pin selected to control
  pinMode(9, OUTPUT);
  pinMode(11, OUTPUT);
  pinMode(12, OUTPUT);
  pinMode(13, OUTPUT);
  //start Ethernet
  

  //enable serial data print 
  Serial.begin(9600); 
  // disable w5100 while setting up SD
  pinMode(10,OUTPUT);
  digitalWrite(10,HIGH);
  Serial.print("Starting SD..");
  if(!SD.begin(4)) Serial.println("failed");
  else Serial.println("ok");
  
  //Serial.println("server multi pin button test 1.0"); // so I can keep track of what is loaded
  
  Ethernet.begin(mac, ip);
  server.begin();
}

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string 
          readString += c; 
          //Serial.print(c);
          
        } 

        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString); //print to serial monitor for debuging 
          
          if(readString, "GET /index.htm")
          {
          client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");
          //client.println("Content-Type: image/jpeg");
          client.println("Connection: keep-alive");
          
          client.println();
         
          myFile = SD.open("index.htm");
          
          
          }
          else if(readString, "GET /kpm.jpg")
          {
            client.println("HTTP/1.1 200 OK");
            client.println("Content-Type: image/jpeg");
            client.println();
            
            myFile = SD.open("kpm.jpg");
            
          }
          if (myFile) {

            byte clientBuf[64];
            int clientCount = 0;

            while(myFile.available())
            {
              clientBuf[clientCount] = myFile.read();
              clientCount++;

              if(clientCount > 63)
              {
                // Serial.println("Packet");
                client.write(clientBuf,64);
                clientCount = 0;
              }
            }
            //final <64 byte cleanup packet
            if(clientCount > 0) client.write(clientBuf,clientCount);            
            // close the file:
            myFile.close();
          }
 
          delay(1);
          button(client);
          //stopping client
          client.stop();
        }
      }
    }
  }
}
void button(EthernetClient client)
{
  
          ///////////////////// control arduino pin
          if(readString.indexOf('2') >0)//checks for 2
          {
            s=("ISNIN");
            digitalWrite(2, HIGH);    // set pin 5 high
            Serial.println("Led 2 On");
            
          }
          if(readString.indexOf('3') >0)//checks for 3
          {
            s=("SELASA");
            digitalWrite(3, HIGH);    // set pin 5 low
            Serial.println("Led 3 On");
          }
          if(readString.indexOf('5') >0)//checks for 4
          {
            s=("RABU");
            digitalWrite(5, HIGH);    // set pin 6 high
            Serial.println("Led 5 On");
          }
          if(readString.indexOf('6') >0)//checks for 5
          {
             s=("KHAMIS");
            digitalWrite(6, HIGH);    // set pin 6 low
            Serial.println("Led 6 On");
          }
          if(readString.indexOf('7') >0)//checks for 6
          {
            s=("JUMAAT");
            digitalWrite(7, HIGH);    // set pin 7 high
            Serial.println("Led 7 On");
          }
           if(readString.indexOf('4') >0)//checks for 7
          {
            s=("OFF");
            digitalWrite(2, LOW);    // set pin 7 low
            digitalWrite(3, LOW);
            digitalWrite(5, LOW);
            digitalWrite(6, LOW);
            digitalWrite(7, LOW);
            Serial.println("All Led OFF");
          }         
          
          if(readString.indexOf('8') >0)//checks for 2
          {
            ss=("ADA");
            digitalWrite(8, HIGH);    // set pin 5 high
            Serial.println("Led 8 On");
          }
          if(readString.indexOf('9') >0)//checks for 3
          {
            ss=("KELAS");
            digitalWrite(9, HIGH);    // set pin 5 low
            Serial.println("Led 9 On");
          }
          if(readString.indexOf('@') >0)//checks for 4
          {
            ss=("BERCUTI");
            digitalWrite(11, HIGH);    // set pin 6 high
            Serial.println("Led 11 On");
          }
          if(readString.indexOf('%') >0)//checks for 5
          {
            ss=("MESYUARAT");
            digitalWrite(12, HIGH);    // set pin 6 low
            Serial.println("Led 12 On");
          }
           if(readString.indexOf('

first picture is the error of the symbol that appear.
second image i can't load the image.

) >0)//checks for 6
          {
            ss=("BERTUGAS DI LUAR");
            digitalWrite(13, HIGH);    // set pin 7 high
            Serial.println("Led 13 On");
          }
          if(readString.indexOf('10') >0)//checks for 7
          {
            ss=("STATUS OFF");
            digitalWrite(8, LOW);    // set pin 7 low
            digitalWrite(9, LOW);
            digitalWrite(11, LOW);
            digitalWrite(12, LOW);
            digitalWrite(13, LOW);
            Serial.println("All Led OFF");
          }       
         
          //clearing string for next read
          readString="";

}


first picture is the error of the symbol that appear.
second image i can't load the image.

![nbnbnb.JPG|1365x703](upload://pziP18rXG3jnOgfdreRpAyodYdI.jpeg)

![fdasda.JPG|1365x590](upload://nm4sHF6GLXRa9YyMxjYTuyowEVp.jpeg)
 if(readString, "GET /index.htm")

?

AWOL, i didn't used HTTP_req but i used readString to relate with LED. So i try the same way with HTTP_req do to load index.htm and jpeg but still the image can't load. there is no error when i used same way with HTTP_req to call it.

do you have any idea that using read String?

I'm asking what that line of code is doing.
It isn't what you think.