11523 sujets

JavaScript, DOM et API Web HTML5

Rafraîchissement d'un texte seulement [Résolu]

Smiley smile Bonjour à tous et surtout, MEILLEURS VŒUX pour 2015 Smiley biggrin

Je suis nouveau sur ce forum, je viens juste de m'inscrire.

Voilà mon problème

J'ai bricolé une sorte de caméra-ip extérieure avec une simple webcam (Logitech C-270) et mon vieil Eeepc 700 comme serveur avec MJPG-Streamer. Le caisson de la webcam n'est autre qu'un spot halogène vidé de sa quincaillerie standard. Tout fonctionne nickel. Ma webcam est visible ici: http://nbbc.dtdns.net:13812/webcam4_2.html
Si vous y allez, vous verrez que j'ai ajouté en-dessous un iframe qui affiche la charge du serveur - CE N'EST PLUS VRAI DEPUIS HIER.

1. Bwbar génère automatiquement toutes les 15 secondes un nouveau fichier texte http://nbbc.dtdns.net:13812/dediup.txt. Il génère aussi un graphisme png (une barre) mais malheureusement celle-ci n'est pas très "parlante" et surtout pas aussi précise que le texte.
2. Ce fichier texte est affiché via un iframe sur cette page http://nbbc.dtdns.net:13812/bwbar.html qui est rafraîchie automatiquement avec un classique 
<meta content='15' http-equiv='refresh'/>

3. Enfin, j'affiche le tout à travers un nouvel iframe sur la page de ma webcam.

Bon, tout ça est un peu "bourrin", il faut le reconnaître, mais ça fonctionne... Mais le clignotement de la page bwbar.html qui se rafraîchit est désagréable.

J'ai une autre webcam, une véritable camera-ip celle-là, dont l'image se rafraîchit seule grâce à un script très simple:

<!-- Code Begin --> <img border="0" src="URL de l'image" height="384" name="refresh" width="512" /> 
          <script language="JavaScript" type="text/javascript"> 
          <!-- 
          var t = 60 // interval in seconds 
          image = "URL de l'image" //name of the image 
          function Start() { 
          tmp = new Date(); 
          tmp = "?"+tmp.getTime() 
          document.images["refresh"].src = image+tmp 
          setTimeout("Start()", t*1000) 
          } 
          Start(); 
          // --> 
          </script> <!-- Code End -->


Ça fonctionne plutôt bien. Le rafraîchissement est très fluide. Je l'utilise d'ailleurs avec d'autres webcams. Mais voilà, je voudrais savoir s'il ne serait pas possible de trouver un script dans le même genre pour afficher et rafraîchir avec la même fluidité mon fichier texte "dediup.txt". J'ai évidemment fait une tentative de bricolage à partir de ce script mais sans succès.

Toutes suggestions seront les bienvenues !

Pour info: le serveur FTP de ma (vraie) caméra-ip ne fonctionne pas bien (ou pas comme je veux), c'est donc la raison pour laquelle j'utilise cette méthode.

Je précise aussi que je ne m'y connais pas vraiment en JavaScript mais que je suis capable de "bricoler" un code existant.
Modifié par nettlebay (02 Jan 2015 - 20:09)
Smiley rolleyes Bon, ben voilà, j'ai résolu mon problème tout-seul-comme-un-grand...

J'ai trouvé la solution sur ce site en anglais webdeveloper.com

En fait, mon erreur venait de que je pensais pouvoir utiliser une URL pour le fichier à afficher (donc un fichier distant) alors qu'il faut semble-t-il que ce fichier soit dans le même dossier et sur le même serveur que la page contenant le script. Vous me contredirez si je me trompe...

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('mon-fichier.txt').fadeIn("slow");
}, 20000);
</script>
</head>
<body>
<div id="loaddiv">Loading...</div>
</body>
</html>


Le script est en action sur la page de ma webcam. Hé oui, je suis aux Antilles... à St Martin exactement !

À noter que .fadeOut('slow') et .fadeIn("slow") peuvent être enlevés si on ne désire pas de fading (fondu).
Modifié par nettlebay (02 Jan 2015 - 02:34)
Sujet clos
Aller à