Animation Yapılandırma

Bu sayfada bir animation’ın yapılandırma paneli, toolbar araçları ve script ayarları açıklanmaktadır.

Yapılandırma Paneli

Animation Dev ekranında kalem ikonuna tıklayarak yapılandırma panelini açabilirsiniz:

Temel Ayarlar

Alan	Zorunlu	Açıklama
Name	Evet	Ekran adı (proje içinde benzersiz)
Description	Hayır	Açıklama
Duration	Evet	Tarama sonrası bekleme süresi (ms, min: 100). Detay aşağıda
Play Order	Evet	Visualization ekranındaki sıralama numarası
Main	Evet	Visualization menüsünde görünsün mü
Color	Hayır	Ekranın arka plan rengi. Varsayılan: #00DDDC
Alignment	Hayır	SVG’nin ekrana hizalama modu
Join	Hayır	Arka katman olarak bağlanacak animation (tepegöz asetat mantığı)

Duration (Bekleme Süresi)

Duration, iki tarama arasındaki bekleme süresidir — tarama periyodu değil:

Toplam Döngü = Tarama Süresi + Duration (bekleme)

1. Sunucu tüm element expression’larını çalıştırır → tarama süresi
2. Tarama tamamlandıktan sonra duration ms kadar beklenir
3. Yeni tarama başlar

Çok Küçük Duration

Duration çok küçük ayarlandığında, element sayısı fazla veya expression’lar ağır ise tarayıcıda arayüz donması oluşabilir.

Senaryo	Önerilen Duration
Az element (< 20), basit expression	200 - 500 ms
Orta element (20-50), karışık expression	500 - 1000 ms
Çok element (50+), ağır hesaplama	1000 - 2000 ms

Main ve Play Order

Runtime → Visualization menüsü, projedeki Main işaretli animation’ları listeler. Alt kısımda sayfa geçiş butonları Play Order sırasına göre soldan sağa dizilir.

Visualization Ekranı
┌──────────────────────────────────────────────────┐
│                                                  │
│          [ Aktif Animation İçeriği ]             │
│                                                  │
├──────────────────────────────────────────────────┤
│  ⚡ Energy Overview  │  📈 Power Chart  │  ...   │  ← Play Order sırası
└──────────────────────────────────────────────────┘

• Main = true → Visualization menüsünde görünür
• Main = false → Yalnızca Development’ta erişilebilir (Open ile açılan alt ekranlar, popup’lar için)
• Play Order = 1 → En solda, 2 → sonraki, …

Color (Arka Plan Rengi)

Animation’ın arka plan rengi bu alandan ayarlanır.

Not

Inkscape’te ayarlanan arka plan rengi inSCADA’ya aktarılmaz. Arka plan rengi yalnızca bu alandan belirlenir.

Alignment (Hizalama)

SVG içeriğinin ekrandaki konumunu belirler:

Değer	Konum
top-left	Sol üst
top-mid	Üst orta
top-right	Sağ üst
mid-left	Orta sol
mid-mid	Tam orta (varsayılan)
mid-right	Orta sağ
bottom-left	Sol alt
bottom-mid	Alt orta
bottom-right	Sağ alt
none	Hizalama yok

Join (Katman Birleştirme)

Join, tepegöz asetat mantığında çalışır — bir animation’ı başka bir animation’ın arka planına sabit katman olarak bağlar. Join ile bağlanan animation, ana animation’ın arkasında her zaman görünür kalır.

Bu sayede her sayfada tekrar eden ortak öğeleri (üst bar, alt bar, alarm banner, navigasyon menüsü, logo, saat, durum göstergeleri) tek bir animation’da tasarlayıp tüm sayfalara katman olarak bağlayabilirsiniz.

┌──────────────────────────────────────────┐
│  ▸ Üst Bar: Logo, Saat, Alarm Sayacı    │  ← Join Animation (arka katman)
├──────────────────────────────────────────┤
│                                          │
│     [ Ana Animation İçeriği ]            │  ← Ana Animation (ön katman)
│     Sayfa bazlı değişen içerik           │
│                                          │
├──────────────────────────────────────────┤
│  ▸ Alt Bar: Navigasyon Butonları         │  ← Join Animation (arka katman)
└──────────────────────────────────────────┘

Kullanım Senaryosu

1. “Common_Layout” animation’ı oluşturun (Main = false):

   • Üst kısım: Şirket logosu, tarih/saat, aktif alarm sayacı
   • Alt kısım: Sayfa geçiş butonları, bağlantı durumu göstergesi
   • Bu animation tek başına Visualization’da görünmez

2. Her sayfa animation’ında Join alanından “Common_Layout” seçin:

   • “Energy Overview” → Join: Common_Layout
   • “Motor Detail” → Join: Common_Layout
   • “Alarm Panel” → Join: Common_Layout

3. Sonuç: Tüm sayfalar açıldığında Common_Layout arka katmanda sabit kalır, sayfa içeriği önde değişir. Ortak öğeleri tek bir yerde güncellemeniz yeterlidir.

Join ve Alignment Birlikte Kullanımı

Join animation’ın Alignment ayarı, arka katmanın ekrandaki konumunu belirler. Ana animation’ın Alignment ayarı ise ön katmanın konumunu belirler. İkisi birlikte ekran düzenini oluşturur.

İpucu

Join animation’ı genellikle Main = false olarak ayarlanır — Visualization’da bağımsız sayfa olarak listelenmez, yalnızca diğer animation’ların arka katmanı olarak çalışır.

---

Erişim Rolleri (Access Roles)

Yapılandırma panelinin alt kısmında Access Roles bölümü bulunur. Bu bölümde platformda tanımlı tüm roller checkbox olarak listelenir.

Seçilen roller, bu animation’a runtime’da kimlerin erişebileceğini belirler:

• Yalnızca işaretli rollere sahip kullanıcılar bu animation’ı Visualization’da görebilir
• Hiçbir rol seçilmezse veya tümü seçilirse tüm kullanıcılar erişebilir
• Bu sayede aynı projede farklı kullanıcı gruplarına farklı ekranlar gösterilebilir

Örnek:

• “Genel Bakış” ekranı → tüm roller erişebilir
• “Kontrol Paneli” ekranı → yalnızca “Engineer” ve “Administrator” rolleri
• “Yönetim Raporu” ekranı → yalnızca “Administrator” rolü

---

Pre/Post Animation Scripts

Animation’a iki tür script bağlanabilir:

Pre-Animation Code

Her tarama döngüsünde, element expression’larından önce çalışır. İki şekilde tanımlanabilir:

1. Satır İçi Kod (Custom Code)

Doğrudan JavaScript kodu yazılır:

if (__firstScan) {
    // İlk açılışta tarihsel veri yükle
    var end = ins.now();
    var start = ins.getDate(end.getTime() - 3600000);
    var logs = ins.getLoggedVariableValuesByPage(
        ['ActivePower_kW'], start, end, 0, 100
    );
}

2. Script Seçimi (Fonksiyon Kütüphanesi)

Projede tanımlı script’lerden seçim yapılır. Seçilen script’lerin içeriği animation’a eklenir ve script içinde tanımlı fonksiyonlar artık animation element expression’larından çağrılabilir hale gelir.

Bu mekanizma, script’leri bir fonksiyon kütüphanesi olarak kullanmayı sağlar:

// Script: "ChartHelpers" (Schedule Type: None)
// Bu script bağımsız çalışmaz, animation'a kütüphane olarak eklenir

function buildChartData(varName, hours) {
    var end = ins.now();
    var start = ins.getDate(end.getTime() - hours * 3600000);
    var logs = ins.getLoggedVariableValuesByPage(
        [varName], start, end, 0, 100
    );
    var labels = [];
    var values = [];
    for (var i = logs.length - 1; i >= 0; i--) {
        labels.push(logs[i].dttm);
        values.push(logs[i].value);
    }
    return { labels: labels, values: values };
}

function formatValue(val, decimals, unit) {
    return val.toFixed(decimals) + " " + unit;
}

Bu script animation’a bağlandığında, herhangi bir element expression’ında şu şekilde çağrılabilir:

// Element expression içinde — kütüphane fonksiyonunu çağır
var data = buildChartData("ActivePower_kW", 1);
return data;

// Başka bir element expression'ında
var power = ins.getVariableValue("ActivePower_kW").value;
return formatValue(power, 1, "kW");

Önemli Kurallar

Durum	Davranış
Script’te fonksiyon tanımlı ama çağrılmamış	Fonksiyon çalışmaz, sadece tanım olarak animation’a eklenir. Element expression’larından çağrılmayı bekler
Script’te fonksiyon tanımlı ve çağrılmış	Fonksiyon her tarama döngüsünde otomatik çalışır (arka plan görevi)
Script’in Schedule Type’ı	None olarak ayarlayın — aksi halde script hem animation döngüsünde hem de kendi zamanlamasıyla (Periodic/Daily) bağımsız olarak arka planda çalışır ki bu gereksiz bir kaynak tüketimidir

Kütüphane Yaklaşımı

Sık kullanılan yardımcı fonksiyonları (veri formatlama, grafik hazırlama, hesaplama) ayrı bir script’te toplayıp birden fazla animation’a bağlayabilirsiniz. Fonksiyonu bir kez yazarsınız, tüm animation’larda kullanırsınız.

Post-Animation Code

Her tarama döngüsünde, element expression’larından sonra çalışır. Aynı şekilde satır içi kod veya script seçimi ile tanımlanır.

Çalışma Sırası

Her döngüde:
1. Pre-Animation Code
2. Animation Elements (tüm binding'ler)
3. Post-Animation Code
    ↓ duration ms bekleme
    ↑ tekrar başa dön

Yerleşik Değişkenler

Script’ler ve element expression’ları içinde kullanılabilen yerleşik değişkenler:

Değişken	Tip	Açıklama
__firstScan	Boolean	İlk döngüde true, sonrasında false
__animName	String	Çalışan animation’ın adı
__parameters	String	Placeholder parametreleri

---

Toolbar Araçları

Animation Dev ekranının sağ üst köşesindeki toolbar ikonları:

İkon	Araç	Açıklama
+ (artı)	Yeni Animation	Yeni animation oluştur
✏️ (kalem)	Yapılandırma	Animation ayarlarını düzenle (bu sayfa)
− (eksi)	Sil	Animation’ı sil
✨ (sihirli değnek)	Element Editor	SVG objesine animation binding yap
🚀 (roket)	Preview	Animation’ı canlı önizle
⬆ (upload)	SVG Yükle	SVG dosyası upload et
⬇ (download)	SVG İndir	Mevcut SVG’yi indir
+ (daire)	Placeholder	Animation parametrelerini yönet

Üç Nokta Menüsü (⋮)

Araç	Açıklama
Clone	Animation’ı kopyala
Show Scripts	Bağlı script’leri göster
Generate Link	Paylaşılabilir bağlantı oluştur
Backup	Animation’ı dışa aktar
Restore	Animation’ı içe aktar

---

Placeholder (Parametrik Ekran)

Toolbar’daki Placeholder butonu ile animation’a parametreler tanımlanabilir. Bu parametreler sayesinde aynı SVG tasarımı farklı değerlerle tekrar kullanılabilir.

Kullanım: Bir “Motor Detay” ekranı tasarlayın, {motor_id} ve {motor_name} placeholder’ları tanımlayın. Open animation tipi ile farklı parametrelerle açıldığında her seferinde farklı motoru gösterir.

Placeholder değerleri script içinde __parameters değişkeni ile okunabilir.