Blog

Unity

So I've recently updated the Ubuntu installation on my laptop to 11.04 (Natty) and I'm starting to come to terms with the new Unity interface. I think I might like it, mostly because it is very similar to how I've set up my Mac, though I've not used it in anger (ie for work) just yet, so we'll see if I change my mind. One thing I have discovered though is it's actually quite hard to change any of the Unity settings. I couldn't find any configuration or preference applications anywhere, and right clicking on certain locations doesn't bring up a menu from which you can select "Preferences" or similar. Unity is actually a Compiz plugin from what I can see so accordingly, you need to configure it like you would other Compiz features... 1. Install CompizConfig Settings Manager if it's not installed already:

$ sudo apt-get install compizconfig-settings-manager

2. Use Unity to find and launch the CompizConfig Settings Manager (super+a and search for Compiz) 3. Select "Desktop" in the left column and "Ubuntu Unity Plugin" on the right

Login Screen

Update: actually, instead of trying to get slim to work on 11.04, it's easier to use Ubuntu Tweak. Since Ubuntu 9.10, installing new login screen themes or changing the login window appearances is not as easy as before. There’s no powerful GDM login manager do change login appearances as you like. So I dug around and found an alternative login manager for X11 called SLiM.  It's desktop-independent and completely configurable through themes and an option file; is suitable for machines on which remote login functionalities are not needed. It can instead GDM to customize your own login screen appearances.

Installation

Run the command in Applications -> Accessories -> Terminal:

sudo apt-get install slim

while installation, it asks for choosing a login manager between GDM and SLiM, just choose SLiM. If you change your mind and want to change the default login manager back to GDM, run:

sudo dpkg-reconfigure gdm

Customize a login theme

You can download a SLiM login theme from http://slim.berlios.de/themes01.php Or create a theme (read http://slim.berlios.de/themes_howto.php):

• a background image (background.png or background.jpg)
• a panel image (panel.png or panel.jpg)
• input box(es) and messages and their placement and properties (slim.theme)

Now, let’s change the login theme:

1. Put the downloaded/created theme under /usr/share/slim/themes
2. Edit /etc/slim.conf

# current theme, use comma separated list to specify a set to
# randomly choose from
current_theme debian-moreblue-orbit

To select a random a theme, replace the theme name with couple themes separated with “,”(without quotes). To Preview the theme:

slim -p /usr/share/slim/themes/NAME

A few weeks ago I went to this cozy pub in Shibuya called Craftheads. Nice selection of ales and fruit beers, mostly exclusively imported. Nice atmosphere, good food, although the price was little bit costly for the casual Friday night drinking.

When you are working with Git repositories, sometimes you want to separate out a folder into its own repository, removing it from history in the parent repository, but keeping history for the folder in the newly create repository. Here are the steps.

Often when you install a VM in virtualbox you’ll notice that initial size of the VM image would be more or less equal to the disk space actually used in the VM. However with time, as you play around, you will find that the size of VM image would always keep on increasing. The disk space actually used would be far lesser than the VM image size. We would try to compress the VM image to the space actually used up inside the VM. Pre-condition – The image that we are going to shrink should have been dynamically expanding type, when you created the disk very first time. This is explained for a windows VM. Theoretically should work on other VMs also. Ok, Lets get started. We’ll need the following tools: 1. http://www.feyrer.de/g4u/nullfile-1.02.exe : This tool zeroes out free space, which our next tool compresses. For Linux based OS, search for a file, zerospace.c, which you’ll have to compile yourself. 2. VBoxManage : This tool is the command line management tool that ships with VirtualBox. Whatever you can do with the GUI, can be done by this. + A lot more  Ok now. 1. First boot into your VM. Defragment your drive atleast 2 times. 2. Copy the tool, nullfile mentioned above to the VM and run it. A simple double click should do it. 3. Now shutdown the guest. Open a terminal in the VM image directory. Most probably /home/<user_name>/.VirtualBox/VDI 2. Run our final command, We would be done after this. VBoxManage modifyvdi <file_path> compact

I went to the opening of the Baird Bashamichi Taproom.

If you are like me, who is just happy with non-crappy looking pages without going into a CSS frenzy, jQuery UI definitely is probably what you're looking for. In fact, pure jQuery UI pages do look pretty awesome - all it needs is a few js/css links and a couple of lines of javascript. If you are placing all files from jQuery UI themes in the same place, so that the common files overlap, it's very easy to switch between themes -  just a matter of changing the theme name in the path to the theme specific css file:

<link id="tk-stylesheet" type="text/css" rel="stylesheet"
	href="/script/jquery-ui/css/dot-luv/jquery-ui-1.8.4.custom.css" />

into

<link id="tk-stylesheet" type="text/css" rel="stylesheet"
	href="/script/jquery-ui/css/redmond/jquery-ui-1.8.4.custom.css" />

I was already doing this theme selection RESTfully, parsing $_GET['skin'] in php. I was looking at the ThemeRoller on the jQuery UI site, which allows you to choose from the pre-set themes and build your own, when I realized how easy it is to switch themes using AJAX in jQuery UI. All you need to do is change the href attribute. However, just changing the theme ajaxly wasn't quite enough for me - I've recently developed a login framework with PHP/MySQL as the backend and jQuery UI as the front-end. This framework also stores user settings. What I really wanted was a way for users the switch between themes ajaxly whilst saving the theme setting so that when the user logs in the next time, the chosen theme will be selected by default. So for the rest of this article I will be talking about how to do all the above, assuming you have a page set up to use jQuery UI as the front-end already, and that you have some kind of mechanism to save user settings.

Demos

I've pretty much put this skin switcher to all of my webapps. Ones that are publicly available include:

• Tak's jquery-ui demo
• tkweb::mlib3

The "Short" Version

For the impatient, here's the short version:

Stylesheet Link:

<link id="tk-stylesheet" type="text/css" rel="stylesheet"
	href="/script/jquery-ui/css/dot-luv/jquery-ui-1.8.4.custom.css" />

Javascript:

if (typeof TK == "undefined") var TK = {};
TK.getCssUrl = function(skin) {
	return "/script/css-proxy.php/script/jquery-ui/css/"
	+ skin + "/jquery-ui-1.8.4.custom.css?css";
};
...
$('#tk-stylesheet').attr('href', TK.getCssUrl("redmond"));

CSS fetcher:

Prepare a DOCUMENT_ROOT/script/css-proxy.phpfile which returns

file_get_contents($_SERVER['DOCUMENT_ROOT'] . $_SERVER['PATH_INFO']);

Step 1. Download jQuery UI Themes

If you are not fussed about customizing the theme, you can simply download the themes from the Gallery section on the jQuery UI Theme Roller. Unzip all themes to the same folder, overwriting any duplicates.

Step 2. PHP

Now we will start the css-proxy.php to fetch the all the CSS that you need.

if (isset($_GET["css"])) {
	header("Content-Type: text/css");

	$s = "#dummy-element{width:2px;}";

	$s .= file_get_contents($_SERVER['DOCUMENT_ROOT'] . $_SERVER['PATH_INFO']);

	$patterns = array(
		"/(url\('*)/"
	);
	$replace  = array(
		"\\1" . dirname($_SERVER['PATH_INFO']) . "/",
	);

	$s = preg_replace($patterns, $replace, $s);

	echo $s;
}

Notice the #dummy-element that has been added. This is just a way to detect whether the css has been loaded in javascript, but we will come back to this later. Here we get the path to the css file using $_SERVER['PATH_INFO']; of course, you may choose to use $_GET variable instead. Since the page that we are serving is most likely not on the same directory as the jquery-ui theme css file, we need to replace the relative image paths with the absolute paths, hence the preg_replace(...).

Step 3. Javascript

Now for the fun part. We prepare a javascript file for switching stylesheet using AJAX. It kind of assumes you have a login framework that supports user specific settings. I have created my own framework to do this; perhaps I'll write it up in another post.

$(function(){
	TK.skinSwitcher.init();
});
if (typeof TK == "undefined") var TK = {};

/* this is where we specify the path to the css-proxy.php file we have prepared earlier */
TK.getCssUrl = function(skin) {
	return "/script/css-proxy.php/script/jquery-ui/css/"
		+ skin
		+ "/jquery-ui-1.8.4.custom.css?css";
};

/* returns another php css proxy file in the same directory as the page being served */
TK.getCssUrl.custom = function(skin) { return "styles.php?skin=" + skin; };

/* This points to the script that allows users to persist their settings
 * using GET or POST.
 */
TK.getSettingsUrl = function() { return "/script/your-login-settings.php"; }

/* A wrapper function to get the url for saving
 * the current user's skin selection
 * If sucsessful, it should return the same skin name as parsed.
 * Otherwise it should return the currently selected skin name
 * for the current user, or the default skin name or something.
 * If you don't have a login framework, you can create a php file with just
 * * and put the path to that file in getSettingsUrl()
 */
TK.getSettingsUrl.skin = function(skin) {
	return TK.getSettingsUrl() + "?skin=" + skin;
}

/* Main skinSwitcher object */
TK.skinSwitcher = {
	dialog : null,
	message : null,
	init: function(){
		$('

').appendTo('body');
	},
	check: function(callback) {
		/* This is why we inserted the #dummy-element to the CSS
		 * returned by css-proxy.php
		 */
		if ($('#dummy-element').width()==2) callback();
		else setTimeout(function(){TK.skinSwitcher.check(callback)}, 250);
	},
	load : function(skin) {
		TK.skinSwitcher.message = document.createElement("div");
		$(TK.skinSwitcher.message).html(
			"

Please wait while the skin '" + skin + "' is being loaded... "); $(TK.skinSwitcher.message).dialog({ modal: true, draggable : false, resizable : false, title : "Switching skin" }); /* When working with localhost, you can setTimeout(...) * to introduce fake network latency. Comment it out for Production */ //setTimeout(function() { $.get(TK.getSettingsUrl.skin(skin), function(data){ /* Here's the core of this script; * we simply change the href attribute of the stylesheet tag. */ $('#tk-stylesheet').attr('href', TK.getCssUrl(data)); $('#tk-stylesheet-custom').attr('href', TK.getCssUrl.custom(data)); /* We start off the checking "thread" parsing a callback function * to be executed when the css has been loaded */ TK.skinSwitcher.check(function(){ $(TK.skinSwitcher.message).dialog("close").remove(); }); }); //}, 200); }, showDialog : function() { $(TK.skinSwitcher.dialog).dialog({ resizable: true, height:400, width: 600, modal: false, title : "Select a skin", show : "drop", hide : "drop", buttons: { Close: function() { $(this).dialog('close'); } } }); } }

Now you can test it using something like the following html

...
Load ui-lightness
Load ui-darkness

Fancy Skin Selection Dialog

In addition to the above javascript, you can create a nice dialog box with thumbnails for users to be able to select the skin. First, scan for all skins available using PHP.

$skinsdir = $_SERVER['DOCUMENT_ROOT'] . "/script/jquery-ui/css/";
if($dir = opendir($skinsdir)) {
	while($entry = readdir($dir)){
		if($entry[0] != '.' && is_dir($skinsdir.$entry)) {
			array_push($skins, $entry);
		}
	}
	closedir($dir);
}

Then in the TK.skinSwitcher.init() function, you can insert something like:

$('