From Vmateevitsi wiki
Jump to: navigation, search



The ThermoWeather App

ThermoWeather is a Weather Station made entirely in QML. The displayed data is polled from

Features of ThermoWeather

  • Current conditions outside: temperature, humidity, precipitation, wind speed, wind direction, clouds coverage, visibility and weather description
  • The predictions for the day: temperature min, max, precipitation, wind speed, wind direction, weather description
  • 5 day forecast: temperature min, max, precipitation, wind speed, wind direction, weather description
  • The current condition and forecasted weather is represented by graphic representation
  • Displays the temperature and humidity inside the building (Because no sensors are available, this information is hard-coded)
  • Supports changing the location
  • Resolution of 1280x800
  • Touch-screen compatible
  • Multiple language support (currently supports 4 languages)
  • Support for US/European system
  • Displays weather alerts (the weather alerts are not real, but hard-coded)

Source Code

You can download the source code of the application here:

git clone

or you can grab the zip file here.


To run you need Qt 5.0.1 installed.


To run the app you need to register to and get a key. Registration is free. After you have a key, edit ThermoWeather.qml and set your key:

property string key: "KEY_GOES_HERE"


qmlscene.exe ThermoWeather.qml

Mac OSX / Linux

qmlscene ThermoWeather.qml


Current Weather Panel

Current Weather Panel

The Current Weather Panel shows the current conditions for the selected area as they are reported by worldweatheronline. It displays the following:

  • Temperature
  • Humidity
  • Precipitation
  • Wind Speed
  • Wind Direction
  • Cloud Coverage
  • Visibility
  • Weather Description
  • Weather icon

The icon that is being used for the current weather condition is not the default that worldweatheronline provides with the data stream. ThermoWeather uses an icon set from iconbest that had to be manually mapped with the weather codes that worldweatheronline uses.

5 Days Forecast Panel

5 Days Forecast Panel

The 5 Days Forecast Panel shows the forecast for the next 5 days for the selected area as they are reported by worldweatheronline. It displays the following:

  • Temperature Min
  • Temperature Max
  • Precipitation
  • Wind Speed
  • Wind Direction
  • Weather Description
  • Weather Description
  • Weather icon

As in the Current Weather Panel the icons used for the weather condition are not the ones that worldweatheronline provides.

Weather Station


The Weather Station visualizes the temperature and humidity that are being collected from a sensor inside the house. Unfortunately because there is no Weather Sensor available, the panel is only a placeholder and does not show real information. The code has been designed to connect in the future with a real Weather Sensor so no major changes need to be made.



The Alert Area shows weather alerts that may exist. Like the Weather Station panel, it does not update or get any real information.



The user can change the following using the menu:

  • Language
  • Units
  • Location

The Menu is located at the top right corner. It slides in and out by pressing the black arrow.


The user can change the displayed language by pressing on the flag. The currently selected language is being represented by the flag icon. After pressing on the flag, a new menu slides in to select the new language. The menu contains around 22 languages that are alphabetically ordered. The menu can accommodate an infinite number of languages. From the 22 languages, only 4 can be selected and will update the app with the correct language:

  • Cyprus
  • Greece
  • United Kingdom
  • USA


For temperature display, ThermoWeather allows to switch between the following:

  • Celsius
  • Fahrenheit

For wind speed and precipitation display, ThermoWeather allows to switch between the following:

  • km/h for wind speed an mm (millimiters) for precipitation
  • mph for wind speed and in (inches) for precipitation


ThermoWeather allows to input and get the current weather and forecast for any location. After opening the menu, the location needs to be typed in the "Location" sub-menu. By pressing the "Set" button, ThermoWeather will update the location. ThermoWeather does have error checking to prevent crashes.

Live Updating

ThermoWeather connects to worldweatheronline every 60 seconds and updates the information that is being displayed.



The Adobe Illustrator Prototype

While QML is a very powerful language in creating dynamic interfaces, it is difficult to quickly prototype and accomplish aesthetically pleasant results. Changing for example a color, the font, or the positioning of an element requires searching through the code and potentially tweaking more than one parameters. Graphic Editors on the other hand, allow to manipulate graphic objects, apply effects and re-position elements with great ease. The prototype was initially designed in Adobe Illustrator. The porting from AI to QML was easy: Each individual element of the prototype have been exported in separate png images. QML uses the same coordinate system like AI, therefore positioning was the elements was easy.

Colors and Fonts

Colors have been carefully selected using Color Scheme Designer to be aesthetically beautiful and pleasant. Fonts as well. Temperature and city, being the most important information of the app have the biggest fonts and contrasting colors in regards with the background (the contrast makes the pop-out more and easier to see). The size and color of the other elements depends on their data importance.


While the menu allows to configure ThermoWeather in a variety of ways, it is one of the features that is not being used in a daily basis. Users usually set up their language, units and location after un-boxing the product and because the system is not portable, these settings do not change often. Therefore all the individual menu settings do not need to be visible in a daily basis and by hiding them we have more pixels to visualize useful information. When the user needs to change the settings, the menu slides in and all the features are available for parametrization.


Hitting a button in ThermoWeather is more challenging than a tablet, because ThermoWeather (in contrast with a tablet) is wall mounted and has zero degrees of freedom. The buttons need to be big so that the user can hit them with ease (Fitt's Law). All the buttons of ThermoWeather have been designed with this concept in mind. For example, to change the language a new menu slides in that shows the available languages. The countries are alphabetically sorted and have both image and text representation and are positioned in a horizontal list. The user can slide through the list by flicking right and left. A press of the finger sets the new language.

ThermoWeather Graphics

Except from the graphics that have been credited below, the rest of the graphics and icons have been created in Adobe Illustrator for the purpose of this project.


Together with the source code you will find a set of weather icons, weather icons and a warning icon. While these images are free, they have not been created by me, therefore if you want to use them in your projects you need to consult the creator's webpage and read the disclaimer. I have linked the webpages below.

Weather Icons

The weather icons are made from Wojciech Grzanka and can be downloaded at Iconbest.

Flag Icons

The flag icons are from

Warning Icon

The warning icon is from

Additional Screenshots

ThermoWeather in Greek!
The Language Menu
ThermoWeather with location set to Dallas
ThermoWeather with units set to mph and Fahrenheit