HTML für Anfänger. (für Web2PLC).

[JesperMP]

Zuviel Werbung?
-> Hier kostenlos registrieren

Hallo.

Jetzt muss ich eine nicht ganz Einfache Applikation erstellen für den Webserver auf ein S7 PN CPU (Web2PLC).
Da ich total Anfänger bin, versuche ich es als ganz einfache HTML Seiten zu halten. Ich verwende so weit kein CSS und kein Javascript.
CSS und Javascript will ich liebstens nicht verwenden bevor HTML relativ gut beherssche.

So weit klappt es gut.
Zahl-Werten zu anzeigen und ändern klappen.
Text-Listen zu anzeigen klappen.
Werte per Knopfdruck zu übertragen klappen (ohne getrennte Eingabe und "Submit").

Was mir fehlt ist irgendeiner Weg Werte darzustellen per Farbanimation z.B.
Wenn ein Ventil aktiv ist, wäre es schön wenn ich der Hintergrundfarbe von eine Tabellen-Zelle von grau auf grün wechseln konnte. Und bei Störung vieleicht auf rot.
Hintergruncdfarben kann ich statisch definieren, aber nicht dynamisch.

Hat jemand eine Idée ?
Ich bin auch offen für alternative Idéen !

edit: Ich weiss das es eine Lösung wäre mit GIF images den gewünschte Animation zu bekommen. Aber ich finde es etwas umständlich.

 

[Deltal]

http://de.selfhtml.org/ dort hab ich mich schon vor fast 15 Jahren schlau gemacht

Das Problem ist, dass du mit "klassichem" html Code in den Browser lädst und er dort dargestellt wird. Sprich da ist nix mit aktualisieren.

Es gibt jedoch die möglichkeit die Seite oder einen Frame in der Seite zyklisch zu aktualisieren. (Sieht aber doof aus)

Sonst gibt es noch die Möglichkeit das über JS zu handeln.

Gibts dort kein Beispiel wo man sich soetwas abschauen kann?

 

[JesperMP]

Zuviel Werbung?
-> Hier kostenlos registrieren

Hallo Deltal.

Danke für den schnellen Antwort.

Das aktualisieren ist nicht das Problem. Dies kann man per en Parameter in Webserver Projekt einstellen. Oder sogar per S7 Code steuern (habe ich nicht probiert).

Das Problem ist den Darstellung von Werte (Integer oder Bool Werte), anders als Zahlenwerte. "0" und "1" für ein Bool ist vielleicht funktionell, aber sieht doof aus.

 

[Deltal]

Ich würde jetzt mal behaupten, ohne JS wird man das so nicht hinbekommen. Du könntest evnt. den Farbcode als Variable anzeigen, z.B. #00FF00 aber das für jedes Bit zu machen ist schon etwas ungünstig.

 

[JesperMP]

Ich würde jetzt mal behaupten, ohne JS wird man das so nicht hinbekommen. Du könntest evnt. den Farbcode als Variable anzeigen, z.B. #00FF00 aber das für jedes Bit zu machen ist schon etwas ungünstig.

Du meinst etwa wie:

<td>ZUSTAND bgcolor:="VentilStatus":</td>

Das werde ich probieren.

Irgendwie muss ich den SPS Tag "VentilStatus" ind Farbcode umwandeln. Z.B. Status "1" = Farbcode "#00FF00"

 

[Thomas_v2.1]

Zuviel Werbung?
-> Hier kostenlos registrieren

Irgendwie muss ich den SPS Tag "VentilStatus" ind Farbcode umwandeln. Z.B. Status "1" = Farbcode "#00FF00"

Sowas ist aber wirklich am einfachsten in css zu lösen.

Dazu definierst du innerhalb des head-tags ein entsprechende style

<style type="text/css">
td.StyleVentilStatus1 { 
background-color:#FF0000;
color:#FFFFFF;
}
			
td.StyleVentilStatus0 { 
background-color:#0000FF;
color:#FFFFFF;
}
</style>

Dann kannst du das Tabellenelemente entsprechend einfärben:

<td class="StyleVentilStatus:="VentilStatus":">Wert: :="VentilStatus":</td>

Hat VentilStatus den Wert 1, dann wird das Format gemäß StyleVentilStatus1 angewendet.
Hat VentilStatus den Wert 0, dann wird das Format gemäß StyleVentilStatus0 angewendet.

 

[JesperMP]

Danke Thomas.

Obwohl das ich zuerst CSS so weit wie möglich vermeiden wurde, scheint es eine elegante Lösung auf mein Problem zu sein.

 

[JesperMP]

Um es zu verstehen, eine Frage:

Funktioniert es so das den Ziffer am ande von td.StyleVentilStatusx mit den Wert von "VentilStatus" verknüpft wird ?
Also wenn VentilStatus=0, dann ist td.StyleVentilStatus0 aktiv, wenn VentilStatus=1, dann ist td.StyleVentilStatus1 aktiv, wenn VentilStatus=2, dann ist td.StyleVentilStatus2 aktiv, usw. ?

 

[Thomas_v2.1]

Zuviel Werbung?
-> Hier kostenlos registrieren

Obwohl das ich zuerst CSS so weit wie möglich vermeiden wurde, scheint es eine elegante Lösung auf mein Problem zu sein.

Ein weiterer Vorteil ist, dass man das Stylesheet in eine separate Datei auslagern und dann zentral an einer Stelle das Design anpassen kann.

Blinkende Hintergründe gehen aber auch mit css nur als Bild.
Dazu erstellt man vorher ein blinkendes 2x2 pixel gif (Beispielname bg_rot_blink.gif), und ergänzt das gewünschte Element durch die entsprechenden Tags, z.b.

td.StyleVentilStatus1 { 
color:#FFFFFF;
background: url(/bg_rot_blink.gif);
background-repeat:repeat;
}

 

[Thomas_v2.1]

Funktioniert es so das den Ziffer am ande von td.StyleVentilStatusx mit den Wert von "VentilStatus" verknüpft wird ?
Also wenn VentilStatus=0, dann ist td.StyleVentilStatus0 aktiv, wenn VentilStatus=1, dann ist td.StyleVentilStatus1 aktiv, wenn VentilStatus=2, dann ist td.StyleVentilStatus2 aktiv, usw. ?

Genau so.
Die HTML-Seite die der Webserver der SPS ausliefert ist ja statisch. D.h. überall wo über diese Spezialtags :="xyz": eine Variable abgefragt wird, wird der aktuelle Variablenwert eingesetzt.

Vielleicht kann man das über entsprechende enum-Definitionen noch verschönern, indem man nicht den Wert sondern die entsprechende enum-Definition eingesetzt bekommt. Aber das ist letzlich nur was fürs Auge des Programmierers.

Mehr wie eine Testseite auf einer S7-1200 generiert habe ich aber auch noch nicht.

 

[JesperMP]

Danke nocheinmal.

Damit habe ich etwas vomit ich arbeiten kann.
Ich werde in paar Screenshots von den ergebniss hier postieren.

 

[S7_Programmer]

Zuviel Werbung?
-> Hier kostenlos registrieren

HTML für Anfänger

Hallo JesperMP,

eventuell ist diese Seite für Dich informativ: http://www.html-seminar.de

Ich hab mir die DVD's bestellt. Die DVD's wurden von einer Schulung mitgeschnitten. Habe eine Menge Tips mitbekommen.
Am besten gefiel mir, wie die Html-Seiten auf HTML-Konformität geprüft werden können und wie die strikte Trennung von HTML und CSS von statten geht.
Kann ich nur weiterempfehlen.

Gruß
S7_Programmer

 

[JesperMP]

Ich bin etwas verspätet in mein Vorhaben, du ich ein paar Probleme mit den Web2PLC Projekt hatte.
Erstens fungierte den Automatische Update nicht. Dies wurde erledigt durch eine Header-Eintrag: <META HTTP-EQUIV="Refresh" CONTENT="xx"> Wo xx ist den Aktualisierzeit in Sekunden.
Zweitens konnte meine AWP Seiten Werten lesen, aber nicht schreiben (!!). Der Lösung war IE8 mit Google Chrome zu tauschen.
(Danke an jklm an Siemens Web Forum für den Tip !)

Nun wurde ich gerne wissen ob das Problem mit Werte zu schreiben mit andere Webbrowser getestet ist.
Hat jemand Erfahrungen damit ? Welche Browser funktionieren, und welche nicht ?

 

[Thomas_v2.1]

Wenn man Werte auf Variablen schreiben will muss man sich auf jeden Fall vorher auf der Startseite anmelden.
Wenn man das nicht macht gibt der Webserver beim Abschicken mit POST aber trotzdem den HTTP Status OK zurück. Man kann also nicht erkennen dass der Grund für die fehlende Wertübernahme an einer nicht vorhandenen Anmeldung lag.

Ich nutze eigentlich immer den Firefox unter Windows 7 wie auch Android, und bei diesem gibt es beim Einloggen wie auch beim Schreiben von Variablen keine Probleme.
Mit dem IE9 funktioniert es zwar, aber dort will der IE beim Anmelden immer irgendeinen Kompatibilitätsmodus oder sowas einschalten. Zumindest tauchen dort bei der Startseite Meldungen auf. Wenn man das alles abgenickt hat funktioniert es aber auch mit dem IE9.

Die Abfrage wegen dem Sicherheitszertifikat kommt aber unter allen Browsern, wenn man das nicht in den Browsereinstellungen deaktiviert.


Es gibt übrigens noch eine elegantere Lösung anstelle der Aktualisierung der kompletten Webseite über den meta refresh, was immer ein kurzes Blinken der Seite zur Folge hat.
Und zwar mittels etwas Javascript und Ajax-Requests. Funktioniert sehr gut, auch wenn der Webserver zumindest in der S7-1200 nicht so rasend schnell ist. Aber Aktualisierungsraten von 1 Sekunde sind auf jeden Fall möglich.

Ich habe auch schon ein paar andere Spielereien mit dem Webserver gemacht, z.B. Javascipt online Trendkurven mit mehreren Messwerten. Funktioniert sogar ganz gut

 

[Django2012]

Zuviel Werbung?
-> Hier kostenlos registrieren

Sowas ist aber wirklich am einfachsten in css zu lösen.

Dazu definierst du innerhalb des head-tags ein entsprechende style

<style type="text/css">
td.StyleVentilStatus1 { 
background-color:#FF0000;
color:#FFFFFF;
}
            
td.StyleVentilStatus0 { 
background-color:#0000FF;
color:#FFFFFF;
}
</style>

Dann kannst du das Tabellenelemente entsprechend einfärben:

<td class="StyleVentilStatus:="VentilStatus":">Wert: :="VentilStatus":</td>

Hat VentilStatus den Wert 1, dann wird das Format gemäß StyleVentilStatus1 angewendet.
Hat VentilStatus den Wert 0, dann wird das Format gemäß StyleVentilStatus0 angewendet.

Entschuldigt meine Unwissenheit, aber was ist denn CSS ?? Wird das in der Automatisierung mit SPS öfter verwendet? Hä??

 

[JesperMP]

CSS ist Cascading Style Sheets.
Es ist eine Erweiterung zu HTML um es besser zu formatieren.
So weit ich weiss gibt es Unterschiede wie die verschiedene Browser die CSS Formatierungen interpretiert.
Bin aber kein CSS Experte.

 

[hovonlo]

In Zusammenhang mit CSS immer wieder schön um zu zeigen, was allein mittels CSS (und unterstützender Bilder) aus ein und dem selben Inhalt machbar ist:

http://www.csszengarden.com/

Es handelt sich immer um den selben Content, allein die Darstellung wird geändert (Auswählen eines Designs unter "Select a Design")

 

[Thomas_v2.1]

Zuviel Werbung?
-> Hier kostenlos registrieren

In der c't stand letztens mal ein Bericht über die jquery mobile Javascript-Bibliothek. Damit kann man relativ einfach Webseiten erstellen die für Mobilgeräte oder Tablets mit Touchbedienung geeignet sind. Und es sind diverse Browserweichen enthalten, sodass man sich darum keine Gedanken mehr machen muss.
Ich habe mal etwas damit rumgetestet und bin bei einer kleinen Demo für eine Pumpstation dabei. Ich habe mal ein paar Screenshots angehängt.
Der gezeigte Störmeldepuffer läuft in der SPS, die Filterfunktion für das Archiv ist in dieser Bibliothek enthalten.

Vom Prinzip her finde ich das schon ganz schick. Nachteil ist dass der Speicherbedarf der Bibliothek (im besonderen jquery) mit den css Dateien ca. 300 kB beträgt. Da der Webserver nicht der S7-1200 nicht der schnellste ist dauert es oftmals bis 10 Sekunden bis die Dateien geladen sind. Wenn man aber Internetzugang hat, kann man diese Dateien auch aus einer Adresse im Internet einbinden (google hostet diese in diversen Versionen). Dann geht der Seitenaufbau relativ schnell.

Die Screenshots sind auf einem 10" Galaxy Tab gemacht.

 

[Gelöschtes Mitglied 43666]

jQuery lässt sich auch gut komprimieren. Dann ist die Datei nur noch etwa 32 KB groß. Unter http://jquery.com/download/ gibt es direkt die komprimierte Version als Download.

Das gleiche gilt für die CSS Dateien. Die können auch gepackt als gzip hinterlegt werden. Durch diese Dateikompression reduziert sich noch einmal die Ladezeit. Moderne Browser entpacken diese Dateien dann selbstständig.

 

[Thomas_v2.1]

jQuery lässt sich auch gut komprimieren. Dann ist die Datei nur noch etwa 32 KB groß. Unter http://jquery.com/download/ gibt es direkt die komprimierte Version als Download.

Das gleiche gilt für die CSS Dateien. Die können auch gepackt als gzip hinterlegt werden. Durch diese Dateikompression reduziert sich noch einmal die Ladezeit. Moderne Browser entpacken diese Dateien dann selbstständig.

Ich habe die komprimierte min Versionen von jquery schon drin, läppert sich aber trotzdem noch zusammen auf etwas über 300kB.
Die Gzip Komprimierung wäre natürlich optimal, nur liefert der Webserver der SPS diese Dateien nicht mit dem entsprechenden MIME Type für gzip komprimierte Dateien aus. Somit denkt der Browser das sei reiner Text, und das funktioniert dann nicht.