Linden LAN » Programming

How To Build An iPhoto Image Flipper Using The jQuery Cycle Plugin

Brian — Thu, 08 Apr 2010 06:13:57 +0000

My favorite jQuery plugin by far has to be the jQuery Cycle Plugin. It’s a generic slideshow plugin, but it’s versatile enough that I’ve used it to build a slider, a portfolio, and just recently, an iPhoto-like image flipper. This was inspired from the CJ Image FlipBox. Unfortunately, the way the plugin is designed, you can’t mesh it with Fancybox because the plugin creates an anchor and an image which intercept the mouseclicks preventing the Fancybox from activating. So to get around the problem, I used the Cycle plugin to create my own.

The HTML is rather straight forward. You’ve got a

as a container for a bunch of thumbnails, each linked to a matching fullsize image. The CSS on the gallery has fixed dimensions matching the dimensions of the thumbnails with overflow set to hidden.

$(".gallery").cycle({ 
    speed:      0,
    timeout:    0
});

$(".gallery").mousemove(function(e){
    var n = $(this).children().length;
    var w = $(this).width();
    var x = e.pageX - this.offsetLeft;
    var i = Math.floor(x/w * n);

    $(this).cycle(i);
}); 

$(".gallery a").fancybox();

As for the JavaScript, it’s refreshingly short, which just goes to show how much heavylifting jQuery and the two plugins do. Let’s start with the Cycle activation. The speed parameter is set to 0. This means that the transition is instantaneous when an image flips. Setting the timeout parameter to 0 prevents the Cycle plugin from auto-advancing. So far nothing new for anyone who’s used the Cycle plugin.

The next part actually sets up the effect. Just like when you mouseover an Event group in iPhoto, whenever the mouse moves within the gallery div, the position of the mouse determines the index of the image to display. First we count the number of images within the gallery. Next, we get the width of the gallery. Then we get the horizontal position of the mouse within the gallery’s coordinate system. Finally, we use those three values to calculate the index. Using this index, we tell the Cycle plugin which image to display.

Now that the iPhoto effect is working, all that’s left is to activate the Fancybox plugin and we’re done.

How To Simultaneously Add Multiple Products To A Magento Shopping Cart

Brian — Mon, 28 Sep 2009 02:01:38 +0000

This post is a bit overdue considering the project for which I did this was completed months ago. I finally got around to documenting it. Magento’s product list view lets customers add products to the shopping cart one at a time. The client wanted customers to be able to add multiple products to the shopping cart simultaneously. Given the time constraints for the projects, I created an ad hoc AJAX method to accomplish this feature request.

Adding a product to a Magento (ver. 1.3.1) shopping cart is accomplished through an HTTP GET request. It will look like or similar to this:

/path/to/app/checkout/cart/add?product=[id]&qty=[qty]

That URL is output by the template helper:

$this->getAddToCartUrl($_product)

Since adding a product to the shopping cart is nothing more than a GET request, then all that needs to be done is queue up the URLs of the desired products, make each request in order, and then reload the page when done.

First, in app/design/frontend/ / /template/catalog/product/list.html, I first added checkboxes to allow customers to select which products they want and also hidden fields for storing the URLs to add the product and text fields for the quantity.



isGrouped()): ?>

I added this code within the loop that generate the HTML for the product line items for the list. Next, I added the JavaScript that does the actual processing, also within the list section right after the script block that contains: decorateList('products-list', 'none-recursive').

At the bottom of the list I added a submit button.

Processing... getSkinUrl().'images/wait22trans.gif'; ?>" width="22" height="22" style="display:inline; vertical-align:middle;"/>

Clicking the button calls the function addItemsToCart(). The function hides the button to prevent a double click and unhides the status message. Next, the function determines which checkboxes are checked. For each checked checkbox, the function finds the corresponding URL field and quantity field, concatenates the two values, and stores the new URL in an array. If the length of the array is greater than 0, then the function calls processNext(), otherwise it displays an error message and resets the submit button.

The function processNext() first updates the processing message. The function takes the array of URLs and an index, and then creates an AJAX GET request using the URL at the given index in the array. If the AJAX request completes, it calls processNext() with the same array but with an incremented index while the index is less than the array length. If the incremented index is greater than the array length, then that ends the processing and the function reloads the page.

That’s it. If there is anything wrong with the code, it assumes that all the GET requests will complete. Unfortunately, given the time constraints there was no time to account for the scenario where a GET request fails.

iPhone Says Hello

Brian — Wed, 18 Mar 2009 16:42:29 +0000

I finally got around to downloading the iPhone SDK to see what I can do with it. Since I’ve dabbled in game development back when I worked with Flash and Director, I figured I’d see what I can do with the iPhone. I wanted to start with a framework and I looked at Torque and Unity. Though inexpensive by game engine standards, during a recessionary time of cost cutting, it’s hard to validate a nearly $1000 purchase, especially if you don’t know yet if that investment would pay off. So I finally settled on the cocos2d-iphone framework which is based on the cocos2d framework for Python. There is little to no documentation, so be prepared to read source code. Monocle Studio’s whitepaper will definitely help you bootstrap your project. In the spirit of that paper, I thought I’d share my translation of the cocos2d “Hello, World” example adapted for the cocos2d-iphone framework.

First step is to setup your project according to Monocle Studio’s whitepaper through “Cleaning up the project” right before “Creating a main menu”. That’ll create the base project. You’ll probably want to change the name to something else (e.g. CocosHelloWorld) instead of SimpleGame. Make sure to change the name where appropriate, for example SimpleGameAppDelegate should be YourAppNameAppDelegate.

Create the HelloWorld class

Click the Classes group in Groups & Files pane.
Click the Action button
Select Add->New File…
Choose NSObject subclass
Name the class “HelloWorld”

Open HelloWorld.h and change the code to look like the following. This says that the HelloWorld class is derived from the Layer class (which is derived from the CocosNode class).

#import 
#import "cocos2d.h"

@interface HelloWorld : Layer {

}
@end

Open HelloWorld.m and change the code to the following. This says that the HelloWorld class uses its parent class for initialization. If the initialization is successful, then create a new label, place it in the center, and add it to the layer. Finally, it returns itself.

#import "HelloWorld.h"

@implementation HelloWorld

- (id) init {
    self = [super init];
    if (self != nil) {
		Label *label = [Label labelWithString:@"Hello, World!" 
									 fontName:@"Times New Roman" 
									 fontSize:32];
		label.position = cpv(240,160);
		[self add:label];
    }
    return self;	
}

@end

Setup the Director

Open up YourAppNameAppDelegate.h and change the include declarations to:

#import 
#import "cocos2d.h"
#import "HelloWorld.h"

Next open YourAppNameAppDelegate.m and change it to the following. The difference between this and the corresponding method in SimpleGame are the last two lines. The first creates a Scene node and adds a HelloWorld node to the scene. The next line starts the Director using the just created Scene as the initial scene. The previous set of lines prepare the iPhone display by initializing a window, enabling the UI for the window, setting the Director to display in landscape mode, then attach the Director to the window, and finally making the window the main window and turning it on.

#import "CocosHelloWorldAppDelegate.h"

@implementation CocosHelloWorldAppDelegate

- (void)applicationDidFinishLaunching:(UIApplication *)application {    
    UIWindow *window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    [window setUserInteractionEnabled:YES];
    [window setMultipleTouchEnabled:YES];
    [[Director sharedDirector] setLandscape: YES];
    [[Director sharedDirector] attachInWindow:window];
	
    [window makeKeyAndVisible];
	
    Scene *s = [[Scene node] add:[HelloWorld node]];
	
    [[Director sharedDirector] runWithScene:s];	
}

@end

If all is well, if you click Build & Go the iPhone simulator should display “Hello, World!”.

Respect My Space

Brian — Mon, 05 Jan 2009 02:11:45 +0000

Getting CSS rules to work across all browsers is a continuous fight. Thankfully, there are workarounds and DHTML methods to correct many of these problems, and if those fail, reluctantly there are hacks available. Unfortunately, it seems I’ve run into a difference of opinion between the browsers, most likely as a result of the W3 Consortium failing (yet again) to be explicit with their standards. The problem is the difference between the way Firefox and Opera interpret the “word-spacing” CSS property versus the way Safari and IE interpret the property. More specifically each browser treats the non-breaking space differently. FF/Opera both respect the non-breaking space and Safari/IE both ignore the space. For example, if the text is “first foo bar last”, FF/Opera would like:

first        foo bar       last

whereas in Safari/IE the text would appear like:

first        foo        bar        last

Personally, I agree with the FF/Opera developers and feel that the non-breaking space should be respected since I’m explicitly telling the browser that words to either side of the non-breaking space should be treated as a unit. So now I’m going to have to put each phrase in some sort of HTML block and depend on a combination of padding and margins to accomplish the same effect in order for it to be cross-browser compatible.

Restyle Google Calendar 4

Brian — Thu, 04 Dec 2008 07:00:55 +0000

As a few users of MyGoogleCal3 have already pointed out, the script no longer works properly. That’s the bad news. The good news is version 4 does work. In fact, with the latest changes Google made to their code, ALL the features that were broken in 3 appear to be working now—Agenda/Week view, the calendar navigation buttons, and IE is fixed. Please download and test out the latest version, and report any bugs in the comments and I’ll try to resolve them as time allows.

UPDATE (2009 July 5): MyGoogleCal is now RESTYLEgc.

UPDATE (2009 June 23): Google’s recent update broke the jQuery injection. In fact, the update is incompatible with injecting jQuery, Prototype, and MooTools. The only JavaScript framework that works is Dojo. I updated the code to inject that framework instead. For those people who value stability over having the latest and greatest features, I also added a comment to MyGoogleCal4js.php that explains how to freeze the calendar version. That should hopefully help all you fellow developers who tire of your clients calling you when their calendar breaks.

UPDATE (2009 May 3): MyGoogleCal4 now supports jQuery manipulation of the DOM. This gives the ability to apply styles after page load. As an example, the default code removes the inline style on the body tag allowing the stylesheet to set the background color. The default code also removes the width property from the inline style of the bubble class so that its width can be set in the stylesheet as well. This should help overcome many of the problems that can’t be solved directly using a stylesheet. You can thank TechTriad.com for funding this new feature.

Download: mygooglecal4.zip. Contains MyGoogleCal4.php, MyGoogleCal4js.php, mygooglecal4.css, and images. The CSS file is not guaranteed to be up-to-date so you may have to follow the instructions described in the PHP file to download the latest version from Google. phpinfo.php is used for diagnostic purposes to make sure your PHP installation is working and that it has the required plugins. In the archive folder, you can find previous versions of Google’s Javascript and CSS files, in case you want to use those (see MyGoogleCal4js.php).

Page Source in Firefox),
 * 3) Copy the relative URL of the stylesheet (i.e., the href value of the 
 *     tag), 
 * 4) Load the stylesheet in the browser by pasting the stylesheet URL into 
 *    the address bar so that it reads similar to:
 *    "http://www.google.com/calendar/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled.css"
 * 5) Save the stylesheet (e.g., File->Save Page As in Firefox)
 * Edit this new file to change the style of the calendar.
 *
 * As an alternative method, take the URL you copied in Step 3, and paste it
 * in the URL field at http://mabblog.com/cssoptimizer/uncompress.html.
 * That site will automatically format the CSS so that it's easier to edit.
 */
$stylesheet = 'mygooglecal4.css';

/*******************************************************************************
 * DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
 ******************************************************************************/

// URL for the calendar
$url = "";
if(count($_GET) > 0) {
  $url = "http://www.google.com/calendar/embed?" . $_SERVER['QUERY_STRING'];
}

// Request the calendar
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

// Point stylesheet and javascript to custom versions
$pattern = '/()/';
$replacement = '';
$buffer = preg_replace($pattern, $replacement, $buffer);

$pattern = '/src="(.*js)"/';
$replacement = 'src="MyGoogleCal4js.php?$1"';  
$buffer = preg_replace($pattern, $replacement, $buffer);

// Add a hook to the window onload function
$pattern = '/}\);}<\/script>/';
$replacement = '}); myGoogleCal();}';
$buffer = preg_replace($pattern, $replacement, $buffer);

// Use DHTML to modify the DOM after the calendar loads
$pattern = '/(<\/head>)/';
$replacement = <<


MGC;
$buffer = preg_replace($pattern, $replacement, $buffer);

// display the calendar
print $buffer;
?>

?>

If you look at lines 39–41 in MyGoogleCal4js.php, you’ll see how simple the fix is. No more XmlHttpRequest bugs. Thank you, Google.

 0) {
  $url = "http://www.google.com/calendar/" . $_SERVER['QUERY_STRING'];
}

/* If you would like to freeze the calendar version, download the Javascript
 * file using the same method for downloading the CSS file, as described in
 * the main script.  You can find some previous versions in the archive folder.
 * NOTE: You should use the corresponding CSS file as well.
 *
 * Edit and uncomment the following line to freeze the calendar version.
 */
//$url = "http://myserver.tld/path/to/archive/6a3eb8ba4a07edb76f79a18d6bdb8933embedcompiled__en.js";

// Request the javascript
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

// Fix URLs in the javascript
$pattern = '/this\.[a-zA-Z]{2}\+"calendar/';
$replacement = '"http://www.google.com/calendar';
$buffer = preg_replace($pattern, $replacement, $buffer);

// Display the javascript
print $buffer;
?>

The installation of MyGoogleCal4 is the same as the installation for MyGoogleCal2 except you download the zip file above. You can ignore step 3 regarding the .htaccess file. As far as I can tell, it’s no longer needed.

Easy_Update Upgrade All

Brian — Fri, 08 Aug 2008 16:53:48 +0000

I like Ruby, but I don’t like its performance, so I’m really anticipating Ruby 2.0. Meanwhile, I’ve been dabbling in Python. Learning a new language and comparing and contrasting them, really helps with determining each language’s strengths and weaknesses. For example, you can easily update all your Ruby gems. Unfortunately, python doesn’t have a direct way of doing this using easy_install. Very odd. I tried using the shell script method, but for whatever reason it just didn’t work as advertised. So I wrote a bash alias to take care of it.

alias easy_install_upgrade_all='python -c "for dist in __import__('\''pkg_resources'\'').working_set: print dist.project_name" | while read package; do sudo easy_install -U "${package}" ; done'

Put that alias in your ~/.bash_aliases file, run exec bash, and you should be good to go (assuming your .bashrc file is setup to automatically load your .bash_aliases file). Note the use of escaped single-quotes around “pkg_resources”.

Restyle Google Calendar 3

Brian — Thu, 24 Apr 2008 05:46:09 +0000

MyGoogleCal2 no longer works 100% in Internet Explorer. A runtime error occurs when navigating month-to-month or when switching to Agenda mode. The workaround is to simply hide the navigation interface. Now, I don’t know if this bug was introduced when Google updated the code last month, or if it’s always been there and I just never noticed. In any case, the runtime error occurs when //"+a.host+"/calendar is replaced by //www.google.com/calendar. Given the poor debugging available in IE, I didn’t get very far with figuring out why IE breaks. I suspect that when IE makes an XmlHttpRequest, it’s double checking that the request URL matches up with the server host, or something to that effect. Since Google obfuscates the Javascript code, it’s just way too hard to try and fix it. Instead, I’ve opted to create a new version of MyGoogleCal that uses the original technique for IE but uses the technique from MyGoogleCal2 for all other browsers.

UPDATE: MyGoogleCal now has a fourth version.

Download: mygooglecal3.zip. Contains MyGoogleCal3.php, MyGoogleCal3js.php, mygooglecal3.css, mygooglecal3ie.css, and an .htaccess file. The CSS files are not guaranteed to be up-to-date so you may have to follow the instructions described in the PHP file to download the latest version from Google.

Page Source in Firefox),
 * 3) Copy the relative URL of the stylesheet (i.e., the href value of the 
 *     tag), 
 * 4) Load the stylesheet in the browser by pasting the stylesheet URL into 
 *    the address bar so that it reads similar to:
 *    "http://www.google.com/calendar/embed/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled.css"
 * 5) Save the stylesheet (e.g., File->Save Page As in Firefox)
 * Edit this new file to change the style of the calendar.
 *
 * As an alternative method, take the URL you copied in Step 3, and paste it
 * in the URL field at http://mabblog.com/cssoptimizer/uncompress.html.
 * That site will automatically format the CSS so that it's easier to edit.
 */
$stylesheet = 'mygooglecal3.css';

/* For the IE stylesheet replace "embed" with "htmlembed" in step (1) 
 */
$stylesheet_ie = 'mygooglecal3ie.css';

/*******************************************************************************
 * DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
 ******************************************************************************/

// URL for the calendar
$url = "";
$is_ie = FALSE;
if(count($_GET) > 0) {
  if(stristr($_SERVER['HTTP_USER_AGENT'], 'msie') === FALSE) {
    $url = "http://www.google.com/calendar/embed?" . $_SERVER['QUERY_STRING'];
  } else {
    $url = "http://www.google.com/calendar/htmlembed?" . $_SERVER['QUERY_STRING'];
    $is_ie = TRUE;
  }
}

// Request the calendar
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

if($is_ie) {
  // Fix hrefs, image sources, and stylesheet
  $pattern = '/(href="render)/';
  $replacement = 'href="http://www.google.com/calendar/render';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(href="event)/';
  $replacement = 'href="http://www.google.com/calendar/event';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(http:\/\/www.google.com\/calendar\/htmlembed)/';
  $replacement = 'MyGoogleCal3.php';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(src="images)/';
  $replacement = 'src="http://www.google.com/calendar/images';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/()/';
  $replacement = '';
  $buffer = preg_replace($pattern, $replacement, $buffer);
} else {
  // Point stylesheet and javascript to custom versions
  $pattern = '/()/';
  $replacement = '';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/src="(.*js)"/';
  $replacement = 'src="MyGoogleCal3js.php?$1"';
  $buffer = preg_replace($pattern, $replacement, $buffer);
}

// display the calendar
print $buffer;
?>

The installation of MyGoogleCal3 is more or less the same as the installation for MyGoogleCal2 except you download the zip file above. Also MyGoogleCal3 uses two stylesheets, one for IE and one for all the other browsers.

There is a minor bug. Despite changing the URL from ../images/ext/poweredby.png to images/poweredby.png in the IE CSS file, this does not make the Powered by Google logo appear in the lower right. I think that’s OK since it doesn’t appear on Google’s site either.

Update (21 Jun 2008): Google changed the JavaScript once again and this time very radically. I’ve been keeping snapshots of their JavaScript code, so I’ve changed the script to load an older customized .js file. This is a quick fix.

How To Install MyGoogleCal2.php

Brian — Sun, 23 Mar 2008 05:12:37 +0000

One of my readers asked for a step-by-step set of instructions to install MyGoogleCal2.php. My original posts for restyling Google Calendar did assume a certain level of expertise. This should hopefully help those who are still confused.

Download mygooglecal2.zip.
Unzip the file on your server, typically into a subfolder named ‘mygooglecal’.
If your web server supports .htaccess files and your site does not already have one, just move the .htaccess file that was in the zip file to the root of your site. If your web site already has an .htaccess file, then you will need to copy the mod_rewrite rules from the the zip file’s .htaccess file to the existing one.
If you have not already done so, go to the Embeddable Calendar Helper and generate the HTML code for the calendar. Place this code into the page that will display the calendar.
The HTML code for the Google Calendar is an tag. You need to edit the src attribute to point to MyGoogleCal2.php on your server and not http://www.google.com/calendar/embed. See ‘USAGE:’ in the MyGoogleCal2.php file for an example.
That’s the basic installation. You should be able to edit the included CSS file. If you want to use a different CSS file or move it somewhere else, make sure to update the $stylesheet variable in MyGoogleCal2.php. Remember, the CSS file is not guaranteed to be up-to-date so you may have to download your own copy. Just follow the directions listed in MyGoogleCal2.php.

Some additional notes:

Some of the colors that the Google Calendar uses are: #c3d9ff, #bcd, #cde, #e8eef7, #e5ecf9, and #112abb. That should help when editing the CSS file. I highly recommend using Firefox and the Firebug extension. The extension has an Inspect feature that let’s you select a DOM object and see its element ID, class, and style attributes. That will help identify which CSS rule you need change.
If the display of the calendar is blank, that usually means your PHP configuration is wrong and most likely the curl module is not installed or disabled. Open the phpinfo.php file included in the zip file. This will list a bunch of debug information about your web server’s PHP configuration. If you do not see curl listed or curl is listed but disabled, then you will need to talk to your system administrator to fix it.

RSpec, Autotest, and Ruby-Libnotify

Brian — Tue, 04 Mar 2008 04:35:37 +0000

After many false starts, I decided that I really needed to wrap my head around unit testing when writing Rails applications. I more or less completed a Rails 1.2.3 application without any formal tests, and I would like to upgrade it to 2.0.2 and make it RESTful in the process. At the same time, I’ve moved from a Windows development environment to a *nix one after installing Xubuntu on my laptop (an old Compaq Presario). I’ve also switched from Cream to Emacs. Despite my Windows desktop being more than twice as fast as my laptop, I just could not stand not being in a true *nix environment. Too much of the Windows idiosyncrasies got on my nerves. And my switch from Cream to Emacs was because I just didn’t like the instability of the hacks required to make Vim less of a modal editor. If I tire of Emacs, I may try pure Vim instead, but I remember installing Cream simply because I didn’t like pure Vim to start with. So with these various changes going on with my Rails programming environment, I figured it was an ideal time to learn to formally test my applications. Of course the first part is setting up the testing environment so that it is easy to use, stays out of your way, and is informative.

RSpec is the current black when it comes to testing. Seeing how it’s adopted by merb by default and I’m targetting merb for an old app I shelved because Rails just didn’t have the high performance yet to pull it off, I figured it would be the test method I should learn. It also helps that RSpec is just more readable than Test::Unit. Installation is more or less trivial and is covered succinctly in the RSpec documentation. Just remember to install RSpec as a plugin and not as a gem. Autotest will puke otherwise. You can also use the -x option if you want to install it as an svn external. (Another option would be piston another gem I need to look at.)

ruby script/plugin install http://rspec.rubyforge.org/svn/tags/CURRENT/rspec
ruby script/plugin install http://rspec.rubyforge.org/svn/tags/CURRENT/rspec_on_rails

Then you bootstrap the plugin which installs the generators and rake tasks.

ruby script/generate rspec
ruby script/generate rspec_model foo
rake db:migrate
rake spec

If all goes well, rspec should run and you should get a result similar to this:

.
Finished in 0.313 seconds
1 example, 0 failures

Now that RSpec is running properly, we want it to run automatically. That’s where ZenTest comes in. (The capitalization is intentional.)

sudo gem install ZenTest

ZenTest contains autotest. You start autotest from the root of your Rails application.

autotest

Autotest will then sit there continually checking your app folders for any file changes. When one is detected that requires RSpec to run, autotest will fire off the rake task to do so. Go ahead and edit ./app/models/foo.rb by adding a blank line and then save it. When you return to the terminal window you should see that the test ran and you got the same result as before.

There is a prettier and more informative alternative than the results provided in the terminal. RSpec can produce HTML output as well. Create a folder ./doc/spec/ for the output folder. Now open up ./spec/spec.opts in your editor and add the following lines.

--format 
html:doc/spec/report.html

This will cause an HTML report to be generated every time a test is run, in addition to the terminal output. The HTML report not only tells you what tests failed and passed but also where the failures occurred. The HTML format is much easier to navigate than the terminal output.

Mac OS X users have a notification program called Growl that autotest hooks into. On Windows there’s Snarl. For Linux, there’s libnotify. libnotify is not a standalone application like Growl or Snarl, but a library around which an application, or in this case, an applet must be written. There’s a handful of how-tos that walk you thru hooking autotest to libnotify, but the one I considered the best was this blog post, Gnome autotest Notifications. If you follow those instructions, you should get a working notifier, but I would recommend replacing his .autotest file with my .autotest file:

require 'rnotify'
require 'gtk2'
require 'launchy'

module Autotest::RNotify
  class Notification
    attr_accessor :verbose, :image_root, :tray_icon, :notification, 
                  :image_pass, :image_pending, :image_fail,
                  :image_file_pass, :image_file_pending, :image_file_fail,
                  :status_image_pass, :status_image_pending, :status_image_fail
    
    def initialize(timeout = 5000, 
                   image_root = "#{ENV['HOME']}/.autotest_images" , 
                   report_url = "doc/spec/report.html",
                   verbose = false)
      self.verbose = verbose
      self.image_root = image_root
      self.image_file_pass = "#{image_root}/pass.png"
      self.image_file_pending = "#{image_root}/pending.png"
      self.image_file_fail = "#{image_root}/fail.png"

      raise("#{image_file_pass} not found") unless File.exists?(image_file_pass)
      raise("#{image_file_pending} not found") unless File.exists?(image_file_pending)
      raise("#{image_file_fail} not found") unless File.exists?(image_file_fail)
      
      puts 'Autotest Hook: loading Notify' if verbose
      Notify.init('Autotest') || raise('Failed to initialize Notify')

      puts 'Autotest Hook: initializing tray icon' if verbose
      self.tray_icon = Gtk::StatusIcon.new
      tray_icon.pixbuf = Gdk::Pixbuf.new(image_file_pending,22,22)
      tray_icon.tooltip = 'RSpec Autotest'

      puts 'Autotest Hook: Creating Notifier' if verbose
      self.notification = Notify::Notification.new('X', nil, nil, tray_icon)

      notification.timeout = timeout

      puts 'Autotest Hook: Connecting mouse click event' if verbose
      tray_icon.signal_connect("activate") do
        Launchy::Browser.new.visit(report_url)
      end
      
      Thread.new { Gtk.main }
      sleep 1
      tray_icon.embedded? || raise('Failed to set up tray icon')
    end
    
    def notify(icon, tray, title, message)
      notification.update(title, message, nil)
      notification.pixbuf_icon = icon
      tray_icon.tooltip = "Last Result: #{message}"
      tray_icon.pixbuf = tray
      notification.show
    end
    
    def passed(title, message)
      self.image_pass ||= Gdk::Pixbuf.new(image_file_pass, 48, 48)
      self.status_image_pass ||= Gdk::Pixbuf.new(image_file_pass, 22, 22)
      notify(image_pass, status_image_pass, title, message)
    end
    
    def pending(title, message)
      self.image_pending ||= Gdk::Pixbuf.new(image_file_pending, 48, 48)
      self.status_image_pending ||= Gdk::Pixbuf.new(image_file_pending, 22, 22)
      notify(image_pending, status_image_pending, title, message)
    end
    
    def failed(title, message) 
      self.image_fail ||= Gdk::Pixbuf.new(image_file_fail, 48, 48)
      self.status_image_fail ||= Gdk::Pixbuf.new(image_file_fail, 22, 22)
      notify(image_fail, status_image_fail, title, message)
    end
    
    def quit
      puts 'Autotest Hook: Shutting Down...' if verbose
      #Notify.uninit
      Gtk.main_quit
    end
  end

  Autotest.add_hook :initialize do |at|
    @notify = Notification.new
  end

  Autotest.add_hook :ran_command do |at|
    results = at.results.last

    unless results.nil?
      output = results[/(\d+)\s+examples?,\s*(\d+)\s+failures?(,\s*(\d+)\s+pending)?/]
      if output
        failures = $~[2].to_i
        pending = $~[4].to_i
      end
      
      if failures > 0
        @notify.failed("Tests Failed", output)
      elsif pending > 0
        @notify.pending("Tests Pending", output)
      else
        unless at.tainted
          @notify.passed("All Tests Passed", output)
        else
          @notify.passed("Tests Passed", output)
        end
      end
    end
  end

  Autotest.add_hook :quit do |at|
    @notify.quit
  end
end

The improvements I made are to (a) forego using themeable icons and stick strictly with the Autotest Growl Fail/Pass Smilies (b) run a check to make sure the images exist otherwise raise an error, and © load the RSpec HTML report when you click the icon in the system tray. In order for the onclick event to work, you need to install the launchy gem.

sudo gem install launchy

After all that is up and running, you should have a fully functioning test environment that will automatically run (after starting autotest in a terminal) with a notification applet running in your system tray that you can click to load a well-formatted HTML report in your browser.

Restyle Google Calendar 2

Brian — Mon, 15 Oct 2007 04:38:54 +0000

The long awaited new version of MyGoogleCal is here. It supports the new AJAX-enabled Javascript method Google switched to last month. As a bonus, the new version has native support for multiple calendars each with their own colors! Other changes to the code include officially switching from fopen to curl to retrieve the data. Furthermore, the code replaces much less HTML since it’s encapsulated in Javascript. Without further ado…

UPDATE: MyGoogleCal now has a third version.

Download: mygooglecal2.zip. Contains MyGoogleCal2.php, mygooglecal2.css, MyGoogleCal2js.php, and an .htaccess file. The CSS file is not guaranteed to be up-to-date so you may have to follow the instructions described in the PHP file to download the latest version from Google.

Page Source in Firefox),
 * 3) Copy the relative URL of the stylesheet (i.e., the href value of the 
 *     tag), 
 * 4) Load the stylesheet in the browser by pasting the stylesheet URL into 
 *    the address bar so that it reads similar to:
 *    "http://www.google.com/calendar/embed/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled.css"
 * 5) Save the stylesheet (e.g., File->Save Page As in Firefox)
 * Edit this new file to change the style of the calendar.
 *
 * As an alternative method, take the URL you copied in Step 3, and paste it
 * in the URL field at http://mabblog.com/cssoptimizer/uncompress.html.
 * That site will automatically format the CSS so that's more easily editable.
 */
$stylesheet = 'mygooglecal2.css';

/*******************************************************************************
 * DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
 ******************************************************************************/

// URL for the calendar
$url = "";
if(count($_GET) > 0) {
  $url = "http://www.google.com/calendar/embed?" . $_SERVER['QUERY_STRING'];
}

// Request the calendar
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

// Point stylesheet and javascript to custom versions
$pattern = '/()/';
$replacement = '';
$buffer = preg_replace($pattern, $replacement, $buffer);

$pattern = '/src="(.*js)"/';
$replacement = 'src="MyGoogleCal2js.php?$1"';
$buffer = preg_replace($pattern, $replacement, $buffer);

// display the calendar
print $buffer;
?>

Use is similar to the original MyGoogleCal.php. To help create the , you can use the Embeddable Calendar Helper. Just remember to update the src attribute to point to MyGoogleCal2.php and not http://www.google.com/calendar/embed.

In addition to a custom CSS file the script makes use of a custom Javascript file. Each URL is set after the script’s header and includes instructions on how to download versions of these files from Google. This is important since it appears that the Javascript file is localized. (I included copies that I downloaded in the above Zip file.)

Update (22 Mar 08): I created a new PHP file, MyGoogleCal2js.php, which downloads the JavaScript code and edits the code on-the-fly. This negates the need to maintain a customized version of the JavaScript code on the same server as the MyGoogleCal.php script. This should also lessen the chance that MyGoogleCal2.php will break when Google updates the code as long as the changes are minor.

The UI images are no longer contained in the CSS file. You have two options on how to handle this. If your site runs off of Apache, you can create a rewrite rule to hotlink to the Google images. (I included an .htaccess file in the Zip file above that has a sample rule.) The other, more conventional option is to create an “images” subfolder where the script is located and place copies of these images there. You will definitely have to do this if you want to replace those images with customized versions. (I included images in the Zip file.)

What I’m hung-up on right now is figuring out a way to not have to save and rewrite the Javascript file. The Javascript file is responsible for drawing the calendar, retrieving the XML data from Google, and then putting that data into the calendar. The _init() function dynamically creates the URL from which to retrieve the XML data by using the browser’s window.location.host property. Since the browser will presumably be pointing to your site, the host property will not be www.google.com. As a result, the Javascript hangs at the XML loading stage fails to retrieve data when navigating into the future or past. My attempts at circumventing this problem has been met with little success.

I tried the passthru directive in .htaccess file like so:

RewriteRule ^(calendar/feeds/.*)$ http://www.google.com/$1 [P]

The browser spits out a 502 error.

A redirect, [R] instead of [P], only works half-way. The XmlHttpRequest goes thru but the data is rejected because it’s considered insecure since you can’t load data retrieved from an external domain.

I also tried ProxyPass/ProxyPassReverse to map

/calendar/


http://www.google.com/calendar

but it simply results in an error. I’ll have to consult with my host to figure if the error is the configuration on their end or mine.

Update (03 Jan 08): After talking with my hosting provider it turns out this error is the fault of my virtual server and it won’t be fixed since they’re retiring the hardware. I’ve been placed in the queue to migrate my account over to a new (hopefully problem-free) server. In any case, I’ll definitely revisit this solution after the migration is over and test it then.

For more info, checkout: Fixing AJAX: XMLHttpRequest Considered Harmful or Use a Web Proxy for Cross-Domain XMLHttpRequest Calls. The last one has pretty pictures.

Failed experiments include:

Use the Javascript prototype mechanism to somehow override the window.location.host property to return a string of my choosing.
Rewrite a request to www.google.com to point to MyGoogleCal2.php so that I could inject code into the calendar page. I thought this had a lot promise up until the point I realized I couldn’t put an .htaccess file at google.com. This was one of those “Duh!” moments.
Manipulate the DOM in order to change its document.styleSheets property directly. Due to security reasons, you can’t modify, let alone read, the DOM properties across different domains.
Proxy the XmlHttpRequest thru a curl script. This almost worked. The curl request succeeded in getting the JSON data, but for whatever reason, the Javascript code failed to do anything with it. Depending on the content-type requested for the response, either nothing happening or the browser would spit out a Javascript error. I’m sure it had to with an incomplete request header or returning just the response data instead of the entire response. But whatever reason it was, this solution seemed more trouble than it was worth.

Update (29 Oct 07): Google’s new version of the Javascript code does not require any customization. Do you suppose some Google developer read my post? However, a side-effect is that imported calendars do not work. I’m betting it has to do with XmlHttpRequest permissions, but I won’t know for certain without further investigation.

When you’re done restyling your calendar, show it off! Oh and don’t forget to Digg the article.