Element Editor

Element Editor, animasyon tasarımcısında seçtiğiniz SVG nesnesine davranış bağladığınız yerdir. Her bağlama bir animation element kaydıdır: hangi nesne, ne yapacak, değeri nereden alacak.

Ekranı sıfırdan kurma süreci Animation sayfasındadır; burada editörün kendisi anlatılır.

Nesne seçme

Tasarımcıda SVG üzerindeki bir nesneye tıklayarak seçim yaparsınız. SVG’ler genellikle nesneleri <g> grupları içinde tutar ve düz tıklamada en üstteki grup seçilir.

Grubun içindeki bir nesneyi hedeflemek için Ctrl tuşunu basılı tutarak tıklayın — o zaman grup değil, doğrudan tıkladığınız text, rect, circle gibi iç nesne seçilir. Bu, bir ekipman sembolünün içindeki değer metnini bağlamanın olağan yoludur.

Inspector paneli

Bir nesne seçtiğinizde sağdaki Inspector paneli o nesneyi gösterir.

Panelde şunlar vardır:

Bölüm	Ne işe yarar
Dom Id	Seçilen nesnenin kimliği ve yanında SVG etiketi (rect, text, g…)
Select same	Aynı Type, Fill veya Animation değerine sahip nesnelerin hepsini birden seçer
Select type	Eklenecek bağlamanın tipini seçtiğiniz liste; yanındaki + bağlamayı ekler
Bağlama listesi	Nesneye bağlı mevcut bağlamalar. Kalem simgesi formu açar, çöp kutusu bağlamayı siler

Yanındaki etiket rozeti (yukarıdaki görüntüde g) yalnızca bilgi değildir: tip listesinin neye göre süzüldüğünü söyler.

Aynı işi çok sayıda nesneye bağlamak

Bir ekranda onlarca benzer nesne varsa — örneğin hepsi aynı renk kuralıyla sürülecek vanalar — tek tek seçmek yerine birini seçip Select same → Fill ile hepsini seçebilir, bağlamayı bir kez ekleyebilirsiniz.

Alanlar

Alan	Açıklama
DOM ID	Seçilen nesnenin SVG kimliği — otomatik gelir
Type	Nesnenin ne yapacağı
Expression Type	Değerin nereden geleceği
Expression	Değerin kendisi — değişken adı, ifade veya yapılandırma
Props	Tipe özel görsel ayarlar (renk, sınırlar, yön, hız…)
Status	Aktif / pasif. Pasif elemanlar değerlendirme döngüsüne girmez

Tip listesi neden değişiyor

Editör, seçtiğiniz nesnenin SVG etiketine göre tip listesini süzer; her tip her nesnede anlamlı olmadığı için.

Yukarıdaki listede Click (added) soluk görünüyor: o tip bu nesneye zaten bağlanmış. Aynı nesneye aynı tipten ikinci bir bağlama eklenemez.

Her nesnede kullanılabilen on dört temel tip şunlardır:

Color · Rotate · Move · Opacity · Scale · Blink · Bar · Pipe · Tooltip · Alarm Indication · Click · Mouse Up · Mouse Down · Mouse Over

Nesne türüne göre eklenenler:

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

Toplam yirmi dört tip vardır ve tamamının listesi Animation sayfasındadır.

circle, path, polygon ek tip almaz

Yukarıdaki tabloda adı geçmeyen etiketler yalnızca on dört temel tipi alır. Bir daireye grafik veya tablo bağlayamazsınız; bunlar için rect gerekir. Aradığınız tip listede yoksa sebebi genellikle budur — yanlış nesne seçilmiştir.

Expression tipleri

Expression tipi, değerin nereden geldiğini belirler ve animation tipinden bağımsızdır: aynı Color bağlaması değerini doğrudan bir etiketten de alabilir, bir ifadeden de.

Tip	Değer nereden gelir
TAG	Doğrudan bir değişken
EXPRESSION	Yazdığınız 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_COLOR	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

Örnekler

TAG — değişken adını yazmanız yeterli:

temp_value

EXPRESSION — biçimlendirme:

var val = ins.getVariableValue("temp_value");
return val.value.toFixed(1) + " °C";

EXPRESSION — koşullu renk:

var temp = ins.getVariableValue("temp_value").value;
if (temp > 80) return "#FF0000";
if (temp > 60) return "#FF8800";
return "#00CC00";

SWITCH — değerden sonuca eşleme:

0 → Stopped
1 → Running
2 → Fault
3 → Maintenance

Props ve çalışma zamanında props

Görsel ayarlar normalde eleman kaydındaki Props alanında durur: bir Bar için min/max ve dolgu rengi, bir Pipe için çizgi kalınlığı, akış hızı ve yön gibi.

Bar ve Pipe elemanlarında bunu çalışma zamanına da bırakabilirsiniz. EXPRESSION tipi bir obje döndürürse, kayıtlı props yerine o objedeki alanlar kullanılır ve durum value alanından okunur:

var running = ins.getVariableValue('motor_lamp') == 1;
return {
  value: running,
  fillColor: running ? '#04B3FF' : '#999999',
  speed: 2000,
  strokeArray: 10
};

Böylece bir borunun hem akıp akmadığını hem rengini ve hızını tek ifadeden sürebilirsiniz.

Diğer tiplerde obje props’u ezmez

Bar ve Pipe dışındaki tiplerde ifadenin döndürdüğü obje yalnızca value alanı için açılır; renk, sınır, yön gibi ayarlar eleman kaydındaki props alanından okunur. TAG tipinde veya ifade düz bir sayı/boolean döndürdüğünde de props kaydından gelir.

Etkileşim tipleri

Click, Mouse Up, Mouse Down ve Mouse Over bir değer göstermez — nesneye bir olay işleyicisi bağlar. Bu yüzden periyodik değerlendirme döngüsüne girmezler; yalnızca kullanıcı etkileşiminde çalışırlar.

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 o kullanıcı için kendiliğinden salt-izleme olur.

Değer yazmak yetki ister

Etkileşim elemanları sunucu tarafında değişkene yazabilir. Bunun için kullanıcının değer yazma yetkisi bulunmalıdır; yetki yoksa işlem reddedilir. Bkz. Roller ve Yetkiler.

Bağlamalar çalışma zamanında nasıl işler

Ekran açıkken tarayıcı, animasyonun Duration aralığında sunucuya bir değerlendirme isteği gönderir. Sunucu o ekrandaki sunucu taraflı elemanların ifadelerini tek istekte çalıştırır ve her eleman için sonucu döndürür; tarayıcı da sonucu eleman tipine uygun DOM işlemine çevirir — metin yazar, dolgu rengini değiştirir, dönüşüm uygular, çizgi akışını sürer.

Bu tasarımın pratik sonuçları:

• Elemanlar tek istekte toplu değerlendirilir; eleman sayısı istek sayısını artırmaz.
• Yalnızca Status alanı aktif olan elemanlar değerlendirilir.
• Bir tur Duration’ın on katı içinde dönmezse tarayıcı turu yeniden başlatır.

Bu döngüye girmeyen tipler

Yedi tip sunucunun toplu değerlendirmesine hiç katılmaz:

Tip	Neden döngü dışında
Click · Mouse Up · Mouse Down · Mouse Over	Bir değer göstermezler; yalnızca kullanıcı etkileşiminde çalışırlar
Chart · Datatable · Slider	Kendi yalıtılmış çerçevelerinde render edilir ve verilerini kendileri çeker

İkinci gruptaki tiplerin yenilenme periyodu ekranın Duration değerinden değil, kendi yapılandırmalarından gelir. Ayrıntı: Chart ve Datatable.

İlgili

• Animation — ekranı kurma ve tam tip listesi
• Faceplate — parametreli ekran parçaları