Maschinen-Bedienpanel mit NodeRED

Aus ScaleIT Industrie 4.0 Wiki
Version vom 10. Dezember 2019, 08:23 Uhr von Admin (Diskussion | Beiträge)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)


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

MaschinenBedienpanelZiel1.png MaschinenBedienpanelZiel2.png

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

MaschinenBedienpanelFlow.png

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:

ButtonPayload.png

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.
TemplateTypeGroup.png