Récupération de la valeur de plusieurs variables binaires pour l'affichage d'image

Version imprimable

Bonsoir,

Je suis automaticien. Je dois réaliser pour un client un serveur web qui sera hébergé par un automate SIEMENS (S7-1200 pour les curieux). Ce serveur web ne peut être fait qu'avec du HTML, JavaScript et CSS.
Il faut avouer que je ne connais pas grand chose dans ces langages...

J'ai réussi à réaliser mon serveur web mais j'ai un problème avec le rafraîchissement de mes pages.
En effet, actuellement je rafraîchis mes pages toutes les 10 secondes afin de réactualiser les données affichées. Comme je l'ai mis dans le titre, je récupère les valeurs de variables binaires sur mon automate (avec une fonction que je lance au chargement de la page) et je les affecte à des variables JavaScript avec : var variable = ':="Ma_Variable_automate":'. Puis je teste la variable dans un script et, en fonction de son état, j'affiche un voyant rouge ou vert.
J'aimerais rafraîchir mes pages, non pas périodiquement, mais sur changement d'état d'une des variables.
J'ai trouvé, via l'aide SIEMENS, un exemple permettant de faire cela pour l'affichage des valeurs (0 ou 1) mais je n'arrive pas à récupérer ces valeurs pour effectuer mes tests et modifier mes images.

Voilà le code donné par SIEMENS pour l'affichage des valeurs (je n'ai pas inséré les lignes de code pour le test et l'affichage des images) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
		<title>Web page demo - Automatic update - Main page</title>
	</head>
	<body>
 
		Value of first variable (in DIV-element): <div id="VarId1">VALUE1</div>
		<br/>
		Value of second variable (in SPAN-element): <span id="VarId2">VALUE2</span>
		<br/><br/>
		Value of third variable (in TD-element of a table): <table border="1"><tr><td id="VarId3">VALUE3</td></tr></table>
 
		<iframe src="Update_Page.html" style="display:none;" />
 
	</body>
</html>

Et le code de la page JavaScript qui actualise les valeurs en tache de fond :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
		<title>Web page demo - Automatic update - Update page</title>
		<script type="text/javascript">
 
		 /* String.trim() is not supported by every browser - thus add this functionality is necessary */
		 if (!String.trim)
		 {
			String.prototype.trim = function () { return this.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, ''); };
		 }
 
		 /* Main function for calling the subroutines */
		 function mainJavaScript()
		 {
			updateSingleVariablesTable();
			updateFrame();
		 }
 
		 /* Function for updating the 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;
			}
		 }
 
		 /* Function for updating the web page */
		 function updateFrame()
		 {
			window.setTimeout(function(){location.reload()}, document.getElementById("updateInterval").innerHTML.trim());
		 }
		</script>
 
	</head>
	<body onload="mainJavaScript()">
 
		<table border="1">
			<tr><td>Update time in milliseconds</td></tr>
			<tr><td id="updateInterval">20000</td></tr>
		</table>
		<br/>
 
		<table id="singleVariablesTable" border="1">
			<tr><td>AWP-Command to read variable</td><td>ID of the element of the main page which should be updated</td></tr>
			<tr><td>:="VarName1":</td><td>VarId1</td></tr>
			<tr><td>:="VarName2":</td><td>VarId2</td></tr>
			<tr><td>:="VarName3":</td><td>VarId3</td></tr>
		</table>
 
	</body>
</html>

J'aimerai récupérer la valeur retournée par les lignes de code telles que: <div id="VarId1">VALUE1</div> pour pouvoir faire mes tests.

Est-ce possible ? Si oui comment ?

Par avance merci !

PS : voici un exemple de ma programmation avec réactualisation périodique (il est fort probable que vous trouviez des erreurs) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
 
<html>
	<head>
		<meta http-equiv="refresh" content="10"/>
	</head>
 
	<body bgColor=white onload="affiche()"> <!-- appelle de la fonction "affiche" au chargement de la page 'onload="affiche()"' -->
 
		<!--  Recuperation des variables SIEMENS-->
		<!-- Boucle pour inserer les voyants dans un tableau -->
		<SCRIPT>
			var CmtGF1 = ':="DB".CmtGF1.Marche';
			var RMCondenseurGF1 = ':="DB".GF1.RM_Condenseur:';
			var RetMarcheGF1 = ':="DB".GF1.RetMarcheGf:';
			var DefCondGF1 = ':="DB".GF1.Def_Condenseur:';
			var DefGF1 = ':="DB".GF1.DefSynthese:';
			var ManqueEauGF1 = ':="DB".PpeGF1.DefautDebitEau:';
			var RetMarchePpe1 = ':="DB".PpeGF1.RetMarche:';
			var DefautPpe1 = ':="DB".PpeGF1.GTC_Defaut:';
 
			for (i=0;i<2;i++)
				{
				var TabVoy=new Array("Vrouge.PNG","VVert.PNG","VGris.PNG");
				}
		</script>
 
		<!-- Fonction pour charger le bon voyant dans "imagesN.src" en fonction de l'etat du bit -->
		<SCRIPT>
			function affiche()
				{
				if (CmtGF1==0) {document.getElementById("images1").src=TabVoy[2]}
					else {document.getElementById("images1").src=TabVoy[1]};
				if (RMCondenseurGF1==0) {document.getElementById("images2").src=TabVoy[2]}
					else {document.getElementById("images2").src=TabVoy[1]};
				if (RetMarcheGF1==0) {document.getElementById("images3").src=TabVoy[2]}
					else {document.getElementById("images3").src=TabVoy[1]};
				if (DefCondGF1==1) {document.getElementById("images4").src=TabVoy[0]}
					else {document.getElementById("images4").src=TabVoy[2]};
				if (DefGF1==1) {document.getElementById("images5").src=TabVoy[0]}
					else {document.getElementById("images5").src=TabVoy[2]};
				if (ManqueEauGF1==1) {document.getElementById("images6").src=TabVoy[0]}
					else {document.getElementById("images6").src=TabVoy[2]};
				if (RetMarchePpe1==0) {document.getElementById("images7").src=TabVoy[2]}
					else {document.getElementById("images7").src=TabVoy[1]};
				if (DefautPpe1==1) {document.getElementById("images8").src=TabVoy[0]}
					else {document.getElementById("images8").src=TabVoy[2]};
				}
		</script>
 
		<font face="arial" color="2C3E50">
 
			<H1 align=center><i> SYNTHESE GROUPE FROID 1 </i></H1>
			<br><br>
			<!-- Mise en forme dans un tableau avec insertion des voyants -->
			<table width=100% style="font-size: 21px">
				<TR>
					<TD width=32%><ul><li> Commutateur Groupe Froid 1 </li></ul></TD>
					<TD> <div id='dimage1'><img id='images1' width="40" height="40"></div> </TD>
					<TD width=32%><ul><li> Retour de marche Condenseur 1 </li></ul></TD>
					<TD> <div id='dimage2'><img id='images2' width="40" height="40"></div> </TD>
				</TR>
				<TR>
					<TD width=32%><ul><li> Retour de marche Groupe Froid 1 </li></ul></TD>
					<TD> <div id='dimage3'><img id='images3' width="40" height="40"></div> </TD>
					<TD width=32%><ul><li> Retour de marche Pompe de charge 1 </li></ul></TD>
					<TD> <div id='dimage7'><img id='images7' width="40" height="40"></div> </TD>
				</TR>
				<TR>
					<TD width=32%><ul><li> Defaut Groupe Froid 1 </li></ul></TD>
					<TD> <div id='dimage5'><img id='images5' width="40" height="40"></div> </TD>
					<TD width=32%><ul><li> Defaut Condenseur 1 </li></ul></TD>
					<TD> <div id='dimage4'><img id='images4' width="40" height="40"></div> </TD>
				</TR>
				<TR>
					<TD width=32%><ul><li> Defaut Debit Eau Groupe Froid 1 </li></ul></TD>
					<TD> <div id='dimage6'><img id='images6' width="40" height="40"></div> </TD>
					<TD width=32%><ul><li> Defaut Pompe de charge 1 </li></ul></TD>
					<TD> <div id='dimage8'><img id='images8' width="40" height="40"></div> </TD>
				</TR>
 
			</table>
 
		</font>
 
	</body>
 
</html>

Citation:

Envoyé par absolutej

J'aimerai rafraichir mes pages, non pas périodiquement, mais sur changement d'état d'une des variables

Ce n'est pas ce que fait le code de Update_page.html, cette page qui est chargée dans une iframe lance un rafraichissement toutes les 20 secondes. Pas au changement d'état des variables. A chaque rechargement elle lit les valeurs et les id puis les met à jour dans le document de la fenêtre parente (celle qui contient le iframe).

Dans la page parente, tu peux récupérer le contenu des éléments comme <div id="VarId1">VALUE1</div> avec var variable1 = document.getElementById("VarId1").innerHTML; .

Mais tu ne sauras pas quand les variables seront mises à jour. Pour ça il faudrait modifier le code de Update_page.html de façon à ce qu'elle appelle une fonction définie dans la fenêtre parente. A partir de là, tu pourras comparer les anciennes valeurs aux nouvelles et réagir s'il y a eu changement.

Pour la page de test

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
        <title>Web page demo - Automatic update - Main page</title>
        <script>
            // On crée les variables comme propriétés d'un objet siemens
            var siemens = {
                "VarId1":0,
                "VarId2":0,
                "VarId3":0
            };
            
            function updater_callback ( id, value ) {
                if ( ! siemens.hasOwnProperty(id) ) {
                    alert("Reçu de 'Updater.html' un identifiant inconnu : '"+id+"' avec la valeur : '"+value+"'");
                    return;
                }
                
                if ( siemens[id] != value ) {
                    siemens[id] = value;
                    // La valeur a changé
                    // faire qque chose
                    // par exemple, refleter les valeurs dans la page :
                    // document.getElementById(id).innerHTML = value;
                }
            }
        </script>
    </head>
    <body>
 
        Value of first variable (in DIV-element): <div id="VarId1">VALUE1</div>
        <br/>
        Value of second variable (in SPAN-element): <span id="VarId2">VALUE2</span>
        <br/><br/>
        Value of third variable (in TD-element of a table): <table border="1"><tr><td id="VarId3">VALUE3</td></tr></table>
 
        <iframe src="Updater.html" style="display:none;" />
 
    </body>
</html>

Pour la page de mise à jour Update_page.html, renommée pour l'occasion en Updater.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
        <title>Web page demo - Automatic update - Update page</title>
        <script type="text/javascript">
            /* String.trim() is not supported by every browser - thus add this functionality is necessary */
            if (!String.trim)
            {
                String.prototype.trim = function () { return this.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, ''); };
            }

            /* Main function for calling the subroutines */
            function mainJavaScript()
            {
                updateSingleVariablesTable();
                updateFrame();
            }

            /* Function for updating the 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();
                    if ( parent.updater_callback )
                      parent.updater_callback(tagId,tagValue);
                  else
                      parent.document.getElementById(tagId).innerHTML = tagValue;
                }
            }

            /* Function for updating the web page */
            function updateFrame()
            {
                window.setTimeout(function(){location.reload()}, document.getElementById("updateInterval").innerHTML.trim());
            }
        </script>
 
    </head>
    <body onload="mainJavaScript()">
 
        <table border="1">
            <tr><td>Update time in milliseconds</td></tr>
            <tr><td id="updateInterval">20000</td></tr>
        </table>
        <br/>
 
        <table id="singleVariablesTable" border="1">
            <tr><td>AWP-Command to read variable</td><td>ID of the element of the main page which should be updated</td></tr>
            <tr><td>:="VarName1":</td><td>VarId1</td></tr>
            <tr><td>:="VarName2":</td><td>VarId2</td></tr>
            <tr><td>:="VarName3":</td><td>VarId3</td></tr>
        </table>
 
    </body>
</html>

Les modifications sont en gras et le lien entre les deux pages en bleu. Le code HTML est à nettoyer, mais c'est le principe.

27/01/2015, 09h11
absolutej

Merci je vais modifier et tester dès que possible!