Sonstiges WEB2PLC Seitenteile neu Laden

Hier siehst du das einmal.
Ich lasse mir die Variablen anzeigen, wobei die ersten 4 zum Anfahren 1 gehören und die anderen 4 zum Abfahren2.e
Die Variablen werden mir auch sofort auf der Seite angezeigt (dient nur der Kontrolle die kommen hinterher weg).

Aber die beiden Felder also An und Abfahren kommen erst, wenn ich noch einmal händisch die Seite neu Lade.
 

Anhänge

  • 20150116_063734.jpg
    20150116_063734.jpg
    604,8 KB · Aufrufe: 14
Das ganze Frage ich dann halt durch wie gesagt eine if abfrage der Variable ab. Aber scheinbar mach ich da noch einen Fehler da ich eben erst f5 drücken muss damit mir die Felder angezeigt werden.


Code:
     var spsNZ14 = ':="NZ".NZ[1].pressed:';          
     var sppNZ14 = '1';
     
     if (spsNZ14 == sppNZ14 )              
     {
      parent.document.getElementById("Text1Bild").innerHTML='<img src="pressed.png" width="73" height="78">';
      parent.document.getElementById("Icon1").innerHTML='<img src="Wartend.png" width="73" height="78">';
      parent.document.getElementById("Text1Transparent").innerHTML='<input type=image src="transpixel.png" width="73" height="78" value="Start">';
     }
 
Und wie wird der Code geladen? Wenn nicht per Ajax, dann ist klar dass du erst die Seite manuell aktualisieren musst.

Du kannst das mit meinem Beispielcode aus #14 kombinieren. Du packst das dann in die "xmlhttp.onreadystatechange = function()", musst natürlich etwas anpassen.
Dann machst du alles in Javascript ohne die AWP-Notation, weil die Antwort von der SPS in dem Fall schon Javascript (JSON) ist.
 
Zuviel Werbung?
-> Hier kostenlos registrieren
Nochmal etwas gekürzt so wie ich das gemacht habe .



Code:
function showDataTable()
{
 if (window.XMLHttpRequest) 
 {
  // code fuer IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
 } 
 else 
 {
  // code fuer IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }

 
 
 
 
 
 xmlhttp.open("GET", "ajax-daten.html", true);
 xmlhttp.onreadystatechange = function()
  {
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
  {
   document.getElementById("OutputArea").innerHTML = xmlhttp.responseText;
   // Refresh Timeout zum Neuladen der Daten setzen
   setTimeout("refreshOutputArea()", 1000);
   
   
     var spsNZ11 = ':="NZ".NZ[1].Enabled:';             // Nebenzeit ist ausgeblendet
     
     if (spsNZ11 == '1' )                //vergleicht einen Variablenwert der SPS var sps  mit dem Wert var spp = 1 um dann ein Bild zu wechseln oder nicht 
     { 
      document.getElementById("box1").innerHTML= ''; 
      document.getElementById("Text1").innerHTML=  'Anfahren1';
      document.getElementById("Text1Bild").innerHTML='<img src="up3.png" width="73" height="78">';
      document.getElementById("Icon1").innerHTML='<img src="Wartend.png" width="73" height="78">';
      document.getElementById("Text1Transparent").innerHTML='<img src="transpixel.png" width="73" height="78" value="Start">'; 
     } 
     else
     { 
      document.getElementById("Text1").innerHTML= '';
      document.getElementById("box1").innerHTML= '';
      document.getElementById("Text1Bild").innerHTML= '';
      document.getElementById("Icon1").innerHTML= '';
      document.getElementById("Text1Transparent").innerHTML= '';
     }
     var spsNZ13 = ':="NZ".NZ[1].Aktiv_Display:';           //Nebenzeit wird als aktiv angezeigt. Kreis mit Punkt wird angezeigt
     var sppNZ13 = '1';
     
     if (spsNZ13 == sppNZ13 )               //vergleicht einen Variablenwert der SPS var sps  mit dem Wert var spp = 1 um dann ein Bild zu wechseln oder nicht 
     {
      document.getElementById("Text1Bild").innerHTML='<img src="pressed.png" width="73" height="78">';
      document.getElementById("Icon1").innerHTML='<img src="Aktiviert.png" width="73" height="78">';
      document.getElementById("Text1Transparent").innerHTML='<input type=image src="transpixel.png" width="73" height="78" value="Start">';
     }  
    
     var spsNZ14 = ':="NZ".NZ[1].pressed:';            //Taste wird als gedrückt angezeigt 3D-Effekt aktiv
     var sppNZ14 = '1';
     
     if (spsNZ14 == sppNZ14 )               //vergleicht einen Variablenwert der SPS var sps  mit dem Wert var spp = 1 um dann ein Bild zu wechseln oder nicht 
     {
      document.getElementById("Text1Bild").innerHTML='<img src="pressed.png" width="73" height="78">';
      document.getElementById("Icon1").innerHTML='<img src="Wartend.png" width="73" height="78">';
      document.getElementById("Text1Transparent").innerHTML='<img src="transpixel.png" width="73" height="78" value="Start">';
     }
    
    
  }
 }
 xmlhttp.send(null);
}
function refreshOutputArea()
{
 showDataTable();
}
window.onload = function()
{
 refreshOutputArea();
}
 
</script> 

 </head>
<body>  
<div id="OutputArea">  

</div>
 
also ich habe es direkt unter/ in die refresh funktion mir rein gesetzt da ich mir dann dachte so aktualisiert er das jede sekunde mit.
Und wenn sich halt eine Variable verändert hat wird mir das direkt mit angezeigt.
 
also ich habe es direkt unter/ in die refresh funktion mir rein gesetzt da ich mir dann dachte so aktualisiert er das jede sekunde mit.
Und wenn sich halt eine Variable verändert hat wird mir das direkt mit angezeigt.
 
Zuviel Werbung?
-> Hier kostenlos registrieren
Nein, so wie du es da gemacht hast funktioniert das nicht.
Der Teil mit "var spsNZ11 = ':="NZ".NZ[1].Enabled:';" wird bei dir eben nicht dynamisch nachgeladen, sondern nur wenn die Basis-Seite geladen wird.

Ich guck mal ob ich noch ein einfaches Beispiel hinbekomme bei dem ein Bild ausgetauscht wird.
 
Das wäre super genial von dir.
Ich werde das ganze dann morgen in ruhe einmal durch gehen und versuchen zu verstehen.
Und das alles dann in ein ganzes zusammen zu setzen. Dann bin ich schon mal 1000 Schritte weiter die ich alleine niemals hinbekommen hätte .
 
Ein kleines Beispiel mit Buttons:
Ich habe in der SPS drei Merkervariablen vom Typ Bool mit Namen Taste1, Taste2 und Taste3, die über die Webseite geschaltet werden sollen.

Dazu eine button-data.json:
Code:
<!-- AWP_In_Variable Name='Taste1' -->
<!-- AWP_In_Variable Name='Taste2' -->
<!-- AWP_In_Variable Name='Taste3' -->

{
    "Taste1": :=Taste1:,
    "Taste2": :=Taste2:,
    "Taste3": :=Taste3:
}

Und die eigentliche Seite button.html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Testseite zur Datenaktualisierung mittels XML-HTTP Request</title>
<script type="text/javascript">
function updatePlcElements()
{
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "button-data.json", true);

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            var data = JSON.parse(xmlhttp.responseText);
            // CSS Klasse der Elemente ändern, und value setzen.
            document.getElementById("Taste1").className = "Button" + data.Taste1;
            document.getElementById("Taste1").value = data.Taste1;
            document.getElementById("Taste2").className = "Button" + data.Taste2;
            document.getElementById("Taste2").value = data.Taste2;
            document.getElementById("Taste3").className = "Button" + data.Taste3;
            document.getElementById("Taste3").value = data.Taste3;

            setTimeout("refreshOutputArea()", 2000);
        }
    }
    xmlhttp.send(null);
}

function toogleButtonBoolValue(input)
{
    var varname = input.id;
    var value = 0;
    // Wert invertieren
    if (input.value == 0) {
        value = 1;
    }
    
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("POST", "button-data.json", true);
    var postData = varname + "=" + value;
    xmlhttp.send(postData);
    refreshOutputArea();
}

function refreshOutputArea()
{
    updatePlcElements();
}

window.onload = function()
{
    refreshOutputArea();
}
</script>
<style type="text/css">
.Button0 { 
        height: 78px;
        width: 73px;
        background: url(up3.png);
        color: #FFFFFF;
        border: 1px solid #FFFFFF;
}
.Button1 { 
        height: 78px;
        width: 73px;
        background: url(pressed.png);
        color: #FFFFFF;
        border: 1px solid #FFFFFF;
}
</style> 
</head>
<body>
<h2>Testseite zur Datenaktualisierung mittels XML-HTTP Request</h2>
<div id="OutputArea">
<p>Taste1:
<input id="Taste1" type="button" class="Button0" value=0 onclick="toogleButtonBoolValue(this)" />
</p>
<p>Taste2:
<input id="Taste2" type="button" class="Button0" value=0 onclick="toogleButtonBoolValue(this)" />
</p>
<p>Taste3:
<input id="Taste3" type="button" class="Button0" value=0 onclick="toogleButtonBoolValue(this)" />
</p>
</div>
</body>
</html>

Das Umschalten der Bilder habe ich über eine entsprechende CSS-Klasse erledigt, die ich der Einfachheit halber Button0 und Button1 genannt habe. Die könntest du auch ButtonPressed und ButtonUnpressed benennen, dann müsstest du aber mit if-then zwischen diesen umschalten.

Wie ich gesehen habe hast du eine S7-300. Ich habe eine 1200, aber ich meine die unterscheiden sich nur in Nuancen in der AWP-Syntax bei Datenbausteinen. Darum habe ich Merker verwendet, da sollte die Syntax bei beiden Steuerungen identisch sein.
 
Zuviel Werbung?
-> Hier kostenlos registrieren
Guten Morgen,
ich habe nun deine Seiten einmal genommen und Merker mit den passenden Namen in der SPS erstellt.
Ich kann nun aber immer noch nicht wenn ich auf einen Button drücke, die Werte in der Steuerung setzten und das Bild wechseln lassen.
Also weder das Bilder ändern, noch die Werte in der SPS steuern funktioniert.

Ich habe noch eine 4 Tastenvariable erstellt und im Js und html code mit eingebunden diese sowie die anderen Variablen lasse ich mir zusätzlich zum Test noch einmal extra anzeigen, aber sie werden wenn ich in der SPS die Werte ändere nicht automatisch aktualisiert, sondern wieder erst wenn ich die Seite händisch neu lade.:confused:

Was mir aufgefallen ist du hast:

onclick="toogleButtonBoolValue(this)" />
geschrieben muss das nicht toggle heißen?
 

Anhänge

  • Bild sps.jpg
    Bild sps.jpg
    103,1 KB · Aufrufe: 43
Zuletzt bearbeitet:
Hast du in den Web2plc Projekteinstellungen den Dateityp .json ergänzt? Siehe Screenshot. Ansonsten werden die AWP-Befehle dort nicht durch die Variablenwerte ersetzt.
web2plc_awp_dateitypen.png
In der button-data.json wirst du die Variablen bei einer 300er nochmal in doppelte Anführungszeichen setzen müssen:
<!-- AWP_In_Variable Name='"Taste1"' -->
und
"Taste1": :="Taste1":,

Es gibt sonst zumindest eine Fehlermeldung wenn du die Seiten in einen DB übersetzt,
Ich kann es für die 300er nicht testen, weil meine Speicherkarte bei aktiviertem Webserver nicht mehr ausreichend ist.
 
:oops:Ehm ja klar hab ich gemacht,.. also jetzt... *hust*
Muss dann aber so aussehen: <!-- AWP_In_Variable Name=' "Taste4" ' -->.

Also im Firefox klappt es nun schonmal soweit, dass wenn ich die Variable in der SPS auf 1 Setzte mir das Bild auch direkt als gedrückt angezeigt wird.(siehe Bild oben links) . Im bild daneben ist der Inet Explorer, der zeigt mir das ganze erst an wenn ich es händisch neu lade.
Und unten ist das HMI wo mir diese Fehlermeldung kommt . Es scheint immer noc Probleme mit dem Inet Explorer zu geben :S:(.

Oder eine vielleicht doofe Frage
Kann man in die Angehangenen ZIP2.0 nicht in soweit verändern das die Postaktion anders abläuft. Da dabei ja alles soweit läuft , also Werte werden abgerufen wenn ich auf einen Buton drücke, senden und Bildwechsel geht auch . alle ausblenden mit Enabled geht auch. einzige Problem halt das wenn ich auf ein Button drücke das einmal alle neu geladen werden. ..

Ist auch einmal das S7 Programm mit dabei . Oder kann man das so garnicht realisieren ?! (Fals man den Fehler mit dem Inetexplorere nicht hin bekommt)
 

Anhänge

  • 2.0.zip
    3 MB · Aufrufe: 13
Zuviel Werbung?
-> Hier kostenlos registrieren
Was für eine IE Version verwendest du denn?
Mit dem IE11 funktioniert mein Beispiel zumindest. Den Fehler musst du darum selber lokalisieren. Ganz nützlich sind dazu Entwicklertools in Webbrowsern die mittlerweile auch beim Internet Explorer vorhanden sind. Im IE lassen sich diese mit F12 aktivieren. Dort gehst du auf das Tab "Netzwerk" und startest die Aufzeichnung. Wenn alles funktioniert sollten dort automatisch alle paar Sekunden die json Daten abgefragt werden (siehe Screenshot). Nächster Schritt ist der Javascript Debugger.

Zu deinem Beispiel würde ich dir empfehlen, den ganzen iframe Krams rauszuwerfen und alles über Ajax zu machen. Entweder alles mit Ajax oder alles "klassisch". Ansonsten führt nachher jedes iframe sein Eigenleben mit eigenen Ajax-Anfragen. Dann solltest du auch jegliche andere Art von zyklischer Seitenaktualisierung deaktivieren, da diese nicht mehr benötigt werden.
IE11_entwicklertools.jpg
 
Mit dem F12 muss ich mal ausprobieren ( ich habe aber Heute und Morgen Urlaub , muss etwas lernen für meine Abschlussprüfung nächste Woche Dienstag , dann kann ich mich endlich Mechatroniker schimpfen). Dann mal schauen wie es weiter geht.. .

So zurück zum Thema ^^,.. ich muss dann mal gucken ob das mit dem F12 in der HMI Oberfläche funktioniert. Aber am normalen PC habe ich den IE10 und da geht es auch nicht, da werde ich es dann ja aber definit ausprobieren können. Werde mich dann Freitag wieder dran setzen können und eine Rückmeldung geben.

Aber bei dir läuft das ganze mit deinem Quellcodes?.. zu einem das sich die Buttons und Werde in der Seite ändern wenn du die jeweilige Variable in der SPS setzt, als auch das Senden eines Wertes an die SPS wenn du einen Button drückst ?!

Du sagst das so einfach mit dem schmeiße die iframes raus und mach alles über ajax
:p ,.. . Bzw. wie meinst du das mit klassisch ? über javascript ?
 
Bei mir funktioniert es. Aber wie ich schon geschrieben habe, habe ich eine 1200 mit einer etwas anderen AWP-Syntax. Ich komme ohne Anführungszeichen aus. Wenn du Anführungszeichen benötigst, musst du diese besonders behandeln. Ich vermute mal dass es bei dir daran liegt. Das sieht man aber in den Entwicklertools.

Variablen in einem Datenbaustein muss ich auch gesondert behandeln. Beispiel für 3 Tasten in einem Datenbaustein:
button-data.json
Code:
<!-- AWP_In_Variable Name='Taste1' -->
<!-- AWP_In_Variable Name='Taste2' -->
<!-- AWP_In_Variable Name='Taste3' -->
<!-- AWP_In_Variable Name='"DB_HMI".dbtaste1' -->
<!-- AWP_In_Variable Name='"DB_HMI".dbtaste2' -->
<!-- AWP_In_Variable Name='"DB_HMI".dbtaste3' -->

{
    "Taste1": :=Taste1:,
    "Taste2": :=Taste2:,
    "Taste3": :=Taste3:,
    "DB_HMI_dbtaste1": :="DB_HMI".dbtaste1:,
    "DB_HMI_dbtaste2": :="DB_HMI".dbtaste2:,
    "DB_HMI_dbtaste3": :="DB_HMI".dbtaste3:
}
und die zugehörige HTML-Seite:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Testseite zur Datenaktualisierung mittels XML-HTTP Request</title>
<script type="text/javascript">
var gRefreshTimer;

function updatePlcElements()
{
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "button-data.json", true);

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            var data = JSON.parse(xmlhttp.responseText);
            document.getElementById("Taste1").className = "Button" + data.Taste1;
            document.getElementById("Taste1").value = data.Taste1;
            document.getElementById("Taste2").className = "Button" + data.Taste2;
            document.getElementById("Taste2").value = data.Taste2;
            document.getElementById("Taste3").className = "Button" + data.Taste3;
            document.getElementById("Taste3").value = data.Taste3;

            document.getElementById('"DB_HMI".dbtaste1').className = "Button" + data.DB_HMI_dbtaste1;
            document.getElementById('"DB_HMI".dbtaste1').value = data.DB_HMI_dbtaste1;
            document.getElementById('"DB_HMI".dbtaste2').className = "Button" + data.DB_HMI_dbtaste2;
            document.getElementById('"DB_HMI".dbtaste2').value = data.DB_HMI_dbtaste2;
            document.getElementById('"DB_HMI".dbtaste3').className = "Button" + data.DB_HMI_dbtaste3;
            document.getElementById('"DB_HMI".dbtaste3').value = data.DB_HMI_dbtaste3;
        }
    }
    xmlhttp.send(null);
}

function toggleButtonBoolValue(input)
{
    var varname = input.id;
    var value = 0;
    // Wert invertieren
    if (input.value == 0) {
        value = 1;
    }
    
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("POST", "button-data.json", true);
    var postData = varname + "=" + value;
    xmlhttp.send(postData);
    
    clearTimeout(gRefreshTimer);
    updatePlcElements();
    gRefreshTimer = setTimeout("refreshOutputArea()", 2000);
}

function refreshOutputArea()
{
    updatePlcElements();
    gRefreshTimer = setTimeout("refreshOutputArea()", 2000);
}

window.onload = function()
{
    refreshOutputArea();
}
</script>
<style type="text/css">
.Button0 { 
        height: 78px;
        width: 73px;
        background: url(up3.png);
        color: #FFFFFF;
        border: 1px solid #FFFFFF;
}
.Button1 { 
        height: 78px;
        width: 73px;
        background: url(pressed.png);
        color: #FFFFFF;
        border: 1px solid #FFFFFF;
}
</style> 
</head>
<body>
<h2>Testseite zur Datenaktualisierung mittels XML-HTTP Request</h2>
<div id="OutputArea">
<p>Taste1:
<input id="Taste1" type="button" class="Button0" value=0 onclick="toggleButtonBoolValue(this)" />
</p>
<p>Taste2:
<input id="Taste2" type="button" class="Button0" value=0 onclick="toggleButtonBoolValue(this)" />
</p>
<p>Taste3:
<input id="Taste3" type="button" class="Button0" value=0 onclick="toggleButtonBoolValue(this)" />
</p>
<p>DB-Taste1:
<input id='"DB_HMI".dbtaste1' type="button" class="Button0" value=0 onclick="toggleButtonBoolValue(this)" />
</p>
<p>DB-Taste2:
<input id='"DB_HMI".dbtaste2' type="button" class="Button0" value=0 onclick="toggleButtonBoolValue(this)" />
</p>
<p>DB-Taste3:
<input id='"DB_HMI".dbtaste3' type="button" class="Button0" value=0 onclick="toggleButtonBoolValue(this)" />
</p>
</div>
</body>
</html>

Probiere das mal.
Ich habe auch noch geändert, dass beim Abschicken eines neuen Sollwertes ein laufender Timer für die Seitenaktualisierungsauftrag abgebrochen wird. Sonst konnte es sein dass im Hintergrund mehrere Aufträge aktiv sind.
Evtl. ist hier auch ein synchroner XMLHttpRequest sinnvoller.
 
Zuviel Werbung?
-> Hier kostenlos registrieren
Guten Morgen,

Also ich habe mal beim Inet Explorer die mit F12 eine Afuzeichnung gestartet, dort sieht das ganze so aus wie im Anhang.
Die Buttons werden immer noch nicht verändert wenn ich eine Variable in der SPS ändere (Im Firefox ja)
und im HMI bekomme ich die selbe Fehlermeldung wie vorher Json is undefined.
Gucke mir das ganze noch einmal an ob irgendwas mit den " falsch ist .
 

Anhänge

  • IE F12.jpg
    IE F12.jpg
    86,3 KB · Aufrufe: 22
  • firefox und HMi.jpg
    firefox und HMi.jpg
    67,3 KB · Aufrufe: 27
Hier habe ich das noch einmal im Firefox mit dem Firebug anzeigen lassen.
auch hier gibt er wie im IE einen Post befehl beim betätigen eines Buttons ab.
Aber weder hier noch im IE , wird mir dann das Bild geändert/ die Variablen in der SPS werden nicht gesetzt.
 

Anhänge

  • im firefox.jpg
    im firefox.jpg
    90,1 KB · Aufrufe: 21
Läuft bei dir der IE im Kompatibilitätsmodus?

Im Firebug kannst du dir den Inhalt der POST und GET Befehle ansehen. Schau dir mal an was da von der SPS zurückkommt.
 
Zurück
Oben