Pages: [1] 2 3   Go Down
Author Topic: auto refresh on browser  (Read 3514 times)
0 Members and 1 Guest are viewing this topic.
Offline Offline
Full Member
***
Karma: 0
Posts: 228
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Hello,
I'm using sparkfun ProEthernet , and I have connect to him a sensor.
in my code the page change only when I press F5 (refresh) , and so I can see the change on my sensor
what to I need to do /change in order that it will change automatically?
let say every 1 second?
I want to see "live" as possible

this is my code

Quote
void loop()
{
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (c == '\n' && currentLineIsBlank) {
                    client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

         
            client.print("Sensor Status (input 4)");
            if (digitalRead(sensor) ==HIGH)
          {
            digitalWrite(RedLED, LOW);
            digitalWrite(GreenLED,HIGH);               
            client.print("water on");
            client.println("<br />");
          }
          else
          {
            client.print("water off");
            client.println("<br />");
            digitalWrite(GreenLED,LOW);
            digitalWrite(RedLED,HIGH);
            delay(5000);
 
          }
 
 
            break;
        }
        if (c == '\n') {
           currentLineIsBlank = true;
        }
        else if (c != '\r') {
                   currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
          }
}


Thank you!
Logged

Seattle, WA USA
Offline Offline
Brattain Member
*****
Karma: 601
Posts: 48569
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

There are Meta tags (a google search term) that control how often a client asks the server to refresh the data that it has.
Logged

0
Offline Offline
Tesla Member
***
Karma: 141
Posts: 9470
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Meta refresh server test code.

Code:
// zoomkat meta refresh server test code
// arduino IDE 1.0
// for W5100 ethernet shield
// the IP address will be dependent on your local network/router
// port 80 is default for HTTP, but can be changed as needed
// use IP address like http://192.168.1.102:84 in your brouser
// or http://zoomkat.no-ip.com:84 with dynamic IP service
// use the \ slash to escape the " in the html
// meta refresh set for 2 seconds

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

int x=0; //set refresh counter to 0
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,102); // ip in lan
EthernetServer server(84); //server is using port 84

void setup()
{
  // start the server
  Ethernet.begin(mac, ip);
  server.begin();
}

void loop()
{
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
     while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // see if HTTP request has ended with blank line
        if (c == '\n') {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
         
          //meta-refresh page every 2 seconds
          x=x+1; //page upload counter
          client.println("<HTML>");
          client.print("<HEAD>");
          client.print("<meta http-equiv=\"refresh\" content=\"2\">");
          client.print("<TITLE />Zoomkat's meta-refresh test</title>");
          client.print("</head>");
          client.println("<BODY>");
          client.print("Zoomkat's meta-refresh test IDE 1.0");
          client.println("<br />");
                   
          client.print("page refresh number ");
          client.println(x); //current refresh count
          client.println("<br />");
          client.println("<br />");
         
          client.print("Zoomkat's arduino analog input values:");
          client.println("<br />");
          client.println("<br />");
         
          // output the value of each analog input pin
          for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
            client.print("analog input ");
            client.print(analogChannel);
            client.print(" is ");
            client.print(analogRead(analogChannel));
            client.println("<br />");
            }
           break;
          client.println("</BODY>");
          client.println("</HTML>");
         }
        }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
  }
}

Logged

Consider the daffodil. And while you're doing that, I'll be over here, looking through your stuff.   smiley-cool

Offline Offline
Full Member
***
Karma: 0
Posts: 228
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

o.k. - it's working
it's make a refresh every 2 second - and show me the status of the sensor
Thank you very much!

bye the way- is there a way to make only the status change? and not all the page to do refresh? and also to add color?
I mean something like this

                                      Sensor test
 
the status of the sensor is ____________ (all this will stay all the time )
                                   OPEN (in RED)
                                   CLOSE (In GREEN)     this part will change according to the status of the sensor


Thank you ,(again)



Logged

Seattle, WA USA
Offline Offline
Brattain Member
*****
Karma: 601
Posts: 48569
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
is there a way to make only the status change?
There is nothing Arduino specific in what you are asking. These are simple client/server issues, which you could find answers to if you'd bother looking.
Logged

Offline Offline
Full Member
***
Karma: 0
Posts: 228
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

o.k ,
but I only know a little about HTML - this is way I asked.
I don't know where to start looking - or what to ask google (  smiley )
 if you can just point me to something - it will be great!
thanks
Logged

Seattle, WA USA
Offline Offline
Brattain Member
*****
Karma: 601
Posts: 48569
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
I don't know where to start looking - or what to ask google
That's why I suggested that you google META tags. You could have learned about the refresh tag. That would have lead to frames. You could update just a single frame of a multi-frame page.

But, realistically, the page you are displaying is pretty small. Replacing the whole page would take less time than figuring out what frame needed to be refreshed, and sending just that frame.
Logged

Miramar Beach, Florida
Offline Offline
Faraday Member
**
Karma: 140
Posts: 5874
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

I use Paul's frames idea, just taken one step farther. I use a javascript routine in the main frame to load the Arduino page every minute or so. The main advantage I have found is that if the Arduino doesn't respond a couple times, the script will continue to try to load it. Using a META refresh or anything on the Arduino page will fail if the page fails to load one time.
Logged

SF Bay area
Offline Offline
Sr. Member
****
Karma: 2
Posts: 266
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

this may be a little advanced, but what you are looking for is refresh using ajax. it will do exactly what you said.
search something like how to auto refresh using ajax.
you can refresh even just one field value, change color, etc.

Its fairly straight forward, but you need to implement the handler in your server code. its a really cool feature.
Logged

0
Offline Offline
Tesla Member
***
Karma: 141
Posts: 9470
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

I suggest you make two simple pages for the arduino to serve up. The main page would have a frame in which the refreshing page would appear. The refreshing page probably can be modified such that if a request contains r, the meta refresh line is added to the refreshing page. If the request has a n, the meta refresh line is not included in the meta refresh page that is returned, so it stops refreshing. Two buttons on the main page would determine whether the link would contain an r or n, which would switch the page in the frame from refreshing or not refreshing. Below is some simple html with a frame that contains various linked pages/images that will appear in the box when selected. You can copy the below code, paste in notepad, and save on the desktop as frame.htm, then double click to open a browser to see how it works.

Code:
<HTML>
<HEAD>
<TITLE>Zoomkat's cgi test</TITLE>
</HEAD>
Zoomkat's SSC-32 cgi test 2/28/10
<BR>
<BR>
Get data from SSC-32:
<BR>
|<a href="http://web.comporium.net/~shb/pix/slider1.jpg" target="DataBox"
title="'SSC-32 version'">VER</a>|
<a href="http://web.comporium.net/~shb/pix/82_0_550.jpg" target="DataBox"
title="'Voltage on A analog input'">VA</a>|
<a href="http://web.comporium.net/~shb/arduino.txt" target="DataBox"
title="'Voltage on B analog input'">VB</a>|
<a href="http://zoomkat.no-ip.com:88/cgi-bin/cgi1.bat?hello" target="DataBox"
title="'Voltage on C analog input'">VC</a>|

<BR>
 <iframe src="http://zoomkat.no-ip.com:88/cgi-bin/cgi1.bat?hello" width="30%" height="100"
name="DataBox">
</iframe>
<BR>
</HTML>
 
Logged

Consider the daffodil. And while you're doing that, I'll be over here, looking through your stuff.   smiley-cool

0
Offline Offline
Tesla Member
***
Karma: 141
Posts: 9470
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

For a simple iframe demo, you can try the below html page as a test. Load the meta refresh server code into the arduino. Copy the below code and paste into notepad. Change the 192.168.1.102:84 in the html page to what you have for your arduino server. Save the the notepad html as frame.htm on the desktop, then open with a browser. Then you should be able to see how the meta refresh works in a frame and how it can be stopped and started with the simple buttons.

Code:
<HTML>
<HEAD>
<TITLE>Zoomkat's iframe refresh test</TITLE>
</HEAD>
Zoomkat's iframe refresh test 5/1/12
<BR>
<BR>
Get analog data from arduino:
<BR>
|<a href='http://192.168.1.102:84' target='DataBox'
title='SSC-32 version'>REFRESH</a>|
<a href='http://web.comporium.net/~shb/pix/82_0_550.jpg' target='DataBox'
title='Voltage on A analog input'>STOP</a>|

<BR>
<iframe src='http://192.168.1.102:84' width='30%' height='300'
name='DataBox'>
</iframe>
<BR>
</HTML>
 
Logged

Consider the daffodil. And while you're doing that, I'll be over here, looking through your stuff.   smiley-cool

Offline Offline
Full Member
***
Karma: 0
Posts: 228
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

O.K - thank you for these 2 suggestions.
I think I'll start with zoomkat - it's seem easier to understand .
but I think that something in my original code is wrong.
I cant get the second message- when the sensor is on I see that he is waiting 5 sec but he wont change the message .
maybe you can see something that I can't?

Thank you again ,


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

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10,0,0,155); // ip in lan
EthernetServer server(80); //server is using port 80
int PIRChannel=4;
int GreenLED=9;
int RedLED=7;

void setup()
{
    Ethernet.begin(mac, ip);
  server.begin();
  pinMode(GreenLED,OUTPUT);
  pinMode(RedLED,OUTPUT);
  pinMode(PIRChannel,INPUT);
}

void loop()
{
   if (digitalRead(PIRChannel) ==HIGH) // no movement - Green LED
          {
            digitalWrite(RedLED, LOW);
            digitalWrite(GreenLED,HIGH);
             msg();
          }
          else
         {
            digitalWrite(GreenLED,LOW); // Movement - Red LED
            digitalWrite(RedLED,HIGH);
            msg();
             delay(5000);
         }
 }


void msg()
{
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    boolean currentLineIsBlank = true;
     while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // see if HTTP request has ended with blank line
        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
         
          //meta-refresh page every 1 seconds
           client.println("<HTML>");
          client.print("<HEAD>");
          client.print("<meta http-equiv=\"refresh\" content=\"1\">");
          client.print("<TITLE />Test</title>");
          client.print("</head>");
          client.println("<BODY>");
          client.print("autorefresh test ");
          client.println("<br />");
                         
                 // printing the message
         client.print("PIR Status (input 4)");
         if (digitalRead(PIRChannel) ==HIGH)
         {
         client.print("All Good");
         client.print("<br />");
         }
         else
         {
         client.print("Warning");
         client.print("<br />");
         }
         break;
        }       
        if (c == '\n') {
          // you're starting a new line
          currentLineIsBlank = true;
        }
        else if (c != '\r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
  }
}


Logged

Seattle, WA USA
Offline Offline
Brattain Member
*****
Karma: 601
Posts: 48569
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

You've got the logic backwards. There is no need to read the PIR unless a client cares about it's state. The stuff in msg() belongs in loop(). The stuff in loop() should be in a function that loop() calls.

And, get rid of that delay().
Logged

Offline Offline
Full Member
***
Karma: 0
Posts: 228
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

still no good
this is the new code , and I have 2 problems with it :
1. I don't want it to start working only when I enter the card - from what I have seen , just after I enter the IP the sensor begin to work.
2. now I only get one message. the sensor is doing his work,and I can see that he is waiting 5 sec --> but only the movement massege is showing.

this is the code:

IPAddress ip(10,0,0,155); // ip in lan
EthernetServer server(80); //server is using port 80
int PIRChannel=4;
int GreenLED=9;
int RedLED=7;
int d;
void setup()
{
    Ethernet.begin(mac, ip);
  server.begin();
  pinMode(GreenLED,OUTPUT);
  pinMode(RedLED,OUTPUT);
  pinMode(PIRChannel,INPUT);
}

void loop()
{
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    boolean currentLineIsBlank = true;
     while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // see if HTTP request has ended with blank line
        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
         
          //meta-refresh page every 1 seconds
           client.println("<HTML>");
          client.print("<HEAD>");
          client.print("<meta http-equiv=\"refresh\" content=\"1\">");
          client.print("<TITLE /> Avivim-Test</title>");
          client.print("</head>");
          client.println("<BODY>");
          client.print("autorefresh test ");
          client.println("<br />");
                         
                 // printing the message
        pir_cheak();
        if (d=0)
        {
          client.print("All Good - No  Movement");
         client.print("<br />");
        }
        else
        {
            client.print("Warning -   Movement");
         client.print("<br />");
        }
       
       break;
        }       
        if (c == '\n') {
          // you're starting a new line
          currentLineIsBlank = true;
        }
        else if (c != '\r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
  }
}


void pir_cheak()
{
   
   if (digitalRead(PIRChannel) ==HIGH) // no movement - Green LED
          {
            digitalWrite(RedLED, LOW);
            digitalWrite(GreenLED,HIGH);
            d=0;
                       }
          else
         {
             digitalWrite(GreenLED,LOW); // Movement - Red LED
            digitalWrite(RedLED,HIGH);
             delay(5000);
         }
 }
Logged

Seattle, WA USA
Offline Offline
Brattain Member
*****
Karma: 601
Posts: 48569
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Code:
      if (d=0)
Bzzzt. Try again.
Logged

Pages: [1] 2 3   Go Up
Jump to: