19 <div id="canvasContainer"></div> |
19 <div id="canvasContainer"></div> |
20 <!--pre id="log"></pre--> |
20 <!--pre id="log"></pre--> |
21 <script src="/js/libs-annotviz.js"></script> |
21 <script src="/js/libs-annotviz.js"></script> |
22 <script src="/js/annotviz.js"></script> |
22 <script src="/js/annotviz.js"></script> |
23 <script> |
23 <script> |
|
24 |
|
25 var PIXI = require('pixi'); |
|
26 var annotCategories = []; |
|
27 |
|
28 function colorToHex(input) { |
|
29 if (input.substring(0, 1) === '#') { |
|
30 return input; |
|
31 } |
|
32 else { |
|
33 var m = input.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i); |
|
34 var r = m[1], g=[2], b=[3]; |
|
35 return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); |
|
36 } |
|
37 } |
|
38 |
|
39 function getAnnotCategories(ecode, serverUrl) { |
|
40 |
|
41 var url = serverUrl+"/p/api/v1/event/" + ecode; |
|
42 |
|
43 var jsonLoader = new PIXI.JsonLoader(url, true); |
|
44 jsonLoader.on('loaded', function(res) { |
|
45 var data = res.target.json; |
|
46 |
|
47 while(annotCategories.length > 0) { |
|
48 annotCategories.pop(); |
|
49 } |
|
50 |
|
51 data.sessions.forEach(function(session) { |
|
52 var annotCat = { |
|
53 ts: session.start_ts === null ? new Date(0) : Date.parse(session.start_ts), |
|
54 colors: {} |
|
55 } |
|
56 var categoriesJson = session.categories_json; |
|
57 annotCat.order = categoriesJson.order; |
|
58 categoriesJson.categories.forEach(function(cat) { |
|
59 annotCat.colors[cat.code] = colorToHex(cat.color); |
|
60 }); |
|
61 annotCat.defaultColor = categoriesJson.defaultColor || "#536991"; |
|
62 annotCategories.push(annotCat); |
|
63 }); |
|
64 console.log(annotCategories); |
|
65 }); |
|
66 |
|
67 jsonLoader.load(); |
|
68 } |
|
69 |
|
70 |
|
71 |
24 var pianorollChannel = 'PIANOROLL'; |
72 var pianorollChannel = 'PIANOROLL'; |
25 var annotationChannel = 'ANNOT'; |
73 var annotationChannel = 'ANNOT'; |
26 var eventCode = 'test_1'; |
74 var eventCode = 'test2'; |
|
75 getAnnotCategories(eventCode, "http://127.0.0.1:8080"); |
27 var wsUri; |
76 var wsUri; |
28 if (window.location.protocol === 'file:') { |
77 if (window.location.protocol === 'file:') { |
29 wsUri = 'ws://172.16.0.20:8090/broadcast'; |
78 wsUri = 'ws://172.16.0.20:8090/broadcast'; |
30 } |
79 } |
31 else { |
80 else { |
32 wsUri = 'ws://' + window.location.hostname + ':8090/broadcast'; |
81 wsUri = 'ws://' + window.location.hostname + ':8090/broadcast'; |
33 } |
82 } |
34 wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode; |
83 wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode; |
35 wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode; |
84 wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode; |
36 |
85 |
37 var logger = new annotviz.ConsoleLogger(true); |
86 var logger = new annotviz.ConsoleLogger(true); |
38 |
87 |
39 var stageView = new annotviz.StageView({ |
88 var stageView = new annotviz.StageView({ |
40 logger: logger |
89 logger: logger |
41 }); |
90 }); |
|
91 |
42 |
92 |
43 var annotsvizview = new annotviz.AnnotsVizView({ |
93 var annotsvizview = new annotviz.AnnotsVizView({ |
44 logger: logger, |
94 logger: logger, |
45 stageView: stageView, |
95 stageView: stageView, |
46 wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger), |
96 wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger), |
47 wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger), |
97 wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger), |
48 }); |
98 }); |
49 |
99 |
50 |
100 |
51 function stop() { |
101 function stop() { |
52 stageView.stop(); |
102 stageView.stop(); |
53 } |
103 } |
54 function start() { |
104 function start() { |