Programm EEP_Gleisplan.html
Mit diesem Programm für den Browser kann eine EEP-Anlage-Datei geladen werden und der Gleisplan angezeigt werden.
Das Programm kann online aufgerufen werden (mit dem Link oben) oder man kann die Source-Datei von GitHub lokal auf den Rechner kopieren.
--
Wie alles enstand:
In dem Beitrag "Analyse einer EEP-Anlage-Datei" hatte ich vor einiger Zeit vorgestellt, wie man eine EEP-Anlage-Datei mit der Programmiersprache Lua lesen und analysieren kann. Lua hatte ich gewählt, weil das die Programmiersprache für Erweiterungen in EEP ist und ich hatte gehofft, damit auf Informationen einer Anlage zugreifen zu können während eine Anlage läuft. Na, ja, so richtig zum fliegen ist das nicht gekommen, auch wenn es eine interessante Lua-Programmier-Studie (zumindest für mich) war und ich damit in die Geheimnisse der XML-basierten Anlagedatei eingetaucht bin.
Nun war mir letztens bein Lesen des Beitrags "T-Kreuzung rechts vor links nur mit Lua" aufgefallen, dass es anscheinend keine flexible Möglichkeit gibt Gleispläne mit Details zu den Gleisen anzuzeigen oder auszudrucken, und so ist mir eine weitere Programmier-Projekt-Idee gekommen: "EEP Gleisplan anzeigen".
Für dieses Projekt sind mehrere Bestandteile notwendig:
- Laden der XML-Daten einer EEP-Anlage-Datei
- Analyse der XML-Daten
- Konvertierung der Gleise etc. in graphische Elemente (Linien bzw. Kreisbögen)
- Anzeige mit interaktiven Funktionen zum Positionieren, Verschieben und Zoomen
All dies wäre auch mit Lua möglich, allerdings erfordert dies den Einsatz etlicher Bibliotheken und insbesondere für das Benutzerinterface wohl einigen Programmieraufwand. Jeder normale Browser bringt dagegen bereits viele der benötigten Benutzerinterface-Eigenschaften mit. Daher habe ich das Projekt in Javascript für den Browser entwickelt.
Das so enstandene Programm EEP_Gleisplan.html nutzt die Javascript-Funktion DOMParser um eine .anl-Datei von EEP, die aus XML aufgebaut ist, zu interpretieren und in das Document Object Model (DOM) umzuwandeln. Anschließend wird dynamisch mit Javascript die Graphik des Gleisplanes mit SVG-Befehlen aufgebaut. Die Formatierung der graphischen Elemente erfolgt getrennt von der Definition der Graphik mit der SVG-Variante von CSS. Der Browser kann solche SVG-Graphiken direkt anzeigen. Zusätzlich wird die Bibliothek svg-pan-zoom verwendet, um interaktive Funktionen zum Verschieben und Zoomen anzubieten.
Es gibt natürlich einige Ideen, wie das Programm erweitert werden kann:
- Ergänzung um Signale und Kontakte
- Export der Graphik nach PDF
- genauere Interpretation der Gleisarten
- Eingabefelder zum direkten Positionieren auf Gleise, Weichen, Signale und Kontakte
- Nutzung der Höhenangaben
usw.
Was wäre für euch das Wichtigste?