Pages

页面

按钮：状态按钮（State Button）

描述

状态按钮（State Button） 是一种动态 UI 控件，能够根据预定义的条件动态改变其标签（label）、图像（image）和行为（execute）。

与静态按钮不同，它可以根据系统中的变量实时做出反应。
你可以使用 JavaScript 逻辑定义多个视觉和功能状态。

主要功能

基于状态的行为

  • 使用 JavaScript 定义多个条件
  • 动态更改以下属性：
    • 标签文本（label）
    • 图像（image）
    • 执行逻辑（execute）

动态执行

  • 每个状态可触发不同的操作
  • 示例逻辑：
    “如果系统正在运行 → 停止，否则 → 启动”

外观自定义

  • 根据状态显示不同的图标、文字或颜色
  • 帮助用户更好理解当前按钮功能

无缝集成

  • 可通过 [code_block_0] 绑定到任何变量
  • 适用于实时监控与控制系统（如 HMI 或 SCADA）

使用场景示例

场景 行为示例
状态切换按钮 根据 [code_block_1] 显示“Start”或“Stop”
错误处理按钮 如果 [code_block_2]，显示“Reset”按钮
状态指示按钮 功能启用/禁用时切换图标或外观

最小 JavaScript 示例

假设按钮连接到变量 [code_block_1]，以下代码定义了两个状态：

[code_block_4]