Skip to main content

可视化元素：框架

象征：

_visu_icon_symbol_frame.png

类别：基本的

该元素用作框架，用于显示一个或多个现有可视化。您将获得一个结构化的用户界面。框架的大小可以固定或缩放。引用可视化的显示区域将自动适应框架大小。

注意

Kann auch veraltet sein示例项目：“可视化切换”

元素属性

所有元素属性都可用吗？

只有在您选择 “” 后，所有属性才可用 高级 选项或 所有类别 过滤 特性。

元素名称

例子： refVisUserInfo

提示

为元素指定单独的名称，以便更快地在元素列表中找到它们。

元素类型

框架

剪裁

standard icon: 固定大小。仅显示适合框架内的引用可视化部分。

要求： 缩放类型 财产是 固定的.

显示框架

. 显示框架

  • 无框：框架的显示区域没有边框。

  • 框架：框架的显示区域有边框。

  • 没有带偏移的框架：框架的显示区域没有边框，并且与框架区域相比，引用的可视化的显示区域向内减少了一个像素。间隙可防止引用的可视化接触任何相邻元素。

位置

该位置定义可视化窗口中元素的位置和大小。这是基于笛卡尔坐标系的。原点位于窗口的左上角。正水平 X 轴向右延伸。正垂直 Y 轴向下延伸。

X

元素左上角的 X 坐标（以像素为单位）

例子： 10

Y

元素左上角的 Y 坐标（以像素为单位）

例子： 10

宽度

以像素为单位指定

例子： 150

高度

以像素为单位指定

例子： 30

角度

要求: 此属性仅在您选择了时才可用 支持客户端动画和原生元素叠加 中的选项 可视化管理器。

角度值（以度为单位）

示例： 25

注意

离线模式下的视图可能与联机模式下的视图略有不同。

提示

您还可以通过拖动框来更改值 _visu_icon_position_element.png 符号到编辑器中的其他位置。

所有元素属性都可用吗？

只有在您选择 “” 后，所有属性才可用 高级 选项或 所有类别 过滤 特性。

提示

为元素指定单独的名称，以便更快地在元素列表中找到它们。

缩放类型

缩放类型

定义高度和宽度的缩放比例 引用 可视化

可视化效果显示在框架或选项卡元素中。

各向同性

可视化会缩放到要显示的元素的大小。如果高度与宽度的比例固定，可视化将保持其比例。

各向异性

可视化会根据要显示的元素的大小进行缩放。高度和宽度分别根据元素进行缩放。

固定的

无论要显示的元素的尺寸如何，可视化都会以其原始大小显示。

滚动条

可视化在元素中显示，不进行任何缩放。如果可视化大于元素，则元素会带有滚动条。

注意：将变量分配给属性 水平滚动位置变量 或者 垂直滚动位置变量. 您可以在应用程序中处理滚动条位置的数据。

动态滚动

可视化的大小是动态且循环计算的。计算大小时会考虑引用可视化元素的可见性。仅当动态计算后引用可视化的内容无法在框架区域中完全显示时才会显示滚动条。

停用背景绘图

停用背景绘图

_cds_icon_option_deactivated.png：引用可视化的非动画元素显示为背景图像（背景框），以优化可视化的性能。

其优点是背景元素（例如彩色矩形）只需在背景中绘制一次。

standard icon：停用背景显示以防止上述行为。

如果另一个元素（主页的元素）应该运行在此背景框架后面，则可能会出现问题。在这种罕见情况下，设置此选项以使矩形实际上运行在其后面是有意义的。

注意

此属性可用于以下设置：

  • 客户端动画功能未启用：在可视化管理器中，在 设置 选项卡， 支持客户端动画和原生元素叠加 未选择选项。

    当启用客户端动画时，会自动执行背景绘制。

  • 这 缩放类型 属性设置为 可滚动。

滑动

使用此功能，元素中引用的可视化 (框架 或者 选项卡) 可以通过轻扫手势（平移或轻拂手势）进行切换。

滑动行为

要求：只有在 多点触控处理 选项被选中。

可视化用户需要如何执行滑动（平移或轻弹手势）以触发图像更改为元素中下一个引用的可视化的选项：

  • 水平滑动：从右向左滑动，反之亦然

  • 垂直滑动：从上向下滑动，反之亦然

  • 不可滑动：禁用滑动（默认）

提示：将缩放类型设置为 各向异性.

滑动预览

要求：该选项仅在覆盖模式下可用（支持客户端动画和原生元素的叠加 选项）以在多点触控设备上显示预览图像。

_cds_icon_option_black_activated.png：在滑动手势期间，框架中会显示下一个可视化的预览图像。

有关详细信息，请参阅： 可视化参考 或者 设置

参考

包含当前配置的可视化引用作为子节点

配置 按钮

打开 框架配置 对话。该对话框允许您管理引用的可视化。

参考

警告

可视化可以通过以下方式嵌套在任何深度 框架 元素。为了使用 切换到任何可视化 框架选择类型没有任何问题，一个框架不得包含超过 21 个引用的可视化。有关详细信息，另请参阅 输入配置 元素的：动作 开关框架可视化。

当前引用的可视化列表

具有按钮的可视化也将其显示为子节点。每个接口变量都与当前分配的传输参数一起列出。

例子：

. vis_FormA

  • iDataToDisplay_1 ： PLC_PRG.iVar1

  • iDataToDisplay_2 ： PLC_PRG.iVar2

提示

您可以在此处将变量分配更改为接口变量并编辑值字段。或点击 配置 按钮。

位置

该位置定义可视化窗口中元素的位置和大小。这是基于笛卡尔坐标系的。原点位于窗口的左上角。正水平 X 轴向右延伸。正垂直 Y 轴向下延伸。

X

元素左上角的 X 坐标（以像素为单位）

例子： 10

Y

元素左上角的 Y 坐标（以像素为单位）

例子： 10

宽度

以像素为单位指定

例子： 150

高度

以像素为单位指定

例子： 30

角度

要求: 此属性仅在您选择了时才可用 支持客户端动画和原生元素叠加 中的选项 可视化管理器。

角度值（以度为单位）

示例： 25

注意

离线模式下的视图可能与联机模式下的视图略有不同。

提示

您还可以通过拖动框来更改值 _visu_icon_position_element.png 符号到编辑器中的其他位置。

中心

属性包含旋转点坐标的固定值。旋转点在编辑器中显示为 _visu_icon_center_point.png 符号并用作旋转和缩放的中心。

提示

您也可以通过拖动 _visu_icon_center_point.png 符号到编辑器中的另一个位置。

X

旋转点的 X 坐标

Y

旋转点的 Y 坐标

颜色

属性包含文本颜色的固定值。

颜色

框架颜色

_cds_icon_arrow_down.png: 带有样式颜色的列表框打开

_cds_icon_three_dots.png： 颜色 标准对话框打开颜色选择

注意

正常状态是当布尔变量在 颜色变量 元素属性未定义或其值为 FALSE。

报警颜色

处于警报状态的元素的颜色

注意

报警条件是当布尔变量的值 颜色变量 → 切换颜色 元素属性是 FALSE。

透明度

整数（值范围从 0 到 255）。确定相应颜色的透明度

255：颜色不透明。

0：颜色完全透明。

注意

如果颜色是样式颜色并且已经具有透明度值，则此属性受写保护。

外貌

属性包含用于设置元素外观的固定值。

行宽

值（以像素为单位）

例子： 2

注意

价值 0 和 1 两者都导致一个像素的线宽。如果不应显示任何行，则 线条样式 属性必须设置为 无形的 选项。

线条样式

线表示的类型

  • 坚硬的

  • 短跑

  • 点

  • 破折号

  • 点划线点

  • 无形的

提示

您可以在中分配变量 外观变量 用于动态控制外观的属性。固定值在此处定义。

文本

文本

字符串（不带单引号）

例子： Main page %i

该元素使用此文本进行标记。如果占位符 %<format string> 在文本中指定，然后在 文本变量 → 文本 属性在占位符的位置输出。

提示

使用 Ctrl+进入 添加换行符的快捷方式。

提示

指定的文本会自动传输到 全局文本列表 文本列表。因此，这些文本可以本地化。

文本属性

这些属性获得文本属性的固定值，并作用于中配置的文本 文本 → 文本 或者 文本 → 工具提示。

水平对齐

元素内文本的水平对齐

垂直对齐

元素内文本的垂直对齐方式

文本格式

. 显示过长文本的定义

  • 默认: 太长的文本被截断。

  • 越线：文本被分成几行。

  • 省略：可见文本以“...”结尾，表示不完整。

字体

例子： 默认

_cds_icon_three_dots.png： 这 字体 对话框打开。

_cds_icon_arrow_down.png: 带有样式字体的列表框

字体颜色

例子： 黑色的

_cds_icon_three_dots.png： 这 颜色 对话框打开。

_cds_icon_arrow_down.png：带有样式颜色的列表框

透明度

整数（值范围从 0 到 255)

透明值决定相应颜色的透明度。

255：颜色不透明。

0：颜色完全透明。

注意

如果颜色是样式颜色并且已经具有透明度值，则此属性受写保护。

绝对运动

这些属性包含用于动态控制元素位置的 IEC 变量。参考点是元素的左上角。在运行时，整个元素被移动。

移动

X

  • X 位置的变量（数字数据类型）（以像素为单位）

    例子： PLC_PRG.iPos_X

在运行时增加此值会使元素向右移动。

Y

  • Y 位置的变量（数字数据类型）（以像素为单位）

    例子： PLC_PRG.iPos_Y

  • 容器变量： Container.Height

    有关详细信息，请参阅： 优化调整位置和大小

在运行时增加此值会使元素向下移动。

回转

旋转角度的变量（数字数据类型）（以度为单位）

例子： PLC_PRG.iAngle1

元素的中点在 中心 观点。该旋转点显示为 _visu_icon_center_point.png 象征。

在运行时，元素的对齐相对于可视化的坐标系保持不变。增加该值会使元素向右旋转。

_visu_img_prp_rotation.png

内部旋转

旋转角度的变量（数字数据类型）（以度为单位）

例子： PLC_PRG.iAngle2

在运行时，元素围绕指定的旋转点旋转 中心 根据变量的值。此外，元素的对齐方式会根据可视化的坐标系进行旋转。增加代码中的值会顺时针旋转。

旋转点如图所示 _visu_icon_center_point.png 象征。

注意

如果在 位置→角度 属性，然后在执行可视化时将静态旋转角度添加到可变旋转角度（偏移）。

_visu_img_prp_inner_rotation.png

提示

您可以将变量组合到 单位换算.

提示

这 X, 是, 回转， 和 内部旋转 “客户端动画”功能支持属性。

相对运动

属性包含用于移动元素的变量。参考点是元素的位置（位置 财产）。元素的形状可以改变。

左上运动

X

  • 变量（整数数据类型）的数字（以像素为单位） 剩下 边缘水平移动

    例子： PLC_PRG.iDeltaX

增加值会将元素向右移动。

Y

  • 变量（整数数据类型）为数字（以像素为单位） 最佳 边缘垂直移动

    例子： PLC_PRG.iDeltaY

增加值会使元素向下移动。

右下运动

X

  • 变量（整数数据类型）的数字（以像素为单位） 正确的 边缘水平移动。

    例子： PLC_PRG.iDeltaWidth

  • 容器变量： Container.Width

    有关详细信息，请参阅： 优化调整位置和大小

增加值会将元素向右移动。

Y

  • 变量（整数数据类型）为数字（以像素为单位） 底部 边缘垂直移动

    例子： PLC_PRG.iDeltaHeight

  • 容器变量： Container.Height

    有关详细信息，请参阅： 优化调整位置和大小

增加值会使元素向下移动。

文本变量

文本变量

变量（数据类型符合 格式化规范) 中的占位符 属性：文本 → 文本

例子： PLC_PRG.iAccesses

变量值替换元素文本中的占位符。在运行时，元素用文本标记，变量值不断更新。

注意

如果您指定一个支持文本列表的枚举类型变量，则枚举数据类型的名称会自动添加到变量名称后的尖括号中。例子： PLC_PRG.enVar <enumeration name>.然后在打印文本时打印枚举组件的符号值而不是数值。有关枚举，请参阅帮助页面。

工具提示变量

变量（数据类型符合 格式化规范) 中的占位符 文本 → 工具提示 财产

例子： PLC_PRG.iAccessesInTooltip

变量值替换元素工具提示中的占位符。在运行时，会显示工具提示并不断更新变量值。

动态文本

动态文本是文本列表的可变索引文本。在运行时，显示当前在变量中索引的文本。

文本列表

. 文本列表的名称

  • 作为变量（字符串）

  • 作为带有单直引号的固定字符串文字

    例子： 'Errorlist'

_cds_icon_arrow_down.png: 带有文本列表中可用对话框的列表框

注意：如果将项目中的文本列表传输到库中的可视化，则必须在文本列表的名称前面添加一个点。

文本索引

. 引用所需输出文本的文本列表 ID

  • 作为带有单直引号的 ID 的固定字符串

    例子： '1'

  • 作为变量 (STRING) 用于动态控制文本输出

    例子： strTextID

    样本分配： PLC_PRG.strTextID := '1';

工具提示索引

. 引用所需输出文本的文本列表 ID

  • 作为带有单直引号的 ID 的固定字符串

    例子： '2'

  • 作为变量 (STRING) 用于动态控制文本输出

    例子： strToolTipID

    样本分配： PLC_PRG.strToolTipID := '2';

字体变量

这些变量允许对文本显示进行动态控制。

字体名称

多变的 （STRING) 用于文本的字体

例子： PLC_PRG.stFontVar := 'Arial';

提示

您可以找出标准中可用的字体 字体 对话。

尺寸

字体大小（以像素或点为单位）的变量（数字数据类型）

应用的单位在变量名后面的括号中指定。

  • <pt>：点（默认）

    例子： PLC_PRG.iFontHeight <pt>

    代码： iFontHeight : INT := 12;

  • <px>：像素

    例子： PLC_PRG.iFontHeight <px>

    代码： iFontHeight : INT := 19;

提示

字体大小以磅为单位指定（例如：Arial 12）。当可变字体大小应与字体匹配时使用点，例如，如果在 文本属性 → 字体 财产。

提示

如果单击值字段，则 _cds_img_dropdownlist_unit_font_size.png 右侧打开列表框以设置单位。

标志

多变的 （DWORD) 用于确定字体显示的标志

. 标志：

  • 1: 斜体

  • 2： 大胆的

  • 4: 下划线

  • 8: 删除线

注意

您可以通过添加标志的编码来组合字体显示。例如，粗体和带下划线的文本： PLC_PRG.dwFontType := 6;

字符集

多变的 （DWORD) 为字体的字符集编号

字符集编号的选择对应于 脚本 标准的制定 字体 对话。

颜色

多变的 （DWORD) 用于文本的颜色

例子： PLC_PRG.dwColorFont:= 16#FF000000;

文本对齐的标志

用于编码文本对齐的变量（整数数据类型）

例子： PLC_PRG.dwTextAlignment

. 编码：

  • 0： 左上方

  • 1: 水平中心

  • 2： 正确的

  • 4: 垂直中心

  • 8： 底部

注意

您可以通过添加标志的编码来组合文本对齐方式。例如，垂直和水平居中的文本： PLC_PRG.dwFontType := 5;

提示

显示文本的固定值设置在 文本属性。

颜色变量

Element 属性用作项目变量的接口，以在运行时动态控制颜色。

切换颜色

多变的 （BOOL) 用于颜色切换

. 赋值：

  • FALSE: 元素以指定的颜色显示 颜色 财产。

  • TRUE: 元素以指定的颜色显示 报警颜色 财产。

. 分配属性：

  • 输入配置的用户输入变量的占位符

    • <切换/点击变量>

    • <不切换/点击变量>

    颜色的变化不是由它自己的变量控制的，而是由一个用户输入的变量控制的。

    注意

    为鼠标事件指定一个变量 轻敲 要么 切换 在输入配置中。只有这样才能设置占位符。如果您在两者中都配置了一个变量 切换 和 轻敲, 然后是指定的变量 轻敲 用来。

    提示

    点击 _visu_icon_linked_variable.png 插入符号 <切换/点击变量> 占位符。

    然后当你激活 输入配置, 点击错误 财产 <不切换/点击变量> 显示占位符。

  • 项目变量的实例路径 (BOOL)

    例子： PLC_PRG.xColorIsToggeled

    注意

    在代码中，声明并实现此处指定的变量，其赋值决定颜色何时改变。

颜色

框架的颜色变量

  • 多变的 （DWORD) 颜色

    例子： PLC_PRG.dwColor

  • 颜色字面量

    灰色和不透明的示例： 16#FF888888

要求： 显示框架 属性被激活。

注意

正常状态是有效的，如果在 颜色变量→切换颜色 属性未定义或具有值 FALSE.

报警颜色

处于警报状态的框架的颜色变量

  • 多变的 （DWORD) 用于报警颜色

    例子： PLC_PRG.dwAlarmColor

  • 颜色字面量

    红色和不透明的示例： 16#FFFF0000

注意

如果 颜色变量→切换颜色 财产具有价值 TRUE.

提示

仅在以下情况下评估颜色值的透明度部分 可视化管理器激活半透明绘图 可视化管理器的选项被选中。

提示

在工具栏中 特性, 选择 先进的 选项。然后所有元素属性都是可见的。

看变量

属性包含用于动态控制元素外观的变量。

行宽

线宽（以像素为单位）的变量（整数数据类型）

注意

值 0 和 1 都产生一个像素的线宽。如果不应显示任何行，则 线条样式 属性必须设置为 无形的 选项。

线条样式

线型的变量 (DWORD)

. 编码：

  • 0： 实线

  • 1: 虚线

  • 2: 虚线

  • 3：线型“点划线”

  • 3：线型“Dash Dot Dot”

  • 8：不可见：不画线。

提示

固定值可以在 外貌 财产。这些值可以在运行时被动态变量覆盖。

切换变量

多变的

变量控制引用的可视化的切换：变量索引引用的框架可视化之一，这显示在框架中。当变量的值发生变化时，它会切换到最近索引的可视化。

  • 包含活动可视化索引的变量（整数数据类型）

    例子： PLC_PRG.uiIndexVisu

    提示

    这 帧配置 对话框包含引用的可视化列表。可视化会根据列表中的顺序自动进行数字索引。调整框架可视化的顺序以生成所需的索引。

    注意

    这种切换变体通常会影响所有连接的显示变体。

  • 用于索引访问的数组元素（整数数据类型） CURRENTCLIENTID

    例子： PLC_PRG.aIndexVisu[CURRENTCLIENTID]

    注意

    这种切换变体仅适用于当前客户端，因此仅适用于一个显示变体。这是触发值更改的显示变量（例如，通过用户输入）。

状态变量

变量动态控制元素行为。

无形的

多变的 （BOOL) 用于切换元素的可见性

TRUE：该元素在运行时不可见。

提示

这 无形的 “客户端动画”功能支持属性。

动画

提示

这些属性仅在您选择了 支持客户端动画和原生元素叠加 中的选项 可视化管理器.

动画时长

元素运行动画的持续时间（以毫秒为单位）的变量

  • 变量（整数值）

    例子： Menu.tContent 和 VAR tContent : INT := 500; END_VAR

  • 整数字面量

    例子： 500

. 动画属性

  • 绝对运动, 移动, X, 是

  • 绝对运动, 回转

  • 绝对运动, 内部旋转

  • 绝对运动, 外旋

当可动画属性的至少一个值发生变化时，将执行动画移动。然后执行的运动不是生涩的，而是在指定的动画持续时间内是平滑的。可视化元素在动态旋转的同时移动到指定位置。过渡很平滑。

移至前台

多变的 （BOOL) 用于在前景中设置元素

TRUE：在运行时，可视化元素显示在前台。

FALSE：在运行时，可视化元素显示在可视化编辑器中插入它的层中。

例子： bIsInForeground 和 VAR bIsInForeground : BOOL := FALSE; END_VAR

输入配置

属性包含使用鼠标或键盘时用户输入的配置。用户输入定义了一个事件和一个或多个在事件发生时执行的动作。

提示

这 配置 按钮打开 输入配置 对话。您可以在那里创建或编辑用户输入。

配置的用户输入列在事件下方。它们每个都包括触发的动作和简短形式的设置。

例子： 执行 ST 代码： _visu_icon_action.png PLC_PRG.i_x := 0;

OnDialogClosed

输入事件：用户关闭对话框。

鼠标点击

输入事件：用户在元素区域完全点击鼠标按钮。单击并释放鼠标按钮。

鼠标按下

输入事件：用户点击鼠标按钮。

OnMouseEnter

输入事件：用户将鼠标指针拖到元素上。

鼠标离开

输入事件：用户将鼠标指针拖离元素。

鼠标移动

输入事件：用户将鼠标指针移动到元素区域上。

OnMouseUp

. 输入事件：

  • 用户在元素区域内释放鼠标按钮。用户之前是否在元素区域内部或外部按下鼠标按钮是无关紧要的。

  • 用户在元素区域内按下鼠标按钮，离开元素区域，然后释放鼠标按钮。

注意

这 CODESYS- 特定的触发行为保证关键元素的动作完成。一个关键元素开始一个动作 鼠标按下 并结束动作 OnMouseUp.

示例：可视化用户在关键元素的元素区域内按下鼠标按钮，然后移动光标位置，使其位于元素区域之外。无论如何，该操作都结束了，因为 OnMouseUp 被触发。

OnValueChanged

由于值更改而触发后续操作的事件。

在对话框中指定触发哪些后续动作 输入配置 配置。

定义的后续操作和相关配置显示在元素属性下方。

事件 OnValueChanged 可以由编译器定义 VISU_NO_VALUECHANGED 在应用程序的属性对话框中停用。

轻敲

当鼠标点击事件发生时，定义在 多变的 在应用程序中进行了描述。编码取决于 点击错误 和 如果捕获，请点击输入 选项。

多变的

要求： 点击错误 选项未激活。

多变的 （BOOL) 用于鼠标点击事件

TRUE: 存在鼠标点击事件。只要用户在元素上按下鼠标按钮，它就会持续。它在按钮被释放时结束。

FALSE: 鼠标点击事件不存在。

例子： PLC_PRG.bIsTapped

点击错误

standard icon: 鼠标点击事件导致一个互补值 多变的.

TRUE: 鼠标点击事件不存在。

FALSE: 当鼠标点击事件存在时。

如果捕获，请点击输入

standard icon：在用户输入过程中，还考虑在按下鼠标按钮时是否在元素区域内拖动鼠标指针。

TRUE: 当鼠标点击事件存在并且鼠标指针移动到元素区域时。

FALSE: 鼠标点击事件不存在。或者用户在按下鼠标按钮时将鼠标指针移到元素区域之外。

值为 TRUE 一旦用户将指针移回元素区域，就会再次出现。然后捕获鼠标。

切换

随着鼠标点击事件的发生，变量被设置；当鼠标点击事件完成时，变量被重置。

多变的

多变的 （BOOL) 用于在鼠标单击事件结束时进行切换

这是当鼠标指针位于元素区域上时用户释放鼠标按钮。如果用户在鼠标指针位于元素区域之外时释放鼠标按钮，则鼠标单击事件不会结束，值不会切换。

提示

用户可以通过将鼠标指针拖出元素区域来取消已启动的切换输入。

如果捕获则打开

standard icon：无论释放鼠标按钮时鼠标指针在哪里，该值都会切换。然后捕获鼠标。

热键

用于触发特定输入操作的元素上的快捷方式

当热键事件发生时，在 活动 属性被触发。这样，导致这个输入动作的不是输入动作本身，而是鼠标输入动作。

钥匙

按键输入动作。

例子： 吨

选择键时会出现以下属性。

活动

  • 没有

  • 鼠标向下: 按键触发输入动作 鼠标按下 财产。

  • 鼠标向上：松开按键会触发在 OnMouseUp 财产。

  • 鼠标向下/向上：按下和释放键触发在配置的输入动作 鼠标按下 财产和 OnMouseUp 财产。

切换

standard icon：与“Shift”键组合

例子： 转移+吨.

控制

standard icon: 与“Ctrl”键组合

例子： Ctrl+吨.

Alt

standard icon：与“Alt”键组合

例子： Alt+吨.

提示

可视化中配置的所有键盘快捷键及其操作都列在 键盘配置 标签。

访问权

注意

仅当为可视化设置用户管理时可用。

访问权 按钮

打开 访问权 对话。您可以在此处编辑元素的访问权限。

. 状态消息：

  • 没有设置。完全权利。：所有用户组的访问权限： 可操作

  • 权利已设定：有限权利: 至少有一组限制访问。

本节内容如下:
参见: