auto refresh on browser

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

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("
");
}
else
{
client.print("water off");
client.println("
");
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!

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

Meta refresh server test 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("
");
                    
          client.print("page refresh number ");
          client.println(x); //current refresh count
          client.println("
");
          client.println("
");
          
          client.print("Zoomkat's arduino analog input values:");
          client.println("
");
          client.println("
");
          
          // 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("
");
            }
           break;
          client.println("</BODY>");
          client.println("</HTML>");
         }
        }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
  }
}

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)

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.

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 ( :slight_smile: )
if you can just point me to something - it will be great!
thanks

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.

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.

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.

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.

<HTML>
<HEAD>
<TITLE>Zoomkat's cgi test</TITLE>
</HEAD>
Zoomkat's SSC-32 cgi test 2/28/10




Get data from SSC-32:


|<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>|



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


</HTML>

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.

<HTML>
<HEAD>
<TITLE>Zoomkat's iframe refresh test</TITLE>
</HEAD>
Zoomkat's iframe refresh test 5/1/12




Get analog data from arduino:


|<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>|



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


</HTML>

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("");
client.print("");
client.print("<meta http-equiv="refresh" content="1">");
client.print("Test");
client.print("");
client.println("");
client.print("autorefresh test ");
client.println("
");

// printing the message
client.print("PIR Status (input 4)");
if (digitalRead(PIRChannel) ==HIGH)
{
client.print("All Good");
client.print("
");
}
else
{
client.print("Warning");
client.print("
");
}
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();
}
}

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().

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("");
client.print("");
client.print("<meta http-equiv="refresh" content="1">");
client.print(" Avivim-Test");
client.print("");
client.println("");
client.print("autorefresh test ");
client.println("
");

// printing the message
pir_cheak();
if (d=0)
{
client.print("All Good - No Movement");
client.print("
");
}
else
{
client.print("Warning - Movement");
client.print("
");
}

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);
}
}

      if (d=0)

Bzzzt. Try again.

but how he will know which massage to print?
there is no condition here.
what do I don't understand?

He meant change it, not remove it. The format is not correct. That is an assignment statement, not a compare. This would be correct:

if(d == 0)

Two equal signs, not one.

still no good.

yet another question - is it possible to make the two run together
I'm mean that the sensor will keep working even if nobody is connected to him?
because now - only after I'm connecting to server at ip 10.0.0.155 it's start working...

Thanks ,

We can't see what code you are running now. Remember to use the icon with the # symbol when posting code.

You are not setting the variable 'd' correctly.

void pir_cheak()
{
   
   if (digitalRead(PIRChannel) ==HIGH) // no movement - Green LED
          {
            digitalWrite(RedLED, LOW);
            digitalWrite(GreenLED,HIGH);
            // If you change d here...
            d=0;
                       }
          else
         {
             digitalWrite(GreenLED,LOW); // Movement - Red LED
            digitalWrite(RedLED,HIGH);
             // ...you need to change d here too.
             d=1;
             // I would do this delay somewhere else in the code, or remove it
             // it can't respond to the web server requests while in this delay
             delay(5000); 
         }
 }

Then move the call to pir_cheak() before the
// listen for incoming clients
remark.

add: I would also add another variable to track the status of the pir pin. If there is motion, set the variable to 1. Don't set that variable to zero until you load the webpage. That way you will know two things. If there is motion now (d), and if there was motion since the last download (your new variable).