# 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()
        ...
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.augelab.com/turkish/one-cikan-ozellikler/create-plugins-with-designer-window/components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.