Go Down

Topic: Add buttons to existing Web Page ? (Read 278 times) previous topic - next topic

Nov 17, 2014, 10:34 am Last Edit: Nov 17, 2014, 01:43 pm by Rainbowfish
Hi everyone,

I have tried to add buttons to this web page by duplicating the existing buttons in the Web page.
However if I click on the duplicate buttons they imitate the existing buttons, and I have tried other methods which were not successful. HTML not my strong side :(

Is this page expandable?

Thanks to all who have helped with my endeavour`s.

Below is my sketch
Thanks again
Code: [Select]



#include <SPI.h>
#include <Ethernet.h>
#include <LiquidCrystal.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#define ONE_WIRE_BUS 9

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 0, 0, 8);
EthernetServer server(80);

int relay1 = 8;
int Button1 = A0;
int val = 0;
String state = "OFF";

LiquidCrystal lcd(7, 6, 5, 4, 3, 2);

OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);



void setup()
{
  Serial.begin(9600);
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server IP is ");
  Serial.println(Ethernet.localIP());

  pinMode(relay1, OUTPUT);
  pinMode(Button1, INPUT);
  sensors.begin();
  lcd.begin(16, 2);
}

void loop()
{
  sensors.requestTemperatures();
  delay (1000);
  Serial.print("Temperature is: ");
  lcd.setCursor(0, 0);
  lcd.print(sensors.getTempCByIndex(0));
  lcd.print((char)223);
  lcd.print("C");
  Serial.print(sensors.getTempCByIndex(0));

  if (analogRead(Button1) == 1023)

  {
    digitalWrite(relay1, HIGH);

    lcd.setCursor(0, 1);
    lcd.print("ON by Switch               ");
  }
  if (sensors.getTempCByIndex(0) > 22)

  {
    digitalWrite(relay1, LOW);
    lcd.setCursor(0, 1);
    lcd.print("OFF Temp Control                ");
  }

  EthernetClient client = server.available();

  if (client) {
    Serial.println("new client");
    boolean currentLineIsBlank = true;
    String string = "";
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        string.concat(c);
       
        int position = string.indexOf("LED=");

        if (string.substring(position) == "LED=ON")
        {
          digitalWrite(relay1, HIGH);
          state = "ON";
        }
        if (string.substring(position) == "LED=OFF")
        {
          digitalWrite(relay1, LOW);
          state = "OFF";
        }
        if (c == '\n' && currentLineIsBlank) {

          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");
          client.println();
          client.println("<html>");
          client.println("<head>");
          client.println("<title>Hot or Not</title>");
          client.println("</head>");
          client.println("<body>");
          client.println("<h1 align='center'>Home Control</h1><h3 align='center'>Geyser Temp</h3>");
          client.println("<div style='text-align:center;'><h2>");
          client.println(sensors.getTempCByIndex(0));
          client.println("&deg");
          client.println("C");
          client.println("<p>");
          client.println("<button onClick=location.href='./?LED=ON\' style='FONT-SIZE: 50px; HEIGHT: 200px; FONT-FAMILY: Arial; WIDTH: 325px; 126px; Z-INDEX: 0; TOP: 236px;'>");
          client.println("ON");
          client.println("</button>");
          client.println("<button onClick=location.href='./?LED=OFF\' style='FONT-SIZE: 50px; HEIGHT: 200px; FONT-FAMILY: Arial; WIDTH: 325px; 126px; Z-INDEX: 0; TOP: 236px;'>");
          client.println("OFF");
          client.println("</button>");
          client.println("<br /><br />");
          client.println("<b>Switch is ");
          client.print(state);
          client.println("</b><br />");
          client.println("</b></body>");
          client.println("</html>");

          {
            lcd.clear();
            lcd.setCursor(0, 1);
            lcd.print(state);
            lcd.print(" by WebSurfer");
          }
          break;
        }
        if (c == '\n') {
          currentLineIsBlank = true;
        }
        else if (c != '\r') {
          currentLineIsBlank = false;
        }
      }
    }
    delay(1);
    client.stop();
  }
}


SurferTim

#1
Nov 17, 2014, 02:22 pm Last Edit: Nov 17, 2014, 02:27 pm by SurferTim
It is expandable, but if you are not careful, you will run out of SRAM. Use the F() function with all your static strings.
Code: [Select]
          client.println(F("HTTP/1.1 200 OK"));
// and
          lcd.print(F(" by WebSurfer"));


edit: I don't know if the F() function is compatible with the lcd.print() function. You might want to check one to see if it compiles ok.

It is expandable, but if you are not careful, you will run out of SRAM. Use the F() function with all your static strings.
Code: [Select]
          client.println(F("HTTP/1.1 200 OK"));
// and
          lcd.print(F(" by WebSurfer"));


edit: I don't know if the F() function is compatible with the lcd.print() function. You might want to check one to see if it compiles ok.

Yes the lcd.print(F(" by WebSurfer")); is compatible. Tried and Tested Ok.

I still would like to know how do I add another set of buttons to this Web page that can switch some more relays On and Off?


I don't know if is the solution, anyway, you forget to close the tag <p> opened before the first button.
Close the tag after the second button and try again... let us know.

I don't know if is the solution, anyway, you forget to close the tag <p> opened before the first button.
Close the tag after the second button and try again... let us know.
Thanks for your interest, but the code needs some addition like, /* /?LED=ON\ to /?LED2=ON\ */or something. And prior to that, This must change, /* int position = string.indexOf("LED="); // */ I assume. I have tried several ways but no go :(

Thanks again.

So Rainbowfish, I ask to my friend of Apio Team and show him the code.
He know what you want to do. He suggest to do something like this:
Code: [Select]

#include <SPI.h>
#include <Ethernet.h>
#include <LiquidCrystal.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#define ONE_WIRE_BUS 9

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 0, 0, 8);
EthernetServer server(80);

int relay1 = 8;
int Button1 = A0;
int val = 0;
String state = "OFF";

LiquidCrystal lcd(7, 6, 5, 4, 3, 2);

OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);



void setup()
{
 Serial.begin(9600);
 Ethernet.begin(mac, ip);
 server.begin();
 Serial.print("server IP is ");
 Serial.println(Ethernet.localIP());

 pinMode(relay1, OUTPUT);
 pinMode(Button1, INPUT);
 sensors.begin();
 lcd.begin(16, 2);
}

void loop()
{
 sensors.requestTemperatures();
 delay (1000);
 Serial.print("Temperature is: ");
 lcd.setCursor(0, 0);
 lcd.print(sensors.getTempCByIndex(0));
 lcd.print((char)223);
 lcd.print("C");
 Serial.print(sensors.getTempCByIndex(0));

 if (analogRead(Button1) == 1023)

 {
   digitalWrite(relay1, HIGH);

   lcd.setCursor(0, 1);
   lcd.print("ON by Switch               ");
 }
 if (sensors.getTempCByIndex(0) > 22)

 {
   digitalWrite(relay1, LOW);
   lcd.setCursor(0, 1);
   lcd.print("OFF Temp Control                ");
 }

 EthernetClient client = server.available();

 if (client) {
   Serial.println("new client");
   boolean currentLineIsBlank = true;
   String string = "";
   while (client.connected()) {
     if (client.available()) {
       char c = client.read();
       Serial.write(c);
       string.concat(c);
       
       int position = string.indexOf("LED=");
[color=red]int position2 = string.indexOf("LED2=");[/color]

       if (string.substring(position) == "LED=ON")
       {
         digitalWrite(relay1, HIGH);
         state = "ON";
       }
       if (string.substring(position) == "LED=OFF")
       {
         digitalWrite(relay1, LOW);
         state = "OFF";
       }
[color=red]if (string.substring(position2) == "LED2=ON")
       {
         digitalWrite(relayX, HIGH);
         state2 = "ON";
       }
       if (string.substring(position2) == "LED2=OFF")
       {
         digitalWrite(relayX, LOW);
         state2 = "OFF";
       }[/color]
       if (c == '\n' && currentLineIsBlank) {

         client.println("HTTP/1.1 200 OK");
         client.println("Content-Type: text/html");
         client.println("Connection: close");
         client.println();
         client.println("<html>");
         client.println("<head>");
         client.println("<title>Hot or Not</title>");
         client.println("</head>");
         client.println("<body>");
         client.println("<h1 align='center'>Home Control</h1><h3 align='center'>Geyser Temp</h3>");
         client.println("<div style='text-align:center;'><h2>");
         client.println(sensors.getTempCByIndex(0));
         client.println("&deg");
         client.println("C");
         client.println("<p>");
         client.println("<button onClick=location.href='./?LED=ON\' style='FONT-SIZE: 50px; HEIGHT: 200px; FONT-FAMILY: Arial; WIDTH: 325px; 126px; Z-INDEX: 0; TOP: 236px;'>");
         client.println("ON");
         client.println("</button>");
         client.println("<button onClick=location.href='./?LED=OFF\' style='FONT-SIZE: 50px; HEIGHT: 200px; FONT-FAMILY: Arial; WIDTH: 325px; 126px; Z-INDEX: 0; TOP: 236px;'>");
         client.println("OFF");
         client.println("</button>");

         [color=red]client.println("<button onClick=location.href='./?LED2=ON\' style='FONT-SIZE: 50px; HEIGHT: 200px; FONT-FAMILY: Arial; WIDTH: 325px; 126px; Z-INDEX: 0; TOP: 236px;'>");
         client.println("ON");
         client.println("</button>");
         client.println("<button onClick=location.href='./?LED2=OFF\' style='FONT-SIZE: 50px; HEIGHT: 200px; FONT-FAMILY: Arial; WIDTH: 325px; 126px; Z-INDEX: 0; TOP: 236px;'>");
         client.println("OFF");
         client.println("</button>");[/color]

 client.println("</p>");
         client.println("<br /><br />");
         client.println("<b>Switch is ");
         client.print(state);
         client.println("</b><br />");
         client.println("</b></body>");
         client.println("</html>");

         {
           lcd.clear();
           lcd.setCursor(0, 1);
           lcd.print(state);
           lcd.print(" by WebSurfer");
         }
         break;
       }
       if (c == '\n') {
         currentLineIsBlank = true;
       }
       else if (c != '\r') {
         currentLineIsBlank = false;
       }
     }
   }
   delay(1);
   client.stop();
 }
}


At the moment he can't try this snippet, but if you can try it, you can send me output or behaviour of the sketch. Probably you have just try this path.
Hope this helps

zoomkat

Combined client/server code that has several buttons.

Code: [Select]

//zoomkat 7-03-12, combined client and server
//simple button GET with iframe code
//for use with IDE 1.0
//open serial monitor and send an g to test client and
//see what the arduino client/server receives
//web page buttons make pin 5 high/low
//use the ' in html instead of " to prevent having to escape the "
//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 }; //assign arduino mac address
byte ip[] = {192, 168, 1, 102 }; // ip in lan assigned to arduino
byte gateway[] = {192, 168, 1, 1 }; // internet access via router
byte subnet[] = {255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port arduino server will use
EthernetClient client;
char serverName[] = "checkip.dyndns.com"; // (DNS) zoomkat's test web page server
//byte serverName[] = { 208, 104, 2, 86 }; // (IP) zoomkat web page server IP address

String readString; //used by server to capture GET request

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

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

  //pinMode(5, OUTPUT); //pin 5 selected to control
  Ethernet.begin(mac,ip,gateway,gateway,subnet);
  server.begin();
  Serial.begin(9600);
  Serial.println(F("server/client 1.0 test 7/03/12")); // keep track of what is loaded
  Serial.println(F("Send an g in serial monitor to test client")); // what to do to test client
}

void loop(){
  // check for serial input
  if (Serial.available() > 0)
  {
    byte inChar;
    inChar = Serial.read();
    if(inChar == 'g')
    {
      sendGET(); // call client sendGET function
    }
  } 

  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.print(readString); //print to serial monitor for debuging

            //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><br><br>"));

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

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

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

            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><br><br>"));

           
           
                      // 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><br><br>"));       
                   
          // 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</><br><br>"));   
   
         
          // 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>"));
          }

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

          ///////////////////// control arduino pin
          if(readString.indexOf('2') >0)//checks for 2
          {
            digitalWrite(5, HIGH);    // set pin 5 high
            Serial.println("Led 5 On");
            Serial.println();
          }
          if(readString.indexOf('3') >0)//checks for 3
          {
            digitalWrite(5, LOW);    // set pin 5 low
            Serial.println("Led 5 Off");
            Serial.println();
          }
          if(readString.indexOf('4') >0)//checks for 4
          {
            digitalWrite(6, HIGH);    // set pin 6 high
            Serial.println("Led 6 On");
            Serial.println();
          }
          if(readString.indexOf('5') >0)//checks for 5
          {
            digitalWrite(6, LOW);    // set pin 6 low
            Serial.println("Led 6 Off");
            Serial.println();
          }
          if(readString.indexOf('6') >0)//checks for 6
          {
            digitalWrite(7, HIGH);    // set pin 7 high
            Serial.println("Led 7 On");
            Serial.println();
          }
          if(readString.indexOf('7') >0)//checks for 7
          {
            digitalWrite(7, LOW);    // set pin 7 low
            Serial.println("Led 7 Off");
            Serial.println();
          }     
          if(readString.indexOf('8') >0)//checks for 8
          {
            digitalWrite(8, HIGH);    // set pin 8 high
            Serial.println("Led 8 On");
            Serial.println();
          }
          if(readString.indexOf('9') >0)//checks for 9
          {
            digitalWrite(8, LOW);    // set pin 8 low
            Serial.println("Led 8 Off");
            Serial.println();
          }         

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

        }
      }
    }
  }
}

//////////////////////////
void sendGET() //client function to send and receive GET data from external server.
{
  if (client.connect(serverName, 80)) {
    Serial.println(F("connected"));
    client.println(F("GET / HTTP/1.1"));
    client.println(F("Host: checkip.dyndns.com"));
    client.println(F("Connection: close"));
    client.println();
  }
  else {
    Serial.println(F("connection failed"));
    Serial.println();
  }

  while(client.connected() && !client.available()) delay(1); //waits for data
  while (client.connected() || client.available()) { //connected or data available
    char c = client.read();
    Serial.print(c);
  }

  Serial.println();
  Serial.println(F("disconnecting."));
  Serial.println(F("=================="));
  Serial.println();
  client.stop();

}

Google forum search: Use Google Advanced Search and use Http://forum.arduino.cc/index in the "site or domain:" box.

#7
Nov 18, 2014, 08:41 pm Last Edit: Nov 18, 2014, 08:42 pm by Rainbowfish
zoomkat you make me cry with joy.

Thank you

Go Up