Pages

Button Group Widget

Das Button Group-Widget ist ein UI-Element, das es Benutzern ermöglicht, genau eine Option aus einer definierten Gruppe von Buttons auszuwählen. Es wird typischerweise verwendet, um benutzerdefinierte Umschalter wie Theme-Auswahl, Modusauswahl, Layout-Umschaltung oder andere sich gegenseitig ausschließende Optionen zu erstellen.

Das Widget verwaltet und speichert den aktuell aktiven Zustand und kann entweder konfiguriert werden über:

  • Lokal über eine JSON-Konfigurationsdatei
  • Remote über CODESYS

1. Übersicht

Die Button Group:

  • Zeigt mehrere Buttons innerhalb einer logischen Gruppe an
  • Erlaubt immer nur einen aktiven (ausgewählten) Button
  • Verfolgt den ausgewählten Zustand intern
  • Stellt den ausgewählten Wert für externe Logik bereit
  • Unterstützt Remote-Statusupdates über CODESYS

Typische Anwendungsfälle

  • Theme-Umschaltung (Hell / Dunkel / System)
  • Auswahl des Betriebsmodus (Auto / Manuell / Service)
  • Layout-Auswahl
  • Sprachauswahl
  • Auswahl eines Gerätesteuerungsmodus

2. Funktionales Verhalten

2.1 Auswahl-Logik

  • Es kann immer nur ein Button gleichzeitig aktiv sein.
  • Beim Auswählen eines Buttons:
    • Wird der aktuell aktive Button deaktiviert
    • Wird der ausgewählte Button aktiviert
    • Wird der interne Zustand aktualisiert
    • Wird die konfigurierte Ausgabe ausgelöst (JSON-Bindung oder CODESYS-Variablenupdate)

3. Konfiguration über JSON

Die Button Group kann über eine JSON-Konfigurationsdatei definiert werden.

3.1 Grundstruktur

id

Unique Identifier, um Buttons zu unterscheiden.

label

Ein String, den der Nutzer angeben muss, um ein benutzerdefiniertes Label für den Button anzuzeigen.

disabled

Ein Boolean, welcher je nach Wert den Button im 'disabled' Zustand anzeigt. Im disabled Zustand wird der Button angezeigt, kann aber nicht benutzt werden.

visible

Boolean, der festlegt ob ein Button in der Gruppe angezeigt wird.

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

CODESYS Structure

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
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
[ { "id": 0, "label": "Option 1", "disabled": false, "visible": true }, { "id": 1, "label": "Option 2", "disabled": false, "visible": true } ]
# 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 } ] ```