WordPress Video Galleries with NextGen and jQuery

For one of my recent WordPress projects I needed an easy way for the client to organize and display videos. Unfortunately my hope that NextGen Gallery plugin, which I already used for the images, will do the trick vanished after couple of clicks and I started googling for a solution. Since neither google nor Worpdress Plugins page gave me anything reasonable I started rethinking the situation:

  1. I was already using Shadowbox which allows displaying videos
  2. I already had jQuery enabled in my WordPress Theme
  3. I can use the alt field in the NextGen options for the url of the video

So what I needed was to modify the generated from NextGen anchor (the href attribute) and somehow to distinguish if the  thumbnail is for image or video.

Here is the script I wrote which does both things:

jQuery(document).ready(function($){
  $(".ngg-gallery-thumbnail a").each(function (arr){
    if ($(this).attr("title").substr(0,5)=="Video"){
      $(this).attr("rel","shadowbox;width=405;height=340");
      $(this).attr("href",$(this).children("img").attr("title"));
    }
  })
});

All you have to do to make it work is:

  1. Include this Javascript somewhere on your page
  2. Put the url for your video in the alt textfield
  3. Start your descriptions with “Video”

If you found this script useful consider donating. Hosting isn’t free you know. Thanks!

FLARToolkit, Papervision3D and the World of Augmented Reality

In the past couple of weeks I’ve been working on couple Augmented Reality (AR) projects for row27 Studios including the newly released “Oski on your Desk” mini site dedicated to the Californian Golden Bears’ mascot Oski.

It was quite interesting to see Papervision3D‘s superpowers combined with FLARToolkit with all the limitations and difficulties connected with it.

If you don’t have a webcam or printer you can check out the video bellow. It lacks sound and is looking a lot worse than the real experience because of the low quality webcam and the screencapturing process.

To view the Oski on your Desk video you need Flash Player 9 or later.

Stay tuned for more AR projects from me.

Papervision3D: Getting Started with Adobe Flex (Screencast)

After completing my personal website I started considering the idea of recording some video tutorials and as a result I have just done my first Papervision3D screencast. One thing I am very pleased with is the technical part of this task. Since I’m not a big fan of Camtasia and other propriatery software this time I used VirtualDub with x264 codec instead of Camstudio and flashsv. This way the quality of the video and the file size came out amazingly well (less than 1mb per minute of recording).

Moving to what the tutorial includes:

  1. Downloading and installing Tortoise SVN
  2. Downloading (check out) the Papervision3D SVN repository
  3. Setting up Flex Library Project (in Adobe Flex Builder) for the code downloaded at step 2.
  4. Setting up Flex Project (in Adobe Flex Builder) for our first Papervision3D attempt
  5. Writing and testing very simple AS3 Class CoolCube for getting started with PV3D
  6. Having fun!
To view the “Papervision3D: Getting Started with Adobe Flex” screencast you need Flash Player 9 or later.

PS. Sorry for the lag of outline around the captions but  I was informed that I have to buy a license for JW Player (which supports outlines). This forced me to use Flowplayer which has insane set of features but is nightmare to configure.

If you have any other player in mind (or hosting which will not recompress the video), please drop me a line.

MooTools vs JQuery vs Prototype vs YUI vs Dojo Comparison Revised

Update (02-03-2009):

Recently things are going a bit beyond the healthy conversations and various people are taking the whole which-is-the-fastest-framework” idea way too seriously. The most important thing in any benchmarking process is not to compare apples to oranges, which unfortunatelly happens too often. After jQuery adopted Sizzle (a selector engine) many people started comparing it directly to Mootools (a framework).  As a result Aaron (Clientcide) posted Sizzle and MooTools by the Numbers as an answer to the recent flame-wars on the Javascript Frameworks scene. Apart from only testing and comparing the selectors engines (which is what Slickspeed does) I suggest checking out another post on Clientcide – Comparing Frameworks with Inheritance Benchmarking.

/update end

As my previous post comparing Dojo vs JQuery vs MooTools vs Prototype got quite popular and was included in the Wikipedia’s Comparison of JavaScript frameworks article I decided it is about time to update it with some fresh data and browsers.

For the performance part I used the same tool as before – Slickspeed. If you have forgotten, it tests the selectors which are essential part of any Javascript framework. Currently Slickspeed includes the following frameworks: MooTools 1.2, JQuery 1.2.6 (1.3 see bellow), Prototype 1.6.0.2, YUI 2.5.2 Selector beta and Dojo 1.1.1. Unfortunately some of those are not the latest versions but still are quite recent and I am sure the guys will update it soon. The good news is, as you can see from the list, now it includes YUI which is really strong competitor.

Performance comparison done as following:

  1. All tests were done under OS with latests updates applied (Windows XP SP3, Ubuntu 8.10, Windows 7 Beta 1)
  2. Slickspeed was run three times per browser with emptied cache and restart between each iteration.
  3. The average from all tests results rounded to integers were taken in account for the chart.
  4. Nothing else was running during the tests.

Results per browser:
Javascript Frameworks Performance ComparsionResults per framework:
Javascript Frameworks Performance Comparsion

Since this time the comparison includes a lot more browsers and frameworks the raw data table is in separate html file.

Remarks:

  • FF refers to Mozila Firefox, IE is Internet Explorer and Win7 is Microsoft Windows Seven
  • 3 Dojo selectors failed under both Mozilla Firefox 3.1 Beta2 and Safari 3.2.1
  • 11 Dojo selectors and 4 YUI returned invalid results (failed) under Internet Explorer 8

Failed tests mean lower final time under the listed above browsers which was especially valid for Dojo under IE8 where the summary time was around the obviously impossible 1ms .

Update (jQuery 1.3): When I started writing this post the latest jQuery version was still 1.2.6 but on January 14-th they released 1.3 with lots of performance changes. The dev team have replaced the whole selector engine with Sizzle which gave a noticeable performance boost to the framework.  The official jQuery website is providing Slickspeed test results which indeed show big improvement among the other interesting changes in this release.

Summary:

I have done my best to be as objective as possible. As you can see I have tested twelve browsers and for each I ran Slickspeed three times. However those benchmarks are very hardware dependent so on different computers the results may vary. Still the chart (proportions) should look quite similar to the ones above. If you have very different times please contact me so I can double check again and update if needed.

Since performance should not be the only criterion for choosing a Javascript framework here are couple thoughts on the design differences between some of them.

Glenn Vanderburg does great comparison between Prototype and JQuery code design in his Why I still prefer Prototype to jQuery blog post.

And here’s the capsule summary: jQuery is a very nice piece of work, and makes some common tasks easier than their Prototype equivalents. Where it’s good, it’s very good indeed. But its design is uneven, and its scope is limited. For me, at least, Prototype is still the tool of choice. I think it’s a richer, more thorough, and overall better designed library.

A good resource on Dojo is Dylan Schiemann’s post Debunking Dojo Toolkit Myths were he addresses file size, performance, documentation, usage and bunch of other topics.

And ofcourse no comparsion is complete without my favourite JS framework Mootools. When it comes to What’s Moo I am a big fan of Aaron Newton and his blog Clientcide (was previously Clientside when he worked for CNet). On several occasion Aaron wrote about differences between jQuery and Mootools:

When I wrote that post, I went out of my way to make the point that jQuery is different than MooTools, but not, in my view, either inferior or superior. Just different.

I suggest to read those posts jQuery, MooTools, the Ajax Experience, Programming to the Pattern, and What Really Makes One Framework Different From Another and How Many Flavors of Linux Are There?. A good thing to do is subscribe to his RSS feed since apart from the strictly Mootools topics there are many general ones which will help anyone using whatever framework.

Another good piece of information that may affect your choice is that Microsoft and Nokia are adopting jQuery and will be integrated in Visual Studio. However if you are using Aptana there is already support for most of the frameworks including Mootools.

The point of this post is not to start another flame war on which JS framework is better. Each one does what it was supposed to do and has its supporters.

I am open to any reasonable suggestions about the above content.

How-to Increase Adept’s Font Size under KDE4 (Kubuntu)

One issue that was bugging me for a while was the different font size (after adjusting it) on couple applications (including Adept) under my fresh installation of Kubuntu Interpid. After investigating and Google-ing I found out that it was due to running those proccesses as “root” which had different fonts and GTK+  settings.

Solution:

$ kdesudo systemsettings

After running the command above setup the font size as you like it. Working as normal user is something new to me and I’m not sure I like. Needing to write my pass to many times and having to chown my old files is just not that pleasant.

VMware Player / Workstation Keyboard Mapping Problem

After switching from Debian Unstable to Kubuntu 8.10 I reinstalled my VMware Player 2.5.1 and started my Windows XP virtual machine. Soon I found that most of the keys near the numeric pad (del, home, right enter, etc) are either not working at all or doing wrong things. The obvious reason was some wrong keyboard mappings.

Solution:

$ echo 'xkeymap.nokeycodeMap = true' > ~/.vmware/config

or if the config already exists

$ echo 'xkeymap.nokeycodeMap = true' >> ~/.vmware/config

More info here

Re-Launching CreonFX.com

It’s been quite a while from my last post but I have not been losing my time in this period.

Retrospection:

After some unfortunate events the company I was working for just disappeared and many good people were left on the street. Beside the obvious issue with the lack of incomes finally I could start working with technologies that were not so quite popular among my previous employers.  As a result of this I started digging into Adobe Flex development, Papervision3d library, Box2D Actionscript Physics engine and other interesting stuff.

Recently  I  launched my personal website at http://www.creonfx.com and received quite good responses from the community. There are couple of things that need fixing and of course looking from my current point of view it could have been done a lot better, however I’m quite happy with the result. You also might notice that this blog has updated look and feel to match the whole theme.

Future:

For now I want to try freelancing for a while so I can receive some income and still be able to gain new knowledge that is not restricted from my employer.

Also expect many new post with information about the issues I had during building the website, I think it will be worth since Papervision3d still lacks of good tutorials and resources.

Happy holidays

Facebook Style Image Cropping (Javascript Preview)

While others are sun bathing somewhere on the shores of Black Sea I received another interesting task – to  implement cropping for user uploaded profile images. My first idea was to port MooCrop to Mootools 1.2 and apply couple of modifications, but the customer wanted the cropping to be exactly like in Facebook. For those who don’t know it is plain old boring mouse drag.

Instead of generating thumbnail and then cropping it (like in Facebook) I take the original (uploaded) image and resize it with CSS (yes I know it is not the right thing to do but for a quick preview IMO it is ok and we skip one resizing operation). Then I use the Drag Class to create a drag to scroll container (like in Adobe Acrobat) and finally with two hidden input fields I send the coordinates to the server side part which takes care of the resizing and cropping of the image.

Enough mumbojumbo – the cropping example and the pic

FaceBook cropping

Javascript Dynamic Paging (MooTools Pager)

Couple of days ago I had to create a content pager which can dynamically insert page numbers including previous and next buttons.

The reason why I had to use Javascript and not any server side solution is quite interesting – the paging method should not really divide the content into different web pages. This is needed because if the text we want to split contains any XHTML markup and we divide it into separate web pages the markup will be broken (invalid). Just imagine having opening <div> tag in the first page and closing in the second – not cool! Other break point is if we just split some tag in two.

Using my favourite Javascript Framework – Mootools and with couple of XHTML/CSS tricks I could get it working with the following code:

// This Javascript is written by Peter Velichkov (http://www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks
 
var pagerPageHeight = $('warper').getSize().y;
var contentArea = $('content');
var pagerCurPage = 1;
var pagerPagesCount = 1;
var pagerPages = $('pager');
 
var pagerInit = function(){
 
	var contentHeight = contentArea.getSize().y ;
	pagerPagesCount = (contentHeight / pagerPageHeight).toInt();
	if (contentHeight % pagerPageHeight != 0 ) pagerPagesCount++;
	if (pagerPagesCount === 1) return;
 
	var prev = new Element('a', {
			'class': 'cust-pager-prev',
			'html': '&amp;lt',
			'id': 'cust-pager-prev',
			'events': {
				'click': function(){
					pagerChangePage(pagerCurPage - 1);
				}
			}
		});
 
	var next = new Element('a', {
			'class': 'cust-pager-next',
			'html': '&amp;gt',
			'id': 'cust-pager-next',
			'events': {
				'click': function(){
					pagerChangePage(pagerCurPage + 1);
				}
			}
	});	
 
	prev.inject(pagerPages,'top');
	$('cust-pager-prev').setStyle('display','none');
 
	for (var i=1; i&lt;=pagerPagesCount; i++){
		var anchor = new Element('a', {
			'class': 'cust-pager-item',
			'id': 'cust-pager-item-'+ i,
			'html': i,
			'events': {
				'click': pagerChangePage.pass(i)
			}
		});
		anchor.inject(pagerPages);
	}
 
	next.inject(pagerPages,'bottom');
};
 
var pagerChangePage = function(page){
	$('cust-pager-item-' + pagerCurPage).set('class', 'cust-pager-item');
	$('cust-pager-item-' + page).set('class', 'cust-pager-item-sel');
 
	pagerCurPage = page;
 
	if (pagerCurPage === 1) {
		$('cust-pager-prev').setStyle('display', 'none');
	}else{
		$('cust-pager-prev').setStyle('display', 'inline');
	}
 
	if (pagerCurPage === pagerPagesCount) {
		$('cust-pager-next').setStyle('display', 'none');
	}else{
		$('cust-pager-next').setStyle('display', 'inline');
	}
 
	contentArea.setStyle('top', (-1) * pagerPageHeight * (page - 1));
};
 
pagerInit();

The example and the picture as usual.

Custom Pager

How-to Install VMware Player / Workstation on 2.6.26 Kernel

Following the series about VMware troublesome installation here is a short tip for having VMware Player or Workstation up and running on your linux box.

  1. Download latest patch from the Google VMKernelNewbies Group (currently 117d)
  2. Extract it to some tmp directory
  3. Execute runme.pl

It could not get any easier than this (well maybe VMware can update more often)