{% extends "bootstrap/base.html" %} {% block title %} {{ TITLE }} {% endblock %}
{% block styles %} {{ super() }}

<!-- Custom styles -->
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
{% endblock %} {% block content %}
<h1>{{ TITLE }}</h1>

<div id="container">
  <img id="videoElement" src="{{ url_for('video_feed') }}" />
  <form id="control">
    Camera preview:
    <a id="cam-preview"><button class="btn btn-default">On/Off</button></a>
    Flip horizontal:
    <a id="flip-horizontal"><button class="btn btn-default">On/Off</button></a>
    Run detection model:
    <a id="use-model"><button class="btn btn-default">On/Off</button></a>
    <br />
    <br />
    Exposure:
    <a id="exposure-down"><button class="btn btn-default">-1</button></a>
    <a id="exposure-up"><button class="btn btn-default">+1</button></a>
    Contrast:
    <a id="contrast-down"><button class="btn btn-default">-4</button></a>
    <a id="contrast-up"><button class="btn btn-default">+4</button></a>
    <br />
    <br />
    <a id="reset-cam"><button class="btn btn-default">Reset camera</button></a>
  </form>
</div>
{% endblock %} {% block scripts %}
<!-- Imports -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Scripts -->
<script
  type="text/javascript"
  src="{{ url_for('static', filename='script.js') }}"
></script>

{{ super() }} {% endblock %}