Meteo België logo
Meteo België
Zondag 5 december, 8:46

Widgets voorbeelden

Laatste bijwerking: 8 juli 2021


Onderstaande voorbeelden van widgets zijn real-time (gebaseerd op actuele waarnemingen) en worden dan ook continu aangepast! Bij een nieuw bezoek aan deze pagina krijgt u dus bijna gegarandeerd andere cijfers te zien.

Aan de linkerzijde ziet u de widget (live) van de html-code die rechts staat vermeld.

 

<!DOCTYPE html><html><body><iframe src="https://meteo-be.net/widget/v1/westouter-heuvelland?l=nl&f=temperature;day:min:temperature_min;day:max:temperature_max;day:sum:rain_amount&s=background:whitesmoke;text:rgb(29,29,27);iconColor:rgb(226,6,19);font:Calibri,Helvetica,Arial,sans-serif;fontSize:100%&o=shortStation&tb=(Rode%20Berg)&tb=%7F&tb=Wijndomein&tb=Entre-Deux-Monts&tb=%7F&tb=Actuele weergegevens" width="240" height="380" frameborder="0"></iframe></body></html>

Deze widget gebruikt een fontgrootte van 100%. Aangezien dit de defaultwaarde is, is het niet echt nodig deze te specificeren in de URL (maar het mag).

De optie &o=shortStation zorgt ervoor dat enkel het eerste deel van de locatie van het weerstation - Westouter - wordt weergegeven. Het gedeelte (Heuvelland) wordt niet getoond.

<!DOCTYPE html><html>
<body>
<iframe src="https://meteo-be.net/widget/v1/zichem-scherpenheuvel?l=nl&f=temperature;day:min:temperature_min;day:max:temperature_max;humidity;irradiation;last_24h:sum:rain_amount&s=background:rgb(150,193,30);text:white;iconColor:white;font:vaud,sans-serif&tb=Natuurpunt&t=Actuele weergegevens" width="260" height="350" frameborder="0"></iframe></body></html>

 

 

<iframe src="https://meteo-be.net/widget/v1/arendonk?l=nl&f=temperature;day:min:temperature_min;day:max:temperature_max;humidity;irradiation;last_24h:sum:rain_amount&s=background:rgb(150,193,30);text:white;iconColor:white;font:vaud,sans-serif&tb=Landschap%20De%20Liereman&t=Actuele weergegevens" width="260" height="340" frameborder="0"></iframe>

 

<iframe src="https://meteo-be.net/widget/v1/avelgem?l=nl&f=temperature;day:min:temperature_min;day:max:temperature_max;humidity;irradiation;last_24h:sum:rain_amount&s=background:rgb(150,193,30);text:white;iconColor:white;font:vaud,sans-serif&tb=Scheldemeersen&t=Actuele weergegevens" width="260" height="340" frameborder="0"></iframe>

<!DOCTYPE html><html><body>
<iframe src="https://meteo-be.net/widget/v1/bree?l=nl&f=temperature;day:max:temperature_max;day:min:temperature_min;humidity;irradiation;day:sum:rain_amount&s=background:rgb(29,29,27);text:white;iconColor:rgb(195,215,108);font:'nunito sans',sans-serif;fontSize:90%&o=noStation&tb=Wijndomein&tb=DE%20STEINBERG&tb=BREE%20(LIMBURG)&tb=%7F&tb=ACTUEEL%20WEER&t=in%20de%20wijngaard" width="200" height="340" frameborder="0"></iframe>
</body>
</html>
<!DOCTYPE html><html><body><iframe src="https://meteo-be.net/widget/v1/vliermaal-kortessem?l=nl&f=temperature;day:max:temperature_max;day:min:temperature_min;humidity;irradiation;day:sum:rain_amount&s=background:midnightblue;text:white;iconColor:rgb(195,215,108);font:'nunito sans',sans-serif;fontSize:90%&o=noStation&tb=Wijndomein&tb=SCHORPION&tb=VLIERMAAL%20(LIMBURG)&tb=%7F&tb=ACTUELE&tb=WEERGEGEVENS" width="200" height="340" frameborder="0"></iframe></body>
</html>

<!DOCTYPE html><html><body>
<iframe src="https://meteo-be.net/widget/v1/st-joris-beernem?l=nl&f=month:avg:temperature;month:min:temperature_min;month:max:temperature_max;month:sum:rain_amount;month:sum:irradiation&s=background:rgb(128,128,224);text:rgb(255,255,255);iconColor:yellow;font:gudea,sans-serif;fontSize:110%&o=noTime&t=Maandoverzicht" width="260" height="300" frameborder="0"></iframe></body></html>

De fontgrootte is hier aangepast naar 110%.

<!DOCTYPE html><html>
<body>
<iframe src="https://meteo-be.net/widget/v1/st-pieters-voeren?l=nl&f=temperature;day:min:temperature_min;day:max:temperature_max;humidity;irradiation;last_24h:sum:rain_amount&s=background:white;text:dimgray;iconColor:olive;font:Helvetica,Arial,sans-serif&t=%7F&t=Wijndomein%20%2F%20B%2BB&t=%22Zwaeneberg%22&t=%7F" width="300" height="360" frameborder="0"></iframe></body></html>

Bij een muisklik in de widget wordt er doorgelinkt naar de website van de eigenaar, hier: https://www.zwaeneberg.com

De widget maakt gebruik van meerdere vrije tekstvelden.

<!DOCTYPE html><html><body>
<iframe src="https://meteo-be.net/widget/v1/jabbeke?l=en&f=temperature;humidity;irradiation;rain_amount;wind;wind_speed_high&s=background:DodgerBlue;text:rgb(255,255,255);iconColor:yellow;font:"Arial Nova",sans-serif;fontSize:110%&o=shortStation&tb=Recente waarnemingen" width="260" height="270" frameborder="0"></iframe></body></html>

In de widget wordt een font gebruikt die uit twee woorden bestaat: Nova Arial. U dient deze ook zo te vermelden, maar tussen dubbele aanhalingstekens te plaatsen.

De widget is hier in de Engelse taal.

<!DOCTYPE html><html><body>
<iframe src="https://meteo-be.net/widget/v1/neeroeteren-maaseik?l=nl&f=temperature;humidity;pressure&s=background:DodgerBlue;text:rgb(255,255,255);font:gudea,sans-serif&o=text;shortStation&u=https%3A%2F%2Frubenweytjens.be%2F" width="260" height="200" frameborder="0"></iframe></body></html>

De icoontjes zijn hier vervangen door leesbare tekst (&o=text). In bepaalde gevallen is dit echter onbruikbaar, vooral wanneer de waarnemingen niet recent zijn waardoor een lange tekst wordt gegenereerd.

De korte naam van het weerstation wordt hier gebruikt (shortStation). Indien de optie niet zou worden aangezet zou men Neeroeteren (Maaseik) te zien krijgen waardoor de widget ook een stuk breder zou uitvallen.

Wanneer u op de widget klikt, dan wordt u standaard niet meer doorgelinkt naar de stationspagina Neeroeteren (Maaseik) van meteo-be.net, maar naar de opgegeven pagina, in dit voorbeeld: https://rubenweytjens.be (&u=https%3A%2F%2Frubenweytjens.be%2F).

 

 

<!DOCTYPE html><html><body>
<iframe src="https://meteo-be.net/widget/v1/maillen-assesse?l=fr&f=temperature;irradiation;wind&s=background:rgba(0,0,0,0.1);text:white;iconColor:blue;font:gudea,sans-serif" width="260" height="200" frameborder="0"></iframe></body></html>

In dit voorbeeld is de taal aangepast naar het Frans.

De achtergrond van de widget is transparant gemaakt met “rgba(0,0,0,0.1)” waarbij de eerste 3 nullen staan voor zwart, het 4e getal geeft aan dat de achtergrond met 10% (0.1) zwart moet gemaakt worden.

 

 

 

<!DOCTYPE html><html><head><style>iframe{margin-left:auto;margin-right:auto;display:flex;}</style></head><body>
<iframe src="https://meteo-be.net/widget/v1/rochehaut-bouillon?l=fr&f=temperature;humidity;irradiation;wind;day:sum:rain_amount&s=background:black;text:white;iconColor:aquamarine;font:gudea,sans-serif&tb=%7F&tb=L%27AUBERGE&tb=DE%20ROCHEHAUT&t=Rue%20de%20la%20Cense%2C%2012&t=%7F&u=https%3A%2F%2Fwww.aubergederochehaut.com%2Ffr%2Faccueil" width="260" height="380" frameborder="0"></iframe></body></html>

Deze widget is een mooi voorbeeld van vrije tekst. Hiervan zijn in totaal 5 lijnen tekst aanwezig, waarvan de bovenste en onderste blanco is.
Een blanco regel kunt u creëren door ofwel &tb=%7F ofwel &t=%7F toe te voegen. Het hangt af in welke situatie…
In de widget hiernaast wordt vrije tekst gebruikt in zowel vette als normale font waarbij dus vette tekst altijd bovenaan komt en de normale tekst erna.
Dit betekent dat de lege regel bovenaan ook in het vet moet gezet worden en bovendien als eerste vette tekst gespecificeerd moet worden. Vandaar dat hier &tb=%7F moet gebruikt worden.
De lege regel onderaan de vrije tekst komt na de normale tekst en moet dus als laatste in de URL verschijnen van alle vrije tekstvelden en moet dus &t=%7F zijn.

Verder is het doorlinken aangepast naar https://www.aubergederochehaut.com in plaats van de stationspagina op meteo-be.net.

<!DOCTYPE html><html>
<body>
<iframe src="https://meteo-be.net/widget/v1/recht-sankt-vith?l=fr&f=temperature;humidity;irradiation;day:sum:rain_amount&s=background:white;text:dodgerblue;iconColor:dodgerblue;font:sans-serif&t=Luc%20Trullemans" width="200" height="250" frameborder="0"></iframe></body></html>

 


Wilt u ook een widget, maar geraakt er er toch niet aan uit of u ziet er geen beginnen aan? Stuur ons een email met uw wensen en wij lossen het voor u op…
 

Meteo België maakt gebruik van cookies om uw ervaring op onze site te verbeteren.
Door gebruik te maken van Meteo België gaat u akkoord met ons cookiebeleid.