Thursday 28 March, 23:56:49

Widgets examples

Last update: July 12, 2021


The widget examples below are real-time (based on current observations) and are therefore continuously updated! When you visit this page again, you are almost guaranteed to see different values.

On the left side of the table you will see the widget (live) of the html code listed on the right.

 

<!DOCTYPE html><html><body><iframe src="https://meteo-be.net/widget/v1/westouter-heuvelland?l=en&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:'proxima-nova',Helvetica,Arial,sans-serif;fontSize:100%&o=shortStation&tb=(Red%20Mountain)&tb=%7F&tb=Wine%20Estate&tb=Entre-Deux-Monts&tb=%7F&tb=Actual%20Weather" width="240" height="370" frameborder="0"></iframe></body></html>

This widget is using a fontsize of 100%, which is the default value. Therefore it is not needed to specify this value in the URL (but it is allowed).

The option &o=shortStation only shows the first part of the location. The part (Heuvelland) is not shown.

<!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;day:sum:rain_amount&s=background:rgb(150,193,30);text:white;iconColor:white;font:vaud,sans-serif&tb=Natuurpunt&t=Actuele weergegevens" width="280" height="350" frameborder="0"></iframe></body></html>

 

<!DOCTYPE html><html><body>
<iframe src="https://meteo-be.net/widget/v1/bree?l=nl&f=temperature;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=ACTUELE&tb=WEERGEGEVENS" width="200" height="300" frameborder="0"></iframe>
</body>
</html>

Fontsize here is only 90%. The station name on top of the widget is suppressed (&o=noStation) and replaced by several lines of free text.

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

Fontsize is here modified to 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;day: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>

When clicking on the widget (not on the link shown at the end) you are redirected to the website of the owner, in this case: https://www.zwaeneberg.com

The widget makes use of multiple lines of free text.

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

The widget is using a font which consists of two words: Nova Arial. You have to list is as such, but place it between single or double quotes.

<!DOCTYPE html><html><body>
<iframe src="https://meteo-be.net/widget/v1/neeroeteren-maaseik?l=en&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="300" height="200" frameborder="0"></iframe></body></html>

The icons have been replaced by readable text (&o=text). In some cases, this is not usable because of long texts being generated, especially when observations are not recent.

The short station name option is also used (&o=shortStation). When this option is not used, one would see Neeroeteren (Maaseik) and widget would become much wider.

When clicking on the widget, you are now no longer redirected to the station page on meteo-be.net but to the given URL, in this example: 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.15);text:white;iconColor:blue;font:gudea,sans-serif" width="260" height="200" frameborder="0"></iframe></body></html>

Language of this widget is French.

The background is made transparent using “rgba(0,0,0,0.1)” where the first three zeroes mean black, the 4th digit tells you that the background needs to be blackened (= color specified) by 15% (0.15).

 

 

 

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

This widget is an example of the use of free text. There are 5 lines with the top and bottom being blank.

A blank line can be inserted by using &tb=%7F or &t=%7F. Which has to be used depends on the situation…
In this widget, we are using plain and bold text. Bold text has priority over plain text. It means that all lines with the bold attribute are printed first, in order of defining them in the URL. After the bold lines, the lines with plain text are printed.

If you want to start with a blank line, and the next line is in bold text, then you need to use “&tb=%7F” as blank line. The blank line at the bottom is the opposite: if the previous line with text is plain text, then you must use “&t=%7F”. 

Clicking on the widget redirects to https://www.aubergederochehaut.com instead of the normal station page.

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

 


Do you also want a widget, but can't seem to get it? Send us an email with your wishes and we will (try to) solve it for you…
 

Meteo-BE.net | BMCB.info uses cookies to improve your experience on our site.
By using Meteo-BE.net | BMCB.info you agree to our cookie policy.