Arduino WebServer + SD Card + jQuery

8
March
2016

Here is the example of a Webserver created by using Arduino UNO. This example displays a webpage hosted on an SD card. The webpage contains CSS and Javascript files too. The Arduino code is equipped to handle those files as well. This example is used to turn two leds ON or OFF. Whenever the state of an led is changed, Arduino responds with a message which is displayed on the webpage. All of this is accomplished using jQuery's AJAX.

Arduino CODE:

/*--------------------------------------------------------------
  Program:      eth_websrv_SD_image

  Description:  Arduino web server that serves up a basic web
                page that displays an image.
  
  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.5 software
                Should be compatible with Arduino 1.0 +
                
                Requires index.htm, page2.htm and pic.jpg to be
                on the micro SD card in the Ethernet shield
                micro SD card socket.
  
  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:         7 March 2013
  Modified:     17 June 2013
 
  Author:       W.A. Smith, http://startingelectronics.org
--------------------------------------------------------------*/

#include 
#include 
#include 

// 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, 1, 21); // 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 FileName[10];
char req_index = 0;              // index into HTTP_req buffer

void setup()
{
    pinMode(2, OUTPUT);
    pinMode(7, OUTPUT);
    // disable Ethernet chip
    pinMode(10, OUTPUT);
    digitalWrite(10, HIGH);
    
    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.");
    
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
}

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
                    findFileName(HTTP_req);
                    if (StrContains(HTTP_req, "GET / ")
                                 || StrContains(HTTP_req, "GET /index.htm")) {
                        client.println("HTTP/1.1 200 OK");
                        client.println("Content-Type: text/html");
                        client.println("Connnection: close");
                        client.println();
                        webFile = SD.open("index.htm");        // open web page file
                    }
                    else if (StrContains(HTTP_req, "GET /jquery.js")) {
                        webFile = SD.open("jquery.js");
                        if (webFile) {
                            client.println("HTTP/1.1 200 OK");
                            client.println("Content-Type: application/javascript");
                            client.println();
                        }
                    }
                    else if (StrContains(HTTP_req, "GET /script.js")) {
                        webFile = SD.open("script.js");
                        if (webFile) {
                            client.println("HTTP/1.1 200 OK");
                            client.println("Content-Type: application/javascript");
                            client.println();
                        }
                    }
                    else if (StrContains(HTTP_req, "GET /style.css")) {
                        webFile = SD.open("style.css");
                        if (webFile) {
                            client.println("HTTP/1.1 200 OK");
                            client.println("Content-Type: text/css");
                            client.println();
                        }
                    }
                    else if (StrContains(HTTP_req, "GET /favicon.ico")) {
                        webFile = SD.open("favicon.ico");
                        if (webFile) {
                            client.println("HTTP/1.1 200 OK");
                            client.println("Content-Type: image/x-icon");                            
                            client.println();
                        }
                    }
                    else if (StrContains(HTTP_req, "GET /on")) {
                            digitalWrite(2, HIGH); 
                            digitalWrite(7, HIGH);
                            client.println("LEDs have been turned ON!");                        
                    }
                    else if (StrContains(HTTP_req, "GET /off")) {
                            digitalWrite(2, LOW); 
                            digitalWrite(7, LOW);
                            client.println("LEDs have been turned OFF!");                        
                    }
                    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
        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
void findFileName(char *str1)  {
  
  char *fname;
  
  
  if (strstr (str1, "GET / ") != 0) {
    // send a standard http response header ------ a page to display has been found  
  }
  else if (strstr (str1, "GET /") != 0) {
          fname = str1 + 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 (str1, " HTTP"))[0] = 0;
          // print the file we want
          Serial.print("Filename is ");
          Serial.println(fname); 
          Serial.print("Extension is ");
          Serial.println(get_filename_ext(fname));     
  }
}

const char *get_filename_ext(const char *filename) {
    const char *dot = strrchr(filename, '.');
    if(!dot || dot == filename) return "";
    return dot + 1;
}

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;
}


Main index.htm
        
        
        
        
        Ardu jQuery
        
        
        
        
        
        
        
        

Turn LED on Digital Pin 2 and 7

Switch state: Not requested...



script.js
// JavaScript Document
$(document).ready(function(e) {
	//GetSwitchState();
	
	$("#on").click(function(e) {       
		$("#off").removeAttr('checked');		
		TurnOn();
       });
	$("#off").click(function(e) {
		$("#on").removeAttr('checked');		
		TurnOff();
    });
	function TurnOn()	{
		$.get("/on", function(data, status){
    	    //alert("Data: " + data + "\nStatus: " + status);
			$("#switch_txt").html(data);
    	});
	}
	function TurnOff()	{
		$.get("/off", function(data, status){
     		//alert("Data: " + data + "\nStatus: " + status);
			$("#switch_txt").html(data);
    	});
	}
});


style.css
@charset "utf-8";
/* CSS Document */
.green	{
	color:green;
}
.red	{
	color:red;
}

By administrator at 11:04:46 AM 1 Comment(s)

Comments

lo que andaba buscando, sigan asi

By Gabriel on 7 Jul, 2016 at 04:09:38 PM

Add a Comment

Please enter the email address.Invalid format. (Won't be Displayed)
Notify me of followup comments
Enter the displayed Code: captcha