Erstellen eigener HTML Seiten auf eWON

eWON - Technical Note Nr. 010
Version 1.2
Erstellen eigener HTML Seiten auf eWON
30.08.2006/SI
Übersicht:
1.
2.
3.
4.
5.
Thema
Benötigte Komponenten
Funktionsaufbau und Konfiguration
3.1.
Unterpunkt 1
3.2.
Unterpunkt 2
Beispielaufbau
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
eWON Technical Note Nr. 010
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.
eWON Technical Note Nr. 010
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.
eWON Technical Note Nr. 010
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.
eWON Technical Note Nr. 010
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: [email protected]
eWON Technical Note Nr. 010
Angaben ohne Gewähr. Irrtümer und Änderungen vorbehalten.
Seite 5 von 5

Download Report