top of page
  • Writer's pictureHabib Kara

SCADA UX' ten Kullanıcı Arayüzüne ve Geliştirmeye

Tarih : 27.10.2023

Yazar : Habib KARA habib.kara@inscada.com


SCADA ve IIoT Uygulamalarında kullanıcı deneyimi tasarımından kullanıcı ara yüzüne ve uygulamaya geçerken kullanabileceğimiz en etkin araçları inceleyeceğiz.


SCADA Alanında bir geliştirici olarak bu başlık altında bir şeyler yazmanın hem benim için hem de benim gibi SCADA alanında uygulama geliştiriciler için yenilikçi bir bakış açısı olacağını düşünüyorum. Ayrıca bu yazı UX ve UI tasarımı ve geliştirmeleri yapan bir çok yazılımcı ve tasarımcının SCADA uygulamaları alanına ilgisini arttıracaktır.


Peki ne anlatmak istiyorum ?


Burada aslında ulaşmaya çalıştığım, aynı disiplinlerde uygulama geliştiren ve tasarım yapan iki ayrı kitle var. Bunların birincisi hali hazırda zaten UX ve UI kavramlarını iyi bilen modern uygulama geliştirme tekniklerine hakim, gerekli modern araçları kullanarak web uygulamaları geliştirenler. Diğer kitle ise benimde içinde bulunduğum SCADA uygulamaları geliştirenler. Birinci kitlenin dikkatini tam anlamı ile bu yazıya vermesi ve konuyu anlaması için bu yazıyı okurken tarayıcılarında yeni bir sekme açıp Google da resimler arama motoruna 'scada mimic ISA-101' yazıp çıkan sonuçlara bakmalarını öneriyorum.


Google resimler arama motoruna "scada mimic ISA-101" yazdığımız da aldığımız sonuç. Bu çıkan sonuçlar SCADA uygulamlarında ki kullanıcı arayüzleri ve bunlara mimik adı veriliyor.
Google Search Result for "scada mimic ISA-101"

İşte gördüğünüz sonuçlar, resimler ve ekran görüntüleri hepsi SCADA uygulamalarının kullanıcı ara yüzleri. Bu gördüğünüz ara yüzler SCADA alanında 'Mimik Ekranlar' olarak adlandırılıyor. Bu tasarımların bir çoğu farklı SCADA yazılımları ile yapılmış kullanıcı ara yüzleri. SCADA yazılımlarında bu ara yüzler her ne kadar yeni tasarım standartları (ISA-101) ile yorumlanarak tasarlansalar da benzer sonuçlar ortaya çıkıyor. Sonuçları gören birinci kitlenin iç sesini duyar gibiyim. 'Bunlar tasarım olamaz!' .


Haklısınız birinci kitle. Bunun nedenini anlamaya çalışın. Karşılaştığımız kısıtlamaları ve zorlukları, bunları yaparken hangi araçları kullanmak zorunda kaldığımızı bilmiyorsunuz. İşte tam da bu noktada bir çözüm önerimiz var.


Marin sektöründe otomasyon çözümleri geliştiren, yurtiçi-yurtdışı bir çok projeye imza atmış olan partnerimiz (Des Elektroteknik | Official Website) ile birlikte inSCADA Platformunda, bir geminin 'HVAC and Water System' i ile ilgili SCADA uygulaması geliştirmekteyiz. Başlangıçta alışık olduğumuz metot ve yöntemlerle uygulama geliştirmeye devam ederken, yani yukarıdaki çıktılar ile benzer sonuçlara doğru ilerlerken, proje sahibinin (Teknotherm Marine - Innovative Climate Cooling Solutions) uygulama hakkında yenilikçi bir vizyonunun olduğunun, bu konuda profesyonel bir tasarım ekibi ile çalıştığının ve bazı standartlar ile ilerlemek istediğinin farkına vardık. Bizlerle paylaştıkları tasarımlara göz attığımızda çok ince detaylar içerdiği UX konusunda çok emek verdiklerini gördük. Figma' da yapmış oldukları tasarımlar gerçek bir uygulamaya dönüşmeyi bekliyordu. Bakınız Resim 2 ' de figma ' da tasarlanan bir Water System'e ait UI görülüyor.



Figma üzerinde Teknotherm firmasının "Su Sistemi" için tasarlamış olduğu kullanıcı arayüzü görülüyor. Figma'daki önizleme görüntüsü.
Resim 2 : Figma Preview for SCADA Application UI and Water System Mimic

Thermal Energy Management System (TEMS) by Teknotherm Marine AS.

The design is based on the OpenBridge Design System 5.0


“Teknotherm (Heinen & Hopman grubunun bir parçası), Denizcilik ve Açık Deniz sistemleri söz konusu olduğunda lider şirketlerden biridir.Gemideki enerji tüketimine odaklanarak, ortakları Ulmatec Thermal Solution ile birlikte gemiler için eksiksiz bir termal yönetim sistemi geliştirdiler.Bu sistemler karmaşıktır ve yüksek derecede otomasyon gerektirir.Sistemin işleyişini anlamak, izlemek ve optimize etmek için iyi bir Scada sistemi şarttır.Operatörlere tanıdık ve sezgisel hissettirecek bir Scada sistemi oluşturma hedefiyle Teknotherm, tasarımlarını OpenBridge Design sistemini temel aldı.OpenBridge Tasarım Sistemi, denizcilik bağlamına ve düzenlemelerine uyarlanmış, kullanıcı arayüzü ve işyeri tasarımının modern ilkeleri üzerine kurulmuş açık bir tasarım sistemidir.”


Teknotherm ekibi Resim 2 de gösterilene benzer birçok kullanıcı ara yüzünü, OpenBridge Design System 5.0 (OpenBridge Design System 5.0) tasarım kılavuzu ile kendi HVAC ve Water Sistemlerine uygun tasarımlar yapmakta. İlk bakışta tüm bu tasarımları uygulamaya dökmek ve özellikle SCADA uygulamalarında olduğu gibi gerçek zamanlı görselleştirme gereksinimi olan bir uygulamaya dökmek sanırım oldukça zaman alıcı bir iş olarak görünecektir. Fakat inSCADA platformunda bunu yapmanın basit bir yöntemi var. Önce sonucu Resim 3 ' de görelim.


Figma ' da tasarlanmış bir kullanıcı arayüzü neredeyse kayıpsız bir şekilde inSCADA Platformuna aktarıldı. Uygulama katmanı menüleri ve teması Figma'da ki tasaarıma göre yenilendi. Proses ekranı ise Figma'dan SVG export alınarak aktarıldı.
Resim 3 : Water System Mimic at inSCADA Runtime

Thermal Energy Management System (TEMS) by Teknotherm Marine AS.

The design is based on the OpenBridge Design System 5.0



Resim 3 ' de görüldüğü gibi Figma' da tasarlanan bir UI inSCADA platformuna çok fazla zaman harcamadan, ön yüz geliştirmelerine ihtiyaç duymaksızın (css,javascript) kayıpsız bir şekilde aktarılıp hemen kullanılabilmektedir.


Figma' da tasarlanan bir UI' ın çok hızlı bir şekilde uygulamaya dönüşmesini sağlayan temel özellik inSCADA' nın SVG tabanlı görselleştirme yapıyor olabilmesi. Figma üzerinden uygun ayarlar ile SVG formatında çıktı alıp, inSCADA platformuna anında aktarabiliyoruz. Burada akla gelen diğer soru peki görselleştirmeler veya animasyonlar nasıl yapılıyor? Yine burada inSCADA platformunun animasyon uygulama tekniği öne çıkıyor.


"inSCADA platformunda, mimik ekranlardaki (SVG) herhangi bir nesneye (text, rectangle, path ..etc.) herhangi bir animasyon tipini (get, color, rotate, move .. etc.) ve veriyi bağlayabilirsiniz."


inSCADA platformuna aktarılan tasarımlar üzerinde yapılacak animasyonlar için inSCADA size  mimik üzerindeki her nesneye bir animasyon tipi bağlamanızı sağlar. Örneğin text nesnelerine değişkenler bağlayarak çalışma zamanında sıcaklık, basınç gibi değerler gösterebilirsiniz. Buna benzer SCADA alanında kullanılan tüm animasyon tiplerini uygulayabilirsiniz.
Resim 4 : Binding 'GET' animation to the selected text object on the inSCADA Platform.


inSCADA platformunun, görselleştirme için kullandığı SVG üzerinde nesnelere animasyon ve veri bağlama tekniği, aslında, geliştiricileri bir çok programlama ve geliştirme detayına girmekten kurtarıyor. Sadece gereksinimlere ve müşteri isteğine odaklanmayı sağlıyor. Hem de tasarım ekibinizin tasarımları neredeyse kayıpsız kullanılabiliyor. Tasarım ve uygulama ekipleri arasındaki revizyon talepleri, revizyon talepleri ile ilişkili yapılması gereken toplantılar ve bunlara bağlı olarak projede harcanan süreler azalıyor. Özetle verimlilik artıyor.


Yakın bir zamanda, tasarım topluluklarında (https://www.figma.com/community etc.) sunum, web uygulaması, marka ve slogan tasarımları gibi, SCADA uygulamaları için kullanıcı ara yüzleri, SCADA Sistemi enstrümanlarının dijital ikiz tasarımlarının da bulunabileceğini düşünüyorum.


Bu yazıda paylaşımını yaptığımız deneyimimizi, proje tamamlandıktan sonra, başarılı bir uygulama hikayesi olarak tüm detayları ile paylaşmayı düşünüyorum. Proje paydaşlarına inSCADA platformunu seçtikleri ve bizimle iş birliği yaptıkları için teşekkürler.


Linkler ;


Daha fazla bilgi için iletişim turgay@deselekto.com



















108 views
bottom of page