|
1 <html> |
|
2 <head> |
|
3 <meta charset="UTF-8"> |
|
4 <title>Piano Roll {{event.label}}</title> |
|
5 <link href="{{ config['STATIC_URL'] }}/css/annotviz.min.css" rel="stylesheet"> |
|
6 </head> |
|
7 <body> |
|
8 <h1>Piano Roll {{event.label}}</h1> |
|
9 <noscript>You must enable JavaScript</noscript> |
|
10 <div id="canvasContainer"></div> |
|
11 <p> |
|
12 <a href="#" onclick="stop(); return false;">stop intervals</a> - |
|
13 <a href="#" onclick="start(); return false;">start intervals</a> - |
|
14 temps écoulé : <span id="timeStarted"></span> |
|
15 </p> |
|
16 <pre id="log"></pre> |
|
17 <script src="{{ config['STATIC_URL'] }}/js/libs-annotviz.min.js"></script> |
|
18 <script src="{{ config['STATIC_URL'] }}/js/annotviz.min.js"></script> |
|
19 <script> |
|
20 |
|
21 var PIXI = require('pixi'); |
|
22 var annotCategories = []; |
|
23 |
|
24 function colorToHex(input) { |
|
25 if (input.substring(0, 1) === '#') { |
|
26 return input; |
|
27 } |
|
28 else { |
|
29 var m = input.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i); |
|
30 var r = m[1], g=[2], b=[3]; |
|
31 return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); |
|
32 } |
|
33 } |
|
34 |
|
35 function getAnnotCategories(ecode, serverUrl) { |
|
36 |
|
37 var url = serverUrl+"/p/api/v1/event/" + ecode; |
|
38 |
|
39 var jsonLoader = new PIXI.JsonLoader(url, true); |
|
40 jsonLoader.on('loaded', function(res) { |
|
41 var data = res.target.json; |
|
42 |
|
43 while(annotCategories.length > 0) { |
|
44 annotCategories.pop(); |
|
45 } |
|
46 |
|
47 data.sessions.forEach(function(session) { |
|
48 var annotCat = { |
|
49 ts: session.start_ts === null ? new Date(0) : Date.parse(session.start_ts), |
|
50 colors: {} |
|
51 } |
|
52 var categoriesJson = session.categories_json; |
|
53 annotCat.order = categoriesJson.order; |
|
54 categoriesJson.categories.forEach(function(cat) { |
|
55 annotCat.colors[cat.code] = colorToHex(cat.color); |
|
56 }); |
|
57 annotCat.defaultColor = categoriesJson.defaultColor || "#536991"; |
|
58 annotCategories.push(annotCat); |
|
59 }); |
|
60 console.log(annotCategories); |
|
61 }); |
|
62 |
|
63 jsonLoader.load(); |
|
64 } |
|
65 |
|
66 |
|
67 |
|
68 var pianorollChannel = 'PIANOROLL'; |
|
69 var annotationChannel = 'ANNOT'; |
|
70 var eventCode = '{{event.code}}'; |
|
71 getAnnotCategories(eventCode, 'http://' + window.location.hostname + ':8080'); |
|
72 var wsUri = 'ws://' + window.location.hostname + ':8090/broadcast'; |
|
73 |
|
74 wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode; |
|
75 wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode; |
|
76 |
|
77 var logger = new annotviz.ConsoleLogger(true); |
|
78 |
|
79 var stageView = new annotviz.StageView({ |
|
80 logger: logger |
|
81 }); |
|
82 |
|
83 |
|
84 var annotsvizview = new annotviz.AnnotsVizView({ |
|
85 logger: logger, |
|
86 stageView: stageView, |
|
87 wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger), |
|
88 wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger), |
|
89 }); |
|
90 |
|
91 |
|
92 function stop() { |
|
93 stageView.stop(); |
|
94 } |
|
95 function start() { |
|
96 stageView.start(); |
|
97 } |
|
98 |
|
99 window.onload = function() { |
|
100 stageView.init(); |
|
101 start(); |
|
102 } |
|
103 </script> |
|
104 </body> |
|
105 </html> |