diff -r a7b72620d227 -r 3e075a48e19e client/annotviz/app/annotsvizview.html
--- a/client/annotviz/app/annotsvizview.html	Thu Jan 22 09:26:43 2015 +0100
+++ b/client/annotviz/app/annotsvizview.html	Thu Jan 22 09:29:49 2015 +0100
@@ -21,9 +21,58 @@
     <script src="/js/libs-annotviz.js"></script>
     <script src="/js/annotviz.js"></script>
     <script>
+
+        var PIXI = require('pixi');
+        var annotCategories = [];
+
+        function colorToHex(input) {
+            if (input.substring(0, 1) === '#') {
+                return input;
+            }
+            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 getAnnotCategories(ecode, serverUrl) {
+
+            var url = serverUrl+"/p/api/v1/event/" + ecode;
+
+            var jsonLoader = new PIXI.JsonLoader(url, true);
+            jsonLoader.on('loaded', function(res) {
+                var data = res.target.json;
+
+                while(annotCategories.length > 0) {
+                    annotCategories.pop();
+                }
+
+                data.sessions.forEach(function(session) {
+                    var annotCat = {
+                        ts: session.start_ts === null ? new Date(0) : Date.parse(session.start_ts),
+                        colors: {}
+                    }
+                    var categoriesJson = session.categories_json;
+                    annotCat.order = categoriesJson.order;
+                    categoriesJson.categories.forEach(function(cat) {
+                        annotCat.colors[cat.code] = colorToHex(cat.color);
+                    });
+                    annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
+                    annotCategories.push(annotCat);
+                });
+                console.log(annotCategories);
+            });
+
+            jsonLoader.load();
+        }
+
+
+
 	    var pianorollChannel  = 'PIANOROLL';
 	    var annotationChannel = 'ANNOT';
-	    var eventCode = 'test_1';
+	    var eventCode = 'test2';
+        getAnnotCategories(eventCode, "http://127.0.0.1:8080");
 	    var wsUri;
 	    if (window.location.protocol === 'file:') {
 	        wsUri = 'ws://172.16.0.20:8090/broadcast';
@@ -33,20 +82,21 @@
 	    }
 	    wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
 	    wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;
-	
+
 	    var logger = new annotviz.ConsoleLogger(true);
-	    
+
 	    var stageView = new annotviz.StageView({
 	    	logger: logger
 	    });
 
+
         var annotsvizview = new annotviz.AnnotsVizView({
         	logger: logger,
         	stageView: stageView,
         	wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
         	wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
         });
-      
+
 
         function stop() {
         	stageView.stop();