EEP Gleisplan im Browser anzeigen (Javascript Projekt)

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?

Vielen Dank für eure Rückmeldungen.

Oh, den Tauschmanager habe ich mir noch gar nicht angesehen. Muss wohl wirklich eine Postkarte mit einem schönen Motiv für juergen18 finden:-)

Heute habe ich nur eine Kleinigkeit in Programm EEP_Gleisplan.html eingebaut: Einige der Gleisstile habe ich als 'unsichtbar' gekennzeichnet und eine Checkbox zum Ausblenden dieser Gleise hinzugefügt. Allerdings ist das Ergebnis weder überzeugend noch vollständig: Es gibt anscheinend keine Regel nach der man effizient verschiedene Gleisstiele zu Gruppen wie 'unsichtbar', 'Tunnel', 'Bahnsteig' oder 'Zaun' zusammenfassen könnte. Oder anders herum: wie ließen sich alle Gleisstile bestimmen auf denen Fauhrzeuge fahren?

Auf den Listen auf http://up.picr.de/33875489iu.pdf und http://bahn.hersacher.de/splinekatalog/spkat_intro.htm habe ich bislang nur folgendes entnommen:

wbf (KK1) wrote:

das Programm funktioniert prima - eine Exportfunktion wäre toll (das Format wäre mir relativ egal - bmp. png, jpg, tif, tga, gif, pic, pcx, oder was auch immer am einfachsten umzusetzen ist).

Ich hatte auch erwartet, in Javascript eine einfache Transformation SVG -> PNG zu finden, aber das scheint überraschend schwierig zu sein und erfordert einige Umwege. Glücklicherweise haben andere solch ein Problem auch schon einmal gelöst und im Internet beschrieben. Am Ende musste ich das Coding nur abschreiben. (Der Zoomfaktor des Bowsers scheint dann auch eine Rolle zu spielen, aber solche Feinheiten zu brücksichtigen lasse ich erst einmal weg.)

Die Dateien landen im Standard-Download-Ordner und werden automatisch durchnummeriert.

Ich wähle übrigens PNG und nicht JPG weil dies ein verlustfreies Bilderformat ist - das ist bei computergenerierter Graphik das angemessene Format (und ich weiß auch nicht wie ich direkt JPG erzeugen könnte...). Schade ist dann nur, dass man hier im Forum nur JPG uploaden kann und daher die Datei erst umwandeln muss.

eepnolie (NR1) wrote:

frank.buchholz wrote:

Die Dateien landen im Standard-Download-Ordner und werden automatisch durchnummeriert.

Ich werde nach einem Ordner- und Dateinamen gefragt, beim Speichern ist es immer ein leeres Bild.

Welchen Browser verwendet du?

Bislang habe ich nur auf Google Chrome entwickelt und getestet. Beim Internet Explorer und bei Microsoft Edge habe ich ebenfalls Probleme. Mal sehen wann ich die Browser-Kompatibilität verbessern kann.