Designing the GUI was particularly challenging because the timeline needs to handle multitouch gesture. I have chosen Awesomium to realize this timeline. The main reason was that I was very familiar with javascript prototyping and HTML5 canvas. I manage to create this timeline with Awesomium, but it turns out to be very hacky because javascript performance were very poor. See yourself on this demo page (working with Google Chrome, Opera 10.51 and maybe with Firefox 3.6).

The timeline was designed with a simple idea : all the gesture recognition are handle by a C++ Layer. Then the cursors events are translated into javascript function calls and the function are executed by the webpage. The main issue was that canvas drawing was slow and I was receiving cursors events every frame (meaning : the timeline needs a graphical update each frame). I finally found a solution to reduce timeline rendering to 25fps. The code can be found bellow :

var Interface = new function() {
   var _that  = this;
   var _rendering = false;
   var _skippedRenderingTime = new Date();
   this.TimeLine = new function() {
      this.render = function() {
         if (!_rendering) {
            _rendering = true;
            TimeLine.render();
            setTimeout(function() {
               _rendering = false;
               if ((new Date() - _skippedRenderingTime) < 45) {
                  _that.TimeLine.render();
               }
            }, 40); //25fps
         }
         else {
            _skippedRenderingTime = new Date();
         }
      };
   };
}
var TimeLine = new function() {
   this.render = function() {
      //do heavy canvas drawing
   };
};

The function “Interface.TimeLine.render();” is called each time the C++ needs a graphical update, but the javascript delay the rendering if it’s exceeds 25fps. It’s kinda hacky but the result is working properly.