Tables

在线表格

在线表格专为实时监控系统变量而设计。与 Basic 或 Editable 表格不同，它不连接 SQL 数据库，而是直接从正在运行的 CODESYS 控制器中获取变量值。

非常适合需要在前端持续观察最新过程值、状态反馈或传感器读数的应用场景。

支持的数据类型包括：

  • BOOL、INT、DINT、REAL、STRING（来自 CODESYS 变量）
  • 数组与结构字段（如传感器状态列表）

重要提示：
在线表格为只读模式 – 用户无法更改其中的数据，仅用于展示。

与所有表格类型一致，在线表格也遵循统一的权限模型（Read、Insert、Update、Delete），但本表格中仅 Read 权限具有实际功能。

⚠️ 在线表格可以混合使用。这意味着可以同时使用输入字段和输出字段、切换开关和行选择功能。

CoDeSys 中的必要步骤

使用 PlcVisu 的一些步骤是必须的，并标有 [*]。

无论如何，您都需要执行这些步骤。

[1] 注册 WebSocket 服务器 *

PROGRAM PLC_PRG VAR, wsInst : PLcVisu.wsInitFB; // 用于通信初始化的 WS 实例, END_VAR

[2] 将库复制到项目中 *

来源：https://doc.plcvisu.cloud/cn/downloads.html

[3] 创建一个新目录和程序，以便更好地查看。

添加新文件夹。例如：07_OnlineTable
添加一个新程序。例如：onlineTablePrg
从一个新的 500 毫秒任务中调用该程序（无需更快）。

[4] 创建以下 4 个结构

以下结构基于一个具有以下参数的表：
行数 = MAXROW
列数 = 5

列类型
1 - 文本
2 - 文本
3 - 输入字段
4 - 输出字段
5 - 切换开关

结构 #1 = OnlineTable

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

结构体 #2 = OnlineTableDate

  • 定义行数
TYPE OnlineTableData :
STRUCT
rows : ARRAY [0..onlineTablePrg.MAXROW] OF OnlineTableRow; // 行数。对于 select、toggle 或 input 函数，请从 Index = 0 开始
END_STRUCT
END_TYPE

结构体 #3 = OnlineTableRow

  • 定义行中的列数和列类型

    TYPE OnlineTableRow :
STRUCT
Device : PlcVisu.OnlineTableText; // 第 1 列为文本
status : PlcVisu.OnlineTableText; // 第 2 列为文本
input_field : PlcVisu.OnlineTableInput; // 第 3 列为输入字段，类型为 REAL
output_field : PlcVisu.OnlineTableNumber; // 第 4 列为输出字段，类型为 REAL
toggleswitch : PlcVisu.OnlineTableToggle; // 第 5 列为切换开关，类型为 BOOL
meta : PlcVisu.OnlineTableRowMeta; // 始终需要元数据
END_STRUCT
END_TYPE

    结构体 #4 = OnlineTableStructures

  • 定义每行的列数

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

    [5] 创建标签

  • 有些步骤只需执行一次。例如：

    IF xInit = FALSE
THEN
onlineTable.structure.columns[1].UIType := 'text';
onlineTable.structure.columns[1].name := 'device';
onlineTable.structure.columns[1].title := '{{description'; // 第一列的占位符文本
onlineTable.structure.columns[2].UIType := 'text';
onlineTable.structure.columns[2].name := 'status';
onlineTable.structure.columns[2].title := '{{status'; // 第二列的占位符文本
onlineTable.structure.columns[3].UIType := 'input';
onlineTable.structure.columns[3].name := 'input_field';
onlineTable.structure.columns[3].title := '{{input_field'; // 第 3 列的占位符文本
onlineTable.structure.columns[4].UIType := 'number';
onlineTable.structure.columns[4].name := 'output_field';
onlineTable.structure.columns[4].title := '{{output_field'; // 第 4 列的占位符文本
onlineTable.structure.columns[5].UIType := 'toggle';
onlineTable.structure.columns[5].name := 'toggleswitch';
onlineTable.structure.columns[5].title := '{{toggleswitch'; // 第 5 列的占位符文本
// 第 1 列
FOR 循环 := 0 TO MAXROW BY 1
DO
tmpStr := '{{value_'; // 此占位符将使用 PlcVisu 进行多语言文本输出
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'; // 设置要显示的值的格式
END_FOR;
// 第 4 列 - 填充数组以在第 4 列显示，其中包含表格中显示的默认值
FOR Loop := 0 TO MAXROW BY 1
DO
rArray_Output[Loop]:= Loop + (Loop*0.1);
END_FOR
ButtonEnableAll := TRUE; // 启动时显示所有行
xInit := TRUE; // 初始化完成
end_if

    [6] 创建循环部分

  • 输入字段：表格到变量

    // --------------------------------------------------------
// 第 3 列 输入字段
// --------------------------------------------------------
FOR 循环 := 1 TO MAXROW BY 1
DO
rArray_Input[Loop]:= onlineTable.data.rows[Loop].input_field.value;
END_FOR

  • 输出字段：变量到表格

    // --------------------------------------------------------
// 第 4 列 输出字段
// --------------------------------------------------------
FOR Loop := 1 TO MAXROW BY 1 
     DO
onlineTable.data.rows[Loop].output_field.value := rArray_Output[Loop]; 
    END_FOR

  • 切换开关：通常双向切换

       // ---------------------------------------------- 
   // 第 5 列切换开关
   // ---------------------------------------------- 
   FOR Loop := 1 TO MAXROW BY 1 
   DO 
     xToggleArray[Loop]:= onlineTable.data.rows[Loop].toggleswitch.value;
  END_FOR

  • 从变量 onlineTable.meta.selectedIndex 获取选中的行号。
    如果之前没有选中任何行，则返回 -1。

用自定义颜色标记选中的整行文本。

您可以通过更改以下变量的值来更改整行的输出颜色：

onlineTable.data.rows[onlineTable.meta.selectedIndex].meta.extraclass

使用此功能需要配合 PLC-Visu 的 CSS 功能。

行选择示例

// --------------------------------------------------------   
// 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;

  • 为每行和每列添加颜色标记。

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

  • 显示/隐藏行：

要隐藏行，您可以将其标记为可见/不可见。

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

或

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

[7] 创建符号配置 *

符号配置用于 CoDeSys 和 PlcVisu 之间的通信。

选中结构 onlineTablePrg/onlineTable 的复选框。

单击“创建”。

PLCVisu 操作步骤

连接

[1] 创建连接

菜单→仪表盘→连接→新建

连接名称 = “PLC_connection”
IP地址 = “eth”（表示 PLCVisu 和 Codesys 运行在同一设备上）
连接类型 = PLC
端口 = 80 | 443
协议 = PLC_communication
重连 = 开启
刷新率 [毫秒] = 1000
Codesys 用户名 = Administrator
Codesys 密码 = Administrator

如果操作成功，状态指示灯将变为绿色。

创建表格。

[1] 创建表格

点击汉堡菜单，选择“表格”
在“表格”中，选择“新建”
名称：online_table
标题：{{my_online_table}}
类型：远程

[2] 使用此表格创建页面

点击汉堡菜单→选择“页面”→
选择“新建”
标题：page_online_table
宽度：1920
高度：980

[3] 将表格添加到页面

进入页面“page_online_table”
添加表格→表格
将元素缩放到所需大小。请勿输入表格，并选择以下参数
控件属性

  • 表格

  • 连接

  • 连接字符串 = 1::Application.onlineTablePrg.onlineTable
    (按 [+] 键并从列表中选择变量)

    • 表格属性

  • 选择表格 = {{my_online_table}}

CSS 编辑器

要将整行显示为绿色，您需要添加一个额外的类，并在 CSS 编辑器中添加以下代码。 

.mygreen {
           color: green;
         }

核心功能

  • 直接连接 CODESYS – 无需中间数据库层
  • 实时数据流 – 实时显示系统状态
  • 只读模式 – 用于监控目的
  • 支持数组与结构体 – 如通道列表、设备或 I/O 状态
  • 可视化格式设置 – 条件颜色、图标、对齐方式
  • 周期性或事件触发更新 – 基于轮询或订阅（未详述）
  • 统一权限模型 – Read 权限可基于用户或角色配置
Read
.mygreen { color: green; }
onlineTable.data.rows[selected_row].meta.visible := FALSE; // Row will be unvisible
onlineTable.data.rows[selected_row].meta.visible := TRUE; // Row will be visible
onlineTable.data.rows[selected_row].status.meta.color := 'red'; // The name of column #2 is ‘status’
// -------------------------------------------------------- // 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;
onlineTable.data.rows[onlineTable.meta.selectedIndex].meta.extraclass
// ---------------------------------------------- // 第 5 列切换开关 // ---------------------------------------------- FOR Loop := 1 TO MAXROW BY 1 DO xToggleArray[Loop]:= onlineTable.data.rows[Loop].toggleswitch.value; END_FOR
// -------------------------------------------------------- // 第 4 列 输出字段 // -------------------------------------------------------- FOR Loop := 1 TO MAXROW BY 1 DO onlineTable.data.rows[Loop].output_field.value := rArray_Output[Loop]; END_FOR
// -------------------------------------------------------- // 第 3 列 输入字段 // -------------------------------------------------------- FOR 循环 := 1 TO MAXROW BY 1 DO rArray_Input[Loop]:= onlineTable.data.rows[Loop].input_field.value; END_FOR
IF xInit = FALSE THEN onlineTable.structure.columns[1].UIType := 'text'; onlineTable.structure.columns[1].name := 'device'; onlineTable.structure.columns[1].title := '{{description'; // 第一列的占位符文本 onlineTable.structure.columns[2].UIType := 'text'; onlineTable.structure.columns[2].name := 'status'; onlineTable.structure.columns[2].title := '{{status'; // 第二列的占位符文本 onlineTable.structure.columns[3].UIType := 'input'; onlineTable.structure.columns[3].name := 'input_field'; onlineTable.structure.columns[3].title := '{{input_field'; // 第 3 列的占位符文本 onlineTable.structure.columns[4].UIType := 'number'; onlineTable.structure.columns[4].name := 'output_field'; onlineTable.structure.columns[4].title := '{{output_field'; // 第 4 列的占位符文本 onlineTable.structure.columns[5].UIType := 'toggle'; onlineTable.structure.columns[5].name := 'toggleswitch'; onlineTable.structure.columns[5].title := '{{toggleswitch'; // 第 5 列的占位符文本 // 第 1 列 FOR 循环 := 0 TO MAXROW BY 1 DO tmpStr := '{{value_'; // 此占位符将使用 PlcVisu 进行多语言文本输出 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'; // 设置要显示的值的格式 END_FOR; // 第 4 列 - 填充数组以在第 4 列显示，其中包含表格中显示的默认值 FOR Loop := 0 TO MAXROW BY 1 DO rArray_Output[Loop]:= Loop + (Loop*0.1); END_FOR ButtonEnableAll := TRUE; // 启动时显示所有行 xInit := TRUE; // 初始化完成 end_if
TYPE OnlineTableStructure : STRUCT Columns : ARRAY[1..5] OF PlcVisu.OnlineTableColumn; END_STRUCT END_TYPE
TYPE OnlineTableRow : STRUCT Device : PlcVisu.OnlineTableText; // 第 1 列为文本 status : PlcVisu.OnlineTableText; // 第 2 列为文本 input_field : PlcVisu.OnlineTableInput; // 第 3 列为输入字段，类型为 REAL output_field : PlcVisu.OnlineTableNumber; // 第 4 列为输出字段，类型为 REAL toggleswitch : PlcVisu.OnlineTableToggle; // 第 5 列为切换开关，类型为 BOOL meta : PlcVisu.OnlineTableRowMeta; // 始终需要元数据 END_STRUCT END_TYPE
TYPE OnlineTableData : STRUCT rows : ARRAY [0..onlineTablePrg.MAXROW] OF OnlineTableRow; // 行数。对于 select、toggle 或 input 函数，请从 Index = 0 开始 END_STRUCT END_TYPE
TYPE OnlineTable : STRUCT structure : OnlineTableStructure; data : OnlineTableData; meta : PLCVisu.OnlineTableMeta; END_STRUCT END_TYPE
PROGRAM PLC_PRG VAR, wsInst : PLcVisu.wsInitFB; // 用于通信初始化的 WS 实例, END_VAR
Read
Delete
Update
Insert
Read