18041 sujets

Questions générales et questions de débutants

[Résolu] [HTML] Association variable dans un nom de fichier d'image

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)
Merci Mathieuu, tu n'as pas l'impression de comprendre, tu comprends très bien le problème.
Ta solution est ce que je cherche à faire (sans succès car débutant) et ça se lit et comprends facilement dans ton "script".
Bon, pour tester il faudrait que je mette ton morceau de code dans le iframe qui tourne en arrière plan et que je duplique pour les différentes variables booléens de mon tableau. Arrête moi si je raconte des conn.....s !

Aprés dans le HTML (index) comment je retrouve le chemin de chaque variable ?

J'ai l'endroit ou ça doit s'afficher qui est à l'heure actuel:
<td align="center"> <img id="image_status" style="height: 55px; width: 55px" src="Images\Status0:=V5:.png"/> <cr> </td>

ou alors il faut peut-être mettre à chaque affichage ton test en JavaScript avant d'afficher le bon voyant !?

Ca y est, j'ai le cerveau qui fume
Modifié par Bebeul (07 Dec 2021 - 16:35)
Salut,

J'essaie de reprendre étape par étape.

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

Tu utilises un :=V5: qui n'a pas l'air d'exister / s'actualiser. Dans ton tableau tu t’arrêtes à V4 il n'y a pas de V5 , et probablement que ce n'est pas :=V5: mais un autre nom que tu utiliseras 
<tr><td>:="ValPosition":</td> <td>V4</td> </tr>
<tr><td>:="VoyOuvP":</td> <td>VOuvP</td> </tr>


Je suppose donc que tu dois rajouter dans ton tableau une ligne pour V5 avec le nom de variable de siemens que tu veux que je ne connais pas et que j'ai nommé AREMPLACER : 
<tr><td>:="ValPosition":</td> <td>V4</td> </tr>
<tr><td>:="AREMPLACER":</td> <td>V5</td> </tr>	
<tr><td>:="VoyOuvP":</td> <td>VOuvP</td> </tr>


Une fois que l'on a bien cette valeur dans notre tableau qui va changer, on peut modifier le bout de javascript pour ajouter le code va bien pour récupérer cette valeur puis changer ton image.


	 /* Fonction de mise à jour des variables */
		 function updateSingleVariablesTable()
		 {
			var table = document.getElementById("singleVariablesTable");
//ici j'ai mis un i = 0 au lieu de 1, je suppose que tu loupais le 1er element du tableau et qu'il n'était jamais mis à jour
			for(i = 0; i < table.rows.length; i++) 
			{
//ici on ne peut plus se contenter de remplir le innerHTML vu que tu veux modifier la source d'une image
//Du coup on ajoute un test, si i vaut 4 (=> la 5e ligne du tableau donc), on ne change pas le innerHTML mais le src
				if(i==4)
				{
				    if(table.rows[i].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" ;
				    }
				}
				else{
				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;
				}
			}
		 }


Et du coup je suppose qu'il faudrait une 3e image pour dire que c'est undefined au départ et que ce soit bien mis à jour grâce au script : 
<td align="center"> <img id="image_status" style="height: 55px; width: 55px" src="Images\StatusUndefined.png"/> <cr> </td>
Salut Bonjour Mathieuu,
Effectivement, je t'ai un peu perdu avec mes variables qui changent de nom dans les différents posts.
VOuvP et V5 sont les mêmes, j'ai juste fait des essais avec différents noms pour voir si ça pouvait marcher.

Je comprends de mieux en mieux ton approche du problème, la question que je me pose encore c'est que le changement du innerHTML par le src doit se faire de la 5eme variable à la fin du tableau. Car j'ai les 4 premières qui sont des donnés numériques (int) et le reste du booléen (0 ou 1)
Ces variables booléennes ont le même fichier d'affichage qui est ce voyant mais pas la même variable.

Imagine un pupitre de commande en tôle avec 11 voyants, qui ont même référence d'achat donc identiques et qui sont allumés par un fil différent à chaque.

Pour la troisième image, j'ai déjà prévu pour mes tests un voyant marqué "PAS BON"
upload/1639035731-83895-status0.png
Modifié par Bebeul (09 Dec 2021 - 08:42)
Ce n'est pas mon approche du problème, c'est la tienne que j'essaye de comprendre et de faire fonctionner ^^ (moi de base les 3 pauvres lignes de codes que je proposais, je serais parti dans l'autre sens avec le javascript du coté de la page parent plutôt que de la page enfant)

Du coup pour l'explication :
Ton code au départ, il change le "innerHTML", ce qui revient à changer "l'interieur" d'une balise (par exemple un p qui affiche un texte , le texte est mis à l’intérieur de la balise p , après <p> et avant </p> ), mais cela ne s'applique pas aux images.
Pour les images ce qui s'affiche est lié à l'attribut src et donc pour changer ce qui s'affiche, il faut changer le src (ce que je fais dans mon code.)

Si c'est le cas pour toutes les valeurs suivantes, il va falloir remplacer le i==4 par un i<=4 , puis dans la suite il va falloir trouver un système intelligent pour que l'id "image_status" que j'avais mis en dur change de variable en variable. Le plus simple ça doit être d'utiliser directement la variable que tu mets dans ton tableau (la colonne de droite), du coup on devrait obtenir un truc dans ce genre la dans la page qui contient tes images :


<td align="center"> <img id="VOuvP" style="height: 55px; width: 55px" src="Images\StatusUndefined.png"/> <cr> </td>
<td align="center"> <img id="VoyAtP" style="height: 55px; width: 55px" src="Images\StatusUndefined.png"/> <cr> </td>
<td align="center"> <img id="VoyFerP" style="height: 55px; width: 55px" src="Images\StatusUndefined.png"/> <cr> </td>


Et cela devrait donc transformer le javascript pour obtenir un truc du genre : 

	 /* Fonction de mise à jour des variables */
		 function updateSingleVariablesTable()
		 {
			var table = document.getElementById("singleVariablesTable");
//ici j'ai mis un i = 0 au lieu de 1, je suppose que tu loupais le 1er element du tableau et qu'il n'était jamais mis à jour
			for(i = 0; i < table.rows.length; i++) 
			{
//ici on ne peut plus se contenter de remplir le innerHTML vu que tu veux modifier la source d'une image
//Du coup on ajoute un test, si i est superieur à 4 (=> après la 5e ligne du tableau donc), on ne change pas le innerHTML mais le src
				if(i>=4)
				{
				    if(table.rows[i].getElementsByTagName("td")[0].innerHTML.trim()=="0"){
               				    parent.document.getElementById(table.rows[i].getElementsByTagName("td")[1].innerHTML.trim()).src = "Images\Status00.png" ;
				    }
				    else{
				                   parent.document.getElementById(table.rows[i].getElementsByTagName("td")[0].innerHTML.trim()).src = "Images\Status01.png" ;
				    }
				}
				else{
				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;
				}
			}
		 }
OK, Tu avances à grand pas !
Car moi je suis dans le sac à dos et j'essaye de comprendre.
Ça à l'air très bien, je vais tester ça dés que possible et te tiens informé.
Encore MERCI
Salut bonjour et meilleurs vœux,
J'ai enfin récupéré l'automate pour continuer mes essais.

j'ai donc, pour commencer, changé le 0 par 1 dans 
for(i = 0; i < table.rows.length; i++)

et là ça fait planter le script quelque part car il ne se rafraîchi plus tout seul => donc j'ai remis 1

Ensuite j'ai essayé d'ajouter
if(i>=4)
				{
				    if(table.rows[i].getElementsByTagName("td")[0].innerHTML.trim()=="0"){
               				    parent.document.getElementById(table.rows[i].getElementsByTagName("td")[1].innerHTML.trim()).src = "Images\Status00.png" ;
				    }
				    else{
				                   parent.document.getElementById(table.rows[i].getElementsByTagName("td")[0].innerHTML.trim()).src = "Images\Status01.png" ;
				    }
				}
				else{

et là ça fait pareil, il y a quelque chose qui bloque la rotation du i et je n'arrive pas à trouver pourquoi !
Et là aussi ça ne se rafraîchi plus tout seul
Modifié par Bebeul (03 Jan 2022 - 16:02)
En faite, ça plante en i=6, c'est la première fois que l'on a 1 en booléen dans le retour de valeur.
ça met comme message d'erreur :
"Uncaught TypeError: Cannot set properties of null (setting 'src')"

Pour autant le premier voyant qui correspond au i=5 ne prend pas le bon fichier, il affiche mon voyant "pas bon" (Images\StatusUndefined.png)
C'est BONNNNNN ça fonctionne !
Après avoir trouvé un outil de débogage ( celui de Chrome , Ctrl + Maj + I ) j'ai pu faire du pas à pas avec les variables qui m’intéressaient.
Il n'y avait qu'un 0 à la place du 1 (pour aller piocher dans la bonne colonne) dans:
parent.document.getElementById(table.rows[i].getElementsByTagName("td")[1].innerHTML.trim()).src = "Images\Status00.png" ;


Et le lien vers Images\.... qui ne marchait pas ==> donc j'ai changé les fichiers de place et supprimé ce lien.

Par contre, cet outil de débogage m'a aussi permis de voir les vitesses de rafraîchissement.

Sans rien faire 230ms à chaque refresh, mais dés qu'on clique sur un bouton, le changement d'image prend entre 1,5 et 2s.
Le changement de variable numérique passe comme une lettre à la boite sans augmenter le temps entre deux cycles.
Je me demande donc si j'ai choisi la bonne solution pour représenter les changements d'état avec mes images qui ne sont pourtant pas trop lourdes mais qui ralentissent beaucoup.

Ma seconde idée serait de changer la couleur de fond du bouton à cliquer, mais là c'est une autre histoire !
Il y a certainement un façon simple de le faire et je pense que je vais vous demander encore un peu d'aide pour mon petit projet !

Merci encore à Mathieuu pour sa précieuse aide et persévérance jusqu’à présent.
Modifié par Bebeul (02 Feb 2022 - 07:40)
Meilleure solution
Sujet clos
Aller à