Einfache drahtlose Temperatursensor Aktualisierung Website mit elektrischen Imp und Thermistor (19 / 21 schritt)

Schritt 19: Anzeigen der Daten in Web-Browser-Schritt 1


So das Abrufen der Daten an den Webserver deckt. Der nächste Schritt ist es in Ihrem Web-Browser angezeigt bekommen.

Erstellen Sie eine neue Datei namens index.php und kopieren Sie den folgenden Code hinein.

Alles zwischen einem "<!--" und eine "-->" ist ein HTML-Kommentar, der die Server und Web-Browser ignorieren werden.

< Code beginnen >

<<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< Head >
< Titel > meine Mini-Wetterstation < / title >

<!--die obige Abschnitt würde verzichtet werden, wenn Sie dies auf eine vorhandene Webseite hinzufügen.  Der nächste Teil des Codes muss zwischen < Head > und < / Leiter > Tags in Ihre bestehende Seite. -->

<!--gehören die Jquery-Bibliothek von Google zu bieten, die JSON-Funktionalität-->
< 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()
{
Die Daten im JSON-Format vom Server anfordern
Var CurrentTime = new Date();
$.getJSON('./getJSONdata.php?datatype=full &' + currentTime.getTime(), function(data) {}
Var Elemente = [];
durch den Satz von Schlüssel/Val Paare arbeiten Sie und geben Sie dem Browser wo Sie aktualisieren
$...jeder (Daten, Funktion (Key, Val) {}
Switch(Key)
{
Fall "ImpID":
Document.getElementById("impID").innerHTML = Val;
zu brechen;
Fall "Chan":
Document.getElementById("chan").innerHTML = Val;
zu brechen;
Fall "Datum":
Document.getElementById("date").innerHTML = Val;
zu brechen;
Fall "Zeit":
Document.getElementById("time").innerHTML = Val;
zu brechen;
Fall "Temp":
Document.getElementById("temp").innerHTML = Val;
zu brechen;
Fall "Volt":
Document.getElementById("volt").innerHTML = Val;
zu brechen;
Fall "Standort":
Document.getElementById("location").innerHTML = Val;
zu brechen;
}
});

});
}

OnLoad = Function)
{
Legen Sie ein Zeitintervall, das Update des Textes auf der Seite zu tun
t = window.setInterval("displayLiveData()", "5000);
};

< / script >

<!--wenn einer vorhandenen Seite hinzufügen, würde Sie die oben genannten vor eingefügt haben die < / Leiter > Tag auf dieser Seite-->

< / head >

<!--setzen Sie diesen nächsten Code zwischen die < / Leiter > und < body > Tags in Ihre bestehende Seite. Dies ist einige PHP-Skript, das liest die aktuellen Werte um die ursprüngliche Anzeige der Daten zur Verfügung stellen. JavaScript wird nicht angezeigt, beim ersten Laden der Seite. -->

<? Php
Inhalt der latestImpData.txt und geteilten Werte zu lesen
Variablen für die anfängliche Anzeige
$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 = explodieren ("", $datetime);
$date = $dt [0];
$time = $dt [1];
? >

<!--Ende der Php-Lesung von Werten Teil-->

< Body >
< h1 > meine Mini-Wetterstation < / h1 >
Das ist ein einfaches Stück Code, der liest der Spannungs aus einem Thermistor, konvertiert in C und Displays. </p > < p >
< Ul >
<!--Anzeige--> die Liste der Daten, die zunächst mit Hilfe von Php mit Javascript übernehmen
<!--nach 5 Sekunden kontinuierlich aktualisieren-->
< li > Imp-ID: < span Class = Klasse = "Ajax" Id = "ImpID" Style = "Font-Größe: 15px" ><? Php Echo $impID;? >< / span >< li >
< li > Kanal: < span Class = Klasse = "Ajax" Id = "Chan" Style = "Font-Größe: 15px" ><? Php Echo $chan;? >< / span >< li >
< li > Imp Ort: < span Class = Klasse = "Ajax" Id = "Speicherort" Style = "Schriftart-Größe: 15px" ><? Php Echo $location;? >< / span >< li >
< li > Datum: < span Class = Class = "Ajax" Id = "Datumsformat" = "Font-Größe: 15px" ><? Php Echo $date;? >< / span > (Adelaide/Australien) < li >
< li > Zeit: < span Class = Class = "Ajax" Id = "Zeitformat" = "Font-Größe: 15px" ><? Php Echo $time;? >< / span > (Adelaide/Australien) < li >
< li > Temperatur: < span Class = Klasse = "Ajax" Id = "temp" Style = "Font-Größe: 15px" ><? Php Echo $temp;? >< / span > C < li >
< li > Imp Spannung: < span Class = Klasse = "Ajax" Id = "Volt" Style = "Font-Größe: 15px" ><? Php Echo $volt;? >< / span > V < li >
< /ul >
< p > kann man ein vollständiges Protokoll seit Beginn der Tests von < ein href="data.csv" > hier </a >< / p >
< / body >
< / html >

< Code Ende >

Diese Datei ist eine Mischung aus html, Php und Javascript und zeigt eine ziemlich einfache Seite, die die Werte alle 5 Sekunden aktualisiert.

In Verbindung stehende Artikel

Thermischen Komfort mit elektrischen Imp und Ubidots messen

Thermischen Komfort mit elektrischen Imp und Ubidots messen

Warme Sommertage sind schön, nicht wahr? Temperatur ist noch nicht alles, aber es dauert, bis unsere Körper wohl zu fühlen; Luftfeuchtigkeit spielt auch eine große Rolle. In diesem Tutorial werden wir messen Temperatur und Relative Luftfeuchtigkeit d
Erstellen Sie Ihre eigene intelligente Licht mit elektrischen Imp

Erstellen Sie Ihre eigene intelligente Licht mit elektrischen Imp

Erstellen Sie Ihre eigene intelligente Licht mit elektrischen Imp. Erfahren Sie, wie Sie steuern und überwachen Sie Ihre Lichter aus mobile, Tablet und Desktop in 15 Minuten. $44 in Hardware. Entry-Level.Schritt 1: HardwareZur Vervollständigung diese
Erste Schritte mit elektrischen Imp

Erste Schritte mit elektrischen Imp

Electric Imp macht es einfach und macht Spaß, Internet-Konnektivität für Ihre Geräte zu bringen.Diese Instructables führt Sie durch den Prozess der Erstellung eines elektrischen Imp-Kontos und bekommen Ihre erste Imp online.Sie benötigen die folgende
Einfach Öl-Lampe oder Kerze mit Haushalt Öl und Hanf Wick

Einfach Öl-Lampe oder Kerze mit Haushalt Öl und Hanf Wick

diese instructable ist, zeigen Ihnen eine schnelle und einfache Öllampe ich gemacht.  Dies ist nur um Jungs und Beispiel und einige Daten zu geben.===========================================================================Was Sie brauchen:Öl, Raps, O
Wie baut man eine einfache Website mit WordPress

Wie baut man eine einfache Website mit WordPress

Im Jahr 2014, Aufbau einer einfachen Website nicht bedarf keiner Kodierung Fähigkeiten oder versierte PC-Kenntnisse. Ja, zurück in die Tage früher zu Hand-Code Websites mit HTML, CSS und sogar Flash, aber heute die Website-Erstellung ist viel einfach
Erste Schritte mit Analog.IO und elektrische Imp

Erste Schritte mit Analog.IO und elektrische Imp

Analog.IO ist eine neue Website zum Austausch von Daten-Streams aus dem Internet der Dinge angeschlossenen Geräte. Analog.IO können Sie Ihre Daten über einen Web-Browser anzeigen überall auf der Welt. Sie steuern die Daten, die durch ein eingebettete
Untersetzer mit Laser Schnitten und Sand Blaster Casting

Untersetzer mit Laser Schnitten und Sand Blaster Casting

Machen elegant benutzerdefinierte Untersetzer mit Rapidset Zement alle, eine billige Sandstrahler und 1/8 Zoll-Sperrholz-Stücke auf der Laser-Cutter ausschneiden.Schritt 1: Erstellen Sie Ihre Laser-Cut-Design auf dem Computer Ich habe Autocad und Ado
Hot - Michelada - Cocktail mit scharfer Sauce und Chili-Pulver

Hot - Michelada - Cocktail mit scharfer Sauce und Chili-Pulver

Ein ganz besonderes Getränk für seinen Geschmack "brennen". Eine Mischung aus bitter Bier, hot Sauce und Zitrone machen dieses hervorragende Beilage zu gegrilltem Fleisch zu trinken. Dieses Getränk ist mehr von der mexikanischen Kultur, aber ich
Wie erstelle ich eine Öllampe mit WC-Papier und Alufolie

Wie erstelle ich eine Öllampe mit WC-Papier und Alufolie

Tsein ist eine billige und einfache Möglichkeit, eine Öllampe mit WC-Papier und Alufolie zu machen. Öllampen haben seit Tausenden von Jahren in uns und kann nicht nur nützlich sein in ein Licht aus Notfall, kann jedoch auch sehr dekorativ und sicher
Stoppuhr & Rundenzeit mit Arduino Nano und Maxi 7219 LED-Anzeige (8 Dig X 7 Seg)

Stoppuhr & Rundenzeit mit Arduino Nano und Maxi 7219 LED-Anzeige (8 Dig X 7 Seg)

Hallo an alle,Dies ist ein sehr einfaches Projekt über eine Stoppuhr mit Arduino Nano und Maxi 7219 LED-Display (8 Ziffern X 7 Segmente) erfolgen.Die Stoppuhr mit dieser Art von Display ist neu und etwas Ähnliches konnte ich nicht finden.Die ersten 4
Verkabelung und die Programmierung der elektrischen Imp mit einer LCD-Anzeige

Verkabelung und die Programmierung der elektrischen Imp mit einer LCD-Anzeige

legen eine LCD auf eine elektrische ImpWas ist ein elektrischer Imp?Es ist ein Wifi verbunden-Prozessor in einem super kleinen Paket. Überprüfen Sie die Website für weitere Informationen - Electric ImpIch kaufte das Sparkfun Serial aktiviert 16 x 2 L
Bauen Sie Ihre eigene Website mit Dreamweaver

Bauen Sie Ihre eigene Website mit Dreamweaver

so dass ich zuvor darüber geschrieben habe, bevor die alte Version zuerst zu lesen lohnt, es enthält Anleitungen zu Photoshop und Dreamweaver, das dies nicht der Fall, aber im Vergleich zu diesein verfehlt es einiges weist darauf hin.Heutzutage gibt
Einfacher Start ins Indoor Gardening mit HydroMazing

Einfacher Start ins Indoor Gardening mit HydroMazing

Wenn Sie jemals wollte wachsen Pflanzen wie Kräuter, grün, Erdbeeren und Tomaten zu Hause aber dachte, es wäre wollen Weg zu schwer und zu teuer, dann weiterlesen. Du musst noch Pflanze Pflege Grundlagen erfahren, aber werden Sie tun es mit Hilfe :-)
Einfache drahtlose Energie

Einfache drahtlose Energie

wireless Strom einfach mit diesem einfachen DIY zu machen!Dieses Projekt wird das Prinzip der induktiven Magnetkupplung verwenden, um Strom zwischen zwei getrennten Spulen übertragen.Schritt 1: MaterialienInsgesamt erfordert dieses Experiment nicht z