In this tutorial we’ll modify a DXPACK  in DesktopX to create a custom weather widget.

First, download the SummerWeather2_Template dxpack – Summer Weather 2 Template 

(Update: See the Updates section at the bottom.)

You can also download the images I used for this tutorial – Weather Images zip

Import into DesktopX Builder & Setup

Open DX Builder mode then r-click on the icon in the system tray and Import the SummerWeather2_Template.

You should have all this:

The first thing to do is decide just how much of all that you want to use. For most widgets, as with this tutorial, you’ll probably only be using the objects in the group on the left. We’re going to create this:

The main state of the widget will be the smaller mode, and then when you click on the weather icon, it will show you the extended information (which we’ll reduce to a three-day forecast, but you don't have to.)

So let’s corral everything we’re using and delete the objects we aren’t going to use. (IMPORTANT: the only object you cannot delete is the one containing the main script, “Weather_Back”, and the one containing the images, “Weather_Images”.  Do not delete these objects!)

Drag a selection box around the group on the right, r-click, and delete.

Now let’s separate the pieces of our remaining group. R-click on an object, select all. R-click again, open properties and set Movement = Normal.

Next, r-click on the large weather icon (“WeatherOutput_Image”), the temperature text (“WeatherFunction_ToggleUnits”), and the close button (“Weather_closewidget”), and Set Parent to none. We’ll set those objects aside for our mini-mode.

Getting back to the main group, select  (CTRL+click to select multiple objects) the first, fifth, and sixth forecast icons and weekday names, r-click, and delete.

Be sure this is what you have left.

Changing the Look

Now we’re ready to apply some new graphics, and we’ll start with the main background. R-click on the background object, open properties and go to the States tab to browse for your image. Do the same for the info button.

Clicking on the info button will reveal the info back. Open its properties and change the look as we did for the main background. The informative text is part of the image by default but you can change that as you see fit. The Weather Underground logo attribution must be included and must remain legible and unaltered. (for further details on the Weather Underground attribution, see Weather Underground Terms of Service.)

Clicking on the location name and running a search on a location, say, Canada, will reveal the search box. Here we’ll change the background image, the width of the dropdown, and the look of the cancel button. Ctrl+click on the drop down to show the resize box, and then drag the anchors to resize.

If necessary, drag the search box background over so you can see the cancel button and move it into position. You can use either an image or text for the cancel button. I’ve used text and added some glow for the mouse over state. Finally, change the search box background image.

Moving on to the text on the main screen. Simply r-click on a text object, open properties and go to the States tab to change the look. (I used Arial Rounded MT Bold for all the text.)

To do the information text that appears when you mouse over the forecast icons, select all three of the forecast icons, r-click, and uncheck Script Enabled. This will stop them from making the text disappear.  R-click on the DX Builder icon in your system tray, and choose List Objects. In the Object List, locate the “weather_forcaststatus” object, open properties and enter some text, so you can see the object (you may need to move it into position.) Make your changes as necessary.

(At this point, I decided to get rid of the time stamp text.)

Depending on the size of your main background, you’ll also want to set the width of the location text (“WeatherFunction_SetLocation”) so that the text wraps appropriately. Open its properties and go to the Summary tab to do so.

The cyclical information text will also need to be truncated, so open its properties and go to the Summary tab. In the Comments field change the number to the new width—for this tutorial, about 240. (We do this in the Comments field because that’s what the external script reads to set the width.)

At last, we come to the weather icons themselves. There are only 21 images used in this particular template. You can leave them as is, if you like the look, but if you want to change them you will need to create the following .PNG images (and name them thusly):

chanceflurries.png

chancerain.png

chancesleet.png

chancesnow.png

chancetstorms.png

clear.png

cloudy.png

fog.png

hail.png

hazy.png

ice.png

mist.png

mostlycloudy.png

mostlysunny.png

partlycloudy.png

rain.png

sleet.png

smoke.png

snow.png

tstorm.png

unknown.png

(Tip: The default icons can be found in the CurrentTheme cache folder --- Wincustomize Wiki Clearing the Cache)

Once you have created your images, it’s time to apply them. R-click on the DX Builder icon and open the Object List. Locate the “Weather_Images” object and open its properties. Go to the Summary tab and click on Custom Files.  REMOVE all the images listed there, then ADD all the ones you created. When prompted, choose Yes to overwrite. Close and apply when you’re done.

Remember those three objects we set aside for the mini mode? Here, I’ve made a background object for the mini-mode, changed the close button to an ‘X', changed the color and font of the temperature, and then grouped the related objects.

And that concludes the graphics portion of this tutorial. Next, scripting! Who’s excited, huh? Huh?

*crickets*

Adding a Script

Okay. R-click on the mini-mode weather icon and open properties. In the General tab, create a New script.

Copy and paste this script into the DesktopX Script Editor:

'Called when L-click is released

Function Object_OnLButtonUp(x, y, dragged)

                If dragged Then Exit Function

                If DesktopX.Object("Weather_Back").visible = True Then

                                DesktopX.Object("Weather_Back").visible = False

                                DesktopX.Object("Weather_infoback").visible = False

                Else

                                DesktopX.Object("Weather_Back").visible = True

                End If

End Function

Close the editor, apply properties.

 Now when you click on the icon it will show/hide the forecast window. See? Super-easy.

And the final touches:

• Be sure to re-enable the scripts on the forecast icons
• In Properties > Relation, set the “Weather_Back” object’s visibility to No, so that it’s hidden by default.
• In Properties > Relation, lock movement for any objects you don’t want moving around
• Select all and export to create your custom widget.

And we’re done.

Updates

IMPORTANT: Always delete the NOAAWUexternalscript.txt file from the main DesktopX folder before loading a new version. (Version numbers are stated at the very top of the text file.)

9/9/09 - Script Version 2: updated to handle cache issues. If you downloaded an earlier version, please redownload.

If you want to update a widget you created, please download Version 2 of the script HERE. Then, open Properties > Summary > Custom Files of the "Weather_Back" object, REMOVE the NOAAWUexternalscript.txt file and ADD the new version you just downloaded.

If you are an end user, simply download the new version of the script and replace the one in the main DesktopX folder.

2/2/2010 - Added missing sleet icon