12 <!-- Custom styles for this template --> |
12 <!-- Custom styles for this template --> |
13 <link href="/css/annotviz.css" rel="stylesheet"> |
13 <link href="/css/annotviz.css" rel="stylesheet"> |
14 </head> |
14 </head> |
15 |
15 |
16 <body> |
16 <body> |
17 <h1>Piano Roll vertical</h1> |
17 <h1>annotation timeline</h1> |
18 <noscript>You must enable JavaScript</noscript> |
18 <noscript>You must enable JavaScript</noscript> |
19 <div id="canvasContainer"></div> |
19 <div id="canvasContainer"></div> |
20 <p> |
20 <p> |
21 <a href="#" onclick="stop(); return false;">stop intervals</a> - |
21 <a href="#" onclick="stop(); return false;">stop intervals</a> - |
22 <a href="#" onclick="start(); return false;">start intervals</a> - |
22 <a href="#" onclick="start(); return false;">start intervals</a> - |
24 </p> |
24 </p> |
25 <!--pre id="log"></pre--> |
25 <!--pre id="log"></pre--> |
26 <script src="/js/libs-annotviz.js"></script> |
26 <script src="/js/libs-annotviz.js"></script> |
27 <script src="/js/annotviz.js"></script> |
27 <script src="/js/annotviz.js"></script> |
28 <script> |
28 <script> |
|
29 |
29 var annotationChannel = 'ANNOT'; |
30 var annotationChannel = 'ANNOT'; |
30 var eventCode = 'test_1'; |
31 var eventCode = 'test_1'; |
31 var wsUri; |
32 var wsUri; |
32 if (window.location.protocol === 'file:') { |
33 if (window.location.protocol === 'file:') { |
33 wsUri = 'ws://127.0.0.1:8090/broadcast'; |
34 wsUri = 'ws://127.0.0.1:8090/broadcast'; |
36 wsUri = 'ws://' + window.location.hostname + ':8090/broadcast'; |
37 wsUri = 'ws://' + window.location.hostname + ':8090/broadcast'; |
37 } |
38 } |
38 wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode; |
39 wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode; |
39 |
40 |
40 var logger = new annotviz.ConsoleLogger(true); |
41 var logger = new annotviz.ConsoleLogger(true); |
41 |
42 |
42 var stageView = new annotviz.StageView({ |
43 var stageView = new annotviz.StageView({ |
43 logger: logger |
44 logger: logger |
44 }); |
45 }); |
|
46 |
|
47 annotCategories = [{ |
|
48 ts: 0, |
|
49 colors: { |
|
50 'ntm': '#CDC83F', |
|
51 'iam': '#CDC83F', |
|
52 'hip': '#CDC83F', |
|
53 'hop': '#CDC83F', |
|
54 'rock': '#DE8B53', |
|
55 'rap': '#DE8B53', |
|
56 'classic': '#DE8B53', |
|
57 'drums': '#C5A3CA', |
|
58 'guitar': '#C5A3CA', |
|
59 'bass': '#79BB92', |
|
60 'default': '#808080' |
|
61 }, |
|
62 order: ['ntm', 'iam', 'hip', 'hop', 'rock', 'rap', 'classic', 'drums', 'guitar', 'bass', 'default'] |
|
63 }]; |
|
64 |
|
65 annotviz.getAnnotCategories("http://localhost:8080/p/api/v1/event/"+eventCode, annotCategories); |
|
66 console.log("ANNOTS CAT",annotCategories); |
45 |
67 |
46 var annotstimeline = new annotviz.AnnotsTimeLine({ |
68 var annotstimeline = new annotviz.AnnotsTimeLine({ |
47 stageView : stageView, |
69 stageView : stageView, |
48 logger: logger, |
70 logger: logger, |
49 ws: new annotviz.WsWrapper(wsUriAnnotation, logger), |
71 ws: new annotviz.WsWrapper(wsUriAnnotation, logger), |
50 xInit: 0, |
72 xInit: 0, |
51 yInit: 0, |
73 yInit: 0, |
52 width: 1024 - 435 - 300, |
74 width: 1024 - 435 - 300, |
53 height: 768, |
75 height: 768, |
54 timeBegin: Date.now(), |
76 timeBegin: Date.now() - 300000, |
55 timeEnd: Date.now() + 300000, |
77 timeEnd: Date.now() + 300000, |
56 intervalWidth: 6, |
78 intervalWidth: 6, |
57 intervalHeight: 10, |
79 intervalHeight: 10, |
58 maxCellHeight: 100, |
80 maxCellHeight: 100, |
59 radius: 400, |
81 radius: 300, |
60 circleX:500, |
82 circleX:500, |
61 circleY:500, |
83 circleY:450, |
62 annotCategories: [{ |
84 eventCode: eventCode, |
63 ts: 0, |
85 channel: annotationChannel, |
64 colors: { |
86 annotCategories: annotCategories |
65 'ntm': '#CDC83F', |
|
66 'iam': '#CDC83F', |
|
67 'hip': '#CDC83F', |
|
68 'hop': '#CDC83F', |
|
69 'rock': '#DE8B53', |
|
70 'rap': '#DE8B53', |
|
71 'classic': '#DE8B53', |
|
72 'drums': '#C5A3CA', |
|
73 'guitar': '#C5A3CA', |
|
74 'bass': '#79BB92', |
|
75 'default': '#808080' |
|
76 }, |
|
77 order: ['ntm', 'iam', 'hip', 'hop', 'rock', 'rap', 'classic', 'drums', 'guitar', 'bass', 'default'] |
|
78 }] |
|
79 }); |
87 }); |
80 |
88 |
81 function stop() { |
89 function stop() { |
82 stageView.stop(); |
90 stageView.stop(); |
83 } |
91 } |