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

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

References

formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<q>Indica una parte di testo come citazione breve
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<b>Formatta il testo in grassetto
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video

Users

Log in to search for users

Explore

Find inspiration

Mappa Visiva (Wireframe) - Moduli

esercitazione 1

progetto 3 morra cinese

Bootstrap List Grid

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>