{% extends 'base.html' %}

{% block content %}

	<noscript class="d-block">
			<div class="alert alert-warning " role="alert">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bug-fill" viewBox="0 0 16 16">
					<path d="M4.978.855a.5.5 0 1 0-.956.29l.41 1.352A4.985 4.985 0 0 0 3 6h10a4.985 4.985 0 0 0-1.432-3.503l.41-1.352a.5.5 0 1 0-.956-.29l-.291.956A4.978 4.978 0 0 0 8 1a4.979 4.979 0 0 0-2.731.811l-.29-.956z"/>
					<path d="M13 6v1H8.5v8.975A5 5 0 0 0 13 11h.5a.5.5 0 0 1 .5.5v.5a.5.5 0 1 0 1 0v-.5a1.5 1.5 0 0 0-1.5-1.5H13V9h1.5a.5.5 0 0 0 0-1H13V7h.5A1.5 1.5 0 0 0 15 5.5V5a.5.5 0 0 0-1 0v.5a.5.5 0 0 1-.5.5H13zm-5.5 9.975V7H3V6h-.5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 0-1 0v.5A1.5 1.5 0 0 0 2.5 7H3v1H1.5a.5.5 0 0 0 0 1H3v1h-.5A1.5 1.5 0 0 0 1 11.5v.5a.5.5 0 1 0 1 0v-.5a.5.5 0 0 1 .5-.5H3a5 5 0 0 0 4.5 4.975z"/>
				</svg>

			This page will need Javascript and your authorization to use the webcam to work. It is not possible because Javascript seems to be deactived on this page.
		</div>
	</noscript>

	<div class="card">
	  <h3 class="card-header">Photomaton</h3>
	  <div class="card-body row">

	    <canvas id="canvas"></canvas>
	    <video id="video" class="">Video stream not available.</video>

			<div class="container-sm">
				<div class="row">
					<button class="col-sm col-lg-3 offset-lg-2 btn btn-primary justify-content-center" name="print_picture" id="print_button" data-bs-toggle="tooltip" data-bs-placement="top" title="Snap & print a picture" disabled="">
						<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" fill="currentColor" class="bi bi-camera" viewBox="0 0 16 16">
						  <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/>
						  <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
						</svg>
					</button>
					<button class="col-sm col-lg-3 offset-lg-2 btn btn-secondary justify-content-center" name="flip" id="flip" data-bs-toggle="tooltip" data-bs-placement="top" title="Change camera" disabled="">
						<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
							<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
							<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
						</svg>
					</button>
				</div>

				<hr>

				<div class="image_dither" id="image_dither">
					<picture>
				        <img id="photo" class="justify-content-center">
				  </picture>
	  		</div>

				<p>
					This is a as-close-as-possible representation of what is printed on the thermal printer.
				</p>
	  	</div>


		</div>

	</div>

<style media="screen">
  canvas {
    display: none;
  }

  /* video {
    display: none;
  } */

  .image_dither {
    /* width: 300px;
    height: 400px; */
    image-rendering: smooth;
    filter: saturate(0) contrast(250);
  }

  picture {
    image-rendering: smooth;
  }

  .image_dither > picture::after {
    content: '';
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: fixed;
    display: block;
    z-index: 2;
    top: 0px;
    left: 0px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAOklEQVR4nC3KQQFAQAAAwd0EIohANA0uiiiugQgiiLA+5j0AVBewVa/VUGd1qBNgrR5gqW6r8x+7Oj8/xCBur9LU/wAAAABJRU5ErkJggg==');
    background-repeat: repeat;
}


  #photo {
    background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
    padding: 0;
    max-width: 100%;
    vertical-align: middle;
    image-rendering: pixelated;
  }

</style>

<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/webcam.js') }}"></script>

<br>

{% endblock %}