Dia antes primera install

This commit is contained in:
2025-12-08 15:20:28 -06:00
commit 1416478c9c
4130 changed files with 886376 additions and 0 deletions

View File

@@ -0,0 +1,100 @@
{
"ui_base": {
"label": {
"dashboard": "Dashboard",
"category": "Dashboard",
"title": "Titel",
"options": "Optionen",
"date-format": "Datumsformat",
"sizes": "Größen",
"horizontal": "Horizontal",
"vertical": "Vertikal",
"widget-size": "1x1 Widget-Größe",
"widget-spacing": "Widget-Abstände",
"group-padding": "Gruppenabstände innen",
"group-spacing": "Gruppenabstände außen",
"layout": "Layout",
"angular": "Angular",
"theme": "Theme",
"site": "Site"
},
"auto": "Auto",
"title": "Node-RED Dashboard",
"layout": {
"tab-and-link": "Tabs & Links",
"tab": "Tab",
"link": "Link",
"group": "Gruppe",
"edit": "Bearbeiten",
"spacer": "Abstand",
"layout": "Layout",
"layout-editor": "Dashboard Layout-Editor",
"width": "Breite",
"auto": "Automatische Größenanpassung",
"manual": "Manuelle Größenanpassung"
},
"theme": {
"style": "Stil",
"custom-profile": "Benutzerdefiniertes Profil",
"custom-profile-name": "Erscheinungsbild ohne Titel 1",
"base-settings": "Basiseinstellungen",
"page-settings": "Seiteneinstellungen",
"page": {
"title": "Hintergrund Titelleiste",
"page": "Hintergrund Seite",
"side": "Hintergrund Seitenleiste"
},
"group-settings": "Gruppeneinstellungen",
"group": {
"text": "Gruppentext",
"border": "Gruppenrand",
"background": "Gruppenhintergrund"
},
"widget-settings": "Widget-Einstellungen",
"widget": {
"text": "Widget-Text",
"colour": "Widget-Farbe",
"background": "Widget-Hintergrund"
}
},
"style": {
"light": "Hell (Standard)",
"dark": "Dunkel",
"custom": "Benutzerdefiniert",
"primary": "Primär",
"accents": "Akzente",
"background": "Hintergrund",
"warnings": "Warnungen",
"palette": "Hell / Dunkel"
},
"base": {
"colour": "Farbe",
"font": "Schriftart"
},
"font": {
"system": "System-Schriftart (Standard)"
},
"site": {
"title": "Node-RED Dashboard",
"date-format": "DD.MM.YYYY"
},
"title-bar": {
"show": "Titelleiste anzeigen",
"hide": "Titelleiste verbergen"
},
"swipe": {
"no-swipe": "Kein Wischen zwischen Tabs",
"allow-swipe": "Wischen zwischen Tabs zulassen"
},
"lock": {
"clicked": "Klicken, um das Seitenmenü anzuzeigen",
"locked": "Seitenmenü immer anzeigen",
"locked-icon": "Nur Icons anzeigen"
},
"temp": {
"allow-theme": "Node-RED-Erscheinungsbild",
"no-theme": "Angular-Erscheinungsbild in ui_template",
"none": "Angular-Erscheinungsbild"
}
}
}

View File

@@ -0,0 +1,24 @@
{
"ui_button": {
"label": {
"group": "Gruppe",
"size": "Größe",
"icon": "Icon",
"optionalIcon": "Optionales Icon",
"label": "Beschriftung",
"optionalLabel": "Optionale Beschriftung",
"tooltip": "Tooltipp",
"optionalTooltip": "Optionaler Tooltipp",
"color": "Farbe",
"optionalColor": "Optionale Text/Icon-Farbe",
"background": "Hintergrund",
"optionalBackgroundColor": "Optionale Hintergrundfarbe",
"whenClicked": "Sende beim Klicken:",
"payload": "Payload",
"topic": "Topic",
"emulateClick": "Emuliere einen Klick bei einer eingehenden Nachricht:",
"className": "Klasse",
"classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
}
}
}

View File

@@ -0,0 +1,25 @@
<script type="text/html" data-help-name="ui_chart">
<p>Zeichnet Eingangswerte in ein Diagramm, welches entweder ein zeitbasiertes Liniendiagramm,
ein Balkendiagramm (vertikal oder horizontal) oder ein Kreisdiagramm sein kann.</p>
<p>Jede eingehende <code>msg.payload</code>-Nachricht wird in einen Zahlenwert konvertiert.
Wenn die Konvertierung fehlschlägt, wird die Nachricht ignoriert.</p>
<p>Die Minimum- und Maximum-Werte für die <b>Y-Achse</b> sind optional.
Ohne diese wird das Diagramm automatisch anhand aller empfangenen Werte skaliert.</p>
<p>Mehrere Serien können im gleichen Diagramm angezeigt werden,
indem für jede Eingangsnachricht andere <code>msg.topic</code>-Werte verwendet werden.
Mit der Eigenschaft <code>msg.label</code> können mehrere Balken der selben Serie angezeigt werden.</p>
<p>Der Wertebereich der <b>X-Achse</b> wird durch ein Zeitfenster oder eine maximale Anzahl anzuzeigender Punkte vorgegeben.
Ältere Daten werden automatisch aus dem Diagramm entfernt.
Die Achsenbeschriftung kann mittels einer <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank">
Moment.js-zeitformatierten</a> Zeichenfolge benutzerdefiniert werden (z.B. D.M.Y für 21.3.2021).</p>
<p>Wird eine <code>msg.payload</code>-Nachricht mit einem leeren Array <code>[]</code> an den Eingang gesendet,
so wird das Diagramm gelöscht.</p>
<p><b><a href="https://github.com/node-red/node-red-dashboard/blob/master/Charts.md" target="_new">Hier</a></b>
sind weitere Informationen zum Vorformatieren von Daten verfügbar, um sie als vollständiges Diagramm zu übergeben.</p>
<p>Das <b>Leer-Text</b>-Feld kann verwendet werden, um den Text im Diagramm anzuzeigen, bevor gültige Daten empfangen wurden.
<p>Der <b>Beschriftung</b> kann auch durch eine Nachrichteneigenschaft festgelegt werden.
Dazu muss der Name der Eigenschaft in das Feld eingetragen werden, zum Beispiel <code>{{msg.topic}}</code>.</p>
<p>Der Node-Ausgang enthält ein Array des Diagrammstatus, das bei Bedarf gespeichert werden kann.
Wird dieses zum <code>ui_chart</code>-Node gesendet, so werden die gespeicherten Daten erneut angezeigt.</p>
<p>Wenn eine <b>Klasse</b> angegeben ist, wird sie der übergeordneten Karte hinzugefügt. Auf diese Weise können Sie CSS-Stile auf die ui-card und ihre untergeordneten Elemente anwenden. Die Klasse kann zur Laufzeit festgelegt werden, indem eine Zeichenfolgeneigenschaft <code>msg.className</code> festgelegt wird.</p>
</script>

View File

@@ -0,0 +1,56 @@
{
"ui_chart": {
"label": {
"group": "Gruppe",
"size": "Größe",
"label": "Beschriftung",
"optionalChartTitle": "Optionaler Diagrammtitel",
"type": "Typ",
"lineChart": " &#xf201; Liniendiagramm",
"barChart": " &#xf080; Balkendiagramm",
"barChartH": " &#xf080; Balkendiagramm (H)",
"pieChart": " &#xf200; Kreisdiagramm",
"polarAreaChart": " &#xf200; Polargebietskarte",
"radarChart": " &#xf200; Radarkarte",
"enlargePoints": "Punkte vergrößern",
"xAxis": "X-Achse",
"last": "Letzten",
"seconds": "Sekunden",
"minutes": "Minuten",
"hours": "Stunden",
"days": "Tage",
"weeks": "Wochen",
"or": "oder",
"points": "Punkte",
"xAxisLabel": "X-Beschriftung",
"HHmmss": "HH:mm:ss",
"HHmm": "HH:mm",
"yearMonthDate": "Jahr-Monat-Tag",
"dateMonth": "Tag/Monat",
"dayHHmm": "Wochentag HH:mm",
"custom": "benutzerdefiniert",
"automatic": "automatisch",
"asUTC": "als UTC",
"yAxis": "Y-Achse",
"min": "min",
"max": "max",
"legend": "Legende",
"none": "Keine",
"show": "Anzeigen",
"interpolate": "Interpolation",
"linear": "Linear",
"step": "Stufen",
"bezier": "Bezier",
"cubic": "Kubisch",
"cubicMono": "Kubisch-Mono",
"cutout": "Ausschnitt",
"useFirstColourForAllBars": "Erste Farbe für alle Balken verwenden",
"seriesColours": "Serienfarben",
"blankLabel": "Leer-Text",
"displayThisTextBeforeValidDataArrives": "Anzuzeigender Text bevor gültige Daten eintreffen",
"useDifferentColor": "Unterschiedliche Farben für Datenserie verwenden",
"className": "Klasse",
"classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
}
}
}

View File

@@ -0,0 +1,18 @@
<script type="text/html" data-help-name="ui_form">
<p>Fügt dem Dashboard ein Eingabeformular hinzu.</p>
<p>Der <code>ui_form</code>-Node ermöglicht die Eingabe mehrerer Werte durch den Benutzer.
Beim Klicken auf die Schaltfläche <b>Senden</b> wird ein Objekt als <code>msg.payload</code> versendet.</p>
<p>Über die Schaltfläche <b>+Element</b> können Eingabeelemente hinzugefügt werden.</p>
<p>Jedes Element enthält folgende Einstellmöglichkeiten:</p>
<ul>
<li><b>Beschriftung:</b> Beschriftung des Elements in der Benutzeroberfläche</li>
<li><b>Name:</b> Schlüssel (Variablennamen), mit dem der Eingabewert in <code>msg.payload</code> abgelegt wird</li>
<li><b>Typ:</b> Typ des Eingabeelements</li>
<li><b>Erforderlich:</b> Markierund des Eingabefeldes als erfolderliche Benutzereingabe</li>
<li><b>Zeilen:</b> Zeilenanzahl bei mehrzeiligen Texteingabefeldern</li>
<li><b>Entfernen:</b> Entfernung des Elements aus dem Formular</li>
</ul>
<p>Über <b>Topic</b> kann die Eigenschaft <code>msg.topic</code> optional festgelegt werden.</p>
<p>Die Schaltfläche <b>Abbrechen</b> kann ausgeblendet werden, indem sein Feld leer gelassen wird.</p>
<p>Wenn eine <b>Klasse</b> angegeben ist, wird sie der übergeordneten Karte hinzugefügt. Auf diese Weise können Sie CSS-Stile auf die ui-card und ihre untergeordneten Elemente anwenden. Die Klasse kann zur Laufzeit festgelegt werden, indem eine Zeichenfolgeneigenschaft <code>msg.className</code> festgelegt wird.</p>
</script>

View File

@@ -0,0 +1,35 @@
{
"ui_form": {
"label": {
"group": "Gruppe",
"size": "Größe",
"label": "Beschriftung",
"optionalLabel": "Optionale Beschriftung",
"formElements": "Formular- elemente",
"type": "Typ",
"required": "Erforderlich",
"rows": "UiZeilen",
"remove": "Entfernen",
"egName": "z.B. Name",
"egName2": "z.B. Name",
"text": "Text",
"multiline": "Mehrzeilig",
"number": "Zahl",
"email": "E-Mail",
"password": "Kennwort",
"checkbox": "Auswahlkästchen",
"switch": "Schalter",
"date": "Datum",
"time": "Zeit",
"element": "Element",
"buttons": "Schaltflächen",
"submitButtonText": "Text Absenden-Schaltfläche",
"cancelButtonText": "Text Abbrechen-Schaltfläche",
"topic": "Topic",
"optionalMsgTopic": "Optionaler msg.topic",
"splitLayout": "Platzieren sie die formularelemente in 2 spalten",
"className": "Klasse",
"classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
}
}
}

View File

@@ -0,0 +1,16 @@
{
"ui_group": {
"label": {
"name": "Name",
"tab": "Tab",
"width": "Breite",
"default": "Standard",
"group": "Gruppe",
"unassigned": "nicht zugewiesen",
"className": "Klasse",
"classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
},
"display-name": "Gruppenname anzeigen",
"collapse-name": "Gruppenreduzierung zulassen"
}
}

View File

@@ -0,0 +1,16 @@
{
"ui_link": {
"label": {
"name": "Name",
"link": "Link",
"icon": "Icon",
"open-in": "Öffnen im",
"new-tab": "neuen Tab",
"this-tab": "selben Tab",
"iframe": "iframe",
"className": "Klasse",
"classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
},
"tip": "Das <b>Icon</b> kann entweder ein <a href=\"https://klarsys.github.io/angular-material-icons/\" target=\"_blank\">Material-Design-Icon</a> (z.B. <code>check</code> oder <code>close</code>), ein <a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font-Awesome-Icon</a> (z.B. <code>fa-fire</code>) oder ein <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md\" target=\"_blank\">Wetter-Icon</a> (z.B. <code>wi-wu-sunny</code>) sein.</p><p>Des Weiteren können alle Google-Material-Icons verwendet werden, indem dem Icon-Namen <code>mi-</code> vorangestellt wird (z.B. <code>mi-videogame_asset</code>).</p>"
}
}

View File

@@ -0,0 +1,21 @@
{
"ui_tab": {
"label": {
"home": "Home",
"tab": "Tab",
"name": "Name",
"icon": "Icon",
"state": "Status",
"navmenu": "Nav. Menü",
"enabled": "Aktiviert",
"disabled": "Deaktivert",
"visible": "Sichtbar",
"hidden": "Versteckt"
},
"info": {
"disabled": " Tab im Dashboard deaktiviert.",
"hidden": " Tab im Nav.-Menü versteckt."
},
"tip": "Das <b>Icon</b> kann entweder ein <a href=\"https://klarsys.github.io/angular-material-icons/\" target=\"_blank\">Material-Design-Icon</a> (z.B. <code>check</code> oder <code>close</code>), ein <a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font-Awesome-Icon</a> (z.B. <code>fa-fire</code>) oder ein <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md\" target=\"_blank\">Wetter-Icon</a> (z.B. <code>wi-wu-sunny</code>) sein.</p><p>Des Weiteren können alle Google-Material-Icons verwendet werden, indem dem Icon-Namen <code>mi-</code> vorangestellt wird (z.B. <code>mi-videogame_asset</code>).</p>"
}
}

View File

@@ -0,0 +1,48 @@
<script type="text/html" data-help-name="ui_template">
<p>Das template-Widget kann alle gültigen HTML- und Angular/Angular-Material-Anweisungen enthalten.</p>
<p>Dieser Node kann verwendet werden, um ein dynamisches Benutzeroberflächenelement zu erstellen, dessen Erscheinungsbild
basierend auf der Eingangsnachricht geändert wird, und kann Nachrichten an Node-RED zurücksenden.</p>
<p><b>Zum Beispiel:</b><br>
<pre style="font-size:smaller;">
&lt;div layout=&quot;row&quot; layout-align=&quot;space-between&quot;&gt;
&lt;p&gt;The number is&lt;/p&gt;
&lt;font color=&quot;{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}&quot;&gt;
{{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}
&lt;/font&gt;
&lt;/div&gt;</pre>
Wird angezeigt, wenn die als <code>msg.payload</code> empfangene Zahl gerade oder ungerade ist.
Es wird auch die Farbe des Textes zu grün geändert, wenn die Zahl gerade ist, oder rot, wenn ungerade.</p>
<p>Das nächste Beispiel zeigt, wie eine eindeutige ID für Ihre Vorlage erstellt werden kann,
die Standardfarbe fürs Erscheinungsbild ausgewählt wird und wie auf eingehende Nachrichten geprüft werden kann.
<pre style="font-size:smaller;">
&lt;div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}"&gt;Some text&lt;/div&gt;
&lt;script&gt;
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg) {
// Do something when msg arrives
$("#my_"+scope.$id).html(msg.payload);
}
});
})(scope);
&lt;/script&gt;</pre>
Auf diese Weise erstellte Vorlagen können kopiert werden und bleiben unabhängig voneinander.</p>
<p><b>Senden einer Nachricht:</b><br>
<pre style="font-size:smaller;">
&lt;script&gt;
var value = "hello world";
// or overwrite value in your callback function ...
this.scope.action = function() { return value; }
&lt;/script&gt;
&lt;md-button ng-click=&quot;send({payload:action()})&quot;&gt;
Click me to send a hello world
&lt;/md-button&gt;</pre>
Zeigt einen Button an, welcher beim Klicken eine Nachricht mit Payload <code>'Hello world'</code> sendet.</p>
<p><b>Verwenden von <code>msg.template</code>:</b><br>
Der Vorlageninhalt kann auch über <code>msg.template</code> definiert werden.
So können beispielsweise externe Dateien verwendet werden.<br>
Die Vorlage wird bei eingehenden Nachrichten neu geladen, wenn sie verändert wurde.<br>
In das Vorlagefeld geschriebener Code wird ignoriert, wenn <code>msg.template</code> vorhanden ist.</p>
<p>Die folgenden Icon-Schriftarten sind verfügbar: <a href=\"https://klarsys.github.io/angular-material-icons/\" target=\"_blank\">Material-Design-Icon</a> (z.B. <code>check</code> oder <code>close</code>), ein <a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font-Awesome-Icon</a> (z.B. <code>fa-fire</code>) oder ein <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md\" target=\"_blank\">Wetter-Icon</a> (z.B. <code>wi-wu-sunny</code>) sein.</p><p>Des Weiteren können alle Google-Material-Icons verwendet werden, indem dem Icon-Namen <code>mi-</code> vorangestellt wird (z.B. <code>mi-videogame_asset</code>).</p>
<p>Wenn eine <b>Klasse</b> angegeben ist, wird sie der übergeordneten Karte hinzugefügt. Auf diese Weise können Sie CSS-Stile auf die ui-card und ihre untergeordneten Elemente anwenden. Die Klasse kann zur Laufzeit festgelegt werden, indem eine Zeichenfolgeneigenschaft <code>msg.className</code> festgelegt wird.</p>
</script>

View File

@@ -0,0 +1,19 @@
{
"ui_template": {
"label": {
"type": "Vorlagentyp",
"local": "Widget in Gruppe",
"global": "Hinzugefügt zur <head>-Sektion der Seite",
"group": "Gruppe",
"size": "Größe",
"name": "Name",
"pass-through": "Nachrichten vom Eingang weiterleiten",
"store-state": "Ausgehende Nachrichten speichern",
"template": "Vorlage",
"expand": "Erweitern",
"resend": "Letzten Wert beim Aktualisieren neuladen",
"className": "Klasse",
"classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
}
}
}

View File

@@ -0,0 +1,29 @@
<script type="text/html" data-help-name="ui_ui_control">
<p>Ermöglicht die dynamische Steuerung des Dashboards.</p>
<p>Die Standardfunktion besteht darin, den aktuell angezeigten Tab zu ändern.
<code>msg.payload</code> sollte entweder ein Objekt der Form <code>{"tab":"my_tab_name"}</code> sein,
oder einfach der <b>Tab-Name</b> oder ein <b>numerischer Index</b> (ab 0) vom Tab oder Link, der angezeigt werden soll.</p>
<p>Das Senden eines leeren Namens "" aktualisiert die aktuell angezeigte Seite.
Es kann auch "+1" für den nächsten und "-1" für den vorherigen Tab gesendet werden.</p>
<p>Dashboard Seiten (also Tabs) können durch Senden eines <code>msg.payload</code>-Objektes im Format
<pre>{"tabs": {"hide": "tab_name_to_hide", "disable": ["secret_tab", "unused_stuff"]}}</pre> gesteuert werden.
Es sind zwei Zustände verfügbar: <b>show</b>/<b>hide</b> und <b>enable</b>/<b>disable</b></p>
<p>Die Sichtbarkeit von individuellen Widget-Gruppen können durch folgenden Payload gesteuert werden:
<pre>{"group": {"hide": ["tab_name_group_name_with_underscores"], "show": ["reveal_another_group"], "focus": true}}</pre>
<b>focus</b> ist optional und sorgt dafür, dass zu der richtigen Gruppe gescrollt wird.
Es können auch folgende Eigenschafen wie `open` und `close` verwendet werden, um den Status einer Gruppe zu setzen.
Die Gruppennamen sind die IDs der Gruppen und setzen sich aus <i>tab name</i> plus <i>group name</i> zusammen,
zusammengeschrieben mittels Leerzeichen-ersetzender Unterstriche.</p>
<p>Wenn ein Browser die Verbindung aufbaut oder verliert, den Tab wechselt oder eine Gruppe auf- bzw. zuklappt,
sendet dieser Node eine <code>msg</code> mit folgendem Inhalt:</p>
<ul>
<li><code>payload</code> - <i>connect</i>, <i>lost</i>, <i>change</i> oder <i>group</i>
<li><code>socketid</code> - die ID des Sockets (dies ändert sich jedes Mal, wenn der Browser die Seite neu lädt)
<li><code>socketip</code> - die IP-Adresse, von der die Verbindung stammt
<li><code>tab</code> - die Nummer des Tabs (nur für 'change' Ereignisse)
<li><code>name</code> - der Name des Tabs (nur für 'change' Ereignisse)
<li><code>group</code> - der Name der Gruppe (nur für 'group' Ereignisse)
<li><code>open</code> - der Status der Gruppe (nur für 'group' Ereignisse)
</ul>
<p>Optional - Nur neue Verbindungen melden - nützlich, um ein erneutes Senden von Daten an einen neuen Client auszulösen, ohne dass andere Ereignisse herausgefiltert werden müssen.</p>
</script>

View File

@@ -0,0 +1,10 @@
{
"ui_ui_control": {
"label": {
"name": "Name"
},
"placeholder": {
"name": "Name"
}
}
}