Jump to content
mamotinho

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

Recommended Posts

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

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

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

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

  • Similar Content

    • By Caio Vargas
      Fala pessoal tudo bem
      Estou criando um site para o cliente e ele me pediu para colocar um tradutor ao clicar nas bandeiras
      porem eu nao queria fazer uma pagina para cada traduçao eu queria fazer tipo usando o google Translate 
       
      alguem tem alguma sugetao de como posso fazer ou um exemplo 
      grato
    • By Wanderson Moreira
      Bom dia,
      alguém pode me ajudar com uma situação?
      estou utilizando um script pra fazer o carregamento assíncrono do site.
      var links = document.querySelectorAll('a'); function handleClick(event) { event.preventDefault(); fetchPage(event.target.href); window.history.pushState(null, null, event.target.href); window.scrollTo(0, 0); } async function fetchPage(url) { document.querySelector('.content'); var pageResponse = await fetch(url); var pageText = await pageResponse.text(); replaceContent(pageText); } function replaceContent(newText) { var newHtml = document.createElement('div'); newHtml.innerHTML = newText; var oldContent = document.querySelector('.content'); var newContent = newHtml.querySelector('.content'); oldContent.innerHTML = newContent.innerHTML; document.title = newHtml.querySelector('title').innerText; } window.addEventListener('popstate', () => { fetchPage(window.location.href); }) links.forEach(link => { link.addEventListener('click', handleClick); }) O problema em questão é que, o conteúdo da pagina que é carregado dentro da div content não funciona corretamente
       
      os scripts em javascript não são executados;
      os links de navegação da pagina não funcionam de maneira assincrona, diferente dos links de navegação do menu
       
       
    • By Jack Oliveira
      Ola pessoal eu gostaria de saber se teria como e se sim, como fazer para pegar lat e lng quando fazer a busca do endereco pelo cep,
      Tentei buscar uns exemplos de como poderia ser feito, porem não obtive resultado que precisava.
       
      o código a baixo ele funciona sem problema, porem so precisaria pegar esta LAT e LNG 
       
       
      //Buscando endereco plo CEP function limpa_formulário_cep() { //Limpa valores do formulário de cep. document.getElementById('rua').value=(""); document.getElementById('bairro').value=(""); document.getElementById('cidade').value=(""); document.getElementById('uf').value=(""); } function meu_callback(conteudo) { if (!("erro" in conteudo)) { //Atualiza os campos com os valores. document.getElementById('rua').value=(conteudo.logradouro); document.getElementById('bairro').value=(conteudo.bairro); document.getElementById('cidade').value=(conteudo.localidade); document.getElementById('uf').value=(conteudo.uf); } //end if. else { //CEP não Encontrado. limpa_formulário_cep(); alert("CEP não encontrado."); } } function pesquisacep(valor) { //Nova variável "cep" somente com dígitos. var cep = valor.replace(/\D/g, ''); //Verifica se campo cep possui valor informado. if (cep != "") { //Expressão regular para validar o CEP. var validacep = /^[0-9]{8}$/; //Valida o formato do CEP. if(validacep.test(cep)) { document.getElementById('cep').value = cep.substring(0,5) +"-" +cep.substring(5); //Preenche os campos com "..." enquanto consulta webservice. document.getElementById('rua').value="..."; document.getElementById('bairro').value="..."; document.getElementById('cidade').value="..."; document.getElementById('uf').value="..."; //Cria um elemento javascript. var script = document.createElement('script'); //Sincroniza com o callback. script.src = 'https://viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback'; //Insere script no documento e carrega o conteúdo. document.body.appendChild(script); } //end if. else { //cep é inválido. limpa_formulário_cep(); alert("Formato de CEP inválido."); } } //end if. else { //cep sem valor, limpa formulário. limpa_formulário_cep(); } }; </script>  
      <?php // Map($Width, $Height, $StringNome, $StringEndereco, $StringCidade) $LAT = '37.86926'; $LNG = '-122.254811'; ?> <script> // gmap for street view panorama = GMaps.createPanorama({ el: '#MapCanvasStreet', lat : <?= $LAT; ?>, lng : <?= $LNG; ?>, }); </script> Desde já fico grato!!
    • By Kelven
      Bom dia pessoal tudo bem?
      Então, estou trabalhando em um site em php e preciso usar a api do facebook para obter o feed do instagram, porém a chave token é um conteúdo muito sensível, então decidi fazer em php para ela não ficar disponível do lado do cliente. Alguém sabe me dizer se é possível fazer isso? Porque eu pesquisando no google só achei maneiras de fazer em javascript.
    • By gersonab
      Boa noite, tenho pesquisado porém não encontrei, então vamos lá.
      tenho uma lista de itens ( documentos ) cadastrados no banco de dados e os seus respectivos arquivos em uma pasta, se eu preciso de um deles clico e faço o download deste, no entanto como fazer para fazer o download de vários ao selecionar com checkbox os que eu quero ?
      desculpem por não postar nenhum código, mas é que não estou sabendo como fazer os downloads de vários.
      Qual o procedimento correto ?
       
×

Important Information

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