Entwicklung webbasierter graphischer Benutzeroberflächen für Simulationskerne
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Entwicklung webbasierter graphischer
Benutzeroberflächen für Simulationskerne
Svenja Hilbrich1* , Katharina Gerdes1 , Johannes Hinckeldeyn1 , Jochen Kreutzfeldt1
1 Institut für Technische Logistik, Technische Universität Hamburg, Theodor-Yorck-Straße 8,
1 21079 Hamburg, Deutschland; * svenja.hilbrich@tuhh.de
Als webbasierte Simulation werden Simulations-
Abstract. Simulation spielt eine wichtige Rolle in vielen
werkzeuge bezeichnet, die über einen Webbrowser zu-
Disziplinen der Wissenschaft und Praxis. Die webbasier-
gänglich sind. Vorteile dieser Form der Simulation lie-
te Simulation bietet dabei Vorzüge gegenüber Deskto-
gen zum Beispiel in der Unabhängigkeit vom Betriebs-
panwendungen und erlaubt es die Dauer zur Durchfüh- system und Rechenleistung des Anwenders, der Mög-
rung einer Simulationsstudie zu verringern. Häufig wer- lichkeit zur gemeinsamen Modellierung durch mehrere
den damit Client-Server-Strukturen bezeichnet, bei de- Anwender und der parallelen Ausführung von mehre-
nen der Simulationskern Dienste auf einem Server be- ren Simulationsläufen [4]. Diese Vorteile ermöglichen
reitstellt und die Benutzeroberfläche durch eine Websei- es den zeitlichen Aufwand für die Simulation zu ver-
te realisiert wird. Solche Systeme werden allerdings nur ringern, sodass es sich bei der webbasierten Simulation
selten entwickelt. Daher wird mit diesem Beitrag eine um ein relevantes Forschungsthema handelt.
Anleitung zur Entwicklung einer webbasierten Benutze-
roberfläche für Simulationskerne bereitgestellt. Anhand
von Designfragen und Entscheidungsbäumen wird da- 1 Stand der Technik
bei schrittweise durch den Entwicklungsprozess geleitet,
welcher zusätzlich durch ein Beispiel aus der Material- Die Verwendung eines Simulationswerkzeuges wird
flusssimulation illustriert wird.
entscheidend durch dessen Bedienbarkeit bestimmt.
Besonders für Anwender, welche keine Simulationsex-
perten sind bietet eine graphische Benutzeroberfläche
Einleitung die benötigte Unterstützung zur Erstellung und Aus-
wertung eines Simulationsmodells. Ohne eine solche
Simulation ist das „Nachbilden eines Systems mit sei- Schnittstelle würde der Modellierungsprozess vertie-
nen dynamischen Prozessen in einem experimentierba- fende Kenntnis der für die Simulation verwendeten Pro-
ren Modell, um zu Erkenntnissen zu gelangen, die auf grammiersprache erfordern, dies wiederum schließt Be-
die Wirklichkeit übertragbar sind“[1, S. 3]. Damit bie- nutzer ohne entsprechendes Fachwissen aus [5].
tet eine Simulation deutliche Vorteile gegenüber Expe- Für Simulationswerkzeuge sind Benutzerschnitt-
rimenten in einem realen System, zum Beispiel [2]: stellen traditionell in Form von Desktopanwendungen
realisiert [6]. Das Thema webbasierte Simulation be-
• Die Erstellung eines Simulationsmodells ist ko- gann 1996 im Rahmen der Winter Simulation Confe-
stengünstiger als die eines realen Systems. rence das wissenschaftliche Interesse zu wecken [7].
• Das Verhalten des Systems kann ohne Auswirkun- Kuljis und Paul identifizierten bereits im Jahr 2000 eine
gen auf das Realsystem untersucht werden. Reihe an Anwendungsfällen, welche von einem web-
• Die Dauer des Beobachtungszeitraums kann ver- basierten Simulationsansatz profitieren würden [8]. Sy-
längert oder verkürzt werden. berfeldt, Karlsson et al. benennen mit den Stichwor-
ten Zugänglichkeit, Skalierbarkeit, Portabilität, War-
Für Materialflusssysteme gilt zusätzlich, dass nachträg- tung, kontrolliertem Zugriff und Lizenzierung Vortei-
liche Veränderungen mit sehr hohen Kosten verbunden le der webbasierten Architektur gegenüber eines klas-
sein können. Daher ist die Simulation auch in der Pla- sischen Ansatzes [6]. Trotz des seit Mitte der Neun-
nung und Dimensionierung von Materialflusssystemen zigerjahre bestehenden Interesses und der bestehenden
ein weit verbreitetes Hilfsmittel [3]. Vorteile existieren nur wenige webbasierte Simulations-
ARGESIM Report 59 (ISBN 978-3-901608-93-3), p 23-32, DOI: 10.11128/arep.59.a59005
23anwendungen [4]. In [9] werden unflexible Standard- tionskern entwickelt, der die Simulation implementiert.
Simulationssoftware und teure Lizenzen als wichtige Der Simulationskern wurde in der Programmiersprache
Gründe, die einen Einsatz von Simulation verhindern, python (Version 3.6) implementiert und zur Datenspei-
genannt. In ihrem Lösungsansatz im Rahmen des Pro- cherung wird eine sqlite-Datenbank verwendet. Für die
jektes DREAM (“simulation based application Decisi- Simulation müssen die folgenden Daten vom Anwender
on support in Real-time for Efficient Agile Manufac- in der Datenbank gespeichert werden:
turing”) wählen sie eine webbasierte open source Im-
plementierung mit einem auf python aufbauenden Si- • Auftragsdaten, dienen der Erzeugung von beweg-
mulationskern. Neben dem Ansatz zur Verwendung und ten logistischen Elementen (z. B. Paletten)
Adaption einer open source Simulationssoftware ist die • Simulationsmodell, bestehend aus mehreren mit-
Entwicklung eines auf allgemeinen Programmierspra- einander verknüpften Modulen
chen aufbauenden individuellen Simulationskerns ei- • Moduleigenschaften und Regeln, definieren das
ne weitere Möglichkeit zur Überwindung der aufge- Verhalten der Module
zeigten Barrieren beim Einsatz von Simulation. In [10]
wird die Entwicklung von Simulationssoftware, wel- Bisher wurden die Eingangsdaten manuell in der Da-
che auf einer allgemeinen Programmiersprache aufbaut tenbank abgespeichert. Die Ansteuerung des Simulati-
als von gleichbleibend signifikanter Bedeutung identi- onskerns erfolgte über das PC-Terminal.
fiziert. Für den Kreis der Anwender, die diesen Weg
wählen stellt der vorliegende Beitrag eine strukturierte 3 Anforderungen an eine
Anleitung zur Erstellung einer webbasierten Benutzero-
berfläche zur Verfügung. Diese soll Entwickler indivi-
webbasierte
dueller Simulationssoftware dabei unterstützen die Vor- Benutzeroberfläche für
teile einer Benutzeroberfläche mittels einer webbasier- Simulationskerne
ten Implementierung für sich nutzbar zu machen. Die
vorhandene Literatur beschränkt sich in diesem Bereich Eine Webanwendung besteht grundlegend aus drei
bisher auf die Dokumentation von individuellen proto- Schichten: Die Präsentations-, Verarbeitungs- und Da-
typischen Ansätzen zur Entwicklung einer webbasier- tenhaltungsschicht [15]. Die Präsentationsschicht ent-
ten Benutzeroberfläche. Dies zeigt sich auch in den Bei- spricht in diesem Fall der Benutzeroberfläche, die Ver-
trägen von [11],[12] und [13]. Ziel dieses Beitrages ist arbeitungsschicht ist der Simulationskern zusammen
es, die Verwendung von webbasierten Simulationsan- mit einem Webserver und die Datenhaltungsschicht
wendungen in Wissenschaft und Praxis, durch die Be- kann eine Datenbank sein. Für die Benutzeroberfläche
schreibung eines generischen Vorgehens zur Entwick- wird eine Webseite (Client) verwendet. Der Webserver
lung einer webbasierten Benutzeroberfläche für einen stellt Dienste für den Client zur Verfügung und realisiert
Simulationskern, zu fördern. somit auch die Schnittstelle zwischen dem Simulations-
kern und der Benutzeroberfläche.
Laut VDI 3633 ermöglichen Benutzeroberflächen
2 Entwickelter Simulationskern den Modellaufbau, die Dateneingabe und die Ergebnis-
für die darstellung. Der Modellaufbau kann dabei sowohl mit-
Materialflusssimulation hilfe von graphischen Elementen als auch mit Simula-
tionssprachen erfolgen [1]. Außerdem sollte die Mög-
Die Anleitung zur Entwicklung der Benutzeroberfläche lichkeit bestehen einzelne Modellbestandteile also Sub-
wird in diesem Beitrag zum besseren Verständnis ex- systeme zu entwickeln, zu speichern und später wieder-
emplarisch an einem Beispiel illustriert. Dazu wird ein zuverwenden. Dies kann den Prozess des Modellauf-
bereits entwickelter Simulationskern verwendet, wel- baus verkürzen.
cher in diesem Abschnitt beschrieben wird. In [14] wur- Die Dateneingabe umfasst sowohl Modelleigen-
de eine Simulationsmethodik zur Dimensionierung von schaften als auch Experimentdaten [1]. Diese Daten
Materialflusssystemen vorgestellt. Diese basiert auf der müssen entweder interaktiv in der Benutzeroberfläche
Modellierung logistischer Systeme mithilfe von generi- eingegeben werden oder durch das Einlesen ganzer Da-
schen Modulen. Der Ablauf der Simulation ist dabei er- teien auf dem Server gespeichert werden, sodass durch
eignisorientiert. Für diese Methodik wurde ein Simula- den Simulationskern darauf zugegriffen werden kann.
24Die Ergebnisse eines Simulationslaufes können sta- Hinweise anhand konkreter Beispiele verdeutlicht. Zu-
tisch oder dynamisch dargestellt werden [1]. Die dyna- nächst müssen die verwendeten Technologien ermittelt
mische Darstellung zielt meist auf die Animation der werden. Anschließend können die gewünschten Funk-
Ereignisse während eines Simulationslaufes ab. Dies tionalitäten entwickelt werden.
dient der Unterstützung der Ablaufkontrolle und der In [23] wird auszugsweise der zur Implementierung
Validierung des Simulationsmodells. Die statische Er- der Benutzeroberfläche entwickelte Quellcode zur Ver-
gebnisdarstellung dient vor Allem der Darstellung von fügung gestellt.
Kennzahlen, die sich aus Analysen der Simulationser-
gebnisse ergeben. Die Ergebnisdarstellung kann sowohl
4.1 Auswahl eines Frameworks zur
parallel zum Simulationslauf als auch im Anschluss
GUI-Entwicklung
daran erfolgen. Außerdem sollte die Benutzeroberflä-
che dem Benutzer die Möglichkeit bieten die Rohdaten Für die Entwicklung von Webseiten können so genann-
der Simulationsergebnisse zu beziehen. te Webframeworks oder Bibliotheken als Unterstützung
Zusätzlich zu den genannten Punkten muss der Be- verwendet werden. Diese geben eine gewisse Struk-
nutzer mithilfe der Benutzeroberfläche den Simulati- tur für die Entwicklung vor und verringern den Im-
onskern steuern. Dies umfasst beispielsweise das Star- plementierungsaufwand, da sie Standardfunktionalitä-
ten eines Simulationslaufes oder das Löschen von ge- ten bereits anbieten. Beliebt für die Entwicklung von
speicherten Daten. Insgesamt ergeben sich somit die Webseiten sind zum Beispiel das Framework Angular
folgenden Anforderungen für die Implementierung der [16] oder die die Javascript-Bibliothek React [17]. Aus-
Benutzeroberfläche: führliche Vergleiche können in [18] und [19] gefunden
Technologische Anforderungen: werden. Im Folgenden werden zur besseren Lesbarkeit
beide Alternativen als Framework bezeichnet.
• Entwicklungsmöglichkeit für eine Webseite Bei der Entscheidung zwischen den verfügbaren
• Entwicklungsmöglichkeit für einen Webserver Frameworks sollten in einem ersten Schritt die folgen-
• Realisierung des Datentransfers zwischen Websei- den Fragen berücksichtigt werden:
te und Server bzw. Simulationskern
• Rechtfertigt die Unterstützung durch das Fra-
Funktionale Anforderungen: mework den gegebenenfalls entstehenden Over-
head? Teilweise wird durch Verwendung eines
• Steuerung des Simulationskerns Frameworks die Implementierung von sonst nicht
• Hochladen von Daten auf den Server benötigtem Code notwendig. Hier ist eine Abwä-
gung sinnvoll, welches Framework am geeignet-
• Download von Daten auf den PC des Benutzers sten ist. Da es sich bei der Entwicklung einer Be-
• Entwicklung und Speicherung eines Simulations- nutzeroberfläche für einen Simulationskern aller-
modells dings nicht um ein triviales Problem handelt, kann
• Entwicklung und Speicherung von Modellbestand- diese Frage in der Regel mit ja beantwortet wer-
teilen den.
• Animation des Simulationslaufes • Welcher Lizenz unterliegt das Framework? Es
ist grundsätzlich zu prüfen ob die Lizenz des Fra-
• Visualisierung der Simulationsergebnisse meworks zu den Anforderungen an das Simuati-
onswerkzeug passt.
4 Anleitung zur Entwicklung • Können alle erforderlichen Funktionalitäten
einer webbasierten mit dem Framework realisiert werden? Ist dies
nicht der Fall, muss ein anderes Framework ge-
Benutzeroberfläche wählt werden. Die genannten Frameworks sind in
Basierend auf den ermittelten Anforderungen, wird im der Regel aber geeignet, um alle hier benötigten
Folgenden die Entwicklung einer webbasierten Benut- Funktionalitäten zu implementieren.
zeroberfläche für einen bereits existierenden Simula- • Gibt es Vorkenntnisse in einem der Tools? Vor-
tionskern beschrieben. Dabei werden die allgemeinen kenntnisse können den zeitlichen Aufwand für die
25Entwicklung der Webseite deutlich verkürzen, da • app.component.spec.ts: Test der obersten Kompo-
die Einarbeitungszeit entfällt. nente.
• Wie groß ist die unterstützende Community? Da eine Benutzeroberfläche diverse Funktionalitäten er-
Bei einer großen Community können mehr Pro- füllen soll, muss diese für eine gute Übersichtlichkeit
blemlösungen online gefunden oder in Foren ge- strukturierbar sein. Bei Webseiten ist die Verteilung von
teilt werden. Inhalten auf mehrere Ansichten ein gängiges Hilfsmit-
• Welches Framework entspricht dem persönli- tel. Für die Benutzeroberfläche der Materialflusssimula-
chen Geschmack? Bei der Wahl zwischen den tion wurden der Datenaustausch, die Steuerung des Si-
etablierten Frameworks kann keine falsche Ent- mulationskerns und die Modellierung voneinander ge-
scheidung getroffen werden, sodass persönliche trennt. Bei Angular entspricht jede dieser Sichten ei-
Vorlieben berücksichtigt werden sollten. ner eigenen Komponente, die je nach Bedarf in der
Hauptkomponente angezeigt wird. Angular bietet für
Das Framework Angular bringt viele vordefinierte Lö- die Navigation zwischen den Sichten ein so genanntes
sungen für die Webseitenentwicklung mit, wie zum RouterModule an (vgl. [22]). Um eine Navigations-
Beispiel ein Modul für den Datentransfer zwischen Cli- leiste wie in Abb. 1 (oben) zu realisieren, wurde der in
ent und Server. Außerdem wird durch die Aufteilung [23] gezeigte Code implementiert.
in Komponenten eine klare Struktur vorgegeben und
es werden nur wenige Erweiterungen für die geplan-
4.2 Aufsetzen eines Webservers
ten Funktionalitäten der Benutzeroberfläche benötigt.
Da das Framework zusätzlich einer MIT-Lizenz unter- Um den Simulationskern für den Benutzer über die
liegt wurde sich in diesem Kontext für Angular als Fra- Webseite erreichbar zu machen, muss ein Webserver
mework für die Webseitenentwicklung entschieden. Für aufgesetzt werden. Analog zur Webseitenentwicklung
das Beispiel wurde Angular Version 5.2.11 verwendet. gibt es Frameworks und Bibliotheken, die die Entwick-
Mit Angular können Single Page Anwendungen lung des Webservers unterstützen. Für die Auswahl
(SPA) mit HTML, CSS und Typescript entwickelt wer- können die gleichen Fragen als Unterstützung beant-
den. Typescript ist ein Superset von Javascript und er- wortet werden. Frameworks und Bibliotheken sind für
laubt die Implementierung der Funktionalität der Web- alle gängigen Programmiersprachen verfügbar. Für py-
seite. Angular basiert auf dem Konzept der Komponen- thon sind bekannte Beispiele Flask [24] und Django
ten und der Dependency Injection. Komponenten be- [25]. Ein ausführlicher Vergleich ist in [26] zu finden.
schreiben gekapselte wiederverwendbare Funktionali- Flask ermöglicht die Implementierung aller notwendi-
täten bzw. Sichten (Views). Diese Komponenten kön- gen Funktionalitäten für die hier entwickelte Anwen-
nen wiederum so genannte Services verwenden, die dung. Dies ist vor Allem die Ansteuerung der Funk-
Funktionalitäten anbieten, die unabhängig von einer tionen des Simulationskerns und die Abwicklung des
speziellen Sicht sind [20]. Das Angular-Tutorial „Tour Datentransfers zwischen Webseite und Server. Zudem
of Heroes“ [21] bietet bei Bedarf einen guten Einstieg wird auf Overhead im Vergleich zu Django verzichtet
in das Framework. und unterliegt der BSD 3-Lizenz. Daher wurde Flask
Nach der Initialisierung eines neuen Angular- für die Entwicklung des Webservers verwendet.
Projektes stehen in diesem die folgenden Dateien be- Der Webserver wird mit dem in [23] gezeigten Co-
reit: de implementiert. Dabei ist die Standardeinstellung der
Adresse unter der der Server erreichbar ist ’localhost’,
• app.module.ts: Definition von global verwendeten also ein lokaler Server auf dem genutzten Rechner.
Bibliotheken und Komponenten.
• app.component.html: Inhalt der obersten Kompo- 4.3 Datentransfer
nente.
Die Kommunikation und somit der Datentransfer zwi-
• app.component.css: Design der obersten Kompo-
schen Server und Client bzw. Simulationskern und gra-
nente.
phischer Benutzeroberfläche wird mithilfe des Hyper-
• app.component.ts: Funktionalitäten der obersten Text Transfer Protokolls (HTTP) durchgeführt. Dieses
Komponente. basiert auf dem Anfrage-Antwort-Prinzip, wobei der
26Abbildung 1: Screenshot des graphischen Modelleditors. Im oberen Bereich der Ansicht befindet sich die Navigationsleiste.
Client eine Anfrage sendet und der Server die Ant- implementiert. Diese können anschließend von allen
wort zurück gibt. Primär werden für den Datentrans- Komponenten verwendet werden. In [23] ist die Imple-
fer zwei Methoden verwendet. Dies sind die GET- und mentierung einer Post-Methode in Angular verfügbar.
die POST-Methode. Mit der GET-Methode werden Da- Neben Daten können auch ganze Dateien an den Ser-
ten vom Server angefordert und mit der POST-Methode ver gesendet werden. Dies ist zum Beispiel notwendig,
werden Daten an den Server übermittelt [27]. Nach der wenn der Benutzer eine ganze csv-Datei an den Server
Bearbeitung der Anfrage des Clients sendet der Ser- übermitteln möchte. Der Service dient auch dazu, die
ver eine Antwort an den Client. Dies können zum Bei- vom Server zurückgesendete Erfolgs- oder Fehlermel-
spiel vom Client angeforderte Daten sein. Werden bei dung zu empfangen und gegebenefalls ein entsprechen-
der Kommunikation Anfragen vollständig nacheinander des Feedback an den Nutzer zu initialisieren.
abgearbeitet, wird also auf die Antwort des Servers ge- Eine POST-Methode kann zusätzlich zum reinen
wartet bevor die nächste Anfrage gesendet wird, spricht Datentransfer auch als Steuerungsmethode für den
man von einer synchronen Kommunikation. Das Fra- Simulationskern verwendet werden. Dazu wird die
mework Angular verarbeitet die Anfragen asynchron, Aktions-Codezeile durch den gewünschten Aufruf der
also mehrere Anfragen parallel. Bei Bedarf muss eine Funktion des Simulationskerns ersetzt.
synchrone Verarbeitung also erzwungen werden.
Bei der reinen Kommunikation mittels HTTP is zu
Anforderung von Daten
beachten, dass der Server nur auf Anfragen des Clients
Die Anforderung von Daten vom Server erfolgt analog
antworten kann und die Kommunikation nicht selbst-
zur Übermittlung von Daten. Eine Besonderheit stellt
ständig steuert. Ein bidirektionaler Datenaustausch ist
aber der Download von Dateien auf den Anwender-PC
beispielsweise mit Websockets möglich ist. Dies wird
dar. Aus Sicherheitsgründen ist dies nur mithilfe eines
im Folgenden allerdings nicht weiter betrachtet, da die-
Download-Dialogs möglich. Im Kontext der Benutze-
se Kommunikation für die Grundfunktionalität der Be-
roberfläche ist der Download beispielsweise notwendig
nutzeroberfläche nicht notwendig ist. Bei Bedarf finden
wenn dem Anwender die Rohdaten der Simulationser-
sich weitere Informationen zu Websockets in [15]. Ty-
gebnisse als .csv-Datei zur Verfügung gestellt werden
pischerweise wird für den Datentransfer zwischen Cli-
sollen. In [23] ist der entsprechende Code abrufbar.
ent und Server das JavaScript Object Notation (JSON)-
Datenformat verwendet [27].
4.4 Graphischer Modelleditor
Übermittlung von Daten zum Server Die Entwicklung und Speicherung eines Simulations-
Für die Übermittlung und Anforderung von Daten von modells ist ein zentraler Bestandteil einer Benutzero-
bzw. auf den Server werden bei Angular Services berfläche für einen Simulationskern. Zur Unterstützung
27Abbildung 2: Entscheidungsbaum zur Entwicklung des Modelleditors (links), der Animation (mitte) und der statischen
Visualisierung von Simulationsergebnissen (rechts).
der Modellierung haben sich graphische Modelledito- Simulationsmodelle entwickelt. Um die Verständlich-
ren als hilfreich erwiesen. Eine Übersicht über die Ent- keit und Übersichtlichkeit der Darstellung zu erhöhen,
scheidungen zur Entwicklung des Modelleditors ist in sollte zum Beispiel die Möglichkeit geschaffen werden,
Abb. 2 dargestellt. Die benötigten Grundfunktionalitä- Bereiche des Simulationsmodells farblich hervorzuhe-
ten eines solchen Modelleditors sind ben (vgl. den roten Bereich in Abb. 1). Außerdem wird
empfohlen eine Zoom-Funktionalität zu implementie-
• Graphische Anordnung von Modellbestandteilen ren, um den Gesamtmodellüberblick auch bei Model-
• Eingabe von Parametern der Modellbestandteile len, welche die Größe des Editorfensters überschreiten,
zu gewährleisten.
• Speichern von ganzen Simulationsmodellen
• Laden von gespeicherten Simulationsmodellen. Für den in Abschnitt 2 beschriebenen Simulations-
kern wurde ein Modelleditor entwickelt, der in Abb. 1
In vielen Bereichen in denen Simulationswerkzeu- dargestellt ist. Auf der rechten Seite der Seitenansicht
ge eingesetzt werden, werden sehr große und komplexe kann die gewünschte Funktionalität ausgewählt werden,
28in der Mitte werden die Simulationsmodelle zusam- ben bezüglich der Eingabe gemacht werden. Autofill-
mengestellt und rechts können die Moduleigenschaften Felder können in beiden Fällen verwendet werden. Da-
eingestellt werden. Zusätzlich zu den genannten Funk- bei dient die Autovervollständigung zum einen als Un-
tionalitäten können so genannte Bausteine, welche aus terstützung, wenn lange Eingaben notwendig sind.
mehreren Modulen bestehen, abgespeichert und wie- Im betrachteten Beispiel werden die Eingabedaten
derverwendet werden, rein graphische Elemente wie direkt als Attribute der Modul-Elemente auf der Zei-
Rechtecke können verwendet werden, um das Modell chenfläche gespeichert. Für die Ansicht der Modulei-
visuell zu strukturieren und übersichtlicher zu gestal- genschaften auf der rechten Seite der Benutzerober-
ten und es besteht die Möglichkeit ein Bild des Simu- fläche wird eine ComponentFactory verwendet, die
lationsmodells herunterzuladen. Bei der Aufteilung der bei einem Klick auf ein Modul die Eigenschaften-
Seite sollte die Modellierungsfläche möglichst groß ge- Komponente erzeugt (siehe [23]).
staltet werden, um auch die Modelle möglichst groß-
flächig darstellen zu können. Weitere Hinweise zur Ge-
Speichern & Laden des Simulationsmodells
staltung von Benutzeroberflächen finden sich zum Bei-
Beim Speichern des Simulationsmodells wird dieses
spiel in [29] und [28].
zunächst in ein json-Format überführt und anschließend
an den Server übermittelt. Dort kann das Modell direkt
Anordnung von Modellbestandteilen mit Drag in der für den Simulationskern benötigten Form abge-
& Drop speichert werden. In diesem Fall wird es in der sqlite-
Modelle des entwickelten Simulationskerns bestehen Datenbank abgelegt. Unabhängig davon ob der Simu-
aus generischen Modulen, welche verbunden werden, lationskern die graphischen Informationen, also Posi-
um ganze Materialflusssysteme abzubilden. Für die gra- tion der einzelnen Modellbestandteile im Editor benö-
phische Modellierung wurden daher Quadrate als Ab- tigt, sollte auf dem Server eine json-Datei abgelegt wer-
bildung eines Moduls und gerichtete Verbindungslini- den, die diese Informationen enthält. Damit reicht es
en für die Darstellung der Verbindung zwischen die- bei dem Ladevorgang eines Modells aus, diese Datei an
sem Modulen gewählt (vgl. Abb. 1). Drag & Drop er- die Webseite zu übermitteln und einer aufwändige Da-
laubt ein intuitives und visuell direkt erfassbares Anord- tenverarbeitung bzw. Informationsrückgewinnung wird
nen von Modellbestandteilen und kann dadurch die Mo- vorgebeugt. Das Speichern und Laden von Bausteinen
dellierung erleichtern. Die Verbindungen können durch funktioniert analog zum Speichern eines Modells.
Anklicken eines Moduls und Ziehen der Maus zu ei-
nem anderen Modul geschaffen werden. Für die Imple-
Bild des Simulationsmodells speichern
mentierung der Drag & Drop-Funktionalität wurde die
Häufig ist es erwünscht ein Bild eines Simulations-
Bibliothek jsplumb community edition [30] in Kombi-
modells abzuspeichern. Hierzu stehen Bibliotheken zur
nation mit jQuery [31] verwendet (vgl. [23]).
Verfügung, die die Aufnahme eines Screenshots unter-
Die aktuelle Version Angular 9.0.0 bietet selbst ein stützen. Im Beispiel wurde die Bibliothek domtoimage
Modul um drag & drop zu implementieren. Für zu- [32] verwendet (vgl. [23]). Mithilfe der Bibliothek wer-
künftige Entwicklungen sollte daher die Eignung dieser den alle Elemente, die einer ausgewählten Komponente
Bibliothek für die Implementierung der Drag & Drop- zugeordnet sind, in einem Bild gespeichert.
Funktionalität untersucht werden.
4.5 Animation eines Simulationslaufs
Parametereingabe
Für die Parametereingabe können Input-, Dropdown- Die Animation dient im Rahmen der Materialflusssi-
und autofill-Felder verwendet werden. Soll der Benut- mulation dem Verständnis von komplexen Zusammen-
zer nur aus einer vordefinierten Menge an Attributen hängen [1]. Es gilt zu entscheiden wie dies im kon-
auswählen können, bieten sich besonders Dropdown- kreten Anwendungsfall bestmöglich umgesetzt werden
Felder an, da diese nur vorgegebene Attribute anzei- soll. Dazu sollten grundsätzliche Entscheidungen über
gen und zur Auswahl stellen. Diese Attribute können die Darstellung der Elemente, der Zustände und der
entweder vom Server angefragt oder in der Benutze- Prozesse des Modells getroffen werden. Aus diesen lei-
roberfläche hinterlegt werden. Inputfelder sollten nur ten sich die Anforderungen an die Datenformate und
verwendet werden, wenn dem Benutzer keine Vorga- -mengen sowie die Zeitsteuerung ab. Bietet die ausge-
29wählte Technologie zur Erstellung der Benutzeroberflä-
che bereits die Möglichkeit zur Animationserstellung
so wird diese implementiert. Anderenfalls geht diesem
Schritt die Entscheidung und die Validierung zum Ein-
satz von externen Bibliotheken zur Animationsrealisie-
rung voraus (vgl. Abb. 2). Innerhalb der betrachteten
Materialflusssimulation s ind n ach d em geschilderten
Vorgehen zur Umsetzung der Animation folgende Ent-
scheidungen getroffen worden. Die Form und Anord-
nung der Modellelemente wird dem Modellaufbau ent-
sprechend übernommen. Zustände werden zum einen
durch „Füllstände“ und zum anderen durch sich auf
den Modulen befindliche Elemente angezeigt. Die Ma-
terialflüsse zwischen den Modulen werden ihrer Rich-
tung und ihrem mengenmäßigen Umfang gemäß durch
Pfeile in unterschiedlicher Stärke angezeigt. In Abb. 3
ist eine schematische Übersicht zu den Darstellungsfor-
men der Module gegeben. Bei der technischen Umset-
zung der graphischen Darstellung wurden SVG (Scala-
ble Vector Graphics) Elemente verwendet, da diese sich
gut in das Angular Framework einfügen und manipulie- Abbildung 3: Übersicht zur gewählten Darstellungsform der
ren lassen, um somit die dynamischen Veränderungen Module in der Animation. * Der Füllstand zeigt
abzubilden. Zur Steuerung der Systemzeit wurde die Ja- den Grad der Auslastung des Moduls an.
vaScript Bibliothek RxJS (Reactive Extensions Library
for JavaScript) [33], welche in das Angular Framework
eingegliedert ist, verwendet.
4.6 Visualisierung von
Simulationsergebnissen
Zur Unterstützung der Ergebnissinterpretation eines
oder mehrerer Simulationsläufe sind diese aufzuberei-
ten und graphisch darzustellen [1]. Die hierfür notwen- Abbildung 4: Exemplarische Ansicht der graphischen
digen Entscheidungen erfolgen analog zu denen für die Darstellung ausgewählter Kennzahlen.
Animation und sind in angepasster Form Abb. 2 zu ent-
nehmen. Die Ermittlung geeigneter Kennzahlen und die
Form ihrer graphischen Darstellung bilden die Grund-
lage für die abzuleitenden Datenformate und -mengen sollte diese Frage zu Grunde liegen: Wird dadurch die
sowie die benötigten Berechnungen. Für die Umset- Bedienung des Simulationswerkzeugs erleichtert und
zung der Diagramme wurde das open source Frame- der Aufwand für die Durchführung der Simulation ver-
work ngx-charts eingebunden, da dieses speziell für ringert? Zusätzlich ergibt sich der in Abb. 5 dargestellte
die Verwendung in Angular-Projekten entwickelt wur- Entscheidungsbaum, welcher verwendet werden kann,
de [34]. Eine exemplarische Darstellung ausgewählter um zu überprüfen ob eine Technologie für die Rea-
Kennzahlen ist in Abb. 4 gezeigt. lisierung einer Funktionalität geeignet ist. Hierbei ist
zu beachten, dass jeweils die Frage der Sinnhaftigkeit
des Einsatzes einer Technologie vorher zu klären ist,
5 Fazit ob also beispielsweise ein Webentwicklungsframework
wie Angular überhaupt notwendig ist. Insgesamt ergibt
Jeder Entscheidung zur verwendeten Technologie oder sich damit für die Entwicklung der webbasierten Be-
Gestaltung einer Funktionalität der Benutzeroberfläche nutzeroberfläche der in Abb. 6 dargestellte Ablauf, wo-
30bei Technologien für alle Funktionalitäten ausgewählt
werden müssen. Der Entscheidungsbaum findet bei der
Eignungsprüfung der Technologien Anwendung.
Bei der Entwicklung der Benutzeroberfläche für
den in Abschnitt 2 vorgestellten Simulationskern, hat
sich besonders die Wahl des Frameworks für die Ent-
wicklung der Webseite als Entscheidung mit großer
Tragweite herausgestellt. Dieses gibt die grundlegen-
den Rahmenbedingungen wie zum Beispiel die Pro-
grammiersprache und strukturelle Konzepte vor. Auf
der einen Seite bedeutet das Framework eine Verringe-
rung des Implementierungsaufwands, kann aber auf der
anderen Seite auch die Implementierungsfreiheit ein-
schränken, sodass dieses mit besonderer Sorgfalt aus-
gewählt werden sollte.
Weiterhin hat sich gezeigt, dass durch die Imple-
mentierung der webbasierten Benutzeroberfläche teil-
weise Mehraufwände im Vergleich zu Desktopanwen- Abbildung 5: Entscheidungsbaum zur Auswahl geeigneter
dungen entstehen können. Zum Beispiel ist der Zugriff Technologien.
auf Daten und das zur Verfügung stellen von Dateien für
den Anwender mit einem höheren Implementierungs-
aufwand verbunden. Allerdings übersteigen die Vortei-
le der WBS und die damit verbundene Zeiteinsparung
diesen einmaligen zusätzlichen Aufwand, sodass web-
basierte Benutzeroberflächen deutlich häufiger Anwen-
dung finden sollten. Die hier beschriebene Anleitung
kann dazu beitragen, dass zukünftig mehr webbasierte
Benutzeroberflächen entwickelt werden.
Literatur
[1] Verein Deutscher Ingenieure e.V. VDI 3633:
Simulation von Logistik-, Materialfluss- und
Produktionssystemen - Grundlagen. VDI-Richtlinien.
2014.
[2] Bossel, H. Systeme, Dynamik, Simulation:
Modellbildung, Analyse und Simulation komplexer
Systeme. 1st ed. Norderstedt: Books on Demand
GmbH; 2004. 400 p.
[3] Wenzel, S. Simulation logistischer Systeme. In:
Tempelmeier, H. editors. Modellierung logistischer Abbildung 6: Ablauf der Entwicklung webbasierter
Systeme. Fachwissen Logistik. 1st ed. Berlin, Benutzeroberflächen für Simulationskerne.
Heidelberg: Springer Vieweg;2018. p 1 -34.
[4] Byrne, J., Heavey, C., Byrne, P.J. A review of
web-based simulation and supporting tools. Manivannan, M.S., editors. Proceedings of the 1998
Simulation Modelling Practice and Theory. 2010; Winter Simulation Conference. Winter Simulation
18(3): 253–276. doi: 10.1016/j.simpat.2009.09.013. Conference; 1998 Dec; Washington, DC. p. 429–436.
[5] Odhabi, H.I., Paul, R.J. Macredie, R.D. Developing a [6] Syberfeldt, A., Karlsson, I., Ng, A., Svantesson, J.,
graphical user interface for discrete event simulation. Almgren, T. A web-based platform for the simulation
In Medeiros, D.J., Watson, E.F., Carson, J.S., –optimization of industrial problems. Computers
31Industrial Engineering. 2013; 64(4): p. 987–998 [15] Abts, D. Masterkurs Client/Server-Programmierung
[7] Page, E.H., Buss, A., Fishwick, P.A., Healy, K.J., mit Java. 5th ed. Wiesbaden: Springer Vieweg; 2019.
Nance, R.E., Paul, R.J. Web-Based Simulation: 389 p.
Revolution or Evolution? ACM Transactions on [16] Google. Angular Docs. https://angular.io/docs. 2020.
Modeling and Computer Simulation. 2000; 10(1): p. [17] Facebook Inc. Getting Started.
3–17. https://reactjs.org/docs/getting-started.html. 2020.
[8] Kuljis, J., Paul, R.J. A review of web based [18] Isaak Tappert. JavaScript Frameworks im Vergleich:
simulation: whither we wander? In Joines, J.A., Vue vs. Angular vs. React.
Barton, R.R., Kang, K., Fishwick, P.A., editors. https://entwickler.de/online/javascript/angular-vs-
Proceedings of the 2000 Winter Simulation react-vs-vue-js-579921249.html.
Conference. Winter Simulation Conference. 2000 Dec; 2020.
Orlando, Florida. p. 1872–1881.
[19] X-Company Pty Ltd. React vs angular: Their Biggest
[9] Heavey, C., Dagkakis, G., Barlas, P., differences. https://x-team.com/blog/react-vs-angular/.
Papagiannopoulos, I., Robin, S., Mariani, M., Perrin, 2019.
J. Development of an open-source discrete event
[20] Google. Introduction to Angular concepts.
simulation cloud enabled platform. In Tolk, A., Diallo,
https://angular.io/guide/architecture. 2020.
S.Y., Ryzhov, I.O., Yilmaz, L., Buckley, S., Miller,
J.A., editors. Proceedings of the 2014 Winter [21] Google. Tour of Heroes app and tutorial.
Simulation Conference. Winter Simulation https://angular.io/tutorial. 2020.
Conference; 2014 Dec; Savannah, Georgia. p. [22] Google. Add in-app navigation with routing.
2824–2835. https://angular.io/tutorial/toh-pt5. 2020.
[10] Nance, R.E., Overstreet, C.M. History of computer [23] Hilbrich, S., Gerdes, K., Hinckeldeyn, J., Kreutzfeldt,
simulation software: an initial perspective. In Chan, J. WBS-GUI-Entwicklung.
W.K., D’Ambrogio, A., Zacharewicz, G., Mustafee, https://collaborating.tuhh.de/w-6/forschung/wbs-gui-
N., Wainer, G., Page, E.H., editors. Proceedings of the entwicklung.2020.
2017 Winter Simulation Conference.Winter [24] Pallets. Flask.
Simulation Conference. 2017 Dec; Las Vegas, Nevada. https://flask.palletsprojects.com/en/1.1.x/. 2010.
p. 243–261. [25] Django Software Foundation. Django.
[11] Gan, B.P., Liu, L., Ji, Z., Turner, S.J., Cai, W. https://djangoproject.com. 2020.
Managing event traces for a web front-end to a [26] TestDriven Labs. Django vs. Flask in 2019: Which
parallel simulation. In Peters, B.A., Smith, J.S., Framework to Choose.
Medeiros, D.J., Rohrer, M.W., editors. Proceedings of https://testdriven.io/blog/django-vs-flask/. 2020.
the 2001 Winter Simulation Conference. Winter
[27] Clow, M. Angular 5 Projects: Learn to Build Single
Simulation Conference. 2001 Dec; Arlington,
Page Web Applications Using 70+ Projects. 1st ed.
Virginia. p. 637–644.
New York City: Apress; 2018. 458 p.
[12] März, L., Interaktives Montageplanungssystem zur
[28] MacDonald, D. Practical UI Patterns for Design
Online- Leistungssteuerung. In Dangelmaier, W.,
Systems. 1st ed. New York City: Apress; 2019. 293 p.
Laroque, C., Klaas, A., editors. Simulation in
Produktion und Logistik. Entscheidungsunterstützung [29] Shneiderman, B. et al. Designing the user interface:
von der Planung bis zur Steuerung. 15. ASIM strategies for effective human-computer intercation.
Fachtagung. 2013 Oct; Paderborn. p. 661–668. 6th ed. London: Pearson; 2017. 616 p.
[13] Bergmann, S., Parzefall, F., Straßburger ,S. [30] JSPLUMB UK LTD. jsplumb.
Webbasierte Animation von Simulationsläufen auf http://jsplumb.github.io/jsplumb/home.html. 2020.
Basis des Core Manufacturing Simulation Data [31] The jQuery Foundation. jQueryAPI.
(CMSD) Standards. In Wittmann, J., Deatcu, C., https://api.jquery.com/. 2020.
editors. Tagungsband ASIM 2014. 22. Symposium [32] Saienko, A. DOM to image.
Simulationstechnik. 2014 Sep; Berlin. p. 63–70. https://github.com/tsayen/dom-to-image. 2017.
[14] Hilbrich, S., Köck, H., Hinckeldeyn, J., Kreutzfeldt, J. [33] Lesh, B. et al. RxJS. https://rxjs-dev.firebaseapp.com/.
Entwicklung einer Simulationsmethodik zur schnellen 2020.
Dimensionierung komplexer Materialflusssysteme. [34] Swimlane. ngx-charts.
Logistics Journal: Proceedings. 2017; Vol 2017. doi: https://swimlane.gitbook.io/ngx-charts/. 2020.
10.2195/lj_Proc_hilbrich_de_201710_01.
32Sie können auch lesen
