0CFE69074D054EC786164AC7D52B6357
USA
Email this Page | | Feedback
WeatherBug Desktop App

Labs

Change Location

Leopard Lesson Plan #2
Intermediate - Community WeatherBug
Lesson Files - Download

Introduction

The live and local weather data that WeatherBug provides is extremely valuable, but with Leopard, you can take that data and personalize it by building your very own WeatherBug desktop application that is designed by you and contains information and links to other resources that would be beneficial to you and the community. Let's learn how to build one for Seattle, Washington.

Open Leopard. Now you are ready to begin.

First download all files that are needed for lessons Plan #2. Right click to save the file, then drag and drop into Leopard.

pikeplace.bmp
seattle.JPG
seattlebug.lep
seattlecenter.bmp

Creating a Window

In the first lesson, we learned how to create a basic window in Leopard, and this is the window code for the application that we'll call SeattleBug:

window

window title
SeattleBug

window size
780
610

end

Once you type that code into Leopard, feel free to run it. As you can see, the basic window is created, but we'll now add more components to it before the end command.

Adding a WeatherBug Control

Let's now add a WeatherBug control to our program. We'll use the 98101 zip code for Seattle, and we'll use the available 300x250 size for this control since we want to display more weather information, including the forecast:

weatherbug
98101
300x250
33
10

Using BmpButtons

In addition to using regular buttons, we can also use bmpbuttons in Leopard, and these are bitmap images that can be clicked on and programmed to perform a certain action. They can be created in Microsoft Paint or most any other image editing program. You can even convert images in other formats to bitmaps that can be used as bmpbuttons. I used a Web site called My Cool Button to create the buttons for this program, and I then saved them as bitmaps.

The first line of text under the control name is the name of the bitmap from the main Leopard directory that you want to use. The two numbers refer to the placement of the bmpbutton.

Here are the two bmpbuttons that we'll use for this program, and they're both for local Seattle resources. One is for the Pike Place Market, and the other is for the Seattle Center.

bmpbutton
pikeplace.bmp
495
80

bmpbuttontwo
seattlecenter.bmp
495
151

Adding Web Controls

Web controls enable you to embed content from the Internet directly in your programs. This includes images, widgets, and so on, but for now, we'll use the WeatherBug commands to display graphical weather maps.

Under the control name, we reference the type of weather map that we want to load in addition to the region that we want to see the information for. Since this is a basic image and we have established space for it, the “no scrollbars” section of the code tells Leopard to eliminate the scrollbars. Once again, the numbers refer to the placement and sizing of the controls.

web
weatherbug radar NW
no scrollbars
5
290
370
278
webtwo
weatherbug temperatures NW
no scrollbars
390
290
370
278

Establishing Onclick Events

We want each of the bmpbuttons to use the Web browser to go to a certain Web site when clicked, and to do that, we'll use the Internet onclick event in addition to the Web site address of the page that we want to load.

bmpbutton onclick
internet
http://www.pikeplacemarket.org

bmpbuttontwo onclick
internet
http://www.seattlecenter.com/

Using an ImageBox

The imagebox control enables us to embed images from the computer in the program. For example, let's use a picture that I took of Seattle as the background image for this project. The code for this control is placed after the creation of all the other controls because this puts the image in the background and allows everything else to sit on top of it.

Seattle.jpg is the name of the image to be used. Notice how the first two numbers are set at zero. This tells Leopard to display the imagebox at the top-left corner of the window.

imagebox
seattle.jpg
0
0
800
600

The End

Now that all of the required code has been added before the end command, we're now ready to run the complete program.

Here's the full program code from beginning to end:

window
window title
SeattleBug

window size
780
610

weatherbug
98101
300x250
33
10

bmpbutton
pikeplace.bmp
495
80

bmpbuttontwo
seattlecenter.bmp
495
151

web
weatherbug radar NW
no scrollbars
5
290
370
278

webtwo
weatherbug temperatures NW
no scrollbars
390
290
370
278

bmpbutton onclick
internet
http://www.pikeplacemarket.org

bmpbuttontwo onclick
internet
http://www.seattlecenter.com/

imagebox
seattle.jpg
0
0
800
600

end

Additional Student Activities

  1. Change this code to work for your local community or school. Modify the weather controls to display current conditions in your area, and create new bmpbuttons to link to news about the school, etc.
  2. Take a picture of the community, school, or students and use it as the background image for the program.
  3. Take the localized WeatherBug application created by the class and share it with the community and the student's parents by placing the download on the school/class Web site.

reviewed by TRUST e site privacy statement
Read our Terms of Use. By clicking to download WeatherBug, you agree to these terms.