Willkommen zur S-Web Schulung Erster Tag. Dirk Speckhardt

Transkript

1 Willkommen zur S-Web Schulung Erster Tag Dirk Speckhardt 1

2 Vorbereitung S-Web Schulung PG5 Version installieren Sicherung der bestehenden Dateien nicht vergessen USB Stick: 00_Software/PG5_V /PG5 Suite/ Setup PG5 Suite V Lizenz PG5 V2.1 USB Stick: 00_Software/PG5_Lizenz_V2.1/ Registration.key und User.Key Restore Vorbereitetes PG5 Projekt USB Stick: 00_Software/PG5_Schulungs_Projekte/ Web8_Schulung_Lüftung_start.zip Einstellen der CPU und der IP-Adresse im Device Configurator Die IP-Adresse steht auf dem Workshopmodell PG5 Build ausführen Dadurch wird die Symboltabelle angelegt und dem WebEditor8 zur Verfügung gestellt 2

3 S-Web Schulung - Erster Tag Erster Tag: 09:00-09:30 Begrüßung / Kurze Vorstellung 09:30-10:45 Kapitel 1 Einführung und erster Projektstart 10:45-11:00 Kaffeepause 11:00-12:30 Kapitel 2 Erstellen von Seiten und Navigation 12:30-13:30 Mittagspause 13:30-14:45 Kapitel 3 Verknüpfung mit dem PCD Programm 14:45-15:00 Kaffeepause 15:00-16:30 Kapitel 4 Import von Anlagen / Visualisierung 3

4 Kapitel 1 Einführung und erster Projektstart 4

5 Übersicht der Bearbeitungsschritte einer Web Anwendung Applikationsprogramm mit PG5 erstellen (HLK Schulung) Übersetzen (Build) und Download des Programms um die PCD Variablen zur Verfügung zu stellen Anlegen eines WebEditor8 Projektes (*.sln) und Erstellung der Web-Seiten im Editor Download des WebEditor8 Programms per Webserver in die Steuerung Aufruf und Test der Web-Applikation z.b. mit einem Web-Browser 5

6 Applikationsprogramm mit PG5/FUPLA erstellen Die verwendeten PCD-Variablen müssen als Public Symbols definiert werden 6

7 Build und Download des PCD Programms mit PG5 Durch das Built werden die Symbol Variablen dem WebEditor8 zur Verfügung gestellt 7

8 Web Projekt erstellen mit dem WebEditor8 8

9 Download des Programms per im WebEditor8 integriertem Web-Server Der WebEditor8 hat einen eigenen Web-Server. Über diesen werden alle Download- Einstellungen bestimmt 9

10 Aufruf und Test des Web Projektes Im Web-Browser die IP-Adresse der PCD-Steuerung eingeben 10

11 Übersicht der wichtigsten Begrifflichkeiten PCD Variable Symbol Variablen aus der PCD-Steuerung INT Variable Interne Variablen die in dem WebEditor8 Programm angelegt wurden CSV Datei Dadurch kann eine Mehrsprachigkeit und die Alarmtexte bestimmt werden WEV (WebEditor8 View Datei) Die textbasierte (XML) Seiten auf denen die Visualisierung erstellt wird. Aus diesen werden die für die Steuerung benötigen TEQ Dateien generiert WVAR (WebEditor8 Variablen) Die WVAR Datei enthält die Min/Max Werte, die Formate und die Einheiten der PCD Variablen, sowie die Initialisierungswerte für die interne Variablen. Aus diesen Dateien werden die für die Steuerung benötigten TCR und ITQ Dateien generiert 11

12 Willkommenseite Links zu Webseiten von Saia-Burgess Einfaches erstellen neuer und öffnen bestehender Projekte Schnellzugriff auf die zuletzt bearbeiteten Projekte 12

13 Neues Projekt starten Neues Projekt auswählen (Später erscheinen dort mehrere Projektvorlagen) Projektname und Speicherort bestimmen 13

14 Neues Projekt starten Auswahl des PCD Typen (Classic / xx7) Pfad zur PG5 CPU angeben (Der WebEditor findet dort automatisch die Symbole, Kommunikationseinstellungen, HDLog Dateien usw) (Wird beim Start aus dem PG5 automatisch eingestellt) Konfiguration der gewünschte Auflösung Alle Einstellungen können nachträglich durch Doppelklick auf das Projekt in der Projektmappe geändert werden 14

15 Übersicht über die Anwendungsfenster 15

16 Menüleiste In der Menüleiste sind alle geöffneten Views sichtbar (Diese können ausgewählt werden, ohne das sie neu geladen werden müssen) Die Tabs, die beim Schließen des Projektes offen sind, werden bei einem Neustart automatisch wieder geöffnet 16

17 Fensterpositionen Alle Fenster können beliebig im Projekt platziert werden Sie können komplett oder automatisch ausgeblendet, frei schwebend oder auch permanent platziert werden Versteckte Fenster können über den Menüpunkt Ansicht -> Fenster sichtbar gemacht werden 17

18 Verschieben von Fenstern Verschieben mit Drag&Drop auf die Namensleiste, Andockbar an bestehende Fenster Verschieben als frei platzierbares Fenster, unabhängig von der Position der anderen Fenster 18

19 Schnelle Navigation zwischen Fenstern Die Tastenkombination Strg-Tab öffnet ein Auswahlfenster Mit mehrmaligen Druck auf Tab kann schnell zwischen den Fenstern hin und her gewechselt werden 19

20 Projektmappe Die Projektmappe zeigt die Datei-Struktur der in ihr vorhandenen Projekte Eine Projektmappe kann mehrere Web Projekte enthalten Projektdateien können in Unterverzeichnissen organisiert werden. (Bilder werden z.b. automatisch in das Media-Verzeichnis gelegt) Einmaliger Linksklick auf eine Datei zeigt deren Eigenschaften im Eigenschaftenfenster an Doppelklick auf eine Datei öffnet diese im Editor zum bearbeiten 20

21 Zeichnungsfläche (View) Elemente ausserhalb der aktuellen Gruppe und unsichtbare Elemente werden Transparent dargestellt Anzeige und Auswahl des Zoomfaktors Ereignisboxen sind nicht sichtbar, die zu einem Element gehörenden werden in einem extra Bereich unterhalb der View dargestellt Im Beispiel ist die Gruppe Logout Button auf der Hauptebene Main Layer ausgewählt 21

22 Zeichenmenüs der View Positionsmenü: Gruppieren, Kanten & Zentren ausrichten, Höhe & Breite ändern und die Abstände der Elemente automatisch anpassen Werkzeugleiste: Verschiedene Werkzeuge zum zeichnen und einfügen von Elementen 22

23 Dokumenten Entwurf Dies Fenster gibt eine Übersicht über den Aufbau der Ebenen, Gruppen und Elemente der aktuellen View Hier lässt sich ein Element direkt auswählen, egal auf welcher Ebene oder in welcher Gruppe es sich befindet Ebenen Dieses Fenster bietet eine Übersicht aller Ebenen in der aktuell geöffneten View Ebenen können erstellt, verschoben oder auch gelöscht werden Alle Ebenen auch Hinter- und Vordergrund-View lassen sich ausblenden und sperren Verstecken und sperren haben keine Auswirkung auf die Laufzeit-Visualisierung 23

24 Symbole Symbole werden vom vorher konfigurierten PG5 Projektpfad übernommen und automatisch aktualisiert Um Symbole schnell zu finden, verfügt das Fenster über eine inkrementelle Suchfunktion 24

25 Bibliothek Im Bibliothek-Fenster sind alle intern verfügbaren Elemente, Bilder und Vorlagen aufgelistet Auch die Bibliothek kann inkrementell durchsucht werden Doppelklick auf ein Element in der Bibliothek fügt dieses in die geöffnete View ein 25

26 Eigenschaften: Allgemein Hier werden alle Eigenschaften und einfache Bedingungen des Elementes angelegt Die sichtbaren Einstellungen gelten für die aktuell gewählte Bedingung Ein Element kann mehrere Bedingungen mit unterschiedlichen Eigenschaften haben Für mehrere selektierte Elemente kann die gleiche Bedingung angelegt werden Sind mehrere Elemente ausgewählt, so werden nur deren gemeinsame Einstellmöglichkeiten angezeigt 26

27 Eigenschaften: Aktionen Hier können einfache Aktionen oder komplexe Funktionen ausgeführt werden, wenn z. B. Schaltflächen gedrückt / losgelassen werden Es können zudem Funktionstasten bestimmt werden, die in Verbindung von MicroBrowser Panel, deren Funktionen ausführen 27

28 Eigenschaften: Zugriff Hier kann festgelegt werden, welche Benutzergruppen Aktionen für das ausgewählte Element ausführen dürfen Elemente können für nicht berechtigte Benutzergruppen unsichtbar gemacht werden Ist nichts ausgewählt, findet keine Prüfung statt und jede Benutzergruppe darf alle Aktionen ausführen 28

29 Eigenschaften: Sonstige Dieser Bereich ist für die Unterstützung beim Erstellen und Pflegen von grossen Visualisierungsprojekten (Hat keine Auswirkung auf die laufende Visualisierung) Die ausgewählten Elemente, können gegen Veränderung geschützt, umbenannt und beschrieben werden 29

30 Querverweistabelle Filtern und inkrementelle Suche Zugehörigkeit zum Element und der Eigenschaft Anzeige des aktuellen und neuen Wert Farben und Schriften können in der Tabelle verändert werden Es können mehrere Elemente selektiert und gleichzeitig geändert werden Suchen & Ersetzten Funktion 30

31 Bedingungseditor Es können einfache und komplexe Bedingungen erzeugt werden Bedingungen werden für die Konfiguration von Elementeigenschaften verwendet Bedingungen lassen sich fast beliebig komplex gestalten Variablen können direkt mit anderen Variablen verglichen werden 31

32 Funktionseditor Der Funktionseditor besitzt ähnliche Funktionen wie der Bedingungseditor Zusätzlich ermöglicht dieser das Programmieren von Aktionen in einer einfachen tabellenartigen Struktur Dieser Editor sollte für die eigentliche Visualisierung verwendet werden, die Programm Schaltlogik sollte im Anwenderprogramm erstellt werden Bei einem Projektimport von WebEditor5 auf WebEditor8 werden die alten verknüpften Funktionen in diesen Editor sichtbar 32

33 Variablen Seite *.wvar Bei den internen Variablen INT können die Initialisierungswerte bestimmt werden Bei den externen Variablen PCD können die Formate, Einheiten und Min/Max Werte bestimmt werden Über den Aktualisierungsbutton werden die nicht verwendeten Variablen aus der Liste gelöscht 33

34 Projektoptionen: Konfiguration Ein Doppelklick auf das Projekt in der Projektmappe öffnet das Fenster mit den Projektoptionen Konfiguration: PCD Typ, Link zum PG5 Projekt, Standard Auflösungen Wird der WebEditor8 aus dem PG5 gestartet, dann wird automatisch das richtige CPU Verzeichnis eingefügt 34

35 Projektoptionen: Erstellen und Laufzeit Bei Erstellen wird die Positionierung und die Skalierungen eingestellt Bei Laufzeit wird die Start View des Projektes eingestellt 35

36 Projektoptionen: Download Art des Download s (FTP-Server PCD) und deren IP-Adresse Eingabe des Service Key s (Muss im Device Configurator besimmt sein) Angabe des Ziel-Speichers Auswahl der Dateien für den Download Hilfreiche Download Optionen Der WebEditor8 verfügt über einen integrierter Web-Builder. Der Download des Web Projektes wird daher separat im Editor ausgeführt 36

37 Erzeugen und herunterladen der WebEditor8 Dateien C:\Users\Public\Saia-Burgess\PG5_21\Projects\Web8_Schulung\Schulungsprojekt\... Projekt erstellen Projekt download \WebEditor8\WebEditor8 \WebEditor8\WebEditor8\bin Erzeugen *.html *.html *.wvar $*.itq / $*.tcr *.PCD (Datei) *.wev *.teq *.gif $*.gif Download *.csv *.csv Java Java PCD 37

38 Start eines neuen WebEditor8 Projektes Namensgabe max. 23 Buchstaben für Dateien welche ins Flash File System geladen werden sollen 38

39 Das Konfigurations-Tool startet sich Hier werden die Projekteigenschaften eingestellt (Auflösung und Ausrichtung) 39

40 Darstellung der Projektmappe beim Start eines neuen WebEditor8 Projektes Die Projektmappe beinhaltet ein Web Projekt Die *.wev Dateien sind die Visualisierungsseiten des Projektes Die *.wvar Datei beinhaltet die INT und PCD Variablen 40

41 Sprachumschaltung Die Umschaltung der Sprache wird erst nach Neustart aktiv Zusätzlich kann die Sichtbarkeit der Willkommenseite eingestellt werden 41

42 Folgende Fenster benutzen wir in dieser Web-Schulung - Ebenen - Symbole - Dokumentenentwurf - Bedingungseditor - Funktionseditor - Bibliothek - Eigenschaften (Es werden immer die Eigenschaften des aktuell ausgewählten Elementes angezeigt) 42

43 Fenster verschieben Mit rechter Maustaste auf oberen Fensterrand klicken um das Fenstermenü zu öffnen Wenn das Fenster Frei platziert ist, wieder an die vorherige Position andocken Mit linker Maustaste an oberen Rand klicken und an beliebige Position verschieben 43

44 Das folgende Bild zeigt eine bewährte Anordnung der Fenster 44

45 Navigieren in der WebEditor8 View Scrollen der View mit dem Mauszeiger auf den seitlichen Fensterbalken Ctrl + Mausrad: Rein- und Rauszoomen Shift + Mausrad: Navigieren nach rechts und links Mausrad: Navigieren nach oben und unten 45

46 Bei den Projektoptionen stellen wir das Raster der Seiten ein Bei Raster können die Eigenschaften der Ausrichtungslinien der View eingestellt werden 46