Buat Dashboard Gauge & Trend Chart Real-Time di Node-RED

Data yang hanya muncul di log Debug tidak banyak membantu operator di lapangan. Supaya benar-benar berguna, data sensor perlu ditampilkan dalam bentuk visual yang mudah dibaca sekilas — di sinilah node-red-dashboard berperan. Artikel ini membahas cara membuat gauge dan trend chart real-time yang siap dipakai di ruang kontrol.

Instalasi node-red-dashboard

Sama seperti node-red-contrib-modbus, node-red-dashboard diinstall via menu Manage Palette di editor Node-RED. Cari “node-red-dashboard” pada tab Install, lalu klik install. Setelah selesai, akan muncul kategori node baru bernama dashboard di palet kiri, berisi node seperti gauge, chart, text, button, dan slider.

Setelah instalasi, tab baru bernama Dashboard akan muncul di sidebar kanan editor Node-RED — di sinilah Anda mengatur layout, membuat grup, dan menyusun tab untuk tampilan dashboard.

Menyusun Struktur Dashboard: Tab dan Grup

Sebelum menambahkan widget, sebaiknya rencanakan struktur dashboard terlebih dahulu:

• Tab — halaman utama, misalnya “Monitoring Produksi” atau “Tekanan & Suhu”.
• Group — pengelompokan widget dalam satu tab, misalnya grup “Line 1” dan “Line 2” untuk memisahkan data per lini produksi.
• Widget — komponen visual individual seperti gauge, chart, atau angka.

Struktur yang rapi sejak awal akan memudahkan penambahan widget baru di kemudian hari tanpa harus menata ulang dashboard dari nol.

Membuat Gauge untuk Nilai Real-Time

Gauge cocok untuk menampilkan nilai instan seperti tekanan, suhu, atau level saat ini. Drag node gauge ke canvas, hubungkan dari output flow Modbus-Read (atau function scaling) yang sudah dibuat di artikel sebelumnya, lalu konfigurasi:

• Type — pilih gauge, donut, atau compass sesuai preferensi visual.
• Range — atur nilai minimum dan maksimum, misalnya 0-10 bar.
• Color zones — atur warna berdasarkan rentang nilai, misalnya hijau untuk normal, kuning untuk warning, merah untuk kondisi kritis.
• Label & Unit — tambahkan label deskriptif dan satuan seperti “Tekanan (bar)”.

Membuat Trend Chart untuk Data Historis

Berbeda dari gauge yang menampilkan nilai sesaat, chart menampilkan tren data dari waktu ke waktu — penting untuk melihat pola atau mendeteksi anomali. Drag node chart ke canvas dan hubungkan ke sumber data yang sama, lalu atur:

• Type — line chart untuk tren kontinu, atau bar chart untuk data diskrit.
• X-axis — atur rentang waktu yang ditampilkan, misalnya 10 menit terakhir.
• Y-axis — sesuaikan skala otomatis atau manual sesuai rentang data.
• Multiple series — jika ingin menampilkan beberapa sensor sekaligus dalam satu chart, gunakan msg.topic yang berbeda untuk tiap sumber data.

Contoh Flow Lengkap: Dari Sensor ke Dashboard

[Modbus-Read] → [Function: scaling] → [gauge]
                                    → [chart]
                                    → [Function: cek alarm] → [debug]

Satu output dari node Function scaling bisa dihubungkan ke beberapa node sekaligus (gauge, chart, dan pengecekan alarm) karena Node-RED mendukung percabangan koneksi dari satu output node.

Tips Membuat Dashboard yang Enak Dibaca Operator

• Batasi jumlah widget per layar — terlalu banyak angka di satu layar justru membuat operator sulit fokus pada yang penting.
• Gunakan warna secara konsisten — hijau untuk normal, kuning untuk warning, merah untuk alarm, di seluruh dashboard.
• Kelompokkan berdasarkan area/proses — bukan berdasarkan jenis sensor, supaya operator bisa langsung fokus ke satu lini produksi.
• Uji di layar yang sama dengan ruang kontrol — resolusi dan ukuran layar bisa mempengaruhi keterbacaan gauge dan chart.

Dengan dashboard gauge dan chart yang sudah berjalan, langkah berikutnya adalah menyimpan data historis ini secara lebih permanen menggunakan InfluxDB dan memvisualisasikannya lebih lanjut dengan Grafana — dibahas di artikel selanjutnya.

Menambahkan Widget Interaktif: Button, Slider, dan Notifikasi

Selain gauge dan chart yang bersifat read-only, node-red-dashboard juga menyediakan widget interaktif yang memungkinkan operator memberi perintah langsung dari dashboard, misalnya mengaktifkan pompa atau mengubah setpoint tanpa harus membuka panel PLC secara fisik.

• ui_button — cocok untuk perintah on/off sederhana, seperti menyalakan motor atau mereset alarm.
• ui_slider — berguna untuk mengatur nilai numerik secara manual, misalnya setpoint suhu atau kecepatan konveyor.
• ui_switch — cocok untuk kondisi dua status (auto/manual), dengan tampilan toggle yang familiar bagi operator.
• ui_toast/ui_notification — menampilkan notifikasi pop-up singkat di layar dashboard saat terjadi kondisi tertentu, misalnya alarm suhu tinggi.

Dengan demikian, dashboard tidak hanya berfungsi sebagai layar monitoring pasif, melainkan juga sebagai panel kontrol sederhana yang terintegrasi langsung dengan flow Node-RED yang membaca dan menulis data ke PLC.

Mengatur Layout Responsif untuk Akses dari Tablet dan HP

Karena operator di lantai produksi sering berpindah tempat, dashboard sebaiknya juga bisa diakses dengan nyaman dari tablet atau smartphone, bukan hanya dari layar komputer di ruang kontrol. Oleh karena itu, pengaturan layout groups dan ukuran widget perlu diperhatikan sejak awal.

Beberapa tips praktis untuk layout responsif: gunakan lebar widget dalam satuan grid (bukan piksel tetap) supaya otomatis menyesuaikan ukuran layar, kelompokkan informasi paling penting (alarm, status utama) di bagian paling atas tab, dan batasi jumlah widget per grup agar tidak perlu scroll berlebihan di layar kecil. Selanjutnya, uji tampilan dashboard langsung dari browser HP sebelum benar-benar digunakan di lapangan, karena preview di layar PC seringkali terlihat rapi namun berantakan saat diakses dari layar yang lebih kecil.

📌 Call to Action

• Siap mulai membangun dashboard monitoring industri Anda sendiri? Dapatkan modul konverter Modbus RTU sebagai titik awal proyek Anda → tokopedia.com/bisaioti
• Ingin dipandu dari instalasi hingga dashboard benar-benar berjalan? Ikuti kelas “Node-RED untuk Monitoring Industri” → bisaioti.com/lab