Video: Habr Admin Panel. Ermöglicht das Anpassen von Karma, das Bewerten und das Sperren von Benutzern.TL; DR: In diesem Artikel werde ich versuchen, ein Comic-Kontrollfeld für Habr mithilfe der industriellen Entwicklungsumgebung Webaccess / HMI Designer und des WebOP-Terminals zu erstellen.
Die Mensch-Maschine-Schnittstelle (HMI) ist eine Reihe von Systemen für die menschliche Interaktion mit gesteuerten Maschinen. Normalerweise wird dieser Begriff für industrielle Systeme verwendet, in denen sich ein Bediener und ein Bedienfeld befinden.
WebOP ist ein eigenständiges Industrieterminal zum Erstellen von Mensch-Maschine-Schnittstellen. Es wird verwendet, um Produktionssteuertafeln, Überwachungssysteme, Kontrollräume, Smart-Home-Steuerungen usw. zu erstellen. Es unterstützt den direkten Anschluss an Industrieanlagen und kann als Teil eines SCADA-Systems arbeiten.
WebOP Terminal - Hardware

Das WebOP-Terminal ist ein Computer mit geringem Stromverbrauch, der auf einem ARM-Prozessor basiert und in einem Einzelfall über einen Monitor und einen Touchscreen verfügt, um ein Programm mit einer in HMI Designer erstellten grafischen Oberfläche auszuführen. Je nach Modell verfügen die Terminals über verschiedene industrielle Schnittstellen an Bord: RS-232/422/485, einen CAN-Bus zum Anschließen an Fahrzeugsysteme, einen USB-Host-Anschluss zum Anschließen zusätzlicher Peripheriegeräte, einen USB-Client-Anschluss zum Anschließen des Terminals an einen Computer, Audioeingang und Audioausgang , MicroSD-Kartenleser für nichtflüchtige Speicher- und Übertragungseinstellungen.
Geräte werden als Budgetersatz für Monoblöcke für Aufgaben positioniert, für die keine leistungsstarken Prozessoren und die Ressourcen eines vollwertigen Desktop-Computers erforderlich sind. WebOP kann als eigenständiges Terminal zum Verwalten und Eingeben / Ausgeben von Daten, gepaart mit anderen WebOPs oder als Teil eines SCADA-Systems betrieben werden.
Das WebOP-Terminal kann direkt mit industriellen Geräten verbunden werdenPassive Kühlung und IP66-Schutz
Aufgrund der geringen Wärmeableitung werden einige WebOP-Modelle vollständig ohne aktive Luftkühlung hergestellt. Auf diese Weise können Sie das Gerät an Objekten montieren, die für den Geräuschpegel kritisch sind, und die Staubmenge reduzieren, die in das Gehäuse fällt.
Die Frontplatte ist lückenlos und fugenlos, hat die Schutzart IP66 und ermöglicht den direkten Kontakt mit unter Druck stehendem Wasser.
Rückseite des WOP-3100T-TerminalsNichtflüchtiger Speicher
Um Datenverlust zu vermeiden, verfügt WebOP über 128 KB nichtflüchtigen Speicher, der auf die gleiche Weise wie mit RAM betrieben werden kann. Es kann Zählerstände und andere kritische Daten speichern. Bei einem Stromausfall werden die Daten nach einem Neustart gespeichert und wiederhergestellt.
Remote-Update
Das auf dem Terminal ausgeführte Programm kann remote über ein Ethernet-Netzwerk oder über serielle RS-232/485-Schnittstellen aktualisiert werden. Dies vereinfacht die Wartung, da nicht mehr alle Terminals für Software-Updates umgangen werden müssen.
WebOP-Modelle
Die 2000T-Serie ist das kostengünstigste Gerät, das auf dem Echtzeitbetriebssystem HMI RTOS basiert. Die Serie wird durch WebOP-
2040T /
2070T /
2080T /
2100T mit einer Bildschirmdiagonale von 4,3 Zoll, 7 Zoll, 8 Zoll bzw. 10,1 Zoll dargestellt.
Die 3000T-Serie ist ein fortschrittlicheres Modell, das auf dem Windows CE-Betriebssystem basiert. Sie unterscheiden sich von der 2000T-Serie durch eine Vielzahl von Hardwareschnittstellen und verfügen über eine integrierte CAN-Schnittstelle. Die Geräte arbeiten in einem erweiterten Temperaturbereich (-20 ~ 60 ° C) und verfügen über einen Antistatikschutz (Luft: 15 kV / Kontakt: 8 kV). Die Linie erfüllt die Anforderungen der Norm IEC-61000, die den Einsatz von Bauelementen in der Halbleiterherstellung ermöglicht, bei denen statische Entladungen ein Problem darstellen. Die Serie wird durch WebOP-
3070T /
3100T /
3120T-Modelle mit einer Bildschirmdiagonale von 7 Zoll, 10,1 Zoll bzw. 12,1 Zoll dargestellt.
WebAccess / HMI Designer-Entwicklungsumgebung
Das WebOP-Terminal ist standardmäßig nur ein ARM-Computer mit geringem Stromverbrauch, auf dem Sie jede Software ausführen können. Der springende Punkt dieser Lösung liegt jedoch in der proprietären Entwicklungsumgebung für industrielle WebAcess / HMI-Schnittstellen. Das System besteht aus zwei Komponenten:
- HMI Designer ist eine Umgebung zum Entwickeln von Schnittstellen und Programmierlogik. Es funktioniert unter Windows auf einem Computerprogrammierer. Das endgültige Programm wird in einer einzigen Datei kompiliert und zur Laufzeitausführung an das Terminal übertragen. Das Programm ist in russischer Sprache verfügbar.
- HMI Runtime - Laufzeit zum Ausführen eines kompilierten Programms auf dem Terminal. Es kann nicht nur auf WebOP-Terminals, sondern auch auf Advantech UNO-, MIC-Computern und normalen Desktop-Computern verwendet werden. Es gibt Laufzeitversionen für Linux, Windows, Windows CE.

Hallo Welt - ein Projekt erstellen
Beginnen wir mit der Erstellung einer Testschnittstelle für unser Habr-Bedienfeld. Ich werde das Programm auf dem
WebOP-3100T- Terminal
ausführen , auf dem WinCE ausgeführt wird. Erstellen Sie zunächst ein neues Projekt in HMI Designer. Um das Programm unter WebOP auszuführen, ist es wichtig, das richtige Modell auszuwählen. Das Format der endgültigen Datei hängt davon ab. In diesem Schritt können Sie auch eine Desktop-Architektur auswählen. Die resultierende Datei wird dann unter der X86-Laufzeit kompiliert.
Erstellen eines neuen Projekts und Auswählen einer ArchitekturAuswahl des Kommunikationsprotokolls, mit dem das kompilierte Programm in WebOP geladen wird. In diesem Schritt können Sie eine serielle Schnittstelle auswählen oder die IP-Adresse des Terminals angeben.
Schnittstelle zur Projekterstellung. Auf der linken Seite befindet sich ein Baumdiagramm der Komponenten eines zukünftigen Programms. Während wir uns nur für das Element "Bildschirme" interessieren, handelt es sich hierbei direkt um Bildschirme mit GUI-Elementen, die auf dem Terminal angezeigt werden.
Erstellen Sie zunächst zwei Bildschirme mit dem Text „Hallo Welt“ und der Möglichkeit, mithilfe der Schaltflächen zwischen ihnen zu wechseln. Fügen Sie dazu einen neuen Bildschirmbildschirm Nr. 2 hinzu, und fügen Sie auf jedem Bildschirm ein Textelement und zwei Schaltflächen zum Wechseln zwischen Bildschirmen hinzu (Bildschirmschaltflächen). Jede Schaltfläche ist so konfiguriert, dass zum nächsten Bildschirm gewechselt wird.
Schnittstelle zum Einstellen der Taste zum Umschalten zwischen BildschirmenDas Hello World-Programm ist fertig, jetzt können Sie es kompilieren und ausführen. Bei falsch angegebenen Variablen oder Adressen können bei der Kompilierung Fehler auftreten. Jeder Fehler wird als schwerwiegend angesehen. Das Programm wird nur kompiliert, wenn keine Fehler vorliegen.
Die Umgebung bietet die Möglichkeit, ein Terminal zu simulieren, sodass Sie ein Programm lokal auf einem Computer debuggen können. Es gibt zwei Arten von Simulationen:
- Online-Simulation - Alle im Programm angegebenen externen Datenquellen werden einbezogen. Dies können USO oder Geräte sein, die über serielle Schnittstellen oder Modbus TCP verbunden sind.
- Offline-Simulation - Simulation ohne Verwendung externer Geräte.
Obwohl wir keine externen Daten haben, verwenden wir nach dem Kompilieren des Programms die Offline-Simulation. Das endgültige Programm befindet sich im Projektordner mit dem Namen
ProjectName_Program Name.px3Das in der Simulation gestartete Programm kann mit dem Mauszeiger genauso gesteuert werden wie auf dem Touchscreen des WebOP-Terminals. Wir sehen, dass alles wie beabsichtigt funktioniert. Großartig.
Um das Programm auf das physische Terminal herunterzuladen, klicken Sie einfach auf die Schaltfläche Herunterladen. Da ich jedoch die Verbindung des Terminals mit der Entwicklungsumgebung nicht konfiguriert habe, können Sie die Datei einfach mit einem USB-Flash-Laufwerk oder einer microSD-Speicherkarte übertragen.
Die Programmoberfläche ist intuitiv, ich werde nicht jeden Grafikblock zerlegen. Das Erstellen von Hintergründen, Formen und Texten ist für jeden klar, der ähnliche Programme wie Word verwendet. Das Erstellen einer grafischen Oberfläche erfordert keine Programmierkenntnisse. Alle Elemente werden durch Ziehen und Ablegen auf dem Formular hinzugefügt.
Arbeite mit dem Gedächtnis
Nachdem wir nun grafische Elemente erstellen können, werden wir die Arbeit mit dynamischen Inhalten und einer Skriptsprache studieren. Erstellen Sie ein Balkendiagramm mit Daten aus der Variablen
U $ 100 . Wählen Sie in den Diagrammeinstellungen den Datentyp: 16-Bit-Ganzzahl und den Bereich der Diagrammwerte: von 0 bis 10.

Das Programm unterstützt das Schreiben von Skripten in drei Sprachen: VBScript, JavaScript und eine eigene Sprache. Ich werde die dritte Option verwenden, da es dafür Beispiele in der Dokumentation und automatische Hilfe zur Syntax direkt im Editor gibt.
Fügen Sie ein neues Makro hinzu:

Wir werden einen einfachen Code zum schrittweisen Ändern von Daten in einer Variablen schreiben, der in einem Diagramm verfolgt werden kann. Wir werden der Variablen 10 und Null hinzufügen, wenn sie größer als 100 ist.
$U100=$U100+10 IF $U100>100 $U100=0 ENDIF
Um das Skript in einer Schleife auszuführen, installieren Sie es in den allgemeinen Setup-Einstellungen als Hauptmakro mit einem Ausführungsintervall von 250 ms.
Kompilieren Sie das Programm und führen Sie es im Simulator aus:

In dieser Phase haben wir gelernt, wie man Daten im Speicher manipuliert und in visueller Form anzeigt. Dies reicht bereits aus, um ein einfaches Überwachungssystem zu erstellen, das Daten von externen Geräten (Sensoren, Steuerungen) empfängt und in den Speicher schreibt. In HMI Designer stehen verschiedene Datenanzeigeeinheiten zur Verfügung: in Form von kreisförmigen Zifferblättern mit Pfeilen, verschiedenen Diagrammen, Grafiken. Mithilfe von JavaScript-Skripten können Sie das Laden von Daten aus externen Quellen über HTTP implementieren.
Habr Bedienfeld
Mit den erworbenen Fähigkeiten werden wir eine Comic-Oberfläche des Admin-Panels von Habrom erstellen.
Unsere Fernbedienung muss in der Lage sein:
- Benutzerprofile wechseln
- Speichern Sie Karma und Ranking-Daten
- Ändern Sie die Karma- und Bewertungswerte mithilfe von Schiebereglern
- Wenn Sie auf die Schaltfläche "Sperren" klicken, sollte das Profil als gesperrt markiert und das Profilbild durchgestrichen geändert werden
Jedes Profil wird auf einer separaten Seite angezeigt, sodass wir für jedes Profil eine Seite erstellen. Wir speichern Karma und Bewertung in lokalen Variablen im Speicher, die beim Start des Programms mit dem Setup-Makro initialisiert werden.
Klickbares BildPassen Sie Karma und Bewertung an
Um das Karma anzupassen, verwenden wir den Schieberegler (Schiebeschalter). Als Datensatzadresse geben wir die im Setup-Makro initialisierte Variable an. Wir begrenzen den Wertebereich des Schiebereglers von 0 bis 1500. Wenn sich der Schieberegler bewegt, werden neue Daten in den Speicher geschrieben. In diesem Fall entspricht der Anfangszustand des Schiebereglers den Werten der Variablen im Speicher.
Um die numerischen Werte von Karma und Bewertung anzuzeigen, verwenden wir das numerische Anzeigeelement. Das Funktionsprinzip ähnelt dem Diagramm aus dem Beispielprogramm „Hello World“. Geben Sie einfach die Adresse der Variablen in Monitor Address an.
Sperrknopf
Die Sperrschaltfläche wird mit dem Kippschalterelement implementiert. Das Prinzip der Datenspeicherung ähnelt den obigen Beispielen. In den Einstellungen können Sie je nach Status der Schaltfläche unterschiedliche Texte, Farben oder Bilder auswählen.
In dem Moment, in dem die Taste gedrückt wird, muss der Avatar rot durchgestrichen sein. Dies ist mit der Bildanzeigeeinheit einfach zu implementieren. Hier können Sie mehrere Bilder angeben, die an den Status der Schaltfläche Kippschalter gebunden sind. Dazu erhält der Block die gleiche Adresse wie der Block mit der Schaltfläche und die Anzahl der Zustände. Ähnlich konfiguriertes Bild mit Typenschildern unter dem Avatar.
Fazit
Im Allgemeinen hat mir das Produkt gefallen. Früher hatte ich Erfahrung mit der Verwendung eines Android-Tablets für ähnliche Aufgaben, aber die Entwicklung einer Benutzeroberfläche dafür ist viel komplizierter, und Browser-APIs ermöglichen keinen vollständigen Zugriff auf Peripheriegeräte. Ein WebOP-Terminal kann ein Bundle von einem Android-Tablet, einem Computer und einem Controller ersetzen.
HMI Designer ist trotz des archaischen Designs ziemlich fortgeschritten. Ohne besondere Programmierkenntnisse können Sie schnell eine Arbeitsoberfläche skizzieren. Der Artikel berücksichtigt nicht alle Grafikblöcke, von denen es viele gibt: animierte Rohre, Zylinder, Diagramme, Kippschalter. Es unterstützt sofort viele gängige industrielle Controller und enthält Datenbank-Connectors.
Referenzen
Die Entwicklungsumgebung für WebAccess / HMI Designer und Runtime kann hier heruntergeladen
werden→
Quellen des Habrom-Bedienfeldprojekts