Maschinen-Bedienpanel mit NodeRED

Ondics GmbH, November 2019

Aufgabenstellung

An einer Maschine soll über ein Bedien-Panel (z.B. fest montiertes Android-Tablet) verschiedene Zustände erfasst werden:

Rüsten
Auftragsstart
Auftragsende
Fehlerzustände

Voraussetzungen

NodeRED
Verwendete Nodes: Dashboard, Function, Inject, Template, Debug

Kenntnisse in Function-Nodes (JavaScript) sind hilfreich. Zudem wird hier alles detailliert erklärt und kann durch "try & error" beliebig abgeändert werden.

Feedback und Anmerkungen

Gerne diskutieren wir über diese Seite mit Anwendern:

klappt alles? Ist diese Beschreibung hilfreich?
welche Verbesserungen sind sinnvoll?
wie und wohin werden die Formularwerte abtransportiert?
wie wird das Formular an der Maschine gezeigt?

Hierzu haben wir das ScaleIT-Forum eingerichtet.

Flow-Übersicht

Flow-Komponenten

Uhrzeit-Anzeige

Die uhrzeit-Anzeige sorgt für eine Darstellung der Uhrzeit mit Ziffern.

Node Inject

Output: Es wird der Unix-Timestamp (Sekunden seit 1.1.1970) mit Millisekunden-Genauigkeit geliefert.

Function Node

Funktion: Umwandlung in eine schöne Uhrzeit-Darstellung (als String). Der gelieferte Unix-Timestamp wird in Stunden, Minuten und Sekunden umgewandelt und in der Payload abgespeichert.

       // Das Date-Objekt ist Javascript-Standard
        var date = new Date(msg.payload);
        var hours = date.getHours();

        // Wir packen noch eine 0 davor, um nacher die letzten 2 Stellen darzustellen
        // Damit wird auch eine einstellige Zahl immer zweistellig mit führender Null dargestellt
        var minutes = "0" + date.getMinutes();
        var seconds = "0" + date.getSeconds();
    
        // Zeitausgabe im 10:30:23 Format
        msg.payload = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
        return msg;

Text Node

Funktion: Anzeige, mit eigenem Style für große Zahlen. Die Formatierung erfolgt mit dem Style-Template Node.

Node-RED Dashboard Buttons

Button Anzeige

Von den 4 Buttons bestehen 3 aus einer "button Node". Bei klick wird ein entsprechendes Objekt an die Payload weitergegeben:

Fehlerbutton

Der Fehlerbutton soll ein ausklappbares Formular beinhalten.

Das wird mit JQuery gemacht. Es könnte auch mit der in NodeRED integrierten Angular Bibliothek erledigt werden. Der zugehörige Html-Code wird in einem Template-Node untergebracht.

Template Node

   
        <md-button id="fehlerButton" class="md-raised md-button md-ink-ripple">Fehler</md-button> 
        <div id="fehlerFormular" style="display:none">
            <form method="POST">
                <label>Fehler: <br />
                    <select name="fehlerTyp" id="fehlerTypId">
                        <option>Fehlertyp 1</option>
                        <option>Fehlertyp 2</option>
                        <option>Fehlertyp 3</option>
                        <option>Fehlertyp 4</option>
                    </select>
                </label>
                <br />
                <label>Fehlerbeschreibung: <br />
                    <textarea name="fehlerText" id="fehlerTextId"></textarea>
                </label>
                <br />
                <md-button id="sendButton" ng-click="send({payload:action()})">Senden</md-button>
            </form>
        </div>

Im div #fehlerFormular wird zunächst das Formular ausgeblendet mit dem style "display:none"
Das Formular selber besteht aus einem Dropdown, einer Textarea und einem Button. Die zugewiesenen ID's werden für das Auslesen und Absenden der Daten verwendet (siehe unten)
Der Button wied mit der Angular-Action "ng-click" aktiviert. Die Funktion send(...) wird unten beschrieben

Skript (Angular & jQuery)

Dieser Teil befindet sich am Ende der Template Node des Fehlerbuttons. Innerhalb von Script-Tags

Aufbau des Skripts

   <script>
        // Angular: Die Formular-Action action() soll die Werte der
        // Felder auslesen und das Formular ausblenden
        this.scope.action = function() { 
            $("#fehlerFormular").hide();
            return {
                action: "fehler",
                fehlerTyp: $("#fehlerTypId").val(),
                fehlerText:$("#fehlerTextId").val()
            }
        }
        // JQuery
        $(document).ready(function(){
            // Jeder Klick auf den Fehler-Button blendet das
            // Formular ein bzw. aus
            $("#fehlerButton").click(function(){
              $("#fehlerFormular").toggle();
            });

            // Wenn der send-Button betätigt wird, werden alle
            // Felder des Firmulars zurückgesetzt
            $("#sendButton").click(function(){
                $('form').trigger("reset");
            });
        });
        </script>

Angular Teil:

Das Skript startet mit einem "Scope".

"Scope" dient zur Kommunikation zwischen Controller und View und die Funktion "action()" unter anderem dem Absenden.

Zuvor wurde dem Button für das Formular ein send() Befehl über ng-click übergeben. Dieser verweist auf die Funktion "action()".

Die Funktion beinhaltet neben der Ausgabe der Formulardaten in ein Objekt, auch das ausblenden des Formulars nach dem absenden.

Der div, der standardmäßig ausgeblendet ist, wird hierfür über die ID angesprochen und mit .hide() wieder ausgeblendet.
Zuletzt kommt der Teil, der die Fehlerdaten mit einem "return" in einem Objekt in die Payload speichert.

jQuery Teil

Der jQuery teil beginnt mit

   $(document).ready(function(){

Dies dient dazu, dass die auszuführende Aktion auch erst ausgeführt wird, wenn der Quelltext (DOM) der Website komplett geladen wurde. Die erste Funktion beginnt damit, dass der Fehler-Button (#fehlerButton) bei Klick den div (#fehlerFormular) mit der Funktion " .toggle " aus- und einklappt. Die zweite Funktion dient dazu, dass der Button der Form (#sendButton) bei einem Klick den Inhalt des Formulars, zurücksetzt ( .trigger("reset"); )

Style (template Node)

Aufbau des Styles

        <style>
        // Schriftgröße der Uhrzeit
        .value.ng-binding{
            font-size: 50px !important;
        }
        // Schriftgröße der Buttons
        .md-raised.md-button.md-ink-ripple{
            font-size: 20px !important;
        }
        // Größe des Fehlerbuttons soll wie die Größe der anderen Buttons sein
        #fehlerButton{
            height: 50% !important;
            width: 100% !important;
        }
        // In Template Nodes ist ein padding vorgesehen-> brauchen wir nicht
        .nr-dashboard-template.ng-scope._md.visible{
            padding: 0 !important;
        }
        </style>

Auswahl der zu formatierenden Bereiche

Um die richtigen Abschnitte zu Formatieren, wird im Browser zuvor mit dem Inspektor (F12) die Elemente untersucht um die entsprechenden Klassen herauszufinden.

Hinweise

Die Kennzeichnung mit "!important" bedeutet, dass der jeweilige Wert nicht durch andere Deklarierungen überschrieben werden kann.
Der Style kann über ein Template geändert werden, indem das Template auf den Typ "Added to site <head> section" gesetzt wird.

Bevor das Template allerdings auf "Added to site <head> section" gestellt wird, sollte eine Gruppe ausgewählt werden, diese Option ist nur Sichtbar, wenn der Template type noch auf "Widget in group" gestellt ist. Sollte keine Gruppe gesetzt werden, zeigt Node-RED eine Warnung an.

Login

Suche

ScaleIT - Industrie 4.0