BARANI

View Original

Website widget for allMETEO weather stations

Jan Barani

Weather widget for your website is now available from the allMETEO.com weather portal for the MeteoHelix® IoT Pro home weather stations and MeteoWind IoT Pro wireless wind sensors. Your customers can now rely on accurate weather reported live to their websites with the highest meteorological standards of quality of the NWS and WMO.

Just copy and paste the following code snippet to into your website to display live weather data widgets. The shape, size and colors can easily be customized to your liking as shown bellow. Weather data streams directly from your MeteoHelix® and MeteoWind® or any public weather station on the allMETEO weather portal. Other examples of widget implementations can be found here: barani.clubmeteobelgique.be, wind101.net, vnutroblokslavia.sk, letisko-jasna.sk,

Examples of code snippets and resulting widget visualizations follow:

See this content in the original post

HTML code for a weather widget which is 250 pixels wide and 300 pixels high with a 1 pixel thick black border follows:

<div style="width: 250px; height:300px; border: 1px solid black;"> 
<div id="allm11" class="allmeteo-widget" data-ws="2161019">
</div> 
</div>
See this content in the original post

HTML code for a wind widget which is 250 pixels wide and 300 pixels high with a 1 pixel thick black border follows:

<div style="width: 300px; height:300px; border: 1px solid black;">
<div id="allm111" class="allmeteo-widget" data-ws="2007LW020">
</div>
</div>

IMPORTANT

  • If the character encoding of your HTML webpage was not declared as UTF-8, the widget may render with garbled text in some browser configurations since the widget contains character ⭱ from the Wingdings 3 font which is outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol as: 

<meta charset="utf-8"/>

  • The following line of code script needs to be inserted at the bottom of the web page right before the </body> tag. If you add multiple of the above widgets on you website, the following line of code needs to appear only once:

<script type="text/javascript" src="https://weather.allmeteo.com/widget/allmeteo.widget.js">  </script>

Customizing the website widget code

Remember to change the data-ws=”0311018” in the second line of the above HTML code to the serial number of your weather station and register your MeteoHelix® weather station on weather.allMeteo.com to enable live streaming weather data.

Displaying multiple weather widgets on your website:

To display multiple widgets on one website or webpage, the following modifications to the above code for each widget instance are necessary.

  • Each widget instance must have a unique number (ID) in the widget ID following the “allm”:

    • id="allm11"

    • id="allm12"

    • id="allm13"

    • …

See this content in the original post

HTML code for a weather widget which is 400 pixels wide and 300 pixels high with a 5 pixel thick blue border:

<div style="width: 400px; height:300px; border: 5px solid blue;"> 
<div id="allm12" class="allmeteo-widget" data-ws="1912LH030"> 
</div> 
</div>
See this content in the original post

HTML code for a weather widget which is 400 pixels wide and 300 pixels high with a 5 pixel thick red border

<div style="width: 400px; height:300px; border: 5px solid green;"> 
<div id="allm13" class="allmeteo-widget" data-ws="2003LH011"> 
</div> 
</div>

Detailed widget customization using CSS class elements

The weather widget can be further customized using the following CSS classes since each element is its own DIV as shown bellow:

HTML widget structure

See this content in the original post

CSS classes which control the display of each widget element

See this content in the original post

For More information on the only home weather station able to meet the stringent WMO and NWS measurement guidelines for reliable long-term measurement click here: https://www.baranidesign.com/meteohelix-pro-weather-station/

Example of multiple widgets on one web page in a table format

Example code provided by Geert & Robin Vandebrande (Belgische Meteo Club Belge – BMCB) whose results can be seen at the following link https://meteo-be.net/Dashboard/ or the previous version at http://bmcb.club (Pierre Decamps ONOCTV, Le Relais Television Amateur du Pays de Charleroi)

<head> <meta http-equiv="refresh" content="366"> <script type="text/javascript" src="https://weather.allmeteo.com/widget/allmeteo.widget.js"> </script>
<style>
table, th, td {  
border: 0px solid black;  
border-collapse: collapse;
}
</style>
</head>
See this content in the original post