Web and jpg

Hello, I created web page, copy it to SD card. My Arduino in web browser view information from my web but i cant see jpg picture in the Web. All Web page and jpg file i copied to SD, and then i test web from SD card in PC it is OK, but then I put SD card to Arduino UNO I cant see picture on browser. What can I do that I will see all my Web page with picture?

mindaugasgi:
What can I do that I will see all my Web page with picture?

How can we tell when you have not posted your program

And please use the code button </> so your code looks like this and is easy to copy to a text editor

…R

This is .ino file

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

// MAC address from Ethernet shield sticker under board
byte mac = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 5); // IP address, may need to change depending on network
EthernetServer server(80); // create a server at port 80

File webFile;

void setup()
{
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
Serial.begin(9600); // for debugging

// initialize SD card
Serial.println(“Initializing SD card…”);
if (!SD.begin(4)) {
Serial.println(“ERROR - SD card initialization failed!”);
return; // init failed
}
Serial.println(“SUCCESS - SD card initialized.”);
// check for index.htm file
if (!SD.exists(“Klimatas.htm”)) {
Serial.println(“ERROR - Can’t find index.htm file!”);
return; // can’t find index file
}
Serial.println(“SUCCESS - Found index.htm file.”);
}

void loop()
{
EthernetClient client = server.available(); // try to get client

if (client) { // got client?
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) { // client data available to read
char c = client.read(); // read 1 byte (character) from client
// last line of client request is blank and ends with \n
// respond to client only after last line received
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(“Connection: close”);
client.println();
// send web page
webFile = SD.open(“Klimatas.htm”); // open web page file
if (webFile) {
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
break;
}
// every line of text received from the client ends with \r\n
if (c == ‘\n’) {
// last character on line of received text
// starting new line with next character read
currentLineIsBlank = true;
}
else if (c != ‘\r’) {
// a text character was received from client
currentLineIsBlank = false;
}
} // end if (client.available())
} // end while (client.connected())
delay(1); // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)
}

and it is .htm file:

Klimatas

mindaugasgi:
if (c == '\n' && currentLineIsBlank) {
// send a standard http response header

I'd say:

  • do not "send a standard http response header" as a response to each request!
  • if the request is about a jpg file, send a "JPG picture resonse header" instead!

And of course: Your sketch should NOT answer each request with sending "Klimatas.htm", no matther what the request ist about.

If the HTTP request is about a jpg file, the response should be sending a jpg file.
In the best case, you should send exactly that jpg file which was requested in the request.

The question is, is arduino uno capable of serving a jpg image? Maybe its too heavy, considering it has only 2 kb sram.

mart256:
The question is, is arduino uno capable of serving a jpg image? Maybe its too heavy, considering it has only 2 kb sram.

Yes, Arduino is capable serving many types of files. He wants to send the files from SD card (even HTM files stored with a .htm file extension).

For increased serving speed he could change the logic:

  • read one byte from file - send one response byte
    into
  • read a chunk of 64 bytes from file - send a chunk of 64 response bytes
    The latter is much faster.

I request to send htm. In htm file is request jpg. And I get just blank picture? How I can get picture and web information normaly in my pc? When I open htm in PC I get picture. Maybe I must request picture and then htm, but I want it together.

mindaugasgi:
I request to send htm. In htm file is request jpg. And I get just blank picture? How I can get picture and web information normaly in my pc? When I open htm in PC I get picture. Maybe I must request picture and then htm, but I want it together.

No, the picture request is in the HTML code already. But maybe wrong for 8.3 FAT file system:

<img height="893" src="Klimatas_failai/Sienos.Model%20.jpg" width="2015" />

Your webbrowser will automatically generate a request for directory and file name “Klimatas_failai/Sienos.Model .jpg” from it.

BUT: Is your SD card capable of “long file names”?
Can your SD card library handle file names with space characters in the file name?
Normally you can use just FAT 8.3 directory and file names with SD library for Arduino.
So instead directory name “Klimatas_failai” possibly use “failai” instead.

And the file name with an space character in it is possibly completely invalid because of the space character. Also in HTTP the space character is encoded as “%20” and you would need a decoder to get the space character from “%20” back. So as a file name better use NOT “Sienos.Model .jpg”, but “Model.jpg”, which fits the 8.3 FAT model and does not contain a space character.

Perhaps:

<img height="893" src="failai/Model.jpg" width="2015" />

So first step:
Prepare the HTML code for 8.3 directory and 8.3 file names only!
No long file names!
No file names containing space characters!

And of course: Your webserver sketch will have to response correctly to that file request (which it doesn’t at the moment).

The below code produces a web page with some images in it, so you can see how the htm file and image files are up loaded from the SD card. I attached a zip file with all the the files I used if you want to see if it works for you.

//zoomkat 1/26/13
//SD server slider test code
//open serial monitor to see what the arduino receives
//address will look like http://192.168.1.102:84/servosld.htm when submited
//for use with W5100 based ethernet shields
//put the servosld.htm, slider.js, bluev_sl.gif,
//and bluev_bg.gif on the SD card
//files at http://web.comporium.net/~shb/servoslider.htm 
// http://web.comporium.net/~shb/pix/servosld.htm
// http://web.comporium.net/~shb/pix/slider.js
// http://web.comporium.net/~shb/pix/bluev_bg.gif
// http://web.comporium.net/~shb/pix/bluev_sl.gif


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

#include <Servo.h> 
Servo myservoa, myservob, myservoc, myservod;  // create servo object to control a servo 
Servo myservoe, myservof, myservog;
String readString, pos;

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

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

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");
  
  myservoa.attach(2);  //the pin for the servoa control
  myservob.attach(3);  //the pin for the servob control
  myservoc.attach(5);  //the pin for the servoc control
  myservod.attach(6);  //the pin for the servod control 
  myservoe.attach(7);  //the pin for the servoa control
  myservof.attach(8);  //the pin for the servob control
  myservog.attach(9);  //the pin for the servoc control
  //myservoh.attach(10);  //the pin for the servod control 

}

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
         
         //select proper header for file to be sent to browser
           if(readString.indexOf("Submit") >=0) { //don't send new page
           client.println("HTTP/1.1 204 Zoomkat");
           client.println();
           client.println(); }
           
          //client.println("HTTP/1.1 200 OK"); //send new page
          if(readString.indexOf("servosld") >=0) {
          client.println("HTTP/1.1 200 OK"); //send new page          
          client.println("Content-Type: text/html");
          client.println(); }

          if(readString.indexOf("slider") >=0) {
          client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: application/x-javascript");
          client.println(); }
          
          if(readString.indexOf("bluev") >=0) {
          client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: image/gif");
          client.println(); }
          
          //select file to send to browser
          if(readString.indexOf("servosld") >=0) {
            File myFile = SD.open("servosld.htm");
            if (myFile) {
              while (myFile.available()) {
                client.write(myFile.read());
              }
              myFile.close();
            }
          }

          if(readString.indexOf("slider") >=0) {
            File myFile = SD.open("slider.js");
            if (myFile) {
              while (myFile.available()) {
                client.write(myFile.read());
              }
              myFile.close();
            }
          }

          if(readString.indexOf("bluev_sl") >=0) {
            File myFile = SD.open("bluev_sl.gif");
            if (myFile) {
              while (myFile.available()) {
                client.write(myFile.read());
              }
              myFile.close();
            }
          }

          if(readString.indexOf("bluev_bg") >=0) {
            File myFile = SD.open("bluev_bg.gif");
            if (myFile) {
              while (myFile.available()) {
                client.write(myFile.read());
              }
              myFile.close();
            }
          }

          delay(1);
          //stopping client
          client.stop();

          //process GET string request from client and and position servo
          
          pos = readString.substring(8, 12); //get the first four characters         
          //Serial.println(pos);
          int n = pos.toInt();  //convert readString into a number   
          Serial.println(n); 
          Serial.println();
          
          if(readString.indexOf("?0") >0) myservoa.writeMicroseconds(n);
          if(readString.indexOf("?1") >0) myservob.writeMicroseconds(n);
          if(readString.indexOf("?2") >0) myservoc.writeMicroseconds(n);
          if(readString.indexOf("?3") >0) myservod.writeMicroseconds(n);
          if(readString.indexOf("?4") >0) myservoe.writeMicroseconds(n);
          if(readString.indexOf("?5") >0) myservof.writeMicroseconds(n);
          if(readString.indexOf("?6") >0) myservog.writeMicroseconds(n);
          //only seven servo pins, so back to myservoa for testing
          if(readString.indexOf("?7") >0) myservoa.writeMicroseconds(n);

          //clearing string for next read
          readString="";
          pos="";
        }
      }
    }
  } 
}

slider files.zip (6.11 KB)

I tried file names failai, and Sienos.jpg, but I get only blank screen. How can I tested it? I have Arduino Uno and Itead studio Ethernet shield, maybe itead studio cant upload jpg to web?

I tried
if (!SD.exists(“Klimatas.htm”)) {
if(!SD.exists(“Sienos.jpg”)){
Serial.println(“ERROR - Can’t find files!”);
return; // can’t find index file
}}
Serial.println(“SUCCESS - Found Klimatas.htm and Sienos.jpg file.”);
}

And I got success in serial…