canvas.php — leitura técnica completa

sistema/painel/paginas/simulador/canvas.php
Tela isolada para ajuste fino manual da imagem simulada com canvas HTML.

SimuladorTela auxiliar do canvas654 linhas

Responsabilidade do arquivo

Tela isolada para ajuste fino manual da imagem simulada com canvas HTML.

Dependências observadas:
Conexão PDO / configurações globaisCanvas / edição visualBanco de dados

Tipo

Tela auxiliar do canvas

Grupo

Simulador

Total de linhas

654

Código completo

1<?php 2require_once("../../../conexao.php"); 3 4$tabela = 'simulacoes_protese'; 5$pasta_upload = __DIR__ . '/../../images/simulacoes/'; 6 7$id = @$_GET['id']; 8 9if($id == ""){ 10 echo 'ID não informado'; 11 exit(); 12} 13 14$query = $pdo->prepare("SELECT s.*, c.nome as nome_cliente, p.modelo 15 FROM $tabela s 16 INNER JOIN clientes c ON s.cliente = c.id 17 INNER JOIN proteses p ON s.id_protese = p.id 18 WHERE s.id = :id"); 19$query->bindValue(":id", $id); 20$query->execute(); 21$res = $query->fetchAll(PDO::FETCH_ASSOC); 22 23if(@count($res) == 0){ 24 echo 'Registro não encontrado'; 25 exit(); 26} 27 28$cliente = $res[0]['nome_cliente']; 29$modelo = $res[0]['modelo']; 30$foto_original = $res[0]['foto_original']; 31$imagem_simulada = $res[0]['imagem_simulada']; 32 33if($foto_original == ""){ 34 echo 'Nenhuma foto original enviada'; 35 exit(); 36} 37 38if(!is_dir($pasta_upload)){ 39 echo 'Pasta de imagens da simulação não encontrada'; 40 exit(); 41} 42 43if(!is_readable($pasta_upload)){ 44 echo 'Pasta de imagens da simulação sem permissão de leitura'; 45 exit(); 46} 47 48$foto_base = $pasta_upload . $foto_original; 49 50if(!file_exists($foto_base)){ 51 echo 'Arquivo da foto original não encontrado'; 52 exit(); 53} 54 55if(!is_file($foto_base)){ 56 echo 'Arquivo da foto original inválido'; 57 exit(); 58} 59 60if(!is_readable($foto_base)){ 61 echo 'Arquivo da foto original sem permissão de leitura'; 62 exit(); 63} 64 65$url_foto_original = '../../images/simulacoes/' . $foto_original . '?v=' . time(); 66$url_imagem_simulada = ''; 67 68if($imagem_simulada != ""){ 69 $url_imagem_simulada = '../../images/simulacoes/' . $imagem_simulada . '?v=' . time(); 70} 71?> 72<!DOCTYPE html> 73<html lang="pt-br"> 74<head> 75 <meta charset="utf-8"> 76 <meta name="viewport" content="width=device-width, initial-scale=1"> 77 <title>Canvas de Ajuste Fino</title> 78 <link rel="stylesheet" href="../../css/bootstrap.min.css"> 79 80 <style type="text/css"> 81 body{ 82 background:#f4f6f9; 83 font-family: Arial, sans-serif; 84 padding:15px; 85 color:#2d3436; 86 } 87 88 .topo-canvas{ 89 background:#ffffff; 90 border-radius:10px; 91 padding:16px 18px; 92 box-shadow:0 2px 10px rgba(0,0,0,0.06); 93 margin-bottom:15px; 94 } 95 96 .topo-canvas h4{ 97 margin:0 0 8px 0; 98 font-weight:700; 99 color:#1f4e79; 100 } 101 102 .topo-canvas .subinfo{ 103 font-size:14px; 104 line-height:24px; 105 color:#555; 106 } 107 108 .topo-canvas .explicacao{ 109 margin-top:12px; 110 background:#f8fbff; 111 border:1px solid #d9ecff; 112 border-radius:8px; 113 padding:12px 14px; 114 font-size:14px; 115 line-height:22px; 116 color:#35516b; 117 } 118 119 .card-box{ 120 background:#ffffff; 121 border-radius:10px; 122 padding:15px; 123 box-shadow:0 2px 10px rgba(0,0,0,0.06); 124 margin-bottom:15px; 125 } 126 127 .titulo-box{ 128 font-size:15px; 129 font-weight:700; 130 color:#334e68; 131 margin-bottom:10px; 132 } 133 134 .img-comparacao{ 135 width:100%; 136 height:260px; 137 object-fit:contain; 138 border:1px solid #ddd; 139 border-radius:8px; 140 background:#fafafa; 141 padding:4px; 142 } 143 144 .canvas-wrapper{ 145 width:100%; 146 overflow:auto; 147 background:#fafafa; 148 border:1px solid #ddd; 149 border-radius:8px; 150 padding:8px; 151 text-align:center; 152 } 153 154 canvas{ 155 display:block; 156 margin:0 auto; 157 background:#fff; 158 border:1px solid #ddd; 159 max-width:100%; 160 height:auto; 161 cursor:move; 162 touch-action:none; 163 } 164 165 .painel-ferramentas{ 166 position:sticky; 167 top:15px; 168 } 169 170 .preview-protese{ 171 max-width:100%; 172 max-height:120px; 173 border:1px solid #ddd; 174 padding:3px; 175 border-radius:4px; 176 display:none; 177 margin-top:8px; 178 background:#fff; 179 } 180 181 .info-canvas{ 182 background:#fff8e8; 183 border:1px solid #ffe3a6; 184 border-radius:8px; 185 padding:10px 12px; 186 font-size:13px; 187 line-height:21px; 188 color:#7a5a16; 189 margin-bottom:12px; 190 } 191 192 .rotulo-range{ 193 font-size:13px; 194 font-weight:700; 195 color:#5b6570; 196 margin-bottom:4px; 197 } 198 199 .valor-range{ 200 font-size:12px; 201 color:#7c8b98; 202 float:right; 203 } 204 205 .grupo-botoes .btn{ 206 margin-bottom:10px; 207 } 208 209 .badge-canvas{ 210 display:inline-block; 211 padding:4px 10px; 212 border-radius:20px; 213 font-size:12px; 214 font-weight:700; 215 background:#eef5ff; 216 color:#2f6fad; 217 margin-top:8px; 218 } 219 220 @media (max-width: 991px){ 221 .painel-ferramentas{ 222 position:relative; 223 top:auto; 224 } 225 } 226 227 @media (max-width: 768px){ 228 body{ 229 padding:10px; 230 } 231 232 .img-comparacao{ 233 height:220px; 234 } 235 } 236 </style> 237</head> 238<body> 239 240<div class="container-fluid"> 241 242 <div class="topo-canvas"> 243 <h4>Canvas de Ajuste Fino da Simulação</h4> 244 245 <div class="subinfo"> 246 <b>Cliente:</b> <?php echo $cliente ?> &nbsp;&nbsp; 247 <b>Prótese:</b> <?php echo $modelo ?> 248 </div> 249 250 <div class="explicacao"> 251 Este módulo permite o <b>refinamento manual da simulação</b>. 252 O profissional pode comparar a foto original com a simulação gerada pela IA e realizar ajustes visuais finais antes da apresentação ao cliente. 253 <br> 254 <span class="badge-canvas">Função do módulo: validação e ajuste visual final</span> 255 </div> 256 </div> 257 258 <div class="row"> 259 <div class="col-md-4"> 260 <div class="card-box"> 261 <div class="titulo-box">Foto Original</div> 262 <img src="<?php echo $url_foto_original ?>" class="img-comparacao"> 263 </div> 264 </div> 265 266 <div class="col-md-4"> 267 <div class="card-box"> 268 <div class="titulo-box">Simulação Gerada pela IA</div> 269 <?php if($url_imagem_simulada != ""){ ?> 270 <img src="<?php echo $url_imagem_simulada ?>" class="img-comparacao"> 271 <?php }else{ ?> 272 <div class="info-canvas">Nenhuma simulação gerada por IA até o momento.</div> 273 <?php } ?> 274 </div> 275 </div> 276 277 <div class="col-md-4"> 278 <div class="card-box painel-ferramentas"> 279 <div class="titulo-box">Ferramentas de Ajuste</div> 280 281 <div class="info-canvas"> 282 Carregue o arquivo da prótese e ajuste manualmente sobre a foto original usando posição, escala, rotação e opacidade. 283 </div> 284 285 <div class="form-group"> 286 <label>Arquivo da Prótese</label> 287 <input type="file" id="overlayInput" class="form-control" accept="image/png,image/webp,image/jpeg"> 288 <img id="previewProtese" class="preview-protese"> 289 </div> 290 291 <div class="form-group"> 292 <div class="rotulo-range"> 293 Tamanho 294 <span class="valor-range" id="valorScale">100%</span> 295 </div> 296 <input type="range" id="scaleRange" class="form-control" min="10" max="300" value="100"> 297 </div> 298 299 <div class="form-group"> 300 <div class="rotulo-range"> 301 Rotação 302 <span class="valor-range" id="valorRotate">0°</span> 303 </div> 304 <input type="range" id="rotateRange" class="form-control" min="-180" max="180" value="0"> 305 </div> 306 307 <div class="form-group"> 308 <div class="rotulo-range"> 309 Opacidade 310 <span class="valor-range" id="valorOpacity">100%</span> 311 </div> 312 <input type="range" id="opacityRange" class="form-control" min="10" max="100" value="100"> 313 </div> 314 315 <div class="grupo-botoes"> 316 <button type="button" class="btn btn-secondary btn-block" id="btnResetar">Resetar Ajuste</button> 317 <button type="button" class="btn btn-primary btn-block" id="btnSalvar">Salvar Ajuste Final</button> 318 <a href="../../simulador" class="btn btn-default btn-block">Voltar</a> 319 </div> 320 321 <small><div id="mensagem" align="center"></div></small> 322 </div> 323 </div> 324 </div> 325 326 <div class="card-box"> 327 <div class="titulo-box">Editor Manual da Prótese</div> 328 329 <div class="info-canvas"> 330 Área de ajuste fino da simulação. 331 Arraste a prótese sobre a imagem, ajuste o tamanho, a rotação e a opacidade, e então salve o resultado final. 332 </div> 333 334 <div class="canvas-wrapper"> 335 <canvas id="canvas"></canvas> 336 </div> 337 </div> 338 339</div> 340 341<script> 342var simId = "<?php echo $id ?>"; 343var fotoBase = "<?php echo $url_foto_original ?>"; 344 345var canvas = document.getElementById('canvas'); 346var ctx = canvas.getContext('2d'); 347 348var imgBase = new Image(); 349var imgOverlay = new Image(); 350 351var overlayCarregado = false; 352var dragging = false; 353var startX = 0; 354var startY = 0; 355var displayScale = 1; 356 357var overlay = { 358 x: 150, 359 y: 120, 360 width: 220, 361 height: 140, 362 rotation: 0, 363 opacity: 1 364}; 365 366var overlayOriginal = { 367 width: 220, 368 height: 140 369}; 370 371function atualizarLabels(){ 372 document.getElementById('valorScale').innerHTML = document.getElementById('scaleRange').value + '%'; 373 document.getElementById('valorRotate').innerHTML = document.getElementById('rotateRange').value + '°'; 374 document.getElementById('valorOpacity').innerHTML = document.getElementById('opacityRange').value + '%'; 375} 376 377function ajustarCanvasResponsivo(){ 378 var larguraMaxima = document.querySelector('.canvas-wrapper').clientWidth - 20; 379 380 if(larguraMaxima <= 0 || canvas.width <= 0){ 381 return; 382 } 383 384 if(canvas.width > larguraMaxima){ 385 displayScale = larguraMaxima / canvas.width; 386 canvas.style.width = larguraMaxima + 'px'; 387 canvas.style.height = (canvas.height * displayScale) + 'px'; 388 }else{ 389 displayScale = 1; 390 canvas.style.width = canvas.width + 'px'; 391 canvas.style.height = canvas.height + 'px'; 392 } 393} 394 395function resetarAjuste(){ 396 if(!overlayCarregado){ 397 return; 398 } 399 400 overlay.width = overlayOriginal.width; 401 overlay.height = overlayOriginal.height; 402 overlay.x = (canvas.width / 2) - (overlay.width / 2); 403 overlay.y = (canvas.height / 3) - (overlay.height / 2); 404 overlay.rotation = 0; 405 overlay.opacity = 1; 406 407 document.getElementById('scaleRange').value = 100; 408 document.getElementById('rotateRange').value = 0; 409 document.getElementById('opacityRange').value = 100; 410 411 atualizarLabels(); 412 desenhar(); 413} 414 415imgBase.onload = function(){ 416 canvas.width = imgBase.width; 417 canvas.height = imgBase.height; 418 desenhar(); 419 ajustarCanvasResponsivo(); 420}; 421 422imgBase.onerror = function(){ 423 document.getElementById('mensagem').innerHTML = '<span class="text-danger">Erro ao carregar a foto original</span>'; 424}; 425 426imgBase.src = fotoBase; 427 428function desenhar(){ 429 ctx.clearRect(0, 0, canvas.width, canvas.height); 430 ctx.drawImage(imgBase, 0, 0, canvas.width, canvas.height); 431 432 if(overlayCarregado){ 433 ctx.save(); 434 ctx.globalAlpha = overlay.opacity; 435 ctx.translate(overlay.x + overlay.width / 2, overlay.y + overlay.height / 2); 436 ctx.rotate(overlay.rotation * Math.PI / 180); 437 ctx.drawImage(imgOverlay, -overlay.width / 2, -overlay.height / 2, overlay.width, overlay.height); 438 ctx.restore(); 439 } 440} 441 442function getCanvasCoords(clientX, clientY){ 443 var rect = canvas.getBoundingClientRect(); 444 445 return { 446 x: (clientX - rect.left) / displayScale, 447 y: (clientY - rect.top) / displayScale 448 }; 449} 450 451document.getElementById('overlayInput').addEventListener('change', function(e){ 452 var arquivo = e.target.files[0]; 453 if(!arquivo){ 454 return; 455 } 456 457 var reader = new FileReader(); 458 reader.onload = function(event){ 459 document.getElementById('previewProtese').src = event.target.result; 460 document.getElementById('previewProtese').style.display = 'block'; 461 462 imgOverlay.onload = function(){ 463 overlayCarregado = true; 464 465 overlay.width = imgOverlay.width; 466 overlay.height = imgOverlay.height; 467 468 if(overlay.width > 300){ 469 var proporcao = overlay.height / overlay.width; 470 overlay.width = 300; 471 overlay.height = 300 * proporcao; 472 } 473 474 overlayOriginal.width = overlay.width; 475 overlayOriginal.height = overlay.height; 476 477 overlay.x = (canvas.width / 2) - (overlay.width / 2); 478 overlay.y = (canvas.height / 3) - (overlay.height / 2); 479 overlay.rotation = 0; 480 overlay.opacity = 1; 481 482 document.getElementById('scaleRange').value = 100; 483 document.getElementById('rotateRange').value = 0; 484 document.getElementById('opacityRange').value = 100; 485 486 atualizarLabels(); 487 desenhar(); 488 }; 489 490 imgOverlay.src = event.target.result; 491 }; 492 493 reader.readAsDataURL(arquivo); 494}); 495 496canvas.addEventListener('mousedown', function(e){ 497 if(!overlayCarregado){ 498 return; 499 } 500 501 var pos = getCanvasCoords(e.clientX, e.clientY); 502 503 if( 504 pos.x >= overlay.x && 505 pos.x <= overlay.x + overlay.width && 506 pos.y >= overlay.y && 507 pos.y <= overlay.y + overlay.height 508 ){ 509 dragging = true; 510 startX = pos.x - overlay.x; 511 startY = pos.y - overlay.y; 512 } 513}); 514 515canvas.addEventListener('mousemove', function(e){ 516 if(!dragging){ 517 return; 518 } 519 520 var pos = getCanvasCoords(e.clientX, e.clientY); 521 522 overlay.x = pos.x - startX; 523 overlay.y = pos.y - startY; 524 desenhar(); 525}); 526 527canvas.addEventListener('mouseup', function(){ 528 dragging = false; 529}); 530 531canvas.addEventListener('mouseleave', function(){ 532 dragging = false; 533}); 534 535canvas.addEventListener('touchstart', function(e){ 536 if(!overlayCarregado){ 537 return; 538 } 539 540 var toque = e.touches[0]; 541 var pos = getCanvasCoords(toque.clientX, toque.clientY); 542 543 if( 544 pos.x >= overlay.x && 545 pos.x <= overlay.x + overlay.width && 546 pos.y >= overlay.y && 547 pos.y <= overlay.y + overlay.height 548 ){ 549 dragging = true; 550 startX = pos.x - overlay.x; 551 startY = pos.y - overlay.y; 552 } 553 554 e.preventDefault(); 555}, {passive:false}); 556 557canvas.addEventListener('touchmove', function(e){ 558 if(!dragging){ 559 return; 560 } 561 562 var toque = e.touches[0]; 563 var pos = getCanvasCoords(toque.clientX, toque.clientY); 564 565 overlay.x = pos.x - startX; 566 overlay.y = pos.y - startY; 567 desenhar(); 568 569 e.preventDefault(); 570}, {passive:false}); 571 572canvas.addEventListener('touchend', function(){ 573 dragging = false; 574}); 575 576document.getElementById('scaleRange').addEventListener('input', function(){ 577 if(!overlayCarregado){ 578 return; 579 } 580 581 var valor = parseInt(this.value); 582 var proporcao = overlayOriginal.height / overlayOriginal.width; 583 584 overlay.width = overlayOriginal.width * (valor / 100); 585 overlay.height = overlay.width * proporcao; 586 587 atualizarLabels(); 588 desenhar(); 589}); 590 591document.getElementById('rotateRange').addEventListener('input', function(){ 592 if(!overlayCarregado){ 593 return; 594 } 595 596 overlay.rotation = parseInt(this.value); 597 atualizarLabels(); 598 desenhar(); 599}); 600 601document.getElementById('opacityRange').addEventListener('input', function(){ 602 if(!overlayCarregado){ 603 return; 604 } 605 606 overlay.opacity = parseInt(this.value) / 100; 607 atualizarLabels(); 608 desenhar(); 609}); 610 611document.getElementById('btnResetar').addEventListener('click', function(){ 612 resetarAjuste(); 613}); 614 615document.getElementById('btnSalvar').addEventListener('click', function(){ 616 617 if(!overlayCarregado){ 618 document.getElementById('mensagem').innerHTML = '<span class="text-danger">Carregue o arquivo da prótese para ajuste manual</span>'; 619 return; 620 } 621 622 var imagemFinal = canvas.toDataURL('image/png'); 623 624 if(imagemFinal == ''){ 625 document.getElementById('mensagem').innerHTML = '<span class="text-danger">Erro ao gerar imagem do canvas</span>'; 626 return; 627 } 628 629 var xhr = new XMLHttpRequest(); 630 xhr.open('POST', 'salvar_canvas.php', true); 631 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 632 633 xhr.onreadystatechange = function(){ 634 if(xhr.readyState == 4){ 635 if(xhr.responseText.trim() == 'Salvo com Sucesso'){ 636 document.getElementById('mensagem').innerHTML = '<span class="text-success">Ajuste final salvo com sucesso</span>'; 637 }else{ 638 document.getElementById('mensagem').innerHTML = '<span class="text-danger">' + xhr.responseText + '</span>'; 639 } 640 } 641 }; 642 643 xhr.send('id=' + encodeURIComponent(simId) + '&img=' + encodeURIComponent(imagemFinal)); 644}); 645 646window.addEventListener('resize', function(){ 647 ajustarCanvasResponsivo(); 648}); 649 650atualizarLabels(); 651</script> 652 653</body> 654</html>

Leitura linha por linha

LinhaCódigoExplicação técnica
1<?phpAbre um bloco PHP. A partir daqui o arquivo passa a executar lógica no servidor.
2require_once("../../../conexao.php");Importa `../../../conexao.php` para disponibilizar conexão, sessão, funções utilitárias ou validações necessárias ao restante do fluxo.
3 Linha em branco usada para separar blocos e melhorar a leitura.
4$tabela = 'simulacoes_protese';Centraliza o nome da tabela `simulacoes_protese` em uma variável, facilitando reaproveitamento do valor nas queries do arquivo.
5$pasta_upload = __DIR__ . '/../../images/simulacoes/';Define a variável `$pasta_upload`, que será usada pelo restante do arquivo para controlar dados, estado ou resposta.
6 Linha em branco usada para separar blocos e melhorar a leitura.
7$id = @$_GET['id'];Lê dados de entrada vindos da requisição, sessão ou upload e normaliza o valor para uso no restante da rotina.
8 Linha em branco usada para separar blocos e melhorar a leitura.
9if($id == ""){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
10 echo 'ID não informado';Envia saída para o navegador ou para o AJAX. O conteúdo retornado aqui precisa respeitar o contrato esperado pela tela.
11 exit();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
12}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
13 Linha em branco usada para separar blocos e melhorar a leitura.
14$query = $pdo->prepare("SELECT s.*, c.nome as nome_cliente, p.modelo Prepara a instrução SQL em PDO. Esse passo ajuda a organizar a query e reduzir riscos de injeção.
15 FROM $tabela sLinha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
16 INNER JOIN clientes c ON s.cliente = c.idLinha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
17 INNER JOIN proteses p ON s.id_protese = p.idLinha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
18 WHERE s.id = :id");Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
19$query->bindValue(":id", $id);Associa um valor PHP a um parâmetro nomeado da query preparada.
20$query->execute();Executa a query preparada no banco de dados.
21$res = $query->fetchAll(PDO::FETCH_ASSOC);Lê o resultado retornado pelo banco e o converte para uma estrutura PHP que o restante do arquivo consegue consumir.
22 Linha em branco usada para separar blocos e melhorar a leitura.
23if(@count($res) == 0){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
24 echo 'Registro não encontrado';Envia saída para o navegador ou para o AJAX. O conteúdo retornado aqui precisa respeitar o contrato esperado pela tela.
25 exit();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
26}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
27 Linha em branco usada para separar blocos e melhorar a leitura.
28$cliente = $res[0]['nome_cliente'];Define a variável `$cliente`, que será usada pelo restante do arquivo para controlar dados, estado ou resposta.
29$modelo = $res[0]['modelo'];Define a variável `$modelo`, que será usada pelo restante do arquivo para controlar dados, estado ou resposta.
30$foto_original = $res[0]['foto_original'];Define a variável `$foto_original`, que será usada pelo restante do arquivo para controlar dados, estado ou resposta.
31$imagem_simulada = $res[0]['imagem_simulada'];Define a variável `$imagem_simulada`, que será usada pelo restante do arquivo para controlar dados, estado ou resposta.
32 Linha em branco usada para separar blocos e melhorar a leitura.
33if($foto_original == ""){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
34 echo 'Nenhuma foto original enviada';Envia saída para o navegador ou para o AJAX. O conteúdo retornado aqui precisa respeitar o contrato esperado pela tela.
35 exit();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
36}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
37 Linha em branco usada para separar blocos e melhorar a leitura.
38if(!is_dir($pasta_upload)){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
39 echo 'Pasta de imagens da simulação não encontrada';Envia saída para o navegador ou para o AJAX. O conteúdo retornado aqui precisa respeitar o contrato esperado pela tela.
40 exit();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
41}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
42 Linha em branco usada para separar blocos e melhorar a leitura.
43if(!is_readable($pasta_upload)){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
44 echo 'Pasta de imagens da simulação sem permissão de leitura';Envia saída para o navegador ou para o AJAX. O conteúdo retornado aqui precisa respeitar o contrato esperado pela tela.
45 exit();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
46}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
47 Linha em branco usada para separar blocos e melhorar a leitura.
48$foto_base = $pasta_upload . $foto_original;Define a variável `$foto_base`, que será usada pelo restante do arquivo para controlar dados, estado ou resposta.
49 Linha em branco usada para separar blocos e melhorar a leitura.
50if(!file_exists($foto_base)){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
51 echo 'Arquivo da foto original não encontrado';Envia saída para o navegador ou para o AJAX. O conteúdo retornado aqui precisa respeitar o contrato esperado pela tela.
52 exit();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
53}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
54 Linha em branco usada para separar blocos e melhorar a leitura.
55if(!is_file($foto_base)){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
56 echo 'Arquivo da foto original inválido';Envia saída para o navegador ou para o AJAX. O conteúdo retornado aqui precisa respeitar o contrato esperado pela tela.
57 exit();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
58}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
59 Linha em branco usada para separar blocos e melhorar a leitura.
60if(!is_readable($foto_base)){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
61 echo 'Arquivo da foto original sem permissão de leitura';Envia saída para o navegador ou para o AJAX. O conteúdo retornado aqui precisa respeitar o contrato esperado pela tela.
62 exit();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
63}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
64 Linha em branco usada para separar blocos e melhorar a leitura.
65$url_foto_original = '../../images/simulacoes/' . $foto_original . '?v=' . time();Inicializa `$url_foto_original` com um valor temporal para evitar cache ou marcar o momento atual.
66$url_imagem_simulada = '';Define `$url_imagem_simulada` com um valor literal usado como configuração local do arquivo.
67 Linha em branco usada para separar blocos e melhorar a leitura.
68if($imagem_simulada != ""){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
69 $url_imagem_simulada = '../../images/simulacoes/' . $imagem_simulada . '?v=' . time();Inicializa `$url_imagem_simulada` com um valor temporal para evitar cache ou marcar o momento atual.
70}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
71?>Fecha o bloco PHP atual para voltar à saída HTML.
72<!DOCTYPE html>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
73<html lang="pt-br">Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
74<head>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
75 <meta charset="utf-8">Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
76 <meta name="viewport" content="width=device-width, initial-scale=1">Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
77 <title>Canvas de Ajuste Fino</title>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
78 <link rel="stylesheet" href="../../css/bootstrap.min.css">Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
79 Linha em branco usada para separar blocos e melhorar a leitura.
80 <style type="text/css">Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
81 body{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
82 background:#f4f6f9;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
83 font-family: Arial, sans-serif;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
84 padding:15px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
85 color:#2d3436;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
86 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
87 Linha em branco usada para separar blocos e melhorar a leitura.
88 .topo-canvas{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
89 background:#ffffff;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
90 border-radius:10px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
91 padding:16px 18px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
92 box-shadow:0 2px 10px rgba(0,0,0,0.06);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
93 margin-bottom:15px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
94 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
95 Linha em branco usada para separar blocos e melhorar a leitura.
96 .topo-canvas h4{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
97 margin:0 0 8px 0;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
98 font-weight:700;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
99 color:#1f4e79;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
100 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
101 Linha em branco usada para separar blocos e melhorar a leitura.
102 .topo-canvas .subinfo{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
103 font-size:14px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
104 line-height:24px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
105 color:#555;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
106 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
107 Linha em branco usada para separar blocos e melhorar a leitura.
108 .topo-canvas .explicacao{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
109 margin-top:12px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
110 background:#f8fbff;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
111 border:1px solid #d9ecff;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
112 border-radius:8px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
113 padding:12px 14px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
114 font-size:14px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
115 line-height:22px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
116 color:#35516b;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
117 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
118 Linha em branco usada para separar blocos e melhorar a leitura.
119 .card-box{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
120 background:#ffffff;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
121 border-radius:10px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
122 padding:15px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
123 box-shadow:0 2px 10px rgba(0,0,0,0.06);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
124 margin-bottom:15px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
125 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
126 Linha em branco usada para separar blocos e melhorar a leitura.
127 .titulo-box{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
128 font-size:15px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
129 font-weight:700;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
130 color:#334e68;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
131 margin-bottom:10px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
132 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
133 Linha em branco usada para separar blocos e melhorar a leitura.
134 .img-comparacao{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
135 width:100%;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
136 height:260px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
137 object-fit:contain;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
138 border:1px solid #ddd;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
139 border-radius:8px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
140 background:#fafafa;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
141 padding:4px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
142 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
143 Linha em branco usada para separar blocos e melhorar a leitura.
144 .canvas-wrapper{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
145 width:100%;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
146 overflow:auto;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
147 background:#fafafa;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
148 border:1px solid #ddd;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
149 border-radius:8px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
150 padding:8px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
151 text-align:center;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
152 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
153 Linha em branco usada para separar blocos e melhorar a leitura.
154 canvas{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
155 display:block;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
156 margin:0 auto;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
157 background:#fff;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
158 border:1px solid #ddd;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
159 max-width:100%;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
160 height:auto;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
161 cursor:move;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
162 touch-action:none;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
163 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
164 Linha em branco usada para separar blocos e melhorar a leitura.
165 .painel-ferramentas{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
166 position:sticky;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
167 top:15px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
168 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
169 Linha em branco usada para separar blocos e melhorar a leitura.
170 .preview-protese{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
171 max-width:100%;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
172 max-height:120px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
173 border:1px solid #ddd;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
174 padding:3px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
175 border-radius:4px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
176 display:none;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
177 margin-top:8px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
178 background:#fff;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
179 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
180 Linha em branco usada para separar blocos e melhorar a leitura.
181 .info-canvas{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
182 background:#fff8e8;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
183 border:1px solid #ffe3a6;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
184 border-radius:8px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
185 padding:10px 12px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
186 font-size:13px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
187 line-height:21px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
188 color:#7a5a16;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
189 margin-bottom:12px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
190 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
191 Linha em branco usada para separar blocos e melhorar a leitura.
192 .rotulo-range{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
193 font-size:13px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
194 font-weight:700;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
195 color:#5b6570;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
196 margin-bottom:4px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
197 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
198 Linha em branco usada para separar blocos e melhorar a leitura.
199 .valor-range{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
200 font-size:12px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
201 color:#7c8b98;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
202 float:right;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
203 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
204 Linha em branco usada para separar blocos e melhorar a leitura.
205 .grupo-botoes .btn{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
206 margin-bottom:10px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
207 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
208 Linha em branco usada para separar blocos e melhorar a leitura.
209 .badge-canvas{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
210 display:inline-block;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
211 padding:4px 10px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
212 border-radius:20px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
213 font-size:12px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
214 font-weight:700;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
215 background:#eef5ff;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
216 color:#2f6fad;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
217 margin-top:8px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
218 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
219 Linha em branco usada para separar blocos e melhorar a leitura.
220 @media (max-width: 991px){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
221 .painel-ferramentas{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
222 position:relative;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
223 top:auto;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
224 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
225 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
226 Linha em branco usada para separar blocos e melhorar a leitura.
227 @media (max-width: 768px){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
228 body{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
229 padding:10px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
230 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
231 Linha em branco usada para separar blocos e melhorar a leitura.
232 .img-comparacao{Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
233 height:220px;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
234 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
235 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
236 </style>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
237</head>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
238<body>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
239 Linha em branco usada para separar blocos e melhorar a leitura.
240<div class="container-fluid">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
241 Linha em branco usada para separar blocos e melhorar a leitura.
242 <div class="topo-canvas">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
243 <h4>Canvas de Ajuste Fino da Simulação</h4>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
244 Linha em branco usada para separar blocos e melhorar a leitura.
245 <div class="subinfo">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
246 <b>Cliente:</b> <?php echo $cliente ?> &nbsp;&nbsp;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
247 <b>Prótese:</b> <?php echo $modelo ?>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
248 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
249 Linha em branco usada para separar blocos e melhorar a leitura.
250 <div class="explicacao">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
251 Este módulo permite o <b>refinamento manual da simulação</b>. Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
252 O profissional pode comparar a foto original com a simulação gerada pela IA e realizar ajustes visuais finais antes da apresentação ao cliente.Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
253 <br>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
254 <span class="badge-canvas">Função do módulo: validação e ajuste visual final</span>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
255 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
256 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
257 Linha em branco usada para separar blocos e melhorar a leitura.
258 <div class="row">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
259 <div class="col-md-4">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
260 <div class="card-box">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
261 <div class="titulo-box">Foto Original</div>Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
262 <img src="<?php echo $url_foto_original ?>" class="img-comparacao">Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
263 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
264 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
265 Linha em branco usada para separar blocos e melhorar a leitura.
266 <div class="col-md-4">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
267 <div class="card-box">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
268 <div class="titulo-box">Simulação Gerada pela IA</div>Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
269 <?php if($url_imagem_simulada != ""){ ?>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
270 <img src="<?php echo $url_imagem_simulada ?>" class="img-comparacao">Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
271 <?php }else{ ?>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
272 <div class="info-canvas">Nenhuma simulação gerada por IA até o momento.</div>Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
273 <?php } ?>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
274 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
275 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
276 Linha em branco usada para separar blocos e melhorar a leitura.
277 <div class="col-md-4">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
278 <div class="card-box painel-ferramentas">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
279 <div class="titulo-box">Ferramentas de Ajuste</div>Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
280 Linha em branco usada para separar blocos e melhorar a leitura.
281 <div class="info-canvas">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
282 Carregue o arquivo da prótese e ajuste manualmente sobre a foto original usando posição, escala, rotação e opacidade.Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
283 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
284 Linha em branco usada para separar blocos e melhorar a leitura.
285 <div class="form-group">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
286 <label>Arquivo da Prótese</label>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
287 <input type="file" id="overlayInput" class="form-control" accept="image/png,image/webp,image/jpeg">Renderiza um campo de entrada no HTML. O nome/id deste campo precisa bater com o JavaScript e com o backend.
288 <img id="previewProtese" class="preview-protese">Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
289 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
290 Linha em branco usada para separar blocos e melhorar a leitura.
291 <div class="form-group">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
292 <div class="rotulo-range">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
293 TamanhoLinha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
294 <span class="valor-range" id="valorScale">100%</span>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
295 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
296 <input type="range" id="scaleRange" class="form-control" min="10" max="300" value="100">Renderiza um campo de entrada no HTML. O nome/id deste campo precisa bater com o JavaScript e com o backend.
297 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
298 Linha em branco usada para separar blocos e melhorar a leitura.
299 <div class="form-group">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
300 <div class="rotulo-range">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
301 RotaçãoLinha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
302 <span class="valor-range" id="valorRotate">0°</span>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
303 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
304 <input type="range" id="rotateRange" class="form-control" min="-180" max="180" value="0">Renderiza um campo de entrada no HTML. O nome/id deste campo precisa bater com o JavaScript e com o backend.
305 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
306 Linha em branco usada para separar blocos e melhorar a leitura.
307 <div class="form-group">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
308 <div class="rotulo-range">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
309 OpacidadeLinha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
310 <span class="valor-range" id="valorOpacity">100%</span>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
311 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
312 <input type="range" id="opacityRange" class="form-control" min="10" max="100" value="100">Renderiza um campo de entrada no HTML. O nome/id deste campo precisa bater com o JavaScript e com o backend.
313 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
314 Linha em branco usada para separar blocos e melhorar a leitura.
315 <div class="grupo-botoes">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
316 <button type="button" class="btn btn-secondary btn-block" id="btnResetar">Resetar Ajuste</button>Renderiza um elemento de ação da interface, normalmente ligado a evento JavaScript ou navegação.
317 <button type="button" class="btn btn-primary btn-block" id="btnSalvar">Salvar Ajuste Final</button>Renderiza um elemento de ação da interface, normalmente ligado a evento JavaScript ou navegação.
318 <a href="../../simulador" class="btn btn-default btn-block">Voltar</a>Renderiza um elemento de ação da interface, normalmente ligado a evento JavaScript ou navegação.
319 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
320 Linha em branco usada para separar blocos e melhorar a leitura.
321 <small><div id="mensagem" align="center"></div></small>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
322 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
323 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
324 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
325 Linha em branco usada para separar blocos e melhorar a leitura.
326 <div class="card-box">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
327 <div class="titulo-box">Editor Manual da Prótese</div>Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
328 Linha em branco usada para separar blocos e melhorar a leitura.
329 <div class="info-canvas">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
330 Área de ajuste fino da simulação. Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
331 Arraste a prótese sobre a imagem, ajuste o tamanho, a rotação e a opacidade, e então salve o resultado final.Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
332 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
333 Linha em branco usada para separar blocos e melhorar a leitura.
334 <div class="canvas-wrapper">Estrutura o layout HTML da página, modal ou tabela mostrada ao usuário.
335 <canvas id="canvas"></canvas>Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
336 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
337 </div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
338 Linha em branco usada para separar blocos e melhorar a leitura.
339</div>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
340 Linha em branco usada para separar blocos e melhorar a leitura.
341<script>Abre um bloco JavaScript usado para interações do front-end.
342var simId = "<?php echo $id ?>";Declara uma variável JavaScript usada pelo comportamento do front-end.
343var fotoBase = "<?php echo $url_foto_original ?>";Declara uma variável JavaScript usada pelo comportamento do front-end.
344 Linha em branco usada para separar blocos e melhorar a leitura.
345var canvas = document.getElementById('canvas');Declara uma variável JavaScript usada pelo comportamento do front-end.
346var ctx = canvas.getContext('2d');Declara uma variável JavaScript usada pelo comportamento do front-end.
347 Linha em branco usada para separar blocos e melhorar a leitura.
348var imgBase = new Image();Declara uma variável JavaScript usada pelo comportamento do front-end.
349var imgOverlay = new Image();Declara uma variável JavaScript usada pelo comportamento do front-end.
350 Linha em branco usada para separar blocos e melhorar a leitura.
351var overlayCarregado = false;Declara uma variável JavaScript usada pelo comportamento do front-end.
352var dragging = false;Declara uma variável JavaScript usada pelo comportamento do front-end.
353var startX = 0;Declara uma variável JavaScript usada pelo comportamento do front-end.
354var startY = 0;Declara uma variável JavaScript usada pelo comportamento do front-end.
355var displayScale = 1;Declara uma variável JavaScript usada pelo comportamento do front-end.
356 Linha em branco usada para separar blocos e melhorar a leitura.
357var overlay = {Declara uma variável JavaScript usada pelo comportamento do front-end.
358 x: 150,Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
359 y: 120,Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
360 width: 220,Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
361 height: 140,Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
362 rotation: 0,Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
363 opacity: 1Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
364};Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
365 Linha em branco usada para separar blocos e melhorar a leitura.
366var overlayOriginal = {Declara uma variável JavaScript usada pelo comportamento do front-end.
367 width: 220,Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
368 height: 140Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
369};Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
370 Linha em branco usada para separar blocos e melhorar a leitura.
371function atualizarLabels(){Declara a função `atualizarLabels`, responsável por uma parte específica do comportamento da página.
372 document.getElementById('valorScale').innerHTML = document.getElementById('scaleRange').value + '%';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
373 document.getElementById('valorRotate').innerHTML = document.getElementById('rotateRange').value + '°';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
374 document.getElementById('valorOpacity').innerHTML = document.getElementById('opacityRange').value + '%';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
375}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
376 Linha em branco usada para separar blocos e melhorar a leitura.
377function ajustarCanvasResponsivo(){Declara a função `ajustarCanvasResponsivo`, responsável por uma parte específica do comportamento da página.
378 var larguraMaxima = document.querySelector('.canvas-wrapper').clientWidth - 20;Declara uma variável JavaScript usada pelo comportamento do front-end.
379 Linha em branco usada para separar blocos e melhorar a leitura.
380 if(larguraMaxima <= 0 || canvas.width <= 0){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
381 return;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
382 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
383 Linha em branco usada para separar blocos e melhorar a leitura.
384 if(canvas.width > larguraMaxima){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
385 displayScale = larguraMaxima / canvas.width;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
386 canvas.style.width = larguraMaxima + 'px';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
387 canvas.style.height = (canvas.height * displayScale) + 'px';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
388 }else{Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
389 displayScale = 1;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
390 canvas.style.width = canvas.width + 'px';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
391 canvas.style.height = canvas.height + 'px';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
392 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
393}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
394 Linha em branco usada para separar blocos e melhorar a leitura.
395function resetarAjuste(){Declara a função `resetarAjuste`, responsável por uma parte específica do comportamento da página.
396 if(!overlayCarregado){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
397 return;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
398 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
399 Linha em branco usada para separar blocos e melhorar a leitura.
400 overlay.width = overlayOriginal.width;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
401 overlay.height = overlayOriginal.height;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
402 overlay.x = (canvas.width / 2) - (overlay.width / 2);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
403 overlay.y = (canvas.height / 3) - (overlay.height / 2);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
404 overlay.rotation = 0;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
405 overlay.opacity = 1;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
406 Linha em branco usada para separar blocos e melhorar a leitura.
407 document.getElementById('scaleRange').value = 100;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
408 document.getElementById('rotateRange').value = 0;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
409 document.getElementById('opacityRange').value = 100;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
410 Linha em branco usada para separar blocos e melhorar a leitura.
411 atualizarLabels();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
412 desenhar();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
413}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
414 Linha em branco usada para separar blocos e melhorar a leitura.
415imgBase.onload = function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
416 canvas.width = imgBase.width;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
417 canvas.height = imgBase.height;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
418 desenhar();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
419 ajustarCanvasResponsivo();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
420};Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
421 Linha em branco usada para separar blocos e melhorar a leitura.
422imgBase.onerror = function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
423 document.getElementById('mensagem').innerHTML = '<span class="text-danger">Erro ao carregar a foto original</span>';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
424};Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
425 Linha em branco usada para separar blocos e melhorar a leitura.
426imgBase.src = fotoBase;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
427 Linha em branco usada para separar blocos e melhorar a leitura.
428function desenhar(){Declara a função `desenhar`, responsável por uma parte específica do comportamento da página.
429 ctx.clearRect(0, 0, canvas.width, canvas.height);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
430 ctx.drawImage(imgBase, 0, 0, canvas.width, canvas.height);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
431 Linha em branco usada para separar blocos e melhorar a leitura.
432 if(overlayCarregado){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
433 ctx.save();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
434 ctx.globalAlpha = overlay.opacity;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
435 ctx.translate(overlay.x + overlay.width / 2, overlay.y + overlay.height / 2);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
436 ctx.rotate(overlay.rotation * Math.PI / 180);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
437 ctx.drawImage(imgOverlay, -overlay.width / 2, -overlay.height / 2, overlay.width, overlay.height);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
438 ctx.restore();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
439 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
440}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
441 Linha em branco usada para separar blocos e melhorar a leitura.
442function getCanvasCoords(clientX, clientY){Declara a função `getCanvasCoords`, responsável por uma parte específica do comportamento da página.
443 var rect = canvas.getBoundingClientRect();Declara uma variável JavaScript usada pelo comportamento do front-end.
444 Linha em branco usada para separar blocos e melhorar a leitura.
445 return {Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
446 x: (clientX - rect.left) / displayScale,Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
447 y: (clientY - rect.top) / displayScaleLinha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
448 };Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
449}Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
450 Linha em branco usada para separar blocos e melhorar a leitura.
451document.getElementById('overlayInput').addEventListener('change', function(e){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
452 var arquivo = e.target.files[0];Declara uma variável JavaScript usada pelo comportamento do front-end.
453 if(!arquivo){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
454 return;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
455 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
456 Linha em branco usada para separar blocos e melhorar a leitura.
457 var reader = new FileReader();Declara uma variável JavaScript usada pelo comportamento do front-end.
458 reader.onload = function(event){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
459 document.getElementById('previewProtese').src = event.target.result;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
460 document.getElementById('previewProtese').style.display = 'block';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
461 Linha em branco usada para separar blocos e melhorar a leitura.
462 imgOverlay.onload = function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
463 overlayCarregado = true;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
464 Linha em branco usada para separar blocos e melhorar a leitura.
465 overlay.width = imgOverlay.width;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
466 overlay.height = imgOverlay.height;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
467 Linha em branco usada para separar blocos e melhorar a leitura.
468 if(overlay.width > 300){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
469 var proporcao = overlay.height / overlay.width;Declara uma variável JavaScript usada pelo comportamento do front-end.
470 overlay.width = 300;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
471 overlay.height = 300 * proporcao;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
472 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
473 Linha em branco usada para separar blocos e melhorar a leitura.
474 overlayOriginal.width = overlay.width;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
475 overlayOriginal.height = overlay.height;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
476 Linha em branco usada para separar blocos e melhorar a leitura.
477 overlay.x = (canvas.width / 2) - (overlay.width / 2);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
478 overlay.y = (canvas.height / 3) - (overlay.height / 2);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
479 overlay.rotation = 0;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
480 overlay.opacity = 1;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
481 Linha em branco usada para separar blocos e melhorar a leitura.
482 document.getElementById('scaleRange').value = 100;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
483 document.getElementById('rotateRange').value = 0;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
484 document.getElementById('opacityRange').value = 100;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
485 Linha em branco usada para separar blocos e melhorar a leitura.
486 atualizarLabels();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
487 desenhar();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
488 };Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
489 Linha em branco usada para separar blocos e melhorar a leitura.
490 imgOverlay.src = event.target.result;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
491 };Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
492 Linha em branco usada para separar blocos e melhorar a leitura.
493 reader.readAsDataURL(arquivo);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
494});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
495 Linha em branco usada para separar blocos e melhorar a leitura.
496canvas.addEventListener('mousedown', function(e){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
497 if(!overlayCarregado){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
498 return;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
499 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
500 Linha em branco usada para separar blocos e melhorar a leitura.
501 var pos = getCanvasCoords(e.clientX, e.clientY);Declara uma variável JavaScript usada pelo comportamento do front-end.
502 Linha em branco usada para separar blocos e melhorar a leitura.
503 if(Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
504 pos.x >= overlay.x &&Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
505 pos.x <= overlay.x + overlay.width &&Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
506 pos.y >= overlay.y &&Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
507 pos.y <= overlay.y + overlay.heightLinha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
508 ){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
509 dragging = true;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
510 startX = pos.x - overlay.x;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
511 startY = pos.y - overlay.y;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
512 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
513});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
514 Linha em branco usada para separar blocos e melhorar a leitura.
515canvas.addEventListener('mousemove', function(e){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
516 if(!dragging){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
517 return;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
518 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
519 Linha em branco usada para separar blocos e melhorar a leitura.
520 var pos = getCanvasCoords(e.clientX, e.clientY);Declara uma variável JavaScript usada pelo comportamento do front-end.
521 Linha em branco usada para separar blocos e melhorar a leitura.
522 overlay.x = pos.x - startX;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
523 overlay.y = pos.y - startY;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
524 desenhar();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
525});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
526 Linha em branco usada para separar blocos e melhorar a leitura.
527canvas.addEventListener('mouseup', function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
528 dragging = false;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
529});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
530 Linha em branco usada para separar blocos e melhorar a leitura.
531canvas.addEventListener('mouseleave', function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
532 dragging = false;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
533});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
534 Linha em branco usada para separar blocos e melhorar a leitura.
535canvas.addEventListener('touchstart', function(e){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
536 if(!overlayCarregado){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
537 return;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
538 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
539 Linha em branco usada para separar blocos e melhorar a leitura.
540 var toque = e.touches[0];Declara uma variável JavaScript usada pelo comportamento do front-end.
541 var pos = getCanvasCoords(toque.clientX, toque.clientY);Declara uma variável JavaScript usada pelo comportamento do front-end.
542 Linha em branco usada para separar blocos e melhorar a leitura.
543 if(Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
544 pos.x >= overlay.x &&Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
545 pos.x <= overlay.x + overlay.width &&Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
546 pos.y >= overlay.y &&Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
547 pos.y <= overlay.y + overlay.heightLinha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
548 ){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
549 dragging = true;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
550 startX = pos.x - overlay.x;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
551 startY = pos.y - overlay.y;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
552 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
553 Linha em branco usada para separar blocos e melhorar a leitura.
554 e.preventDefault();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
555}, {passive:false});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
556 Linha em branco usada para separar blocos e melhorar a leitura.
557canvas.addEventListener('touchmove', function(e){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
558 if(!dragging){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
559 return;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
560 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
561 Linha em branco usada para separar blocos e melhorar a leitura.
562 var toque = e.touches[0];Declara uma variável JavaScript usada pelo comportamento do front-end.
563 var pos = getCanvasCoords(toque.clientX, toque.clientY);Declara uma variável JavaScript usada pelo comportamento do front-end.
564 Linha em branco usada para separar blocos e melhorar a leitura.
565 overlay.x = pos.x - startX;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
566 overlay.y = pos.y - startY;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
567 desenhar();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
568 Linha em branco usada para separar blocos e melhorar a leitura.
569 e.preventDefault();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
570}, {passive:false});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
571 Linha em branco usada para separar blocos e melhorar a leitura.
572canvas.addEventListener('touchend', function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
573 dragging = false;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
574});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
575 Linha em branco usada para separar blocos e melhorar a leitura.
576document.getElementById('scaleRange').addEventListener('input', function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
577 if(!overlayCarregado){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
578 return;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
579 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
580 Linha em branco usada para separar blocos e melhorar a leitura.
581 var valor = parseInt(this.value);Declara uma variável JavaScript usada pelo comportamento do front-end.
582 var proporcao = overlayOriginal.height / overlayOriginal.width;Declara uma variável JavaScript usada pelo comportamento do front-end.
583 Linha em branco usada para separar blocos e melhorar a leitura.
584 overlay.width = overlayOriginal.width * (valor / 100);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
585 overlay.height = overlay.width * proporcao;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
586 Linha em branco usada para separar blocos e melhorar a leitura.
587 atualizarLabels();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
588 desenhar();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
589});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
590 Linha em branco usada para separar blocos e melhorar a leitura.
591document.getElementById('rotateRange').addEventListener('input', function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
592 if(!overlayCarregado){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
593 return;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
594 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
595 Linha em branco usada para separar blocos e melhorar a leitura.
596 overlay.rotation = parseInt(this.value);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
597 atualizarLabels();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
598 desenhar();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
599});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
600 Linha em branco usada para separar blocos e melhorar a leitura.
601document.getElementById('opacityRange').addEventListener('input', function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
602 if(!overlayCarregado){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
603 return;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
604 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
605 Linha em branco usada para separar blocos e melhorar a leitura.
606 overlay.opacity = parseInt(this.value) / 100;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
607 atualizarLabels();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
608 desenhar();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
609});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
610 Linha em branco usada para separar blocos e melhorar a leitura.
611document.getElementById('btnResetar').addEventListener('click', function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
612 resetarAjuste();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
613});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
614 Linha em branco usada para separar blocos e melhorar a leitura.
615document.getElementById('btnSalvar').addEventListener('click', function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
616 Linha em branco usada para separar blocos e melhorar a leitura.
617 if(!overlayCarregado){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
618 document.getElementById('mensagem').innerHTML = '<span class="text-danger">Carregue o arquivo da prótese para ajuste manual</span>';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
619 return;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
620 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
621 Linha em branco usada para separar blocos e melhorar a leitura.
622 var imagemFinal = canvas.toDataURL('image/png');Declara uma variável JavaScript usada pelo comportamento do front-end.
623 Linha em branco usada para separar blocos e melhorar a leitura.
624 if(imagemFinal == ''){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
625 document.getElementById('mensagem').innerHTML = '<span class="text-danger">Erro ao gerar imagem do canvas</span>';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
626 return;Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
627 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
628 Linha em branco usada para separar blocos e melhorar a leitura.
629 var xhr = new XMLHttpRequest();Declara uma variável JavaScript usada pelo comportamento do front-end.
630 xhr.open('POST', 'salvar_canvas.php', true);Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
631 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
632 Linha em branco usada para separar blocos e melhorar a leitura.
633 xhr.onreadystatechange = function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
634 if(xhr.readyState == 4){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
635 if(xhr.responseText.trim() == 'Salvo com Sucesso'){Abre uma condição para validar pré-requisitos ou desviar o fluxo conforme os dados recebidos.
636 document.getElementById('mensagem').innerHTML = '<span class="text-success">Ajuste final salvo com sucesso</span>';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
637 }else{Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
638 document.getElementById('mensagem').innerHTML = '<span class="text-danger">' + xhr.responseText + '</span>';Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
639 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
640 }Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
641 };Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
642 Linha em branco usada para separar blocos e melhorar a leitura.
643 xhr.send('id=' + encodeURIComponent(simId) + '&img=' + encodeURIComponent(imagemFinal));Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
644});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
645 Linha em branco usada para separar blocos e melhorar a leitura.
646window.addEventListener('resize', function(){Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
647 ajustarCanvasResponsivo();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
648});Marca abertura/fechamento de bloco de código, objeto, array ou estrutura de controle.
649 Linha em branco usada para separar blocos e melhorar a leitura.
650atualizarLabels();Linha de implementação que compõe a lógica normal do arquivo e deve ser lida em conjunto com o bloco onde está inserida.
651</script>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
652 Linha em branco usada para separar blocos e melhorar a leitura.
653</body>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.
654</html>Fecha a estrutura HTML aberta anteriormente, mantendo o documento bem formado.

Navegação entre arquivos do grupo