how to use AJAX to display file timestamp?

[canadave]

Hi there...I'm not much of a programmer, but I'm hoping someone will take pity on this newbie :)

I have a webcam that uploads an image to my non-profit's website via FTP every 15 seconds. The filename is webcam.jpg.

I have a javascript that automatically reloads the image (NOT the entire page) every 15 seconds as well. The script is as follows (I can't compose javascript, I'm not much of a programmer, so I borrowed this from someone's tutorial website on the subject):

<script type="text/javascript">
function reloadImage() {
var now = new Date();
if (document.images) {
document.images.myobject.src = 'images/webcam.jpg?' + now.getTime();
}
setTimeout('reloadImage()',15000);

}

setTimeout('reloadImage()',15000);

</script>

The script works great--the webcam image refreshes every 15 seconds without refreshing the entire page.

What I'm trying to do is add javascript that will also display the timestamp of the webcam.jpg file when the image is refreshed (so that people know what time/date the image they're looking at was taken).

I'm guessing this involves some sort of AJAX request, but I haven't the foggiest idea how to make it happen. Would anyone be able to help me with this? I sure would appreciate it very much.

[fxm]

var now = new Date();

display the timestamp

This

document.getElementById('show').appendChild(document.createTextNode(now))

is all you need to display the timestamp in this <div id='show'></div> Beyond that, everything [the format, the style, the placement, etc., etc.] is negotiable.

[canadave]

Thanks very much. Can you tell me where that div and code snippet should go? I just tried putting it inside the existing <script> tags with the rest of the Javascript, but that didn't work; I also tried putting it at the end of the page, and that didn't work either. Is there something else that needs to go with it? It should just be...

<div id="show">
document.getElementById('show').appendChild(document.createTextNode(now))
</div>

...right?

[canadave]

OK, this is what I have now, with your suggested code inserted:

<div id="show">
<script type="text/javascript">
function reloadImage() {
var now = new Date();
if (document.images) {
document.images.myobject.src = 'images/webcam.jpg?' + now.getTime();

document.getElementById('show').appendChild(document.createTextNode(now));

}
setTimeout('reloadImage()',15000);

}

setTimeout('reloadImage()',15000);

</script>

</div>

However, it still shows nothing. I'm sure I just have things in the wrong place? I've tried moving your code snippet around, but it doesn't seem to do anything no matter where I put it.

[fxm]

The snippet goes in the existing javascript section, on a line by itself between lines 5&6 of your posted code.
The empty <div id='show'></div> goes in the body of your page where you want the text to appear. Getting the placement right on your own will take some very basic HTML knowledge. Perfecting the style and format will involve a lot more assistance.

[canadave]

You're right, that worked! :) I got the timestamp to appear no problem once you pointed out the correct placement. Interestingly, the timestamp doesn't appear when the page first loads; it only appears after the first time the image refreshes. I wonder if there's a way to get the time to appear on first page load, and then have it refresh?

As for the style and formatting....yes, I see what you mean :) I can CSS style it no problem (I'm great with CSS)...the formatting of the date in terms of how to pick and choose the elements of the full timestamp that I want to display, that's the bit that will take some doing. I'm not sure where I'd go to mess around with that.

But this is a LOT further along than I ever thought I'd be....thank you so much!!

[canadave]

Hmmmm....spoke too soon!....LOL

This is what I have now:

<script type="text/javascript">
function reloadImage() {
var now = new Date();
if (document.images) {

document.getElementById('show').appendChild(document.createTextNode(now))

document.images.myobject.src = 'images/webcam.jpg?' + now.getTime();

}

setTimeout('reloadImage()',15000);

}

setTimeout('reloadImage()',15000);

</script>

<div id="show"></div>

When I first load the page, no timestamp shows under the image. Fifteen seconds later, when the image refreshes for the first time, the timestamp appears (yay!). Then another 15 seconds later, another timestamp appears after the first one. And another one 15 seconds after that. And another, and another, and another....lol

So it looks like this:
Wed May 12 2010 10:12:17 GMT-0300 (ADT)Wed May 12 2010 10:12:32 GMT-0300 (ADT)Wed May 12 2010 10:12:47 GMT-0300 (ADT)Wed May 12 2010 10:13:02 GMT-0300 (ADT)Wed May 12 2010 10:13:17 GMT-0300 (ADT)Wed May 12 2010 10:13:32 GMT-0300 (ADT)Wed May 12 2010 10:13:47 GMT-0300 (ADT)Wed May 12 2010 10:14:02 GMT-0300 (ADT)Wed May 12 2010 10:14:17 GMT-0300 (ADT)Wed May 12 2010 10:14:32 GMT-0300 (ADT)

LOL!

[fxm]

LOL is right.
After the first you need replace the existing timestamp (instead of adding a new one).
I'll get back to you on that.
As to the onload issue: is the <script> block in the <head> section?

BTW: you do realize that the timestamp is the present time, not the time the image was captured?

[canadave]

About the timestamp: oh....right. I guess that's not going to work then :( Because, if the webcam dies for whatever reason, the timestamp will keep updating every 15 seconds, won't it....drat!

The script block is actually inside the page, as it's a Joomla webpage. If it needs to be in the head section, I can "make it so"...however, given the timestamp issue you just pointed out, perhaps it's a moot point....?

[fxm]

replace the existing timestamp

This

<script type="text/javascript">

    function reloadImage() {
        var now = new Date();
        if (document.images) {
            document.images.myobject.src = 'images/webcam.jpg?' + now.getTime();
            document.getElementById('show').innerHTML = now
        }

        setTimeout('reloadImage()', 15000);

    }

    setTimeout('reloadImage()', 0);

</script>
  </body>

deals with the onload and replace issues.

The block should be just before the </body> tag, as shown.

I'll get back to you on the timestamp question.

[canadave]

Hey...yes, that worked! It now shows the timestamp on initial page load, and after 15 seconds it replaces it (not append it....lol)!

Thank you so much....now, if you somehow can come up with a way to show the timestamp of the existing webcam.jpg file, rather than the general server timestamp, I will personally email you a beer :)

[fxm]

timestamp will keep updating every 15 seconds

Most webcams (or webcam software) can be configured to imprint a timestamp in the captured image. That would be preferable to anything I can do (which at best will be to get the time the server says that the jpg file was created, not the time the image was captured).

[fxm]

I will personally email you a beer

I would settle for a link to the page. Now I'm curious as to what I've been working on :)

[canadave]

I know....this one can't, unfortunately :( We're a small non-profit, and a cheapo IP cam was the best we could do.

A timestamp showing the time the jpg was created would be just fine. Any lag from the time the image was taken, to the time a file is created on the server, is negligible....it'd just be good not to have the general "current time" show, in case the webcam goes down. Wouldn't want people to think they're looking at a current image :)

[canadave]

I will personally email you a beer

I would settle for a link to the page. Now I'm curious as to what I've been working on :)

My apologies...I should've given you the link much earlier. It's here:

http://liverpooltennisclub.ca/courtcam

Right now it's showing my living room wall, as I'm "stress-testing" it to make sure it doesn't quit abruptly....BEFORE we install it on the roof of our little town tennis club :)

[fxm]

A timestamp showing the time the jpg was created would be just fine.

Here you go...

<html>
<head>
</head>
<body>
<div id="show">Timestamp Here</div>
<script type="text/javascript">

    function handleResponse(req) {
        if( req.readyState == 4 ) {
         document.getElementById('show').innerHTML = req.getResponseHeader("Last-Modified")
        }
    }

    function createRequestObject() {
        if(window.XMLHttpRequest) {
            req = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
            req = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return req;
    }

    function makeRequest()
    {
      var req = createRequestObject();
    	if (req) {
		req.onreadystatechange = function() { handleResponse( req ); };

		req.open("HEAD", "images/webcam.jpg",true);
		req.send(null)
	}
    }

    function reloadImage() {
        var now = new Date();
        if (document.images) {
            document.images.myobject.src = 'images/webcam.jpg?' + now.getTime();
            makeRequest()
        }

        setTimeout('reloadImage()', 15000);

    }

    setTimeout('reloadImage()', 0);

</script>

</body>
</html>

Note: I have left out a lot of error-checking that I would normally include.

[canadave]

Eureka! :)

That is simply brilliant. I cannot thank you enough!

Would you like your name/business displayed below the webcam image? As in, "This webcam brought to you by:"? It's the very least I could do....

[fxm]

Just apply the up-arrow and look around for the "solved" button :)
Now, about that beer...
I'm on Cape Cod.

[canadave]

Cape Cod's a beautiful area! I'll fire one down the coast here from the South Shore of Nova Scotia ;)

One last question (I promise!). The date now shows the time in GMT, not my local time zone. You don't have to tell me how to fix it....can you just tell me WHERE I would go to mess around with it? Like, is that coming from the "var date" statement? Is that a function of the AJAX statement? All I needs to know is where to go to play with it, and I'll be set :) I can google "how to change the time zone in ______" just as well as the next man....

[fxm]

The date now shows the time in GMT, not my local time zone.

The server supplies 'Date-Modified' formatted exactly as you are now seeing it.

If the assignment [line 10, above] is changed to

document.getElementById('show').innerHTML = new Date(req.getResponseHeader("Last-Modified"))

visitors will see that time converted to their respective timezones and displayed in a format that depends somewhat on both their browsers and their OSes. Further conversion (to a format they [at least in principle could have] specified on their systems) is possible but I don't think it is worth the effort. Google "javascript toLocaleString()" for some of the gory details.

[canadave]

I agree--from the sound of it, it's not worth the effort.

Thank you so much for all your help...I'm quite happy with how it looks now. If you're ever up in Nova Scotia, feel free to drop by the club, we'll happily give you a guest pass ;)

[fxm]

Thanks.

But I must say that when I checked the site earlier, the timestamp was more interesting than the view :)

[canadave]

Thanks.

But I must say that when I checked the site earlier, the timestamp was more interesting than the view :)

hahaha....yeah, my living room (actually garage basement) is pretty boring to begin with, and with the lights all out completely it's even more boring ;) Check back in a week or so when I have it installed on our clubhouse roof, hopefully the picture will be more compelling :)

[fxm]

PS: if you still feel the need to do an extra-credit project, you could add a feature to display a message when the image isn't being updated.

[canadave]

PS: if you still feel the need to do an extra-credit project, you could add a feature to display a message when the image isn't being updated.

LOL....okay, you're killing me here! :) I actually had been doing some research into that possibility yesterday....but I couldn't for the life of me figure out how to do it....is it something that would be relatively straightforward?

[fxm]

It's easy to do it badly.

Doing it with a little care (to avoid false triggers caused by timing issues) could be done like this:

use an array
push a copy of each timestamp onto the array (dropping the oldest when the count reaches, say, 5)
whenever the saved items are all identical, substitute a status message for the timestamp most recently received

This way, updating would have to stop for at least 4 cycles before the error is signaled.

[fxm]

You could get the same result without the array, using just one saved value and a counter with a suitable trigger limit, but the array makes it possible to see whether there is a pattern of skips.