Deutsch
English
Menu
Kits / Starter Kit: Weather Station / Projects / Embed Live Measurements on Website / Using PHP to Embed Live Measurements on Website

Using PHP to Embed Live Measurements on Website

For this project we are assuming, that you have a PHP development environment set up and that you have a rudimentary understanding of the PHP language.

If you are totally new to PHP itself you should start here. If you are new to the Tinkerforge API, you should start here.

Goals

We are setting the following goals for this project:

The weather measurements should be

  • shown on a website,
  • updated every 5 seconds over AJAX and
  • provided by a small PHP script.

In the following we will show step-by-step how this can be achieved.

Step 1: HTML and JavaScript

Since this project is not about designing an actual website, we will leave the HTML as plain as possible:

<!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>

The inner text of the four paragraphs will be replaced by JavaScript with data that is provided by a PHP script over AJAX:

<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>

We use jQuery to keep it as simple and readable as possible. The function updateMeasurements calls WeatherStationWebsite.php and expects to get illuminance, humidity, air_pressure and temperature as a return in the JSON format.

To show the measurements directly upon opening the website, updateMeasurements is called once directly. After that it is called with an interval of 5000ms (5s), configured with setInterval(updateMeasurements, 5000).

Step 2: PHP

The PHP script itself is quite simple, we just need to initialize the Bricklets:

<?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);

?>

Here you have to change the UIDs (apy, 7bA and d99) by the UIDs of your own Bricklets.

After that get the values and package them in a response array:

<?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",
);

?>

Lastly, we print the response in JSON format:

<?php

print_r(json_encode($response));

?>

Step 3: Everything put together

That's it! Now we have to put the HTML and the PHP file in a directory that is served by a webserver, such as Apache.

If you haven't done anything like this, you should take a look at the PHP installation guide.

This was tested on a Ubuntu machine, so we have simply installed PHP and apache via apt-get:

apt-get install apache2 php5

and put both of the files in /var/www/.

Live Measurements on Website

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));

?>