SCADA UX'ten Kullanıcı Arayüzüne ve Geliştirmeye
SCADA ve IIoT Uygulamalarında kullanıcı deneyimi tasarımından kullanıcı arayü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.
Google resimler arama motoruna "scada mimic ISA-101" yazdığımızda aldığımız sonuçlar
İşte gördüğünüz sonuçlar, resimler ve ekran görüntüleri hepsi SCADA uygulamalarının kullanıcı arayüzleri. Bu gördüğünüz arayüzler SCADA alanında 'Mimik Ekranlar' olarak adlandırılıyor. SCADA yazılımlarında bu arayüzler her ne kadar yeni tasarım standartları (ISA-101) ile yorumlanarak tasarlansalar da benzer sonuçlar ortaya çıkıyor.
Figma'dan inSCADA'ya
Marin sektöründe otomasyon çözümleri geliştiren partnerimiz Des Elektroteknik ile birlikte inSCADA Platformunda, bir geminin 'HVAC and Water System'i ile ilgili SCADA uygulaması geliştirmekteyiz. Proje sahibi Teknotherm Marine'in uygulama hakkında yenilikçi bir vizyonunun olduğunun, bu konuda profesyonel bir tasarım ekibi ile çalıştığının ve OpenBridge Design System 5.0 standartları ile ilerlemek istediğinin farkına vardık.
Resim 2: Figma Preview for SCADA Application UI and Water System Mimic — Thermal Energy Management System (TEMS) by Teknotherm Marine AS. Design based on OpenBridge Design System 5.0
Resim 3: Water System Mimic at inSCADA Runtime
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.
SVG Tabanlı Görselleştirme
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.
"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."
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. Tasarım ve uygulama ekipleri arasındaki revizyon talepleri ve bunlara bağlı olarak projede harcanan süreler azalıyor. Özetle verimlilik artıyor.