{% extends "hmi-adv-diag-screen.html" %}

{% block header-extras %}
{{ block.super }}
<script>
	$(function() {
		$("#barcode-capture").click(function() {
			$.ajax({
				url : "/hmi/barcodeimage/",
				type : "POST",
				data : {
					csrfmiddlewaretoken : '{{csrf_token}}'
				},
				success : function(data, status, jqXHR) {
					//$('#camera-image').attr("src", data);
                    $('#camera-image-div').html(data);
                    $('#barcode-value-disp').html("Barcode: " + $('#barcode-value').val());
				}
			});
		});

        $("#position-capture").click(function() {
			$.ajax({
				url : "/hmi/positionimage/",
				type : "POST",
				data : {
					csrfmiddlewaretoken : '{{csrf_token}}'
				},
				success : function(data, status, jqXHR) {
					$('#camera-image').attr("src", data);
				}
			});
		});
	}); 
</script>
{% endblock %}

{% block adv-diag-content %}
<form class="full-screen-form" name="cameraDiagForm" id="cameraDiagForm" method="post">
	{% csrf_token %}
	<div class="grey-background">
		<table style="width: 100%;">
			<tr>
				<td style="width: 800px; height: 125px;">
				<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Camera
					</legend>
					<table style="width: 100%; height: 100%;">
						<tr>
							<td align="left">
							<button id="eoat-lights" name="eoat-lights" class="diag-action-button">
								{% if eoatlights == "on" %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/light_switch_on.png">
								{% else %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/light_switch.png">{% endif %} Lights
							</button></td>
							<td align="center">
							<button id="barcode-capture" type="button" name="barcode-capture" class="diag-action-button">
								Barcode
							</button>
							<button id="position-capture" type="button" name="position-capture" class="diag-action-button">
								Position
							</button>
							<button id="snapshot-capture" name="snapshot-capture" class="diag-action-button">
								Snapshot
							</button></td>
							<td align="right">&nbsp;
							<!--button id="stream-camera" name="stream-camera" class="diag-action-button">
								Stream
							</button--></td>
						</tr>
						<tr>
							<td id="barcode-value-disp" name="barcode-value-disp" align="left" colspan="3">Barcode: </td>
						</tr>
					</table>
				</fieldset></td>
			</tr>
			<tr>
				<td style="width: 800px; height: 335px;">
				<table style="width: 100%; height: 100%;">
					<tr>
						<td align="center">
                        <div id="camera-image-div" name="camera-image-div">
						<img src="" id="camera-image" name="camera-image"/><input type="hidden" name="barcode-value" id="barcode-value" value=""/></div></td>
					</tr>
				</table></td>
			</tr>
		</table>
	</div>
	<input type="hidden" name="eoat-lights-icon" id="eoat-lights-icon" value="{{ eoatlights }}"/>
</form>
{% endblock %}