Archive for February, 2009

Feb 24, 2009

HOWTO: Self-Signed SSL on IIS in Vista

Author: gaweee | Filed under: development, howto

Yes it can be done, no its not hard at all, no you dont have to download any weird sharewares and no it doesnt cost a cent. Lets go!

  1. Download the SelfSSL from microsoft downloads
  2. Install it, duh.
  3. Assuming you installed it where its supposed to be, go to C:\Program Files\IIS Resources\SelfSSL and run selfssl.exe
  4. Agree to it installing the certificate for you and press Y
  5. Open your IIS Manager > Sites
  6. Right click on the Default Web Site and choose Edit Bindings
  7. Add
  8. Select type as https and select the certificate you just installed.
  9. Done

Viola!

This adds the certificate for only a puny 7 days. If you’re like us, you’ll probably need a cert for a much longer period than that. No problem!
Fire up your command prompt and cd to C:\Program Files\IIS Resources\SelfSS\
type the following:

selfssl.exe /V:3650 /t

That’ll give you a nice cert for 10 years.
But wait, you’re original cert is still there! Wel’ll have to remove it.

  1. Start->Run->mmc.exe
  2. File -> Add/Remove Snap-in
  3. Certificates (on the left column)
  4. OK
  5. Navigate the tree to: Certificates -> Personal -> Certificates
  6. Delete the original SSL cert you created (see the expiration date differences)
  7. Follow the above instructions in customizing your IIS to the new cert now. =D

Note: This is used for development purposes and the certificates will be recognized as invalid for that domain. Go ahead and add the security exception in Firefox, IE, Chrome or whatever other browsers you’re using.

Feb 11, 2009

JQuery Progress Bar 1.2

Author: gaweee | Filed under: development, howto
jQuery progressBar screenshot

Thanks for all the comments and feedback! By popular request i’ve added the multi-colored progress bar and fixed some bugs. The new multi-colored bar changes from red to orange and then to green at configurable intervals. Check out the demo!

Since the last update this endeavour has seen comments claiming that it works and sometimes that it doesnt. I’ve tested the demo across Safari, Opera, IE6/7, Firefox and Chrome. Havent found any problem. For those of you who have problems, please do email me the problem.

Download the new jQuery progressbar here: jQuery progressbar
or view the demo here

Feb 8, 2009

HOWTO: Readymade Form CSS and Highlighting

Author: gaweee | Filed under: development, howto
jQuery WITSForm

We’ve been working on web development for awhile now, i’ve really only seen a handful of pretty forms. The interfaces seen at Uni-Form, mooflex and even to a certain extent linuxjournal are all intuitive and well thought out.

So in the good ol WITS culture, we’ve tried our hand at building our own version of a universal form interface. Alot of features were borrowed off work already done at Uni-Form. We just made it jQueried, lighter and more readable. Like all other jQuery plugins, insert jquery.js, insert the jquery.witsform.js script, insert the css, use the right html code, and you’re done! I’m pretty sure as time goes by i’ll keep improving it. So here’s version 1.0 meanwhile. We bothered so that you shouldnt have to.

download the jQuery WITSForm here: jQuery WITSForm
or view the demo here

Feb 8, 2009

HOWTO: IE6 testing environment on Vista

Author: gaweee | Filed under: development, howto

Lets cut through the chase, theres no way to install IE6 on vista but you can boot it off an image (which seems to be the most popular choice anyway), even if other sites teaches you registry hacks and etc, there are still differences between the real IE6 rendering versus the emulated/hacked version. But, what you can do is to install the Virtual PC with IE6 + XP SP3 Virtual Hard Disk.

Once you’ve downloaded both and installed the Virtual PC, run it. Then:
File > New Virtual Machine Wizard

  1. Create a virtual machine
  2. Choose some location of your preference
  3. Choose Windows XP for your operating system
  4. Use the recommended RAM (of if you can spare it, adjust it more or less to your preference)
  5. Use an existing Virtual Hard Disk
  6. Choose the downloaded IE6 + XPSP3 .vhd image
  7. Finish

When ready, click Start on the virtual image and viola!

Note:

  • The .vhd image always expires 3 months as of download, this is to prevent ppl from just living off an image (since i gather the image can be run off other operating systems too)
  • Go to Settings > Networking and choose the active network controller to give the IE6 image networking capabilities
  • If you’ve been developing your website on localhost, then you cannot access http://localhost/project on your IE6 anymore as thats is resolved internally. Instead use your main computer’s IP. In my case, http://192.168.1.1/project

Windows XP booting via Virtual PC  IE6 running on Virtual PC

Feb 7, 2009

HOWTO: PHP image resize, centered and cropped

Author: gaweee | Filed under: development, howto

Sorry for not posting in such a long time folks, i just came back from the Pegasus galaxy. While working on a Joomla! 1.5 project, we had to develop a function to crop and resize images for obvious content management and aesthetic reasons. So i gathered around some good sources on PHP.net and wrote the following class:

class ImageHelper {
 
	static function treatFilename($filename) {
		$newfilename = strtolower($filename);
		$newfilename = str_replace(" ","_",$newfilename);
		return $newfilename;
	}
 
	static function isPotrait($srcimage) {
		if (!file_exists(realpath($srcimage)))
			return;
 
		return !ImageHelper::isLandscape($srcimage);
	}
 
	static function isLandscape($srcimage) {
		if (!file_exists(realpath($srcimage)))
			return;
 
		$size	= getimagesize( $srcimage );
		return ($size[0] > $size[1]);
	}
 
	static function resizeImage($srcimage, $destimage, $width, $height) {
		if (!file_exists(realpath($srcimage)))
			return;
 
		$srcpathinfo 	= pathinfo($srcimage);
		$srcext 		= strtolower($srcpathinfo['extension']);
		$destpathinfo 	= pathinfo($destimage);
		$destext 		= strtolower($destpathinfo['extension']);
		$size 			= getimagesize( $srcimage );				// Get the size of the original image into an array [0]=> width, [1]=> height
		$image			= null;
		$canvas 		= imagecreatetruecolor( $width, $height );	// Prepare canvas
 
		// Create a new image in the memory from the file 
		switch ($srcext) { 
			case 'wbmp':
			case 'bmp':
				$image = imagecreatefromwbmp($srcimage);
				break;
			case 'jpg':
			case 'jpeg':
				$image = imagecreatefromjpeg($srcimage);
				break;
			case 'png':
				$image = imagecreatefrompng($srcimage);
				break;
			case 'gif':
				$image = imagecreatefromgif($srcimage);
				break;
			case 'xpm':
				$image = imagecreatefromxpm($srcimage);
				break;
			default:
				return;
		}
 
		// Calculate dimensions
		$widthratio		= $size[0]/$width;
		$heightratio	= $size[1]/$height;
		$dimensions 	= array(
						'ratio' 			=> $widthratio,
						'source_cropwidth' 	=> 0,
						'source_cropheight' => 0,
						'source_offsetx' 	=> 0,
						'source_offsety' 	=> 0
						);
 
		if ($heightratio < $widthratio)
			$dimensions['ratio'] 			= $heightratio;
 
		// let say image is 1200*800, then:
		// widthratio = 1200/400 = 3
		// heightratio = 800/300 = 2.66
		// since there is less height than width, the max scale we can do is 2.66, then
		// the targetwidth to crop = 400 * 2.66
		// the targetheight to crop = 300 * 2.66
		// the offset width = (1200 - (2.66 * 400))/2 = 68
		// the offset height = (800 - (2.66 * 300))/2 = 1
 
		$dimensions['source_width'] 		= $size[0];
		$dimensions['source_height'] 		= $size[1];
		$dimensions['source_cropwidth'] 	= $width * $dimensions['ratio'];
		$dimensions['source_cropheight'] 	= $height * $dimensions['ratio'];
		$dimensions['source_offsetx'] 		= ($size[0] - $dimensions['source_cropwidth']) / 2;
		$dimensions['source_offsety'] 		= ($size[1] - $dimensions['source_cropheight']) / 2;
 
		imagecopyresampled($canvas, $image, 0, 0, $dimensions['source_offsetx'], $dimensions['source_offsety'], $width, $height, $dimensions['source_cropwidth'], $dimensions['source_cropheight']);
 
		switch ($destext) {
			case 'jpg':
			case 'jpeg':
				imagejpeg( $canvas, $destimage );
				break;
			case 'png':
				imagepng( $canvas, $destimage );
				break;
			case 'gif':
				imagegif( $canvas, $destimage );
				break;
			case 'wbmp':
			case 'bmp':
				imagewbmp( $canvas, $destimage );
				break;
		}
 
		imagedestroy( $canvas );
		imagedestroy( $image );
 
		return true;
	}
}
use treatFilename to remove those pesky spaces, then use isPotrait or isLandscape to determine the orientation of the picture, then perform your resize accordingly. If your uploaded file input was called ulimage, then the code to resize your image would be:

	$width 		= 150;
	$height 		= 150;
	if (is_uploaded_file(@$_FILES['ulimage']['tmp_name'])){
		$targetfilename	= ImageHelper::treatFilename(uniqid() . "_" . $_FILES['ulimage']['name']);
		move_uploaded_file($_FILES['ulimage']['tmp_name'], dirname(__FILE__) . "/tmp/" . $_FILES['ulimage']['name']);
		ImageHelper::resizeImage(dirname(__FILE__) . "/tmp/" . @$_FILES['ulimage']['name'], dirname(__FILE__) . "/tmp/" . $targetfilename, $width, $height);
	}

The reason you need to save the file first is for the imageResize function to infer the image type off its extension. I hadnt bothered to create an image type override. :D

Get the source here: ImageHelper.php
or view the demo here

Recent Comments