jeudi 1 janvier 2015

Afficher et rafraîchir un texte sur une page web

Solution trouvée sur webdeveloper.com

J'ai bricolé une Camera-IP à partir d'une simple webcam (Logitech C-270), de mon vieil Eeepc 700 (dont le clavier est mort) comme serveur et d'un spot halogène extérieur vidé de sa quincaillerie standard comme caisson...

Le logiciel est MJPG-STREAMER. On en reparlera un de ces jours. Ce logiciel capture les images et la vidéo d'une simple webcam, crée un serveur HTTP simple et envoie les images dans ce serveur.

J'ai aussi installé BWBAR sur mon serveur. Ce petit utilitaire permet d'afficher soit un texte en Kbit/s ou autre soit un graphisme (une barre) pour monitorer la bande-passante utilisée.

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

Tout ce qui est en gras et vert doit être modifié.

Votre fichier txt doit se trouver au même endroit que la page HTML contenant le script, par exemple dans le même dossier sur le même serveur. Chez moi, c'est /usr/local/www qui est aussi le dossier de MJPG-Streamer.

  • mon-fichier.txt est à modifier avec le nom de votre fichier. Ce n'est pas forcément un fichier texte, vous pouvez aussi utiliser un fichier PHP ou HTML voire même une sortie RSS (mais ça, c'est une autre histoire...)
  • 10000 c'est l'intervalle de rafraîchissement en millisecondes, ici 10 secondes (1000 ms=1 sec)
  • Loading... est facultatif. On peut laisser la DIV vide. Il s'affiche lorsque la page s'ouvre en attendant les premières données qui arrivent au bout de 10 secondes. Le résultat en Kbit/s secondes s'affiche donc à sa place.

À noter que .fadeOut('slow') et .fadeIn("slow") peuvent être enlevés si on ne désire pas de fading (fondu).


<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"); }, 10000); </script>

</head>

<body>

<div id="loaddiv">Loading...</div>

</body>

</html>


Ce script n'est pas utilisable sur Blogger sauf en utilisant un jeu d'iframe

Aucun commentaire:

Enregistrer un commentaire

Ajoutez un commentaire mais en bon Français ou éventuellement en bon Anglais. Les commentaires en langage SMS seront supprimés.