Donnerstag, 3. Mai 2018

Objekte mit der Maus bewegen Teil II

😉 Neues 5-Tages-Seminar: Framework PCE.js aus der erfolgreichen Serie:

Neu: Kursinfo:

 

Objekte mit der Maus bewegen

Automatisieren mit dem Internet

  • Erstellen Sie dynamische Webanwendung mit node.js und dem Framework PCE.js.

  • Verwandeln Sie eine Webseite schnell zur aktiven HMI oder IoT-Netzwerk mit SVG-Objekten. 

  • Implementierten sie künstliche Intelligenz durch steuerbare Inline-Run-Code Scripte.

  • Erstellen Sie eine Funktionsdatenbank für die Objekt-Kommunikation. 

  •  Anwendungen aus dem Bereich PCE, wie z. B.  P&ID, Grafcet oder IEC61131 können mit dem Framework schnell und einfach integriert werden.

  • PCE.js zeigt eine völlig neue Idee, Webseiten aktiv und dynamisch zu gestalten.

  • Nachhaltiger Produktschutz durch Verschlüsselung der inline-Scripte in der Webanwendung.

  • Private-Server ermöglicht Unabhängigkeit zur kommerziellen Cloud.


Kurs-Voraussetzungen/Merkmale:

  • Ohne Fleiß kein Preis und Programmierkenntnisse in Java-Script oder C++/C#
  • Bestens geeignet für Umsteiger von C++/C# nach JS (ECMAScript)
  • Anwendungen nur über Klassenstrukturen, also ab ECMA6 (C++-Stil)
  • Keine HTML- und CSS-Kenntnisse erforderlich
  • Eigener PC mit vorinstallierter Software (Note.js, Google Chrom, Texteditor)
  • Kurseinstieg ab dem 3. Kurstag ist möglich

Kurs-Ziele:

  • Anwendung und Erweiterung des bestehenden Framework PCE.js
  • Handhabung einer dynamischen Webseite mit JS ohne HTML-Details
  • Servereigenschaften mit Node.js für PCE-Objekte erstellen
  • Anwendungen durch Klassenstrukturen (Vererbung) mit JS
  • SVG-Objekte erzeugen und mit der Maus bewegen
  • Dynamische SVG-Templates erstellen (DOM-Funktionen)
  • Ereignisgesteuerte Programmierung für die Menüführung
  • Inline-Scripte (Regeln) und deren Anwendung
  • Funktionsdatenbank und das Prinzip der KI-Verteilung
  • SVG-Templates im RUN-Modus testen
  • Selbständige Entwicklungstätigkeit einer Webapplikation mit dem Framework
  • Anwendungen im Internet via IoT und Industrie 4.0 für effizientes Projektieren mit dem Framework PCE.js



  • Bild 1: Das PCE.js Framework und seine möglichen Anwendungsgebiete

https://www.youtube.com/watch?v=2QHF3RGrGOo


Einleitung und Seminarbeschreibung

 

PCE steht für Process-Control-Engineering und gewinnt durch die Webtechnologie wieder mehr an Aufmerksamkeit und damit auch an Bedeutung für ein neues und modernes Publikum. Die Begriffe HMI (Human-Machine Interface) oder zu Deutsch MMS (Mensch-Maschine-Schnittstelle), stammen aus Zeiten der Visualisierung (SKADA) und sind Anwendungen für die industrielle Automatisierung, welche mittels eines Gerätes (CPE, nicht mit PCE zu verwechseln) und einer dort installierten Software die Verbindung zwischen Mensch und Maschine visualisieren und ermöglichen soll.
Eigentlich ist das traditionelle Thema HMI für Anwender mit Blick auf Web-Anwendungen nicht nur langweilig, sondern auch höchst kompliziert. Die Prozess-Steuerung, welche letztendlich durch die Kontrolle einer Applikation in einer SPS die entsprechende Sichert zur Anlage garantiert, ist ein ganz wichtiger Faktor zum Thema PCE und gestaltet die Kopplung zur HMI oft äußerst komplex und kostenintensiv.

Nun - solche Erläuterungen  und Spezifikationen (wie im oberen Abschnitt dargestellt) sind weiterhin gültig, aber nicht vollständig in das heutige Geschehen mit dem Internet einzugliedern, denn die Zeiten und damit auch die Anwendungen und deren Protokolle, haben sich in den letzten Jahren durchgängig und deutlich verändert.

Neue Geräte (IoT-fähige CPEs) können über die Web-Technologie und dem Internet nicht nur einen Service für Personen anbieten, sondern ermöglichen auch über einen Browser ein Smartphone oder ein Tablett als Web-Panel zu nutzen. Allerdings betrachten die meisten Anwender dieser Geräte nicht mehr unter dem Gesichtspunkt HMI, sondern allgemein als Webapplikation.  Und diese hat natürlich überwiegend kostenfreien Charakter.

Und damit sind wir beim Thema PCE.js-Framework angekommen. Wir, das sind die Kursteilnehmer und Referenten, vergessen alles was uns an Konzepte zur Erstellung einer Webseite für Industrieanwendungen (HMI/Iot) über HTML, CSS und XML (AJAX) erinnert.

Zielsetzung ist es, uns auf eine moderne und schlanke Webanwendung im  Sinne Web-PCE zu konzentrieren. Es handelt sich hier um die Umsetzung bewährter Techniken in  eine moderne Webtechnologie. Um das deutlich zu machen, handelt es sich nicht nur um die Erstellung einer dynamischen Webseite oder das Ein- und Ausschalten der Kaffee-Maschine über eine Cloud, sondern die Anwendung einer dynamischen Webseite mit JavaScript und Node.js sowie künstlicher Intelligenz (KI) durch sogenannte steuerbare inline-Scripte. Ähnlich wie beim Arduino - einfach, schnell und effizient!

So erarbeiten wir uns eine erste Webseite, welche es uns erlaubt eigene Objekte in ein Top-Menü zu organisieren, von dem aus wir dann die Objekte in die leere Projektseite (Web-Display)  mittels Maus plazieren. Eben - Objekte mit der Maus bewegen :) -  Die so gezeichnete Webseite wird dann Schritt für Schritt als Web-Applikation  vervollständigt und schließlich durch die Integration der Inline-Scripte steuerbar gemacht, sodass diese vorerst in einer Simulation getestet werden können. Nachdem der Test zufriedenstellend ist, wird die Anwendung auf dem Privatserver mit node.js getestet. Danach steht der Anwendung nichts mehr im Wege um damit ins Internet zu gehen

Damit wir diese Vision umsetzen und praktizieren können, brauchen wir kostenfreie Werkzeuge, ein wenig Geschick und ausreichend  Zeit mit ein wenig Geduld. Zudem benötigen wir eine klar beschriebene Aufgabenstellung für die Erstellung der eigenen Web-Applikation mit dem Framework PCE.js.

[PCE] Process Control Engineering (PCE-Kategorien, DIN EN 62424, DIN EN 60848, IEC 61131)
[CPE] Customer Premises Equipment nicht mit PCE zu verwechseln
[SCADA] Supervisory Control and Data Acquisition
[Regeln] Programmierungs-Anwendung der IoT-fähigen Geräte wie z. B. Flow-Diagramm, Grafcet oder IEC 61131



PCE.js und objektorientiertes Denken

Der Zusatz objektorientiert ist ein besonderes Merkmal zum Thema. Ein Bildchen, durch den Browser dargestellt und dann zur Visualisierung eine erstellte Verbindung zur Hardware, bedeutet noch lange nicht IoT oder PCE, sondern verkörpert in vielen Anwendungsfällen althergebrachte Technologie-Anwendungen, wie  z.B. eine klassische HMI. 
Was wir brauchen sind intelligente Objekte, die wir selbst erarbeiten. Dazu verwenden wir Java Script nach dem Standard EMCA 6/7. Das bedeutet, wir verwenden Klassenstrukturen (class).  Der Client und der Server werden in JS programmiert. HTML und CSS sind nicht berücksichtigt. Für den Client benötigen wir lediglich einen minimalen Aufwand in HTML, bestehend aus wenigen Zeilen. So erhalten wir eine Webseite, die wir dann schrittweise füllen und mit Leben erwecken werden.


Dazu benötigen wir für den ersten Schritt folgendes:
  • einen PC mit einem Betriebssystem
  • einem kostenfreien Editor (Nodepad++ oder Visual Studio Code)
  • node.js (Installation mit nodemoon.js)
  • einen ECMA6 - fähigen Browser (Google Chrome)
  • eine winzige HTML-Struktur
  • einen kleinen Webserver für den ersten Start
  • das Framework PCE.js
Warum HTML und Server? Nun kann man mit node.js auch Applikationen ohne einen Browser starten. Damit wir letztendlich einen Browser nutzen können, benötigen wir einen kleinen Webserver, welchen wir in JS mit node.js realisieren. Unsere Anwendung wird dann als JS-Webanwendung auf einem Client, sprich Browser gestartet. Diese Webseite wird dann intelligente und weniger intelligente SVG-Objekte beinhalten, welche wir mit der Maus in unsere Anwendung SVG-Editor zeichnen um diese danach als KI-Objekte über den Browser auszuführen zu können. Was immer das auch aussehen mag, wird unsere Vorgehensweise im Seminar folgende sein:
  • node.js installieren und nodemon integrieren (npm)
  • in JS einen kleinen Webserver starten
  • eine leere Webseite über ein HTML-Device erzeugen
  • Einführung in die Anwendung mit Klassen-Strukturen
  • SVG Grundelemente in JS erarbeiten und auf der Webseite abbilden
  • Eine Programmstruktur für eine Web-HMI planen  (Klassendiagramme, JSON-Datenstrukturen)
  • JS-Konzepte anwenden, damit grafische Objekte mit der Maus bewegt und gezoomt werden können
  • SVG-Objekte über den Server als Funktionsdatenbank handeln (speichern und lesen)
  • intelligente Objekte mit der inline-Script-Technologie erstellen und testen
  • Applikation mit "RunTest" testen
  • Regeln mittels inlineScripte erstellen (Beispielhaft für IEC61131und Grafcet) welche mit dem SVG-Bild fest verbunden werden und als Run Code agieren
  • Anwendungen mit praktischen Beispielen auf dem privat-Server wie Home-IoT und Industrie 4.0 mit der Simatic (c-Siemens AG) S7-PLC.


Dabei werden wir ausdrücklich objektorientiert arbeiten. JS wird (wie schon erwähnt) nicht als Prototyp-Programmierung angewendet, sondern in Klassenstrukturen programmiert. Für die serverseitige Anwendung benötigen Sie kein spezielles Wissen. Wenn Sie möchten nur installieren und anwenden -  das reicht schon. Die JS-Programmierung mit dem Framework PCE.js können Sie natürlich auch nur Anwenden und müssen diese nicht unbedingt verstehen.  Die Zielsetzung wird aber sein, das ganze Geschehen in JS zu verstehen und damit die neue, moderne Webprogrammierung zu erlernen.

Zum Schluss gehen wir auf die Funktionsbibliothek ein, die es uns ermöglicht eigene Javascripte als künstlicher Intelligenz unseren einzelnen Komponenten zuzuweisen. Diese können dann untereinander im Netzwerk kommunizieren, sodass auch andere API’s eingebunden werden können. Wenn Sie mehr zum Thema der Technologien der Zukunft erfahren möchten, wenden Sie sich bitte an die untenstehenden Kontaktdaten.


Kontaktaufnahme für Seminar-Veranstalter und Interessierte:
johanneshofer@tia-expert.com oder www.tia-expert.com