DesktopX: Builder Mode for Beginners Pt 4

From WinCustomize Wiki

DesktopX Builder Mode for Beginners (Part 4)

This tutorial will show you how to modify a pre-existing widget
Original Author:	sViz
Date Created:	July 25, 2007
Application:	DesktopX
Programs Used:	DesktopX , Photoshop (any program for graphics)

This DesktopX Builder Mode tutorial series for beginners will give you a basic feel for working with DesktopX and show you how to create fully functioning objects without having to write a script. Some of the most powerful DesktopX creations require scripts but so much can be done in DesktopX without ever having to write a single line of code. Thanks to various plug-ins and easy to use components of DesktopX you can create objects that do many of your basic tasks. From an email notifier to system meters, they’re all pretty easy to setup. In most cases you need only select the plug-in of choice and apply your own graphics.

In addition, you have the ability to import pre-existing widgets, where all the coding might be done for you, and modify them to fit into your own creations. (Note: If you intend to distribute your work, it is important to ask for permission from, and give credit to the author whose work you are including.)

1 Modifying an Existing Widget
- 1.1 Tweaking
- 1.2 Reconstructing
  - 1.2.1 Step 1- Take it apart
  - 1.2.2 Step 2 – Modify
2 Tips
3 Further Reading

[edit] Modifying an Existing Widget

If you find that the widget’s default properties doesn’t satisfy your customizing needs importing it into Builder Mode and making some adjustments will likely solve the problem.

[edit] Tweaking

Most times modifying an existing widget to suit your needs only requires a bit of tweaking; applying a different image, adjusting the hue or transparency, or changing the font. Depending on the type of widget and what you want to change, this is a relatively simple task.

Right-click on the DesktopX builder icon and select ‘import’. In the list of objects, select ‘Clear Clock’ then click load. Let's say I want to make the Clear Clock match this theme called The Cat by buzzh58

I'll need to change some of the colors but before you make any changes it’s important to know the make-up of the object or widget first. This is most true for complex widgets that are made up of many objects. Right-click on the DesktopX builder icon and select ‘list objects’.

In the new window you’ll see a list of all the objects that make up this clock. Right-click on the “Clockface_Small” object and open properties.

First, let’s make the numbers image black. Go to Color in the States tab and adjust the brightness to minus 255 (-255). Hit apply.

It’s completely unreadable so let’s give it some glow. In Shadow/Glow, set the sharpness to 10, darkness to 1000, offsetX to 0, and offsetY to 0. Change the color to a bright color. (I used one to match the theme.) Hit ok.

Nice! Now, to make the clock hands match. Right-click on the clock hands and select ‘configure analog clock’. In the configuration window, change the arms color to match you’re look. Click ok and apply. That’s it!

Images

Changing the image of an object is a little trickier. At times, the image’s settings are specifically set to make the widget function properly: height, width, margins, parent/child relations etc. In more complex widgets, the image might even be set through the script. This is why it’s important to review the properties of the object/widget first before making any changes. Since this clock is not complicated it was a snap to apply my own image as seen below.

[edit] Reconstructing

Sometimes you might find a widget that you’d like to make part of your theme, only you could do without some of its extra features. It might seem intimidating to take apart a pre-existing widget but the more you experiment, the more familiar you’ll be with the process. We’re going to reconstruct the “Silica Weather” widget which can be found by right-clicking on the DesktopX builder icon and importing.

(Note: If you intend to distribute your work, it is important to ask for permission from, and give credit to the author whose work you are including.)

[edit] Step 1- Take it apart

Select all, right-click, and ungroup.

Select all, right-click and open properties. Set activation and movement to ‘default’ and hit ok. Set aside the large current weather image, the five small weather images, current location text, current temperature text, and the clear background (we need this because it has all the weather images attached to it in custom files) .

We also need the weather forecast description text. First select all of the small weather images, right-click and uncheck script enabled. This will stop them from controlling the forecast text. Since the forecast text is hidden we need to access the it through the object list. Right-click on the DesktopX builder icon and select List Objects. In the object list, right-click and open the properties of the “weather_forecaststatus” object. In the Relation tab, set visibility to ‘yes’. In the States > Appearance tab enter some text and hit ok. Once the object is visible, set it aside with the rest of the objects we’re keeping.

[edit] Step 2 – Modify

Here’s the new image I’ll be applying to the “weather_back” background object. (Note: Right-click and save the image here)

In the Summary tab of the “weather_back” properties, click on the ‘reset’ button next to the height and width and set them to ‘image default’. Now apply the new image.

Arrange the weather information on the background as seen below making sure the small weather images are in a clockwise order:

The current temperature is a little small so change the font size in the mouse away and mouse over state to 20.

The forecast text also needs adjusting. Make the font style bold, the font color white, and the font border color black. In the shadow/glow tab, change the shadow color to black. Hit ok.

Now, select all and group. Set the group name to “weather” and the group method to ‘optimized’.

You may need to adjust the settings for the forecast text so open its properties and go to the summary tab. Make sure the parent is set to “weather_back”. Set the center parameter to 128, and the top parameter to 138.

Now select all, right-click and enable the script.

Select and delete any of the objects you’re not using. When prompted, do not delete related objects.

That’s it! Now that wasn’t too difficult was it...was it? Well, modifying widgets is mostly a trial and error process so go ahead and try your hand at some other widgets. You'll get the hang of it.