Hallo zusammen,
ich habe einen Temperatursensor (DHT22) auf meinem Pi und einen Apache installiert. Von meiner PHP-Seite hole ich per AJAX die Temperatur vom Sensor und stelle ihn auf der Webseite dar. Über die JS-Funktion setInterval() habe ich einen Timer laufen, der alle fünf Sekunden die Temperatur abfragt und aktualisiert.
Leider friert bei dieser Ausführung die Webseite kurz ein, was nicht so schön ist, weil eine Uhr (JavaScript) dann für diese Zeit stehen bleibt.
Meine Codes:
index.php:
[...]
<button onclick="startContinuousDisplay();">startContinuousDisplay()</button>
[...]
/*
Rest sicherlich irrelevant, weil statisch
*/getSensor.php:
<?php
// Get the data from the Pi
// Return the type that is requested in $type
function getData($type) {
$command = escapeshellcmd('sudo /sensor/program/test.py 22 4');
$output = shell_exec($command);
if ($type == "temperature")
return extractTemperature($output);
else if ($type == "humidity")
return extractHumidity($output);
}
# sample output: Temp=22.3* Humidity=41.2%
function extractTemperature($input) {
$temperature = str_replace('Temp=','',$input);
return substr($temperature,0,strpos($temperature,'*'))."°C";
}
function extractHumidity($input) {
$humidity = substr($input, strpos($input, ' '));
return str_replace('Humidity=','',$humidity);
}
echo getData($_GET["type"]);
?>controller.js:
// Show humidity in the div-element
function displayHumidity() {
document.getElementById('displayHumidity').innerHTML = getHumidity();
}
// Show temperature in the div-element
function displayTemperature() {
document.getElementById('displayTemperature').innerHTML = getTemperature();
// also add the current time so it is visible when it has been
// updated the last time
var time = new Date();
document.getElementById('aktualisiert').innerHTML = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
}
// interval variables
var intervalHumidity;
var intervalTemperature;
// start to continuously capture and display data
function startContinuousDisplay() {
intervalHumidity = setInterval(function(){displayHumidity()},5000);
intervalTemperature = setInterval(function(){displayTemperature()},5000);
}
// stop collecting data
function stopContinuousDisplay() {
clearInterval(intervalHumidity);
clearInterval(intervalTemperature);
}getAsyncData.js:
// Get the Data from the Pi sensors
function retrieveDataFromSensor(type) {
xmlhttp = new XMLHttpRequest();
theRequest = "getSensor.php?type="+type;
xmlhttp.open("GET", theRequest, false);
xmlhttp.send();
xmlDoc = xmlhttp.responseText;
return xmlDoc;
}
// Get temperature data
function getTemperature() {
return retrieveDataFromSensor("temperature");
}
// get humidity data
function getHumidity() {
return retrieveDataFromSensor("humidity");
}Der Code ist sicher nicht der beste, aber ich bin auch noch in der Test-Phase (keine gute Entschuldigung). Ich nehme an, irgendwo bei der Ausführung des asynchronen Codes wird die Ausführung verzögert und auf die Antwort gewartet, aber ich dachte, Nebenläufigkeit wäre mit AJAX auch gelöst.
Ich habe auch zwei Buttons, um einmalig Temperatur und Feuchtigkeit abzulesen, da ist es nicht besser mit der Verzögerung:
<button onclick="displayTemperature();">displayTemperature()</button>Habt ihr eine Idee, wie man das hier optimieren könnte?
Vielen Dank und beste Grüße!
Automatisch zusammengefügt:[hr]
Ah, ok, was ich hier mache, sind synchrone AJAX Calls.
Ich habe mir jQuery eingebunden und eine Test-Funktion geschrieben, mit der es nicht mehr hängen bleibt. Thema damit erledigt.
Test():
function test() {
var type = "temperature";
$.ajax({
url: "getSensor.php?type="+type,
async: true,
success:function(result){
if (type == "temperature") {
document.getElementById('displayTemperature').innerHTML = result;
} else if (type == "humidity") {
// todo
}
}});
}