Schnelleinstieg
In diesen Tutorial für PTraffic und PTraffic Pro/ProPlus wird ein Fahrplananzeige mit der zugehörigen Eingabemaske erstellt.
Erstellen Sie zunächst ein neues Verzeichnis und darin die Unterverzeichnisse "ptf" und "javascript". Anschließend kopieren Sie die Projektdateien Ihres PTraffic-Projekts, also alle Dateien mit der Datei-Endung ".ptf" und die Projektdatei mit der Eindung ".ppr", in das Vezeichnis "ptf". Dann kopieren Sie noch die Javascript-Dateien aus der PTraffic-Library in das Verzeichnis "javascript".
Erstellen Sie nun das folgende HTML-Grundgerüst:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="iso-8859-1" />
<script src="javascript/ptraffic_text.js" type="text/javascript"></script>
<script src="javascript/ptraffic.js" type="text/javascript"></script>
<script src="javascript/ptraffic_timetable.js" type="text/javascript"></script>
<script src="javascript/publicsql.js" type="text/javascript"></script>
<title>PTraffic-Library Schnelleinstieg(1)</title>
</head>
<body>
</body>
</html
Im ersten <meta>-Tag wird der Zeichensatz "iso-8859-1" angegeben, da PTraffic in der aktuellen Version kein Unicode-Zeichensatz unterstützt. Die HTML-Datei darf daher auch nicht als Unicode-Datei gespeichert werden sond ern sollte als ASCII- bzw. ANSI-Datei gespeichert werden, sonst werden Umlaute und Sonderzeichen nicht korrekt dargestellt.
Anschließend werden alle benötigten Javascript-Dateien eingebunden.
Zwischen <body...> und </body> geben Sie nun den folgenden Quelltext ein:
<div id="mydiv"> </div> <table id="mytable" border="2"> </table> <script> function show() { showTimetableForm("mydiv", "mytable"); } ptInit(withTimetable, 'ger', 'ptf', show); </script>
Im <div>-Container soll später die Eingabemaske erscheinen. Die Tabelle ist für die Fahrplananzeige. Hier geben wir noch einen Rahmen mit 2 Pixel Breite an ("border="2").
Mit ptInit() wird die PTraffic-Library initialisiert.
Der Parameter "withTimetable" steht für die verwendete Programmversion (hier PTraffic, PTraffic Pro/ProPlus). Als Sprache wird hier deutsch ("ger") gewählt und als Verzeichnis für die Projektdateien das Verzeichnis "ptf". Zusätzlich wird als Callback-Funktion die Funktion "show" übergeben. Dies bedeutet, dass die Funktion "show" nach der Initialisierung aufgerufen wird.
In der Funktion "show" wird die Funktion "showTimetableForm" aufgerufen. Diese zeigt eine Eingabemaske zur Auswahl eines Fahrplans an.
Als Parameter wird die id des <div>-Tags für die Eingabemaske und die id der Tabelle für den Fahrplan angegeben.
Anzeigebeispiel: So sieht's aus
Weitere Beispiele
Auf die gleiche Weise können wir viele weitere Funktionen aufrufen. Dazu muss nur der Funktionsname "showTimetable" ausgetauscht werden - die Parameter sind identisch:
showLineCourseForm (Linienverlauf)
showCurrentRidesForm
(Fahrplan mit aktuell stattfindende Fahrten anzeigen)
showTimetablePeriodForm (Fahrplan für einen bestimmten Zeitraum anzeigen)
showStationTimetableForm (Stations-Fahrplan)
showDeparturesForm (Stations-Abfahrten)
Für die Anzeige von Bildfahrplänen wird statt des <table>-Elements ein <canvas>-Element benötigt:
<canvas id="mycanvas" style="border:2px"> </canvas>
hier wurde noch ein schwarzer Rahmen mit 2 Pixel Breite angegeben. Der Funktionsaufruf sieht dann so aus:
showGraphicalTimetableForm("mydiv", "mycanvas");
Anzeigebeispiel: So sieht's aus
Für die Anzeige aller Stationen oder aller Linien können wir das <div>-Element löschen. Als Parameter wird nur die id des <table>-Elements übergeben:
showStations("mytable");
showLines("mytable");
Alle Beispiele in einer Anwendung zusammenfassen
Wie wir gesehen haben werden alle Funktionen ähnlich aufgerufen. Unterschiedlich ist lediglich, welche der HTML-Elemente von den 3 Elementen <div>, <table> oder <canvas> wir als Parameter übergeben. Es ist daher einfach, eine Anwendung zu schreiben in der wir aus den vorhandenen Funktionen die passende auswählen.
Dazu erstellen wir zunächst die passende Auswahlbox:
Auswahl: <select name="sbAuswahl" id="sbAuswahl" onChange="show();">
<option selected value="1">Stationen</option>
<option value="2">Linien</option>
<option value="3">Linienverlauf</option>
<option value="4">Fahrplan</option>
<option value="5">aktuelle Fahrten</option>
<option value="6">Zeitraum-Fahrplan</option>
<option value="7">Stations-Fahrplan</option>
<option value="8">Stations-Abfahrten</option>
<option value="9">Bildfahrplan</option>
</select>
<br>
Die Werte "1" bis "9" werden später benutzt um die richtige Funktion für das gewählte Element aufzurufen. Der Parameter "selected" bei der ersten Option bewirkt dass diese vorausgewählt wird. Der onChange-Parameter legt fest dass bei einer Änderung der Auswahl die Funktion show() aufgerufen wird.
Anschließend legen wir die 3 HTML-Elemente (<div>, <table> und <canvas>) an:
<div id="mydiv"> </div><table id="mytable" border="2"> </table><canvas id="mycanvas" style="border:2px solid #000000;"> </canvas>
Nun folgt der Javascript-Abschnitt mit der Funktion show() um die ausgewählte Funktion aufzurufen:
<script>
function show() {
var wert = document.getElementById("sbAuswahl").options[document.getElementById("sbAuswahl").selectedIndex].value; var cv = document.getElementById("mycanvas");
var context = cv.getContext('2d'); document.getElementById("mydiv").innerHTML = "";
document.getElementById("mytable").innerHTML = ""; document.getElementById("mycanvas").style.visibility = (wert == 9) ? "visible" : "hidden";
cv.height = 200;
cv.width = 200;
context.fillStyle = "white";
context.fillRect(0, 0, cv.width, cv.height);
switch (wert) {
case "1":
showStations("mytable");
break;
case "2":
showLines("mytable");
break;
case "3":
showLineCourseForm("mydiv", "mytable");
break;
case "4":
showTimetableForm("mydiv", "mytable");
break;
case "5":
showCurrentRidesForm("mydiv", "mytable");
break;
case "6":
showTimetablePeriodForm("mydiv", "mytable");
break;
case "7":
showStationTimetableForm("mydiv", "mytable");
break;
case "8":
showDeparturesForm("mydiv", "mytable");
break;
case "9":
showGraphicalTimetableForm("mydiv", "mycanvas");
break;
}
}
In "wert" wird der Wert (value) für die ausgewählte Funktion gespeichert. die Variablen "cv" und "context" werden für den Zugriff auf das Canvas-Element benötigt.
Anschließend werden die Inhalte der div- und table-Elemente geleert. Das canvas-Element wird abhängig von der gewählten Funktion unsichtbar oder sichtbar (bei Bildfahrplan-Funktion) geschaltet. Außerdem wird der Canvas-Inhalt gelöscht (mit weißer Hintergrundfarbe überschrieben) und die Größe auf 200x100 Pixel geändert.
In der case-Anweisung wird anschließend abhängig vom Wert der Auswahlbox die richtige Funktion aufgerufen.
Zum Schluß wird wie zuvor die PTraffic-Library initialisiert und der Javascipt-Teil beendet.:
ptInit(withTimetable, 'ger', 'ptf', show);
</script>
Durch die Übergabe von "show" als Callback-Funktion wird für die vorselektierte Auswahl "Stationen" die zugehörige Funktion aufgerufen.
Anzeigebeispiel: So sieht's aus
Kleine Verbesserungen
Teilweise erscheint bei einigen Browsern bei der Auswahl des Bildfahrplans ein kleiner Punkt an der Position des <table>-Elements. Anstatt nur das <canvas>-Element abhängig von der gewählten Funktion unsichtbar oder sichtbar zu schalten können wir dies auch mit dem <table>-Element machen. Dazu fügen wir in der Funktion "show" folgende Zeile ein (rot):
...
document.getElementById("mycanvas").style.visibility = (wert == 9) ? "visible" : "hidden";
document.getElementById("mytable").style.visibility = (wert != 9) ? "visible" : "hidden";
cv.height = 200;
...
Außerdem wollen wir erreichen dass beim Aufruf der Website zunächst zunächst nichts ausgewählt ist. Ersetzen Sie die Zeile mit dem Aufruf von "ptInit" durch folgenden Quelltext:
document.getElementById("sbAuswahl").selectedIndex = -1;
document.getElementById("mycanvas").style.visibility = "hidden";
document.getElementById("mytable").style.visibility = "hidden";
ptInit(withTimetable, 'ger', 'ptf');
Hier wird zunäächst der Parameter "selectedIndex" für die Auswahlbox auf den Wert "-1" gesetzt. Dies bewirkt dass kein Element vorausgewählt ist.
Anschließend werden das <canvas>-Element und das <table>-Element unsichtbar geschaltet. In der Funktion "show" haben wir ja dafür gesorgt dass das jeweils benötigte HTML-Element angezeigt wird.
In der Funktion "ptInit" haben wir den letzten Parameter entfernt. Da wir keine Vorauswahl mehr treffen muss die Funktion "show" nach der Initialiserung nicht mehr aufgerufen werden.