<html>
<head>
    <meta charset="UTF-8">
    <title>Piano Roll {{event.label}}</title>
    <link href="{{ config['STATIC_URL'] }}/css/annotviz.min.css" rel="stylesheet">
</head>
<body>
    <h1>Piano Roll {{event.label}}</h1>
    <noscript>You must enable JavaScript</noscript>
    <div id="canvasContainer"></div>
    <p>
        <a href="#" onclick="stop(); return false;">stop intervals</a> -
        <a href="#" onclick="start(); return false;">start intervals</a> -
        temps écoulé : <span id="timeStarted"></span>
    </p>
    <pre id="log"></pre>
    <script src="{{ config['STATIC_URL'] }}/js/libs-annotviz.min.js"></script>
    <script src="{{ config['STATIC_URL'] }}/js/annotviz.min.js"></script>
    <script>
    var annotationChannel = 'PIANOROLL';
    var eventCode = '{{event.code}}';
    var wsUri;
    if (window.location.protocol === 'file:') {
        wsUri = 'ws://127.0.0.1:8090/broadcast';
    }
    else {
        wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
    }
    wsUri += '?channel='+annotationChannel+'&event_code='+eventCode;

    var logger = new annotviz.HtmlLogger(false, 'log');

    var stageView = new annotviz.StageView({
        logger: logger,
        sceneWidth: 1920,
        sceneHeight: 800,
    });
    
    var doubleroll = new annotviz.DoubleRoll({
    	logger: logger,
        stageView: stageView,
        ws: new annotviz.WsWrapper(wsUri),
    	orientation: 'horizontal',
    	showTimer: true,
    	sceneWidth: 1920,
    	sceneHeight: 800,
    	zeroShift: 1,
        pianorolls : [
		  {
		    height: 400,
		    timeWidth: 10,
		    lineInterval: 5000,
		    noteHeight: undefined,
		    range: {
				bottom: 40,
				top: 90,
		    },
		    dynamicRange: true,
		  },
		  {
		    height: 400,
		    timeWidth: 60,
		    lineInterval: 5000,
		    noteHeight: undefined,
		    range:{
				bottom: 30,
				top: 100,
		    },
		    dynamicRange: true,
		  },
		],
    });
    

    function stop() { stageView.stop(); }
    function start() { stageView.start(); }

    window.onload = function() {
        stageView.init();
        start();
    }
    </script>
</body>
</html>
