client/annotviz/app/annotsvizview.html
changeset 112 3e075a48e19e
parent 108 082b64a5c699
child 113 7531e4180915
equal deleted inserted replaced
111:a7b72620d227 112:3e075a48e19e
    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() {