{% extends "base/liveview.html" %}
{% block js %}
{{ super() }}
<script type="text/javascript" src="/static/js/calibration.js?v={{ app.text_version }}"></script>
{% endblock %}
{% block css %}
{{ super() }}
{% endblock %}
{% block right %}
<div class="displayBox">
    <p>
        The counter needs to be calibrated to be able to analyze the incoming data.
        If there are any running applications on the camera, they are paused during the calibration.
    </p>
    <p>The calibration is done in two steps:</p>
    <ol>
        <li>The application gathers data. Make sure there are people passing underneath the camera.</li>
        <li>The application processes the data. This usually takes 5 to 15 minutes.</li>
    </ol>
    <p>To start the calibration, click <em>Start calibration</em>.</p>
    <p>To exit the calibration and go to the live view, click <em>Go to live view</em>.</p>
</div>
<form class="uniForm calibrationForm">
<div id="progressbar"><div id="progress-label" class="progress-label"></div></div>
<label>Status: <b id="status-text"></b></label>
<div class="buttonHolder compact">
    <button formmethod="get" formaction="/" id="proceed-button" disabled=disabled>Go to live view</button>
    <button id="stop-button" disabled=disabled>Stop calibration</button>
    <button id="start-button">Start calibration</button>
</div>
</form>
{% endblock %}