19 Nisan 2026 Pazar

Siemens HMI Faceplate Oluşturmak

 Selam uzun bir aradan sonra yine otomasyon üzerine bir yazı ile karşınızdayım. Bu yazıda Siemens HMI uygulaması geliştirirken çok faydalı bir özellik olan Faceplate tasarımı ve kullanımını basit bir şekilde anlatmaya çalışacağım.

Öncelikle kullandığım TIA Portal versiyon 16, bunu belirteyim , başka versiyonlarda farklı davranışlar olabilir ama genelde teknik benzer.

Ben sıvı gıda üretimi yapan tesislere proses otomasyonu projeleri yapıyorum. İşimiz gereği sahada bir sürü vanalar, pompalar, ısıtıcılar vs. kontrol ediyoruz. Bunları HMI ekranında gösterirken temel animasyon teknikleri kullanıyorum. 

Gıda prosesinde akışın durmaması için elden gelen her şeyi yaparsınız çünkü gıda beklemeden işlenmesi gereken bir ürün. Bu amaçla tüm dijital veya analog çıkışlarımızın ekrandan manual kontrol edilebilmesi gerekiyor. Benzer şekilde sahadan değerleri okuduğumuz dijital veya analog girişlerin de manual olarak değer girilerek, sistemde bağlı sensörlerde arıza olursa , en azından ürünü kurtarana kadar otomasyon programını kandırmak gerekebiliyor. 

Örnek çalışmaya bir vananın ekrandaki gösteriminin nasıl yapıldığını ve bunu faceplate kullanarak nasıl yapacağımızı anlatarak başlayalım. 


Bir Dijital Çıkışın HMI Animasyonu Nasıl Yapılır

Burada örnek verirken direk kendi kullandığım tekniği anlatacağım. Ben bir dijital giriş ya da çıkışı ekranda anime etmek için PLC'de o dijital bağlantı için bir 16 bit integer değer oluştururum ve bunun bitlerinde o giriş ya da çıkışı programda kullanırken yararlandığım tüm verileri saklarım.

Örneğin bir dijital çıkışı temsil eden 16 bit içinde şu anda kullandıklarım:

  • Bit 0 : Fiziksel çıkışa gönderilen değerin bir kopyası. Mesela buna göre vananın açık mı, kapalı mı olduğunu beyaz ya da yeşil renge boyayarak gösterebilirim
  • Bit 1 : Dijital çıkışın manual kontrole alındığını belirtir. Bu durumda otomasyon programının dediği değil, operatörün ekrandan istediği değer çıkışa verilir. Bunu ekranda göstermek için vana görselinin arkasında turuncu bir kare gösteririrm.
  • Bit 2 : Çıkışın feedback alarmı verdiğini bildirir. Yani vananın açık ve-veya kapalı olduğunu swiçler ile okuyorsak ve vana açıldığında belirli bir süre içinde açık bilgisi gelmiyorsa bir sorun var demektir. Otomasyon programı bunu takip eder ve hata olduğunda bu biti setler. Bunu ekranda göstermek için vana kapalıysa beyaz-kırmızı, açıksa yeşil-kırmızı yanıp sönen bir animasyon kullanırım.
  • Bit 3 : Çıkışın alarm vermesini engeller. Mesela vana açılmadı alarmı verdi ve operatör baktı ki vana açık. Pozisyon okuyan sensörde bir sorun var. Otomasyonu aksatmamak için yetkili operatör ekrandan bu biti setleyerek vananın alarma geçmesini engeller. Bunu göstermek için ekranda vana etrafında kırmızı bir çerçeve gösteririm ki bakanın dikkatini çeksin vananın alarm vermesi engellenmiş. Biz buna alarmı maskelenmiş deriz.
  • Bit 4 : Vana manual kontrole alındıysa - yani Bit 1 setlendiyse bu bit değeri neyse çıkışa o verilir. Bu aslında görsel olarak animasyonda kullanılmaz, direk olarak işlenmiş ve çıkışa verilmiş değeri görüyoruz zaten. Burada sadece bilgi olarak verdim.

Bazen geri kalan 2 adet bit içinde on-off feedback değerlerini saklarım. 5 adet bit içinde 0-31 saniye alarm süresi sayacını saklarım vs. Neyse kafa karıştırmayalım.



Bir HMI Projesi Oluşturarak Başlayalım

TIA Portal uygulamasını açalım, Create new project bağlantısını tıklayarak yeni bir proje başlatalım. Genelde böyle geçici denem projeler için dnm adını veririm ki sonradan gördüğümde önemli değil sil gitsin diyeyim. Add new device bağlantısını tıklayıp, PC Systems başlığı altında, PC General altında PC station donanımını projeye ekleyelim.  

PC elemanını Simatic PC Station olarak configürasyon için açılacaktır. Bu PC donanımına sağdaki Hardware catalog bölümünden Comunication modules -> PROFINET/Ethernet -> IE general etheret kartını sürükleyerek ekleyelim. HMI çalıştırmak için de Simatic HMI Application -> WinCC RT Advanced modülünü ekleyelim. Şöyle görünecek,


Denemeler yaparken genelde HMI için WinCC RT kullanıyorum. PLC simülasyonda çalışsa bile RunTime çalışınca iletişim kurup hiç PLC ve HMI ekran yokken bile değer okuyabiliyor, denem yapabiliyorum. 

Solda proje ağacı içinde Screens -> Add new scrren tıklayarak HMI uygulamamıza yeni bir sayfa ekleyelim. Eklediğimiz sayfa otomatik olarak düzenleme için açılacaktır. Üzerine basit bit Text field elemanı ekleyip deneme yapalım. Yukarıdaki Start Runtime on PC butonuna tıklayınca geliştirme bilgisayarımızda WinCC RT çalışacaktır. 


WinCC RT çalışınca tüm ekranı kaplar. Uygulamayı kapatmak için bir buton ekleyip tıklandığında WinCC RT uygulamasının sonlandırılmasını sağlayalım. Toolbox -> Elements bölmesinden bir buton ekleyelim etiketini Kapat yapalım. Butona tıklanınca olacakları tarif için butona sağ tıklayıp açılır menüden Events tıklayalım. 


Buton seçiliyken Properties penceresinde Events sekmesine de girsek aynı yere gelir. Burada sistem fonksiyonu olan StopRuntime fonksiyonunu butonun Click olayına bağlayalım.


Artık denmelerde uygulamayı bitirmek için zahmet çekmemize gerek yok. Denemelere başlayabiliriz.



Önce Ayrı Ayrı Nesnelerle Animasyonu Yapalım

Öncelikle Grid özelliklerini bir ayarlayalım. 5 piksellik grid ve snap to grid özelliğini aktif edersek çizdiklerimizi hizalamak daha kolay olacak. Menüden Options -> Settings -> Visualization -> Screens sekmesinde , snap to grid ve 5 piksel grid ayarlayalım.


Öncelikle deneme için yeni bir HMI Tag ekleyelim. Proje ağacından HMI tags -> Show all tags açalım ve <Add new> kutusuna çift tıklayıp Int tipinde bir <Internal tag> ekleyelim adı da mesela Tag_1 olabilir.

En altta vananın manual kontrolde olduğunu belirtecek olan turuncu bir kare koyalım boyutu 30 piksel x 30 piksel olsun. Çizgi kalınlığı sıfır olsun ki çerçevesi olmasın. Karenin deneme tag'imizin bit 1'ine göre görünebilmesi için animasyon tanımlamak gerekiyor. Kareye sağ tıklayıp Animations seçelim.


Karşımıza kare nesnesinin olası animasyonlarının listesi çıkacak. Visibility animasyonu nesnenin ne zaman görüneceğini tayin eder. Bu konuda animasyon ekleme butonuna tıklayalım.


Açılan yapılandırma penceresinde şu ayarları yapalım.


Hadi deneyelim de nasıl? Önce deneme tag'imize değer girmek için bir şey eklemeliyiz. Sağda Toolbox bölümünde Elements sekmesinden bir I/O field seçelim ve sayfaya ekleyelim. Özelliklerini de şöyle ayarlayalım.


Process değerini bizim tag'imize bağladık, değer girebileceğiz, değeri binary olarak göreceğiz ve gireceğiz , 16 rakamlı binary sayı gösterebilecek. I/O field elemanının genişliğinin tüm 16 biti alacak kadar olduğuna emin olun.

Artık deneme yapabiliriz. WinCC RT uygulamasını çalıştıralım.


Yaşasın , mutlu son..

Sırada vananın enerjili olduğunu gösterecek bir kare daha var. Arkaplan rengi vana enerjili ise yeşil olacak. Yani Bit 0'a göre renk değiştirecek. Sayfaya 20x20 boyutunda bir kare daha ekleyelim ve önceki karemizi ortalayıp üstüne yerleştireceğiz. Özellikleri şöyle,


Arkaplan rengi şimdilik beyaz ve çizgi kalınlığı 2 piksel. Bunun animasyonlarında renkleri yönetmek için Appearance animasyonu ekleyeceğiz.


Şimdi animasyonu ekleyelim.


Burada değer olarak False-True yerine 0-1 yazıyor , böyle bir standardı var. Bit 0 değeri 1 ise (yani True) arkaplan rengi yeşil olacak, yoksa beyaz. Hemen deneyelim.


Bu da tamam. Sırada alarm verirse kırmızı yanıp sönmesi var. Burada bir önceki ile aynı boyutta bir kare kullanacağız ama iki animasyonu var. Alarm olunca görünecek ve vana enerjisizse kırmızı-beyaz, enerjiliyse kırmızı-yeşil yanıp sönecek. Bir önceki kare ile bunu yapamamak zoruma gidiyor ama bir sürü nesne olsa da faceplate işimi çok kolaylaştıracak, bu yüzden sayfaya koyduğum nesnelere acımıyorum. İlk önce aynı kareden kopyalayıp üstüne yerleştirelim ama animasyonlarını silelim. 

Bu nesneyi anlatırken bir önceki ile aynı boyutlarda olduğu için biraz yana kaydırıp ikisini de göstermeye çalışacağım. Öncelikle Ctrl+c ve Ctrl+v (ünlü program yazma metodu!) ile bir kopyasını oluşturalım ve animasyonlarını açıp Appearance animasyonunu silelim.


Sağ tıklayıp silmek istediğimiz animasyon için Delete tıklıyoruz. 

Bu karenin önceki beyaz karenin içine girmesini istiyorum. Çünkü yanıp sönme animasyonu seçince çizgi rengi ve arkaplan rengi arasında flash yapıyor ve çizgi de renk değiştiriyor. Bu yüzden çizgi kalınlığını sıfır yapacağım ki yanıp sönmesin, alttaki karenin çizgisi görünsün. Aynı zamanda alarm karesinin boyutu 16x16 biksel çünkü alttaki karenin çizgileri görünmesi için alt-üst-sağ-sol 2 piksel kısa olmalı.

Öncelikle Bit 2'ye göre bu karenin görünmesini sağlayalım.


Sonra da vananın enerjili olup olmadığına göre ya kırmızı-beyaz ya da yeşil-kırmızı yanıp sönme sağlayalım.Bu amaçla appearance animasyonu kullanacağız.


Çizgi kalınlığı sıfır olmasına rağmen Border color rengi kırmızı yapıldı çünkü Flashing özelliği Yes yapılırsa Border color ve Background color renkleri arasında flash  yapıyor. Şimdi bu alarm animasyon karesini önceki karenin ortasına yerleştirip deneyelim.


Geldik alarmı maskelenmiş yani alarm vermemesi sağlanan vananın nasıl görüneceğine. Dedik ki Bit 3 setli ise vana etrafında kırmızı bir çerçeve çizerek alarmının engellenmiş olduğunu göstereceğiz. Bu amaçla içi transparent olan bir kare ekleyeceğiz sayfamıza. Önce yine 30x30 piksel bir kırmızı kare ekleyelim sayfaya.


Bunun Visibility animasyonunu bizim deneme tag'imiz Bit 3'üne bağlayalım.


Öncekilerin üstüne oturacak şekilde bu nesneyi de kaydıralım ve test edelim.


Sırada vanamızın borulama bağlantıları var. Diyelim bu vana yatay bir hat üzerinde gösterilecek , vananın hat bağlantıları animasyonsuz kalıcı çizgiler olarak yer alacak. Bunları düz siyah iki parça çizgi olarak ekleyelim.


Bu iki çizgi her zaman görünür olacak , yani bir animasyon yok. Ama vana enerjilendiğinde bunları birbirine bağlayan animasyonlu bir çizgi olacak. Şimdi sıra ona geldi.


Arkaya hattı göstermek için bir yatay çizgi ekledim. Ama onun en arkada olması lazım , bu amaçla çizgiye sağ tıklayıp , Order -> Send to back seçerek en alta göndeririz. Deneyelim.


Vay be, baya bi oldu gibi. Şimdi bir de bu vananın üstüne tıklanınca manual kontrol penceresi açarak işlem yapmayı sağlayacak bir buton ekleyeceğiz. Tabi ki bu buton görünmez olacak. Hadi bu da 30x30 piksel olup tüm görüntünün en üstünde olsun.

Butonun özelliklerinde General sekmesinde Invisible seçili olacak. Bu butona tıklanınca bir script çağırıp alakalı vana tag'inde işlemler yapacağız. Ama onun bu yazıyla alakası yok tabii ki. Butonu da ekledikten sonra artık işi Faceplate üretmeye geçirebiliriz. 

Size tavsiyem şu ana kadar tasarladığımız grafiklerin bir kopyasını hemen yanına kopyalayalım, iyi olur. 



Sayfadaki Bir Kısım Nesneden Faceplate Oluşturmak

Animasyonları nasıl yaptığımızı gördük. Ama burada bir çok nesneyi aynı tag ile animasyon yapıyoruz. Siemens HMI programlarında buna benzer durumlar için çok işimize yarayacak bir kabiliyet var. Faceplate oluşturarak birçok nesnenin animasyonunu bir tek tag'e bağlayabiliriz. Bunu yapmak da gayet basit. Daha önce oluşturduğumuz nesneleri grup halinde seçerek sağ tıkladığımızda açılan menüde bir seçenek var, Create faceplate seçeneği ve bunu seçelim. 


Seçeneği tıkladığımızda karşımıza yeni tasarlayacağımız faceplate adını ve açıklamasını girebileceğimiz bir pencere çıkar. 


Faceplate nesnemize bir isim ve açıklama girerek OK butonu tıklatınca faceplate oluşturulur ve faceplate düzenleme penceresi otomatik olarak açılır. Bizim nesneler yeni bir pencerede açıldı, burada önemli bir mesaj görünüyor.


Yukarıda pencere etiketinde bu faceplate'in nerede olduğu yazıyor. Eğer faceplate editörü kapalıyken faceplate tanımlamalarınızı bulmak isterseniz, sağ tarafta Libraries sekmesinde Project library -> Types altında bulabilirsiniz. Sarı uyarı bölümünde diyor ki "bu faceplate şu anda düzenleniyor". Eğer yaptığınız değişikliklerin proje sayfalarınızdaki o tipteki faceplate'lerde geçerli olmasını istiyorsanız release the version bağlantısını tıklayarak kaydedilmesini ve editörün kapanıp sayfa editörünüze geri dönülmesini sağlayabilirsiniz ya da discard the changes ... bağlantısına tıklayarak yaptığınız değişiklikleri kaydetmeden faceplate bir önceki versiyonuna geri dönersiniz. 

Biz nesne grubumuzu seçip create faceplate komutu ile ilk üretim yaptığımızda üretilen versiyon 0.0.1 idi ancak editörde gördüğümüz versiyon 0.0.2 düzenlenmek için açılmış. Yani ilk ürettiğimiz hiç bir düzenleme yapılmamış versiyon hala eski kayıtlarda duruyor. 

Şimdi geçelim düzenlemelerimize editörde biraz zoom yapıp tüm nesneleri bir ayırıp bakalım.


Burada animasyonlu nesnelerimizi bir kontrol edersek tüm animasyonların silinmiş olduğunu görürüz. Hepsini tekrar yazacağız. Neden o zaman önceden animasyon yazdık? Sadece faceplate olmadan nasıl yapacağınızı göstermek istedim. Bir de aynı anda bir sürü yeni şeyi denemek istemem, istediğim gibi çalışmazsa bir sürü şeyden hangisinde sorun olduğunu bulmak zorunda kalırım. Ben şu anda animasyonları nasıl yapacağımı biliyorum, onu düşünmeyeceğim. 

Örneğin turuncu kareye animasyon yapmaya kalkarsak projemizin Tag_1 değerine erişemediğini görürüz.


Sebebi, şu anda bir kütüphane elemanı tasarımı içindeyiz. Kütüphane elemanı içine eklendikleri projelerin kaynaklarına erişemez. Kütüphane elemanının kendi özellikleri olur, projeye o elemanı ekleyince o özelliğe proje kaynaklarından birini bağlayabilirsiniz. 

Faceplate'imize animasyonları bağlamak için bir integer kaynak tanımlamalıyız. Bunu aşağıdaki faceplate interface yapılandırma bölümünde yaparız.


Default olarak yeni bir property eklediğimizde int tipinde geldi ama onu da değiştirmek istersek üzerine tıklayıp açılan listeden başka bir veri tipi seçeriz. 

Şimdi bu özellik değeri ile animasyonları yapabiliriz.


Artık geri kalan tüm nesne animasyonlarını kendiniz yapabilirsiniz. Bir süre sizi bekleyeyim animasyonları yeniden faceplate özellik değerine bağlı olarak tanımlayın..

...


Faceplate Olayı Eklemek

Bir butonumuz var ve bunun tıklanması olayını faceplate olayı olarak eklersek projemizde bu butona tıklanınca olacakları faceplate dışından bağlayabiliriz. Bu amaçla yine aşağıdaki faceplate interface yapılandırmasında bulunan Events sekmesini kullanırız. Sekmede faceplate içindeki nesnelerden olay bağlantısı olan tek elemanımız olan butonumuz sol tarafta görünür. Burada soldaki butonun Click olayını tutup sürükleyerek sağdaki Events altında boş bir satıra bırakırız.


Artık uygulama sayfamiza bu faceplate eklenirse sağ tıklayıp Events seçince bu Click olayı görünecektir. Buna bağlayacağımız her işlem o faceplate butonuna tıklanınca gerçekleşecektir. 

Artık faceplate tasarımımız bitti , şimdi görselleri tekrar üst üste getirip yukarıdaki release the version bağlantısını tıklayarak faceplate değişikliklerini kaydedersek, geri proje sayfa düzenlemesine dönebiliriz.

Kaydederken açılan onay penceresinde seçenek olarak görülen Update instances in the project seçili olarak gelir. Bu seçenekle bu isimde sayfada daha önce konmuş tüm faceplate'ler kaydettiğimiz versiyona dönüştürülür.

Kaydetme işimiz bitince Library editör penceresini kapatmak için sol üst köşede bulunan butonu kullanabiliriz.





Faceplate'i HMI Sayfamızda Kullanmak

Öncelikle denemeler yapmak için Tag_1 gibi bir tane daha Tag_2 tanımlamasını HMI tags altında ekleyelim. 

Sayfada daha önce faceplate'e dönüştürdüğümüz vanamızın animasyonları artık çalışmıyor. Bunun özelliklerini açtığımızda Interface sekmesinde faceplate'in ConnectedTag özelliğini görürüz buraya istersek sabit değer bağlayabiliriz ya da bir dinamik değere yani tag'e bağlayabiliriz. Biz bunun Tag_1 değerine bağlanmasını istiyoruz.  

Dynamization sütununda bu tag bağlantısını yaparız.


Faceplate tıklanınca olacakları da faceplate özellikleri Events sekmesinde ayarlarız. Mesela ilk 4 biti setleyip herşeyin görünmesini sağlayalım.


Hadi bir deneyip çalışmasını görelim


Sol üstteki ilk yaptığımız ayrık nesnelerden oluşan animasyonun bir kopyası , alttaki ise faceplate'imiz. Birebir aynı çalışıyorlar. Fark ne? Şimdi Tag_2 ile aynı vanadan bir tane daha sayfaya eklerken göreceğiz. Faceplate ve değer girdiğimiz IO field elemanını blok olarak seçip kopyalarız ve sayfaya ekleriz. Burada sadece faceplate tag bağlantılarını Tag_2 olarak değiştirdiğimizde çok kısa sürede işimiz biter. Önceki ayrık elemanları kullansak her bir karenin animasyonunda tag değiştirmek işi çıkacaktı başımıza. 


Tag bağlama işlerini faceplate üzerine sağ tıklayıp animations ya da events seçerek de yapabilirsiniz. Siemens bu faceplate işini basitçe dökümanlarında anlatmadığı için senelerce ayrık elemanlarla görselleri hep gruplar şeklinde kullanmıştım. Bu yüzden bu yazıyı hazırladım ki yeni öğrenenler bu iş çok karışık deyip vazgeçmesin. Korkunç zaman kazandıran bir yöntem, bu vanalardan yeri geliyor projede yüzlerce gösteriyoruz.

Bu yazı da bu kadar. Sonraki yazılarda görüşmek üzere kalın sağlıcakla..





Hiç yorum yok:

Yorum Gönder