13
Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten. siemens.com/answers Vorbereitungen zum SIMOTION Webserver Tutorial „Anwenderdefinierte Webseiten“ SIMOTION Tutorials

SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

  • Upload
    lamanh

  • View
    228

  • Download
    0

Embed Size (px)

Citation preview

Page 1: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten. siemens.com/answers

Vorbereitungen zum SIMOTION Webserver Tutorial „Anwenderdefinierte Webseiten“

SIMOTION Tutorials

Page 2: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten.

V1.0

• Web-Projekt über Kartenleser einrichten 10

• Web-Editor einrichten 6

• Demo-Variablen hinzufügen 4

• Webserver aktivieren 3

• SIMOTION-Projekt vorbereiten 2

Page 3: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten.

V1.0

► Web-Projekt über Kartenleser einrichten

► Web-Editor einrichten

► Demo-Variablen hinzufügen

► Webserver aktivieren

► SIMOTION-Projekt vorbereiten

SIMOTION Webserver aktivieren SIMOTION SCOUT TIA V4.4, TIA Portal V13 SP1

1. Öffnen Sie die Gerätekonfiguration der SIMOTION Steuerung in Ihrem TIA Portal Projekt

2. Öffnen Sie die Eigenschaften der Steuerung in der Gerätesicht 3. In den „Webserver“-Einstellungen aktivieren Sie den Haken

„Webserver auf diesem Gerät aktivieren“. Es erscheint ein Security-Hinweis. Bestätigen Sie den Hinweis.

4. Aktivieren Sie die gewünschten Web-Dienste (z. B. HTTP) 5. Laden Sie das geänderte Projekt in die Steuerung

Hinweis: Bei Verwendung von SIMOTION SCOUT V4.4 mit SIMATIC STEP 7 ist der Webserver standardmäßig bereits aktiviert.

Page 4: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten.

V1.0

► Web-Projekt über Kartenleser einrichten

► Web-Editor einrichten

► Demo-Variablen hinzufügen

► Webserver aktivieren

► SIMOTION-Projekt vorbereiten

Importieren der ST-Programmquelle mit den benutzerdefinierten Variablen in Ihr SIMOTION SCOUT TIA-Projekt

1. Klicken Sie doppelt auf „SIMOTION-Konfiguration“. Es öffnet sich SIMOTION SCOUT TIA.

2. Klicken Sie in

SIMOTION SCOUT TIA mit der rechten Maustaste auf „PROGRAMME“ unterhalb Ihrer SIMOTION-Steuerung.

3. Im Kontext-Menü klicken Sie auf Exportieren/Importieren Externe Quelle importieren ST-Quelle.

4. Es öffnet sich ein Dateiauswahl-Dialog. Wählen Sie die Datei FillingMachine.st aus und bestätigen Sie den Dialog mit „OK“. Sie finden die Datei FillingMachine.st in der Zip-Datei CustomWebPagesTUTORIAL.zip.

5. Klicken Sie auf „Projekt speichern und Änderungen übersetzen“.

6. Laden Sie das geänderte Projekt in die Steuerung.

Hinweis: Bei Verwendung von SIMOTION SCOUT V4.4 mit SIMATIC STEP 7 funktioniert der Import der ST-Quelle identisch.

Page 5: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten.

V1.0

• Web-Projekt über Kartenleser einrichten 10

• Syntax-Hervorhebung einrichten 8

• Demo-Projekt öffnen 7

• NetBeans IDE Installieren 6

• Web-Editor einrichten 5

• SIMOTION-Projekt vorbereiten 3

Page 6: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten.

V1.0

► Web-Projekt über Kartenleser einrichten

► Syntax-Hervorhebung einrichten

► Demo-Projekt öffnen

► NetBeans IDE Installieren

► Web-Editor einrichten

► SIMOTION-Projekt vorbereiten

Installation der Entwicklungsumgebung „NetBeans IDE“

Grundsätzlich können Sie jeden Texteditor verwenden, um Ihre anwenderdefinierten Webseiten für die SIMOTION Steuerung zu entwickeln. Es empfiehlt sich Editoren oder Entwicklungsumgebungen zu verwenden, welche eine Syntax-Hervorhebung für HTML, CSS und JavaScript unterstützen. Für die Erstellung dieses Tutorials wurde NetBeans IDE 8.0.2 von Oracle verwendet. NetBeans IDE ist eine integrierte Entwicklungsumgebung mit HTML5-Unterstützung.

Installation: 1. Öffnen Sie den folgenden Link:

https://netbeans.org/downloads/ Es öffnet sich eine Seite mit einer Übersicht der verfügbaren NetBeans IDE Download Bundles.

2. Wählen Sie zum Herunterladen eine NetBeans IDE Version aus, welche die Technologie HTML5 unterstützt, z. B. die Variante „HTML5 & PHP“.

3. Installieren Sie NetBeans IDE.

Page 7: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten.

V1.0

► Web-Projekt über Kartenleser einrichten

► Syntax-Hervorhebung einrichten

► Demo-Projekt öffnen

► NetBeans IDE Installieren

► Web-Editor einrichten

► SIMOTION-Projekt vorbereiten

Demo-Projekt öffnen

Öffnen mit NetBeans IDE Öffnen Sie das Demo-Projekt über das „File“-Menü: In der „Projects“- Übersicht sehen Sie nun das neue HTML5-Projekt:

Öffnen mit anderem Web-Editor Die Quellcode-Dateien des Demo-Projekts befinden sich im Unterverzeichnis public_html des Demo-Projekts. Kopieren Sie den Inhalt von public_html in ein Verzeichnis Ihrer Wahl. Sie können die Quellcode-Dateien mit Ihrem bevorzugten Text- bzw. Web-Editor öffnen und bearbeiten.

Entpacken Sie die Datei CustomWebPagesTUTORIAL.zip. Sie enthält das Demo-Projekt mit den anwenderdefinierten Webseiten sowie zugehörige Konfigurationsdateien.

Page 8: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten.

V1.0

► Web-Projekt über Kartenleser einrichten

► Syntax-Hervorhebung einrichten

► Demo-Projekt öffnen

► NetBeans IDE Installieren

► Web-Editor einrichten

► SIMOTION-Projekt vorbereiten

Syntax-Hervorhebung für MWSL-Dateien in NetBeans IDE

Die HTML-Dateien Ihrer anwenderdefinierten Webseiten für SIMOTION müssen die Datei-Endung „.mwsl“ haben. Damit Sie im NetBeans-Editor die korrekte farbige HTML-Syntax-Hervorhebung angezeigt bekommen, machen Sie bitte die folgenden Einstellungen:

1. Öffnen Sie das Menü „Tools“ und wählen Sie den Eintrag „Options“

2. Im „Options“-Dialog wählen Sie „Miscellaneous“ und dann den Reiter „Files“

3. Klicken Sie auf „New…“ und fügen Sie die neue „mwsl“-Dateiendung hinzu.

4. Verknüpfen Sie die neue „mwsl“-Dateiendung mit dem Dateityp „HTML Files (text/html)“ und bestätigen Sie mit „OK“

Page 9: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten.

V1.0

• Anwender-definierte Webseiten 12

• Benutzer-verwaltung 11

• Webserver-Konfiguration 10

• Web-Projekt über Kartenleser einrichten 9

• Web-Editor einrichten 6

• SIMOTION-Projekt vorbereiten 3

Page 10: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten.

V1.0

► Anwender-definierte Webseiten

► Benutzer-verwaltung

► Webserver-Konfiguration

► Web-Projekt über Kartenleser einrichten

► Web-Editor einrichten

► SIMOTION-Projekt vorbereiten

Webserver-Konfiguration

In der Datei WebCfg.xml werden alle anwenderrelevanten Einstellungen des SIMOTION Webservers gespeichert.

1. Ziehen Sie die SIMOTION Speicherkarte aus der Steuerung und verbinden Sie die Speicher-karte über einen geeigneten CF-Kartenleser mit Ihrem Computer. ACHTUNG: Ziehen Sie die Karte nur im spannungsfreien Zustand aus der Steuerung!

2. Überschreiben Sie die Datei WebCfg.xml im folgenden Verzeichnis auf der Speicherkarte: \USER\SIMOTION\HMICFG Sie finden die vorbereitete WebCfg.xml in der Zip-Datei CustomWebPagesTUTORIAL.zip.

Page 11: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten.

V1.0

► Anwender-definierte Webseiten

► Benutzer-verwaltung

► Webserver-Konfiguration

► Web-Projekt über Kartenleser einrichten

► Web-Editor einrichten

► SIMOTION-Projekt vorbereiten

Benutzerverwaltung

Die Datei UserDataBase.xml ist die Benutzerdatenbank inklusive der Benutzergruppen für die Loginverwaltung des SIMOTION Webservers.

1. Überschreiben Sie die Datei UserDataBase.xml im folgenden Verzeichnis auf der Speicherkarte: \USER\SIMOTION\HMICFG\UserDataBase Sie finden die passend vorbereitete Benutzer-datenbank UserDataBase.xml für das Tutorial in der Zip-Datei CustomWebPagesTUTORIAL.zip.

2. Ergänzen Sie die Benutzerverwaltung bei Bedarf nach dem gegebenen Vorbild um weitere Benutzer. Editieren Sie hierzu die XML-Datei. Das Passwort für alle Benutzer in diesem Beispiel lautet: simotion

Benutzer Gruppe „Administrator“

Gruppe „Servicegroup“

Newton JA JA

Tesla JA Nein

Kepler Nein JA

Page 12: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten.

V1.0

► Anwender-definierte Webseiten

► Benutzer-verwaltung

► Webserver-Konfiguration

► Web-Projekt über Kartenleser einrichten

► Web-Editor einrichten

► SIMOTION-Projekt vorbereiten

1. Öffnen Sie das Verzeichnis des Demo-Projekts auf Ihrem Computer mit dem Datei-Explorer. Öffnen Sie das Unterverzeichnis public_html. Hier befinden sich die Quell-Dateien des Demo-Projekts.

2. Kopieren Sie die Datei user.mwsl sowie den Ordner DEMO vollständig auf die SIMOTION Speicherkarte in folgendes Verzeichnis: \USER\SIMOTION\HMI\FILES Dieser Pfad ist vorgesehen für alle Ihre anwenderspezifischen Dateien und Verzeichnisse.

3. Stecken Sie die CF-Karte wieder in die Steuerung.

Anwenderdefinierte Webseiten

Tipp: Bei eingeschalteter SIMOTION-Steuerung können Sie die Inhalte des FILES-Verzeichnisses auch unter Verwendung des FTP-Zugriffs aktualisieren.

Page 13: SIMOTION Tutorials Vorbereitungen zum SIMOTION … · Öffnen mit NetBeans IDE . Öffnen Sie das . Demo-Projekt . über das „File“-Menü: In der „Projects“- Übersicht sehen

Frei verwendbar / © Siemens AG 2015. Alle Rechte vorbehalten.

V1.0

Vielen Dank für Ihre Aufmerksamkeit!

siemens.com/answers