annot-server/webapp/templates/annotviz.html
changeset 131 0bb70072a56f
parent 119 e6605fecb175
child 132 16c2ba3b02c3
equal deleted inserted replaced
130:0a2b4991d48c 131:0bb70072a56f
    16     <pre id="log"></pre>
    16     <pre id="log"></pre>
    17     <script src="{{ config['STATIC_URL'] }}/js/libs-annotviz.min.js"></script>
    17     <script src="{{ config['STATIC_URL'] }}/js/libs-annotviz.min.js"></script>
    18     <script src="{{ config['STATIC_URL'] }}/js/annotviz.min.js"></script>
    18     <script src="{{ config['STATIC_URL'] }}/js/annotviz.min.js"></script>
    19     <script>
    19     <script>
    20 
    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 getAnnotCategories(ecode, serverUrl) {
       
    42 
       
    43         var url = serverUrl+"/p/api/v1/event/" + ecode;
       
    44 
       
    45         var jsonLoader = new PIXI.JsonLoader(url, true);
       
    46         jsonLoader.on('loaded', function(res) {
       
    47             var data = res.target.json;
       
    48 
       
    49             while(annotCategories.length > 0) {
       
    50                 annotCategories.pop();
       
    51             }
       
    52 
       
    53             data.sessions.forEach(function(session) {
       
    54                 var annotCat = {
       
    55                     ts: session.start_ts === null ? new Date(0) : Date.parse(session.start_ts),
       
    56                     colors: {}
       
    57                 }
       
    58                 var categoriesJson = session.categories_json;
       
    59                 annotCat.order = categoriesJson.order;
       
    60                 categoriesJson.categories.forEach(function(cat) {
       
    61                     annotCat.colors[cat.code] = annotviz.colorToHex(cat.color);
       
    62                 });
       
    63                 annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
       
    64                 annotCategories.push(annotCat);
       
    65             });
       
    66             console.log(JSON.stringify(annotCategories, null, '  '));
       
    67         });
       
    68 
       
    69         jsonLoader.load();
       
    70     }
       
    71 
       
    72 
       
    73 
       
    74     var pianorollChannel  = 'PIANOROLL';
    21     var pianorollChannel  = 'PIANOROLL';
    75     var annotationChannel = 'ANNOT';
    22     var annotationChannel = 'ANNOT';
    76     var eventCode = '{{event.code}}';
    23     var eventCode = '{{event.code}}';
    77     getAnnotCategories(eventCode, 'http://' + window.location.hostname + ':8080');
       
    78     var wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
    24     var wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
    79 
    25 
    80     wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
    26     wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
    81     wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;
    27     wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;
    82 
    28 
    86         logger: logger
    32         logger: logger
    87     });
    33     });
    88 
    34 
    89 
    35 
    90     var annotsvizview = new annotviz.AnnotsVizView({
    36     var annotsvizview = new annotviz.AnnotsVizView({
       
    37         urlCategories: serverUrl + "/p/api/v1/event/" + eventCode,
    91         logger: logger,
    38         logger: logger,
    92         stageView: stageView,
    39         stageView: stageView,
    93         wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
    40         wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
    94         wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
    41         wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
    95         annotCategories: annotCategories,
    42         timeBegin: Date.parse("2015-01-23T09:30:00+01:00"),
    96         timeBegin: 1421919000000,
    43         timeEnd: Date.parse("2015-01-23T18:30:00+01:00"),
    97     	timeEnd: 1421951400000
    44         eventCode: eventCode,
       
    45         channel: annotationChannel        
    98     });
    46     });
    99 
    47 
   100 
    48 
   101     function stop() {
    49     function stop() {
   102         stageView.stop();
    50         stageView.stop();