Spaces:
Sleeping
Sleeping
| | |
| <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 ; | |
| } | |
| .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> |