6

I have the script needed to generate a countdown timer that has a start and resume button. What I'm attempting to do is to have Start, stop, and reset buttons on one page that controls the timer on the other page. So if user X visits page.html they will see a timer that is at 0. Admin X visits admin.html where they see the timer at 0 but they also have a start, stop, and reset buttons. When the Admin clicks a button, the timer on page.html starts to countdown. If another user visits the page while the timer is counting down, they will see where the timer currently is at. If anyone has any code ideas, other answers on this site I can reference, or the code that I would need, I would be very thankful.

---The real scenario We have people on skype that are doing a show and they need to know when it's time to take a break. The idea is that the producer can hit a button that starts a countdown timer to let them know they have 60 seconds till a break. The reason I want this on a web page is because there are other things going on in the page that the person on skype is paying attention to. So I wanted something that they can't miss. I have access to an sql server, and can do both php and javascript. I'm guessing I will need to do some kind of combination of the two.

UPDATE Thanks everyone for your help.

I'm updating this because I've realized that I'm probably making things more complicated than they need to be at this point. There is a break every 30 min and all shows will either start at the top of an hour or at 30min past. I finally figured out the perfect script. Although it may be slightly off because of normal clock drift, it should actually display the same no matter who enters the page. 

<script>
 function addZero(i)
{
if (i<10)
  {
   i="0" + i;
  }
 return i;
 }
 setInterval(function() {
   function addZero(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
    var d = new Date();
    var s =(d.getSeconds());
    var m =(d.getMinutes());
    var x = document.getElementById("timer");
    var c = addZero(30 - m) + ":" + addZero(60 - s);
    var d = addZero(60 - m) + ":" + addZero(60 - s);
    if (m < 30) {
        t = c
    }
    else {
        t = d
    }

     x.innerHTML = t;
 }, 250) 
    </script>    
 <div align="center">
    <table><tbody>
    <tr><td style="font-size:34px;" id="timer"></td>
    <td nowrap="nowrap" width="15px"><p style="text-align: left;"></p></td>
    <td style="font-size:24px;">Minutes till Station Break.</td></tr>
     </tbody></table>
          </div>
myth024
  • 196
  • 1
  • 2
  • 12
  • You should add your solution as an answer to your own question and accept it instead of adding it to the question description. This way it "closes" out the question, showing others that it's been resolved, and allows others to up-vote your answer. – Brandon Boone Sep 20 '12 at 12:41
  • I didn't know that. I'll take care of that right away. – myth024 Sep 21 '12 at 03:17

4 Answers4

3

Sounds like you'll need a COMET/Push solution that will allow you to monitor the active clients and push new data to them. I'm not sure that PHP is the best solution for this as there are other programming languages that handle this more elegantly.

See: Using comet with PHP?

Others may disagree, but Node.js is an excellent up and coming solution to this particular type of problem. Combine Node.js with Socket.io and you have the basic tools to implement exactly what you're describing.

In a nutshell, a client application will send an AJAX request to a server. The server will then hold the request until it has something to return (in your case - timer started, timer ticked, timer paused, etc.). As soon as data is returned, another request will be made and held by the server thus repeating the process. If your server & client support WebSockets, then held AJAX connections can be avoided in favor of a WebSocket (TCP over HTTP) connection.

Because not everyone is using the latest version of Chrome/Firefox, you'll probably have to support multiple push methods to be cross browser compatible. Socket.io abstracts the communication layer (Comet - long polling, WebSockets, Adobe Flash Socket, Ajax multipart streaming, Forever Iframe, JSONP Polling) and chooses the best technology based on client's browser capabilities.

Alternative

You could also use a javascript interval to periodically poll the server (via AJAX) to see if the timer has been set. However, you may swamp your server with requests since each client will be constantly polling the server to determine if the 60 second timer has started.

Community
  • 1
  • 1
Brandon Boone
  • 16,281
  • 4
  • 73
  • 100
  • Hmm... that does look like something I'm going to dig into. While I'm waiting I popped a php timer script into an iframe with a refresh. It sorta works lol. Thanks for your suggestion. I'm going to take a look into this. It might be exactly what I need. – myth024 Sep 19 '12 at 01:44
2

I have finally come up with a solution that works. There are still elements I haven't quite figured out how to fix, but the following code essentially does exactly what I need for now. 

setInterval(function() {
function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
var x = document.getElementById("timer");
var d = new Date();
var s = (d.getSeconds());
var m = (d.getMinutes());
var a = addZero(30 - m);
var b = addZero(60 - m);
var c = (60 - s);
var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>";
var v = "<span style='color:black;font-size:24px;'>" + "Break" + "</span>";

if (m > 30) {
    y = b;
}
else if (m < 30) {
    y = a;
}
if (y < 2 && c < 15) {
    q = z;
}
else {
    q = v;
}

var t = y + (":" + addZero(c) + " Till Station " + (q));
x.innerHTML = t;
}, 250);



<div align="center" id="timer" style='color:black;font-size:24px;' ></div>
myth024
  • 196
  • 1
  • 2
  • 12
  • In the end I finally got a script to work and do exactly what I wanted. It just wasn't my first answer to my own question lol. – myth024 Sep 24 '12 at 01:55
0

When admin start timer, server save start_time and duration of timer (60 seconds) (in db, file or something else). When user visit page.html, start_time and duration receives from server, calculates finish_time (or finish_time calculates at saving). Then finish_time - current_time is a difference, which is current state of timer.

$start_time = strtotime( '2012-09-19 00:30:05' );
$duration   = 300; //300 seconds = 5 minutes (60 * 5)

$finish_time = $start_time + $duration;

$timer_state = $finish_time - time();

$timer_state passed to javascript and countdown to zero.

doktorgradus
  • 627
  • 1
  • 5
  • 13
  • What if the client is already on page.html and the admin starts the timer? – Brandon Boone Sep 19 '12 at 00:37
  • Yes, it is defect of this method. But if demanded simple solution without requesting server for new state of timer, it quite enough. – doktorgradus Sep 19 '12 at 00:50
  • Yea, as I began to look into this I began to see what a real pain in the butt it was going to be. Thank everyone for their help. I decided I was going to try and use javascript to get UTCMinuets and just go with system time. So I'm going to try and get the current system time, figure out how long till the next 30 min mark, start a countdown from that point, updated from local time. setInterval(function() { var d = new Date; var s = (60 - d.getUTCMinutes()) + ":" + (60 - d.getUTCSeconds()); $("#time").text(s); }, 250); – myth024 Sep 19 '12 at 02:56
0

And here is the final solution that I'm now using.... The following is in a file called timer.js

setInterval(function() {
function addZero(i) {
    if (i < 10) {
        i = "0" + i;

    }
    return i;
}
var d = new Date();
var s = (d.getSeconds());
var m = (d.getMinutes());
var x = document.getElementById("timer")
var a = (29 - m);
var b = (59 - m);
var f = (60 - s);
 if (m < 30) {
    e = addZero(a);
}
else {
    e = addZero(b);
}
var c = " Minutes Till Station ";
var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>";
var v = "<span style='color:white;font-size:24px;'>" + "Break" + "</span>";

if (e < 1 && f < 30) {
    t = (e) + ":" + addZero(f) + (c) + (z);
}

else {
    t = (e) + ":" + addZero(f) + (c) + (v);
}


x.innerHTML = (t);
  }, 250);

Then I used this on the page to display the end result.

<script language="javascript" src="timer.js"></script>
<div id="timer" style='margin-top:150;float:center;color:white;font-size:24px;'></div>
myth024
  • 196
  • 1
  • 2
  • 12