EEP Gleisplan im Browser anzeigen (Javascript Projekt)

!!! Please ensure, that your contribution or question is placed into the relevant section !!!
Questions about rolling stock, for example, do not belong in "Questions about the Forum". Following is perhaps the right area where your question will be better looked after:
General questions to EEP , Splines, rolling stock, Structures in EEP, landscape elements, Signalling system and controlling, designers, Europe-wide EEP meetings , Gossip
Your cooperation to keep the forum clear is appreciated.
  • 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?

  • Hallo Frank,


    tolles Projekt und prima Umsetzung.

    Danke dafür.

    Was wäre für euch das Wichtigste?

    Alles!

    Mit Ausnahme des Druckens als PDF, denn dafür gibt es genug Möglichkeiten in Windows und den Browsern. Aber es schadet natürlich nicht.

    Zum guten Schluss dann vielleicht noch eine Darstellung der Bodentexturen, LEs und der Immos usw., um wirklich "hübsche" bunte Gleispläne mit allen Infos zu erhalten. Etwa so, wie die Pläne in der guten, alten MIBA. Alle notwendigen Informationen dafür stehen ja auch in der anl3-Datei und lassen sich sicher ebenso wie die Gleise darstellen. Aber das sind dann nur die Sahnehäubchen und Deko-kirschen auf dem jetzt schon guten Tool.

    Der Link sollte hier im Forum in der Filebase und unter nützlichen Links gespeichert werden.

  • Moin, Moin, Frank.

    getestet und sieht gut aus.



    Gruß aus Essen

    Arnoldfan

    (Roland B. aus E.)

    -------------------------------

    EEP13.1, Plugin 2; EEP 15, ; EEP Modelkatalog; HomeNos 13;
    Win10 Prof 64 Bit; 16GB DDR3-Ram; Core i7 2600k; 240 GB SSD; u.a. 3T Festplatte; GTX-650 (2048 MB); DirectX 12; 1. Bildschirm: Samsung S27B370; 2.Bildschirm: SMBX2331


    Lenovo Y700 17ISK i7-6700HQ; 2,6 - 3,5 GHz; Win 10 Home 64 Bit; 16GB DDR4; SSD 512 GB + HDD 1T; GTX 960M (4 GB GDDR5); DirectX 12
    EEP13.1, Plugin 2; EEP 15; EEP Modelkatalog;

  • Hallo Frank,


    Super Sache !


    Was wäre für euch das Wichtigste?

    Für mich wäre eine Möglichkeit optimal mit der man das Ergebnis, sprich das Bild, nachbearbeiten kann.

    Also z.B. Export als BMP-Datei.


    Hintergrund: Man sieht teilweise Dinge, die nicht unbedingt für die Darstellung notwendig sind. Etwa unsichtbare Wasserwege unter Zäunen. Man ist dann in der Lage das nicht benötigte zu entfernen.


    Weiterhin viel Spaß,


    Botho

    :co_k:


    Rechner i5-7500 3,4Ghz | RAM 16GB | GeForce GTX 1060 6GB | W10 Home 1903

    EEP10 - EEP13, EEP14


    Gott hat dem Menschen die Zeit gegeben, aber von Eile hat er nichts gesagt.

    (wird Imru' al-Qais zugeschrieben)

  • Hallo Frank,


    für mich wäre es interessant wenn man das Bild als PNG oder JPG exportieren könnte


    mfg rockbaer / UG1 / Uwe

    EEP15.1 Plugin 1 (User/Dev) / HN15 Dev / diverse Tools von verschiedenen Programmierern

    --PC-- AMD Athlon FX 4100, 16GB DDR3 , Geforce GTX 760 4GB Phantom, 6 TB HDD, 256GB SSD, 1x 21" Monitor 1x 24" Monitor

  • Hallo Frank,


    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).

    Viele Grüße
    Klaus Keuer - KK1 - WBF



    13693-wbfbanner1-jpg

  • frank.buchholz

    Programm EEP_Gleisplan.html

    Hallo,


    das ist es, was mir die ganze Zeit gefehlt hat um mal eine Übersicht über meine Anlage Saarbrücken zu bekommen.

    Vielen Dank dafür.



    Viele Grüße

    Karl Heinz

    Benutzte Programme:

    EEP 15.1 Expert(x64), Patch 2, PlugIn 1

    EEP 14.1 Expert, PlugIn 1

    PlanEx 3.1

    PlanEx-Easy

    Hugo 3.4.2


    Notebook Dell Inspiron 7720

    Intel Core(TM) i7 - 3630QM CPU 2,4/3,8 GHz; 8 GB RAM, nVidia GeForce GT 650 M
    Windows 10 Home - 64 Bit, Version 1903, Betriebssystembuild 18362.295

    Virenscanner McAfee LiveSafe

  • Aber der Tauschmanager kann das auch, oder?

    Vielleicht sogar noch besser , aber nicht gaz so schnell....




    man kann dafür aber im TM alles anzeigen lassen, oder wahlweise einzelne Rubriken ausblenden.

    Aber es werden bei Bedarf im TM auch Gleis ID, und /oder Signal ID., und / oder sogar virtuielle Verbindungen angezeigt.


    obenstehendes Bild mit Gleisen, Wasserwege, Immobilien und Landschaftselementen.

    Nachstehendes Bild ist der reine Gleisplan im TM.



    Bitte,

    das ist keine Kritik an diesem Tool,

    aber solche Möglichkeiten haben wir schon seit langem.


    Nur haben sich die wenigsten den TM genauer angesehen, denn er kann viel viel mehr als nur Tauschen.


    Aber man muß ihn sich besorgen!

    Für viele wird es aber einfacher sein sich hier über den Link mit dem Browser zu verbinden.


    Jeder so wie er mag.

    Aber schön dass es noch immer Kollegen gibt die sich Gedanken machen wie man das EEP_Leben angenehmer machen kann. :bg_1:

    viele Grüße aus Köln

    Peter


    Win 10/64; INTEL i7 - 4770 , 3,40 GHz ; 16 GB RAM ; NVIDEA GeForce GTX 1070 Extreme 8 GB ; EEP 2,43 bis 15 Expert

  • 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:

    JavaScript
    1. const unsichtbar = [ // unsichtbare Gleisstile
    2. 17,     // Wasser, Steuerstrecke
    3. 28, 34, 562, // Gleis
    4. 35,     // Strassenbahn
    5. 36,     // Strasse
    6. 5145, 5146, 5147, // Farm track
    7. 5602,     // Fence
    8. 100000, // Kamerafahrweg
    9. ]

    EEP 6 in 2011, EEP 13 ab Januar 2019, EEP 15 ab Mai 2019 (wegen dem umfangreicheren Lua-Befehlssatz)

    The post was edited 2 times, last by frank.buchholz ().

  • 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.

    EEP 6 in 2011, EEP 13 ab Januar 2019, EEP 15 ab Mai 2019 (wegen dem umfangreicheren Lua-Befehlssatz)

    The post was edited 2 times, last by frank.buchholz ().

  • Servus Frank,


    ganz herzlichen Dank für das geniale Werkzeug. Endlich ein Überblick über die Details meiner Anlage. Fein, dass ich den Plan als PNG speichern und so auch offline nutzen kann.

    Und weil Du freundlicherweise fragst, was man noch gern hätte: für mich wäre die Ergänzung um Signale und Kontakte sehr hilfreich.


    Viele Grüße aus Dresden


    Dieter




    So eine Arbeit wird eigentlich nie fertig, man muss sie für fertig erklären, wenn man nach Zeit und Umständen das Mögliche getan hat.

    Johann Wolfgang von Goethe


    PC: Intel Core i7-4790K CPU @ 4.00GHz, 16 GB RAM, GeForce GTX 980 mit 4095 MB, 256 GB SSD, 2 x 2,0 TB HDD / Win 10 Home / 2 Monitore
    EEP 7 ►9►X►11►12►13►14.1 Expert (x64), Patch 2


    železničář ist tschechisch und heißt Eisenbahner

  • 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.

    Desktop : Windows 10 Pro 64Bit - i7-4790 4.0Ghz - 32Gb RAM - Asus Geforce GTX-06G 1060 (6Gb) - Dual screen Asus VS247 24"
    Laptop : Windows 10 Home 64Bit - i7-4750HQ 3.2Ghz - 16Gb RAM - NVidia GTX960M


    Ich bin dabei seit EEP 6 und benutze jetzt EEP 15


    Free EEP-tools : Model Multiplier / Texture Multiplier / Registry Tool


    4089-banner2018-jpg

  • 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.

    EEP 6 in 2011, EEP 13 ab Januar 2019, EEP 15 ab Mai 2019 (wegen dem umfangreicheren Lua-Befehlssatz)

  • Hallo Frank,


    Ich benutze standard Firefox.

    Habe es mal mit Google Chrome getestet und dann funktioniert es.


    Noch eine kleine Bemerkung : Beim Speichern werden alle Elemente gespeichert, auch die, die nicht markiert sind.


    Mfg,


    EepNolie

    Desktop : Windows 10 Pro 64Bit - i7-4790 4.0Ghz - 32Gb RAM - Asus Geforce GTX-06G 1060 (6Gb) - Dual screen Asus VS247 24"
    Laptop : Windows 10 Home 64Bit - i7-4750HQ 3.2Ghz - 16Gb RAM - NVidia GTX960M


    Ich bin dabei seit EEP 6 und benutze jetzt EEP 15


    Free EEP-tools : Model Multiplier / Texture Multiplier / Registry Tool


    4089-banner2018-jpg

    The post was edited 1 time, last by eepnolie (NR1) ().

  • Auch bei mir ist das so. Chrome geht, bei Firefox ist es eine leere Datei.


    Peter

    Betriebsystemname: Microsoft Windows 10 Pro Education

    Prozessor: AMD Ryzen 5 1600 Six-Core Processor, 3200 MHz, 6 Kern(e), 12 logische(r) Prozessor(en)

    PC:RAM 16 GB

    Grafik Karte: Name NVIDIA GeForce GTX 1060 6GB


    EEP6 mit allen Plugins und Patches
    EEP7 bis13 mit allen Patches und Plugins

    EEP 14 und EEP 15
    Modelkonverter
    PlanEx 3.1
    Home-Nostruktor 13.0
    Modellkatalog
    Bodentextur Tool



  • Ich benutze standard Firefox.

    Hallo,

    ich benutze auch den Firefox als Standard und bei mir funktioniert es.

    Scheint an den Einstellungen des Firefox zu liegen.


    Gruß Karl Heinz

    Benutzte Programme:

    EEP 15.1 Expert(x64), Patch 2, PlugIn 1

    EEP 14.1 Expert, PlugIn 1

    PlanEx 3.1

    PlanEx-Easy

    Hugo 3.4.2


    Notebook Dell Inspiron 7720

    Intel Core(TM) i7 - 3630QM CPU 2,4/3,8 GHz; 8 GB RAM, nVidia GeForce GT 650 M
    Windows 10 Home - 64 Bit, Version 1903, Betriebssystembuild 18362.295

    Virenscanner McAfee LiveSafe

  • Scheint an den Einstellungen des Firefox zu liegen.

    Dann mehr Info bitte...

    Desktop : Windows 10 Pro 64Bit - i7-4790 4.0Ghz - 32Gb RAM - Asus Geforce GTX-06G 1060 (6Gb) - Dual screen Asus VS247 24"
    Laptop : Windows 10 Home 64Bit - i7-4750HQ 3.2Ghz - 16Gb RAM - NVidia GTX960M


    Ich bin dabei seit EEP 6 und benutze jetzt EEP 15


    Free EEP-tools : Model Multiplier / Texture Multiplier / Registry Tool


    4089-banner2018-jpg

  • Dann mehr Info bitte...

    Ist nicht so einfach.

    Es muss aber einen Grund haben, warum es bei mir fuktioniert und bei Dir nicht.


    Sehe mal bei Deinem Firefox bei den Einstellungen für die Sicherheit und für die Cookies nach. Eventuell wird da etwas verschluckt.


    Kontrolliere auch mal Deinen Virenscanner ob der was unterschlägt bei der Speicherung des Bildes.


    Gruß Karl Heinz

    Benutzte Programme:

    EEP 15.1 Expert(x64), Patch 2, PlugIn 1

    EEP 14.1 Expert, PlugIn 1

    PlanEx 3.1

    PlanEx-Easy

    Hugo 3.4.2


    Notebook Dell Inspiron 7720

    Intel Core(TM) i7 - 3630QM CPU 2,4/3,8 GHz; 8 GB RAM, nVidia GeForce GT 650 M
    Windows 10 Home - 64 Bit, Version 1903, Betriebssystembuild 18362.295

    Virenscanner McAfee LiveSafe