OpenBridge Design System ile
SCADA Tasarlayın
inSCADA Platformu, denizcilik iş yerleri için geliştirilen OpenBridge Design System'i iki yolla destekler: köprü, HVAC ve makine dairesi HMI ekranlarını Web Components ile doğrudan kod yazarak oluşturun veya Figma tasarımlarınızı SVG olarak aktarın.
Tasarımdan Uygulamaya — Seçim Sizin
Projenizin gereksinimine göre iki farklı yaklaşımdan birini kullanabilir, hatta aynı projede birleştirebilirsiniz.
Figma → SVG → inSCADA
Figma'da OpenBridge tasarımı hazırlayın, SVG olarak dışa aktarın, inSCADA'ya yükleyin ve SVG nesnelerine animasyon/veri bağlayın. CSS veya JavaScript yazmanıza gerek yok.
OpenBridge Web Components
<obc-compass>,
<obc-gauge-radial>,
<obc-tank>
gibi hazır bileşenleri doğrudan HTML içinde kullanın. IEC 62288 uyumlu.
@inscada/openbridge-bundle
Ocean Industries Concept Lab'ın geliştirdiği @oicl/openbridge-webcomponents kütüphanesini tek bir ES modülünde paketledik. inSCADA Platformundaki custom menu ve dashboard'larda doğrudan CDN üzerinden kullanabilirsiniz.
Navigation Instruments
(34)Pusula, heading, rate-of-turn, rudder, dümen, thruster, wind gibi IEC 62288 uyumlu denizcilik enstrümanları.
<obc-compass><obc-gauge-radial><obc-rudder><obc-wind> Automation & Schematic
(33)Pompa, motor, tank, valf, transformatör, elektrik sembolleri ve wiring primitifleri. P&ID ve tek hat diyagramları için.
<obc-pump><obc-motor><obc-tank><obc-digital-valve> Bars & Graphs
(6)Line, Area, Pie, Donut, Polar ve Radial Bar grafikleri. Gerçek zamanlı veri görselleştirme için optimize.
<obc-line-graph><obc-donut-chart><obc-polar-chart> UI Components
(112+)Butonlar, kartlar, menüler, alarm listeleri, form elementleri, tablolar, sequence kartları ve sayfa düzeni bileşenleri.
<obc-alert-menu><obc-top-bar><obc-table><obc-brilliance-menu> İki Kurulum Yolu — CDN veya Lokal
Endüstriyel SCADA sistemleri genellikle internet erişimi olmayan (air-gapped) ortamlarda çalışır. @inscada/openbridge-bundle bu gerçeği göz önünde bulundurarak iki yolla kullanıma sunulmuştur: online projeler için CDN, izole ağlar için inSCADA File Management üzerinden lokal sunum.
Lokal Kullanım — inSCADA File Management
Bundle dosyalarını (inscada-openbridge.min.js + openbridge.css) inSCADA File Management'a bir kez yükleyin;
platformdan sunulduğu için internet bağlantısı gerektirmez, versiyon kontrolü sizde kalır, yükleme süresi kısadır.
<!-- inSCADA File Management'a yüklenmiş dosyalar -->
<link rel="stylesheet" href="/api/custom-html/assets/libs/openbridge.css">
<script src="/api/custom-html/assets/libs/inscada-openbridge-min.js"></script>
Yol, inSCADA File Management'ta dosyaları yüklediğiniz klasöre göre değişir. Yukarıdaki örnek, assets/libs/ klasörüne yüklendiğini varsayar.
CDN Üzerinden — Online Projeler için
İnternet erişimi olan geliştirme ortamları, demo uygulamaları veya hızlı prototipleme için bundle'ı doğrudan jsdelivr üzerinden yükleyebilirsiniz.
<!-- Font (gerekli) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap">
<!-- OpenBridge theme CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@inscada/openbridge-bundle/dist/openbridge.css">
<!-- Tüm bileşenler (tek dosya) -->
<script src="https://cdn.jsdelivr.net/npm/@inscada/openbridge-bundle/dist/inscada-openbridge.min.js"></script><div class="obc-day">
<obc-gauge-radial value="72" min="0" max="100" label="RPM"></obc-gauge-radial>
<obc-compass heading="245"></obc-compass>
<obc-wind heading="180" speedKnots="12"></obc-wind>
</div>npm paketi, lokal kurulum için indirme ve sürüm sabitleme için bkz. @inscada/openbridge-bundle.
Köprü Operasyonu için 5 Adaptif Tema
Köprü personelinin ortam ışığına göre göz uyumunu koruması için OpenBridge beş renk modu sunar. Container üzerinde bir CSS sınıfı değiştirerek tüm arayüz renk paletini anında değiştirebilirsiniz.
<!-- Gece modunda tüm bileşenleri renderla -->
<div class="obc-night">
<obc-gauge-radial value="72"></obc-gauge-radial>
</div>inSCADA Platformunda OpenBridge
inSCADA custom menu içinde OpenBridge web component'lerinin gerçek zamanlı veri ile nasıl çalıştığını görün.
inSCADA Platformunda OpenBridge web component'leriyle hazırlanmış canlı HMI örneği.
Teknotherm Marine TEMS — HVAC & Water System
2023 yılında, Web Components kütüphanesi henüz hazır değilken, bu projeyi Figma → SVG → inSCADA yaklaşımıyla tamamladık. Bu yöntem bugün hala desteklidir ve tamamen özgün tasarımlar için tercih edilebilir.
Teknotherm Marine (Heinen & Hopman grubu), Ulmatec Thermal Solution ile birlikte gemiler için eksiksiz bir Thermal Energy Management System (TEMS) geliştirdi. Tasarımlarını OpenBridge 5.0 üzerine kurguladılar.
Proje partnerimiz Des Elektroteknik ile birlikte, Figma'da hazırlanan tüm UI'ı inSCADA Platformuna kayıpsız aktardık. Tasarım ve uygulama ekipleri arasındaki revizyon döngüsü belirgin şekilde kısaldı.
Denizcilik için Tasarlanmış Mimari
inSCADA; OpenBridge uyumluluğu, alarm yönetimi standartları ve endüstriyel protokol desteği ile gemi otomasyonunun gereksinimlerini karşılar.
IEC 62288 Uyumlu
OpenBridge Web Components IEC 62288 standardına uygun olarak tasarlanmıştır. Denizcilik köprü sistemlerinde doğrudan kullanılabilir.
186 Web Component
Navigation, automation, schematic, UI — 186 `<obc-*>` custom element tek bir bundle içinde kullanıma hazır.
1900+ SVG Icon
Denizcilik ve endüstriyel ikonografi `<obi-*>` custom element olarak — ayrı SVG yönetimine gerek yok.
IAS & IMO Uyumluluğu
Integrated Alarm System entegrasyonu, IMO alarm ve olay gösterim kuralları, önceliklendirme.
Siemens S7-1500
S7-1500 PLC ile doğrudan haberleşme. ProfiNet, Modbus TCP, OPC UA protokol desteği.
Redundant Mimari
Gemi operasyonları için kesintisiz çalışma. Yedekli sunucu, otomatik failover, sağlık izleme.
OpenBridge ile denizcilik HMI'nızı inSCADA'ya taşıyalım
Web Components ile kod yazarak ya da Figma'dan SVG aktararak — projenize en uygun yolu birlikte seçelim. Teknik bir ön görüşme için iletişime geçin.