Kits / Starterkit: Wetterstation / Projekte / Live-Anzeige von Messdaten auf einer Webseite / Mit PHP Messwerte live auf einer Webseite anzeigen

Mit PHP Messwerte live auf einer Webseite anzeigen¶

Für diese Projekt setzen wir voraus, dass eine PHP Entwicklungsumgebung eingerichtet ist und ein grundsätzliches Verständnis der PHP Programmiersprache vorhanden ist.

Falls dies nicht der Fall ist sollte hier begonnen werden. Informationen über die Tinkerforge API sind dann hier zu finden.

Ziele¶

Wir setzen die folgenden Ziele für dieses Projekt:

Die Wetterdaten sollen

auf einer Webseite angezeigt werden,
alle 5 Sekunden über AJAX aktualisiert werden und
per kleinem PHP Skript verfügbar gemacht werden.

Nachfolgend werden wir Schritt-für-Schritt zeigen wie dieses Ziel erreicht werden kann.

Schritt 1: HTML und JavaScript¶

Da diese Projekt sich nicht darum dreht eine Webseite zu designen, werden wir eine einfache HTML Seite verwenden:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Tinkerforge Weather Station</title>
  </head>
  <body>
    <p id="illuminance">TBD</p>
    <p id="humidity">TBD</p>
    <p id="air_pressure">TBD</p>
    <p id="temperature">TBD</p>
  </body>
</html>

Der innere Text der vier Zeilen wird vom JavaScript durch die Daten vom PHP Script mittels AJAX ersetzt:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
  function updateMeasurements(){
    $.ajax({
      url: "WeatherStationWebsite.php",
      type: "POST",
      success: function(data) {
        var response = $.parseJSON(data);
        document.getElementById('illuminance').innerHTML = response.illuminance;
        document.getElementById('humidity').innerHTML = response.humidity;
        document.getElementById('air_pressure').innerHTML = response.air_pressure;
        document.getElementById('temperature').innerHTML = response.temperature;
      }
    });
  }

  updateMeasurements();
  setInterval(updateMeasurements, 5000);
</script>

Wir nutzen jQuery um dies so einfach und lesbar wie möglich zu halten. Die Funktion updateMeasurements ruft WeatherStationWebsite.php auf und erwartet es illuminance, humidity, air_pressure und temperature im JSON Format zu erhalten.

Um die Messwerte direct nach dem Öffnen der Webseite angezeigt zu bekommen wird updateMeasurements einmal direkt aufgerufen. Anschließend wird es mit einem 5000ms (5s) Intervall aufgerufen, das zuvor per setInterval(updateMeasurements, 5000) konfiguriert wurde.

Schritt 2: PHP¶

Das PHP Skript selbst ist sehr einfach, es müssen nur die Bricklets initialisiert werden:

<?php

require_once('Tinkerforge/IPConnection.php');
require_once('Tinkerforge/BrickletAmbientLight.php');
require_once('Tinkerforge/BrickletHumidity.php');
require_once('Tinkerforge/BrickletBarometer.php');

use Tinkerforge\IPConnection;
use Tinkerforge\BrickletAmbientLight;
use Tinkerforge\BrickletHumidity;
use Tinkerforge\BrickletBarometer;

$ipcon = new IPConnection();
$brickletAmbientLight = new BrickletAmbientLight("apy", $ipcon);
$brickletHumidity = new BrickletHumidity("7bA", $ipcon);
$brickletBarometer = new BrickletBarometer("d99", $ipcon);

$ipcon->connect("localhost", 4223);

?>

Hier müssen die UIDs (apy, 7bA und d99) durch die UIDs von den eigenen Bricklets ersetzt werden.

Danach müssen die Werte abgerufen werden und in einem Array gespeichert werden.

<?php

$illuminance = $brickletAmbientLight->getIlluminance()/10.0;
$humidity = $brickletHumidity->getHumidity()/10.0;
$air_pressure = $brickletBarometer->getAirPressure()/1000.0;
$temperature = $brickletBarometer->getChipTemperature()/100.0;

$response = array (
    "illuminance"  => "Illuminance: $illuminance Lux",
    "humidity"     => "Humidity: $humidity %RH",
    "air_pressure" => "Air Pressure: $air_pressure hPa",
    "temperature"  => "Temperature: $temperature &deg;C",
);

?>

Zum Schluss muss nur noch die Antwort im JSON Format ausgegeben werden:

<?php

print_r(json_encode($response));

?>

Schritt 3: Alles zusammenfügen¶

Das war's! Zum Schluss muss nur noch die HTML und PHP Datei in ein Verzeichnis gelegt werden, das von einem Webserver wie Apache bedient wird.

Wenn es hierbei Probleme gibt lohnt sich ein Blick in die PHP Installationsanleitung.

Wir haben dies auf einem Ubuntu Rechner getestet. Hier konnten wir PHP und Apache einfach per apt-get installieren:

apt-get install apache2 php5

und beide Dateien unter /var/www/ speichern.

Messwerte live auf einer Webseite anzeigen

weather.html (download):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Tinkerforge Weather Station</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
      function updateMeasurements(){
        $.ajax({
          url: "WeatherStationWebsite.php",
          type: "POST",
          success: function(data) {
            var response = $.parseJSON(data);
            document.getElementById('illuminance').innerHTML = response.illuminance;
            document.getElementById('humidity').innerHTML = response.humidity;
            document.getElementById('air_pressure').innerHTML = response.air_pressure;
            document.getElementById('temperature').innerHTML = response.temperature;
          }
        });
      }

      updateMeasurements();
      setInterval(updateMeasurements, 5000);
    </script>
  </head>
  <body>
    <p id="illuminance">TBD</p>
    <p id="humidity">TBD</p>
    <p id="air_pressure">TBD</p>
    <p id="temperature">TBD</p>
  </body>
</html>

WeatherStationWebsite.php (download):

<?php

require_once('Tinkerforge/IPConnection.php');
require_once('Tinkerforge/BrickletHumidity.php');
require_once('Tinkerforge/BrickletHumidityV2.php');
require_once('Tinkerforge/BrickletBarometer.php');
require_once('Tinkerforge/BrickletBarometerV2.php');
require_once('Tinkerforge/BrickletAmbientLight.php');
require_once('Tinkerforge/BrickletAmbientLightV2.php');
require_once('Tinkerforge/BrickletAmbientLightV3.php');

use Tinkerforge\IPConnection;
use Tinkerforge\BrickletHumidity;
use Tinkerforge\BrickletHumidityV2;
use Tinkerforge\BrickletBarometer;
use Tinkerforge\BrickletBarometerV2;
use Tinkerforge\BrickletAmbientLight;
use Tinkerforge\BrickletAmbientLightV2;
use Tinkerforge\BrickletAmbientLightV3;

/*
    IMPORTANT:

    Configure the Bricklet versions and their UIDs according to the setup.
*/
define(
    'CONFIG',
    array(
        'ambient_light' => array(
                            'version' => 3,
                            'uid' => 'HqJ'),
        'humidity' => array(
                            'version' => 1,
                            'uid' => 'zfs'),
        'barometer' => array(
                            'version' => 2,
                            'uid' => 'GvG')));

$ipcon = new IPConnection();

$humidity = NULL;
$temperature = NULL;
$illuminance = NULL;
$air_pressure = NULL;

$bricklet_humidity = NULL;
$bricklet_barometer = NULL;
$bricklet_ambientLight = NULL;

// Get Bricklet objects.

// Humidity Bricklet.
if (CONFIG['humidity']['version'] == 1) {
    $bricklet_humidity =
        new BrickletHumidity(CONFIG['humidity']['uid'], $ipcon);
}
elseif (CONFIG['humidity']['version'] == 2) {
    $bricklet_humidity =
        new BrickletHumidityV2(CONFIG['humidity']['uid'], $ipcon);
}

// Barometer Bricklet.
if (CONFIG['barometer']['version'] == 1) {
    $bricklet_barometer =
        new BrickletBarometer(CONFIG['barometer']['uid'], $ipcon);
}
elseif (CONFIG['barometer']['version'] == 2) {
    $bricklet_barometer =
        new BrickletBarometerV2(CONFIG['barometer']['uid'], $ipcon);
}

// Ambient Light Bricklet.
if (CONFIG['ambient_light']['version'] == 1) {
    $bricklet_ambientLight =
        new BrickletAmbientLight(CONFIG['ambient_light']['uid'], $ipcon);
}
elseif (CONFIG['ambient_light']['version'] == 2) {
    $bricklet_ambientLight =
        new BrickletAmbientLightV2(CONFIG['ambient_light']['uid'], $ipcon);
}
elseif (CONFIG['ambient_light']['version'] == 3) {
    $bricklet_ambientLight =
        new BrickletAmbientLightV3(CONFIG['ambient_light']['uid'], $ipcon);
}

// Connect.
$ipcon->connect('localhost', 4223);

// Read from the Bricklets.
if ($bricklet_humidity) {
    $humidity = $bricklet_humidity->getHumidity() / 100.0;
}

if ($bricklet_barometer) {
    $air_pressure = $bricklet_barometer->getAirPressure() / 1000.0;

    if(CONFIG['barometer']['version'] == 1) {
        $temperature = $bricklet_barometer->getChipTemperature() / 100.0;
    }
    elseif(CONFIG['barometer']['version'] == 2) {
        $temperature = $bricklet_barometer->getTemperature() / 100.0;
    }
}

if ($bricklet_ambientLight) {
    $illuminance = $bricklet_ambientLight->getIlluminance() / 100.0;
}

// Prepare the response.
$response =
    array (
        'illuminance'  => "Illuminance: $illuminance Lux",
        'humidity'     => "Humidity: $humidity %RH",
        'air_pressure' => "Air Pressure: $air_pressure hPa",
        'temperature'  => "Temperature: $temperature &deg;C");

// Send the response.
print_r(json_encode($response));

?>