404

D7net
:/ var / www / html / crsys /
Filename : testeimagemJSVersao3_com_erro_pontilhadas.php
back
<?php

define('HOST', 'localhost');
define('PORT', '3308');
define('USER', 'root');
define('PASS', '');
define('DBNAME', 'crsys');

/*
define('HOST', 'crsys.me');
define('PORT', '3306'); 
define('USER', 'carlos');
define('PASS', 'Crm8751M@');
define('DBNAME', 'crsys');
*/


try {
    $pdo = new PDO("mysql:host=" . HOST . ";port=" . PORT . ";dbname=" . DBNAME, USER, PASS, [
	//$pdo = new PDO("mysql:host=" . HOST . ";dbname=" . DBNAME, USER, PASS, [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        PDO::ATTR_EMULATE_PREPARES => false
    ]);

    // Consulta e montagem do array
    $stmt = $pdo->query("SELECT imagem_planta id_planta, nome  FROM gre_produtos WHERE imagem_planta IS NOT NULL ORDER BY nome");
    $produtos = [];

    while ($row = $stmt->fetch()) {
        $produtos[] = [
            'id_planta' => $row['id_planta'],
			'nome' => $row['nome']
        ];
    }
   //  var_dump($produtos);
    // Agora você pode usar $produtos mais abaixo para montar o <select>
} catch (PDOException $e) {
    die("Erro na conexão: " . $e->getMessage());
}
?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Gerador de Imagem</title>
  <style>
  .checkbox-azul input[type="checkbox"] {
  display: none; /* esconde o checkbox nativo */
}

.checkbox-azul span {
  width: 14px;
  height: 14px;
  background-color:  #87CEFA;
  border: 1px solid #106ebe; /* rosa escuro */
  border-radius: 3px;
  position: relative;
}

.checkbox-azul {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-azul input[type="checkbox"]:checked + span::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-rosa {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-rosa input[type="checkbox"] {
  display: none; /* esconde o checkbox nativo */
}
.checkbox-rosa span {
  width: 14px;
  height: 14px;
  background-color:  #C76E7A;
  border: 1px solid #d63384; /* rosa escuro */
  border-radius: 3px;
  position: relative;
}

/* check branco quando marcado */
.checkbox-rosa input[type="checkbox"]:checked + span::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-verde {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-verde input[type="checkbox"] {
  display: none; /* esconde o checkbox nativo */
}
.checkbox-verde span {
  width: 14px;
  height: 14px;
  background-color:  #109010;
  border: 1px solid #009000; /* rosa escuro */
  border-radius: 3px;
  position: relative;
}

/* check branco quando marcado */
.checkbox-verde input[type="checkbox"]:checked + span::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
    /* Container flex para alinhar canvas e input lado a lado */
   
    #HsaiaDir {
      width: 36px;
      text-align: center;
    }

   /* garante que o wrapper se posicione relativo ao canvas */

#canvasWrapper {
    position: relative !important;/* referência para o input absoluto */
}

#inputSaiaDirWrapper {
    position: absolute !important;
    top: 10px; */ /* fixo */
    left: calc(100% + 10px)!important; /* à direita do canvas */
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 2147483647!important;
    pointer-events: auto !important;
}



    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .linha-campos {
      display: flex;
      gap: 20px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 15px;
    }

    .campo-inline {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .campo-inline label {
      white-space: nowrap;
    }

    input[type="text"],
    input[type="number"],
    select {
      padding: 4px 6px;
      width: 100px;
    }

    .preview {
      display: inline-block;
      background: #f4f4f4;
      padding: 4px 8px;
      border: 1px solid #ccc;
	 margin-left: 80px !important;
    }

    canvas {
      display: block;
    }


  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>Gerador de Imagem com Saia e Frontões - JS</h1>
<script src="testeimagemJSVersao3.php" defer></script>
  <form id="formImagem">
     <input type="hidden" id="img_fixaBB">
     <input type="hidden" id="pontilha_supBB">
	 <input type="hidden" id="pontilha_infBB">
    <!-- Linha 1: cor, largura, altura -->
    <div class="linha-campos">
      <div class="campo-inline">
        <label for="cor">Cor (hex):</label>
        <input type="text" id="cor" value="" required>
      </div>
	  <div class="campo-inline">
        <label for="produto">Produto:</label>
       <div class="campo-inline">
  <div class="campo-inline">
  <label for="produto">Produto:</label>
  <select id="selectPlanta" onchange="pegaVariaveis(this.value)">
    <option value="">Selecione</option>
    <?php
      foreach ($produtos as $prod) {
        extract($prod);
        echo "<option value='$id_planta'>$nome</option>";
      }
    ?>
  </select>
</div>

</div>

      </div>
      <div class="campo-inline">
        <label for="largura">Largura:</label>
        <input type="number" id="largura" value="250" min="5" required>
      </div>
      <div class="campo-inline">
        <label for="altura">Altura:</label>
        <input type="number" id="altura" value="9" min="5" required>
      </div>
    </div>
	    <div class="campo-inline">
        <label for="tpo_duplo">Tampo duplo</label>
        <input type="checkbox" id="tpo_duplo">
      </div>
	 </div> 
<div class="container-fluid">
<div class="sub-container-planta" style="min-height: 150px; border: 1px solid #ccc; width: 30%; margin-bottom: 10px; position: relative;">
<div style="position: absolute; top: 4px; left: 6px; font-size: 0.75rem; font-weight: bold;">
  Planta
</div>

  <!-- Input H acima do retângulo -->
  

  <div style="display: flex; gap: 8px; justify-content: center; margin-bottom: 5px; margin-top: 5px; position: relative; left: 12px;">
    <label class="checkbox-azul" class="text-center" style="transform: scale(0.9);">
      <input type="checkbox" id="acabSup" name="acabSup" value="1" title="Acabamento superior" class="text-center">
      <span class="text-center"></span>
    </label>

    <label class="checkbox-rosa" style="transform: scale(0.9);">
      <input type="checkbox" id="saiaSup" name="saiaSup" value="1" title="Saia 3 ativa">
      <span></span>
    </label>

    <label class="checkbox-verde" style="transform: scale(0.9);">
      <input type="checkbox" id="fronSup" name="fronS" value="1" title="Saia 3 ativa">
      <span></span>
    </label>
	
  </div>
  <div style="text-align: center; margin-bottom: 2px; margin-top: 10px; position: relative; left: 4px;">
    <label for="HPlanta" style="font-size: 0.70rem;">L</label>
    <input id="HPlanta" type="text" value="0" style="width: 22px !important; font-size: 0.70rem;">
  </div>
  <div style="display: flex; align-items: center; justify-content: center; margin-top: 5px;">
    <!-- Input P + Checkboxes à esquerda, fora do retângulo -->
    <div style="margin-left: 70px;  margin-right: 0px; display: flex; flex-direction: row; align-items: center;">
      <!-- Input P à esquerda -->
      

      <!-- Checkboxes à esquerda -->
      <div style="display: flex; flex-direction: column; align-items: center; margin-right: 3px;">
        <label class="checkbox-azul" class="text-center" style="transform: scale(0.9);">
          <input type="checkbox" id="acabEsq" name="acabEsq" value="1" title="Acabamento esquerdo" class="text-center">
          <span class="text-center"></span>
        </label>

        <label class="checkbox-rosa" style="margin-top: 4px; transform: scale(0.9);">
          <input type="checkbox" id="saiaEsq" name="saiaEsq" value="1" title="Saia 3 ativa">
          <span></span>
        </label>

        <label class="checkbox-verde" style="margin-top: 4px; transform: scale(0.9);">
          <input type="checkbox" id="fronEsq" name="fronEsq" value="1" title="Saia 3 ativa">
          <span></span>
        </label>
      </div>
	  <div style="display: flex; flex-direction: column; align-items: center; margin-l: 4px; margin-right: 4px;">
        <label for="PPlanta" style="font-size: 0.70rem;">P</label>
        <input id="PPlanta" type="text" value="0" style="width: 22px !important; font-size: 0.70rem;">
      </div>
    </div>

    <!-- Retângulo com canvas -->
	<div style="position: relative; border: 1px solid blue; width: 40%; height: 55px; box-sizing: border-box; margin-left: 3px; margin-right: auto;">
    <!--<div style="position: relative; border: 1px solid blue; width: 40%; height: 55px; box-sizing: border-box; margin-left: -10px; margin-right: auto;"> -->
      <canvas id="canvasPlanta" style="width: 100%; height: 100%; display: block;"></canvas>

      <!-- Checkboxes abaixo do retângulo, centralizados -->
      <div style="position: absolute; bottom: -28px; left: 45%; transform: translateX(-50%); display: flex; gap: 8px;">
        <label class="checkbox-azul" class="text-center" style="transform: scale(0.9);">
          <input type="checkbox" id="acabInf" name="acabInf" value="1" title="Acabamento inferior" class="text-center">
          <span class="text-center"></span>
        </label>
        <label class="checkbox-rosa" style="transform: scale(0.9);">
          <input type="checkbox" id="saiaInf" name="saiaInf" value="1" title="Saia 3 ativa">
          <span></span>
        </label>
        <label class="checkbox-verde" style="transform: scale(0.9);">
          <input type="checkbox" id="fronInf" name="fronInf" value="1" title="Saia 3 ativa">
          <span></span>
        </label>
      </div>
    </div>

    <!-- Checkbox à direita, fora do retângulo -->
  <!--  <div style="margin-left: 8px; display: flex; flex-direction: column; align-items: center;"> -->
 <div style="position: relative; left: -80px; display: flex; flex-direction: column; align-items: center;">
      <label class="checkbox-azul" class="text-center" style="margin-top: 4px; transform: scale(0.9);">
        <input type="checkbox" id="acabDir" name="acabDir" value="1" title="Acabamento direito" class="text-center">
        <span class="text-center"></span>
      </label>
      <label class="checkbox-rosa" style="margin-top: 4px; transform: scale(0.9);">
        <input type="checkbox" id="saiaDir" name="saiaDir" value="1" title="Saia 3 ativa">
        <span></span>
      </label>
      <label class="checkbox-verde" style="margin-top: 4px; transform: scale(0.9);">
        <input type="checkbox" id="fronDir" name="fronDir" value="1" title="Saia 3 ativa">
        <span></span>
      </label>
    </div>
  </div>
</div>

<div id="sub-container-aa" style="min-height: 150px; border: 1px solid #ccc; width: 30%; margin-bottom: 10px; position: relative; padding: 5px;">
<div style="position: absolute; top: 4px; left: 6px; font-size: 0.75rem; font-weight: bold;">
  Corte AA
</div> 
 <canvas id="canvasPreview-aa"></canvas>

  <div id="inputSaiaDirWrapperAA" style="display: none; position: absolute; left: calc(30% + 5px); top: 50%; transform: translateY(-50%); white-space: nowrap;">
    <label for="HsaiaDirAA" style="font-size: 0.75rem;">H</label>
    <input id="HsaiaDirAA" type="text" value="0" style="width: 25px !important; font-size: 0.75rem;">
  </div>
</div>





    <div class="sub-container-bb" style="margin-top: 0; padding-top: 0; border: 1px solid #ccc; width: 30%;">
<div style="position: relative;">
  <div style="position: absolute; top: 4px; left: 6px; font-size: 0.75rem; font-weight: bold;">
    Corte BB
  </div>
</div>

      <div class="preview">
        <div id="canvasWrapper">
	
          <canvas id="canvasPreview"></canvas>

          <!-- Input lateral opcional para a Saia Direita -->
          <div id="inputSaiaDirWrapper" >
            <label for="HsaiaDir" style="font-size: 0.75rem; margin-top: 40px;" >H</label>
            <input id="HsaiaDir" type="text" value="0" style="width: 25px !important; font-size: 0.75rem; margin-top: 40px;">
          </div>

          <div id="inputFronEsqWrapper" style="display: flex; align-items: center; gap: 10px;">
            <label for="HfronEsq" style="margin: 0; font-size: 0.75rem">H</label>
            <input id="HfronEsq" type="text" value="0" style="width: 25px !important; font-size: 0.75rem">
          </div>
        </div>
      </div>
    </div>

  
</div> 
 <br><div class="linha-campos">
      <div class="campo-inline">
        <label for="meiaesquad">Meia esquadria (esq/dir)</label>
        <input type="checkbox" id="meiaesquad" >
      </div>
     
    </div>
  </form> 
<script>
// ✅ Função visível globalmente
function pegaVariaveis(prodCod) {
 // alert('Função chamada com valor: ' + prodCod);

  const empr_idb = '1';
 const enderecob = "<?php echo 'http://localhost/crsys/adm/'; ?>";
  // const enderecob = "<?php echo 'https://crsys.me/crsys/adm/'; ?>";
  const wurl = enderecob + "vendor/api/buscar_variaveis.php";

  $.ajax({
    type: "GET",
    url: wurl,
    data: { empr_id: empr_idb, prodcod: prodCod },
    success: function(response) {
      try {
        const data = response;

        if (!Array.isArray(data) || data.length === 0) {
          console.warn("Nenhum dado retornado.");
          return;
        }
        //console.log(data);
        // Chama a função que trata todos os itens
        setVariaveis(data);
      } catch (e) {
        console.error("Erro ao processar resposta:", e);
      }
    },
    error: function(xhr, status, error) {
      console.error("Erro na requisição:", status, error);
    }
  });
}

// ✅ Pode manter isso para outras ações internas
document.addEventListener('DOMContentLoaded', () => {
  const select = document.getElementById('selectPlanta');
});

function setVariaveis(listaVariaveis) {
  const variavel = listaVariaveis[0]; // Usando o primeiro item do array
  console.log(variavel);
  
  // Tratamento do checkbox tampo_duplo
  const tpoDuplo = document.getElementById('tpo_duplo');
  if (tpoDuplo) {
    const valor = variavel.tampo_duplo;
    if (valor === 1) {
      tpoDuplo.checked = true;
      tpoDuplo.disabled = false;
    } else if (valor === 0) {
      tpoDuplo.checked = false;
      tpoDuplo.disabled = false;
    } else {
      tpoDuplo.checked = false;
      tpoDuplo.disabled = true;
    }
  }
// Tratamento do checkbox meia esquadria
  const meiaEsquad = document.getElementById('meiaesquad');
  if (meiaEsquad) {
    const valor = variavel.meia_esquad;
    if (valor === 1) {
      meiaEsquad.checked = true;
      meiaEsquad.disabled = false;
    } else if (valor === 0) {
      meiaEsquad.checked = false;
      meiaEsquad.disabled = false;
    } else {
      meiaEsquad.checked = false;
      meiaEsquad.disabled = true;
    }
  }
  // ✅ Tratamento dos checkboxes de acabamento
  const acabamentos = [
    { id: 'acabSup', campo: 'acab_sup_planta' },
    { id: 'acabInf', campo: 'acab_inf_planta' },
    { id: 'acabEsq', campo: 'acab_esq_planta' },
    { id: 'acabDir', campo: 'acab_dir_planta' }
  ];

  acabamentos.forEach(item => {
    const checkbox = document.getElementById(item.id);
    if (checkbox) {
      const valor = variavel[item.campo];
      if (valor === 1) {
        checkbox.checked = true;
        checkbox.disabled = false;
      } else if (valor === 0) {
        checkbox.checked = false;
        checkbox.disabled = false;
      } else {
        checkbox.checked = false;
        checkbox.disabled = true;
      }
    }
  });

const frontao = [
    { id: 'fronSup', campo: 'fron_sup_planta' },
    { id: 'fronInf', campo: 'fron_inf_planta' },
    { id: 'fronEsq', campo: 'fron_esq_planta' },
    { id: 'fronDir', campo: 'fron_dir_planta' }
  ];

  frontao.forEach(item => {
    const checkbox = document.getElementById(item.id);
    if (checkbox) {
      const valor = variavel[item.campo];
      if (valor === 1) {
        checkbox.checked = true;
        checkbox.disabled = false;
      } else if (valor === 0) {
        checkbox.checked = false;
        checkbox.disabled = false;
      } else {
        checkbox.checked = false;
        checkbox.disabled = true;
      }
    }
  });

  // ✅ Tratamento dos checkboxes de saia
  const saias = [
    { id: 'saiaSup', campo: 'saia_sup_planta' },
    { id: 'saiaInf', campo: 'saia_inf_planta' },
    { id: 'saiaEsq', campo: 'saia_esq_planta' },
    { id: 'saiaDir', campo: 'saia_dir_planta' }
  ];

  saias.forEach(item => {
    const checkbox = document.getElementById(item.id);
    if (checkbox) {
      const valor = variavel[item.campo];
      if (valor === 1) {
        checkbox.checked = true;
        checkbox.disabled = false;
      } else if (valor === 0) {
        checkbox.checked = false;
        checkbox.disabled = false;
      } else {
        checkbox.checked = false;
        checkbox.disabled = true;
      }
    }
  });
   // ✅ Executa gerarImagem() se pelo menos uma saia estiver ativada
  const saiaSup = variavel.saia_sup_planta;
  const saiaInf = variavel.saia_inf_planta;
  const saiaEsq = variavel.saia_esq_planta;
  const saiaDir = variavel.saia_dir_planta;
  const fronSup = variavel.fron_sup_planta;
  const fronInf = variavel.fron_inf_planta;
  const fronEsq = variavel.fron_esq_planta;
  const fronDir = variavel.fron_dir_planta;
  const meiaesquad = variavel.meia_esquad;
  if ([meiaesquad, saiaSup, saiaInf, saiaEsq, saiaDir,fronSup, fronInf, fronEsq, fronDir].some(v => v === 1)) {
                   gerarImagem();
  }
  
}
</script>



  
<script>

  // Utilitário de parse seguro
  const n = (id, min, def) => {
    const v = Number(document.getElementById(id).value);
    return Number.isFinite(v) ? Math.max(min, v) : def;
  };

  // HEX -> RGB (#RGB e #RRGGBB)
  function hexToRgb(hex){
    let h = hex.replace(/^#/, '').toLowerCase();
    if (/^[0-9a-f]{3}$/.test(h)) h = h.split('').map(c => c + c).join('');
    if (!/^[0-9a-f]{6}$/.test(h)) return [65,105,225]; // royalblue fallback
    return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)];
  }

 function gerarImagem(){
  const img_fixaBB = document.getElementById("img_fixaBB").value;
  const pontilha_pontilha_supBB = document.getElementById("pontilha_supBB").value;  
    const pontilha_infBB = document.getElementById("pontilha_infBB").value;  
  ctxPlanta.clearRect(0, 0, canvasPlanta.width, canvasPlanta.height);

  // 1) Desenhar imagem fixa, se existir
  console.log('pontilha_infBB Desenhar: '+pontilha_infBB);
  if (img_fixaBB) {
    const img = new Image();
    img.onload = function () {
      const imgX = (canvasPlanta.width - img.width) / 2;
      const imgY = (canvasPlanta.height - img.height) / 2;
      ctxPlanta.drawImage(img, imgX, imgY);
    };
    img.src = img_fixaBB;
  }

  // 2) Linha pontilhada superior
  if (pontilha_supBB === 1) {
    ctxPlanta.save();
    ctxPlanta.setLineDash([5, 3]);
    ctxPlanta.strokeStyle = '#0d6efd';
    ctxPlanta.lineWidth = 1;

    const xInicio = (canvasPlanta.width - larg_planta) / 2;
    const xFim = xInicio + larg_planta;

    const ySup = alt_planta;

    ctxPlanta.beginPath();
    ctxPlanta.moveTo(xInicio, ySup);
    ctxPlanta.lineTo(xFim, ySup);
    ctxPlanta.stroke();
    ctxPlanta.restore();
  }

  // 3) Linha pontilhada inferior
  if (pontilha_infBB === 1) {
    ctxPlanta.save();
    ctxPlanta.setLineDash([5, 3]);
    ctxPlanta.strokeStyle = '#0d6efd';
    ctxPlanta.lineWidth = 1;

    const xInicio = (canvasPlanta.width - larg_planta) / 2;
    const xFim = xInicio + larg_planta;

    const yInf = canvasPlanta.height - alt_planta;

    ctxPlanta.beginPath();
    ctxPlanta.moveTo(xInicio, yInf);
    ctxPlanta.lineTo(xFim, yInf);
    ctxPlanta.stroke();
    ctxPlanta.restore();
  }
}
	let largura = parseInt(document.getElementById('largura').value, 10);
	let altura = parseInt(document.getElementById('altura').value, 10);

	const saiaEsq    = document.getElementById('saiaEsq').checked;
	const saiaDir    = document.getElementById('saiaDir').checked;
	const fronEsq    = document.getElementById('fronEsq').checked;
	const fronDir    = document.getElementById('fronDir').checked;
	const meia       = document.getElementById('meiaesquad').checked;
	const tpoDuplo   = document.getElementById('tpo_duplo').checked;
	const saiaSup    = document.getElementById('saiaSup')?.checked;
	const saiaInf    = document.getElementById('saiaInf')?.checked;

	const corHexRaw  = '#4169e1'; 

	document.getElementById('inputSaiaDirWrapper').style.display = (saiaEsq || saiaDir) ? 'flex' : 'none';

	const [r,g,b] = hexToRgb(corHexRaw);
	const cor     = `rgb(${r},${g},${b})`;
	const esp     = 2;

	const wSaiaEsq = saiaEsq ? altura : 0;
	const hSaiaEsq = saiaEsq ? Math.floor(largura/6) : 0;
	const wSaiaDir = saiaDir ? altura : 0;
	const hSaiaDir = saiaDir ? Math.floor(largura/6) : 0;

	const wFronEsq = fronEsq ? Math.floor(altura*0.9) : 0;
	const hFronEsq = fronEsq ? Math.floor(largura/6) : 0;
	const wFronDir = fronDir ? Math.floor(altura*0.9) : 0;
	const hFronDir = fronDir ? Math.floor(largura/6) : 0;

	const extraTopo  = Math.max(hFronEsq, hFronDir);
	const extraBaixo = Math.max(hSaiaEsq, hSaiaDir);
	const extraEsq   = wSaiaEsq + (fronEsq ? altura : 0);
	const extraDir   = wSaiaDir + (fronDir ? altura : 0);

	const alturaTampo = extraTopo + altura + extraBaixo + 2*esp;
	const espacoEntre = Math.floor(largura/6) + altura;
	const alturaTotal = alturaTampo + (tpoDuplo ? espacoEntre + alturaTampo : 0);

	const canvas = document.getElementById('canvasPreview');
	canvas.width  = largura + extraEsq + extraDir + 3*esp;
	canvas.height = 120;
	const ctx = canvas.getContext('2d');

	ctx.fillStyle = '#fff';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.lineWidth   = esp;
	ctx.strokeStyle = cor;
	ctx.lineJoin    = 'miter';
	ctx.lineCap     = 'butt';

	const origX = esp + extraEsq;


	function desenharTampo(offsetY, includeExtras = true){
		const origY = esp + extraTopo + offsetY;
		const rightX = origX + largura;
		const baseY  = origY + altura;

		if (includeExtras && saiaEsq){
			const xL = origX - wSaiaEsq + altura;
			const xR = origX + altura;
			const y1 = origY + altura;
			const y2 = y1 + hSaiaEsq;

			if (meia){
				ctx.beginPath(); ctx.moveTo(xL, y1); ctx.lineTo(xL, y2); ctx.stroke();
				ctx.beginPath(); ctx.moveTo(xR, y1); ctx.lineTo(xR, y2); ctx.stroke();

				ctx.beginPath(); ctx.moveTo(origX, origY); ctx.lineTo(origX + altura, origY + altura); ctx.stroke();
				ctx.beginPath(); ctx.moveTo(origX, origY); ctx.lineTo(origX + altura, origY); ctx.stroke();
				ctx.beginPath(); ctx.moveTo(origX, origY); ctx.lineTo(origX, origY + altura); ctx.stroke();

				if (!tpoDuplo){
					ctx.beginPath();
					ctx.moveTo(xL, y2);
					ctx.lineTo(xR, y2);
					ctx.stroke();
				}
			} else {
				ctx.strokeRect(xL, y1, xR - xL, hSaiaEsq);
			}
		}

		const topStart  = (saiaEsq && meia) ? (origX + altura)  : origX;
		const topEnd    = (saiaDir && meia) ? (rightX - altura) : rightX;
		const baseStart = topStart;
		const baseEnd   = topEnd;

		ctx.beginPath(); ctx.moveTo(topStart, origY); ctx.lineTo(topEnd, origY); ctx.stroke();
		if (!(saiaDir && meia)){
			ctx.beginPath(); ctx.moveTo(rightX, origY); ctx.lineTo(rightX, baseY); ctx.stroke();
		}
		ctx.beginPath(); ctx.moveTo(baseStart, baseY); ctx.lineTo(baseEnd, baseY); ctx.stroke();

		ctx.beginPath();
		const leftTopY = (saiaEsq && meia) ? (origY + altura) : origY;
		ctx.moveTo(origX, leftTopY);
		ctx.lineTo(origX, baseY);
		ctx.stroke();

		if (includeExtras && saiaDir){
			const xL = rightX - altura;
			const xR = rightX;
			const y1 = origY + altura;
			const y2 = y1 + hSaiaDir;

			if (meia){
				ctx.beginPath(); ctx.moveTo(xR, y1); ctx.lineTo(xR, y2); ctx.stroke();
				ctx.beginPath(); ctx.moveTo(xL, y1); ctx.lineTo(xL, y2); ctx.stroke();

				ctx.beginPath(); ctx.moveTo(rightX, origY); ctx.lineTo(rightX - altura, origY + altura); ctx.stroke();
				ctx.beginPath(); ctx.moveTo(rightX - altura, origY); ctx.lineTo(rightX, origY); ctx.stroke();
				ctx.beginPath(); ctx.moveTo(rightX, origY); ctx.lineTo(rightX, origY + altura); ctx.stroke();

				if (!tpoDuplo){
					ctx.beginPath();
					ctx.moveTo(xL, y2);
					ctx.lineTo(xR, y2);
					ctx.stroke();
				}
			} else {
				ctx.strokeRect(xL, y1, altura, hSaiaDir);
			}
		}

		if (includeExtras && fronEsq){
			ctx.strokeRect(origX, origY - Math.floor(largura/6), Math.floor(altura*0.9), Math.floor(largura/6));
		}
		if (includeExtras && fronDir){
			ctx.strokeRect(rightX - Math.floor(altura*0.9), origY - Math.floor(largura/6), Math.floor(altura*0.9), Math.floor(largura/6));
		}

		if (!includeExtras && saiaDir && tpoDuplo && meia){
			ctx.beginPath();
			ctx.moveTo(rightX, origY + altura);
			ctx.lineTo(rightX - altura, origY);
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(rightX, origY + altura);
			ctx.lineTo(rightX - altura, origY + altura);
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(rightX, origY);
			ctx.lineTo(rightX, origY + altura);
			ctx.stroke();
		}

		if (!includeExtras && saiaEsq && tpoDuplo && meia){
			ctx.beginPath();
			ctx.moveTo(origX, origY + altura);
			ctx.lineTo(origX + altura, origY);
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(origX, origY + altura);
			ctx.lineTo(origX + altura, origY + altura);
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(origX, origY);
			ctx.lineTo(origX, origY + altura);
			ctx.stroke();
		}
	}


	const canvasCenterY = canvas.height / 2;
	const offsetSuperior = canvasCenterY - (altura / 2) - (esp + extraTopo);

	// --- desenha tampo superior
	desenharTampo(offsetSuperior, true);
// --- LINHA PONTILHADA SUPERIOR (se saiaSup estiver ativado)
const canvasPlanta = document.getElementById('canvasPlanta');
if (canvasPlanta) {
  canvasPlanta.width = canvasPlanta.clientWidth;
  canvasPlanta.height = canvasPlanta.clientHeight;

  const ctxPlanta = canvasPlanta.getContext('2d');
  ctxPlanta.clearRect(0, 0, canvasPlanta.width, canvasPlanta.height);

  if (saiaSup) {
    ctxPlanta.save();
    ctxPlanta.setLineDash([5, 3]);
    ctxPlanta.strokeStyle = '#d63384';
    ctxPlanta.lineWidth = 1;

  // alterei aqui  const dottedYSuperior = esp + extraTopo + 1;
  const dottedYSuperior = esp + 1;
    const startX = esp;
    const endX = canvasPlanta.width - esp;

    ctxPlanta.beginPath();
    ctxPlanta.moveTo(startX, dottedYSuperior);
    ctxPlanta.lineTo(endX, dottedYSuperior);
    ctxPlanta.stroke();
    ctxPlanta.restore();
  }

  if (saiaInf) {
    ctxPlanta.save();
    ctxPlanta.setLineDash([5, 3]);
    ctxPlanta.strokeStyle = '#d63384';
    ctxPlanta.lineWidth = 1;

    const dottedYInferior = canvasPlanta.height - esp - 1;
    const startX = esp;
    const endX = canvasPlanta.width - esp;

    ctxPlanta.beginPath();
    ctxPlanta.moveTo(startX, dottedYInferior);
    ctxPlanta.lineTo(endX, dottedYInferior);
    ctxPlanta.stroke();
    ctxPlanta.restore();
  }
if (fronEsq) {
  ctxPlanta.save();
  ctxPlanta.setLineDash([]); // linha contínua
  ctxPlanta.strokeStyle = 'green'; // cor preta
  ctxPlanta.lineWidth = 3; // linha grossa

  const solidXEsq = esp; // mais afastado da borda esquerda
  const startY = 0;
  const endY = canvasPlanta.height;

  ctxPlanta.beginPath();
  ctxPlanta.moveTo(solidXEsq, startY);
  ctxPlanta.lineTo(solidXEsq, endY);
  ctxPlanta.stroke();
  ctxPlanta.restore();
}
  // Linha pontilhada vertical direita (se saiaDir estiver ativado)
  if (saiaDir) {
    ctxPlanta.save();
    ctxPlanta.setLineDash([5, 3]);
    ctxPlanta.strokeStyle = '#d63384';
    ctxPlanta.lineWidth = 1;

    const dottedXDir = canvasPlanta.width - esp - 1;
    const startY = esp;
    const endY = canvasPlanta.height - esp;

    ctxPlanta.beginPath();
    ctxPlanta.moveTo(dottedXDir, startY);
    ctxPlanta.lineTo(dottedXDir, endY);
    ctxPlanta.stroke();
    ctxPlanta.restore();
  }
if (fronDir) {
  ctxPlanta.save();
  ctxPlanta.setLineDash([]); // linha contínua
  ctxPlanta.strokeStyle = 'green'; // cor preta
  ctxPlanta.lineWidth = 3; // linha grossa

  const solidXDir = canvasPlanta.width - esp;
  const startY = 0;
  const endY = canvasPlanta.height;

  ctxPlanta.beginPath();
  ctxPlanta.moveTo(solidXDir, startY);
  ctxPlanta.lineTo(solidXDir, endY);
  ctxPlanta.stroke();
  ctxPlanta.restore();
}  
// Linha grossa horizontal superior (se fronSup estiver ativado)
if (canvasPlanta && fronSup?.checked) {
	//console.log('canvasPlanta: ',canvasPlanta,' fronSup: ', );
  const ctxPlanta = canvasPlanta.getContext('2d');

  ctxPlanta.save();
  ctxPlanta.setLineDash([]); // linha contínua
  ctxPlanta.strokeStyle = 'green'; // cor preta
  ctxPlanta.lineWidth = 3; // linha grossa

  const solidYSuperior = esp; // posição abaixo da borda superior
  const startX = esp - 2;
  const endX = canvasPlanta.width;

  ctxPlanta.beginPath();
  ctxPlanta.moveTo(startX, solidYSuperior);
  ctxPlanta.lineTo(endX, solidYSuperior);
  ctxPlanta.stroke();
  ctxPlanta.restore();
}
// --- LINHA GROSSA HORIZONTAL INFERIOR (se fronInf estiver ativado)
if (canvasPlanta && fronInf?.checked) {
  ctxPlanta.save();
  ctxPlanta.setLineDash([]); // linha contínua
  ctxPlanta.strokeStyle = 'green'; 
  ctxPlanta.lineWidth = 3; // linha grossa

  const solidYInferior = canvasPlanta.height - esp; // posição acima da borda inferior
  const startX = 0;
  const endX = canvasPlanta.width;

  ctxPlanta.beginPath();
  ctxPlanta.moveTo(startX, solidYInferior);
  ctxPlanta.lineTo(endX, solidYInferior);
  ctxPlanta.stroke();
  ctxPlanta.restore();
}

  // Linha pontilhada vertical esquerda (se saiaEsq estiver ativado)
  if (saiaEsq) {
    ctxPlanta.save();
    ctxPlanta.setLineDash([5, 3]);
    ctxPlanta.strokeStyle = '#d63384';
    ctxPlanta.lineWidth = 1;

    const dottedXEsq = esp + 1;
    const startY = esp;
    const endY = canvasPlanta.height - esp;

    ctxPlanta.beginPath();
    ctxPlanta.moveTo(dottedXEsq, startY);
    ctxPlanta.lineTo(dottedXEsq, endY);
    ctxPlanta.stroke();
    ctxPlanta.restore();
  }
  
  
}
	if (tpoDuplo){
		const alturaTampo = extraTopo + altura + extraBaixo + 2*esp;
		const offsetSegundo = alturaTampo + (Math.floor(largura/6) + altura) - extraBaixo - altura - extraTopo - 4;
		desenharTampo(offsetSuperior + offsetSegundo, false);
	}

	(function positionInputFixedY200(){
		const wrapper = document.getElementById('inputSaiaDirWrapper');
		if (!wrapper || !canvas) return;
		const mostrar = (saiaEsq || saiaDir);
		wrapper.style.setProperty('display', mostrar ? 'flex' : 'none', 'important');
		if (!mostrar) return;

		if (wrapper.parentNode !== document.body) document.body.appendChild(wrapper);

		wrapper.style.setProperty('position', 'absolute', 'important');
		wrapper.style.setProperty('transform', 'none', 'important');
		wrapper.style.setProperty('pointer-events', 'auto', 'important');
		wrapper.style.setProperty('z-index', '2147483647', 'important');
		wrapper.style.setProperty('align-items', 'center', 'important');
		wrapper.style.setProperty('gap', '6px', 'important');

		const rect = canvas.getBoundingClientRect();
		const canvasTopPage = rect.top + window.scrollY;
		const canvasRightPage = rect.right + window.scrollX;

		wrapper.style.setProperty('left', (canvasRightPage + 10) + 'px', 'important');

		const desiredCenterY = canvasTopPage + (canvas.offsetHeight / 2);
		const wrapperRect = wrapper.getBoundingClientRect();
		const wrapperHeight = wrapperRect.height || 0;
		const topAdjusted = desiredCenterY - (wrapperHeight / 2);
		wrapper.style.setProperty('top', Math.max(0, topAdjusted) + 'px', 'important');

		setTimeout(() => {
			wrapper.style.setProperty('left', (canvasRightPage + 10) + 'px', 'important');
			wrapper.style.setProperty('top', Math.max(0, topAdjusted) + 'px', 'important');
			wrapper.style.setProperty('transform', 'none', 'important');
		}, 120);

		setTimeout(() => {
			const wr = document.getElementById('inputSaiaDirWrapper');
			if (!wr) return;
			const newRect = wr.getBoundingClientRect();
			const newH = newRect.height || wrapperHeight;
			wr.style.setProperty('left', (canvasRightPage + 10) + 'px', 'important');
			wr.style.setProperty('top', Math.max(0, desiredCenterY - (newH / 2)) + 'px', 'important');
			wr.style.setProperty('transform', 'none', 'important');
		}, 400);
	})();
}

(function () {
  function updateInputSaiaPosition() {
    const wrapper = document.getElementById('inputSaiaDirWrapper');
    const fronWrapper = document.getElementById('inputFronEsqWrapper');
    const canvas = document.getElementById('canvasPreview');
    const canvasWrapper = document.getElementById('canvasWrapper');
    if (!wrapper || !canvas || !canvasWrapper || !fronWrapper) return;

    const saiaEsq = document.getElementById('saiaEsq')?.checked;
    const saiaDir = document.getElementById('saiaDir')?.checked;
    const fronEsq = document.getElementById('fronEsq')?.checked;
    const fronDir = document.getElementById('fronDir')?.checked;

    // só mostra ou esconde inputSaiaDirWrapper
    const shouldShowSaia = saiaEsq || saiaDir;
    wrapper.style.display = shouldShowSaia ? 'flex' : 'none';

    // só mostra ou esconde inputFronEsqWrapper
    const shouldShowFron = fronEsq || fronDir;
    fronWrapper.style.display = shouldShowFron ? 'flex' : 'none';

    // garantir que estejam dentro do wrapper
    if (!canvasWrapper.contains(wrapper)) {
      canvasWrapper.appendChild(wrapper);
    }
    if (!canvasWrapper.contains(fronWrapper)) {
      canvasWrapper.appendChild(fronWrapper);
    }

    // fixa posição única vez - inputSaiaDirWrapper
    wrapper.style.position = 'absolute';
    wrapper.style.top = '45px';

    wrapper.style.left = (canvas.offsetWidth + 12) + 'px';
    wrapper.style.transform = 'none';
    wrapper.style.visibility = 'visible';
    wrapper.style.opacity = '1';

   // fixa posição única vez - inputFronEsqWrapper
fronWrapper.style.position = 'absolute';
fronWrapper.style.top = '15px'; // fixo
fronWrapper.style.left = (canvas.offsetLeft - fronWrapper.offsetWidth + 8 ) + 'px';
fronWrapper.style.width = '30%'; // metade da largura
fronWrapper.style.transform = 'none';
fronWrapper.style.visibility = 'visible';
fronWrapper.style.opacity = '1';
  }


  updateInputSaiaPosition();
  window.addEventListener('resize', updateInputSaiaPosition);

  ['saiaDir', 'saiaEsq', 'fronEsq', 'fronDir', 'tpo_duplo'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.addEventListener('change', updateInputSaiaPosition);
  });
})();
  // Redesenha ao mudar qualquer controle
  ['cor','largura','altura','saiaEsq','saiaDir','saiaSup','saiaInf','fronInf','fronSup','fronEsq','fronDir','meiaesquad','tpo_duplo'].forEach(id => {
    document.getElementById(id).addEventListener('input', gerarImagem);
    document.getElementById(id).addEventListener('change', gerarImagem);
  });
document.getElementById('HsaiaDir')?.addEventListener('input', (e) => {
  const destino = document.getElementById('HsaiaDirAA');
  if (destino) {
    destino.value = e.target.value;
  }
});
  // Gera ao carregar
  window.addEventListener('load', gerarImagem);
</script>
<script>
function hexToRgb(hex) {
  const bigint = parseInt(hex.replace('#', ''), 16);
  return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
}

function desenharImagemNoCanvasAA() {
  const largura = 250;
  const altura = 9;
  const corHexRaw = '#4169e1';
  const [r, g, b] = hexToRgb(corHexRaw);
  const cor = `rgb(${r},${g},${b})`;
  const esp = 2;

  const meia = document.getElementById('meiaesquad')?.checked;
  const saiaSupAtiva = document.getElementById('saiaSup')?.checked;
  const saiaInfAtiva = document.getElementById('saiaInf')?.checked;

  // ✅ Exibir ou ocultar os dois wrappers
  window.requestAnimationFrame(() => {
    const wrappers = [
      document.getElementById('inputSaiaDirWrapper'),
      document.getElementById('inputSaiaDirWrapperAA')
    ];

    wrappers.forEach(wrapper => {
      if (wrapper) {
        wrapper.style.display = (saiaSupAtiva || saiaInfAtiva) ? 'inline-block' : 'none';
      }
    });
  });

  const canvas = document.getElementById('canvasPreview-aa');
  canvas.width = 390;
  canvas.height = largura - 100;
  //console.log('largura aqui não está com listener: ',largura);
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = cor;
  ctx.lineWidth = esp;
  ctx.lineJoin = 'miter';
  ctx.lineCap = 'butt';

  const x = (canvas.width - largura) / 2;
  const y = (canvas.height - altura) / 2;

  // === Barra horizontal principal ===
  ctx.beginPath();
  let inicioX = x;
  //console.log('largura: ', largura);
  let fimX = x + largura;
 //console.log('fimX: ', fimX);
  if (meia && (saiaSupAtiva || saiaInfAtiva)) {
    if (saiaSupAtiva) inicioX = x;
    if (meia && saiaInfAtiva) fimX = x + largura;
  }

  ctx.moveTo(inicioX, y);
  ctx.lineTo(fimX, y);
  ctx.stroke();

  // Base horizontal (linha inferior)
  ctx.beginPath();
  let baseInicioX = x;
  let baseFimX = x + largura;

  if (meia && saiaSupAtiva) {
    baseInicioX = x + altura;
  }

  if (meia && saiaInfAtiva) {
    baseFimX = x + largura - altura;
  }

  ctx.moveTo(baseInicioX, y + altura);
  ctx.lineTo(baseFimX, y + altura);
  ctx.stroke();

  // Fechamento ponta direita (saiaSup && meia)
  if (meia && saiaSupAtiva) {
    ctx.beginPath();
    ctx.moveTo(x + largura, y);
    ctx.lineTo(x + largura, y + altura);
    ctx.stroke();
  }

  // Fechamento ponta esquerda (saiaInf && !saiaSup && meia)
  if (meia && saiaInfAtiva && !saiaSupAtiva) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x, y + altura);
    ctx.stroke();
  }

  // Laterais barra horizontal
  if (!(meia && (saiaSupAtiva || saiaInfAtiva))) {
    ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y + altura); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(x + largura, y); ctx.lineTo(x + largura, y + altura); ctx.stroke();
  }

  // Diagonais
  if (meia && (saiaSupAtiva || saiaInfAtiva)) {
    if (!(meia && saiaInfAtiva && !saiaSupAtiva)) {
      ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + altura, y + altura); ctx.stroke();
    }
    if (!(saiaSupAtiva && meia)) {
      ctx.beginPath(); ctx.moveTo(x + largura, y); ctx.lineTo(x + largura - altura, y + altura); ctx.stroke();
    }
  }

  // === Saia Superior (vertical esquerda) ===
  if (saiaSupAtiva) {
    const hVertical = largura / 4;
    const xV = x;
    const yV = meia ? y : y + altura;

    if (meia) {
      ctx.beginPath(); 
      ctx.moveTo(xV, yV); 
      ctx.lineTo(xV, yV + hVertical); 
      ctx.stroke();

      const innerX = xV + altura;
      const innerEnd = yV + hVertical;
      const bottomBar = y + altura;

      if (innerEnd > bottomBar) {
        ctx.beginPath(); 
        ctx.moveTo(innerX, bottomBar); 
        ctx.lineTo(innerX, innerEnd); 
        ctx.stroke();
      }

      ctx.beginPath(); 
      ctx.moveTo(xV, yV + hVertical); 
      ctx.lineTo(xV + altura, yV + hVertical); 
      ctx.stroke();
    } else {
      ctx.strokeRect(xV, yV, altura, hVertical);
    }
  }

  // === Saia Inferior (vertical direita) ===
  if (saiaInfAtiva) {
    const hVertical = largura / 4;
    const xV = x + largura - altura;
    let yV = meia ? y : y + altura;

    if (!meia) yV = y + altura;

    if (meia) {
      ctx.beginPath(); ctx.moveTo(xV, yV + altura); ctx.lineTo(xV, yV + hVertical); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(xV + altura, yV); ctx.lineTo(xV + altura, yV + hVertical); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(xV + altura, yV); ctx.lineTo(xV, yV + altura); ctx.stroke();

      if (saiaInfAtiva && meia) {
        ctx.beginPath();
        ctx.moveTo(xV + altura, yV + hVertical);
        ctx.lineTo(xV + altura, yV + altura);
        ctx.stroke();
      }

      if (saiaSupAtiva) {
        ctx.beginPath();
        ctx.moveTo(xV, yV + hVertical);
        ctx.lineTo(xV + altura, yV + hVertical);
        ctx.stroke();
      }
    } else {
      ctx.strokeRect(xV, yV, altura, hVertical);
    }
  }

  // ✅ Posicionar inputSaiaDirWrapperAA ao lado direito da saia
  const inputWrapperAA = document.getElementById('inputSaiaDirWrapperAA');
  if (inputWrapperAA && (saiaSupAtiva || saiaInfAtiva)) {
    const hVertical = largura / 4;
    const posX = x + largura + 10; // 10px à direita da saia
    const posY = y + altura + (hVertical / 2) - 12; // centralizado verticalmente

    inputWrapperAA.style.position = 'absolute';
    inputWrapperAA.style.left = `${posX}px`;
    inputWrapperAA.style.top = `${posY}px`;
    inputWrapperAA.style.display = 'inline-block';
  } else if (inputWrapperAA) {
    inputWrapperAA.style.display = 'none';
  }
}

// Atualiza meiaesquad automaticamente
function atualizarMeiaEsquad() {
  const saiaSup = document.getElementById('saiaSup').checked;
  const saiaInf = document.getElementById('saiaInf').checked;

  if (!saiaSup && !saiaInf) {
    document.getElementById('meiaesquad').checked = false;
  }
}

// Listeners
window.addEventListener('load', desenharImagemNoCanvasAA);
['meiaesquad', 'saiaSup', 'saiaInf'].forEach(id =>
  document.getElementById(id)?.addEventListener('change', desenharImagemNoCanvasAA)
);

// Atualiza meiaesquad
['saiaSup', 'saiaInf'].forEach(id =>
  document.getElementById(id)?.addEventListener('change', () => {
    atualizarMeiaEsquad();
    desenharImagemNoCanvasAA();
  })
);
document.getElementById('HsaiaDirAA')?.addEventListener('input', (e) => {
  const destino = document.getElementById('HsaiaDir');
  if (destino) {
    destino.value = e.target.value;
  }
});
</script>



</body>
</html>