Pages

Görsel & Akıllı Görsel (Smart Image)

Genel Bakış

Image ve Smart Image bileşenleri, kullanıcı arayüzünü görsel olarak zenginleştirmek için kullanılır — sabit veya duruma bağlı görsellerle.

Kullanım örnekleri:

  • İkonlar ve semboller
  • Logolar veya arka planlar
  • Durum bazlı görsel göstergeler (ör. makine durumu)

1. Görsel (Sabit)

Açıklama

Image bileşeni sabit bir resmi gösterir — örneğin bir logo veya arka plan.
Sistem durumu veya değişkenlere tepki vermez — her zaman aynı resmi gösterir.

Temel Özellikler

  • Image URL – Gösterilecek resmin bağlantısı
  • Pozisyon / Boyut – % cinsinden konum ve boyut ayarı
  • Değişken veya mantıksal bağlantı içermez

2. Akıllı Görsel (Smart Image)

Açıklama

Smart Image, değişkenin değerine bağlı olarak farklı resimler göstermenizi sağlar.

Koşullar JavaScript mantığı ile tanımlanır (ör. value == 1)
Her koşula uygun bir görsel atanır. Şart sağlandığında o resim gösterilir.

Birden fazla koşul tanımlanabilir – ilk eşleşen çalıştırılır.

Temel Özellikler

  • Connection String – Bir değişken veya veri kaynağına bağlantı
  • Conditions – Koşul ekleyerek farklı durumlar oluşturma
  • Script – Bağlı değeri kontrol eden JavaScript koşulu
  • Image URL – Koşul sağlandığında gösterilecek görsel

Örnek: Makine Durumu

Diyelim ki bağlantı machineStatus isimli değişkenle yapılmış.

Durum Değeri Anlamı Görsel
0 Durduruldu red_icon.svg
1 Çalışıyor green_icon.svg
2 Hata yellow_warning.svg

Aşağıdaki şekilde üç koşul tanımlanabilir:


// Koşul 1
value == 0
// Resim: red_icon.svg

// Koşul 2
value == 1
// Resim: green_icon.svg

// Koşul 3
value == 2
// Resim: yellow_warning.svg
// Koşul 1 value == 0 // Resim: red_icon.svg // Koşul 2 value == 1 // Resim: green_icon.svg // Koşul 3 value == 2 // Resim: yellow_warning.svg
2
1
0
machineStatus
value == 1