SVG ŞEKİL MAKİNESİ Hakkında

SVG_MACHINE (SVG ŞEKİL MAKİNESİ), SVG tabanlı vektörel şekillerin SCADA ekranlarında görüntülenmesini ve bağlı proses verisine göre dinamik olarak değiştirilmesini sağlayan gelişmiş bir kullanıcı kontrolüdür. Kontrol, yalnızca sabit bir SVG resmi göstermekle sınırlı değildir; bağlı verinin aldığı değerlere göre şeklin görsel özellikleri farklı durumlara dönüştürülebilir.


SVG_MACHINE'i klasik bir resim görüntüleyiciden ayıran temel nokta, görüntünün bağlı SCADA verisinin durumuna göre yapılandırılabilmesidir. Kaynak koddaki SVG_STATE_COLLECTION sınıfı, her veri düzeyi için ayrı bir SVG durumunun tanımlanabildiğini ve bu durum içerisinde görüntünün farklı özelliklerinin birlikte yapılandırılabildiğini göstermektedir.

Her bir SVG Durum Koleksiyonu, veri belirli bir eşiğe ulaştığında uygulanacak görsel davranışı tanımlayabilir. Bu yapı içerisinde SVG görüntüsünün rengi, kontur rengi, dolgu rengi, kullanılacak şekil, görünürlük ve yanıp sönme gibi özellikler veri durumuna göre değiştirilebilir. Böylece aynı kullanıcı kontrolü, prosesin anlık durumunu yalnızca sayısal bir değerle değil, doğrudan grafiksel bir durum değişimiyle operatöre aktarabilir.

SVG Durum Koleksiyonu ile Dinamik Gösterim

SVG_STATE_COLLECTION, SVG_MACHINE'in veri ile görsel gösterim arasındaki bağlantısını oluşturan temel yapılardan biridir. Kullanıcı, bağlı SCADA verisinin farklı değer aralıkları için farklı SVG durumları tanımlayabilir.

  • LevelThreshold ile durumun hangi veri eşiğinde devreye gireceği belirlenebilir.
  • LevelImageColor ile SVG görüntüsünün rengi değiştirilebilir.
  • LevelStrokeColor ile SVG şeklinin kontur rengi değiştirilebilir.
  • LevelFillColor ile SVG şeklinin dolgu rengi değiştirilebilir.
  • ImageFileName ile dışarıdan sağlanan bir SVG görüntüsü kullanılabilir.
  • LibrarySelectedImage ile SVG kütüphanesinden seçilen bir şekil kullanılabilir.
  • Visible ile ilgili SVG durumunun görüntülenmesi kontrol edilebilir.
  • BlinkActive ile ilgili veri durumunda yanıp sönme davranışı etkinleştirilebilir.

Bu yapı sayesinde SVG_MACHINE; vana, pompa, motor, fan, tank, kesici, şalter, jeneratör, proses ekipmanı ve benzeri endüstriyel nesnelerin ekranda durum bilgisi taşıyan grafiksel semboller olarak kullanılmasına olanak sağlar. Örneğin aynı pompa sembolü normal durumda farklı bir renkte gösterilebilir, belirli bir veri eşiğinde başka bir SVG şekline dönüştürülebilir veya kritik durumda yanıp sönecek şekilde yapılandırılabilir.

Önemli: Görsel Durum ile Proses Durumu Ayrımı

SVG_MACHINE üzerindeki renk, şekil, görünürlük veya yanıp sönme gibi değişiklikler, kullanıcı kontrolünün bağlı olduğu SCADA verisinin grafiksel olarak ifade edilmesini sağlar. Bu nedenle SVG durumlarının tanımlanmasında kullanılan eşiklerin ve görsel anlamların, ilgili proses değişkeninin gerçek işletme durumlarıyla uyumlu olacak şekilde yapılandırılması önemlidir.

SVG_MACHINE / DATA STATEACTIVE
SVG DURUM
Şekil / renk / dolgu / kontur / yanıp sönme
Veri72
Eşik10+
DurumSVG STATE
AlarmColored

Temel yaklaşım

Tek veri → birden fazla SVG durumu. Bağlı veri belirlenen eşiklere göre değerlendirilir; uygun SVG durumunda tanımlanan görüntü, renk, kontur, dolgu, görünürlük veya yanıp sönme davranışı kullanılır. Böylece grafik, yalnızca “bir resim” olmaktan çıkar ve proses durumunu anlatan dinamik bir gösterime dönüşür.

SCADA VerisiBağlı ölçüm / durum
→
SVG Durum KoleksiyonuEşik + görsel özellikler
→
SVG GörünümüŞekil / renk / dolgu / kontur / görünürlük

SVG Nedir?

SVG (Scalable Vector Graphics), iki boyutlu vektör grafiklerini tanımlamak için kullanılan XML tabanlı bir işaretleme dilidir. W3C'nin SVG standardı, SVG'yi iki boyutlu vektör ve karma vektör/raster grafiklerin tanımlanması için bir dil olarak tarif eder. SVG içeriği ölçeklenebilir ve farklı çözünürlüklerde görüntülenebilir.

SVG'nin önemli farkı, görüntünün yalnızca piksel matrisi olarak saklanmaması; çizgi, şekil, yol, renk, filtre ve benzeri grafik bileşenlerinin XML tabanlı bir yapı ile tanımlanabilmesidir. MDN'ye göre SVG; CSS ile stillendirilebilir, JavaScript ile etkileşimli hale getirilebilir ve circle, rect, path, polygon gibi grafik elemanlarıyla oluşturulabilir.

Özellik SVG açısından anlamı SVG_MACHINE açısından önemi
Vektörel yapı Grafik şekiller ve yollar üzerinden tanımlanır. Şekiller farklı kontrol boyutlarında keskinliğini koruyabilir.
XML tabanlı yapı Grafik tanımı metinsel ve yapılandırılmıştır. Dışarıdan SVG dosyası kullanımı için uygun bir kaynak biçimidir.
Ölçeklenebilirlik SVG farklı boyutlarda görüntülenebilir. SCADA ekran tasarımında farklı çözünürlük ve kontrol boyutlarına uyarlanabilir.
Stil ve görünüm Renk, kontur, dolgu ve çeşitli grafik özellikleri tanımlanabilir. SVG Durum Koleksiyonu ile bağlı veriye göre görsel durum oluşturmayı destekleyen bir temel sağlar.

SVG'nin SCADA için anlamı

Endüstriyel bir sembol; vana, pompa, fan, tank, motor, kesici veya başka bir proses elemanını temsil edebilir. SVG_MACHINE ile aynı sembolün veri düzeyine göre rengi değişebilir, başka bir SVG şekli kullanılabilir, dolgu veya kontur değişebilir ya da durumun dikkat çekmesi için yanıp sönme etkinleştirilebilir.

SVG Şekil Kütüphanesi ve Dış SVG Kaynakları

SVG_MACHINE yaklaşımında şeklin kaynağı yalnızca uygulamanın hazır görselleriyle sınırlı değildir. Kullanıcı, kontrolün SVG görselini kütüphaneden seçebilir veya dışarıdan bir SVG dosyası kullanabilir. Kaynak kodundaki _ImageFileName ve _LibrarySelectedImage alanları bu iki farklı şekil kaynağı yaklaşımını açıkça ayırır.

SVG Şekil Kütüphanesi

LibrarySelectedImage ile ilişkili seçim yaklaşımı, kontrolün hazır şekil kütüphanesinden bir SVG görselinin seçilmesini sağlar. Bu yöntem, tekrar tekrar kullanılan standart proses sembollerinin proje ekranlarında tutarlı biçimde kullanılmasına uygundur.

Dışarıdan SVG Dosyası

ImageFileName, kaynak kodunda dış görüntü dosyası adını tutan alan olarak tanımlanmıştır. Böylece kullanıcı kendi hazırladığı veya uygun bir kaynaktan temin ettiği SVG görselini kontrolün şekli olarak kullanabilir.

Dış SVG kullanırken

SVG dosyasının görsel olarak doğru çalışması kadar, dosyanın proje ortamında erişilebilir olması da önemlidir. Dış kaynaktan alınan SVG'nin proje dağıtımı sırasında yolunun, dosya erişiminin ve kullanılan SVG içeriğinin hedef sistemde doğrulanması gerekir. SVG, XML tabanlı ve komut/öğe içeren bir grafik biçimi olduğundan, dışarıdan alınan dosyalar güvenilir kaynaklardan seçilmelidir.

SVG Durum Koleksiyonu — Kontrolün Kalbi

SVG_STATE_COLLECTION, bağlı SCADA verisinin belirli bir değer aralığına veya durumuna ulaştığında SVG şeklinin hangi özelliklerle görüntüleneceğini tanımlayan veri yapısıdır. Kullanıcının verdiği kaynak koda göre her koleksiyon öğesi; görüntü rengi, kontur rengi, dolgu rengi, veri eşiği, yanıp sönme, görüntü dosyası, kütüphane seçimi ve görünürlük gibi alanları içerir.

Kaynak alanı EOS Türkçe karşılığı Varsayılan Rolü
_LevelImageColor Düzey Görüntü Rengi Black İlgili veri düzeyinde görüntüyle ilişkili rengi tanımlar.
_LevelStrokeColor Düzey Kontur Rengi Silver SVG şeklinin kontur rengini belirler.
_LevelFillColor Düzey Dolgu Rengi Silver SVG şeklinin dolgu rengini belirler.
_LevelThreshold Düzey Eşiği 10 Bu SVG durumunun devreye girmesinde kullanılan veri eşiğini temsil eder.
_BlinkActive Yanıp Sönme Etkin false İlgili veri düzeyinde yanıp sönme davranışının etkin olup olmadığını belirler.
_ImageFileName Resim Dosyası Adı "" Durum için dışarıdan kullanılacak görüntü dosyası adını tutar.
_LibrarySelectedImage Kitaplık Seçili Resim "" Durum için kitaplıktan seçilen SVG görüntüsünü temsil eder.
_LibraryImage Kitaplık Görüntüsü null Kitaplıktan seçilen görüntünün nesne karşılığını tutar.
_Visible Görünür true İlgili durum görselinin görünür olup olmadığını belirler.

Neden bu kadar güçlü?

Çünkü durum yalnızca rengi değiştirmek zorunda değildir. Aynı eşik mantığı içinde kontur, dolgu, yanıp sönme, görünürlük ve hatta kullanılan SVG şekli değiştirilebilir. Böylece operatör, prosesin hangi durumda olduğunu tek bir bakışta grafiksel olarak ayırt edebilir.

Alarm Türleri: Renk Değişimi ve Şekil Değişimi

Kaynak kodunda ILAlarmTuru adlı Seçenekler Kümesi iki alarm türü içerir. İsimler, alarmın görsel olarak nasıl ifade edileceğini iki farklı yaklaşımda ele alır.

Colored — Renkli

Alarm/durum değişikliğinin görsel olarak renk üzerinden ifade edilmesine yönelik seçenektir. SVG şekli aynı kalırken renk, kontur veya dolgu gibi görsel özelliklerin veri durumuna göre farklılaştırılması bu yaklaşımın temel kullanım biçimidir.

Shapechange — Şekil Değişimi

Alarm/durum değişikliğinin doğrudan kullanılan SVG şeklinin değiştirilmesiyle ifade edilmesine yönelik seçenektir. Bu sayede aynı proses elemanı için normal, uyarı veya farklı çalışma durumlarını farklı SVG sembolleri temsil edebilir.

Alarm görselleştirmesinde kritik nokta

Renk değişimi ile şekil değişimi aynı şey değildir. Renkli yaklaşımda operatör mevcut sembolün görünümündeki değişimi izler; Şekil Değişimi yaklaşımında ise sembolün kendisi değişebilir. Bu nedenle alarm durumlarının operatör eğitiminde ve ekran tasarımında hangi görsel anlamı taşıdığı açıkça tanımlanmalıdır.

Düzey Eşiği ile Örnek Durum Kurgusu

LevelThreshold alanı, SVG Durum Koleksiyonu öğesinin veri eşiğini tanımlar. Kaynakta tek bir koleksiyon öğesi için varsayılan değer 10 olarak verilmiştir. Aşağıdaki örnek, kontrolün birden fazla durum öğesi ile yapılandırılabileceğini açıklamak amacıyla verilmiştir; değerler örnektir ve kaynak kodda sabitlenmiş bir alarm aralığı değildir.

NormalDüşük düzey
UyarıEşik aşıldı
KritikRenk / görünüm değişimi
AlarmŞekil Değişimi

Örnek mantık

Örneğin bir proses değerinde düşük düzeyde dairesel sembol, eşik aşıldığında farklı dolgu rengi, daha yüksek düzeyde yanıp sönme ve kritik durumda üçgen alarm sembolü kullanılabilir. Buradaki önemli nokta, her veri aralığının kendi SVG Durum Koleksiyonu öğesiyle tanımlanabilmesi ve şeklin yalnızca renk değiştirmenin ötesinde değiştirilebilmesidir.

SVG Dönüş Açıları

GNAciBilgisi Seçenekler Kümesi, SVG şeklinin dört temel dönüş açısını tanımlar. Bu seçenekler özellikle yön bilgisi taşıyan sembollerde; vana, motor, ok, fan, akış yönü veya benzeri yönsel grafiklerde kullanılabilecek sabit dönüş konumlarını ifade eder.

0 Derece
Zerodegrees
90 Derece
Ninthydegrees
180 Derece
HundredEightydegrees
270 Derece
Twohundredseventhydegrees

Kaynak Koddaki Özelliklerin Hızlı Referansı

Aşağıdaki tablo, kullanıcının verdiği kaynak kod kesitinde doğrudan görülen SVG_STATE_COLLECTION alanlarını ve ilgili EOS Türkçe terminolojisini özetler. Kaynak kesitinde verilmeyen varsayılan değerler özellikle uydurulmamıştır.

Teknik alan EOS Türkçe karşılığı Varsayılan Açıklama
_LevelImageColor Düzey Görüntü Rengi Black Durum düzeyinin görüntü rengi.
_LevelStrokeColor Düzey Kontur Rengi Silver SVG konturunun durum düzeyindeki rengi.
_LevelFillColor Düzey Dolgu Rengi Silver SVG dolgusunun durum düzeyindeki rengi.
_LevelThreshold Düzey Eşiği 10 Durumun veri eşiğini temsil eder.
_BlinkActive Yanıp Sönme Etkin false Bu düzeyde yanıp sönmenin etkin olup olmadığını belirler.
_ImageFileName Resim Dosyası Adı "" Dış kaynak SVG görüntüsü için dosya adını tutar.
_LibrarySelectedImage Kitaplık Seçili Resim "" Kitaplıktan seçilen SVG görüntüsünü temsil eder.
_LibraryImage Kitaplık Görüntüsü null Seçilen kitaplık görüntüsünün nesne karşılığıdır.
_Visible Görünür true SVG durumunun görünürlüğünü belirler.

Seçenekler Kümeleri

Kaynak kodunda tanımlanan seçenekler, SVG_MACHINE'in davranışını sabit metinlerden daha kontrollü biçimde yapılandırmayı sağlar.

Seçenekler Kümesi Teknik seçenek Türkçe karşılığı Kullanım
ILAlarmTuru Colored Renkli Alarm/durum görselleştirmesinin renk üzerinden ifade edilmesi.
ILAlarmTuru Shapechange Şekil Değişimi Alarm/durum görselleştirmesinin SVG şeklinin değiştirilmesi.
GNAciBilgisi Zerodegrees 0 Derece Temel yönlendirme.
GNAciBilgisi Ninthydegrees 90 Derece Çeyrek tur dönüş.
GNAciBilgisi HundredEightydegrees 180 Derece Yarım tur dönüş.
GNAciBilgisi Twohundredseventhydegrees 270 Derece Üç çeyrek tur dönüş.

Kullanım Alanları ve Örnek Senaryolar

Döner Ekipmanlar

Motor, fan, pompa veya benzeri ekipmanların çalışma durumunu farklı SVG sembolleri ve renklerle göstermek için kullanılabilir.

Tank ve Proses Elemanları

Seviye verisine bağlı olarak dolgu, renk, kontur veya farklı proses sembollerinin gösterilmesi için uygundur.

Elektriksel Durumlar

Kesici, ayırıcı, enerji akışı veya ekipman durumlarını sembol değişimi ve renk kodlaması ile görselleştirebilir.

Alarm ve Uyarı

Ölçüm eşiği aşıldığında renk değişimi, yanıp sönme veya farklı bir alarm SVG'sine geçiş gibi görsel bildirimler oluşturulabilir.

Tasarım önerisi

Operatörün hızlı algılaması için renk ve şekil anlamlarını proje genelinde tutarlı tutmak faydalıdır. Örneğin bir ekipmanın “çalışıyor”, “beklemede”, “arıza” ve “iletişim yok” durumları farklı SVG sembolleriyle temsil edilecekse, bu sembollerin anlamı tüm ekranlarda aynı kalmalıdır.

Devreye Alma ve Görsel Doğrulama

SVG_MACHINE bir görüntüleme kontrolü olduğundan, özellikle durum eşikleri ile görsel karşılıklarının birlikte test edilmesi önemlidir. Kullanıcının verdiği kaynak kesitinde SVG_STATE_COLLECTION içindeki eşik ve görünüm alanları doğrudan aynı durum tanımında tutulmaktadır.

Önerilen kontrol listesi

  1. Varsayılan SVG şeklinin doğru görüntülendiğini doğrulayın.
  2. Dış SVG kullanılacaksa dosya yolunu ve hedef sistemde erişilebilirliğini doğrulayın.
  3. Kütüphane SVG'si seçilecekse doğru şeklin seçildiğini doğrulayın.
  4. Her LevelThreshold değerinin beklenen veri aralığıyla eşleştiğini kontrol edin.
  5. Renk, kontur ve dolgu değişimlerini her durum için test edin.
  6. BlinkActive etkin olan durumlarda yanıp sönme davranışını test edin.
  7. Visible ile görünürlük değişiminin beklenen durumda oluştuğunu doğrulayın.
  8. ILAlarmTuru seçiminin Renkli veya Şekil Değişimi davranışıyla uyumlu olduğunu kontrol edin.
  9. GNAciBilgisi ile yönsel SVG sembollerinin doğru konumda göründüğünü kontrol edin.

Kaynak sınırı

Bu sayfada kaynak kodunda açıkça verilen alanlar doğrudan açıklanmıştır. SVG_MACHINE'in diğer genel kullanıcı kontrolü özellikleri veya veri bağlantısının ayrıntıları, verilen kaynak kesitinde bulunmadığı için burada varsayılmamıştır.

Özelliklerin Hızlı Referansı

Konu Temel yapı Özet
Kontrol SVG_MACHINE SCADA verisini dinamik SVG grafikle görselleştiren kullanıcı kontrolü yaklaşımı.
Durum yapısı SVG_STATE_COLLECTION Veri eşiğine göre SVG özelliklerinin ayrı ayrı tanımlanmasını sağlar.
Şekil kaynağı ImageFileName / LibrarySelectedImage Dış SVG dosyası veya kitaplık görüntüsü kullanılabilir.
Alarm ILAlarmTuru Renkli veya Şekil Değişimi.
Durum görseli LevelImageColor / LevelStrokeColor / LevelFillColor Görüntü, kontur ve dolgu renkleri durum bazında tanımlanabilir.
Yanıp sönme BlinkActive İlgili durum için yanıp sönme etkinleştirilebilir.
Görünürlük Visible Durum görselinin görünürlüğü yönetilebilir.
Dönüş GNAciBilgisi 0°, 90°, 180° ve 270° seçenekleri.

Sonuç: SVG ŞEKİL MAKİNESİ'nin ayırt edici yönü, SVG'yi yalnızca bir resim olarak göstermemesi; bağlı SCADA verisini şekil durumuna dönüştürmesidir. SVG Durum Koleksiyonu sayesinde aynı proses elemanı veri değiştikçe farklı renk, kontur, dolgu, görünürlük, yanıp sönme veya farklı bir SVG şekli ile ifade edilebilir.

SVG Teknik Kaynakları

  • W3C — SVG 2: SVG'nin iki boyutlu vektör ve karma vektör/raster grafiklerin tanımlanmasına yönelik standardı. W3C SVG
  • MDN — SVG: SVG'nin XML tabanlı yapısı, ölçeklenebilirliği, CSS/DOM/JavaScript ile ilişkisi ve SVG elemanları hakkında kapsamlı teknik açıklamalar. MDN SVG
  • MDN — SVG'yi HTML'e dahil etme: SVG'nin img, object, iframe veya doğrudan HTML içine gömülmesi gibi yöntemleri açıklar. MDN — Including vector graphics in HTML
← Önceki İçeriğe Dön