--- a/annot-server/static/js/pianoroll.js	Mon Oct 20 18:02:31 2014 +0200
+++ b/annot-server/static/js/pianoroll.js	Tue Oct 21 11:29:55 2014 +0200
@@ -97,17 +97,25 @@
 graphics.endFill();
 stage.addChild(graphics);
 
-function moveContainer() {
+
+function moveContainer(){
     container1.x -= pixelsPerSecond1/manualFramerate;
     container2.x -= pixelsPerSecond2/manualFramerate;
     renderer.render(stage);
 }
-function moveContainerMore() {
+function replaceContainers(){
+    var diff = (Date.now() - timePageLoaded)/1000;// nb of seconds since page loaded
+    //console.log("replace ! diff1 = ", container1.x - Math.floor(-diff*pixelsPerSecond1), ", diff 2 = ", container2.x - Math.floor(-diff*pixelsPerSecond2));
+    container1.x = Math.floor(-diff*pixelsPerSecond1);
+    container2.x = Math.floor(-diff*pixelsPerSecond2);
+    renderer.render(stage);
+}
+function moveContainerMore(){
     container1.x -= 50*(pixelsPerSecond1/manualFramerate);
     container2.x -= 50*(pixelsPerSecond2/manualFramerate);
     renderer.render(stage);
 }
-function moveContainerRight() {
+function moveContainerRight(){
     container1.x += 50*(pixelsPerSecond1/manualFramerate);
     container2.x += 50*(pixelsPerSecond2/manualFramerate);
     renderer.render(stage);
@@ -162,7 +170,7 @@
         ellog.scrollTop = ellog.scrollHeight;
     }
 }
-window.onload = function() {
+window.onload = function(){
 
     if(logger){
         ellog = document.getElementById('log');
@@ -187,7 +195,7 @@
     }
 
     if (sock) {
-       sock.onopen = function() {
+       sock.onopen = function(){
            if(logger){
                log("Connected to " + wsuri);
            }
@@ -247,7 +255,9 @@
     container2.addChild(t);
 }
 addLine();
-var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate);
+var moveInterval = window.setInterval(replaceContainers, 1000/manualFramerate);
+// To be sure of synchronism, we replace the container with time calculting every minute
+//var replaceInterval = window.setInterval(replaceContainers, 60*1000);
 var verticalLinesInterval = false;
 if(drawVerticalLines){
     verticalLinesInterval = window.setInterval(addLine, lineInterval);

--- a/annot-server/webapp/templates/pianoroll.html	Mon Oct 20 18:02:31 2014 +0200
+++ b/annot-server/webapp/templates/pianoroll.html	Tue Oct 21 11:29:55 2014 +0200
@@ -21,9 +21,7 @@
     <div id="canvasContainer"></div>
     <p>
         <a href="#" onclick="clearInterval(moveInterval); clearInterval(verticalLinesInterval); return false;">stop intervals</a>
-         - temps écoulé : <span id="myspan"></span> - 
-        <a href="#" onclick="moveContainerMore(); return false;">Move Left</a> - 
-        <a href="#" onclick="moveContainerRight(); return false;">Move Right</a>
+         - temps écoulé : <span id="myspan"></span>
      </p>
     <pre id="log"></pre>
     <script src="{{ config['STATIC_URL'] }}/js/pixi.js"></script>