MQTT ile Node-RED Dashboard 2.0: Göstergeler, Grafikler ve Kontroller

Node-RED Dashboard 2.0, MQTT topic'lerini ayrı bir ön yüz projesine gerek kalmadan göstergeler, grafikler ve kontroller içeren bir tarayıcı arayüzüne dönüştürür. Bu eğitimde simüle edilmiş bir cihazdan gelen canlı sıcaklık ve nemi gösteren, ikisini bir çizgi grafikte çizen ve komut yayınlayıp cihazın onaylanmış durumunu yansıtan bir anahtarla bir fanı süren bir sayfa oluşturacaksınız. Her şey ücretsiz bir broker üzerinde çalışır; böylece hemen şimdi adım adım takip edebilirsiniz.

Node-RED Dashboard 2.0 Nedir?

Dashboard 2.0, artık kullanımdan kaldırılmış olan orijinal node-red-dashboard paketinin halefidir. @flowfuse/node-red-dashboard olarak yayınlanır, Vue ve Vuetify üzerine kuruludur ve aynı fikri korur: akışınızdaki widget node'ları, Node-RED'in /dashboard adresinde sunduğu bir web sayfasındaki öğelere dönüşür.

Yapı, yapılandırma node'larından oluşan bir hiyerarşidir:

Bunları nadiren elle oluşturursunuz. İlk widget'ı bırakıp "Add new ui-group" seçeneğini seçtiğinizde, editör sayfayı ve tabanı sizin için oluşturmayı önerir. Resmi Dashboard 2.0 dokümantasyonu her widget'ı ve seçeneklerini listeler.

Dashboard 2.0'ı Kurun

Node-RED editöründe Menu → Manage palette → Install yolunu açın, @flowfuse/node-red-dashboard paketini arayın ve kurun. Ya da Node-RED kullanıcı dizininizde komut satırından:

cd ~/.node-red
npm install @flowfuse/node-red-dashboard
# ardından Node-RED'i yeniden başlatın, ör.:
node-red-restart   # Raspberry Pi kurulum betiğiyle yapılmış kurulumlarda

Güncel bir Node-RED 4.x sürümü kullanın. Yeniden başlattıktan sonra palette yeni bir "dashboard 2" bölümü göreceksiniz. Node-RED'in kendisini hâlâ kuruyorsanız, Node-RED MQTT eğitimi kurulumu ve ilk broker bağlantınızı adım adım anlatıyor.

Telemetri Yayınlayan Bir Cihazı Simüle Edin

Gösterecek bir şeyiniz olması için, bir oda kontrolörü gibi davranan küçük bir Python betiği çalıştırın. Betik her iki saniyede bir JSON telemetrisi yayınlar, fan komutlarını dinler ve bir komutu uyguladıktan sonra fan durumunu retained message olarak yayınlar. Benzersiz ve boş olmayan herhangi bir client ID ile anonim istemcileri kabul eden ücretsiz herkese açık MQTT broker'ı broker.connectmq.com adresine bağlanır.

a7f3k2 yerine kendi rastgele dizenizi kullanın. Herkese açık broker herkes tarafından okunabilir; bu yüzden ön eki benzersiz, veriyi zararsız tutun.

# pip install "paho-mqtt>=2.0"
import json
import random
import time
import uuid

import paho.mqtt.client as mqtt

PREFIX = "connectmq/demo/a7f3k2/room1"
fan_on = False


def on_connect(client, userdata, flags, reason_code, properties):
    print("Connected:", reason_code)
    client.subscribe(f"{PREFIX}/fan/set", qos=1)


def on_message(client, userdata, msg):
    global fan_on
    command = msg.payload.decode().strip().upper()
    if command in ("ON", "OFF"):
        fan_on = command == "ON"
        # Onaylanan durumu raporla; yeni panolar hemen görsün diye retained
        client.publish(f"{PREFIX}/fan/state", command, qos=1, retain=True)
        print("Fan is now", command)


client = mqtt.Client(mqtt.CallbackAPIVersion.VERSION2,
                     client_id=f"room-sim-{uuid.uuid4().hex[:8]}")
client.on_connect = on_connect
client.on_message = on_message
client.connect("broker.connectmq.com", 1883, keepalive=60)
client.loop_start()

temperature = 24.0
try:
    while True:
        drift = random.uniform(-0.3, 0.35) - (0.25 if fan_on else 0.0)
        temperature = max(15.0, min(35.0, temperature + drift))
        payload = {
            "temperature": round(temperature, 2),
            "humidity": round(random.uniform(40, 55), 1),
        }
        client.publish(f"{PREFIX}/telemetry", json.dumps(payload), qos=0)
        time.sleep(2)
except KeyboardInterrupt:
    pass
finally:
    client.loop_stop()
    client.disconnect()

Çalışır halde bırakın. Çıktısını mosquitto_sub -h broker.connectmq.com -p 1883 -i watch-a7f3k2 -v -t 'connectmq/demo/a7f3k2/#' ile izleyebilirsiniz.

Node-RED Dashboard 2.0 Akışını Oluşturun

Adım 1: Telemetriye abone olun

Bir mqtt in node'u ekleyin. Sunucusu broker.connectmq.com, portu 1883 ve nr-dash-a7f3k2 gibi benzersiz bir client ID'si olan yeni bir mqtt-broker yapılandırma node'u oluşturun. Topic'i connectmq/demo/a7f3k2/room1/telemetry, QoS'u 1 ve çıktıyı a parsed JSON object olarak ayarlayın.

Adım 2: Payload'ı her widget için bölün

Göstergeler msg.payload içinde tek bir sayı beklerken, çok serili bir grafik seri adı msg.topic içinde olacak şekilde seri başına bir mesaj bekler. Üç çıkışlı bir function node'u ikisini de yapar:

// Function node "split telemetry" - Outputs değerini 3 yapın
const t = Number(msg.payload.temperature);
const h = Number(msg.payload.humidity);

if (Number.isNaN(t) || Number.isNaN(h)) {
    node.warn("Unexpected payload: " + JSON.stringify(msg.payload));
    return null;
}

return [
    { payload: t },                       // çıkış 1 -> sıcaklık göstergesi
    { payload: h },                       // çıkış 2 -> nem göstergesi
    [                                      // çıkış 3 -> grafik, iki seri
        { topic: "Temperature (C)", payload: t },
        { topic: "Humidity (%)", payload: h }
    ]
];

Bir çıkış yuvasının içinde dizi döndürmek, o porttan birbiri ardına birden fazla mesaj gönderir.

Adım 3: Göstergeleri ekleyin

İki ui-gauge node'u bırakın ve onları 1. ve 2. çıkışlara bağlayın. İlkinde, Group yanındaki kaleme tıklayarak "Room 1" adlı yeni bir grup ekleyin; bu aynı zamanda sayfayı ve tabanı da oluşturur. Faydalı ayarlar:

• Tür: sıcaklık için "Gauge 3/4"; kompakt bir görünüm tercih ederseniz nem için "Tile" ya da "Battery" stili.
• Aralık: sıcaklık için 0 ile 40, nem için 0 ile 100.
• Segmentler: 0'dan itibaren yeşil, 26'dan itibaren turuncu, 30'dan itibaren kırmızı; böylece rengin kendisi durumu anlatır.
• Birimler: °C ve %.

Adım 4: Bir çizgi grafik ekleyin

3. çıkışı aynı gruptaki bir ui-chart node'una bağlayın. "Line" türünü seçin, Series değerini msg.topic olarak bırakın ve X'i zaman damgası olarak bırakın; böylece her nokta geldiği anda damgalanır. Nokta sınırları altında son 300 noktayı ya da son bir saati tutun. Sınır olmadan, uzun süre çalışan bir pano bellekte büyümeye devam eder.

Dashboard 2.0'daki grafik verisi Node-RED'in belleğinde yaşar; bu yüzden bir yeniden başlatma onu boşaltır. Node-RED grafik geçmişi üzerine devam rehberi, bu verinin nasıl kalıcı hale getirilip yeniden oynatılacağını gösteriyor.

Adım 5: Komut yayınlayan bir kontrol ekleyin

Gruba "Fan" etiketli bir ui-switch ekleyin. Açık payload'ını ON dizesine, kapalı payload'ını OFF dizesine ayarlayın. Onu topic'i connectmq/demo/a7f3k2/room1/fan/set, QoS'u 1 ve retain'i kapalı olan bir mqtt out node'una bağlayın. Komutlar retained olmamalıdır: retained bir ON, cihaz her yeniden bağlandığında, saatler sonra bile, ona yeniden oynatılır.

Adım 6: Gerçek cihaz durumunu yansıtın

Yalnızca kullanıcının tıkladığını gösteren bir anahtar yanıltabilir. Cihaz çevrimdışıysa, fan kapalıyken anahtar "açık" der. Bunu, cihazın onaylanmış durumunu anahtara geri besleyerek düzeltin:

1. connectmq/demo/a7f3k2/room1/fan/state üzerinde, çıktısı UTF-8 dize olan ikinci bir mqtt in node'u ekleyin.
2. Onu aynı ui-switch node'unun girişine bağlayın.
3. Anahtar ayarlarında giriş mesajlarının çıkışa aktarılmadığından emin olun. Aksi halde her durum güncellemesi yeni bir komut olarak yeniden yayınlanır ve bir döngü oluşturursunuz.

Simülatör durumu retained olarak yayınladığı için yeni açılmış bir pano ya da yeniden başlatılmış bir Node-RED, doğru konumu hemen gösterir.

Adım 7: Deploy edin ve sayfayı açın

Deploy düğmesine tıklayın ve http://localhost:1880/dashboard adresini açın. Göstergeler her iki saniyede bir hareket eder, grafik iki çizgi çizer ve fanı açıp kapatmak birkaç okuma sonra sıcaklık trendini aşağı doğru çevirir.

MQTT Panoları için Widget Başvurusu

Daha büyük projeler için, KPI'ları widget'lara ulaşmadan önce hesaplayan OEE panosu örneğine ve konum verisi için worldmap eğitimine göz atın.

Yaygın Sorunlar ve Çözümleri

1. Widget'lar hiç güncellenmiyor. mqtt in node'unun durumunu kontrol edin. "connecting" yazıyorsa client ID başka bir istemci tarafından kullanılıyor olabilir; onu benzersiz yapın.
2. Gösterge NaN gösteriyor veya sıfırda kalıyor. Payload göstergeye bir nesne olarak ulaşmış. Göstergeye yalnızca bir sayının gittiğinden emin olun.
3. Grafik tek bir birleşik çizgi çiziyor. Her mesaj aynı msg.topic değerini taşıyor. Her değer için ayrı bir seri adı ayarlayın.
4. Anahtar titriyor veya komutlar tekrarlanıyor. Durum mesajları geri beslenirken pass-through etkin. Onu devre dışı bırakın.
5. Sayfaya her yerden erişilebiliyor. Dashboard 2.0'da varsayılan olarak oturum açma yoktur. Dışarı açmadan önce Node-RED'i kimlik doğrulamanın ya da bir ters proxy'nin arkasına koyun.
6. Pano LAN'da çalışıyor ama uzaktan çalışmıyor. 1880 portu genellikle engellidir; portu açmak yerine sayfayı HTTPS'li bir proxy üzerinden yayınlayın.

Demodan Üretime

Herkese açık test broker'ı bu eğitim için harikadır, ancak verileri herkese görünür ve istemci başına hız sınırları vardır. Gerçek bir kurulum için aynı mqtt-broker yapılandırma node'unu 8883 portunda kimlik bilgileri ve TLS kullanan özel bir broker'a yönlendirin. Bir bulut MQTT broker, birden fazla binadaki cihazların tek bir Node-RED panosunun okuyabileceği tek bir yere yayın yapmasını da sağlar. Sertifikaları ilk kez yapılandırıyorsanız Node-RED MQTT TLS rehberi bunu adım adım ele alıyor.

ConnectMQ ile portaldan üretilen kullanıcı adını, parolayı ve client ID'yi alırsınız; akıştaki tek değişiklik yapılandırma node'udur. Demo ön ekini kaldırdığınızda bu eğitimdeki her widget, function ve topic aynı kalır. Yönetilen bir MQTT broker tercih etmek, panonuzla aynı makinede Mosquitto çalıştırma ve yamalama ihtiyacını da ortadan kaldırır.

Node-RED Panonuzu ConnectMQ Üzerinde Çalıştırın

app.connectmq.com adresinde ücretsiz bir hesap oluşturun, kredi kartı gerektirmeyen Serverless (Free) planını seçin ve bir broker oluşturun. Kimlik bilgilerini Node-RED yapılandırma node'unuza yapıştırın, TLS ile 8883 portuna geçin; Dashboard 2.0 sayfanız artık özel, şifrelenmiş veriyi okuyor. ConnectMQ portalının tarayıcı içi MQTT istemcisi, sayfayı tasarlarken fan topic'ine test komutları göndermek için kullanışlıdır.

Sık Sorulan Sorular

Node-RED Dashboard ile Dashboard 2.0 arasındaki fark nedir?

Orijinal node-red-dashboard kullanımdan kaldırılmıştır ve AngularJS üzerine kuruludur. Dashboard 2.0 (@flowfuse/node-red-dashboard), Vue üzerine kurulu ve bakımı sürdürülen yerine geçen pakettir; tanıdık gelecek bir sayfa, grup ve widget yapısına sahiptir.

Node-RED Dashboard 2.0 adresi nerede?

Varsayılan olarak pano http://<node-red-host>:1880/dashboard adresinde sunulur. Yolu ui-base yapılandırma node'unda değiştirebilirsiniz.

Dashboard 2.0 MQTT komutları gönderebilir mi?

Evet. Bir ui-switch, ui-button ya da ui-slider node'unu bir mqtt out node'una bağlayın. Arayüzün yalnızca son tıklamayı değil gerçeği göstermesi için cihazın onaylanmış durumunu widget'a geri besleyin.

Node-RED'i yeniden başlattıktan sonra grafiğim neden boşalıyor?

Grafik verisi bellekte tutulur. Geçmişi yeniden başlatmalar boyunca korumak için okumaları context depolamaya ya da bir veritabanına kaydedin ve başlangıçta yeniden oynatın.