Partage

Rafraichir une variable dans une page html

Noob inside

16 avril 2009 à 13:11:31

Bonjour à tous,

En stage depuis maintenant 1 mois, je dois mettre en place un server WEB. Je précise que ma formation n’a rien à voir avec la programmation, je suis parti de 0 que ce soit en html, langage C, php et compagnie. Je suis en autonomie, sans un seul cours, a moi de trouver des réponses sur le net ou autre. Petite précision, mon module qui me sert de server WEB est de la marque RABBIT modèle RCM5700.

En gros j’ai un programme en C que j’envoie sur mon serveur WEB. C’est lui qui fait le lien entre mes différentes pages web. Dans ce programme je créer plusieurs variables qui s’incrémentent toute les secondes ou demi-seconde etc.

J’aimerais que ces valeurs se rafraichissent automatiquement sur l’une de mes pages WEB. Actuellement je suis obligé d’actualiser ma page pour actualiser ces valeurs. J’ai pu trouver un morceau de programme qui m’affiche une horloge en temps réel sans avoir à rafraichir la page, même en la travaillant je n’obtiens pas le résultat désiré.

Voici la page web en question (le .css étant intégrer à la page html, je commence directe dans le « body »)

<body>

		<!-- L'en-tête -->

	<div id="en_tete">
	
		<h1> Visualisation Etat </h1> 
	
	</div>

		<!-- Le menu -->

	<div id="menu">

		<h3>Menu de séléction</h3> 

			<p> <A HREF="/admin/index.zhtml"> Visualisation Etat </A>  </p>  	
			<p> <A HREF="/def/index.zhtml"> Defaut journal </A> </p> 		   
			<p> <A HREF="/vit/index.zhtml"> Vitesse </A> </p> 		   
			<p> <A HREF="/para/index.zhtml"> Paramètres </A> </p> 		   
			<p> <A HREF="/conf/index.zhtml"> Configuration </A> </p> 
	   	
	</div>

		<!-- Le corps -->
 
	<div id="corps">

		<p> Vitesse </p> 

		<p class="none"> Tambour 1 : tr/min </p> <br/>	
		
<script type="text/javascript">

	function rafraichir()
 
	{    
			var text = ''; 
			var date = new Date();
			var tambour = '<?z print ($t1) ?>';	
			
	/* Fonction ' SECONDES ' */
			
		if ( date.getSeconds() <= 9 )
 
		{

		var secondes = '0'+date.getSeconds();

		}

		else

		{

		var secondes = date.getSeconds();

		}
		
		text +=  secondes+':'+tambour+':'+secondes;
		document.getElementById('affiche_date').innerHTML = text;
	
	}

	document.write('<p id="affiche_date"></p>');
	setInterval('rafraichir()',1000);
	
</script>

		<p class="none"> Tambour 2 : <?z print($t2) ?> tr/min </p>

		<p class="none"> Moteur 1 : <?z print($m1) ?> tr/min </p>
 
		<p class="none">Moteur 2 : <?z print($m2) ?> tr/min </p>
 
		<p> Mouvement : ... </p>

		<p> Defauts : ... </p> 

	</div>

</body>

Voila en gros, la valeur de t1 ne se rafraichit pas, contrairement au secondes. Je dois actualiser ma page pour que t1 s’actualise.

Si quelqu’un ici peux me mettre sur une piste ou me trouver une solution, je lui serais grandement reconnaissant !

Merci d’avance ! Et surtout merci au site du Zero !

N’hésitez pas, si je me suis mal exprimé ou si vous désirez des précisions.

Tillertan

16 avril 2009 à 13:18:34

Retente ta chance en utilisant la balise <code type="html"></code> et si possible avec les tabulations si tu les as mises dans le code d'origine..

Coem

16 avril 2009 à 13:24:06

Merci pour ta repose Tiller, mais je ne vois pas à quel endroit je dois utiliser cette balise.

(Débutant de chez débutant, je sais. Merci de perdre du temps pour nous c’est sympa.)

édit: Autant pour moi, je viens de comprendre, désolé...

birdy42

16 avril 2009 à 13:35:37

tu édites ton post de départ et avant ton code, tu mets : < code type="html"> etaprès ton code tu mets : </ code>
(sans les espaces

)

Tillertan

16 avril 2009 à 13:42:36

<?z print ($t1) ?>

C'est censé donner quoi ça? Je connais <?= mais pas <?z =)

Ton code en plus joli et les erreurs php réparé:

<body>
	<!-- L'en-tête -->
	<div id="en_tete">
		<h1> Visualisation Etat </h1> 
	</div>
	
	<!-- Le menu -->
	<div id="menu">
		<h3>Menu de séléction</h3> 
		
		<p><a href="/admin/index.zhtml">Visualisation Etat</a></p>  	
		<p><a href="/def/index.zhtml">Defaut journal</a> </p> 		   
		<p><a href="/vit/index.zhtml">Vitesse</a></p> 		   
		<p><a href="/para/index.zhtml">Paramètres</a></p> 		   
		<p><a href="/conf/index.zhtml">Configuration</a></p> 
	</div>
	
	<!-- Le corps -->
	<div id="corps">
		<p>Vitesse</p> 
		<!-- class="none" ? elle existe cette class sur ta page....? -->
		<p class="none">Tambour 1 : tr/min</p><br/>	
		<p class="none">Tambour 2 : <?=$t2?> tr/min</p>
		
		<p class="none">Moteur 1 : <?=$m1?> tr/min</p>
		<p class="none">Moteur 2 : <?=$m2?> tr/min</p>
		
		<p>Mouvement : ...</p>
		<p>Defauts : ...</p> 
	</div>
	
	<script type="text/javascript">
		function rafraichir() {    
			var text,
			date = new Date(),
			tambour = '<?=$t1?>',
			secondes = date.getSeconds();	
			
			/* Fonction ' SECONDES ' */
			if (secondes <= 9) {
				secondes = '0' + secondes;
			}
			
			text = secondes + ':' + tambour + ':' + secondes;
			document.getElementById('affiche_date').innerHTML = text;
		}
		
		/* JAMAIS DE DOCUMENT.WRITE ! ** document.write('<p id="affiche_date"></p>'); */
		document.getElementsByTagName('body')[0].innerHTML += '<p id="affiche_date"></p>';
		/* Mauvaise forme: setInterval('rafraichir()', 1000); */
		setInterval(rafraichir, 1000);
		
	</script>
</body>

Après, si tu veux mettre à jour une variable que tu récupères par PHP, tu dois utiliser de l'AJAX.
Je te laisse trouvé le tuto dans la partie javascript.

Coem

16 avril 2009 à 14:00:05

A vrai dire c’est tout la le probleme…

Le module RABBIT que j’utilise a apparement son langage specifique.

Je vous invite a jeter un tres rapide coup d’oeuil à ce lien :

http://translate.google.fr/translate?h [...] 3Dfr%26sa%3DG

Partie 3.0 ZHTML Scripting Language

Pour utiliser les valeurs que j’incremante dans mon programme C je dois utiliser les balises < ?z statement ?> exemple :

<?z if (error($foo)) { ?>
<?z echo($foo) ?>
<?z } ?>

Ce qui complique encore plus la tache en plus de rien connaitre aux différents langage… Sympa le stage non ?

Tillertan

16 avril 2009 à 14:07:58

ok pour le <?z>, mais, c'est quoi cette variable en fait? Variable PHP? Variable transmise en C?

Si c'est une PHP => AJAX
Si c'est une C => Rien à faire coté JS... je crois

Coem

16 avril 2009 à 14:19:14

Voici la page complette zhtml en question.

<html>

<head>
   
	<title> Serveur WEB </title>
	   
	<style type="text/css">
	
	body
	{
		width: 800px;
	
		margin: auto; /* Pour centrer notre page */
	
		margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
	
		margin-bottom: 20px;    /* Idem pour le bas du navigateur */
	
		background-color: black; 
	}
	
	#en_tete
	{
		width: auto;
					
		height: 100px;
					
		margin-left: 10px; /* Marge à gauche du bloc "corps" */
					
		margin-right: 10px; /* Marge à droite du bloc "corps" */
					
		margin-bottom: 10px;
					
		border: 2px outset white;
	
		padding: 5px;
	
		text-align: center;
		
		color: white;
	}
	
	#menu
	{
		float: left; /* Le menu flottera à gauche */
	
		margin-left: 10px;
					
		width: 160px; /* Très important : donner une taille au menu */
					
		border: 2px outset white;
					
		padding: 5px;

		text-align: center;	
		
		color: white;
	}
	
	#corps
	{
		width: auto; /* La largeur de la page s'adapte à la largeur de la fenêtre du navigateur */
				
		margin-left: 190px; /* Marge à gauche du bloc "corps" */
				
		margin-right: 10px; /* Marge à droite du bloc "corps" */
				
		margin-bottom: 10px; /* Marge en bas du bloc "corps" */
				
		padding: 5px; /* Distance entre le bord du bloc et l'écriture  */
				
		border: 2px outset white;
	
		text-align: center;
		
		color: white;
	}

	#pied_de_page
	{
		padding: 5px; /* Marge intérieur au bloc */

		text-align: center;
					
		margin-left: 10px; /* Marge à gauche du bloc "corps" */
					
		margin-right: 10px; /* Marge à droite du bloc "corps" */
   
		border: 2px outset white;
		
		color: white;
	}
	
	a
	{
		text-decoration: none;
		
		color: red;
	}
	
	.none
	{
		text-align: left;
	}
	
	.blanc
	{
		color: white;
	}
	
	table
	{
		margin: auto;
		
		border: 2px outset black;
	}
	
	</style>
	   
</head>
 
<body>
	<!-- L'en-tête -->
	<div id="en_tete">
		<h1> Visualisation Etat </h1> 
	</div>
	
	<!-- Le menu -->
	<div id="menu">
		<h3>Menu de séléction</h3> 
		
		<p><a href="/admin/index.zhtml">Visualisation Etat</a></p>  	
		<p><a href="/def/index.zhtml">Defaut journal</a> </p> 		   
		<p><a href="/vit/index.zhtml">Vitesse</a></p> 		   
		<p><a href="/para/index.zhtml">Paramètres</a></p> 		   
		<p><a href="/conf/index.zhtml">Configuration</a></p> 
	</div>
	
	<!-- Le corps -->
	<div id="corps">
		<p>Vitesse</p> 
		<!-- class="none" ? elle existe cette class sur ta page....? -->
		<p class="none">Tambour 1 : tr/min</p><br/>	
		<p class="none">Tambour 2 : <?=$t2?> tr/min</p>
		
		<p class="none">Moteur 1 : <?=$m1?> tr/min</p>
		<p class="none">Moteur 2 : <?=$m2?> tr/min</p>
		
		<p>Mouvement : ...</p>
		<p>Defauts : ...</p> 
	</div>
	
	<script type="text/javascript">
		function rafraichir() {    
			var text,
			date = new Date(),
			tambour = '<?=$t1?>',
			secondes = date.getSeconds();	
			
			/* Fonction ' SECONDES ' */
			if (secondes <= 9) {
				secondes = '0' + secondes;
			}
			
			text = secondes + ':' + tambour + ':' + secondes;
			document.getElementById('affiche_date').innerHTML = text;
		}
		
		/* JAMAIS DE DOCUMENT.WRITE ! ** document.write('<p id="affiche_date"></p>'); */
		document.getElementsByTagName('body')[0].innerHTML += '<p id="affiche_date"></p>';
		/* Mauvaise forme: setInterval('rafraichir()', 1000); */
		setInterval(rafraichir, 1000);
		
	</script>
</body>


</html>

Voici ma page de programme en C, avec la variable qui s'incremante t1.

#define _PRIMARY_STATIC_IP  "192.168.1.2" // Adresse ip à copier dans le navigateur //
#define _PRIMARY_NETMASK    "255.255.255.0"
#define MY_GATEWAY          "192.168.1.1"
#define MY_NAMESERVER       "192.168.1.1"

#define USE_RABBITWEB 1

#memmap xmem

#use "dcrtcp.lib"
#use "http.lib"

// Sous Windows XP : C:\Documents and Settings\P'tite MéMé\Bureau //
// Sous Windows Vista : C:\Users\PéPé\Desktop //

#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\index.zhtml"      index_zhtml
#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\visualisation.zhtml"      admin_zhtml
#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\defaut.zhtml"      defaut_zhtml
#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\vitesse.zhtml"      vitesse_zhtml
#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\parametre.zhtml"      parametre_zhtml
#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\configuration.zhtml"      configuration_zhtml

//

SSPEC_MIMETABLE_START

   SSPEC_MIME_FUNC(".zhtml", "text/html", zhtml_handler),
   SSPEC_MIME(".html", "text/html")

SSPEC_MIMETABLE_END

//

SSPEC_RESOURCETABLE_START

   SSPEC_RESOURCE_XMEMFILE("/index.zhtml", index_zhtml),
   SSPEC_RESOURCE_XMEMFILE("/admin/index.zhtml", admin_zhtml),
   SSPEC_RESOURCE_XMEMFILE("/def/index.zhtml", defaut_zhtml),
   SSPEC_RESOURCE_XMEMFILE("/vit/index.zhtml", vitesse_zhtml),
   SSPEC_RESOURCE_XMEMFILE("/para/index.zhtml", parametre_zhtml),
   SSPEC_RESOURCE_XMEMFILE("/conf/index.zhtml", configuration_zhtml),

SSPEC_RESOURCETABLE_END

//

#web_groups admin01
#web_groups admin02

// The #web lines below register C variables with the web server, such that
// they can be used with the RabbitWeb HTTP server enhancements.

int t1; // Tambour 1 //
#web t1 groups=all(ro), admin01, admin02

int t2; // Tambour 2 //
#web t2 groups=all(ro), admin01, admin02

int m1; // Moteur 1 //
#web m1 groups=all(ro), admin01, admin02

int m2; // Moteur 2 //
#web m2 groups=all(ro), admin01, admin02

int tempo_dd; // Temporisation DD //
#web tempo_dd ((100 < $tempo_dd) && ($tempo_dd <= 5000)) groups=all(ro), admin01, admin02

int tempo_ds; // Temporisation DS //
#web tempo_ds ((100 < $tempo_ds) && ($tempo_ds <= 5000)) groups=all(ro), admin01, admin02

int tempo_sv; // Temporisation SV //
#web tempo_sv ((100 < $tempo_sv) && ($tempo_sv <= 5000)) groups=all(ro), admin01, admin02

int tol_dd; // Tolérance DD //
#web tol_dd ((0 < $tol_dd) && ($tol_dd <= 200)) groups=all(ro), admin01, admin02

int tol_ds; // Tolérance DS //
#web tol_ds ((0 < $tol_ds) && ($tol_ds <= 200)) groups=all(ro), admin01, admin02

int freq_min; // Fréquence minimum T1 //
#web freq_min ((5 < $freq_min) && ($freq_min <= 10)) groups=all(ro), admin01, admin02

int pv; // Petite vitesse //
#web pv ((0 < $pv) && ($pv <= 100)) groups=all(ro), admin01, admin02

int gv; // Grande vitesse //
#web gv ((0 < $gv) && ($gv <= 100)) groups=all(ro), admin01, admin02

int spv; // Seuil petite vitesse //
#web spv ((0 < $spv) && ($spv <= 100)) groups=all(ro), admin01, admin02

int sgv; // Seuil grande vitesse //
#web sgv ((0 < $sgv) && ($sgv <= 100)) groups=all(ro), admin01, admin02

int tol_it; // Tolerance au nombre d'impulsions par tour //
#web tol_it ((0 < $tol_it) && ($tol_it <= 10)) groups=all(ro), admin01, admin02

int nds; // Tolerance au nombre de défauts successifs //
#web nds ((1 < $nds) && ($nds <= 10)) groups=all(ro), admin01, admin02

int tol_rr; // Tolérance du rapport de réduction //
#web tol_rr ((0 < $tol_rr) && ($tol_rr <= 10)) groups=all(ro), admin01, admin02

int mot_de_passe;
#web mot_de_passe groups=all(ro), admin01, admin02

// Début du programme //

void main (void)

{

int userid;

// Valeurs des différentes variables par défaut //

t1 = 10 ; // Tambour 1 //

t2 = 11 ; // Tambour 2 //

m1 = 598 ; // Moteur 1 //

m2 = 595 ; // Moteur 2 //

tempo_dd = 3000 ; // Temporisation DD //

tempo_ds = 3500 ; // Temporisation DS //

tempo_sv = 2500 ; // Temporisation SV //

tol_dd = 200 ; // Tolérance DD //

tol_ds = 100 ; // Tolérance DS //

freq_min = 5 ; // Fréquence minimum T1 //

pv = 10 ; // Petite vitesse //

gv = 30 ; // Grande vitesse //

spv = 10 ; // Seuil petite vitesse //

sgv = 10 ; // Seuil grande vitesse //

tol_it = 10 ; // Tolerance au nombre d'impulsions par tour //

nds = 3 ; // Tolerance au nombre de défauts successifs //

tol_rr = 10 ; // Tolérance du rapport de réduction //

// Initialize the TCP/IP stack and HTTP server
// Start network and wait for interface to come up (or error exit).

sock_init_or_exit(1);

http_init();

// If the browser specifies a directory (instead of a proper resource name)
// default to using "index.zhtml" in that directory, if it exists.
// If we don't use this function, the default is "index.html" which won't
// work for this sample.

http_set_path("/", "index.zhtml");

tcp_reserveport(80);

// The following line limits access to the "/admin" directory to the admin
// group.  It also requires basic authentication for the "/admin"
// directory.

sspec_addrule("/admin", "Niveau 1", admin01, admin01, SERVER_ANY, SERVER_AUTH_BASIC, NULL);

// The following two lines create an "admin" user and adds it to the admin
// group.

userid = sauth_adduser("aaa", "aaa", SERVER_ANY);
sauth_setusermask(userid, admin01, NULL);

// The following line limits access to the "/admin" directory to the admin
// group.  It also requires basic authentication for the "/admin"
// directory.

sspec_addrule("/conf", "Niveau 2", admin02, admin02, SERVER_ANY, SERVER_AUTH_BASIC, NULL);

// The following two lines create an "admin" user and adds it to the admin
// group.

userid = sauth_adduser("bbb", "bbb", SERVER_ANY);
sauth_setusermask(userid, admin02, NULL);

// This drives the HTTP server.

	while(1)

	{

	costate

        {

	http_handler();

	}

        costate

        {

      	waitfor (IntervalMs (500));

        t1++;

   	}

        costate

        {

      	waitfor (IntervalMs (1000));

        m1++;

   	}

        costate

        {

      	waitfor (IntervalMs (1500));

        t2++;

   	}

        costate

        {

      	waitfor (IntervalMs (2000));

        m2++;

   	}

	}

}

Tillertan

16 avril 2009 à 14:20:57

Mais, <?z echo($foo) ?> d'où elle sort cette variable?

Coem

16 avril 2009 à 14:27:04

Elle povient du lien que j'ai donné vers la page d'explication du serveur WEB RABBIT, je n'utilise pas cette variable.

C'était juste un exemple pour montrer comment il fallait encadrer les instructions.

restimel

16 avril 2009 à 14:32:40

Citation : Coem

la valeur de t1 ne se rafraichit pas, contrairement au secondes

tu veux parler de cette ligne?

var tambour = '<?z print ($t1) ?>';

Alors oui c'est normal car javascript est un langage qui est interprété côté client. Alors que ta page est généré sur ton serveur web (c'est à ce moment qu'il remplace <?z print ($t1) ?> par la valeur de t1) et ce quelque soit le langage que tu utilises (PHP, C, JAVA, C# ou autre...). Donc au moment où le javascript lit cette ligne la valeur de t1 est fixe (et restera toujours fixe jusqu'à ce que tu recharges la page)

Donc si tu veux rafraîchir la valeur de t1 (qui, si j'ai bien compris, et calculé par ton serveur) sans recharger la page web, alors il te faudra utiliser l'Ajax (tutoriel Ajax). L'Ajax est une technique qui te permet de récupérer en javascript des données sur un serveur. Il te faudra donc écrire une page spécifique qui fournira les informations dont tu as besoin (comme la valeur de t1).

Tillertan

16 avril 2009 à 14:36:28

Bon, même si j'y crois pas trop, essaie ce code:

<html>
<head>
	<title> Serveur WEB </title>
	
	<style type="text/css">
		body
		{
			width: 800px;
			margin: auto; /* Pour centrer notre page */
			margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
			margin-bottom: 20px;    /* Idem pour le bas du navigateur */
			background-color: black; 
		}
		
		#en_tete
		{
			width: auto;
			height: 100px;
			margin-left: 10px; /* Marge à gauche du bloc "corps" */
			margin-right: 10px; /* Marge à droite du bloc "corps" */
			margin-bottom: 10px;
			border: 2px outset white;
			padding: 5px;
			text-align: center;
			color: white;
		}
		
		#menu
		{
			float: left; /* Le menu flottera à gauche */
			margin-left: 10px;
			width: 160px; /* Très important : donner une taille au menu */
			border: 2px outset white;
			padding: 5px;
			text-align: center;	
			color: white;
		}
		
		#corps
		{
			width: auto; /* La largeur de la page s'adapte à la largeur de la fenêtre du navigateur */	
			margin-left: 190px; /* Marge à gauche du bloc "corps" */		
			margin-right: 10px; /* Marge à droite du bloc "corps" */
			margin-bottom: 10px; /* Marge en bas du bloc "corps" */		
			padding: 5px; /* Distance entre le bord du bloc et l'écriture  */	
			border: 2px outset white;
			text-align: center;
			color: white;
		}
	
		#pied_de_page
		{
			padding: 5px;
			text-align: center;
			margin-left: 10px;
			margin-right: 10px;
			border: 2px outset white;
			color: white;
		}
		
		a
		{
			text-decoration: none;
			color: red;
		}
		
		.none
		{
			text-align: left;
		}
		
		.blanc
		{
			color: white;
		}
		
		table
		{
			margin: auto;
			border: 2px outset black;
		}
	</style>  
</head>
 
<body>
	<!-- L'en-tête -->
	<div id="en_tete">
		<h1> Visualisation Etat </h1> 
	</div>
	
	<!-- Le menu -->
	<div id="menu">
		<h3>Menu de séléction</h3> 
		
		<p><a href="/admin/index.zhtml">Visualisation Etat</a></p>  	
		<p><a href="/def/index.zhtml">Defaut journal</a> </p> 		   
		<p><a href="/vit/index.zhtml">Vitesse</a></p> 		   
		<p><a href="/para/index.zhtml">Paramètres</a></p> 		   
		<p><a href="/conf/index.zhtml">Configuration</a></p> 
	</div>
	
	<!-- Le corps -->
	<div id="corps">
		<p>Vitesse</p> 
		<!-- class="none" ? elle existe cette class sur ta page....? -->
		<p class="none">Tambour 1 : tr/min</p><br/>	
		<p class="none">Tambour 2 : <?z print($t2) ?> tr/min</p>
		
		<p class="none">Moteur 1 : <?z print($m1) ?> tr/min</p>
		<p class="none">Moteur 2 :<?z print($m2) ?> tr/min</p>
		
		<p>Mouvement : ...</p>
		<p>Defauts : ...</p> 
	</div>
	
	<script type="text/javascript">
		function getXhr() {
			if (window.XMLHttpRequest)
				xhr = new XMLHttpRequest(); 
			else if (window.ActiveXObject)
			{
				try
				{
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} 
				catch (e)
				{
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
			else
				xhr = false;
			return xhr;
		}
		
		
		function rafraichir() {    
			var xhr = getXhr();
			xhr.onreadystatechange = function()
			{
				if (xhr.readyState == 4 && xhr.status == 200)
				{
					var tambour = xhr.responseText;
					
					var text, date = new Date(), secondes = date.getSeconds();	
					
					if (secondes <= 9) {
						secondes = '0' + secondes;
					}
					
					text = secondes + ':' + tambour + ':' + secondes;
					document.getElementById('affiche_date').innerHTML = text;
					
					setTimeout(rafraichir, 500);
				}
			};
			
			xhr.open('GET', 'tamb.zhtml', true);
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send(null);
		}
		
		/* JAMAIS DE DOCUMENT.WRITE ! ** document.write('<p id="affiche_date"></p>'); */
		document.getElementsByTagName('body')[0].innerHTML += '<p id="affiche_date"></p>';
		/* Mauvaise forme: setInterval('rafraichir()', 1000); */
		rafraichir();
		
	</script>
</body>

</html>

Et tu crées, dans le même dossier, une page nommée tamb.zhtml avec dedans:

<?z print ($t1) ?>

Coem

16 avril 2009 à 14:42:20

Bien, merci pour les explications ! Le pire c’est que je m’étais penché sur l’AJAX il y a quelques jours en cherchant des infos sur mon problème. Ce même tuto. Disons que j’ai pris peur à la vue de toutes ces lignes de codes incompréhensible… Je pensais qu’il y avait plus simple.

Et bien je pense ne plus avoir le choix, c’est partis pour l’AJAX alors. Je repasserais d’ici peu donner des news, en bien comme en mal.

Merci encore

restimel

16 avril 2009 à 14:49:41

T'as essayé les lignes de Tiller?

Car c'est justement de l'Ajax qu'il a utilisé.
Par contre il a fait une petite faute là: setTimeout(refraichir, 500);
c'est setTimeout(rafraichir, 500); (corrigé)

Et vérifie en ouvrant tamb.zhtml avec ton navigateur que tu as bien la valeur de t1

Tillertan

16 avril 2009 à 14:58:30

Merci pour la faute de frappe, j'avais pas fait attention.

Coem

16 avril 2009 à 15:03:49

Je viens d’essayer les lignes, âpres la correction. C’est du Chinois pour moi mais bon ! Aucune valeur ne s’affiche quand je vais sur la page. (Serveur en marche et pages chargés)

J’ai juste écrit : <?z print ($t1) ?> dans un fichier tamb.zhtml

Quand je le glisse dans mon navigateur, serveur en marche, rien ne s’inscrit. Bizar ca… je dois mettre les balise html body etc ?

En tout cas je ne vais pas le repetter à chaque post mais, un grand merci à vous pour le coup de patte, c'est super sympa.

restimel

16 avril 2009 à 15:09:57

si rien ne s'affiche c'est que $t1 n'est pas calculé donc il faut que tu rajoutes ce qu'il faut pour que t1 soit calculé dans cette page (là je ne vais pas pouvoir beaucoup t'aider car je ne connais pas WEB RABBIT).

Le but de cette page est d'afficher uniquement la valeur de t1 (cette page sera ensuite lue par le javacript de ta page principale)

Coem

16 avril 2009 à 15:38:51

Resultat : quand je vais sur la page /tamb en partant de la page d’index du server WEB j’obtiens la valeur de t1 mais je dois actualiser la page pour voir la valeur changer.
En revanche sur la page /admin/index la valeur t1 et les secondes n’apparaissent pas… Je vous remet tout le code actuelle au cas ou.

<html>

<head>
	<title> Serveur WEB </title>
	
	<style type="text/css">
		body
		{
			width: 800px;
			margin: auto; /* Pour centrer notre page */
			margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
			margin-bottom: 20px;    /* Idem pour le bas du navigateur */
			background-color: black; 
		}
		
		#en_tete
		{
			width: auto;
			height: 100px;
			margin-left: 10px; /* Marge à gauche du bloc "corps" */
			margin-right: 10px; /* Marge à droite du bloc "corps" */
			margin-bottom: 10px;
			border: 2px outset white;
			padding: 5px;
			text-align: center;
			color: white;
		}
		
		#menu
		{
			float: left; /* Le menu flottera à gauche */
			margin-left: 10px;
			width: 160px; /* Très important : donner une taille au menu */
			border: 2px outset white;
			padding: 5px;
			text-align: center;	
			color: white;
		}
		
		#corps
		{
			width: auto; /* La largeur de la page s'adapte à la largeur de la fenêtre du navigateur */	
			margin-left: 190px; /* Marge à gauche du bloc "corps" */		
			margin-right: 10px; /* Marge à droite du bloc "corps" */
			margin-bottom: 10px; /* Marge en bas du bloc "corps" */		
			padding: 5px; /* Distance entre le bord du bloc et l'écriture  */	
			border: 2px outset white;
			text-align: center;
			color: white;
		}
	
		#pied_de_page
		{
			padding: 5px;
			text-align: center;
			margin-left: 10px;
			margin-right: 10px;
			border: 2px outset white;
			color: white;
		}
		
		a
		{
			text-decoration: none;
			color: red;
		}
		
		.none
		{
			text-align: left;
		}
		
		.blanc
		{
			color: white;
		}
		
		table
		{
			margin: auto;
			border: 2px outset black;
		}
	</style>  
</head>
 
<body>
	<!-- L'en-tête -->
	<div id="en_tete">
		<h1> Visualisation Etat </h1> 
	</div>
	
	<!-- Le menu -->
	<div id="menu">
		<h3>Menu de séléction</h3> 
		
		<p><a href="/admin/index.zhtml">Visualisation Etat</a></p>  	
		<p><a href="/def/index.zhtml">Defaut journal</a> </p> 		   
		<p><a href="/vit/index.zhtml">Vitesse</a></p> 		   
		<p><a href="/para/index.zhtml">Paramètres</a></p> 		   
		<p><a href="/conf/index.zhtml">Configuration</a></p> 
		<p><a href="/tamb/index.zhtml">tamb</a></p>
	</div>
	
	<!-- Le corps -->
	<div id="corps">
		<p>Vitesse</p> 
		<!-- class="none" ? elle existe cette class sur ta page....? -->
		<p class="none">Tambour 1 : <?z print($t1) ?> tr/min</p><br/>	
		<p class="none">Tambour 2 : <?z print($t2) ?> tr/min</p>		
		<p class="none">Moteur 1 : <?z print($m1) ?> tr/min</p>
		<p class="none">Moteur 2 :<?z print($m2) ?> tr/min</p>
		
		<p>Mouvement : ...</p>
		<p>Defauts : ...</p> 
	</div>
	
	<script type="text/javascript">
		function getXhr() {
			if (window.XMLHttpRequest)
				xhr = new XMLHttpRequest(); 
			else if (window.ActiveXObject)
			{
				try
				{
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} 
				catch (e)
				{
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
			else
				xhr = false;
			return xhr;
		}
		
		
		function rafraichir() {    
			var xhr = getXhr();
			xhr.onreadystatechange = function()
			{
				if (xhr.readyState == 4 && xhr.status == 200)
				{
					var tambour = xhr.responseText;
					
					var text, date = new Date(), secondes = date.getSeconds();	
					
					if (secondes <= 9) {
						secondes = '0' + secondes;
					}
					
					text = secondes + ':' + tambour + ':' + secondes;
					document.getElementById('affiche_date').innerHTML = text;
					
					setTimeout(rafraichir, 500);
				}
			};
			
			xhr.open('GET', 'tamb.zhtml', true);
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send(null);
		}
		
		/* JAMAIS DE DOCUMENT.WRITE ! ** document.write('<p id="affiche_date"></p>'); */
		document.getElementsByTagName('body')[0].innerHTML += '<p id="affiche_date"></p>';
		/* Mauvaise forme: setInterval('rafraichir()', 1000); */
		rafraichir();
		
	</script>
</body>

</html>

La page tamb.zhtml

<html>

<body>

<p> Et la valeur de t1 est : </p>

<?z print($t1) ?>

<p> <a href="/admin/index.zhtml"> Visualisation Etat </a> </p>

</body>

</html>

Et enfin le programme C modifié :

#define _PRIMARY_STATIC_IP  "192.168.1.2" // Adresse ip à copier dans le navigateur //
#define _PRIMARY_NETMASK    "255.255.255.0"
#define MY_GATEWAY          "192.168.1.1"
#define MY_NAMESERVER       "192.168.1.1"

#define USE_RABBITWEB 1

#memmap xmem

#use "dcrtcp.lib"
#use "http.lib"

// Sous Windows XP : C:\Documents and Settings\P'tite MéMé\Bureau //
// Sous Windows Vista : C:\Users\PéPé\Desktop //

#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\index.zhtml"      index_zhtml
#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\visualisation.zhtml"      admin_zhtml
#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\defaut.zhtml"      defaut_zhtml
#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\vitesse.zhtml"      vitesse_zhtml
#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\parametre.zhtml"      parametre_zhtml
#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\configuration.zhtml"      configuration_zhtml
#ximport "C:\Documents and Settings\P'tite MéMé\Bureau\tamb.zhtml"      tamb_zhtml

//

SSPEC_MIMETABLE_START

   SSPEC_MIME_FUNC(".zhtml", "text/html", zhtml_handler),
   SSPEC_MIME(".html", "text/html")

SSPEC_MIMETABLE_END

//

SSPEC_RESOURCETABLE_START

   SSPEC_RESOURCE_XMEMFILE("/index.zhtml", index_zhtml),
   SSPEC_RESOURCE_XMEMFILE("/admin/index.zhtml", admin_zhtml),
   SSPEC_RESOURCE_XMEMFILE("/def/index.zhtml", defaut_zhtml),
   SSPEC_RESOURCE_XMEMFILE("/vit/index.zhtml", vitesse_zhtml),
   SSPEC_RESOURCE_XMEMFILE("/para/index.zhtml", parametre_zhtml),
   SSPEC_RESOURCE_XMEMFILE("/conf/index.zhtml", configuration_zhtml),
   SSPEC_RESOURCE_XMEMFILE("/tamb/index.zhtml", tamb_zhtml),

SSPEC_RESOURCETABLE_END

//

#web_groups admin01
#web_groups admin02

// The #web lines below register C variables with the web server, such that
// they can be used with the RabbitWeb HTTP server enhancements.

int t1; // Tambour 1 //
#web t1 groups=all(ro), admin01, admin02

int t2; // Tambour 2 //
#web t2 groups=all(ro), admin01, admin02

int m1; // Moteur 1 //
#web m1 groups=all(ro), admin01, admin02

int m2; // Moteur 2 //
#web m2 groups=all(ro), admin01, admin02

int tempo_dd; // Temporisation DD //
#web tempo_dd ((100 < $tempo_dd) && ($tempo_dd <= 5000)) groups=all(ro), admin01, admin02

int tempo_ds; // Temporisation DS //
#web tempo_ds ((100 < $tempo_ds) && ($tempo_ds <= 5000)) groups=all(ro), admin01, admin02

int tempo_sv; // Temporisation SV //
#web tempo_sv ((100 < $tempo_sv) && ($tempo_sv <= 5000)) groups=all(ro), admin01, admin02

int tol_dd; // Tolérance DD //
#web tol_dd ((0 < $tol_dd) && ($tol_dd <= 200)) groups=all(ro), admin01, admin02

int tol_ds; // Tolérance DS //
#web tol_ds ((0 < $tol_ds) && ($tol_ds <= 200)) groups=all(ro), admin01, admin02

int freq_min; // Fréquence minimum T1 //
#web freq_min ((5 < $freq_min) && ($freq_min <= 10)) groups=all(ro), admin01, admin02

int pv; // Petite vitesse //
#web pv ((0 < $pv) && ($pv <= 100)) groups=all(ro), admin01, admin02

int gv; // Grande vitesse //
#web gv ((0 < $gv) && ($gv <= 100)) groups=all(ro), admin01, admin02

int spv; // Seuil petite vitesse //
#web spv ((0 < $spv) && ($spv <= 100)) groups=all(ro), admin01, admin02

int sgv; // Seuil grande vitesse //
#web sgv ((0 < $sgv) && ($sgv <= 100)) groups=all(ro), admin01, admin02

int tol_it; // Tolerance au nombre d'impulsions par tour //
#web tol_it ((0 < $tol_it) && ($tol_it <= 10)) groups=all(ro), admin01, admin02

int nds; // Tolerance au nombre de défauts successifs //
#web nds ((1 < $nds) && ($nds <= 10)) groups=all(ro), admin01, admin02

int tol_rr; // Tolérance du rapport de réduction //
#web tol_rr ((0 < $tol_rr) && ($tol_rr <= 10)) groups=all(ro), admin01, admin02

int mot_de_passe;
#web mot_de_passe groups=all(ro), admin01, admin02

// Début du programme //

void main (void)

{

int userid;

// Valeurs des différentes variables par défaut //

t1 = 10 ; // Tambour 1 //

t2 = 11 ; // Tambour 2 //

m1 = 598 ; // Moteur 1 //

m2 = 595 ; // Moteur 2 //

tempo_dd = 3000 ; // Temporisation DD //

tempo_ds = 3500 ; // Temporisation DS //

tempo_sv = 2500 ; // Temporisation SV //

tol_dd = 200 ; // Tolérance DD //

tol_ds = 100 ; // Tolérance DS //

freq_min = 5 ; // Fréquence minimum T1 //

pv = 10 ; // Petite vitesse //

gv = 30 ; // Grande vitesse //

spv = 10 ; // Seuil petite vitesse //

sgv = 10 ; // Seuil grande vitesse //

tol_it = 10 ; // Tolerance au nombre d'impulsions par tour //

nds = 3 ; // Tolerance au nombre de défauts successifs //

tol_rr = 10 ; // Tolérance du rapport de réduction //

// Initialize the TCP/IP stack and HTTP server
// Start network and wait for interface to come up (or error exit).

sock_init_or_exit(1);

http_init();

// If the browser specifies a directory (instead of a proper resource name)
// default to using "index.zhtml" in that directory, if it exists.
// If we don't use this function, the default is "index.html" which won't
// work for this sample.

http_set_path("/", "index.zhtml");

tcp_reserveport(80);

// The following line limits access to the "/admin" directory to the admin
// group.  It also requires basic authentication for the "/admin"
// directory.

sspec_addrule("/admin", "Niveau 1", admin01, admin01, SERVER_ANY, SERVER_AUTH_BASIC, NULL);

// The following two lines create an "admin" user and adds it to the admin
// group.

userid = sauth_adduser("aaa", "aaa", SERVER_ANY);
sauth_setusermask(userid, admin01, NULL);

// The following line limits access to the "/admin" directory to the admin
// group.  It also requires basic authentication for the "/admin"
// directory.

sspec_addrule("/conf", "Niveau 2", admin02, admin02, SERVER_ANY, SERVER_AUTH_BASIC, NULL);

// The following two lines create an "admin" user and adds it to the admin
// group.

userid = sauth_adduser("bbb", "bbb", SERVER_ANY);
sauth_setusermask(userid, admin02, NULL);

// This drives the HTTP server.

	while(1)

	{

		costate

      {

			http_handler();

		}

      costate

      {

      	waitfor (IntervalMs (500));

         t1++;

   	}

      costate

      {

      	waitfor (IntervalMs (1000));

         m1++;

   	}

      costate

      {

      	waitfor (IntervalMs (1500));

         t2++;

   	}

      costate

      {

      	waitfor (IntervalMs (2000));

         m2++;

   	}

	}

}

Le code AJAX a l'air de fonctionner pourtant. Si j'arrive à avoir la valeur de t1 dans la page tamb.zhtml en passant par l'index et co. C'est juste qu'elle ne se s'incremante pas de facon dynamique.

Tillertan

16 avril 2009 à 15:46:35

Maintenant je ne peux plus t'aider. Tout le code est bon. Ce qu'il faut c'est que la page tamb.zhtml affiche la valeur... Et là, c'est au dessus de mes compétences, comme resti' je ne connais pas du tout webrabbit..

restimel

16 avril 2009 à 16:23:59

Dans ta page tamb.zhtml t'es obligé de mettre tout ce qu'il y a autour de <?z print($t1) ?>?
Car là le code de Tiller récupère directement la valeur sur la page tamb

var tambour = xhr.responseText;

Si tu es obligé de garder tout ça il faut traiter le retour (la variable tambour) pour extraire le résultat (la valeur de t1).

Déjà tu peux ajouter un alert(tambour); (qu'il faudra enlever dans la version finale) pour t'assurer que le code javascript lit bien la page tamb.zhtml

Coem

16 avril 2009 à 17:30:56

Excusez-moi pour la petite heure d’absence…

Je corrige, en laissant juste <?z print($t1) ?> dans ma page /tamb.zhtml, ca fonctionne.
Je m’explique, je charge le programme, quand j’arrive sur la page /visualisation.zhtml toutes mes valeurs de t1 à m2 sont figés à moins d’actualiser la page, comme d’habitude.

Quand je vais sur la page /tamb.zhtml, j’ai juste la valeur de t1 qui apparait, donc déjà cette page fonctionne.
Autre chose, où est sensé s’écrire la valeur qui se rafraichit ?

On tient le bon bout je le sens

restimel

16 avril 2009 à 18:24:50

J'ai ajouté quelques commentaires pour que tu comprennes mieux

Citation : Coem

...
	var tambour = xhr.responseText; //récupère le contenu de la page demandée (donc ici c'est tamb.zhtml)

	var text, date = new Date(), secondes = date.getSeconds();	
	{...}
	text = secondes + ':' + tambour + ':' + secondes; //prépare le message à afficher (en sachant que tambour devrait avoir la valeur de t1)
	document.getElementById('affiche_date').innerHTML = text; // affiche le message dans l'élément affiche_date
	setTimeout(rafraichir, 500); // (re)lance la fonction rafraichir dans 500 ms
...

En sachant que l'élément 'affiche_date' a été défini là:

document.getElementsByTagName('body')[0].innerHTML += '<p id="affiche_date"></p>';

C'est à dire qu'il a été ajouté à la fin de la page

Donc en bas de ta page il doit y avoir une ligne du genre

2:1200:2

si secondes vaut 2 et t1 vaut 1200

S'il n'y a pas de lignes c'est qu'il y a sans doute eut une erreur. Tu peux alors regarder dans la console d'erreur si ton navigateur en a une sinon tu peux alors ajouter des alert() à quelques endroits du script pour détecter où le problème se situe.

Coem

28 avril 2009 à 11:29:40

Âpres quelques recherches et différents tests, je viens de comprendre que le php n’est pas compatible avec mon serveur WEB…

Les scripts ci-dessus fonctionnent bien sous WAMP par exemple, mais pas sous celui de mon projet.

J’ai pu trouver une pseudo solution pour le moment avec cette balise :

<body onLoad=window.setTimeout("location.href='/admin/index.zhtml'",1000)>

Ça rafraichit la page toute les secondes. Le problème de cette méthode et qu’il faut parfois cliquer plusieurs fois sur les liens des autres pages avant d’y être déplacer, mais bon…

Si quelqu’un à une solution miracle au problème ! (Et simple dans la foulée :lol:

)

Merci encore une fois pour toute l’aide…

Tillertan

28 avril 2009 à 17:47:30

Bah sinon au pire, tu peux faire une iframe, et tu rafraichis la frame et non la page..