Scheda Lavorazione CNC by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<nav>Definisce un menu di navigazione
langSpecifica la lingua del contenuto di un elemento
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
minImposta il valore numerico o temporale minimo per un elemento input
<meta>Definisce i meta dati di una pagina web.
sizeDetermina le dimensioni dell'elemento in base al valore contenuto

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

La Vita di Pablo Picasso

inserimento immagini in un testo

esercizio HTML modalità interna

Form di Registrazione

esercitazione n1

Pro Vercelli LB(2)

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Scheda Lavorazione CNC</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

<style>

body{
font-family:Arial;
background:#e9e9e9;
padding:20px;
}

.controls{
width:210mm;
margin:auto;
margin-bottom:10px;
display:flex;
gap:10px;
}

button{
padding:8px 14px;
border:none;
background:#2c7be5;
color:white;
border-radius:5px;
cursor:pointer;
}

.page{
width:210mm;
height:297mm;
background:white;
margin:auto;
padding:10mm;
box-shadow:0 0 10px rgba(0,0,0,0.2);
display:flex;
flex-direction:column;
box-sizing:border-box;
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
}

#title{
font-size:20px;
font-weight:bold;
outline:none;
}

.logo img{
height:60px;
}

.description{
margin-top:6px;
}

.description textarea{
width:100%;
height:40px;
resize:vertical;
padding:5px;
border:1px solid #aaa;
border-radius:4px;
}

.top{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px;
margin:10px 0;
}

.field{
display:flex;
flex-direction:column;
font-size:13px;
}

input{
padding:5px;
border:1px solid #aaa;
border-radius:4px;
}

.pdf-container{
flex-grow:1;
border:1px solid #ccc;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}

canvas{
max-width:100%;
max-height:100%;
}

.bottom{
margin-top:10px;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.panel{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}

.panel input{
width:65px;
}

.tools select{
height:80px;
}

#printTools{
display:none;
padding-left:20px;
}

.extra{
margin-top:8px;
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}
.extraColumn{
display:flex;
flex-direction:column;
gap:6px;
margin-top:8px;
}

.extraColumn label{
font-size:13px;
}
.maxwd{
  max-width:60px;
}

#printFiles{
display:none;
padding-left:18px;
margin-top:3px;
}

@media print{

.description textarea{
border:none;
}

#fileNome{
display:none;
}

#printFiles{
display:block;
}

}
.flags{
margin-top:8px;
}

.warning{
color:red;
font-weight:bold;
}

#printFlags{
display:none;
margin-top:6px;
font-weight:bold;
}

@media print{

body{
background:white;
padding:0;
}

.controls{
display:none;
}

.page{
box-shadow:none;
margin:0;
border:2px solid black;
}

.logo{
display:none;
}

input, textarea{
border:none;
border-bottom:1px solid black;
padding:2px;
}

.tools select{
display:none;
}

.flags{
display:none;
}

#printTools{
display:block;
}

#printFlags{
display:block;
}

.hidePrint{
display:none !important;
}

.pdf-container{
border:1px solid black;
}

}

</style>
</head>

<body>

<div class="controls">
<button onclick="importPDF()">? Importa PDF</button>
<button onclick="stampa()">? Stampa</button>
<input type="file" id="fileInput" accept="application/pdf" hidden>
</div>

<div class="page">

<div class="header">

<div id="title" contenteditable="true">
Titolo documento
</div>

<div class="logo">
<img src="img.jpg">
</div>

</div>

<div class="description">
<textarea id="descrizione" placeholder="Descrizione"></textarea>
</div>

<div class="top">

<div class="field">
<label>Ordine/Commessa</label>
<input id="commessa" type="text">
</div>

<div class="field">
<label>N° lavorazioni</label>
<input id="lavorazioni" type="number">
</div>

<div class="field">
<label>Tempo lavorazione (ore)</label>
<input id="tempo" type="text">
</div>

</div>

<div class="pdf-container">
<canvas id="pdfCanvas"></canvas>
</div>

<div class="bottom">

<div>

<div class="panel">

  <strong>Misure pannello (mm):</strong>
  <div>
    L <input id="larghezza" type="number">
H <input id="altezza" type="number">
Sp <input id="spessore" type="number">

  </div>
</div>

<div class="extraColumn">

<div>
<label>Profondità Max (mm)</label>
<input id="profondita" type="text" class="maxwd">
</div>

<div>
<label>Scala</label>
<input id="scala" type="text" class="maxwd">
</div>

<div>
<label>File</label>
<input id="fileNome" type="text" placeholder="file1.iso, file2.jpg" title="dividi i file con la virgola"> 
<ul id="printFiles"></ul>
</div>

</div>
<div class="flags">

<label><input id="urgente" type="checkbox"> URGENTE</label>

<label class="warning">
<input id="attenzione" type="checkbox"> ATTENZIONE
</label>

<label>
<input id="verifica" type="checkbox"> verificare misure!
</label>

</div>

<div id="printFlags"></div>

</div>

<div class="tools">

<label>Punte / Utensili utilizzati</label>

<select id="toolsSelect" multiple>

<option>Fresa Ø4 candela</option>
<option>Fresa Ø6 candela</option>
<option>Fresa Ø6 sferica</option>
<option>Fresa Ø10 candela</option>
<option>Fresa Ø12 candela</option>
<option>Fresa Ø19 candela</option>
<option>Punta Ø60 </option>
<option>Punta GOLA 26 mm</option>
<option>Punta a V 91°</option>
<option>Punta raggiatura 9.5 mm</option>
<option>CMT set pantografatura mod.1</option>
<option>CMT set pantografatura mod.2</option>
<option>CMT set pantografatura mod.3</option>
<option>vedi disegno</option>

</select>

<ul id="printTools"></ul>

</div>

</div>

</div>

<script>

function stampa(){

generaListaUtensili();
generaFlags();
generaListaFile();
gestisciCampiVuoti();

setTimeout(()=>window.print(),100);

}

function gestisciCampiVuoti(){

document.querySelectorAll("input, textarea").forEach(el=>{

if(el.type==="checkbox") return;

if(el.value.trim()===""){
el.parentElement.classList.add("hidePrint");
}else{
el.parentElement.classList.remove("hidePrint");
}

});

}

function generaListaUtensili(){

const select=document.getElementById("toolsSelect");
const list=document.getElementById("printTools");

list.innerHTML="";

Array.from(select.selectedOptions).forEach(opt=>{
const li=document.createElement("li");
li.textContent=opt.text;
list.appendChild(li);
});

}
function generaListaFile(){

const input=document.getElementById("fileNome").value;
const list=document.getElementById("printFiles");

list.innerHTML="";

if(!input.trim()) return;

const files=input.split(",");

files.forEach(f=>{

const li=document.createElement("li");
li.textContent=f.trim();
list.appendChild(li);

});

}

function generaFlags(){

const flags=document.getElementById("printFlags");
flags.innerHTML="";

if(document.getElementById("urgente").checked){
flags.innerHTML+="<div>⚠ URGENTE</div>";
}

if(document.getElementById("attenzione").checked){
flags.innerHTML+="<div style='color:red'>⚠ ATTENZIONE</div>";
}

if(document.getElementById("verifica").checked){
flags.innerHTML+="<div>✔ Verificare misure</div>";
}

}

function importPDF(){
document.getElementById("fileInput").click();
}

document.getElementById("fileInput").addEventListener("change",function(){

const file=this.files[0];
const reader=new FileReader();

reader.onload=function(){

const typedarray=new Uint8Array(this.result);

pdfjsLib.getDocument(typedarray).promise.then(function(pdf){

pdf.getPage(1).then(function(page){

const canvas=document.getElementById("pdfCanvas");
const context=canvas.getContext("2d");

const viewport=page.getViewport({scale:1});

const container=document.querySelector(".pdf-container");

const scale=Math.min(
container.clientWidth/viewport.width,
container.clientHeight/viewport.height
);

const scaledViewport=page.getViewport({scale:scale});

canvas.height=scaledViewport.height;
canvas.width=scaledViewport.width;

page.render({
canvasContext:context,
viewport:scaledViewport
});

});

});

};

reader.readAsArrayBuffer(file);

});

async function caricaUtensili(){

const response = await fetch("utensili.json");
const utensili = await response.json();

const select = document.getElementById("toolsSelect");

utensili.forEach(u => {

const option = document.createElement("option");
option.value = u;
option.textContent = u;

select.appendChild(option);

});

}

caricaUtensili();

</script>

</body>
</html>