Go Down

Topic: Adding button read out to webserver (Read 974 times) previous topic - next topic

Racerr87

Dear all,

Iam trying to make a garage door opener, a webpage controls relays that are parallel connected to the physical controls of the door opener.

Ive got the relay working like i wanted, but i thought it would be nice to read out the door in movement when the both limit switches of the motor are not triggered. And send this to the webpage without reloading the whole page to check if there is pin input.

I found out that it can be done with AJAX:

https://startingelectronics.org/tutorials/arduino/ethernet-shield-web-server-tutorial/web-server-read-switch-automatically-using-AJAX/

Ive been trying to implement that code in to what i got this far, but no luck i keep getting errors.

Ive tried iframe command that didn't work,
Tried this simple solution:

Code: [Select]
if (digitalRead(8))
{
client.println("<h3>ON</h3>");
}
else
{
client.println("<h3>OFF</h3>");
}


But that requires that the whole site needs to be refreshed constantly.

My goal is to put under the last button text when the door is in movement thus physical limit switch not triggered.

Can u guys share your thoughts about a solution.

Thanks!

Racerr87

#1
Dec 29, 2015, 12:01 am Last Edit: Dec 29, 2015, 05:07 pm by Racerr87
See solution in post #3

zoomkat

Not quite what you are looking for, but the single-stop request info from the arduino and displays the retuned info in an iframe. You couls also add control buttons to such a page.

Code: [Select]

// zoomkat's meta refresh data frame test page 5/25/13
// use http://192.168.1.102:84 in your brouser for main page
// http://192.168.1.102:84/data static data page
// http://192.168.1.102:84/datastart meta refresh data page
// for use with W5100 based ethernet shields
// set the refresh rate to 0 for fastest update
// use STOP for single data updates

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

const int analogInPin0 = A0;
const int analogInPin1 = A1;
const int analogInPin2 = A2;
const int analogInPin3 = A3;
const int analogInPin4 = A4;
const int analogInPin5 = A5;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // arduino 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
unsigned long int x=0; //set refresh counter to 0
String readString;

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

void setup(){
  Serial.begin(9600);
    // disable SD SPI if memory card in the uSD slot
  pinMode(4,OUTPUT);
  digitalWrite(4,HIGH);

  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();
  Serial.println("meta refresh data frame test 5/25/13"); // so I can keep track of what is loaded
}

void loop(){
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
         if (readString.length() < 100) {
          readString += c;
         }
        //check if HTTP request has ended
        if (c == '\n') {

          //check get atring received
          Serial.println(readString);

          //output HTML data header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          //generate data page
          if(readString.indexOf("data") >0) {  //checks for "data" page
            x=x+1; //page upload counter
            client.print("<HTML><HEAD>");
            //meta-refresh page every 1 seconds if "datastart" page
            if(readString.indexOf("datastart") >0) client.print("<meta http-equiv='refresh' content='1'>");
            //meta-refresh 0 for fast data
            if(readString.indexOf("datafast") >0) client.print("<meta http-equiv='refresh' content='0'>");
            client.print("<title>Zoomkat's meta-refresh test</title></head><BODY><br>");
            client.print("page refresh number: ");
            client.print(x); //current refresh count
            client.print("<br><br>");
           
              //output the value of each analog input pin
            client.print("analog input0 is: ");
            client.print(analogRead(analogInPin0));
           
            client.print("<br>analog input1 is: ");
            client.print(analogRead(analogInPin1));
                       
            client.print("<br>analog input2 is: ");
            client.print(analogRead(analogInPin2));
           
            client.print("<br>analog input3 is: ");
            client.print(analogRead(analogInPin3));
                                   
            client.print("<br>analog input4 is: ");
            client.print(analogRead(analogInPin4));
           
            client.print("<br>analog input5 is: ");
            client.print(analogRead(analogInPin5));
            client.println("<br></BODY></HTML>");
           }
          //generate main page with iframe
          else
          {
            client.print("<HTML><HEAD><TITLE>Zoomkat's frame refresh test</TITLE></HEAD>");
            client.print("Zoomkat's Arduino frame meta refresh test 5/25/13");
            client.print("<BR><BR>Arduino analog input data frame:<BR>");
            client.print("&nbsp;&nbsp;<a href='/datastart' target='DataBox' title=''yy''>META-REFRESH</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='/data' target='DataBox' title=''xx''>SINGLE-STOP</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='/datafast' target='DataBox' title=''zz''>FAST-DATA</a><BR>");
            client.print("<iframe src='/data' width='350' height='250' name='DataBox'>");
            client.print("</iframe><BR></HTML>");
          }
          delay(1);
          //stopping client
          client.stop();
          //clearing string for next read
          readString="";
        }
      }
    }
  }
}

Google forum search: Use Google Search box in upper right side of this page.
Why I like my 2005 Rio Yellow Honda S2000  https://www.youtube.com/watch?v=pWjMvrkUqX0

Racerr87

Thanks for that code Zoomkat!!

Ive learned a lot from your buttons code and other stuff you helped people with!

I thought about only displaying text in the iframe but i couldn't get that working. Thanks for showing me that i needed to create a data page for in the iframe!

What i did now is remove the refresh buttons and let the iframe refresh always every second or faster.
Combined it with the read digital code to check if limit switch is activated or not.

This is my (your) modified code:

Code: [Select]

//Racerr87 Display pin input in iframe to
//prevent complete wegpage to reload.
//Refresh iframe every second or faster.
//29-12-2015
//Thanks to zoomkat!

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



byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 00, 100, 10, 1 }; // arduino ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(80); //server port
unsigned long int x=0; //set refresh counter to 0
String readString;

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

void setup(){
  Serial.begin(9600);
  pinMode(6, INPUT);           // input pin for switch

  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();
  Serial.println("Door status in serial monitor"); // so I can keep track of what is loaded
}

void loop(){
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
         if (readString.length() < 100) {
          readString += c;
         }
        //check if HTTP request has ended
        if (c == '\n') {

          //check get atring received
          Serial.println(readString);

          //output HTML data header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          //generate data page
          if(readString.indexOf("data") >0) {  //checks for "data" page
            client.print("<HTML><HEAD>");
            //meta-refresh page every 0.5 seconds always/automatic
            client.print("<meta http-equiv='refresh' content='0.5'>");
           
            if (digitalRead(6))
            {
            client.println("<center> <h3>Door open!</h3>");
            }
            else
            {
            client.println(" <center> <h3>!! InMotion !!</h3>");
            }
          }

          //generate main page with iframe
          else
          {
            client.print("<center>");
            client.print("<h3>Door Status:</h3>");
            client.print("<iframe src='/data' frameborder='0' name='DataBox'>");
            client.print("</iframe><BR></HTML>");
          }
          delay(1);
          //stopping client
          client.stop();
          //clearing string for next read
          readString="";
        }
      }
    }
  }
}


Thanks again this problem is solved for me  :)

Racerr87

#4
Dec 29, 2015, 09:34 pm Last Edit: Dec 29, 2015, 09:47 pm by Racerr87
Adding the iframe created a new bug which i am trying to fix the whole night.

I just wanted to add an extra line of text at the end of the page, if i do that the iframe fails to display my button read code but displays my entire page in the iframe  :smiley-confuse:
I cant at an extra line anywhere...

Code: [Select]

//Schuur deur Opener


#include <SPI.h>
#include <Ethernet.h>
boolean toggle = true; //declares toggle mode

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

//  **Assign a Pin number to a name "name = Pin nr." **
//  **PIN 1 + 13 niet gebruiken voor relay (krijgen spanning bij power up!!**
                             
int ledonboard  = 13;                    // Pin 13 = ONBOARD LED
int Button1     = 8;                     // Button 1
int Button2     = 9;                     // Button 2
int Button3     = 10;                    // Button 3
int relayOpen   = 2;                     // RELAY1
int relayClose  = 3;                     // RELAY2
int relayReset  = 4;                     // RELAY3 = Reset = Eindstop "3" in schakel kast
int relayLight  = 5;                     // RELAY4

String readString;

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

void setup(){
 
  //  **Sets which pins need to be output or input** 
 
  pinMode(relayOpen,  OUTPUT); //pin selected to control
  pinMode(relayClose, OUTPUT); //pin selected to control
  pinMode(relayReset, OUTPUT); //pin selected to control
  pinMode(relayLight, OUTPUT); //pin selected to control
  pinMode(6, INPUT);           // input pin for switch
  pinMode(7, INPUT);           // input pin for switch
  pinMode(8, INPUT);           // input pin for switch
 
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();

  //enable serial data print
  Serial.begin(9600);
  Serial.println("server multi pin button 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
         
          // ***Stopt refresh button click***
         
          if(readString.indexOf('?') >=0) { //don't send new page is there is ? in the "link" (achter IP)
            client.println("HTTP/1.1 204");
            client.println();
            client.println(); 
          }
         
          /// *** Genereerd data pagina voor in iframe ***
         
          if(readString.indexOf("data") >0) {  //checks for "data" page
            client.print("<HTML>");
            client.print("<meta http-equiv='refresh' content='1'>");  //meta-refresh page every 1 seconds
           
            if (digitalRead(6)==HIGH)
            {
            client.println("<hr width=100% color=#00FF00>"); 
            client.println("<center> <h3>Deur open!</h3>");
            client.println("<hr width=100% color=#00FF00>");
            }
            if (digitalRead(7)==HIGH)
            {
            client.println("<hr width=100% color=#FF0000>"); 
            client.println("<center> <h3>Deur Dicht!</h3>");
            client.println("<hr width=100% color=#FF0000>");
            }
            if (digitalRead(6)==LOW)
            if (digitalRead(7)==LOW)
            {
            client.println("<hr width=100% color=#FF8040>"); 
            client.println(" <center> <h3>!! In Beweging !!</h3>");
            client.println("<hr width=100% color=#FF8040>");
            }
        }
       
           
          /// **** Einde data pagina **** 
         
          //**** Start HTML pagina ****
         
          else {

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

          client.println("<HTML>");
          client.println("<HEAD>");
         
          client.println("<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'/>");
                   
          client.println("<TITLE>Egbert's Deur Opener!</TITLE>");  //Titel van Internet pagina
          client.println("</HEAD>");
          client.println("<BODY>");

          client.println("<center>");              //Alles Gecentreerd
         
          client.println("<hr width=100% color=#0000FF>");
          client.println("<H1>Schuurdeur Opener</H1>");     //Header text
          client.println("<hr width=100% color=#0000FF>");
         
          // **** Buttons ****
          // input type=submit   --> Maakt verzend button
          // value='Text'        --> Tussen haakjes naam van button
          // style=width:100px;height:45px  --> Hoogte en Breedte in Pixel
          // onClick=location.href='/?on8;' --> verteld wat er moet gebeuren als je er op klikt dus: ( /?on8; ) Komt achter IP te staan in adress balk.
         
          client.print("<br>");
          client.print("<input type=submit value='Open' style=width:100px;height:30px onClick=location.href='/?on2;'>"); //On2 = Deur Open = pin 2
          client.print("<br>");
          client.print("<br>");
          client.print("<input type=submit value='Half Open' style=width:100px;height:30px onClick=location.href='/?on4;'>"); //On4 = Deur half open = Eerst pin 2, dan pin 4
          client.print("<br>");
          client.print("<br>");         
          client.print("<input type=submit value='Dicht' style=width:100px;height:30px onClick=location.href='/?on3;'>"); //On3 = Deur Dicht = pin 3
          client.print("<br>");
          client.print("<br>");         
          client.print("<input type=submit value='Stop / Reset' style=width:100px;height:30px onClick=location.href='/?on5;'>"); //On5 = Stop/reset = pin 4
          client.print("<br>");
          client.print("<br>");         
          client.print("<input type=submit value='Licht!' style=width:100px;height:30px onClick=location.href='/?on6;'>"); //On6 = Licht aan = Pin5
         
          //**** Eind buttons ****
           
          client.print("<br>");
          client.print("<h4>Deur Status:</h4>");
         
          //**** Maakt een iframe met daarin de data pagina ****
          client.print("<iframe src='/data' height='85' frameborder='0' name='DataBox'>");
          client.print("</iframe>");
          //**** Einde iframe ***
         
          client.println("</BODY>");
          client.println("</HTML>");
          }
          //**** Eind HTML pagina ****

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

          ///////////////////// control arduino pin
     

zoomkat

The code you posted is missing part at the bottom. Is what you posted what works or does not work?
Google forum search: Use Google Search box in upper right side of this page.
Why I like my 2005 Rio Yellow Honda S2000  https://www.youtube.com/watch?v=pWjMvrkUqX0

Racerr87

ah sorry forgot to add the missing lines, due to more the 9000 words..

If i add something like this below the is frame, the iframe displays my whole website in the frame  :smiley-confuse:

client.print("<h4>My name here</h4>");


Code: [Select]
         ///////////////////// control arduino pin
     
           //**** Open Knop ****     
         
            if(readString.indexOf('2') >0)//Checks of er in adres balk "2" staat
          {
            digitalWrite(2, HIGH);    // set pin 2 high
            Serial.println("relay Open On");
          }
          if(readString.indexOf('2') >0)//Checks of er in adres balk "2" staat
          {
            delay(1000);  //tijd dat knop is "ingedrukt"
            digitalWrite(2, LOW);    // set pin 2 low
            Serial.println("relay Open Off");
          }         
                 
          //**** Half open Knop ****
         
            if(readString.indexOf('4') >0)//Checks of er in adres balk "4" staat
          {
            digitalWrite(2, HIGH);    // set pin 2 high = deur gaat open
            Serial.println("relay Open On, Half open");
          }
         
          if(readString.indexOf('4') >0)//Checks of er in adres balk "4" staat
          {
            delay(1000); // tijd dat knop is "ingedrukt"
            digitalWrite(2, LOW);    // set pin 2 high = deur gaat open
            Serial.println("relay Open Off, Half open");
          }
         
          if(readString.indexOf('4') >0)//Checks of er in adres balk "4" staat
          {
            delay(3000);  //tijd tot Deur Stop, dus half open is.
            digitalWrite(4, HIGH);    // set pin 4 low
            Serial.println("relay Eindstop 3 ON");
          }         
         
          if(readString.indexOf('4') >0)//Checks of er in adres balk "4" staat
          {
            delay(1000);  //Zet Relay Eindstop 3 uit.
            digitalWrite(4, LOW);    // set pin 4 low
            Serial.println("relay Eindstop 3 OFF");
          }
         
          //**** Dicht Knop ****
         
            if(readString.indexOf('3') >0)//Checks of er in adres balk "3" staat
          {
            digitalWrite(3, HIGH);    // set pin 3 high
            Serial.println("relay Dicht On");
          }
          if(readString.indexOf('3') >0)//Checks of er in adres balk "3" staat
          {
            delay(1000);  //tijd dat knop is "ingedrukt"
            digitalWrite(3, LOW);    // set pin 3 low
            Serial.println("relay Dicht Off");
          }         
         
          //**** Stop / Reset Knop ****
         
          if(readString.indexOf('5') >0)//Checks of er in adres balk "5" staat
          {
            digitalWrite(4, HIGH);    // set pin 4 high
            Serial.println("relay Stop/Reset On");
          }
          if(readString.indexOf('5') >0)//Checks of er in adres balk "5" staat
          {
            delay(1000);  //Zet Relay stop/reset uit.
            digitalWrite(4, LOW);    // set pin 4 low
            Serial.println("relay Stop/Reset OFF");
          }
         
          //**** Licht! Knop ****
         
          if(readString.indexOf('6') >0)//Checks of er in adres balk "6" staat
          {
            if(toggle)
            {
            digitalWrite(5, HIGH);    // set pin 5 high
            Serial.println("relay Licht On");
            toggle = !toggle;
          }
          else
          {
            digitalWrite(5, LOW);    // set pin 5 low
            Serial.println("relay Licht OFF");
            toggle = !toggle;
          }
          }       
         
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}

zoomkat

Quote
the iframe displays my whole website in the frame
You need to check your code and make sure that your code makes the distinction between a request for the whole web page and just the simple web page that returns the data to the iframe.
Google forum search: Use Google Search box in upper right side of this page.
Why I like my 2005 Rio Yellow Honda S2000  https://www.youtube.com/watch?v=pWjMvrkUqX0

Racerr87

You need to check your code and make sure that your code makes the distinction between a request for the whole web page and just the simple web page that returns the data to the iframe.
I think i found it i just removed the

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

And than it works :)

Thanks again for sharing your knowledge!!

Go Up