HTML page dosent load when i add too many buttons to control relays via ethernet

So i have a eight channel relay board which I m wanting to control via internet through a ethernet shield for my arduino

And i got this code from the net which works very well when I m controlling three to four relays of the eight channel board

but when i add buttons on the html page for more than four to five relays, the html page dosent load

Is there a way u can show me how can i include additional buttons in the code to control the entire eight channel relay board without exceeding the space which can be used for the html page

#include <SPI.h>
#include <Ethernet.h>
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 0x00, 0xAA, 0xBB, 0xCC, 0xDA, 0x02 };
IPAddress ip(192,168,1,177);
// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(80);
String readString = String(100); //string for fetching data from address
void setup()
{
  Serial.begin(9600);
  pinMode(6, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(7, OUTPUT);
 // start the Ethernet connection and the server
  Serial.println("Initiaizing ethernet...");
  // this uses a fixed address
  Ethernet.begin(mac, ip);
  // get an address with DHCP
  //if (Ethernet.begin(mac) == 0)
  //  Serial.println("Failed to configure Ethernet using DHCP");
  // give the card a second to initialize 
  delay(1000);
  server.begin();
  Serial.print("Home Automation Control Ready at IP address ");
  Serial.println(Ethernet.localIP());
}
void loop()
{
  // command received (one character)  '1' - activate garage door button
  char cmd = 0;          // 1 - pulse button
  boolean done = false;  // set to indicate that response is complete
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    readString = "";
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        //int i = c;
        //Serial.print("(");
        //Serial.print(i);
        //Serial.print(")");
        // store character received in receive string
        if (readString.length() < 100) {
          readString += (c);
        }
        // check for end of line
        if (c == '\n') {
            //Serial.print("Receved line: ");
            //Serial.print(readString);  
            // process line if its the "GET" request
            // a request looks like "GET /?1" or "GET /?2"
            if (readString.indexOf("GET") != -1) {
                if (readString.indexOf("?1") != -1)
                   cmd = '1';
                   if (readString.indexOf("?2") != -1)
                   cmd = '2';
                                      if (readString.indexOf("?3") != -1)
                   cmd = '3';
                                      if (readString.indexOf("?4") != -1)
                   cmd = '4';
                               if (readString.indexOf("?5") != -1)
                   cmd = '5';
                               if (readString.indexOf("?6") != -1)
                   cmd = '6';                 
                // check for other commands here. ie turn on light, etc.
                //if (readString.indexOf("?2") != -1)
                //   cmd = '2';   
            }              
           // if a blank line was received (just cr lf, length of 2), then its the end of the request
           if (readString.length() == 2) {
             if (cmd == '1'){
                Serial.println("Activate Button");
                digitalWrite(6, HIGH);
             }
                          if (cmd == '2'){
                Serial.println("Activate Button");
                digitalWrite(6, LOW);
             }
                                       if (cmd == '3'){
                Serial.println("Activate Button");
                digitalWrite(5, HIGH);
             }
                                       if (cmd == '4'){
                Serial.println("Activate Button");
                digitalWrite(5, LOW);
             }
                                                    if (cmd == '5'){
                Serial.println("Activate Button");
                digitalWrite(7, HIGH);
             }
                                       if (cmd == '6'){
                Serial.println("Activate Button");
                digitalWrite(7, LOW);
             }             
             // add other commands here
             // send web page back to client 
             Serial.println("sending web page");
             SendWebPage(client); 
             Serial.println("web page sent");
            cmd = 0;
            // break out and disconnect. This will tell the browser the request is complete without having to specify content-length
             break;
           }  // end of request reached
           // start line over            
           readString = "";
        }  // end of line reached
      }  // end data is available from client
    }  // end cient is connected
    // give the web browser time to receive the data
    Serial.println("delay before disconnect");
    delay(100);
    // close the connection:
    client.stop();
    Serial.println("client disonnected"); 
  }  // end client has been created
}
// send web page
void SendWebPage(EthernetClient client)
{
   client.println("HTTP/1.1 200 OK"); 
   client.println("Content-Type: text/html"); 
   // to specify the length, wooul have to construct the entire string and then get its length
   //client.println("Content-Length: 1234"); 
   client.println("Connnection: close"); 
   client.println(); 
   client.println("<!DOCTYPE HTML>");
   client.println("<html>");
   client.println("<head>");
   client.println("<title>Garage Door Control</title>");
   client.println("<style type='text/css'>");
   client.println(".label {font-size: 40px; text-align:center;}");
   client.println("button {width: 200px; height: 100px; font-size: 40px; -webkit-appearance: none; background-color:white; }");
   client.println("</style>");
   client.println("<script type='text/javascript'>");
   client.println("function OnButtonClicked(parm) { window.location.href=\"X?\" + parm; }");
   client.println("</script>");
   client.println("</head>");
   client.println("<body style=\"background-color:orange\">");
   client.println("<div class=\"label\">");
   client.println("Garage Door Control

");
   // future idea: could read a limit switch on the garage door here and tell the user if the door is currently open or closed
   /*
   if (digitalRead(DOOR_OPEN_INPUT) == HIGH)
     client.println("Door is Open"); 
   else  
     client.println("Door is Closed"); 
   client.println("
");
   */
   // door open / close button
   client.println("<button onclick=\"OnButtonClicked('1');\">Light ON</button>
");
   client.println("<div style=\"height:20px\"></div>");
   client.println("<button onclick=\"OnButtonClicked('2');\">Light Off</button>");
      client.println("<div style=\"height:20px\"></div>");
   client.println("<button onclick=\"OnButtonClicked('3');\">Fan ON</button>");
      client.println("<div style=\"height:20px\"></div>");
   client.println("<button onclick=\"OnButtonClicked('4');\">FAN OFF</button>");
         client.println("<div style=\"height:20px\"></div>");
   client.println("<button onclick=\"OnButtonClicked('5');\">Fan ON</button>");
         client.println("<div style=\"height:20px\"></div>");
   client.println("<button onclick=\"OnButtonClicked('6');\">FAN OFF</button>");
   // add more buttons here
   // button separator
   //client.println("<div style=\"height:20px\"></div>");
   //client.println("<button onclick=\"OnButtonClicked('2');\">Off</button>");
   client.println("</div>");
   client.println("</body>");
   client.println("</html>");
   client.println("");
}

GarageDoorStackOverflow.ino (7.25 KB)

abhijeetramgir:
So i have a eight channel relay board which I m wanting to control via internet through a ethernet shield for my arduino

And i got this code from the net which works very well when I m controlling three to four relays of the eight channel board

but when i add buttons on the html page for more than four to five relays, the html page dosent load

Is there a way u can show me how can i include additional buttons in the code to control the entire eight channel relay board without exceeding the space which can be used for the html page

#include <SPI.h>

#include <Ethernet.h>
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 0x00, 0xAA, 0xBB, 0xCC, 0xDA, 0x02 };
IPAddress ip(192,168,1,177);
// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);
String readString = String(100); //string for fetching data from address
void setup()
{
  Serial.begin(9600);
  pinMode(6, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(7, OUTPUT);
// start the Ethernet connection and the server
  Serial.println("Initiaizing ethernet...");
  // this uses a fixed address
  Ethernet.begin(mac, ip);
  // get an address with DHCP
  //if (Ethernet.begin(mac) == 0)
  //  Serial.println("Failed to configure Ethernet using DHCP");
  // give the card a second to initialize
  delay(1000);
  server.begin();
  Serial.print("Home Automation Control Ready at IP address ");
  Serial.println(Ethernet.localIP());
}
void loop()
{
  // command received (one character)  '1' - activate garage door button
  char cmd = 0;          // 1 - pulse button
  boolean done = false;  // set to indicate that response is complete
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    readString = "";
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        //int i = c;
        //Serial.print("(");
        //Serial.print(i);
        //Serial.print(")");
        // store character received in receive string
        if (readString.length() < 100) {
          readString += (c);
        }
        // check for end of line
        if (c == '\n') {
            //Serial.print("Receved line: ");
            //Serial.print(readString); 
            // process line if its the "GET" request
            // a request looks like "GET /?1" or "GET /?2"
            if (readString.indexOf("GET") != -1) {
                if (readString.indexOf("?1") != -1)
                  cmd = '1';
                  if (readString.indexOf("?2") != -1)
                  cmd = '2';
                                      if (readString.indexOf("?3") != -1)
                  cmd = '3';
                                      if (readString.indexOf("?4") != -1)
                  cmd = '4';
                              if (readString.indexOf("?5") != -1)
                  cmd = '5';
                              if (readString.indexOf("?6") != -1)
                  cmd = '6';               
                // check for other commands here. ie turn on light, etc.
                //if (readString.indexOf("?2") != -1)
                //  cmd = '2'; 
            }             
          // if a blank line was received (just cr lf, length of 2), then its the end of the request
          if (readString.length() == 2) {
            if (cmd == '1'){
                Serial.println("Activate Button");
                digitalWrite(6, HIGH);
            }
                          if (cmd == '2'){
                Serial.println("Activate Button");
                digitalWrite(6, LOW);
            }
                                      if (cmd == '3'){
                Serial.println("Activate Button");
                digitalWrite(5, HIGH);
            }
                                      if (cmd == '4'){
                Serial.println("Activate Button");
                digitalWrite(5, LOW);
            }
                                                    if (cmd == '5'){
                Serial.println("Activate Button");
                digitalWrite(7, HIGH);
            }
                                      if (cmd == '6'){
                Serial.println("Activate Button");
                digitalWrite(7, LOW);
            }           
            // add other commands here
            // send web page back to client
            Serial.println("sending web page");
            SendWebPage(client);
            Serial.println("web page sent");
            cmd = 0;
            // break out and disconnect. This will tell the browser the request is complete without having to specify content-length
            break;
          }  // end of request reached
          // start line over           
          readString = "";
        }  // end of line reached
      }  // end data is available from client
    }  // end cient is connected
    // give the web browser time to receive the data
    Serial.println("delay before disconnect");
    delay(100);
    // close the connection:
    client.stop();
    Serial.println("client disonnected");
  }  // end client has been created
}
// send web page
void SendWebPage(EthernetClient client)
{
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  // to specify the length, wooul have to construct the entire string and then get its length
  //client.println("Content-Length: 1234");
  client.println("Connnection: close");
  client.println();
  client.println("");
  client.println("");
  client.println("");
  client.println("Garage Door Control");
  client.println("");
  client.println(".label {font-size: 40px; text-align:center;}");
  client.println("button {width: 200px; height: 100px; font-size: 40px; -webkit-appearance: none; background-color:white; }");
  client.println("");
  client.println("");
  client.println("");
  client.println("<body style="background-color:orange">");
  client.println("<div class="label">");
  client.println("Garage Door Control

");
  // future idea: could read a limit switch on the garage door here and tell the user if the door is currently open or closed
  /*
  if (digitalRead(DOOR_OPEN_INPUT) == HIGH)
    client.println("Door is Open");
  else 
    client.println("Door is Closed");
  client.println("
");
  */
  // door open / close button
  client.println("<button onclick="OnButtonClicked('1');">Light ON
");
  client.println("<div style="height:20px">");
  client.println("<button onclick="OnButtonClicked('2');">Light Off");
      client.println("<div style="height:20px">");
  client.println("<button onclick="OnButtonClicked('3');">Fan ON");
      client.println("<div style="height:20px">");
  client.println("<button onclick="OnButtonClicked('4');">FAN OFF");
        client.println("<div style="height:20px">");
  client.println("<button onclick="OnButtonClicked('5');">Fan ON");
        client.println("<div style="height:20px">");
  client.println("<button onclick="OnButtonClicked('6');">FAN OFF");
  // add more buttons here
  // button separator
  //client.println("<div style="height:20px">");
  //client.println("<button onclick="OnButtonClicked('2');">Off");
  client.println("");
  client.println("");
  client.println("");
  client.println("");
}

you have a lot of text, and none of it is coded to use flash, instead all if it using the already little amount of RAM the processor has. try adding the "F()" maro to your code as follows:

Current code:

client.println("</html>");


updated code:

client.println(F("</html>"));
[\code]

you are more than likely running out of RAM. see if this fixes you issue.

wallaceb:
you have a lot of text, and none of it is coded to use flash, instead all if it using the already little amount of RAM the processor has. try adding the "F()" maro to your code as follows:

Current code:

client.println("");

updated code:

client.println(F(""));
[\code]

you are more than likely running out of RAM. see if this fixes you issue.

Hey thanks for helping

but that didn't work

do u have any other way where i can include eight buttons with least possible html code? cause this code i found works great and dosen't hang

thanks a lot for your help

wallaceb:
you have a lot of text, and none of it is coded to use flash, instead all if it using the already little amount of RAM the processor has. try adding the "F()" maro to your code as follows:

Current code:

client.println("");

updated code:

client.println(F(""));
[\code]

you are more than likely running out of RAM. see if this fixes you issue.

If i use the Arduino Mega 2560, will i be able to load such a big HTML page? cause it has more memory

thanks

If you want comments on your code, you probably should post the code. when you just say "but that didn't work" there is always the possibility you corrupted the code or do not really didn't understand or implement the F() concept correctly.

As already pointed out, your problem is due to resource limitations. You could use a board with higher resources, but if you start expanding your application, you'll run into the same problems there as well...

The usage of the F() Macro is already a very important tool to reduce RAM usage. another would be to send the Webpage only once and then only exchange the required data (e.g. by XML or AJAX). You'll find some Help on this topic in one of my blog-posts: Noser Blog An Arduino-Based Webserver - Noser Blog

If that still doesn't fix the problem, think of using other protocols instead of HTTP. Some Advice on this is also available on my company's blog: Noser Blog Lightweight Network Communication - Noser Blog

Best

riesens

riesens:
As already pointed out, your problem is due to resource limitations. You could use a board with higher resources, but if you start expanding your application, you'll run into the same problems there as well...

The usage of the F() Macro is already a very important tool to reduce RAM usage. another would be to send the Webpage only once and then only exchange the required data (e.g. by XML or AJAX). You'll find some Help on this topic in one of my blog-posts: Noser Blog An Arduino-Based Webserver - Noser Blog

If that still doesn't fix the problem, think of using other protocols instead of HTTP. Some Advice on this is also available on my company's blog: Noser Blog Lightweight Network Communication - Noser Blog

Best

riesens

thanks alot riesens!

zoomkat:
If you want comments on your code, you probably should post the code. when you just say "but that didn't work" there is always the possibility you corrupted the code or do not really didn't understand or implement the F() concept correctly.

Sorry about that

Could u please tell me how i can implement the F() macro?

this is the code with the F() macro

#include <SPI.h>
#include <Ethernet.h>

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,177);

// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(80);



String readString = String(100); //string for fetching data from address

void setup()
{
  Serial.begin(9600);

  pinMode(6, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(7, OUTPUT);
  pinMode(8, OUTPUT);

  // start the Ethernet connection and the server:

  Serial.println("Initiaizing ethernet...");

  // this uses a fixed address
  Ethernet.begin(mac, ip);

  // get an address with DHCP
  //if (Ethernet.begin(mac) == 0)
  //  Serial.println("Failed to configure Ethernet using DHCP");

  // give the card a second to initialize 
  delay(1000);

  server.begin();

  Serial.print("Garage Door Opener Control Ready at IP address ");
  Serial.println(Ethernet.localIP());
}

void loop()
{
  // command received (one character)  '1' - activate garage door button
  char cmd = 0;          // 1 - pulse button
  boolean done = false;  // set to indicate that response is complete

  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {

    Serial.println("new client");
    readString = "";

    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        //int i = c;
        //Serial.print("(");
        //Serial.print(i);
        //Serial.print(")");

        // store character received in receive string
        if (readString.length() < 100) {
          readString += (c);
        }

        // check for end of line
        if (c == '\n') {
            //Serial.print("Receved line: ");
            //Serial.print(readString);  

            // process line if its the "GET" request
            // a request looks like "GET /?1" or "GET /?2"
            if (readString.indexOf("GET") != -1) {
                if (readString.indexOf("?1") != -1)
                   cmd = '1';
                // check for other commands here. ie turn on light, etc.
                if (readString.indexOf("?2") != -1)
                   cmd = '2';  
                                  if (readString.indexOf("?3") != -1)
                   cmd = '3'; 
                                  if (readString.indexOf("?4") != -1)
                   cmd = '4'; 
                                  if (readString.indexOf("?5") != -1)
                   cmd = '5'; 
                                  if (readString.indexOf("?6") != -1)
                   cmd = '6'; 
                                  if (readString.indexOf("?7") != -1)
                   cmd = '7';
                                 if (readString.indexOf("?8") != -1)
                   cmd = '8'; 
   
            }              

           // if a blank line was received (just cr lf, length of 2), then its the end of the request
           if (readString.length() == 2) {
             if (cmd == '1'){
                Serial.println("Activate Button");
                digitalWrite(6, HIGH);

             }
                          if (cmd == '2'){
                Serial.println("Activate Button");
                digitalWrite(6, LOW);

             }
                          if (cmd == '3'){
                Serial.println("Activate Button");
                digitalWrite(5, HIGH);

             }
                          if (cmd == '4'){
                Serial.println("Activate Button");
                digitalWrite(5, LOW);

             }
                          if (cmd == '5'){
                Serial.println("Activate Button");
                digitalWrite(7, HIGH);

             }
                          if (cmd == '6'){
                Serial.println("Activate Button");
                digitalWrite(7, LOW);

             }
                          if (cmd == '7'){
                Serial.println("Activate Button");
                digitalWrite(8, HIGH);

             }
                          if (cmd == '8'){
                Serial.println("Activate Button");
                digitalWrite(8, LOW);

             }

             // add other commands here

             // send web page back to client 
             Serial.println("sending web page");
             SendWebPage(client); 
             Serial.println("web page sent");

             cmd = 0;

             // break out and disconnect. This will tell the browser the request is complete without having to specify content-length
             break;

           }  // end of request reached

           // start line over            
           readString = "";
        }  // end of line reached
      }  // end data is available from client
    }  // end cient is connected
    // give the web browser time to receive the data
    Serial.println("delay before disconnect");
    delay(100);
    // close the connection:
    client.stop();
    Serial.println("client disonnected"); 
  }  // end client has been created
}

// send web page
void SendWebPage(EthernetClient client)
{
   client.println("HTTP/1.1 200 OK"); 
   client.println("Content-Type: text/html"); 
   // to specify the length, wooul have to construct the entire string and then get its length
   //client.println("Content-Length: 1234"); 
   client.println("Connnection: close"); 
   client.println(); 

   client.println("<!DOCTYPE HTML>");
   client.println(F("<html>"));
   client.println("<head>");
   client.println("<title>Home Automation Control</title>");

   client.println("<style type='text/css'>");
   client.println(".label {font-size: 30px; text-align:center;}");
   client.println("button {width: 160px; height: 70px; font-size: 30px; -webkit-appearance: none; background-color:white; }");
   client.println("</style>");

   client.println("<script type='text/javascript'>");

   client.println("function OnButtonClicked(parm) { window.location.href=\"X?\" + parm; }");

   client.println("</script>");

   client.println("</head>");

   client.println("<body style=\"background-color:orange\">");

   client.println("<div class=\"label\">");

   client.println("Home Auotmation Control

");

   // future idea: could read a limit switch on the garage door here and tell the user if the door is currently open or closed
   /*
   if (digitalRead(DOOR_OPEN_INPUT) == HIGH)
     client.println("Door is Open"); 
   else  
     client.println("Door is Closed"); 
   client.println("
");
   */

   // door open / close button
   if (digitalRead(6)==LOW)
   {
   client.println("<button onclick=\"OnButtonClicked('1');\">1ON</button>

");
   }if (digitalRead(6)==HIGH){
   client.println("<button onclick=\"OnButtonClicked('2');\">1Off</button>

");
   }   if (digitalRead(5)==LOW)
   {
   client.println("<button onclick=\"OnButtonClicked('3');\">2ON</button>

");
   }if (digitalRead(5)==HIGH){
   client.println("<button onclick=\"OnButtonClicked('4');\">2Off</button>

");
   }  if (digitalRead(7)==LOW)
   {
   client.println("<button onclick=\"OnButtonClicked('5');\">3ON</button>

");
   }if (digitalRead(7)==HIGH){
   client.println("<button onclick=\"OnButtonClicked('6');\">3Off</button>

");
     }   if (digitalRead(8)==LOW)
   { 
   client.println("<button onclick=\"OnButtonClicked('7');\">4ON</button>

");
   }if (digitalRead(8)==HIGH){
     
   client.println("<button onclick=\"OnButtonClicked('8');\">4Off</button>

");
   }


   // add more buttons here
   // button separator



   client.println("</div>");

   client.println("</body>");
   client.println(F("</html>"));

   client.println("");
}

this is the code with the F() macro

I only see one line in your code using the F() macro. Below is what is being talked about putting static lines of text in F() macros.

            //now output HTML data header
          if(readString.indexOf('?') >=0) { //don't send new page
            client.println(F("HTTP/1.1 204 Zoomkat"));
            client.println();
            client.println();  
          }
          else {   
            client.println(F("HTTP/1.1 200 OK")); //send new page on browser request
            client.println(F("Content-Type: text/html"));
            client.println();

            client.println(F("<HTML>"));
            client.println(F("<HEAD>"));
            client.println(F("<TITLE>Arduino GET test page</TITLE>"));
            client.println(F("</HEAD>"));
            client.println(F("<BODY>"));

            client.println(F("<H1>Zoomkat's simple Arduino 1.0 button</H1>"));

            // DIY buttons
            client.println(F("Pin5"));
            client.println(F("<a href=/?on2 target=inlineframe>ON</a>")); 
            client.println(F("<a href=/?off3 target=inlineframe>OFF</a>

")); 

            client.println(F("Pin6"));
            client.println(F("<a href=/?on4 target=inlineframe>ON</a>")); 
            client.println(F("<a href=/?off5 target=inlineframe>OFF</a>

")); 

            client.println(F("Pin7"));
            client.println(F("<a href=/?on6 target=inlineframe>ON</a>")); 
            client.println(F("<a href=/?off7 target=inlineframe>OFF</a>

")); 

            client.println(F("Pin8"));
            client.println(F("<a href=/?on8 target=inlineframe>ON</a>")); 
            client.println(F("<a href=/?off9 target=inlineframe>OFF</a>

")); 

            client.println(F("Pins"));
            client.println(F("&nbsp;<a href=/?off2468 target=inlineframe>ALL ON</a>")); 
            client.println(F("&nbsp;<a href=/?off3579 target=inlineframe>ALL OFF</a>

")); 

            
            
                      // mousedown buttons
          client.println(F("<input type=button value=ON onmousedown=location.href='/?on4;' target=inlineframe>")); 
          client.println(F("<input type=button value=OFF onmousedown=location.href='/?off5;' target=inlineframe>"));        
          client.println(F("&nbsp;<input type=button value='ALL OFF' onmousedown=location.href='/?off3579;' target=inlineframe>

"));        
                   
          // mousedown radio buttons
          client.println(F("<input type=radio onmousedown=location.href='/?on6;' target=inlineframe>ON</>")); 
          client.println(F("<input type=radio onmousedown=location.href='/?off7; target=inlineframe'>OFF</>")); 
          client.println(F("&nbsp;<input type=radio onmousedown=location.href='/?off3579;' target=inlineframe>ALL OFF</>

"));    
   
          
          // custom buttons
          client.print(F("<input type=submit value=ON target=inlineframe style=width:100px;height:45px onClick=location.href='/?on8;'>"));
          client.print(F("<input type=submit value=OFF target=inlineframe style=width:100px;height:45px onClick=location.href='/?off9;' target=inlineframe>"));
          client.print(F("&nbsp;<input type=submit value='ALL OFF' target=inlineframe style=width:100px;height:45px onClick=location.href='/?off3579;' target=inlineframe>"));

            
            client.println(F("<IFRAME name=inlineframe style='display:none'>"));          
            client.println(F("</IFRAME>"));

            client.println(F("</BODY>"));
            client.println(F("</HTML>"));
          }

Code with the whole web page inside an F() macro.

//get submit box code
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html or use a '
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields
//note that the below bug fix may be required
// http://code.google.com/p/arduino/issues/detail?id=605

#include <SPI.h>
#include <Ethernet.h>

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

String readString;

//////////////////////

void setup(){

 pinMode(5, OUTPUT); //pin selected to control
 pinMode(6, OUTPUT); //pin selected to control
 pinMode(7, OUTPUT); //pin selected to control
 pinMode(8, OUTPUT); //pin selected to control
 //start Ethernet
 Ethernet.begin(mac, ip, gateway, gateway, subnet);
 server.begin();

 //enable serial data print
 Serial.begin(9600);
 Serial.println(F("server text box test1")); // so I can keep track of what is loaded
}

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); //see what was captured

         //now output HTML data header

client.print(F(  //start F() macro
"HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n\r\n"
"<HTML>"
"<HEAD>"
"<meta name='apple-mobile-web-app-capable' content='yes' />"
"<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />"
"<TITLE>JAVA Page</TITLE>"
"</HEAD>"
"<BODY>"
"<H1>JAVA</H1>"
"<hr />"
"
"
"<FORM ACTION='/' method=get >"
"Enter Code: <INPUT TYPE=TEXT NAME='LED' VALUE='' SIZE='25' MAXLENGTH='50'>
"
"
"
"<input type=submit value='5 ON' style=width:100px;height:45px onClick=location.href='/?on8;'><input type=submit value='5 OFF' style=width:100px;height:45px onClick=location.href='/?off9;'>
"
"<input type=submit value='6 ON' style=width:100px;height:45px onClick=location.href='/?on8;'><input type=submit value='6 OFF' style=width:100px;height:45px onClick=location.href='/?off9;'>
"
"<input type=submit value='7 ON' style=width:100px;height:45px onClick=location.href='/?on8;'><input type=submit value='7 OFF' style=width:100px;height:45px onClick=location.href='/?off9;'>
"
"<input type=submit value='8 ON' style=width:100px;height:45px onClick=location.href='/?on8;'><input type=submit value='8 OFF' style=width:100px;height:45px onClick=location.href='/?off9;'>
"
"</FORM>"
"</BODY>"
"</HTML>"
));   //end F() macro

         delay(1);
         //stopping client
         client.stop();

         /////////////////////
         if(readString.indexOf("5") >0)//checks for on
         {
           digitalWrite(5, HIGH);    // set pin 5 high
           Serial.println(F("Led On"));
         }
         if(readString.indexOf("50") >0)//checks for off
         {
           digitalWrite(5, LOW);    // set pin 5 low
           Serial.println(F("Led Off"));
         }
         
         if(readString.indexOf("6") >0)//checks for on
         {
           digitalWrite(6, HIGH);    // set pin 6 high
           Serial.println(F("Led 6 On"));
         }
         if(readString.indexOf("60") >0)//checks for off
         {
           digitalWrite(6, LOW);    // set pin 6 low
           Serial.println(F("Led 6 Off"));
         }
         
         if(readString.indexOf("7") >0)//checks for on
         {
           digitalWrite(7, HIGH);    // set pin 7 high
           Serial.println(F("Led On"));
         }
         if(readString.indexOf("70") >0)//checks for off
         {
           digitalWrite(7, LOW);    // set pin 7 low
           Serial.println(F("Led Off"));
         }
         
         if(readString.indexOf("8") >0)//checks for on
         {
           digitalWrite(8, HIGH);    // set pin 8 high
           Serial.println(F("Led On"));
         }
         if(readString.indexOf("80") >0)//checks for off
         {
           digitalWrite(8, LOW);    // set pin 8 low
           Serial.println(F("Led Off"));
         }
         //clearing string for next read
         readString="";

       }
     }
   }
 }
}

zoomkat:
Code with the whole web page inside an F() macro.

//get submit box code

//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html or use a '
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields
//note that the below bug fix may be required
// Google Code Archive - Long-term storage for Google Code Project Hosting.

#include <SPI.h>
#include <Ethernet.h>

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

String readString;

//////////////////////

void setup(){

pinMode(5, OUTPUT); //pin selected to control
pinMode(6, OUTPUT); //pin selected to control
pinMode(7, OUTPUT); //pin selected to control
pinMode(8, OUTPUT); //pin selected to control
//start Ethernet
Ethernet.begin(mac, ip, gateway, gateway, subnet);
server.begin();

//enable serial data print
Serial.begin(9600);
Serial.println(F("server text box test1")); // so I can keep track of what is loaded
}

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); //see what was captured

//now output HTML data header

client.print(F(  //start F() macro
"HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n\r\n"
""
""
""
""
"JAVA Page"
""
""
"

JAVA

"
"
"
"
"
""
"Enter Code:
"
"
"
"<input type=submit value='5 ON' style=width:100px;height:45px onClick=location.href='/?on8;'><input type=submit value='5 OFF' style=width:100px;height:45px onClick=location.href='/?off9;'>
"
"<input type=submit value='6 ON' style=width:100px;height:45px onClick=location.href='/?on8;'><input type=submit value='6 OFF' style=width:100px;height:45px onClick=location.href='/?off9;'>
"
"<input type=submit value='7 ON' style=width:100px;height:45px onClick=location.href='/?on8;'><input type=submit value='7 OFF' style=width:100px;height:45px onClick=location.href='/?off9;'>
"
"<input type=submit value='8 ON' style=width:100px;height:45px onClick=location.href='/?on8;'><input type=submit value='8 OFF' style=width:100px;height:45px onClick=location.href='/?off9;'>
"
""
""
""
));  //end F() macro

delay(1);
        //stopping client
        client.stop();

/////////////////////
        if(readString.indexOf("5") >0)//checks for on
        {
          digitalWrite(5, HIGH);    // set pin 5 high
          Serial.println(F("Led On"));
        }
        if(readString.indexOf("50") >0)//checks for off
        {
          digitalWrite(5, LOW);    // set pin 5 low
          Serial.println(F("Led Off"));
        }
       
        if(readString.indexOf("6") >0)//checks for on
        {
          digitalWrite(6, HIGH);    // set pin 6 high
          Serial.println(F("Led 6 On"));
        }
        if(readString.indexOf("60") >0)//checks for off
        {
          digitalWrite(6, LOW);    // set pin 6 low
          Serial.println(F("Led 6 Off"));
        }
       
        if(readString.indexOf("7") >0)//checks for on
        {
          digitalWrite(7, HIGH);    // set pin 7 high
          Serial.println(F("Led On"));
        }
        if(readString.indexOf("70") >0)//checks for off
        {
          digitalWrite(7, LOW);    // set pin 7 low
          Serial.println(F("Led Off"));
        }
       
        if(readString.indexOf("8") >0)//checks for on
        {
          digitalWrite(8, HIGH);    // set pin 8 high
          Serial.println(F("Led On"));
        }
        if(readString.indexOf("80") >0)//checks for off
        {
          digitalWrite(8, LOW);    // set pin 8 low
          Serial.println(F("Led Off"));
        }
        //clearing string for next read
        readString="";

}
    }
  }
}
}

Hey, thanks for the code

i used your code the webpage loads perfect but it does not switch on the relays

and when i used your code as a guidline and set up my existing code, it still gave me the same problem.?

thanks a lot for your help

abhijeet

but when i add buttons on the html page for more than four to five relays, the html page dosent load

How are you powering the relays? Powering them from the arduino may cause the arduino to reset.

Hey,

I have a software problem, I'm controlling relays through ethernet shield and arduino. I got a code from the net which works great and i can control the relays perfectly.
But the problem I'm getting is when i add too many buttons on the HTML page, the HTML page just doesn't load. Only when I'm using max four buttons it works, but when i add more than four it doesn't work.
I have provided the code below, please if anyone can help me add more buttons without using too much memory i would have solved my problem.

#include <SPI.h>
#include <Ethernet.h>

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,177);

// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(80);



String readString = String(100); //string for fetching data from address

void setup()
{
  Serial.begin(9600);

  pinMode(6, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(7, OUTPUT);
  pinMode(8, OUTPUT);

  // start the Ethernet connection and the server:

  Serial.println(F("Initiaizing ethernet..."));

  // this uses a fixed address
  Ethernet.begin(mac, ip);

  // get an address with DHCP
  //if (Ethernet.begin(mac) == 0)
  //  Serial.println("Failed to configure Ethernet using DHCP");

  // give the card a second to initialize 
  delay(1000);

  server.begin();

  Serial.print(F("Garage Door Opener Control Ready at IP address "));
  Serial.println(Ethernet.localIP());
}

void loop()
{
  // command received (one character)  '1' - activate garage door button
  char cmd = 0;          // 1 - pulse button
  boolean done = false;  // set to indicate that response is complete

  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {

    Serial.println(F("new client"));
    readString = "";

    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        //int i = c;
        //Serial.print("(");
        //Serial.print(i);
        //Serial.print(")");

        // store character received in receive string
        if (readString.length() < 100) {
          readString += (c);
        }

        // check for end of line
        if (c == '\n') {
            //Serial.print("Receved line: ");
            //Serial.print(readString);  

            // process line if its the "GET" request
            // a request looks like "GET /?1" or "GET /?2"
            if (readString.indexOf("GET") != -1) {
                if (readString.indexOf("?1") != -1)
                   cmd = '1';
                // check for other commands here. ie turn on light, etc.
                if (readString.indexOf("?2") != -1)
                   cmd = '2';  
                                  if (readString.indexOf("?3") != -1)
                   cmd = '3'; 
                                  if (readString.indexOf("?4") != -1)
                   cmd = '4'; 
                                  if (readString.indexOf("?5") != -1)
                   cmd = '5'; 
                                  if (readString.indexOf("?6") != -1)
                   cmd = '6'; 
                                  if (readString.indexOf("?7") != -1)
                   cmd = '7';
                                 if (readString.indexOf("?8") != -1)
                   cmd = '8'; 
   
            }              

           // if a blank line was received (just cr lf, length of 2), then its the end of the request
           if (readString.length() == 2) {
             if (cmd == '1'){
                Serial.println(F("Activate Button"));
                digitalWrite(6, HIGH);

             }
                          if (cmd == '2'){
                Serial.println(F("Activate Button"));
                digitalWrite(6, LOW);

             }
                          if (cmd == '3'){
                Serial.println(F("Activate Button"));
                digitalWrite(5, HIGH);

             }
                          if (cmd == '4'){
                Serial.println(F("Activate Button"));
                digitalWrite(5, LOW);

             }
                          if (cmd == '5'){
                Serial.println(F("Activate Button"));
                digitalWrite(7, HIGH);

             }
                          if (cmd == '6'){
                Serial.println(F("Activate Button"));
                digitalWrite(7, LOW);

             }
                          if (cmd == '7'){
                Serial.println(F("Activate Button"));
                digitalWrite(8, HIGH);

             }
                          if (cmd == '8'){
                Serial.println(F("Activate Button"));
                digitalWrite(8, LOW);

             }

             // add other commands here

             // send web page back to client 
             Serial.println(F("sending web page"));
             SendWebPage(client); 
             Serial.println(F("web page sent"));

             cmd = 0;

             // break out and disconnect. This will tell the browser the request is complete without having to specify content-length
             break;

           }  // end of request reached

           // start line over            
           readString = "";
        }  // end of line reached
      }  // end data is available from client
    }  // end cient is connected
    // give the web browser time to receive the data
    Serial.println(F("delay before disconnect"));
    delay(100);
    // close the connection:
    client.stop();
    Serial.println(F("client disonnected")); 
  }  // end client has been created
}

// send web page
void SendWebPage(EthernetClient client)
{
   client.println(F("HTTP/1.1 200 OK")); 
   client.println(F("Content-Type: text/html")); 
   // to specify the length, wooul have to construct the entire string and then get its length
   //client.println("Content-Length: 1234"); 
   client.println(F("Connnection: close")); 
   client.println(); 

   client.println(F("<!DOCTYPE HTML>"));
   client.println(F("<html>"));
   client.println(F("<head>"));
   client.println(F("<title>Home Automation Control</title>"));

   client.println(F("<style type='text/css'>"));
   client.println(F(".label {font-size: 30px; text-align:center;}"));
   client.println(F("button {width: 160px; height: 70px; font-size: 30px; -webkit-appearance: none; background-color:#dfe3ee; }"));
   client.println(F("</style>"));

   client.println(F("<script type='text/javascript'>"));

   client.println(F("function OnButtonClicked(parm) { window.location.href=\"X?\" + parm; }"));

   client.println(F("</script>"));

   client.println(F("</head>"));

   client.println(F("<body style=\"background-color:#3b5998\">"));

   client.println(F("<div class=\"label\">"));

   client.println(F("Home Auotmation Control

"));

   // future idea: could read a limit switch on the garage door here and tell the user if the door is currently open or closed
   /*
   if (digitalRead(DOOR_OPEN_INPUT) == HIGH)
     client.println("Door is Open"); 
   else  
     client.println("Door is Closed"); 
   client.println("
");
   */

   // door open / close button
   if (digitalRead(6)==LOW)
   {
   client.println(F("<button onclick=\"OnButtonClicked('1');\">1ON</button>

"));
   }if (digitalRead(6)==HIGH){
   client.println(F("<button onclick=\"OnButtonClicked('2');\">1Off</button>

"));
   }   if (digitalRead(5)==LOW)
   {
   client.println(F("<button onclick=\"OnButtonClicked('3');\">2ON</button>

"));
   }if (digitalRead(5)==HIGH){
   client.println(F("<button onclick=\"OnButtonClicked('4');\">2Off</button>

"));
   }  if (digitalRead(7)==LOW)
   {
   client.println(F("<button onclick=\"OnButtonClicked('5');\">3ON</button>

"));
   }if (digitalRead(7)==HIGH){
   client.println(F("<button onclick=\"OnButtonClicked('6');\">3Off</button>

"));
     }   if (digitalRead(8)==LOW)
   { 
   client.println(F("<button onclick=\"OnButtonClicked('7');\">4ON</button>

"));
   }if (digitalRead(8)==HIGH){
     
   client.println(F("<button onclick=\"OnButtonClicked('8');\">4Off</button>

"));
   }


   // add more buttons here
   // button separator



   client.println(F("</div>"));

   client.println(F("</body>"));
   client.println(F("</html>"));

   client.println("");
}

I would really appreciate if someone could help me out

Thanks
Abhijeet

briankTHISISITF__.ino (7.76 KB)

Try to store the Webpage on the SD-Card an send it from there instead of having all the stuff in your Program-Memory. That Aspect is also described on the Blog posted earlier: Noser Blog An Arduino-Based Webserver - Noser Blog

riesens:
Try to store the Webpage on the SD-Card an send it from there instead of having all the stuff in your Program-Memory. That Aspect is also described on the Blog posted earlier: Noser Blog An Arduino-Based Webserver - Noser Blog

Hey thanks for the input

I'm sorry but i didn't understand much in the link you sent me.
Please can you show me how i can implement the "store the Webpage on the SD-Card an send it from there instead of having all the stuff in your Program-Memory" in my existing code given below, I would really appreciate it

#include <SPI.h>
#include <Ethernet.h>

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,177);

// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(80);



String readString = String(100); //string for fetching data from address

void setup()
{
  Serial.begin(9600);

  pinMode(6, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(7, OUTPUT);
  pinMode(8, OUTPUT);

  // start the Ethernet connection and the server:

  Serial.println("Initiaizing ethernet...");

  // this uses a fixed address
  Ethernet.begin(mac, ip);

  // get an address with DHCP
  //if (Ethernet.begin(mac) == 0)
  //  Serial.println("Failed to configure Ethernet using DHCP");

  // give the card a second to initialize 
  delay(1000);

  server.begin();

  Serial.print("Garage Door Opener Control Ready at IP address ");
  Serial.println(Ethernet.localIP());
}

void loop()
{
  // command received (one character)  '1' - activate garage door button
  char cmd = 0;          // 1 - pulse button
  boolean done = false;  // set to indicate that response is complete

  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {

    Serial.println("new client");
    readString = "";

    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        //int i = c;
        //Serial.print("(");
        //Serial.print(i);
        //Serial.print(")");

        // store character received in receive string
        if (readString.length() < 100) {
          readString += (c);
        }

        // check for end of line
        if (c == '\n') {
            //Serial.print("Receved line: ");
            //Serial.print(readString);  

            // process line if its the "GET" request
            // a request looks like "GET /?1" or "GET /?2"
            if (readString.indexOf("GET") != -1) {
                if (readString.indexOf("?1") != -1)
                   cmd = '1';
                // check for other commands here. ie turn on light, etc.
                if (readString.indexOf("?2") != -1)
                   cmd = '2';  
                                  if (readString.indexOf("?3") != -1)
                   cmd = '3'; 
                                  if (readString.indexOf("?4") != -1)
                   cmd = '4'; 
                                  if (readString.indexOf("?5") != -1)
                   cmd = '5'; 
                                  if (readString.indexOf("?6") != -1)
                   cmd = '6'; 
                                  if (readString.indexOf("?7") != -1)
                   cmd = '7';
                                 if (readString.indexOf("?8") != -1)
                   cmd = '8'; 
   
            }              

           // if a blank line was received (just cr lf, length of 2), then its the end of the request
           if (readString.length() == 2) {
             if (cmd == '1'){
                Serial.println("Activate Button");
                digitalWrite(6, HIGH);

             }
                          if (cmd == '2'){
                Serial.println("Activate Button");
                digitalWrite(6, LOW);

             }
                          if (cmd == '3'){
                Serial.println("Activate Button");
                digitalWrite(5, HIGH);

             }
                          if (cmd == '4'){
                Serial.println("Activate Button");
                digitalWrite(5, LOW);

             }
                          if (cmd == '5'){
                Serial.println("Activate Button");
                digitalWrite(7, HIGH);

             }
                          if (cmd == '6'){
                Serial.println("Activate Button");
                digitalWrite(7, LOW);

             }
                          if (cmd == '7'){
                Serial.println("Activate Button");
                digitalWrite(8, HIGH);

             }
                          if (cmd == '8'){
                Serial.println("Activate Button");
                digitalWrite(8, LOW);

             }

             // add other commands here

             // send web page back to client 
             Serial.println("sending web page");
             SendWebPage(client); 
             Serial.println("web page sent");

             cmd = 0;

             // break out and disconnect. This will tell the browser the request is complete without having to specify content-length
             break;

           }  // end of request reached

           // start line over            
           readString = "";
        }  // end of line reached
      }  // end data is available from client
    }  // end cient is connected
    // give the web browser time to receive the data
    Serial.println("delay before disconnect");
    delay(100);
    // close the connection:
    client.stop();
    Serial.println("client disonnected"); 
  }  // end client has been created
}

// send web page
void SendWebPage(EthernetClient client)
{
   client.println("HTTP/1.1 200 OK"); 
   client.println("Content-Type: text/html"); 
   // to specify the length, wooul have to construct the entire string and then get its length
   //client.println("Content-Length: 1234"); 
   client.println("Connnection: close"); 
   client.println(); 

   client.println("<!DOCTYPE HTML>");
   client.println("<html>");
   client.println("<head>");
   client.println("<title>Home Automation Control</title>");

   client.println("<style type='text/css'>");
   client.println(".label {font-size: 30px; text-align:center;}");
   client.println("button {width: 160px; height: 70px; font-size: 30px; -webkit-appearance: none; background-color:#dfe3ee; }");
   client.println("</style>");

   client.println("<script type='text/javascript'>");

   client.println("function OnButtonClicked(parm) { window.location.href=\"X?\" + parm; }");

   client.println("</script>");

   client.println("</head>");

   client.println("<body style=\"background-color:#3b5998\">");

   client.println("<div class=\"label\">");

   client.println("Home Auotmation Control

");

   // future idea: could read a limit switch on the garage door here and tell the user if the door is currently open or closed
   /*
   if (digitalRead(DOOR_OPEN_INPUT) == HIGH)
     client.println("Door is Open"); 
   else  
     client.println("Door is Closed"); 
   client.println("
");
   */

   // door open / close button
   if (digitalRead(6)==LOW)
   {
   client.println("<button onclick=\"OnButtonClicked('1');\">1ON</button>

");
   }if (digitalRead(6)==HIGH){
   client.println("<button onclick=\"OnButtonClicked('2');\">1Off</button>

");
   }   if (digitalRead(5)==LOW)
   {
   client.println("<button onclick=\"OnButtonClicked('3');\">2ON</button>

");
   }if (digitalRead(5)==HIGH){
   client.println("<button onclick=\"OnButtonClicked('4');\">2Off</button>

");
   }  if (digitalRead(7)==LOW)
   {
   client.println("<button onclick=\"OnButtonClicked('5');\">3ON</button>

");
   }if (digitalRead(7)==HIGH){
   client.println("<button onclick=\"OnButtonClicked('6');\">3Off</button>

");
     }   if (digitalRead(8)==LOW)
   { 
   client.println("<button onclick=\"OnButtonClicked('7');\">4ON</button>

");
   }if (digitalRead(8)==HIGH){
     
   client.println("<button onclick=\"OnButtonClicked('8');\">4Off</button>

");
   }


   // add more buttons here
   // button separator



   client.println("</div>");

   client.println("</body>");
   client.println("</html>");

   client.println("");
}

briankTHISISIT.ino (7.64 KB)

Basically you need to adapt your function void SendWebPage(...) with something like this (untested, but it's a good starting point)

static File SDFile;
void SendWebPage(EthernetClient client) {
   byte buff[32] // The sending buffer; its size (now 32) influences directly RAM-Usage
   SDFile = SD.open("index.htm", FILE_READ); // Open the file index.htm on the root of your SDCard

   if (SDFile) {
      while(SDFile.available()) { // Is there still data to be read in the file
          memset(buff, '\n', sizeof(buff)); // Reset the buffer
          SDFile.read(buff, sizeof(buff)); // Read the next chunk of data to the buffer
          client.write(buff, sizeof(buff)); // Send the just read chunk of data to the client
      }

   } else {
      Serial.println("SDFile Read Error");
   }
 
}

Hope that helps for starters. You probably need to find a way to handle the dynamic part of that website (i.e. the part that is dependent on your relay states and either shows "ON" or "OFF"-texts on you buttons). I usualy separate presentation ("the webpage") and data (ON/OFF) with AJAX. If you don't want to do this, you could have a file for the header part, send the dynamic part as you used to, and then have a file for the footer part of your webpage.

riesens:
Basically you need to adapt your function void SendWebPage(...) with something like this (untested, but it's a good starting point)

static File SDFile;

void SendWebPage(EthernetClient client) {
  byte buff[32] // The sending buffer; its size (now 32) influences directly RAM-Usage
  SDFile = SD.open("index.htm", FILE_READ); // Open the file index.htm on the root of your SDCard

if (SDFile) {
     while(SDFile.available()) { // Is there still data to be read in the file
         memset(buff, '\n', sizeof(buff)); // Reset the buffer
         SDFile.read(buff, sizeof(buff)); // Read the next chunk of data to the buffer
         client.write(buff, sizeof(buff)); // Send the just read chunk of data to the client
     }

} else {
     Serial.println("SDFile Read Error");
  }

}




Hope that helps for starters. You probably need to find a way to handle the dynamic part of that website (i.e. the part that is dependent on your relay states and either shows "ON" or "OFF"-texts on you buttons). I usualy separate presentation ("the webpage") and data (ON/OFF) with AJAX. If you don't want to do this, you could have a file for the header part, send the dynamic part as you used to, and then have a file for the footer part of your webpage.

Hey riesens!

i put it in my code but i m getting this error, please can u help me? the error is"expected initalizer before 'SDfile'"

Thanks a lot!

here's the code

#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,177);

// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(80);



String readString = String(100); //string for fetching data from address

void setup()
{
    // 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.");
    // LEDs
  pinMode(6, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(7, OUTPUT);
  pinMode(8, OUTPUT);

  // start the Ethernet connection and the server:

  Serial.println(F("Initiaizing ethernet..."));

  // this uses a fixed address
  Ethernet.begin(mac, ip);

  // get an address with DHCP
  //if (Ethernet.begin(mac) == 0)
  //  Serial.println("Failed to configure Ethernet using DHCP");

  // give the card a second to initialize 
  delay(1000);

  server.begin();

  Serial.print(F("Garage Door Opener Control Ready at IP address "));
  Serial.println(Ethernet.localIP());
}

void loop()
{
  // command received (one character)  '1' - activate garage door button
  char cmd = 0;          // 1 - pulse button
  boolean done = false;  // set to indicate that response is complete

  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {

    Serial.println(F("new client"));
    readString = "";

    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        //int i = c;
        //Serial.print("(");
        //Serial.print(i);
        //Serial.print(")");

        // store character received in receive string
        if (readString.length() < 100) {
          readString += (c);
        }

        // check for end of line
        if (c == '\n') {
            //Serial.print("Receved line: ");
            //Serial.print(readString);  

            // process line if its the "GET" request
            // a request looks like "GET /?1" or "GET /?2"
            if (readString.indexOf("GET") != -1) {
                if (readString.indexOf("?1") != -1)
                   cmd = '1';
                // check for other commands here. ie turn on light, etc.
                if (readString.indexOf("?2") != -1)
                   cmd = '2';  
                                  if (readString.indexOf("?3") != -1)
                   cmd = '3'; 
                                  if (readString.indexOf("?4") != -1)
                   cmd = '4'; 
                                  if (readString.indexOf("?5") != -1)
                   cmd = '5'; 
                                  if (readString.indexOf("?6") != -1)
                   cmd = '6'; 
                                  if (readString.indexOf("?7") != -1)
                   cmd = '7';
                                 if (readString.indexOf("?8") != -1)
                   cmd = '8'; 
   
            }              

           // if a blank line was received (just cr lf, length of 2), then its the end of the request
           if (readString.length() == 2) {
             if (cmd == '1'){
                Serial.println(F("Activate Button"));
                digitalWrite(6, HIGH);

             }
                          if (cmd == '2'){
                Serial.println(F("Activate Button"));
                digitalWrite(6, LOW);

             }
                          if (cmd == '3'){
                Serial.println(F("Activate Button"));
                digitalWrite(5, HIGH);

             }
                          if (cmd == '4'){
                Serial.println(F("Activate Button"));
                digitalWrite(5, LOW);

             }
                          if (cmd == '5'){
                Serial.println(F("Activate Button"));
                digitalWrite(7, HIGH);

             }
                          if (cmd == '6'){
                Serial.println(F("Activate Button"));
                digitalWrite(7, LOW);

             }
                          if (cmd == '7'){
                Serial.println(F("Activate Button"));
                digitalWrite(8, HIGH);

             }
                          if (cmd == '8'){
                Serial.println(F("Activate Button"));
                digitalWrite(8, LOW);

             }

             // add other commands here

             // send web page back to client 
             Serial.println(F("sending web page"));
             SendWebPage(client); 
             Serial.println(F("web page sent"));

             cmd = 0;

             // break out and disconnect. This will tell the browser the request is complete without having to specify content-length
             break;

           }  // end of request reached

           // start line over            
           readString = "";
        }  // end of line reached
      }  // end data is available from client
    }  // end cient is connected
    // give the web browser time to receive the data
    Serial.println(F("delay before disconnect"));
    delay(100);
    // close the connection:
    client.stop();
    Serial.println(F("client disonnected")); 
  }  // end client has been created
}

// send web page
static File SDFile;
void SendWebPage(EthernetClient client) {
   byte buff[32] // The sending buffer; its size (now 32) influences directly RAM-Usage
   SDFile = SD.open("index.htm", FILE_READ); // Open the file index.htm on the root of your SDCard

   if (SDFile) {
      while(SDFile.available()) { // Is there still data to be read in the file
          memset(buff, '\n', sizeof(buff)); // Reset the buffer
          SDFile.read(buff, sizeof(buff)); // Read the next chunk of data to the buffer
          client.write(buff, sizeof(buff)); // Send the just read chunk of data to the client
      }

   } else {
      Serial.println("SDFile Read Error");
   }
 
}

Hi, abhijeetramgir

Read this Arduino Ethernet Shield Web Server Tutorial
Read all 18 Tutorials. You can transfer big part of the code to sd Card. You can modify the program and add switches and relays. You can do it. I did