Ubuntu 11.04 Natty - Changing the Number of Workspaces

OS: Ubuntu 10.04 Natty Narwhal

By default, Natty comes with 4 workspaces, which you can view by clicking the Workspace Switcher icon in the Unity Launcher. I personally don't like using multiple workspaces, so I wanted to change this to 1, so I didn't accidentally move windows to hidden workspaces (with hotkeys etc.) never to find them again. Others of you may want to reduce the number to 2, or even increase the number. An easy way to do this is with the Compiz Config Settings Manager, but if you don't have this installed, you can do it with gconf-editor.

1. Hit F2 and type gconf-editor
2. Navigate to apps > compiz-1 > general > screen0 > options
3. Update the number of workspaces by changing the values of the variables hsize and vsize, which represent the horizontal and vertical number of workspaces respectively (I set both of mine to 1)

Note: if like me you only want to have 1 workspace, you probably will also want to get rid of the Workspace Switcher icon in the Unity Launcher. Once you have followed the above instructions, all you have to do is log out and back in again and the icon will be gone!

Banshee Notification Area Icon in Ubuntu 11.04 Natty

My favourite extension for Banshee is called Notification Area Icon, which lets you control Banshee from an icon in the panel (left click will restore / minimise to tray, and right click will give you music controls). Unfortunately this stopped working after I upgraded to Ubuntu Natty.

To get it working again, you need to put Banshee in the Unity panel whitelist, which you can check with the following command.

gsettings get com.canonical.Unity.Panel systray-whitelist

Mine read as follows:

['JavaEmbeddedFrame', 'Mumble', 'Wine', 'Skype', 'hp-systray', 'scp-dbus-service']

To update this, you must append 'banshee' to the end of the list, and set it like so:

gsettings set com.canonical.Unity.Panel systray-whitelist "['JavaEmbeddedFrame', 'Mumble', 'Wine', 'Skype', 'hp-systray', 'scp-dbus-service', 'banshee']"

And then you will need to do a restart.


REFERENCES
http://fossplanet.com/f10/%5Bbug-777112%5D-%5Bnew%5D-notification-area-icon-not-working-ubuntu-11-04-banshee-2-0-0-a-154634

Adding a Custom App to the Unity Launcher

OS: Ubuntu 11.04 Natty Narwhal

I use a custom version of Eclipse, which I simply download from their website, extract to somewhere in my home directory, and then I can run the executable. If you want to integrate something like this with the new Unity launcher in Natty, you can do so by following the instructions below:

1. Open the dash and run "Main Menu".
2. Create a "New Item" in a suitable location (e.g. Applications > Programming).
3. Leave the Type set to Application. Give it a nice readable Name, and then for the Command, simply type the path to your executable. You can also add an icon by clicking the springboard button.
4. You should then be able to invoke the Dash, and type the Name you entered before, and your app should appear. You can then drag it into the Launcher.

Problems with jQuery fades using semi-transparent PNG images in IE8

I had some PNG images containing some semi-transparency (there were parts that were not completely transparent i.e. a shadow). I then used jQuery to fade between these images, as shown in the code below. This worked in all browsers except for IE, which showed a dark grey ring around each image while it was fading (it looked fine before and after each animation). I think IE was replacing each semi-transparent pixel with a fully opaque dark grey one. The solution was to apply Microsoft's AlphaImageLoader filter to each image, as shown in the CSS at the bottom.

HTML

JQUERY

setInterval(function() {
   var $active = $("#header-splats .active");
   var $next = $active.next().length ? $active.next() :
                                $("#header-splats div:first");
        
   $active.fadeOut("slow", function() {
      $active.removeClass('active');
   });
   $next.fadeIn("slow").addClass('active');
  
}, 3000);

CSS

#header-splats, #header-splats div {
   width: 106px;
   height: 106px;
}
/* overlap each other */
#header-splats div {
   position: absolute;
   top: 0;
   left: 0;
   display: none;
}
#header-splats div.active {display: block;}

This looks great in all browsers except IE, as you can see in these images:

THE SOLUTION: apply the following Microsoft filter in the CSS to each image (make sure you update the image path for each one).

CSS

#splat-1 img {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='/images/splats/splat1.png');}
#splat-2 img {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='/images/splats/splat2.png');}
#splat-3 img {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='/images/splats/splat3.png');}