Hello,
I Have a question for you. Why my buttons in this project are doubled and how to repait this?
I am new in AJAX programming and try to build some kind of home automation web page.
Arduino Mega + Ethernet shielt with web server.
What is most important to me that state of LEDs on the web is updated immediately. I know that I have to use Java Script and AJAX. So below is my code and I here is the best thing:
When I DO a mistake in line:
client.println("<a id="switch_txt">
");and start it with mark and end with
mark - I know that is wrong, but only then my web site looks good - buttons are ok (one copy of them). But when I write this part of code as it should be eg:client.println("<p id="switch_txt">
");or client.println("<a id="switch_txt">");
or client.println("<div id="switch_txt">");
my buttons are doubled like in att (doubled.jpg).
Please advise what sould I correct in this code to work propertly.
#include <SPI.h>
#include <Ethernet.h>
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; // MAC address
byte ip[] = { 192, 168, 0, 50 }; // IP
byte gateway[] = { 192, 168, 0, 1 }; // GETEWAY
byte subnet[] = { 255, 255, 255, 0 }; // MASK
EthernetServer server(80); // PORT
String readString;
int led2 = 2;
int led3 = 3;
int led4 = 4;
int led5 = 5;
int led6 = 6;
int led7 = 7;
void setup()
{
pinMode(led2, OUTPUT);
pinMode(led3, OUTPUT);
pinMode(led4, OUTPUT);
pinMode(led5, OUTPUT);
pinMode(led6, OUTPUT);
pinMode(led7, OUTPUT);
//start Ethernet Shield
Ethernet.begin(mac, ip, gateway, subnet);
server.begin();
Serial.begin(9600); // for diagnostics
}
void loop(){
// CONNECTING
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;
}
//if HTTP request has ended– 0x0D is Carriage Return \n ASCII
if (c == 0x0D) {
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("<TITLE>HOME CENTER</TITLE>");
//AJAX MODULE
client.println("<script>");
client.println("function GetLedState() {");
client.println("nocache = \"&nocache=\"\ + Math.random() * 1000000;");
client.println("var request = new XMLHttpRequest();");
client.println("request.onreadystatechange = function() {");
client.println("if (this.readyState == 4) {");
client.println("if (this.status == 200) {");
client.println("if (this.responseText != null) {");
client.println("document.getElementById(\"switch_txt\")\ .innerHTML = this.responseText;");
client.println("}}}}");
client.println( "request.open(\"GET\", \"ajax_switch\" + nocache, true);");
//client.println("request.open(\"GET\", \"ajax_switch\", true);");
client.println("request.send(null);");
client.println("}");
client.println("</script>");
//END OF AJAX MODULE
client.println("</head>");
client.println("<body onload=\"GetLedState()\">");
client.println("<p id=\"switch_txt\"></a>");
if (digitalRead(led2) == LOW)
{client.println(" LIVING IS OFF <a href=\"/LIVING_LED\"><button class=\"button button_on\">TURN IT ON.</button></a>
");}
else
{client.println(" LIVING IS ON <a href=\"/LIVING_LED\"><button class=\"button button_off\">TURN IT OFF</button></a>
");}
if (digitalRead(led3) == LOW)
{client.println(" BATH IS OFF <a href=\"/BATH_LED\"><button class=\"button button_on\">TURN IT ON.</button></a>
");}
else
{client.println(" BATH IS ON <a href=\"/BATH_LED\"><button class=\"button button_off\">TURN IT OFF</button></a>
");}
if (digitalRead(led4) == LOW)
{client.println(" CHILD1 IS OFF <a href=\"/CHILD1_LED\"><button class=\"button button_on\">TURN IT ON.</button></a>
");}
else
{client.println(" CHILD1 IS ON <a href=\"/CHILD1_LED\"><button class=\"button button_off\">TURN IT OFF</button></a>
");}
if (digitalRead(led5) == LOW)
{client.println(" KITCHEN IS OFF <a href=\"/KITCHEN_LED\"><button class=\"button button_on\">TURN IT ON.</button></a>
");}
else
{client.println(" KITCHEN IS ON <a href=\"/KITCHEN_LED\"><button class=\"button button_off\">TURN IT OFF</button></a>
");}
if (digitalRead(led6) == LOW)
{client.println(" HALL IS OFF <a href=\"/HALL_LED\"><button class=\"button button_on\">TURN IT ON.</button></a>
");}
else
{client.println(" HALL IS ON <a href=\"/HALL_LED\"><button class=\"button button_off\">TURN IT OFF</button></a>
");}
if (digitalRead(led7) == LOW)
{client.println(" CHILD2 IS OFF <a href=\"/CHILD2_LED\"><button class=\"button button_on\">TURN IT ON.</button></a>
");}
else
{client.println(" CHILD2 IS ON <a href=\"/CHILD2_LED\"><button class=\"button button_off\">TURN IT OFF</button></a>
");}
client.println("</body>");
client.println("</html>");
delay(10);
//stopping client
client.stop();
// CONTROLING ARDUINO PINS
// CONTROLLING LIGHTS
if(readString.indexOf("LIVING_LED") > 0)
{
digitalWrite(led2, !digitalRead(led2));
}
else
if(readString.indexOf("BATH_LED") > 0)
{
digitalWrite(led3, !digitalRead(led3));
}
else
if(readString.indexOf("CHILD1_LED") > 0)
{
digitalWrite(led4, !digitalRead(led4));
}
else
if(readString.indexOf("KITCHEN_LED") > 0)
{
digitalWrite(led5, !digitalRead(led5));
}
else
if(readString.indexOf("HALL_LED") > 0)
{
digitalWrite(led6, !digitalRead(led6));
}
else
if(readString.indexOf("CHILD2_LED") > 0)
{
digitalWrite(led7, !digitalRead(led7));
}
//clearing string for next read
readString="";
}
}
}
}
}