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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 :
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.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Partager