If you live in Australia, then you’ve probably been to the Australian Bureau of Meteorology’s site to check the forecast. If you’re more curious then you’ve probably had a look at the rainfall maps or the synoptic charts (the “maps” showing the high and low pressure systems and the cold and warm fronts).
You might have thought that it would be nice if you could go straight to the radar page or straight to the synoptic chart – and even better to get a picture of just the information you’re interested in without all the surrounding tables and indexes.
If you’re not particularly interested in the weather then don’t worry – the techniques described here are applicable to many other web sites. If you work through this example then you will be able to apply the same approach to other web pages you want information from.
Let’s get started. If you go to the Bureau’s web site at www.bom.gov.au you are presented with their home page, which looks as follows:
If you want the radar images which show current rainfall, then you need to click the word Radar below the left little image below the main image. You are then presented with the radar index page:
From here you can click a symbol on the map, or if you live in a capital city, one of the eight town names. If you clicked on Melbourne on the 3rd November at 10:20 GMT then the following page would have been displayed:
If you live in Melbourne, then you’ve got the information you wanted (plus a bit more; which you can see at the bottom).
How can we automate most of these steps? Or how can we arrive at the same radar picture with a minimum of steps? We could try and automate the navigation but that gets a little tricky and if the Bureau changes the layout of its pages, then our program will probably run off the rails.
Taking a closer look at this last page shows that the image – which is all we want – has a fixed URL (you can see the address for Melbourne’s image in the address bar in the picture below):
This URL gives us just the image we are after. No time needs be spent downloading other pages or in fact any other text on this final page.
We’re going to build a small Windows 32 executable that provides you with a limited number of choices using a couple of toolbar buttons. Something like the following screen shot is what we want to create. Note: the two screen shots look similar, but the one above is the radar image in Mozilla Firefox and the one below is displaying the same image in the Turbo Delphi Weather application we are about to build.
So how do we go about creating such a Windows application using Turbo Delphi?
Fire up Turbo Delphi for Win32 if you haven’t already done so.
Note all images on the following pages are showing Borland Dev Studio 2006 in the title as that is what I have installed.
Click the New Items toolbar button (not the New Project button)
The following dialog is displayed:
Choose VCL Forms Application. This means we will be building an application using the comprehensive Visual Component Library (VCL) that has been a part of Delphi since it was released. The VCL is a large collection of well debugged and finely tuned components that makes writing applications much easier and more fun.
A new project will have been created. It has, by default, a single form (Form1) and associated code module (Unit1). At the bottom you will notice the Form is on the Design tab. The Code tab is where you will edit the Object Pascal code in Unit1. Use the tabs to switch between the design and code views (or you can press F12).
In the interests of keeping this article as short as possible I am leaving the objects that Turbo Delphi creates with default names. In real life you would rename them to have a name that reflects the purpose of the object. You will notice in the Object Inspector at the bottom right that the form has a name (Form1) and this name is different to the unit name (Unit1). When you save the project or unit, the unit will be named the same as the file name.
We know we want to display an image and you might know Turbo Delphi has a large library of components in the Tool Palette (it’s at the bottom right – you can scroll through it and have a look). You might see there is a TImage. We’re not going to use this as we’d have to handle getting the web page using other components. A simpler solution is to use the TWebBrowser which you will find on the Internet ‘page’. Double click the TWebBrowser (or drag it to the form).
Isn’t this amazing – Turbo Delphi has a full-blown web browser available as a component for you to drop into your applications! You haven’t seen it working yet but you can probably already imagine how much work this is going to save us.
You need to make sure the Web Browser occupies the whole of your form (which will be the main window when your application runs). You do this by changing properties in the bottom left panel. Make sure you still have the WebBrowser component selected on your form (it will show 8 little blue ‘handles’ on its edge when selected). Change the Align property under the Layout category to alClient (as shown in the picture above).
Your form should look the same as in the picture above or below after doing this. The eight little handles are still showing, but the WebBrowser is now occupying the entire ‘client’ area of the Form.
Next we want to add a means for the user to choose between the synoptic chart and the various capital city radar images. When you’ve worked through this you can change this program how you like to display whatever (weather) images you are interested in.
Note, at some stage you need to save what you are working on. Now is a good time. Choose File | Save All and although you can leave the file names at their defaults, it is recommended to at least create a new folder (‘weather’ is an appropriate name, and to name the project (‘weather’ is again a good name). The default location for Turbo Delphi projects is in a folder (name???) within your My Documents folder.
From the Tool Palette at the bottom right, scroll down to the Win32 category and open it. Double click the TtoolBar component.
An empty toolbar will be added above the web browser. Toolbars are automatically positioned at the top of forms (“windows” when running).
You will want to add some buttons. You do this by right-clicking the toolbar.
Set the ShowCaptions property of the Toolbar to True.
From the pop-up menu choose New Separator, New Button, New Separator, New Button. That will give you two buttons with a bit of space between them.
Set the Caption property of the buttons to Synoptic and Radar respectively.
When you’ve added the two buttons, double click the first button. Turbo Delphi will automatically switch to the Code view and display an empty event handler for that button click.
Enter the following line between the begin and end:
This line requests that the web browser navigate to the synoptic chart URL.
Note: When typing in the lines of code, spaces and letter case are not important, but you will want to settle on a standard if you are going to read and share code with others. Lines are commonly indented by two spaces to show loop and conditional branch structures.
Once you’ve added the line, press F9 to run the program. Your program will appear in a window.
Click the Synoptic button on the toolbar. You should see something like the following screen. Windows or third party firewall programs may pop up asking if it is okay to let the program run. You will need to answer Yes.
Wasn’t that easy! Now to get the radar images. The simplest would be to add a button to the toolbar for each city. More interesting is to have a drop down button next to the word Radar as shown in the picture below:
Note that the Radar button does nothing as we have not added any code to handle a click on the Radar button yet.
Quit the program by clicking the Close button on the title bar. You will return to Turbo Delphi.
Switch back to the design view if you are not already there by repeatedly pressing F12 or by using the tabs at the bottom of the screen.
Select the Radar button and from the Object Inspector at bottom left change the style to tbsDropDown. Note – you might notice that I have changed the arrangement of the items in the Object Inspector to alphabetical. Do this by right clicking. By default the arrangement is categorised, but I find the alphabetical list easier to work with.
The Radar toolbar button immediately reflects the change to its style by redisplaying itself with a drop down indicator. This is one of the nice things about Turbo Delphi – you get to see a good deal of how your program will look at design time.
We want a popup menu to be displayed when the Radar button is clicked. To do this we have to add a popup menu component.
Scroll the Tool Palette at bottom right back to the top of the list and double click TPopupMenu from the Standard category:
You will see a small popup menu component in the middle of your form. The component will not be displayed when your program runs. It is a so-called non-visual component and holds, in this case, the menu items that are to be displayed when the Radar button is clicked.
Next, we need to add the menu items themselves.
Double click the popup menu component and add menu items by entering a Caption in the Object Inspector for each item. Use the Insert key to add new menu items (actually you can usually just use Enter to enter a new menu item after entering each Caption).
Enter the names of the capital cities of Australia as shown below.
Once you’ve added all the city names, double click the first city (the following assumes it is Adelaide as suggested). This opens the code editor in the same manner as when you clicked the Synoptic button.
An empty event handler for the menu item click is added. Add the following line between the begin and end:
If you run the program (F9) at this stage, you will need to click the drop down arrow to cause the popup menu to display (clicking on Radar itself will not work). Only Adelaide will display a rainfall radar map. You should be able to change between the synoptic chart and Adelaide.
Having to click exactly on the drop down arrow is annoying. Close the program and return to the form view. Double click the Radar toolbar button and add the following line:
watch out for the number !!
Make sure the number after Toolbutton corresponds with the number displayed before ‘Click’ in the line above the begin.
Why do we have to be careful in the line above? The reason is that we have not changed the default names generated by Turbo Delphi for the components we have added to the form (WebBrowser1, ToolButton1, etc). Interestingly, menu items are given names derived from their captions (a number is appended to make them unique); maybe a future version of Turbo Delphi will do this for buttons and other components. It is a little bit more work, but you really should give each component a descriptive name as it helps document your program.
To complete this little program, double click each menu item in turn and add the same line as for Adelaide:
but change the ‘nnn’ to the appropriate number for each city as follows:
Adelaide – 643
Brisbane - 663
Canberra - 403
Darwin - 633
Hobart - 373
Melbourne – 023
Perth - 123
Sydney - 033
Note these numbers were determined by right-clicking the image in the displayed web page and choosing View Image.
From here, you can extend the program how you like. You may want to display the city in the caption (hint: set the form’s Caption property when a menu item is clicked) or have the window open maximised (change the form’s WindowState property at design or run time).
Finally, another screen shot of the Turbo Delphi Weather application with Brisbane copping some nasty weather:
Article © 2006 Richard King All images © Australian Bureau of Meteorology