<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
    });

    var doubleroll = new annotviz.DoubleRoll({
        logger: logger,
        stageView: stageView,
        ws: new annotviz.WsWrapper(wsUri)
    });

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

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