hero
Home About

Categories

Archive

May 2024

April 2024

March 2024

February 2024

January 2024

December 2023

November 2023

October 2023

September 2023

August 2023

July 2023

June 2023

May 2023

April 2023

March 2023

February 2023

January 2023

December 2022

back to home

Load dynamic images and build your own weather widget with weatherapi.com

13 March 2023 • 2 mins

There are countless services on the internet that provide weather information, either as a widget or as an API. In this article, we will learn how to use weatherapi.com. They offer a free plan to get basic weather information from any location in the world. If you want to follow this tutorial step-by-step, make sure to sign up for the free plan and get your own API key.

The API explorer lets you play around with the API call we will use. The only parameter is the name of the location (it can be a name, a set of coordinates, or a zip code). The call we’re using is

http://api.weatherapi.com/v1/current.json?key=XXX&q=Taipei&aqi=no

where XXX is the API key.

Let’s create a new board and add a JSON data source. We don’t have to deal with authentication, as the API key in the URL tells the server who we are.

image

The most important parameters are location (column name), temperature (column temp_c), and the weather description (column text). We can easily visualize these with a single text box with a title and subtitle. Please check the screenshot for how to format the temperature. In this case, we use a custom format with the unit °C to beautify the number.

image

Weatherapi.com provides the caller with a link to an illustration of the weather condition (e.g. clouds or sunshine). To use these icons directly in our board, we place an image control on the canvas. Then, we add a link to a web resource that will feed the image control with a default image. Just use a generic picture like a red cross. The actual image is unimportant, as we will override it with what the API returns to us.

image

Every time the data is queried from the API, we can use the Refreshed-event to arrange all proceeding actions, like setting the URL of the image control.

image

Here’s the block we’re using to build the URL. The value of the API comes with a URL, but http: needs to be added to make the URL valid. So we just add it and set the resulting value as the Source proerty of the image control. That’s it!

image

And here’s the result:

image

Load dynamic images and build your own weather widget with weatherapi.com

Newsletter

Want to get notified when a new article is published? Sign up below!