Normalerweise sind LOGO!-Module unsichtbar in einem Schaltschrank verbaut, sodass es umständlich ist, zu sehen, was die Steuerung gerade macht. Um dieses Problem komfortabel zu lösen, sehen wir uns heute den neuen personalisierbaren Webserver von LOGO! 8 an. Die Webseiten für den Server können wir leicht mit dem kostenfreien LOGO! Webeditor erstellen. Darüber hinaus kann LOGO! Displays direkt ansteuern, um den Betriebszustand einer Anlage zu visualisieren.

Vorarbeiten an LOGO!

Die aktuelle Variante von LOGO! (Version 8) verfügt über die Möglichkeit, einen personalisierbaren Webserver zu hosten. Bitte beachten Sie, dass die Produktnummer Ihres LOGO! 8 auf 080A0B enden muss, damit Ihnen diese Möglichkeit zur Verfügung steht. Eine weitere Voraussetzung ist, dass sich in der LOGO! eine Mini-SD-Karte befinden muss, auf der die Dateien für die Webseiten abgelegt werden. Die Kapazität der SD-Karte sollte daher so bemessen sein, dass die gewünschten Inhalte darauf Platz finden. Die SD-Karte muss zudem im Format FAT32 formatiert sein, sonst kann sie von LOGO! nicht gelesen werden.

Damit wir auf den Webserver von LOGO! zugreifen können, müssen wir den Fernzugriff erlauben. Das können wir leicht mit dem Tool LOGO! Soft Comfort bewerkstelligen. Es gibt zwei Wege, die uns zum entsprechenden Menüpunkt führen:

• DATEI | EIGENSCHAFTEN | ONLINE-EINSTELLUNGEN | EINSTELLUNGEN FÜR ZUGRIFFSKONTROLLE
• EXTRAS | ÜBERTRAGEN | ZUGRIFFSKONTROLLE

Im Menü zum Aktivieren des Fernzugriffs auf LOGO! müssen die Punkte FERNZUGRIFF ERLAUBEN und WEBSERVER-ZUGRIFF ERLAUBEN aktiviert sein. In diesem Menüpunkt können Sie auch alle Passwörter von LOGO! neu setzen. Nach dem Setzen eines Parameters oder Passworts dürfen Sie nicht vergessen, den ANWENDEN-Button zu drücken, sonst werden Ihre Änderungen nicht übernommen.

Jetzt können Sie sich am Webserver von LOGO! anmelden. Das Log-in-Menü erscheint, sobald die IP von LOGO! in den Browser eingegeben wurde. Um den personalisierten Webserver zu aktivieren, müssen Sie den Haken vor dem Punkt bei BENUTZERSPEZIFISCHE WEBSITE setzen. Nachdem Sie den ANMELDEN-Button gedrückt haben, sehen Sie direkt folgende Fehlermeldung: „404: The target is not found“. Das ist zum jetzigen Zeitpunkt vollkommen in Ordnung und auch einleuchtend, da wir noch keine Webseiten erstellt haben. Zum Erstellen einer solchen Webseite verwenden wir den LOGO! Webeditor (LWE).

Der LOGO! Webeditor

Mit dem LOGO! Webeditor (LWE, Abb. 1) können wir Webseiten für LOGO! erstellen. Dafür benötigen wir keine tiefgreifenden HTML-Kenntnisse. Der Editor kann frei von der LOGO!-Homepage heruntergeladen werden. Nachdem Sie das ZIP-Archiv heruntergeladen haben, können Sie es mit einem Tool Ihrer Wahl entpacken. Im entpackten Archiv befindet sich der Ordner INSTALLER, darin finden sich die Installationsprogramme für die üblichen Betriebssysteme. Wir zeigen hier die Schritte, die unter Linux für die Installation nötig sind.

cd ~/Downloads/logo_web_editor/Installer/Linux
sh ./lwe-linux-64bit.sh

Die Installation wird von einem Wizard gesteuert und gestaltet sich daher problemlos. Man kann getrost immer NEXT klicken, bis die Installation abgeschlossen ist, der LOGO! Webeditor startet nach der Installation automatisch.

Erstellen einer Webseite

Mit dem LWE ist das Erstellen von Webseiten für LOGO! eine leichte Aufgabe. Auf der rechten Seite finden Sie oben rechts die einzelnen Dateien aus Ihrem Projekt, unten rechts sehen Sie die zur Verfügung stehenden Komponenten. In der Mitte ist der WYSIWYG-Editor, mit dem man die Webseite erstellen kann, und auf der linken Seite sehen Sie die Eigenschaften der ausgewählten Objekte. Das soll für den Einstieg erst einmal reichen. Starten wir gleich mit der Erstellung einer Webseite. Als Beispiel verwenden wir unsere Torsteuerung aus Teil 1 dieser Reihe.

Abb. 1: Der LOGO! Webeditor

Wäre es nicht schön, wenn man ein Bild des Tors direkt auf der Webseite sehen könnte? Das erreichen wir, indem wir ein Bild unseres Tors als Hintergrundbild einfügen. Damit wir das Bild im LWE verwenden können, müssen wir es zunächst in die LWE-Umgebung kopieren. Eigene Bilder werden im Verzeichnis ~/lwe/lwe/res/Graph Library/My Graph/ abgelegt. Kopieren Sie bitte eigene Bilder immer an diese Stelle, damit die Webseite fehlerfrei erstellt werden kann. Natürlich können Sie zum Ausprobieren eines der vielen Beispielbilder aus dem LWE verwenden. Um das Bild auf die Webseite zu bekommen, können Sie einfach das Bild-Icon unter den Komponenten anklicken. Danach klicken Sie auf der Webseite die Stelle an, an der das Bild später erscheinen soll – und schon ist es positioniert. Auf der linken Seite sehen Sie nun die Eigenschaften des Bilds. Unter VALUES können Sie jetzt das Bild auswählen, das angezeigt werden soll, hier wählen wir für unser Beispiel das Bild des Tors aus. Als Nächstes ziehen wir das Bild auf die passende Größe, alternativ können Sie aber auch direkt auf der Home Page unter STYLES per Auswahl von BACKGROUND IMAGE ein solches definieren.

Da Softwareentwicklung ein ständiges Testen der durchgeführten Änderungen ist, laden wir die Webseite so wie sie ist in LOGO!, wobei uns natürlich bewusst ist, dass die Website nur aus einem Bild besteht. Wir klicken dazu im LWE auf TOOLS | DOWNLOAD, woraufhin sich ein kleiner Wizard öffnet, der uns durch den Download von PC in LOGO! führt. Bitte achten Sie darauf, dass die Bezeichnung der Operationen genau anders herum ist als wir es vom Internet gewohnt sind: Download bedeutet, etwas vom PC nach LOGO! zu laden und nicht wie üblich etwas auf den PC herunterzuladen. Der Download benötigt etwas Zeit, gerade bei größeren Webseiten kann es unter Umständen recht lange dauern, die Seite in LOGO! zu laden. Um dies zu umgehen, gibt es die Möglichkeit, die Seite direkt auf die SD-Karte zu schreiben. Die Karte kann man dann in den SD-Karten-Slot von LOGO! schieben, und der Webserver läuft. Ist das Herunterladen abgeschlossen, können wir die IP-Adresse von LOGO! erneut in den Browser eingeben, wir sehen daraufhin wieder das Log-in-Menü. Wenn wir uns jetzt bei BENUTZERSPEZIFISCHE WEBSITE anmelden, wird das nicht mit einem Fehler quittiert, wir sehen stattdessen jetzt unsere Webseite. Bevor wir nun beginnen, die Webseite an das LOGO!-Programm anzupassen, sehen wir uns erst einmal an, welche Komponenten wir in unserer Homepage zusätzlich einbauen können.

Die vorhandenen Komponenten gliedern sich in fünf Hauptgruppen: Tool, Basic, Digital, Analog und Miscellaneous.

• Im Bereich Tool befinden sich Komponenten, die man zur Strukturierung einer Website verwenden kann: Polyline, Rectangle und Circle. Mit ihnen kann man grafische Elemente in eine Website einbauen.
• Im Bereich Basic sind einfache HTML-Elemente zu finden (Texte, Bilder und Links).
• Mit dem Bereich Digital kommen alle digitalen Werte der LOGO! hinzu. Diese Komponenten kann man für die Darstellung der Werte von Eingängen, Ausgängen, Merkern, Variablen, Cursor-sowie Funktionstasten und Scheibenregistern auf der Website verwenden. Es ist möglich, hier für die logischen Zustände der Komponenten verschiedene Texte oder Bilder zu hinterlegen. Die Bilder können beispielsweise aus den umfangreichen Bibliotheken genommen werden, aber es ist natürlich auch möglich, eigene Bilder einzubauen. Durch die Verwendung von animierten Bildern kann man die Website sehr lebendig gestalten. Einige Komponenten wie Merker oder Variablen haben die Eigenschaft überschreibbar. Damit kann man die digitalen Werte von LOGO! über die Webseite verändern und somit die Anlage über einen beliebigen Browser fernsteuern.
• Wie der Name schon vermuten lässt, sind im Bereich Analog alle möglichen Komponenten zusammengefasst, um analoge Werte anzuzeigen oder zu verändern. Es stehen uns die Komponenten Analog Value, Analog Bar und Analog Slider zur Verfügung.
• Unter dem letzten Punkt Miscellaneous finden sich einige sehr interessante Komponenten zur Anzeige von Zeit: etwa Scale Time und LOGO! Clock.

Nachdem wir uns einen Überblick verschafft haben, welche Komponenten wir in unsere Webseite einbauen können, sollten wir unserem Beispiel etwas mehr Funktionalität geben. Fangen wir mit der Signalleuchte H1 an. Es gibt bei den animierten Bildern eine Leuchte, die unserer realen LED sehr ähnlich sieht. Es wäre eine tolle Sache, wenn man das Blinken auch auf der Website sehen könnte, oder? Nichts leichter als das. Wir positionieren an der Stelle, wo die Leuchte ist, einen Digital Value auf der Website. Die Texte für die Anzeige löschen wir. Für die Option On Image wählen wir die Datei flashlight_red_ani.gif, für Off Image verwenden wir das dazu passende Bild flashlight_red_static.gif. Jetzt wird es etwas kniffelig: Wir können hier nicht den digitalen Ausgang, der an die Leuchte angeschlossen ist, als Variable eintragen. Dieser Ausgang hat nämlich schon ein blinkendes Signal, was zu einer ziemlich holprigen Animation auf der Website führen würde. Wir benötigen also das Signal vor dem Impulsgeber. Daher verwenden wir hier den Merker M1. Wie Sie im Programm der Torsteuerung (Abb. 2) sehen können, ist der Merker vor dem Blinkgeber angeschlossen. Mithilfe eines Merkers oder einer Variablen können wir uns Signale an einer beliebigen Stelle des Programms abgreifen.

Abb. 2: Programm zur Torsteuerung mit Merkern

Wenn Sie das Programm mit der Version aus dem letzten Teil dieser Reihe vergleichen, wird Ihnen aufgefallen sein, dass an den Eingängen der RS Flipflips eine Oder-Verknüpfung und ein Merker hinzugekommen sind. Diese sind dazu da, um von der Website aus über die zwei Merker das Tor zu öffnen oder zu schließen. Wie bereits bei der Lampe fügen wir für die zwei Taster je einen digitalen Wert ein, tragen passende Bilder sowie Texte ein und verbinden die Merker mit den Werten. Wir müssen nur zusätzlich den Haken in das Feld WRITABLE setzen. Wir arbeiten mit Merkern, weil digitale Eingänge nicht überschrieben werden können.

Zu guter Letzt brauchen wir noch eine Komponente, die uns anzeigt, ob das Tor offen oder geschlossen ist. Wir fügen wieder einen Digital Value ein und verbinden ihn mit dem Endschalter S3(I2). Schon wird uns angezeigt, ob das Tor offen oder geschlossen ist.

WebComponents: Native Komponenten fürs Web – ohne und mit Frameworks

mit Manuel Rauber (Thinktecture AG)

Das Zusammenspiel von UX Insights und Brand Experience

mit Pamela Zotz (COBE GmbH)

All Inclusive

Katrin Rabow

Wem gehören die Daten? Und wem gehört die Fabrik?

Peter Sorowka (the native web)

Sicherlich haben Sie jetzt eine gute Vorstellung, wie man mit dem LWE auch komplexere Websites aufbauen kann. Man muss zwar ein wenig aufpassen, dass die digitalen Werte in LOGO! zu den Werten auf dem Webserver passen, ansonsten gibt es aber kein Hindernis auf dem Weg, schnell zur eigenen Webseite zu kommen. Wie bei jeder Softwareentwicklung sollten Sie ruhig immer wieder Zwischenstände zum Testen herunterladen. Wenn man noch im Kopf hat, was gerade geändert wurde, findet man den möglichen Fehler noch relativ flink. Nach mehreren Stunden Arbeit wird es erheblich schwieriger einzugrenzen, warum etwas nicht so klappt wie es soll.

Ein kleines Tutorial ist in der ausführlichen Hilfe enthalten, das den Einstieg in die Bedienung des LWE erheblich erleichtert. Auch die Tipps und Tricks innerhalb der Hilfe sind wirklich gut. Viele Informationen rund um LOGO! und die dazu passenden Erweiterungsmodule gibt es auch auf der Webseite von Siemens.

LOGO! Display TDE

Das LOGO! TDE ist ein externes LCD, über das Nachrichten und Prozessparameter ausgegeben werden können. Das Display wird mit 24-Volt Geich- oder Wechselspannung betrieben, die Kopplung mit LOGO! erfolgt über Ethernet. Das TDE hat einen eingebauten 2-Port-Ethernet-Switch, der flexibel verwendbar ist, man kann z.B. mehrere LOGO!s mit einem TDE koppeln. Detaillierte technische Daten gibt es auf der Webseite des Produktes.

Set-up: Damit das TDE arbeiten kann, müssen wir es zunächst mit Spannung versorgen. Da das TDE bei 24 Volt eine Stromaufnahme von 70 mA hat, können wir die Betriebsspannung aus dem Netzteil von LOGO! entnehmen.

Als Nächstes schließen wir die Ethernet-Schnittstelle an. Prinzipiell müssen sich LOGO! und TDE über das Netzwerk erreichen können. Am einfachsten ist das, wenn sie sich im gleichen Subnetz befinden. Daher geben wir dem TDE eine IP aus dem Subnetz, in dem sich auch LOGO! befindet. Die IP des TDE kann man im Menüpunkt TDE SETTINGS | TDE NETWORK direkt am Gerät einstellen. Bitte achten Sie darauf, dass die Konfiguration zu Ihrem Netzwerk passt.

Im Menüpunkt LOGO! SELECTION können wir das TDE mit LOGO! verbinden. Um die Verbindung herzustellen, geben wir hier einfach die IP von LOGO! ein. Nun sind das TDE-Display und LOGO! miteinander verbunden, und wir können beliebig Meldetexte über das Display ausgeben. Im Tool LOGO! Soft Comfort gibt es eine spezielle Komponente, um Displays anzusteuern, den Meldetext-Baustein.

Display mit Meldetextbaustein ansteuern: Der Meldetext-Baustein befindet sich in LOGO! Soft Comfort bei den Bausteinen unter SONSTIGES. Er hat einen Eingang, um ihn zu aktivieren, eine Priorität, falls mehrere Texte gleichzeitig aktiv sind, einen Parametereingang und einen Ausgang. Der Ausgang wird aktiv, sobald der Textbaustein im Display angezeigt wird. Braucht man diese Funktion nicht, muss man den Ausgang mit einer „offenen Klemme“ verbinden, sonst gibt LOGO! Soft Comfort einen Fehler beim Ausführen des Programms zurück. Sobald der Eingang aktiviert wird, wird der Meldetext auf dem Display angezeigt. Wenn wir nun den Meldetext-Baustein doppelt klicken, erscheint das Fenster, das wir in Abbildung 3 sehen. Auf den ersten Blick wirkt das Ganze ziemlich kompliziert, doch betrachten wir die einzelnen Bereiche etwas genauer, merken wir schnell, dass es gar nicht so komplex ist. Man darf nicht vergessen, dass der Meldetext-Baustein alle Betriebsparameter von LOGO! optisch ansprechend darstellen kann.

Abb. 3: Möglichkeiten des Meldetext-Bausteins

Fangen wir unten rechts an. Hier sehen wir die Texte, die im Display dargestellt werden. Der grüne Bereich ist die sichtbare Fläche des Displays, Texte im blauen Bereich können durchgescrollt werden. Um das Scrollen (Tickern) zu aktivieren, sind die sechs Checkboxen auf der linken Seite vorgesehen. Im Bereich MELDEZIEL können wir auswählen, wo die Meldungen erscheinen sollen. Schauen wir uns nun den Bereich in der Mitte des Fensters an. Hier können Sie alle Parameter der in Ihrem Programm vorhandenen Bausteine abrufen und in den Textbereich einfügen, zum Beispiel die Restzeit der Einschaltverzögerung. Man kann auch allgemeine Informationen wie die Uhrzeit oder den Zeitpunkt der Meldetextaktivierung als Parameter mit in die Darstellung einfügen.

Um die Cursor- und Funktionstasten des Displays abzufragen, gibt es in LOGO! Soft Comfort natürlich auch vorgefertigte Bausteine. Die Bausteine heißen LOGO! TD-Funktionstaste und LOGO!-TD-Cursortaste. Man kann sie wie digitale Eingänge in das Programm einbauen.

In Abbildung 4 sehen Sie das Programm zur Steuerung des Tors über das Display. Man kann sehen, dass die Bausteine für die Meldetexte eingefügt wurden. Über die Funktionstasten F1 und F2 kann man das Tor öffnen oder schließen. Ein Video auf YouTube zeigt, wie die Steuerung über das Display funktioniert. Es können übrigens alle drei Bedienungswege für das Tor parallel verwendet werden. Alle Beispielprogramme sind online abrufbar.

Abb. 4: Programm zur Torsteuerung mit Meldetexten

LOGO! liebt Linux

An dieser Stelle möchte ich noch einmal erwähnen, dass sowohl LOGO! Soft Comfort als auch der LOGO! Webeditor unter Linux laufen. Das ist bei vielen Mitbewerbern nicht so, obwohl Linux von über drei Prozent der Nutzer im Internet als Desktopbetriebssystem verwendet wird. Schaut man sich den Einsatz von Linux auf Servern an, verändert sich das Bild zudem sehr schnell: Etwa 60 Prozent aller Server im Internet arbeiten mit Linux. Sowohl im Desktop- als auch im Serverbereich sind die Zahlen steigend, gerade IT-Profis bevorzugen Linux.

Fazit

Der LWE ist ein leicht zu bedienendes Tool, mit dem man schnell und unkompliziert Webseiten für LOGO! erstellen kann. Bei der Entwicklung des Tools wurde Wert darauf gelegt, sich auf das Wesentliche zu beschränken und keinen unnötigen Schnickschnack einzubauen. Dadurch ist der LWE leicht zu bedienen und man kommt schnell zum Ziel. Um Prozessdaten von LOGO! anzuzeigen oder zu steuern, ist das TDE bestens geeignet. Es lässt sich kinderleicht in den LOGO!-Kosmos integrieren. Baut man das Display in einen geeigneten Schaltschrank ein, hat es die Schutzart IP65. Das bedeutet, dass das Display vor Strahlwasser geschützt ist. Der Wasserstrahl aus dem heimischen Gartenschlauch beispielsweise kann Ihrem Display nichts anhaben.

Im nächsten Teil dieser Serie schauen wir uns an, wie LOGO! mit dem IoT-Modul zusammenarbeitet und welche Möglichkeiten sich daraus für eigene Projekte ergeben. Bis dahin wünsche ich Ihnen viel Spaß mit den eigenen LOGO!-Projekten.