Go Down

Topic: auto refresh on browser (Read 4108 times) previous topic - next topic

david1234

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!

PaulS

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

zoomkat

Meta refresh server test code.

Code: [Select]
// 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();
  }
}

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

david1234

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)




PaulS

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.

david1234

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

PaulS

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.

SurferTim

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.

doughboy

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.

zoomkat

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: [Select]

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

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

zoomkat

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: [Select]

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

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

david1234

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



PaulS

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

david1234

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

PaulS

Code: [Select]
      if (d=0)
Bzzzt. Try again.

Go Up