UI oluşturma

Node-RED ile Kullanıcı Arayüzü (UI) Oluşturma Rehberi

Node-RED, sadece veri akışlarını yönetmek için değil, aynı zamanda bu verileri görselleştirmek ve kontrol etmek amacıyla hızlı prototip arayüzler (UI) oluşturmak için de mükemmel bir araçtır. Düşük kodlu (low-code) yapısı sayesinde, karmaşık HTML/CSS bilgisine ihtiyaç duymadan profesyonel görünümlü paneller hazırlayabilirsiniz.

1. Dashboard Modülünün Kurulumu

Node-RED varsayılan olarak bir UI arayüzü ile gelmez. Bunun için endüstri standardı olan node-red-dashboard paketini yüklemeniz gerekir.

Node-RED editöründe sağ üstteki menüden Manage Palette seçeneğine tıklayın.
Install sekmesine geçin.
Arama kısmına node-red-dashboard yazın ve yükle butonuna basın.

2. Temel Kavramlar: Tab ve Group Yapısı

Arayüzünüzü oluştururken hiyerarşik bir düzen kurmanız gerekir. Node-RED Dashboard üç ana katmandan oluşur:

Tabs (Sekmeler): Tarayıcınızdaki farklı sayfalar gibidir (Örn: "Enerji Takibi").
Groups (Gruplar): Sayfa içindeki görsel bölümlerdir (Örn: "Sıcaklık Grafikleri").
Widgets (Bileşenler): Kullanıcının etkileşime girdiği düğmeler, grafikler, kaydırıcılar vb.

3. İlk Arayüzünüzü Oluşturun

Basit bir örnekle başlayalım: Bir Slider (Kaydırıcı) ile bir Gauge (Gösterge) kontrolü yapalım.

Sol panelden bir Slider düğümü sürükleyin.
Yanına bir Gauge düğümü ekleyin ve bunları birbirine bağlayın.
Slider düğümüne çift tıklayın; buradan bir Group oluşturun.
Aynı işlemi Gauge için de yapın ve aynı grubu seçin.
Sağ üstteki Deploy butonuna basın.

Nasıl Görüntülenir? Arayüzünüze erişmek için tarayıcınızın adres çubuğuna Node-RED adresinin sonuna /dashboard ekleyin. (Örn: http://[HUBBOX IP]:1880/dashboard)

4. Görselleştirme Seçenekleri

Dashboard içerisinde pek çok hazır bileşen bulunur:

Bileşen	Kullanım Amacı
Chart	Zaman serisi verilerini çizgi veya bar grafik olarak gösterir.
Switch	Bir durumu (Açık/Kapalı) kontrol etmek için kullanılır.
Button	Belirli bir işlemi tetiklemek (Örn: "Sistemi Başlat") için kullanılır.
Template	Özel HTML/CSS kodları yazmanıza olanak tanır.

5. İleri Seviye Özelleştirme ve Stil

Arayüzünüzü profesyonelleştirmek için sağ taraftaki Dashboard sekmesini kullanın:

Theme (Tema): Açık veya Koyu mod seçebilir, renkleri markanıza göre özelleştirebilirsiniz.
Site: Sayfa başlığını, simgeleri ve navigasyon çubuğunu ayarlayabilirsiniz.
Layout: Bileşenlerin yerleşimini sürükle-bırak yöntemiyle düzenleyebilirsiniz.

Hubbox İpuçları:

Mobil Uyumluluk: Grupların genişliğini ayarlarken mobil cihazları unutmayın.
Context Kullanımı: UI verilerini kalıcı kılmak için global veya flow değişkenlerini kullanın.

Hubbox Connect X2 ile endüstriyel veri görselleştirme çözümleri için: www.hubbox.io