client/annotviz/app/annotstimeline.html
changeset 124 b5697bcdbaff
parent 104 685c5ebc59d0
child 133 12f782a13fa2
--- a/client/annotviz/app/annotstimeline.html	Thu Jan 22 16:16:54 2015 +0100
+++ b/client/annotviz/app/annotstimeline.html	Fri Jan 23 00:02:20 2015 +0100
@@ -14,7 +14,7 @@
 </head>
 
 <body>
-    <h1>Piano Roll vertical</h1>
+    <h1>annotation timeline</h1>
     <noscript>You must enable JavaScript</noscript>
     <div id="canvasContainer"></div>
     <p>
@@ -26,6 +26,7 @@
     <script src="/js/libs-annotviz.js"></script>
     <script src="/js/annotviz.js"></script>
     <script>
+
         var annotationChannel = 'ANNOT';
         var eventCode = 'test_1';
         var wsUri;
@@ -38,11 +39,32 @@
         wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;
 
         var logger = new annotviz.ConsoleLogger(true);
-        
+
         var stageView = new annotviz.StageView({
         	logger: logger
         });
 
+        annotCategories = [{
+            ts: 0,
+            colors: {
+                'ntm': '#CDC83F',
+                'iam': '#CDC83F',
+                'hip': '#CDC83F',
+                'hop': '#CDC83F',
+                'rock': '#DE8B53',
+                'rap': '#DE8B53',
+                'classic': '#DE8B53',
+                'drums': '#C5A3CA',
+                'guitar': '#C5A3CA',
+                'bass': '#79BB92',
+                'default': '#808080'
+            },
+            order: ['ntm', 'iam', 'hip', 'hop', 'rock', 'rap', 'classic', 'drums', 'guitar', 'bass', 'default']
+        }];
+
+        annotviz.getAnnotCategories("http://localhost:8080/p/api/v1/event/"+eventCode, annotCategories);
+        console.log("ANNOTS CAT",annotCategories);
+
         var annotstimeline = new annotviz.AnnotsTimeLine({
         	stageView : stageView,
             logger: logger,
@@ -51,31 +73,17 @@
             yInit: 0,
             width: 1024 - 435 - 300,
             height: 768,
-            timeBegin: Date.now(),
+            timeBegin: Date.now() - 300000,
             timeEnd: Date.now() + 300000,
             intervalWidth: 6,
             intervalHeight: 10,
             maxCellHeight: 100,
-            radius: 400,
+            radius: 300,
             circleX:500,
-            circleY:500,
-            annotCategories: [{
-           		ts: 0, 
-           		colors: {		
-       	       		'ntm': '#CDC83F',
-       	       	    'iam': '#CDC83F',
-       	       	    'hip': '#CDC83F',
-       	       	    'hop': '#CDC83F',
-       	       	    'rock': '#DE8B53',
-       	       	    'rap': '#DE8B53',
-       	       	    'classic': '#DE8B53',
-       	       	    'drums': '#C5A3CA',
-       	       	    'guitar': '#C5A3CA',
-       	       	    'bass': '#79BB92',
-       	       	   	'default': '#808080'
-				},
-            	order: ['ntm', 'iam', 'hip', 'hop', 'rock', 'rap', 'classic', 'drums', 'guitar', 'bass', 'default']
-           	}]
+            circleY:450,
+            eventCode: eventCode,
+            channel: annotationChannel,
+            annotCategories: annotCategories
         });
 
         function stop() {