Creating a Weather Widget using Summer Weather2 Template

A DesktopX Tutorial

By on August 28, 2009 7:36:21 PM from WinCustomize Forums WinCustomize Forums

sViz

Join Date 04/2006
+504

 

 

 

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

17 Replies +1
Search this post
Subscription Options


Reason for Karma (Optional)
Successfully updated karma reason!
August 28, 2009 8:01:56 PM from WinCustomize Forums WinCustomize Forums

A very nice and profession job on this sViz.   

Thank you for all your time and efforts and talent and skill and..............

Reason for Karma (Optional)
Successfully updated karma reason!
August 29, 2009 2:09:55 AM from WinCustomize Forums WinCustomize Forums

I must ask, why only three days in the forecast?

Reason for Karma (Optional)
Successfully updated karma reason!
August 29, 2009 4:10:52 AM from WinCustomize Forums WinCustomize Forums

because she can

Reason for Karma (Optional)
Successfully updated karma reason!
Sign Up or Login and this ad disappears!
There are many great features available to you once you register. Sign Up for a free account and browse the forums without ads.
August 29, 2009 4:32:14 AM from WinCustomize Forums WinCustomize Forums

very nice tutorial sVis now i can hopefully get my wing widget back

Reason for Karma (Optional)
Successfully updated karma reason!
August 29, 2009 9:01:27 AM from WinCustomize Forums WinCustomize Forums

It's all Greek to me, but because of your work, maybe we'll get some action on the DX weather widget front. Thank you very much. No logos, no registration. Alright!!!

Reason for Karma (Optional)
Successfully updated karma reason!
August 29, 2009 10:30:17 AM from WinCustomize Forums WinCustomize Forums

No logos

Hidden logo. 

Reason for Karma (Optional)
Successfully updated karma reason!
August 29, 2009 10:30:54 AM from WinCustomize Forums WinCustomize Forums

very nice tutorial sVis now i can hopefully get my wing widget back

What is a wing widget?

 

Reason for Karma (Optional)
Successfully updated karma reason!
August 29, 2009 11:44:16 AM from WinCustomize Forums WinCustomize Forums

With this info,even I could build a weather widget(well,except for the template part, the graphics part and the script part.)

Seriously though,this is very well written and sure to help widget builders.

Reason for Karma (Optional)
Successfully updated karma reason!
August 29, 2009 11:56:52 AM from WinCustomize Forums WinCustomize Forums

Quoting RedneckDude,

very nice tutorial sVis now i can hopefully get my wing widget back
What is a wing widget?

 

http://www.wincustomize.com/skins.aspx?skinid=1629&libid=34

That is my wing widget, I will need to use some of the info on the right hand side as well eg windspeed, humidity etc, i guess i will just have a play and see how i can incorporate into what i already have

Reason for Karma (Optional)
Successfully updated karma reason!
August 29, 2009 12:10:31 PM from WinCustomize Forums WinCustomize Forums

Even wannabes like me. Even I can follow this one. Now I can terrorize OZ with fictitious starkerbarks. Ha ha ha... Good work.

Reason for Karma (Optional)
Successfully updated karma reason!
August 29, 2009 1:09:53 PM from WinCustomize Forums WinCustomize Forums

 Thanks all of you Widget makers.  I really like the Weather Widgets and that was my main reason for getting Desktop X.

Although I have come across some very neat widgets made for other applications that I never even thought about and I am using and love them.

All of your talent amazes me.

Darco

Reason for Karma (Optional)
Successfully updated karma reason!
August 29, 2009 6:12:03 PM from WinCustomize Forums WinCustomize Forums

 

Quoting RedneckDude,
I must ask, why only three days in the forecast?

That was just to demonstrate the versatility. You can use all six days or just three if you want.

It's not at all as hard as it sounds. Give it a try, folks. Even if you don't intend to upload.

Reason for Karma (Optional)
Successfully updated karma reason!
August 29, 2009 6:52:24 PM from WinCustomize Forums WinCustomize Forums

Really cool, thanks sViz!

It's not at all as hard as it sounds. Give it a try

I might be trying it soon...... 

 

With this info,even I could build a weather widget(well,except for the template part, the graphics part and the script part.)

 

Reason for Karma (Optional)
Successfully updated karma reason!
September 4, 2009 4:25:15 PM from WinCustomize Forums WinCustomize Forums

Very cool!

Reason for Karma (Optional)
Successfully updated karma reason!
September 6, 2009 3:41:37 AM from WinCustomize Forums WinCustomize Forums

will deffinatley give this a go *adding it to favourites*

Reason for Karma (Optional)
Successfully updated karma reason!
September 10, 2009 9:13:14 AM from WinCustomize Forums WinCustomize Forums

Bump for updates.

Reason for Karma (Optional)
Successfully updated karma reason!
September 10, 2009 5:22:07 PM from WinCustomize Forums WinCustomize Forums

Thanks, Eve! I appreciate all that you do!!   

Reason for Karma (Optional)
Successfully updated karma reason!
Stardock Forums v1.0.0.0    #108431  walnut1   Server Load Time: 00:00:00.0000469   Page Render Time:

Home | About | Privacy | Upload Guidelines | Terms of Service | Help
WinCustomize © 2014 Stardock Corporation. All Rights Reserved.