控件：自定义仪表盘（Custom Gauge）

Custom Gauge（自定义仪表盘） 控件是一种灵活且具有视觉吸引力的方式，用于以仪表盘形式显示数值，例如传感器读数或系统指标。该控件允许用户上传自定义 SVG 图形，以实现完全个性化的外观，同时可以通过配置角度和刻度来控制量程。

总览：自定义仪表盘的工作原理

每个仪表盘由三个核心参数决定其外观和行为：

数值范围（Min / Max） – 显示在刻度上的最小值和最大值。
旋转角度范围（Start Angle / End Angle） – 指针可旋转的角度范围。
指针初始位置（Initial Arrow Position） – 加载 SVG 时，尚未接收实时数据前指针所指的位置。

在默认设置中，你可以选择使用系统提供或自定义的 SVG，但你必须为每一个仪表盘单独配置这些数值 —— 因为没有通用默认值。每个 SVG 文件的刻度范围、布局和中心点都可能不同。

所有数值请仅输入数字本身，不要附加符号或单位。
正确示例：-30
错误示例：-30Â°
适用于：Start Angle、End Angle、Initial Arrow Position、Min、Max 等字段

配置步骤详解

1. 最小值 / 最大值（Min / Max）*

用于定义仪表盘上显示的数据范围（例如：0–400 或 0–3000）。

注意：这是数值范围，而不是角度。
可以通过观察 SVG 图像中刻度的最小和最大数字来确定。

示例 1：

如果仪表盘刻度范围为 0 到 400：

Min = 0
Max = 400

示例 2：

另一个仪表盘范围为 0 到 3000：

Min = 0
Max = 3000

重要提示： 这些数值必须与 SVG 文件中刻度显示的实际数字一致。

2. 起始角度 / 结束角度（Start Angle / End Angle）

定义指针可旋转的角度范围，相对于指针的旋转中心。

Start Angle（起始角度）：指针从哪个角度开始。
End Angle（结束角度）：指针到达的终点角度。
指针将在这两个角度之间旋转。

示例（见下图）：

Start Angle = -120Â°
End Angle = 120Â°
这表示指针可旋转的范围为 240°，中心位置为 0Â°。

另一个示例（见下图），此时指针的起始数值为 375：

Start Angle = -30Â°
End Angle = 210Â°

3. 指针初始位置数值（Initial Arrow Position Value）*

定义当加载 SVG 图像但尚未接收到实时数据时，指针默认指向的数值。

此数值应与指针在图像中的初始位置所指的刻度一致。
必须位于 Min 和 Max 定义的范围内。

示例（见上图）：
如果仪表盘范围是 0â3000，而指针初始指向 375，则：

Initial Arrow Position Value = 375

这有助于在没有数据输入时保持视觉一致性。

为什么每个仪表盘都不同？

每个 SVG 文件可能具有不同的数值范围（例如 0–400 或 0–3000）、不同的角度范围（例如 180° 或 240°）、以及不同的旋转中心点。

因此，在“自定义仪表盘属性”中，每一个仪表盘都必须单独配置。

远程配置选项（CODESYS）

某些场景下，你可能希望从 PLC 程序中远程动态控制仪表盘参数。

适用于以下情况：

你希望从 PLC 动态更改角度或数值范围。
你需要统一控制多个仪表盘的行为。

可以在仪表盘属性中启用 Remote Control（远程控制）。启用后，参数（如 min、max、角度等）可以绑定到 PLC 变量。

示例：配置代码

PROGRAM PLC_PRG
VAR
            CustomGauge1                                             : plcvisu.CustomGauge;
END_VAR

            CustomGauge1.value                                                       := REAL_TO_STRING(55);
            CustomGauge1.parameters.pMin                                     := -50;
            CustomGauge1.parameters.pMax                                    := 50;
            CustomGauge1.parameters.startAngle                             := -120;
            CustomGauge1.parameters.endAngle                              := 120;
            CustomGauge1.parameters.initialArrowPositionValue        := 0;
            CustomGauge1.ticks[0]                                                     := '-50';
            CustomGauge1.ticks[2]                                                     := '0';
            CustomGauge1.ticks[1]                                                     := '50';
            CustomGauge1.unit                                                          := 'unit';

上传你自己的 SVG 文件（进阶）

当你熟悉了默认的仪表盘配置后，可以上传自己的 SVG 图像。

下面的表格展示了你需要在 SVG 编辑器中设置的 必要元素 ID（SVG ID），以确保组件功能正常。

SVG ID 参考表

编号	元素	SVG ID
1	指针 / 箭头 / 指示器	`arrow`
2	旋转中心点	`rotationPoint`
3	当前值显示	`value_tspan`
4	单位文本	`label_unit_tspan`
5	主刻度线（可多个）	`tick_major_1_value`
6	根容器类	`custom_control_root`

设置说明

自定义仪表盘非常灵活，但前提是配置必须准确。

指针的旋转中心是决定其行为的关键。startAngle 和 endAngle 的定义必须相对于该旋转点。

提示： 在定义角度范围时，请始终考虑指针的旋转中心，以确保仪表盘渲染准确。

在此页面上: