certo che si può fare Gigi :-) ne ho approfittato giacchè per inserirlo anche sulla mia pagina
Allora, per semplicità prendo pari pari il codice originario che ti ho postato (eventualmente modifica i parametri come avrai fatto successivamente) ed in rosso ho evidenziato le parti che vanno aggiunte:
Codice:
<?php
date_default_timezone_set('Europe/Rome');
// Funzione che ricava immagine più recente al caricamento pagina
function getwebcamimage($folder) {
if (is_dir($folder)) {
$images=array();
if ($handle=opendir($folder)) {
while (($file=readdir($handle)) !== false) {
if(($file!=".")&&($file!="..")) {
$images[]=$file;
}
}
rsort($images);
$img=array_shift($images);
closedir($handle);
return $img;
}
}
}
/* Indicare il percorso cartella snap rispetto al file corrente - DA MODIFICARE */
$folder="foscam/FI9900P_XXXXXXXXXXXX/snap";
$imgnm=getwebcamimage($folder);
?>
<style>
.agg { text-align:center; }
#count {
border-radius:50%;
font-size:18px;
font-weight:bold;
font-style:italic;
color:#fff;
padding:0 7px;
box-shadow:1px 1px 1px grey;
}
</style>
<div id="agg">Aggiornamento: <span id="count"></span></div>
<img id="image" src="<?php echo $folder."/".$imgnm;?>">
<script type="text/javascript">
/* Funzione che ottiene un array di valori data dal timestamp (in millisecondi) della nuova immagine */
function getnewparamdate(tsimg) {
var newdate=new Date(tsimg);
var newyear=newdate.getFullYear(); var newmonth=("0"+(newdate.getMonth()+1)).slice(-2);
var newday=("0"+newdate.getDate()).slice(-2); var newhour=("0"+newdate.getHours()).slice(-2);
var newmin=("0"+newdate.getMinutes()).slice(-2); var newsec=("0"+newdate.getSeconds()).slice(-2);
var newpardate=new Array(newyear,newmonth,newday,newhour,newmin,newsec);
return newpardate;
}
/* Funzione che aggiorna l'immagine (se trovata) */
function getnewimage(img,folder,newstr) {
var newimage=new Image();
newimage.src=folder+"/"+newstr;
newimage.onload=function() {
if (newimage.complete) img.src=newimage.src;
};
}
/* Funzione contatore */
function getcounter(step,count) {
var freq=step/1000;
var sec=freq;
count.innerHTML="Agg.";
count.style.backgroundColor="green";
setInterval(function() {
(sec===0)?(sec=freq-1):(sec--);
if (sec==0) {
count.innerHTML="Agg.";
count.style.backgroundColor="green";
}
else {
count.innerHTML="-"+sec+"''";
count.style.backgroundColor="red";
}
}, 1000);
}
/* Funzione che ottiene un array di valori data della prima immagine passata dal php */
function getparamdate() {
var imgnm="<?php echo $imgnm;?>";
var strtime=imgnm.slice(9,-4);
var year=strtime.substr(0,4); var month=strtime.substr(4,2)-1; var day=strtime.substr(6,2);
var hour=strtime.substr(-6,2); var min=strtime.substr(-4,2); var sec=strtime.substr(-2,2);
var pardate=new Array(year,month,day,hour,min,sec);
return pardate;
}
var image=document.getElementById("image");
var folder="<?php echo $folder;?>";
var pardate=getparamdate();
var date=new Date(pardate[0],pardate[1],pardate[2],pardate[3],pardate[4],pardate[5]);
var tsimg=date.getTime();
/* Funzione che aggiorna l'immagine con il nuovo nome del file */
function refreshwebimage(step) {
tsimg+=step;
var newpardate=getnewparamdate(tsimg);
var newstr="Schedule_"+newpardate[0]+newpardate[1]+newpardate[2]+"-"+newpardate[3]+
newpardate[4]+newpardate[5]+".jpg";
getnewimage(image,folder,newstr);
}
/* Intervallo di aggiornamento in espresso in millisecondi (esempio 10 sec) - MODIFICARE SE DESIDERATO */
var stepms=10000;
var count=document.getElementById("count");
getcounter(stepms,count);
var interv=setInterval( function() {
refreshwebimage(stepms);
getcounter(stepms,count);
}, stepms);
/* Durata dell'animazione in millisecondi (esempio 5 minuti), dopodichè si bloccherà - MODIFICARE SE DESIDERATO
Se non voluto commentare le seguenti e ultime 2 righe */
var duration=300000;
setTimeout(function() { clearInterval(interv); }, duration);
</script>
ho aggiunto la funzione getcounter che genera il contatore ad ogni refresh di immagine, appena aggiorna compare il testo Agg. altrimenti il conto alla rovescia.
In più ho aggiunto un piccolo tocco di stile con l'ombreggiatura esterna al contatore e lo sfondo che risulta verde appena aggiorna e rosso con il contatore alla rovescia.. ovviamente puoi cambiarlo a piacimento (puoi vedere l'esempio sulla mia pagina webcam).
Segnalibri