Documentation PLCVisu and WD - Pages/Pages/Edit content/Controls//tables/type

Tables

Online-Tabelle

Die Online-Tabelle dient der Echtzeitüberwachung von Systemvariablen. Im Gegensatz zu den Tabellen „Basic“ oder „Editable“ ist sie nicht mit einer SQL-Datenbank verbunden, sondern bezieht ihre Werte direkt von einem laufenden CODESYS-Controller.

Damit ist sie ideal geeignet für Anwendungsfälle, in denen aktuelle Prozesswerte, Statusrückmeldungen oder Live-Sensordaten unmittelbar im Frontend visualisiert werden sollen.

Unterstützte Datentypen umfassen:

BOOL, INT, DINT, REAL, STRING (aus CODESYS-Variablen)
Arrays und strukturierte Felder (z. B. Sensortabellen)

Wichtig:
Die Online-Tabelle ist schreibgeschützt – Benutzer können hier keine Werte verändern. Sie dient ausschließlich der Anzeige.

Wie alle Tabellentypen folgt auch sie dem einheitlichen Berechtigungsmodell (Read, Insert, Update, Delete) – allerdings ist in diesem Fall nur Read funktional relevant.

⚠️ Die Onlinetable kann in gemischter Form verwendet werden. Das bedeutet mit Eingabe- und Ausgabefeldern, Umschaltern und Zeilenauswahl.

Erforderliche Schritte in CoDeSys

Einige Schritte zur Verwendung von PlcVisu sind obligatorisch und mit [*] gekennzeichnet. Diese Schritte sind in jedem Fall erforderlich.

[1] Websocketserver registrieren *

PROGRAM PLC_PRG VAR, wsInst : PLcVisu.wsInitFB; // WS-Instanz fÃ¼r die Kommunikationsinitialisierung, END_VAR

[2] Bibliothek in das Projekt kopieren *

Quelle: https://doc.plcvisu.cloud/de/downloads.html

[3] Neues Verzeichnis und Programm für bessere Übersicht erstellen.

Neuen Ordner hinzufügen. Beispiel: 07_OnlineTable
Neues Programm hinzufügen. Beispiel: onlineTablePrg
Programm aus einem neuen 500-ms-Task aufrufen (schneller ist nicht erforderlich).

[4] Erstellen Sie die folgenden 4 Strukturen

Die folgenden Strukturen basieren auf einer Tabelle mit den folgenden Parametern:
Anzahl der Zeilen = MAXROW
Anzahl der Spalten = 5

Spaltentyp
Nr. 1 – Text
Nr. 2 – Text
Nr. 3 – Eingabefeld
Nr. 4 – Ausgabefeld
Nr. 5 – Schalter

Struktur Nr. 1 = OnlineTable

TYPE OnlineTable : STRUCT structure : OnlineTableStructure; data : OnlineTableData; meta : PLCVisu.OnlineTableMeta; END_STRUCT END_TYPE

Struktur #2 = OnlineTableData

Anzahl der Zeilen definieren

TYPE OnlineTableData :
STRUCT
rows : ARRAY [0..onlineTablePrg.MAXROW] OF OnlineTableRow; // Anzahl der Zeilen. Bei Select-, Toggle- oder Input-Funktionen bitte mit Index = 0 beginnen.
END_STRUCT
END_TYPE

Struktur #3 = OnlineTableRow

Definiert die Anzahl und den Typ der Spalten in einer Zeile

TYP OnlineTableRow :
STRUKTUR
GerÃ¤t : PlcVisu.OnlineTableText; // Spalte 1 ist vom Typ TEXT
Status : PlcVisu.OnlineTableText; // Spalte 2 ist vom Typ TEXT
Eingabefeld : PlcVisu.OnlineTableInput; // Spalte 3 ist ein Eingabefeld vom Typ REAL
Ausgabefeld : PlcVisu.OnlineTableNumber; // Spalte 4 ist ein Ausgabefeld vom Typ REAL
Umschalter : PlcVisu.OnlineTableToggle; // Spalte 5 ist ein Umschalter vom Typ BOOL
Meta : PlcVisu.OnlineTableRowMeta; // Meta wird immer benÃ¶tigt
END_STRUCT
END_TYPE

Struktur #4 = OnlineTableStructures

Definiert die Anzahl der Spalten in einer Zeile

TYPE OnlineTableStructure :
STRUCT
Columns : ARRAY[1..5] OF PlcVisu.OnlineTableColumn;
END_STRUCT
END_TYPE

[5] Beschriftung erstellen

Einige Schritte müssen nur einmal ausgeführt werden. Beispiel:

WENN xInit = FALSE
DANN
onlineTable.structure.columns[1].UIType := 'text';
onlineTable.structure.columns[1].name := 'device';
onlineTable.structure.columns[1].title := '{{description'; // Platzhaltertext fÃ¼r Spalte 1
onlineTable.structure.columns[2].UIType := 'text';
onlineTable.structure.columns[2].name := 'status';
onlineTable.structure.columns[2].title := '{{status'; // Platzhaltertext fÃ¼r Spalte 2
onlineTable.structure.columns[3].UIType := 'input';
onlineTable.structure.columns[3].name := 'input_field';
onlineTable.structure.columns[3].title := '{{input_field'; // Platzhaltertext fÃ¼r Spalte 3
onlineTable.structure.columns[4].UIType := 'number';
onlineTable.structure.columns[4].name := 'output_field';
onlineTable.structure.columns[4].title := '{{output_field'; // Platzhaltertext fÃ¼r Spalte 4
onlineTable.structure.columns[5].UIType := 'toggle';
onlineTable.structure.columns[5].name := 'toggleswitch';
onlineTable.structure.columns[5].title := '{{toggleswitch'; // Platzhaltertext fÃ¼r Spalte 5
// Spalte 1
FOR Loop := 0 TO MAXROW BY 1
DO
tmpStr := '{{value_'; // Dieser Platzhalter verwendet PlcVisu fÃ¼r die mehrsprachige Textausgabe
tmpStr := ConCat(tmpStr,INT_TO_STRING(Loop));
tmpStr := ConCat(tmpStr,'_text}}');
onlineTable.data.rows[Loop].device.value := tmpStr;
onlineTable.data.rows[Loop].output_field.meta.numberFormat:= '0.00'; // Format der anzuzeigenden Werte
END_FOR;
// Spalte 4 - Array in Spalte 4 mit Standardwerten fÃ¼llen, die in der Tabelle angezeigt werden sollen
FOR Loop := 0 TO MAXROW BY 1
DO
rArray_Output[Loop]:= Loop + (Loop*0.1);
END_FOR
ButtonEnableAll := TRUE; // Alle Zeilen beim Start anzeigen
xInit := TRUE; // Initialisierung abgeschlossen
end_if

[6] Zyklischer Teil erstellen

Eingabefeld: Tabelle zu Variable

// --------------------------------------------------------
// Spalte 3 Eingabefeld
// --------------------------------------------------------
FOR Schleife := 1 TO MAXROW BY 1
DO
rArray_Input[Schleife]:= onlineTable.data.rows[Schleife].input_field.value;
END_FOR

Ausgabefeld: Variable in Tabelle

// --------------------------------------------------------
// Spalte 4 Ausgabefeld
// --------------------------------------------------------
FOR Loop := 1 TO MAXROW BY 1 
     DO
       onlineTable.data.rows[Loop].output_field.value := rArray_Output[Loop]; 
    END_FOR

ToggleSwitch: normalerweise in beide Richtungen

   // -------------------------------------------------------- 
   // Spalte 5 ToggleSwitch
   // -------------------------------------------------------- 
   FOR Loop := 1 TO MAXROW BY 1 
   DO 
     xToggleArray[Loop]:= onlineTable.data.rows[Loop].toggleswitch.value;
  END_FOR

Die Zeilenauswahl erfolgt über die Variable onlineTable.meta.selectedIndex. Sie erhalten die Nummer der ausgewählten Zeile.
Wenn zuvor keine Zeile ausgewählt war, erhalten Sie -1.

Markieren Sie den Text der gesamten ausgewählten Zeile in einer eigenen Farbe. Sie können die Ausgabefarbe der gesamten Zeile ändern, indem Sie den Wert dieser Variable anpassen: onlineTable.data.rows[onlineTable.meta.selectedIndex].meta.extraclass. Hierfür müssen Sie die CSS-Funktionalität von PLC-Visu verwenden.

Beispiel für die Zeilenauswahl

// --------------------------------------------------------   
// a new row was selected
// -------------------------------------------------------- 
IF ( onlineTable.meta.selectedIndex <> SelectedIndexOld ) AND // selectedIndex has changed
   ( onlineTable.meta.selectedIndex >= 0                )     // Cause the selectedIndex starts with -1
THEN
  FOR Loop := 0 TO MAXROW BY 1 
  DO
    onlineTable.data.rows[Loop].meta.extraclass   := '';
  END_FOR 
  onlineTable.data.rows[onlineTable.meta.selectedIndex].meta.extraclass   := 'mygreen'; // Set over CSS
  ButtonEnableAll := FALSE;  
END_IF
SelectedIndexOld := onlineTable.meta.selectedIndex;

Einzelne Zeilen und Spalten farblich markieren.

onlineTable.data.rows[selected_row].status.meta.color := 'red';   // The name of column #2 is âstatusâ

Zeilen ein-/ausblenden:

Um Zeilen auszublenden, können Sie diese als sichtbar/unsichtbar markieren.

onlineTable.data.rows[selected_row].meta.visible := TRUE; // Row will be visible

oder

onlineTable.data.rows[selected_row].meta.visible := FALSE; // Row will be unvisible

[7] Symbolkonfiguration erstellen

Die Symbolkonfiguration wird für die Kommunikation zwischen CoDeSys und PlcVisu benötigt.
Aktivieren Sie das Kontrollkästchen für die Struktur onlineTablePrg/onlineTable. Klicken Sie auf „Erstellen“.

Schritte in PlcVisu

Verbindung

[1] Verbindung erstellen

Burger-Menü → Dashboard → Verbindung → Neu

Verbindungsname = „PLC_connection“
IP-Adresse = „eth“ (Dies bedeutet, dass PlcVisu und CoDeSys auf demselben Gerät laufen)
Verbindungstyp = SPS
Port = 80 | 443
Protokoll = PLC_communication
Wiederverbinden = Ein
Aktualisierungsrate [ms] = 1000
CODESYS-Benutzername = Administrator
CODESYS-Passwort = Administrator

Bei erfolgreicher Einrichtung leuchtet die Status-LED grün.

Tabelle erstellen.

[1] Tabellen erstellen

Drücken Sie das Burgermenü und wählen Sie „Tabellen“. Wählen Sie „Tabellen“ und anschließend „Neu“.
Name : online_table
Title : {{my_online_table}}
Typ : Remote

[2] Seite mit dieser Tabelle erstellen

Drücken Sie das Burgermenü und wählen Sie „Seiten“. Wählen Sie „Neu“.

Titel: page_online_table
Breite: 1920
Höhe: 980

[3] Tabelle zur Seite hinzufügen.

Gehen Sie zur Seite „page_online_table“.
Hinzufügen > Tabellen > Tabelle
Zoomen Sie das Element auf die gewünschte Größe. Geben Sie nicht die Tabelle ein und wählen Sie die folgenden Parameter:
Steuerungseigenschaften

Tabelle
Verbindung
Verbindungszeichenfolge = 1::Application.onlineTablePrg.onlineTable
(Drücken Sie dazu auf [+] und wählen Sie die Variable aus der Liste aus.)
Tabelleneigenschaften
Tabellen auswählen = {{my_online_table}}

CSS Editor

Um eine ganze Zeile grün anzuzeigen, benötigen Sie die Klasse extraclass und den folgenden Eintrag im CSS-Editor:

.mygreen {
           color: green;
         }

Hauptfunktionen

Direkte Verbindung zu CODESYS – keine Datenbank zwischengeschaltet
Echtzeit-Datenstrom – zeigt aktuelle Systemzustände ohne Verzögerung
Nur-Lese-Modus – ausschließlich zur Überwachung vorgesehen
Unterstützt Arrays und Strukturen – z. B. Kanallisten, Geräte- oder I/O-Zustände
Visuelle Formatierung – bedingte Farben, Icons, Ausrichtung
Zyklisches oder ereignisbasiertes Update – durch Polling oder Subscription (nicht dokumentiert)
Einheitliches Berechtigungsmodell – Read-Zugriff kann benutzer- oder rollenbasiert definiert werden

Inhaltsangabe:

Online-Tabelle
- Erforderliche Schritte in CoDeSys
Schritte in PlcVisu
- Verbindung
- Hauptfunktionen