Zuviel Werbung? - > Hier kostenlos beim SPS-Forum registrieren

Seite 4 von 5 ErsteErste ... 2345 LetzteLetzte
Ergebnis 31 bis 40 von 42

Thema: WEB2PLC Seitenteile neu Laden

  1. #31
    Registriert seit
    29.03.2004
    Beiträge
    5.797
    Danke
    144
    Erhielt 1.707 Danke für 1.239 Beiträge

    Standard


    Zuviel Werbung?
    -> Hier kostenlos registrieren
    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.

  2. #32
    spikey ist offline Neuer Benutzer
    Themenstarter
    Registriert seit
    09.01.2015
    Beiträge
    28
    Danke
    2
    Erhielt 0 Danke für 0 Beiträge

    Standard

    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.

    Was mir aufgefallen ist du hast:

    onclick="toogleButtonBoolValue(this)" />
    geschrieben muss das nicht toggle heißen?
    Angehängte Grafiken Angehängte Grafiken
    Geändert von spikey (19.01.2015 um 12:05 Uhr)

  3. #33
    Registriert seit
    29.03.2004
    Beiträge
    5.797
    Danke
    144
    Erhielt 1.707 Danke für 1.239 Beiträge

    Standard

    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.

  4. #34
    spikey ist offline Neuer Benutzer
    Themenstarter
    Registriert seit
    09.01.2015
    Beiträge
    28
    Danke
    2
    Erhielt 0 Danke für 0 Beiträge

    Standard

    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)
    Angehängte Dateien Angehängte Dateien

  5. #35
    Registriert seit
    29.03.2004
    Beiträge
    5.797
    Danke
    144
    Erhielt 1.707 Danke für 1.239 Beiträge

    Standard

    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

  6. #36
    spikey ist offline Neuer Benutzer
    Themenstarter
    Registriert seit
    09.01.2015
    Beiträge
    28
    Danke
    2
    Erhielt 0 Danke für 0 Beiträge

    Standard

    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
    ,.. . Bzw. wie meinst du das mit klassisch ? über javascript ?

  7. #37
    Registriert seit
    29.03.2004
    Beiträge
    5.797
    Danke
    144
    Erhielt 1.707 Danke für 1.239 Beiträge

    Standard

    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.

  8. #38
    spikey ist offline Neuer Benutzer
    Themenstarter
    Registriert seit
    09.01.2015
    Beiträge
    28
    Danke
    2
    Erhielt 0 Danke für 0 Beiträge

    Standard

    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 .
    Angehängte Grafiken Angehängte Grafiken

  9. #39
    spikey ist offline Neuer Benutzer
    Themenstarter
    Registriert seit
    09.01.2015
    Beiträge
    28
    Danke
    2
    Erhielt 0 Danke für 0 Beiträge

    Standard

    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.
    Angehängte Grafiken Angehängte Grafiken

  10. #40
    Registriert seit
    29.03.2004
    Beiträge
    5.797
    Danke
    144
    Erhielt 1.707 Danke für 1.239 Beiträge

    Standard


    Zuviel Werbung?
    -> Hier kostenlos registrieren
    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.

Ähnliche Themen

  1. DB neu laden mit veränderten Anfangswerten
    Von Fl0Bru im Forum Simatic
    Antworten: 4
    Letzter Beitrag: 29.11.2011, 23:39
  2. DB über Programmbefehl neu laden
    Von Dav im Forum Simatic
    Antworten: 7
    Letzter Beitrag: 19.07.2011, 12:12
  3. Datenbaustein bei der S7-200 neu laden
    Von hubert im Forum Simatic
    Antworten: 6
    Letzter Beitrag: 24.05.2005, 21:56
  4. C7 626 DP nach Urlöschen neu laden Teil2
    Von JensPipka im Forum Simatic
    Antworten: 0
    Letzter Beitrag: 23.03.2004, 11:15
  5. C7-626 nach Urlöschen neu laden
    Von JensPipka im Forum Simatic
    Antworten: 1
    Letzter Beitrag: 19.03.2004, 12:45

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •