How to show image file date and time

[aduncan]

I have a webcam image on my page, updated every 10 seconds. Trying to show the image file date and time underneath it. I found a snippet of PHP code which should do the trick, but nothing happens.

<?php
$last_mod = filemtime("images/DCS-932L.jpg");
print("Last Edited on ");
print(date("m/j/y h:i", $last_mod));
?>

I suspect it needs some support files?

Andrew

[steve]

I can see two possible reasons: First, you've put the PHP code right at the end of the page, after the </body> and </html> closing tags. You need to move it up before the </body>.

That may still not work, however. To get PHP to be processed, the web server has to know to pass it to the PHP processor. It may only be configured to do that with files with a .php extension, and yours has a .htm extension. If it doesn't get processed, you can either modify your .htaccess file so that .htm files are passed to PHP, or you can rename your file with a .php extension (and you'll then need to change your links on all of your other pages).

I imagine that there is a javascript equivalent for what you're trying to do, which might be easier than trying to use a bit of PHP in an HTML setup.

[beteljuice]

As Steve says .. your .htm file is NOT being processed as PHP, if it was you wouldn't be able to see any php code in 'view source'

However; you also want to refresh the image every 10s (which you are doing by JavaScript).
PHP is a server-side 'one-shot' piece of code so it would only show the picture filestamp time / date when the page was loaded, NOT the image refresh filestamp.


There are a couple of (PHP) ways around this ....

One that springs to mind is to process the picture with php and include the date / timestamp within the picture itself.

... but usually it's easier to use software on your PC to overlay / manipulate the image before it's uploaded.

Have you looked in the webcam section ?

[sfws]

I imagine that there is a javascript equivalent for what you're trying to do, which might be easier than trying to use a bit of PHP in an HTML setup.

I'm no expert, but since browser is responsible for handling the fetching of a new updated image I was unable to find any way for JavaScript to get metadata for an image when I explored this early this year (at that time I briefly experimented with uploading photographs as well as weather observations). While you are using JavaScript to refresh the image, it can access CURRENT time:

Code: Select all

var now=new Date()
var now_time=now.getHours()&':'&now.getMinutes()

and then the script can insert that time into perhaps a HTML figcaption element associated with your webcam display. That avoids adding PHP processing if you do not need that for anything else.

As already suggested one alternative is manually adding the date to the image before it was uploaded. Some software of course time stamps images automatically - typically that used in wildlife or security monitoring contexts.

[aduncan]

Thanks all for the responses. Most of it is above my head, but I do know how to Google!! I found this bit of code-

<script type="text/javascript">
function LastModUsingHeader(sFile) {
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
X.open('GET', sFile, false);
try{ X.send();}
catch(y){}
var dtImage=new Date();
dtImage = X.getResponseHeader('Last-Modified');
return new Date(dtImage).toLocaleString();
}
document.getElementById('getImageDate').innerHTML=LastModUsingHeader('images/DCS-932L.jpg'); ;
Math.random();
setTimeout('(LastModUsingHeader(sFile))',10000); // refresh every 30 seconds
</script>

which works. Gets the file date and time. Now I just need to find out how to get it to update when the webcam image updates every 10 seconds.... the last 2 lines were copied from the code which updates the image every 10 seconds - didn't work!

Just wasted a whole evening trying to get the webcam (D-link DCS932L) to ftp the images to my Cumulus pc with no success. I think it will only ftp to an external address. Had enough for one night.

[beteljuice]

Code: Select all

getResponseHeader('Last-Modified')

Hadn't met that one before, must remember it !

Try:

Code: Select all

function refreshIt(){
  url='images/DCS-932L.jpg';
    try{
        var Oxml= new window.XMLHttpRequest();
        Oxml.open("HEAD", url, false);
        Oxml.send(null);
        if(Oxml.status== 200){
           var lastMod = new Date(Oxml.getResponseHeader('Last-Modified')).toLocaleString();
           document.getElementById('getImageDate').innerHTML=lastMod;
           document.images['webcam'].src =url + '?' +  Math.random();
        }
    }
    catch(e){}
    setTimeout('refreshIt()',10000); // refresh every 10 seconds
}

Untested, no guarantees - not as many safety checks as I would normally do !

[aduncan]

Untested, no guarantees - not as many safety checks as I would normally do !

That will do nicely, thank you very much. Think its time I visited the library for some books on HTML and Javascript.

[beteljuice]

For completeness dear readers, the html would be something like:

Code: Select all

<body onload="setTimeout('refreshIt()',10000)">


<div align="center">
        <img id="webcam" src="images/DCS-932L.jpg" alt="webcam" />
	<p><span id="getImageDate">Photo Timestamp</span></p>
</div>

[sfws]

That will do nicely, thank you very much.

Pleased it is working

Think its time I visited the library for some books on ... Javascript.

I found it difficult to get anything on JavaScript from my local library, and initially tried to learn from guides on the web. In the end I bought

ISBN 978-1-84078-362-9 (Javascript in easy steps - 4th edition) - selective in what script instructions it covers, but written in a very informative and easy to follow style backed up with examples that can be downloaded from web.

ISBN 978-1-449-39902-3 (JavaScript & jQuery the missing manual - 2nd edition) - much more comprehensive, and pricey; but it is written in a surprisingly clear manner, has errata and examples available online and I found was needed to understand scripts written by others (or quoted in these fora) and to write more advanced stuff of your own (I even included some jQuery instructions in a script I worked on).

Think its time I visited the library for some books on HTML

I did find HTML books in my library, but I ended up buying several from WHS. The first complication is that there are different versions of HTML (and XHTML), so if you are looking to edit something someone else has produced, you need to decide what version suits you to decide which book is needed. I prefer HTML5 as this offers a bit of flexibility in some syntax, useful for beginners, and yet forbids a lot of techniques used in the past that are not considered best practice now. Also since all browsers now support it, it is the most future safe option and provides good in built support for audio, video and other embedded files likely to make it work on smart phones, tablets and all types of computer regardless of hardware make or browser.

[aduncan]

For completeness dear readers, the html would be something like:

This reader is delighted! Not only does it work, but it is now synchronised to the change of image (But you knew that, didn't you ).

Thank you, my website is now working to my total satisfaction, and I can sleep happy.

[aduncan]

Think its time I visited the library for some books on ... Javascript.

found it difficult to get anything on JavaScript from my local library, and initially tried to learn from guides on the web. In the end I bought

ISBN 978-1-84078-362-9 (Javascript in easy steps - 4th edition) - selective in what script instructions it covers, but written in a very informative and easy to follow style backed up with examples that can be downloaded from web.

ISBN 978-1-449-39902-3 (JavaScript & jQuery the missing manual - 2nd edition) - much more comprehensive, and pricey; but it is written in a surprisingly clear manner, has errata and examples available online and I found was needed to understand scripts written by others (or quoted in these fora) and to write more advanced stuff of your own (I even included some jQuery instructions in a script I worked on).

Think its time I visited the library for some books on HTML

I did find HTML books in my library, but I ended up buying several from WHS. The first complication is that there are different versions of HTML (and XHTML), so if you are looking to edit something someone else has produced, you need to decide what version suits you to decide which book is needed. I prefer HTML5 as this offers a bit of flexibility in some syntax, useful for beginners, and yet forbids a lot of techniques used in the past that are not considered best practice now. Also since all browsers now support it, it is the most future safe option and provides good in built support for audio, video and other embedded files likely to make it work on smart phones, tablets and all types of computer regardless of hardware make or browser.

Some HTML books are written for a particular browser, others (perhaps more useful) highlight any differences in HTML implementation between browsers. They also vary in their coverage of HTML elements, so you may want to think whether you want to learn just simple HTML, learn about say all the ways to define a table, or learn about forms, multimedia or other specialised topics.

Maybe you could next experiment with redesigning your 'monthly records' page - it is designed for multiple years of observations, but you have just a few months. In the short-term, you might want to hide the buttons for the 'null' months, and make it clearer that the available months are just 2012. <#metdate format="mmmm yyyy"> could be included in 'monthlyrecordT.htm' to indicate latest available month.

After that, you may wake up one day with an idea to modify the look or content in a more substantial way - Steve has provide a lot of Cumulus web tags not used on the standard pages, and a standard page can be freed up for such additional information by combining 2 of the provided ones or you can ask Cumulus to process additional pages.

Thanks for the very helpfull reply. I've just had time to do some research on Amazon.
" JavaScript & jQuery the missing manual " had very positive feedback, but one chap who seemed to know what he was talking about said that it needed a good understanding of HTML beforehand.

Being now of the age where the Government pay me every week, I can't go buying a lot of expensive books, so initially it will be the library. A friend of mine's son is a Javascript programmer, I'll see if he's got anything usefull.

[sfws]

(deleted)

[aduncan]

Went to WHS this morning, and lo and behold, they had " JavaScript & jQuery the missing manual ". Priced at £30.99 !!

So I left there and went to the library. They didnt have either of the books you mentioned, but I got a book on HTML and XHTML. That should be a good starting point. I also got a couple of books on Javascript, which I'll tackle next. I expect that should keep me quiet for a day or two...

[kanulondon]

Thanks all for the responses. Most of it is above my head, but I do know how to Google!! I found this bit of code-

<script type="text/javascript">
function LastModUsingHeader(sFile) {
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
X.open('GET', sFile, false);
try{ X.send();}
catch(y){}
var dtImage=new Date();
dtImage = X.getResponseHeader('Last-Modified');
return new Date(dtImage).toLocaleString();
}
document.getElementById('getImageDate').innerHTML=LastModUsingHeader('images/DCS-932L.jpg'); ;
Math.random();
setTimeout('(LastModUsingHeader(sFile))',10000); // refresh every 30 seconds
</script>

which works. Gets the file date and time. Now I just need to find out how to get it to update when the webcam image updates every 10 seconds.... the last 2 lines were copied from the code which updates the image every 10 seconds - didn't work!

Just wasted a whole evening trying to get the webcam (D-link DCS932L) to ftp the images to my Cumulus pc with no success. I think it will only ftp to an external address. Had enough for one night.

Hi Duncan

I managed to get my DCS930L sending images to my PC via FTP. I just had to setup FTP properly on my Cumulus PC. Loads of guides on google how to do this.

Once done, I just gave it my ip address and a suitable username and password and it worked. I also needed to poke a hole in the windows firewall.

As you know I am not using this solution anymore, but it did work

[aduncan]

"I managed to get my DCS930L sending images to my PC via FTP. I just had to setup FTP properly on my Cumulus PC. Loads of guides on google how to do this."

Had another go at this and got the camera to ftp to my Cumulus pc. I'm now using Fwink to add the date and time to the webcam image, and ftp it to the webpage. Amazing what Google can find!