In deze post leg ik uit hoe ik de data uit mijn weerstation uitlees, en hoe ik deze verwerk in de weerpagina.
Het weerstation uitlezen
Om de data uit de WS-5500 uit te lezen moet je hem verbinden met Weather Underground, of met een eigen server. Ik licht in deze post de optie met Weather Underground toe. In deze post vind je hoe je upload naar jouw eigen server.
Weerstation verbinden met Weather underground
Eerst en vooral moet je een account aanmaken op Weather underground en een nieuw weerstation aanmaken. Je krijgt 2 gegevens: een station ID en een key. Deze 2 gegevens heb je nodig voor de volgende stap.
Om het weerstation in te stellen kan de WS View App gebruikt worden (van Shenzen Fine Offset Electronics Co.,Ltd). De stappen hoe je verbinding maakt staan beschreven in de handleiding van de WS-5500. In deze handleiding staat ook hoe je het weerstation koppelt met Weather Underground.
Hierna word de data van het weerstation geüpload naar WeatherUnderground.
Eens het weerstation verbinding heeft gemaakt met Weather Underground kunnen we de data gaan uitlezen. Hiervoor maken we gebruik van de Weather Underground API.
Log in op weather underground en ga naar het tabje "API KEYS".
Hier kan je een API key aanmaken voor gebruik.
Ik ga de voorbeelden vanaf nu geven voor gebruik met PHP. De API geeft JSON data terug, dus je kan dezelfde API URI's gebruiken met andere programmeertalen.
De huidige data uitlezen
We kunnen de huidige data uitlezen van weather underground met behulp van hun API. De volgende URI kan je hiervoor gebruiken (Vervang STATIONID door het Station ID en APIKEY door jouw API key):
https://api.weather.com/v2/pws/observations/current?stationId=STATIONID&format=json&units=m&numericPrecision=decimal&apiKey=APIKEYDit geeft een JSON object terug. We kunnen dit met een PHP script ophalen
<?php$ch = curl_init();curl_setopt($ch, CURLOPT_URL,"https://api.weather.com/v2/pws/observations/current?stationId=STATIONID&format=json&units=m&numericPrecision=decimal&apiKey=APIKEY");curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);$result = curl_exec ($ch);curl_close ($ch);$json = json_decode($result,true);// Data uit de JSON opslaan in een bestand$timestamp = $json['observations'][0]['obsTimeLocal']; // Tijd$solarRadiation = $json['observations'][0]['solarRadiation']; // Zonnestraling (Watt/m²)$winddir = $json['observations'][0]['winddir']; // Windrichting (°)$uv = $json['observations'][0]['uv']; // UV index$humidity = $json['observations'][0]['humidity']; // Luchtvochtigheid (%)$temperature = $json['observations'][0]['metric']['temp']; // Temperatuur (°C)$windspeed = $json['observations'][0]['metric']['windSpeed']; // Windsnelheid (km/u)$pressure = $json['observations'][0]['metric']['pressure']; // Luchtdruk (hPa)$rain = $json['observations'][0]['metric']['precipTotal']; // Regen vandaag totaal (mm)$rain_rate = $json['observations'][0]['metric']['precipRate']; // Snelheid van de Regen (mm/u)$windchill = $json['observations'][0]['metric']['windChill']; // Windchill factor (°C)$heatindex = $json['observations'][0]['metric']['heatIndex']; // Heat index (°C)$dewpt = $json['observations'][0]['metric']['dewpt']; // Dauwpunt$windstoot = $json['observations'][0]['metric']['windGust']; // Windstoot snelheid (km/u)// Hier kan je de data dan verwerken zoals je wenst. We kunnen deze bijvoorbeeld tonen met:echo ($temperature); ?>Historische data uitlezen
We kunnen naast de huidige data ook de historische data meteen uit weather underground uitlezen. Hiervoor zijn een paar URI's:
- 7 dagen geleden (per dag)
- 1 dag geleden (snelle interval)
- 7 dagen geleden (per uur)
Ik ga hier de api's voor 1 dag geleden en 7 dagen geleden (per uur) toelichten. De data van de afgelopen 7 dagen per dag gebruikt een iets ander formaat. Dit formaat staat grondig beschreven in de API documentatie van Weather underground.
// Endpoint voor 1 dag geleden:https://api.weather.com/v2/pws/observations/all/1day?stationId=STATIONID&format=json&units=m&numericPrecision=decimal&apiKey=APIKEY// Endpoint voor de afgelopen 7 dagen:https://api.weather.com/v2/pws/observations/hourly/7day?stationId=STATIONID&format=json&units=m&numericPrecision=decimal&apiKey=APIKEYDit geeft een array van JSON objecten terug. We kunnen door deze array lopen en de waarden toevoegen aan een array:
<?php$ch = curl_init();// om de data van de afgelopen 7 dagen per uur te gebruiken kan je gewoon de URI vervangencurl_setopt($ch, CURLOPT_URL,"https://api.weather.com/v2/pws/observations/all/1day?stationId=STATIONID&format=json&units=m&numericPrecision=decimal&apiKey=APIKEY");curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);$result = curl_exec ($ch);curl_close ($ch);$json = json_decode($result,true);// Hier gaan we 2 arrays maken, een voor de tijd, en een voor de temperatuur. Als// je meer dan enkel de temperatuur wilt gebruiken dan maak je gewoon nog een array // aan hieronder, en maak je in de for loop ook nog een regel voor de waarde die je aan die array wilt toevoegen$tijdArray = array();$temperatuurArray = array();for ($i = 0; $i < count($json['observations']); $i++) { array_push($tijdArray, $json['observations'][$i]['obsTimeLocal']); array_push($temperatuurArray, $json['observations'][$i]['metric']['tempHigh']);}?>Grafieken maken
De historische data voegden we hiervoor enkel toe aan een array. Er gebeurde nog nietsmee. Deze data toon je best in een grafiekje.Om de data in een grafiekje te tonen zijn een paar opties: PHP met GD, Chart.JS (met JavaScript), of een andere bibliotheek. Ik ga hier gebruik maken van Chart.JS omdat dit veel eenvoudiger is dan PHP GD
Om een grafiek te maken met Chart.JS moeten we het eerst importeren. Hiervoor kan je het volgende toevoegen aan de <head> van je webpagina:
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.bundle.js"></script>Dan voeg je op de plaats waar je een grafiek wilt toevoegen het volgende toe (als je andere data wilt tonen pas je de naam van de array aan, maar let wel dat deze bestaat, zie stuk hierboven)
<canvas id="myChart" style="width: 600px !important; height:400px !important"></canvas><script>var ctx = document.getElementById('myChart').getContext('2d');var myChart = new Chart(ctx, { type: 'line', data: { labels: [<?php foreach($tijdArray as $tijd){echo("'".$tijd."',");}?>], datasets: [{ label: 'Temperatuur', data: [<?php foreach($temperatuurArray as $temperatuur){echo("'".$temperatuur."',");}?>], backgroundColor: [ 'rgba(255, 99, 132, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }});</script>Hiermee toon je een grafiek van in dit geval de temperatuur van de afgelopen dag.
Conclusie
Het Alecto Weerstation is op verschillende manieren uit te lezen, de ene manier al wat eenvoudiger als de andere.
