ewon - Technical Note Nr. 010 Version 1.2 Erstellen eigener HTML Seiten auf ewon 30.08.2006/SI Übersicht: 1. Thema 2. Benötigte Komponenten 3. Funktionsaufbau und Konfiguration 3.1. Unterpunkt 1 3.2. Unterpunkt 2 4. Beispielaufbau 5. Kontaktdaten 1. Thema: In dieser Technical Note erklären wir, wie Sie anhand eines HTML Editors (wie z.b. Macromedia Dreamweaver, Microsoft Frontpage, Phase 5, First Page,...) eine HTML Seite erstellen, welche Sie auf ewon hinterlegen können, um z.b. die Daten aus einer SPS abrufen zu können. Diese HTML Seiten sind besonders dann interessant, wenn eigene HTML erstellt werden sollen, auf denen z.b. eigene Firmenlogos und Bilder eingebunden werden sollen. Es sollten grundlegende HTML Kenntnisse vorhanden sein, um diese Programmierung durchführen zu können. 2. Benötigte Komponenten: Grundsätzlich können HTML Seiten auf jedem ewon Gerät abgelegt werden. In hier dargestellten Fall benutzen wir ein ewon500 (WEW05201). Zum Programmieren der HTML Seite verwenden wir im folgenden Beispiel Dreamweaver 8. Die Konfiguration ist aber auch mit jedem herkömmlichen HTML Editor realisierbar. 3. Funktionsaufbau und Konfiguration: Vorraussetzung zur Darstellung der Werte auf einer eigenen HTML Seite ist, dass bereits Datentags in ewon angelegt sind. In diesem Beispiel arbeiten wir mit folgenden Datentags (siehe auch Bild): - Fuellstand1 - Fuellstand2 - Temperatur1 - Temperatur2 Angaben ohne Gewähr. Irrtümer und Änderungen vorbehalten. Seite 1 von 5
3.1 Projekt in Dreamweaver erstellen Öffnen Sie Dreamweaver und erstellen Sie ein neues HTML Projekt. Nun sehen Sie Ihre Arbeitsfläche, einen weißen Bereich. Um die Daten strukturiert darzustellen, erstellen wir eine Tabelle, in der wir die Daten, welche über ewon auslesen darstellen können. Klicken Sie hierzu auf das Tabellensymbol. Nun öffnet sich das Fenster für die Konfiguration der Tabelle. Die Einstellungen sind völlig frei wählbar. In unserem Fall wählen wir Zeilen: 6 und Spalten:2. Danach klicken wir auf OK. Dreamweaver erstellt nun eine Tabelle, in der wir die Überschriften Tagname und Wert eintragen. Angaben ohne Gewähr. Irrtümer und Änderungen vorbehalten. Seite 2 von 5
In der Spalte Tagname tragen Sie eine freie Bezeichnung ein, um später eine eindeutige Zuordnung der Werte treffen zu können. Das Grundgerüst der Tabelle ist nun erstellt. Jetzt muss es noch mit Daten gefüllt werden. Dazu müssen einige ASP Erweiterungen eingefügt werden. Um den Wer eines Tags darzustellen folgendes Textglied eingegeben werden: <%#TagSSI,Tagname%> wobei Tagname durch den richtigen Tagname, welcher schon in ewon vergeben wurde, ersetzt werden muss. In diesem Fall also Fuellstand1. Ist dies geschehen, werden Sie in Ihrer Tabelle das Symbol für ASP sehen. Dies bedeutet, dass Sie einen ASP Wert erstellt haben. Diesen Schritt wiederholen Sie ebenso für die anderen Tagwerte. Angaben ohne Gewähr. Irrtümer und Änderungen vorbehalten. Seite 3 von 5
Damit ewon diesen ASP Wert darstellen kann, ist es ganz wichtig, dass die Datei unter der Endung *.shtm gespeichert wird. Nur so ist es für ewon möglich, aus dem <%#TagSSI,Tagname%> einen Wert darzustellen. Nachdem wir die Datei nun unter dem Namen test.shtm gespeichert haben, ist die Projektierung der HTML Seite abgeschlossen. 3.2 Datei auf ewon aufspielen Da nun die Datei test.shtm existiert, muss sie nun noch auf das ewon Gerät geladen werden. Dies geschieht per FTP. Dazu öffnen wir eine FTP Verbindung auf die IP Adresse des ewon Gerätes und spielen die Datei in den Ordner /usr/ auf. Angaben ohne Gewähr. Irrtümer und Änderungen vorbehalten. Seite 4 von 5
3.3 Webseite in ewon aufrufen Um nun die Webseite, welche zuvor erstellt worden ist, aufzurufen, geben wir folgendes in den Browser ein: http://ipadresse/usr/test.shtm wobei IPADRESSE durch die IP Adresse von ewon zu ersetzen ist. Danach sehen Sie folgende Seite: Drücken Sie nun F5, werden Ihre Werte aktualisiert. 4. Anmerkung: Das Design und der Aufwand der Programmierung hängt vom HTML Wissensstand eines jeden einzelnen ab. Im Grunde kann alles in der HTML Seite programmiert werden, was auch auf einer normalen reinen HTML - Webseite programmiert werden kann. Zusätzlich ist es möglich, Firmenlogos, Hyperlinks, Bilder, aber auch Graphen von geloggten Daten einzufügen. Das Einfügen von Graphen ist jedoch nur ab der 4000er Baureihe möglich, da es dort auch erst die Datenloggingfunktion samt Graphenerzeugung gibt. 5. Kontaktdaten: Benötigen Sie weitere technische Hilfe oder möchten Sie die Projektierung nach Ihren Wünschen von uns vornehmen lassen, kontaktieren Sie unseren zuständigen Mitarbeiter. Support und technische Beratung für Webserver / Gateway ewon Sascha Isinger Tel: +49 (0) 67 22/99 65-966 Tel: +49 (0) 67 22/99 65-78 email: si@wachendorff.de Angaben ohne Gewähr. Irrtümer und Änderungen vorbehalten. Seite 5 von 5