Let The User Choose Your Gadget's Opacity

This article was written and submitted by an external developer. The Google Desktop Team thanks Benjamin Schirmer for his time and expertise.

• Introduction
• Opacity Or Transparency
• The Context Menu
• Setting And Retrieving the Opacity Level
• Putting It All Together
• Conclusion
• Author Bio

Introduction

Some users love it when a gadget merges seamlessly with the desktop wallpaper. Others want their gadgets to clearly stand out. Can you create a gadget that gives every user what he wants? Why not give him the ability to choose the opacity of the entire gadget! This article will show you how it can be done by adding a few small code snippets.

Opacity Or Transparency

The ability to see through an object is called opacity by some and transparency by others. In Desktop gadgets, opacity describes to what degree the gadget is visible. This means that 100% opacity is completely visible and 0% opacity is completely see-through. Transparency, on the other hand, describes the degree that the object is invisible. Therefore, 100% transparency means that it is completely see-through and 0% transparency means completely visible. Since Google Desktop uses opacity, this article will use the opacity scale, but feel free to use the transparency scale in your gadget. Just don't confuse your users by mentioning transparency, when you're really dealing with the opacity scale.

Additionally, you should make sure that the user is unable to choose 0% opacity or 100% transparency, since this would make the gadget invisible. If that occurs, the gadget could be hard to find.

The Context Menu

Figure 1: Opacity Context Menu

The first step is to populate the context menu. The user can choose the opacity he wants through the menu options. In this example, we populate the menu with the options to set the opacity from 20% to 100% in steps of 10%. You can easily modify this to fit your own needs.

function AddCustomMenuItems(menu) {
  var opacSub = menu.AddPopup(strOpacity);
  for (var i=100; i>10; i-=10) {
    var capt = i+"%";
    opacSub.AddItem(capt, (getOpacity()==i)?gddMenuItemFlagChecked:0, onOpacClicked);
  }
}

The code creates a submenu containing each of the opacity options. If the user selects any option, the onTransClicked method is called. The getOpacity function returns the currently selected opacity. If the current opacity equals the opacity of the option, the option is "checked". That way the user can recognize the currently selected opacity level. To make this code work in your gadget, you need to define strOpacity in your strings.xml file. For example:

  <strOpacity>Opacity</strOpacity>

Now let's implement onTransClicked, which is called whenever the user selects an item.

function onOpacClicked(itemText) {
    var opac = itemText.substring(0, itemText.indexOf("%"));
    setOpacity(parseInt(opac));
}

The code extracts the text before the % sign and converts it to a number. This number is the opacity level chosen by the user.

Setting And Retrieving the Opacity Level

You might have already spotted the two functions setOpacity and getOpacity. These functions are used to set and retrieve the opacity of our gadget. First, we implement the setOpacity function, which is called with the new opacity level. The function converts this into an opacity value that Google Desktop can understand. Google Desktop works with a scale from 0 to 255, where 0 means invisible and 255 means completely visible. Additionally, setOpacity saves the user's opacity into the gadget's options object for later use.

function setOpacity(opac) {
  background.opacity = (255/100)*opac;
  options.putValue("Opacity", opac);
}

One very important thing here is the background element. This is a div that contains all the other elements of the gadget. Unfortunately, it is not possible to assign an opacity level to the view itself. Therefore, we need this main div container which contains all elements of our gadget (or just the ones you want to apply the opacity to). Since opacity affects all elements inside the div, we do not need to set this opacity to each individual element, but just to the container itself.

On the flip side, getOpacity reads the opacity assigned to the background container and converts it to a percentage.

function getOpacity() {
  var opac = background.opacity/(255/100);
  opac = Math.round(opac);
  return opac;
}

Putting It All Together

You now have code to create the context menu and functions to set or retrieve the opacity of the gadget. All that's left is startup code to set up the context menu and restore the saved opacity preference. To do this you need to add the following three lines into your view_onOpen function. It will then be called when your view is created.

  options.putDefaultValue("Opacity", 100);
  setOpacity( options.getValue("Opacity") );
  plugin.onAddCustomMenuItems = AddCustomMenuItems;

That's it. Now your users can easily choose the opacity they want!

Conclusion

It is very easy to make your gadget customizable for your users. Giving them more control encourages them to play around with your gadget and use it more frequently. If it feels like your gadget merges with the user's overall desktop, they are more likely to keep it there. Also, the context menu is a very useful way to present options the user might change often. Your options are not only easily accessible, but also fit perfectly within the overall look and feel of Google Desktop.

Author Bio

Benjamin Schirmer holds a diploma in engineering from Albstadt-Sigmaringen University and is an enthusiastic gadget programmer. He loves to explore new technologies. In his spare time, he likes watching movies, TV series, and going out with his friends. In the future, he wants to be a Googler himself. You can visit his gadgets page for a list of all his cool Google Desktop gadgets.

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.