Recent Posts
Recent Images
Popular Tags

Welcome to CHAZCO. This site contains articles about computer networks, website design and development and much more. Thank you for visiting...

Filesystem check (fsck) a Truecrypt volume

Truecrypt allows you to create encrypted volumes with a filesystem of your choice. Normally, ext2/3 based volumes are checked at boot time for errors after about thirty mounts. Since Truecrypt volumes are not mounted at this point they do not get checked. This is a quick guide on manually checking a Truecrypt volume on Ubuntu 9.04 with Truecrypt 6.1a.

First, start Truecrypt. Choose a free slot from the list and select the source file or device. Click Mount. In the password dialog click the "Options" button. Under the "Filesystem" section check the box marked "Do not mount". Enter your password and click "OK".

Next, select the volume from the list and choose "Volume Properties". A list of information will be displayed. Make a note of the value for "Virtual Device", which should be similar to "/dev/mapper/truecryptX".

You can now run the filesystem check. Start a terminal and run the following command, replacing "/dev/mapper/truecryptX" with the value you made a note of:

sudo fsck -C -f /dev/mapper/truecryptX

You may need to enter your Ubuntu password. The "-C" option will cause a progress bar to be shown, and "-f" will force a check even if the device hasn't been mounted thirty times. Once the check has completed you can dismount the volume from inside Truecrypt.


Generating Thumbnails with PHP

Thumbnails are "preview" versions of an image, designed to give an idea of what the full sized version contains. They are usually a reduced size version of the image, or they can be a cropped version of the image. PHP is often used for uploading images, often for image galleries, so the ability to create thumbnails with PHP can be very useful.

Thumbnail Metrics, Format and Quality

One aspect to consider before creating thumbnails is to determine the target image metrics (the image dimensions) which will depend on the quality of the source images and its subject matter. Choose a set of dimensions which is large enough for a viewer to see what the thumbnail is meant to show. It is also important to maintain the image aspect ratio to prevent distortion (more on this later).

The next most important aspect to consider will be the thumbnail image format, which will determine what compression is available and to some extent browser compatibility. One possibility is GIF, which is useful for low-colour line-art style images. Another possibility is JPEG, which is good for photographs. PNG offers some of the advantages of both GIF and JPEG, but is not as well supported on older and mobile browsers.

Sample PHP Code

Lets take a look at creating a PHP function which takes the full file path of an (already uploaded) image and creates a thumbnail of the image in the same format. It will return false if the thumbnail cannot be created at any stage. An example of usage for this function is:

imageCreateThumbnail('/path/to/source/mypic.jpg', '/path/to/dest/mypic-thumb.jpg');

The first task is to determine the dimensions and file type of the source file. These are needed to calculate aspect ratios and to output to the correct file type.

function imageCreateThumbnail($inputFile, $outputFile)
{
	if(!list($width, $height, $type) = @getimagesize($inputFile))
	{
		return false;
	}

The next step is to determine the target dimensions. This code will determine the image orientation and calculate the dimensions required so that it would fit into a 160x160 box. It also takes account of images which do not need resizing.

	$maxSize = 160;
	if(($width <= $maxSize) && ($height <= $maxSize))
	{
		// Image doesnt need resizing
		$targetHeight = $height;
		$targetWidth = $width;
	}
	else if ($width > $height)
	{
		// Image is landscape
		$aspect = $width / $maxSize;
		$targetHeight = $height / $aspect;
		$targetWidth = $maxSize;
	}
	else
	{
		// Image is portrait
		$aspect = $height / $maxSize;
		$targetWidth = $width / $aspect;
		$targetHeight = $maxSize;
	}

Next, we create a blank image at the required size:

	$thumbnail = imagecreatetruecolor($targetWidth, $targetHeight);

There are multiple functions to load the existing image, depending on its format. The following code supports source formats of GIF, JPEG and PNG. The IMAGETYPE constants are defined in PHP and do not need to be declared by our script.

	switch($type)
	{
		case IMAGETYPE_GIF:
			$image = imagecreatefromgif($inputFile);
			break;

		case IMAGETYPE_JPEG:
			$image = imagecreatefromjpeg($inputFile);
			break;

		case IMAGETYPE_PNG:
			$image = imagecreatefrompng($inputFile);
			break;

		default:
			return false;
	}

To perform the resize we copy the loaded image ($image) into the empty thumbnail ($thumbNail), resizing as appropriate.

	imagecopyresampled($thumbnail, $image, 0, 0, 0, 0, $targetWidth, $targetHeight, $width, $height);

Finally, we save the thumbnail in the same format as the source image. Note that to save as JPEG requires a quality option specifying which compression level to use.

	switch($type)
	{
		case IMAGETYPE_GIF:
			if(!imagegif($thumbnail, $outputFile))
			{
				return false;
			}
			break;

		case IMAGETYPE_JPEG:
			if(!imagejpeg($thumbnail, $outputFile, 100))
			{
				return false;
			}
			break;

		case IMAGETYPE_PNG:
			if(!imagepng($thumbnail, $outputFile))
			{
				return false;
			}
			break;

		default:
			return false;
	}

	return true;
}

The above code provides a good starting point for creating your own thumbnail code. Note that the script will require permissions on directories correctly configured to be able to create the thumbnail.


Website Development with Firefox 3

Once you've set up a separate profile for web development you need to configure it. This can include installing plugins, custom settings and so on. There are a huge range of plugins available on the Mozilla website, this page lists a few recommended plugins for website development.

Firefox Web Development Plugins Profile

Firebug (outlined in blue in the above screenshot, click for a larger version) is a very powerful plugin for Firefox. It allows easy viewing, editing and debuging of HTML, CSS and JavaScript. Some examples of functionality include viewing HTML as a tree and the ability to highlight CSS metrics. It also allows monitoring of page load times and so on. Firebug is accessed with a single key (F12) and can be easily hidden.

The Web Developer Toolbar (outlined in red in the above screenshot) offers a wide range of facilities for web development. Some examples of its functionality includes selective disabling of components, options for editing and improving code, outlining and custom source code editors. One of the most useful features is the ability to pass a page to the W3C checker.

Colorzilla (outlined in yellow in the above screenshot) is a plugin designed to work with colours. It offers various palettes and integrates with Firebug. One of the most useful features is the eye-dropper, which allows the user to select a pixel and discover its colour. Outputs include RGB and hex and can be easily copied.

Cache Status (outlined in green in the above screenshot) is a fairly simple plugin but still very useful. At some point most website developers will have made changes to their site and found they had no effect. The culprit for this is often a cached version of the page. Cache status makes it easy to clear the cache and view its current status.

These plugins, along with many more, can be installed from within the plugins manager of Firefox.


Creating a Development Profile in Firefox 3

There are a range of plugins available for Firefox 3 which can be used when developing web content. If a large number of plugins are installed this can cause poor performance and clutter up the screen. One possible solution to this problem is to have multiple profiles, such as one for development and one for normal browsing. Profiles enable you to have different sets of bookmarks, plugins and settings for Firefox.

Managing Profiles

To manage profiles (and create them) you need to use the Firefox profile manager. You can start this by using the "-P" switch. To do this on Ubuntu, close all instances of Firefox and then press Alt+F2 to open a Run prompt. Enter "firefox -P" and click on the Run button.

Run Firefox Profile Manager

You should now see the profile manager. The list shows available profiles and the buttons to the left allow management of these profiles. To start Firefox with a particular profile select it from the list and choose "Start Firefox". To make the profile manager display each time Firefox is started uncheck the "Dont ask at startup" option.

Firefox Profile Manager

Choose the "Create" option and follow the instructions. Enter something like "WebDev" for the profile name. Try not to use spaces, as this makes creating shortcuts/launchers more difficult. Once your profile is created you can start it and customise it.

Starting Profiles Directly

If you have chosen not to have the profile manager start automatically then Firefox will usually start with the last profile that was used. To change this, you can create multiple shortcuts/launchers that will allow you to start each profile with a single click.

For each profile create a new shortcut/launcher (see your operating system guides for instructions on how to do this) and provide the following command line for the shortcut:

firefox -P ProfileNameHere -no-remote

Launcher Firefox Profile

The shortcut/launcher will start the profile listed and allow multiple instances to be ran (this is the prupose of the "-no-remote" option). This means if you development profile crashes your browsing profile probably wont.


4211vd – Display Panning Applet for Ubuntu on the MSI Wind

The MSI Wind U100, also sold as the Advent 4211, features an LCD display with a resolution of 1024x600. Whilst this is becoming a fairly standard netbook resolution many applications do not run correctly with it. 4211vd is a simple utility to allow panning or scaling under Ubuntu 9.04 on the MSI Wind U100.

4211 Virtual Display Tray Applet

Panning or Scaling

Under panning mode the LCD screen acts like a window onto a larger display. By moving the cursor to the edge of the screen the user can pan around the larger display. Scaling mode displays a larger resolution on the LCD panel by shrinking it to fit. However, since the 1024x600 resolution is a hardware limitation this can result in poor display quality.

Requirements

4211vd requires the following to be configured and working (the standard Ubuntu 9.04 install should be suitable), although it may work on other configurations:

Download

DISCLAIMER: 4211vd is provided "as-is". It is not guaranteed to be fit for purpose. The author accepts no liability for damage or loss caused directly or indirectly by 4211vd. You may not modify or redistribute 4211vd.

4211vd is provided as a ".deb" Debian package. On a standard Ubuntu 9.04 installation you can simply download the package to your desktop, double click it and choose "Install Package". You may need to log out and back in for 4211vd to start.

The current version of 4211vd is 0.0.1.

Enabling Scaling

By default 4211vd uses panning mode. If you want to enable scaling you can edit the "4211vd.sh" script, which is located in "/usr/bin". Find the line which says "scale=0" and change it to "scale=1". This is not recommended however.

Usage

4211vd should automatically start when you login to the Gnome desktop. To switch to panning/scaling mode simply click on the icon located in the notification area (see above screenshot). To switch back, just click it again.

Copyright © CHAZCO 2009