S-Web + IT. September 2011 I Saia-Burgess Controls GmbH & Co. KG Michael Anzinger Klaus Tafferner

Transkript

1 S-Web + IT September 2011 I Saia-Burgess Controls GmbH & Co. KG Michael Anzinger Klaus Tafferner

2 Organisatorisches zum S-Web Basiskurs Beginn 09:00, Ende 16:30 Kaffeepause ca. 10:15 10:30 Mittagspause ca. 12:15 13:15 Kaffeepause ca. 15:00 15:15 Kurseröffnung Ablauf und Inhalt des Kurses Kurzvorstellung der Teilnehmer Kurzvorstellung des Saia PCD Supports Hinweise zu den Schulungsunterlagen Infos zu Arbeitsplatz und Vernetzung 2

3 Organisation Support Neu-Isenburg Leiter Support Hr. Ralf Petry Teamassistentin Fr. Reyan Tokay Hr. Christian Fohlert Hr. Singh Khalsa Hr. Michael Anzinger Hr. Lothar Höger Hr. Christian Raab 3

4 Aufgaben des Saia PCD Supports in Deutschland Anwenderunterstützung bei technischen Fragen/Problemen Erstellung von Beispielen und ergänzenden technischen Informationen Technische Unterstützung des Vertriebs Konzeption und Durchführung von Schulungen Organisation und Durchführung von Infotagen Planungs- und Projektierungsunterstützung (nur für OEM) Und vieles mehr 4

5 Wie erreichen Sie den Saia-Support? Saia-Burgess Controls GmbH & Co. KG Siemensstraße Neu-Isenburg Telefon Helpline: Support-Homepage: Support pcdhilfe@saia-burgess.de Fallannahme: Mo-Do 8.00h h Fr 8.00h h 5

6 Wichtige Internet-Adressen internationale Homepage von Saia-Burgess Controls (auch in Deutsch) allgemeine Unternehmensinfos und Produktüberblick gut zur Erstinformation von Endkunden, Planern etc. geeignet alle Saia-Datenblätter, Handbücher und weitere Dokumentationen aktuelle Firmware und Software (u.a. PG5 2.0 und Web-Editor ) Beispielprojekte ( Getting Started ) FAQ-Manager (häufig gestellte Fragen plus Antworten, Tipps & Tricks) Zertifikate (ISO 9001, WEEE, ROHS, CE, ) Informationen über Saia-Burgess Controls Deutschland ftp://sbc-support.de FTP-Server für Datenaustausch Benutzer: saia Passwort: saia 6

7 Saia Hardware für Web-Anwendungen

8 CPU-Übersicht für S-Web (Web-Server) gut geeignet geeignet nicht geeignet CPU en mit Saia NT Betriebssystem CPU PCD1.M2120 RAM Disk 32 KB Ethernet On-Board HTTP direkt Web- Server FTP- Server Flash R550M04 Flash SD-Card Flash Intern 8 MB PCD2.M KB On-Board PCD3.M233A4Tx 32 KB On-Board PCD3.M2130V6 32 KB On-Board PCD3.M KB On-Board PCD3.M KB PCD3.M KB On-Board PCD3.M KB On-Board PCD3.M KB On-Board PCD3.M KB On-Board 16 MB PCD3.M KB On-Board 16 MB (Stand 09/2011) 8

9 CPU-Übersicht für S-Web (Web-Server) gut geeignet geeignet nicht geeignet CPU Web- Server RAM Disk Ethernet HTTP direkt FTP- Server Flash R550M04 Flash SD-Card PCS1.C6/C8 8 KB Flash Intern PCD1.M KB PCD1.M KB Optional PCD2.M KB Optional PCD2.M KB Optional PCD2.M KB Optional PCD2.M110/120 PCD4.M KB Optional (Stand 09/2011) 9

10 Saia Web Panel Familie (Web-Clients) Leistung Saia Web Panel CE / exp Intel Atom Z PCD7.D5100TA010 (CE) PCD7.D6100TA010 (exp) Saia Web Panel mit Atom-Prozessor z.zt. in Vorbereitung PCD7.D5150TA010 (CE) PCD7.D6150TA010 (exp) Saia Web Panel CE / exp AMD Geode LX PCD7.D5100TL010 (CE) PCD7.D6100TL010 (exp) PCD7.D5120TL010 (CE) PCD7.D6120TL010 (exp) PCD7.D5150TL010 (CE) PCD7.D6150TL010 (exp) Saia Web Panel Micro Browser Coldfire PCD7. D435TLCF PCD7.D457xxx PCD7.D410VTCF PCD7.D412DTPF Alles Bruttopreise! 3,5 5,7 6, Displaygröße 10

11 Flash-Speichermodule mit Saia File System (SFS) PCD7.R560/R561 BACnet-Modul / mit 1 MB Dateisystem PCD3.R550M04 für I/O Slot 0..3 mit Dateisystem PCD3.R600 SD Flash-Cards für I/O Slot 0..3 (256/512 MB) mit Dateisystem PCD7.R55xM04 4 MB Dateisystem / 3 MB Datei + 1 MB Backup Die kompakte PCD3.M2x30V6 hat bereits 1 MB Flash-Speicher mit Dateisystem on board! PCD7.R500 1 MB Backup 11

12 Software-Werkzeuge für S-Web-Anwendungen

13 Software-Werkzeuge für S-Web-Anwendungen von Saia-Burgess: Saia S-Web-Editor (kostenpflichtiges PG5 Add-on, Brutto-Listenpreis: ) Saia Web-Builder (kostenfrei) Saia Web-Connect (kostenfrei) von Drittanbietern: Java Runtime Environment (kostenfrei, für Windows, Linux, Mac OS etc. verfügbar) FTP-Client z.b. Filezilla (kostenfrei, quelltextoffen, für Windows und Linux verfügbar, kann Probleme verursachen) Total Commander (Shareware ca.26 ) Staff-FTP (Kostenfrei, muss konfiguriert werden) FastStone Image Viewer (Kostenfrei, Gifs editieren) Free Commander (Kostenfrei) 13

14 Zusammenspiel der S-Web Werkzeuge PG5 Editoren Compiler Assembler Linker Debugger. Project Manager S-Web- Editor Web- Builder Serial-S-Bus Modem/ISDN Profi-S-Net Ether-S-Net FTP Web-Applikation (Web-Seiten, Java-Applet, Bilder und weiteren Dateien, z.b.: *.jar *.htm *.teq *.gif Programmier-PC HTTP (direkt) Web-Server Web-Seiten & Daten Web- Browser (Firefox) Web-Connect Lokaler Web-Ordner HTTP (direkt) Serial-S-Bus Modem/ISDN Profi-S-Net Ether-S-Net PCD-Daten (Flags, Ein/Ausgänge, Register, ) Page darstellung PC Web-Panel PCD / PCS1 14

15 Ein Blick unter die Haube von S-Web Java-Applet (IMasterSaia*.jar) Dient der eigentlichen Anzeige der Bedienseiten ( Views, *.teq)! HTML-Seite (swebhmi.htm) Enthält nur den parametrierten Aufruf des Java- Applets! 15

16 Übersicht der Bearbeitungsschritte einer S-Web Applikation 1. Applikationsprogramm erstellen (Fupla/AWL/Graftec-Programmierung mit PG5) 2. Anlegen eines Web-Editor Projektes (*.prj) und Erstellung der Web- Seiten 3. Anlegen des Web-Builder Projektes (*.wsp) und Generieren (Compilieren) der Web-Dateien 4. Übersetzen (Build) und Download des SPS-Programms 5. Aufruf und Test der Web-Applikation mit einem Web-Browser 16

17 Schritt 1: Applikationsprogramm erstellen normale FUPLA/AWL/GRAFTEC-Programmierung mit PG5 Wichtig: Variablen (PPOs) als Public Symbols definieren! 17

18 Schritt 2: S-Web-Editor Projekt anlegen Anlegen eines Web-Editor Projektes und Erstellung der Web-Seiten 18

19 Schritt 3: Web-Server Projekt anlegen Anlegen des Web-Server Projektes 19

20 Schritt 4: Build und Download des SPS-Programms Übersetzen (Build All) und Download des SPS-Programms mit dem PG5 Project Manager 20

21 Schritt 5: Test der S-Web Applikation Aufruf und Test der Web-Applikation mit einem java-fähigen Web-Browser URL-Eingabe bei http-direkt: Wenn in der Web-Applikation die Startseite Start.htm genannt wird, dann kann auf die Eingabe der Startseite verzichtet werden. Die IP-Adresse ist dann ausreichend. Beispiel: URL-Eingabe bei diesem Beispiel (Teststation in der Schweiz) 21

22 Saia S-Web-Editor

23 S-Web-Editor: Aktuelle Version Grafisches Werkzeug zur schnellen und einfachen Erstellung javabasierter Web-Anwendungen Keine Java oder HTML-Kenntnisse erforderlich! WYSIWYG What You See Is What You Get PG5-Integration als Add-on Tool Direkter Zugriff auf PG5-Symbole mit Scope Public Macro-Unterstützung (auch für eigene Macros!) 23

24 S-Web-Editor: 3-Ebenen-Konzept für S-Web-Seiten Hintergrund-Ebene Die optionale Hintergrund-Ebene eignet sich für Elemente, die auf vielen Seiten identisch sind: z.b. Logos, Navigation, Statusanzeigen (Uhr, Datum) etc. Elemente auf der Hintergrund-Ebene werden von den Elementen auf der Haupt- und Vordergrund-Ebene überdeckt! Haupt-Ebene Vordergrund-Ebene Resultierende Ansicht Die eigentliche Seite (View, *.teq) bildet stets die mittlere der drei Ebenen. Hier werden die normalen Visualisierungselemente (Wertanzeigen, Eingabefelder, Schaltflächen, Grafiken usw.) plaziert, also üblicherweise das Anlagenbild, die Maschinenansicht etc. Die optionale Vordergrund-Ebene eignet sich für Elemente, die garantiert oberhalb aller anderen Objekte angezeigt werden sollen: z.b. Alarmmeldungen, Popup-Felder, Pull-Down-Menüs etc. Elemente auf der Vordergrund-Seite überdecken alle Objekte auf der Hintergrund-Ebene sowie der Haupt-Ebene! 24

25 S-Web-Editor: 3-Ebenen-Konzept für S-Web-Seiten jede S-Web-Seite kann aus bis zu drei Ebenen bestehen: Haupt-Ebene (immer vorhanden) die eigentliche Web-Seite Hintergrund-Ebene (optional) liegt hinter der Haupt-Ebene Vordergrund-Ebene (optional) liegt vor der Haupt-Ebene Hintergrund- und Vordergrund-Ebenen werden genau wie normale Seiten erstellt und bearbeitet, sie können jedoch selbst keine Hintergrund- und/oder Vordergrund-Seiten haben Jede Web-Seite kann genau eine Hintergrund- und/oder Vordergrund- Seite haben, muß es aber nicht! Es kann im Web-Projekt auch mehrere (d.h. unterschiedliche) Hintergrund- und Vordergrund-Seiten geben. 25

26 S-Web-Editor: Projekt anlegen und Hardware auswählen Standard Projekt für alle Panels und Browser HW spezifisches Projekt für edisplay 26

27 S-Web-Editor: Project > Project Teq Configurations Wichtig sind vor allem: Wahl der Auflösung (Width, Height) QVGA 320x240 Pixel VGA 640x480 Pixel ggf. weitere Standardseiten (background TEQ, Hintergrund foreground TEQ, Vordergrund) definieren 27

28 S-Web-Editor: Project > Project Applet Advanced Wichtige Parameter: Encode Special Chars diese Option darf nur aktiviert bleiben bei CPU`en mit neueren Saia NT-Betriebssystem (PCD2.M5xxx/PCD3.Mxxxx) period (ms) Aktualisierungszeit für Prozessvariablen in Millisekunden (Empfehlung 500ms) main TEQ Startseite (View) der Web- Applikation 28

29 S-Web-Editor: Project > Project Applet Advanced Wichtige Parameter: Message Box Bei Aktivierung erfolgt die Anzeige von Fehlermeldungen und Über/Unterschreitungen von Eingabewerten Nbr Errors / Warn Anzahl der Fehler- Telegramme die den Warning-Button auslösen Warn display time Zeit in Sekunden, nachdem der Warning-Button automatisch wieder ausgeblendet wird (0=keine Abschaltung) 29

30 S-Web-Editor: Project > Project Applet Advanced Loading mode Diese Option steuert die Java Virtual Machine.Hier wird festgelegt in welchem Modus die Web-Applikation geladen werden soll. - Standard Load Lädt alle Views und Objekte beim Start in den RAM (langsamer beim Start, aber schnellste Reaktionszeiten während des Betriebes) - Load when Needed & Keep Objects Lädt alle Views in den RAM. Die Objekte werden erst geladen, wenn die Seite besucht wird (optimiert für Modemverbindungen) - Load when Needed & Keep Teqs Lädt die Teq-View erst beim ersten Besuch in den RAM. Objekte werden nicht geladen (optimiert für Modem und Clients mit limitierten RAM-Speicher). - Load when Needed & Keep Nothing Lädt nur die aktuelle View in den RAM. Beim View-Jump werden alte Views und Objekte gelöscht (optimiert für Modem und Clients mit stark limitierten RAM) 30

31 S-Web-Editor: Project > Project Build Advanced Einstellung der Build All Funktionen Force Teq Files Saving as 5_13 format Forciert das Speichern der Teq-Files im alten Format. Nur notwendig, wenn noch Microbrowser-Panels mit alter Firmware verwendet werden. Alle anderen Parameter sollten so eingestellt bleiben! Ausführliche Informationen finden Sie hierzu in der Online-Hilfe vom Web-Editor

32 S-Web-Editor: Project > Project Advanced Einstellung der Project - Advanced Funktionen 2 Bits colors paint Bei Aktivierung wird die Web-Applikation in Graustufen angezeigt. Kann z.b. für das edisplay verwendet werden. Hardware profile - Standard project Für alle normalen Clients Default Einstellung - HW Specific project Einstellung z.b. für edisplay Macro Lib Path Definiert den Pfad der Macro-Library Default Einstellung (unterstützt relative und absolute Pfadangaben). 32

33 S-Web-Editor: Project > Grid configurations Das Grid (Gitter) kann individuell den persönlichen Vorlieben angepasst werden. - Viele Anwender bevorzugen ein symmetrisches Gitter (z.b. 5 x 5 Pixel) Empfehlenswert ist das Arbeiten mit Grid Snap (Fang), weil dann Objekte leichter mit der Maus positionierbar sind. Ebenfalls änderbar ist die Grid Color (Farbe), mit der die Gitterpunkte angezeigt werden. Tipp: Trotz aktivierten Fang können die Objekte jederzeit mit den Cursortasten pixelgenau positioniert werden! 33

34 S-Web-Editor: Programmoberfläche Toolbar (Werkzeug-Leiste) Painter Toolbar (Objekt-Leiste) Liste aller Dateien des Web- Editor Projektes Web-Seite (View, TEQ) mit diversen Objekten, es können mehrere Seiten gleichzeitig geöffnet sein! Detail- Informationen zum ausgewählten Objekt (Painter), z.t. auch direkt änderbar! Anordnen, Ausrichten, Gruppieren 34

35 Saia Web-Editor: Toolbar (Werkzeugleiste) Neue Seite (View, *.teq) anlegen und zum Projekt hinzufügen Existierende Seite (View, *.teq) zum Bearbeiten öffnen Container-Variablen bearbeiten (initialisieren) PPO (Process Point) Variablen bearbeiten (initialisieren) Alle Dateien des Projektes speichern HTML-Seite für Applet-Aufruf generieren lassen Build All = Alle Dateien des Projektes generieren, speichern und in das HTML-Ausgabeverzeichnis übertragen FTP (File Transfer Protokoll) Download Web-Applikation auf Flash-Karte CSV-Datei für HTML-Tags generieren (optional) 35

36 Saia Web-Editor: Painter Toolbar (Objektleiste) Per Painter Toolbar werden die nachfolgend aufgelisteten Objekte auf der aktiven Seite eingefügt: Statischer Text (einzeilig), auch zur Variablen-Anzeige Statischer Text (mehrzeilig) Animierbare Linie, optional mit Pfeil(en) Animierbares Rechteck Animierbarer Elipse/Kreis Animierbares Polygon Umschaltbare, ausblendbare Grafikdatei(en), z.zt. nur im GIF-Format Edit-Box (Eingabefeld) für Werteingaben in Variablen Button (Schaltfläche) zum Setzen von Variablen Bargraf (Fortschritts-/Füllstandsanzeige) in Verbindung mit einer Variablen Library-Macro einfügen (z.b. Trend, Alarm und auch eigene Macros) 36

37 Web-Editor: Anordnen, Ausrichten, Gruppieren Ausgewählte Objekte linksbündig ausrichten Ausgewählte Objekte rechtsbündig ausrichten Ausgewählte Objekte an Oberkante ausrichten Ausgewählte Objekte an Unterkante ausrichten Ausgewählte Objekte horizontal auf der Seite zentrieren Ausgewählte Objekte vertikal auf der Seite zentrieren Ausgewählte Objekte auf dieselbe Breite bringen Ausgewählte Objekte auf dieselbe Höhe bringen Ausgewählte Objekte auf dieselbe Breite und Höhe bringen Ausgewählte Objekte in den Hintergrund bringen Ausgewählte Objekte in den Vordergrund bringen Ausgewählte Objekte gruppieren (zusammenfassen) Ausgewählte Gruppe auflösen 37

38 Web-Editor: Eigenschaften, Raster, Fang, Polygon Eigenschaften des ausgewählten Objektes / der Gruppe bearbeiten Grid (Gitter) sichtbar/unsichtbar schalten Grid Snap (Fang) ein/ausschalten Editieren der polygon points (Eckpunkte vom Mehreck) Rotation polygon (Mehreck) 38

39 Saia Web-Editor: Detaillierte Erklärung der Datei-Erweiterungen *.teq Einzelne Ansicht in der Web-Applikation (View). *.tcr (muss in die PCD) Datei enthält alle Prozessvariablen, die mit dem Webserver der CPU kommunizieren. Weiterhin erfolgt hier die Formatierung für die Wertanzeige auf dem Web-Client (Panel/Browser). *.itq Datei enthält alle Containervariablen und die Initialisierungswerte. *.html Die html-datei enthält den parametrierten Aufruf des Java- Applets und der einzelnen View s. IMasterSaia5_14_27.jar Die IMaster.jar-Datei enthält alle benötigten Bibliotheken (Java- Klassen), sowie das ausführbare Programm (Java-Applet) in komprimierter Form. 39

40 Saia Web-Editor: Wichtige Regeln für Dateinamen! (Gilt nicht für Texte in der Web-Visualisierung) Im Web-Editor auf der linken Seite sehen Sie das Projektverzeichnis. Alle Projektdateien finden Sie im Ordner WEB (Arbeitsverzeichnis Web-Editor) unter Ihrem CPU-Verzeichnis. Für die Dateinamen gibt es folgende, unbedingt zu beachtende, Regeln! Maximal 23 Zeichen inklusive Erweiterung A_Start.teq = 11 Zeichen! Keine Sonderzeichen B-Kueche!.teq ist nicht erlaubt! Keine Umlaute B_Küche.teq ist nicht erlaubt! B_Kueche.teq ist o.k. 40

41 Web-Editor: Objekt - Eigenschaftsdialog Per Doppelklick auf die Objekte wird der jeweils zugehörige Eigenschaftsdialog des Objekts geöffnet. Der Dialog besteht aus mehreren Registerkarten, die zusammengehörige Optionen beinhalten. Welche Optionen jeweils verfügbar sind, hängt vom Objekttyp ab. 41

42 Web-Editor: Objekt - Eigenschaftsdialog General Wichtige Parameter: Interior Color Füllfarbe des Objektes, wenn aktiviert Outline Color Rahmen und Schriftfarbe, wenn aktiviert Has Interior Color Aktivierung der Füllfarbe Has Outline Color Aktivierung der Rahmen und Schriftfarbe Font Auswahl Schriftart, Schriftstil und Größe Outline Width Rahmendicke in Pixel Painter X und Y Offset Objektverschiebung in X- und Y-Richtung, in Abhängigkeit von Container- oder Prozess-Variablen. 42

43 Web-Editor: Objekt - Eigenschaftsdialog Repaints STRING HTML TAG PPO CONTAINER FILE Zweite Source! z.b. Source 1: Text Anlage_Aus wenn PPO 0 z.b. Source 2: Text Anlage_Ein wenn PPO 1 Unter Repaints wird die Ansicht des Objektes eingestellt. Edit a Source (Herkunft) Type: - STRING (Zeichenfolge) Beschriftung des Objektes mit Text - HTML TAG Beschriftung des Objektes mit Text, eingetragen in einer *.csv-datei. - PPO Darstellung einer Prozessvariablen - CONTAINER Darstellung einer Containervariablen (Lokale Variable innerhalb der Web-Applikation) - File Auswahl GIF-Bild für die Objektdarstellung Name Texteingabe oder Variable On Condition Anzeige der Ansicht in Abhängigkeit von PPObzw. Container- Variablen 43

44 Web-Editor: Objekt - Eigenschaftsdialog Hide and Disable Sichtbar ab userlevel >=1 Bedienbar ab userlevel >=3 Unter Hide and Disable Painter kann man die Sichtbarkeit und Funktion des Objektes steuern. Hide (verbergen) Painter Verbergen des Objektes in Abhängigkeit einer Variablen (z.b. Container userlevel ). Disable Painter`s Actions Deaktivierung der Objekt-Aktion in Abhängigkeit einer Variablen (z.b. auch hier Container userlevel ). Betrifft die Objekte Button und Editfeld. Hide und Disable Painter sind unabhängig von einander wählbar! Es ist somit möglich einen unsichtbaren Button zu parametrieren (nur Hide Painter), oder einen sichtbaren Button ohne Funktion (nur Disable Action) einzustellen. 44

45 Web-Editor: Objekt - Eigenschaftsdialog Border Advanced ColorVar Variable, die die Farbumschaltung steuert Unter der Registerkarte Border (Einfassung) Advanced (erweitert) kann man die Farbumschaltungen des betreffenden Objektes (Füllfarbe, Schriftfarbe, Rahmen) prozessabhängig steuern. Interior Color1 (ColorVar ==0) Farbauswahl für Signalstatus =0 Interior Color2 (ColorVar ==1) Farbauswahl für Signalstatus =1 Wichtig: Die Farbumschaltung funktioniert nur, wenn unter General die Parameter Has Interior Color bzw. Has Outline Color aktiviert sind! 45

46 Web-Editor: Objekt - Eigenschaftsdialog Text Positions Adv Unter der Registerkarte Text Positions Advanced kann die Textposition im Objekt geändert werden, auch prozessabhängig. Text Width Centered Bei Aktivierung zentriert, sonst linksbündig ausgerichtet. Text Height Centered Bei Aktivierung zentriert, sonst oben ausgerichtet. Text Bottom Justified Bei Aktivierung unten, sonst oben ausgerichtet. Text Right Justified Bei Aktivierung rechtsbündig, sonst linksbündig ausgerichtet. 46

47 Web-Editor: Objekt - Eigenschaftsdialog Function Keys Die Registerkarte Function Keys steht nur für das Objekt Button zur Verfügung! Die FKey-Tasten funktionieren nur mit Microbrowser-Panels (PCD7.D4xxx). Jede Funktionstaste wird mit einer speziellen Syntax ( FKEY_1.. FKEY_12 ) angesprochen. Wird die F-Taste betätigt, wird ein Mouse down event ausgelöst. 47

48 Web-Editor: Objekt Eigenschaftsdialog Actions Set Variables Die Registerkarte Actions Set Variables steht nur für das Objekt Button zur Verfügung! Set Var on Mouse DOWN Beim Drücken des Buttons kann abhängig von der Typauswahl, eine Variable auf einen bestimmtem Wert gesetzt werden. Set Var on Mouse UP Auch beim Loslassen des Buttons kann eine Variable gesetzt werden. Mit Value (Wert) wird ein Wert gesetzt Mit dieser Funktionalität kann man eine Tasterfunktion realisieren. 48

49 Web-Editor: Objekt Eigenschaftsdialog Actions Toggle Increment Variables Die Registerkarte Actions Toggle Increment Variables steht nur für das Objekt Button zur Verfügung! Toggle (Umschalter) Button Wenn diese Funktion aktiviert wird, dann wird die ausgewählte Variable mit jedem Tastendruck umgeschaltet (Stromstoßschalter Funktion). Increment (Erhöhung) Inkrementiert eine Variable mit dem Parameterwert unter Value. Dekrementieren geht natürlich auch, wenn man einen negativen Wert unter Value einträgt. 49

50 Web-Editor: Objekt - Eigenschaftsdialog Actions Jump Seitenwechsel innerhalb der Applikation Die Registerkarte Actions Jump steht nur für das Objekt Button zur Verfügung! Rücksprung auf die vorhergehende Seite URL-Jump auf die definierte Seite 50

51 Saia Web-Editor: Prozessdatenpunkt (PPO)-Verknüpfung Eigenschaftsdialog des jeweiligen Objektes (z.b. STATIC TEXT) per Doppelklick öffnen und dort auf die Registerkarte Repaints wechseln. Edit a Source, Type zu PPO ändern und mit Select den Symbolauswahldialog der PG5 öffnen. Symbol auswählen, Dialog mit OK schließen fertig! 51

52 Saia Web-Editor: Initialisierung Prozessdatenpunkte (PPO) Mit Doppelklick auf das Icon PPO wird der Init PPO Dialog geöffnet. Min / Max Diese Einstellparameter werden nur für die Editbox benötigt. Hier kann man Grenzwerte für Variableneingaben definieren. Format Hier wird definiert, wie die PPO-Variable dargestellt werden soll. Unit Dieser Text wird zusammen mit der PPO dargestellt. 52

53 Saia Web-Editor: Initialisierung Container Ein Container ist eine lokale Variable in der HMI- (Web) Applikation. Die Container können zur Steuerung der Web-Applikation verwendet werden. Zum Beispiel wird der Container userlevel zur benutzerabhängigen Anzeige/Bedienbarkeit verwendet. Mit Doppelklick auf das Icon ID= wird der Init Container Dialog geöffnet. Wichtige spezielle Blinker der abhängig der Periodenzeit zwischen 0 und 1 umschaltet. userlevel Enthält den Wert der Berechtigungsstufe Wird benötigt für die Sprachumschaltung mittels.csv-datei. MB_InactivityCounter Variable zeigt die Inaktivität in Sekunden an. Wird verwendet für das automatische Logout. Initial Value In dieser Spalte können Initialisierungswerte für die einzelnen Variablen definiert werden Hinweis: Wenn spezielle Container verwendet werden, ist auf die Schreibweise zu achten (auch Groß- / Kleinschrift)! 53

54 Saia Web-Editor: Erzeugen der HTML-Startseite Beispiel: Bei Start.htm : Einmalig muss im Web-Projekt die HTML-Startseite generiert werden. Der Namensvorschlag lautet immer Projektname.html (hier z.b. HMI.html). Wenn die Startseite Start.htm genannt wird (Defaultname- Webserver), dann muss die Startseite in der URL nicht mehr eingeben werden! Sonst : 54

55 Letzter Schritt im Saia Web-Editor: Build All Mit Build ALL werden alle Dateien (*.html, *.itq, *.tcr, *.teq, *.gif, IMaster.jar) automatisch erzeugt und in das Verzeichnis html unter dem CPU-Ordner kopiert. Der Ordner html ist das PCD.Web-Server Verzeichnis, welches nach Build All alle Dateien enthält, die mit dem Web-Builder selektiert und erzeugt werden können. Web-Editor Build All (Web-Editor) \Web *.html *.itq *.tcr *.teq *.gif IMaster.jar Web-Editor Projekt Verzeichnis \html *.html *.itq *.tcr *.teq *.gif IMaster.jar PCD.Web-Server Verzeichnis (Wird mit FTP Übertragen) Web-Builder Build Prozess in PG5 *.PCD (Datei) Download PCD 55

56 Web-Builder: Web-Server Projekt anlegen Der Web-Builder ist ein PG5 Add On Tool für das Management des PCD.Web-Servers. 56

57 Saia Web-Builder: Web-Server Inhalt (Dateien) auswählen Alle Dateien (html-seiten, Teq-Views, Java Applet, Bilder, usw.) die im PCD.Web-Server gespeichert werden sollen, sowie auch die PCD.Web-Server Settings, werden mit dem Web-Builder in ein PG5 kompatibles Quellformat (DBX-Datenblocks) konvertiert. Schritt 1: Web Server Inhalt auswählen, d.h. alle Dateien auswählen, die im RAM der SPS gespeichert werden sollen. Schritt 2: Generate ausführen, um die Dateien zu konvertieren. Anstatt Generate kann alternativ in der PG5 ein Rebuild All ausgeführt werden. Alle Dateien im HTML- Ordner der CPU Alle Dateien, die im RAM der SPS abgelegt werden 57

58 Saia Web-Builder: Web-Server Konfiguration Schritt 3: Die Settings, d.h. die Konfigurationseinstellungen des PCD.Web-Servers prüfen und ggf. anpassen. Mittlere Priorität ist in der Regel völlig ausreichend! Am besten keine Adresse vergeben, um Kollisionen mit anderen Programmteilen zu vermeiden! RAM Disk Größe ist 32 KB für alle PCD, aber 8 KB bei PCS1! Diese Passwörter nicht benutzen, sondern das Web-Editor Login-Macro! 58

59 Saia Web-Builder: Wichtige Information zur Dateiablage Alle Dateien vom PCD.Web-Server Verzeichnis (html-ordner) müssen für die Anzeige der Web- Applikation komplett zur Verfügung stehen. Die Dateien können aber an unterschiedlichen Stellen abgelegt werden, um z.b. die Belegung von CPU-RAM-Speicher zu vermeiden. Speicherorte für Web-Dateien: PCD.Web-Server RAM-Speicher der CPU M1/M2/SL0..SL3-Flash Flashspeicher auf der PCD3/PCD2.M5 Saia.Net Web-Connect Lokales Verzeichnis auf dem PC (Default: C:\WebPages) Web-Panels (PCD7.D4/5/6) Lokales Verzeichnis auf dem Panel (Pfad abhängig vom Paneltyp) Nur die *.tcr - Datei (PPO-Initialisierung) muss immer in den PCD.Web-Server geladen werden! Und darf an keinem anderen Speicherort der Web-Applikation vorhanden sein. 59

60 PG5 Projekt Manager: Build Changed Files / Rebuild All Files Build/ bzw. Rebuild All Files durchführen Download des Programms in die CPU 60

61 Web-Browser: Test der Web-Applikation Web-Browser starten URL eingeben IP-Adresse der CPU und ggf. Startseite (wenn nicht Start.htm ) 61

62 Start vom praktischen Teil des S-Web Workshops - PC einschalten - Restore PG5 Web-Projekt - Upload/Download Device-Configurator - Online-Settings auf Socket umstellen - Download Fupla-File - Funktionstest PCD3.S100 62