SVG Animations

SVG Animation, inSCADA’nın temel görselleştirme bileşenidir. Her animation bir SVG dosyasından oluşur ve değişken değerlerine bağlanarak gerçek zamanlı SCADA ekranları oluşturur.

Ekran Geliştirme Süreci

Bir SCADA ekranı oluşturmak üç adımdan oluşur:

1. SVG Tasarımı (Harici Editör)

SVG ekranı, herhangi bir SVG editörü ile tasarlanır. Inkscape (ücretsiz, açık kaynak) önerilen editördür.

Tasarım sırasında:

• Ekranın görsel düzenini serbest bir şekilde oluşturun — cihaz sembolleri, metin alanları, butonlar, göstergeler, grafikler
• SVG ID’leri ile ilgilenmenize gerek yok — inSCADA tüm SVG ağacını otomatik tarar ve her objeyi seçilebilir hale getirir
• Standart SVG öğeleri kullanın: <rect>, <circle>, <text>, <path>, <g>, <image>
• İstediğiniz kadar karmaşık tasarım yapabilirsiniz — katmanlar, gruplar, gradyanlar, filtreler

Document Properties (Sayfa Ayarları)

Inkscape’te File → Document Properties (Dosya → Belge Özellikleri) bölümünde sayfa boyutunu ayarlayın:

Ayar	Önerilen Değer	Açıklama
Genişlik	1920 px	Full HD ekran genişliği
Yükseklik	1080 px	Full HD ekran yüksekliği
Birim	px	Piksel birimi
Ölçek	1.0	1:1 ölçek
Yönlendirme	Yatay (Landscape)	SCADA ekranları genellikle yatay

Arka Plan Rengi

Inkscape’te ayarlanan arka plan rengi inSCADA’ya aktarılmaz. Arka plan rengi, inSCADA’da animation’ın yapılandırma panelindeki Color alanından ayarlanır. Tasarım sırasında Inkscape arka planını yalnızca görsel referans olarak kullanın.

2. SVG Yükleme (Animation Dev)

Tasarlanan SVG dosyasını platforma yükleyin:

Menü: Development → Animations → Animation Dev

Yeni animation oluşturun veya mevcut bir animation’ın SVG içeriğini güncelleyin. SVG dosyası upload edildikten sonra ekranda görselleşir.

3. Animation Binding (Element Editor)

SVG yüklendikten sonra, ekran üzerinde mouse ile objelere tıklayarak her objeye animation davranışı bağlarsınız:

1. SVG üzerinde bir objeye mouse ile tıklayın — obje seçilir ve vurgulanır
2. Sağ üstteki Element Editor (sihirli değnek ikonu) butonuna tıklayın
3. Seçilen objenin tipine göre uygulanabilir animation tipleri otomatik listelenir
4. İstediğiniz animation tipini seçip yapılandırın
5. Save ile kaydedin

Bu üç adım sonucunda, Visualization ekranında çalıştırdığınızda SVG ekranı canlı SCADA verisiyle güncellenir.

Detaylı bilgi: Element Editor →

Preview (Ön İzleme)

Roket ikonuna tıklayarak animation’ı canlı olarak önizleyebilirsiniz:

Animation Yapılandırma

Kalem ikonuna tıklayarak animation’ın ayarlarını düzenleyebilirsiniz — Duration, Play Order, Main, Color, Alignment, erişim rolleri ve Pre/Post scripts:

Detaylı bilgi: Animation Yapılandırma →

Animation Yapısı

Her animation üç bileşenden oluşur:

Animation
├── SVG Content (upload edilen SVG dosyası)
├── Animation Elements (mouse ile seçilen objelere bağlanan davranışlar)
│   ├── Element 1: sıcaklık metni → Temperature_C (Get)
│   ├── Element 2: motor göstergesi → MotorStatus (Color)
│   └── Element 3: vana grubu → ValvePosition (Rotate)
└── Animation Scripts (her döngüde çalışan kodlar)
    ├── Pre-Animation Code
    └── Post-Animation Code

Animation Elements

Animation Element, SVG üzerinde mouse ile seçilen bir objeye bağlanan davranış tanımıdır. Objeye tıklayıp Element Editor’ü açtığınızda aşağıdaki alanlar otomatik doldurulur veya yapılandırılır:

Alan	Açıklama
DOM ID	Seçilen SVG objesinin ID’si (otomatik alınır — elle girmenize gerek yok)
Type	Animation tipi — obje tipine göre uygun tipler otomatik listelenir
Expression Type	Değerin nasıl hesaplanacağı (Tag, Expression, Switch vb.)
Expression	Değer ifadesi (değişken adı, formül veya yapılandırma)
Props	Tipe özel ek ayarlar (her tip kendi görsel formunu sunar)
Status	Aktif/pasif

Animation Tipleri

inSCADA 36 farklı animation tipi destekler:

Veri Gösterimi

Tip	Açıklama	Sayfa
Get	Değişken değerini metin olarak göster	Detay →
Color	Öğenin rengini değere göre değiştir	Detay →
Bar	Değere göre çubuk yüksekliği/genişliği	Detay →
Opacity	Değere göre saydamlık	Detay →
Visibility	Koşula göre göster/gizle	Detay →
Rotate	Değere göre döndürme	Detay →
Move	Değere göre X/Y kaydırma	Detay →
Scale	Değere göre ölçekleme	Detay →
Blink	Koşula göre yanıp sönme	Detay →
Pipe	Boru/hat akış animasyonu	Detay →
Tooltip	Hover bilgi balonu	Detay →
Image	Değere göre resim değiştirme	Detay →
AlarmIndication	Alarm durumunu göster	Detay →

Grafik & Veri Tablosu

Tip	Açıklama	Sayfa
Chart	Grafik bileşeni	Detay →
Peity	Inline sparkline mini grafik	Detay →
Datatable	Tablo bileşeni	Detay →

Kontrol & Etkileşim

Tip	Açıklama	Sayfa
Set	Değişkene değer yaz (click ile)	Detay →
Slider	Kaydırıcı ile değer ayarla	Detay →
Input	Metin/sayı girişi	Detay →
Button	Buton bileşeni	Detay →
Click	Tıklama olayı	Detay →
MouseDown / MouseUp / MouseOver	Fare olayları	Detay →

Navigasyon & Gömme

Tip	Açıklama	Sayfa
Open	Başka bir animation’a geç	Detay →
Iframe	Harici URL gömme	Detay →
Menu	Menü açma	Detay →
Faceplate	Faceplate bileşeni yerleştir	Detay →

Script & Gelişmiş

Tip	Açıklama	Sayfa
Script	Özel JavaScript çalıştır	Detay →
FormScript	Form tabanlı script	Detay →
GetSymbol	Symbol kütüphanesinden sembol yükle	Detay →
Animate	CSS/SVG animasyon tetikle	Detay →
Access	Yetki bazlı görünürlük	Detay →
Three	3D görselleştirme	Detay →
QRCodeGeneration	QR kod oluşturma	Detay →
QRCodeScan	QR kod okuma	Detay →

Expression Tipleri

Her animation element’te değerin nasıl hesaplanacağını belirler:

Tip	Açıklama
Tag	Doğrudan değişken adı referansı
Expression	JavaScript formülü
Numeric	Sabit sayısal değer
Text	Sabit metin değeri
Switch	Değere göre koşullu seçim
Collection	Birden fazla değişken koleksiyonu
Set	Değer yazma ifadesi
Animation	Başka bir animation referansı
Url	URL referansı
Alarm	Alarm durumu referansı
Faceplate	Faceplate referansı
Animation Popup	Popup animation açma
Button	Buton yapılandırması
InSCADA View	Platform görünüm referansı
System Page	Sistem sayfası referansı
Html	HTML içerik
Custom Menu	Custom menu referansı
Tetra Color	Dört renkli durum gösterimi (alarm renkleri)

Animation Scripts ve Tarama Döngüsü

Her animation’a Pre ve Post script bağlanabilir. Tüm kodlar her tarama döngüsünde tekrar çalışır:

Her döngüde:  Pre-Animation → Elements → Post-Animation → bekleme (duration ms) → tekrar

İlk açılışta bir kez çalışması gereken kod için __firstScan değişkeni kullanılır:

if (__firstScan) {
    // Sadece ilk döngüde çalışır
    var logs = ins.getLoggedVariableValuesByPage(
        ['ActivePower_kW'],
        ins.getDate(ins.now().getTime() - 3600000),
        ins.now(), 0, 100
    );
}

// Her döngüde çalışır
var power = ins.getVariableValue("ActivePower_kW").value;
return power.toFixed(1);

Detaylı bilgi: Animation Yapılandırma → Pre/Post Scripts