> For the complete documentation index, see [llms.txt](https://docs.augelab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.augelab.com/turkish/temel-ozellikler/create-plugins-with-designer-window/components.md).

# Components

Bileşenler, kullanıcıların parametreleri yapılandırmasına veya özelleştirilmiş widget'ınızdan sonuçları görmesine olanak tanıyan etkileşimli widget'lardır.

{% hint style="info" %}
Bileşenler, anahtar kelime argümanları ile oluşturulmuştur.
{% endhint %}

#### Genel Argümanlar <a href="#generic-arguments" id="generic-arguments"></a>

Genel argümanlar, tüm özel bileşenler için geçerlidir. Bunları yapıcıya anahtar kelime argümanları olarak sağlayabilirsiniz.

`tooltip: str = ''`

### Metin Girişi <a href="#text-inputx20" id="text-inputx20"></a>

Kullanıcıların tek bir satır üzerinden metin/sayı girmesine olanak tanır.

<figure><img src="/files/7Id4eCQyiknWTNdHIY68" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Yapıcı:**</mark>

`TextInput`

<mark style="color:blue;">**Anahtar Kelime Argümanları:**</mark>

`text: str = '5'` : Metin Girişi'nin varsayılan değeri

`place_holder: str = ''` : Metin Girişi boş olduğunda gösterilecek metin.

<mark style="color:blue;">**Öznitelikler-Yöntemler**</mark>

`text -> str` : Metin Girişi'nde yazılı olan mevcut metni alır.

<mark style="color:blue;">**Örnek:**</mark>

```python
class Example_Block(Block):
    ...
    def init(self):
        ...
        self.param['text1'] = TextInput(text= '5', 
                                        place_holder='Bir sayı girin', 
                                        tooltip='Sabit tanımlar')
    
    def run(self):
        ...
        raw_constant: str = self.param['text1'].text
        constant: int = int(raw_constant)  # tamsayıya dönüştürme
        ... 
```

### Açılır Liste <a href="#drop-down-list" id="drop-down-list"></a>

Açılır listeler, kullanıcıların sağlanan metin listesinden bir seçenek seçmesine olanak tanır.

<figure><img src="/files/dCwl1KMC1pHoquVDq1rT" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">Yapıcı:</mark>

`DropDown`

<mark style="color:blue;">**Anahtar Kelime Argümanları:**</mark>

`items: list[str, ...] = ['item1', 'item2', 'item3']`: Açılır listede gösterilecek metinler listesi.

<mark style="color:blue;">Öznitelikler-Yöntemler:</mark>

`selected_item -> str`: Seçilen öğe metnini döndürür. Metin yoksa `''` döner.

`selected_index -> int`: Seçilen öğeyi tam sayı olarak döndürür. Öğe yoksa `0` döner.

<mark style="color:blue;">Örnek:</mark>

```python
class Example_Block(Block):
    ...
    def init(self):
        ...
        self.param['drop_down'] = DropDown(items=['Yöntem 1', 'Yöntem 2', 'Yöntem 3'], 
                                        tooltip='Yöntem Seç')
    
    def run(self):
        ...
        raw_constant: int = self.param['drop_down'].selected_index()
        if raw_constant == 0:
            ... 
```

### Etiket <a href="#label" id="label"></a>

Etiketler, özel bloğunuzda statik veya dinamik metin göstermek için basit metin tabanlı bileşenlerdir.

<figure><img src="/files/BifhOn3E2iYjYDQRoFhR" alt=""><figcaption></figcaption></figure>

Ayrıca etkileşimli bileşenler hakkında bilgi vermek için kullanılır:

<figure><img src="/files/QT55eKKyqSNKWQwmOUSz" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">Yapıcı:</mark>

`Label`

<mark style="color:blue;">**Anahtar Kelime Argümanları:**</mark>

`text: str = ''`: Açılır listede gösterilecek metinler.

<mark style="color:blue;">Öznitelikler-Yöntemler:</mark>

`set_text(text: str)`: Etiketin metnini ayarlayın.

<mark style="color:blue;">Örnek:</mark>

```python
class Example_Block(Block):
    ...
    def init(self):
        ...
        self.param['label'] = Label(text='Sonuç: Belirlenmedi', 
                                        tooltip='Ortalama değeri gösterir')
    
    def run(self):
        ...
        self.param['label'].set_text(f'Sonuç: {n}')
        ... 
```

### Kaydırıcı <a href="#slider" id="slider"></a>

Kullanıcı girişini bir sayı aralığı ile sınırlar.

<figure><img src="/files/srvxBiJwZfkUqRKLu982" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">Yapıcı:</mark>

Slider

<mark style="color:blue;">**Anahtar Kelime Argümanları:**</mark>

`min: int = -5`: Kaydırıcıda gösterilecek minimum değer.

`max: int = 5`: Maksimum değer.

`val: int = 3`: Başlangıç değeri.

<mark style="color:blue;">Öznitelikler-Yöntemler:</mark>

`value -> int`: Kaydırıcının mevcut değeri.

<mark style="color:blue;">Örnek:</mark>

```python
class Example_Block(Block):
    ...
    def init(self):
        ...
        self.param['slider'] = Slider(min=-5, max=5, val=3)
    
    def run(self):
        ...
        threshold: int = self.param['slider'].value
        ... 
```

### Etiketli Kaydırıcı <a href="#slider-labeled" id="slider-labeled"></a>

[Kaydırıcı](#slider) ile aynı, ancak bileşende hangi değerin gösterildiğini otomatik olarak gösteren bir etiket ekler.

<figure><img src="/files/OKIomB9c6AHIJy4plZnh" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">Yapıcı:</mark>

SliderLabeled

<mark style="color:blue;">**Anahtar Kelime Argümanları:**</mark>

`min: int = -5`: Kaydırıcıda gösterilecek minimum değer.

`max: int = 5`: Maksimum değer.

`val: int = 3`: Başlangıç değeri.

`label: str ="Değer"`: Gösterilecek etiket metni.

`multiplier: float | int = 1`: Gösterilen değeri eklemeden önce çarpar. Bunu `add` ile kullanarak, isterseniz tek sayıları göstermenize olanak tanır.

`add: float | int = 0`: Çarptıktan sonraki eklenen değer.

<mark style="color:blue;">Öznitelikler-Yöntemler:</mark>

`value -> int`: Kaydırıcının mevcut ham değeri.

`modifiedValue -> int | float`: Kaydırıcının mevcut değiştirilmiş değeri.

<mark style="color:blue;">Örnek:</mark>

```python
class Example_Block(Block):
    ...
    def init(self):
        ...
        self.param['threshold_odd'] = SliderLabeled(min= -5, max= 5, val= 3, label="Değer", multiplier = 2, add = -1)
    
    def run(self):
        ...
        threshold_odd: int = self.param['threshold_odd'].modifiedValue
        ... 
```

### Onay Kutusu <a href="#checkboxx20" id="checkboxx20"></a>

Mantıksal durum girişi sağlar.

<figure><img src="/files/NI7x2sWrIY3hSrasnVzt" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">Yapıcı:</mark>

`CheckBox`

<mark style="color:blue;">**Anahtar Kelime Argümanları:**</mark>

`text: str = ''`: Onay kutusunun yanında gösterilecek metin.

<mark style="color:blue;">Öznitelikler-Yöntemler:</mark>

`is_checked -> str`: Etiketin metnini ayarlayın.

<mark style="color:blue;">Örnek:</mark>

```python
class Example_Block(Block):
    ...
    def init(self):
        ...
        self.param['gray_mode'] = CheckBox(text='Gri Mod')
    
    def run(self):
        ...
        flag_gray: bool = self.param['gray_mode'].is_checked
        ... 
```

### Düğme <a href="#button" id="button"></a>

Fare tıklaması ile script'inizde bir olayı tetikler. Bu bileşen, senaryonuzdaki özel bloklar için kaynak yönetimi açısından da oldukça faydalıdır.

<figure><img src="/files/yBAQ67JmZ684igdlhgHR" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">Yapıcı:</mark>

`Button`

<mark style="color:blue;">**Anahtar Kelime Argümanları:**</mark>

`text: str = ''`: Onay kutusunun yanında gösterilecek metin.

<mark style="color:blue;">Öznitelikler-Yöntemler:</mark>

`set_clicked_callback(callback: Callable)`: Düğmeye her tıklandığında tetiklenecek geri çağırma fonksiyonunu ayarlayın.

{% hint style="info" %}
`set_clicked_callback` kullanımı, özel blok script'inizin `init` bölümünde her zaman yapılır.
{% endhint %}

<mark style="color:blue;">Örnek:</mark>

```python
...
class Example_Block(Block):
    ...
    file_path: str = ''
    def init(self):
        ...
        self.param['Dosya Seç'] = Button(text= 'Dosya Seç')
        self.param['Dosya Seç'].set_clicked_callback(load_image)
    
    def load_image(self):
        path = QAFileDialog.getOpenFileName(caption='Görüntü Yükle', 
                                        directory='C:/Images', 
                                        filter='Görüntü Dosyaları (*.png *.jpg *.bmp)')
        self.file_path = self.register_resource('image-path', path)
        
    def run(self):
        image_path = self.get_resource('image-path')
    
```

Yukarıdaki örnek, geri çağırmaları [`register_resource`](#block.register/_resource-name-str-path-str-greater-than-str) ve [`get_resource`](#block.get/_resource-name-str-greater-than-str) kullanarak kullanmaktadır.

### Görüntü <a href="#imagex20" id="imagex20"></a>

<figure><img src="/files/NALO3VKpgIwGOGzr4f0T" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">Yapıcı:</mark>

`Image`

<mark style="color:blue;">**Anahtar Kelime Argümanları:**</mark>

`fixed_width: int = 80`: Görüntünün yüksekliği, `Block.width` ile kullanılmak üzere en iyisidir.

`fixed_height: int = 80`: Görüntünün genişliği, `Block.height` ile kullanılmak üzere en iyisidir.

<mark style="color:blue;">Öznitelikler-Yöntemler:</mark>

`update(img: npt.NDArray[np.uint8])`: Üç veya bir boyutla gösterilen görüntüyü güncelleyin.

<mark style="color:blue;">Örnek:</mark>

```python
class Example_Block(Block):
    ...
    def init(self):
        ...
        self.param['Sonuç'] = Image(fixed_width=self.width-40,  
					     fixed_height=self.height-80)

    def run(self):
        ...
        self.param['Sonuç'].update(np.zeros((60, 60, 3)))
        ...
```

### Tablo <a href="#table" id="table"></a>

Birden fazla öğe/mod seçilmesine olanak tanır.

<figure><img src="/files/FJgsngPZ1ulAuVdeJ6Ea" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">Yapıcı:</mark>

`Table`

<mark style="color:blue;">**Anahtar Kelime Argümanları:**</mark>

`items: list[str, ...] = ['item1', 'item2', 'item3']`: Tablo listesindeki gösterilecek metinlerin listesi.

<mark style="color:blue;">Öznitelikler-Yöntemler:</mark>

`items -> list[str, ...]`: Tüm öğelerin listesini alın.

`selected_items -> list[str, ...]`: Seçilen öğelerin listesini alın.

`set_items(items: list[str, ...])`: Öğeler listesini ayarlayın.

<mark style="color:blue;">Örnek:</mark>

```python
class Example_Block(Block):
    ...
    def init(self):
        ...
        self.param['Tespit Listesi'] = Table(items=['İnsan', 'Kedi', 'Köpek'])

    def run(self):
        ...
        detection_list: list[str, ...] = self.param['Tespit Listesi'].selected_items()
        ...
```