WebGL is basically a way to display hardware accelerated 3d content on a browser. It is not yet mainstream so it is perfect time play around and experiment with it. At the moment only FF4 and Chrome support it, WebKit nightly build should have support as well.

WebGL uses OpenGL ES 2.0 which is a cut down version of OpenGL. Deprecated parts of the API have been cut off but there are some goodies like shader programmin language GLSL. It is more complicated than plain HTML5 Canvas to get started with but there are good examples and tutorials.

My starting point was to implement my audio waveform visualizer in WebGL. It uses SoundManager 2 to read the waveform data and the data is then drawn on the screen as a line. The first version simply drew a the waveform on the screen without any special tricks.

For the second version I wanted to try out writing my own shader code. The waveform is not rendered directly on the screen but it is drawn in a separate frame buffer. This buffer is then used to generate a texture on a quad. At the rendering time of this quad my shader code kicks in and does blurring post processing on the fragment level.

I am just getting started with WebGL and I have plenty of ideas...

I decided that it is high time to get own domain for this project. Far from complete but people have shown some interest so I think the dedicated domain is a good idea. Twitter mentions and Facebook likes will be then directing to the right page.

The URL is www.momentumracer.com. Have a look at the new splash screen :-)

I just added some more functionalities for Momentum Racer. Now it handles different game states and can support numerous levels. The nice thing with programming with JavaScript is that the turnaround time is very short from an idea to the change in the game. Because I have other things to do as well I find it very appealing that I can achieve something in a half an hour.

My development setup is very simple. I use TextWrangler for the JavaScript code editing, Chrome for testing and local Git repository for the version control. Most likely I will replace TextWrangler at some point with some IDE, I got too used to Eclipse with my Java coding.

The todo list is pretty long but I think I should be able to finish most before end of 2010. Tweaking the gameplay and graphical FX can take forever. I'd rather get them just good enough and add some social media features like Facebook connectivity. That's what every online entertainment app seems to require, right?

I have been playing around with Canvas and JavaScript. The side product is my new hobby project - a game called Momentum Racer. Go ahead and have a spin!

You have a Apache running and you have a permanent redirect configured. For example;
Redirect permanent /subfolder/ /
This would redirect www.yoursite.com/subfolder to www.yoursite.com.

Then later on you to add proxy config:

ProxyPass / http://localhost:8080/site/
ProxyPassReverse / http://localhost:8080/site/
ProxyPassReverseCookiePath /site /


But after that your redirect fails. It turns out that ProxyPass config overrules Redirect. Add exclusion to the ProxyPass to fix this:


ProxyPass /subfolder !
ProxyPass / http://localhost:8080/site/
ProxyPassReverse / http://localhost:8080/site/
ProxyPassReverseCookiePath /site /


Note that the exclusion is before others.

I have been experimenting with both DSRL video and Objective C. The result is a simple tool to modify the frame rate metadata in Quicktime h.264 files. This kind of tool is handy when I need to import 60fps file to 30fps or 25fps iMovie project. This results nice slow motion effect otherwise hard to achieve in iMovie.

The project is based on Python script that did the same in command line. But I wanted to add a OS X native front end and I also wanted learn Objective C so I decided to rewrite the whole thing in Objective C. I managed to get most of it working in a weekend. I had one old Cocoa book (Hillegass - Cococa Programming for Mac OS X) and Apple's online guides. XCode and Objective C were pretty different compared to Eclipse and Java but I managed to get my head around some of the concepts.

Another new experiment for me was to use Git for the project. I used GPLv3 for the project because the original Python version used that. Being open source project it was possible to set the repository to GitHub for free. Having gone through some nasty merges in SVN I wanted to try out distributed approach. In a one man project there is not too much to merge but I was curious to try out Git tooling. I ended up using both command line tools and GitX.

ReelSnail project wiki
ReelSnail downloads

I got some nice features like time lapse shooting and it wasn't even difficult with CHDK. Full story at Apertoire blog.

Today I checked what is the Apple's new iPad all about. A very nice looking tablet as expected but I was more curious how the content available for iPad will look like. This device comes with browser so normal web content is available as usually. Books, tunes and videos are sold via Apple's own stores. But the announcement featured 'The New York Times' app and that shows where the progress is taking us.

Traditional web or mobile optimised version of the print publications wont cut anymore. Some publishers have announced their own iPhone application but many of them are simple page flipping applications. Not much difference to PDF reader. Seamlessly embedded videos and photo galleries are not that common as one would expect. Especially when new devices like iPad support much larger screen and computing power than previously so they should be able to handle them easily.

At the moment many of those magazine or newspaper reader applications are free with their content but paid content will definitely become more popular. Instead of subscribing or buying physical printed magazine you would receive an access to the extra content - all edited and formatted in a single package. Simple 'subscribers only' area with content snippets lying around might have been the way to do previously but now users are expecting much more elegant presentation. I see iPad and similar devices as premium content platforms and their users are already used to pay for applications, videos and music.

There are two sides of the iPad publishing - a CMS and a reader. Recent development on digital photography has enabled photo reporters to shoot both stills and video - actually they expected to do so now. Presenting this variety of media formats is not straightforward. Publishers had to find way to add all this content in to their sites and I can imagine how their CMSs are being pushed against the limits. Publishers need to have highly flexible content management system that handles vast amount of different media formats and is able to transform them to another (i.e. downscaling videos). The same content needs to be available for normal web, lightweight mobile devices, smart phones and now also for tablet. The extra effort and cost required for each platform version should be minimal.

The content reader can be either the standard web browser or a custom reader application. Publishing content for specific application allows much more freedom for layout and media formats. is an example of how a digital magazine would look like in the future. Developing such reader application is not trivial task but I assume iPad SDK has some new features supporting this. Unfortunately the documentation is available only for members of the iPhone Developer Program.

As Apple did not announce their own de facto reader for rich content there is now an open space for iPad developers to conquer. The solution offering the intuitive user interface on iPad, excellent performance and seamless integration with content management systems will be a winner.

It has been a while since my last Python session but couple days ago I had a perfect opportunity for some Python scripting. The initial situation was that we had tons of files in a single directory. File names were UUIDs so the idea was to create subdirectories and move each file in right directory. We planned to have three levels of directories based on the first characters of the filename. So something starting with 4c14 would go under 4/c/1/.

I implemented this in two parts. The first part created the required directory structure:

import os

workPath = "/tmp/test/"
for a in range (0, 16):
   os.mkdir(workPath+hex(a)[2:])
   for b in range (0, 16):
      os.mkdir(workPath+"/"+hex(a)[2:]+"/"+hex(b)[2:])
      for c in range (0, 16):
         os.mkdir(workPath+"/"+hex(a)[2:]+"/"+hex(b)[2:]+"/"+hex(c)[2:])


The next part was to move files to the corresponding directories. This was also quite straightforward but I had problem with os.rename and I had to replace it with shutil.move. The original script worked fine on my home computer but the development server had the source and destination directories in different filesystems. Here is the final version:

import os
import shutil

sourceDir = "/tmp/files/"
destDir = "/tmp/test/"

filenames = os.listdir(sourceDir)
for filename in filenames:
   sourceFile = sourceDir+filename
   print(sourceFile)
   destFile = destDir+filename[0]+"/"+filename[1]+"/"+filename[2]+"/"+filename
   print(destFile)
   shutil.move(sourceFile, destFile)

These did not take too long to make and most likely someone who remembers Python libraries better would have done it in a fraction of time.

In case you are interested, drop me an email. You should know the address :-)

At work a GWT project was modified to use JSON instead of GWT RPC. It worked fine on FF3 and Safari but failed horribly on IE6. The error message was not too helpful: (TypeError): 'null' is null or not an object number: -2146823281 description: 'null' is null or not an object

To investigate this I installed Fiddler to check responses sent by the server. It turned out that our JSON collections had an extra comma after the last item. This trailing comma caused IE to expect yet another item.

Such a small and easy to fix problem but rather tricky to find - but that is life of a programmer.

Previously I did some initial setup for JBoss Cache and now I have tested it a little bit on a cluster setup. The setup has two virtual linux images with JBoss 5. In front of them is Apache HTTP for proxying and load balancing.

I started up JBoss on both machines with -c all. This setup has clustering turned on as a default so instances found each other and established JGroup communication channels. Then I deployed the .ear file directly to the deploy directory on each server as the farm deployment did not look too promising. The Apache proxy and balancer were already correctly configured so cookies and sticky sessions worked fine.

The big question is naturally how the performance improved. First I ran a load test without second level caching or query caching in order to have a baseline for comparisons. Then I turned Hibernate second level cache on and executed the same load test. The results were showing around twofold throughput as the average response times halved. I also tried turning on query caching but I did not experience any significant difference with it. Maybe I did not have proper configurations.

I also learned that it is not a good idea to modify data on the DB used by the cluster with Hibernate second level caching on. The nodes communicate sending invalidate messages to each other when data is changed and needs to be refreshed. Modifications outside the cluster mean that the cached data is stale but nodes do not know about it and resulting various errors...

The project I have been working on lately is a web application running on JBoss 5. The production setup contains a cluster of JBoss instances behind Apache proxy which acts as a load balancer. So far load testing results have been encouraging and load tests also revealed couple bugs.

Our persistence layer is using Hibernate so the next step in caching was to enable Hibernate's second level cache. There are various options but in our clustered environment JBoss Cache was the choice. But getting started with it took some time.

The easiest way is to use 'all' server setup from the JBoss 5 and enable second level cache in Hibernate settings. The JBoss community wiki page provides an example for the setup. Also your JPA entity annotations or mappings need some changes as well because you need to define caching strategy for them.

Taking a look at the documentation of JBoss Cache reveals huge amount of configuration options. Luckily only some of them are relevant for Hiberante second level caching. Be aware that JBoss Cache has been around for some time so some of the older tutorials and blog posts are outdated. At the moment JBoss Cache version 3.x is the recommended one.

In case of caching it is very important to run proper load tests after each configuration modification to verify the performance gain or loss. At the moment I have my test setup running on Apache JMeter. It creates similar load to the server based on historical usage data. Another area of testing is to verify that cluster's caches are having their state updated properly.

I have been experimenting with JBoss Cache only for a day so it will take a bit more time before I can give my opinion or better advices. So, follow my RSS feed to learn more - hopefully soon there will be an update.

After months of GWT and GXT at work I wanted to see how the other side looks like. In my case that would be Flash based rich internet applications. Long time ago I did some experiments with Open Laszló but I did not really get into it.

Now I decided to check Flex so I downloaded free Flex SDK and started with some simple examples and tutorials. Building user interface seems to be quite easy but there are a lot of things I have tried out, yet. Learning server connections using Blaze DS is on my TODO as well as trying out Maven with Flex.

So far Flex seems to be quite easy to get started with as soon as you understand the difference between MXML and ActionScript. The syntax of ActionScript 3 is not too bad for Java programmer. I also bought Flex on Java book from Manning with 50% discount so maybe I end up getting serious with Flex.

Grid is a fast and versatile component of GXT. Testing it with Selenium is quite simple but requires couple points to be handled. After some thinking and experimenting I came up with following.

First of all, you will need Firebug or similar tool to inspect DOM created by GXT. A suitable example of Grid is http://extjs.com/examples/grid/grid.html. Simply open that URL and open your Firebug.

We are interested to check that Nokia's stock symbol matches NOK. By inspecting the symbol column cell for Nokia we see something like this:

<div class="x-grid3-cell-inner x-grid3-col-symbol">NOK</div>

We can use the 'x-grid3-col-symbol' as a CSS locator. The syntax in IDE is then 'css=div.x-grid3-col-symbol'. This selects the column but the we should also specify the row.

This can be done by creating a new class extending GridViewConfig and overriding getRowStyle method. This method should return suitable value (for example name from Model). You might want to add a postfix or prefix to the value to avoid conflicts. The value becomes part of the CSS style for the row. Set your own instance extending GridViewConfig to your Grid's using myOwnGrid.getView().setViewConfig() method.

Now you should be able to pin point a specific cell using Selenium locator with two CSS classes: 'css=div.x-grid3-col-symbol div.row_nokia'