Pages

Button Group Widget

Button Group 组件是一个 UI 控件，允许用户在一组已定义的按钮中仅选择一个选项。它通常用于创建自定义切换控件，例如主题切换、模式选择、布局切换或其他互斥选项。

该组件会维护并暴露当前激活状态，并可通过以下方式进行配置：

• 通过 JSON 配置文件进行本地配置
• 通过 CODESYS 进行远程控制

1. 概述

Button Group 组件：

• 在一个逻辑分组中显示多个按钮
• 同一时间只允许一个按钮处于激活（选中）状态
• 在内部跟踪当前选中状态
• 对外提供当前选中的值用于业务逻辑处理
• 支持通过 CODESYS 进行远程状态更新

典型使用场景

• 主题切换（浅色 / 深色 / 系统）
• 运行模式选择（自动 / 手动 / 维护）
• 布局选择
• 语言选择
• 设备控制模式选择

2. 功能行为

2.1 选择逻辑

• 任意时刻只能有一个按钮处于激活状态。
• 当用户选择一个按钮时：
  • 当前激活的按钮被取消激活
  • 新选择的按钮被设为激活
  • 内部状态被更新
  • 触发已配置的输出（JSON 绑定或 CODESYS 变量更新）

3. 通过 JSON 配置

Button Group 可以通过 JSON 配置文件进行定义。

3.1 基本结构

[
  {
    "id": 0,
    "label": "选项 1",
    "disabled": false,
    "visible": true
  },
  {
    "id": 1,
    "label": "选项 2",
    "disabled": false,
    "visible": true
  }
]

CODESYS 结构

FOR i:=0 TO 20 BY 1 DO
  buttonGroup.options[i].id := TO_BYTE(i);
  buttonGroup.options[i].label := CONCAT('label_', INT_TO_STRING(i));
END_FOR

# Button Group Widget The **Button Group** widget is a UI control that allows users to select **exactly one option** from a defined group of buttons. It is typically used to create custom switches such as theme selection, mode selection, layout toggles, or other mutually exclusive options. The widget maintains and exposes the currently active state and can be configured either: - Locally via a **JSON configuration file** - Remotely via **CODESYS** --- ## 1. Overview The Button Group: - Displays multiple buttons in a single logical group - Allows only one active (selected) button at a time - Tracks the selected state internally - Exposes the selected value for external logic - Supports remote state updates via CODESYS ### Typical Use Cases - Theme switch (Light / Dark / System) - Operating mode selection (Auto / Manual / Service) - Layout selection - Language selection - Device control mode selection --- ## 2. Functional Behavior ### 2.1 Selection Logic - Only **one button can be active** at any time. - Selecting a button: - Deactivates the currently active button - Activates the selected button - Updates the internal state - Triggers configured output (JSON binding or CODESYS variable update) --- ## 3. Configuration via JSON The Button Group can be defined using a JSON configuration file. ### 3.1 Basic Structure ```json [ { "id": 0, "label": "Option 1", "disabled": false, "visible": true }, { "id": 1, "label": "Option 2", "disabled": false, "visible": true } ] ```