Writing CSS style data to a page via ethernet shield

Projects Programming
1

Hi all, I'm working with some code I found on the net, works nicely at the moment but the page is plain.

I'm trying to add some styling, and I have been messing around trying to add it too the head, but it won't compile :frowning:

this is the line causing me grief

client.println({"<style type="text/css">body {font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d }");

This is the whole code

//simple button GET server code to control servo and arduino pin 5
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html
//for use with W5100 based ethernet shields
//Powering a servo from the arduino usually DOES NOT WORK.
//note that the below bug fix may be required
//http://www.instructables.com/id/Control-an-LED-over-the-internet-using-the-Arduino/step2/Connected/
// http://code.google.com/p/arduino/issues/detail?id=605
//http://www.instructables.com/id/Arduino-Control-via-a-Web-Service-with-Teleduino/?ALLSTEPS
//http://www.christophercommunications.org/Web_page_based_control.html

int A = 1;
int B = 2;
int C = 3;
int D = 4;



#include <SPI.h>
#include <Ethernet.h>
 
#include <Servo.h>
Servo myservo;  // create servo object to control a servo
 
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 0, 177 }; // ip in lan
byte gateway[] = { 192, 168, 0, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(80); //server port
 
String readString;
 
//////////////////////
 
void setup(){
 
  pinMode(6, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  //the pin for the servo co
  //enable serial data print
  Serial.begin(9600);
  Serial.println("server LED test 1.0"); // 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); //print to serial monitor for debuging
 
          client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");
          client.println();
 
          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
          client.println("<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />");
          //client.println("<link rel='stylesheet' type='text/css' href='http://chriscosma.co.cc/a.css' />");
          client.println("<TITLE>Home Automation</TITLE>");
          
 
          
          client.println("</HEAD>");
          client.println("<BODY>");
          
          client.println("<H1>Home Automation</H1>");
          client.println("<hr />");
          client.println("
");
         
         //Light A
          client.println("<a href=\"/?lightAon\"\">Turn On Light A</a>");
          client.println("<a href=\"/?lightAoff\"\">Turn Off Light A</a>
");    
      
          //Light B
          client.println("<a href=\"/?lightBon\"\">Turn On Light B</a>");
          client.println("<a href=\"/?lightBoff\"\">Turn Off Light B</a>
");      
 
          client.println("</BODY>");
          client.println("</HTML>");
 
          delay(1);
          //stopping client
          client.stop();
 
          ///////////////////// control arduino Light A
          if(readString.indexOf("?lightAon") >0)//checks for on
          {
            digitalWrite(A, HIGH);
            Serial.println("Light A On");
            client.println("<link rel='apple-touch-icon' href='http://shedbass.com/dtokez/buttons/on.png'/>");
          }
          else{
          if(readString.indexOf("?lightAoff") >0)//checks for off
          {
            digitalWrite(A, LOW);
            Serial.println("Light A Off");
            client.println("<link rel='apple-touch-icon' href='http://shedbass.com/dtokez/buttons/off.png'/>");
          }
          }
          
          ///////////////////// control arduino Light B
          if(readString.indexOf("?lightBon") >0)//checks for on
          {
            digitalWrite(B, HIGH);
            Serial.println("Light B On");
            client.println("<link rel='apple-touch-icon' href='http://shedbass.com/dtokez/buttons/on.png'/>");
          }
          else{
          if(readString.indexOf("?lightBoff") >0)//checks for off
          {
            digitalWrite(B, LOW);
            Serial.println("Light B Off");
            client.println("<link rel='apple-touch-icon' href='http://shedbass.com/dtokez/buttons/off.png'/>");
          }
          }
          
   
  
          //clearing string for next read
          readString="";
 
        }
      }
    }
  }
}
2 
client.println({"<style type=\"text/css\">body {font-family: Georgia, \"Times New Roman\", Times, serif; color: purple; background-color: #d8da3d }");

You need to escape the internal double quotes, as shown here.

3

Hi Paul. Thanks for that! It's going to be odd getting used to using html within the Arduino environment lol

I have cleaned out the code slightly, and managed to use image links as buttons.

Strangely though, with the following line in the head

client.println("<style type=\"text/css\">body {font-family: Georgia; color: purple; background-color: #d8da3d}");

I just get a blank coloured screen, it seems to block the rest of the page after it?

Here is the main code

client.println("<style type=\"text/css\">body {font-family: Georgia; color: purple; background-color: #d8da3d}");
4

Do you close the style tag with ? Can't see from here. But missing a closing tag is the sort of thing that will cause the rest of the page to get lost.

-br

5

Ah! What a silly mistake, I forgot to close the tag as you say :slight_smile:

many thanks!

I'm now attempting to show a different button by reading the state of a pin, but.... its not working lol
Just added this in, but neither image is showing up. When starting up the pin will be low, so I thought that the else if statement would run, which should display the on button, then once on the if loop would run, showing the off button?

maybe I have made another silly error, can't work out

This is the addition:

if(A == HIGH)
          {
            client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>");
          }

          else if(A == LOW)
          {
            client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>
");
          }

//simple button GET server code to control servo and arduino pin 5
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html
//for use with W5100 based ethernet shields
//Powering a servo from the arduino usually DOES NOT WORK.
//note that the below bug fix may be required
//http://www.instructables.com/id/Control-an-LED-over-the-internet-using-the-Arduino/step2/Connected/
// http://code.google.com/p/arduino/issues/detail?id=605
//http://www.instructables.com/id/Arduino-Control-via-a-Web-Service-with-Teleduino/?ALLSTEPS
//http://www.christophercommunications.org/Web_page_based_control.html

int A = 6;
int B = 2;
int C = 3;
int D = 4;



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

#include <Servo.h>
Servo myservo;  // create servo object to control a servo

byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 
  192, 168, 0, 177 }; // ip in lan
byte gateway[] = { 
  192, 168, 0, 1 }; // internet access via router
byte subnet[] = { 
  255, 255, 255, 0 }; //subnet mask
EthernetServer server(80); //server port

String readString;

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

void setup(){

  pinMode(6, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  //the pin for the servo co
  //enable serial data print
  Serial.begin(9600);
  Serial.println("server LED test 1.0"); // 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); //print to serial monitor for debuging

            client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");
          client.println();
          client.println("<HTML>");
          client.println("<HEAD>");
          
          client.println("<style> body { background-color:#d0e4fe; }</style>");

          client.println("<TITLE>Home Automation</TITLE>");



          client.println("</HEAD>");
          client.println("<BODY>");

          //client.println("<H1>Home Automation</H1>");
          //client.println("<hr />");
          client.println("
");

          //Light A
          //client.println("Light A:  ");
          //client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>");
          //client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>
");



          if(A == HIGH)
          {
            client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>");
          }

          else if(A == LOW)
          {
            client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>
");
          }





          //Light B
          client.println("<a href=\"/?lightBon\"\">Turn On Light B</a>");
          client.println("<a href=\"/?lightBoff\"\">Turn Off Light B</a>
");      

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

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

          ///////////////////// control arduino Light A
          if(readString.indexOf("?lightAon") >0)//checks for on
          {
            digitalWrite(A, HIGH);
            Serial.println("Light A On");
          }
          else{
            if(readString.indexOf("?lightAoff") >0)//checks for off
            {
              digitalWrite(A, LOW);
              Serial.println("Light A Off");
            }
          }

          ///////////////////// control arduino Light B
          if(readString.indexOf("?lightBon") >0)//checks for on
          {
            digitalWrite(B, HIGH);
            Serial.println("Light B On");
          }
          else{
            if(readString.indexOf("?lightBoff") >0)//checks for off
            {
              digitalWrite(B, LOW);
              Serial.println("Light B Off");
            }
          }

          //clearing string for next read
          readString="";

        }
      }
    }
  }
}
6

A is 6. Your if condition needs to be based on digitalRead(A), not A. Something more like:

if (digitalRead(A)) {
…
}
else {
…
}

-br

7

Thanks Billroy! Another school boy error on my part :blush:

Is it possible to add a command to force the browser to reload the page after i click a link?

I know I could use a meta refresh in the header but seems pointless the page reloading constantly?

Please forgive me, its been over 10 years since I learnt Html, before the days of php and java lol

8

Is it possible to add a command to force the browser to reload the page after i click a link?

The page should be reloading each time you click the light button.

9

It kind of looks like the browser is refreshing, but the button does not change, the current behavior is as follows:

First load of page= LED OFF, ON BUTTON DISPLAYED - correct
First click of button = LED ON, ON BUTTON DISPLAYED - incorrect
Second click of button = LED ON, OFF BUTTON DISPLAYED - incorrect
Third click of button = LED OFF, OFF BUTTON DISPLAYED - incorrect
Forth click of button = LED OFF, ON BUTTON DISPLAYED - correct
.
.
.

I cant fathom it?

10

It kind of looks like the browser is refreshing, but the button does not change, the current behavior is as follows:

You've made some code changes since you last posted, haven't you?

11

Hi Paul, I probably have, sorry for not posting!

This is what I'm currently working with, and exhibiting the behaviour I explained above

//simple button GET server code to control servo and arduino pin 5
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html
//for use with W5100 based ethernet shields
//Powering a servo from the arduino usually DOES NOT WORK.
//note that the below bug fix may be required
//http://www.instructables.com/id/Control-an-LED-over-the-internet-using-the-Arduino/step2/Connected/
// http://code.google.com/p/arduino/issues/detail?id=605
//http://www.instructables.com/id/Arduino-Control-via-a-Web-Service-with-Teleduino/?ALLSTEPS
//http://www.christophercommunications.org/Web_page_based_control.html

int A = 6;
int B = 2;
int C = 3;
int D = 4;



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

//#include <Servo.h>
//Servo myservo;  // create servo object to control a servo

byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 
  192, 168, 0, 177 }; // ip in lan
byte gateway[] = { 
  192, 168, 0, 1 }; // internet access via router
byte subnet[] = { 
  255, 255, 255, 0 }; //subnet mask
EthernetServer server(80); //server port

String readString;

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

void setup(){

  pinMode(6, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  //the pin for the servo co
  //enable serial data print
  Serial.begin(9600);
  Serial.println("server LED test 1.0"); // 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); //print to serial monitor for debuging

            client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");
          client.println();
          client.println("<HTML>");
          client.println("<HEAD>");
          
          client.println("<style> body { background-color:#303030; }</style>");

          client.println("<TITLE>Home Automation</TITLE>");



          client.println("</HEAD>");
          client.println("<BODY>");

          //client.println("<H1>Home Automation</H1>");
          //client.println("<hr />");
          client.println("
");

          //Light A
          //client.println("Light A:  ");
          //client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>");
          //client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>
");


          client.println("<img src='http://www.shedbass.com/dtokez/buttons/hover.png'>");
          if((digitalRead(A)) == HIGH)
          {
            client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>
");
          }

          else if((digitalRead(A)) == LOW)
          {
            client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>
");
          }



          //Light B
          client.println("<a href=\"/?lightBon\"\">Turn On Light B</a>");
          client.println("<a href=\"/?lightBoff\"\">Turn Off Light B</a>
");      

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

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

          ///////////////////// control arduino Light A
          if(readString.indexOf("?lightAon") >0)//checks for on
          {
            digitalWrite(A, HIGH);
            Serial.println("Light A On");
          }
          else{
            if(readString.indexOf("?lightAoff") >0)//checks for off
            {
              digitalWrite(A, LOW);
              Serial.println("Light A Off");
            }
          }

          ///////////////////// control arduino Light B
          if(readString.indexOf("?lightBon") >0)//checks for on
          {
            digitalWrite(B, HIGH);
            Serial.println("Light B On");
          }
          else{
            if(readString.indexOf("?lightBoff") >0)//checks for off
            {
              digitalWrite(B, LOW);
              Serial.println("Light B Off");
            }
          }

          //clearing string for next read
          readString="";

        }
      }
    }
  }
}
12 
int A = 6;
int B = 2;
int C = 3;
int D = 4;

Nice names for some pins.

  pinMode(6, OUTPUT); //pin selected to control

Names? We don't need no steenking names!

(Yes, we do!)

        if (readString.length() < 100) {

          //store characters to string
          readString += c;
          //Serial.print(c);
        }

Why limit the damage to 100 times? You've already shot your foot off using the String class. What's one more bullet going to do?

          if((digitalRead(A)) == HIGH)
          {
            client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>
");
          }

          else if((digitalRead(A)) == LOW)
          {
            client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>
");
          }

If reading an OUTPUT pin doesn't result in HIGH, is there any possibility that the function will return something other than LOW?

Why are you reading from an OUTPUT pin? Surely you can (have the Arduino) remember what it set the pin to.

I'd suspect that you are running out of memory. Unpredictable things can happen when you are out of memory. The F() macro will cause all those massive literal strings from occupying both program memory (where they are OK) and SRAM (where they are not).

          else{
            if(readString.indexOf("?lightAoff") >0)//checks for off

Whyisn'tthisasimpleelseif?

(A subtle hint to use the space bar!)

What does your serial output show?

13

Hi thanks for the help!

I have actioned some of your suggestions:

I'm not sure of the issues associated with using the string class?

I have added a variable for pin state now - so hopefully it will store and read the state from there on the next loop?

I can't test at the moment as I'm at work, but it compiles so will flash the code tonight!

Thanks again!

//simple button GET server code to control servo and arduino pin 5
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html
//for use with W5100 based ethernet shields
//Powering a servo from the arduino usually DOES NOT WORK.
//note that the below bug fix may be required
//http://www.instructables.com/id/Control-an-LED-over-the-internet-using-the-Arduino/step2/Connected/
// http://code.google.com/p/arduino/issues/detail?id=605
//http://www.instructables.com/id/Arduino-Control-via-a-Web-Service-with-Teleduino/?ALLSTEPS
//http://www.christophercommunications.org/Web_page_based_control.html


//Define light output pins
int LightA = 6;
int LightB = 2;
int LightC = 3;
int LightD = 4;


//For holding pin state data
int LightAState = 0;
int LightBState = 0;


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

//#include <Servo.h>
//Servo myservo;  // create servo object to control a servo

byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 
  192, 168, 0, 177 }; // ip in lan
byte gateway[] = { 
  192, 168, 0, 1 }; // internet access via router
byte subnet[] = { 
  255, 255, 255, 0 }; //subnet mask
EthernetServer server(80); //server port

String readString;

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

void setup(){

  //Set up outputs
  pinMode(LightA, OUTPUT);
  pinMode(LightB, OUTPUT);
  pinMode(LightC, OUTPUT);
  pinMode(LightD, OUTPUT);

  //Start Ethernet
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  Serial.begin(9600);
  Serial.println("server LED test 1.0"); // 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); //print to serial monitor for debuging

            client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");
          client.println();
          client.println("<HTML>");

          //Write head data
          client.println("<HEAD>");
          client.println("<style> body { background-color:#303030; }</style>");  //CSS style data
          client.println("<TITLE>Home Automation</TITLE>");  //Page title
          client.println("</HEAD>");

          //Write body data
          client.println("<BODY>");

          //client.println("<H1>Home Automation</H1>");
          //client.println("<hr />");
          client.println("
");

          //Light A
          //client.println("Light A:  ");
          //client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>");
          //client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>
");


          client.println("<img src='http://www.shedbass.com/dtokez/buttons/hover.png'>");
          if(LightAState == HIGH)
          {
            client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>
");
          }

          else if(LightBState == LOW)
          {
            client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>
");
          }



          //Light B
          client.println("<a href=\"/?lightBon\"\">Turn On Light B</a>");
          client.println("<a href=\"/?lightBoff\"\">Turn Off Light B</a>
");      

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

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

          ///////////////////// control Light A
          if(readString.indexOf("?lightAon") >0)//checks for on
          {
            digitalWrite(LightA, HIGH);
            LightAState = HIGH;
            Serial.println("Light A On");
          }
          else if(readString.indexOf("?lightAoff") >0)//checks for off
          {
            digitalWrite(LightA, LOW);
            LightAState = LOW;
            Serial.println("Light A Off");
          }


          ///////////////////// control Light B
          if(readString.indexOf("?lightBon") >0)//checks for on
          {
            digitalWrite(LightB, HIGH);
            LightBState = HIGH;
            Serial.println("Light B On");
          }
          else if(readString.indexOf("?lightBoff") >0)//checks for off
          {
            digitalWrite(LightB, LOW);
            LightBState = LOW;
            Serial.println("Light B Off");
          }


          //clearing string for next read
          readString="";

        }
      }
    }
  }
}
14

client.println(F("HTTP/1.1 200 OK")); //send new page

Save yourself a lot or SRAM with little effort.

15

dtokez:
It kind of looks like the browser is refreshing, but the button does not change, the current behavior is as follows:

Since the problem appears to be in the behaviour of the browser when displaying your page, I suggest you post the HTML source of the page as received by the browser.

16

PaulS:
client.println(F("HTTP/1.1 200 OK")); //send new page

Save yourself a lot or SRAM with little effort.

I see, so I can loose the F and the two brackets? What is the purpose of it?

17

PeterH:

dtokez:
It kind of looks like the browser is refreshing, but the button does not change, the current behavior is as follows:

Since the problem appears to be in the behaviour of the browser when displaying your page, I suggest you post the HTML source of the page as received by the browser.

Will do this straight away when I get home thanks

18

I see, so I can loose the F and the two brackets? What is the purpose of it?

Not loose them. Add them. The F() macros causes the literal string to remain in program memory, and enables access to the data from there, rather than allowing it to be copied to SRAM.

19

PaulS:

I see, so I can loose the F and the two brackets? What is the purpose of it?

Not loose them. Add them. The F() macros causes the literal string to remain in program memory, and enables access to the data from there, rather than allowing it to be copied to SRAM.

Thanks Paul, that's pretty good to know!

Here is what I have a page source

<HTML>
<HEAD>
<style> body { background-color:#303030; }</style>
<TITLE>Home Automation</TITLE>
</HEAD>
<BODY>


<img src='http://www.shedbass.com/dtokez/buttons/hover.png'>
<a href="/?lightAon""><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>

</BODY>
</HTML>

Being generated by this

//simple button GET server code to control servo and arduino pin 5
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html
//for use with W5100 based ethernet shields//note that the below bug fix may be required
//http://www.instructables.com/id/Control-an-LED-over-the-internet-using-the-Arduino/step2/Connected/
// http://code.google.com/p/arduino/issues/detail?id=605
//http://www.instructables.com/id/Arduino-Control-via-a-Web-Service-with-Teleduino/?ALLSTEPS
//http://www.christophercommunications.org/Web_page_based_control.html


//Define light output pins
int LightA = 6;
int LightB = 2;
int LightC = 3;
int LightD = 4;


//For holding pin state data
int LightAState = 0;
int LightBState = 0;


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

//#include <Servo.h>
//Servo myservo;  // create servo object to control a servo

byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 
  192, 168, 0, 177 }; // ip in lan
byte gateway[] = { 
  192, 168, 0, 1 }; // internet access via router
byte subnet[] = { 
  255, 255, 255, 0 }; //subnet mask
EthernetServer server(80); //server port

String readString;

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

void setup(){

  //Set up outputs
  pinMode(LightA, OUTPUT);
  pinMode(LightB, OUTPUT);
  pinMode(LightC, OUTPUT);
  pinMode(LightD, OUTPUT);

  //Start Ethernet
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  Serial.begin(9600);
  Serial.println("server LED test 1.0"); // 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); //print to serial monitor for debuging

            client.println(F("HTTP/1.1 200 OK")); //send new page
          client.println("Content-Type: text/html");
          client.println();
          client.println("<HTML>");

          //Write head data
          client.println("<HEAD>");
          client.println("<style> body { background-color:#303030; }</style>");  //CSS style data
          client.println("<TITLE>Home Automation</TITLE>");  //Page title
          client.println("</HEAD>");

          //Write body data
          client.println("<BODY>");

          //client.println("<H1>Home Automation</H1>");
          //client.println("<hr />");
          client.println("
");

          //Light A
          //client.println("Light A:  ");
          //client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>");
          //client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>
");


          client.println("<img src='http://www.shedbass.com/dtokez/buttons/hover.png'>");
          if(LightAState == HIGH)
          {
            client.println("<a href=\"/?lightAoff\"\"><img src='http://www.shedbass.com/dtokez/buttons/off2.png'></a>
");
          }

          else if(LightBState == LOW)
          {
            client.println("<a href=\"/?lightAon\"\"><img src='http://www.shedbass.com/dtokez/buttons/on2.png'></a>
");
          }



          //Light B
          //client.println("<a href=\"/?lightBon\"\">Turn On Light B</a>");
          //client.println("<a href=\"/?lightBoff\"\">Turn Off Light B</a>
");      

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

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

          ///////////////////// control Light A
          if(readString.indexOf("?lightAon") >0)//checks for on
          {
            digitalWrite(LightA, HIGH);
            LightAState = HIGH;
            Serial.println("Light A On");
          }
          else if(readString.indexOf("?lightAoff") >0)//checks for off
          {
            digitalWrite(LightA, LOW);
            LightAState = LOW;
            Serial.println("Light A Off");
          }


          ///////////////////// control Light B
          if(readString.indexOf("?lightBon") >0)//checks for on
          {
            digitalWrite(LightB, HIGH);
            LightBState = HIGH;
            Serial.println("Light B On");
          }
          else if(readString.indexOf("?lightBoff") >0)//checks for off
          {
            digitalWrite(LightB, LOW);
            LightBState = LOW;
            Serial.println("Light B Off");
          }


          //clearing string for next read
          readString="";

        }
      }
    }
  }
}
20

What does your serial output look like?

Code like this:

            digitalWrite(LightA, HIGH);
            LightAState = HIGH;

            digitalWrite(LightA, LOW);
            LightAState = LOW;

Is way too easy to get out of sync. Sooner or later, you'll change one line but not the other.

Code like this:

            LightAState = HIGH;
            digitalWrite(LightA, LightAState);

            LightAState = LOW;
            digitalWrite(LightA, LightAState);

is impossible to get out of sync.

Food for thought.