Skip to Content
AppTemplateUI-Widgets

UI-Widgets

UI-Widgets sind Dashboard-2 Komponenten, die mit Vue.js 3 entwickelt und über Vite gebaut werden. Sie erscheinen als Nodes im Node-RED Editor und rendern interaktive UI-Elemente im Dashboard.

Technologie-Stack

  • Vue.js 3 — Reaktives Frontend-Framework
  • Vuex 4 — State Management
  • Vite 5 — Build-Tool mit Hot Module Replacement
  • Socket.io — Echtzeit-Kommunikation zwischen Node-RED und Widget

Architektur eines Widgets

Ein Dashboard-2 Widget besteht aus vier Teilen:

DateiBeschreibung
nodes/ui-*.jsBackend-Node: Registrierung bei Dashboard-2
nodes/ui-*.htmlEditor-Oberfläche in Node-RED
ui/components/*.vueVue.js Frontend-Komponente
ui/exports/*.jsVite Entry Point für den Build

Beispiel: Hello Widget

Vue-Komponente (ui/components/Hello.vue)

<template>
  <div>
    <h2>{{ label }}</h2>
    <p>Letzte Nachricht: {{ message }}</p>
    <button @click="sendAction">Senden</button>
  </div>
</template>
 
<script>
export default {
  name: 'UIHello',
  props: ['id', 'label'],
  computed: {
    message() {
      return this.$store.state.messages[this.id] || 'Keine Nachricht';
    }
  },
  methods: {
    sendAction() {
      this.$socket.emit('widget-action', this.id, { payload: 'Hello!' });
    }
  }
}
</script>

Backend-Node (nodes/ui-hello.js)

module.exports = function(RED) {
  function UIHelloNode(config) {
    RED.nodes.createNode(this, config);
    const node = this;
 
    // Bei der Dashboard-2 Gruppe registrieren
    const group = RED.nodes.getNode(config.group);
    if (!group) return;
 
    // Widget-Events verarbeiten
    group.register(node, config, {
      onAction: function(msg) {
        node.send(msg);
      },
      onInput: function(msg) {
        // Nachricht an das Widget senden
      }
    });
  }
 
  RED.nodes.registerType("ui-hello", UIHelloNode);
}

Vite Entry Point (ui/exports/ui-hello.js)

import UIHello from '../components/Hello.vue'
export default UIHello

Namenskonvention

Das Paket für Dashboard-2 Widgets muss mit node-red-dashboard-2- beginnen. Dies wird in der package.json konfiguriert:

{
  "name": "@5minds/node-red-dashboard-2-myproject-package"
}

Widget-Registrierung in package.json

Widgets müssen sowohl als Node als auch als Dashboard-2 Widget registriert werden:

{
  "node-red": {
    "nodes": {
      "ui-hello": "nodes/ui-hello.js",
      "ui-thermo": "nodes/ui-termo.js"
    }
  },
  "node-red-dashboard-2": {
    "widgets": {
      "ui-hello": {
        "output": "ui/widgets/ui-hello.umd.js"
      },
      "ui-thermo": {
        "output": "ui/widgets/ui-thermo.umd.js"
      }
    }
  }
}

Build-Prozess

Die Widgets werden mit Vite als UMD-Module gebaut:

cd apps/lowcode/src
npm install
npm run build          # Alle Widgets bauen
npm run build:hello    # Nur Hello-Widget
npm run build:thermo   # Nur Thermometer-Widget

Die Vite-Konfiguration (vite.config.mjs) erzeugt UMD-Bundles, die von Dashboard-2 zur Laufzeit geladen werden. Vue und Vuex werden als externe Abhängigkeiten behandelt.

Custom NodesPlugins