Pages: 1 [2]   Go Down
Author Topic: How to add .js and .css files in a arduino-SD card hosted website ?  (Read 2017 times)
0 Members and 1 Guest are viewing this topic.
Miramar Beach, Florida
Offline Offline
Faraday Member
**
Karma: 152
Posts: 6192
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Where do these requests come from? What do you expect the Arduino to do with these requests?
Quote
ConnectionGET /ajax_inputs&nocache=314361.3541033119 HTTP/1.1
Host: GET /ajax_inputs&nocache=327329.34528030455 HTTP/1.1
Host:GET /ajax_inputs&nocache=138122.49177135527 HTTP/1.1
Host:GET /ajax_inputs&nocache=725961.0828477889 HTTP/1.1
etc....
Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 20
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

I think these requests are bound to some analog inputs on arduino, which are displayed and refreshed every second ; do you think this is the reason why the .css and .js files are not used?
Logged

Miramar Beach, Florida
Offline Offline
Faraday Member
**
Karma: 152
Posts: 6192
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

You must set the "Connection: close" on your initial request. It appears you are sending "Connection: keep-alive".
Quote
Connection: keep-alivGET /fe.js HTTP/1.1
Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 20
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

It's not what i am doing with the webFile.close ?

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();
                        SetLEDs();
                        // send XML file containing input states
                        XML_response(client);
                    }
                    else {  // web page request
                        // send rest of HTTP header
                        client.println("Content-Type: text/html");
                        client.println("Connection: keep-alive");
                        client.println();
                        // send web page
                     // open web page depending on request :
                   
                      if (StrContains(HTTP_req, ".htm"))      { //if we are already on the website
                       
                      String str(HTTP_req);//convert HTTP_req into a string
                      String html(".htm");//identify .htm as a string
                      String adress = str.substring(5, str.lastIndexOf(html)+4);//isolate the web page adress
                      char page[str.lastIndexOf(html)-5];//create a char at desired size
                      adress.toCharArray(page, str.lastIndexOf(html));//convert previously acquired web page adress into a char
                      webFile=SD.open(page);//open page
                      }
                      else webFile=SD.open("index.htm");//in other case (first access to website for example), directly access to index
                   
                     if (webFile) {
                            while(webFile.available()) {
                                client.write(webFile.read()); // send web page to client
                            }
                            webFile.close();
                    }
                    }
                    // display received HTTP request on serial port
                    Serial.print(HTTP_req);
                    // reset buffer index and all buffer elements to 0
                    req_index = 0;
                    StrClear(HTTP_req, REQ_BUF_SZ);
                    break;
                }
Logged

Miramar Beach, Florida
Offline Offline
Faraday Member
**
Karma: 152
Posts: 6192
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

You are sending "Connection: keep-alive". That should be "Connection: close".
Code:
client.println("Connection: keep-alive");

edit: My server code is not set to use XML, ajax, php, asp or the like. You must add that to the server code if you want to use those extensions.
« Last Edit: July 03, 2014, 09:13:52 am by SurferTim » Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 6
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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 - downloaded 6 times.)
* web_server.ino (6.04 KB - downloaded 8 times.)
* wifi_control.ino (0.9 KB - downloaded 6 times.)
* index.htm (1.66 KB - downloaded 7 times.)
« Last Edit: July 15, 2014, 11:06:30 am by justinkgoh » Logged

Miramar Beach, Florida
Offline Offline
Faraday Member
**
Karma: 152
Posts: 6192
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
Code:
          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"))".
Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 6
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
Code:
          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:
Code:
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:
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;
        }
Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 6
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

Serial Monitor:
Code:
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 <script> and </script> 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.


* Arduino web server error page.PNG (89.88 KB, 1101x1024 - viewed 13 times.)
* index.htm (1.98 KB - downloaded 7 times.)
* justgage.js (8.99 KB - downloaded 3 times.)
* raphael.js (87.33 KB - downloaded 3 times.)
Logged

Miramar Beach, Florida
Offline Offline
Faraday Member
**
Karma: 152
Posts: 6192
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
« Last Edit: July 16, 2014, 08:51:14 am by SurferTim » Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 6
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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
Logged

Miramar Beach, Florida
Offline Offline
Faraday Member
**
Karma: 152
Posts: 6192
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 6
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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:
Code:
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:
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:
Code:
<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>
Logged

Pages: 1 [2]   Go Up
Jump to: