Verkehsampelschaltung 02
    
 Home • Zeit • Verkehsampelschaltung 02 QuellCode   drucken  Seite drucken

 25. Juli 2007 - 75 Jahre Verkehrsampel - 02

Grafiken zeitgesteuert tauschen (abhängig vom Sekundenwert). Hier umgesetzt als Schaltung einer Lichtzeichenanlage mit einer Erweiterung: Verkehrsampel mit Restzeitanzeige

zeitabhängger Tausch von Grafiken mit dynamischer Zeitanzeige

UPDATE  03.05.2010, Ampelgrafiken Satz 1 überarbeitet
In Hamburg gabs 2006 die ersten Restrot-Leuchtsignale, die den Autofahrern mit einem Countdown die verbleibende Zeit bis zur freien Fahrt anzeigen - und umgekehrt die Restzeit der Grünphase bis zum Umspringen auf Rot. Bei dem Pilotprojekt sollte untersucht werden, ob die 50 mal 50 Zentimeter großen Boxen mit den 26 mal 26 Zentimeter messenden Sekundenziffern den Verkehrsfluss beschleunigen und die Sicherheit an der belebten Kreuzung erhöhen. Die Experten stritten drarüber, ob die neue Technik wirklich nötig und sinnvoll ist.

Einer meiner Versuche mit JavaScript Grafiken zeitabhängig auszutauschen. Möglicherweise findet dieses Beispiel Anwendung auf einer Fahrschulseite oder sie 'bauen es um' und verwenden es für eine F1-Fanclub-Homepage oder eine Seite für Eisenbahnfreunde. Dann benötigen sie natürlich andere Grafiken.


       Die 4 Ampelgrafiken werden zeitabhängig ausgetauscht. Die gesamte Zeitperiode ist 1 Minute. Zusätzlich wird die Restzeit der Grün- und Rotphasen dynamisch angezeigt und heruntergezählt (Downcounter). Unterhalb der Ampelschaltung zeige ich zur Kontrolle hier die aktuelle Rechnerzeit an.
 
Zeit:



   So funktioniert der Bildtausch

Eigentlich nichts anderes als eine Abfrageschleife, die den Sekundenwert der Rechnerzeit überprüft. Abhängig vom festgestellten Wert wird die Datenquelle (src) der angezeigten Grafik (id="Ampel") mit document.getElementById("Ampel").src entsprechend festlegt.

Schema: 
if (SekundenJetzt > 28 && SekundenJetzt < 32)
document.getElementById("Ampel").src = AlleAmpeln[1].src;
Wenn der Sekundenwert größer als 28 und kleiner als 32 ist, dann entnehme aus dem Register 'AlleAmpeln' die URL-Angaben für die rot-gelbe Ampel. Für das Element mit der ID 'Ampel' gilt dann: 
document.getElementById("Ampel").src = "images/ampel-rot-gelb.jpg"


   So funktioniert die Restzeitanzeige

Innerhalb von if-Abfragen wird der Sekundenwert der Systemzeit dazu benutzt in einer mathematischen Rechenoperation den Wert für die Restzeit zu ermitteln. Der Wert wird in einem 'unsichtbaren' Formularfeld (id="Sec") angezeigt. Dieser Wert wird jede Sekunde mit document.getElementById("Sec").value aktualisiert.

Ich entnehme der Rechnerzeit den Sekundenanteil ... 
var SekundenJetzt = ZeitJetzt.getSeconds();
... und durchlaufe unterschiedliche Abfragen. Beispiel 
if (SekundenJetzt < 33)
Verbleibend = 33 - SekundenJetzt;
Den Wert für die verbleibende Zeit schreibe ich in das Formularfeld 
document.getElementById("Sec").value = Verbleibend;



   verwendete Grafiken

Ich benutze die in Deutschland übliche Phasenabfolge mit vier Signalisierungszuständen und entsprechend 4 Grafiken, die sie durch Rechtsklick herunterladen und verwenden dürfen.

Grafiken 36 × 100 - überarbeitet 03.05.2010

           

Grafiken 36 × 100 - neu 04.05.2010

           

 Grafiken 26 × 67

        

Grafiken 26 × 72 - neu 03.05.2010

        
Grafiken 25 × 32

        

  






4 Grafiken aus Wikimedia Commons (berarbeitet / verkleinert):

Lizenz: CC-Attribution-ShareAlike Autor: MAIX

        

4 Grafiken aus Wikimedia Commons (berarbeitet / verkleinert):

Lizenz: CC-Attribution-ShareAlike Autor: MAIX

        

You are free:
  • to share – to copy, distribute and transmit the work
  • to remix – to adapt the work
Under the following conditions:
  • attribution – You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
  • share alike – If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.