{"id":5250,"date":"2024-05-02T13:29:26","date_gmt":"2024-05-02T11:29:26","guid":{"rendered":"https:\/\/home.et.utwente.nl\/slootenvanf\/?p=5250"},"modified":"2025-09-12T14:00:23","modified_gmt":"2025-09-12T12:00:23","slug":"python-weather-station-app","status":"publish","type":"post","link":"https:\/\/home.et.utwente.nl\/slootenvanf\/2024\/05\/02\/python-weather-station-app\/","title":{"rendered":"Learn Python:\u00a0weather station app with live data\u00a0"},"content":{"rendered":"\n

Through this tutorial you become familiar with developing a Python application with a graphical userinterface. We will create an App which can display weather data from various weather stations. Data will come from an online xml service providing weather data.<\/p>\n\n\n\n

We are going to create an application that can display the temperature of several weather stations in the Netherlands, as well as the average temperature of those weather stations.<\/p>\n\n\n\n

You are given a WeatherStation<\/em> class for reading the data. This class can read data using an XML file. XML files are used on the internet to provide data in a structured way (in a specific format). Buienradar<\/em> is a Dutch site that provides weather data from several weather stations in XML form.<\/p>\n\n\n\n

Tutorial steps<\/h2>\n\n\n\n
    \n
  1. Design and create the user interface<\/li>\n\n\n\n
  2. Add the WeatherStation class to the project<\/li>\n\n\n\n
  3. Realize displaying the temperature & station name<\/li>\n\n\n\n
  4. Add multiple instances of the class to the user interface<\/li>\n\n\n\n
  5. Calculate the average temperature and display it<\/li>\n<\/ol>\n\n\n\n

    These steps are explained in detail below.<\/p>\n\n\n\n

    1. Design and create the user interface<\/h2>\n\n\n\n

    First, we create one of the four Panels for displaying the temperature with the name of the weather station. Then we use that Panel several times (copy) to display the data of several weather stations. Also, we create a separate part of the user interface in which the average temperature is displayed (at the bottom in the example).<\/p>\n\n\n\n

    Start with a new folder for this project and name that \u201cWeatherStation\u201d.<\/p>\n\n\n\n

    Setup a basic script with a bare-bones userinterface as learned in for instance this tutorial<\/a>, and save that into the folder. It might look like:<\/p>\n\n\n\n

    \"\"<\/a><\/figure>\n\n\n\n

    Next, we will construct a class<\/a>, based on a Tkinter Frame (it inherites<\/a> from tk.Frame). This will be a panel that can display a temperature value of one station. Learn more about classes, objects and methods in Python here.<\/a><\/p>\n\n\n\n

    This could look like:<\/p>\n\n\n\n

    class TemperaturePanel(tk.Frame):\n    w = \"\" # WeatherStation\n    temperature = \"20.0\"\n\n    def __init__(self, parent, id):\n        tk.Frame.__init__(self, parent)\n        self.configure(background=\"#ffffff\", borderwidth=5)\n\n        self.labelTemp = tk.Label(self, text=self.temperature, anchor=\"center\", font=(\"Arial\", 25))\n        self.labelTemp.pack(side=\"top\", fill=\"both\")<\/code><\/pre>\n\n\n\n
    Make sure to add the code at the top of the script, after the last import <\/em>line.<\/p>\n\n\n\n
    Then, add another Frame, which we can use as a container for multiple panels. The Frame will take care of the layout of the panels. They will be organized in a grid with two columns<\/a>. The Frame can look like this:<\/p>\n\n\n\n
    class Frame(tk.Frame):\n    def __init__(self, parent):\n        tk.Frame.__init__(self, parent)\n\n        self.panel1 = TemperaturePanel(self, 6290)\n        \n        # add to grid:\n        self.panel1.grid(row=0, column=0, sticky=\"ew\")\n\n        # 2 equal sized columns:\n        self.grid_columnconfigure(0, weight=1)\n        self.grid_columnconfigure(1, weight=1)<\/code><\/pre>\n\n\n\n
    Finally, add a line at the end, just before the main loop to add the frame to the userinterface;<\/p>\n\n\n\n
    Frame(root).place(x=0, y=0, relwidth=1, relheight=1)<\/code><\/pre>\n\n\n\n
    If you run the script, it should look like:<\/p>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    The “20.0” is a placeholder, and not related to any temperature reading (yet). Can you find it in the code?<\/p>\n\n\n\n
    Add the WeatherStation class to the project<\/h2>\n\n\n\n
    Download the script WeatherStation.py<\/a><\/strong> and copy it into the project folder. At the top of your userinterface script, import it:<\/p>\n\n\n\n
    from WeatherStation import WeatherStation<\/code><\/pre>\n\n\n\n
    Open the file in your editor. It contains the class definition which has several methods (functions in the class) that you can use to get data from a given station. Learn more about classes, objects and methods in Python here.<\/a><\/p>\n\n\n\n
    Realize displaying  the temperature & station name<\/h2>\n\n\n\n
    Now we will add code to the TemperaturePanel class so it can actually display the temperature from a station.<\/p>\n\n\n\n
    Before the definition of labelTemp, add:<\/p>\n\n\n\n
    self.w = WeatherStation(id)<\/code><\/pre>\n\n\n\n
    This will assign class variable w with and object created from class WeatherStation, with the given id. That id is a parameter that was already present in the init method of the class (it came with the example code from the previous step).<\/p>\n\n\n\n
    Next, add a line to assign class variable temperature with the temperature value we read from the WeatherStation:<\/p>\n\n\n\n
    self.temperature = self.w.readTemperature()<\/code><\/pre>\n\n\n\n
    Run the script. It should give a real value of a station:<\/p>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    Do you know from which station? (Hint: check output in the Shell or Terminal).<\/p>\n\n\n\n
    Now, in your editor, open the script WeatherStation.py<\/strong>. Look for the first class variable named ‘xml’ in that class. It has the source of the data (de URL of the XML file). Open that URL in your browser and have a look. Find a weather station different from the one that is already used in the app (the one with id 6290). Find the id of that new station and assign it to panel1 in your userinterface script:<\/p>\n\n\n\n
    Change this number into an id from a different station:<\/p>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    Run the script and check if the station and its temperature are different now.<\/p>\n\n\n\n
    Now we would like to see the station name in the userinterface also. Duplicate the labelTemp in the class TemperaturePanel and name that copy “lblStationName”. Remove the parameter for the font, font=(“Arial”, 25) or resize it, as we want the stationname to be displayed smaller.<\/p>\n\n\n\n
    For lblStationName, in the parameter list, replace the assignment of the text:<\/p>\n\n\n\n
    text=self.w.readTemperature()<\/code><\/pre>\n\n\n\n
    with a call to the function of the class WeatherStation that provides the station name. You should be able to find that function in WeatherStation.py.<\/p>\n\n\n\n
    Now, the station name should be there:<\/p>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    Add multiple instances of the class to the user interface<\/h2>\n\n\n\n
    Find the definition of panel1 in class Frame. Duplicate it 3 times so you have 4 instances. Name them panel1…panel4. Assign different station id’s to all of them.<\/p>\n\n\n\n
    Assign them to the grid also, so duplicate the line self.panel1.grid(…<\/strong> also and assign them to the proper rows and columns in the grid:<\/p>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    Calculate the average temperature and display it<\/h2>\n\n\n\n
    To be able to calculate the average, we must first have the temperature of a panel as a floating point number. Currently, the temperature is a string, and cannot be extracted from the TemperaturePanel.<\/p>\n\n\n\n
    So we will add a method to the class TemperaturePanel which:<\/p>\n\n\n\n