Website fernsteuern / Redner Ampel

[Carla]

Hallo zusammen,

Folgendes möchte ich realisieren:

Ich bastel mir gerade eine sog. Redner-Ampel per Javascript. Das Ganze soll am ende auf einem Smartphone im Fullscreen-Browser laufen und per Wlan soll das Javascript gestartet werden. D.h. das Smartphone im Wlan liegt am Rednerpult und irgendwo an einem anderen PC kann die Ampel gestartet werden.

Könnt Ihr mir sagen, wie ich das am besten realisiere?

Gruss und Dank,

Eure Carla

[dedlfix]

Tach!

Ein Browser lässt sich nicht so einfach fernsteuern. Üblicherweise holt er sich das Zeug, was er anzeigen soll. Danach ist die Verbindung beendet und der Server hat keine Möglichkeit, von sich aus etwas zu schicken. Um dies zu umgehen, gibt es einige Versuche, namentlich (Ajax-)Polling und (besser:) Websockets.

dedlfix.

[1UnitedPower]

Danach ist die Verbindung beendet und der Server hat keine Möglichkeit, von sich aus etwas zu schicken. Um dies zu umgehen, gibt es einige Versuche, namentlich (Ajax-)Polling und (besser:) Websockets.

... und Server-Sent-Events.

[M.]

Könnt Ihr mir sagen, wie ich das am besten realisiere?

Zumindest für die Desktop-Version von Firefox gibt es die Erweiterung "Remote Control", damit kannst du per Telnet eine Javascript-Funktion der Webseite aufrufen.
Nutze ich selbst und funktioniert.

Bei anderen Browsern kenne ich nur die Möglichkeit des ständigen Pollen. Wenn du das jede Sekunde machst, kommt die Ampelschaltung maximal ne Sekunde verzögert, was in deinem Fall kein Problem sein sollte.

Entweder machst du das per EventSource() (weiss nicht, ob ds alle Browser unterstützen, kannste aber sicher nachlesen) oder per setTimeout() und du baust du den Ajax-Request selbst.

Ich nutze dafür z.B. gerne jQuery und als Plugin PeriodicalUpdater. Prototype bringt sowas IMO sogar schon OutOfTheBox mit.

[Jörg Reinholz]

Moin!

Ich bastel mir gerade eine sog. Redner-Ampel per Javascript.

Alles ganz toll, aber: was soll denn der Trigger für das Anzeigen der Farben sein? Vielleicht geht es ja auch ohne "Fernsteuerung".

Jörg Reinholz

[Carla]

Hallo Jörg

Vielleicht geht es ja auch ohne "Fernsteuerung".

Wie meinst Du das? Hast Du eine andere Idee?

Hatte es mir nur so gedacht, weil ich dafür ein altes/günstiges Smartphone nehmen könnte - damit bin ich dann sehr flexibel, d.h. nicht auf Kabel angewiesen.

Das Problem ist eben nur, wie starte ich die Ampel?

Diese bastel ich mit Javascript - läuft per settimeout: anfangs ist der Bildschirm grün, nach 5 Minuten gelb, nach 7,5 Minuten dunkelgelb und dann ab 10 Minuten rot. Das ist schon alles. Brauche jetzt eine Möglichkeit wie ich diese "Ampel" wieder neu starten lassen für den nächsten Redner. Klar könnte das auch jeder Redner selbst machen, das möchte ich aber nicht ...

Alternativ habe ich überlegt, das Smartphone nicht eine Seite immer wieder aufruft und dabei eine Variabel abruft, je nachdem wie die Variabel steht, ändert sich die Farbe. Dann müsst eich natürlich auf einem "Server" die Variablen ändern und dort den Timer laufen lassen ...

Mmmmh?!?

LG, Carla

[Matthias Apsel]

Om nah hoo pez nyeetz, Carla!

Beispielsweise könnte man mit dem Teamviewer den Bildschirminhalt übertragen.

Matthias

[Jörg Reinholz]

Dann müsst eich natürlich auf einem "Server" die Variablen ändern und dort den Timer laufen lassen ...

Genau auf diese Idee wollte ich Dich bringen.

Auf dem Server wird gespeichert, wann die Rede begann, dazu die Parameter. Das Eintragen dieses Ereignisses ist Dein Job, z.B. durch Klicken auf einen Start-Button, was die Verarbeitung eines Skriptes auslöst. Es eine gute Idee, wenn dieses Skript die Zeit seit dem 1.1.1970 00:00:00 in einer Textdatei speichert. Dazu noch Vorgaben, dazu die Möglichkeit diese zu ändern und eine Rede zu starten und zu beenden.

Betrachte den Code als ANREGUNG oder als BESCHREIBUNG des Vorgehens, ich hab ihn NICHT getestet:

starter.php:

<?php  
## config:  
$file      = 'rednerampel.csv';  
$gruen_bis = 8*60+30;  ## 8*60+30 == 8 Minuten 30 Sekunden  
$gelb_bis  = 10*60+0   ## 10 Minuten  
  
## Main  
if (isset($_POST['gruen_min']) && isset($_POST['gruen_sek'])) {  
    $_POST['gruen_sek']=intval($_POST['gruen_min']);  
    $_POST['gruen_sek']=intval($_POST['gruen_sek']);  
} else {  
    $_POST['gruen_sek']=$gruen_bis % 60;  
    $_POST['gruen_min']=$gruen_bis - $_POST['gruen_sek'];  
}  
if (isset($_POST['gelb_min']) && isset($_POST['gelb_sek'])) {  
    $_POST['gelb_sek']=intval($_POST['gelb_min']);  
    $_POST['gelb_sek']=intval($_POST['gelb_sek']);  
} else {  
    $_POST['gelb_sek']=$gelb_bis % 60;  
    $_POST['gelb_min']=$gelb_bis - $_POST['gelb_sek'];  
}  
  
  
if (isset($_POST['starten'] && $_POST['starten']) {  
   $now=time();  
   $gelb=$now+$_POST['gruen_min']*60+$_POST['gruen_sek'];  
   $gruen =$now+$_POST['gelb_min']*60 +$_POST['gelb_sek'];  
   file_put_contents($file,"$gelb;$gruen",LOCK_EX);  
} else {  
    unlink($file);  
}  
  
?>  
<html>  
<h1>Rednerampel</h1>  
<form method="post" action="starter.php">  
<pre>  
         Min    Sek  
Grün bis <input type="text" name="gruen_min" value="<?php echo $_POST['gruen_min']; ?>">,<input type="text" name="gruen_sek" value="<?php echo $_POST['gruen_sek']; ?>">  
Gelb bis <input type="text"  name="gelb_min" value="<?php echo $_POST['gelb_min']; ?>">,<input type="text" name="rot_sek"   value="<?php echo $_POST['gelb_min']; ?>">  
<input type="submit" name="starten" value="Speichern und Beginn der Rede">   <input type="submit" name="stoppen" value="stoppen">  
</pre>  
</form>  
</html>

Die Ampel ist dann einfach. Es wird geschaut, ob die Rede  gestartet ist (wenn nicht: grau) oder ob grün oder gelb angezeigt werden soll (wenn beides nicht, dann rot).

redner.php:

<?php  
## Main  
$prot=explode('/', $_SERVER['SERVER_PROTOCOL'])  
$addr=$prot[0] . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];  
  
if (! file_exists(rednerampel.csv') {  
     $background_color='gray';  
     $text="..."  
} else {  
     $now=time();  
     list($gruen_bis, $gelb_bis)=explode(file_get_contents(';', $file));  
  
     if ($gruen_bis > $now) {  
          $background_color='green';  
          $text="Nur zu!";  
     } elseif ($gelb_bis > $now) {  
          $background_color='yellow';  
          $text="Zum Schluß kommen!";  
     } else {  
          $background_color='red';  
          $text="STOP - bei Weiterreden droht der Ausschluss!";  
     }  
}  
?>  
<html>  
<head>  
    <title>Rednerampel</title>  
    <meta http-equiv="refresh" content="5; URL=___PHP0___">  
</head>  
<body style="heigt:100%;width:100%;backgground-color:___PHP1___">  
:___PHP2___  
</body>  
</html>

Du darfst das korrigieren/verbessern, verfeinern, verschönern, Dir Gedanken machen wie Du es schützt und womöglich sogar für mehrere Säle gleichzeitig/parallel anwendbar machst. Und wie Du das "Dunkelgelb" realisierst auch.

Jörg Reinholz

[Carla]

Hallo Jörg,

hab mal was gebastelt ... alles in einer Datei. Es funktioniert soweit prima und lässt sich einfach erweitern. Allerdings wird durch den Meta-Reload beim Browser des Smartphones immer wieder die Statusleiste eingeblendet ... das ist nicht so schön und irritiert. Hast Du diesbgl. auch noch eine Idee? Hab schon verschiedene Browser ausprobiert ...

LG, Carla

  
<?  
//////////////////////////////////////////////////////////////////////  
//Achtung in der 5. Zeile steht der Timestamp für die Ampel  
//////////////////////////////////////////////////////////////////////  
//1370195793  
//////////////////////////////////////////////////////////////////////  
  
  
//////////////////////////////////////////////////////////////////////  
//Ampelsteuerung aufrufen  
if($_GET["steuerung"])  
{  
    ?>  
    <h2>Ampelsteuerung</h2>  
    <?  
  
    //////////////////////////////////////////////////////////////////////  
    //Ampel starten  
    if($_GET["steuerung"] == "go")  
    {  
        //Einlesen der Datei  
        $datei = file(basename($_SERVER["PHP_SELF"]));  
  
        //Schreiben der Datei  
        $file_to_write = fopen(basename($_SERVER["PHP_SELF"]),"w+");  
        chmod(basename($_SERVER["PHP_SELF"]), 0666);  
  
        for($a = 0; $a < count($datei); $a++)  
        {  
            //In der 5. Zeile wird der Timestamp neu geschrieben  
            if($a == 4)  
            {  
                fwrite($file_to_write, "//".time()."\n");  
            }  
            else  
            {  
                fwrite($file_to_write, $datei[$a]);  
            }  
        }  
        fclose($file_to_write);  
    }  
    ?>  
    <iframe src="<?echo basename($_SERVER["PHP_SELF"]);?>" width="200" height="300" name="ampel"></iframe>  
    <br>  
    <a href="<?echo basename($_SERVER["PHP_SELF"]);?>?steuerung=go">Starten</a>  
    <?  
    die();  
}  
  
  
//////////////////////////////////////////////////////////////////////  
//Ampel zeigen  
$handle = file(basename($_SERVER["PHP_SELF"]));  
$ampel_timestamp = trim(substr($handle[4], 2));  
  
//Hintergrundfarbe zeitabhängig ändern  
//kleiner als 5 Minuten  
if(time() < trim($ampel_timestamp)+5*60)  
{  
    $color = "#3cc002"; //grün  
}  
// zwischen 5 und 7 Minuten  
elseif(time() >= trim($ampel_timestamp)+5*60 && time() < trim($ampel_timestamp)+7*60)  
{  
    $color = "#359b08"; //dunkelgrün  
}  
// zwischen 7 und 9 Minuten  
elseif(time() >= trim($ampel_timestamp)+7*60 && time() < trim($ampel_timestamp)+9*60)  
{  
    $color = "#fab226"; //orange  
}  
// zwischen 9 und 10 Minuten  
elseif(time() >= trim($ampel_timestamp)+9*60 && time() < trim($ampel_timestamp)+10*60)  
{  
    $color = "#f96f23"; //dunkelorange  
}  
//ab 10 Minuten  
elseif(time() >= trim($ampel_timestamp)+10*60)  
{  
    $color = "#ff0000"; //rot  
}  
  
?>  
<html>  
<head>  
    <title>Ampel</title>  
    <?  
     echo '<meta http-equiv="refresh" content="5; URL='.basename($_SERVER["PHP_SELF"]).'">';  
    ?>  
</head>  
  
<body onload="holeDaten()" style="background-color:<? echo $color; ?>;" id="inhalt">  
  
</body>  
</html>