Lessons Learned from the AJAX Project

Database enabling and AJAXing WHIP Salon & Spa's website turned out to be a real learning experience. Putting contents in a database and retrieving them to form webpages is really easy. Applying AJAX technique was a different story. Mixing different JavaScript plug-ins creates additional issues.

The public site was relatively straight forward to convert (to retrieve contents from the database) once it was decided that AJAX adds no value to the user experience and or search engine optimization.

The administration site was very different. Beside AJAX, the following JavaScript plug-ins were used to enhance user experience:

• Lightbox2 by Lokesh Dhakar
       To view images

• TinyMCE from Moxiecode Systems AB
       To provide a rich text editor so the users do not have to learn HTML

• Sortable from jQuery UI Project
       To provide a drag-and-drop methodology to sort images

Issues Encountered with Plug-Ins

Lightbox2 uses the Prototype framework. It's use of "$" conflict with jQuery's use of "$". The easiest solution was to adjust jQuery (execute "jQuery.noConflict();" and use "jQuery" instead).

TinyMCE redefines TinyMCE enabled textareas to a different set of HTML elements (iframe, etc.). Therefore, to access the values of textareas in AJAX must be done via their APIs. This is because texts entered in a TinyMCE enabled textarea are not in textarea tag defined.


House Keeping Issues

Due to the fact that content and HTML elements are dynamically retrieved and build, JavaScript / jQuery event listeners must be registered after the new content has been loaded. This is because event listeners tied specifically to existing elements.

As well, these event listeners need to un-registered as the content is destroyed (unloaded). If this is not done, the browser will be listening to events that are no longer tied to valid / existing elements.


Loading...

Since loading content using AJAX means no new page reload, it is very important to let users know when retrieving content from the server (via a loading message or icon). This is because the browser's loading indicator is not triggered. More importantly, requests are not generally not fulfilled instantaneously due to factors like server load, network bandwidth, network latency due to distance, etc.


Demo Videos

AJAX like File Upload from Luke Lau on Vimeo.

Drag-and-Drop Sorting from Luke Lau on Vimeo.

Wrapping Up the VR Tour Project for Rouge Lounge, The Event Space

The test shots for Rouge Lounge, The Event Space were done during their renovation. There were areas with strong colour lights (leftover from previous business). Therefore, lighting was not ideal but shooting bracketed multiple exposure was the right call.
There were three areas. The main entrance area, the upper area (dance floor), and a separate room. Hence, there were 3 sets of photos. The VR tour will connect these 3 sets together so the users will be able to go from one area to another.

Here is the workflow:

1. Convert raw (NEF) files to TIFF format with Nikon NX2 (with rotation).
2. Bracketed multiple exposed shots were processed with Photomatix Pro.
3. HDR photos were stitched Kolor AutopanGiga Pro.
4. Convert stitched HDR panoramic photos to VR tour movie (Adobe Flash) using Autopano Tour.

Two different sets of HDR photos were produced. This was done to see which version would look sharper / higher definition. The black and white set is definitely sharper / higher definition compared to the colour version.

  

Black & White HDR

  

Colour HDR

Stitched Photos:

Entrance Area

Dance Floor

Separate Room

Here is the final virtual tour. When it is first loaded, it is in the second room, the dance floor. This area has enough photos to generate a nice cubic / spherical VR. The area where the main entrance is did not have enough photos to stitch a proper ceiling. Hence, the curved floor. One of the walls in the third area does not have enough features for the stitching / VR software to merge with one of its neighbour (the door way).

Lessons Learned:

• Add lens correction (using software like DxO Optics Pro) after the raw to TIFF conversion. This would reduce the number of stitching issues (i.e, alignment issues) caused by the curvature of the lens.
• Ensure camera data in the file's meta data are kept every step of the way, up to stitching. This is because good stitching software can use the information the to help in stitching the photos.
• If the VR tour is cubic or spherical, ensure there are enough photos to cover the top.
• Correct exposure is very important in the stitching process. Most stitching software would have a hard time stitching under and over exposed photos. Hence, HDR processing is best done prior to stitching.
• Don't shot a blank wall because the stitching software would not have any features to create "control points" to match up with neighbouring photos. Stitching software relies on features or variations to align neighbouring photos. If necessary, put big plant there and "Photoshop" it out after it has been stitched.

Stitching HDR VR Shots of Rouge Lounge, The Event Space

The photographs to build the VR tour of Rouge Lounge, The Event Space are all HDR (High Dynamic Range) photographs. The VR build workflow needs to include HDR processing. The question is which comes first. HDR first or HDR last or use VR build software that can do HDR at the same time?

HDR first means each frame of the panoramic needs to go through the HDR processing. The upside of this is that the stitching software should have an easier time stitching up all the frames together automatically.

Stitching first means the HDR process only has to be done once (on the stitched panoramic photograph). The downside of this is that the stitching software might not be able to automatically stitch up all the frames together (especially those under exposed). But, if the stitching software has an option to save all the match points (or stitching control points), then it is conceivably possible to stitch the middle exposed set first, save the stitching control points, and apply those stitching control points to the other exposure sets.

Stitching software claims to be able do both HDR processing and stitching. This eliminates the extra step as it is done by the stitching software. Right? Well, not all HDR capable stitching software are the same. They all have the right concept. But they differ in the workflow.

Panoweaver Pro (7.00.5112) by Easypano's doesn't do both at the same time / seamlessly to the user. Their recommended workflow is to stitch first and than apply HDR processing (a separate program but part of the package) afterward. Unfortunately their HDR program does not do a very good job. The result looks very washed out and the HDR program only offers two adjustments (exposure and gamma).

Panoweaver project / import interface

Panoweaver panoramic interface

Panoweaver HDR interface

AutopanoGiga (2.0.9) by Kolor does both HDR and stitching at the same time. In fact, it recognizes images that are bracketed. AutopanGiga hides pretty much everything from the user. Meaning, it does both HDR and stitching seamlessly without user intervention. It's HDR processing is not bad (much better than Panoweaver). By the way, a separate program is used to generate the actual VR and it can only output as a Adobe Flash file (SWF).

AutopanoGiga import and stitch/HDR interface

AutopanoGiga edit interface

PTGui Pro (9.0) is also handle both HDR and stitching. Their workflow is stitch first than HDR processing. Unfortunately it was not able to automatically stitch all the images in this project but it does provide an interface to manually set the stitching control points for each pair of images (a very labour intensive process). On the plus side, PTGui's HDR processing is very extensive. It provides a lot of controls to the user.

PTGui control points editor

PTGui HDR adjustment panel

One nice thing about AutopanoGiga and PTGui is that it recognizes RAW image files. They are able to read the camera's data off the metadata. Hence, it is able to do a better job at stitching because it has better lens information.

None of the stitching software can do HDR like a pure HDR software (PTGui is close). For this project, Photomatix Pro (4.0.2) by HDRsoft was tested. Photomatix offers many presets and offers many controls. The interface can be very intimidating to anyone new to HDR because it is full of setting controls. Unfortunately, when it saves the processed files some of the camera data (metadata) were not written. Hence, the stitching software does not have the necessary information to properly stitch the images automatically (some manual intervention is required).

Here is verdict. If an separate HDR processing software, (i.e., Photomatix) is to be used, any of the stitching software tested here does a fairly good job. If exporting to Quicktime is important, than use Panoweaver or PTGui. If exporting to Flash is okay, AutopanoGiga is good.

For an all-in-one HDR / stitching software, AutopanoGiga is the better choice for its abilities and ease of use. PTGui is a good choice if more manual control is required.

Mothership Stories Society’s Video - "Stories of My Mother's Story"

Stories of My Mother's Story is a video of six contributors of Mothership Stories Society sharing their experiences in writing "My Mother's Story."

This video was edited with Apple Final Cut Express (4.0.1) from approximately 2 hours and 20 minutes of raw video footages. Some of raw video footages were edited (colour corrected) in Adobe Photoshop CS4.

The final video comes in at 2 minutes and 55 seconds.

Stories of My Mother's Story from Luke Lau on Vimeo.

Editing Video with Adobe Photoshop

Ever tried doing colour correction of videos in Apple's Final Cut Express? It not easy and it is a very slow process to get it perfect. As well, Final Cut Express does not offer as much controls as a photo editing software like Adobe Photoshop.

Yes, it is possible to edit (i.e., colour correction, etc.) videos with Adobe Photoshop. What it takes 10 minutes to do in Photoshop could take hours or even impossible.

How do you do this? Simply open the video file in Photoshop. Apply the necessary corrections (filters, adjustment layers, etc.) just as if the file is a photograph / raster image file. Note, filters are applied directly to the movie layer (just like a raster image layer).

This example has 3 adjustment layers

It is possible to adjust duration or from which frame to which frame an adjustment layer applies. Just opening the Animation Timeline window and adjust the timeline of that layer.

Adjustment layers are applied to the entire video in this example

Save the changes as Photoshop file (PSD). Render the video and that is it.

Menu path to render video (under the file menu)

Render video dialogue window

Movie settings

To make further changes in the future, simply open the previously saved Photoshop file. Caution: If the video file used in Photoshop has changed (specifically colour correction), distortions may appear. It's best to leave the original video alone.

Distorted view

What is the downside? Corrected video needs to be re-rendered. In order to bring the changes into (or back) into Final Cut Express (or other video editing software), it is necessary to re-render the video. Re-rendering the video from Photoshop of a 12 minutes clip took about 3 to 4 hours (in Apple Intermediate Codec).

Here is a comparison (audio has been turned off).

Original video

Video edited by Photoshop (added 3 adjustment layers: Levels, Vibrance, and Curves)

The "Photoshopped" video is less red, brighter, and maintains colour vibrancy.