Pages

Button Group Widget

Button Group widget’ı, kullanıcıların tanımlı bir buton grubu içerisinden yalnızca bir seçeneği seçmesine olanak tanıyan bir UI bileşenidir. Genellikle tema seçimi, mod seçimi, layout değişimi veya birbirini dışlayan diğer seçenekler için özel anahtarlar (switch) oluşturmak amacıyla kullanılır.

Widget, aktif durumu dahili olarak yönetir ve aşağıdaki şekillerde yapılandırılabilir:

• JSON yapılandırma dosyası üzerinden yerel olarak
• CODESYS üzerinden uzaktan

1. Genel Bakış

Button Group:

• Bir mantıksal grup içinde birden fazla buton görüntüler
• Aynı anda yalnızca bir butonun aktif (seçili) olmasına izin verir
• Seçili durumu dahili olarak takip eder
• Seçili değeri harici mantık için kullanılabilir hale getirir
• CODESYS üzerinden uzaktan durum güncellemelerini destekler

Tipik Kullanım Senaryoları

• Tema değişimi (Açık / Koyu / Sistem)
• Çalışma modu seçimi (Otomatik / Manuel / Servis)
• Layout seçimi
• Dil seçimi
• Cihaz kontrol modu seçimi

2. Fonksiyonel Davranış

2.1 Seçim Mantığı

• Aynı anda yalnızca bir buton aktif olabilir.
• Bir buton seçildiğinde:
  • Mevcut aktif buton devre dışı bırakılır
  • Seçilen buton aktif hale getirilir
  • Dahili durum güncellenir
  • Yapılandırılmış çıktı tetiklenir (JSON binding veya CODESYS değişken güncellemesi)

3. JSON ile Yapılandırma

Button Group bir JSON yapılandırma dosyası ile tanımlanabilir.

3.1 Temel Yapı

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

CODESYS Yapısı

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 } ] ```