Hi,
Ich bin Javascript anfänger und versuche eine Webseite als Anzeige für Zuschauer einer Flugshow zu erstellen.
Ich schreibe also in GAMBAS eine Desktopanwendung die Daten an ein Webserver übergibt. Die index.php nimmt die Daten entgegen und erzeugt die Datei pdaten.text.
Wenn ich die index.php normal aufrufe erscheint eine Webseite wo die Daten angezeigt werden.
Rufe ich sie aber mit Parameter auf index.php?ak=a Bekomme ich einen Timestamp wann die Datei pdaten.text zuletzt geändert wurde.
Der Aufruf index.php?ak=n gibt die Daten ohne HTML aus.
Das Javascript soll nun alle 5 Sekunden den Timestamp abrufen (index.php?ak=a) und wenn er neuer ist als der alte dann die Seite neu Laden. Fiffiger wäre es ja die neuen Daten mit index.php?ak=n anzufordern und die DIV Tags zu erneuern. aber das war mir zu kompliziert.
Ich weis das es nicht Perfekt programmiert ist aber wie schon geschrieben bin ich Neuling in Java und co
flotte grüße Dirk
Ich bin Javascript anfänger und versuche eine Webseite als Anzeige für Zuschauer einer Flugshow zu erstellen.
Ich schreibe also in GAMBAS eine Desktopanwendung die Daten an ein Webserver übergibt. Die index.php nimmt die Daten entgegen und erzeugt die Datei pdaten.text.
Code:
Himmel Sone U 10|
Der Erstflug der J-10 fand im Jahr 1996 statt, jedoch erlitt das Programm 1997 durch einen schweren Unfall einen Rückschlag. Daraufhin wurde die Konstruktion verändert und der neue Prototyp flog 1998, um das Testprogramm fortzusetzen. 2004 wurde das Flugzeug schließlich von den Luftstreitkräften der Volksbefreiungsarmee in Dienst gestellt. .|
Luftikus Wolke Wölkchen|
15:06 Uhr|
Sonn Schein Extrall 330 |
15:11 Uhr |
Alle Piloten zur Besprechung |Wenn ich die index.php normal aufrufe erscheint eine Webseite wo die Daten angezeigt werden.
Rufe ich sie aber mit Parameter auf index.php?ak=a Bekomme ich einen Timestamp wann die Datei pdaten.text zuletzt geändert wurde.
Der Aufruf index.php?ak=n gibt die Daten ohne HTML aus.
Das Javascript soll nun alle 5 Sekunden den Timestamp abrufen (index.php?ak=a) und wenn er neuer ist als der alte dann die Seite neu Laden. Fiffiger wäre es ja die neuen Daten mit index.php?ak=n anzufordern und die DIV Tags zu erneuern. aber das war mir zu kompliziert.
Ich weis das es nicht Perfekt programmiert ist aber wie schon geschrieben bin ich Neuling in Java und co
flotte grüße Dirk
PHP:
<?php
if (file_exists("pdaten.text"))
{
$datei = implode("",file("pdaten.text"));
$datenarray= explode("|", $datei );
$pilot1 = $datenarray[0];
$pilot1i = $datenarray[1];
$pilot2 = $datenarray[2];
$pilot2i = $datenarray[3];
$pilot3 = $datenarray[4];
$pilot3i = $datenarray[5];
$lauftext = $datenarray[6];
}
if (isset( $_GET["ak"]) )
{
if ($_GET["ak"] == "a")
{
echo filectime("pdaten.text");
}
if ($_GET["ak"] == "n")
{
echo $pilot1."|".$pilot1i."|".$pilot2."|".$pilot2i."|".$pilot3."|".$pilot3i."|".$lauftext;
}
}
else
{
if (isset( $_POST["p1"]) )
{
$pilot1=$_POST["p1"];
$pilot1i=$_POST["p1i"];
$pilot2=$_POST["p2"];
$pilot2i=$_POST["p2i"];
$pilot3=$_POST["p3"];
$pilot3i=$_POST["p3i"];
$lauftext=$_POST["lauf"];
$datei = fopen("pdaten.text", "w");
fwrite($datei, $pilot1."|\n"); // Name zur Zeit Fliegender Pilot
fwrite($datei, $pilot1i."|\n"); // Infos zu 1
fwrite($datei, $pilot2."|\n"); // Als nächstes startet Pilot 2
fwrite($datei, $pilot2i."|\n"); // voraussichtliche Startzeit
fwrite($datei, $pilot3."|\n"); // Als nächstes startet Pilot 3
fwrite($datei, $pilot3i."|\n"); // voraussichtliche Startzeit
fwrite($datei, $lauftext."|\n"); // Laufschrift
fclose ( $datei );
echo "ok";
}
else
{
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8"/>
<title>Mega Flugshow</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<script type="text/javascript">
<?php echo "var zeit_alt = ".filectime("pdaten.text") ; ?>;
document.addEventListener("load", hol_daten, false);
document.addEventListener("DOMContentLoaded", hol_daten, false);
$(document).ready(function(){ window.setTimeout('hol_daten()', 5000); } );
function hol_daten(){
if (window.XMLHttpRequest){
myAjax = new XMLHttpRequest();
}
else{
//Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obrige Schreibweise nicht unterstützen.
myAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
myAjax.onreadystatechange=function()
{
window.setTimeout(hol_daten, 5000);
if (myAjax.readyState==4 && myAjax.status==200)
{
document.getElementById("block").innerHTML = "Letzte Aktualiliesirung " + new Date();
if (myAjax.responseText > zeit_alt)
{
window.location.reload();
}
else
{
//document.getElementById("block").innerHTML = "responseText ist kleiner" + new Date();
}
}
};
myAjax.open("GET","http://192.168.2.11/flugshow/index.php?ak=a",true);
myAjax.send();
}
</script>
<div id="output"></div>
<table width="100%" >
<tr>
<td width="160"><div id="logo"><img src="logo.png" width="150"></div> </td><td><div id="verein"> Mein Verein</div></td>
</tr>
<tr>
<td colspan="2"><div id="ueber">Es Fliegt:</div></td><td></td>
</tr>
<tr>
<td colspan="2"><div id="pilot"><?php echo $pilot1; ?></div></td><td></td>
</tr>
<tr>
<td colspan="2"><div id="ueber">Als nächstes startet um ca. <?php echo $pilot2i; ?></div></td><td></td>
</tr>
<tr>
<td colspan="2"> <div id="pilot"><?php echo $pilot2; ?></div></td><td></td>
</tr>
<tr>
<td colspan="2"> <div id="ueber">und voraussichtlich um <?php echo $pilot3i; ?><br> </div></td><td></td>
</tr>
<tr>
<td colspan="2"><div id="pilot"><?php echo $pilot3; ?></div></td><td> </td>
</tr>
<tr>
<td colspan="2"><div id="lauftext"><p class="marquee">
<?php
echo $lauftext;
?></p>
</div></td><td></td>
</tr>
</table>
<div id="block"></div>
</body>
</html>
<?php
}
}// if ak
?>
Code:
body {
background-color:#FFCD33;
}
@-webkit-keyframes marquee {
0% { text-indent: 0% }
100% { text-indent: 100% }
}
@keyframes marquee {
0% { text-indent: 0% }
100% { text-indent: 100% }
}
.marquee {
width: 100%;
margin: auto;
padding: 2px;
overflow: hidden;
white-space: nowrap;
border: solid 1px #CCCCCC;
animation: marquee 10s linear infinite;
}
.marquee:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#logo {
border-color:black;
border-radius: 6px;
border:3px green solid;
background-color:#FFCD33;
height: 100px;
}
#starter1 {
border-color:black;
border-radius: 6px;
border:3px green solid;
padding-top: 150px;
padding: 10px;
border-color:gray;
background-color:#FFCD33;
padding-left:10em ;
font-size: 20pt;
}
#startinfo {
display: none;
}
#pilot {
border-color:black;
border-radius: 6px;
border:3px green solid;
background-color:#FFCD33;
font-size: 35pt;
}
#verein {
height: 100px;
background-color:#FFCD33;
font-size: 15pt;
border-color:black;
border-radius: 6px;
border:3px green solid;
}
#ueber {
background-color:#FFCD33;
font-size: 15pt;
}
#lauftext {
border-color:black;
border-radius: 6px;
border:3px green solid;
background-color:#FFCD33;
font-size: 20pt;
}