diff -r 8546e2181a73 -r e4f0c105090d annot-server/webapp/templates/annotviz.html
--- a/annot-server/webapp/templates/annotviz.html	Thu Jan 22 08:07:09 2015 +0100
+++ b/annot-server/webapp/templates/annotviz.html	Thu Jan 22 08:28:11 2015 +0100
@@ -19,17 +19,28 @@
     <script>
 
     var PIXI = require('pixi');
-    var annotCategories = [];
-
-    function colorToHex(input) {
-        if (input.substring(0, 1) === '#') {
-            return input;
+    var annotCategories = [
+        {
+            "ts": 1421928213000,
+            "colors": {
+                "transgressions": "#b90000",
+                "rythmique": "#af931e",
+                "narration": "#4bdd71",
+                "relation": "#1c28ba"
+            },
+            "order": [
+                "transgressions",
+                "rythmique",
+                "narration",
+                "relation"
+            ],
+            "defaultColor": "#536991"
         }
-        else {
-            var m = input.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
-            var r = m[1], g=[2], b=[3];
-            return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-        }
+    ];
+
+    function colorToHex(c) {
+        var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c);
+        return m ? '#' + (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : c;
     }
 
     function getAnnotCategories(ecode, serverUrl) {
@@ -57,7 +68,7 @@
                 annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
                 annotCategories.push(annotCat);
             });
-            console.log(annotCategories);
+            console.log(JSON.stringify(annotCategories, null, '  '));
         });
 
         jsonLoader.load();
@@ -86,6 +97,7 @@
         stageView: stageView,
         wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
         wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
+        annotCategories: annotCategories
     });