Animation

Bir animasyon, bir SVG dosyası ile o SVG’deki nesnelere bağlanmış davranışlardan oluşur. Bu sayfa ekranın sıfırdan nasıl kurulduğunu anlatır.

1. Ekranı oluşturma

Alan	Zorunlu	Açıklama
Name	Evet	Ekran adı — proje içinde benzersiz
Description	Hayır	Açıklama
Join Animation	Hayır	Bu ekranın birleşeceği başka bir animasyon
Background	Hayır	Arka plan rengi; Follow shell theme ile arayüz temasına bırakılabilir
Duration	Evet	Güncelleme periyodu (ms)
Play Order	Evet	Birden fazla ekran varsa sıralama
Play at Main?	Hayır	Ana ekran olarak açılsın mı
Page Icon	Hayır	Çalışma zamanı sayfa listesinde adın yanında görünecek ikon
Alignment	Evet	Ekranın pencere içinde nasıl hizalanacağı
Start from	Evet	Boş tuval, hazır şablon veya SVG yükleme
Resolution	—	Tuval boyutu; tipik SCADA ekranı 1920×1080

Nereden başlanır

Start from üç seçenek sunar ve ekranı nasıl kuracağınızı belirler:

Seçenek	Ne yapar
Blank canvas	Boş bir tuvalle başlar; çizimi platformun kendi tasarımcısında yaparsınız
Template	Hazır bir şablondan başlar
Upload SVG	Dışarıda hazırlanmış bir SVG dosyasını yükler

Platformun kendi tasarımcısı seçim ve kaydırma araçları, ızgaraya yapışma (snap) ve klavye kısayolları sunar — basit ekranlar için harici bir editöre ihtiyaç duymazsınız.

Karmaşık şemalar, ölçekli yerleşimler veya kurumsal bir çizim kütüphanesi söz konusuysa SVG’yi harici bir editörde (örneğin Inkscape) hazırlayıp Upload SVG ile getirmek pratiktir. Bu durumda SVG id değerleriyle uğraşmanız gerekmez — platform ağacı tarar ve her nesneyi seçilebilir hale getirir; yine de anlamlı id vermek sonradan işinizi kolaylaştırır.

Harici editörün arka planı taşınmaz

Bir SVG’yi dışarıda hazırlayıp yüklediğinizde, editörde ayarladığınız arka plan rengi gelmez. Arka plan Background alanından ayarlanır; editördekini yalnızca tasarım sırasında görsel referans sayın.

2. Nesnelere davranış bağlama

Ekrandaki bir nesneye tıklayıp Element Editor’ü açarsınız; nesnenin ne yapacağını orada seçersiniz. Her bağlama bir animation element’tir.

Alan	Açıklama
DOM ID	Seçilen SVG nesnesinin kimliği — otomatik alınır
Type	Nesnenin ne yapacağı (aşağıdaki tablo)
Expression Type	Değerin nasıl hesaplanacağı
Expression	Değerin kendisi — değişken adı, formül veya yapılandırma
Props	Tipe özel ek ayarlar
Status	Aktif / pasif

Element Editor’ün ayrıntısı: Element Editor →

Animation tipleri

Tip, nesnenin ne yaptığını belirler.

Tip	Ne yapar	Ayrıntı
Get	Değeri metin olarak yazar	→
GetSymbol	Değere göre sembol gösterir	—
Color	Nesnenin rengini değiştirir	→
Bar	Değere göre çubuk doldurur	→
Scale	Nesneyi ölçekler	→
Opacity	Saydamlığı değiştirir	→
Blink	Koşulda yanıp söndürür	→
Rotate	Nesneyi döndürür	→
Move	Nesneyi kaydırır	→
Pipe	Boru/hat akış animasyonu	→
Tooltip	Üzerine gelince bilgi balonu	→
Image	Değere göre resim değiştirir	→
AlarmIndication	Alarm durumunu gösterir	→
Animate	Script ile sürülen animasyon	→
Chart	Grafik bileşeni	→
Datatable	Tablo bileşeni	→
Slider	Kaydırıcı ile değer yazar	→
Click	Tıklama olayı	→
MouseDown / MouseUp / MouseOver	Fare olayları	→
Iframe	Dış sayfa gömer	→
Faceplate	Faceplate açar	→
QRCodeGeneration	QR kod üretir	—

Etkileşim tipleri değer taşımaz

Click, MouseDown, MouseUp ve MouseOver bir değer göstermez — bir olay işleyicisi bağlar. Bu ayrım erişim denetiminde de geçerlidir: bir etkileşim tipine erişimi olmayan kullanıcıda işleyici hiç bağlanmaz, yani ekran kendiliğinden salt-izleme olur.

Liste neden nesneye göre değişiyor

Tip listesi seçtiğiniz SVG nesnesinin türüne göre süzülür — her tip her nesnede anlamlı olmadığı için. Bir daireye “metin yaz” diyemezsiniz, bir gruba çubuk doldurulamaz.

Her nesnede kullanılabilen ortak tipler:

Color · Rotate · Move · Opacity · Scale · Blink · Bar · Pipe · Tooltip · AlarmIndication · Click · MouseUp · MouseDown · MouseOver

Nesne türüne göre eklenenler:

SVG nesnesi	Ek olarak sunulanlar
text, tspan	Get
rect	Chart, Datatable, Iframe, Image, Slider, GetSymbol, Faceplate, QRCodeGeneration
g (grup)	Animate, Iframe, Faceplate — buna karşılık Bar listeden çıkar
image	Iframe

Aradığınız tip listede yoksa sebebi genellikle budur: yanlış nesne seçilmiştir. Bir gösterge grafiğini bağlamak için bir rect, değer yazdırmak için bir text seçmeniz gerekir.

Expression tipleri

Expression tipi, değerin nereden geldiğini belirler. Tipten bağımsızdır: aynı Color bağlaması değerini doğrudan bir etiketten de alabilir, bir formülden de.

Tip	Değer nereden gelir
TAG	Doğrudan bir değişken
EXPRESSION	Yazılan bir ifade
NUMERIC	Sabit sayı
TEXT	Sabit metin
SWITCH	Değere göre eşleme tablosu
SET	Değişkene yazma (etkileşim tiplerinde)
TETRA	Dört durumlu renk eşlemesi
ANIMATION	Başka bir animasyon
FACEPLATE	Bir faceplate
SUBVIEW	Alt görünüm
CUSTOM HTML	Bir Custom HTML sayfası
ALARM	Alarm durumu
ROLE	Kullanıcının rolü — role göre gösterim
HARD LOCK	Donanımsal kilit durumu

Animation script’leri

Ekrana iki script bağlanabilir ve ikisi de her değerlendirme turunda çalışır — ekran açılıp kapanırken bir kez değil:

Her turda:
  1. Pre kodu
  2. Eleman ifadeleri (tüm bağlamalar)
  3. Post kodu
       ↓ Duration kadar bekle
       ↑ başa dön

Yani Pre, elemanların okuyacağı bir şeyi hazırlamak; Post ise elemanlar hesaplandıktan sonra toparlamak içindir.

Yerleşik değişkenler

Pre/Post kodunda ve eleman ifadelerinde hazır gelen bağlar:

Değişken	Tip	Açıklama
__firstScan	Boolean	İlk turda true, sonrasında false
__animName	String	Çalışan animasyonun adı. Bir join şablonu değerlendiriliyorsa birleşilen animasyonun adı
__parameters	Nesne	Ekranın placeholder parametreleri — JSON’dan ayrıştırılmış olarak gelir
lang	String	Aktif dil

__parameters bir nesnedir; alanlarına doğrudan erişirsiniz (__parameters.motorId). Üzerinde ayrıca JSON.parse çağırmayın, hata verir.

__firstScan, yalnız bir kez yapılması gereken işi ayırmanın yoludur — tarihçeyi çekmek gibi. Her turda çalıştığı için bu olmadan aynı sorgu saniyede bir tekrarlanır:

// Pre: geçmiş veriyi yalnızca ilk turda çek
if (__firstScan) {
  var endMs = ins.now().getTime();
  var logs = ins.getLoggedVariableValuesByPage(
      ['ActivePower_kW'],
      ins.getDate(endMs - 3600000), ins.getDate(endMs), 0, 30
  );
}

Kıyaslama için, aynı işin korumasız hâli:

// Pre: son bir saatin verisini al
var endMs = ins.now().getTime();
var logs = ins.getLoggedVariableValuesByPage(
    ['ActivePower_kW'],
    ins.getDate(endMs - 3600000), ins.getDate(endMs), 0, 30
);

Gerçek zamanlı güncelleme

Yukarıdaki ekran, bu sayfadaki adımlarla kurulmuş bir örnektir: iki Get bağlaması değerleri metin olarak yazıyor, bir Color bağlaması motor lambasını sürüyor, bir Bar bağlaması tank seviyesini dolduruyor.

Ekran açıkken tarayıcı, Duration alanında belirtilen aralıkta sunucuya bir değerlendirme isteği gönderir; sunucu ekrandaki tüm elemanların ifadelerini tek seferde çalıştırıp sonuçları döndürür ve bağlamalar kendiliğinden güncellenir. Sayfa yenilemeye gerek yoktur.

Bir tur beklenen sürede dönmezse — Duration’ın on katı — tarayıcı turu yeniden başlatır, yani geçici bir kopma ekranı kalıcı olarak dondurmaz.

Duration’ı gereğinden küçük seçmeyin

Yenileme döngüsü üründeki en yoğun istek kaynağıdır: Duration ne kadar küçükse ekran o kadar çok istek üretir. Bu yüzden değerlendirme isteğinin kendi istek bütçesi vardır ve kullanıcı oturumunun bütçesini tüketmez. Yine de ekranı gerçekten gerektirdiği hızda yenilemek doğru olanıdır; saniyenin altındaki periyotlara yalnızca ihtiyaç varsa inin.

Parametreli ekranlar

Aynı tasarım, farklı ekipmanlar için tekrar kullanılabilir. Bir “motor detay” ekranı bir kez hazırlanır ve her motor için aynı ekran farklı değişken setiyle açılır.

Bunu sağlayan şey animasyonun placeholder tanımlarıdır: ekran, değişken adlarını sabit yazmak yerine parametre üzerinden alır ve bu parametreler script tarafında __parameters ile okunur. Ekran parçası düzeyinde aynı işi Faceplate görür.

Erişim ve önizleme

Animasyonun kendisinde bir rol listesi yoktur. Erişim iki ayrı yerde yönetilir:

Düzey	Nasıl
Ekrana erişim	Ekran bir özel menüden açılır; menünün hangi rollere görüneceği rol-menü yetkilendirmesinden belirlenir
Ekran içindeki nesneye erişim	Her bağlama bir erişim grubuna bağlanabilir. Gruba dahil olmayan kullanıcıda o eleman gösterilmez

Eleman düzeyindeki bağlama, Element Editor formunun ACCESS bölümünden yapılır. Varsayılan olarak bir bağlama hiçbir gruba bağlı değildir ve herkese görünür.

Tasarımcının önizlemesinde bir View as seçici vardır: ekranı kendi görüşünüz (“Me”) yerine bir rolün ya da bir erişim grubunun göreceği gibi gösterir. Hangi nesnelerin gizleneceğini kaydetmeden görmenin pratik yoludur.

View as yalnızca görünürlüğü benzetir

Seçici yalnızca hangi nesnelerin görünüp gizleneceğini canlandırır. Canlı değerler ve tıklama eylemleri önizlemede hâlâ sizin yetkinizle gelir; başka bir rolün verisi veya etkileşimi burada hiçbir zaman açığa çıkmaz.

Pratik sonucu şudur: “View as Operator” ile ekranı doğru gördüğünüzde, o rolün gerçekten hangi değerleri okuyabileceğini ve hangi komutu verebileceğini doğrulamış olmazsınız. Bunu sınamanın tek yolu o role sahip bir kullanıcıyla oturum açmaktır.

İlgili

• Element Editor — bağlama formu ve tip listesi
• Faceplate