Online-Schema

Beispiel

Der Bootloader bietet die Möglichkeit einer Online-Visualisierung, bei der mittels Web-Browser über LAN oder Internet eine grafische Darstellung der aktuellen Anlagenzustände angezeigt werden kann.
Ab TAPPS 1.26 wird die HTML-Datei für das Onlineschema des BL‑NET in einem neuen Format erzeugt, welches ein automatisches Aktualisieren der Messwerte ermöglicht, ohne die Grafik erneut laden zu müssen.
Das neue Onlineschema erfordert einen Bootloader BL‑NET ab Version 1.40!

Dieses Onlineschema besteht weiterhin aus einer Grafikdatei (z.B. Hydraulikschaltplan), welche sich auch auf einem externen Webserver befinden kann, und der dazu gehörigen HTML-Datei, in der die Anzeigeparameter definiert sind. Die Dateien (.gif und .html) können mit dem Programm Memory Manager im Bootloader gespeichert werden (siehe Datentransfer).

Die Grafik kann mit einem beliebigen Grafik- oder Zeichenprogramm erstellt werden. Sollte kein Grafikprogramm zur Verfügung stehen, kann die Grafik auch in TAPPS erstellt werden und mittels Kopieren und Einfügen in Microsoft® Paint in den benötigten Formaten abgespeichert werden, wobei folgende Punkte zu beachten sind:

1. Die Grafik muss im .gif und im .bmp Format bereitgestellt werden
   1. Die .gif Datei muss auf den BL-NET übertragen werden
   2. Die .bmp Datei Dient zur grafischen Erstellung der HTML-Datei mit TAPPS
2. Die Datei darf die maximale Größe von 196 Kilobyte nicht überschreiten! Um die Ladezeiten beim Anzeigen des Onlineschemas kurz zu halten, sollte die Grafikdatei generell möglichst klein gehalten werden.

Embedded

Für das Anzeigen des Onlineschemas ist eine HTML-Datei notwendig, die alle Informationen über dessen Aussehen beinhaltet. Die HTML-Datei kann sehr einfach mit dem Programm TAPPS erstellt werden. Basierend auf der grafischen Positionierung und Zuordnung der Anzeigewerte erstellt TAPPS die benötigte HTML-Datei.
Die HTML-Datei darf die maximale Größe von 196 Kilobyte nicht überschreiten und sollte in Bezug auf kurze Ladezeiten möglichst klein gehalten werden!

Mit den Komponenten der Bibliothek <Onlineschema> kann die HTML-Datei für das Onlineschema grafisch in TAPPS erstellt werden.

1. Den Rahmen, der den Anzeigebereich darstellt, aus der Bibliothek in die Zeichnung ziehen.
2. Die Grafik (z.B. Hydraulikschaltplan) des Onlineschemas als Bitmap (*.bmp) in die Zeichnung importieren: Datei → Importieren… Liegt die Grafik in einem anderen Dateiformat (z.B. *.gif) vor, kann daraus das benötigte Bitmap mit einem beliebigen Grafikprogramm (z.B. Microsoft® Paint) erzeugt werden.
3. Die Grafik muss am Nullpunkt (linke, obere Ecke) des Rahmens ausgerichtet werden, da die Anzeigeparameter sonst beim Onlineschema an falscher Stelle angezeigt werden. Ebenso darf die Größe der Grafik in TAPPS nicht verändert werden.
4. Die Größe des Rahmens (Anzeigebereich), die normalerweise identisch mit jener der Grafik ist, entsprechend anpassen.
5. Nach Bedarf Platzhalter für die Anzeigeparameter (Temperaturen, Ausgangszustände) aus der Bibliothek einfügen, positionieren und konfigurieren.
   Dazu stehen Platzhalter für links bzw. rechts ausgerichteten Text zur Verfügung.
   Ein Platzhalter besitzt 2 Zeilen, die mittels Doppelklick bearbeitet werden können.

• Vorschauzeile: Die obere Zeile dient als Vorschau und spiegelt die Position sowie das Aussehen des Anzeigeparameters.
  Folgende Textattribute dieser Zeile werden in die HTML-Datei übernommen:
  • Schriftart
  • Schriftgröße (4…20)
  • Schriftstil (fett, kursiv)
  • Textfarbe
  • Hintergrundfarbe

Der eingegebene Text dieser Zeile hat keinen Einfluss auf das Onlineschema und dient ausschließlich als Vorschau, die das Positionieren des Platzhalters erleichtert.

• Befehlszeile: Die untere Zeile ist nur in TAPPS sichtbar und dient zum Definieren des tatsächlichen Anzeigetextes. Die Syntax der Befehlszeile sieht wie flogt aus:

Umlaute, Leer- und Sonderzeichen (°, ß, ²), werden beim Erzeugen der HTML-Datei automatisch von TAPPS in den entsprechenden HTML-Code konvertiert. Die Zeichen “&“, “<“ und “>“ dürfen nicht verwendet werden!
Die Definitionen werden beim Anzeigen des Onlineschemas vom BL-NET durch die entsprechenden, momentanen Messwerte ersetzt. Sind keine Messwerte verfügbar, wird im Onlineschema „NO-DL“ angezeigt. Eine ungültige Definition führt zur Anzeige „ERROR“.
Die Definition eines Anzeigewertes beginnt immer mit dem Zeichen “$“, das aus diesem Grund niemals in den statischen Texten vorkommen darf!
In der Befehlszeile eines Platzhalters können auch mehrere Anzeigewerte definiert werden. Ebenso ist es möglich, dass mittels Platzhalter ein ausschließlich statischer Text im Onlineschema platziert wird.

1. Aus der grafischen Darstellung kann die HTML-Datei für das Onlineschema erzeugt werden: Datei → Export zum Übersetzer → Onlineschema…

Abhängig vom Gerätetyp der erfassten Regelung sind folgende Parameter für die Visualisierung verfügbar:

Es sind folgende Parameter für die Visualisierung verfügbar: Die Auswahl des Reglers, dessen Daten angezeigt werden sollen (über die Wahl eines Datenrahmens des Reglers einstellbar) und

Beispiel einer Definition eines Anzeigewertes aus dem CAN-Datenlogging:
$c4Ae
c4: Es werden Daten jenes Reglers, für den der Datenrahmen 4 erstellt wurde, angezeigt.
A: Analoger Wert des 2. Datensatzes
e: Sensor 15 (siehe „Hexadezimaltabelle“)

Die Netzwerkeingänge können mittels Browser im Menü „GSM-Einstellungen“ des BL-NET definiert werden.

Achtung: Die Nummerierung der Ein- und Ausgänge ist nullbasierend und hexadezimal (siehe Hexadezimaltabelle)! Daraus ergibt sich z.B. für den Eingang 1 die Definition „e0“ und für Eingang 16 die Definition „ef“.

Hexadezimaltabelle:

Beispiele:
$d1ef… Datenleitung 1, Eingang 16
$d2a0… Datenleitung 2, Ausgang 1
$n1a1… Netzwerk, analoger Netzwerkeingang 2

In der HTML-Datei befindet sich ein kommentierter Bereich in dem Änderungen wie z.B. der Speicherplatz der Grafik oder die Automatische Reloadtime vorgenommen werden können.
Diese Änderungen dürfen jedoch ausschließlich an den dafür gekennzeichneten stellen stadtfinden!

um den Pfad der Grafik zu ändern, muss folgende Zeile der HTML-Datei angepasst werden:

var GraphicFile = "GRAFIK.gif";  // Pfad der Grafikdatei

Der Dateiname zwischen den beiden Anführungszeichen kann auf den Pfad der Grafikdatei geändert werden.
z.B:

var GraphicFile = "http://doku.uvr1611.at/grafik.gif"; // Pfad der Grafikdatei

um den Titel der Seite zu ändern muss folgende Zeile geändert werden:

var Title ="Onlineschema";  // Titeltext im Browserfenster

Der Text zwischen den Anführungszeichen kann auf den gewünschten Titel angepasst werden.
z.B:

var Title ="Werkseinstellung TA";  // Titeltext im Browserfenster

um die Zeit, nach der ein automatischer Reload erfolgt zu ändern, muss in Folgenem Block der HTML-Datei eine Änderung vorgenommen werden:

//### Intervallzeit [in Sekunden] für eine automatische Aktualisierung der Messwerte:###
//### < "30" = keine automatische Aktualisierung ###
//--------------------------------------------------
var AutoRefreshTime = 60;

Der Wert von AutoRefreshTime ist, wie auch in der HTML-Datei beschrieben, die Intervallzeit in Sekunden. Ist diese Zeit auf einen Wert kleiner als 30 gesetzt erfolgt keine automatische Aktualisierung der Anzeigewerte!

als Beispiel:

var AutoRefreshTime = 10;  ⇒ keine automatische Aktualisierung der Werte\\
var AutoRefreshTime = 60;  ⇒ Die Werte werden alle 60 Sekunden aktualisiert\\
var AutoRefreshTime = 180; ⇒ Die Werte werden alle 180 Sekunden aktualisiert\\
var AutoRefreshTime = 3*30;⇒ Die Werte werden alle 90 Sekunden aktualisiert\\

um den Linktext für einen manuellen Reload der Werte zu ändern, muss in folgendem Block eine Änderung vorgenommen werden:

//### Linktext für manuelle Aktualisierung der Messwerte: ###
//### "" = kein Link für manuelle Aktualisierung ###
//--------------------------------------------------
var RefreshLink ="Werte aktualisieren";

Der Wert von RefreshLink ist, wie auch in der HTML-Datei beschrieben, der Text, der für den Link zum manuellen Aktualisieren angezeigt wird. Ist dieser Text nicht vorhanden (d.h. var RefreshLink = ““;) dann wird kein Link zum manuellen Aktualisieren der Werte angezeigt.

• Als 1. Zeile muss

  <!—2.0-->

  eingefügt werden.

• Zwischen den Zeilen

  </style>

  und

  </head>

  muss der Javascriptteil eingefügt werden.

  <script type="text/javascript">
  <!--
  var Title ="Onlineschema";  // Titeltext im Browserfenster
  var GraphicFile = "GRAFIK.gif";  // Pfad der Grafikdatei
  var Width = "1020px";
  var Height = "760px";
   
  //### Intervallzeit [in Sekunden] für eine automatische Aktualisierung der Messwerte: ###
  //### < 30 = keine automatische Aktualisierung ###
  //--------------------------------------------------
  var AutoRefreshTime = 60;
   
  //### Linktext für manuelle Aktualisierung der Messwerte: ###
  //### "" = kein Link für manuelle Aktualisierung ###
  //--------------------------------------------------
  var RefreshLink ="Werte aktualisieren";
  -->
  </script>

  In diesem Bereich müssen Anpassungen wie der Grafikpfad, wenn die Grafik nicht am BL-NET liegt bzw. die Höhe und die Breite der Grafik vorgenommen werden. Optional können noch die RefreshTime, der Aktualisierungslinktext und auch der Titel geändert werden.

• Die Zeile

  <img src="GRAFIK.gif" alt="GRAFIK.gif" border="0"/>

  muss aus dem alten Schema entfernt werden.