painel

Sleeping

File size: 9,867 Bytes

bce4323

<!DOCTYPE html>
<html>
<head>

	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<meta charset="utf-8" />
	<title>ATUALLI MOSAICO WEB</title>
	<style>

		.center {
			margin-left: auto;
			margin-right: auto;
		}

		.holder_default {
			width: 560px;
			height: 350px;
			border: 4px dashed #ccc;
		
		}

		#holder.hover {
			width: 560px;
			height: 350px;
			border: 4px dashed #0c0 !important;
		}

		.hidden {
			display: none;
		}

		.visible {
			display: block;
		}

		* {
			box-sizing: border-box;
		}

		.menu {
			float: left;
			width: 20%;
		}

		.menuitem {
			padding: 8px;
			margin-top: 7px;
			border-bottom: 1px solid #f1f1f1;
		}

		.main {
			float: left;
			width: 60%;
			padding: 0 20px;
			overflow: hidden;
		}

		.right {
			//background-color: lightblue;
			float: left;
			width: 20%;
			padding: 10px 15px;
			margin-top: 7px;
		}

		@media only screen and (max-width:1000px) {
			/* For tablets: */
			.main {
				width: 80%;
				padding: 0;
			}

			.right {
				width: 100%;
			}
		}

		@media only screen and (max-width:800px) {
			/* For mobile phones: */
			.menu, .main, .right {
				width: 100%;
			}
		}

	</style>

</head>


<head>
	<title> HTML 5 </title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
</head>
<body>

	<!--table style="width:100%" class="center">
		<div style="text-align: center">
			<h1>Seleciona a imagem para Reconhecimento</h1>
		</div>
		<tr>
			<td style="width:100%" class="center">
				<form name="myForm" id="myForm" enctype="multipart/form-data" method="post" action="javascript:actionTensor()">
					<div class="row">
						<input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
						<output id="filesInfo"></output>
					</div>

					<div id="holder" style="" id="holder" class="holder_default">
						<img src="" id="image_droped" style="width:100%;display:none;" />
						<canvas id="canvas_droped" style="width:100%;display:block;"></canvas>
					</div>

					<div class="row">
						<input type="submit" value="Submit" />
					</div>
				</form>
				<textarea rows="20" cols="75" id="result"> RESULTADO </textarea>
			</td>

		</tr>
	</table-->

	<div style="background-color:#f1f1f1;padding:15px;">
		<h1>Selecione a imagem para Reconhecimento</h1>
	</div>

	<div style="overflow:auto">
		

		<div class="main">
			<form name="myForm" id="myForm" enctype="multipart/form-data" method="post" action="javascript:actionTensor()">
				<div class="row">
					<input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
					<output id="filesInfo"></output>
				</div>

				<div id="holder" style="" id="holder" class="holder_default">
					<img src="" id="image_droped" style="width:100%;display:none;" />
					<canvas id="canvas_droped" style="width:100%;display:block;"></canvas>
				</div>

				<div class="row">
					<label><input name="ftol" id="ftol" type="text" value="0.0" placeholder="Tolerancia">Tolerancia</label><br>
					<label><input name="area" id="area" type="text" value="0.0" placeholder="Area">Area</label><br>
					<div class="row">
                        <select id="idprovider" name="provider">
                            <option value="Tensor" selected>Tensor</option>
                            <option value="Google">Google</option>
                            <option value="HugFace">HugFace</option>
                            <option value="Tensor+Google">Tensor+Google</option>
                            <option value="Tensor+HugFace">Tensor+HugFace</option>
                            <option value="Tensor+Scylla">Tensor+Scylla</option>
                        </select>
					</div>

					<div class="row">
						<select id="idobjeto" name="objetos">
							<option value="Tudo" selected>Tudo</option>
							<option value="Pessoas">Pessoas</option>
							<option value="Veiculos">Veiculos</option>
							<option value="Pessoas+Veiculos">Pessoas+Veiculos</option>
							<option value="Placas">Placas</option>
						</select>
					</div>
					<input type="submit" value="Submit" />
				</div>
				
			</form>
		</div>

		<div class="right">
			<textarea rows="20" cols="50" id="result"> RESULTADO </textarea>
		</div>
	</div>


	<script>

	var espera = 0;

	function drawLine(ctx, x, y, stopX, stopY, color) {
		//ctx.clearRect(0, 0, can.width, can.height);
		ctx.strokeStyle = color;
		ctx.beginPath();
		ctx.moveTo(x, y);
		ctx.lineTo(stopX, stopY);
		ctx.closePath();
		ctx.stroke();

	}
	function drawBox(ctx, x, y, x2, y2, color) {
		//ctx.clearRect(0, 0, can.width, can.height);
		//ctx.strokeStyle = color;
		//ctx.beginPath();
		//ctx.rect(x, y, stop, stopY);
		//ctx.closePath();
	//	ctx.stroke();

		ctx.beginPath();
		ctx.lineWidth = "2";
		ctx.strokeStyle = color;
		ctx.rect(x, y, x2, y2);
		ctx.stroke();

	}

	//----------App.js---------------------//
	$(document).ready(function () {
		var holder = document.getElementById('holder');
		holder.ondragover = function () { this.className = 'hover'; return false; };
		holder.ondrop = function (e) {
			//this.className = 'hidden';
			e.preventDefault();
			var file = e.dataTransfer.files[0];
			var reader = new FileReader();
			reader.onload = function (event) {
			//	document.getElementById('text_droped').className = 'hidden';
				//document.getElementById('image_droped').className = 'visible';
				$('#image_droped').attr('src', event.target.result);
				var img = document.getElementById("image_droped");
				img.onload = function () {

					var c = document.getElementById("canvas_droped");
					var ctx = c.getContext("2d");
					c.setAttribute('width', 560);
					c.setAttribute('height', 350);
					ctx.drawImage(img, 0, 0, 560, 350);
					//	drawBox(ctx, 0, 0, 200, 200, 'green');
					document.myForm.submit();
				}
			}
			reader.readAsDataURL(file);
		};
	});


	function fileSelect(evt) {
		if (window.File && window.FileReader && window.FileList && window.Blob) {
			var files = evt.target.files;

			var result = '';
			var file;
			for (var i = 0; file = files[i]; i++) {
				// if the file is not an image, continue
				if (!file.type.match('image.*')) {
					continue;
				}

				reader = new FileReader();
				reader.onload = (function (tFile) {
					return function (evt) {
						//	document.getElementById('text_droped').className = 'hidden';
						var holder = document.getElementById('holder');
						holder.className = 'hover';
					//	document.getElementById('image_droped').className = 'visible';
						$('#image_droped').attr('src', event.target.result);
						var img = document.getElementById("image_droped");

						img.onload = function () {

							var c = document.getElementById("canvas_droped");
							var ctx = c.getContext("2d");
							c.setAttribute('width', 560);
							c.setAttribute('height', 350);
							ctx.drawImage(img, 0, 0, 560, 350);
							//	drawBox(ctx, 0, 0, 200, 200, 'green');
							document.myForm.submit();
						}

					};
				}(file));
				reader.readAsDataURL(file);
			}
		} else {
			alert('The File APIs are not fully supported in this browser.');
		}
	}

	function actionTensor()
	{
	
			document.getElementById('result').value = 'AGUARDE...';

			var xhttp = new XMLHttpRequest();

			xhttp.onload = function (e) {

				espera = 0;
				var img = document.getElementById("image_droped");

				var json = JSON.parse(this.responseText);
				var wi = 560;
				var hi = 350;

				var c = document.getElementById("canvas_droped");
				var ctx = c.getContext("2d");
				ctx.drawImage(img, 0, 0, 560, 350);
				var color = "#32CD32"
				for (var i = 0; i < json.tensorflow.length; i++) {
					var nome = json.tensorflow[i].nome;
					var score = json.tensorflow[i].score;
					var x = json.tensorflow[i].x * wi;
					var y = json.tensorflow[i].y * hi;
					var h = json.tensorflow[i].h * hi;
					var w = json.tensorflow[i].w * wi;
					var classe = json.tensorflow[i].classe;


					drawBox(ctx, x, y, w, h, color);
					ctx.fillStyle = color;
					ctx.font = "14px Arial";
					ctx.fillText(nome + " (" + classe + ") " + score + " ", x, y - 4);
				}

				document.getElementById('result').value = this.responseText;

			};
			xhttp.onerror = function (e) {
				espera = 0;
				document.getElementById('result').value = "ERRO: Tente Novamente..";
			};

		
			var ftol = document.getElementById('ftol').value;
			var farea = document.getElementById('area').value;
			var dvideo = "http://192.168.0.19:8121/upfoto";
		 //   //var dvideo = "http://192.168.0.19:8121/upfoto?ftol="+ftol+"&farea="+farea+"&";
		//	var dvideo = "http://painel.atualli.com:8087/upfoto?ftol=" + ftol + "&farea=" + farea + "&";

			var videoobj = document.getElementById("image_droped");
			var video = videoobj.getAttribute('src');

			var provider = document.getElementById("idprovider").value;
			var objeto = document.getElementById("idobjeto").value;

			var widthx = videoobj.width;
			var heightx = videoobj.height;
			var json = JSON.stringify({ "image": video, "ftol": ftol, "farea": farea, "provider": provider, "objetos": objeto, "width": "" + widthx + "", "height": "" + heightx + "" });
		
			xhttp.open("POST", dvideo, true);
		//	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xhttp.setRequestHeader("Accept", "application/json");
		//	xhttp.setRequestHeader("Content-Type", "application/json");
			

			xhttp.send(json);
		//	xhttp.send(video);
			espera = 1;
		
	}

	function fespera()
	{
		if (espera > 0) {

			document.getElementById('result').value = "AGUARDE.." + espera;
			espera++;
		}
		setTimeout(fespera, 1000);

	}

	document.getElementById('filesToUpload').addEventListener('change', fileSelect, false);
	fespera();
	</script>
</body>
</html>