|
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 "ts": 1421928213000, |
|
25 "colors": { |
|
26 "transgressions": "#b90000", |
|
27 "rythmique": "#af931e", |
|
28 "narration": "#4bdd71", |
|
29 "relation": "#1c28ba" |
|
30 }, |
|
31 "order": [ |
|
32 "transgressions", |
|
33 "rythmique", |
|
34 "narration", |
|
35 "relation" |
|
36 ], |
|
37 "defaultColor": "#536991" |
|
38 } |
|
39 ]; |
|
40 |
|
41 function colorToHex(c) { |
|
42 var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c); |
|
43 return m ? '#' + (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : c; |
|
44 } |
|
45 |
|
46 function getAnnotCategories(ecode, serverUrl) { |
|
47 |
|
48 var url = serverUrl+"/p/api/v1/event/" + ecode; |
|
49 |
|
50 var jsonLoader = new PIXI.JsonLoader(url, true); |
|
51 jsonLoader.on('loaded', function(res) { |
|
52 var data = res.target.json; |
|
53 |
|
54 while(annotCategories.length > 0) { |
|
55 annotCategories.pop(); |
|
56 } |
|
57 |
|
58 data.sessions.forEach(function(session) { |
|
59 var annotCat = { |
|
60 ts: session.start_ts === null ? new Date(0) : Date.parse(session.start_ts), |
|
61 colors: {} |
|
62 } |
|
63 var categoriesJson = session.categories_json; |
|
64 annotCat.order = categoriesJson.order; |
|
65 categoriesJson.categories.forEach(function(cat) { |
|
66 annotCat.colors[cat.code] = colorToHex(cat.color); |
|
67 }); |
|
68 annotCat.defaultColor = categoriesJson.defaultColor || "#536991"; |
|
69 annotCategories.push(annotCat); |
|
70 }); |
|
71 console.log(JSON.stringify(annotCategories, null, ' ')); |
|
72 }); |
|
73 |
|
74 jsonLoader.load(); |
|
75 } |
|
76 |
|
77 |
|
78 |
|
79 var pianorollChannel = 'PIANOROLL'; |
|
80 var annotationChannel = 'ANNOT'; |
|
81 var eventCode = '{{event.code}}'; |
|
82 getAnnotCategories(eventCode, 'http://' + window.location.hostname + ':8080'); |
|
83 var wsUri = 'ws://' + window.location.hostname + ':8090/broadcast'; |
|
84 |
|
85 wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode; |
|
86 wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode; |
|
87 |
|
88 var logger = new annotviz.ConsoleLogger(true); |
|
89 |
|
90 var stageView = new annotviz.StageView({ |
|
91 logger: logger |
|
92 }); |
|
93 |
|
94 |
|
95 var annotsvizview = new annotviz.AnnotsVizView({ |
|
96 logger: logger, |
|
97 stageView: stageView, |
|
98 wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger), |
|
99 wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger), |
|
100 annotCategories: annotCategories |
|
101 }); |
|
102 |
|
103 |
|
104 function stop() { |
|
105 stageView.stop(); |
|
106 } |
|
107 function start() { |
|
108 stageView.start(); |
|
109 } |
|
110 |
|
111 window.onload = function() { |
|
112 stageView.init(); |
|
113 start(); |
|
114 } |
|
115 </script> |
|
116 </body> |
|
117 </html> |