Die ursprüngliche Idee des World Wide Web ist, Inhalte unabhängig vom Betriebssystem, Anzeigegerät und Software anzubieten. Hierfür wurden vom WWWConsortium (W3C) offene Standards geschaffen, die Browser ohne weitere Hilfsmittel interpretieren und darstellen können. Beispielsweise gibt es Standards für die Textdarstellung (HTML), für Pixelgrafiken (PNG), Bedienelemente (Forms) und Vektorgrafiken (SVG). Eine Web-Seite mit diesen Elementen wird mit Hilfe von JavaScript animiert.

Diese Script-Sprache bietet heute einen immensen Funktionsvorrat und wird von den Web-Browsern mit exzellenter Performance (teilweise sogar mit Laufzeit-Compilierung!) abgearbeitet. Für die Übertragung von Inhalten und Daten vom Web-Server zum Browser reicht ein einziges Protokoll – das hypertext transfer protocol (http). Mit diesen, von jedem Web-Browser unterstützten Standards, lässt sich jede zweidimensionale Visualisierung realisieren. Anstatt diese Web-Standards zu nutzen, degradieren beinahe alle verfügbaren Visualisierungen den Browser zu einem Anzeige-Rahmen. Die Tools übertragen entweder ein komplettes Programm (Java, ActiveX) oder Inhalte, die nur zusätzliche Plug-Ins wie Flash oder Silverlight interpretieren und darstellen können.

Die Hersteller solcher Tools ignorieren schlichtweg die „nativen“ Visualisierungseigenschaften des Web-Browsers. Dies zeigt sich etwa beim Versuch, reine Web-Applikationen wie Google Maps mit solchen Visualisierungen zu kombinieren: Während Software auf Basis von Web-Standards mit diesen Applikationen auf gleicher Ebene beliebig interagieren kann, grenzen sich geschlossene Applikationen dagegen ab und können meist nur koexistieren.

Naturbelassen kontra proprietär

Eine „nicht-native“ Visualisierung muss nicht zwangsläufig schlecht sein. Die Entscheidung, proprietäre Formate und Applikationen zu wählen, sollte jedoch bewusst getroffen werden, beispielsweise wenn spezielle Funktionen eines Plug- In (3D-Darstellung) gebraucht werden oder der lokale Zugriff auf spezifische Funktionen notwendig ist. Meist wird aber auf solche Technologien zurückgegriffen, weil Anbieter ihre vorhandenen Software-Investitionen wieder verwerten wollen: Denn Visualisierungstools lassen sich relativ einfach als ActiveX in Web-Browser einbinden. Die vorhandene Funktionalität für das Web neu zu entwickeln, wäre dagegen mit einem enormen zeitlichen und finanziellen Aufwand verbunden.

Dabei sprechen die Vorteile einer nativen Web-Visualisierung für sich:

• Daten im offenen Web-Format können mit vielen Standardprogrammen (MS-Office, CorelDraw, Adobe Illustrator) ausgetauscht werden. 
• Die große Palette fertiger Funktionsbausteine (Kalender, GIS, Video) aus dem Web kann genutzt werden. 
• Reine Web-Technologien lassen sich einfach kombinieren.
• Einfachere Skalierung der Visualisierungen auf verschiedenen Plattformen. 
• Betriebsinterne Standardisierungen der Bedienoberfächen können auf vorhandene Formate aufbauen und werden damit bei heterogenen Anlagen zu produktunabhängigen Oberflächenstandards. 
• Sicherheit ist integraler Teil des Webs. 
• Web-Technologie ist häufiger Teil der Ausbildung als proprietäre Automatisierungsprodukte.  
• Native Web-Technologie läuft im Browser ohne Zusatzinstallation auf vielen Betriebssystemen.

Die Leistungsfähigkeit ist definitiv kein Argument, um Browser als Visualisierungs- Frontend außen vor zu lassen: Web- Browser haben sehr effektive Script- und Grafik-Engines, die eigens dafür entwickelt wurden, Inhalte darzustellen und mit Daten zu ergänzen. Performance- Messungen zeigen, dass mit nativer Web- Technologie hohe Anforderungen hinsichtlich Darstellungsqualität und -geschwindigkeit sowie der Anzahl Datenpunkte pro Bild problemlos umzusetzen sind: Bilder mit tausenden Elementen und hunderten dynamisierter Objekte können in Sekundenbruchteilen aufgeschaltet werden. Gerade im Web ist es nichts Ungewöhnliches, einen Web-Server mit hunderten Clients zu betreiben.

Die Grundlage schaffen einfache Funktionsprinzipien: Ein Web-Server wird per URL (Uniform Resource Locator) wie http://www.google.de adressiert. Daraufhin liefert der Web-Server dem Web-Browser per http-Protokoll die Inhalte in einem standardisierten Format, die der Browser interpretiert und darstellt. Enthält die Seite dynamische Elemente, wird im Hintergrund eine Kommunikationsverbindung zwischen Web-Seite und Web-Server aufgebaut. Eine bekannte Technologie hierfür ist AJAX (Asynchronous Javascript and XML) oft in Verbindung mit JSON (Javascript Object Notation). Auf diese Weise ist die Repräsentation (Browser) von der Datenschicht (Web-Server) getrennt.

Web-Server, wie sie beispielsweise in Speicherprogrammierbaren Steuerungen integriert sind, erfüllen leider nur einen Teil der Anforderungen. Meist werden nur rudimentäre Web-Standards wie HTML oder Pixelgrafiken wie GIF-Dateien implementiert, bei denen der Zugriff auf die Prozessdaten (Datenkommunikation) unzureichend und bei jedem SPS-Hersteller unterschiedlich ist. Daher können Anwender meist nur primitive HTML-Seiten erstellen – was zudem noch mit hohem Aufwand verbunden ist.

Guideline für die Web-Visualisierung

Mit „atvise webMI“ wurden von der Firma Certec in einer Guideline alle Anforderungen zusammengestellt, die ein Web- Server benötigt, um eine leistungsfähige Visualisierung auch auf kleinen Geräten mit einem 44-MHz-Controller und 4 MByte RAM bereitzustellen zu. Die Richtlinie umfasst Informationen zu:

• effektiven Mime-Types (Inhaltskennzeichnung), Datenkompression, Caching; 
• anzuwendende Web-Standards (http, https); 
• eine 100%-ig http-kompatible Datenübertragung mit publish/subscribe Modell (das heißt dynamische An-/Abmeldung und änderungsgetriebener Datenaustausch) auf Basis von AJAX + JSON; 
• einheitliche Zugriffsmethoden für Daten, Alarme, Historie; 
• User-/Session-Handling und Security 
• sowie Vorgaben zur Skalierung der Architektur.

Der Leitfaden nutzt ausschließlich offene Web-Standards, die in vorhandene Web-Server nachträglich integriert werden können ohne die Grundfunktionen zu beeinflussen. Ein mit der Guideline realisierter Web-Server ist produktneutral, offen, umfassend dokumentiert und kann beinahe jedem Browser eine leistungsfähige Visualisierung anbieten. Um solche Architekturen beliebig skalieren zu können, stellt das Web ein passendes Verfahren zur Verfügung, den Proxy-Server. Darüber können Prozessdaten und Bilder nicht nur direkt vom Endgerät, sondern auch von einem Zwischenserver (Proxy) abgerufen werden. Speziell bei größeren Anlagen entlasten Proxies die Endgeräte. Zudem entsteht eine übergeordnete Leitebene, ohne Daten oder Bilder doppelt erstellen zu müssen.

Durch die strikte Trennung von Daten (liefert der Web-Server) und Darstellung (im Web-Browser) kann auch die grafisch aufwendige Visualisierung auf einem leistungsfähigen Computer bei geringen Datenmengen vom Web-Server eines Mini-Geräts geliefert werden. Umgekehrt lässt sich eine große Anlage mit vielen Datenpunkten von einem mobilen Endgerät wie Apples iPhone aus bedienen – die Nutzung von Vektorgrafiken vorausgesetzt.

Skalierbare Vektorgrafik

Eine moderne Visualisierung sollte daher auf Vektordaten basieren. Damit ist die Grafik unabhängig von der Auflösung des Bediengeräts und lässt sich, solange die Schriftgröße lesbar bleibt, auf jedem Endgerät darstellen und bedienen. Weiterhin können die typischen Dynamisierungen wie Farbwechsel oder Blinken direkt und ohne Umwege realisiert werden. Typische Bedienfunktionen wie Zoomen sind ebenfalls nur mit einem Vektorgrafik-Format sauber lösbar.

Das W3C hat hierfür das SVG-Format (Scalable Vector Graphics) entwickelt. SVG definiert nicht nur primitive Grafiken, sondern ermöglicht Effekte wie Farbverläufe und Transparenz. SVG wird fast von allen gängigen Browsern (Firefox, Safari, Opera, Chrome) nativ unterstützt. Einzig Microsofts Internet Explorer fügt sich hier nicht und bietet stattdessen seit der Version 6 mit der Vector Markup Language (VML) ein eigenes, proprietäres Vektor-Format an.

Das Engineering

Web-Server lassen sich beinahe auf jedem Gerät und in jeder Software implementieren.

Wer eine grafisch anspruchsvolle reine Web-Visualisierung konzipieren will, muss bislang mit verschiedensten Tools und Web-Technologien umgehen und Scripte programmieren können. Automatisierungstechniker sind es jedoch von den klassischen HMI- und Scada-Systemen gewohnt, die Visualisierungs-Applikation weitgehend ohne Programmierung und Web-Kenntnisse zu erstellen. Mit dem ab April verfügbaren Entwicklungstool atvise Builder stellt Certec ein solches Werkzeug für Web-Visualisierungen zur Verfügung.

Das Projektierungstool generiert aus den gezeichneten Bedienoberflächen die entsprechenden Web-Seiten, die auf jeden Guideline-konformen Web-Server geladen werden können – ohne Installation zusätzlicher Applikationen oder Plug-Ins. Der Browser, der die Seiten vom Web-Server erhält, erstellt daraus die Visualisierung und kommuniziert im Hintergrund mit dem Web-Server. Die Web- MI-Guidelines garantieren wiederum den einheitlichen bidirektionalen Datenaustausch. Der atvise builder berücksichtigt im Vorfeld eventuelle Browser-„Eigenheiten“. Beispielsweise konvertiert das Tool alle SVG-Grafikdaten in VML, um auch dem Internet Explorer passende Bildinformationen bereitzustellen.

Autor: Michael Haas ist Geschäftsführer der Firma Certec EDV in Eisenstadt, Österreich.