Help with status of pins next to buttons please

Hi can someone please help me not sure what i`m missing just cant get the status of the pin next to the buttons nearly there tho thanks

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

byte mac[] = { 0x90, 0xA2, 0xDA, 0x0D, 0x21, 0xE3 };  // MAC address from Ethernet shield sticker under board
IPAddress ip(192,168,1,67);  // IP address, may need to change depending on network
byte gateway[] = { 192, 168, 1, 254 };  //Routers IP Address to which your shield is connected.
byte subnet[] = { 255, 255, 255, 0 };  //It will be as it is in most of the cases
EthernetServer server(80);  //create a server at port 80

String readString;

// constants won't change. They're used here to set pin numbers:

const int shed_light_relay = 36;  //shed light relay set on pin 36
const int heating_relay = 22;  //Heating relay set on pin 25
const int shed_lock_relay = 7;  //shed lock relay set on pin 7

// variables will change

int shed_light_relay_state = 0;  // state of shed light relay, off by default at start/reset/power on
int heating_relay_state = 0;  // state of heating relay, off by default at start/reset/power on
int shed_lock_state = 0;  // state of shed lock relay, off by default at start/reset/power on

void setup(){
  
  //pins selected to control
 
  pinMode(shed_light_relay, OUTPUT); //shed light pin set as output
  pinMode(heating_relay, OUTPUT); //heating pin set as output
  pinMode(shed_lock_relay, OUTPUT); //shed lock pin set as output
    
    

  //start Ethernet
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();

  //enable serial data print 
  Serial.begin(9600);
}

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 
          
          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("<TITLE>Home Automation</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");
          client.println("<meta name='viewport' content='width=device-width'; initial-scale=1.0; maximum-scale=1.0;>");  //size page for mobile devices
                  
          
          
          client.println("<h1>Shed Light</h1>");
          client.print("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on4'>");               
          client.print("&nbsp;&nbsp;<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off5'>");
          
          client.println("<h1>Heating</h1>");
          client.print("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on6'>");               
          client.print("&nbsp;&nbsp;<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off7'>");
          
          
          client.println("<h1>shed lock</h1>");
          client.print("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/on8'>");               
          client.print("&nbsp;&nbsp;<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off9'>");
          
         //////Check for button press and switch outputs on or off/////
           
         
            
              if(readString.indexOf("on4") >0)  //see if ON button was clicked and switch relay on if 4 found          
           { 
             digitalWrite(shed_light_relay, HIGH);
             client.println("&nbsp;&nbsp;<font color='green'>--SHED LIGHT ON--</font");  //show status on
           }
        else if(readString.indexOf("off5") >0)
           {
             digitalWrite(shed_light_relay, LOW);
             client.println("&nbsp;&nbsp;<font color='red'>--SHED LIGHT OFF--</font");  //show status off
           }
        else if(digitalRead(shed_light_relay) == LOW)  // check the pin for LOW state
           {
             client.println("&nbsp;&nbsp;<font color='red'>--SHED LIGHT OFF--</font");  //show status off
           }
        else
           {
             client.println("&nbsp;&nbsp;<font color='green'>--SHED LIGHT ON--</font");  //show status on
           }
          
          
          
            if(readString.indexOf("on6") >0)  //see if ON button was clicked and switch relay on if 6 found          
           { 
             digitalWrite(heating_relay, HIGH);
             client.println("&nbsp;&nbsp;<font color='green'>--HEATING ON--</font");  //show status on
           }
        else if(readString.indexOf("off7") >0)
           {
             digitalWrite(heating_relay, LOW);
             client.println("&nbsp;&nbsp;<font color='red'>--HEATING OFF--</font");  //show status off
           }
        else if(digitalRead(heating_relay) == LOW)  // check the pin for LOW state
           {
             client.println("&nbsp;&nbsp;<font color='red'>--HEATING OFF--</font");  //show status off
           }
        else
           {
             client.println("&nbsp;&nbsp;<font color='green'>--HEATING ON--</font");  //show status on
           }
           
           
             if(readString.indexOf("on8") >0)  //see if ON button was clicked and switch relay on if 8 found          
           { 
             digitalWrite(shed_lock_relay, HIGH);
             client.println("&nbsp;&nbsp;<font color='green'>--SHED LOCK ON--</font");  //show status on
           }
        else if(readString.indexOf("off9") >0)
           {
             digitalWrite(shed_lock_relay, LOW);
             client.println("&nbsp;&nbsp;<font color='red'>--SHED LOCK OFF--</font");  //show status off
           }
        else if(digitalRead(shed_lock_relay) == LOW)  // check the pin for LOW state
           {
             client.println("&nbsp;&nbsp;<font color='red'>--SHED LOCK OFF--</font");  //show status off
           }
        else
           {
             client.println("&nbsp;&nbsp;<font color='green'>--SHED LOCK ON--</font");  //show status on
           }
            
       
            
       
                       
          client.println("</BODY>");
          client.println("</HTML>");

          delay(1);
          //stopping client
          client.stop();                 
             
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}

You have posted a very long code and a very short description of the problem.

I haven't a clue what your problem is and I am not going to trawl randomly through your code to see what I might find.

...R

The problem is, with all those Client.println statements, and the conditional stuff that happens in between it's hard to get back to the bare HTML code that's getting sent out.

Here's a plan.

Run your sketch,
View the page from your browser
View page Source.
Edit and copy this
Then post it within code tags here.

All of the .print(strings) that you can should be wrapped in F() so they don't use RAM but get stored in Flash instead.

thanks for the reply's will look again

petesmith68:
thanks for the reply's will look again

Post your HTML

Hi Ken heres the html code,, what im trying to do is when i click lets say shed light on, i want it to say shed light is on next to it or if i click shed light off i want it to say it next to it how i have it is it says them all at the bottom i am very new to this but trying it seems to be the bottom bit that i cant line up with the buttons on/off everything else is working perfect for what i need thanks pete

[code
<HTML>
<HEAD>
<TITLE>Home Automation</TITLE>
</HEAD>
<BODY>
<meta name='viewport' content='width=device-width'; initial-scale=1.0; maximum-scale=1.0;>
<h1>Shed Light</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/?on4'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off5'><h1>Back Garden Light</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/?on6'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off7'><h1>Heating</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on8'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off9'><h1>Kettle</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on10'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off11'><h1>Kitchen Under Cupboard Light</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on12'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off13'><h1>Back Living Room Lamp</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on14'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off15'><h1>Front Living Room Lamp</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on16'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off17'><h1>Shed Lock</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on18'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off19'><h1>Landing Light</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on20'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off21'><h1>Our Bedroom Light</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on22'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off23'><h1>Spare Bedroom Light</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on24'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off25'><h1>Sophie Bedroom Light</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on26'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off27'><h1>Bathroom Light</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on28'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off29'><h1>Hall Light</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on30'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off31'>&nbsp;&nbsp;<font color='red'>--SHED LIGHT OFF--</font
&nbsp;&nbsp;<font color='red'>--BACK GARDEN LIGHT OFF--</font
&nbsp;&nbsp;<font color='red'>--HEATING OFF--</font
&nbsp;&nbsp;<font color='green'>--KETTLE ON--</font
&nbsp;&nbsp;<font color='green'>--KITCHEN UNDER CUPBOARD LIGHT ON--</font
&nbsp;&nbsp;<font color='green'>--BACK LIVING ROOM LAMP ON--</font
&nbsp;&nbsp;<font color='green'>--FRONT LIVING ROOM LAMP ON--</font
&nbsp;&nbsp;<font color='green'>--SHED LOCK ON--</font
&nbsp;&nbsp;<font color='green'>--LANDING LIGHT ON--</font
&nbsp;&nbsp;<font color='green'>--OUR BEDROOM LIGHT ON--</font
&nbsp;&nbsp;<font color='green'>--SPARE BEDROOM LIGHT ON--</font
&nbsp;&nbsp;<font color='green'>--BATHROOM LIGHT ON--</font
&nbsp;&nbsp;<font color='green'>--HALL LIGHT ON--</font
</BODY>
</HTML>
]

That's better, although somehow you got an extra [code] tag in there :slight_smile:

But this is something we can work with.

Simply by pasting this into a new document, I can now see what it looks like.

Bear with me I'll see what I can do.

cheers mate

Hmm.
I'm running into a bit of difficulty. I've done some mods on the raw HTML but then trying to integrate it into the code (posted right at the top of this page), you seem to have a large chunk missing.

Did you cut down your original code for brevity on this post?

Hi Ken no not cut any of the code mate

petesmith68:
Hi Ken no not cut any of the code mate

Well in your original code I can only find controls for:
Shed light
Heating
Shed lock

Yet in the HTML Source I find controls for:
Shed Light
Back Garden Light
Heating
Kettle
Kitchen Under Cupboard Light
Back Living Room Lamp
Front Living Room Lamp
Shed Lock
Landing Light
Our Bedroom Light
Spare Bedroom Light
Sophie Bedroom Light
Bathroom Light
Hall Light

Which is a much larger list. It makes it difficult to work out which relay relates to which description.

Hi Ken i added the rest of the things i want to control today after i sent you the first code,,,

Hi Ken is this better for you mate

<HTML>
<HEAD>
<TITLE>Home Automation</TITLE>
</HEAD>
<BODY>
<meta name='viewport' content='width=device-width'; initial-scale=1.0; maximum-scale=1.0;>
<h1>Shed Light</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/?on4'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off5'><h1>Back Garden Light</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/?on6'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off7'><h1>Heating</h1>
<input type=submit value=ON style=width:50px;height:40px onClick=location.href='/on8'>&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px onClick=location.href='/?off9'>&nbsp;&nbsp;<font color='green'>--SHED LIGHT ON--</font
&nbsp;&nbsp;<font color='green'>--BACK GARDEN LIGHT ON--</font
&nbsp;&nbsp;<font color='green'>--HEATING ON--</font
</BODY>
</HTML>

:slight_smile: Yes ok. Hope you're in no rush, but it occurs to me that you'd like this solution to be easily maintained. I'll see if I can come up with something that makes it fairly simple to update.

yes please ken is all i am after is a code that can switch 20 pin/relays that i can name my self ie: living room light that can show me if the pin/relay is on/off and that does`nt switch on/off when i refresh webserver or leave webserver go to an outher website and come back to webserver,, this code does evrything i want but shows the status of averything at the bottom and not next to the pin/relay button hope this makes sense to you mate ha im in no rush what so ever just thank full of your help thanks pete

OK Hopefully this won't have too many bugs for you to iron out. I've checked that it compiles and that's as far as my testing can go from here.

Anyhow, I've removed all the styling information from the individual tags and instead included a style section in the head of the document. This should make it easier to restyle things. Also, I've modified it so the ON button will be green if the relevant relay is on. Whereas the OFF button will be red, if the relay is off.

The code that actually prints the description and the button I've pulled out into a separate function. So it should make it slightly easier to add relays to the interface.

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

byte mac[] = { 0x90, 0xA2, 0xDA, 0x0D, 0x21, 0xE3 };  // MAC address from Ethernet shield sticker under board
IPAddress ip(192,168,1,67);  // IP address, may need to change depending on network
byte gateway[] = { 192, 168, 1, 254 };  //Routers IP Address to which your shield is connected.
byte subnet[] = { 255, 255, 255, 0 };  //It will be as it is in most of the cases
EthernetServer server(80);  //create a server at port 80

String readString;

// constants won't change. They're used here to set pin numbers:

const int shed_light_relay = 36;  //shed light relay set on pin 36
const int heating_relay = 22;  //Heating relay set on pin 25
const int shed_lock_relay = 7;  //shed lock relay set on pin 7

// variables will change

int shed_light_relay_state = 0;  // state of shed light relay, off by default at start/reset/power on
int heating_relay_state = 0;  // state of heating relay, off by default at start/reset/power on
int shed_lock_state = 0;  // state of shed lock relay, off by default at start/reset/power on

void setup(){
  
  //pins selected to control
 
  pinMode(shed_light_relay, OUTPUT); //shed light pin set as output
  pinMode(heating_relay, OUTPUT); //heating pin set as output
  pinMode(shed_lock_relay, OUTPUT); //shed lock pin set as output
    
    

  //start Ethernet
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();

  //enable serial data print 
  Serial.begin(9600);
}

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 
          
          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("<TITLE>Home Automation</TITLE>");
          
          //-----Style information
          client.println("<style type='text/css'>");
          client.println("h1");
          client.println("{");
          client.println("margin:3px;");
          client.println("font-size:1.2em;");
          client.println("}");
          client.println("input[type=submit]");
          client.println("{");
          client.println("width:40px;");
          client.println("height:40px;");
          client.println("}");
          client.println("input[value=OFF][state=OFF]");
          client.println("{");
          client.println("background:#ff8888;");
          client.println("}");
          client.println("input[value=ON][state=ON]");
          client.println("{");
          client.println("background:#88ff88;");
          client.println("}");
          client.println("</style>");
         
          client.println("</HEAD>");
          client.println("<BODY>");
          client.println("<meta name='viewport' content='width=device-width'; initial-scale=1.0; maximum-scale=1.0;>");  //size page for mobile devices
                  
   //-------------SHED LIGHT -------------       
   if(readString.indexOf("on4") >0)  //see if ON button was clicked and switch relay on if on4 found           
        digitalWrite(shed_light_relay, HIGH);
   if(readString.indexOf("off5") >0)  //see if OFF button was clicked and switch relay on if off5 found
        digitalWrite(shed_light_relay, LOW);
   showRelayState(client, "Shed Light", shed_light_relay, "on4", "off5");
   //------------SHED LOCK -----------------
   if(readString.indexOf("on6") >0)  //see if ON button was clicked and switch relay on if on6 found
        digitalWrite(shed_lock_relay, HIGH);
   if(readString.indexOf("off7") >0)  //see if OFF button was clicked and switch relay on if off7 found
        digitalWrite(shed_lock_relay, LOW);
   showRelayState(client, "Shed Lock", shed_lock_relay, "on6", "off7");
   //------------HEATING -----------------
   if(readString.indexOf("on8") >0)  //see if ON button was clicked and switch relay on if on8 found
        digitalWrite(heating_relay, HIGH);
   if(readString.indexOf("off9") >0)  //see if OFF button was clicked and switch relay off if off9 found          
        digitalWrite(heating_relay, LOW);
   showRelayState(client, "Heating ", heating_relay, "on8", "off9");      
       
                       
          client.println("</BODY>");
          client.println("</HTML>");

          delay(1);
          //stopping client
          client.stop();                 
             
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}


void showRelayState(EthernetClient client, const char* relayDescription, 
                    int relayPin, const char* onControl, const char* offControl)
{
char state[4];
//get Current state of relay
sprintf(state,(digitalRead(relayPin))? "ON":"OFF");
//Print Header for this relay
client.print("<h1>"); 
client.print(relayDescription); 
client.print(" ("); client.print(state); client.print(")</h1>");

//send ON button
client.print("<input type=submit value=");client.print(state);
client.print(" state=");client.print(state);
client.print(" onClick=location.href='/?");client.print(onControl); client.println("'>");

//send OFF button
client.print("<input type=submit value=");client.print(state);
client.print(" state=");client.print(state);
client.print(" onClick=location.href='/?");client.print(offControl); client.println("'>");
}

excellent ken thanks i have just tried it when i click shed light on heating comes on as well mate??

Actually I think I've just spotted a subtle error. Try this slightly updated version

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

byte mac[] = { 0x90, 0xA2, 0xDA, 0x0D, 0x21, 0xE3 };  // MAC address from Ethernet shield sticker under board
IPAddress ip(192,168,1,67);  // IP address, may need to change depending on network
byte gateway[] = { 192, 168, 1, 254 };  //Routers IP Address to which your shield is connected.
byte subnet[] = { 255, 255, 255, 0 };  //It will be as it is in most of the cases
EthernetServer server(80);  //create a server at port 80

String readString;

// constants won't change. They're used here to set pin numbers:

const int shed_light_relay = 36;  //shed light relay set on pin 36
const int heating_relay = 22;  //Heating relay set on pin 25
const int shed_lock_relay = 7;  //shed lock relay set on pin 7

// variables will change

int shed_light_relay_state = 0;  // state of shed light relay, off by default at start/reset/power on
int heating_relay_state = 0;  // state of heating relay, off by default at start/reset/power on
int shed_lock_state = 0;  // state of shed lock relay, off by default at start/reset/power on

void setup(){
  
  //pins selected to control
 
  pinMode(shed_light_relay, OUTPUT); //shed light pin set as output
  pinMode(heating_relay, OUTPUT); //heating pin set as output
  pinMode(shed_lock_relay, OUTPUT); //shed lock pin set as output
    
    

  //start Ethernet
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();

  //enable serial data print 
  Serial.begin(9600);
}

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 
          
          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("<TITLE>Home Automation</TITLE>");
          
          //-----Style information
          client.println("<style type='text/css'>");
          client.println("h1");
          client.println("{");
          client.println("margin:3px;");
          client.println("font-size:1.2em;");
          client.println("}");
          client.println("input[type=submit]");
          client.println("{");
          client.println("width:40px;");
          client.println("height:40px;");
          client.println("}");
          client.println("input[value=OFF][Cstate=OFF]");
          client.println("{");
          client.println("background:#ff8888;");
          client.println("}");
          client.println("input[value=ON][Cstate=ON]");
          client.println("{");
          client.println("background:#88ff88;");
          client.println("}");
          client.println("</style>");
         
          client.println("</HEAD>");
          client.println("<BODY>");
          client.println("<meta name='viewport' content='width=device-width'; initial-scale=1.0; maximum-scale=1.0;>");  //size page for mobile devices
                  
   //-------------SHED LIGHT -------------       
   if(readString.indexOf("on4") >0)  //see if ON button was clicked and switch relay on if on4 found           
        digitalWrite(shed_light_relay, HIGH);
   if(readString.indexOf("off5") >0)  //see if OFF button was clicked and switch relay on if off5 found
        digitalWrite(shed_light_relay, LOW);
   showRelayState(client, "Shed Light", shed_light_relay, "on4", "off5");
   //------------SHED LOCK -----------------
   if(readString.indexOf("on6") >0)  //see if ON button was clicked and switch relay on if on6 found
        digitalWrite(shed_lock_relay, HIGH);
   if(readString.indexOf("off7") >0)  //see if OFF button was clicked and switch relay on if off7 found
        digitalWrite(shed_lock_relay, LOW);
   showRelayState(client, "Shed Lock", shed_lock_relay, "on6", "off7");
   //------------HEATING -----------------
   if(readString.indexOf("on8") >0)  //see if ON button was clicked and switch relay on if on8 found
        digitalWrite(heating_relay, HIGH);
   if(readString.indexOf("off9") >0)  //see if OFF button was clicked and switch relay off if off9 found          
        digitalWrite(heating_relay, LOW);
   showRelayState(client, "Heating ", heating_relay, "on8", "off9");      
       
                       
          client.println("</BODY>");
          client.println("</HTML>");

          delay(1);
          //stopping client
          client.stop();                 
             
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}


void showRelayState(EthernetClient client, const char* relayDescription, 
                    int relayPin, const char* onControl, const char* offControl)
{
char state[4];
//get Current state of relay
sprintf(state,(digitalRead(relayPin))? "ON":"OFF");
//Print Header for this relay
client.print("<h1>"); 
client.print(relayDescription); 
client.print(" ("); client.print(state); client.print(")</h1>");

//send ON button
client.print("<input type=submit value=ON ");
client.print(" Cstate=");client.print(state);
client.print(" onClick=location.href='/?");client.print(onControl); client.println("'>");

//send OFF button
client.print("<input type=submit value=OFF ");
client.print(" Cstate=");client.print(state);
client.print(" onClick=location.href='/?");client.print(offControl); client.println("'>");
}

Hi Ken i have implemented your color into my code just to try it and the buttons are now green for on and red for off but not sure how to switch colors on and off when button clicked any ideas mate i think we are nearly there

 client.println("<h1>Back Garden Light</h1>");
          client.print("<input type=submit value=ON style=width:50px;height:40px;background-color:#88ff88; onClick=location.href='/?on6'>");               
          client.print("&nbsp;&nbsp;<input type=submit value=OFF style=width:50px;height:40px;;background-color:#ff8888; onClick=location.href='/?off7'>");