Widgets voor website

Laatste update: 12 juli 2021

Vanaf nu is het mogelijk om de waarnemingen van een weerstation uit het BMCB-netwerk in real-time te tonen op uw website. 

De widget gaat automatisch elke ±10 minuten gaan updaten. De update gebeurt tussen de 1e en 2e minuut na de start van het 10-minuten venster, tussen minuut 1 en 2, 11 en 12, 21 en 22, enz… Dit spreiden in de tijd wordt gedaan om de belasting op de server te spreiden in de tijd en zodoende de surfervaring bij het opvragen van andere pagina's goed te houden.

U krijgt zodoende altijd de laatste waarnemingen of cijfergegevens te zien. Wanneer u met de muis over een bepaalde parameter beweegt ("hovert") dan verschijnt er een pop-up in leesbare tekst wat het getal juist weergeeft.

De widget maakt gebruik van een “iframe”. Een “iframe” laat het toe een andere webpagina binnen de webpagina te tonen. Die “andere webpagina” is onze widget…

Wat zijn de mogelijkheden om de widget te configureren om deze zo perfect mogelijk bij uw website te laten aansluiten? Een aantal parameters moeten aanwezig zijn, andere kunnen vrij gekozen worden (indien u tevreden bent met de defaultwaarden).

Een voorbeeld van de html-code van een webpagina met één widget is hieronder terug te vinden:

Het iframe zelf bestaat uit de URL naar de widget (src=), daarnaast ook een parameter “width” die de breedte van het iframe vastlegt en de “height” voor de hoogte ervan. Indien de getallen horend bij de parameters te klein zijn, dan worden schuifbalken (scrollbars) getoond, wat uiteraard niet de bedoeling is. De getallen wat vergroten tot deze balken verdwijnen is de oplossing. De parameter frameborder="0" zorgt ervoor dat er geen randen zichtbaar zijn van het iframe.

We concentreren ons op een deel van het <iframe>, het stuk code dat linkt naar de widget, hierboven weergegeven in de oranje kleur. Respecteer kleine en grote (hoofd-) letters !!

1. De URL (src=) start altijd met “https://meteo-be.net/widget/v1/” en hangt overal aan elkaar zonder enige spatie ertussen en staat tussen dubbele aanhalingstekens. Laat u niet misleiden doordat deze URL op meerdere lijnen wordt weergegeven (door de browser of editor), in werkelijkheid is dit 1 lange regel tekst.
2. De naam van het weerstation:
   • In de widget kan maar data van 1 weerstation getoond worden. Wilt u meerdere stations tonen, dan moeten meerdere widgets gemaakt worden.
   • Waar de stations van het BMCB-netwerk zich bevinden kunt u bekijken op bijvoorbeeld de kaart van België (menu “Weer” / “ Kaart”)
   • De naam in de URL dient overeen te komen met de stationsnaam die u in de adresbalk ziet wanneer u op het desbetreffende station op de kaart klikt. In ons voorbeeld is dit “zichem-scherpenheuvel”. U dient de volledige naam te gebruiken!
   • Na de stationsnaam komt een vraagteken “?”
3. De taal van de widget:
   Voorbeeld: “l=nl” om de widget in het Nederlands weer te geven
   • “nl” voor Nederlands
   • “fr” voor Frans
   • “en” voor Engels
4. De lijst met te tonen parameters, periode en aggregaten (= som of totaal, het gemiddelde, het minimum, het maximum). 
   De parameters worden in de widget getoond in de volgorde zoals in de URL. De lijst van de parameters wordt voorafgegaan door “&f=”
   De volgorde is periode:aggregaat:parameter
   Merk op dat de drie items gescheiden zijn door een dubbele punt “:”
   Wanneer de periode “de voorbije 10 minuten” is, dan moet enkel de parameter vermeld worden (aggregaten zijn hier immers niet van toepassing aangezien het maar 1 tijdvak van 10min betreft).
   Merk ook op dat alle waarden slaan op tijdvakken van 10 minuten! Gedurende deze periode van 10 minuten hebben we een gemiddelde temperatuur (= temperature), een minimumtemperatuur (= temperature_min) en maximumtemperatuur (= temperature_max). Hetzelfde geldt voor de zonnestraling (irradiation en het maximum, irradiation_max) en ook de windsnelheid (wind en ook wind_speed_high).
   
   • de mogelijke parameters in de URL zijn (let wel dat het station de gevraagde parameter ook meet, bijv. de wind!):
     • “temperature” voor de gemiddelde temperatuur
     • “temperature_min” voor de minimumtemperatuur
     • "temperature_max" voor de maximumtemperatuur
     • “dewpoint” voor de dauwpunttemperatuur
     • “humidity” voor de relatieve vochtigheid
     • “pressure” voor de luchtdruk herleid op zeeniveau
     • “rain_amount” voor de neerslaghoeveelheid
     • “irradiation” voor de gemiddelde zonnestraling
     • “irradiation_max” voor de maximale zonnestraling
     • “wind” voor de gemiddelde windsnelheid en windrichting
     • “wind_speed_high” voor de maximale windstoot
   • de mogelijke periodes zijn:
     • “day” is sinds het begin van de huidige dag om 00:00 lokale tijd
     • “last_12h” is de afgelopen 12 uur
     • “last_24h” is de afgelopen 24 uur
     • “last_7d” is de voorbije 7 dagen (heden tot 168 uur terug in de tijd)
     • “last_30d” is de voorbije 30 dagen (heden tot 720 uur terug in de tijd)
     • “week” is de huidige week (met begin van de week op maandag 00:00 LT)
     • “month” is sinds het begin van deze maand om 00:00 lokale tijd
     • de defaultwaarde is de voorbije periode van 10 minuten; deze periode moet niet gespecificeerd worden
   • de mogelijke aggregaten zijn:
     • “sum” voor het totaal van de waarden in de gespecificeerde periode
     • “average” voor de gemiddelde waarde van alle gegevens in de gespecificeerde periode
     • “min” voor het laagste waarde van alle gegevens in de gespecificeerde periode
     • “max” voor de hoogste waarde van alle gegevens in de gespecificeerde periode
   • voorbeelden:
     • de minimumtemperatuur van vandaag sedert 00:00 lokale tijd
       “day:min:temperature_min” 
       merk op dat we hier het minimum nemen van alle minimumwaarden (= temperature_min) die voorkwamen in de 10min tijdvakken
     • de maximumtemperatuur sedert het begin van de maand
       “day:max:temperature_max” 
       merk op dat we hier het maximum nemen van alle maximumwaarden (= temperature_max) die voorkwamen in de 10min tijdvakken
     • de totale neerslagsom van de voorbije 7 dagen (= van de voorbije 168 uur)
       “last_7d:sum:rain_amount”
     • de totale zonnestraling die we vandaag al hebben ontvangen
       “day:sum:irradiation”
   • voorbeelden voor meerdere parameters in de widget:
     • de parametergroepen (= groep van periode:aggregaat:parameter) worden gescheiden door een puntkomma “;”
     • u wilt een widget met daarin onder elkaar de actuele temperatuur, de minimum- en maximumtemperatuur van de dag
       “temperature;day:min:temperature_min;day:max:temperature_max” 
       merk op dat er op het einde van de hele lijst er geen puntkomma aanwezig is!
5. De stijl van de widget
   • Wanneer aan de stijl iets veranderd wordt, dan dient vooraf de “&s=” aangebracht te worden
   • Meerdere stijlitems dienen gescheiden te worden door een puntkomma “;”
   • De achtergrondkleur van de widget
     • “background:gray”
     • “background:rgb(128,128,128)"
     • “background:rgb(50%,50%,50%)”
     • ”background:rgba(0,0,0,0.2)"
       U heeft de keuze uit een voorgedefinieerd kleur (in ons voorbeeld middengrijs “gray”), ofwel eender welk kleur opgeven met rgb-waarden ofwel met rgbwaarden en transparantie opgeven (rgba).
       U vindt de kleurnamen (gesupporteerd door alle browsers) terug op deze link en u krijgt bovendien meteen te zien hoe het kleur er uitziet op het scherm…
   • De tekstkleur gebruikt in de widget
     Dit gebeurt op dezelfde manier als het wijzigen van de achtergrondkleur, bijvoorbeeld “text:rgb(255,255,255)” maakt de tekst wit
   • De kleur van de icoontjes wijzigen
     Dit gebeurt op dezelfde manier als het wijzigen van de achtergrondkleur, bijvoorbeeld “iconColor:rgb(0,0,255)” maakt de icoontjes blauw
   • De gebruikte tekstfont
     Gebruik “font:sans-serif” om de font te wijzigen; u kan meerdere fonts specifiëren door die te scheiden met een komma, bijvoorbeeld “font:arial,verdana,sans-serif”; een font met een naam die bestaat uit meerdere delen plaatst u tussen enkele aanhalingstekens, zoals bijvoorbeeld in ‘Segoe UI’.
   • De grootte van de font
     Gebruik hiervoor “fontSize:120%” om de fontgrootte aan te passen. Defaultwaarde is 100%.
6. Overige opties
   • Geen stationsnaam
     • Default wordt de naam van het station getoond voorafgegaan door “Weerstation”. Indien het helemaal duidelijk is over welke locatie het gaat, kan men ervoor opteren om de naam niet te laten verschijnen in de widget door de optie “noStation” te gebruiken
     • Het woord “Weerstation” verschijnt dan ook niet als eerste regel tekst in de widget. Indien u dit alsnog wenst te zien, dan kunt u dit toevoegen als een vrij tekstveld.
   • Korte stationsnaam
     • Default wordt de lange stationsnaam getoond, enkele voorbeelden zijn: Westouter (Heuvelland), Kluizen (Evergem), Recht (Sankt-Vith)
     • U kan de stationsnaam beperken tot het eerste deel - bij bovenstaande voorbeelden: “Westouter” of “Kluizen” of “Recht” - en het deel tussen haakjes laten wegvallen door middel van de optie “&o=shortStation"
     • Hierboven in ons voorbeeld wordt wel degelijk nog steeds Zichem-Scherpenheuvel getoond omdat Scherpenheuvel niet tussen haakjes staat.
   • Onderdrukken van de tijd van de laatste gegevens update
     • Default wordt de tijd getoond van de meest recente data “Update van xx:xx”.
     • U kunt deze tekstregel onderdrukken door de optie “&o=noTime” mee te geven.
   • U kunt er voor kiezen om geen icoontjes te tonen maar leesbare tekst. Let wel: soms valt die tekst heel lang uit en gelijkt de widget op niets… om de icoontjes te vervangen door tekst gebruikt u de optie “&o=text”.
   • Bij meer dan 1 optie kunt u deze combineren door een puntkomma “;” ertussen te plaatsen, bijvoorbeeld: “&o=shortStation;noTime”.
7. Extra vrije tekstregels invoegen
   • Vette tekst : gebruik “&tb=Vrije%20Vette%20Tekst”
     Merk op dat de vrije tekst moet omgezet worden naar URI-encoded tekst (deze vervangt speciale leestekens door codes zoals in het voorbeeld waar %20 staat voor een spatie); u kan dit encoderen doen op volgende locatie: https://meyerweb.com/eric/tools/dencoder/
   • Gewone tekst : is identiek als de hierboven beschreven vette tekst, maar gebruik nu “&t=” in plaats van “&tb=”.
   • Er kunnen meerdere lijnen vrije tekst gebruikt worden, zowel vet als normale.
   • Alle regels met vette tekst verschijnen eerst in de widget (in de volgorde van definitie), daarna de vrije normale tekst (eveneens in de volgorde van definitie in de URL).
   • De vrije tekstregels verschijnen in de widget net boven de parameters / waarnemingen.
8. Doorlinken naar een specifieke webpagina
   • Wanneer men in de widget klikt gaat men (default) naar de desbetreffende stationspagina op meteo-be.net / meteo.vlaanderen.
   • U kan deze defaultpagina wijzigen in een specifieke pagina door middel van de “&u=https%3A%2F%2Fmeteo-be.net%2F” waarbij het gedeelte na “=” de encoded-URL is; gebruik om de URL te encoderen dezelfde link als hierboven. In ons voorbeeld wordt er doorgelinkt naar https://meteo-be.net/

Voorbeelden van widgets vindt u op deze pagina…