Zweck des Artikels: Demonstration der Implementierung einer billigen Datenvisualisierungslösung, die in Dispositionssystemen verwendet werden kann.
Wie hat es angefangen.
In einer der Branchen des Energiesektors wurden etwa 20 Einheiten mit mehr als 10.000 Signalen automatisiert, und es war erforderlich, ein Versandsystem zur Überwachung der Daten des APCS zu entwickeln.
In diesem Zusammenhang war ich daran interessiert, eine IT-Lösung zur Visualisierung von Daten in Form von Grafiken und Videobildern (Mnemonikdiagramme) zu implementieren. Die Lösung sollte skalierbar, plattformübergreifend, benutzerfreundlich und webbasiert sein. Und so die Funktionalität - Gedächtnisdiagramme, Grafiken. Gehen …
Mnemonische Diagramme
Zur Entwicklung von Mnemonikdiagrammen ist ein Grafikeditor erforderlich.
Die eigene Entwicklung ist schwierig und teuer, daher wurde Visio ausgewählt.
Warum Visio?
1 - unterstützt Vektorgrafiken;
2 - hat einen eingebauten VBA-Editor;
3 - ermöglicht es Ihnen, Ihre eigene Bibliothek mit grafischen Elementen zu erstellen;
4 - hat die Fähigkeit, einem grafischen Objekt einen beliebigen Satz von Eigenschaften hinzuzufügen (siehe Abb. 1)
5 - gemeinsamer Editor, viele Benutzer.
Daher wurde Visio der ideale Editor für meine Zwecke.
Abb. 1.
Diagramme
Hier war es einfacher, zuerst haben wir uns die Highcharts-Bibliothek angesehen, aber da sie bezahlt ist, wurde die
Wahl zugunsten von d3.js getroffen.
d3.js ist ein sehr cooles Framework, großartige Funktionen, etwas schwer zu erlernen, aber es gibt viele Beispiele im Internet.
Mit dem Webformular "Diagramme" können Sie Diagramme in verschiedenen Zeitbereichen, Koordinatenebenen, festgelegten Maßstäben und anderen Funktionen anzeigen.
Anwendungsentwicklungsplattform
Für die Entwicklung einer Webanwendung wurde die ASP.NET-Webprogrammierplattform ausgewählt, das ASP.NET MVC-Framework, und später wurde die Anwendung auf ASP.NET Core MVC übertragen.
Wie die App funktioniert
Wie funktioniert die App?
Die Anwendung empfängt Daten über die Web-API-Oberfläche und zeigt sie dem Benutzer in Form von Diagrammen und Mnemonikdiagrammen an.
Die Anwendung kann auf zwei Arten arbeiten.
Die erste Option:
Abb. 2.
Wie bereits erwähnt, implementiert die Anwendung eine Web-API-Schnittstelle, über die sie Daten empfängt. Datendienste (Programmmodule) sind direkt am Empfang von Daten aus Quellen beteiligt. In der ersten Version der Arbeit können Sie sehen, dass die Dienste in der Anwendung implementiert sind. Dies ist praktisch, wenn sich beispielsweise die Anwendung und die Datenquellen im selben Netzwerk befinden.
Zweite Option:
Abb . 3
In der zweiten Version sind Dienste separate Softwaremodule, auf die die Anwendung für Daten zugreift. Die zweite Option kann verwendet werden, wenn sich die Quellen und die Anwendung in unterschiedlichen Netzwerken befinden. Die Anwendung wird beispielsweise auf einem Hosting bereitgestellt.
Das Hauptobjekt in der Anwendung ist Tag - eine Variable, ein Messwert eines technologischen Prozesses. Eine Reihe von Methoden (z. B. GetTagOnline, GetTagArchive usw.) zum Arbeiten mit Tags implementiert die Web-API-Oberfläche.
Die Anwendung nimmt also Daten von den Diensten, lädt das vom Benutzer in Visio entwickelte Mnemonikdiagramm und zeigt diese Daten an.
Animation von Grafikobjekten auf einem Mnemonikdiagramm
Javascript wird verwendet, um grafische Elemente des Mnemonikschemas zu animieren. Um dem Benutzer das Entwickeln von Animationsfunktionen zu erleichtern, verfügt die Anwendung über eine kleine Bibliothek, die beispielsweise die folgenden Funktionen enthält: printf (Text), SetText (Objekt, Index, Wert), SetBackColor (Objekt, Index, Wert), SetVisible (Objekt, Wert), GetTag (TagName) usw.
Zum Beispiel die Messwertanzeigefunktion:
Function Field (Object, Property) {
var Tag = GetTag(Property.Tag1);
SetText(Object,1,Tag.Value);
}Administration, Konfiguration.
Für die Konfiguration werden Konfigurationsdateien verwendet, in denen der Benutzer Profile erstellt, Dienste hinzufügt usw. Diese Anwendung ist eine Konsole und kann als Win-Service verwendet werden.
Die App verwendet den integrierten plattformübergreifenden Kestrel-Webserver.
Der Artikel heißt "Überwachung der Daten des automatisierten Prozessleitsystems und nicht nur". Die Anwendung kann grundsätzlich alle Daten anzeigen, die in Form eines Diagramms, Diagramms usw. dargestellt werden können.
Vielen Dank für das Lesen, ich interessiere mich für Kritik, Feedback. Danke.
Das ist alles, unten sind einige Bilder der Anwendung.
Ein Beispiel für ein Mnemonikdiagramm (wurde aus der Datei eplan -> autocad -> visio erstellt): Diagramme
:
