Bonjour, débutant en HTML, je sollicite votre aide.

Je modifie un programme automate S71200 pour pouvoir consulter une page HTML à distance.

J'ai fait la mise en page, et l'affichage de différents boutons, voyants et valeurs numérique.

Pour rafraîchir ces valeurs, je rafraîchissais la page complètement toute les 5 secondes.

Mais gros inconvénient, suivant la bande passante, c'est pas fini de charger que ça recommence. D’ou un affichage pas terrible du tout !

En cherchant sur le net, j'ai vu que l'on pouvait appeler un autre fichier pour actualiser uniquement les variables

<iframe src="Update_Page.html" style="display:false;" />


Dans ce fichier Update_Page.html je rafraîchi les données et les mets dans des variables que j'ai renommé.

Dans mon premier fichier (celui qui s'affiche pour la consultation) les valeurs numériques et binaires sont bien reprises et affichées correctement

<td align="center"; style="font-weight:bold;  font-size:20px;"><div id=V1>VALUE1</div></td>


mais pour afficher des voyants (vert et rouge) je concatène un début de nom de fichier Status0 avec l'état de variables V5, V6...etc (qui sont a 0 ou 1)

ce qui me donne le nom d'un de deux fichiers image qui font voyant vert (Status01) et rouge (Status00)

Cette méthode marchait bien quand je rafraîchissait la page complète, mais plus maintenant que je passe par Update_Page.html

j'ai écrit:

<td align="center"> <img style="height: 55px; width: 55px" src="Images\Status0:=V5:.png"/> <cr> </td>


Avec quoi peut-on remplacer ce V5 pour que le voyant change d'état en même temps que la variable ?
Faute de mieux et d'aide, je crois que ça va se termine par des chiffres en jaune qui changent en même temps que la variable de l'automate. L'affichage d'un voyant n'a pas l'air possible !

upload/1638183047-83895-sanstitre.png
Modifié par Bebeul (29 Nov 2021 - 11:51)
Salut,

Je ne sais pas ce que c'est un "automate S71200" donc c'est sans doute lié, mais j'ai l'impression qu'il nous manque des informations car je crois que ce n'est pas réalisable juste avec ces infos Smiley ohwell

A ma connaissance, le concept de "variable" n'existe pas en html , du coup je ne comprends pas comment tu peux modifier des informations en changeant un iframe (je suppose que V1 et VALUE1 changent dans ta ligne d'exemple ?)

Logiquement il doit y avoir un langage de programmation quelque part qui possède ce concept de variable pour que tu puisses bosser (de base je verrais bien du javascript, mais c'est peut être autre chose ?)

Du coup en solution à base de javascript il doit te falloir faire des bouts de codes :

//Il faudra sans doute mettre ce qui suit dans une boucle avec du setTimeout pour faire ça à intervalle régulier. 
//une variable pour récupéré ton iframe 
var iframe = document.getElementById("TON_ID_IFRAME");
//une fonction pour recharger l'iframe, solution prise au pif  ici :  https://stackoverflow.com/questions/2064850/how-to-refresh-an-iframe-using-javascript  
iframe.contentWindow.location.reload(); 
//il te faudra un systeme pour prendre les nouvelels valeurs dans ton iframe 
iframe.contentWindow.document.querySelectorAll(); // ou getElementById() , c'est des exemples
//puis sur le même principe mettre à jour la source de ton image ensuite. 
Merci pour cette première réponse.
Les automates programmables (Siemens et les autres) S7 1200 ont une page Web consultable en ouvrant l'IP de l'automate sur un navigateur.
upload/1638191813-83895-s71200.jpg

Cette page est programmable pour qui sait, Smiley fou pour avoir des informations sur l'état des entrées/sorties ou autre de cette automate. Ou commander quelque chose à distance, dans mon cas un moteur électrique.

Un exemple simple est disponible sur le site siemens et voilà la documentation
https://support.industry.siemens.com/cs/attachments/58862931/58862931_S7-1200_Webserver_DOKU_v11_en.pdf

j'essaye d'adapter cette exemple à mon petit projet pour ne plus avoir ce rafraîchissement complet qui est "fin moche".

Ce tuto, explique mieux que moi le processus.
https://www.dmcinfo.com/latest-thinking/blog/id/8567/siemens-s7-1200-web-server-tutorial--from-getting-started-to-html5-user-defined-pages
En lisant rapidement ton tuto ils n'ont pas l'air d'utiliser un iframe mais de faire du javascript (ce qui m'a l'air plus simple)

Du coup si j'ai bien compris :
- Tu as un truc qui ressemble à une base de données et qui doit pouvoir évoluer tout seul dans le temps : (lu dans cette partie la : Reading PLC Data )
- Tu as une notation bizarre pour pouvoir récupérer des informations de cette espece de base de données : :=Nom_Variable:
- Tu as besoin d'un fichier qui va contenir ta variable (et qui ne fait rien d'autre je crois)
- Tu as besoin dans ton fichier index d'un bout de javascript pour recuperer la valeur puis en fonction de cette valeur de faire evoluer la source de ton image.

Du coup en supposant que tu pars sur le même principe avec un fichier IOCounter.htm (il faudrait le renommer en IOStatus.htm je suppose) qui va contenir ta variable ( :=V5: si j'ai bien compris)

Pour ton image, je lui rajouterai un id pour te faciliter la tache du coté javascript

<td align="center"> <img id="image_status" style="height: 55px; width: 55px" src="Images\Status0:=V5:.png"/> <cr> </td>


Ensuite pour le coté javascript (j'ai gardé le même nom de fichier que dans son exemple), il faudrait voir exactement ce que cela retourne pour être sur mais je suppose que tu auras besoin d'un truc du genre :

    <script type="text/javascript">
        $(document).ready(function(){
            $.ajaxSetup({ cache: false });
        setInterval(function() {
            $.get("IOCounter.htm", function(result){
// alert(result);  //a decommenter pour voir exactement ce que cela retourne comme résultat
            if(result.trim=="0"){
               $('#image_status').src="Images\Status00.png" ;
            }
           else{
               $('#image_status').src="Images\Status01.png" ;
           }
 
            });
        },5000);
        });
    </script>

Je viens de voir ta réponse, l'idée à l'air très bonne. Mais débutant est le titre de cette rubrique de Forum !!
je te mets le code de mon fichier HTML qui tourne en arrière plan. Dis moi si ça t'inspire un peu plus.

<!DOCTYPE html PUBLIC ">
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
		<title>Automatic update page</title>
		<script type="text/javascript">
		 
		 /* String.trim() n'est pas pris en charge par tous les navigateurs - il est donc nécessaire d'ajouter cette fonctionnalité */
		 if (!String.trim)
		 {
			String.prototype.trim = function () { return this.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, ''); };
		 }
		 
		 /* Fonction principale pour appeler les sous-programmes */
		 function mainJavaScript()
		 {
			updateSingleVariablesTable();
			updateFrame();
		 }
			
		 /* Fonction de mise à jour des variables */
		 function updateSingleVariablesTable()
		 {
			var table = document.getElementById("singleVariablesTable");
			for(i = 1; i < table.rows.length; i++)
			{
				var tagValue = table.rows[i].getElementsByTagName("td")[0].innerHTML;
				var tagId = table.rows[i].getElementsByTagName("td")[1].innerHTML.trim();
				parent.document.getElementById(tagId).innerHTML = tagValue;
			}
		 }
		 
		 /* Fonction de mise à jour de la page Web */
		 function updateFrame()
		 {
			window.setTimeout(function(){location.reload()}, document.getElementById("updateInterval").innerHTML.trim());
		 }	
		</script>

	</head>
	<body onload="mainJavaScript()">

		<table border="1">		
				<tr><td>Rafraichissement en millisecondes</td></tr>
				<tr><td id="updateInterval">800</td></tr>
		</table>
					<br/>	
		<table id="singleVariablesTable" border="1">

				<tr><td>Valeurs</td><td>Variables</td></tr>

				<tr><td>:="ValPosition1":</td> <td>V1</td> </tr>
				<tr><td>:="ValPosition2":</td> <td>V2</td> </tr>
				<tr><td>:="ValPosition3":</td> <td>V3</td> </tr>
				<tr><td>:="ValPosition":</td> <td>V4</td> </tr>
				<tr><td>:="VoyOuvP":</td> <td>VOuvP</td> </tr>	
				<tr><td>:="VoyAtP":</td> <td>VAtP</td> </tr>
				<tr><td>:="VoyFerP":</td> <td>VFerP</td> </tr>
				<tr><td>:="VoyPos1":</td> <td>VPos1</td> </tr>
				<tr><td>:="VoyPos2":</td> <td>VPos2</td> </tr>
				<tr><td>:="VoyPos3":</td> <td>VPos3</td> </tr>
				<tr><td>:="VoyMonE":</td> <td>VMonE</td> </tr>
				<tr><td>:="VoyAtE":</td> <td>VAtE</td> </tr>
				<tr><td>:="VoyDesE":</td> <td>VDesE</td> </tr>
				<tr><td>:="VoyMonVL":</td> <td>VMonVL</td> </tr>
				<tr><td>:="VoyAtVL":</td> <td>VAtVL</td> </tr>
				<tr><td>:="VoyDesVL":</td> <td>VDesVL</td> </tr>								
		</table>
	</body>
</html>


Pour l'écriture de V5 que tu trouves bizarre, c'est l'écriture qu'il faut pour dialoguer avec l'automate (imposé Siemens !!!)
Modifié par Bebeul (03 Dec 2021 - 07:47)
De ce que j'ai l'impression de comprendre, tu fais pas mal de choses à l'inverse de ce que je ferais Smiley sweatdrop

Si je comprends bien, ça c'est le code de ton iframe, et c'est lui qui va mettre à jour la page dans laquelle il est inclus.

Du coup il faudrait sans doute rajouter dans la table des tr td une ligne avec le :=V5:

Et ensuite pour ton image il doit te falloir faire quelque chose du genre (après ta boucle for) :


//ici j'ai mis rows[4] en supposant que cela sera après la ligne v4 mais il faut adapter au bon numero de ligne) 
            if(table.rows[4].getElementsByTagName("td")[0].innerHTML.trim()=="0"){
               parent.document.getElementById("image_status").src = "Images\Status00.png" ;
            }
           else{
               parent.document.getElementById("image_status").src = "Images\Status01.png" ;
           }


Et logiquement on doit pouvoir se passer du if pour simplifier si c'est bien 0 ou 1 :
let valeur_v5 = table.rows[4].getElementsByTagName("td")[0].innerHTML.trim();
parent.document.getElementById("image_status").src = "Images\Status0"+valeur_v5+".png" ;


(Je n'ai rien testé donc je ne sais pas si cela fonctionnera directement mais cela ne doit pas être bien loin je suppose)