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
| Technologie | Version | Zweck |
|---|---|---|
| Vue.js | 3 | Reaktives Frontend-Framework |
| Vuex | 4 | State Management |
| Vite | 5 | Build-Tool (UMD-Bundles) |
| Socket.io | — | Echtzeit-Kommunikation |
Architektur eines Widgets
Ein Dashboard-2 Widget besteht aus vier Teilen:
| Datei | Verzeichnis | Beschreibung |
|---|---|---|
ui-*.js | nodes/ | Backend-Node: Registrierung bei Dashboard-2 |
ui-*.html | nodes/ | Editor-Oberfläche in Node-RED |
*.vue | ui/components/ | Vue.js Frontend-Komponente |
ui-*.js | ui/exports/ | Vite 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;
const group = RED.nodes.getNode(config.group);
if (!group) return;
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 UIHelloNamenskonvention
Das Paket für Dashboard-2 Widgets muss mit node-red-dashboard-2- beginnen:
{
"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-WidgetDie Vite-Konfiguration erzeugt UMD-Bundles, die von Dashboard-2 zur Laufzeit geladen werden. Vue und Vuex werden als externe Abhängigkeiten behandelt.