Enkel trådlös temperatursensor uppdatera webbplatsen med elektriska imp och termistor (19 / 21 steg)

Steg 19: Visa data i web browser steg 1

Skapa en ny fil med namnet index.php och kopiera följande kod i den.

Något mellan en "<!--" och en "->" är en HTML-kommentar som servern och webbläsaren kommer att ignorera.

< koden börja >

<<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< title > min mini väderstation < / title >

<!--avsnittet ovan utelämnas om du lägger detta till en befintlig webbsida. Den nästa bit kod måste vara mellan < head > och < / head >-Taggar i din befintliga sida. -->

<!--inkludera jquery biblioteket från google tillhandahåller funktionen JSON ->
< script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" charset = 'utf-8' >< / script >

< script type = "text/javascript" >

funktion displayLiveData()
{
Begär data i JSON-formatet från servern
var currentTime = nya Date();
$.getJSON('./getJSONdata.php?datatype=full &' + currentTime.getTime(), function(data) {
var träffar = [];
arbeta igenom uppsättningen nyckel/val par och säg webbläsaren var att uppdatera
$.each (data, funktion (nyckel, val) {
Switch(Key)
{
fallet "impID":
document.getElementById("impID").innerHTML = val;
bryta;
fallet "chan":
document.getElementById("chan").innerHTML = val;
bryta;
fallet "datum":
document.getElementById("date").innerHTML = val;
bryta;
fallet "time":
document.getElementById("time").innerHTML = val;
bryta;
fallet "temp":
document.getElementById("temp").innerHTML = val;
bryta;
fallet "volt":
document.getElementById("volt").innerHTML = val;
bryta;
fallet "läge":
document.getElementById("location").innerHTML = val;
bryta;
}
});

});
}

onLoad = funktion)
{
Ange ett tidsintervall att göra uppdateringen av texten på sidan
t = window.setInterval("displayLiveData() tum, 5000);
};

< / script >

<!--om du lägger till en befintlig sida, du skulle har klistrat ovan innan den < / head >-tagg i sidan-->

< / head >

<!--placera nästa koden mellan den < / head > och < body >-Taggar i din befintliga sida. Detta är några PHP-skript som läser de senaste värdena för att ge inledande datavisningen. JavaScript visas inte när sidan laddas först. -->

<? php
Läs innehållet i latestImpData.txt och split värden till
variabler för första visning
$data = file_get_contents("latestImpData.txt");
$convert = explode("|",$data);
$impID = $convert [0];
$chan = $convert [1].
$datetime = $convert [2].
$temp = $convert [3].
$volt = $convert [4].
$location = $convert [5].
$dt = explodera ("", $datetime);
$date = $dt [0];
$time = $dt [1].
? >

<!--slutet av php läsningen av värden del-->

< body >
< h1 > min mini väderstation < / h1 >
< p > detta är en enkel bit kod som läser spänningen från en termistor, konverterar till C och visas. < /p >
< ul >
<!--display datalistan initialt med php med Javascript tar över-->
<!--efter 5 sekunder för att ständigt uppdatera-->
< li > Imp ID: < span class = klass = "ajax" id = "impID" style = "font-size: 15px" ><? php echo $impID;? >< / span >< /li >
< li > kanal: < span class = klass = "ajax" id = "chan" style = "font-size: 15px" ><? php echo $chan;? >< / span >< /li >
< li > Imp plats: < span class = klass = "ajax" id = "läge" style = "font-storlek: 15px" ><? php echo $location;? >< / span >< /li >
< li > datum: < span class = klass = "ajax" id = "datum" style = "font-size: 15px" ><? php echo $date;? >< / span > (Adelaide, Australien) < /li >
< li > tid: < span class = klass = "ajax" id = "tid" style = "font-storlek: 15px" ><? php echo $time;? >< / span > (Adelaide, Australien) < /li >
< li > temperatur: < span class = klass = "ajax" id = "temp" style = "font-size: 15px" ><? php echo $temp;? >< / span > C < /li >
< li > Imp spänning: < span class = klass = "ajax" id = "volt" style = "font-size: 15px" ><? php echo $volt;? >< / span > V < /li >
< /ul >
< p > du kan se en fullständig logg sedan början av testning av < en href="data.csv" > Klicka här < /a >< /p >
< / body >
< / html >

< code slut >

Denna fil är en blandning av html, php och javascript och visar en ganska grundläggande sida som uppdateras värdena var 5 sekunder.