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

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

References

<p>Serve a definire paragrafi di testo
<html>Tag primario di un documento HTML
<pre>Indica una parte di testo preformattato
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
hreflangConsente di dichiarare la lingua del documento collegato.

Users

Log in to search for users

Explore

Find inspiration

JavaScript Debug Console

Quiz su Kylie Jenner

ES01a\\index.html

Comunicare sul Web [Template CSS]

Movimento libero JS

Calcolatrice Pitagora

Pitone Tutorial -esercizio conclus

Amazing Strange Rope Police

Esempio di Font Size in VW

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>