HLK Schulung S-Web. Dirk Speckhardt

Transkript

1 HLK Schulung S-Web Dirk Speckhardt 1

2 Kapitel 1 Einführung und erster Projektstart 2

3 Kapitel 1 Einführung und erster Projektstart Ü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 3

4 Kapitel 1 Einführung und erster Projektstart Applikationsprogramm mit PG5/FUPLA erstellen Die verwendeten PCD-Variablen müssen als Public Symbols definiert werden 4

5 Kapitel 1 Einführung und erster Projektstart Build und Download des PCD Programms mit PG5 Durch das Built werden die Symbol Variablen dem WebEditor8 zur Verfügung gestellt 5

6 Kapitel 1 Einführung und erster Projektstart Web Projekt erstellen mit dem WebEditor8 6

7 Kapitel 1 Einführung und erster Projektstart Download des Programms per im WebEditor8 integriertem Web-Server Der WebEditor8 hat einen eigenen Web-Server. Über diesen werden alle Download- Einstellungen bestimmt 7

8 Kapitel 1 Einführung und erster Projektstart Aufruf und Test des Web Projektes Im Web-Browser die IP-Adresse der PCD-Steuerung eingeben 8

9 Kapitel 1 Einführung und erster Projektstart Ü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 9

10 Kapitel 1 Einführung und erster Projektstart Willkommenseite Links zu Webseiten von Saia-Burgess Einfaches erstellen neuer und öffnen bestehender Projekte Schnellzugriff auf die zuletzt bearbeiteten Projekte 10

11 Kapitel 1 Einführung und erster Projektstart Neues Projekt starten Neues Projekt auswählen (Später erscheinen dort mehrere Projektvorlagen) Projektname und Speicherort bestimmen 11

12 Kapitel 1 Einführung und erster Projektstart 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 12

13 Kapitel 1 Einführung und erster Projektstart Übersicht über die Anwendungsfenster 13

14 Kapitel 1 Einführung und erster Projektstart 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 14

15 Kapitel 1 Einführung und erster Projektstart 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 15

16 Kapitel 1 Einführung und erster Projektstart 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 16

17 Kapitel 1 Einführung und erster Projektstart 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 17

18 Kapitel 1 Einführung und erster Projektstart 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 18

19 Kapitel 1 Einführung und erster Projektstart Zeichnungsfläche (View) Elemente ausserhalb der aktuellen Gruppe und unsichtbare Elemente werden Transparent dargestellt Ereignisboxen sind nie sichtbar, sie werden in einem extra Bereich unterhalb der View dargestellt Es werden immer nur die Ereignisse angezeigt, die mit dem ausgewählten Element verbunden sind Anzeige und Auswahl des Zoomfaktors 19

20 Kapitel 1 Einführung und erster Projektstart Gruppe und Ebenen Es können fast beliebig viel Gruppen und Untergruppen angelegt werden In der View können nur Elemente der aktuell ausgewählten Gruppe bearbeitet werden Im Beispiel ist die Gruppe Logout Button auf der Hauptebene Main Layer ausgewählt Ein direkter Klick auf eine Gruppe wählt alle darin enthaltenen Elemente aus 20

21 Kapitel 1 Einführung und erster Projektstart 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 21

22 Kapitel 1 Einführung und erster Projektstart 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 22

23 Kapitel 1 Einführung und erster Projektstart 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 23

24 Kapitel 1 Einführung und erster Projektstart 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 24

25 Kapitel 1 Einführung und erster Projektstart 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 25

26 Kapitel 1 Einführung und erster Projektstart 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 26

27 Kapitel 1 Einführung und erster Projektstart 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 27

28 Kapitel 1 Einführung und erster Projektstart 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 28

29 Kapitel 1 Einführung und erster Projektstart 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 29

30 Kapitel 1 Einführung und erster Projektstart 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 30

31 Kapitel 1 Einführung und erster Projektstart Funktionseditor Der Funktionseditor besitz ä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 31

32 Kapitel 1 Einführung und erster Projektstart 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 32

33 Kapitel 1 Einführung und erster Projektstart 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 33

34 Kapitel 1 Einführung und erster Projektstart Projektoptionen: Erstellen und Laufzeit Bei Erstellen wird die Positionierung und die Skalierungen eingestellt Bei Laufzeit wird die Start View des Projektes eingestellt 34

35 Kapitel 1 Einführung und erster Projektstart 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 35

36 Kapitel 1 Einführung und erster Projektstart 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 36

37 Kapitel 1 Einführung und erster Projektstart Start eines neuen WebEditor8 Projektes Namensgabe max. 24 Buchstaben für Dateien welche ins Flash File System geladen werden sollen 37

38 Kapitel 1 Einführung und erster Projektstart Das Konfigurations-Tool startet sich Hier werden die Projekteigenschaften eingestellt (Auflösung und Ausrichtung) 38

39 Kapitel 1 Einführung und erster Projektstart 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 39

40 Kapitel 1 Einführung und erster Projektstart Sprachumschaltung Die Umschaltung der Sprache wird erst nach Neustart aktiv Zusätzlich kann die Sichtbarkeit der Willkommenseite eingestellt werden 40

41 Kapitel 1 Einführung und erster Projektstart 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) 41

42 Kapitel 1 Einführung und erster Projektstart 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 42

43 Kapitel 1 Einführung und erster Projektstart Das folgende Bild zeigt eine bewährte Anordnung der Fenster 43

44 Kapitel 1 Einführung und erster Projektstart 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 44

45 Kapitel 1 Einführung und erster Projektstart Bei den Projektoptionen stellen wir das Raster der Seiten ein Bei Raster können die Eigenschaften der Ausrichtungslinien der View eingestellt werden 45

46 Kapitel 2 Erstellen von Seiten und Navigation 46

47 Kapitel 2 Erstellen von Seiten und Navigation Als nächstes fügen wir einen Ordner mit eigenen Bildern ein Mit rechter Maustaste auf WebEditor8 klicken Über den Browser auf dem USB Stick, den Ordner Media aus 02_PG5 Projekte / Vorlage / auswählen und das Häkchen davor setzen Anschließend alle auswählen und mit OK den Ordner in das Web-Projekt Verzeichnis kopieren 47

48 Kapitel 2 Erstellen von Seiten und Navigation Hinweis Fenster beim Einfügen externer Dateien Für die Schulung wählen wir Datei in Verzeichnis kopieren aus Durch das gesetzte Häkchen, erscheint diese Abfrage nicht mehr 48

49 Kapitel 2 Erstellen von Seiten und Navigation Erstellen der Startseite Doppelklick auf die Start.wev Seite, dann das Bild Saia_NI.jpg einfügen und die Größe/Position anpassen 49

50 Kapitel 2 Erstellen von Seiten und Navigation Es existieren zwei Quellenangaben für die eingefügten Bilder Aus der internen Bibliothek: Elemente die bereits in das Projekt geladen wurden, sind im Auswahlmenü verfügbar Aus einer externen Quelle: Externen Bilder werden im Ordner Media abgelegt. Ist dieser noch nicht vorhanden, wird dieser beim Einfügen eines externen Bildes automatisch im Projekt angelegt 50

51 Kapitel 2 Erstellen von Seiten und Navigation Nun fügen wir nacheinander 3 neue Seiten mit folgenden Namen ein - Hintergrund - Zuluft - Test 51

52 Kapitel 2 Erstellen von Seiten und Navigation Mit den nächsten Schritten erstellen wir eine Hintergrundseite 52

53 Kapitel 2 Erstellen von Seiten und Navigation Mit Doppelklick auf die Seite Hintergrund öffnen wir diese zum bearbeiten Folgende Elemente fügen wir aus der internen Bibliothek per Doppelklick ein Hintergrundbild: GE9902_S Elemente rechts unten: GE0039_S, GE0015_S, GE0023_S Die automatisch erscheinende Querverweistabelle können wie mit OK bestätigen 53

54 Kapitel 2 Erstellen von Seiten und Navigation Für die Elemente links oben verwenden wir das Button Tool Beim Inhalt für die Schalter wählen wir das Format Datei aus und fügen folgenden Bilder aus dem Ordner Media ein Test.gif, Zuluft.gif, Lueftung.gif, WarmWasser.gif Den Text Web8 Schulung + Platznummer fügen wir als csv mit dem Textwerkzeug Ab ein 54

55 Kapitel 2 Erstellen von Seiten und Navigation Die Elemente können auch automatisch ausgerichtet werden Zuerst wählen wir die Elemente aus, die ausgerichtet werden sollen Mit shift / strg und linker Maustaste Die Horizontale Ausrichtung, an dem zuerst ausgewählten Element ausrichten Die ausgewählten Elemente mit den gleichen Abständen ausrichten 55

56 Kapitel 2 Erstellen von Seiten und Navigation Automatische Auswahl der originalen Bildgröße Öffnen des Menüs mit rechter Maustaste auf das Bild 56

57 Kapitel 2 Erstellen von Seiten und Navigation Beim Reiter Aktionen stellen wir ein, welche Aktionen dem Element zugewiesen werden sollen View Öffnen -> Zuluft View Öffnen -> Lueftung (manuelle Eingabe) View Öffnen -> WarmWasser (manuelle Eingabe) View Öffnen -> Start Die Handbedienung stellen wir später ein 57

58 Kapitel 2 Erstellen von Seiten und Navigation Zum Schluss sollte unsere Hintergrundseite wie folgt aussehen 58

59 Kapitel 2 Erstellen von Seiten und Navigation Als nächstes erstellen wir eine Testseite 59 59

60 Kapitel 2 Erstellen von Seiten und Navigation Verknüpfung mit der Hintergrundseite Wir gehen auf die Seite Test und öffnen deren Eigenschaften mit einem Linksklick auf die leere Seite Anschließen verknüpfen wir diese mit der Hintergrundseite Die Seite Test wird nun mit dem Hintergrund angezeigt Wir fügen auch auf der Startseite diesen Hintergrund ein 60

61 Kapitel 2 Erstellen von Seiten und Navigation Folgend die Einstellungen für die einzelnen Elemente EclipseTool LineTool RectangleTool 61

62 Kapitel 2 Erstellen von Seiten und Navigation Folgend die Einstellungen für die einzelnen Elemente PolygonTool Für die Füllfarbe eines Elementes, kann eine eigene Farbe bestimmt werden Einzelne Punkte des Polygons, können nachträglich verschoben, hinzugefügt, oder gelöscht werden 62

63 Kapitel 2 Erstellen von Seiten und Navigation Die Testseite sollte so aussehen 63

64 Kapitel 3 Verknüpfung mit dem PCD Programm 64 64

65 Kapitel 3 Verknüpfung mit dem PCD Programm Als nächstes öffnen wir die Seite Zuluft Dort fügen wir ebenfalls die Hintergrundseite ein Nun erstellen wir folgendes einfaches Lüftungsschema 65

66 Kapitel 3 Verknüpfung mit dem PCD Programm Wir fügen zu erst folgende Elemente ein Gelbe Linie (als Lüftungsstrang) Schwarze Ellipse (als Lüfter) Die beiden folgenden Elemente aus der Bibliothek: GE1404_S, AC0883_S Zwei Textlayer (Ab) Bei dem linken Textlayer und dem Icon aktivieren wir bei den Eigenschaften den Umriss mit der Stärke 1 66

67 Kapitel 3 Verknüpfung mit dem PCD Programm Wir gruppieren den Textlayer ( C) und das Icon GE1404_S Mit der Maus eine Auswahl über beide Elemente ziehen Mit der rechten Maustaste das Menü aufrufen und die Auswahl gruppieren Im Dokumentenentwurf wird sichtbar, dass die beiden Elmente nun in einer Gruppe eingebunden sind 67

68 Kapitel 3 Verknüpfung mit dem PCD Programm Rechts oben auf der Seite Zuluft den Bereich für den Sollwert anlegen Für das Eingabefeld unter dem Sollwert verwenden wir das EditBoxTool Element Für die Temperatureinheit kopieren wir die soeben erstellte Gruppe und fügen diese ein weiteres Mal ein Den Text Sollwert legen wir mit dem Textlayer (ab) an 68

69 Kapitel 3 Verknüpfung mit dem PCD Programm Nun fügen wir einen Bargraphen mit folgenden Einstellungen ein 69

70 Kapitel 3 Verknüpfung mit dem PCD Programm PCD Variablen können auf zwei Arten eingefügt werden Per File Browser Per Drag&Drop aus dem Symbole Fenster 70

71 Kapitel 3 Verknüpfung mit dem PCD Programm Verwenden von Bedingungen in den Eigenschaften der Ellipse für die Farbumschaltung mittels des PCD3.S100 Workshopmodel Ist der Digitalen Eingang 1 für Betrieb, dann gelten diese Bedingungen Die kursive Schrift zeigt eine Veränderung gegenüber dem Standardwert an. Kann mit rechter Maustaste zurück gesetzt werden 71

72 Kapitel 3 Verknüpfung mit dem PCD Programm Als nächstes bestimmen wir die zweite Bedingung für die Farbumschaltung der Ellipse Ist der Digitalen Eingang 0 für Störung, dann gelten diese Bedingungen 72

73 Kapitel 3 Verknüpfung mit dem PCD Programm Die Bedingungen für die jeweiligen Elemente werden zusätzlich im Bedingungseditor sichtbar und können dort auch bearbeitet werden Es ist sichtbar, welches Element Besitzer der Bedingung ist Im Bedingungseditor können die einzelnen Bedingungen beliebig erweitert und verknüpft werden 73

74 Kapitel 3 Verknüpfung mit dem PCD Programm Nun verknüpfen wir die restlichen 3 Elemente mit den PCD Variablen um diese mit dem PCD3.S100 zu steuern Im Device Configurator wurde das Media Mapping schon voreingestellt 74

75 Kapitel 3 Verknüpfung mit dem PCD Programm Anpassen der PCD Variablen Formate für die Zuluft DEC.1 Bedeutet Dezimal mit einer Kommastelle 75

76 Kapitel 3 Verknüpfung mit dem PCD Programm Überprüfen der Download Optionen (Doppelklick auf das Projekt) Einstellen der IP-Adresse, des Speicherorts und welche Elemente heruntergeladen werden sollen Durch den ServiceKey kann der WebEditor eindeutig beim FTP-Server identifiziert werden Und die Benutzerdatenbank kann heruntergeladen werden Durch die Auswahl Aktualisieren wenn möglich wird der Download beschleunigt Ist noch kein Download bestimmt kann über Ziel hinzufügen ein Neues Ziel angelegt werden 76

77 Kapitel 3 Verknüpfung mit dem PCD Programm Eintragen des Service Key s im Device Configurator Die Benutzerdatenbank für das Login, kann nur heruntergeladen werden, wenn ein Service Schlüssel eingestellt wurde Diese Art der Authentifizierung wird ab der Firmware Version 1.22.xx unterstützt 77

78 Kapitel 3 Verknüpfung mit dem PCD Programm Built und Download Build Eventuelle Fehler und Warnungen werden nach dem Built angezeigt Doppelklick auf die Meldung, springt direkt zu dem jeweiligen Element Download Durch das Öffnen der Details kann der Download verfolgt werden Durch Stop der PCD wird der Download beschleunigt 78

79 Kapitel 3 Verknüpfung mit dem PCD Programm Ansicht der Seite Test über den Browser Standardmäßig ist im Device Configurator die Startseite start.htm eingestellt, daher muss diese nicht extra im Browser eingetragen werden 79

80 Kapitel 3 Verknüpfung mit dem PCD Programm Ansicht der Seite Zuluft über den Browser Das Sollwertfeld ist ein Eingabefeld Die Ellipse wird über den digitalen Input I0 an und aus geschaltet Die Temperatur wird durch den analogen Input CH1 geregelt 80

81 Kapitel 4 Import von Anlagen und Visualisierung 81

82 Kapitel 4 Import von Anlagen / Visualisierung Unter Verwendung von Vorlageobjekte erstellen wir eine Lüftungsseite 82

83 Kapitel 4 Import von Anlagen / Visualisierung Verwendung der DDC-Suite Makros Im Fupla können bereits vorhandenen Vorlageobjekte importiert werden Mit rechter Maustaste das Auswahlmenü öffnen Im dem Schulungsprojekt ist die Lüftungsanlage bereits importiert worden 83

84 Kapitel 4 Import von Anlagen / Visualisierung Dort wurde die 1-stufige Lüftung ausgewählt und eingefügt Die Funktionen der Makros und deren Bezeichnungen sind die selben, wie die in der WebEditor8 Bibliothek 84

85 Kapitel 4 Import von Anlagen / Visualisierung Import des Schemas der 1-stufigen Lüftung aus der WebEditor8 Bibliothek Zuerst erstellen wir eine neue Seite Lueftung und fügen dort unsere Hintergrundseite ein Aus der interne Bibliothek fügen wir das zum HLK Fupla-Programm passende Lüftungsschema ein Die Ordner in der Bibliothek haben die gleiche Bezeichnung wie die Anlagenmakros in den Fupla Importvorlagen Das Makro Schema ist die eigentliche Anlage. Die weiteren Makros sind die dazugehörigen Anlagenteile 85

86 Kapitel 4 Import von Anlagen / Visualisierung Nach dem Doppelklick auf das Makro erscheint folgende Seite Durch die auswählbaren Gruppennamen werden die WebEditor8 Makros mit den passenden Variablen aus dem Fupla verknüpft 86

87 Kapitel 4 Import von Anlagen / Visualisierung Die Querverweistabelle kann auch nachträglich geöffnet werden Die gewünschten Elemente markieren, mit rechter Maustaste das Menü und dann die Querverweistabelle öffnen 87

88 Kapitel 4 Import von Anlagen / Visualisierung Wenn dem Makro z.b. ein anderer Gruppenname zugewiesen werden soll, dann kann dieser nachträglich über suchen und ersetzten geändert werden 88

89 Kapitel 4 Import von Anlagen / Visualisierung Durch ein paar wenige Klicks haben wir die Lüftungsanlage visualisiert 89

90 Kapitel 4 Import von Anlagen / Visualisierung Erstellen der Visualisierung der kompletten Anlage Als nächstes legen wir die Anwendersteuerungsseiten an Zur besseren Übersicht erstellen wir einen Ordner Lueftungsanlage und legen dort die neuen Seiten an Rechte Maustaste auf Projekt / Hinzufügen / Neue Ordner Jedes Makro wird auf einer eigenen Seite eingefügt 90

91 Kapitel 4 Import von Anlagen / Visualisierung Hinzufügen von bereits existierenden Seiten aus dem Ordner Vorlagen 91

92 Kapitel 4 Import von Anlagen / Visualisierung Nach dem Einfügen müssen die Seite auf Compile gestellt werden Das Menü wird mit der rechten Maustaste geöffnet Es können mehrere Seiten markiert werden und gleichzeitig umgestellt werden Nach dem Import der Anlagen muss die Variablenliste variables.wvar aktualisiert werden, damit alle Adressen richtig vergeben werden 92

93 Kapitel 4 Import von Anlagen / Visualisierung Built und Download des Projektes Build Download Durch das Häkchen bei Aktualisieren wenn möglich in den Projektoptionen, werden nur die Neuerungen heruntergeladen 93

94 Kapitel 4 Import von Anlagen / Visualisierung Online Ansicht der Seite Lueftung über einen Browser Über die analogen Regler CH0 bis CH4 können die Werte geregelt werden 94

95 Kapitel 4 Import von Anlagen / Visualisierung Einstellung der IP-Adresse in dem Panel Das Panel Menü öffnen, indem der Bildschirm ca. 5 sek gedrückt wird Netzwerk und Web-Verbindung ändern (IP-Adressen liegen auf dem Platz) 95

96 Kapitel 4 Import von Anlagen / Visualisierung Online Ansicht der Seite Test und Zuluft und Lueftung über das Web Panel 96

97 Kapitel 4 Import von Anlagen / Visualisierung Optionaler Download der Saia-App 97

98 Kapitel 4 Ausblick auf den S-Web Kurs Der Saia WebEditor8 ist noch deutlich leistungsfähiger. Folgende Funktionen werden im aufbauenden S-Web Kurs behandelt: Benutzermanagement (Login) Historische Datenaufzeichnung (Onlinetrend und Offlinetrend) Alarming Bedingungseditor für dynamische Darstellungen Funktionseditor für logische Verknüpfungen Sprachumschaltung Visualisierung von mehreren Steuerungen IT-Sicherheit Erweitertes Design 98

99 Kapitel 4 Import von Anlagen / Visualisierung Offene Fragen? 99