I need to display a small image in my webpage on my arduino webserver. Can anyone help me on how and where should I upload the image.
if your server has internet access, I'd host the image elsewhere and just put the link on the Arduino. Saves a lot of grief for a machine with tiny resources.
I appreciate your reply. There is no internet connectivity on the network moreover there is no static IP/server on which I can place images to get the same displayed over Arduino.
I need some mechanism to upload image on Arduino itself.
Unless it is a very tiny image, this won't be possible.
How big is the image? What color depth?
Even if it is tiny, I don't know if it's possible to have the Arduino web server return multiple files.
Do you see the little right next to your name?
That image is a 900 byte file, and that's compressed. The Arduino uses a microcontroller with 1024 bytes of EEPROM and 2048 bytes of RAM. It's not likely to fit any useful graphics internally.
If your "web server" has any place to store files, put your image file there. If not, store the file on a real server. Then have your web server print a reference to the image file: will do.
If you want to generate the graphics content on the fly, have your web server print the bitmap data to the socket after a suitable MIME header: Content-type: image/gif\n\n (or image/jpeg, etc.). The bitmap data is just a stream of bytes following the second newline, and should conform to the given file format.
Thanks PaulS and halley, I will reconsider this and will think of some other alternate like base-64 encoding of image
say2paul,
You might look into storing your image in PROGMEM. This is a way to store data in the chip's flash memory, the same place where your program code is written when you program your Arduino.
You can find some documentation on PROGMEM at: PROGMEM - Arduino Reference
Regards,
-Mike
Thanks Mike, I doubt I can save images on PROGMEM as it is a binary content.
Moreover if I somehow manage to save it then how would I call the same from HTML tag..
I doubt I can save images on PROGMEM as it is a binary content.
Everything in computers is binary!!
How you interpreted that binary makes it an image a sound or some text or data. You can store anything in binary, in fact you can't help but use binary, there is nothing else.
Grumpy Mike... Thanks for your words! But we are here to discuss solution, please share if you have one in your mind 
say2paul,
I'm assuming that the HTML you send out is going to have an tag. This will cause the web browser to generate a separate request to your web server for "blahblah.jpg" or whatever you specified in your
tag.
I don't know how the Arduino web server works, but I'm guessing you'll have to modify it so that when it sees a request for "blahblah.jpg", it goes to an array of unsigned characters that you have stored in PROGMEM, and transmits the appropriate headers, followed by the contents of the array from PROGMEM.
If you have more than one image, you could have a simple file system directory, with an array of structures that contain file names and pointers to the PROGMEM arrays.
How do you get the bytes into a PROGMEM array? On your PC, using your favorite programming language, you write a little program to read the graphics file and generate an array initializer. For example, if the first 5 bytes of the graphic file were (in hexadecimal): 8A 3B 22 5C 1F, then your array initializer would start out:
prog_uchar blahblah[] PROGMEM = {0x8a, 0x3b, 0x22, 0x5c, 0x1f,
(... the rest of the data) };
Once you've generated the array initializer on your PC, copy and paste it into your Arduino code.
That's about as explicit as I can be without writing the code for you.
Regards,
-Mike
Or you could store it on an SD card.
Thanks Mike & AWOL that was really kind and helpful.
(sorry for my little english)
my project is a web server to control the LEDs, the images have been included in base64 (not compatible with explorer 6&7).
my original post: http://www.arduino.cc/cgi-bin/yabb2/YaBB.pl?num=1266106558
// Versione 001d
#include <LED.h>
#include <WString.h>
#include <Ethernet.h>
#include <avr/pgmspace.h>
prog_char string_0[] PROGMEM = "";
prog_char string_1[] PROGMEM = "<tr><td><input type=submit name=b1 value=Led1></td><td>";
prog_char string_2[] PROGMEM = "<tr><td><input type=submit name=b2 value=Led2></td><td>";
prog_char string_3[] PROGMEM = "<tr><td><input type=submit name=b3 value=Led3></td><td>";
prog_char string_4[] PROGMEM = "<tr><td><input type=submit name=b4 value=Led4></td><td>";
prog_char string_5[] PROGMEM = "";
prog_char string_6[] PROGMEM = "";
prog_char string_7[] PROGMEM = "</form>";
prog_char string_8[] PROGMEM = "<img src=data:image/gif;base64,R0lGODlhEAAQAKIAAAD/AACGAISGhMbHxv///wAAAAAAAAAAACwAAAAAEAAQAAADUEiq1b6QNEHFGC2W6srFyyY0QAk0V8GM5WJ6qlgA7ptuc20GME4TplKAJ/EBg4BhDIYUKosp5JAokWB2U6LKiilkM1XGpxPSeAYQcKRIhiQAADs= alt=Acceso ></td><td>";
prog_char string_9[] PROGMEM = "<img src=data:image/gif;base64,R0lGODlhEAAQAKIAAP////f398DAwICAgAAAAAAAAAAAAAAAACwAAAAAEAAQAAADTRiq1L4wtEGHEC2S6sjFyzY0H+aB0ngB7OcRqcoC5Tl5cymot9CWFAKgR9MFhy/dhYO8nD7MoQQDrYykU5O1wYIxXI6ZN3SaISPkTiQBADs= alt=Spento ></td><td>";
prog_char string_10[] PROGMEM = "";
PROGMEM const char *string_table[] = // change "string_table" name to suit
{
string_0,
string_1,
string_2,
string_3,
string_4,
string_5,
string_6,
string_7,
string_8,
string_9,
string_10
};
char buffer[400]; // make sure this is large enough for the largest string it must hold
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
byte ip[] = { 192, 168, 129, 103 };
byte gateway[] = { 192, 168, 129, 220 };
byte subnet[] = { 255, 255, 255, 0 };
String inString = String(35);
Server server(80);
LED led1 = LED(2);
LED led2 = LED(3);
LED led3 = LED(4);
LED led4 = LED(5);
LED led5 = LED(6);
LED led6 = LED(7);
LED led7 = LED(8);
LED led8 = LED(9);
String msg="";
int tam=0;
int st1=9,st2=9,st3=9,st4=9,st5=9,st6=9,st7=9,st8=9;
void setup()
{
Serial.begin(9600);
Ethernet.begin(mac, ip,gateway,subnet);
server.begin();
Serial.println("Serial READY");
Serial.println("Ethernet READY");
Serial.println("Server READY");
}
void loop()
{
Client client = server.available();
int led=0;
if (client) {
// an http request ends with a blank line
boolean current_line_is_blank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
// if we've gotten to the end of the line (received a newline
// character) and the line is blank, the http request has ended,
// so we can send a reply
if (inString.length() < 35) {
inString.append(c);
}
if (c == '\n' && current_line_is_blank) {
if(inString.contains("b1")){
led1.toggle();
if(led1.getState()) st1=8;
else st1=9;
led=1;
}
if(inString.contains("b2")){
led2.toggle();
if(led2.getState()) st2=8;
else st2=9;
led=2;
}
if(inString.contains("b3")){
led3.toggle();
if(led3.getState()) st3=8;
else st3=9;
led=3;
}
if(inString.contains("b4")){
led4.toggle();
if(led4.getState()) st4=8;
else st4=9;
led=4;
}
if(inString.contains("msg")){
strcpy(msg,inString.substring(inString.indexOf("g")+2,inString.indexOf(" H")));
//Serial.print("msg: ");
//Serial.println(msg);
}
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println();
//Scrivo l'intestazione
client.println("<html>");
//client.println("<META http-equiv=REFRESH content=3; url=/ >");
client.println("<style> a:link{font:8pt/11pt verdana; color:red} a:visited {font:8pt/11pt verdana; color:blue} body {font:8pt/11pt verdana; color:black; background-color:white} </style>");
client.println("<title>Arduino LED</title>");
client.println("</head>");
client.println("<body>");
client.println("<h2>Controllo LED tramite Rete</h2>");
client.println("<font size= 4><form method=GET>");
client.println("<table width=100>");
strcpy_P(buffer, (char*)pgm_read_word(&(string_table[0]))); // Necessary casts and dereferencing, just copy.
client.println( buffer );
for (int i = 1; i < 8; i++)
{
strcpy_P(buffer, (char*)pgm_read_word(&(string_table[i]))); // Necessary casts and dereferencing, just copy.
client.println( buffer );
switch(i){
client.println("B");
case 1: strcpy_P(buffer, (char*)pgm_read_word(&(string_table[st1]))); client.println( buffer ); break;
case 2: strcpy_P(buffer, (char*)pgm_read_word(&(string_table[st2]))); client.println( buffer ); break;
case 3: strcpy_P(buffer, (char*)pgm_read_word(&(string_table[st3]))); client.println( buffer ); break;
case 4: strcpy_P(buffer, (char*)pgm_read_word(&(string_table[st4]))); client.println( buffer ); break;
}
delay(30);
}
client.println("</table>");
client.println("<a href=/>aggiorna</a>");
client.println("</body>");
client.println("</html>");
break;
}
if (c == '\n') {
// we're starting a new line
current_line_is_blank = true;
} else if (c != '\r') {
// we've gotten a character on the current line
current_line_is_blank = false;
}
}
}
// give the web browser time to receive the data
delay(1);
inString = "";
client.stop();
}
}
ciao!