Fare un'animazione con una serie di fotografie
Fabrizio
avrei una domanda non facile sapendo che me ne intendo più di
fotografia che di javascript...
Ecco il problema:
Ho una webcam all'indirizzo http://www.imagea.org/live/ dove viene
visualizzato il file "imagea.jpg" che la webcam salva ogni minuto
sovrascrivendo sul vecchio file. E fin qui tutto OK
La webcam permette anche di salvare un file, in un'altra directory,
con un nome del tipo "history20070611s202635195.jpg"
Quello che vorrei fare e far girare uno script che prende le ultime 60
foto (ultima ora), e le faccia vedere una dopo l'altra per fare
un'animazione.
Per capirci dovrebbe fare come questo script: http://lacombe.dyndns.org/meteo/cam.html
Purtroppo questo script non funziona da me non essendo le foto
numerate progressivamente ma avendo un nome del tipo
"history20070611s202635195.jpg"
Se qualcuno può aiutarmi gliene sarei veramente molto grato.
E se volete vedere quello che so fare meglio (la fotografia) potete
andare qui: http://www.imagea.org/photos
Fabrizio
ZER0
> Buongiorno,
> avrei una domanda non facile sapendo che me ne intendo più di
> fotografia che di javascript...
[cut]
> La webcam permette anche di salvare un file, in un'altra directory,
> con un nome del tipo "history20070611s202635195.jpg"
E immagino che il formato sia così composto:
"history",anno,mese,giorno,"s",ora,minuti,secondi,millisecondi.
Questo è un problema, perché non hai modo di determinare il nome
dell'immagine a priori.
Per aggirare questo ostacolo dovresti usare un linguaggio server
side, tipo PHP, ASP, o CGI in generis comunque.
A questo punto puoi recuperare la lista delle immagini, e creare
un array da poi passare al client, che animerai con Javascript.
Ovviamente il tutto se la suddetta directory è sul tuo server, o
se ha il browsing abilitato.
> Se qualcuno può aiutarmi gliene sarei veramente molto grato.
> E se volete vedere quello che so fare meglio (la fotografia) potete
> andare qui: http://www.imagea.org/photos
Complimenti :)
--
~ "La storia sarà buona con me perché sarò io a scriverla."
(Winston Churchill)
Fabrizio
> E immagino che il formato sia così composto:
> "history",anno,mese,giorno,"s",ora,minuti,secondi,millisecondi.
Esatto.: (E.g. image20050101093020500.jpg) The underlined numbers mean
"9h30min20s500ms on January 1, 2005". The letter "s" is inserted after
the day when referring to a summer time zone.
Si potrebbe appunto usare la data di creazione dei file non prendendo
in conto il nome del file. Dirgli di prendere il piu recente e andare
indietro di 30 files (per avere una mezz'ora) e poi passare il tutto
al Javascript (che andrebbe modificato). Il problema ? Non so farlo.:
( Se qualcuno potrebbe farmi il php e dirmi come modificare il
javascript http://lacombe.dyndns.org/meteo/cam.html per far funzionare
il tutto gliene sarei veramente grato.
> Ovviamente il tutto se la suddetta directory è sul tuo server, o
> se ha il browsing abilitato.
La directory é sul mio server e posso modificare tutti i parametri di
accesso se necessario. Server Apache / PHP: 4.4.6
Grazie in anticipo :)
Fabrizio
ZER0
Ma porca paletta: ho appena notato a questa conversazione manca il mio
ultimo post, e che quel bastardo di un newsreader deve avermi perso.
Me ne dispiace perché era abbastanza ricco di particolari; e purtroppo
ora non ho il tempo di rifarlo esattamente com'era.
Ergo, se hai dei dubbi, fai un fischio.
> Si potrebbe appunto usare la data di creazione dei file non prendendo
> in conto il nome del file. Dirgli di prendere il piu recente e andare
> indietro di 30 files (per avere una mezz'ora) e poi passare il tutto
> al Javascript (che andrebbe modificato).
Qualcosa del genere. Se si facesse esattamente così, i frame sarebbero
in ordine inverso.
> ( Se qualcuno potrebbe farmi il php e dirmi come modificare il
> javascript http://lacombe.dyndns.org/meteo/cam.html per far funzionare
> il tutto gliene sarei veramente grato.
Dunque, è qualche anno che non programmo in PHP, ma il codice potrebbe
essere qualcosa tipo questo:
<?php
function get_last_files ($path, $count){
$files = array();
$result = array();
$fp = "";
if ($handle = opendir($path)) {
while (false !== ($file = readdir($handle))) {
$fp = "$path/$file";
if (is_file($fp))
$files[$fp] = filemtime($fp);
}
asort($files);
$files = array_slice($files,-$count);
foreach($files as $filename => $modified){
$result[] = $filename;
}
closedir($handle);
return $result;
}else{
return $result;
}
}
echo "<script type=\"text/javascript\">";
if ( count($arr = get_last_files("history",30)) > 0 )
echo "var photos = ['".implode($arr,"','")."'];";
else
echo "var photos = [];";
echo "</script>";
?>
In questo caso prendo le ultime 30 immagini della directory "history",
puoi facilmente cambiare i parametri della funzione.
Mentre il codice JS potrebbe essere:
<script type="text/javascript">
SimpleSlider = {
frames : [],
image : null,
counter : 0,
length : 0,
delay : 180
};
SimpleSlider.setImage = function(id){
this.image = document.getElementById(id);
if ( this.length > 0 )
this.image.src=this.frames[0].src;
}
SimpleSlider.start = function(){
setInterval(this.animate, this.delay );
}
SimpleSlider.animate = function(){
var ss = SimpleSlider, img = ss.image;
var i = ss.counter++%ss.length;
img.src = ss.frames[i].src;
}
SimpleSlider.loaded = function(){
var ss = SimpleSlider;
if ( ++ss.counter == ss.length ){
ss.counter = 1;
ss.start();
}
}
SimpleSlider.loadFromArray = function( arr ){
var ln = this.length = arr.length;
for (var i=0;i<ln;i++){
this.frames[i] = new Image();
this.frames[i].onload = this.loaded;
this.frames[i].src = arr[i];
}
}
window.onload = function(){
SimpleSlider.loadFromArray( photos );
SimpleSlider.setImage("my-displayer");
}
</script>
Uso il condizionale perché di solito non faccio questo genere di cose.
Il codice è da mettere dentro il tag <head>:
<head>
<title>..</title>
<?php
function ge_last_files ($path, $count){
/* etc */
?>
<script type="text/javascript>
SimpleSlider = {
/* etc */
</script>
</head>
etc..
Con l'istruzione:
SimpleSlider.setImage("my-displayer");
Imposti l'immagine che dovrà visualizzare i "frame". Si presuppone che
nel body, in quell'esempio, ci sia un tag di questo tipo:
<img id="my-displayer" src="placeholder.png" alt="video" />
> Grazie in anticipo :)
Di niente, ma purtroppo la carne al fuoco è tanta e se sei a "digiuno"
di JS e PHP, potrebbe essere un po' dura digerirla in una botta sola.
Spero che non ci siano grossi intoppi, comunque.
--
~ You don't have to be crazy to be a webmaster. But it helps.
Fabrizio
volevo ringraziarti INFINITAMENTE per avermi fatto tutto lo script per
la webcam. Ho fatto dei copia incolla (senza veramente sapere cosa
incollavo...) :) seguendo le tue indicazioni e tutto funziona a
meraviglia. A parte che se gli metto nel body il resize non funziona
più:
Se metto questo non funziona:
<BODY onload=resizeTo(1070,820);>
Se metto questo funziona:
<BODY>
Puoi vedere la tua opera qui: http://www.imagea.org/live
Se non ti rompe troppo potrei ancora chiederti una cosa:
Per far apparire l'ora dell'ultimo fotogramma sulla pagina uso uno
script che un'altra buon anima mi aveva fatto:
<?php
$image = 'foto.jpg' ;
$d= filemtime($image) ;
$df = date ("D d F Y - H:i:s", $d);
?>
<?php echo $df ?>
Ora sembra funzionare semplicemente perché ho detto alla webcam di
scrivere ogni minuto un file "foto.jpg". Sai se ci sarebbe modo di
fargli recuperare quest'informazione dall'ultimo dei 30 o 72 file che
prende per fare l'animazione ? Cosi eviterei alla webcam di far
scrivere il file "foto.jpg" ogni minuto in più degli altri due che
scrive ogni minuto in /mezzora e ogni 10 minuti in /giornata.
Ancora grazie :)
Fabrizio
ZER0
> Ciao Zero :)
> volevo ringraziarti INFINITAMENTE per avermi fatto tutto lo script per
> la webcam.
Ho un debole per l'arte visiva, ti dirò.
> Ho fatto dei copia incolla (senza veramente sapere cosa
> incollavo...) :)
Questa non è propriamente una buona cosa, ma se ho ben capito, non hai
aspirazioni di sviluppatore :)
> seguendo le tue indicazioni e tutto funziona a
> meraviglia. A parte che se gli metto nel body il resize non funziona
> più:
> Se metto questo non funziona:
> <BODY onload=resizeTo(1070,820);>
Un paio di premesse: primo, non sarebbe male iniziare a scrivere i tag
in minuscolo, e mettere i doppi apici nei valori degli attributi. Così
nel caso tu passi a XHTML, la migrazione sarà un filo più indolore:
<body onload="resizeTo(1070,820)">
Secondo, solitamente l'autoresize è una cosa da evitare: è decisamente
una delle cose più odiate dai navigatori. Tiene lontani gli utenti dal
sito.
Quindi ti chiedo, c'è una ragione particolare per cui vuoi metterlo?
Passando oltre: lo script non ti funziona più, perché stai ridefinendo
l'onload, e quindi ti vai a perdere questo:
window.onload = function(){
SimpleSlider.loadFromArray( photos );
SimpleSlider.setImage("my-displayer");
}
Senza il quale lo slider non viene impostato ed eseguito.
Se desideri aggiungere del codice da eseguire all'onload, non dovresti
inserirlo come attributo del tag body, ma aggiungerlo nello script.
Quindi, con una cosa del tipo:
<body onload="myfun()">
Dovresti scrivere solo:
<body>
e aggiungere "myfun()" all'onload da script:
window.onload = function(){
SimpleSlider.loadFromArray( photos );
SimpleSlider.setImage("my-displayer");
myfun();
}
> Per far apparire l'ora dell'ultimo fotogramma sulla pagina uso uno
> script che un'altra buon anima mi aveva fatto:
[cut]
> Ora sembra funzionare semplicemente perché ho detto alla webcam di
> scrivere ogni minuto un file "foto.jpg". Sai se ci sarebbe modo di
> fargli recuperare quest'informazione dall'ultimo dei 30 o 72 file che
> prende per fare l'animazione ?
Potresti modificare:
if ( count($arr = get_last_files("history",30)) > 0 )
echo "var photos = ['".implode($arr,"','")."'];";
else
echo "var photos = [];";
echo "</script>";
In:
echo "<script type=\"text/javascript\">";
if ( ( $n = count($arr = get_last_files("history",30)) ) > 0 ){
echo "var photos = ['".implode($arr,"','")."'];";
$df = date("D d F Y - H:i:s", filemtime($arr[$n-1]) );
}else{
echo "var photos = [];";
$df = "";
}
echo "</script>";
E nel punto della pagina in cui vuoi scrivere tale data:
<?php echo $df ?>
C'erano altre due strade percorribili: recuperare la data dal nome del
file, visto che ne fa parte; oppure farla restituire dalla funzione di
ordinamento, dato che già la recupera per ogni file.
Ho optato per la modifica meno "invasiva".
--
~ Chi segue gli altri, non arriva mai primo.
Fabrizio
>Questa non è propriamente una buona cosa, ma se ho ben capito, non hai
>aspirazioni di sviluppatore :)
Ho fatto 5 anni di latino e greco per non fare matematica allo
scientifico: la dice lunga sulle mie aspirazioni ad essere
sviluppatore :) Ma trovo fantastico tutto quello che si può fare.
Hai ragione e non sei il solo a dirmi che i resize rompono.
Personalmente detesto i siti che ti aprono la pagina a tutto schermo
ma io do giusto "un'aggiustatina" :) E' più per una ragione estetica.
Comunque ho aggiunto le due modifiche e funziona tutto alla
perfezione :)
Ancora grazie :)
Fabrizio