How to open new page from another page - arduino ethernet shield

Hi, I've three html pages: a main page and two pages and I want open the two pages through 2 buttons from the main page. How do I do this?

Something like this should do it with URL links:

G_EthernetClient.print(F("<a href=/BATHROOM/>Bathroom</a>
"));

This should display a link called “Bathroom” and will call a web page called “/BATHROOM/” on your web page. But you need to write code within your application to read the URL, to work out the call is to BATHROOM and to call the procedure within your application that will display the bathroom web page.

For a button you will need something like this:

G_EthernetClient.println(F("<input type='submit' formaction='/BATHROOM/' style='width:100px;height:40px;font-size:23px' value='Bathroom'>"));

Cheers

CatweazleNZ

For example if I have this for main page:

<html>
 <head>
 </head>
 <body>
 <a href=""> Page1 </a>
 <a href=""> Page2 </a>
 </body>
</html>

and I want open this

#include <String.h>  
#include <SPI.h>  
#include <Ethernet.h>  
  
byte mac[] = { 0x90, 0xA2, 0xDA, 0x0E, 0xAC, 0x68 };   
 
//creo una variabile char per memorizzare i byte letti dal client
char Data_RX;
 
//creao un oggetto server che rimane in ascolto sulla porta
//specificata
EthernetServer server(80);
int ledPin = 9; // LED pin  
String readString;   
boolean LEDON = false;
 
void setup()
{
    pinMode(ledPin, OUTPUT);
    Serial.begin(9600);
    if(!Ethernet.begin(mac)) Serial.println("dhcp failed");
    else {
       Serial.print("IP is ");
       Serial.println(Ethernet.localIP());
    }
    server.begin();
}
 
void loop()
{
   EthernetClient client = server.available();  
   if (client) {  
     boolean currentLineIsBlank = true;  
       while (client.connected()) {  
         if (client.available()) {  
           char c = client.read();  
           readString.concat(c);   
   
           if (c == '\n' && currentLineIsBlank) {  
   
             Serial.print(readString);  
   
             if(readString.indexOf("Led=1") > 0) {  
   
             digitalWrite(ledPin, HIGH);   
             LEDON = true;  
             }else{  
   
               digitalWrite(ledPin, LOW);   
               LEDON = false;  
             }  
   
             client.println("HTTP/1.1 200 OK");  
             client.println("Content-Type: text/html");  
             client.println();  
             client.print("<html><head><title>Domotica Chiana Lorenzo</title><meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' ></head><body>");  
             if (LEDON) {  
               client.println("<img src=http://img849.imageshack.us/img849/1513/accesao.jpg />");  
             }  
             else  
             {  
               client.println("<img src=http://img10.imageshack.us/img10/4719/spenta.jpg />");  
              }  
             client.print("<h2><a href='/?Led=1'>ACCENDI</a> | <a href='/?Led=0'>SPEGNI</a></h2>");  
             client.println("</body></html>");  
             readString="";  
             client.stop();  
  
 }   
 }   
 }   
}   
}

when i click “Page1”
and open this:

#include <String.h>  
#include <SPI.h>  
#include <Ethernet.h>
#define tempPin A0
int val_Adc = 0;
//variabile temperatura celsius
float tempC = 0;
//variabile temperatura fahrenheit
float tempF = 0;
//variabile temperatura kelvin
float tempK = 0;
 
byte mac[] = { 0x90, 0xA2, 0xDA, 0x0E, 0xAC, 0x68 };
EthernetServer server(80); //server port
String readString; 

void setup()
{
  //init seriale
  Serial.begin(9600);
  if(!Ethernet.begin(mac)) Serial.println("dhcp failed");
    else {
       Serial.print("IP is ");
       Serial.println(Ethernet.localIP());
    }
  server.begin();
}
 
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) {  
            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>Temperatura</title></head><BODY>
");
            
            //init variabile
            val_Adc = analogRead(tempPin);
 
            //eseguo un ciclo
            for(byte Ciclo = 0; Ciclo<100; Ciclo++)
            {
              //acquisisco il valore e lo sommo alla
              //variabile
              val_Adc += analogRead(tempPin);
              //questo ritardo serve per dare il tempo
              //all' ADC di eseguire correttamente
              //la prossima acquisizione
              //delay(10);
            }
            //°C = ((valoreADC * PrecisioneADC) – TensioneZeroGradi) / stepGradoTensione
            //eseguo la media dei 100 valori letti
            float media=val_Adc / 100;
 
            //Temperatura di rilevazione: -40°C ~ 125°C
            //Tipo di uscita: tensione
            //Alimentazione di tensione: 2.7 V ~ 5.5 V
            //Precisione: ±2°C 
            float tensione = media * 5.0; 
            tensione/=1024.0;//tensione in mV
            //temperatura in Celsius
            tempC=(tensione - 0.5) * 100;
            //invio i dati al computer
            Serial.print(tempC); Serial.println(" gradi C");
            tempF = (tempC * 9.0 / 5.0) + 32.0;
            Serial.print(tempF); Serial.println(" gradi F");
            tempK = tempC + 273.15;
            Serial.print(tempK); Serial.println(" gradi K");
            
              //output the value of each analog input pin
            client.print("
Temperatura in gradi Celsius: ");
            client.print(tempC);
            client.print("

");
            client.print("
Temperatura in gradi Fahrenheit: ");
            client.print(tempF);
            client.print("

");
            client.print("
Temperatura in gradi Kelvin: ");
            client.print(tempK);
            client.println("
</BODY></HTML>");
           }
          //generate main page with iframe
          else
          {
            client.print("<HTML><HEAD><TITLE>Temperatura</TITLE></HEAD>");
            client.print("

<h1>Tabella temperatura</h1>
");
            client.print("&nbsp;&nbsp;<a href='http://");
            client.print(Ethernet.localIP());
            client.print(":80/datastart' target='DataBox' title=''yy''>REFRESH MEDIO</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://");
            client.print(Ethernet.localIP());
            client.print(":80/data' target='DataBox' title=''xx''>SINGOLO DATO</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://");
            client.print(Ethernet.localIP());
            client.print(":80/datafast' target='DataBox' title=''zz''>REFRESH VELOCE</a>
");
            client.print("<iframe src='http://");
            client.print(Ethernet.localIP());
            client.print(":80/data' width='350' height='250' name='DataBox'>");
            client.print("</iframe>
</HTML>");
          }
          delay(1);
          //stopping client
          client.stop();
          //clearing string for next read
          readString="";
        }
      }
    }
  }
}

when i click “Page2”?

Server code that has buttons that open new pages embedded in the main page.

// 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>
");
            client.print("page refresh number: ");
            client.print(x); //current refresh count
            client.print("

");
            
              //output the value of each analog input pin
            client.print("analog input0 is: ");
            client.print(analogRead(analogInPin0));
            
            client.print("
analog input1 is: ");
            client.print(analogRead(analogInPin1));
                        
            client.print("
analog input2 is: ");
            client.print(analogRead(analogInPin2));
            
            client.print("
analog input3 is: ");
            client.print(analogRead(analogInPin3));
                                    
            client.print("
analog input4 is: ");
            client.print(analogRead(analogInPin4));
            
            client.print("
analog input5 is: ");
            client.print(analogRead(analogInPin5));
            client.println("
</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("

Arduino analog input data frame:
");
            client.print("&nbsp;&nbsp;<a href='http://192.168.1.102:84/datastart' target='DataBox' title=''yy''>META-REFRESH</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/data' target='DataBox' title=''xx''>SINGLE-STOP</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/datafast' target='DataBox' title=''zz''>FAST-DATA</a>
");
            client.print("<iframe src='http://192.168.1.102:84/data' width='350' height='250' name='DataBox'>");
            client.print("</iframe>
</HTML>");
          }
          delay(1);
          //stopping client
          client.stop();
          //clearing string for next read
          readString="";
        }
      }
    }
  }
}

I don't understand the last example.

Back to html basics. You have the arduino serve up pages like below that have clickable links to the other pages like below. The arduino server sends back the appropriate page based on weather page1, page2, or main is contained in the browser request.

<HTML>
<HEAD>
<TITLE>Arduino Main test page</TITLE>
<H1>Main test page</H1>
<a href=\"/?page1\"\">page1</a>
<a href=\"/?page2\"\">page2</a>

</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Arduino Page1 test page</TITLE>
<H1>Page1 test page</H1>
<a href=\"/?main\"\">main</a>
<a href=\"/?page2\"\">page2</a>

</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Arduino Page2 test page</TITLE>
<H1>Page2 test page</H1>
<a href=\"/?page1\"\">page1</a>
<a href=\"/?main\"\">main</a>

</BODY>
</HTML>