Refrech d'image automatique

Version imprimable

06/04/2007, 17h08
HwRZxLc4

Refresh d'image automatique

Bonjour,

J'aimerais savoir comment je pourrais faire pour rafraichir une page on il y à 4 photos, avoir un refresh toute les secondes.

Ps j'y connais rien en javascript.....
06/04/2007, 17h17
BackInBiz

Euh ca depend :)

Est-ce que juste rafraichir la page suffit ou faut il raffraichir la page et changer les photos par quelconque moyen ?
06/04/2007, 17h45
HwRZxLc4

non juste rafraichir, les images c'est php qui le fais.
06/04/2007, 20h45
BackInBiz

Code:

<meta http-equiv="Refresh" content="3;url=<?php echo $_SERVER['PHP_SELF']; ?>">

Le chiffre etant le nombre de seconde et tu met ca dans HEAD !
06/04/2007, 21h17
HwRZxLc4

non, cette technique la je l'utilise déjà, et voir le navigateur clignoté toutes les secondes sa le fais pas trop, je cherche plutôt un refresh du contenu
06/04/2007, 23h56
BackInBiz

Je me mefie avec le fait que les images soient gardées dans le cache !

Bah tu peux faire un settimeout qui fait un innerHTML qui change le code des 4 images ...

Essaye de faire une ebauche et si tu n'y arrive pas j'y mettrait ma patte :)
07/04/2007, 15h56
Djakisback

Salut,
si tu changes le nom des images il devrait pas y avoir de problème avec le cache.
07/04/2007, 16h08
BackInBiz

Citation:

Envoyé par Djakisback

Salut,
si tu changes le nom des images il devrait pas y avoir de problème avec le cache.

Apparement les images sont gererer a partir d'un fichier PHP donc ne change pas de nom :)

Faut voir la gueule de son script !

Une URL est la bienvenue
07/04/2007, 17h48
SpaceFrog

mets un time stamp sur le src de tes images ...

Code:

src="monimage.jpg?"+newdate

et si besoin est couple ça avec un setInterval...

N'oublies pas non plus que php est interprété coté serveur et javascript coté client ...

Bon, j'arrive a rien...

Donc j'ai mes images géneré automatiquement dans un dossier par le soft motion, et je veux afficher la dernière image à chaque seconde

voici se que j'ai

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
$dir1 = 'cam1';
$dernier1='';
$date1 = 0;
 
if (is_dir($dir1)) {
if ($dh1 = opendir($dir1)) {
while (($file1 = readdir($dh1)) !== false) {
if(($file1 != "." && $file1 != "..") && ($cree1 = filemtime($dir1.'/'.$file1))>$date1)
{
$date1 = $cree1;
$dernier1 = $file1;
}
}
closedir($dh1);
}
}
 
echo '
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
  <title></title>
  <meta name="GENERATOR" content="Quanta Plus">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta http-equiv="refresh" content="1; URL=cam1.php">
</head>
<body>
<a href="index.php">Retour</a>
      <IMG src="'.$dir1.'/'.$dernier1.'" align="left" border="0" width="640" height="480">
</body>
</html>';
 
?>

donc sa fonctionne mais le navigateur clignote et donc j'aimerais que se soie selement l'image et pas la page complète...

Merci d'avance

11/04/2007, 08h59
SpaceFrog

trop de php dasn le code !
mets nous juste le html / js généré ...

l'idée est juste de mofidier le src de l'image dans un setInterval en ajoutant un timestamp ...
11/04/2007, 09h16
HwRZxLc4

Ben j'ai rien d'autre comme sa, c'est toutes la page...

donc je voie pas quoi t'ajouter d'autre, et le html est aussi présent

Voici un exemple en html / js
Code:

1 2 3 4 5 6 7 8 9 10 11 <script type='text/javascript'> function trutimePic(Pic){ var updatingPic=setInterval(function(){this.src="monimage.jpg?"+ new Date();},1000) } </script> </head> <body> <img src="monimage.jpg" id="image1" onclick="truetimePic(this)"/> </body>
à partir du premier onclick sur l'image toutes les 1 secondes l'image sera raffraichie...
seul souci il ne faut pas que le chargement de l'image dure plus d'une seconde ...

11/04/2007, 09h40
HwRZxLc4

ouaaaa, je suis épaté, mais une petite question, tu me dit que sais apartire du premié clic, mais on sais changer sa afin que sa le fasse dé que on ouvre la page ?

Car c'est le but vu qu'il s'agit d'image de webcam...

1000x merci.
11/04/2007, 09h47
SpaceFrog

lance la fonction dans le onlaod du body ...
11/04/2007, 14h38
HwRZxLc4

ok, merci bien, je vais tester sa d'ici un ou deux jours et dit quoi
11/04/2007, 17h43
HwRZxLc4

voila, j'ai testé plus vite que prévu, j'avais hâte d'essayer, mais comme j'ai jamais de chance, sa fonctionne pas... :pleure:
11/04/2007, 18h40
SpaceFrog

mets nous plutot ton code que l'on puisse juger sur pièce
12/04/2007, 07h56
Bisûnûrs

Code:

echo '... <IMG src="'.$dir1.'/'.$dernier1.'?'.date('YmdHis').'" ...';
12/04/2007, 11h25
HwRZxLc4

Enfaite, vu que y aura un total de 4 images a nom variable, y a t-il pas moyen de faire un refrech tout simplement ?
12/04/2007, 11h27
SpaceFrog

tes 4 images sont toujours les 4 mêmes ?

suffit de faire un roulement dasn le setTimeout ...
12/04/2007, 11h40
nezdeboeuf62

juste une remarque...

Ce ne serait pas plus simple de mettre une <iframe> invisible qui se chargeras de rafraichir les images et on rafraichit la frame toutes les secondes...
12/04/2007, 12h03
HwRZxLc4

en faite, les 4 images son disposé sur une seule page et chaque images correspond à une caméra et chaque caméra génère des images avec un nom différent dans un dossier.

et donc mon but est d'avoir l'image de chaque caméra qui se rafraichit chaque seconde....

le soft qui génère sa c'est motion, soft de video surveillence.
12/04/2007, 12h07
SpaceFrog

ben une seule focntion avec paramètre et quatre instanciations différentes de la même focntion avec à chaque fois un nom différent d'image ...

ceci étant je doute de l'efficacité de la chose parceque charger 4 images en une seconde ...
12/04/2007, 13h04
HwRZxLc4

c'est dans un réseaux local....
12/04/2007, 13h51
SpaceFrog

ha c'est donc sans doute jouable ...

donc une seule fonction et 4 instances ...
12/04/2007, 13h55
HwRZxLc4

bien vu que je ne trouve pas et que personne semble voulais m'aider, je vais abandonner....

Merci quand même.. :cry: :cry:
12/04/2007, 13h57
SpaceFrog

???
ben tous les éléments t'ont étés donnés ...
tout est là il n'y a pas de raison que cela ne fonctionne pas ...

oui possible que tout est la, mais j'y arrive pas et je connais pas assez le javascript, se qui me coince c'est que les nom est variable si non j'avais trouvé un truc suis fonctionnais
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript"> nbrSecondes = 1; setTimeout("recharge()",nbrSecondes*1000); function recharge() { var now = new Date(); if (document.images) { document.images.nomDeLImage.src = "nomdelimage?" + now.getTime(); } setTimeout("recharge()",nbrSecondes*1000); } </script>
et sa dans le html de l'image

Code:

name="nomDeLImage"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
nbrSecondes = 1;
 
function recharge(IdImage, nomImage)
  {
  var now = new Date();
  if (document.images)
    {
    document.getElementById(IdImage).src = nomImage+"?" + now.getTime();
    }
  }
 
function Launch(){
var one=setTimeout(function(){new recharge("img_1","nomimage1.jpg")},nbrSecondes*1000);
var two=setTimeout(function(){new recharge("img_2","nomimage2.jpg")},nbrSecondes*1000);
var three=setTimeout(function(){new recharge("img_3","nomimage3.jpg")},nbrSecondes*1000);
var four=setTimeout(function(){new recharge("img_2","nomimage2.jpg")},nbrSecondes*1000);
}</script>
 
<body onload="Launch()" >

avec 4 images id="img_1" etc ...

12/04/2007, 21h31
HwRZxLc4

Une question : se que je ne comprend pas, c'est quelle nom donner vu que le nom change tout le temps ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
nbrSecondes = 1;
 
function recharge(IdImage, nomImage)
  {
  var now = new Date();
  if (document.images)
    {
    document.getElementById(IdImage).src = nomImage+"?" + now.getTime();
    }
  }
 
function Launch(){
var one=setTimeout(function(){new recharge("img_1","cam1/lastsnap.jpg")},nbrSecondes*1000);
var two=setTimeout(function(){new recharge("img_2","cam2/lastsnap.jpg")},nbrSecondes*1000);
var three=setTimeout(function(){new recharge("img_3","cam3/lastsnap.jpg")},nbrSecondes*1000);
var four=setTimeout(function(){new recharge("img_4","cam4/lastsnap.jpg")},nbrSecondes*1000);
}</script>
 
<body onload="Launch()" >
 
<img id="img_1" src='' />
<img id="img_2" src='' />
<img id="img_3" src='' />
<img id="img_4" src='' />

13/04/2007, 11h29
HwRZxLc4

Bon voila,j'ai trouvé une partie, sauf que avec le script que tu m'as si aimablement donné, le changement d'image se fais 2 fois.

donc j'y suis presque...

[edit], apprêt rafraichissement, sa change plus d'image :cry: je suis maudit

Je suis une grosse quiche

c'est pas setTimeout mais setInterval !!!!!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
nbrSecondes = 1;
 
function recharge(IdImage, nomImage)
  {
  var now = new Date();
  if (document.images)
    {
    document.getElementById(IdImage).src = nomImage+"?" + now.getTime();
    }
  }
 
function Launch(){
var one=setInterval(function(){new recharge("img_1","cam1/lastsnap.jpg")},nbrSecondes*1000);
var two=setInterval(function(){new recharge("img_2","cam2/lastsnap.jpg")},nbrSecondes*1000);
var three=setInterval(function(){new recharge("img_3","cam3/lastsnap.jpg")},nbrSecondes*1000);
var four=setInterval(function(){new recharge("img_4","cam4/lastsnap.jpg")},nbrSecondes*1000);
}</script>
 
<body onload="Launch()" >
 
<img id="img_1" src='' />
<img id="img_2" src='' />
<img id="img_3" src='' />
<img id="img_4" src='' />

13/04/2007, 11h37
HwRZxLc4

yes yes yes et yes, sa fonctionne nikel, 1000x merci.... :yaisse2:
13/04/2007, 11h41
SpaceFrog

Je suis vraiment désole de t'avoir embarque pendant plusieurs post avec setTimeout alors que c'était bien évidemment setInterval pour la récurrence ...
:oops: :oops: :oops: :oops: :oops: :oops:
13/04/2007, 12h10
HwRZxLc4

non non, c'est pas grave, c'est moi qui y connais rien... :?