Jump to content
mamotinho

Calcular quantos quadros 5x5cm cabe em uma folha base de A4 simulando total.

By mamotinho, in PHP

Recommended Posts

mamotinho    0

mamotinho
Posted

Olá, gostaria de saber se alguém teria base ou ideia de como posso está fazendo um sistema semelhante a esse, trabalho com tamanhos em folhas A4,A3,A5 e queria determinar por quadrados quanto cabe na folha.
Exemplo
Etiquetas tamanho 5x5cm, caberia quantas unidades dentro de uma folha de 21x29.7cm

Ele me daria a quantidade de quadros de 5x5cm dentro do tamanho da folha A4

Screenshot_1.png

Share this post

Link to post
Share on other sites

mamotinho    0

mamotinho
Posted

Na verdade o problema não é a matemática, e sim o modo de aplicar, algo semelhante usando PHP, os quadros em verde eles é atualizado de acordo com o tamanho digitado. ele insere os quadros e já contabiliza quantos cabem na folha.

Share this post

Link to post
Share on other sites

washalbano    54

washalbano
Posted

html
  

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<main>
  <div class="distribution-calc-wrapper">
    <h1>Simule</h1>
    <small>Insira abaixo</small>
    <div class="form-wrapper">
      <div>
        <label>Altura <small>(mm)</small></label>
        <input type="number" name="altura" step="1" min="1" value="10">
      </div>
      <div>
        <label>Largura <small>(mm)</small></label>
        <input type="number" name="largura" step="1" min="1" value="10">
      </div>
      <div>
        <label>Quantidade</label>
        <input type="number" name="quantidade" step="1" min="1" value="10">
      </div>
    </div>
    <div class="messenger"></div>
    <div class="stage"></div>
  </div>
</main>
<script src="assets/js/app.js"></script>
</body>
</html>

css 

* {
    box-sizing: border-box;
}

main {
    max-width: 480px;
    border: thin solid #ccc;
    margin: 0 auto;
    position: relative;
}

.form-wrapper, .messenger, .stage {
    display: flex;
    margin-top: 12px;
}

main, .form-wrapper div, .messenger, .stage {
    padding: 12px;
}

.messenger {
    background-color: #ccc;
    display: block
}

.messenger span {
    font-weight: bold;
    color: green;
}

.form-wrapper div {
    padding: 12px;
    max-width: 33.33%;
    vertical-align: baseline;
}

.stage {
    border: 2px solid red;
    width: 210mm;
    height: 297mm;
    transform: scale(.57);
    transform-origin: top left;
    position: absolute;
    top: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
}

input {
    padding: 6px;
    display: block;
    max-width: 100%;
}

.adesivo {
    background-color: green;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    font-size: 2rem;
    color: white;
    border: 2px solid white;
}

js 

const distributionCalc = document.querySelector('.distribution-calc-wrapper')
const formWrapper = distributionCalc.querySelector('.form-wrapper')
const messenger = distributionCalc.querySelector('.messenger')
const stage = distributionCalc.querySelector('.stage')

// margem de 5mm
const margem = 5;

// dados da página
const page = {
    // A4
    altura : 297 - (2 * margem),
    largura: 210 - (2 * margem),
}

page.area = page.altura * page.largura

page.orientation = page.largura < page.altura ? 'portrait' : 'landscape'

// dados para do adesivo
let altura = 10;
let largura = 10;
let quantidade = 10;

formWrapper.addEventListener('input', (e) => {
    const element = e.target;

    if (element.matches('[name="altura"]')) {
        altura = element.value
    } else if (element.matches('[name="largura"]')) {
        largura = element.value
    } else if (element.matches('[name="quantidade"]')) {
        quantidade = element.value
    }

    const adesivo = {
        altura,
        largura,
        area: altura * largura
    }

    // calcular quantos adesivos cabem em uma página portrait
    // Divide-se a largura maior pela largura menor, desconsiderando as casas decimais
    const divisaoLarguras = Math.floor(page.largura / adesivo.largura)
    // Divide-se a altura maior pela altura menor, desconsiderando as casas decimais
    const divisaoAlturas = Math.floor(page.altura / adesivo.altura)
    // Multiplica-se o resultado da divisão das larguras pelo resultado da divisão das alturas
    const maxItemsPerPage = divisaoLarguras * divisaoAlturas;

    const adesivoElement = document.createElement('div');
    adesivoElement.classList.add('adesivo');
    adesivoElement.style.width = `${largura}mm`
    adesivoElement.style.height = `${altura}mm`

    stage.innerHTML = '';

    const maxItems = quantidade > maxItemsPerPage ? maxItemsPerPage : quantidade

    for (let i = 1; i <= maxItems; i++) {

        adesivoElement.textContent = i

        stage.appendChild(adesivoElement.cloneNode(true))
    }

    const quantidadeDeFolhas = Math.ceil(quantidade / maxItemsPerPage);

    messenger.innerHTML = `Quantidade necessária de folhas: <span>${quantidadeDeFolhas}</span><br>
    Quantidade máxima de adesivos por folha: <span>${maxItemsPerPage}</span>`

})

Só não tenho certeza se acertei a matemática que o sr. precisa
9DPg70sGS6mk9VHZgzD_TA.png

Share this post

Link to post
Share on other sites

Marcos_imasters    288

Marcos_imasters
Posted 
const distributionCalcWrapper = document.querySelector('.distribution-calc-wrapper');
const formWrapper = distributionCalcWrapper.querySelector('.form-wrapper');
const messenger = distributionCalcWrapper.querySelector('.messenger');
const stage = distributionCalcWrapper.querySelector('.stage');

const paper = {
  pageHeight: 297 - 2 * 5,
  pageWidth: 210 - 2 * 5,
};

const calculateMaxStickersPerPage = (page, sticker) => {
  return Math.floor(page.pageWidth / sticker.width) * Math.floor(page.pageHeight / sticker.height);
};

const createStickerElement = (sticker, number) => {
  const stickerElement = document.createElement('div');
  stickerElement.className = 'adesivo';
  stickerElement.style.width = `${sticker.width}mm`;
  stickerElement.style.height = `${sticker.height}mm`;
  stickerElement.textContent = number;
  return stickerElement;
};

const updateMessage = (requiredSheets, maxStickersPerPage) => {
  messenger.innerHTML = `Quantidade necessária de folhas: <span>${requiredSheets}</span><br>
    Quantidade máxima de adesivos por folha: <span>${maxStickersPerPage}</span>`;
};

const calculateAndDisplay = () => {
  const quantity = +formWrapper.querySelector('[name="quantidade"]').value;
  const margin = +formWrapper.querySelector('[name="margem"]').value;
  const sticker = {
    height: +formWrapper.querySelector('[name="altura"]').value,
    width: +formWrapper.querySelector('[name="largura"]').value,
  };

  const maxStickersPerPage = calculateMaxStickersPerPage(paper, sticker);

  stage.innerHTML = '';
  stage.style.setProperty('--margin', `${margin}mm`);
  stage.style.setProperty('top', `calc(100% + ${margin / 1.475}mm)`);

  for (let i = 1; i <= quantity; i++) {
    const stickerElement = createStickerElement(sticker, i);
    stage.appendChild(stickerElement);
  }

  const requiredSheets = Math.ceil(quantity / maxStickersPerPage);
  updateMessage(requiredSheets, maxStickersPerPage);

  document.querySelector('.logger').innerHTML = JSON.stringify(
    { sticker, paper, quantityWidth: maxStickersPerPage, quantityHeight: maxStickersPerPage },
    null,
    1
  );
};

formWrapper.addEventListener('input', calculateAndDisplay);

calculateAndDisplay();

se esta dando error no firefox mostre o error

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing PHP

  • Similar Content

    • Rafael Castelhano
      Adiciona entrada em dicionario por variavel
      By Rafael Castelhano
      Olá, quero preencher um dict dinamicamente onde a chave é uma string multidimencional no dict, ex:
      var dict = {} var path = 'a.b.c' dict[path] = 55 // isso faz dict ficar desta forma {'a.b.c': 55} // mais quero que fique assim {a: {b: {c: 55}}} Como consigo alterar desta forma? 
    • violin101
      Javascript - Arredondar Valor para cima
      By violin101
      Caros amigos, saudações.
       
      Estou com um problema de cálculo que não estou conseguindo resolver.
       
      Tenho uma rotina em Javascript que faz o seguinte cálculo qtde x vrUnit = total.
       
      qtde   x  vrUnit    =    total
      1,23   x  1,00       =    1,23    << até aqui tudo bem.
       
      o problema seria fazer o arredondamento para cima para impedir de fazer este cálculo:
      0,01 x 0,01 = 0,0001
       
      para digitar o valor estou utilizando esta função:
       
      /*Esta função quando o usuário digitar o valor aparece * 1,23 */ function formataDigitacao(i) { //Adiciona os dados para a másrcara var decimais = 2; var separador_milhar = '.'; var separador_decimal = ','; var decimais_ele = Math.pow(10, decimais); var thousand_separator = '$1'+separador_milhar; var v = i.value.replace(/\D/g,''); v = (v/decimais_ele).toFixed(decimais) + ''; var splits = v.split("."); var p_parte = splits[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, thousand_separator); (typeof splits[1] === "undefined") ? i.value = p_parte : i.value = p_parte+separador_decimal+splits[1]; } /*Esta função faz a multiplicação entre Valor Unitário X Quantidade *faz a multiplicação correta */ function calcProd(){ //Obter valor digitado do produto var prod_qtde = document.getElementById("qtde").value; //Remover ponto e trocar a virgula por ponto while (prod_qtde.indexOf(".") >= 0) { prod_qtde = prod_qtde.replace(".", ""); } prod_qtde = prod_qtde.replace(",","."); //Obter valor digitado do produto var valor_unit = document.getElementById("vlrunit").value; //Remover ponto e trocar a virgula por ponto while (valor_unit.indexOf(".") >= 0) { valor_unit = valor_unit.replace(".", ""); } valor_unit = valor_unit.replace(",","."); //Calcula o Valor do Desconto if (valor_unit > 0 && prod_qtde > 0) { calc_total_produto = (parseFloat(valor_unit) * parseFloat(prod_qtde)); var numero = calc_total_produto.toFixed(2).split('.'); //<<== aqui faço o arredondamento das casas decimais de 1,234 p/ 1,23 numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.'); document.getElementById("vlrtotal").value = numero.join(','); } else { if (valor_unit > 0) { document.getElementById("vlrtotal").value = document.getElementById("vlrunit").value; } else { document.getElementById("vlrtotal").value = "0,00"; } } } Grato,
       
      Cesar
    • violin101
      PHP - Atualizar INPUT com função moeda
      By violin101
      Caros amigos, saudações.
       
      Estou com uma dúvida de validação de INPUT com função moeda.
       
      Tenho um input onde o usuário digita um valor qualquer, por exemplo: 1.234,56
      o problema é quando precisa atualizar o valor.
       
      Quando o usuário atualizar o input fica assim: 1.234,
       
      como faço para atualizar as casas decimais, conforme o valor for sendo alterado ?
       
      o input está assim:
       
      <div class="col-md-2"> <label for="">Valor Unitário</label> <input type="text" class="form-control" id="estoqprod" name="estoqprod" style="font-size:15px; font-weight:bold; width:100%; text-align:center;" placeholder="0,00" OnKeyUp="calcProd();" onkeypress="return(FormataMoeda(this,'.',',',event))" > </div>  
      a função para formatar o input para moeda está assim:
      obs.: a Função CalcProd está executando corretamente
      function calcProd(){ //Obter valor digitado do produto var estoq_prod = document.getElementById("estoqprod").value; //Remover ponto e trocar a virgula por ponto while (estoq_prod.indexOf(".") >= 0) { estoq_prod = estoq_prod.replace(".", ""); } estoq_prod = estoq_prod.replace(",","."); //Obter valor digitado do produto var prod_qtde = document.getElementById("qtde").value; //Remover ponto e trocar a virgula por ponto while (prod_qtde.indexOf(".") >= 0) { prod_qtde = prod_qtde.replace(".", ""); } prod_qtde = prod_qtde.replace(",","."); //Calcula o Valor do Desconto if (prod_qtde > 0 && estoq_prod > 0) { calc_total_produto = parseFloat(prod_qtde) - parseFloat(estoq_prod); var numero = calc_total_produto.toFixed(2).split('.'); //Calculo para não deixar GRAVAR valores negativos if (calc_total_produto < 0 ) { numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.') * -1; document.getElementById("qtdeTotal").value = numero.join(','); } else { numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.'); document.getElementById("qtdeTotal").value = numero.join(','); } } else { if (estoq_prod > 0) { document.getElementById("qtdeTotal").value = document.getElementById("estoqprod").value; } else { document.getElementById("qtdeTotal").value = "0,00"; } } } /*---Função para Formatar Campo para Moeda [R$]---*/ function FormataMoeda(objTextBox, SeparadorMilesimo, SeparadorDecimal, e){ var sep = 0; var key = ''; var i = j = 0; var len = len2 = 0; var strCheck = '0123456789'; var aux = aux2 = ''; var whichCode = (window.Event) ? e.which : e.keyCode; if (whichCode == 13) return true; key = String.fromCharCode(whichCode); // Valor para o código da Chave if (strCheck.indexOf(key) == -1) return false; // Chave inválida len = objTextBox.value.length; for(i = 0; i < len; i++) if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal)) break; aux = ''; for(; i < len; i++) if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux += objTextBox.value.charAt(i); aux += key; len = aux.length; if (len == 0) objTextBox.value = ''; if (len == 1) objTextBox.value = '0'+ SeparadorDecimal + '0' + aux; if (len == 2) objTextBox.value = '0'+ SeparadorDecimal + aux; if (len > 2) { aux2 = ''; for (j = 0, i = len - 3; i >= 0; i--) { if (j == 3) { aux2 += SeparadorMilesimo; j = 0; } aux2 += aux.charAt(i); j++; } objTextBox.value = ''; len2 = aux2.length; for (i = len2 - 1; i >= 0; i--) objTextBox.value += aux2.charAt(i); objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len); } return false; }  
      Grato,
       
      Cesar
    • violin101
      PHP - Atualizar INPUT com função moeda
      By violin101
      Caros amigos, saudações.
       
      Estou com uma dúvida de validação de INPUT com função moeda.
       
      Tenho um input onde o usuário digita um valor qualquer, por exemplo: 1.234,56
      o problema é quando precisa atualizar o valor.
       
      Quando o usuário atualizar o input fica assim: 1.234,
       
      como faço para atualizar as casas decimais, conforme o valor for sendo alterado ?
       
      o input está assim:
       
      <div class="col-md-2"> <label for="">Valor Unitário</label> <input type="text" class="form-control" id="estoqprod" name="estoqprod" style="font-size:15px; font-weight:bold; width:100%; text-align:center;" placeholder="0,00" OnKeyUp="calcProd();" onkeypress="return(FormataMoeda(this,'.',',',event))" > </div>  
      a função para formatar o input para moeda está assim:
      obs.: a Função CalcProd está executando corretamente
      function calcProd(){ //Obter valor digitado do produto var estoq_prod = document.getElementById("estoqprod").value; //Remover ponto e trocar a virgula por ponto while (estoq_prod.indexOf(".") >= 0) { estoq_prod = estoq_prod.replace(".", ""); } estoq_prod = estoq_prod.replace(",","."); //Obter valor digitado do produto var prod_qtde = document.getElementById("qtde").value; //Remover ponto e trocar a virgula por ponto while (prod_qtde.indexOf(".") >= 0) { prod_qtde = prod_qtde.replace(".", ""); } prod_qtde = prod_qtde.replace(",","."); //Calcula o Valor do Desconto if (prod_qtde > 0 && estoq_prod > 0) { calc_total_produto = parseFloat(prod_qtde) - parseFloat(estoq_prod); var numero = calc_total_produto.toFixed(2).split('.'); //Calculo para não deixar GRAVAR valores negativos if (calc_total_produto < 0 ) { numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.') * -1; document.getElementById("qtdeTotal").value = numero.join(','); } else { numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.'); document.getElementById("qtdeTotal").value = numero.join(','); } } else { if (estoq_prod > 0) { document.getElementById("qtdeTotal").value = document.getElementById("estoqprod").value; } else { document.getElementById("qtdeTotal").value = "0,00"; } } } /*---Função para Formatar Campo para Moeda [R$]---*/ function FormataMoeda(objTextBox, SeparadorMilesimo, SeparadorDecimal, e){ var sep = 0; var key = ''; var i = j = 0; var len = len2 = 0; var strCheck = '0123456789'; var aux = aux2 = ''; var whichCode = (window.Event) ? e.which : e.keyCode; if (whichCode == 13) return true; key = String.fromCharCode(whichCode); // Valor para o código da Chave if (strCheck.indexOf(key) == -1) return false; // Chave inválida len = objTextBox.value.length; for(i = 0; i < len; i++) if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal)) break; aux = ''; for(; i < len; i++) if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux += objTextBox.value.charAt(i); aux += key; len = aux.length; if (len == 0) objTextBox.value = ''; if (len == 1) objTextBox.value = '0'+ SeparadorDecimal + '0' + aux; if (len == 2) objTextBox.value = '0'+ SeparadorDecimal + aux; if (len > 2) { aux2 = ''; for (j = 0, i = len - 3; i >= 0; i--) { if (j == 3) { aux2 += SeparadorMilesimo; j = 0; } aux2 += aux.charAt(i); j++; } objTextBox.value = ''; len2 = aux2.length; for (i = len2 - 1; i >= 0; i--) objTextBox.value += aux2.charAt(i); objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len); } return false; }  
      Grato,
       
      Cesar
    • violin101
      PHP - Capturar ID do SELECT
      By violin101
      Caros amigos, saudações.
       
      Desculpa postar minha dúvida, fiz várias pesquisa mas não tive sucesso.
       
      Como faço para capturar o ID do SELECT selecionado e passar para base_url ?
       
      Exemplo:
      após selecionar o ID passar para <?php echo base_url();?>estoque/ajuste/adicionar/ <== passar o ID aqui.
       
      <div class="col-md-6"> <label for="tipoDepart" class="control-label">Departamento:</label> <select name="tipoDepart" id="tipoDepart" style="width:100%;" class="form-control"> <option value="">Selecione um Departamento</option> <?php foreach ($dprts as $dp) { echo '<option value="'.$dp->idDepartamento.'">'.$dp->departamento.'</option>'; } ?> </select> </div> <div class="col-md-6"> <div class="card card-entrad"> <div class="card-header"> <label class="card-tlentr">Entrada - Estoque</label> </div> <div class="card-body"> <div style="text-align:center;"> <a href="<?php echo base_url();?>estoque/ajuste/adicionar/" <== COMO PASSO O ID SELECIONADO AQUI, PARA ABRIR A PÁGINA COM O ID DO DPTO ? class="btn btn-cinza">Adicionar</a> </div> </div> </div> </div>  
      Observação: preciso capturar e passar o ID para gerar TABELA referente a cada departamento.
       
      Grato,
       
      Cesar
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept