--- a/annot-server/static/js/pianoroll.js	Mon Oct 20 15:00:19 2014 +0200
+++ b/annot-server/static/js/pianoroll.js	Mon Oct 20 18:02:31 2014 +0200
@@ -23,6 +23,9 @@
 var drawPianoNotes = false;
 var drawHorizontalLines = false;
 var drawVerticalLines = true;
+// Timecode method
+var timePageLoaded = Date.now();
+var offsetMusic = false;
 
 
 //create an new instance of a pixi stage
@@ -100,53 +103,53 @@
     renderer.render(stage);
 }
 function moveContainerMore() {
-    container1.x -= 10*(pixelsPerSecond1/manualFramerate);
-    container2.x -= 10*(pixelsPerSecond2/manualFramerate);
+    container1.x -= 50*(pixelsPerSecond1/manualFramerate);
+    container2.x -= 50*(pixelsPerSecond2/manualFramerate);
     renderer.render(stage);
 }
 function moveContainerRight() {
-    container1.x += 10*(pixelsPerSecond1/manualFramerate);
-    container2.x += 10*(pixelsPerSecond2/manualFramerate);
+    container1.x += 50*(pixelsPerSecond1/manualFramerate);
+    container2.x += 50*(pixelsPerSecond2/manualFramerate);
     renderer.render(stage);
 }
 
-function addBunny(data){
-    var timeFromZero = data.content[1];
+function addNoteInContainer(note, startTime, duration, velocity, pixelsPerSecond, container, prHeight){
+    //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight);
+    var beginX = (offsetMusic + startTime) * pixelsPerSecond / 1000;
+    var width = duration * pixelsPerSecond / 1000;
+    // We draw the rectangle
+    var graphics = new PIXI.Graphics();
+    graphics.beginFill(noteColor, (velocity / 128));
+    var y = (128-note) * prHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
+    graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight / 128)/2)), width, noteHeight);
+    graphics.endFill();
+    container.addChild(graphics);
+}
+
+function addNotes(data){
+    if(!offsetMusic){
+        // get difference between the current note timecode and my zero to set the difference between the canvas's zero and the music's zero
+        // in order to place in real time
+        var now = Date.now();
+        var timeBetweenNowAndStart = now - timePageLoaded;
+        offsetMusic = timeBetweenNowAndStart - data.content[1];
+        //console.log("start: ", timePageLoaded, ", now: ", now, ", timeBetweenNowAndStart = ", timeBetweenNowAndStart, ", offsetMusic = ", offsetMusic);
+    }
     var note = data.content[3];
     var velocity = data.content[4];
     if(velocity===0){
         if(note in noteDict){
             // We close the note in container one
-            /*var beginTime = new Date(noteDict[note].ts).getTime();
-            var beginDelta = beginTime - zeroTime;
-            var durationDelta = new Date(data.ts).getTime() - beginTime;
-            var beginX = beginDelta * pixelsPerSecond1 / 1000;
-            var width = durationDelta * pixelsPerSecond1 / 1000;*/
-            var beginX = noteDict[note].ts * pixelsPerSecond1 / 1000;
-            var width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond1 / 1000;
-            // We draw the rectangle
-            var graphics = new PIXI.Graphics();
-            graphics.beginFill(noteColor, (noteDict[note].velocity / 128));
-            var y = (128-note) * prHeight1 / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
-            graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight1 / 128)/2)), width, noteHeight);
-            graphics.endFill();
-            container1.addChild(graphics);
-            // container 2
-            beginX = noteDict[note].ts * pixelsPerSecond2 / 1000;
-            width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond2 / 1000;
-            // We draw the rectangle
-            graphics = new PIXI.Graphics();
-            graphics.beginFill(noteColor, (noteDict[note].velocity / 128));
-            y = (128-note) * prHeight2 / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
-            graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight2 / 128)/2)), width, noteHeight);
-            graphics.endFill();
-            container2.addChild(graphics);
+            //console.log("coucou 2", data);
+            var duration = data.content[1] - noteDict[note].ts;
+            addNoteInContainer(note, noteDict[note].ts, duration, noteDict[note].velocity, pixelsPerSecond1, container1, prHeight1);
+            addNoteInContainer(note, noteDict[note].ts, duration, noteDict[note].velocity, pixelsPerSecond2, container2, prHeight2);
             // delete entry
             delete noteDict[note];
         }
     }
     else{
-        noteDict[note] = {ts: timeFromZero, velocity:velocity};
+        noteDict[note] = {ts: data.content[1], velocity:velocity};
     }
 }
 
@@ -201,7 +204,7 @@
            if(logger){
                log("Got message: " + e.data);
            }
-          addBunny(JSON.parse(e.data));
+          addNotes(JSON.parse(e.data));
        }
     }
 };
@@ -242,7 +245,6 @@
     t.x = x + 2;
     t.y = 2;
     container2.addChild(t);
-    
 }
 addLine();
 var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate);

--- a/client/app/annotationclient.html	Mon Oct 20 15:00:19 2014 +0200
+++ b/client/app/annotationclient.html	Mon Oct 20 18:02:31 2014 +0200
@@ -52,7 +52,7 @@
                 <div class="table">
                   <div class="table-cell">
                     <p class="large-cat">{{ '{{' }} c.label {{ '}}' }}</p>
-                    <p class="normal-cat">{{ '{{' }} c.full_label {{ '}}' }}</p>
+                    <p class="normal-cat">{{ '{{' }} c.prelabel {{ '}}' }}</p>
                   </div>
                 </div>
             </div>
@@ -60,12 +60,12 @@
       </div>
       <div ng-show="selectedlevel">
           <div class="mons-button hand" ng-repeat="c in selectedlevel" style="background-color: {{ '{{' }} c.color {{ '}}' }}"
-                                        ng-click="sendAnnotation(c.label, c.code, c)" ng-class="{'success-border':c.sendSuccess, 'error-border':c.sendError}">
+                                        ng-click="sendAnnotation({% raw %} (c.prelabel !== '') ? (c.prelabel + ': ' + c.label) : c.label {% endraw %}, c.code, c)" ng-class="{'success-border':c.sendSuccess, 'error-border':c.sendError}">
             <div class="content">
                 <div class="table">
                   <div class="table-cell">
                     <p class="large-cat">{{ '{{' }} c.label {{ '}}' }}</p>
-                    <p class="normal-cat">{{ '{{' }} c.full_label {{ '}}' }}</p>
+                    <p class="normal-cat">{{ '{{' }} c.prelabel {{ '}}' }}</p>
                   </div>
                 </div>
             </div>

--- a/client/data/categories.json	Mon Oct 20 15:00:19 2014 +0200
+++ b/client/data/categories.json	Mon Oct 20 18:02:31 2014 +0200
@@ -1,85 +1,298 @@
 {
-  "categories": [
-    {
-      "label": "Instruments",
-      "full_label": "Liste des instruments disponibles",
-      "color": "rgb(205,200,63)",
-      "subcategories":[
+    "categories": [
         {
-          "label": "Batterie",
-          "full_label": "sous-catégorie 1-1",
-          "color": "rgb(205,200,63)",
-          "code": "ntm"
+            "label": "Mélodie",
+            "prelabel": "",
+            "color": "rgb(212,212,212)",
+            "subcategories": [
+                {
+                    "label": "Bon",
+                    "prelabel": "Mélodie",
+                    "color": "rgb(0,143,30)",
+                    "code": "melodie-bon"
+                },
+                {
+                    "label": "Mauvais",
+                    "prelabel": "Mélodie",
+                    "color": "rgb(220,0,0)",
+                    "code": "melodie-mauvais"
+                },
+                {
+                    "label": "Trop",
+                    "prelabel": "Mélodie",
+                    "color": "rgb(162,59,59)",
+                    "code": "melodie-trop"
+                },
+                {
+                    "label": "Trop peu",
+                    "prelabel": "Mélodie",
+                    "color": "rgb(255,234,0)",
+                    "code": "melodie-trop-peu"
+                },
+                {
+                    "label": "Dommage",
+                    "prelabel": "Mélodie",
+                    "color": "rgb(107,188,124)",
+                    "code": "melodie-dommage"
+                },
+                {
+                    "label": "C'est bienvenu",
+                    "prelabel": "Mélodie",
+                    "color": "rgb(255,186,0)",
+                    "code": "melodie-c-est-bienvenu"
+                },
+                {
+                    "label": "Intriguant",
+                    "prelabel": "Mélodie",
+                    "color": "rgb(52,105,169)",
+                    "code": "melodie-intriguant"
+                }
+            ]
         },
         {
-          "label": "Clavier",
-          "full_label": "sous-catégorie 1-2",
-          "color": "rgb(205,200,63)",
-          "code": "iam"
-        },
-        {
-          "label": "Guitare",
-          "full_label": "sous-catégorie 1-3",
-          "color": "rgb(205,200,63)",
-          "code": "hip"
+            "label": "Rythme",
+            "prelabel": "",
+            "color": "rgb(212,212,212)",
+            "subcategories": [
+                {
+                    "label": "Bon",
+                    "prelabel": "Rythme",
+                    "color": "rgb(0,143,30)",
+                    "code": "rythme-bon"
+                },
+                {
+                    "label": "Mauvais",
+                    "prelabel": "Rythme",
+                    "color": "rgb(220,0,0)",
+                    "code": "rythme-mauvais"
+                },
+                {
+                    "label": "Trop",
+                    "prelabel": "Rythme",
+                    "color": "rgb(162,59,59)",
+                    "code": "rythme-trop"
+                },
+                {
+                    "label": "Trop peu",
+                    "prelabel": "Rythme",
+                    "color": "rgb(255,234,0)",
+                    "code": "rythme-trop-peu"
+                },
+                {
+                    "label": "Dommage",
+                    "prelabel": "Rythme",
+                    "color": "rgb(107,188,124)",
+                    "code": "rythme-dommage"
+                },
+                {
+                    "label": "C'est bienvenu",
+                    "prelabel": "Rythme",
+                    "color": "rgb(255,186,0)",
+                    "code": "rythme-bienvenu"
+                },
+                {
+                    "label": "Intriguant",
+                    "prelabel": "Rythme",
+                    "color": "rgb(52,105,169)",
+                    "code": "rythme-intriguant"
+                }
+            ]
         },
         {
-          "label": "Trombone",
-          "full_label": "sous-catégorie 1-4",
-          "color": "rgb(205,200,63)",
-          "code": "hop"
-        }
-      ]
-    },
-    {
-      "label": "Rythmique",
-      "full_label": "catégorie 2",
-      "color": "rgb(222,139,83)",
-      "subcategories":[
-        {
-          "label": "Accélération",
-          "full_label": "sous-catégorie 2-1",
-          "color": "rgb(222,139,83)",
-          "code": "rock"
+            "label": "Narration",
+            "prelabel": "",
+            "color": "rgb(212,212,212)",
+            "subcategories": [
+                {
+                    "label": "Bon",
+                    "prelabel": "Narration",
+                    "color": "rgb(0,143,30)",
+                    "code": "narration-bon"
+                },
+                {
+                    "label": "Mauvais",
+                    "prelabel": "Narration",
+                    "color": "rgb(220,0,0)",
+                    "code": "narration-mauvais"
+                },
+                {
+                    "label": "Trop",
+                    "prelabel": "Narration",
+                    "color": "rgb(162,59,59)",
+                    "code": "narration-trop"
+                },
+                {
+                    "label": "Trop peu",
+                    "prelabel": "Narration",
+                    "color": "rgb(255,234,0)",
+                    "code": "narration-trop-peu"
+                },
+                {
+                    "label": "Dommage",
+                    "prelabel": "Narration",
+                    "color": "rgb(107,188,124)",
+                    "code": "narration-dommage"
+                },
+                {
+                    "label": "C'est bienvenu",
+                    "prelabel": "Narration",
+                    "color": "rgb(255,186,0)",
+                    "code": "narration-c-est-bienvenu"
+                },
+                {
+                    "label": "Intriguant",
+                    "prelabel": "Narration",
+                    "color": "rgb(52,105,169)",
+                    "code": "narration-intriguant"
+                }
+            ]
         },
         {
-          "label": "Décélération",
-          "full_label": "sous-catégorie 2-2",
-          "color": "rgb(222,139,83)",
-          "code": "rap"
+            "label": "Interaction entre musiciens",
+            "prelabel": "",
+            "color": "rgb(212,212,212)",
+            "subcategories": [
+                {
+                    "label": "Bon",
+                    "prelabel": "Interaction entre musiciens",
+                    "color": "rgb(0,143,30)",
+                    "code": "interaction-entre-musiciens-bon"
+                },
+                {
+                    "label": "Mauvais",
+                    "prelabel": "Interaction entre musiciens",
+                    "color": "rgb(220,0,0)",
+                    "code": "interaction-entre-musiciens-mauvais"
+                },
+                {
+                    "label": "Trop",
+                    "prelabel": "Interaction entre musiciens",
+                    "color": "rgb(162,59,59)",
+                    "code": "interaction-entre-musiciens-trop"
+                },
+                {
+                    "label": "Trop peu",
+                    "prelabel": "Interaction entre musiciens",
+                    "color": "rgb(255,234,0)",
+                    "code": "interaction-entre-musiciens-trop-peu"
+                },
+                {
+                    "label": "Dommage",
+                    "prelabel": "Interaction entre musiciens",
+                    "color": "rgb(107,188,124)",
+                    "code": "interaction-entre-musiciens-dommage"
+                },
+                {
+                    "label": "C'est bienvenu",
+                    "prelabel": "Interaction entre musiciens",
+                    "color": "rgb(255,186,0)",
+                    "code": "interaction-entre-musiciens-c-est-bienvenu"
+                },
+                {
+                    "label": "Intriguant",
+                    "prelabel": "Interaction entre musiciens",
+                    "color": "rgb(52,105,169)",
+                    "code": "interaction-entre-musiciens-intriguant"
+                }
+            ]
         },
         {
-          "label": "Pause",
-          "full_label": "sous-catégorie 2-3",
-          "color": "rgb(222,139,83)",
-          "code": "classic"
-        }
-      ]
-    },
-    {
-      "label": "Une 3ème cat",
-      "full_label": "catégorie 3",
-      "color": "rgb(197,163,202)",
-      "subcategories":[
-        {
-          "label": "sub cat 3-1",
-          "full_label": "sous-catégorie 3-1",
-          "color": "rgb(197,163,202)",
-          "code": "drums"
+            "label": "Gestuelle",
+            "prelabel": "",
+            "color": "rgb(212,212,212)",
+            "subcategories": [
+                {
+                    "label": "Bon",
+                    "prelabel": "Gestuelle",
+                    "color": "rgb(0,143,30)",
+                    "code": "gestuelle-bon"
+                },
+                {
+                    "label": "Mauvais",
+                    "prelabel": "Gestuelle",
+                    "color": "rgb(220,0,0)",
+                    "code": "gestuelle-mauvais"
+                },
+                {
+                    "label": "Trop",
+                    "prelabel": "Gestuelle",
+                    "color": "rgb(162,59,59)",
+                    "code": "gestuelle-trop"
+                },
+                {
+                    "label": "Trop peu",
+                    "prelabel": "Gestuelle",
+                    "color": "rgb(255,234,0)",
+                    "code": "gestuelle-trop-peu"
+                },
+                {
+                    "label": "Dommage",
+                    "prelabel": "Gestuelle",
+                    "color": "rgb(107,188,124)",
+                    "code": "gestuelle-dommage"
+                },
+                {
+                    "label": "C'est bienvenu",
+                    "prelabel": "Gestuelle",
+                    "color": "rgb(255,186,0)",
+                    "code": "gestuelle-c-est-bienvenu"
+                },
+                {
+                    "label": "Intriguant",
+                    "prelabel": "Gestuelle",
+                    "color": "rgb(52,105,169)",
+                    "code": "gestuelle-intriguant"
+                }
+            ]
         },
         {
-          "label": "sub cat 3-2",
-          "full_label": "sous-catégorie 3-2",
-          "color": "rgb(197,163,202)",
-          "code": "guitar"
+            "label": "Je voudrais répondre",
+            "prelabel": "",
+            "color": "rgb(212,212,212)",
+            "subcategories": [
+                {
+                    "label": "Bon",
+                    "prelabel": "Je voudrais répondre",
+                    "color": "rgb(0,143,30)",
+                    "code": "je-voudrais-repondre-bon"
+                },
+                {
+                    "label": "Mauvais",
+                    "prelabel": "Je voudrais répondre",
+                    "color": "rgb(220,0,0)",
+                    "code": "je-voudrais-repondre-mauvais"
+                },
+                {
+                    "label": "Trop",
+                    "prelabel": "Je voudrais répondre",
+                    "color": "rgb(162,59,59)",
+                    "code": "je-voudrais-repondre-trop"
+                },
+                {
+                    "label": "Trop peu",
+                    "prelabel": "Je voudrais répondre",
+                    "color": "rgb(255,234,0)",
+                    "code": "je-voudrais-repondre-trop-peu"
+                },
+                {
+                    "label": "Dommage",
+                    "prelabel": "Je voudrais répondre",
+                    "color": "rgb(107,188,124)",
+                    "code": "je-voudrais-repondre-dommage"
+                },
+                {
+                    "label": "C'est bienvenu",
+                    "prelabel": "Je voudrais répondre",
+                    "color": "rgb(255,186,0)",
+                    "code": "je-voudrais-repondre-c-est-bienvenu"
+                },
+                {
+                    "label": "Intriguant",
+                    "prelabel": "Je voudrais répondre",
+                    "color": "rgb(52,105,169)",
+                    "code": "je-voudrais-repondre-intriguant"
+                }
+            ]
         }
-      ]
-    },
-    {
-      "label": "Annot'direct",
-      "full_label": "catégorie 4",
-      "color": "rgb(121,187,146)",
-      "code": "bass"
-    }
-  ]
+    ]
 }
\ No newline at end of file

--- a/utils/pianoroll-client.py	Mon Oct 20 15:00:19 2014 +0200
+++ b/utils/pianoroll-client.py	Mon Oct 20 18:02:31 2014 +0200
@@ -39,7 +39,7 @@
             row_conv = [ osc.TimeTagArgument(float(row[0]))] + [osc.IntArgument(int(a)) for a in row[1:]]
             #time.sleep((row_conv[1].value-tc)/10**3)
             time.sleep(0.1)
-            tc = row_conv[1].value
+            #tc = row_conv[1].value
             self._send(osc.Message(self.address,*row_conv))
         print("Goodbye.")
         reactor.callLater(0.1, reactor.stop)
@@ -48,6 +48,6 @@
 
     with open(sys.argv[1], 'rU') as datafile:
         reader = csv.reader(datafile, delimiter=' ')
-        app = UDPSenderApplication(9090, "127.0.0.1", '/pianoroll/test/', list(reader))
+        app = UDPSenderApplication(9090, "127.0.0.1", '/pianoroll/test_1/', list(reader))
 
     reactor.run()