Webentwicklung für den im Simulator integrierten Browser: Unterschied zwischen den Versionen

Aus ZusiWiki
Zur Navigation springen Zur Suche springen
Die Seite wurde neu angelegt: „Im Simulator und 3D-Editor ist ein Microsoft Internet Explorer integriert. Dieser kann derzeit für folgende Funktionen genutzt werden: * Darstellung einer Be…“
 
F. Schn. (Diskussion | Beiträge)
 
(23 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
Im Simulator und 3D-Editor ist ein Microsoft Internet Explorer integriert. Dieser kann derzeit für folgende Funktionen genutzt werden:
== Grundlagen ==
Simulator und 3D-Editor nutzen den ins Betriebssystem integrierten Edge derzeit für folgende Funktionen:


* Darstellung einer Begrüßung nach dem Laden eines Fahrplans
* Darstellung einer Begrüßung nach dem Laden eines Fahrplans
* Einblendung eines "Anfangsbefehls" nach dem Aufgleisen eines Zuges
* Einblendung eines „Anfangsbefehls“ nach dem Aufgleisen eines Zuges
* Einblendung von vorkonfigurierten oder individuellen Befehlsformularen bei der Fahrt des Zuges
* Einblendung von vorkonfigurierten oder individuellen Befehlsformularen bei der Fahrt des Zuges


Zusi verwendet hierbei den WebView2. Gibt es Probleme hierbei, fällt Delphi auf den InternetExplorer zurück, der bis heute tief in Windows integriert ist.


== Erhöhung des IE-Feature-Levels ==
== Zu testende Konfigurationen ==
Der verwendete Browser ist auf Windows-Systemen immer der Internet Explorer, auch wenn der Anwender auf seinem Desktop die Zugriffsmöglichkeiten auf den IE deinstalliert hat und eigentlich einen anderen Browser verwendet.
Auf Rechnern mit Windows Vista oder neuer wird der Zusi-integrierte Webbrowser standardmäßig immer auf dem Feature-Level des Internet Explorer 7 gestartet, und zwar auch dann, wenn auf dem Desktop eine neuere IE-Version zur Verfügung steht. Da die minimale Systemanforderung von Zusi derzeit Windows XP ist, muss man bei der Web-Entwicklung für den Zusi-integrierten Browser theoretisch auch davon ausgehen, dass zur Darstellung nur der IE 6 zur Verfügung steht. In der Praxis sollte man aber davon ausgehen, dass die wenigen verblieben Windows-XP-Systeme irgendwann auf den IE 8 (letzte noch für XP erschienene Version) upgedatet wurden.


Deshalb sollte bei der Entwicklung beachtet werden, dass auch bei Verwendung moderner Webdesign-Elemente die Darstellung als "Rückfallebene" in alten Browsern akzeptabel aussieht. Soweit man sich also Gedanken um die Abwärtskompatibilität der html-Dateien gemacht hat, spricht allerdings auch nichts dagegen, durch eine besondere Meta-Deklaration in der html-Datei einen höheren Feature-Level des Internet-Explorers anzufordern, um auf modernen Rechnern eine bessere Darstellung zu erreichen. Wenn beispielsweise ein Feature verwendet wird, das mindestens den IE 9 erfordert, fügt man folgende Deklaration in den Kopf der html-Datei ein:
WebView2 verwendet ein Edge-Derivat mit der Cromium-Engine.


<code><meta http-equiv="X-UA-Compatible" content="IE=9"></code>
Unter Wine wird zur HTML-Anzeige ein Gecko-Derivat (ähnlich Firefox) verwendet.


Wenn auf dem System ein IE 9 oder höher zur Verfügung steht, wird dieser damit eingeschaltet. Ein System ohne IE 9 wird sein Bestes geben, um die Webseite im Rahmen seiner Möglichkeiten irgendwie darzustellen. Es sollte daher auf jeden Fall geprüft werden, ob die Darstellung auch ohne diese Meta-Deklaration annehmbar aussieht.
Möchte man Webseiten für Zusi entwickeln, sollte man daher für folgende Platformen testen:
* Aktueller Chromium (z.B. Edge)
* Aktueller Gecko (z.B. Firefox)


=== Beispiele für wünschenswerte Erhöhung des Feature-Levels ===
Der Test sollte umfassen:
==== Sound abspielen ====
* Normale Darstellung
Als Gimmick könnte man bei der Einblendung eines individuellen Befehls ein vorproduziertes "Zugfunkgespräch" zwischen Tf und Fdl einspielen.
* Drucken mit Hintergrundbildern (zu finden in den Druckoptionen)
Ab IE 9 wird hierfür das HTML5-Audio-Tag unterstützt. Leider kann der IE9 dabei nur die Formate MP3 und AAC abspielen. Aufgrund von Lizenzgebührforderungen der MP3-Patenthalter scheidet die Verwendung von MP3 im offiziellen Zusi-Datenbestand allerdings aus (Die Patente sind wohl inzwischen in Deutschland abgelaufen. Da Zusi 3 allerdings im Prinzip weltweit vertrieben wird, muss auch die Patentsituation in anderen Ländern berücksichtigt werden).
* Drucken ohne Hintergrundbilder
AAC hat den Vorteil, dass bei der Verteilung von AAC-Dateien auf Datenträgern keine Patentgebühren fällig werden. Ob AAC-Dateien Teil des offiziellen Zusi-Datenbestands werden können, muss jedoch (Stand Januar 2016) noch abschließend von Firma Hölscher entschieden werden.


Eine Alternative, die sogar zum IE 6 kompatibel ist, ist die Verwendung des <bgsound>-Elements. Damit ist auch das Abspielen von wav-Dateien möglich.
== Einbinden externer Dateien in Befehlsvorlagen ==


==== Besondere Durchstreichungen ====
Das Einbinden externer Dateien (Bilder, CSS, ...) in Befehls''vorlagen'' (nicht komplett individuelle Befehls-HTMLs) gestaltet sich schwierig, da die ausgefüllte Befehlsdatei vom Simulator im Temp-Verzeichnis abgelegt wird. Stattdessen nutzt man für CSS das <code>style</code>-Tag und für andere Dateien [https://en.wikipedia.org/wiki/Data_URI_scheme Data-URIs].


==== Text rotieren ====
Auf das Einbinden von Dateien aus dem Internet (Bilder, Webfonts, ...) sollte man verzichten. Zusi liefert die Schriftart Open Sans im Ordner <code>_Setup\timetable_basics</code> mit.
 
== JS-Scripte ==
Bei JavaScripten muss darauf geachtet werden, dass kein Zeilenkommentar ("/<span/>/blub") möglich ist, da Zusi die Zeilenumbrüche entfernt. Kommentare müssen daher mit "/<span/>*Blubb*<span/>/" geschrieben werden.
 
Im Regelfall wird der Fallback auf den InternetExplorer nicht ordentlich funktionieren, wenn man JS einsetzt.
 
Zum Schutz vor unbefugtem Zugriff auf den eigenen Rechner können Zusi-Webseiten auf nahezu keine externen Daten zugreifen. Ausgenommen sind Daten, die nur zur Anzeige dienen können, etwa CSS- und PNG-Dateien. Details sind im Regelfall unter dem Stichwort Cross-Origin Resource Sharing (CORS) zu finden.
 
== Alte Themen ==
Alte Themen sind hier aufgeführt: https://zusiwiki.echoray.de/index.php?title=Webentwicklung_f%C3%BCr_den_im_Simulator_integrierten_Browser&oldid=899

Aktuelle Version vom 7. Juli 2026, 22:20 Uhr

Grundlagen

Simulator und 3D-Editor nutzen den ins Betriebssystem integrierten Edge derzeit für folgende Funktionen:

  • Darstellung einer Begrüßung nach dem Laden eines Fahrplans
  • Einblendung eines „Anfangsbefehls“ nach dem Aufgleisen eines Zuges
  • Einblendung von vorkonfigurierten oder individuellen Befehlsformularen bei der Fahrt des Zuges

Zusi verwendet hierbei den WebView2. Gibt es Probleme hierbei, fällt Delphi auf den InternetExplorer zurück, der bis heute tief in Windows integriert ist.

Zu testende Konfigurationen

WebView2 verwendet ein Edge-Derivat mit der Cromium-Engine.

Unter Wine wird zur HTML-Anzeige ein Gecko-Derivat (ähnlich Firefox) verwendet.

Möchte man Webseiten für Zusi entwickeln, sollte man daher für folgende Platformen testen:

  • Aktueller Chromium (z.B. Edge)
  • Aktueller Gecko (z.B. Firefox)

Der Test sollte umfassen:

  • Normale Darstellung
  • Drucken mit Hintergrundbildern (zu finden in den Druckoptionen)
  • Drucken ohne Hintergrundbilder

Einbinden externer Dateien in Befehlsvorlagen

Das Einbinden externer Dateien (Bilder, CSS, ...) in Befehlsvorlagen (nicht komplett individuelle Befehls-HTMLs) gestaltet sich schwierig, da die ausgefüllte Befehlsdatei vom Simulator im Temp-Verzeichnis abgelegt wird. Stattdessen nutzt man für CSS das style-Tag und für andere Dateien Data-URIs.

Auf das Einbinden von Dateien aus dem Internet (Bilder, Webfonts, ...) sollte man verzichten. Zusi liefert die Schriftart Open Sans im Ordner _Setup\timetable_basics mit.

JS-Scripte

Bei JavaScripten muss darauf geachtet werden, dass kein Zeilenkommentar ("//blub") möglich ist, da Zusi die Zeilenumbrüche entfernt. Kommentare müssen daher mit "/*Blubb*/" geschrieben werden.

Im Regelfall wird der Fallback auf den InternetExplorer nicht ordentlich funktionieren, wenn man JS einsetzt.

Zum Schutz vor unbefugtem Zugriff auf den eigenen Rechner können Zusi-Webseiten auf nahezu keine externen Daten zugreifen. Ausgenommen sind Daten, die nur zur Anzeige dienen können, etwa CSS- und PNG-Dateien. Details sind im Regelfall unter dem Stichwort Cross-Origin Resource Sharing (CORS) zu finden.

Alte Themen

Alte Themen sind hier aufgeführt: https://zusiwiki.echoray.de/index.php?title=Webentwicklung_f%C3%BCr_den_im_Simulator_integrierten_Browser&oldid=899