Hello,
I am trying to figure out how to embed an image that is stored as a JPG on an SD card into a web page that the Arduino WiFi shield can serve to remote clients.
The image is being captured by a camera, and then saved to an SD card. I want to be able to use a browser on my phone to view the image. I assume that I can set up a web server on the Arduino, and somehow embed he JPG into the page.
Please could someone point me in the direction of suitable instructions for achieving this?
Thanks!
Code for uploading an image from the SD disk ising a regular ethernet shield.
//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="";
}
}
}
}
}
Thanks for the response. I've tried something based on this, but it's not displaying the image. The .*.htm file is happily loaded from the SD card and served, but not the *.jpg.
It is finding and opening the file successfully in both cases.
Any suggestions would be appreciated.
// send a standard http response header
client.println("HTTP/1.1 200 OK");
File myFile;
if(reqString.indexOf("GET / ") > -1)
{
client.println("Content-Type: text/html");
if (SD.exists("home.htm")) {
Serial.println("home.htm exists.");
} else {
Serial.println("home.htm doesn't exist.");
}
myFile = SD.open("home.htm");
}
else
{
client.println("Content-Type: image/jpeg");
if (SD.exists("PIC.jpg")) {
Serial.println("PIC.jpg exists.");
} else {
Serial.println("PIC.jpg doesn't exist.");
}
myFile = SD.open("PIC.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();
}
Just to add some more information. The file stored on my SD card for the web page is...
<html>
<head>
<title>Sample "Hello, World" Application</title>
</head>
<body bgcolor=white>
<table border="0" cellpadding="10">
<tr>
<td>
<img src="PIC.jpg">
</td>
<td>
<h1>Sample "Hello, World" Application</h1>
</td>
</tr>
</table>
<p>This is the home page for the HelloWorld Web application. </p>
<p>To prove that they work, you can execute either of the following links:
<ul>
<li>To a <a href="hello.jsp">JSP page</a>.
<li>To a <a href="hello">servlet</a>.
</ul>
</body>
</html>
I am also sending the data that is being sent to the web client, over the serial port for debugging. What it claims to be sending to the client is this...
<html>
<head>
<title>Sample "Hello, World" Application</title>
</head>
<body bgcolor=white>
<table border="0" cellpadding="10">
<tr>
<td>
<img src="PIC.jpg">
</td>
<td>
<h1>Sample "Hello, World" Application</h1>
</td>
</tr>
</table>
<p>This is the home page for the HelloWorld Web application. </p>
<p>To prove that they work, you can execute either of the following links:
<ul>
<li>To a <a href="hello.jsp">JSP page</a>.
<li>To a <a href="hello">client disonnected
So it looks like the end of the file is missing. In case it helps, theArduino seems to start processing the request for the JPG.
The really odd thing is that when I view the source of the web page displayed in the browser, it shows me this...
<table border="0" cellpadding="10">
<tr>
<td>
<img src="PIC.jpg">
</td>
<td>
<h1>Sample "Hello, World" Application</h1>
</td>
</tr>
</table>
<p>This is the home page for the HelloWorld Web application. </p>
<p>To prove that they work, you can execute either of the following links:
<ul>
<li>To a <a href="hello.jsp">JSP page</a>.
<li>To a <a href="hello">servlet</a>.
</ul>
</body>
</html>
Which looks like it's missing the start of the file, rather than the end. I'm very confused by this. And it's making me think that if the HTM file isn't being transferred/received as expected, then neither is the JPG.
Any insights would be appreciated.
Cheers.