Arduino HTML timer

Hey guys i am working on a led control panel i am new to programmering. At the moment I used samples from diffrent website or arduino website. now i use this code for 4 leds.

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

byte mac[] = { 0x90, 0xA2, 0xDA, 0x0E, 0xAF, 0xF6 }; //physical mac address
byte ip[] = { 192, 168, 50, 250 }; // ip in lan
byte gateway[] = { 192, 168, 50, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(80); //server port

String readString; 

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

void setup(){

  pinMode(5, OUTPUT); //pin selected to control
  pinMode(6, OUTPUT); //pin selected to control
  pinMode(7, OUTPUT); //pin selected to control
  pinMode(8, OUTPUT); //pin selected to control
  pinMode(2, OUTPUT); //pin selected to control
  //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 

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

          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<TITLE>Domotica Control Panel</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");

          client.println("<H1>Domotica Control Panel</H1>");
          
          // For simple testing, pin 5, 6, 7, and 8 are used in buttons
          // DIY buttons
          client.println("<p>WandContactDoos 1.</p>");
          client.println("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on2;'>");
          client.println("<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off3;'>");
          client.println("&nbsp;<input type=submit value='ALL OFF' style=width:100px;height:45px onClick=location.href='/?off3579;'>"); 

          // mousedown buttons
          client.println("<p>WandContactDoos 2.</p>");
          client.println("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on4;'>");
          client.println("<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off5;'>");
          client.println("&nbsp;<input type=submit value='ALL OFF' style=width:100px;height:45px onClick=location.href='/?off3579;'>");        
                   
          // mousedown radio buttons
          client.println("<p>WandContactDoos 3.</p>");
          client.println("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on6;'>");
          client.println("<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off7;'>");
          client.println("&nbsp;<input type=submit value='ALL OFF' style=width:100px;height:45px onClick=location.href='/?off3579;'>");  
   
          
          // custom buttons
          client.println("<p>WandContactDoos 4.</p>");
          client.println("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on8;'>");
          client.println("<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off9;'>");
          client.println("&nbsp;<input type=submit value='ALL OFF' style=width:100px;height:45px onClick=location.href='/?off3579;'>");

          client.println("</BODY>");
          client.println("</HTML>");
 
          delay(1);
          //stopping client
          client.stop();

          ///////////////////// control arduino pin
          if(readString.indexOf('2') >0)//checks for 2
          {
            digitalWrite(5, HIGH);    // set pin 5 high
            Serial.println("Led 5 On");
          }
          if(readString.indexOf('3') >0)//checks for 3
          {
            digitalWrite(5, LOW);    // set pin 5 low
            Serial.println("Led 5 Off");
          }
          
          if(readString.indexOf('4') >0)//checks for 4
          {
            digitalWrite(6, HIGH);    // set pin 6 high
            Serial.println("Led 6 On");
          }
          if(readString.indexOf('5') >0)//checks for 5
          {
            digitalWrite(6, LOW);    // set pin 6 low
            Serial.println("Led 6 Off");
          }
          
           if(readString.indexOf('6') >0)//checks for 6
          {
            digitalWrite(7, HIGH);    // set pin 7 high
            Serial.println("Led 7 On");
          }
          if(readString.indexOf('7') >0)//checks for 7
          {
            digitalWrite(7, LOW);    // set pin 7 low
            Serial.println("Led 7 Off");
          }     
          
            if(readString.indexOf('8') >0)//checks for 8
          {
            digitalWrite(8, HIGH);    // set pin 8 high
            Serial.println("Led 8 On");
          }
          if(readString.indexOf('9') >0)//checks for 9
          {
            digitalWrite(8, LOW);    // set pin 8 low
            Serial.println("Led 8 Off");
          }         
             
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}

I was looking around for a counddown timer on te server or any sample of it but i realy couldt find any HTML code so i touch why dont i start a topic. here are the functions. I wanna use.

functions:
-That i can set up a countdown timer for how long a led is powered.
-Shows the countdown behind the on/off/all off U know what i mean when u see the above code

I got a arduino uno and a ethernet shield.
I also have a SD card for use but ea time i try to use this it doesnt find the index.htm

Anyway i hope u guys can help me out with this and tell me if this is even possible.

If you didnt understand something from my topic that just reply and i try to explain what i mean since my english is not all to best :S

Cheers Pewebob

I don't know if I understood your problem.
I have see some examples about refreshing a web page on Arduino but using Ajax, because with Ajax you can refresh only one part of page. A counter/timer I think need to refresh only one part of page.

A video with a link to a site:

I am looking for a program that i can use for powering a device with solid states relais for a time between 1min-60 mins so if i typ in on a html page i want digitail output 9 up for 30 mins then it countdown 30 mins long with output 9 up after it digitial oupout 9 goes down again.

P.S. ty for the quick replay :smiley:

Cheers Pewebob

Would delay(1800000) work?
Or is 1800000 too big a number for the delay() function?

Hey i dont think u guys realy understand what i mean so i try to explain with pic :smiley:

This is my current Layout of my arduino page.(if doesnt work i got the link under it)
![](http://Image and video hosting by TinyPic)

this is al working but what i am looking for now is that i can add a timer. For ea output (Wandcontactdoos1) . On ea output i have
1 solid state relay that powers a WCD.

Example:
i want to select on the html page that i want WandContactdoos 1 Up for 30 mins.

So i can typ in a gui 30(mins) and pres start timer or something and it start countdown to 0 from 30 mins with output Wandcontactdoos 1 UP

Cheers Timmy

Hey i dont think u guys realy understand what i mean

So, what is the problem? You need a mechanism on the form to enable selecting a duration. That is NOT specific to having the Arduino as a web server.

Once you have that, the time value will be part of the GET request made when a submit button is selected. Extracting that name/value pair from the GET request is trivial. Extracting the value from the name/value pair is trivial. Using that value is trivial.

What Paul is suggesting (I believe) is that you use the web page and web server to let the user send the time duration to the Arduino, and have the Arduino do the timing. Your post implied that you were thinking of the browser doing the timing itself, which is not a good way to do it.

What Paul is suggesting (I believe) is that you use the web page and web server to let the user send the time duration to the Arduino, and have the Arduino do the timing.

Yep.

Hello Peter and Paul

thanks alot for the reply.

But if i make a timer on the arduino it self how do i send from the html page that I want Digtal output 9 UP for 30 min. I need to controll any from of action with the HTML page. But idk how to make a countdown timer linked to digital outputs. That I can enter on the html page how long i want a pin UP.

Cheers Timmy

P.S. U can also add me on skype ManlyMrPenguin if u wanna help me since i think that easyer because i am kinda bad in writing what i think its easyer for me to tell u on skype :smiley: So if u wanna help me feel free to add me and leave a comment u from the arduino Forum.

how do i send from the html page that I want Digtal output 9 UP for 30 min.

How are you defining the html page?

But idk how

Well, idk what idk means. This isn't a phone chat line.

Quit trying to do 27 things at once. Concentrate on ONE thing at a time.

How are you expecting the user of the GUI to enter a time? How is the time related to a pin?

I have an implementation that's similar to what you are looking for.

what I do is I run a javascript countdown on the html page, and periodically (like every 5 seconds I think, I can't remember), the javascript will make a call back to the arduino to get the actual time in order to synchronize the local countdown.

I implement json service on the arduino to provide the countdown value, and it is an ajax call from the html file.

I initially tried to update the countdown in real time, but the network latency is very unpredictable, so I just do a local countdown and just synchronize.

this is a screenshot of the page doing the countdown

Hey guys i finnaly found a product that is similair to what i want to create.

First off all for no miss understanding. This is a device that has the same end function as what i want to create with the Arduino UNO/ethernetshield/HTML page. So instead of using a pot meter to adjust the time. I want to use the HTML page to send to the arduino how long a pin needs to be UP.

I hope u guys understand it now better. Got any question leave a reply

Cheers Pewebob

I want to use the HTML page to send to the arduino how long a pin needs to be UP.

You said this about 14 times now. What, EXACTLY, do you want the user interface to look like? A slider? A text entry field? A series of buttons with fixed times? An image of an elephant playing a trombone?

Below is a very basic web page that uses a text box to send desired information back to an arduino server. You probably could use similar to send your delay value back to your server.

//zoomkat 7-29-12
//submit box test code
//for use with IDE 0021
//open serial monitor to see what the arduino receives
//use the ' to replace the " in the html 
//address will look like http://192.168.1.102:84/ when submited
//for use with W5100 based ethernet shields

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

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // 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

String readString; 

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

void setup(){

  pinMode(4, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();

  //enable serial data print 
  Serial.begin(9600); 
  Serial.println("servertest1"); // 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);

          //now output HTML data header

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

          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<TITLE>Arduino GET test page</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");

          client.println("<H1>HTML form GET example</H1>");

          client.println("<FORM ACTION='http://192.168.1.102:84' method=get >");

          client.println("Pin 4 'on' or 'off': <INPUT TYPE=TEXT NAME='LED' VALUE='' SIZE='25' MAXLENGTH='50'>
");

          client.println("<INPUT TYPE=SUBMIT NAME='submit' VALUE='Change Pin 4!'>");

          client.println("</FORM>");

          client.println("
");

          client.println("</BODY>");
          client.println("</HTML>");

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

          /////////////////////
          if(readString.indexOf("on") >0)//checks for on
          {
            digitalWrite(4, HIGH);    // set pin 4 high
            Serial.println("Led On");
          }
          if(readString.indexOf("off") >0)//checks for off
          {
            digitalWrite(4, LOW);    // set pin 4 low
            Serial.println("Led Off");
          }
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}

PaulS:
You said this about 14 times now. What, EXACTLY, do you want the user interface to look like? A slider? A text entry field? A series of buttons with fixed times? An image of an elephant playing a trombone?

I want to create a text entry field or a series of buttons.

I want to create a text entry field or a series of buttons.

OK. Permission is granted.

If you need to know how to do this, which is NOT in any way Arduino-specific, start here: HTML Forms

oke i tryed to make more buttons.

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

byte mac[] = { 0x90, 0xA2, 0xDA, 0x0E, 0xAF, 0xF6 }; //physical mac address
byte ip[] = { 192, 168, 50, 250 }; // ip in lan
byte gateway[] = { 192, 168, 50, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(80); //server port

String readString; 

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

void setup(){

  pinMode(5, OUTPUT); //pin selected to control
  pinMode(6, OUTPUT); //pin selected to control
  pinMode(7, OUTPUT); //pin selected to control
  pinMode(8, OUTPUT); //pin selected to control
  pinMode(2, OUTPUT); //pin selected to control
  //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 

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

          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<TITLE>Domotica Control Panel</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");

          client.println("<H1>Domotica Control Panel</H1>");
          
          // For simple testing, pin 5, 6, 7, and 8 are used in buttons
          // DIY buttons
          client.println("<p>WandContactDoos 1.</p>");
          client.println("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on2;'>");
          client.println("<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off3;'>");
          client.println("<input type=submit value='ALL OFF' style=width:100px;height:45px onClick=location.href='/?off3579;'>");
          client.println("<p>10Min &nbsp;&nbsp; 20Min &nbsp;&nbsp; 40Min &nbsp;&nbsp; 60Min</p>");
          client.println("<input type=submit value=OFF style=width:50px;height:45px onClick=location.href='/?off3;'>");
          client.println("<input type=submit value=OFF style=width:50px;height:45px onClick=location.href='/?off3;'>");
          client.println("<input type=submit value=OFF style=width:50px;height:45px onClick=location.href='/?off3;'>");
          client.println("<input type=submit value=OFF style=width:50px;height:45px onClick=location.href='/?off3;'>");  

          // mousedown buttons
          client.println("<p>WandContactDoos 2.</p>");
          client.println("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on4;'>");
          client.println("<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off5;'>");
          client.println("<input type=submit value='ALL OFF' style=width:100px;height:45px onClick=location.href='/?off3579;'>");
          client.println("<p>10Min &nbsp;&nbsp; 20Min &nbsp;&nbsp; 40Min &nbsp;&nbsp; 60Min</p>");
          client.println("<input type=submit value=OFF style=width:50px;height:45px onClick=location.href='/?off5;'>");
          client.println("<input type=submit value=OFF style=width:50px;height:45px onClick=location.href='/?off5;'>");
          client.println("<input type=submit value=OFF style=width:50px;height:45px onClick=location.href='/?off5;'>");
          client.println("<input type=submit value=OFF style=width:50px;height:45px onClick=location.href='/?off5;'>");
          
          // mousedown radio buttons
          client.println("<p>WandContactDoos 3.</p>");
          client.println("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on6;'>");
          client.println("<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off7;'>");
          client.println("<input type=submit value='ALL OFF' style=width:100px;height:45px onClick=location.href='/?off3579;'>");
          client.println("<input type=submit value=OFF style=width:50px;height:45px onClick=location.href='/?off7;'>");
          client.println("<input type=submit value=OFF style=width:50px;height:45px onClick=location.href='/?off7;'>"); 
   
          
          // custom buttons
          client.println("<p>WandContactDoos 4.</p>");
          client.println("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on8;'>");
          client.println("<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off9;'>");
          client.println("<input type=submit value='ALL OFF' style=width:100px;height:45px onClick=location.href='/?off3579;'>");

          client.println("</BODY>");
          client.println("</HTML>");
 
          delay(1);
          //stopping client
          client.stop();

          ///////////////////// control arduino pin
          if(readString.indexOf('2') >0)//checks for 2
          {
            digitalWrite(5, HIGH);    // set pin 5 high
            Serial.println("Led 5 On");
          }
          if(readString.indexOf('3') >0)//checks for 3
          {
            digitalWrite(5, LOW);    // set pin 5 low
            Serial.println("Led 5 Off");
          }
          
          if(readString.indexOf('4') >0)//checks for 4
          {
            digitalWrite(6, HIGH);    // set pin 6 high
            Serial.println("Led 6 On");
          }
          if(readString.indexOf('5') >0)//checks for 5
          {
            digitalWrite(6, LOW);    // set pin 6 low
            Serial.println("Led 6 Off");
          }
          
           if(readString.indexOf('6') >0)//checks for 6
          {
            digitalWrite(7, HIGH);    // set pin 7 high
            Serial.println("Led 7 On");
          }
          if(readString.indexOf('7') >0)//checks for 7
          {
            digitalWrite(7, LOW);    // set pin 7 low
            Serial.println("Led 7 Off");
          }     
          
            if(readString.indexOf('8') >0)//checks for 8
          {
            digitalWrite(8, HIGH);    // set pin 8 high
            Serial.println("Led 8 On");
          }
          if(readString.indexOf('9') >0)//checks for 9
          {
            digitalWrite(8, LOW);    // set pin 8 low
            Serial.println("Led 8 Off");
          }         
             
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}

This html page layout

But no they buttons dont work anymore without the 10-20-40-60 off buttons it worked but i didnt change anything then adding new button and also if i make the code bigger it give's me a download 0.o

Any help plz

also if i make the code bigger it give's me a download 0.o

Well, I don't know what a download O.o is, but you have a LOT of literal strings that could be wrapped in the F() macro.

          client.println("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on2;'>");

One of the functions of a browser is to lay out the page in a nice format. Unless you REALLY need to set the height and width of a button, don't.

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string 
          readString += c; 
          //Serial.print(c);
        }

So, you haven't a clue what kind of GET request is made when you select one of the buttons. That's not conductive to solving YOUR problem. Uncomment the Serial.print() statement and learn something.

Well, I don't know what a download O.o is, but you have a LOT of literal strings that could be wrapped in the F() macro.

New code:

 ///////////////////// control arduino pin
          Serial.println(F("if(readString.indexOf('2') >0)"));//checks for 2
          {
            digitalWrite(5, HIGH);    // set pin 5 high
            Serial.println("Led 5 On");
          }
          Serial.println(F("if(readString.indexOf('3') >0)"));//checks for 3
          {
            digitalWrite(5, LOW);    // set pin 5 low
            Serial.println("Led 5 Off");
          }
          
          Serial.println(F("if(readString.indexOf('4') >0)"));//checks for 4
          {
            digitalWrite(6, HIGH);    // set pin 6 high
            Serial.println("Led 6 On");
          }
          Serial.println(F("if(readString.indexOf('5') >0)"));//checks for 5
          {
            digitalWrite(6, LOW);    // set pin 6 low
            Serial.println("Led 6 Off");
          }
          
           Serial.println(F("if(readString.indexOf('6') >0)"));//checks for 6
          {
            digitalWrite(7, HIGH);    // set pin 7 high
            Serial.println("Led 7 On");
          }
          Serial.println(F("if(readString.indexOf('7') >0)"));//checks for 7
          {
            digitalWrite(7, LOW);    // set pin 7 low
            Serial.println("Led 7 Off");
          }     
          
          Serial.println(F("if(readString.indexOf('8') >0)"));//checks for 8
          {
            digitalWrite(8, HIGH);    // set pin 8 high
            Serial.println("Led 8 On");
          }
          Serial.println(F("if(readString.indexOf('9') >0)"));//checks for 9
          {
            digitalWrite(8, LOW);    // set pin 8 low
            Serial.println("Led 8 Off");
          }

Old Code:

 ///////////////////// control arduino pin
          if(readString.indexOf('2') >0)//checks for 2
          {
            digitalWrite(5, HIGH);    // set pin 5 high
            Serial.println("Led 5 On");
          }
          if(readString.indexOf('3') >0)//checks for 3
          {
            digitalWrite(5, LOW);    // set pin 5 low
            Serial.println("Led 5 Off");
          }
          
          if(readString.indexOf('4') >0)//checks for 4
          {
            digitalWrite(6, HIGH);    // set pin 6 high
            Serial.println("Led 6 On");
          }
          if(readString.indexOf('5') >0)//checks for 5
          {
            digitalWrite(6, LOW);    // set pin 6 low
            Serial.println("Led 6 Off");
          }
          
           if(readString.indexOf('6') >0)//checks for 6
          {
            digitalWrite(7, HIGH);    // set pin 7 high
            Serial.println("Led 7 On");
          }
          if(readString.indexOf('7') >0)//checks for 7
          {
            digitalWrite(7, LOW);    // set pin 7 low
            Serial.println("Led 7 Off");
          }     
          
            if(readString.indexOf('8') >0)//checks for 8
          {
            digitalWrite(8, HIGH);    // set pin 8 high
            Serial.println("Led 8 On");
          }
          if(readString.indexOf('9') >0)//checks for 9
          {
            digitalWrite(8, LOW);    // set pin 8 low
            Serial.println("Led 8 Off");
          }

Did you mean this changes :open_mouth: ? Also u know any good guide to transfrom a code to SD Card since i kind find any :S

One of the functions of a browser is to lay out the page in a nice format. Unless you REALLY need to set the height and width of a button, don't.

Oh right ty for the tip i removed all the Type functions of the buttons

So, you haven't a clue what kind of GET request is made when you select one of the buttons. That's not conductive to solving YOUR problem. Uncomment the Serial.print() statement and learn something.

I am realy new to programmeing. So mainly i just check on the web for arduino examples and modifyded them to what i need or want. So if u could explain or gif me a good tut since i dont realy find specific tut's to arduino html. For the SD Card i only find guides without how to insert the sd card and how to fromat them and mainly webservers but nothing realy related to what i want to great :S.

client.println("<input type=submit value='20MIN'  onClick=location.href='/?off5;'>");

I rename the buttons like this but is this the correct way ? But all i need now is a delay that only effect this button

Cheers pewebob

P.S. i hope u got some time to help me :slight_smile:

          Serial.println(F("if(readString.indexOf('2') >0)"));//checks for 2

What the F**k?