Javascript issue, perhaps?

KenF:
Well before you waste the next couple of days. This might get you close. I don’t have any hardware to test it on so it may take a bit of debugging.

/*--------------------------------------------------------------

Program: eth_websrv_SD

Description: Arduino web server that serves up a basic web
page. The web page is stored on the SD card.

Hardware: Arduino Uno and official Arduino Ethernet
shield. Should work with other Arduinos and
compatible Ethernet shields.
2Gb micro SD card formatted FAT16

Software: Developed using Arduino 1.0.3 software
Should be compatible with Arduino 1.0 +
SD card contains web page called index.htm

References: - WebServer example by David A. Mellis and
modified by Tom Igoe
- SD card examples by David A. Mellis and
Tom Igoe
- Ethernet library documentation:
http://arduino.cc/en/Reference/Ethernet
- SD Card library documentation:
http://arduino.cc/en/Reference/SD

Date: 10 January 2013

Author: W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/

#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(10, 10, 1, 222); // 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("index.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()
{

String requestString = “” ;//String to store chars
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
            requestString = requestString + c;
            if (c == '\n' && currentLineIsBlank) 
               {if (requestString.indexOf("dygraph")>0)
                {// send a standard http response header
                client.println("HTTP/1.1 200 OK");
                client.println("Content-Type: text/plain");
                client.println("Connection: close");
                client.println();
                webFile = SD.open("dygraph.js");        // open web page file
                if (webFile) {
                    while(webFile.available()) {
                        client.write(webFile.read()); // send web page to client
                    }
                    webFile.close();
                } 
            else
                {
                // 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("index.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)

}

Thank you for the code, and for your time in putting my IP address and filenames in.

It compiles easy enough, but I think you might be right about the debugging…!

When I upload this code i get this screen when I browse to the IP address of the arduino:

I’m comparing it against a working sketch at the moment. :slight_smile:

Do you actually have the javascript file there on the sd card?

KenF: Do you actually have the javascript file there on the sd card?

Yes:

However, they are all in lowercase when viewing the SD card on a computer.

double post.

Have you changed the filename in bold to a 8.3 format?

I am hosting these files on the SD card.


index.htm temp.csv humid.csv light.csv

dygraph-combined.js

And a javascript file is not a text/plain type file. It is an application/javascript type.

if (requestString.indexOf("dygraph")>0)
[i][/i]
[i]{// send a standard http response header[/i][i][/i]
[i]  client.println("HTTP/1.1 200 OK");[/i][i][/i]
[i]  client.println("Content-Type: application/javascript");[/i][i][/i]
[i]  client.println("Connection: close");[/i][i][/i]
[i]  client.println();[/i][i][/i]
[i]  webFile = SD.open("dygraph.js");        // open web page file[/i][color=#222222]
[/color]
[i]

I am beginning to dislike this new forum upgrade the more I use it. I'm going to leave the post just like it is. POS.

Yes Surfer, I changed it to dygraph.js, see my previous post :slight_smile:

I changed the code that KenF kindly posted with the addition that you just mentioned.

/*--------------------------------------------------------------
  Program:      eth_websrv_SD

  Description:  Arduino web server that serves up a basic web
                page. The web page is stored on the SD card.
  
  Hardware:     Arduino Uno and official Arduino Ethernet
                shield. Should work with other Arduinos and
                compatible Ethernet shields.
                2Gb micro SD card formatted FAT16
                
  Software:     Developed using Arduino 1.0.3 software
                Should be compatible with Arduino 1.0 +
                SD card contains web page called index.htm
  
  References:   - WebServer example by David A. Mellis and 
                  modified by Tom Igoe
                - SD card examples by David A. Mellis and
                  Tom Igoe
                - Ethernet library documentation:
                  http://arduino.cc/en/Reference/Ethernet
                - SD Card library documentation:
                  http://arduino.cc/en/Reference/SD

  Date:         10 January 2013
 
  Author:       W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/

#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(10, 10, 1, 222); // 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("index.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()
{
  
String requestString = "" ;//String to store chars
    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
                requestString = requestString + c;
                if (c == '\n' && currentLineIsBlank) 
                   {if (requestString.indexOf("dygraph")>0)
                    {// send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: application/javascript");
                    client.println("Connection: close");
                    client.println();
                    webFile = SD.open("dygraph.js");        // open web page file
                    if (webFile) {
                        while(webFile.available()) {
                            client.write(webFile.read()); // send web page to client
                        }
                        webFile.close();
                    } 
                else
                    {
                    // 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("index.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)
}

I am at a loss as to why the page wont load now. :frowning:

I would try this. Display the web page on the serial monitor as you are uploading it to the client. See if or where the index.htm file stops uploading.

[color=#222222]                    // send web page[/color][color=#222222][/color]
[color=#222222]                    webFile = SD.open("index.htm");        // open web page file[/color][color=#222222][/color]
[color=#222222]                    if (webFile) [/color][color=#222222][/color]
[color=#222222]                        while(webFile.available()) {[/color][color=#222222][/color]
[color=#222222]                           char ch = webFile.read();                            
                           client.write(ch); // send web page to client[/color][color=#222222][/color]
[color=#222222]                           Serial.write(ch);
                        }                           
[/color][color=#222222]                        webFile.close();[/color][color=#222222][/color]
[color=#222222]                    }[/color][color=#222222][/color]

Maybe the web browser needs to download the javascript file inline. If so, there will be problems. The ethernet shield can service only one client connection at a time.

This new forum upgrade is a POS. If you can't read it, too bad.

dygraph-combined.js

That's NOT how you spell dygraph.js

SurferTim: This new forum upgrade is a POS. If you can't read it, too bad.

It's not the new forum, it's an issue of the Arduino IDE (never fixed) that formats the code to be published on the forum by inserting a lot of extra tag codes, useful if you choose the "quote" tags but useless if you use the proper "code" tags. You can just select with your mouse the code, press CTRL+C (Win/Linux) or CMD+C (Mac) and then put it inside the proper code tags.

I didn't copy it from the IDE. I copied it from the OPs post.

edit: I just tried the same copy from a code section of the post and pasted it into a response, and now it works ok. My apology for "flying off the handle" a bit.

Don't worry... you're welcome ;)

So this is the code again; nothing has changed, i.e. it wont display the page:

/*--------------------------------------------------------------
  Program:      eth_websrv_SD

  Description:  Arduino web server that serves up a basic web
                page. The web page is stored on the SD card.
  
  Hardware:     Arduino Uno and official Arduino Ethernet
                shield. Should work with other Arduinos and
                compatible Ethernet shields.
                2Gb micro SD card formatted FAT16
                
  Software:     Developed using Arduino 1.0.3 software
                Should be compatible with Arduino 1.0 +
                SD card contains web page called index.htm
  
  References:   - WebServer example by David A. Mellis and 
                  modified by Tom Igoe
                - SD card examples by David A. Mellis and
                  Tom Igoe
                - Ethernet library documentation:
                  http://arduino.cc/en/Reference/Ethernet
                - SD Card library documentation:
                  http://arduino.cc/en/Reference/SD

  Date:         10 January 2013
 
  Author:       W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/

#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(10, 10, 1, 222); // 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("index.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()
{
  
String requestString = "" ;//String to store chars
    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
                requestString = requestString + c;
                if (c == '\n' && currentLineIsBlank) 
                   {if (requestString.indexOf("dygraph")>0)
                    {// send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: application/javascript");
                    client.println("Connection: close");
                    client.println();
                    webFile = SD.open("dygraph.js");        // open web page file
                    if (webFile) {
                        while(webFile.available()) {
                            client.write(webFile.read()); // send web page to client
                        }
                        webFile.close();
                    } 
                else
                    {
                    // 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("index.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)
}

I took the sage advice Surfer Tim gave, and put some serial outputs to identify what was happening.

I narrowed it down to this:

void loop()
{
   Serial.println("beginning of loop");
String requestString = "" ;//String to store chars
    EthernetClient client = server.available();  // try to get client
 Serial.println("step one");
    if (client) {  // got client?
        
         Serial.println("step two");
         boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   //

When viewing that section over the serial monitor I get this:

Initializing SD card...
SUCCESS - SD card initialized.
SUCCESS - Found index.htm file.
beginning of loop
step one

I know that it is reading the SD card.
I know that the ethernet is working, because I can ping the address that I have specified.
(When unplugging the device the ping drops, so it is definitely correct)
It is set to using port 80, so the browser would pick it up.

But it is failing at detecting the client when the code is being ran.

What am I missing?

Maybe you are running out of sockets. Add this code and call it at the same place in your code as “step one”. If there is not a socket available or listening, you will not be able to connect to the server.

byte socketStat[4];

void ShowSockStatus()
{
 for (int i = 0; i < MAX_SOCK_NUM; i++) {
   Serial.print(F("Socket#"));
   Serial.print(i);
   uint8_t s = W5100.readSnSR(i);
   socketStat[i] = s;
   Serial.print(F(":0x"));
   Serial.print(s,16);
   Serial.print(F(" "));
   Serial.print(W5100.readSnPORT(i));
   Serial.print(F(" D:"));
   uint8_t dip[4];
   W5100.readSnDIPR(i, dip);
   for (int j=0; j<4; j++) {
     Serial.print(dip[j],10);
     if (j<3) Serial.print(".");
   }
   Serial.print(F("("));
   Serial.print(W5100.readSnDPORT(i));
   Serial.println(F(")"));
 }
}

A socket status list:
0x0 is available.
0x14 is listening.
0x17 is connected (busy).
0x22 is UDP.

This looks distinctly dodgy to me

client.println("Connection: close");

KenF: This looks distinctly dodgy to me

client.println("Connection: close");

What do you mean by that? That is part of the HTTP/1.1 protocol. That protocol also allows persistent connections with "Connection: keep-alive".

I've got some code that uses .js files from the SD card that worked in the past, but now they don't load from the SD card. Not sure if it is an SD card issue or a possible IDE change issue.

@zoomkat: Is your JavaScript code performing some task inline? In other words, is the JavaScript code from your SD required to complete the webpage? If so, the web browser may be requesting the .js file, but since the ethernet library services only one request at a time, the .js file doesn't get loaded in time to complete the page. What do you think?

If I get a little time tomorrow I may experiment with that. I'll use the ShowSockStatus() function to check if there is a request pending for the .js file during the main web page file upload. Feel free to beat me to it if you have the time. ;)

Below is the original servo slider code with the slider files used on the SD card attached ( my ISP quit hosting free web space some time back). I can’t even upload a .jpg file to a browser from the SD card as in the past, so I’ve got to do some digging to find what has changed.

Edit: problem solved, low voltage due to trying to power two Ethernet shields from one notepad USB port.

//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 submitted
//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 (4.42 KB)

I think I've found my problem. I had two arduinos with w5100 shields being connected via USB to my netpad causing a low voltage situation. Disconnected one of the arduinos and the slider web page now loads off of the SD card of the other arduino.