Input：草稿、变量、模板参数与提交校验

准备与操作顺序

本教程要求已安装并授权插件，且能够在 Mingcedar 中打开导出的画面。第 1–3 节在同一页逐步修改；第 4、5 节各新建一页；第 6 节复制第 5 节页面。第 1–2 节无需 PLC，第 3 节起需准备可读写的数值 Tag。

左右滑动查看完整表格

1. 每次修改模板或行为后点击窗口中的 Save，并保存 PPT。
2. 完成每节配置后，通过 MX Design → Export → Export HTML 更新画面包，在 Mingcedar 中重新打开对应页面，再执行结果验证。第 6 节需同时导出入口页和目标页。

• 安装与授权
• 导出并发布画面包

1A · Plain Input：创建两个独立输入框

在 PowerPoint 新建空白幻灯片，放置两个 Input、两个显示文本框和一个按钮。后续步骤沿用本节的插入、命名和 Edit Instance 操作。

左右滑动查看完整表格

1. 打开 MX Design → Templates → Library，选择 Input 卡片并点击 Insert template；重复一次，得到两份 Input。
2. 打开 MX Design → Behaviors → Browse。在 Behavior Browser 组件树中分别右键两个 Input 根节点，选择 Rename Component，命名为 Speed A、Speed B；不要命名内部子形状。
3. 通过 PowerPoint“插入 → 文本框”创建两个文本框，各填一个短横线作为初始文字；用 Rename Component 分别命名 Preview A、Preview B。再通过“插入 → 形状”绘制矩形，输入“查看输入”。
4. 选中整个 Speed A 实例，点击 MX Design → Templates → Edit Instance，按下表配置并点击 Save；对 Speed B 重复此操作。

1B · 点击按钮显示输入内容

在 Behavior Browser 将 Click Script 拖到“查看输入”组件，双击行为，用下方代码替换编辑区并 Save。后续按钮沿用此步骤。导出后分别输入 1200、900，点击“查看输入”。

hqVisuDesigner.setComponentText("Preview A", template.getValue("Speed A"));
hqVisuDesigner.setComponentText("Preview B", template.getValue("Speed B"));

完成标志 Preview A 显示 1200，Preview B 显示 900。修改 Speed A 后再次点击，只有 Preview A 随之改变。

2A · Runtime Variable：绑定页面变量

继续使用 Speed A、Speed B。打开 MX Design → Scripts → Page Script，点击 New，在 Name 填 input-data，将下方代码粘贴到 Code；勾选 Enabled 并点击 Save。分别打开两个 Input 的 Edit Instance，按下表配置并保存。

左右滑动查看完整表格

• Variable 填变量名，不加引号。Input 自动识别提交类型：1200 是整数；输入包含双引号的 "1200" 则提交为字符串。

var speedDraftA = 0;
var speedDraftB = 0;

完成标志 重新导出后，两份 Input 初始显示 0。输入 1200 或 900，再按 Enter 或离开输入框，值写入对应页面变量。

2B · 显示页面变量

删除“查看输入”按钮。为 Preview A 绑定 Script Text，清空 Setup Script，Display Text 填下方表达式，Condition 填 true，保存。为 Preview B 重复操作，Display Text 改为 String(speedDraftB)。

String(speedDraftA)

完成标志 重新导出后，提交 Speed A 会更新 Preview A；Speed B 对应 Preview B。重新打开页面时，Page Script 将变量恢复为初始值 0。

3 · PLC Tag：绑定固定设备

删除两个 Preview 文本框。准备下表两个可读写、支持小数的 Tag，确认质量为 good，并使两点具有不同当前值。分别打开 Speed A、Speed B 的 Edit Instance，按下表配置并保存；第 2 节的 input-data 变量可保留，但本节不再使用。

左右滑动查看完整表格

完成标志 导出后，两份 Input 显示各自 Tag 当前值。只修改 Speed A 并按 Enter，在 Mingcedar 核对 PUMP01 的 Tag 读回值；PUMP02 应保持原值。

4 · 模板参数：复用 Input

本节继续使用第 3 节的两个 Tag，在新建页面制作可复用模板。

左右滑动查看完整表格

1. 新建空白页，从 Templates → Library 插入一份 Input。打开 Edit Instance，将 Input mode 设为 PLC Tag，PLC Tag 填 <PLC>.<PUMP>.SPEED_SETPOINT，Write trigger 设为 Immediate，点击 Save。
2. 选中整个 Input，打开 Templates → Library → Save selection。在 Template name 填 Pump setpoint input，Group 保持默认；确认 Captured variables 包含 PLC、PUMP，点击 Save。名称已存在时使用其他唯一名称。
3. 关闭模板库，删除页面上仍带占位符的原始 Input。重新打开 Library，选择保存的模板，点击 Insert template 两次。
4. 分别选中新实例根组，打开 Edit Instance，按下表填写模板参数，不加引号或尖括号，每份配置后点击 Save。保存 PPT 并重新导出。

完成标志 两份实例显示两台泵各自的值。只改实例二的 PUMP 不会改变实例一。

5A · 运行时目标：配置地址变量

新建页，按第 1A 节插入 Input，将根节点命名为 Speed input。在 Page Script 新建 input-data，粘贴下方代码，勾选 Enabled 并保存。按下表配置 Edit Instance。

左右滑动查看完整表格

• HQVISU_DECLARE_TAGS 声明该动态目标可能读写的两个 Tag；实际读写仍受宿主权限控制。

var selectedSetpointTag = "PLC_LINE01.PUMP01.SPEED_SETPOINT";
HQVISU_DECLARE_TAGS({
  expression: "selectedSetpointTag",
  read: ["PLC_LINE01.PUMP01.SPEED_SETPOINT", "PLC_LINE01.PUMP02.SPEED_SETPOINT"],
  write: ["PLC_LINE01.PUMP01.SPEED_SETPOINT", "PLC_LINE01.PUMP02.SPEED_SETPOINT"]
});

5B · 按钮切换目标设备

为“选择泵 2”按钮添加下方 Click Script 并保存。复制为“选择泵 1”按钮，将副本脚本中的 PUMP02 改为 PUMP01。

hqVisuDesigner.writeVariable("selectedSetpointTag", "PLC_LINE01.PUMP02.SPEED_SETPOINT");

完成标志 重新导出后，点击“选择泵 2”显示 PUMP02 当前值，点击“选择泵 1”显示 PUMP01 当前值。选择按钮本身不写入设备。

6A · 页面参数：创建设备入口

复制第 5 节页面。打开 MX Design → Page → Nav Path，将副本 Page Code 改为 pump_setpoint 并保存；保留 Speed input 和 input-data，删除两个选择按钮。另建入口页，绘制“打开 PUMP02”按钮，按第 1B 节添加下方 Click Script。复制为“打开 PUMP01”按钮，并将副本代码中的 PUMP02 改为 PUMP01。

return hqVisuDesigner.openPage("pump_setpoint", {
  parameters: [{ key: "pump", value: "PUMP02" }]
});

完成标志 两个入口按钮指向同一目标页，并分别传入 pump 参数。完成第 6B–6D 节后，再导出包含入口页和目标页的完整画面包。

6B · 校验页面参数

在 pump_setpoint 的 Page Script 中，用下方代码完整替换 input-data 并保存；不要另建重复变量。GetPageParameter 返回文本，缺失或未知值会停止本段初始化。

var pumpCode = GetPageParameter("pump", "");
if (pumpCode !== "PUMP01" && pumpCode !== "PUMP02") {
  throw new Error("请从设备入口打开，pump 只支持 PUMP01 或 PUMP02");
}
var selectedSetpointTag = "PLC_LINE01." + pumpCode + ".SPEED_SETPOINT";
HQVISU_DECLARE_TAGS({
  expression: "selectedSetpointTag",
  read: ["PLC_LINE01.PUMP01.SPEED_SETPOINT", "PLC_LINE01.PUMP02.SPEED_SETPOINT"],
  write: ["PLC_LINE01.PUMP01.SPEED_SETPOINT", "PLC_LINE01.PUMP02.SPEED_SETPOINT"]
});

完成标志 从 PUMP01、PUMP02 入口分别打开时，selectedSetpointTag 对应各自设备；传 PUMP99 或不传 pump 时不建立有效目标。

6C · External：关闭输入框自动提交

在 pump_setpoint 选中 Speed input，打开 Edit Instance，将 Write trigger 改为 External；Input mode 保持 PLC Tag，PLC Tag 保持 =selectedSetpointTag，点击 Save。添加“提交”矩形按钮；再添加显示“等待输入”的文本框，通过 Rename Component 将其命名为 Input message。

左右滑动查看完整表格

完成标志 完成本节后，输入框显示设备当前值。编辑内容再按 Enter 或离开输入框时，不自动写入；提交由下一节按钮执行。

6D · 校验数值并提交

给“提交”按钮配置下方 Click Script 并保存。示例允许 0–3000 的十进制数，项目须改为设备允许范围。用 Export HTML 整包导出，在 Mingcedar 从入口页选择设备。

var raw = String(template.getValue("Speed input")).trim();
var value = Number(raw);
if (!/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/.test(raw) ||
    !Number.isFinite(value) || value < 0 || value > 3000) {
  hqVisuDesigner.setComponentText("Input message", "请输入 0–3000 的有效数字");
  return false;
}
hqVisuDesigner.setComponentText("Input message", "校验通过，请核对设备写入结果");
return WriteTagDouble(selectedSetpointTag, value);

完成标志 输入 1200.5 后点击“提交”，会向选定设备发起一次写入。空白、字母、-1、3001 仅显示提示，不写入；实际生效值以 Tag 读回为准。

结果验证

可按 Esc 放弃尚未提交的输入。界面提示“校验通过”仅表示数值符合脚本规则，写入结果仍需核对。

1. 分别从 PUMP01、PUMP02 入口打开，核对 Input 显示值及提交后的 Tag 读回目标。
2. 输入 1200.5，离开输入框后确认设备值未变；点击“提交”，再确认设备读回值。
3. 依次输入空白、abc、-1、3001 并提交，确认显示提示且无写入；将入口参数临时改为 PUMP99，确认目标页不建立有效绑定，验证后恢复。
4. 关闭并重新打开目标页，确认输入框再次显示设备当前值。