Grundlagen zur HTML-Seiten-Erstellung für
Werbung
Applikationsbeschreibung 02/2014
Grundlagen zur HTML
Erstellung für SIMATIC CPUs
SIMATIC STEP 7 V12
http://support.automation.siemens.com/WW/view/de/68011496
Gewährleistung und Haftung
Gewährleistung und Haftung
Hinweis
Die Applikationsbeispiele sind unverbindlich und erheben keinen Anspruch auf
Vollständigkeit hinsichtlich Konfiguration und Ausstattung sowie jeglicher
Eventualitäten. Die Applikationsbeispiele stellen keine kundenspezifischen
Lösungen dar, sondern sollen lediglich Hilfestellung bieten bei typischen
Aufgabenstellungen. Sie sind für den sachgemäßen Betrieb der beschriebenen
Produkte selbst verantwortlich. Diese Applikationsbeispiele entheben Sie nicht
der Verpflichtung zu sicherem Umgang bei Anwendung, Installation, Betrieb und
Wartung. Durch Nutzung dieser Applikationsbeispiele erkennen Sie an, dass wir
über die beschriebene Haftungsregelung hinaus nicht für etwaige Schäden
haftbar gemacht werden können. Wir behalten uns das Recht vor, Änderungen
an diesen Applikationsbeispielen jederzeit ohne Ankündigung durchzuführen. Bei
Abweichungen zwischen den Vorschlägen in diesem Applikationsbeispiel und
anderen Siemens Publikationen, wie z.B. Katalogen, hat der Inhalt der anderen
Dokumentation Vorrang.
Für die in diesem Dokument enthaltenen Informationen übernehmen wir keine
Gewähr.
Siemens AG 2014 All rights reserved
Unsere Haftung, gleich aus welchem Rechtsgrund, für durch die Verwendung der
in diesem Applikationsbeispiel beschriebenen Beispiele, Hinweise, Programme,
Projektierungs- und Leistungsdaten usw. verursachte Schäden ist ausgeschlossen,
soweit nicht z.B. nach dem Produkthaftungsgesetz in Fällen des Vorsatzes, der
groben Fahrlässigkeit, wegen der Verletzung des Lebens, des Körpers oder der
Gesundheit, wegen einer Übernahme der Garantie für die Beschaffenheit einer
Sache, wegen des arglistigen Verschweigens eines Mangels oder wegen
Verletzung wesentlicher Vertragspflichten zwingend gehaftet wird. Der Schadensersatz wegen Verletzung wesentlicher Vertragspflichten ist jedoch auf den
vertragstypischen, vorhersehbaren Schaden begrenzt, soweit nicht Vorsatz oder
grobe Fahrlässigkeit vorliegt oder wegen der Verletzung des Lebens, des Körpers
oder der Gesundheit zwingend gehaftet wird. Eine Änderung der Beweislast zu
Ihrem Nachteil ist hiermit nicht verbunden.
Weitergabe oder Vervielfältigung dieser Applikationsbeispiele oder Auszüge
daraus sind nicht gestattet, soweit nicht ausdrücklich von Siemens Industry Sector
zugestanden.
Securityhinweise
Siemens bietet Produkte und Lösungen mit Industrial Security-Funktionen an,
die den sicheren Betrieb von Anlagen, Lösungen, Maschinen, Geräten und/oder
Netzwerken unterstützen. Sie sind wichtige Komponenten in einem
ganzheitlichen Industrial Security-Konzept. Die Produkte und Lösungen von
Siemens werden unter diesem Gesichtspunkt ständig weiterentwickelt. Siemens
empfiehlt, sich unbedingt regelmäßig über Produkt-Updates zu informieren.
Für den sicheren Betrieb von Produkten und Lösungen von Siemens ist es
erforderlich, geeignete Schutzmaßnahmen (z. B. Zellenschutzkonzept) zu
ergreifen und jede Komponente in ein ganzheitliches Industrial Security-Konzept
zu integrieren, das dem aktuellen Stand der Technik entspricht. Dabei sind auch
eingesetzte Produkte von anderen Herstellern zu berücksichtigen.
Weitergehende Informationen über Industrial Security finden Sie unter
http://www.siemens.com/industrialsecurity.
Um stets über Produkt-Updates informiert zu sein, melden Sie sich für unseren
produktspezifischen Newsletter an. Weitere Informationen hierzu finden Sie
unter http://support.automation.siemens.com.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
2
Inhaltsverzeichnis
Inhaltsverzeichnis
Gewährleistung und Haftung ...................................................................................... 2
1
Grundlagen zum Erstellen von Webseiten...................................................... 4
Siemens AG 2014 All rights reserved
1.1
1.1.1
1.1.2
1.1.3
1.1.4
1.1.5
1.2
1.3
1.3.1
1.3.2
1.4
1.4.1
1.4.2
1.4.3
1.5
1.5.1
1.5.2
1.5.3
1.6
1.6.1
1.6.2
1.6.3
1.7
1.8
1.8.1
1.8.2
1.8.3
1.8.4
1.8.5
1.8.6
1.8.7
1.8.8
1.8.9
1.8.10
Allgemeine Grundlagen zu Webseiten ................................................. 4
Grundlagen zu HTML ........................................................................... 4
Formulare verwenden .......................................................................... 6
Grundlagen zu Cascading Style Sheets (CSS) ................................... 6
Grundlagen zu JavaScript .................................................................... 8
Automatisches Aktualisieren der Webseite .......................................... 9
Grundlagen zu Standard-Webseiten .................................................. 11
Grundlagen zu anwenderdefinierten Webseiten ................................ 13
Erstellung von anwenderdefinierten Webseiten ................................. 13
Notwendige Bausteine für anwenderdefinierte Webseiten ................ 15
Anzeigen von Variablen aus der CPU auf der Webseite ................... 16
Voraussetzungen ............................................................................... 16
Interaktion zwischen Webbrowser und CPU ...................................... 17
Vorgehensweise ................................................................................. 18
Schreiben von Variablen mit der Webseite auf die CPU ................... 18
Voraussetzungen ............................................................................... 18
Interaktion zwischen Webbrowser und CPU ...................................... 19
Vorgehensweise ................................................................................. 20
Variablen in der HTML-Datei mit Texten verknüpfen ......................... 21
Voraussetzungen ............................................................................... 21
Interaktion zwischen Webbrowser und CPU ...................................... 22
Vorgehensweise ................................................................................. 23
Erstellung zeitoptimierter HTML-Seiten (optional) ............................. 24
Funktionsweise der HTML-Datei ........................................................ 27
AWP-Kommandos .............................................................................. 27
Informationen zu Doctype und Head der HTML-Datei ....................... 28
Darstellung von Bereichen ................................................................. 30
Darstellung von Bildern ...................................................................... 32
Erstellung einer Tabelle mit Texten.................................................... 33
Ausgeben von Variablen der CPU ..................................................... 34
Ausgeben von Texten über Enumerationen....................................... 34
Setzen von Variablen in der CPU mit Wert und Schaltfläche ............ 35
Setzen von Variablen in der CPU nur über Schaltfläche ................... 36
Direkt auf anwenderdefinierten Webseiten anmelden ....................... 37
2
Glossar.............................................................................................................. 39
3
Literaturhinweise ............................................................................................. 41
3.1
3.2
4
Literaturangaben ................................................................................ 41
Internet-Link-Angaben ........................................................................ 42
Historie.............................................................................................................. 42
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
3
1 Grundlagen zum Erstellen von Webseiten
1
Grundlagen zum Erstellen von Webseiten
Allgemeine Definitionen
Als Webseite wird im Zusammenhang mit Webdesign ein Dokument im World
Wide Web bezeichnet, das mit einem Webbrowser unter Angabe eines Uniform
Resource Locators (URL) von einem Webserver abgerufen werden kann. In
diesem Zusammenhang wird auch von einer HTML-Seite oder einem HTMLDokument gesprochen.
Unter anwenderdefinierter Webseite wird eine Webseite mit zusätzlicher
Befehlssyntax (AWP-Kommandos) verstanden, mit der auf eine S7-CPU mit
PROFINET-Schnittstelle zugegriffen werden kann.
1.1
Allgemeine Grundlagen zu Webseiten
Copyright Siemens AG 2014 All rights reserved
Wenn Sie bereits Grundlagenwissen zu HTML haben, dann können Sie dieses
Kapitel überspringen und gleich bei Kapitel 1.2 Grundlagen zu StandardWebseiten weiterlesen.
1.1.1
Grundlagen zu HTML
HTML steht für „Hypertext Markup Language" und ist eine textbasierte
Auszeichnungssprache zur Strukturierung von Überschriften, Texten, Listen,
Tabellen oder Bildern. HTML verzichtet unter anderem auf Schleifen und Variablen
und ist deswegen keine Programmiersprache.
Struktur
Ein HTML-Dokument besteht aus drei Bereichen:
•
Dokumenttypdeklaration (DOCTYPE) zu Beginn der Datei, die die verwendete
Dokumenttypdefinition (DTD) angibt, z. B. HTML 4.01 Transitional.
•
HTML-Kopf (head) für Informationen, die nicht im Anzeigebereich des
Webbrowsers dargestellt werden sollen.
•
HTML-Körper (body) für Informationen, die im Webbrowser angezeigt werden.
HTML-Elemente (Tags)
Elemente dienen dazu, verschiedene Teile einer Webseite zu identifizieren und zu
strukturieren.
Die HTML-Dateien beinhalten "HTML-Elemente", die durch Tags (Tag-Paare)
markiert sind. Fast alle HTML-Elemente werden durch ein einleitendes „<“ und ein
abschließendes „</“ Tag markiert. Der Inhalt dazwischen ist der
"Gültigkeitsbereich" des entsprechenden Elements.
Beispiel: Textabsätze werden durch das <p>-Tag markiert.
<p>Dies ist ein Text.</p>
Tags sind kaskadierbar und können ineinander verschachtelt werden.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
4
1 Grundlagen zum Erstellen von Webseiten
Typische Tags
In der folgenden Tabelle finden Sie eine Übersicht der wichtigsten Tags zur
Strukturierung von Informationen, die auch in dieser Beispielapplikation verwendet
werden:
Tabelle 1-1
Copyright Siemens AG 2014 All rights reserved
Darstellung
Funktion
<!-- … -->
Kommentar
<a href=“…“> … </a>
Link
<b> … </b>
Fettschrift
<body> … </body>
Inhalt wird im Webbrowser angezeigt
<div> … </div>
Gruppierung von anderen Elementen
<form> … </form>
Definiert ein Formular
<h1> … </h1>
Textüberschrift
<head> … </head>
Kopfbereich einer HTML-Datei
<html> … </html>
Elementares Webseiten-Tag
<iframe> … </iframe>
Definiert ein eingebettetes Fenster
<img src=“…“>
Bildeinbau
<input>
Erzeugt ein Formularelement
<link>
Definiert logische Beziehungen zu
anderen Dateien
<meta>
Definiert Meta-Daten
<p> … </p>
Textabsatz
<script> … </script>
Definiert einen Bereich für Scripts (z.B.
JavaScript)
<style> … </style>
Definitionsbereich für StylesheetFormatierungen
<table> … </table>
Tabelle
Erzeugt zusammen mit <tr> und
<td> eine Tabelle
<td> … </td>
Tabellenspalte
<th> … </th>
Tabellenkopf
<tr> … </tr>
Tabellenzeile
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
Beispiel
<!-- Das ist ein
Kommentar! -->
<b>Dieser Text ist
fett</b>.
5
1 Grundlagen zum Erstellen von Webseiten
1.1.2
Formulare verwenden
Um mit der Applikation zu interagieren verwenden Sie Formulare im HTML.
Zum Beispiel können Sie in Formularen Eingabefelder ausfüllen und anschließend
das Formular senden, indem Sie auf eine Schaltfläche klicken. Dadurch wird der
Inhalt des Formulars an den Webserver abgesendet.
Mit der Methode „POST" werden die Inhalte des Formulars vom Webbrowser mit
einer speziellen POST-Anfrage an den Webserver übertragen (post =
verschicken).
Hinweis
1.1.3
Verwenden Sie Formulare nicht auf Seiten, die automatisch aktualisiert werden.
Ihre Eingaben werden bei der Aktualisierung überschrieben.
Grundlagen zu Cascading Style Sheets (CSS)
Copyright Siemens AG 2014 All rights reserved
Cascading Style Sheet ist eine Formatsprache für HTML-Elemente. Mit Hilfe von
Stylesheets werden z. B. Schriftart, Schriftgröße, Farben, Rahmen, Höhe, Breite
etc. für HTML-Elemente festgelegt.
Mit Stylesheets können Sie zentrale Formate für alle z. B. Überschriften 1.
Ordnung, Tabellenzellen, etc. definieren.
CSS-Formate haben folgenden Aufbau:
Selektor { Eigenschaft: Wert }
Ein Selektor kann mehrere Deklarationen (Eigenschaft: Wert) enthalten.
Typische CSS-Eigenschaften
In der folgenden Tabelle finden Sie eine Übersicht der wichtigsten Eigenschaften
zur Formatierung von HTML-Elementen, die auch in dieser Beispielapplikation
verwendet werden:
Tabelle 1-2
CSS-Eigenschaft
Funktion
Beispiele für Werte
position
Positionsart
static, relative,
absolute, fixed
top
left
bottom
right
Startposition von oben
Startposition von links
Startposition von unten
Startposition von rechts
10px, 2%
width
height
Breite
Höhe
100px, 20%
direction
Schreibrichtung
ltr, rtl
z-index
Schichtposition bei Überlappung
1, 2
font-family
Schriftart
Arial, Helvetica
font-style
Schriftstil
italic, oblique, normal
font-size
Schriftgröße
20px,100%, small,
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
6
1 Grundlagen zum Erstellen von Webseiten
CSS-Eigenschaft
Funktion
Beispiele für Werte
Copyright Siemens AG 2014 All rights reserved
medium, large
font-weight
Schriftgewicht / Schriftschnitt
bold, normal, bolder,
lighter, 100 bis 900
text-decoration
Textdekoration
underline, blink, none
text-transform
Text-Transformation
uppercase, lowercase
color
Textfarbe
rgb(51,102,170), #FFFFFF
vertical-align
vertikale Ausrichtung
top, middle, bottom
text-align
horizontale Ausrichtung
left, center, right,
justify
margin
margin-top
margin-right
margin-bottom
margin-left
Außenabstand allgemein
Außenabstand oben
Außenabstand rechts
Außenabstand unten
Außenabstand links
10px, 5%
padding
padding-top
padding-right
padding-bottom
padding-left
Innenabstand allgemein
Innenabstand oben
Innenabstand rechts
Innenabstand unten
Innenabstand links
10px, 5%
-
Rahmen allgemein
2px solid white
-
Rahmendicke
-
Rahmenfarbe
2px, 1%, thin, medium,
thick
#FFFF00, white
-
Rahmentyp
border[-top, -right,
bottom, -left]
border[-top, -right,
bottom, -left]-width
border[-top, -right,
bottom, -left]-color
border[-top, -right,
bottom, -left]-style
border-collapse
Rahmenmodell
none, hidden, dotted,
solid, dashed, double
separate, collapse
background
background-color
background-image
background-repeat
Hintergrundfarben und –bilder
Hintergrundfarbe
Hintergrundbild
Wiederholungseffekt
background-attachment
background-position
Wasserzeicheneffekt
Hintergrundposition
list-style-type
Listendarstellungstyp
none, square, circle,
disc
empty-cells
Anzeige leerer Zellen
show, hide
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
Image.png no-repeat
rgb(51,102,170), #FFFFFF
Image.png
repeat, no-repeat,
repeat-x, repeat-y
scroll, fixed
10px 10px, top, bottom,
center, left, right
7
1 Grundlagen zum Erstellen von Webseiten
Integration von Cascading Style Sheets (CSS) in HTML
Sie haben mehrere Möglichkeiten, Stylesheets in eine HTML-Datei zu integrieren:
•
innerhalb eines HTML-Elements
•
zwischen den Tags <style> und </style>
•
in einer externen CSS-Datei
Definieren Sie die Stylesheets in einer separaten CSS-Datei, wenn Sie einheitliche
Formate in mehreren HTML-Dateien verwenden wollen. Diese CSS-Datei wird
einfach in die HTML-Datei eingebunden. Die Syntax hierfür lautet:
<link rel="stylesheet" type="text/css" href="<Formate>.css">
Die definierten Stylesheets werden mit den Attributen id und class der HTMLTags angesprochen. Mit CSS haben Sie umfangreiche Formatierungsmöglichkeiten und die Übersicht in der HTML-Datei bleibt erhalten.
1.1.4
Grundlagen zu JavaScript
Copyright Siemens AG 2014 All rights reserved
JavaScript ermöglicht es, Nutzerinteraktionen auszuwerten und Inhalte zu
verändern, nachzuladen oder zu generieren und erweitert so die Möglichkeiten von
HTML/CSS.
Integration von JavaScript in HTML
Sie haben mehrere Möglichkeiten, JavaScript-Kommandos in eine HTML-Datei zu
integrieren:
•
zwischen den Tags <script> und </script>
•
bei Verweisen
•
als Parameter eines HTML-Tags
•
in einer externen JS-Datei
Definieren Sie den JavaScript-Code in einer separaten Datei, wenn Sie gleiche
Funktionen in mehreren HTML-Dateien verwenden wollen. So geben Sie den Code
nur einmal ein und können ihn in mehreren HTML-Dateien referenzieren.
Die Syntax hierfür lautet:
<script src="<Script>.js" type="text/javascript"> </script>
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
8
1 Grundlagen zum Erstellen von Webseiten
1.1.5
Automatisches Aktualisieren der Webseite
Dauer des Seitenaufbaus
Die Aktualisierungsdauer einer Webseite ist abhängig von der Fülle des
Seiteninhalts. Es müssen die statischen Anteile und die dynamischen Anteile
(Variablen) aktualisiert werden.
Dauer der Variablenübertragung für CPU 1516-3 PN/DP
Die interne Übertragungsdauer zwischen der CPU und dem eingebauten
Webserver ist abhängig von der Anzahl der zu übertragenden Variablen. Die
Größe der Variablen spielt nahezu keine Rolle. Die Übertragungsrate lässt sich mit
einer höheren Kommunikationslast zu Lasten der Programm-Zykluszeit steigern.
In der folgenden Tabelle finden Sie eine Übersicht für die Übertragungsdauer,
abhängig von der Anzahl der Variablen und der projektierten Kommunikationslast:
Copyright Siemens AG 2014 All rights reserved
Tabelle 1-3
Hinweis
Anzahl Variablen
Kommunikationslast
[%]
Aktualisierungsdauer
[s]
10
20
1,2
10
40
1,1
20
20
1,4
20
40
1,3
40
20
1,6
40
40
1,5
Löschen Sie nicht verwendete Variablen aus Ihren HTML-Seiten, um die
Übertragungsrate zu steigern. Das Auskommentieren der Variablen ist nicht
ausreichend.
Möglichkeiten
Die Einstellung „automatische Aktualisierung“ in den Eigenschaften der PLC gilt
nur für Standard-Webseiten und nicht für anwenderdefinierte Webseiten.
HTML ist an sich statisch und reagiert nicht auf Änderungen des Inhalts. Wenn sich
also Werte im S7-Programm ändern, ist es sinnvoll, sich die geänderten Werte im
Webbrowser anzeigen zu lassen.
Sie haben mehrere Möglichkeiten, die Anzeige der Webseite zu aktualisieren:
•
Manuelle Aktualisierung mit <F5>
•
Automatische Aktualisierung mit einem Metadatum im Head der HTML-Datei
•
Automatische Aktualisierung mit JavaScript
Für das Schreiben von Variablen in die CPU sollte eine separate HTML-Seite ohne
automatische Aktualisierung angelegt werden. Damit wird verhindert, dass noch
nicht abgeschlossene Eingaben beim automatischen Aktualisieren der Seite
überschrieben werden.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
9
1 Grundlagen zum Erstellen von Webseiten
Manuelle Aktualisierung
Drücken Sie <F5> (Internet Explorer: "Ansicht > aktualisieren") um die Anzeige im
Webbrowser manuell zu aktualisieren.
Aktualisierung mit HTML
Mit folgender Codezeile im Head der HTML-Datei aktualisieren Sie zyklisch die
Anzeige im Webbrowser:
<meta http-equiv="refresh" content="10; URL=Example.html">
Der Aktualisierungszyklus wird in Sekunden eingegeben. Mit "content="10; "
beträgt der Aktualisierungszyklus 10 Sekunden. Der tatsächliche Aktualisierungszyklus ist abhängig von der Datenmenge der Seite.
Über "URL= " geben Sie die Webseite an, die aktualisiert werden soll. Im
Applikationsbeispiel ist das die Datei "Overview.html".
Copyright Siemens AG 2014 All rights reserved
Aktualisierung mit JavaScript
Im Body der HTML-Datei aktualisiert das folgende JavaScript die Anzeige im
Webbrowser alle 10 Sekunden:
<script type="text/javascript">
setInterval("document.location.reload()",10000);
</script>
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
10
1 Grundlagen zum Erstellen von Webseiten
1.2
Grundlagen zu Standard-Webseiten
Voraussetzungen
In STEP 7 sind folgende Einstellungen in den Eigenschaften der PLC erforderlich:
•
Der Webserver muss aktiviert sein.
•
Wenn Sie sicheren Zugriff auf die Standard-Webseiten benötigen, aktivieren
Sie das Kontrollkästchen "Zugriff nur über HTTPS zulassen".
•
Die automatische Aktualisierung der Standard-Webseiten ist aktiviert. Das
Aktualisierungsintervall ist auf 10 s voreingestellt und kann im Bereich von 1
bis 999 liegen.
Zugriff über HTTP bzw. HTTPS
Copyright Siemens AG 2014 All rights reserved
Mit der URL „http://ww.xx.yy.zz" bzw. „https://ww.xx.yy.zz" erhalten Sie Zugriff auf
die Standard-Webseiten. Dabei entspricht „ww.xx.yy.zz" der IP-Adresse der
S7-1500 CPU.
HTTPS dient zur Verschlüsselung und Authentifizierung der Kommunikation
zwischen Browser und Webserver. Bei aktiviertem Kontrollkästchen „Zugriff nur
über HTTPS zulassen" ist ein Aufruf der Webseiten der S7-1500 CPU nur über
HTTPS möglich.
Anmelden
In der Benutzerliste ist ein voreingestellter Benutzer mit Namen „Everybody“
(„Jeder“) angelegt, welcher standardmäßig minimale Zugriffsrechte (lesender
Zugriff auf Intro- und Startseite) besitzt. Die Zugriffsrechte des Benutzers
„Everybody“ („Jeder“) können erweitert werden. Der Benutzer „Everybody“
(„Jeder“) ist ohne Passwort festgelegt.
Um die volle Funktionalität der Webseiten zu nutzen, müssen Sie eingeloggt sein.
Loggen Sie sich mit einem in der Web-Projektierung in STEP 7 festgelegten
Benutzernamen und Passwort ein. Anschließend können Sie auf die für diesen
Benutzer freigegebenen Webseiten mit den entsprechenden Zugriffsrechten
zugreifen.
Die Eingabefelder zum Anmelden sind in der linken oberen Ecke auf jeder
Standard-Webseite zu finden.
Abbildung 1-1 Anmeldefenster
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
11
1 Grundlagen zum Erstellen von Webseiten
Standard-Webseiten von SIMATIC S7-1500
Der Webserver von S7-1500 bietet bereits viele Informationen zur jeweiligen CPU
über integrierte Standard-Webseiten an. In der Tabelle sind diese StandardWebseiten im Einzelnen aufgeführt:
Tabelle 1-4
Copyright Siemens AG 2014 All rights reserved
Bezeichnung
Inhalt
Intro
Einstiegsseite für die Standard-Webseiten
Startseite
Die Startseite liefert eine Übersicht der generellen Informationen der
CPU, den CPU-Namen, den CPU-Typ und Basisinformationen zum
aktuellen Betriebszustand.
Identifikation
Anzeige der statischen Identifikationsinformationen, wie die Serien-,
Bestell- und Versionsnummer
Diagnosepuffer
Anzeige des Diagnosepuffer-Inhalts mit den jüngsten Einträgen
zuerst
Baugruppenzustand
Symbolische Anzeige des Status einer Baugruppe mit Kommentaren
Meldungen
Anzeige des Meldepuffer-Inhalts
Kommunikation
Anzeige der Informationen zu den PROFINET-Schnittstellen der
CPU, Anzeige des Ressourcenverbrauchs der Verbindungen
Topologie
Grafische und Tabellarische Anzeige des topologischen Aufbaus und
des Status der PROFINET-Geräte des PROFINET IO-Systems
Anwenderseiten
Im Bereich „Anwenderseiten" des Webservers können Sie selbst
erstellte HTML-Seiten zum Auslesen von Daten des Zielsystems
laden.
Filebrowser
Der Filebrowser listet alle Dateien und Verzeichnisse auf, die auf der
SIMATIC Memory Card vorhanden sind. Die Dateien können
heruntergeladen, gelöscht, umbenannt oder hochgeladen werden.
Die Verzeichnisse können nur erstellt, gelöscht oder umbenannt
werden.
Der Aufbau der Standard-Webseiten ist im S7-1500 Webserver Funktionshandbuch detailliert beschrieben und ist nicht Gegenstand dieser Applikation.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
12
1 Grundlagen zum Erstellen von Webseiten
1.3
Grundlagen zu anwenderdefinierten Webseiten
In diesem Kapitel finden Sie Grundlagenwissen zu anwenderdefinierten Webseiten
bezogen auf die Applikation.
Kontextbezogene Informationen finden Sie in der Onlinehilfe von SIMATIC STEP 7
V12 unter anderem zur Anweisung „WWW“ (SFC 99).
Vorteile
Eine anwenderdefinierte Webseite zu erstellen bietet sich an, wenn kein ständiges
HMI-System erforderlich ist, Sie aber gelegentlich Diagnoseinformationen und
Visualisierungen benötigen. Da Sie Standard-Webtechnologien verwenden,
benötigen Sie keine zusätzliche Visualisierungs-Hardware und Software.
Eine Lösung mit AWP ist für einfache Anwendungen sinnvoll und Sie können die
Webseite individuell gestalten.
1.3.1
Erstellung von anwenderdefinierten Webseiten
Abbildung 1-2 Überblick Erstellung von anwenderdefinierten Webseiten
Copyright Siemens AG 2014 All rights reserved
Client mit Browser
Request
Webseite
SIMATIC STEP 7
V12
Bausteine
- OB1
CALL “WWW“
-…
SIMATIC STEP 7
V12
PROFINET
Industrial
Ethernet
CPU 1516-3 PN/DP als
Webserver
DB333/334
HTML-Editor
Symbole
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
Editor
HTML-Datei
Images
13
1 Grundlagen zum Erstellen von Webseiten
Vorgehensweise
Tabelle 1-5
Copyright Siemens AG 2014 All rights reserved
Nr.
Anweisung
1.
Mit einem HTML-Editor erstellen Sie die HTML-Datei für die CPU. Die gesamte
Webapplikation besteht aus einzelnen Quelldateien, z. B. *.html, *.png, *.js, *.css,
etc. Um auf Variablen der CPU zugreifen zu können, gibt es eine entsprechende
Befehlssyntax (AWP-Kommandos).
2.
Aus den Quelldateien generieren Sie mit STEP 7 Datenbausteine (Web-ControlDB und Fragment-DBs). Die DB-Nummern sind frei konfigurierbar (Default: DB
333 und ab DB334). Die DBs werden unter „Programmbausteine >
Systembausteine > Webserver" in der Projektnavigation abgelegt. Diese
Datenbausteine bestehen aus einem Steuerdatenbaustein, der die Anzeige der
Webseiten regelt und einem oder mehreren Datenbausteinfragmenten mit den
übersetzten Webseiten.
3.
Variablen, die Sie auf der Webseite verwenden möchten, weisen Sie in STEP 7
einen symbolischen Namen zu.
4.
Sie erstellen mit STEP 7 ein S7-Programm. Zur Synchronisation zwischen
Anwenderprogramm und Webserver, aber auch zur Initialisierung müssen Sie
die Anweisung WWW (SFC 99) im Anwenderprogramm aufrufen.
5.
Mit STEP 7 übertragen Sie alle Bausteine in die CPU.
6.
Öffnen Sie einen Webbrowser und geben Sie die URL „http://ww.xx.yy.zz" bzw.
„https://ww.xx.yy.zz" ein. Dabei entspricht „ww.xx.yy.zz" der IP-Adresse der
S7-1500 CPU.
Der Webbrowser fordert über das http-Protokoll die Webseite der CPU an, die
CPU stellt als Webserver die Webseite zur Verfügung.
Der Zugriff auf den Webserver der CPU kann unabhängig vom
Projektierungsrechner erfolgen, jedes Anzeigegerät mit integriertem Webbrowser
und Zugriff auf die PN-Schnittstelle der CPU kann die Webseite darstellen.
Um Schreibzugriff über die Webseite zu bekommen müssen Sie angemeldet sein.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
14
1 Grundlagen zum Erstellen von Webseiten
1.3.2
Notwendige Bausteine für anwenderdefinierte Webseiten
WWW (SFC99)
Mit Hilfe der Anweisung “WWW“ (SFC99) interpretiert die CPU die Datenbausteine
und kann diese als anwenderdefinierte Webseiten verwenden.
Web-Control-DB und Fragment-DBs
Basis für die von Ihnen gestaltete Webseite ist eine HTML-Datei (bzw. mehrere
zusammenhängende HTML-Dateien mit Bildern):
Damit die CPU die HTML-Datei interpretieren kann, wird diese zusammen mit
weiteren notwendigen Dateien in Datenbausteinen abgelegt. Dazu benutzen Sie
STEP 7:
Copyright Siemens AG 2014 All rights reserved
Im Web-Control-DB (Default: DB333) sind enthalten:
•
Status- und Steuervariablen der Webseite
•
Status der Kommunikation (z. B. ob ein Request vom Webbrowser an den
Webserver besteht)
•
Fehlerinformationen
Zusätzlich zum Web-Control-DB gibt es noch „Fragment-DBs" beginnend mit
standardmäßig DB334. In diesen DBs sind die codierten Webseiten und
Mediadaten (z. B. Bilder) enthalten.
Alle Web-Control-DBs befinden sich in der Projektnavigation von STEP 7 im
Ordner „Programmbausteine / Systembausteine / Webserver“.
Die Größe der anwenderdefinierten Webseiten bestimmt somit auch die Größe des
Anwenderprogramms. Die Größe des Anwenderprogramms, der Daten und der
Konfiguration ist durch den verfügbaren Ladespeicher und den Arbeitsspeicher in
der CPU begrenzt.
Hinweis
Wenn Sie den Platz für Ihre anwenderdefinierten Webseiten verringern müssen,
entfernen Sie ggf. einige der eingefügten Bilder.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
15
1 Grundlagen zum Erstellen von Webseiten
1.4
Anzeigen von Variablen aus der CPU auf der Webseite
Typische Verwendung von Variablen
In der folgenden Tabelle finden Sie eine Übersicht für die Verwendung von
Variablen:
Tabelle 1-6
Copyright Siemens AG 2014 All rights reserved
Darstellung
Funktion
Beispiel
Informationen
:="<Name>":
CPU-Variable anzeigen
:="TankLevelMinimum":
Kap. 1.4
<!-- AWP_In_Variable
Name ='"<Name>"' -->
Konfiguration, um mit einer
separaten Methode "Post"
eine Variable auf der CPU
schreiben zu können
<!-- AWP_In_Variable
Name='"OpenValve"' -->
Kap. 1.5
<!-- AWP_Enum_Ref
Name='"<Name>"'
Enum="<Variable>" -->
Zuordnung von
Enumerationen (Texten)
zum Wert einer Variablen
<!-- AWP_Enum_Ref
Name='"Alarm"'
Enum="AlarmValue" -->
Kap. 1.6
1.4.1
Voraussetzungen
Um Variablen der CPU auf der Webseite anzeigen zu können, gelten die folgenden
Voraussetzungen:
Tabelle 1-7
S7-Programm
•
•
•
Jeder Variablen muss ein symbolischer Name
zugewiesen sein. Nur über symbolische
Namen kann auf der Webseite die Variable
angezeigt werden.
Ein zyklischer Aufruf der Anweisung „WWW“
(SFC99) ist notwendig, wenn die Variablen im
S7-Programm vorverarbeitet werden.
Für Variablen sind Standard-Datentypen,
selbst erstellte PLC-Datentypen und
Strukturen zugelassen.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
HTML-Datei
•
Variablen müssen nicht über ein AWPKommando in der HTML-Datei deklariert
werden.
16
1 Grundlagen zum Erstellen von Webseiten
1.4.2
Interaktion zwischen Webbrowser und CPU
Abbildung 1-3 Interaktion zwischen Webbrowser und CPU beim Lesen von Variablen
Webbrowser
S7-CPU
OB1
DB333/DB334
MW14 = 5
…
Call “ WWW“
…
…
Flowrate = 5
…
Webserver mit
Webseite
…
Flowrate = 5
…
Webbrowser
…
5
…
Arbeitsspeicher
…
MW14
…
Copyright Siemens AG 2014 All rights reserved
Symbole
…
Flowrate: MW14
…
Tabelle 1-8
Nr.
Beschreibung
7.
Variablen, die auf der Webseite dargestellt oder geschrieben werden, müssen einen
symbolischen Namen haben. Auf eine Variable in einem DB wird beispielsweise mit
"DB_name".Variablen_name zugegriffen.
8.
Im S7-Programm wird die Anweisung “WWW“ (SFC99) aufgerufen.
9.
Durch den Aufruf der Anweisung “WWW“ (SFC99) wird der Web-Control-DB (Default: DB333)
initialisiert.
10.
Der Webserver der CPU wandelt die Daten mit Hilfe der Informationen im Web-Control-DB
(Default: DB333) in ein Format um (= Webseite), das von einem Webbrowser interpretiert
werden kann.
Die Webseite der CPU rufen Sie in einem Webbrowser über die IP-Adresse der CPU auf.
11.
Mit jeder Anfrage vom Webbrowser wird die Webseite aktualisiert (manuell oder automatisch).
Informationen zur Aktualisierung einer Webseite finden Sie in
Kapitel 1.1.5 Automatisches Aktualisieren der Webseite.
Eine Anfrage an den Webserver erzeugen Sie auch mit der Methode "Post" beim Schreiben
einer Variablen auf die CPU. Nach dem "Abschicken" der Webseite wird die gesamte
Webseite aktualisiert.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
17
1 Grundlagen zum Erstellen von Webseiten
1.4.3
Vorgehensweise
S7-Programm:
Im S7-Programm ist keine Programmierung notwendig.
HTML-Datei:
Eine Variable kann an jeder beliebigen Stelle in der HTML-Seite angezeigt werden.
Die Syntax lautet:
:="<Variable>":
Beispiel für die Variable "TankLevelMaximum":
<p>:="TankLevelMaximum":</p>
Copyright Siemens AG 2014 All rights reserved
Die Darstellung der Variablen erfolgt unabhängig vom Datentyp. Die Aktualisierung
der Variablen ist in Kapitel 1.1.5 Automatisches Aktualisieren der Webseite
beschrieben.
1.5
Schreiben von Variablen mit der Webseite auf die CPU
1.5.1
Voraussetzungen
Um Variablen über die Webseite auf der CPU schreiben zu können, gelten die
folgenden Voraussetzungen:
Tabelle 1-9
S7-Programm
•
•
•
Jeder Variablen muss ein symbolischer Name
zugewiesen sein. Nur über symbolische
Namen kann eine Variable adressiert werden.
Die Anweisung „WWW“ (SFC99) muss
zyklisch aufgerufen werden.
Für Variablen sind Standard-Datentypen,
selbst erstellte PLC-Datentypen und
Strukturen zugelassen.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
HTML-Datei
•
•
Variablen müssen über das AWP-Kommando
<!-- AWP_In_Variable … --> in der
HTML-Datei deklariert werden.
Die Variablen müssen an die CPU übertragen
werden (z. B. POST-Methode in der HTMLDatei).
18
1 Grundlagen zum Erstellen von Webseiten
1.5.2
Interaktion zwischen Webbrowser und CPU
Abbildung 1-4 Interaktion zwischen Webbrowser und CPU beim Schreiben von Variablen
S7-CPU
OB1
Webbrowser
DB333/DB334
MW14 = 5
…
Call “WWW“
…
Webseite
…
Flowrate = 10
…
…
Flowrate = 10
…
Request
Webbrowser
Flowrate = 10
Arbeitsspeicher
Flowrate = 10
…
MW14
…
Copyright Siemens AG 2014 All rights reserved
Symbole
…
Flowrate: MW14
…
Tabelle 1-10
Nr.
Beschreibung
1.
Der Benutzer ändert über die Webseite die Variable „Flowrate" auf den Wert "10".
2.
Der Webbrowser meldet einen Request (Methode „Post").
3.
Das S7-Programm übernimmt die geänderte Variable „Flowrate", die Anzeige im Webbrowser
wird aktualisiert, die neuen Werte werden angezeigt.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
19
1 Grundlagen zum Erstellen von Webseiten
1.5.3
Vorgehensweise
S7-Programm:
Die Anweisung „WWW“ (SFC99) muss zyklisch aufgerufen werden.
HTML-Datei:
Das AWP-Kommando, über das Variablen in die CPU geschrieben werden
können, lautet:
<!-- AWP_In_Variable Name='"Variable"' -->
Beispiel für das Schreiben der Variable "Flowrate":
<!-- AWP_In_Variable Name='"Flowrate"' -->
Typischerweise steht das AWP-Kommando als erste Anweisung in der HTMLDatei, in der die Variable verwendet wird.
Copyright Siemens AG 2014 All rights reserved
Übertragen der Variablen vom Webbrowser
Beim Formularaufruf wird die Methode POST ausgewählt, um die Daten vom
Webbrowser zum Webserver zu übertragen. Das Formular besteht aus zwei
Einheiten:
•
Einem Feld zur Eingabe des Wertes:
Das Feld wird über eine Variable benannt und bezeichnet die Variable aus
dem AWP-Kommando, z. B.
<!-- AWP_In_Variable Name='"Flowrate"' -->.
•
Einer Schaltfläche, mit der die Eingabe des Wertes bestätigt wird.
Über „submit" werden die Formulardaten übertragen.
Beispiel:
Aussehen auf der Webseite:
Code:
<form method="post" action="" onsubmit="return check();">
<input type="text" name='"Flowrate"' size="2">
<input type="submit" value="Set a new Flowrate">
</form>
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
20
1 Grundlagen zum Erstellen von Webseiten
1.6
Variablen in der HTML-Datei mit Texten verknüpfen
In manchen Fällen macht es auf einer Webseite Sinn, Meldungen direkt als Text
und nicht als Variable auszugeben. Dazu stellt STEP 7 Enumerationen zur
Verfügung. Mit einer Enumeration können Sie Werte mit konkreten Texten
verknüpfen. Diese Texte können einsprachig oder mehrsprachig angelegt sein. In
dieser Applikation gibt es einsprachige Textmeldungen.
1.6.1
Voraussetzungen
Um Meldungen als Text auszugeben, gelten die folgenden Voraussetzungen:
Tabelle 1-11
S7-Programm
•
Copyright Siemens AG 2014 All rights reserved
•
•
Jeder Variable muss ein symbolischer Name
zugewiesen sein. Nur über symbolische
Namen kann eine Variable adressiert werden.
Ein zyklischer Aufruf der Anweisung „WWW“
(SFC99) ist notwendig, wenn die Variablen im
S7-Programm vorverarbeitet werden.
Für Variablen sind alle numerischen
Datentypen zugelassen.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
HTML-Datei
•
•
Variablen müssen nicht über ein AWPKommando in der HTML-Datei deklariert
werden, da sie nur gelesen, aber nicht
geschrieben werden.
Alle sprachabhängigen Dateien inkl. der
HTML-Datei müssen im gleichen Verzeichnis
liegen.
21
1 Grundlagen zum Erstellen von Webseiten
1.6.2
Interaktion zwischen Webbrowser und CPU
Die folgende Grafik veranschaulicht die Interaktion zwischen Webbrowser und
CPU:
Abbildung 1-5 Interaktion zwischen Webbrowser und CPU beim Umsetzen von Variablen in Text
Webbrowser
S7-CPU
OB1
MW12 = 1
…
Call “WWW“
…
DB333/DB334
Alarm = 1
1 = Tank level
below
minimum!
…
Webseite
Alarm = 1
≙ Tank level
below
minimum!
Webbrowser
Alarmvalue =
Tank level
below
minimum!
Arbeitsspeicher
Copyright Siemens AG 2014 All rights reserved
…
MW12
…
Symbole
…
Alarm: MW12
…
Tabelle 1-12
Nr.
Beschreibung
1.
Das S7-Programm ruft die Anweisung „WWW“ (SFC99) auf und setzt den Wert von MW12
(„Alarm") auf "1".
2.
Durch den zyklischen Aufruf der Anweisung „WWW“ (SFC99) wird die Variable „Alarm" im
DB333/334 ebenfalls aktualisiert.
3.
Der Webserver verknüpft den Wert von „Alarm" mit dem dazugehörigen Text.
4.
Im Webbrowser wird statt des Wertes von „Alarm" der dazugehörige Text ausgegeben.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
22
1 Grundlagen zum Erstellen von Webseiten
1.6.3
Vorgehensweise
ENUM-TYP anlegen
Das AWP-Kommando, über die ENUM-Typen definiert werden, lautet:
<!-- AWP_Enum_Def Name= ="<Name des Enum Typs>"
Values='0:"<Text_1>", 1:"<Text_2>", ... , x:"<Text_x>"' -->
Beispiel für den ENUM-Typ "AlarmValue":
<!-- AWP_Enum_Def Name="AlarmValue" Values='0:"Tank empty!",
1:"Tank level below minimum!", 2:"Tank level between minimum
and midth!", 3:"Tank level between midth and maximum!",
4:"Tank level over maximum!", 5:"Tank level overflow!"' -->
Typischerweise steht das AWP-Kommando als erste Anweisung in der HTMLDatei, in der die Variable verwendet wird.
Copyright Siemens AG 2014 All rights reserved
ENUM-TYP zuordnen
Die Syntax für die Anzeige von Text statt Wert lautet z. B. für die Variable "Alarm":
<!-- AWP_Enum_Ref Name='"Alarm"' Enum="AlarmValue" -->
:="Alarm":
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
23
1 Grundlagen zum Erstellen von Webseiten
1.7
Erstellung zeitoptimierter HTML-Seiten (optional)
Die Erstellung von zeitoptimierten HTML-Seiten ist nicht in den Handbüchern von
S7-1500 beschrieben. Die Idee hinter der Aktualisierung mittels JavaScript besteht
darin, dass in der anwenderdefinierten Webseite eine Unterwebseite eingebunden
wird. Dies geschieht mittels eines sogenannten „Inline-Frames" (iFrame). Um neue
Werte von der Steuerung abzuholen, wird dabei nicht die komplette Webseite neu
geladen, sondern nur die Unterwebseite im Inline-Frame. Dies bringt den Vorteil,
dass nur wenige Daten von der Steuerung abgerufen werden müssen. Wenn auf
der Hauptseite beispielsweise Bilder genutzt werden, müssen diese nicht bei jeder
Aktualisierung von der Steuerung angefordert werden, was bei den beiden
anderen vorgestellten Mechanismen der Fall ist. Die Aktualisierung mittels
JavaScript verursacht daher eine geringe Datenübertragung, was sich sowohl auf
die Netzwerklast als auch die Zykluszeit der Steuerung positiv auswirken kann.
Das Konzept ist in folgender Abbildung dargestellt.
Abbildung 1-6 Variable lesen / schreiben
Variable lesen
Variable schreiben
Copyright Siemens AG 2014 All rights reserved
Update_DataOpti.html
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
DataOpti.html
Start_Stop_buttons.html
24
1 Grundlagen zum Erstellen von Webseiten
Tabelle 1-13
Copyright Siemens AG 2014 All rights reserved
Nr.
Beschreibung
1.
Es gibt eine anzuzeigende anwenderdefinierte HTML-Seite (im Folgenden als
„Hauptseite“ bezeichnet). In dieser Applikation ist das die HTML-Seite
„DataOpti.html“. Diese wird nicht aktualisiert.
2.
Die Hauptseite enthält keine Variablen. Alle zu lesenden oder zu schreibenden
Steuerungsvariablen sind in zusätzlichen HTML-Dateien (hier
„Update_DataOpti.html“ und „Start_Stop_buttons.html“) verpackt, die ihrerseits
als Frames (iframe) in die Hauptseite eingebettet sind. Es werden immer nur
die einzelnen Frames aktualisiert.
3.
Die Datei „Update_DataOpti.html“ enthält zwei Tabellen. In der ersten Tabelle in
der zweiten Zeile ist die Aktualisierungszeit in Millisekunden (z.B. 1000)
angegeben. Die zweite Tabelle beinhaltet ab der zweiten Zeile in der linken
Spalte die AWP-Kommandos der zu lesenden Variablen
(z.B. :="Data_Buffer".Data[1].Data_Struct.TimeStamp:). In der
rechten Spalte sind die zugehörigen IDs eingetragen (z.B. TimeId1). Die IDs
müssen eindeutig sein. In der Hauptseite „DataOpti.html“ sind die IDs anstelle
der AWP-Kommandos der zu lesenden Variablen eingetragen. D.h. um ein
Element für die Aktualisierung zu verwenden, muss das Attribut „ID" eingefügt
und mit dem jeweiligen ID-Namen vorbelegt werden (z.B. id="TimeId1"). Die
separate HTML-Datei “Update_DataOpti.html“ wird als Frame (iframe, siehe
Punkt 2) in der Hauptseite „DataOpti.html“ eingebettet. Die Syntax hierfür lautet:
<iframe src="Update_DataOpti.html" style="display:none;" />
Die für den Frame notierte CSS-Eigenschaft „display:none“ verhindert seine
Anzeige auf der Hauptseite.
4.
Die JavaScript-Funktionen (siehe Abbildung 1-7 JavaScript Funktionen) in der
Datei „Update_DataOpti.html“ ermitteln automatisch die aktuelle Größe der
zweiten Tabelle. Dabei werden in der Hauptseite die HTML-Elemente mit der ID
ermittelt. Vom JavaScript-Programmcode wird der komplette Inhalt dieses HTMLElements mit dem Inhalt der linken Tabellenspalte der zweiten Tabelle ersetzt.
Zum Schluss wird eine Wartezeit anhand der in der ersten Tabelle definierten
Zeit gesetzt und die Aktualisierung anschließend erneuert.
5.
Für Eingabevariablen (siehe Kapitel 1.5 Schreiben von Variablen mit der
Webseite auf die CPU) werden Formulare in separaten HTML-Dateien eingefügt.
Die HTML-Dateien werden als Frames in der Hauptseite eingebettete. Hierbei
können mehrere Formulare in eine HTML-Datei geschrieben werden.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
25
1 Grundlagen zum Erstellen von Webseiten
Copyright Siemens AG 2014 All rights reserved
Abbildung 1-7 JavaScript Funktionen
Hinweis
Die Datei „Update_DataOpti.html“ lässt sich ohne großen Aufwand an Ihre
Applikation anpassen. Sie müssen nur Ihre Variablen mit der entsprechenden ID
in die zweite Tabelle eintragen. Ersetzen Sie auf Ihrer Hauptseite die Variablen
mit der entsprechenden ID. Eine Änderung am JavaScript ist nicht erforderlich.
Weitere Informationen zu diesem Thema finden Sie unter folgendem FAQ:
Wie können in STEP 7 (TIA Portal) V11 anwenderdefinierte Webseiten und
Standardwebseiten für S7-CPUs automatisch aktualisiert werden?
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
26
1 Grundlagen zum Erstellen von Webseiten
1.8
Funktionsweise der HTML-Datei
Im folgenden Kapitel werden die einzelnen Abschnitte der HTML-Datei detailliert
erläutert. Bei der Erstellung der HTML-Seiten wurden ausschließlich feste Werte
für Position und Größe der Elemente verwendet. Damit wird verhindert, dass sich
die Elemente beim Verkleinern des Browserfensters verschieben und überlappen.
1.8.1
AWP-Kommandos
Grundlagen
AWP-Kommandos werden als HTML-Kommentare in HTML-Dateien eingefügt.
AWP-Kommandos können sich an jeder Stelle der HTML-Datei befinden. Aus
Gründen der Übersichtlichkeit bietet es sich aber an, die zentralen AWPKommandos zu Beginn der HTML-Datei aufzuführen.
Copyright Siemens AG 2014 All rights reserved
Abbildung 1-8 AWP-Kommandos
Erläuterungen
Tabelle 1-14
Code
Erläuterung
<!-- AWP_In_Variable
Name='"Start"' -->
Alle Variablen, die an die CPU übertragen
werden, müssen als AWP_In_Variable
gekennzeichnet sein.
Hinweis: Beachten Sie, dass die Anführungszeichen geschachtelt sind. Die Variable wird in
Anführungszeichen geschrieben und von einem
Hochkomma umrahmt (' " … " ').
<!-- AWP_Enum_Def
Name="AlarmValue"
Values='0:"Tank empty!",
1:"Tank level below
minimum!", 2:"Tank level
between minimum and midth!",
3:"Tank level between midth
and maximum!", 4:"Tank level
over maximum!", 5:"Tank level
overflow!"' -->
ENUM-Typen werden mit AWP_Enum_Def
definiert.
<!-- AWP_Enum_Ref
Name='"Alarm"'
Enum="AlarmValue" ->:="Alarm":
Die Zuweisung der ENUM-Typen zu Variablen
erfolgt mit AWP_Enum_Ref.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
27
1 Grundlagen zum Erstellen von Webseiten
1.8.2
Informationen zu Doctype und Head der HTML-Datei
Grundlagen
Die folgenden Informationen müssen in jeder HTML-Datei stehen, damit diese
HTML-konform ist. Einzige Ausnahme bildet das Tag "<meta httpequiv="refresh" …>": wenn Sie auf eine automatische Aktualisierung der
Seite verzichten und stattdessen mit der <F5> arbeiten, können Sie dieses Tag
weglassen. Die Tags <link…> und <script…> sind ebenfalls optional.
Copyright Siemens AG 2014 All rights reserved
Abbildung 1-9 Informationen zu Doctype und Head der HTML-Datei
Erläuterungen
Tabelle 1-15
Code
Erläuterung
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01
Transitional//EN">
Festlegung des HTML-Dokumenttyps: Es
handelt sich um den Dokumenttyp HTML in
der Sprachversion V4.01 in der Variante
„Transitional". Das Sprachkürzel „EN"
bezieht sich auf die Sprache der Tags, also
englisch.
Der Dokumenttyp steht immer vor
Verwendung der Tags "<html>".
<html> … </html>
Beinhaltet den HTML-Inhalt.
<title>Userdefined Website –
Application Overview</title>
Titel der Webseite, der im Kopf des
Webbrowsers angezeigt wird.
<meta http-equiv="ContentLanguage" content="en" >
Sprache des Dateiinhalts
<meta http-equiv="Content-Type"
content="text/html; charset=utf8" >
Mit "content="text/html" wird der
MIME-Type angegeben, gefolgt vom
verwendeten Zeichensatz UTF-8.
MIME steht für Multipurpose Internet Mail
Extensions. Mit MIME-Type wird der Typ
der übermittelten Daten beschrieben.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
28
1 Grundlagen zum Erstellen von Webseiten
Copyright Siemens AG 2014 All rights reserved
Code
Erläuterung
<meta http-equiv="refresh"
content="1; URL=Overview.html">
Optionales Metadatum: Mit diesem Befehl
wird die Webseite jede Sekunde
aktualisiert. Gerade für Prozessüberwachungen bietet es sich an, sich die
Webseite zyklisch aktualisieren zu lassen.
Bei Seiten mit Eingabefeldern kann die
zyklische Aktualisierung zu Problemen
führen.
Weitere Informationen zur Aktualisierung
der Webseite finden Sie in Kapitel 1.1.5
Automatisches Aktualisieren der Webseite.
<link rel="stylesheet"
type="text/css"
href="Stylesheet/siemens_Stylesh
eet.css">
Über <link…> wird eine CSS-Datei
referenziert, die alle Informationen zur
optischen Gestaltung der Webseite enthält,
z. B. Hintergrundfarbe, etc.
<script
src="Script/siemens_script.js"
type="text/javascript">
</script>
Der Bereich für Scripts (z. B. JavaScript)
wird zwischen <script…> und
</script> definiert. Innerhalb des
Bereichs notieren Sie die Anweisungen in
der Scriptsprache oder Sie binden mit src
eine separate Datei mit Ihrem Script ein.
<body> …</body>
Beinhaltet den Textkörper.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
29
1 Grundlagen zum Erstellen von Webseiten
1.8.3
Darstellung von Bereichen
Grundlagen
In der HTML-Datei werden drei Bereiche verwendet:
•
Kopfbereich (header)
•
Navigationsleiste (navi)
•
Datenbereich (page)
Erläuterungen
Folgendes Bild zeigt die Bereiche in der HTML-Datei:
Copyright Siemens AG 2014 All rights reserved
Abbildung 1-10 Bereiche der HTML-Datei
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
30
1 Grundlagen zum Erstellen von Webseiten
Die Formatierung der Bereiche ist in einer separaten CSS-Datei zentral definiert:
Copyright Siemens AG 2014 All rights reserved
Abbildung 1-11 Formatierung der Bereiche in CSS-Datei
Tabelle 1-16
Code
#page {
POSITION: absolute;
left: 150px;
top: 0;
height: 800px;
width: 920px;
padding-top: 180px;
padding-left: 30px;
padding-right: 30px;
text-align: left;
border-color: white;
border-style: solid;
border-width: 1px;
background-color:
rgb(208,211,218);
border-collapse : separate;
z-index: 1;
}
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
Erläuterung
CSS-Formate haben folgenden Aufbau:
Selektor { Eigenschaft: Wert }
In unserem Beispiel ist page der Selektor
mit mehreren Deklarationen
(Eigenschaft:Wert):
Weitere Informationen zu Formatierungen
der HTML-Elemente finden Sie im Kapitel
1.1.3 Grundlagen zu Cascading Style
Sheets (CSS).
31
1 Grundlagen zum Erstellen von Webseiten
1.8.4
Darstellung von Bildern
Grundlagen
In der HTML-Datei werden mehrere Bilder verwendet:
•
Statische Bilder
•
Hintergrundbild
•
Bild mit variabler Höhe
•
Dynamische Bilder, die abhängig von einem Statusbit in der CPU geändert
werden.
Erläuterungen
Copyright Siemens AG 2014 All rights reserved
Abbildung 1-12 Darstellung von Bildern in der HTML-Datei
Tabelle 1-17
Code
Erläuterung
<img src="Images/SIEMENS_Logo.PNG">
Bilder werden über den Tag "img" eingebunden.
background="Images\TankExample.PNG"
style="background-repeat:no-repeat;
background-position:bottom left"
Mit "background" wird ein Hintergrundbild mit
seinen Eigenschaften festgelegt.
<img src="Images\blue.png"
alt="Level"
width="56px"
height=":=TankLevelScal:px ">
Bei Bildern mit variabler Höhe wie z. B.
Füllstandsanzeige, wird für "height" statt einem
Wert eine Variable "TankLevelScal" mit ":" und
Maßeinheit z. B. "px" angegeben.
<img
src="Images\Valve:="StatusValveCPU":.
png"
name="Valve"
"StatusValveCPU = 0"
id="StatusValveCPU"
alt="Valve" >
Dieses Bild ist abhängig von der Variablen
„StatusValveCPU". Diese Variable kann die
Zustände „0" und „1" einnehmen.
Die hinterlegten Bilder haben die Bezeichnung
Valve0.png (Ventil geschlossen) und Valve1.png
(Ventil geöffnet).
Wenn das Ventil geschlossen ist, hat
„StatusValveCPU " den Wert 0: der Aufruf des
Bilds setzt sich zusammen aus:
„Valve" + „0" + „.png" = Valve0.png
Mit „alt" geben Sie einen Text an, der angezeigt
wird, wenn das Bild von der Webseite nicht
aufgerufen werden kann.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
32
1 Grundlagen zum Erstellen von Webseiten
1.8.5
Erstellung einer Tabelle mit Texten
Grundlagen
Damit sich auf der Webseite nicht abhängig von der Fenstergröße Inhalte
verschieben, bietet sich die Verwendung einer Tabelle an.
Selbstverständlich können Sie eine Tabelle aber auch über CSS (Cascading Style
Sheet) zentral für Ihre Webseite festlegen.
Erläuterungen
Im folgenden Bild sind wegen der Übersichtlichkeit nur die Kopfzeile und die erste
und letzte Zeile der Tabelle dargestellt.
Copyright Siemens AG 2014 All rights reserved
Abbildung 1-13 Darstellung einer Tabelle in der HTML-Datei
Tabelle 1-18
Code
Erläuterung
<table border="1" >
…
</table)
Die Strichstärke (border) der Tabelle ist „1". Mit
border="0" erzeugen Sie eine Tabelle ohne
Rahmen (unsichtbare Tabelle).
<tr>
<td
class="static_field_headline_small">
Data</td>
<td
class="static_field_headline_left">
Time</td>
<td
class="static_field_headline_left">
Value</td>
</tr>
<tr> (Tabelle row) bezeichnet eine Tabellenzeile.
Zwischen <td> (Tabelle data) und </td> steht
der Inhalt einer Zelle.
Die Formate z.B.
"static_field_headline_small“ der
Tabellendaten sind in der CSS-Datei definiert. Mit
"class=“<name>“" erfolgt die Zuordnung der
Formate aus der CSS-Datei zu den Elementen in
der HTML-Datei. So erreichen Sie ein
einheitliches Erscheinungsbild für z. B. alle
Tabellen.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
33
1 Grundlagen zum Erstellen von Webseiten
1.8.6
Ausgeben von Variablen der CPU
Erläuterungen
Variablen der CPU werden immer über den Symbolnamen dargestellt:
Abbildung 1-14 Darstellung von Variablen in der HTML-Datei
Statt „TankLevel" wird in der Webseite immer der aktuelle Wert aus der CPU
ausgegeben.
1.8.7
Ausgeben von Texten über Enumerationen
Erläuterungen
Über Enumerationen können Texte den einzelnen Werten einer Variablen der CPU
zugeordnet werden.
Copyright Siemens AG 2014 All rights reserved
Abbildung 1-15 Darstellung von Enumerationen in der HTML-Datei
Statt den einzelnen Werten von "Alarm" werden die zuvor in HTML zugeordneten
Texte ausgegeben. Die Texte sind als Enum-Typ "AlarmValue" hinterlegt und
werden über den DB333 an die Webseite übergeben.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
34
1 Grundlagen zum Erstellen von Webseiten
1.8.8
Setzen von Variablen in der CPU mit Wert und Schaltfläche
Grundlagen
Um Variablen über die Webseite an die CPU übertragen zu können, müssen Sie
mit Formularen und z. B. mit der Methode "POST" arbeiten.
Erläuterungen
Abbildung 1-16 Darstellung von Eingaben in der HTML-Datei
Tabelle 1-19
Copyright Siemens AG 2014 All rights reserved
Code
<form method="post" action=""
onsubmit="return check();">
<input type="text" id="wert1"
name='"Flowrate"' size="2"
style="height: 45px; width: 50px;
font-size: 21px; text-align: center;
padding: 8px;">
<input type="submit"
value="Set a new Flowrate"
style="height: 45px; width: 200px">
</form>
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
Erläuterung
Aufruf des Formulars mit der Methode post.
Unter action ist keine Angabe notwendig, weil
bei action defaultmäßig die aktuelle Seite
aufgerufen wird.
Mit dem aufrufenden Eventhandler onsubmit
wird die Funktion check() ausgeführt, die in der
JS-Datei definiert ist. Die Funktion überprüft mit
Klick auf submit, ob die Eingabe im Bereich von
1 bis 10 liegt. Ist diese Bedingung erfüllt, liefert die
Funktion check() TRUE zurück, andernfalls ist
der Rückgabewert FALSE und es wird zusätzlich
eine Meldung ausgegeben.
Mit input type="text" ist ein Eingabefeld
verknüpft, dessen Inhalt mit submit (nur bei
check() = TRUE) an den Webserver der CPU
gesendet wird. submit wird über eine
Schaltfläche namens "Set a new Flowrate"
gesteuert.
35
1 Grundlagen zum Erstellen von Webseiten
1.8.9
Setzen von Variablen in der CPU nur über Schaltfläche
Grundlagen
Um Variablen in der CPU einen vorher festgelegten Wert zuzuweisen, arbeiten Sie
mit einem Formular, der Methode „POST" und einem versteckten (hidden) Wert.
Erläuterungen
Copyright Siemens AG 2014 All rights reserved
Abbildung 1-17 Darstellung von Schaltflächen in der HTML-Datei
Tabelle 1-20
Code
Erläuterung
<form method="post" action="">
<input type="submit"
value="OpenValve">
<input type="hidden"
name='"OpenValve"' size="20px"
value="1">
<input type="hidden"
name='"CloseValve"' size="20px"
value="0">
</form>
Aufruf des Formulars mit der Methode post.
Unter action ist keine Angabe notwendig, weil
bei action defaultmäßig die aktuelle Seite
aufgerufen wird.
Mit input type="hidden" wird der Variablen
„OpenValve" der Wert 1 zugewiesen, der
Variablen „CloseValve" der Wert 0.
Mit submit werden die Werte der Variablen an
den Webserver der CPU gesendet.
<form method="post" action="">
<input type="submit"
value="CloseValve">
<input type="hidden"
name='"CloseValve"' size="20px"
value="1">
<input type="hidden"
name='"OpenValve"' size="20px"
value="0">
</form>
Umgekehrte Aktion zur obigen Zeile: Aufruf des
Formulars, um „CloseValve" den Wert 1
zuzuweisen und „OpenValve" den Wert 0.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
36
1 Grundlagen zum Erstellen von Webseiten
1.8.10
Direkt auf anwenderdefinierten Webseiten anmelden
Grundlagen
Zum Schreiben von Variablen in die CPU müssen Sie in der Regel am Webserver
der CPU angemeldet sein. Ein Anmelden ist nicht erforderlich, wenn Sie dem
Benutzer „Everybody“ („Jeder“) Schreibrechte auf die anwenderdefinierten Seiten
geben. Dies ist jedoch aus Sicht der Anlagensicherheit nicht zu empfehlen. Das
Anmeldefenster finden Sie in der linken oberen Ecke der Standard-Webseiten.
Damit Sie zum Anmelden nicht auf die Standard-Webseiten wechseln müssen,
wurde das Anmeldefenster auf den anwenderdefinierten Webseiten integriert.
Erläuterungen
Copyright Siemens AG 2014 All rights reserved
Abbildung 1-18 Anmelden auf anwenderdefinierten Webseiten in der HTML-Datei
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
37
1 Grundlagen zum Erstellen von Webseiten
Tabelle 1-21
Copyright Siemens AG 2014 All rights reserved
Code
Erläuterung
<body onload="loginCheck()">
Bei jeder Aktualisierung der Webseite wird die
JavaScript-Funktion loginCheck() automatisch
ausgeführt.
<iframe id="WebserverIFrame"
name="WebserverIFrameName"
src="../../Portal/Portal.mwsl"
style="display:none"></iframe>
In der anwenderdefinierten Seite wird ein iframe
definiert, in dem die Standardwebseite enthalten
ist. Der iframe wird mit dem Attribut
style="display:none" unsichtbar gemacht.
<div id="logForm" class="Login_Area"
colspan="2"></div>
Mit class="Login_Area" erfolgt die Zuordnung
der Formate aus der CSS-Datei zum
Anmeldefenster mit der id="logForm". Die ID ist
in der Funktion loginCheck() definiert.
function loginCheck()
Mit der JavaScript-Funktion loginCheck() wird
im iFrame auf der Standardwebseite abgefragt, ob
das Formular zum Einloggen oder Ausloggen
existiert. Je nachdem wird das jeweilige Formular
zum Ein- oder Ausloggen auf der
anwenderdefinierten Webseite eingefügt.
Hinweis
Weitere Informationen zu diesem Thema finden Sie unter folgendem FAQ:
Wie können Sie sich direkt auf anwenderdefinierten Webseiten der S7-1200
einloggen?
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
38
2 Glossar
2
Glossar
AWP
Automation Web Programming
AWP-Kommando
Unter AWP-Kommando wird die spezielle Befehlssyntax verstanden, mit der Sie
Daten zwischen der CPU und der HTML-Datei austauschen.
CSS
CSS (Cascading Style Sheets) legt fest, wie ein in HTML ausgezeichneter Bereich
oder Inhalt dargestellt wird.
Firewall
Copyright Siemens AG 2014 All rights reserved
Die Firewall dient dazu, den Netzwerkzugriff basierend auf Absender- oder
Zieladresse und genutzten Diensten zu beschränken. Die Firewall entscheidet
beim über sie abgewickelten Datenverkehr anhand festgelegter Regeln, ob
bestimmte Netzwerkpakete transportiert werden, oder nicht. Auf diese Weise
versucht die Firewall, unerlaubte Netzwerkzugriffe zu unterbinden.
Die Funktion einer Firewall besteht nicht darin, Angriffe zu erkennen. Sie soll
ausschließlich Regeln für die Netzwerkkommunikation umsetzen.
HTML-Datei
HTML-Dateien sind die Grundlage des World Wide Web und werden von einem
Webbrowser dargestellt.
In diesem Dokument sprechen wir von der HTML-Datei, wenn Sie die Webseite
editieren, z. B. mit Frontpage. Im Webbrowser bezeichnen wir die Seite als
Webseite.
HTTP
Das Hypertext Transfer Protocol (HTTP, Hypertext-Übertragungsprotokoll) ist ein
Protokoll zur Übertragung von Daten über ein Netzwerk.
HTTPS
Das Hypertext Transfer Protocol Secure (sicheres Hypertext-Übertragungsprotokoll) ist ein Kommunikationsprotokoll, um Daten abhörsicher zu übertragen.
MIME Typ
Mit Hilfe des Standards Multipurpose Internet Mail Extensions (MIME) wird z. B. bei
einer HTTP-Übertragung einem Webbrowser mitgeteilt, welche Daten der
Webserver sendet – ob es beispielsweise Klartext, ein HTML-Dokument oder ein
PNG-Bild ist.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
39
2 Glossar
UTF-8
UTF-8 (8-bit UCS Transformation Format) ist die am weitesten verbreitete
Kodierung für Unicode-Zeichen.
Dabei wird jedem Unicode-Zeichen eine speziell kodierte Bytekette von variabler
Länge zugeordnet. UTF-8 unterstützt bis zu vier Byte, auf die sich alle UnicodeZeichen abbilden lassen.
Webbrowser
Webbrowser sind Visualisierungsprogramme für Webseiten und können mit
Webservern kommunizieren.
Typische Webbrowser sind:
•
Microsoft Internet Explorer
•
Mozilla Firefox
Webserver
Ein Webserver speichert Webseiten und stellt diese zur Verfügung. Der Webserver
ist eine Software, die Dokumente mit Hilfe standardisierter Übertragungsprotokolle
(http, HTTPS) an einen Webbrowser überträgt.
Copyright Siemens AG 2014 All rights reserved
In einer CPU mit PROFINET-Schnittstelle ist ein Webserver integriert, den Sie mit
Anwenderdefinierten Webseiten erweitern können.
Webseite
Siehe HTML-Datei.
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
40
3 Literaturhinweise
3
Literaturhinweise
3.1
Literaturangaben
In dieser Tabelle finden Sie eine Auswahl geeigneter Literatur.
Tabelle 3-1
Themengebiet
Titel
HTML
HTML und CSS, Praxisrezepte für Einsteiger
Robert R. Agular
mitp
ISBN 978-3-8266-1779-9
/2/
HTML
HTML Handbuch
Stefan Münz/Wolfgang Nefzger
Franzis Verlag
ISBN 3-7723-6654-6
/3/
Javascript
JavaScript und Ajax, Das umfassende Handbuch
Christian Wenz
Galileo Press
ISBN 978-3-8362-1128-4
Copyright Siemens AG 2014 All rights reserved
/1/
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
41
4 Historie
3.2
Internet-Link-Angaben
In dieser Tabelle finden Sie eine Auswahl an Links zu weiterführenden
Informationen.
Tabelle 3-2
Copyright Siemens AG 2014 All rights reserved
Themengebiet
4
Titel
/1/
Referenz auf den
Beitrag
http://support.automation.siemens.com/WW/view/de/68011496
/2/
Siemens Industry
Online Support
http://support.automation.siemens.com
/3/
HTML, JavaScript
http://www.selfhtml.de/
http://de.selfhtml.org/
http://www.little-boxes.de/
/4/
S7-1500
Webserver
Funktionshandbuch
http://support.automation.siemens.com/WW/view/de/59193560
/5/
S7-1500
Systemhandbuch
http://support.automation.siemens.com/WW/view/de/59191792
/6/
Programmierleitfaden für
S7-1200/1500
http://support.automation.siemens.com/WW/view/de/81318674
Historie
Tabelle 4-1
Version
Datum
V1.0
02/2014
Grundlagen zur HTML Erstellung
Beitrags-ID: 68011496, V1.0, 02/2014
Änderung
Erste Ausgabe
42