How to add .js and .css files in a arduino-SD card hosted website ?

I believe I am also having the same issue where the .js files are not being sent to the browser when it is requested.
This is where i got my gauge from. http://justgage.com/

AFS_Base_XML_Gauge.ino (1.99 KB)

web_server.ino (6.04 KB)

wifi_control.ino (919 Bytes)

index.htm (1.66 KB)

You are probably correct. Your code seems to be faulty. Here is the section of code with the problem. If the request contains the string "ajax_inputs", it sends a header and the XML stuff. Otherwise, it sends a header and the index.htm file. The js files are not sent correctly. They would be sent after the index.htm file.

          if(StrContains(HTTP_req, "ajax_inputs")){
            //send rest of HTTP header
            client.println("Content-Type: text/xml");
            client.println("Connection: keep-alive");
            client.println();
            //send XML file containing input states
            //Serial.println("XMP_RPM_MPH(client)");
            XML_RPM_MPH(client);
          }

          else {  //web page request
            //send rest of HTTP header
            client.println("Content-Type:text/html");
            client.println("Connection: close");
            client.println();
            //send web page
            Serial.println("Sending Index.htm");
            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();
            }

The "else" should be an "if(StrContains(HTTP_req, "index.htm"))".

SurferTim: You are probably correct. Your code seems to be faulty. Here is the section of code with the problem. If the request contains the string "ajax_inputs", it sends a header and the XML stuff. Otherwise, it sends a header and the index.htm file. The js files are not sent correctly. They would be sent after the index.htm file.

          if(StrContains(HTTP_req, "ajax_inputs")){
            //send rest of HTTP header
            client.println("Content-Type: text/xml");
            client.println("Connection: keep-alive");
            client.println();
            //send XML file containing input states
            //Serial.println("XMP_RPM_MPH(client)");
            XML_RPM_MPH(client);
          }

          else {  //web page request             //send rest of HTTP header             client.println("Content-Type:text/html");             client.println("Connection: close");             client.println();             //send web page             Serial.println("Sending Index.htm");             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();             }



The "else" should be an "if(StrContains(HTTP_req, "index.htm"))".

I tried your correction. It took it a step back and now I am getting a blank page when I go to the ip address.

Here is what shows up in the serial monitor:

Initializing SD card...
SUCCESS - SD card initialized.
SUCCESS - Found index.htm file.
SUCCESS - Found Raphael file.
SUCCESS - Found Just Gage file.
server is at 192.168.0.100
GET /ajax_inputs&nocache=546682.6935298741 HTTP/1
GET /ajax_inputs&nocache=646856.0344073921 HTTP/1
GET /ajax_inputs&nocache=53188.764955848455 HTTP/
GET /ajax_inputs&nocache=881490.4927276075 HTTP/1
GET /ajax_inputs&nocache=389964.48018588126 HTTP/
GET /ajax_inputs&nocache=868157.1092456579 HTTP/1
GET /ajax_inputs&nocache=791809.9127709866 HTTP/1
GET /ajax_inputs&nocache=969406.4881186932 HTTP/1
GET / HTTP/1.1
Host: 192.168.0.100
Connection: 
GET /favicon.ico HTTP/1.1
Host: 192.168.0.100
C

Here is that section of code:

        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          //remainder of header follows below, depending on if
          //web page or XML page is requested
          //Ajax request - send XML file
          if(StrContains(HTTP_req, "ajax_inputs")){
            //send rest of HTTP header
            client.println("Content-Type: text/xml");
            client.println("Connection: keep-alive");
            client.println();
            //send XML file containing input states
            //Serial.println("XMP_RPM_MPH(client)");
            XML_RPM_MPH(client);
          }
          if(StrContains(HTTP_req,"index.htm")){  //web page request
            //send rest of HTTP header
            client.println("Content-Type:text/html");
            client.println("Connection:close");
            client.println();

            //send web page
            Serial.println("Sending Index.htm");
            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();
            }

//            if (StrContains(HTTP_req, "justgage.js")){
//              client.println("HTTP/1.1 200 OK"); //send javescript
//              client.println("Content-Type: application/x-javascript");
//              client.println(); 
              //send web page
              Serial.println("Sending justgage.js");
              justgage = SD.open("justgage.js");    //open web page file
              if(justgage){
                while(justgage.available()){
                  client.write(justgage.read());  //send web page to client
                }
                justgage.close();
              }
//            }
//            if (StrContains(HTTP_req, "raphael.js")){
//              client.println("HTTP/1.1 200 OK"); //send javescript
//              client.println("Content-Type: application/x-javascript");
//              client.println(); 
              //send web page
              Serial.println("Sending raphael.js");
              raphael = SD.open("raphael.js");    //open web page file
              if(raphael){
                while(raphael.available()){
                  client.write(raphael.read());  //send web page to client
                }
                raphael.close();
              }
//            }

          }
          // display received HTTP request on serial port
          //Serial.print("Received HTTP Request: ");
          Serial.println(HTTP_req);
          //reset buffer index and all buffer elements to 0
          req_index = 0;
          StrClear(HTTP_req, REQ_BUF_SZ);
          break;
        }

Also when i switch it back to my original code this is what I get.

Serial Monitor:

Initializing SD card...
SUCCESS - SD card initialized.
SUCCESS - Found index.htm file.
SUCCESS - Found Raphael file.
SUCCESS - Found Just Gage file.
server is at 192.168.0.100
Sending Index.htm
Sending justgage.js
Sending raphael.js
GET / HTTP/1.1
Host: 192.168.0.100
Connection: 
Sending Index.htm
Sending justgage.js
Sending raphael.js
GET /justgage.js HTTP/1.1
Host: 192.168.0.100
C
Sending Index.htm
Sending justgage.js
Sending raphael.js
GET /raphael.js HTTP/1.1
Host: 192.168.0.100
Co
GET /ajax_inputs&nocache=794990.8203445375 HTTP/1
Sending Index.htm
Sending justgage.js
Sending raphael.js
GET /favicon.ico HTTP/1.1
Host: 192.168.0.100
C
GET /ajax_inputs&nocache=728581.9842945784 HTTP/1
GET /ajax_inputs&nocache=601441.3558878005 HTTP/1

It sends the index.htm, justgage.js and raphael.js three times before the webpage shows up on the browser and does it a fourth time after that for some reason. This is less of an issue for me right now, but if you know how to fix it it would help speed up the debugging process.

A picture of what the webpage looks like is attached below.

I am assuming that when the arduino sends that .js files it sends it as html instead of javascript. I have tried adding to the beginning and end of the two .js files and it did remove the text you see at the bottom, but did not fix the issue of the gages not showing up.

index.htm (1.98 KB)

justgage.js (8.99 KB)

raphael.js (87.3 KB)

I see no reason to debug your code. I have working server code on the playground that does not have all the limitations your code has. It will download any 8.3 format file from the SD card as long as it is a recognized file type. http://playground.arduino.cc/Code/WebServerST

You would have to add the XML file type to my code, but with the examples I included, it shouldn't be difficult. Look for the "Send Content-Type" remark and add XML to that section.

edit: And even that may not work. The "ajax_inputs" XML code page is probably a dynamic page like PHP or ASP. And the file name is too long. The SD library supports 8.3 format file names only.

I saw what you wrote. I taught myself coding so my ability to understand what you wrote is limited. I understood some of it, but I couldn't figure out which part is the one I need to have the arduino send the .js files. Could you post the section of code that specifically does that or highlight it somehow? Thanks

Before I do that, you should post the contents of your "ajax_inputs" file. If it requires server side processing, the Arduino is not set up to do that by default.

From my understanding the contexts of the ajax files is created by the arduino in XML. All it does is send 3 values that updates the html code.

The part of the arduino code that generates the XML file is this:

void XML_RPM_MPH(EthernetClient cl){
  //Serial.println("XML_RPM_MPH Begin");
  long newPositionL = encL.read();
  if(newPositionL != oldPositionL){
    oldPositionL = newPositionL;
  }

  long newPositionR = encR.read();
  if(newPositionR != oldPositionR){
    oldPositionR = newPositionR;
  }

  long rpmL = ((long)abs(newPositionL)*60)/(millis()-last);
  long rpmR = ((long)abs(newPositionR)*60)/(millis()-last);

  long mphL = (rpmL*960*float(3.14159)/63360);
  long mphR = (rpmR*960*float(3.14159)/63360);

  //Serial.println("XML file Begin");
  cl.print("<?xml version = \"1.0\" ?>");
  //Serial.print("   <?xml version = \"1.0\" ?>");
  cl.print("<inputs>");
  //Serial.print("   <inputs>");
  cl.print("<mphleft>");
  //Serial.print("   <mphleft>   ");
  cl.print(mphL);
  //Serial.print(mphL);
  cl.print("</mphleft>");
  //Serial.print("   </mphleft>");
  cl.print("<mphright>");
  //Serial.print("   <mphright>   ");
  cl.print(mphR);
  //Serial.print(mphR);
  cl.print("</mphright>");
  //Serial.print("   </mphright>");
  cl.print("</inputs>");
  //Serial.println("   </inputs>");
  //Serial.println("XML File finish");

  //Reset Encoder Count
  encL.write(0);
  encR.write(0);

  //Sets millis count to previous count to etermine difference
  last = millis();
}

Which is related with this part of code:

        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          //remainder of header follows below, depending on if
          //web page or XML page is requested
          //Ajax request - send XML file
          if(StrContains(HTTP_req, "ajax_inputs")){
            //send rest of HTTP header
            client.println("Content-Type: text/xml");
            client.println("Connection: keep-alive");
            client.println();
            //send XML file containing input states
            //Serial.println("XMP_RPM_MPH(client)");
            XML_RPM_MPH(client);

In the htm file, it relates to this part of it:

		<script>
		var leftmph = 0;
		var rightmph = 0;
		function XML_RPM_MPH() {
			nocache = "&nocache=" + Math.random() * 1000000;
			var request = new XMLHttpRequest();
			request.onreadystatechange = function() {
				if (this.readyState == 4) {
					if (this.status == 200) {
						if (this.responseXML != null){
							document.getElementById("input1").innerHTML = this.responseXML.getElementsByTagName("mphleft")[0].childNodes[0].nodeValue;
							leftmph = this.responseXML.getElementsByTagName("mphleft")[0].childNodes[0].nodeValue;
							document.getElementById("input2").innerHTML = this.responseXML.getElementsByTagName("mphright")[0].childNodes[0].nodeValue;
							rightmph = this.responseXML.getElementsByTagName("mphright")[0].childNodes[0].nodeValue;
						}
					}
				}
			}
			request.open("GET", "ajax_inputs" + nocache, true);
			request.send(null);
			setTimeout('XML_RPM_MPH()', 500);
		}
		</script>

I am using Arduino uno + wifi shield. i create a html page and place in aduino uno.I access it sucessfully. For designing i place a css page on google.That page also access sucessfully. I want to use SD card in eithernet sheild.But when css page place in SD card then that page is not acess. Please help.

But when css page place in SD card then that page is not acess.

Why not?

Please help.

It's your code that needs fixing.