Hello, I'am trying to make a domotic system with an arduino and I can not load imeges in the CSS sytle of the site; I was foolowing the great stratingelectroic.org example but so I can load the "rd.gif" picture inclided in the CSS file or the "rd2.gif" included in this same file but not together, I do not know why. Could someone check my code to help me; I do not know where my errors are...
mon_dom3.zip (54.4 KB)
emmett_brown:
Could someone check my code to help me; I do not know where my errors are...
What code?
All the folder is in the .zip file; .ino .htm .gif etc...
It was too long to post each file for this server...and for me 
Delta_G:
What code?
The attachment wasn't there when I posted. FTR
The .ino and the .htm files
The zip is attached now.
My CSS file seems to work ok with my server code.
http://playground.arduino.cc/Code/WebServerST
Maybe you can get some ideas from it. Use the first sketch on that page. It has the SD card interface working.
hi,
i am working on the same thing except , i am trying to load java scripts and cvs file , no graph one my screen
so far ..
I tested your code on arduino mega and ethernet shield, which work perfect .with red bar , contain: contact our work all that display.
The display same as ,if i click on the index.htm on windows screen .
@tomthetank: My server code recognizes only a few file extensions. You can change and add to that. It does fine with .js files, but it is not set for cvs (or maybe csv) files. edit: I can help you with that if you specify the file extension of the file that is not downloading.
hi Surfer_tim,
while you here please help me with this..
as you said , your code may not support CSV file.
firefox wont able to pull all js files , therefor no graph display.
have been searching for a solution but no luck yet 
#include <SPI.h>
#include <SD.h>
#include <SdFatUtil.h>
#include <Ethernet.h>
/************ ETHERNET STUFF ************/
byte mac[] = {
0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,0,20);
char rootFileName[] = "tutorial.htm";
EthernetServer server(80);
/************ SDCARD STUFF ************/
Sd2Card card;
SdVolume volume;
SdFile root;
SdFile file;
// store error strings in flash to save RAM
#define error(s) error_P(PSTR(s))
void error_P(const char* str) {
PgmPrint("error: ");
SerialPrintln_P(str);
if (card.errorCode()) {
PgmPrint("SD error: ");
Serial.print(card.errorCode(), HEX);
Serial.print(',');
Serial.println(card.errorData(), HEX);
}
while(1);
}
void setup() {
Serial.begin(9600);
PgmPrint("Free RAM: ");
Serial.println(FreeRam());
// initialize the SD card at SPI_HALF_SPEED to avoid bus errors with
// breadboards. use SPI_FULL_SPEED for better performance.
pinMode(10, OUTPUT); // set the SS pin as an output (necessary!)
digitalWrite(10, HIGH); // but turn off the W5100 chip!
if (!card.init(SPI_HALF_SPEED, 4)) error("card.init failed!");
// initialize a FAT volume
if (!volume.init(&card)) error("vol.init failed!");
PgmPrint("Volume is FAT");
Serial.println(volume.fatType(),DEC);
Serial.println();
if (!root.openRoot(&volume)) error("openRoot failed");
// list file in root with date and size
PgmPrintln("Files found in root:");
root.ls(LS_DATE | LS_SIZE);
Serial.println();
// Recursive list of all directories
PgmPrintln("Files found in all dirs:");
root.ls(LS_R);
Serial.println();
PgmPrintln("Done");
// Debugging complete, we start the server!
Ethernet.begin(mac, ip);
server.begin();
}
// How big our line buffer should be. 100 is plenty!
#define BUFSIZ 1004
void loop()
{
char clientline[BUFSIZ];
char *filename;
int index = 0;
int image = 0;
EthernetClient client = server.available();
if (client) {
// an http request ends with a blank line
boolean current_line_is_blank = true;
// reset the input buffer
index = 0;
while (client.connected()) {
if (client.available()) {
char c = client.read();
// If it isn't a new line, add the character to the buffer
if (c != '\n' && c != '\r') {
clientline[index] = c;
index++;
// are we too big for the buffer? start tossing out data
if (index >= BUFSIZ)
index = BUFSIZ -1;
// continue to read more data!
continue;
}
// got a \n or \r new line, which means the string is done
clientline[index] = 0;
filename = 0;
// Print it out for debugging
Serial.println(clientline);
// Look for substring such as a request to get the root file
if (strstr(clientline, "GET / ") != 0) {
filename = rootFileName;
}
if (strstr(clientline, "GET /") != 0) {
// this time no space after the /, so a sub-file
if (!filename) filename = clientline + 5; // look after the "GET /" (5 chars)
// a little trick, look for the " HTTP/1.1" string and
// turn the first character of the substring into a 0 to clear it out.
(strstr(clientline, " HTTP"))[0] = 0;
// print the file we want
Serial.println(filename);
if (! file.open(&root, filename, O_READ)) {
client.println("HTTP/1.1 404 Not Found");
client.println("Content-Type: text/html");
client.println();
client.println("<h2>File Not Found!</h2>");
break;
}
client.println("HTTP/1.1 200 OK");
if (strstr(filename, ".htm") != 0)
client.println("Content-Type: text/html");
else if (strstr(filename, ".css") != 0)
client.println("Content-Type: text/css");
else if (strstr(filename, ".png") != 0)
client.println("Content-Type: image/png");
else if (strstr(filename, ".jpg") != 0)
client.println("Content-Type: image/jpeg");
else if (strstr(filename, ".gif") != 0)
client.println("Content-Type: image/gif");
else if (strstr(filename, ".3gp") != 0)
client.println("Content-Type: video/mpeg");
else if (strstr(filename, ".pdf") != 0)
client.println("Content-Type: application/pdf");
else if (strstr(filename, ".js") != 0)
client.println("Content-Type: application/x-javascript");
else if (strstr(filename, ".xml") != 0)
client.println("Content-Type: application/xml");
else if (strstr(filename, ".csv") != 0)
client.println("Content-Type: text/csv");
else
client.println("Content-Type: text");
client.println();
Serial.println("Opened!");
int16_t c;
while ((c = file.read()) >= 0) {
// uncomment the serial to debug (slow!)
//Serial.print((char)c);
client.print((char)c);
}
file.close();
} else {
// everything else is a 404
client.println("HTTP/1.1 404 Not Found");
// client.println("Content-Type: html");
client.println("Content-Type: text/html");
client.println();
client.println("<h2>File Not Found!</h2>");
}
break;
}
}
// give the web browser time to receive the data
delay(1000);
client.stop();
}
}
tutorial_files.zip (107 KB)
@tomthetank: Actually, my code should support .csv files as it is. Its default Content-Type is text/plain if it does not recognize the file extension. That is a comma separated variable text file, correct?
Sorry Surfer_tim ,
my mistake, yes you are correct it is comma separated variable 
@tomthetank: Then you should be good to go with my code. The only thing my code doesn't do is server side processing like php or asp.
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ 20
// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
//IPAddress ip(192, 168, 0, 20); // IP address, may need to change depending on network
IPAddress ip(192, 168, 0, 20); // IP address, may need to change depending on network
EthernetServer server(80); // create a server at port 80
File webFile;
char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string
char req_index = 0; // index into HTTP_req buffer
void setup()
{
// disable Ethernet chip
pinMode(10, OUTPUT);
digitalWrite(10, HIGH);
Serial.begin(9600); // for debugging
//Serial.begin(115200); // for debugging
//affiche ();
// 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("tutorial.htm")) {
Serial.println("ERROR - Can't find tutorial.htm file!");
return; // can't find index file
}
Serial.println("SUCCESS - Found tutorial.htm file.");
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
Serial.print("server is at ");
Serial.println(Ethernet.localIP());
}
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
// buffer first part of HTTP request in HTTP_req array (string)
// leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)
if (req_index < (REQ_BUF_SZ - 1)) {
HTTP_req[req_index] = c; // save HTTP request character
req_index++;
}
// print HTTP request character to serial monitor
Serial.print(c);
// last line of client request is blank and ends with \n
// respond to client only after last line received
if (c == '\n' && currentLineIsBlank) {
// open requested web page file
if (StrContains(HTTP_req, "GET / ")
|| StrContains(HTTP_req, "GET /tutorial.htm")) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connnection: close");
// client.println("Connection: keep-alive");
client.println();
webFile = SD.open("tutorial.htm"); // open web page file
Serial.println("chargement de la page 'index.htm' ");
}
/// chargement des images, gif, png nécesaires au style CSS du site
//// client.println("Content-Type: image/gif");
else if (StrContains(HTTP_req, "GET /bootstrap.css")) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/css");
client.println();
//Serial.println("chargement du rd.gif");
webFile = SD.open("bootstrap.css");
}
else if (StrContains(HTTP_req, "GET /bootstrap.js")) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: application/x-javascript");
client.println();
webFile = SD.open("bootstrap.js");
}
else if (StrContains(HTTP_req, "GET /ga.js")) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: application/x-javascript");
client.println();
webFile = SD.open("ga.js");
}
else if (StrContains(HTTP_req, "GET /jquery.js")) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: application/x-javascript");
client.println();
webFile = SD.open("jquery.js");
}
///// chargement de la page de style CSS ////////
else if (StrContains(HTTP_req, "GET /site.css")) {
client.println("Content-Type: text/css");
client.println("Connection: keep-alive");
client.println();
webFile = SD.open("site.css");
}
else if (StrContains(HTTP_req, "GET /temperatures.csv")) {
Serial.println("chargement de l'image 'home' ");
client.println("Content-Type: text/plain ");
webFile = SD.open("temperatures.csv");
if (webFile) {
client.println("HTTP/1.1 200 OK");
client.println();
}
}
if (webFile) {
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
// reset buffer index and all buffer elements to 0
req_index = 0;
StrClear(HTTP_req, REQ_BUF_SZ);
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
//delay(10); // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)
}
// sets every element of str to 0 (clears array)
void StrClear(char *str, char length)
{
for (int i = 0; i < length; i++) {
str[i] = 0;
}
}
// searches for the string sfind in the string str
// returns 1 if string found
// returns 0 if string not found
char StrContains(char *str, char *sfind)
{
char found = 0;
char index = 0;
char len;
len = strlen(str);
if (strlen(sfind) > len) {
return 0;
}
while (index < len) {
if (str[index] == sfind[found]) {
found++;
if (strlen(sfind) == found) {
return 1;
}
}
else {
found = 0;
}
index++;
}
return 0;
}
took a while to do all this but wont complete the loading
Initializing SD card...
SUCCESS - SD card initialized.
SUCCESS - Found tutorial.htm file.
server is at 192.168.0.20
GET / HTTP/1.1
Host: 192.168.0.20
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:45.0) Gecko/20100101 Firefox/45.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Cookie: __utma=212713940.881633576.1457865860.1459937004.1459944385.3; __utmz=212713940.1457865860.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Connection: keep-alive
chargement de la page 'index.htm'
GET /ga.js HTTP/1.1
Host: 192.168.0.20
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:45.0) Gecko/20100101 Firefox/45.0
Accept: /
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://192.168.0.20/
Cookie: __utma=212713940.881633576.1457865860.1459937004.1459944385.3; __utmz=212713940.1457865860.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Connection: keep-alive
GET /dygraph-combined.js HTTP/1.1
Host: 192.168.0.20
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:45.0) Gecko/20100101 Firefox/45.0
Accept: /
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://192.168.0.20/
Cookie: __utma=212713940.881633576.1457865860.1459937004.1459944385.3; __utmz=212713940.1457865860.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Connection: keep-alive
GET /bootstrap.css HTTP/1.1
Host: 192.168.0.20
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:45.0) Gecko/20100101 Firefox/45.0
Accept: text/css,/;q=0.1
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://192.168.0.20/
Cookie: __utma=212713940.881633576.1457865860.1459937004.1459944385.3; __utmz=212713940.1457865860.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Connection: keep-alive
GET /site.css HTTP/1.1
Host: 192.168.0.20
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:45.0) Gecko/20100101 Firefox/45.0
Accept: text/css,/;q=0.1
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://192.168.0.20/
Cookie: __utma=212713940.881633576.1457865860.1459937004.1459944385.3; __utmz=212713940.1457865860.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Connection: keep-alive
GET /dygraph-combined.js HTTP/1.1
Host: 192.168.0.20
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:45.0) Gecko/20100101 Firefox/45.0
Accept: /
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://192.168.0.20/
Cookie: __utma=212713940.881633576.1457865860.1459937004.1459944385.3; __utmz=212713940.1457865860.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Connection: keep-alive
@tomthetank: I'm not going to debug that code. I spent too much time debugging my code for use on the internet. Mine has all the failsafe functions to prevent a freeze if attacked by a hacker or port scanner.
I can tell you one thing. You are going to experience a buffer overflow with that code. The request sent by a web browser will be much longer than 20 characters.
edit: ...and one more thing. The SD card software is limited to 8.3 filenames. Your file names are too long.
Surfer_Tim , well that a good news! , I am going to suffer buffer overflow
Thank you very much for your help . will try the limit 8.3 filenames thing
I'll give you a bit more help. Limit storing the web browser request to 19 characters in that buffer. I don't think that will be enough tho.
SurferTim:
My CSS file seems to work ok with my server code.
Arduino Playground - HomePage
Maybe you can get some ideas from it. Use the first sketch on that page. It has the SD card interface working.
Iwas trying your webserverst code but I have nothing agter ready in the serial
I have not modified the index.hm yet but it must at least load the page only
What the modifications have you made to test my "site"...
Did you modify the IP address to work in your localnet? The sketch uses 192.168.2.2, but that won't work with most routers.
@emmett_brown: I tried tho code you post on the mega work perfect with red bar and all , and tried it
on uno as you said no css no red bar .
if that any help